:root{
  --bg:#0f172a; --panel:#0b1224; --panel-2:#111827; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#22c55e; --border:#1f2937; --radius:16px;
  --blue:#3b82f6; --red:#ef4444; --yellow:#eab308; --green:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%, #14213a 0%, var(--bg) 50%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}

.app{max-width:960px;margin:0 auto;padding:24px 16px;display:grid;gap:16px}
.task-wrap{text-align:center;display:grid;gap:8px}
.badge{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted);background:#0b1224}
h1{margin:6px 0 0;font-size:clamp(18px,2.6vw,24px);font-weight:650}
.feedback{min-height:22px;font-weight:600}
.feedback.ok{color:#34d399}
.feedback.bad{color:#fca5a5}

.board{display:grid;place-items:center}
.circle-wrap{width:min(78vmin,520px);aspect-ratio:1/1;background:linear-gradient(145deg,#0b1224,#0a0f22);
  border:1px solid var(--border);border-radius:20px;padding:14px}
svg{width:100%;height:100%}

.ui{display:grid;gap:12px;justify-items:center}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.swatch{width:40px;height:40px;border-radius:12px;border:2px solid #0003;cursor:pointer;background:#334155;outline:2px solid transparent}
.swatch.blue{background:var(--blue)}
.swatch.red{background:var(--red)}
.swatch.yellow{background:var(--yellow)}
.swatch.green{background:var(--green)}
.swatch.eraser{background:#374151;color:#fff;font-weight:800;line-height:36px}
.swatch.active{outline:2px solid #fff}

.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
button,select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:12px}
button{cursor:pointer}
button.primary{background:var(--accent);color:#062b11;border-color:#169c46}
button:disabled{opacity:.6;cursor:not-allowed}
label{display:flex;align-items:center;gap:8px;color:var(--muted)}
.explain{color:var(--muted);text-align:center;margin:0;min-height:1.2em}




/* bestehend lassen … */

.slice-fill{
  stroke-width:.003;
  /* NEU: Slices überall klickbar machen */
  pointer-events: all;
}

/* NEU: Linien sollen Klicks NICHT abfangen */
.slice-outline,
.slice-boundary{
  pointer-events: none;
}

.toggle{
  display:flex; align-items:center; gap:8px; color:var(--muted);
  user-select:none;
}
.toggle input{ transform: translateY(1px); }