/* Meister Lernen v2: Design 2026 (ruhige Flächen, große Radien, Glas-Leisten, OKLCH-Farben, kein Webfont-Download) */
:root{
  color-scheme:light dark;
  --bg:oklch(.975 .006 205);--card:#fff;--ink:oklch(.22 .025 255);--mute:oklch(.50 .02 255);--line:oklch(.92 .008 235);
  --accent:oklch(.52 .105 188);--accent2:oklch(.62 .12 215);--accent-ink:#fff;--soft:oklch(.955 .028 188);
  --ok:oklch(.5 .13 150);--okbg:oklch(.96 .04 150);--bad:oklch(.52 .18 25);--badbg:oklch(.96 .03 25);--warn:oklch(.5 .1 70);--warnbg:oklch(.965 .045 85);
  --glow1:oklch(.93 .06 190 / .8);--glow2:oklch(.94 .045 285 / .7);
  --sh:0 1px 2px oklch(.2 .02 255 / .05),0 10px 28px -14px oklch(.2 .02 255 / .22);
  --sh-lg:0 2px 4px oklch(.2 .02 255 / .06),0 18px 40px -16px oklch(.2 .02 255 / .3);
  --r:22px;--r-sm:14px;--hh:58px;
  --font:"Inter Variable","Inter","SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:oklch(.16 .018 255);--card:oklch(.215 .02 255);--ink:oklch(.94 .008 250);--mute:oklch(.72 .02 250);--line:oklch(.3 .02 255);
  --accent:oklch(.8 .125 180);--accent2:oklch(.76 .12 225);--accent-ink:oklch(.2 .03 190);--soft:oklch(.27 .05 190);
  --ok:oklch(.8 .15 150);--okbg:oklch(.27 .05 150);--bad:oklch(.74 .16 25);--badbg:oklch(.28 .06 25);--warn:oklch(.82 .13 85);--warnbg:oklch(.29 .05 80);
  --glow1:oklch(.3 .07 190 / .55);--glow2:oklch(.28 .07 285 / .5);
  --sh:0 1px 2px #0006,0 12px 30px -14px #000a;--sh-lg:0 2px 4px #0006,0 20px 44px -16px #000c;
}}
:root[data-theme="dark"]{
  --bg:oklch(.16 .018 255);--card:oklch(.215 .02 255);--ink:oklch(.94 .008 250);--mute:oklch(.72 .02 250);--line:oklch(.3 .02 255);
  --accent:oklch(.8 .125 180);--accent2:oklch(.76 .12 225);--accent-ink:oklch(.2 .03 190);--soft:oklch(.27 .05 190);
  --ok:oklch(.8 .15 150);--okbg:oklch(.27 .05 150);--bad:oklch(.74 .16 25);--badbg:oklch(.28 .06 25);--warn:oklch(.82 .13 85);--warnbg:oklch(.29 .05 80);
  --glow1:oklch(.3 .07 190 / .55);--glow2:oklch(.28 .07 285 / .5);
  --sh:0 1px 2px #0006,0 12px 30px -14px #000a;--sh-lg:0 2px 4px #0006,0 20px 44px -16px #000c;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(16px,.35vw + 15px,18px);scroll-padding-top:calc(var(--hh) + 56px)}
body{margin:0;min-height:100dvh;color:var(--ink);font-family:var(--font);font-feature-settings:"cv11","ss01";line-height:1.55;-webkit-font-smoothing:antialiased;
  background:radial-gradient(60rem 36rem at 8% -8%,var(--glow1),transparent 60%),radial-gradient(52rem 34rem at 100% 0%,var(--glow2),transparent 62%),var(--bg);background-attachment:fixed}
::selection{background:color-mix(in oklab,var(--accent) 30%,transparent)}
:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 60%,transparent);outline-offset:2px;border-radius:10px}

/* Kopfleiste (Glas) */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:calc(var(--hh) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(14px,calc((100vw - 900px)/2)) 0;
  background:color-mix(in oklab,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);border-bottom:1px solid color-mix(in oklab,var(--line) 70%,transparent)}
header h1{font-size:1.06rem;margin:0;flex:1;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#back{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.5rem;line-height:1;padding:0 0 3px;cursor:pointer;box-shadow:var(--sh);transition:transform .15s}
#back:active{transform:scale(.92)}
#badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;max-width:46vw;box-shadow:var(--sh)}
#badge::before{content:attr(data-i);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);font-size:.78rem;font-weight:700}
#badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{max-width:760px;margin:0 auto;padding:18px 16px calc(112px + env(safe-area-inset-bottom));animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h2{font-size:1.2rem;letter-spacing:-.015em;margin:26px 2px 10px}
h3{font-size:1rem;margin:0 0 6px;letter-spacing:-.005em}
a{color:var(--accent)}
.mute{color:var(--mute);font-size:.9rem}

/* Hero (Startseite) */
.hero{padding:6px 2px 4px}
.hero h2{font-size:clamp(1.7rem,4.4vw,2.3rem);line-height:1.12;margin:0 0 6px;letter-spacing:-.03em;font-weight:750}
.hero h2 em{font-style:normal;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.stat{display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);font-size:.85rem;color:var(--mute)}
.stat b{font-size:1.1rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* Karten und Listen */
.card{background:var(--card);border:1px solid color-mix(in oklab,var(--line) 80%,transparent);border-radius:var(--r);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh)}
.list{display:grid;gap:12px}
@media (min-width:900px){.list{grid-template-columns:1fr 1fr}main{max-width:900px}}
.item{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid color-mix(in oklab,var(--line) 80%,transparent);border-radius:var(--r);padding:16px 18px;cursor:pointer;box-shadow:var(--sh);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s;text-decoration:none;color:inherit}
@media (hover:hover){.item:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:color-mix(in oklab,var(--accent) 35%,var(--line))}}
.item:active{transform:scale(.985)}
.item .t{font-weight:650;letter-spacing:-.01em}.item .s{font-size:.85rem;color:var(--mute);line-height:1.4}
.item.off{opacity:.5;cursor:default}
.item .go{margin-left:auto;color:var(--mute);font-size:1.5rem;line-height:1}
.ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,var(--soft),color-mix(in oklab,var(--soft) 55%,var(--card)));color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 18%,transparent)}
.ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bar{height:7px;background:color-mix(in oklab,var(--line) 85%,transparent);border-radius:99px;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* Reiter (segmentiert) */
.tabs{display:flex;gap:4px;position:sticky;top:calc(var(--hh) + env(safe-area-inset-top) + 8px);z-index:10;padding:5px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none;border-radius:999px;
  background:color-mix(in oklab,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--line);box-shadow:var(--sh)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1;min-width:max-content;padding:9px 16px;border-radius:999px;border:0;background:transparent;color:var(--mute);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tabs button.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);box-shadow:0 4px 14px -4px color-mix(in oklab,var(--accent) 70%,transparent)}

/* Lerninhalt */
.key,.ex,.tip,.warn{border-radius:var(--r-sm);padding:11px 14px;margin:12px 0}
.key{background:var(--soft);border:1px solid color-mix(in oklab,var(--accent) 22%,transparent);font-weight:600}
.ex{background:color-mix(in oklab,var(--bg) 70%,var(--card));border:1px dashed var(--line);font-size:.93rem;line-height:1.85;overflow-x:auto;white-space:nowrap}
.tip{background:var(--okbg);border:1px solid color-mix(in oklab,var(--ok) 25%,transparent)}
.warn{background:var(--warnbg);border:1px solid color-mix(in oklab,var(--warn) 25%,transparent)}
.chain{font-size:1.25rem;text-align:center}
ul,ol{padding-left:1.15rem;margin:.4rem 0}li{margin:.3rem 0}
.formula{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.formula:last-child{border:0}.formula span:first-child{color:var(--mute);font-size:.86rem}.formula b{font-family:ui-monospace,"Cascadia Code",Menlo,monospace;font-weight:600;text-align:right}
.pit li::marker{content:"⚠️ "}
.area{display:grid;grid-template-columns:3fr 1fr;grid-template-rows:3fr 1fr;width:190px;height:190px;margin:10px auto;gap:3px;font-weight:700}
.area div{display:flex;align-items:center;justify-content:center;border-radius:8px}
.a1{background:#99d8cf;color:#06302b}.a2,.a3{background:#fcd9a3;color:#4a2e00}.a4{background:#f6b6b6;color:#4a0f0f}
table.mt{border-collapse:separate;border-spacing:0;width:100%;margin:10px 0;font-size:.92rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.mt th,table.mt td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:7px 9px;text-align:center}table.mt tr:last-child td{border-bottom:0}table.mt th:last-child,table.mt td:last-child{border-right:0}table.mt th{background:var(--soft)}
details.gl{border-bottom:1px solid var(--line);padding:9px 0}details.gl:last-child{border:0}details.gl summary{cursor:pointer;font-weight:600;list-style:none}details.gl summary::after{content:"+";float:right;color:var(--mute)}details.gl[open] summary::after{content:"−"}details.gl div{margin-top:6px;font-size:.95rem}#explain p{margin:.5rem 0}

/* Karteikarten */
.fc{perspective:1100px;margin:14px 0}
.fc .inner{position:relative;min-height:250px;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;cursor:pointer}
.fc.flip .inner{transform:rotateY(180deg)}
.fc .face{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;border-radius:28px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-lg);font-size:1.12rem;overflow:auto}
.fc .back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--soft),var(--card))}
.fc small{position:absolute;top:14px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;font-weight:700}

/* Knöpfe */
.row{display:flex;gap:10px;margin-top:12px}
.btn{flex:1;padding:13px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,background .15s}
@media (hover:hover){.btn:hover{box-shadow:var(--sh-lg)}}
.btn:active{transform:scale(.97)}
.btn.p,.btn.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border-color:transparent;box-shadow:0 8px 20px -8px color-mix(in oklab,var(--accent) 80%,transparent)}
.btn.g{background:var(--okbg);border-color:color-mix(in oklab,var(--ok) 45%,transparent);color:var(--ok)}.btn.r{background:var(--badbg);border-color:color-mix(in oklab,var(--bad) 45%,transparent);color:var(--bad)}
.btn:disabled{opacity:.45;pointer-events:none}

/* Quiz */
.opt{display:block;width:100%;text-align:left;padding:14px 16px;margin:9px 0;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1rem;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
@media (hover:hover){.opt:hover{border-color:color-mix(in oklab,var(--accent) 55%,var(--line))}}
.opt:active{transform:scale(.99)}
.opt.ok{border-color:var(--ok);background:var(--okbg)}.opt.bad{border-color:var(--bad);background:var(--badbg)}
.why{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--soft)}
.big{font-size:2.8rem;font-weight:750;letter-spacing:-.03em;text-align:center;margin:10px 0}

/* Rechnen */
.sol{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--okbg);border:1px solid color-mix(in oklab,var(--ok) 25%,transparent)}
.hint{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--warnbg);border:1px solid color-mix(in oklab,var(--warn) 25%,transparent)}
.calc .row{margin-top:10px}.calc .btn{padding:9px 14px;font-size:.9rem}
@media (max-width:899px),(pointer:coarse){.desktop-only{display:none!important}}

/* Oszilloskop-Labor */
.scr,.bode{display:block;width:100%;border-radius:var(--r-sm);background:#0b1410}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.82rem}.legend .c1{color:#b8960b}.legend .c2{color:#0b8f9c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .legend .c1{color:#f5d142}:root:not([data-theme="light"]) .legend .c2{color:#33d6e6}}
:root[data-theme="dark"] .legend .c1{color:#f5d142}:root[data-theme="dark"] .legend .c2{color:#33d6e6}
.ctl{margin:10px 0}.ctl label{display:flex;justify-content:space-between;font-size:.92rem;color:var(--mute)}.ctl b{color:var(--ink);font-variant-numeric:tabular-nums}
.ctl input[type=range]{width:100%;height:34px;accent-color:var(--accent)}
.sel{width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1rem}
.meas>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.93rem}.meas>div:last-child{border:0}.meas span{color:var(--mute)}.meas b{text-align:right;font-variant-numeric:tabular-nums}
.tasks li{margin:.6rem 0}.mini{padding:3px 10px;border-radius:999px;border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);background:var(--soft);color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}
@media (min-width:900px){.scope{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.scope>.card:first-child{grid-column:1/3}}

/* Login, Konto, Quellen, Verwaltung */
.auth label,.srch label{display:block;margin:14px 0 4px;font-size:.86rem;font-weight:600;color:var(--mute)}
.auth input,.auth select,.srch input{display:block;width:100%;margin-top:5px;padding:13px 15px;font:inherit;font-size:1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:color-mix(in oklab,var(--bg) 60%,var(--card));color:var(--ink);transition:border-color .15s,box-shadow .15s}
.auth input:focus,.auth select:focus,.srch input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 22%,transparent)}
.auth .btn{margin-top:18px;width:100%}
.auth .tabs{position:static;margin:0 0 6px;box-shadow:none}
.errmsg{color:var(--bad);margin-top:10px;font-weight:500}.okmsg{color:var(--ok);margin-top:10px;font-weight:500}
.srch{display:flex;gap:8px;margin-bottom:10px}.srch input{margin:0;flex:1;border-radius:999px;padding-left:20px}.srch .btn{flex:none}
.tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--accent);vertical-align:middle;white-space:nowrap}
.tag.warn{background:var(--warnbg);color:var(--warn)}
mark{background:oklch(.9 .14 95);color:#1c2430;border-radius:4px;padding:0 3px}
.srcbox{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--soft),var(--card) 70%)}
.srcbox::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(var(--accent),var(--accent2))}
.srcbox h3{margin-top:0}
ul.src{list-style:none;margin:0;padding:0}
ul.src li{padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
ul.src li:first-child{border-top:0}
ul.src a{font-weight:650}

/* Schwebende Navigation */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;gap:4px;padding:6px;border-radius:999px;
  background:color-mix(in oklab,var(--card) 74%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.dock a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;color:var(--mute);text-decoration:none;font-size:.88rem;font-weight:650;transition:background .2s,color .2s}
.dock a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dock a span{display:none}
.dock a.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink)}
.dock a.on span{display:inline}
@media (min-width:900px){.dock a span{display:inline}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fc .inner{transition:none}}

/* Ergänzungen: hidden, Hero-Ring, Statistik, Wichtig-Markierung */
#back[hidden],#badge[hidden],.dock[hidden]{display:none}
.hero{display:flex;align-items:center;justify-content:space-between;gap:16px}
.donut{display:block;flex:none;width:96px;height:96px;transform:rotate(0deg)}
.donut .dt{font-size:8.6px;font-weight:750;fill:var(--ink);letter-spacing:-.02em;font-family:var(--font)}
.donut.hero-ring{width:92px;height:92px}
.donut.mini-ring{width:54px;height:54px}.donut.mini-ring .dt{font-size:9.5px}
.donut.big{width:min(220px,52vw);height:min(220px,52vw)}.donut.big .dt{font-size:9.6px}
a.stat{text-decoration:none;color:var(--mute)}
.stat.bad b{color:var(--bad)}
.statbig{display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,36px);flex-wrap:wrap;padding:24px}
.leg{display:grid;gap:10px;font-size:.95rem}
.leg div{display:flex;align-items:center;gap:10px}.leg i{width:14px;height:14px;border-radius:5px;flex:none}.leg b{font-variant-numeric:tabular-nums}.leg span{color:var(--mute);font-size:.85rem}
.imp{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-left:2px;border-radius:50%;background:oklch(.87 .17 92);color:oklch(.25 .06 70);font-size:.85em;font-weight:900;line-height:1;vertical-align:.05em;box-shadow:0 0 0 2px oklch(.87 .17 92 / .28)}
.impbar{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 12px;border-radius:var(--r-sm);background:oklch(.97 .06 95);border:1px solid oklch(.85 .13 92);color:oklch(.35 .07 75);font-weight:600;font-size:.92rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .impbar{background:oklch(.3 .06 90);border-color:oklch(.5 .1 90);color:oklch(.9 .09 95)}}
:root[data-theme="dark"] .impbar{background:oklch(.3 .06 90);border-color:oklch(.5 .1 90);color:oklch(.9 .09 95)}
.dock{max-width:calc(100vw - 20px)}
.dock a{padding:10px 13px}
.tabs.seg{position:static;box-shadow:none;margin:0;background:color-mix(in oklab,var(--bg) 60%,var(--card))}
@media (max-width:420px){.dock a{padding:10px 12px}}