/* Akademie. Die Farben der Marke stehen im Block :root (FE Leads) und in :root[data-marke] (weitere Marken). */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700.woff2') format('woff2')}

:root{
  --grund:#0A0A0F;
  --grund2:#0E0E15;
  --flaeche:#14141C;
  --flaeche2:#1B1B26;
  --text:#F4F3F0;
  --text-leise:#B4B3BE;
  --linie:rgba(244,243,240,.14);
  --linie-stark:rgba(244,243,240,.30);
  --signal:#A8195F;
  --signal2:#E23A82;
  --signal3:#FF4D9D;
  --signal-hell:#FF9ACB;
  --signal-tief:#1A0612;
  --signal-blass:#FFD0E6;
  --signal-rgb:168,25,95;
  --signal2-rgb:226,58,130;
  --signal3-rgb:255,77,157;
  --signal-glut-rgb:255,60,150;
  --gut:#4FD18B;
  --warn:#FFB454;
  --orange:#FF8A3D;
  --fehler:#FF7A7A;
  --radius:14px;
  --breite:1120px;
  --rand:20px;
  --luecke:16px;
  --kopfhoehe:56px;
  --schrift-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --schrift-kopf:'Space Grotesk','Montserrat',system-ui,sans-serif;
}
@media (min-width:900px){:root{--rand:32px;--luecke:24px}}
:root[data-marke="energy"]{--signal:#9A4A00;--signal2:#FF7A00;--signal3:#FF9D4D;--signal-hell:#FFC299;--signal-tief:#1A0C00;--signal-blass:#FFE1CC;--signal-rgb:154,74,0;--signal2-rgb:255,122,0;--signal3-rgb:255,157,77;--signal-glut-rgb:255,122,0}
/* Vivavolt: Signal-Pink #FF206E, zweite Ebene #E72C6F, dunkler Grund auf Basis des Navy #191D37 statt Schwarz.
   Kontrast (WCAG): Text auf --grund 18:1, --text-leise auf --grund 9:1 und auf --flaeche2 7,2:1, Knopftext #0A0A0F auf --signal3 5,3:1, --signal3 als Schrift auf --grund 4,9:1. */
:root[data-marke="vivavolt"]{--grund:#12152B;--grund2:#161A32;--flaeche:#191D37;--flaeche2:#232846;--text:#FFFFFF;--text-leise:#B3B7CC;--linie:rgba(255,255,255,.14);--linie-stark:rgba(255,255,255,.30);--signal:#9C1A4B;--signal2:#E72C6F;--signal3:#FF206E;--signal-hell:#FF8FB3;--signal-tief:#1A0D22;--signal-blass:#FFD0E0;--signal-rgb:156,26,75;--signal2-rgb:231,44,111;--signal3-rgb:255,32,110;--signal-glut-rgb:255,32,110}
:root[data-marke="vivavolt"] .md-panel{background:linear-gradient(180deg,#1B2040,#12152B)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;overflow-anchor:none;background:var(--grund)}
body{margin:0;min-height:100dvh;background:var(--grund);color:var(--text);font:400 1rem/1.55 var(--schrift-text);-webkit-font-smoothing:antialiased;text-wrap:pretty}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 420px at 85% -10%,rgba(var(--signal-rgb),.28),transparent 70%),radial-gradient(700px 360px at -10% 30%,rgba(var(--signal2-rgb),.10),transparent 70%)}
h1,h2,h3{font-family:var(--schrift-kopf);font-weight:600;line-height:1.2;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,5.4vw,2.4rem)}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0}
a{color:var(--signal3);text-underline-offset:3px}
a:hover{color:#fff}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal3);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sprung{position:absolute;left:-999px;top:0;background:var(--signal);color:#fff;padding:10px 14px;z-index:200}
.sprung:focus{left:8px;top:8px}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Seitenbreite: Kopfleiste, Titel und Inhalt stehen auf derselben Breite */
.seite,.kopf__innen{width:100%;max-width:calc(var(--breite) + 2 * var(--rand));margin-inline:auto;padding-left:max(var(--rand),env(safe-area-inset-left));padding-right:max(var(--rand),env(safe-area-inset-right))}
.seite{padding-block:20px 56px;display:grid;gap:var(--luecke);align-content:start}

/* Kopfleiste und Menü */
.kopf{position:sticky;top:0;z-index:40;background:rgba(10,10,15,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie);padding-top:env(safe-area-inset-top)}
.kopf__innen{position:relative;height:var(--kopfhoehe);display:flex;align-items:center;gap:12px}
.kopf__menu{width:44px;height:44px;border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);display:grid;place-content:center;gap:5px;cursor:pointer}
.kopf__menu span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
.kopf__menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kopf__menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.kopf__menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.kopf__marke{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex}
.kopf__initialen{margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;font:600 .95rem var(--schrift-kopf);letter-spacing:.02em}
.kopf__initialen:empty{visibility:hidden}
.kopf__marke img{border-radius:50%}
.kopf__name{margin-left:auto;color:var(--text-leise);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.menue__grund{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6)}
.menue{position:fixed;top:0;bottom:0;left:0;z-index:70;width:min(320px,86vw);background:var(--grund2);border-right:1px solid var(--linie);padding:calc(env(safe-area-inset-top) + 16px) 16px 24px;display:flex;flex-direction:column;gap:4px;overflow:auto;transform:translateX(-102%);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.menue.offen{transform:none}
.menue__titel{font:600 .75rem var(--schrift-kopf);letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);padding:8px 12px}
.menue a,.menue button{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;color:var(--text);text-decoration:none;background:none;border:0;font:500 1.05rem var(--schrift-text);text-align:left;cursor:pointer}
.menue a:hover,.menue button:hover{background:var(--flaeche2)}
.menue a[aria-current="page"]{background:linear-gradient(90deg,rgba(var(--signal-rgb),.55),rgba(var(--signal-rgb),.12));box-shadow:inset 3px 0 0 var(--signal3)}
.menue__trenner{height:1px;background:var(--linie);margin:10px 0}
.menue__klein a,.menue__klein button{min-height:40px;font-size:.95rem;color:var(--text-leise)}

/* Kopf je Ansicht: Kicker, Titel, ein Satz */
.kopfblock{display:grid;gap:6px}
.kicker{font:600 .75rem var(--schrift-kopf);letter-spacing:.14em;text-transform:uppercase;color:var(--signal3)}
.satz{color:var(--text-leise)}

/* Bausteine */
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:16px}
.kacheln{display:grid;gap:var(--luecke);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.kacheln--5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.kpi{display:grid;gap:2px;align-content:start}
.kpi__zahl{font:700 clamp(1.7rem,6vw,2.2rem)/1.1 var(--schrift-kopf);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi__label{font-size:.875rem;color:var(--text-leise)}
.kacheln--5>.kachel:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:900px){.kacheln--5>.kachel:last-child:nth-child(odd){grid-column:auto}}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;background:var(--signal);color:#fff;font:600 1rem var(--schrift-text);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,transform .1s}
.knopf:hover{background:#C21F70;color:#fff}
.knopf:active{transform:scale(.98)}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.knopf--leise{background:var(--flaeche2);border-color:var(--linie-stark);color:var(--text)}
.knopf--leise:hover{background:#262633;color:#fff}
.knopf--klein{min-height:40px;padding:0 14px;font-size:.9rem}
.reihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.balken{height:8px;border-radius:8px;background:rgba(244,243,240,.12);overflow:hidden}
.balken>span{display:block;height:100%;width:var(--p,0%);border-radius:8px;background:linear-gradient(90deg,var(--signal),var(--signal3));transition:width .5s cubic-bezier(.2,.8,.2,1)}

.plakette{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;border:1px solid var(--linie-stark);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-leise);white-space:nowrap}
.plakette--neu{border-color:var(--signal3);color:var(--signal3)}
.plakette--gut{border-color:var(--gut);color:var(--gut)}

/* Zustände: leer, lädt, Fehler, keine Berechtigung */
.zustand{display:grid;gap:10px;justify-items:start;padding:24px;border:1px dashed var(--linie-stark);border-radius:var(--radius);background:var(--grund2)}
.zustand__titel{font:600 1.1rem var(--schrift-kopf)}
.zustand--fehler{border-color:rgba(255,122,122,.5)}
.zustand--fehler .zustand__titel{color:var(--fehler)}
.laedt{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid rgba(244,243,240,.2);border-top-color:var(--signal3);animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Anmeldung */
.anmeldung{min-height:100dvh;display:grid;align-content:center;justify-items:center;padding:24px max(var(--rand),env(safe-area-inset-left))}
.anmeldung__box{width:100%;max-width:440px;display:grid;gap:18px;text-align:center}
.anmeldung__logo{display:flex;flex-direction:column;align-items:center;gap:10px;font:700 1.3rem var(--schrift-kopf)}
.anmeldung .feld input{text-align:center}
.anmeldung .haken,.anmeldung .reihe,.anmeldung .fussleiste{justify-content:center}
.anmeldung .formular>.knopf{justify-self:center}
.anmeldung .heimtipp{justify-items:center}
.anmeldung__logo img{border-radius:50%}
.formular{display:grid;gap:14px}
.haken{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.haken input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--signal2)}
.heimtipp{display:grid;gap:6px;padding:14px;border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie)}
.heimtipp p{margin:0;color:var(--text-leise);font-size:.875rem}
.heimtipp .knopf{margin-top:6px}
.menue .heimtipp{margin-top:16px}
.feld{display:grid;gap:6px}
.feld label{font-weight:500}
.feld input,.feld textarea,.filter select,.filter input{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--linie-stark);background:var(--grund2);color:var(--text);font:400 1rem var(--schrift-text)}
.feld textarea{min-height:110px;resize:vertical}
.feld input[name="code"]{font:600 1.6rem var(--schrift-kopf);letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.feld small,.hilfe{color:var(--text-leise);font-size:.875rem}
.meldung{padding:12px 14px;border-radius:12px;background:var(--flaeche2);border:1px solid var(--linie-stark)}
.meldung--fehler{border-color:rgba(255,122,122,.6);color:#FFD0D0}
.fussleiste{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem}

/* Hinweis der ersten Anmeldung */
.dialog__grund{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:var(--rand)}
.dialog{width:100%;max-width:520px;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:18px;padding:24px;display:grid;gap:16px;max-height:92dvh;overflow:auto}

/* Kurse */
.weiter{display:grid;gap:12px;background:linear-gradient(135deg,rgba(var(--signal-rgb),.55),rgba(20,20,28,.95) 70%);border-color:rgba(var(--signal3-rgb),.45)}
.weiter__titel{font:600 1.25rem/1.25 var(--schrift-kopf)}
.gesamt{display:grid;gap:8px}
.gesamt__zeile{display:flex;justify-content:space-between;gap:10px;font-size:.95rem;color:var(--text-leise)}
.modul{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.modul>summary{position:relative;isolation:isolate;list-style:none;cursor:pointer;display:grid;gap:10px;align-content:end;padding:16px;min-height:clamp(128px,18vw,200px);overflow:hidden}
.modul__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center;background:var(--flaeche2)}
.modul>summary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,15,.82),rgba(10,10,15,.3) 62%,rgba(10,10,15,.5)),linear-gradient(0deg,rgba(10,10,15,.75),transparent 60%)}
.modul>summary::-webkit-details-marker{display:none}
.modul__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modul__titel{font:600 1.1rem/1.3 var(--schrift-kopf)}
.modul__nr{font:600 .75rem var(--schrift-kopf);letter-spacing:.14em;text-transform:uppercase;color:var(--signal3)}
.modul__rechts{display:flex;align-items:center;gap:10px;flex:none}
.modul__prozent{white-space:nowrap;font:700 1.1rem var(--schrift-kopf);font-variant-numeric:tabular-nums}
.modul__pfeil{width:10px;height:10px;border-right:2px solid var(--text-leise);border-bottom:2px solid var(--text-leise);transform:rotate(45deg);transition:transform .2s;flex:none;margin-left:4px}
.modul[open] .modul__pfeil{transform:rotate(-135deg)}
@media (min-width:900px){.modul__nr{font-size:.95rem}.modul__titel{font-size:1.9rem}.modul__prozent{font-size:1.9rem}}
.videos{list-style:none;margin:0;padding:12px;display:grid;gap:12px;border-top:1px solid var(--linie)}
.video{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:96px;padding:22px 16px;background:var(--flaeche2);border:1px solid var(--linie);border-radius:12px;color:var(--text);text-decoration:none}
a.video:hover{border-color:var(--linie-stark);color:var(--text)}
.video__symbol{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--flaeche2);border:1px solid var(--linie-stark)}
.video__symbol svg{width:16px;height:16px}
.video--fertig .video__symbol{background:rgba(79,209,139,.15);border-color:var(--gut);color:var(--gut)}
.video--frei .video__symbol{background:var(--signal);border-color:var(--signal);color:#fff}
.video--gesperrt{color:var(--text-leise);cursor:not-allowed}
.video--gesperrt .video__symbol{background:rgba(255,138,61,.15);border-color:var(--orange);color:var(--orange)}
.video__text{display:grid;gap:2px;min-width:0}
.video__titel{font-weight:500;line-height:1.35}
.video__meta{font-size:.875rem;color:var(--text-leise)}

/* Player: Leiste unter dem Bild, im Vollbild und in der Quer-Ansicht über dem Bild */
.player-seite{max-width:calc(var(--breite) + 2 * var(--rand))}
.player{position:relative;width:100%;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie);-webkit-user-select:none;user-select:none;touch-action:manipulation}
.player__bild{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(72dvh - 96px);background:#000;overflow:hidden}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player__mitte{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,7vw,64px);pointer-events:none}
.player__mitte button{pointer-events:auto;flex:none;transition:opacity .25s}
.player--ruhig .player__mitte button,.player--zieht .player__mitte button{opacity:0;pointer-events:none}
.player__sprung{width:64px;height:64px;border-radius:50%;border:0;background:rgba(10,10,15,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.player__sprung svg{width:30px;height:30px}
.player__gross{width:84px;height:84px;border-radius:50%;border:0;background:rgba(var(--signal-rgb),.92);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 10px rgba(var(--signal-rgb),.25)}
.player__gross svg{width:34px;height:34px}
.player__hinweis{position:absolute;z-index:6;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:rgba(10,10,15,.88)}
.player__sperre{position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 14px;border-radius:14px;background:rgba(10,10,15,.9);border:1px solid var(--linie-stark);font-size:.9rem;width:max-content;max-width:calc(100% - 24px);text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}
.player__sperre.an{opacity:1}
.leiste{position:relative;z-index:5;display:grid;gap:2px;padding:8px 12px;background:var(--flaeche);border-top:1px solid var(--linie);transition:opacity .25s}
.leiste__zeile{display:flex;align-items:center;gap:6px}
.leiste__platz{flex:1}
.leiste__zeile>.slider{flex:1;min-width:0}
@media (max-width:480px){.zeit__gesamt{display:none}.leiste{padding-inline:6px}.leiste .lk{min-width:36px;padding:0 2px}.leiste .lk svg{width:20px;height:20px}.leiste .lk--quali{padding:0 4px}.leiste .zeit{font-size:.875rem}.leiste__zeile{gap:2px}.leiste .quali-menue{bottom:6px}}
.lk{min-width:44px;min-height:44px;border-radius:12px;border:0;background:none;color:#fff;display:inline-grid;place-items:center;cursor:pointer;padding:0 6px;font:600 .9rem var(--schrift-kopf)}
.lk:hover{background:rgba(255,255,255,.12)}
.lk svg{width:22px;height:22px}
.lk[aria-disabled="true"]{opacity:.5}
.lk--quali{font-size:14px;font-weight:600;padding:0 8px}
.quali-menue{position:absolute;right:12px;bottom:calc(100% + 6px);z-index:6;display:grid;min-width:150px;padding:6px;border-radius:14px;background:var(--flaeche);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.quali-menue[hidden]{display:none}
.quali-menue button{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:#fff;font:inherit;font-size:15px;text-align:left}
.quali-menue button:hover{background:rgba(255,255,255,.1)}
.quali-menue button[aria-checked="true"]{color:var(--signal3);font-weight:700}
.zeit{font:500 .9rem var(--schrift-kopf);font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
.slider{position:relative;height:28px;display:grid;align-items:center;cursor:pointer;touch-action:none}
.slider__bahn{position:relative;height:8px;border-radius:8px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 4px,rgba(255,255,255,.06) 4px 8px);overflow:hidden}
.slider__gesehen{position:absolute;inset:0 auto 0 0;width:var(--gesehen,0%);background:rgba(255,255,255,.38)}
.slider__pos{position:absolute;inset:0 auto 0 0;width:var(--pos,0%);background:var(--signal3)}
.slider__griff{position:absolute;top:50%;left:var(--pos,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(var(--signal3-rgb),.35)}
.slider__griff{transition:transform .15s}
.slider--zieht .slider__griff{transform:scale(1.35)}
.slider--frei .slider__bahn{background:rgba(255,255,255,.22)}
.slider--sperre .slider__griff{animation:wackeln .3s}
@keyframes wackeln{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.frage{display:grid;gap:14px}
.frage__text{font:500 1.15rem/1.4 var(--schrift-kopf)}
.aktion{display:grid;gap:20px;align-items:center}
.aktion__text{display:grid;gap:14px;justify-items:start}
.aktion__adresse{margin:0;color:var(--text-leise);font-size:.95rem}
.aktion__qr{display:none;margin:0;text-align:center}
.aktion__qr img{display:block;width:180px;height:180px;border-radius:12px;background:#fff}
.aktion__qr figcaption{margin-top:8px;color:var(--text-leise);font-size:.875rem}
@media (min-width:900px){.aktion{grid-template-columns:minmax(0,1fr) auto}.aktion__qr{display:block}.aktion__adresse{display:none}}
.muster{display:grid;gap:6px;padding:14px;border-radius:12px;border-left:3px solid var(--signal3);background:var(--grund2)}
.muster__label{font:600 .75rem var(--schrift-kopf);letter-spacing:.14em;text-transform:uppercase;color:var(--signal3)}

/* Quiz */
.quiz{display:grid;gap:16px}
.quiz__frage{font:600 1.3rem/1.35 var(--schrift-kopf)}
.optionen{display:grid;gap:var(--luecke)}
.option{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;padding:10px 14px;text-align:left;border-radius:12px;border:1px solid var(--linie-stark);background:var(--flaeche2);cursor:pointer;line-height:1.4}
.option:hover{border-color:var(--signal3)}
.option--falsch,.option--falsch:hover{opacity:.55;border-color:var(--warn);cursor:default}
.option__buchstabe{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linie-stark);font:600 .9rem var(--schrift-kopf)}
.option[aria-pressed="true"]{border-color:var(--signal3);background:rgba(var(--signal-rgb),.3)}
.option[aria-pressed="true"] .option__buchstabe{background:var(--signal);border-color:var(--signal);color:#fff}
.ergebnis{display:grid;gap:6px;justify-items:start}
.ergebnis__zahl{font:700 clamp(2.4rem,10vw,3.6rem)/1 var(--schrift-kopf);font-variant-numeric:tabular-nums}
.auswertung{display:grid;gap:12px}
.antwort{display:grid;gap:8px;padding:16px;border-radius:var(--radius);border:1px solid var(--linie);background:var(--flaeche)}
.antwort--richtig{border-color:rgba(79,209,139,.6)}
.antwort--falsch{border-color:rgba(255,180,84,.7)}
.antwort__status{font:600 .75rem var(--schrift-kopf);letter-spacing:.14em;text-transform:uppercase}
.antwort--richtig .antwort__status{color:var(--gut)}
.antwort--falsch .antwort__status{color:var(--warn)}

/* Reports */
.filter{display:grid;gap:var(--luecke);grid-template-columns:minmax(0,1fr);align-items:end}
@media (min-width:640px){.filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.filter{grid-template-columns:repeat(5,minmax(0,1fr))}}
.filter .feld{min-width:0}
.filter .feld--breit{grid-column:1/-1}
@media (min-width:900px){.filter .feld--breit{grid-column:auto}}
.filter label{font-size:.875rem;color:var(--text-leise)}
.abschnitt{display:grid;gap:10px}
.tabelle-block{display:grid;gap:10px;min-width:0}
.tabelle__suche{width:100%;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--linie-stark);background:var(--grund2);color:var(--text);font:400 1rem var(--schrift-text)}
.tabelle__leer{color:var(--text-leise);text-align:center}
.tabelle-wrap{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius);background:var(--flaeche);-webkit-overflow-scrolling:touch}
.tabelle{width:100%;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{padding:12px 14px;text-align:center;white-space:nowrap;border-left:1px solid var(--linie);border-top:1px solid var(--linie)}
.tabelle th:first-child,.tabelle td:first-child{border-left:0}
.tabelle thead th{border-top:0;background:var(--flaeche2);font:600 .75rem var(--schrift-kopf);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.tabelle thead th{padding:0;white-space:normal;hyphens:manual;min-width:72px}
.tabelle__kopf{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:12px 14px;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;white-space:inherit}
.tabelle__kopf:hover{color:var(--text)}
.tabelle__pfeil{flex:none;width:1em;text-align:center}
.tabelle__pfeil::after{content:'↕';opacity:.5}
.tabelle th[aria-sort="ascending"],.tabelle th[aria-sort="descending"]{color:var(--text)}
.tabelle th[aria-sort="ascending"] .tabelle__pfeil::after{content:'↑';opacity:1;color:var(--signal3)}
.tabelle th[aria-sort="descending"] .tabelle__pfeil::after{content:'↓';opacity:1;color:var(--signal3)}
.tabelle th:first-child,.tabelle td:first-child{position:sticky;left:0;z-index:1;background:var(--flaeche);box-shadow:inset -1px 0 0 var(--linie-stark)}
.tabelle thead th:first-child,.tabelle tfoot td:first-child{background:var(--flaeche2)}
.tabelle tbody tr:hover{background:rgba(244,243,240,.04)}
.tabelle tfoot td{font-weight:700;background:var(--flaeche2);border-top:2px solid var(--linie-stark)}
.tabelle a{font-weight:600}
.tabelle .ja{color:var(--gut);font-weight:600}
.tabelle .nein{color:var(--text-leise)}
@media (max-width:640px){.tabelle td{padding:10px 8px}.tabelle__kopf{padding:10px 8px}.tabelle thead th{white-space:normal;letter-spacing:.03em;hyphens:manual}.tabelle .titelspalte{white-space:normal;min-width:120px}}
.fuss{font-size:.875rem;color:var(--text-leise)}

/* Rechtstexte */
.rechtstext{overflow-wrap:anywhere}
.rechtstext section{display:grid;gap:10px;min-width:0}
.rechtstext h3{margin-top:6px}
.rechtstext ul{margin:0;padding-left:20px;display:grid;gap:6px}

/* Quer-Ansicht am Handy und Vollbild: das Video füllt den Bildschirm, die Leiste liegt darüber */
@media (orientation:landscape) and (max-height:520px){
  body[data-ansicht="player"] .kopf{display:none}
  body[data-ansicht="player"] .player{position:fixed;inset:0;z-index:50;width:100vw;height:100dvh;border:0;border-radius:0}
  body[data-ansicht="player"] .player__bild{position:absolute;inset:0;aspect-ratio:auto;max-height:none}
  body[data-ansicht="player"] .leiste{position:absolute;left:0;right:0;bottom:0;padding-top:28px;background:linear-gradient(transparent,rgba(0,0,0,.85));border:0}
  body[data-ansicht="player"] .player__sperre{bottom:92px}
  body[data-ansicht="player"] .player--ruhig .leiste{opacity:0;pointer-events:none}
}
.player:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0}
.player:fullscreen .player__bild{position:absolute;inset:0;aspect-ratio:auto;max-height:none}
.player:fullscreen .leiste{position:absolute;left:0;right:0;bottom:0;padding-top:28px;background:linear-gradient(transparent,rgba(0,0,0,.85));border:0}
.player:fullscreen .player__sperre{bottom:92px}
.player:fullscreen.player--ruhig .leiste{opacity:0;pointer-events:none}
.player:-webkit-full-screen{width:100vw;height:100vh;border:0;border-radius:0}
.player:-webkit-full-screen .player__bild{position:absolute;inset:0;aspect-ratio:auto;max-height:none}
.player:-webkit-full-screen.player--ruhig .leiste{opacity:0;pointer-events:none}
.player:-webkit-full-screen .leiste{position:absolute;left:0;right:0;bottom:0;padding-top:28px;background:linear-gradient(transparent,rgba(0,0,0,.85));border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}