/* =========================================================================
   Design-System: ruhig, modern, gut lesbar, mobil-first.
   ========================================================================= */
/* P90: alle Farb-Tokens stehen in public/tokens.css (Standard, Themes, hell + dunkel). */
/* ---- Schriftgroesse: skaliert NUR Inhalt (Lernzettel + Eingabe/Notizen) ---- */
:root { --content-scale: 1; }
html[data-scale="sm"] { --content-scale: .9; }
html[data-scale="md"] { --content-scale: 1; }
html[data-scale="lg"] { --content-scale: 1.16; }
html[data-scale="xl"] { --content-scale: 1.34; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.error { color: var(--t-recht); font-size: .9rem; }

/* ---- Buttons ---- */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: .7rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: transform .05s ease, background .15s ease, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-d); }
.btn--go { background: var(--go); border-color: var(--go); color: var(--on-go); width: 100%; font-size: 1.05rem; padding: .9rem; }
.btn--go:hover { background: var(--go-d); }
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }
.icon-btn { background: transparent; border: none; font-size: 1.3rem; cursor: pointer; padding: .3rem .5rem; border-radius: 8px; color: var(--text); }
.icon-btn:hover { background: var(--surface-2); }

/* ---- Login ---- */
.view--center { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 2rem; width: 100%; max-width: 380px; text-align: center; }
.brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .4rem; }
.brand__mark { width: 44px; height: 44px; display: block; flex: 0 0 44px; color: var(--text); }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.sn-logo svg { width: 26px; height: 26px; display: block; }
.login-card h1 { font-size: 1.4rem; margin: 0; }
#login-form { display: grid; gap: .7rem; margin-top: 1.2rem; }
input, textarea, select { font-family: var(--font); font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: .7rem .8rem; width: 100%; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---- Layout ---- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; padding: max(.6rem, env(safe-area-inset-top)) 1rem .6rem; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar__title { font-weight: 700; font-size: 1.1rem; flex: 1; }
:root { --fab-space: 60px; }   /* P90 (D3b): Hoehe der Hilfe-Blase + 8 px */
.main { max-width: 760px; margin: 0 auto; padding: 1rem 1rem calc(86px + var(--fab-space) + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) { html[data-fab="1"] .main { padding-bottom: calc(152px + var(--fab-space) + env(safe-area-inset-bottom)); } }   /* Heute: Blase sitzt eine Stufe hoeher */
.section-title { font-size: 1.05rem; margin: 1.4rem .2rem .6rem; }

/* ---- Tab-Leiste ---- */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-around; gap: .2rem; padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.tab { flex: 1; border: none; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem; border-radius: 10px; cursor: pointer; }
.tab span { font-size: 1.3rem; }
.tab.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ---- Composer / Eingang ---- */
.composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; box-shadow: var(--shadow); }
.composer textarea { border: none; resize: vertical; padding: .4rem; font-size: calc(1rem * var(--content-scale)); }
.composer textarea:focus { outline: none; }
.composer__row { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.chip-select { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.chip-select select { width: auto; padding: .35rem .5rem; font-size: .82rem; }

/* ===== P59: Fach-Vorauswahl im Composer (Mehrfach, sticky) ===== */
.note-topics { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .45rem; margin-top: .55rem; min-width: 0; }
.note-topics__lbl { flex: 1 1 100%; font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.note-topics__chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.note-topic-chip {
  border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text);
  border-radius: 999px; padding: .34rem .8rem; min-height: 34px; font: inherit; font-size: .84rem; font-weight: 600;
  line-height: 1.1; cursor: pointer; white-space: nowrap;
  transition: background var(--dur, .18s) var(--ease, ease), border-color var(--dur, .18s) var(--ease, ease), color var(--dur, .18s) var(--ease, ease);
}
.note-topic-chip.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.note-topic-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.note-topics__reset {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 999px; width: 30px; height: 30px; min-height: 30px; font-size: 1rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.note-topics__reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .note-topic-chip { transition: none; } }

.photo-preview { margin-top: .6rem; }
.photo-preview img { max-height: 120px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.go-bar { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .4rem; }
.badge { background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }

.answer-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); margin: .6rem 0; }
.answer-card h4 { margin: .6rem 0 .2rem; }
.answer-card p { margin: .3rem 0; }

.notes-list { display: grid; gap: .55rem; }
.note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .8rem; display: flex; gap: .6rem; align-items: flex-start; box-shadow: var(--shadow); }
.note__body { flex: 1; font-size: calc(1rem * var(--content-scale)); }
.note__meta { font-size: .72rem; color: var(--muted); margin-top: .25rem; }
/* Loesch-/Icon-Buttons: einheitlich, mind. 40px Touch-Ziel (Handy), klar sichtbar. */
.icon-del, .note__del {
  display: inline-grid; place-items: center;
  min-width: 40px; min-height: 40px;
  color: var(--muted); cursor: pointer; border: none; background: none;
  font-size: 1.25rem; line-height: 1; border-radius: 10px; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.icon-del:hover, .note__del:hover { color: var(--danger); background: var(--surface-2); }
.icon-del:active, .note__del:active { transform: scale(.92); }
.note__img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* ---- Bibliothek ---- */
.library { display: grid; gap: 1.4rem; }
.lib-group__title { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; margin: .2rem .2rem .6rem; }
.lib-dot { width: 11px; height: 11px; border-radius: 50%; }
.lib-cards { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lib-cards { grid-template-columns: 1fr 1fr; } }
.sheet-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); cursor: pointer; border-top: 3px solid var(--accent, var(--primary)); transition: box-shadow .15s, transform .05s; }
.sheet-card:hover { box-shadow: var(--shadow-lg); }
.sheet-card:active { transform: translateY(1px); }
.sheet-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.sheet-card p { margin: 0; font-size: .88rem; color: var(--muted); }
.sheet-card__foot { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.ver-badge { font-size: .72rem; font-weight: 700; color: var(--accent, var(--primary)); background: color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent); padding: .15rem .5rem; border-radius: 999px; }

/* ---- Lernzettel-Ansicht ---- */
.sheet-toolbar { display: flex; align-items: center; margin-bottom: .8rem; }
/* Lernzettel-Inhalt skaliert mit --content-scale; Ueberschriften in em -> proportional. */
.sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.3rem; box-shadow: var(--shadow); font-size: calc(1rem * var(--content-scale)); }
.sheet__header { border-bottom: 2px solid var(--accent, var(--primary)); padding-bottom: .7rem; margin-bottom: 1rem; }
.sheet__topic { font-size: .78em; font-weight: 700; color: var(--accent, var(--primary)); text-transform: uppercase; letter-spacing: .04em; }
.sheet h1 { font-size: 1.5em; margin: .2rem 0; }
.sheet__summary { color: var(--muted); margin: .2rem 0 0; }
.sheet section { margin: 1.2rem 0; }
.sheet h2 { font-size: 1.15em; margin: 1.1rem 0 .5rem; padding-left: .6rem; border-left: 4px solid var(--accent, var(--primary)); }
.sheet p { margin: .4rem 0; }
.sheet ul { margin: .4rem 0; padding-left: 1.2rem; }
.sheet li { margin: .25rem 0; }
.block { position: relative; }
.src { display: inline-block; font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: .05rem .45rem; margin-top: .25rem; }

table.sheet-table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .92rem; }
table.sheet-table th, table.sheet-table td { border: 1px solid var(--border); padding: .5rem .6rem; text-align: left; vertical-align: top; }
table.sheet-table th { background: var(--surface-2); font-weight: 700; }

.keyterm { background: var(--surface-2); border-radius: var(--radius-sm); padding: .5rem .7rem; margin: .4rem 0; }
.keyterm b { color: var(--text); }

/* Callouts (Farbcodes laut Regelwerk) */
.callout { border-radius: var(--radius-sm); padding: .7rem .9rem; margin: .6rem 0; border-left: 4px solid var(--c, var(--primary)); background: color-mix(in srgb, var(--c, var(--primary)) 8%, var(--surface)); }
.callout__label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--c, var(--primary)); }
.callout p { margin: .25rem 0 0; }
.callout--merksatz   { --c: var(--c-merke); }
.callout--beispiel   { --c: var(--c-beispiel); }
.callout--pruefung   { --c: var(--c-pruefung); }
.callout--extern     { --c: #1f6feb; }   /* externe Ergänzung = blau */
.callout--warnung    { --c: #e8821e; }   /* orange */
.callout--korrektur  { --c: #e5484d; }   /* rot */

.diagram { margin: .8rem 0; text-align: center; overflow-x: auto; }
.diagram .cap { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* ---- Quiz ---- */
.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.topic-pill { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent, var(--primary)); border-radius: var(--radius-sm); padding: .8rem; cursor: pointer; box-shadow: var(--shadow); text-align: left; }
.topic-pill b { display: block; }
.topic-pill small { color: var(--muted); }
.quiz-runner { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); }
.quiz-progress { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.quiz-progress > div { height: 100%; background: var(--primary); transition: width .3s; }
.q-question { font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.q-options { display: grid; gap: .55rem; }
/* Antwort-Buttons: groesser, klar abgegrenzt, mind. 48px Touch-Ziel. */
.q-opt {
  text-align: left; padding: .85rem 1rem; min-height: 48px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer;
  font-size: 1.02rem; line-height: 1.4; transition: border-color .12s, background .12s;
}
.q-opt:hover { border-color: var(--primary); }
.q-opt.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); font-weight: 600; }
.q-opt.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
.q-opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, var(--surface)); }
.q-feedback { margin-top: 1rem; padding: .85rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.q-feedback.ok { border-left: 4px solid var(--ok); }
.q-feedback.no { border-left: 4px solid var(--danger); }
/* P31 (Idee 9): freie Antworten — Hinweis/Lösung-Aktionen, Hinweis-Box, Fachwort, Lösungs-Reveal. */
.q-feedback.reveal { border-left: 4px solid var(--primary); }
.q-fachwort { margin: .2rem 0 .1rem; font-weight: 600; color: var(--primary); }
.q-free-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.q-free-actions .btn { flex: 1 1 auto; }
.q-hint-box { margin-top: .55rem; padding: .65rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--accent, var(--primary)); font-size: .95rem; }
/* P29: Zuordnung per Tippen statt nativer <select>-Dropdowns (Reports #3/#4, Idee 5).
   Slot + Chip brechen Text VOLL um (Report #3), benutzte Chips verschwinden (#4).
   Tokens (Hell/Dunkel), grosse Tap-Ziele, Fokus-Ring; Transition vom globalen
   prefers-reduced-motion-Block (oben) abgeschaltet. */
.match-rows { display: grid; gap: .55rem; }
.match-row { background: var(--surface-2); border-radius: var(--radius-sm); padding: .6rem .7rem; }
.match-term {
  font-weight: 600; line-height: 1.35; margin-bottom: .4rem;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.match-slot {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px;
  text-align: left; cursor: pointer; padding: .6rem .75rem; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border); background: var(--surface); color: var(--muted);
  font-size: 1.02rem; line-height: 1.4;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.match-slot__txt { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.match-slot__x { flex-shrink: 0; font-size: 1.05rem; opacity: 0; color: var(--danger); }
.match-slot:hover { border-color: var(--primary); }
.match-slot.is-active { border-style: solid; border-color: var(--primary); color: var(--text); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.match-slot.is-filled { border-style: solid; border-color: var(--primary); color: var(--text); font-weight: 600; }
.match-slot.is-filled .match-slot__x { opacity: 1; }
.match-slot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.match-pool { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.match-chip { width: auto; max-width: 100%; min-height: 44px; }
.match-chip .q-opt__t { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.match-hint { margin: .55rem 0 0; font-size: .9rem; color: var(--muted); }
.quiz-cta:disabled { opacity: .55; box-shadow: none; cursor: default; }

.quiz-result { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.score-ring { font-size: 2.4rem; font-weight: 800; margin: .4rem 0; }

/* ---- Statistik ---- */
.stats-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); text-align: center; }
.stat b { display: block; font-size: 1.8rem; }
.stat small { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card h3 { margin: 0 0 .8rem; font-size: 1rem; }
.weak-item { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--border); }

.empty { text-align: center; padding: 3rem 1rem; }

/* ---- Loader / Toast ---- */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(15,20,32,.45); backdrop-filter: blur(2px); }
.loader__box { background: var(--surface); border-radius: var(--radius); padding: 1.6rem 2rem; text-align: center; box-shadow: var(--shadow-lg); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--surface-2); border-top-color: var(--primary); border-radius: 50%; margin: 0 auto .7rem; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem; z-index: 60; box-shadow: var(--shadow-lg); }
/* P84: lange Toasts (Admin-Einordnung mit Diagnose-Zaehlern) — Breite bis zum Rand statt halber Bildschirm, Radius, der bei
   einer Zeile wie die Pille aussieht und bei mehreren den Text nicht ueber den dunklen Grund ragen laesst. */
.toast { width: max-content; max-width: calc(100vw - 32px); border-radius: 1.25rem; text-align: center; }

/* =========================================================================
   DRUCK / PDF (A4 Hochformat) – nur der Lernzettel, ohne App-Rahmen.
   ========================================================================= */
@media print {
  @page { size: A4 portrait; margin: 16mm 14mm; }
  body { background: #fff; font-size: 11.5pt; }
  .topbar, .tabbar, .sheet-toolbar, #loader, #toast, .composer, .go-bar { display: none !important; }
  .main { max-width: none; margin: 0; padding: 0; }
  .view { display: none !important; }
  #view-sheet { display: block !important; }
  .sheet { border: none; box-shadow: none; border-radius: 0; padding: 0; }
  .sheet h2 { break-after: avoid; }
  .callout, table.sheet-table, .diagram, .keyterm, .sheet section { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Markdown-Lernzettel (body) ---- */
.sheet .md h2 { font-size: 1.15em; margin: 1.2rem 0 .5rem; padding-left: .6rem; border-left: 4px solid var(--accent, var(--primary)); }
.sheet .md h3 { font-size: 1.02em; margin: .9rem 0 .35rem; }
.sheet .md p { margin: .5rem 0; }
.sheet .md ul, .sheet .md ol { margin: .4rem 0; padding-left: 1.3rem; }
.sheet .md li { margin: .25rem 0; }
.sheet .md table { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .92rem; }
.sheet .md th, .sheet .md td { border: 1px solid var(--border); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.sheet .md th { background: var(--surface-2); font-weight: 700; }
.sheet .md code { background: var(--surface-2); padding: .05rem .35rem; border-radius: 6px; font-size: .9em; }
.sheet .md pre { background: var(--surface-2); padding: .7rem; border-radius: 10px; overflow-x: auto; }
.sheet .md pre code { background: none; padding: 0; }
.sheet .md blockquote { margin: .6rem 0; padding: .5rem .9rem; border-left: 4px solid var(--border); color: var(--muted); background: var(--surface-2); border-radius: 8px; }
.sheet .md em { color: var(--muted); }
.sheet .md .callout em, .sheet .md .callout .src { color: inherit; }

/* =========================================================================
   EINSTELLUNGEN (Phase C)
   ========================================================================= */
.settings-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.settings-group > h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.settings-group > .hint { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); }
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.settings-card > h3 { margin: 0 0 .2rem; font-size: 1.02rem; }

/* P6: Topic-Gewichtung (Slider je Fachbereich) */
.topic-weights { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.topic-weights .row { display: grid; grid-template-columns: 9rem 1fr 3.5rem; gap: .6rem; align-items: center; }
.topic-weights input[type=range] { width: 100%; }

/* Segment-Schalter (hell/dunkel/system, Schriftgroesse, Quiz-Umfang) */
.segmented { display: flex; gap: .35rem; flex-wrap: wrap; }
.segmented button {
  flex: 1 1 auto; min-height: 44px; min-width: 64px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); padding: .5rem .7rem; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.segmented button:hover { border-color: var(--primary); }
.segmented button.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--text); }

/* Theme-Auswahl als farbige Kacheln mit Mini-Vorschau */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (min-width: 520px) { .theme-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.theme-card { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: .55rem; cursor: pointer; background: var(--surface); color: var(--text); text-align: left; }
.theme-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.theme-card b { display: block; font-size: .82rem; margin-top: .4rem; }
.swatch { display: flex; height: 30px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); }
.swatch span { flex: 1; }

.settings-actions { display: flex; gap: .6rem; margin-top: .4rem; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.toggle-row .toggle-label b { display: block; }
.toggle-row .toggle-label small { color: var(--muted); }
/* einfacher Schalter */
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 999px; transition: background .15s, border-color .15s; pointer-events: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: color-mix(in srgb, var(--primary) 30%, var(--surface)); border-color: var(--primary); }
.switch input:checked + .track::after { transform: translateX(22px); background: var(--primary); }

/* Bibliothek-Suchleiste (Stufe 3b) */
.lib-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 .8rem; }
.lib-toolbar .spacer { flex: 1 1 0; }
.lib-toolbar input { padding: .6rem .8rem; border-radius: .7rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; }
.lib-toolbar #library-search { flex: 1 1 220px; }
.lib-toolbar input::placeholder { color: var(--muted); }
.lib-crumbs { font-weight: 600; opacity: .85; }
.lib-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.lib-tile { border: 1px solid var(--border); border-radius: .9rem; padding: 1rem; cursor: pointer; background: var(--surface); border-top: 3px solid var(--accent, var(--primary)); transition: box-shadow .15s, transform .05s; }
.lib-tile:hover { box-shadow: var(--shadow-lg); }
.lib-tile:active { transform: translateY(1px); }
.lib-tile h3 { margin: 0 0 .25rem; font-size: 1rem; }
.lib-tile .lib-tile__meta { font-size: .78rem; opacity: .75; }
.lib-tile .lib-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.lib-subhead { font-size: .82rem; font-weight: 600; color: var(--muted); margin: .6rem 0 .3rem; }

/* P34 (#12): Lange Titel/Woerter in der Bibliothek sauber umbrechen und auf
   max. 2 Zeilen clampen (danach „…"), damit Karten/Kacheln nicht horizontal
   gesprengt werden (Mac/Desktop wie iPhone). Hell+Dunkel unveraendert. */
.sheet-card h3, .lib-tile h3, .lib-subhead, .lib-group__title-text {
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-width: 0;
}
/* Karten/Kacheln als Grid-Kind gegen horizontales Sprengen sichern. */
.sheet-card, .lib-tile { min-width: 0; overflow: hidden; }
.sheet-card p { overflow-wrap: anywhere; word-break: break-word; }
.library, .lib-cards, .lib-tiles { min-width: 0; }
/* Fach-Ueberschrift ist display:flex -> Text in clampbares Kind legen. */
.lib-group__title { min-width: 0; }
.lib-group__title .lib-dot { flex: 0 0 auto; }
.lib-group__title-text { flex: 1 1 auto; }

/* P8: Diktier-Knopf (aktiv = pulsierend rot) */
.icon-btn.dictate.is-rec { background: var(--accent, #e84a4a); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,74,74,.6); } 50% { box-shadow: 0 0 0 .5rem rgba(232,74,74,0); } }

/* P10-UX: dezentes Banner „aus Fachwissen erzeugen" ueber den Fach-Kacheln */
.lib-fw-banner { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px dashed var(--border); border-radius: .7rem; background: var(--surface); margin-bottom: .8rem; flex-wrap: wrap; }
.lib-fw-banner .btn--small { padding: .35rem .7rem; font-size: .85rem; }
.lib-fw-banner span { flex: 1 1 auto; opacity: .85; }

/* P48: Buchstruktur-Baum (Teil → Kapitel → Hauptthema → Unterthema → Zettel).
   Warme, klickbare Hierarchie über native <details>. Ungesetzte Ebenen fallen weg. */
.hier-tree { display: flex; flex-direction: column; gap: .5rem; }
.hier-node { border: 1px solid var(--border); border-radius: .8rem; background: var(--surface); overflow: hidden; }
.hier-node--l0 { border-left: 4px solid var(--accent, var(--primary)); }
.hier-node__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; font-weight: 600; user-select: none; }
.hier-node__sum::-webkit-details-marker { display: none; }
.hier-node__sum:hover { background: color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--surface)); }
.hier-node__arrow { color: var(--accent, var(--primary)); font-size: .8rem; transition: transform .18s ease; flex: 0 0 auto; }
.hier-node[open] > .hier-node__sum > .hier-node__arrow { transform: rotate(90deg); }
.hier-node__kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; font-weight: 700; flex: 0 0 auto; }
.hier-node__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hier-node__count { flex: 0 0 auto; font-size: .78rem; font-weight: 700; min-width: 1.5rem; text-align: center; padding: .1rem .45rem; border-radius: 1rem; background: color-mix(in srgb, var(--accent, var(--primary)) 14%, var(--surface)); color: var(--accent, var(--primary)); }
.hier-node__body { padding: .2rem .5rem .55rem 1rem; display: flex; flex-direction: column; gap: .45rem; border-top: 1px solid var(--border); }
.hier-node .hier-node { border-radius: .65rem; }
.hier-leaf { padding: .15rem 0; }
@media (prefers-reduced-motion: reduce) { .hier-node__arrow { transition: none; } }

/* P50: Flache Kategorie-Ansicht (Fach -> Kategorie -> Zettel). Kategorie mit genau 1 Zettel
   ist eine anklickbare Zeile, die den Zettel direkt oeffnet (kein Zwischenklick). */
.hier-tree--flat { gap: .5rem; }
.hier-cat--single {
  display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem;
  border: 1px solid var(--border); border-left: 4px solid var(--accent, var(--primary));
  border-radius: .8rem; background: var(--surface); cursor: pointer; user-select: none;
}
.hier-cat--single:hover { background: color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--surface)); }
.hier-cat--single:focus-visible { outline: 2px solid var(--accent, var(--primary)); outline-offset: 2px; }
.hier-cat__name { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hier-cat__meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .68; font-size: .85rem; }
.hier-cat--multi.hier-node--l0 { border-left-width: 4px; }
/* P53: flache Bibliothek gegen horizontalen Overflow absichern (kein Zoom noetig). */
.hier-tree, .hier-tree--flat { min-width: 0; max-width: 100%; }
.hier-cat--single { min-width: 0; overflow: hidden; }
/* P53 (Mobil <=640px): Einzel-Zettel-Kategorie stapeln — Kategorie-Label + Zaehler oben,
   voller Zettel-Titel darunter (umbrechen + 2-Zeilen-Clamp) statt einer ueberlaufenden Zeile.
   Zeile bleibt EIN Tap-Ziel (role=button unveraendert). Zoom bleibt erlaubt, nur nicht mehr noetig. */
@media (max-width: 640px) {
  .hier-cat--single { flex-wrap: wrap; align-items: baseline; row-gap: .2rem; }
  .hier-cat__name { flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .hier-cat--single .hier-node__count { flex: 0 0 auto; }
  .hier-cat__meta { flex: 1 1 100%; white-space: normal; overflow: hidden; text-overflow: clip;
    overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Mehr-Zettel-Kategorie: Kapitel-Name darf umbrechen statt abschneiden. */
  .hier-node__name { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  /* Netz gegen horizontalen Overflow auf dem Listen-Container (nicht global auf body). */
  .library { min-width: 0; max-width: 100%; overflow-x: clip; }
}

/* P48: Buchstruktur-Felder im Verschieben-Dialog */
.mv-hier { margin-top: .3rem; border: 1px solid var(--border); border-radius: .6rem; padding: .1rem .55rem; }
.mv-hier > summary { cursor: pointer; font-size: .85rem; font-weight: 600; padding: .4rem .1rem; user-select: none; opacity: .85; }
.mv-hier > input { margin-top: .35rem; }
.mv-hier > input:last-child { margin-bottom: .4rem; }

/* P11a: Vorlesen-Knopf (aktiv) + Streak-Karte */
#btn-tts.is-playing { background: var(--accent, var(--primary)); color: var(--on-primary); }
.streak-card { display: grid; gap: .2rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); margin-bottom: 1rem; }
.streak-card__big { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.streak-card__label { font-weight: 600; }
.streak-card__sub { font-size: .85rem; }
.streak-card.is-cold .streak-card__big { opacity: .55; }

/* P11b-1: Start-Dashboard „Heute" */
.heute-greeting { font-size: 1.15rem; font-weight: 700; margin: .6rem 0 .8rem; }
.heute-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; margin-top: .8rem; }
.heute-card { border: 1px solid var(--border); border-radius: .9rem; padding: 1rem; background: var(--surface); }
.heute-card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.heute-card p { margin: .2rem 0 .6rem; }
.heute-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
@media (min-width: 720px) { .heute-grid { grid-template-columns: repeat(3, 1fr); } }

/* P11b-2: neue Quiztypen (Karteikarte / Lueckentext / Schilderfrage) */
.qcard { padding: 1rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface); }
.qcard.flashcard { text-align: center; min-height: 160px; }
.qcard__front, .qcard__back { display: flex; flex-direction: column; gap: .6rem; align-items: center; justify-content: center; min-height: 140px; }
.cloze-in { display: inline-block; min-width: 6rem; padding: .2rem .4rem; border: 1px solid var(--border); border-radius: .4rem; }
.cloze-text { line-height: 1.9; }
.sign-img { display: block; max-width: 14rem; margin: 0 auto .8rem; border-radius: .6rem; background: #fff; padding: .4rem; }
.sign-placeholder { padding: 1rem; border: 1px dashed var(--border); border-radius: .6rem; margin-bottom: .8rem; }
.qopts { display: grid; gap: .5rem; margin-top: .6rem; }

/* P11b-3: Lernpfad */
.lernpfad-list { display: grid; gap: .9rem; }
.lp-card { border: 1px solid var(--border); border-radius: .9rem; padding: 1rem; background: var(--surface); }
.lp-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lp-head h3 { margin: 0; font-size: 1.05rem; }
.lp-progress { height: .5rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: .3rem 0 .8rem; }
.lp-progress > span { display: block; height: 100%; background: var(--accent, var(--primary)); border-radius: 999px; transition: width .2s; }
.lp-steps { display: flex; flex-direction: column; gap: .3rem; }
.lp-step { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: .6rem; cursor: pointer; background: transparent; text-align: left; color: var(--text); }
.lp-step.is-done { opacity: .7; }
.lp-step.is-next { outline: 2px solid var(--accent, var(--primary)); }
.lp-step__icon { width: 1.4rem; text-align: center; }
.lp-step__title { flex: 1; }
.lp-step__sub { opacity: .6; font-size: .78rem; }

/* =========================================================================
   P11c — OPTIK-POLITUR  (rein additiv & rein optisch; keine Funktion geaendert)
   Bewusst ans Dateiende gestellt: ueberschreibt nur Optik, entfernt nichts.
   Vereinheitlicht Karten/Schatten/Radien, ruhigere Motion, klare Fokus-Ringe,
   feinere Typografie, sanftes Einblenden. Respektiert prefers-reduced-motion.
   ========================================================================= */

/* 1) Karten-System vereinheitlichen ---------------------------------------
   Neuere Komponenten (Streak/Heute/Quiztypen/Lernpfad/Lib-Tile) hatten harte
   Radien (.9rem/1rem) und teils keinen Schatten -> jetzt konsistent ueber Tokens. */
.streak-card, .heute-card, .qcard, .lp-card, .lib-tile { border-radius: var(--radius); }
.streak-card, .heute-card, .qcard, .lp-card, .lib-tile { box-shadow: var(--shadow); }

/* 2) Anklickbare Karten: dezenter Hover-Lift (nur echte Hover-Geraete) ----- */
.sheet-card, .lib-tile, .topic-pill {
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) {
  .sheet-card:hover, .lib-tile:hover, .topic-pill:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
}
.sheet-card:active, .lib-tile:active, .topic-pill:active { transform: translateY(0); }

/* Lernpfad-Schritte: ruhiges Hover-Feedback. */
.lp-step { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lp-step:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }

/* 3) Buttons: weicher Uebergang + Tiefe auf Primaeraktionen ---------------- */
.btn { transition: transform .05s ease, background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn--primary, .btn--go { box-shadow: var(--shadow); }
@media (hover: hover) {
  .btn--primary:hover, .btn--go:hover { box-shadow: var(--shadow-lg); }
}

/* 4) Einheitliche, sichtbare Tastatur-Fokus-Ringe (A11y + Politur) --------- */
.btn:focus-visible, .tab:focus-visible, .icon-btn:focus-visible,
.sheet-card:focus-visible, .lib-tile:focus-visible, .topic-pill:focus-visible,
.q-opt:focus-visible, .lp-step:focus-visible,
.segmented button:focus-visible, .theme-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 5) Feinere Typografie: ruhigere, etwas straffere Ueberschriften ---------- */
h1, h2, h3, .section-title, .sheet h1, .sheet h2, .streak-card__big, .score-ring { letter-spacing: -.01em; }
.sheet h1 { line-height: 1.25; }

/* 6) Etwas mehr Luft in den Inhaltskarten (ruhigere Rhythmik) -------------- */
.heute-card, .qcard, .lp-card, .streak-card { padding: 1.15rem; }
.callout { padding: .8rem 1rem; }

/* 7) Sanftes Einblenden der jeweils sichtbaren Ansicht beim Tab-Wechsel ---- */
.view:not(.hidden) { animation: viewIn .22s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 8) Tabbar: ruhiger Farb-/Hintergrund-Uebergang -------------------------- */
.tab { transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }

/* 9) Bewegung respektieren: Reduced-Motion schaltet Animationen/Transitions ab */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .view:not(.hidden) { animation: none; }
}

/* =========================================================================
   P12 — „Mehr"-Overflow-Sheet + schlanke 5er-Tableiste (rein optisch additiv)
   ========================================================================= */
/* Tableiste hat jetzt 5 statt 8 Eintraege -> mehr Platz + sicheres Touch-Ziel. */
.tab { min-height: 48px; }

/* Bottom-Sheet fuer die selteneren Bereiche (Fragen/Lernpfad/Statistik/Einstellungen). */
.more-sheet { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; justify-content: center; }
.more-sheet__backdrop { position: absolute; inset: 0; background: rgba(15,20,32,.45); backdrop-filter: blur(2px); }
.more-sheet__panel {
  position: relative; width: 100%; max-width: 760px;
  background: var(--surface); border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg);
  padding: .5rem .8rem calc(1rem + env(safe-area-inset-bottom));
  display: grid; gap: .4rem;
  animation: sheetUp .22s var(--ease, ease) both;
}
@keyframes sheetUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.more-sheet__grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: .3rem auto .5rem; }
.more-item {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  min-height: 54px; padding: .7rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 1.02rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease);
}
.more-item span { font-size: 1.3rem; line-height: 1; }
.more-item:hover { border-color: var(--primary); background: var(--surface-2); }
.more-item:active { transform: scale(.99); }
.more-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- P23: Ideen (Telegram-Ideen-Bot) ---- */
.btn--small { padding: .4rem .8rem; font-size: .9rem; }
.idea-card { border-left: 4px solid var(--muted); }
.idea-card.idea--ready { border-left-color: var(--go); }
.idea-card.idea--planned { border-left-color: var(--primary); }
.idea-card.idea--dismissed { border-left-color: var(--muted); opacity: .7; }
.idea-card.idea--discussing { border-left-color: var(--accent, #e99020); }
.idea-card__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.idea-badge { font-size: .82rem; font-weight: 600; }
.idea-card h3 { margin: .15rem 0 .25rem; }
.idea-spec { margin: .5rem 0; }
.idea-spec > summary { cursor: pointer; color: var(--primary); font-size: .9rem; }
.idea-spec__body { margin-top: .5rem; padding: .6rem .8rem; background: var(--surface-2); border-radius: 10px; font-size: .92rem; }
.idea-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* ---- P24: Meldungen (Telegram-Support) ---- */
.report-card.report--new { border-left-color: var(--primary); }
.report-card.report--fixing { border-left-color: var(--warn, #e8821e); }
.report-card.report--resolved { border-left-color: var(--go); }
.report-card.report--wontfix { border-left-color: var(--muted); opacity: .75; }
.sev-badge { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; }
.sev-badge.sev--low  { background: var(--sev-low-bg);  color: var(--sev-low); }
.sev-badge.sev--mid  { background: rgba(31,111,235,.15); color: var(--primary); }
.sev-badge.sev--high { background: rgba(232,130,30,.18); color: #c96a12; }
.sev-badge.sev--crit { background: rgba(214,69,93,.18);  color: #d6455d; }
.fix-spec > summary { color: var(--warn, #c96a12); font-weight: 600; }
.fix-spec .idea-spec__body { white-space: normal; }
.fix-spec .btn { margin-top: .5rem; }

/* =========================================================================
   P25 — Design „Lernfahrt": Fundament + KONTRAST (Phase 1)
   Rein optischer Layer. Farben/Radien/Tiefe/Glow kommen aus den Tokens oben.
   Hier: Typo-Zuweisung (Baloo 2 / Inter), Hintergrund-Schimmer, Kontrast-Fixes
   (Akzent-als-Text + Callout-Labels im Dunkelmodus, lesbares Diagramm-Panel) und
   dezente Keyframes (von den spaeteren Phasen genutzt). Funktion/Logik unveraendert.
   Bewusst ans Dateiende: ueberschreibt nur Optik, entfernt nichts.
   ========================================================================= */


/* Hintergrund-Schimmer (Standard-Theme); haengt am Viewport, scrollt nicht mit. */
body { background-color: var(--bg); background-image: var(--bg-glow, none); background-attachment: fixed; }

/* Headings in „Baloo 2" (Anzeige-Schrift); Fliesstext bleibt Inter. */
h1, h2, h3, h4,
.topbar__title, .section-title, .login-card h1, .brand h1,
.sheet h1, .sheet__topic, .sheet__header h1,
.streak-card__big, .score-ring, .q-question,
.heute-greeting, .heute-card h3, .lp-head h3, .lib-group__title,
.sheet-card h3, .lib-tile h3 {
  font-family: var(--font-head);
  letter-spacing: -.005em;
}

/* ---- KONTRAST-FIX 1: Akzent-als-Text im Dunkelmodus aufhellen --------------
   Topic-Akzente werden inline als --accent gesetzt (feste, dunkle Farbtoene).
   Auf dunklem Grund per color-mix mit Weiss anheben – Farbton bleibt erhalten. */
.ver-badge { font-weight: 700; }
html[data-mode="dark"] .sheet__topic,
html[data-mode="dark"] .ver-badge {
  color: color-mix(in srgb, var(--accent, var(--primary)) 64%, #fff);
}
html[data-mode="dark"] .ver-badge {
  background: color-mix(in srgb, var(--accent, var(--primary)) 24%, var(--surface));
}

/* ---- KONTRAST-FIX 2: Callout-Labels im Dunkelmodus aufhellen + Grund toenen -- */
html[data-mode="dark"] .callout {
  background: color-mix(in srgb, var(--c, var(--primary)) 16%, var(--surface));
}
html[data-mode="dark"] .callout__label {
  color: color-mix(in srgb, var(--c, var(--primary)) 58%, #fff);
}

/* ---- KONTRAST-FIX 3: Diagramm-Panel mit lesbarem Grund (beide Modi) ---------
   Mermaid rendert im Dunkelmodus helle, im Hellmodus dunkle Schrift; ein
   getoentes Panel sorgt in beiden Faellen fuer klaren Kontrast (Nicos „Texte in
   Grafiken"). Mermaid-Theme + Re-Render sind in app.js an den Modus gekoppelt. */
.diagram {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem .8rem;
}
.diagram svg { max-width: 100%; height: auto; }

/* ---- Dezente Keyframes (von den spaeteren Phasen genutzt) ------------------- */
@keyframes flamePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes shine { to { transform: translateX(220%); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cardRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* GO-Knopf: dezenter Schimmer (in-Spirit; reduced-motion schaltet ihn ab). */
.btn--go { position: relative; overflow: hidden; }
.btn--go::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%); animation: shine 3.2s ease-in-out 1.4s infinite;
}

/* =========================================================================
   P25 Phase 2 — Dashboard „Heute" (Lernfahrt). Rein optisch + datengetrieben
   aus /api/stats + /api/sheets (kein neuer Endpunkt/Logik). Mobil zuerst.
   Klassen mit Praefix .hd-* -> keine Kollision mit Bestand.
   ========================================================================= */
.hd-hero, .hd-chips, .hd-sectit, .hd-cont, .hd-grid { animation: cardRise .5s var(--ease) both; }
.hd-chips { animation-delay: .06s; }
.hd-sectit { animation-delay: .10s; }
.hd-cont, .hd-grid { animation-delay: .16s; }

/* ---- Hero ---- */
.hd-hero {
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--radius-lg); padding: 1.15rem 1.2rem; min-height: 136px;
  background: var(--hero-bg);
  box-shadow: var(--glow);
}
/* Kontrast-Scrim links/unten -> weisse Schrift bleibt WCAG-AA, egal welcher Gruen-Ton. */
.hd-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--hero-scrim);
}
.hd-hero h3 {
  position: relative; z-index: 3; font-family: var(--font-head); font-weight: 800;
  font-size: 1.34rem; line-height: 1.15; max-width: 62%; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.hd-hero p {
  position: relative; z-index: 3; max-width: 62%; margin-top: .3rem;
  font-size: .84rem; font-weight: 500; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.hd-wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } }
.hd-ring { position: absolute; top: 14px; right: 14px; z-index: 3; }
.hd-ring__p { animation: ringDraw 1.3s ease-out .3s forwards; }
@keyframes ringDraw { to { stroke-dashoffset: var(--ring-to, 44); } }
.hd-scene { position: absolute; right: -2px; bottom: -2px; z-index: 2; animation: floaty 5s ease-in-out infinite; }

/* ---- Stat-Chips ---- */
.hd-chips { display: flex; gap: .6rem; margin-top: .8rem; }
.hd-chip {
  flex: 1; text-align: left; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); padding: .7rem .85rem; box-shadow: var(--shadow);
}
.hd-chip--btn { cursor: pointer; color: var(--text); font: inherit; }
.hd-chip--btn:disabled { opacity: .55; cursor: default; }
.hd-v { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; gap: .35rem; }
.hd-flame { display: inline-block; animation: flamePulse 1.6s ease-in-out infinite; }
.hd-l { font-size: .72rem; color: var(--muted); margin-top: .05rem; }

/* ---- Abschnitts-Titel ---- */
.hd-sectit { font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; margin: 1.1rem .2rem .55rem; }

/* ---- Weiterlernen-Karte ---- */
.hd-cont {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); padding: .9rem; box-shadow: var(--shadow); cursor: pointer;
}
.hd-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0; }
.hd-cont__body { flex: 1; min-width: 0; }
.hd-nm { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-bar { height: 8px; border-radius: 99px; background: var(--surface-2); margin-top: .5rem; overflow: hidden; }
.hd-bar i { display: block; height: 100%; border-radius: 99px; }
.hd-pct { font-size: .72rem; color: var(--muted); margin-top: .35rem; }
.hd-go { width: 40px; height: 40px; border-radius: 50%; background: var(--hd-go-bg); color: var(--hd-go-fg); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; box-shadow: var(--glow); }

/* ---- Faecher-Grid ---- */
.hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.hd-fach {
  text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: .85rem; box-shadow: var(--shadow); cursor: pointer;
}
.hd-b { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; }
.hd-t { font-weight: 700; font-size: .92rem; margin-top: .55rem; }
.hd-s { font-size: .7rem; color: var(--muted); margin-top: .1rem; }
.hd-pb { height: 7px; border-radius: 99px; background: var(--surface-2); margin-top: .55rem; overflow: hidden; }
.hd-pb i { display: block; height: 100%; border-radius: 99px; }

/* ---- Interaktion (Hover-Lift nur auf echten Hover-Geraeten) ---- */
.hd-chip--btn, .hd-cont, .hd-fach { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (hover: hover) {
  .hd-chip--btn:hover, .hd-cont:hover, .hd-fach:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
}
.hd-chip--btn:active, .hd-cont:active, .hd-fach:active { transform: translateY(0); }
.hd-cont:focus-visible, .hd-fach:focus-visible, .hd-chip--btn:focus-visible, .hd-fab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- „+"-FAB (im Dashboard; blendet mit der View aus) ---- */
.hd-fab {
  position: fixed; right: 18px; z-index: 25;
  bottom: calc(76px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--primary); color: var(--on-primary); font-size: 1.8rem; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--hd-fab-shadow, var(--glow)); cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.hd-fab:active { transform: scale(.94); }

/* =========================================================================
   P25 Phase 3 — Bibliothek + Lernzettel im „Lernfahrt"-Look.
   Rein optischer Layer (additiv, ans Dateiende -> ueberschreibt nur Optik):
   Fach-Kacheln mit Icon-Block; Lernzettel mit gestaltetem Fach-Header-Band
   (Gradient + Icon-Kreis + Straßen-Dash), ueberlappender Inhalts-Karte,
   Icon-Callouts (alle Typen hell+dunkel lesbar), nummerierten Abschnitts-Badges,
   eigenen Listen-Markern, gruen getoentem Diagramm-Panel und Quiz-CTA.
   Gruen = Palette B (--acc / --sky1 / --sky2 / --acc-soft / --acc-ink).
   ========================================================================= */

/* ---- Fach-Kacheln (Bibliothek, Top-Ebene) ------------------------------- */
.lib-tile--fach { display: block; }
.lib-tile__icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: .6rem;
}
.lib-tile--fach h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.lib-tile--fach .lib-tile__meta { opacity: .8; }

/* ---- Lernzettel: Container wird zum randlosen, abgerundeten Rahmen --------
   (Padding wandert in .sheet__card -> Band kann full-bleed sein). */
.sheet {
  padding: 0; overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ---- Fach-Header-Band (Gradient aus dem Fach-Akzent) -------------------- */
.sheet__band {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: 2.4rem 1.2rem 2.6rem;
  background: var(--band-bg, linear-gradient(135deg, var(--accent, var(--primary)), color-mix(in srgb, var(--accent, var(--primary)) 60%, #000)));
}
/* Kontrast-Scrim -> weisse Schrift bleibt lesbar, egal welcher Fach-Ton. */
.sheet__band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--band-scrim, linear-gradient(160deg, rgba(0,0,0,.22), transparent 62%));
}
.sheet__band-inner { position: relative; z-index: 2; }
.sheet__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--primary)) var(--band-icon-mix), rgba(255,255,255,.22)); filter: var(--icon-soft-filter); display: grid; place-items: center;
  font-size: 1.65rem; margin: 0 auto .6rem;
}
.sheet__pill {
  display: inline-block; background: rgba(255,255,255,.22);
  padding: .28rem .72rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
/* Straßen-Dash (Mittellinie) am unteren Bandrand. */
.sheet__dash {
  position: relative; z-index: 2;
  height: 3px; width: 64%; max-width: 220px; margin: 1rem auto 0; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 14px, transparent 14px 28px);
}

/* ---- Ueberlappende Inhalts-Karte ---------------------------------------- */
.sheet__card {
  position: relative; z-index: 3;
  background: var(--surface);
  margin-top: -1.7rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.3rem 1.2rem 1.6rem;
}
.sheet__card .sheet__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.42em; line-height: 1.16; margin: .1rem 0 .25rem;
}
.sheet__card .sheet__summary { color: var(--muted); margin: 0 0 .4rem; line-height: 1.5; }

/* ---- Nummerierte Abschnitts-Badges (CSS-Counter auf h2 im Body) ---------- */
.sheet__card .md { counter-reset: lz-sec; }
.sheet__card .md h2 {
  counter-increment: lz-sec;
  display: flex; align-items: center; gap: .55rem;
  border-left: none; padding-left: 0;
  font-size: 1.08em; margin: 1.3rem 0 .55rem;
}
.sheet__card .md h2::before {
  content: counter(lz-sec); flex-shrink: 0;
  width: 1.7em; height: 1.7em; border-radius: .5em;
  background: var(--acc); color: var(--on-acc);
  display: inline-grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .72em;
}
.sheet__card .md h3 { font-size: 1.0em; margin: 1rem 0 .35rem; color: var(--acc-ink); }

/* ---- Eigene Listen-Marker (gruen) --------------------------------------- */
.sheet__card .md ul { list-style: none; padding-left: 0; margin: .5rem 0; }
.sheet__card .md ul > li { position: relative; padding-left: 1.35rem; margin: .35rem 0; }
.sheet__card .md ul > li::before {
  content: "›"; position: absolute; left: .2rem; top: -.04em;
  color: var(--acc); font-weight: 800; font-size: 1.1em;
}
.sheet__card .md ol { list-style: none; padding-left: 0; margin: .5rem 0; counter-reset: lz-li; }
.sheet__card .md ol > li { position: relative; padding-left: 1.7rem; margin: .4rem 0; counter-increment: lz-li; }
.sheet__card .md ol > li::before {
  content: counter(lz-li); position: absolute; left: 0; top: .05em;
  min-width: 1.3em; height: 1.3em; border-radius: .42em;
  background: color-mix(in srgb, var(--acc) 16%, var(--surface));
  color: var(--acc-ink); font-weight: 700; font-size: .76em;
  display: grid; place-items: center;
}

/* ---- Callouts: Icon + farbiger Balken + getoenter Grund ------------------
   Struktur (Icon links + Body) identisch fuer Markdown- und Legacy-Pfad. */
.callout {
  display: flex; gap: .7rem; align-items: flex-start;
  border-radius: var(--radius-sm); padding: .8rem .9rem; margin: .8rem 0;
  border-left: 4px solid var(--c, var(--primary));
  background: color-mix(in srgb, var(--c, var(--primary)) 8%, var(--surface));
}
.callout__icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--c, var(--primary)); color: #fff;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.callout__body { flex: 1; min-width: 0; }
.callout__body > p:first-of-type { margin-top: .15rem; }
/* Dunkelmodus: Icon-Box etwas aufhellen, damit die Emoji-Kante nicht „klebt". */
html[data-mode="dark"] .callout__icon {
  background: color-mix(in srgb, var(--c, var(--primary)) 78%, #000);
}

/* ---- Diagramm-Panel: gruen getoent, in beiden Modi kontrastreich --------- */
.diagram {
  background: color-mix(in srgb, var(--acc) var(--diagram-mix), var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) var(--diagram-line-mix), var(--border));
}

/* ---- Quiz-CTA (gruener Verlauf, schimmernd) ------------------------------ */
.sheet__quiz {
  width: 100%; margin-top: 1.3rem; display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; text-align: left; cursor: pointer; border: none; color: #fff;
  border-radius: var(--radius); padding: 1rem 1.1rem;
  background: var(--hero-bg-2);
  box-shadow: var(--glow); position: relative; overflow: hidden;
  font: inherit;
}
.sheet__quiz-t { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.sheet__quiz-s { font-size: .74rem; opacity: .92; margin-top: .1rem; }
.sheet__quiz-ic { font-size: 1.6rem; flex-shrink: 0; }
.sheet__quiz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-100%); animation: shine 3s ease-in-out 1.2s infinite;
}
.sheet__quiz--empty {
  background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: default;
}
.sheet__quiz--empty .sheet__quiz-t { color: var(--text); }
.sheet__quiz--empty::after { display: none; }
@media (hover: hover) { .sheet__quiz:not(.sheet__quiz--empty):hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } }
.sheet__quiz:not(.sheet__quiz--empty):active { transform: translateY(0); }
.sheet__quiz:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- P27: „Verschieben"-Knopf im Zettel (Sekundär-Aktion unter dem Quiz-CTA) -- */
.sheet__move {
  width: 100%; margin-top: .7rem; display: flex; align-items: center; gap: .7rem;
  text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem;
  transition: border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease);
}
.sheet__move-ic { font-size: 1.25rem; flex-shrink: 0; color: var(--primary); line-height: 1; }
.sheet__move-t { font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.sheet__move-s { font-size: .74rem; color: var(--muted); margin-left: auto; text-align: right; }
@media (hover: hover) { .sheet__move:hover { border-color: var(--primary); background: var(--surface-2); } }
.sheet__move:active { transform: scale(.99); }
.sheet__move:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- P38: Bearbeitungszeile im Zettel (Eingabe + Absenden) -------------- */
.sheet__edit-row {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: 1rem; padding: .9rem 1rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sheet__edit-input {
  flex: 1; min-width: 0; resize: vertical; min-height: 2.6rem; max-height: 8rem;
  padding: .48rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: .9rem; color: var(--text); background: var(--surface);
  transition: border-color .15s;
}
.sheet__edit-input:focus { outline: none; border-color: var(--primary); }
.sheet__edit-input::placeholder { color: var(--muted); }
.sheet__edit-btn {
  flex-shrink: 0; white-space: nowrap; padding: .48rem .9rem;
  background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.sheet__edit-btn:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { .sheet__edit-btn:not(:disabled):hover { opacity: .88; } }

/* ---- P38: Baustelle-Band (rot-weiß Flatterband-Optik) ------------------- */
/* Im Zettel: volle Breite als Banner zwischen Header-Band und Karten-Inhalt. */
.sheet__baustelle-banner {
  background: repeating-linear-gradient(
    -45deg,
    #d32f2f 0 12px,
    #ffffff 12px 24px
  );
  color: #fff; padding: .55rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .83rem; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  letter-spacing: .02em;
}
@media (prefers-reduced-motion: no-preference) {
  .sheet__baustelle-banner { animation: bauBand 4s linear infinite; }
  @keyframes bauBand {
    0%   { background-position: 0 0; }
    100% { background-position: 48px 0; }
  }
}
.sheet__baustelle-banner .bau-icon { font-size: 1.1rem; flex-shrink: 0; }
.sheet__baustelle-banner .bau-label { flex: 1; }
/* Auf der Bibliotheks-Karte: schmaler Streifen oben (statt oberer Border). */
.sheet-card--baustelle {
  border-top: none;
  background-image: repeating-linear-gradient(
    -45deg,
    #d32f2f 0 5px,
    #fff 5px 10px
  );
  background-size: 100% 6px;
  background-position: top;
  background-repeat: no-repeat;
  padding-top: calc(1rem + 6px);
}
.sheet-card--baustelle::before {
  content: "🚧 In Bearbeitung";
  display: block; font-size: .72rem; font-weight: 700; color: #d32f2f;
  margin-bottom: .35rem; letter-spacing: .02em;
}

/* ---- P38: Diff-Ansicht (hinzugefuegt gruen / entfernt rot) --------------- */
.sheet__diff {
  margin-top: 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.sheet__diff-head {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: .55rem .9rem; font-size: .82rem; font-weight: 700; color: var(--muted);
}
.sheet__diff-body { padding: .6rem .9rem; font-size: .8rem; font-family: "Courier New", Courier, monospace; overflow-x: auto; }
.diff-line { display: block; padding: .12rem .3rem; border-radius: 3px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.diff-line--add { background: var(--diff-add-bg); color: var(--diff-add-fg); }
.diff-line--del { background: rgba(220,60,60,.14); color: #b91c1c; text-decoration: line-through; }
.diff-line--ctx { color: var(--muted); }
html[data-mode="dark"] .diff-line--del { background: rgba(220,60,60,.18); color: #fca5a5; }
.sheet__diff-actions { display: flex; gap: .6rem; padding: .7rem .9rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.sheet__diff-actions .btn { flex: 1; text-align: center; }

/* ---- Druck/PDF: ueberlappendes Layout flach legen, CTA ausblenden -------- */
@media print {
  .sheet { border: none; border-radius: 0; overflow: visible; }
  .sheet__band { padding: .6rem 0 .8rem; }
  .sheet__band::before, .sheet__dash { display: none; }
  .sheet__card { margin-top: 0; border-radius: 0; padding: .6rem 0 0; }
  .sheet__quiz, .sheet__move, .sheet__edit-row, .sheet__diff, .sheet__baustelle-banner { display: none !important; }
  .sheet__card .md h2::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =========================================================================
   P25 Phase 4 — Quiz/Lernen + Tab-Leiste + Restpolitur (Lernfahrt-Look).
   Rein optischer Layer (additiv, ans Dateiende). Gruen = Palette B.
   ========================================================================= */

/* ---- Untere Tab-Leiste: aktives Tab = getoenter Pill-Badge ums Icon ------ */
.tab span {
  width: 46px; height: 30px; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.2rem;
  transition: background var(--dur) var(--ease);
}
.tab.is-active { color: var(--primary); background: transparent; }
.tab.is-active span { background: color-mix(in srgb, var(--primary) 16%, transparent); }
@media (hover: hover) { .tab:not(.is-active):hover span { background: var(--surface-2); } }

/* ---- Quiz-Runner: Fortschritts-Kopf, Themen-Pill, Frage ------------------ */
.quiz-head { margin-bottom: 1.1rem; display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
.quiz-prog { flex: 1; display: flex; align-items: center; gap: .6rem; }
/* P27: „Lernen beenden" im Zettel-Lernmodus (Pille rechts in der Kopfzeile). */
.quiz-end {
  flex-shrink: 0; padding: .35rem .8rem; font: inherit; font-size: .78rem; font-weight: 700;
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.quiz-end:hover { border-color: var(--primary); color: var(--text); }
.quiz-end:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.quiz-prog__x { font-size: .74rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.quiz-prog__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.quiz-prog__bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .3s var(--ease); }
.quiz-tag {
  display: inline-block;
  background: color-mix(in srgb, color-mix(in srgb, var(--accent, var(--acc)) 14%, var(--surface)) var(--tag-mix), var(--acc-soft));
  color: color-mix(in srgb, color-mix(in srgb, var(--accent, var(--acc)) 62%, var(--text)) var(--tag-mix), var(--acc-ink));
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .28rem .66rem; border-radius: 999px;
}
.quiz-q { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.26; margin: .8rem 0 1.1rem; }

/* ---- Antwort-Optionen: gross, antippbar, mit Buchstaben-Badge + Status ---- */
.q-opt { display: flex; align-items: center; gap: .7rem; border-width: 2px; }
.q-opt__k {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--acc-soft); color: var(--acc-ink);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.q-opt__t { flex: 1; min-width: 0; }
.q-opt__ck { margin-left: auto; flex-shrink: 0; font-size: 1.15rem; line-height: 1; opacity: 0; color: var(--primary); }
.q-opt.sel .q-opt__k { background: var(--primary); color: var(--on-primary); }
.q-opt.sel .q-opt__ck { opacity: 1; }
.q-opt.correct .q-opt__k { background: var(--ok); color: var(--on-ok); }
.q-opt.correct .q-opt__ck { opacity: 1; color: var(--ok); }
.q-opt.wrong .q-opt__k { background: var(--danger); color: var(--on-danger); }
.q-opt.wrong .q-opt__ck { opacity: 1; font-size: 0; }
.q-opt.wrong .q-opt__ck::after { content: "✗"; font-size: 1.15rem; color: var(--danger); }
.q-opt:disabled { cursor: default; }

/* ---- „Antwort prüfen"-CTA (gruen, mit Glow) ------------------------------ */
.quiz-cta {
  border-radius: var(--radius); padding: .95rem; font-family: var(--font-head);
  font-size: 1rem; box-shadow: var(--glow);
}

/* ---- Quiz-Setup + Statistik: ruhige Politur ------------------------------ */
.topic-grid { gap: .6rem; }
.topic-pill { border-radius: var(--radius); }
.stat b { font-family: var(--font-head); }
.weak-item:last-child { border-bottom: none; }
.score-ring { font-family: var(--font-head); color: var(--primary); }

/* ---- „---"-Trennlinie (echtes <hr> in Lernzettel + Antworten + Ideen) ----- */
hr {
  border: none; height: 1px; margin: 1.1rem 0;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* =========================================================================
   P26 Phase 1 — Premium-Bento-Fundament v2 (Lernfahrt-Vorschau-2.html).
   Rein optischer Layer (additiv, ans Dateiende). Gruen = Palette B.
   Liefert: SVG-Tab-Icons, Maskottchen „Fahri", Level/XP-Chip (Gamification) und
   wiederverwendbare Bento-/Tiefe-Bausteine (ab Phase 2 voll genutzt).
   Mobil zuerst · Hell+Dunkel · prefers-reduced-motion respektiert.
   ========================================================================= */

/* ---- Tab-Leiste: SVG-Linien-Icons im getoenten Pill-Badge ----------------
   Der Pill/Tint kommt aus den bestehenden „.tab span"-Regeln (P25); hier nur
   die Strichzeichnung des Icons. currentColor -> faerbt sich mit Aktiv-Status. */
.tab__ic svg {
  width: 23px; height: 23px;
  stroke: currentColor; stroke-width: 1.9; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Maskottchen „Fahri" (1x definiert in app.js, mehrfach genutzt) ------- */
.fahri { display: block; height: auto; }
/* Im Hero unten rechts schwebend; Text liegt darueber (z-index 3 > 2). */
.hd-buddy { position: absolute; right: 4px; bottom: -2px; z-index: 2; width: 116px; animation: floaty 5s ease-in-out infinite; }

/* ---- Level/XP-Chip (Gamification-Primitiv, abgeleitet aus quiz_attempts) -- */
.hd-lvlbar { display: flex; justify-content: flex-end; margin: 0 .15rem .7rem; animation: cardRise .5s var(--ease) both; }
.hd-lvlwrap { display: flex; flex-direction: column; gap: .3rem; min-width: 140px; }
.hd-lvl {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  background: var(--amb-soft); color: var(--amb-ink);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  padding: .32rem .72rem; border-radius: 999px; white-space: nowrap;
}
.hd-xpbar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hd-xpbar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amb), color-mix(in srgb, var(--amb) 50%, #fff));
  transition: width .6s var(--ease);
}

/* N2b: dezente KI-Kontingent-Anzeige unter der Level-Leiste (Free = Rest-Zahl + Pro-Nudge,
   Pro = „faire Nutzung", Admin = „ohne Kontingent"). Duolingo-artig ruhig; button-Variante tippbar -> Paywall. */
.hd-aiquota {
  display: block;
  width: 100%; margin: -.35rem 0 .85rem; padding: .42rem .8rem;
  font-size: .82rem; color: var(--muted); font-weight: 600; line-height: 1.2;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  font-family: inherit; text-align: center;
}
.hd-aiquota b { color: var(--text); }
button.hd-aiquota { cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
button.hd-aiquota:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--surface-2)); }
.hd-aiquota__up { color: var(--acc-ink); font-weight: 800; white-space: nowrap; }
.hd-aiquota--pro { color: var(--acc-ink); background: var(--acc-soft); border-color: transparent; }

/* ---- Wiederverwendbare Bento-Bausteine + Tiefe (Hero/Tile/Wide) ----------
   Namespaced (.bento*) -> keine Kollision mit Bestand. Ab Phase 2 genutzt. */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.bento > .bento__full { grid-column: span 2; }
.bento__tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow);
}
.bento__num { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.bento__lbl { font-size: .67rem; color: var(--muted); margin-top: .25rem; }
/* Premium-Hero (Verlauf + Tiefe + Akzent-Glow), full-bleed in der Bento-Reihe. */
.bento__hero {
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--radius-lg); padding: 1.05rem 1.1rem 2rem; min-height: 150px;
  background: var(--hero-bg-2);
  box-shadow: var(--glow);
}
.bento__hero::before {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.12); top: -64px; right: -42px; z-index: 0;
}
/* Tiefe-Utilities (fuer spaetere Phasen / Restpolitur). */
.depth { box-shadow: var(--shadow); }
.depth-lg { box-shadow: var(--shadow-lg); }

/* =========================================================================
   P26 Phase 2 — Dashboard „Heute" als Bento + Tagesziel (Lernfahrt-Vorschau-2).
   Rein optischer Layer (additiv, ans Dateiende -> ueberschreibt nur Optik).
   Hero: Tagesziel-Ring + Gruss + „Weiter üben"-Button + Fahri auf der Straße.
   WICHTIG: Auto/Fahri (z-index 2) darf KEINE Schrift/Buttons (z-index 3) ueber-
   decken -> Text links + max-width, Button links, Fahri rechts, Platz reserviert.
   ========================================================================= */

/* Hero hoeher + mehr Boden -> Platz fuer Button (links) und Straße/Fahri (unten). */
.hd-hero {
  min-height: 168px;
  padding: 1.05rem 1.15rem 2.3rem;
}
/* Gruss/Subline halten Abstand zu Ring (oben rechts) und Fahri (unten rechts). */
.hd-hero h3 { max-width: 64%; }
.hd-hero p { max-width: 58%; margin-bottom: .2rem; }

/* „Weiter üben"-Button: weiss auf Gruen, ueber Fahri/Straße (z-index 3). */
.hd-cta {
  position: relative; z-index: 3;
  display: inline-block; margin-top: .7rem;
  background: var(--hero-cta-bg); color: var(--hero-cta-fg);
  font-family: var(--font-head); font-weight: 800;
  border: none; border-radius: 12px; padding: .55rem 1rem; font-size: .9rem;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) { .hd-cta:hover { box-shadow: 0 6px 16px rgba(0,0,0,.24); } }
.hd-cta:active { transform: translateY(1px); }
.hd-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Straße am unteren Hero-Rand (dunkler Streifen + gestrichelte Mittellinie). */
.hd-road { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: rgba(0,0,0,.18); z-index: 1; }
.hd-road::after {
  content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 12px, transparent 12px 26px);
}
/* Fahri sitzt auf der Straße (Phase-1-Position leicht angehoben). */
.hd-buddy { bottom: 0; width: 112px; }

/* Kennzahlen-Tiles: etwas mehr Tiefe (Premium-Bento-Look). */
.hd-chip { box-shadow: var(--shadow); }

/* Sehr kleine Geraete: Hero-Text nicht unter Fahri schieben. */
@media (max-width: 360px) {
  .hd-hero h3 { max-width: 60%; }
  .hd-hero p { max-width: 56%; }
  .hd-buddy { width: 98px; }
}

/* =========================================================================
   P26 Phase 3 — Lernen-Start als Bento + animierter Belohnungs-Screen.
   Rein optischer Layer (additiv). Grün = Palette B. Mobil zuerst, Hell+Dunkel.
   ALLE Animationen werden vom globalen prefers-reduced-motion-Block abgeschaltet
   (Konfetti zusaetzlich hart ausgeblendet, XP-Count-up springt per JS auf Endwert).
   ========================================================================= */

/* ---- Tagesziel-Zeile im Lernen-Tab (Pill) ------------------------------- */
.quiz-goalline {
  display: inline-block; background: var(--acc-soft); color: var(--acc-ink);
  font-weight: 700; font-size: .82rem; padding: .34rem .8rem; border-radius: 999px; margin-bottom: .3rem;
}

/* ---- Blickfang: Prüfungssimulation (grosser Gradient-Button) ------------- */
.learn-exam {
  width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left; font: inherit;
  border: none; cursor: pointer; color: #fff; border-radius: var(--radius-lg);
  padding: 1.2rem; margin: .2rem 0 .7rem; position: relative; overflow: hidden;
  background: var(--hero-bg-2); box-shadow: var(--glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.learn-exam::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-100%); animation: shine 3.4s ease-in-out 1.2s infinite;
}
.learn-exam__txt { flex: 1; min-width: 0; position: relative; z-index: 2; }
.learn-exam__pill {
  display: inline-block; background: rgba(255,255,255,.22); padding: .18rem .6rem; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .4rem;
}
.learn-exam__t { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.learn-exam__s { font-size: .8rem; opacity: .92; margin-top: .25rem; }
.learn-exam__ic { font-size: 2.2rem; flex-shrink: 0; position: relative; z-index: 2; }
@media (hover: hover) { .learn-exam:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } }
.learn-exam:active { transform: translateY(0); }
.learn-exam:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- „Alles gemischt" (breite Kachel) + „Fällige üben" (Ghost) ----------- */
.learn-mixed {
  width: 100%; display: flex; align-items: center; gap: .85rem; text-align: left; font: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); padding: .9rem; box-shadow: var(--shadow); cursor: pointer; margin-bottom: .55rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.learn-mixed__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--acc-soft); flex-shrink: 0; }
.learn-mixed__txt { flex: 1; min-width: 0; }
.learn-mixed__t { font-weight: 700; font-size: .95rem; }
.learn-mixed__s { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.learn-mixed__go { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--glow); }
@media (hover: hover) { .learn-mixed:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } }
.learn-mixed:active { transform: translateY(0); }
.learn-mixed:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.learn-due {
  width: 100%; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit;
  border-radius: var(--radius); padding: .8rem; font-weight: 600; cursor: pointer; margin-bottom: .2rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.learn-due:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { .learn-due:not(:disabled):hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); } }
.learn-due:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Fächer-Bento (2x2) im Lernen-Tab ----------------------------------- */
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .55rem; }
.learn-fach {
  text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: .85rem; box-shadow: var(--shadow); cursor: pointer; font: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.learn-fach__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; }
.learn-fach__t { font-family: var(--font-head); font-weight: 700; font-size: .9rem; margin-top: .5rem; }
.learn-fach__s { font-size: .68rem; color: var(--muted); margin-top: .1rem; }
@media (hover: hover) { .learn-fach:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } }
.learn-fach:active { transform: translateY(0); }
.learn-fach:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Belohnungs-Screen (Konfetti + Fahri + XP + Ring + Streak/Level) ----- */
#quiz-result { overflow: hidden; }   /* Konfetti auf die Karte begrenzen */
.cel { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cel__stage {
  width: 152px; height: 104px; border-radius: 22px; overflow: hidden; position: relative;
  background: var(--hero-bg-2); box-shadow: var(--glow);
  display: grid; place-items: end center;
}
.cel__fahri { margin-bottom: -2px; animation: pop .7s cubic-bezier(.2, .8, .3, 1.25) both; }
@keyframes pop { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.07); } 100% { transform: scale(1); } }
.cel__big { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin-top: .7rem; }
.cel__sm { color: var(--muted); font-size: .9rem; margin-top: .4rem; max-width: 280px; }
.cel__ring { margin-top: 1rem; }
.cel__xp {
  margin-top: 1rem; background: var(--amb-soft); color: var(--amb-ink);
  font-family: var(--font-head); font-weight: 800; border-radius: 14px; padding: .5rem 1.1rem; font-size: 1.1rem;
}
.cel__chips { margin-top: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.cel__chips b { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .5rem .85rem; font-size: .78rem; box-shadow: var(--shadow); font-weight: 600; }
.cel__cta {
  margin-top: 1.4rem; width: 100%; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-head); font-weight: 800; border: none; border-radius: var(--radius);
  padding: .9rem; font-size: 1rem; cursor: pointer; box-shadow: var(--glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) { .cel__cta:hover { box-shadow: var(--shadow-lg); } }
.cel__cta:active { transform: translateY(1px); }
.cel__cta2 { margin-top: .55rem; }

.conf {
  position: absolute; top: -14px; width: 9px; height: 9px; border-radius: 2px; opacity: .95; z-index: 5;
  pointer-events: none; animation: confFall 2.8s linear infinite;
}
@keyframes confFall { 0% { opacity: .95; transform: translateY(0) rotate(0); } 100% { transform: translateY(460px) rotate(420deg); opacity: 0; } }
/* Reduced-Motion: Konfetti ganz weg (statt eingefroren herumstehen). */
@media (prefers-reduced-motion: reduce) { .conf { display: none; } }

/* =========================================================================
   P26 Phase 4 — Bibliothek/Lernzettel/Statistik/Rest auf den Bento-Premium-Look.
   Rein optischer Layer (additiv). Grün = Palette B. Mobil zuerst, Hell+Dunkel.
   ========================================================================= */

/* ---- Bibliothek: Fach-Kacheln im Bento-Premium-Look (Icon-Badge + Tiefe) -- */
.lib-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.lib-tile--fach { padding: 1rem; }
.lib-tile--fach .lib-tile__icon {
  width: 48px; height: 48px; border-radius: 15px; font-size: 1.5rem; margin-bottom: .7rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--primary)) 18%, transparent);
}
.lib-tile--fach h3 { font-family: var(--font-head); font-size: 1.06rem; margin: 0 0 .2rem; }
.lib-tile--fach .lib-tile__meta { font-size: .74rem; }

/* ---- Statistik: Prüfungsreife-Ring (grosse Gradient-Karte) --------------- */
.stat-ring-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--hero-bg-2); color: #fff;
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--glow);
  margin-bottom: 1rem; animation: cardRise .5s var(--ease) both;
}
.stat-ring { flex-shrink: 0; }
.stat-ring-card__txt h3 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; color: #fff; }
.stat-ring-card__txt p { margin: .2rem 0 0; font-size: .82rem; opacity: .93; }

/* ---- Statistik: Wochen-Balken (Aktivität je Tag) ------------------------- */
.wk { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 96px; margin-top: .2rem; }
.wk-d { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.wk-bx { width: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 70%, var(--surface))); transition: height .5s var(--ease); }
.wk-dl { font-size: .58rem; color: var(--muted); }

/* ---- Statistik: Trefferquote je Fach (Verlaufs-Balken) ------------------- */
.frow { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.frow__nm { font-size: .8rem; font-weight: 600; width: 96px; flex-shrink: 0; }
.frow__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.frow__bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.frow__pc { font-size: .74rem; color: var(--muted); font-weight: 700; width: 36px; text-align: right; }

/* ---- Rest auf den Look ziehen: einheitliche Premium-Rundung + Tiefe -------
   Notizen/Coach/Lernpfad/Ideen/Meldungen/Einstellungen teilen schon Tokens
   (Farbe/Schrift/Tabs); hier nur konsistente, etwas weichere Karten-Rundung. */
.composer, .answer-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.lp-card, .idea-card, .report-card, .settings-card, .settings-group { border-radius: var(--radius-lg); }

/* =========================================================================
   P30 — Frage-Identität & -Organisation (Ideen 6/7/8).
   (a) Quiz-Kopf: dezente feste Fach-Nummer (P.12) + Stern zum Markieren.
   (b) „Fragen"-Übersicht: 3 Tabs (markiert/falsch/alle), je Fach gruppiert.
   Token-basiert, WCAG-Kontrast, große Tap-Ziele; Motion via globalem
   prefers-reduced-motion-Block abgeschaltet. Mobil zuerst, Hell+Dunkel.
   ========================================================================= */

/* (a) Nummer + Stern im Quiz-Kopf ---------------------------------------- */
.quiz-head__r { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.q-meta { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
/* Für Typen mit eigenem Layout (flashcard/cloze/sign): frei oben rechts. */
.q-meta--float { position: absolute; top: .65rem; right: .7rem; z-index: 2; }
.q-no {
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .16rem .5rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.q-star {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: 1.1rem; line-height: 1;
  cursor: pointer; transition: color var(--dur, .18s) var(--ease, ease),
    border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease);
}
.q-star:hover { border-color: var(--primary); color: var(--text); }
.q-star.is-on { color: #e0a213; border-color: #e0a213; background: color-mix(in srgb, #e0a213 16%, var(--surface)); }
.q-star:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* (b) „Fragen"-Übersicht -------------------------------------------------- */
.fragen-tabs { display: flex; gap: .4rem; margin: .3rem 0 1rem; }
.fq-tab {
  flex: 1; min-height: 42px; padding: .5rem .4rem; font: inherit; font-size: .86rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: color var(--dur, .18s) var(--ease, ease),
    border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease);
}
.fq-tab:hover { border-color: var(--primary); color: var(--text); }
.fq-tab.is-active { background: var(--acc-soft); color: var(--acc-ink); border-color: transparent; }
.fq-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fq-group { margin-bottom: 1.4rem; }
.fq-group__h {
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 .55rem; display: flex; align-items: center; gap: .4rem;
}
.fq-count { font-size: .76rem; color: var(--muted); font-weight: 600; }
.fq-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  padding: .65rem .75rem; margin-bottom: .45rem; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease);
}
.fq-item:hover { border-color: var(--primary); background: var(--surface-2); }
.fq-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fq-item--off { opacity: .45; }
.fq-no {
  flex-shrink: 0; min-width: 2.7rem; text-align: center;
  font-size: .72rem; font-weight: 800; color: var(--acc-ink); background: var(--acc-soft);
  border-radius: 999px; padding: .22rem .5rem; font-variant-numeric: tabular-nums;
}
.fq-q {
  flex: 1; font-size: .92rem; line-height: 1.32; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fq-star {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 10px;
  color: var(--border); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: color var(--dur, .18s) var(--ease, ease);
}
.fq-star:hover { color: var(--muted); }
.fq-star.is-on { color: #e0a213; }
.fq-star:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* =========================================================================
   P35 — Schraubenschlüssel (fragwürdige Fragen) + typ-bewusster Fragen-Editor.
   Eigenständig Theme-getrieben (Palette B, hell+dunkel), WCAG-Kontrast, große
   Tap-Ziele. prefers-reduced-motion wird abgeschaltet. On-Zustand = warmes
   Orange (#e0731a) — bewusst anders als der amberfarbene Stern.
   ========================================================================= */

/* (a) Schraubenschlüssel im Quiz-Kopf (neben dem Stern) ------------------- */
.q-wrench {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); cursor: pointer; line-height: 0;
  transition: color var(--dur, .18s) var(--ease, ease),
    border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease);
}
.q-wrench svg { width: 18px; height: 18px; }
.q-wrench:hover { border-color: #e0731a; color: var(--text); }
.q-wrench.is-on { color: #e0731a; border-color: #e0731a; background: color-mix(in srgb, #e0731a 16%, var(--surface)); }
.q-wrench:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* (b) Schraubenschlüssel je Zeile in der Fragen-Übersicht ----------------- */
.fq-wrench {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 10px;
  color: var(--border); cursor: pointer; line-height: 0;
  transition: color var(--dur, .18s) var(--ease, ease);
}
.fq-wrench svg { width: 18px; height: 18px; }
.fq-wrench:hover { color: var(--muted); }
.fq-wrench.is-on { color: #e0731a; }
.fq-wrench:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* (c) „Zu prüfen"-Zeile: Freigeben/Korrektur ------------------------------ */
.fq-item--review { flex-wrap: wrap; cursor: default; }
.fq-item--review:hover { border-color: var(--border); background: var(--surface); }
.fq-actions { display: flex; gap: .4rem; flex-shrink: 0; margin-left: auto; }
.fq-actions .btn--small { min-height: 38px; }

/* (d) Fragen-Editor (Modal/Bottom-Sheet, typ-bewusst, in #23 wiederverwendet) */
.q-editor { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; }
.q-editor__backdrop { position: absolute; inset: 0; background: rgba(15,20,32,.5); backdrop-filter: blur(2px); }
.q-editor__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius, 18px) var(--radius, 18px) 0 0;
  box-shadow: var(--shadow-lg); animation: qeUp .22s var(--ease, ease);
}
@keyframes qeUp { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.q-editor__head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--border); }
.q-editor__title { flex: 1; min-width: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.qe-badge { font-size: .72rem; font-weight: 800; color: var(--acc-ink); background: var(--acc-soft); border-radius: 999px; padding: .12rem .5rem; font-variant-numeric: tabular-nums; }
.qe-type { font-size: .76rem; font-weight: 600; color: var(--muted); }
.q-editor__x { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border: none; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; border-radius: 10px; }
.q-editor__x:hover { color: var(--text); background: var(--surface-2); }
.q-editor__body { padding: .9rem 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.q-editor__foot { display: flex; gap: .5rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.q-editor__foot .btn { flex: 1; }
.qe-label { display: block; font-size: .82rem; font-weight: 700; color: var(--text); margin: .9rem 0 .35rem; }
.qe-label:first-child { margin-top: 0; }
.qe-opt { font-weight: 500; color: var(--muted); font-size: .76rem; }
.qe-help { font-size: .8rem; color: var(--muted); margin: .3rem 0 .2rem; }
.qe-help code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 .3rem; }
.qe-input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm, 12px);
  padding: .6rem .7rem; margin-bottom: .3rem;
}
textarea.qe-input { resize: vertical; line-height: 1.4; }
.qe-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.qe-opt-row, .qe-pair-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.qe-opt-row .qe-opt-text, .qe-pair-row .qe-pair-l, .qe-pair-row .qe-pair-r { flex: 1; min-width: 0; margin-bottom: 0; }
.qe-opt-ck { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--primary); }
.qe-pair-arrow { color: var(--muted); flex-shrink: 0; }
.qe-row-x { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 9px; cursor: pointer; }
.qe-row-x:hover { color: #e0731a; border-color: #e0731a; }
.qe-tf { display: flex; gap: .6rem; }
.qe-radio { display: flex; align-items: center; gap: .4rem; font-size: .95rem; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.qe-radio input { accent-color: var(--primary); }
@media (min-width: 560px) { .q-editor { align-items: center; } .q-editor__panel { border-bottom: 1px solid var(--border); border-radius: var(--radius, 18px); } }
@media (prefers-reduced-motion: reduce) { .q-editor__panel { animation: none; } }

/* P36: „Meine Fragen" — Anlege-Dialog-Selects + Listen-Meta (X-Kennung). */
select.mf-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 1.05em, calc(100% - 13px) 1.05em; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; cursor: pointer; }
.mf-meta { display: block; margin-top: .25rem; font-size: .74rem; font-weight: 600; color: var(--muted); }
.mf-item .fq-q { display: flex; flex-direction: column; }
.mf-del:hover { color: #e0731a; border-color: #e0731a; }

/* =========================================================================
   P33 — Schwebende Hilfe-Blase (In-App-Assistent „Claude").
   Rein Theme-getrieben (Palette B, hell+dunkel), mobil zuerst, Safe-Area,
   über der Tab-Leiste, weicht dem „+"-FAB des Dashboards aus. prefers-
   reduced-motion wird vom globalen Block (oben) abgeschaltet.
   ========================================================================= */
/* --- schwebende Blase (FAB) unten rechts, über der Tab-Leiste --- */
.help-fab {
  position: fixed; right: 12px; z-index: 35;
  bottom: calc(74px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--fab-bg); color: var(--fab-fg); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow);
  opacity: .82; transform: scale(.94);
  transition: opacity var(--dur, .18s) var(--ease, ease), transform var(--dur, .18s) var(--ease, ease);
}
.help-fab:hover, .help-fab:focus-visible, .help-fab.is-open { opacity: 1; transform: scale(1); }
.help-fab:active { transform: scale(.9); }
.help-fab.is-small:not(.is-open):not(:hover):not(:focus-visible) { transform: scale(.72); opacity: .72; transform-origin: bottom right; }   /* P90 (D3b) */
.help-fab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.help-fab__ic { width: 26px; height: 26px; fill: var(--fab-fg); }
/* Auf dem Dashboard „Heute" ist der „+"-FAB sichtbar -> Blase eine Stufe höher,
   damit sich beide nie überlappen. */
html[data-fab="1"] .help-fab { bottom: calc(140px + env(safe-area-inset-bottom)); }

/* --- kleines Chat-Panel (kein Seitenwechsel), unten rechts verankert --- */
.help-panel {
  position: fixed; right: 12px; z-index: 34;
  bottom: calc(138px + env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 24px));
  height: min(70vh, 560px);
  max-height: calc(100vh - 156px);
  max-height: calc(100dvh - 156px - env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform-origin: bottom right; animation: helpIn .18s var(--ease, ease);
}
html[data-fab="1"] .help-panel {
  bottom: calc(204px + env(safe-area-inset-bottom));
  max-height: calc(100vh - 222px);
  max-height: calc(100dvh - 222px - env(safe-area-inset-bottom));
}
@keyframes helpIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.help-panel__head { display: flex; align-items: center; gap: .35rem; padding: .55rem .65rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.help-panel__title { font-family: var(--font-head, inherit); font-weight: 700; font-size: .98rem; color: var(--text); }
.help-icon { background: transparent; border: none; color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.help-icon:hover { background: var(--surface); color: var(--text); }
.help-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.help-tabs { display: flex; gap: .2rem; padding: .35rem .5rem 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.help-tab { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: .85rem; padding: .45rem .3rem; cursor: pointer; }
.help-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.help-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }

.help-log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; background: var(--bg); }
/* Assistent-Blasen links = helle Fläche + DUNKLER Text (hoher Kontrast). */
.help-msg { max-width: 86%; padding: .5rem .7rem; border-radius: 14px; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.help-msg p { margin: 0 0 .4rem; } .help-msg p:last-child { margin-bottom: 0; }
.help-msg ul { margin: .2rem 0; padding-left: 1.1rem; }
.help-msg--bot { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.help-msg--me { align-self: flex-end; background: var(--primary-d); color: var(--on-primary); border-bottom-right-radius: 4px; }
.help-msg--me a { color: var(--on-primary); }
.help-note { align-self: center; font-size: .76rem; font-weight: 600; color: var(--acc-ink); background: var(--acc-soft); padding: .22rem .65rem; border-radius: 999px; }

.help-typing { align-self: flex-start; display: inline-flex; gap: 4px; align-items: center; padding: .6rem .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; border-bottom-left-radius: 4px; }
.help-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; animation: helpBlink 1s infinite; }
.help-typing span:nth-child(2) { animation-delay: .18s; }
.help-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes helpBlink { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.help-compose { display: flex; align-items: flex-end; gap: .4rem; padding: .5rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.help-compose textarea { flex: 1; resize: none; max-height: 90px; min-height: 38px; font-size: .9rem; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: .5rem .6rem; line-height: 1.3; }
.help-send { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primary); color: var(--on-primary); font-size: .95rem; cursor: pointer; display: grid; place-items: center; }
.help-send:hover { background: var(--primary-d); }
.help-send:disabled { opacity: .5; cursor: default; }
.help-send:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== P64: Vorschau-Karte (Entwurf vor dem Senden — Senden/Verwerfen/Anpassen) ===== */
.help-preview { align-self: stretch; max-width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 12px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.help-preview--bug { border-left-color: var(--warn, #e08b1f); }
.help-preview__tag { font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--muted); }
.help-preview__title { font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.help-preview__sum { font-size: .85rem; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.help-preview__sev { font-size: .78rem; font-weight: 600; color: var(--muted); }
.help-preview__note { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.help-preview__btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.help-preview__btn { flex: 1 1 auto; min-width: 84px; padding: .4rem .6rem; border-radius: 10px; font-size: .82rem;
  font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.help-preview__btn--send { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.help-preview__btn--send:hover { background: var(--primary-d); }
.help-preview__btn:hover { border-color: var(--primary); }
.help-preview__btn:disabled { opacity: .55; cursor: default; }
.help-preview__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .help-preview, .help-preview__btn { transition: none; } }

/* ===== P70: Feld-Chips + Editor-Unterfenster (Entwurf strukturiert bearbeiten) ===== */
.help-preview__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.help-preview__chip { min-width: 0; max-width: 100%; padding: .3rem .55rem; border-radius: 999px; font-size: .78rem;
  font-weight: 600; cursor: pointer; border: 1px dashed var(--border); background: var(--surface-2); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-preview__chip:hover { border-color: var(--primary); border-style: solid; }
.help-preview__chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.help-fieldedit { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); animation: helpIn .16s var(--ease, ease); }
.help-fe__head { display: flex; align-items: center; gap: .35rem; padding: .55rem .65rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.help-fe__title { flex: 1; font-family: var(--font-head, inherit); font-weight: 700; font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.help-fe__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .7rem; display: flex; flex-direction: column; gap: .45rem; background: var(--bg); }
.help-fe__ta { width: 100%; box-sizing: border-box; resize: none; min-height: 92px; max-height: 160px; font-size: .9rem; line-height: 1.4;
  border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: .55rem .65rem; }
.help-fe__ta:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.help-fe__count { font-size: .72rem; color: var(--muted); text-align: right; }
.help-fe__err { font-size: .78rem; font-weight: 600; color: var(--danger, #d1435b); min-height: 1em; }
.help-fe__sev { display: flex; flex-wrap: wrap; gap: .4rem; }
.help-fe__sevbtn { flex: 1 1 auto; min-width: 72px; padding: .5rem .6rem; border-radius: 10px; font-size: .85rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.help-fe__sevbtn:hover { border-color: var(--primary); }
.help-fe__sevbtn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.help-fe__sevbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.help-fe__foot { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.help-fe__foot .help-preview__btn { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) { .help-fieldedit { animation: none; } }

/* ===== P37: BAUM-BEARBEITUNGSMODUS ===== */
.lib-tree { display: flex; flex-direction: column; gap: .5rem; }

.lib-tree-topic { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; border-top: 3px solid var(--accent, var(--primary)); background: var(--surface); box-shadow: var(--shadow); }
.lib-tree-topic__head { display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; cursor: pointer; font-weight: 700; font-size: .98rem; user-select: none; -webkit-user-select: none; }
.lib-tree-topic__head:hover { background: color-mix(in srgb, var(--accent,var(--primary)) 6%, var(--surface)); }
.lib-tree-topic__icon { font-size: 1.1rem; flex-shrink: 0; }
.lib-tree-topic__name { flex: 1; }
.lib-tree-topic__count { font-size: .78rem; font-weight: 400; }
.lib-tree-topic__arrow { font-size: .85rem; opacity: .7; flex-shrink: 0; }
.lib-tree-topic__body { padding: .4rem .5rem .6rem; display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid var(--border); }
.lib-tree-topic__body.hidden { display: none; }

.lib-tree-cat { border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-2); transition: background .1s; }
.lib-tree-cat.is-drag-over { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); outline: 2px dashed var(--primary); }
.lib-tree-cat__head { display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; font-size: .85rem; font-weight: 600; }
.lib-tree-cat__name { flex: 1; }
.lib-tree-cat__count { font-size: .75rem; font-weight: 400; }
.lib-tree-cat__del { background: none; border: none; cursor: pointer; font-size: .88rem; color: var(--muted); padding: 0 .15rem; border-radius: .3rem; }
.lib-tree-cat__del:hover { color: var(--danger, #d6455d); background: var(--surface); }

.lib-tree-sheet { display: flex; align-items: center; gap: .4rem; padding: .35rem .65rem; font-size: .88rem; cursor: pointer; border-radius: .3rem; transition: background .1s; margin: .1rem .15rem; }
.lib-tree-sheet:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.lib-tree-sheet.is-dragging { opacity: .45; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.lib-tree-sheet__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-tree-sheet__mv { background: none; border: none; cursor: pointer; font-size: .95rem; color: var(--muted); padding: .1rem .3rem; border-radius: .3rem; flex-shrink: 0; }
.lib-tree-sheet__mv:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }

.lib-tree-empty-cat { font-size: .78rem; color: var(--muted); font-style: italic; padding: .35rem .65rem; }
.lib-tree-add-cat { padding: .35rem .5rem .1rem; }

.lib-tree-topic__head.is-drag-over { background: color-mix(in srgb, var(--accent,var(--primary)) 14%, var(--surface)); outline: 2px dashed var(--accent,var(--primary)); border-radius: 0; }

/* ===== P37: KONTEXTMENÜ (Rechtsklick / Long-Press) ===== */
.ctx-menu { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; box-shadow: var(--shadow-lg); padding: .25rem 0; min-width: 160px; animation: ctxIn .1s ease; }
@keyframes ctxIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.ctx-menu__item { display: block; width: 100%; text-align: left; padding: .55rem .9rem; border: none; background: none; cursor: pointer; font-size: .93rem; color: var(--text); border-radius: .4rem; }
.ctx-menu__item:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }

/* Bearbeiten-Knopf in der lib-toolbar */
#lib-edit-toggle { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ctx-menu { animation: none; } }

/* ===== P39: LERNPAKETE + FACH-ZWISCHENSEITE ===== */
/* Paket-Kachel (ähnlich learn-fach, volle Breite) */
.pkg-item {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: .75rem .9rem; box-shadow: var(--shadow);
  cursor: pointer; font: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) { .pkg-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); } }
.pkg-item:active { transform: translateY(0); }
.pkg-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pkg-item__ic { font-size: 1.3rem; flex-shrink: 0; }
.pkg-item__body { flex: 1; min-width: 0; }
.pkg-item__t { font-family: var(--font-head); font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-item__s { font-size: .7rem; color: var(--muted); margin-top: .1rem; }
/* Fach-Zwischenseite: Zurück-Zeile */
.inter-back { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.inter-back__btn { background: none; border: none; cursor: pointer; color: var(--primary); font: inherit; font-size: .92rem; font-weight: 600; padding: .2rem .1rem; }
.inter-back__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* Paket-Banner im Zettel */
.sheet__pkg { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: var(--radius-sm); padding: .6rem .85rem; cursor: pointer; font: inherit;
  font-size: .88rem; margin-top: .5rem; }
.sheet__pkg:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) { .sheet__pkg:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); } }
/* "Paket speichern?" im Ergebnis-Screen */
.cel__save-pkg { margin-top: .8rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; }
.cel__save-pkg p { font-size: .88rem; color: var(--muted); margin: 0; }
.cel__save-pkg-row { display: flex; gap: .5rem; width: 100%; max-width: 320px; }
.cel__save-pkg-row button { flex: 1; }
/* =========================================================================
   P40: Benachrichtigungs-Glocke + Panel
   ========================================================================= */
.notif-bell { position: relative; }
.notif-bell__ic { width: 1.35rem; height: 1.35rem; fill: currentColor; display: block; }
.notif-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #e84a4a; color: #fff;
  font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  pointer-events: none;
}
/* Im Lernmodus/Quiz ausblenden */
html[data-quiz="1"] .notif-bell { display: none; }

/* Benachrichtigungs-Panel (dropdown, oben rechts) */
.notif-panel {
  position: fixed;
  top: calc(52px + max(.6rem, env(safe-area-inset-top)));
  right: 8px; z-index: 36;
  width: min(340px, calc(100vw - 16px));
  max-height: 70vh;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.notif-panel__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.notif-panel__title { font-weight: 700; font-size: .93rem; flex: 1; }
.notif-list { overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.notif-item { padding: .55rem .65rem; background: var(--surface-2); border-radius: calc(var(--radius) - 2px); }
.notif-item.is-unread { border-left: 3px solid var(--primary); }
.notif-item__text { color: var(--text); font-size: .9rem; line-height: 1.4; }
.notif-item__time { color: var(--muted); font-size: .76rem; margin-top: .15rem; }
.notif-empty { color: var(--muted); font-size: .88rem; padding: .8rem; text-align: center; }
/* Manuelle Nachricht an Nico */
.notif-compose { display: flex; gap: .5rem; margin-top: .75rem; margin-bottom: .25rem; }
.notif-compose input { flex: 1; min-width: 0; }

/* Overlay-Input (Paket benennen) */
.pkg-name-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
.pkg-name-overlay__bd { position: absolute; inset: 0; background: rgba(15,20,32,.45); backdrop-filter: blur(2px); }
.pkg-name-overlay__panel { position: relative; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; padding: 1.1rem 1.1rem 1.5rem; width: 100%; max-width: 520px; box-shadow: var(--shadow-lg); }
.pkg-name-overlay__panel h3 { margin: 0 0 .7rem; font-size: 1rem; }
.pkg-name-overlay__panel input { width: 100%; box-sizing: border-box; padding: .55rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .93rem; }
.pkg-name-overlay__panel input:focus { outline: 2px solid var(--primary); }
.pkg-name-overlay__panel .pkg-name-overlay__actions { display: flex; gap: .5rem; margin-top: .7rem; }

/* P41 — Intelligente Grafiken */
/* Grafiken-Prüfbereich (Mehr → Grafiken prüfen) */
.grafiken-list { display: flex; flex-direction: column; gap: .9rem; padding: .25rem 0; }
.gfx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.gfx-card__head { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .85rem .4rem; }
.gfx-card__icon { font-size: 1.35rem; flex-shrink: 0; margin-top: .05rem; }
.gfx-card__meta { min-width: 0; }
.gfx-card__title { font-weight: 700; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfx-card__topic { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.gfx-card__note { font-size: .82rem; color: var(--muted); font-style: italic; padding: 0 .85rem .45rem; }
.gfx-card__preview { margin: 0 .85rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); padding: .7rem; overflow-x: auto; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.gfx-card__preview svg { max-width: 100%; height: auto; }
.gfx-card__actions { display: flex; gap: .45rem; flex-wrap: wrap; padding: 0 .85rem .75rem; }
.gfx-card__improve { padding: 0 .85rem .75rem; display: flex; flex-direction: column; gap: .45rem; }
.gfx-card__note-input { width: 100%; box-sizing: border-box; padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; resize: vertical; }
.gfx-card__note-input:focus { outline: 2px solid var(--primary); }

/* Freigegebene Grafik im Lernzettel */
.sheet__graphic { margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.sheet__graphic .diagram { padding: .8rem; overflow-x: auto; min-height: 60px; display: flex; align-items: center; justify-content: center; background: transparent; }
.sheet__graphic .diagram svg { max-width: 100%; height: auto; }
.sheet__graphic-cap { font-size: .83rem; color: var(--muted); padding: 0 .85rem .6rem; font-style: italic; text-align: center; }
.sheet__graphic-del { display: block; width: 100%; padding: .45rem; border: none; border-top: 1px solid var(--border); background: transparent; color: var(--muted); font-size: .8rem; cursor: pointer; text-align: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sheet__graphic-del:hover { background: rgba(211,47,47,.08); color: #d32f2f; }

/* Grafik vorschlagen – Button je Zettel */
.sheet__gfx-suggest { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font: inherit; font-size: .92rem; color: var(--text); text-align: left; margin-top: .5rem; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sheet__gfx-suggest:hover { background: var(--surface-2); border-color: var(--primary); }
.sheet__gfx-suggest:disabled { opacity: .55; cursor: not-allowed; }
.sheet__gfx-suggest span:first-child { font-size: 1.15rem; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .sheet__gfx-suggest { transition: none; } .sheet__graphic-del { transition: none; } }

/* ===== P42 DESKTOP LAYER ===== */
/* Alle Regeln ausschließlich in min-width-Blöcken — mobile CSS bleibt byte-identisch.   */

/* Desktop-only topbar-Elemente: standardmäßig unsichtbar (mobil) */
#btn-neue-notiz, #btn-verwalten { display: none; }
.topbar__lvl { display: none; }
.topbar__avatar { display: none; }   /* P71: Topbar-Avatar nur ≥1024px */
.quiz-kbd { display: none; }

/* Quiz-Tastatur-Hinweis (Styling) */
.quiz-kbd { text-align: center; font-size: .82rem; color: var(--muted); margin-top: .6rem; padding: .4rem; line-height: 1.5; }
.quiz-kbd b { background: var(--surface-2); border: 1px solid var(--border); border-radius: .3rem; padding: .05rem .32rem; font-size: .78rem; font-family: monospace; font-weight: 700; }

/* P44-H1: Sidebar-Basis-Regel — auf Mobil immer versteckt; ≥1024px einblenden.
   Ohne diese Zeile würde #sidenav (immer ins DOM gebaut) ungestylt über dem Header
   erscheinen (Screenshot-Meldung: „Legende" oben auf 390px-Viewport). */
#sidenav { display: none; }

/* ---- ≥1024px: Sidebar + App-Grid + Content-Breiten ---- */
@media (min-width:1024px) {
  /* Body-Overflow deaktivieren — Layout-Scroll läuft in #app-body / .main */
  body { overflow: hidden; height: 100dvh; }

  /* App-Wurzel als 2-Spalten-Grid: Sidebar | Content */
  #app { display: grid; grid-template-columns: 264px minmax(0,1fr); height: 100dvh; }

  /* Content-Wrapper (header + main + tabbar) */
  #app-body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

  /* Topbar bleibt am oberen Rand (kein Scroll in #app-body) */
  .topbar { position: relative; flex-shrink: 0; }
  .topbar__lvl { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 0 .4rem; }

  /* Scrollbarer Inhalt */
  .main { flex: 1; overflow-y: auto; max-width: none; margin: 0; align-self: stretch; padding: 1.2rem 1.5rem calc(2rem + var(--fab-space)); }

  /* Tab-Leiste verstecken */
  .tabbar { display: none !important; }

  /* FAB verstecken */
  .hd-fab { display: none !important; }

  /* Hilfe-Blase neu positionieren (kein FAB-Versatz mehr) */
  .help-fab { bottom: 20px !important; }
  html[data-fab="1"] .help-fab, html[data-fab] .help-fab { bottom: 20px !important; }

  /* Desktop-Topbar-Buttons sichtbar machen (JS steuert display per Ansicht) */
  /* Initialwert gesetzt via JS; hier nur sicherstellen, dass sie gerendert werden */
  #btn-neue-notiz { align-items: center; gap: .3rem; font-size: .85rem; }
  #btn-verwalten  { align-items: center; gap: .3rem; font-size: .85rem; }

  /* ---- Sidebar ---- */
  #sidenav {
    height: 100dvh;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  /* P71: Desktop-Redesign — abgeleitete Farb-/Track-Tokens (hell+dunkel-sicher
     via color-mix; KEINE hartkodierten Mockup-Hex). Nur hier im 1024-Layer. */
  #app {
    --dd-surface-3: color-mix(in srgb, var(--surface-2) var(--dd-s3-mix), var(--text));
    --dd-border-soft: color-mix(in srgb, var(--border) 60%, transparent);
    --dd-track: color-mix(in srgb, var(--text) 9%, transparent);
  }

  /* P71: Brand „Nagla" mit Logo-Tile */
  .sn-brand {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-head, 'Baloo 2', sans-serif);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text);
    padding: 1.1rem 1rem .7rem;
    letter-spacing: .01em;
  }
  .sn-logo {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
    display: grid; place-items: center; font-size: 1rem;
    background: var(--sn-logo-bg);
    box-shadow: var(--sn-logo-shadow);
  }
  .sn-brand__n {
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--dd-ring) var(--dd-bar-mix), var(--primary)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .sn-sec {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .85rem 1.2rem .3rem;
    opacity: .9;
  }
  .sn-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .85rem;
    border-radius: 11px;
    margin: .1rem .55rem;
    cursor: pointer;
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    border: none;
    background: transparent;
    width: calc(100% - 1.1rem);
    text-align: left;
    position: relative;
    transition: background var(--dur, .18s) var(--ease, ease), color var(--dur, .18s) var(--ease, ease);
  }
  .sn-ic { width: 20px; text-align: center; font-size: 1rem; flex: 0 0 20px; }
  .sn-item:hover { background: var(--surface-2); color: var(--text); }
  .sn-item.is-active {
    background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 6%, transparent));
    color: var(--primary); font-weight: 700;
  }
  .sn-item.is-active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px; background: var(--primary);
  }
  .sn-cnt { margin-left: auto; font-size: .72rem; background: var(--primary-d); color: var(--on-primary); border-radius: 999px; padding: .08rem .45rem; font-weight: 700; }
  .sn-foot { margin-top: auto; padding: .8rem .7rem .6rem; border-top: 1px solid var(--dd-border-soft); }
  /* P71: Fahri-Card im Sidebar-Footer (fahriSvg wiederverwendet) */
  .sn-fahri {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .sn-fahri__av {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--dd-surface-3);
  }
  .sn-fahri__av svg { width: 34px; height: auto; display: block; }
  .sn-fahri__t { min-width: 0; font-size: .76rem; color: var(--muted); font-weight: 600; }
  .sn-fahri__t b { display: block; color: var(--text); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sn-fahri__prog { height: 5px; border-radius: 3px; background: var(--dd-track); margin-top: .35rem; overflow: hidden; }
  .sn-fahri__prog i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) var(--dd-bar-mix), var(--dd-ring)), var(--dd-ring)); transition: width var(--dur, .22s) var(--ease, ease); }

  /* P71: Topbar-Avatar (desktop-only, additiv) */
  .topbar__avatar {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
    display: grid; place-items: center; font-size: .95rem; font-weight: 800;
    color: var(--primary); background: var(--surface-2); border: 1px solid var(--border);
    margin-left: .1rem;
  }

  /* ---- Inhaltsbreiten ---- */
  /* Bibliothek: 3 Spalten */
  .lib-cards { grid-template-columns: repeat(3, 1fr); }
  .lib-tiles { grid-template-columns: repeat(3, 1fr); }

  /* Dashboard: Fächer 4-col (Mobile-Pfad-Fallback) */
  .hd-grid { grid-template-columns: repeat(4, 1fr); }
  #heute-root { max-width: 1360px; margin: 0 auto; }

  /* Lernen-Grid: 3 Spalten */
  .learn-grid { grid-template-columns: repeat(3, 1fr); }

  /* Quiz: zentriert, max-width */
  #view-lernen .quiz-setup { max-width: 760px; margin-left: auto; margin-right: auto; }
  #quiz-runner { max-width: 760px; margin-left: auto; margin-right: auto; }
  #quiz-result  { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* Quiz-Tastatur-Hinweis */
  .quiz-kbd { display: block; }

  /* Lernzettel: zentriert */
  #view-sheet { max-width: 820px; margin-left: auto; margin-right: auto; }

  /* Statistik: 2-spaltig */
  #view-statistik { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  #view-statistik h2.section-title { grid-column: 1 / -1; margin-bottom: 0; }
}

/* ---- ≥1280px: Lernzettel-TOC-Rail ---- */
@media (min-width:1280px) {
  /* Wenn JS die Rail injiziert hat, schaltet sheetwrap--active das Grid ein */
  #view-sheet.sheetwrap--active {
    display: grid;
    grid-template-columns: minmax(0,1fr) 292px;
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    max-width: 1160px;
  }
  #view-sheet.sheetwrap--active .sheet-toolbar { grid-column: 1 / -1; }
  #view-sheet.sheetwrap--active #sheet-content  { grid-column: 1; }
  #sheet-rail { grid-column: 2; align-self: start; }

  /* TOC-Karte */
  .toc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    position: sticky;
    top: 1rem;
  }
  .toc-card h4 { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .45rem; }
  .toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .12rem; }
  .toc-item { font-size: .86rem; line-height: 1.3; }
  .toc-link { color: var(--text); text-decoration: none; padding: .18rem .32rem; border-radius: var(--radius-sm); display: block; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
  .toc-link:hover { background: var(--surface-2); }
  .toc-link.is-active { color: var(--primary); font-weight: 700; }
  .toc-item--h3 .toc-link { padding-left: .85rem; font-size: .82rem; color: var(--muted); }
  .toc-item--h3 .toc-link.is-active { color: var(--primary); }

  /* Rail-CTA */
  .rail-cta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; margin-top: .75rem; }

  .sheet-rail { display: flex; flex-direction: column; }
}

/* ---- ≥1440px: Bibliothek 4 Spalten ---- */
@media (min-width:1440px) {
  .lib-cards { grid-template-columns: repeat(4, 1fr); }
  .lib-tiles  { grid-template-columns: repeat(4, 1fr); }
  .hd-grid    { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================================================
   P71: Desktop-Dashboard „Heute" (≥1024px) — abgesegnetes Mockup.
   Alle Regeln im min-width-Block; Mobile-CSS byte-unberührt. Farben ausschließlich
   über App-Variablen / abgeleitete --dd-* Tokens (hell + dunkel sauber).
   =========================================================================== */
@media (min-width:1024px) {
  .dd-wrap { max-width: 1360px; width: 100%; margin: 0 auto; }

  /* ---- Hero ---- */
  .dd-hero {
    display: flex; align-items: center; gap: 1.6rem;
    background: var(--dd-hero-bg);
    border-radius: 22px; padding: 1.6rem 1.9rem;
    position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
  }
  .dd-hero__fahri { flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
  .dd-hero__fahri svg { width: 104px; height: auto; display: block; }
  .dd-hero__txt { flex: 1; min-width: 0; }
  .dd-hero__txt h2 { font-family: var(--font-greet); font-size: 1.55rem; font-weight: 800; color: #fff; margin: 0 0 .35rem; }
  .dd-hero__txt p { color: rgba(255,255,255,.92); font-size: .95rem; margin: 0 0 1rem; }
  .dd-hero__go {
    background: var(--hero-cta-bg); color: var(--dd-hero-go-fg); border: none;
    padding: .62rem 1.25rem; border-radius: 12px; font-weight: 800; font-size: .95rem;
    cursor: pointer; transition: transform .08s var(--ease, ease), box-shadow var(--dur, .2s) var(--ease, ease);
  }
  .dd-hero__go:hover { box-shadow: 0 6px 16px rgba(0,0,0,.22); }
  .dd-hero__go:active { transform: scale(.97); }
  /* GO-Ring: weißer Ring außen (conic), grüne Scheibe innen (::before), „GO" darüber.
     Button-Text (JS: „GO") liefert den barrierefreien Namen, ist aber font-size:0
     versteckt; sichtbares „GO" kommt aus ::before. */
  .dd-hero__ring {
    flex: 0 0 82px; width: 82px; height: 82px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; border: none; font-size: 0;
    background: conic-gradient(#fff 0 60%, rgba(255,255,255,.28) 60% 100%);
    transition: transform .1s var(--ease, ease);
  }
  .dd-hero__ring::before {
    content: "GO"; grid-area: 1 / 1;
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: var(--dd-go-bg); color: var(--dd-go-fg); font-size: .95rem; font-weight: 800; letter-spacing: .04em;
  }
  .dd-hero__ring:hover { transform: scale(1.05); }
  .dd-hero__ring:active { transform: scale(.96); }

  /* ---- 2-Spalten-Grid ---- */
  .dd-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem; margin-top: 1.4rem; align-items: start; }
  .dd-col { min-width: 0; }
  .dd-h { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .4rem .1rem .75rem; font-weight: 700; }

  /* ---- Stat-Kacheln ---- */
  .dd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.5rem; }
  .dd-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
  .dd-stat .k { font-family: var(--font-head, 'Baloo 2', sans-serif); font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; color: var(--text); line-height: 1.1; }
  .dd-stat .em { font-size: 1.15rem; }
  .dd-stat .l { color: var(--muted); font-size: .78rem; font-weight: 600; margin-top: .15rem; }

  /* ---- Karten / Weiterlernen-Reihe ---- */
  .dd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
  .dd-lrow { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; color: var(--text); padding: .2rem 0; }
  .dd-lrow__ic { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px; display: grid; place-items: center; font-size: 1.15rem; background: var(--dd-surface-3); }
  .dd-lrow__body { flex: 1; min-width: 0; }
  .dd-lrow__tt { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dd-lrow__pct { color: var(--muted); font-size: .78rem; margin-top: .3rem; font-weight: 600; }
  .dd-lrow__play {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: grid; place-items: center;
    color: var(--on-primary); font-size: .9rem; background: var(--dd-grad);
  }
  .dd-bar { height: 6px; border-radius: 4px; background: var(--dd-track); margin-top: .45rem; overflow: hidden; }
  .dd-bar i { display: block; height: 100%; transition: width var(--dur, .4s) var(--ease, ease); }

  /* ---- „Deine Fächer" ---- */
  .dd-subjects { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .dd-subj { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 16px; padding: 1rem 1.1rem; cursor: pointer; box-shadow: var(--shadow); transition: border-color var(--dur, .15s) var(--ease, ease), transform .08s var(--ease, ease); }
  .dd-subj:hover { border-color: var(--primary); }
  .dd-subj:active { transform: scale(.99); }
  .dd-subj__top { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; }
  .dd-subj__dot { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; display: grid; place-items: center; font-size: 1.05rem; }
  .dd-subj__meta { min-width: 0; }
  .dd-subj__name { font-weight: 700; font-size: .95rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dd-subj__sub { color: var(--muted); font-size: .76rem; }

  /* ---- Rechte Widget-Spalte ---- */
  .dd-widget { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
  .dd-widget__h { font-weight: 800; font-size: .95rem; margin-bottom: .9rem; color: var(--text); }
  .dd-widget__tip { display: flex; gap: .65rem; align-items: flex-start; font-size: .84rem; color: var(--muted); line-height: 1.4; }
  .dd-widget__tip .em { font-size: 1.2rem; line-height: 1; }
  .dd-widget__tip--c { justify-content: center; text-align: center; }

  /* Tagesziel-Ring (echt: doneToday/goal) */
  .dd-goalring { width: 120px; height: 120px; border-radius: 50%; margin: .2rem auto .7rem; display: grid; place-items: center; }
  .dd-goalring b { width: 92px; height: 92px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-content: center; font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.3; font-weight: 600; }
  .dd-goalring b span { font-family: var(--font-head, 'Baloo 2', sans-serif); font-size: 1.5rem; color: var(--text); font-weight: 800; display: block; }

  /* „Deine Woche" — min(streak,7) gefüllte Kacheln (ehrlich vereinfacht) */
  .dd-week { display: flex; gap: .4rem; }
  .dd-week__cell { flex: 1; height: 32px; border-radius: 9px; background: var(--dd-surface-3); display: grid; place-items: center; font-size: .82rem; color: var(--muted); }
  .dd-week__cell.is-on { background: var(--dd-grad); color: var(--on-primary); font-weight: 700; }

  /* ≤1160px: Widget-Spalte unter den Content klappen (Mockup) */
  @media (max-width:1160px) {
    .dd-grid { grid-template-columns: 1fr; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-item { transition: none; }
  .toc-link { transition: none; }
  .sn-fahri__prog i, .dd-bar i, .dd-hero__go, .dd-hero__ring, .dd-subj { transition: none; }
}


/* ===== P44: Multi-Konten (Cap-Banner, Konten-Verwaltung, Einmal-Passwort) ===== */
.cap-banner {
  margin: .65rem .9rem 0;
  padding: .6rem .8rem;
  border-radius: .65rem;
  background: color-mix(in srgb, #e8821e 14%, var(--surface));
  border: 1px solid color-mix(in srgb, #e8821e 45%, transparent);
  color: var(--text);
  font-size: .85rem;
  line-height: 1.35;
}
.konten-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.konto-card__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.konto-card__meta { display: flex; gap: 1rem; margin: .45rem 0; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.konto-card__row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.konto-card--off { opacity: .62; }
.pw-once {
  border: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-radius: .8rem;
  padding: .8rem;
  margin-bottom: .4rem;
}
.pw-once__head { font-size: .85rem; margin-bottom: .4rem; }
.pw-once__pw {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding: .45rem .6rem;
  background: var(--surface);
  border-radius: .5rem;
  user-select: all;
  word-break: break-all;
}
.pw-once__row { display: flex; gap: .5rem; margin-top: .55rem; }

/* N1: E-Mail-Verifikations-Banner */
.verify-banner {
  margin: .5rem .9rem 0;
  padding: .55rem .8rem;
  border-radius: .65rem;
  background: color-mix(in srgb, #2563eb 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #2563eb 40%, transparent);
  color: var(--text);
  font-size: .84rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.verify-banner__btn { font-size: .8rem; padding: .25rem .55rem; }

/* N1: Login-Formular — Panel-Wechsel (Login / Registrieren / Passwort vergessen) */
.login-panel { display: grid; gap: .65rem; margin-top: 1rem; }
.login-panel.hidden { display: none; }
.login-alt-links { display: flex; justify-content: space-between; gap: .5rem; margin-top: .65rem; }
.link-btn { background: none; border: none; color: var(--primary); font-size: .85rem; cursor: pointer; padding: 0; text-decoration: underline; }
.login-back { margin-top: .65rem; }
.success { color: var(--success); font-size: .88rem; margin-top: .4rem; }

/* N1: Einstellungen — Konto & Daten */
.acct-data-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.acct-delete-form { display: grid; gap: .5rem; margin-top: .7rem; }

/* P45a: Passwort-Ändern-Formular (Einstellungen) */
.pw-form { display: grid; gap: .5rem; }
.pw-form label { font-size: .88rem; font-weight: 600; }
.pw-form input { margin-top: .15rem; }
.pw-form__err { font-size: .83rem; color: #e5484d; min-height: 1.1em; }
.pw-form__ok { font-size: .83rem; color: var(--primary); }

/* P45a: Persistentes Passwort-Modal (Admin pwreset) */
.pw-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.pw-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  max-width: 360px; width: 100%;
}
.pw-modal h3 { margin: 0 0 .6rem; font-size: 1rem; }
.pw-modal .pw-once__pw { font-size: 1.25rem; }
.pw-modal__hint { font-size: .82rem; color: var(--muted); margin: .5rem 0 .9rem; }
.pw-modal__row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* P55: „📄 Original anzeigen" — gesicherter Original-Wortlaut je Idee/Meldung.
   Scrollbar, Palette B (hell+dunkel via Variablen), mobil kein horizontaler Overflow. */
.orig-modal { max-width: 560px; }
.orig-log { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 .9rem; padding-right: .2rem; min-width: 0; }
.orig-msg { display: flex; flex-direction: column; gap: .15rem; min-width: 0; max-width: 100%; }
.orig-who { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.orig-text { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .65rem; font-size: .9rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.orig-msg--bot .orig-text { background: var(--surface-2, var(--surface)); }
.orig-empty { margin: .4rem 0 1rem; }

/* ===========================================================================
   P46 (#33 Builder-Redesign + 4 neue Typen) + #29 Vorschau + P47 (#26/#27)
   Rein additive Visual-Layer; nutzt die bestehenden Design-Tokens (Palette B).
   =========================================================================== */

/* ---- (#33) Builder: große antippbare Typ-Karten („Wohnzimmer") ---- */
.mf-builder__panel { max-width: 620px; }
.mf-typegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .55rem; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: .15rem; margin: .1rem 0 .3rem;
}
.mf-typecard {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem .75rem; border-radius: var(--radius-sm, 12px);
  border: 2px solid var(--border); background: var(--surface);
  color: var(--text); transition: border-color .12s, background .12s, transform .08s;
}
.mf-typecard:hover { border-color: var(--primary); }
.mf-typecard:active { transform: scale(.98); }
.mf-typecard.is-sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.mf-typecard:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mf-typecard__icon { font-size: 1.5rem; line-height: 1; }
.mf-typecard__label { font-weight: 700; font-size: .92rem; }
.mf-typecard__desc { font-size: .76rem; color: var(--muted); line-height: 1.25; }
.mf-typecard__new {
  position: absolute; top: .4rem; right: .4rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--on-primary);
  background: var(--primary); border-radius: 999px; padding: .05rem .4rem;
}

/* ---- (#33) Editor: Felder der neuen Typen ---- */
.qe-order, .qe-cats, .qe-cits { display: flex; flex-direction: column; gap: .4rem; margin: .1rem 0 .5rem; }
.qe-ord-row, .qe-cat-row, .qe-cit-row { display: flex; align-items: center; gap: .45rem; }
.qe-ord-n { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums; }
.qe-cit-cat { flex-shrink: 0; max-width: 42%; }
.qe-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; margin: .1rem 0 .4rem; }
.qe-grid2 .qe-label { margin: .2rem 0 .2rem; }

/* ---- (#33) Quiz-Runner: neue Typen ---- */
.q-typehint { font-size: .85rem; color: var(--muted); margin: .1rem 0 .6rem; }
.q-order { display: flex; flex-direction: column; gap: .5rem; }
.q-order-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 2px solid var(--border); border-radius: var(--radius-sm, 12px); background: var(--surface); }
.q-order-num { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: .82rem; }
.q-order-txt { flex: 1; min-width: 0; }
.q-order-btns { flex-shrink: 0; display: flex; flex-direction: column; gap: .1rem; }
.q-order-up, .q-order-down { width: 34px; height: 26px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; cursor: pointer; font-size: .8rem; line-height: 1; }
.q-order-up:hover, .q-order-down:hover { border-color: var(--primary); }
.q-slider { padding: .6rem .2rem 0; }
.q-slider input[type="range"] { width: 100%; accent-color: var(--primary); height: 30px; }
.q-slider-scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: -.2rem; }
.q-slider-val { text-align: center; margin-top: .5rem; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.q-cat { display: flex; flex-direction: column; gap: .55rem; }
.q-cat-item { padding: .6rem .7rem; border: 2px solid var(--border); border-radius: var(--radius-sm, 12px); background: var(--surface); }
.q-cat-txt { font-weight: 600; margin-bottom: .4rem; }
.q-cat-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.q-cat-chip { border: 2px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: .3rem .7rem; font-size: .85rem; cursor: pointer; }
.q-cat-chip:hover { border-color: var(--primary); }
.q-cat-chip.is-sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); font-weight: 700; }
.q-correct { margin-top: .5rem; font-size: .9rem; }
.q-correct-ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.q-correct-cat { margin-top: .15rem; }

/* ---- (#29) Vorschau: liegt ÜBER dem Editor ---- */
.q-editor.q-preview { z-index: 58; }
.qp-card { border: 1px solid var(--border); border-radius: var(--radius-sm, 12px); background: var(--surface-2); padding: .9rem; }
.qp-q { font-size: 1.05rem; font-weight: 700; margin-bottom: .7rem; }
.qp-opts { display: flex; flex-direction: column; gap: .35rem; }
.qp-opt { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); }
.qp-opt.is-correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--surface)); font-weight: 600; }
.qp-mark { flex-shrink: 0; width: 1.2em; color: var(--ok); font-weight: 800; }
.qp-sol, .qp-cloze, .qp-flash { padding: .55rem .65rem; border-radius: 10px; background: var(--surface); border-left: 3px solid var(--ok); }
.qp-blank { color: var(--ok); }
.qp-pairs, .qp-order, .qp-cats { display: flex; flex-direction: column; gap: .3rem; }
.qp-pair { display: flex; align-items: center; gap: .5rem; }
.qp-arrow { color: var(--muted); }
.qp-order { margin: 0; padding-left: 1.3rem; }
.qp-cat { padding: .35rem .55rem; border-radius: 8px; background: var(--surface); }
.qp-sign { font-size: .85rem; margin-bottom: .5rem; }
.qp-expl { margin-top: .7rem; font-size: .88rem; color: var(--muted); }

/* ---- (#26) Farbpunkt-Prioritaet ---- */
.prio-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.25); box-sizing: border-box; vertical-align: middle; }
.prio-dot--green { background: var(--prio-green); }
.prio-dot--yellow { background: #f2c037; }
.prio-dot--red { background: #e8503a; }
.prio-dot--white { background: #f4f4f4; }
.q-prio, .fq-prio { flex-shrink: 0; border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 8px; line-height: 0; }
.q-prio:hover, .fq-prio:hover { background: var(--surface-2); }
.q-prio:focus-visible, .fq-prio:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.prio-menu { position: fixed; z-index: 70; display: flex; gap: .4rem; padding: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.prio-menu__sw { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0,0,0,.2); }
.prio-menu__sw:hover { transform: scale(1.12); }
.prio-menu__sw.is-cur { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- (#27) Fach-Baum in der Fragen-Übersicht ---- */
.fq-group__toggle { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; cursor: pointer; border: none; background: transparent; color: var(--text); padding: .2rem 0; }
.fq-caret { display: inline-block; transition: transform .15s; font-size: .8rem; color: var(--muted); }
.fq-group.is-collapsed .fq-caret, .fq-sub.is-collapsed .fq-caret { transform: rotate(-90deg); }
.fq-group.is-collapsed .fq-group__body, .fq-sub.is-collapsed .fq-sub__body { display: none; }
.fq-sub { margin: .35rem 0 .35rem .2rem; border-left: 2px solid var(--border); padding-left: .6rem; }
.fq-sub__h { display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left; cursor: pointer; border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: .84rem; padding: .3rem 0; }
.fq-sub__cnt { font-weight: 600; opacity: .8; }
.fq-item .fq-prio { margin-left: .1rem; }

/* ===========================================================================
   N3 — KI-Transparenz / Consent / „KI-generiert"-Label / Melden (EU AI Act Art. 50)
   Rein additiv; nutzt die bestehenden Design-Tokens (Palette B, hell+dunkel).
   =========================================================================== */

/* „🤖 KI-generiert"-Label auf Lernzetteln + KI-Marker im Quiz (dezent). */
.ai-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .28rem .5rem; border-radius: 999px;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); white-space: nowrap;
}
.q-ai { font-size: .82rem; line-height: 0; opacity: .7; cursor: help; padding: 0 .12rem; }
.q-report {
  flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  padding: 4px; border-radius: 8px; line-height: 0; font-size: .82rem; opacity: .65;
}
.q-report:hover { background: var(--surface-2); opacity: 1; }
.q-report:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* „⚠️ Melden"-Button unter dem Lernzettel (ruhig, nicht alarmierend). */
.sheet__report {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin-top: .55rem; padding: .6rem .8rem;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  background: transparent; border: 1px dashed var(--border); border-radius: 12px; cursor: pointer;
}
.sheet__report:hover { color: var(--text); border-color: var(--muted); background: var(--surface-2); }
.sheet__report:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* FernUSG-Hinweis am Selbsteinschätzungs-Ring. */
.stat-ring-card__note { display: block; margin-top: .25rem; font-size: .68rem; opacity: .8; }

/* Consent-Screen (Overlay) + Melde-Dialog. */
.ai-consent-overlay, .ai-report-overlay {
  position: fixed; inset: 0; z-index: 9850;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ai-consent, .ai-report {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.4rem 1.5rem;
  max-width: 440px; width: 100%; max-height: 90vh; overflow: auto;
}
.ai-consent h3, .ai-report h3 { margin: 0 0 .7rem; font-size: 1.12rem; }
.ai-consent__lead { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.5; }
.ai-consent__list { margin: 0 0 .8rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ai-consent__list li { font-size: .86rem; line-height: 1.45; color: var(--text); }
.ai-consent__law { font-size: .78rem; color: var(--muted); margin: .2rem 0 1rem; }
.ai-consent__law a { color: var(--primary); }
.ai-consent__mark { font-style: italic; opacity: .75; }
.ai-consent__row, .ai-report__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.ai-consent__row .btn { flex: 1 1 auto; }
.ai-report__sub { margin: 0 0 .6rem; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.ai-report__ref { margin: 0 0 .6rem; font-size: .84rem; font-weight: 700; }
.ai-report textarea, .ai-consent textarea {
  width: 100%; box-sizing: border-box; margin-bottom: .8rem; padding: .6rem .7rem;
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; resize: vertical;
}

/* Inline-Variante für die Einstellungen (kein Overlay-Rahmen). */
.ai-consent--inline {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: .9rem 1rem; margin: .2rem 0 .7rem;
}
.ai-consent-settings__status { font-size: .86rem; margin: .3rem 0 .6rem; }

@media (prefers-reduced-motion: reduce) {
  .ai-consent-overlay, .ai-report-overlay, .ai-consent, .ai-report { animation: none !important; transition: none !important; }
}

/* N2: Paywall / Pro-Upgrade (nutzt die ai-consent-Overlay-Klassen). */
.paywall-plans { display: flex; gap: .6rem; margin: .2rem 0 .5rem; }
.paywall-plan {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .7rem .5rem; border: 2px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit;
}
.paywall-plan b { font-size: .95rem; }
.paywall-plan span { font-size: .82rem; color: var(--muted); }
.paywall-plan.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
.paywall-note { font-size: .78rem; color: var(--muted); margin: 0 0 .8rem; }
.paywall-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; line-height: 1.45; margin: 0 0 .7rem; }
.paywall-consent input { margin-top: .2rem; flex: 0 0 auto; }
/* P86-Befund: die globale Regel „input { width: 100% }" streckte die Verzichts-Checkbox (§ 356 Abs. 5 BGB) auf volle
   Breite — der Erklaerungstext lag ausserhalb des sichtbaren Bereichs (seit N2/N6). Checkbox wieder normal gross. */
.paywall-consent input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-width: 1.15rem; padding: 0; accent-color: var(--primary); }
.paywall-consent > span { min-width: 0; }
/* P86-Befund: „.paywall-plan span { color: muted }" ueberschrieb das Weiss des Jahres-Abzeichens (gruen auf gruen, kaum lesbar). */
.paywall-plan .paywall-plan__badge { color: var(--on-primary); }
.paywall-mark { font-style: italic; opacity: .75; }
.paywall-links { font-size: .8rem; margin: 0 0 1rem; }
.paywall-links a { color: var(--primary); }
/* Cap-Banner Upgrade-Button + Rechts-Links-Reihe in den Einstellungen. */
.cap-banner__up { margin-left: .5rem; white-space: nowrap; }
/* P86 (D2): „So funktioniert die KI-Nutzung" — Details zur fairen Nutzung (Einstellungen, KI-Nutzung, Paywall) */
.fair-details { margin: .45rem 0 .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; background: var(--surface-2); text-align: left; }
.fair-details > summary { cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--primary-d); }
.fair-details[open] > summary { margin-bottom: .3rem; }
.fair-details .hint { margin: .35rem 0; }
.legal-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===================== N6: Onboarding-Flow (Bento + Fahri) ===================== */
html.onb-lock { overflow: hidden; }
.onb-overlay {
  position: fixed; inset: 0; z-index: 9900;
  background: var(--onb-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0) + 1rem);
}
.onb-card {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-lg); padding: 0;
  animation: onb-in .32s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes onb-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.onb-skip {
  position: absolute; top: .55rem; right: .6rem; z-index: 3;
  background: rgba(255, 255, 255, .18); color: #fff;
  border: 0; border-radius: 999px; padding: .3rem .7rem;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.onb-skip:hover { background: rgba(255, 255, 255, .3); }
.onb-hero {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  min-height: 128px; padding: 1.1rem 1rem .2rem;
  border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
  background: var(--onb-hero-bg);
  overflow: hidden;
}
.onb-hero::after {   /* dezente „Straße" unter Fahri (P26-Motiv) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--onb-road);
}
.onb-fahri { position: relative; z-index: 1; animation: onb-bob 3s ease-in-out infinite; }
@keyframes onb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.onb-hand { position: absolute; left: 50%; margin-left: 34px; bottom: 30px; font-size: 1.5rem; transform-origin: 70% 70%; animation: onb-wave 1.6s ease-in-out infinite; z-index: 2; }
@keyframes onb-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 60% { transform: rotate(-8deg); } }
.onb-body { padding: 1.1rem 1.4rem .4rem; text-align: center; }
.onb-body h3 { margin: 0 0 .5rem; font-size: 1.28rem; line-height: 1.2; }
.onb-lead { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--text); }
.onb-sub { margin: 0 0 .3rem; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.onb-minis { display: grid; gap: .55rem; margin: .5rem 0 .2rem; text-align: left; }
.onb-mini {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .7rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: .7rem .8rem;
}
.onb-mini__ic { grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1; }
.onb-mini b { font-size: .92rem; }
.onb-mini span:last-child { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.onb-consent-ok { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem; font-size: .9rem; line-height: 1.5; text-align: left; }
.onb-body .ai-consent--inline { text-align: left; margin: .3rem 0 0; }
.onb-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem 1.4rem calc(1.1rem + env(safe-area-inset-bottom, 0)); }
.onb-act .btn { flex: 1 1 auto; }
.onb-act--col { flex-direction: column; }
.onb-act--col .btn { width: 100%; flex: 0 0 auto; }
.onb-dots { display: flex; gap: .4rem; justify-content: center; width: 100%; margin-top: .1rem; order: 5; }
.onb-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border); transition: background .2s, transform .2s; }
.onb-dot.is-on { background: var(--primary); transform: scale(1.25); }

/* ===================== N6: Paywall-Politur (Bento + Fahri) ===================== */
.paywall--n6 { padding: 0 1.5rem 1.4rem; overflow: hidden; }
.paywall-hero {
  margin: 0 -1.5rem 1rem; min-height: 118px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem 1rem .2rem; position: relative; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--onb-hero-bg);
}
.paywall-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--onb-road); }
.paywall-fahri { position: relative; z-index: 1; animation: onb-bob 3s ease-in-out infinite; }
.paywall--n6 h3 { text-align: center; font-size: 1.32rem; margin: 0 0 .5rem; }
.paywall-lead { text-align: center; font-size: .92rem; line-height: 1.5; margin: 0 0 .9rem; }
.paywall-benefits { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.paywall-benefits li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; font-size: .9rem; line-height: 1.4; }
.paywall-benefits__ic { font-size: 1.15rem; width: 1.6rem; text-align: center; }
.paywall-plan { position: relative; }
.paywall-plan__price { font-size: .82rem; color: var(--muted); }
.paywall-plan__badge {
  position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--on-primary); font-size: .64rem; font-weight: 800;
  letter-spacing: .02em; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
}
.paywall-plan--year { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.paywall-plan--year.is-active .paywall-plan__price { color: var(--text); }
.paywall-web {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: .85rem .9rem; font-size: .88rem; line-height: 1.5; margin: 0 0 .8rem;
}
.paywall-web__url { font-weight: 700; word-break: break-all; }
.paywall-trust { text-align: center; font-size: .8rem; color: var(--muted); margin: .8rem 0 0; }
.paywall-trust a { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .onb-card, .onb-fahri, .onb-hand, .paywall-fahri { animation: none !important; }
  .onb-dot { transition: none !important; }
}
@media (min-width: 420px) {
  .onb-minis { grid-template-columns: 1fr; }
}


/* ===================================================================
   P54: Rahmenplan-Abdeckung (admin-only). Palette B, hell+dunkel,
   kein horizontaler Overflow auf Mobil (P53-Kriterien). Reine Anzeige.
   =================================================================== */
.rp-head__top { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.rp-bar { display: flex; height: .6rem; border-radius: .4rem; overflow: hidden; background: var(--border); margin: .5rem 0; }
.rp-bar > span { display: block; height: 100%; }
.rp-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .82rem; color: var(--muted); }
.rp-cat { margin: .6rem 0; padding: 0; overflow: hidden; }
.rp-cat > .rp-cat__sum { list-style: none; cursor: pointer; padding: .7rem .8rem; }
.rp-cat > .rp-cat__sum::-webkit-details-marker { display: none; }
.rp-cat__hd { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.rp-cat__hd > b { overflow-wrap: anywhere; }
.rp-cat__ue { font-size: .78rem; white-space: nowrap; }
.rp-cat__mini { font-size: .8rem; }
.rp-komp { padding: .3rem .8rem .5rem; border-top: 1px solid var(--border); }
.rp-komp__t { font-weight: 600; font-size: .88rem; margin: .5rem 0 .3rem; overflow-wrap: anywhere; }
.rp-item { padding: .25rem 0; }
.rp-item__row { display: flex; gap: .45rem; align-items: flex-start; }
.rp-item__ic { flex: 0 0 auto; }
.rp-item__tx { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.rp-item__slugs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 0 1.35rem; }
.rp-slug { border: 1px solid var(--border); background: var(--surface); color: var(--primary);
  border-radius: .4rem; padding: .12rem .45rem; font-size: .78rem; cursor: pointer; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rp-item__note { margin: .2rem 0 0 1.35rem; font-size: .82rem; overflow-wrap: anywhere; }
.rp-item--fehlt .rp-item__tx { color: var(--text); }
@media (max-width: 640px) {
  #view-rahmenplan { overflow-x: clip; }
  .rp-cat__ue { white-space: normal; }
}

/* ===== P58: „Aufteilen"-Modus (Abschnitte gezielt zuordnen) ===== */
.split-panel { max-height: 86vh; overflow-y: auto; }
.split-hint { margin: 0; font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.split-list { display: grid; gap: .5rem; }
.split-block {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface)); padding: .55rem .65rem; min-width: 0;
  transition: border-color .18s var(--ease, ease), background .18s var(--ease, ease);
}
.split-block--on { border-color: var(--primary); background: var(--surface); }
.split-block__head { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.split-block__head input { margin-top: .2rem; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.split-block__title { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.split-block__preview { margin: .3rem 0 0 1.75rem; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.split-block__target { margin: .5rem 0 0 1.75rem; display: grid; gap: .4rem; }
.split-block__target .chip-select { flex-wrap: wrap; }
.split-block__target select, .split-newtitle {
  width: 100%; max-width: 100%; padding: .4rem .5rem; font-size: .88rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.split-actions { display: flex; gap: .5rem; margin-top: .3rem; position: sticky; bottom: 0; padding-top: .3rem; background: var(--surface); }
@media (max-width: 640px) {
  .split-panel { max-width: 100%; }
  .split-block__preview, .split-block__target { margin-left: 1.75rem; }
}

/* ===== P62: „In anderen Zettel einbauen" (Bloecke markieren, KI baut ein) ===== */
/* Optik-Wiederverwendung der P58-Aufteilen-Karten (Palette B hell + dunkel). */
.mergemove-block {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface)); padding: .55rem .65rem; min-width: 0;
  transition: border-color .18s var(--ease, ease), background .18s var(--ease, ease);
}
.mergemove-block--on { border-color: var(--primary); background: var(--surface); }
.mergemove-block__head { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.mergemove-block__head input { margin-top: .2rem; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.mergemove-block__title { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.mergemove-block__preview { margin: .3rem 0 0 1.75rem; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.mergemove-block__target { margin: .5rem 0 0 1.75rem; display: grid; gap: .4rem; }
.mergemove-block__target .chip-select { flex-wrap: wrap; }
.mergemove-block__target select, .mm-newtitle {
  width: 100%; max-width: 100%; padding: .4rem .5rem; font-size: .88rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
@media (max-width: 640px) {
  .mergemove-block__preview, .mergemove-block__target { margin-left: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mergemove-block { transition: none; }
}

/* ===== P63 (Hybrid-Grafik): Echt-Bild-Slot + Anhaengen-Dialog (Palette B hell+dunkel) ===== */
/* Angehaengtes echtes Bild im Lernzettel (neben der bestehenden .sheet__graphic-Huelle). */
.sheet__graphic-img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
.sheet__graphic-src { font-size: .76rem; color: var(--muted); padding: 0 .85rem .55rem; text-align: center; overflow-wrap: anywhere; }
.sheet__gfx-image span:first-child { filter: grayscale(.15); }

/* „Echtes Bild anhaengen"-Dialog (nutzt die more-sheet/split-panel-Huelle). */
.attach-img { display: grid; gap: .7rem; margin: .2rem 0 .3rem; min-width: 0; }
.attach-img__pick { align-self: start; cursor: pointer; }
.attach-img__preview { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2, var(--surface)); padding: .5rem; display: flex; justify-content: center; }
.attach-img__preview img { max-width: 100%; max-height: 46vh; height: auto; border-radius: var(--radius-sm); }
.attach-img__lbl { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; color: var(--text); min-width: 0; }
.attach-img__req { color: #d32f2f; }
.attach-img__in { width: 100%; max-width: 100%; box-sizing: border-box; padding: .5rem .6rem; font: inherit; font-size: .9rem; font-weight: 400; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.attach-img__in:focus { outline: 2px solid var(--primary); }

/* KI-SVG-Schema (Phase 2): freigegebenes SVG im Zettel + Vorschau im Dialog. */
/* P66: Container theme-adaptiv — color=var(--text) liefert currentColor fuers SVG (Text/
   Linien), Untergrund var(--surface). So bleibt das Schema in JEDEM Theme (hell/dunkel/
   Kontrast) lesbar, statt auf einer fixen weissen Flaeche zu haengen. */
.sheet__graphic-svg { padding: .8rem; overflow-x: auto; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sheet__graphic-svg svg { max-width: 100%; height: auto; }
.svg-suggest__preview { min-height: 140px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2, var(--surface)); padding: .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: .2rem 0 .3rem; }
.svg-suggest__preview .sheet__graphic-svg { width: 100%; }
.svg-suggest__status { color: var(--muted); font-size: .9rem; text-align: center; padding: 1.5rem .5rem; }
.svg-suggest__improve { margin: 0 0 .3rem; }
/* P66: Grounding-Hinweis unter der Vorschau. */
.svg-suggest__verified { margin: .35rem 0 0; font-size: .82rem; font-weight: 600; color: var(--ok, var(--primary)); text-align: center; }
.svg-suggest__verified--off { color: var(--muted); font-weight: 500; }
/* P66: „empfohlen"-Marker am passenden Grafik-Button (Form-Chooser). */
.gfx-rec { margin-left: .4rem; font-size: .74rem; font-weight: 600; color: var(--primary); opacity: .9; }
/* P66: „geprüft"-Badge im Grafik-Prüfbereich (Mermaid mit Label-Verify). */
.gfx-card__verified { margin: .3rem 0 .1rem; font-size: .8rem; font-weight: 600; color: var(--ok, var(--primary)); }
@media (prefers-reduced-motion: reduce) {
  .sheet__gfx-image, .sheet__gfx-svg { transition: none; }
}

/* P73 — Motivierende Animationen (#63) */
@keyframes p73-pop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes p73-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
/* P73d: kurze, gedaempft abklingende „schwache Erschuetterung" statt langsamem Wischen */
@keyframes p73-nudge{0%{transform:translateX(0)}15%{transform:translateX(-6px)}35%{transform:translateX(5px)}55%{transform:translateX(-3px)}75%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes p73-hop{0%{opacity:0;transform:translateY(8px)}30%{opacity:1;transform:translateY(-7px)}55%{transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes p73-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}}
@keyframes p73-cardin{0%{opacity:0;transform:translateY(14px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes p73-fill{0%{width:0}100%{width:100%}}
@keyframes p73-lap{0%{transform:translateX(0)}7%{transform:translateX(calc(var(--p73-lap) * -0.03))}47%{transform:translateX(var(--p73-lap))}47.01%{transform:translateX(calc(var(--p73-lap) * -1))}100%{transform:translateX(0)}}

/* M2: richtige Option — Haken poppt + Ring-Puls */
.q-opt.correct .q-opt__ck{animation:p73-pop .97s cubic-bezier(.2,1.5,.35,1)}
.q-opt.p73-ping::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--ok);opacity:0;pointer-events:none;animation:p73-ping 1.27s ease-out}
.q-opt{position:relative}
/* M3: falsche Option — einmaliger Mini-Nudge (nur diese Option) */
.q-opt.wrong.p73-nudge{animation:p73-nudge .4s ease-out}
/* P73d: alle uebrigen Fragetypen ohne .q-opt — die ganze Quiz-Karte erschuettert kurz */
.quiz-runner.p73-nudge{animation:p73-nudge .4s ease-out}
/* M2/M3: Feedback-Block sanft einblenden (alle Fragetypen) */
.q-feedback{animation:p73-cardin .78s ease}

/* Fahri im Quiz (per JS temporär eingefügt) */
.p73-qfahri{position:absolute;right:14px;bottom:12px;z-index:2;pointer-events:none;opacity:0}
.p73-qfahri svg{width:50px;height:auto;display:block}
.p73-qfahri.hop{animation:p73-hop 1.61s ease forwards}
.p73-qfahri.nod{opacity:1;animation:p73-nod 1.84s ease forwards}

/* M1: GO-Auslöser-Puls (Zündung) */
.p73-ignite{animation:p73-pop .28s ease}
/* M1: Fahri-Ehrenrunde im GO-Loader */
#loader.loader--go .p73-gorun{position:relative;overflow:hidden;height:56px;margin:.2rem 0 .1rem;transition:opacity .2s ease}
#loader.loader--go .p73-gorun .p73-car{position:absolute;left:6px;bottom:2px;transform:translateX(0);will-change:transform;animation:p73-lap 1.6s cubic-bezier(.5,0,.5,1) infinite}
#loader.loader--go .p73-gorun .p73-car svg{width:66px;height:auto;display:block}
#loader.loader--go .spinner{display:none}

/* M4: neue Zettel-Chips ploppen + Konfetti-Host */
.answer-card{position:relative}
.answer-card.p73-done .ver-badge{animation:p73-pop .97s cubic-bezier(.2,1.5,.35,1) both}
.answer-card.p73-done .ver-badge:nth-child(2){animation-delay:.18s}
.answer-card.p73-done .ver-badge:nth-child(3){animation-delay:.37s}
.p73-confetti{position:absolute;width:7px;height:10px;border-radius:2px;opacity:0;pointer-events:none}

/* Reduced Motion: Feedback bleibt (Farbe/Haken/„Neu"), Bewegung/Konfetti/Fahri-Runde aus */
@media (prefers-reduced-motion: reduce){
  .q-opt.correct .q-opt__ck,.q-opt.p73-ping::after,.q-opt.wrong.p73-nudge,.quiz-runner.p73-nudge,.q-feedback,
  .p73-ignite,.answer-card.p73-done .ver-badge{animation:none!important}
  #loader.loader--go .p73-gorun .p73-car{animation:none!important}
  #loader.loader--go .spinner{display:block}
  .p73-qfahri,.p73-gorun{display:none}
}

/* ===================================================================
   NAGLA-RECHT-1 (04.08.2026) — Rechts-Footer, Zustimmungs-Checkbox,
   Upload-/KI-Hinweise. Reine Ergaenzung: keine bestehende Regel
   ueberschrieben, Palette-B-Tokens wiederverwendet, hell + dunkel.
   =================================================================== */
.legal-foot {
  margin: 1.6rem 0 .4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  line-height: 1.9;
  color: var(--muted);
  text-align: center;
}
.legal-foot a { color: var(--legal-link); text-decoration: underline; text-underline-offset: 2px; }
.legal-foot a:hover, .legal-foot a:focus-visible { color: var(--primary); }
/* In der App unter dem Inhalt, mit Abstand zur Tab-Leiste. */
.legal-foot--app { margin: 2rem 0 .5rem; padding-bottom: .3rem; }

/* Zustimmung zu AGB/Datenschutz bei der Registrierung. */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .2rem 0 .7rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  margin-top: .12rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.consent-row a { color: var(--primary); font-weight: 600; }

/* P80: Platz der Sicherheitspruefung im Registrier-Formular (Widget kommt per app.js, erst beim
   Oeffnen). Mittig; feste Mindesthoehe gegen Springen beim Laden (normal/flexible 65 px, compact 140 px —
   app.js waehlt compact, wenn weniger als 300 px Breite da sind). Nie breiter als die Karte. */
.reg-turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
  max-width: 100%;
  margin: 0 0 .2rem;
}

/* Urheberrechts-/Privatnutzungs-Hinweis am Upload (§ 53 UrhG). */
.upload-note {
  margin: .5rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--muted);
}
.upload-note a { color: var(--primary); font-weight: 600; }

/* KI-Interaktions-Hinweis im Coach-/Hilfe-Chat (Art. 50 Abs. 1 KI-VO). */
.ai-chat-note {
  margin: 0 0 .5rem;
  padding: .5rem .65rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--text);
}

/* Laengeres KI-Label („KI-erzeugt — bitte fachlich prüfen") darf auf schmalen
   Displays umbrechen; die alte nowrap-Regel haette es aus dem Band geschoben. */
.ai-badge { white-space: normal; text-align: left; max-width: 100%; }

/* PDF-Export/Druck: KI-Fussnote erscheint NUR im Druck, der Rechts-Footer nicht. */
.print-note { display: none; }
@media print {
  .print-note {
    display: block;
    margin-top: 1.2rem; padding-top: .5rem;
    border-top: 1px solid #999;
    font-size: .7rem; color: #444;
  }
  .legal-foot { display: none !important; }
}

/* ===================================================================
   P82: Buchkanon — Fach -> Kapitel -> Abschnitt (fester Platz je Buchabschnitt).
   Palette B ueber die Tokens (hell/dunkel), kein horizontaler Overflow auf
   Mobil (P53-Kriterien: Umbruch statt Abschneiden, min-width:0), jede Platz-
   Zeile mit Zettel = EIN Tap-Ziel (role=button), prefers-reduced-motion beachtet.
   Kapitel-Knoten nutzen die bestehenden .hier-node-Regeln (P48/P50).
   =================================================================== */
.bk-tree { gap: .55rem; min-width: 0; max-width: 100%; }
/* Kapiteltitel des Buchs voll lesbar (auch Desktop): umbrechen statt mit "…" abschneiden. */
.bk-chap > .hier-node__sum .hier-node__name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
.bk-chap__kap { font-weight: 700; color: var(--accent, var(--primary)); }
.bk-chap__count { font-variant-numeric: tabular-nums; }
.bk-list { padding: .35rem .5rem .55rem .55rem; gap: .35rem; min-width: 0; }
.bk-slot {
  display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .6rem;
  border: 1px solid var(--border); border-radius: .65rem; background: var(--surface);
  min-width: 0; max-width: 100%; color: var(--text); transition: background var(--dur, .22s) var(--ease, ease);
}
.bk-slot--filled, .bk-slot--bucket { cursor: pointer; border-left: 3px solid var(--accent, var(--primary)); user-select: none; }
.bk-slot--filled:hover, .bk-slot--bucket:hover { background: color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--surface)); }
.bk-slot--filled:focus-visible, .bk-slot--bucket:focus-visible { outline: 2px solid var(--accent, var(--primary)); outline-offset: 2px; }
.bk-slot--empty { border-style: dashed; background: color-mix(in srgb, var(--surface) 75%, var(--bg)); }
.bk-slot--empty .bk-slot__title { color: var(--muted); font-weight: 500; }
.bk-slot__nr { flex: 0 0 auto; min-width: 1.7rem; font-weight: 700; color: var(--accent, var(--primary)); font-variant-numeric: tabular-nums; }
/* flex-basis 0: der Titel bricht IN der Zeile um, statt die Zeile umzubrechen (Nummer + Titel bleiben nebeneinander). */
.bk-slot__main { flex: 1 1 0; min-width: 0; }
.bk-slot__title { font-weight: 600; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.bk-slot__inhalt {
  font-size: .78rem; color: var(--muted); margin-top: .12rem; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-slot__right { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; max-width: 42%; min-width: 0; }
.bk-slot__quiz { font-size: .76rem; }
.bk-slot__none { font-size: .8rem; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.bk-assign, .bk-place { padding: .25rem .6rem; font-size: .8rem; }
.bk-bucket { border-left-color: var(--amb); }
.bk-bucket > .hier-node__sum > .hier-node__count { background: var(--amb-soft); color: var(--amb-ink); }
/* Auswahl-Fenster (Zuordnen / Einordnen) — Bottom-Sheet wie Verschieben/Aufteilen. */
.bk-panel { max-height: 86vh; overflow-y: auto; grid-template-columns: minmax(0, 1fr); }
/* Kein Element darf das Fenster verbreitern (Befund Augen-Gate 82.2: lange Option/Titel schob das Panel aus 360 px). */
.bk-panel > * { min-width: 0; max-width: 100%; }
.bk-panel .chip-select { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.bk-panel .chip-select select, .bk-chap-select { width: 100%; max-width: 100%; min-width: 0; }
.bk-panel .split-actions { display: flex; gap: .5rem; }
.bk-search { width: 100%; }
.bk-pick-list { display: grid; gap: .35rem; min-width: 0; }
.bk-pick {
  display: flex; flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; text-align: left;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface);
  color: var(--text); cursor: pointer; font: inherit; min-width: 0;
}
.bk-pick:hover:not([disabled]) { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.bk-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bk-pick--taken, .bk-pick[disabled] { opacity: .55; cursor: not-allowed; }
.bk-pick__t { font-weight: 600; overflow-wrap: anywhere; }
.bk-pick__m { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.bk-pick-empty { margin: .4rem 0; }
.mv-bookslot-wrap { margin-top: .3rem; flex-wrap: wrap; }
.mv-bookslot-wrap { display: flex; min-width: 0; max-width: 100%; }
#mv-bookslot { width: 100%; max-width: 100%; min-width: 0; }
/* Mobil (<= 640px, P53): Rechtsblock unter den Titel, nichts laeuft seitlich raus. */
@media (max-width: 640px) {
  .bk-slot { flex-wrap: wrap; }
  .bk-slot__right { flex: 1 1 100%; max-width: 100%; justify-content: flex-start; padding-left: 2.25rem; }
  .bk-slot--bucket .bk-slot__right, .bk-slot--nonr .bk-slot__right { padding-left: 0; }   /* P90: Kunden ohne Abschnitts-Nummer */
  .bk-list { padding-left: .4rem; padding-right: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .bk-slot { transition: none; } }
/* P82-END */

/* ===================================================================
   P83 Teil B: GO-Pop-up „Wie soll GO einordnen?" (baut auf .ai-consent* auf),
   Vorschlaege im GO-Ergebnis (.go-sugg*) und in Eimer-Zeilen (.bk-sugg*).
   =================================================================== */
.go-mode { max-width: 480px; }
.go-mode__opts { display: grid; gap: .6rem; margin: 0 0 .9rem; }
.go-mode__opt {
  display: block; width: 100%; text-align: left; cursor: pointer; min-height: 44px;
  background: var(--surface); color: var(--text); font: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem;
  transition: border-color .12s, background .12s;
}
.go-mode__opt:hover { border-color: var(--primary); }
.go-mode__opt:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.go-mode__opt.is-last { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.go-mode__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.go-mode__t { font-weight: 700; font-size: 1rem; }
.go-mode__badge, .go-mode__last { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; }
.go-mode__badge { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--text); }
.go-mode__last { border: 1px solid var(--border); color: var(--muted); }
.go-mode__d { display: block; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.go-mode__ask { display: flex; align-items: center; gap: .55rem; font-size: .86rem; margin: 0 0 .9rem; cursor: pointer; min-height: 44px; }
.go-mode__ask input { width: 20px; height: 20px; flex: none; accent-color: var(--primary); }

.go-sugg { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.go-sugg__h { margin: 0 0 .3rem; font-size: .98rem; }
.go-sugg__hint { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.go-sugg__item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .75rem; margin: 0 0 .5rem; }
.go-sugg__title { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; overflow-wrap: anywhere; }
.go-sugg__row + .go-sugg__row { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.go-sugg__txt { font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
.go-sugg__txt--ok { font-weight: 600; }
.go-sugg__ev { color: var(--muted); }
.go-sugg__acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.go-sugg__acts .btn { min-height: 40px; flex: 1 1 auto; }   /* Augen-Gate: umgebrochene Knoepfe gleich breit */
@media (min-width: 720px) { .go-sugg__acts .btn { flex: 0 0 auto; } }   /* Desktop: natuerliche Breite */

.bk-sugg { font-size: .78rem; font-weight: 600; color: var(--text); margin-top: .2rem; overflow-wrap: anywhere; line-height: 1.35; }
/* Augen-Gate: [Übernehmen] so gross wie das benachbarte [Einordnen] (Buch-Eimer klein, Rahmenplan-Eimer 2.5rem, P83 F-5). */
.bk-sugg-take { padding: .25rem .6rem; font-size: .8rem; }
.rp-lib-bucket .bk-sugg-take { min-height: 2.5rem; padding: .35rem .8rem; }
.go-mode-set__help { margin: .45rem 0 .1rem; font-size: .82rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .go-mode__opt { transition: none; } }
/* P90 (D4): Meldung bei kaputtem Diagramm */
.diagram-fallback { margin: .4rem 0; padding: .7rem .9rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; text-align: center; }
.diagram-fallback__code { margin: .3rem 0; font-size: .82rem; color: var(--muted); }

/* P90: Links im Fliesstext folgen dem Theme („klassisch“ behaelt die Browser-Farbe wie bisher) */
.hint a:not(.btn), .md a:not(.btn), .settings-group a:not(.btn) { color: var(--link, revert); }

/* P90 (D2): Tastatur-Fokus an Kacheln und Karten */
.lib-tile:focus-visible, .sheet-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* P90: Seitenleiste und Sonne/Mond ruhig, Hero im Dunkeln mit feiner Kante, Platzhalter lesbar */
.sn-item .sn-ic { filter: var(--nav-ic-filter); }
#btn-mode { filter: var(--mode-ic-filter); }
.hd-hero h3, .dd-hero__txt h2 { font-family: var(--font-greet); }   /* Begruessung bleibt Baloo (90.4) */
.hd-hero, .bento__hero, .dd-hero, .learn-exam, .stat-ring-card { outline: 1px solid var(--hero-line); outline-offset: -1px; }
input::placeholder, textarea::placeholder { color: var(--placeholder, revert); }

/* P83B-END */

/* ===================================================================
   P83: Rahmenplan-Ansicht — Fach -> Bereich -> Kompetenz -> Punkt (n:1)
   und Ansicht-Schalter je Fach (Buch | Rahmenplan | Kategorien).
   Nutzt die P82-Klassen (bk-*, hier-node*) weiter; neu nur die zweite
   details-Ebene (Kompetenz) und die Punkt-Zeile. Klassen-Praefix rp-lib-,
   damit die P54-Admin-Klassen (rp-cat, rp-komp, rp-item …) unberuehrt
   bleiben. Mobil (P53): Umbruch statt Ueberlauf, min-width:0.
   =================================================================== */
/* Eine Zeile auch bei drei Knoepfen (Paedagogik) und 360 px: gleich breite, kompakte Knoepfe statt Umbruch. */
.lib-view-seg { margin: 0 0 .7rem; min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.lib-view-seg button { flex: 1 1 0; min-width: 0; min-height: 2.6rem; padding: .5rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-view-host { min-width: 0; max-width: 100%; }
.rp-lib-komps { padding: .35rem .5rem .55rem .55rem; gap: .45rem; min-width: 0; }
.rp-lib-komp { border-radius: .65rem; min-width: 0; max-width: 100%; }
.rp-lib-komp > .rp-lib-komp__sum { padding: .55rem .7rem; font-weight: 600; }
.rp-lib-komp[open] > .rp-lib-komp__sum > .hier-node__arrow { transform: rotate(90deg); }
.rp-lib-komp__name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.rp-lib-komp__id { font-weight: 700; color: var(--accent, var(--primary)); margin-right: .15rem; }
.rp-lib-komp__count { font-variant-numeric: tabular-nums; }
.rp-lib-points { display: flex; flex-direction: column; gap: .5rem; padding: .45rem .55rem .6rem; border-top: 1px solid var(--border); min-width: 0; }
.rp-lib-pt { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rp-lib-pt__head { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.rp-lib-pt__nr { flex: 0 0 auto; min-width: 2.4rem; font-weight: 700; font-size: .82rem; color: var(--accent, var(--primary)); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.rp-lib-pt__tx {
  flex: 1 1 0; min-width: 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-lib-pt__none { margin-left: 2.9rem; font-size: .8rem; color: var(--muted); font-style: italic; }
.rp-lib-sheet { margin-left: 2.9rem; }
#mv-rpslot { width: 100%; max-width: 100%; min-width: 0; }
/* Review F-3: Punkt-Text per Tippen voll aufklappen (Touch hat kein title-Tooltip). */
.rp-lib-pt__tx[aria-expanded] { cursor: pointer; }   /* Nachpruefung N-2: Hand nur auf tatsaechlich aufklappbaren Texten */
.rp-lib-pt__tx--open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rp-lib-pt__tx:focus-visible { outline: 2px solid var(--accent, var(--primary)); outline-offset: 2px; border-radius: .3rem; }
/* Review F-5: „Einordnen“ im Rahmenplan-Eimer als eigenes, gut treffbares Tap-Ziel. */
.rp-lib-bucket .bk-place { min-height: 2.5rem; padding: .35rem .8rem; }
/* Admin: Bestand einordnen (je Fach eine Zeile). */
.rp-lib-backlog__row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .3rem 0; min-width: 0; }
.rp-lib-backlog__row .btn { min-width: 0; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.rp-lib-backlog-run:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .rp-lib-komps { padding-left: .35rem; padding-right: .35rem; }
  .rp-lib-points { padding-left: .4rem; padding-right: .4rem; }
  .rp-lib-pt__nr { min-width: 2.1rem; }
  .rp-lib-pt__none, .rp-lib-sheet { margin-left: 0; }
  .rp-lib-sheet .bk-slot__right { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .rp-lib-komp > .rp-lib-komp__sum > .hier-node__arrow { transition: none; } }
/* ===================== P89 (89.2): Desktop-PWA ===================== */
/* Laptop-Hinweis im Eingang nur bei Maus/Trackpad (Handy-Layout bleibt unveraendert). */
.composer__desktip { display: none; }
@media (hover: hover) and (pointer: fine) {
  .composer__desktip { display: block; font-size: .76rem; margin: .25rem 0 0; }
}
/* Ziehen & Ablegen: sichtbarer Ablagebereich, solange eine Datei darueber schwebt. */
.composer--drop { outline: 2px dashed var(--primary); outline-offset: 3px; background: var(--primary-soft, var(--surface)); }
/* Update-Hinweis: im Seitenfluss oben in .main (kein Overlay -> blockiert keine Leiste). */
.p89-update-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem;
  margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow); font-size: .9rem; min-width: 0;
}
.p89-update-bar span { min-width: 0; overflow-wrap: anywhere; }
/* P89 (89.1): „Grafiken prüfen“ seitenweise — Karten-Container wie die Liste, „Weitere anzeigen“ volle Breite. */
.gfx-cards { display: flex; flex-direction: column; gap: .9rem; }
.gfx-count { margin: 0; font-size: .85rem; }
.gfx-more { align-self: stretch; white-space: normal; }
/* P89 (89.1, Audit M10): Hinweise/Fehler-Toasts liegen ueber allen Dialogen (vorher z 60 < Dialoge 300..9900). */
.toast { z-index: 10000; }
/* P89 (89.1, Audit M13): Mehr-Menue mit vielen Eintraegen (Admin 12+) bleibt auf kleinen Displays erreichbar. */
.more-sheet__panel { max-height: calc(100dvh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
/* P89 (89.1, Audit M12): kein waagerechter Ueberlauf bei 360 px — Quiz-Kopf und Fragen-Aktionen umbrechen,
   breite Tabellen im Lernzettel scrollen in sich statt die Seite zu verbreitern. */
.fq-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
@media (max-width: 480px) {
  .quiz-head { flex-wrap: wrap; }
  .quiz-head__r { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
}
@media (max-width: 640px) {
  .sheet .md table { display: block; overflow-x: auto; max-width: 100%; }
}
@media print { .p89-update-bar { display: none !important; } }   /* 89.7: nie im Druck/PDF-Export */
.p89-load-error { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .9rem; border-left: 4px solid #c77700; }   /* Audit M14 */
/* P89-END */
/* P83-END */