/* ITA Helfer · Gestaltung: flach, nur dunkel (wie design/Main.dc.html und Aufgabe.dc.html).
   Tiefe, gedeckte Farbflächen, darauf Karten eine Stufe heller. Tasten-Kacheln mit dunkler Unterkante,
   leere Lücken gestrichelt. Kein Glas, kein Leuchten, keine Verläufe. U gelb, I blau, R violett – überall. */
@font-face{font-family:'DM Sans';font-weight:400;font-display:swap;src:url(fonts/dm-sans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-display:swap;src:url(fonts/dm-sans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:700;font-display:swap;src:url(fonts/dm-sans-700.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --bg:#131417; --ink:#F1F2F4; --muted:#A3A7AE; --line:#2A2C31; --line-2:#33363C; --soft:#C9CBCF;
  --card:#26282E; --card-d:#1C1E22; --well:#1E2025; --tipbg:#34373E;
  --warm:#2A1D16; --butter:#29230F; --sky:#13213A; --sage:#152418; --lilac:#1E1933;
  --key:#2E3137; --key-line:#474B53; --key-edge:#1B1D21;
  --slot:#575B64; --act:#6EA8FF; --act-bg:rgba(110,168,255,.10);
  --u:#F2B84B; --u-bg:#3A2F14; --u-ink:#F7CB72;
  --i:#6EA8FF; --i-bg:#182A47; --i-ink:#8DBBFF;
  --r:#B59CFF; --r-bg:#2E2650; --r-ink:#C9B8FF;
  --ok:#3DD68C; --ok-ink:#5BE0A0; --ok-bg:#12261C; --ok-line:#1F4A33;
  --ok-key:#13281D; --ok-key-line:#2F6B4D; --ok-key-edge:#173A29; --ok-key-ink:#6EE7A8;
  --bad:#FFB38A; --bad-bg:#2A1A12; --bad-line:#5A3420; --bad-soft:#2E2219; --bad-pill:#3A2416;
  --no-key:#2A1715; --no-key-line:#7A3A33; --no-key-edge:#4A211C; --no-key-ink:#FF9C8F;
  --btn:#F1F2F4; --btn-ink:#131417;
  --wire:#E6E7EA; --kw:#FFD24A;
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --navh:0px; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --gut:32px; --wide:1120px; --col:46rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:var(--navh);overflow-wrap:break-word;hyphens:auto}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
a{color:var(--ink);text-underline-offset:4px}
:focus-visible{outline:2px solid var(--act);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{font-weight:400;line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(32px,5.2vw,52px);letter-spacing:-.025em}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 .8rem}
sub,sup{font-size:.68em;line-height:0}
b,strong{font-weight:500}
.muted{color:var(--muted)}.small{font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.skip{position:fixed;left:16px;top:calc(8px + var(--safe-top));z-index:100;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:999px;transform:translateY(-180%);text-decoration:none;font-weight:500}
.skip:focus{transform:none}
.noscript{padding:16px;background:var(--bad-bg);color:var(--bad)}

/* ---------- Kopf und Navigation ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:var(--safe-top)}
.top-in{max-width:var(--wide);margin:0 auto;padding:12px var(--gut);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand-mark{width:30px;height:30px;flex:none}
.brand-name{font-weight:500;font-size:18px;letter-spacing:-.01em}
.brand-topic{color:var(--muted);font-size:15px;padding-left:10px;margin-left:2px;border-left:1px solid var(--line-2)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:15px}
.nav a{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--muted)}
.nav a[aria-current="page"],.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--card-d)}
.nav .ico{display:none}
.nav .cta{margin-left:8px;padding:0 20px;background:var(--btn);color:var(--btn-ink);font-weight:500}
.nav .cta:hover{color:var(--btn-ink)}
.badge{display:inline-block;min-width:20px;padding:0 7px;border-radius:999px;background:var(--bad-pill);color:var(--bad);font-size:13px;font-weight:500;line-height:20px;text-align:center}
body.focus .top{display:none}
main{max-width:var(--wide);margin:0 auto;padding:32px var(--gut) 96px}
.site-foot{max-width:var(--wide);margin:0 auto;padding:24px var(--gut) calc(32px + var(--safe-bottom));color:var(--muted);font-size:14px}
body.focus .site-foot{display:none}
#app:empty~.site-foot{visibility:hidden}
.copyleft{display:inline-block;transform:scaleX(-1)}

/* ---------- Knöpfe, Links, Chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:500 16px/1.2 var(--font);text-decoration:none;text-align:center;cursor:pointer}
.btn:disabled{opacity:.35;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.go{background:var(--ok);color:#0E1A13}
.btn.danger{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad-line)}
.btn.big,.btn.block{width:100%;min-height:54px;font-size:17px}
.btn.big{max-width:24rem}
.btn.sm{min-height:44px;padding:0 18px;font-size:15px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;background:none;border:0;color:var(--ink);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;margin:0 0 8px}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);font-weight:500;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
/* Größen-Chips: U gelb, I blau, R violett */
.qu,.qi,.qr,.qx{display:inline-block;padding:1px 8px;border-radius:7px;white-space:nowrap;line-height:1.5}
.qu{background:var(--u-bg);color:var(--u-ink)}.qi{background:var(--i-bg);color:var(--i-ink)}.qr{background:var(--r-bg);color:var(--r-ink)}.qx{background:var(--key);color:var(--ink)}
.tu{color:var(--u)}.ti{color:var(--i)}.tr{color:var(--r)}

/* ---------- Flächen und Karten ---------- */
.panel{border-radius:20px;padding:48px;display:flex;justify-content:center;align-items:center}
.panel.warm{background:var(--warm)}.panel.butter{background:var(--butter)}.panel.sky{background:var(--sky)}.panel.sage{background:var(--sage)}.panel.lilac{background:var(--lilac)}
.card{background:var(--card);border-radius:20px;padding:24px}
.card.dark,.plate{background:var(--card-d);border:1px solid var(--line);border-radius:20px}
.plate{padding:24px}
.page-lead{color:var(--muted);font-size:17px;max-width:52ch;margin:14px 0 28px}
.sec-title{margin:56px 0 20px}
.sec-title .muted{font-size:15px;letter-spacing:0;margin-left:10px}

/* ---------- Tasten-Kacheln (Antworten, Zeichen, Werte) ---------- */
.opt,.tile,.sort-btn,.order-item,.tcell.set{border:1.5px solid var(--key-line);border-bottom:3px solid var(--key-edge);background:var(--key);border-radius:10px;color:var(--ink)}
.opt,.tile,.sort-btn{cursor:pointer;transition:transform .08s}
.opt:active:not(:disabled),.tile:active:not(:disabled),.sort-btn:active:not(:disabled){transform:translateY(2px)}
@media (hover:hover){.opt:not(:disabled):hover,.tile:not(:disabled):hover,.sort-btn:not(:disabled):hover{border-color:#5E636C}}

/* ---------- Lernweg (Lektionen) ---------- */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;margin-bottom:24px}
.hero-text{flex:1 1 360px;min-width:0}
.hero-text .eyebrow{font-size:15px;color:var(--muted);margin:0 0 12px}
.hero-text p{color:var(--muted);font-size:17px;max-width:44ch;margin:18px 0 28px}
.hero-art{flex:1 1 420px;min-width:0}
.due-note{margin:18px 0 0;font-size:15px}.due-note a{display:inline-flex;align-items:center;min-height:44px}
.path{list-style:none;margin:0;padding:0;max-width:var(--col);display:grid;gap:8px}
.lrow{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:12px 16px;text-align:left;background:var(--card-d);border:1px solid var(--line);border-radius:16px;cursor:pointer;color:var(--ink)}
.lrow .num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--key-line);border-bottom-width:3px;border-bottom-color:var(--key-edge);background:var(--key);font-weight:500}
.lrow.done .num{background:var(--ok);border-color:var(--ok);color:#0E1A13}
.lrow.next{border-color:var(--act)}
.lrow.next .num{border-color:var(--act);color:var(--act);background:var(--act-bg)}
.lrow .t{display:block;font-weight:500;font-size:17px;line-height:1.3}
.lrow .d{display:block;color:var(--muted);font-size:15px}
.lrow .flag{margin-left:auto;flex:none;color:var(--ok-ink);font-size:13px;white-space:nowrap}
.continue-tag{display:inline-block;margin-left:10px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--i-bg);color:var(--i-ink);vertical-align:.15em}
.part-head{margin:40px 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.part-head h2{font-size:26px}
.part-head .muted{font-size:15px}
@media (hover:hover){.lrow:hover{border-color:var(--key-line)}}

/* Können je Bereich */
.lvl{display:inline-flex;gap:2px;vertical-align:middle}.lvl i{width:6px;height:12px;border-radius:2px;background:var(--key-line)}.lvl i.on{background:var(--ok)}
.chip .lvl{margin-left:2px}.chip[aria-pressed="true"] .lvl i:not(.on){background:#B9BCC2}.chip[aria-pressed="true"] .lvl i.on{background:#1E7A4F}
.skills{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:var(--col)}
.skill{display:flex;align-items:center;gap:14px;padding:8px 16px;min-height:56px;background:var(--card-d);border:1px solid var(--line);border-radius:14px}
.skill-t{flex:1;min-width:0;font-weight:500}.skill-l{color:var(--muted);min-width:5.5rem;font-size:15px}
.skill a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}

/* ---------- Lektion (Fokus) ---------- */
.player{max-width:42rem;margin:0 auto;min-height:calc(100dvh - 32px);display:flex;flex-direction:column}
.p-top{display:flex;align-items:center;gap:12px;padding:8px 0 4px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer}
.icon-btn:disabled{opacity:.3;cursor:default}
.p-bar{flex:1;height:8px;background:var(--key);border-radius:999px;overflow:hidden}
.p-bar i{display:block;height:100%;background:var(--act);border-radius:999px;transition:width .3s}
.p-count{color:var(--muted);font-size:14px;white-space:nowrap}
.p-body{flex:1;padding:16px 0 24px}
.p-kicker{font-size:14px;color:var(--muted);margin:0 0 2px}
.p-title{font-size:clamp(22px,3.2vw,26px);font-weight:500;line-height:1.25;letter-spacing:-.015em;margin:0 0 16px}
.p-text{font-size:17px}
.p-text p{max-width:60ch}
.p-end{text-align:center;padding:48px 0;max-width:34rem;margin:0 auto}
.p-end h2{font-size:clamp(28px,4vw,38px);margin:20px 0 10px}
.p-end .row{justify-content:center;flex-direction:column;margin-top:24px}.p-end .btn{height:auto;min-height:52px;padding:12px 24px;line-height:1.3}
.done-mark{display:grid;place-items:center;width:84px;height:84px;margin:0 auto;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.done-mark .ico{width:40px;height:40px;stroke-width:2.6}
.big-rule{font-size:19px;font-weight:500;background:var(--card);border-radius:14px;padding:14px 18px;max-width:none!important}
.tip{background:var(--card-d);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:15px;color:var(--soft);max-width:none!important}
.ex-list{display:grid;gap:8px;margin:14px 0 16px}
.ex-list>div{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--card-d);border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.tag{font-size:14px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--key);white-space:nowrap}
.steps{padding-left:22px}.steps li{margin-bottom:6px}
/* Durchgerechnetes Beispiel */
.worked{margin:0 0 16px;padding-left:24px;display:grid;gap:8px;font-size:18px}
.worked li{padding:10px 14px;border-radius:12px;background:var(--card);}
.worked li.new{animation:reveal .35s ease-out}
.worked li::marker{color:var(--muted);font-size:15px}
.line-note{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.ask{margin-bottom:16px}.ask-q{font-weight:500;margin:0 0 12px}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Unteres Blatt: Prüfen / Richtig / Typischer Fehler ---------- */
.sheet{position:sticky;bottom:var(--navh);z-index:5;margin:24px calc(-1 * var(--gut)) 0;padding:14px var(--gut) calc(18px + var(--safe-bottom));background:var(--bg);border-top:1px solid var(--line)}
.sheet.ok{background:var(--ok-bg);border-top-color:var(--ok-line)}
.sheet.bad{background:var(--bad-bg);border-top-color:var(--bad-line)}
/* Nach dem Prüfen steht die Rückmeldung im Fluss unter der Aufgabe (nichts verdeckt die Aufgabe); der Weiter-Knopf bekommt den Fokus. */
.sheet.done{position:static}
.sheet .note{color:var(--muted);margin:0 0 10px;font-size:15px}
.sheet .btn.big{max-width:none;width:100%}
.sheet .note.good{color:var(--ok-ink)}
.fb{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.fb p{margin:0}
.fb-kicker{font-size:13px;font-weight:500;color:var(--bad)}
.fb-title{font-weight:500;font-size:17px}
.sheet.ok .fb-title{color:var(--ok-ink)}
.fb-why{font-size:16px;font-weight:500;color:var(--ink)}
.fb-sol{margin-top:6px!important;font-size:15px;color:var(--soft)}
.fb-ex{margin-top:6px;font-size:15px;line-height:1.6;color:var(--soft)}
.fb-ex .scroll{margin-top:8px}
.fb-note{margin-top:8px!important;color:var(--ok-ink);font-size:15px}
.card .sheet,.qcard .sheet{margin:24px -24px -24px;padding:14px 24px 18px;border-radius:0 0 20px 20px;background:var(--card-d)}
.card .sheet.ok,.qcard .sheet.ok{background:var(--ok-bg)}
.card .sheet.bad,.qcard .sheet.bad{background:var(--bad-bg)}

/* ---------- Frage ---------- */
.qcard{background:var(--card-d);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:var(--col)}
.skill a{min-width:56px;justify-content:center;margin-left:auto}
.q-lead{color:var(--muted);font-size:14px;margin:0 0 4px}
.q-text{font-size:clamp(19px,2.6vw,22px);font-weight:500;line-height:1.4;letter-spacing:-.01em;margin:0 0 18px}
.q-text p{margin:0 0 8px}
.q-text .given{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:16px;font-weight:400;color:var(--muted)}
.again{display:inline-block;font-size:13px;font-weight:500;color:var(--i-ink);background:var(--i-bg);border-radius:999px;padding:2px 10px;margin-bottom:10px}
.hint{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:12px 16px;margin-top:14px;font-size:15px;color:var(--soft)}
.hint .ico{color:var(--u);margin-top:2px}
.hint-btn{margin-top:8px;color:var(--muted)}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:10px 16px;font-size:17px;text-align:left}
.opt .key{display:none;flex:none;width:24px;height:24px;border-radius:6px;background:var(--key-edge);color:var(--muted);font-size:13px;line-height:24px;text-align:center}
.opt.sel{border-color:var(--act);border-bottom-color:#2B4E86;background:#1E2A3C}
.opt.right{border-color:var(--ok-key-line);border-bottom-color:var(--ok-key-edge);background:var(--ok-key);color:var(--ok-key-ink)}
.opt.wrong{border-color:var(--no-key-line);border-bottom-color:var(--no-key-edge);background:var(--no-key);color:var(--no-key-ink)}
.opt.wrong>span:last-child{text-decoration:line-through;text-decoration-thickness:1.5px}
.opt:disabled{cursor:default}
.opt.miss{border-style:dashed;border-color:var(--ok-key-line)}
@media (hover:hover) and (pointer:fine){.opt .key{display:inline-block}}
.w-note{color:var(--muted);font-size:15px;margin:0 0 10px}
/* Zahl eingeben */
.answer-label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
.answer-box{display:flex;align-items:center;gap:10px;max-width:22rem}
.answer,.blank{border:1.5px dashed var(--slot);background:transparent;color:var(--ink);border-radius:10px}
.answer{flex:1;min-width:0;min-height:54px;padding:8px 14px;font-size:20px;font-weight:500}
.answer:focus,.blank:focus{outline:none;border-color:var(--act);background:var(--act-bg)}
.answer:focus-visible,.blank:focus-visible{box-shadow:0 0 0 3px rgba(110,168,255,.25)}
.answer:not(:placeholder-shown),.blank:not(:placeholder-shown){border-style:solid;border-color:var(--key-line)}
.answer.right,.blank.ok{border:1.5px solid var(--ok-key-line);background:var(--ok-key);color:var(--ok-key-ink)}
.answer.wrong,.blank.bad{border:1.5px solid var(--no-key-line);background:var(--no-key);color:var(--no-key-ink)}
.answer:disabled{opacity:1;-webkit-text-fill-color:currentColor}
.answer::placeholder{color:#6B7078;font-weight:400}
.unit{font-size:19px;color:var(--muted)}
.answer-help{color:var(--muted);font-size:14px;margin:8px 0 0}
/* Mehrfachauswahl */
.check-opt .box{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--key-line);border-radius:6px;color:transparent}
.check-opt .box .ico{width:16px;height:16px;stroke-width:3}
.check-opt[aria-pressed="true"] .box{background:var(--act);border-color:var(--act);color:var(--btn-ink)}
.check-opt.right .box{background:var(--ok);border-color:var(--ok);color:#0E1A13}
.check-opt.wrong .box{background:var(--no-key-ink);border-color:var(--no-key-ink);color:#2A1715}
.tag-miss{flex:none;white-space:nowrap;margin-left:auto;padding:1px 9px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:13px}
/* Reihenfolge */
.order-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.order-item{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 6px 6px 14px;font-size:16px}
.order-item.ok{border-color:var(--ok-key-line);border-bottom-color:var(--ok-key-edge);background:var(--ok-key)}
.order-item.bad{border-color:var(--no-key-line);border-bottom-color:var(--no-key-edge);background:var(--no-key)}
.order-pos{flex:none;color:var(--muted);min-width:22px}.order-l{flex:1;min-width:0}
.order-btns{display:flex;gap:4px;flex:none}
.order-btns .icon-btn{border-radius:10px;background:var(--key-edge)}
/* Zuordnen */
.sort{display:grid;gap:0;padding:4px 16px;background:var(--card-d);border:1px solid var(--line);border-radius:16px;margin-top:6px}
.qcard .sort{background:var(--card)}
.sort-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.sort-row:last-child{border-bottom:0}
.sort-row.good>span:first-child{color:var(--ok-ink)}.sort-row.bad>span:first-child{color:var(--no-key-ink)}
.sort-opts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sort-btn{min-width:48px;min-height:44px;padding:0 12px;font-weight:500}
.sort-btn.right,.sort-btn.right[aria-pressed="true"]{border-color:var(--ok-key-line);border-bottom-color:var(--ok-key-edge);background:var(--ok-key);color:var(--ok-key-ink)}
.sort-btn.wrong,.sort-btn.wrong[aria-pressed="true"]{border-color:var(--no-key-line);border-bottom-color:var(--no-key-edge);background:var(--no-key);color:var(--no-key-ink)}
.sort-btn[aria-pressed="true"]{border-color:var(--act);border-bottom-color:#2B4E86;background:#1E2A3C;color:var(--i-ink)}
.sort-btn:disabled{cursor:default}
.sort-fix{flex-basis:100%;min-width:0;max-width:100%;color:var(--ok-ink);font-size:15px;overflow-wrap:anywhere}
.sort-l{flex:1 1 11rem;min-width:0;font-weight:500;display:inline-flex;align-items:center}
/* Lücken in Tabellen und Rechenwegen */
.blank{width:5.4rem;min-height:44px;padding:4px 8px;font-size:17px;font-weight:500;text-align:center}
select.blank{width:auto;max-width:100%;text-align:left;cursor:pointer;border-style:solid;border-color:var(--key-line);background:var(--key)}
select.blank option{background:var(--card-d);color:var(--ink)}
.fix{display:inline-block;margin-left:6px;color:var(--ok-ink);font-size:15px}
.fill-steps{margin:0;padding-left:22px;display:grid;gap:10px;font-size:18px;line-height:1.7}
.fill-steps li::marker{color:var(--muted);font-size:15px}
.tcell{width:100%;min-width:44px;min-height:44px;border:1.5px dashed var(--slot);border-radius:10px;background:transparent;cursor:pointer;font-weight:500;font-size:17px;color:var(--muted)}
.tcell.set{color:var(--ink)}
.tcell.ok{border:1.5px solid var(--ok-key-line);background:var(--ok-key)}
.tcell.bad{border:1.5px solid var(--no-key-line);background:var(--no-key)}
.scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tbl{border-collapse:separate;border-spacing:0;background:var(--card-d);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 auto}
.tbl th{font-weight:500;padding:9px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{text-align:center;padding:6px 10px;border-top:1px solid var(--line);height:48px;min-width:3.2rem}
.tbl th+th,.tbl td+td{border-left:1px solid var(--line)}
.fill-tbl td{white-space:nowrap}
.num{font-weight:500;white-space:nowrap}
.pill{display:inline-grid;place-items:center;min-width:1.9em;height:1.55em;padding:0 .45em;border-radius:999px;font-weight:500;line-height:1;vertical-align:.05em}
.pill.w{background:var(--u-bg);color:var(--u-ink)}.pill.f{background:var(--key);color:var(--muted)}

/* ---------- Üben, Tests, Fehlerheft ---------- */
.stats{display:flex;gap:24px;color:var(--muted);font-size:15px;margin:4px 0 16px}
.tests{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));max-width:var(--col)}
.tcard{display:flex;flex-direction:column;gap:6px}
.tcard h2{font-size:22px;font-weight:500}
.tcard p{margin:0}
.tbest{margin-top:auto!important;padding:10px 0;font-size:15px}
.run-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;max-width:var(--col)}
.run-head h1{font-size:clamp(24px,3.4vw,30px)}
.timer{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;background:var(--card-d);border:1px solid var(--line);border-radius:12px;padding:6px 14px;min-width:100px;text-align:center}
.timer.low{color:var(--bad);border-color:var(--bad-line)}
.dots{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px;max-width:var(--col)}
.dot{width:44px;height:44px;border-radius:12px;border:1.5px dashed var(--slot);background:transparent;font-size:14px;cursor:pointer;color:var(--muted)}
.dot.done{border:1.5px solid var(--key-line);border-bottom:3px solid var(--key-edge);background:var(--key);color:var(--ink)}
.dot.cur{border-color:var(--act);color:var(--act)}
.res-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;max-width:var(--col);margin:16px 0}
.grade{font-size:44px;line-height:1;letter-spacing:-.02em}
.trow{display:grid;grid-template-columns:minmax(0,12rem) 1fr 4rem 5rem;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);max-width:var(--col)}
.tbar,.meter{display:block;height:6px;background:var(--key);border-radius:999px;overflow:hidden}
/* Startseite: Bild zuerst (Prototyp vom 3.10.) */
.h-main{max-width:60rem;margin:0 auto;padding:8px var(--gut) 40px}
.h-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 14px}
.h-top h1{margin:0;font-size:clamp(28px,5vw,40px);font-weight:500;letter-spacing:-.02em}
.h-top .mascot{position:static;width:52px;height:58px}
.h-next{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:20px;background:var(--card);border:1px solid var(--line-2);color:inherit;text-decoration:none}
.h-next .art{flex:none;width:96px;height:76px;border-radius:14px;display:grid;place-items:center;overflow:hidden;padding:6px}
.h-next .art>svg{width:100%;height:100%}
.h-next .txt{flex:1;min-width:0;display:grid;gap:4px}
.h-next small,.h-tile small,.h-row small{color:var(--muted);font-size:13px}
.h-next b{font-weight:500;font-size:17px;line-height:1.25}
.h-next .meter i,.h-prog .meter i{background:var(--act)}
.h-next .go{flex:none;width:44px;height:44px;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center}
.h-sec{font-size:15px;font-weight:500;color:var(--muted);margin:28px 0 10px}
.h-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.h-tile{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;background:var(--card-d);border:1px solid var(--line)}
.h-tile .art{height:120px;display:grid;place-items:center;padding:10px}
.h-tile .art>svg{width:100%;height:100%}
.art.warm{background:var(--warm)}.art.lilac{background:var(--lilac)}.art.sky{background:var(--sky)}.art.sage{background:var(--sage)}.art.butter{background:var(--butter)}
.h-tile .cap{display:grid;gap:4px;padding:10px 12px 12px}
.h-tile b{font-weight:500;font-size:16px;line-height:1.25}
.h-prog{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.h-prog .meter{flex:1}.h-prog.sure .meter i{background:var(--ok)}
.h-rows{display:grid;gap:10px;margin-top:20px}
.h-row{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:18px;background:var(--card-d);border:1px solid var(--line);color:inherit;text-decoration:none;min-height:64px}
.h-row .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.ic.butter{background:var(--butter);color:var(--u)}.ic.sky{background:var(--sky);color:var(--i)}.ic.lilac{background:var(--lilac);color:var(--r)}.ic.warm{background:var(--warm);color:var(--bad)}
.h-row .txt{flex:1;display:grid}.h-row b{font-weight:500;font-size:16px}.h-row .chev{color:var(--muted)}
@media (hover:hover){.h-next:hover,.h-tile:hover,.h-row:hover{border-color:#474B53}}
.h-foot{max-width:60rem;margin:0 auto;padding:8px var(--gut) 40px;display:grid;gap:12px}
.h-foot .h-sec{margin-top:8px}.h-legal{margin:0;hyphens:manual}
@media (min-width:900px){.h-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.h-rows{grid-template-columns:repeat(2,minmax(0,1fr))}.h-tile .art{height:150px}}
.tbar i,.meter i{display:block;height:100%;border-radius:999px}
.review{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:var(--col)}
.rv{border-left:4px solid var(--ok)}.rv.bad{border-left-color:var(--bad)}
.rv .q-text{font-size:17px;margin-bottom:8px}.rv p{margin:4px 0}
.rv .fb-why{margin:6px 0;padding:10px 14px;border-radius:12px;background:var(--bad-soft);font-weight:400;font-size:15px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;margin:10px 0 16px;cursor:pointer}
.check input{width:22px;height:22px;flex:none;accent-color:var(--act)}
.good{color:var(--ok-ink)}.warn{color:var(--bad)}
.error-list{display:grid;gap:12px;max-width:var(--col);margin:16px 0}
.error-item{display:flex;gap:16px;align-items:center}
.error-item>div{flex:1;min-width:0}.error-item p{margin:2px 0}
.count{display:inline-block;background:var(--bad-pill);color:var(--bad);border-radius:999px;padding:0 9px;font-size:13px}
.boxes{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}.boxes i{width:14px;height:6px;border-radius:3px;background:var(--key-line)}.boxes i.on{background:var(--ok)}
.empty{text-align:center;max-width:36rem;padding:40px 24px}
.empty .done-mark{margin-bottom:16px}
.empty h2{font-size:26px;margin-bottom:10px}

/* ---------- Spickzettel ---------- */
.spick{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.sp{background:var(--card-d);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.sp-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.sp-head h2{font-size:20px;font-weight:500}
.sp-sym{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:var(--key);border:1.5px solid var(--key-line);border-bottom:3px solid var(--key-edge);font-size:24px}
.sp-head small{display:block;color:var(--muted);font-size:14px}
.sp .rule{font-weight:500}.sp .tbl{margin:10px 0 0}
.sp .fig{margin:10px 0 0;max-width:none}.sp-rule{margin:12px 0 0;color:var(--soft);font-size:15px;line-height:1.6}.sp-rule>.qi,.sp-rule>.qu,.sp-rule>.qr{margin:0 4px 6px 0}
.sp-rw{display:grid;width:100%;font-size:14px}.sp-rw .rw-r{overflow-wrap:normal;hyphens:auto}

/* ---------- Fachwort ---------- */
.term{text-decoration:underline dotted 1.5px;text-decoration-color:#7C818A;text-underline-offset:4px;cursor:help;border-radius:4px}
.term:focus-visible{outline-offset:2px}
.fw-tip.hover{pointer-events:auto}
.fw-tip{position:fixed;left:0;top:0;z-index:95;max-width:min(300px,calc(100vw - 16px));padding:10px 14px;border-radius:14px;background:var(--tipbg);color:var(--ink);box-shadow:0 0 0 1px #4A4E57;font-size:14px;line-height:1.45;pointer-events:none}
.fw-tip .kw{display:block;font-size:11.5px;font-weight:500;color:var(--kw);margin-bottom:1px}
.fw-tip b{display:block;font-size:15px;font-weight:500}
.fw-tip .fw-d{display:block;color:var(--soft)}

/* ---------- Startseite ---------- */
.hub main{display:flex;flex-direction:column;gap:120px;padding-top:56px}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:64px}
.split.rev{flex-wrap:wrap-reverse}
.split-text{flex:1 1 360px;min-width:0}
.split-text p{color:var(--muted);max-width:430px;margin:20px 0 0}
.split-text p+p{margin-top:14px}
.split-art{flex:1 1 520px;min-width:0}
.eyebrow{font-size:15px;color:var(--muted)}
.hub h1{margin-top:14px;font-size:clamp(38px,6vw,52px);line-height:1.08}
.lead{margin:22px 0 0;font-size:17px;color:var(--muted);max-width:430px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}
.last{margin-top:22px;font-size:14px;color:var(--muted)}
.stage{position:relative;width:100%;max-width:440px;border-radius:28px;background:var(--card);padding:24px 24px 22px}
.stage>svg:not(.mascot){display:block;width:100%;height:auto}
.eqline{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:19px}
.slot{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 10px;border-radius:8px;border:1.5px dashed var(--slot);background:transparent;color:var(--r-ink)}
.slot.active{border-color:var(--act);background:var(--act-bg)}
.slot.ok{border:1.5px solid var(--ok-key-line);border-bottom:3px solid var(--ok-key-edge);background:var(--ok-key);color:var(--ok-key-ink)}
.slot.no{border:1.5px solid var(--no-key-line);border-bottom:3px solid var(--no-key-edge);background:var(--no-key);color:var(--no-key-ink)}
.tray{margin-top:16px;padding:10px;border-radius:14px;background:var(--well);display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tile{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:17px;max-width:100%}
.tile.dev{flex:none}.tile.dev span{white-space:nowrap;overflow-wrap:normal}
.tile:disabled{opacity:.35;cursor:default}
.tile.fixed{cursor:default}
.tile.u,.slot.u{color:var(--u-ink)}.tile.i,.slot.i{color:var(--i-ink)}.tile.r,.slot.r{color:var(--r-ink)}
.stage-given{margin:10px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:14px;color:var(--muted)}
.stage-note{min-height:1.5em;margin:10px 0 0;text-align:center;font-size:14px;color:var(--soft)}
.stage-note.good{color:var(--ok-ink)}.stage-note.bad{color:var(--bad)}
.mascot{position:absolute;right:-30px;top:-34px;width:76px;height:84px;display:block}
.weg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:36px}
.weg-head p{margin:10px 0 0;color:var(--muted)}
.weg-head .sum{font-size:15px;color:var(--muted)}
.weg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.wcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:18px}
.wcard .art{height:168px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.wcard .art.warm{background:var(--warm)}.wcard .art.butter{background:var(--butter)}.wcard .art.sky{background:var(--sky)}.wcard .art.sage{background:var(--sage)}.wcard .art.lilac{background:var(--lilac)}
.wcard .mini{border-radius:16px;background:var(--card);display:flex;align-items:center;justify-content:center;padding:14px 16px}
.wcard .meta{margin-top:14px;font-size:14px;color:var(--muted)}
.wcard .t{font-weight:500;font-size:20px;line-height:1.3}
.wcard .prog{margin-top:10px;display:flex;align-items:center;gap:10px}
.wcard .prog .meter{flex:1}
.wcard .prog span:last-child{font-size:13px;color:var(--muted);white-space:nowrap}
.wcard .prog.sure span:last-child{color:var(--ok-ink)}.wcard .prog.part span:last-child{color:var(--i-ink)}
.wcard .logo-big{font-size:52px;line-height:1;color:var(--ink)}
@media (hover:hover){.wcard:hover .t{text-decoration:underline;text-underline-offset:4px}}
.heute{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding:28px 32px;border-radius:20px;background:var(--card-d);border:1px solid var(--line);margin-top:28px}
.heute>div{flex:1 1 320px;min-width:0}
.heute h3{font-size:22px}
.heute p{margin:6px 0 0;color:var(--muted)}
.labcard{width:100%;max-width:420px;border-radius:28px;background:var(--card);padding:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px}
.labcard svg{max-width:100%;height:auto}
.labchecks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:#D5D7DB}
.labchecks li{display:inline-flex;align-items:center;gap:8px}
.labchecks .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--ok);color:#131417;stroke-width:3}
.mistake{width:100%;max-width:420px;border-radius:28px;background:var(--card);padding:26px}
.mistake .eqline{justify-content:flex-start;margin:0;font-size:18px}
.mistake .slot{min-width:0}
.mistake .slot.no{text-decoration:line-through}
.mistake .box{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--bad-soft)}
.mistake .box b{display:block;font-size:13px;color:var(--bad)}
.mistake .box span{display:block;margin-top:2px;font-size:15px;line-height:1.5;color:#E7E8EA}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:24px 48px;padding-top:28px;border-top:1px solid var(--line)}
.foot-grid h2{font-size:20px;font-weight:500;margin-bottom:8px}
.foot-grid p{color:var(--muted);font-size:15px;max-width:60ch}
.code{display:block;width:100%;margin:12px 0 4px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--card-d);color:var(--ink);font:14px/1.4 ui-monospace,Consolas,monospace;word-break:break-all;resize:vertical}
.restore{margin-top:12px}.restore summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:500}
.file-btn{position:relative;overflow:hidden}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-btn:focus-within{outline:2px solid var(--act);outline-offset:3px}
/* Vokabular */
.vocab-page{max-width:60rem}
.v-find{display:block;width:100%;max-width:26rem;margin-bottom:20px;font-size:17px;font-weight:400}
.vocab-tbl{margin:0;width:100%}.vocab-tbl th,.vocab-tbl td{text-align:left;vertical-align:top;white-space:normal;padding:12px 14px}
.vocab-tbl tbody th{font-weight:500;width:34%}.vocab-tbl td{color:var(--soft);height:auto}
/* Schmal: jede Zeile als kleine Karte, Begriff über der Erklärung (lange Fachwörter brauchen die ganze Breite) */
@media (max-width:560px){.vocab-tbl thead{display:none}.vocab-tbl,.vocab-tbl tbody,.vocab-tbl tr,.vocab-tbl th,.vocab-tbl td{display:block;width:auto}.vocab-tbl tbody th{width:auto;padding:12px 14px 2px;border-bottom:0}.vocab-tbl td{border-left:0!important;border-top:0;padding:0 14px 12px}.vocab-tbl tr+tr{border-top:1px solid var(--line)}}
/* Heute lernen */
.heute-start,.heute-end{max-width:40rem}
.heute-start h1,.heute-end h1{margin-bottom:12px}
.heute-topics,.heute-better{list-style:none;padding:0;margin:16px 0;display:grid;gap:6px}
.heute-better li{color:var(--ok-ink)}
.heute-end{text-align:center;margin:0 auto}.heute-end .heute-topics,.heute-end .heute-better{display:inline-grid;text-align:left}

/* ---------- Schaltpläne (shared/circuit.js, Startseite) ---------- */
.c-wire{fill:none;stroke:var(--wire);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-term{fill:var(--card);stroke:var(--wire);stroke-width:2}
.c-part{fill:var(--card);stroke:var(--wire);stroke-width:2}
.c-part.hl{fill:var(--r-bg);stroke:var(--r);stroke-width:2.2}
.c-sym{fill:none;stroke:var(--wire);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-u{fill:none;stroke:var(--u);stroke-width:1.8}.c-u.head{fill:var(--u);stroke:none}
.c-i{fill:none;stroke:var(--i);stroke-width:1.8}.c-i.head{fill:var(--i);stroke:none}
.c-lbl{font:500 16px var(--font);fill:var(--r)}
.c-ulbl{font:500 15px var(--font);fill:var(--u)}
.c-ilbl{font:500 16px var(--font);fill:var(--i)}
.c-sub{font-size:70%}
.c-val{font:400 13px var(--font);fill:var(--muted)}
.c-fault{font:500 18px var(--font);fill:var(--ink)}
.c-pt{fill:var(--ink)}.c-tag{fill:var(--key);stroke:var(--key-line);stroke-width:1.5}.c-tagt{font:500 12px var(--font);fill:var(--ink);text-anchor:middle}
.c-flow{fill:none;stroke:var(--i);stroke-linecap:round;stroke-linejoin:round}
.c-flow.glow{stroke-width:9;opacity:.14}
.c-flow.dash{stroke-width:2.6;stroke-dasharray:2 14;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
@media (prefers-reduced-motion:reduce){.c-flow.dash{animation:none}}

/* ---------- Bilder zur Aufgabe, Schaltplan-Größe ---------- */
.fig{background:var(--card);border-radius:16px;padding:12px;margin:0 0 18px;max-width:30rem}
.fig .circuit,.fig .signal{display:block;width:100%;height:auto}
.circuit{display:block;width:100%;height:auto}
.symbol{width:40px;height:auto;flex:none}
.c-symt{font:500 14px var(--font);fill:var(--wire);text-anchor:middle}
.c-slot{fill:var(--act-bg);stroke:var(--slot);stroke-width:1.6;stroke-dasharray:4 3}
.c-hit{fill:transparent}
.c-place{cursor:pointer;outline:none}
.c-place.active .c-slot,.c-place.drop .c-slot,.c-place:hover .c-slot{stroke:var(--act)}
.c-place:focus-visible .c-hit{stroke:var(--act);stroke-width:2.5;stroke-dasharray:none}
.c-place.drop .c-hit{fill:var(--act-bg)}
.c-place.ok .c-part{stroke:var(--ok);fill:var(--ok-key)}.c-place.bad .c-part{stroke:var(--no-key-ink);fill:var(--no-key)}
/* Lektion: Bild mit Tasten (Schritt „bild“) */
.bild{display:grid;gap:14px}
.bild .fig{margin:0;max-width:none}.bild .fig.sym{max-width:none;height:200px;align-items:center}.bild .fig.sym .symbol{width:auto;height:150px;max-width:120px}
.bild-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:10px}
.bkey{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:14px;background:var(--key);border:1.5px solid var(--key-line);border-bottom:3px solid var(--key-edge);color:var(--ink);font:500 15px/1.25 var(--font);text-align:left;cursor:pointer;transition:transform .08s,border-color .15s,background-color .15s}
.bkey:active{transform:translateY(2px)}
.bkey[aria-pressed="true"]{border-color:var(--act);border-bottom-color:#2B4E86;background:#1E2A3C}
.bk-i{flex:none;display:grid;place-items:center}.bk-l{min-width:0}
.bk-big{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;font-size:18px;font-weight:500}
.bild-line{margin:0;font-size:17px;line-height:1.45;color:var(--soft);min-height:2.9em}.bild-line:empty{display:none}
.bild .c-tap.on{fill:rgba(110,168,255,.16);stroke-width:2.5;animation:tap-glow .9s ease-in-out 2}
.fig-ohm svg{display:block;max-width:14rem;margin:0 auto}
/* Bilder zeichnen sich (nur, was etwas zeigt): Leiter, dann Bauteile, dann Pfeile; Sinus wird gezogen; Elektronen fließen */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes qs-move{to{transform:translateX(34px)}}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fig.anim .c-wire,.c-wire.grow,.fig.anim .s-curve{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s ease-out .05s forwards}
.fig.anim .c-term,.fig.anim .c-part,.fig.anim .c-sym,.fig.anim .c-symt,.c-term.grow,.c-part.grow,.c-sym.grow,.c-symt.grow{transform-box:fill-box;transform-origin:center;animation:pop-in .35s ease-out both}
.fig.anim .c-part,.fig.anim .c-sym,.fig.anim .c-symt{animation-delay:.3s}
/* Multimeter im Lektionsbild: Stecker gleiten in die Buchsen, der Knopf dreht von OFF auf den Bereich, dann zeigt das LCD den Wert */
.fig.anim .mt-plug{animation:mt-plug .45s ease-out .1s backwards}
.fig.anim .mt-turn{transform-box:fill-box;transform-origin:center;animation:mt-turn .8s cubic-bezier(.3,1.3,.5,1) .4s backwards}
.fig.anim .mt-lcd{animation:fade-in .3s steps(3) 1.15s backwards}
@keyframes mt-plug{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes mt-turn{from{transform:rotate(calc(-1 * var(--a)))}to{transform:none}}
.fig.anim .c-u,.fig.anim .c-ulbl,.fig.anim .c-lbl,.fig.anim .c-val,.fig.anim .c-i,.fig.anim .c-ilbl,.fig.anim .c-sub{animation:fade-in .4s ease-out .75s both}
.c-u.grow,.c-ulbl.grow,.c-lbl.grow,.c-val.grow,.c-i.grow,.c-ilbl.grow{animation:fade-in .45s ease-out both}
.qs-e{animation:qs-move 1.4s linear infinite}
.p-body.enter{animation:step-in .3s ease-out}
.sheet.done.ok .fb-title{transform-origin:left center;animation:pop-in .3s ease-out}
.sheet.done.bad .fb-kicker{animation:nudge .3s ease-in-out}

/* Antippen im Schaltplan (Antwortart tippen): feine Punkte zeigen, was man antippen kann */
.c-tap{fill:transparent;stroke:transparent;stroke-width:2;outline:none;transform-box:fill-box;transform-origin:center}
.c-tap[data-hit]{cursor:pointer;transition:fill .15s,stroke .15s}
@media (hover:hover){.c-tap[data-hit]:hover{stroke:var(--slot);stroke-dasharray:4 4}}
.c-tap[data-hit]:focus-visible{stroke:var(--act);stroke-width:2.5;stroke-dasharray:none}
.c-tap.on{stroke:var(--act);stroke-dasharray:6 4;fill:var(--act-bg)}
.c-tap.ok{stroke:var(--ok);stroke-dasharray:none;fill:rgba(61,214,140,.12)}
.c-tap.bad{stroke:var(--bad);stroke-dasharray:6 4;fill:rgba(255,179,138,.10)}
@keyframes tap-pop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes tap-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes tap-glow{50%{stroke-width:5}}
.c-tap.pop{animation:tap-pop .22s ease-out}
.tap-fig.done .c-tap.bad{animation:tap-shake .28s ease-in-out 2}
.tap-fig.done .c-tap.ok{animation:tap-glow .7s ease-in-out 2}
.tap-fig{max-width:30rem}
.c-node{fill:var(--wire)}
.c-ray{fill:none;stroke:var(--wire);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}
#er-show{margin-top:10px;border:1.5px solid var(--key-line);color:var(--ink)}
.sort-row{row-gap:6px}
/* ---------- Rechenweg: links rechnen, rechts kommentieren ---------- */
.rw{display:grid;gap:8px;margin:0 0 4px;font-size:18px}
.rw.two{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:14px;border:1px solid var(--line-2);border-radius:18px;padding:12px 16px}
.rw-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px}
.rw-r{font-size:13.5px;line-height:1.35;color:var(--muted);border-left:1px solid var(--line-2);padding-left:12px;display:flex;align-items:center}
.slotbtn{display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:0 10px;border-radius:8px;border:1.5px dashed var(--slot);background:transparent;color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
.slotbtn.active{border-color:var(--act);background:var(--act-bg)}
.slotbtn.filled{border:1.5px solid var(--key-line);border-bottom:3px solid var(--key-edge);background:var(--key)}
.slotbtn.u{color:var(--u-ink)}.slotbtn.i{color:var(--i-ink)}.slotbtn.r{color:var(--r-ink)}
.slotbtn.res,.tile.res{text-decoration:underline double;text-underline-offset:6px}
.slotbtn.drop{border-color:var(--act);background:var(--act-bg)}
.slotbtn.ok{border-color:var(--ok-key-line);border-bottom-color:var(--ok-key-edge);background:var(--ok-key);color:var(--ok-key-ink)}
.slotbtn.bad{border-color:var(--no-key-line);border-bottom-color:var(--no-key-edge);background:var(--no-key);color:var(--no-key-ink);text-decoration:line-through}
.slotbtn:disabled{cursor:default}
.tile[data-tile]{touch-action:none;-webkit-user-select:none;user-select:none}
.drag-ghost{position:fixed;left:0;top:0;z-index:96;pointer-events:none;opacity:.92;margin:0}
.w-slots .tray,.w-schaltung .tray{margin-top:14px}
.tile.dev{gap:10px;padding:0 14px 0 8px}
.tile.dev .symbol{width:30px}
.tile.dev[aria-pressed="true"]{border-color:var(--act);border-bottom-color:#2B4E86;background:#1E2A3C}
.sch-fig{background:var(--card);border-radius:16px;padding:10px;max-width:30rem}
/* ---------- ET-Lektionsschritte: Schaltplan entsteht, Schaltplan-Check, Karopapier ---------- */
.dbl{text-decoration:underline double;text-underline-offset:5px}
.build{display:grid;gap:14px}
.build-steps{margin:0;padding-left:22px;display:grid;gap:8px}
.build-steps li.done{color:var(--muted)}.build-steps li.now{font-weight:500}
.ck{display:grid;gap:16px}
.ck-rules{display:grid;gap:10px}
.ck-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.ck-l{min-width:9.5rem;font-weight:500}
.ck-opts{display:flex;flex-wrap:wrap;gap:6px}
.ck-opts .chip{min-height:44px;padding:0 14px;font-size:15px}
.rubric{list-style:none;margin:0;padding:12px 16px;display:grid;gap:4px;border-radius:14px;background:var(--card)}
.rubric li{display:flex;align-items:center;gap:8px}
.points.paper{list-style:none;padding:0;margin:8px 0 14px}
.points.paper small{font-size:13px}
.ex-list.syms>div{justify-content:flex-start}
.sym-cell{display:inline-flex;width:48px;justify-content:center}.sym-cell .symbol{width:34px}
.ex-list.arts>div{flex-direction:column;align-items:stretch}.ex-list.arts .signal{max-width:320px}
.tbl.vocab td{min-width:12rem}.tbl.vocab th{text-align:left}
.sp-sym .ico{width:24px;height:24px}
/* ---------- Begriff erklären ---------- */
.essay{display:block;width:100%;min-height:7rem;font-size:17px;font-weight:400;line-height:1.5;resize:vertical}
.essay[readonly]{border-style:solid;border-color:var(--key-line);color:var(--soft)}
.model{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--card)}
.model .points{list-style:none;margin:6px 0 0;padding:0}
.model .check{margin:2px 0;align-items:flex-start}.model .check input{margin-top:3px;flex:none}
.model .check.ok span{color:var(--ok-ink)}.model .check.bad span{color:var(--bad)}
.fig.sym{display:flex;justify-content:center;max-width:12rem;margin-left:auto;margin-right:auto}.fig.sym .symbol{width:96px}
.fig .figure{display:block;width:100%;height:auto}.figure.mt{max-height:clamp(22rem,56vh,34rem)}.fig.fig-meter{max-width:19rem;margin-left:auto;margin-right:auto}.bild .fig.fig-meter{max-width:none}.bild .fig-meter svg{max-width:19rem;margin:0 auto}
.sort-l .devi{width:40px;height:28px;margin-right:10px;vertical-align:middle;flex:none}
.fig.devs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;padding:16px}.devi{width:56px;height:40px}
p.given{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}p.given>span{padding:4px 10px;font-size:16px}
.opts.graphs .opt .symbol{width:56px;margin:6px auto}
/* ---------- Größe mit Vorsatzzeichen ---------- */
.gq-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gq-letter{font-size:20px;font-weight:500}
.gq-num{flex:0 1 9rem;min-width:6rem}
.gq-pfx{display:flex;flex-wrap:wrap;gap:6px}
.gq-chip{min-width:52px;justify-content:center}
.gq-chip:disabled{cursor:default;opacity:.6}
/* ---------- Signal-Zeit-Diagramme ---------- */
.signal{display:block;width:100%;height:auto;max-width:520px}
.signal .s-grid{stroke:#33363C;stroke-width:1;fill:none}
.signal .s-axis{stroke:var(--muted);stroke-width:1.6;fill:none}.signal .s-arrow{fill:var(--muted)}
.signal{--sig-bg:var(--card)}.ex-list .signal,.plate .signal,.card.dark .signal{--sig-bg:var(--card-d)}.plate .fig .signal{--sig-bg:var(--card)}.sheet .signal{--sig-bg:var(--bg)}.sheet.ok .signal{--sig-bg:var(--ok-bg)}.sheet.bad .signal{--sig-bg:var(--bad-bg)}
.signal .s-tick text{font:500 12px var(--font);fill:var(--muted);text-anchor:middle;paint-order:stroke;stroke:var(--sig-bg);stroke-width:3px;stroke-linejoin:round}.signal .s-tick .s-u{text-anchor:end}
.signal .s-lbl{font:500 14px var(--font);fill:var(--soft);paint-order:stroke;stroke:var(--sig-bg);stroke-width:3px;stroke-linejoin:round}
.signal .s-curve{fill:none;stroke:var(--u);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.signal .s-curve.l2{stroke:var(--i)}.signal .s-curve.l3{stroke:var(--r)}
.signal .s-curve.mine{stroke:var(--act)}.signal .s-curve.ok{stroke:var(--ok)}
.signal .s-mark{stroke:var(--i-ink);stroke-width:1.5;fill:none}.signal .s-markt{font:500 13px var(--font);fill:var(--i-ink);text-anchor:middle}
.signal .s-guide{stroke:var(--act);stroke-width:1.5;stroke-dasharray:5 4;fill:none}
.signal .s-handle{fill:var(--act);stroke:var(--card);stroke-width:2;cursor:grab;touch-action:none}
.signal .s-handle.on{stroke:var(--ink)}
.sig-pad{background:var(--card);border-radius:16px;padding:8px;max-width:30rem;cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sig-pad.ok{box-shadow:inset 0 0 0 1.5px var(--ok-key-line)}.sig-pad.bad{box-shadow:inset 0 0 0 1.5px var(--no-key-line)}
@media (max-width:520px){.rw.two{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:10px;padding:10px 12px}.rw{font-size:15px}.rw-r{font-size:12px;padding-left:8px}}

/* ---------- Koordinatensystem und Zahlenstrahl (auch für Signal-Zeit-Diagramme) ---------- */
.graph{display:block;width:100%;max-width:330px;margin:10px auto;background:var(--card);border-radius:12px}
.graph.sm{max-width:210px}
.graph .g-grid{stroke:#363940;stroke-width:1;fill:none}.graph .g-axis{stroke:var(--muted);stroke-width:1.6;fill:none}.graph .g-arrow,.numline .g-arrow{fill:var(--muted)}
.graph .g-lbl{font:500 13px var(--font);fill:var(--muted);text-anchor:middle}
.graph .g-tick{font:500 9px var(--font);fill:var(--muted);text-anchor:middle}.graph .g-tick .g-y{text-anchor:end}
.graph .g-line{stroke:var(--i);stroke-width:3;stroke-linecap:round}
.graph .g-pt{fill:var(--ink);stroke:var(--card);stroke-width:2}.graph .g-pt-t{font:500 12px var(--font);fill:var(--ink)}
.graph .g-tri{stroke:var(--u);stroke-width:2.2;stroke-dasharray:5 4;fill:none}.graph .g-tri-t{font:500 12px var(--font);fill:var(--u);text-anchor:middle}
.fb-ex .graph,.rv .graph{max-width:220px;margin:10px 0}
.opts.graphs{grid-template-columns:1fr 1fr}
.opts.graphs .opt{flex-direction:column;align-items:stretch;padding:6px;gap:4px}
.opts.graphs .opt .graph{max-width:none;margin:0}
.opts.graphs .opt .key{align-self:flex-start}.opts.graphs .opt>span:last-child{display:flex;justify-content:center;align-items:center;flex:1}.opts.graphs .opt{justify-content:center}.opts.graphs .opt .symbol{width:64px;height:64px}
.gridpad{max-width:420px;margin:0 auto;border-radius:14px;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.graph.pad{max-width:420px;margin:0}
.graph .g-pt.mine{fill:var(--act);r:6px}.graph .g-pt.mine.active{stroke:var(--ink);stroke-width:2}
.graph .g-pt.mine.ok,.graph .g-pt.ok{fill:var(--ok)}.graph .g-pt.mine.bad{fill:var(--no-key-ink)}.graph .g-pt.ok{r:6px}
.graph .g-line.mine{stroke:var(--act);stroke-dasharray:6 4}.graph .g-line.ok{stroke:var(--ok)}
.graph .g-cursor{fill:none;stroke:var(--act);stroke-width:2.5;stroke-dasharray:3 3}
.pt-pick{display:flex;gap:8px;margin-bottom:10px}
.coords{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px}.coords label{display:inline-flex;align-items:center;gap:6px}.coords .blank{width:4.4rem}
.numline{display:block;width:100%;max-width:520px;margin:6px auto;overflow:visible}
.numline .nl-axis,.numline .nl-major{stroke:var(--muted);stroke-width:2;fill:none}.numline .nl-minor{stroke:#4A4E57;stroke-width:1.5}
.numline .nl-t text{font:500 14px var(--font);fill:var(--muted);text-anchor:middle}
.numline .nl-pt{fill:var(--act)}.numline .nl-pt.ok{fill:var(--ok)}.numline .nl-pt.bad{fill:var(--no-key-ink)}
.numline .nl-name{font:500 12px var(--font);fill:var(--ink);text-anchor:middle}
.nlpad{cursor:crosshair}
.w-numline .slider{max-width:520px;margin:6px auto 0}
.slider{display:grid;gap:4px;font-weight:500}.slider output{font-weight:500;color:var(--act)}
.slider input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--act);cursor:pointer}
.sliders{display:grid;gap:16px;max-width:26rem;margin:0 auto}

/* ---------- Hinweise ---------- */
.toast{position:fixed;left:50%;bottom:calc(16px + var(--navh));transform:translateX(-50%);z-index:80;background:var(--btn);color:var(--btn-ink);padding:10px 18px;border-radius:999px;font-weight:500;max-width:calc(100% - 32px)}
.update{position:fixed;left:50%;bottom:calc(16px + var(--navh));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:12px;width:min(30rem,calc(100% - 32px));background:var(--card);color:var(--ink);border:1px solid var(--key-line);border-radius:18px;padding:8px 8px 8px 18px;font-weight:500}
.update span{flex:1}.update .btn{min-height:44px;padding:0 18px}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:860px){.panel{padding:32px}}
@media (max-width:699px){
  :root{--gut:16px;--navh:calc(64px + var(--safe-bottom))}
  body.focus,body.hub,body.home,body.page{--navh:0px}
  .top-in{padding:8px var(--gut)}
  .topic .nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:4px 4px calc(4px + var(--safe-bottom));background:var(--card-d);border-top:1px solid var(--line);font-size:12px}
  .topic .nav a{flex-direction:column;justify-content:center;gap:2px;padding:4px 0;min-height:56px;border-radius:12px}
  .topic .nav .ico{display:block;width:22px;height:22px}
  .topic .nav .badge{position:absolute;top:2px;left:calc(50% + 4px);min-width:18px;line-height:18px;padding:0 5px;font-size:11px}
  .brand-topic{display:none}
  main{padding:20px var(--gut) 48px}
  .hub main{gap:80px;padding-top:24px}
  .hub .nav a:not(.cta),.home .nav a:not(.cta),.page .nav a:not(.cta){display:none}
  .panel{padding:20px 16px;border-radius:18px}
  .split,.hero{gap:32px}
  .stage{padding:18px 16px 16px;border-radius:22px}
  .mascot{right:-8px;top:-30px;width:60px;height:66px}
  .hero-art .panel{padding:36px 14px 18px}
  .opts.two{grid-template-columns:1fr}
  .qcard,.plate{padding:18px}
  .card .sheet,.qcard .sheet{margin:20px -18px -18px;padding:14px 18px 16px}
  .trow{grid-template-columns:1fr 3.2rem 4.6rem}.trow .tbar{grid-column:1 / -1;grid-row:2}
  .error-item{align-items:flex-start;flex-direction:column}.error-item .btn{width:100%}
  .heute{padding:20px}
  .sp{padding:18px}
}
@media (max-width:390px){
  .brand-name{font-size:17px}
  .order-item{gap:6px;padding-left:10px}
  .sort-row{flex-direction:column;align-items:flex-start}.sort-opts{justify-content:flex-start}.sort-row .sort-l{flex:none}
  .skill{flex-wrap:wrap;gap:4px 12px}.skill-t{flex-basis:100%}
  .ex-list>div{align-items:flex-start;flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.opt,.tile,.sort-btn,.order-item,.slot,.dot,.lvl i,.check-opt .box{border:2px solid currentColor}.lvl i.on,.meter i,.tbar i{background:CanvasText}.fw-tip{border:1px solid CanvasText}}
@media (max-width:400px){.w-slots .rw.two{grid-template-columns:1fr}.w-slots .rw-r{border-left:0;padding-left:0;margin-top:-6px;font-size:12px}}
/* Schmale Handys: Aufgabenkarte und Bildrahmen geben dem Bild mehr Breite (Trefferflächen bleiben ≥ 44 px) */
@media (max-width:420px){.qcard{padding:12px}.fig{padding:6px}}