/* memorysh — Richtung C „Nachschlagewerk" (PO-Wahl 2026-09-27): w3schools weitergedacht.
   Dunkle Kopfleiste mit Reitern, Themenbaum links, Inhalt rechts; Frage/Antwort wie ein
   Beispielkasten mit Kopfleiste; Fortschritt als segmentierte Balken (1 Lesen | 3 Testen).
   Dazu aus A die Reiter „Karten x.y | Buch x.y", aus B der Lernkasten.
   Schrift: Atkinson Hyperlegible (für Lesbarkeit entworfen), Code: Source Code Pro — beide lokal. */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
/* Wortmarke: Nunito 900 (OFL), lokal wie die übrigen Schriften (PO 2026-09-29) */
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("fonts/nunito-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-weight: 400; font-display: swap;
  src: url("fonts/source-code-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-weight: 600; font-display: swap;
  src: url("fonts/source-code-pro-latin-600-normal.woff2") format("woff2"); }

/* --- Farben -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --page: #FFFFFF; --rail: #F5F7F9; --ink: #16202A; --muted: #4A5663; --faint: #A3ACB6; --rule: #E3E7EB;
  --bar: #16202A; --bar-ink: #C9D2DA; --bar-on: #0B7A75; --pager: #16202A;
  --teal: #0B7A75; --teal-btn: #0B7A75; --teal-ink: #0B5A56; --teal-bg: #E7F3F2; --active: #DCEFEE;
  --link: #0B63B6; --link-hover: #084A89;
  --p: #5B4FC4; --r: #D64545; --y: #E8B400; --g: #1E9E6A; --o: #E07B24; --m: #D5DBE1;
  --p-bg: #EEECFB; --r-bg: #FBECEC; --g-bg: #E8F6EF; --g-ink: #13704A; --draft: #8A6A00;
  --code-bg: #F5F7F9;
  --main-bg: #F4F6F8; --panel-bg: #FFFFFF;  /* Layout A: Kästen auf leicht getöntem Grund */
  /* Score-Stufen als Schrift: im Hellen dunkler, sonst ist Gelb auf Weiß unlesbar */
  --tone-p: #5B4FC4; --tone-r: #C13434; --tone-o: #B25A10; --tone-y: #8A6A00; --tone-g: #13704A; --tone-t: #0B63B6;
  --hm0: #EBEEF1; --hm1: #B7E0DD; --hm2: #6CC0BA; --hm3: #1F9A93; --hm4: #0B6B66;
  /* Ordnerebenen (PO 2026-09-28, Entwurf A): Hintergrund dunkel → hell je Tiefe */
  --lvl0-bg: #2B3A48; --lvl0-ink: #FFFFFF; --lvl0-path: #C9D2DA; --lvl1-bg: #C9D4DE; --lvl1-ink: #16202A; --lvl1-path: #3A4652;
  --lvl2-bg: #EAEFF3; --lvl2-ink: #16202A; --lvl2-path: #4A5663; --lvl3-bg: #F5F7F9; --lvl3-ink: #16202A; --lvl3-path: #4A5663;
  --font: "Atkinson Hyperlegible", system-ui, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
  --mono: "Source Code Pro", ui-monospace, Consolas, monospace;
  --bar-h: 52px; --rail-w: 310px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #121619; --rail: #161B1F; --ink: #E4E8EB; --muted: #9AA5AF; --faint: #4A555F; --rule: #242B31;
    --bar: #0B0F12; --bar-ink: #9AA5AF; --bar-on: #127F79; --pager: #2A333B;
    --teal: #3CC7BF; --teal-btn: #127F79; --teal-ink: #7FDAD4; --teal-bg: #172D2C; --active: #1B3634;
    --link: #6FB6F2; --link-hover: #A3D0F7;
    --p: #8A80F0; --r: #F06A6A; --y: #F2C744; --g: #3DBE8A; --o: #F29A4A; --m: #2B343C;
    --p-bg: #25223F; --r-bg: #3A1F20; --g-bg: #153326; --g-ink: #7FD9AE; --draft: #E8C75A;
    --code-bg: #1A2025;
    --main-bg: #121619; --panel-bg: #161B1F;
    --tone-p: #8A80F0; --tone-r: #F06A6A; --tone-o: #F29A4A; --tone-y: #F2C744; --tone-g: #3DBE8A; --tone-t: #6FB6F2;
    --hm0: #1C2429; --hm1: #174543; --hm2: #1F6B67; --hm3: #2A9C95; --hm4: #3CC7BF;
    --lvl0-bg: #56697B; --lvl0-ink: #FFFFFF; --lvl0-path: #DCE3E9; --lvl1-bg: #3B4A57; --lvl1-ink: #F0F3F5; --lvl1-path: #C9D2DA;
    --lvl2-bg: #2A3540; --lvl2-ink: #E4E8EB; --lvl2-path: #B5C0CA; --lvl3-bg: #212A31; --lvl3-ink: #E4E8EB; --lvl3-path: #9AA5AF;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #121619; --rail: #161B1F; --ink: #E4E8EB; --muted: #9AA5AF; --faint: #4A555F; --rule: #242B31;
  --bar: #0B0F12; --bar-ink: #9AA5AF; --bar-on: #127F79; --pager: #2A333B;
  --teal: #3CC7BF; --teal-btn: #127F79; --teal-ink: #7FDAD4; --teal-bg: #172D2C; --active: #1B3634;
  --link: #6FB6F2; --link-hover: #A3D0F7;
  --p: #8A80F0; --r: #F06A6A; --y: #F2C744; --g: #3DBE8A; --o: #F29A4A; --m: #2B343C;
  --p-bg: #25223F; --r-bg: #3A1F20; --g-bg: #153326; --g-ink: #7FD9AE; --draft: #E8C75A;
  --code-bg: #1A2025;
  --main-bg: #121619; --panel-bg: #161B1F;
  --tone-p: #8A80F0; --tone-r: #F06A6A; --tone-o: #F29A4A; --tone-y: #F2C744; --tone-g: #3DBE8A; --tone-t: #6FB6F2;
  --hm0: #1C2429; --hm1: #174543; --hm2: #1F6B67; --hm3: #2A9C95; --hm4: #3CC7BF;
  --lvl0-bg: #56697B; --lvl0-ink: #FFFFFF; --lvl0-path: #DCE3E9; --lvl1-bg: #3B4A57; --lvl1-ink: #F0F3F5; --lvl1-path: #C9D2DA;
  --lvl2-bg: #2A3540; --lvl2-ink: #E4E8EB; --lvl2-path: #B5C0CA; --lvl3-bg: #212A31; --lvl3-ink: #E4E8EB; --lvl3-path: #9AA5AF;
}

/* --- Grundlagen ---------------------------------------------------------------------- */
/* hidden gilt immer — auch wenn eine Komponente display setzt (war der Melde-Formular-Fehler) */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.55 var(--font); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 40px 0 14px; }
code, kbd, pre { font-family: var(--mono); }
.muted { color: var(--muted); font-size: .92rem; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
kbd { display: inline-block; min-width: 1.5em; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px;
      font-size: 12px; line-height: 1.5; font-weight: 600; text-align: center; opacity: .75; }
@media (hover: none) { .btn kbd, .chip kbd { display: none; } }

/* Farbstufen (Punkte, Balken, Legende) */
.band-p { background: var(--p); } .band-r { background: var(--r); } .band-y { background: var(--y); }
.band-g { background: var(--g); } .band-o { background: var(--o); } .band-m { background: var(--m); }
.band-t { background: var(--link); }  /* Score 90–100 % in Link-Blau (PO 2026-09-29, Regelwerk) */
.tone-p { color: var(--tone-p); } .tone-r { color: var(--tone-r); } .tone-o { color: var(--tone-o); }
.tone-y { color: var(--tone-y); } .tone-g { color: var(--tone-g); } .tone-t { color: var(--tone-t); }
.tone-m { color: var(--faint); }
/* in der Übersicht auch in den (sonst grauen) Ordnerzeilen */
.overview td.tone-p { color: var(--tone-p); } .overview td.tone-r { color: var(--tone-r); }
.overview td.tone-o { color: var(--tone-o); } .overview td.tone-y { color: var(--tone-y); }
.overview td.tone-g { color: var(--tone-g); } .overview td.tone-t { color: var(--tone-t); }
.overview td.tone-p, .overview td.tone-r, .overview td.tone-o, .overview td.tone-y,
.overview td.tone-g, .overview td.tone-t { font-weight: 700; }

/* Unterthema: 1 Lesen | 3 Testen als segmentierter Balken; einzelne Symbole als Punkt */
.dotrow { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; flex: none; }
.dotrow:not(.segs) .dot { width: 10px; height: 10px; border-radius: 50%; }
.dotrow.segs { width: 46px; gap: 2px; }
.dotrow.segs .dot { flex: 1; height: 6px; border-radius: 1px; }
.dotrow.segs .dot-sep { width: 3px; }
.dot { display: inline-block; }
.dot-p { background: var(--p); } .dot-r { background: var(--r); } .dot-y { background: var(--y); }
.dot-g { background: var(--g); } .dot-o { background: var(--o); } .dot-m { background: var(--m); }

/* Kapitel/Lernziel/Set: Anteil gewusster Testpunkte */
.meter { position: relative; display: inline-block; width: 40px; height: 6px; border-radius: 3px;
         background: var(--m); vertical-align: middle; flex: none; }
.meter > i { display: block; height: 100%; border-radius: inherit; }
.meter.wide { width: 100%; height: 8px; border-radius: 4px; }

/* --- Kopfleiste ---------------------------------------------------------------------- */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar-h); display: flex; align-items: center; gap: 4px;
       padding: 0 14px 0 18px; background: var(--bar); color: #FFFFFF; }
.brand { color: #FFFFFF; font-weight: 700; font-size: 18px; margin-right: 22px; }
.brand:hover { color: #FFFFFF; text-decoration: none; }
/* Wortmarke A: Score-Farben der dunklen Palette, die Kopfleiste ist in beiden Modi dunkel */
/* Logo Vorlage D (PO 2026-09-29): Icon so hoch wie die Schrift von h-Oberkante bis y-Unterkante
   (0,903 em), beides optisch mittig; Nunito-Glyphen sitzen 0,066 em unter der Zeilenmitte */
.brand { display: inline-flex; align-items: center; gap: .28em; font-family: "Nunito", var(--font); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -.3px; }
.brand-icon { width: .856em; height: .903em; flex: none; position: relative; top: .066em; }
.wm-p { color: #8A80F0; } .wm-r { color: #F06A6A; } .wm-o { color: #F29A4A; }
.wm-y { color: #F2C744; } .wm-g { color: #3DBE8A; } .wm-t { color: #6FB6F2; } .wm-sh { color: #6FB6F2; }  /* sh blau wie y (PO 2026-09-29) */
.bar-nav { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden; }

.bar-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 6px;
           background: transparent; color: var(--bar-ink); font: inherit; font-size: 14px; cursor: pointer; }
.bar-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.theme { margin-left: auto; }
.logout { margin: 0; }
.tree-toggle { display: none; width: 44px; height: 44px; justify-content: center; margin-left: -8px; }

/* --- Gerüst: Baum links, Inhalt rechts ------------------------------------------------- */
/* Linke Leisten mit Tabs (PO 2026-09-29, Vorlage C): Tab-Streifen, Leiste gleitet auf/zu */
.shell { display: grid; grid-template-columns: 34px var(--rail-w) minmax(0, 1fr); min-height: calc(100vh - var(--bar-h));
         transition: grid-template-columns .2s ease; }
.shell[data-side=""] { grid-template-columns: 34px 0 minmax(0, 1fr); }
.shell[data-side=""] .rail { visibility: hidden; border-right: 0; }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }
.side-tabs { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); z-index: 5; display: flex; flex-direction: column;
             gap: 4px; padding-top: 10px; background: var(--bar); border-right: 1px solid var(--rule); }
.side-tabs button { writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 8px; border: 0; border-right: 3px solid transparent;
                    background: transparent; color: var(--bar-ink); font: 700 13px var(--font); cursor: pointer; }
.side-tabs button:hover { color: #FFFFFF; }
.shell[data-side="tree"] [data-side-tab="tree"], .shell[data-side="agenda"] [data-side-tab="agenda"] {
  color: #FFFFFF; background: var(--rail); border-right-color: var(--teal); }
.side-panel { display: none; }
.shell[data-side="tree"] [data-side-panel="tree"], .shell[data-side="agenda"] [data-side-panel="agenda"] { display: block; }
.rail { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); overflow-y: auto;
        background: var(--rail); border-right: 1px solid var(--rule); }
/* Layout A (PO 2026-09-28): eine gemeinsame, mittige Spalte; Abschnitte als Kästen (.panel) */
.page { padding: 10px 40px 40px; width: 100%; background: var(--main-bg); }
.page > * { max-width: 1000px; margin-left: 0; margin-right: auto; }  /* linksbündig: rechts Platz für spätere KI-Leiste */
body.reading .page { background: var(--page); }  /* Lern-/Buchseiten ohne Kästen, weißer Grund */
body.reading .page > * { max-width: 920px; }
.panel { margin-bottom: 8px; padding: 10px 16px; background: var(--panel-bg); border: 1px solid var(--rule); border-radius: 8px; }
.panel > h2, .panel > .h-section { margin-top: 0; }
/* kompakt (PO 2026-09-29, Vorlage B): kleinere Überschriften, dichte Zeilen */
.panel h2, .panel .h-section { font-size: 1.1rem; margin-bottom: 4px; }
.panel p.muted { margin: 4px 0 6px; }
.panel .tab.on { background: var(--panel-bg); border-bottom-color: var(--panel-bg); }
.panel .tabpanel { padding-top: 16px; }

/* --- Themenbaum ---------------------------------------------------------------------- */
.tree { padding: 4px 0 16px; font-size: 14px; line-height: 1.25; }  /* kompakt wie der Inhalt (PO 2026-09-29) */
.tree a { color: var(--ink); }
.tree a:hover { text-decoration: none; color: var(--link); }
.tree summary { list-style: none; cursor: pointer; }
.tree summary::-webkit-details-marker { display: none; }
.t-deck-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 3px 0; font-size: 15px; font-weight: 700; }
/* Set und Ordner in der Seitenleiste aufklappbar, bündig links (PO 2026-09-28) */
/* Ordner und Sets in der Seitenleiste wie in der Baumtabelle (PO 2026-09-28): bündig links,
   +/−-Kästchen, Ordner mit Tonwert je Ebene, Sets als Links */
.t-deck > summary, .t-fold > summary { position: relative; display: flex; align-items: center; gap: 8px;
  padding: 3px 18px 3px 40px; border-top: 1px solid var(--rule); }
.t-fold > summary { background: var(--lvl-bg); color: var(--lvl-ink); border-top-color: transparent; font-weight: 700; font-size: 15px; }
.t-fold > summary a { flex: 1; min-width: 0; color: inherit; }
.t-deck > summary .t-deck-link { padding: 0; color: var(--link); }
.t-deck > summary::before, .t-fold > summary::before {
  content: "+"; position: absolute; left: 14px; top: calc(50% - 9px); width: 18px; height: 18px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--page); color: var(--ink); font: 700 14px/1 var(--font); transform: none; }
.t-deck[open] > summary::before, .t-fold[open] > summary::before { content: "\2212"; transform: none; }
.t-fold > summary::before { background: transparent; color: var(--lvl-ink); border-color: var(--lvl-path); }
.t-fold > summary:has(a.active), .t-deck > summary:has(a.active) { box-shadow: inset 3px 0 var(--teal); }
.t-deck > summary:has(a.active) { background: var(--active); }
.tree .t-deck > summary a.active { background: none; box-shadow: none; }
.tree .t-fold > summary a.active { background: none; box-shadow: none; }
.t-exam { padding: 8px 18px 2px; font-size: 13px; font-weight: 700; color: var(--teal-ink); }
.t-key { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 7px; font-weight: 400; }
.t-label { flex: 1; min-width: 0; }
/* Gelesen | Score als senkrechte Balken (PO 2026-09-29, Vorlage C): Höhe = Prozent, 0 % = Strich */
.t-bars { flex: none; display: inline-flex; align-items: flex-end; gap: 3px; vertical-align: middle; }
.t-bar { display: flex; align-items: flex-end; width: 6px; height: 16px; border-radius: 1px; background: var(--rule); }
.t-bar i { display: block; width: 100%; height: max(2px, var(--h)); border-radius: 1px; }
.t-bar i.band-m { display: none; }  /* keine Karten / kein Buchkapitel: nur die Schiene */
/* Unterthema: Testen als drei gestapelte Stücke, unten zuerst (PO 2026-09-29, V3) */
.t-stack { display: flex; flex-direction: column-reverse; gap: 2px; width: 6px; height: 16px; }
.t-stack i { display: block; flex: 1; border-radius: 1px; }
.t-legend .leaf-bars { margin-right: 6px; }
/* heute fällig: gelbe Randmarke links, auch über der türkisen Markierung der aktiven Zeile */
.tree summary.due, .tree summary.due:has(a.active), .t-leaves a.due, .tree .t-leaves a.due.active { box-shadow: inset 3px 0 var(--y); }
.key-due { display: inline-block; width: 3px; height: 14px; margin-right: 8px; vertical-align: middle; background: var(--y); }
/* Aufklapp-Winkel vor Kapitel und Lernziel */
.t-ch > summary, .t-ob > summary { position: relative; display: flex; align-items: center; gap: 8px; }
.t-ch > summary::before, .t-ob > summary::before {
  content: ""; position: absolute; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s; }
.t-ch[open] > summary::before, .t-ob[open] > summary::before { transform: rotate(45deg); }
.t-ch > summary a, .t-ob > summary a { display: flex; flex: 1; min-width: 0; padding: 3px 0; }
/* Kapitel: fett, Trennlinie darüber */
.t-ch { border-top: 1px solid var(--rule); }
.t-ch > summary { padding: 1px 18px 1px 58px; font-weight: 700; }
.t-ch > summary::before { left: 42px; top: 9px; }
/* Lernziel: normal, eingerückt */
.t-ob > summary { padding: 0 18px 0 72px; }
.t-ob > summary::before { left: 58px; top: 8px; }
.t-ob[open] { padding-bottom: 2px; }
/* Unterthema: kleiner, Führungslinie links */
.t-leaves { list-style: none; margin: 0 0 0 76px; padding: 0; border-left: 1px solid var(--rule); font-size: 13.5px; }
.t-leaves a { display: flex; align-items: center; gap: 8px; padding: 2px 18px 2px 12px; }
.t-leaves a.nocards { color: var(--muted); }
.tree .active { background: var(--active); font-weight: 700; box-shadow: inset 3px 0 var(--teal); }
.t-ch > summary:has(a.active), .t-ob > summary:has(a.active) { background: var(--active); box-shadow: inset 3px 0 var(--teal); }
.t-ch > summary a.active, .t-ob > summary a.active { background: none; box-shadow: none; }
.t-legend { margin: 10px 18px 0; font-size: 13px; color: var(--muted); }
.t-legend summary { color: var(--link); }
.t-legend ul { list-style: none; padding: 0; margin: 6px 0; }
.t-legend .key { display: inline-block; width: 14px; height: 6px; border-radius: 1px; margin-right: 8px; vertical-align: middle; }
.t-legend p { margin: 8px 0; }

/* --- Agenda (PO 2026-09-29, Vorlagen A + D) ------------------------------------------ */
.agenda { font-size: 13px; }
.ag-head { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; }
.ag-head .muted { margin: 0; }
.ag-title { display: flex; align-items: center; }
.ag-title b { flex: 1; font-size: 16px; }
.ag-link { border: 0; background: none; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.ag-goal { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--rule); }
.ag-g { box-shadow: inset 3px 0 var(--g); } .ag-y { box-shadow: inset 3px 0 var(--y); }
.ag-r { box-shadow: inset 3px 0 var(--r); } .ag-t { box-shadow: inset 3px 0 var(--link); }
.ag-row { display: flex; align-items: baseline; gap: 8px; }
.ag-name { flex: 1; font-size: 14px; }
.ag-sel, .ag-goal .muted { margin: 0; font-size: 12px; }
.ag-learn { margin-left: auto; font-weight: 700; }
.ag-bar { position: relative; height: 8px; margin: 2px 0; border-radius: 2px; background: var(--rule); }
.ag-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; }
.ag-soll, .ag-target { position: absolute; top: -3px; bottom: -3px; width: 2px; }
.ag-soll { background: var(--ink); } .ag-target { background: var(--link); }
.ag-form { display: flex; flex-direction: column; gap: 8px; margin: 4px 14px 10px; padding: 10px; border: 1px solid var(--rule); border-radius: 6px; }
.ag-form label { display: flex; flex-direction: column; gap: 3px; }
.ag-form input[type="text"], .ag-form input[type="date"], .ag-form input[type="number"] {
  padding: 5px; border: 1px solid var(--rule); border-radius: 4px; background: var(--page); color: var(--ink); font: inherit; }
.ag-select { margin: 0; padding: 0; border: 0; }
.ag-select legend { padding: 0; margin-bottom: 3px; }
.ag-hint { font-size: 12px; }
.ag-select { display: flex; flex-direction: column; gap: 6px; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.ag-chip { padding: 2px 8px; border: 1px solid var(--teal); border-radius: 999px; background: var(--teal-bg); color: var(--ink);
           font: inherit; font-size: 12px; cursor: pointer; }
.ag-search { padding: 5px 7px; border: 1px solid var(--rule); border-radius: 4px; background: var(--page); color: var(--ink); font: inherit; }
.ag-tree { max-height: 240px; overflow-y: auto; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 4px;
           background: var(--page); font-size: 12.5px; }
.ag-node { display: flex; align-items: center; gap: 4px; padding-left: calc(var(--d) * 10px); }
.ag-node[hidden] { display: none; }
.ag-node label { flex-direction: row !important; align-items: center; gap: 5px !important; min-width: 0; flex: 1; padding: 1px 0; cursor: pointer; }
.ag-node .t-key { margin-right: 0; }
.ag-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-lbl mark { background: rgba(242, 199, 68, .35); color: inherit; }
.ag-node.inc label { color: var(--faint); }
.ag-fold, .ag-fold-gap { flex: none; width: 14px; height: 14px; }
.ag-fold { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font: 12px/1 var(--font); }
.ag-fold::before { content: "\203A"; display: inline-block; transition: transform .15s; }
.ag-fold[aria-expanded="true"]::before { transform: rotate(90deg); }
.ag-filter { margin-top: 2px; }
/* Formular-Regeln (Labels untereinander) nicht auf Baum und Rank/Label-Felder anwenden */
.ag-select { min-width: 0; }
.ag-search, .ag-tree { width: 100%; box-sizing: border-box; }
.ag-form .ag-filter .filter-field { flex-direction: row; gap: 6px; }
.ag-form .ag-filter .filter-menu label { flex-direction: row; align-items: center; gap: 8px; }
.ag-filter .filter-field { height: 30px; }
.ag-preview { margin: 0; font-size: 12px; color: var(--link); }
.ag-when { display: flex; gap: 8px; }
.ag-when label:first-child { flex: 1; }
.ag-when label:last-child { width: 80px; }
.ag-error { margin: 0; color: var(--r); font-weight: 700; }
.ag-actions { display: flex; gap: 8px; }
.ag-edit { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ag-edit:hover { color: var(--link); }
.ag-delete-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--r); font: inherit; cursor: pointer; }
.ag-confirm { border-color: var(--r); }
.ag-confirm .muted { margin: 0; font-size: 12.5px; }

/* --- Brotkrumen, Kopf, Reiter -------------------------------------------------------- */
/* Pfad in der dunklen Kopfleiste */
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--bar-ink);
          white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--bar-ink); }
.crumbs a:hover { color: #FFFFFF; }
.crumbs .sep { color: rgba(255, 255, 255, .35); }
.crumbs .crumb-here { color: #FFFFFF; font-weight: 700; }
.crumbs > :last-child { overflow: hidden; text-overflow: ellipsis; }
.h-key { color: var(--muted); font-weight: 400; margin-right: .35em; font-variant-numeric: tabular-nums; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.status .dotrow.segs { width: 120px; gap: 3px; }
.status .dotrow.segs .dot { height: 10px; border-radius: 2px; }
.status .dotrow.segs .dot-sep { width: 5px; }
.status .meter.wide { width: 120px; }
.tabs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tab { flex: none; white-space: nowrap; padding: 9px 18px 8px; margin-bottom: -1px; border: 1px solid transparent; border-top-width: 3px;
       border-radius: 6px 6px 0 0; color: var(--muted); }
.tab:hover { color: var(--ink); text-decoration: none; background: var(--rail); }
.tab.on { border-color: var(--rule); border-top-color: var(--teal); border-bottom-color: var(--page);
          background: var(--page); color: var(--ink); font-weight: 700; }
.tabpanel { padding-top: 18px; }

/* --- Lernen: Fortschritt, Frage/Antwort, Aktionen -------------------------------------- */
.progress { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }
.progress-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--m); }
.progress-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.qa { margin-top: 12px; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.qa-head { display: flex; align-items: center; gap: 12px; padding: 9px 18px; background: var(--teal-bg);
           color: var(--teal-ink); font-weight: 700; }
.qa-head.answer { background: var(--g-bg); color: var(--g-ink); border-top: 1px solid var(--rule); }
.qa-topic { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 400; font-size: 14px; color: var(--ink); }
.qa-topic .t-key { margin-right: 0; }
.badge { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--draft); }
.qa-body { padding: 18px; font-size: 1.15rem; line-height: 1.55; }
.qa-body > :first-child, .side > :first-child { margin-top: 0; }
.qa-body > :last-child, .side > :last-child { margin-bottom: 0; }
.options { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px;
           grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.options li { display: flex; gap: 12px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 6px; font-size: 1.05rem; }
.opt-letter { font-weight: 700; color: var(--teal); }
.options li.is-correct { border: 2px solid var(--g); padding: 10px 13px; background: var(--g-bg); font-weight: 700; }
.options li.is-correct .opt-letter { color: var(--g); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.actions-more { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 18px;
       border: 1px solid var(--rule); border-radius: 6px; background: var(--page); color: var(--ink);
       font: inherit; font-size: 15.5px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; color: var(--ink); background: var(--rail); }
.btn.primary { border-color: transparent; background: var(--teal-btn); color: #FFFFFF; font-weight: 700; }
.btn.good { border-color: transparent; background: #1E9E6A; color: #FFFFFF; font-weight: 700; }
.btn.bad { border-color: transparent; background: #C93D3D; color: #FFFFFF; font-weight: 700; }
.btn.primary:hover, .btn.good:hover, .btn.bad:hover { color: #FFFFFF; filter: brightness(1.08); }
.btn.main { height: 50px; padding: 0 26px; font-size: 17px; }
.btn.small { height: 32px; padding: 0 12px; font-size: 14px; }
.notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; background: var(--g-bg); color: var(--g-ink); }
.report-form { display: grid; gap: 8px; margin-top: 14px; max-width: 560px; }
.report-form textarea, .login input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px;
       background: var(--page); color: var(--ink); font: inherit; }
.report-form .btn { justify-self: start; }
.file { margin: 18px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.qa.done .done-num { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; }
.touched { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.touched li { display: flex; align-items: center; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--rule);
        border-radius: 21px; background: var(--page); color: var(--ink); font: inherit; cursor: pointer; }
.chip:hover { background: var(--rail); }

/* Zurück / Weiter */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule); }
.pager a { display: flex; flex-direction: column; max-width: 48%; padding: 8px 16px; border-radius: 6px;
           background: var(--pager); color: #FFFFFF; font-size: 15px; }
.pager a:hover { color: #FFFFFF; text-decoration: none; filter: brightness(1.25); }
.pager-next { margin-left: auto; text-align: right; }
.pager-dir { font-size: 12.5px; color: var(--bar-ink); }

/* --- Code und Buch --------------------------------------------------------------------- */
pre { margin: 14px 0; padding: 14px 16px; border-radius: 6px; background: var(--code-bg); border: 1px solid var(--rule);
      overflow-x: auto; font-size: 14.5px; line-height: 1.5; }
pre code { background: none !important; }
:not(pre) > code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); font-size: .9em; }
.book-leaf + .book-leaf { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }
.book-leaf-head { display: flex; align-items: center; gap: 14px; font-size: 14px; margin-bottom: 8px; }
.prose { max-width: 74ch; font-size: 1.06rem; line-height: 1.65; }
.prose h1 { font-size: 1.7rem; margin: 0 0 14px; }
.book.single .prose > h1:first-child { display: none; }
.prose h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.prose h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.prose table { border-collapse: collapse; margin: 14px 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; }
.prose th { background: var(--rail); }
.studied { display: flex; align-items: center; gap: 8px; color: var(--g-ink); font-weight: 700; }

/* --- Übersichten ----------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.split h2 { margin-top: 18px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.deck-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.deck-head h1 { flex: 1; margin: 0; font-size: 1.35rem; }
.deck-head .btn { height: 32px; padding: 0 12px; font-size: 14px; }
/* Kopf-Kasten (Titel + Lernen) bleibt beim Scrollen unter der Kopfleiste stehen (PO 2026-09-29) */
header.panel.deck-head { position: sticky; top: var(--bar-h); z-index: 10; box-shadow: 0 -10px 0 var(--main-bg), 0 8px 0 var(--main-bg); }  /* Filter links neben dem Lernen-Knopf (PO 2026-09-28) */
.toc { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
section[id] { scroll-margin-top: calc(var(--bar-h) + 12px); }
/* Sprungmarken im festen Kopf-Kasten: sanft scrollen, Abschnitt bleibt unter dem Kopf sichtbar */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main:has(header.panel.deck-head) section[id] { scroll-margin-top: calc(var(--bar-h) + 70px); }
.anchors { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.anchors a { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.anchors a:hover { color: var(--link); border-color: var(--link); text-decoration: none; }

.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
.list th { padding: 6px 8px; text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--rule); }
.list td { padding: 8px; border-top: 1px solid var(--rule); vertical-align: middle; }
.list td:first-child { padding-left: calc(8px + var(--depth, 0) * 18px); }
.list td:nth-child(2) { white-space: nowrap; }
.list .pct { font-size: 13px; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.list .go { text-align: right; }
/* Ordnerzeilen: Werte wie in den Lernthema-Zeilen (PO 2026-09-27); nur der Ordnername ist schlicht */
/* Ordnerebenen: Farben je Tiefe (Tabellenzeile bzw. Summary in der Seitenleiste) */
tr.lvl-0, .t-fold.lvl-0 > summary { --lvl-bg: var(--lvl0-bg); --lvl-ink: var(--lvl0-ink); --lvl-path: var(--lvl0-path);
  /* auf dunklem Grund helle Score-Farben */
  --tone-p: #B9B1F2; --tone-r: #F7A3A3; --tone-o: #F9C08A; --tone-y: #F2D46B; --tone-g: #7FD9AE; --tone-t: #A3D0F7; --faint: #8C99A6; }
tr.lvl-1, .t-fold.lvl-1 > summary { --lvl-bg: var(--lvl1-bg); --lvl-ink: var(--lvl1-ink); --lvl-path: var(--lvl1-path); }
tr.lvl-2, .t-fold.lvl-2 > summary { --lvl-bg: var(--lvl2-bg); --lvl-ink: var(--lvl2-ink); --lvl-path: var(--lvl2-path); }
tr.lvl-3, .t-fold.lvl-3 > summary { --lvl-bg: var(--lvl3-bg); --lvl-ink: var(--lvl3-ink); --lvl-path: var(--lvl3-path); }
.overview .r-folder td { background: var(--lvl-bg); border-top-color: transparent; }
.overview tr.r-folder { color: var(--lvl-ink); }  /* an der Zeile, damit Score-Farben der Zellen gewinnen */
.lvl-name { font-size: 15px; font-weight: 700; color: var(--lvl-ink); }
.lvl-path { font-size: 13px; color: var(--lvl-path); white-space: nowrap; }
.lvl-path a { color: var(--lvl-path); }
.lvl-path .sep { margin: 0 3px; }
tr.lvl-0 .expander { background: transparent; color: var(--lvl-ink); border-color: rgba(255, 255, 255, .35); }
.overview .r-chap td { font-size: 14.5px; }
.overview .r-chap td.chap { padding-left: 38px; }
.r-deck td:first-child { font-weight: 700; }
.h-section { font-size: 1.25rem; margin: 8px 0 14px; }
/* Filter Niveau/Kontext (PO 2026-09-28): rechts neben der Überschrift und oben in der Seitenleiste */
.table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 8px 0 14px; }
.table-head .h-section { margin: 0; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.filter-field { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--page); color: var(--muted); }
.filter-field select { border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; padding: 0; cursor: pointer; }
.filter-field select option { background: var(--page); color: var(--ink); }  /* aufgeklapptes Menü in Theme-Farben */
.filter-field.on { border-color: var(--teal); background: var(--teal-bg); color: var(--teal-ink); }
.filter-kontext > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.filter-kontext > summary::-webkit-details-marker { display: none; }
.filter-kontext > summary::after { content: "\25BE"; color: var(--muted); }
.filter-kontext b { color: var(--ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-menu { position: absolute; z-index: 15; top: 38px; left: 0; min-width: 220px; padding: 8px 12px; display: grid; gap: 6px;
  background: var(--page); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 6px 18px rgba(10, 14, 18, .18); color: var(--ink); }
.filter-menu label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.filter-menu .muted { margin: 0; font-size: 13px; }
.filter-reset { height: 34px; padding: 0 10px; border: 0; background: transparent; color: var(--link); font: inherit; cursor: pointer; }
/* in der dunklen Kopfleiste */
.filter-bar { flex: none; margin: 0 12px 0 1.5rem; }  /* direkt rechts neben dem Pfad */
.filter-bar .filter-field { height: 32px; border-color: rgba(255, 255, 255, .18); background: transparent; color: var(--bar-ink); }
.filter-bar .filter-field select, .filter-bar .filter-kontext b { color: #FFFFFF; }
.filter-bar .filter-field.on { border-color: var(--teal); background: rgba(60, 199, 191, .16); color: #FFFFFF; }
.filter-bar .filter-kontext > summary::after { color: var(--bar-ink); }
.filter-bar .filter-reset { height: 32px; color: #9FD0FF; }
.filter-bar .filter-menu { right: 0; left: auto; }
.filter-hint { margin: 10px 0 0; font-size: 14px; color: var(--teal-ink); font-weight: 700; }
.themen table { table-layout: fixed; }
/* Alle Lernthemen: Thema nimmt den Rest, Zahlenspalten gleich breit und rechtsbündig */
.themen .c-num { width: 78px; }
.overview th, .overview td { padding: 2px 10px; }
.overview .expander { width: 19px; height: 19px; }
.overview td:first-child, .overview th:first-child { padding-left: calc(8px + var(--depth, 0) * 18px); }
.overview .zero { color: var(--faint); }  /* auch in Ordnerzeilen (die sonst grau erben) */
.list th.num { text-align: right; }
.fold { display: inline-flex; align-items: center; gap: 8px; }
.r-exam th { padding: 16px 8px 4px; border: 0; color: var(--teal-ink); font-size: 13.5px; }
.r-exam .muted { font-weight: 400; font-size: 13px; margin-left: 6px; }
.r-ch td:first-child { display: flex; align-items: center; gap: 8px; }
.r-ob td:first-child { padding-left: 46px; font-size: 14.5px; }
.chapters a { color: var(--ink); }
.expander { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 4px;
            background: var(--page); color: var(--muted); font: 700 14px/1 var(--font); cursor: pointer; }
.expander::before { content: "+"; }
.expander[aria-expanded="true"]::before { content: "\2212"; }
.c-new { color: var(--link); } .c-learn { color: var(--r); } .c-due { color: var(--g); }
.zero { color: var(--faint); }

table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.grid th, .grid td { padding: 2px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; text-align: left; }
.grid th { background: var(--rail); font-weight: 700; }
.grid th.num, .grid td.num { text-align: right; }
.grid th.grp { text-align: center; border-left: 1px solid var(--rule); }
.grid tfoot td { font-weight: 700; background: var(--rail); }
.grid .bar-cell .meter { width: 48px; margin-right: 6px; }
/* Study Table: aufgeklappte Lernziele eingerückt, etwas kleiner */
.study .r-ob td { font-size: 13.5px; background: var(--rail); }
.study .ob-no { padding-left: 40px; color: var(--muted); }
.study .ob-title { padding-left: 24px; }
.study td.ch-title { white-space: normal; min-width: 220px; }
/* Study Table im Stil von „Alle Lernthemen" */
.study-table table { table-layout: fixed; }
.study-table .c-no { width: 70px; } .study-table .c-num { width: 78px; }
.overview.study .r-ob td { background: var(--rail); font-size: 14px; }
.overview.study .ob-no { padding-left: 26px; color: var(--muted); }
/* dritte Ebene: Unterthemen, eine Stufe weiter eingerückt, etwas kleiner */
.overview.study .r-leaf td { font-size: 13.5px; }
.overview.study .leaf-no { padding-left: 58px; color: var(--muted); }
.overview.study .leaf-title { padding-left: 44px; }
/* Reiter Prüfung */
.exam table { table-layout: fixed; }
.exam .c-no { width: 56px; } .exam .c-num { width: 80px; } .exam .c-pot { width: 96px; } .exam .c-quest { width: 190px; }
.exam td.ch-title { white-space: normal; }
.readiness { display: flex; align-items: baseline; gap: 12px; margin: 0; color: var(--muted); }
.readiness-num { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.exam .r-best td { background: var(--teal-bg); }
.best-tag { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700;
            color: var(--teal-ink); border: 1px solid var(--teal); white-space: nowrap; }
.exam .gap { font-size: 12px; color: var(--muted); }
/* Summenzeile: doppelte Trennlinie darüber (PO 2026-09-27) */
.overview tfoot td { border-top: 3px double var(--muted); font-weight: 700; }
.overview tfoot .r-total td:first-child { padding-left: 8px; }


/* Lernkasten: ein Fach je Abstand */
.kasten { margin: 0; }
.kasten-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px; align-items: end; }
.fach { display: flex; flex-direction: column; align-items: stretch; text-align: center; min-width: 0; }
.fach-count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.fach-bar { display: block; border-radius: 4px 4px 1px 1px; min-height: 3px; }
.kasten-bars { height: 120px; }
.fach { height: 100%; justify-content: flex-end; }
.fach-bar { height: calc((100% - 58px) * var(--h, 0)); }
/* Fächer (PO 2026-09-29): 1–3 Tage rot, 5–13 gelb, 21–55 grün, ab 89 blau (Lernerfolg) */
.tone-new { background: var(--p); } .tone-red { background: var(--r); } .tone-yellow { background: var(--y); }
.tone-green { background: var(--g); } .tone-blue { background: var(--link); }
.fach-label { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.2; }
.fach-due { min-height: 16px; font-size: 11.5px; color: var(--g); line-height: 1.3; }
.kasten figcaption { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Aktivität (Anki-Kalender) */
.heatmap-wrap { padding-bottom: 4px; }
/* 7 Zeilen = Wochentage, Spalten = Wochen; Kästchen wachsen mit, bis die Breite gefüllt ist */
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto);
  grid-template-columns: 20px repeat(var(--weeks, 53), minmax(0, 1fr)); gap: 3px; width: 100%; }
.hm-wd { align-self: center; font-size: 10px; line-height: 1; color: var(--muted); }  /* Wochentag links, Kästchenhöhe */
.hm-week { display: contents; }
.hm { aspect-ratio: 1; border-radius: 2px; background: var(--hm0); }
.hm.l1 { background: var(--hm1); } .hm.l2 { background: var(--hm2); } .hm.l3 { background: var(--hm3); } .hm.l4 { background: var(--hm4); }
.hm.future { background: transparent; }
.figures { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 6px 0 0; }
.figures dt { font-size: 13px; color: var(--muted); }
.figures dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Meldungen */
.reports { list-style: none; padding: 0; display: grid; gap: 12px; }
.reports li { padding: 12px 16px; border: 1px solid var(--rule); border-radius: 6px; }
.reports form { margin: 8px 0 0; }

/* Hilfe */
.help { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
        padding: 16px; background: rgba(10, 14, 18, .55); }
.help-box { width: 100%; max-width: 460px; padding: 22px 24px; border-radius: 8px; background: var(--page); }
.help-box h2 { margin: 0 0 12px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; align-items: baseline; }
.keys dt { white-space: nowrap; } .keys dd { margin: 0; }

/* Anmeldung */
.login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; display: grid; gap: 8px; }
.login h1 { font-size: 1.8rem; }
.login form { display: grid; gap: 8px; }
.login label { font-size: 14px; color: var(--muted); margin-top: 6px; }
.login .btn { margin-top: 12px; }
.error { padding: 10px 14px; border-radius: 6px; background: var(--r-bg); color: var(--r); }

/* --- Schmale Bildschirme ----------------------------------------------------------------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .page { padding: 22px 28px 56px; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .tree-toggle { display: inline-flex; }
  /* Handy: nur das Lernthema (Logo führt zu „Alle Lernthemen") */
  .crumbs .crumb-home, .crumbs .crumb-mid, .crumbs .sep { display: none; }
  .crumbs a:not(.crumb-home):not(.crumb-mid) { color: #FFFFFF; font-weight: 700; }
  .bar-nav { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .18); }
  .bar-nav:empty { display: none; }
  .brand { margin-right: 0; }
  .rail { position: fixed; top: var(--bar-h); left: 0; z-index: 30; width: min(88vw, 360px); transform: translateX(-100%);
          transition: transform .2s; box-shadow: none; }
  body.tree-open .rail { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 14, 18, .45); }
  .page { padding: 18px 16px 40px; }
  h1 { font-size: 1.6rem; }
  [data-theme-label] { display: none; }
}
@media (max-width: 640px) {
  .qa-body { padding: 14px; font-size: 1.08rem; }
  .qa-head { padding: 8px 14px; }
  body.reading .actions { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px 0; padding: 10px 16px 14px;
                          background: var(--page); border-top: 1px solid var(--rule); }
  .actions .main { flex: 1; }
  .actions-more { width: 100%; gap: 8px; }
  .actions-more .btn { flex: 1; height: 38px; padding: 0 8px; font-size: 13.5px; }
  .tabs .tab { padding: 8px 12px 7px; }
  .kasten-bars { gap: 4px; }
  .fach-label { font-size: 11px; }
  .pager a { max-width: 49%; font-size: 14px; }
  .list .pct { display: none; }
  /* Handy: ohne Karten — Thema, Heute, Gelesen, Score */
  .themen col:nth-child(2), .themen th:nth-child(2), .themen td:nth-child(2) { display: none; }
  .themen .c-num { width: 68px; }
  .overview th, .overview td { padding-left: 8px; padding-right: 8px; }
  .overview td:first-child, .overview th:first-child { padding-left: calc(6px + var(--depth, 0) * 14px); }
  .list .meter { width: 32px; }
  .list th, .list td { padding-left: 5px; padding-right: 5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }