/* Kumpano-Website: durchgehend dunkel. Maße und Haltung siehe DESIGN.md. */
@font-face{font-family:"Schibsted Grotesk";font-weight:400 900;font-display:swap;src:url("../fonts/schibsted-grotesk-latin.woff2") format("woff2")}
:root{
  --schwarz:#0a0c0d; --flaeche:#14181b; --flaeche2:#1d2226; --gruen:#0b3226;
  --tinte:#f2f4ef; --ink:#f2f4ef; --still:#a9b4ad; --still-g:#a9c2b6; --linie:rgba(255,255,255,.12); --linie-g:rgba(255,255,255,.16);
  --gewinn:#6fe3ad; --verlust:#ff8f85; --index:#f1c76a; --tafel:#060808;
  /* Die Demo färbt die Vergleichslinien der Liga über diese Namen. Sauberer: alle gleich ruhig. */
  --lead:#47515a; --c-sophie:#47515a; --c-anna:#47515a; --c-tim:#47515a; --c-felix:#47515a; --c-leon:#47515a; --other:#47515a; --muted:#a9b4ad; --rule:rgba(255,255,255,.12);
  --t-pink:#ff8f85; --t-green:#6fe3ad; --t-teal:#a9b4ad; --t-amber:#f1c76a;
  --rand:clamp(16px,2.8vw,40px); --kopf:64px;
  --schrift:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--schwarz)}
body{background:var(--schwarz);color:var(--tinte);font-family:var(--schrift);font-size:17px;line-height:1.5}
a{color:inherit;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--index);outline-offset:3px}
section{scroll-margin-top:calc(var(--kopf) - 8px)}
h1,h2,h3,h4{font-weight:700;text-wrap:balance}
.small{font-size:15px;color:var(--still)}
.skip{position:absolute;left:12px;top:-90px;z-index:100;background:var(--tinte);color:var(--schwarz);padding:12px 16px;font-weight:700}
.skip:focus{top:10px}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:var(--tinte);color:var(--schwarz);border:0;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.knopf:hover{background:#fff}

/* Kopfzeile */
.topbar{position:sticky;top:0;z-index:30;height:var(--kopf);margin-bottom:calc(var(--kopf)*-1);display:flex;align-items:center;justify-content:space-between;padding:0 var(--rand);transition:background-color .2s ease}
.topbar.is-scrolled{background:var(--schwarz)}
.mark{font-weight:700;font-size:23px;letter-spacing:-.03em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.topbar nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.topbar nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none}
.topbar nav a:hover{text-decoration:underline}

/* Erster Bildschirm: das Parkett */
.buehne{position:relative;min-height:100svh;background:#111;display:flex;flex-direction:column;overflow:hidden}
.buehne>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;filter:contrast(1.12) brightness(.82)}
.buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.5) 74%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.8) 78%,rgba(0,0,0,.92) 100%)}
.buehne-text{position:relative;z-index:2;margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,27.5vw);gap:32px;align-items:end;padding:calc(var(--kopf) + 16px) var(--rand) clamp(16px,3.2vh,36px)}
h1{font-size:clamp(40px,min(7.1vw,16vh),128px);line-height:.97;letter-spacing:-.05em}
.satz{font-weight:600;font-size:clamp(18px,1.45vw,21px);line-height:1.25;letter-spacing:-.01em}
.buehne .text{font-size:16px;color:#e4e7e2;margin-top:6px}
.buehne .knopf{margin-top:16px}
.status{font-size:14px;color:#c9cdc8;margin-top:10px}
.streifen{position:relative;z-index:2;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.22);min-height:44px}
html:not(.js) .streifen{display:none}
.laufband{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:14.5px}
.laufband>div{display:inline-block;animation:lauf 90s linear infinite}
.laufband.halt>div{animation-play-state:paused}
.laufband span{margin-right:34px}
.laufband b{font-weight:600}
.laufband i{font-style:normal;color:#c4c9c4;margin-left:4px;font-variant-numeric:tabular-nums}
@keyframes lauf{to{transform:translateX(-50%)}}
.band-halt{flex:none;width:44px;height:44px;margin-right:calc(var(--rand) - 14px);background:none;border:0;color:#d6d8d4;cursor:pointer;display:grid;place-items:center}
.band-halt svg{width:14px;height:14px;fill:currentColor}
.quelle{position:relative;z-index:2;padding:0 var(--rand) 10px;font-size:13px;line-height:1.35;color:#aeb3ae}

/* Abschnitte */
.feld{padding:clamp(88px,16vh,180px) var(--rand)}
.feld.gruen{background:var(--gruen)}
h2{font-size:clamp(36px,5.4vw,92px);line-height:1;letter-spacing:-.05em}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.35;color:var(--still);max-width:32em}
.gruen .lead{color:var(--still-g)}

/* So funktioniert es: die Liga als Kurstabelle, aus demselben Material wie die Schritte */
.ablauf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,104px);align-items:start;margin-top:clamp(32px,7vh,72px)}
.schritte{list-style:none}
.schritte li{padding:18px 0 22px;border-top:1px solid var(--linie-g)}
.schritte .tag{color:var(--still-g);font-size:15px}
.schritte h3{font-size:clamp(23px,2.1vw,30px);letter-spacing:-.03em;line-height:1.1;margin:4px 0 6px}
.schritte p{color:var(--still-g);max-width:30em}
.kursliste{margin:0;padding-top:18px;border-top:1px solid var(--linie-g)}
.kursliste .tag{color:var(--still-g);font-size:15px}
.kl-titel{display:block;font-size:clamp(23px,2.1vw,30px);letter-spacing:-.03em;line-height:1.1;margin:4px 0 16px}
.kl{width:100%;border-collapse:separate;border-spacing:0}
.kl thead th{font-size:13.5px;font-weight:400;color:var(--still-g);text-align:left;padding:0 14px 8px 0;white-space:nowrap}
.kl td,.kl tbody th{height:43px;padding:0 14px 0 0;border-top:1px solid var(--linie-g);text-align:left;vertical-align:middle;font-weight:400;font-size:16px;line-height:1.2}
.kl tbody tr:last-child td,.kl tbody tr:last-child th{border-bottom:1px solid var(--linie-g)}
.kl .p{width:3.2em;color:var(--still-g);font-variant-numeric:tabular-nums}
.kl tbody th{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.kl .lg{color:var(--still-g);font-size:14.5px;white-space:nowrap}
.kl .kv{width:30%}
.kv-box{position:relative}
.kl thead .lg{font-size:13.5px}
.kl thead .kv span:last-child{float:right}
.kv-box svg{display:block;width:100%;height:28px;overflow:visible}
.kl .linie{fill:none;stroke:var(--still-g);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kl .start{stroke:rgba(255,255,255,.26);stroke-width:1;stroke-dasharray:1 4;vector-effect:non-scaling-stroke}
.kl .ende{display:none}
.kl .v,.kl thead .v{padding-right:0;text-align:right;white-space:nowrap}
.kl td.v{font-weight:600;font-variant-numeric:tabular-nums}
.kl .k{margin:0 -.14em}
.gew .v{color:var(--gewinn)}
.ver .v{color:var(--verlust)}
.kl .markt th,.kl .markt .v{color:var(--tinte)}
.kl .markt .linie{stroke:var(--tinte);stroke-width:1.75;stroke-dasharray:3 4}
.kl .ich td,.kl .ich th{background:var(--schwarz);border-top-color:var(--schwarz);color:var(--tinte)}
.kl .ich td:first-child{box-shadow:-12px 0 0 var(--schwarz)}
.kl .ich td:last-child{box-shadow:12px 0 0 var(--schwarz)}
.kl .ich+tr td,.kl .ich+tr th{border-top-color:transparent}
.kl .ich .lg,.kl .ich .p{color:var(--still)}
.kl .ich .v{color:var(--gewinn)}
.kl .ich .linie{stroke:var(--gewinn);stroke-width:2}
.kl .ich .ende{display:block;position:absolute;right:-3.5px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--gewinn)}
.kl em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;background:var(--tinte);color:var(--schwarz);padding:2px 5px;margin-left:5px;vertical-align:1.5px}
.kursliste figcaption{color:var(--still-g);font-size:13.5px;margin-top:12px}

/* Selbst ausprobieren */
.demo-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(28px,6vh,60px)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:start}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 4px;min-height:clamp(88px,8vw,116px);background:none;border:0;color:var(--tinte);font:inherit;cursor:pointer;transition:background-color .15s ease}
.tile:hover{background:var(--flaeche)}
.tile[aria-pressed=true]{background:var(--tinte);color:var(--schwarz)}
.tiles.is-full .tile[aria-pressed=false]{opacity:.35}
.tile[disabled]{cursor:default}
.coin{width:clamp(36px,3.4vw,46px);height:clamp(36px,3.4vw,46px);border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.coin img{width:66%;height:66%;object-fit:contain}
.coin.dark{background:#000;box-shadow:inset 0 0 0 1px #3a4046}
.nm{font-size:14px;line-height:1.15;text-align:center}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.count{color:var(--still)} .count b{color:var(--tinte);font-weight:700}
.play{min-height:50px;padding:0 24px;background:var(--tinte);color:var(--schwarz);border:0;font:inherit;font-weight:700;cursor:pointer}
.play:hover:not([disabled]){background:#fff}
.play[disabled]{background:var(--flaeche2);color:var(--still);cursor:default}
.demo-chart{width:100%;height:auto;display:block;overflow:visible}
.grid-line{stroke:rgba(255,255,255,.09);stroke-width:1}
.zero{stroke:rgba(255,255,255,.28);stroke-width:1}
.axis{fill:var(--still);font-size:15px;font-family:inherit}
.demo-league path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke:#39424a}
.demo-index{fill:none;stroke:#d6dbd6;stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.demo-index-dot{fill:#d6dbd6}
.demo-index-label,.demo-you-label{font-size:15px;font-family:inherit;paint-order:stroke;stroke:var(--schwarz);stroke-width:5px;stroke-linejoin:round}
.demo-index-label{fill:#d6dbd6}
.demo-you-label{fill:#fff;font-weight:700}
.demo-band{opacity:0;transition:opacity .3s ease}
.demo-stage.has-run .demo-band{opacity:.22}
.demo-band.up{fill:var(--gewinn)}
.demo-band.down{fill:var(--verlust)}
.demo-you{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.demo-dot{fill:#fff;stroke:var(--schwarz);stroke-width:2.5;opacity:0;transition:opacity .2s ease}
.demo-stage.has-run .demo-dot{opacity:1}
.demo-result{min-height:5.4em;margin-top:14px}
.res-main{font-weight:700;font-size:clamp(21px,2vw,28px);line-height:1.15;letter-spacing:-.025em}
.up{color:var(--gewinn)} .down{color:var(--verlust)}
.res-sub{margin-top:6px;color:var(--still);font-size:16px}
.demo-note{margin-top:8px}

/* Themen: ein Handy je Thema, Text daneben. Das Handy steht auf der Unterkante des Abschnitts. */
.thema{padding-bottom:0;overflow:hidden}
.thema-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,26vw,380px);gap:clamp(32px,6vw,120px);align-items:end}
.thema.rechts .thema-grid{grid-template-columns:clamp(250px,26vw,380px) minmax(0,1fr)}
.thema.rechts .thema-text{order:2}
.thema-text{align-self:center;padding-bottom:clamp(88px,16vh,180px)}
.thema-text .lead{margin-top:clamp(14px,3vh,24px)}
.punkte{list-style:none;margin-top:clamp(28px,5vh,48px);max-width:34em}
.punkte li{padding:14px 0 16px;border-top:1px solid var(--linie)}
.gruen .punkte li{border-top-color:var(--linie-g)}
.punkte b{display:block;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.punkte p{color:var(--still);margin-top:4px}
.gruen .punkte p{color:var(--still-g)}
.thema .small{margin-top:18px;max-width:34em}
.handy{position:relative;margin:clamp(40px,8vh,96px) 0 -2px;background:#040506;border-radius:clamp(36px,3.6vw,54px) clamp(36px,3.6vw,54px) 0 0;padding:clamp(8px,.75vw,11px) clamp(8px,.75vw,11px) 0;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 44px 80px -40px rgba(0,0,0,.75)}
.handy img{display:block;width:100%;height:auto;border-radius:clamp(28px,2.85vw,43px) clamp(28px,2.85vw,43px) 0 0}
.handy::before{content:"";position:absolute;z-index:2;top:clamp(16px,1.6vw,23px);left:50%;transform:translateX(-50%);width:27%;height:clamp(16px,1.6vw,23px);border-radius:99px;background:#000}

/* Die Ligen */
.ligen-kopf{padding:clamp(88px,16vh,180px) var(--rand) clamp(28px,6vh,60px);display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:32px;align-items:end}
.ligen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;list-style:none}
.liga{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000}
.liga img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 14%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.liga:hover img{transform:scale(1.03)}
.liga h3{position:absolute;left:0;right:0;bottom:0;padding:40px clamp(10px,1.1vw,16px) clamp(10px,1vw,14px);font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em;line-height:1.05;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8) 62%)}

/* Akademie */
.akademie-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,104px);align-items:start}
.akademie-grid .lead{margin-top:clamp(14px,3vh,24px)}
.fakten{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px clamp(24px,4vw,56px);margin-top:clamp(28px,6vh,56px)}
.fakten dt{color:var(--still-g);font-size:15px}
.fakten dd{font-weight:700;font-size:clamp(32px,3.6vw,56px);letter-spacing:-.045em;line-height:1.05;white-space:nowrap}
.akademie-grid .small{color:var(--still-g);margin-top:18px;max-width:32em}
.ak-player{position:relative;background:var(--tafel);padding:clamp(18px,1.9vw,28px);display:flex;flex-direction:column;min-height:630px}
.ak-player:has(.ak-back[hidden]){min-height:0}
.ak-player:has(.ak-back[hidden]) .ak-feedback{min-height:0;margin-top:0}
.ak-player:has(.ak-back[hidden]) .ak-body{flex:none}
.ak-kicker{color:var(--still);font-size:15px}
.ak-static h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin:4px 0 10px}
.ak-fallback{list-style:none;margin-top:12px}
.ak-fallback li{padding:12px 0;border-top:1px solid var(--linie)}
.ak-fallback h4{font-size:19px;letter-spacing:-.02em;margin-bottom:4px}
.ak-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--still);font-size:15px}
.ak-xp{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--index)}
.ak-xp svg{width:16px;height:16px;fill:currentColor}
.ak-progress{display:flex;gap:3px;margin:14px 0 18px}
.ak-progress i{flex:1;height:3px;background:var(--flaeche2)}
.ak-progress i.done{background:var(--gewinn)}
.ak-progress i.now{background:var(--tinte)}
.ak-body{flex:1;outline:none}
.ak-body h3{font-size:clamp(26px,2.5vw,36px);letter-spacing:-.035em;line-height:1.08;margin-bottom:12px}
.ak-label{font-size:15px;color:var(--still);margin-bottom:6px}
.ak-take{margin-top:18px;padding:14px 16px;background:var(--gruen);font-weight:600}
.ak-opts{display:grid;gap:2px;margin-top:14px}
.ak-opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;font:inherit;color:var(--tinte);background:var(--flaeche);border:0;padding:12px 14px;min-height:52px;cursor:pointer;transition:background-color .15s ease}
.ak-opt:hover:not([disabled]){background:var(--flaeche2)}
.ak-opt .key{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--flaeche2)}
.ak-opt.is-picked{background:var(--tinte);color:var(--schwarz)}
.ak-opt.is-picked .key{background:var(--schwarz);color:var(--tinte)}
.ak-opt.is-right{background:#0f5a42;color:#fff}
.ak-opt.is-right .key{background:var(--gewinn);color:#06241a}
.ak-opt.is-wrong{background:#5a1f25;color:#fff}
.ak-opt.is-wrong .key{background:var(--verlust);color:#3a0d12}
.ak-opt[disabled]{cursor:default}
.ak-feedback{min-height:3.2em;margin-top:14px;font-size:16px;color:var(--still)}
.ak-feedback.good{color:var(--gewinn)}
.ak-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.ak-back{background:none;border:0;font:inherit;font-size:15px;color:var(--still);cursor:pointer;min-height:44px;padding:0 14px 0 0;text-decoration:underline;text-underline-offset:3px}
.ak-back[hidden]{display:block;visibility:hidden}
.ak-next{margin-left:auto;min-height:50px;padding:0 24px;background:var(--tinte);color:var(--schwarz);border:0;font:inherit;font-weight:700;cursor:pointer}
.ak-next:hover:not([disabled]){background:#fff}
.ak-next[disabled]{background:var(--flaeche2);color:var(--still);cursor:default}
.ak-result .big{font-weight:700;font-size:clamp(60px,7vw,96px);letter-spacing:-.05em;line-height:1;color:var(--index);margin:6px 0 10px}
.ak-result ul{list-style:none;margin-top:16px}
.ak-result li{padding:10px 0;border-top:1px solid var(--linie);font-size:16px}
@media (prefers-reduced-motion:no-preference){
  .ak-body.is-out{opacity:0;transform:translateX(-14px);transition:opacity .16s ease,transform .16s ease}
  .ak-body.is-in{animation:akIn .32s cubic-bezier(.2,.75,.1,1) both}
  .ak-opt.shake{animation:akShake .38s ease}
}
@keyframes akIn{from{opacity:0;transform:translateX(14px)}}
@keyframes akShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* Warum */
.zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(32px,7vh,72px)}
.num{font-weight:700;font-size:clamp(68px,11vw,190px);letter-spacing:-.06em;line-height:.95;white-space:nowrap}
html[lang=en] .num{font-size:clamp(54px,7.4vw,130px)}
.zahlen p{margin-top:14px;max-width:30em}
.zahlen .src{font-size:14.5px;color:var(--still)}
.zahlen .src a{padding:14px 0}
.warum-text{font-size:clamp(20px,1.9vw,28px);line-height:1.28;letter-spacing:-.02em;max-width:34em;margin-top:clamp(40px,8vh,88px)}

/* Einordnung */
.vergleich{width:100%;border-collapse:collapse;margin-top:clamp(28px,6vh,56px)}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:20px 24px 20px 0;border-top:1px solid var(--linie)}
.vergleich thead th{font-size:15px;font-weight:400;color:var(--still);border-top:0;padding-bottom:12px}
.vergleich tbody th{font-weight:700;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.15;width:26%}
.vergleich td{color:var(--still);width:37%}
.vergleich .selbst{background:var(--gruen)}
.vergleich .selbst th{padding-left:16px}
.vergleich .selbst td{color:var(--tinte)}

/* Kontakt und Abschluss */
/* Fragen und Antworten */
.fragen{border-top:1px solid var(--linie)}
.fq{margin-top:clamp(28px,6vh,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,72px)}
.fq div{padding:22px 0 24px;border-top:1px solid var(--linie)}
.fq dt{font-weight:700;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.025em;line-height:1.2}
.fq dd{color:var(--still);margin-top:8px;max-width:34em}

.kontakt-grid{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:end}
.kontakt-grid .lead{margin-top:14px}
.kontakt-mail a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;margin-top:6px}
.fuss{padding:28px var(--rand) 0;overflow:hidden;font-size:15px;color:var(--still)}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 24px;align-items:center}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 20px}
.fuss nav a{display:inline-flex;align-items:center;min-height:44px}
.fuss-zeile>span a{padding:14px 0}
.fuss-text{margin-top:10px;max-width:46em}
.wortmarke{font-weight:700;font-size:22.2vw;letter-spacing:-.065em;line-height:.8;color:var(--tinte);margin:clamp(32px,7vh,72px) 0 -.05em -.035em;white-space:nowrap;user-select:none}

/* Tablet und schmaler */
/* Unterseiten (fragen.html, akademie.html, en/…): feste Kopfzeile, eigener Seitenkopf, sonst dieselben Bauteile wie die Startseite */
.unterseite .topbar{margin-bottom:0;background:var(--schwarz);border-bottom:1px solid var(--linie)}
.kopfzeile{padding:clamp(36px,7vh,88px) var(--rand) clamp(48px,9vh,100px)}
.pfad{font-size:14px;color:var(--still)}
.pfad a{text-decoration:none}
.pfad a:hover{text-decoration:underline}
.unterseite h1{font-size:clamp(40px,6.4vw,110px);line-height:.97;letter-spacing:-.05em;margin-top:14px;max-width:12em}
.kopfzeile .lead{margin-top:clamp(16px,3vh,26px)}
.kopfzeile .small{margin-top:18px;max-width:32em}
.unterseite h2{font-size:clamp(32px,4.2vw,68px)}
.unterseite .fragen{border-top:0;padding-top:clamp(56px,10vh,120px);padding-bottom:clamp(56px,10vh,120px)}
.unterseite .fragen h2{font-size:clamp(28px,3.4vw,52px)}
.unterseite .fq{margin-top:clamp(20px,4vh,36px)}
.gruen .fq div{border-top-color:var(--linie-g)}
.gruen .fq dd{color:var(--still-g)}
.fq dd a{color:inherit}
.fq-mehr{margin-top:clamp(24px,5vh,44px)}
/* Akademie-Seite: Lektionsauswahl, Themenliste, Spiele; Startseite: Verweis auf die Akademie */
.spielen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,104px);align-items:start}
.spielen-grid .lead{margin-top:clamp(14px,3vh,24px)}
.ak-wahl{display:grid;gap:2px;margin-top:clamp(24px,5vh,44px)}
.ak-wahl button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;font:inherit;color:var(--tinte);background:var(--flaeche);border:0;padding:12px 16px;min-height:64px;cursor:pointer;transition:background-color .15s ease}
.ak-wahl button:hover{background:var(--flaeche2)}
.ak-wahl button[aria-selected=true]{background:var(--tinte);color:var(--schwarz)}
.ak-wahl .nr{grid-row:1/3;font-weight:700;font-size:28px;letter-spacing:-.04em;min-width:1.1em}
.ak-wahl .tt{font-weight:600;letter-spacing:-.01em}
.ak-wahl small{font-size:13.5px;color:var(--still)}
.ak-wahl button[aria-selected=true] small{color:#3b4a43}
.themen{margin-top:clamp(28px,6vh,56px)}
.thema-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,72px);padding:clamp(24px,4vh,40px) 0;border-top:1px solid var(--linie-g)}
.thema-block h3{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.03em;line-height:1.1}
.thema-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;font-size:15px;color:var(--still-g)}
.stufe{display:inline-block;padding:3px 8px;background:var(--flaeche);color:var(--tinte);font-weight:600;font-size:13.5px}
.thema-sub{margin-top:10px;max-width:28em;color:var(--still-g)}
.lektionen{list-style:none}
.lektionen li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:baseline;padding:10px 0;border-top:1px solid var(--linie-g)}
.lektionen li:first-child{border-top:0;padding-top:0}
.lektionen .n{color:var(--still-g);font-variant-numeric:tabular-nums}
.lektionen b{font-size:17px;letter-spacing:-.01em}
.lektionen span:not(.n){grid-column:2;color:var(--still-g);font-size:15px}
.lektionen i{font-style:normal;color:var(--still-g);font-size:14px;white-space:nowrap}
.spiele{list-style:none;margin-top:clamp(28px,5vh,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,72px)}
.spiele li{padding:16px 0 18px;border-top:1px solid var(--linie)}
.spiele b{display:block;font-size:19px;letter-spacing:-.02em}
.spiele p{color:var(--still);margin-top:4px;max-width:30em}
.ak-teaser{background:var(--tafel);padding:clamp(18px,1.9vw,28px)}
.ak-teaser h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin:4px 0 10px}
.ak-teaser>p{color:var(--still)}
.ak-teaser .knopf{margin-top:18px}
.ak-teaser .small{margin-top:14px}
.ak-teaser .small a{color:var(--still)}
@media (max-width:1040px){
  .ablauf-grid{grid-template-columns:minmax(0,1fr)}
  .demo-grid{grid-template-columns:minmax(0,1fr)}
  .thema-grid{grid-template-columns:minmax(0,1fr) clamp(250px,34vw,340px);gap:clamp(28px,5vw,64px)}
  .thema.rechts .thema-grid{grid-template-columns:clamp(250px,34vw,340px) minmax(0,1fr)}
  .akademie-grid{grid-template-columns:minmax(0,1fr)}
  .ligen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .handy{border-radius:clamp(40px,5.4vw,54px) clamp(40px,5.4vw,54px) 0 0;padding:clamp(8px,1.2vw,11px) clamp(8px,1.2vw,11px) 0}
  .handy img{border-radius:clamp(32px,4.4vw,43px) clamp(32px,4.4vw,43px) 0 0}
  .handy::before{top:clamp(18px,2.4vw,23px);height:clamp(16px,2.4vw,23px)}
}
@media (max-width:900px){
  .buehne-text{grid-template-columns:minmax(0,1fr);gap:14px}
  .demo-head,.ligen-kopf,.kontakt-grid{grid-template-columns:minmax(0,1fr)}
  .topbar nav a:not(.bleibt){display:none}
}
@media (max-width:640px){
  h1{font-size:10.4vw}
  .buehne::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.2) 16%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.94) 100%)}
  .kl,.kl thead,.kl tbody{display:block}
  .kl tr{display:grid;grid-template-columns:36px minmax(0,1fr) 84px 4.7em;column-gap:8px;align-items:center}
  .kl .p,.kl .kv{width:auto}
  .kl thead th,.kl td,.kl tbody th{display:block;width:auto;height:auto;padding:0;border:0}
  .kl thead th{padding-bottom:8px}
  .kl thead .lg{display:none}
  .kl tbody tr{grid-template-areas:"p n k v" "p l k v";min-height:54px;align-content:center;border-top:1px solid var(--linie-g)}
  .kl tbody tr:last-child{border-bottom:1px solid var(--linie-g)}
  .kl tbody tr:last-child td,.kl tbody tr:last-child th{border:0}
  .kl tbody .p{grid-area:p}
  .kl tbody th{grid-area:n;font-size:15.5px;align-self:end}
  .kl tbody .lg{grid-area:l;font-size:12.5px;align-self:start;margin-top:1px}
  .kl tbody .kv{grid-area:k}
  .kl tbody .v{grid-area:v;font-size:15px}
  .kl .ich{margin:0 -8px;padding:0 8px;background:var(--schwarz);border-top-color:var(--schwarz)}
  .kl .ich td,.kl .ich th{background:none}
  .kl .ich td:first-child,.kl .ich td:last-child{box-shadow:none}
  .kl .ich+tr{border-top-color:transparent}
  .tiles{grid-auto-rows:1fr}
  .tile{min-height:88px;padding:10px 2px}
  .nm{font-size:12.5px}
  .axis{font-size:18px}
  .demo-index-label,.demo-you-label{font-size:18px}
  .thema-grid,.thema.rechts .thema-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .thema-text,.thema.rechts .thema-text{order:0;align-self:auto;padding-bottom:0}
  .handy{width:min(76vw,320px);margin:clamp(32px,8vh,56px) auto -2px;border-radius:44px 44px 0 0;padding:9px 9px 0}
  .handy img{border-radius:36px 36px 0 0}
  .fq{grid-template-columns:minmax(0,1fr)}
  .handy::before{top:20px;height:19px}
  .ligen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ak-player{min-height:710px}
  .ak-player:has(.ak-back[hidden]){min-height:0}
  .fakten{gap:8px 18px}
  .zahlen{grid-template-columns:minmax(0,1fr)}
  .num{font-size:24vw}
  html[lang=en] .num{font-size:16vw}
  .vergleich thead{display:none}
  .vergleich tr{display:block;padding:14px 0;border-top:1px solid var(--linie)}
  .vergleich .selbst{padding:14px 16px;border-top:0}
  .vergleich th,.vergleich td,.vergleich tbody th{display:block;width:auto;border:0;padding:3px 0}
  .vergleich .selbst th{padding-left:0}
  .vergleich td::before{content:attr(data-label);display:block;font-size:13.5px;color:var(--still);margin-top:8px}
  .vergleich .selbst td::before{color:var(--still-g)}
}
@media (prefers-reduced-motion:reduce){
  .laufband>div{animation:none}
  .liga:hover img{transform:none}
}
@media (max-width:1040px){
  .spielen-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .thema-block{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:640px){
  .unterseite h1{font-size:11vw}
  .spiele{grid-template-columns:minmax(0,1fr)}
  .lektionen li{grid-template-columns:2em minmax(0,1fr)}
  .lektionen i{grid-column:2}
}

/* Fragenseite: Sprungleiste bleibt unter der Kopfzeile stehen, die Marke wandert zur aktiven Gruppe; dahinter ein laufender Kurs (fragen.js).
   Fragen in einer Spalte links, rechts daneben die freie Bühne für den Kurs; hinter dem Text ist er stark gedämpft (Founder 06.11.). */
.seite-fragen{--kurs:#2f8f62;--kurs-hell:#6fe3ad;--sprung:52px}
.seite-fragen .kopfzeile{padding-bottom:clamp(28px,5vh,48px)}
.seite-fragen section{scroll-margin-top:calc(var(--kopf) + var(--sprung) + 8px)}
.sprung{position:sticky;top:var(--kopf);z-index:20;background:rgba(10,12,13,.92);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:0 var(--rand)}
.sprung-innen{position:relative;display:flex;gap:0 26px;overflow-x:auto;scrollbar-width:none}
.sprung-innen::-webkit-scrollbar{display:none}
.sprung a{flex:none;display:inline-flex;align-items:center;height:var(--sprung);font-size:15px;font-weight:500;color:var(--still);text-decoration:none;white-space:nowrap;transition:color .25s ease}
.sprung a:hover,.sprung a.aktiv{color:var(--tinte)}
.sprung .marke{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--kurs);transform:translateX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
html:not(.js) .sprung .marke{display:none}
.kurs-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.kurs-bg .hinten{opacity:.2}
.raster line{stroke:#fff;stroke-opacity:.06;stroke-width:1}
.kurs-index{fill:none;stroke:#7d8891;stroke-width:1.5;stroke-linejoin:round}
.kurs-eigen{fill:none;stroke:var(--kurs);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.kurs-flaeche{fill:var(--kurs);fill-opacity:.16}
.kurs-zeit{stroke:#fff;stroke-opacity:.12;stroke-width:1}
.kurs-punkt{fill:var(--kurs-hell)}
.kurs-punkt-i{fill:#a9b4ad}
.kurs-tag rect{fill:var(--schwarz);stroke:var(--linie-g)}
.kurs-tag text{font:600 13px var(--schrift);fill:var(--tinte);font-variant-numeric:tabular-nums}
.seite-fragen main,.seite-fragen .fuss{position:relative;z-index:1}
.seite-fragen .fuss{background:var(--schwarz)}
.seite-fragen .feld.fragen{background:transparent}
.seite-fragen .feld.fragen+.feld.fragen{border-top:1px solid var(--linie)}
.seite-fragen .fq{grid-template-columns:minmax(0,1fr);max-width:40em}
.seite-fragen .fq dd{max-width:none}
.seite-fragen .feld.fragen h2{max-width:14em}
.seite-fragen .kontakt-grid{position:relative}
@media (max-width:640px){
  .kurs-bg .hinten{opacity:.32}
  .kurs-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sprung .marke,.sprung a{transition:none}
}