/* Grundlagen aus notes-and-trees 2.3 (Variablen, Knöpfe, Felder). Alle Farben als Variablen auf :root –
   jede neue Farbe gehört hierher, sonst bricht der Dunkelmodus (DESIGN §9). */
:root {
  --bg: #f4f1ea; --bg-grid: #e3ddd0; --panel: #fffdf8; --panel-2: #f7f3ea;
  --ink: #262218; --ink-soft: #6d6455; --ink-faint: #8a8170; --line: #ddd4c2;
  --accent: #6c4cf1; --accent-soft: #ece7ff; --green: #17915c; --green-soft: #ddf5e9; --danger: #c8402f;
  /* Konsensfarben, gedämpft wie in CapScape (catalog.json consensusBands) */
  --k-gruen: #7a9b76; --k-gelb: #c9b458; --k-orange: #c98a4b; --k-violett: #9483b5; --k-grau: #a7a196; --k-gruppe: #8f8676;
  --k-gruen-soft: #e6efe4; --k-gelb-soft: #f5efd2; --k-orange-soft: #f6e6d6; --k-grau-soft: #eeebe5;
  --shadow: 0 1px 2px rgba(40,32,15,.10), 0 6px 18px rgba(40,32,15,.09);
  --shadow-lift: 0 10px 20px rgba(40,32,15,.16), 0 30px 60px rgba(40,32,15,.20);
  --radius: 10px; --pw: 380px; --fs: 15px; --fs-scale: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a; --bg-grid: #212329; --panel: #22242b; --panel-2: #1b1d23;
    --ink: #e9e6df; --ink-soft: #a29d94; --ink-faint: #827d73; --line: #35383f;
    --accent: #a894ff; --accent-soft: #2d2a44; --green: #4fd39a; --green-soft: #1e332a; --danger: #ff8a7a;
    --k-gruen: #8fbf89; --k-gelb: #d9c46a; --k-orange: #e09a58; --k-violett: #ad9cd6; --k-grau: #8d887f; --k-gruppe: #9a917f;
    --k-gruen-soft: #223024; --k-gelb-soft: #34301b; --k-orange-soft: #3a2a1b; --k-grau-soft: #2a2a2c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --shadow-lift: 0 10px 20px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg: #15161a; --bg-grid: #212329; --panel: #22242b; --panel-2: #1b1d23;
  --ink: #e9e6df; --ink-soft: #a29d94; --ink-faint: #827d73; --line: #35383f;
  --accent: #a894ff; --accent-soft: #2d2a44; --green: #4fd39a; --green-soft: #1e332a; --danger: #ff8a7a;
  --k-gruen: #8fbf89; --k-gelb: #d9c46a; --k-orange: #e09a58; --k-violett: #ad9cd6; --k-grau: #8d887f; --k-gruppe: #9a917f;
  --k-gruen-soft: #223024; --k-gelb-soft: #34301b; --k-orange-soft: #3a2a1b; --k-grau-soft: #2a2a2c;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --shadow-lift: 0 10px 20px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: calc(var(--fs) * var(--fs-scale)); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
svg { display: block; width: 14px; height: 14px; flex: none; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button, .btn {
  font: inherit; font-size: calc(13.5px * var(--fs-scale)); border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s, color .12s;
}
button:hover:not(:disabled), .btn:hover { background: var(--panel-2); border-color: var(--ink-faint); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] button.primary { color: #16161a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primary { color: #16161a; } }
button.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
button.ghost:hover:not(:disabled) { background: var(--panel-2); border-color: var(--line); color: var(--ink); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
:where(button, input, textarea, select, a, [contenteditable="true"], .card):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=text], input[type=password], textarea, select {
  font: inherit; font-size: calc(13.5px * var(--fs-scale)); width: 100%; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; outline: none; resize: vertical;
}
textarea { min-height: 110px; line-height: 1.5; white-space: pre-wrap; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, textarea:disabled { opacity: .7; }
kbd { font: inherit; font-size: calc(12px * var(--fs-scale)); background: var(--panel); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; }
.warn { font-size: calc(12px * var(--fs-scale)); color: var(--ink-faint); line-height: 1.45; }
.err { font-size: calc(12.5px * var(--fs-scale)); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: 8px; padding: 8px 10px; word-break: break-word; }
.ok-box { font-size: calc(13px * var(--fs-scale)); background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  border-radius: 8px; padding: 10px 12px; }
.versteckt { display: none !important; }
.k-gruen { --c: var(--k-gruen); } .k-gelb { --c: var(--k-gelb); } .k-orange { --c: var(--k-orange); }
.k-grau { --c: var(--k-grau); } .k-violett { --c: var(--k-violett); } .k-gruppe { --c: var(--k-gruppe); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }