/* RunKlub Landingpage. Richtung „Loud and flat“ (tasteskill, Seed 1985007807). Farben und Schriften aus dem Cockpit */
:root {
  --bg: #000;
  --ink: #fff;
  --volt: #c6f24e;
  --surface: #111;
  --raised: #2a2a2a;
  --muted: #b4b4b4;
  --schwarz: #000;
  --linie: #1c1c1c;
  --dunkel-hover: #222;
  --woche-vorbei: #4a4a4a;
  --volt-hover: #d6fb6e;
  --art-tempo: #ff8a5c;
  --art-rad: #d6d6d6;
  --pink: #ef7186;
  --amber: #e5a93b;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, sans-serif;
  /* fünf Größen */
  --s1: clamp(72px, 9.8vw, 150px);
  --s2: clamp(34px, 4.6vw, 76px);
  --s3: clamp(22px, 1.7vw, 26px);
  --s4: 18px;
  --s5: 14px;
  --rand: clamp(20px, 2.2vw, 32px);
  /* Außenrand: wächst ab 1600 px mit, damit der Inhalt höchstens 1600 px breit ist (Kay 12.11.2026). Flächen bleiben randlos */
  --aussen: max(var(--rand), calc((100vw - 1600px) / 2 + var(--rand)));
  --abstand: clamp(120px, 14vw, 200px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 400 var(--s4)/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
/* <picture> nur als Hülle für WebP-Quellen: das img bleibt das Raster-Element */
picture { display: contents; }
::selection { background: var(--volt); color: var(--schwarz); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dunkel :focus-visible, .hell :focus-visible { outline-color: var(--schwarz); }
.zahl { font-variant-numeric: tabular-nums; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rand); padding-inline: var(--aussen); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: .9; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; background: var(--schwarz); color: var(--volt); font: 600 var(--s4)/1 var(--text); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s var(--ease), background-color .15s; }
.knopf:hover { background: var(--dunkel-hover); }
.knopf:active { transform: scale(.97); }
.knopf-volt { background: var(--volt); color: var(--schwarz); }
.knopf-volt:hover { background: var(--volt-hover); }

/* Kopf und Held */
.wortmarke { display: inline-flex; align-items: center; gap: 10px; font: 800 28px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
.wortmarke img { width: 34px; height: 34px; }
.nav { display: flex; gap: 28px; font-size: var(--s5); font-weight: 500; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .anmelden { margin-left: auto; }
.zeile { display: block; overflow: hidden; padding-bottom: .04em; }
.zeile > span { display: block; }

/* Kernstück: ein Bedienelement, groß */
.schalter-feld { position: relative; min-height: 92svh; overflow: hidden; padding: 72px var(--aussen); transition: background-color .35s var(--ease), color .35s; }
.schalter-feld[data-zustand="gut"] { background: var(--ink); color: var(--schwarz); }
.schalter-feld[data-zustand="nacht"] { background: var(--amber); color: var(--schwarz); }
.schalter-feld[data-zustand="wade"] { background: var(--pink); color: var(--schwarz); }
.schalter-feld[data-zustand="zeit"] { background: var(--raised); color: var(--ink); }
.schalter-text { position: relative; z-index: 2; max-width: 34rem; }
.schalter-text h2 { font-size: var(--s2); }
.schalter-text p { margin-top: 14px; font-size: var(--s4); max-width: 34ch; }
.schalter-text h2 { font-size: var(--s1); line-height: .85; }
.ergebnis { margin-top: 28px; font-size: var(--s3); line-height: 1.3; font-weight: 600; max-width: 22ch; }
.ergebnis small { display: block; margin-top: 8px; font-size: var(--s5); font-weight: 400; line-height: 1.45; max-width: 36ch; }
.segment { position: absolute; right: -9vw; bottom: -9svh; font-size: clamp(44px, 11vh, 120px); display: grid; grid-template-columns: repeat(2, auto); gap: .14em; padding: .14em; background: var(--schwarz); z-index: 1; }
.segment button { font: 800 1em/1 var(--display); letter-spacing: -0.02em; color: var(--ink); background: transparent; border: 0; padding: .35em .5em; cursor: pointer; text-align: left; transition: background-color .2s, color .2s, transform .15s var(--ease); }
.segment button small { display: block; font: 500 max(12px, .26em)/1.3 var(--text); letter-spacing: 0; margin-top: .4em; color: var(--muted); }
.segment button[aria-pressed="true"] { background: var(--volt); color: var(--schwarz); }
.segment button[aria-pressed="true"] small { color: var(--schwarz); }
.segment button:hover { background: var(--raised); }
.segment button[aria-pressed="true"]:hover { background: var(--volt); }
.segment button:active { transform: scale(.98); }

/* So geht's: Treppe */
.treppe { padding-block: var(--abstand); }

/* Regeln: Sätze mit Schaltern */
.kipp { width: 2.2em; height: 1.2em; font-size: clamp(34px, 4.6vw, 76px); border: 0; padding: 0; background: var(--raised); border-radius: 999px; position: relative; cursor: pointer; transition: background-color .25s; }
.kipp::after { content: ""; position: absolute; top: .12em; left: .12em; width: .96em; height: .96em; border-radius: 50%; background: var(--muted); transition: transform .3s var(--ease), background-color .25s; }
.kipp[aria-checked="true"] { background: var(--schwarz); }
.kipp[aria-checked="true"]::after { transform: translateX(1em); background: var(--volt); }
.regeln-kopf { padding: 0 var(--aussen) 40px; }
.regeln-kopf h2 { font-size: var(--s2); max-width: 16ch; }
.regeln-kopf p { margin-top: 14px; max-width: 46ch; }

/* Ziele: große Liste und Video */
.ziele { padding-top: calc(var(--abstand) * .55); }
.ziele h2 { grid-column: 1 / 13; font-size: var(--s1); line-height: .85; }
.liste { grid-column: 1 / 8; list-style: none; padding: 0; margin-top: 48px; }
.liste li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 0 26px; }
.liste li + li { margin-top: 4px; }
.liste b { font: 800 var(--s2)/1 var(--display); letter-spacing: -0.03em; }
.liste span { font-size: var(--s4); color: var(--muted); }
.liste li.not b { color: var(--volt); }
.ziele-bild { grid-column: 8 / 13; margin-top: 48px; position: relative; }
.ziele-bild video, .ziele-bild img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.ziele-unter { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rand); background: var(--surface); margin-top: 48px; margin-inline: calc(var(--aussen) * -1); padding: 40px var(--aussen); align-items: center; }
.ziele-unter img { grid-column: 1 / 5; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: rotate(2deg); }
.ziele-unter div { grid-column: 6 / 13; }
.ziele-unter h3 { font-size: var(--s2); }
.ziele-unter p { margin-top: 14px; max-width: 48ch; }

/* Belege: die gedruckte Karte */
.belege { background: var(--volt); color: var(--schwarz); overflow: hidden; padding-top: 96px; margin-top: var(--abstand); }
.belege .karte { margin-bottom: -96px; }
.karte { width: min(56vw, 860px); margin: 0 auto; background: var(--ink); padding: 56px 56px 160px; transform: rotate(-1.5deg); text-align: center; }
.karte h2 { font-size: var(--s2); }
.karte img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 70%; margin: 32px 0; }
.karte p { font-size: var(--s3); line-height: 1.7; }
.karte .fazit { margin-top: 28px; font: 800 var(--s2)/1 var(--display); letter-spacing: -0.02em; }
.karte .fazit + p { margin-top: 10px; font-size: var(--s4); line-height: 1.5; }

/* Preis: die Startnummer */
.preis { padding: var(--abstand) var(--aussen); }
.preis > h2 { font-size: var(--s2); margin-bottom: 40px; }
.ticket { position: relative; width: min(100%, 64vw); margin: 0 auto; aspect-ratio: 2.3 / 1; background: var(--ink); color: var(--schwarz); display: grid; grid-template-columns: 7fr 3fr; }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 70%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--bg); }
.ticket::before { top: -14px; }
.ticket::after { bottom: -14px; }
.ticket-haupt { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%276%27 height=%2718%27%3E%3Ccircle cx=%273%27 cy=%273%27 r=%273%27/%3E%3C/svg%3E"); background-size: 6px 18px; background-repeat: repeat-y; background-position: right top; }
.ticket-haupt h3 { font-size: clamp(36px, 4vw, 64px); line-height: 1; }
.ticket-haupt .nummer { margin-top: 22px; font: 800 clamp(80px, 13vw, 220px)/.82 var(--display); letter-spacing: -0.04em; color: var(--schwarz); }
.ticket-haupt ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: var(--s4); }
.ticket-stub { display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 32px; text-align: center; }
.ticket-stub b { font: 800 clamp(56px, 6vw, 96px)/1 var(--display); letter-spacing: -0.03em; }
.ticket-stub span { font-size: var(--s5); margin: 6px 0 24px; }
.ticket-stub .knopf { width: 100%; }

/* Fragen */
.fragen { padding: 0 var(--aussen) var(--abstand); }
.fragen-links { grid-column: 1 / 5; }
.fragen-links .klebt { position: sticky; top: 96px; }
.fragen-links h2 { font-size: var(--s2); }
.fragen-links img { margin-top: 28px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fragen-liste { grid-column: 5 / 13; display: grid; gap: 8px; align-content: start; }
.fragen-liste details { background: var(--surface); transition: background-color .2s; }
.fragen-liste summary { list-style: none; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; font-size: var(--s4); font-weight: 500; cursor: pointer; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform .25s var(--ease); }
.plus::after { transform: rotate(90deg); }
.fragen-liste details[open] { background: var(--volt); color: var(--schwarz); }
.fragen-liste details[open] .plus::after { transform: rotate(0deg); }
.fragen-liste details p { padding: 0 24px 24px; font-size: var(--s4); max-width: 52ch; }
.fragen-liste summary:hover { background: var(--raised); }
.fragen-liste details[open] summary:hover { background: transparent; }

/* Ein Wort ist der Knopf */
.los { display: block; position: relative; height: 60svh; background: var(--volt); color: var(--schwarz); text-decoration: none; overflow: hidden; }
.los:hover, .los:focus-visible { background: var(--schwarz); color: var(--volt); outline: none; }
.los p { position: absolute; top: 24px; left: var(--aussen); font-size: var(--s4); max-width: 30ch; }
.los > svg { position: absolute; top: 24px; right: var(--aussen); width: 48px; height: 48px; }
.los strong { position: absolute; left: var(--aussen); bottom: 24px; font: 800 clamp(96px, 27vw, 440px)/.78 var(--display); letter-spacing: -0.05em; white-space: nowrap; }

/* Schluss */
.schluss { background: var(--ink); color: var(--schwarz); min-height: 100svh; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.schluss .raster { padding-top: 96px; }
.einladung { grid-column: 1 / 8; }
.einladung h2 { font-size: clamp(48px, 5.6vw, 96px); }
.einladung .knopf { margin-top: 32px; }
.schluss-links { grid-column: 10 / 13; list-style: none; padding: 0; display: grid; gap: 0; align-content: start; font-size: var(--s4); }
.schluss-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.schluss-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.schluss-fuss { margin-top: auto; display: flex; justify-content: space-between; gap: 24px; padding: 0 var(--aussen) 12px; font-size: var(--s5); line-height: 1.5; }
.schluss-fuss p:first-child { max-width: 60ch; }
.riesig { font: 800 min(28vw, 448px)/.8 var(--display); letter-spacing: -0.05em; white-space: nowrap; padding-left: var(--aussen); transform: translateY(18%); margin-bottom: -4vw; }

/* Auftritt */
.auf { transform: translateY(24px); transition: transform .7s var(--ease); }
.auf.da { transform: none; }
/* Nur Bewegung aus dem sichtbaren Zustand, nie über Transparenz (Kays Regel: Vorschauen zeigen sonst leere Flächen) */
@keyframes hoch { from { transform: translateY(18px); } to { transform: none; } }
.ohne-js .auf { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .auf { transform: none; opacity: 1; }
}

/* Tablet */
@media (max-width: 1100px) {
  .liste, .ziele-bild { grid-column: 1 / 13; }
  .liste { columns: 2; column-gap: var(--rand); }
  .liste li { break-inside: avoid; }
  .karte { width: 80%; }
  .ticket { width: 100%; aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); }
  .ticket::before, .ticket::after { left: auto; top: auto; margin: 0; bottom: 186px; }
  .ticket::before { left: -14px; }
  .ticket::after { right: -14px; }
  .ticket-haupt { background-position: left bottom; background-size: 18px 6px; background-repeat: repeat-x; padding: 32px 32px 40px; gap: 24px; }
  .ticket-haupt ul { grid-template-columns: minmax(0, 1fr); }
  .ticket-stub { padding: 40px 32px 32px; min-height: 200px; }
  .schluss { min-height: 0; }
  .schluss-fuss { margin-top: 96px; }
  .fragen-links img { aspect-ratio: 1 / 1; }
  /* Tablet: Kacheln direkt unter dem Text, sonst steht dazwischen eine leere halbe Seite (Audit 12.11.2026) */
  .schalter-feld { min-height: 0; }
  .segment { position: relative; right: auto; bottom: auto; margin-top: 48px; width: max-content; max-width: 100%; font-size: clamp(36px, 6.4vw, 64px); }
  .ziele-bild video { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Handy */
@media (max-width: 760px) {
  :root { --rand: 20px; --abstand: 104px; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .raster > * { grid-column: 1 / -1 !important; }
  .nav { position: absolute; top: 24px; right: var(--rand); gap: 0; }
  .nav a:not(.anmelden) { display: none; }
  .schalter-feld { min-height: 0; padding-top: 56px; }
  .segment { right: auto; left: 0; bottom: auto; margin-top: 40px; width: 100%; font-size: 6.6vw; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste li { grid-template-columns: 1fr; gap: 2px; }
  .liste span { text-align: left; }
  .ziele h2 { font-size: 17vw; }
  .ziele-bild { margin: 40px calc(var(--rand) * -1) 0; }
  .ziele-bild video { min-height: 0; aspect-ratio: 16 / 10; }
  .ziele-unter { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ziele-unter img, .ziele-unter div { grid-column: 1 / -1; }
  .karte { width: 92%; padding: 28px; transform: rotate(-1deg); aspect-ratio: auto; }
  .karte p { font-size: var(--s4); }
  .belege { height: auto; max-height: 160svh; padding-bottom: 0; }
  .ticket-haupt h3 { font-size: 9vw; }
  .liste { columns: 1; }
  .ticket-stub b { font-size: 16vw; }
  .fragen-links .klebt { position: static; }
  .fragen-links h2 { font-size: 9vw; }
  .fragen-links img { display: none; }
  .fragen-liste { margin-top: 28px; }
  .fragen-liste summary { font-size: 18px; min-height: 64px; padding: 16px 20px; }
  .fragen-liste details p { padding: 0 20px 20px; font-size: var(--s4); }
  .los { height: 46svh; }
  .los p { font-size: var(--s4); max-width: 70%; }
  .los > svg { width: 32px; height: 32px; }
  .los strong { font-size: 25vw; }
  .einladung h2 { font-size: 11vw; }
  .einladung .knopf { width: 100%; }
  .schluss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; font-size: var(--s5); }
  .schluss-fuss { flex-direction: column; font-size: var(--s5); margin-top: 72px; }
  .riesig { font-size: 34vw; }
}

/* Großer Bildschirm (Kay 12.11.2026: „auf dem großen Bildschirm noch nicht gut“): Foto früher und größer,
   Kacheln ganz im Bild, Belege zweispaltig statt schmalem Streifen */
@media (min-width: 1101px) {
  .segment { right: var(--aussen); bottom: var(--rand); font-size: clamp(40px, 4vw, 84px); }
  .ziele-unter img { grid-column: 1 / 7; }
  .ziele-unter div { grid-column: 8 / 13; }
  .karte { width: min(86vw, 1400px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; text-align: left; padding: 64px 64px 150px; }
  .karte h2 { grid-column: 1 / -1; }
  .karte img { grid-column: 1; grid-row: 2 / span 3; aspect-ratio: 4 / 3; margin: 36px 0 0; }
  .karte p { grid-column: 2; }
  .karte p:first-of-type { margin-top: 36px; }
  .ticket { width: min(100%, 1240px); }
}

/* Formen aus der Marke (Kay 12.11.2026): Renn-Sechseck, Wochenleiste aus dem Plan, Lochungen der Startnummer, Pfeil aus dem Zeichen.
   Nur Schmuck, aria-hidden. Erst ab 1101 px, am Handy bleibt die Seite ruhig */
.form { display: none; pointer-events: none; }
.form-linie { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.form-voll { fill: currentColor; }
.form text { font: 800 40px var(--display); letter-spacing: -0.03em; }
.karte { position: relative; }
.karte .loch { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--volt); }
.karte .loch:nth-of-type(1) { top: 20px; left: 20px; } .karte .loch:nth-of-type(2) { top: 20px; right: 20px; }
.karte .loch:nth-of-type(3) { bottom: 20px; left: 20px; } .karte .loch:nth-of-type(4) { bottom: 20px; right: 20px; }
@media (min-width: 1101px) {
  .form { display: block; }
  /* Held: Renn-Sechseck unten links unter dem Satz, schwebt langsam */
  /* Treppe: die Wochenleiste aus dem Plan, oben rechts gegenüber der ersten Stufe */
  .treppe { position: relative; }
  /* Ziele: vier Renn-Sechsecke neben der Überschrift */
  .form-ziele { grid-column: 8 / 13; grid-row: 1; align-self: end; justify-self: end; display: flex; gap: 14px; color: var(--volt); }
  .form-ziele svg { width: clamp(76px, 7vw, 120px); }
  .form-ziele text { fill: var(--volt); font-size: 30px; }
  .form-ziele .form-voll + text { fill: var(--schwarz); }
  .ziele h2 { grid-row: 1; }
  /* Starten: der Pfeil aus dem Zeichen, riesig rechts, kippt beim Überfahren */
  .los .form-pfeil { position: absolute; right: var(--aussen); top: 50%; height: 120%; width: auto; transform: translateY(-50%); fill: currentColor; transition: transform .6s var(--ease); }
  .los:hover .form-pfeil, .los:focus-visible .form-pfeil { transform: translateY(-50%) translate(4%, -4%); }
}

/* Startnummer-Vorschau bei „Heute: …“: zeigt, was der Plan aus dem Zustand macht (Kay 12.11.2026: „teilweise sehr leer“) */
.nummer-vorschau { position: relative; z-index: 2; margin-top: 32px; width: min(100%, 460px); padding: 22px 26px 20px; background: var(--volt); color: var(--schwarz); transform: rotate(-1.5deg); border-radius: 16px; }
.nummer-vorschau[data-art="tempo"] { background: var(--art-tempo); }
.nummer-vorschau[data-art="locker"] { background: var(--volt); }
.nummer-vorschau[data-art="rad"] { background: var(--art-rad); }
.nummer-vorschau[data-art="frei"] { background: var(--schwarz); color: var(--ink); }
.nummer-vorschau > i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.nummer-vorschau > i:nth-of-type(1) { top: 11px; left: 11px; } .nummer-vorschau > i:nth-of-type(2) { top: 11px; right: 11px; }
.nummer-vorschau > i:nth-of-type(3) { bottom: 11px; left: 11px; } .nummer-vorschau > i:nth-of-type(4) { bottom: 11px; right: 11px; }
.nv-zeile { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 500 13px/1.3 var(--text); }
.nv-gross { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 4px; }
.nv-wort { font: 800 clamp(64px, 6.4vw, 104px)/.82 var(--display); letter-spacing: -0.03em; text-transform: uppercase; }
.nv-zahl { text-align: right; }
.nv-zahl b { display: block; font: 800 clamp(64px, 6.4vw, 104px)/.82 var(--display); letter-spacing: -0.03em; }
.nv-zahl small { display: block; margin-top: 4px; font: 500 14px var(--text); }
.nv-detail { margin-top: 14px; padding-top: 10px; border-top: 2px solid currentColor; font: 500 15px/1.4 var(--text); }
.nummer-vorschau.wechsel { animation: nummer-wechsel .45s var(--ease); }
@keyframes nummer-wechsel { from { transform: rotate(-4deg) scale(.94); } to { transform: rotate(-1.5deg) scale(1); } }

/* Fuß: die App selbst zeigen statt weißer Fläche */
.app-blick { grid-column: 1 / -1; display: flex; justify-content: center; margin: 72px 0 0; align-items: flex-end; }
.app-blick figure { position: relative; flex: 0 1 260px; padding: 8px; border-radius: 34px; background: var(--raised); }
.app-blick figure + figure { margin-left: -4%; }
.app-blick figure:nth-child(2) { z-index: 1; transform: translateY(-28px); }
.app-blick figure:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.app-blick figure:nth-child(3) { transform: rotate(4deg) translateY(10px); }
.app-blick img { display: block; width: 100%; height: auto; border-radius: 27px; }
.app-blick figcaption { padding: 10px 0 4px; text-align: center; color: var(--ink); font: 600 14px var(--text); }

@media (min-width: 1101px) {
  .nummer-vorschau { position: absolute; top: 88px; right: var(--aussen); margin-top: 0; width: min(38vw, 560px); padding: 28px 32px 24px; }
}
@media (max-width: 760px) {
  .app-blick { grid-column: 1 / -1; grid-row: auto; margin: 40px 0 8px; gap: 10px; }
  .app-blick figure { flex: 1 1 0; min-width: 0; padding: 5px; border-radius: 20px; transform: none !important; }
  .app-blick img { border-radius: 15px; }
  .app-blick figcaption { font-size: 12px; padding-top: 6px; }
  .app-blick figure + figure { margin-left: 0; }
  .app-blick figure:nth-child(2) { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nummer-vorschau.wechsel { animation: none; } }

/* Handy und Tablet: Startnummer direkt unter dem Satz, das Ergebnis mit Begründung darunter (sonst stünde es wie ein Kicker über der Nummer) */
@media (max-width: 1100px) {
  .schalter-feld { display: flex; flex-direction: column; }
  .schalter-text { display: contents; }
  .schalter-text h2 { order: 1; }
  .schalter-text p:not(.ergebnis) { order: 2; }
  .nummer-vorschau { order: 3; }
  .ergebnis { order: 4; }
  .segment { order: 5; }
}

/* Treppe mit App: Stufen links enger gestaffelt, rechts die drei Handys als Fächer */
@media (min-width: 1101px) {
  .treppe .app-blick { grid-column: 8 / 13; grid-row: 1; align-self: center; margin: 0; }
}

/* Ablauf als Liste mit Takt (Kays Wahl A1, 12.11.2026) */
:root { --art-lang: #5ec8e5; }
.treppe { align-items: center; }
.ablauf { grid-column: 1 / 8; grid-row: 1; list-style: none; padding: 0; margin: 0; }
.ablauf li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 24px; padding: 30px 0; border-top: 1px solid var(--raised); }
.ablauf li:last-child { border-bottom: 1px solid var(--raised); }
.ablauf li > div { grid-column: 2; grid-row: 1; }
.takt { grid-column: 1; grid-row: 1; padding-top: 6px; font: 700 italic 22px/1.1 var(--display); color: var(--volt); }
.ablauf h2, .ablauf h3 { font-size: clamp(30px, 2.8vw, 44px); line-height: 1; }
.ablauf p { margin-top: 10px; max-width: 46ch; color: var(--muted); font-size: 16px; }

/* Regeln als ruhige Zeilen, die Startnummer zeigt die Folge (Kays Wahl B2) */
.regeln { list-style: none; padding: 0 var(--aussen); margin: 0; }
.regel { display: grid; grid-template-columns: minmax(0, 1fr) 15em auto; gap: 48px; align-items: center; padding: 26px 0; border-top: 1px solid var(--raised); }
.regel:last-child { border-bottom: 1px solid var(--raised); }
.regel h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: var(--muted); transition: color .25s var(--ease); }
.regel.an h3 { color: var(--ink); }
.regel p { margin-top: 8px; font-size: 16px; color: var(--muted); max-width: 60ch; }
.regel-folge { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.folge-satz { font: 600 13px/1.35 var(--text); color: var(--muted); }
.regel .kipp { font-size: 28px; }
.regel .kipp[aria-checked="true"] { background: var(--volt); }
.regel .kipp[aria-checked="true"]::after { background: var(--schwarz); }
.mini { position: relative; display: inline-flex; align-items: flex-end; justify-content: space-between; gap: 14px; width: 210px; padding: 16px 18px 14px; border-radius: 12px; color: var(--schwarz); background: var(--volt); transform: rotate(-2deg); }
.mini::before, .mini::after { content: ""; position: absolute; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mini::before { left: 8px; } .mini::after { right: 8px; }
.mini b { font: 800 40px/.85 var(--display); text-transform: uppercase; letter-spacing: -0.02em; }
.mini > span { text-align: right; }
.mini em { display: block; font: 800 34px/.85 var(--display); font-style: normal; }
.mini small { display: block; margin-top: 3px; font: 600 12px var(--text); }
.mini[data-art="tempo"] { background: var(--art-tempo); }
.mini[data-art="lang"] { background: var(--art-lang); }
.mini[data-art="rad"] { background: var(--art-rad); }
.mini.wechsel { animation: mini-wechsel .4s var(--ease); }
@keyframes mini-wechsel { from { transform: rotate(-6deg) scale(.92); } to { transform: rotate(-2deg) scale(1); } }

/* Heute zweispaltig: Startnummer und Knöpfe rechts zusammen (Kays Wahl C1) */
@media (min-width: 1101px) {
  .schalter-feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; min-height: 0; padding: 96px var(--aussen); }
  .schalter-text { max-width: none; }
  .schalter-feld .nummer-vorschau { position: relative; top: auto; right: auto; width: 100%; margin: 0; padding: 28px 32px 24px; }
  .schalter-feld .segment { position: static; margin-top: 36px; width: 100%; font-size: 38px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .heute-rechts { display: contents; }
  .ablauf { grid-column: 1 / -1; }
  .treppe .app-blick { grid-row: auto; }
}
@media (max-width: 760px) {
  .ablauf li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .ablauf li > div { grid-column: 1; }
  .takt { grid-column: 1; grid-row: 2; padding-top: 0; font-size: 18px; }
  .ablauf h2, .ablauf h3 { font-size: 30px; }
  .regel { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; padding: 22px 0; }
  .regel-folge { grid-column: 1 / -1; grid-row: 2; }
  .regel h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .mini.wechsel { animation: none; } }

/* Ablauf und Regeln klar getrennt, weniger Text (Kays Wahl V2, 12.11.2026) */
.ablauf li { grid-template-columns: 9em minmax(0, 1fr); gap: 28px; align-items: baseline; }
.takt { padding-top: 0; font-size: 34px; line-height: 1; }
.ablauf h2, .ablauf h3 { font-size: clamp(32px, 3vw, 48px); }
.trenner { display: block; height: clamp(240px, 28vw, 420px); overflow: hidden; }
.trenner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.regeln-feld { background: var(--volt); color: var(--schwarz); padding-block: clamp(80px, 9vw, 130px); }
.regeln-feld .regeln-kopf p { color: var(--schwarz); }
.regel { grid-template-columns: minmax(0, 1fr) 22em auto; padding: 22px 0; border-color: rgba(0, 0, 0, .25); }
.regel:last-child { border-color: rgba(0, 0, 0, .25); }
.regel h3, .regel.an h3 { color: var(--schwarz); }
.regel:not(.an) h3, .regel:not(.an) .folge-satz { color: #4d5b20; }
.regel-folge { flex-direction: row; align-items: center; gap: 18px; }
.folge-satz { color: var(--schwarz); font-size: 14px; }
.mini { flex: 0 0 auto; width: 170px; padding: 14px 16px 12px; border-radius: 11px; box-shadow: inset 0 0 0 2px var(--schwarz); }
.mini[data-art="locker"] { background: var(--ink); }
.mini b { font-size: 32px; } .mini em { font-size: 28px; } .mini small { font-size: 12px; }
.regel .kipp { background: rgba(0, 0, 0, .18); }
.regel .kipp::after { background: var(--ink); }
.regel .kipp[aria-checked="true"] { background: var(--schwarz); }
.regel .kipp[aria-checked="true"]::after { background: var(--volt); }
.regeln-feld :focus-visible { outline-color: var(--schwarz); }
@media (max-width: 760px) {
  .ablauf li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .takt { font-size: 24px; }
  .ablauf h2, .ablauf h3 { font-size: 30px; }
  .regel { grid-template-columns: minmax(0, 1fr) auto; }
  .regel-folge { gap: 14px; }
  .mini { width: 150px; }
}
@media (max-width: 1100px) {
  .regel { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; }
  .regel-folge { grid-column: 1 / -1; grid-row: 2; }
}
.mini { width: auto; min-width: 170px; }
.ablauf li { grid-template-columns: 11em minmax(0, 1fr); }
@media (max-width: 760px) { .mini { min-width: 0; } .ablauf li { grid-template-columns: minmax(0, 1fr); } }

/* Regeln starten aus, inaktive Zeilen bleiben schwarz (Kay 12.11.2026) */
.regel:not(.an) h3, .regel:not(.an) .folge-satz { color: var(--schwarz); }

/* Animationen platziert (12.11.2026): Video als Trenner, „Weg zum Rennen“ bei den Zielen, Bahn-Silhouette im Starten-Band */
.trenner video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.weg-rennen { grid-column: 8 / 13; margin-top: 48px; align-self: start; }
.weg-rennen svg { display: block; width: 100%; height: auto; overflow: visible; }
.weg-rennen figcaption { margin-top: 14px; font-size: var(--s5); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.wr-balken rect { fill: var(--raised); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .6s var(--ease), fill .25s; }
.wr-balken rect.steht { transform: scaleY(1); }
.wr-balken rect.da { fill: var(--volt); }
.wr-kurve { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.wr-km text { fill: var(--ink); font: 700 18px var(--display); }
.wr-achse text { fill: var(--muted); font: 600 13px var(--text); }
.wr-hex { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease); }
.wr-hex path { fill: none; stroke: var(--volt); stroke-width: 4; transition: fill .3s; }
.wr-hex text { fill: var(--volt); font: 800 26px var(--display); }
.wr-hex.voll { transform: scale(1.1); }
.wr-hex.voll path { fill: var(--volt); }
.wr-hex.voll text { fill: var(--schwarz); }
.wr-punkt { fill: var(--ink); }

.ziel-knopf { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ziel-knopf b { transition: color .2s var(--ease); }
.liste li.not .ziel-knopf b { color: var(--ink); }
.ziel-knopf:hover b, .liste li.not .ziel-knopf:hover b { color: var(--volt-hover); }
.ziel-knopf[aria-pressed="true"] b, .liste li.not .ziel-knopf[aria-pressed="true"] b { color: var(--volt); }

.los > svg.los-bahn { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.los-bahn path { fill: none; stroke: currentColor; stroke-width: 3; stroke-opacity: .22; }
.los-bahn circle { fill: currentColor; }

@media (max-width: 1100px) { .weg-rennen { grid-column: 1 / 13; } }
@media (max-width: 760px) { .weg-rennen { margin-top: 32px; } }
@media (prefers-reduced-motion: reduce) { .wr-balken rect { transition: none; } }

/* Hero: Video, Bahn und Live-Startnummer (Kay 12.11.2026: „eine Kombi aus allen 3“) */
.buehne { position: relative; min-height: 100svh; overflow: hidden; background: var(--schwarz); color: var(--ink); display: flex; flex-direction: column; }
.buehne-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .35) 100%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 22%); }
.buehne-kopf, .buehne-inhalt { position: relative; z-index: 2; }
.buehne-kopf { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--aussen) 0; }
.buehne-kopf .nav { flex: 1; justify-content: flex-end; }
.buehne-kopf .nav .anmelden { margin-left: 28px; }
.buehne-inhalt { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px var(--aussen) 64px; }
.buehne h1 { font-size: var(--s1); line-height: .84; letter-spacing: -0.04em; }
.buehne h1 span { color: var(--volt); }
.buehne-text p { margin-top: 26px; max-width: 34ch; font-size: var(--s3); line-height: 1.35; }
.buehne-text .knopf { margin-top: 30px; }
.buehne-bahn { position: relative; container-type: inline-size; width: 100%; max-width: 760px; justify-self: end; aspect-ratio: 720 / 470; }
.buehne-bahn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.buehne-bahn path, .buehne-bahn line { fill: none; stroke: var(--volt); stroke-width: 3; }
.buehne-bahn path.fein { stroke-width: 2; stroke-opacity: .45; }
.buehne-bahn line { stroke: var(--ink); stroke-width: 5; }
.buehne-bahn .komet { stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 150 99999; animation: komet 8s linear infinite; }
@keyframes komet { to { stroke-dashoffset: calc(var(--L, 2000) * -1px); } }
.buehne-mitte { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4cqw; }
.buehne-nummer { position: relative; width: 50cqw; padding: 3.6cqw 4cqw 3cqw; border-radius: 2.2cqw; background: var(--volt); color: var(--schwarz); transform: rotate(-2deg); transition: background-color .35s var(--ease); }
.buehne-nummer[data-art="tempo"] { background: var(--art-tempo); }
.buehne-nummer[data-art="lang"] { background: var(--art-lang, #5ec8e5); }
.buehne-nummer[data-art="frei"] { background: var(--ink); }
.buehne-nummer > i { position: absolute; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: currentColor; }
.buehne-nummer > i:nth-of-type(1) { top: 1.4cqw; left: 1.4cqw; } .buehne-nummer > i:nth-of-type(2) { top: 1.4cqw; right: 1.4cqw; }
.buehne-nummer > i:nth-of-type(3) { bottom: 1.4cqw; left: 1.4cqw; } .buehne-nummer > i:nth-of-type(4) { bottom: 1.4cqw; right: 1.4cqw; }
.bn-reihe { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; }
.bn-reihe b { font: 800 11.5cqw/.82 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.bn-reihe span { text-align: right; }
.bn-reihe strong { display: block; font: 800 10.5cqw/.82 var(--display); }
.bn-reihe small { display: block; margin-top: .6cqw; font: 600 max(12px, 1.9cqw) var(--text); }
.bn-zeile { display: flex; justify-content: space-between; gap: 2cqw; margin-top: 1.8cqw; padding-top: 1.4cqw; border-top: 2px solid currentColor; font: 500 max(12px, 2cqw) var(--text); }
.buehne-nummer.wechsel { animation: blatt .55s var(--ease); }
@keyframes blatt { from { transform: rotate(-2deg) perspective(600px) rotateX(70deg); } to { transform: rotate(-2deg) perspective(600px) rotateX(0); } }
.buehne-woche { display: grid; grid-template-columns: repeat(7, 6.2cqw); gap: 1cqw; }
.buehne-woche span { display: grid; place-items: center; height: 6.2cqw; border: 2px solid rgba(255, 255, 255, .7); border-radius: 1.2cqw; font: 800 max(12px, 2.6cqw) var(--display); transition: background-color .3s, color .3s, transform .3s var(--ease); }
.buehne-woche span.jetzt { background: var(--volt); border-color: var(--volt); color: var(--schwarz); transform: translateY(-.8cqw); }

@media (max-width: 1100px) {
  .buehne-inhalt { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .buehne-bahn { justify-self: center; }
}
@media (max-width: 760px) {
  .buehne { min-height: 0; }
  .buehne-kopf { padding-top: 16px; }
  .buehne-inhalt { padding: 56px var(--rand) 40px; }
  .buehne h1 { font-size: 17vw; }
  .buehne-text p { font-size: var(--s4); }
  .buehne-text .knopf { width: 100%; }
  .buehne::after { background: linear-gradient(180deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .55) 100%); }
  .buehne-bahn { margin-inline: -8px; }
}
@media (prefers-reduced-motion: reduce) { .buehne-bahn .komet, .buehne-nummer.wechsel { animation: none; } }
@media (max-width: 760px) {
  .buehne-woche { grid-template-columns: repeat(7, 36px); gap: 6px; }
  .buehne-woche span { height: 36px; border-radius: 8px; font-size: 15px; }
  .bn-reihe small, .bn-zeile { font-size: 13px; }
}
@media (max-width: 760px) {
  .buehne-nummer { width: 76cqw; padding: 18px 20px 14px; }
  .bn-zeile { white-space: nowrap; }
  .buehne-woche { grid-template-columns: repeat(7, 34px); gap: 5px; }
  .buehne-woche span { height: 34px; }
}