/* ==========================================================================
   Comedy Slam Deluxe — Stylesheet
   Statisches CSS, kein Präprozessor, kein Build-Schritt.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Schritt 1 — Farbsystem
   Farbwerte stehen ausschließlich hier. Nirgendwo sonst im Stylesheet.
   ------------------------------------------------------------------------- */
:root {
  /* Seit Bauauftrag "Chemnitz-Fassung wird projektweiter Standard": die auf
     Chemnitz entwickelte, dunklere Petrol-Palette ist jetzt DIE Palette des
     gesamten Projekts — keine Sonderfassung mehr, keine [data-…]-Attribute.
     Historie (welche Werte wann warum entstanden sind) steht in STAND.md,
     Abschnitt "Historie: frühere Palettenvarianten (überholt)". */
  --grundflaeche:     #094B59;
  --akzent:           #FFC245;
  --text:             #F3EFE6;
  /* Textfarbe auf hellem --akzent-Grund (Buttons, Badges, Finale-Flächen) —
     eigene Variable, weil --grundflaeche dafür nicht mehr taugt: siehe
     "Der wiederkehrende Fehler" weiter unten. */
  --text-auf-akzent:  #1D1D1B;
  --flaeche:          color-mix(in srgb, var(--grundflaeche) 90%, var(--text) 10%);
  --linie:            color-mix(in srgb, var(--grundflaeche) 25%, var(--text) 75%);
  /* 45 % der Vorlagenfarbe #A1B6BA / 55 % --text — der höchstmögliche
     Vorlagenanteil (= am stärksten sichtbar gedämpft), der auf
     --grundflaeche UND --flaeche noch mindestens 4,5:1 erreicht. Vollständige
     Herleitung samt Kontrolltabelle: STAND.md. */
  --text-gedaempft:   color-mix(in srgb, #A1B6BA 45%, var(--text) 55%);
  /* Kleine --akzent-Beschriftungen auf --flaeche (aktueller Menüpunkt,
     Wildcard-Kategorie, Akkordeon-Symbol, Akzentpunkt, Anfahrt-Link) —
     reines --akzent reicht dort für normal große Schrift nicht überall. */
  --akzent-auf-flaeche: color-mix(in srgb, var(--akzent) 35%, var(--text) 65%);
  /* Abgedunkelter Ton für die Kopfleiste, damit sie sich deutlich von der
     Grundfläche absetzt — aus --grundflaeche und --text-auf-akzent (dem
     dunkelsten Palettenmitglied) gemischt, kein neuer Hexwert. */
  --grundflaeche-dunkel: color-mix(in srgb, var(--grundflaeche) 40%, var(--text-auf-akzent) 60%);

  /* Helle Fassung, für Druckansichten / Ticketbelege — unverändert, betrifft
     nicht die Bildschirm-Palette oben. */
  --hell-grund:       #F4F1EC;
  --hell-text:        #0A342C;
  --hell-akzent:      #C9800A;

  --schatten:         rgb(0 0 0 / 45%);

  --text-gedaempft-auf-flaeche: color-mix(in srgb, var(--text-gedaempft) 90%, var(--text) 10%);

  /* Einziger Regler für die Stärke des Lichtkegels (Bauauftrag „Sichtbarer
     Lichtkegel statt flachem Verlauf") — ausschließlich diesen Wert ändern,
     um nachzujustieren, siehe STAND.md für die Herleitung und die
     Kontrolltabelle. Alles andere an Form/Größe/Position des Kegels ist
     bewusst fest verdrahtet in der `main`-Regel weiter unten. */
  --kegel-akzent-staerke: 12%;
}

/* -------------------------------------------------------------------------
   Schriften — lokal eingebunden, kein CDN.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../schriften/Archivo-Variable.woff2") format("woff2-variations"),
       url("../schriften/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Black";
  src: url("../schriften/ArchivoBlack-Regular.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Reset & Grundlagen
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html {
  background: var(--grundflaeche);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--grundflaeche);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* Bleibt die Seite lesbar, wenn Bilder nicht laden */
img { background: var(--flaeche); }
img::before {
  content: attr(alt);
  display: block;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--text-gedaempft);
}

/* Sichtbarer Tastaturfokus auf allen Bedienelementen */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 1px;
}

.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprung-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 1000;
  background: var(--akzent);
  color: var(--grundflaeche);
  padding: 0.6rem 1rem;
  border-radius: 0.15rem;
  font-weight: 700;
  transition: top 0.15s ease;
}
.sprung-link:focus { top: 1rem; }

/* -------------------------------------------------------------------------
   Typografie
   ------------------------------------------------------------------------- */
.schrift-display {
  font-family: "Archivo Black", "Archivo", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

.schrift-daten {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }

.claim {
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  line-height: 1.3;
}

.gedaempft { color: var(--text-gedaempft); }

/* -------------------------------------------------------------------------
   Layout-Grundlagen
   ------------------------------------------------------------------------- */
.buehne {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

/* Keine Trennlinien zwischen Abschnitten (projektweiter Standard seit
   „Design projektweit vereinheitlichen" — vorher ein auf zwei Seiten
   begrenzter Testlauf über [data-trennstriche-aus], jetzt aufgelöst und
   überall gültig, keine Ausnahme mehr). Betrifft ausschließlich section +
   section (Linie ZWISCHEN Abschnitten) — Kartenrahmen (.termin-karte,
   border: 1px solid var(--linie)), die Fußzeilen-Trennung (footer, eigene
   border-top-Regel) und die angedockte Ticketleiste (.ticket-leiste, eigene
   border-top-Regel) sind vollständig getrennte Regeln und bleiben
   unverändert. Keine eigene "Linie unter der Kopfleiste": .kopfleiste hat
   keinen border-bottom, nur einen deckenden Hintergrund.

   Abstand bleibt exakt gleich groß wie mit Linie: padding-top bei
   Nicht-Erstabschnitten um genau das 1px erhöht, das die frühere
   border-top sonst eingenommen hätte (mit echtem Rendering gemessen, siehe
   STAND.md: 113px zwischen zwei regulären Abschnitten, vorher wie
   nachher). */
section { padding-block: 3.5rem; }
section + section { padding-top: calc(3.5rem + 1px); }

.abschnitt-titel {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  color: var(--text-gedaempft);
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   Kopfleiste
   ------------------------------------------------------------------------- */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  /* Deckend statt eines Transparenz-Verlaufs, damit sie sich unabhängig
     davon, was dahinterliegt (Heldenbild oder bloße Grundfläche beim
     Scrollen), immer klar von --grundflaeche absetzt. */
  background: var(--grundflaeche-dunkel);
}

.kopfleiste__logo { width: 8.5rem; height: auto; }

.menue { position: relative; }
.menue summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* Deckend statt transparent — auf der dunkleren Kopfleiste (siehe
     .kopfleiste) wäre ein durchscheinender Knopf kaum noch als eigene
     Fläche erkennbar. */
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: var(--text);
  padding: 0.5rem 0.85rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary span[aria-hidden] { transform: rotate(180deg); display: inline-block; }
.menue__liste {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 10rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.3rem;
  padding: 0.4rem;
  box-shadow: 0 0.5rem 1.5rem var(--schatten);
  z-index: 1;
}
.menue__liste a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 0.2rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.menue__liste a:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.menue__liste a[aria-current="page"] { color: var(--akzent); }

/* Bauauftrag "Menü neu ordnen und gestalten" — drei Zustände:
   1) normale Punkte (oben), 2) Bewerbung farblich umgekehrt: dort, wo die
   anderen Text auf Fläche zeigen, zeigt sie Fläche mit Text darauf — dafür
   --text-auf-akzent, NICHT --grundflaeche (siehe "Der wiederkehrende
   Fehler" im Farbsystem oben). Eigene Regel für die Kombination mit
   aria-current (statt einfach der allgemeinen Regel direkt darüber), sonst
   würde die Bewerbungsseite selbst dort nur noch reinen --akzent-Text auf
   --akzent-Fläche zeigen — unlesbar. */
.menue__liste a.menue__eintrag--bewerbung {
  background: var(--akzent);
  color: var(--text-auf-akzent);
  font-weight: 700;
}
.menue__liste a.menue__eintrag--bewerbung:hover,
.menue__liste a.menue__eintrag--bewerbung:focus-visible {
  background: color-mix(in srgb, var(--akzent) 85%, var(--text) 15%);
}
.menue__liste a.menue__eintrag--bewerbung[aria-current="page"] { color: var(--text-auf-akzent); }

/* 3) Angekündigte Städte (stadt.ankuendigung, siehe daten/staedte.js, wie
   auf Startseite/Stadtseite): gedämpft statt --text, aber weiterhin
   >= 4,5:1 auf --flaeche — --text-gedaempft-auf-flaeche ist exakt dafür da,
   siehe Farbsystem oben. Ist eine der beiden gerade die aktuelle Seite,
   gewinnt die normale aria-current-Akzentfarbe (höhere Spezifität). */
.menue__liste a.menue__eintrag--angekuendigt {
  color: var(--text-gedaempft-auf-flaeche);
  /* Ohne nowrap berechnet sich die Dropdown-Breite (shrink-to-fit) am
     kürzeren Stadtnamen, der Störer würde dann in die nächste Zeile
     rutschen statt daneben zu stehen — genau das schreibt der Bauauftrag
     aber vor ("rechts daneben"). */
  white-space: nowrap;
}
.menue__liste a.menue__eintrag--angekuendigt[aria-current="page"] { color: var(--akzent); }

/* Kleiner "Coming soon"-Störer neben angekündigten Städten — dieselbe
   Akzentfläche/Textfarbe wie das Band auf den Stadtkacheln der Startseite
   (.stadtkachel__band weiter unten), hier als kleine Pille statt
   diagonalem Band, damit sie den Stadtnamen nicht überlagert. */
.menue__stoerer {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.6rem;
  color: var(--text-auf-akzent);
  background: var(--akzent);
  border-radius: 1rem;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  vertical-align: 0.05em;
}

/* -------------------------------------------------------------------------
   Logo — SVG-Bausteine
   ------------------------------------------------------------------------- */
.logo text {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
}
.logo__comedy, .logo__deluxe { fill: var(--text); }
.logo__slam { fill: var(--akzent); }
.logo__untertitel {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  fill: var(--text-gedaempft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.logo__haarlinie { stroke: var(--linie); stroke-width: 1; }
.logo__balken-amber { fill: var(--akzent); }
.logo__balken-gedaempft { fill: var(--text-gedaempft); }

/* -------------------------------------------------------------------------
   Hero / Kopfbereich Stadtseite
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 6.5rem; /* Platz für die angedockte Ticketleiste */
  isolation: isolate;
}

.hero__medium {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__medium img { width: 100%; height: 100%; object-fit: cover; }

/* Lokal dort verankert, wo Überschrift, Datumsblock und Ticketbutton
   tatsächlich stehen (unten links), statt flächig übers ganze Foto — ein
   voll abdunkelnder Verlauf erzeugte auf der helleren Grundfläche einen
   deutlich sichtbaren Farbschleier auch dort, wo gar kein Text liegt.

   Feste rem-Maße statt Prozentwerte für die Ellipsen-Ausdehnung, bewusst:
   .hero__inhalt selbst ist als Block immer bildschirmbreit, auch wenn der
   Text darin links-bündig viel schmaler ist — ein prozentualer Radius
   relativ zu dieser Box hätte den Schleier wieder über die volle Breite
   gezogen. Feste rem-Werte verankern die Abdunklung stattdessen an der
   tatsächlichen Textgröße: Auf schmalen Bildschirmen (Text nimmt nahezu
   die volle Breite ein) deckt derselbe Radius fast alles ab, am Rechner
   (Text ist kompakt) bleibt der Rest des Fotos unangetastet — ganz ohne
   eigene Breakpoints. Mit echtem Rendering an den tatsächlich gerenderten
   Bildpunkten hinter Überschrift, Datumsblock und Button nachgemessen
   (siehe STAND.md), nicht nur rechnerisch geprüft. */
.hero__verlauf {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 34rem 20rem at 10% 85%,
    color-mix(in srgb, var(--grundflaeche) 90%, transparent) 0%,
    color-mix(in srgb, var(--grundflaeche) 55%, transparent) 50%,
    transparent 100%
  );
}

/* "Coming soon" (Bauauftrag "Coming-soon-Störer überarbeiten") — ein
   leichter Schleier über dem GESAMTEN Heldenbild statt eines kleinen
   Eckkastens, damit sofort klar ist, dass hier noch nichts läuft. Zwei
   übereinandergelegte Ebenen in einer Regel:
   1) eine gleichmäßige, bewusst schwache Abdunklung (28 % --grundflaeche)
      über das ganze Bild — "leicht", das Foto bleibt klar als Foto
      erkennbar, nur sichtbar gedämpft;
   2) ein zusätzliches, stärkeres waagerechtes BAND genau auf Höhe von
      .hero__ankuendigung (der Ankündigungszeile) — dasselbe Prinzip wie
      .hero__verlauf oben (lokale Abdunklung exakt hinter dem Text statt
      flächig über das ganze Bild), aber bewusst KEINE Ellipse mit fester
      Breite: Der Stadtname in "Bald auch in <Stadt>" ist unterschiedlich
      lang (Chemnitz/Dresden kurz, Magdeburg deutlich länger) — eine feste
      Breite hätte bei den äußeren Wörtern (z. B. dem Stadtnamen selbst)
      auf einer hellen Bildstelle den Kontrast reißen lassen (mit echtem
      Rendering gefunden: erste Fassung mit `ellipse 26rem 16rem` maß an
      den Rändern des Ankündigungstexts teils nur 2,46:1, siehe STAND.md).
      `ellipse 100% <Höhe>` löst das: horizontaler Radius = volle
      Boxbreite, der größte tatsächlich vorkommende Achsenabstand (Rand der
      Box, 50 % der Breite) bleibt damit rechnerisch immer bei höchstens der
      Hälfte des Radius — die Abdunklung wirkt dadurch über die GESAMTE
      Breite praktisch gleich stark, unabhängig von der Textlänge, und
      fällt nur nach oben/unten hin ab.
   Mit echtem Rendering gegen das tatsächliche Chemnitz-Heldenbild geprüft
   (siehe STAND.md). Bewusst ein eigenes Element statt in .hero__verlauf
   ergänzt: .hero__verlauf bleibt unverändert für den Normalzustand jeder
   Stadt zuständig (auch nach dem Abschalten von ankuendigung),
   .hero__schleier kommt nur für Städte im "Coming soon"-Zustand hinzu und
   verschwindet mit ihr wieder vollständig. */
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 100% 20rem at 50% 40%,
      color-mix(in srgb, var(--grundflaeche) 92%, transparent) 0%,
      color-mix(in srgb, var(--grundflaeche) 68%, transparent) 55%,
      transparent 100%
    ),
    color-mix(in srgb, var(--grundflaeche) 40%, transparent);
}

/* Ankündigungszeile "Bald auch in <Stadt>" — mittig im oberen Bilddrittel,
   bewusst getrennt vom unten verankerten .hero__inhalt (Stadtname, "Termine
   folgen in Kürze", Ticketbutton bleiben unverändert an ihrem Platz, siehe
   Auftrag). Inhalt kommt aus dem GENERATOR-Marker "hero-ankuendigung"
   (Python) bzw. wird zur Laufzeit gesetzt (JS) — nie als fester Text pro
   Stadt, siehe js/stadtseite.js. */
.hero__ankuendigung {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 34rem);
  text-align: center;
  font-size: clamp(1.3rem, 5.5vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}

.hero__inhalt {
  position: relative;
  padding: 1.75rem 1.25rem 2.5rem;
}

.hero__stadtname {
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--text-gedaempft);
  margin-bottom: 0.6rem;
}

.hero__naechster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--flaeche) 55%, transparent);
  border: 1px solid var(--linie);
  border-radius: 0.25rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
}
.hero__naechster strong {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hero__naechster .akzent-punkt { color: var(--akzent); }

.hero__claim { margin-bottom: 1.5rem; max-width: 26rem; }

.hero__cta-platz { display: flex; }

/* -------------------------------------------------------------------------
   Ticketbutton — immer im Daumenbereich erreichbar
   ------------------------------------------------------------------------- */
.ticket-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--akzent);
  color: var(--grundflaeche);
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  border-radius: 0.2rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
}
.ticket-button:hover { filter: brightness(1.08); }

.ticket-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--grundflaeche) 90%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--linie);
}
.ticket-leiste .ticket-button { width: 100%; }

/* -------------------------------------------------------------------------
   Terminkarten — Farbe nach Kategorie gestaffelt
   ------------------------------------------------------------------------- */
.termin-liste {
  display: grid;
  gap: 1rem;
}

.termin-karte {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--flaeche);
  border-radius: 0.3rem;
  border: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
}

.termin-karte__datum {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  grid-column: 1 / 2;
}
.termin-karte__zeit {
  grid-column: 1 / 2;
  font-size: 0.85rem;
  color: var(--text-gedaempft-auf-flaeche);
}
.termin-karte__info {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  justify-self: end;
  text-align: right;
}
.termin-karte__kategorie {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.termin-karte__ort { font-size: 0.85rem; color: var(--text-gedaempft-auf-flaeche); }
.termin-karte__pfeil {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  color: var(--text-gedaempft-auf-flaeche);
}

/* Kategorie-Staffelung, wie DESIGN.md Abschnitt 8 beschreibt */
.termin-karte--vorrunde {
  border-left: 3px solid var(--akzent);
}
.termin-karte--vorrunde .termin-karte__kategorie { color: var(--text-gedaempft-auf-flaeche); }

.termin-karte--wildcard {
  border: 1px solid var(--akzent);
}
.termin-karte--wildcard .termin-karte__kategorie { color: var(--akzent); }

.termin-karte--halbfinale,
.termin-karte--finale {
  background: var(--grundflaeche);
  border-color: var(--akzent);
}
.termin-karte--halbfinale .termin-karte__datum,
.termin-karte--finale .termin-karte__datum {
  font-size: 1.25rem;
}
.termin-karte--finale {
  background: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 16%, transparent), var(--grundflaeche) 65%);
}
.termin-karte--finale .termin-karte__datum { font-size: 1.4rem; }
.termin-karte--finale .termin-karte__kategorie {
  color: var(--grundflaeche);
  background: var(--akzent);
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
}

.termin-karte--vergangen {
  opacity: 0.5;
  border-left-color: var(--linie);
}
.termin-karte--vergangen .termin-karte__kategorie { color: var(--text-gedaempft-auf-flaeche); }

/* -------------------------------------------------------------------------
   Open Airs — deutlich abgetrennt
   ------------------------------------------------------------------------- */
.open-air-block {
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: 0.375rem;
  padding: 1.5rem;
}
.open-air-block .abschnitt-titel { margin-bottom: 0.4rem; }
.open-air-hinweis {
  color: var(--text-gedaempft-auf-flaeche);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  max-width: 34rem;
}
.termin-karte--open-air {
  border-left: 3px solid var(--text-gedaempft);
}
.termin-karte--open-air .termin-karte__kategorie { color: var(--text-gedaempft-auf-flaeche); }

/* -------------------------------------------------------------------------
   Turnierbaum
   ------------------------------------------------------------------------- */
.turnierbaum-erklaerung {
  color: var(--text-gedaempft);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
.turnierbaum-stichpunkte {
  display: grid;
  gap: 0.5rem;
  max-width: 30rem;
  margin-bottom: 1rem;
  color: var(--text-gedaempft);
}
.turnierbaum-stichpunkte li { padding-left: 1.2rem; position: relative; }
.turnierbaum-stichpunkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--akzent);
}
.turnierbaum-regeln-link { margin-bottom: 1.75rem; }
.turnierbaum-regeln-link a {
  color: var(--akzent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.turnierbaum-platz { width: 100%; }
.turnierbaum { width: 100%; height: auto; overflow: visible; }
.turnierbaum-fallback { font-size: 0.95rem; line-height: 1.9; }
.turnierbaum__linie { stroke: var(--linie); stroke-width: 2; fill: none; }
.turnierbaum a { cursor: pointer; }
.turnierbaum a:focus-visible .turnierbaum__box { stroke: var(--akzent); stroke-width: 3; }
.turnierbaum a:hover .turnierbaum__box { stroke: var(--akzent); }
.turnierbaum__box {
  fill: var(--flaeche);
  stroke: var(--linie);
  stroke-width: 1.5;
  transition: stroke 0.15s ease;
}
.turnierbaum__box--wildcard { stroke: var(--akzent); stroke-dasharray: 4 3; }
.turnierbaum__box--finale { fill: var(--akzent); }
.turnierbaum__box--vergangen { opacity: 0.5; }
.turnierbaum__text {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  fill: var(--text);
}
.turnierbaum__text--finale { fill: var(--grundflaeche); }
.turnierbaum__text--gedaempft { fill: var(--text-gedaempft-auf-flaeche); font-weight: 500; }
.turnierbaum__datum {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  fill: var(--text-gedaempft-auf-flaeche);
}
.turnierbaum__datum--finale { fill: color-mix(in srgb, var(--grundflaeche) 75%, transparent); }

/* -------------------------------------------------------------------------
   Turnierbaum-Vergleichsfassungen.
   Leipzig: echter Baum, waagerecht (HTML-Knoten, Linien als SVG dahinter).
   Chemnitz: Treppe (reines HTML/CSS). Dresden: Klammer (HTML-Knoten, eine
   SVG-Klammer). Magdeburg bleibt beim SVG-Baum oben unverändert.
   ------------------------------------------------------------------------- */

/* Leipzig — Baum, waagerecht: links Runden-Knoten (HTML), rechts Finale,
   dazwischen eine reine Linien-SVG (kein SVG-Text). Zwei fertig gebackene
   Linienpfade (mobil/desktop), CSS blendet je nach Breite den passenden
   ein — keine Laufzeitmessung der DOM-Positionen nötig, siehe Kommentar
   in js/turnierbaum.js. */
.baum-quer {
  display: flex;
  flex-direction: column;
}
.baum-quer__runden {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.baum-quer__knoten {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 3.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.35rem;
  padding: 0 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.baum-quer__knoten:hover,
.baum-quer__knoten:focus-visible {
  border-color: var(--akzent);
}
.baum-quer__knoten--vergangen { opacity: 0.5; }
.baum-quer__nummer {
  flex-shrink: 0;
  min-width: 1.6ch;
  text-align: center;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.5rem;
  color: var(--akzent);
}
.baum-quer__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.baum-quer__runde {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-gedaempft-auf-flaeche);
}
.baum-quer__datum { font-size: 1.05rem; font-weight: 600; color: var(--text); }

.baum-quer__gutter {
  position: relative;
  width: 100%;
  height: 2.5rem;
  flex-shrink: 0;
}
.baum-quer__gutter svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.baum-quer__gutter path {
  fill: none;
  stroke: var(--linie);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.baum-quer__linien--desktop { display: none; }

.baum-quer__finale-spalte { display: flex; }
.baum-quer__finale {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  background: var(--akzent);
  color: var(--grundflaeche);
  border-radius: 0.425rem;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
}
.baum-quer__finale--vergangen { opacity: 0.5; }
.baum-quer__finale-label {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.baum-quer__finale .baum-quer__datum { color: var(--grundflaeche); font-size: 1.3rem; }
.baum-quer__meta { font-size: 0.9rem; color: color-mix(in srgb, var(--grundflaeche) 75%, transparent); }

/* Chemnitz — Treppe: verfeinert (flacher, schmalere/kleinere Ziffern,
   weniger Einrückung, kaum noch Rahmen). Struktur unverändert gegenüber
   der ersten Fassung, nur die Maße. */
.treppe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.treppe__stufe {
  margin-left: calc(var(--stufe, 0) * 0.4rem);
  transition: margin-left 0.2s ease;
}
.treppe__stufe a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--flaeche);
  border-radius: 0.275rem;
  padding: 0.5rem 0.8rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.treppe__stufe a:hover { background: color-mix(in srgb, var(--flaeche) 82%, var(--akzent) 18%); }
.treppe__stufe a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.treppe__stufe--vergangen { opacity: 0.5; }
.treppe__ziffer {
  flex-shrink: 0;
  min-width: 1.5ch;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1.4rem, 5vw, 1.7rem);
  line-height: 1;
  color: var(--akzent);
  text-align: center;
  letter-spacing: -0.01em;
}
.treppe__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.treppe__runde {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-gedaempft-auf-flaeche);
}
.treppe__datum { font-size: 1rem; font-weight: 600; color: var(--text); }
.treppe__stufe--wildcard { margin-left: calc(var(--stufe, 0) * 0.4rem + 0.8rem); }
.treppe__stufe--wildcard a { border: 1px dashed var(--akzent); padding: calc(0.5rem - 1px) calc(0.8rem - 1px); }
.treppe__nebenweg {
  position: absolute;
  top: -0.55rem;
  right: 0.85rem;
  background: var(--akzent);
  color: var(--grundflaeche);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
}
.treppe__stufe--finale { margin-left: 0; }
.treppe__stufe--finale a { background: var(--akzent); padding: 0.7rem 0.95rem; }
.treppe__stufe--finale .treppe__ziffer,
.treppe__stufe--finale .treppe__runde,
.treppe__stufe--finale .treppe__datum {
  color: var(--grundflaeche);
}
.treppe__stufe--finale .treppe__datum { font-size: 1.05rem; }

/* Dresden — Klammer: Runden links (HTML), rechts eine einzige geschweifte
   Klammer (ein SVG-Pfad statt vieler Linien), die sich per
   preserveAspectRatio="none" der Höhe der Rundenliste anpasst, dahinter
   das Finale. */
.klammer {
  display: grid;
  grid-template-columns: 1fr 2.25rem auto;
  align-items: center;
}
.klammer__runden {
  grid-column: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.klammer__knoten {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.3rem;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.klammer__knoten:hover,
.klammer__knoten:focus-visible {
  border-color: var(--akzent);
}
.klammer__knoten--vergangen { opacity: 0.5; }
.klammer__nummer {
  flex-shrink: 0;
  min-width: 1.4ch;
  text-align: center;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.3rem;
  color: var(--akzent);
}
.klammer__info { display: flex; flex-direction: column; min-width: 0; }
.klammer__datum { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.klammer__ort { font-size: 0.7rem; color: var(--text-gedaempft-auf-flaeche); }

.klammer__gutter {
  grid-column: 2;
  align-self: stretch;
  position: relative;
  min-height: 6rem;
}
.klammer__gutter svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.klammer__gutter path {
  fill: none;
  stroke: var(--linie);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.klammer__finale {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--akzent);
  color: var(--grundflaeche);
  border-radius: 0.35rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  max-width: 9rem;
}
.klammer__finale--vergangen { opacity: 0.5; }
.klammer__finale-label { font-family: "Archivo Black", sans-serif; font-size: 1.05rem; text-transform: uppercase; }
.klammer__finale .klammer__datum { color: var(--grundflaeche); font-size: 1rem; }
.klammer__finale .klammer__ort { color: color-mix(in srgb, var(--grundflaeche) 75%, transparent); }

/* Alle drei Varianten: volle Breite erzwingen, auch wenn .turnierbaum-platz
   am Rechner (siehe unten) auf display:flex wechselt — sonst würden die
   Spalten/Stufen auf Inhaltsbreite schrumpfen. */
.baum-quer, .treppe, .klammer { width: 100%; }

@media (min-width: 900px) {
  .baum-quer { flex-direction: row; align-items: stretch; }
  .baum-quer__runden { flex: 1; gap: 0.75rem; }
  .baum-quer__knoten { height: 4.25rem; }
  .baum-quer__nummer { font-size: 1.75rem; }
  .baum-quer__datum { font-size: 1.15rem; }
  .baum-quer__gutter { width: 4rem; height: auto; }
  .baum-quer__linien--mobil { display: none; }
  .baum-quer__linien--desktop { display: block; }
  .baum-quer__finale-spalte { flex: 0 0 15rem; align-items: center; }

  .treppe__stufe { margin-left: calc(var(--stufe, 0) * 1rem); }
  .treppe__stufe--wildcard { margin-left: calc(var(--stufe, 0) * 1rem + 1.6rem); }
  .treppe__stufe--finale { margin-left: 0; }
  .treppe__ziffer { font-size: 2rem; }

  .klammer { grid-template-columns: 1fr 4rem auto; }
  .klammer__nummer { font-size: 1.8rem; }
  .klammer__datum { font-size: 1.1rem; }
  .klammer__ort { font-size: 0.8rem; }
  .klammer__finale { max-width: 13rem; padding: 1.2rem 1.4rem; }
  .klammer__finale-label { font-size: 1.3rem; }
  .klammer__finale .klammer__datum { font-size: 1.3rem; }
}

/* -------------------------------------------------------------------------
   Der Abend — Publikumsfotos
   ------------------------------------------------------------------------- */
.abend-text {
  color: var(--text-gedaempft);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.publikum-reihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.publikum-reihe img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* -------------------------------------------------------------------------
   Anfahrt
   ------------------------------------------------------------------------- */
.anfahrt-karte {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.375rem;
  padding: 1.5rem;
}
.anfahrt-karte img {
  width: 100%;
  max-width: 12rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.25rem;
}
.anfahrt-karte__text { flex: 1 1 14rem; }
.anfahrt-karte address { font-style: normal; color: var(--text-gedaempft-auf-flaeche); margin-top: 0.35rem; }
.anfahrt-karte__link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--akzent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------------
   Line-up (Terminseiten)
   ------------------------------------------------------------------------- */
.lineup-moderation {
  color: var(--text-gedaempft);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.lineup-moderation a { color: var(--akzent); text-decoration: underline; text-underline-offset: 0.2em; }
.lineup-hinweis {
  color: var(--text-gedaempft);
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: 0.3rem;
  padding: 1.25rem;
}
.lineup-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.lineup-eintrag {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.3rem;
  overflow: hidden;
}
.lineup-eintrag summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem;
  cursor: pointer;
  list-style: none;
}
.lineup-eintrag summary::-webkit-details-marker { display: none; }
.lineup-eintrag summary img {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--grundflaeche);
}
.lineup-eintrag__name { font-weight: 700; font-size: 0.95rem; }
.lineup-eintrag__handles {
  padding: 0 0.9rem 0.9rem 4.3rem;
  font-size: 0.85rem;
}
.lineup-eintrag__handles a { color: var(--akzent); text-decoration: underline; text-underline-offset: 0.2em; margin-right: 0.5rem; }
.lineup-eintrag--platzhalter {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem;
  opacity: 0.6;
}
.lineup-eintrag__platzhalter-bild {
  display: block;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--grundflaeche);
  border: 1px dashed var(--linie);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Terminseite — Zurück-Link
   ------------------------------------------------------------------------- */
.zurueck-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-gedaempft);
  text-decoration: none;
  font-weight: 600;
}
.zurueck-link:hover { color: var(--text); }

/* -------------------------------------------------------------------------
   Fragen — aufklappbare Antworten
   ------------------------------------------------------------------------- */
.fragen-hinweis {
  color: var(--text-gedaempft);
  font-size: 0.9rem;
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.fragen-liste { display: grid; gap: 0.75rem; }
.frage {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.3rem;
  padding: 0.9rem 1.1rem;
}
.frage summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  float: right;
  color: var(--akzent);
  font-weight: 400;
}
.frage[open] summary::after { content: "–"; }
.frage p {
  margin-top: 0.75rem;
  color: var(--text-gedaempft-auf-flaeche);
  font-size: 0.95rem;
}
.entwurf-marke {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grundflaeche);
  background: var(--text-gedaempft);
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Regeln-Seite
   ------------------------------------------------------------------------- */
.regeln-entwurf-hinweis {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.3rem;
  padding: 0.9rem 1.1rem;
  max-width: 34rem;
}
.regeln-entwurf-hinweis p {
  color: var(--text-gedaempft-auf-flaeche);
  font-size: 0.9rem;
}
.spielzeit-liste {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
  max-width: 34rem;
}
.spielzeit-liste li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0.3rem;
  padding: 0.7rem 1rem;
}
.spielzeit-liste strong { color: var(--text); }
.spielzeit-liste span { color: var(--text-gedaempft-auf-flaeche); font-size: 0.9rem; }

/* Bauauftrag "Regelseite neu aufbauen" — Stichpunkte, wie im Auftrag
   gefordert ("alles in Stichpunkten, außer den Stellen, die ausdrücklich als
   Fließtext stehen"). Dieselbe Optik wie die Aufzählungen in den
   Rechtstexten (.rechtstext ul), hier als eigene Klasse, weil /regeln/ nicht
   in .rechtstext eingebettet ist. */
.regeln-liste {
  margin: 0;
  padding-left: 1.4rem;
  list-style: disc;
  display: grid;
  gap: 0.5rem;
  max-width: 42rem;
}

/* Inline-Hervorhebung innerhalb eines Fließtext-Satzes (hier: das
   Preisgeld) — dieselbe Bedeutung von <strong> auf --akzent wie bereits
   .rechtstext-hinweis/.rechtstext-offen es vormachen, nur unter eigenem
   Namen, weil /regeln/ kein Rechtstext ist. Keine neue Farbe. */
.regeln-hervorhebung strong { color: var(--akzent); }

/* Dezenter Textlink zur Bewerbung — bewusst NICHT die laute --akzent-Farbe
   der übrigen Links (die Seite richtet sich ans Publikum, nicht an
   Bewerber), sondern gedämpft, wie ein Nebensatz. */
.regeln-bewerben-link a {
  color: var(--text-gedaempft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-size: 0.95rem;
}

/* Terminübersicht — Bauauftrag "Regelseite neu aufbauen", seit Bauauftrag
   "Terminübersicht einrahmen und auf /bewerbung/ übernehmen" EIN gemeinsamer
   Baustein für /regeln/ UND /bewerbung/ statt zweier Fassungen, die
   auseinanderlaufen könnten: beide Seiten binden denselben GENERATOR-Marker-
   Wrapper mit der Klasse .termine-uebersicht ein (unterscheiden sich nur
   über ihr jeweiliges data-Attribut, data-regeln-termine bzw.
   data-bewerbung-termine, wie zuvor). Zeilen-/Finale-Komponente weiterhin
   .bewerbung-termine__stadt und Kinder (siehe js/regelnseite.js). Zwei-
   Spalten-Raster für breite Bildschirme, ohne Media Query (schmale
   Bildschirme) ist ein CSS-Grid ohne grid-template-columns einspaltig —
   Leipzig steht im Markup zuerst, damit es dort automatisch oben landet. */
.termine-uebersicht {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .termine-uebersicht { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.regeln-termine__button { margin-top: 1rem; }

/* -------------------------------------------------------------------------
   Bewerbungsseite — Terminliste (Bauauftrag "Termine aus dem Lineup-System
   übernehmen"). Reine Informationsliste für Bewerber: kein Ticketlink, keine
   Verlinkung auf Terminseiten (anders als .termin-karte) — deshalb eigene,
   schlichtere Klassen statt einer Wiederverwendung von .termin-karte, die
   strukturell auf einen Link ausgelegt ist.
   ------------------------------------------------------------------------- */
/* Rahmen um jede Stadt (Bauauftrag "Terminübersicht einrahmen und auf
   /bewerbung/ übernehmen") — macht sichtbar, dass jede Stadt ein
   eigenständiges Turnier ist. Zurückhaltend: derselbe --linie-Ton, den die
   Zeilentrennung darunter längst verwendet, keine neue Farbe. Ersetzt das
   vorige margin-top (das nur den Abstand zwischen den Städten auf der
   ungerasterten Bewerbungsseite herstellte) — dieser Abstand kommt jetzt
   einheitlich aus dem gap von .termine-uebersicht, auf beiden Seiten
   gleich. Padding hält das Finale (eigener --akzent-Rahmen weiter unten)
   auf Abstand zum äußeren Rahmen, damit beide Rahmen nicht aneinanderstoßen
   und miteinander konkurrieren. */
.bewerbung-termine__stadt {
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: 0.5rem;
}
.bewerbung-termine__stadt-name {
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.bewerbung-termine__liste { display: grid; }
.bewerbung-termin {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linie);
  /* Datum/Uhrzeit und Spielort sollen erkennbar zusammengehören — die
     ererbte line-height:1.5 (body) fügt oben/unten an jeder der beiden
     Zeilen zusätzliche "Leerraum" (Leading) hinzu, der optisch mehr wiegt
     als der eigentliche 0.1rem-Grid-Gap. Etwas enger, aber nicht so eng,
     dass die Zeilen aneinanderkleben. Der Abstand ZWISCHEN Termineinträgen
     bleibt unangetastet (weiterhin allein über das padding oben geregelt). */
  line-height: 1.3;
}
.bewerbung-termin__bezeichnung {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.bewerbung-termin__datum { grid-column: 2; text-align: right; font-size: 0.9rem; }
.bewerbung-termin__ort { grid-column: 1; color: var(--text-gedaempft); font-size: 0.9rem; }

/* Finale deutlich abgesetzt — dieselbe Sprache wie überall sonst im Projekt
   für Finaltermine: --flaeche als "Karten"-Untergrund (statt der bloßen
   Seitenfläche, wie .termin-karte es für alle Karten schon tut) plus ein
   --akzent-Rahmen. Keine neue Farbe, nur die bereits etablierte Bedeutung
   dieser beiden Variablen wiederverwendet. */
.bewerbung-termin--finale {
  grid-template-columns: 1fr auto;
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  border-radius: 0.3rem;
  padding: 0.9rem 1rem;
  margin-top: 0.5rem;
}
.bewerbung-termin--finale .bewerbung-termin__ort { color: var(--text-gedaempft-auf-flaeche); }

/* -------------------------------------------------------------------------
   Fußbereich
   ------------------------------------------------------------------------- */
footer {
  padding: 2.5rem 0 7rem;
  border-top: 1px solid var(--linie);
  color: var(--text-gedaempft);
  font-size: 0.85rem;
}
.fuss-logo { width: 7rem; margin-bottom: 1.25rem; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
.fuss-links a { color: var(--text-gedaempft); text-decoration: underline; text-underline-offset: 0.2em; }
.bildnachweis { font-size: 0.8rem; }

/* -------------------------------------------------------------------------
   Startseite — Konzept-Erklärung
   ------------------------------------------------------------------------- */
.start-konzept {
  max-width: 34rem;
  display: grid;
  gap: 1rem;
}
.start-konzept__zeile { margin-bottom: 0.25rem; }

/* -------------------------------------------------------------------------
   Startseite — Stadtkacheln
   ------------------------------------------------------------------------- */
.stadtkacheln {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.stadtkachel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 0.375rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  isolation: isolate;
}
.stadtkachel img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; /* height:100% löst über <picture> ohne definierte Höhe nicht auf */
  object-fit: cover;
}
/* Volle Breite (Stadtname und Termin-Datum stehen nebeneinander in einer
   Zeile und beanspruchen fast die volle Kachelbreite, z. B. "CHEMNITZ Do
   12. Nov" — eine auf einen Punkt verengte Abdunklung ließ das Datum
   unlesbar über einem hellen Bilddetail stehen, mit echtem Rendering
   gefunden), aber deutlich kürzerer Verlauf nach oben (42 % statt 60 % der
   Kachelhöhe) — der überwiegende obere Teil jeder Kachel bleibt dadurch
   unverfälscht. Für alle vier Städte gleich, seit die Palette einheitlich
   ist (vorher nur für Chemnitz/Leipzig, siehe STAND.md). */
.stadtkachel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--grundflaeche) 90%, transparent) 0%, transparent 42%);
}
.stadtkachel__inhalt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.25rem;
  z-index: 1;
}
.stadtkachel__name {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.stadtkachel__termin { color: var(--text-gedaempft); font-size: 0.9rem; margin-top: 0.15rem; }

/* "Coming soon" — zusätzlich zum diagonalen Band (weiter unten) eine leichte
   Ausgrauung der ganzen Kachel (Bauauftrag "Dresden auf Coming soon, Städte
   neu sortieren"), damit der Unterschied zu den aktiven Städten sofort
   erkennbar ist. Bewusst per filter:grayscale statt einer zusätzlichen
   halbtransparenten Fläche (wie beim Hero-Schleier) — eine weitere Fläche
   ÜBER dem Bild hätte entweder das Bild stärker verdeckt oder, dünn genug,
   kaum einen sichtbaren Unterschied gemacht; grayscale() dämpft stattdessen
   die vorhandenen Farben selbst (Bild UND Band), "Ausgrauung" im wörtlichen
   Sinn, ohne eine zusätzliche Fläche einzuziehen, die den Stadtnamen erneut
   überdecken könnte. Kein brightness()/opacity() zusätzlich: beides hätte
   die Leuchtdichte verändert und damit den Kontrast zum Stadtnamen unnötig
   aufs Spiel gesetzt — grayscale() allein verändert die Leuchtdichte kaum
   (die Gewichtung entspricht in etwa der WCAG-Leuchtdichteformel), mit
   echtem Rendering gegengeprüft (siehe STAND.md). */
.stadtkachel--ankuendigung { filter: grayscale(65%); }

/* Hervorhebung der zuletzt besuchten Stadt — rein client-seitig (JS liest
   die in localStorage gemerkte Stadt, siehe js/navigation.js), deshalb ohne
   Entsprechung im No-JS-Fallback. Badge im selben Pillen-Idiom wie
   .entwurf-marke/.termin-karte--finale .termin-karte__kategorie. */
.stadtkachel--gemerkt { outline: 2px solid var(--akzent); outline-offset: -2px; }
.stadtkachel__badge {
  display: block;
  width: fit-content;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grundflaeche);
  background: var(--akzent);
  border-radius: 1rem;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------
   "Coming soon" — Bauauftrag "Coming-soon-Störer überarbeiten". Löst den
   vorigen kleinen Eckkasten (.stoerer, siehe STAND.md) ab, der als zu
   unauffällig gemeldet wurde. Zwei unterschiedliche, aber verwandte
   Bausteine: ein diagonales Band auf der Stadtkachel (unten), ein Schleier
   über dem gesamten Heldenbild plus eigene Ankündigungszeile im Hero
   (siehe Hero-Abschnitt weiter unten).

   Beide Fälle setzen KEIN display auf einem Element, das zugleich per
   hidden-Attribut umgeschaltet wird, OHNE eine eigene [hidden]-Regel
   danebenzustellen — das war die Ursache eines echten, im vorigen Auftrag
   gefundenen Fehlers (eigene display-Deklaration schlägt sonst als
   Autorenregel die browsereigene [hidden]{display:none}-Regel). */
.stadtkachel__band[hidden],
.hero__schleier[hidden],
.hero__ankuendigung[hidden] { display: none; }

/* Diagonales Band, Aufschrift "Coming soon" (fest, nicht pro Stadt — nur
   die Ankündigungszeile im Hero ist personalisiert, siehe unten). Läuft
   flach diagonal durch den unteren Bildbereich, an beiden Enden nahe der
   Unterkante ("von unten links nach unten rechts"): volle Breite plus
   Überhang links/rechts (damit die Drehung nirgends eine Lücke zeigt),
   .stadtkachel schneidet den Überhang per overflow:hidden sauber ab.

   Position (top, in % der Kachelhöhe statt rem) UND die flache Drehung
   (6°) sind bewusst so gewählt, dass das Band auf JEDER Kachelgröße
   oberhalb von .stadtkachel__inhalt bleibt — mit echtem Rendering auf
   beiden Breiten nachgemessen (Bounding-Boxen von Band und Namensblock
   überschneiden sich nirgends, siehe STAND.md).

   Prozentwerte statt fester rem-Maße, weil .stadtkachel__inhalt eine feste
   (rem-basierte) Höhe hat, die Kachel selbst aber je nach Spaltenzahl/
   Breakpoint stark in der Größe variiert — ein fester rem-Versatz hätte auf
   der kleinsten Kachel zu wenig Abstand zum Namen gelassen. Echter Fund
   beim Nachmessen, GEGENTEIL der ersten Annahme: nicht Mobil (zweispaltig),
   sondern Desktop (vierspaltig) hat hier die KLEINEREN Kacheln (aspect-
   ratio 4/3 an der jeweiligen Spaltenbreite gemessen: Mobil-Kachel ≈263px
   hoch, Desktop-Kachel ≈195px) — eine erste Fassung mit `top:54%` und einer
   am breiteren Breakpoint sogar noch vergrößerten Schrift überschnitt sich
   deshalb exakt am Desktop-Breakpoint mit dem Namen, obwohl Mobil noch
   sauber war. `top:36%`, an beiden Breiten gegen die tatsächliche
   Namensposition nachgemessen, lässt auf beiden Breiten deutlichen
   Abstand. */
.stadtkachel__band {
  position: absolute;
  left: -10%;
  width: 120%;
  top: 36%;
  transform: rotate(-6deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0;
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  color: var(--text-auf-akzent);
  background: color-mix(in srgb, var(--akzent) 85%, transparent);
}

/* -------------------------------------------------------------------------
   Startseiten-Hero
   ------------------------------------------------------------------------- */
.start-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.start-hero__inhalt { position: relative; padding: 2rem 1.25rem 3rem; }
.start-hero__unterzeile { margin-top: 1rem; max-width: 26rem; color: var(--text-gedaempft); }

/* -------------------------------------------------------------------------
   Breakpoints — Desktop ist die Ableitung, nicht die Hauptfassung.
   ------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .stadtkacheln { grid-template-columns: repeat(2, 1fr); }
  .publikum-reihe { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .stadtkacheln { grid-template-columns: repeat(4, 1fr); }
  .hero__inhalt, .start-hero__inhalt { padding-inline: 3rem; }
  .termin-liste { grid-template-columns: repeat(2, 1fr); }
  .lineup-liste { grid-template-columns: repeat(3, 1fr); }
  .ticket-leiste { display: none; } /* am Desktop reicht der Button im Hero */
  .hero { padding-bottom: 0; }

  /* Der Turnierbaum passt am Rechner in eine Bildschirmhöhe statt in
     voller Breite zu skalieren (dabei würde jede Vorrunde riesig, man
     müsste mehrfach scrollen für eine einzige Grafik). */
  .turnierbaum-platz { display: flex; justify-content: center; }
  .turnierbaum { width: auto; height: min(74vh, 620px); }
}

@media (min-width: 1200px) {
  .termin-liste { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Druckansicht — helle Fassung
   ------------------------------------------------------------------------- */
@media print {
  :root {
    --grundflaeche: var(--hell-grund);
    --flaeche: color-mix(in srgb, var(--hell-grund) 94%, var(--hell-text) 6%);
    --text: var(--hell-text);
    --akzent: var(--hell-akzent);
  }
  .ticket-leiste, .sprung-link { display: none; }

  /* hell-akzent (#C9800A) erreicht als kleine Textfarbe nicht WCAG-AA (siehe STAND.md).
     Für Fließtext in dieser Größe wird deshalb --text verwendet, der Akzent bleibt
     Rahmen/Fläche vorbehalten, wo die Anforderung niedriger ist. */
  .termin-karte__kategorie,
  .hero__naechster .akzent-punkt {
    color: var(--text);
  }
  .termin-karte--finale .termin-karte__kategorie {
    background: none;
    color: var(--text);
    border: 1.5px solid var(--akzent);
  }
}

/* -------------------------------------------------------------------------
   Der wiederkehrende Fehler — projektweit behoben.

   --grundflaeche wird an mehreren Stellen als Textfarbe auf hellem --akzent-
   Grund gebraucht (Ticketbutton, Sprung-Link, Finale-/Wildcard-Flächen,
   „Nebenweg"-Pille, Stadtkachel-Badge) — dafür gibt es die eigens dafür
   vorgesehene --text-auf-akzent. Ursprünglich nur für die Chemnitz-Palette
   umgeleitet (dort war die alte, sehr dunkle --grundflaeche #04262C ohnehin
   passend, die neue #094B59 nicht mehr zuverlässig genug: 6,04:1 statt
   10,50:1 mit --text-auf-akzent). Jetzt, wo die ganze Seite dieselbe
   Grundfläche nutzt, muss dieselbe Umleitung überall greifen — automatisiert
   gescannt (jede color-/fill-Deklaration mit var(--grundflaeche) im
   gesamten Stylesheet, nicht nur die hier schon bekannten Stellen). Dabei
   neu gefunden, weil Magdeburgs SVG-Baum und Dresdens Klammer bisher nie
   unter dieser Palette liefen und deshalb nie geprüft wurden:
   .turnierbaum__text--finale/.turnierbaum__datum--finale (Magdeburg) und
   .klammer__finale samt Kindern (Dresden) — beide sitzen auf einer
   --akzent-Fläche, genau wie die längst bekannten Fälle. Ebenso neu:
   .stadtkachel__badge (Startseite), die es zum Zeitpunkt der ursprünglichen
   Chemnitz-Umleitung noch gar nicht gab. */
.sprung-link,
.ticket-button,
.termin-karte--finale .termin-karte__kategorie,
.treppe__nebenweg,
.treppe__stufe--finale .treppe__ziffer,
.treppe__stufe--finale .treppe__runde,
.treppe__stufe--finale .treppe__datum,
.baum-quer__finale,
.baum-quer__finale .baum-quer__datum,
.klammer__finale,
.klammer__finale .klammer__datum,
.stadtkachel__badge {
  color: var(--text-auf-akzent);
}
.turnierbaum__text--finale {
  fill: var(--text-auf-akzent);
}
/* .baum-quer__meta (Leipzig) und .klammer__finale .klammer__ort (Dresden)
   mischen --grundflaeche mit transparent statt einer reinen Zuweisung —
   eigene Regeln mit derselben Ersetzung. */
.baum-quer__meta,
.klammer__finale .klammer__ort {
  color: color-mix(in srgb, var(--text-auf-akzent) 75%, transparent);
}
.turnierbaum__datum--finale {
  fill: color-mix(in srgb, var(--text-auf-akzent) 75%, transparent);
}

/* Gegenrichtung: kleine --akzent-Beschriftungen auf --flaeche. Große/fette
   Akzent-Vorkommen (Treppen-/Baum-quer-/Klammer-Ziffern) bleiben bei reinem
   --akzent, weil Großschrift schon ab 3:1 reicht und das erreicht wird
   (4,74:1) — nur normal große Beschriftung braucht die aufgehellte Fassung.
   Automatisiert gescannt wie oben — keine bislang unentdeckten Fälle
   gefunden, dieselben fünf Stellen wie zuvor, jetzt nur unskopiert. */
.menue__liste a[aria-current="page"],
.termin-karte--wildcard .termin-karte__kategorie,
.frage summary::after,
.hero__naechster .akzent-punkt,
.anfahrt-karte__link {
  color: var(--akzent-auf-flaeche);
}

/* -------------------------------------------------------------------------
   Lichtkegel — Bauauftrag „Sichtbarer Lichtkegel statt flachem Verlauf".
   Löst den vorigen, 5 % neutralen Flächenverlauf ab (siehe STAND.md, dort
   als überholt gekennzeichnet) — der war beim Scrollen nicht wahrnehmbar.
   Weiterhin kein JavaScript, weiterhin unbewegt: eine rein deklarative
   CSS-Eigenschaft, die mit dem Inhalt scrollt wie jeder andere Hintergrund.

   Statt eines über die volle Breite gleichmäßig hellen Streifens (das war
   der Verlauf) jetzt ein radialer Kegel, waagerecht mittig, der oben am
   Beginn des Inhalts ansetzt und nach unten UND zu den Seiten weich
   ausläuft — dafür `radial-gradient` statt `linear-gradient`: eine Ellipse,
   deren Mittelpunkt oben-mittig liegt (`at 50% 0%`), mit großzügigem
   horizontalem Radius (65 % der Breite), damit ein breiter Kegel entsteht
   statt einer kleinen Lichtinsel — an den seitlichen Rändern trotzdem
   längst auf reiner --grundflaeche angekommen (bei 50 % Distanz vom
   Mittelpunkt zum Rand gegenüber einem angesetzten Radius von 65 % ist der
   Rand rechnerisch innerhalb des Auslaufs, nicht scharf abgeschnitten).

   Farbe: --akzent in --grundflaeche gemischt (Wärme statt der zuvor
   neutralen --text-Beimischung), über die einzige Stärke-Variable
   `--kegel-akzent-staerke` in :root gesteuert — GENAU DORT und nur dort
   ändern, um den Kegel nachzujustieren, siehe Herleitung und
   Kontrolltabelle in STAND.md.

   Feste Strecke statt Prozentanteil von <main> — unverändert aus dem
   vorigen Verlauf übernommen: <main> enthält den Hero als erstes Kind mit
   variabler Höhe (min-height:100svh/92svh, siehe .hero/.start-hero), ein
   prozentualer Bezug auf <main> selbst hätte je nach Seitenlänge zu früh
   oder zu spät ausgelaufen sein können. 200svh (mehr als die höchste
   vorkommende Hero-Mindesthöhe) über `background-size` fest verankert
   sorgt dafür, dass der Kegel auf JEDER Seite tatsächlich unterhalb des
   Heldenbildes ansetzt und sichtbar ist.

   Der Hero selbst braucht weiterhin keine eigene Ausschlussregel:
   `.hero__medium`/`.hero__verlauf` liegen undurchsichtig VOR diesem
   Hintergrund im selben Stapelkontext (mit echtem Rendering geprüft, siehe
   STAND.md). Auf Seiten ohne Hero (Rechtstexte, Bewerbung) beginnt <main>
   direkt am Seitenanfang — dieselbe Regel wirkt dort automatisch von
   Anfang an, ohne Fallunterscheidung.

   background-repeat:no-repeat plus die feste background-size lassen <main>
   unterhalb der 200svh wieder transparent — dort und an der Fußzeile (kein
   eigener Hintergrund) scheint dieselbe einheitliche Grundfläche von
   <body>/<html> durch wie am Ende des Kegels — kein Bruch an der
   <main>/<footer>-Grenze.

   body:not(.muster-seite) schützt wie bisher die eingefrorene Musterseite. */
body:not(.muster-seite) main {
  background-image: radial-gradient(
    ellipse 65% 45% at 50% 0%,
    color-mix(in srgb, var(--akzent) var(--kegel-akzent-staerke), var(--grundflaeche)) 0%,
    var(--grundflaeche) 65%
  );
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 200svh;
}

/* -------------------------------------------------------------------------
   Rechtstexte (Impressum, Datenschutz) — lange Fließtextseiten, keine
   Eventseiten. Lesbarkeit geht vor Wirkung: begrenzte Zeilenlänge, klar
   abgesetzte Überschriften, großzügiger Abstand zwischen Absätzen. Nutzt
   ganz normal die Standard-Variablen — zieht bei einer Palettenumstellung
   automatisch mit, wie jede andere Seite auch (kein [data-…]-Attribut).
   ------------------------------------------------------------------------- */
.rechtstext { max-width: 70ch; }
.rechtstext-h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  margin-bottom: 2rem;
  overflow-wrap: break-word;
  hyphens: auto; /* "Datenschutzerklärung" ist ein einzelnes, langes
    Wort ohne Leerzeichen zum natürlichen Umbruch — bricht auf schmalen
    Bildschirmen sonst aus der Spalte aus. */
}
.rechtstext h2 {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.2rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p { margin-bottom: 1.25rem; line-height: 1.7; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext ul { margin: 0 0 1.25rem; padding-left: 1.5rem; list-style: disc; }
.rechtstext li { margin-bottom: 0.4rem; line-height: 1.7; }
.rechtstext a { color: var(--akzent); text-decoration: underline; text-underline-offset: 0.2em; }
.rechtstext em { color: var(--text-gedaempft); font-style: italic; }

/* Auffälliger Block ganz oben: Text ist unvollständig, Seite darf noch
   nicht live gehen. Wird zusammen mit den .rechtstext-offen-Markierungen
   vor dem Livegang entfernt. */
.rechtstext-hinweis {
  background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche));
  border: 1px solid var(--akzent);
  border-left-width: 4px;
  border-radius: 0.3rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 2.5rem;
}
.rechtstext-hinweis p { margin-bottom: 0.6rem; font-size: 0.95rem; }
.rechtstext-hinweis p:last-child { margin-bottom: 0; }
.rechtstext-hinweis strong { color: var(--akzent); }

/* Einzelne Lücken im Text, dort wo RECHTSTEXTE.md ein ⚠️ markiert —
   deutlich sichtbar in Akzentfarbe, mit "OFFEN" davor, egal ob als eigener
   Absatz oder mitten im Satz eingebettet. */
.rechtstext-offen, p.rechtstext-offen { color: var(--akzent); }
.rechtstext-offen strong { color: var(--akzent); }

/* ===========================================================================
   Musterseite (/muster/) — EINZIGE STELLE IM PROJEKT MIT FESTEN HEXWERTEN.

   Die Musterseite ist ein Nachschlagewerk, kein Nutzerinhalt: Sie konserviert
   die ursprüngliche Farbwelt und die ursprünglichen, vollen Rundungen zum
   späteren Vergleich mit Überarbeitungen (z. B. der neuen Chemnitz/Leipzig-
   Palette). Genau deshalb darf sie sich NICHT mitändern, wenn `:root` oder
   irgendeine der `[data-…-palette]`-Überschreibungen weiter oben im
   Stylesheet später verändert werden — würde sie `var(--grundflaeche)` &
   Co. referenzieren, wäre sie ja kein festes Muster mehr, sondern würde mit
   umgestellt wie jede andere Seite auch. Alle Werte hier sind deshalb absicht-
   lich literal statt über Variablen bezogen — überall sonst im Projekt gilt
   „keine Hexwerte außerhalb der Variablendefinitionen", hier ist es umgekehrt:
   keine Variablen, nur die sechs ursprünglichen Werte direkt.

   Eigene Klassen mit "muster-"-Präfix statt Wiederverwendung der echten
   Komponentenklassen (.termin-karte, .ticket-button, …) — so bleibt die Seite
   auch dann unberührt, wenn eine echte Komponentenklasse selbst umgebaut wird,
   nicht nur bei Variablenänderungen. Diese Seite wird ab jetzt nicht mehr
   angefasst und irgendwann ersatzlos gelöscht, sobald der Vergleich nicht
   mehr gebraucht wird (siehe STAND.md).

   Die sechs konservierten Werte:
   --grundflaeche       #04262C
   --flaeche             #083840
   --akzent              #FBBE3C
   --text                 #F8F6F2
   --text-gedaempft       #7FA898
   --linie                 #3E6E5E
   Abgeleitet, ebenfalls fest: --text-gedaempft-auf-flaeche = #8BB0A1
   (90 % #7FA898 + 10 % #F8F6F2, wie die Formel, die an anderer Stelle im
   Stylesheet noch als color-mix() aus Variablen steht).
   =========================================================================== */

.muster-seite { background: #04262C; color: #F8F6F2; }

.muster-hinweis {
  position: relative;
  z-index: 1000;
  background: #FBBE3C;
  color: #04262C;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.85rem 1.25rem;
  text-align: center;
}
.muster-hinweis code {
  background: color-mix(in srgb, #04262C 12%, transparent);
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

.muster-buehne { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.muster-seite section { padding-block: 3.5rem; }
.muster-seite section + section { border-top: 1px solid #3E6E5E; }

.muster-abschnitt-titel {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  color: #7FA898;
  margin-bottom: 1.5rem;
}
.muster-schrift-display {
  font-family: "Archivo Black", "Archivo", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}
.muster-claim { font-size: clamp(1.15rem, 4.5vw, 1.5rem); line-height: 1.3; }
.muster-gedaempft { color: #7FA898; }

/* Kopfleiste — ursprüngliche helle Fassung: durchscheinender Verlauf,
   kein deckender dunkler Balken. */
.muster-kopfleiste {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(to bottom, color-mix(in srgb, #04262C 92%, transparent), transparent);
}
.muster-kopfleiste__innen { display: flex; align-items: center; justify-content: space-between; }
.muster-kopfleiste__logo { width: 8.5rem; height: auto; }

.muster-logo text { font-family: "Archivo Black", sans-serif; text-transform: uppercase; }
.muster-logo__comedy, .muster-logo__deluxe { fill: #F8F6F2; }
.muster-logo__slam { fill: #FBBE3C; }
.muster-logo__haarlinie { stroke: #3E6E5E; stroke-width: 1; }

.muster-menue { position: relative; }
.muster-menue summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: color-mix(in srgb, #083840 70%, transparent);
  border: 1px solid #3E6E5E;
  color: #F8F6F2;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.muster-menue summary::-webkit-details-marker { display: none; }
.muster-menue__liste {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 10rem;
  background: #083840;
  border: 1px solid #3E6E5E;
  border-radius: 0.6rem;
  padding: 0.4rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.muster-menue__liste a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  text-decoration: none;
  color: #F8F6F2;
  font-weight: 600;
}
.muster-menue__liste a:hover { background: color-mix(in srgb, #FBBE3C 10%, transparent); }
.muster-menue__liste a[aria-current="page"] { color: #FBBE3C; }
.muster-menue-knopf-schau {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: color-mix(in srgb, #083840 70%, transparent);
  border: 1px solid #3E6E5E;
  color: #F8F6F2;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Hero */
.muster-hero {
  position: relative;
  min-height: 85svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 2.5rem;
  isolation: isolate;
}
.muster-hero__medium { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.muster-hero__medium img { width: 100%; height: 100%; object-fit: cover; }
.muster-hero__verlauf {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, #04262C 0%, color-mix(in srgb, #04262C 55%, transparent) 38%, color-mix(in srgb, #04262C 10%, transparent) 65%),
    linear-gradient(to bottom, color-mix(in srgb, #04262C 65%, transparent) 0%, transparent 30%);
}
.muster-hero__inhalt { position: relative; padding: 1.75rem 1.25rem 2.5rem; }
.muster-hero__stadtname {
  font-family: "Archivo Black", "Archivo", system-ui, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: #7FA898;
  margin: 0 0 0.6rem;
}
.muster-hero__naechster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  background: color-mix(in srgb, #083840 55%, transparent);
  border: 1px solid #3E6E5E;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
}
.muster-hero__naechster strong { font-family: "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.muster-akzent-punkt { color: #FBBE3C; }
.muster-hero__inhalt .muster-claim { margin: 0 0 1.5rem; max-width: 26rem; }

/* Ticketbutton */
.muster-ticket-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #FBBE3C;
  color: #04262C;
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  border-radius: 0.4rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
}
.muster-ticket-button:hover { filter: brightness(1.08); }
.muster-ticket-button:disabled { cursor: not-allowed; opacity: 0.85; }

/* Terminkarten */
.muster-termin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.muster-termin-karte {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 1.1rem 1.25rem;
  background: #083840;
  border-radius: 0.6rem;
  border: 1px solid #3E6E5E;
  text-decoration: none;
  color: #F8F6F2;
}
.muster-termin-karte__datum { font-family: "Archivo Black", sans-serif; font-size: 1.05rem; text-transform: uppercase; grid-column: 1 / 2; }
.muster-termin-karte__zeit { grid-column: 1 / 2; font-size: 0.85rem; color: #8BB0A1; }
.muster-termin-karte__info { grid-column: 2 / 3; grid-row: 1 / 3; justify-self: end; text-align: right; }
.muster-termin-karte__kategorie { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.muster-termin-karte__ort { font-size: 0.85rem; color: #8BB0A1; }
.muster-termin-karte__pfeil { grid-column: 3 / 4; grid-row: 1 / 3; color: #8BB0A1; }

.muster-termin-karte--vorrunde { border-left: 3px solid #FBBE3C; }
.muster-termin-karte--vorrunde .muster-termin-karte__kategorie { color: #8BB0A1; }

.muster-termin-karte--wildcard { border: 1px solid #FBBE3C; }
.muster-termin-karte--wildcard .muster-termin-karte__kategorie { color: #FBBE3C; }

.muster-termin-karte--finale {
  border-color: #FBBE3C;
  background: linear-gradient(135deg, color-mix(in srgb, #FBBE3C 16%, transparent), #04262C 65%);
}
.muster-termin-karte--finale .muster-termin-karte__datum { font-size: 1.4rem; }
.muster-termin-karte--finale .muster-termin-karte__kategorie {
  color: #04262C;
  background: #FBBE3C;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.muster-termin-karte--open-air { border-left: 3px solid #7FA898; }
.muster-termin-karte--open-air .muster-termin-karte__kategorie { color: #8BB0A1; }

.muster-termin-karte--vergangen { opacity: 0.5; border-left-color: #3E6E5E; }
.muster-termin-karte--vergangen .muster-termin-karte__kategorie { color: #8BB0A1; }

/* Turnierbaum, Magdeburg-Fassung */
.muster-turnierbaum { width: 100%; height: auto; overflow: visible; }
.muster-turnierbaum__linie { stroke: #3E6E5E; stroke-width: 2; fill: none; }
.muster-turnierbaum__box { fill: #083840; stroke: #3E6E5E; stroke-width: 1.5; }
.muster-turnierbaum__box--finale { fill: #FBBE3C; }
.muster-turnierbaum__text { font-family: "Archivo", sans-serif; font-weight: 700; fill: #F8F6F2; }
.muster-turnierbaum__text--finale { fill: #04262C; }
.muster-turnierbaum__text--gedaempft { fill: #8BB0A1; font-weight: 500; }
.muster-turnierbaum__datum { font-family: "Archivo", sans-serif; font-size: 11px; fill: #8BB0A1; }
.muster-turnierbaum__datum--finale { fill: color-mix(in srgb, #04262C 75%, transparent); }

/* Line-up */
.muster-lineup-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.muster-lineup-eintrag { background: #083840; border: 1px solid #3E6E5E; border-radius: 0.6rem; overflow: hidden; }
.muster-lineup-eintrag summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem; cursor: pointer; list-style: none; }
.muster-lineup-eintrag summary::-webkit-details-marker { display: none; }
.muster-lineup-eintrag summary img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #04262C; }
.muster-lineup-eintrag__name { font-weight: 700; font-size: 0.95rem; }
.muster-lineup-eintrag__handles { padding: 0 0.9rem 0.9rem 4.3rem; font-size: 0.85rem; }
.muster-lineup-eintrag__handles a { color: #FBBE3C; text-decoration: underline; text-underline-offset: 0.2em; }
.muster-lineup-eintrag--platzhalter { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem; opacity: 0.6; background: #083840; border: 1px solid #3E6E5E; border-radius: 0.6rem; }
.muster-lineup-eintrag__platzhalter-bild { display: block; width: 3rem; height: 3rem; border-radius: 50%; background: #04262C; border: 1px dashed #3E6E5E; flex-shrink: 0; }

/* Fragen */
.muster-fragen-hinweis { color: #7FA898; font-size: 0.9rem; max-width: 34rem; margin-bottom: 1.5rem; }
.muster-fragen-liste { display: grid; gap: 0.75rem; }
.muster-frage { background: #083840; border: 1px solid #3E6E5E; border-radius: 0.6rem; padding: 0.9rem 1.1rem; }
.muster-frage summary { cursor: pointer; font-weight: 700; list-style: none; }
.muster-frage summary::-webkit-details-marker { display: none; }
.muster-frage summary::after { content: "+"; float: right; color: #FBBE3C; font-weight: 400; }
.muster-frage[open] summary::after { content: "–"; }
.muster-frage p { margin-top: 0.75rem; color: #8BB0A1; font-size: 0.95rem; }
.muster-entwurf-marke {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #04262C;
  background: #7FA898;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Anfahrt */
.muster-anfahrt-karte { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; background: #083840; border: 1px solid #3E6E5E; border-radius: 0.75rem; padding: 1.5rem; }
.muster-anfahrt-karte img { width: 100%; max-width: 12rem; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; }
.muster-anfahrt-karte__text { flex: 1 1 14rem; }
.muster-anfahrt-karte__name { font-family: "Archivo Black", sans-serif; font-size: 1.15rem; margin: 0; }
.muster-anfahrt-karte address { font-style: normal; color: #8BB0A1; margin-top: 0.35rem; }
.muster-anfahrt-karte__link { display: inline-block; margin-top: 1rem; color: #FBBE3C; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.muster-textlink { color: #FBBE3C; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }

/* Showcase (Textstufen & Knopfarten) */
.muster-showcase { display: grid; gap: 1.5rem; }
.muster-showcase__zeile { display: grid; gap: 0.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #3E6E5E; }
.muster-showcase__zeile:last-child { border-bottom: none; padding-bottom: 0; }
.muster-showcase__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7FA898; margin: 0; }

/* Farbtafel */
.muster-farbtafel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.muster-farbtafel li { display: flex; align-items: center; gap: 0.75rem; background: #083840; border: 1px solid #3E6E5E; border-radius: 0.6rem; padding: 0.75rem 1rem; }
.muster-farbtafel__muster { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; flex-shrink: 0; border: 1px solid #3E6E5E; }
.muster-farbtafel__muster--grundflaeche { background: #04262C; }
.muster-farbtafel__muster--flaeche { background: #083840; }
.muster-farbtafel__muster--akzent { background: #FBBE3C; }
.muster-farbtafel__muster--text { background: #F8F6F2; }
.muster-farbtafel__muster--text-gedaempft { background: #7FA898; }
.muster-farbtafel__muster--linie { background: #3E6E5E; }
.muster-farbtafel__name { font-weight: 700; margin-right: auto; }
.muster-farbtafel__hex { color: #8BB0A1; font-size: 0.85rem; }

/* Fußbereich */
.muster-footer { padding: 2.5rem 0 4rem; border-top: 1px solid #3E6E5E; color: #7FA898; font-size: 0.85rem; text-align: center; }
.muster-fuss-logo { width: 8rem; height: auto; margin-bottom: 1rem; }
.muster-bildnachweis { font-size: 0.8rem; }
.muster-fuss-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.muster-fuss-links a { color: #7FA898; text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 640px) {
  .muster-termin-liste { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .muster-termin-liste { grid-template-columns: repeat(3, 1fr); }
  .muster-hero__inhalt { padding-inline: 3rem; }
  .muster-lineup-liste { grid-template-columns: repeat(3, 1fr); }
  .muster-turnierbaum { width: auto; height: min(74vh, 620px); display: block; margin-inline: auto; }
}

/* -------------------------------------------------------------------------
   Leipzig — vertikaler Turnierbaum (Bauauftrag "Neuer Turnierbaum auf der
   Stadtseite Leipzig"). Struktur/Klassennamen/Abstände aus der
   mitgelieferten Vorlage (entwuerfe/turnierbaum.css) übernommen, testweise
   NUR für Leipzig verdrahtet (js/stadtseite.js, werkzeuge/seiten-erzeugen.py)
   — Magdeburg/Chemnitz/Dresden unverändert. Unskopiert wie .baum-quer/
   .treppe/.klammer, damit eine spätere Übertragung auf weitere Städte keine
   CSS-Änderung braucht, nur die Variantenzuordnung.

   FARBEN: Die Vorlage brachte eine eigene, überholte Hex-Palette mit
   (#04262C/#7FA898/#3E6E5E) — vollständig entfernt. Jede Farbe hier läuft
   über die bestehenden :root-Variablen oben; --spur/--punkt sind reine
   Maßangaben, keine Farben, deshalb als einzige Custom Properties dieser
   Komponente stehen geblieben. .csd-cta verwendet bewusst
   --text-auf-akzent statt --grundflaeche als Textfarbe auf --akzent-Grund —
   das ist genau "der wiederkehrende Fehler" (siehe weiter oben im
   Stylesheet), hier von vornherein vermieden statt aus der Vorlage
   übernommen. Kleine Beschriftungen auf --flaeche (.csd-rolle, .csd-mehr,
   .csd-datum im Finale-Block) verwenden --akzent-auf-flaeche bzw.
   --text-gedaempft-auf-flaeche statt der reinen Grundfarben — derselbe
   Grund, aus dem der Rest des Projekts diese beiden Varianten führt.
   Vollständige Kontrolltabelle: STAND.md.

   ABWEICHUNGEN VON DER VORLAGE, gemeldet statt stillschweigend übernommen:
   - .csd-runde--finale .csd-inhalt hatte einen border-top — das Projekt hat
     keine waagerechten Trennlinien mehr UND hebt "aktuelle/besondere" Karten
     bereits an anderer Stelle über eine linke Randlinie hervor
     (.termin-karte--vorrunde, .csd-sieger selbst). Hier zu border-left
     geändert, um genau diesem bestehenden Muster zu folgen, statt eine neue,
     zusätzliche Art der Hervorhebung einzuführen.
   - .csd-sozial (Rahmen um das Social-Icon) ist ein im Projekt bislang NIE
     verwendetes Muster — die einzigen bestehenden Social-/Handle-Links
     (.lineup-eintrag__handles a, .lineup-moderation a) sind schlichte
     unterstrichene Textlinks ohne Rahmen. Trotzdem übernommen, weil der
     Auftrag ausdrücklich ein "Social-Icon" in der Siegerzeile verlangt —
     hier als bewusst gemeldete Neuerung, nicht als versehentliche Abweichung.
   - .csd-finale-text (erfundener Fließtext inkl. "Preisgeld") aus der
     Vorlage NICHT übernommen: Der Auftrag untersagt Preisangaben auf der
     Seite, der Auftrag selbst verlangt an dieser Stelle keinen Fließtext,
     und direkt darüber steht mit .turnierbaum-erklaerung bereits eine
     vergleichbare Erklärung. Weggelassen statt umformuliert erfunden.
   - Die globale Regel @media(prefers-reduced-motion:reduce){*{transition:
     none!important}} aus der Vorlage betrifft keine einzige transition
     dieser Komponente (keine einzige ist hier deklariert) — ersatzlos
     weggelassen statt eine wirkungslose, aber projektweit greifende Regel
     zu übernehmen.
   ------------------------------------------------------------------------- */
.csd-baum {
  --spur: 44px;
  --punkt: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
}

.csd-runde {
  display: grid;
  grid-template-columns: var(--spur) 1fr;
  position: relative;
}

.csd-spur { position: relative; }
.csd-spur::before {
  content: "";
  position: absolute;
  left: calc(var(--spur) / 2 - 2px);
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--linie);
}
.csd-runde:first-child .csd-spur::before { top: 26px; }

.csd-punkt {
  position: absolute;
  left: calc(var(--spur) / 2 - var(--punkt) / 2);
  top: calc(26px - var(--punkt) / 2);
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--grundflaeche);
  border: 4px solid var(--linie);
  z-index: 2;
}
.csd-runde[data-status="offen"] .csd-punkt { border-color: var(--akzent); }
.csd-runde[data-status="gespielt"] .csd-punkt { background: var(--akzent); border-color: var(--akzent); }

.csd-inhalt { padding: 14px 0 24px; }
.csd-datum {
  margin: 0;
  font-size: .875rem;
  color: var(--text-gedaempft);
  line-height: 1.4;
}
.csd-runde h3 {
  margin: 2px 0 0;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ---------- Siegerzeile ---------- */
/* .csd-sieger ist der Rahmen (kein Link mehr), .csd-sieger-hauptlink der
   eigentliche Link auf Bild+Text — siehe siegerZeileHtml() in
   js/turnierbaum.js für die Begründung (kein <a> in <a>). */
.csd-sieger {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 9px 12px 9px 9px;
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
}
.csd-sieger-hauptlink {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.csd-sieger img,
.csd-sieger-platzhalter {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--linie);
  display: block;
}
.csd-sieger .csd-sieger-text { min-width: 0; flex: 1; }
.csd-sieger .csd-rolle {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--akzent-auf-flaeche);
}
.csd-sieger .csd-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csd-sieger .csd-mehr {
  display: block;
  font-size: .78rem;
  color: var(--text-gedaempft-auf-flaeche);
  margin-top: 1px;
}
.csd-sozial { display: flex; gap: 8px; flex: 0 0 auto; }
.csd-sozial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
}
.csd-sozial svg { width: 16px; height: 16px; fill: currentColor; }
.csd-sozial a:hover, .csd-sozial a:focus-visible { border-color: var(--akzent); color: var(--akzent); }

/* ---------- Sieger des Finales — deutlich prominenter, dieselben Bausteine
   wie eine normale Siegerzeile (.csd-sieger), keine neuen Farben: größeres
   Foto, größerer Name, umlaufender statt nur linker Rahmen. Erscheint erst,
   wenn finale.sieger gesetzt ist (siegerZeileHtml()/sieger_zeile_html()
   geben sonst "" zurück) — kein leerer Platzhalter vorher. ---------- */
.csd-sieger--final {
  margin-top: 20px;
  padding: 16px;
  gap: 16px;
  border: 2px solid var(--akzent);
  border-radius: 0.4rem;
}
.csd-sieger--final img,
.csd-sieger--final .csd-sieger-platzhalter { width: 72px; height: 72px; flex: 0 0 72px; }
.csd-sieger--final .csd-rolle { font-size: .8rem; }
.csd-sieger--final .csd-name { font-size: 1.4rem; white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- Button ---------- */
.csd-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 11px 18px;
  background: var(--akzent);
  color: var(--text-auf-akzent);
  text-decoration: none;
  font-weight: 700;
  font-size: .94rem;
}
.csd-cta:hover, .csd-cta:focus-visible { filter: brightness(1.08); }
.csd-cta.csd-cta-leise {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--linie);
}
.csd-runde[data-status="kommend"] .csd-cta {
  background: transparent;
  color: var(--text-gedaempft);
  border: 1px solid var(--linie);
  pointer-events: none;
}

/* ---------- Endstation Finale ---------- */
.csd-runde--finale .csd-spur::before { bottom: auto; height: 26px; }
.csd-runde--finale .csd-punkt {
  width: 25px; height: 25px;
  left: calc(var(--spur) / 2 - 12.5px);
  top: 13.5px;
  background: var(--akzent);
  border-color: var(--text);
}
.csd-runde--finale .csd-inhalt {
  background: var(--flaeche);
  padding: 16px;
  border-left: 3px solid var(--akzent);
  margin-bottom: 4px;
}
.csd-runde--finale h3 { font-size: 1.6rem; }

/* Sechs Startplätze im Finale */
.csd-plaetze { display: flex; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.csd-plaetze li { flex: 1; }
.csd-plaetze .csd-platz {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: 2px dashed var(--linie);
  overflow: hidden;
  text-decoration: none;
}
.csd-plaetze .csd-platz img,
.csd-platz-platzhalter { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--linie); }
.csd-plaetze .csd-platz--besetzt { border: 2px solid var(--akzent); }
.csd-plaetze .csd-platz--offen {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--akzent-auf-flaeche);
}
.csd-plaetze .csd-platz:hover, .csd-plaetze .csd-platz:focus-visible { border-color: var(--akzent); }

/* ---------- Zustand: nichts gespielt ---------- */
.csd-runde[data-status="kommend"] .csd-datum,
.csd-runde[data-status="kommend"] h3 { color: var(--text-gedaempft); }

/* Höhere Spezifität als die kommend-Regel oben (3 Klassen statt 2), damit
   das Finale — das aktuell selbst "kommend" ist — sein Datum trotzdem in der
   für --flaeche abgestimmten Fassung zeigt, nicht in der für --grundflaeche
   gedachten. Mit echtem Rendering gefunden: ohne diese höhere Spezifität
   gewann die spätere, allgemeine kommend-Regel bei gleicher Spezifität
   (Quellreihenfolge) — beide Werte bestehen zwar AA (5,10:1 bzw. 5,24:1),
   aber nur diese Regel liefert tatsächlich die beabsichtigte Variable. */
.csd-runde--finale .csd-inhalt .csd-datum { color: var(--text-gedaempft-auf-flaeche); }

@media (min-width: 640px) {
  .csd-baum { --spur: 54px; }
  .csd-runde h3 { font-size: 1.4rem; }
}