/* compound – Design: dunkel, ruhig, „Private-Banking“-Anmutung. Serif (Fraunces) für Überschriften und Zahlen, Inter für Text.
   Alle Maße in rem; die Wurzelgröße wächst mit dem Viewport (max(16px, …)) → funktioniert am Handy und bei 25 %-Browser-Zoom am Desktop.
   --h = Farbton des aktuellen Levels (wird von app.js gesetzt). */
@font-face{font-family:"Fraunces";src:url(/fonts/Fraunces.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --bg:#0b0d12;--bg2:#10131a;--card:#151922;--card2:#1c212d;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --text:#eef0f5;--muted:#99a0b2;--h:42;
  --pos:#5fd39a;--neg:#f47c7f;--debt:hsl(26 88% 62%);--eq:hsl(266 85% 76%);
  /* Design-Tokens (docs/design-system.md): Farben nur hier definieren, im restlichen CSS/JS nur var(--…) */
  --ink:#fff;--text-soft:#dfe2ea;--placeholder:rgba(153,160,178,.82);--track:rgba(255,255,255,.1);--hover:rgba(255,255,255,.07);
  --shadow:#000;--scrim:rgba(4,5,8,.6);--glass:rgba(21,25,34,.82);--cover-bg:#0f1118;--hero-bg:#10121a;--cover-fade:rgba(11,13,18,.55);
  --pos-bg:rgba(95,211,154,.14);--pos-line:rgba(95,211,154,.6);--pos-ink:#062114;--neg-bg:rgba(244,124,127,.14);--neg-line:rgba(244,124,127,.6);--neg-ink:#2a0809;
  --warn:hsl(42 85% 62%);--warn2:hsl(20 85% 58%);--warn-ink:#1d1503;--info:hsl(205 85% 66%);--setup-acc:#9a6a12;--setup-ok:#27855a;
  --r-sm:1rem;--r-md:1.25rem;--r-lg:1.6rem;--r-pill:2rem;--sp-1:.35rem;--sp-2:.6rem;--sp-3:1rem;--sp-4:1.4rem;--sp-5:2rem;
  --sh-pop:0 1rem 2.5rem -1rem var(--shadow);--tap:2.75rem;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
/* abgeleitete Akzentfarben überall neu berechnen, wo --h per style-Attribut gesetzt wird (Level-Karten, #app, body) */
:root,[style*="--h"]{--acc:hsl(var(--h) 78% 66%);--acc-ink:hsl(var(--h) 60% 12%);--acc-bg:hsl(var(--h) 65% 55% / .15);--acc-line:hsl(var(--h) 70% 62% / .55)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:max(16px,min(1vw,1.8vh));background:var(--bg);height:100%;overflow-x:clip}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;overflow-x:clip;overscroll-behavior-y:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transition:background .6s;
  background:radial-gradient(70% 42% at 12% -10%,hsl(var(--h) 60% 42% / .22),transparent 70%),radial-gradient(55% 34% at 105% 4%,hsl(calc(var(--h) + 40) 60% 45% / .13),transparent 70%)}
body.lock{overflow:hidden}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.12}
b{font-weight:650}
.muted{color:var(--muted)}
.ico{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

#app{max-width:36rem;margin:0 auto;overflow-x:clip;padding:calc(var(--sat) + 1.1rem) 1.1rem calc(var(--sab) + 6.5rem);min-height:100dvh}
#app.full{padding-bottom:calc(var(--sab) + 6.2rem);display:flex;flex-direction:column}
#app.view>*{animation:rise .45s var(--out) both}
#app.view>*:nth-child(2){animation-delay:.04s}#app.view>*:nth-child(3){animation-delay:.08s}#app.view>*:nth-child(n+4){animation-delay:.11s}
@keyframes rise{from{opacity:0;transform:translateY(.6rem)}}
.boot{min-height:80dvh;display:grid;place-items:center}.boot img{width:4.5rem;height:4.5rem;border-radius:1.1rem;opacity:.9;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5;transform:scale(.96)}}

/* ---------- Grundelemente ---------- */
.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--acc)}
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3.3rem;padding:.8rem 1.2rem;border:0;border-radius:1rem;background:var(--text);color:var(--bg);
  font-weight:650;font-size:1.02rem;text-align:center;transition:transform .2s var(--spring),opacity .2s,background .2s;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn.acc{background:var(--acc);color:var(--acc-ink)}
.btn.ghost{background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger{background:transparent;color:var(--neg);font-weight:550;min-height:2.9rem}
.btn.narrow{width:auto;flex:none;min-width:3.3rem;padding:.8rem 1rem}
.btn small{font-weight:450;color:var(--muted);font-size:.85rem;margin-left:.3rem}
.link{background:none;border:0;padding:.7rem 0;min-height:2.75rem;color:var(--acc);font-weight:600;font-size:.98rem;text-align:left}
.icon-btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;border:0;border-radius:50%;background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.inp{width:100%;font:inherit;font-size:1.05rem;padding:.9rem 1rem;border-radius:1rem;border:1.5px solid var(--line2);background:var(--card);color:var(--text);outline:none;-webkit-appearance:none;appearance:none}
.inp::placeholder{color:var(--placeholder)}
.inp:focus{border-color:var(--acc-line);background:var(--card2)}
.inp.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:.7rem;width:100%;max-width:21rem}
.stack.wide{max-width:none}.stack.gap{margin-top:1.6rem}
.bar{height:.34rem;border-radius:1rem;background:var(--track);overflow:hidden;display:flex}
.bar i{display:block;height:100%;border-radius:1rem;background:var(--acc);transition:width .7s var(--out)}
.bar u{display:block;height:100%;background:hsl(var(--h) 50% 60% / .35)}

/* ---------- Vollbild-Screens (Login, Profil, Ergebnis) ---------- */
.screen{min-height:calc(100dvh - 8rem);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem .4rem}
.screen h2{font-size:2.1rem;margin:1.1rem 0 .4rem}
.screen p{margin:0 0 1.6rem;font-size:1.05rem;max-width:24rem}
.screen .logo{width:5rem;height:5rem;border-radius:1.25rem;box-shadow:0 1.2rem 2.5rem -1rem var(--shadow)}
.hint{min-height:1.4rem;margin:0!important;font-size:.9rem;color:var(--muted)}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-.5rem)}40%{transform:translateX(.45rem)}60%{transform:translateX(-.3rem)}80%{transform:translateX(.25rem)}}
.medal{width:6.5rem;height:6.5rem;border-radius:50%;display:grid;place-items:center;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2);animation:pop .6s var(--spring) both}
.medal.gold{background:var(--acc);color:var(--acc-ink);box-shadow:0 0 0 .6rem var(--acc-bg)}
.medal .ico{width:3rem;height:3rem;stroke-width:2.6}
.medal .ring{width:5.4rem;height:5.4rem}.medal .ring text{font:650 .56rem var(--sans);fill:var(--text)}
@keyframes pop{from{transform:scale(.4);opacity:0}}

/* ---------- Kopfzeilen ---------- */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:.6rem 0 1.3rem}
.top h1{font-size:2.5rem;margin-top:.25rem}
.kpi{text-align:right;line-height:1.15;flex:none}.kpi b{display:block;font:600 1.9rem/1 var(--serif);font-variant-numeric:tabular-nums}.kpi span{font-size:.76rem;color:var(--muted)}
.nav{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;color:var(--muted);font-size:.9rem;font-weight:550}
.sec{font:650 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.9rem 0 .8rem}
.foot{text-align:center;color:var(--muted);font-size:.85rem;margin:1.6rem 0 0}

/* ---------- Karten ---------- */
.hero{display:block;position:relative;padding:1.4rem 1.4rem 1.5rem;border-radius:1.6rem;overflow:hidden;margin-bottom:.8rem;
  background:linear-gradient(140deg,hsl(var(--h) 52% 24%),hsl(calc(var(--h) + 28) 46% 13%));box-shadow:inset 0 0 0 1px hsl(var(--h) 60% 60% / .28),0 1.5rem 2.5rem -1.6rem hsl(var(--h) 70% 30% / .9);transition:transform .25s var(--spring)}
.hero::after{content:"";position:absolute;right:-3rem;top:-3rem;width:11rem;height:11rem;border-radius:50%;background:radial-gradient(circle,hsl(var(--h) 85% 68% / .35),transparent 68%)}
a.hero:active{transform:scale(.98)}
.hero .eyebrow{color:hsl(var(--h) 90% 80%)}
.hero h2{font-size:1.75rem;margin:.5rem 0 .35rem;position:relative}
.hero p{margin:0;color:hsl(var(--h) 30% 86% / .85);font-size:.98rem;position:relative}
.hero .go{display:inline-block;margin-top:1.1rem;padding:.55rem 1.1rem;border-radius:2rem;background:var(--text);color:var(--bg);font-weight:650;font-size:.95rem;position:relative}
.hero.quiet{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.hero.quiet::after{display:none}.hero.quiet p{color:var(--muted)}
.card{display:flex;align-items:center;gap:.95rem;padding:1rem 1.05rem;margin-bottom:.6rem;border-radius:1.25rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s var(--spring),background .2s}
a.card:active{transform:scale(.985);background:var(--card2)}
.card>div{flex:1;min-width:0}
.card b{display:block;font-size:1.04rem;line-height:1.25}
.card small{display:block;color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:.2rem}
.card small.meta{font-size:.78rem;color:hsl(var(--h) 45% 72%)}
.card.slim{padding:.8rem 1.05rem}
.card .bar{margin-top:.6rem}
.chev{color:var(--muted);font-size:1.1rem;flex:none}
.chid{font:600 .78rem var(--sans);color:var(--acc);letter-spacing:.06em}
.lvnum{flex:none;width:3rem;height:3rem;border-radius:1rem;display:grid;place-items:center;font:600 1.6rem/1 var(--serif);color:var(--acc);background:var(--acc-bg);box-shadow:inset 0 0 0 1px var(--acc-line)}
.st{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line2)}
.st.read{box-shadow:inset 0 0 0 1.5px var(--acc-line)}
.st.ok{background:var(--acc);color:var(--acc-ink);box-shadow:none}.st.ok .ico{width:1.2rem;height:1.2rem;stroke-width:3}
.st.part{box-shadow:none}.st.due{background:var(--acc-bg);color:var(--acc);font-weight:700;font-size:.9rem;box-shadow:inset 0 0 0 1px var(--acc-line)}
.ring{width:2.2rem;height:2.2rem;display:block}.ring circle{fill:none;stroke-width:3.4}.ring .bg{stroke:var(--track)}.ring .fg{stroke:var(--acc);stroke-linecap:round}
.lvhead{margin:.2rem 0 1.5rem}.lvhead h1{font-size:2.2rem;margin:.3rem 0 .5rem}.lvhead p{margin:0 0 1rem;font-size:1.02rem}
.lvhead .bar{margin-bottom:.5rem}
.bignum{font:600 4.2rem/.9 var(--serif);color:var(--acc);display:block;opacity:.95}
/* Titelbilder: Motiv sitzt rechts, links dunkle Fläche → Ziffer bzw. Text liegt links darüber */
.cover{position:relative;aspect-ratio:16/8;border-radius:1.5rem;overflow:hidden;margin-bottom:1.1rem;background:var(--cover-bg);box-shadow:inset 0 0 0 1px var(--line)}
.cover .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line2);background:linear-gradient(90deg,var(--cover-fade),transparent 55%)}
.cover .bignum{position:absolute;left:1.2rem;bottom:1rem;z-index:1;font-size:4.6rem;text-shadow:0 .3rem 1.5rem var(--scrim)}
.lesson .cover{margin-bottom:1.3rem}
.hero.pic{background:var(--hero-bg);padding-right:42%;min-height:11.5rem}
.hero.pic::after{display:none}
.hero.pic .cover-img{position:absolute;right:-4%;top:0;height:100%;width:60%;object-fit:cover;object-position:74% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);mask-image:linear-gradient(90deg,transparent,#000 42%)}
.hero.pic::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,hsl(var(--h) 55% 30% / .5),transparent 60%);pointer-events:none}
.hero.pic>*:not(.cover-img){position:relative}
.pills{display:flex;flex-wrap:wrap;gap:.45rem}.pills span{padding:.3rem .7rem;border-radius:2rem;font-size:.82rem;font-weight:550;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)}
.pills .ok{color:var(--pos)}.pills .warn{color:var(--acc)}
.done-note{padding:1rem 1.1rem;border-radius:1rem;background:var(--acc-bg);box-shadow:inset 0 0 0 1px var(--acc-line);font-size:.98rem}
.terms{margin:0;display:grid;gap:.55rem}.terms div{padding:.85rem 1rem;border-radius:1rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.terms dt{font-weight:650;margin-bottom:.15rem}.terms dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}

/* ---------- Lesekarten & Quiz ---------- */
.rbar{display:flex;align-items:center;gap:.8rem;margin:-.6rem -1.1rem .7rem;padding:.6rem 1.1rem 1rem;position:sticky;top:var(--sat);z-index:4;background:linear-gradient(var(--bg) 72%,transparent)}
.segs{flex:1;display:flex;gap:.25rem}.segs i{flex:1;height:.28rem;border-radius:1rem;background:var(--track);transition:background .3s}.segs .done{background:hsl(var(--h) 60% 62% / .6)}.segs .cur{background:var(--acc)}
.prog{flex:1;height:.4rem;border-radius:1rem;background:var(--track);overflow:hidden}.prog i{display:block;height:100%;border-radius:1rem;background:var(--acc);transition:width .5s var(--out)}
.count{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:550;min-width:2.6rem;text-align:right}
.lesson,.question{flex:1}
.from-right{animation:inR .4s var(--out) both!important}.from-left{animation:inL .4s var(--out) both!important}
@keyframes inR{from{opacity:0;transform:translateX(1.6rem)}}@keyframes inL{from{opacity:0;transform:translateX(-1.6rem)}}
.lesson h1{font-size:2rem;margin:.55rem 0 1.1rem}
.lesson p{font-size:1.1rem;line-height:1.62;margin:0 0 1rem;color:var(--text-soft)}
.lesson b{color:var(--ink)}
.lesson ul{margin:0 0 1rem;padding:0;list-style:none}
.lesson li{position:relative;padding:.1rem 0 .1rem 1.4rem;font-size:1.08rem;line-height:1.55;margin-bottom:.45rem;color:var(--text-soft)}
.lesson li::before{content:"";position:absolute;left:.15rem;top:.78rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--acc)}
.box{margin:0 0 1rem;padding:.95rem 1.1rem;border-radius:1rem;background:var(--acc-bg);box-shadow:inset .2rem 0 0 var(--acc);font-size:1.08rem;line-height:1.5}
.rfoot{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:.6rem;justify-content:center;padding:1.4rem 1.1rem calc(var(--sab) + 1.1rem);
  background:linear-gradient(to top,var(--bg) 62%,transparent)}
.rfoot>*{max-width:33.8rem}.rfoot .btn:not(.narrow){flex:1}
.question h1{font-size:1.5rem;line-height:1.28;margin:.6rem 0 1.3rem;font-weight:550}
.hintline{margin:-.6rem 0 .9rem;color:var(--muted);font-size:.92rem}
.opts{display:grid;gap:.6rem}
.opt{display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left;padding:.95rem 1rem;border:0;border-radius:1.1rem;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line2);
  font-size:1.03rem;line-height:1.4;min-height:3.4rem;transition:transform .18s var(--spring),background .2s,box-shadow .2s,opacity .3s;touch-action:manipulation}
.opt:active:not(:disabled){transform:scale(.98)}
.opt .letter{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--card2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2);margin-top:-.05rem}
.opt.sel{box-shadow:inset 0 0 0 2px var(--acc);background:var(--acc-bg)}.opt.sel .letter{background:var(--acc);color:var(--acc-ink)}
.opt.ok{box-shadow:inset 0 0 0 2px var(--pos);background:var(--pos-bg)}.opt.ok .letter{background:var(--pos);color:var(--pos-ink)}
.opt.no{box-shadow:inset 0 0 0 2px var(--neg);background:var(--neg-bg)}.opt.no .letter{background:var(--neg);color:var(--neg-ink)}
.opt.miss{box-shadow:inset 0 0 0 2px var(--pos);background:transparent}.opt.miss .letter{color:var(--pos)}
.opt.off{opacity:.45}
.opt:disabled{cursor:default}
.numrow{display:flex;gap:.6rem;align-items:stretch}
.sign{flex:none;width:3.4rem;border:0;border-radius:1.1rem;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2);font-size:1.4rem;font-weight:600;color:var(--muted)}
.sign.on{color:var(--neg);box-shadow:inset 0 0 0 2px var(--neg)}
.numbox{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;padding:0 1.1rem;border-radius:1.1rem;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line2);min-height:3.8rem;font:600 1.5rem var(--serif)}
.numbox:focus-within{box-shadow:inset 0 0 0 2px var(--acc)}
.numbox input{flex:1;min-width:0;width:100%;border:0;background:none;outline:none;color:var(--text);font:inherit;text-align:right;padding:.4rem 0;min-height:var(--tap);align-self:stretch}
.numbox span{color:var(--muted);font:500 1.05rem var(--sans)}
.numbox.ok{box-shadow:inset 0 0 0 2px var(--pos)}.numbox.no{box-shadow:inset 0 0 0 2px var(--neg)}
.fb{margin-top:1.1rem;padding:1.05rem 1.15rem .5rem;border-radius:1.2rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);animation:rise .4s var(--out) both}
.fb .verdict{font:600 1.25rem var(--serif);margin-bottom:.45rem}
.fb.good .verdict{color:var(--pos)}.fb.bad .verdict{color:var(--neg)}
.fb p{margin:0 0 .6rem;font-size:1.02rem;line-height:1.55}
.fb small{display:block;color:var(--muted);font-size:.86rem}
.fb .sol{font-size:1.08rem}

/* ---------- Schaubilder ---------- */
.fig{margin:0 0 1.1rem;padding:1rem .9rem .85rem;border-radius:1.2rem;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.fig figcaption{margin-top:.7rem;font-size:.84rem;color:var(--muted);text-align:center;line-height:1.4}
.fig-svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.fig-svg .ft{fill:var(--text)}.fig-svg .fm{fill:var(--muted)}.fig-svg .fw{fill:var(--ink)}.fig-svg .fta{fill:var(--acc)}.fig-svg .ftp{fill:var(--pos)}.fig-svg .ftn{fill:var(--neg)}.fig-svg .fte{fill:var(--eq)}
.fig-svg .fb{fill:var(--card2);stroke:var(--line2);stroke-width:1}
.fig-svg .fc{fill:var(--acc-bg);stroke:var(--acc-line)}
.fig-svg .fp{fill:var(--pos-bg);stroke:var(--pos-line)}
.fig-svg .fn{fill:var(--neg-bg);stroke:var(--neg-line)}
.fig-svg .fd{fill:hsl(26 88% 60% / .16);stroke:hsl(26 88% 62% / .6)}
.fig-svg .fe{fill:hsl(266 85% 70% / .17);stroke:hsl(266 85% 76% / .6)}
.fig-svg .fl{stroke:var(--muted);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fig-svg .fla{stroke:var(--acc)}.fig-svg .flt{stroke-width:2.4}.fig-svg .flbg{stroke:var(--bg2);stroke-width:4;fill:none}
.fig-svg .fah{fill:var(--muted)}.fig-svg .fdot{fill:var(--acc)}
.fig-svg .fareap{fill:var(--acc-bg)}.fig-svg .faread{fill:var(--hover)}.fig-svg .fareapos{fill:var(--pos-bg)}.fig-svg .fareaneg{fill:var(--neg-bg)}
.fig-table,.fig-grid,.fig-book{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.fig-table td{padding:.42rem .3rem;border-bottom:1px solid var(--line);transition:opacity .3s}
.fig-table td:last-child{text-align:right;white-space:nowrap;padding-left:.8rem}
.fig-table .sub td{font-weight:700;border-bottom:1px solid var(--line2);color:var(--ink)}
.fig-table .dim td{opacity:.32}
.fig-table tr:last-child td{border-bottom:0}
.fig-grid th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:650;text-align:left;padding:.3rem .4rem .5rem;vertical-align:bottom}
.fig-grid td{padding:.55rem .4rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.3;font-size:.9rem}
.fig-grid td:first-child{color:var(--muted)}.fig-grid td:first-child b{font-weight:550}
.fig-grid td.up{color:var(--pos);font-size:1.25rem;font-weight:700}.fig-grid td.down{color:var(--neg);font-size:1.25rem;font-weight:700}
.fig-book th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.35rem .4rem;font-weight:650}
.fig-book td{padding:.4rem;border-top:1px solid var(--line)}.fig-book td:first-child{color:var(--muted);font-size:.8rem}.fig-book td:nth-child(n+2){text-align:right}
.fig-book .ask td:nth-child(2){color:var(--neg);font-weight:650}.fig-book .bid td:nth-child(2){color:var(--pos);font-weight:650}
.fig-book .mid td{text-align:center;color:var(--acc);font-size:.82rem;font-weight:600;background:var(--acc-bg)}
.fig-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.lesson .fig-steps li{counter-increment:s;position:relative;padding:.1rem 0 1rem 2.7rem;margin:0;font-size:1rem}
.lesson .fig-steps li::before{content:counter(s);left:0;top:0;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:50%;background:var(--acc-bg);color:var(--acc);font-weight:700;font-size:.9rem;box-shadow:inset 0 0 0 1px var(--acc-line)}
.fig-steps li:not(:last-child)::after{content:"";position:absolute;left:.92rem;top:2.05rem;bottom:.15rem;width:1.5px;background:var(--line2)}
.lesson .fig-steps li:last-child{padding-bottom:0}
.fig-steps span{display:block;color:var(--muted);font-size:.88rem}

/* ---------- Review, Glossar, Profil ---------- */
.howto{display:grid;gap:.5rem}.howto>div{padding:.85rem 1rem;border-radius:1rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:.15rem}
.howto span{color:var(--muted);font-size:.93rem}.howto .btn{margin-top:.5rem;justify-self:start}
.search{margin-bottom:.6rem;position:sticky;top:calc(var(--sat) + .6rem);z-index:3;box-shadow:0 .8rem 1.5rem -1rem var(--shadow)}
.letter-h{font:600 1.5rem var(--serif);color:var(--acc);margin:1.3rem 0 .3rem}
.term{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid var(--line)}
.term>div{flex:1;min-width:0}.term p{margin:.15rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.45}
.chip{flex:none;padding:.5rem .7rem;border-radius:2rem;font-size:.8rem;font-weight:650;color:var(--acc);background:var(--acc-bg);min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;text-align:center}
.pad{padding:1.5rem 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.2rem}
.stats div{padding:.9rem .3rem;border-radius:1rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.stats b{display:block;font:600 1.6rem/1.1 var(--serif);font-variant-numeric:tabular-nums}.stats span{font-size:.72rem;color:var(--muted)}
.lvbar{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center;padding:.65rem 0;min-height:2.75rem}
.lvbar span{font-size:.94rem;font-weight:550}.lvbar small{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;grid-row:1;grid-column:2}
.lvbar .bar{grid-column:1/-1}

/* ---------- Sprachschalter ---------- */
.lang{display:inline-flex;gap:.1rem;padding:.2rem;border-radius:2rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.lang button{border:0;background:none;color:var(--muted);font-weight:600;font-size:.84rem;padding:0 1rem;min-height:2.75rem;border-radius:2rem;transition:background .2s,color .2s}
.lang button.on{background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
#app>.lang{display:flex;width:fit-content;margin:0 0 .3rem auto}
.screen .lang{margin-top:1.8rem}

/* ---------- Tab-Leiste ---------- */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + .7rem);z-index:6;display:flex;width:min(34rem,calc(100% - 1.6rem));padding:.3rem;border-radius:1.6rem;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-pop)}
.tabs a{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0 .4rem;min-height:3.2rem;border-radius:1.3rem;color:var(--muted);font-size:.7rem;font-weight:600;transition:color .2s,background .2s}
.tabs svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on{color:var(--text);background:var(--hover)}
.tabs b{position:absolute;top:.3rem;left:calc(50% + .45rem);min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:1rem;background:var(--warn);color:var(--warn-ink);font-size:.68rem;font-weight:750;display:grid;place-items:center}

/* ---------- Hermes-Blatt ---------- */
.sheet{position:fixed;inset:0;z-index:20}
.sheet .bd{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .22s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet .panel{position:absolute;left:50%;bottom:0;width:min(36rem,100%);max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;padding:.6rem 1.2rem calc(var(--sab) + 1.3rem);border-radius:1.7rem 1.7rem 0 0;
  background:var(--bg2);box-shadow:inset 0 1px 0 var(--line2),0 -2rem 4rem -1rem var(--shadow);transform:translate(-50%,105%);transition:transform .3s var(--out)}
.sheet.open .bd{opacity:1}.sheet.open .panel{transform:translate(-50%,0)}
.grab{width:2.6rem;height:.28rem;border-radius:1rem;background:var(--line2);margin:0 auto .8rem}
.hx-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.hx-head>div{flex:1;line-height:1.2}.hx-head small{display:block;color:var(--muted);font-size:.82rem}
.hx-av{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font:600 1.3rem var(--serif);background:linear-gradient(135deg,var(--warn),var(--warn2));color:var(--warn-ink)}
.hx section{margin-bottom:.9rem}.hx h4{font:650 .74rem var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin-bottom:.3rem}
.hx section p{margin:0;font-size:1.04rem;line-height:1.58}
.hx .tint,.hx .keep{padding:.85rem 1rem;border-radius:1rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.hx .keep{background:var(--acc-bg);box-shadow:inset 0 0 0 1px var(--acc-line)}
.thinking{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.95rem;padding:.6rem 0}
.thinking i{width:.5rem;height:.5rem;border-radius:50%;background:var(--acc);animation:blink 1.2s infinite both}.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}.thinking span{margin-left:.5rem}
@keyframes blink{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.askf{display:flex;gap:.5rem;margin-top:1rem}.askf .inp{flex:1;min-width:0}
.msg{padding:.75rem 1rem;border-radius:1.1rem;margin-top:.6rem;font-size:1rem;line-height:1.5;max-width:92%}
.msg.you{margin-left:auto;background:var(--acc);color:var(--acc-ink);font-weight:550;width:fit-content;border-bottom-right-radius:.35rem}
.msg.her{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:.35rem}.msg p{margin:0 0 .5rem}.msg p:last-child{margin:0}

/* Hinweise (Toast): genau ein System, toast() in app.js. Arten: success · error · warning · info · loading */
.toasts{position:fixed;left:50%;bottom:calc(var(--sab) + 7.4rem);transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:calc(100% - 2rem);max-width:30rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.7rem;max-width:100%;padding:.4rem .4rem .4rem 1rem;border-radius:var(--r-sm);background:var(--card2);color:var(--text);font-weight:600;font-size:.95rem;line-height:1.35;
  box-shadow:inset 0 0 0 1px var(--line2),inset .25rem 0 0 var(--tc),var(--sh-pop);animation:rise .3s var(--out) both;--tc:var(--info)}
.toast.success{--tc:var(--pos)}.toast.error{--tc:var(--neg)}.toast.warning{--tc:var(--warn)}.toast.info,.toast.loading{--tc:var(--info)}
.toast .tic{flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--tc)}
.toast.loading .tic{background:none;border:2px solid var(--track);border-top-color:var(--tc);width:1rem;height:1rem;animation:spin .8s linear infinite}
.toast span{flex:1;min-width:0;padding:.35rem 0}
.toast .tx{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:none;color:var(--muted)}.toast .tx .ico{width:1.1rem;height:1.1rem}
.toast.out{opacity:0;transform:translateY(.4rem);transition:opacity .2s,transform .2s}
@keyframes spin{to{transform:rotate(360deg)}}
/* Fenster (Modal): genau ein System, openSheet()/closeSheet() in app.js. Größen: Blatt von unten (Standard) · .dialog (klein, mittig; für confirmDialog()) */
.sheet.dialog .panel{bottom:auto;top:50%;width:min(24rem,calc(100% - 2rem));max-height:80dvh;padding:1.4rem 1.3rem 1.2rem;border-radius:var(--r-lg);transform:translate(-50%,-46%);opacity:0;transition:transform .25s var(--out),opacity .2s;box-shadow:inset 0 0 0 1px var(--line2),0 2rem 4rem -1rem var(--shadow)}
.sheet.dialog.open .panel{transform:translate(-50%,-50%);opacity:1}
.sheet.dialog .grab{display:none}
.dlg h3{font-size:1.45rem;margin-bottom:.5rem}.dlg p{margin:0 0 1.2rem;color:var(--muted);font-size:1rem;line-height:1.5}
.dlg-btns{display:flex;gap:.6rem}.dlg-btns .btn{flex:1}
.btn.del{background:var(--neg);color:var(--neg-ink)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Praxistest: Karte in Level-Liste/Start, Info-Kasten, Situations-Kasten über der Frage */
.card.test{background:linear-gradient(135deg,hsl(var(--h) 45% 20% / .55),var(--card) 70%);box-shadow:inset 0 0 0 1px var(--acc-line)}
.card.test.locked{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);opacity:.82}
.card.test.locked .chev{visibility:hidden}
.st.tst{background:var(--acc-bg);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc-line)}.st.tst .ico,.st.lock .ico{width:1.25rem;height:1.25rem}
.st.lock{color:var(--muted)}
.card.test .chid{display:block;line-height:1.3;margin-bottom:.15rem}
.rwhow{display:flex;gap:.9rem;align-items:flex-start;margin:0 0 1.3rem;padding:1rem 1.1rem;border-radius:1.2rem;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.rwhow p{margin:0;font-size:.98rem;line-height:1.5;color:var(--text)}
.result .card.test{text-align:left;margin:1.2rem 0 .2rem;width:100%}
.scene{margin:.8rem 0 0;padding:.95rem 1.1rem 1rem;border-radius:1.1rem;background:var(--acc-bg);box-shadow:inset .2rem 0 0 var(--acc)}
.scene span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--acc);margin-bottom:.35rem}
.scene p{margin:0;font:500 1.14rem/1.45 var(--serif)}
.question h1.after-scene{font-size:1.28rem;margin-top:1rem}