:root{
  /* Helle Stufenleiter wie im Dunkelmodus: Seite grau, Flächen darüber heller */
  --bg:#eceef1; --paper:#ffffff; --sunk:#f7f8fa; --raise:#ffffff;
  --line:#d5d7dd; --line2:#e3e5ea; --hair:#eaecf0;
  --txt:#1d1d1f; --txt2:#3a3a3c; --dim:#6e6e73; --dim2:#8a8a90;
  --acc:#1d1d1f; --acc-hi:#000000; --on-acc:#ffffff;
  --acc-soft:#eef0f4; --acc-line:#b8b8bf;
  --gold:#a56a10; --gold-soft:#fdf4e2; --gold-line:#e8cf9a;
  --ok:#1a7f4b; --ok-soft:#e8f5ee; --ok-line:#a8dcc0;
  --warn:#a76b12; --bad:#c0392b; --bad-soft:#fdecea; --bad-line:#f0b8b2;
  --sel:#e6e6ea;
  --glass:rgba(236,238,241,.80);
  /* Heller Modus: warmer Sonnenaufgang – oben warm, unten kühl */
  --grad:
    radial-gradient(1150px 800px at 2% -16%, rgba(255,178,66,.62), transparent 58%),
    radial-gradient(1000px 880px at 100% -6%, rgba(255,108,146,.50), transparent 56%),
    radial-gradient(1250px 950px at 34% 116%, rgba(52,208,162,.46), transparent 58%),
    radial-gradient(820px 680px at 92% 92%, rgba(168,132,255,.30), transparent 60%);
  /* etwas kräftiger, damit die weiße Auswahl auf dem hellen Schalter abhebt */
  --sh1:0 1px 3px rgba(0,0,0,.10);
  --sh2:0 2px 6px rgba(0,0,0,.06), 0 12px 32px -14px rgba(0,0,0,.20);
  --sh3:0 4px 12px rgba(0,0,0,.09), 0 24px 56px -20px rgba(0,0,0,.26);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --spring:cubic-bezier(.32,.72,0,1);
  --ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#000000; --paper:#1c1c1e; --sunk:#2c2c2e; --raise:#242426;
  --line:#3a3a3c; --line2:#2c2c2e; --hair:#242426;
  --txt:#f5f5f7; --txt2:#d8d8dc; --dim:#a1a1a6; --dim2:#78787d;
  --acc:#f5f5f7; --acc-hi:#ffffff; --on-acc:#1d1d1f;
  --acc-soft:#2c2c2e; --acc-line:#4a4a4e;
  --gold:#e8b23a; --gold-soft:#2a2213; --gold-line:#4d3d1c;
  --ok:#30d158; --ok-soft:#142a1b; --ok-line:#2c5a38;
  --warn:#ffd60a; --bad:#ff453a; --bad-soft:#2e1614; --bad-line:#5c2a25;
  --sel:#3a3a3c;
  --glass:rgba(0,0,0,.72);
  /* Dunkler Modus: kühles Nordlicht – gespiegelte Anordnung, damit der
     Wechsel zwischen hell und dunkel sofort sichtbar ist */
  --grad:
    radial-gradient(1150px 820px at 100% -14%, rgba(122,92,255,.42), transparent 58%),
    radial-gradient(1050px 880px at 0% 4%, rgba(38,196,170,.36), transparent 56%),
    radial-gradient(1250px 980px at 62% 118%, rgba(255,140,60,.30), transparent 58%),
    radial-gradient(820px 700px at 14% 96%, rgba(226,72,130,.26), transparent 60%);
  --sh1:0 1px 2px rgba(0,0,0,.5);
  --sh2:0 2px 8px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
  --sh3:0 4px 14px rgba(0,0,0,.6), 0 24px 56px -20px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;
  /* Kein Gummiband am oberen Rand. Beim Überscrollen schaute man auf dem
     Handy sonst kurz hinter den festen Farbschleier und der Milchglas-Kopf
     wurde neu gezeichnet - das sah aus wie ein Flackern. */
  overscroll-behavior-y:none}
body{background:var(--bg);color:var(--txt);overscroll-behavior-y:none;
  /* dvh: die ein- und ausfahrende Adressleiste ändert vh dauernd */
  min-height:100vh;min-height:100dvh;
  font:400 16px/1.55 var(--sans);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Farbschleier liegt fest hinter dem Inhalt und scrollt nicht mit. Eigene
   Ebene (translateZ), damit er beim Scrollen nicht neu gemalt wird, und
   großzügig über den Rand hinaus, damit beim Wippen nichts frei liegt. */
body::before{content:"";position:fixed;inset:-15% -10%;z-index:-1;background:var(--grad);
  pointer-events:none;animation:washIn 1.1s var(--ease) both;
  transform:translateZ(0);backface-visibility:hidden}
@keyframes washIn{from{opacity:0}to{opacity:1}}
::selection{background:var(--sel);color:var(--txt)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;letter-spacing:inherit}
input{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.hide{display:none !important}
.spacer{flex:1}
.row{display:flex;gap:10px;flex-wrap:wrap}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Sticky-Kopf mit Milchglas ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);margin-bottom:40px;
  /* eigene Ebene: sonst zeichnet das Handy die Milchglasfläche bei jedem
     Scrollschritt neu und der Kopf zittert */
  transform:translateZ(0);will-change:backdrop-filter}
header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 0 12px}
.mark{font-size:21px;font-weight:650;letter-spacing:-.028em;line-height:1.1}
.mark span{display:block;font-size:11px;font-weight:500;letter-spacing:-.005em;
  color:var(--dim2);margin-top:3px}
.tools{display:flex;align-items:center;gap:8px}
.lang{display:flex;background:var(--sunk);border-radius:99px;padding:2.5px}
.lang button{color:var(--dim);padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;
  transition:color .2s var(--ease),background .25s var(--spring)}
.lang button:hover{color:var(--txt)}
.lang button.on{background:var(--paper);color:var(--txt);box-shadow:var(--sh1)}
.themebtn{width:32px;height:32px;display:grid;place-items:center;color:var(--dim);
  border-radius:99px;transition:color .2s,background .2s}
.themebtn:hover{color:var(--txt);background:var(--sunk)}
.themebtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;animation:iconIn .45s var(--spring)}
@keyframes iconIn{from{opacity:0;transform:rotate(-70deg) scale(.6)}to{opacity:1;transform:none}}
[data-theme="dark"] .themebtn .i-sun{display:none}
[data-theme="light"] .themebtn .i-moon{display:none}
nav{display:flex;gap:4px;padding-bottom:8px}
nav button{padding:7px 14px;font-size:13.5px;font-weight:550;color:var(--dim);border-radius:99px;
  transition:color .2s var(--ease),background .25s var(--spring)}
nav button:hover{color:var(--txt);background:var(--sunk)}
nav button.on{color:var(--txt);background:var(--sunk);font-weight:600}

.wrap{max-width:920px;margin:0 auto;padding:0 24px 80px}

/* ---------- Ansichtswechsel ---------- */
section:not(.hide){animation:viewIn .42s var(--spring) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Blöcke ---------- */
.block{margin-bottom:44px}
.block > h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim2);
  font-weight:650;margin-bottom:14px}
.card{background:var(--paper);border-radius:18px;box-shadow:var(--sh2);overflow:hidden}

/* ---------- Kapitel ---------- */
.chap + .chap{border-top:.5px solid var(--line2)}
.chap-head{display:flex;align-items:center;gap:15px;padding:15px 20px}
.chap-head .ttl{flex:1;min-width:0}
.chap-head .ttl b{display:block;font-size:16px;font-weight:600;letter-spacing:-.021em;line-height:1.3}
.chap-head .ttl span{color:var(--dim2);font-size:12.5px;letter-spacing:-.005em}
.count{color:var(--dim2);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.expand{width:30px;height:30px;color:var(--dim2);display:grid;place-items:center;border-radius:99px;
  transition:transform .35s var(--spring),color .2s,background .2s}
.expand svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.expand:hover{color:var(--txt);background:var(--sunk)}
.expand.open{transform:rotate(90deg)}
.secs{padding:0 20px 14px 50px;display:none;flex-direction:column;gap:2px}
.secs.open{display:flex;animation:secsIn .34s var(--spring) both}
@keyframes secsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.secs label{display:flex;align-items:center;gap:13px;padding:6px 0;font-size:14px;
  color:var(--dim);transition:color .18s;cursor:pointer}
.secs label:hover{color:var(--txt)}

.cb{appearance:none;width:20px;height:20px;border:1.5px solid var(--line);border-radius:99px;
  flex:none;position:relative;cursor:pointer;background:var(--paper);
  transition:background .25s var(--spring),border-color .2s,transform .2s var(--spring)}
.cb:hover{border-color:var(--dim2)}
.cb:active{transform:scale(.9)}
.cb:checked{background:var(--acc);border-color:var(--acc)}
.cb:checked::after{content:"";position:absolute;left:6.6px;top:3.2px;width:4.6px;height:9px;
  border:solid var(--on-acc);border-width:0 2px 2px 0;transform:rotate(43deg);
  animation:tick .3s var(--spring)}
@keyframes tick{from{opacity:0;transform:rotate(43deg) scale(.4)}to{opacity:1;transform:rotate(43deg) scale(1)}}
.cb.mixed{background:var(--dim2);border-color:var(--dim2)}
.cb.mixed::after{content:"";position:absolute;left:4.4px;top:8.4px;width:9px;height:0;
  border-top:2px solid var(--on-acc);transform:none;animation:none}

/* ---------- Bedienelemente ---------- */
.seg{display:inline-flex;flex-wrap:wrap;background:var(--sunk);border-radius:12px;padding:3px;gap:2px}
.seg button{padding:8px 15px;font-size:13.5px;font-weight:550;color:var(--dim);border-radius:9px;
  transition:color .2s var(--ease),background .3s var(--spring),transform .2s var(--spring)}
.seg button:hover:not(:disabled):not(.on){color:var(--txt)}
.seg button:active:not(:disabled){transform:scale(.96)}
.seg button.on{background:var(--paper);color:var(--txt);font-weight:600;box-shadow:var(--sh1)}
.seg button:disabled{opacity:.32;cursor:not-allowed}
.field{margin-bottom:26px}
.field > label{display:block;font-size:12.5px;color:var(--dim2);margin-bottom:10px;font-weight:550}
.hint{font-size:13px;color:var(--dim2);margin-top:10px;max-width:62ch;line-height:1.5}

.btn{background:var(--acc);color:var(--on-acc);font-weight:600;padding:12px 24px;border-radius:99px;
  font-size:15px;letter-spacing:-.015em;
  transition:background .2s,transform .22s var(--spring),box-shadow .2s;box-shadow:var(--sh1)}
.btn:hover{background:var(--acc-hi);box-shadow:var(--sh2)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--sunk);color:var(--txt);font-weight:550;box-shadow:none}
.btn.ghost:hover{background:var(--line2);box-shadow:none}
.btn.sm{padding:8px 16px;font-size:13.5px}
.btn.quiet{background:none;color:var(--dim);border:1px solid var(--line);font-weight:500;box-shadow:none}
.btn.quiet:hover{background:var(--sunk);color:var(--txt);box-shadow:none}

/* ---------- Lernen ---------- */
.bar{height:4px;background:var(--line2);margin-bottom:14px;border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--acc);border-radius:99px;
  transition:width .55s var(--spring)}
.meta{display:flex;align-items:center;gap:12px;color:var(--dim2);font-size:13px;
  font-variant-numeric:tabular-nums;margin-bottom:22px}
.meta .tag{max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.meta .sep{color:var(--line)}
.meta .ok{color:var(--ok);font-weight:600} .meta .bad{color:var(--bad);font-weight:600}

.stage{min-height:290px;display:flex;flex-direction:column;justify-content:center;
  background:var(--paper);border-radius:22px;padding:52px 36px;text-align:center;box-shadow:var(--sh2)}
.stage.in{animation:cardIn .46s var(--spring) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.stage.flipme{cursor:pointer;transition:box-shadow .3s var(--ease),transform .3s var(--spring)}
.stage.flipme:hover{box-shadow:var(--sh3);transform:translateY(-2px)}
.stage.flipme:active{transform:scale(.995)}
.qlabel{font-size:12px;color:var(--dim2);margin-bottom:20px;font-weight:550;letter-spacing:-.005em}
.qword{font-size:46px;font-weight:700;line-height:1.08;letter-spacing:-.035em;word-break:break-word}
.qword .art{color:var(--dim2);font-weight:400;letter-spacing:-.02em}
.qword.sentence{font-size:25px;font-weight:500;line-height:1.5;letter-spacing:-.022em;
  max-width:22em;margin:0 auto}
.blank{display:inline-block;padding:.04em .42em .02em;margin:0 .08em;white-space:pre;
  border-radius:6px;background:var(--gold-soft);border-bottom:2.5px solid var(--gold);
  color:var(--gold);font-weight:700;letter-spacing:.13em}
.synnote{text-align:center;font-size:13.5px;color:var(--ok);font-weight:550;
  background:var(--ok-soft);border-radius:10px;padding:8px 14px;margin:0 auto 4px;width:fit-content;
  max-width:100%;animation:tipIn .36s var(--spring) both}
.qsub{color:var(--dim);font-size:14px;margin-top:18px;min-height:26px}
.qsub .val{font-size:17px;color:var(--txt);font-weight:550;letter-spacing:-.018em}
.tipbtn{font-size:13px;color:var(--gold);font-weight:600;padding:6px 14px;border-radius:99px;
  background:var(--gold-soft);transition:transform .22s var(--spring),filter .2s}
.tipbtn:hover{filter:brightness(.96)}
.tipbtn:active{transform:scale(.94)}
.tiplabel{font-size:12px;color:var(--dim2);font-weight:500;margin-right:9px}
.tipwrap{animation:tipIn .34s var(--spring) both}
@keyframes tipIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.flipnote{color:var(--dim2);font-size:12.5px;margin-top:30px}

.answer{margin-top:32px;padding-top:26px;border-top:.5px solid var(--line);text-align:left;
  animation:rise .46s var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.aword{font-size:32px;font-weight:650;text-align:center;color:var(--ok);line-height:1.18;
  letter-spacing:-.03em;word-break:break-word;margin-bottom:14px}
.aword.wrong{color:var(--bad)}
.kv{display:flex;gap:16px;margin-top:12px;font-size:14px;align-items:baseline}
.kv b{color:var(--dim2);font-weight:550;flex:none;width:92px;font-size:12.5px;letter-spacing:-.005em}
.kv span{color:var(--txt2)}
.kv em{color:var(--dim);font-style:normal;font-size:14.5px;line-height:1.45}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:34px}
.opt{padding:15px 17px;background:var(--sunk);border:1.5px solid transparent;border-radius:14px;
  text-align:left;font-size:15.5px;font-weight:500;display:flex;align-items:center;gap:13px;
  min-height:54px;animation:optIn .42s var(--spring) both;
  transition:border-color .2s,background .2s,transform .22s var(--spring)}
@keyframes optIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.opt:hover:not(:disabled){border-color:var(--acc-line);background:var(--acc-soft)}
.opt:active:not(:disabled){transform:scale(.975)}
.opt .k{width:21px;height:21px;border-radius:99px;background:var(--paper);color:var(--dim2);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;box-shadow:var(--sh1)}
.opt.good{border-color:var(--ok);background:var(--ok-soft);animation:pop .42s var(--spring)}
.opt.good .k{background:var(--ok);color:var(--paper)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft);animation:shake .42s var(--ease)}
.opt.bad .k{background:var(--bad);color:var(--paper)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}22%{transform:translateX(-6px)}
  48%{transform:translateX(5px)}74%{transform:translateX(-3px)}}
.opt:disabled{cursor:default}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px}
.arts .opt{justify-content:center;font-size:21px;font-weight:650;letter-spacing:-.025em}

.typebox{display:flex;gap:10px;margin:34px auto 0;max-width:460px;width:100%}
.typebox input{flex:1;min-width:0;padding:13px 18px;background:var(--sunk);border:1.5px solid transparent;
  border-radius:14px;font-size:17px;outline:none;text-align:center;font-weight:500;
  letter-spacing:-.02em;transition:border-color .2s,background .2s}
.typebox input::placeholder{color:var(--dim2);font-weight:400}
.chars{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chars button{min-width:38px;padding:7px 10px;border-radius:10px;background:var(--sunk);
  font-size:16px;font-weight:600;line-height:1;box-shadow:var(--sh1);
  transition:transform .18s var(--spring),background .18s,color .18s}
.chars button:hover{background:var(--acc-soft);color:var(--txt)}
.chars button:active{transform:scale(.88)}
.typebox input:focus{border-color:var(--acc-line);background:var(--paper)}

.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.rate button{padding:14px 6px;border-radius:14px;background:var(--paper);box-shadow:var(--sh1);
  font-weight:600;font-size:14px;letter-spacing:-.015em;
  transition:transform .22s var(--spring),color .2s,box-shadow .2s}
.rate button small{display:block;font-weight:400;font-size:11px;color:var(--dim2);margin-top:4px}
.rate button:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.rate button:active{transform:scale(.96)}
.rate .r1:hover{color:var(--bad)}
.rate .r2:hover{color:var(--warn)}
.rate .r3:hover{color:var(--ok)}
.ctrls{display:flex;gap:10px;margin-top:18px;justify-content:center;flex-wrap:wrap}

/* ---------- Übersicht ---------- */
.search{width:100%;padding:12px 18px;background:var(--sunk);border:1.5px solid transparent;
  border-radius:99px;outline:none;font-size:15px;transition:border-color .2s,background .2s}
.search:focus{border-color:var(--acc-line);background:var(--paper)}
/* Feste Spaltenbreiten. Ohne sie richtet sich die Tabelle nach dem Inhalt:
   bei den langen französischen Beispielsätzen rutschte die Beispielspalte aus
   dem Bild und jede Zeile wurde drei Zeilen hoch. */
table{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed}
col.c-de{width:23%} col.c-fm{width:12%} col.c-nl{width:22%} col.c-ex{width:43%}
th{text-align:left;color:var(--dim2);font-size:12px;padding:10px 14px;font-weight:550;
  position:sticky;top:76px;background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  z-index:2;border-bottom:.5px solid var(--line)}
td{padding:11px 14px;border-bottom:.5px solid var(--hair);vertical-align:top}
tbody tr{transition:background .16s var(--ease)}
tbody tr:hover td{background:var(--sunk)}
/* Umbrechen erlaubt - bei festen Spalten würde nowrap sonst überstehen. */
td.de{font-weight:600;letter-spacing:-.02em;overflow-wrap:break-word}
td.de .art{color:var(--dim2);font-weight:400}
td.fm{color:var(--dim);font-size:13px;overflow-wrap:break-word}
td.ex{color:var(--dim);font-size:13.5px;line-height:1.45}
td.nl{color:var(--txt2)}
.grp{font-size:12px;color:var(--dim2);font-weight:650;padding:28px 14px 8px;
  border-bottom:.5px solid var(--line)}
tbody tr:first-child .grp{padding-top:10px}
/* Kein eigener Scroll-Container: sonst klebt der Tabellenkopf an dessen
   Oberkante statt am Fenster und verdeckt die erste Zeile. Dank fester
   Spaltenbreiten läuft die Tabelle ohnehin nicht mehr über. */
.scroll{overflow:visible}
.dot{display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:11px;
  vertical-align:middle}

/* ---------- Ergebnis ---------- */
.done{text-align:center;padding:64px 26px;background:var(--paper);border-radius:22px;box-shadow:var(--sh2)}
.done h2{font-size:34px;letter-spacing:-.035em;font-weight:700;margin-bottom:12px}
.done p{color:var(--dim);margin:0 0 36px;font-size:15.5px}
.score{display:flex;justify-content:center;gap:10px;margin:0 auto 36px;width:fit-content;flex-wrap:wrap}
.score div{padding:18px 28px;min-width:116px;background:var(--sunk);border-radius:16px;
  animation:cardIn .5s var(--spring) both}
.score div:nth-child(2){animation-delay:.07s}
.score div:nth-child(3){animation-delay:.14s}
.score b{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1.15;letter-spacing:-.03em}
.score span{color:var(--dim2);font-size:12.5px;font-weight:500;margin-top:4px;display:block}

footer{color:var(--dim2);font-size:12.5px;margin-top:60px;padding-top:22px;
  border-top:.5px solid var(--line);line-height:1.8}

@media(max-width:640px){
  .wrap{padding:0 18px 60px}
  .topbar{margin-bottom:30px}
  .mark{font-size:18px}
  .qword{font-size:34px}
  .qword.sentence{font-size:20px;line-height:1.55}
  .opts{grid-template-columns:1fr}
  .kv b{width:78px}
  .stage{padding:38px 22px;min-height:0;border-radius:18px}
  td.ex{display:none}
  .score div{padding:14px 18px;min-width:96px}
  th{top:68px}
  .done{padding:44px 20px}
  .done h2{font-size:27px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important}
}
@media print{
  .topbar,#v-setup,#v-study,#v-done,footer,.search,#browse-info,body::before{display:none !important}
  #v-browse{display:block !important;animation:none !important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .wrap{max-width:none;padding:0}
  .scroll{max-height:none;overflow:visible}
  th{position:static;background:#fff;color:#000;border-color:#000;backdrop-filter:none}
  td,.grp{border-color:#bbb}
  td.ex{display:table-cell}
  .dot{display:none}
  tbody tr{page-break-inside:avoid}
}

/* ---------- Rückweg zur Fächerübersicht ---------- */
.homelink{display:flex;align-items:center;gap:6px;padding:7px 14px;font-size:13.5px;
  font-weight:550;color:var(--dim);border-radius:99px;text-decoration:none;
  transition:color .2s var(--ease),background .25s var(--spring)}
.homelink:hover{color:var(--txt);background:var(--sunk)}
.homelink span[aria-hidden]{font-size:15px;line-height:1}

/* ---------- Fächerübersicht (Startseite) ---------- */
.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  margin-top:8px}
.subject{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border-radius:20px;padding:26px 24px;box-shadow:var(--sh2);
  animation:cardIn .5s var(--spring) both;
  transition:transform .3s var(--spring),box-shadow .3s var(--ease)}
.subject:nth-child(2){animation-delay:.08s}
.subject:hover{transform:translateY(-3px);box-shadow:var(--sh3)}
.subject:active{transform:scale(.99)}
.subject .flag{font-size:13px;font-weight:650;letter-spacing:.04em;color:var(--dim2);
  text-transform:uppercase}
.subject h3{font-size:22px;font-weight:700;letter-spacing:-.028em;margin:10px 0 6px}
.subject p{margin:0;color:var(--dim);font-size:14px;line-height:1.5}
.subject .meta2{margin-top:18px;display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--txt)}
.subject.soon{opacity:.62;pointer-events:none;box-shadow:var(--sh1)}
.subject.soon .meta2{color:var(--dim2)}
.lead{color:var(--dim);font-size:16px;max-width:54ch;margin:0 0 30px;line-height:1.55}

/* ---------- Feinschliff: Bewegung, die etwas zeigt ---------- */

/* Kapitelzeilen laufen gestaffelt ein, statt alle auf einmal zu erscheinen */
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chap{animation:rowIn .5s var(--spring) both}

/* Zähler springen kurz auf, wenn sich das Ergebnis ändert */
@keyframes bump{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}
.meta .ok,.meta .bad{display:inline-block;transform-origin:center}
.meta .bump{animation:bump .45s var(--spring)}

/* Ist die Antwort aufgedeckt, tritt die Frage zurück und gibt ihr die Bühne */
.qword,.qsub{transition:opacity .4s var(--ease),transform .5s var(--spring)}
.stage.revealed .qword{opacity:.5;transform:scale(.9)}
.stage.revealed .qsub{opacity:.4}
.stage.revealed .qword.sentence{opacity:.62;transform:scale(.96)}

/* Das Ergebnis pocht einmal, wenn die Runde vorbei ist */
@keyframes scorePop{0%{transform:scale(.8);opacity:0}55%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.score div:first-child b{animation:scorePop .62s var(--spring) both;animation-delay:.18s}

/* Der Umschalter oben schiebt seine Auswahl weich hinüber */
.lang button,nav button{transition:color .2s var(--ease),background .3s var(--spring),
  box-shadow .25s var(--ease),transform .2s var(--spring)}
.lang button:active,nav button:active{transform:scale(.94)}

/* Die Fächerkacheln heben leicht ab und kippen minimal zum Zeiger */
.subject{will-change:transform}
.subject:hover h3{transform:translateX(2px)}
.subject h3{transition:transform .35s var(--spring)}
.subject .meta2 span[aria-hidden]{transition:transform .35s var(--spring);display:inline-block}
.subject:hover .meta2 span[aria-hidden]{transform:translateX(5px)}