/* funnel2.css - Ein Renderer, zwei Themes (data-marke). Design C: Vollfarbflaechen, Chivo, Mono-Kicker, Pillen. */
@font-face{font-family:"Chivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/chivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/chivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Flaechen: kreis-systems, hell ---------- */
:root{--tf:1;--ease:cubic-bezier(.2,.7,.2,1);--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
.f1{--bg:oklch(0.420 0.200 268);--fg:oklch(0.970 0.020 95);--mid:oklch(0.880 0.050 270);--line:oklch(0.580 0.150 268);--akz:oklch(0.910 0.170 100);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.270 0.130 268);--kart:oklch(0.360 0.190 268)}
.f2{--bg:oklch(0.915 0.170 98);--fg:oklch(0.250 0.120 268);--mid:oklch(0.370 0.120 268);--line:oklch(0.770 0.140 98);--akz:oklch(0.420 0.210 268);--kbg:oklch(0.420 0.200 268);--kfg:oklch(0.970 0.020 95);--kart:oklch(0.955 0.110 98)}
.f3{--bg:oklch(0.720 0.170 40);--fg:oklch(0.200 0.080 268);--mid:oklch(0.280 0.100 268);--line:oklch(0.580 0.160 40);--akz:oklch(0.300 0.150 268);--kbg:oklch(0.270 0.130 268);--kfg:oklch(0.970 0.020 95);--kart:oklch(0.800 0.130 45)}
.f4{--bg:oklch(0.965 0.030 95);--fg:oklch(0.270 0.130 268);--mid:oklch(0.420 0.110 268);--line:oklch(0.850 0.050 95);--akz:oklch(0.500 0.200 30);--kbg:oklch(0.420 0.200 268);--kfg:oklch(0.970 0.020 95);--kart:oklch(0.930 0.050 95)}
.f5{--bg:oklch(0.840 0.100 345);--fg:oklch(0.240 0.120 268);--mid:oklch(0.360 0.100 290);--line:oklch(0.700 0.120 345);--akz:oklch(0.420 0.210 268);--kbg:oklch(0.420 0.200 268);--kfg:oklch(0.970 0.020 95);--kart:oklch(0.900 0.070 345)}
.f6{--bg:oklch(0.240 0.130 268);--fg:oklch(0.970 0.020 95);--mid:oklch(0.820 0.050 270);--line:oklch(0.400 0.120 268);--akz:oklch(0.910 0.170 100);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.240 0.130 268);--kart:oklch(0.300 0.150 268)}
:root[data-theme="dark"] .f1{--bg:oklch(0.290 0.160 272);--mid:oklch(0.820 0.060 272);--line:oklch(0.440 0.140 272);--akz:oklch(0.890 0.170 100);--kbg:oklch(0.900 0.170 99);--kfg:oklch(0.240 0.120 272);--kart:oklch(0.340 0.170 272)}
:root[data-theme="dark"] .f2{--bg:oklch(0.350 0.095 192);--fg:oklch(0.970 0.020 95);--mid:oklch(0.860 0.050 192);--line:oklch(0.500 0.090 192);--akz:oklch(0.900 0.160 100);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.220 0.060 192);--kart:oklch(0.410 0.100 192)}
:root[data-theme="dark"] .f3{--bg:oklch(0.360 0.150 15);--fg:oklch(0.970 0.020 95);--mid:oklch(0.880 0.050 15);--line:oklch(0.520 0.130 15);--akz:oklch(0.890 0.150 90);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.220 0.100 15);--kart:oklch(0.420 0.150 15)}
:root[data-theme="dark"] .f4{--bg:oklch(0.210 0.090 285);--fg:oklch(0.970 0.020 95);--mid:oklch(0.820 0.050 285);--line:oklch(0.350 0.090 285);--akz:oklch(0.800 0.150 45);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.210 0.090 285);--kart:oklch(0.270 0.100 285)}
:root[data-theme="dark"] .f5{--bg:oklch(0.350 0.130 335);--fg:oklch(0.970 0.020 95);--mid:oklch(0.870 0.050 335);--line:oklch(0.500 0.120 335);--akz:oklch(0.890 0.150 90);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.220 0.100 335);--kart:oklch(0.410 0.130 335)}
:root[data-theme="dark"] .f6{--bg:oklch(0.160 0.070 275);--mid:oklch(0.800 0.050 275);--line:oklch(0.300 0.080 275);--akz:oklch(0.890 0.170 100);--kbg:oklch(0.910 0.170 99);--kfg:oklch(0.160 0.070 275);--kart:oklch(0.220 0.080 275)}

/* ---------- Flaechen: topcharge (Gruen #96D23D, Navy #142443) ---------- */
[data-marke="topcharge"] .f1{--bg:#142443;--fg:#F4F8EC;--mid:#B9C6E0;--line:#2D4673;--akz:#96D23D;--kbg:#96D23D;--kfg:#142443;--kart:#1C3159}
[data-marke="topcharge"] .f2{--bg:#96D23D;--fg:#142443;--mid:#243B1C;--line:#7BB82A;--akz:#142443;--kbg:#142443;--kfg:#F4F8EC;--kart:#A9DD58}
[data-marke="topcharge"] .f3{--bg:#F2F7E8;--fg:#142443;--mid:#3F5276;--line:#D2DEBC;--akz:#3F7A06;--kbg:#142443;--kfg:#F4F8EC;--kart:#FFFFFF}
[data-marke="topcharge"] .f4{--bg:#1F3B70;--fg:#F4F8EC;--mid:#C2CFE8;--line:#3A5A94;--akz:#96D23D;--kbg:#96D23D;--kfg:#142443;--kart:#28487F}
[data-marke="topcharge"] .f5{--bg:#D3ECA3;--fg:#142443;--mid:#34502A;--line:#B4D87D;--akz:#142443;--kbg:#142443;--kfg:#F4F8EC;--kart:#E4F4C4}
[data-marke="topcharge"] .f6{--bg:#0C1830;--fg:#F4F8EC;--mid:#AAB9D6;--line:#22365E;--akz:#96D23D;--kbg:#96D23D;--kfg:#0C1830;--kart:#14264A}
[data-marke="topcharge"][data-theme="dark"] .f1{--bg:#0F1B35;--line:#263C66;--kart:#162750}
[data-marke="topcharge"][data-theme="dark"] .f2{--bg:#2B4A18;--fg:#F4F8EC;--mid:#C8DDB0;--line:#40692A;--akz:#96D23D;--kbg:#96D23D;--kfg:#142443;--kart:#355A20}
[data-marke="topcharge"][data-theme="dark"] .f3{--bg:#142443;--fg:#F4F8EC;--mid:#B9C6E0;--line:#2D4673;--akz:#96D23D;--kbg:#96D23D;--kfg:#142443;--kart:#1C3159}
[data-marke="topcharge"][data-theme="dark"] .f4{--bg:#17305E;--line:#2F4D82;--kart:#203D70}
[data-marke="topcharge"][data-theme="dark"] .f5{--bg:#2A3E12;--fg:#F4F8EC;--mid:#C8DDB0;--line:#43601F;--akz:#96D23D;--kbg:#96D23D;--kfg:#142443;--kart:#334C18}
[data-marke="topcharge"][data-theme="dark"] .f6{--bg:#070F20;--line:#1A2B4C;--kart:#0E1B38}

/* ---------- Grund ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:400 17px/1.5 "Chivo",system-ui,-apple-system,"Segoe UI",sans-serif;background:#142443;color:#fff;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--akz);outline-offset:3px}
.stage{position:fixed;inset:0;overflow:hidden;background:var(--bg,#142443)}

/* ---------- Schicht (eine Frage = eine Flaeche) ---------- */
.sc{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:1}
.sc::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:5;transition:opacity calc(.52s * var(--tf,1)) var(--ease)}
.sc.ein{z-index:2;transform:translate3d(100%,0,0);box-shadow:-24px 0 60px -12px rgba(0,0,0,.35)}
.sc.ein.los{transform:none;transition:transform calc(.52s * var(--tf,1)) var(--ease)}
.sc.aus.los{transform:translate3d(-22%,0,0);transition:transform calc(.52s * var(--tf,1)) var(--ease)}
.sc.aus.los::after{opacity:.28}
.sc.ein-z{z-index:1;transform:translate3d(-22%,0,0)}
.sc.ein-z::after{opacity:.28}
.sc.ein-z.los{transform:none;transition:transform calc(.52s * var(--tf,1)) var(--ease)}
.sc.ein-z.los::after{opacity:0}
.sc.aus-z{z-index:2;box-shadow:-24px 0 60px -12px rgba(0,0,0,.35)}
.sc.aus-z.los{transform:translate3d(100%,0,0);transition:transform calc(.52s * var(--tf,1)) var(--ease)}
.deko{position:absolute;right:-18%;bottom:-8%;width:min(120vw,900px);height:auto;color:var(--line);opacity:.55;pointer-events:none;z-index:0}
.deko *{vector-effect:non-scaling-stroke}
.sp{position:relative;z-index:1;width:100%;max-width:680px;margin-inline:auto;padding-inline:20px}

/* ---------- Kopf ---------- */
.kopf{display:flex;align-items:center;gap:10px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:4px;min-height:60px}
.marke{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--fg)}
.marke svg.logo{width:30px;height:30px;flex:none}
.logo-tc{display:block;width:113px;height:35px;background:center/contain no-repeat url("bilder/tc2-logo-dunkel.svg")}
[data-marke="topcharge"] .f3 .logo-tc,[data-marke="topcharge"] .f5 .logo-tc{background-image:url("bilder/tc2-logo-hell.svg")}
[data-marke="topcharge"][data-theme="dark"] .f3 .logo-tc,[data-marke="topcharge"][data-theme="dark"] .f5 .logo-tc{background-image:url("bilder/tc2-logo-dunkel.svg")}
[data-marke="topcharge"] .f2 .logo-tc{background:var(--fg);-webkit-mask:center/contain no-repeat url("bilder/tc2-logo-hell.svg");mask:center/contain no-repeat url("bilder/tc2-logo-hell.svg")}
[data-marke="topcharge"][data-theme="dark"] .f2 .logo-tc{background:center/contain no-repeat url("bilder/tc2-logo-dunkel.svg");-webkit-mask:none;mask:none}
.kopf-platz{margin-left:auto}
.rund{flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:var(--fg);text-decoration:none;transition:transform .3s var(--ease),border-color .2s,background .2s}
.rund svg{width:20px;height:20px}
.rund:hover{border-color:var(--fg);transform:translateY(-2px) rotate(-6deg)}
.rund .mond{display:none}
:root[data-theme="light"] .rund .sonne{display:none}
:root[data-theme="light"] .rund .mond{display:block}

/* ---------- Fortschritt ---------- */
.pfad{display:flex;align-items:center;gap:14px;padding-top:8px;padding-bottom:6px}
.bahn{position:relative;flex:1;height:34px;margin-right:16px}
.bahn .spur{position:absolute;left:0;right:0;top:50%;border-top:2px dotted var(--mid);opacity:.55}
.bahn .gefl{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;background:var(--akz);border-radius:3px;width:calc(var(--p) * 100%);transition:width .7s var(--ease)}
.bahn .halt{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--bg);border:2px solid var(--mid)}
.bahn .halt.da{border-color:var(--akz);background:var(--akz)}
.bahn .halt.ziel{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-color:var(--fg)}
.bahn .rk{position:absolute;top:50%;left:calc(var(--p) * 100%);width:34px;height:34px;margin:-17px 0 0 -17px;transition:left .7s var(--ease);transform:rotate(90deg)}
.bahn .rk svg{width:100%;height:100%;overflow:visible}
.rk .korpus{fill:var(--bg);stroke:var(--fg);stroke-width:7;stroke-linejoin:round}
.rk .flosse{fill:var(--fg)}.rk .fenster{fill:none;stroke:var(--fg);stroke-width:6}.rk .fk{fill:var(--fg)}.rk .flamme{fill:var(--akz);transform-origin:0 90px;animation:flamme .35s infinite alternate}
@keyframes flamme{to{transform:scaleY(1.45)}}
.zaehler{flex:none;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.akku{position:relative;flex:1;height:30px;display:flex;align-items:center}
.akku .huelle{flex:1;height:26px;border:2.5px solid var(--fg);border-radius:9px;padding:3px;display:flex;gap:3px}
.akku .nub{width:5px;height:12px;background:var(--fg);border-radius:0 3px 3px 0;margin-left:2px}
.akku .zelle{flex:1;border-radius:4px;background:var(--line);opacity:.6;transition:background .4s var(--ease),opacity .4s,transform .4s var(--ease)}
.akku .zelle.voll{background:var(--akz);opacity:1;animation:zelle .5s var(--ease)}
.akku .zelle.laed{background:var(--akz);animation:laed 1.1s ease-in-out infinite}
@keyframes zelle{from{transform:scaleY(.4)}}
@keyframes laed{50%{opacity:.3}}

/* ---------- Inhalt ---------- */
.inhalt{flex:1;display:flex;flex-direction:column;padding-top:clamp(14px,3.4vh,40px);padding-bottom:8px}
.kicker{display:inline-block;align-self:flex-start;font:500 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:99px;padding:8px 12px;color:var(--fg)}
h1.frage{margin-top:16px;font-weight:900;font-size:clamp(29px,8vw,50px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance;animation:rein .55s var(--ease) both}
.hinweis{margin-top:10px;color:var(--mid);font-size:16px}
.tiles{margin-top:clamp(18px,3.4vh,30px);display:grid;gap:9px;grid-template-columns:1fr}
.tile{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 26px;gap:12px;align-items:center;text-align:left;width:100%;min-height:56px;padding:7px 12px 7px 8px;border-radius:20px;background:var(--kart);border:2px solid var(--line);color:var(--fg);transition:transform .25s var(--ease),border-color .2s,background .2s,color .2s;animation:rein .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms + 60ms)}
.tile .ico{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--bg);display:grid;place-items:center;font:800 15px/1 var(--mono);transition:background .2s,color .2s,border-color .2s}
.tile .ico svg{width:22px;height:22px}
.tile .wort{display:block;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.015em}
.tile .zusatz{display:block;margin-top:1px;font-size:13.5px;line-height:1.3;color:var(--mid)}
.tile .tk{position:relative;justify-self:end;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:500 11px/1 var(--mono);color:var(--mid)}
.tile .tk svg{position:absolute;inset:3px;width:15px;height:15px;stroke-width:3.2;opacity:0;transform:scale(.3)}
.tile .tk i{font-style:normal}
@media (hover:hover){.tile:hover{transform:translateY(-2px);border-color:var(--fg)}}
.tile:active{transform:scale(.985)}
.tile.gew{background:var(--kbg);color:var(--kfg);border-color:var(--kbg);animation:puls .42s var(--ease)}
.tile.gew .zusatz{color:inherit;opacity:.78}
.tile.gew .ico{background:var(--kfg);color:var(--kbg);border-color:var(--kfg)}
.tile.gew .tk{background:var(--kfg);border-color:var(--kfg);color:var(--kbg)}
.tile.gew .tk svg{opacity:1;transform:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .15s}
.tile.gew .tk i{display:none}
.tile.gew::after{content:"";position:absolute;inset:-3px;border-radius:23px;border:3px solid var(--kbg);animation:ring .6s var(--ease) forwards;pointer-events:none}
.tile.mehrfach .tk{border-radius:9px}
.tile.weg{opacity:.45}
.tile.nein{animation:wackel .35s}
@keyframes puls{40%{transform:scale(1.035)}}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.07,1.32)}}
@keyframes rein{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes wackel{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (hover:none){.tile .tk i{display:none}}
.fuss{position:sticky;bottom:0;z-index:3;margin-top:auto;padding-top:14px;padding-bottom:max(18px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 26%)}
.fuss .sp{display:flex;align-items:center;gap:12px}
.zurueck{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:54px;height:54px;padding:0;border-radius:99px;border:2px solid var(--line);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);transition:transform .3s var(--ease),border-color .2s}
.zurueck svg{width:20px;height:20px}
.zurueck span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:600px){.zurueck{width:auto;padding:0 20px 0 16px}.zurueck span{position:static;width:auto;height:auto;clip:auto}}
.zurueck:hover{border-color:var(--fg);transform:translateY(-2px)}
.zurueck[hidden]{display:none}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:99px;background:var(--kbg);color:var(--kfg);border:2px solid var(--kbg);font-weight:800;font-size:18px;letter-spacing:-.01em;text-decoration:none;transition:transform .3s var(--ease),opacity .2s}
.knopf svg{width:20px;height:20px}
.knopf:hover{transform:translateY(-3px) rotate(-.6deg)}
.knopf[disabled]{opacity:.38;pointer-events:none}
.knopf.leise{background:transparent;color:var(--fg);border-color:var(--fg)}
.knopf.gross{height:64px;font-size:20px;padding:0 34px}
.fuss .knopf{flex:1;white-space:nowrap;padding:0 18px;font-size:17.5px}
.zahlhinweis{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-top:14px}

/* ---------- Intro ---------- */
.intro .inhalt{justify-content:center;padding-top:20px;padding-bottom:40px}
.intro h1{margin-top:20px;font-weight:900;font-size:clamp(36px,10.4vw,72px);line-height:.98;letter-spacing:-.045em;text-wrap:balance;animation:rein .6s var(--ease) both}
.intro .lead{margin-top:18px;font-size:18px;color:var(--mid);max-width:34em;animation:rein .6s .08s var(--ease) both}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;animation:rein .6s .14s var(--ease) both}
.chips li{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;border-radius:99px;padding:8px 14px 8px 11px;background:var(--kart);border:2px solid var(--line)}
.chips svg{width:15px;height:15px;stroke-width:3.2;color:var(--akz)}
.intro .knopf{margin-top:30px;align-self:flex-start;animation:rein .6s .2s var(--ease) both}
.intro .klein{margin-top:16px;font-size:14px;color:var(--mid);max-width:30em;animation:rein .6s .26s var(--ease) both}
.intro .orb{position:absolute;right:-60px;top:46%;width:300px;height:300px;color:var(--fg);opacity:.9;z-index:0;pointer-events:none}
@media (min-width:900px){.intro .orb{right:6vw;top:50%;margin-top:-210px;width:420px;height:420px}.intro .sp{max-width:1080px}.intro .inhalt>*{max-width:560px}}
@media (max-width:899px){.intro .orb{top:auto;bottom:-70px;right:-70px;width:280px;height:280px;opacity:.35}}

/* ---------- Rechnen ---------- */
.rechnen .inhalt{align-items:center;text-align:center;justify-content:center;padding-bottom:50px}
.rechnen .szene{width:min(78vw,300px);height:min(78vw,300px);color:var(--fg)}
.rechnen h1.frage{font-size:clamp(26px,7vw,40px);margin-top:10px}
.punkte{list-style:none;margin-top:22px;display:grid;gap:10px;text-align:left}
.punkte li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16.5px;opacity:.28;transition:opacity .4s}
.punkte li .pk{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s}
.punkte li .pk svg{width:14px;height:14px;stroke-width:3.4;opacity:0;transform:scale(.3);color:var(--kfg)}
.punkte li.fertig{opacity:1}
.punkte li.fertig .pk{background:var(--akz);border-color:var(--akz)}
.punkte li.fertig .pk svg{opacity:1;transform:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.punkte li.fertig .pk{color:var(--kfg)}
.rechnen .punkte li.fertig .pk svg{color:var(--bg)}

/* ---------- Teaser ---------- */
.teaser .typ{margin-top:10px;font-weight:900;font-size:clamp(38px,11vw,68px);line-height:.96;letter-spacing:-.045em;color:var(--akz);text-wrap:balance;animation:rein .6s .05s var(--ease) both}
.karte{margin-top:24px;border-radius:28px;background:var(--kart);border:2px solid var(--line);padding:20px;animation:rein .6s .12s var(--ease) both}
.karte h2{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.hebel{list-style:none;margin-top:14px;display:grid;gap:10px}
.hebel li{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.15}
.hebel li b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--kbg);color:var(--kfg);display:grid;place-items:center;font:800 14px/1 var(--mono)}
.unscharf{position:relative;margin-top:16px;padding:14px;border-radius:18px;border:2px dashed var(--line);overflow:hidden}
.unscharf .tr{filter:blur(7px);-webkit-filter:blur(7px);user-select:none;display:grid;gap:8px;opacity:.85}
.unscharf .tr span{display:block;font-weight:800;font-size:19px}
.unscharf .tr small{font-size:15px;color:var(--mid)}
.unscharf .schloss{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:0 16px}
.unscharf .schloss svg{width:20px;height:20px;flex:none}
.unscharf .schloss span{background:var(--kbg);color:var(--kfg);border-radius:99px;padding:10px 14px;display:inline-flex;gap:8px;align-items:center}

/* ---------- Kontakt ---------- */
.formular{margin-top:22px;display:grid;gap:14px}
.feld label{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.feld input,.feld textarea{width:100%;height:56px;border-radius:16px;border:2px solid var(--line);background:var(--kart);padding:0 16px;font-size:17px;font-weight:600;outline:0;transition:border-color .2s,background .2s}
.feld textarea{height:auto;min-height:96px;padding:14px 16px;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--fg)}
.feld .fehler{display:none;margin-top:7px;font-size:14px;font-weight:700;color:var(--akz)}
.feld.bad input,.feld.bad textarea{border-color:var(--akz);animation:wackel .35s}
.feld.bad .fehler{display:block}
.paar{display:grid;gap:14px}
.einw{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.4;color:var(--mid);cursor:pointer}
.einw input{position:absolute;opacity:0;width:1px;height:1px}
.einw .box{width:28px;height:28px;border-radius:9px;border:2px solid var(--fg);display:grid;place-items:center;transition:background .2s}
.einw .box svg{width:16px;height:16px;stroke-width:3.4;opacity:0;transform:scale(.3);color:var(--kfg)}
.einw input:checked+.box{background:var(--kbg);border-color:var(--kbg)}
.einw input:checked+.box svg{opacity:1;transform:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.einw input:focus-visible+.box{outline:3px solid var(--akz);outline-offset:3px}
.einw.bad .box{border-color:var(--akz);animation:wackel .35s}
.einw.bad{color:var(--fg)}
.zusage{font-size:14px;color:var(--mid);margin-top:2px}
.zusage.bad{color:var(--akz)}

/* ---------- Ergebnis ---------- */
.ergebnis h1.frage{font-size:clamp(36px,10vw,64px);line-height:.98}
.ergebnis .lead{margin-top:14px;font-size:18px;color:var(--mid)}
.block{margin-top:26px;border-radius:28px;background:var(--kart);border:2px solid var(--line);padding:22px 20px;animation:rein .6s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
.block h3{font:500 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.block>p{margin-top:10px}
.block .satz{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--fg)}
.nutzen{list-style:none;margin-top:16px;padding:0;display:grid;gap:16px}
.nutzen li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px}
.nutzen .nr{width:34px;height:34px;border-radius:50%;border:2px solid var(--fg);display:grid;place-items:center;font:800 15px/1 var(--mono)}
.nutzen li:first-child .nr{background:var(--kbg);color:var(--kfg);border-color:var(--kbg)}
.nutzen h4{font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.nutzen h4 em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;background:var(--akz);color:var(--bg);border-radius:99px;padding:4px 8px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.nutzen p{margin-top:4px;font-size:15.5px;color:var(--mid);line-height:1.45}
.emp{margin-top:18px;border-radius:22px;background:var(--kbg);color:var(--kfg);padding:18px}
.emp .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.emp .t{margin-top:8px;font-weight:900;font-size:28px;line-height:1.05;letter-spacing:-.035em}
.emp p{margin-top:8px;font-size:15.5px;line-height:1.4}
.zahlen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.zahlen div{border-radius:20px;border:2px solid var(--line);padding:14px}
.zahlen .z{display:block;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.05em;color:var(--akz)}
.zahlen .e{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--mid)}
.annahme{font-size:13.5px;color:var(--mid);margin-top:12px}
.schritte{list-style:none;counter-reset:s;margin-top:14px;display:grid;gap:12px}
.schritte li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;font-size:16px;line-height:1.4}
.schritte li::before{content:counter(s);width:34px;height:34px;border-radius:50%;border:2px solid var(--fg);display:grid;place-items:center;font:800 15px/1 var(--mono)}
.station{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin-top:16px}
.station img{width:96px;height:auto;display:block;filter:drop-shadow(0 18px 14px rgba(0,0,0,.22))}
.ende{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;padding-bottom:36px}
.ende .tel{font-weight:800;font-size:17px}


@media (min-width:900px){
  .sp{max-width:800px;padding-inline:28px}
  .tiles.zwei{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .tile{min-height:72px;padding:9px 18px 9px 12px}
  .tile .wort{font-size:20px}.tile .zusatz{font-size:14.5px}
  h1.frage{font-size:clamp(40px,4.4vw,60px)}
  .inhalt{padding-top:clamp(24px,6vh,64px)}
  .kopf{min-height:76px}
}
@media (max-width:380px){.tile .wort{font-size:17px}}
@media (prefers-reduced-motion:reduce){
  .sc.ein.los,.sc.aus.los,.sc.ein-z.los,.sc.aus-z.los,.sc::after{transition-duration:.01s}
  .tile,h1.frage,.block,.karte{animation:none}
  .rk .flamme{animation:none}
}
.tile.gew.vor{animation:none}.tile.gew.vor::after{display:none}
.lade{transform-box:fill-box;transform-origin:bottom;animation:lade 2.6s ease-in-out infinite}
@keyframes lade{0%{transform:scaleY(.06)}80%,100%{transform:scaleY(1)}}
.welle{transform-box:fill-box;transform-origin:center;animation:welle 2.6s ease-out infinite}
.welle.w2{animation-delay:1.3s}
@keyframes welle{from{transform:scale(.5);opacity:.9}to{transform:scale(1.1);opacity:0}}
.pk svg{color:var(--bg)}
@media (prefers-reduced-motion:reduce){.lade,.welle{animation:none}}
.dekobox{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.feld .fehler{margin-bottom:-2px}

/* ---------- Produktion: Senden, Fehler, Honigtopf, Rechtliches, Station ---------- */
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sendefehler{margin-top:6px;padding:12px 14px;border-radius:14px;border:2px solid var(--akz);font-size:15px;font-weight:700;line-height:1.4}
.sendefehler[hidden]{display:none}
.feld.breit{grid-column:1/-1}
.knopf.laedt{opacity:.7;pointer-events:none}
.recht{margin-top:14px;font-size:13px;color:var(--mid)}
.recht a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ende .recht{flex-basis:100%;margin-top:4px}
.station .st-art{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.station .st-name{font-weight:900;font-size:30px;letter-spacing:-.04em;line-height:1.05;margin-top:8px}
.station .st-was{margin-top:6px;font-size:15.5px}
.ohne-js{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:18px;color:#fff}
.einw a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}