/* ==========================================================================
   Comedy Slam Deluxe — Stylesheet der Profilseiten.
   Übernahme Schritt 2 (18.10.2026): Startseite (index.html); seit Schritt 3
   auch /termine/, /bewerbung/, /showablauf/, /regeln/, /impressum/,
   /datenschutz/, /agb/; seit Schritt 4 auch die Stadt-, Bald- und
   Terminseiten. css/stil.css lädt damit keine öffentliche Seite mehr (nur
   /muster/ und /pruefung/).
   Markup: kopf_html(), fuss_html(start=True) und die Profilseiten-
   Funktionen in werkzeuge/seiten-erzeugen.py, dazu die Handseiten;
   Verhalten: js/start.js; Einwilligungsbanner: js/consent.js (Regeln
   .csd-consent unten). Standards:
   - Schriften: nur Playfair Display (Titel, Display, immer 700) und
     Source Sans 3 (Text 400, Hervorhebung 600, Bedienelemente 700).
     Größen: 13 (Versalien-Etiketten, Kleinstes), 15 (klein/gedämpft),
     17 (Text, Knöpfe, Zeilentitel), 22/24 (Display), 32 (Display-Datum),
     dazu die Seitentitel im Fotokopf je Seitenart.
   - Radien: Knopf 6px (--rundung-knopf, wie live: Textknöpfe, Kopfknopf,
     Chips, Einwilligung, Sprunglink, Menüleiste), Pille 999px nur noch für
     Marken/Etiketten/Status, Kreis 50 %, Kasten 16px (--rundung).
   - Linien: Trennlinie 18 % (--linie), Kontur 38 % (--linie-stark);
     Umriss-Knöpfe 55 % (--kontur); gestrichelt nur für „bald“/Platzhalter.
   - Farbregeln: Goldfüllung (--gold-knopf) nur für den Ticketweg und den
     Bewerbungsweg auf /bewerbung/ (eine gefüllte Sache je Bildschirm);
     Goldschrift und -linien auf Petrol in --gold-text (Auftrag F).
   - Tippflächen mindestens 44px. Maßstab ist das Handy bei 390px; 560–599px
     bleibt der Inhalt eine mittige Spalte von höchstens 520px.
   - Eine Gestaltung, die mit der Breite mitwächst (Abschnitt „Tablet und
     Desktop“ am Ende): Handy unter 600px (unverändert), Tablet 600–1039px,
     Desktop ab 1040px; Menüleiste ab der gemessenen Umbruchbreite.
   ========================================================================== */

@font-face {
  font-family: "Source Sans 3";
  src: url("../schriften/neu-sourcesans3.woff2") format("woff2-variations"),
       url("../schriften/neu-sourcesans3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../schriften/neu-playfair.woff2") format("woff2-variations"),
       url("../schriften/neu-playfair.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #094B59;
  --dunkel: #152F34;
  --dunkel-hover: #1C3A40;
  --tief: #1B3D43;
  --text: #ECEEE9;
  --gedaempft: #CED5D2;
  --gelb: #FFC245;
  --gelb-hover: #FFD47E;
  --auf-gelb: #152F34;
  --gold: #CB9B50;
  /* Gold für Schrift und Linien auf Petrol (Auftrag F): dunkelster Ton auf
     der Linie #CB9B50 → #F5E27A (40,2 % Richtung #F5E27A), der auf allen
     Petrol-Gründen mit Goldschrift mindestens 4,5:1 erreicht; knappster
     Grund: Zeilen-Hover #23535B 4,50:1. Vorher #E0BE7E. */
  --gold-text: #DCB861;
  --gold-verlauf: linear-gradient(135deg, #CB9B50 0%, #F5E27A 50%, #CB9B50 100%);
  /* Knopf-Gold (Füllung, Auftrag F): #CB9B50 wie --gold. Schrift #462623
     (wie live: --auf-gold) 5,34:1; Hover 6,14:1; gedrückt 4,77:1. */
  --gold-knopf: #CB9B50;
  --gold-knopf-hover: #D3A958;  /* 80 % #CB9B50 + 20 % #F5E27A, heller */
  --gold-knopf-aktiv: #C0924C;  /* 92 % #CB9B50 + 8 % #462623, dunkler */
  --auf-gold-knopf: #462623;
  /* Kopfleiste wie live (B: --grund-tief #0D4B58, Linie --linie = Gold 34 %) */
  --kopf-grund: #0D4B58;
  --kopf-linie: color-mix(in srgb, var(--gold) 34%, transparent);
  /* Terminzeilen/-karten der Startseite: heller Petrol wie live (B: --flaeche
     #11454F); Hover 92 % #11454F + 8 % #ECEEE9 */
  --flaeche-karte: #11454F;
  --flaeche-karte-hover: #23535B;
  --linie: rgb(236 238 233 / 18%);
  --linie-stark: rgb(236 238 233 / 38%);
  --kontur: rgb(236 238 233 / 55%);
  --fokus: #ECEEE9;

  --schrift-titel: "Playfair Display", Georgia, serif;
  --schrift-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rand: 16px;
  --rundung: 16px;
  --rundung-knopf: 6px;
  --spalte: 520px;
  --uebergang: 180ms ease;
  /* Feste Kopfzeile: 64px plus Sicherheitsbereich oben (iPhone) */
  --kopf-hoehe: calc(64px + env(safe-area-inset-top));
  /* Ein Verlauf für alle Fotoköpfe (E14) */
  --kopf-verlauf: linear-gradient(to bottom, rgb(9 75 89 / 0%) 34%, rgb(9 75 89 / 62%) 64%, var(--grund) 98%);
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--kopf-hoehe);
  background: var(--dunkel);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: var(--spalte);
  min-height: 100vh;
  background: var(--grund);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  /* Inhalt beginnt unter der festen Kopfzeile; auf der Startseite liegt das
     Logo-Foto ganz oben (die Kopfzeile blendet dort erst später ein). */
  padding-top: var(--kopf-hoehe);
}
body:has(.kopf--start) { padding-top: 0; }
body:has(.tleiste:not([hidden])) { padding-bottom: 92px; }
body.ohne-tleiste { padding-bottom: 0; }

img { max-width: 100%; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
[hidden] { display: none !important; }

a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.sprung-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1100;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: var(--rundung-knopf);
  background: var(--text);
  color: var(--dunkel);
  font-weight: 700;
  text-decoration: none;
}
.sprung-link:focus { transform: none; }

/* Symbole (E15): 16er-Raster für Pfeile und Winkel, 24er für Inhalts-
   Symbole; Strich überall 1,8. */
.symbol {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.12em;
}
.symbol24 { width: 20px; height: 20px; flex: none; }

.leise { color: var(--gedaempft); }
.klein { font-size: 15px; }

/* --------------------------------------------------------------------------
   Kopfzeile (nach der Kopfleiste der Live-Seite): fest oben, Petrol wie live
   mit Goldlinie unten, links das Logo, rechts Seitenname, goldener
   Kopfknopf „Tickets“ (ab 560px
   „Tickets & Termine“) und der Menüknopf. Der Kopfknopf ist von der Regel
   „eine gefüllte Sache je Bildschirm“ ausgenommen.
   Startseite (kopf--start): solange das Logo-Foto im Bild ist, nur der runde
   Menüknopf; js/profil.js setzt .ist-sichtbar, sobald das Foto aus dem Bild
   ist (nur Überblendung, 180ms). Ohne JavaScript ist die Kopfzeile immer
   sichtbar (noscript-Stil aus kopf_html()).
   -------------------------------------------------------------------------- */
.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--spalte);
  height: var(--kopf-hoehe);
  margin: 0 auto;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(var(--rand), env(safe-area-inset-left));
  border-bottom: 1px solid var(--kopf-linie);
  background: var(--kopf-grund);
  transition: background-color var(--uebergang), border-color var(--uebergang);
}
.kopf__marke {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 48px;
  min-width: 48px;
  margin-right: auto;
}
.kopf__logo { display: block; width: auto; height: 48px; }
/* Seitenname: reiner Text, rechtsbündig direkt vor dem Kopfknopf, nie
   Umbruch; unter 400px /regeln/ kurz „Regeln“, unter 360px ausgeblendet. */
.kopf__seite {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.kopf__kurz { display: none; }
.kopf__termine { flex: none; white-space: nowrap; }
.kopf__termine[aria-current="page"] { box-shadow: inset 0 0 0 2px rgb(21 47 52 / 60%); }
.kopf__zusatz { display: none; white-space: pre; }
.kopf .pmenue { position: relative; flex: none; }
/* Menüleiste: erst ab der gemessenen Umbruchbreite (Abschnitt „Tablet und
   Desktop“), darunter Seitenname, Kopfknopf und Menüknopf wie bisher. */
.kopf__nav { display: none; }
@media (max-width: 399.98px) {
  .kopf__lang { display: none; }
  .kopf__kurz { display: inline; }
}
@media (max-width: 359.98px) {
  .kopf__seite { display: none; }
}
@media (min-width: 560px) {
  .kopf__zusatz { display: inline; }
}

/* Startseite oben: Kopfzeile unsichtbar, Menüknopf rund über dem Foto */
.kopf--start .kopf__marke,
.kopf--start .kopf__seite,
.kopf--start .kopf__termine { transition: opacity var(--uebergang), visibility var(--uebergang); }
.kopf--start:not(.ist-sichtbar) { background: transparent; border-bottom-color: transparent; pointer-events: none; }
.kopf--start:not(.ist-sichtbar) .pmenue { pointer-events: auto; }
.kopf--start:not(.ist-sichtbar) :is(.kopf__marke, .kopf__seite, .kopf__termine) { opacity: 0; visibility: hidden; }
.kopf--start:not(.ist-sichtbar) .pmenue__knopf {
  border-color: var(--linie-stark);
  background: rgb(21 47 52 / 72%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Menü: Knopf in der Kopfzeile, öffnet ein Vollbild-Feld
   -------------------------------------------------------------------------- */
.pmenue__knopf {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}
.pmenue__knopf::-webkit-details-marker { display: none; }
.pmenue__knopf:hover { background: rgb(236 238 233 / 10%); }
.pmenue__symbol--zu,
.pmenue[open] .pmenue__symbol--auf { display: none; }
.pmenue[open] .pmenue__symbol--zu { display: block; }

.pmenue__feld {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(18px + env(safe-area-inset-top)) max(24px, calc(50vw - var(--spalte) / 2 + 24px)) 40px;
  background: var(--grund);
}
.pmenue__logo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 20px;
}
.pmenue__logo img { display: block; width: auto; height: 34px; }
.pmenue__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pmenue__liste a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: color var(--uebergang);
}
.pmenue__liste a:hover { color: #fff; }
.pmenue__liste a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.pmenue__zwischentitel {
  margin: 28px 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.pmenue__liste--bald a {
  min-height: 48px;
  font-family: var(--schrift-text);
  font-size: 17px;
  font-weight: 700;
  color: var(--gedaempft);
}
.pmenue__bald {
  padding: 1px 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Fotokopf: Foto mit Titel im Bild, läuft unten in Petrol aus (E14).
   Höhen je Seitenart: Start fest 300px, Stadt/bald kompakt, Terminseite
   groß, kleiner Kopf (--seite) für /termine/, /regeln/, /bewerbung/,
   /showablauf/, flaches Fotoband für die Rechtstexte.
   -------------------------------------------------------------------------- */
.fotokopf {
  position: relative;
  isolation: isolate;
}
.fotokopf__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 82svh;
  overflow: hidden;
  background: var(--dunkel);
}
.fotokopf__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.fotokopf--start .fotokopf__foto::before,
.fotokopf__foto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
/* Startseite: oben leicht abgedunkelt für den runden Menüknopf */
.fotokopf--start .fotokopf__foto::before {
  top: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgb(9 75 89 / 55%), rgb(9 75 89 / 0%));
}
.fotokopf__foto::after {
  bottom: 0;
  height: 100%;
  background: var(--kopf-verlauf);
}
.fotokopf__text {
  position: absolute;
  left: var(--rand);
  right: var(--rand);
  bottom: 4px;
  z-index: 1;
  text-shadow: 0 1px 14px rgb(9 47 52 / 55%);
}
.fotokopf__ober {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.fotokopf__titel {
  position: relative;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 24px rgb(0 0 0 / 35%);
}
.fotokopf__unter {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
}
.fotokopf__aktion { margin-top: 20px; }
.fotokopf .sknopf { text-shadow: none; }
.fotokopf--finale .fotokopf__ober { color: var(--gold-text); }

/* Startseite: Kopf 300px mit Logo, darunter sofort die nächsten Shows. */
.fotokopf--start .fotokopf__foto {
  aspect-ratio: auto;
  height: 300px;
}
.fotokopf--start .fotokopf__bild { object-position: 50% 40%; }
/* Kopffoto „overall-weite“ (START_FOTO): leicht vergrößert und nach rechts
   gerückt, damit das Logo nicht den Comedian verdeckt. */
.fotokopf--foto-overall-weite .fotokopf__bild {
  transform: scale(1.3);
  transform-origin: 0% 42%;
}
.fotokopf--start .fotokopf__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  bottom: 6px;
}
.fotokopf__logo {
  display: block;
  width: 118px;
  height: auto;
  filter: drop-shadow(0 4px 18px rgb(9 47 52 / 60%));
}
.fotokopf--start .fotokopf__unter {
  margin-top: 8px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
/* SEO-Block 1 (19.10.2026): Die Unterzeile steht als <span> mit in der h1
   der Startseite und sieht aus wie zuvor als eigener Absatz unter dem Logo —
   als Block, Logo mittig, Laufweite und Umbruch der h1 zurückgesetzt. */
.fotokopf--start .fotokopf__titel .fotokopf__logo { margin-inline: auto; }
.fotokopf--start .fotokopf__titel .fotokopf__unter {
  display: block;
  letter-spacing: normal;
  overflow-wrap: normal;
}

/* Alle Fotoköpfe außer der Startseite (Stadt, „bald“, Terminseiten,
   /termine/, /regeln/, /bewerbung/, /showablauf/): Fotohöhe der Stadtseite,
   kompakt, damit die Runden-Chips auf dem ersten Bildschirm stehen
   (Auftrag E: gemeinsame Regel statt Werten je Seitenart). */
.fotokopf:not(.fotokopf--start) .fotokopf__foto {
  aspect-ratio: auto;
  height: 50vh;
  height: clamp(260px, 50svh, 420px);
  min-height: 0;
  max-height: none;
}
/* Stadt- und „bald“-Seiten: Text unten im Foto (Vorbild für die übrigen). */
.fotokopf--stadt .fotokopf__text { bottom: 2px; }
.fotokopf--stadt .fotokopf__titel {
  font-size: clamp(2.75rem, 13.5vw, 4rem);
  line-height: 0.98;
}
.fotokopf--stadt .fotokopf__unter { margin-top: 8px; }
.fotokopf--bald .fotokopf__bild { filter: grayscale(0.55) brightness(0.8); }

/* Terminseite: Stadt · Runde, Datum sehr groß, Ort · Uhrzeit, Knopf. */
.fotokopf--tseite .fotokopf__titel {
  font-size: clamp(3.25rem, 17vw, 4.75rem);
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: lining-nums;
}
/* Finale: Goldstrich über der Überzeile (außerhalb des Textflusses, damit
   die h1 an der Lage der Stadtseite bleibt) */
.fotokopf--tseite.fotokopf--finale .fotokopf__text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px + 13px * 1.3 + 14px);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-verlauf);
}

/* Terminseiten und Seitenköpfe (/termine/, /regeln/, /bewerbung/,
   /showablauf/): h1-Oberkante wie auf der Stadtseite. Dort steht der Text
   unten im Foto: Rand 2px, Unterzeile 17px × 1,4, Abstand 8px, darüber die
   h1 (Höhe 0,98 × Schriftgröße der Stadt-h1). Genau so weit wird der Text
   hier ins Foto gezogen; er fließt danach normal weiter, sodass mehr Text
   unter der h1 (Unterzeile, Knopf, mehrzeilige h1) nach unten wächst und
   Foto und h1 nicht verschiebt. Überzeile hängt direkt über der h1 (6px). */
.fotokopf--tseite,
.fotokopf--seite {
  --titel-abstand: calc(2px + 8px + 17px * 1.4 + 0.98 * clamp(2.75rem, 13.5vw, 4rem));
}
.fotokopf--tseite .fotokopf__text,
.fotokopf--seite .fotokopf__text {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  min-height: var(--titel-abstand);
  margin: calc(-1 * var(--titel-abstand)) var(--rand) 0;
}
.fotokopf--tseite .fotokopf__ober,
.fotokopf--seite .fotokopf__ober {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0 0 6px;
}
.fotokopf--seite .fotokopf__titel { font-size: clamp(2.5rem, 12.5vw, 3.5rem); }
.fotokopf--seite .fotokopf__titel--lang { font-size: clamp(2.125rem, 10vw, 3rem); line-height: 1.08; overflow-wrap: normal; }

/* Rechtstexte: flaches Fotoband, Titel im Text. */
.fotoband {
  position: relative;
  height: 168px;
  overflow: hidden;
}
.fotoband__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.fotoband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kopf-verlauf);
}

/* --------------------------------------------------------------------------
   Blöcke und Blocküberschriften (E10, E11)
   -------------------------------------------------------------------------- */
.block { padding: 28px var(--rand) 4px; }
/* einzige Ausnahme vom Blockabstand: dichter erster Bildschirm (Start, Stadt) */
.block--dicht { padding-top: 20px; }
.block--erst.block--dicht { padding-top: 16px; }
.block__titel {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.block--dicht > .block__titel { margin-bottom: 8px; }
.block > p { max-width: 62ch; }
.blockfuss { margin: 14px 0 0; }

.hinweis { color: var(--gedaempft); }
.hinweis--klein { margin: 0; font-size: 15px; }
.hinweis--gross {
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

/* Kleine Marken (Versalien 13px): Platzhalter, Etikett, Status */
.marke-platzhalter,
.etikett,
.bwb-termin__status {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
  white-space: nowrap;
}
.marke-platzhalter { margin-right: 4px; border-style: dashed; vertical-align: 0.1em; }
.etikett { vertical-align: 0.15em; }
/* Etikett in Gold (Sieger in der Zeitleiste, nur Finale-Bezug) */
.etikett--gold { border-color: var(--gold); color: var(--gold-text); }
.bwb-termin__status { flex: none; }

/* --------------------------------------------------------------------------
   Textlinks (E5): eine Form, immer mit Symbol (› intern, ↗ extern)
   -------------------------------------------------------------------------- */
.textlink,
.mehrlink a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--linie-stark);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--uebergang);
}
.textlink:hover,
.mehrlink a:hover { text-decoration-color: currentColor; }
.hinweis .textlink { min-height: 0; }
.mehrlink { margin: 14px 0 0; }

/* --------------------------------------------------------------------------
   Knöpfe (E3, E4): 6px-Ecken, 700/17. Gefüllt in Knopf-Gold = sknopf--gelb
   (Ticketweg, Bewerbung auf /bewerbung/), Umriss in Gold = sknopf--kontur.
   -------------------------------------------------------------------------- */
.sknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--rundung-knopf);
  background: transparent;
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
}
/* Gefüllte Knöpfe in Knopf-Gold (Klassenname sknopf--gelb bleibt) */
.sknopf--gelb { background: var(--gold-knopf); color: var(--auf-gold-knopf); }
.sknopf--gelb:hover { background: var(--gold-knopf-hover); }
.sknopf--gelb:active { background: var(--gold-knopf-aktiv); }
.sknopf--kontur { box-shadow: inset 0 0 0 1.5px var(--gold-text); }
.sknopf--kontur:hover { background: rgb(236 238 233 / 8%); box-shadow: inset 0 0 0 1.5px var(--gold-text); }
.sknopf--breit { display: flex; width: 100%; }
.sknopf--klein { min-height: 44px; padding: 0 18px; }

/* Runde Symbol-Knöpfe 44px: Ticket in Zeilen (E6), Social im Line-up */
.ticketkreis,
.lgkarte__sozial a {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  color: var(--text);
  transition: background-color var(--uebergang);
}
.ticketkreis:hover { background: rgb(236 238 233 / 10%); }

/* Zeilenlink „Du machst Stand-up?“ */
.zeilenlink {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px var(--rand) 0;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rundung);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--uebergang);
}
.zeilenlink:hover { background: rgb(236 238 233 / 6%); }
.zeilenlink__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.zeilenlink__titel {
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.zeilenlink__unter {
  font-size: 15px;
  color: var(--gedaempft);
}
.zeilenlink__pfeil {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dunkel);
}

/* --------------------------------------------------------------------------
   Chips (E9): eine Form für Stadt-Chips (.chip) und Runden-Chips (.rchip)
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--rand)) 12px;
  padding: 0 var(--rand) 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.rchips { margin: 0 calc(-1 * var(--rand)) 12px; }
.rchips__liste {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px var(--rand) 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding: 0 var(--rand);
}
.rchips__liste::-webkit-scrollbar { display: none; }
.chip,
.rchip {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rundung-knopf);
  background: transparent;
  color: var(--text);
  font: 700 15px/1 var(--schrift-text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.chip:hover,
.rchip:hover { border-color: var(--text); }
.chip[aria-pressed="true"],
.rchip.ist-aktiv {
  background: var(--gold-knopf);
  border-color: var(--gold-knopf);
  color: var(--auf-gold-knopf);
}
.chip[aria-pressed="true"]:hover,
.rchip.ist-aktiv:hover { background: var(--gold-knopf-hover); border-color: var(--gold-knopf-hover); }
.chip[aria-pressed="true"]:active,
.rchip.ist-aktiv:active { background: var(--gold-knopf-aktiv); border-color: var(--gold-knopf-aktiv); }
/* Stadt noch nicht freigeschaltet: gedämpft (#A9BFC1 auf Petrol 5,05:1),
   gestrichelt, weiterhin antippbar. */
.chip--bald { border-style: dashed; color: #A9BFC1; }
.chip--bald[aria-pressed="true"] { border-style: solid; }
.rchip--finale { border-color: var(--gold); color: var(--gold-text); }
.rchip.ist-vorbei { border-style: dashed; color: var(--gedaempft); }

/* Hinweis statt Terminzeilen, wenn der Chip einer „bald“-Stadt aktiv ist */
.bald-hinweis {
  padding: 18px 16px 8px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rundung);
  background: var(--dunkel);
}
.bald-hinweis__text {
  margin: 0 0 4px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Terminzeilen und -karten
   -------------------------------------------------------------------------- */
.tz-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Startseite „Nächste Shows“: Zeilen auf allen Breiten. Fläche, Rahmen und
   Hover liegen auf der ganzen Zeile (li), damit ab 600px auch der Knopf
   rechts darauf steht. Datum markant, Stadtname groß (Auftrag C). */
.tz {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--rundung);
  background: var(--flaeche-karte);
  transition: background-color var(--uebergang);
}
.tz:has(> a.tz__flaeche):hover { background: var(--flaeche-karte-hover); }
.tz--finale {
  background: linear-gradient(var(--flaeche-karte), var(--flaeche-karte)) padding-box, var(--gold-verlauf) border-box;
}
.tz--finale:has(> a.tz__flaeche):hover {
  background: linear-gradient(var(--flaeche-karte-hover), var(--flaeche-karte-hover)) padding-box, var(--gold-verlauf) border-box;
}
.tz__flaeche {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px 10px 8px;
  color: inherit;
  text-decoration: none;
}
/* Knopf rechts: erst ab 600px (Abschnitt „Tablet und Desktop“), darunter Pfeil */
.tz__aktion { display: none; }
/* Datum: Tageszahl groß, Wochentag und Monat klein in Gold (--gold-text) */
.tz .datumsblock { width: 60px; }
.tz .datumsblock__tag { font-size: 34px; }
.tz .datumsblock__wt,
.tz .datumsblock__monat { color: var(--gold-text); }
.datumsblock {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 52px;
  padding-right: 10px;
  border-right: 1px solid var(--linie);
  line-height: 1;
}
.tz--finale .datumsblock__tag { color: var(--gold-text); }
.tz__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Stadtname groß (passt als „Magdeburg“ bei 375px in eine Zeile), darunter
   klein die Runde und gedämpft „Ort · Uhrzeit“ */
.tz__stadt {
  font-family: var(--schrift-titel);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.tz__runde { font-size: 15px; font-weight: 700; line-height: 1.3; }
.tz__info { font-size: 15px; line-height: 1.3; color: var(--gedaempft); }
.tz__pfeil { display: flex; color: var(--gedaempft); }

/* Datumsblöcke: Wochentag und Monat 13px Versalien, Tag Playfair 24 */
.datumsblock__wt,
.datumsblock__monat,
.adatum__wt,
.adatum__monat {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.datumsblock__tag,
.adatum__tag {
  margin: 2px 0 1px;
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}

/* Terminzeilen /termine/ und /bewerbung/ (Zeilenform .tz-liste--a2) */
.tz-liste--a2 { margin: 0; padding: 0; list-style: none; }
.azeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--linie);
}
.azeile:first-child { border-top: 1px solid var(--linie); }
.azeile__haupt {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 68px;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}
.adatum {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 52px;
  padding: 7px 0 6px;
  border-radius: var(--rundung);
  background: var(--dunkel);
  line-height: 1;
}
.azeile__text { display: flex; flex-direction: column; min-width: 0; }
.azeile__titel { font-weight: 700; line-height: 1.3; }
.azeile__unter { font-size: 15px; line-height: 1.35; color: var(--gedaempft); }
a.azeile__haupt:hover .azeile__titel { text-decoration: underline; text-underline-offset: 3px; }
.azeile__folgt { flex: none; max-width: 4.75rem; font-size: 13px; line-height: 1.25; text-align: right; color: var(--gedaempft); }
.azeile--finale {
  margin: 10px 0;
  padding: 0 10px 0 8px;
  border: 1px solid transparent;
  border-radius: var(--rundung);
  background: linear-gradient(var(--grund), var(--grund)) padding-box, var(--gold-verlauf) border-box;
}
.azeile--finale:first-child { border-top: 1px solid transparent; }
.azeile--finale .adatum__tag { color: var(--gold-text); }
/* Bewerbungstermine: Status rechts, „gespielt“ gedimmt (zeitabhängig) */
.bwb-termin .azeile__haupt { min-height: 64px; }
.bwb-termin--gespielt .azeile__haupt { opacity: 0.6; }

.monat + .monat { margin-top: 6px; }
.monat__titel {
  margin: 18px 0 10px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
}
.monat:first-of-type .monat__titel { margin-top: 4px; }

/* Wischreihen: Line-up groß und weitere Termine (nächste Karte angeschnitten) */
.lgreihe,
.treihe {
  display: flex;
  gap: 12px;
  margin: 0 calc(-1 * var(--rand));
  padding: 0 var(--rand) 2px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
}
.lgreihe::-webkit-scrollbar,
.treihe::-webkit-scrollbar { display: none; }
/* Line-up der Terminseiten am Handy (Auftrag I): Streifen beginnt an der
   Inhaltskante und reicht rechts bis an den Rand; Karte 4:5 so breit, dass
   2 ganze Karten, 2 Lücken (12px) und 1/3 der dritten sichtbar sind:
   Breite = (Streifen − 24px) × 3/7, höchstens 180px. Einrasten an der
   Inhaltskante (scroll-padding 0). */
.lgreihe { margin: 0 calc(-1 * var(--rand)) 0 0; padding: 0 0 2px; scroll-padding-inline: 0; }
.lgreihe > li { flex: none; width: min(180px, calc((100% - 2 * 12px) * 3 / 7)); scroll-snap-align: start; }
.treihe > li { flex: none; width: 58%; scroll-snap-align: start; }

/* Terminkarte ohne Foto („Weitere Termine“) */
.tkarte { border: 1px solid var(--linie-stark); border-radius: var(--rundung); }
.tkarte__link { display: flex; flex-direction: column; height: 100%; min-height: 44px; padding: 16px; color: var(--text); text-decoration: none; }
.tkarte__label { font-size: 15px; font-weight: 700; color: var(--gedaempft); }
.tkarte__datum {
  margin: 4px 0;
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.tkarte__unter { font-size: 15px; color: var(--gedaempft); }
.tkarte--finale {
  border-color: transparent;
  background: linear-gradient(var(--grund), var(--grund)) padding-box, var(--gold-verlauf) border-box;
}
.tkarte--finale .tkarte__label { color: var(--gold-text); }

/* Nächste Show (Stadtseite) in einer Zeile */
.sn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sn__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  color: inherit;
  text-decoration: none;
}
.sn__datum {
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.sn__info { font-size: 15px; line-height: 1.3; color: var(--gedaempft); }
.sn__teil { white-space: nowrap; }
a.sn__link:hover .sn__datum { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.sn--finale .sn__datum { color: var(--gold-text); }
.sn__knopf { flex: none; min-height: 48px; padding: 0 18px; white-space: nowrap; }
.sn__hinweis { flex: none; width: 44%; margin: 0; font-size: 13px; line-height: 1.3; color: var(--gedaempft); text-align: right; }

/* --------------------------------------------------------------------------
   Aufklapper (E2): eine Form (Linien, Titel 17/700, Winkel rechts, 56px).
   Der Winkel kommt für alle Aufklapper aus dieser einen Regel (E15).
   -------------------------------------------------------------------------- */
.bw-auf-gruppe,
.bw-staedte { border-top: 1px solid var(--linie); }
.bw-auf { border-bottom: 1px solid var(--linie); }
.bw-auf > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.bw-auf > summary::-webkit-details-marker { display: none; }
.bw-auf > summary::after,
.kopf__staedte > summary::after,
.abend__zeichen,
.zl__zeichen {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--gedaempft);
  border-bottom: 2px solid var(--gedaempft);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--uebergang);
}
.bw-auf[open] > summary::after,
.kopf__staedte[open] > summary::after,
.abend__zeile[open] .abend__zeichen,
.zl__auf[open] .zl__zeichen { transform: translateY(2px) rotate(225deg); }
.bw-auf > :not(summary) { margin-top: 0; margin-bottom: 16px; }
.bw-auf__titel { margin: 0; font: inherit; }
.bw-auf__inhalt > p { max-width: 62ch; }
/* kompakt (Stadtseite „Der Comedy Slam“ unter den Chips) */
.bw-auf--kompakt { margin: 0 0 6px; border-top: 1px solid var(--linie); }
.bw-auf--kompakt > summary { min-height: 44px; padding: 6px 0; }
.bw-auf--kompakt > :not(summary) { margin-bottom: 12px; }
/* Städte als Aufklapper auf /bewerbung/ */
.bw-stadt > summary { font-family: var(--schrift-titel); font-size: 22px; font-weight: 700; }
.bw-stadt .tz-liste--a2 { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Zeitleiste der Stadtseiten (Sonderform der Aufklapper)
   -------------------------------------------------------------------------- */
.zl { position: relative; margin: 6px 0 0; padding: 0; list-style: none; }
.zl::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: var(--linie);
}
.zl__punkt { position: relative; scroll-margin-top: 84px; }
.zl__punkt + .zl__punkt { margin-top: 4px; }
.zl__auf { border-radius: var(--rundung); transition: background-color var(--uebergang); }
.zl__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 12px 8px 2px;
  list-style: none;
  cursor: pointer;
}
.zl__kopf::-webkit-details-marker { display: none; }
.zl__marke { display: grid; flex: none; place-items: center; width: 24px; height: 24px; }
.zl__marke::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--grund);
  box-shadow: inset 0 0 0 2px var(--text);
}
.zl__punkt.ist-vorbei .zl__marke::before { background: var(--gedaempft); box-shadow: none; opacity: 0.7; }
.zl__punkt.ist-naechste .zl__marke::before { width: 16px; height: 16px; background: var(--text); box-shadow: 0 0 0 5px rgb(236 238 233 / 20%); }
.zl__punkt--finale .zl__marke::before { width: 18px; height: 18px; background: var(--gold); box-shadow: 0 0 0 4px rgb(203 155 80 / 25%); }
.zl__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.zl__runde { font-size: 17px; font-weight: 700; line-height: 1.25; }
.zl__datum { font-size: 15px; color: var(--gedaempft); }
.zl__status {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.zl__status:empty { display: none; }
.ist-naechste .zl__status { padding: 3px 9px; border-radius: 999px; background: var(--text); color: var(--dunkel); }
.zl__mehr { padding: 0 14px 18px 38px; }
.zl__info { margin: 0 0 6px; }
.zl__sieger { margin: 8px 0; font-weight: 700; }
.zl__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.zl__knoepfe .sknopf { padding: 0 14px; }
.zl__folgt { margin: 10px 0 0; }
.zl__lineup { margin: 0; }
.zl__lineup > .leise { margin: 6px 0 0; }
.zl__punkt.ist-vorbei .zl__runde { color: var(--gedaempft); }
.zl__punkt.ist-naechste .zl__auf { background: var(--dunkel); }
/* Finale: Goldverlauf als Rahmen (E8) */
.zl__punkt--finale .zl__auf {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--grund), var(--grund)) padding-box, var(--gold-verlauf) border-box;
}
.zl__punkt--finale.ist-naechste .zl__auf {
  background: linear-gradient(var(--dunkel), var(--dunkel)) padding-box, var(--gold-verlauf) border-box;
}
.zl__punkt--finale .zl__runde { font-family: var(--schrift-titel); font-size: 22px; color: var(--gold-text); }
.zl__punkt--finale.ist-naechste .zl__status { background: var(--gold-text); }

/* Sieger und Finalplätze in der Zeitleiste (Übernahme Schritt 4): Inhalt
   wie der bisherige Turnierbaum (Siegerbild aus bilder/web/sieger-…,
   Instagram, „Weiter im Finale“, Kreise je Vorrunde mit Nachrücker),
   Gestaltung a0 (Gold, 6-px-Ecken). Markup: zl_sieger_html()/zl_finale_html()
   im Generator, zlSiegerHtml()/zlFinaleHtml() in js/start.js. */
.zs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--gold);
  border-radius: var(--rundung-knopf);
}
.zs__link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.zs__bild { position: relative; display: block; flex: none; width: 44px; height: 44px; overflow: hidden; border: 1.5px solid var(--gold); border-radius: 50%; background: var(--dunkel); }
.zs--final .zs__bild { width: 72px; height: 72px; }
.zs__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zs__platzhalter { display: block; width: 100%; height: 100%; background: var(--dunkel); }
.zs__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.zs__name { font-family: var(--schrift-titel); font-size: 17px; font-weight: 700; line-height: 1.2; }
.zs--final .zs__name { font-size: 22px; color: var(--gold-text); }
.zs__mehr { font-size: 15px; color: var(--gedaempft); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
.zs__link:hover .zs__mehr { text-decoration-color: currentColor; }
.zs__sozial { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--rundung-knopf); color: var(--gold-text); }
.zs__sozial:hover { background: rgb(236 238 233 / 8%); }
.zs__sozial svg { width: 20px; height: 20px; fill: currentColor; }
.zl__stand { margin: 0 0 6px; color: var(--gedaempft); }
.zp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 360px; margin: 8px 0 12px; padding: 0; list-style: none; }
.zp__platz { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.zp__platz--besetzt { border: 2px solid var(--gold); background: var(--dunkel); }
.zp__platz--offen { border: 1.5px dashed var(--linie-stark); }
.zp__platz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zp__leer { display: block; width: 100%; height: 100%; }
/* Turnier-Gerüst der Bald-Seiten: dieselbe Zeitleiste ohne Aufklapper. */
.zl--geruest .zl__kopf { cursor: default; }
/* Publikumsfotos im Block „Der Abend“, Anfahrt mit Mikrofon-Foto. */
.publikum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.publikum__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rundung); background: var(--dunkel); }
.publikum__foto picture, .publikum__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.anfahrt { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.anfahrt__foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--rundung); background: var(--dunkel); }
.anfahrt__foto picture, .anfahrt__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.anfahrt__text .ort__adresse { margin: 2px 0 8px; font-style: normal; color: var(--gedaempft); }
/* Gesperrter Ticketknopf („Tickets bald verfügbar“). */
.sknopf--aus { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linie-stark); color: var(--gedaempft); cursor: not-allowed; }

/* Line-up im aufgeklappten Eintrag (nur Stadtseiten). Unter 600px ein
   wischbarer Streifen im Kasten: je Bild ein Einrastpunkt, etwa 2,5 Bilder
   sichtbar, das angeschnittene deutet das Weiterwischen an (angelehnt an
   die Wischkarten .lgreihe der Terminseiten, ohne Social-Symbole). Der
   Streifen ist fokussierbar (tabindex im Markup). Ab 600px alle 6 in einer
   Reihe (Abschnitt „Tablet und Desktop“). */
.minireihe {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.minireihe::-webkit-scrollbar { display: none; }
.mini { flex: 0 0 calc((100% - 2 * 8px) / 2.5); min-width: 0; scroll-snap-align: start; }
.mini__bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rundung); background: var(--dunkel); }
.mini__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Initialen-Ersatz füllt dasselbe 4:5-Feld */
.mini .lk__initialen { font-size: 32px; }
.lk__initialen {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--schrift-titel);
  font-size: 15px;
  font-weight: 700;
  color: var(--gedaempft);
}
.mini__name {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  font-family: var(--schrift-titel);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Line-up groß (Terminseite): Wischkarten 4:5, Name und Social im Bild
   -------------------------------------------------------------------------- */
.lgkarte {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rundung);
  background: var(--dunkel);
}
.lgkarte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(21 47 52 / 0%) 48%, rgb(21 47 52 / 88%) 100%);
  pointer-events: none;
}
.lgkarte__bild { position: absolute; inset: 0; display: block; }
.lgkarte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lgkarte__initialen {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--schrift-titel);
  font-size: 52px;
  font-weight: 700;
  color: var(--gedaempft);
}
.lgkarte__unten {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lgkarte__name {
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 12px rgb(21 47 52 / 60%);
}
.lgkarte__sozial { display: flex; gap: 8px; }
.lgkarte__sozial a { background: rgb(21 47 52 / 72%); }
.lgkarte__sozial a:hover { background: var(--dunkel); }
.lgkarte__sozial svg { width: 20px; height: 20px; fill: currentColor; }
/* Drei Social-Links (Auftrag J): kleinere Knöpfe (32 × 32px, Lücke 4px),
   damit alle nebeneinander in die Karte passen; bei 1–2 Links wie bisher. */
.lgkarte__sozial:has(> a:nth-child(3)) { gap: 4px; }
.lgkarte__sozial:has(> a:nth-child(3)) a { width: 32px; height: 32px; }
.lgkarte__sozial:has(> a:nth-child(3)) svg { width: 16px; height: 16px; }
/* Platzhalter zwischen echten Namen (datenabhängig) */
.lgkarte--platzhalter .lgkarte__bild { border: 1.5px dashed var(--linie-stark); border-radius: var(--rundung); }
.lgkarte--platzhalter .lgkarte__name { font-family: var(--schrift-text); font-size: 17px; color: var(--gedaempft); text-shadow: none; }
.lgsteht {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-weight: 700;
}
.lgsteht::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.lgmoderation { margin: 14px 0 0; color: var(--gedaempft); }
.lgmoderation strong { color: var(--text); }

/* --------------------------------------------------------------------------
   „Dein Abend“ (Terminseite): Aufklapper mit Symbol links
   -------------------------------------------------------------------------- */
.abend { border-bottom: 1px solid var(--linie); }
.abend__zeile { border-top: 1px solid var(--linie); }
.abend__kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
}
.abend__kopf::-webkit-details-marker { display: none; }
.abend__symbol {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dunkel);
  color: var(--text);
}
.abend__stichwort { flex: 1; font-size: 17px; font-weight: 700; line-height: 1.3; }
.abend__inhalt { padding: 0 0 16px 56px; }
.abend__inhalt p { margin: 0 0 8px; max-width: 62ch; }
.abend__inhalt > :last-child { margin-bottom: 0; }
.abend__wert { font-weight: 700; }
.abend__neben { display: block; margin: 0 0 4px; font-size: 15px; font-style: normal; color: var(--gedaempft); }
.abend__regeln { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Stadtkacheln (zwei nebeneinander)
   -------------------------------------------------------------------------- */
.kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kachel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rundung);
  background: var(--dunkel);
  color: var(--text);
  text-decoration: none;
}
.kachel__foto,
.kachel__foto picture { display: block; height: 100%; }
.kachel__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--uebergang);
}
.kachel::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(to bottom, rgb(21 47 52 / 0%), rgb(21 47 52 / 70%) 45%, rgb(21 47 52 / 96%));
}
.kachel:hover .kachel__bild { filter: brightness(1.08); }
.kachel__text {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-shadow: 0 1px 10px rgb(21 47 52 / 70%);
}
.kachel__name {
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
}
.kachel__unter { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
/* angekündigte Städte: schräger „Coming soon“-Streifen, Foto gedämpft */
.kachel--bald .kachel__bild { filter: grayscale(0.6) brightness(0.62); }
.kachel--bald:hover .kachel__bild { filter: grayscale(0.6) brightness(0.72); }
.kachel__stoerer {
  position: absolute;
  top: 34%;
  left: -20%;
  right: -20%;
  z-index: 2;
  padding: 7px 0;
  transform: rotate(-24deg);
  background: var(--dunkel);
  border-top: 1px solid var(--linie-stark);
  border-bottom: 1px solid var(--linie-stark);
  box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
  color: var(--text);
  font: 700 13px/1 var(--schrift-text);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Orte (Spielort auf den „bald“-Seiten)
   -------------------------------------------------------------------------- */
.orte {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ort__name {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
}
.ort__adresse {
  font-style: normal;
  color: var(--gedaempft);
}

/* --------------------------------------------------------------------------
   /bewerbung/, /showablauf/, /regeln/ (Listen, Hervorhebungen, Spielzeit)
   -------------------------------------------------------------------------- */
.bw-liste { margin: 0 0 12px; padding-left: 1.15em; }
.bw-liste li { margin: 6px 0; padding-left: 2px; }
.bw-liste li::marker { color: var(--gedaempft); }
.bw-liste .bw-liste { margin: 4px 0 0; }
.bw-liste a,
.bw-showhinweis a { text-decoration: underline; text-underline-offset: 3px; }
.bw-text { margin: 0 0 12px; font-weight: 600; }
.bw-preisgeld { margin: 18px 0; font-family: var(--schrift-titel); font-size: 24px; font-weight: 700; line-height: 1.2; }
.bw-aufruf { margin: 0 0 16px; font-family: var(--schrift-titel); font-size: 24px; font-weight: 700; line-height: 1.2; }
.bw-knopfzeile { margin: 22px 0 6px; }
.bw-hinweis { margin: 0; font-size: 15px; color: var(--gedaempft); }
/* Hervorhebungen mit Balken links */
.bw-wichtig,
.bw-hervor,
.bw-showhinweis { padding: 2px 0 2px 16px; border-left: 2px solid var(--text); }
.bw-wichtig { margin: 4px 0 0; }
.bw-auf .bw-wichtig { margin: 12px 0; }
.bw-hervor { margin: 18px 0 0; font-weight: 600; max-width: 62ch; }
.bw-showhinweis { margin: 28px var(--rand) 0; font-size: 15px; }
.bw-showhinweis p { margin: 0; }
.bw-showhinweis a { white-space: nowrap; font-weight: 700; }
.bw-wichtig__titel {
  margin: 0 0 6px;
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.bw-zwischenzeile { margin: 14px 0 4px; font-weight: 700; }
.bw-spielzeit { margin: 12px 0 0; padding: 0; list-style: none; }
.bw-spielzeit li { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.bw-spielzeit li:first-child { border-top: 1px solid var(--linie); }
.bw-spielzeit span { color: var(--gedaempft); }

/* --------------------------------------------------------------------------
   Rechtstexte (Wortlaut unverändert, nur Optik)
   -------------------------------------------------------------------------- */
.rechtstext {
  padding: 0 var(--rand);
  font-size: 17px;
  overflow-wrap: anywhere;
}
.rechtstext-h1 {
  position: relative;
  margin: -36px 0 18px;
  font-family: var(--schrift-titel);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: normal;
  hyphens: auto;
}
.rechtstext h2 {
  margin: 28px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.rechtstext ul { padding-left: 20px; }
.rechtstext a { text-underline-offset: 3px; }
/* Domain-Angaben (code): Wortlaut bleibt, Schrift der Marke (E1) */
.rechtstext code { font-family: var(--schrift-text); font-size: inherit; }

/* --------------------------------------------------------------------------
   Fuß (Aufbau unverändert; Schriftgrößen im Raster)
   -------------------------------------------------------------------------- */
.fuss {
  margin-top: 44px;
  padding: 30px var(--rand) 36px;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: 15px;
}
.fuss__marke {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.fuss__logo { width: 56px; height: auto; }
.fuss__claim { margin: 0; font-weight: 600; }
/* Runder Instagram-Knopf in Fuß und Vollbildmenü (Auftrag J): Kontur Gold,
   44 × 44px, Symbol wie auf den Line-up-Karten */
.sozialknopf {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  color: var(--text);
  transition: background-color var(--uebergang);
}
.sozialknopf:hover { background: rgb(236 238 233 / 8%); }
.sozialknopf svg { width: 20px; height: 20px; fill: currentColor; }
.fuss__marke .sozialknopf { margin-left: auto; }
.pmenue__sozial { margin: 28px 0 0; }
.fuss__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.fuss__nav > div:last-child { grid-column: 1 / -1; }
.fuss__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuss__nav > div:last-child ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}
.fuss__titel {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fuss__nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.fuss__nav a:hover,
.fuss__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.fuss__bald {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.fuss__nachweis { margin: 18px 0 0; font-size: 13px; }

/* --------------------------------------------------------------------------
   Feste Ticketleiste (bzw. Bewerbungsleiste auf /bewerbung/): ein breiter
   goldener Knopf; tritt mit JavaScript zurück, solange ein goldener Knopf im
   Inhalt zu sehen ist (js/profil.js).
   -------------------------------------------------------------------------- */
.tleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: rgb(21 47 52 / 95%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tleiste__eintrag {
  display: block;
  max-width: calc(var(--spalte) - 2 * var(--rand));
  margin: 0 auto;
}
.tleiste--stadt { transition: transform 200ms ease, visibility 200ms; }
.tleiste--stadt.ist-verdeckt { visibility: hidden; transform: translateY(110%); }

/* --------------------------------------------------------------------------
   Einwilligungsbanner (Markup aus einwilligung_html(), Logik js/consent.js).
   „Ablehnen“ und „Alle akzeptieren“ gleich groß und gleich gefüllt (Gold),
   „Einstellungen“ als Umriss-Knopf.
   -------------------------------------------------------------------------- */
.csd-consent {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  max-width: 500px;
  max-height: calc(100vh - 20px);
  margin: 0 auto;
  overflow-y: auto;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rundung);
  background: var(--dunkel);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgb(0 0 0 / 50%);
}
.csd-consent:focus { outline: none; }
.csd-consent-inner { padding: 18px; }
.csd-consent p { margin: 0; }
.csd-consent .csd-consent-title {
  margin-bottom: 6px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.csd-consent .csd-consent-text a { text-underline-offset: 3px; }
.csd-consent .csd-consent-details {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.csd-consent .csd-consent-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csd-consent .csd-consent-category-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.csd-consent .csd-consent-category-label input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--text);
}
.csd-consent .csd-consent-category-text {
  padding-left: 32px;
  font-size: 15px;
  color: var(--gedaempft);
}
.csd-consent .csd-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.csd-consent .csd-consent-btn {
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--rundung-knopf);
  background: var(--gold-knopf);
  color: var(--auf-gold-knopf);
  font: 700 17px/1.15 var(--schrift-text);
  cursor: pointer;
  transition: background-color var(--uebergang), box-shadow var(--uebergang);
}
.csd-consent .csd-consent-btn:hover { background: var(--gold-knopf-hover); }
.csd-consent .csd-consent-btn:active { background: var(--gold-knopf-aktiv); }
.csd-consent .csd-consent-btn--secondary,
.csd-consent .csd-consent-btn[data-consent-action="save"] { grid-column: 1 / -1; }
.csd-consent .csd-consent-btn--secondary {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
}
.csd-consent .csd-consent-btn--secondary:hover { background: rgb(236 238 233 / 8%); box-shadow: inset 0 0 0 1.5px var(--gold-text); }
.csd-consent .csd-consent-btn--secondary:active { background: transparent; }


/* ==========================================================================
   Tablet und Desktop (Auftrag 17.10.2026): dieselben Seiten und Bausteine,
   nur andere Anordnung. Unter 600px gilt keine Regel dieses Abschnitts.
   - Inhalt höchstens 1120px, mittig (.block--breit: Line-up, Kacheln,
     weitere Termine); Fließtexte, Aufklapper- und Terminlisten in einer
     Lesespalte von höchstens 760px, mittig (.block).
   - Wischreihen werden Raster, Chips brechen um.
   - Fotoköpfe als breite Querformate (<source media="(min-width: 600px)">
     aus dem Generator), Höhe 45–55 % der Fensterhöhe, mindestens 320px.
   - Ticket-/Bewerbungsleiste unten nur unter 900px.
   - Menüleiste ab der gemessenen Umbruchbreite 1040px (siehe dort).
   ========================================================================== */
@media (min-width: 600px) {
  :root { --rand: 24px; }
  body { max-width: none; box-shadow: none; }

  /* Kopfzeile über die volle Breite, Inhalt an der 1120er-Spalte */
  .kopf {
    max-width: none;
    padding-left: max(var(--rand), env(safe-area-inset-left), calc((100% - 1120px) / 2));
    padding-right: max(var(--rand), env(safe-area-inset-right), calc((100% - 1120px) / 2));
  }
  /* Logo wie live (B): ab 600px nebeneinander (<picture> aus kopf_html()),
     40px hoch; 1040–1199px komplett 52px, ab 1200px wieder 40px (unten). */
  .kopf__logo { height: 40px; }

  /* Fotoköpfe: Querformat über die volle Breite, Text in der Lesespalte */
  .fotokopf__foto,
  .fotokopf--start .fotokopf__foto {
    aspect-ratio: auto;
    height: clamp(320px, 50vh, 620px);
    height: clamp(320px, 50svh, 620px);
    min-height: 0;
    max-height: none;
  }
  /* Alle Fotoköpfe außer der Startseite: Höhe der Stadtseite */
  .fotokopf:not(.fotokopf--start) .fotokopf__foto {
    height: clamp(320px, 45vh, 560px);
    height: clamp(320px, 45svh, 560px);
  }
  .fotokopf__bild { object-position: 50% 45%; }
  .fotokopf--start .fotokopf__bild { object-position: 50% 22%; }
  .fotokopf--foto-overall-weite .fotokopf__bild { transform: none; }
  .fotokopf__text {
    left: max(var(--rand), calc((100% - 760px) / 2));
    right: max(var(--rand), calc((100% - 760px) / 2));
  }
  .fotokopf--tseite .fotokopf__text,
  .fotokopf--seite .fotokopf__text {
    left: auto;
    right: auto;
    margin-inline: max(var(--rand), calc((100% - 760px) / 2));
  }
  .fotokopf__aktion .sknopf--breit { display: inline-flex; width: auto; min-width: 280px; }
  /* „Tickets & Termine“: das Leerzeichen vor „&“ steht im Text, kein
     zusätzlicher Flex-Abstand */
  .kopf__termine { gap: 0; }
  .fotoband { height: 200px; }

  /* Breiten: Lesespalte 760px, breite Blöcke 1120px */
  .block { max-width: calc(760px + 2 * var(--rand)); margin-inline: auto; }
  .block--breit { max-width: calc(1120px + 2 * var(--rand)); }
  /* Line-up der Terminseiten in der Lesespalte: Karten bündig mit der h1
     (Korrektur K1: Kennung data-lineup; data-lineup-art gibt es im Markup
     nicht, die Regel griff daher nie) */
  .block--breit[data-lineup] { max-width: calc(760px + 2 * var(--rand)); }
  /* Startseite, Städte-Abschnitt (Auftrag K): in der Lesespalte wie
     „Nächste Shows“; Kacheln flacher (600–1039px: 2 Spalten, 220px hoch).
     Nur die Startseite (body:has(.kopf--start)); die Stadtseiten tragen
     dieselbe Abschnitts-Kennung und bleiben unverändert. */
  body:has(.kopf--start) .block--breit[aria-labelledby="staedte-titel"] { max-width: calc(760px + 2 * var(--rand)); }
  body:has(.kopf--start) [aria-labelledby="staedte-titel"] .kachel { aspect-ratio: auto; height: 220px; }
  .zeilenlink,
  .bw-showhinweis {
    width: calc(100% - 2 * var(--rand));
    max-width: 760px;
    margin-inline: auto;
  }
  .rechtstext { max-width: calc(760px + 2 * var(--rand)); margin-inline: auto; }

  /* Chips: Umbruch statt Wischen */
  .chips { flex-wrap: wrap; margin: 0 0 12px; padding: 0 0 2px; overflow: visible; }
  .rchips { margin-inline: 0; }
  .rchips__liste { flex-wrap: wrap; padding-inline: 0; overflow: visible; }
  /* Line-up der Stadtseiten: alle 6 in einer Reihe über die Kastenbreite
     (wie live: 6 Spalten, Lücke 0,5rem), kein Wischen, kein Umbruch
     (Korrektur K1). Der Kasten ist höchstens so breit wie ab 1040px, die
     Bilder werden darunter nur kleiner. */
  .minireihe {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Wischreihen als Raster */
  .lgreihe,
  .treihe {
    display: grid;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* Line-up der Terminseiten (Korrektur K1): immer 3 Spalten, Karten
     höchstens 180px (Auftrag I) = 2 Reihen bei 6 Comedians; links bündig
     mit der h1. Die Spaltenlücke gibt nach, solange der Block schmaler als
     3 × 180px + 2 × 12px ist (600–611px: Lücke 6–12px), damit die Karten
     wie unter 600px 180px breit bleiben und beim Schmalerwerden nie
     wachsen. */
  .lgreihe {
    grid-template-columns: repeat(3, minmax(0, 180px));
    justify-content: start;
    column-gap: clamp(0px, (100% - 540px) / 2, 12px);
  }
  .treihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgreihe > li,
  .treihe > li { width: auto; }
  .lgkarte__sozial { flex-wrap: wrap; }

  /* Startseite „Nächste Shows“: Zeile bleibt Zeile; rechts der Knopf statt
     Pfeil. Der Zeilenlink (.tz__flaeche) deckt per ::after die ganze Zeile
     ab; der Knopf liegt darüber und bleibt eigenständig bedienbar (kein
     Link im Link). */
  .tz__flaeche::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--rundung);
  }
  .tz__pfeil { display: none; }
  .tz__aktion {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    padding-right: 16px;
  }
  .tz__stadt { font-size: 30px; }

  /* Leiste unten (bis 899px) über die volle Breite, Knopf mittig */
  .tleiste { max-width: none; }

  /* Fuß: mittig in der Lesespalte */
  .fuss__innen { max-width: 760px; margin-inline: auto; }
}

@media (min-width: 900px) {
  /* Ticket- und Bewerbungsleiste nur unter 900px (wie live) */
  .tleiste { display: none !important; }
  body:has(.tleiste:not([hidden])) { padding-bottom: 0; }
}

@media (min-width: 1040px) {
  :root { --rand: 32px; }

  .treihe,
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Startseite, Städte-Abschnitt (Auftrag K): 3 Spalten, 260px hoch */
  body:has(.kopf--start) [aria-labelledby="staedte-titel"] .kachel { height: 260px; }

  /* Startseite: Kopfzeile immer sichtbar, kein Einblenden */
  body:has(.kopf--start) { padding-top: var(--kopf-hoehe); }
  .kopf--start:not(.ist-sichtbar) { background: var(--kopf-grund); border-bottom-color: var(--kopf-linie); pointer-events: auto; }
  .kopf--start:not(.ist-sichtbar) :is(.kopf__marke, .kopf__seite, .kopf__termine) { opacity: 1; visibility: visible; }
  .kopf--start:not(.ist-sichtbar) .pmenue__knopf {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .fotokopf--start .fotokopf__foto::before { display: none; }

  /* Fuß mehrspaltig: Marke links, drei Linkspalten */
  .fuss__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    column-gap: 48px;
    align-items: start;
    max-width: 1120px;
  }
  .fuss__marke { flex-direction: column; align-items: flex-start; }
  .fuss__marke .sozialknopf { margin-left: 0; }
  .fuss__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .fuss__nav > div:last-child { grid-column: auto; }
  .fuss__nav > div:last-child ul { display: block; }
  .fuss__nachweis { grid-column: 1 / -1; }
}

/* Menüleiste: Logo links; rechts Home, Aufklapper „Städte“ (aktive Städte,
   darunter abgesetzt „Bald“), Regeln & Ablauf, Bewerbung, Kopfknopf.
   Umbruchbreite gemessen (Chrome, vier Seiten, 2-px-Schritte, damals noch
   mit Einzelstädten und „Coming soon“): Logo, Leiste (713px) und „Tickets & Termine“ passen mit
   32px Rand ab 1010px Layoutbreite ohne Umbruch und ohne Überlappung in
   eine Zeile; die Leiste mit „Städte“ ist schmaler. Gesetzt ist 1040px.
   Darunter Seitenname und Menüknopf. Alle Regeln der Leiste stehen in
   diesem @media-Block (darunter ist .kopf__nav ohnehin ausgeblendet).
   Schrift, Hover und aktive Seite wie live (B, css/stil.css .leiste a). */
@media (min-width: 1040px) {
  .kopf__leiste {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kopf__leiste a,
  .kopf__staedte > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: var(--rundung-knopf);
    color: var(--text);
    font-size: 18px;  /* wie live (B): --groesse-menue 1.125rem */
    font-weight: 500; /* wie live (B): --staerke-menue */
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--uebergang);
  }
  /* Hover und offener Aufklapper: Gold 10 % wie live (B: --flaeche-hover) */
  .kopf__leiste a:hover,
  .kopf__staedte > summary:hover,
  .kopf__staedte[open] > summary { background: color-mix(in srgb, var(--gold) 10%, transparent); }
  /* Aktive Seite: Gold (--gold-text) und Goldstrich unten, eckig, kein Unterstrich.
     „Städte“ ist aktiv auf Stadt- und Terminseiten (kopf__staedte--aktuell). */
  .kopf__leiste a[aria-current="page"],
  .kopf__staedte--aktuell > summary {
    border-radius: 0;
    color: var(--gold-text);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--gold-text);
  }
  .kopf__staedte { position: relative; }
  .kopf__staedte > summary { list-style: none; cursor: pointer; }
  .kopf__staedte > summary::-webkit-details-marker { display: none; }
  .kopf__staedte > summary::after { margin: 0 0 0 2px; border-color: var(--text); }
  /* Liste linksbündig unter „Städte“ (wie live: left 0) */
  .kopf__staedte-liste {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1;
    min-width: 200px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--linie-stark);
    border-radius: var(--rundung);
    background: var(--dunkel);
    box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
  }
  .kopf__staedte-gruppe { margin: 0; padding: 0; list-style: none; }
  .kopf__staedte-liste a { display: flex; width: 100%; border-radius: var(--rundung-knopf); }
  /* Angekündigte Städte: abgesetzt mit Linie und kleiner Überschrift, gedämpft */
  .kopf__staedte-titel {
    margin: 8px 0 0;
    padding: 12px 10px 4px;
    border-top: 1px solid var(--linie);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gedaempft);
  }
  .kopf__staedte-gruppe--bald a { color: var(--gedaempft); }
  .kopf__staedte-gruppe--bald a:hover { color: var(--text); }

  .kopf__nav { display: block; margin-left: auto; }
  .kopf__marke { margin-right: 0; }
  .kopf__seite,
  .kopf .pmenue { display: none; }
  .kopf__logo { height: 52px; } /* 1040–1199px komplett (live 60px, hier 52px) */
}
@media (min-width: 1200px) {
  .kopf__logo { height: 40px; } /* wie live (B): ab 1200px nebeneinander */
}

/* --------------------------------------------------------------------------
   Desktop, Bewegung, Druck
   -------------------------------------------------------------------------- */
/* Handy-Spalte 560–599px (ab 600px Abschnitt „Tablet und Desktop“) */
@media (min-width: 560px) and (max-width: 599.98px) {
  body { box-shadow: 0 0 0 1px var(--linie); }
  .fotokopf__foto { max-height: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .kopf,
  .pmenue,
  .tleiste,
  .csd-consent { display: none !important; }
  html, body { background: #fff; color: #000; }
  body { padding-top: 0; }
}