:root{--bg:#f5f4ff;--card:#fff;--card2:#f0eefe;--ink:#1c1530;--mut:#5d5677;--line:#d9d4f2;--ice:#eeebff;--ice2:#dcd6fb;
--blue:#5b3fd6;--violet:#7c3aed;--pink:#e1306c;--lime:#16a34a;--cyan:#0891b2;--orange:#ea6a12;--warm:#ea6a12;--warm2:#fff1e4;--berry:#c0266d;--green:#15803d;
--ok:#137a3a;--okbg:#e3f8ea;--bad:#c0261d;--badbg:#fdeceb;--grad:linear-gradient(135deg,#7c3aed 0%,#db2777 55%,#f59e0b 100%);--grad2:linear-gradient(135deg,#4f46e5,#06b6d4);
--r:18px;--sh:0 6px 22px rgba(60,30,140,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e0b19;--card:#19142b;--card2:#221b3a;--ink:#f1edff;--mut:#b4abd6;--line:#3a3160;--ice:#251e40;--ice2:#3a3160;
--blue:#a995ff;--violet:#b794ff;--pink:#ff6b9d;--lime:#4ade80;--cyan:#22d3ee;--orange:#ffa45c;--warm:#ffa45c;--warm2:#33241a;--berry:#ff7eb6;--green:#6ee7a0;
--ok:#7ef0a8;--okbg:#123221;--bad:#ff9b94;--badbg:#3b1717;--sh:0 6px 22px rgba(0,0,0,.35)}}
:root[data-theme=dark]{--bg:#0e0b19;--card:#19142b;--card2:#221b3a;--ink:#f1edff;--mut:#b4abd6;--line:#3a3160;--ice:#251e40;--ice2:#3a3160;
--blue:#a995ff;--violet:#b794ff;--pink:#ff6b9d;--lime:#4ade80;--cyan:#22d3ee;--orange:#ffa45c;--warm:#ffa45c;--warm2:#33241a;--berry:#ff7eb6;--green:#6ee7a0;
--ok:#7ef0a8;--okbg:#123221;--bad:#ff9b94;--badbg:#3b1717;--sh:0 6px 22px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:76px}
a{color:var(--blue)}
.skip{position:absolute;left:-999px;top:0;background:var(--violet);color:#fff;padding:8px 12px;z-index:20}.skip:focus{left:8px}
header.top{background:var(--grad);color:#fff;padding:14px 16px 16px;position:relative;overflow:hidden}
header.top:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12)}
.topbar{display:flex;align-items:center;gap:10px;max-width:860px;margin:0 auto;position:relative;z-index:1}
header.top h1{margin:0;font-size:1.22rem;line-height:1.2;flex:1;letter-spacing:-.01em}
header.top p{margin:2px 0 0;font-size:.86rem;opacity:.92}
.iconbtn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:14px;min-width:44px;min-height:44px;padding:0 10px;font-size:1.2rem;display:inline-grid;place-items:center}
.stats{display:flex;gap:8px;flex-wrap:wrap;max-width:860px;margin:10px auto 0;position:relative;z-index:1}
.chip{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 11px;font-size:.86rem;font-weight:700;white-space:nowrap}
.xpbar{max-width:860px;margin:10px auto 0;height:10px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;position:relative;z-index:1}
.xpbar i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--card);border-top:1px solid var(--line);display:flex;gap:2px;overflow-x:auto;padding:6px 6px calc(6px + env(safe-area-inset-bottom));scrollbar-width:none;box-shadow:0 -4px 18px rgba(40,20,100,.10)}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:1 0 auto;min-width:64px;text-decoration:none;color:var(--mut);border-radius:14px;padding:5px 8px;font-size:.72rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:52px;justify-content:center;line-height:1.15;text-align:center}
nav.tabs a .e{font-size:1.25rem;line-height:1}
nav.tabs a[aria-current=page]{background:var(--ice);color:var(--violet)}
@media (min-width:900px){body{padding-bottom:0}nav.tabs{position:sticky;top:0;bottom:auto;justify-content:center;border-top:0;border-bottom:1px solid var(--line);box-shadow:none}nav.tabs a{flex:none;flex-direction:row;gap:6px;font-size:.9rem;min-width:0;padding:8px 14px}}
main{max-width:860px;margin:0 auto;padding:12px 16px 32px}
section.view{display:none}section.view.on{display:block;animation:rein .35s ease}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h2{font-size:1.45rem;margin:16px 0 8px;letter-spacing:-.01em}
h2 .e{margin-right:6px}
h3{font-size:1.06rem;margin:0 0 6px}
.lead{color:var(--mut);margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:12px 0;box-shadow:var(--sh)}
.card.ice{background:var(--ice)}
.merke{background:var(--warm2);border-radius:var(--r);padding:12px 16px;margin:12px 0;border-left:5px solid var(--orange)}
.grid{display:grid;gap:12px}
@media (min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
.tile{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh);transition:transform .15s ease;position:relative;overflow:hidden}
.tile:active{transform:scale(.98)}@media (hover:hover){.tile:hover{transform:translateY(-2px)}}
.tile .ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;background:var(--grad)}
.tile:nth-child(2) .ic{background:var(--grad2)}.tile:nth-child(3) .ic{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.tile:nth-child(4) .ic{background:linear-gradient(135deg,#10b981,#06b6d4)}.tile:nth-child(5) .ic{background:linear-gradient(135deg,#6366f1,#ec4899)}.tile:nth-child(6) .ic{background:linear-gradient(135deg,#84cc16,#10b981)}
.tile .tx{flex:1;min-width:0}
.tile b{display:block;font-size:1.02rem}
.tile span.t{font-size:.86rem;color:var(--mut);display:block}
.tile .prog{height:6px;border-radius:9px;background:var(--ice);margin-top:7px;overflow:hidden}
.tile .prog i{display:block;height:100%;width:0;background:var(--grad);border-radius:9px;transition:width .6s ease}
.k30{background:var(--grad);color:#fff;border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:var(--sh)}
.k30 h3{font-size:1.08rem;margin:0 0 8px}
.k30 ol{margin:0;padding-left:20px}.k30 li{margin:5px 0}
.k30 b{color:#fff;background:rgba(255,255,255,.18);padding:0 4px;border-radius:5px}
.cards{display:grid;gap:10px;margin:12px 0}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--sh)}
.mini .kopf{font-weight:800;display:flex;gap:8px;align-items:center;margin-bottom:4px}
.mini.merk{border-left:5px solid var(--violet)}.mini.fehler{border-left:5px solid var(--pink)}
.mini.bsp{border-left:5px solid var(--cyan)}
.mini p{margin:4px 0}
.lab{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:14px 0;box-shadow:var(--sh)}
.lab h3 .e{margin-right:6px}
.lab .tag{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--grad2);border-radius:99px;padding:2px 9px;margin-bottom:6px}
.lab label{display:block;font-weight:700;margin:10px 0 2px}
.lab output{font-weight:800;color:var(--violet)}
input[type=range]{width:100%;height:44px;accent-color:var(--violet);margin:0;background:transparent}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.seg button{background:var(--ice);color:var(--ink);border:2px solid transparent;font-weight:700;padding:8px 12px}
.seg button[aria-pressed=true]{border-color:var(--violet)}
.ergebnis{border-radius:14px;padding:10px 12px;margin-top:8px;background:var(--ice);font-weight:600;transition:background .25s}
.ergebnis.ok{background:var(--okbg)}.ergebnis.warn{background:var(--badbg)}.ergebnis.blau{background:var(--ice)}
.bars{display:grid;gap:6px;margin-top:8px}
.bar{display:grid;grid-template-columns:76px 1fr 96px;gap:8px;align-items:center;font-size:.9rem}
.bar .tr{background:var(--ice);border-radius:9px;height:16px;overflow:hidden}
.bar .b{height:16px;border-radius:9px;background:var(--grad2);transition:width .35s ease}
.bar .b.alt{background:var(--mut);opacity:.45}
.bar span:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
details{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:12px 0}
details>summary{cursor:pointer;padding:12px 16px;font-weight:800;min-height:44px}
details>div{padding:0 16px 12px}
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:8px 0}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--ice)}
.tw{overflow-x:auto}
.formel{background:var(--ice);border-radius:12px;padding:10px;text-align:center;font-weight:700;margin:8px 0}
.video{position:relative;background:#000;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--sh)}
.video video{width:100%;height:100%;display:block}
.video .folgt{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-align:center;padding:16px;background:var(--grad)}
.vlabel{font-weight:800;margin:14px 0 6px}
.ex{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin:14px 0;box-shadow:var(--sh);position:relative}
.ex.geloest:after{content:"✓";position:absolute;right:12px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--lime);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.9rem}
.ex h3{padding-right:30px}
.ex h3 .st{color:#f59e0b;font-size:.95rem;margin-left:6px}
.q{margin:6px 0 10px}
label.f{display:block;font-weight:700;margin:9px 0 4px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
input.num{font:inherit;width:9.5rem;max-width:100%;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);min-height:48px}
input.num:focus,button:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,input[type=range]:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
select{font:inherit;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);min-height:48px;max-width:100%}
.unit{color:var(--mut)}
button{font:inherit;font-weight:800;border:0;border-radius:14px;padding:11px 16px;min-height:48px;cursor:pointer;background:var(--grad);color:#fff;transition:transform .12s ease}
button:active{transform:scale(.96)}
button.sec{background:var(--ice);color:var(--ink);border:1px solid var(--line)}
button.opt{background:var(--card);color:var(--ink);border:2px solid var(--line);font-weight:600;text-align:left}
button.opt[aria-pressed=true]{border-color:var(--violet);background:var(--ice)}
button.opt.ok{border-color:var(--ok);background:var(--okbg)}button.opt.bad{border-color:var(--bad);background:var(--badbg);animation:wackel .35s}
.opts{display:grid;gap:8px;margin:8px 0}
@media (min-width:560px){.opts.two{grid-template-columns:1fr 1fr}}
.fb{margin-top:10px;border-radius:14px;padding:10px 12px;display:none}
.fb.ok{display:block;background:var(--okbg);color:var(--ok);animation:pop .35s ease}.fb.bad{display:block;background:var(--badbg);color:var(--bad);animation:wackel .35s}.fb.info{display:block;background:var(--ice);color:var(--ink)}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
@keyframes wackel{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fb .weg{color:var(--ink);margin-top:6px;font-size:.95rem}
.weg code{font-family:inherit;background:transparent}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.svgbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;touch-action:manipulation}
.svgbox svg,.lab svg{width:100%;height:auto;display:block}
.svgbox text,.lab svg text{fill:var(--ink)}
.area{cursor:pointer}.area:hover,.area:focus{fill-opacity:.35}
.score{font-size:1.15rem;font-weight:800}
.badge{display:inline-block;background:var(--ice);border-radius:999px;padding:2px 10px;font-size:.85rem;margin-left:6px;font-weight:700}
.zu{display:grid;gap:8px}
.zu .it{border:1px solid var(--line);border-radius:14px;padding:10px}
.zu .it .row button{padding:8px 10px}
.timer{font-variant-numeric:tabular-nums;font-weight:800}
.ka-item{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}
.pk{float:right;color:var(--berry);font-weight:800}
.trans{font-size:.95rem}
.dl{display:inline-block;min-height:48px;line-height:1.4;background:var(--grad);color:#fff;text-decoration:none;font-weight:800;border-radius:14px;padding:10px 16px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:8px 0}
.bdg{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 6px;text-align:center;font-size:.76rem;font-weight:700;color:var(--mut)}
.bdg .e{font-size:1.7rem;display:block;filter:grayscale(1);opacity:.4}
.bdg.an{color:var(--ink);border-color:var(--violet)}.bdg.an .e{filter:none;opacity:1}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px;font-weight:800;opacity:0;transition:.3s;z-index:30;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:900px){.toast{bottom:24px}}
canvas#konfetti{position:fixed;inset:0;pointer-events:none;z-index:25;width:100%;height:100%}
footer{max-width:860px;margin:0 auto;padding:16px;color:var(--mut);font-size:.85rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.svgbox text,.svgbox line,.svgbox polyline{pointer-events:none}
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:10px 0}
.slot{aspect-ratio:1;border-radius:10px;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:var(--ice);position:relative;transition:transform .2s}
.slot.voll{border-style:solid;border-color:var(--violet);background:var(--card)}
.slot .z{position:absolute;left:3px;top:1px;font-size:.6rem;font-weight:800;color:var(--mut)}
.slot.neu{animation:pop .4s}
.legende{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.85rem;color:var(--mut)}