/* ==========================================================================
   StadtComedyClub
   Formsprache: der Scheinwerferkegel von der Bühne, der Kasten aus dem Logo.
   Orange und Blau setzen Akzente, der Grund bleibt hell.

   Farben und Schrift stehen in :root. Grundton und Orange stammen aus dem
   Clubinio-Shop (designBackgroundColor / designAccentColor), das Blau ist
   das Marineblau des Logos.
   ========================================================================== */

/* Figtree, selbst gehostet. Variabler Schnitt 400–800, zwei Zeichensätze.
   Selbst gehostet, damit beim Seitenaufruf keine Verbindung zu Google
   entsteht — das erspart der Datenschutzerklärung einen Absatz und dem
   Besucher eine Einwilligung. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper:    #F2F3F6;
  --white:    #FFFFFF;
  --navy:     #21356A;
  --navy-d:   #16234A;
  --navy-t:   rgba(33, 53, 106, .08);
  --orange:   #FC9F28;
  --orange-d: #B96A04;
  --orange-t: rgba(252, 159, 40, .14);
  --ink:      #111827;
  --grey:     #5A6270;
  --line:     #DEE1E7;

  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rund:   18px;   /* Bilder, Karten */
  --rund-s: 12px;   /* Felder, kleine Flächen */

  --gut:  clamp(1.25rem, 5vw, 5rem);
  --bar:  72px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: var(--bar); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, .3vw + .94rem, 1.07rem);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 1; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.018em; line-height: 1.08; }

/* Knöpfe: solide Flächen, keine Umrandung, kein Versatz -------------------- */

.knopf {
  display: inline-flex; align-items: center;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none;
  padding: .8em 1.65em;
  border-radius: 999px;
  background: var(--orange);
  color: #1A1204;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background .16s ease;
}
.knopf:hover { background: #EE8F0F; }

.knopf--leer {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(33, 53, 106, .32);
}
.knopf--leer:hover { background: var(--navy-t); }

.knopf--klein { padding: .58em 1.3em; font-size: .93rem; }

/* Kopfleiste -------------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.kopf__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kopf__logo { display: flex; }
.kopf__logo img { height: 46px; width: auto; }
.kopf nav { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); align-items: center; }
.kopf nav a { font-weight: 600; font-size: .96rem; text-decoration: none; color: var(--ink); }
.kopf nav a:not(.knopf):hover { color: var(--orange-d); }

@media (max-width: 760px) { .kopf nav a:not(.knopf) { display: none; } }

/* ------------------------------------------------------------------------ */
/* Bühne: Schrift über die volle Breite, darunter das Laufband mit den       */
/* Namen — die sind das Zugpferd — und ein randloses Bilderband.             */
/* ------------------------------------------------------------------------ */

.buehne {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  background: var(--white);
}

/* Warmer Kegel von links */
.buehne::before {
  content: '';
  position: absolute; z-index: 0;
  top: -30vh; left: -4%;
  width: 78vw; height: 170vh;
  background: linear-gradient(176deg, rgba(252,159,40,.44) 0%, rgba(252,159,40,.13) 42%, rgba(252,159,40,0) 74%);
  clip-path: polygon(33% 0%, 43% 0%, 108% 100%, -24% 100%);
  transform: rotate(7deg);
  pointer-events: none;
}
/* Kühler Kegel von rechts */
.buehne::after {
  content: '';
  position: absolute; z-index: 0;
  top: -26vh; right: -12%;
  width: 56vw; height: 155vh;
  background: linear-gradient(184deg, rgba(33,53,106,.24) 0%, rgba(33,53,106,.06) 48%, rgba(33,53,106,0) 76%);
  clip-path: polygon(56% 0%, 68% 0%, 124% 100%, 2% 100%);
  transform: rotate(-9deg);
  pointer-events: none;
}

.buehne h1 {
  font-size: clamp(2.7rem, 8.2vw, 6.4rem);
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: .98;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.buehne h1 em { font-style: normal; color: var(--navy); }

.buehne__unten {
  display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 780px) { .buehne__unten { grid-template-columns: 1fr auto; } }

.buehne__text {
  max-width: 46ch; margin: 0;
  font-size: clamp(1.06rem, .4vw + 1rem, 1.22rem);
  color: #333B4A;
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Laufband: die Namen, die Tickets verkaufen ------------------------------ */

.laufband {
  background: var(--orange);
  color: #241704;
  padding-block: .85rem;
  overflow: hidden;
  border-block: 1px solid rgba(0,0,0,.12);
}
.laufband__spur {
  display: flex; width: max-content;
  animation: wandern 46s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__satz {
  display: flex; align-items: center; flex: none;
  font-size: clamp(1.15rem, 2.4vw, 1.8rem);
  font-weight: 800; letter-spacing: -.028em;
  white-space: nowrap;
}
.laufband__satz span { padding-inline: clamp(1rem, 2vw, 1.75rem); }
.laufband__satz i {
  display: block; flex: none;
  width: .42em; height: .42em; border-radius: 50%;
  background: rgba(36,23,4,.42);
}
@keyframes wandern { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
}

/* Bilderband: randlos über die volle Breite -------------------------------- */

.bilderband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--white);
}
.bilderband img { width: 100%; height: clamp(190px, 26vw, 340px); object-fit: cover; }
.bilderband figure { margin: 0; overflow: hidden; }
.bilderband figure:nth-child(1) img { object-position: center 42%; }
@media (max-width: 720px) {
  .bilderband { grid-template-columns: repeat(2, 1fr); }
  .bilderband figure:nth-child(n+5) { display: none; }
}

/* Band mit der nächsten Show ---------------------------------------------- */

.band { padding: clamp(1.25rem, 2.5vw, 2rem) var(--gut); background: var(--white); }
.band__in {
  max-width: calc(var(--wrap) - 2 * var(--gut)); margin-inline: auto;
  background: var(--navy); color: var(--white);
  border-radius: var(--rund);
  padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 2.4rem);
  display: grid; gap: 1.1rem 2.5rem; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 860px) {
  .band__in { grid-template-columns: auto 1fr auto; }
  /* Mit Ankündigungsbild: Bild, Text, Knopf. */
  .band__in--bild { grid-template-columns: 13rem 1fr auto; gap: 1.1rem 1.9rem; }
}

/* Das Ankündigungsbild der nächsten Show, 16:9 wie im Shopadmin angelegt. */
.band__bild {
  display: block;
  border-radius: calc(var(--rund) - 4px);
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.band__bild img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .3s ease;
}
.band__bild:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .band__bild img { transition: none; }
  .band__bild:hover img { transform: none; }
}

.band__wann {
  margin: 0 0 .35rem; white-space: nowrap;
  font-size: .95rem; font-weight: 500; color: #9FAECD;
}
.band__wann span {
  display: block; margin-top: .1rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 800; letter-spacing: -.028em; color: var(--orange);
}
.band__was { font-size: clamp(1.12rem, 2.3vw, 1.5rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.16; margin: 0; }
.band__wo { margin: .25rem 0 0; font-size: .94rem; color: #B7C2DC; }

/* Countdown bis zum Beginn. Feste Ziffernbreite, damit die Zeile beim
   Herunterzählen nicht jede Sekunde zuckt. */
.band__countdown {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  margin: 1.1rem 0 0;
}
.band__countdown span {
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #9FAECD;
}
.band__countdown b {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.band__laeuft {
  font-size: .95rem !important; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--orange) !important;
}

@media (max-width: 859px) {
  .band__in .knopf { display: flex; justify-content: center; width: 100%; }
}

/* Abschnitte -------------------------------------------------------------- */

.abschnitt { padding-block: clamp(3.5rem, 7.5vw, 6rem); position: relative; overflow: hidden; }
.abschnitt--weiss { background: var(--white); }

/* Sehr dezente Kreisformen als Hintergrundrhythmus */
.abschnitt--kreis::before {
  content: '';
  position: absolute; z-index: 0;
  width: clamp(320px, 42vw, 620px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange-t);
  top: -16%; right: -12%;
  pointer-events: none;
}
.abschnitt--kreis-blau::before { background: var(--navy-t); left: -16%; right: auto; top: auto; bottom: -24%; }

.kopfzeile { margin-bottom: clamp(2rem, 4vw, 3rem); }
.kopfzeile h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.kopfzeile p { margin: .9rem 0 0; color: var(--grey); max-width: 52ch; }

/* Filter nach Stadt ------------------------------------------------------- */

.filter {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: -.75rem 0 2rem;
}
.filter__knopf {
  font: inherit; font-size: .93rem; font-weight: 600; letter-spacing: -.01em;
  padding: .5em 1.15em;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(33, 53, 106, .28);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.filter__knopf:hover { background: var(--navy-t); }
.filter__knopf--aktiv {
  background: var(--navy); color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.filter__knopf--aktiv:hover { background: var(--navy-d); }

/* Spielplan --------------------------------------------------------------- */

.monat {
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--navy);
  display: flex; align-items: center; gap: 1.1rem;
  margin: 2.75rem 0 .35rem;
}
.monat::before { content: ''; width: 22px; height: 3px; background: var(--orange); flex: none; }
.monat::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.monat:first-of-type { margin-top: 0; }

.show {
  display: grid; gap: .45rem 1.6rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .show { grid-template-columns: 5.25rem 1fr auto; align-items: center; gap: 2.25rem; }
  /* Mit Ankündigungsbild kommt eine Spalte dazwischen. */
  .show--bild { grid-template-columns: 5rem 15rem 1fr auto; gap: 1.75rem; }
}

/* Das Ankündigungsbild der Show — 16:9, so wie im Shopadmin angelegt. */
.show__bild {
  display: block; grid-column: 1 / -1;
  border-radius: var(--rund); overflow: hidden;
  background: var(--navy-t);
  order: -1;                 /* auf schmalen Bildschirmen zuoberst */
  margin-bottom: .35rem;
}
.show__bild img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .3s var(--ease, ease);
}
.show__bild:hover img { transform: scale(1.03); }

@media (min-width: 900px) {
  .show__bild { grid-column: auto; order: 0; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .show__bild img { transition: none; }
  .show__bild:hover img { transform: none; }
}

/* Das Datum als Kalenderblatt: Tag groß, darunter Monat und Jahr.
   Mittig, weil die drei Zeilen unterschiedlich breit sind — linksbündig
   steht „29“ neben „2026“ sichtbar schief. */
.show__tag {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  line-height: 1;
}
.show__zahl { font-size: clamp(2.3rem, 4.8vw, 3.05rem); font-weight: 800; letter-spacing: -.035em; line-height: .94; color: var(--navy); }
.show__monat {
  font-size: 1.15rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-d); margin-top: .35rem;
}
.show__jahr {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  color: var(--grey); margin-top: .2rem;
}

.show__titel { font-size: clamp(1.22rem, 2.4vw, 1.58rem); margin: 0 0 .28rem; }
.show__titel a { text-decoration: none; }
.show__titel a:hover { color: var(--navy); }

.show__zeit { margin: 0; font-weight: 600; color: var(--ink); font-size: .96rem; }
.show__wo { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; color: var(--grey); font-size: .94rem; margin: .45rem 0 0; }
.show__alter { margin: .5rem 0 0; font-size: .93rem; color: #454C5A; }

.ort {
  display: inline-block;
  font-size: .71rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .36em .8em .32em;
  color: var(--navy);
  background: var(--navy-t);
  border-radius: 999px;
}
.ort[data-stadt="Osnabrück"] { color: var(--orange-d); background: var(--orange-t); }

.show__aktion { grid-column: 1 / -1; margin-top: 1.1rem; }

/* Auf dem Handy ist der Ticketkauf die eine Handlung, um die es geht:
   volle Breite, gefüllt, statt eines kleinen Umrisses in der Ecke. */
@media (max-width: 899px) {
  .show__aktion .knopf {
    display: flex; justify-content: center; width: 100%;
    padding: .85em 1.5em; font-size: 1rem;
    background: var(--orange); color: #1A1204;
    box-shadow: none;
  }
  .show__aktion .knopf:hover { background: #EE8F0F; }
}

@media (min-width: 900px) { .show__aktion { grid-column: auto; margin-top: 0; } }

.nachsatz { margin-top: 2rem; font-size: .93rem; color: var(--grey); }
.nachsatz a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.nachsatz a:hover { color: var(--orange-d); }

/* Comedians / der Rahmen -------------------------------------------------- */

.rahmen-text { max-width: 56ch; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); font-size: clamp(1.02rem, .35vw + .96rem, 1.13rem); }

/* Laufende Galerie über die volle Breite.
   Die Bilder behalten ihr eigenes Format — feste Höhe, Breite nach
   Seitenverhältnis. Hoch- und Querformat wechseln sich dadurch ab, was
   lebendiger wirkt als alles auf ein Maß zu beschneiden. */
.galerie {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.galerie__spur {
  display: flex; width: max-content;
  animation: galerie-wandern 64s linear infinite;
}
.galerie:hover .galerie__spur,
.galerie:focus-within .galerie__spur { animation-play-state: paused; }

.galerie__satz { display: flex; gap: 1rem; padding-right: 1rem; flex: none; }
.galerie figure { margin: 0; flex: none; }
.galerie img {
  display: block;
  height: clamp(220px, 27vw, 360px);
  width: auto;
  border-radius: var(--rund);
  object-fit: cover;
}

@keyframes galerie-wandern {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung wird aus der Laufschrift eine Leiste zum Wischen. */
  .galerie { overflow-x: auto; scrollbar-width: thin; }
  .galerie__spur { animation: none; }
  .galerie__satz[aria-hidden="true"] { display: none; }
}

/* Der Club ---------------------------------------------------------------- */

.club { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 920px) { .club { grid-template-columns: 1fr 1fr; align-items: center; } }
.club h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 1.1rem; }
.club p { max-width: 50ch; }

.club__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.club__bilder figure { margin: 0; }
.club__bilder img { width: 100%; object-fit: cover; border-radius: var(--rund); }
.club__bilder figure:first-child { grid-column: span 2; }
.club__bilder figure:first-child img { aspect-ratio: 16 / 10; object-position: center 38%; }
.club__bilder figure:not(:first-child) img { aspect-ratio: 3 / 4; }

/* Kontakt ----------------------------------------------------------------- */

.kontakt { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 920px) { .kontakt { grid-template-columns: 1fr 1fr; } }

.feld { display: block; margin-bottom: 1rem; }
.feld span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .32rem; }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .78rem .95rem; border-radius: var(--rund-s);
  background: var(--white); color: var(--ink);
  border: 1px solid #C6CBD4;
}
.feld input:focus, .feld textarea:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px var(--navy-t); }
.feld textarea { min-height: 7rem; resize: vertical; }

.zustimmung { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--grey); margin: 1rem 0 1.4rem; max-width: 52ch; }
.zustimmung input { margin-top: .22rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--navy); }

/* Dieselbe Einwilligung auf dunklem Grund. */
.zustimmung--hell { color: #B9C4DE; margin: 1.1rem 0 0; max-width: none; }
.zustimmung--hell input { accent-color: var(--orange); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Der Newsletter-Kasten. Statt gestreckter Leere füllt ein Foto die Höhe,
   die das Kontaktformular daneben vorgibt. */
.brief {
  overflow: hidden;
  background: var(--navy); color: var(--white);
  border-radius: var(--rund);
  display: flex; flex-direction: column;
  min-height: 100%;
}
.brief__bild { margin: 0; flex: 1 1 auto; min-height: 150px; }
.brief__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.brief__text { flex: none; padding: clamp(1.6rem, 3vw, 2.2rem); }
.brief h3 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.1; margin-bottom: .7rem; }
.brief p { font-size: clamp(1rem, .3vw + .95rem, 1.1rem); color: #C1CBE2; margin: 0 0 1.75rem; max-width: 34ch; }
.brief form { display: block; }
.brief__zeile { display: flex; gap: .7rem; flex-wrap: wrap; }
.brief input[type=email] {
  flex: 1 1 11rem; font: inherit; font-size: 1.02rem; padding: .85rem 1rem;
  border: 1px solid transparent; border-radius: var(--rund-s); background: var(--white); color: var(--ink);
}
.brief .knopf { padding: .85em 1.7em; }

/* Fuß --------------------------------------------------------------------- */

.fuss { background: var(--navy-d); color: #AFBAD3; padding-block: clamp(2.5rem, 5vw, 4rem); }
.fuss__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .fuss__grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 3rem; } }
.fuss__marke img { height: 44px; width: auto; margin-bottom: 1rem; }
.fuss h4 { font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin: 0 0 .9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; font-size: .94rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--orange); }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.fuss__mitte { margin-right: auto; }

/* Das Ticketsystem, über das alles läuft. */
.fuss__clubinio { display: block; opacity: .55; transition: opacity .2s; }
.fuss__clubinio:hover { opacity: 1; }
.fuss__clubinio img { width: 104px; height: auto; }

/* Entwurfs-Vermerk (fliegt beim Bau raus) --------------------------------- */
.vermerk { background: var(--ink); color: #D5D9E2; font-size: .84rem; text-align: center; padding: .55rem var(--gut); }
.vermerk b { color: var(--orange); font-weight: 700; }

/* ==========================================================================
   Bausteine, die erst mit der fertigen Seite dazukommen
   ========================================================================== */

/* Sprungmarke für Tastatur und Screenreader ------------------------------- */

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--white);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--rund-s) 0;
  font-weight: 600; text-decoration: none;
}
.sprung:focus { left: 0; }

/* Menü auf schmalen Bildschirmen ------------------------------------------ */

.menue { display: none; }

@media (max-width: 760px) {
  .menue {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto;
  }
  .menue span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s, opacity .18s; }
  .menue[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menue[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .kopf__in { gap: .5rem; }
  .kopf nav {
    position: absolute; top: var(--bar); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.25rem;
  }
  .kopf nav.offen { display: flex; }
  .kopf nav a:not(.knopf) { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .kopf nav .knopf { margin-top: 1rem; justify-content: center; }
}

/* Ladezustand ------------------------------------------------------------- */

.laedt { color: var(--grey); font-size: .95rem; margin: 0; padding: 1.5rem 0; }

/* Häufige Fragen ---------------------------------------------------------- */

.fragen { max-width: 62ch; }
.frage { border-bottom: 1px solid var(--line); }
.frage summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--orange-d); border-bottom: 2px solid var(--orange-d);
  transform: rotate(45deg); transition: transform .18s;
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.frage summary:hover { color: var(--navy); }
.frage__text { margin: 0 0 1.3rem; color: #454C5A; white-space: pre-line; }

/* Rückmeldung der Formulare ----------------------------------------------- */

.formmeldung { margin: .9rem 0 0; font-size: .95rem; font-weight: 600; }
.formmeldung[data-art="laeuft"]   { color: var(--grey); }
.formmeldung[data-art="gut"]      { color: #1C6B3A; }
.formmeldung[data-art="schlecht"] { color: #A3261B; }
.brief .formmeldung[data-art="laeuft"] { color: #C1CBE2; }
.brief .formmeldung[data-art="gut"]    { color: #9BE3B8; }
.brief .formmeldung[data-art="schlecht"] { color: #FFC0B8; }
.knopf:disabled { opacity: .55; cursor: default; }

/* Fuß --------------------------------------------------------------------- */

.fuss__marke p { margin: 0; font-size: .92rem; line-height: 1.65; max-width: 46ch; }

/* ==========================================================================
   Rechtstexte
   ========================================================================== */

.zurueck {
  display: inline-block; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600; font-size: .95rem; color: var(--navy); text-decoration: none;
}
.zurueck::before { content: '\2190'; margin-right: .5em; }
.zurueck:hover { color: var(--orange-d); }

.rechtstext { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 7vw, 5.5rem); }
.rechtstext .wrap { max-width: 760px; }
.rechtstext h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: 2rem; }
.rechtstext h2 {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em;
  margin: 2.5rem 0 .7rem; color: var(--navy);
}
.rechtstext p, .rechtstext ul { color: #333B4A; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rechtstext a:hover { color: var(--orange-d); }
.rechtstext em { background: var(--orange-t); font-style: normal; padding: 0 .3em; border-radius: 3px; }
.rechtstext__fuss {
  margin-top: 3rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--grey);
}

/* ── Show-Detailseite ─────────────────────────────────────────────────────── */

.detail { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

.detail__in {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .detail__in { grid-template-columns: 1.15fr 1fr; }
}

.detail__bild { margin: 0; border-radius: var(--rund); overflow: hidden; background: var(--navy-t); }
.detail__bild img { display: block; width: 100%; height: auto; }

.detail__wann {
  margin: 0 0 .5rem; font-weight: 700; font-size: .95rem;
  color: var(--orange-d); letter-spacing: .02em;
}
.detail__text h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.9rem);
  letter-spacing: -.03em; line-height: 1.08; margin: 0;
}

.detail__fakten {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem;
  margin: clamp(1.25rem, 3vw, 1.9rem) 0; font-size: .97rem;
}
.detail__fakten dt { font-weight: 700; color: var(--grey); }
.detail__fakten dd { margin: 0; color: var(--ink); }
.detail__fakten a { color: var(--navy); text-underline-offset: 2px; }
.detail__fakten a:hover { color: var(--orange-d); }

.detail__text .knopf { margin-right: .6rem; margin-bottom: .6rem; }

.detail__beschreibung { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
/* Die Beschreibung kommt als Freitext mit Zeilenumbruechen aus Clubinio.
   Die Zeilenlaenge wird am Absatz begrenzt, nicht am Kasten — sonst zoege
   der zentrierte .wrap den Text aus der Flucht mit dem Bild darueber. */
.detail__beschreibung p { white-space: pre-line; color: #333B4A; margin: 0; max-width: 68ch; }
.detail__ki { margin-top: 1.25rem !important; font-size: .88rem; color: var(--grey); }

.detail__vorbei {
  display: inline-block; margin: 0 .6rem .6rem 0;
  font-weight: 700; color: var(--grey);
}

/* ── Stadtseite: wo wir spielen ───────────────────────────────────────────── */

.haeuser { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) {
  .haeuser { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.haeuser li {
  background: var(--paper); border-radius: var(--rund);
  padding: 1.1rem 1.35rem;
}
.haeuser strong { display: block; font-size: 1.06rem; letter-spacing: -.015em; }
.haeuser span { display: block; margin-top: .3rem; color: var(--grey); font-size: .94rem; }

/* Echte Links zu den Stadtseiten — die Filterknoepfe darueber brauchen JS. */
.stadtlinks { margin: 1.5rem 0 0; font-size: .94rem; color: var(--grey); }
.stadtlinks a { color: var(--navy); font-weight: 600; text-underline-offset: 2px; }
.stadtlinks a:hover { color: var(--orange-d); }

/* ── Fehlerseite ──────────────────────────────────────────────────────────── */

/* Dezent: Die Zahl ist die Randnotiz, die Erklaerung die Hauptsache. */
.fehler__nummer {
  margin: 0 0 .6rem; font-weight: 700; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--orange-d);
}
.fehler__wege { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

/* ── Drei Textspalten: was einen Abend ausmacht ───────────────────────────── */

.infos { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 820px) {
  .infos { grid-template-columns: repeat(3, 1fr); }
}
.infos h3 {
  font-size: 1.16rem; letter-spacing: -.02em;
  margin-bottom: .6rem; color: var(--navy);
}
.infos p { margin: 0; color: #333B4A; font-size: .99rem; }
.infos a { color: var(--navy); font-weight: 600; text-underline-offset: 2px; }
.infos a:hover { color: var(--orange-d); }