/* ==========================================================================
   Oeffentliche Seiten (Startseite, Fahrplan) - gemeinsame Gestaltung.
   Aus der Startseite herausgeloest, damit alle Seiten dieselben Farben,
   Knoepfe, Kopf- und Fusszeilen haben und nichts doppelt gepflegt wird.
   ========================================================================== */
/* ==========================================================================
   Startseite, Redesign 09/2026.

   Dieselbe Farbwelt, Schrift und dieselben Bausteine wie das Dashboard
   (Nachtblau + Lila, Figtree, Kaesten mit runden Farbsymbolen) - wer sich
   anmeldet, soll sich sofort zurechtfinden.

   Die "Screenshots" sind nachgebaute Oberflaechen mit erfundenen Namen,
   keine Bilder: Echte Aufnahmen zeigten die Namen echter Zuschauer, und
   so bleiben sie auf jedem Bildschirm scharf.
   ========================================================================== */
:root {
  --bg: #0B1022; --tief: #080C1B; --leiste: #0A0F20; --karte: #121A36; --karte-2: #18224A; --karte-3: #202B58;
  --rand: #212C54; --rand-2: #2C3970;
  --text: #EEF1FB; --text-2: #BFC8E6; --leise: #8290B8; --leiser: #5F6C94;
  --lila: #8B5CFF; --lila-hover: #9A70FF; --lila-hell: #B6A0FF; --lila-flaeche: rgba(139, 92, 255, .15);
  --gruen: #3DD68C; --gelb: #F5B83D; --rot: #F2555A;
  --twitch: #9146FF; --kick: #53FC18; --youtube: #FF0033; --discord: #5865F2;
  --r-s: 8px; --r-m: 11px; --r-l: 14px; --r-xl: 20px;
  --schrift: "Figtree", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--schrift); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: var(--lila-hell); }
code { font: 600 .9em ui-monospace, Consolas, monospace; color: var(--lila-hell); background: var(--lila-flaeche); padding: 1px 6px; border-radius: 5px; }
:focus-visible { outline: 2px solid var(--lila-hell); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.bahn { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }

/* ------------------------------------------------------------ Knoepfe */
.knopf-haupt, .knopf-zweit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-m); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.knopf-haupt { background: var(--lila); color: #fff; }
.knopf-haupt:hover { background: var(--lila-hover); }
.knopf-zweit { background: var(--karte); color: var(--text); border: 1px solid var(--rand); }
.knopf-zweit:hover { background: var(--karte-2); border-color: var(--rand-2); }

/* ------------------------------------------------------------ Early Access */
.ea-streifen {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 20px; font-size: 14px; color: var(--text-2); text-decoration: none; text-align: center;
  background: var(--lila-flaeche); border-bottom: 1px solid rgba(139, 92, 255, .3);
}
.ea-streifen b { color: #fff; }
.ea-streifen span { color: var(--lila-hell); font-weight: 600; }
.ea-streifen:hover { background: rgba(139, 92, 255, .22); }

/* ------------------------------------------------------------ Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(11, 16, 34, .96); border-bottom: 1px solid var(--rand); }
.kopf .bahn { display: flex; align-items: center; gap: 24px; height: 68px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.marke img { width: 32px; height: 32px; border-radius: 9px; }
.marke b { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.marke span { font-size: 11px; font-weight: 600; color: var(--lila-hell); background: var(--lila-flaeche); padding: 2px 8px; border-radius: 99px; }
.kopf nav { display: flex; gap: 4px; margin-left: 12px; }
.kopf nav a { padding: 8px 12px; border-radius: var(--r-s); color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.kopf nav a:hover { background: var(--karte); color: var(--text); }
.kopf .anmelden { margin-left: auto; padding: 9px 16px; font-size: 14.5px; }

/* ------------------------------------------------------------ Buehne */
.buehne { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 48px; align-items: center; padding-block: 64px 40px; }
.pille-ea { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--lila-hell); background: var(--lila-flaeche); border: 1px solid rgba(139, 92, 255, .3); text-decoration: none; }
.pille-ea i { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 3px rgba(61, 214, 140, .2); }
/* Bewusst keine Riesenschrift und kein farbiges Einzelwort - das war die
   Vorlage, nach der jede generierte Startseite aussieht. */
.buehne h1 { margin: 16px 0 14px; font-size: clamp(30px, 3.3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.buehne-marke { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.buehne-logos { display: flex; gap: 4px; }
.buehne-fuss { margin: 18px 0 0; font-size: 14px; color: var(--leise); }
.buehne h1 em { font-style: normal; color: var(--lila-hell); }
.vorspann { margin: 0 0 26px; font-size: 17px; color: var(--text-2); max-width: 52ch; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.plattformen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--karte); border: 1px solid var(--rand); font-size: 14px; font-weight: 600; color: var(--text-2); }
.logo { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.logo svg { width: 12px; height: 12px; fill: #fff; }
.l-twitch { background: var(--twitch); } .l-kick { background: var(--kick); } .l-kick svg { fill: #072200; } .l-youtube { background: var(--youtube); } .l-discord { background: var(--discord); }

/* ------------------------------------------- Nachgebaute App-Oberflaeche */
.fenster-app { border-radius: var(--r-xl); border: 1px solid var(--rand-2); background: var(--tief); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.fenster-leiste { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: var(--leiste); border-bottom: 1px solid var(--rand); }
.fenster-leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--karte-3); }
.fenster-leiste span { margin-left: 10px; padding: 3px 12px; border-radius: 6px; background: var(--karte); font-size: 12px; color: var(--leise); }
/* Die Oberflaeche ist fuer 960 px gebaut und wird per Skript auf die
   verfuegbare Breite skaliert - so bleibt sie ein Bild und bricht nicht um. */
.skala { position: relative; width: 100%; aspect-ratio: 960 / 590; overflow: hidden; }
.skala > .mock { position: absolute; left: 0; top: 0; width: 960px; height: 590px; transform-origin: 0 0; transform: scale(var(--s, .6)); }

.mock { display: grid; grid-template-columns: 196px 1fr; font-size: 13px; line-height: 1.45; background: var(--bg); color: var(--text); }
.m-leiste { background: var(--leiste); border-right: 1px solid var(--rand); padding: 0 9px; display: grid; align-content: start; gap: 7px; }
.m-marke { display: flex; align-items: center; gap: 7px; height: 50px; margin: 0 -9px 3px; padding: 0 12px; border-bottom: 1px solid var(--rand); }
.m-marke img { width: 22px; height: 22px; border-radius: 6px; }
.m-marke b { font-size: 14px; font-weight: 800; }
.m-marke span { margin-left: auto; font-size: 8.5px; font-weight: 600; color: var(--lila-hell); background: var(--lila-flaeche); padding: 1px 6px; border-radius: 99px; }
.m-gruppe { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 3px; }
.m-titel { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--leiser); padding: 5px 7px 2px; }
.m-punkt { display: flex; align-items: center; gap: 8px; padding: 4px 7px; border-radius: 6px; color: var(--text-2); font-size: 12px; }
.m-punkt svg { width: 13px; height: 13px; fill: var(--leise); }
.m-punkt.an { background: var(--lila-flaeche); color: #fff; font-weight: 600; }
.m-punkt.an svg { fill: var(--lila-hell); }
.m-haupt { display: grid; grid-template-rows: 50px auto; min-width: 0; }
.m-oben { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--rand); }
.m-suche { display: flex; align-items: center; gap: 7px; width: 240px; padding: 6px 9px; border-radius: 8px; background: var(--karte); border: 1px solid var(--rand); color: var(--leise); font-size: 11px; }
.m-suche svg { width: 11px; height: 11px; fill: currentColor; }
.m-rund { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--karte); border: 1px solid var(--rand); position: relative; }
.m-rund svg { width: 13px; height: 13px; fill: var(--text-2); }
.m-rund b { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--lila); font-size: 8px; display: grid; place-items: center; border: 2px solid var(--bg); }
.m-ich { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 99px; background: var(--karte); border: 1px solid var(--rand); font-size: 11px; font-weight: 600; }
.m-ich i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #FF9A6B, #E3479A); display: grid; place-items: center; font-style: normal; font-size: 10px; }
.m-ich small { display: block; font-size: 8.5px; color: var(--leise); font-weight: 500; line-height: 1; }
.m-inhalt { padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
.m-kopf { display: flex; align-items: flex-end; justify-content: space-between; }
.m-kopf h4 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.1; }
.m-kopf p { margin: 1px 0 0; font-size: 10.5px; color: var(--leise); }
.m-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; color: #fff; background: rgba(242, 85, 90, .14); border: 1px solid rgba(242, 85, 90, .45); }
.m-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--rot); }
.m-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-kachel { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 10px; background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; }
.m-kz { grid-row: 1 / 4; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.m-kz svg { width: 14px; height: 14px; fill: #fff; }
.m-kachel span { font-size: 10px; color: var(--leise); }
.m-kachel strong { font-size: 18px; font-weight: 700; line-height: 1.1; }
.m-kachel small { font-size: 9px; color: var(--leise); white-space: nowrap; }
.m-kachel small b { color: var(--gruen); }
.m-spalten { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.m-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
.m-karte-kopf { display: flex; justify-content: space-between; padding: 9px 11px 5px; font-size: 12px; font-weight: 700; }
.m-karte-kopf a { font-size: 10px; color: var(--lila-hell); font-weight: 600; text-decoration: none; }
.m-tag { padding: 4px 11px 2px; font-size: 9px; color: var(--leiser); font-weight: 600; }
.m-ereignis { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 11px; font-size: 11px; }
.m-ev { width: 24px; height: 24px; border-radius: 7px; background: var(--karte-2); display: grid; place-items: center; }
.m-ev svg { width: 12px; height: 12px; fill: currentColor; }
.m-ereignis b { font-weight: 600; }
.m-ereignis span { color: var(--leise); }
.m-ereignis .logo { width: 14px; height: 14px; border-radius: 4px; }
.m-ereignis .logo svg { width: 8px; height: 8px; }
.m-ereignis time { font-size: 10px; color: var(--leise); }
.m-verbindung { display: flex; align-items: center; gap: 8px; padding: 5px 11px; font-size: 11px; }
.m-verbindung .logo { width: 16px; height: 16px; border-radius: 4px; }
.m-verbindung .logo svg { width: 9px; height: 9px; }
.m-verbindung em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--leise); display: flex; align-items: center; gap: 5px; }
.m-verbindung em i { width: 5px; height: 5px; border-radius: 50%; background: var(--gruen); }
.m-balken { display: flex; align-items: flex-end; gap: 7px; height: 64px; padding: 4px 11px 0; }
.m-balken i { flex: 1; border-radius: 3px 3px 0 0; background: #3A4A86; }
.m-balken i:last-child { background: var(--lila); }
.m-balken-unter { display: flex; justify-content: space-between; padding: 3px 11px 9px; font-size: 8.5px; color: var(--leiser); }

/* ------------------------------------------------------------ Fakten */
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-block: 8px 72px; }
.fakt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-l); }
.fakt .rund { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--karte-2); }
.fakt .rund svg { width: 18px; height: 18px; fill: var(--lila-hell); }
.fakt b { display: block; font-size: 15px; line-height: 1.25; }
.fakt span { font-size: 13.5px; color: var(--leise); }

/* ------------------------------------------------------------ Abschnitte */
.abschnitt { padding-block: 72px; border-top: 1px solid var(--rand); }
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lila-hell); }
.abschnitt h2 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.abschnitt-vor { margin: 0 0 36px; max-width: 62ch; font-size: 17px; color: var(--text-2); }
.mittig { text-align: center; }
.mittig .abschnitt-vor { margin-inline: auto; }

/* Funktionen - wie die Kacheln im Dashboard */
.funktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.funktion { padding: 18px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-l); transition: border-color .15s, background .15s; }
.funktion:hover { border-color: var(--rand-2); background: #141D3D; }
.fz { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; }
.fz svg { width: 19px; height: 19px; fill: #fff; }
.funktion h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.funktion p { margin: 0; font-size: 14.5px; color: var(--leise); line-height: 1.5; }
.plakette { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gelb); border: 1px solid rgba(245, 184, 61, .45); padding: 1px 6px; border-radius: 5px; }
.c-alerts { background: #F0444F; } .c-befehle { background: #5865F2; } .c-treue { background: #E0921A; } .c-klaenge { background: #E3479A; }
.c-umfrage { background: #1D9BD1; } .c-verlosung { background: #1FA35C; } .c-overlay { background: #14A396; } .c-statistik { background: #F06B2D; }

/* Vorfuehrung: Stream-Fenster und Regel */
.vorfuehrung { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.stream { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--rand-2);
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(139, 92, 255, .25), transparent 70%),
    radial-gradient(50% 45% at 20% 80%, rgba(29, 155, 209, .18), transparent 70%),
    linear-gradient(160deg, #161D3F, #0B1022); }
.stream-pille { position: absolute; top: 12px; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; background: rgba(8, 12, 27, .7); color: #fff; }
.stream-pille.links { left: 12px; display: flex; align-items: center; gap: 6px; }
.stream-pille.links i { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); }
.stream-pille.rechts { right: 12px; font-variant-numeric: tabular-nums; }
#alertplatz { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); width: min(78%, 460px); }
.alert { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 10px; border-radius: 14px; background: rgba(10, 14, 32, .94); border: 2px solid var(--akz, var(--lila)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akz, var(--lila)) 25%, transparent), 0 16px 40px rgba(0, 0, 0, .5); animation: rein .5s cubic-bezier(.2, 1.1, .3, 1) both; }
.alert.weg { animation: raus .3s ease-in both; }
.alert img { width: 58px; height: auto; margin: -10px 0 -6px; }
.alert-titel { font-size: clamp(15px, 2vw, 20px); font-weight: 800; line-height: 1.2; }
.alert-titel b { color: var(--akz, var(--lila-hell)); }
.alert-unter { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
@keyframes rein { from { opacity: 0; transform: translateY(-14px) scale(.94); } }
@keyframes raus { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
.chatzeile { position: absolute; left: 14px; bottom: 14px; max-width: 70%; padding: 6px 11px; border-radius: 8px; background: rgba(8, 12, 27, .75); font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.chatzeile.da { opacity: 1; transform: none; }
.chatzeile b { color: var(--lila-hell); margin-right: 6px; }
.regelspalte { display: grid; gap: 12px; align-content: start; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-l); }
.regel-karte { padding: 16px; }
.regel-karte > p { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.zeile { display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: var(--r-s); transition: background .2s, opacity .2s; }
.zeile + .zeile { margin-top: 4px; }
.zeile.an { background: var(--karte-2); }
.zeile.blass { opacity: .45; }
.wort { flex-shrink: 0; min-width: 64px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.w-wenn { color: #6CC4F0; } .w-nur { color: var(--gelb); } .w-dann { color: var(--gruen); }
.zeile-text { font-size: 15px; color: var(--text-2); }
.tasten { padding: 14px 16px; }
.tasten p { margin: 0 0 10px; font-size: 14px; color: var(--leise); }
.tasten-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.taste { padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--rand); background: var(--karte-2); color: var(--text); font: 600 14px var(--schrift); cursor: pointer; }
.taste:hover { border-color: var(--rand-2); }
.taste[aria-pressed="true"] { background: var(--lila-flaeche); border-color: var(--lila); color: #fff; }

/* Zeigen: Bild und Text im Wechsel */
.zeigen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 56px; }
.zeigen.gedreht .zeigen-bild { order: 2; }
.zeigen-text h2 { font-size: clamp(26px, 2.8vw, 34px); }
.zeigen-text > p { margin: 0 0 20px; font-size: 17px; color: var(--text-2); }
.haken { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.haken li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--text-2); }
.haken li i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: rgba(61, 214, 140, .15); margin-top: 1px; }
.haken li i svg { width: 12px; height: 12px; fill: var(--gruen); }

.tafel { padding: 18px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tafel-kopf b { font-size: 16px; }
.tafel-kopf span { font-size: 12.5px; color: var(--leise); }
.baustein { padding: 12px; border-radius: var(--r-m); background: var(--bg); border: 1px solid var(--rand); }
.baustein + .baustein { margin-top: 8px; }
.baustein .wort { display: block; margin-bottom: 8px; }
.feld-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feld-zeile + .feld-zeile { margin-top: 6px; }
.feld { padding: 7px 11px; border-radius: var(--r-s); background: var(--karte); border: 1px solid var(--rand); font-size: 14px; color: var(--text-2); }
.feld.ein { border-color: var(--lila); color: #fff; min-width: 90px; }
.einstellung { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 4px; }
.einstellung + .einstellung { border-top: 1px solid var(--rand); }
.einstellung b { display: block; font-size: 15px; }
.einstellung small { font-size: 13px; color: var(--leise); }
.regler { position: relative; width: 150px; height: 6px; border-radius: 3px; background: var(--karte-3); }
.regler::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pos); border-radius: 3px; background: var(--lila); }
.regler::after { content: ""; position: absolute; top: 50%; left: var(--pos); width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(139, 92, 255, .35); }
.regler-reihe { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.stat-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.stat-kachel { padding: 10px 12px; border-radius: var(--r-m); background: var(--bg); border: 1px solid var(--rand); }
.stat-kachel span { display: block; font-size: 12px; color: var(--leise); }
.stat-kachel b { font-size: 20px; font-variant-numeric: tabular-nums; }
.stat-kachel small { display: block; font-size: 11.5px; color: var(--gruen); font-weight: 600; }
.legende { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.stat-svg { width: 100%; height: auto; margin-top: 8px; }
.stat-svg text { fill: var(--leise); font: 500 11px var(--schrift); }

/* Beispiele */
.beispiele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.beispiel { padding: 18px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-l); }
.beispiel-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.beispiel-kopf .fz { width: 36px; height: 36px; margin: 0; }
.beispiel-kopf .fz svg { width: 16px; height: 16px; }
.beispiel h3 { margin: 0; font-size: 16px; }
.beispiel p { margin: 0; font-size: 14.5px; color: var(--leise); }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; text-align: left; }
.preis { position: relative; padding: 26px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-xl); display: flex; flex-direction: column; }
.preis.premium { border-color: rgba(139, 92, 255, .6); background: linear-gradient(180deg, #17204A, var(--karte) 60%); }
.preis-name { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.preis-name .plakette { color: var(--lila-hell); border-color: rgba(139, 92, 255, .5); }
.preis-betrag { margin: 14px 0 2px; font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.preis-betrag small { font-size: 16px; font-weight: 500; color: var(--leise); letter-spacing: 0; }
.preis-unter { margin: 0 0 20px; font-size: 14px; color: var(--leise); min-height: 22px; }
.preis .haken { flex: 1; }
.preis .knopf-haupt, .preis .knopf-zweit { width: 100%; }
.preis-fuss { margin: 16px auto 0; max-width: 880px; font-size: 13px; color: var(--leiser); text-align: center; }

/* Fahrplan */
.fahrplan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px; }
.fahrplan h2 { margin-bottom: 8px; }
.fahrplan p { margin: 0; color: var(--text-2); max-width: 70ch; }

/* Fragen */
.fragen { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; text-align: left; }
.frage { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-l); }
.frage summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; font-size: 16.5px; font-weight: 700; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; margin-top: -4px; }
.frage[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.frage[open] summary { color: #fff; }
.frage p { margin: 0; padding: 0 18px 18px; color: var(--text-2); font-size: 15.5px; }

/* Abschluss */
.abschluss { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 28px 32px; margin-block: 24px 72px; background: linear-gradient(135deg, #1A1F4D, var(--karte)); border: 1px solid rgba(139, 92, 255, .45); border-radius: var(--r-xl); }
.abschluss img { width: 96px; height: auto; }
.abschluss h2 { margin: 0 0 6px; font-size: 26px; }
.abschluss p { margin: 0; color: var(--text-2); }
.abschluss-knopf { display: grid; gap: 8px; justify-items: center; }
.abschluss-knopf small { font-size: 12.5px; color: var(--leise); text-align: center; max-width: 220px; }

/* Fuss */
.fuss { border-top: 1px solid var(--rand); padding-block: 28px 40px; }
.fuss .bahn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.fuss a { color: var(--text-2); text-decoration: none; font-size: 14px; }
.fuss a:hover { color: #fff; }
.fuss .marke { margin-right: 12px; }
.fuss .marke b { font-size: 16px; }
.fuss .marke img { width: 26px; height: 26px; }
.fuss-hinweis { width: 100%; font-size: 13px; color: var(--leiser); }

/* ------------------------------------------------------------ Schmal */
@media (max-width: 1040px) {
  .buehne { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px; }
  .funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorfuehrung, .zeigen { grid-template-columns: minmax(0, 1fr); }
  .zeigen.gedreht .zeigen-bild { order: 0; }
  .zeigen { gap: 28px; }
  .beispiele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf nav { display: none; }
}
@media (max-width: 680px) {
  .bahn { padding-inline: 16px; }
  .funktionen, .fakten, .beispiele, .preise { grid-template-columns: minmax(0, 1fr); }
  .stat-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abschluss { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 24px; }
  .abschluss img { margin: 0 auto; }
  .fahrplan { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .marke span { display: none; }
  .einstellung { grid-template-columns: minmax(0, 1fr); }
  .regler { width: 120px; }
  .abschnitt { padding-block: 56px; }
}