/* Viktor Kuljkin Tennistraining, gemeinsames Stylesheet.

   Handschrift (Philipp, 27.09.2026): tiefes Platzgrün als Grund, Ballgelb als Signal, Sandrot
   als zweiter Akzent, und der Platz in Ziegelrot, der gegen das Dunkelgrün knallt. Helle
   Papierbänder setzen den Gegenschnitt. Plakatschrift Anton, harte Kanten, Kreidelinien,
   kein Verlauf im Vordergrund, kein Weichzeichner, kein border-radius.

   ⚠ Das Aufdecken darf NICHT über einen IntersectionObserver ausgelöst werden. clip-path
   klappt das Element auf Höhe null, und ein null Pixel großes Element meldet der Observer als
   unsichtbar: es würde nie aufgedeckt. vk.js misst deshalb selbst im Bild (27.09.2026). */

:root {
  --nacht: #14231a;
  --nacht-2: #1b2f22;
  --nacht-3: #0e1a13;
  --papier: #f4efe6;
  --ball: #d9f43b;
  --sand: #c4562f;          /* nur für Flächen und große Schrift */
  /* Sandrot als Schriftfarbe reicht in beide Richtungen nicht: auf Dunkelgrün 3,67:1, auf
     Papier 3,89:1. Deshalb je Grund ein eigener Ton, beide über 4,5:1. */
  --sand-schrift: #dc7048;  /* auf dunklem Grund, 5,02:1 */
  --sand-schrift-hell: #ae4522; /* auf Papier, 4,99:1 */
  --ziegel: #c26a45;
  --kreide: #ffffff;
  --text: #f4efe6;
  --matt: #9fb0a4;
  --matt-hell: #56655b;
  --linie: rgba(244, 239, 230, 0.18);
  --linie-hell: rgba(20, 35, 26, 0.16);
  --pad: clamp(20px, 5vw, 60px);
  --bund: 1180px;
  --kopf: 78px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--nacht); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--nacht); color: var(--text);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* Ein eigenes display schlägt das hidden-Attribut. Bei .knopf mit inline-flex hieß das: der
   Abbrechen-Knopf stand da, obwohl er verborgen sein sollte, und ohne Javascript erschien ein
   Aufstellen-Knopf, der nichts tut (Philipps Foto, 28.09.2026). */
[hidden] { display: none !important; }

/* Sichtbarer Fokus überall. Der Standardring des Browsers ist auf Ballgelb und auf dem
   Papierband kaum zu sehen, in Safari ohnehin sehr dezent. */
:focus-visible { outline: 3px solid var(--ball); outline-offset: 2px; border-radius: 1px; }
.band-hell :focus-visible, .band-sand :focus-visible, .plakat :focus-visible,
.tarif-hervor :focus-visible { outline-color: var(--nacht); }

/* Sprunglink: erster Tabstopp, sichtbar nur wenn er den Fokus hat. */
.sprung {
  position: absolute; left: 12px; top: -100px; z-index: 80;
  padding: 12px 20px; background: var(--ball); color: var(--nacht);
  font: 700 14px 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: top .15s ease;
}
.sprung:focus { top: 12px; }
.bund { max-width: var(--bund); margin: 0 auto; padding: 0 var(--pad); }

/* Verweise im Fließtext. Angesprochen werden nur Links OHNE Klasse, damit Knöpfe, Karten und
   Navigation ihre eigenen Farben behalten. Ohne diese Regel malt der Browser sie blau, und auf
   dem dunklen Grund ist das nicht zu lesen (Philipp, 27.09.2026). */
a:not([class]) { color: var(--ball); text-underline-offset: 3px; }
a:not([class]):hover { color: var(--kreide); }
.band-hell a:not([class]), .band-sand a:not([class]) { color: var(--sand-schrift-hell); }
.band-sand a:not([class]) { color: var(--nacht); }

/* ---------- Bänder: der Rhythmus der Seite ---------- */
.band { position: relative; padding: clamp(60px, 10vh, 130px) 0; }
.band-hell { background: var(--papier); color: var(--nacht); }
.band-hell .vor { color: var(--sand-schrift-hell); }
.band-hell .fliess, .band-hell .klein { color: var(--matt-hell); }
.band-sand { background: var(--sand); color: var(--kreide); }
.band-tief { background: var(--nacht-2); }

/* ---------- Typografie ---------- */
.riese, .gross, .mittel {
  font-family: Anton, 'Work Sans', Impact, sans-serif;
  font-weight: 400; text-transform: uppercase;
  line-height: 0.98; letter-spacing: -0.005em; margin: 0;
}
.riese { font-size: clamp(3.2rem, 12vw, 8.6rem); line-height: 0.93; letter-spacing: -0.018em; }
.gross { font-size: clamp(2.2rem, 6.2vw, 4.4rem); line-height: 0.98; }
.mittel { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.riese em, .gross em, .mittel em { font-style: normal; color: var(--ball); }
.band-hell .riese em, .band-hell .gross em, .band-hell .mittel em { color: var(--sand-schrift-hell); }
.band-sand .gross em, .band-sand .riese em { color: var(--nacht); }
.mitte { text-align: center; }

.vor {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ball);
}
.vor::before { content: ""; width: 34px; height: 2px; background: currentColor; flex: none; }
.vor.mitte { justify-content: center; }

.fliess { margin: 22px 0 0; max-width: 60ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--matt); }
.fliess strong { font-weight: 600; color: var(--text); }
.band-hell .fliess strong { color: var(--nacht); }
.fliess.mitte { margin-left: auto; margin-right: auto; }
.klein { margin: 20px 0 0; font-size: 14px; color: var(--matt); }
.klein.mitte { text-align: center; max-width: 66ch; margin-left: auto; margin-right: auto; }
/* Kleine Abstandshelfer, damit im HTML kein style-Attribut nötig ist: die
   Content-Security-Policy verbietet Inline-Styles, und das soll sie auch. */
.eng { margin-top: 0 !important; }
.luft-klein { margin-top: 14px; }
.luft-mittel { margin-top: 18px; }

/* ---------- Kopfleiste ---------- */
.leiste { position: sticky; top: 0; z-index: 60; background: var(--nacht); border-bottom: 1px solid var(--linie); transition: background .25s ease; }
.leiste.is-fest { background: rgba(20, 35, 26, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.leiste-in { max-width: var(--bund); margin: 0 auto; padding: 0 var(--pad); height: var(--kopf); display: flex; align-items: center; gap: 20px; }
.leiste-marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
/* Das Zeichen trägt die Marke, es darf groß sein. Die dunkle Fassung verschwindet auf
   dem grünen Grund, deshalb überall die helle (Philipp, 27.09.2026). */
.leiste-marke picture { display: flex; }
.leiste-marke img { height: 50px; width: auto; }
.leiste-name { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: .02em; line-height: 1; }
.leiste-name span { display: block; font-family: 'Work Sans', sans-serif; font-size: 10px; letter-spacing: .26em; color: var(--ball); margin-top: 4px; }
.leiste-nav { display: flex; gap: 2px; margin-left: auto; }
.leiste-nav a { padding: 8px 14px; text-decoration: none; color: var(--matt); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.leiste-nav a:hover { color: var(--text); border-color: var(--linie); }
.leiste-nav a[aria-current="page"] { color: var(--ball); border-color: rgba(217, 244, 59, .45); }
.leiste-ruf { margin-left: 10px; padding: 11px 20px; background: var(--ball); color: var(--nacht); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .15s ease; }
.leiste-ruf:hover { background: var(--kreide); }
.klapp { display: none; }
@media (max-width: 900px) {
  .leiste-nav, .leiste-ruf { display: none; }
  .klapp { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; height: 40px; padding: 0 16px; cursor: pointer; background: var(--ball); color: var(--nacht); border: 0; font: 700 13px/1 'Work Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
  .klapp .striche { position: relative; width: 16px; height: 10px; }
  .klapp .striche::before, .klapp .striche::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s ease, top .25s ease; }
  .klapp .striche::before { top: 1px; }
  .klapp .striche::after { top: 7px; }
  .klapp[aria-expanded="true"] .striche::before { top: 4px; transform: rotate(45deg); }
  .klapp[aria-expanded="true"] .striche::after { top: 4px; transform: rotate(-45deg); }
}
/* Geschlossen wird das Blatt unsichtbar, nicht nur verschoben. Sonst hingen seine sechs Links
   in der Tabfolge, und quer auf dem Handy ragte der Fuß mit Telefon und E-Mail sichtbar und
   anklickbar über den Inhalt (Prüfung Handy, 27.09.2026). overflow-y, weil quer bei 390 Pixeln
   Bauhöhe die Kontaktdaten sonst unter dem Bildrand liegen und nicht erreichbar sind. */
.blatt {
  position: fixed; inset: var(--kopf) 0 0; z-index: 55; background: var(--nacht);
  padding: 30px var(--pad); display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transform: translateY(-101%); visibility: hidden; pointer-events: none;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s;
}
.blatt.is-offen {
  transform: none; visibility: visible; pointer-events: auto;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.blatt.is-offen { transform: none; }
.blatt a { display: block; padding: 16px 0; color: var(--text); text-decoration: none; font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1; border-bottom: 1px solid var(--linie); }
.blatt a[aria-current="page"] { color: var(--ball); }
/* Im Menüblatt sind Telefon und Mail die wichtigsten Ziele: großzügige Fläche. */
.blatt-fuss { margin-top: auto; padding-top: 24px; font-size: 15px; color: var(--matt); }
/* Im Menüblatt sind Telefon und Mail die wichtigsten Ziele: großzügige Fläche. */
.blatt-fuss a { display: inline; border: 0; font-family: 'Work Sans', sans-serif; font-size: 17px; font-weight: 600; color: var(--ball); padding: 0; }
html.blatt-offen { overflow: hidden; }

/* ---------- Der Platz ----------
   Gegen die Intuition: der Platz wird in der LÄNGE gestaucht gezeichnet. Mit echten Maßen und
   einer Kamera hinter der Grundlinie wird optisch ein schmaler Korridor daraus. Jede
   Fernsehübertragung schummelt hier, und wir tun es auch. */
.platz {
  position: absolute; left: 50%; bottom: 0;
  width: min(1280px, 140vw); height: 64vh;
  transform: translateX(-50%);
  perspective: 620px; perspective-origin: 50% -16%;
  pointer-events: none;
  --neigung: 71deg; --hebung: 0vh; --glanz: 1;
}
.platz-buehne { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; transform: translateY(var(--hebung)) rotateX(var(--neigung)); }
.platz-flaeche { position: absolute; inset: 0; background: var(--belag, var(--ziegel)); transition: background 1s ease; }
.platz-flaeche::after {
  content: ""; position: absolute; inset: 0; opacity: .3; mix-blend-mode: multiply;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(70,28,12,.85), transparent 62%),
    radial-gradient(1.5px 1.5px at 46% 64%, rgba(70,28,12,.7), transparent 62%),
    radial-gradient(1.5px 1.5px at 78% 36%, rgba(110,50,24,.75), transparent 62%);
  background-size: 46px 46px;
}
.platz-licht {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(104deg, rgba(255,244,214, calc(.26 * var(--glanz))) 0%, rgba(255,244,214,0) 52%),
    linear-gradient(180deg, rgba(20,35,26,.55) 0%, rgba(20,35,26,0) 34%);
}
.platz-linien { position: absolute; top: 8%; bottom: 8%; left: 16%; right: 16%; }
.platz-linien path { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.vk-js .platz-linien .zeichnen { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.vk-js .platz.ist-da .platz-linien .zeichnen { animation: linie 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.vk-js .platz.ist-da .platz-linien .z2 { animation-delay: .14s; }
.vk-js .platz.ist-da .platz-linien .z3 { animation-delay: .28s; }
.vk-js .platz.ist-da .platz-linien .z4 { animation-delay: .42s; }
@keyframes linie { to { stroke-dashoffset: 0; } }
.platz-netz {
  position: absolute; left: 10.5%; right: 10.5%; top: 50%; height: 8.6%;
  /* Nach Augenmaß, nicht gerechnet: weil der Platz in der Länge gestaucht gezeichnet wird,
     würde ein maßstabsgetreues Netz mitgestaucht und sähe platt aus (Philipp, 27.09.2026). */
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  background:
    repeating-linear-gradient(90deg, rgba(20,35,26,.62) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(20,35,26,.55) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  border-top: 4px solid #fff;
}
.platz[data-belag="sand"] { --belag: var(--ziegel); }
.platz[data-belag="hart"] { --belag: #2f7e8c; }
.platz[data-belag="halle"] { --belag: #a0744f; }
.platz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--nacht) 0%, rgba(20,35,26,.92) 14%, rgba(20,35,26,.45) 26%, rgba(20,35,26,0) 44%),
    linear-gradient(90deg, rgba(20,35,26,.7) 0%, rgba(20,35,26,0) 26%, rgba(20,35,26,0) 74%, rgba(20,35,26,.7) 100%);
}

/* ---------- Auftakt ---------- */
.auftakt { position: relative; height: 210vh; --p: 0; background: var(--nacht); }
.auftakt-halt { position: sticky; top: var(--kopf); height: calc(100vh - var(--kopf)); height: calc(100svh - var(--kopf)); overflow: hidden; display: flex; flex-direction: column; }
/* Die Buehne schneidet den Platz an ihrer Unterkante glatt ab, und darunter beginnt sofort
   der dunkle Ballwechsel: eine gerade Linie quer durchs Bild. Ein Verlauf am Fuss legt den
   Schnitt in die Nacht (Pruefung 28.09.2026). */
.auftakt-halt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10%;
  background: linear-gradient(to bottom, rgba(14,26,19,0) 0%, rgba(14,26,19,.5) 62%, var(--nacht-3) 100%);
  pointer-events: none; z-index: 5;
}
/* Der Schein liegt UEBER dem Platz. Darunter uebermalte ihn .platz::after mit deckendem
   --nacht, und am rechten Rand der Platzkiste stand eine harte senkrechte Kante im Bild:
   innen kein Schein, aussen Schein (Philipps Foto, 28.09.2026). */
.schein { position: absolute; z-index: 2; top: -34vh; right: -12vw; width: 78vw; height: 78vw; max-width: 900px; max-height: 900px; pointer-events: none; background: radial-gradient(circle, rgba(217,244,59,.10), rgba(20,35,26,0) 62%); }
.auftakt .platz {
  --neigung: calc(78deg - var(--p) * 7deg);
  --hebung: calc((1 - var(--p)) * 26vh);
  --glanz: calc(0.3 + var(--p) * 0.7);
  opacity: calc(0.25 + var(--p) * 0.75);
}
.auftakt-kopf {
  position: relative; z-index: 3; max-width: var(--bund); margin: 0 auto; width: 100%;
  padding: clamp(22px, 5.5vh, 58px) var(--pad) 0;
  transform: translate3d(0, calc(var(--p) * -13vh), 0);
  /* Faktor 1,9, nicht 0,85: vorher blieb bei ganz durchgescrolltem Auftakt ein Rest von 15
     Prozent stehen, und die Ansage stand blass hinter dem Platz (Philipps Foto, 28.09.2026).
     Jetzt ist der Kopf bei etwas mehr als der halben Strecke ganz weg, also genau dann, wenn
     der Platz seinen Raum einnimmt. */
  opacity: calc(1 - var(--p) * 1.35);
}
.auftakt-kopf .riese { margin: 6px 0 0; }
.auftakt-sub { margin: 20px 0 0; max-width: 32ch; font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--matt); }
.auftakt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.auftakt-zeile .punkt { color: var(--ball); }
.auftakt-fuss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 var(--pad) clamp(16px, 3.5vh, 36px); opacity: calc((var(--p) - 0.32) * 3.4); transform: translate3d(0, calc((1 - var(--p)) * 22px), 0); }
.auftakt-fuss-in { max-width: var(--bund); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
/* Die Ueberleitung zum Ballwechsel steht groesser als ein gewoehnliches .mittel: sie ist die
   Ansage fuer alles, was danach kommt. */
.auftakt-fuss .mittel {
  font-size: clamp(2rem, 8.4vw, 2.7rem);
  line-height: .98;
  text-shadow: 0 2px 20px rgba(20,35,26,.85);
}
.auftakt-fuss p { margin: 6px 0 0; font-size: clamp(15px, 1.2vw, 17px); color: var(--text); text-shadow: 0 1px 12px rgba(20,35,26,.9); }
.tipp { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ball); white-space: nowrap; }
.tipp i { display: block; width: 2px; height: 30px; background: currentColor; animation: tippen 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes tippen { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.auftakt .tipp { opacity: calc(1 - var(--p) * 3); }

/* Niedrige Fenster, etwa bei starkem Zoom oder quer auf dem Handy: die Bühne darf den Kopf
   nicht abschneiden, also wird alles kleiner statt beschnitten. */
/* Nur quer: bei 200 Prozent Zoom greift eine reine Hoehenabfrage ebenfalls, und dann
   verschwand Text beim Vergroessern. Das ist ein Verstoss gegen WCAG 1.4.4 (Pruefung
   28.09.2026). Deshalb zusaetzlich orientation, und der Einleitungssatz bleibt stehen. */
@media (max-height: 560px) and (orientation: landscape) {
  .auftakt-kopf { padding-top: 14px; }
  .auftakt-kopf .riese { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .auftakt-sub { font-size: .92rem; margin-top: 8px; }
  .auftakt-zeile { margin-top: 14px; padding-top: 10px; font-size: 11px; gap: 6px 14px; }
  .auftakt-fuss .mittel { font-size: 1.35rem; }
  .auftakt-fuss p { font-size: 13px; }
  .tipp { display: none; }
}

/* ---------- Der Ballwechsel ---------- */
.rally { position: relative; height: 520vh; --t: 0; background: var(--nacht); }
.rally-halt { position: sticky; top: var(--kopf); height: calc(100vh - var(--kopf)); height: calc(100svh - var(--kopf)); overflow: hidden; display: flex; flex-direction: column; }
.rally-text { position: relative; z-index: 2; max-width: var(--bund); width: 100%; margin: 0 auto; padding: clamp(16px, 3.2vh, 38px) var(--pad) 0; flex: 0 0 auto; }
.rally-zaehler { display: flex; align-items: baseline; gap: 16px; }
.rally-von { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sand-schrift); }
.rally-marke { font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(2.6rem, 8vw, 6rem); line-height: .86; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ball); transition: opacity .22s ease, transform .22s ease; }
.rally-marke.wechselt { opacity: 0; transform: translateY(-10px); }
.rally-schlaege { position: relative; margin-top: 16px; min-height: 11em; }
.schlag { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.schlag.is-an { opacity: 1; transform: none; transition: opacity .4s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: auto; }
.schlag h3 { margin: 0 0 8px; font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 3.2vw, 2.3rem); line-height: 1; }
.schlag p { margin: 0; color: var(--matt); max-width: 46ch; font-size: clamp(.98rem, 1.5vw, 1.12rem); }
.schlag .vor { margin-bottom: 12px; color: var(--sand-schrift); }

/* Stationenleiste: füllt den Raum unter dem Text und zeigt, wo man im Ballwechsel steht. */
.rally-leiste { display: flex; list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--linie); }
.rally-leiste li {
  flex: 1 1 0; min-width: 0; margin-top: -1px; padding: 12px 8px 0;
  border-top: 2px solid transparent;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7d8e82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s ease, border-color .3s ease;
}
.rally-leiste li.ist-durch { color: var(--matt); border-top-color: rgba(217, 244, 59, .35); }
.rally-leiste li.is-an { color: var(--ball); border-top-color: var(--ball); }

/* ---------- Die Kulisse hinter dem Ballwechsel ----------
   Nur der vordere Ausschnitt eines Platzes, quer gesehen und stark abgedunkelt. Der ganze
   Platz gehört in den Auftakt; hier wäre er eine zweite Platzgalerie. */
.kulisse {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  overflow: hidden; perspective: 860px; perspective-origin: 50% -10%;
  z-index: 1; pointer-events: none;
}
.kulisse-buehne {
  position: absolute; left: 50%; bottom: -34%;
  width: 210%; aspect-ratio: 2830 / 1613;
  transform: translateX(-50%) rotateX(69deg) rotateZ(-2.2deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.kulisse-flaeche { position: absolute; inset: 0; background: var(--ziegel); }
.kulisse-flaeche::after {
  content: ""; position: absolute; inset: 0; opacity: .3; mix-blend-mode: multiply;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 26%, rgba(70,28,12,.85), transparent 62%),
    radial-gradient(1.5px 1.5px at 54% 68%, rgba(70,28,12,.7), transparent 62%),
    radial-gradient(1.5px 1.5px at 82% 34%, rgba(110,50,24,.75), transparent 62%);
  background-size: 54px 54px;
}
.kulisse-linien { position: absolute; top: 16%; bottom: 16%; left: 8%; right: 8%; }
.kulisse-linien path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
/* Der Schleier macht aus dem Platz eine Kulisse: vorn noch Farbe, nach hinten Nacht. */
.kulisse::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--nacht) 0%, var(--nacht) 15%, rgba(20,35,26,.84) 31%, rgba(20,35,26,.34) 46%, rgba(20,35,26,.08) 72%, rgba(20,35,26,0) 100%),
    linear-gradient(90deg, rgba(20,35,26,.8) 0%, rgba(20,35,26,0) 22%, rgba(20,35,26,0) 78%, rgba(20,35,26,.8) 100%);
}

/* Die Flugbahn liegt über dem Platz, nicht darin: der Ball fliegt ja darüber. */
.flugbahn { position: absolute; left: 0; right: 0; bottom: 4%; height: 56%; z-index: 2; pointer-events: none; }
.flugbahn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sb-voll { fill: none; stroke: var(--ball); stroke-width: 3.5; stroke-linecap: round; opacity: .95; filter: drop-shadow(0 0 10px rgba(217,244,59,.35)); }
.sb-aufprall { opacity: 0; transition: opacity .45s ease; }
.sb-aufprall.is-an { opacity: 1; }
.sb-kerbe { fill: none; stroke: var(--ball); stroke-width: 2.4; opacity: .5; }

.sb-schatten { fill: rgba(217,244,59,.14); }
.sb-linie { stroke: rgba(255,255,255,.5); stroke-width: 2.5; }
.sb-linie-fern { stroke: rgba(255,255,255,.26); stroke-width: 1.6; }
.sb-band { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }
.sb-mast { stroke: rgba(255,255,255,.8); stroke-width: 3; }
.rally-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(244,239,230,.14); z-index: 3; }
.rally-balken::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--t) * 100%); background: var(--ball); }
@media (max-width: 860px) {
  .rally { height: 560vh; }
  .rally-schlaege { min-height: 12em; }
  .rally-leiste { display: none; }
  /* Auf dem Handy waere die Szene sonst nur ein Streifen am unteren Rand. Die Buehne wird
     deshalb hoeher gezogen als der Ausschnitt und an den Seiten beschnitten: man sieht einen
     Ausschnitt des Platzes statt eines ganzen, aber winzigen. Gesteuert wird ueber die Hoehe,
     nicht ueber die Breite, sonst haengt die Flaeche wieder an der Unterkante fest. */
  /* Hochkant fuehrt die Hoehe, nicht die Breite: eine breitengefuehrte Flaeche haengt an der
     Unterkante ihres Ausschnitts und steht erst im unteren Fuenftel, mit einem leeren Feld
     darueber (Philipps Foto, 28.09.2026). Der Ausschnitt waechst mit, und der Stationstext
     rueckt so weit nach unten, dass er direkt an ihm endet. */
  .kulisse { height: max(46%, calc(100% - 300px)); }
  .kulisse-buehne { height: 212%; width: auto; }
  .rally-text { padding-top: max(clamp(16px, 3.2vh, 38px), calc(0.54 * (100svh - var(--kopf)) - 320px)); }
}

/* ---------- Bausteine ---------- */
/* Die Trennlinien macht hier NICHT der Hintergrund mit Lücken, sondern ein Rand je Kachel.
   Sonst bleiben bei einer Kachelzahl, die nicht in die Spalten aufgeht, leere Zellen übrig,
   und der Hintergrund scheint als grauer Block durch (Philipp, 27.09.2026). */
.raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 44px;
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
.band-hell .raster { border-top-color: var(--linie-hell); border-left-color: var(--linie-hell); }
.posten {
  padding: 26px 24px 30px;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.band-hell .posten { border-right-color: var(--linie-hell); border-bottom-color: var(--linie-hell); }
.posten-nr { display: block; font-family: Anton, sans-serif; font-size: 13px; letter-spacing: .1em; color: var(--ball); margin-bottom: 12px; }
.band-hell .posten-nr { color: var(--sand-schrift-hell); }
.posten h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }
.posten p { margin: 0; color: var(--matt); font-size: 15.5px; }
.band-hell .posten p { color: var(--matt-hell); }

.stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: var(--linie); border: 1px solid var(--linie); }
.band-hell .stufen { background: var(--linie-hell); border-color: var(--linie-hell); }
.stufe { background: var(--nacht); padding: 28px 22px 30px; }
.band-hell .stufe { background: var(--papier); }
.stufe-alter { display: block; font-family: Anton, sans-serif; font-size: clamp(2rem, 4vw, 2.9rem); line-height: .9; letter-spacing: -0.02em; color: var(--ball); }
.band-hell .stufe-alter { color: var(--sand-schrift-hell); }
.stufe-alter small { display: block; font-family: 'Work Sans', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--matt); margin-top: 8px; }
.band-hell .stufe-alter small { color: var(--matt-hell); }
.stufe h3 { margin: 16px 0 8px; font-size: 1.05rem; font-weight: 700; }
.stufe p { margin: 0; color: var(--matt); font-size: 15.5px; }
.band-hell .stufe p { color: var(--matt-hell); }

/* Vier Lizenzen: zwei Spalten gehen immer glatt auf. Mit einer automatischen Spaltenzahl
   stand am Schreibtisch die vierte Kachel allein in einer zweiten Zeile (Philipps Foto,
   28.09.2026). */
.plaketten { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
@media (min-width: 640px) { .plaketten { grid-template-columns: 1fr 1fr; } }
/* Feste erste Spalte: die Kuerzel sind verschieden lang, und mit freier Breite standen die
   Titel daneben treppenfoermig versetzt (Philipps Foto, 28.09.2026). */
.plakette { display: grid; grid-template-columns: 118px 1fr; align-items: stretch; border: 1px solid var(--linie); }
.band-hell .plakette { border-color: rgba(20,35,26,.22); }
.plakette-kurz { display: flex; align-items: center; justify-content: center; padding: 13px 10px; background: var(--ball); color: var(--nacht); font-family: Anton, sans-serif; text-transform: uppercase; font-size: .92rem; line-height: 1.05; text-align: center; }
/* Auf dem hellen Band wirken vier gelbe Blöcke unruhig, dort steht Sandrot (Philipp). */
.band-hell .plakette-kurz { background: #ae4522; color: var(--kreide); }
.plakette-text { padding: 12px 16px; align-self: center; }
.plakette-titel { display: block; font-weight: 700; font-size: 15px; }
.plakette-geber { display: block; font-size: 13px; color: var(--matt); }
.band-hell .plakette-geber { color: var(--matt-hell); }

.knopf { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; background: var(--ball); color: var(--nacht); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ball); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.knopf:hover { background: var(--kreide); border-color: var(--kreide); color: var(--nacht); }
.knopf-still { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf-still:hover { background: transparent; border-color: var(--ball); color: var(--ball); }
.band-hell .knopf-still { color: var(--nacht); border-color: rgba(20,35,26,.35); }
.band-hell .knopf-still:hover { border-color: var(--sand); color: var(--sand); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.knopfreihe.mitte { justify-content: center; }

.plakat { background: #b84a26; color: var(--kreide); padding: clamp(60px, 11vh, 130px) 0; }
.plakat q { display: block; quotes: none; font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(2.1rem, 6.4vw, 4.8rem); line-height: 1.02; }
.plakat q em { font-style: normal; color: var(--nacht); }
.plakat cite { display: block; margin-top: 24px; font-style: normal; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.92); }

.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-top: 44px; background: var(--linie); border: 1px solid var(--linie); }
.band-hell .zahlen { background: var(--linie-hell); border-color: var(--linie-hell); }
.zahl { background: var(--nacht); padding: 26px 20px; text-align: center; }
.band-hell .zahl { background: var(--papier); }
.zahl b { display: block; font-family: Anton, sans-serif; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1; color: var(--ball); }
.band-hell .zahl b { color: var(--sand-schrift-hell); }
.zahl span { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--matt); }
.band-hell .zahl span { color: var(--matt-hell); }

/* Die Karte liegt als Bild bei uns, kein fremder Kartendienst. */
.karte { margin: 0; border: 1px solid var(--linie); }
.band-hell .karte { border-color: var(--linie-hell); }
.karte img { width: 100%; display: block; }
.karte figcaption { padding: 10px 14px; border-top: 1px solid var(--linie); font-size: 12.5px; color: var(--matt); }
/* Auf dunklem Grund gehoert der dunkle Ton nicht hin: 2,86:1 statt 5,02:1. */
.karte figcaption a { color: var(--sand-schrift); }

.ort { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 5vw, 56px); margin-top: 40px; align-items: start; }
.ortliste { margin: 0; border-top: 1px solid var(--linie); }
.band-hell .ortliste { border-color: rgba(20,35,26,.2); }
.ortliste div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.band-hell .ortliste div { border-color: var(--linie-hell); }
.ortliste dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--matt); }
.band-hell .ortliste dt { color: var(--matt-hell); }
.ortliste dd { margin: 0; font-size: 15.5px; }
.ortliste a { color: var(--ball); font-weight: 600; }
.band-hell .ortliste a { color: var(--sand-schrift-hell); }
/* Am Finger sind Telefonnummer, Mailadresse und Vereinslink eigene Handlungen, keine Woerter
   im Fliesstext: sie standen bei 39 Pixel Hoehe unter dem, was sich sicher treffen laesst.
   Das Innenmass vergroessert die Trefferflaeche, das gleich grosse negative Aussenmass haelt
   die Liste optisch, wie sie war (Pruefung Handy, 28.09.2026). */
@media (pointer: coarse) {
  .ortliste a { display: inline-block; padding: 6px 0; margin: -6px 0; }
}

.wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 40px; background: var(--linie); border: 1px solid var(--linie); }
.weg { display: block; background: var(--nacht); padding: 30px 26px 32px; text-decoration: none; color: var(--text); transition: background .15s ease, color .15s ease; }
.weg:hover { background: var(--ball); color: var(--nacht); }
.weg h3 { margin: 0 0 8px; font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.weg p { margin: 0; color: var(--matt); font-size: 15px; }
.weg:hover p { color: rgba(20,35,26,.78); }
.weg .pfeil { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ball); }
.weg:hover .pfeil { color: var(--nacht); }

.seitenkopf { position: relative; overflow: hidden; padding: clamp(50px, 9vh, 100px) 0 clamp(36px, 6vh, 64px); border-bottom: 1px solid var(--linie); }
.seitenkopf .bund { position: relative; z-index: 2; }

.prosa { max-width: 68ch; }
.prosa h2 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1; margin: 50px 0 14px; }
.prosa h3 { font-size: 1.05rem; margin: 26px 0 6px; }
.prosa p, .prosa li { color: var(--matt); }
.band-hell .prosa p, .band-hell .prosa li { color: var(--matt-hell); }
.prosa strong { color: var(--text); font-weight: 600; }
.band-hell .prosa strong { color: var(--nacht); }
.prosa a:not(.knopf) { color: var(--ball); }
.band-hell .prosa a:not(.knopf) { color: var(--sand-schrift-hell); }
.prosa ul, .prosa ol { padding-left: 1.15em; }
.prosa li { margin: 6px 0; }

.strichliste { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--linie); max-width: 68ch; }
.strichliste li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--linie); color: var(--matt); }
.band-hell .strichliste li { border-color: var(--linie-hell); color: var(--matt-hell); }
.strichliste li::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 18px; height: 2px; background: var(--ball); }
.band-hell .strichliste li::before { background: var(--sand); }

.inhalte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: var(--linie); border: 1px solid var(--linie); }
.band-hell .inhalte { background: var(--linie-hell); border-color: var(--linie-hell); }
.inhalt { background: var(--nacht); padding: 28px 24px 32px; }
.band-hell .inhalt { background: var(--papier); }
.inhalt h3 { margin: 0 0 16px; font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1; color: var(--ball); }
.band-hell .inhalt h3 { color: var(--sand-schrift-hell); }
.inhalt ul { list-style: none; padding: 0; margin: 0; }
.inhalt li { position: relative; padding-left: 20px; margin: 9px 0; color: var(--matt); font-size: 15px; }
.band-hell .inhalt li { color: var(--matt-hell); }
.inhalt li::before { content: ""; position: absolute; left: 0; top: .68em; width: 10px; height: 2px; background: var(--sand); }

/* ---------- Preise ---------- */
.tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: var(--linie); border: 1px solid var(--linie); }
.tarif { position: relative; display: flex; flex-direction: column; background: var(--nacht); padding: 32px 26px 34px; }
.tarif-hervor { background: var(--ball); color: var(--nacht); }
.tarif-fahne { position: absolute; top: 0; right: 0; padding: 5px 12px; background: var(--nacht); color: var(--ball); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tarif-name { font-weight: 700; font-size: 1.05rem; }
.tarif-dauer { margin-top: 2px; font-size: 13.5px; color: var(--matt); }
.tarif-preis { margin: 20px 0 2px; font-family: Anton, sans-serif; font-size: clamp(2.2rem, 4.6vw, 3rem); line-height: .9; letter-spacing: -0.015em; }
.tarif-preis.ohne-zahl { font-size: 1.25rem; line-height: 1.2; color: var(--ball); }
.tarif-jeKopf { font-size: 13.5px; font-weight: 600; color: var(--ball); }
.tarif p { margin: 14px 0 0; color: var(--matt); font-size: 15px; }
.tarif ul { list-style: none; padding: 0; margin: 16px 0 0; }
.tarif li { position: relative; padding-left: 20px; margin: 8px 0; color: var(--matt); font-size: 14.5px; }
.tarif li::before { content: ""; position: absolute; left: 0; top: .66em; width: 10px; height: 2px; background: var(--ball); }

/* Die hervorgehobene Karte kehrt die Farben um. Diese Regeln MÜSSEN nach den allgemeinen
   .tarif-Regeln stehen: sie wiegen gleich schwer, und dann entscheidet die Reihenfolge. */
.tarif-hervor .tarif-dauer,
.tarif-hervor p,
.tarif-hervor li { color: rgba(20, 35, 26, .8); }
.tarif-hervor li::before { background: var(--nacht); }
.tarif-hervor .tarif-jeKopf { color: var(--nacht); }
.tarif-hervor .tarif-preis.ohne-zahl { color: var(--nacht); }

.merker { margin: 36px 0 0; padding: 20px 22px; border: 1px dashed var(--sand); background: rgba(196,86,47,.14); font-size: 15px; }
.merker b { color: var(--sand); }

.tabelle { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: 15.5px; }
.tabelle caption { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--matt); padding-bottom: 12px; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 10px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.band-hell .tabelle th, .band-hell .tabelle td { border-color: var(--linie-hell); }
.tabelle thead th { border-bottom: 2px solid var(--ball); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.band-hell .tabelle thead th { border-bottom-color: var(--sand); }
.tabelle td { color: var(--matt); }
.band-hell .tabelle td { color: var(--matt-hell); }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; font-family: Anton, sans-serif; font-size: 1.3rem; color: var(--ball); padding-right: 0; background: none; }
.band-hell .tabelle .zahl { color: var(--sand); }

/* ---------- Anmeldeformular ---------- */
/* color-scheme sagt dem Browser, dass seine eigenen Bedienelemente dunkel sein sollen:
   sonst steht „tt.mm.jjjj" im Datumsfeld fast schwarz auf dunklem Grund. */
.formular { max-width: 880px; color-scheme: dark; }
.feldgruppe { border: 0; padding: 0; margin: 0 0 44px; min-width: 0; }
.feldgruppe legend { padding: 0 0 12px; margin-bottom: 20px; width: 100%; font-family: Anton, sans-serif; text-transform: uppercase; font-size: 1.5rem; line-height: 1; border-bottom: 1px solid var(--linie); color: var(--ball); }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.feld { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.feld.weit { grid-column: 1 / -1; }
.feld label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c3d1c6; }
.feld label .pflicht { color: var(--ball); }
.feld input, .feld select, .feld textarea { font: 400 16px 'Work Sans', sans-serif; color: var(--text); padding: 13px 14px; background: var(--nacht-2); border: 1px solid rgba(244,239,230,.45); border-radius: 0; transition: border-color .15s ease, background .15s ease; }
/* Fokus als outline, nicht über die Randfarbe: nach einem Fehlversuch trägt das Feld einen
   sandroten Rand, und der würde den Fokus sonst unsichtbar machen. */
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 3px solid var(--ball); outline-offset: 2px; background: var(--nacht-3);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { background: var(--nacht-3); }
/* Bemängelte Felder: eine Klasse statt eines Inline-Stils, sonst schlägt sie jede Regel. */
.feld .ist-leer, .feld input.ist-leer, .feld select.ist-leer, .feld textarea.ist-leer { border-color: var(--sand-schrift); }
.feld input.ist-leer, .feld select.ist-leer, .feld textarea.ist-leer { border-color: var(--sand); }
.feld .hinweis { font-size: 13px; color: var(--matt); }

.zeitraster { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 10px; border: 1px solid var(--linie); }
/* Auf dem Handy passt das Raster nicht in die Breite. Die Kante zeigt, dass rechts weitergeht;
   ohne sie glaubt man, hinter Mittwoch käme nichts mehr. */
.zeitraster-hinweis { display: none; margin: 10px 0 0; font-size: 13px; color: var(--matt); }
.zeitraster-hinweis::before { content: "\2192"; margin-right: 8px; color: var(--ball); }
@media (max-width: 720px) {
  .zeitraster-hinweis { display: block; }
}
/* Der Schatten haengt an zwei Verlaeufen: die einen scrollen mit dem Inhalt (local) und decken
   den Schatten an den Enden zu, die anderen stehen fest (scroll). Dadurch zeigt sich die Kante
   nur, solange in diese Richtung noch etwas kommt. Reines CSS, kein Skript. */
.zeitraster {
  background:
    linear-gradient(to right, var(--nacht) 40%, rgba(20,35,26,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--nacht) 40%, rgba(20,35,26,0)) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(217,244,59,.42), rgba(217,244,59,0)) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(217,244,59,.42), rgba(217,244,59,0)) right center / 14px 100% no-repeat scroll;
}
.zeitraster table { border-collapse: collapse; width: 100%; }
.zeitraster thead th + th, .zeitraster td { min-width: 46px; }
.zeitraster th, .zeitraster td { border: 1px solid var(--linie); padding: 0; text-align: center; }
.zeitraster thead th { background: var(--nacht-2); color: var(--ball); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 10px 6px; }
.zeitraster tbody th { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 12px; white-space: nowrap; text-align: left; color: #c3d1c6; }
.zeitraster td label { display: block; cursor: pointer; padding: 12px 4px; transition: background .12s ease; }
.zeitraster td label:hover { background: rgba(217,244,59,.10); }
.zeitraster td input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Statt Kästchen kleine Tennisbälle: leer ein Umriss, angekreuzt ein gelber Ball mit Naht. */
.zeitraster td label::after {
  content: ""; display: block; width: 18px; height: 18px; margin: 0 auto;
  border: 1.5px solid rgba(244,239,230,.55); border-radius: 50%;
  background-repeat: no-repeat; background-size: 100% 100%;
  transition: background-color .15s ease, border-color .15s ease;
}
.zeitraster td label:hover::after { border-color: rgba(217,244,59,.65); }
.zeitraster td label:has(input:checked) { background: rgba(217,244,59,.14); }
.zeitraster td label:has(input:checked)::after {
  background-color: var(--ball); border-color: #a8bf1e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M-9.4 -5.3 A 12.8 12.8 0 0 1 -9.4 5.3' fill='none' stroke='%2314231a' stroke-width='1.7'/%3E%3Cpath d='M9.4 -5.3 A 12.8 12.8 0 0 0 9.4 5.3' fill='none' stroke='%2314231a' stroke-width='1.7'/%3E%3C/svg%3E");
}
.zeitraster td label:has(input:focus-visible) { outline: 2px solid var(--ball); outline-offset: -2px; }

.bedingungen { margin-top: 10px; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.bedingungen li { padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; color: var(--matt); }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 15px; }
.zustimmung input { width: 22px; height: 22px; flex: none; accent-color: var(--ball); margin-top: 2px; border-radius: 50%; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formmeldung { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--linie); font-size: 15.5px; display: none; }
.formmeldung.ist-da { display: block; }
.formmeldung.ist-fehler { border-color: var(--sand); background: rgba(196,86,47,.14); }
.formmeldung.ist-gut { border-color: var(--ball); background: rgba(217,244,59,.14); color: var(--ball); }

/* ---------- Abschluss ---------- */
.abschluss { background: var(--nacht); padding: clamp(60px, 10vh, 130px) 0 40px; border-top: 1px solid var(--linie); }
.wege-kontakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: var(--linie); border: 1px solid var(--linie); }
.kontakt { display: block; background: var(--nacht); padding: 24px 22px 26px; text-decoration: none; color: var(--text); transition: background .15s ease, color .15s ease; }
.kontakt:hover { background: var(--ball); color: var(--nacht); }
.kontakt-art { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ball); }
.kontakt:hover .kontakt-art { color: var(--nacht); }
.kontakt-wert { display: block; margin-top: 10px; font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.05; word-break: break-word; }
.abschluss-fuss { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; justify-content: space-between; }
.abschluss-fuss picture { display: block; }
.abschluss-fuss img { height: 84px; width: auto; }
.abschluss-fuss p { margin: 14px 0 0; font-size: 14px; color: var(--matt); max-width: 48ch; }
.rechtliches { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
/* Auch in der Breite 44 Pixel: "AGB" war nur 28 breit. */
.rechtliches a { min-width: 44px; justify-content: flex-start; }
.rechtliches a { color: var(--matt); text-decoration: none; }
.rechtliches a:hover { color: var(--ball); }

.naechste { border-top: 1px solid var(--linie); }
.naechste a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 36px 0; text-decoration: none; color: var(--text); }
.naechste a:hover .naechste-titel { color: var(--ball); }
.naechste-titel { font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; transition: color .15s ease; }
.naechste-text { display: block; margin-top: 6px; font-size: 15px; color: var(--matt); font-family: 'Work Sans', sans-serif; text-transform: none; }
.naechste svg { flex: none; color: var(--ball); }

/* ---------- Aufdecken ---------- */
.vk-js [data-rise] {
  opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px);
  transition: opacity .55s ease, clip-path .8s cubic-bezier(.2,.85,.25,1), transform .8s cubic-bezier(.2,.85,.25,1);
  will-change: clip-path, opacity;
}
.vk-js [data-rise].is-da { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }

/* ---------- Schmale Schirme ---------- */
@media (max-width: 1000px) {
  .raster, .inhalte, .tarife, .zahlen, .stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ort { grid-template-columns: 1fr; }
}
@media (max-width: 660px) {
  .raster, .inhalte, .tarife, .stufen, .wege, .wege-kontakt, .zahlen { grid-template-columns: 1fr; }
  .felder { grid-template-columns: 1fr; }
  .auftakt-fuss-in { flex-direction: column; align-items: flex-start; }
  .abschluss-fuss { flex-direction: column; align-items: flex-start; }
  .ortliste div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Die Klasse vk-ruhig setzt nur JavaScript. Ohne JavaScript müssen dieselben Regeln
     trotzdem greifen, sonst bekommt man die vollen Bühnen über 800vh. */
  html { --ruhig: 1; }
  .tipp i { animation: none !important; }
  .vk-js [data-rise] { opacity: 1; clip-path: none; transform: none; transition: none; }
  .vk-js .platz-linien .zeichnen { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .auftakt,   .rally { height: auto; }
  .auftakt-halt { position: relative; height: auto; padding-bottom: 44vh; }
  .auftakt-kopf { transform: none; opacity: 1; }
  .auftakt-fuss { opacity: 1; position: relative; transform: none; }
  .auftakt .platz { opacity: 1; --hebung: 0vh; --neigung: 72deg; --glanz: 1; }
  .rally-halt { position: relative; height: auto; }
/* Kulisse und Flugbahn hängen absolut am Fuß des Abschnitts. Ohne Bühne stünden sie hinter
   den letzten Stationen, und der Text läge auf dem Platz (Prüfung 27.09.2026). */
  .rally-zaehler,   .flugbahn,   .kulisse { display: none; }
  .rally-schlaege { position: relative; min-height: 0; }
  .schlag { position: relative; opacity: 1; transform: none; margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--linie); }
  .rally-leiste,   .rally-balken { display: none; }
}
.vk-ruhig .auftakt, .vk-ruhig .rally { height: auto; }
.vk-ruhig .auftakt-halt { position: relative; height: auto; padding-bottom: 44vh; }
.vk-ruhig .auftakt-kopf { transform: none; opacity: 1; }
.vk-ruhig .auftakt-fuss { opacity: 1; position: relative; transform: none; }
.vk-ruhig .auftakt .platz { opacity: 1; --hebung: 0vh; --neigung: 72deg; --glanz: 1; }
.vk-ruhig .rally-halt { position: relative; height: auto; }
/* Kulisse und Flugbahn hängen absolut am Fuß des Abschnitts. Ohne Bühne stünden sie hinter
   den letzten Stationen, und der Text läge auf dem Platz (Prüfung 27.09.2026). */
.vk-ruhig .rally-zaehler, .vk-ruhig .flugbahn, .vk-ruhig .kulisse { display: none; }
.vk-ruhig .rally-schlaege { position: relative; min-height: 0; }
.vk-ruhig .schlag { position: relative; opacity: 1; transform: none; margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--linie); }
.vk-ruhig .rally-leiste, .vk-ruhig .rally-balken { display: none; }

/* ---------- Drucken ---------- */
@media print {
  .leiste, .blatt, .abschluss, .naechste, .knopfreihe, .tipp, .auftakt, .rally { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding: 0 0 16pt; background: #fff !important; color: #000 !important; }
  .feld input, .feld select, .feld textarea { background: #fff; color: #000; border: 1px solid #999; }
  .zeitraster { break-inside: avoid; }
}

/* ---------- Tippflächen (Prüfung Handy, 27.09.2026) ---------- */
/* Gemessen waren Fußzeile, Menüblatt und die Links im Fließtext 15 bis 22 Pixel hoch. Auf dem
   Handy tippt man danach neben das Ziel. 44 Pixel sind das Maß, unter das nichts fällt. */
.blatt-fuss a, .rechtliches a, .sprung {
  display: inline-flex; align-items: center; min-height: 44px; line-height: 1.25;
}
.klapp { min-height: 44px; }
/* Nur Links im Fliesstext, ausdruecklich keine Knoepfe: die Regel stand hinter .knopf und
   nahm ihm seinen Innenabstand, sodass der gelbe Block direkt an der Schrift klebte
   (Philipps Foto, 28.09.2026). */
.karte figcaption a:not(.knopf), .prosa a:not(.knopf), .fliess a:not(.knopf),
.ortliste a:not(.knopf), .zustimmung a:not(.knopf), .klein a:not(.knopf),
.posten a:not(.knopf), .band a:not([class]) { padding: 7px 0; display: inline-block; }
/* Die Fußzeilenlinks liegen in .abschluss-fuss: eine Sammelregel dort würde die 44 Pixel oben
   wieder einkassieren, deshalb stehen sie hier ausdrücklich davor. */
.abschluss-fuss a:not(.rechtliches a):not(.knopf) { padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  .leiste-nav a { padding: 12px 0; }
}

/* ---------- Kleine Schriften angehoben ---------- */
/* Unter 12 Pixeln liest auf dem Handy niemand mehr mit, unter 14 wird es mühsam. */
.leiste-name span { font-size: 11px; }
.vor { font-size: 13px; }
.karte figcaption a { font-size: 14px; }
.zeitraster thead th { font-size: 13px; }
.zeitraster tbody th { font-size: 14px; }
.bedingungen li { font-size: 15px; }
/* Eine Spur heller als das uebrige Grau: die Bedingungen sind laengere Saetze, die man
   wirklich liest, nicht nur ueberfliegt. 8,8:1 statt 7,2:1. */
.bedingungen li { color: #b4c2b8; }
.knopf { font-size: 15px; }
.tarif-fahne { font-size: 12px; }
.tarif-dauer { font-size: 14px; }
.plakette-geber, .zahl span, .stufe-alter { font-size: 13.5px; }

/* ---------- Quer auf dem Handy ---------- */
/* Bei 390 Pixeln Bauhöhe bleiben nach der Kopfleiste 312 Pixel Bühne. Der Auftakt war für eine
   volle Höhe gerechnet: Kopf und Fuß überlappten um 71 Pixel, das Netz lag quer durch die
   Überschrift, und der Stationstext stand auf dem Platz. Quer wird deshalb alles flacher. */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --kopf: 56px; }
  .auftakt-kopf { padding-top: 10px; }
  .auftakt-kopf .riese { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .auftakt-zeile { margin-top: 10px; }
  .auftakt-fuss { position: relative; opacity: 1; transform: none; margin-top: auto; }
  .auftakt-fuss .mittel { font-size: 1.15rem; }
  /* Quer blieben nach Kopfzeile und Lizenzzeile 60 Prozent leeres Gruen, und der Platz war
     ein schmaler Streifen mit harter Oberkante: der Verlauf des Sockels blendet ueber die
     Kastenhoehe aus und war laengst durchsichtig, bevor die gekippte Flaeche anfing
     (Pruefung 28.09.2026). Der Platz fuellt jetzt die Buehne. */
  .platz { height: 82vh; }
  .platz-netz { top: 54%; }
  /* Quer steht der Text auf dem Platz. Ein Schleier hinter der linken Spalte traegt ihn,
     ohne den Platz zu verdecken. */
  .auftakt-kopf {
    background: linear-gradient(to right, rgba(14,26,19,.92) 0%, rgba(14,26,19,.82) 42%, rgba(14,26,19,0) 74%);
    padding-right: 26%;
  }
  /* Und der Sockel bleibt flach, damit er nicht den ganzen Platz zudeckt. */
  .auftakt-fuss { padding-top: 34px; background: linear-gradient(to bottom, rgba(14,26,19,0) 0%, rgba(14,26,19,.72) 44%, rgba(14,26,19,.94) 100%); }
  .rally-text { padding-top: 10px; }
  .rally-marke { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .schlag h3 { font-size: 1.25rem; }
  .schlag p { font-size: .92rem; max-width: 52ch; }
  .schlag .vor { margin-bottom: 6px; }
  .kulisse { opacity: .5; }
  .rally-leiste { display: none; }
  /* Quer ist das Fenster breit und flach wie am Schreibtisch: hier fuehrt wieder die Breite,
     sonst zeigt die Flaeche ihre Seitenkanten. */
  .kulisse-buehne { width: 210%; height: auto; }
}

/* ---------- Niedrige Fenster hochkant ---------- */
/* Auf einem iPhone SE (375x667) traf die Netzkante die Überschrift "Ein Ballwechsel durch
   fünf Jahrzehnte". Netz und Fußtext wandern bei kleiner Bauhöhe auf dieselbe Zeile, weil das
   eine an der Platzmitte und das andere am unteren Rand hängt. Das Netz geht hoch. */
/* Das Netz sitzt in der gekippten Ebene: es laesst sich nicht sauber an der Ueberschrift
   vorbeischieben, ohne den Platz zu verziehen. Stattdessen bekommt der Fusstext einen dunklen
   Sockel. Der Verlauf liegt hinter dem Text, nicht davor, und traegt ihn auf jedem Untergrund. */
.auftakt-fuss {
  padding-top: 86px;
  background: linear-gradient(to bottom, rgba(14,26,19,0) 0%, rgba(14,26,19,.55) 32%, rgba(14,26,19,.9) 62%, rgba(14,26,19,.97) 100%);
}
/* Auf einem kurzen Handy (iPhone SE, 375x667) traf die Netzkante genau die Zeile "durch fünf
   Jahrzehnte". Netz und Fußtext hängen an verschiedenen Kanten und wandern bei kleiner Bauhöhe
   aufeinander zu. Der Platz wird deshalb höher gezogen: das Netz steigt über den Text, und man
   sieht zugleich mehr vom Platz (Prüfung Handy, 27.09.2026). */
@media (max-height: 720px) and (orientation: portrait) {
  .platz { height: 82vh; }
  /* Kleiner als am grossen Schirm, aber nicht kleiner als der Satz darunter. */
  .auftakt-fuss .mittel { font-size: clamp(1.5rem, 7vw, 1.9rem); }
}

/* ---------- Fortschritt des Ballwechsels auf dem Handy ---------- */
/* Die Stationsleiste ist schmal ausgeblendet, und der Fortschrittsbalken lag als 3-Pixel-
   Streifen ganz unten in der Zone des Home-Indicators: man sah nicht, wie weit man ist. Auf
   dem Handy zählt deshalb eine Ziffer mit, und der Balken sitzt direkt unter dem Zähler. */
.rally-stand { display: none; margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--matt); white-space: nowrap; }
.rally-stand b { color: var(--ball); font-weight: 700; }
@media (max-width: 860px) {
  .rally-stand { display: inline-block; }
  .rally-balken { top: auto; bottom: env(safe-area-inset-bottom, 0px); height: 4px; }
}

/* ---------- Jahreszahl je Station, wenn die Bühne entfällt ---------- */
/* Ohne Bühne steht der Zähler nur einmal oben und bleibt auf 1972 stehen: acht von neun
   Jahreszahlen wären verschwunden und die Chronologie dahin. Jede Station trägt sie selbst. */
.schlag-jahr { display: none; }
@media (prefers-reduced-motion: reduce) {
  .schlag-jahr { display: block; margin: 0 0 6px; font-family: Anton, sans-serif; text-transform: uppercase; font-size: 1.9rem; line-height: 1; color: var(--ball); }
  .rally-stand { display: none; }
}
.vk-ruhig .schlag-jahr { display: block; margin: 0 0 6px; font-family: Anton, sans-serif; text-transform: uppercase; font-size: 1.9rem; line-height: 1; color: var(--ball); }
.vk-ruhig .rally-stand { display: none; }

/* ---------- Fehlermeldung des Formulars ---------- */
/* Nach dem Absenden springt der Fokus nach oben auf das erste fehlende Feld, die Meldung stand
   aber unten am Knopf, rund 3000 Pixel entfernt. Sie bleibt jetzt am unteren Rand stehen. */
.formmeldung.ist-da.ist-fehler {
  position: sticky; bottom: 0; z-index: 40;
  background: #5f2413; color: var(--kreide);
  border-color: var(--sand-schrift); border-left-width: 4px;
  box-shadow: 0 -10px 24px rgba(20,35,26,.6);
}
/* Die Zustimmung braucht eine sichtbare Marke, nicht nur aria-invalid: das Kästchen ist rund
   und trägt keinen Rand, den man einfärben könnte. */
.zustimmung.ist-leer { outline: 2px solid var(--sand-schrift); outline-offset: 8px; }

/* ---------- Nur fuer die Vorlesestimme ---------- */
/* Zusaetze wie "oeffnet in neuem Fenster" gehoeren gesagt, aber nicht gezeigt. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
main#inhalt { scroll-margin-top: var(--kopf); }
main#inhalt:focus { outline: 0; }

/* Die letzten Auszeichnungszeilen unter 12 Pixel: Versalien mit Sperrung lesen sich klein
   schlechter als normale Schrift, deshalb auch hier nicht unter 12. */
.leiste-name span { font-size: 12px; }
.kontakt-art { font-size: 12px; }
.stufe-alter small { font-size: 12px; }

/* ---------- Unterschrift ---------- */
/* Gezeichnet wird auf einer Leinwand, nicht in einem Bild: das laeuft am Handy mit dem Finger
   und am Rechner mit der Maus, ohne Bibliothek und ohne fremden Dienst. touch-action: none ist
   Pflicht, sonst scrollt das Handy die Seite, statt einen Strich zu ziehen. */
.unterschrift { margin-top: 30px; }
.unterschrift-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.unterschrift-titel { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--matt); }
.unterschrift-neu {
  background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer;
  font: 600 14px 'Work Sans', sans-serif; color: var(--ball);
  text-decoration: underline; text-underline-offset: 4px;
}
.unterschrift-neu:hover { color: var(--kreide); }
.unterschrift-flaeche {
  /* Hell wie ein Blatt Papier: darauf schreibt man mit dunkler Tinte, und genau die geht
     ins PDF. Der helle Grund selbst wird nicht mitexportiert. */
  display: block; width: 100%; height: 180px;
  background: var(--papier); border: 1px solid rgba(244,239,230,.45);
  touch-action: none; cursor: crosshair;
}
.unterschrift-flaeche:focus-visible { outline: 3px solid var(--ball); outline-offset: 2px; }
.unterschrift-hinweis { margin: 10px 0 0; font-size: 14px; color: var(--matt); }
.unterschrift.ist-leer .unterschrift-flaeche { border-color: var(--sand-schrift); }
/* Wer den Ausweg waehlt, braucht die Flaeche nicht mehr anzusehen. */
.unterschrift.ist-abgewaehlt .unterschrift-flaeche { opacity: .35; }
.unterschrift.ist-abgewaehlt .unterschrift-neu { visibility: hidden; }
.unterschrift-ausweg { margin: 12px 0 0; }
.unterschrift-ausweg label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font-size: 14px; color: var(--matt); padding: 6px 0;
}
.unterschrift-ausweg input { width: 22px; height: 22px; flex: none; accent-color: var(--ball); margin-top: 1px; }
.unterschrift.ist-gezeichnet .unterschrift-flaeche { border-color: rgba(217,244,59,.55); }

@media print {
  .unterschrift-neu { display: none; }
  .unterschrift-flaeche { background: #fff; border-color: #999; }
}

/* ---------- Die Aufstellung ---------- */
/* Wer mehrere Kinder anmeldet, stellt sie nacheinander auf. Die Karten sehen aus wie eine
   Mannschaftsaufstellung, nicht wie ein Warenkorb: hier wird nichts gekauft. */
.aufstellung { margin: 0 0 34px; padding: 22px; background: var(--nacht-2); border-left: 3px solid var(--ball); }
.aufstellung-titel {
  margin: 0 0 14px; font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .02em; color: var(--ball);
}
.aufstellung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aufstellung-leer { margin: 0; font-size: 15px; color: var(--matt); }

.aufgestellt {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 14px 16px; background: var(--nacht); border: 1px solid var(--linie);
}
.aufgestellt-name {
  grid-column: 1; margin: 0;
  font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.1rem; line-height: 1.1; color: var(--text);
}
.aufgestellt-jahr {
  margin-left: 10px; font-family: 'Work Sans', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .08em; color: var(--ball);
}
.aufgestellt-zeiten { grid-column: 1; margin: 0; font-size: 14px; color: var(--matt); }
.aufgestellt-werkzeug { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.aufgestellt-knopf {
  background: none; border: 0; cursor: pointer; padding: 11px 7px; min-height: 44px;
  font: 600 13px 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--matt); text-decoration: underline; text-underline-offset: 4px;
}
.aufgestellt-knopf:hover { color: var(--ball); }
.aufstellen-reihe { margin-top: 22px; }

@media (max-width: 620px) {
  .aufgestellt { grid-template-columns: 1fr; }
  .aufgestellt-werkzeug {
    grid-column: 1; grid-row: auto; margin-top: 8px; justify-content: flex-start;
    border-top: 1px solid var(--linie); padding-top: 4px;
  }
  .aufgestellt-knopf { padding: 11px 10px 11px 0; }
}

/* ---------- Die Schrittleiste ---------- */
/* Boxen statt Linien: man sieht auf einen Blick, wo man steht, was erledigt ist und wie viel
   noch kommt. Die aktuelle Box steht in Ballgelb, erledigte tragen einen Haken statt ihrer
   Nummer, kommende bleiben zurückhaltend. Eine feine Leiste allein ging unter. */
.schrittleiste { margin: 0 0 34px; scroll-margin-top: calc(var(--kopf) + 14px); }
.schrittleiste-liste {
  list-style: none; margin: 0; padding: 0;
  /* minmax(0, 1fr), nicht 1fr: eine Spalte mit 1fr wird nie schmaler als ihr Inhalt. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.schritt { display: block; }
.schritt-knopf {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 13px; min-height: 76px; cursor: pointer;
  background: var(--nacht); border: 1px solid var(--linie); border-bottom-width: 3px;
  color: var(--matt-hell);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.schritt-zahl {
  font-family: Anton, sans-serif; font-size: 1.35rem; line-height: 1; letter-spacing: .02em;
}
.schritt-wort {
  font: 700 12px 'Work Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Hier stehe ich. */
.schritt.ist-hier .schritt-knopf {
  background: var(--ball); border-color: var(--ball); color: var(--nacht);
  transform: translateY(-2px);
}
/* Das ist erledigt und lässt sich wieder aufrufen. */
.schritt.ist-durch .schritt-knopf {
  color: var(--ball); border-color: rgba(217,244,59,.45); border-bottom-color: var(--ball);
}
.schritt.ist-durch .schritt-knopf:hover { background: rgba(217,244,59,.12); }
/* Das kommt noch. */
/* 2,68:1 war zu wenig fuer die einzige Fortschrittsanzeige, auch wenn die Knoepfe
   formal deaktiviert sind. Jetzt 4,6:1. */
.schritt.ist-offen .schritt-knopf { color: #8a9c90; border-color: rgba(244,239,230,.1); cursor: default; }
.schritt-knopf:disabled { cursor: default; }
.schritt.ist-hier .schritt-knopf:disabled { cursor: default; }

.schrittleiste-stand {
  margin: 12px 0 0; font: 600 13px 'Work Sans', sans-serif; letter-spacing: .04em;
  color: var(--matt);
}

@media (prefers-reduced-motion: reduce) {
  .schritt-knopf { transition: none; }
  .schritt.ist-hier .schritt-knopf { transform: none; }
}

/* Die Führung: in jedem Schritt genau ein Knopf, der weiterträgt. */
.fuehrung { display: flex; gap: 12px; align-items: center; margin-top: 34px; }
.fuehrung-weiter { margin-left: auto; font-size: 15px; padding: 17px 34px; }
.fuehrung-zurueck { color: var(--matt); border-color: var(--linie); }

@media (max-width: 620px) {
  .schrittleiste-liste { gap: 5px; }
  .schritt-knopf { min-height: 62px; padding: 11px 2px 10px; gap: 4px; }
  .schritt-zahl { font-size: 1.15rem; }
  /* Auf dem Handy passt neben fünf Boxen kein Wort mehr. Welcher Schritt es ist, steht
     darunter im Klartext. */
  .schritt-wort { display: none; }
  .schritt.ist-hier .schritt-wort { display: block; font-size: 12px; letter-spacing: .02em; }
  .fuehrung-weiter { flex: 1; justify-content: center; }
}

/* Die Übersicht im letzten Schritt: was gleich abgeschickt wird. */
.uebersicht { margin: 0 0 26px; padding: 18px 20px; background: var(--nacht-2); border-left: 3px solid var(--ball); }
.uebersicht-titel {
  margin: 0 0 10px; font: 700 12px 'Work Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ball);
}
.uebersicht-liste { margin: 0; padding-left: 18px; font-size: 15px; color: var(--text); }
.uebersicht-liste li { margin-bottom: 6px; }
.uebersicht-liste b { font-weight: 700; }
.uebersicht-kontakt { margin: 12px 0 0; font-size: 14px; color: var(--matt); }

/* Der Weg zu einer weiteren Person. Steht sichtbar in der Aufstellung, nicht versteckt
   hinter "Zurück": ohne ihn kam man am Ende nicht mehr an eine zweite Anmeldung. */
.aufstellung-mehr {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 13px 20px; min-height: 44px;
  background: none; border: 1px dashed rgba(217,244,59,.5); cursor: pointer;
  font: 700 13px 'Work Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ball);
  transition: background .18s ease, border-color .18s ease;
}
.aufstellung-mehr:hover { background: rgba(217,244,59,.1); border-color: var(--ball); }
.aufstellung-mehr span { font-size: 17px; line-height: 1; }

/* Hinweis auf den Zwischenspeicher. Er steht da, weil hier Namen und Geburtsdaten von Kindern
   auf dem Gerät liegen: wer das nicht will, verwirft es mit einem Klick. */
.gesichert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 13px; color: var(--matt);
}
.gesichert > span { color: var(--ball); font-size: 12px; }
.gesichert button {
  background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer;
  font: 600 13px 'Work Sans', sans-serif; color: var(--matt);
  text-decoration: underline; text-underline-offset: 4px;
}
.gesichert button:hover { color: var(--sand-schrift); }
.gesichert-kurz { display: none; }
@media (max-width: 620px) {
  /* Auf dem Handy nimmt der ganze Satz drei Zeilen. Zwei Wörter sagen dasselbe. */
  .gesichert-lang { display: none; }
  .gesichert-kurz { display: inline; }
}

/* ---------- Zwei Klassen, die im HTML standen und nirgends beschrieben waren ---------- */
/* .sonne war ein leeres div, .band-getoent sah aus wie ein gewoehnlicher Abschnitt
   (Pruefung 28.09.2026). Beide bekommen jetzt, was ihr Name verspricht. */
.sonne {
  position: absolute; top: -14%; right: -8%; width: min(520px, 70vw); aspect-ratio: 1;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(217,244,59,.09), rgba(217,244,59,0) 62%);
}
.seitenkopf { position: relative; overflow: hidden; }
.seitenkopf .bund { position: relative; z-index: 1; }
.band-getoent { background: var(--nacht-2); }