/* ==========================================================================
   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; }
}

/* ===== STARTSEITE ENTWURF C (2026-10-23) — Gestaltung c, übernommen 25.10.2026 ===== */
/* Nur die Startseite (<body class="profil startseite-c">); alle Selektoren
   beginnen mit .startseite-c, nichts wirkt auf andere Seiten. Markup:
   start_c_*() in werkzeuge/seiten-erzeugen.py, geschrieben von
   erzeuge_startseite_c(). Keine Bewegung; Farbübergänge nur über
   --uebergang (180 ms). Rhythmus beim Scrollen (seit Runde 4c): Foto mit
   Faktenzeile → Petrol (Nächste Shows) → helles Band mit schräger Kante
   (Ablauf) → Dunkel mit Punktmuster und schräger Kante (Städte, Abschnitt
   STAEDTE-KACHELN) → Publikumsfoto → helles Band mit schräger Kante (drei
   Texte) → Karte mit Goldrand (Bewerbung) → Fuß. Bis Runde 4b war der
   Ablauf dunkel; neben den nun direkt folgenden, ebenfalls dunklen Städten
   wäre die Grenze verschwunden.
   Neue Töne nur aus der Palette: Hell = #ECEEE9 (--text) als Fläche, Schrift
   darauf #152F34 (12,08:1), Dachzeile darauf #094B59 (8,31:1). Goldschrift
   #DCB861 auf #094B59 5,12:1, auf #152F34 7,44:1, auf #11454F 5,57:1. */
.startseite-c {
  --sc-hell: #ECEEE9;
  --sc-auf-hell: #152F34;
  --sc-dach-hell: #094B59;
  --sc-schraege: 28px;
  --sc-muster: radial-gradient(rgb(236 238 233 / 7%) 1px, transparent 1.6px);
}

/* Abschnitte, Kopf mit Dachzeile und kurzer großer h2 */
.startseite-c .sc-abschnitt { padding: 36px var(--rand) 40px; }
.startseite-c .sc-innen { max-width: 760px; margin-inline: auto; }
.startseite-c .sc-kopf { margin: 0 0 18px; }
.startseite-c .sc-dach {
  margin: 0 0 6px;
  font: 700 13px/1.3 var(--schrift-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.startseite-c .sc-titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  text-wrap: balance;
}
.startseite-c .sc-knopfzeile { margin: 20px 0 0; }

/* Faktenzeile im Fotokopf (Runde 4a, 24.10.2026): direkt unter der
   Unterzeile, Teil des Kopfes über dem Foto-Verlauf, kein eigenes Band.
   Schrift angelehnt an das Logo: Source Sans 3 in 900, Versalien, leicht
   enger Buchstabenabstand; Zahlen Gold (#DCB861), Wörter #ECEEE9, kleine
   goldene Rauten als Trenner (nur CSS, kein Text im Markup). Größe 15px
   (ab 600px 17px), klar kleiner als die Unterzeile (22px); das Logo bleibt
   das größte Element. Eine Zeile; unter 360px drei gleich breite Teile. */
.startseite-c .sc-fakten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 1px 10px rgb(0 0 0 / 45%);
}
/* Zahl und Wort als Fließtext (Runde 4c): das Leerzeichen im Markup wird
   angezeigt und vorgelesen („6 Comedians“); word-spacing ergänzt es auf den
   bisherigen Abstand (gemessen 4,5px bei 15px, 5,09px bei 17px). Raute
   links, senkrecht mittig wie zuvor. */
.startseite-c .sc-fakten li { position: relative; word-spacing: 0.11em; }
.startseite-c .sc-fakten li + li { padding-left: 17px; }
.startseite-c .sc-fakten li + li::before {
  content: "";
  position: absolute;
  top: calc(50% - 2.5px);
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--gold-text);
  transform: rotate(45deg);
}
.startseite-c .sc-fakten__zahl { color: var(--gold-text); }
.startseite-c .sc-fakten__wort { color: var(--text); }
/* Handy: Kopf 36px höher als bisher (300 → 336px), damit Logo,
   Unterzeile und Faktenzeile Platz haben, ohne ins Foto hochzurücken */
@media (max-width: 599.98px) {
  .startseite-c .fotokopf--start .fotokopf__foto { height: 336px; }
}
@media (max-width: 359.98px) {
  .startseite-c .sc-fakten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    white-space: normal;
    text-align: center;
  }
  /* Zahl über dem Wort: die Zahl füllt ihre Zeile; pre-wrap hält das
     Leerzeichen am Zeilenende fest, sonst fiele es aus dem Vorlesetext */
  .startseite-c .sc-fakten li { white-space: pre-wrap; }
  .startseite-c .sc-fakten li + li { padding-left: 0; }
  .startseite-c .sc-fakten li + li::before { display: none; }
  .startseite-c .sc-fakten__zahl { display: inline-block; width: 100%; }
}

/* Nächste Shows: Liste unverändert, nur „Ort · Uhrzeit“ in voller
   Textfarbe statt gedämpft (kein kleiner grauer Text) */
.startseite-c .sc-shows { padding-top: 32px; }
.startseite-c .tz__info { color: var(--text); }

/* Ablauf: helles Band, oben schräge Kante (Runde 4c; vorher dunkel mit
   Punktmuster, das tragen jetzt die direkt folgenden Städte). Unten Platz
   für deren schräge Kante, die über das Band greift. Töne wie die drei
   Texte: Schrift #152F34 (12,08:1), Dachzeile und Ziffernkreis #094B59
   (8,31:1), Ziffer Gold auf #094B59 (5,12:1). */
.startseite-c .sc-ablauf {
  padding-top: calc(36px + var(--sc-schraege));
  padding-bottom: calc(40px + var(--sc-schraege));
  background: var(--sc-hell);
  color: var(--sc-auf-hell);
  clip-path: polygon(0 var(--sc-schraege), 100% 0, 100% 100%, 0 100%);
}
.startseite-c .sc-ablauf .sc-dach { color: var(--sc-dach-hell); }
.startseite-c .sc-ablauf .sc-titel { color: var(--sc-auf-hell); }
.startseite-c .sc-ablauf .textlink { color: var(--sc-auf-hell); text-decoration-color: rgb(21 47 52 / 45%); }
.startseite-c .sc-ablauf .textlink:hover { text-decoration-color: currentColor; }
.startseite-c .sc-ablauf :focus-visible { outline-color: var(--sc-auf-hell); }
/* Städte direkt danach: schräge Kante über dem Ende des hellen Bandes */
.startseite-c .sc-ablauf + .sc-staedte-abschnitt { margin-top: calc(-1 * var(--sc-schraege)); }
.startseite-c .sc-schritte {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.startseite-c .sc-schritt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgb(21 47 52 / 18%);
}
.startseite-c .sc-schritt:first-child { padding-top: 2px; border-top: 0; }
.startseite-c .sc-schritt__nr {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sc-dach-hell);
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--gold-text);
}
.startseite-c .sc-schritt__titel {
  margin: 0 0 4px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sc-auf-hell);
}
.startseite-c .sc-schritt p { margin: 0; color: var(--sc-auf-hell); }

/* Publikumsfoto als Bildband über die volle Breite; fester Platz (3:2) und
   dunkle Fläche, solange das Bild lädt */
.startseite-c .sc-publikum { position: relative; background: var(--dunkel); }
.startseite-c .sc-publikum__foto {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--dunkel);
}
.startseite-c .sc-publikum__foto picture,
.startseite-c .sc-publikum__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.startseite-c .sc-publikum__foto::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, rgb(21 47 52 / 0%), rgb(21 47 52 / 85%) 70%, var(--dunkel));
}
.startseite-c .sc-publikum__text {
  position: relative;
  z-index: 1;
  margin-top: -44px;
  padding: 0 var(--rand) 36px;
}
.startseite-c .sc-publikum .sc-kopf { max-width: 760px; margin: 0 auto; }
.startseite-c .sc-publikum .sc-titel { font-size: 36px; text-shadow: 0 2px 18px rgb(21 47 52 / 70%); }

/* Städte: aktive Städte als Fotozeilen über die volle Breite */
.startseite-c .sc-staedte {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.startseite-c .sc-stadt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 132px;
  overflow: hidden;
  border-radius: var(--rundung);
  background: var(--dunkel);
  color: var(--text);
  text-decoration: none;
}
.startseite-c .sc-stadt__foto { position: absolute; inset: 0; }
.startseite-c .sc-stadt__foto picture,
.startseite-c .sc-stadt__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: filter var(--uebergang);
}
.startseite-c .sc-stadt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(21 47 52 / 94%) 0%, rgb(21 47 52 / 70%) 50%, rgb(21 47 52 / 15%) 100%);
}
.startseite-c .sc-stadt:hover .sc-stadt__bild { filter: brightness(1.1); }
.startseite-c .sc-stadt__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 12px 16px 18px;
}
.startseite-c .sc-stadt__name {
  font-family: var(--schrift-titel);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}
.startseite-c .sc-stadt__unter { font-size: 15px; font-weight: 700; line-height: 1.3; }
.startseite-c .sc-stadt__pfeil {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 14px;
  border-radius: 50%;
  background: rgb(21 47 52 / 60%);
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  color: var(--text);
}
/* angekündigte Städte: eine kompakte Zeile statt großer Kacheln */
.startseite-c .sc-bald {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  margin: 12px 0 0;
  padding: 4px 16px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rundung);
  font-weight: 700;
}
.startseite-c .sc-bald a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* Drei kurze Texte: helles Band, oben schräge Kante, Goldlinie links */
.startseite-c .sc-hell {
  margin-top: 8px;
  padding: calc(36px + var(--sc-schraege)) var(--rand) 40px;
  background: var(--sc-hell);
  color: var(--sc-auf-hell);
  clip-path: polygon(0 0, 100% var(--sc-schraege), 100% 100%, 0 100%);
}
.startseite-c .sc-hell__liste {
  display: grid;
  gap: 30px;
  max-width: 760px;
  margin: 0 auto;
}
.startseite-c .sc-hell__teil { padding-left: 16px; border-left: 3px solid var(--gold); }
.startseite-c .sc-hell .sc-kopf { margin-bottom: 8px; }
.startseite-c .sc-hell .sc-dach { color: var(--sc-dach-hell); }
.startseite-c .sc-hell .sc-titel { font-size: 26px; color: var(--sc-auf-hell); }
.startseite-c .sc-hell p { margin: 0; color: var(--sc-auf-hell); }

/* Bewerbung: Karte mit Goldrand und Punktmuster, ein Umriss-Knopf */
.startseite-c .sc-bewerbung { padding: 40px var(--rand) 0; }
.startseite-c .sc-bewerbung__kasten {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px;
  border: 1.5px solid var(--gold-text);
  border-radius: var(--rundung);
  background: var(--sc-muster) 0 0 / 18px 18px, var(--flaeche-karte);
}
.startseite-c .sc-bewerbung__kasten .sc-kopf { margin-bottom: 8px; }
.startseite-c .sc-bewerbung__kasten > p { margin: 0 0 18px; color: var(--text); }

/* Fuß: unten Platz für die Browserleiste / Home-Anzeige */
.startseite-c .fuss { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }

/* Tablet und Desktop */
@media (min-width: 600px) {
  .startseite-c .sc-fakten { margin-top: 12px; font-size: 17px; }
  .startseite-c .sc-titel { font-size: 40px; }
  .startseite-c .sc-publikum .sc-titel { font-size: 44px; }
  .startseite-c .sc-hell .sc-titel { font-size: 28px; }
  .startseite-c .sc-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .startseite-c .sc-schritt:nth-child(2) { padding-top: 2px; border-top: 0; }
  .startseite-c .sc-publikum__foto { aspect-ratio: auto; height: clamp(320px, 48vw, 560px); }
  .startseite-c .sc-publikum__text { margin-top: -64px; }
  .startseite-c .sc-staedte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .startseite-c .sc-stadt { align-items: flex-end; min-height: 220px; }
  .startseite-c .sc-stadt::after {
    background: linear-gradient(to bottom, rgb(21 47 52 / 0%) 30%, rgb(21 47 52 / 75%) 62%, rgb(21 47 52 / 96%));
  }
  .startseite-c .sc-stadt__text { padding: 14px; }
  .startseite-c .sc-stadt__name { font-size: 28px; }
  .startseite-c .sc-stadt__pfeil { position: absolute; top: 12px; right: 12px; margin: 0; }
  .startseite-c .sc-bewerbung__kasten { padding: 32px; }
}
/* Ab 1040px: alles bleibt in der Lesespalte (760px) wie „Nächste Shows“,
   damit die linke Kante beim Scrollen nicht springt; nur die Kante wird
   steiler. */
@media (min-width: 1040px) {
  .startseite-c { --sc-schraege: 40px; }
}


/* ===== STADTSEITEN ENTWURF C (2026-10-23) — Gestaltung c, übernommen 25.10.2026 ===== */
/* Nur die fünf Stadtseiten (<body class="profil stadtseite-c" …>); alle
   Selektoren beginnen mit .stadtseite-c, nichts wirkt auf andere Seiten.
   Markup: stadt_c_*() in werkzeuge/seiten-erzeugen.py, geschrieben von
   erzeuge_stadtseite_c(). Keine Bewegung; Farbübergänge nur über
   --uebergang (180 ms).
   SCHUTZBLOCK „Ablauf des Slams“ (Runden-Chips, Zeitleiste, Line-up, Sieger,
   Finale, Gerüst): unverändert eingebettet in <div class="sc-schutz">; hier
   gibt es dafür nur Hintergrund und Abstand von .sc-schutz selbst, keine
   Regel für Elemente darin, außer der Überschrift „Ablauf des Slams“ (am
   Ende dieses Abschnitts, nur CSS, Markup unverändert; 25.10.2026).
   Städte-Kacheln und Feld „Bald auch in …“ („Andere Städte“) gestaltet allein
   der folgende Abschnitt STAEDTE-KACHELN; die Fotozeilen-Regeln aus
   Entwurf c (sc-staedte, sc-stadt*, sc-bald) sind bei der Übernahme
   entfallen.
   Teil 1: die Bausteine der Startseite (Abschnitt „STARTSEITE ENTWURF C“)
   für .stadtseite-c mit denselben Werten, ohne Faktenband und „Nächste
   Shows“ (erzeugt mit pruefung/entwurf-c-2026-10-23/runde2/
   css-bausteine-kopieren.py). Teil 2: nur Stadtseiten.
   Rhythmus aktive Stadtseite: Foto → Petrol mit dunkler Karte (Nächste
   Show) → Karte #11454F (Schutzblock) → Dunkel mit Punktraster und schräger
   Kante (vier Schritte) → Publikumsfoto → Hell mit schräger Kante
   (Comedy-Abend) → Petrol (Anfahrt) → Dunkel (Fragen) → Dunkel mit
   Punktraster und schräger Kante (Andere Städte, STAEDTE-KACHELN) → Karte mit
   Goldrand (Bewerbung) → Fuß. */

/* --- Teil 1: Bausteine der Startseite für .stadtseite-c --- */
.stadtseite-c {
  --sc-hell: #ECEEE9;
  --sc-auf-hell: #152F34;
  --sc-dach-hell: #094B59;
  --sc-schraege: 28px;
  --sc-muster: radial-gradient(rgb(236 238 233 / 7%) 1px, transparent 1.6px);
}

/* Abschnitte, Kopf mit Dachzeile und kurzer großer h2 */
.stadtseite-c .sc-abschnitt { padding: 36px var(--rand) 40px; }
.stadtseite-c .sc-innen { max-width: 760px; margin-inline: auto; }
.stadtseite-c .sc-kopf { margin: 0 0 18px; }
.stadtseite-c .sc-dach {
  margin: 0 0 6px;
  font: 700 13px/1.3 var(--schrift-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.stadtseite-c .sc-titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  text-wrap: balance;
}
.stadtseite-c .sc-knopfzeile { margin: 20px 0 0; }

/* Ablauf: dunkle Fläche mit Punktmuster, oben schräge Kante */
.stadtseite-c .sc-ablauf {
  padding-top: calc(36px + var(--sc-schraege));
  background: var(--sc-muster) 0 0 / 18px 18px, var(--dunkel);
  clip-path: polygon(0 var(--sc-schraege), 100% 0, 100% 100%, 0 100%);
}
.stadtseite-c .sc-schritte {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stadtseite-c .sc-schritt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--linie);
}
.stadtseite-c .sc-schritt:first-child { padding-top: 2px; border-top: 0; }
.stadtseite-c .sc-schritt__nr {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--gold-text);
}
.stadtseite-c .sc-schritt__titel {
  margin: 0 0 4px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.stadtseite-c .sc-schritt p { margin: 0; color: var(--text); }

/* Publikumsfoto als Bildband über die volle Breite; fester Platz (3:2) und
   dunkle Fläche, solange das Bild lädt */
.stadtseite-c .sc-publikum { position: relative; background: var(--dunkel); }
.stadtseite-c .sc-publikum__foto {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--dunkel);
}
.stadtseite-c .sc-publikum__foto picture,
.stadtseite-c .sc-publikum__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.stadtseite-c .sc-publikum__foto::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, rgb(21 47 52 / 0%), rgb(21 47 52 / 85%) 70%, var(--dunkel));
}
.stadtseite-c .sc-publikum__text {
  position: relative;
  z-index: 1;
  margin-top: -44px;
  padding: 0 var(--rand) 36px;
}
.stadtseite-c .sc-publikum .sc-kopf { max-width: 760px; margin: 0 auto; }
.stadtseite-c .sc-publikum .sc-titel { font-size: 36px; text-shadow: 0 2px 18px rgb(21 47 52 / 70%); }

/* Helles Band, oben schräge Kante, Goldlinie links (Stadtseiten: „Comedy-Abend in …“) */
.stadtseite-c .sc-hell {
  margin-top: 8px;
  padding: calc(36px + var(--sc-schraege)) var(--rand) 40px;
  background: var(--sc-hell);
  color: var(--sc-auf-hell);
  clip-path: polygon(0 0, 100% var(--sc-schraege), 100% 100%, 0 100%);
}
.stadtseite-c .sc-hell__liste {
  display: grid;
  gap: 30px;
  max-width: 760px;
  margin: 0 auto;
}
.stadtseite-c .sc-hell__teil { padding-left: 16px; border-left: 3px solid var(--gold); }
.stadtseite-c .sc-hell .sc-kopf { margin-bottom: 8px; }
.stadtseite-c .sc-hell .sc-dach { color: var(--sc-dach-hell); }
.stadtseite-c .sc-hell .sc-titel { font-size: 26px; color: var(--sc-auf-hell); }
.stadtseite-c .sc-hell p { margin: 0; color: var(--sc-auf-hell); }

/* Bewerbung: Karte mit Goldrand und Punktmuster, ein Umriss-Knopf */
.stadtseite-c .sc-bewerbung { padding: 40px var(--rand) 0; }
.stadtseite-c .sc-bewerbung__kasten {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px;
  border: 1.5px solid var(--gold-text);
  border-radius: var(--rundung);
  background: var(--sc-muster) 0 0 / 18px 18px, var(--flaeche-karte);
}
.stadtseite-c .sc-bewerbung__kasten .sc-kopf { margin-bottom: 8px; }
.stadtseite-c .sc-bewerbung__kasten > p { margin: 0 0 18px; color: var(--text); }

/* Fuß: unten Platz für die Browserleiste / Home-Anzeige */
.stadtseite-c .fuss { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }

/* Tablet und Desktop */
@media (min-width: 600px) {
  .stadtseite-c .sc-titel { font-size: 40px; }
  .stadtseite-c .sc-publikum .sc-titel { font-size: 44px; }
  .stadtseite-c .sc-hell .sc-titel { font-size: 28px; }
  .stadtseite-c .sc-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .stadtseite-c .sc-schritt:nth-child(2) { padding-top: 2px; border-top: 0; }
  .stadtseite-c .sc-publikum__foto { aspect-ratio: auto; height: clamp(320px, 48vw, 560px); }
  .stadtseite-c .sc-publikum__text { margin-top: -64px; }
  .stadtseite-c .sc-bewerbung__kasten { padding: 32px; }
}
/* Ab 1040px: alles bleibt in der Lesespalte (760px),
   damit die linke Kante beim Scrollen nicht springt; nur die Kante wird
   steiler. */
@media (min-width: 1040px) {
  .stadtseite-c { --sc-schraege: 40px; }
}


/* --- Teil 2: nur Stadtseiten --- */

/* Schutzblock: nur Hintergrund und Abstand des äußeren Elements */
.stadtseite-c .sc-schutz { padding: 4px 0 32px; background: var(--flaeche-karte); }

/* „Nächste Show“ als hervorgehobene Karte (Inhalt stadt_naechste_html()
   unverändert; Nebenzeile in voller Textfarbe statt gedämpft) */
.stadtseite-c .sc-naechste { padding-top: 28px; }
.stadtseite-c .sc-karte {
  padding: 16px;
  border: 1.5px solid var(--gold-text);
  border-radius: var(--rundung);
  background: var(--sc-muster) 0 0 / 18px 18px, var(--dunkel);
}
.stadtseite-c .sc-karte .sn__info,
.stadtseite-c .sc-karte > .leise { color: var(--text); }
.stadtseite-c .sc-karte > .leise { margin: 0; }
.stadtseite-c .sc-karte .sn__hinweis { font-size: 15px; color: var(--text); }

/* Fragen: dunkle Fläche, Zeilen über die volle Breite, Plus/Minus rechts
   (Zeichenwechsel ohne Übergang) */
.stadtseite-c .sc-fragen-abschnitt { background: var(--dunkel); }
.stadtseite-c .sc-fragen {
  margin: 0 calc(-1 * var(--rand));
  border-top: 1px solid var(--linie);
}
.stadtseite-c .sc-frage { border-bottom: 1px solid var(--linie); }
.stadtseite-c .sc-frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px var(--rand);
  font-family: var(--schrift-titel);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--uebergang);
}
.stadtseite-c .sc-frage > summary::-webkit-details-marker { display: none; }
.stadtseite-c .sc-frage > summary:hover { background: rgb(236 238 233 / 6%); }
.stadtseite-c .sc-frage > summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  background:
    linear-gradient(var(--gold-text), var(--gold-text)) center / 12px 2px no-repeat,
    linear-gradient(var(--gold-text), var(--gold-text)) center / 2px 12px no-repeat;
}
.stadtseite-c .sc-frage[open] > summary::after {
  background: linear-gradient(var(--gold-text), var(--gold-text)) center / 12px 2px no-repeat;
}
.stadtseite-c .sc-frage > p {
  max-width: 62ch;
  margin: 0;
  padding: 0 var(--rand) 20px;
  color: var(--text);
}

@media (min-width: 600px) {
  .stadtseite-c .sc-fragen { margin-inline: 0; }
  .stadtseite-c .sc-frage > summary,
  .stadtseite-c .sc-frage > p { padding-inline: 4px; }
}

/* Überschrift „Ablauf des Slams“ im Schutzblock wie die übrigen
   Abschnittstitel (h2.sc-titel), ohne Dachzeile; nur CSS, Markup und Inhalt
   des Schutzblocks unverändert (Nutzerentscheidung 25.10.2026). */
.stadtseite-c .sc-schutz > .block > .block__titel {
  margin: 0 0 18px;
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  text-wrap: balance;
}
@media (min-width: 600px) {
  .stadtseite-c .sc-schutz > .block > .block__titel { font-size: 40px; }
}


/* ===== UNTERSEITEN ENTWURF C (2026-10-24) — Gestaltung c, übernommen 25.10.2026 ===== */
/* Alle übrigen öffentlichen Seiten (Runde 3): /termine/, /regeln/,
   /bewerbung/, /showablauf/, die 20 Terminseiten und, nur gestalterisch,
   Impressum, Datenschutz, AGB. Gemeinsame Klasse am <body>: seite-c; alle
   Selektoren beginnen mit .seite-c, nichts wirkt auf Start- oder
   Stadtseiten. Markup: termine_c_inhalt_html() und termin_c_main_html() in
   werkzeuge/seiten-erzeugen.py (geschrieben von erzeuge_termineseite_c()
   und erzeuge_terminseiten_c()), /regeln/, /bewerbung/, /showablauf/ von
   Hand. Die Open-Air-Terminseiten tragen weiter nur „profil“ und sind nicht
   betroffen. Keine Bewegung; Farbübergänge nur über
   --uebergang (180 ms).
   SCHUTZBLÖCKE (Line-up, „Dein Abend“, JSON-LD) und übernommene Teile
   (Fotokopf, Open-Air-Ablauf): unverändert; hier nur Hintergrund und
   Abstand der äußeren Rahmen .sc-schutz, keine Regel für Elemente darin,
   außer den Überschriften „Line-up“ und „Dein Abend“ (am Ende dieses
   Abschnitts, nur CSS, Markup unverändert; 25.10.2026).
   Übernommen 1:1 (25.10.2026); Zusammenfassen und tote Regeln entfernen
   erst nach dem 30.10.
   Teil 1 und 2: die sc-Bausteine EINMAL für .seite-c, gleiche Werte wie
   Runde 1/2 (erzeugt mit pruefung/entwurf-c-2026-10-23/runde3/
   css-bausteine-kopieren.py). Teil 3: nur Unterseiten. */

/* --- Teil 1: Bausteine aus Runde 1 und 2 für .seite-c (gleiche Werte) --- */
.seite-c {
  --sc-hell: #ECEEE9;
  --sc-auf-hell: #152F34;
  --sc-dach-hell: #094B59;
  --sc-schraege: 28px;
  --sc-muster: radial-gradient(rgb(236 238 233 / 7%) 1px, transparent 1.6px);
}

/* Abschnitte, Kopf mit Dachzeile und kurzer großer h2 */
.seite-c .sc-abschnitt { padding: 36px var(--rand) 40px; }
.seite-c .sc-innen { max-width: 760px; margin-inline: auto; }
.seite-c .sc-kopf { margin: 0 0 18px; }
.seite-c .sc-dach {
  margin: 0 0 6px;
  font: 700 13px/1.3 var(--schrift-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.seite-c .sc-titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  text-wrap: balance;
}
.seite-c .sc-knopfzeile { margin: 20px 0 0; }

/* Ablauf: dunkle Fläche mit Punktmuster, oben schräge Kante */
.seite-c .sc-ablauf {
  padding-top: calc(36px + var(--sc-schraege));
  background: var(--sc-muster) 0 0 / 18px 18px, var(--dunkel);
  clip-path: polygon(0 var(--sc-schraege), 100% 0, 100% 100%, 0 100%);
}
.seite-c .sc-schritte {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seite-c .sc-schritt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--linie);
}
.seite-c .sc-schritt:first-child { padding-top: 2px; border-top: 0; }
.seite-c .sc-schritt__nr {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--gold-text);
}
.seite-c .sc-schritt__titel {
  margin: 0 0 4px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.seite-c .sc-schritt p { margin: 0; color: var(--text); }

/* Publikumsfoto als Bildband über die volle Breite; fester Platz (3:2) und
   dunkle Fläche, solange das Bild lädt */
.seite-c .sc-publikum { position: relative; background: var(--dunkel); }
.seite-c .sc-publikum__foto {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--dunkel);
}
.seite-c .sc-publikum__foto picture,
.seite-c .sc-publikum__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.seite-c .sc-publikum__foto::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, rgb(21 47 52 / 0%), rgb(21 47 52 / 85%) 70%, var(--dunkel));
}
.seite-c .sc-publikum__text {
  position: relative;
  z-index: 1;
  margin-top: -44px;
  padding: 0 var(--rand) 36px;
}
.seite-c .sc-publikum .sc-kopf { max-width: 760px; margin: 0 auto; }
.seite-c .sc-publikum .sc-titel { font-size: 36px; text-shadow: 0 2px 18px rgb(21 47 52 / 70%); }

/* Städte: aktive Städte als Fotozeilen über die volle Breite */
.seite-c .sc-staedte {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seite-c .sc-stadt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 132px;
  overflow: hidden;
  border-radius: var(--rundung);
  background: var(--dunkel);
  color: var(--text);
  text-decoration: none;
}
.seite-c .sc-stadt__foto { position: absolute; inset: 0; }
.seite-c .sc-stadt__foto picture,
.seite-c .sc-stadt__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: filter var(--uebergang);
}
.seite-c .sc-stadt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(21 47 52 / 94%) 0%, rgb(21 47 52 / 70%) 50%, rgb(21 47 52 / 15%) 100%);
}
.seite-c .sc-stadt:hover .sc-stadt__bild { filter: brightness(1.1); }
.seite-c .sc-stadt__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 12px 16px 18px;
}
.seite-c .sc-stadt__name {
  font-family: var(--schrift-titel);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}
.seite-c .sc-stadt__unter { font-size: 15px; font-weight: 700; line-height: 1.3; }
.seite-c .sc-stadt__pfeil {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 14px;
  border-radius: 50%;
  background: rgb(21 47 52 / 60%);
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  color: var(--text);
}
/* angekündigte Städte: eine kompakte Zeile statt großer Kacheln */
.seite-c .sc-bald {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  margin: 12px 0 0;
  padding: 4px 16px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rundung);
  font-weight: 700;
}
.seite-c .sc-bald a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* Helles Band, oben schräge Kante, Goldlinie links */
.seite-c .sc-hell {
  margin-top: 8px;
  padding: calc(36px + var(--sc-schraege)) var(--rand) 40px;
  background: var(--sc-hell);
  color: var(--sc-auf-hell);
  clip-path: polygon(0 0, 100% var(--sc-schraege), 100% 100%, 0 100%);
}
.seite-c .sc-hell__liste {
  display: grid;
  gap: 30px;
  max-width: 760px;
  margin: 0 auto;
}
.seite-c .sc-hell__teil { padding-left: 16px; border-left: 3px solid var(--gold); }
.seite-c .sc-hell .sc-kopf { margin-bottom: 8px; }
.seite-c .sc-hell .sc-dach { color: var(--sc-dach-hell); }
.seite-c .sc-hell .sc-titel { font-size: 26px; color: var(--sc-auf-hell); }
.seite-c .sc-hell p { margin: 0; color: var(--sc-auf-hell); }

/* Bewerbung: Karte mit Goldrand und Punktmuster, ein Umriss-Knopf */
.seite-c .sc-bewerbung { padding: 40px var(--rand) 0; }
.seite-c .sc-bewerbung__kasten {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px;
  border: 1.5px solid var(--gold-text);
  border-radius: var(--rundung);
  background: var(--sc-muster) 0 0 / 18px 18px, var(--flaeche-karte);
}
.seite-c .sc-bewerbung__kasten .sc-kopf { margin-bottom: 8px; }
.seite-c .sc-bewerbung__kasten > p { margin: 0 0 18px; color: var(--text); }

/* Fuß: unten Platz für die Browserleiste / Home-Anzeige */
.seite-c .fuss { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }

/* Tablet und Desktop */
@media (min-width: 600px) {
  .seite-c .sc-titel { font-size: 40px; }
  .seite-c .sc-publikum .sc-titel { font-size: 44px; }
  .seite-c .sc-hell .sc-titel { font-size: 28px; }
  .seite-c .sc-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .seite-c .sc-schritt:nth-child(2) { padding-top: 2px; border-top: 0; }
  .seite-c .sc-publikum__foto { aspect-ratio: auto; height: clamp(320px, 48vw, 560px); }
  .seite-c .sc-publikum__text { margin-top: -64px; }
  .seite-c .sc-staedte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .seite-c .sc-stadt { align-items: flex-end; min-height: 220px; }
  .seite-c .sc-stadt::after {
    background: linear-gradient(to bottom, rgb(21 47 52 / 0%) 30%, rgb(21 47 52 / 75%) 62%, rgb(21 47 52 / 96%));
  }
  .seite-c .sc-stadt__text { padding: 14px; }
  .seite-c .sc-stadt__name { font-size: 28px; }
  .seite-c .sc-stadt__pfeil { position: absolute; top: 12px; right: 12px; margin: 0; }
  .seite-c .sc-bewerbung__kasten { padding: 32px; }
}
/* Ab 1040px: alles bleibt in der Lesespalte (760px),
   damit die linke Kante beim Scrollen nicht springt; nur die Kante wird
   steiler. */
@media (min-width: 1040px) {
  .seite-c { --sc-schraege: 40px; }
}

/* --- Teil 2: Bausteine aus Runde 2 (Schutzrahmen, Karte, Fragen-Zeilen) für .seite-c --- */

/* Schutzblock: nur Hintergrund und Abstand des äußeren Elements */
.seite-c .sc-schutz { padding: 4px 0 32px; background: var(--flaeche-karte); }

/* „Nächste Show“ als hervorgehobene Karte (Inhalt stadt_naechste_html()
   unverändert; Nebenzeile in voller Textfarbe statt gedämpft) */
.seite-c .sc-naechste { padding-top: 28px; }
.seite-c .sc-karte {
  padding: 16px;
  border: 1.5px solid var(--gold-text);
  border-radius: var(--rundung);
  background: var(--sc-muster) 0 0 / 18px 18px, var(--dunkel);
}
.seite-c .sc-karte .sn__info,
.seite-c .sc-karte > .leise { color: var(--text); }
.seite-c .sc-karte > .leise { margin: 0; }
.seite-c .sc-karte .sn__hinweis { font-size: 15px; color: var(--text); }

/* Fragen: dunkle Fläche, Zeilen über die volle Breite, Plus/Minus rechts
   (Zeichenwechsel ohne Übergang) */
.seite-c .sc-fragen-abschnitt { background: var(--dunkel); }
.seite-c .sc-fragen {
  margin: 0 calc(-1 * var(--rand));
  border-top: 1px solid var(--linie);
}
.seite-c .sc-frage { border-bottom: 1px solid var(--linie); }
.seite-c .sc-frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px var(--rand);
  font-family: var(--schrift-titel);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--uebergang);
}
.seite-c .sc-frage > summary::-webkit-details-marker { display: none; }
.seite-c .sc-frage > summary:hover { background: rgb(236 238 233 / 6%); }
.seite-c .sc-frage > summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  background:
    linear-gradient(var(--gold-text), var(--gold-text)) center / 12px 2px no-repeat,
    linear-gradient(var(--gold-text), var(--gold-text)) center / 2px 12px no-repeat;
}
.seite-c .sc-frage[open] > summary::after {
  background: linear-gradient(var(--gold-text), var(--gold-text)) center / 12px 2px no-repeat;
}
.seite-c .sc-frage > p {
  max-width: 62ch;
  margin: 0;
  padding: 0 var(--rand) 20px;
  color: var(--text);
}

@media (min-width: 600px) {
  .seite-c .sc-fragen { margin-inline: 0; }
  .seite-c .sc-frage > summary,
  .seite-c .sc-frage > p { padding-inline: 4px; }
}


/* --- Teil 3: nur Unterseiten --- */

/* Flächen für den Rhythmus beim Scrollen */
.seite-c .sc-band--karte { background: var(--flaeche-karte); }
.seite-c .sc-band--dunkel { background: var(--dunkel); }
/* Rahmen um „Dein Abend“ (Terminseiten): Petrol mit Punktraster, damit er
   sich vom Line-up-Rahmen (#11454F) abhebt; nur Hintergrund des Rahmens */
.seite-c .sc-schutz--abend { background: var(--sc-muster) 0 0 / 18px 18px, var(--grund); }

/* Helles Band: Fokus und Links in der dunklen Schrift */
.seite-c .sc-hell :focus-visible { outline-color: var(--sc-auf-hell); }
.seite-c .sc-hell .mehrlink a { color: var(--sc-auf-hell); }
.seite-c .sc-hell p + p { margin-top: 10px; }

/* Aufklapper als Zeilen (Fragen-Baustein): Überschrift im summary,
   Inhalt in der Zeile eingerückt */
.seite-c .sc-frage__titel { margin: 0; font: inherit; }
.seite-c .sc-frage__inhalt { padding: 0 var(--rand) 20px; }
.seite-c .sc-frage__inhalt > :last-child { margin-bottom: 0; }
.seite-c .sc-frage__inhalt p { max-width: 62ch; }

/* /termine/: Monatsgruppen klar getrennt (Monat groß, Goldlinie bis zum
   Rand), Abstand zwischen den Gruppen */
.seite-c .monat + .monat { margin-top: 30px; }
.seite-c .monat__titel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 12px;
  font-size: 26px;
}
.seite-c .monat__titel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kopf-linie);
}

/* /bewerbung/: Preisgeld als große Goldzeile; „Wichtig“ als Karte */
.seite-c .bw-preisgeld { font-size: 28px; color: var(--gold-text); }
.seite-c .sc-karte .sc-kopf { margin-bottom: 10px; }
.seite-c .sc-karte .bw-liste { margin-bottom: 0; }
.seite-c .sc-karte + .bw-knopfzeile { margin-top: 20px; }

/* /showablauf/: Hinweis-Karte und die vier Phasen mit Ziffer (Zähler aus
   CSS, kein zusätzlicher Text im Markup) */
.seite-c .sc-hinweis {
  margin: 24px var(--rand) 0;
  padding: 14px 16px;
  border: 1.5px solid var(--gold-text);
  border-radius: var(--rundung);
  background: var(--dunkel);
  font-size: 15px;
}
.seite-c .sc-hinweis p { margin: 0; }
.seite-c .sc-hinweis a { font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.seite-c .sc-phasen {
  counter-reset: phase;
  display: grid;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.seite-c .sc-phase {
  counter-increment: phase;
  position: relative;
  padding: 18px 0 8px 64px;
  border-top: 1px solid var(--linie);
}
.seite-c .sc-phase::before {
  content: counter(phase);
  position: absolute;
  top: 16px;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  font-family: var(--schrift-titel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--gold-text);
}
.seite-c .sc-phase__titel {
  margin: 10px 0 12px;
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.seite-c .sc-phase .bw-wichtig { margin: 14px 0; }
/* Aufzählungszeichen wie vor dem Umbau (Punkt, darunter Kreis), obwohl die
   Listen jetzt in der nummerierten Liste stehen */
.seite-c .sc-phase .bw-liste { list-style-type: disc; }
.seite-c .sc-phase .bw-liste .bw-liste { list-style-type: circle; }

/* Rechtstexte (Impressum, Datenschutz, AGB): Wortlaut und Markup
   unverändert, nur Lesespalte und Zwischenköpfe statt kleiner grauer
   Versalien */
.seite-c .rechtstext { line-height: 1.6; }
.seite-c .rechtstext p,
.seite-c .rechtstext li { max-width: 68ch; }
.seite-c .rechtstext h2 {
  margin: 34px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-size: 22px;
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
  color: var(--text);
}
.seite-c .rechtstext a { text-decoration-color: var(--gold-text); }

/* Links im Fließtext (Hinweis /showablauf/, Phasen, Rechtstexte): größere
   Trefferfläche nach oben und unten, ohne das Zeilenbild zu verändern */
.seite-c .sc-hinweis a,
.seite-c .sc-phase a,
.seite-c .rechtstext a { padding-block: 12px; }

@media (min-width: 600px) {
  .seite-c .sc-frage__inhalt { padding-inline: 4px; }
  .seite-c .sc-hinweis { max-width: 760px; margin-inline: auto; }
  .seite-c .monat__titel { font-size: 30px; }
}

/* Überschriften „Line-up“ und „Dein Abend“ in den Schutzrahmen der
   Terminseiten wie die übrigen Abschnittstitel (h2.sc-titel), ohne
   Dachzeile; nur CSS, Markup und Inhalt der Schutzblöcke unverändert
   (Nutzerentscheidung 25.10.2026, wie „Ablauf des Slams“ auf Stadtseiten). */
.seite-c .sc-schutz > .block > .block__titel {
  margin: 0 0 18px;
  font-family: var(--schrift-titel);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  text-wrap: balance;
}
@media (min-width: 600px) {
  .seite-c .sc-schutz > .block > .block__titel { font-size: 40px; }
}


/* ===== STAEDTE-KACHELN KORREKTUR (2026-10-24) — Gestaltung c, übernommen 25.10.2026; a0-Form, 25.10.2026 ===== */
/* Wirksam ist vorerst nur .startseite-c; die Body-Klassen .stadtseite-c und
   .seite-c („Andere Städte“) gibt es im Original noch nicht, die Regeln
   gelten für sie aber schon mit.
   a0-Form (25.10.2026): Geometrie wie die bis 25.10. live laufenden
   a0-Kacheln (.kachel, globale Regeln bleiben unverändert): zwei
   nebeneinander, Handy 4:5, ab 600px 220px hoch, ab 1040px drei Spalten
   (nur bei mindestens drei Städten) 260px hoch, Abstand 12px. Aus
   Gestaltung c bleiben dunkle Fläche mit Punktraster und schräger Kante,
   Name in Source Sans 3 900 Versalien (Größe nach Kachelbreite), Pfeil und
   „Nächste Show …“ in Gold. Textblock schlank wie a0 (12px seitlich, 10px
   unten), Verlauf erst ab 30 % der Höhe, damit kein Kopf verdeckt wird.
   „Bald auch in …“ ist das letzte <li> der Liste (.sc-staedte__bald):
   bei ungerader Zahl Städte in zwei Spalten eine Zelle rechts neben der
   letzten Stadt, sonst über die volle Breite unter den Kacheln.
   Die Stadt wird über den Link der Kachel erkannt (a.sc-stadt[href$=
   "<stadt>/"], Startseite "leipzig/", Stadtseiten "../leipzig/"). Gilt nur
   innerhalb von .sc-staedte-abschnitt. Keine Bewegung: nur der bisherige
   Helligkeits-Übergang des Fotos (--uebergang, 180 ms).
   Herkunft: Runde 4b/4c (24.10.2026) Fotozeilen 132px; durch die a0-Form
   ersetzt (Stufe ab 640px und die 4d-Regel für .stadtseite-c entfallen). */

/* Eigene Fläche: Dunkel mit Punktraster, oben schräge Kante */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt {
  padding-top: calc(36px + var(--sc-schraege));
  background: var(--sc-muster) 0 0 / 18px 18px, var(--dunkel);
  clip-path: polygon(0 var(--sc-schraege), 100% 0, 100% 100%, 0 100%);
}

/* Raster: zwei Spalten wie a0 */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kachel: Handy 4:5 wie a0. --kachel-h ist die Kachelhöhe für die
   Ausschnitt-Formel (100cqi = Kachelbreite). Name unten links, Pfeil oben
   rechts. */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt {
  --kachel-h: calc(100cqi * 1.25);
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--rundung);
  background: var(--flaeche-karte);
  color: var(--text);
  text-decoration: none;
  container-type: inline-size;
}
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__foto { position: absolute; inset: 0; }
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__foto picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Verlauf wie a0: erst ab 30 % der Höhe, oben bleibt das Foto frei */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt::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%));
}
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 12px 10px;
  background: none;
}
/* Name: wie Logo und Faktenzeile — Source Sans 3 900, Versalien, leicht eng.
   Größe so, dass MAGDEBURG (5,66 Schriftgrößen) zwischen die Innenabstände
   (2 × 12px) passt, höchstens 38px: Handy 390px (Kachel 173px) 26px, ab
   etwa 240px Kachelbreite 38px. */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__name {
  font-family: var(--schrift-text);
  font-size: min(38px, calc((100cqi - 24px) * 0.175));
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 2px 14px rgb(21 47 52 / 60%);
}
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__unter {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold-text);
  text-shadow: 0 1px 10px rgb(21 47 52 / 70%);
}
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__pfeil {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: rgb(21 47 52 / 60%);
  box-shadow: inset 0 0 0 1.5px var(--gold-text);
  color: var(--text);
}

/* Ausschnitt: Kopfmitte bei 35 % der Kachelhöhe, für jede Kachelgröße.
   Füllt das Foto die Breite (100cqi = Kachelbreite), ist es --bild-v ×
   100cqi hoch; der Kopf liegt bei --kopf-y seiner Höhe (aus dem Foto
   gemessen). Verschoben wird höchstens so weit, dass oben und unten keine
   Lücke entsteht (clamp; min() fängt Kacheln ab, in denen das Foto die Höhe
   füllt und nichts zu verschieben ist, z. B. Leipzig im 4:5-Format). */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% clamp(
    min(0px, calc(var(--kachel-h) - var(--bild-v) * 100cqi)),
    calc(var(--kachel-h) * 0.35 - var(--kopf-y) * var(--bild-v) * 100cqi),
    0px
  );
  transition: filter var(--uebergang);
}
/* Leipzig: buehne-hoch-14-torbogen-cap-faust, 1365×1352, Kopf bei 16 % */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt a.sc-stadt[href$="leipzig/"] { --bild-v: 0.9905; --kopf-y: 0.16; }
/* Magdeburg: Ziegel, 1365×2048, Kopf bei 45 % */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt a.sc-stadt[href$="magdeburg/"] { --bild-v: 1.5004; --kopf-y: 0.45; }
/* Chemnitz: Gegenlicht, 1365×2048, Kopf bei 41 % */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt a.sc-stadt[href$="chemnitz/"] { --bild-v: 1.5004; --kopf-y: 0.41; }

/* „Bald auch in …“ als letztes Feld der Liste: Grundfall volle Breite unter
   den Kacheln in normaler Zeilenhöhe; Stil der bisherigen Bald-Zeile
   (gestrichelter Rahmen, Links unterstrichen, mindestens 44px hoch) */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte__bald {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border: 1px dashed var(--kopf-linie);
  border-radius: var(--rundung);
  background: rgb(236 238 233 / 4%);
  font-weight: 700;
  text-align: center;
}
/* Zwei Spalten, ungerade Zahl Städte: das Feld ist dann ein gerades Kind
   und füllt die Zelle rechts neben der letzten Stadt, gleich hoch wie die
   Kacheln (Rasterzeile streckt es) */
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte__bald:nth-child(even) {
  grid-column: auto;
}
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte__bald-text { margin: 0; }
:is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte__bald a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  vertical-align: middle;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

@media (min-width: 600px) {
  /* 220px hoch wie a0 ab 600px; weiter zwei Spalten */
  :is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt {
    --kachel-h: 220px;
    aspect-ratio: auto;
    height: 220px;
  }
}

@media (min-width: 1040px) {
  /* drei Spalten, 260px hoch wie a0 ab 1040px — nur bei mindestens drei
     Städten (Startseite; künftig Dresden und Halle); zwei Städte (künftig
     Leipzig, Magdeburg, Chemnitz) bleiben nebeneinander in zwei Spalten */
  :is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-stadt {
    --kachel-h: 260px;
    height: 260px;
  }
  :is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte:has(> li:nth-child(3):not(.sc-staedte__bald)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* bei drei Spalten das Bald-Feld immer über die volle Breite */
  :is(.startseite-c, .stadtseite-c, .seite-c) .sc-staedte-abschnitt .sc-staedte:has(> li:nth-child(3):not(.sc-staedte__bald)) > .sc-staedte__bald {
    grid-column: 1 / -1;
  }
}

/* ===== KOPF INSTAGRAM, 25.10.2026 ===== */
/* Instagram-Knopf in der Kopfzeile aller Seiten, direkt rechts neben dem
   Logo (kopf_instagram_html() in werkzeuge/seiten-erzeugen.py). Unter 1040px
   nur das Symbol (44 × 44, rund), ab 1040px Symbol + „Instagram“. Symbol in
   --text, weiße Kontur 55 % (--kontur), Hover 10 % weiß, kein Gold (Gold
   bleibt dem Ticketweg). Der Auto-Rand wandert vom Logo auf den Knopf, damit
   der Knopf am Logo steht und der Rest rechts bleibt.
   Startseite unter 1040px, solange die Kopfzeile ausgeblendet ist:
   Glasknopf oben links wie der runde Menüknopf; nach dem Einblenden rechts
   neben dem Logo (Sprung ohne Animation). Ohne JavaScript: noscript-Stil
   aus kopf_html().
   Platz (Variante D, bericht-lesen-instagram-kopf-2026-10-25-1649.md):
   unter 400px Abstand 6px statt 8px, bei 600–699px Kopfknopf nur „Tickets“. */
.kopf__marke { margin-right: 0; }
.kopf__instagram {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--kontur);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--uebergang), box-shadow var(--uebergang);
}
.kopf__instagram:hover { background: rgb(236 238 233 / 10%); }
.kopf__instagram svg { display: block; width: 20px; height: 20px; fill: currentColor; }
/* Text unter 1040px nur vorgelesen (wie .nur-sr): „Comedy Slam Deluxe auf
   Instagram“; „ folgen“ erst ab 1040px */
.kopf__instagram-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kopf__instagram-folgen { display: none; }

@media (max-width: 399.98px) {
  .kopf { gap: 6px; }
}
@media (min-width: 600px) and (max-width: 699.98px) {
  .kopf__zusatz { display: none; }
}

@media (max-width: 1039.98px) {
  /* Startseite vor dem Einblenden: Knopf aus dem Fluss an den linken
     Innenrand (statische Lage, senkrecht mittig), das unsichtbare Logo
     hält mit dem Auto-Rand Kopfknopf und Menüknopf rechts */
  .kopf--start:not(.ist-sichtbar) .kopf__marke { margin-right: auto; }
  .kopf--start:not(.ist-sichtbar) .kopf__instagram {
    position: absolute;
    pointer-events: auto;
    box-shadow: inset 0 0 0 1px var(--linie-stark);
    background: rgb(21 47 52 / 72%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@media (min-width: 1040px) {
  /* Symbol + „Instagram“ als Umriss-Knopf (6px wie die übrigen Knöpfe);
     die Leiste behält margin-left: auto */
  .kopf__instagram {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin-right: 0;
    padding: 0 16px;
    border-radius: var(--rundung-knopf);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .kopf__instagram-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .kopf__instagram-folgen {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ===== INSTAGRAM-FLÄCHE, 25.10.2026 ===== */
/* Instagram-Fläche der Startseite (nach „Städte“) und der Stadt- und
   Bald-Seiten (nach dem Schutzblock „Ablauf des Slams“), Markup aus
   instagram_flaeche_html() in werkzeuge/seiten-erzeugen.py. Karte wie der
   Bewerbungs-Kasten (Punktraster auf --flaeche-karte, Kopf mit Dachzeile
   und h2), aber weiße Kontur 55 % (--kontur) statt Gold; Knopf mit
   Symbol + Text im Instagram-Verlauf (siehe unten), kein Gold. Am Handy
   volle Breite der Lesespalte, ab 600px
   natürliche Breite. Abschnitt auf Petrol (--grund) zwischen zwei dunklen
   Flächen. Kontraste: Text auf der Karte 9,04:1, Kontur 3,91:1. */
:is(.startseite-c, .stadtseite-c) .sc-instagram { padding: 40px var(--rand); }
:is(.startseite-c, .stadtseite-c) .sc-instagram__karte {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px;
  border: 1.5px solid var(--kontur);
  border-radius: var(--rundung);
  background: var(--sc-muster) 0 0 / 18px 18px, var(--flaeche-karte);
}
:is(.startseite-c, .stadtseite-c) .sc-instagram__karte .sc-kopf { margin-bottom: 8px; }
:is(.startseite-c, .stadtseite-c) .sc-instagram__karte > p { margin: 0 0 18px; color: var(--text); }
/* Knopf (25.10.2026, nachgeschärft): Füllung im Instagram-Verlauf nur aus
   Lila → Magenta → Pink, schräg 45°, Schrift und Symbol weiß 19px/700,
   mindestens 56px hoch, ohne Kontur, 6px-Ecken aus .sknopf. Magenta und Pink
   gegenüber #C13584/#E1306C bei gleichem Farbton abgedunkelt, damit Weiß
   auf jeder Verlaufsfarbe auch im Hover (brightness 1.08) mindestens 4,5:1
   erreicht (knappster Wert 4,63:1). Fokusring wie überall (--fokus). */
:is(.startseite-c, .stadtseite-c) .sc-instagram__knopf {
  display: flex;
  width: 100%;
  min-height: 56px;
  background: linear-gradient(45deg, #833AB4 0%, #BD3481 50%, #CF1E5A 100%);
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 700;
  box-shadow: none;
  transition: filter var(--uebergang);
}
:is(.startseite-c, .stadtseite-c) .sc-instagram__knopf:hover { filter: brightness(1.08); }
:is(.startseite-c, .stadtseite-c) .sc-instagram__knopf:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}
:is(.startseite-c, .stadtseite-c) .sc-instagram__knopf svg { flex: none; width: 22px; height: 22px; fill: currentColor; }

@media (min-width: 600px) {
  :is(.startseite-c, .stadtseite-c) .sc-instagram__karte { padding: 28px 32px; }
  :is(.startseite-c, .stadtseite-c) .sc-instagram__knopf { display: inline-flex; width: auto; }
}