/* ==========================================================================
   Designsystem „Arbeitsplatz“ · Tokens
   Aufbau: ein Werkzeugtisch. Rahmen ruhig, Daten scharf, Bewegung kurz.
   V1 Graphit/Kobalt (Trade8-Aufbau) · V2 Werkbank (frei) · V3 Terminal (TV × Tesla)
   ========================================================================== */
:root {
  /* Schrift-Skala aus der Entscheidung vom 25.10.: 12/14/16/22 + 28 für Kennzahlen, Schnitte 400/500 */
  --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-22: 22px; --s-28: 28px; --s-11: 11px;
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px;
  /* Bewegung: hinein schnell, hinaus etwas langsamer (wirkt weich, nie träge) */
  --d-druck: 80ms; --d-rein: 140ms; --d-raus: 220ms; --d-gleit: 260ms; --d-panel: 320ms; --d-hinweis: 600ms;
  --k-aus: cubic-bezier(.2, .8, .2, 1);
  --k-std: cubic-bezier(.4, 0, .2, 1);
  --k-feder: cubic-bezier(.34, 1.4, .64, 1);

  /* V1 · Hell */
  --f-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-display: "IBM Plex Sans", system-ui, sans-serif;
  --r-s: 4px; --r-m: 6px; --r-l: 10px;
  --grund: #eef1f5; --flaeche: #ffffff; --flaeche-2: #f5f7fa; --flaeche-3: #e9edf3; --menue: #f8f9fb;
  --linie: #dde2ea; --linie-2: #c4ccd8; --text: #141a24; --text-2: #485366; --text-3: #7a8597;
  --akzent: #2457e6; --akzent-2: #1a45c2; --akzent-weich: rgba(36, 87, 230, .10); --auf-akzent: #ffffff;
  --gewinn: #13895a; --verlust: #d03a3d; --warn: #b4741a; --gewinn-weich: rgba(19, 137, 90, .11); --verlust-weich: rgba(208, 58, 61, .10); --warn-weich: rgba(180, 116, 26, .12);
  --gewinn-vol: rgba(19, 137, 90, .22); --verlust-vol: rgba(208, 58, 61, .2);
  --c-gitter: rgba(20, 26, 36, .06); --c-achse: #141a24; --auf-achse: #ffffff; --c-kreuz: rgba(20, 26, 36, .45); --c-ma: #c9821c;
  --c-bereich: rgba(36, 87, 230, .06); --c-stufe: rgba(36, 87, 230, .3); --c-kerze-hover: rgba(36, 87, 230, .05);
  --spot: rgba(36, 87, 230, .07); --spot-rand: rgba(36, 87, 230, .35);
  --schatten-1: 0 1px 0 rgba(20, 26, 36, .04), 0 1px 2px rgba(20, 26, 36, .06);
  --schatten-2: 0 1px 2px rgba(20, 26, 36, .06), 0 6px 16px -4px rgba(20, 26, 36, .10);
  --schatten-3: 0 2px 6px rgba(20, 26, 36, .08), 0 24px 48px -12px rgba(20, 26, 36, .22);
  --fokus: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--akzent);
  --tip-bg: #141a24; --tip-text: #f2f5f9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --grund: #0d1117; --flaeche: #141a22; --flaeche-2: #1a212b; --flaeche-3: #212a36; --menue: #10151c;
  --linie: #232c38; --linie-2: #33404f; --text: #e7ecf3; --text-2: #a5afbf; --text-3: #6d798c;
  --akzent: #5b8cff; --akzent-2: #7aa2ff; --akzent-weich: rgba(91, 140, 255, .14); --auf-akzent: #08101f;
  --gewinn: #36c58c; --verlust: #f0646a; --warn: #e2b04a; --gewinn-weich: rgba(54, 197, 140, .13); --verlust-weich: rgba(240, 100, 106, .13); --warn-weich: rgba(226, 176, 74, .14);
  --gewinn-vol: rgba(54, 197, 140, .25); --verlust-vol: rgba(240, 100, 106, .22);
  --c-gitter: rgba(231, 236, 243, .05); --c-achse: #e7ecf3; --auf-achse: #0d1117; --c-kreuz: rgba(231, 236, 243, .4); --c-ma: #e2b04a;
  --c-bereich: rgba(91, 140, 255, .08); --c-stufe: rgba(91, 140, 255, .32); --c-kerze-hover: rgba(91, 140, 255, .06);
  --spot: rgba(91, 140, 255, .09); --spot-rand: rgba(91, 140, 255, .45);
  --schatten-1: 0 1px 0 rgba(0, 0, 0, .3); --schatten-2: 0 8px 24px -6px rgba(0, 0, 0, .55); --schatten-3: 0 24px 64px -12px rgba(0, 0, 0, .7);
  --tip-bg: #e7ecf3; --tip-text: #0d1117; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --grund: #0d1117; --flaeche: #141a22; --flaeche-2: #1a212b; --flaeche-3: #212a36; --menue: #10151c;
  --linie: #232c38; --linie-2: #33404f; --text: #e7ecf3; --text-2: #a5afbf; --text-3: #6d798c;
  --akzent: #5b8cff; --akzent-2: #7aa2ff; --akzent-weich: rgba(91, 140, 255, .14); --auf-akzent: #08101f;
  --gewinn: #36c58c; --verlust: #f0646a; --warn: #e2b04a; --gewinn-weich: rgba(54, 197, 140, .13); --verlust-weich: rgba(240, 100, 106, .13); --warn-weich: rgba(226, 176, 74, .14);
  --gewinn-vol: rgba(54, 197, 140, .25); --verlust-vol: rgba(240, 100, 106, .22);
  --c-gitter: rgba(231, 236, 243, .05); --c-achse: #e7ecf3; --auf-achse: #0d1117; --c-kreuz: rgba(231, 236, 243, .4); --c-ma: #e2b04a;
  --c-bereich: rgba(91, 140, 255, .08); --c-stufe: rgba(91, 140, 255, .32); --c-kerze-hover: rgba(91, 140, 255, .06);
  --spot: rgba(91, 140, 255, .09); --spot-rand: rgba(91, 140, 255, .45);
  --schatten-1: 0 1px 0 rgba(0, 0, 0, .3); --schatten-2: 0 8px 24px -6px rgba(0, 0, 0, .55); --schatten-3: 0 24px 64px -12px rgba(0, 0, 0, .7);
  --tip-bg: #e7ecf3; --tip-text: #0d1117; color-scheme: dark;
}

/* V2 · Werkbank: Stein und Petrol, weiche Flächen, große Radien */
:root[data-v="2"] {
  --f-ui: "Geist", system-ui, -apple-system, sans-serif; --f-data: "Geist Mono", ui-monospace, Menlo, monospace; --f-display: "Geist", system-ui, sans-serif;
  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --grund: #ecede8; --flaeche: #fafaf7; --flaeche-2: #f2f3ee; --flaeche-3: #e6e8e1; --menue: #e4e6df;
  --linie: #dcdfd6; --linie-2: #c2c7bb; --text: #171b19; --text-2: #4e5650; --text-3: #838b84;
  --akzent: #0b7f95; --akzent-2: #086879; --akzent-weich: rgba(11, 127, 149, .11); --auf-akzent: #ffffff;
  --gewinn: #2f8a3c; --verlust: #c8402f; --warn: #a8761b;
  --gewinn-weich: rgba(47, 138, 60, .12); --verlust-weich: rgba(200, 64, 47, .11);
  --gewinn-vol: rgba(47, 138, 60, .22); --verlust-vol: rgba(200, 64, 47, .2);
  --c-gitter: rgba(23, 27, 25, .055); --c-achse: #171b19; --auf-achse: #fafaf7; --c-kreuz: rgba(23, 27, 25, .4); --c-ma: #a8761b;
  --c-bereich: rgba(11, 127, 149, .07); --c-stufe: rgba(11, 127, 149, .32); --c-kerze-hover: rgba(11, 127, 149, .05);
  --spot: rgba(11, 127, 149, .08); --spot-rand: rgba(11, 127, 149, .32);
  --schatten-1: 0 1px 2px rgba(23, 27, 25, .05); --schatten-2: 0 2px 4px rgba(23, 27, 25, .04), 0 12px 28px -8px rgba(23, 27, 25, .14); --schatten-3: 0 30px 70px -20px rgba(23, 27, 25, .3);
  --tip-bg: #171b19; --tip-text: #f2f3ee;
}
@media (prefers-color-scheme: dark) { :root[data-v="2"]:not([data-theme="light"]) {
  --grund: #0f1211; --flaeche: #171b1a; --flaeche-2: #1d2220; --flaeche-3: #252b29; --menue: #131716;
  --linie: #262c2a; --linie-2: #36403c; --text: #e9ece8; --text-2: #a9b1ab; --text-3: #707a74;
  --akzent: #3fc6df; --akzent-2: #6fd6ea; --akzent-weich: rgba(63, 198, 223, .13); --auf-akzent: #06171b;
  --gewinn: #5fcf6e; --verlust: #f07a68; --warn: #e0b257;
  --gewinn-weich: rgba(95, 207, 110, .13); --verlust-weich: rgba(240, 122, 104, .13);
  --gewinn-vol: rgba(95, 207, 110, .24); --verlust-vol: rgba(240, 122, 104, .22);
  --c-gitter: rgba(233, 236, 232, .045); --c-achse: #e9ece8; --auf-achse: #0f1211; --c-kreuz: rgba(233, 236, 232, .4); --c-ma: #e0b257;
  --c-bereich: rgba(63, 198, 223, .08); --c-stufe: rgba(63, 198, 223, .3); --c-kerze-hover: rgba(63, 198, 223, .06);
  --spot: rgba(63, 198, 223, .08); --spot-rand: rgba(63, 198, 223, .4);
  --schatten-1: 0 1px 0 rgba(0, 0, 0, .35); --schatten-2: 0 12px 30px -10px rgba(0, 0, 0, .6); --schatten-3: 0 30px 80px -20px rgba(0, 0, 0, .75);
  --tip-bg: #e9ece8; --tip-text: #0f1211;
} }
:root[data-v="2"][data-theme="dark"] {
  --grund: #0f1211; --flaeche: #171b1a; --flaeche-2: #1d2220; --flaeche-3: #252b29; --menue: #131716;
  --linie: #262c2a; --linie-2: #36403c; --text: #e9ece8; --text-2: #a9b1ab; --text-3: #707a74;
  --akzent: #3fc6df; --akzent-2: #6fd6ea; --akzent-weich: rgba(63, 198, 223, .13); --auf-akzent: #06171b;
  --gewinn: #5fcf6e; --verlust: #f07a68; --warn: #e0b257;
  --gewinn-weich: rgba(95, 207, 110, .13); --verlust-weich: rgba(240, 122, 104, .13);
  --gewinn-vol: rgba(95, 207, 110, .24); --verlust-vol: rgba(240, 122, 104, .22);
  --c-gitter: rgba(233, 236, 232, .045); --c-achse: #e9ece8; --auf-achse: #0f1211; --c-kreuz: rgba(233, 236, 232, .4); --c-ma: #e0b257;
  --c-bereich: rgba(63, 198, 223, .08); --c-stufe: rgba(63, 198, 223, .3); --c-kerze-hover: rgba(63, 198, 223, .06);
  --spot: rgba(63, 198, 223, .08); --spot-rand: rgba(63, 198, 223, .4);
  --schatten-1: 0 1px 0 rgba(0, 0, 0, .35); --schatten-2: 0 12px 30px -10px rgba(0, 0, 0, .6); --schatten-3: 0 30px 80px -20px rgba(0, 0, 0, .75);
  --tip-bg: #e9ece8; --tip-text: #0f1211;
}

/* V3 · Terminal: TradingView-Dichte, Tesla-Ruhe. Flach, keine Schatten, Linien statt Karten */
:root[data-v="3"] {
  --f-ui: "Manrope", system-ui, -apple-system, sans-serif; --f-data: "JetBrains Mono", ui-monospace, Menlo, monospace; --f-display: "Manrope", system-ui, sans-serif;
  --r-s: 4px; --r-m: 4px; --r-l: 8px;
  --grund: #f4f4f4; --flaeche: #ffffff; --flaeche-2: #f0f3fa; --flaeche-3: #e7eaf1; --menue: #ffffff;
  --linie: #e0e3eb; --linie-2: #c9cdd6; --text: #171a20; --text-2: #5c5e62; --text-3: #8b8e94;
  --akzent: #3e6ae1; --akzent-2: #2f56c4; --akzent-weich: rgba(62, 106, 225, .10); --auf-akzent: #ffffff;
  --gewinn: #089981; --verlust: #f23645; --warn: #e08a00;
  --gewinn-weich: rgba(8, 153, 129, .1); --verlust-weich: rgba(242, 54, 69, .09);
  --gewinn-vol: rgba(8, 153, 129, .3); --verlust-vol: rgba(242, 54, 69, .28);
  --c-gitter: rgba(23, 26, 32, .06); --c-achse: #131722; --auf-achse: #ffffff; --c-kreuz: rgba(23, 26, 32, .5); --c-ma: #2962ff;
  --c-bereich: rgba(62, 106, 225, .06); --c-stufe: rgba(62, 106, 225, .3); --c-kerze-hover: rgba(62, 106, 225, .05);
  --spot: rgba(62, 106, 225, .05); --spot-rand: rgba(62, 106, 225, .3);
  --schatten-1: none; --schatten-2: 0 4px 14px rgba(23, 26, 32, .08); --schatten-3: 0 10px 40px rgba(23, 26, 32, .16);
  --tip-bg: #171a20; --tip-text: #ffffff;
}
@media (prefers-color-scheme: dark) { :root[data-v="3"]:not([data-theme="light"]) {
  --grund: #0b0c0e; --flaeche: #131418; --flaeche-2: #1b1d22; --flaeche-3: #24262c; --menue: #0f1013;
  --linie: #24262c; --linie-2: #34373e; --text: #eeeeee; --text-2: #a2a4a8; --text-3: #6b6e75;
  --akzent: #5b82f0; --akzent-2: #7d9cf4; --akzent-weich: rgba(91, 130, 240, .14); --auf-akzent: #ffffff;
  --gewinn: #22ab94; --verlust: #f7525f; --warn: #f0a428;
  --gewinn-weich: rgba(34, 171, 148, .13); --verlust-weich: rgba(247, 82, 95, .12);
  --gewinn-vol: rgba(34, 171, 148, .32); --verlust-vol: rgba(247, 82, 95, .3);
  --c-gitter: rgba(238, 238, 238, .045); --c-achse: #363a45; --auf-achse: #eeeeee; --c-kreuz: rgba(158, 162, 170, .65); --c-ma: #5b82f0;
  --c-bereich: rgba(91, 130, 240, .07); --c-stufe: rgba(91, 130, 240, .3); --c-kerze-hover: rgba(91, 130, 240, .05);
  --spot: rgba(91, 130, 240, .06); --spot-rand: rgba(91, 130, 240, .35);
  --schatten-1: none; --schatten-2: 0 6px 20px rgba(0, 0, 0, .5); --schatten-3: 0 16px 60px rgba(0, 0, 0, .7);
  --tip-bg: #363a45; --tip-text: #eeeeee;
} }
:root[data-v="3"][data-theme="dark"] {
  --grund: #0b0c0e; --flaeche: #131418; --flaeche-2: #1b1d22; --flaeche-3: #24262c; --menue: #0f1013;
  --linie: #24262c; --linie-2: #34373e; --text: #eeeeee; --text-2: #a2a4a8; --text-3: #6b6e75;
  --akzent: #5b82f0; --akzent-2: #7d9cf4; --akzent-weich: rgba(91, 130, 240, .14); --auf-akzent: #ffffff;
  --gewinn: #22ab94; --verlust: #f7525f; --warn: #f0a428;
  --gewinn-weich: rgba(34, 171, 148, .13); --verlust-weich: rgba(247, 82, 95, .12);
  --gewinn-vol: rgba(34, 171, 148, .32); --verlust-vol: rgba(247, 82, 95, .3);
  --c-gitter: rgba(238, 238, 238, .045); --c-achse: #363a45; --auf-achse: #eeeeee; --c-kreuz: rgba(158, 162, 170, .65); --c-ma: #5b82f0;
  --c-bereich: rgba(91, 130, 240, .07); --c-stufe: rgba(91, 130, 240, .3); --c-kerze-hover: rgba(91, 130, 240, .05);
  --spot: rgba(91, 130, 240, .06); --spot-rand: rgba(91, 130, 240, .35);
  --schatten-1: none; --schatten-2: 0 6px 20px rgba(0, 0, 0, .5); --schatten-3: 0 16px 60px rgba(0, 0, 0, .7);
  --tip-bg: #363a45; --tip-text: #eeeeee;
}
/* ================= Grundlagen ================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--grund); color: var(--text); font-family: var(--f-ui); font-size: var(--s-14); line-height: 1.4; -webkit-font-smoothing: antialiased; transition: background-color var(--d-raus) var(--k-std), color var(--d-raus) var(--k-std); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-s); }
.zahl, .mono { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.auf { color: var(--gewinn); } .ab { color: var(--verlust); } .warnf { color: var(--warn); } .hilfe { color: var(--text-3); } .neben { color: var(--text-2); }
.s12 { font-size: var(--s-12); } .s16 { font-size: var(--s-16); } .s22 { font-size: var(--s-22); } .s28 { font-size: var(--s-28); }
.w5 { font-weight: 500; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.k { width: 14px; height: 14px; }
.versal { text-transform: uppercase; letter-spacing: .07em; font-size: var(--s-12); color: var(--text-3); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ================= Hinweisfenster (600 ms, dann warm) ================= */
.ap-tip { position: fixed; left: 0; top: 0; z-index: 900; max-width: 280px; padding: 7px 11px; border-radius: var(--r-m); background: var(--tip-bg); color: var(--tip-text); font-size: var(--s-12); line-height: 1.35; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity 90ms var(--k-std), translate 90ms var(--k-std); display: flex; gap: 10px; align-items: center; box-shadow: var(--schatten-2); }
.ap-tip.unten { translate: 0 -4px; }
.ap-tip.an { opacity: 1; translate: 0 0; transition: opacity 120ms var(--k-aus), translate 160ms var(--k-aus); }
.ap-tip-k { font-family: var(--f-data); font-size: 11px; padding: 1px 5px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--tip-text) 30%, transparent); opacity: .8; }
.ap-tip-a { position: absolute; left: var(--ax); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--tip-bg); rotate: 45deg; border-radius: 1px; }
.ap-tip.unten .ap-tip-a { bottom: auto; top: -4px; }

/* ================= Gleiter (wandernde Markierung) ================= */
[data-glide] { position: relative; isolation: isolate; }
.glide { position: absolute; left: 0; top: 0; z-index: -1; border-radius: inherit; background: var(--flaeche-3); opacity: 0; pointer-events: none; transition: transform var(--d-gleit) var(--k-aus), width var(--d-gleit) var(--k-aus), height var(--d-gleit) var(--k-aus), opacity var(--d-rein) linear; }

/* ================= Knöpfe ================= */
.knopf { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-m); font-size: var(--s-14); font-weight: 500; white-space: nowrap; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); transition: background-color var(--d-raus) var(--k-std), border-color var(--d-raus) var(--k-std), color var(--d-raus) var(--k-std), transform var(--d-druck) var(--k-std); }
.knopf:hover { background: var(--flaeche-2); border-color: var(--linie-2); transition-duration: var(--d-rein); }
.knopf:active { transform: scale(.98); }
.knopf.primaer { background: var(--akzent); border-color: transparent; color: var(--auf-akzent); }
.knopf.primaer:hover { background: var(--akzent-2); }
.knopf.leise { border-color: transparent; background: transparent; color: var(--text-2); }
.knopf.leise:hover { background: var(--flaeche-2); color: var(--text); }
.knopf.gefahr { color: var(--verlust); background: var(--verlust-weich); border-color: transparent; }
.knopf.gefahr:hover { background: var(--verlust); color: #fff; }
.knopf.klein { height: 26px; padding: 0 9px; font-size: var(--s-12); }
.knopf[disabled] { opacity: .45; pointer-events: none; }
.welle { position: absolute; border-radius: 50%; background: currentColor; opacity: .14; transform: scale(0); animation: welle 520ms var(--k-aus) forwards; pointer-events: none; }
@keyframes welle { to { transform: scale(1); opacity: 0; } }
.symk { position: relative; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--r-m); color: var(--text-2); transition: background-color var(--d-raus) var(--k-std), color var(--d-raus) var(--k-std); }
.symk:hover { background: var(--flaeche-3); color: var(--text); transition-duration: var(--d-rein); }
.symk.an { background: var(--akzent-weich); color: var(--akzent); }
.symk .ico { transition: transform var(--d-gleit) var(--k-feder); }
.symk:hover .ico { transform: scale(1.08); }
.symk:active .ico { transform: scale(.92); transition-duration: var(--d-druck); }

/* ================= Chips, Marken ================= */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-s); font-size: var(--s-12); background: var(--flaeche-2); color: var(--text-2); white-space: nowrap; border: 1px solid transparent; transition: border-color var(--d-raus), background-color var(--d-raus), color var(--d-raus); }
a.chip, button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--linie-2); color: var(--text); transition-duration: var(--d-rein); }
.chip.akz { background: var(--akzent-weich); color: var(--akzent); }
.chip.gew { background: var(--gewinn-weich); color: var(--gewinn); }
.chip.ver { background: var(--verlust-weich); color: var(--verlust); }
.chip.wrn { background: var(--warn-weich); color: var(--warn); }
.chip.strich { background: transparent; border: 1px dashed var(--linie-2); }
.chip.strich:hover { border-color: var(--akzent); color: var(--akzent); }
.punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-3); }
.punkt.lauf { background: var(--gewinn); box-shadow: 0 0 0 0 var(--gewinn); animation: puls 1600ms var(--k-std) infinite; }
.punkt.pause { background: var(--warn); } .punkt.stopp { background: transparent; border: 1.5px solid var(--text-3); } .punkt.fehler { background: var(--verlust); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gewinn) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* ================= Reiterleiste ================= */
.reiter { display: inline-flex; gap: 2px; padding: 3px; border-radius: calc(var(--r-m) + 3px); background: var(--flaeche-2); border: 1px solid var(--linie); }
.reiter > .glide { background: var(--flaeche-3); }
.reiter button { position: relative; height: 26px; padding: 0 12px; border-radius: var(--r-m); font-size: var(--s-14); color: var(--text-2); transition: color var(--d-raus); white-space: nowrap; }
.reiter button:hover { color: var(--text); transition-duration: var(--d-rein); }
.reiter button.aktiv { color: var(--text); font-weight: 500; background: var(--flaeche); box-shadow: var(--schatten-1), 0 0 0 1px var(--linie); }
.reiter.klein button { height: 22px; padding: 0 8px; font-size: var(--s-12); }

/* ================= Kachel ================= */
.kachel { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten-1); transition: border-color var(--d-raus) var(--k-std), box-shadow var(--d-raus) var(--k-std), transform var(--d-gleit) var(--k-aus); }
.kachel.spot::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%); transition: opacity var(--d-raus) var(--k-std); }
.kachel.spot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot-rand), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity var(--d-raus) var(--k-std); }
.kachel.spot:hover::before, .kachel.spot:hover::after { opacity: 1; transition-duration: var(--d-rein); }
.kachel:hover { border-color: var(--linie-2); transition-duration: var(--d-rein); }
.k-kopf { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 16px 4px; }
.k-titel { font-size: var(--s-16); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-frage { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; color: var(--text-3); border: 1px solid var(--linie-2); opacity: .55; transition: opacity var(--d-raus), color var(--d-raus), border-color var(--d-raus); }
.kachel:hover .k-frage { opacity: 1; transition-duration: var(--d-rein); }
.k-frage:hover { color: var(--akzent); border-color: var(--akzent); }
.k-fuell { flex: 1; }
.k-wert { font-size: var(--s-12); padding: 3px 8px; border-radius: var(--r-s); background: var(--flaeche-2); }
.k-koerper { padding: 8px 16px 16px; min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.k-griff, .k-weg { display: none; }
.anordnen .kachel { border-style: dashed; border-color: var(--linie-2); cursor: grab; box-shadow: none; }
.anordnen .kachel .k-griff, .anordnen .kachel .k-weg { display: inline-grid; }
.anordnen .kachel:hover { border-color: var(--akzent); }
.anordnen .kachel .k-koerper { pointer-events: none; opacity: .72; }
.anordnen .kachel.wird-gezogen { opacity: .35; }
.anordnen .kachel::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); border-radius: 0 0 var(--r-l) 0; opacity: .6; }
.anordnen .kachel { animation: einrasten var(--d-panel) var(--k-feder); }
@keyframes einrasten { from { transform: scale(.985); } }
.k-griff { color: var(--text-3); cursor: grab; }
.k-weg { width: 22px; height: 22px; place-items: center; border-radius: 4px; color: var(--text-3); transition: background var(--d-raus), color var(--d-raus); }
.k-weg:hover { background: var(--verlust-weich); color: var(--verlust); }

/* ================= Tabellen ================= */
.tab-wrap { overflow-x: auto; margin: 0 -16px; }
table.tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--s-14); }
.tab th { position: sticky; top: 0; text-align: left; font-weight: 500; font-size: var(--s-12); color: var(--text-3); padding: 6px 10px; border-bottom: 1px solid var(--linie); background: var(--flaeche); white-space: nowrap; cursor: default; }
.tab th.sort { cursor: pointer; transition: color var(--d-raus); }
.tab th.sort:hover { color: var(--text); }
.tab th.sort::after { content: "↕"; margin-left: 4px; opacity: 0; transition: opacity var(--d-raus); }
.tab th.sort:hover::after { opacity: .6; }
.tab th.sort.aktiv::after { content: "↓"; opacity: 1; color: var(--akzent); }
.tab th:first-child, .tab td:first-child { padding-left: 16px; }
.tab th:last-child, .tab td:last-child { padding-right: 16px; }
.tab td { padding: 7px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; transition: background-color var(--d-raus) var(--k-std); }
.tab td.r, .tab th.r { text-align: right; }
.tab tbody tr { position: relative; }
.tab tbody tr:hover td { background: var(--flaeche-2); transition-duration: var(--d-rein); }
.tab tbody td:first-child { position: relative; }
.tab tbody td:first-child::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--akzent); transform: scaleY(0); transition: transform var(--d-raus) var(--k-aus); }
.tab tbody tr:hover td:first-child::before { transform: scaleY(1); transition-duration: var(--d-gleit); }
.tab .name { color: var(--text); transition: color var(--d-raus); }
.tab tr:hover .name { color: var(--akzent); }
.tab .akt { opacity: 0; translate: 6px 0; transition: opacity var(--d-raus), translate var(--d-raus) var(--k-aus); display: inline-flex; gap: 4px; }
.tab tr:hover .akt, .tab tr:focus-within .akt { opacity: 1; translate: 0 0; transition-duration: var(--d-rein); }
.tab tbody tr:last-child td { border-bottom: 0; }

/* ================= Formular: Feld, Schalter, Regler, Segment ================= */
.feld { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); transition: border-color var(--d-raus), box-shadow var(--d-raus); min-width: 0; }
.feld:hover { border-color: var(--linie-2); transition-duration: var(--d-rein); }
.feld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.feld input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; }
.feld .einh { color: var(--text-3); font-size: var(--s-12); white-space: nowrap; }
.feld .pm { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--text-2); transition: background var(--d-raus); }
.feld .pm:hover { background: var(--flaeche-3); color: var(--text); }
.schalter { position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; background: var(--linie-2); transition: background-color var(--d-gleit) var(--k-std); }
.schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--d-gleit) var(--k-feder), width var(--d-rein) var(--k-std); }
.schalter:hover::after { box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 4px var(--akzent-weich); }
.schalter:active::after { width: 20px; }
.schalter[aria-checked="true"] { background: var(--akzent); }
.schalter[aria-checked="true"]::after { transform: translateX(16px); }
.schalter[aria-checked="true"]:active::after { transform: translateX(12px); }
.schalter.rot[aria-checked="true"] { background: var(--verlust); }
.regler { position: relative; height: 28px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.regler .bahn { position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--flaeche-3); }
.regler .voll { position: absolute; left: 0; height: 4px; border-radius: 4px; background: var(--akzent); }
.regler .grenze { position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--warn); border-radius: 1px; }
.regler .knauf { position: absolute; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--akzent); box-shadow: var(--schatten-1); transition: transform var(--d-rein) var(--k-feder), box-shadow var(--d-rein); }
.regler:hover .knauf { transform: scale(1.15); box-shadow: 0 0 0 6px var(--akzent-weich); }
.regler.zieht .knauf { transform: scale(1.25); box-shadow: 0 0 0 8px var(--akzent-weich); }
.regler .blase { position: absolute; bottom: 26px; translate: -50% 4px; padding: 2px 6px; border-radius: 4px; background: var(--tip-bg); color: var(--tip-text); font-size: 11px; font-family: var(--f-data); opacity: 0; transition: opacity var(--d-rein), translate var(--d-rein) var(--k-aus); pointer-events: none; white-space: nowrap; }
.regler:hover .blase, .regler.zieht .blase { opacity: 1; translate: -50% 0; }
.segment { display: inline-flex; padding: 2px; border-radius: var(--r-m); background: var(--flaeche-2); border: 1px solid var(--linie); }
.segment > .glide { background: var(--flaeche); box-shadow: var(--schatten-1), 0 0 0 1px var(--linie); }
.segment button { height: 24px; padding: 0 10px; border-radius: calc(var(--r-m) - 2px); font-size: var(--s-12); color: var(--text-2); transition: color var(--d-raus); }
.segment button.aktiv { color: var(--text); font-weight: 500; }
.segment button:hover { color: var(--text); }
.segment button[disabled] { opacity: .45; }

/* ================= Aufklapper / Popover ================= */
.aufkl { position: relative; }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 300px; padding: 8px; border-radius: var(--r-l); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-3); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity 120ms var(--k-std), transform 160ms var(--k-aus); }
.pop.rechts { left: auto; right: 0; transform-origin: top right; }
.aufkl.offen .pop { opacity: 1; transform: none; pointer-events: auto; }
.aufkl .dreh { transition: transform var(--d-gleit) var(--k-aus); }
.aufkl.offen .dreh { transform: rotate(180deg); }
.pop-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: var(--r-s); transition: background var(--d-raus); }
.pop-zeile:hover { background: var(--flaeche-2); transition-duration: var(--d-rein); }
.pop-fuss { padding: 8px 8px 2px; margin-top: 4px; border-top: 1px solid var(--linie); font-size: var(--s-12); color: var(--text-3); }

/* ================= Dialog ================= */
.schleier { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--grund) 60%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 180ms var(--k-std); }
.schleier.an { opacity: 1; pointer-events: auto; }
.dialog { width: min(440px, 100%); padding: 20px; border-radius: var(--r-l); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-3); transform: translateY(8px) scale(.97); transition: transform var(--d-panel) var(--k-feder); }
.schleier.an .dialog { transform: none; }
.dialog h3 { margin: 0 0 8px; font-size: var(--s-16); font-weight: 500; }
.dialog p { margin: 0 0 16px; color: var(--text-2); }
.dialog .reihe { display: flex; justify-content: flex-end; gap: 8px; }

/* ================= Mini-Diagramme ================= */
.spark { width: 100%; height: 32px; display: block; overflow: visible; cursor: crosshair; }
.spark-ln { fill: none; stroke: var(--akzent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-fl { fill: var(--akzent-weich); stroke: none; }
.spark.auf .spark-ln { stroke: var(--gewinn); } .spark.auf .spark-fl { fill: var(--gewinn-weich); }
.spark.ab .spark-ln { stroke: var(--verlust); } .spark.ab .spark-fl { fill: var(--verlust-weich); }
.spark-pt { fill: var(--flaeche); stroke: var(--akzent); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: cx 60ms linear, cy 60ms linear; }
.spark.auf .spark-pt { stroke: var(--gewinn); } .spark.ab .spark-pt { stroke: var(--verlust); }
.spark-x { stroke: var(--text-3); stroke-dasharray: 2 2; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--d-rein); }
.spark.zeigt .spark-x { opacity: .7; }
.balken { height: 6px; border-radius: 3px; background: var(--flaeche-3); position: relative; overflow: hidden; }
.balken > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--akzent); transition: width 600ms var(--k-aus); }
.balken.warn > i { background: var(--warn); } .balken.rot > i { background: var(--verlust); } .balken.gruen > i { background: var(--gewinn); }

/* Kurs blitzt bei Änderung */
.blitz-auf { animation: blitzA 700ms var(--k-std); } .blitz-ab { animation: blitzB 700ms var(--k-std); }
@keyframes blitzA { 0% { background: var(--gewinn-weich); color: var(--gewinn); } 100% { background: transparent; } }
@keyframes blitzB { 0% { background: var(--verlust-weich); color: var(--verlust); } 100% { background: transparent; } }
[data-live] { border-radius: 3px; padding: 0 2px; margin: 0 -2px; }

/* ================= Chart-Fläche ================= */
.chartbox { position: relative; min-height: 220px; flex: 1; overflow: hidden; }
.ap-cv { position: absolute; inset: 0; display: block; touch-action: none; }
.legende { position: absolute; left: 10px; top: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--f-data); font-size: 11px; color: var(--text-3); pointer-events: none; }
.legende b { font-weight: 500; }
.chart-werkz { position: absolute; right: 74px; top: 8px; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: var(--r-m); background: color-mix(in srgb, var(--flaeche) 85%, transparent); border: 1px solid var(--linie); opacity: 0; translate: 0 -4px; transition: opacity var(--d-raus), translate var(--d-raus) var(--k-aus); }
.chartbox:hover .chart-werkz { opacity: 1; translate: 0 0; transition-duration: var(--d-rein); }
.chart-werkz .symk { width: 26px; height: 26px; }

/* Linien-Diagramm (SVG) mit Fadenkreuz */
.ld { position: relative; }
.ld svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ld .ld-ln { fill: none; stroke: var(--akzent); stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.ld .ld-fl { fill: url(#ldVerlauf); }
.ld .ld-g { stroke: var(--c-gitter); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ld .ld-t { fill: var(--text-3); font-size: 11px; font-family: var(--f-data); }
.ld .ld-x { stroke: var(--c-kreuz); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--d-rein); }
.ld .ld-p { fill: var(--flaeche); stroke: var(--akzent); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--d-rein); }
.ld.zeigt .ld-x, .ld.zeigt .ld-p { opacity: 1; }
.ld-info { position: absolute; top: 0; padding: 4px 8px; border-radius: var(--r-s); background: var(--tip-bg); color: var(--tip-text); font-size: 11px; font-family: var(--f-data); white-space: nowrap; pointer-events: none; opacity: 0; translate: -50% -4px; transition: opacity var(--d-rein), translate var(--d-rein) var(--k-aus); }
.ld.zeigt .ld-info { opacity: 1; translate: -50% 0; }

/* Mosaik (Fläche = Kapital) */
.mosaik { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 22px; gap: 3px; }
.mosaik i { border-radius: 3px; cursor: pointer; transition: transform var(--d-rein) var(--k-aus), box-shadow var(--d-rein), opacity var(--d-raus); }
.mosaik:hover i { opacity: .55; }
.mosaik i:hover { opacity: 1; transform: scale(1.06); z-index: 1; box-shadow: 0 0 0 1.5px var(--akzent), var(--schatten-2); }
.mosaik i:active { transform: scale(.97); }

/* Divergenzbalken */
.div-z { display: grid; grid-template-columns: 96px 1fr 1fr 64px; align-items: center; gap: 0; height: 22px; font-size: var(--s-12); border-radius: var(--r-s); transition: background var(--d-raus); }
.div-z:hover { background: var(--flaeche-2); transition-duration: var(--d-rein); }
.div-z .n { color: var(--text-2); padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-z .l { display: flex; justify-content: flex-end; border-right: 1px solid var(--linie-2); height: 12px; }
.div-z .rr { display: flex; height: 12px; }
.div-z .l i { background: var(--verlust); border-radius: 2px 0 0 2px; height: 100%; transition: filter var(--d-rein); }
.div-z .rr i { background: var(--gewinn); border-radius: 0 2px 2px 0; height: 100%; transition: filter var(--d-rein); }
.div-z:hover i { filter: brightness(1.15); }
.div-z .v { text-align: right; padding-right: 4px; font-family: var(--f-data); }

/* Matrix (Signale) */
.matrix { display: grid; gap: 2px; font-size: var(--s-12); }
.matrix .z { display: grid; place-items: center; height: 26px; border-radius: 3px; font-family: var(--f-data); cursor: default; transition: transform var(--d-rein) var(--k-aus), box-shadow var(--d-rein); }
.matrix .z:hover { transform: scale(1.08); box-shadow: 0 0 0 1.5px var(--akzent); position: relative; z-index: 1; }
.matrix .kopf { color: var(--text-3); display: grid; place-items: center; height: 22px; }
.matrix .zl { color: var(--text-2); display: flex; align-items: center; }
.L { background: var(--gewinn-weich); color: var(--gewinn); } .S { background: var(--verlust-weich); color: var(--verlust); } .N { background: var(--flaeche-2); color: var(--text-3); }

/* Listen in Kacheln */
.liste { display: flex; flex-direction: column; margin: 0 -8px; }
.li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-s); min-width: 0; transition: background var(--d-raus); }
.li:hover { background: var(--flaeche-2); transition-duration: var(--d-rein); }
.li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .pfeil { opacity: 0; translate: -4px 0; transition: opacity var(--d-raus), translate var(--d-raus) var(--k-aus); color: var(--text-3); }
.li:hover .pfeil { opacity: 1; translate: 0 0; transition-duration: var(--d-rein); }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.kv .k { color: var(--text-2); }
.trenner { height: 1px; background: var(--linie); margin: 4px 0; }
.leitzahl { font-size: var(--s-28); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.stufe { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 3px; font-size: 11px; font-weight: 500; font-family: var(--f-data); }
.stufe.p0 { background: var(--verlust); color: #fff; } .stufe.p1 { background: var(--warn-weich); color: var(--warn); } .stufe.p2 { background: var(--flaeche-3); color: var(--text-2); } .stufe.p3 { background: transparent; color: var(--text-3); border: 1px solid var(--linie); }
.lage-balken { position: relative; width: 96px; height: 6px; border-radius: 3px; background: var(--flaeche-3); }
.lage-balken i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--akzent); border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--akzent); transition: left 600ms var(--k-aus); }
.ampel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: var(--s-12); }
.ampel span { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
/* ===== Aus Runde 1 übernommen: Tasten, Links, Not-Aus, gemeinsame Seitenteile, Grid-Formular, E1-Zeilen ===== */
.kbd { font-family: var(--f-data); font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--linie-2); color: var(--text-3); background: var(--flaeche-2); }
.k-fuell { flex: 1; }
.link { color: var(--akzent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d-gleit) var(--k-aus); }
/* ==========================================================================
   Arbeitsplatz · Runde 2 — Werkbank (V2) und Terminal (V3) als Ansichten derselben App
   ========================================================================== */
:root { --d-zeig: 120ms; --zh: 26px; --gap: 16px; --ob-z: 20px;
  --ki: #7c5cc4; --ki-weich: rgba(124, 92, 196, .10); --ki-rand: rgba(124, 92, 196, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ki: #a690ee; --ki-weich: rgba(166, 144, 238, .14); --ki-rand: rgba(166, 144, 238, .4); } }
:root[data-theme="dark"] { --ki: #a690ee; --ki-weich: rgba(166, 144, 238, .14); --ki-rand: rgba(166, 144, 238, .4); }
:root[data-v="3"] { --zh: 37px; --gap: 1px; --ob-z: 19px; --ki: #7e57f2; --ki-weich: rgba(126, 87, 242, .09); --ki-rand: rgba(126, 87, 242, .32); }
@media (prefers-color-scheme: dark) { :root[data-v="3"]:not([data-theme="light"]) { --ki: #9f86ff; --ki-weich: rgba(159, 134, 255, .13); --ki-rand: rgba(159, 134, 255, .38); } }
:root[data-v="3"][data-theme="dark"] { --ki: #9f86ff; --ki-weich: rgba(159, 134, 255, .13); --ki-rand: rgba(159, 134, 255, .38); }
html { background: var(--grund); }
body { margin: 0; background: var(--grund); }
#app { min-height: 100vh; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
:root[data-v="2"] .nur-v3, :root[data-v="3"] .nur-v2 { display: none !important; }
:root[data-ki="aus"] .ki-el { display: none !important; }
.nur-ki-aus { display: none; }
:root[data-ki="aus"] .nur-ki-aus { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: auto 0; }
:root.ki-kommt .ki-el { animation: ki-ein 420ms var(--k-aus) both; animation-delay: calc(var(--ki-i, 0) * 28ms); }
@keyframes ki-ein { from { opacity: 0; translate: 0 3px; filter: blur(2px); } }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } }
button.link { padding: 0; font: inherit; }
.k-unten { margin-top: auto; }
.symk.klein { width: 26px; height: 26px; }
.schalter.klein { width: 30px; height: 18px; } .schalter.klein::after { width: 14px; height: 14px; } .schalter.klein[aria-checked="true"]::after { transform: translateX(12px); }
.segment.klein button { height: 22px; padding: 0 9px; }
.feld.klein { height: 28px; padding: 0 8px; gap: 6px; }
.knopf.gefahr-leise { color: var(--verlust); } .knopf.gefahr-leise:hover { background: var(--verlust-weich); color: var(--verlust); }
.leer { padding: 16px; text-align: center; }

/* ================= Zeigen: nur was klickbar ist, reagiert — 120 ms ================= */
.knopf, .symk, .chip.strich, .segment button, .reiter button, .li.klick, .pop-z, .ch-b, .ch-w, .tb-reiter button, .es-i, .v2-li, .v3-li, .v2-di, .v3-nav button, .k-ki, .k-menue, .k-weg, .k-griff { transition-duration: var(--d-zeig) !important; }
.raster > .kachel:hover { border-color: var(--linie); }
.e-zeile:hover { background: none; }
.li { transition: background var(--d-zeig); } .li:hover { background: none; }
.li.klick, .liste .li[data-ent] { cursor: pointer; } .li.klick:hover, .liste .li[data-ent]:hover { background: var(--flaeche-2); }
.div-z:hover { background: none; } .div-z[data-ent] { cursor: pointer; } .div-z[data-ent]:hover { background: var(--flaeche-2); }
[data-karte] { cursor: pointer; }
.name[data-karte], .coin-z[data-karte] { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--d-zeig), text-decoration-color var(--d-zeig); }
.name[data-karte]:hover, .coin-z[data-karte]:hover { color: var(--akzent); text-decoration-color: color-mix(in srgb, var(--akzent) 45%, transparent); }

/* ================= Verbinden: dieselbe Sache überall ================= */
.verbindet tr.verbunden td { background: var(--akzent-weich) !important; }
.verbindet tr.verbunden td:first-child::before { transform: scaleY(1); }
.verbindet .bp.verbunden { transform: scale(1.55); box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--akzent); }
.verbindet .mosaik2 i.verbunden { outline: 2px solid var(--akzent); outline-offset: -2px; z-index: 1; filter: none; }
.verbindet :is(.div-z, .li, .coin, .kil-z, .wl3-z, .tr-z, .nl-z).verbunden { background: var(--akzent-weich); }
.verbindet .chip.verbunden { box-shadow: 0 0 0 2px var(--akzent); }
.verbindet .kachel.verbunden { box-shadow: inset 0 0 0 1px var(--akzent), var(--schatten-1); }
.verbunden, .verbunden td { transition: background-color var(--d-zeig), box-shadow var(--d-zeig); }

/* ================= KI-Bausteine ================= */
.ki-p { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; display: inline-block; background: var(--text-3); box-shadow: 0 0 0 2px var(--ki-weich), 0 0 0 3px var(--ki-rand); margin: 0 3px; }
.ki-p.L { background: var(--gewinn); } .ki-p.S { background: var(--verlust); } .ki-p.N { background: var(--text-3); }
.ki-urteil { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: var(--s-12); white-space: nowrap; }
.chip.ki { background: var(--ki-weich); color: var(--ki); }
.balken.ki > i { background: var(--ki); }
.ki-stern { color: var(--ki); display: inline-grid; }
.ki-satz { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); background: var(--ki-weich); color: var(--text-2); line-height: 1.45; }
.ki-satz .ki-p { margin-top: 3px; }
.k-ki { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: var(--r-s); color: var(--ki); opacity: .75; transition: background-color var(--d-zeig), opacity var(--d-zeig); }
.k-ki:hover { opacity: 1; background: var(--ki-weich); }
.ki-schalter { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: var(--r-m); cursor: pointer; }
.ki-schalter .schalter[aria-checked="true"] { background: var(--ki); }

/* ================= V2 · Werkbank ================= */
.v2r { min-height: 100vh; }
.v2-streifen { position: sticky; top: 0; z-index: 50; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: color-mix(in srgb, var(--grund) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--linie); }
.v2-marke { display: flex; align-items: center; gap: 8px; margin-right: 6px; white-space: nowrap; }
.v2-logo { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.v2-suche { display: flex; align-items: center; gap: 8px; height: 34px; width: min(340px, 28vw); padding: 0 8px 0 12px; border-radius: var(--r-m); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-3); transition: border-color var(--d-zeig), box-shadow var(--d-zeig); }
.v2-suche:hover { border-color: var(--linie-2); box-shadow: 0 0 0 3px var(--akzent-weich); }
.v2-suche-t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-lage { display: flex; gap: 2px; }
.v2-lw { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 10px; border-radius: var(--r-s); line-height: 1.25; transition: background-color var(--d-zeig); position: relative; }
.v2-lw:hover { background: var(--flaeche-2); }
.v2-lw .punkt { position: absolute; top: 6px; right: 4px; width: 6px; height: 6px; }
.v2-streifen .notaus { height: 34px; }
.v2-mitte { display: grid; grid-template-columns: minmax(0, 1fr) 68px; }
.v2-haupt { padding: 20px 20px 120px; min-width: 0; }
.v2-haupt .s-kopf { margin-bottom: 16px; min-height: 36px; }
.v2-leiste { position: sticky; top: 57px; height: calc(100vh - 57px); display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; border-left: 1px solid var(--linie); }
.v2-li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border-radius: var(--r-m); color: var(--text-2); font-size: 11px; transition: background-color var(--d-zeig), color var(--d-zeig); }
.v2-li:hover { background: var(--flaeche-2); color: var(--text); }
.v2-li.an { background: var(--akzent-weich); color: var(--akzent); }
.v2-li.ki-el { color: var(--ki); } .v2-li.ki-el.an { background: var(--ki-weich); }
.v2-li-i { display: grid; place-items: center; width: 32px; height: 26px; }
.v2-li-z { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--warn); color: #fff; font-size: 10px; font-weight: 500; display: grid; place-items: center; }
.v2-li-z.ver { background: var(--verlust); }
.v2-blatt { position: fixed; top: 66px; right: 78px; bottom: 92px; width: min(400px, calc(100vw - 100px)); z-index: 40; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-3); opacity: 0; translate: 16px 0; pointer-events: none; transition: opacity var(--d-raus), translate var(--d-panel) var(--k-aus); }
.v2-blatt.an { opacity: 1; translate: 0 0; pointer-events: auto; }
.bl-kopf { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--linie); flex: none; }
.bl-i { width: 28px; height: 28px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--akzent-weich); color: var(--akzent); }
.bl-inhalt { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.v2-blatt.an .bl-inhalt > * { animation: rein var(--d-panel) var(--k-aus) both; }
.v2-dock { position: fixed; bottom: 14px; left: 50%; translate: -50% 0; z-index: 45; display: flex; align-items: flex-end; gap: 6px; padding: 7px 9px; border-radius: 20px; background: color-mix(in srgb, var(--flaeche) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--linie); box-shadow: var(--schatten-2); }
.v2-di { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); transform: scale(var(--s, 1)); transform-origin: 50% 100%; transition: transform var(--d-zeig) var(--k-aus), background-color var(--d-zeig), color var(--d-zeig) !important; }
.v2-di:hover { background: var(--flaeche-2); color: var(--text); }
.v2-di.aktiv { color: var(--akzent); }
.v2-di.aktiv::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--akzent); }
.v2-di .ico { width: 20px; height: 20px; }
.v2-dock-tr { width: 1px; height: 28px; background: var(--linie); margin: 0 3px 7px; flex: none; }
.v2r .raster > .kachel { border-radius: var(--r-l); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
/* ================= Kachel (gemeinsam) ================= */
.raster > .kachel { min-width: 0; }
.k-kopf { flex: none; }
.k-titel { margin: 0; font: inherit; font-size: var(--s-16); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.k-griff { display: none; width: 22px; height: 22px; place-items: center; border-radius: var(--r-s); color: var(--text-3); cursor: grab; margin-left: -6px; }
.k-griff:hover { background: var(--flaeche-3); color: var(--text); }
.raster.anordnen .k-griff, .raster.anordnen .k-weg { display: inline-grid; }
.k-menue { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: var(--r-s); color: var(--text-3); flex: none; transition: background-color var(--d-zeig), color var(--d-zeig); }
.k-menue:hover, .k-menue.offen { background: var(--flaeche-3); color: var(--text); }
.k-wert { white-space: nowrap; flex: none; }
.k-koerper { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.k-koerper.voll, .k-koerper.tabelle { padding: 0 !important; overflow: hidden; gap: 0; }
.k-koerper.tabelle > .tab-wrap { margin: 0; height: 100%; overflow: auto; }
.kachel.ohne-kopf > .k-kopf { display: none; }
.raster.anordnen > .kachel.ohne-kopf > .k-kopf { display: flex; }
.kachel.schmal .k-wert, .kachel.schmal .k-kopf .segment, .kachel.schmal .k-kopf > .knopf { display: none; }
.kachel.niedrig .k-unten { display: none; }
.kv-gitter { display: flex; flex-direction: column; gap: 2px; }
.antwort { display: flex; flex-direction: column; gap: 2px; }
.antw { font-size: var(--s-28); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.riesig { font-family: var(--f-display); font-size: 44px; font-weight: 500; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.riesig small { font-size: .46em; color: var(--text-3); font-weight: 400; letter-spacing: -.01em; }
.k-unten svg.spark { width: 100%; height: 40px; display: block; }
.botpunkte { grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 5px; }
.bp { cursor: pointer; }
.punkt-s { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; align-self: flex-start; }
.punkt-s.wrn { background: var(--warn); } .punkt-s.ver { background: var(--verlust); } .punkt-s.akz { background: var(--akzent); }
.wl-z { align-items: flex-start; } .wl-z .akt { display: flex; gap: 4px; opacity: 0; translate: 4px 0; transition: opacity var(--d-zeig), translate var(--d-zeig) var(--k-aus); }
.wl-z:hover .akt, .wl-z:focus-within .akt { opacity: 1; translate: 0 0; }
.wl-fuss { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kil { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.kil-z { display: grid; grid-template-columns: 74px 84px minmax(30px, 1fr) 38px; align-items: center; gap: 8px; padding: 3px 6px; margin: 0 -6px; border-radius: var(--r-s); }
.kil-these { margin: 0; }
.coin-z { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.coin-z .ch-coin { width: 18px; height: 18px; font-size: 7.5px; }
.st { display: inline-flex; align-items: center; gap: 6px; }
.nl-z { align-items: flex-start; }
.nl-z .t { display: flex; flex-direction: column; gap: 3px; }
.nl-t { color: var(--text); }
.nl-ki { display: flex; align-items: flex-start; gap: 6px; font-size: var(--s-12); color: var(--text-2); line-height: 1.4; }
.nl-ki .ki-p { width: 8px; height: 8px; margin-top: 3px; }
.mosaik2 { position: relative; height: 100%; min-height: 120px; }
.mosaik2 i { position: absolute; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 6px; border-radius: 3px; background: var(--c); font-style: normal; font-size: 10.5px; line-height: 1.2; color: var(--text); transition: filter var(--d-zeig), outline-color var(--d-zeig), left var(--d-gleit) var(--k-aus), top var(--d-gleit) var(--k-aus), width var(--d-gleit) var(--k-aus), height var(--d-gleit) var(--k-aus); cursor: pointer; }
.mosaik2 i span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.mosaik2 i b { font-weight: 500; font-family: var(--f-data); white-space: nowrap; }
.mosaik2 i.kl span { display: none; } .mosaik2 i.kl { justify-content: center; align-items: center; padding: 0 2px; font-size: 10px; }
.mosaik2 i.xs b { display: none; }
.mosaik2 i.stopp { background: repeating-linear-gradient(135deg, var(--flaeche-2) 0 4px, var(--flaeche-3) 4px 8px); }
.mosaik2 i.fehler { box-shadow: inset 0 0 0 1.5px var(--verlust); }
.mosaik2:hover i { filter: saturate(.55) opacity(.75); } .mosaik2 i:hover { filter: none; outline: 1.5px solid var(--akzent); outline-offset: -1.5px; z-index: 1; }
.v3r .mosaik2 i { border-radius: 1px; }
.km { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.km-z { display: grid; grid-template-columns: 110px minmax(40px, 1fr) 56px 92px; align-items: center; gap: 10px; } .km-z > :last-child { white-space: nowrap; }
.gk { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; height: 100%; }
.gk-z { display: flex; flex-direction: column; gap: 1px; }
.gki { display: flex; flex-direction: column; gap: 10px; }
.feld.folgt { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); transition: none; }
.tb-spark svg { width: 72px; height: 20px; display: block; }

/* ================= Popover, Toast, Dialog ================= */
/* ================= KI-Feld ================= */
.kif { display: flex; flex-direction: column; gap: 10px; }
.kif-bezug { display: flex; align-items: center; gap: 8px; }
.kif-urteil { display: flex; align-items: center; gap: 10px; }
.kif-urteil .ki-p { width: 14px; height: 14px; }
.kif p { margin: 0; line-height: 1.5; }
.kif-verlauf { display: flex; flex-direction: column; gap: 8px; }
.kif-f { align-self: flex-end; max-width: 86%; padding: 7px 11px; border-radius: 12px 12px 3px 12px; background: var(--flaeche-3); font-size: var(--s-14); }
.kif-a { align-self: flex-start; max-width: 92%; padding: 8px 11px; border-radius: 12px 12px 12px 3px; background: var(--ki-weich); font-size: var(--s-14); line-height: 1.45; animation: rein var(--d-panel) var(--k-aus); }
.kif-tippt { display: flex; gap: 4px; padding: 12px 14px; }
.kif-tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--ki); animation: tippt 900ms var(--k-std) infinite; }
.kif-tippt i:nth-child(2) { animation-delay: 150ms; } .kif-tippt i:nth-child(3) { animation-delay: 300ms; }
@keyframes tippt { 0%, 100% { opacity: .25; translate: 0 0; } 40% { opacity: 1; translate: 0 -3px; } }
.kif-vorschlag { display: flex; flex-wrap: wrap; gap: 6px; }
.kif-vorschlag .chip { cursor: pointer; }
.kif-ein .ico { color: var(--ki); }
.kif-regel { display: flex; gap: 6px; align-items: flex-start; margin: 0 !important; }

@media (max-width: 1180px) { .nur-breit { display: none !important; } .v3-such { width: 40px; } .v3-such span { display: none; } }
@media (max-width: 980px) { .v2-suche { width: 40px; padding: 0; justify-content: center; } .v2-suche-t, .v2-suche .kbd { display: none; } .v3-konto .s12 { display: none; } .v3-papier { display: none; } }
@media (max-width: 820px) {
  .v2-streifen { flex-wrap: wrap; padding: 8px 12px; row-gap: 6px; min-height: 0; }
  .v2-marke { margin-right: 0; } .v2-marke .w5 { display: none; }
  .v2-lage .v2-lw:not(:first-child) { display: none; }
  .v2-mitte { grid-template-columns: minmax(0, 1fr); }
  .v2-leiste { position: static; height: auto; order: -1; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--linie); padding: 6px 12px; scrollbar-width: none; }
  .v2-li { flex-direction: row; padding: 6px 10px; gap: 6px; flex: none; } .v2-li-i { width: auto; height: auto; } .v2-li-z { position: static; }
  .v2-haupt { padding: 16px 16px 110px; }
  .v2-blatt { top: auto; right: 8px; left: 8px; bottom: 76px; width: auto; height: 62vh; }
  .v2-dock { max-width: calc(100vw - 24px); overflow-x: auto; } .v2-di { width: 38px; height: 38px; } .v2-dock-tr ~ .v2-di { display: none; } .v2-dock-tr { display: none; }
  .v3r { height: auto; min-height: 100vh; overflow: visible; grid-template-rows: auto auto 1fr 24px; }
  .v3-kopf { flex-wrap: wrap; padding: 6px 12px; row-gap: 4px; }
  .v3-wort { margin-right: 0; }
  .v3-nav { order: 10; width: 100%; height: 36px; overflow-x: auto; scrollbar-width: none; align-self: auto; }
  .v3-konto { display: none; }
  .v3-mitte { grid-template-columns: minmax(0, 1fr); }
  .v3-haupt { overflow: visible; padding-bottom: 60px; }
  .v3-leiste { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 30; flex-direction: row; justify-content: space-around; height: 46px; padding: 0 8px; border-left: 0; border-top: 1px solid var(--linie); }
  .v3-panel { position: fixed; left: 0; right: 0; bottom: 70px; z-index: 29; width: auto !important; height: 0; border-left: 0; transition: height var(--d-panel) var(--k-aus); }
  .v3-panel.an { height: 58vh; border-top: 1px solid var(--linie); box-shadow: var(--schatten-3); }
  .v3-panel > * { width: auto; }
  .v3-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; height: 24px; }
  .s-hinweis { display: none; }
  .es { grid-template-columns: minmax(0, 1fr); } .es-nav { position: static; max-height: none; } .es-leiste { grid-column: 1; }
  .ds2, .ds2-vgl, .ds2-regeln { grid-template-columns: minmax(0, 1fr); }
  .ds2-bz { grid-template-columns: 96px 52px minmax(0, 1fr); } .ds2-bz i { grid-column: 1 / -1; }
  .ansicht button { padding: 0 7px; }
  .ki-schalter { padding: 0 4px; }
  .tb-suche { width: 120px; }
  .e-zeile { align-items: flex-start; }
  /* Handy: Kacheln im Fluss, Höhe nach Inhalt; Charts, Tabellen und Flächen behalten ihre Rasterhöhe */
  .raster { height: auto !important; display: flex; flex-direction: column; gap: var(--gap); }
  .v3r .raster { gap: 1px; }
  .raster > .kachel { position: relative; left: auto; top: auto; width: auto; height: auto; order: var(--y); }
  .raster > .kachel:has(.k-koerper.voll, .k-koerper.tabelle, .kurve, .mosaik2, .tb, .kil) { height: calc(var(--h) * (var(--zh) + var(--gap)) - var(--gap)); }
  .raster > .kachel:not(:has(.k-koerper.voll, .k-koerper.tabelle, .kurve, .mosaik2, .tb, .kil)) .k-koerper { overflow: visible; flex: none; }
  .r-platz { display: none; }
  .zs-achse span:nth-child(even) { display: none; }
}
@media (max-width: 480px) { .riesig { font-size: 38px; } .v3r .riesig { font-size: 42px; } .v2-lage { display: none; } .km-z { grid-template-columns: 90px minmax(30px, 1fr) 50px; } .km-z > :last-child { display: none; } .kil-z { grid-template-columns: 70px 80px minmax(20px, 1fr) 34px; } }

/* ==========================================================================
   Lernstudio · Ergänzungen zum Arbeitsplatz-System
   Gleiche Tokens, Kacheln, Knöpfe und Bewegungen wie Trade8. Neu sind nur
   Lernbausteine: Aufgaben, Karteikarte, Kalender, Komma-Trainer, Lesetext.
   ========================================================================== */
:root { --zeile: 1.5; }
body { font-size: var(--s-14); }
#app { min-height: 100vh; }
.v2-streifen { top: env(safe-area-inset-top, 0px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--grund); }
.v2-haupt { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: 20px; }
.v2-lw .zahl { font-size: var(--s-14); }
.v2-lw .s12 { font-size: 11px; }
.ansicht button { white-space: nowrap; }
@media (pointer: coarse) { .knopf { height: 38px; } .knopf.klein { height: 32px; } .symk { width: 38px; height: 38px; } }

/* Entwurfsband: Vorschläge wählen */
.vb-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.vb { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 22px; padding: 2px 20px 4px; }
.vb-k { flex: 1 0 200px; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-l); border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten-1); transition: border-color var(--d-zeig), box-shadow var(--d-raus), transform var(--d-gleit) var(--k-aus) !important; }
.vb-k:hover { border-color: var(--linie-2); transform: translateY(-2px); }
.vb-k.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.vb-n { font-family: var(--f-data); font-size: 11px; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; }
.vb-k.aktiv .vb-n { color: var(--akzent); }
.vb-t { font-weight: 500; font-size: var(--s-16); }
.vb-d { font-size: var(--s-12); color: var(--text-2); line-height: 1.4; }
.vb-k.re { border-style: dashed; box-shadow: none; }

/* Seitenkopf und Raster */
.s-kopf { margin-bottom: 16px; }
.s-sub { color: var(--text-2); margin: -8px 0 16px; max-width: 80ch; line-height: 1.5; }
.raster12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.raster12 > .kachel { grid-column: span var(--w, 12); animation: rein var(--d-panel) var(--k-aus) both; animation-delay: calc(var(--i, 0) * 40ms); }
@media (max-width: 1100px) { .raster12 > .kachel { grid-column: span var(--wt, 12); } }
@media (max-width: 820px) { .raster12 { grid-template-columns: minmax(0, 1fr); } .raster12 > .kachel { grid-column: 1 / -1; } }
.kachel.spot { overflow: visible; }
.k-kopf .k-titel { white-space: normal; }
.k-koerper { overflow: visible; }
.k-text { margin: 0; color: var(--text-2); line-height: 1.5; }
.antw.auf { color: var(--gewinn); } .antw.warnf { color: var(--warn); } .antw.ab { color: var(--verlust); } .antw.akz { color: var(--akzent); }
.reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reihe.zw { justify-content: space-between; }
.spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hinweis { font-size: var(--s-12); color: var(--text-3); line-height: 1.45; }
.zahl-gr { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.bsp { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 3px; border: 1px dashed var(--linie-2); color: var(--text-3); vertical-align: 1px; white-space: nowrap; }

/* Themen-Zeilen mit Balken */
.tz { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; align-items: center; gap: 10px; padding: 4px 0; }
.tz .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.tz .v { text-align: right; font-family: var(--f-data); font-size: var(--s-12); }
.balken > i { width: 0; }

/* Aufgaben-Liste mit Haken */
.todo { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: var(--r-m); cursor: pointer; transition: background var(--d-zeig); }
.todo:hover { background: var(--flaeche-2); }
.todo .hk { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--linie-2); display: grid; place-items: center; color: transparent; transition: background var(--d-gleit), border-color var(--d-gleit), color var(--d-gleit); }
.todo .hk .ico { width: 14px; height: 14px; stroke-width: 2.4; transform: scale(.4); transition: transform var(--d-gleit) var(--k-feder); }
.todo.fertig .hk { background: var(--gewinn); border-color: var(--gewinn); color: #fff; }
.todo.fertig .hk .ico { transform: scale(1); }
.todo .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.todo .t b { font-weight: 500; transition: color var(--d-raus); background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size var(--d-panel) var(--k-aus), color var(--d-raus); }
.todo.fertig .t b { color: var(--text-3); background-size: 100% 1px; }

/* Ring */
.ring { width: 76px; height: 76px; flex: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring .rb { stroke: var(--flaeche-3); }
.ring .rf { stroke: var(--akzent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.1s var(--k-aus); }
.ring.gruen .rf { stroke: var(--gewinn); } .ring.warn .rf { stroke: var(--warn); }
.ring text { fill: var(--text); font: 500 15px var(--f-data); }

/* Serie (Punkte je Tag) */
.serie { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; }
.serie i { aspect-ratio: 1; border-radius: 4px; background: var(--flaeche-3); transition: transform var(--d-rein) var(--k-feder); }
.serie i.an { background: var(--gewinn); } .serie i.halb { background: var(--gewinn-weich); box-shadow: inset 0 0 0 1px var(--gewinn); }
.serie i.heute { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--akzent); }
.serie i:hover { transform: scale(1.25); }

/* Säulen (Lernzeit) */
.saeulen { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 150px; padding-top: 8px; }
.saeule { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.saeule .s { width: 100%; max-width: 40px; border-radius: 5px 5px 2px 2px; background: var(--akzent); height: 0; transition: height 900ms var(--k-aus), filter var(--d-zeig); display: flex; flex-direction: column-reverse; overflow: hidden; }
.saeule .s i { display: block; background: var(--c); }
.saeule:hover .s { filter: brightness(1.12); }
.saeule .tg { font-size: 11px; color: var(--text-3); }
.saeule.heute .tg { color: var(--akzent); font-weight: 500; }
.ziellinie { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--warn); pointer-events: none; }
.ziellinie span { position: absolute; right: 0; top: -18px; font-size: 11px; color: var(--warn); font-family: var(--f-data); }
.leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--s-12); color: var(--text-2); }
.leg span { display: inline-flex; align-items: center; gap: 6px; }
.leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* Themen-Karte */
.tk { display: grid; grid-template-columns: 74px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.tk .zl { font-size: var(--s-12); color: var(--text-2); display: flex; align-items: center; }
.tk-z { min-height: 52px; border-radius: var(--r-s); padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; font-size: 11.5px; line-height: 1.25; color: var(--text); background: color-mix(in srgb, var(--c) var(--p), var(--flaeche-2)); transition: transform var(--d-rein) var(--k-aus), box-shadow var(--d-rein) !important; }
.tk-z b { font-family: var(--f-data); font-weight: 500; font-size: 11px; }
.tk-z:hover { transform: scale(1.04); box-shadow: 0 0 0 1.5px var(--akzent), var(--schatten-2); position: relative; z-index: 1; }
@media (max-width: 560px) { .tk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tk .zl { grid-column: 1 / -1; padding-top: 6px; } }

/* Karteikasten-Fächer */
.faecher { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 110px; }
.fach { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.fach .s { width: 100%; border-radius: 4px; background: color-mix(in srgb, var(--akzent) var(--p), var(--flaeche-3)); height: 0; transition: height 800ms var(--k-aus); }
.fach b { font-family: var(--f-data); font-weight: 500; font-size: var(--s-12); }
.fach span { font-size: 11px; color: var(--text-3); }
.fach.blitz .s { animation: fachblitz 700ms var(--k-std); }
@keyframes fachblitz { 30% { background: var(--warn); } }

/* Zeitstrahl bis zur Arbeit */
.zs2 { position: relative; padding: 26px 0 6px; }
.zs2-bahn { position: relative; height: 34px; border-radius: 8px; background: var(--flaeche-2); }
.zs2-vorbei { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px 0 0 8px; background: var(--akzent-weich); }
.zs2-tag { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--linie); }
.zs2-tag span { position: absolute; top: -22px; left: 0; translate: -50% 0; font-family: var(--f-data); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.zs2-tag.we { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--c-gitter) 5px 6px); }
.zs2-ev { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--flaeche); background: var(--akzent); transition: transform var(--d-rein) var(--k-feder); animation: auftauchen 420ms var(--k-feder) both; animation-delay: calc(var(--i) * 30ms + 200ms); }
.zs2-ev.ok { background: var(--gewinn); } .zs2-ev.d { background: var(--warn); }
.zs2-ev.arbeit { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 3px; rotate: 45deg; background: var(--verlust); }
.zs2-ev:hover { transform: scale(1.5); z-index: 2; }
.zs2-jetzt { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--akzent); }
.zs2-jetzt::after { content: "heute"; position: absolute; bottom: -18px; left: 50%; translate: -50% 0; font-size: 10.5px; color: var(--akzent); font-weight: 500; }
@keyframes auftauchen { from { transform: scale(0); } }


/* Abzeichen */
.abz { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.abz-k { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-l); border: 1px solid var(--linie); background: var(--flaeche); }
.abz-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--flaeche-3); color: var(--text-3); }
.abz-k.ok .abz-i { background: var(--gewinn-weich); color: var(--gewinn); }
.abz-k.ok .abz-i .ico { animation: wackel 2.4s var(--k-std) infinite; }
@keyframes wackel { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: -10deg; } 90% { rotate: 8deg; } 95% { rotate: -4deg; } }

/* Üben: Aufgaben */
.ueb { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .ueb { grid-template-columns: minmax(0, 1fr) 300px; } .ueb-liste { grid-column: 1 / -1; } .ueb-liste .al { flex-direction: row; overflow-x: auto; } .ueb-liste .al-z { flex: none; } }
@media (max-width: 820px) { .ueb { grid-template-columns: minmax(0, 1fr); } }
.al { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; scrollbar-width: none; }
.al-z { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-m); text-align: left; color: var(--text-2); transition: background var(--d-zeig), color var(--d-zeig); }
.al-z:hover { background: var(--flaeche-2); color: var(--text); }
.al-z.aktiv { background: var(--akzent-weich); color: var(--akzent); font-weight: 500; }
.al-nr { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-data); font-size: 11px; background: var(--flaeche-3); color: var(--text-2); flex: none; transition: background var(--d-gleit), color var(--d-gleit); }
.al-z.ok .al-nr { background: var(--gewinn); color: #fff; } .al-z.nein .al-nr { background: var(--verlust); color: #fff; }
.fortschritt { height: 6px; border-radius: 3px; background: var(--flaeche-3); overflow: hidden; }
.fortschritt i { display: block; height: 100%; background: var(--akzent); border-radius: 3px; transition: width 500ms var(--k-aus); }
.aufg { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }
.aufg-typ { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aufg-frage { font-size: 20px; line-height: 1.5; margin: 0; letter-spacing: -.005em; }
.aufg-frage .lk { display: inline-block; min-width: 90px; border-bottom: 2px solid var(--akzent); text-align: center; color: var(--akzent); font-weight: 500; padding: 0 4px; }
.optn { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.opt { min-height: 48px; padding: 10px 14px; border-radius: var(--r-m); border: 1.5px solid var(--linie); background: var(--flaeche); text-align: left; font-size: var(--s-16); transition: border-color var(--d-zeig), background var(--d-zeig), transform var(--d-druck) !important; }
.opt:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.opt:active { transform: scale(.98); }
.opt.richtig { border-color: var(--gewinn); background: var(--gewinn-weich); color: var(--gewinn); animation: hops 380ms var(--k-feder); }
.opt.falsch { border-color: var(--verlust); background: var(--verlust-weich); color: var(--verlust); animation: schuettel 380ms var(--k-std); }
.opt.aus { opacity: .5; pointer-events: none; }
@keyframes hops { 40% { transform: scale(1.04); } }
@keyframes schuettel { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.eingabe { display: flex; gap: 8px; flex-wrap: wrap; }
.eingabe .feld { flex: 1 1 220px; height: 46px; font-size: var(--s-16); }
.eingabe .feld.richtig { border-color: var(--gewinn); box-shadow: 0 0 0 3px var(--gewinn-weich); }
.eingabe .feld.falsch { border-color: var(--verlust); box-shadow: 0 0 0 3px var(--verlust-weich); animation: schuettel 380ms var(--k-std); }
.eingabe .knopf { height: 46px; }
.woerter { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; padding: 8px; border-radius: var(--r-m); border: 1.5px dashed var(--linie-2); }
.woerter.ziel { background: var(--flaeche-2); }
.wk { height: 34px; padding: 0 12px; border-radius: var(--r-m); background: var(--flaeche); border: 1px solid var(--linie-2); font-size: var(--s-16); box-shadow: 0 1px 0 var(--linie-2); animation: einspringen 260ms var(--k-feder); transition: transform var(--d-druck) !important; }
.wk:hover { border-color: var(--akzent); }
.wk:active { transform: translateY(1px); }
@keyframes einspringen { from { transform: scale(.7); opacity: 0; } }
.satz-tippen { font-size: 20px; line-height: 2; }
.satz-tippen button { padding: 2px 4px; border-radius: 4px; font-size: inherit; transition: background var(--d-zeig), color var(--d-zeig) !important; }
.satz-tippen button:hover { background: var(--warn-weich); }
.satz-tippen button.richtig { background: var(--gewinn-weich); color: var(--gewinn); text-decoration: line-through; }
.satz-tippen button.falsch { background: var(--verlust-weich); color: var(--verlust); animation: schuettel 380ms; }
.paare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paare .spalte { gap: 8px; }
.pk { min-height: 44px; border-radius: var(--r-m); border: 1.5px solid var(--linie); background: var(--flaeche); font-size: var(--s-16); transition: border-color var(--d-zeig), background var(--d-zeig), opacity var(--d-raus), transform var(--d-gleit) var(--k-feder) !important; }
.pk:hover { border-color: var(--akzent); }
.pk.gewaehlt { border-color: var(--akzent); background: var(--akzent-weich); transform: scale(1.03); }
.pk.fertig { border-color: var(--gewinn); background: var(--gewinn-weich); color: var(--gewinn); pointer-events: none; }
.pk.falsch { animation: schuettel 380ms; border-color: var(--verlust); }
.rueck { display: none; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); line-height: 1.5; }
.rueck.an { display: flex; animation: rein var(--d-panel) var(--k-aus); }
.rueck.ok { background: var(--gewinn-weich); } .rueck.nein { background: var(--verlust-weich); }
.rueck .ico { margin-top: 2px; } .rueck.ok .ico { color: var(--gewinn); } .rueck.nein .ico { color: var(--verlust); }
.hilfe-st { display: flex; flex-direction: column; gap: 8px; }
.hs { padding: 10px 12px; border-radius: var(--r-m); background: var(--flaeche-2); line-height: 1.5; animation: rein var(--d-panel) var(--k-aus); }
.hs .versal { display: block; margin-bottom: 2px; }
.regelkarte { padding: 12px 14px; border-radius: var(--r-m); background: var(--akzent-weich); line-height: 1.55; }
.regelkarte b { color: var(--akzent); font-weight: 500; }
.ende { text-align: center; padding: 24px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ende .riesig { color: var(--gewinn); }
.funke { position: fixed; z-index: 950; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; animation: funke 800ms var(--k-aus) forwards; }
@keyframes funke { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }

/* Karteikarte */
.karte { perspective: 1000px; height: 230px; }
.karte-in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 650ms var(--k-aus); cursor: pointer; }
.karte.dreh .karte-in { transform: rotateY(180deg); }
.kf { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-l); border: 1px solid var(--linie-2); background: var(--flaeche); box-shadow: var(--schatten-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; }
.kf.hinten { transform: rotateY(180deg); background: var(--flaeche-2); }
.kf .w { font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.kf .bs { color: var(--text-2); font-style: italic; }
.bewert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bewert .knopf { height: 52px; flex-direction: column; gap: 0; line-height: 1.2; }
.bewert .knopf span { font-size: 11px; font-weight: 400; opacity: .7; }

/* Schreibwerkstatt */
.schreib textarea { width: 100%; min-height: 260px; resize: vertical; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: 16px/1.6 var(--f-ui); outline: none; transition: border-color var(--d-zeig), box-shadow var(--d-zeig); }
.schreib textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.wz { position: relative; height: 10px; border-radius: 5px; background: var(--flaeche-3); }
.wz-ziel { position: absolute; top: -3px; bottom: -3px; background: var(--gewinn-weich); border: 1px solid var(--gewinn); border-radius: 4px; }
.wz-ist { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--akzent); border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--akzent); transition: left 300ms var(--k-aus); }
.pruef { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text-2); }
.pruef i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linie-2); display: grid; place-items: center; flex: none; transition: background var(--d-gleit), border-color var(--d-gleit); }
.pruef.ok { color: var(--text); } .pruef.ok i { background: var(--gewinn); border-color: var(--gewinn); }
.pruef.ok i::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; margin-top: -2px; }

/* Kalender */
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-kopf { font-size: var(--s-12); color: var(--text-3); padding: 0 4px; }
.tag { min-height: 118px; border-radius: var(--r-m); border: 1px solid var(--linie); background: var(--flaeche); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: border-color var(--d-zeig); }
.tag.leer { background: transparent; border-style: dashed; }
.tag.frei { background: repeating-linear-gradient(135deg, var(--flaeche) 0 6px, var(--flaeche-2) 6px 12px); }
.tag.heute { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-weich); }
.tag.arbeit { border-color: var(--verlust); background: var(--verlust-weich); }
.tag-d { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); font-family: var(--f-data); }
.tag.heute .tag-d { color: var(--akzent); font-weight: 500; }
.sz { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 4px 6px; border-radius: 4px; font-size: 11px; line-height: 1.25; background: color-mix(in srgb, var(--c) 14%, var(--flaeche)); border-left: 3px solid var(--c); color: var(--text); animation: rein var(--d-panel) var(--k-aus) both; animation-delay: calc(var(--i) * 12ms); transition: opacity var(--d-raus), filter var(--d-zeig) !important; min-width: 0; }
.sz span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz b { font-family: var(--f-data); font-weight: 500; font-size: 10.5px; color: var(--text-2); }
.sz:hover { filter: brightness(1.05) saturate(1.2); }
.sz.ok { opacity: .55; } .sz.ok span { text-decoration: line-through; }
@media (max-width: 820px) { .kal { grid-template-columns: minmax(0, 1fr); } .kal-kopf { display: none; } .tag { min-height: 0; } .tag.leer { display: none; } }

/* Stoffliste */
.stoff { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(170px, auto) 110px auto; gap: 10px 14px; align-items: center; }
.stoff > .kopfz { font-size: var(--s-12); color: var(--text-3); padding-bottom: 4px; border-bottom: 1px solid var(--linie); }
.stoff .n { min-width: 0; } .stoff .s-seite { white-space: nowrap; } .stoff .n small { display: block; color: var(--text-3); font-size: var(--s-12); }
@media (max-width: 900px) { .stoff { grid-template-columns: minmax(0, 1fr) auto; } .stoff > .kopfz { display: none; } .stoff .s-seite, .stoff .s-bal { display: none; } .stoff .segment { grid-column: 1; } }

/* Probearbeit */
.uhr { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.uhr svg { width: 100%; height: 100%; }
.uhr circle { fill: none; stroke-width: 10; }
.uhr .rb { stroke: var(--flaeche-3); } .uhr .rf { stroke: var(--akzent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear; }
.uhr .mitte { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.uhr .mitte b { font: 500 36px var(--f-data); letter-spacing: -.02em; display: block; }
.teil { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.teil:last-child { border-bottom: 0; }
.teil .nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-3); font: 500 12px var(--f-data); transition: background var(--d-gleit), color var(--d-gleit); }
.teil.jetzt .nr { background: var(--akzent); color: var(--auf-akzent); animation: puls2 1.6s infinite; }
@keyframes puls2 { 0% { box-shadow: 0 0 0 0 var(--akzent-weich); } 70% { box-shadow: 0 0 0 8px transparent; } }
.noten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.noten div { text-align: center; padding: 6px 2px; border-radius: var(--r-s); background: var(--flaeche-2); font-size: 11px; color: var(--text-2); }
.noten div b { display: block; font: 500 16px var(--f-data); color: var(--text); }
.noten div.ist { background: var(--akzent); color: var(--auf-akzent); } .noten div.ist b { color: var(--auf-akzent); }
.verlauf { display: flex; align-items: flex-end; gap: 14px; height: 120px; padding-top: 10px; }
.verlauf .v { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.verlauf .v i { width: 100%; max-width: 46px; border-radius: 5px 5px 2px 2px; background: var(--akzent); height: 0; transition: height 900ms var(--k-aus); }
.verlauf .v.neu i { background: var(--gewinn); }
.verlauf .v span { font-size: 11px; color: var(--text-3); }
.verlauf .v b { font: 500 12px var(--f-data); }

/* Atlas */
.atlas { display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .atlas { grid-template-columns: 230px minmax(0, 1fr); } .atlas > :last-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .atlas { grid-template-columns: minmax(0, 1fr); } }
.baum { display: flex; flex-direction: column; gap: 1px; }
.baum .gr { font-size: var(--s-12); color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; padding: 10px 8px 4px; font-weight: 500; }
.baum button { text-align: left; padding: 7px 8px; border-radius: var(--r-m); color: var(--text-2); display: flex; align-items: center; gap: 8px; transition: background var(--d-zeig), color var(--d-zeig); }
.baum button:hover { background: var(--flaeche-2); color: var(--text); }
.baum button.aktiv { background: var(--akzent-weich); color: var(--akzent); font-weight: 500; }
.baum .punkt { width: 7px; height: 7px; }
.regel h2 { margin: 0; font-size: var(--s-22); font-weight: 500; letter-spacing: -.01em; }
.regel h3 { margin: 6px 0 0; font-size: var(--s-14); font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; font-size: var(--s-12); }
.regel p { margin: 0; line-height: 1.6; }
.formel { font-family: var(--f-data); font-size: var(--s-14); padding: 10px 12px; border-radius: var(--r-m); background: var(--flaeche-2); line-height: 1.6; overflow-x: auto; }
.bsp-z { padding: 6px 0; line-height: 1.6; font-size: var(--s-16); }
.bsp-z mark { background: var(--warn-weich); color: inherit; border-radius: 3px; padding: 0 3px; box-shadow: inset 0 -2px 0 var(--warn); }
.fehlerpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .fehlerpaar { grid-template-columns: 1fr; } }
.fehlerpaar div { padding: 8px 10px; border-radius: var(--r-m); line-height: 1.5; }
.fehlerpaar .x { background: var(--verlust-weich); } .fehlerpaar .x::before { content: "✗ "; color: var(--verlust); font-weight: 500; }
.fehlerpaar .o { background: var(--gewinn-weich); } .fehlerpaar .o::before { content: "✓ "; color: var(--gewinn); font-weight: 500; }
.spick { display: flex; flex-direction: column; gap: 6px; }
.spick-z { padding: 8px 10px; border-radius: var(--r-m); background: var(--flaeche-2); font-size: var(--s-12); line-height: 1.45; animation: rein var(--d-panel) var(--k-aus); }
.spick-z b { display: block; font-size: var(--s-14); font-weight: 500; }

/* Lesetext */
.lesen { font-size: 19px; line-height: 1.8; max-width: 68ch; margin: 0; }
.lw-wort { border-bottom: 1.5px dotted var(--akzent); cursor: pointer; border-radius: 2px; transition: background var(--d-zeig); }
.lw-wort:hover, .lw-wort.an { background: var(--akzent-weich); }
.uebers { position: fixed; z-index: 700; max-width: 260px; padding: 8px 12px; border-radius: var(--r-m); background: var(--tip-bg); color: var(--tip-text); font-size: var(--s-14); line-height: 1.4; box-shadow: var(--schatten-3); pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity 140ms, translate 180ms var(--k-aus); }
.uebers.an { opacity: 1; translate: 0 0; }
.uebers small { display: block; opacity: .7; font-size: 11px; }
.wf { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.wf:last-child { border-bottom: 0; }
.wf .t { flex: 1 1 260px; min-width: 0; line-height: 1.45; }
.vorlesen.laeuft .ico { animation: puls3 1s infinite; }
@keyframes puls3 { 50% { opacity: .35; } }

/* Komma-Trainer */
.ksatz { font-size: 22px; line-height: 2.2; display: flex; flex-wrap: wrap; align-items: baseline; }
.ksatz .w { padding: 0 1px; }
.ksatz .lu { width: 16px; height: 34px; margin: 0 1px; border-radius: 4px; display: inline-grid; place-items: center; align-self: center; color: var(--akzent); font-weight: 600; font-size: 24px; transition: background var(--d-zeig), width var(--d-gleit) var(--k-feder) !important; }
.ksatz .lu:hover { background: var(--akzent-weich); }
.ksatz .lu.gesetzt { width: 14px; }
.ksatz .lu.gesetzt::after { content: ","; }
.ksatz .lu.ok { color: var(--gewinn); background: var(--gewinn-weich); }
.ksatz .lu.fehlt { background: var(--warn-weich); color: var(--warn); }
.ksatz .lu.fehlt::after { content: ","; }
.ksatz .lu.zuviel { color: var(--verlust); background: var(--verlust-weich); animation: schuettel 380ms; }

/* Recherche */
.app-z { display: grid; grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); align-items: start; }
.app-z:last-child { border-bottom: 0; }
.app-z h3 { margin: 0; font-size: var(--s-16); font-weight: 500; }
.app-z p { margin: 0; line-height: 1.55; color: var(--text-2); }
.app-z .uebern { padding: 8px 10px; border-radius: var(--r-m); background: var(--akzent-weich); line-height: 1.5; }
.app-z .uebern.weg { background: var(--flaeche-2); color: var(--text-2); }
@media (max-width: 820px) { .app-z { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.fm { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(56px, .5fr)); gap: 2px; font-size: var(--s-12); min-width: 520px; }
.fm .kopf { color: var(--text-3); display: grid; place-items: center; height: 30px; text-align: center; line-height: 1.2; }
.fm .zl { color: var(--text); display: flex; align-items: center; padding: 6px 8px; font-size: var(--s-14); }
.fm .z { display: grid; place-items: center; min-height: 34px; border-radius: 3px; font-family: var(--f-data); transition: transform var(--d-rein) var(--k-aus), box-shadow var(--d-rein); }
.fm .z:hover { transform: scale(1.06); box-shadow: 0 0 0 1.5px var(--akzent); }
.fm .z.ja { background: var(--gewinn-weich); color: var(--gewinn); } .fm .z.teil { background: var(--warn-weich); color: var(--warn); } .fm .z.nein { background: var(--flaeche-2); color: var(--text-3); }
.fm-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.schritt { padding: 14px; border-radius: var(--r-l); background: var(--flaeche-2); display: flex; flex-direction: column; gap: 6px; }
.schritt .gf-nr { margin-bottom: 4px; }
.schritt p { margin: 0; color: var(--text-2); line-height: 1.5; }
.quellen a { color: var(--akzent); }
.quellen li { margin-bottom: 4px; line-height: 1.5; }

/* Tutor-Panel */
.kif-verlauf { min-height: 120px; }
.bl-inhalt { display: flex; flex-direction: column; gap: 12px; }
.eltern-z { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.eltern-z:last-child { border-bottom: 0; }

/* Dock: Vergrößern beim Überfahren */
.v2-di { transform: scale(var(--s, 1)); }
.v2-di .lbl { display: none; }
@media (max-width: 820px) { .v2-blatt { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .v2-dock { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .ansicht { display: none; } .ki-schalter .w5 { display: none; } }
@media (max-width: 560px) { .v2-streifen .knopf.primaer span { display: none; } .tz { grid-template-columns: minmax(0, 1fr) 60px 36px; } .aufg-frage { font-size: 18px; } .ksatz { font-size: 19px; } .lesen { font-size: 17px; } }

/* ==========================================================================
   Lernstudio App · Ergänzungen für die installierbare Fassung
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
button, input, textarea { touch-action: manipulation; }
input, textarea { font-size: 16px; } /* verhindert das Hineinzoomen in Safari */
.seite { animation: rein var(--d-panel) var(--k-aus) both; }
.s-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.s-titel { margin: 0; font-size: var(--s-22); font-weight: 500; letter-spacing: -.01em; }
.s-reiter { flex: none; }
.ap-tip-t { white-space: normal; }

/* Leiste mit Beschriftung */
.v2-li-t { font-size: 10.5px; line-height: 1.15; text-align: center; padding: 0 2px; }
@media (min-width: 821px) { .v2-mitte { grid-template-columns: minmax(0, 1fr) 84px; } .v2-blatt { right: 94px; } }
.v2-lw .s12, .v2-lw .zahl { white-space: nowrap; }

/* Dock mit Beschriftung, wie eine Tab-Leiste */
.v2-dock { padding: 6px 8px calc(6px); gap: 4px; }
.v2-di { width: auto; min-width: 64px; height: 50px; padding: 4px 10px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.v2-di .lbl { display: block; font-size: 10.5px; line-height: 1; white-space: nowrap; }
.v2-di.aktiv { background: var(--akzent-weich); }
.v2-di.aktiv::after { display: none; }

/* Leere Zustände */
.leerhinweis { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--flaeche-2); color: var(--text-2); line-height: 1.45; flex-wrap: wrap; }
.leerhinweis .ico { flex: none; margin-top: 2px; color: var(--akzent); }
.leerhinweis span { flex: 1 1 200px; }
.leerbrett { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 20px; border: 1px dashed var(--linie-2); border-radius: var(--r-l); background: var(--flaeche); max-width: 560px; margin: 24px auto; animation: rein var(--d-panel) var(--k-aus) both; }
.leerbrett .bl-i { width: 48px; height: 48px; border-radius: 14px; }
.leerbrett .bl-i .ico { width: 22px; height: 22px; }
.leerbrett .neben { margin: 0; max-width: 42ch; line-height: 1.5; }

/* Termine */
.termin-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-m); background: var(--flaeche-2); margin-top: 6px; }
.termin-form .feld { width: 100%; }
.termin-form .feld input { width: 100%; }
.termin-form .segment { align-self: flex-start; }

/* Probearbeit: Uhr links, Aufgabe rechts */
.ueb.probe { grid-template-columns: 280px minmax(0, 1fr); }
.ueb.probe .uhr { margin: 0 auto; }
.opt.gewaehlt { border-color: var(--akzent); background: var(--akzent-weich); }
@media (max-width: 820px) { .ueb.probe { grid-template-columns: minmax(0, 1fr); } .ueb.probe .uhr { width: 150px; height: 150px; } }

/* iPhone und iPad */
@media (max-width: 820px) {
  .v2-leiste { top: 0; }
  .v2-li-t { font-size: 12px; }
  .v2-blatt { right: 8px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .v2-dock { left: 8px; right: 8px; translate: none; max-width: none; justify-content: space-around; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .v2-di { flex: 1; min-width: 0; width: auto; height: 50px; }
  .s-kopf { gap: 10px; } .s-reiter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #weiterlernen span { display: none; }
}
@media (max-width: 480px) { .s-titel { font-size: 19px; } .v2-di .lbl { font-size: 10px; } .s-kopf .reiter button { padding: 0 9px; } }
@media (display-mode: standalone) { .nur-browser { display: none !important; } }
@media (max-width: 820px) { .ueb > .ueb-liste { order: 2; } .ueb > :nth-child(3) { order: 3; } }

/* ==========================================================================
   Konten, Fächer, Eltern-Bereich
   ========================================================================== */
/* Farbe pro Kind */
html:root[data-farbe="orange"] { --akzent: #c2620a; --akzent-2: #9f4f06; --akzent-weich: rgba(194, 98, 10, .11); --auf-akzent: #fff; }
html:root[data-farbe="violett"] { --akzent: #7044d4; --akzent-2: #5a33b5; --akzent-weich: rgba(112, 68, 212, .11); --auf-akzent: #fff; }
html:root[data-farbe="gruen"] { --akzent: #2e7d32; --akzent-2: #23672a; --akzent-weich: rgba(46, 125, 50, .11); --auf-akzent: #fff; }
html:root[data-farbe="rot"] { --akzent: #c0392b; --akzent-2: #a02d21; --akzent-weich: rgba(192, 57, 43, .10); --auf-akzent: #fff; }
html:root[data-farbe="blau"] { --akzent: #2457e6; --akzent-2: #1a45c2; --akzent-weich: rgba(36, 87, 230, .10); --auf-akzent: #fff; }
@media (prefers-color-scheme: dark) {
  html:root[data-farbe="orange"]:not([data-theme="light"]) { --akzent: #f0a14a; --akzent-2: #f5b56d; --akzent-weich: rgba(240, 161, 74, .14); --auf-akzent: #1d1206; }
  html:root[data-farbe="violett"]:not([data-theme="light"]) { --akzent: #a78bfa; --akzent-2: #bba5fb; --akzent-weich: rgba(167, 139, 250, .15); --auf-akzent: #160d2b; }
  html:root[data-farbe="gruen"]:not([data-theme="light"]) { --akzent: #6cc070; --akzent-2: #88cf8b; --akzent-weich: rgba(108, 192, 112, .14); --auf-akzent: #0b1a0c; }
  html:root[data-farbe="rot"]:not([data-theme="light"]) { --akzent: #f07a6c; --akzent-2: #f49487; --akzent-weich: rgba(240, 122, 108, .14); --auf-akzent: #220a07; }
  html:root[data-farbe="blau"]:not([data-theme="light"]) { --akzent: #5b8cff; --akzent-2: #7aa2ff; --akzent-weich: rgba(91, 140, 255, .14); --auf-akzent: #08101f; }
}
html:root[data-farbe="orange"][data-theme="dark"] { --akzent: #f0a14a; --akzent-2: #f5b56d; --akzent-weich: rgba(240, 161, 74, .14); --auf-akzent: #1d1206; }
html:root[data-farbe="violett"][data-theme="dark"] { --akzent: #a78bfa; --akzent-2: #bba5fb; --akzent-weich: rgba(167, 139, 250, .15); --auf-akzent: #160d2b; }
html:root[data-farbe="gruen"][data-theme="dark"] { --akzent: #6cc070; --akzent-2: #88cf8b; --akzent-weich: rgba(108, 192, 112, .14); --auf-akzent: #0b1a0c; }
html:root[data-farbe="rot"][data-theme="dark"] { --akzent: #f07a6c; --akzent-2: #f49487; --akzent-weich: rgba(240, 122, 108, .14); --auf-akzent: #220a07; }
html:root[data-farbe="blau"][data-theme="dark"] { --akzent: #5b8cff; --akzent-2: #7aa2ff; --akzent-weich: rgba(91, 140, 255, .14); --auf-akzent: #08101f; }

/* Fachfarben */
:root { --f-deutsch: #c2410c; --f-englisch: #2457e6; --f-latein: #a16207; --f-mathe: #7044d4; --f-biologie: #2e7d32; --f-physik: #0369a1; --f-chemie: #be185d; --f-tuerkisch: #b91c1c; --f-andere: #6b7280; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --f-deutsch: #f08a5d; --f-englisch: #7aa2ff; --f-latein: #e0b04d; --f-mathe: #b29bfb; --f-biologie: #7cc97f; --f-physik: #5cb8e6; --f-chemie: #f07bb3; --f-tuerkisch: #f87171; } }
:root[data-theme="dark"] { --f-deutsch: #f08a5d; --f-englisch: #7aa2ff; --f-latein: #e0b04d; --f-mathe: #b29bfb; --f-biologie: #7cc97f; --f-physik: #5cb8e6; --f-chemie: #f07bb3; --f-tuerkisch: #f87171; }
.fach-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: var(--s-12); color: var(--fc); background: color-mix(in srgb, var(--fc) 12%, transparent); white-space: nowrap; }
.fach-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fc); }
.fach-leiste { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 16px; padding: 2px 0; }
.fach-leiste button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2); font-size: var(--s-14); transition: background-color var(--d-zeig), color var(--d-zeig), border-color var(--d-zeig); }
.fach-leiste button i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--text-3)); }
.fach-leiste button:hover { color: var(--text); border-color: var(--linie-2); }
.fach-leiste button.aktiv { color: var(--text); border-color: var(--fc, var(--akzent)); background: color-mix(in srgb, var(--fc, var(--akzent)) 12%, var(--flaeche)); font-weight: 500; }
.fach-leiste button b { font-weight: 400; font-size: 11px; color: var(--text-3); font-family: var(--f-data); }
.fz { display: grid; grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 10px; align-items: center; padding: 5px 0; }
.fz .n { display: flex; align-items: center; gap: 7px; font-size: var(--s-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz .n::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fc); }
.fz .v { text-align: right; font-family: var(--f-data); font-size: var(--s-12); }
.fz .balken i { background: var(--fc); }

/* Anmeldung und Einrichtung */
.tor { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) 16px 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--akzent-weich), transparent 70%), var(--grund); }
.tor-karte { width: min(420px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-3); animation: rein var(--d-panel) var(--k-aus) both; }
.tor-karte.breit { width: min(560px, 100%); }
.tor-logo { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--akzent) 75%, #fff), var(--akzent)); color: var(--auf-akzent); font-weight: 500; font-size: 17px; letter-spacing: .02em; box-shadow: 0 6px 18px var(--akzent-weich); }
.tor h1 { margin: 0; font-size: var(--s-22); font-weight: 500; letter-spacing: -.01em; }
.tor p { margin: 0; color: var(--text-2); line-height: 1.5; }
.tor form { display: flex; flex-direction: column; gap: 12px; }
.tor .feld { width: 100%; height: 44px; }
.tor .feld input { width: 100%; }
.tor .knopf.primaer { height: 44px; justify-content: center; font-size: var(--s-16); }
.tor-fehler { color: var(--verlust); font-size: var(--s-14); min-height: 20px; }
.tor-fuss { font-size: var(--s-12); color: var(--text-3); text-align: center; }
.feld-l { display: flex; flex-direction: column; gap: 6px; font-size: var(--s-12); color: var(--text-2); }
.code-eingabe input { font-family: var(--f-data); letter-spacing: .18em; font-size: 20px; text-align: center; }
.schritte { display: flex; gap: 6px; } .schritte i { flex: 1; height: 4px; border-radius: 2px; background: var(--flaeche-3); } .schritte i.an { background: var(--akzent); }

/* Eltern-Bereich */
.kind-kopf { display: flex; align-items: center; gap: 12px; }
.ava { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 500; color: #fff; background: var(--kc, var(--akzent)); font-size: 16px; }
.ava.klein { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.ava.gross { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
[data-kf="petrol"] { --kc: #0b7f95; } [data-kf="orange"] { --kc: #c2620a; } [data-kf="violett"] { --kc: #7044d4; } [data-kf="gruen"] { --kc: #2e7d32; } [data-kf="rot"] { --kc: #c0392b; } [data-kf="blau"] { --kc: #2457e6; }
.zugang { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); border: 1px dashed var(--linie-2); background: var(--flaeche-2); }
.zugang .kv .zahl { font-size: 18px; letter-spacing: .06em; }
.wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--linie); color: var(--text-2); background: var(--flaeche); display: inline-flex; align-items: center; gap: 6px; }
.wahl button.an { color: var(--text); border-color: var(--fc, var(--akzent)); background: color-mix(in srgb, var(--fc, var(--akzent)) 12%, var(--flaeche)); }
.wahl button.an::before { content: "✓"; font-size: 12px; color: var(--fc, var(--akzent)); }
.farbwahl { display: flex; gap: 8px; } .farbwahl button { width: 30px; height: 30px; border-radius: 50%; background: var(--kc); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--linie); } .farbwahl button.an { border-color: var(--flaeche); box-shadow: 0 0 0 2px var(--kc); }
.form-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-raster .ganz { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-raster { grid-template-columns: minmax(0, 1fr); } }
.v2-marke .ava { margin-right: 2px; }
.offline-hinweis { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); translate: -50% 0; z-index: 70; padding: 6px 12px; border-radius: 14px; background: var(--tip-bg); color: var(--tip-text); font-size: var(--s-12); box-shadow: var(--schatten-2); }
.nur-lesen-hinweis { font-size: var(--s-12); color: var(--text-3); }

/* ===================== Elternbereich ===================== */
.v2-mitte.ohne-leiste { grid-template-columns: minmax(0, 1fr); }
.feld select { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; color: inherit; font: inherit; }
.e-form .feld, .termin-form .feld { height: 40px; }
.e-kind .k-titel, .kachel .k-titel .ava { vertical-align: middle; }
.k-titel .ava.klein { display: inline-grid; width: 24px; height: 24px; font-size: 11px; border-radius: 8px; margin-right: 4px; }
.e-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.e-zahlen > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--flaeche-2); }
.e-zahlen b { font-size: 16px; font-weight: 500; }
@media (max-width: 560px) { .e-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .e-wer { display: none; } }
.saeulen.klein { height: 100px; }
.knopf.scharf { background: var(--verlust); color: #fff; border-color: var(--verlust); }
.zugang { margin-bottom: 16px; animation: rein var(--d-panel) var(--k-aus) both; }
/* iOS zoomt bei Eingabefeldern unter 16px hinein */
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }
.zugang-schicht { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, #000 45%, transparent); animation: rein var(--d-panel) var(--k-aus) both; overflow-y: auto; }
.zugang-schicht .zugang { width: min(460px, 100%); margin: 0; background: var(--flaeche); border-style: solid; box-shadow: var(--schatten-3); }