/* =====================================================================
   Tokens: generiert aus docs/design-system/tokens.json mit npm run design-sync.
   Nicht von Hand ändern – neue Werte entstehen im Design-System.
   Nacht ist der Standard; Papier folgt dem Gerät oder data-theme="light".
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Variable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #0b1322;
  --bg-1: #121d33;
  --bg-2: #1a2842;
  --bg-3: #223354;
  --line: rgba(241,234,220,0.10);
  --line-strong: rgba(241,234,220,0.44);
  --ink: #f1eadc;
  --ink-2: #c2bbab;
  --ink-3: #a5a092;
  --ink-inverse: #0b1322;
  --paper: #ffffff;
  --paper-ink: #1a2333;
  --gold: #d6b36a;
  --gold-strong: #e6c884;
  --gold-ink: #e2c47e;
  --on-gold: #1a1608;
  --hero-fill: #d6b36a;
  --hero-orb: rgba(152,183,255,0.4);
  --gold-soft: rgba(214,179,106,0.14);
  --gold-line: rgba(214,179,106,0.45);
  --royal: #98b7ff;
  --royal-soft: rgba(152,183,255,0.14);
  --success: #58ccae;
  --success-soft: rgba(88,204,174,0.14);
  --warn: #f0a25a;
  --warn-soft: rgba(240,162,90,0.14);
  --danger: #f59586;
  --danger-soft: rgba(245,149,134,0.12);
  --glass-fill: rgba(18,29,51,0.64);
  --glass-stroke: rgba(241,234,220,0.14);
  --glass-highlight: rgba(255,255,255,0.10);
  --scrim: rgba(5,9,18,0.58);
  --focus: #e6c884;
  --tx-gold: #e2c47e;
  --tx-gold-fill: rgba(226,196,126,0.16);
  --tx-gold-mark: rgba(226,196,126,0.32);
  --tx-royal: #98b7ff;
  --tx-royal-fill: rgba(152,183,255,0.16);
  --tx-royal-mark: rgba(152,183,255,0.32);
  --tx-green: #6fd0a8;
  --tx-green-fill: rgba(111,208,168,0.16);
  --tx-green-mark: rgba(111,208,168,0.32);
  --tx-orange: #f0a868;
  --tx-orange-fill: rgba(240,168,104,0.16);
  --tx-orange-mark: rgba(240,168,104,0.32);
  --tx-red: #ef8f8f;
  --tx-red-fill: rgba(239,143,143,0.16);
  --tx-red-mark: rgba(239,143,143,0.32);
  --tx-violet: #c3a5ff;
  --tx-violet-fill: rgba(195,165,255,0.16);
  --tx-violet-mark: rgba(195,165,255,0.32);
  --tx-teal: #6fd3d8;
  --tx-teal-fill: rgba(111,211,216,0.16);
  --tx-teal-mark: rgba(111,211,216,0.32);
  --tx-brown: #d6b49a;
  --tx-brown-fill: rgba(214,180,154,0.16);
  --tx-brown-mark: rgba(214,180,154,0.32);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --touch-min: 44px;
  --tabbar: 64px;
  --icon: 24px;
  --content-max: 720px;
  --content-wide: 1080px;
  --content-laptop: 1320px;
  --sidebar: 264px;
  --sidebar-rail: 84px;
  --aside: 360px;
  --bp-phone-max: 743px;
  --bp-tablet: 744px;
  --bp-tablet-height: 500px;
  --bp-phone-max-height: 499px;
  --bp-tablet-wide: 1180px;
  --bp-laptop: 1440px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.28);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.35), 0 24px 64px rgba(0,0,0,0.45);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 40px rgba(0,0,0,0.35);
  --shadow-gold: 0 6px 20px rgba(214,179,106,0.28);
  --glass-blur: 24px;
  --glass-saturate: 160%;
  --glass-blur-soft: 12px;
  --disabled: 0.45;
  --pressed: 0.80;
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #f4efe6;
    --bg-1: #fbf8f2;
    --bg-2: #eee7da;
    --bg-3: #ffffff;
    --line: rgba(20,33,61,0.10);
    --line-strong: rgba(20,33,61,0.52);
    --ink: #14213d;
    --ink-2: #4a5470;
    --ink-3: #5c6479;
    --ink-inverse: #fbf8f2;
    --paper: #ffffff;
    --paper-ink: #1a2333;
    --gold: #a37b12;
    --gold-strong: #b08a35;
    --gold-ink: #705410;
    --on-gold: #1a1608;
    --hero-fill: #e6c77a;
    --hero-orb: rgba(255,250,240,0.45);
    --gold-soft: rgba(163,123,18,0.14);
    --gold-line: rgba(163,123,18,0.55);
    --royal: #2f53b8;
    --royal-soft: rgba(47,83,184,0.12);
    --success: #0f6653;
    --success-soft: rgba(15,102,83,0.12);
    --warn: #864908;
    --warn-soft: rgba(134,73,8,0.12);
    --danger: #a63626;
    --danger-soft: rgba(166,54,38,0.12);
    --glass-fill: rgba(251,248,242,0.68);
    --glass-stroke: rgba(20,33,61,0.12);
    --glass-highlight: rgba(255,255,255,0.70);
    --scrim: rgba(20,33,61,0.38);
    --focus: #2f53b8;
    --tx-gold: #705410;
    --tx-gold-fill: rgba(112,84,16,0.14);
    --tx-gold-mark: rgba(112,84,16,0.28);
    --tx-royal: #2f53b8;
    --tx-royal-fill: rgba(47,83,184,0.14);
    --tx-royal-mark: rgba(47,83,184,0.28);
    --tx-green: #1c6b48;
    --tx-green-fill: rgba(28,107,72,0.14);
    --tx-green-mark: rgba(28,107,72,0.28);
    --tx-orange: #8a4b0f;
    --tx-orange-fill: rgba(138,75,15,0.14);
    --tx-orange-mark: rgba(138,75,15,0.28);
    --tx-red: #a32626;
    --tx-red-fill: rgba(163,38,38,0.14);
    --tx-red-mark: rgba(163,38,38,0.28);
    --tx-violet: #6b3fbf;
    --tx-violet-fill: rgba(107,63,191,0.14);
    --tx-violet-mark: rgba(107,63,191,0.28);
    --tx-teal: #14666d;
    --tx-teal-fill: rgba(20,102,109,0.14);
    --tx-teal-mark: rgba(20,102,109,0.28);
    --tx-brown: #7a4f33;
    --tx-brown-fill: rgba(122,79,51,0.14);
    --tx-brown-mark: rgba(122,79,51,0.28);
    --shadow-1: 0 1px 2px rgba(20,33,61,0.06), 0 8px 24px rgba(20,33,61,0.08);
    --shadow-2: 0 2px 4px rgba(20,33,61,0.08), 0 24px 64px rgba(20,33,61,0.16);
    --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.70), 0 12px 40px rgba(20,33,61,0.12);
    --shadow-gold: 0 6px 20px rgba(201,162,78,0.30);
  }
}

:root[data-theme="light"] {
  --bg-0: #f4efe6;
  --bg-1: #fbf8f2;
  --bg-2: #eee7da;
  --bg-3: #ffffff;
  --line: rgba(20,33,61,0.10);
  --line-strong: rgba(20,33,61,0.52);
  --ink: #14213d;
  --ink-2: #4a5470;
  --ink-3: #5c6479;
  --ink-inverse: #fbf8f2;
  --paper: #ffffff;
  --paper-ink: #1a2333;
  --gold: #a37b12;
  --gold-strong: #b08a35;
  --gold-ink: #705410;
  --on-gold: #1a1608;
  --hero-fill: #e6c77a;
  --hero-orb: rgba(255,250,240,0.45);
  --gold-soft: rgba(163,123,18,0.14);
  --gold-line: rgba(163,123,18,0.55);
  --royal: #2f53b8;
  --royal-soft: rgba(47,83,184,0.12);
  --success: #0f6653;
  --success-soft: rgba(15,102,83,0.12);
  --warn: #864908;
  --warn-soft: rgba(134,73,8,0.12);
  --danger: #a63626;
  --danger-soft: rgba(166,54,38,0.12);
  --glass-fill: rgba(251,248,242,0.68);
  --glass-stroke: rgba(20,33,61,0.12);
  --glass-highlight: rgba(255,255,255,0.70);
  --scrim: rgba(20,33,61,0.38);
  --focus: #2f53b8;
  --tx-gold: #705410;
  --tx-gold-fill: rgba(112,84,16,0.14);
  --tx-gold-mark: rgba(112,84,16,0.28);
  --tx-royal: #2f53b8;
  --tx-royal-fill: rgba(47,83,184,0.14);
  --tx-royal-mark: rgba(47,83,184,0.28);
  --tx-green: #1c6b48;
  --tx-green-fill: rgba(28,107,72,0.14);
  --tx-green-mark: rgba(28,107,72,0.28);
  --tx-orange: #8a4b0f;
  --tx-orange-fill: rgba(138,75,15,0.14);
  --tx-orange-mark: rgba(138,75,15,0.28);
  --tx-red: #a32626;
  --tx-red-fill: rgba(163,38,38,0.14);
  --tx-red-mark: rgba(163,38,38,0.28);
  --tx-violet: #6b3fbf;
  --tx-violet-fill: rgba(107,63,191,0.14);
  --tx-violet-mark: rgba(107,63,191,0.28);
  --tx-teal: #14666d;
  --tx-teal-fill: rgba(20,102,109,0.14);
  --tx-teal-mark: rgba(20,102,109,0.28);
  --tx-brown: #7a4f33;
  --tx-brown-fill: rgba(122,79,51,0.14);
  --tx-brown-mark: rgba(122,79,51,0.28);
  --shadow-1: 0 1px 2px rgba(20,33,61,0.06), 0 8px 24px rgba(20,33,61,0.08);
  --shadow-2: 0 2px 4px rgba(20,33,61,0.08), 0 24px 64px rgba(20,33,61,0.16);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.70), 0 12px 40px rgba(20,33,61,0.12);
  --shadow-gold: 0 6px 20px rgba(201,162,78,0.30);
}

/* ==== Komponenten: docs/design-system/components/bundle.css, unverändert ==== */
/* =====================================================================
   Medix – components/bundle.css
   Vorlage für public/styles.css: darüber die Tokens (tokens.css), darunter
   diese Klassen. Keine Hex-Werte hier – alles über var(--token).
   Reihenfolge: Basis · Typografie · Buttons · Felder · Auswahl · Chips ·
   Listen · Glas und Navigation · Sheet · Toast · Fortschritt · Leer · Wissen ·
   Zeit · Ausblick · Hilfsklassen · Seitengerüst und breite Screens (Media Queries)
   Umbruchpunkte (tokens.json, Familie breakpoint): bp-tablet 744px · bp-tablet-wide 1180px · bp-laptop 1440px.
   Werte je Element (Fortschritt, Ring, Woche) kommen als SVG-Attribute oder Klassen, nie als style= (CSP).
   ===================================================================== */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-0); }
:root, [data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
/* Jede Klappe (<summary>) ist klickbar und zeigt das auch. */
summary { cursor: pointer; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--royal); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
.icon { display: inline-block; vertical-align: middle; flex: none; }
h1, h2, h3, p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Basis: Nachtrag Nachbessern 09.10. abends (Runde 14b, Brücke, Punkt für den Design-Chat) ----------
   Kein Zoom durch Doppeltipp am iPhone (Jakob: „bei doppelt tippen zoomt es rein“): manipulation erlaubt Wischen und
   zwei Finger, nur den Doppeltipp nicht; Viewer, Notiz und Lightbox zoomen weiter selbst (ihr eigenes touch-action).
   Push in der App (Hülle, data-shell): Der Schalter „Push erlauben“ bleibt aus und sieht auch so aus. */
html { touch-action: manipulation; }
[data-shell] .switch input:disabled + .switch__track { opacity: var(--disabled); }
[data-shell] .switch input:disabled { cursor: default; }

/* ---------- Typografie (Klassen = Stilnamen aus tokens.json) ---------- */
.display, .h1, .h2, .h3, .question, h1, h2, h3 {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-optical-sizing: auto;
  color: var(--ink);
}
.display, h1.display { font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -0.01em; }
.h1, h1 { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; }
.h2, h2 { font-size: 22px; line-height: 28px; font-weight: 500; }
.h3, h3 { font-size: 18px; line-height: 24px; font-weight: 600; }
.question { font-size: 22px; line-height: 30px; font-weight: 500; }
.body-lg { font-size: 17px; line-height: 24px; font-weight: 400; }
.body { font-size: 15px; line-height: 22px; font-weight: 400; }
.body-sm { font-size: 13px; line-height: 18px; font-weight: 400; }
.label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; }
.caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; }
.caption--upper { text-transform: uppercase; letter-spacing: 0.06em; }
.button { font-size: 15px; line-height: 20px; font-weight: 600; }
.number { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.gold-ink { color: var(--gold-ink); }
.royal { color: var(--royal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-md); padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: 15px; line-height: 20px; font-weight: 600;
  color: var(--ink); background: transparent;
  white-space: nowrap; user-select: none; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out, opacity 160ms ease-out;
}
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn.is-disabled { opacity: var(--disabled); pointer-events: none; }
.btn--primary { background: var(--gold); color: var(--on-gold); }
.btn--primary:hover { background: var(--gold-strong); }
.btn--primary:active { background: var(--gold-strong); box-shadow: var(--shadow-gold); }
.btn--secondary { border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { background: var(--bg-2); }
.btn--tertiary { color: var(--gold-ink); padding: 0 var(--space-3); }
.btn--tertiary:hover { background: var(--gold-soft); }
.btn--danger { background: var(--danger-soft); color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }
.btn--lg { height: var(--control-lg); padding: 0 var(--space-6); border-radius: var(--radius-md); font-size: 17px; }
.btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; line-height: 18px; border-radius: var(--radius-sm); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--touch-min); height: var(--touch-min); padding: 0; border-radius: var(--radius-pill); color: var(--ink); }
.btn--icon:hover { background: var(--bg-2); }
.btn--icon.btn--sm { width: var(--control-sm); height: var(--control-sm); }
.btn--primary.btn--icon { color: var(--on-gold); }
.btn__sub { font-size: 12px; line-height: 16px; font-weight: 500; opacity: 0.8; }
.btn-group { display: flex; gap: var(--space-2); }
.btn-group > .btn { flex: 1; }

/* ---------- Bedienelemente nicht markierbar (Runde 13, Nachtrag Nachbessern 09.10. abends; Regel im Design-Stand seit Runde 11.10., Punkt 11) ----------
   Gemeldet 1df7f2c9 (Mac-App): Ein Doppelklick auf „Lesen“ oder „Platz“ markierte die Beschriftung wie Text. Safari und die App
   (WebKit) kennen nur -webkit-user-select; .btn oben setzt allein user-select. Knöpfe samt Beschriftung, Leisten, Menüs, Reiter,
   Farbfelder, der Kopf der Notiz, Seitenleiste und Tab-Bar werden durch Doppelklick oder Ziehen nie markiert, ebenso leeres
   Papier der Notiz. Text in Kästen, Karten, Feldern, Antworten und Listen bleibt markierbar (in WebKit erbt
   -webkit-user-select, deshalb setzen Felder und Textkästen es ausdrücklich zurück). */
:is(button, summary, .btn, [role="tab"], [role="toolbar"], .tool-group, .pop__panel, .ctx, .segmented, .swatch, .sidebar, .tabbar, .nb__head, .nb__bar, .editor__sub, .nb__sheet) { -webkit-user-select: none; user-select: none; }
:is(input, textarea, [contenteditable="true"], .nb-box__text, .nb-obj__cap) { -webkit-user-select: text; user-select: text; }

/* ---------- Seiten nicht markierbar, Leseinhalt schon (Runde 13, Nachtrag Nachbessern 10.10., H5; Regel im Design-Stand seit Runde 11.10., Punkt 11) ----------
   Gemeldet 82ce0580 (iPad-App, Lehrveranstaltung): Ein Tipp oder Halten markierte die halbe Seite blau (Prüfungs-Kachel,
   Lernstand, Einheiten-Zeilen, Abschnittsköpfe) samt „Kopieren · Übersetzen“. Statt jeden Baustein einzeln aufzuzählen,
   sind die Seite selbst (main.content), jedes Sheet, Erklären und die Suche nicht markierbar; markierbar ist nur, was man
   liest oder schreibt: Felder und Editoren (Regel darüber), Medix-Text (.text: Dokumente, Lernseiten, Lernprofil), Frage
   und Antwort der Karte, die Nachrichten in Erklären und im Gespräch, Vorher/Nachher eines Vorschlags, die Werkstatt-Texte
   und Jakobs Satz in Gemeldet. Neue Bausteine sind damit von selbst nicht markierbar; neuer Leseinhalt kommt in die zweite
   Liste. Am Mac und im Browser markiert Ziehen über Leseinhalt weiter. */
:is(.content, .sheet, .explain, .search-layer) { -webkit-user-select: none; user-select: none; }
:is(.content, .sheet, .explain, .search-layer) :is(.text, .flashcard__question, .flashcard__answer, .msg, .diff__side, .change__desc, .round__desc, .brief__text, .bug-reports .row__title, .bug-report__note) { -webkit-user-select: text; user-select: text; }
.flashcard__answer-label { -webkit-user-select: none; user-select: none; }

/* ---------- Felder ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); padding-left: 2px; }
.field__input {
  width: 100%; min-height: var(--control-md); padding: 0 var(--space-3);
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  font-size: 15px; line-height: 22px;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
  appearance: none; -webkit-appearance: none;
}
.field__input::placeholder { color: var(--ink-3); }
.field__input:hover { border-color: var(--line-strong); }
.field__input:focus-visible { border-color: var(--gold-line); outline-offset: 2px; }
textarea.field__input { padding: var(--space-3); min-height: 120px; resize: vertical; line-height: 22px; }
.field__input--mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.field__input--sm { height: var(--control-sm); font-size: 13px; padding: 0 var(--space-3); }
.field__hint { font-size: 13px; line-height: 18px; color: var(--ink-2); padding-left: 2px; }
.field__error { display: none; font-size: 13px; line-height: 18px; color: var(--danger); padding-left: 2px; }
.field--error .field__input { border-color: var(--danger); }
.field--error .field__error { display: block; }
.field--error .field__hint { display: none; }
.field__wrap { position: relative; display: flex; align-items: center; }
.field__wrap .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.field__wrap .field__input { padding-left: 40px; }
.field__input--search { border-radius: var(--radius-pill); }
.field__input[disabled] { opacity: var(--disabled); }
/* Auswahlliste: natives <select> im Feld-Look, Chevron rechts. */
.field__select { position: relative; }
.field__select .field__input { padding-right: 40px; cursor: pointer; }
.field__select .icon { position: absolute; right: var(--space-3); left: auto; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.field__select option { background: var(--bg-3); color: var(--ink); }
input[type="date"].field__input, input[type="time"].field__input { font-variant-numeric: tabular-nums; min-width: 0; }
input[type="date"].field__input::-webkit-calendar-picker-indicator, input[type="time"].field__input::-webkit-calendar-picker-indicator { opacity: 0.6; }
.field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field__count { font-size: 12px; line-height: 16px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Auswahl: Segmented, Schalter, Checkbox ---------- */
.segmented {
  display: flex; padding: 3px; gap: 2px;
  background: var(--bg-2); border-radius: var(--radius-pill);
}
.segmented__item {
  flex: 1; min-width: 0; height: 38px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-3);
  transition: background-color 160ms ease-out, color 160ms ease-out;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.segmented__item:hover { color: var(--ink-2); }
.segmented__item.is-active, .segmented__item[aria-checked="true"] {
  background: var(--bg-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.segmented--sm .segmented__item { height: 30px; font-size: 13px; line-height: 18px; }
/* In natürlicher Breite (nicht gleich breit), damit fünf Wörter auch bei 375px in eine Zeile passen – Suche, Upload. */
.segmented--fit .segmented__item { flex: 0 1 auto; padding: 0 var(--space-2); font-size: 12px; }

.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.switch__track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px;
  border-radius: 50%; background: var(--ink);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}
.switch input:checked + .switch__track { background: var(--gold); box-shadow: none; }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--on-gold); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }

.check {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.check::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid var(--on-gold); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform 160ms ease-out;
}
.check:checked { background: var(--gold); border-color: var(--gold); }
.check:checked::after { transform: rotate(45deg) scale(1); }
.check--round { border-radius: 50%; }
.check-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); cursor: pointer; }

/* ---------- Lernstand-Karte (hero-card): große Zahl auf Gold mit Kreis oben rechts; Farben je Theme aus hero-fill und hero-orb ---------- */
.hero-card { position: relative; overflow: hidden; padding: var(--space-5); border-radius: var(--radius-2xl); background: var(--hero-fill); color: var(--on-gold); }
.hero-card::after { content: ""; position: absolute; right: -50px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: var(--hero-orb); z-index: 0; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .caption { color: var(--on-gold); opacity: 0.8; }
.hero-card .display { color: var(--on-gold); font-size: 30px; line-height: 36px; }
.hero-card .body { color: var(--on-gold); }

/* ---------- Chips und Badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 28px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--bg-2); color: var(--ink-2);
  font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap; border: 1px solid transparent;
}
.chip .icon { width: 16px; height: 16px; }
.chip--gold { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.chip--royal { background: var(--royal-soft); color: var(--royal); }
.chip--success { background: var(--success-soft); color: var(--success); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
/* Status „Geplant“: eigene Fläche wie Gehalten (success) und Entfallen (danger). */
.chip--planned { background: var(--bg-3); border-color: var(--line-strong); color: var(--ink); }
.chip--action { height: var(--control-sm); padding: 0 var(--space-3); cursor: pointer; color: var(--ink); }
.chip--action:hover { background: var(--bg-3); }
.chip--action.is-active { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--on-gold);
  font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.badge--quiet { background: var(--bg-2); color: var(--ink-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
/* Ein Punkt als Trenner im Fließtext (Zweitzeilen): 3px, mit Luft links und rechts. */
.row__sub .dot, .course__meta .dot, .material__meta .dot, .objective__meta .dot { width: 3px; height: 3px; margin: 0 7px; vertical-align: middle; color: var(--ink-3); }

/* ---------- Listen und Zeilen ---------- */
.list { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: var(--space-3) var(--space-4);
  color: var(--ink); text-align: left; width: 100%;
}
.row + .row { border-top: 1px solid var(--line); }
.row--link { cursor: pointer; transition: background-color 120ms ease-out; }
.row--link:hover { background: var(--bg-2); }
.row--link:active { opacity: var(--pressed); }
button.row, label.row { font: inherit; color: inherit; background: none; cursor: pointer; }
.row__lead { color: var(--ink-2); display: grid; place-items: center; }
.row__lead:empty { display: none; }
.row__body { min-width: 0; }
.row__title { font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__trail { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); font-size: 15px; }
.row__value { color: var(--ink-2); }
.row--2 { grid-template-columns: 1fr auto; }
.list__title {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--space-1) var(--space-2);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.section { display: flex; flex-direction: column; gap: var(--space-3); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.section__head .btn--tertiary { height: 32px; padding: 0 var(--space-2); }
.card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.card--raised { background: var(--bg-3); box-shadow: var(--shadow-1); }
.card--gold { background: var(--gold-soft); border-color: var(--gold-line); }
.card--royal { background: var(--royal-soft); border-color: transparent; }
.card--success { background: var(--success-soft); border-color: transparent; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--lg { gap: var(--space-6); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Glas und Navigation ---------- */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-glass);
}
.glass--soft {
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg-3); }
}
.screen { position: relative; min-height: 100%; }
.page-title { padding: var(--space-3) 0 var(--space-4); }
/* Seitenkopf: keine Seite hat oben eine Leiste. Unterseiten beginnen mit dem Zurück-Link (Name der Seite eine Ebene höher)
   über dem Serif-Titel; Aktionen stehen rechts neben dem Titel (page-head__actions), Meta darunter (page-head__meta). */
.page-head { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 0 var(--space-4); }
.page-head__back {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 2px;
  min-height: var(--touch-min); margin-left: -6px; padding: 0 var(--space-2) 0 var(--space-1);
  border-radius: var(--radius-sm); color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}
.page-head__back .icon { width: 18px; height: 18px; }
.page-head__back:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; }
.page-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-head__row > .h1, .page-head__row > .page-title { flex: 1; min-width: 0; padding: 0; }
.page-head__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; margin-right: -6px; }
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.page-head__meta .dot { width: 3px; height: 3px; color: var(--ink-3); }
.page-head__meta .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.content {
  position: relative; z-index: 1;
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--tabbar) + 28px + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
  max-width: var(--content-max); margin: 0 auto;
  animation: fade-in 280ms ease-out;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Chip „Test“ am Handy: keine eigene Zeile, oben rechts auf Höhe des Titels (page-title) bzw. des Zurück-Links. Ab 744px zeigt ihn die Seitenleiste. */
.env-badge { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + var(--space-4) + 15px); right: max(var(--space-4), env(safe-area-inset-right, 0px)); line-height: 0; }
.env-badge:has(+ .page-head), .env-badge:has(+ .unit-head) { top: calc(env(safe-area-inset-top, 0px) + var(--space-4) + 8px); }
/* Karte im Lernmodus: Der Chip sitzt rechts in der Kopfzeile (Zurück · Fortschritt · Bearbeiten), die Zeile macht ihm Platz. */
.env-badge:has(+ .study) { top: calc(env(safe-area-inset-top, 0px) + var(--space-4) + 6px); }
.env-badge + .study .study__top { padding-right: 64px; }
/* Einzelne Karte (Kartenseite): links der Zurück-Link, rechts der Bearbeiten-Knopf – am Handy bleibt er links vom Chip „Test“. */
.study__top:has(> .page-head__back) { grid-template-columns: minmax(0, 1fr) auto; }
.content--alone .env-badge { position: static; line-height: normal; padding-top: var(--space-2); }
.tabbar {
  position: fixed; left: max(var(--space-4), env(safe-area-inset-left, 0px)); right: max(var(--space-4), env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  height: var(--tabbar); padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  max-width: calc(var(--content-max) - 2 * var(--space-4)); margin: 0 auto;
}
.tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-3); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: var(--radius-pill); transition: color 160ms ease-out;
}
.tabbar__item .icon { width: 26px; height: 26px; }
.tabbar__item:hover { color: var(--ink-2); }
.tabbar__item.is-active { color: var(--ink); }
.tabbar__item.is-active::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.tabbar--absolute { position: absolute; }
/* „Suchen“ in Tab-Bar und Seitenleiste ist ein Knopf (data-search-open): er öffnet die Such-Ebene, lädt keine Seite. */
button.tabbar__item, button.sidebar__item { -webkit-appearance: none; appearance: none; margin: 0; width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer; }

/* ---------- Sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 240ms cubic-bezier(.2,.8,.2,1); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bg-3); color: var(--ink);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-2);
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  max-width: var(--content-max); margin: 0 auto;
  transform: translateY(100%); transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.sheet.is-open { transform: translateY(0); }
.sheet__grip { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); margin: 0 auto var(--space-4); }
.sheet__title { padding-bottom: var(--space-2); }
.sheet__text { color: var(--ink-2); padding-bottom: var(--space-4); }
.sheet__actions { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
/* Sheet mit mehreren Schritten (Design-Runde 09.10., Punkt 1: „Lernblock“ › Verschieben): Die Liste ist Schritt 1, ein Tipp auf eine Zeile mit data-pane-go öffnet Schritt 2
   im selben Sheet (data-pane), der Pfeil im Kopf (sheet__nav) führt zurück; das Sheet schließt dabei nie. Beim Schließen steht es wieder auf Schritt 1. */
.sheet__pane[hidden] { display: none; }
.sheet__nav { display: flex; align-items: center; gap: var(--space-2); margin-left: calc(var(--space-2) * -1); }
.sheet__nav .sheet__title { padding-bottom: 0; }
.sheet__nav + .sheet__text { padding-top: var(--space-1); }
/* Zeitwahl (timepick): großes Feld „Beginnen um“, Schnellwahl als Chips, darunter die Folge in einer Zeile und der eine Knopf. Medix.timePick rechnet mit
   data-dur (Minuten), data-limit („bis spätestens“) am Schritt; passt der Block nicht mehr, wird die Zeile warn und der Knopf gedämpft. */
.timepick { display: flex; flex-direction: column; gap: var(--space-4); }
.timepick .field__input { min-height: 64px; font-size: 28px; line-height: 36px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.timepick__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.timepick__result { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-2); font-size: 14px; line-height: 20px; color: var(--ink); }
.timepick__result .icon { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.timepick__result.is-warn { background: var(--warn-soft); color: var(--warn); }
.timepick__result.is-warn .icon { color: var(--warn); }
.timepick .field__hint { text-align: center; }
.timepick .btn[disabled] { opacity: var(--disabled); pointer-events: none; }
.scrim--absolute, .sheet--absolute { position: absolute; }

/* ---------- Bild groß (Lightbox) ----------
   Ein Tipp auf ein Bild im Text öffnet es groß über der Seite (Medix.lightbox()): zuerst eingepasst, ein zweiter Tipp oder Zwei-Finger-Zoom
   vergrößert, dann lässt es sich schieben; X, Escape oder ein Tipp daneben schließen. */
.lightbox { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--bg-0) 92%, transparent); display: flex; align-items: center; justify-content: center; animation: fade-in 200ms ease-out; }
.lightbox__stage { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: var(--space-4); touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.lightbox__stage > * { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-md); background: var(--paper); cursor: zoom-in; transform-origin: 0 0; }
.lightbox__stage > img, .lightbox__stage > svg { object-fit: contain; }
.lightbox.is-zoomed .lightbox__stage { display: block; }
.lightbox.is-zoomed .lightbox__stage > * { max-width: none; max-height: none; width: calc(var(--zoom, 2.5) * 100%); cursor: zoom-out; }
.lightbox.is-zoomed .lightbox__stage > .tx-labeled { width: calc(var(--zoom, 2.5) * 100%); }
.lightbox__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + var(--space-3)); right: var(--space-3); z-index: 1; background: var(--bg-3); color: var(--ink); box-shadow: var(--shadow-2); }
.lightbox__stage > .tx-labeled { position: relative; }
.lightbox__stage > .tx-labeled > svg, .lightbox__stage > .tx-labeled > img { width: 100%; height: auto; display: block; }
.text .tx-figure img, .text .tx-figure svg, .text .tx-labeled { cursor: zoom-in; }
.text .tx-covered:has(.tx-cover:not(.is-open)) > img, .text .tx-covered:has(.tx-cover:not(.is-open)) > svg { cursor: default; }
.lightbox--absolute { position: absolute; }
body.has-lightbox { overflow: hidden; }

/* ---------- Toast ---------- */
.toast-host { position: fixed; left: max(var(--space-4), env(safe-area-inset-left, 0px)); right: max(var(--space-4), env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar) + 24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-md); padding: var(--space-2) var(--space-4);
  background: var(--bg-3); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  font-size: 15px; line-height: 20px; font-weight: 500;
  opacity: 0; transform: translateY(8px); transition: opacity 240ms cubic-bezier(.2,.8,.2,1), transform 240ms cubic-bezier(.2,.8,.2,1);
  pointer-events: auto; max-width: 100%;
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast__icon { display: grid; place-items: center; color: var(--ink-2); }
.toast--success .toast__icon { color: var(--success); }
.toast--danger .toast__icon { color: var(--danger); }
.toast--gold { border-color: var(--gold-line); }
.toast--gold .toast__icon { color: var(--gold-ink); }

/* ---------- Toast mit Knopf (Runde 25f2, Nachtrag 09.10.; gezeichnet in Runde 11.10., Punkt 11) ----------
   „Aufnahme gelöscht“ mit dem Knopf „Rückgängig“, 10 Sekunden lang (Jakob, Antwort 3 zu a1317d31). Der Knopf steht rechts im Toast,
   tertiär und klein, der Toast rückt rechts dafür näher an den Rand. Auch für andere Stellen mit Rückgängig. */
.toast--action { padding-right: var(--space-2); gap: var(--space-3); }
.toast__action { flex: none; margin-left: auto; }
/* Bei offenem Sheet steht der Toast mit Knopf in jeder Breite über dem Sheet und verdeckt keinen Knopf (Jakob, Antwort 2
   vom 10.10.); unten stand er über dem unteren Teil des Sheets („Löschen“, „Schließen“). public/record.js misst und setzt
   is-over-sheet samt --over-sheet (Abstand vom unteren Rand: direkt über dem oberen Rand des Sheets). Passt er dort nicht
   hin (iPhone hoch, flache Fenster), steht er oben unter der Statusleiste (is-top), und das Sheet ist so lange kürzer und
   scrollt in sich (is-under-toast, --under-toast). Ist das Sheet zu, steht der Toast wieder unten. */
body:has(.sheet.is-open) .toast-host.is-over-sheet { top: auto; bottom: var(--over-sheet, 0px); }
body:has(.sheet.is-open) .toast-host.is-over-sheet.is-top { top: calc(env(safe-area-inset-top, 0px) + var(--space-3)); bottom: auto; }
.sheet.is-open.is-under-toast { max-height: var(--under-toast, none); }

/* ---------- Sheet „Passt nicht“ an der Karte (Design-Runde 19.10., Auftrag 38d2; Beschluss Konzeptblöcke, Punkt 4) ----------
   Ein Feld „Rückmeldung“, Gründe zum Ankreuzen (mehrere, royal-soft, Häkchen statt nur Farbe) und die vier Aktionen als Zeilen:
   Nur melden · Überspringen · Löschen · Ändern. Ein Tipp auf eine Aktion führt sie aus (kein zweiter Bestätigen-Schritt, denn drei
   von vier lassen sich per Toast zurücknehmen); fehlt das, was die Aktion braucht, steht der Satz am Feld (field--error) und die
   Aktion läuft nicht. Kein Gold: das Sheet ist keine Hauptaktion. Nur Karten haben alle vier Zeilen (data-kind="exercise"), jedes
   andere Objekt (Lernseite, Lernziel …) nur „Nur melden“. */
.sheet--scroll, .sheet--feedback { max-height: min(92vh, 100%); overflow-y: auto; overscroll-behavior: contain; }   /* sheet--scroll: ein langes Sheet scrollt in sich (KI in Medix, Konto löschen) */
.sheet--feedback .sheet__text { padding-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feedback__form { display: flex; flex-direction: column; gap: var(--space-4); }
.feedback__group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.feedback__group > .field__label { padding: 0 0 0 2px; }
.feedback textarea.field__input { min-height: 72px; }
.feedback__reasons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.feedback__reasons .chip--action { height: var(--control-sm); padding: 0 var(--space-3); background: var(--bg-2); border-color: var(--line); }
.feedback__reasons .chip--action:hover { background: var(--bg-1); }
.feedback__reasons .chip--action[aria-pressed="true"] { background: var(--royal-soft); color: var(--royal); border-color: var(--royal); }
.feedback__tick { display: none; }
.feedback__reasons .chip--action[aria-pressed="true"] .feedback__tick { display: inline-flex; }
.feedback__tick .icon { width: 14px; height: 14px; }
.feedback__actions .row { min-height: 52px; padding: var(--space-2) var(--space-3); }
.feedback__actions .row__sub { white-space: normal; }
.feedback__actions .row__lead .icon { width: 20px; height: 20px; }
.row--danger .row__title, .row--danger .row__lead { color: var(--danger); }
.feedback[data-kind]:not([data-kind="exercise"]) [data-card-only] { display: none; }

/* ---------- Fortschritt ---------- */
/* <svg class="progress"><rect class="progress__track" width="100%" height="100%" rx="3"/><rect class="progress__bar" width="62%" height="100%" rx="3"/></svg>
   Der Wert steht als width-Attribut am Balken (SVG-Attribute erlaubt die CSP), nie als style=. */
.progress { display: block; width: 100%; height: 6px; border-radius: var(--radius-pill); overflow: hidden; }
.progress__track { fill: var(--bg-2); }
.progress__bar { fill: var(--gold); transition: width 320ms cubic-bezier(.2,.8,.2,1); }
.progress--thin { height: 4px; }
.progress--royal .progress__bar { fill: var(--royal); }
.progress--success .progress__bar { fill: var(--success); }
.progress-line { display: flex; align-items: center; gap: var(--space-3); }
.progress-line .progress { flex: 1; }
.progress-line__text { font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ring { position: relative; flex: none; width: 96px; height: 96px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--bg-2); stroke-width: 8; }
/* Der Wert steht als stroke-dashoffset-Attribut am Kreis: 264 × (1 − Anteil), bei r=42. */
.ring__bar { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 264; transition: stroke-dashoffset 320ms cubic-bezier(.2,.8,.2,1); }
.ring__value { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--gold-ink); }
.ring__label { font-size: 11px; line-height: 14px; color: var(--ink-2); }
.ring--lg { width: 128px; height: 128px; }
.streak { display: flex; gap: var(--space-2); align-items: center; }
.streak__day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.streak__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.streak__day.is-done .streak__dot { background: var(--gold); border-color: var(--gold); }
.streak__day.is-today .streak__dot { border-color: var(--gold-line); border-style: dashed; }
.streak__day.is-today { color: var(--gold-ink); }

/* ---------- Leerer Zustand ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-4); }
.empty__icon { color: var(--ink-3); margin-bottom: var(--space-2); }
.empty__icon .icon { width: 40px; height: 40px; stroke-width: 1.25; }
.empty__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.empty__text { color: var(--ink-2); max-width: 300px; }
.empty__action { margin-top: var(--space-3); }

/* ---------- Wissen: Karteikarte ---------- */
.study { display: flex; flex-direction: column; gap: var(--space-4); }
.study__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.study__top .page-head__back { margin-left: -6px; }
.flashcard {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 340px; padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-1);
}
.flashcard--focus { border-color: var(--gold-line); }
.flashcard__meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.flashcard__meta .dot { display: inline-block; vertical-align: middle; width: 4px; height: 4px; margin: 0 var(--space-2); }
.flashcard__meta .chip { vertical-align: middle; margin-left: var(--space-2); }
.flashcard__meta .chip--agent { margin: 0 var(--space-2) 0 0; height: 20px; font-size: 11px; padding: 0 6px; letter-spacing: 0; text-transform: none; }
/* Frage und Antwort sehen gleich aus (26.09.): dieselbe Sans, dieselbe Größe, dasselbe Gewicht – 17/24, ab iPad 18/27. Nur der Bereichstitel unterscheidet sie. Serif nur für Überschriften. */
.flashcard__question { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 400; }
.flashcard__answer { display: none; flex-direction: column; gap: var(--space-2); font-size: 17px; line-height: 24px; color: var(--ink); animation: fade-up 240ms cubic-bezier(.2,.8,.2,1); }
.flashcard__answer-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.flashcard.is-revealed .flashcard__answer { display: flex; }
/* Layouts der Vorlagen (display.layout): card_basic und card_cloze nutzen Frage und Antwort;
   card_list zeigt die Badge-Liste als Antwort, card_term den Begriff groß und die Erklärung darunter. */
.flashcard__question .text { margin-top: var(--space-3); font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 400; }
.flashcard__question .tx-badges { gap: var(--space-2); }
.flashcard__count { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); margin-top: var(--space-2); }
.flashcard--term { text-align: center; }
.flashcard--term .flashcard__question { font-size: 30px; line-height: 38px; }
.flashcard--term .flashcard__answer { align-items: center; }
.flashcard--term .flashcard__meta { text-align: center; }
.flashcard--term .flashcard__source, .flashcard--term .flashcard__tools { justify-content: center; }
.flashcard--term .flashcard__origin > summary .icon:last-child, .flashcard--term .flashcard__more > summary .icon:last-child { margin-left: 0; }
.flashcard--term .flashcard__origin > summary, .flashcard--term .flashcard__more > summary { justify-content: center; }
/* Art der Karte („Begriff“, „Aufzählen“) und Titel-Zone (title): beide über der Frage, in jedem Layout. */
.flashcard__kind { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.flashcard__title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.flashcard:not(.is-revealed) .flashcard__source, .flashcard:not(.is-revealed) .flashcard__origin, .flashcard:not(.is-revealed) .flashcard__objective, .flashcard:not(.is-revealed) .flashcard__tools { display: none; }
.flashcard.is-revealed .flashcard__source, .flashcard.is-revealed .flashcard__origin, .flashcard.is-revealed .flashcard__objective, .flashcard.is-revealed .flashcard__tools { animation: fade-up 240ms cubic-bezier(.2,.8,.2,1); }
.flashcard__spacer { flex: 1; }
/* Zusatz: ein kleiner Nachsatz mit eigenem Titel – Merkhilfe, Klinik, Achtung, Quelle … */
.flashcard__hint, .flashcard__note { padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-2); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.flashcard__note-label { display: block; margin-bottom: 2px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.flashcard__img { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
/* Woher die Karte stammt (Verknüpfungen belongs_to, derived_from, tests) und was man mit ihr tun kann. */
/* Herkunft: am Handy zugeklappt, ab Laptop offen (Medix.folds() setzt open), jederzeit schließbar. */
.flashcard__origin { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.flashcard__origin > summary, .flashcard__more > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-3); cursor: pointer; list-style: none; }
.flashcard__origin > summary::-webkit-details-marker, .flashcard__more > summary::-webkit-details-marker { display: none; }
.flashcard__origin > summary .icon, .flashcard__more > summary .icon { width: 16px; height: 16px; flex: none; }
.flashcard__origin > summary .icon:last-child, .flashcard__more > summary .icon:last-child { margin-left: auto; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.flashcard__origin[open] > summary .icon:last-child, .flashcard__more[open] > summary .icon:last-child { transform: rotate(180deg); }
.flashcard__origin > summary small, .flashcard__more > summary small { font-weight: 500; color: var(--ink-3); }
/* Mehr dazu (Zone more): weiterführender Inhalt, zugeklappt unter der Antwort. */
.flashcard__more > .text { padding-top: var(--space-2); }
.flashcard__origin .flashcard__source { padding-top: var(--space-2); border-top: 0; }
.flashcard__source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.flashcard__source .chip { height: 24px; font-size: 11px; padding: 0 8px; }
.flashcard__source .chip .icon { width: 14px; height: 14px; }
.flashcard__objective { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.flashcard__objective .icon { width: 16px; height: 16px; color: var(--gold-ink); flex: none; }
.flashcard__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin: 0 calc(-1 * var(--space-2)); }
.flashcard__tools .btn { color: var(--ink-2); font-size: 13px; font-weight: 600; height: 40px; padding: 0 var(--space-2); gap: 6px; }
.flashcard__tools .btn .icon { width: 20px; height: 20px; }
.flashcard__tools .btn:hover { color: var(--ink); background: var(--bg-2); }
.flashcard__tools .btn.is-active { color: var(--gold-ink); background: var(--gold-soft); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- Lernmodus neu (Vorarbeit 1b): Karte, Sitzungszeile, Bewertung, Fragen-Panel, Fernbedienung ----------
   Ablauf wie in LEARN: Frage oben, Antwort verdeckt – ein Tipp auf die Karte oder die Leertaste deckt auf. Lückentext: ein Tipp auf
   eine Lücke öffnet genau diese (samt Gruppe), Leertaste die nächste in Lesereihenfolge; bewertet wird erst, wenn alle offen sind.
   Oben klein die Sitzung („12 von 26“), rechts Zurück (nimmt die letzte Bewertung zurück) und Beenden. Medix.study() verdrahtet
   Tipp, Tasten (␣ 1–4 Z F) und die Fragen-Ebene. Gold gibt es im Lernmodus nur auf „Lernen“ – nie auf den Bewertungen. */
.study { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.study__top { grid-template-columns: minmax(0, 1fr) auto; }
.study__count { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.study__count .progress { width: 72px; flex: none; }
.study__count .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.study__actions { display: flex; align-items: center; gap: 0; margin-right: -6px; }
.study__actions .btn { height: 36px; padding: 0 var(--space-2); font-size: 13px; color: var(--ink-2); gap: 4px; }
.study__actions .btn .icon { width: 18px; height: 18px; }
.study__actions .btn:hover { color: var(--ink); background: var(--bg-2); }
.study__actions .btn[disabled] { opacity: var(--disabled); }
/* Die Karte ist die Tippfläche: Cursor zeigt es, ein leiser Hinweis unten sagt es – weg, sobald sie offen ist oder Lücken hat. */
.flashcard.is-tap { cursor: pointer; }
.flashcard__tap { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.flashcard__tap .icon { width: 16px; height: 16px; }
.flashcard.is-revealed .flashcard__tap, .flashcard.has-gaps .flashcard__tap { display: none; }
.flashcard__foot { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.flashcard:not(.is-revealed) .flashcard__foot { display: none; }
.flashcard.is-revealed .flashcard__foot { animation: fade-up 240ms cubic-bezier(.2,.8,.2,1); }
/* Bewertung: vier Flächen, Taste klein darunter (nur mit Maus/Trackpad); wartet sie auf Lücken, sind die Knöpfe gedämpft und die
   Zeile darüber sagt „noch 2 Lücken“ (Medix.gaps hält [data-gaps-left] nach). */
.rating__note { grid-column: 1 / -1; display: none; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.rating.is-waiting .rating__note { display: block; }
.rating__btn .kbd-hint { display: none; }
/* Die Taste unter dem Wort ist ganz dezent: ohne Rahmen, 10px, halb durchsichtig – ein Fingerzeig, kein Knopf im Knopf. */
.rating__btn .kbd { min-width: 0; height: 12px; font-size: 10px; line-height: 12px; padding: 0; background: transparent; border: 0; color: inherit; opacity: 0.5; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .rating__btn { min-height: 56px; gap: 1px; } .rating__btn .kbd-hint { display: inline-flex; margin-top: 0; } }
@media (max-width: 559px) { .study .kbd-hint { display: none !important; } }
/* Abschluss der Sitzung: eine Karte statt der Karteikarte – Zahlen, Stand, dann „Lernen“ (gold, die einzige Goldfläche) und Zurück. */
.study-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-5); text-align: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); animation: card-in 320ms cubic-bezier(.2,.8,.2,1) both; }
.study-done__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 26px; line-height: 32px; font-weight: 500; }
.study-done__sum { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.study-done__sum .state { height: 28px; font-size: 13px; padding: 0 10px; }
.study-done__text { font-size: 15px; line-height: 22px; color: var(--ink-2); max-width: 36ch; }
.study-done__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 360px; padding-top: var(--space-2); }
/* „Fragen“: das Erklären-Panel aus der Karte heraus (aside.explain) – oben die Fakten zur Karte, unten das Feld für die Frage.
   Unter 744px ein Sheet von unten (mit Scrim), ab 744px die Seitenspalte rechts neben der Karte (study-grid.has-explain). */
.study-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.explain { display: none; flex-direction: column; gap: var(--space-4); }
.explain__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.explain__title { font-size: 15px; line-height: 20px; font-weight: 600; }
.explain__facts .row { min-height: 48px; padding: var(--space-2) var(--space-3); }
.explain__facts .row__lead .icon { width: 18px; height: 18px; }
/* Runde 11.10. (Punkt 18): das Angebot nach zweimal „Nochmal“ ist die erste Zeile der Fakten, auf `royal-soft` (kein Gold: es ist ein Angebot, keine Aufgabe); darunter die Schnellfragen. */
.explain__facts .row--offer { background: var(--royal-soft); }
.explain__facts .row--offer .row__sub { white-space: normal; }
.explain__facts + .explain__quick { padding: 0 var(--space-3); }
.explain__facts .results { display: flex; gap: 4px; }
.explain__facts .results .state { height: 20px; font-size: 10px; padding: 0 6px; }
.explain__hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.explain__input { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--bg-1); border: 1px solid var(--line); }
.explain__input .field__input { flex: 1; min-height: 40px; max-height: 120px; resize: none; background: transparent; border: 0; padding: 9px var(--space-2); }
.explain__input .field__input:focus, .explain__input .field__input:focus-visible { box-shadow: none; outline: none; }
.explain__input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.explain-scrim { z-index: 45; }
@media (max-width: 743px) {
  .explain { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 84vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: var(--bg-3); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-2); transform: translateY(100%); transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
  .explain.is-open { display: flex; transform: translateY(0); }
  .explain--absolute { position: absolute; }
  .explain__grip { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); margin: 0 auto var(--space-2); }
}
@media (min-width: 744px) {
  .study-grid.has-explain { grid-template-columns: minmax(0, 1fr) 320px; }
  .study-grid.has-explain .study { max-width: none; }
  .explain.is-open { display: flex; position: sticky; top: var(--space-6); }
  .explain__grip, .explain-scrim { display: none; }
}
@media (min-width: 1180px) { .study-grid.has-explain { grid-template-columns: minmax(0, 1fr) var(--aside); gap: var(--space-10); } }
/* Fernbedienung (iPhone, während die Sitzung am Laptop läuft): große Knöpfe in Daumenreichweite – Aufdecken bzw. Nächste Lücke,
   die vier Bewertungen, Zurück. Am Laptop steht klein „Fernbedienung verbunden“ in der Sitzungszeile. */
/* Auf Heute, solange am Laptop gelernt wird: die Zeile „Lernsitzung am Laptop“ führt zur Fernbedienung (cards-row). */
.remote-row .cards-row__title .chip { margin-left: var(--space-2); height: 20px; font-size: 11px; padding: 0 7px; vertical-align: middle; }
.remote { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; margin: 0 auto; width: 100%; }
.remote__status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.remote__card { padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.remote__card .flashcard__question { font-size: 15px; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.remote__reveal { height: 72px; font-size: 17px; }
.remote .rating { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.remote .rating__btn { min-height: 88px; font-size: 17px; }
.remote .rating__btn small { font-size: 12px; }
.remote .rating__note { font-size: 14px; }
.remote__foot { display: flex; justify-content: center; }
/* Maus-Steuerung (Mehr → Einstellungen): Schalter, Kalibrieren, Zurücksetzen, die Belegung als Liste; der Assistent als Sheet. */
.mouse-map .row__value { font-variant-numeric: tabular-nums; }
.mouse-map .row__value .kbd { margin-left: 4px; }
.calib { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-2) 0; }
.calib__step { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.calib__ask { font-size: 17px; line-height: 24px; max-width: 30ch; }
.calib__ask b { font-weight: 700; }
.calib__ear { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); }
.calib__ear::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--line-strong); animation: ear 1.6s ease-out infinite; }
@keyframes ear { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.calib__ear .icon { width: 28px; height: 28px; }
.calib__got { min-height: 22px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.calib__got b { color: var(--ink); }
.calib__warn { color: var(--warn); }
.calib__actions { display: flex; gap: var(--space-2); justify-content: center; width: 100%; }
.calib__done { width: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { .calib__ear::before { animation: none; } }
/* Nach der Bewertung: die Karte fliegt nach links weg (is-leaving), die nächste rückt von rechts nach (is-entering). */
.flashcard.is-leaving { animation: card-out 320ms cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }
.flashcard.is-entering { animation: card-in 320ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-out { to { opacity: 0; transform: translateX(-40px) rotate(-2deg); } }
@keyframes card-in { from { opacity: 0; transform: translateX(40px); } }
.cloze { display: inline; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--gold-ink); border-bottom: 1.5px solid var(--gold-line); font-weight: 600; }
.cloze--hidden { color: transparent; background: var(--bg-2); border-bottom-color: var(--line-strong); min-width: 3em; letter-spacing: 0.1em; }
.cloze--hidden::before { content: "···"; color: var(--ink-3); }
.rating { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
/* Solange eine Lücke oder ein Badge noch verdeckt ist, wartet die Bewertung (Medix.gaps nimmt is-waiting, sobald alles offen ist). */
.rating.is-waiting .rating__btn { opacity: 0.4; pointer-events: none; }
.rating__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--control-lg); height: auto; padding: 6px 4px; border-radius: var(--radius-md);
  font-size: 15px; line-height: 20px; font-weight: 600;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.rating__btn:active { transform: scale(0.97); }
.rating__btn small { font-size: 11px; line-height: 14px; font-weight: 500; opacity: 0.85; }
.rating__btn--again { background: var(--danger-soft); color: var(--danger); }
.rating__btn--hard { background: var(--warn-soft); color: var(--warn); }
.rating__btn--good { background: var(--success-soft); color: var(--success); }
.rating__btn--easy { background: var(--royal-soft); color: var(--royal); }
.rating__btn:hover { box-shadow: inset 0 0 0 1px currentColor; }
/* ---------- Lernmodus schmal mit Erklären (Runde 14, Nachtrag 09.10., Brücke) ----------
   Gemeldet in der Mac-App bei 744 px: Neben der Seitenspalte von 320 px blieb der Karte ein Streifen von 244 px, „0 von 61“ lag unter
   „Zurück“, „Passt nicht“ stand neben der Karte, die Bewertungen brachen um. Von 744 bis 1179 px liegt das offene Panel deshalb als
   Spalte rechts über der Seite (wie auf der Einheiten-Seite, 320 px wie die Spalte der Karteikarte), die Karte behält ihre Breite;
   erst ab 1180 px steht es daneben. Es beginnt auf der Höhe der Karte (Rand oben, Sitzungszeile 36 px, Abstand), damit Zurück und
   Beenden frei bleiben. Dazu: Die Sitzungszeile bricht um, statt zu überlappen (am iPhone kürzt der Chip „Fernbedienung verbunden“
   mit „…“, das Wort steht dafür in einem span); die Werkzeuge der Karte brechen in der Karte um;
   keine Bewertung wird breiter als ihre Spalte; der Tasten-Hinweis bricht zwischen den Tasten um. Punkt für den Design-Chat
   (Komponente Karteikarte). */
.study__count { flex-wrap: wrap; row-gap: var(--space-1); }
.study__count > * { flex: none; }
.study__count .chip { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.study__count .chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flashcard__tools { flex-wrap: wrap; }
.rating { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.study > .kbd-hint { flex-wrap: wrap; row-gap: var(--space-1); }
/* Media Queries nur mit min-width (Umbruchpunkte des Systems): ab 744 die Ebene, ab 1180 wieder die Spalte wie oben. */
@media (min-width: 744px) {
  .study-grid.has-explain { grid-template-columns: minmax(0, 1fr); }
  .study-grid.has-explain .study { max-width: var(--content-max); }
  .study-grid .explain.is-open {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--space-6) + 36px + var(--space-4)); right: calc(var(--shell-right, 0px) + var(--space-4)); bottom: var(--space-4); z-index: 50;
    width: min(320px, calc(100vw - 2 * var(--space-4))); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-4); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
  }
}
@media (min-width: 744px) and (max-height: 499px) { .study-grid .explain.is-open { top: calc(env(safe-area-inset-top, 0px) + var(--space-3) + 36px + var(--space-4)); bottom: var(--space-3); } }
@media (min-width: 1180px) {
  .study-grid.has-explain { grid-template-columns: minmax(0, 1fr) var(--aside); }
  .study-grid.has-explain .study { max-width: none; }
  .study-grid .explain.is-open { position: sticky; top: var(--space-6); right: auto; bottom: auto; z-index: auto; width: auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
}

/* ---------- Wissen: Gliederung (Fachgebiet → Lehrveranstaltung → Thema) und Lernstand ---------- */
.subject { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-6) var(--space-1) var(--space-2); }
.subject:first-child, .subject-group .subject { padding-top: 0; }
.subject__name { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 22px; line-height: 28px; font-weight: 500; }
.subject__meta { font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; }
.subject-group { display: flex; flex-direction: column; gap: var(--space-2); }
/* Fach-Gruppen untereinander (Handy, eine Spalte): deutlicher Abstand von der Liste zur nächsten Fach-Überschrift; ab 744px ordnet .courses sie als Raster. */
.courses { display: flex; flex-direction: column; gap: var(--space-6); }
.course { grid-template-columns: 1fr auto; }
.course__name { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.course__meta { display: block; font-size: 13px; line-height: 18px; color: var(--ink-2); padding-top: 2px; }
.course__meta .chip { vertical-align: middle; }
.course__bar { margin-top: var(--space-2); }
.course.is-active { background: var(--gold-soft); }
.course__trail { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); }
/* Lernstand: berechnet, nie gespeichert; drei Bänder, immer mit Prozentzahl. */
.state { display: inline-flex; align-items: center; gap: 6px; height: 24px; white-space: nowrap; padding: 0 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bg-2); color: var(--ink-2); }
.state--low { background: var(--danger-soft); color: var(--danger); }
.state--mid { background: var(--warn-soft); color: var(--warn); }
.state--high { background: var(--success-soft); color: var(--success); }
.state--none { background: var(--bg-2); color: var(--ink-3); }
.objective { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.objective + .objective { border-top: 1px solid var(--line); }
.objective__text { font-size: 15px; line-height: 22px; }
.objective__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); padding-top: 2px; }
.objective__state { display: flex; align-items: center; gap: var(--space-2); }
.objective__state .progress { width: 64px; }
.exam { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.exam__days { font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.exam__days small { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.exam__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.exam__meta { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ---------- Seiten: Einheit, Fach, Kartenliste ----------
   Eine Seite (.view) ist ein Container: unter 744px Leistenbreite eine Spalte, ab 744px zwei Spalten (Hauptspalte und Seitenspalte 320px),
   ab 1180px breit (Seitenspalte 360px, Hauptspalte bis 760px, Abschnitte mit Luft). Kein Gerät zuerst – jede Breite hat ihr fertiges Layout.
   Genau ein Serif-Titel (h1). Gold nur auf dem einen Hauptknopf „Lernen“. Fächer haben keine eigenen Farben. */
.view { container: view / inline-size; padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--tabbar) + 28px + env(safe-area-inset-bottom, 0px)); }
.view__inner { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--content-max); margin: 0 auto; }
.view .page-head { gap: var(--space-2); padding: 0; }
.view .h1 { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-optical-sizing: auto; }
/* Genau ein Serif-Titel je Seite: die Prüfungskarte in der Seitenspalte bleibt Sans. */
.view .exam__title { font-family: var(--font-sans); font-variation-settings: normal; font-weight: 600; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.crumbs a { color: var(--royal); font-weight: 600; text-decoration: none; padding: 4px 0; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .icon { width: 14px; height: 14px; }
/* Angaben ohne Karte: direkt unter den Chips, ab 520px zweispaltig wie in der Karte. */
.facts--flat { padding: var(--space-1) 0 0; }
.facts--flat .fact { padding: var(--space-2) 0; }
.facts--flat .fact:nth-child(2) { border-top: 1px solid var(--line); }
@container (min-width: 520px) { .facts--flat .fact + .fact, .facts--flat .fact:nth-child(2) { border-top: 0; } }
.chip--link { text-decoration: none; cursor: pointer; }
.chip--link:hover { background: var(--royal-soft); color: var(--royal); text-decoration: underline; }
.view__cols { display: flex; flex-direction: column; gap: var(--space-6); }
.view__main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.view__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; order: -1; }
.section__title { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0; }
/* Lernstand: ein Balken über alles, darunter je Lernziel – berechnet, nie gespeichert. */
.learn-state { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-state__top { display: flex; align-items: center; justify-content: space-between; }
.learn-state > .progress { height: 8px; }
.state-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.state-list li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 40px; align-items: center; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.state-list__text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* bis zu zwei Zeilen, der Satz bleibt lesbar */
.learn-state__sub { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
/* Viele Lernziele: nur die schwächsten fünf stehen offen, der Rest klappt darunter auf und scrollt in sich (die Karte bleibt kurz und klebt weiter). */
.state-more { display: flex; flex-direction: column; gap: var(--space-2); }
.state-more > summary { list-style: none; width: fit-content; margin-left: calc(var(--space-2) * -1); }
.state-more > summary::-webkit-details-marker { display: none; }
.state-more > summary .icon { transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.state-more[open] > summary .icon { transform: rotate(180deg); }
.state-more[open] > summary .state-more__on, .state-more:not([open]) > summary .state-more__off { display: none; }
.state-list--rest { max-height: 280px; overflow-y: auto; padding-right: var(--space-1); border-top: 1px solid var(--line); padding-top: var(--space-3); overscroll-behavior: contain; }
.state-list b { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
/* Ein Tipp auf eine Zeile klappt nur sie auf (Runde 11.10., Punkt 9): der ganze Satz statt zwei Zeilen und darunter „Zum Lernziel“. Ohne JavaScript (details). */
.state-list li:has(> .state-row) { display: block; }
.state-row > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 64px 40px; align-items: center; gap: var(--space-3); cursor: pointer; border-radius: var(--radius-sm); }
.state-row > summary::-webkit-details-marker { display: none; }
.state-row > summary:hover .state-list__text { color: var(--ink); }
.state-row[open] .state-list__text { display: block; overflow: visible; color: var(--ink); }
.state-row__go { margin: var(--space-1) 0 0 calc(var(--space-2) * -1); }
.learn-state__hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
/* Knöpfe: Lernen ist der eine goldene Hauptknopf mit Untertitel; Test, Erklären, Material, Karte sind gleichwertige Nebenknöpfe in einer Reihe. */
.actions { display: flex; flex-direction: column; gap: var(--space-2); }
.actions .btn--primary { flex-direction: column; gap: 0; height: auto; padding: var(--space-3) var(--space-5); line-height: 22px; }
.actions .btn--primary .icon { position: absolute; left: var(--space-4); top: 50%; translate: 0 -50%; }
.actions .btn--primary { position: relative; }
.actions .btn--primary small { font-size: 12px; line-height: 16px; font-weight: 500; opacity: .8; }
.actions__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.actions__row .btn { padding: 0 var(--space-2); }
/* Lernziel-Zeile, antippbar */
.objective--link { text-decoration: none; color: var(--ink); grid-template-columns: minmax(0, 1fr) 18px; cursor: pointer; }
.objective--link .objective__state { grid-column: 1; }
.objective--link > .icon { grid-column: 2; grid-row: 1 / span 2; }
@container view (min-width: 560px) { .objective--link { grid-template-columns: minmax(0, 1fr) auto 18px; } .objective--link .objective__state { grid-column: auto; } .objective--link > .icon { grid-column: auto; grid-row: auto; } }
.objective--link:hover { background: var(--bg-2); }
.objective--link > .icon { color: var(--ink-3); }
/* Material auf Einheit und Fach: keine Knöpfe in der Zeile. Rechts nur der Chevron; die Zahl der Karten steht in der Zweitzeile („12 Karten“), solange der Agent
   sie noch nicht erstellt hat „Karten folgen“. Zeilen sind Links, beim Überfahren wird nichts unterstrichen. */
.view .section { container-type: inline-size; }
.row--link:hover { text-decoration: none; }
.material__cards { color: var(--ink-2); font-weight: 600; }
.material__cards--soon { color: var(--ink-3); font-weight: 400; }
/* Einheit: Material anderer Einheiten und des Fachs ist zugeklappt („Weiteres Material zum Fach · N“), die Zeilen gedämpft mit „Zur Einheit“ (verknüpft). */
.material-more { display: flex; flex-direction: column; gap: var(--space-2); }
.material-more > summary { list-style: none; width: fit-content; }
.material-more > summary::-webkit-details-marker { display: none; }
.material-more > summary .icon { transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.material-more[open] > summary .icon { transform: rotate(180deg); }
.material-more[open] > summary .material-more__on, .material-more:not([open]) > summary .material-more__off { display: none; }
.material-more[open] > summary { order: 1; }
.material--other .row__title { color: var(--ink-2); font-weight: 400; }
.material--other .material__thumb { opacity: .7; }
/* Runde 11.10. (Punkt 15): Die Unterzeile einer Materialzeile darf umbrechen (Typ, Herkunft, Seiten, Karten); sonst schnitt sie die Zahl der Karten ab („Karten folg…“), am iPhone und auf der Fach-Seite auch bei breiten Fenstern. Die Zahl selbst bricht nie. */
.row.material .row__sub, .material--other .row__sub { white-space: normal; }
.material__cards { white-space: nowrap; }
.row--wrap .row__sub { white-space: normal; }                /* Runde 11.10. (Punkt 14): die Zweitzeile darf umbrechen; bei 320px schnitt sie die Lern-Gespräch-Zeile ab */
.material__attach { flex: none; white-space: nowrap; }
.material--other { position: relative; }
.material__open { display: block; min-width: 0; color: inherit; text-decoration: none; }
.material__open:hover { text-decoration: none; }                                  /* README: beim Überfahren wird nichts unterstrichen; das globale a:hover hätte sonst Vorrang (Runde 11.10., Punkt 5) */
.material__open::after { content: ""; position: absolute; inset: 0; }                 /* die ganze Zeile öffnet das Material; der Knopf liegt darüber */
.material--other .row__trail { position: relative; z-index: 1; margin: 0; }          /* Formular mit Knopf: kein Knopf im Link (Runde 11.10., Punkt 2) */
/* Karten-Zeile: eine Karte, die zur Kartenliste führt. */
.cards-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.cards-row:hover { background: var(--bg-2); }
.cards-row__lead { color: var(--ink-2); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-2); }
.cards-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cards-row__title { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 22px; font-weight: 600; }
.cards-row__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cards-row > .icon { color: var(--ink-3); }
/* Einheit und Fach, Hauptteil: .view__split mit zwei .view__col – unter 1180px lösen sie sich auf (display: contents), die vier Abschnitte stehen untereinander
   (Material, Karten, Lernziele, Verlauf); ab 1180px links Material und Verlauf, rechts Karten und Lernziele, jede Spalte für sich (keine Lücken). */
.view__split, .view__col { display: contents; }
/* Reihenfolge in einer Spalte: Material, Karten, Lernziele, Verlauf (links stehen Material und Verlauf, rechts Karten und Lernziele). */
.view__col:first-child > :nth-child(1) { order: 1; }
.view__col:last-child > :nth-child(1) { order: 2; }
.view__col:last-child > :nth-child(2) { order: 3; }
.view__col:first-child > :nth-child(2) { order: 4; }
.view__col:first-child > :nth-child(3) { order: 5; }                      /* „Am selben Tag“: zuletzt, unter dem Verlauf (Runde 11.10., Punkt 5) */
/* Fachgebiet (Runde 11.10., Punkt 10): links Prüfungen und Material, rechts Karten; untereinander Prüfungen · Material · Karten. */
.view__split--field > .view__col:first-child > :nth-child(1) { order: 1; }
.view__split--field > .view__col:first-child > :nth-child(2) { order: 2; }
.view__split--field > .view__col:last-child > :nth-child(1) { order: 3; }
/* Karten: Summe mit Balken (gelernt · fällig · neu), darunter drei Zeilen – Fällig, Neu, Gelernt; jede öffnet die Kartenliste mit diesem Filter. */
.cards-block__sum { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.cards-block__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.cards-block__total b { font-weight: 600; }
.cards-block__total span { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cards-block .meter__done { fill: var(--success); }
.cards-block .meter__building { fill: var(--gold); }
.cards-block__count { display: grid; place-items: center; width: 48px; height: 40px; border-radius: var(--radius-md); background: var(--bg-2); color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cards-block__count--due { background: var(--gold-soft); color: var(--gold-ink); }
/* Lernziele in der Liste: höchstens zwei Zeilen, der ganze Satz steht auf der Lernziel-Seite. */
.objectives-fold .objective__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Verlauf: „Uni aus“ als erste Zeile mit „Doch nicht“ und „Pause“. */
.uni-off { background: var(--bg-2); grid-template-columns: auto minmax(0, 1fr); }
.uni-off .row__trail { grid-column: 2; justify-content: flex-start; margin-left: calc(-1 * var(--space-2)); }
.uni-off .row__sub { white-space: normal; }
.uni-off .row__lead { color: var(--ink-2); }
.uni-off .row__trail .btn { color: var(--gold-ink); }
/* Wichtig: ein Merkzettel zur Einheit oder zum Fach – kurze Hinweise aus dem Chat oder von Jakob („Der Professor redet viel über …“), keine Lernziele. */
.notes { display: flex; flex-direction: column; gap: var(--space-3); }
.notes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.notes__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--space-3); font-size: 14px; line-height: 20px; }
.notes__mark { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--warn); }
.notes__list small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); }
/* Kartenliste: Frage und Antwort untereinander, das Thema fett in der Meta-Zeile; Formeln in der Liste sind gesetzt (KaTeX), wie überall; Lücken aufgedeckt. */
.cardrow__a { font-size: 13px; line-height: 18px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* In der Liste ist alles aufgedeckt: Lücken stehen als normaler Text, ohne Pille, Hinweis und Gruppenzahl. */
.cardrow__q .tx-gap, .cardrow__q .tx-gap:has(> .tx-gap__text > .tx-formula) { display: inline; color: inherit; background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
.cardrow__q .tx-gap::before, .cardrow__q .tx-gap > .tx-gap__hint, .cardrow__q .tx-gap__group { content: none; display: none; }
.cardrow__q .tx-gap:not(.is-open) > .tx-gap__text { color: inherit; }
.cardlist .row__sub b { font-weight: 600; color: var(--ink-2); }
/* Fach: alle Einheiten aufklappen – an Ort und Stelle, ohne Seitenwechsel. */
.units__more { display: flex; flex-direction: column; }
.units__more > summary { list-style: none; width: fit-content; }
.units__more[open] > summary { order: 1; margin-top: var(--space-2); }
.units__more > summary::-webkit-details-marker { display: none; }
.units__more > summary .icon { transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.units__more[open] > summary .icon { transform: rotate(180deg); }
.units__more[open] > summary .units__more-on, .units__more:not([open]) > summary .units__more-off { display: none; }
.units__rest { display: flex; flex-direction: column; gap: var(--space-2); }
/* Fach: Einheiten in Gruppen (vergangen, heute, kommend). */
.units { display: flex; flex-direction: column; gap: var(--space-2); }
.units__group { padding: var(--space-2) 0 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.slot--link { text-decoration: none; color: var(--ink); }
.slot--link:hover { filter: brightness(1.04); }
.slot--past { opacity: .75; }
/* Kartenliste: Suche und Filter-Chips oben, Liste darunter; die Menüs Typ und Lernschritt sind pop (am Handy Sheet). */
.cardlist__tools { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-md); background: var(--bg-1); border: 1px solid var(--line); color: var(--ink-3); }
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.search__input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; font: inherit; font-size: 16px; color: var(--ink); }
.search__input::placeholder { color: var(--ink-3); }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.filters .chip--filter { cursor: pointer; height: 32px; }
.filters .chip--filter b { margin-left: 2px; font-weight: 600; color: var(--ink-3); }
.filters .chip--filter.is-active { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.filters .chip--filter.is-active b { color: var(--gold-ink); }
.chip-pop > summary { list-style: none; }
.chip-pop > summary::-webkit-details-marker { display: none; }
.chip-pop[open] > summary { background: var(--gold-soft); color: var(--gold-ink); }
.view:has(.chip-pop[open]) .filters { position: relative; z-index: 2; }
.cardrow { grid-template-columns: minmax(0, 1fr) auto; text-decoration: none; }
.cardrow__q { font-size: 15px; line-height: 22px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cardlist .row__sub { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cardlist .row__sub .chip { height: 22px; font-size: 11px; padding: 0 7px; }
/* Kartenliste: Formel statt Legende (Nachtrag 09.10. zu Runde 20, Meldung ecde2606; Brücke, Punkt für den Design-Chat). Ein Formel-Block steht in der Zeile so breit, wie er ist: Die Brücke „Block-Formeln im Fluss“ (public/app.js) macht ihn inline-block, und mit contain: inline-size hatte er dann die Breite null (leerer Platz in der Antwort). Breiter als die Spalte, scrollt er in sich. Die Legende direkt unter einem Formel-Block steht in der Liste nicht (Jakob: „nur Formel anzeigen“); eine Legende ohne Formel bleibt, Karte, Lernmodus und Editor bleiben unverändert. */
.cardrow .tx-formula--block { contain: none; max-width: 100%; vertical-align: top; }
.cardrow .tx-formula--block + .tx-table-wrap:has(> .tx-table--legend) { display: none; }
/* Eine Formel als Lücke steht in der Liste aufgedeckt wie jede Lücke dort: ohne Pille, Rahmen und Innenabstand (sonst schnitt der Rand oben den Bruch an). */
.cardrow .tx-formula--block.tx-gap-block { background: none; box-shadow: none; padding: 0; border-radius: 0; color: inherit; }
/* Zwei Spalten ab 744px Seitenbreite: Hauptspalte links, Seitenspalte rechts (Lernstand, Knöpfe, Prüfung) – klebt beim Scrollen. */
@container view (min-width: 744px) {
  .view__inner { max-width: var(--content-wide); }
  .view__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
  .view__side { order: 0; position: sticky; top: var(--space-4); }
  .view .facts--flat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .view .facts--flat .fact { width: auto; }
}
/* Breit ab 1180px: Seitenspalte 360px, mehr Luft, Abschnitte im Hauptteil nebeneinander, wo es zwei gibt. */
@container view (min-width: 1180px) {
  .view__inner { max-width: var(--content-laptop); gap: var(--space-8); }
  .view__cols { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); }
  .view .facts--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .view__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
  .view__col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
  .view__col:first-child > :nth-child(1), .view__col:last-child > :nth-child(1), .view__col:last-child > :nth-child(2), .view__col:first-child > :nth-child(2), .view__col:first-child > :nth-child(3) { order: 0; }
  .view__split--field > .view__col:first-child > :nth-child(1), .view__split--field > .view__col:first-child > :nth-child(2), .view__split--field > .view__col:last-child > :nth-child(1) { order: 0; }
  .view--fach .units, .view--fach .units__rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
  .view--fach .units__group, .view--fach .units > .units__more { grid-column: 1 / -1; }
}

/* ---------- Einheit: Nachtrag Nachbessern 09.10. (Runde 20e, Brücke, Punkt für den Design-Chat) ----------
   Chips: „Ende gemeldet 15:00“ und der Satz zu „Geändert“ (chip-row__note) stehen mittig zu den Chips in derselben Zeile
   (Jakob, 58f1ac8c: „Bitte in einer Zeile“); umbrechen tun sie nur als Ganzes (ein Flex-Element), nur ein Satz, der allein
   länger als die Zeile ist, bricht in sich. Material: „Weiteres aus …“ ist eine Klappe (units__more, wie „Alle 19
   Materialien“ der Fach-Seite); offen steht der Titel über der Liste und „Weniger“ darunter, mit Luft dazwischen. */
.view--unit .chip-row { align-items: center; }
.units__more--others > .list__title { padding-top: var(--space-2); }

/* ---------- Wissen: Karten-Editor ---------- */
.editor { display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
/* Werkzeugleiste (editor__toolbar, note__bar): dieselbe in Karten-Editor und Notiz, sieben Gruppen in fester Reihenfolge –
   Stil · Schrift · Farbe · Liste · Absatz · Lernen (nur Karte) · Einfügen –, rechts außen immer Rückgängig und Wiederholen.
   Motto: je schmaler, desto weniger steht da, aber alles bleibt erreichbar; je breiter, desto mehr steht offen. Die Stufe
   entscheidet die Breite der Leiste selbst (Container-Query), nicht das Gerät: unter 560px Handy, ab 560px iPad, ab 880px Mac.
   Handy: je Gruppe ein Knopf; Farbe, Liste, Lernen und Einfügen öffnen ihr Menü als Sheet von unten (Medix.pops schiebt das Panel hinein).
   iPad: die Hauptknöpfe jeder Gruppe stehen offen, Untermenüs als Popover unter dem Knopf.
   Mac: dazu Durchgestrichen, Hoch und Tief in der Leiste.
   Ein Element trägt from-pad / from-mac (erst ab dieser Stufe sichtbar) oder until-pad / until-mac (nur davor). */
.editor__toolbar, .note__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; row-gap: var(--space-1); padding: var(--space-2); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.editor, .note { container: toolbar / inline-size; }
.editor__toolbar .tool-group, .note__bar .tool-group, .editor__sub .tool-group { display: flex; align-items: center; gap: 2px; flex: none; }
.editor__toolbar .field__select, .note__bar .field__select { flex: none; width: 76px; }
.editor__toolbar .field__select .field__input, .note__bar .field__select .field__input { height: var(--control-sm); padding: 0 22px 0 var(--space-2); font-size: 13px; }
.editor__toolbar .field__select .icon, .note__bar .field__select .icon { right: 6px; }
.editor__toolbar .btn--icon, .note__bar .btn--icon, .editor__sub .btn--icon, .ctx .btn--icon { color: var(--ink-2); }
.editor__toolbar .btn--icon.is-active, .note__bar .btn--icon.is-active, .editor__sub .btn--icon.is-active, .ctx .btn--icon.is-active { background: var(--gold-soft); color: var(--gold-ink); }
.editor__toolbar .sep, .note__bar .sep, .editor__sub .sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--space-1); flex: none; }
.tool-group--end { margin-left: auto; }
.tool-group--end + .audio { margin-left: var(--space-2); }
/* Stufen */
.from-pad, .from-mac { display: none !important; }
/* Handy: kein Abstand zwischen den Knöpfen, kein Chevron an den Menüs – so passen alle sieben Gruppen samt Rückgängig in 340px. */
.editor__toolbar, .note__bar { gap: 0; padding-left: 4px; padding-right: 4px; }
.editor__toolbar .pop > summary > span:last-child, .note__bar .pop > summary > span:last-child { display: none; }
.editor__toolbar .pop > summary, .note__bar .pop > summary { padding: 0; }
@container toolbar (min-width: 560px) {
  .from-pad { display: revert !important; }
  .editor__toolbar, .note__bar { gap: 2px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .editor__toolbar .pop > summary > span:last-child, .note__bar .pop > summary > span:last-child { display: revert; }
  .editor__toolbar .pop > summary, .note__bar .pop > summary { padding: 0 4px; }
  .until-pad { display: none !important; }
  .editor__toolbar .field__select, .note__bar .field__select { width: 128px; }
  .editor__toolbar .tool-group.from-pad, .note__bar .tool-group.from-pad { display: flex !important; }
  .editor__toolbar .field__select.from-pad, .note__bar .field__select.from-pad { display: block !important; }
  .editor__toolbar .sep.from-pad, .note__bar .sep.from-pad { display: block !important; }
}
@container toolbar (min-width: 880px) {
  .from-mac { display: revert !important; }
  .until-mac { display: none !important; }
}
/* Die Notiz-Leiste hat mit Zeichnen, Platz und Folie zwei Gruppen mehr: ihre Mac-Stufe beginnt erst bei 1240px, damit sie am iPad quer
   (1180px) eine Zeile bleibt – Durchgestrichen, Hoch- und Tiefgestellt stehen bis dahin im Menü „Schrift“. */
@container toolbar (min-width: 880px) and (max-width: 1239px) {
  .note__bar .from-mac { display: none !important; }
  .note__bar .until-mac { display: revert !important; }
}
/* Lücken gibt es nur in der Frage: Steht der Cursor in der Antwort (editor__area--answer), sind die Gruppe Lernen und die Lücke im Kontextmenü gedämpft. */
.editor:has(.editor__area--answer:focus) [data-group="learn"], .editor:has(.editor__area--answer:focus) .ctx .btn[aria-label="Lücke"] { opacity: 0.35; pointer-events: none; }
/* Tabellen-Menü: eine zweite Leiste darunter, sobald der Cursor in einer Tabelle steht (Medix.tables setzt has-table am Editor). */
.editor__sub { display: none; flex-wrap: wrap; align-items: center; gap: 2px; padding: var(--space-1) var(--space-2); background: var(--bg-1); border-bottom: 1px solid var(--line); animation: fade-up 200ms cubic-bezier(.2,.8,.2,1); }
.editor.has-table > .editor__sub, .note.has-table > .editor__sub { display: flex; }
.editor__sub-title { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-2) 0 var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
/* Kontextmenü: eine kleine Blase über der Auswahl (Medix.ctx setzt --x/--y und is-shown): Fett · Kursiv · Markieren (gold, ein Tipp) · Lücke (nur Karte) · Mehr. */
.ctx { position: absolute; z-index: 35; left: var(--x, 0px); top: var(--y, 0px); translate: -50% calc(-100% - 10px); display: none; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-md); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: fade-up 160ms cubic-bezier(.2,.8,.2,1); }
.ctx.is-shown { display: flex; }
.ctx::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--bg-3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ctx .ctx__mark { color: var(--gold-ink); }
/* Mit Touch gibt es keine Blase (iOS legt sein Menü über die Auswahl) und keine zweite Leiste: Beim Schreiben am iPhone dockt die
   Editor-Leiste selbst über der Tastatur an (editor.is-docked, --kb aus visualViewport – Medix.dock) und ist die eine Leiste von
   Medix. Ist etwas markiert (editor.has-selection), zeigt sie nur das Kontextmenü (tool-group--ctx: Fett · Kursiv · Markieren · Lücke ·
   Mehr); steht der Cursor in einer Tabelle (has-table), bekommt sie den Knopf „Tabelle“ (tool-group--table, Menü als Sheet) statt der
   zweiten Leiste editor__sub. Ohne Tastatur steht die Leiste an ihrem Platz im Editor; mit Maus bleibt alles wie gehabt. */
.tool-group--ctx, .tool-group--table, .tool-group--image { display: none !important; }
/* Bild gewählt (has-image): die Gruppe „Verdecken · Bild löschen“ erscheint in der Leiste; angedockt am iPhone zeigt die Leiste nur sie (und Rückgängig). */
.editor.has-image > .editor__toolbar .tool-group--image { display: flex !important; }
.editor.is-docked.has-image > .editor__toolbar > :not(.tool-group--image):not(.tool-group--end) { display: none !important; }
.editor.is-docked.has-image > .editor__toolbar .tool-group--image { flex: 1; justify-content: center; gap: var(--space-2); }
.tool--cover-delete { display: none !important; }
.editor.has-cover > .editor__toolbar .tool--cover-delete { display: inline-flex !important; }
.editor.is-docked > .editor__toolbar {
  position: fixed; left: 0; right: 0; top: auto; bottom: max(var(--kb, 0px), env(safe-area-inset-bottom, 0px)); z-index: 40;
  /* wie die Leiste von iOS darunter: Glas nach dem Rezept der schwebenden Ebenen, oben abgerundet */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; border: 1px solid var(--glass-stroke); border-bottom: 0;
  background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--shadow-glass);
  /* immer gleich hoch: 36px-Knöpfe plus 4px Rand = 44px, auch mit Kontextmenü */
  flex-wrap: nowrap; min-height: 44px; padding: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .editor.is-docked > .editor__toolbar { background: var(--bg-3); } }
.editor.is-docked > .editor__sub, .editor.is-docked .ctx { display: none !important; }
.editor.is-docked.has-table > .editor__toolbar .tool-group--table { display: flex !important; }
.editor.is-docked.has-selection > .editor__toolbar > :not(.tool-group--ctx) { display: none !important; }
.editor.is-docked.has-selection > .editor__toolbar .tool-group--ctx { display: flex !important; flex: 1; justify-content: center; gap: var(--space-2); }
/* Kontextmenü in der Leiste: dieselben 36px-Knöpfe (die Leiste bleibt gleich hoch), die Tippfläche ist über ein Pseudo-Element 44px. */
.editor.is-docked.has-selection > .editor__toolbar .tool-group--ctx .btn--icon.btn--sm, .editor.is-docked.has-selection > .editor__toolbar .tool-group--ctx .pop > summary { position: relative; width: var(--control-sm); height: var(--control-sm); min-height: 0; }
.editor.is-docked.has-selection > .editor__toolbar .tool-group--ctx .btn--icon.btn--sm::before, .editor.is-docked.has-selection > .editor__toolbar .tool-group--ctx .pop > summary::before { content: ""; position: absolute; inset: -4px; }
/* Zellauswahl im Editor (prosemirror-tables setzt selectedCell): royal-Fläche mit 2px-Innenrand, Text bleibt lesbar. */
.editor .tx-cell.selectedCell, .note .tx-cell.selectedCell { background: var(--royal-soft); box-shadow: inset 0 0 0 2px var(--royal); }
.editor .tx-cell.selectedCell::selection, .editor .tx-cell.selectedCell *::selection { background: transparent; }
.editor .column-resize-handle { position: absolute; top: 0; bottom: 0; right: -2px; width: 4px; background: var(--royal); pointer-events: none; z-index: 1; }
.editor .tx-table-wrap:has(.column-resize-handle), .editor.resize-cursor { cursor: col-resize; }
/* Gruppenzahl an einer Zelle, die ganz Lücke ist: oben rechts in der Zelle, der Inhalt bleibt links davon. */
.tx-cell.tx-gap { position: relative; }
.tx-cell.tx-gap:has(> .tx-gap__group) { padding-right: 32px; }
.tx-cell.tx-gap > .tx-gap__group { position: absolute; top: 50%; right: 8px; translate: 0 -50%; margin: 0; }
.ctx .pop > summary .pop__text { display: none; }
.editor__pane, .note__sheet { position: relative; }
/* Lesen: dieselbe Seite ohne Werkzeuge – zum Lesen und Herzeigen. Der Knopf dazu steht neben dem Titel (data-read). */
.is-reading .editor__toolbar, .is-reading .note__bar, .is-reading .editor__footer,
.is-reading .editor__links, .is-reading .editor__side { display: none; }
.is-reading .editor__pane { padding: var(--space-5) var(--space-4); gap: 0; }
.is-reading .editor__area, .is-reading .text { max-width: 68ch; margin-inline: auto; font-size: 18px; line-height: 29px; }
.is-reading .editor__pane:empty, .is-reading details.editor__pane:not(:has(.editor__area:not(:empty))) { display: none; }
[data-read] .read-off { display: none; }
[data-read][aria-pressed="true"] .read-on { display: none; }
[data-read][aria-pressed="true"] .read-off { display: inline-flex; }
[data-read] .read-on, [data-read] .read-off { align-items: center; gap: 6px; }
[data-read] .read-on { display: inline-flex; }
/* Menüs (details.pop): Das Panel steht unter seinem Knopf und legt sich über den Inhalt; Leiste und Rahmen hören dann auf zu clippen (:has).
   Ragt es rechts aus dem Fenster, schiebt Medix.pops() es über --pop-shift zurück. Am Handy (Leiste unter 560px) wandert das Panel
   in ein Sheet von unten (Medix.pops), der Name des Menüs (data-title) wird sein Titel. Alle Menüs teilen name="fmt": höchstens eines offen. */
.pop { position: relative; flex: none; }
.editor:has(.pop[open]), .note:has(.pop[open]) { overflow: visible; }
.pop > summary { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: auto; min-width: var(--control-sm); height: var(--control-sm); padding: 0 4px; border-radius: var(--radius-md); color: var(--ink-2); cursor: pointer; list-style: none; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary:hover { background: var(--bg-3); }
.pop[open] > summary { background: var(--gold-soft); color: var(--gold-ink); }
.pop--more > summary > span:last-child { display: none; }
.pop__text { font-size: 13px; font-weight: 600; padding: 0 2px; }
.pop__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; margin-left: var(--pop-shift, 0px); width: max-content; min-width: 240px; max-width: min(400px, 92vw); padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.pop__title { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-3) var(--space-2) var(--space-1); }
.pop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.pop__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pop__btn { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-2); white-space: nowrap; border-radius: var(--radius-sm); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; }
.pop__btn .icon { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.pop__btn:hover { background: var(--bg-2); }
.pop__btn.is-active { background: var(--gold-soft); color: var(--gold-ink); }
.pop__btn.is-active .icon { color: var(--gold-ink); }
.pop__tabs { display: flex; gap: 2px; padding: 2px; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--bg-2); }
.pop__tab { flex: 1; min-height: 30px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.pop__tab.is-active { background: var(--bg-3); color: var(--ink); box-shadow: var(--shadow-1); }
.pop__swatches { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-1); }
.swatch { aspect-ratio: 1; width: 100%; min-width: 26px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); cursor: pointer; }
.swatch--ink { background: currentColor; }
.swatch--none { display: grid; place-items: center; background: var(--bg-2); color: var(--ink-3); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--gold); }
/* Panel als Sheet am Handy: Raster mit vier Spalten, Knöpfe hochkant wie auf dem Home-Bildschirm. */
.sheet--pop { max-height: min(80vh, 100%); overflow-y: auto; overscroll-behavior: contain; translate: 0 var(--drag, 0px); }
.sheet--pop.is-dragging { transition: none; }
.sheet--pop .sheet__grip { display: block; padding: 6px 0; margin: -6px auto var(--space-3); box-sizing: content-box; background-clip: content-box; cursor: grab; touch-action: none; }
/* Solange ein Sheet offen ist, scrollt die Seite nicht und Safari lädt nicht neu („Ziehen zum Aktualisieren“). */
body.has-sheet { overflow: hidden; overscroll-behavior-y: none; touch-action: none; }
body.has-sheet .sheet { touch-action: pan-y; }
.sheet .pop__panel { position: static; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; box-shadow: none; background: transparent; margin: 0; }
.sheet .pop__swatches { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.sheet .swatch { min-width: 0; }
.sheet .pop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
/* Schrift-Auszeichnungen nur als Icon, ohne Namen (Unterstrichen, Durchgestrichen, Hoch, Tief, Code, Format löschen). */
.sheet .pop__grid--icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sheet .pop__grid--icons .pop__btn { position: relative; display: grid; place-items: center; min-height: 48px; padding: 0; }
.sheet .pop__grid--icons .pop__btn > span:not([data-icon]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sheet .pop__grid--icons .pop__btn .icon { width: 24px; height: 24px; }
.sheet .pop__btn { white-space: normal; flex-direction: column; justify-content: center; text-align: center; gap: 4px; min-height: 64px; padding: var(--space-2) 4px; background: var(--bg-2); font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-2); border-radius: var(--radius-md); hyphens: auto; overflow-wrap: anywhere; min-width: 0; }
.sheet .pop__btn .icon { width: 22px; height: 22px; }
.sheet .pop__btn.is-active { background: var(--gold-soft); color: var(--gold-ink); }
.sheet .pop__title { padding-top: var(--space-5); }
.sheet .pop__swatches { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-2); }
.sheet .until-mac, .sheet .until-pad { display: revert !important; }
.editor__pane { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.editor__pane + .editor__pane { border-top: 1px solid var(--line); }
.editor__side { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
/* ⌘↩ (Strg+↩) springt zwischen Frage und Antwort; der Hinweis steht am Bereichstitel „Antwort“ und erscheint nur mit Tastatur (kbd-hint). */
.editor__side .kbd-hint { margin-left: var(--space-1); vertical-align: middle; text-transform: none; letter-spacing: 0; }
/* Einklappbare Bereiche (Merkhilfe, Verknüpfungen): <details class="editor__pane editor__pane--fold"><summary class="editor__side">…</summary>…</details> – ohne JavaScript. */
details.editor__pane > summary, details.editor__links > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; list-style: none; min-height: 28px; }
details.editor__pane > summary::-webkit-details-marker, details.editor__links > summary::-webkit-details-marker { display: none; }
details.editor__pane > summary .icon, details.editor__links > summary .icon { width: 18px; height: 18px; color: var(--ink-3); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
details[open].editor__pane > summary .icon, details[open].editor__links > summary .icon { transform: rotate(180deg); }
details.editor__pane:not([open]) { padding-top: var(--space-2); padding-bottom: var(--space-2); }
details.editor__pane > summary small, details.editor__links > summary small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-3); margin-left: auto; }
.editor__area { min-height: 72px; font-size: 17px; line-height: 26px; color: var(--ink); outline: none; }
.editor__area:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
/* Frage und Antwort sehen im Editor genau gleich aus (Sans 17/26, normal) – auch der Medix-Text in der Antwort (.text setzt sonst 15/23). */
.editor__area--question, .editor__area--answer, .editor__area--answer .text { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }
.editor__area ul { margin: 0; padding-left: 20px; }
.editor__area b, .editor__area strong { font-weight: 700; }
.editor__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--bg-1); }
.editor__footer .segmented { flex: 1; max-width: 260px; }
.editor__footer .field__select { flex: 1; max-width: 280px; }
/* Fußzeile: links die Vorlage der Karte (mit Wort, damit klar ist, was die Liste ist), rechts Speichern. */
.editor__status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
/* Zusatz und Verknüpfungen: klein und standardmäßig zu – eine Zeile mit Titel, Inhalt in small, Chevron. */
details.editor__pane--fold:not([open]), details.editor__links:not([open]) { padding-top: var(--space-1); padding-bottom: var(--space-1); }
details.editor__pane--fold > summary, details.editor__links > summary { min-height: 32px; }
details.editor__links:not([open]) .editor__side { padding: 6px var(--space-1); }
/* Woher die Übung stammt und was sie prüft: Verknüpfungen (belongs_to, derived_from, tests) als Zeilen. */
.editor__links { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); }
.editor__links .editor__side { padding: 6px var(--space-1) 4px; }
.editor__link { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-1); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; color: var(--ink); text-align: left; width: 100%; }
.editor__link:hover { background: var(--bg-2); }
.editor__link .icon { color: var(--ink-3); }
.editor__link small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.editor__link .icon:last-child { color: var(--ink-3); }
.editor__link--empty { color: var(--ink-3); }

/* ---------- Wissen: Lernstatistik ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat__value { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.stat__value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-left: 2px; }
.stat__label { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.stat--wide { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
.stat--wide > :first-child { min-width: 0; }
.stat--quiet .stat__value { color: var(--ink); }

/* ---------- Zeit: Heute, Slots ---------- */
.hero { padding: var(--space-4) 0 var(--space-2); }
.hero__date { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); padding-bottom: var(--space-2); }
.hero__sub { color: var(--ink-2); padding-top: var(--space-2); font-size: 17px; line-height: 24px; }
.slots { display: flex; flex-direction: column; gap: var(--space-2); }
.slot {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.slot__time { display: flex; flex-direction: column; font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.slot__time b { color: var(--ink); font-weight: 600; }
.slot__title { font-size: 15px; line-height: 22px; font-weight: 600; }
.slot__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.slot__kind { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 4px; }
/* Schritte eines Lernblocks (plan_entries.content): fällige Karten, Lernziel, Material, Übung außerhalb – in Reihenfolge. */
.slot__steps { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: step; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.slot__steps li { display: flex; align-items: flex-start; gap: var(--space-2); }
.slot__steps li::before { counter-increment: step; content: counter(step); flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); }
.slot__steps li.is-done { color: var(--ink-3); }
.slot__steps li.is-done .step__title { text-decoration: line-through; }   /* nur der Titel ist durchgestrichen, Haken und Ergebnis bleiben lesbar */
.slot__steps li.is-done::before { content: "✓"; background: var(--success-soft); color: var(--success); }
.slot__steps .chip { height: 20px; font-size: 11px; padding: 0 6px; }
/* Ein Schritt sagt, was zu tun ist (Titel mit Verb, Tipp springt hin), wohin es führt (Zeile darunter) und wie lange es dauert. Der erste offene Schritt ist „dran“: gefüllte Zahl und der eine Knopf. */
.step { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.step__title { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.step__sub { color: var(--ink-2); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.step .btn { align-self: flex-start; margin-top: var(--space-1); }
.slot__steps li.is-current::before { background: var(--gold); color: var(--on-gold); }
.slot__steps li.is-done .step__title, .slot__steps li.is-done .step__sub { color: var(--ink-3); font-weight: 500; }
.slot__then { margin: var(--space-2) 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.slot__then .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.slot--uni { background: var(--royal-soft); border-color: transparent; }
.slot--uni .slot__kind { color: var(--royal); }
.slot--learn { background: var(--gold-soft); border-color: var(--gold-line); }
.slot--learn .slot__kind { color: var(--gold-ink); }
.slot--free { background: var(--success-soft); border-color: transparent; }
.slot--free .slot__kind { color: var(--success); }
.slot--now { box-shadow: inset 0 0 0 1px var(--gold-line); }
.slot--break { background: var(--bg-1); }
.slot--break .slot__kind, .slot--external .slot__kind { color: var(--ink-3); }
.slot--external { background: var(--bg-2); border-color: transparent; }
.slot--exam { background: var(--warn-soft); border-color: transparent; }
.slot--exam .slot__kind { color: var(--warn); }
.slot--cancelled { opacity: 0.55; }
.slot--cancelled .slot__title { text-decoration: line-through; }
.due { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); }
.due__num { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.due__label { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.due__rest { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.due__decks { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-top: var(--space-2); }

/* ---------- Mehr als Übersicht (Design-Runde 19.10., Meldung 0a8e976b): Gruppen mit wenigen Zeilen, Einstellungen auf Unterseiten ----------
   Die Seite Mehr ist nur noch ein Verzeichnis: oben die Person, darunter Gruppen (list) mit höchstens fünf Zeilen, jede Zeile mit dem
   aktuellen Wert rechts und einem Chevron; nichts wird hier verstellt (keine Auswahl, keine Segmente), das passiert auf der Unterseite.
   Die Gruppen stehen nach Platz nebeneinander (eine Spalte am iPhone, zwei am iPad, drei am Laptop) – am Laptop passt die ganze Seite auf einen Bildschirm. */
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); align-items: start; }
.more-group { display: flex; flex-direction: column; min-width: 0; }
.more-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.more-profile .row { min-height: 68px; grid-template-columns: auto 1fr auto; }
.more-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
@media (min-width: 744px) { .more-foot { max-width: 320px; } }

/* ---------- Lernstart (Design-Runde 19.10., Meldungen cda8093b und cda16542): ein Knopf für das heutige Lernen ----------
   Löst auf Heute und Lernen die Karte due-card ab (due-card bleibt, bis die App umgestellt hat): eine Karte, ein goldener Knopf, nichts
   daneben. Die Breite der Karte entscheidet über das Layout (Container-Abfrage, die Karte ist selbst ein inline-size-Container):
   unter 520px steht der Knopf unter dem Text über die ganze Breite, ab 520px rechts daneben. */
.start__body { display: grid; gap: var(--space-4); }
.start__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.start__lead { display: flex; align-items: baseline; gap: var(--space-2); }
.start__num { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.start__unit { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.start__what { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.start__parts { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-top: var(--space-2); }
.start__parts .chip { font-variant-numeric: tabular-nums; }
.start__rest { font-size: 13px; line-height: 20px; color: var(--ink-3); padding-top: var(--space-1); }
.start__done { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--success); }
.start__done .icon { width: 20px; height: 20px; }
.start--done .start__main { gap: var(--space-2); }
.start { position: relative; }
.start__head { display: flex; align-items: center; min-height: 28px; padding-bottom: var(--space-1); }
.start__head .caption { color: var(--ink-2); }
.start__tools { position: absolute; top: var(--space-2); right: var(--space-2); }
.start__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--space-2); }
.start__stat { display: flex; flex-direction: column; padding: 0 var(--space-3); border-left: 1px solid var(--line); min-width: 0; }
.start__stat:first-child { padding-left: 0; border-left: 0; }
.start__stat b { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.start__stat span { font-size: 13px; line-height: 18px; color: var(--ink-2); }
@container (min-width: 520px) {
  .start__body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-6); }
  .start__go { width: auto; min-width: 240px; }
}

/* ---------- „+10 neue heute“ und Lernblock-Sheet (Nachtrag 09.10. zu Runde 19c; im Design-Stand seit Runde 11.10., Punkte 1, 6, 11) ----------
   „+10 neue heute“ (due__more): Ab 744px ist die Kachel zweispaltig (Zahl links, Knopf rechts); die
   Zeile stand dann mittig (public/app.js) in der linken Spalte, und der Knopf erbte min-width 220px (Meldungen 5f8e4ff4,
   8718a780: „Designbruch“ in der Mac-App bei 744). Jetzt über die ganze Breite der Kachel, links bündig unter Zahl und Chips;
   ab 1180px steht die Kachel nur auf Heute in der schmalen Seitenspalte (`.section--due`) und ist einspaltig mit mittiger Zeile; auf dem Lernen-Tab hat sie die volle Breite und bleibt zweispaltig (Runde 11.10., Punkt 1).
   Sheet „Lernblock“, Verschieben: die Brücke `block-move` (Meldung d4ce2452) ist weg – das Sheet hat zwei Schritte (Runde 11.10., Punkt 6). */
.due-card > .due__more { grid-column: 1 / -1; }
@media (min-width: 744px) {
  .due-card .due__more { justify-content: flex-start; }
  .due-card .due__more .btn { min-width: 0; margin-left: calc(-1 * var(--space-3)); }
}
@media (min-width: 1180px) and (min-height: 500px) {
  .section--due .due-card .due__more { justify-content: center; }
  .section--due .due-card .due__more .btn { min-width: 220px; margin-left: 0; }
}

/* ---------- Zeit: Stundenplan (Woche) ---------- */
/* Raster 08:00–20:00 in 15-Minuten-Zeilen: 48 Zeilen à 12px (0,8px je Minute). Fünf Tage; week--sat macht den Samstag zur sechsten Spalte. */
.week { display: grid; grid-template-columns: 48px repeat(5, minmax(0, 1fr)); gap: 0; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.week--sat { grid-template-columns: 48px repeat(6, minmax(0, 1fr)); }
.week__head { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.week__head b { font-size: 15px; line-height: 20px; color: var(--ink); font-weight: 600; letter-spacing: 0; }
.week__head.is-today b { color: var(--gold-ink); }

/* Ganztägig: eine Zeile über dem Raster (nur wenn die Woche ganztägige Termine hat). Lage als Klassen on-N (Tag 1–6) und days-N (Dauer in Tagen); Überschneidungen rutschen in eine zweite Reihe. */
.week__allday-label { display: flex; align-items: center; justify-content: flex-end; padding: 0 6px 0 0; border-bottom: 1px solid var(--line); font-size: 10px; line-height: 12px; color: var(--ink-3); text-align: right; hyphens: manual; }
.week__allday {
  grid-column: 2 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row dense; row-gap: 2px; padding: 4px 0;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 20% 100%;
}
.week--sat .week__allday { grid-template-columns: repeat(6, minmax(0, 1fr)); background-size: calc(100% / 6) 100%; }
.week__tag {
  grid-column-end: span 1; min-width: 0; margin: 0 3px; padding: 3px 6px;
  border-radius: var(--radius-sm); font-size: 11px; line-height: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--royal-soft); color: var(--royal); text-decoration: none;
}
a.week__tag:hover, a.week__event:hover, a.slot:hover { text-decoration: none; }
a.slot { color: var(--ink); }
.week__tag--exam { background: var(--warn-soft); color: var(--warn); }
.week__tag--learn { background: var(--gold-soft); color: var(--gold-ink); }
.week__tag--free { background: var(--success-soft); color: var(--success); }
.week__tag--external { background: var(--bg-2); color: var(--ink-2); }
.week__tag--cancelled { opacity: 0.55; text-decoration: line-through; }
.on-1 { grid-column-start: 1; } .on-2 { grid-column-start: 2; } .on-3 { grid-column-start: 3; } .on-4 { grid-column-start: 4; } .on-5 { grid-column-start: 5; } .on-6 { grid-column-start: 6; }
.days-2 { grid-column-end: span 2; } .days-3 { grid-column-end: span 3; } .days-4 { grid-column-end: span 4; } .days-5 { grid-column-end: span 5; } .days-6 { grid-column-end: span 6; }

/* Tages-Spalte: 48 Zeilen, 60 Teilspalten (teilbar durch 2, 3, 4 und 5) für gleichzeitige Termine. */
.week__col { position: relative; display: grid; grid-template-rows: repeat(48, 12px); grid-template-columns: repeat(60, minmax(0, 1fr)); border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 48px); }
.week__col--time { grid-template-columns: minmax(0, 1fr); border-left: 0; background-image: none; }
.week__hour { grid-row: span 4; font-size: 10px; line-height: 12px; color: var(--ink-3); text-align: right; padding: 2px 6px 0 0; font-variant-numeric: tabular-nums; }
/* Lage eines Termins als Klassen from-N (Startzeile, 15-Minuten-Raster ab 08:00) und span-N (Dauer in Zeilen), N = 1…48. */
.week__event {
  grid-column: 1 / -1; min-width: 0;
  margin: 1px 2px; padding: 4px 6px; overflow: hidden;
  border-radius: var(--radius-sm); font-size: 11px; line-height: 13px; font-weight: 600; hyphens: manual; overflow-wrap: normal; word-break: normal;
  background-color: var(--bg-1); background-image: linear-gradient(var(--royal-soft), var(--royal-soft)); color: var(--royal); z-index: 1;
}
/* Titel (week__title), darunter je Angabe eine eigene Zeile small: Raum, Art, Gruppen (bei Bedarf zuerst die echte Zeit). */
.week__title { display: block; padding-bottom: 2px; }
.week__event small { display: block; font-weight: 500; color: var(--ink-2); padding-top: 2px; }
.week__event--cancelled { opacity: 0.55; }
.week__event--cancelled .week__title { text-decoration: line-through; }
.week__event--learn { background-image: linear-gradient(var(--gold-soft), var(--gold-soft)); color: var(--gold-ink); }
.week__event--free { background-image: linear-gradient(var(--success-soft), var(--success-soft)); color: var(--success); }
.week__event--exam { background-image: linear-gradient(var(--warn-soft), var(--warn-soft)); color: var(--warn); }
.week__event--external { background-image: linear-gradient(var(--bg-2), var(--bg-2)); color: var(--ink-2); }
.week__event--faded { opacity: 0.5; }
/* Gleichzeitige Termine nebeneinander: lanes-N (wie viele zugleich, 2–5) und lane-K (der wievielte, 1…N). Ab vier nebeneinander steht nur der Titel, senkrecht. */
.lanes-2.lane-1 { grid-column: 1 / span 30; } .lanes-2.lane-2 { grid-column: 31 / span 30; }
.lanes-3.lane-1 { grid-column: 1 / span 20; } .lanes-3.lane-2 { grid-column: 21 / span 20; } .lanes-3.lane-3 { grid-column: 41 / span 20; }
.lanes-4.lane-1 { grid-column: 1 / span 15; } .lanes-4.lane-2 { grid-column: 16 / span 15; } .lanes-4.lane-3 { grid-column: 31 / span 15; } .lanes-4.lane-4 { grid-column: 46 / span 15; }
.lanes-5.lane-1 { grid-column: 1 / span 12; } .lanes-5.lane-2 { grid-column: 13 / span 12; } .lanes-5.lane-3 { grid-column: 25 / span 12; } .lanes-5.lane-4 { grid-column: 37 / span 12; } .lanes-5.lane-5 { grid-column: 49 / span 12; }
.week__event.lanes-2, .week__event.lanes-3 { padding: 4px 5px; margin: 1px 1px; }
.week__event.lanes-4, .week__event.lanes-5 { writing-mode: vertical-rl; white-space: nowrap; text-overflow: ellipsis; padding: 5px 0; margin: 1px 1px; display: flex; align-items: center; font-size: 10px; line-height: 12px; }
.week__event.lanes-4 small, .week__event.lanes-5 small { display: none; }
.week__now { position: absolute; left: 0; right: 0; top: var(--top, 0px); height: 2px; background: var(--gold); z-index: 2; }
/* --top setzt Medix.nowLine() über CSSOM (erlaubt), aus data-start und der Uhrzeit: 0,8px je Minute. */
.week__now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

.from-1 { grid-row-start: 1; }
.from-2 { grid-row-start: 2; }
.from-3 { grid-row-start: 3; }
.from-4 { grid-row-start: 4; }
.from-5 { grid-row-start: 5; }
.from-6 { grid-row-start: 6; }
.from-7 { grid-row-start: 7; }
.from-8 { grid-row-start: 8; }
.from-9 { grid-row-start: 9; }
.from-10 { grid-row-start: 10; }
.from-11 { grid-row-start: 11; }
.from-12 { grid-row-start: 12; }
.from-13 { grid-row-start: 13; }
.from-14 { grid-row-start: 14; }
.from-15 { grid-row-start: 15; }
.from-16 { grid-row-start: 16; }
.from-17 { grid-row-start: 17; }
.from-18 { grid-row-start: 18; }
.from-19 { grid-row-start: 19; }
.from-20 { grid-row-start: 20; }
.from-21 { grid-row-start: 21; }
.from-22 { grid-row-start: 22; }
.from-23 { grid-row-start: 23; }
.from-24 { grid-row-start: 24; }
.from-25 { grid-row-start: 25; }
.from-26 { grid-row-start: 26; }
.from-27 { grid-row-start: 27; }
.from-28 { grid-row-start: 28; }
.from-29 { grid-row-start: 29; }
.from-30 { grid-row-start: 30; }
.from-31 { grid-row-start: 31; }
.from-32 { grid-row-start: 32; }
.from-33 { grid-row-start: 33; }
.from-34 { grid-row-start: 34; }
.from-35 { grid-row-start: 35; }
.from-36 { grid-row-start: 36; }
.from-37 { grid-row-start: 37; }
.from-38 { grid-row-start: 38; }
.from-39 { grid-row-start: 39; }
.from-40 { grid-row-start: 40; }
.from-41 { grid-row-start: 41; }
.from-42 { grid-row-start: 42; }
.from-43 { grid-row-start: 43; }
.from-44 { grid-row-start: 44; }
.from-45 { grid-row-start: 45; }
.from-46 { grid-row-start: 46; }
.from-47 { grid-row-start: 47; }
.from-48 { grid-row-start: 48; }
.span-1 { grid-row-end: span 1; }
.span-2 { grid-row-end: span 2; }
.span-3 { grid-row-end: span 3; }
.span-4 { grid-row-end: span 4; }
.span-5 { grid-row-end: span 5; }
.span-6 { grid-row-end: span 6; }
.span-7 { grid-row-end: span 7; }
.span-8 { grid-row-end: span 8; }
.span-9 { grid-row-end: span 9; }
.span-10 { grid-row-end: span 10; }
.span-11 { grid-row-end: span 11; }
.span-12 { grid-row-end: span 12; }
.span-13 { grid-row-end: span 13; }
.span-14 { grid-row-end: span 14; }
.span-15 { grid-row-end: span 15; }
.span-16 { grid-row-end: span 16; }
.span-17 { grid-row-end: span 17; }
.span-18 { grid-row-end: span 18; }
.span-19 { grid-row-end: span 19; }
.span-20 { grid-row-end: span 20; }
.span-21 { grid-row-end: span 21; }
.span-22 { grid-row-end: span 22; }
.span-23 { grid-row-end: span 23; }
.span-24 { grid-row-end: span 24; }
.span-25 { grid-row-end: span 25; }
.span-26 { grid-row-end: span 26; }
.span-27 { grid-row-end: span 27; }
.span-28 { grid-row-end: span 28; }
.span-29 { grid-row-end: span 29; }
.span-30 { grid-row-end: span 30; }
.span-31 { grid-row-end: span 31; }
.span-32 { grid-row-end: span 32; }
.span-33 { grid-row-end: span 33; }
.span-34 { grid-row-end: span 34; }
.span-35 { grid-row-end: span 35; }
.span-36 { grid-row-end: span 36; }
.span-37 { grid-row-end: span 37; }
.span-38 { grid-row-end: span 38; }
.span-39 { grid-row-end: span 39; }
.span-40 { grid-row-end: span 40; }
.span-41 { grid-row-end: span 41; }
.span-42 { grid-row-end: span 42; }
.span-43 { grid-row-end: span 43; }
.span-44 { grid-row-end: span 44; }
.span-45 { grid-row-end: span 45; }
.span-46 { grid-row-end: span 46; }
.span-47 { grid-row-end: span 47; }
.span-48 { grid-row-end: span 48; }

/* Handy hoch: Tagesliste mit Tageswahl; ab bp-tablet 744px Breite – auch am Handy quer – die Woche. Umschalten nur per CSS, siehe Umbruchpunkte. */
.week-view { display: none; }
.day-view { display: flex; flex-direction: column; gap: var(--space-3); }
/* Plan-Kopf: Titel, darunter mittig die Woche. Ab 744px beides in einer Zeile. */
.plan-head { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-head > .page-title { padding-bottom: 0; }
.week-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 44px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.week-nav .btn--icon { width: 44px; height: 42px; border-radius: var(--radius-pill); }
.week-nav__title { text-align: center; font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-nav__title small { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-left: var(--space-2); }
.day-pick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1); }
.day-pick__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px;
  border-radius: var(--radius-md); color: var(--ink-3); text-decoration: none;
  font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background-color 160ms ease-out;
}
.day-pick__item b { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.day-pick__item:hover { text-decoration: none; background: var(--bg-2); }
.day-pick__item.is-active { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); }
.day-pick__item.is-today b { color: var(--gold-ink); }
.day-pick__item.is-empty b { color: var(--ink-3); }
.day-view__allday { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.day-view__allday .week__tag { margin: 0; padding: 5px 10px; font-size: 13px; line-height: 18px; }

/* ---------- Zeit: Tagesplan ---------- */
.plan { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.plan__item { display: grid; grid-template-columns: 24px 56px 1fr auto; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); }
.plan__item + .plan__item { border-top: 1px solid var(--line); }
.plan__time { font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.plan__title { font-size: 15px; line-height: 22px; }
.plan__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.plan__item.is-done .plan__title { color: var(--ink-3); text-decoration: line-through; }
.plan__item.is-done .plan__sub { color: var(--ink-3); }
.plan__item--learn { background: var(--gold-soft); }
.plan__item--now .plan__time { color: var(--gold-ink); font-weight: 700; }

/* ---------- Zeit: Kalender ---------- */
.cal { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-3) var(--space-4); }
.cal__head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-bottom: var(--space-2); }
.cal__month { text-align: center; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__wd { text-align: center; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-1) 0 var(--space-2); }
.cal__day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 44px; border-radius: var(--radius-sm); font-size: 15px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color 120ms ease-out; }
.cal__day:hover { background: var(--bg-2); }
.cal__day.is-muted { color: var(--ink-3); }
.cal__day.is-today { color: var(--gold-ink); font-weight: 700; }
.cal__day.is-selected { background: var(--bg-3); box-shadow: inset 0 0 0 1.5px var(--royal); }
.cal__dots { display: flex; gap: 3px; height: 4px; }
.cal__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--royal); }
.cal__dots i.gold { background: var(--gold); }
.cal__dots i.success { background: var(--success); }
.cal__legend { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-1) 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--royal); }
.cal__legend i.gold { background: var(--gold); }
.cal__legend i.success { background: var(--success); }

/* ---------- Material: Einheit und Viewer ---------- */
.unit-head { display: flex; flex-direction: column; gap: var(--space-2); }
/* Wann: Kalenderblatt links, Zeit groß rechts, darunter Tag und Abstand zu heute. */
.unit-when { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.unit-when__date { display: flex; flex-direction: column; align-items: center; width: 64px; padding: 6px 0 8px; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--line); }
.unit-when__date span { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.unit-when__date b { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 30px; line-height: 34px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.unit-when.is-today .unit-when__date { background: var(--gold-soft); border-color: var(--gold-line); }
.unit-when.is-today .unit-when__date b, .unit-when.is-today .unit-when__date span { color: var(--gold-ink); }
.unit-when__time { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.unit-when__day { font-size: 14px; line-height: 20px; color: var(--ink-2); }
/* Angaben: je Zeile Icon, kleine Bezeichnung und Wert; lange Werte (Raum, Dozent) brechen an Leerzeichen um. */
/* Untereinander, solange die Karte schmal ist (Handy); ab 520px Kartenbreite – also ab iPad – zwei Spalten. */
.facts { display: flex; flex-wrap: wrap; margin: 0; padding: var(--space-1) var(--space-4); container-type: inline-size; }
.fact { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: start; column-gap: var(--space-3); padding: var(--space-3) 0; }
.fact + .fact { border-top: 1px solid var(--line); }
@container (min-width: 520px) {
  .fact { width: 50%; }
  .fact:nth-child(odd) { padding-right: var(--space-5); }
  .fact:nth-child(2) { border-top: 0; }
}
.fact > :first-child { grid-column: 1; grid-row: 1 / span 2; display: flex; margin-top: 2px; color: var(--ink-3); }
.fact > :first-child, .fact > :first-child .icon { width: 20px; height: 20px; }
.fact dt, .fact dd { grid-column: 2; }
.fact dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.fact dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: break-word; }
.fact dd small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.material { grid-template-columns: 44px 1fr auto; }
.material__thumb { width: 44px; height: 56px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-strong); display: grid; place-items: center; overflow: hidden; }
.material__thumb svg { width: 100%; height: 100%; display: block; }
/* Ein echtes Bild in der Miniatur (erste Seite) passt hinein, Hochformat wird nicht beschnitten; die Platzhalter-Balken der SVG-Miniatur
   (doc-t Titel, doc Zeilen, doc-b Balken) in der Papier-Tinte. */
.material__thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
.doc { fill: var(--paper-ink); opacity: .22; }
.doc-t { fill: var(--paper-ink); opacity: .75; }
.doc-b { fill: var(--paper-ink); opacity: .45; }
.material__thumb--note { background: var(--paper); }
.material__title { font-size: 15px; line-height: 22px; font-weight: 600; }
.material__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.material__meta .chip { height: 22px; font-size: 11px; padding: 0 7px; }

.viewer { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.viewer__pos { padding: 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer__body { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg-0); min-height: 0; }
.viewer__body--thumbs { grid-template-columns: 136px minmax(0, 1fr); }
/* Die Leiste wächst mit dem Viewer: ab 760px Breite 168px, ab 1000px 208px – die Miniaturen sind dann gut zu erkennen. */
@container (min-width: 760px) { .viewer__body--thumbs { grid-template-columns: 168px minmax(0, 1fr); } }
@container (min-width: 1000px) { .viewer__body--thumbs { grid-template-columns: 208px minmax(0, 1fr); } }
/* Die Miniaturen sind genau so hoch wie die Bühne (height 0 + min-height 100% in der Grid-Zeile) und scrollen selbst; jede Miniatur
   ist 4:3 und schrumpft nie (flex: none), eine Hochformat-Seite steht darin verkleinert (object-fit: contain). Die Seitenzahl steht
   UNTER dem Bild (nie darauf), der goldene Ring und der Punkt „hat Karten“ liegen auf dem Bild. */
.viewer__thumbs { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); height: 0; min-height: 100%; overflow: auto; border-right: 1px solid var(--line); background: var(--bg-1); }
.thumb { position: relative; flex: none; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.thumb > svg, .thumb > img { width: 100%; height: auto; aspect-ratio: 4 / 3; display: block; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-strong); }
.thumb > img { object-fit: contain; }
.thumb__num { align-self: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.thumb:hover > svg, .thumb:hover > img { border-color: var(--ink-3); }
.thumb.is-active > svg, .thumb.is-active > img { box-shadow: 0 0 0 2px var(--gold); border-color: var(--gold); }
.thumb.is-active .thumb__num { color: var(--gold-ink); font-weight: 700; }
.thumb.has-cards::before { content: ""; position: absolute; left: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--paper); z-index: 1; }
.viewer__stage { display: grid; place-items: start center; padding: var(--space-4); overflow: auto; touch-action: pan-x pan-y; }
/* Zoom ohne Knopf: zwei Finger (am Mac Trackpad, ⌘+/−) setzen --zoom an der Seite; die Bühne scrollt. Ursprung links oben – mit
   „top center“ wäre die linke Hälfte der vergrößerten Seite unerreichbar. */
.viewer__stage .page { scale: var(--zoom, 1); transform-origin: 0 0; }
.page { position: relative; width: 100%; max-width: 640px; aspect-ratio: 4 / 3; background: var(--paper); color: var(--paper-ink); border-radius: 6px; box-shadow: var(--shadow-1); overflow: hidden; }
.page--portrait { aspect-ratio: 210 / 297; max-width: 480px; }
/* Die Seite ist in Ebenen gebaut (alle absolut über der Seitenfläche, Reihenfolge = Stapel): unten das Bild der Seite (page__img),
   darüber die Markierungen (page__marks, jetzt), später Anmerkungen (page__notes) und die Handschrift mit dem Apple Pencil
   (page__ink, ein Canvas) – wie in Notability auf Folien schreiben, ohne dass hier etwas umgebaut werden muss. */
.page > svg, .page > img, .page__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.page__layer { position: absolute; inset: 0; pointer-events: none; }
.page__marks { z-index: 1; }
.page__notes { z-index: 2; }
.page__ink { z-index: 3; touch-action: none; }
/* Markierungen sind antippbar (welche Karten stammen daher?) und lassen sich ausblenden ([data-marks-toggle] → viewer.hide-marks). */
/* Lage in Prozent der Seite über data-x/y/w/h (Medix.labels setzt --x/--y/--w/--h, kein style-Attribut): der Rahmen liegt genau auf der
   Stelle (Text, Bild, Formel), aus der die Karte stammt. Die Zahl der Karten steht als runde Marke an der oberen rechten Ecke des Rahmens
   (data-count) – nie als Etikett oberhalb, das den Text davor verdeckt. Stammt die Karte nur von der Folie, nicht von einer Stelle, steht
   stattdessen ein Punkt mit der Zahl oben rechts auf der Folie (page__mark--dot, ohne Lage). */
.page__mark { position: absolute; left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 10%); height: var(--h, 10%); border: 2px solid var(--gold); border-radius: 6px; background: var(--gold-soft); pointer-events: auto; cursor: pointer; transition: box-shadow 160ms ease-out; }
/* Der Rahmen ist mindestens 24px groß, damit er sich auch auf einer einzelnen Zeile antippen lässt. */
.page__mark { min-width: 24px; min-height: 24px; box-sizing: border-box; }
.page__mark--dot { left: auto; top: 10px; right: 10px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--paper); }
.page__mark--dot:hover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-soft); }
.page__mark:hover { box-shadow: 0 0 0 3px var(--gold-soft); }
.viewer.hide-marks .page__marks { display: none; }
.viewer__foot [data-marks-toggle][aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }
/* Vollbild: es geht um das Dokument. viewer.is-full füllt den Bildschirm (in einem Rahmen: den Rahmen), ohne Rand und Rundung; die Seite
   wird so groß, wie die Höhe erlaubt; Miniaturen und Fußzeile bleiben. Der Knopf zeigt maximize bzw. minimize. */
.viewer.is-full { position: fixed; inset: 0; z-index: 60; border: 0; border-radius: 0; height: auto; }
[data-sheet-host] .viewer.is-full { position: absolute; }
body.has-full { overflow: hidden; }
body.has-full .content { z-index: auto; }   /* sonst läge die Tab-Bar über dem Vollbild */
/* Die Bühne ist ein Größen-Container: die Seite wird so groß, wie Breite UND Höhe erlauben (iPhone hochkant: Breite, quer: Höhe). */
.viewer.is-full .viewer__stage { padding: var(--space-3); place-items: center; container-type: size; }
.viewer.is-full .page { max-width: none; width: min(100cqw, 100cqh * 4 / 3); height: auto; max-height: none; }
.viewer.is-full .page--portrait { max-width: none; width: min(100cqw, 100cqh * 210 / 297); }
.viewer.is-full .viewer__foot { padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px)); }
[data-full-toggle] .full-off, [data-full-toggle][aria-pressed="true"] .full-on { display: none; }
[data-full-toggle][aria-pressed="true"] .full-off { display: inline-flex; }
/* Die Markierung sagt, was sie ist: kleines Etikett oben links („2 Karten“, aus data-label), damit der Rahmen nie rätselhaft ist. */
.page__mark[data-count]::after { content: attr(data-count); position: absolute; right: -10px; top: -10px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--paper); }
.page__mark--dot[data-count]::after { left: 0; top: 0; right: auto; width: 100%; height: 100%; min-width: 0; padding: 0; border-radius: 50%; box-shadow: none; background: none; line-height: 24px; }
/* Runde 11.10. (Punkte 7 und 12): Die Zahl am Rahmen liegt außerhalb der Ecke; steht der Rahmen am oberen oder rechten Rand der Seite (Medix.labels setzt dann `is-edge`:
   y unter 3 % oder x + Breite über 98 %), rückt sie nach innen, damit `.page { overflow: hidden }` sie nicht abschneidet. Der Punkt liegt über den Rahmen (z-index),
   sonst fängt ein Rahmen oben rechts den Tipp ab; ab drei Ziffern wird er zur Pille (Mindestmaß 24 px, wächst mit der Zahl), statt die Zahl zu quetschen. */
.page__mark.is-edge[data-count]::after { right: 2px; top: 2px; }
.page__mark--dot { z-index: 1; }
.page__mark--dot[data-count] { display: grid; place-items: center; width: auto; min-width: 24px; padding: 0 7px; border-radius: 12px; }
.page__mark--dot[data-count]::after { position: static; display: block; height: auto; width: auto; min-width: 0; padding: 0; line-height: 24px; color: var(--on-gold); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Zuletzt gelesen: Medix merkt sich je Material die letzte Seite und öffnet dort; springt man weg (Miniatur, Suche), führt der Knopf „S. 38“ zurück. */
.viewer__last { gap: 4px; }
.viewer-grid .viewer { margin-top: var(--space-2); }
/* Fußzeile in drei Gruppen: links Seitenstand, Vergrößern, „Bis hier“; die Mitte (viewer__foot-tools) ist der Platz für die
   Stift-Werkzeuge der Medix-Notizen (jetzt leer); rechts Karte aus Seite und Erklären. Am Handy nur Icons. */
.viewer__foot-tools { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.viewer__foot .btn--tertiary.btn--sm { height: 32px; padding: 0 var(--space-2); }
@container (max-width: 559px) { .viewer__foot .btn--tertiary .btn__label { display: none; } .viewer__foot .btn--tertiary.btn--sm { width: 36px; padding: 0; justify-content: center; } .viewer__foot [data-crop-toggle] { display: none; } .viewer .viewer__foot { gap: 4px; } }
/* Das Sheet „Karten aus dieser Stelle“ ist so hoch wie seine Liste – mit einer Karte eine Zeile, keine Mindesthöhe. */
.mark-sheet { min-height: 0; }
.mark-sheet .cardlist { min-height: 0; }
.viewer { container-type: inline-size; }
/* „Bis hier“: der Seitenbereich der Einheit (app.material_ranges) – als Chip im Kopf; die Miniaturen des Bereichs stehen voll,
   die anderen leicht zurück. Ohne Bereich steht im Kopf der Hinweis. */
/* Miniaturen erst ab 744px; am Handy nur die Seite mit Wischen. */
@media (max-width: 743px) { .viewer__body--thumbs { grid-template-columns: minmax(0, 1fr); } .viewer__body--thumbs .viewer__thumbs { display: none; } }
.viewer__thumbs.has-range .thumb:not(.is-covered) { opacity: 0.5; }
.viewer__thumbs.has-range .thumb.is-covered > svg, .viewer__thumbs.has-range .thumb.is-covered > img { border-color: var(--ink-3); }
.page-head__meta .viewer__hint { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.page-head__meta .viewer__hint .icon { width: 14px; height: 14px; }
/* Erklären neben der Seite: dasselbe Panel wie im Lernmodus (aside.explain); ab 744px Spalte rechts, am Handy Sheet. */
.viewer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 744px) { .viewer-grid.has-explain { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (min-width: 1180px) { .viewer-grid.has-explain { grid-template-columns: minmax(0, 1fr) 380px; } }
/* Schnellfragen und Antworten im Panel: Chips über dem Feld, die Antwort als Medix-Text mit Belegen und zwei Aktionen. */
.explain__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.explain__quick .chip--action { height: 32px; font-size: 13px; }
.explain__chat { display: flex; flex-direction: column; gap: var(--space-2); }
.explain .msg { max-width: 100%; }
.explain .msg__actions { margin-left: 0; flex-wrap: wrap; }
/* Upload (Sheet „Material hinzufügen“): Ablage, Typ, Zugehörigkeit; danach die Zustände als Zeilen in der Material-Liste. */
.upload { display: flex; flex-direction: column; gap: var(--space-4); }
.upload__drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-1); text-align: center; }
.upload__drop .icon { width: 28px; height: 28px; color: var(--ink-2); }
.upload__drop .btn { margin-top: var(--space-1); }
.upload__hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.upload__field { display: flex; flex-direction: column; gap: 6px; }
.upload__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.upload__file { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.upload__file .icon { width: 18px; height: 18px; color: var(--ink-2); }
.upload__actions { display: flex; gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-2); }
.material__state { display: inline-flex; align-items: center; gap: 6px; }
.material__state .progress { width: 96px; }
.material__state--error { color: var(--danger); }
.row__sub:has(> .material__state--error) { white-space: normal; }   /* der Fehlersatz darf umbrechen, auch am iPhone */
/* Gedämpfte Zeile (z. B. „Karten vorschlagen“, bis der Agent da ist): aria-disabled statt style=, die Fläche reagiert nicht. */
.row[aria-disabled="true"] { opacity: var(--disabled); pointer-events: none; }
.material__state .btn--tertiary { height: 24px; padding: 0 6px; font-size: 12px; }
.viewer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); background: var(--bg-1); }
.viewer__foot .spacer { flex: 1; }
.timeline { display: block; flex: 1; height: 24px; }
.timeline__track { fill: var(--bg-2); }
.timeline__played { fill: var(--gold); }
.timeline__mark { fill: var(--royal); }
.timeline__head { fill: var(--gold-strong); }

/* ---------- Agenten: Erklär mir das (Gespräch zur Einheit) ---------- */
.chat { display: flex; flex-direction: column; gap: var(--space-3); }
.chat__context { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.chat__context .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.msg { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 15px; line-height: 22px; animation: fade-up 240ms cubic-bezier(.2,.8,.2,1); }
.msg--me { align-self: flex-end; background: var(--gold-soft); border: 1px solid var(--gold-line); border-bottom-right-radius: 6px; }
.msg--ai { align-self: flex-start; background: var(--bg-1); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg p + p { margin-top: var(--space-2); }
.msg__cites { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-top: var(--space-2); }
.msg__cites .chip { height: 22px; font-size: 11px; padding: 0 7px; cursor: pointer; }
.msg__actions { display: flex; gap: var(--space-1); padding-top: var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.msg__actions .btn { height: 32px; font-size: 12px; padding: 0 var(--space-2); color: var(--ink-2); }
.msg__actions .btn:hover { background: var(--bg-2); color: var(--ink); }
.chat__input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-xl); }
.chat__input textarea { background: transparent; border: 0; padding: 10px 0; min-height: 44px; resize: none; }
.chat__foot { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 11px; line-height: 14px; color: var(--ink-3); padding: 0 var(--space-2); }


/* ---------- Agenten: Nachrichten (app.messages) und Push ---------- */
.notice { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); }
.notice + .notice { border-top: 1px solid var(--line); }
.notice > div { min-width: 0; }
.notice__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); display: grid; place-items: center; }
.notice--day .notice__icon { background: var(--gold-soft); color: var(--gold-ink); }          /* Gold nur für die Morgenmeldung */
.notice--replanned .notice__icon { background: var(--royal-soft); color: var(--royal); }
.notice--error .notice__icon { background: var(--danger-soft); color: var(--danger); }
.notice__title { font-size: 15px; line-height: 22px; font-weight: 600; }
.notice__body { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.notice__reason { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-3); padding-top: 4px; }
.notice__reason .icon { width: 14px; height: 14px; }
.notice__time { font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.notice.is-unread .notice__title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: 2px; }
.push { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); }
.push__app { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-0); display: grid; place-items: center; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 22px; font-weight: 500; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line); }
.push__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.push__title { font-size: 15px; line-height: 20px; font-weight: 600; padding-top: 2px; }
.push__body { font-size: 14px; line-height: 20px; color: var(--ink-2); }
/* Eine Nachricht ist eine Form: Titel, Text, Grund, ein Verweis (Chip) und bis zu zwei Aktionen (notice__foot) – die zweite ist die
   stille („Passt“, „Später“, btn--quiet). Nach einem Tipp auf eine Aktion wird die Nachricht is-done (gedämpft, Knöpfe weg). */
.notice__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.notice__foot .chip { height: 24px; font-size: 11px; padding: 0 8px; }
.notice__foot .chip .icon { width: 14px; height: 14px; }
.notice__actions { display: flex; gap: var(--space-1); margin-left: auto; }
.notice__actions .btn { height: 32px; padding: 0 var(--space-3); font-size: 13px; gap: 4px; }
.notice__actions .btn .icon { width: 16px; height: 16px; }
.btn--quiet { color: var(--ink-3); }
.btn--quiet:hover { color: var(--ink); background: var(--bg-2); }
.notice.is-done { opacity: 0.6; }
.notice.is-done .notice__actions { display: none; }
/* ---------- Morgenmeldung „Dein Tag heute“: die ganze Meldung als Karte – oben auf Heute (bis zum Wegwischen) und oben in der
   Nachrichtenliste. Gold (Sonne, Rahmen) nur hier. Teile: Uni (Blöcke mit Ort, „Los um“), Karten (Zahl, Dauer), Lernblock (Schritte),
   frei ab, Lieferungen der Nacht (Ansehen · Rückgängig), Kleinigkeiten (mit Aktion), Coa (Platz, später). Ab 620px zweispaltig. ---------- */
.morning { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--gold-line); border-radius: var(--radius-xl); container-type: inline-size; }
.morning__head { display: flex; align-items: center; gap: var(--space-3); }
.morning__sun { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; flex: none; }
.morning__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 20px; line-height: 26px; font-weight: 500; }
.morning__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.morning__close { margin-left: auto; flex: none; }
.morning__lead { font-size: 15px; line-height: 22px; }
.morning__parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
@container (min-width: 620px) { .morning__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .morning__part--wide { grid-column: 1 / -1; } }
.morning__part { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.morning__label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 2px; }
.morning__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); min-height: 28px; font-size: 14px; line-height: 20px; }
.morning__row > .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.morning__row b { font-weight: 600; }
.morning__row small { font-size: 12px; color: var(--ink-3); }
.morning__row .dot { width: 3px; height: 3px; color: var(--ink-3); }
.morning__text { min-width: 0; flex: 1 1 180px; }
.morning__act { margin-left: auto; display: flex; gap: 2px; flex: none; }
.morning__act .btn { height: 28px; padding: 0 var(--space-2); font-size: 12px; gap: 4px; }
.morning__act .btn .icon { width: 14px; height: 14px; }
.morning__part .slot__steps { margin-top: 2px; }
.morning__part--coa { border-style: dashed; color: var(--ink-3); }
/* Von der Mitteilung geöffnet (Nachbesserung 41d): Tippt Jakob auf die Push-Nachricht „Dein Tag heute“, trägt die Karte aria-current="true" –
   goldener Rand und ein weicher Ring, der einmal ausklingt (kein Dauerblinken); ohne Bewegung steht der Ring einfach da. Eine Regel, die sofort wirkt. */
.morning[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); animation: morning-from-push 1100ms cubic-bezier(.2,.8,.2,1) 1; }
@keyframes morning-from-push { from { box-shadow: 0 0 0 12px var(--gold-soft); } to { box-shadow: 0 0 0 4px var(--gold-soft); } }
/* ---------- Benachrichtigungen (Mehr → Benachrichtigungen): Push, Ruhezeit, Obergrenze, ein Schalter je Art, Kurzbefehle ---------- */
.setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: setup; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.setup-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.setup-steps li::before { counter-increment: setup; content: counter(setup); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg-2); margin-top: -1px; }
.setup-steps .icon { width: 16px; height: 16px; vertical-align: -3px; }
.setup-steps b { color: var(--ink); font-weight: 600; }
.setup { display: flex; flex-direction: column; gap: var(--space-2); }
.setup__title { font-size: 15px; line-height: 22px; font-weight: 600; }
.setup__title small { font-weight: 400; color: var(--ink-2); }
.key { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.key__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.key:not(.is-revealed) .key__plain, .key.is-revealed .key__dots { display: none; }
.key .btn { height: 28px; padding: 0 var(--space-2); font-size: 12px; gap: 4px; font-family: var(--font-sans); flex: none; }
.key .btn .icon { width: 14px; height: 14px; }
.row .key { grid-column: 1 / -1; }
.notify-settings .row__sub { white-space: normal; }
.row__trail--below { grid-column: 2 / -1; justify-self: start; padding-top: 2px; }   /* Steuerung unter dem Titel statt rechts (Ruhezeit) */
.time-range { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-2); }
.time-range .field__input { width: 96px; padding: 0 var(--space-2); text-align: center; font-variant-numeric: tabular-nums; }
.field__input--num { width: 72px; text-align: center; padding: 0 var(--space-2); font-variant-numeric: tabular-nums; }

/* ---------- Werkstatt (core.changes, CDC) ---------- */
.change { display: flex; flex-direction: column; gap: var(--space-3); }
.change__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.change__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 22px; line-height: 28px; font-weight: 500; }
.change__ref { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.change__desc { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.status--building { background: var(--bg-2); color: var(--ink-2); }
.status--testing { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.status--released { background: var(--success-soft); color: var(--success); }
.status--rolled { background: var(--danger-soft); color: var(--danger); }
.brief { display: flex; flex-direction: column; }
.brief__item { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.brief__item + .brief__item { border-top: 1px solid var(--line); }
.brief__item .check { margin-top: -1px; }
.brief__item.is-ai .check { opacity: 0.55; pointer-events: none; }
.brief__text { font-size: 15px; line-height: 22px; }
.brief__item.is-done .brief__text { color: var(--ink-3); text-decoration: line-through; }
.brief__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); padding-top: 3px; }
.brief__meta .chip { height: 20px; font-size: 11px; padding: 0 6px; }
.brief__meta .icon { width: 14px; height: 14px; color: var(--gold-ink); }
/* Zwei gleich breite Knöpfe; wird es schmal (unter 2 × 180px, also am iPhone), stehen sie untereinander, damit keine Beschriftung über die Karte ragt. */
.workshop__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); }
.workshop__env { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.workshop__env + .workshop__env { border-top: 1px solid var(--line); }
.workshop__env b { display: block; font-weight: 600; }
.workshop__env .change__ref { display: flex; }
.workshop__env .change__ref { color: var(--ink-3); }

/* ---------- Fundament: Anmelden ---------- */
.login { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 400px; margin: 0 auto; padding: var(--space-10) 0 var(--space-8); }
.login__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-bottom: var(--space-4); }
.login__wordmark { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.login__tag { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.login .card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.login__foot { text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ---------- Notiz: Papier im 28px-Raster (Runde 25b) ----------
   Ein Dokument (doc) aus Blöcken auf einem Blatt: Anschlag links und oben, 1120px breit (iPad quer ohne Zoom), wächst nach unten.
   Raster --grid 28px in beide Richtungen, Rand 56px links und 28px oben; Punkte als Vorgabe (note--dots), je Notiz Linien (note--lines)
   oder Karos (note--squares). Alles sitzt im Raster: Textzeilen 28px mit der Grundlinie AUF der Rasterlinie (Manrope 17px in 28px:
   Grundlinie 20px unter der Zeilenoberkante, darum liegt das Raster 20px versetzt), Überschrift 56px, Listen- und Tabellenzeilen 28px,
   Folien und Bilder auf ganze Zeilen aufgerundet (lines-N). Blöcke kleben aneinander (Abstand 0 oder Vielfache von 28).
   Schmaler als 1120px wird das Blatt auf die Breite skaliert (--fit, Medix.note misst die Bühne) und lässt sich mit zwei Fingern zoomen
   (--zoom) wie im Viewer – über zoom, damit Maße und Scroll mitwachsen. */
.note { --grid: 28px; display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
/* Die Notiz nimmt den ganzen Schirm ein (note--full, wie das Vollbild des Viewers): kein Seitenkopf, keine Tab-Bar, keine Seitenleiste –
   das Blatt füllt den Schirm (am Laptop 1440px breit, das Raster läuft durch). In einem Rahmen ([data-sheet-host]) füllt sie den Rahmen.
   Kopfzeile note__head: Zurück, Titel, Papier, Lesen, Mehr. */
.note--full { position: fixed; inset: 0; z-index: 60; border: 0; border-radius: 0; }
[data-sheet-host] .note--full { position: absolute; }
.note__head { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: calc(env(safe-area-inset-top, 0px) + 4px) var(--space-3) 4px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.note__head .page-head__back { flex: none; }
.note__title { flex: 1; min-width: 0; margin: 0; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 19px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note__head .note-paper { margin-left: 0; }
.note__head .chip { flex: none; }
@container (max-width: 559px) { .note__head .page-head__back span:not(.icon), .note__head .chip, .note__head .btn--tertiary .btn__label { display: none; } .note__head .note-paper .segmented__item { padding: 0 var(--space-2); } }
.note__stage { position: relative; flex: 1; min-height: 0; overflow: auto; background: var(--bg-1); touch-action: pan-x pan-y; }
/* Lesen: ein Tipp aufs Blatt schaltet nichts mehr um – die Steuerung bleibt stehen (Jakob, 10.10.: „diese Haptik nervt“). Ausblenden gibt es nur
   noch ausdrücklich (Entwurf Notizen 2: Mehr › „Steuerung ausblenden“, ein Knopf holt sie zurück). */
/* Markiert wird nur Text im Textfeld: Folien, Beschriftungen, Griffe und Leisten lassen sich nie versehentlich mitmarkieren (Jakob, 10.10.: „markiere
   unabsichtlich alles aus den Folien“). WebKit braucht user-select: text am bearbeitbaren Element selbst. */
.note { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.note [contenteditable]:not([contenteditable="false"]), .note input, .note textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.note__sheet {
  position: relative; box-sizing: border-box; width: 100%; min-width: 1120px; min-height: calc(20 * var(--grid));
  padding: var(--grid) var(--grid) calc(4 * var(--grid)) calc(2 * var(--grid));
  font-family: var(--font-sans); font-size: 17px; line-height: var(--grid); color: var(--ink);
  zoom: calc(var(--fit, 1) * var(--zoom, 1));
  background-color: var(--bg-1);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 75%, transparent) 1.1px, transparent 1.7px);
  background-size: var(--grid) var(--grid); background-position: -14px 6px;
}
.note--lines .note__sheet { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% var(--grid); background-position: 0 20px; }
.note--squares .note__sheet { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 100% var(--grid), var(--grid) 100%; background-position: 0 20px, 0 0; }
/* Umschalter Papier im Kopf der Notiz: ein kleines Segmented (Punkte · Linien · Karos). */
.note-paper { margin-left: auto; flex: none; }
.note-paper .segmented__item { flex: 0 0 auto; padding: 0 var(--space-3); }
/* Blöcke: 640px breit (die Folienspalte), rechts bleibt das Raster frei zum Schreiben. Griff links im Rand (Hover oder gewählt). */
.block { position: relative; max-width: 640px; margin: 0; }
.block__handle { position: absolute; left: -36px; top: 0; width: 28px; height: var(--grid); display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity 160ms ease-out; cursor: grab; touch-action: none; }
.block__handle .icon { rotate: 90deg; }
.block:hover .block__handle, .block.is-selected .block__handle { opacity: 1; }
.block.is-selected::before { content: ""; position: absolute; left: -8px; top: 2px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--royal); }
/* lines-N: so viele Rasterzeilen hoch (Folie, Bild, Platz); der Server rechnet N aus dem Seitenverhältnis, aufgerundet. */
.lines-1 { --lines: 1; } .lines-2 { --lines: 2; } .lines-3 { --lines: 3; } .lines-4 { --lines: 4; } .lines-5 { --lines: 5; } .lines-6 { --lines: 6; } .lines-7 { --lines: 7; } .lines-8 { --lines: 8; } .lines-9 { --lines: 9; } .lines-10 { --lines: 10; } .lines-11 { --lines: 11; } .lines-12 { --lines: 12; } .lines-13 { --lines: 13; } .lines-14 { --lines: 14; } .lines-15 { --lines: 15; } .lines-16 { --lines: 16; } .lines-17 { --lines: 17; } .lines-18 { --lines: 18; } .lines-19 { --lines: 19; } .lines-20 { --lines: 20; } .lines-21 { --lines: 21; } .lines-22 { --lines: 22; } .lines-23 { --lines: 23; } .lines-24 { --lines: 24; } .lines-25 { --lines: 25; } .lines-26 { --lines: 26; } .lines-27 { --lines: 27; } .lines-28 { --lines: 28; } .lines-29 { --lines: 29; } .lines-30 { --lines: 30; } .lines-31 { --lines: 31; } .lines-32 { --lines: 32; } .lines-33 { --lines: 33; } .lines-34 { --lines: 34; } .lines-35 { --lines: 35; } .lines-36 { --lines: 36; } .lines-37 { --lines: 37; } .lines-38 { --lines: 38; } .lines-39 { --lines: 39; } .lines-40 { --lines: 40; }
/* Text: Medix-Text auf dem Raster. Grundlinien-Korrektur je Schriftgröße über translate (ohne Einfluss auf das Layout). */
.note__sheet .text { font-size: 17px; line-height: var(--grid); }
.note .note__sheet .text > * { margin: 0; }   /* Abstände im Text nur über Rasterzeilen (Platz-Block), nie über Ränder */
.note__sheet .tx-p { margin: 0; }
.note__sheet .tx-h1 { font-size: 30px; line-height: calc(2 * var(--grid)); translate: 0 10px; }
.note__sheet .tx-h2 { font-size: 22px; line-height: var(--grid); translate: 0 -2px; }
.note__sheet .tx-h3 { font-family: var(--font-sans); font-variation-settings: normal; font-size: 17px; line-height: var(--grid); font-weight: 700; }
.note__sheet .block + .block:has(> .text > :is(.tx-h1, .tx-h2):first-child) { margin-top: var(--grid); }
.note__sheet :is(.tx-caption, .tx-small, .tx-hint) { font-size: 13px; line-height: var(--grid); translate: 0 1px; }
.note__sheet .tx-quote { padding: 0 0 0 26px; border-left: 2px solid var(--gold-line); font-size: 17px; line-height: var(--grid); }
.note__sheet .tx-memo { padding: 0 var(--space-3); border: 0; box-shadow: inset 0 0 0 1px var(--gold-line); line-height: var(--grid); }
.note__sheet .tx-list { gap: 0; padding-left: var(--grid); }
.note__sheet .tx-list .tx-list { margin: 0; }
.note__sheet .tx-terms { row-gap: 0; column-gap: var(--grid); }
.note__sheet .tx-badges { gap: 0 var(--space-2); }
.note__sheet .tx-badge { min-height: var(--grid); padding: 0 12px; }
/* Tabelle: Zeilen 28px (27px Text + 1px Linie), ohne Rahmen – wie mit dem Lineal aufs Papier gezogen. */
.note__sheet .tx-table { font-size: 15px; line-height: 27px; background: transparent; border: 0; border-radius: 0; }
.note__sheet .tx-cell { padding: 0 var(--space-3) 0 0; border: 0; border-bottom: 1px solid var(--line); translate: 0 1px; }
.note__sheet .tx-cell--head { background: transparent; border-bottom-color: var(--line-strong); }
/* Formel als Block: mittig auf zwei Zeilen (ganze Zeilen, wächst um 28). */
.note__sheet .tx-formula--block { margin: 0; padding: 0; min-height: calc(2 * var(--grid)); display: flex; align-items: center; justify-content: center; }
/* Bild im Text: genau lines-N Zeilen hoch, oben links eingepasst; die Unterschrift eine Zeile. */
.note__sheet .tx-figure { margin: 0; }
.note__sheet .tx-figure > img, .note__sheet .tx-figure > svg { height: calc(var(--lines, 8) * var(--grid)); width: auto; max-width: 100%; object-fit: contain; object-position: left top; display: block; }
/* Folie (slide): eine Seite aus dem Material, 640px breit, auf ganze Zeilen aufgerundet (4:3 → 480px → 18 Zeilen), darunter die Herkunft als Link in den Viewer. */
.block--slide .slide__img { display: block; width: 640px; max-width: 100%; height: calc(var(--lines, 18) * var(--grid)); box-sizing: border-box; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.block--slide .slide__img > img, .block--slide .slide__img > svg { display: block; width: 100%; height: auto; }
.slide__caption { height: var(--grid); font-size: 13px; line-height: var(--grid); color: var(--ink-3); translate: 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide__caption a { color: var(--ink-2); text-decoration: none; }
.slide__caption a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.slide__caption .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
/* Platz (blank): leere Rasterzeilen; am Blockrand die Knöpfe „+ 4 Zeilen“, „− 4 Zeilen“, „Achsen“ (Hover oder gewählt). */
.block--blank { height: calc(var(--lines, 4) * var(--grid)); }
.blank__tools { position: absolute; top: 0; right: 0; display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--bg-3); box-shadow: var(--shadow-1); opacity: 0; transition: opacity 160ms ease-out; z-index: 3; }
.block:hover .blank__tools, .block.is-selected .blank__tools { opacity: 1; }
.blank__tools .btn { height: 24px; padding: 0 var(--space-2); font-size: 12px; }
.blank__tools .btn[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }
/* Achsen: ein Koordinatensystem im Raster – x-Achse unten, y-Achse links, mit Pfeilen (Linien in Prozent, Pfeile als marker). */
.blank__axes { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ink-2); }
.block--blank.has-axes .blank__axes { display: block; }
.blank__axes line { stroke: currentColor; stroke-width: 1.5; }
.blank__axes .axis-head { fill: currentColor; }
/* Handschrift: eine SVG-Ebene je Block, über dem Block und über den Rand nach rechts (das ganze Blatt breit, Koordinaten in Pixeln
   ab der linken oberen Ecke des Blocks; die Ebene beginnt 56px links davon, viewBox -56 0 1120 H). Sie verschiebt sich mit dem Block. */
.block__ink { position: absolute; left: calc(-2 * var(--grid)); top: 0; width: 1120px; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.note--pen .block__ink, .note--marker .block__ink, .note--eraser .block__ink { pointer-events: auto; touch-action: none; }
.note--pen .note__sheet, .note--marker .note__sheet { cursor: crosshair; }
.note--eraser .note__sheet { cursor: cell; }
/* Striche: fünf Stärken XS · S · M · L · XL (Stift 1 · 1.6 · 2.4 · 3.6 · 5px, Marker 8 · 10 · 14 · 20 · 28px), Stift mit Druck (die App
   schreibt die Umrisslinie als gefüllten Pfad, stroke--fill), Marker halbtransparent.
   Farben: ink · gold · royal · danger · success · orange; ink ist im Dunkelmodus hell (var(--ink)). Keine weiteren Formen. */
.stroke { fill: none; stroke: var(--stroke, var(--ink)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stroke--ink { --stroke: var(--ink); }
.stroke--gold { --stroke: var(--gold); }
.stroke--royal { --stroke: var(--royal); }
.stroke--danger { --stroke: var(--danger); }
.stroke--success { --stroke: var(--success); }
.stroke--orange { --stroke: var(--tx-orange); }
.stroke--xs { stroke-width: 1; } .stroke--s { stroke-width: 1.6; } .stroke--l { stroke-width: 3.6; } .stroke--xl { stroke-width: 5; }
.stroke--fill { stroke: none; fill: var(--stroke, var(--ink)); }
.stroke--marker { stroke-width: 14; opacity: 0.28; }
.stroke--marker.stroke--xs { stroke-width: 8; } .stroke--marker.stroke--s { stroke-width: 10; } .stroke--marker.stroke--l { stroke-width: 20; } .stroke--marker.stroke--xl { stroke-width: 28; }
/* Anderswo geändert: ein anderes Gerät hat denselben Block geändert – Chip am Block mit „Übernehmen“. */
.block__remote { position: absolute; top: 2px; right: 0; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: var(--radius-md); background: var(--bg-3); box-shadow: var(--shadow-1); }
.block__remote .chip { height: 22px; font-size: 11px; }
.block__remote .btn { height: 22px; padding: 0 var(--space-2); font-size: 12px; }
/* Leiste: die Gruppen des Karten-Editors ohne Lernen, dazu Zeichnen (Stift · Marker · Radierer als Toggle, Farbe, Stärke), Platz, Folie,
   rechts Rückgängig/Wiederholen; am iPhone angedockt wie im Karten-Editor (Medix.dock). Mit Maus (note.is-pointer, Medix.note) ist
   Zeichnen ausgeblendet, solange „Maus schreibt“ aus ist (note--mouse-draws). Platz für die Aufnahme (25c): tool-group--audio. */
.note.is-pointer:not(.note--mouse-draws) .tool-group--draw > :not(.pop--tools) { display: none !important; }   /* nur das Werkzeug-Menü bleibt: dort steht „Maus schreibt“ */
.tool-group--draw .pen, .tool-group--draw .width { width: 18px; height: 18px; }
/* Zeichen-Leiste: Ist ein Werkzeug aktiv (note.is-drawing), zeigt die Leiste nur Zeichnen – die drei Werkzeuge, die sechs Farben und
   S · M · L in der Zeile (draw-inline), Rückgängig/Wiederholen und „Fertig“ (zurück zum Tippen). Die Menüs Farbe/Werkzeug sind dann zu. */
.draw-inline { display: none; align-items: center; gap: 2px; }
.note.is-drawing .draw-inline { display: flex; }
.note.is-drawing .note__bar > :not(.tool-group--draw):not(.tool-group--end), .note.is-drawing .tool-group--draw > .pop { display: none !important; }
.note.is-drawing .tool-group--draw { flex: 1; }
.draw-inline .pens, .draw-inline .widths { padding: 0 2px; gap: 6px; }
.draw-inline .pen, .draw-inline .width { width: 22px; height: 22px; }
.draw-done { height: 28px; padding: 0 var(--space-3); font-size: 13px; margin-left: auto; }
/* Platz und Folie: Knopf mit Wort ab iPad (from-pad), am iPhone nur das Icon. */
.tool--word { height: var(--control-sm); padding: 0 var(--space-2); gap: 4px; font-size: 13px; color: var(--ink-2); }
.tool--word .icon { width: 20px; height: 20px; }
/* Lange Foliensätze: Folien-Blöcke werden erst gezeichnet, wenn sie ins Bild kommen (Höhe ist bekannt: lines-N). */
.block--slide { content-visibility: auto; contain-intrinsic-height: auto calc((var(--lines, 18) + 1) * var(--grid)); }
.tool-group--draw .pop > summary { gap: 2px; }
.pens { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.pen { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; background: var(--pen, var(--ink)); box-shadow: inset 0 0 0 2px var(--bg-3); cursor: pointer; }
.pen.is-active { border-color: var(--gold); }
.pen--ink { --pen: var(--ink); }
.pen--gold { --pen: var(--gold); }
.pen--royal { --pen: var(--royal); }
.pen--danger { --pen: var(--danger); }
.pen--success { --pen: var(--success); }
.pen--orange { --pen: var(--tx-orange); }
.widths { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.width { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 2px solid transparent; background: transparent; cursor: pointer; }
.width i { display: block; border-radius: 50%; background: var(--ink-2); }
.width--xs i { width: 2px; height: 2px; }
.width--s i { width: 4px; height: 4px; }
.width--m i { width: 7px; height: 7px; }
.width--l i { width: 10px; height: 10px; }
.width--xl i { width: 14px; height: 14px; }
.width.is-active { border-color: var(--gold); }
.width.is-active i { background: var(--gold-ink); }
.draw-switches { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--line); }
.draw-switches label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; font-size: 14px; }
/* Lesen: Papier, Text, Folien, Tinte – keine Leiste, keine Griffe, kein Fuß. Vorgabe am iPhone (Knopf „Bearbeiten“), sonst Bearbeiten. */
.note.is-reading .note__bar, .note.is-reading .block__handle, .note.is-reading .blank__tools, .note.is-reading .block__remote, .note.is-reading .note-paper { display: none; }
.note.is-reading .block.is-selected::before { display: none; }
/* Fuß: Speicherstand links („Gespeichert 08:31“ · „Speichert …“ · Chip warn „3 Änderungen nicht gesichert“), rechts der Platz für den Player (25c). */
.note__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.note__foot .chip { height: 24px; font-size: 11px; }
.note__foot .icon { width: 16px; height: 16px; }
.note__foot .is-saving { color: var(--ink-3); }
/* Speicherstand ist ein ruhiger, statischer Hinweis „Live gespeichert“ – er blinkt und wechselt nicht bei jedem Speichern; nur ein Fehler (Chip warn) tritt hervor. */
.note__foot-player { flex: 1; }
/* Aufnahme in der Notiz ist unauffällig: die Pille in der Leiste (`.note__bar .audio`, `.nb__right .audio`, `.nb-rec-slot .audio`) bleibt neutral – kein Rot, keine Füllung, kein Pulsieren; nur Punkt, Welle und Zeit. */
.note__bar .audio, .nb__right .audio, .nb-rec-slot .audio { background: transparent; border-color: var(--line); box-shadow: none; }
.note__bar .audio__rec, .nb__right .audio__rec, .nb-rec-slot .audio__rec { background: var(--ink-3); animation: none; }
.note__bar .audio__wave rect, .nb__right .audio__wave rect, .nb-rec-slot .audio__wave rect { fill: var(--ink-3); }
.note__bar .audio__time, .nb__right .audio__time, .nb-rec-slot .audio__time { color: var(--ink-2); }
.note__bar .audio .btn--icon, .nb__right .audio .btn--icon, .nb-rec-slot .audio .btn--icon { color: var(--ink-2); }
/* Sheet „Folie“: Materialien der Einheit und der Lehrveranstaltung, je Material die Seiten als Miniaturen; ein Tipp fügt die Seite ein. */
.slide-pick { display: flex; flex-direction: column; gap: var(--space-3); }
.slide-pick__mat { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.slide-pick__mat b { color: var(--ink); font-weight: 600; }
.slide-pick__pages { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px 0 var(--space-1); scroll-snap-type: x proximity; }
.slide-pick__pages .thumb { flex: none; width: 96px; scroll-snap-align: start; }
.slide-pick__pages .thumb.is-inserted { box-shadow: 0 0 0 2px var(--success); }
.slide-pick__pages .thumb.is-inserted::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
/* Von – Bis: zwei Zahlenfelder über den Miniaturen; ein Tipp auf eine Miniatur setzt Von, der zweite Bis; der Bereich ist markiert (is-in-range). */
.slide-pick__range { display: flex; align-items: flex-end; gap: var(--space-3); }
.slide-pick__range .field { flex: 0 0 96px; }
.slide-pick__range .slide-pick__count { flex: 1; padding-bottom: 10px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.slide-pick__pages .thumb.is-in-range { box-shadow: 0 0 0 2px var(--gold); }
/* Anschlüsse der Notiz: „Notiz“ im Kopf der Einheit (btn--secondary btn--sm, Icon pen) und in der laufenden Einheit auf Heute
   (slot__note in der Zeile slot__sub neben dem Ort-Chip – der Chip „Jetzt“ bleibt rechts). */
.slot__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.slot__note { height: 24px; padding: 0 8px; font-size: 12px; gap: 4px; }
.slot__note .icon { width: 16px; height: 16px; }
/* Lernziele eingeklappt als Fortschrittsmesser: eine Zeile mit Balken (sitzen = success, im Aufbau = gold, neu = Spur) und Satz,
   rechts „Alle anzeigen“ (offen: „Weniger“); ein natives details, die Liste darunter. */
.objectives-fold > summary { list-style: none; cursor: pointer; }
.objectives-fold > summary::-webkit-details-marker { display: none; }
.objectives-meter { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-1); border: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.objectives-meter .meter { width: 120px; flex: none; }
.objectives-meter .meter__done { fill: var(--success); }
.objectives-meter .meter__building { fill: var(--gold); }
.objectives-meter__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objectives-meter__text b { color: var(--ink); font-weight: 600; }
.objectives-meter__text span { white-space: nowrap; }   /* beim Umbruch bleibt „1 neu“ zusammen */
.objectives-meter__toggle { flex: none; }
.objectives-meter__toggle .icon { transition: rotate 160ms ease-out; }
.objectives-fold[open] > summary .objectives-meter__toggle .icon { rotate: 180deg; }
.objectives-fold .fold-off, .objectives-fold[open] .fold-on { display: none; }
.objectives-fold[open] .fold-off { display: inline; }
.objectives-fold[open] > summary { margin-bottom: var(--space-3); }
@container (max-width: 479px) { .objectives-meter { flex-wrap: wrap; } .objectives-meter .meter { width: 100%; order: 3; } .objectives-meter__text { white-space: normal; } }
.audio { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--radius-pill); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.audio__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
/* <svg class="audio__wave" width="38" height="20"><rect x="0" y="7" width="3" height="6" rx="1.5"/>…</svg> – Höhen als Attribute. */
.audio__wave { display: block; width: 38px; height: 20px; flex: none; }
.audio__wave rect { fill: var(--gold); }
.audio__time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.audio--done .audio__rec { display: none; }
.audio--done .audio__wave rect { fill: var(--ink-3); }
.audio--done .audio__wave rect.is-played { fill: var(--gold); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.note__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.note__foot .chip { height: 24px; font-size: 11px; }

/* ---------- Bewegung: Hover nur mit Maus ---------- */
/* Keine Blende beim Seitenwechsel (keine View Transitions): der Inhalt blendet beim Laden einmal ein (.content, fade-in 280ms), sonst nichts. */
@media (hover: hover) and (pointer: fine) {
  .row--link, .course, .slot, .card--link { transition: background-color 160ms ease-out, transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease-out; }
  .card--link:hover, .slot--link:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn--primary:hover { box-shadow: var(--shadow-gold); }
}

/* =====================================================================
   Text (Medix-Text): ein Textmodell für Karten, Notizen, Lernziele und
   Erklärungen. Der Server rendert das JSON-Dokument zu diesem HTML.
   Stile sind Formatvorlagen (tx-h1 … tx-small), direkte Formatierung
   kommt immer aus Paletten (Farbe, Fläche, Markierung, Schrift, Größe,
   Zeilenabstand, Einzug) – nie als freier Wert. Guideline: Text.
   ===================================================================== */
.text { color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 23px; }
/* In der Karteikarte ist der Text so groß wie die Antwort. */
.flashcard .text { font-size: 17px; line-height: 26px; }

/* ---------- Stile (Formatvorlagen) ---------- */
.tx-p { margin: 0; }
.tx-h1, .tx-h2, .tx-h3 { margin: 0; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 600; color: var(--ink); }
.tx-h1 { font-size: 22px; line-height: 28px; }
.tx-h2 { font-size: 18px; line-height: 24px; }
.tx-h3 { font-size: 16px; line-height: 22px; }
.tx-quote { margin: 0; padding: var(--space-3) var(--space-5); border-left: 2px solid var(--gold-line); font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-style: italic; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.tx-memo { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--ink); }
.tx-hint { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.tx-caption { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.tx-small { margin: 0; font-size: 13px; line-height: 18px; }

/* ---------- Ausrichtung, Einzug, Zeilenabstand, Tab ---------- */
.tx-left { text-align: left; } .tx-center { text-align: center; } .tx-right { text-align: right; } .tx-justify { text-align: justify; }
.tx-indent-1 { margin-left: var(--space-6); } .tx-indent-2 { margin-left: var(--space-10); } .tx-indent-3 { margin-left: calc(3 * var(--space-6)); } .tx-indent-4 { margin-left: calc(4 * var(--space-6)); }
.tx-tight { line-height: 1.35; } .tx-normal { line-height: 1.5; } .tx-loose { line-height: 1.9; }
.tx-tab { display: inline-block; width: 48px; }

/* ---------- Auszeichnungen (Marks) ---------- */
.text b, .text strong { font-weight: 700; }
.text i, .text em { font-style: italic; }
.text u { text-decoration: underline; text-underline-offset: 2px; }
.text s { text-decoration: line-through; }
.text sub, .text sup { font-size: 0.75em; line-height: 0; }
.text code, .tx-code { font-family: var(--font-mono); font-size: 0.92em; padding: 1px 5px; border-radius: 6px; background: var(--bg-2); color: var(--ink); }
.text a { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }
.tx-font-serif { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; }
.tx-font-sans { font-family: var(--font-sans); }
.tx-font-mono { font-family: var(--font-mono); }
.tx-size-s { font-size: 0.85em; } .tx-size-m { font-size: 1em; } .tx-size-l { font-size: 1.25em; }
/* Farbe, Fläche und Markierung: nur Palettenwerte (tokens.json, Familie tx-…). */
.tx-color-gold { color: var(--tx-gold); }
.tx-color-royal { color: var(--tx-royal); }
.tx-color-green { color: var(--tx-green); }
.tx-color-orange { color: var(--tx-orange); }
.tx-color-red { color: var(--tx-red); }
.tx-color-violet { color: var(--tx-violet); }
.tx-color-teal { color: var(--tx-teal); }
.tx-color-brown { color: var(--tx-brown); }
.tx-bg-gold { background: var(--tx-gold-fill); }
.tx-bg-royal { background: var(--tx-royal-fill); }
.tx-bg-green { background: var(--tx-green-fill); }
.tx-bg-orange { background: var(--tx-orange-fill); }
.tx-bg-red { background: var(--tx-red-fill); }
.tx-bg-violet { background: var(--tx-violet-fill); }
.tx-bg-teal { background: var(--tx-teal-fill); }
.tx-bg-brown { background: var(--tx-brown-fill); }
.tx-mark-gold { background: var(--tx-gold-mark); }
.tx-mark-royal { background: var(--tx-royal-mark); }
.tx-mark-green { background: var(--tx-green-mark); }
.tx-mark-orange { background: var(--tx-orange-mark); }
.tx-mark-red { background: var(--tx-red-mark); }
.tx-mark-violet { background: var(--tx-violet-mark); }
.tx-mark-teal { background: var(--tx-teal-mark); }
.tx-mark-brown { background: var(--tx-brown-mark); }
.text span[class*="tx-bg-"], .text span[class*="tx-mark-"] { border-radius: 5px; padding: 1px 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Listen ---------- */
.tx-list { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.tx-list--bullet { list-style: disc; } .tx-list--ordered { list-style: decimal; }
.tx-list--letter { list-style: lower-alpha; } .tx-list--roman { list-style: lower-roman; }
.tx-list .tx-list { margin-top: var(--space-1); }
.tx-list--bullet .tx-list { list-style: circle; }
.tx-list--bullet .tx-list .tx-list { list-style: square; }
/* Höchstens drei Ebenen: der Editor bietet keine vierte an; kommt doch eine, rückt sie nicht weiter ein. */
.tx-list .tx-list .tx-list .tx-list { padding-left: 0; }
.tx-item { margin: 0; }
.tx-item::marker { color: var(--ink-3); }

/* ---------- Begriff-Liste ---------- */
/* Altbestand: Die Begriff-Liste entfällt (25.09.), Begriff und Erklärung stehen in einer zweispaltigen Tabelle ohne Linien
   (tx-table--plain). Die Regeln bleiben, damit alte Inhalte nicht kaputtgehen. */
.tx-terms { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-3); margin: 0; align-items: baseline; }
.tx-term { margin: 0; font-weight: 600; color: var(--ink); }
.tx-desc { margin: 0; color: var(--ink-2); }
.tx-terms--stack { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
.tx-terms--stack .tx-desc { padding-bottom: var(--space-2); }

/* ---------- Badge-Liste (die bewährte Kartenform) ---------- */
.tx-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tx-badge { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.tx-badge--gold { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }

/* ---------- Tabelle ---------- */
.tx-table-wrap { overflow-x: auto; }
.tx-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.tx-cell { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); vertical-align: top; text-align: left; }
.tx-cell--head { background: var(--bg-2); font-weight: 600; color: var(--ink); }
/* Ohne Linien (Formatierung der Tabelle): keine Fläche, kein Rahmen, kein Gitter – etwa für Begriff und Erklärung in zwei Spalten. */
.tx-table--plain { background: transparent; border: 0; border-radius: 0; }
.tx-table--plain .tx-cell { border: 0; padding-left: 0; }
.tx-table--plain .tx-cell--head { background: transparent; border-bottom: 1px solid var(--line); }
.tx-cell.tx-center { text-align: center; } .tx-cell.tx-right { text-align: right; }
.tx-cell.tx-bg-gold { background: var(--tx-gold-fill); }
.tx-cell.tx-bg-royal { background: var(--tx-royal-fill); }
.tx-cell.tx-bg-green { background: var(--tx-green-fill); }
.tx-cell.tx-bg-orange { background: var(--tx-orange-fill); }
.tx-cell.tx-bg-red { background: var(--tx-red-fill); }
.tx-cell.tx-bg-violet { background: var(--tx-violet-fill); }
.tx-cell.tx-bg-teal { background: var(--tx-teal-fill); }
.tx-cell.tx-bg-brown { background: var(--tx-brown-fill); }

/* ---------- Bild, Umfluss und Beschriftungen ---------- */
.tx-figure { margin: 0; }
.tx-figure img, .tx-figure svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--paper); }
.tx-figure--s { max-width: 180px; } .tx-figure--m { max-width: 320px; } .tx-figure--l { max-width: 480px; } .tx-figure--full { max-width: none; }
.tx-figure--left { float: left; margin: 0 var(--space-4) var(--space-3) 0; }
.tx-figure--right { float: right; margin: 0 0 var(--space-3) var(--space-4); }
.tx-figure--center { margin-left: auto; margin-right: auto; }
.tx-figure--center .tx-caption { text-align: center; }
.tx-figure--inline { display: inline-block; vertical-align: middle; margin: 0 var(--space-1); }
.tx-figure .tx-caption { padding-top: var(--space-1); }
.text::after { content: ""; display: block; clear: both; }
/* Beschriftetes Bild: Lage je Beschriftung in Prozent, gesetzt von Medix.labels() über das CSSOM (nie style=). */
.tx-labeled { position: relative; display: block; }
.tx-label { position: absolute; left: var(--x, 0%); top: var(--y, 0%); transform: translate(-50%, -50%); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg-3); border: 1px solid var(--line-strong); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---------- Callout ---------- */
.tx-callout { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; }
.tx-callout--info { background: var(--royal-soft); border-color: var(--royal-soft); }
.tx-callout--warning { background: var(--warn-soft); }
.tx-callout--success { background: var(--success-soft); }
.tx-callout--danger { background: var(--danger-soft); }
.tx-callout__kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tx-callout--info .tx-callout__kind { color: var(--royal); }
.tx-callout--warning .tx-callout__kind { color: var(--warn); }
.tx-callout--success .tx-callout__kind { color: var(--success); }
.tx-callout--danger .tx-callout__kind { color: var(--danger); }

/* ---------- Trenner und Code-Block ---------- */
.tx-divider { height: 1px; border: 0; background: var(--line); margin: var(--space-4) 0; }
pre.tx-code { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-2); font-size: 13px; line-height: 20px; overflow-x: auto; white-space: pre; }

/* ---------- Lücke: verdeckt und aufgedeckt ----------
   Die Lücke steht im Fließtext wie ein Wort: sie bricht mit dem Text um, die Zeilenhöhe bleibt, wie sie ist. Beide Zustände sind gleich
   breit und gleich hoch – verdeckt ist der Text nur unsichtbar (transparent), er nimmt seinen Platz weiter ein, nichts bricht neu um.
   Die Fläche ist so hoch wie die Schrift (kein Polster oben/unten); die Unterlinie liegt innen (box-shadow), damit zwei Zeilen einer
   Lücke einander nie überschneiden. Markup (Renderer, in beiden Zuständen gleich, nur is-open wechselt; den Hinweis gibt es nur, wenn
   die Lücke einen hat): <span class="tx-gap" data-gap="1"><span class="tx-gap__hint">C…</span><span class="tx-gap__text">Cristae</span></span>
   Der Hinweis (oder die Punkte) liegt über dem Anfang der verdeckten Fläche und nimmt keinen Platz. */
.tx-gap { position: relative; border-radius: var(--radius-sm); background: var(--bg-2); box-shadow: inset 0 -1.5px 0 var(--line-strong); color: transparent; padding: 0 7px; margin: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tx-gap.is-open { background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 -1.5px 0 var(--gold-line); }
.tx-gap::before { content: "···"; position: absolute; left: 7px; top: 0; line-height: inherit; letter-spacing: 0.1em; color: var(--ink-3); pointer-events: none; }
.tx-gap.is-open::before, .tx-gap:has(> .tx-gap__hint)::before { content: none; }
.tx-gap:not(.is-open) > .tx-gap__text { color: transparent; }
/* Der Hinweis steht im Markup VOR dem Text: als absolutes Kind am Ende würde er beim Zeilenumbruch nach der Lücke ein leeres Pill-Stück
   in der nächsten Zeile erzeugen (Platzhalter des absoluten Elements + box-decoration-break: clone). */
.tx-gap > .tx-gap__hint { position: absolute; left: 7px; top: 0; line-height: inherit; pointer-events: none; }
.tx-gap.is-open > .tx-gap__hint { visibility: hidden; }
/* Der Hinweis: kursiv, in Klammern, in ink-2 – er liest sich nie wie der Anfang des gesuchten Wortes und wird nie abgeschnitten:
   Eine Lücke mit Hinweis ist ein inline-grid, Hinweis und Text liegen in derselben Zelle, die Lücke ist so breit wie das Breitere
   von beiden – verdeckt und aufgedeckt gleich (nur is-open wechselt); dafür bricht sie innen um statt mit dem Fließtext. */
.tx-gap__hint { font-style: italic; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.tx-gap__hint::before { content: "("; }
.tx-gap__hint::after { content: ")"; }
.tx-gap:has(> .tx-gap__hint) { display: inline-grid; grid-template-columns: minmax(0, auto); vertical-align: baseline; }
.tx-gap:has(> .tx-gap__hint) > .tx-gap__hint, .tx-gap:has(> .tx-gap__hint) > .tx-gap__text { grid-area: 1 / 1; }
.tx-gap:has(> .tx-gap__hint) > .tx-gap__hint { position: static; }
.cardrow__q .tx-gap:has(> .tx-gap__hint) { display: inline; }
/* Ganzer Block: der Hinweis liegt oben links über der verdeckten Fläche. */
.tx-gap-block { position: relative; display: block; border-radius: var(--radius-sm); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: transparent; padding: var(--space-2) var(--space-3); }
.tx-gap-block.is-open { background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-line); }
.tx-gap-block > .tx-gap__hint { position: absolute; left: var(--space-3); top: var(--space-2); }
.tx-gap-block.is-open > .tx-gap__hint { visibility: hidden; }
/* Badge, Zelle und Bildbeschriftung behalten Form, Rand und Polster; ohne Punkte, aufgedeckt nur Farbe und Fläche. */
.tx-badge.tx-gap, .tx-cell.tx-gap, .tx-label.tx-gap { color: transparent; margin: 0; box-shadow: none; }
.tx-badge.tx-gap::before, .tx-cell.tx-gap::before, .tx-label.tx-gap::before { content: none; }
.tx-badge.tx-gap { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 16px; }
.tx-cell.tx-gap { border: 1px solid var(--line); border-radius: 0; padding: var(--space-2) var(--space-3); }
.tx-label.tx-gap { position: absolute; border: 1px solid var(--line-strong); padding: 3px 8px; background: var(--bg-3); }
.tx-badge.tx-gap.is-open, .tx-cell.tx-gap.is-open, .tx-label.tx-gap.is-open { color: var(--gold-ink); background: var(--gold-soft); }
.tx-badge.tx-gap.is-open, .tx-label.tx-gap.is-open { border-color: var(--gold-line); }
/* In der Zelle wechselt nur die Fläche – die Zelle behält Rahmen und Rundung der Tabelle, nichts liegt darüber. */
.tx-cell.tx-gap.is-open { box-shadow: none; }

/* ---------- Formel (KaTeX) ----------
   Den Satz macht KaTeX am Server; sein Stylesheet und seine Schriften bringt die App mit (public/katex/<Version>/, vor /styles.css
   eingebunden). Das Design-System übersteuert nur: Größe, Block, Lücke, Fehler. Farbe erbt die Formel vom Text.
   Größe: KaTeX setzt .katex auf 1.21em. Gemessen an den echten Schriften passt das nur zur x-Höhe der Manrope (1.23), Ziffern und
   Großbuchstaben stünden dann 13 % über dem Text daneben; zur Fraunces der Frage ist es durchweg zu groß (x-Höhe 1.11, Ziffern 1.06).
   Deshalb 1.15em in der Sans (Antwort, Text, Tabelle) und 1.08em in der Serif (Frage, Überschriften, Zitat). */
/* Eine Formel im Text bleibt in ihrem Kasten: \smash oder \mathllap dürfen nicht über den Text daneben ragen. */
.tx-formula:not(.tx-formula--block) { display: inline-block; clip-path: inset(0); }
.tx-formula .katex { font-size: 1.15em; }
.page-head .h1 .tx-formula .katex { font-size: 1.08em; }
:is(.tx-h1, .tx-h2, .tx-h3, .tx-quote, .tx-font-serif, .block--heading) .tx-formula .katex { font-size: 1.08em; }
/* Block: zentriert, Abstand wie ein Absatz; ist er breiter als die Karte, scrollt er in sich (dann steht der Anfang links), nie die Seite.
   contain: inline-size hält seine Breite aus der Berechnung der Spalte heraus. */
.tx-formula--block { display: block; contain: inline-size; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: var(--space-1) 0; text-align: center; scrollbar-width: thin; }
.tx-formula--block .katex-display { margin: 0; }
/* Legende unter der Formel (tx-table--legend; der Renderer setzt sie bei einer Tabelle ohne Linien und Kopf, jede Zeile genau zwei Zellen, die erste nur Formel-Zeichen).
   Mittig unter der Formel, ohne Linie: die Einträge laufen nebeneinander und brechen um (höchstens fünf, Regel 21). Das Zeichen steht als kleine Kachel (--bg-2,
   Tinte, wie die Formel gesetzt), die Bedeutung daneben gedämpft. Kein Gold, keine Linie. Gleich in Karte, Lernmodus und Editor; die Tabelle bleibt eine Tabelle
   (gleiche Zellen, bearbeitbar), nur die Anordnung ist Flex. In der Kartenliste bleibt sie ausgeblendet (.cardrow weiter oben). */
.tx-formula--block + .tx-table-wrap:has(> .tx-table--legend) { margin-top: var(--space-2); }
.tx-table-wrap:has(> .tx-table--legend) { overflow: visible; }
.tx-table--legend { display: block; width: auto; background: none; border: 0; font-size: 13px; line-height: 18px; }
.tx-table--legend colgroup { display: none; }
.tx-table--legend tbody { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.tx-table--legend tr { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.tx-table--legend .tx-cell { display: block; width: auto !important; padding: 0; border: 0; color: var(--ink-2); translate: none; }
.tx-table--legend .tx-cell:first-child { min-width: 28px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg-2); color: var(--ink); text-align: center; white-space: nowrap; }
.tx-table--legend .tx-formula .katex { font-size: 1.05em; }
.tx-table--legend .tx-cell.selectedCell { padding: 3px 8px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--royal); background: var(--royal-soft); }
/* Gruppenzahl an der Lücke im Editor (tx-gap__group): ein kleiner goldener Kreis (16px, passt in die Schrifthöhe des Pills) rechts im Pill, mit 32px Tippfläche darum
   (Pseudo-Element); ein Tipp schaltet die Gruppe weiter – 1, 2, 3 … keine (Medix.gapGroups). Sieht nicht wie Text aus, sondern wie ein Knopf. */
.tx-gap__group { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; margin-right: -2px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 700 10px/1 var(--font-sans); letter-spacing: 0; vertical-align: 2px; cursor: pointer; }
.tx-gap__group::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.tx-gap__group:hover { background: var(--gold-strong); }
/* Die Zahl fließt im Text mit: sie steht nach dem letzten Wort der Lücke, auch wenn die Lücke über mehrere Zeilen läuft. */
.tx-gap__group { vertical-align: middle; }
/* Lücke über einer Formel: im Text die normale Lücke um die Hülle (tx-gap > tx-gap__text > span.tx-formula) – verdeckt so groß wie
   die Formel, auch bei Brüchen; als Block wie am Absatz direkt auf der Hülle (div.tx-formula.tx-formula--block.tx-gap-block, Hinweis
   darin). Verdeckt bleibt der Platz, nur der Inhalt ist unsichtbar. */
.tx-gap > .tx-gap__text > .tx-formula { display: inline-block; }
/* Eine Formel-Lücke ist ein Stück (inline-block), damit die Fläche mit Bruch und Wurzel mitwächst; ihre Zeile wird so hoch wie die Formel. */
.tx-gap:has(> .tx-gap__text > .tx-formula) { display: inline-block; padding: 1px 7px; vertical-align: baseline; }
.tx-gap-block:not(.is-open) > :not(.tx-gap__hint) { visibility: hidden; }
.tx-formula--block.tx-gap-block { padding: var(--space-2) var(--space-3); }
/* Formel mit Fehler: der Quelltext in Mono, ruhig markiert – gestrichelte Unterlinie in warn, die Meldung von KaTeX im title. */
code.tx-formula.is-error { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); border-bottom: 1.5px dashed var(--warn); white-space: pre-wrap; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
code.tx-formula.tx-formula--block.is-error { display: block; contain: none; overflow: visible; width: fit-content; max-width: 100%; margin-inline: auto; padding: var(--space-2) var(--space-3); text-align: start; }

/* ---------- Abstände zwischen den Blöcken ----------
   Steht bewusst nach den Stilen: die Stile setzen margin:0, hier bekommt jeder Block seinen Abstand zum Vorgänger. */
.text > * + * { margin-top: var(--space-4); }
.text > :is(.tx-h1, .tx-h2, .tx-h3) + * { margin-top: var(--space-2); }
.text > * + :is(.tx-h1, .tx-h2, .tx-h3) { margin-top: var(--space-6); }
/* Alles mit eigener Fläche steht freier: Zitat, Merksatz, Callout, Tabelle, Bild, Listen, Code. */
.text > * + :is(.tx-quote, .tx-memo, .tx-callout, .tx-table-wrap, .tx-figure, .tx-badges, .tx-terms, .tx-list, pre.tx-code),
.text > :is(.tx-quote, .tx-memo, .tx-callout, .tx-table-wrap, .tx-figure, .tx-badges, .tx-terms, .tx-list, pre.tx-code) + * { margin-top: var(--space-5); }
.text > :is(.tx-figure--left, .tx-figure--right, .tx-figure--inline) + * { margin-top: var(--space-3); }
.text > .tx-caption + *, .text > * + .tx-caption { margin-top: var(--space-2); }

/* ---------- Hilfsklassen ---------- */
.row-flex { display: flex; align-items: center; gap: var(--space-3); }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.skeleton { background: var(--bg-2); border-radius: var(--radius-sm); min-height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Editor in Notiz und Karte (Runde 13, Nachtrag Nachbessern 09.10., Brücke; Punkte für den Design-Chat) ----------
   Unterstrichen oder durchgestrichen auf hoch- und tiefgestellter Schrift (gemeldet e1cc0a20): Die Linie eines u bzw. s
   liegt auf der Grundlinie des Absatzes; unter einer tiefgestellten Ziffer spart der Browser sie aus (skip-ink), sie war
   unsichtbar. Als inline-block bekommt sub/sup die Linie des Vorfahren nicht mehr und zieht eine eigene, unter bzw. durch
   die kleine Schrift; gespeichert und gesetzt wird dasselbe (<u><sub>). */
:is(u, s) :is(sub, sup) { display: inline-block; }
u :is(sub, sup) { text-decoration-line: underline; text-underline-offset: 2px; }
s :is(sub, sup) { text-decoration-line: line-through; }
u s :is(sub, sup), s u :is(sub, sup) { text-decoration-line: underline line-through; }
/* Einzug im Textkasten der Notiz (gemeldet ddac1e53): „nie Ränder im Text“ (NotizBlatt) nahm auch den Einzug weg; die
   Werte sind die aus „Ausrichtung, Einzug“ oben. */
.nb .nb-box__text.text > .tx-indent-1 { margin-left: var(--space-6); }
.nb .nb-box__text.text > .tx-indent-2 { margin-left: var(--space-10); }
.nb .nb-box__text.text > .tx-indent-3 { margin-left: calc(3 * var(--space-6)); }
.nb .nb-box__text.text > .tx-indent-4 { margin-left: calc(4 * var(--space-6)); }
/* Badge-Liste im Textkasten (gemeldet 4a75cb19): Listen im Kasten sind Block mit Einzug (NotizBlatt); als Block stellten
   Chrome und WebKit den Cursor in einem neuen, leeren Badge ans Ende des vorigen, und man schrieb dort weiter. Die
   Badge-Liste bleibt, was sie in Karte und Editor ist: eine Zeile aus Chips. */
.nb-box__text ul.tx-badges { display: flex; padding-left: 0; }

/* ---------- Editor in Notiz und Karte (Runde 13, Nachtrag Nachbessern 09.10. abends, Brücke; Punkte für den Design-Chat) ----------
   Tabellen-Leiste der Notiz (gemeldet 7e66b6cd): Sie steht nur, solange Cursor oder Zellauswahl in einer Tabelle des aktiven
   Kastens liegen (has-table, public/editor.js), und liegt dann über dem oberen Rand der Bühne, statt sie nach unten zu schieben;
   Lage und Breite der Bühne setzt der Editor über das CSSOM (--nb-sub-top, --nb-sub-left, --nb-sub-width). In der Karte bleibt
   sie die zweite Leiste im Fluss (13b).
   Im Code-Block sind alle Auszeichnungen gedämpft, samt dem Markierer (geteilter Knopf Farbe), bleiben aber antippbar (gemeldet
   7bd38a90): Ein Tipp sagt im Toast, warum nichts geschieht; deshalb dämpft hier aria-disabled, nicht is-disabled. */
.nb > .editor__sub { position: absolute; z-index: 30; top: var(--nb-sub-top, 0px); left: var(--nb-sub-left, 0px); width: var(--nb-sub-width, 100%); box-shadow: var(--shadow-1); }
:is(.note__bar, .editor__toolbar) [data-group="color"] summary[aria-disabled="true"], :is(.note__bar, .editor__toolbar, .ctx) .btn[aria-disabled="true"] { opacity: var(--disabled); }

/* =====================================================================
   Seitengerüst und breite Screens
   Gerüst jeder Seite (src/core/layout.js):
     <body>
       <aside class="sidebar glass">…</aside>        ab bp-tablet sichtbar (links; Handy quer: rechts)
       (keine Kopfzeile: Unterseiten beginnen im Inhalt mit page-head – Zurück-Link, Titel, Aktionen)
       <main class="content content--today">…</main>  content--alone: Seiten ohne Seitenleiste, mittig
       <nav class="tabbar glass">…</nav>              nur am Handy hoch sichtbar
       <div class="toast-host">…</div>
   Layout hängt nur an Breite und Höhe (Media Queries unten). Dichte und Hover
   hängen am Eingabegerät (hover/pointer), nie am User-Agent; data-device
   am <html> (Medix.device()) ist für Inhalte da, z. B. Pencil- oder
   Kurzbefehl-Hinweise, und für die Tastaturhinweise (.kbd-hint).
   ===================================================================== */

/* ---------- Suche: eine schwebende Ebene, überall dieselbe ----------
   Genau eine Suche in Medix, keine eigene Seite: <section class="search-layer glass"> im body (in einem Rahmen: im [data-sheet-host],
   mit search-layer--absolute), davor <div class="scrim search-scrim">. Zwei Einstellungen: der Bereich (wo) als Chip im Feld –
   ein Tipp weitet auf „alles“ – und die Art (was) als Segmented Control darunter. Öffner: [data-search-open] (Tab-Bar, Seitenleiste,
   Lupe im Seitenkopf mit data-scope/data-scope-kind), ⌘K/Strg+K; Medix.search() verdrahtet alles und feuert medix:search.
   Handy: Sheet von unten bis knapp unter die Safe-Area, Feld oben, Tastatur offen. Ab 744px: zentrierte Glas-Tafel (content-max).
   Glas nur hier; Gold nur für den Fokus des Felds. Kein Serif-Titel – das Feld ist der Kopf. */
.search-scrim { z-index: 45; }
.search-layer {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: max(var(--space-3), env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0;
  transform: translateY(100%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease-out, visibility 0s linear 240ms;
}
.search-layer.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.search-layer--absolute { position: absolute; }
.search-layer__head { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3); }
.search-layer__field { display: flex; align-items: center; gap: var(--space-2); }
.search-layer__field .search { flex: 1; min-width: 0; height: var(--control-lg); padding: 0 var(--space-3) 0 10px; gap: 6px; background: var(--bg-1); }
.search-layer__cancel { flex-shrink: 0; padding: 0 var(--space-1); font-size: 14px; }
.search-layer .search-layer__esc { display: none; flex-shrink: 0; }
.search .chip--scope { flex-shrink: 0; max-width: 44%; height: 26px; padding: 0 6px 0 8px; gap: 4px; cursor: pointer; background: var(--bg-2); border-color: var(--line-strong); color: var(--ink); font-size: 12px; overflow: hidden; }
.search .chip--scope > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search .chip--scope .icon { width: 14px; height: 14px; flex-shrink: 0; }
.search .chip--scope:hover { background: var(--bg-3); }
.search .chip--scope[hidden] { display: none; }
/* Ist der Kopf schmal (Handy), zeigt der Chip statt des Namens nur die Art des Bereichs („Einheit“, „Fach“) – der Name steht ohnehin auf der Seite dahinter. */
.search-layer__head { container-type: inline-size; }
.search .chip--scope .chip__kind { display: none; }
@container (max-width: 479px) { .search .chip--scope .chip__text, .search .chip--scope > :last-child { display: none; } .search .chip--scope .chip__kind { display: inline; } .search .chip--scope { padding-right: 8px; } }
.search__clear { flex-shrink: 0; width: 28px; height: 28px; margin-right: -6px; color: var(--ink-3); }
.search__clear[hidden] { display: none; }
.search-layer .segmented { align-self: flex-start; max-width: 100%; }
.search-layer .segmented__item { flex: 0 1 auto; padding: 0 var(--space-2); font-size: 12px; }
.search-layer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.search-layer__body > .search-group[hidden] { display: none; }
.search-group { display: flex; flex-direction: column; gap: var(--space-2); }
.search-group .list__title { padding-bottom: 0; }
.search-group .list__title .btn--tertiary { height: 24px; padding: 0 var(--space-1); font-size: 12px; text-transform: none; letter-spacing: 0; }
.search-layer__empty { margin: 0; padding: var(--space-4) var(--space-1); font-size: 15px; line-height: 22px; color: var(--ink-2); }
.search-layer__empty[hidden] { display: none; }
/* Trefferzeile: eine Liste-Zeile (row) – Icon der Art, Titel mit fettem Treffer, Herkunft „Fach › Einheit“, rechts der Stand. */
.hit .row__title, .hit .row__sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hit__mark { background: none; color: inherit; font-weight: 700; }
.hit__origin .icon { width: 12px; height: 12px; vertical-align: -2px; margin: 0 2px; color: var(--ink-3); }
.hit__trail { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hit__trail .progress { width: 48px; }
.hit__trail .state { height: 22px; font-size: 11px; padding: 0 7px; }
.hit__trail .icon { width: 18px; height: 18px; color: var(--ink-3); }
.hit__trail--due { color: var(--ink); font-weight: 600; }
.search-layer .row__lead .icon { width: 20px; height: 20px; }
/* Ab 744px: zentrierte Tafel statt Sheet, Esc statt Abbrechen. */
@media (min-width: 744px) {
  .search-layer {
    top: 10vh; bottom: auto; left: 50%; right: auto; width: min(var(--content-max), calc(100% - 2 * var(--space-6))); max-height: 76vh;
    border-radius: var(--radius-xl); border-bottom: 1px solid var(--glass-stroke);
    transform: translate(-50%, 8px) scale(0.99); transition: transform 200ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease-out, visibility 0s linear 200ms;
  }
  .search-layer.is-open { transform: translate(-50%, 0) scale(1); }
  .search-layer__head { padding: var(--space-4) var(--space-5) var(--space-3); }
  .search-layer__body { padding: 0 var(--space-5) var(--space-5); }
  .search-layer__cancel { display: none; }
  .search-layer .segmented { align-self: stretch; }
  .search-layer .segmented__item { flex: 1; font-size: 14px; }
}
@media (min-width: 744px) and (hover: hover) and (pointer: fine) {
  .search-layer .search-layer__esc { display: inline-flex; }
}
body.has-search { overflow: hidden; }

/* ---------- Agenten-Verlauf (Mehr → Agenten): der Agent legt an, Jakob nimmt zurück ----------
   Neue Inhalte von Agenten gelten sofort. Jede Arbeit ist eine Lieferung (delivery): Zeit, Agent, Quelle, Zusammenfassung, Kosten;
   „Ansehen“ klappt die Stücke (piece) als Vorschau auf, „Rückgängig“ nimmt die ganze Lieferung zurück (Grund als Chips), je Stück
   „Passt nicht“. Zurückgenommenes bleibt gedimmt und durchgestrichen. Kein Gold hier; Rückgängig ruhig in danger. */
.deliveries { display: flex; flex-direction: column; gap: var(--space-3); }
.delivery { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.delivery > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); cursor: pointer; }
.delivery > summary::-webkit-details-marker { display: none; }
.delivery__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.delivery__meta .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.delivery__sum { font-size: 15px; line-height: 22px; color: var(--ink); padding-top: 2px; }
.delivery__meta .dot { width: 3px; height: 3px; color: var(--ink-3); }
.delivery__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 2px; }
.delivery__cost { font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.delivery__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.delivery__toggle .icon { width: 16px; height: 16px; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.delivery[open] .delivery__toggle .icon { transform: rotate(180deg); }
.delivery[open] .delivery__toggle .delivery__toggle-off, .delivery:not([open]) .delivery__toggle .delivery__toggle-on { display: none; }
.delivery__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.delivery__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.btn--undo { color: var(--danger); }
.btn--undo:hover { background: var(--danger-soft); color: var(--danger); }
.delivery.is-undone { opacity: 0.55; }
.delivery.is-undone .delivery__sum { text-decoration: line-through; }
.delivery.is-undone .pieces, .delivery.is-undone .diff { opacity: 0.7; }
.msg.is-undone { opacity: 0.55; }
.msg.is-undone .flashcard__question, .msg.is-undone .diff__side--after, .msg.is-undone .artifact__bar b { text-decoration: line-through; }
.cardrow.is-undone { opacity: 0.5; } .cardrow.is-undone .cardrow__q { text-decoration: line-through; }
.flashcard.is-undone .flashcard__question { text-decoration: line-through; color: var(--ink-3); }
/* Stücke: Karte klein (flashcard--mini, Antwort aufdeckbar), Lernziel als Satz, Dokument als Text mit „Mehr“, Artefakt im Rahmen. */
.pieces { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.piece { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius-md); }
.piece__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.piece__kind { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.piece__kind .icon { width: 14px; height: 14px; }
.piece__no { height: 26px; padding: 0 var(--space-2); font-size: 12px; color: var(--ink-3); }
.piece__no:hover { color: var(--danger); background: var(--danger-soft); }
.piece.is-undone { opacity: 0.5; }
.piece.is-undone .flashcard__question, .piece.is-undone .piece__text, .piece.is-undone .objective__text { text-decoration: line-through; }
.piece__text { font-size: 15px; line-height: 22px; }
.piece__more { padding-top: var(--space-1); }
.piece__more > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.piece__more > summary::-webkit-details-marker { display: none; }
.piece__more[open] > summary .piece__more-off, .piece__more:not([open]) > summary .piece__more-on { display: none; }
.piece__more > summary .icon { width: 14px; height: 14px; transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .piece__more[open] > summary .icon { transform: rotate(180deg); }
.piece__more > .text { padding-top: var(--space-2); }
/* Karte klein: dieselbe Karteikarte, kompakter; Tipp deckt die Antwort auf (Medix.study). */
.flashcard.flashcard--mini { min-height: 0; height: auto; flex: none; padding: var(--space-3) var(--space-4); gap: var(--space-2); box-shadow: none; background: var(--bg-3); border-radius: var(--radius-lg); }
.flashcard--mini .flashcard__question, .flashcard--mini .flashcard__answer { font-size: 15px; line-height: 22px; }
.flashcard--mini .flashcard__tap { padding-top: 0; font-size: 12px; }
.flashcard--mini .flashcard__foot { display: none !important; }
.flashcard--mini .flashcard__answer-label { color: var(--ink-3); }
/* Vorher/Nachher: zwei Stände nebeneinander (ab 560px Containerbreite), Etikett oben; gilt für Karten, Sätze, Texte, Artefakte. */
.diff { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); container-type: inline-size; }
.diff__side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.diff__label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.diff__side--before { opacity: 0.7; }
.diff__side--after .diff__label { color: var(--ink-2); }
.diff-wrap { container-type: inline-size; }
@container (min-width: 560px) { .diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Grund fürs Zurücknehmen: Chips in einem Sheet oder Popover – doppelt · falsch · zu viel Detail · nicht prüfungsrelevant · anders. */
.reasons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reasons .chip--action.is-active { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
/* Rückgängig-Zeile unter Nachrichten und Stücken: leise, links das Ergebnis, rechts Rückgängig in danger. */
.undo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-1); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.undo-row .btn { height: 28px; padding: 0 var(--space-2); font-size: 12px; gap: 4px; }
.undo-row .btn .icon { width: 14px; height: 14px; }
/* Heute: eine Zeile je frischer Lieferung (verschwindet nach einem Tag oder einem Tipp). */
.agent-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.agent-row__lead { color: var(--ink-2); display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-2); }
.agent-row__text { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 20px; }
.agent-row__text small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.agent-row__actions { display: flex; gap: 0; margin-left: auto; }
.agent-row__actions .btn { height: 32px; padding: 0 var(--space-2); font-size: 13px; }
/* Chip „Agent“ an Karten aus einer Lieferung – bis sie einmal gelernt sind. */
.chip--agent { background: var(--bg-2); color: var(--ink-2); border-color: var(--line-strong); }
.chip--agent .icon { width: 14px; height: 14px; }
.cardrow .chip--agent { height: 20px; font-size: 11px; padding: 0 6px; }
.cardrow__no { width: 28px; height: 28px; color: var(--ink-3); }
.cardrow__no:hover { color: var(--danger); background: var(--danger-soft); }
/* ---------- Dokument und Artefakt: eigene Seiten (öffnen aus der Material-Liste) ---------- */
.doc-view { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--content-max); margin: 0 auto; width: 100%; }
.doc-view .text.card { padding: var(--space-5) var(--space-5); }
.origin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.origin .chip { height: 24px; font-size: 11px; padding: 0 8px; }
.origin .chip .icon { width: 14px; height: 14px; }
/* Artefakt: interaktives HTML in einer Sandbox (iframe sandbox="allow-scripts"), nutzt Tokens und Klassen des Design-Systems und
   wechselt mit dem Theme (data-theme wird hineingereicht); Rahmen 16:10, darüber die Leiste mit Titel und Vollbild. */
.artifact { display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.artifact__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.artifact__bar b { color: var(--ink); font-weight: 600; }
.artifact__frame { position: relative; aspect-ratio: 16 / 10; background: var(--bg-0); }
.artifact__frame iframe, .artifact__frame .artifact__demo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.artifact.is-full { position: fixed; inset: 0; z-index: 60; border: 0; border-radius: 0; }
[data-sheet-host] .artifact.is-full { position: absolute; }
.artifact.is-full .artifact__frame { flex: 1; aspect-ratio: auto; }
.artifact--mini { max-width: 640px; } .artifact--mini .artifact__frame { aspect-ratio: 16 / 9; }
/* ---------- Erklären, das handelt: Nachrichten-Formen im Gespräch ----------
   Text (msg--ai), Fakten (msg--facts: Liste), Karten-Vorschau (msg--card: flashcard--mini), Vorher/Nachher (msg--diff),
   Artefakt-Rahmen (msg--artifact) – jede mit ihrer Rückgängig-Zeile (undo-row). Die Änderung gilt bereits. */
.msg--facts .text, .msg--card .flashcard, .msg--diff .diff, .msg--artifact .artifact { margin-top: var(--space-2); }
.msg--facts .text { font-size: 15px; line-height: 22px; }
.msg .undo-row { margin-top: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.msg .explain__actions { margin-top: var(--space-3); }
.msg--card, .msg--diff, .msg--artifact { max-width: 100%; width: 100%; }
.msg__lead { font-size: 14px; line-height: 20px; }
.msg--artifact .artifact__frame { aspect-ratio: 16 / 9; }
.explain__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.explain__actions .chip--action { height: 28px; font-size: 12px; padding: 0 10px; color: var(--ink-2); }
.explain__actions .chip--action .icon { width: 14px; height: 14px; }
.chip--danger-action { color: var(--ink-2); }
.chip--danger-action:hover { background: var(--danger-soft); color: var(--danger); }
/* ---------- Bildverdeckung: Lücken auf einem Bild ----------
   <figure class="tx-figure tx-covered"><img …><span class="tx-cover tx-gap" data-gap="1" data-x="12" data-y="30" data-w="20" data-h="12">
   <span class="tx-cover__no">1</span></span>…</figure>. Lage und Größe in Prozent des Bildes (Medix.labels setzt --x/--y/--w/--h über das
   CSSOM), darum sitzt jede Verdeckung auf jedem Gerät an derselben Stelle; Bild und Verdeckungen skalieren gemeinsam. Eine Verdeckung
   ist eine Lücke (tx-gap): Gruppen, Aufdecken, Bewertung wie im Text (Medix.gaps). Verdeckt: ruhige Fläche in der Farbe der Lücke mit
   der Gruppenzahl klein in der Ecke; aufgedeckt: goldener Rahmen, das Bild darunter sichtbar. */
.tx-covered { position: relative; display: block; }
.tx-covered > img, .tx-covered > svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.tx-cover.tx-gap { position: absolute; left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 10%); height: var(--h, 10%); margin: 0; padding: 0; border-radius: 6px; background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; cursor: pointer; box-decoration-break: slice; }
.tx-cover.tx-gap::before { content: none; }
.tx-cover.tx-gap.is-open { background: transparent; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold-soft); cursor: default; }
.tx-cover__no { position: absolute; right: 4px; bottom: 2px; font: 700 10px/14px var(--font-sans); color: var(--ink-3); pointer-events: none; }
.tx-cover.is-open > .tx-cover__no { display: none; }
.tx-cover.is-tiny > .tx-cover__no:not(.tx-gap__group) { display: none; }   /* unter 7 × 6 % passt keine Zahl hinein – die Gruppe bleibt, nur die Ziffer fällt weg */
/* Im Editor (Werkzeug „Verdecken“, tx-covered[data-cover-edit] → is-editing): auf dem Bild ziehen zeichnet eine neue Verdeckung, ein Tipp
   wählt sie (is-selected: royal, vier Griffe an den Ecken), ziehen verschiebt, Griffe ändern die Größe; die Gruppenzahl ist derselbe Knopf
   wie an der Lücke im Text (tx-gap__group, Medix.gapGroups); Löschen im Kontextmenü (ctx) oder mit der Rücktaste. Doppeltipp zoomt. */
.tx-covered.is-editing { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.tx-covered.is-editing .tx-cover.tx-gap { cursor: move; }
.tx-covered.is-editing .tx-cover.is-drawing { background: var(--royal-soft); box-shadow: inset 0 0 0 1.5px var(--royal); }
.tx-covered.is-editing .tx-cover.is-selected { box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 0 0 2px var(--royal); }
.tx-cover__handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-3); border: 2px solid var(--royal); display: none; box-sizing: border-box; }
.tx-cover__handle::before { content: ""; position: absolute; inset: -10px; }
.tx-cover.is-selected .tx-cover__handle { display: block; }
.tx-cover__handle[data-corner="nw"] { left: -7px; top: -7px; cursor: nwse-resize; } .tx-cover__handle[data-corner="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.tx-cover__handle[data-corner="ne"] { right: -7px; top: -7px; cursor: nesw-resize; } .tx-cover__handle[data-corner="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.tx-covered .tx-gap__group.tx-cover__no { position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; translate: -50% -50%; margin: 0; width: 18px; height: 18px; color: var(--on-gold); pointer-events: auto; display: inline-grid; z-index: 2; }   /* mittig, damit die Griffe an den Ecken frei bleiben */
.tx-covered.is-editing .tx-cover.is-open { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); }  /* im Editor sieht die Verdeckung immer verdeckt aus */
.tx-covered.is-editing .tx-cover.is-open > .tx-cover__no { display: inline-grid; }
.tx-covered .ctx { translate: -50% calc(-100% - 14px); }
/* Zoom am iPhone: Doppeltipp macht das Bild doppelt so breit, der Bereich scrollt (editor__zoom); die Prozente bleiben. */
.editor__zoom { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.editor__zoom .tx-covered { max-width: 640px; }   /* am Laptop nicht breiter als die Karte */
.editor__zoom .tx-covered.is-zoomed { width: 200%; max-width: none; }
/* ---------- „Bild aus Seite“ im Material-Viewer: ein Rechteck auf der Seite ziehen (viewer.is-cropping), darunter „Als Karte“ ---------- */
.viewer.is-cropping .page { cursor: crosshair; touch-action: none; }
.viewer.is-cropping .page__marks { display: none; }
.page__crop { position: absolute; z-index: 3; left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 0%); height: var(--h, 0%); border: 2px solid var(--royal); border-radius: 4px; background: var(--royal-soft); box-shadow: 0 0 0 9999px rgba(20, 33, 61, 0.2); pointer-events: auto; }
.page__crop-bar { position: absolute; left: 50%; top: 100%; translate: -50% 8px; display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); white-space: nowrap; }
.page__crop-bar .btn { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.page__crop.is-drawing .page__crop-bar { display: none; }
/* ---------- Werkstatt als Stapel: nachts laufen mehrere Runden hintereinander, morgens liegen sie gestapelt in Test ----------
   Jede Runde (core.changes) ist ein details.round in Commit-Reihenfolge, die neueste offen; darin ihr Testauftrag (brief) zum Abhaken,
   jeder Punkt lässt sich als „Nachbessern“ markieren (is-fix, ein Satz dazu → Bericht der Runde). „Alle freigeben“ ist der eine goldene
   Knopf, erst aktiv, wenn jede Runde ganz abgehakt ist und kein Nachbessern offen hat; Produktiv übernimmt den letzten Commit. */
.night { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.night b { font-weight: 600; }
.night small { font-size: 13px; color: var(--ink-2); }
.rounds { display: flex; flex-direction: column; gap: var(--space-2); }
.round { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.round > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); cursor: pointer; }
.round > summary::-webkit-details-marker { display: none; }
.round__no { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-md); background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.round__title { font-size: 15px; line-height: 22px; font-weight: 600; min-width: 0; }
.round__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.round__ref .chip { font-family: var(--font-sans); height: 20px; font-size: 11px; padding: 0 6px; }
.round__state { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }
.round__count { font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.round__state .progress { width: 56px; }
.round__state .icon { width: 16px; height: 16px; color: var(--ink-3); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.round[open] > summary .round__state > .icon { transform: rotate(180deg); }
.round.is-checked .round__no { background: var(--success-soft); color: var(--success); }
.round.has-fix .round__no { background: var(--warn-soft); color: var(--warn); }
.round__body { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.round__desc { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.round__body .list__title { padding-top: var(--space-1); }
/* Nachbessern am Punkt: der Knopf rechts (btn--quiet), aktiv = is-fix; darunter das Feld für den Satz, der im Bericht der Runde landet. */
.brief__meta .brief__fixbtn { margin-left: auto; }
.brief__fixbtn { height: 24px; padding: 0 var(--space-2); font-size: 12px; gap: 4px; margin: -4px -6px -4px auto; }
.brief__fixbtn .icon { width: 14px; height: 14px; }
.brief__item.is-fix { background: var(--warn-soft); }
.brief__item.is-fix .brief__fixbtn { color: var(--warn); background: transparent; box-shadow: inset 0 0 0 1px var(--warn); }
.brief__item.is-fix .check { opacity: 0.45; pointer-events: none; }
.brief__fix { grid-column: 2 / -1; display: none; gap: var(--space-2); align-items: flex-start; padding-top: var(--space-1); }
.brief__item.is-fix .brief__fix { display: flex; }
.brief__fix .field__input { flex: 1; min-height: 36px; height: auto; field-sizing: content; padding: 8px var(--space-3); font-size: 14px; line-height: 20px; resize: none; }
.brief__fix .icon { width: 16px; height: 16px; color: var(--warn); margin-top: 10px; flex: none; }
.brief__item.is-ai.is-fix .check { opacity: 0.45; }
/* Freigeben: die Liste der Runden, die nach Produktiv gehen (im Sheet). */
.release-list .row { min-height: 44px; padding: var(--space-2) var(--space-3); }
.release-list .row__title { font-size: 14px; }
.release-list .row__sub { font-family: var(--font-mono); font-size: 12px; }
/* Verlauf: ein Stapel ist eine Freigabe mit seinen Runden darunter (details.release), eine einzelne Runde bleibt eine Zeile. */
.release > summary { list-style: none; cursor: pointer; }
.release > summary::-webkit-details-marker { display: none; }
.release .row__title, .release .row__sub, .release__rounds .row__title { white-space: normal; }
.release__rounds { border-top: 1px solid var(--line); background: var(--bg-0); }
.release__rounds .row { min-height: 40px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8); }
.release__rounds .row__title { font-size: 14px; font-weight: 500; }
.release__rounds .row__sub { font-family: var(--font-mono); font-size: 12px; }
.release__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.release__toggle .icon { width: 14px; height: 14px; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.release[open] .release__toggle .icon { transform: rotate(180deg); }
@container (max-width: 479px) { .round > summary { grid-template-columns: auto minmax(0, 1fr); } .round__state { grid-column: 1 / -1; justify-self: start; } }
/* ---------- Ort: Raum-Chip, „Los um“, Wechsel, Ort-Sheet ----------
   Jede Einheit hat einen Raum, wie ihn der Stundenplan schreibt („Stein - HS 3“, app.units.room); Medix kennt dazu das Gebäude mit
   Adresse und die Radzeiten (app.locations, app.rooms). Der Chip zeigt den Raum kurz („Stein · HS 3“); ein Tipp öffnet das Ort-Sheet.
   Unbekannter Raum: gedämpft, gestrichelt, „Ort zuordnen“. Gold nur auf „Route“. */
.chip--place { cursor: pointer; max-width: 100%; }
.chip--place .icon { width: 14px; height: 14px; flex: none; }
.chip--place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip--place:hover { background: var(--bg-3); }
.chip--place.is-unknown { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-3); }
.slot .chip--place { height: 24px; font-size: 12px; padding: 0 8px; }
/* „Los um“: im ersten Uni-Block als eigene Zeile mit Uhr; wird die Abfahrt knapp (unter 15 Minuten), rückt sie in den Kopf des Tages (hero__go). */
.slot__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding-top: 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.slot__go .icon { width: 16px; height: 16px; color: var(--ink-2); flex: none; }
.slot__go small { font-weight: 500; color: var(--ink-2); }
.hero__go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: 6px 12px 6px 10px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); font-size: 14px; line-height: 20px; font-weight: 600; }
.hero__go .icon { width: 18px; height: 18px; }
.hero__go small { font-weight: 500; opacity: 0.9; }
/* Wechsel zwischen zwei Uni-Blöcken an verschiedenen Orten: eine schmale Zeile dazwischen. */
.hop { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.hop .icon { width: 14px; height: 14px; flex: none; }
.hop::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); margin-left: var(--space-2); }
.slots .hop { margin: -2px 0; }
/* Im Stundenplan: der Raum als kleiner Chip im Termin (week__place), unbekannt gestrichelt. */
.week__event .week__place, .week__place { display: inline-flex; width: auto; align-items: center; gap: 3px; max-width: 100%; margin-top: 2px; padding: 1px 5px; border-radius: 4px; background: var(--bg-1); color: var(--ink-2); font-size: 10px; line-height: 14px; font-weight: 600; cursor: pointer; }
.week__place .icon { width: 10px; height: 10px; flex: none; }
.week__place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Angabe nach dem Ort-Chip (Art, Gruppe) steht mit ihm in einer Zeile, damit in einer Stunde Titel, Ort und „Tutorium“ sichtbar bleiben. */
.week__event .week__place + small { display: inline; padding: 0 0 0 4px; vertical-align: 1px; }
.week__event .week__place { margin-top: 1px; }
/* Kurz (bis eine Stunde, span-1…4) oder nebeneinander (lanes-2/3) ist es eng: Titel einzeilig mit Ellipse, der Ort-Chip nur als Pin
   (antippbar, der Raum steht im Sheet), die Art daneben – so bleiben Titel, Ort und „Tutorium“ in 46px sichtbar. */
.week__event:is(.span-1, .span-2, .span-3, .span-4, .lanes-2, .lanes-3) .week__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week__event:is(.span-1, .span-2, .span-3, .span-4, .lanes-2, .lanes-3) .week__place > span:not([data-icon]) { display: none; }
.week__event:is(.span-1, .span-2, .span-3, .span-4, .lanes-2, .lanes-3) .week__place { padding: 1px 3px; }
.week__place.is-unknown { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); }
.week__event.lanes-4 .week__place, .week__event.lanes-5 .week__place { display: none; }
/* Ort-Sheet: Gebäude und Hörsaal in Serif, Adresse, Hinweis, Radzeiten und „Los um“ als Zeilen, unten Route (Gold) und Adresse kopieren. */
.place { display: flex; flex-direction: column; gap: var(--space-3); }
.place__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 22px; line-height: 28px; font-weight: 500; }
.place__addr { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.place__hint { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink-2); padding: var(--space-2) var(--space-3); background: var(--bg-2); border-radius: var(--radius-sm); }
.place__hint .icon { width: 16px; height: 16px; flex: none; color: var(--ink-3); margin-top: 1px; }
.place .row { min-height: 44px; padding: var(--space-2) var(--space-3); }
.place .row__lead .icon { width: 18px; height: 18px; }
.place__go .row__title { font-weight: 600; }
.place__note { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.place__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding-top: var(--space-1); }
/* ---------- Dichte: Maus oder Trackpad (Mac, Windows) ---------- */
.kbd-hint { display: none; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line-strong); font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  :root { --control-sm: 32px; --control-md: 40px; --control-lg: 48px; --touch-min: 40px; }
  .row { min-height: 48px; }
  .btn--icon { width: 40px; height: 40px; }
  .kbd-hint { display: inline-flex; }
}

/* ---------- Seitenleiste (Grundform; sichtbar erst ab bp-tablet) ---------- */
.sidebar { display: none; }
.sidebar__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; padding: var(--space-2) 0 var(--space-3); }
.sidebar__brand:hover { text-decoration: none; }
.sidebar__wordmark { display: none; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; }
.sidebar__mark { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 30px; line-height: 34px; font-weight: 500; color: var(--gold-ink); }
.sidebar__badge { height: 22px; padding: 0 8px; font-size: 11px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-md);
  color: var(--ink-3); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.sidebar__item .icon { width: 26px; height: 26px; }
.sidebar__item:hover { color: var(--ink-2); text-decoration: none; }
.sidebar__item.is-active { color: var(--ink); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); }
.sidebar__item.is-active .icon { color: var(--gold-ink); }
.sidebar__item .badge { position: absolute; top: 6px; right: 6px; }
.sidebar__spacer { flex: 1; }
.sidebar__foot { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.sidebar__item--quiet { min-height: 48px; }
.sidebar__item .kbd-hint { display: none; }

/* ---------- Umbruchpunkte ---------- */
/* Ab bp-tablet (744px) Breite gibt es die Seitenleiste statt der Tab-Bar. Auf welcher Seite sie steht, entscheidet die Höhe:
   ab bp-tablet-height (500px) links (iPad, Laptop), bis bp-phone-max-height (499px) kompakt rechts (Handy quer: iPhones sind
   quer 812–956px breit, aber nur 375–460px hoch). Keine Seite hat oben eine Leiste (Seitenkopf page-head im Inhalt). */

/* Gemeinsam ab bp-tablet 744px: Seitenleiste als Glas-Tafel, Tab-Bar und env-badge weg, Farbschimmer, breite Inhalte. */
@media (min-width: 744px) {
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 45% at 8% 0%, var(--gold-soft), transparent 70%), radial-gradient(45% 40% at 100% 100%, var(--royal-soft), transparent 70%);
  }
  .tabbar, .env-badge { display: none; }
  .env-badge + .study .study__top { padding-right: 0; }
  .week-view { display: block; }
  .day-view { display: none; }
  .plan-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .plan-head > .week-nav { flex: 0 1 360px; }
  .sidebar {
    display: flex; flex-direction: column; gap: var(--space-2);
    position: fixed; z-index: 30;
    top: max(var(--space-3), env(safe-area-inset-top, 0px));
    bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
    width: var(--sidebar-rail); padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-xl);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .content { max-width: var(--content-max); }
  .sheet { max-width: 520px; margin: 0 auto; border-radius: var(--radius-xl); padding-bottom: var(--space-4); }
  .sheet__grip { display: none; }
  .study { max-width: var(--content-max); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat--wide { grid-column: span 2; }
  /* Spalten nach Platz, nicht nach Gerät: eine Lehrveranstaltung braucht mindestens 360px (Titel in höchstens zwei Zeilen, daneben Lernstand, Zahl und Pfeil) –
     zwei Spalten gibt es also erst ab etwa 745px Inhaltsbreite, drei ab etwa 1130px – in der Praxis: iPad hoch und kleiner eine Spalte (680px), iPad quer zwei, Laptop drei. */
  .courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-6); align-items: start; }
  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
  .due-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); }
  .due-card .btn { margin-top: 0; width: auto; min-width: 220px; }
  .note__bar .audio__wave, .note__bar .audio__rec { display: block; }
  .note__bar .audio__time { display: inline; }
  .note__bar .audio { padding: 0 var(--space-2) 0 var(--space-3); gap: var(--space-2); }
  .note__bar .audio .btn { color: inherit; animation: none; }
}

/* iPad hoch und alles darüber (= bp-tablet 744px, ab bp-tablet-height 500px): Leiste links, Inhalt beginnt bei --shell-left. */
@media (min-width: 744px) and (min-height: 500px) {
  :root { --shell-left: calc(max(var(--space-3), env(safe-area-inset-left, 0px)) + var(--sidebar-rail) + var(--space-3)); }
  .sidebar { left: max(var(--space-3), env(safe-area-inset-left, 0px)); }
  .content {
    margin: 0 0 0 var(--shell-left);
    padding: calc(var(--space-6) + env(safe-area-inset-top, 0px)) max(var(--space-6), env(safe-area-inset-right, 0px)) var(--space-12) var(--space-4);
  }
  .toast-host { left: calc(var(--shell-left) + var(--space-4)); right: var(--space-6); bottom: var(--space-6); }
  .sheet { left: var(--shell-left); right: var(--space-6); bottom: var(--space-6); }
  .flashcard { min-height: 400px; padding: var(--space-8) var(--space-8) var(--space-6); }
}

/* Handy quer (= bp-tablet 744px breit, bis bp-phone-max-height 499px hoch): kompakte Leiste rechts – „M“ kleiner, Einträge 46px –,
   damit sie samt Werkstatt in 375px Höhe passt; Inhalt nutzt die ganze Höhe und beginnt hinter der Safe-Area links. */
@media (min-width: 744px) and (max-height: 499px) {
  :root { --shell-right: calc(max(var(--space-3), env(safe-area-inset-right, 0px)) + var(--sidebar-rail) + var(--space-3)); }
  .sidebar { left: auto; right: max(var(--space-3), env(safe-area-inset-right, 0px)); padding: 6px var(--space-2); gap: var(--space-1); }
  .sidebar__brand { padding: 0 0 var(--space-1); gap: var(--space-1); }
  .sidebar__mark { font-size: 24px; line-height: 28px; }
  .sidebar__nav { gap: 2px; }
  .sidebar__item { min-height: 38px; padding: 0 var(--space-1); gap: 2px; }
  .sidebar__item .icon { width: 20px; height: 20px; }
  .sidebar__foot { padding-top: var(--space-1); }
  .content {
    margin: 0 var(--shell-right) 0 0;
    padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
  }
  .toast-host { left: max(var(--space-4), env(safe-area-inset-left, 0px)); right: calc(var(--shell-right) + var(--space-4)); bottom: var(--space-4); }
  .sheet { left: max(var(--space-4), env(safe-area-inset-left, 0px)); right: var(--shell-right); bottom: var(--space-4); }
}
/* Leerer Zustand in einer breiten Karte oder Liste (Container-Query, nicht Viewport): Icon links, Text mittig, Aktion rechts. */
.card, .list { container-type: inline-size; }
@container (min-width: 560px) {
  .empty {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title action" "icon text action";
    column-gap: var(--space-5); row-gap: var(--space-1); align-items: center; text-align: left; padding: var(--space-6) var(--space-6);
  }
  .empty__icon { grid-area: icon; margin: 0; }
  .empty__title { grid-area: title; }
  .empty__text { grid-area: text; max-width: 520px; }
  .empty__action { grid-area: action; margin: 0; }
}

/* iPad quer und MacBook Air 13 Zoll (= bp-tablet-wide 1180px): volle Seitenleiste, zweispaltige Screens mit Seitenspalte. */
@media (min-width: 1180px) and (min-height: 500px) {
  :root { --shell-left: calc(max(var(--space-3), env(safe-area-inset-left, 0px)) + var(--sidebar) + var(--space-3)); }
  .sidebar { width: var(--sidebar); padding: var(--space-4) var(--space-3); gap: var(--space-3); }
  .sidebar__brand { flex-direction: row; justify-content: flex-start; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-3); }
  .sidebar__wordmark { display: block; }
  .sidebar__mark { display: none; }
  .sidebar__item { flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); font-size: 15px; line-height: 20px; letter-spacing: 0; }
  .sidebar__item .icon { width: 22px; height: 22px; }
  .sidebar__item .badge { position: static; margin-left: auto; }
  .sidebar__item .kbd-hint { display: inline-flex; margin-left: auto; }   /* „Suchen ⌘K“ – nur mit Tastatur sinnvoll, siehe unten */
  .sidebar__item--quiet { min-height: 40px; font-size: 13px; }
  .content { max-width: var(--content-wide); padding-left: var(--space-6); padding-right: max(var(--space-8), env(safe-area-inset-right, 0px)); }
  .content--today { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); grid-template-areas: "hero hero" "uni due" "ready due" "after due"; column-gap: var(--space-8); row-gap: var(--space-6); align-content: start; }
  .content--today .hero { grid-area: hero; }
  .section--uni { grid-area: uni; }
  .section--due { grid-area: due; position: sticky; top: var(--space-6); align-self: start; }
  .section--after { grid-area: after; }
  .content--today:not(:has(.section--ready)) { grid-template-areas: "hero hero" "uni due" "after due"; }
  .section--ready { grid-area: ready; }                       /* Runde 11.10.: Prüfung (Bereitschaft) steht links unter der Uni, vor „Danach“ – vorher fiel sie unter „Danach“ */
  .section--due .due-card { grid-template-columns: 1fr; }
  .section--due .due-card .btn { width: 100%; }
  .plan-grid { display: grid; grid-template-columns: var(--aside) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .workshop-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); gap: var(--space-8); align-items: start; }
  .workshop-grid > .workshop-side { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
  .plan-grid > .cal { position: sticky; top: var(--space-6); }
  .unit-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); gap: var(--space-8); align-items: start; }
  .unit-grid > .unit-side { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
  .study-aside { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
  .flashcard__question { font-size: 18px; line-height: 27px; }
  .flashcard__answer { font-size: 18px; line-height: 27px; }
  .courses { gap: var(--space-6) var(--space-8); }
}

/* Laptop und PC (= bp-laptop 1440px): breiter Inhalt, drei Kachelspalten. */
@media (min-width: 1440px) and (min-height: 500px) {
  .content { max-width: var(--content-laptop); padding-left: var(--space-8); padding-right: max(var(--space-10), env(safe-area-inset-right, 0px)); }
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content--today { grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--space-10); }
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* Seiten ohne Seitenleiste (Anmelden, Einrichten, alles vor dem Login) tragen content--alone: ab bp-tablet 744px – ob hoch oder quer –
   ohne Einrückung mittig, Toast-Ablage und Sheets ebenso, der Chip „Test“ bleibt sichtbar. Am Handy hoch gilt die Grundform. */
@media (min-width: 744px) {
  .content--alone { margin-left: auto; margin-right: auto; max-width: var(--content-max); padding-left: var(--space-6); padding-right: var(--space-6); }
  .content--alone ~ .toast-host, .content--alone ~ .sheet { left: var(--space-6); right: var(--space-6); }
  .content--alone .env-badge { display: block; }
}
/* „Suchen ⌘K“ in der vollen Seitenleiste nur, wo es eine Tastatur gibt (Maus oder Trackpad). */
@media (hover: none) { .sidebar__item .kbd-hint { display: none; } }

/* ---------- NotizBlatt (Runde 25f2, Brücke aus dem Entwurf Notizen 2) ----------
   Übernommen aus docs/drafts/notes-2.html, Abschnitt „Entwurf: Medix-Notizen 2“; einzige Änderung: die Schrift der Marke „Platz“
   ist bg-0 statt var(--on-royal, #fff) (das Token gibt es nicht, ein Hex-Wert darf hier nicht stehen). Guideline:
   components/NotizBlatt/README.md. Der Design-Chat übernimmt die Komponente ins Artefakt „Medix“. */
.nb { --grid: 28px; position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-1); color: var(--ink); font-family: var(--font-sans); container-type: inline-size; overflow: hidden; }
.nb__head { display: grid; grid-template-columns: minmax(0, 1fr) auto max-content; align-items: center; gap: var(--space-3); min-height: 52px; padding: 4px var(--space-3); border-bottom: 1px solid var(--line); background: var(--bg-1); }
.nb__left, .nb__right { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nb__right { justify-content: flex-end; }
.nb__titles { min-width: 0; padding-left: 2px; }
.nb__title { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 18px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb__saved { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: nowrap; }
.nb__saved .icon { width: 12px; height: 12px; }
.nb-mode .segmented__item { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 0 var(--space-4); }
.nb-mode .segmented__item .icon { width: 16px; height: 16px; }
.nb-mode .segmented__item.is-active { color: var(--ink); }
.nb[data-mode="draw"] .nb-mode [data-mode="draw"].is-active { color: var(--gold-ink); }
.nb-read, .nb-word { gap: 4px; padding: 0 var(--space-2); height: 32px; font-size: 13px; color: var(--ink-2); }
.nb-read .icon, .nb-word .icon { width: 18px; height: 18px; }
.nb-explain-btn { height: 32px; gap: 6px; }
/* Aufnahme: im Kopf, gehört zu keinem Modus. Läuft sie, wird der Knopf zur roten Pille mit Zeit; Text und Striche bekommen die Zeit
   der Aufnahme (später: Tipp auf einen Strich springt zur Stelle). */
.nb-rec { height: 32px; gap: 6px; padding: 0 var(--space-3); color: var(--ink-2); }
.nb-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; }
.nb-rec[aria-pressed="true"] { font-variant-numeric: tabular-nums; }
.nb-rec[aria-pressed="true"] .nb-lbl { display: none; }
.nb-insert__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nb-explain-btn[aria-pressed="true"] { background: var(--royal-soft); color: var(--royal); border-color: transparent; }
.nb-more { position: relative; }
.nb-more > summary { list-style: none; cursor: pointer; }
.nb-more > summary::-webkit-details-marker { display: none; }
.nb-more__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.nb-more__panel .segmented__item { flex: 1; }
.nb-more__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.nb-more__row .icon { color: var(--ink-2); }
/* Die zwei Leisten wechseln sich ab: Schreiben (Text wie im Dokument) und Zeichnen (wie GoodNotes: Werkzeuge, Farben, Stärken). Rechts in beiden: Platz und Einfügen. */
.nb__bar { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 0 var(--space-3); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow-x: auto; scrollbar-width: none; }
.nb__bar[hidden] { display: none; }
.nb__bar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--space-2); flex: none; }
.nb__bar .btn--icon { color: var(--ink-2); flex: none; }
.nb__bar .btn--icon.is-active, .nb__bar .btn--icon[aria-pressed="true"], .nb-word[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }
.nb-style { flex: none; width: 150px; }
.nb-style .field__input { height: var(--control-sm); padding: 0 26px 0 var(--space-3); font-size: 13px; }
.nb-shapes { display: none; align-items: center; gap: 2px; margin-left: 2px; padding-left: 4px; border-left: 1px solid var(--line); }
.nb[data-tool="shape"] .nb-shapes { display: flex; }
.nb-shapes .btn--icon[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }
.nb__bar .pens { display: flex; gap: 6px; padding: 0 2px; }
.nb__bar .widths { display: flex; gap: 4px; padding: 0 2px; }
.nb__bar .pen, .nb__bar .width { width: 24px; height: 24px; flex: none; }
.nb__body { position: relative; flex: 1; min-height: 0; display: flex; }
.nb__stage { position: relative; flex: 1; min-width: 0; overflow: auto; background: var(--bg-1); touch-action: pan-x pan-y; }
/* Das Blatt: eine freie Fläche, Anschlag links und oben, wächst nach rechts und unten. Raster 28px; Punkte liegen auf den Grundlinien
   (y = 28k + 20), darum sitzt jede getippte Zeile auf einer Punktreihe. Schmaler als 1120px wird die Fläche skaliert (--fit), zwei
   Finger zoomen (--zoom). */
.nb__sheet { position: relative; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); zoom: calc(var(--fit, 1) * var(--zoom, 1));
  background-image: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 80%, transparent) 1.1px, transparent 1.7px); background-size: var(--grid) var(--grid); background-position: -14px 6px; }
.nb--lines .nb__sheet { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% var(--grid); background-position: 0 20px; }
.nb--squares .nb__sheet { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 100% var(--grid), var(--grid) 100%; background-position: 0 20px, 0 0; }
.nb[data-mode="write"] .nb__sheet { cursor: text; }
.nb[data-mode="draw"] .nb__sheet { cursor: crosshair; }
.nb[data-tool="eraser"] .nb__sheet { cursor: cell; }
.nb.is-spacing .nb__sheet { cursor: row-resize; }
/* Dinge auf der Fläche: Textkasten und Objekt. Lage und Breite im Raster (--x, --y, --w; Objekte auch --h in ganzen Zeilen). Rahmen und
   Griff (oben, wie OneNote) erscheinen beim Schreiben bei Hover oder Fokus; der Griff verschiebt, der Anfasser rechts ändert die Breite. */
.nb-item { position: absolute; left: var(--x, 0px); top: var(--y, 0px); width: var(--w, 560px); z-index: 1; }
.nb-item::before { content: ""; position: absolute; inset: -6px -10px; border: 1px solid transparent; border-radius: 8px; pointer-events: none; transition: border-color 120ms ease-out; }
/* Griff: kein Balken – am Textkasten ist der Rahmen selbst der Griff (ein Ring um den Text, solange man darin schreibt). Objekte verschiebt man am Objekt selbst:
   antippen = gewählt, dann ziehen; ein ungewähltes Objekt scrollt beim Wischen mit. */
.nb-grip { position: absolute; inset: -12px -14px; z-index: 0; display: none; border-radius: 10px; cursor: move; touch-action: none; }
.nb-item.is-active > .nb-grip, .nb-item:focus-within > .nb-grip { display: block; }
.nb-box__text { position: relative; z-index: 1; }
.nb-resize { z-index: 2; }
.nb-obj > .nb-grip { display: none; }
.nb-obj.is-active { cursor: move; touch-action: none; }
.nb-resize { position: absolute; right: -16px; top: 50%; width: 10px; height: 28px; translate: 0 -50%; border-radius: 5px; background: var(--bg-3); border: 1px solid var(--line-strong); opacity: 0; cursor: ew-resize; touch-action: none; }
.nb-obj .nb-resize { top: auto; bottom: -16px; right: -16px; width: 16px; height: 16px; translate: none; cursor: nwse-resize; }
.nb[data-mode="write"] .nb-item:hover::before, .nb-item.is-active::before, .nb-item:focus-within::before { border-color: var(--line-strong); }
.nb-item.is-active > .nb-grip, .nb-item.is-active > .nb-resize, .nb-item:focus-within > .nb-grip, .nb-item:focus-within > .nb-resize { opacity: 1; }
.nb-item.is-active::before { border-color: var(--royal); }
.nb[data-mode="draw"] .nb-grip, .nb[data-mode="draw"] .nb-resize, .nb.is-reading .nb-grip, .nb.is-reading .nb-resize { display: none; }
/* Text im Kasten: Medix-Text auf dem Raster (wie Runde 25b). */
.nb-box__text { outline: none; min-height: var(--grid); font-size: 17px; line-height: var(--grid); cursor: text; }
.nb .nb-box__text.text > * { margin: 0; }   /* nie Ränder im Text: jede Zeile bleibt auf dem Raster */
.nb-box__text .tx-h1 { font-size: 30px; line-height: calc(2 * var(--grid)); translate: 0 10px; }
.nb-box__text .tx-h2, .nb-box__text h2 { font-family: var(--font-serif); font-size: 22px; line-height: var(--grid); font-weight: 600; translate: 0 -2px; }
.nb-box__text .tx-h3, .nb-box__text h3 { font-family: var(--font-sans); font-variation-settings: normal; font-size: 17px; line-height: var(--grid); font-weight: 700; }
.nb-box__text h1 { font-family: var(--font-serif); font-size: 30px; line-height: calc(2 * var(--grid)); font-weight: 600; translate: 0 10px; }
.nb-box__text ul, .nb-box__text ol { padding-left: var(--grid); display: block; }
.nb-box__text li { line-height: var(--grid); }
.nb-box__text blockquote { padding-left: 26px; border-left: 2px solid var(--gold-line); font-style: italic; }
.nb-box__text .tx-caption, .nb-meta { font-size: 13px; line-height: var(--grid); color: var(--ink-3); translate: 0 1px; }
.nb-box__text table { border-collapse: collapse; font-size: 15px; line-height: 27px; }
.nb-box__text td, .nb-box__text th { padding: 0 var(--space-4) 0 0; border-bottom: 1px solid var(--line); text-align: left; translate: 0 1px; min-width: 56px; }
.nb-box__text th { border-bottom-color: var(--line-strong); font-weight: 600; }
.nb-box__text mark { background: var(--tx-gold-mark, var(--gold-soft)); color: inherit; border-radius: 3px; }
.nb-box__text:focus:empty::before { content: "Schreib hier …"; color: var(--ink-3); }
/* Objekt: eine Seite (Folie, Seite einer Datei) oder ein Bild. Höhe in ganzen Zeilen: Bildfläche + eine Zeile Herkunft als Link in den Viewer. */
.nb-obj { height: var(--h, 448px); }
.nb-obj__img { height: calc(100% - var(--grid)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); color: var(--paper-ink); box-sizing: border-box; }
.nb-obj__img > svg { display: block; width: 100%; height: 100%; }
.nb-obj__cap { height: var(--grid); font-size: 13px; line-height: var(--grid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; translate: 0 1px; }
.nb-obj__cap a { color: var(--ink-3); text-decoration: none; }
.nb-obj__cap .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.nb[data-mode="write"] .nb-obj { cursor: default; }
/* Tinte: eine Ebene über der ganzen Fläche, über Text und Objekten. Striche auf einem Ding sind an ihm verankert (g.nb-anchor, verschiebt
   sich mit), Striche auf dem Papier bleiben auf der Seite (g.nb-page). Beim Schreiben lässt die Ebene alles durch. */
.nb-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.nb[data-mode="draw"] .nb-ink { pointer-events: all; touch-action: none; }
.nb.is-spacing .nb-ink { pointer-events: none; }
.nb-ink .stroke, .nb-ink .nb-shape { pointer-events: visibleStroke; }
.nb[data-mode="write"] .nb-ink .stroke, .nb[data-mode="write"] .nb-ink .nb-shape { pointer-events: none; }
.nb-shape, .nb-shape line { fill: none; stroke: var(--stroke, var(--ink)); stroke-width: 2; stroke-linecap: round; }
.nb-axes line { stroke-width: 1.6; }
.nb-lasso { fill: color-mix(in srgb, var(--royal) 8%, transparent); stroke: var(--royal); stroke-width: 1.5; stroke-dasharray: 5 5; }
.nb-ink .is-picked { filter: drop-shadow(0 0 2px var(--royal)); }
/* Auswahl mit dem Lasso: Rahmen und eine kleine Leiste darüber – Verschieben (Ziehen im Rahmen), Farbe, In Text, Erklären, Löschen. */
.nb-sel { position: absolute; z-index: 6; border: 1.5px dashed var(--royal); border-radius: 8px; background: color-mix(in srgb, var(--royal) 5%, transparent); cursor: move; touch-action: none; }
.nb-sel__bar { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; gap: 2px; padding: 3px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-2); white-space: nowrap; cursor: default; }
.nb-sel__bar .btn { height: 30px; padding: 0 var(--space-2); font-size: 13px; gap: 4px; }
.nb-sel__bar .icon { width: 16px; height: 16px; }
/* Platz einfügen (wie OneNote): an einer Stelle nach unten ziehen – alles darunter rückt mit, in ganzen Zeilen. */
.nb-space { position: absolute; left: 0; right: 0; z-index: 7; pointer-events: none; border-top: 2px solid var(--royal); background: color-mix(in srgb, var(--royal) 8%, transparent); }
.nb-space::after { content: attr(data-label); position: absolute; left: 12px; top: 4px; padding: 0 6px; border-radius: 4px; background: var(--royal); color: var(--bg-0); font-size: 12px; line-height: 20px; font-weight: 600; }
.nb-cursor { position: absolute; z-index: 4; width: 2px; height: 22px; background: var(--royal); border-radius: 1px; pointer-events: none; animation: nb-blink 1s steps(1) infinite; }
@keyframes nb-blink { 50% { opacity: 0; } }
/* Erklären: immer daneben – ab 744px eine Spalte rechts (die Fläche wird schmaler, nicht kleiner), am iPhone ein Sheet. Oben der Bezug
   (sichtbarer Bereich, gewähltes Objekt oder Lasso-Auswahl), darunter, was die KI dort liest. */
.nb-explain { display: none; flex: none; width: 360px; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); border-left: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; }
.nb.has-explain .nb-explain { display: flex; }
.nb-explain__head { display: flex; align-items: center; justify-content: space-between; }
.nb-explain__title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
.nb-explain__ctx .chip { max-width: 100%; }
.nb-explain__ctx .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-reads-fold > summary { list-style: none; cursor: pointer; }
.nb-reads-fold > summary::-webkit-details-marker { display: none; }
.nb-reads-fold__sum { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.nb-reads-fold__text { flex: 1; min-width: 0; }
.nb-explain__quick .chip { background: var(--bg-1); border: 1px solid var(--line); }
.nb-reads-fold__sum b { color: var(--ink); font-weight: 600; }
.nb-reads-fold__sum .icon:last-child { transition: rotate 160ms ease-out; }
.nb-reads-fold[open] .nb-reads-fold__sum .icon:last-child { rotate: 180deg; }
.nb-reads-fold[open] .nb-reads { margin-top: var(--space-2); }
.nb-reads { display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.nb-reads__row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; }
.nb-reads__row + .nb-reads__row { border-top: 1px solid var(--line); }
.nb-reads__row .icon { margin-top: 1px; color: var(--ink-3); }
.nb-reads__row b { display: block; font-weight: 600; }
.nb-reads__row small { display: block; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.nb-reads__row.is-dim { opacity: 0.4; }
.nb-reads__row.is-hit { background: var(--royal-soft); }
.nb-explain__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nb-explain__answer { margin: 0; max-width: none; }
/* Sheet „Einfügen“: vier Kacheln (Datei, Bild, Tabelle, Formel) und die Folien aus dem Material mit Von – Bis. */
.nb .sheet--absolute { left: 50%; right: auto; bottom: 24px; width: 600px; max-width: calc(100% - 32px); transform: translate(-50%, 110%); border-radius: var(--radius-xl); z-index: 60; }
.nb .sheet--absolute.is-open { transform: translate(-50%, 0); }
.nb .sheet--absolute:not(.is-open) { visibility: hidden; }
.nb .scrim[data-sheet] { z-index: 55; }
.nb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.nb-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.nb-tile .icon { color: var(--ink-2); }
.nb-tile b { font-size: 14px; line-height: 18px; font-weight: 600; }
.nb-tile small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
/* Lesen: nur Fläche, Text, Objekte, Tinte. Am iPhone die Vorgabe; ein Tipp blendet alle Steuerelemente aus. */
.nb.is-reading .nb__bar, .nb.is-reading .nb-mode, .nb.is-reading [data-nb-undo], .nb.is-reading [data-nb-redo] { display: none; }
.nb.is-reading .nb__sheet { cursor: default; }
/* Steuerung ausblenden nur ausdrücklich (Mehr › „Steuerung ausblenden“); ein runder Knopf holt sie zurück. Ein Tipp aufs Blatt schaltet nie um. */
.nb.is-immersive .nb__head, .nb.is-immersive .nb__bar { display: none; }
.nb-unhide { position: absolute; top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); right: var(--space-3); z-index: 35; display: none; background: var(--bg-3); box-shadow: var(--shadow-1); border-radius: 50%; opacity: .85; }
.nb.is-immersive .nb-unhide { display: inline-flex; }
/* Markiert wird nur Text im Textfeld: Folien, Beschriftungen, Griffe, Leisten und Handschrift nie (Jakob, 10.10.). */
.nb { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nb [contenteditable]:not([contenteditable="false"]), .nb input, .nb textarea, .nb-explain .msg { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Schmal (iPhone): Kopf verdichtet, Leiste scrollt, Erklären als Sheet von unten. */
@container (max-width: 559px) {
  .nb__head { grid-template-columns: minmax(0, 1fr) auto; }
  .nb__saved, .nb-lbl { display: none; }
  .nb-mode { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .nb-mode .segmented__item { flex: 1; justify-content: center; }
  .nb__bar { justify-content: flex-start; }
  .nb-explain { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 78%; border-left: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-2); z-index: 40; }
  .nb .sheet--absolute { bottom: 0; width: 100%; max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .nb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 560px) and (max-width: 979px) { .nb-word .nb-lbl, .nb-read .nb-lbl { display: none; } .nb__saved { display: none; } }
/* Bis 1179 px stehen Lesen und Erklären nur als Symbol, damit der rechte Teil nie unter den Moduswechsel rutscht. */
@container (min-width: 560px) and (max-width: 1179px) { .nb-read .nb-lbl, .nb-explain-btn .nb-lbl { display: none; } }
@container (min-width: 560px) and (max-width: 619px) { .nb-mode .segmented__item { padding: 0 var(--space-3); } }

/* ---------- NotizBlatt · Nachtrag 09.10. (Runde 25f2, Brücke; aus Gemeldet, G1) ----------
   Punkte für den Design-Chat, damit das Artefakt „Medix“ sie übernimmt:
   (1) Papier bis zum rechten Rand: Ist die Bühne breiter als das Blatt (1400 px bei Maßstab 1, etwa im Fenster 1710 der Mac-App),
       trägt die Bühne dasselbe Papier im selben Maßstab (--nb-scale aus public/note.js = --fit × --zoom) und mit demselben Ursprung
       (links oben, scrollt mit: background-attachment local); das Blatt deckt seinen Teil selbst (Fläche bg-1), so gibt es keine
       doppelten Punkte. Gespeicherte Blatt-Koordinaten bleiben, wie sie sind.
   (2) Die Menüs der Leisten liegen fest über dem Blatt (die Leiste scrollt waagrecht und schnitt sie sonst ab); die Lage setzt
       public/note.js beim Öffnen (--pop-x, --pop-y).
   (3) Tabelle im Kasten mit Innenabstand: links und rechts wie in der Komponente Text (space-3); oben und unten 0, damit jede
       Zeile auf dem 28-px-Raster bleibt. Ohne Linien wie in Text links 0.
   (4) Lesen zeigt keine Kontextleisten (Tabellen-Menü, Kontextmenü).
   (5) Die Such-Ebene (⌘K) liegt über der Notiz im Vollbild (der Scrim liegt dort schon bei 70, die Ebene lag mit 50 darunter: grau).
   (6) Mac-App: kein Zeichnen (Jakob, 09.10.: „Nur am iPad!“) – kein Umschalter Schreiben · Zeichnen, keine Leiste Zeichnen, kein
       „Finger zeichnet“, schon vor dem Skript; die rechte Gruppe des Kopfs bleibt rechts. */
.nb__sheet { background-color: var(--bg-1); }
.nb__stage { --nb-s: var(--nb-scale, 1); background-attachment: local;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 80%, transparent) calc(1.1px * var(--nb-s)), transparent calc(1.7px * var(--nb-s)));
  background-size: calc(var(--grid) * var(--nb-s)) calc(var(--grid) * var(--nb-s)); background-position: calc(-14px * var(--nb-s)) calc(6px * var(--nb-s)); }
.nb--lines .nb__stage { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% calc(var(--grid) * var(--nb-s)); background-position: 0 calc(20px * var(--nb-s)); }
.nb--squares .nb__stage { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 100% calc(var(--grid) * var(--nb-s)), calc(var(--grid) * var(--nb-s)) 100%; background-position: 0 calc(20px * var(--nb-s)), 0 0; }
.nb__bar .pop__panel { position: fixed; left: var(--pop-x, 0px); top: var(--pop-y, 0px); z-index: 62; }
.nb .nb-box__text .tx-cell { padding: 0 var(--space-3); }
.nb .nb-box__text .tx-table--plain .tx-cell { padding-left: 0; }
.nb.is-reading > .editor__sub, .nb.is-reading .ctx { display: none !important; }
body.has-full .search-layer { z-index: 71; }
:root[data-shell="mac"] .nb .nb-mode, :root[data-shell="mac"] .nb .nb__bar[data-bar="draw"], :root[data-shell="mac"] .nb .nb-more__row:has([data-draw="finger"]) { display: none; }
:root[data-shell="mac"] .nb .nb__right, .nb.nb--type-only .nb__right { grid-column: 3; }
@container (max-width: 559px) { :root[data-shell="mac"] .nb .nb__right, .nb.nb--type-only .nb__right { grid-column: auto; } }

/* ---------- Lernschritt im Viewer und nach „Geschafft.“ (Runde 19b2b, Brücke) ----------
   „Fertig“ in der Fußzeile ist btn--secondary (kein Gold im Viewer); unter 560 px steht es wie die übrigen Knöpfe nur als Icon.
   „Weiter“ nach „Geschafft.“ trägt den Satz des Schritts als small, der umbrechen darf (ein langer Titel bleibt im Knopf).
   Der Design-Chat zeichnet beides und übernimmt die Regeln ins Artefakt „Medix“. */
@container (max-width: 559px) { .viewer__foot [data-step-done] .btn__label { display: none; } .viewer__foot [data-step-done].btn--sm { width: 36px; padding: 0; justify-content: center; } }
.study-done__actions [data-step-next] { white-space: normal; padding-left: calc(var(--space-4) + 20px + var(--space-3)); padding-right: calc(var(--space-4) + 20px + var(--space-3)); }
/* ---------- Lange Art in der Zeile slot (Runde 20d2, Brücke; neu im Nachtrag Nachbessern 08.10.) ----------
   „Wiederholungsprüfung“ rechts in der Zeile einer Prüfung (Fach- und Fachgebiet-Seite) schob die Seite am iPhone seitlich
   hinaus; danach brach sie mitten im Wort („WIEDERHOLUNGSPRÜF / UNG“, am Mac mit Silbenstrichen „LV-PRÜ-FUNG“; Jakob,
   08.10.: „Prüfungen werden nicht richtig angezeigt“). Die Art bricht jetzt nie im Wort: rechts steht sie in einer Zeile;
   ist die Zeile schmaler als 460px (iPhone, halbe Spalte, zwei Spalten am Laptop), steht sie wie auf Heute über dem Titel,
   in voller Breite. Nur ein Wort, das breiter ist als die ganze Zeile, darf noch umbrechen.
   Der Design-Chat übernimmt die Regel ins Artefakt „Medix“. */
.slot__kind { overflow-wrap: break-word; }
.view--fach .slot { container-type: inline-size; row-gap: 2px; }
.view--fach .slot > .slot__kind { white-space: nowrap; }
@container (max-width: 459px) {
  .view--fach .slot > .slot__time { grid-row: 1 / span 2; }
  .view--fach .slot > .slot__kind { grid-column: 2 / -1; grid-row: 1; padding-top: 2px; white-space: normal; }
  .view--fach .slot > :nth-child(2) { grid-column: 2 / -1; grid-row: 2; }
}

/* ---------- Fehler melden (Runde 29, Brücke) ----------
   Das Sheet „Fehler melden“ (public/bugreport.js) steht aus Sheet, Eingabefeld und Knöpfen; neu ist nur die Vorschau des
   Bildes (ein canvas, weil die Sicherheits-Kopfzeile nur img-src 'self' erlaubt) und die Zeile „Gemeldet“ in Mehr.
   Der Design-Chat zeichnet beides und übernimmt die Regeln ins Artefakt „Medix“. */
.bug-sheet__preview { display: block; max-width: 100%; max-height: 160px; width: auto; height: auto; margin: 0 auto var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); }
.bug-sheet__preview[hidden] { display: none; }
.bug-report__image { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.bug-report__note { color: var(--ink-2); }
/* Runde 29c: mehrere Bilder. Im Sheet eine Reihe kleiner Bilder (je ein canvas) mit ✕ zum Entfernen, in Gemeldet eine
   Reihe kleiner Bilder, die beim Tippen groß aufgehen. Der Design-Chat zeichnet beides. */
.bug-sheet__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: 0 0 var(--space-3); }
.bug-sheet__thumbs[hidden] { display: none; }
.bug-sheet__thumb { position: relative; width: 72px; height: 72px; }
.bug-sheet__thumb canvas { display: block; width: 72px; height: 72px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.bug-sheet__thumb .btn { position: absolute; top: -10px; right: -10px; background: var(--bg-1); border: 1px solid var(--line); }
.bug-report__images { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Lange Wörter im Seitenkopf (Runde 15b, Nachtrag Gesamt-Check, Brücke) ----------
   Ein Titel oder Dateiname mit einem langen Wort ohne Trennstelle („Lehrunterlagen GergerVolkmarHollmannKletecka_…“) lief
   im Seitenkopf unter Suchen und Mehr aus dem Fenster, am iPhone wurde die Seite 581 px breit (F06). Titel und Angaben
   dürfen innerhalb eines Worts umbrechen. Der Design-Chat übernimmt die Regel ins Artefakt „Medix“. */
.page-head__row > .h1 { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.page-head__meta > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Frage und Antwort gleich gesetzt (Runde 14, Nachtrag Gesamt-Check, Brücke) ----------
   Die Antwort bekam über `.flashcard .text` immer 17/26, die Frage 17/24 und erst ab 1180 px 18/27 (F09). Laut Guideline
   Karteikarte sehen beide gleich aus: 17/24, ab 744 px 18/27. Der Medix-Text in Frage und Antwort übernimmt Größe und
   Zeilenhöhe seines Bereichs; kleinere Karten (mini, Fernbedienung) und Begriffs-Karten behalten ihre eigenen Werte.
   Der Design-Chat übernimmt die Regel ins Artefakt „Medix“. */
.flashcard__question .text, .flashcard__answer .text { font-size: inherit; line-height: inherit; }
@media (min-width: 744px) { .flashcard__question, .flashcard__answer { font-size: 18px; line-height: 27px; } }

/* ---------- Kontrast gedämpfter Zeilen (Runde 20d und 20e, Nachtrag Gesamt-Check, Brücke) ----------
   Gedämpft über die Deckkraft fielen im Papier-Theme die Unterzeile im goldenen Knopf „Lernen“ (opacity .8) und Art und
   Unterzeile vergangener Einheiten (`slot--past`, opacity .75) unter 4,5:1 (F13, F14). Die Unterzeile steht voll, eine
   vergangene Einheit tritt über weniger Farbe zurück statt über weniger Deckkraft.
   Nachtrag Nachbessern 08.10. (F34): Halb entsättigt war eine vergangene Einheit kaum, ein erledigter Punkt auf Heute (Fläche
   bg-1 ohne Farbe) gar nicht von einer offenen Zeile zu unterscheiden. Vergangen ist jetzt Rahmen ohne Fläche, Titel ink-2,
   Art ink-3 (beide halten 4,5:1 auf bg-0 bis bg-3); erledigt (is-done wie im Tagesplan) streicht den Titel zusätzlich durch.
   Der Design-Chat übernimmt die Regeln ins Artefakt „Medix“. */
.actions .btn--primary small { opacity: 1; }
.slot--past { opacity: 1; filter: none; background: transparent; border-color: var(--line); }
.slot--past .slot__title { color: var(--ink-2); }
.slot--past .slot__kind { color: var(--ink-3); }
.slot.is-done .slot__title { color: var(--ink-3); text-decoration: line-through; }

/* ---------- Gemeldet: der ganze Satz (Runde 29, Nachtrag Gesamt-Check, Brücke) ----------
   Unter „Offen“ und „Erledigt“ ist der Titel der Zeile Jakobs Satz (bis 2000 Zeichen), darunter steht, womit es erledigt
   ist; beides bricht um, statt mit „…“ zu enden (die Seite geht auch ohne JavaScript, deshalb hier und nicht in app.js). */
.bug-reports .row__title, .bug-reports .bug-report__note { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Einheiten und Prüfungen in einer halben Spalte (Runde 20d2, Nachtrag Nachbessern 08.10., Brücke) ----------
   Ab 1180px stehen die Abschnitte der Fach-Seite nebeneinander und die Einheiten in zwei Spalten. Auf der Fachgebiet-Seite
   steht „Prüfungen“ in einer halben Spalte neben „Material“; zwei Spalten darin gaben jeder Prüfung 200px, der Text brach
   Wort für Wort und „Wiederholungsprüfung“ lief unter den Nachbarn (Jakob, 08.10.). Zwei Spalten nur, wenn der Abschnitt
   selbst 720px breit ist (zwei Zeilen zu mindestens 352px; wo die Regel ab 1180px greift, ist der Abschnitt „Einheiten“
   der Fach-Seite breiter und bleibt zweispaltig); sonst untereinander.
   Der Design-Chat übernimmt die Regel ins Artefakt „Medix“ (oder zeichnet die Fachgebiet-Seite). */
@container (max-width: 719px) { .view--fach .units, .view--fach .units__rest { display: flex; } }

/* ---------- Bild beim Nachbessern (Runde 30b, Nachtrag 09.10., Brücke) ----------
   In der Werkstatt fügt Jakob ein Bild aus der Zwischenablage in „Nachbessern“ ein (oben und im Satz an einem Punkt der
   Prüfliste, public/app.js). Darunter steht es als Vorschau mit „Entfernen“; gespeichert zeigt die Liste „Allgemein“ es
   als Miniatur wie unter Gemeldet (bug-report__image). Am Punkt steht die Vorschau nur bei „Nachbessern“ (is-fix).
   Der Design-Chat zeichnet es und übernimmt die Regeln ins Artefakt „Medix“. */
.paste-image { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.paste-image[hidden] { display: none; }
.paste-image__img { display: block; max-width: 100%; max-height: 160px; width: auto; height: auto; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-2); }
.brief__item .paste-image { grid-column: 2 / -1; display: none; padding: var(--space-2) 0 0 calc(16px + var(--space-2)); }
.brief__item.is-fix .paste-image:not([hidden]) { display: flex; }

/* ---------- Wichtig: der Eintrag als Link (Runde 20e2; gezeichnet in Runde 11.10., Punkt 11) ----------
   Auf Einheit und Fach-Seite ist jeder Eintrag der Karte „Wichtig“ (card notes) ein Link: ohne JavaScript auf die Seite
   „Eintrag“, mit JavaScript öffnet er das Sheet „Eintrag“ (Satz ändern, „Entfernen“; Vorschau Sheet). Er sieht aus wie der Text
   (Farbe der Schrift, keine Unterstreichung), lange Wörter brechen um, und die Tippfläche reicht über die ganze Zeile samt small. */
.notes__list li > a { display: block; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; }
@media (hover: hover) { .notes__list li > a:hover { background: var(--bg-2); } }
.notes__list li > a:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.notes > .units__more > .notes__list { padding-top: var(--space-3); }

/* ---------- Sprach-Gespräch (nur iPhone-App; Runde 26f, Nachtrag nach dem ersten echten Test) ----------
   Ein Vollbild-Screen für das Lern-Gespräch mit AirPods oder im Auto, meist bei gesperrtem Schirm – hier die Ansicht, wenn man die App öffnet,
   während es läuft. Keine Live-Mitschrift: Von oben nach unten stehen Zustand und Zeit (auf einen Blick), die Bühne (.talk__stage), ein Hinweis
   und ganz unten, in Daumenreichweite, zwei große Knöpfe (Pause/Weiter, Beenden). Die Bühne zeigt beim Abfragen die gefragte Karte groß zum
   Mitlesen (Frage, Formeln und Lücken wie im Lernmodus; die Antwort erst, nachdem du geantwortet hast, dann die vier Bewertungen) und beim
   Erklären die Anzeige, die Medix gerade meint (Folie oder Seite, Bild aus dem Internet, kleine selbst erstellte Übersicht) – zoombar, sie bleibt, bis die nächste Karte oder Anzeige kommt.
   Kein Gold: es ist Bewerten und Zuhören, nicht „Lernen“ – auch aufgedeckte Lücken und das Wort „Antwort“ sind neutral. Der Zustand steht nie
   nur als Farbe da: Wort, Punkt und Wellenform. */
.talk { display: flex; flex-direction: column; gap: var(--space-3); min-height: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: var(--bg-0); color: var(--ink); }
.talk__top { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.talk__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: calc(var(--space-2) * -1); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; }
.talk__close:hover { background: var(--bg-2); color: var(--ink); }
.talk__mode { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.talk__mode > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zustand und Zeit: eine Zeile (Wort links, Zeit rechts, beide groß), darunter Punkt, Welle und Weg des Tons. */
.talk__state { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-3); row-gap: var(--space-1); }
.talk__live { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: 24px; }
.talk__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); }
.talk__wave { flex: none; display: flex; align-items: center; gap: 4px; height: 24px; }
.talk__wave i { display: block; width: 4px; height: 24px; border-radius: 2px; background: var(--ink-3); transform: scaleY(0.18); transform-origin: center; }
.talk__word { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-optical-sizing: auto; font-weight: 500; font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }
.talk__time { grid-column: 2; grid-row: 1; font-size: 28px; line-height: 38px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.talk__route { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.talk__route .icon { flex: none; width: 16px; height: 16px; }
.talk__route > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk--listening .talk__dot, .talk--listening .talk__wave i { background: var(--success); }
.talk--speaking .talk__dot, .talk--speaking .talk__wave i { background: var(--royal); }
.talk--connecting .talk__dot, .talk--connecting .talk__wave i { background: var(--warn); }
.talk--listening .talk__wave i { animation: talk-wave 1.4s ease-in-out infinite; --lo: 0.18; --hi: 0.45; }
.talk--speaking .talk__wave i { animation: talk-wave 0.9s ease-in-out infinite; --lo: 0.25; --hi: 1; }
.talk--connecting .talk__wave i { animation: talk-wave 1.6s ease-in-out infinite; --lo: 0.18; --hi: 0.3; }
.talk__wave i:nth-child(2) { animation-delay: -0.3s !important; } .talk__wave i:nth-child(3) { animation-delay: -0.6s !important; } .talk__wave i:nth-child(4) { animation-delay: -0.15s !important; } .talk__wave i:nth-child(5) { animation-delay: -0.45s !important; }
@keyframes talk-wave { 0%, 100% { transform: scaleY(var(--lo, 0.18)); } 50% { transform: scaleY(var(--hi, 0.45)); } }
@media (prefers-reduced-motion: reduce) { .talk__wave i { animation: none !important; transform: scaleY(0.5); } }

/* Die Bühne füllt alles zwischen Zustand und Knöpfen. Beim Abfragen: die Karte (wächst, scrollt bei langem Text von selbst) und, sobald
   die Antwort da ist, die Bewertung darunter. Beim Erklären: die Folie, oben, so groß wie die Breite hergibt. */
.talk__stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* Die Karte ist die Lernmodus-Karte (.flashcard: Frage, Antwort, Lücken, Formeln, gleiche Schrift), nur größer geschrieben und ohne
   Gold. Die Antwort kommt erst mit .is-revealed; mit ihr gehen die Lücken der Frage auf (.is-open, im Gespräch neutral statt golden). */
.talk__card { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: var(--space-3); padding: var(--space-4); }
/* Nichts in der Karte schrumpft: wird der Text zu lang (kleines Handy), scrollt die Karte. */
.talk__card > * { flex: none; }
.talk__card .flashcard__question, .talk__card .flashcard__answer { font-size: 21px; line-height: 30px; }
.talk__card .flashcard__answer-label { color: var(--ink-3); }
.talk__card .tx-gap.is-open { background: var(--bg-2); color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink-3); }
.talk__dots { display: flex; gap: 5px; }
.talk__dots i { flex: 1; max-width: 22px; height: 8px; border-radius: 4px; background: var(--line); }
.talk__dots i.is-again { background: var(--danger); } .talk__dots i.is-hard { background: var(--warn); } .talk__dots i.is-good { background: var(--success); } .talk__dots i.is-easy { background: var(--royal); }
.talk__dots i.is-now { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
/* Die Bewertung ist die Lernmodus-Bewertung (.rating), nur höher, damit man sie im Auto trifft. Die gewählte bleibt kurz stehen, die
   anderen werden leiser; dann kommt die nächste Karte. */
.talk .rating__btn { min-height: 64px; }
.talk .rating.is-picked .rating__btn { opacity: 0.35; pointer-events: none; }
.talk .rating.is-picked .rating__btn.is-picked { opacity: 1; box-shadow: inset 0 0 0 2px currentColor; }
/* Die Anzeige auf der Bühne (beim Erklären): eine Folie oder Seite aus der Vorlesung, ein Bild aus dem Internet oder eine kleine, von Medix
   erstellte Übersicht – alle gleich gebaut, alle zoombar (Medix.talkViews): ein Tipp wechselt zwischen eingepasst und 2,5-fach, Zwei-Finger-
   Zoom 1–5, Wischen verschiebt. Eingepasst ist sie nur so hoch wie das Bild; vergrößert nimmt sie die ganze Bühne. Darunter steht, was es ist
   und woher es kommt – bei Internet und Medix mit Chip, damit man nie glaubt, es stamme aus den eigenen Quellen. */
.talk__show { margin: 0; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.talk__show.is-zoomed { flex: 1 1 auto; }
.talk__view { min-height: 0; overflow: auto; border-radius: var(--radius-md); background: var(--bg-2); cursor: zoom-in; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.talk__view:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.talk__view > * { display: block; width: 100%; max-width: none; height: auto; border-radius: 0; box-shadow: none; }
.talk__view > .page { aspect-ratio: 4 / 3; height: auto; }
.talk__view > .page--portrait { aspect-ratio: 210 / 297; width: 72%; margin-inline: auto; }
.talk__show.is-zoomed .talk__view { flex: 1 1 auto; cursor: zoom-out; }
.talk__show.is-zoomed .talk__view > * { width: calc(var(--zoom, 2.5) * 100%); }
.talk__show.is-zoomed .talk__view > .page--portrait { width: calc(var(--zoom, 2.5) * 72%); margin-inline: 0; }
.talk__show figcaption { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.talk__show figcaption > span:first-child { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); overflow-wrap: anywhere; }
.talk__show figcaption b { color: var(--ink); font-weight: 600; }
.talk__show figcaption .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.talk__zoomcue { flex: none; display: inline-flex; color: var(--ink-3); }
.talk__zoomcue .icon { width: 22px; height: 22px; }
.talk__show.is-zoomed .talk__zoomcue { color: var(--ink); }
.talk__tally { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.talk__tally span { display: inline-flex; align-items: center; gap: 6px; }
.talk__tally span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.talk__tally .is-again::before { background: var(--danger); } .talk__tally .is-hard::before { background: var(--warn); } .talk__tally .is-good::before { background: var(--success); } .talk__tally .is-easy::before { background: var(--royal); }
.talk__tally b { color: var(--ink); font-weight: 600; }
.talk__hint { font-size: 13px; line-height: 18px; color: var(--ink-3); text-align: center; }

.talk__controls { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); margin-top: auto; }
.talk__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 72px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-lg); font: inherit; font-size: 19px; line-height: 24px; font-weight: 600; cursor: pointer; transition: transform 120ms ease-out; }
.talk__btn:active { transform: scale(0.97); }
.talk__btn .icon { width: 26px; height: 26px; }
.talk__btn--main { background: var(--ink); color: var(--ink-inverse); }
.talk__btn--main:hover { background: var(--ink-2); }
.talk__btn--end { background: var(--danger-soft); color: var(--danger); }
.talk__btn--end:hover { box-shadow: inset 0 0 0 1px var(--danger); }
.talk__btn--main .talk__resume, .talk--paused .talk__btn--main .talk__pause { display: none; }
.talk--paused .talk__btn--main .talk__resume { display: inline-flex; align-items: center; gap: var(--space-2); }
.talk__btn--main .talk__pause { display: inline-flex; align-items: center; gap: var(--space-2); }
.talk--connecting .talk__btn--main { opacity: var(--disabled); pointer-events: none; }
/* Pausiert: Welle flach, Zeit gedämpft – Karte, Antwort und Folie bleiben stehen, wie sie waren. */
.talk--paused .talk__wave i { transform: scaleY(0.18); animation: none; }
.talk--paused .talk__time { color: var(--ink-3); }
/* Summe am Ende: Titel, zwei Zahlen, die Bewertungen als eine gestapelte Leiste, was danach geschieht */
.talk-sum { display: flex; flex-direction: column; gap: var(--space-5); min-height: 100%; box-sizing: border-box; padding: var(--space-6) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: var(--bg-0); color: var(--ink); }
.talk-sum__sub { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.talk-sum__nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.talk-sum__num { padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.talk-sum__num b { display: block; font-size: 32px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.talk-sum__num span { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.talk-sum__stack { display: flex; gap: 3px; height: 14px; }
.talk-sum__stack i { display: block; height: 100%; border-radius: 4px; background: var(--ink-3); }
.talk-sum__stack .is-again { background: var(--danger); } .talk-sum__stack .is-hard { background: var(--warn); } .talk-sum__stack .is-good { background: var(--success); } .talk-sum__stack .is-easy { background: var(--royal); }
.talk-sum__rows { display: flex; flex-direction: column; gap: var(--space-2); }
.talk-sum .row__sub { white-space: normal; }
.talk-sum__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }
/* Das kleine Zeichen auf jeder Seite, solange ein Gespräch offen ist (wie der grüne Anruf-Balken bei iOS): eine schmale Leiste über dem Seiteninhalt,
   unter der Statusleiste, ganz tippbar – öffnet das Sprach-Gespräch. Nur in der iPhone-App; schiebt den Inhalt nach unten, deckt nichts zu. */
.call-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-4); background: var(--success-soft); color: var(--success); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.call-bar:hover { text-decoration: none; }
.call-bar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.call-bar__time { font-weight: 500; }
.call-bar--paused { background: var(--bg-2); color: var(--ink-2); }
.call-bar--paused .call-bar__dot { animation: none; }

/* ---------- Lernalgorithmus (Mehr → Lernalgorithmus, Runde 35l): Grenzen, Stellschrauben, Verlauf ---------- */
.algo { container: algo / inline-size; display: flex; flex-direction: column; gap: var(--space-6); }
.algo__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.algo-grid { display: flex; flex-direction: column; gap: var(--space-6); }
.algo-grid > div { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
@container algo (min-width: 960px) {
  .algo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .algo-grid__side { position: sticky; top: var(--space-6); }
}
.section__head .body-sm { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Deine Grenzen: Zeile mit Text und einem Regler; am Handy steht der Regler unter dem Text. */
.limit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.limit + .limit { border-top: 1px solid var(--line); }
.limit__ctl { justify-self: start; }
.limit__time { width: 128px; }
.limit .row__sub { white-space: normal; }
@container algo (min-width: 480px) {
  .limit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
  .limit__ctl { justify-self: end; }
}
.stepper { display: inline-flex; align-items: center; gap: var(--space-1); }
.stepper__value { min-width: 96px; text-align: center; font-size: 17px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper__value small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
/* Ziele und Stellschrauben: nur lesen. Wert, Skala mit den erlaubten Grenzen, darunter Wer und Warum. */
.knob { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.knob + .knob { border-top: 1px solid var(--line); }
.knob__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.knob__name { font-size: 16px; line-height: 22px; font-weight: 500; }
.knob__vals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-3); }
.knob__val { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: 16px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.knob__val small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.knob__key { align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.knob__key--hollow { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-2); }
.scale { display: block; width: calc(100% - 10px); margin: var(--space-1) 5px 0; overflow: visible; }
.scale__line { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.scale__dot { fill: var(--ink); }
.scale__dot--hollow { fill: var(--bg-1); stroke: var(--ink-2); stroke-width: 2; }
.scale__ends { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.knob__note { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.knob__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding-top: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.knob__who .chip { height: 22px; font-size: 11px; padding: 0 7px; }
/* Verlauf: Eichung der Woche als Satz, darunter die Änderungen mit Rückgängig. */
.algo-sum { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.algo-sum__line { font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.algo-sum__line b { font-weight: 700; }
.algo-sum__meta { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.change { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); padding: var(--space-3) var(--space-4); }
@container algo (min-width: 480px) { .change { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; } }
.change + .change { border-top: 1px solid var(--line); }
.change__meta { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.change__meta .chip { height: 22px; font-size: 11px; padding: 0 7px; }
.change__what { font-size: 16px; line-height: 22px; font-weight: 500; }
.change__why { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.change__act { justify-self: start; margin-left: calc(-1 * var(--space-3)); }
@container algo (min-width: 480px) { .change__act { justify-self: end; margin-left: 0; } }
.change.is-undone .change__what { text-decoration: line-through; color: var(--ink-3); }
.change.is-undone .change__why { color: var(--ink-3); }

/* ---------- Bereitschaft je Prüfung (Runde 35l, Stück 2): Karte auf Heute, Fach-Seite und Prüfungs-Einheit ---------- */
.ready { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.ready__title { margin: 0; font-family: var(--font-sans); font-variation-settings: normal; font-size: 17px; line-height: 24px; font-weight: 600; }
.ready__sum { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ready__sum b { font-weight: 600; color: var(--ink); }
.ready__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ready__bar { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-3); }
.ready__name { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ready__track { display: block; width: 100%; height: 8px; overflow: visible; }
.ready__fill { fill: var(--success); transition: width 240ms ease; }
.ready__bar.is-low .ready__fill { fill: var(--warn); }
.ready__goal { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ready__val { font-size: 14px; line-height: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ready__legend { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.ready__warn, .ready__done { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3); border-radius: var(--radius-md); }
.ready__warn { background: var(--warn-soft); }
.ready__warn > .icon { color: var(--warn); margin-top: 2px; }
.ready__done { background: var(--success-soft); }
.ready__done > .icon { color: var(--success); margin-top: 2px; }
.ready__warn p, .ready__done p { margin: 0; font-size: 14px; line-height: 20px; }
.ready__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ready__done .btn { grid-column: 2; justify-self: start; margin-left: calc(-1 * var(--space-3)); }
.ready__done[hidden], .ready__warn[hidden] { display: none; }
.section--ready .ready { max-width: 640px; }

/* ---------- Abrufwahrscheinlichkeit und Gewicht (Runde 35l, Stück 3): Meta-Zeile der Karteikarte und der Kartenliste ---------- */
.flashcard__meta--recall { display: flex; align-items: flex-start; gap: var(--space-3); white-space: normal; overflow: visible; text-overflow: clip; }
.flashcard__where { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* bis zu zwei Zeilen: Thema und Datum bleiben lesbar, die Zahl rechts bleibt stehen */
.flashcard--term .flashcard__meta--recall { justify-content: center; }
.flashcard--term .flashcard__where { flex: 0 1 auto; }
.recall { flex: none; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.recall__val { white-space: nowrap; }
.weight { flex: none; display: block; }
.weight__ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.weight__fill { fill: currentColor; stroke: none; }
.row__sub .recall { font-size: 12px; line-height: 16px; color: var(--ink-3); }   /* in der Kartenliste ist row__sub schon ein umbrechender Flex-Streifen: der Punkt rückt dahinter oder darunter */

/* ---------- Aufschub-Satz und 14-Tage-Vorschau (Runde 35l, Stück 4): Heute unter „Danach“, Plan unter dem Kopf ---------- */
.defer { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 0 var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.defer .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
.forecast { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.forecast__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-3); }
.forecast__title { margin: 0; font-family: var(--font-sans); font-variation-settings: normal; font-size: 15px; line-height: 22px; font-weight: 600; }
.forecast__legend { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.fc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; }
.fc__day { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0; }
.fc__col { display: block; width: 100%; overflow: visible; }
.fc__bar { fill: var(--ink-3); }
.fc__day.is-over .fc__bar { fill: var(--warn); }
.fc__day.is-today .fc__bar { fill: var(--ink-2); }
.fc__limit { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.fc__label { display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.fc__label b { font-weight: 600; color: var(--ink-2); }
.fc__day.is-today .fc__label b { color: var(--gold-ink); }
.forecast__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--ink); font-size: 13px; line-height: 18px; }
.forecast__note .icon { flex: none; color: var(--warn); margin-top: 1px; }
/* Planvorschau neu (Design-Runde 19.10., Meldung 1d39d181: „Nicht verständlich, was angezeigt werden soll“): erst die Antwort in einem Satz
   (forecast__note, jetzt ganz oben; mit forecast__note--ok, wenn alles passt), dann je Tag eine Säule, die **die Lernzeit des Tages** ist
   (fc2__track), gefüllt mit den **nötigen Minuten** (fc2__fill; über der Lernzeit voll und in warn), darunter die Minuten als Zahl; eine Legende
   in Worten. Der Strich und die zwei Maßstäbe der alten Leiste (fc) fallen weg: Voll heißt voll, egal ob 45 oder 90 Minuten Lernzeit. */
.forecast__sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.forecast__note--ok { background: var(--success-soft); }
.forecast__note--ok .icon { color: var(--success); }
.fc2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.fc2__day { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0; }
.fc2__col { display: block; width: 100%; height: 72px; }
.fc2__track { fill: var(--bg-2); }
.fc2__fill { fill: var(--ink-3); }
.fc2__day.is-today .fc2__fill { fill: var(--ink-2); }
.fc2__day.is-over .fc2__fill { fill: var(--warn); }
.fc2__min { text-align: center; font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.fc2__day.is-over .fc2__min { color: var(--warn); }
.fc2__day:not(.is-over) .fc2__min--none { color: var(--ink-3); font-weight: 500; }
.fc2__day .fc__label { margin-top: 0; }
.forecast__key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.forecast__key li { display: inline-flex; align-items: center; gap: 6px; }
.forecast__key i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink-3); }
.forecast__key i.track { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.forecast__key i.over { background: var(--warn); }

/* ---------- Öffentlicher Stundenplan (Runde 36): /timetable, eine Seite ohne App-Gerüst ----------
   Kein Seitenkopf, keine Navigation, kein Login: ein schmaler Streifen (pub) mit Kopf, Auswahl-Karte, Link-Karte, Anleitung und
   einem Satz „ohne Gewähr“. Bausteine wie überall (card, field, setup, list); nur Streifen und Adresse sind neu. Ab 600px Containerbreite
   stehen die drei Auswahlen nebeneinander, ab 960px links die Auswahl und rechts Link, Anleitung und Beispiel. */
.pub { container-type: inline-size; background: var(--bg-0); color: var(--ink); font-family: var(--font-sans); }
.pub__inner { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-8); }
.pub__head { display: flex; flex-direction: column; gap: var(--space-2); }
.pub__kicker { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.pub__lead { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.pub__form { display: flex; flex-direction: column; gap: var(--space-4); }
.pub__choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pub__result { display: flex; flex-direction: column; gap: var(--space-4); }
.pub__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.pub__url { padding: var(--space-3); background: var(--bg-2); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-2); overflow-wrap: anywhere; user-select: all; }
.pub__acts { display: flex; flex-direction: column; gap: var(--space-2); }
.pub__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pub__result--wait { align-items: center; text-align: center; color: var(--ink-3); }
.pub__wait-title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.pub__cols, .pub__left, .pub__right { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.pub__foot { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-2); }
@container (min-width: 600px) {
  .pub__inner { max-width: 720px; padding-top: var(--space-10); }
  .pub__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub__acts { flex-direction: row; }
  .pub__acts .btn { flex: 1; }
}
@container (min-width: 960px) {
  .pub__inner { max-width: 1040px; padding-top: var(--space-12); }
  .pub__cols { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .pub__left { position: sticky; top: var(--space-6); }
  .pub__choices { grid-template-columns: minmax(0, 1fr); }
  .pub__acts { flex-direction: column; }
  .pub__acts .btn { flex: none; }
}

/* Lernziele-Seite (Runde 11.10. abends, Punkt 9): eine Seite zeigt alle Lernziele, jede Zeile klappt auf (details, ohne JavaScript) – ganzer Satz, Karten, Einheiten, Bearbeiten, Archivieren.
   Keine Seite je Lernziel. Aufgeklappt zeigt die Zeile den Satz ganz, zu ist er auf zwei Zeilen gekürzt. */
.objective-item + .objective-item { border-top: 1px solid var(--line); }
.objective-item > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; }
.objective-item > summary::-webkit-details-marker { display: none; }
.objective-item > summary .objective__state { grid-column: 1; }
.objective-item > summary > .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.objective-item[open] > summary > .icon { transform: rotate(180deg); }
.objective-item > summary:hover { background: var(--bg-2); }
.objective-item:not([open]) .objective__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container view (min-width: 560px) { .objective-item > summary { grid-template-columns: minmax(0, 1fr) auto 18px; } .objective-item > summary .objective__state { grid-column: auto; } .objective-item > summary > .icon { grid-column: auto; grid-row: auto; } }
.objective-item__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.objective-item__facts { margin: 0; display: grid; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.objective-item__facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); }
.objective-item__facts dt { color: var(--ink-3); }
.objective-item__facts dd { margin: 0; color: var(--ink-2); }
.objective-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.objective-item__actions .btn--tertiary { margin-left: auto; }
.objective-item[data-archived] .objective__text { color: var(--ink-3); }
.objective-item:not([data-archived]) .only-archived, .objective-item[data-archived] .only-active { display: none; }
.objective-item[data-archived] .objective__state { display: none; }
.objective-archive > .list { margin-top: var(--space-2); }
.objective-archive > .body-sm { margin: var(--space-2) 0 0; }

/* Erklären-Panel mit Verlauf (Runde 11.10. abends, Punkt 6): Kopf mit × und Eingabefeld bleiben stehen, nur der Verlauf (Fakten, Schnellfragen, Gespräch) scrollt in sich.
   Markup: aside.explain > .explain__head · .explain__scroll · form.explain__input. Das Panel hat eine feste Höhe, damit der Kopf nie aus dem Fenster wandert. */
.explain__scroll { display: flex; flex-direction: column; gap: var(--space-4); }
.explain > .explain__head, .explain > .explain__input { flex: none; }
.explain__scroll > *, .explain__chat > * { flex: none; }                 /* nichts schrumpft: der Verlauf scrollt, statt Beiträge zu quetschen */
.explain > .explain__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 1180px) {
  .study-grid .explain.is-open:has(> .explain__scroll) { height: calc(100dvh - var(--space-6) * 2); max-height: 760px; }   /* Lernmodus und Viewer: klebende Spalte, so hoch wie das Fenster */
}
/* Einheit und Fach: das Panel liegt als Karte oben in der Seitenspalte, über Lernstand und Knöpfen, und scrollt mit der Seite (kein Kleben: es würde die Karten darunter verdecken). Höhe wie das Fenster, höchstens 640px. */
@media (min-width: 744px) {
  .view__side > .explain.is-open { position: static; height: min(640px, calc(100dvh - var(--space-6) * 2)); padding: var(--space-3) var(--space-4); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .view__side > .explain.is-open > .explain__scroll { margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); }
}
/* Angebot nach zweimal „Nochmal“ unter 1180px (Punkt 7, am iPhone seit 13.10.): dort läge das Panel als Ebene bzw. Sheet über „Gut“ und „Leicht“ und öffnet deshalb nicht von selbst; stattdessen steht über der Bewertung eine ruhige Zeile. Erst ab 1180px liegt das Panel als Spalte daneben und öffnet von selbst. */
.offer-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--royal-soft); font-size: 14px; line-height: 20px; }
.offer-line > .icon { flex: none; width: 18px; height: 18px; color: var(--royal); }
.offer-line__text { flex: 1; min-width: 0; }
.offer-line__text b { font-weight: 600; }
.offer-line .btn { flex: none; }
@media (min-width: 1180px) { .offer-line { display: none; } }

/* Design-Runde 13.10. – Erklären-Panel: Fuß und Statuszeile, Viewer-Spalte mit fester Höhe.
   Das Panel hat vier Teile: Kopf · Verlauf (explain__scroll) · Feld (explain__input) · Fuß (chat__foot explain__foot). Über dem Feld steht, solange der Agent schreibt, die Statuszeile explain__hint („Der Agent schreibt …“); sonst fehlt sie. */
.explain > .chat__foot, .explain > .explain__hint { flex: none; }
.explain > .explain__hint { padding: 0 var(--space-2); }
.explain__foot { display: block; margin-top: calc(var(--space-2) * -1); }
@media (min-width: 744px) {
  .viewer-grid .explain.is-open:has(> .explain__scroll) { position: sticky; top: var(--space-6); height: calc(100dvh - var(--space-6) * 2); max-height: 760px; }
}

/* Design-Runde 13.10. – Lernschritt: ein Knopf je Schritt („Starten“, dann „Fertig“); „Fertig“ fragt im Sheet „Wie lief es?“; das Ergebnis eines erledigten Schritts steht am Ende von step__sub und öffnet dasselbe Sheet (ändern). */
.step__result { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.step__result .icon { width: 12px; height: 12px; }
.result { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-3); }   /* eigene Klassen, nicht .rating: die Handler der Karte (Medix.study) hören auf .rating__btn */
.result__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 2px; border-radius: var(--radius-md); font-size: 15px; line-height: 20px; font-weight: 600; transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.result__btn:active { transform: scale(0.97); }
.result__btn small { font-size: 11px; line-height: 14px; font-weight: 500; opacity: 0.85; }
.result__btn--again { background: var(--danger-soft); color: var(--danger); }
.result__btn--hard { background: var(--warn-soft); color: var(--warn); }
.result__btn--good { background: var(--success-soft); color: var(--success); }
.result__btn--easy { background: var(--royal-soft); color: var(--royal); }
.result__btn:hover { box-shadow: inset 0 0 0 1px currentColor; }
.result-sheet .sheet__actions { margin-top: var(--space-3); }

/* Design-Runde 13.10. – Tagesplan: der Lernblock ist nicht von Hand abhakbar (er gilt als erledigt, sobald sein letzter Schritt erledigt ist). Statt des Kästchens steht „⋯“ (öffnet „Lernblock-Optionen“), nach dem letzten Schritt das gesperrte Häkchen; der Text der Zeile ist ein Link nach Heute zum aktuellen Schritt. */
.plan__more { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer; }
.plan__more .icon { width: 16px; height: 16px; }
.plan__text { color: inherit; text-decoration: none; min-width: 0; }
.check:disabled { cursor: default; }
.check:disabled:checked { opacity: 1; }

/* Design-Runde 13.10. – „Mehr Zeit“ ohne Prognose: der Satz nennt die Tage und die Zeit, die Unterzeile sagt, dass die Balken bis zum Lernen bleiben. */
.ready__done-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ready__done-sub[hidden] { display: none; }

/* Design-Runde 13.10. – Plan: Umschalter „Meine Gruppe · Alle“ (Runde 24). Ein GET-Formular, kein JavaScript: „Meine Gruppe“ (Vorgabe) zeigt Termine der eigenen Gruppe und alle für alle, „Alle“ (?all=1) zeigt zusätzlich die Termine anderer Gruppen gedämpft. */
.plan-scope { flex: none; }
.plan-scope .segmented { width: 100%; }
.slot--faded { opacity: 0.5; }
@media (min-width: 744px) {
  .plan-scope .segmented { width: auto; }
  .plan-scope .segmented__item { flex: 0 0 auto; padding-inline: var(--space-4); }
}

/* Design-Runde 13.10. (Nachtrag) – Erklären hat den Vorrang: Solange das Panel offen ist, tritt der Rest der Seite zurück.
   Einheit und Fach (ab 744px): die Spalte wird breiter (400px, ab 1180px 460px), das Panel klebt in voller Fensterhöhe, die übrigen Karten der Spalte (Lernstand, Knöpfe) ruhen bis zum Schließen,
   und die Abschnitte des Hauptteils stehen untereinander statt nebeneinander. Karte und Viewer: die Spalte wird ebenfalls breiter (ab 1180px 440px). Unter 744px ändert sich nichts: dort liegt das Panel als Sheet über der Seite. */
@container view (min-width: 744px) {
  .view__cols:has(> .view__side > .explain.is-open) { grid-template-columns: minmax(0, 1fr) 400px; }
  .view__side:has(> .explain.is-open) > :not(.explain) { display: none; }
  .view__side > .explain.is-open { height: calc(100dvh - var(--space-4) * 2); max-height: 860px; }   /* die Spalte selbst klebt schon */
}
@container view (min-width: 1180px) {
  .view__cols:has(> .view__side > .explain.is-open) { grid-template-columns: minmax(0, 1fr) 460px; }
  .view__cols:has(> .view__side > .explain.is-open) .view__split { grid-template-columns: minmax(0, 1fr); }
  .view__cols:has(> .view__side > .explain.is-open) .view__col { gap: var(--space-6); }
}
@media (min-width: 1180px) {
  .viewer-grid.has-explain { grid-template-columns: minmax(0, 1fr) 440px; }
  .study-grid.has-explain { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* ---------- NotizBlatt · Design-Runde 13.10. abends (App-Notiz 13.10., Punkte 1 bis 5) ----------
   1 Aufnahme-Platz in fester Breite (nb-rec-slot): Knopf und Pille tauschen den Platz, nichts links davon rückt.
   2 Hinweis nach einer Unterbrechung (nb-notice, ruhig und liegt über dem Blatt, bis man „OK“ tippt).
   3 Stiftstufe XXS (width--xxs, stroke--xxs) unter XS; „Auto“: die gewählte Stufe gilt am Bildschirm.
   4 Abspielen im Kopf (nb-play, im selben Platz) und der Player unten (nb-player, bisher eine Brücke in der App).
   5 Rand rechts (nb-edge): „das Blatt geht weiter“ und „hier ist das Blatt zu Ende“. */
.nb-rec-slot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); flex: none; width: 172px; height: 32px; }
@container (max-width: 979px) { .nb-rec-slot { width: 124px; } }
.nb-rec-slot > .btn { flex: none; }
.nb-rec-slot .nb-rec .icon { width: 20px; height: 20px; }
.nb-rec-slot .audio { flex: 1; min-width: 0; height: 32px; gap: var(--space-2); padding: 0 2px 0 var(--space-3); border-color: var(--line); box-shadow: none; }
.nb-rec-slot .audio__time { flex: 1; min-width: 0; text-align: left; color: var(--ink-2); }
.nb-rec-slot .audio__wave rect { fill: var(--ink-3); }
@container (max-width: 979px) { .nb-rec-slot .audio__wave { display: none; } }
.nb-rec-slot .audio .btn--icon { color: var(--ink-2); flex: none; }
.nb-rec-slot [hidden] { display: none; }
/* Abspielen im Kopf: nur, wenn die Notiz eine Aufnahme hat, dieses Gerät sie abspielen kann und der Player zu ist. */
.nb-play { color: var(--ink-2); }
.nb-play[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }
/* Hinweis über dem Blatt (liegt in nb__body, schiebt nichts): bleibt, bis man ihn schließt – wer in der Vorlesung schreibt, sieht ihn später. */
.nb-notice { position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 36; display: flex; align-items: flex-start; gap: var(--space-3); width: min(520px, calc(100% - var(--space-4) * 2)); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); font-size: 14px; line-height: 20px; color: var(--ink); }
.nb-notice > .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ink-2); }
.nb-notice__text { flex: 1; min-width: 0; }
.nb-notice__text b { font-weight: 600; }
.nb-notice__text small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.nb-notice .btn { flex: none; }
.nb-notice--warn { background: var(--warn-soft); border-color: transparent; }
.nb-notice--warn > .icon { color: var(--warn); }
.nb-notice[hidden] { display: none; }
/* Stiftstufe XXS: eine Stufe unter XS (Blatt-Pixel 0,5; Marker 6). Die gewählte Stufe gilt am Bildschirm („Auto“): hineingezoomt schreibt der Stift feiner, nie dicker als gewählt; geschriebene Striche behalten ihre Breite. */
.stroke--xxs { stroke-width: 0.5; }
.stroke--marker.stroke--xxs { stroke-width: 6; }
.width--xxs i { width: 1px; height: 1px; }
/* Der Player unten (aus den Teilen des Viewer-Players): Play, Stelle, Zeitleiste, Dauer, Chip der Aufnahme, Schließen. Er steht, solange er offen ist; unter 560 px nur Play, Stelle, Zeitleiste und Schließen. */
.nb-player { display: flex; align-items: center; gap: var(--space-2); flex: none; min-width: 0; padding: var(--space-2) var(--space-3); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg-1); }
.nb-player[hidden] { display: none; }
.nb-player .timeline { flex: 1; min-width: 48px; height: 24px; cursor: pointer; touch-action: none; }
.nb-player .timeline:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 4px; }
.nb-player__sum { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-player .audio__time, .nb-player__len { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-player__chip { flex: none; font-variant-numeric: tabular-nums; cursor: pointer; }
.nb-player .btn--primary:hover { background: var(--gold-strong); }
@container (max-width: 559px) { .nb-player__len, .nb-player__chip { display: none; } }
/* Rand rechts: ein weicher Schleier mit einem runden Pfeil, solange das Blatt rechts weitergeht (Tipp: eine Bildschirmbreite weiter); am Ende des Blatts (12 000 px) eine feste Kante mit „Ende des Blatts“. Das Blatt wächst von selbst, sobald etwas an den Rand reicht. */
.nb-edge { position: absolute; top: 0; bottom: 0; right: 0; width: 40px; z-index: 6; display: none; align-items: center; justify-content: center; pointer-events: none; background: linear-gradient(to left, color-mix(in srgb, var(--bg-1) 92%, transparent), transparent); }
.nb.has-explain .nb-edge { right: 360px; }
.nb-edge.is-more, .nb-edge.is-end { display: flex; }
.nb-edge__go { pointer-events: auto; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg-3); color: var(--ink-2); box-shadow: var(--shadow-1); cursor: pointer; }
.nb-edge__go .icon { width: 18px; height: 18px; }
.nb-edge.is-end { width: 24px; background: none; border-right: 3px solid var(--line); }
.nb-edge.is-end .nb-edge__go { display: none; }
.nb-edge__end { display: none; writing-mode: vertical-rl; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nb-edge.is-end .nb-edge__end { display: block; }
.nb.is-immersive .nb-edge { display: none; }
/* Erklären-Fuß: ab 80 % des Monatsdeckels warnt die Kostenzahl (Wort und Symbol, nicht nur Farbe). */
.explain__cost.is-warn { color: var(--warn); font-weight: 600; white-space: nowrap; }
.explain__cost .icon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
@container (max-width: 979px) { .nb-rec-slot .nb-lbl { display: none; } .nb-rec-slot .nb-rec { width: 36px; padding: 0; justify-content: center; } }

/* ---------- Themenblock auf Heute (Design-Runde 13.10. abends): die Minuten eines Schritts stehen rechts ---------- */
.step__min { flex: none; padding-top: 1px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot__steps li.is-done .step__min { color: var(--ink-3); font-weight: 500; }

/* ---------- Karte: Kopfzeile mit Fach · Thema als Chips und der Stufe (Design-Runde 13.10. abends) ---------- */
.flashcard__where--chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); overflow: visible; text-transform: none; letter-spacing: 0; -webkit-line-clamp: unset; }
.flashcard__where--chips .chip { height: 24px; padding: 0 8px; font-size: 12px; min-width: 0; max-width: 100%; margin: 0; font-family: inherit; }
.flashcard__where--chips .chip > .chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flashcard__where--chips button.chip { cursor: pointer; }
.flashcard__where--chips button.chip .icon { width: 14px; height: 14px; margin-right: -2px; }
.flashcard__meta--recall { flex-wrap: wrap; row-gap: var(--space-2); }
.flashcard__meta--recall > .flashcard__where--chips { flex: 1 1 260px; min-width: 0; }
.flashcard__marks { flex: none; display: flex; align-items: center; gap: var(--space-3); margin-left: auto; text-transform: none; letter-spacing: 0; }
.study-grid > .sheet--absolute:not(.is-open) { visibility: hidden; }
.level { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.level__bar { fill: none; stroke: currentColor; stroke-width: 1.2; }
.level__bar.is-on { fill: currentColor; stroke: none; }
.flashcard__img svg, .flashcard__img img { display: block; width: 100%; height: auto; background: var(--paper); }

/* ---------- Design-Runde 14.10.: Erklären reicht bis zum Schirmende, Karten-Zonen, Voraussetzungen ---------- */
/* Punkt 1: das Panel im Lernmodus und im Viewer war bei 760px gedeckelt; jetzt reicht es vom Kopf der Spalte bis kurz vor den unteren Rand des Schirms (Kopf und Eingabe stehen, der Verlauf scrollt). --screen-h ersetzt 100dvh nur in den Vorschau-Rahmen. */
@media (min-width: 744px) {
  .study-grid .explain.is-open:has(> .explain__scroll), .viewer-grid .explain.is-open:has(> .explain__scroll) { height: calc(var(--screen-h, 100dvh) - var(--space-6) - var(--space-3)); max-height: none; }
}
/* Punkt 3: die Zonen unter der Antwort (Bild, Hinweis, Voraussetzungen, Verweis) stehen im gleichen Abstand (16px); der Verweis trägt dort keine eigene Linie. Ohne Antwort (Lückentext) stehen sie in .flashcard__zones unter dem Text. */
.flashcard__answer > .flashcard__img, .flashcard__answer > .flashcard__hint, .flashcard__answer > .flashcard__requires, .flashcard__answer > .flashcard__source { margin-top: var(--space-2); }
.flashcard__answer > .flashcard__source { border-top: 0; padding-top: 0; }
.flashcard__zones { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.flashcard__zones > .flashcard__source { border-top: 0; padding-top: 0; }
.flashcard:not(.is-revealed) .flashcard__zones { display: none; }
.flashcard.is-revealed .flashcard__zones { animation: fade-up 240ms cubic-bezier(.2,.8,.2,1); }
.flashcard__source .chip { min-width: 0; max-width: 100%; }
.flashcard__source .chip > .chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Punkt 4: „Setzt voraus“ – die Karten, deren Begriffe diese Karte braucht, als Chips (Tipp öffnet die Karte). */
.flashcard__requires { display: flex; flex-direction: column; gap: var(--space-2); }
.flashcard__requires .flashcard__note-label { margin: 0; }
.flashcard__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.flashcard__requires .chip { height: 24px; padding: 0 8px; font-size: 12px; max-width: 100%; min-width: 0; }
.flashcard__requires .chip > .chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flashcard__requires .chip .icon { width: 14px; height: 14px; }
.flashcard.is-revealed .flashcard__requires { animation: fade-up 240ms cubic-bezier(.2,.8,.2,1); }
.flashcard:not(.is-revealed) .flashcard__requires { display: none; }
/* Punkt 8: auf der Kartenseite hängt die Herkunft-Klappe unter dem Lernziel (statt der Werkzeuge) und steht dort genau einmal. */
.flashcard__foot > .flashcard__origin { margin-top: var(--space-1); }

/* ---------- Design-Runde 14.10. (Punkt 2): Artefakt auf Lernseite und Dokument-Ansicht – so breit wie der Text, mit Fuß „Öffnen“ ---------- */
.section--try { display: flex; flex-direction: column; gap: var(--space-3); }
.section--try > .artifact { max-width: none; }
.artifact--page .artifact__frame { aspect-ratio: 4 / 3; min-height: 300px; }
@media (min-width: 744px) { .artifact--page .artifact__frame { aspect-ratio: 16 / 10; } }
.artifact__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.artifact__foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact.is-full .artifact__foot { display: none; }

/* ---------- Design-Runde 14.10. (Punkt 5): Themenbaum zum Aufklappen, Zahlen je Knoten; Stufe in der Kartenliste ---------- */
.tree { display: flex; flex-direction: column; }
.tree__head { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-1); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tree__node { display: flex; flex-direction: column; }
.tree__row { display: flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-3) 0 var(--space-1); }
.tree__toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-3); cursor: pointer; }
.tree__toggle .icon { width: 18px; height: 18px; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.tree__toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.tree__toggle--none { visibility: hidden; pointer-events: none; }
.tree__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.tree__link:hover .tree__name { color: var(--gold-ink); }
.tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 20px; }
.tree__num { flex: none; min-width: 2.4em; text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tree__due { flex: none; min-width: 2.6em; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill); text-align: center; font-size: 12px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--gold-soft); color: var(--gold-ink); }
.tree__due--none { background: transparent; color: var(--ink-3); font-weight: 500; }
.tree__children { margin-left: 22px; border-left: 1px solid var(--line); }
.tree__children[hidden] { display: none; }
.tree-card { overflow: hidden; padding-bottom: var(--space-2); }
.tree-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
/* ---------- Themen in der Kartenliste, neu (Design-Runde 19.10., Meldung a771b38d): ersetzt tree-card ----------
   Eine Liste statt einer Karte mit Spaltenkopf: oben „Alle Themen“, darunter die Themen mit Zeilen „12 Karten · 5 fällig“ (die Zahlen tragen
   ihr Wort, kein „Karten · Fällig“-Kopf mehr), Unterthemen eingerückt. Das gewählte Thema ist markiert (bg-2, fett, Häkchen) – vorher sah
   man nicht, welches filtert. tree-card und tree bleiben im Stylesheet, bis die App umgestellt hat. */
.topics { display: flex; flex-direction: column; gap: var(--space-2); }
.topics__list > * + * { border-top: 1px solid var(--line); }
.topic { display: flex; align-items: center; gap: var(--space-1); min-height: 56px; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); color: var(--ink); text-decoration: none; }
a.topic, .topic__link { cursor: pointer; transition: background-color 120ms ease-out; }
a.topic:hover, .topic__link:hover { background: var(--bg-2); }
.topic--all { padding-left: var(--space-4); }
.topic__link { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: inherit; text-decoration: none; border-radius: var(--radius-md); padding: 0 var(--space-2); }
.topic__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.topic__name { font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.topic__sub b { font-weight: 600; color: var(--gold-ink); }
.topic__tick { display: none; flex: none; color: var(--ink); }
.topic__tick .icon { width: 18px; height: 18px; }
.topic.is-active, .topic.is-active .topic__link { background: var(--bg-2); }
.topic.is-active .topic__name { font-weight: 600; }
.topic.is-active .topic__tick, .topic__link.is-active .topic__tick { display: inline-flex; }
.topic__children { border-top: 1px solid var(--line); background: var(--bg-0); }
.topic__children > * + * { border-top: 1px solid var(--line); }
.topic--leaf { min-height: 48px; padding-left: calc(var(--space-1) + 40px + var(--space-1) + var(--space-2)); }
.topic__children[hidden] { display: none; }
/* Stufe in der Kartenliste: drei Balken (wie auf der Karte) neben dem Gewicht, das Wort bleibt im Namen für Vorlesegeräte */
.cardrow__marks { display: inline-flex; align-items: center; gap: var(--space-3); }
.level--list { font-size: 12px; font-weight: 500; }

/* ---------- Kosten je Zweck (Design-Runde 14.10.): Mehr → Agenten, Umschalter Monat · 7 Tage ---------- */
.costs { display: flex; flex-direction: column; gap: var(--space-3); }
.costs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.costs__head .segmented { flex: none; width: auto; }
.costs__head .segmented__item { flex: none; padding: 0 14px; white-space: nowrap; }
.costs__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.costs__total b { color: var(--ink); font-weight: 600; }
.costs .list[hidden], .costs .costs__total[hidden] { display: none; }
.costs .row__trail { gap: var(--space-2); }
.costs .row__trail .chip { height: 22px; padding: 0 8px; font-size: 12px; }
.costs .row__value { min-width: 56px; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.costs .row--more .row__title, .costs .row--more .row__value { color: var(--ink-2); font-weight: 400; }
.costs .row--more .icon { width: 18px; height: 18px; }

/* ---------- Design-Runde 14.10. (Nachtrag): Assistent von überall · Material in Ordnern · Lernziel in der Einheit · „Uni aus“ nachtragen ---------- */
/* Assistent: ein Gespräch ohne Einheit, mit dem Bezug der Seite, auf der du warst */
.ask-fab { position: fixed; z-index: 29; right: max(var(--space-4), env(safe-area-inset-right, 0px)); bottom: calc(12px + var(--tabbar) + 12px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); color: var(--gold-ink); cursor: pointer; transition: transform 160ms ease-out; }
.ask-fab:active { transform: scale(0.96); }
.ask-fab .icon { width: 24px; height: 24px; }
@media (min-width: 744px) { .ask-fab { display: none; } }
.chat__scope { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.scope-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: 40px; padding: 0 var(--space-1) 0 var(--space-3); border-radius: var(--radius-pill); background: var(--royal-soft); color: var(--royal); font-size: 13px; line-height: 18px; font-weight: 600; }
.scope-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip__x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; }
.scope-chip__x:hover { background: var(--bg-3); }
.msg__choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.msg__choices .chip--action { height: 40px; font-size: 14px; }
.plandiff { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.plandiff__row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: var(--space-2); align-items: baseline; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.plandiff__label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.plandiff__row--before { background: var(--bg-2); color: var(--ink-2); }
.plandiff__row--before .plandiff__what { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.plandiff__row--after { background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--ink); }
.plandiff__what b { font-variant-numeric: tabular-nums; font-weight: 600; }
.plandiff__also { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.plandiff__also .icon { flex: none; margin-top: 1px; }
/* Material in Ordnern: derselbe Baum wie die Themen (Ordner = Thema), Dateien liegen als Zeilen darin */
.material-tree__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.material-tree [hidden] { display: none !important; }
.folder-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--royal-soft); font-size: 13px; line-height: 18px; color: var(--ink); }
.folder-note .icon { flex: none; color: var(--royal); }
.folder-note .btn--undo { margin-left: auto; }
.tree--files { gap: 2px; }
.tree--files .tree__row { padding-right: var(--space-1); }
.tree__icon { flex: none; display: inline-flex; color: var(--gold-ink); }
.tree__icon .icon { width: 20px; height: 20px; }
.tree--files .tree__name { font-weight: 600; }
.tree__more { flex: none; }
.tree--files .tree__children { margin-left: 22px; padding-left: var(--space-1); }
.tree--files .tree__children > .row.material { grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 48px; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2); border-radius: var(--radius-md); }
.tree--files .tree__children > .row.material:hover { background: var(--bg-2); }
.tree--files .material__thumb { width: 32px; height: 42px; border-radius: 5px; }
.tree--files .row__sub { white-space: normal; }
.tree__row.is-drop { background: var(--gold-soft); outline: 2px dashed var(--gold-line); outline-offset: -2px; border-radius: var(--radius-md); }
.tree__node--none > .tree__row .tree__name { color: var(--ink-2); font-weight: 500; }
.tree__hint { margin: 0; padding: 0 var(--space-3) var(--space-2) 46px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.tree__new { align-self: flex-start; margin-top: var(--space-1); }
.drag-ghost { position: absolute; z-index: 5; pointer-events: none; box-shadow: var(--shadow-2); transform: rotate(-2deg); }
.pick { display: flex; flex-direction: column; }
.pick__row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3) 0 calc(var(--space-3) + var(--d, 0) * 22px); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 22px; text-align: left; cursor: pointer; }
.pick__row:hover { background: var(--bg-2); }
.pick__row .tree__icon { color: var(--gold-ink); }
.pick__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__num { flex: none; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pick__tick { flex: none; width: 20px; color: var(--gold-ink); visibility: hidden; }
.pick__row[aria-checked="true"] { background: var(--gold-soft); }
.pick__row[aria-checked="true"] .pick__tick { visibility: visible; }
.pick__new { display: flex; gap: var(--space-2); padding: var(--space-2) 0 0; }
.pick__new .field__input { flex: 1; min-width: 0; }
/* „Uni aus“ nachtragen: gestern nicht gemeldet, jetzt die Zeit eintragen */
.uni-late { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.uni-late__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.uni-late__label { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.uni-late .field__input { width: 8.5em; }
.uni-off--late .row__sub { white-space: normal; }

/* ---------- Design-Runde 14.10. (Nachtrag, Feinschliff): Ordner-Ansicht ---------- */
.material-tree .segmented__item { flex: none; white-space: nowrap; min-width: 72px; }
.tree--files .tree__name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.tree--files .tree__children > .row.material { border: 0; }
.list--wrap .row__sub { white-space: normal; }

/* ---------- Design-Runde 14.10. (Nachtrag, Panel): Assistent als Ebene am rechten Rand ---------- */
@media (min-width: 744px) {
  .explain.explain--global.is-open { position: fixed; z-index: 55; top: var(--space-3); right: max(var(--space-3), env(safe-area-inset-right, 0px)); bottom: var(--space-3); width: min(440px, calc(100vw - 2 * var(--space-3))); height: auto; max-height: none; padding: var(--space-3) var(--space-4); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
}
@media (min-width: 744px) and (max-height: 499px) { .explain.explain--global.is-open { right: var(--shell-right); } }