*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#15171d;--bg-2:#1c1f28;--bg-3:#262b37;--bg-hover:#2e3440;
  --border:#333947;--text:#eef0f4;--text-dim:#9da3b3;--text-muted:#8c929e;
  --accent:#e0a134;--accent-2:#f2bd5c;--accent-2-text:#f2bd5c;--success:#3ecf8e;--warning:#f0993f;
  --danger:#e35b4a;--code-bg:#1e2129;
  --font-display:ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;
}
/* ── THEMES ──
   Bewusst nur Hell/Dunkel (wie Windows) statt mehrerer Stimmungs-Themes -
   Personalisierung läuft über die Akzentfarbe (überschreibt --accent/--accent-2
   per Inline-Style, siehe applyAccentOverride() in app.js), nicht über
   zusätzliche eigene Hintergrundtöne.
   --accent-2-text: textsichere Variante von --accent-2 (WCAG AA 4.5:1) für
   color:-Kontexte. --accent-2 selbst bleibt unverändert für Button-
   Hintergründe (dort steht immer fest #0d1117 als Text drauf, siehe
   applyAccentOverride()-Kommentar in app.js). Im dunklen Theme identisch mit
   --accent-2 (schon kontrastreich genug als helle Schrift auf dunklem Grund),
   im hellen Theme abgedunkelt. */
html[data-theme="dark"],html:not([data-theme]){
  --bg:#15171d;--bg-2:#1c1f28;--bg-3:#262b37;--bg-hover:#2e3440;
  --border:#333947;--text:#eef0f4;--text-dim:#9da3b3;--text-muted:#8c929e;
  --accent:#e0a134;--accent-2:#f2bd5c;--accent-2-text:#f2bd5c;--success:#3ecf8e;--warning:#f0993f;
  --danger:#e35b4a;--code-bg:#1e2129;
}
html[data-theme="light"]{
  --bg:#f7f4ee;--bg-2:#ffffff;--bg-3:#efe8da;--bg-hover:#e3dac6;
  --border:#dcd2ba;--text:#211c14;--text-dim:#52452c;--text-muted:#73674f;
  --accent:#b5651d;--accent-2:#d6883a;--accent-2-text:#955a1f;--success:#1f7a4f;--warning:#b5570a;
  --danger:#a52f22;--code-bg:#f1e9d8;
}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  background:var(--bg);color:var(--text);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:340px 1fr;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{background:var(--bg-2);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.sb-head{padding:18px 18px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-2);z-index:10}
.btn-mini{flex:1;background:var(--bg);color:var(--text-dim);border:1px solid var(--border);padding:5px 8px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .15s}
.btn-mini:hover{background:var(--bg-hover);color:var(--text)}
.timer-disp{font-family:ui-monospace,"SF Mono",monospace;font-size:26px;font-weight:700;text-align:center;color:var(--accent-2-text);letter-spacing:1px;margin-bottom:8px;transition:color .2s}
.timer-disp.running{color:var(--success);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.t-btn{flex:1;padding:7px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:12px;transition:all .15s}
.t-btn:hover{background:var(--bg-hover)}
.t-btn.primary{background:var(--accent);color:#0d1117;border-color:var(--accent);font-weight:600;flex:2}
.t-btn.primary:hover{background:var(--accent-2)}
.t-btn.primary.running{background:var(--warning);border-color:var(--warning)}
.part-div{padding:14px 18px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);background:var(--bg);border-bottom:1px solid var(--border)}
.theme-sec{border-bottom:1px solid var(--border)}
.theme-hd{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;user-select:none;transition:background .15s;font-size:14px;font-weight:500}
.theme-hd:hover{background:var(--bg-hover)}
.th-icon{font-size:16px;width:22px;text-align:center}
.th-title{flex:1}
.th-chev{font-size:10px;color:var(--text-muted);transition:transform .2s}
.theme-sec.open .th-chev{transform:rotate(90deg)}
.th-prog{font-size:11px;color:var(--text-muted);background:var(--bg);padding:2px 7px;border-radius:10px}
.sub-list{display:none;background:var(--bg);padding:4px 0 8px}
.theme-sec.open .sub-list{display:block}
.sub-item{display:flex;align-items:center;gap:8px;padding:8px 18px 8px 50px;cursor:pointer;font-size:13px;color:var(--text-dim);border-left:3px solid transparent;transition:all .12s;line-height:1.4}
.sub-item:hover{background:var(--bg-hover);color:var(--text)}
.sub-item.active{background:var(--bg-3);color:var(--accent-2-text);border-left-color:var(--accent)}
.sub-check{font-size:13px;width:16px;color:var(--text-muted)}
.sub-item.done .sub-check{color:var(--success)}
.sub-item.done .sub-txt{color:var(--text-dim)}
/* Quiz-Eintrag */
.quiz-row{display:flex;align-items:center;gap:8px;padding:9px 18px 9px 50px;cursor:pointer;font-size:13px;color:var(--accent-2-text);border-left:3px solid transparent;transition:all .12s;line-height:1.4;font-weight:500}
.quiz-row:hover{background:var(--bg-hover)}
.quiz-row.active{background:var(--bg-3);border-left-color:var(--warning);color:var(--warning)}
.q-badge{margin-left:auto;font-size:10px;padding:2px 6px;border-radius:10px;background:var(--bg-3);color:var(--text-muted);font-weight:600}
.q-badge.gold{background:rgba(210,153,34,.15);color:var(--warning)}
.q-badge.green{background:rgba(63,185,80,.15);color:var(--success)}
/* Prüfungs-Eintrag */
.exam-row{display:flex;align-items:center;gap:8px;padding:9px 18px 9px 50px;cursor:pointer;font-size:13px;color:#e8a96e;border-left:3px solid transparent;transition:all .12s;line-height:1.4;font-weight:500;border-bottom:1px solid var(--border)}
.exam-row:hover{background:var(--bg-hover)}
.exam-row.active{background:var(--bg-3);border-left-color:#e8a96e;color:#e8a96e}
.e-badge{margin-left:auto;font-size:10px;padding:2px 6px;border-radius:10px;background:var(--bg-3);color:var(--text-muted);font-weight:600}
.e-badge.pass{background:rgba(63,185,80,.15);color:var(--success)}
.e-badge.fail{background:rgba(248,81,73,.1);color:var(--danger)}

/* MAIN */
.main{overflow-y:auto;padding:0;position:relative}
.welcome{min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px}
.wc{max-width:760px;background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:40px;text-align:center}
.wc .emoji{font-size:64px;margin-bottom:8px;display:inline-block}
.wc h2{margin:0 0 8px;font-size:28px;font-weight:700;letter-spacing:-.5px}
.wc .lead{color:var(--text-dim);font-size:16px;margin-bottom:28px}
/* Lernpfad (Startseite): ein Knoten pro Thema statt generischer Feature-Liste */
.wc-journey{max-width:960px}
.journey{margin:26px 0 8px}
.journey-part{margin-bottom:22px}
.journey-part:last-child{margin-bottom:0}
.journey-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;text-align:center}
.journey-track{display:flex;align-items:flex-start;justify-content:center;gap:2px;flex-wrap:wrap}
.jnode{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;gap:7px;width:112px;background:var(--bg-3);border:1px solid var(--border);border-radius:12px;padding:14px 8px 12px;cursor:pointer;font-family:inherit;font-size:inherit;color:var(--text);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.jnode:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.22);border-color:hsl(var(--h),58%,52%)}
.jnode-ringwrap{position:relative;width:56px;height:56px}
.jnode-ringwrap svg{display:block;width:100%;height:100%}
.jnode-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:21px}
.jnode-title{font-size:12.5px;font-weight:600;text-align:center;line-height:1.3;overflow-wrap:break-word;hyphens:auto;width:100%}
.jnode-meta{font-size:10.5px;color:var(--text-muted);font-family:ui-monospace,monospace}
.jnode-arrow{align-self:center;margin-top:22px;padding:0 1px;color:var(--text-muted);font-size:15px;opacity:.45}
.tip{margin-top:20px;padding:12px 18px;background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);border-radius:10px;font-size:13px;color:var(--text-dim)}
.tip kbd{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-family:ui-monospace,monospace;font-size:12px;color:var(--accent-2-text)}
.cwrap{max-width:900px;margin:0 auto;padding:28px 40px 80px}
.crumb{font-size:13px;color:var(--text-muted);margin-bottom:6px}
.crumb span{color:var(--text-dim)}
.sub-title{font-size:28px;font-weight:700;margin:0 0 18px;letter-spacing:-.5px;line-height:1.25}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:22px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:18px}
.mode-tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.mode-tab{background:var(--bg-2);color:var(--text-dim);border:1px solid var(--border);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;white-space:nowrap}
.mode-tab:hover{background:var(--bg-hover);color:var(--text)}
.mode-tab.active{background:var(--accent);color:#0d1117;border-color:var(--accent)}
.chk-btn{background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;transition:all .15s}
.chk-btn:hover{background:var(--bg-hover)}
.chk-btn.done{background:rgba(63,185,80,.15);border-color:var(--success);color:var(--success)}
/* MARKDOWN */
.md h2{font-size:22px;font-weight:700;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border);letter-spacing:-.3px}
.md h3{font-size:17px;font-weight:600;margin:20px 0 8px;color:var(--accent-2-text)}
.md p{margin:0 0 14px}
.md ul,.md ol{margin:0 0 14px;padding-left:24px}
.md li{margin-bottom:6px}
.md strong{color:var(--text);font-weight:600}
.md code{background:var(--code-bg);padding:2px 6px;border-radius:4px;font-family:ui-monospace,monospace;font-size:13px;color:var(--warning)}
.md table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px;background:var(--bg-2);border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.md table th,.md table td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.md table th:last-child,.md table td:last-child{border-right:none}
.md table tr:last-child td{border-bottom:none}
.md table th{background:var(--bg-3);font-weight:600;color:var(--accent-2-text)}
.nav-btns{display:flex;justify-content:space-between;margin-top:32px;padding-top:20px;border-top:1px solid var(--border);gap:12px}
.nav-btn{background:var(--bg-2);border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:8px;cursor:pointer;font-size:13px;flex:1;text-align:left;transition:all .15s;max-width:48%}
.nav-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent)}
.nav-btn:disabled{opacity:.3;cursor:not-allowed}
.nav-btn .nl{font-size:11px;color:var(--text-muted);display:block;margin-bottom:2px}
.nav-btn.next{text-align:right}
/* QUIZ */
.quiz-intro{text-align:center;padding:40px 30px;background:var(--bg-2);border:1px solid var(--border);border-radius:14px}
.quiz-intro h2{font-size:26px;margin:0 0 10px;letter-spacing:-.3px}
.qstats{display:flex;gap:12px;justify-content:center;margin:20px 0 26px;flex-wrap:wrap}
.qstat{background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:14px 18px;min-width:130px}
.qstat .qsv{font-size:22px;font-weight:700;color:var(--accent-2-text);font-family:ui-monospace,monospace}
.qstat .qsl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.quiz-qbox{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:28px}
.qpi{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}
.qpbar{height:4px;background:var(--bg-3);border-radius:2px;margin-bottom:22px;overflow:hidden}
.qpfill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}
.qq-text{font-size:19px;font-weight:600;margin:0 0 22px;line-height:1.4}
.q-opts{display:flex;flex-direction:column;gap:10px}
.q-opt{background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:13px 18px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:12px;font-size:14px;text-align:left;color:var(--text)}
.q-opt:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent)}
.q-opt:disabled{cursor:default}
.q-opt .ol{font-weight:700;color:var(--accent-2-text);width:22px;flex-shrink:0}
.q-opt.correct{background:rgba(63,185,80,.15);border-color:var(--success)}
.q-opt.correct .ol{color:var(--success)}
.q-opt.wrong{background:rgba(248,81,73,.12);border-color:var(--danger)}
.q-opt.wrong .ol{color:var(--danger)}
.q-opt.dimmed{opacity:.55}
.qfb{margin-top:18px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5;display:none}
.qfb.show{display:block}
.qfb.correct{background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3)}
.qfb.wrong{background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.3)}
.qfb .fbt{font-weight:700;margin-bottom:6px;font-size:15px}
.qfb.correct .fbt{color:var(--success)}
.qfb.wrong .fbt{color:var(--danger)}
.qfb .fbx{color:var(--text-dim)}
.quiz-result{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:36px 30px;text-align:center}
.score-circle{width:130px;height:130px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;font-family:ui-monospace,monospace;border:6px solid var(--border)}
.score-circle.excellent{border-color:var(--success);color:var(--success)}
.score-circle.good{border-color:var(--accent);color:var(--accent-2-text)}
.score-circle.okay{border-color:var(--warning);color:var(--warning)}
.score-circle.poor{border-color:var(--danger);color:var(--danger)}
.wrong-list{text-align:left;margin:24px 0}
.wq{background:var(--bg-3);border:1px solid var(--border);border-left:3px solid var(--danger);border-radius:8px;padding:12px 14px;margin-bottom:10px;font-size:13px}
.wq .wqq{font-weight:600;margin-bottom:6px}
.wq .wqy{color:var(--danger)}
.wq .wqc{color:var(--success);margin-top:4px}

/* ═══════════════ PRÜFUNGS-UI ═══════════════ */
.exam-intro-card{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.exam-intro-hd{padding:28px 30px 24px;text-align:center;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(232,169,110,.08),transparent)}
.exam-intro-hd .exam-emoji{font-size:52px;margin-bottom:8px}
.exam-intro-hd h2{margin:0 0 6px;font-size:24px;font-weight:700}
.exam-intro-hd .exam-meta{display:flex;gap:16px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.exam-meta-chip{background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:500}
.exam-meta-chip span{color:var(--text-muted);font-weight:400;font-size:12px;display:block;margin-bottom:2px}
.exam-aufgaben-list{padding:20px 30px}
.exam-aufgaben-list h3{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin:0 0 14px}
.ea-row{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.ea-row:last-child{border-bottom:none}
.ea-nr{font-weight:700;color:#e8a96e;width:24px}
.ea-title{flex:1}
.ea-pts{font-size:12px;color:var(--text-muted);background:var(--bg-3);padding:2px 8px;border-radius:10px;white-space:nowrap}
.ea-subs{font-size:12px;color:var(--text-muted);margin-top:3px}
.exam-prev-result{margin:20px 30px 0;padding:14px 18px;border-radius:10px;border:1px solid rgba(232,169,110,.3);background:rgba(232,169,110,.06);font-size:13px}
.exam-intro-actions{padding:20px 30px;display:flex;gap:10px;flex-wrap:wrap}

/* Prüfungs-Schreibphase */
.exam-header{position:sticky;top:0;z-index:50;background:var(--bg-2);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:14px}
.exam-header h3{flex:1;margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-countdown{font-family:ui-monospace,monospace;font-size:22px;font-weight:700;color:var(--success);letter-spacing:1px;min-width:80px;text-align:right;transition:color .3s}
.exam-countdown.warn{color:var(--warning)}
.exam-countdown.critical{color:var(--danger);animation:blink .8s step-start infinite}
@keyframes blink{50%{opacity:.3}}
.exam-progress-strip{height:3px;background:var(--bg-3)}
.exam-progress-fill{height:100%;background:#e8a96e;transition:width 1s linear}
.exam-body{padding:24px 40px 80px;max-width:860px;margin:0 auto}
.exam-hinweis{padding:12px 16px;background:rgba(232,169,110,.08);border:1px solid rgba(232,169,110,.25);border-radius:8px;font-size:13px;color:#e8a96e;margin-bottom:24px}
.aufgabe-card{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;overflow:hidden}
.aufgabe-hd{padding:16px 20px;background:var(--bg-3);border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:12px}
.aufgabe-hd .a-nr{font-size:12px;font-weight:700;color:#e8a96e;text-transform:uppercase;letter-spacing:.8px}
.aufgabe-hd .a-title{flex:1;font-weight:600;font-size:15px}
.aufgabe-hd .a-pts{font-size:12px;color:var(--text-muted);background:var(--bg);padding:3px 10px;border-radius:10px}
.situation-box{padding:14px 20px;background:rgba(88,166,255,.05);border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-dim);line-height:1.65}
.situation-box strong{color:var(--accent-2-text)}
.teilaufgaben{padding:16px 20px}
.ta-item{margin-bottom:20px}
.ta-item:last-child{margin-bottom:0}
.ta-header{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.ta-buchst{font-weight:700;color:#e8a96e;font-size:14px;min-width:20px}
.ta-text{font-size:14px;line-height:1.55;flex:1}
.ta-pts-label{font-size:11px;color:var(--text-muted);white-space:nowrap;background:var(--bg-3);padding:2px 7px;border-radius:8px}
.ta-textarea{width:100%;margin-top:8px;background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;color:var(--text);font-size:13.5px;line-height:1.6;resize:vertical;min-height:100px;font-family:inherit;transition:border-color .15s}
.ta-textarea:focus{outline:none;border-color:rgba(232,169,110,.5)}
.ta-textarea:disabled{opacity:.6;cursor:not-allowed}
.exam-submit-bar{padding:20px 40px;background:var(--bg-2);border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto}
.exam-autosave{font-size:11px;color:var(--text-muted)}

/* Prüfungs-Auswertung */
.auswertung-card{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;overflow:hidden}
.aw-aufgabe-hd{padding:14px 20px;background:var(--bg-3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.aw-aufgabe-hd:hover{background:var(--bg-hover)}
.aw-nr{font-size:12px;font-weight:700;color:#e8a96e;text-transform:uppercase;letter-spacing:.8px}
.aw-title{flex:1;font-weight:600;font-size:14px}
.aw-score{font-size:13px;color:var(--text-muted)}
.aw-chev{color:var(--text-muted);font-size:11px;transition:transform .2s}
.aw-body{padding:0}
.aw-body.open{padding:16px 20px}
.ta-aw-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.ta-aw-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.ta-aw-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.deine-antwort{background:rgba(88,166,255,.06);border:1px solid rgba(88,166,255,.15);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text-dim);margin-bottom:10px;min-height:50px;line-height:1.6;white-space:pre-wrap}
.deine-antwort.leer{color:var(--text-muted);font-style:italic}
.musterloesung-toggle{background:var(--bg-3);border:1px solid var(--border);color:var(--text-dim);padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.musterloesung-toggle:hover{background:var(--bg-hover);color:var(--text)}
.musterloesung-box{display:none;margin-top:10px;background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.2);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.7;color:var(--text-dim);white-space:pre-wrap}
.musterloesung-box.open{display:block}
.bewertung-row{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bew-label{font-size:12px;color:var(--text-muted)}
.bew-btn{padding:6px 14px;border-radius:6px;border:1px solid;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s}
.bew-btn.erreicht{background:rgba(63,185,80,.15);border-color:var(--success);color:var(--success)}
.bew-btn.nicht-erreicht{background:rgba(248,81,73,.1);border-color:var(--danger);color:var(--danger)}
.bew-btn.inactive{background:var(--bg-3);border-color:var(--border);color:var(--text-muted)}
.bew-btn.inactive:hover{background:var(--bg-hover);color:var(--text)}
/* Ergebnis-Summary */
.exam-ergebnis{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:32px 30px;text-align:center}
.ergebnis-kreis{width:140px;height:140px;border-radius:50%;margin:0 auto 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid;font-family:ui-monospace,monospace}
.ergebnis-kreis .ek-pts{font-size:30px;font-weight:700}
.ergebnis-kreis .ek-total{font-size:13px;color:var(--text-muted)}
.ergebnis-kreis.bestanden{border-color:var(--success);color:var(--success)}
.ergebnis-kreis.nicht-bestanden{border-color:var(--danger);color:var(--danger)}
.ergebnis-kreis.offen{border-color:#e8a96e;color:#e8a96e}
.ergebnis-breakdown{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.erb-card{background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:10px 16px;min-width:120px}
.erb-val{font-size:18px;font-weight:700;font-family:ui-monospace,monospace;margin-bottom:2px}
.erb-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}

/* Gemeinsame Buttons */
.btn-primary{background:var(--accent);color:#0d1117;border:none;padding:12px 26px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .15s}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-exam-start{background:#e8a96e;color:#0d1117;border:none;padding:12px 26px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;transition:all .15s}
.btn-exam-start:hover{background:#f0c080;transform:translateY(-1px)}
.btn-secondary{background:var(--bg-3);color:var(--text);border:1px solid var(--border);padding:12px 22px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .15s}
.btn-secondary:hover{background:var(--bg-hover)}
.btn-danger-sm{background:rgba(248,81,73,.1);color:var(--danger);border:1px solid rgba(248,81,73,.3);padding:10px 18px;border-radius:8px;cursor:pointer;font-size:13px}
.btn-danger-sm:hover{background:rgba(248,81,73,.2)}

.sh{font-size:14px;margin:22px 0 10px;color:var(--text-dim);font-weight:600}
.danger-btn{background:rgba(248,81,73,.1);color:var(--danger);border:1px solid rgba(248,81,73,.3);padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;margin-top:18px}
.danger-btn:hover{background:rgba(248,81,73,.2)}

/* GESAMTTEST */
.gt-theme-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:rgba(210,153,34,.12);color:var(--warning);border:1px solid rgba(210,153,34,.25);margin-bottom:16px}
.gt-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.gt-count-btn{background:var(--bg-3);border:2px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;transition:all .15s;color:var(--text)}
.gt-count-btn:hover{border-color:var(--warning);background:rgba(210,153,34,.07)}
.gt-count-btn.active{border-color:var(--warning);background:rgba(210,153,34,.12);color:var(--warning)}
.gt-count-btn .gcb-num{font-size:22px;font-weight:700;font-family:ui-monospace,monospace;display:block}
.gt-count-btn .gcb-lbl{font-size:11px;color:var(--text-muted);margin-top:2px}
.gt-theme-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.gt-theme-check{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);cursor:pointer;font-size:13px;transition:all .15s;user-select:none}
.gt-theme-check:hover{background:var(--bg-hover)}
.gt-theme-check.checked{border-color:rgba(210,153,34,.4);background:rgba(210,153,34,.06)}
.gt-theme-check input{accent-color:var(--warning);width:15px;height:15px}
.gt-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:20px 0;text-align:left}
.gt-bd-card{background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.gt-bd-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.gt-bd-title{font-size:12px;font-weight:600;color:var(--text-dim)}
.gt-bd-score{font-size:13px;font-weight:700;font-family:ui-monospace,monospace}
.gt-bd-bar{height:5px;background:var(--bg);border-radius:3px;overflow:hidden}
.gt-bd-fill{height:100%;border-radius:3px;transition:width .4s}
/* SCROLL */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--border)}

/* RESPONSIVE */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:88vw;max-width:320px;z-index:200;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px rgba(0,0,0,.5);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sidebar.open{transform:translateX(0)}
  #sb-expand-btn{display:none!important}
  .mob-toggle{display:none!important}
  #mob-header{display:flex!important}
  .sub-item{min-height:48px;padding:12px 14px;font-size:14px}
  .q-opt{min-height:58px;padding:14px 16px;font-size:16px;border-radius:12px}
  .btn-primary,.btn-secondary{min-height:48px;font-size:15px;padding:12px 20px}
  .t-btn{min-height:44px}
  .md{font-size:16px;line-height:1.8}
  .qq-text{font-size:17px;line-height:1.5}
  input,textarea,select{font-size:16px!important}
  .q-opts{gap:10px}
  .wc{padding:24px 16px}
  .jnode-arrow{display:none}
  .jnode{width:98px}
  .cwrap,.exam-body{padding:56px 16px 80px}
  .exam-header{padding:10px 16px}
  .exam-submit-bar{padding:16px 20px}
  .score-circle{width:90px;height:90px;font-size:20px}
  .quiz-result{padding:24px 16px}
}
@media(min-width:901px){.mob-toggle{display:none}#mob-header{display:none!important}#mob-overlay{display:none!important}}
#mob-header{display:none;position:fixed;top:0;left:0;right:0;height:52px;background:var(--bg-2);border-bottom:1px solid var(--border);z-index:110;align-items:center;padding:0 14px;gap:10px;padding-top:env(safe-area-inset-top)}
#mob-hbtn{background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:6px 8px;border-radius:8px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#mob-htitle{font-size:15px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mob-hprog{font-size:12px;font-weight:700;color:var(--accent-2-text);flex-shrink:0}
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}
/* Timer Modus-Umschalter */
.t-mode-btn{background:transparent;color:var(--text-muted);transition:all .15s}
.t-mode-btn.active{background:var(--bg-2);color:var(--accent-2-text);box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ── Sidebar Tool-Buttons (Statistik, Ergebnisse, etc.) ── */
.sb-tool-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 4px;
  background:var(--bg-3);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text-dim);
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  line-height:1.2;
  transition:all .15s ease;
  min-height:52px;
}
.sb-tool-btn:hover{
  background:var(--bg-2);
  border-color:var(--accent-2);
  color:var(--text);
  transform:translateY(-1px);
}
.sb-tool-btn:active{
  transform:translateY(0);
}
.sb-tool-btn .ti{
  font-size:18px;
  line-height:1;
}

/* ════════════════ RESPONSIVE POLISH ════════════════ */

/* Korrekte Höhe auf Mobile-Browsern mit dynamischer Adressleiste
   (ältere Browser ignorieren dvh und behalten 100vh) */
.app{height:100dvh}

/* Schriftgröße (Klein/Groß) nutzt CSS `zoom` auf <body> - vh/dvh skalieren
   dabei NICHT mit, weil sie sich immer auf den echten Viewport beziehen
   (nicht auf den gezoomten). Prozentuale Höhe umgeht das, da sie sich auf
   die (bereits korrekt gezoomte) Höhe von <body> bezieht. Nur aktiv, wenn
   Zoom != 1 ist, damit der Normalfall unverändert bleibt. */
body.wfw-zoomed .app{height:100%}

/* Lange Lerninhalts-Tabellen (z.B. Marktformen-Matrix) auf schmalen
   Screens horizontal scrollbar machen, statt aus dem Layout zu laufen */
@media(max-width:620px){
  .md table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .md table th,.md table td{white-space:nowrap}
}

/* Kleine Handys (≈ iPhone SE / ältere Androids) */
@media(max-width:480px){
  .jnode{width:82px;padding:11px 4px 9px}
  .jnode-ringwrap{width:46px;height:46px}
  .jnode-title{font-size:11px}
  .gt-config-grid{grid-template-columns:1fr 1fr}
  .gt-theme-checks{grid-template-columns:1fr}
  .gt-breakdown{grid-template-columns:1fr}
  .wc h2{font-size:24px}
  .sub-title{font-size:23px}
  .quiz-intro h2{font-size:22px}
  .qq-text{font-size:16px}
  .cwrap,.exam-body{padding:56px 13px 80px}
  .quiz-qbox{padding:20px 16px}
  .qstat{flex:1;min-width:0}
  .score-circle{width:78px;height:78px;font-size:18px;border-width:5px}
  .ergebnis-kreis{width:118px;height:118px}
  .modal-ov{padding:10px}
  .modal-body{padding:16px 16px 20px}
}

/* Vorlesen-Button (TTS) in der Lernabschnitt-Toolbar */
.tts-btn{background:var(--bg-2);border:1px solid var(--border);color:var(--text-muted);padding:4px 12px;border-radius:16px;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;white-space:nowrap}
.tts-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--accent)}
.tts-btn.tts-active{background:rgba(88,166,255,.15);border-color:var(--accent);color:var(--accent-2-text)}

/* ════════════════ ANIMATIONS & MOTION POLISH ════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes fadeInUpCenter{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fadeInDownCenter{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

/* Sanfter Theme-Wechsel statt hartem Farbsprung
   (.jnode/.qstat/.sc bekommen background-color/color unten direkt in ihrer
   eigenen transition-Liste, weil ein zweites transition: sonst das erste
   komplett überschreiben würde statt es zu ergänzen) */
body,.sidebar,.main,.sb-head,.modal,.aufgabe-card,.quiz-qbox,.exam-intro-card,.wc{
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}

/* Inhalte: sanftes Einblenden beim Erscheinen (neue Ansicht / Tab-Wechsel).
   .cwrap animiert als GANZES (Titel+Toolbar+Inhalt zusammen) – vorher hatte
   nur .md eine eigene Animation, während Titel/Toolbar sofort erschienen.
   Dieses Auseinanderfallen von zwei Animations-Stufen sah beim Blättern
   zwischen Subtopics wie ein Flackern aus. */
.wc,.cwrap,.quiz-intro,.quiz-qbox,.quiz-result,.exam-intro-card,.exam-ergebnis,.auswertung-card,.gt-theme-chip,.status-bar,.examdate-card{
  animation:fadeInUp .3s cubic-bezier(.16,1,.3,1) both;
}

/* Startseite: Lernpfad-Knoten nacheinander einblenden */
.jnode{animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) both}
.jnode:nth-child(1){animation-delay:.02s}
.jnode:nth-child(3){animation-delay:.06s}
.jnode:nth-child(5){animation-delay:.1s}
.jnode:nth-child(7){animation-delay:.14s}
.jnode:nth-child(9){animation-delay:.18s}

/* Quiz: Antworten fliegen beim ersten Zeigen der Frage nacheinander rein.
   :not(:disabled) sorgt dafür, dass das nach der Beantwortung (dann disabled)
   nicht nochmal abspielt und nur das Richtig/Falsch-Feedback im Fokus steht. */
.q-opts .q-opt:not(:disabled){animation:fadeInUp .3s cubic-bezier(.16,1,.3,1) both}
.q-opts .q-opt:nth-child(1){animation-delay:.02s}
.q-opts .q-opt:nth-child(2){animation-delay:.06s}
.q-opts .q-opt:nth-child(3){animation-delay:.1s}
.q-opts .q-opt:nth-child(4){animation-delay:.14s}
.q-opt:active:not(:disabled){transform:scale(.98)}
.q-opt.correct{animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.q-opt.wrong{animation:shake .35s ease}

/* Ergebnis-Kreise: zufriedenstellendes „Pop“ beim Erscheinen + farbiger Glow */
.score-circle,.ergebnis-kreis{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
.score-circle.excellent,.ergebnis-kreis.bestanden{box-shadow:0 0 28px rgba(63,185,80,.25)}
.score-circle.good{box-shadow:0 0 24px rgba(88,166,255,.2)}
.ergebnis-kreis.offen{box-shadow:0 0 24px rgba(232,169,110,.2)}

/* Buttons: fühlbares Drücken statt reinem Hover */
.btn-primary:active,.btn-exam-start:active,.btn-secondary:active,.mode-tab:active,
.chk-btn:active,.nav-btn:active:not(:disabled),.gt-count-btn:active,
.sb-tool-btn:active,.sb-tool-flat:active,.sb-tbtn:active,.jnode:active{
  transform:scale(.96);
}
.mode-tab.active{box-shadow:0 2px 10px rgba(88,166,255,.25)}
.chk-btn.done{animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
.sb-tool-btn .ti,.sb-tool-flat .ti{display:inline-block;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.sb-tool-btn:hover .ti,.sb-tool-flat:hover .ti{transform:scale(1.15) rotate(-4deg)}

/* Karten/Chips: leichtes Anheben beim Hover */
.qstat,.sc,.erb-card,.gt-bd-card,.exam-meta-chip{transition:transform .2s ease,box-shadow .2s ease,background .15s ease,border-color .2s ease,color .2s ease}
.qstat:hover,.sc:hover,.erb-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.2)}

/* Sidebar: Akkordeon sanft einblenden statt hart umschalten */
.theme-sec.open .sub-list{animation:fadeIn .2s ease}

/* Fortschrittsbalken: dezenter, langsamer Glanz-Effekt über die gefüllte Fläche
   (bewusst NICHT auf .exam-progress-fill – im Klausur-Timer soll nichts ablenken) */
.prog-bar,.qpfill,.gt-bd-fill{position:relative;overflow:hidden}
.prog-bar::after,.qpfill::after,.gt-bd-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  background-size:200% 100%;animation:shimmer 2.4s ease-in-out infinite;
}

/* Modal: sanftes Herein-Skalieren statt abruptem Erscheinen */
.modal-ov.open{animation:fadeIn .15s ease}
.modal{animation:scaleIn .25s cubic-bezier(.16,1,.3,1) both}

/* Lade-Punkte für asynchrone "Lädt..."-Zustände (z.B. Gruppenvergleich) */
.loading-dots::after{content:'';display:inline-block;width:1em;text-align:left;animation:loadingDots 1.2s steps(4,end) infinite}
@keyframes loadingDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}

/* Sichtbarer, aber dezenter Fokus-Ring für Tastaturnutzung */
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ════════════════ PREMIUM-DARK-OVERHAUL ════════════════
   Serif für die großen Momente (Marke, Seitentitel, Quizfrage),
   System-Sans bleibt für dichte UI-Texte – kein Font-Nachladen,
   damit die Offline-PWA nicht darunter leidet. */
.tb-brand,.wc h2,.sub-title,.quiz-intro h2,.quiz-qbox .qq-text,
.exam-intro-hd h2,.md h2,.modal-hd h2{
  font-family:var(--font-display);
  letter-spacing:-.01em;
}

/* Etwas schärfere, architektonischere Außenkanten statt durchgängig
   weicher Bubble-Ecken – die App wirkt dadurch strukturierter. */
.wc,.quiz-intro,.quiz-qbox,.quiz-result,.exam-intro-card,.exam-ergebnis,
.auswertung-card,.aufgabe-card,.modal{border-radius:10px}

/* ── Sidebar: Fortschritts-Ring statt Balken ── */
#sb-ring-wrap{display:flex;align-items:center;gap:10px}
#sb-ring-wrap svg{display:block}
#sb-ring-frac{font-family:ui-monospace,"SF Mono",monospace;font-size:13px;font-weight:700;color:var(--text-dim);line-height:1.3}
#sb-ring-frac span{display:block;font-size:9px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* ── Sidebar: gruppierte Werkzeuge statt einem 17er-Grid ── */
.sb-group-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);margin:2px 1px 5px}
.sb-more-btn{width:100%;background:transparent;border:1px dashed var(--border);color:var(--text-muted);font-size:11px;font-weight:600;padding:7px;border-radius:7px;cursor:pointer;transition:all .15s;margin-bottom:8px}
.sb-more-btn:hover{color:var(--accent-2-text);border-color:var(--accent)}
#tools-more{display:none;flex-direction:column;margin-top:6px;margin-bottom:8px}
#tools-more.open{display:flex;animation:fadeIn .2s ease}
#tools-more .sb-group-lbl:first-child{margin-top:0}
#tools-more .sb-tool-grid:last-child{margin-bottom:0}

/* ── Sidebar-Bündelung: eine Kopfzeile, eine Session-Karte ── */
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.sb-top-right{display:flex;align-items:center;gap:6px;flex-shrink:0}

.sb-session{background:var(--bg-3);border-radius:9px;padding:10px 12px;margin-bottom:12px}
.sb-trow{display:flex;align-items:center;gap:8px}
.sb-modes{display:flex;gap:2px;background:var(--bg);border-radius:6px;padding:2px;flex-shrink:0}
.sb-mode-btn{padding:4px 7px !important;font-size:13px !important}
.sb-tdisp{font-size:16px !important;flex:1;text-align:center;margin:0 !important;letter-spacing:.3px}
.sb-tbtn{flex:0 0 auto;padding:5px 12px !important;font-size:12px !important;border-radius:6px !important;min-width:64px}
.sb-metarow{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--text-muted);margin-top:8px}
.sb-metarow b{color:var(--text-dim);font-weight:700}
.sb-streak{color:var(--warning);font-weight:600;margin-left:4px}
.sb-metarow-right{display:flex;align-items:center;gap:7px}

/* Tool-Buttons ohne Einzel-Box – nur Hover-Hintergrund */
.sb-tool-flat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;background:transparent;border:none;border-radius:8px;color:var(--text-dim);font-size:10px;font-weight:600;cursor:pointer;text-align:center;line-height:1.2;transition:background .15s;min-height:50px}
.sb-tool-flat:hover{background:var(--bg-3);color:var(--text)}
.sb-tool-flat .ti{font-size:17px;line-height:1}
.sb-tool-danger{color:var(--danger)}
.sb-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:6px}

/* ── Werkzeug-Topbar (Desktop): löst die Sidebar von den Werkzeugen ab,
   damit dort nur noch Titel/Timer/Themenbaum stehen. Mobile behält die
   Werkzeuge in der Sidebar (.sb-tools-wrap), weil dort die Bottom-Nav
   dafür fehlt und die aufklappbare Sidebar der einzige erreichbare Ort ist. */
.main-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.main{flex:1;min-height:0}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px 18px;background:var(--bg-2);border-bottom:1px solid var(--border);flex-shrink:0}
.tb-brand{justify-self:start;font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--text);cursor:pointer;white-space:nowrap;padding:6px 2px}
.tb-brand:hover{color:var(--accent-2-text)}
.tb-groups{display:flex;align-items:stretch;justify-content:center;gap:4px;flex-wrap:wrap}

/* ── Topbar-Gruppen: Dropdown statt Einzel-Icon-Flut (Shop-Navbar-Prinzip).
   Trigger läuft horizontal (Icon – Label – Pfeil), nicht gestapelt, damit er
   klar als Menüpunkt statt als Icon-Kachel wirkt. ── */
.tb-group{position:relative}
.tb-btn{-webkit-appearance:none;appearance:none;position:relative;display:flex;flex-direction:row;align-items:center;gap:7px;padding:9px 16px;background:transparent;border:none;border-radius:9px;color:var(--text-dim);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.tb-btn .ti{font-size:16px;line-height:1}
.tb-lbl{font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.tb-btn:hover{background:var(--bg-3);color:var(--text)}
.tb-btn:active{transform:scale(.97)}
.tb-trigger .tb-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;transition:transform .15s}
.tb-group.open .tb-trigger{background:var(--bg-3);color:var(--text)}
.tb-group.open .tb-caret{transform:rotate(180deg)}
.tb-trigger-badge{color:var(--danger);font-size:11px;font-weight:700}
.tb-menu{display:none;flex-direction:column;gap:1px;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;min-width:200px;padding:6px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:70}
.tb-group.open .tb-menu{display:flex;animation:fadeIn .12s ease}
.tb-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:7px;color:var(--text-dim);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-align:left;white-space:nowrap;transition:background .12s,color .12s}
.tb-item .ti{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.tb-item:hover{background:var(--bg-3);color:var(--text)}
.tb-item .sr-due-count{margin-left:auto;color:var(--danger);font-size:11px;font-weight:700}
.tb-menu-sep{height:1px;background:var(--border);margin:5px 4px}
.tb-item-danger{color:var(--danger)}
.tb-item-danger:hover{background:rgba(248,81,73,.12);color:var(--danger)}

/* ── Startseite: CTA für Erstbesucher ohne Prüfungsdatum – hat Vorrang vor
   allen anderen Hinweisen, weil Countdown & Lernplan-Tempo davon abhängen ── */
.examdate-card{background:var(--bg-2);border:1px solid var(--accent);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .15s}
.examdate-card:hover{background:var(--bg-3)}
.examdate-icon{font-size:24px;flex-shrink:0}
.examdate-txt{flex:1;min-width:0}
.examdate-title{font-weight:700;font-size:14px}
.examdate-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.examdate-arrow{font-size:13px;font-weight:700;color:var(--accent-2-text);white-space:nowrap;flex-shrink:0}

/* ── Startseite: eine kompakte Status-Zeile statt gestapelter Reife-/Fällig-/
   Empfehlungs-Karten (Progressive Disclosure: nur die wichtigste Empfehlung
   direkt zeigen, Rest hinter "+N weitere Hinweise") ── */
.status-bar{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:12px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.status-reife{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
.status-reife-lbl{font-weight:700;font-size:13px}
.status-reife-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.status-next{display:flex;align-items:center;gap:10px;flex:1;min-width:220px;border-left:3px solid;padding-left:14px}
.status-next-icon{font-size:20px;flex-shrink:0}
.status-next-txt{min-width:0}
.status-next-title{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-next-desc{font-size:11px;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-chip{flex-shrink:0;background:rgba(88,166,255,.1);border:1px solid rgba(88,166,255,.3);border-radius:20px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--accent-2-text);cursor:pointer;white-space:nowrap;transition:background .15s;font-family:inherit}
.status-chip:hover{background:rgba(88,166,255,.18)}
.status-more-btn{display:block;width:fit-content;margin:8px auto 0;background:transparent;border:1px dashed var(--border);color:var(--text-muted);font-size:11px;font-weight:600;padding:6px 14px;border-radius:7px;cursor:pointer;transition:all .15s;font-family:inherit}
.status-more-btn:hover{color:var(--accent-2-text);border-color:var(--accent)}
.status-more{display:none;margin-top:8px}
.status-more.open{display:block;animation:fadeIn .2s ease}
.status-more-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--border);border-left:3px solid;border-radius:10px;margin-bottom:6px}
.status-more-row:last-child{margin-bottom:0}

/* ── Sidebar ein-/ausklappen (Desktop) ── */
/* Schmaler Pull-Tab am linken Rand statt eines schwebenden Icon-Buttons –
   vertikal mittig, wächst beim Hover leicht nach rechts als "rausziehen"-Hinweis. */
/* Ein einziger Pull-Tab, der mit der Sidebar-Breite mitgleitet (dieselbe
   Transition wie .app's grid-template-columns), statt zwei Elementen, die
   abrupt ein-/ausgeblendet werden. Der Pfeil dreht sich statt Textwechsel. */
#sb-expand-btn{display:none;position:fixed;top:50%;left:340px;transform:translateY(-50%);z-index:60;align-items:center;justify-content:center;width:16px;height:64px;background:var(--bg-2);border:1px solid var(--border);border-left:none;border-radius:0 10px 10px 0;color:var(--text-dim);cursor:pointer;font-size:13px;box-shadow:2px 0 14px rgba(0,0,0,.3);transition:left .25s cubic-bezier(.4,0,.2,1),color .15s,border-color .15s,background-color .15s}
#sb-expand-btn:hover{color:var(--text);border-color:var(--accent);background:var(--bg-3)}
#sb-expand-btn:active{transform:translateY(-50%) scale(.94)}
.tab-arrow{display:inline-block;transition:transform .25s cubic-bezier(.4,0,.2,1)}
body.sb-collapsed .tab-arrow{transform:rotate(180deg)}
@media(min-width:901px){
  .app{transition:grid-template-columns .25s cubic-bezier(.4,0,.2,1)}
  body.sb-collapsed .app{grid-template-columns:0 1fr}
  body.sb-collapsed .sidebar{overflow:hidden;border-right:none;padding:0}
  #sb-expand-btn{display:flex}
  body.sb-collapsed #sb-expand-btn{left:0}
  .sb-tools-wrap{display:none}
}
@media(max-width:900px){
  .topbar{display:none}
}