/* ==================================================================
   YOURREP,SPA view styles (Hero, RG-page, Units grid, Runner)
   ================================================================== */

/* ---- View root + cross-fade ---- */
/* Only the .main content area fades, sidebar stays stable */
.view-root{min-height:100vh}
.view-root .main{transition:opacity .22s ease, transform .22s ease}
.view-root.phase-out .main{opacity:0;transform:translateY(4px)}
.view-root.phase-in .main{opacity:1;transform:none}
/* Runner is fullscreen overlay,fade the whole thing */
.view-root.phase-out .runner{opacity:0}
.view-root .runner{transition:opacity .22s ease}

/* Make dashboard progress rows feel clickable */
.prog-row{cursor:pointer}
.prog-row:hover{background:var(--accent-soft)}

/* ---- Hero ---- */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);margin-bottom:var(--gap)}
.btn-ghost{background:var(--bg-card);color:var(--ink);border:1px solid var(--rule);padding:11px 20px;border-radius:var(--r-pill);font-family:var(--display);font-weight:700;font-size:var(--fs-s);text-transform:uppercase;letter-spacing:.04em}
.btn-ghost:hover{background:var(--bg-soft)}
@media (max-width:1100px){ .hero{grid-template-columns:1fr} }
/* Lerneinheiten-Kopf: Titel links, Filter rechts auf einer Zeile (Titelhöhe). Doppelte Klasse = höhere Spezifität als .w-head. */
.w-head.rg-filterhead{flex-wrap:nowrap;align-items:center}
.w-head.rg-filterhead > div:first-child{flex:0 1 auto;min-width:0}
.w-head.rg-filterhead .w-head-right{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.linkbtn{font-family:var(--display);font-weight:700;font-size:var(--fs-s);color:var(--accent);letter-spacing:.02em;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--r-sm)}
.linkbtn:hover{background:var(--accent-soft)}
.linkbtn svg{width:14px;height:14px}

/* ---- Hierarchical structure: Hauptkategorie → Unterkategorie → Units ---- */
.rg-structure{margin-bottom:20px}
.haupt-list{display:flex;flex-direction:column;gap:20px}
/* Kacheln ziehen nacheinander auf, genau wie die Hauptpunkte eines
   Rechtsgebiets (.gcat): 0,2 s Vorlauf, dann 30 ms je Kachel. Den Index
   liefert das Markup als --i; ohne ihn (Karteikarten-Ansicht) starten alle
   gemeinsam nach dem Vorlauf, was dort auch richtig ist. */
.haupt-list > .haupt-section{animation:rowIn .3s cubic-bezier(.3,1,.32,1) both;
  animation-delay:calc(.2s + var(--i,0)*30ms)}
@media (prefers-reduced-motion:reduce){ .haupt-list > .haupt-section{animation:none} }
@keyframes rowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.haupt-section{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:0 6px 18px -10px color-mix(in oklch,var(--ink) 20%,transparent);overflow:hidden;transition:box-shadow .15s ease,background .12s ease}
.haupt-section.is-open{box-shadow:0 14px 32px -14px color-mix(in oklch,var(--ink) 26%,transparent)}
.haupt-head{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:18px;padding:22px 26px;width:100%;text-align:left;background:transparent;cursor:pointer;transition:background .12s ease}
.haupt-head:hover{background:var(--bg-soft)}
/* Hover auf dem Kopf markiert die GANZE Karte (auch aufgeklappt), nicht nur die Kopfzeile. */
.haupt-section:has(> .haupt-head:hover){background:var(--bg-soft)}
.haupt-section:has(> .haupt-head:hover) .haupt-head:hover{background:transparent}
/* Smooth Auf-/Zuklappen über grid-template-rows (0fr → 1fr), Inhalt bleibt eingebettet. */
.collapse-anim{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.haupt-section.is-open > .collapse-anim,.subcat.is-open > .collapse-anim{grid-template-rows:1fr}
.collapse-anim-inner{overflow:hidden;min-height:0;contain:layout paint}
/* Jeder Hauptpunkt hat ein eigenes Kategorie-Icon: eingeklappt in Gebietsfarbe, aufgeklappt weiß im gefüllten Gebietsfarben-Kreis. */
.haupt-chev{width:30px;height:30px;display:grid;place-items:center;color:var(--accent);border-radius:50%;transition:background .18s ease,color .18s ease}
.haupt-chev svg{width:19px;height:19px}
.haupt-section.is-open .haupt-chev{background:var(--accent);color:#fff}
.haupt-titleblock{min-width:0}
.haupt-title{font-family:var(--display);font-weight:800;font-size:var(--fs-h);letter-spacing:-.01em;color:var(--ink);margin:0 0 4px;line-height:1.25}
.haupt-foot{display:flex;align-items:center;gap:10px;font-size:var(--fs-s);color:var(--ink-3);font-weight:600}
.haupt-dot{opacity:.5}
.haupt-right{display:flex;align-items:center;gap:14px;min-width:180px;justify-content:flex-end}

.subcat-list{display:flex;flex-direction:column;gap:10px;padding:4px 18px 18px 50px}
/* Unter-/Schema-/Definitions-Kacheln im Kachel-Stil mit Schlagschatten (wie die Lerneinheiten-Zeilen). */
.subcat{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 4px 14px -8px color-mix(in oklch,var(--ink) 22%,transparent);overflow:hidden;transition:background .15s,box-shadow .15s,transform .12s}
.subcat.is-open{background:var(--bg-soft)}
.subcat:not(.is-open):hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px color-mix(in oklch,var(--ink) 30%,transparent)}
/* Auswahl Klausuren/Minifälle unter Lerneinheiten,nutzt .rg-card, zwei zentrierte Kacheln. */
.le-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:22px;justify-content:center;padding-top:6px}
@media(max-width:680px){.le-choice-grid{grid-template-columns:minmax(0,340px)}}
@keyframes prepFade{from{opacity:0}to{opacity:1}}
@keyframes prepPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.prep-title{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.prep-sub{margin:0 0 18px;color:var(--ink-3);font-size:14px;line-height:1.5}
.prep-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.prep-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:12px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--bg-card);cursor:pointer}
.prep-row-label{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.prep-switch{flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:var(--bg-sunk);position:relative;transition:background .18s}
.prep-row.is-on .prep-switch{background:var(--accent)}
.prep-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.prep-row.is-on .prep-knob{transform:translateX(18px)}
.prep-actions{display:flex;justify-content:flex-end;gap:10px}
.prep-start{height:40px;padding:0 22px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-family:var(--display);font-weight:800;font-size:14px;cursor:pointer;transition:background .15s}
.prep-start:hover{background:color-mix(in oklch,var(--accent) 86%,#000)}
/* Vorbereitungs-Gate als erste Runner-Ansicht (mittig im Step-Shell). */
.prep-gate{max-width:440px;margin:24px auto;width:100%}
.prep-gate .prep-title{font-size:26px}
.prep-gate .prep-actions{justify-content:center}
.prep-gate .prep-start{height:46px;padding:0 32px;font-size:16px}
.subcat-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:10px 14px;text-align:left;border-radius:var(--r-md);transition:background .15s;cursor:pointer}
.subcat:not(.is-open) .subcat-head:hover{background:var(--bg-soft)}
.subcat-chev{width:24px;height:24px;color:var(--accent);border-radius:50%;display:grid;place-items:center;transition:background .18s ease,color .18s ease,transform .2s ease}
.subcat-chev svg{width:13px;height:13px}
.subcat.is-open .subcat-chev{background:var(--accent);color:#fff;transform:rotate(90deg)}
.subcat-title{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.subcat-title strong{font-family:var(--display);font-weight:800;font-size:var(--fs-b);letter-spacing:-.005em;color:var(--ink)}
.subcat-title small{font-size:var(--fs-s);color:var(--ink-3);font-weight:600;margin-top:2px}

.unit-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;padding:12px 15px;background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 4px 14px -8px color-mix(in oklch,var(--ink) 22%,transparent);text-align:left;transition:background .15s,transform .12s,box-shadow .15s;position:relative;cursor:pointer}
.unit-row:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 10px 24px -10px color-mix(in oklch,var(--ink) 30%,transparent)}
.unit-row.is-next{box-shadow:inset 0 0 0 1.5px var(--accent),0 4px 14px -8px color-mix(in oklch,var(--ink) 22%,transparent)}
.unit-row.is-done{opacity:.78}
.ur-status{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--bg-soft);color:var(--ink-3)}
.ur-status svg{width:14px;height:14px}
.unit-row.is-next .ur-status{background:var(--accent);color:var(--ink-inv)}
.unit-row.is-done .ur-status{background:var(--ok);color:var(--ink-inv)}
.ur-body .ur-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);opacity:.4}
.ur-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.ur-title{font-family:var(--display);font-weight:700;font-size:var(--fs-b);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.ur-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--fs-s);color:var(--ink-3);font-weight:600}
.ur-para{color:var(--ink-2);font-weight:700}
.ur-meta .ur-dot{color:var(--ink-3);opacity:.5;background:none;width:auto;height:auto}
.ur-diff{color:var(--ink-3);letter-spacing:normal;font-size:var(--fs-s)}
.ur-cta{color:var(--ink-3);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:color .15s, transform .15s}
.ur-cta svg{width:14px;height:14px}
.unit-row:hover .ur-cta{color:var(--accent);transform:translateX(2px)}
/* Minifall-Kacheln identisch zu Klausuren (weiß); .mini-row nur als Hook ohne Sonderfarbe */

@media (max-width:720px){
  .haupt-head{padding:16px 18px;grid-template-columns:20px 1fr auto;gap:12px}
  .haupt-title{font-size:var(--fs-h)}
  .haupt-right{min-width:auto;gap:10px}
  .subcat-list{padding:4px 14px 14px 28px}
  .fc-stackrows{padding:4px 14px 14px 24px}
}

/* Tag colors already in main stylesheet,reused */

/* ---- Unit detail + attempt history ---- */
.unit-detail-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}
.unit-detail-card{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px 24px;min-width:0}
.unit-detail-main{display:flex;flex-direction:column;gap:16px;background:var(--bg-card);border:1px solid var(--rule)}
/* Verlauf-Kachel: Task-Buttons ohne Status-Markierung neutral weiß, Hover = typisches Grün.
   Cards mit step-done/step-inprogress/step-todo behalten ihre Statusfarben (nur bei laufender Session). */
.unit-detail-main .today-task-card:not(.step-done):not(.step-inprogress):not(.step-todo){background:var(--bg-card);border-color:var(--rule)}
.unit-detail-main .today-task-card:not(.step-done):not(.step-inprogress):not(.step-todo) strong{color:var(--ink)}
.unit-detail-main .today-task-card:not(.step-done):not(.step-inprogress):not(.step-todo) .task-ico{background:var(--bg-soft);color:var(--ink-3)}
.unit-detail-main .today-task-card:not(.step-done):not(.step-inprogress):not(.step-todo):hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.unit-detail-main .today-task-card:not(.step-done):not(.step-inprogress):not(.step-todo):hover strong{color:#fff}
.unit-detail-main .today-task-card:not(.step-done):not(.step-inprogress):not(.step-todo):hover .task-ico{background:rgba(255,255,255,.22);color:#fff}
.unit-detail-main h2{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em;margin:0;color:var(--ink)}
.unit-module-strip{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px}
.unit-module-strip.is-compact{grid-template-columns:repeat(4,minmax(110px,1fr));gap:8px}
.unit-module-pill{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;min-height:50px;padding:9px 9px 9px 12px;border-radius:var(--r-md);background:var(--bg-soft);border:1px solid var(--rule);min-width:0}
.unit-module-pill.is-done{background:var(--bg-soft);border-color:var(--rule)}
.unit-module-pill.is-missing{opacity:.62}
.unit-module-pill span{font-family:var(--display);font-weight:800;font-size:var(--fs-b);letter-spacing:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.unit-module-pill strong{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);line-height:1.05;white-space:nowrap}
.module-delta{width:34px;height:34px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;align-self:center;justify-self:end;font-family:var(--display);font-style:normal;font-weight:900;font-size:var(--fs-s);line-height:1;text-align:center;background:var(--accent);color:var(--ink-inv);box-shadow:var(--shadow-sm)}
.module-delta.is-down{background:var(--danger)}
.module-delta.is-flat{background:var(--bg-card);color:var(--ink-3);border:1px solid var(--rule);box-shadow:none}
.unit-module-strip.is-compact .unit-module-pill{padding:8px 9px}
.unit-module-strip.is-compact .unit-module-pill strong{font-size:16px}
.unit-module-strip.is-compact .module-delta{width:30px;height:30px}
.unit-history-card{grid-column:1/-1}
.unit-history{display:flex;flex-direction:column;gap:14px}
.unit-history-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.unit-history-group-title{font-family:var(--display);font-weight:800;font-size:var(--fs-s);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* Einzeltypen (Quiz/Matching/Lückentext/Exam) nebeneinander als Spalten. */
.unit-history-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:start}
.unit-history-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.unit-history-head h3{font-family:var(--display);font-weight:800;font-size:var(--fs-h);margin:0;color:var(--ink)}
.unit-attempt-list{display:flex;flex-direction:column;gap:10px}
.unit-attempt-row{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:0;border-radius:var(--r-md);background:var(--bg-soft);transition:background .15s}
.unit-attempt-foot .linkbtn{transition:background .15s,color .15s}
.unit-attempt-foot .linkbtn:hover{background:var(--accent);color:var(--ink-inv)}
.unit-attempt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.unit-attempt-top > div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.unit-attempt-top strong{font-family:var(--display);font-weight:900;color:var(--ink)}
.unit-attempt-top span{font-size:var(--fs-s);font-weight:700;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.unit-attempt-score{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.unit-attempt-score strong{font-size:26px;line-height:1}
.unit-attempt-score .is-good{color:var(--ok)}
.unit-attempt-score .is-mid{color:var(--accent-2)}
.unit-attempt-score .is-low{color:var(--danger)}
.unit-attempt-score small{font-size:var(--fs-s);font-weight:800;color:var(--ink-3);white-space:nowrap}
.unit-attempt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:10px}
.unit-attempt-foot > span{font-size:var(--fs-s);font-weight:800;color:var(--ink-3)}
.unit-attempt-foot > div{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.unit-module-line{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.unit-module-line li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-pill);background:var(--bg-soft);font-size:var(--fs-s);font-weight:800;color:var(--ink-3)}
.unit-module-line span{font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.unit-module-line strong{font-family:var(--display);font-weight:900;color:var(--ink)}
.unit-attempt-foot .linkbtn{background:var(--bg-card);border-radius:var(--r-pill);padding:6px 10px}
.unit-history-empty{padding:18px;background:var(--bg-soft);border-radius:var(--r-md);font-size:var(--fs-s);font-weight:700;color:var(--ink-3);text-align:center}
.unit-history-empty.is-danger{color:var(--danger)}
.attempt-review-backdrop{position:fixed;inset:0;z-index:80;background:color-mix(in oklch,var(--ink) 26%,transparent);display:grid;place-items:center;padding:24px}
.attempt-review-card{width:min(980px,100%);max-height:min(86vh,920px);overflow:hidden;background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.attempt-review-scroll{overflow:auto;padding:22px;display:flex;flex-direction:column;gap:16px}
.attempt-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:14px}
.attempt-review-head h3{font-family:var(--display);font-weight:900;font-size:26px;margin:0;color:var(--ink)}
.attempt-review-head p{margin:5px 0 0;font-size:var(--fs-s);font-weight:800;color:var(--ink-3)}
.attempt-review-list{display:flex;flex-direction:column;gap:12px}
.attempt-review-section{display:flex;flex-direction:column;gap:9px;border:1px solid var(--rule);border-radius:var(--r-md);padding:14px;background:var(--bg-card);min-width:0}
.attempt-review-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.attempt-review-section h4{font-family:var(--display);font-weight:900;font-size:16px;margin:0;color:var(--ink)}
.attempt-review-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.attempt-review-items li{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--bg-card)}
.attempt-review-items li strong{font-size:var(--fs-s);font-weight:900;color:var(--ink);line-height:1.35}
.attempt-review-items li span{font-size:var(--fs-s);font-weight:700;color:var(--ink-2);line-height:1.35}
.attempt-review-items li.is-right{border-color:var(--ok);background:oklch(0.96 0.04 155)}
.attempt-review-items li.is-wrong{border-color:var(--danger);background:oklch(0.96 0.04 45)}
/* Lückentext-Review: voller Text mit Kontext, Lücken als farbige Chips. */
.gap-review-stack{display:flex;flex-direction:column;gap:16px}
.gap-review-block-title{font-family:var(--display);font-weight:800;font-size:var(--fs-s);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.gap-review-text{margin:0;font-size:16px;line-height:2.2;color:var(--ink);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.gap-review-chip{font-family:var(--display);font-weight:800;padding:2px 9px;border-radius:var(--r-pill);border:1.5px solid var(--rule);white-space:nowrap}
.gap-review-chip.is-right{color:oklch(0.4 0.09 155);border-color:var(--ok);background:oklch(0.96 0.04 155)}
.gap-review-chip.is-wrong{color:oklch(0.46 0.13 35);border-color:var(--danger);background:oklch(0.96 0.04 45)}
.gap-review-pair{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;vertical-align:baseline}
.gap-review-arrow{display:inline-flex;align-items:center;color:var(--ink-3);flex-shrink:0}
.attempt-review-answer{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--r-md);background:var(--bg-soft)}
.attempt-review-answer strong{font-family:var(--display);font-weight:900;color:var(--ink)}
.attempt-review-answer p{font-size:var(--fs-s);font-weight:700;color:var(--ink-2);line-height:1.45;margin:0;white-space:pre-wrap}.attempt-review-note{font-size:var(--fs-s);font-weight:700;color:var(--ink-3);line-height:1.4;margin:0}
@media (max-width:1080px){
  .unit-detail-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .unit-history-head{align-items:flex-start;flex-direction:column}
  .unit-module-strip,.unit-module-strip.is-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-attempt-top{flex-direction:column}
  .unit-attempt-score{align-items:flex-start}
}

/* ==================================================================
   RUNNER
   ================================================================== */
.runner{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;flex-direction:column;animation:run-in .25s ease}
/* Solange der Runner offen ist, darf die dahinterliegende Seite nicht scrollen: deren
   FENSTER-Scrollbalken ist Browser-Chrome und würde IMMER über den Dock-Kacheln liegen.
   Ohne ihn bleibt nur der interne run-main-Scrollbalken,und der liegt HINTER den Docks. */
html:has(.runner),body:has(.runner){overflow:hidden}
/* JS-gesetzter Scroll-Lock (StepExam, Schreibmodus),Fallback, wo :has nicht greift */
html.yr-noscroll,body.yr-noscroll{overflow:hidden!important}
/* Interner Klausur-Scrollbalken: schmal und dezent, liegt hinter den Dock-Kacheln */
.run-main::-webkit-scrollbar{width:10px}
.run-main::-webkit-scrollbar-thumb{background:var(--ink-3);opacity:.4;border-radius:5px;border:2px solid var(--bg)}
.run-main::-webkit-scrollbar-track{background:transparent}
@keyframes run-in{from{opacity:0;transform:scale(0.99)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.run-top{display:flex;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--rule);background:var(--bg-card)}
.run-close{width:30px;height:30px;border-radius:6px;background:none;border:none;color:var(--ink-3);display:grid;place-items:center;flex-shrink:0;cursor:pointer;transition:color .15s,background .15s}
.run-close:hover{background:var(--rule);color:var(--ink)}
.run-close svg{width:16px;height:16px}
/* Schließen-X sitzt nun (statt in der entfernten Kopfzeile) links in der Schritt-Leiste */
.run-close-inline{align-self:center;flex-shrink:0;margin-right:4px}
.run-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.run-title small{font-family:var(--display);font-weight:700;font-size:var(--fs-s);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.run-title strong{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.run-timer{font-family:var(--display);font-weight:800;font-size:var(--fs-s);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;background:var(--bg-soft);padding:8px 14px;border-radius:var(--r-pill)}

.run-steps-nav{display:flex;gap:8px;padding:16px 28px;background:var(--bg-card);border-bottom:1px solid var(--rule);position:relative}
.run-steps-nav.has-skip{padding-right:178px}
.run-steps-nav.has-actions{padding-right:300px}
/* Schritt-Pillen wie die „Freies Lernen"-Kachel: voll eingefärbt nach Status, Aufgaben-Icon im weißen Kreis.
   offen/noch nicht begonnen = orange-rot · in Bearbeitung = senfgelb · fertig/übersprungen = grün */
.rn-step{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);background:var(--danger);color:#fff;transition:background .32s ease,color .32s ease,transform .15s,box-shadow .15s}
button.rn-step{border:0;text-align:center;font-family:inherit;cursor:pointer}
button.rn-step:disabled{cursor:default}
button.rn-step:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
/* fertig/übersprungen = grün; ABER die aktuelle Karte ist immer gelb (gewinnt),beim Verlassen grün, beim Zurückgehen wieder gelb */
.rn-step.is-done,.rn-step.is-skipped{background:var(--ok)}
.rn-step.is-cur{background:var(--accent-2)}
.rn-dot{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;flex-shrink:0}
.rn-dot svg{width:16px;height:16px}
.rn-lbl{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.rn-lbl strong{font-family:var(--display);font-weight:800;font-size:14px;color:#fff}
.rn-lbl small{font-size:14px;color:rgba(255,255,255,.82);font-weight:600}
.run-nav-actions{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:2;display:flex;gap:8px;align-items:center}
.run-back-nav,.run-skip-nav{padding:11px 16px;border-radius:var(--r-pill);background:var(--bg-card);border:1.5px solid var(--rule);box-shadow:var(--shadow-sm);font-family:var(--display);font-weight:800;font-size:var(--fs-s);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s}
.run-skip-nav{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:2}
.run-nav-actions .run-skip-nav{position:static;right:auto;top:auto;transform:none}
.run-nav-actions .run-back-nav:hover,.run-nav-actions .run-skip-nav:hover{transform:translateY(-1px)}
.run-skip-nav:hover{background:var(--accent);color:var(--ink-inv);border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(-50% - 1px))}
.run-back-nav:hover{background:var(--bg-soft);border-color:var(--accent);box-shadow:var(--shadow-md)}
.run-nav-actions .run-skip-nav:hover{background:var(--accent);color:var(--ink-inv);border-color:var(--accent);box-shadow:var(--shadow-md)}
/* Obere Aktions-Buttons sollen sich wie die Karten-Buttons anfühlen:
   Zurück = Ghost · Überspringen = Primary (voll gefüllt, beim Hover dunkelgrün) */
.run-nav-actions .run-back-nav,.run-nav-actions .run-skip-nav{transition:background .1s,color .1s,border-color .1s,transform .1s,box-shadow .1s}
.run-nav-actions .run-back-nav{background:var(--bg-card);color:var(--ink);border:1px solid var(--rule);box-shadow:none}
.run-nav-actions .run-back-nav:hover{background:var(--bg-soft);border-color:var(--rule);box-shadow:none;transform:translateY(1px) scale(.97)}
.run-nav-actions .run-skip-nav{background:var(--accent);color:var(--ink-inv);border:1px solid var(--accent);box-shadow:none}
.run-nav-actions .run-skip-nav:hover{background:color-mix(in oklch,var(--accent) 84%,#000);color:var(--ink-inv);border-color:transparent;box-shadow:none;transform:translateY(1px) scale(.97)}
.run-nav-actions .run-back-nav:active,.run-nav-actions .run-skip-nav:active{transform:translateY(2px) scale(.95)}
@media (max-width:820px){
  .rn-step{padding:8px 10px}
  .rn-lbl small{display:none}
  .run-steps-nav.has-skip{padding-right:28px;padding-bottom:62px}
  .run-steps-nav.has-actions{padding-right:28px;padding-bottom:62px}
  .run-nav-actions{top:auto;right:28px;bottom:12px;transform:none}
  .run-skip-nav{top:auto;right:28px;bottom:12px;transform:none}
  .run-nav-actions .run-skip-nav{bottom:auto}
  .run-skip-nav:hover{transform:translateY(1px) scale(.97)}
  .run-nav-actions .run-skip-nav:hover{transform:translateY(1px) scale(.97)}
}
/* Handy: Schritt-Leiste kompakt (nur nummerierte Punkte, keine Labels),passt mit Schließen-X
   ohne Überlauf; der aktuelle Schritt steht ohnehin im Inhalt. */
@media (max-width:520px){
  .run-steps-nav .rn-lbl{display:none}
  .rn-step{gap:0}
}

.run-main{flex:1;overflow:auto;padding:40px 28px 80px;display:flex;justify-content:center;animation:fade-up .35s ease}
.run-step-shell{width:100%;max-width:820px;display:flex;flex-direction:column;gap:16px;padding-bottom:60px}
/* Handy: weniger Außenabstand → mehr Kartenbreite */
@media (max-width:560px){ .run-main{padding:18px 12px 72px} }
@media (max-width:380px){ .run-main{padding:14px 8px 64px} }
/* Klausur-Schreibmodus: Schreibspalte in DIN-A4-Breite (~800px ≈ 210 mm bei 96 dpi),
   zentriert,die Höhe wächst natürlich mit dem Text („Papierbogen-Look").
   Der seitliche Raum gehört den Docks, der Such-Kachel und den Kommentar-Flyouts. */
.run-step-shell:has(.exam-writing-layout){max-width:800px}
.run-step{width:100%;display:flex;flex-direction:column;gap:18px}
.step-progress small{font-family:var(--display);font-weight:800;font-size:var(--fs-s);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.step-q{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty;line-height:1.3}
.step-sub{color:var(--ink-2);font-size:16px;margin-top:-8px}
.step-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;margin-bottom:40px;flex-wrap:wrap}
.step-foot small{font-family:var(--display);font-weight:700;font-size:var(--fs-s);color:var(--ink-3)}
.dots{display:flex;gap:6px}
.dots span{width:22px;height:5px;border-radius:var(--r-pill);background:var(--bg-sunk);transition:background .2s}
.dots span.done{background:var(--ok)}
.dots span.cur{background:var(--accent)}
.dots span.wrong{background:var(--danger)}

/* Quiz */
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.quiz-opt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;background:var(--bg-card);border:1.5px solid var(--rule);border-radius:var(--r-md);text-align:left;font-size:16px;transition:all .15s}
.quiz-opt:not(:disabled):hover{border-color:var(--accent);background:var(--accent-soft)}
.quiz-opt .opt-letter{width:30px;height:30px;border-radius:8px;background:var(--bg-soft);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink-2)}
.quiz-opt.is-right{border-color:var(--ok);background:oklch(0.96 0.04 155)}
.quiz-opt.is-right .opt-letter{background:var(--ok);color:var(--ink-inv)}
.quiz-opt.is-wrong{border-color:var(--danger);background:oklch(0.96 0.04 45)}
.quiz-opt.is-wrong .opt-letter{background:var(--danger);color:var(--ink-inv)}
.quiz-opt.is-muted{opacity:.5}
.opt-ico{width:22px;height:22px;display:grid;place-items:center}
.opt-ico svg{width:18px;height:18px}
.quiz-opt.is-right .opt-ico{color:var(--ok)}
.quiz-opt.is-wrong .opt-ico{color:var(--danger)}
.quiz-explain{padding:16px 18px;border-radius:var(--r-md);font-size:16px;line-height:1.55}
.quiz-explain.ok{background:oklch(0.96 0.04 155);color:oklch(0.35 0.08 155)}
.quiz-explain.ko{background:oklch(0.96 0.04 45);color:oklch(0.4 0.1 45)}
.quiz-explain strong{font-family:var(--display);font-weight:800;margin-right:4px}
/* Inline-Quiz im Skript-Fließtext,nutzt das Quiz-Design, etwas kompakter */
.skript-quiz{margin:16px 0 22px}
.skript-quiz-q{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);margin:0 0 12px}
.skript-quiz .quiz-opts{gap:9px}
.skript-quiz .quiz-opt{border-radius:12px;padding:13px 15px;font-size:16px}
.skript-quiz .quiz-opt:not(:disabled):hover{border-color:var(--rule);background:var(--bg-soft)}
.skript-quiz .quiz-opt .opt-letter{width:28px;height:28px;border-radius:8px;font-size:14px}
.skript-quiz .quiz-explain{margin-top:11px;padding:13px 15px}
/* Fortschritts-Lernpfad rechts neben dem Skript */
.skript-rail{position:absolute;top:0;left:0;width:0;height:100%;pointer-events:none}
.skript-rail-dot{position:absolute;left:0;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:40px;background:var(--bg-soft);color:var(--ink-3);border:3px solid var(--rule);transition:background .35s,border-color .35s,color .35s}
.skript-rail-dot.is-correct{background:#2e7d52;border-color:#2e7d52;color:#fff}
.skript-rail-dot.is-wrong{background:#c0392b;border-color:#c0392b;color:#fff}
.skript-rail-line{position:absolute;left:0;transform:translateX(-50%);width:2px;background:var(--rule)}
@media(max-width:1240px){.skript-rail{display:none}}
/* Skript-Zusammenfassung (schreiben/sprechen wie bei Karteikarten) */
/* Nach der Bewertung ist die Zusammenfassung FERTIG: Das Eingabefeld verschwindet (man kann keine
   zweite Sprachnachricht hinterherschicken), der abgeschickte Text bleibt als Zitat stehen, und aus
   dem Absende-Pfeil wird der Abschluss-Knopf, wie nach einer Klausur oder einem Minifall. */
/* Graue Kachel wie im Freien Lernen, kein Zitatstrich. Der abgeschickte Text ist keine fremde
   Quelle, die man zitiert, sondern die eigene Antwort: eine Karte, die daliegt. */
.skript-summary-mine{margin:12px 4px 0;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;
  background:var(--bg-soft);box-shadow:0 8px 22px -18px color-mix(in oklch,var(--ink) 30%,transparent);
  font-size:16px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap}
/* Abbruch-Fenster mit DREI Wegen. `.btn` allein hat keinen Hintergrund, der mittlere Knopf sah
   deshalb aus wie ein loser Text. `btn-quiet` gibt ihm einen sichtbaren, aber leisen Körper. */
.skript-exit-ctas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.skript-exit-gap{flex:1 1 auto}
.btn-quiet{background:var(--bg-soft);color:var(--ink-2);border:1px solid var(--rule)}
.btn-quiet:hover{background:color-mix(in oklch,var(--ink) 7%,var(--bg-soft));transform:translateY(1px);box-shadow:0 0 0 transparent}
@media(max-width:520px){
  .skript-exit-ctas{flex-direction:column-reverse;align-items:stretch}
  .skript-exit-ctas .btn{width:100%;justify-content:center}
  .skript-exit-gap{display:none}
}
.skript-summary-fin{margin:18px 0 0;display:flex;justify-content:flex-end}
.skript-summary-fin .btn{min-width:200px;justify-content:center}
@media(max-width:640px){
  .skript-summary-fin{justify-content:stretch}
  .skript-summary-fin .btn{width:100%}
}

.skript-summary{margin:28px 0 8px;--accent:oklch(0.50 0.075 180)}
.skript-summary-h{font-family:var(--display);font-weight:800;font-size:20px;margin:0 0 4px}
.skript-summary-sub{margin:0 0 4px;font-size:16px;color:var(--ink-3);line-height:1.5}
.skript-summary-fb{margin:14px 4px 0;padding:14px 16px;border-radius:12px;font-size:16px;line-height:1.6;color:var(--ink);transition:background .35s ease}
.skript-summary-fb strong{font-family:var(--display);font-weight:800;margin-right:4px}
.skript-summary-fb.is-pass{background:oklch(0.96 0.04 155);color:oklch(0.35 0.08 155)}
.skript-summary-fb.is-pass strong{color:oklch(0.3 0.09 155)}
.skript-summary-fb.is-partial{background:rgba(234,179,8,.13);color:#b8860b}
.skript-summary-fb.is-partial strong{color:#b8860b}
.skript-summary-fb.is-fail{background:oklch(0.96 0.04 45);color:oklch(0.4 0.1 45)}
.skript-summary-fb.is-fail strong{color:oklch(0.38 0.12 40)}
.skript-summary-fb.is-err{background:rgba(192,57,43,.08);color:#c0392b}
.skript-summary .fcr-textarea,.skript-summary .fcr-wave,.skript-summary .fcr-transcribing{min-height:60px;padding-top:14px;padding-bottom:14px}
.run-step-quiz{position:relative;z-index:1;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;padding:34px 36px;gap:22px;box-shadow:0 16px 36px -18px oklch(0.45 0.03 200 / .32), 0 3px 10px -6px oklch(0.45 0.03 200 / .16)}
@keyframes qFadeOut{from{opacity:1}to{opacity:0}}
@keyframes qFadeIn{from{opacity:0}to{opacity:1}}
.run-step-quiz .step-progress small{color:var(--ink-3)}
.run-step-quiz .step-q{font-size:20px;line-height:1.35}
.run-step-quiz .quiz-opt{border-radius:15px;padding:18px 20px;font-size:16px;border-color:var(--rule)}
/* Badge standardmäßig GRAU (neutral),erst beim Hover grün; Antwort-Zustände (richtig/falsch) überschreiben weiter unten */
.run-step-quiz .quiz-opt .opt-letter{width:38px;height:38px;border-radius:11px;background:var(--bg-soft);color:var(--ink-2);font-size:16px}
.run-step-quiz .quiz-opt:not(:disabled):hover .opt-letter{background:var(--accent-soft);color:var(--accent)}
.run-step-quiz .quiz-opt.is-right .opt-letter{background:var(--ok);color:var(--ink-inv)}
.run-step-quiz .quiz-opt.is-wrong .opt-letter{background:var(--danger);color:var(--ink-inv)}
.run-step-quiz .step-foot{margin-top:6px;margin-bottom:0}
/* Lückentext in der Karte: eigener Rahmen/Hintergrund weg (die Karte ist der Container) */
.run-step-quiz .gap-text{padding:0;background:transparent;border:0;border-radius:0;font-size:16px;line-height:1.9}
@media (max-width:560px){
  .run-step-quiz{padding:22px 18px;border-radius:16px;gap:18px}
  .run-step-quiz .step-q{font-size:20px}
  /* Mehrzeilige Antworten: Badge oben statt mittig (liest sauberer) + kompakter */
  .quiz-opt{align-items:start;gap:11px;padding:14px 14px}
  .quiz-opt .opt-letter{margin-top:1px}
  .run-step-quiz .quiz-opt .opt-letter{width:32px;height:32px;font-size:16px}
}
@media (max-width:380px){
  .run-step-quiz .step-q,.sw-content.run-step-quiz .step-q{font-size:20px}
  .quiz-opt{font-size:16px;padding:13px 12px}
}
.gap-text{padding:24px;background:var(--bg-card);border:1.5px solid var(--rule);border-radius:var(--r-md);font-size:16px;line-height:2;color:var(--ink);font-family:var(--sans);text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
.gap-sel-wrap{display:inline-flex;align-items:center;gap:4px;margin:0 3px;vertical-align:baseline}
.gap-correct-hint{font-family:var(--display);font-size:14px;font-weight:800;color:var(--danger)}
/* Lücken-Dropdown im Karteikarten-Stil (Prototyp): Pille + Mini-Karten-Menü mit Pfeil nach oben */
.gap-dd{position:relative;display:inline-flex;vertical-align:middle;margin:0}
.gap-dd-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:120px;max-width:340px;height:38px;padding:0 16px;border:1px solid var(--rule);border-radius:12px;background:var(--bg-card);color:var(--ink-3);font-family:var(--display);font-weight:750;font-size:16px;line-height:1.2;letter-spacing:-.01em;cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.gap-dd-btn:hover:not(:disabled){transform:translateY(-1px);border-color:color-mix(in oklch,var(--accent) 30%,var(--rule));box-shadow:0 10px 22px -12px color-mix(in oklch,var(--ink) 34%,transparent)}
.gap-dd.is-open .gap-dd-btn{color:var(--accent);border-color:color-mix(in oklch,var(--accent) 55%,var(--rule));box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 11%,transparent),0 14px 30px -14px color-mix(in oklch,var(--ink) 34%,transparent);transform:translateY(-2px)}
.gap-dd-btn:disabled{cursor:default}
.gap-dd-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gap-dd-ph{color:var(--ink-3);font-weight:750}
.gap-dd-btn.is-filled{color:var(--ink);font-weight:800}
.gap-dd-caret{flex-shrink:0;color:var(--accent);opacity:.8;transition:transform .2s ease}
.gap-dd.is-open .gap-dd-caret{transform:rotate(90deg)}
.gap-dd-btn.is-right{background:oklch(0.96 0.04 155);border-color:color-mix(in oklch,var(--ok) 45%,var(--rule));color:oklch(0.35 0.08 155)}
.gap-dd-btn.is-wrong{background:oklch(0.96 0.04 45);border-color:color-mix(in oklch,var(--danger) 45%,var(--rule));color:oklch(0.4 0.1 45)}
.gap-dd-btn.is-right .gap-dd-caret,.gap-dd-btn.is-wrong .gap-dd-caret{opacity:0}
.gap-dd-menu{z-index:1000;display:flex;flex-direction:column;gap:2px;padding:7px;background:var(--bg-card);border:1px solid var(--rule);border-radius:16px;box-shadow:0 26px 60px -18px color-mix(in oklch,var(--ink) 42%,transparent),0 8px 18px -10px color-mix(in oklch,var(--ink) 26%,transparent);overflow:visible;box-sizing:border-box}
.gap-dd-menu::before{content:"";position:absolute;top:-7px;left:var(--gap-dd-arrow,50%);width:13px;height:13px;background:var(--bg-card);border-left:1px solid var(--rule);border-top:1px solid var(--rule);transform:translateX(-50%) rotate(45deg)}
.gap-dd-menu.is-up::before{top:auto;bottom:-7px;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.gap-dd-menu:not(.is-up){animation:gapddIn .2s cubic-bezier(.16,1,.3,1)}
@keyframes gapddIn{from{opacity:0;transform:translateY(-8px) scale(.965)}to{opacity:1;transform:none}}
.gap-dd-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;text-align:left;padding:0 13px;border:0;border-radius:11px;background:transparent;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .16s ease,color .16s ease,transform .16s ease}
.gap-dd-opt:hover:not(.is-sel){background:color-mix(in oklch,var(--accent) 9%,transparent);color:var(--accent);transform:translateX(2px)}
.gap-dd-opt.is-sel{background:color-mix(in oklch,var(--accent) 13%,transparent);color:var(--accent);font-weight:850}
.gap-dd-sel-tag{flex:0 0 auto;font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.gap-dd-opt.is-clear{color:var(--ink-3);font-weight:700}
.gap-dd-opt.is-clear:hover{color:var(--ink-2);background:var(--bg-soft);transform:none}

/* ───────── Wisch-Karten-Deck (SwipeDeck) ───────── */
.sw-stage{position:relative;width:100%;min-height:300px;perspective:1800px;transform-style:preserve-3d;user-select:none;touch-action:pan-y;margin-bottom:6px}
.sw-deck-shadow{position:absolute;left:5%;right:5%;bottom:-20px;height:48px;border-radius:999px;background:color-mix(in oklch,var(--ink) 14%,transparent);filter:blur(24px);transform:scaleX(.92);pointer-events:none}
.sw-card{position:absolute;top:0;left:0;right:0;border-radius:20px;background:var(--bg-card);border:1px solid var(--rule);overflow:hidden;transform-style:preserve-3d;box-shadow:0 14px 34px -18px color-mix(in oklch,var(--ink) 26%,transparent);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .42s ease,box-shadow .32s ease,filter .4s ease}
.sw-stage[data-animating] .sw-card{transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .42s ease,box-shadow .32s ease,filter .4s ease,height .45s cubic-bezier(.16,1,.3,1)}
.sw-card[data-noanim]{transition:none}
.sw-card[data-front]{box-shadow:0 34px 76px -30px color-mix(in oklch,var(--ink) 42%,transparent),0 9px 22px -12px color-mix(in oklch,var(--ink) 22%,transparent)}
.sw-stage[data-inmotion] .sw-card{will-change:transform,opacity,filter}
.sw-edge{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(180deg,transparent,color-mix(in oklch,var(--ink) 5%,transparent));opacity:.6;pointer-events:none;z-index:5}
/* Zähler + Fortschritt + Buttons liegen AUSSERHALB der Karten (Bühne dazwischen), wie im Prototyp */
.sw-step{display:flex;flex-direction:column}
.sw-chrome{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px;padding:0 4px}
.sw-chrome .step-progress{flex:0 0 auto}
.sw-chrome .step-progress small{font-family:var(--display);font-weight:800;font-size:var(--fs-s);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.sw-chrome .dots{flex:1 1 120px;display:flex;gap:5px;min-width:0;justify-content:flex-end}
.sw-chrome .dots span{flex:1 1 8px;width:auto;max-width:30px;min-width:0;height:6px}
.sw-controls{display:flex;align-items:center;gap:10px;margin-top:18px;padding:0 4px}
.sw-controls .btn-primary{margin-left:auto}
@media (max-width:560px){ .sw-controls{padding:0 2px} .sw-controls .btn{flex:1} }
/* Inhalt nutzt die bestehende run-step-quiz-Optik, aber OHNE eigene Karten-Hülle (.sw-card ist die Karte) */
.sw-content.run-step-quiz{position:static;background:transparent;border:0;box-shadow:none;border-radius:0;padding:30px 34px;gap:20px;z-index:auto}
@media (max-width:560px){
  .sw-content.run-step-quiz{padding:20px 16px;gap:15px}
  .sw-stage{perspective:1200px}
  .sw-chrome{margin-bottom:12px;gap:8px;padding:0 2px}
  .sw-controls{margin-top:14px}
  .sw-chrome .dots{gap:4px}
  .sw-chrome .dots span{height:5px}
}
@media (prefers-reduced-motion:reduce){
  .sw-card{transition:opacity .16s linear,box-shadow .16s linear}
}

/* Exam */
.exam-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.exam-title-row .step-q{flex:1}
.exam-title-row .run-skip-nav{position:static;transform:none;flex-shrink:0;background:var(--accent);color:var(--ink-inv);border-color:var(--accent);box-shadow:var(--shadow-md);transition:background .1s,color .1s,border-color .1s,transform .1s,box-shadow .1s}
.exam-title-row .run-skip-nav:hover{transform:translateY(1px) scale(.97);background:color-mix(in oklch,var(--accent) 84%,#000);border-color:transparent;box-shadow:none}
.exam-title-row .run-skip-nav:active{transform:translateY(2px) scale(.95)}
.run-skip-nav.is-sim-active{background:var(--danger);color:var(--ink-inv);border-color:var(--danger);box-shadow:var(--shadow-md)}
.run-skip-nav.is-sim-active:hover{background:color-mix(in oklch,var(--danger) 84%,#000);border-color:transparent;transform:translateY(1px) scale(.97);box-shadow:none}
.run-skip-nav.is-sim-active:active{transform:translateY(2px) scale(.95)}
.exam-writing-layout{position:relative}
/* Beim Aufrufen der Klausur blenden die Boxen nacheinander sanft ein (professionelle Staffelung) */
@keyframes examBoxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.exam-writing-layout>.exam-box,
.exam-writing-layout>.exam-q-card,
.exam-writing-layout>.step-foot{animation:examBoxIn .95s cubic-bezier(.22,1,.3,1) both}
.exam-writing-layout>.exam-box{animation-delay:.08s}
.exam-writing-layout>.exam-q-card{animation-delay:.34s}
.exam-writing-layout>.step-foot{animation-delay:.62s}
/* Frage + Label bekommen eine eigene, sanfte Wechsel-Animation (Re-Mount per key bei Fragenwechsel) */
@keyframes examFrageSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.exam-q-card .exam-frage,.exam-q-card .exam-editor-head{animation:examFrageSwap .55s cubic-bezier(.22,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.exam-writing-layout>*{animation-duration:.001s!important}}
/* ---- Klausur-Docks (per React-Portal an document.body): echte vertikale Kacheln,
   die an der Fensterkante andocken. Rechts: Timer + Markierfarben (untereinander)
   + Kommentare. Links: Gesetzessuche, ein-/ausklappbar. ---- */
/* Gesetzessuche als EIGENSTÄNDIGE Kachel (wie die Farbkachel rechts): mit Abstand zum
   Rand, voller Rahmen, abgerundet, Schatten. Breite wird per JS gesetzt (füllt den
   linken Gutter mit je 16px Rand → Abstand links==rechts). Kein Einklappen mehr. */
.exam-law-dock{position:fixed;top:232px;left:16px;z-index:70;display:flex;align-items:flex-start}
.exam-law-dock-body{width:330px;max-width:calc(100vw - 80px);background:var(--bg-card);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--shadow-sm);padding:16px;box-sizing:border-box}
.exam-law-dock-body .tb-search{width:100%;min-width:0;margin:0}
/* Horizontale Werkzeug-Leiste direkt unter der Schritt-Pille („1 Klausur"): links die
   Gesetzessuche, rechts Markierfarben + Mülltonne + Uhr. Per Portal in .runner,
   per flex-order zwischen Schritt-Leiste und Inhalt einsortiert. */
.runner > .run-top{order:0}
.runner > .run-steps-nav{order:1}
.runner > .exam-toolbar{order:2}
.runner > .run-main{order:3}
.exam-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:10px 28px;background:var(--bg-card);border-bottom:1px solid var(--rule);position:relative;z-index:60}
.exam-toolbar-tools{display:flex;align-items:center;gap:16px;margin-left:auto}
.exam-toolbar-tools .exam-hl-palette{display:flex;flex-direction:row;align-items:center;gap:12px;width:auto;margin:0;position:static}
/* Alle Tool-Kreise exakt so hoch wie die Such-Pille (54px) → gleicher Abstand oben/unten. */
.exam-toolbar-tools .exam-hl-swatch-wrap,
.exam-toolbar-tools .exam-hl-clear{flex:0 0 auto;width:54px;height:54px;max-width:54px;aspect-ratio:auto}
.exam-toolbar-tools .exam-hl-clear svg{width:24px;height:24px}
/* ── Rechts-Assistent (Chat) ──────────────────────────────────────────────
   Der Knopf dazu steht bei .yr-berater-fab: EINE Optik fuer beide Rollen. */
.la-flyout{top:calc(100% + 18px);padding:0;border:1px solid var(--rule);border-radius:20px;box-shadow:0 18px 44px -20px color-mix(in oklch,var(--ink) 28%,transparent),0 4px 12px -8px color-mix(in oklch,var(--ink) 16%,transparent);overflow:hidden}
.la-chat{display:flex;flex-direction:column;min-height:0;height:100%}
.la-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid color-mix(in oklch,var(--rule) 70%,transparent)}
.la-head strong{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)}
.la-close{flex:0 0 auto}
.la-sheet .la-chat{height:62vh}
/* Lern-Assistent, der Knopf unten rechts (bis zum 04.09.2026 „Lernberater").
   Bewusst anders als der Rechts-Assistent in der Klausur: der sitzt in der
   Werkzeugleiste und zeigt dort nur Normen, Schemata und Definitionen. Dieser
   hier kennt die eigenen Ergebnisse. */
.yr-berater-fab{position:fixed;right:24px;bottom:24px;z-index:60;width:68px;height:68px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);background:var(--bg-card);color:var(--accent);cursor:pointer;font-family:var(--display);font-weight:700;font-size:33px;line-height:1;box-shadow:0 12px 28px -12px color-mix(in oklch,var(--ink) 42%,transparent);transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease}
.yr-berater-fab span{display:block;transform:translateY(-1px)}
.yr-berater-fab:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px color-mix(in oklch,var(--ink) 50%,transparent)}
.yr-berater-panel{position:fixed;right:24px;bottom:24px;z-index:60;width:min(400px,calc(100vw - 48px));height:min(560px,calc(100vh - 72px));background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;overflow:hidden;box-shadow:0 18px 44px -20px color-mix(in oklch,var(--ink) 28%,transparent),0 4px 12px -8px color-mix(in oklch,var(--ink) 16%,transparent)}
/* Waehrend geschrieben wird, weicht der Lern-Assistent, an seiner Stelle steht
   dann der Assistent mit der engeren Befugnis (is-klausur). Die Marke setzt
   StepExam; ohne die Ausnahme staenden zwei Knoepfe mit verschiedenen Regeln
   uebereinander. */
body[data-yr-klausur="1"] .yr-berater-fab:not(.is-klausur),
body[data-yr-klausur="1"] .yr-berater-panel:not(.is-klausur){display:none}
/* Ausgegraut statt versteckt: dass es den Assistenten gibt, soll sichtbar
   bleiben, nur eben nicht in diesem Tarif. */
.yr-berater-fab.is-gesperrt{color:var(--ink-3);opacity:.55}
.yr-berater-fab.is-gesperrt:hover{transform:none;box-shadow:0 12px 28px -12px color-mix(in oklch,var(--ink) 42%,transparent)}
/* Kein position:relative noetig, der Knopf ist bereits fixed und damit selbst
   der Bezugsrahmen. Eine zweite position-Angabe wuerde die erste ueberschreiben
   und den Knopf aus der Ecke reissen. */
.yr-berater-schloss{position:absolute;right:-1px;bottom:-1px;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--bg-sunk);color:var(--ink-3);box-sizing:border-box}

/* --- Der Knopf wird zum Fenster ------------------------------------------
   Kein Ein- und Ausblenden zweier Dinge, sondern EINE Bewegung: das Fenster
   waechst aus der Ecke, in der der Knopf steht, und faellt beim Schliessen
   dorthin zurueck. Deshalb sitzt der Ursprung unten rechts und der
   Startversatz ist genau der Abstand zwischen beiden Ecken (70px, siehe
   bottom:94px gegen bottom:24px). Verschiebt man eines von beidem, muss der
   Versatz mit.
   Das Fenster kommt langsamer, als es geht, was erscheint, will gesehen
   werden; was verschwindet, soll nicht aufhalten. Der Inhalt kommt eine
   Spur spaeter als der Rahmen: das verdeckt die Verzerrung, die das
   Skalieren am Text sonst sichtbar machen wuerde. */
@keyframes yr-berater-auf{
  from{opacity:0;border-radius:200px;transform:scale(.17)}
  45%{opacity:1}
  70%{border-radius:20px}
  to{opacity:1;border-radius:20px;transform:scale(1)}
}
@keyframes yr-berater-fort{
  from{opacity:1;border-radius:20px;transform:scale(1)}
  45%{opacity:1;border-radius:20px}
  to{opacity:0;border-radius:200px;transform:scale(.17)}
}
@keyframes yr-berater-inhalt{from{opacity:0}to{opacity:1}}
/* Kurzes Zusammenziehen, bevor der Knopf geht, die Bewegung holt Luft. */
@keyframes yr-fab-weg{
  from{opacity:1;transform:scale(1)}
  28%{opacity:1;transform:scale(.92)}
  to{opacity:0;transform:scale(.48)}
}
@keyframes yr-fab-her{
  from{opacity:0;transform:scale(.48)}
  to{opacity:1;transform:scale(1)}
}
.yr-berater-panel.is-auf,.yr-berater-panel.is-zu{transform-origin:100% 100%;will-change:transform,opacity}
.yr-berater-panel.is-auf{animation:yr-berater-auf .34s cubic-bezier(.2,0,0,1) both}
.yr-berater-panel.is-zu{animation:yr-berater-fort .22s cubic-bezier(.3,0,1,1) both}
.yr-berater-panel.is-auf .la-chat{animation:yr-berater-inhalt .2s cubic-bezier(.2,0,0,1) .14s both}
.yr-berater-panel.is-zu .la-chat{animation:yr-berater-inhalt .09s cubic-bezier(.3,0,1,1) reverse both}
.yr-berater-fab.is-weg{animation:yr-fab-weg .16s cubic-bezier(.3,0,1,1) both;pointer-events:none}
.yr-berater-fab.is-weg:hover{transform:scale(.48)}
.yr-berater-fab.is-zurueck{animation:yr-fab-her .22s cubic-bezier(.2,0,0,1) .11s both;pointer-events:none}
/* Nicht jeder will Bewegung. Die Dauer geht auf null, der Ablauf bleibt,
   das Ende-Ereignis traegt den Zustandswechsel und muss weiter feuern. */
@media (prefers-reduced-motion:reduce){
  .yr-berater-panel.is-auf,.yr-berater-panel.is-zu,
  .yr-berater-panel.is-auf .la-chat,.yr-berater-panel.is-zu .la-chat,
  .yr-berater-fab.is-weg,.yr-berater-fab.is-zurueck{animation-duration:1ms!important;animation-delay:0ms!important}
}
@media (max-width:640px){
  .yr-berater-fab{right:16px;bottom:16px;width:60px;height:60px;font-size:29px}
  /* Gleiche Ecke wie der Knopf, deshalb gelten dieselben Bildfolgen. */
  .yr-berater-panel{right:16px;left:16px;bottom:16px;width:auto;height:min(74vh,calc(100vh - 40px))}
}
.la-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px;padding:16px 16px 10px}
.la-empty{margin:auto;text-align:center;max-width:340px;padding:18px 4px;color:var(--ink-3)}
.la-empty strong{display:block;font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:6px}
.la-msg{display:flex;flex-direction:column;gap:6px;max-width:88%}
.la-msg.is-user{align-self:flex-end;align-items:flex-end}
.la-msg.is-bot{align-self:flex-start;align-items:flex-start}
.la-bubble{padding:11px 14px;border-radius:15px;font-size:16px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.la-msg.is-user .la-bubble{background:var(--accent);color:var(--ink-inv);border-bottom-right-radius:5px}
.la-msg.is-bot .la-bubble{background:var(--bg-soft);color:var(--ink);border-bottom-left-radius:5px;white-space:normal}
/* Gerenderte Antwort: Überschriften, Listen, Fließtext, schlichte Tabellen (kein rohes Markdown mehr) */
.la-bubble .la-p{margin:0 0 8px}
.la-bubble .la-p:last-child{margin-bottom:0}
.la-bubble .la-h{font-weight:800;font-size:15px;margin:13px 0 6px;color:var(--ink)}
.la-bubble .la-h:first-child{margin-top:0}
.la-bubble .la-ul,.la-bubble .la-ol{margin:2px 0 9px;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.la-bubble .la-ul{list-style:disc}
.la-bubble .la-ol{list-style:decimal}
.la-bubble .la-ul li::marker{color:var(--accent)}
.la-bubble .la-ol li::marker{color:var(--ink-3);font-weight:700}
.la-bubble strong{font-weight:800}
.la-bubble .la-table{display:flex;flex-direction:column;gap:1px;margin:5px 0 10px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--rule)}
.la-bubble .la-trow{display:flex;gap:12px;padding:7px 11px;background:var(--bg-card);font-size:14.5px}
.la-bubble .la-trow.is-head{font-weight:800;background:color-mix(in oklch,var(--accent) 8%,var(--bg-card))}
.la-bubble .la-trow span{flex:1;min-width:0}
.la-bubble .la-trow span:first-child{flex:0 0 42%;font-weight:600;color:var(--ink)}
.la-src{display:flex;flex-wrap:wrap;gap:6px}
.la-src-chip{font-size:14px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-3);background:var(--bg-card)}
.la-src-chip.is-schema{color:var(--accent);border-color:color-mix(in oklch,var(--accent) 35%,var(--rule));background:var(--accent-soft)}
.la-src-chip.is-def{color:var(--accent-2,#9a7b1f);border-color:color-mix(in oklch,var(--accent-2,#caa53a) 38%,var(--rule));background:color-mix(in oklch,var(--accent-2,#caa53a) 14%,transparent)}
.la-typing{display:inline-flex;gap:5px;align-items:center}
.la-typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.5;animation:laBlink 1.1s infinite ease-in-out}
.la-typing span:nth-child(2){animation-delay:.18s}
.la-typing span:nth-child(3){animation-delay:.36s}
@keyframes laBlink{0%,80%,100%{transform:scale(.7);opacity:.35}40%{transform:scale(1);opacity:.9}}
.la-err{align-self:center;font-size:14px;color:var(--danger,#c0392b);background:color-mix(in oklch,var(--danger,#c0392b) 10%,transparent);padding:7px 12px;border-radius:10px}
.la-compose{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid color-mix(in oklch,var(--rule) 70%,transparent)}
.la-compose input{flex:1 1 auto;min-width:0;height:42px;padding:0 15px;border:1px solid var(--rule);border-radius:12px;background:var(--bg-soft);font-family:var(--sans);font-size:16px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.la-compose input:focus{border-color:var(--accent);background:var(--bg-card);box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 16%,transparent)}
/* Mikrofon links neben dem Feld. Waehrend der Aufnahme wird aus dem Mikrofon
   ein Stopp-Quadrat, derselbe Knopf, andere Bedeutung, sichtbar rot. */
.la-mic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);background:var(--bg-card);color:var(--ink-2);cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s,transform .15s}
.la-mic svg{width:19px;height:19px}
.la-mic:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.la-mic:active:not(:disabled){transform:scale(.96)}
.la-mic:disabled{opacity:.4;cursor:not-allowed}
.la-mic.is-on{background:oklch(0.55 0.20 25);border-color:oklch(0.55 0.20 25);color:#fff;animation:la-mic-puls 1.5s ease-in-out infinite}
/* Ein Puls, kein Blinken: er zeigt, dass etwas laeuft, ohne den Blick zu ziehen. */
@keyframes la-mic-puls{
  0%,100%{box-shadow:0 0 0 0 color-mix(in oklch,oklch(0.55 0.20 25) 42%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
}
@media (prefers-reduced-motion:reduce){.la-mic.is-on{animation:none}}
.la-diktat{flex:0 0 auto;padding:8px 14px;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ink-3);border-top:1px solid color-mix(in oklch,var(--rule) 70%,transparent)}
.la-diktat.is-err{color:oklch(0.55 0.20 25)}
.la-diktat + .la-compose{border-top:0}
.la-send{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:50%;background:var(--accent);color:var(--ink-inv);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,background .15s,opacity .15s}
.la-send svg{width:17px;height:17px}
.la-send:hover:not(:disabled){transform:translateX(2px);box-shadow:var(--shadow-md);background:color-mix(in oklch,var(--accent) 86%,var(--accent-2))}
.la-send:active:not(:disabled){transform:scale(.96)}
.la-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
/* Schließen-Button im Flyout: bei Hover rot mit weißer Schrift */
.law-close-btn{transition:background .15s,border-color .15s,color .15s}
.law-close-btn:hover{background:#dc2626;border-color:#dc2626;color:#fff}
/* Kommentare als Randnotizen: jede Box sitzt fix auf Höhe ihrer Markierung im Gutter
   zwischen Textspalte und Farbleiste. Feste Höhe → deterministische Kollisionsstapelung. */
.exam-cmt-leads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:54;overflow:visible}
.exam-cmt-margin{position:absolute;z-index:55;height:100px;box-sizing:border-box;display:flex;flex-direction:column;border:2px solid var(--rule);border-radius:10px;background:var(--bg-card);padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,.10);transition:box-shadow .12s}
.exam-cmt-margin.is-active{box-shadow:0 0 0 3px color-mix(in oklch, var(--ink) 22%, transparent),0 8px 22px rgba(0,0,0,.14)}
.exam-cmt-margin .exam-cmt-box-head{margin-bottom:6px}
.exam-cmt-margin .exam-cmt-text{flex:1;min-height:0;resize:none}
.exam-answer-wrap{position:relative}
.exam-fmt-btn{width:34px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--rule);border-radius:var(--r-sm);background:var(--bg-card);color:var(--ink-2);font-family:var(--display);font-size:16px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.exam-fmt-btn:hover{background:var(--accent);color:var(--ink-inv);border-color:var(--accent)}
.exam-fmt-btn b,.exam-fmt-btn i{font-weight:800}
/* ── Gesetzessuche ── */
.exam-sv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.exam-sv-head .eyebrow{margin-bottom:0}
.exam-law-panel{position:fixed;left:0;top:0;width:300px;height:100vh;background:var(--bg-card);border-right:1.5px solid var(--rule);box-shadow:var(--shadow-md);z-index:40;display:flex;flex-direction:column;overflow:hidden;transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.exam-law-panel.is-open{transform:translateX(0)}
.exam-law-panel-head{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.exam-law-search{width:100%;border:1.5px solid var(--rule);border-radius:var(--r-md);padding:9px 12px;font:inherit;background:var(--bg-soft);color:var(--ink);font-size:16px;outline:none;transition:border-color .15s}
.exam-law-search:focus{border-color:var(--accent)}
.exam-law-results{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.exam-law-result{padding:10px 12px;border-radius:var(--r-md);border:1.5px solid var(--rule);background:var(--bg-soft);cursor:pointer;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:4px}
.exam-law-result:hover{border-color:var(--accent);background:var(--accent-soft)}
.exam-law-result strong{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink)}
.exam-law-result small{font-size:14px;color:var(--ink-3)}
.exam-law-abbr{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:var(--r-pill);padding:2px 7px;width:fit-content}
.exam-law-empty{font-size:14px;color:var(--ink-3);line-height:1.6;padding:4px 0;margin:0}
.exam-law-detail{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px}
.exam-law-detail h4{font-family:var(--display);font-weight:900;font-size:16px;color:var(--ink);margin:4px 0 0}
.exam-law-text{white-space:pre-wrap;font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink-2);margin:8px 0 0;padding:12px;background:var(--bg-soft);border-radius:var(--r-md)}
.exam-editor.is-locked{opacity:.6;cursor:not-allowed;background:var(--bg-soft)}
.exam-box{display:grid;gap:14px;padding:28px 30px;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;box-shadow:0 12px 30px -16px color-mix(in oklch,var(--ink) 22%,transparent)}
.exam-box .eyebrow{margin-bottom:6px}
.exam-sv p, .exam-frage p{font-size:16px;line-height:1.6;color:var(--ink);font-family:var(--sans)}
.exam-sv p, .exam-frage p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.exam-sv-text .sv-head, .exam-sv .sv-head{text-align:left;margin-top:6px}
.exam-sv-text .sv-head strong, .exam-sv .sv-head strong{font-weight:800;color:var(--ink)}
.exam-sv p+p{margin-top:10px}
/* Eine Karte pro Frage: Kopf-Navigation + Frage + Lösung in einer Box */
.exam-q-card{margin-top:26px;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;box-shadow:0 14px 34px -18px color-mix(in oklch,var(--ink) 24%,transparent);overflow:hidden}
.exam-q-body{padding:22px 24px 24px}
/* Fragen-Navigation als Kopfleiste der Karte: Pfeile + Mini-Fortschritt */
.exam-nav-row{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:12px;padding:16px 20px 10px;background:color-mix(in oklch,var(--bg-card) 60%,transparent)}
.exam-nav-arrow{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--ink-inv);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,background .15s,opacity .15s}
.exam-nav-arrow svg{width:17px;height:17px}
.exam-nav-flip{display:grid;place-items:center;transform:scaleX(-1)}
.exam-nav-arrow:hover:not(:disabled){transform:translateX(2px);box-shadow:var(--shadow-md);background:color-mix(in oklch,var(--accent) 86%,var(--accent-2))}
.exam-nav-arrow:has(.exam-nav-flip):hover:not(:disabled){transform:translateX(-2px)}
.exam-nav-arrow:active:not(:disabled){transform:scale(.96)}
.exam-nav-arrow:disabled{cursor:not-allowed;opacity:.34;box-shadow:none}
.exam-nav-meta{min-width:0;display:grid;justify-items:center;gap:9px}
.exam-nav-main{font-family:var(--display);font-weight:800;font-size:16px;color:var(--accent);letter-spacing:-.01em}
.exam-nav-dots{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap}
.exam-nav-dots button{width:34px;height:5px;border:0;border-radius:999px;background:var(--bg-soft);cursor:pointer;padding:0;transition:background .22s,width .22s,transform .22s}
.exam-nav-dots button:hover{background:color-mix(in oklch,var(--accent) 30%,var(--bg-soft))}
.exam-nav-dots button.is-done{background:color-mix(in oklch,var(--accent) 42%,transparent)}
.exam-nav-dots button.is-filled:not(.is-active):not(.is-done){background:color-mix(in oklch,var(--ok) 50%,var(--bg-soft))}
.exam-nav-dots button.is-active{width:44px;background:var(--accent);transform:scaleY(1.12)}
@media (max-width:680px){
  .exam-nav-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:10px;padding:12px}
  .exam-nav-arrow{width:40px;height:40px;border-radius:12px}
  .exam-nav-dots button{width:24px}
  .exam-nav-dots button.is-active{width:32px}
}
.exam-frage{padding:0;background:none;border:0;border-radius:0;box-shadow:none;margin:0}
.exam-editor-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}
.exam-answer-wrap{margin-top:8px}
.exam-editor-head label{font-family:var(--display);font-weight:800;font-size:var(--fs-s);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.exam-hints-wrap{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;overflow:hidden;transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1),opacity .26s ease,margin-top .34s cubic-bezier(.16,1,.3,1)}
.exam-hints-wrap.is-open{grid-template-rows:1fr;opacity:1;margin-top:14px}
.exam-hints-inner{min-height:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.exam-hints-wrap{transition-duration:.001s}}
.exam-hints{margin:0;padding:16px 18px 16px 38px;background:color-mix(in oklch, var(--accent-2) 18%, var(--bg-card));border-radius:var(--r-md);font-size:16px;line-height:1.6;color:var(--ink-2)}
.exam-hints li{margin-bottom:4px}
.exam-editor{width:100%;min-height:260px;padding:22px 24px;background:var(--bg-card);border:1px solid var(--rule);border-radius:16px;box-shadow:0 8px 22px -16px color-mix(in oklch,var(--ink) 18%,transparent);font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink);resize:vertical;outline:none;transition:border-color .15s,box-shadow .15s}
.exam-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent)}
/* Rich-Text-Antwortfeld (contentEditable),gleicher Look wie das Textfeld */
.exam-editor-rich{white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;height:auto}
.exam-editor-rich.is-locked{background:var(--bg-soft);color:var(--ink-3);cursor:not-allowed}
.exam-editor-rich:empty:before{content:attr(data-placeholder);color:var(--ink-3);pointer-events:none}
/* Markierbarer Sachverhalt */
.exam-sv-text{outline:none;cursor:text;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.exam-sv-text p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;font-size:16px;line-height:1.6;color:var(--ink);font-family:var(--sans)}
.exam-sv-text p+p{margin-top:10px}
/* Markierungen nahtlos/rechteckig – identisch zur Auswahl-Vorschau (::selection lässt sich nicht runden) */
.exam-sv-text span[style*="background"], .exam-editor-rich span[style*="background"]{border-radius:0;padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Highlight-Farbpalette beim Timer – max. 6 pro Zeile, füllen den Zwischenraum, dann Umbruch */
.exam-hl-palette{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;margin:14px 0 0}
.exam-hl-swatch-wrap,.exam-hl-clear{flex:0 0 calc((100% - 50px) / 6);max-width:64px;aspect-ratio:1}
.exam-hl-swatch-wrap{position:relative}
.exam-hl-swatch{width:100%;height:100%;border-radius:50%;border:3px solid var(--bg-card);box-shadow:0 0 0 1px var(--rule);cursor:pointer;padding:0;transition:transform .12s}
.exam-hl-swatch:hover{transform:scale(1.06)}
.exam-hl-swatch.is-active{box-shadow:0 0 0 2px var(--bg-card),0 0 0 4px var(--accent);transform:scale(1.06)}.exam-hl-clear{border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;line-height:0;transition:color .12s,border-color .12s,background .12s}.exam-hl-clear{border:1.5px solid var(--rule);background:var(--bg-soft);color:var(--ink-3)}.exam-hl-clear:hover{color:var(--accent);border-color:var(--accent)}
/* Markierungs-Spans: im Blocksatz jede umbrochene Zeile durchgehend füllen (keine Hairline-Lücken). */
.exam-sv-text span[data-cmt],.exam-editor-rich span[data-cmt]{box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:3px}
/* Kommentar-Nummer im Text */
.exam-cmt-num{font-size:.62em;font-weight:800;vertical-align:super;line-height:0;margin-left:1px;cursor:default;user-select:none}
.exam-cmt-box-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.exam-cmt-badge{min-width:18px;height:18px;padding:0 4px;border-radius:9px;color:#fff;font-family:var(--display);font-weight:800;font-size:14px;display:inline-grid;place-items:center;line-height:1}
.exam-cmt-box-title{font-family:var(--display);font-weight:800;font-size:var(--fs-s);color:var(--ink-2)}
.exam-cmt-del{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;padding:2px;border-radius:4px}
.exam-cmt-del:hover{color:#dc2626}
.exam-cmt-text{width:100%;min-height:48px;resize:vertical;border:1px solid var(--rule);border-radius:6px;padding:6px 8px;font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--ink);outline:none;box-sizing:border-box}
.exam-cmt-text:focus{border-color:var(--accent)}
/* Hover-Tooltip an der Markierung */
.exam-cmt-tooltip{position:fixed;transform:translate(-50%,calc(-100% - 4px));z-index:60;box-sizing:border-box;background:var(--bg-card);border:2px solid var(--rule);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.18);padding:8px 10px;display:flex;gap:8px;align-items:flex-start;pointer-events:none;font-size:14px;line-height:1.45;color:var(--ink);opacity:0;transition:opacity .18s ease,transform .18s ease}
.exam-cmt-tooltip.is-visible{opacity:1;transform:translate(-50%,calc(-100% - 8px))}
.exam-cmt-tooltip.is-below{transform:translate(-50%,4px)}
.exam-cmt-tooltip.is-below.is-visible{transform:translate(-50%,8px)}
.exam-cmt-tooltip-text{white-space:normal;overflow-wrap:anywhere;word-break:break-word;min-width:0}
/* Cursor im Stift-/Radierer-Modus */
.exam-sv-text.is-hl-pen,.exam-editor-rich.is-hl-pen{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20d='M3%2021l2-5%2011-11%203%203-11%2011-5%202z'%20fill='%23ffd54a'%20stroke='%23333'%20stroke-width='1'/%3E%3C/svg%3E") 3 21, crosshair}
.exam-sv-text.is-hl-eraser,.exam-editor-rich.is-hl-eraser{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Crect%20x='3'%20y='11'%20width='13'%20height='9'%20rx='2'%20fill='%23f4a0c0'%20stroke='%23333'%20stroke-width='1'/%3E%3C/svg%3E") 9 16, cell}
/* Im Werkzeug-Modus die blaue Standard-Auswahl durch die aktive Markierungsfarbe ersetzen,
   damit schon beim Ziehen direkt in der gewählten Farbe markiert aussieht. */
.exam-sv-text.is-hl-pen::selection,.exam-editor-rich.is-hl-pen::selection,.exam-sv-text.is-hl-eraser::selection,.exam-editor-rich.is-hl-eraser::selection{background:var(--hl-sel);color:inherit}
.exam-sv-text.is-hl-pen::-moz-selection,.exam-editor-rich.is-hl-pen::-moz-selection,.exam-sv-text.is-hl-eraser::-moz-selection,.exam-editor-rich.is-hl-eraser::-moz-selection{background:var(--hl-sel);color:inherit}

/* ───────── Klausur-Runner: Handy (≤700px) ─────────
   Kompakte Toolbar (Suche-Icon · Farb-Dots · Mülltonne · Notizen · Uhr); Format-Knöpfe
   wandern über die Antwort; Gesetz + Notizen öffnen als Bottom-Sheets. */
.exam-tb-iconbtn{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--bg-soft);color:var(--ink-2);cursor:pointer;padding:0;position:relative}
.exam-tb-iconbtn svg{width:19px;height:19px}
.exam-tb-iconbtn.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.exam-notes-btn .exam-notes-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font:800 10px/16px var(--display);text-align:center}
@media (max-width:700px){
  .exam-toolbar.is-mobile{gap:7px;padding:7px 10px;justify-content:flex-start;flex-wrap:nowrap}
  .exam-toolbar.is-mobile .exam-toolbar-tools{gap:7px;margin-left:auto;min-width:0}
  .exam-toolbar.is-mobile .exam-hl-palette{gap:8px}
  .exam-toolbar.is-mobile .exam-hl-swatch-wrap,
  .exam-toolbar.is-mobile .exam-hl-clear{width:30px;height:30px;max-width:30px;aspect-ratio:auto}
  .exam-toolbar.is-mobile .exam-hl-clear svg{width:16px;height:16px}
  .exam-toolbar.is-mobile .exam-hl-swatch{border-width:2px}
  .exam-toolbar.is-mobile .exam-clock-pill svg{display:none}
  .exam-toolbar.is-mobile .exam-clock-pill span{width:auto!important}

  .exam-title-row{flex-direction:column;align-items:flex-start;gap:8px}
  .exam-title-row .step-q{font-size:20px}
  .exam-title-row .run-skip-nav{font-size:14px;padding:7px 12px}

  .exam-box{padding:16px}

  .exam-fmt-mobile{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 8px;margin-bottom:8px;background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-md)}
  .exam-fmt-mobile .exam-fmt-btn{width:40px!important;height:40px!important;font-size:16px!important;max-width:40px!important}
}

/* Bottom-Sheets (Gesetz + Notizen) */
@keyframes exam-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes exam-sheet-fade{from{opacity:0}to{opacity:1}}
.exam-sheet-backdrop{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.42);display:flex;align-items:flex-end;justify-content:center;animation:exam-sheet-fade .16s ease}
.exam-sheet{width:100%;max-width:640px;max-height:84vh;display:flex;flex-direction:column;background:var(--bg-card);border-radius:18px 18px 0 0;box-shadow:0 -12px 44px rgba(0,0,0,.30);padding:8px 14px calc(16px + env(safe-area-inset-bottom)) 14px;box-sizing:border-box;animation:exam-sheet-up .22s cubic-bezier(.2,.8,.2,1)}
.exam-sheet-grip{flex:0 0 auto;width:40px;height:4px;border-radius:3px;background:var(--rule);margin:2px auto 10px}
.exam-sheet-head{display:flex;align-items:center;gap:8px;padding:0 0 8px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.exam-sheet-head strong{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)}
.exam-sheet-x,.exam-sheet-back{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:var(--bg-soft);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.exam-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.exam-cmt-listrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 4px;border:0;border-bottom:1px solid var(--rule);background:none;cursor:pointer}
.exam-cmt-listrow:last-child{border-bottom:0}
.exam-cmt-listrow-text{flex:1;min-width:0;font-size:16px;color:var(--ink-2);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exam-cmt-listrow-area{flex:0 0 auto;font:800 10px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-soft);border-radius:var(--r-pill);padding:5px 8px}
.exam-cmt-sheet .exam-cmt-del{flex:0 0 auto;margin-left:0;width:30px;height:30px;border-radius:50%;background:var(--bg-soft);color:#dc2626}
.exam-cmt-sheet-text{width:100%;min-height:150px;resize:vertical;border:1px solid var(--rule);border-radius:var(--r-md);padding:12px;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg-soft);box-sizing:border-box}
.exam-cmt-sheet-text:focus{border-color:var(--accent);outline:none}

/* 2026-08-20: Der Vergleich am Ende einer Klausur bzw. eines Minifalls bricht als
   einziger Block aus der 820px-Spalte aus. Zwei Fliesstexte nebeneinander brauchen
   Breite; der Rest der Seite (Punkte, Rueckmeldung) nicht, deshalb wird hier
   ausgebrochen und nicht die ganze Spalte verbreitert. */
.exam-compare-wide{position:relative;left:50%;transform:translateX(-50%);width:min(1240px,calc(100vw - 80px));display:block}
@media (max-width:900px){.exam-compare-wide{position:static;left:auto;transform:none;width:100%}}
.exam-compare{display:flex;flex-direction:column;gap:16px}
/* minmax(0,1fr) statt 1fr: Eine unteilbare lange Zeichenkette in der Antwort (etwa
   eine mitkopierte URL) setzt sonst die Mindestbreite der linken Spalte und drueckt
   die Loesungsskizze auf einen Reststreifen zusammen. */
.exam-compare-task{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.exam-yours, .exam-muster{min-width:0;padding:24px 26px;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;box-shadow:0 12px 30px -16px color-mix(in oklch,var(--ink) 22%,transparent)}
.exam-text{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.exam-text .gl-body{margin-top:6px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-text .gl-head{margin-top:13px;font-weight:800;color:var(--ink)}
.exam-text .gl-head:first-child{margin-top:0}
.exam-feedback{display:flex;flex-direction:column;gap:12px}
.exam-score-card,.exam-feedback-task{padding:24px 26px;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;box-shadow:0 12px 30px -16px color-mix(in oklch,var(--ink) 22%,transparent)}
.exam-score-card{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;padding:24px 26px;border:1px solid var(--rule);border-radius:20px;background:var(--bg-card);box-shadow:0 12px 30px -16px color-mix(in oklch,var(--ink) 22%,transparent)}
.exam-score-card strong{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.exam-score-card small{display:block;margin-top:4px;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.exam-score-card p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}
.exam-spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite;flex-shrink:0}
.exam-memory-card{padding:24px 26px;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;box-shadow:0 12px 30px -16px color-mix(in oklch,var(--ink) 22%,transparent);display:flex;flex-direction:column;gap:12px}
/* Gesamturteil als Gutachter-Votum: echte Absätze, Blocksatz. */
.exam-gesamturteil-text{display:flex;flex-direction:column;gap:12px}
.exam-gesamturteil-text p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-memory-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.exam-memory-head h4{margin:0;font-family:var(--display);font-weight:900;font-size:20px;line-height:1.15;color:var(--ink)}
.exam-memory-head span{flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:var(--r-pill);padding:5px 9px}
.exam-memory-card > p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-memory-priority{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.exam-memory-priority strong{font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.exam-memory-priority span{display:block;font-size:14px;font-weight:600;color:var(--ink);background:var(--bg-soft);border-radius:var(--r-md);padding:10px 12px;line-height:1.55;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-memory-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:10px}
.exam-memory-list{padding:12px;border-radius:var(--r-md);background:var(--bg-soft);display:flex;flex-direction:column;gap:9px;min-width:0}
.exam-memory-list > strong{font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.exam-memory-list.is-good > strong{color:var(--ok)}
.exam-memory-list.is-risk > strong{color:var(--danger)}
/* Stärken/Schwächen: graue Spalten-Kachel weg, Überschrift zentriert. */
.exam-memory-list.is-good,.exam-memory-list.is-risk{background:none;padding:0}
.exam-memory-list.is-good > strong,.exam-memory-list.is-risk > strong{text-align:center}
.exam-memory-list article{padding:10px;border-radius:10px;background:var(--bg-card);border:1px solid var(--rule);display:flex;flex-direction:column;gap:5px}
.exam-memory-list h5{margin:0;font-family:var(--display);font-weight:900;font-size:16px;color:var(--ink)}
.exam-memory-list p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-memory-list small{color:var(--ink-2);font-size:14px;line-height:1.5;font-weight:700;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-memory-list em{font-style:normal;color:var(--accent);font-size:14px;font-weight:800}
.exam-memory-next{padding:12px 14px;border-radius:var(--r-md);background:color-mix(in oklch,var(--accent-soft) 70%,var(--bg-card));color:var(--ink-2);font-size:14px;font-weight:700;line-height:1.55;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* Kriterien als flache Liste statt Einzelkacheln */
.exam-krit-list{display:flex;flex-direction:column;gap:10px}
.exam-krit-row{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--bg-card)}
.exam-krit-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.exam-krit-row-head h5{margin:0;font-family:var(--display);font-weight:900;font-size:16px;color:var(--ink)}
.exam-krit-niveau{flex:0 0 auto;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.06em;padding:4px 8px;border-radius:var(--r-pill,999px)}
.exam-krit-item{display:flex;gap:6px;font-size:16px;line-height:1.6;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-krit-item > span:last-child{color:var(--ink-2)}
.exam-krit-plus{color:var(--ok,#15803d);font-weight:800;flex:0 0 auto}
.exam-krit-minus{color:var(--danger,#b91c1c);font-weight:800;flex:0 0 auto}
.exam-feedback-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-family:var(--display);font-weight:800}
.exam-feedback-head strong{color:var(--accent)}
.exam-feedback-task p{margin:0 0 10px;color:var(--ink-2);line-height:1.6;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-feedback-list{font-size:14px;line-height:1.5;margin-top:6px;padding:8px 10px;border-radius:10px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.exam-feedback-list.ok{background:oklch(0.96 0.04 155);color:oklch(0.35 0.08 155)}
.exam-feedback-list.ko{background:oklch(0.96 0.04 45);color:oklch(0.4 0.1 45)}
.exam-point-breakdown{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.exam-point-breakdown li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 10px;border-radius:10px;background:var(--bg-soft);font-size:14px}
.exam-point-breakdown strong{font-family:var(--display);font-weight:800;color:var(--ink)}
.exam-point-breakdown span{font-family:var(--display);font-weight:900;color:var(--accent)}
.exam-point-breakdown small{grid-column:1/-1;color:var(--ink-2);line-height:1.45}
.exam-outline{margin-top:10px;border:1px solid var(--rule);border-radius:10px;padding:0 10px;background:var(--bg-soft)}
.exam-outline summary{cursor:pointer;padding:9px 0;font-family:var(--display);font-weight:800;color:var(--accent)}
.exam-outline div{white-space:pre-wrap;padding:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.exam-feedback-guard{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid color-mix(in oklch,var(--accent) 30%,var(--rule));border-radius:var(--r-md);background:color-mix(in oklch,var(--accent-soft) 70%,var(--bg-card));text-align:left;font-size:14px;color:var(--ink-2);line-height:1.45}
.exam-feedback-guard strong{flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:var(--fs-s);letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.exam-feedback-notice{grid-column:1/-1;padding:9px 10px;border-radius:10px;background:var(--bg-soft);color:var(--ink-2);font-size:14px}
@media (max-width:820px){.exam-compare-task,.exam-memory-grid{grid-template-columns:minmax(0,1fr)}.exam-memory-head{flex-direction:column}}

/* Runner Modal */
.run-modal{position:fixed;inset:0;background:oklch(0.24 0.015 200 / 0.5);z-index:200;display:grid;place-items:center;padding:20px;animation:overlayFadeIn .2s ease}
.run-modal-card{background:var(--bg-card);border-radius:var(--r-lg);padding:28px;max-width:420px;width:100%;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:10px;animation:fade-up .2s ease}
.run-modal-card h3{font-size:20px}
/* Knopfreihe mittig. Vorher flex-end, also rechtsbuendig unter einer
   zentrierten Ueberschrift, das sah aus wie ein Versehen. Alle sechs
   run-modal-Dialoge haben genau zwei Knoepfe und eine zentrierte
   Ueberschrift; damit stehen sie jetzt einheitlich in der Mitte. */
.run-modal-card .result-ctas{margin-top:16px;justify-content:center}
/* Die Bestaetigungs-Knoepfe der run-modal-Dialoge (verlassen/weitermachen) sind MARKEN-Aktionen,
   kein Gebiets-Element. Im Runner ist --accent auf die Rechtsgebietsfarbe umgebogen (Gold im
   Oeffentlichen Recht, Blau im Strafrecht …), und .btn-primary erbt genau die, deshalb war
   „Weitermachen" golden statt gruen. --brand bleibt ueberall dasselbe Gruen, wie der
   Fortsetzen-Knopf und der Schnellsuche-Pfeil. */
.run-modal-card .btn-primary{background:var(--brand)}
.run-modal-card .btn-primary:hover{background:color-mix(in oklch,var(--brand) 84%,#000)}

/* Result */
.run-main.result{align-items:center}
.result-card{background:var(--bg-card);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:16px;max-width:560px;text-align:center}
.result-card h2{font-size:26px;letter-spacing:-.02em}
.result-breakdown{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:16px}
.rb-row{display:grid;grid-template-columns:minmax(82px,110px) 1fr;align-items:center;gap:12px}
.rb-row--count{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;background:var(--bg-soft);border-radius:var(--r-sm)}
.rb-lbl{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink-2);text-align:left}
.rb-count{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink-1);white-space:nowrap}
.save-state{width:100%;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-s);font-weight:700;background:var(--bg-soft);color:var(--ink-2)}
.save-state.saved{background:oklch(0.96 0.04 155);color:oklch(0.35 0.08 155)}
.save-state.error{background:oklch(0.96 0.04 45);color:oklch(0.4 0.1 45)}
.result-ctas{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}

/* ── Ergebnis-Karte (Prototyp): Score-Badge + Punkte + Confidence-Track + Karteikarten-Schalter ── */
.erc-card{max-width:560px;padding:36px 38px 32px;border-radius:22px;box-shadow:0 12px 30px -16px color-mix(in oklch,var(--ink) 24%,transparent);align-items:stretch;text-align:left;gap:0}
.erc-score{text-align:center;margin-bottom:22px}
/* Die Note ist keine Pille. Ein Chip mit Rahmen und Punkt sieht aus wie ein Statuslabel („aktiv",
   „neu"), die Note ist aber ein Urteil über eine Leistung, und sie steht neben der Punktzahl, die
   ohnehin schon groß und farbig ist. Also nur Schrift. */
.erc-status{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;
  background:none;border:0;padding:0;height:auto}
.erc-dot{display:none}
.erc-points{display:flex;align-items:baseline;justify-content:center;gap:10px;line-height:.95}
.erc-points strong{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-.05em}
.erc-points span{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink-2)}
.erc-points-pct{gap:3px}
.erc-points-pct span{font-size:40px;font-weight:900;letter-spacing:-.04em}
.erc-scale{margin-top:8px;color:var(--ink-3);font-family:var(--display);font-weight:800;font-size:14px}
.erc-message{text-align:center;margin:0 auto 20px;max-width:430px}
.erc-message h2{margin:0 0 9px;font-size:26px;line-height:1.15;letter-spacing:-.03em}
.erc-message p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}
.erc-card .result-breakdown{margin-top:0;margin-bottom:18px}
.erc-confidence{padding:16px 18px;border-radius:16px;border:1px solid var(--rule);background:var(--bg-soft)}
.erc-conf-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px}
.erc-label{color:var(--ink-3);font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.erc-conf-val{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.erc-track{position:relative;height:8px;border-radius:999px;background:color-mix(in oklch,var(--ink) 10%,transparent)}
.erc-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;pointer-events:none;transition:width .2s ease,background .2s ease}
.erc-knob{position:absolute;top:50%;width:17px;height:17px;border-radius:999px;transform:translate(-50%,-50%);box-shadow:0 0 0 4px color-mix(in oklch,var(--ink) 7%,transparent),0 5px 11px -4px color-mix(in oklch,var(--ink) 40%,transparent);z-index:2;pointer-events:none;transition:left .2s ease,background .2s ease}
.erc-range{position:absolute;inset:-9px 0;width:100%;height:calc(100% + 18px);margin:0;opacity:0;cursor:pointer;z-index:3}
.erc-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;cursor:grab}
.erc-range::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:50%;cursor:grab}
.erc-finish{margin-top:22px;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:14px}
.erc-toggle{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 15px;border-radius:16px;border:1px solid var(--rule);background:var(--bg-soft);cursor:pointer;transition:background .18s,border-color .18s}
.erc-toggle:hover:not(:disabled){background:color-mix(in oklch,var(--ink) 4%,var(--bg-soft))}
.erc-toggle:disabled{opacity:.6;cursor:default}
.erc-toggle-icon{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:color-mix(in oklch,var(--ink) 7%,transparent);color:var(--ink-3);display:grid;place-items:center;transition:background .18s,color .18s}
.erc-toggle-icon svg{width:21px;height:21px}
.erc-toggle.on .erc-toggle-icon{background:var(--accent);color:#fff}
.erc-toggle-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.erc-toggle-text strong{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.erc-toggle-text span{font-size:14px;color:var(--ink-3)}
.erc-switch{position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:999px;background:color-mix(in oklch,var(--ink) 20%,transparent);transition:background .2s}
.erc-toggle.on .erc-switch{background:var(--accent)}
.erc-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 2px 5px -1px color-mix(in oklch,var(--ink) 40%,transparent);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.erc-toggle.on .erc-switch::after{transform:translateX(18px)}
.erc-ctas{margin-top:0}
.erc-ctas .btn-primary{flex:1}
@media (max-width:600px){
  .erc-card{padding:28px 20px 24px}
  .erc-points strong{font-size:40px}
  .erc-message h2{font-size:20px}
}

/* ── Karteikarten: 3 Kategorien (Automatisch / Standard / Eigene) → dann Ordner ── */
.fc-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fc-cat-card{--cat:var(--accent);--cat-soft:var(--accent-soft);position:relative;text-align:left;min-height:300px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--bg-card);box-shadow:0 14px 34px -20px color-mix(in oklch,var(--ink) 22%,transparent);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;padding:24px;font:inherit;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s}
.fc-cat-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px -24px color-mix(in oklch,var(--ink) 32%,transparent)}
.fc-cat-illu{height:230px;display:grid;place-items:center;color:var(--cat);margin-bottom:8px}
.fc-cat-illu svg{width:100%;max-width:300px;height:auto}
.fc-cat-card h3{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.fc-cat-card p{margin:0;color:var(--ink-2);font-family:var(--sans);font-size:14px;line-height:1.55;text-align:justify;hyphens:auto}
.fc-cat-foot{margin-top:auto;padding-top:18px;border-top:1px solid color-mix(in oklch,var(--ink) 8%,transparent);display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);font-family:var(--display);font-weight:800;font-size:14px}
.fc-cat-arrow{width:44px;height:44px;border-radius:999px;background:var(--cat);color:#fff;display:grid;place-items:center;transition:transform .2s}
.fc-cat-arrow svg{width:19px;height:19px}
.fc-cat-card:hover .fc-cat-arrow{transform:translateX(3px)}
.fc-cat-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.fc-cat-head h3{margin:0;font-family:var(--display);font-weight:800;font-size:var(--fs-page);letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
/* Karteikarten-Hauptpunktliste im Lerneinheiten-Stil (.haupt-*): die Stapel als Unit-Row-Zeilen (wie Lerneinheiten-Einheiten). */
.fc-stackrows{display:flex;flex-direction:column;gap:4px;padding:4px 24px 18px 50px}
.fc-stackrow{cursor:pointer}
.fc-stackrow.is-pending{cursor:default}
.fc-stackrow .ur-meta .is-err{color:var(--danger)}
.fc-stackrow-right{display:flex;align-items:center;gap:10px}
.fc-stackrow-gear{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:0;background:var(--bg-soft);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.fc-stackrow-gear svg{width:16px;height:16px}
.fc-stackrow-gear:hover{background:var(--accent-soft);color:var(--accent)}
/* Fortsetzen/Verwerfen, wenn eine Lern-Sitzung auf dem Stapel offen ist. */
/* „Fortsetzen" ist eine MARKEN-Aktion, kein Gebiets-Element → --brand (siehe .uhub-fmt.is-run).
   Und dieselbe Bewegung wie .btn-primary: eindrücken, nicht anheben. */
.fc-stackrow-resume{height:30px;padding:0 14px;flex:0 0 auto;border-radius:999px;border:0;background:var(--brand);color:#fff;font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background .1s,transform .1s,box-shadow .1s}
.fc-stackrow-resume:hover{background:color-mix(in oklch,var(--brand) 84%,#000);transform:translateY(1px);box-shadow:0 0 0 transparent}
.fc-stackrow-resume:active{background:color-mix(in oklch,var(--brand) 74%,#000);transform:translateY(2px)}
.fc-stackrow-discard{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid var(--rule);background:var(--bg-card);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fc-stackrow-discard svg{width:16px;height:16px}
.fc-stackrow-discard:hover{background:color-mix(in oklch,var(--danger) 12%,var(--bg-card));color:var(--danger);border-color:color-mix(in oklch,var(--danger) 30%,var(--rule))}
@keyframes fcPanelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fcBgIn{from{opacity:0}to{opacity:1}}
@keyframes fcBgOut{from{opacity:1}to{opacity:0}}
@keyframes fcFolderIn{from{opacity:0;transform:translate(var(--zx,0),var(--zy,0)) scale(.16)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes fcFolderOut{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--zx,0),var(--zy,0)) scale(.16)}}
/* Ordner je Kategorie */
.fc-folder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;padding-top:14px}
.fc-folder{--cat:var(--accent);--cat-soft:var(--accent-soft);position:relative;text-align:left;min-height:160px;border:1px solid var(--rule);border-radius:20px;background:linear-gradient(180deg,var(--bg-card),color-mix(in oklch,var(--bg-card) 92%,var(--bg-soft)));box-shadow:0 18px 44px -22px color-mix(in oklch,var(--ink) 24%,transparent);overflow:visible;cursor:pointer;display:flex;flex-direction:column;font:inherit;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.fc-folder:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px color-mix(in oklch,var(--ink) 32%,transparent)}
.fc-folder::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,color-mix(in oklch,#fff 55%,transparent),color-mix(in oklch,#fff 6%,transparent) 40%,transparent 64%);opacity:.6;z-index:2}
.fc-folder-tab{position:absolute;left:34px;top:1px;transform:translateY(-100%);z-index:5;height:30px;padding:0 14px 0 7px;display:inline-flex;align-items:center;gap:5px;background:var(--bg-card);border:0;border-radius:11px 11px 0 0;color:var(--ink-3);font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;box-shadow:0 -1px 0 var(--rule),1px 0 0 var(--rule),-1px 0 0 var(--rule),0 -8px 18px -12px color-mix(in oklch,var(--ink) 24%,transparent)}
.fc-folder-tab::after{content:"";position:absolute;bottom:0;left:-14px;right:-14px;height:14px;z-index:2;background:radial-gradient(14px 14px at 0 0, transparent 12.5px, var(--rule) 12.5px 13.5px, var(--bg-card) 13.5px) left bottom / 15px 14px no-repeat,radial-gradient(14px 14px at 100% 0, transparent 12.5px, var(--rule) 12.5px 13.5px, var(--bg-card) 13.5px) right bottom / 15px 14px no-repeat}
.fc-folder-tabx{position:relative;z-index:3;width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:0;border-radius:6px;transition:color .15s,background .15s}
.fc-folder-tabx svg{width:16px;height:16px}
.fc-folder-tabx:hover{color:var(--ink);background:var(--rule)}
.fc-folder-content{position:relative;z-index:4;flex:1;padding:18px 22px 18px;display:flex;flex-direction:column}
.fc-folder-cta-row{display:flex;align-items:center;gap:8px;margin-top:22px}
/* Klausur/Minifall,weiße Kachel mit grüner Schrift */
.fc-folder-cta{flex:1;min-width:0;height:38px;border-radius:999px;border:1px solid color-mix(in oklch,var(--accent) 40%,var(--rule));background:var(--bg-card);color:var(--accent);font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .15s,transform .12s,border-color .15s}
.fc-folder-cta:hover{background:var(--accent-soft);border-color:color-mix(in oklch,var(--accent) 60%,var(--rule));transform:translateY(-1px)}
/* Fortsetzen (grün, weiße Schrift, rechts) + Sitzung entfernen,nur wenn eine offene Sitzung existiert */
.fc-folder-resume{flex:0 0 auto;height:38px;padding:0 18px;border-radius:999px;border:0;background:var(--brand);color:#fff;font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .1s,transform .1s,box-shadow .1s}
.fc-folder-resume:hover{background:color-mix(in oklch,var(--brand) 84%,#000);transform:translateY(1px);box-shadow:0 0 0 transparent}
.fc-folder-resume:active{background:color-mix(in oklch,var(--brand) 74%,#000);transform:translateY(2px)}
.fc-folder-clear{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:var(--bg-card);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fc-folder-clear svg{width:17px;height:17px}
.fc-folder-clear:hover{background:color-mix(in oklch,var(--danger) 12%,var(--bg-card));color:var(--danger);border-color:color-mix(in oklch,var(--danger) 30%,var(--rule))}
.fc-folder-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.fc-folder-eyebrow{color:var(--ink-3);font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:0;line-height:1.3;margin-bottom:7px}
.fc-folder h4{margin:0;font-size:20px;letter-spacing:-.035em;line-height:1.25;color:var(--ink)}
.fc-folder-badge{min-width:40px;height:40px;flex:0 0 auto;border-radius:999px;background:var(--bg-soft);color:var(--ink-3);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:14px}
.fc-folder-badge.is-done{background:var(--ok);color:var(--ink-inv)}
.fc-folder p{margin:0 0 12px;color:var(--ink-3);font-family:var(--sans);font-weight:700;font-size:14px;line-height:1.5}
.fc-folder-foot{margin-top:auto;position:relative}
.fc-folder-bar{height:6px;border-radius:999px;background:color-mix(in oklch,var(--ink) 8%,transparent);overflow:hidden;margin-right:52px}
.fc-folder-bar span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.fc-folder-act{position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--bg-soft);color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.fc-folder-act svg{width:18px;height:18px}
.fc-folder-act:hover{background:var(--accent-soft);color:var(--accent)}
.fc-cat-empty{padding:26px;border:1px dashed var(--rule);border-radius:16px;background:var(--bg-soft);color:var(--ink-3);font-size:16px;text-align:center}

/* ── Stapel-Übersicht als Modal (FlashcardDeckModal) ── */
.fcd-overlay{position:fixed;inset:0;z-index:600;background:color-mix(in oklch,var(--ink) 34%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.fcd-modal{position:relative;width:min(900px,100%);background:var(--bg-card);border:1px solid var(--rule);border-radius:24px;box-shadow:0 44px 100px -36px color-mix(in oklch,var(--ink) 55%,transparent);padding:24px 28px 28px;animation:fcdIn .26s cubic-bezier(.16,1,.3,1)}
@keyframes fcdIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.fcd-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.fcd-close{width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s}
.fcd-close:hover{background:var(--rule);color:var(--ink)}
.fcd-close svg{width:18px;height:18px}
/* Fußleiste: links „Alle löschen", Mitte der Pager. Drei Spalten (1fr auto 1fr), damit die
   Punkte auch dann mittig bleiben, wenn links ein Knopf steht. */
.fcd-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:18px;min-height:36px}
.fcd-footer-l{justify-self:start;display:flex;align-items:center}
.fcd-footer-r{justify-self:end}
/* „Alle löschen" trägt Gefahr, aber ruhig: als Text-Knopf, nicht als roter Block. Rot wird er erst
   im Hover, die Absicht muss man zeigen, bevor es warnt. */
.fcd-wipe{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 10px;border:0;border-radius:999px;background:transparent;color:var(--ink-3);font-family:inherit;font-size:13.5px;font-weight:750;cursor:pointer;transition:background .15s,color .15s}
.fcd-wipe svg{width:16px;height:16px}
.fcd-wipe:hover{background:color-mix(in oklch,var(--danger) 13%,var(--bg-card));color:var(--danger)}
/* Nachfrage im selben Streifen, kein zweites Fenster. Jetzt trägt der Löschen-Knopf die Farbe,
   ab hier ist die Handlung gemeint, nicht nur angeboten. */
.fcd-wipe-confirm{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.fcd-wipe-q{font-size:13.5px;font-weight:750;color:var(--ink-2)}
.fcd-wipe-yes{height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--danger);color:#fff;font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:background .12s,transform .1s}
.fcd-wipe-yes:hover{background:color-mix(in oklch,var(--danger) 85%,#000);transform:translateY(1px)}
.fcd-wipe-no{height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--bg-soft);color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:750;cursor:pointer;transition:background .12s}
.fcd-wipe-no:hover{background:color-mix(in oklch,var(--ink-3) 16%,var(--bg-soft))}
/* Karten-Pager (max. 5 pro Seite),Punkte wie bei „Freies Lernen" */
.fcd-pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:0}
.fcd-dot{width:8px;height:8px;flex:0 0 auto;border:0;border-radius:999px;background:var(--rule);cursor:pointer;padding:0;transition:background .2s,width .2s}
.fcd-dot.is-active{width:22px;background:var(--accent)}
.fcd-dot:hover:not(.is-active){background:color-mix(in oklch,var(--accent) 45%,var(--rule))}
/* Neue Seite: Fragen gestaffelt einblenden */
.fcd-row{animation:fcdRowIn .4s cubic-bezier(.16,1,.3,1) backwards}
@keyframes fcdRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fcm-off-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;background:color-mix(in oklch,var(--ink) 80%,transparent);color:#fff;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 10px 24px -10px color-mix(in oklch,var(--ink) 55%,transparent);pointer-events:none;white-space:nowrap}
.fcm-off-badge svg{width:14px;height:14px}
.fcd-list{display:grid;gap:10px}
.fcd-row{border:1px solid var(--rule);border-radius:14px;background:var(--bg-card);box-shadow:0 10px 22px -16px color-mix(in oklch,var(--ink) 24%,transparent);overflow:hidden;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s,opacity .2s}
.fcd-row:hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px color-mix(in oklch,var(--ink) 32%,transparent);border-color:color-mix(in oklch,var(--accent) 22%,var(--rule))}
.fcd-row.off{opacity:1}
.fcd-body{position:relative;min-width:0} /* Anker für das mittige „Deaktiviert"-Label */
.fcd-row.off .fcd-body-in{opacity:.5;transition:opacity .2s} /* nur den Inhalt abdunkeln, Schalter/Tonne bleiben scharf */
.fcd-row-inner{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:14px 14px 14px 18px}
.fcd-q{margin:0 0 9px;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.fcd-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fcd-tag{display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:999px;background:color-mix(in oklch,var(--ink) 5%,transparent);color:var(--ink-2);font-family:var(--display);font-weight:700;font-size:14px}
.fcd-row-actions{display:flex;align-items:center;gap:10px}
.fcd-include{display:inline-flex;align-items:center;gap:9px;color:var(--ink-3);font-family:var(--display);font-weight:800;font-size:14px;cursor:pointer;user-select:none;white-space:nowrap}
.fcd-mini{position:relative;width:42px;height:24px;border-radius:999px;background:color-mix(in oklch,var(--ink) 16%,transparent);transition:background .18s;flex:0 0 auto}
.fcd-mini::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(20,35,32,.2);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.fcd-include.on .fcd-mini{background:var(--accent)}
.fcd-include.on .fcd-mini::after{transform:translateX(18px)}
.fcd-trash{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-soft);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s}
.fcd-trash:hover{background:color-mix(in oklch,var(--danger) 14%,var(--bg-card));color:var(--danger)}
.fcd-trash svg{width:17px;height:17px}
@media(max-width:760px){.fcd-modal{padding:22px 18px 22px}.fcd-row-inner{grid-template-columns:1fr}.fcd-row-actions{justify-content:space-between}
  /* Schmal: Löschen oben, Pager darunter, sonst quetschen sich Nachfrage und Punkte in eine Zeile. */
  .fcd-footer{grid-template-columns:1fr;justify-items:center;gap:12px}
  .fcd-footer-l{justify-self:center}.fcd-footer-r{display:none}
  .fcd-wipe-confirm{justify-content:center}}
.fcr-inputbar{margin-top:18px;padding:0 4px}
.fcr-field{position:relative}
.fcr-textarea{display:block;width:100%;border:1px solid var(--rule);border-radius:14px;padding:20px 108px 20px 18px;font-size:16px;font-family:inherit;line-height:1.55;resize:none;overflow:hidden;min-height:62px;max-height:360px;box-sizing:border-box;background:var(--bg-card);color:var(--ink);box-shadow:0 8px 22px -16px color-mix(in oklch,var(--ink) 30%,transparent);transition:border-color .15s}
.fcr-textarea:focus{outline:none;border-color:var(--accent)}
.fcr-wave,.fcr-transcribing{display:flex;align-items:center;width:100%;min-height:62px;border:1px solid var(--rule);border-radius:14px;padding:12px 108px 12px 18px;box-sizing:border-box;background:var(--bg-card);box-shadow:0 8px 22px -16px color-mix(in oklch,var(--ink) 30%,transparent)}
.fcr-wave-cv{width:100%;height:36px;display:block}
.fcr-transcribing{gap:12px;color:var(--ink-3);font-family:var(--display);font-weight:700;font-size:14px}
.fcr-spin{width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:2px solid color-mix(in oklch,var(--ink) 14%,transparent);border-top-color:var(--accent);animation:fcrSpin .7s linear infinite}
/* Fortschritts-Punkte je Urteil einfärben (überschreibt .cur, da später im Stylesheet) */
.sw-chrome .dots span.is-pass{background:var(--ok)}
.sw-chrome .dots span.is-partial{background:oklch(0.78 0.13 80)}
.sw-chrome .dots span.is-fail{background:var(--danger)}
.sw-controls .btn-primary:disabled{opacity:.4;cursor:default;box-shadow:none}
.fcr-field-btns{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:8px}
.fcr-mic{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .12s}
.fcr-mic:hover:not(:disabled){transform:translateY(-1px)}
.fcr-mic:disabled{opacity:.6;cursor:default}
.fcr-mic svg{width:18px;height:18px}
.fcr-mic.is-rec{background:var(--accent);color:#fff;animation:fcrMicPulse 1.3s ease-in-out infinite}
.fcr-mic-stop{width:13px;height:13px;border-radius:3px;background:#fff}
/* Neutraler Schatten statt grünem Leuchten (siehe .uhub-crow-btn). */
.fcr-submit{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -10px color-mix(in oklch,var(--ink) 40%,transparent);transition:background .15s,transform .12s,opacity .15s}
.fcr-submit:hover:not(:disabled){transform:translateY(-1px);background:color-mix(in oklch,var(--accent) 86%,#000)}
.fcr-submit:disabled{opacity:.4;cursor:default;box-shadow:none}
.fcr-submit svg{width:19px;height:19px}
.fcr-submit-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:fcrSpin .7s linear infinite}
@keyframes fcrSpin{to{transform:rotate(360deg)}}
@keyframes fcrMicPulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--accent) 45%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fcr-textarea:focus{outline:none;border-color:var(--accent)}
.fcr-hint{font-size:14px;color:var(--ink-3);margin-top:6px}
.fcr-hint.err{color:var(--danger)}
.fcr-solution{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.fcr-solbox{position:relative;border-radius:14px;overflow:hidden;min-height:62px;padding:14px 16px;border:1px solid var(--rule);background:var(--bg-soft);transition:background .35s ease,border-color .35s ease}
.fcr-solbox .fcr-back{filter:blur(7px);transition:filter .4s ease;user-select:none;pointer-events:none}
.fcr-solbox.is-open .fcr-back{filter:none;user-select:text;pointer-events:auto}
.fcr-solbox.is-open.is-pass{background:oklch(0.96 0.04 155);border-color:oklch(0.85 0.06 155)}
.fcr-solbox.is-open.is-pass .fcr-back{color:oklch(0.33 0.08 155)}
.fcr-solbox.is-open.is-fail{background:oklch(0.96 0.04 45);border-color:oklch(0.87 0.05 45)}
.fcr-solbox.is-open.is-fail .fcr-back{color:oklch(0.4 0.1 45)}
.fcr-solbox.is-open.is-partial{background:rgba(234,179,8,.13);border-color:rgba(234,179,8,.4)}
.fcr-solbox.is-open.is-partial .fcr-back{color:#b8860b}
.fcr-back{line-height:1.55;color:var(--ink-2);white-space:pre-wrap;margin:0}
.fcr-peek{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;background:color-mix(in oklch,var(--bg-card) 30%,transparent);transition:background .2s}
.fcr-peek:hover{background:color-mix(in oklch,var(--bg-card) 12%,transparent)}
.fcr-peek-ic{width:48px;height:48px;border-radius:50%;background:var(--bg-card);box-shadow:0 10px 26px -10px color-mix(in oklch,var(--ink) 40%,transparent),0 0 0 1px var(--rule);display:grid;place-items:center;color:var(--ink-2);transition:transform .18s,color .18s}
.fcr-peek:hover .fcr-peek-ic{transform:scale(1.06);color:var(--accent)}
.fcr-peek svg{width:22px;height:22px}
.fcr-feedback{background:var(--bg-soft);border-radius:var(--r-md);padding:12px 14px;font-size:14px;color:var(--ink-2);margin-top:12px}
/* Festigungs-Status unter der Bewertung */
.fcr-consol{display:flex;width:fit-content;align-items:center;gap:7px;margin:14px auto 2px;padding:7px 13px;border-radius:999px;background:color-mix(in oklch,var(--ink) 6%,transparent);color:var(--ink-2);font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.01em}
.fcr-consol.is-done{background:color-mix(in oklch,var(--ok) 16%,transparent);color:var(--ok)}
.fcr-consol.fcr-removed{background:color-mix(in oklch,var(--danger) 12%,transparent);color:var(--danger)}
.fcr-consol-ic{display:grid;place-items:center;width:16px;height:16px;flex:0 0 auto}
.fcr-consol-ic svg{width:15px;height:15px}
/* „Karte entfernen",als Button, immer exakt mittig (3-Spalten-Raster: Zurück | entfernen | weiter) */
.sw-controls.fcr-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.sw-controls.fcr-controls > .btn-ghost:not(.fcr-remove){grid-column:1;justify-self:start}
.sw-controls.fcr-controls > .fcr-remove{grid-column:2;justify-self:center;margin-left:0;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.sw-controls.fcr-controls > .btn-primary{grid-column:3;justify-self:end;margin-left:0}
.sw-controls .fcr-remove svg{width:18px;height:18px}
.sw-controls .fcr-remove:hover:not(:disabled){color:var(--danger);border-color:color-mix(in oklch,var(--danger) 40%,var(--rule));background:color-mix(in oklch,var(--danger) 8%,var(--bg-card))}
.sw-controls .fcr-remove:disabled{opacity:.5;cursor:default}
@media(max-width:900px){.fc-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fc-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fc-cat-card{min-height:auto}.fc-cat-illu{height:170px}}
@media(max-width:600px){.fc-folder-grid{grid-template-columns:1fr}
.fc-cat-grid{grid-template-columns:1fr;gap:14px}.fc-cat-illu{height:180px}}

/* Topic color tones */
.topic.tone-high{color:var(--ok)}
.topic.tone-focus{color:var(--accent)}
.topic.tone-mid{color:var(--accent)}
.topic.tone-low{color:oklch(0.7 0.13 70)}
.topic.tone-weak{color:var(--danger)}

:root{
  --ok: oklch(0.6 0.12 155);
}
.tb-hello{font-family:var(--display);font-weight:800;font-size:var(--fs-page);letter-spacing:-.025em;color:var(--ink);line-height:1;white-space:nowrap}
@media (max-width:820px){
  .tb-hello{flex:1 1 210px;min-width:0;white-space:normal;line-height:1.08;font-size:40px}
}/* Subpage fade-up entry,matches dashboard .cell stagger */

.subpage-head,
.stats-grid > *,
.rg-structure,
/* .rg-sub traegt den Inhalt der Seiten Schemata und Definitionen,
   .byok-upload-card den der eigenen Klausur. Beide fehlten hier: die drei
   Seiten sprangen ohne Einblendung ins Bild, waehrend Rechtsgebiete und
   Statistik daneben aufziehen. Dieselbe Verzoegerung wie .rg-structure,
   damit ueberall derselbe Rhythmus laeuft.
   Enthaelt .rg-sub eine Kachelliste, blendet der Block NICHT als Ganzes ein:
   dort ziehen die Kacheln einzeln auf (siehe .haupt-list > .haupt-section),
   und zwei Blenden uebereinander waschen einander aus. */
.rg-sub:not(:has(> .haupt-list)),
.byok-upload-card,
.hero{animation:fade-up .5s ease both}
.subpage-head{animation-delay:0s}
.hero{animation-delay:0s} .stats-grid > *:nth-child(1), .rg-structure, .rg-sub:not(:has(> .haupt-list)), .byok-upload-card{animation-delay:.08s} .stats-grid > *:nth-child(2){animation-delay:.14s}
.stats-grid > *:nth-child(3){animation-delay:.20s}
.stats-grid > *:nth-child(4){animation-delay:.26s}
.stats-grid > *:nth-child(5){animation-delay:.32s}
.stats-grid > *:nth-child(6){animation-delay:.36s}
.stats-grid > *:nth-child(7){animation-delay:.40s}
.stats-grid > *:nth-child(8){animation-delay:.44s}
.stats-grid > *:nth-child(n+9){animation-delay:.48s}
/* Auf der Seite „Eigene Klausur" stehen zwei Kacheln ohne Raster direkt
   untereinander im Hauptbereich: oben .byok-upload-card, darunter der Verlauf
   als .stats-card. Die Staffel oben greift nur innerhalb von .stats-grid,
   deshalb zog bisher nur die obere Kachel auf und die untere stand sofort da.
   Zweiter Takt, damit sie nacheinander kommen. */
.main > .stats-card{animation:fade-up .5s ease both;animation-delay:.14s}

.subpage-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 var(--gap);flex-wrap:wrap}
.subpage-head .eyebrow{margin-bottom:8px}
.subpage-title{font-family:var(--display);font-weight:800;font-size:var(--fs-page);letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.subpage-sub{color:var(--ink-2);font-size:var(--fs-b);margin-top:6px;max-width:60ch;text-wrap:pretty}
.plan-empty-state{padding:24px;text-align:center;color:var(--ink-3);font-size:var(--fs-s);font-weight:700;background:var(--bg-soft);border-radius:var(--r-md)}
.plan-empty-state.danger{color:var(--danger)}
@media (max-width:760px){
  /* …und als kompakte Zeile (Label + kleines Zahnrad) statt großer Leer-Kachel */
  .yr-settings-tile{height:auto !important;padding:12px 16px !important}
  .yr-settings-tile > div{padding:0 !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px !important}
  .yr-settings-tile > div > div:first-child{margin-bottom:0 !important;min-height:0 !important;width:auto !important}
  .yr-settings-tile .eyebrow{width:auto !important;text-align:left !important}
  .yr-settings-tile > div > div:last-child{flex-direction:row !important;gap:0 !important}
  .yr-settings-tile > div > div:last-child > div:first-child{display:none !important}
  .yr-settings-tile > div > div:last-child > div:last-child{width:42px !important;height:42px !important}
  .yr-settings-tile svg{width:20px !important;height:20px !important}
}

/* ============================================================
   Konkrete Suche
   ============================================================ */
/* Keine Filterleiste mehr. Ergebnisse = Standard-.unit-row-Kacheln direkt auf dem Hintergrund
   (kein Kachel-in-Kachel); Pager = Standard-.fcd-pager (Dots). */
.sx{display:flex;flex-direction:column;gap:14px;min-width:0}
.sx-note{margin:0;font-size:var(--fs-b);color:var(--ink-3);padding:12px 4px}
.sx-list{display:flex;flex-direction:column;gap:8px}

/* ============================================================
   Statistik page
   ============================================================ */
.stats-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--gap)}
/* Kachel folgt der Dashboard-Karte (.w in dashboard.html): Rand + harter Schlagschatten,
   beim Ueberfahren tieferer Schatten. Padding bleibt enger als --pad, die Diagramme sind darauf gerechnet. */
.stats-card{position:relative;background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--rule);box-shadow:0 6px 18px -10px color-mix(in oklch,var(--ink) 20%,transparent);padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;transition:box-shadow .18s ease}
.stats-card:hover{box-shadow:0 14px 32px -14px color-mix(in oklch,var(--ink) 26%,transparent)}
/* ---- BYOK „Eigene Klausur" Upload-Kachel (App-Schriften, zweispaltig) ---- */
.byok-upload-card{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--rule);box-shadow:0 6px 18px -10px color-mix(in oklch,var(--ink) 20%,transparent);padding:32px 36px;display:grid;grid-template-columns:1fr minmax(300px,420px);gap:40px;align-items:stretch}
.byok-upload-left{min-width:0}
/* Eyebrow + Überschrift exakt wie „Examen im Blick / 04. Juni 2027" (.exam-title / .exam-subtitle) */
.byok-upload-left .eyebrow{font-family:var(--display);font-size:var(--fs-s);letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-3);line-height:1.2}
.byok-upload-title{font-family:var(--display);font-size:var(--fs-h);font-weight:700;letter-spacing:-.012em;line-height:1.2;color:var(--ink);margin:2px 0 12px}
.byok-upload-lead{font-family:var(--sans);font-size:var(--fs-b);line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.byok-feature-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:13px}
.byok-feature-list li{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:600;color:var(--ink);font-size:var(--fs-b)}
.byok-feat-ico{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(16,123,108,.25)}
.byok-feat-ico svg{width:19px;height:19px}
.byok-note{display:flex;align-items:flex-start;gap:9px;background:var(--bg-soft);border-radius:var(--r-md);padding:11px 14px;font-family:var(--sans);font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
.byok-note svg{flex-shrink:0;margin-top:2px;color:var(--ink-3)}
.byok-note + .byok-note{margin-top:9px}
.byok-dropzone{border:2px dashed var(--rule);border-radius:var(--r-lg);padding:30px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg-card)}
.byok-dropzone:hover,.byok-dropzone.is-drag{border-color:var(--accent);background:var(--accent-soft,rgba(16,123,108,.06))}
.byok-drop-ico{margin-bottom:4px}
.byok-drop-title{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink)}
.byok-drop-sub{font-family:var(--sans);font-size:var(--fs-s);color:var(--ink-3)}
.byok-drop-link{background:none;border:none;padding:0;cursor:pointer;color:var(--accent);font:inherit;font-weight:700;text-decoration:underline}
.byok-drop-meta{font-family:var(--sans);font-size:var(--fs-s);color:var(--ink-3);font-weight:600;margin-top:2px}
.byok-drop-btn{margin-top:10px;display:inline-flex;align-items:center}
@media (max-width:820px){
  .byok-upload-card{grid-template-columns:1fr;gap:24px;padding:24px}
}
.stats-card h3{font-family:var(--display);font-weight:800;font-size:var(--fs-h);letter-spacing:-.01em;margin:0}
.stats-card .eyebrow{font-family:var(--display);font-weight:800;font-size:var(--fs-s);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* Drei Rechtsgebiete nebeneinander im Methoden-Profil. Unter 1100px faellt die
   Kachel ohnehin auf volle Breite; die Netze stapeln dann untereinander, weil
   drei 8-achsige Diagramme nebeneinander auf einem schmalen Schirm nichts mehr
   zeigen ausser Achsenbeschriftungen. */
.radar-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.radar-zelle{min-width:0;display:flex;flex-direction:column;gap:8px}
.radar-zelle-kopf{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--fs-s)}
.radar-zelle-kopf strong{font-weight:700;color:var(--ink)}
.radar-zelle-kopf span:last-child{color:var(--ink-3)}
.radar-zelle-kopf strong::after{content:"·";margin:0 2px 0 6px;color:var(--ink-3);font-weight:400}
/* Die Achsennamen skalieren nicht mit dem Netz, in der schmaleren Zelle
   brauchen sie deshalb eine eigene, kleinere Groesse. */
.radar-zelle .radar-label{font-size:0.74rem;font-weight:700}
@media (max-width:1100px){
  .radar-reihe{grid-template-columns:1fr;gap:28px}
  .radar-zelle{max-width:540px;margin:0 auto;width:100%}
  .radar-zelle .radar-label{font-size:0.9rem}
}
.sp-4{grid-column:span 4}
.sp-6{grid-column:span 6}
.sp-8{grid-column:span 8}
.sp-12{grid-column:span 12}
@media (max-width:1100px){ .sp-4,.sp-6,.sp-8{grid-column:span 12} }

.stats-kpi{display:flex;align-items:baseline;gap:8px}
.stats-kpi strong{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.025em;line-height:1}
.stats-kpi small{font-family:var(--display);font-weight:700;font-size:var(--fs-s);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}

.stats-bars{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;align-items:end;height:140px;padding:6px 0}
.stats-bar{display:flex;flex-direction:column-reverse;overflow:hidden;background:var(--accent);border-radius:6px 6px 2px 2px;min-height:4px;opacity:.55;transition:opacity .15s;position:relative}
.stats-bar.is-today{opacity:1}
.stats-bar:hover{opacity:.9}
.stats-bar-seg{display:block;width:100%}
.stats-bars-x{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;font-family:var(--display);font-weight:700;font-size:var(--fs-s);color:var(--ink-3);text-align:center;margin-top:4px}
.stats-bar-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;margin-top:12px;font-size:var(--fs-s);font-weight:600;color:var(--ink-3)}
.stats-bar-legend>span{display:inline-flex;align-items:center;gap:6px}

/* ============ Statistik: Mobile (<=640px) ============ */
@media (max-width:640px){
  /* Sicherheitsnetz: kein Chart darf die Seite horizontal aufziehen */
  .stats-card{padding:18px 16px;overflow-x:clip}
  /* Balken + X-Achse enger; Rand-Labels nach innen ausrichten, statt überzustehen */
  .stats-bars{gap:3px}
  .stats-bars-x{gap:3px;font-size:14px}
  .stats-bars-x span:first-child{text-align:left}
  .stats-bars-x span:last-child{text-align:right}
  .stats-bar-legend{gap:16px}
  /* Trefferquote: dichte Tabelle horizontal scrollbar statt abgeschnitten */
  .acc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px -16px 0;padding:0 16px}
  .acc-table-wrap > div{min-width:460px}
  /* Radar-Achsenbeschriftung kleiner, damit sie in die Kachel passt */
  .radar-label{font-size:14px !important}
}
/* Zurück-Button in der Gesetzessuche: beim Hover im Zivilrecht-Grün leuchten */
.law-back-btn{transition:border-color .15s,color .15s,box-shadow .15s,background .15s}
.law-back-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ink-inv);box-shadow:none}

/* Kennzahlen-Kacheln der Statistik (Minifaelle / Karteikarten / Skripte).
   Vorher steckte das alles in Inline-Styles - so greifen Umbruch und Mobilregeln. */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:10px}
.stat-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;border-radius:var(--r-md,8px);background:var(--bg-soft)}
.stat-tile.is-bare{padding:0;background:none}
/* Kennzahl mit Zeichen darueber: gerahmtes Kaestchen, Scheibe, Zahl, Label.
   Die Scheibe ist NEUTRAL, im Entwurf war jede gruen, auch die unter „3 von 10".
   Eine Farbe, die immer dasselbe sagt, sagt nichts; gefaerbt wird hier nur die
   Zahl, und nur dort wo es eine Schwelle gibt (faellig > 0). */
.stat-tile.is-icon{align-items:center;text-align:center;gap:7px;padding:16px 12px;background:var(--bg-card);border:1px solid var(--rule);border-radius:14px}
.stat-tile.is-icon .stats-kpi{justify-content:center}
.stat-tile.is-icon .stats-kpi strong{font-size:30px}
.stat-ico{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--bg-sunk);color:var(--ink-3)}
.stat-ico svg{width:19px;height:19px;display:block}
@media (max-width:600px){.stat-tile.is-icon{padding:13px 9px}.stat-tile.is-icon .stats-kpi strong{font-size:24px}.stat-ico{width:32px;height:32px}.stat-ico svg{width:16px;height:16px}}
.stat-tile-head{display:flex;align-items:center;gap:8px;min-width:0}
.stat-tile-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.stat-tile-lbl{font-size:var(--fs-s);color:var(--ink-3);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.stat-tile .stats-kpi{line-height:1}
.stat-meter{display:flex;height:8px;border-radius:var(--r-pill,99px);overflow:hidden;background:var(--bg-sunk)}
.stat-meter>span{display:block}
.stat-note{margin-top:8px;font-size:var(--fs-s);color:var(--ink-3);font-weight:600;line-height:1.5}
.stat-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
@media (max-width:600px){.stat-tiles{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}.stat-tile{padding:12px 13px}}

/* Die .bgbl-* Regeln sind entfallen, die Ansicht dazu gibt es nicht mehr. */

/* ── Plan-Setup Modal ─────────────────────────────────────────── */
.plan-setup-overlay{position:fixed;inset:0;background:oklch(0.24 0.015 200 / .45);z-index:900;display:grid;place-items:center;padding:20px;animation:planSetupOverlayIn .26s ease}
.plan-setup-modal{background:var(--bg-card);border-radius:var(--r-lg);width:min(560px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:var(--shadow-lift);overflow:hidden;animation:planSetupModalIn .3s cubic-bezier(.16,.84,.28,1) both;will-change:transform,opacity}
@keyframes planSetupOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes planSetupModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .plan-setup-modal{animation:planSetupOverlayIn .2s ease}
}
@keyframes pssStepFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.plan-setup-overlay .pss-field{text-align:center}

/* Header */
.plan-setup-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px}
.plan-setup-close{background:none;border:none;cursor:pointer;color:var(--ink-3);width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;transition:color .15s,background .15s;flex-shrink:0}
.plan-setup-close:hover{color:var(--ink);background:var(--rule)}

/* Step content */
.pss-content{display:flex;flex-direction:column;gap:18px}
/* Tab-Wechsel im Einstellungen-Modal: Inhalt sanft ein-/ausblenden statt hartem Umschalten.
   Jeder Tab rendert ein frisches .pss-content, daher spielt die Animation bei jedem Wechsel neu. */
.psm-body .pss-content{animation:pssTabFade .22s ease both}
@keyframes pssTabFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.psm-body .pss-content{animation:none}}
.pss-content h2{font-family:var(--display);font-weight:800;font-size:var(--fs-h);letter-spacing:-.01em;color:var(--ink);margin:0 0 2px}
.pss-content .pss-sub{font-size:var(--fs-s);color:var(--ink-3);line-height:1.55;margin:0}
.pss-field{display:flex;flex-direction:column;gap:8px}
/* Fragen-Ueberschriften im Setup: App-Stil (Display, kraeftig, normale Schreibweise)
   statt grauer Versalien-Balken, der graue Kasten (.pss-hint) bleibt den echten
   Hinweistexten vorbehalten. */
/* --radius und --surface gab es nie: die Variablen sind nirgends definiert, die
   Felder standen deshalb mit eckigen Ecken und durchsichtigem Grund da. Die
   Tokens dieses Projekts heissen --r-md und --bg. Aufgefallen ist es, als die
   Bundeslandwahl daneben ihre eigenen runden Ecken mitbrachte. */
.pss-field label{font-family:var(--display);font-weight:800;font-size:var(--fs-b);color:var(--ink);letter-spacing:normal;text-transform:none;line-height:1.4}
.pss-field input[type=date],.pss-field input[type=month],.pss-field select{padding:9px 12px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font-size:var(--fs-b);transition:border-color .15s;width:100%}
.pss-field input:focus{outline:none;border-color:var(--accent)}
.pss-err{font-size:var(--fs-s);color:var(--danger,#e53e3e);margin-top:8px}
.pss-ok{font-size:var(--fs-s);color:var(--accent);margin-top:8px}

/* ── Settings Modal wide layout ──────────────────────────────── */
/* Feste Hoehe fuer das Einstellungsfenster. Ohne sie richtet sich die Hoehe
   nach dem Inhalt: „Profil" ist kurz, „Zahlungen" lang, „Nutzung" laedt nach,
   und bei jedem Reiterwechsel sprang der ganze Rahmen auf ein neues Mass. Der
   Inhalt scrollt jetzt innen, der Rahmen steht still, und damit fuehlt sich
   jeder Wechsel an wie der ruhigste. */
.plan-setup-modal.psm-wide{width:min(760px,100%);height:min(720px,calc(100vh - 40px))}
.psm-layout{display:flex;flex:1;overflow:hidden}
.psm-nav{width:160px;flex-shrink:0;border-right:1px solid var(--rule);padding:16px 0;display:flex;flex-direction:column;gap:2px}
.psm-nav-item{background:none;border:none;cursor:pointer;text-align:left;padding:10px 20px;font-size:var(--fs-b);color:var(--ink-2);border-radius:0;transition:background .15s,color .15s;font-weight:500}
.psm-nav-item:hover{background:var(--surface-2,var(--rule));color:var(--ink)}
.psm-nav-item.active{color:var(--accent);background:var(--accent-soft,oklch(0.94 0.03 180));font-weight:700}
.psm-body{flex:1;overflow-y:auto;padding:24px}
.psm-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.psm-placeholder{padding:32px 0;color:var(--ink-3);font-size:var(--fs-s);text-align:center}
/* ── Settings Modal: Mobile (Vollbild-Sheet + horizontale Tabs) ── */
@media (max-width:600px){
  .plan-setup-overlay:has(.psm-wide){padding:0}
  .plan-setup-modal.psm-wide{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .psm-wide .psm-layout{flex-direction:column;min-height:0}
  .psm-wide .psm-nav{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--rule);padding:8px;gap:6px;flex-shrink:0;-webkit-overflow-scrolling:touch}
  .psm-wide .psm-nav-item{flex:0 0 auto;padding:8px 14px;border-radius:var(--r-pill);white-space:nowrap}
  .psm-wide .psm-body{padding:16px;-webkit-overflow-scrolling:touch}
  .psm-wide .psm-row-2{grid-template-columns:1fr}
  .psm-wide .plan-setup-header code{font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}
}
.pss-field input[type=text],.pss-field input[type=email],.pss-field input[type=password]{padding:9px 12px;border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font-size:var(--fs-b);transition:border-color .15s;width:100%}
.pss-field input[type=text]:focus,.pss-field input[type=password]:focus{outline:none;border-color:var(--accent)}

/* Daten-Tab Danger Actions */
.psm-danger-row{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.psm-danger-row > div strong{font-size:var(--fs-b);font-weight:700;color:var(--ink);display:block;margin-bottom:4px}
.psm-danger-row > div p{font-size:var(--fs-s);color:var(--ink-3);margin:0;line-height:1.5}
.psm-divider{border:none;border-top:1px solid var(--rule);margin:4px 0}

/* ── Einheitlicher Sektionskopf im Einstellungsfenster ──────────────────────
   Die vier Reiter hatten vorher jeder ihr eigenes Format: mal h2, mal h3 mit
   einer Schriftgroesse aus einer Variablen, die es gar nicht gibt (--fs-m),
   mal fette Zeilen ohne Ueberschrift; als Trenner mal ein inline gestyltes
   <hr>, mal .psm-divider, mal nichts.

   Ab hier gilt ueberall dasselbe: Ein Reiter besteht aus Sektionen, jede
   Sektion hat einen Kopf (Titel, darunter optional eine Zeile Erklaerung),
   getrennt werden sie durch .psm-divider. Titel und Erklaerung stehen dicht
   beieinander: .pss-content setzt 18 px Abstand zwischen alle Kinder, und
   der gehoert zwischen Sektionen, nicht zwischen eine Ueberschrift und ihren
   eigenen Untertitel. */
.pss-kopf{display:flex;flex-direction:column;gap:4px}
.pss-kopf h2{margin:0}
.pss-kopf .pss-sub{margin:0}
.btn-danger-outline{align-self:flex-start;padding:7px 14px;border-radius:var(--r-pill);border:none;background:oklch(0.52 0.2 25);color:#fff;font-size:var(--fs-s);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,transform .08s}
.btn-danger-outline:hover{background:oklch(0.45 0.22 25);transform:translateY(1px) scale(.97)}
.btn-danger-sm{padding:6px 12px;border-radius:var(--r-pill);border:none;background:oklch(0.52 0.2 25);color:#fff;font-size:var(--fs-s);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,transform .12s}
.btn-danger-sm:hover{background:oklch(0.45 0.22 25);transform:translateY(1px) scale(.97)}
/* Press-Feedback: Buttons drücken sich schon beim Hovern leicht rein (und beim Klick) */
.btn:hover,.btn-danger-outline:hover,.btn-danger-sm:hover,.btn-ghost-sm:hover{transform:translateY(1px) scale(.97)}
.btn:active,.btn-danger-outline:active,.btn-danger-sm:active,.btn-ghost-sm:active{transform:translateY(2px) scale(.95)}
.btn-ghost-sm{padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--rule);background:transparent;color:var(--ink-2);font-size:var(--fs-s);font-weight:600;cursor:pointer;white-space:nowrap}
/* Nur Deckkraft animieren: die Hoch-Variante traegt bereits ein translateY(-100%)
   im style-Attribut, eine transform-Animation wuerde es ueberschreiben. */
@keyframes yrdfPopIn{from{opacity:0}to{opacity:1}}
.pss-spinner{width:28px;height:28px;border:3px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
/* Warte-/Fehlerdecke waehrend der Plan erzeugt wird. Deckt Body UND Fusszeile ab,
   damit waehrend des Laufs nichts angeklickt werden kann. */
.plan-setup-modal{position:relative}
/* Fenster mit einem aufklappenden Auswaehler darin. .plan-setup-modal schneidet
   sonst alles ab, was ueber seinen Rand hinausragt, und das Menue der
   Bundeslandwahl haengt genau dort. */
.plan-setup-modal.psm-auswahl{overflow:visible}
.plan-setup-modal.psm-auswahl .pss-content{overflow:visible}
/* Die Nachfrage nach Bundesland und Name ist kein Einstellungsfenster, sondern
   eine einzelne Frage. Sie steht deshalb mittig statt links, und die
   Kopfzeile darueber traegt dieselbe Farbe wie der uebrige Text: sie ist hier
   die Ueberschrift und nicht die kleine graue Rubrik ueber einer Kachel. */
.plan-setup-modal.psm-nachfrage .plan-setup-header{justify-content:center;text-align:center}
.plan-setup-modal.psm-nachfrage .plan-setup-header .eyebrow{color:var(--ink)}
/* Blocksatz mit Trennung. Ohne hyphens reisst deutscher Blocksatz in einer so
   schmalen Spalte Luecken, die schlechter aussehen als der Flattersatz. */
.plan-setup-modal.psm-nachfrage .psm-nachfrage-text{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Today-setup overlay ──────────────────────────────────────── */
.today-setup-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:var(--r-lg);background:transparent;animation:overlayFadeIn .28s ease}
@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}
/* Mindesthoehe nur noch im Leerzustand: dort liegt die Auswahlkarte als
   Overlay (inset:0) ueber den geblurten Beispielzeilen und braucht eine
   Flaeche, die sie fuellen kann. Steht etwas offen, richtet sich die Kachel
   nach dem, was drin ist, hoechstens vier Zeilen (JE_SEITE), dann der Pager,
   dann der Fuss. Die feste Hoehe stammt aus der Zeit, als hier EINE
   Lerneinheit gross angezeigt wurde; bei einer einzigen Listenzeile blieb
   dadurch ein leeres Feld bis hinunter zur Fusszeile stehen. Die zweite
   Mindesthoehe (.cards-tab{min-height:300px} in dashboard.html) muss mit weg,
   sonst wird die Luecke nur kleiner statt zu verschwinden; deshalb beide
   Klassen im Selektor. Der Abstand zum Fuss kommt aus .w-freelern{gap:12px},
   .cards-tab-foot{margin-top:auto} laeuft ohne freie Flaeche auf 0. */
.w-freelern.cards-tab{min-height:0}
.w-freelern.cards-tab:has(.today-setup-overlay){min-height:360px}
.today-setup-card{position:relative;width:100%;max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;box-shadow:0 9px 22px -16px color-mix(in oklch,var(--ink) 24%,transparent);padding:var(--pad);transition:min-height .24s ease}
/* Sanfter Wechsel Intro <-> Rechtsgebiet-Auswahl (kein abruptes Umspringen) */
.setup-swap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;animation:setupSwapIn .24s ease}
@keyframes setupSwapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
/* „nächste LE" kommt von rechts hereingewischt, „vorige" von links */
@keyframes pageSlideInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes pageSlideInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* Horizontale Wische gehören der Kachel (Blättern), nicht dem Browser (Seite ziehen).
   Vertikales Scrollen der Seite bleibt erlaubt. */
.w-today,.w-freelern{touch-action:pan-y}
@media (prefers-reduced-motion: reduce){.setup-swap{animation:fadeOnly .2s ease}
  @keyframes fadeOnly{from{opacity:0}to{opacity:1}}
}
.free-learn-rg-row{display:flex;flex-direction:column;gap:8px;width:100%}
.free-learn-rg-btn{width:100%;justify-content:center}

/* ── Pager + Footer Abstände ──────────────────────────────────── */
.today-foot{margin-top:12px}
.today-pager{margin-top:8px;margin-bottom:4px}

/* ── Verwerfen-Button (inline unter Fortsetzen) ───────────────── */
.today-discard-btn{font-size:var(--fs-s,12px);font-weight:600;color:var(--danger,#dc2626);background:transparent;border:1.5px solid rgba(220,38,38,.3);border-radius:var(--r-sm,6px);padding:4px 12px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;margin-top:4px;align-self:flex-end}
.today-discard-btn:hover{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.55)}
/* Stack Fortsetzen + Verwerfen vertikal wenn beide vorhanden */
.today-actions:has(.today-discard-btn){flex-direction:column;align-items:flex-end;gap:4px}

/* ── Letzte Aktivität ──────────────────────────────────────────
   Schmale Kachel (span-4) neben der Klausurleistung. Zwei Zeilen je Eintrag:
   oben der Unterpunkt und wann, darunter die Formate mit ihrem Ergebnis.
   Beide kuerzen mit Ellipse statt umzubrechen, in vier Spalten waere eine
   dreizeilige Zeile keine Liste mehr. */
/* Die Kachel endet nach ihrem Inhalt, statt auf die Hoehe der Nachbarin
   gestreckt zu werden. .w traegt height:100%, und ein Grid-Element fuellt seine
   Reihe, bei einem einzigen Eintrag standen darunter 250 px Weiss (337 statt
   211). Nach OBEN begrenzt der Deckel von vier Eintraegen (slice in
   dashboard-app.jsx), die Kachel kann also weder ins Leere wachsen noch
   endlos lang werden. */
/* Beide Klassen im Selektor: .w{height:100%} steht im Style-Block von
   dashboard.html und damit NACH dieser Datei, bei gleicher Spezifitaet
   gewinnt das spaetere. .w.w-aktivitaet (0,2,0) sticht .w (0,1,0) unabhaengig
   von der Reihenfolge. */
.w.w-aktivitaet{align-self:start;height:auto}

/* Gleicher Schlagschatten wie bei der Klausurleistung. In dashboard.html traegt
   nur .w-examavg einen eigenen weichen Schatten; alle anderen Kacheln laufen auf
   --shadow-sm, und das ist gar kein Schatten, sondern eine 1-px-Haarlinie
   (0 1px 0 oklch(0.86 0.01 160)). Deshalb wirkten sie flacher.
   Beide Klassen im Selektor: .w{box-shadow:var(--shadow-sm)} steht in
   dashboard.html NACH dieser Datei und gewaenne bei gleicher Spezifitaet.
   Der Hover bleibt unveraendert, auch das hat .w-examavg so, und eine Kachel,
   die beim Ueberfahren die Tiefe wechselt waehrend die Nachbarin stehen bleibt,
   faellt sofort auf. */
.w.w-freelern,.w.w-aktivitaet{box-shadow:0 9px 22px -16px color-mix(in oklch,var(--ink) 24%,transparent)}
.w.w-freelern:hover,.w.w-aktivitaet:hover{box-shadow:0 9px 22px -16px color-mix(in oklch,var(--ink) 24%,transparent)}
.akt-liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.akt-zeile{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:12px;padding:9px 8px;background:none;border:0;border-radius:10px;cursor:pointer;font-family:inherit;text-align:left;color:inherit;transition:background .13s ease}
.akt-zeile:hover{background:var(--bg-soft)}
/* Gefuellte Scheibe mit weissem Zeichen, dieselbe Bauart wie .gcat-orb im
   Gebiets-Hub, nur kleiner. Der Farbtraeger ist hier das Rechtsgebiet und nicht
   die Markenfarbe: in einer gemischten Liste ist die Farbe die Auskunft, welches
   Gebiet die Zeile betrifft. Kein Schlagschatten, vier davon untereinander
   waeren unruhig, im Hub steht nur einer je Zeile und der traegt ihn. */
.akt-icon{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff}
.akt-icon svg{width:53%;height:53%;display:block}
.akt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.akt-kopf b{font-family:var(--display);font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akt-kopf i{flex:0 0 auto;font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.akt-leer{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-3)}

/* ── FreeLernWidget ── */
.w-freelern{--today-action-w:106px}
/* Fortsetzen + Verwerfen nebeneinander statt untereinander */
.w-freelern .today-actions{flex-direction:row;align-items:center;gap:8px}
.w-freelern .today-actions:has(.today-discard-btn){flex-direction:row;align-items:center;gap:8px}
.w-freelern .today-actions:has(.today-discard-btn) .btn{width:auto;min-width:90px}
.w-freelern .today-discard-btn{margin-top:0;align-self:center;order:-1}

/* ── Misc helpers for modal ──────────────────────────────────── */
.btn-link{background:none;border:none;cursor:pointer;color:var(--accent);font-size:var(--fs-s);font-weight:600;padding:0;text-decoration:underline;text-underline-offset:2px}
.btn-link:hover{color:var(--ink)}
/* Akzentfarbe als animierbare Custom-Properties registrieren, damit der Rechtsgebiet-Wechsel die Farbe WEICH morpht
   (statt hart zu springen / einzeln nachzuziehen). Diese Namen werden nur hier (rg-card) genutzt → global unbedenklich. */
@property --a{syntax:'<color>';inherits:true;initial-value:#2d7f71}
@property --a-d{syntax:'<color>';inherits:true;initial-value:#23685c}
@property --a-s{syntax:'<color>';inherits:true;initial-value:#e4f7ef}
@property --a-m{syntax:'<color>';inherits:true;initial-value:#8ccabd}
@property --a-m2{syntax:'<color>';inherits:true;initial-value:#a9d8cd}
.rg-card{position:relative;display:flex;flex-direction:column;text-align:left;cursor:pointer;border:1px solid var(--rule);border-radius:22px;background:linear-gradient(180deg,#fff,#fbfcfa);box-shadow:0 20px 46px rgba(20,35,32,.10),0 6px 14px rgba(20,35,32,.045);padding:26px 26px 24px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.22,1,.36,1),border-color .22s cubic-bezier(.22,1,.36,1)}
.rg-card:hover{transform:translateY(-4px);box-shadow:0 30px 62px rgba(20,35,32,.15),0 10px 22px rgba(20,35,32,.06)}
.rg-card h3{margin:0 0 10px;font-family:var(--display);font-size:26px;line-height:1.15;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
/* Illustrationen je Rechtsgebiet einfärben (CSS überschreibt die Presentation-Attribute) */
.rg-card [fill="#2d7f71"],.rg-card [fill="#3a9384"]{fill:var(--a)}
.rg-card [fill="#23685c"]{fill:var(--a-d)}
.rg-card [fill="#e4f7ef"]{fill:var(--a-s)}
.rg-card [fill="#8ccabd"],.rg-card [fill="#8fbdb4"]{fill:var(--a-m)}
.rg-card [fill="#a9d8cd"],.rg-card [fill="#cfeee4"],.rg-card [fill="#dbe6e2"]{fill:var(--a-m2)}
.rg-card [stroke="#2d7f71"]{stroke:var(--a)}
.rg-card [stroke="#23685c"]{stroke:var(--a-d)}
.rg-card [stroke="#a3d3c8"],.rg-card [stroke="#9fc4bb"]{stroke:var(--a-m)}
.rg-card [stroke="#d7ebe4"],.rg-card [stroke="#dcefe9"],.rg-card [stroke="#c2e1d8"]{stroke:var(--a-m2)}

/* ============ Minilernhub (Hauptpunkt-Klick → Unterpunkte + Format-Hub + Analyse + Statistik) ============ */
.mlh{padding:2px 0 12px;position:relative}
@property --mlh-pct{syntax:'<number>';inherits:true;initial-value:0}
@property --mlh-beam{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes mlhBeam{to{--mlh-beam:360deg}}
@keyframes mlhPulse{0%,100%{opacity:.5}50%{opacity:1}}
.mlh .subpage-title{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em;color:var(--ink);margin:0}

/* ── Unterpunkt-Hub: Kopf + Punkte-Scheibe in der Eck-Mulde + 4 Format-Kacheln (grauer Rahmen) ── */
/* Karte als SVG-Silhouette (.uhub-shape), gleiche Silhouette wie der Gebiets-Hub (ghubPath):
   Eck-Mulde oben rechts, in der die Punkte-Scheibe sitzt. Höhe folgt dem Inhalt (ResizeObserver). */
.uhub{position:relative;padding:30px 34px 26px;overflow:visible;container-type:inline-size;isolation:isolate;
  /* Lokale Tokens, global gibt es nur --danger; hier braucht es drei Zustandsfarben. */
  --uh-ok:oklch(0.55 0.14 150);--uh-warn:oklch(0.66 0.15 62);--uh-grey:oklch(0.86 0.008 220)}
.uhub-shape{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;filter:drop-shadow(0 18px 34px color-mix(in oklch,var(--ink) 20%,transparent))}
.uhub-shape path{fill:var(--bg-card);stroke:var(--rule);stroke-width:1.5px;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.uhub-body{position:relative;z-index:2}

/* Kopf links (Titel + Diagnose), Kennzahlen rechts. Senkrechter Strich trennt die Blöcke. */
.uhub-top{display:grid;grid-template-columns:.86fr 1.14fr;gap:0;align-items:stretch}
.uhub-top>.uhub-headcol{padding-right:32px;border-right:1px solid var(--rule)}
.uhub-num{padding-left:32px;min-width:0}
.uhub-ax{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.uhub-ax span{font-size:12.5px;font-weight:650;color:var(--ink-3);margin-left:6px;text-transform:none;letter-spacing:0}
.uhub-hr{margin:16px 0 15px;border:0;border-top:1px solid var(--rule)}

/* MULDEN-AUSSPARUNG.
   Geometrie aus ghubPath: die Mulde reicht bis y=171,85 bei viewBox-Breite 1200, also bis
   14,32 % der Kartenbreite, nach unten UND nach links. Sie WÄCHST mit der Karte; eine feste
   Höhenreservierung wäre entweder zu groß (Loch unter dem Stand) oder bei breiten Fenstern zu klein.
   Deshalb ein FLOAT in exakt den Maßen der Mulde: Fließtext umfließt ihn, Blöcke mit eigenem
   Formatierungskontext (display:flow-root) weichen ihm aus, und alles UNTERHALB nimmt automatisch
   die volle Spaltenbreite. Kein Wort und kein Trennstrich kreuzt die Mulde, bei jeder Breite.
   Breite 14,32cqw = Abstand vom rechten Spaltenrand bis zur Muldenkante + 34px Innenabstand,
   also derselbe Abstand zur Mulde, den alle anderen Elemente zum Kartenrand haben. */
.uhub-num::before{content:"";float:right;width:calc(14.32cqw + 12px);height:calc(14.32cqw - 30px);shape-outside:inset(0);pointer-events:none}/* Blöcke, die neben der Mulde liegen können, müssen ihr ausweichen statt darunterzulaufen. */

.uhub-hr,.uhub-stock,.uhub-leg,.uhub-stoff{display:flow-root}
.uhub-hr{height:0;border:0;border-top:1px solid var(--rule);margin:16px 0 15px}
.uhub-stand-note{margin-top:6px;font-size:13px;font-weight:650;color:var(--ink-3)}
.uhub-stand-note b{color:var(--uh-ok);font-weight:800}
.uhub-stand-note.warn b{color:var(--uh-warn)}

/* Der eine Satz, der die Prüfungsschritte zusammenfasst. Liegt unterhalb der Mulde → volle Breite. */
.uhub-schwach{margin:9px 0 0;font-size:14px;line-height:1.55;font-weight:650;color:var(--ink-2)}
.uhub-schwach b{color:var(--danger);font-weight:800}
.uhub-weak-none{margin-top:12px;display:flex;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:650;color:var(--ink-3);line-height:1.45}
.uhub-weak-none svg{width:14px;height:14px;flex:none;margin-top:1px}
.uhub-weak-none b{color:var(--ink-2);font-weight:750}

/* EINE GRAMMATIK für jedes Stück des vorgegebenen Stoffs. Vorher war das Skript eine Textzeile mit
   Punkt und die Karten ein Balken, zwei Darstellungen für dieselbe Frage, direkt untereinander;
   genau daran ist der Blick hängengeblieben. Jetzt: Name links, Klartext rechts, Balken darunter.
   Der Punkt vor dem Namen ist weg, die Farbe steckt im Balken, wo sie eine Menge bedeutet und
   nicht bloß „angefasst/nicht angefasst". */
.uhub-stoff{margin-top:12px;display:flow-root}
.uhub-stoff-hd{display:flex;align-items:baseline;gap:12px}
.uhub-stoff-nm{font-size:13.5px;font-weight:800;color:var(--ink-2);letter-spacing:-.01em}
/* Der Klartext rechts ist IMMER gedämpft, in jedem Zustand, egal ob „3 von 8 Fragen",
   „keine von 30 geübt" oder „gibt es noch keins". Er beziffert nur, was der Balken schon zeigt.
   Zwei Grautöne nebeneinander (mal ink-2, mal ink-3) sahen aus wie eine Wertung, die es nicht gibt. */
.uhub-stoff-v{margin-left:auto;font-size:13px;font-weight:650;color:var(--ink-3);text-align:right}
.uhub-stoff-aus{color:var(--ink-3);font-weight:650}
.uhub-stoff .uhub-stock{margin-top:7px}
/* Die Legende erklärt die FARBEN, nicht die Zeile, deshalb steht sie einmal unter beiden Balken
   und trägt keine Zahlen mehr. Die Zahlen stehen im Klartext rechts, wo man sie liest. */
.uhub-leg-sum{margin-top:11px}
.uhub-stock{margin-top:9px;display:flex;height:14px;border-radius:6px;overflow:hidden;background:var(--bg-sunk)}
.uhub-stock i{display:block;height:100%}
.uhub-leg{margin-top:9px;display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.uhub-leg span{display:inline-flex;align-items:center;gap:6px}
.uhub-leg i{width:9px;height:9px;border-radius:3px;display:block}
.uhub-leg .d{color:var(--ink-3);font-weight:650}

/* Kopf hält Abstand zur Mulde (wie .ghead im Gebiets-Hub). */
.uhub-headcol{min-width:0;min-height:calc(13cqw - 30px)}
.uhub-crumb{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.uhub-crumb .sep{width:4px;height:4px;border-radius:50%;background:#c2ccd4}
.uhub-crumb .geb{color:var(--ink-2)}
/* Gleiche Größe wie „Noch nicht gefestigt" (.uhub-stand-w, 26px). Der Titel war mit 38px die
   lauteste Stimme auf der Seite, dabei sagt er nur, WO man ist. Die Aussage steht rechts. Beide
   sind jetzt gleichrangig, und 26px ist ohnehin die H2-Stufe unserer Skala; 38 war eine Sondergröße. */
.uhub-title{margin:9px 0 0;font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.022em;line-height:1.1;color:var(--ink)}
.uhub-para{margin-top:8px;font-size:17px;font-weight:600;color:var(--ink-3)}
/* 2026-08-20: Der Struktur-Satz unter der Norm, im Blocksatz wie die Fliesstexte
   der Klausur-Rueckmeldung. Keine eigene Maximalbreite: Die Spalte hat rechts
   32px Innenabstand zur Trennlinie, genau wie die Spalte daneben links. Eine
   zusaetzliche Begrenzung des Absatzes haette den Abstand auf einer Seite
   groesser gemacht als auf der anderen, sichtbar als schiefer Satzspiegel. */
.uhub-lead{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* NAVIGATION, KEINE KENNZAHLENWAND. Vier Kreise, darunter der Name, mehr braucht ein Weg nicht.
   Der Kreis liegt leicht erhaben auf der Karte (unser schwarzer Schatten, kein farbiger), beim
   Öffnen füllt er sich mit --brand: dasselbe Grün wie der Fortsetzen-Button und der Pfeil in der
   Schnellsuche. NICHT --accent, das ist innerhalb der Karte auf die Gebietsfarbe umgebogen und
   würde je nach Rechtsgebiet ein anderes Grün/Blau/Lila ergeben. */
.uhub-fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.uhub-fmt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px 4px;background:none;border:0;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.uhub-fmt:focus-visible{outline:none}
.uhub-fmt:focus-visible .uhub-fmt-circle{outline:2px solid var(--brand);outline-offset:3px}
.uhub-fmt-circle{position:relative;display:grid;place-items:center;width:82px;height:82px;border-radius:999px;background:var(--bg-card);border:1.5px solid var(--rule);color:var(--ink-3);box-shadow:0 8px 20px -14px rgba(19,52,59,.28);transition:transform .16s cubic-bezier(.34,1.4,.64,1),box-shadow .16s ease,background .16s ease,border-color .18s ease,color .16s ease}
.uhub-fmt-circle svg{width:32px;height:32px}
.uhub-fmt:hover .uhub-fmt-circle{transform:translateY(-3px);background:var(--bg-soft);box-shadow:0 14px 26px -16px rgba(19,52,59,.3)}
/* Beim Klick eindrücken, dieselbe Bewegung wie .btn-primary, nicht anheben. */
.uhub-fmt:active .uhub-fmt-circle{transform:translateY(1px);box-shadow:0 0 0 transparent}
.uhub-fmt-name{font-size:14px;font-weight:750;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .16s ease}
/* GEÖFFNET: der Kreis ist gefüllt, nicht nur umrandet. Ein Zustand, den man auf einen Blick sieht. */
.uhub-fmt.is-open .uhub-fmt-circle{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 10px 22px -14px rgba(19,52,59,.4)}
.uhub-fmt.is-open:hover .uhub-fmt-circle{background:color-mix(in oklch,var(--brand) 88%,#000)}
.uhub-fmt.is-open .uhub-fmt-name{color:var(--ink)}
/* LAUFENDE SITZUNG. Keine Kennzahl, sondern eine offene Handlung, der einzige Grund, hier noch
   etwas anzuzeigen. Ohne den Punkt müsste man aufklappen, um zu merken, dass etwas angefangen ist.
   FARBE = --brand, NICHT --accent (siehe oben). */
.uhub-fmt.is-run .uhub-fmt-circle{border-color:color-mix(in oklch,var(--brand) 55%,var(--rule));color:var(--brand)}
.uhub-fmt.is-run.is-open .uhub-fmt-circle{color:#fff}
.uhub-fmt-dot{position:absolute;top:5px;right:5px;width:13px;height:13px;border-radius:999px;background:var(--brand);border:2px solid var(--bg-card)}
.uhub-fmt.is-open .uhub-fmt-dot{background:#fff;border-color:var(--brand)}
.uhub-crow.is-run{background:color-mix(in oklch,var(--brand) 5%,transparent)}
.uhub-pill.is-run{background:var(--brand);color:#fff;font-weight:800}
/* EINBLENDEN BEIM ÖFFNEN DES UNTERPUNKTS.
   Dieselbe Bewegung wie beim Rechtsgebiet (fade-up) und in derselben Staffelung: erst der Kopf mit
   Diagnose, dann die rechte Spalte, dann die vier Kacheln, einzeln, nicht als Block. `backwards`
   statt `both`, sonst überschriebe die Animation den Hover-Lift der Kacheln.
   Die Karte selbst wird bei jedem Themenwechsel neu montiert (key={sel.code}), sonst liefe das nur
   einmal pro Sitzung. */
/* Solange der Stand lädt, bleibt die Karte unsichtbar (aber im Layout), sie animiert NICHT auf
   halben Daten los. Sonst wächst sie mitten in der Bewegung, sobald die Zahlen eintreffen. */
.uhub.is-pending>*{opacity:0}
.uhub.is-ready .uhub-headcol,.uhub.is-ready .uhub-num{animation:fade-up .42s cubic-bezier(.22,1,.3,1) backwards}
.uhub.is-ready .uhub-headcol{animation-delay:.02s}
.uhub.is-ready .uhub-num{animation-delay:.10s}
.uhub.is-ready .uhub-fmts>.uhub-fmt{animation:fade-up .40s cubic-bezier(.22,1,.3,1) backwards}
.uhub.is-ready .uhub-fmts>.uhub-fmt:nth-child(1){animation-delay:.16s}
.uhub.is-ready .uhub-fmts>.uhub-fmt:nth-child(2){animation-delay:.22s}
.uhub.is-ready .uhub-fmts>.uhub-fmt:nth-child(3){animation-delay:.28s}
.uhub.is-ready .uhub-fmts>.uhub-fmt:nth-child(4){animation-delay:.34s}

/* AUFKLAPPEN. grid-template-rows 0fr→1fr ist die einzige Technik, die eine unbekannte Inhaltshöhe
   sauber animiert, dieselbe wie bei den Hauptpunkten (.collapse-anim). Vorher wurde der Block
   eingehängt und die Karte sprang. */
.uhub-expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.uhub-expand.is-open{grid-template-rows:1fr}
.uhub-expand-inner{overflow:hidden;min-height:0}
.uhub-cases{margin-top:16px;border-top:1px solid var(--rule);padding-top:8px}
/* Die Zeilen laufen nacheinander ein, beim Aufklappen UND beim Wechsel des Formats (key={lastFmt}
   montiert den Block neu). Das ist der Effekt, der die Liste „aufblättern" lässt. */
.uhub-cases>*{animation:fade-up .34s cubic-bezier(.22,1,.3,1) backwards}
.uhub-cases>*:nth-child(1){animation-delay:.06s}
.uhub-cases>*:nth-child(2){animation-delay:.12s}
.uhub-cases>*:nth-child(3){animation-delay:.17s}
.uhub-cases>*:nth-child(4){animation-delay:.22s}
.uhub-cases>*:nth-child(5){animation-delay:.26s}
.uhub-cases>*:nth-child(6){animation-delay:.30s}
.uhub-cases>*:nth-child(n+7){animation-delay:.33s}
/* Wer Bewegung abgestellt hat, bekommt keine. Eine Animation, die man nicht abschalten kann, ist
   keine Verzierung mehr, sondern eine Zumutung. */
@media (prefers-reduced-motion: reduce){
  .uhub .uhub-headcol,.uhub .uhub-num,.uhub .uhub-fmts>.uhub-fmt,.uhub-cases>*{animation:none}
  .uhub.is-pending>*{opacity:1}
  .uhub-expand{transition:none}
}
.uhub-cases-head{display:flex;align-items:center;gap:9px;padding:6px 4px 10px;font-size:14px;font-weight:700;color:var(--ink-2)}
.uhub-crow{width:100%;display:flex;align-items:center;gap:14px;padding:11px 8px;background:none;border:0;border-bottom:1px solid color-mix(in oklch,var(--ink) 5%,transparent);border-radius:10px;cursor:pointer;font:inherit;text-align:left;color:inherit;transition:background .13s ease}
.uhub-crow:last-child{border-bottom:0}
.uhub-crow:hover{background:var(--bg-soft)}
.uhub-crow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.uhub-crow-tx{flex:1;min-width:0}
.uhub-crow-tx b{display:block;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhub-crow-tx i{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* KARTEIKARTEN-KATEGORIEN als Akkordeon, wie die Hauptpunkte im Rechtsgebiet. Vorher waren es
   nummerierte Links („1 · Standard · Öffnen"): eine Liste von Türen, hinter denen man erst sieht,
   ob überhaupt etwas liegt. Jetzt steht der Bestand schon in der Zeile, und der Klick klappt die
   Stapel auf. Erst der Klick auf einen STAPEL startet etwas. */
.uhub-kat{border-bottom:1px solid color-mix(in oklch,var(--ink) 5%,transparent)}
.uhub-kat:last-child{border-bottom:0}
.uhub-kat-head{border-bottom:0}
.uhub-kat-head:disabled{cursor:default;opacity:.6}
.uhub-kat-head:disabled:hover{background:none}
/* Kein Chevron, keine Zählmarke: Die Zeile sagt schon, was drinliegt („1 Stapel · 0 von 30 sitzen").
   Ein Pfeil daneben verspricht dasselbe ein zweites Mal. */
.uhub-kat-meta{flex:none;font-size:13px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.uhub-kat.is-open .uhub-kat-meta{color:var(--ink-2)}
.uhub-kat>.collapse-anim{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.uhub-kat.is-open>.collapse-anim{grid-template-rows:1fr}
/* Der senkrechte Strich ist DERSELBE wie in der Rechtsgebiets-Ansicht (.gquote): 3px breit,
   abgerundet, in der Akzentfarbe zu 18 %, nicht 2px kantig und grau. Zwei Ansichten, die dasselbe
   meinen (»das hier gehört unter jenes«), dürfen es nicht verschieden zeichnen. */
.uhub-kat-list{position:relative;padding:2px 0 10px 20px;margin-left:6px}
.uhub-kat-list::before{content:"";position:absolute;left:0;top:4px;bottom:10px;width:3px;border-radius:99px;
  background:color-mix(in oklch,var(--accent) 18%,transparent)}
.uhub-krow{padding-left:10px}
/* Stapel-Zeile: Papierkorb (nur bei laufender Sitzung) und Zahnrad rechts, davor die Pille.
   Die Zeile selbst ist ein div mit role=button, Knopf im Knopf wäre ungültig. */
.uhub-krow-acts{flex:none;display:inline-flex;align-items:center;gap:8px}
/* Zahnrad = derselbe Kreis wie der Papierkorb (.fc-stackrow-discard): Rand + Kartenhintergrund.
   Vorher lag ein weißer Kreis auf weißem Grund, man sah nur das Icon schweben. */
.uhub-krow-gear{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid var(--rule);
  background:var(--bg-card);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s}
.uhub-krow-gear svg{width:16px;height:16px}
.uhub-krow-gear:hover{background:var(--bg-soft);color:var(--ink-2);border-color:color-mix(in oklch,var(--ink) 18%,var(--rule));transform:rotate(25deg)}
.uhub-krow-gear.is-busy{opacity:.6;pointer-events:none}
.uhub-krow-gear.is-busy svg{animation:spin 1s linear infinite}
/* Stapel wird gerade erzeugt (nach einer Klausur). Nicht klickbar, es gibt noch nichts zu üben. */
.uhub-krow.is-busy,.uhub-krow.is-fail{cursor:default}
.uhub-krow.is-busy:hover,.uhub-krow.is-fail:hover{background:none}
.uhub-krow.is-fail .uhub-pill{background:color-mix(in oklch,var(--danger) 12%,var(--bg-soft));color:var(--danger)}
.uhub-spin{width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid color-mix(in oklch,var(--ink) 12%,transparent);border-top-color:var(--brand);
  animation:spin .8s linear infinite}

/* FALL-ZEILE (Minifall wie Klausur): Schwierigkeit · Verlauf · Punkte-Kreis.
   Der Kreis steht ganz rechts, weil er die Antwort auf die Frage ist, die man beim Draufschauen
   hat. Ohne Bewertung bleibt er leer und grau, keine erfundene Null. */
.uhub-frow-acts{flex:none;display:inline-flex;align-items:center;gap:10px}
/* EINE Farbe für ALLE Stufen. Vorher wurde die Schrift je Stufe dunkler, das liest sich wie eine
   Wertung („schwer" = wichtiger?), obwohl die Schwierigkeit nur eine Eigenschaft des Falls ist.
   Dasselbe gilt für die Zeit: beides sind Fakten über den Fall, keine Aussage über dich. */
.uhub-diff,.uhub-time{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;
  letter-spacing:.02em;white-space:nowrap;background:var(--bg-soft);color:var(--ink-3)}
.uhub-time{font-variant-numeric:tabular-nums}
.uhub-pts{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.uhub-pts.is-empty{background:var(--bg-sunk);color:var(--ink-3)}
@media(max-width:640px){.uhub-diff{display:none}}   /* Zeit bleibt, sie entscheidet, ob man jetzt anfängt */
@media(max-width:640px){.uhub-kat-meta{display:none}}
/* Skript-Zeile: keine Ziffer davor (es gibt nur eins), dafür ein echter Start-Knopf statt eines
   Textlinks. „Öffnen" beschreibt eine Datei, „Starten" eine Übung, und das ist es. */
.uhub-crow-solo{padding-left:4px}
/* Markengrün (--brand), nicht die Gebietsfarbe: derselbe Ton wie der Schnellsuche-Pfeil.
   BEWEGUNG WIE .btn-primary (Freies Lernen): beim Hover DRÜCKT er sich ein, dunkler und
   translateY(+1px), nicht heller und angehoben. Ein Knopf, der sich beim Berühren hebt, fühlt sich
   an, als wiche er aus. */
/* Schatten sind NEUTRAL (aus der Tintenfarbe), nie eingefärbt. Ein grün leuchtender Schlagschatten
   sieht aus wie ein Fehler im Rendering, und wir haben ihn nirgends sonst. */
.uhub-crow-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 18px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:800;letter-spacing:.01em;line-height:1;
  box-shadow:0 6px 16px -10px color-mix(in oklch,var(--ink) 40%,transparent);
  transition:background .1s,transform .1s,box-shadow .1s}
.uhub-crow-btn:hover{background:color-mix(in oklch,var(--brand) 84%,#000);transform:translateY(1px);box-shadow:0 0 0 transparent}
.uhub-crow-btn:active{background:color-mix(in oklch,var(--brand) 74%,#000);transform:translateY(2px)}
/* Unterbrochene Sitzung: Die Zeile ist dann NICHT mehr als Ganzes klickbar, sonst löst ein
   beiläufiger Klick daneben etwas aus, das man nicht wollte. Es gibt genau zwei Wege: fortsetzen
   oder wegwerfen. */
.uhub-crow.is-static{cursor:default}
.uhub-crow.is-static:hover{background:none}
.uhub-crow-acts{flex:none;display:inline-flex;align-items:center;gap:8px}
.uhub-crow-acts .uhub-crow-btn{cursor:pointer;border:0}
/* Fortsetzen/Verwerfen in der Skript-Liste (dieselben Knöpfe wie bei den Karteikarten-Stapeln). */
.skript-resume-wrap{flex:none;display:inline-flex;align-items:center;gap:10px}
.skript-resume-note{font-size:12.5px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.uhub-pill{flex:none;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:800;background:var(--bg-sunk);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .uhub{background:var(--bg-card);border:1.5px solid var(--rule);border-radius:24px;box-shadow:0 12px 26px -16px rgba(19,52,59,.2)}
  .uhub-shape{display:none}
  .uhub-headcol{max-width:none;min-height:0}
  /* Vier Kreise passen auch schmal noch nebeneinander, anders als vier Kacheln, die dafür
     zweizeilig werden mussten. Nur enger und etwas kleiner. */
  .uhub-fmts{grid-template-columns:repeat(4,1fr);gap:6px}
  .uhub-fmt-circle{width:64px;height:64px}
  .uhub-fmt-circle svg{width:25px;height:25px}
  .uhub-fmt-name{font-size:12.5px}
  .uhub-title{font-size:23px}   /* gleich groß wie .uhub-stand-w mobil */
  /* Zwei Spalten untereinander: der senkrechte Strich wird zum waagerechten. */
  .uhub-top{grid-template-columns:1fr}
  .uhub-top>.uhub-headcol{padding-right:0;border-right:0}
  .uhub-num{padding-left:0;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
  /* Platz für die Scheibe NUR den Zeilen geben, die neben ihr liegen, nicht der ganzen Spalte.
     Sonst wird die Diagnose-Box auf ein Wort pro Zeile gequetscht. */
  .uhub-crumb,.uhub-title,.uhub-para{padding-right:96px}
}
/* Bei jedem Unterpunkt-Wechsel (Rad-Dreh → key={sel.code} remountet .mlh-detail) blenden die KOMPLETTEN Kacheln
   (Hub, Analyse, Statistik) langsam NACHEINANDER ein, nicht nur die Inhalte. */
.mlh-detail>*{animation:fade-up .5s cubic-bezier(.22,1,.3,1) backwards}
.mlh-detail>*:nth-child(1){animation-delay:.04s}
.mlh-detail>*:nth-child(2){animation-delay:.18s}
.mlh-detail>*:nth-child(3){animation-delay:.32s}
.mlh-cases{margin-top:14px;position:relative}
.mlh-cases-head{display:flex;align-items:center;gap:10px;padding:4px 6px 13px;border-bottom:1px solid #eef3f6;margin-bottom:4px}
.mlh-cases-title{font-family:var(--display);font-size:14px;font-weight:800;color:var(--ink-2);letter-spacing:.015em}
.mlh-cases-count{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-family:var(--display);font-size:14px;font-weight:800;line-height:1}
.tone-minifaelle{background:#fdf0e3;color:#f28a2e}
.tone-klausuren{background:#eeecfd;color:#8b74f2}
.mlh-empty{color:var(--ink-3);font-size:14px;padding:8px 2px}
/* Analyse-Panel */
.mlh-panel{margin-top:16px;background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px;box-shadow:0 10px 30px -18px color-mix(in oklch,var(--ink) 26%,transparent)}
.mlh-p-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mlh-p-head h3{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink);margin:0}
.mlh-p-badge{font-size:14px;font-weight:800;padding:4px 10px;border-radius:var(--r-pill,999px)}
.mlh-p-sub{font-size:14px;color:var(--ink-2);margin:8px 0 14px}
.mlh-alist{display:flex;flex-direction:column;gap:9px}
.mlh-arow{display:flex;align-items:flex-start;gap:13px;border:1px solid color-mix(in oklch,var(--ink) 7%,transparent);border-radius:13px;padding:12px 14px;background:color-mix(in oklch,var(--ink) 2%,var(--bg-card))}
.mlh-anum{width:26px;height:26px;border-radius:8px;background:color-mix(in oklch,var(--accent) 12%,var(--bg-card));color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-size:14px;font-weight:800;flex:none}
.mlh-atext{flex:1;font-size:14px;color:var(--ink);line-height:1.45}
/* Statistik-Leiste */
.mlh-stats{margin-top:16px;display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 10px 30px -18px color-mix(in oklch,var(--ink) 26%,transparent)}
.mlh-stat{padding:16px 18px;display:flex;flex-direction:column;gap:3px;border-right:1px solid color-mix(in oklch,var(--ink) 7%,transparent)}
.mlh-stat:last-child{border-right:none}
.mlh-s-lbl{font-size:14px;color:var(--ink-3)}
.mlh-s-val{font-family:var(--display);font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.mlh-mini-bar{height:6px;border-radius:99px;background:color-mix(in oklch,var(--ink) 10%,transparent);margin-top:6px;overflow:hidden;max-width:120px}
.mlh-mini-bar>i{display:block;height:100%;background:var(--accent);border-radius:99px}
/* Hauptpunkt-Karte als Hub-Einstieg (Pfeil rechts, kein Accordion mehr) */
.haupt-section.is-hub .haupt-head{cursor:pointer}
.haupt-section.is-hub .haupt-right{display:flex;align-items:center;gap:12px}
@media(max-width:1080px){.mlh-stats{grid-template-columns:repeat(2,1fr)}.mlh-stat:nth-child(2n){border-right:none}}
@media(max-width:640px){.mlh-stats{grid-template-columns:1fr}.mlh-stat{border-right:none;border-bottom:1px solid color-mix(in oklch,var(--ink) 7%,transparent)}}
/* ── Gebiets-Hub (Lerneinheiten): EINE Karte mit Eck-Notch + Ø-Scheibe + Hauptpunkt-Accordion ── */
/* Karte als SVG-Silhouette (.gshape): gerade Oberkante -> konvexe Schulter -> konkaver Bogen um die
   Ø-Scheibe -> konvexe Schulter -> rechte Kante, sonst 30u-Rundungen. Dadurch echte Mulde MIT weichen
   Übergängen (keine spitzen Ecken) statt Radial-Gradient-Trick. Pfad in 1200er-Space; die Höhe folgt
   dem Inhalt per ResizeObserver (uniforme Skalierung, daher runde Ecken unverzerrt). Fläche/Rand/Schatten
   liegen auf dem Pfad; Inhalt (z-index 4) und Scheibe (z-index 5) darüber. */
/* Karten-Schatten als box-shadow auf .gscene (NICHT als SVG-filter): ein drop-shadow-Filter auf der
   .gshape wird beim Aufklappen jeden Frame neu gerastert (die Karte wächst) -> Ruckeln/Hänger. Der
   box-shadow ist günstig und wird nicht neu berechnet. Negativer Spread + Abwärts-Offset halten den
   Schatten unten, damit er nicht in die Eck-Mulde blutet. */
.gscene{position:relative;margin:6px auto 0;width:100%;container-type:inline-size;box-shadow:0 12px 22px -10px rgba(19,52,59,.13)}
.gshape{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.gshape path{fill:var(--bg-card);stroke:var(--rule);stroke-width:1.5px;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
/* Konzentrisch zum Mulden-Bogen, VERIFIZIERT: Bogen-Zentrum (1127.15,72.85)u = 6.07cqw von rechts/oben,
   Disc-Box 12.4cqw ⇒ right/top = 6.07−6.2 = −0.13cqw; Spalt konstant 0.93cqw (min=max) entlang des Bogens. */
/* Die Mulde oben rechts zeichnet ghubPath fuer BEIDE Huebe, hier sitzt die Scheibe.
   Im Unterpunkt-Hub blieb die Mulde jahrelang leer, weil niemand etwas hineinsetzte. */
.gdisc{position:absolute;right:-.13cqw;top:-.13cqw;width:12.4cqw;height:12.4cqw;z-index:5;filter:drop-shadow(0 8px 18px color-mix(in oklch,var(--ink) 22%,transparent))}
/* Der Unterpunkt-Hub ist schmaler als der Gebiets-Hub; die Scheibe bekommt eine
   Untergrenze, damit die Zahl darin auch dort lesbar bleibt. */
.uhub-disc{width:max(72px,12.4cqw);height:max(72px,12.4cqw)}
.gdisc svg{width:100%;height:100%}
.gdisc .num{font-family:var(--display);font-weight:800}
.gcontent{position:relative;z-index:4;padding:44px 46px 30px}
.ghead{max-width:56cqw;min-width:0;min-height:calc(13cqw - 44px)}
.gkicker{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.gtitle{margin:8px 0 0;font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.022em;line-height:1.08;color:var(--ink)}
.gmeta{margin-top:8px;font-size:16px;font-weight:600;color:var(--ink-3)}
.gsection{margin:26px 0 8px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid color-mix(in oklch,var(--ink) 6%,transparent)}
.gsection h2{margin:0;font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.gsection span{font-size:14px;font-weight:600;color:var(--ink-3)}
.gcats{list-style:none;margin:16px 0 0;padding:0}
.gcat{border-bottom:1px solid color-mix(in oklch,var(--ink) 5%,transparent)}
.gcat:last-child{border-bottom:0}
.gcat-head{width:100%;display:flex;align-items:center;gap:16px;padding:15px 6px;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;border-radius:12px;transition:background .14s ease}
.gcat-head:hover{background:var(--bg-soft)}
.gcat-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gcat-orb{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 4px 10px -4px color-mix(in oklch,var(--ink) 35%,transparent)}
.gcat-orb svg{width:47%;height:47%}
.gcat-txt{flex:1;min-width:0}
.gcat-txt b{display:block;font-size:16px;font-weight:750;letter-spacing:-.005em;color:var(--ink)}
.gcat-meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:14px;font-weight:600;color:var(--ink-3);flex-wrap:wrap}
/* 2026-08-20: .gtag ist entfallen, das Relevanz-Etikett in der Hauptpunkt-Zeile
   (Kernbereich / Examensrelevant / Ueberblick) faellt mit der Spalte
   state_structural_relevance weg. */
.gchev{flex:none;width:17px;height:17px;color:var(--ink-3);transition:transform .2s cubic-bezier(.3,1,.32,1),color .15s ease}
.gcat-head:hover .gchev,.gsrow:hover .gchev{transform:translateX(3px)}
.gcat-head[aria-expanded="true"] .gchev{transform:rotate(90deg)}
.gfold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,1,.32,1)}
.gfold.open{grid-template-rows:1fr}
.gfold-in{overflow:hidden;min-height:0;position:relative;padding-left:58px}
.gfold.open .gfold-in{padding-bottom:10px}
/* Vertikaler Strich mittig unter dem Hauptpunkt-Icon: Orb-Mitte = 6px (Head-Padding) + 21px = 27px;
   Strich 3px breit -> left 25.5px zentriert ihn exakt unter dem Icon. */
.gquote{position:absolute;left:25.5px;top:4px;bottom:12px;width:3px;border-radius:99px;background:color-mix(in oklch,var(--accent) 18%,transparent)}
.gsrow{width:100%;display:flex;align-items:center;gap:13px;padding:10px 6px 10px 8px;background:none;border:0;border-bottom:1px solid color-mix(in oklch,var(--ink) 4%,transparent);border-radius:10px;cursor:pointer;font-family:inherit;text-align:left;color:inherit;opacity:0;transform:translateY(4px);transition:opacity .24s ease var(--d,0ms),transform .24s cubic-bezier(.3,1,.32,1) var(--d,0ms),background .13s ease}
.gfold.open .gsrow{opacity:1;transform:none}
.gsrow:last-child{border-bottom:0}
.gsrow:hover{background:var(--bg-soft)}
.gstxt{flex:1;min-width:0}
.gstxt b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.gstxt i{display:block;margin-top:2px;font-style:normal;font-size:14px;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2026-08-20: Die kleine Scheibe der Unterpunkt-Zeile. Dieselbe Lesart wie beim
   Rechtsgebiet, nur in Zeilengroesse: Bogen = Punkte/18, Zahl = Ø Punkte. */
.gsring{flex:none;width:60px;height:60px;display:block}
.gsring svg{width:100%;height:100%;display:block}
.gsring .num{font-family:var(--display);font-weight:800}
.gppill{flex:none;min-width:58px;text-align:center;padding:4px 10px;border-radius:99px;font-size:14px;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.gppill.none{background:var(--bg-soft);color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .gscene{animation:mlhProtoRise .4s cubic-bezier(.3,1,.32,1) both}
  .gcontent>*{animation:mlhProtoRise .34s cubic-bezier(.3,1,.32,1) .12s both}
  .gdisc{animation:gPop .45s cubic-bezier(.3,1.3,.5,1) .2s both}
  .gcat{animation:mlhProtoRise .3s cubic-bezier(.3,1,.32,1) both;animation-delay:calc(.2s + var(--i,0)*30ms)}
}
@keyframes gPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@media(max-width:720px){
  .gcontent{padding:22px 16px 16px}
  .ghead{max-width:none;padding-right:96px}
  .gtitle{font-size:26px}
  .gdisc{width:max(15.2cqw,92px);height:max(15.2cqw,92px)}
  .gsection span{display:none}
  .gfold-in{padding-left:44px}
  .gquote{left:25.5px}
}
.mlh .mlh-cases{margin:0;position:relative}
.mlh .mlh-cases-head{display:flex;align-items:center;gap:9px;padding:4px 6px 12px;border-bottom:1px solid #eef3f6;margin-bottom:4px}
.mlh .mlh-cases-title{font-family:inherit;font-size:14px;font-weight:700;color:#45536a;letter-spacing:.015em}
.mlh .mlh-cases-count{min-width:20px;height:20px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-family:inherit;font-size:14px;font-weight:800}
.mlh .tone-minifaelle{background:#fdf0e3;color:#f28a2e}
.mlh .tone-klausuren{background:#eeecfd;color:#8b74f2}
.mlh .tone-karteikarten{background:#e5f1fc;color:#3f87f5}
.mlh .tone-skripte{background:#e2f6f3;color:#16b3a8}
.mlh .mlh-empty{color:#8b95a4;font-size:14px;padding:12px 6px}
.mlh .mlh-detail{display:none}
@keyframes mlhProtoRise{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}}
@keyframes mlhProtoFade{from{opacity:0}to{opacity:1}}
@keyframes mlhProtoOwlIn{from{opacity:0;transform:translateX(-2.4cqw) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes mlhProtoBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(.35cqw)}}
@keyframes mlhProtoDraw{from{stroke-dashoffset:var(--ring-start-offset,33)}to{stroke-dashoffset:var(--ring-offset,0)}}
@keyframes mlhProtoPop{from{opacity:0;transform:translateX(-50%) scale(.4);transform-origin:center}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes mlhProtoTwinkle{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mlhProtoRowIn{from{opacity:0;transform:translateY(.9cqw)}to{opacity:1;transform:none}}
@media(max-width:720px){
  .mlh .mlh-cases-title{font-size:16px}.mlh .mlh-empty{font-size:14px}
}

/* ===== Schemata / Definitionen Sub-Ansichten ===== */
.rg-sub{padding:4px 0 12px}
.rg-sub-loading,.rg-sub-empty{color:var(--ink-3);font-size:16px;padding:14px 2px}
.rg-sub .haupt-list .haupt-section{margin-bottom:10px}
.schema-sub.is-empty .subcat-head{cursor:default}
.schema-sub.is-empty .subcat-chev{visibility:hidden}
.schema-detail{padding:2px 24px 18px 46px}
.schema-modal{position:fixed;inset:0;z-index:60;background:rgba(15,20,18,.5);display:grid;place-items:center;padding:24px;animation:rgfadein .15s ease}
.schema-modal-box{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);max-width:760px;width:100%;max-height:86vh;overflow:auto;padding:30px 32px;position:relative}
.schema-modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);color:var(--ink-3)}
.schema-modal-close:hover{background:var(--accent-soft);color:var(--accent)}
.schema-modal-kat{font-family:var(--display);font-weight:700;font-size:var(--fs-s);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.schema-modal-head h2{font-family:var(--display);font-weight:800;font-size:26px;color:var(--ink);margin:4px 0 4px}
.schema-modal-par{font-size:16px;color:var(--accent);font-weight:700}
.schema-obersatz{font-style:italic;color:var(--ink-2);margin:14px 0 8px;padding-left:12px;border-left:3px solid var(--accent)}
.schema-tree{list-style:none;margin:8px 0 0;padding:0;contain:layout}
.schema-tree .schema-tree{margin-left:18px;border-left:1px dashed var(--rule);padding-left:14px}
.schema-tree li{margin:7px 0}
.st-row{display:flex;gap:8px;align-items:baseline}
.st-nr{font-family:var(--display);font-weight:800;color:var(--accent);min-width:26px}
.st-titel{font-weight:700;color:var(--ink)}
.st-text{margin:3px 0 3px 34px;color:var(--ink-2);font-size:16px;line-height:1.5}
.def-detail{padding:2px 24px 18px 46px}
.def-detail-text{margin:6px 0 0;color:var(--ink-2);line-height:1.6;text-align:justify;hyphens:auto}
/* Verknüpfte Definitionen im Schema-Text: dezenter Inline-Link + Panel am Ende */
.def-term{display:inline;border:0;background:none;padding:0;margin:0;font:inherit;font-weight:600;color:var(--accent);cursor:help;text-decoration:none}
.def-term:hover,.def-term.is-active{color:var(--accent);opacity:.8}
.def-pop{box-sizing:border-box;background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 12px 30px -12px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.03);padding:12px 14px;display:flex;flex-direction:column;gap:6px;text-align:left;font-weight:400;animation:def-pop-in .12s ease}
@keyframes def-pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.def-pop-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.def-pop-head strong{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)}
.def-pop-head em{font-style:normal;font-size:14px;font-weight:700;color:var(--ink-3)}
.def-pop-close{margin-left:auto;border:0;background:none;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.def-pop-body{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.def-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.def-item{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-md,12px);padding:16px 18px}
.def-item-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.def-item-head h4{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);margin:0}
.def-item-par{font-size:14px;color:var(--accent);font-weight:700}
.def-item-shared{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-soft);padding:2px 7px;border-radius:var(--r-pill)}
.def-item-text{color:var(--ink-2);font-size:16px;line-height:1.5;margin:0}
@keyframes rgfadein{from{opacity:0}to{opacity:1}}

@media (max-width:540px){
  .pss-sub{grid-template-columns:1fr}
  .plan-setup-modal{max-height:95vh}
}

/* ---------- Karteikarten: Platzhalter-Stapel („wird erstellt" / fehlgeschlagen) ---------- */
.fc-folder-pending{cursor:default}
.fc-folder-pending .fc-folder-content h4{opacity:.75}
.fc-pending-note{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:var(--fs-s);color:var(--ink-3)}
.fc-pending-note.is-err{color:var(--danger)}
.fc-gen-spinner{width:14px;height:14px;flex:0 0 auto;border:2px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}