/* ============================================================================
   Cosmopolar Erfurt — Design und Layout
   ----------------------------------------------------------------------------
   Uebernahme der bestehenden WordPress-Seite: schwarzer Grund, weisse
   Schrift, Inter in Versalien, Akzent in Gelbgruen. Gerundete Kanten —
   Karten, Knoepfe und Formulare sind gerundet (Abweichung vom Original).

   Keine Inline-Styles. Die Content-Security-Policy fuehrt style-src 'self'
   ohne unsafe-inline; was aus der API kommt, wird als <img> oder
   textContent gesetzt, nie als style-Attribut.
   ========================================================================== */

/* ------------------------------------------------------------- Schriften -- */

/* Inter als variabler Schnitt: eine Datei fuer alle Gewichte von 100 bis
   900, 71 KB. Die drei Poppins-Schnitte brauchten zusammen 151 KB und
   deckten nur 400, 700 und 900 ab.

   Die Datei ist der Latin-Auszug des Inter-Projekts und deckt den gesamten
   Text dieser Seite ab — nachgezaehlt gegen Markup, Clubinio-Daten und
   config.js. Nicht enthalten sind Emoji; die kommen ohnehin immer aus der
   Systemschrift. Ebenso wenig enthalten ist der Pfeil U+2192, deshalb
   zeichnet das CSS ihn selbst (siehe `.knopf::after`).

   Die Poppins-Dateien bleiben vorerst liegen — ein Zurueck kostet dann nur
   diesen Block. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Montserrat traegt die Display-Ebene: Ueberschriften, Navigation, Knoepfe
   und Etiketten. Inter bleibt fuer den Fliesstext.

   Zwei Familien mit klarer Aufgabenteilung — Montserrat ist als
   geometrische Display-Schrift gezeichnet und traegt grosse Versalien,
   Inter als Oberflaechenschrift und bleibt im Absatz ruhig. Zusammen
   105 KB, beide variabel. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- Token -- */

:root {
  /* Flaechen. Die Werte stammen aus dem Elementor-Kit der bestehenden Seite. */
  /* Seitengrund. **Nicht reines Schwarz.** Die bestehende Seite fuehrt
     durchgehend ein sehr dunkles Grau; reines #000 wirkt besonders auf
     OLED-Displays wie ein Loch, weil die Pixel dort wirklich aus sind und
     es keinerlei Abstufung zum Inhalt gibt. Ein paar Punkte Helligkeit
     geben der Flaeche Tiefe, ohne sie aufzuhellen. */
  --nacht:        #0b0b0e;   /* Seitengrund */
  --box:          #161616;   /* Karten, Kaesten */
  --box-hell:     #202020;   /* abgesetzte Flaeche in einer Box */
  --flaeche:      #181818;   /* Abschnittsgrund, wo er sich abheben soll */
  --karte:        #181818;   /* Eventkarten — Originalwert */
  --kopf:         #0e0e0e;   /* Kopfzeile, sobald sie deckend wird */
  --linie:        #2a2a2a;   /* Trenner und Rahmen */

  /* Schrift: zwei Ebenen mit klarer Aufgabe. */
  --schrift-display: 'Montserrat', 'Inter', system-ui, sans-serif;
  --schrift-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Schrift. */
  --tinte:        #ffffff;
  --tinte-leise:  #b4b4b4;
  --tinte-still:  #7d7d7d;

  /* Akzent der Marke. */
  --akzent:       #e7f50e;
  /* Schrift auf dem Akzent — Schwarz, weil Gelbgruen sonst nichts traegt. */
  --akzent-tinte: #000000;

  /* Rundungen. Gestaffelt nach Flaechengroesse — ein einheitlicher Radius
     laesst kleine Elemente verspielt und grosse Flaechen hart wirken. */
  --r-knopf:      980px;    /* Pille — der Radius kappt bei halber Hoehe */
  --r-feld:       14px;     /* Eingabefelder */
  --r-karte:      18px;     /* Eventkarten, Kaesten */
  --r-klein:      10px;     /* Chips, Symbole, kleine Flaechen */
  /* Hoehe des Abschnitts unter der Perforation. Kerben und Trennlinie
     haengen beide daran — ein Wert, damit sie nicht auseinanderlaufen. */
  --abriss:       46px;

  /* Weiche Schatten statt Rahmen, wo etwas abheben soll. */
  --schatten:     0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  --schatten-hoch: 0 2px 4px rgb(0 0 0 / 35%), 0 16px 40px rgb(0 0 0 / 45%);

  /* Uebergang mit leichtem Ueberschwingen — nicht linear, nicht traege. */
  --kurve:        cubic-bezier(0.32, 0.72, 0, 1);

  /* Haken fuer die eigenen Kaestchen. Als data:-Adresse im Stylesheet und
     nicht als eigene Datei: 200 Byte sind keinen zweiten Abruf wert. */
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230b0b0e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-6.9'/%3E%3C/svg%3E");

  /* Masse. */
  --breite:       1200px;
  --breite-schmal: 760px;
  --gutter:       clamp(1rem, 4vw, 2.5rem);
  /* Hoehe der Kopfzeile. Hero, Bannerversatz, Menue und Ankersprung
     rechnen damit — weicht der Wert von der tatsaechlichen Hoehe ab,
     verschiebt sich der Inhalt um die Differenz.

     **Zwei Werte, weil die Zeile nicht ueberall gleich hoch ist.** Ihre
     Hoehe ergibt sich aus dem hoechsten Kind plus Polster: auf dem
     Schreibtisch das Logo (46px), auf dem Telefon der Menueknopf (44px).
     Mit einem einzigen Wert klaffte zwischen Kopfzeile und aufgeklapptem
     Menue eine Luecke von 2px, durch die das Bild schien.
     Nachgemessen: 82px / 80px. */
  --kopf-hoehe:   82px;

  /* Typografie. Die Skala ist die der bestehenden Seite (36/50/60/85 px),
     hier als clamp(), damit sie auf dem Telefon nicht ueberlaeuft. */
  --t-hero:   clamp(2.75rem, 9vw, 5.3125rem);   /* bis 85px */
  --t-h1:     clamp(2rem, 6vw, 3.75rem);        /* bis 60px */
  --t-h2:     clamp(1.75rem, 5vw, 3.125rem);    /* bis 50px */
  --t-h3:     clamp(1.25rem, 3vw, 1.5rem);
  --t-text:   0.9375rem;   /* 15px — Originalwert */
  --t-klein:  0.875rem;
}

/* --------------------------------------------------------------- Grundlage -- */

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

/* Sicherheitsnetz gegen seitliches Verschieben. Die randlose Bildstrecke
   rechnet die Scrollleiste bereits heraus (`--sb`); das hier faengt ab, was
   kuenftig dazukommt, ohne dass es jemandem auffaellt.

   `clip`, nicht `hidden`: `overflow: hidden` an einem Vorfahren setzt
   `position: sticky` ausser Kraft, und die Kopfzeile klebt. */
html, body { overflow-x: clip; }

/* `hidden` muss gewinnen. Der Browser setzt dafuer nur `display: none` mit
   schwacher Spezifitaet — jede eigene display-Regel schlaegt es. Genau das
   ist passiert: `.knopf { display: inline-flex }` hat ein `hidden` am
   Lounge-Knopf ueberstimmt, und der stand auf jeder Eventseite, obwohl ihn
   nichts eingeblendet hatte. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anker sollen nicht unter der festen Kopfzeile landen. */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

/* Wer Bewegung abbestellt hat, bekommt auch kein sanftes Scrollen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Menue offen oder Lightbox aktiv: der Hintergrund darf nicht mitscrollen. */
html.menu-offen, html.lb-aktiv { overflow: hidden; }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  /* Montserrat laeuft breit, im schwersten Schnitt noch mehr. Ohne
     negative Sperrung zerfallen lange Versalueberschriften in
     Einzelbuchstaben. */
  letter-spacing: -0.02em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Nur fuer Lesegeraete — etwa die H1 der Startseite. */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--akzent);
  color: var(--akzent-tinte);
  font-weight: 700;
}
.sprung:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- Raster -- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.huelle-schmal { max-width: var(--breite-schmal); }

.abschnitt { padding-block: clamp(3.5rem, 9vw, 7rem); }
.abschnitt-flaeche { background: var(--flaeche); }

/* Der Eventabschnitt liegt im Original auf einem Clubfoto mit dunklem
   Schleier (Deckung 0,48). Das Bild steht im CSS und nicht als <img> im
   Markup, weil es Zierde ist und keinen Inhalt traegt. */
.abschnitt-bild {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6.25rem);
  background: url('../img/events-bg.webp') center center / cover no-repeat;
  isolation: isolate;
}
.abschnitt-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 48%);
}

/* Abschnittskopf: Ueberschrift plus Unterzeile, zentriert. */
.kopfzeile { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.kopfzeile h2 { font-size: var(--t-h2); }
.kopfzeile p {
  margin: 0.75rem 0 0;
  color: var(--tinte-leise);
  text-transform: none;
}
/* Die Unterzeilen unter „Next Events" und „Einblick" stehen im Original in
   der Akzentfarbe, nicht gedaempft. */
.kopfzeile .unterzeile { color: var(--akzent); font-weight: 400; }

/* ---------------------------------------------------------------- Knoepfe -- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border: 1.5px solid var(--akzent);
  border-radius: var(--r-knopf);
  background: var(--akzent);
  color: var(--akzent-tinte);
  font: inherit;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: var(--t-klein);
  text-transform: uppercase;
  /* Weniger Sperrung als vorher: in der Pille wirkt enge Laufweite ruhiger. */
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.25s var(--kurve), box-shadow 0.25s var(--kurve),
              background 0.2s ease, color 0.2s ease;
}
.knopf:hover {
  background: transparent;
  color: var(--akzent);
  transform: translateY(-1px);
  box-shadow: var(--schatten);
}
/* Beim Druecken wieder herunter — das macht den Knopf greifbar. */
.knopf:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* Pfeil am Ende, wie bei allen Knoepfen des Originals. Als ::after und nicht
   im Markup: eine Zierde gehoert nicht in den Quelltext, und Lesegeraete
   sollen „Alle Events ansehen" vorlesen, nicht „Alle Events ansehen Pfeil".

   **Gezeichnet, nicht gesetzt.** Inter fuehrt U+2192 nicht; als Textzeichen
   fiele der Pfeil auf die Systemschrift zurueck und passte in Strichstaerke
   und Groesse nicht zur Beschriftung daneben. Als Maske uebernimmt er
   `currentColor` und skaliert mit der Schriftgroesse. */
.knopf::after {
  content: '';
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h12.2l-4.6-4.6L14 6l6 6-6 6-1.4-1.4 4.6-4.6H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h12.2l-4.6-4.6L14 6l6 6-6 6-1.4-1.4 4.6-4.6H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.knopf-ohne-pfeil::after { content: none; }

/* Der Ticketknopf traegt im Original ein Ticketsymbol vorn statt des
   Pfeils am Ende. */
.knopf-ticket::after { content: none; }
.knopf-ticket::before { content: '\1F39F'; margin-right: 0.15rem; }

.knopf-leer {
  background: transparent;
  color: var(--tinte);
  /* Gedaempfter Rahmen statt voller Kontrast — ein zweiter Knopf soll den
     ersten nicht ueberschreien. */
  border-color: rgb(255 255 255 / 35%);
}
.knopf-leer:hover {
  background: var(--tinte);
  color: var(--nacht);
  border-color: var(--tinte);
}

.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.knopf[disabled]:hover { background: var(--akzent); color: var(--akzent-tinte); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Die Absendeknoepfe laufen im Original ueber die volle Formularbreite. */
.form .knopf-reihe { display: block; }
.form .knopf-reihe .knopf { width: 100%; }

.icon { flex: none; }

/* ---------------------------------------------------------------- Kopf --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  isolation: isolate;
  transition: background 0.25s ease;
}

/* Ueber dem Hero steht die Zeile frei im Bild. Sobald gescrollt wird,
   bekommt sie einen Grund — darunter liegen Text und Karten, und ohne
   Grund staende die Schrift mitten darin.

   **Nur die Farbe aendert sich, nicht die Hoehe.** Eine klebende Zeile
   belegt weiterhin ihren Platz im Fluss; aenderte sich dabei die Hoehe,
   ruckte der gesamte Inhalt darunter. */
.kopf[data-fest='ja'] {
  background: rgb(11 11 14 / 92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* **Weichzeichner aus, solange das Menue offen ist.** Nicht aus Geschmack,
   sondern weil `backdrop-filter` — wie `transform`, `filter` und
   `perspective` — einen umgebenden Block fuer `position: fixed` erzeugt.
   `.menu` liegt im Markup innerhalb von `.kopf`; mit Weichzeichner bezieht
   sich sein `inset: var(--kopf-hoehe) 0 0` nicht mehr auf das Sichtfeld,
   sondern auf die 80 Pixel hohe Kopfzeile. Das Menue war dann 64 statt
   764 Pixel hoch und der Seiteninhalt schien darunter durch — aber nur im
   gescrollten Zustand, weil `data-fest` erst dort gesetzt wird.

   Die Zeile darueber gibt der Kopfzeile bei offenem Menue ohnehin eine
   deckende Flaeche; der Weichzeichner hat dann nichts mehr zu tun. */
.kopf[data-offen='ja'] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Die Leiste darunter ist halbdurchsichtig, damit das Bild durchscheint —
   deckend wuerde sie zusammen mit dem Streifen daruber einen dicken Block
   ergeben. */
/* Kein Grund, kein Schatten — die Zeile steht frei im Bild. Stattdessen
   Luft nach oben: Sie rueckt vom Fensterrand weg und bekommt Raum, statt
   sich mit einer Flaeche vom Bild abzusetzen.

   Oben mehr als unten, damit die Zeile optisch nicht klebt und der Blick
   trotzdem zuerst aufs Bild faellt. */
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
  transition: padding 0.25s ease;
}

/* Gescrollt sitzt die Schrift mittig in der Leiste statt tief darin. Oben
   steht sie frei im Bild und darf nach unten haengen; auf einem Grund
   wirkt dieselbe Asymmetrie wie ein Fehler.

   **Die Summe bleibt gleich** (28+8 oben, 18+18 gescrollt — beides 36px).
   Eine klebende Zeile belegt weiter ihren Platz im Fluss; aenderte sich
   die Hoehe, ruckte der gesamte Inhalt darunter beim Umschalten. */
.kopf[data-fest='ja'] .kopf-innen {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

/* `.huelle` begrenzt die Breite, die Flaeche soll aber ueber die ganze
   Fensterbreite laufen. Statt der Begrenzung uebernimmt das Polster die
   Zentrierung: Es ist so breit wie der Rand neben der Inhaltsspalte, und
   faellt nie unter den Seitenabstand.

   **Ohne `+ var(--gutter)`.** Mit dem Zuschlag war die Leiste 80px
   schmaler als der Inhalt darunter — die Marke stand 40px weiter innen
   als alles auf der Seite und die Zeile wirkte verzogen. */
.kopf-innen {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--breite)) / 2));
}

.logo { display: flex; align-items: center; }
/* Auf dem Telefon deutlich kleiner — bei voller Groesse nimmt die Wortmarke
   dort die halbe Kopfzeile ein. */
.logo img { height: 46px; width: auto; }
@media (max-width: 899px) {
  .logo img { height: 34px; }
}

.menu-knopf {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  /* 44px bleibt die Trefferflaeche — die Balken sind schmaler. Ohne eigene
     Breite zogen sie sich auf die vollen 44px und das Kreuz wirkte wie ein
     Scheibenwischer. */
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-knopf span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--tinte);
  transition: transform 0.28s var(--kurve), opacity 0.2s ease;
}
/* 8px = halbe Balkenhoehe plus Abstand — so treffen sich beide in der Mitte. */
.kopf[data-offen='ja'] .menu-knopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf[data-offen='ja'] .menu-knopf span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.kopf[data-offen='ja'] .menu-knopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin: 0; padding: 0;
  list-style: none;
}

/* Keine Trennstriche. Sie stammen aus der fruheren Vollbreitenleiste, wo
   sie Ordnung in eine lange Zeile brachten. In der Pille zerhacken sie den
   knappen Raum — der Entwurf kommt ohne sie aus. */
@media (min-width: 900px) {
  /* Drei Spalten mit gleich breiten Aussenspalten — nur so stehen die
     Punkte wirklich mittig in der Pille. Mit `space-between` verteilten
     sie sich zwischen schmalem Logo und breitem Knopf und landeten
     rechts; die Marke wirkte dadurch eingequetscht.

     Die dritte Spalte bleibt leer: Sie haelt den Platz, den die Marke
     links einnimmt, und haelt damit die Mitte. */
  /* Punkte rechtsbuendig. Die Grundregel traegt das bereits
     (`justify-content: space-between` mit Marke und Navigation als
     einzigen Kindern) — hier stand vorher eine Rasterueberschreibung fuer
     die mittige Fassung. */
  .menu li { display: flex; align-items: center; }

}

.menu a {
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-block: 0.5rem;
  transition: color 0.15s ease;
}
/* Keine Unterstreichung — weder fest noch beim Darueberfahren. Der aktive
   Punkt ist eingefaerbt, das genuegt als Signal. */
.menu a:hover { color: var(--akzent); }
.menu a[aria-current='page'] { color: var(--akzent); }

/* Der Menuefuss gehoert nur ins aufgeklappte Menue auf schmalen Geraeten.
   Ohne diese Zeile laeuft er auf dem Schreibtisch ungestaltet im Fluss
   unter den Punkten mit — dort gibt es kein Vollbildmenue, in das er
   gehoerte. Die Mobilabfrage schaltet ihn wieder ein. */
.menu-fuss { display: none; }

/* Schmale Geraete: das Menue fuellt den Bildschirm. */

@media (max-width: 899px) {
  :root { --kopf-hoehe: 80px; }

  /* Solange das Menue offen ist, muss die Kopfzeile decken. Auf der
     Startseite ist sie ueber dem Hero durchsichtig — ohne das hier stand
     ueber dem Menue ein Streifen, durch den das Hero-Video schien. */
  .kopf[data-offen='ja'] { background: var(--kopf); }

  .menu {
    position: fixed;
    inset: var(--kopf-hoehe) 0 0;
    background: var(--kopf);
    padding: 1rem var(--gutter) 3rem;
    /* Statt von rechts einzuschieben: aufblenden und leicht aufziehen. Das
       Einschieben liess den Inhalt dahinter kurz wandern. */
    opacity: 0;
    transform: scale(1.03);
    /* Geschlossen auch fuer Tastatur und Lesegeraet weg — sonst wandert der
       Fokus in Menuepunkte, die niemand sieht. */
    visibility: hidden;
    transition: opacity 0.28s ease, transform 0.35s var(--kurve),
                visibility 0.28s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  /* Punkte und Fuss bilden einen Block, den die Flaeche mittig setzt.
     Vorher nahm die Liste per `flex: 1` den ganzen Raum und schob den Fuss
     an den unteren Rand — dazwischen klaffte ein Loch. */
  .menu { justify-content: center; }
  .menu ul { flex: none; }
  .kopf[data-offen='ja'] .menu {
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  /* Punkte mittig, gross und untereinander — mit Platz, nicht gedraengt. */
  /* Punkte oben beginnen lassen, nicht im freien Raum zentrieren.
     Mit `flex: 1` nimmt die Liste die ganze Hoehe zwischen Kopfzeile und
     Fuss ein; zentriert darin rutschten die Punkte in die Mitte dieser
     Flaeche und standen dadurch weit unterhalb der Kopfzeile.

     `min-height: 100%` ist raus — zusammen mit `flex: 1` zog es die Liste
     zusaetzlich auf und verstaerkte den Effekt. */
  .menu ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .menu li { justify-content: center; }
  .menu a {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    letter-spacing: -0.01em;
  }
  /* U18 steht auf dem Telefon in der Kopfzeile neben der Marke, nicht im
     aufgeklappten Menue — es braucht dort also keine eigene Regel. */

  /* Fuss im aufgeklappten Menue: Anschrift und Symbole. Vier Punkte
     allein lassen die Vollbildflaeche leer wirken — hier steht, was man
     sonst erst im Seitenfuss findet. */
  .menu-fuss {
    margin-top: 2.5rem;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
  }
  .menu-fuss p { color: var(--tinte-still); font-size: var(--t-klein); margin: 0; }
  .menu-fuss a { font-size: var(--t-klein); color: var(--tinte-leise); }
  .menu-fuss .fuss-social { margin-top: 0.75rem; }

  /* Ein sehr leiser Schein in der Markenfarbe nimmt der Flaeche das
     Tafelhafte, ohne sie einzufaerben. */
  .menu {
    background-image: radial-gradient(70% 40% at 50% 0%,
      rgb(231 245 14 / 7%), transparent 70%);
  }

  /* Die Punkte laufen nacheinander ein, statt alle gleichzeitig
     aufzutauchen. Die Verzoegerung steht je Position im CSS, weil ein
     Inline-Style unter `style-src 'self'` nicht erlaubt ist. */
  .menu li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s ease, transform 0.4s var(--kurve);
  }
  .kopf[data-offen='ja'] .menu li { opacity: 1; transform: none; }
  .kopf[data-offen='ja'] .menu li:nth-child(1) { transition-delay: 0.08s; }
  .kopf[data-offen='ja'] .menu li:nth-child(2) { transition-delay: 0.13s; }
  .kopf[data-offen='ja'] .menu li:nth-child(3) { transition-delay: 0.18s; }
  .kopf[data-offen='ja'] .menu li:nth-child(4) { transition-delay: 0.23s; }
  .kopf[data-offen='ja'] .menu li:nth-child(5) { transition-delay: 0.28s; }

  /* Wer Bewegung abbestellt hat, bekommt sie auch hier nicht. */
  @media (prefers-reduced-motion: reduce) {
    .menu li { opacity: 1; transform: none; transition: none; }
    .menu { transition: visibility 0.01s; transform: none; }
  }
}
@media (min-width: 900px) {
  .menu-knopf { display: none; }
}

/* ----------------------------------------------------------------- Hero -- */

.hero {
  position: relative;
  /* Feste Hoehe als `height`, nicht als `aspect-ratio` mit `max-height`:
     bei dieser Kombination zieht Chrome die Breite mit und laesst auf einem
     breiten, flachen Fenster rechts eine dunkle Flaeche stehen.
     Auch keine `vh`-Einheiten — sonst springt die Hoehe auf dem Telefon,
     wenn die Adressleiste ein- und ausfaehrt. */
  height: clamp(500px, 71svh, 790px);
  margin-top: calc(var(--kopf-hoehe) * -1);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--nacht);
  text-align: center;
}

.hero-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-medium img, .hero-medium video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Schleier, damit die Schrift auf dem Video traegt. Dunkel, nicht hell —
   die bestehende Seite setzt weisse Schrift auf das Clubvideo. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 75%) 100%);
}

.hero-text {
  position: relative;
  z-index: 2;
  padding-top: var(--kopf-hoehe);
}

/* Logo ueber der Ueberschrift. Die Breiten sind die des Originals: 10 % der
   Spalte auf dem Schreibtisch, 28 % ab Tablet abwaerts. */
.hero-logo {
  width: 8%;
  min-width: 78px;
  margin: 0 auto 1rem;
}
@media (max-width: 1024px) {
  .hero-logo { width: 28%; }
}
/* Der Hero-Titel ist ein <p>, kein <h1> — die H1 der Seite steht statisch
   und fuer Lesegeraete unsichtbar im Markup. Sonst waeren es zwei. */
.hero-titel {
  margin: 0 0 1.25rem;
  font-family: var(--schrift-display);
  font-size: var(--t-hero);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0;
}
.hero-titel span { display: block; }

/* Knapper als die uebrigen Knoepfe. Die bestehende Seite macht es ebenso —
   im Hero steht der Knopf unter einer sehr grossen Ueberschrift und muss
   sie nicht noch einmal ueberbieten. */
.hero-text .knopf {
  padding: 0.7rem 1.4rem;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------- Ueber uns -- */

.ueber {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .ueber { grid-template-columns: 1fr 1fr; }
}

/* Logo ueber der Ueberschrift, linksbuendig — 20 % im Original. */
.ueber-logo { width: 20%; min-width: 80px; margin-bottom: 1.25rem; }
@media (max-width: 767px) { .ueber-logo { width: 21%; } }

.ueber-text h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);   /* ~28px — Originalwert */
  margin-bottom: 1.25rem;
}
/* Blocksatz wie im Original. */
.ueber-text p { color: var(--tinte-leise); text-align: justify; }
.ueber-text .knopf-reihe { margin-top: 2rem; }

/* --------------------------------------------------------------- Karten -- */

/* Drei Spalten, Abstand 20px — und ab Tablet abwaerts eine Spalte. Das
   Original schaltet bei 1024 px direkt auf einspaltig, nicht stufenweise. */
.karten {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .karten { grid-template-columns: 1fr; }
}

.karte {
  display: flex;
  flex-direction: column;
  /* Die Kerben sind **Aussparungen im Kartenhintergrund**, keine farbigen
     Kreise. Zwei Kreise in der Hintergrundfarbe waeren nur auf schwarzem
     Grund unsichtbar — der Eventabschnitt der Startseite liegt aber auf
     einem Foto, dort staenden sie als dunkle Punkte. So stanzen sie
     wirklich, und es zeigt sich, was immer dahinterliegt. */
  background:
    radial-gradient(circle 11px at 0 calc(100% - var(--abriss)),
      transparent 11px, var(--karte) 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% calc(100% - var(--abriss)),
      transparent 11px, var(--karte) 11.5px) right / 51% 100% no-repeat;
  border-radius: var(--r-karte);
  /* Damit der Flyer die Rundung der Karte uebernimmt, ohne ihn einzeln zu
     runden — sonst steht an der Oberkante eine Ecke ueber. */
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform 0.3s var(--kurve), box-shadow 0.3s var(--kurve);
}
.karte:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-hoch);
}
.karte:active { transform: translateY(-2px); }

.karte-bild { background: var(--box-hell); }
/* Flyer sind 16:9 — ein quadratischer Beschnitt schneidet den Titel weg. */
.karte-bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.karte-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 0.9375rem 1rem;
  flex: 1;
}
/* Der Abschnitt unter der Perforation, wie bei einer Eintrittskarte:
   links Termin und Uhrzeit, rechts der Weg zur Veranstaltung.

   Feste Hoehe aus `--abriss`, damit die Trennlinie genau dort sitzt, wo die
   Kerben im Kartenhintergrund ausgespart sind. Waechst der Abschnitt mit
   seinem Inhalt, wandert die Linie und die Stanzung passt nicht mehr. */
.karte-abriss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: var(--abriss);
  margin: 0;
  padding-inline: 0.9375rem;
  border-top: 2px dashed var(--linie);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.karte-termin { color: var(--tinte-leise); white-space: nowrap; }
.karte-infos {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--akzent);
  transition: gap 0.22s var(--kurve);
}
/* Der Pfeil rueckt beim Darueberfahren ein Stueck weiter — die Karte ist
   ein Link, und das zeigt sie damit. */
.karte:hover .karte-infos { gap: 0.6rem; }
.karte-titel {
  font-size: var(--t-h3);
  line-height: 1.2;
}
/* Ortszeile zwischen Titel und „mehr erfahren" — im Original in der
   Akzentfarbe, wie die Datumszeile. */
.karte-ort {
  margin: 0;
  color: var(--akzent);
  font-size: var(--t-klein);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Monatsueberschrift der Eventliste. */
/* Zentriert und weiss, ohne Trennlinie — wie im Original. */
.monat {
  font-size: var(--t-h3);
  color: var(--tinte);
  text-align: center;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem;
}
.monat:first-child { margin-top: 0; }

.leer {
  color: var(--tinte-leise);
  text-align: center;
  padding-block: 3rem;
}

/* ------------------------------------------------------- Schieberegler -- */

/* Ersetzt Swiper. Das Band wird verschoben, die Folien teilen sich die
   Breite — wie viele gleichzeitig zu sehen sind, sagt `data-zeigen`. */
.slider {
  position: relative;
  overflow: hidden;
}
.slider-band {
  display: flex;
  /* `transition` setzt slider.js, damit eine Strecke ohne JavaScript nicht
     erst leer dasteht und dann springt. */
}
.slider-band > figure {
  margin: 0;
  flex: 0 0 100%;
  padding-inline: 0.3125rem;
  box-sizing: border-box;
}
.slider-band img {
  width: 100%;
  object-fit: cover;
  background: var(--box);
  border-radius: var(--r-karte);
}
/* Die Einblick-Strecke zeigt Querformate und laesst sich vergroessern. */
#einblick .slider-band > figure { cursor: zoom-in; }
#einblick .slider-band img { aspect-ratio: 16 / 9; }
/* Die Ueber-uns-Strecke zeigt Hochformate. */
#ueber .slider-band img { aspect-ratio: 2 / 3; }

.slider-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 45%);
  backdrop-filter: blur(8px);
  color: var(--akzent);
  cursor: pointer;
  transition: background 0.15s ease;
}
.slider-pfeil:hover { background: rgb(0 0 0 / 75%); }
.slider-rueck { left: 0.3125rem; }
.slider-vor { right: 0.3125rem; }

.slider-punkte {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.slider-punkt {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Im Original: aktiver Punkt in der Akzentfarbe, die uebrigen weiss. */
  background: var(--tinte);
  opacity: 0.45;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.slider-punkt[aria-current='true'] { background: var(--akzent); opacity: 1; }

/* Die Einblick-Strecke laeuft im Original randlos ueber die volle
   Fensterbreite. Sie steht im Markup trotzdem in der Huelle, damit die
   Ueberschrift darueber ausgerichtet bleibt — der negative Rand holt sie
   wieder heraus. `100vw` statt `100%`, weil die Huelle schmaler ist; der
   Ausgleich nach links ist die halbe Differenz. */
.slider-randlos {
  /* `--sb` ist die Breite der Scrollleiste, gesetzt von page-common.js.
     Ohne den Abzug ist die Flaeche auf dem Schreibtisch genau um diese
     Breite zu breit und die ganze Seite laesst sich quer schieben. */
  width: calc(100vw - var(--sb, 0px));
  margin-left: calc(50% - (100vw - var(--sb, 0px)) / 2);
}
.slider-randlos .slider-rueck { left: 0; }
.slider-randlos .slider-vor { right: 0; }

/* ------------------------------------------------------------ Lightbox -- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgb(0 0 0 / 92%);
  padding: clamp(1rem, 5vw, 3rem);
}
.lightbox[data-offen='ja'] { display: grid; }

.lb-bild {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--r-karte);
}
.lb-zaehler {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--tinte-still);
  font-size: var(--t-klein);
}

.lb-knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(8px);
  color: var(--tinte);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lb-knopf:hover { background: var(--akzent); color: var(--akzent-tinte); }
.lb-zu    { top: 1rem; right: 1rem; }
.lb-rueck { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lb-vor   { right: 1rem; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------- Anfahrt -- */

.anfahrt {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 760px) {
  .anfahrt { grid-template-columns: 1fr 1fr; }
}
.anfahrt h2 { font-size: var(--t-h3); margin-bottom: 1rem; }

.zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--tinte-leise);
}
.zeile .icon { color: var(--akzent); margin-top: 0.2rem; }
.zeile a:hover { color: var(--akzent); }

/* ------------------------------------------------------- Seitenkopf (Unter) -- */

/* Feste Hoehe. Ohne sie richtet sich jeder Kopf nach der Laenge seines
   Einleitungssatzes und die Unterseiten stehen unterschiedlich hoch. */
/* Bildbanner der Unterseiten — im Original je Seite ein anderes Clubfoto,
   mit dunklem Schleier darueber. */
.seitenkopf-bild {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}
.seitenkopf-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 58%);
}
/* Der Bildausschnitt folgt dem Motiv, nicht der Bildmitte: Beim Jobs-Banner
   steht der Leuchtschriftzug im rechten Bilddrittel, beim Events-Banner das
   Ringlicht links der Mitte. Mit `center` schnitt der Beschnitt auf schmalen
   Geraeten genau daran vorbei. */
.seitenkopf-bild[data-banner='events'] {
  background-image: url('../img/banner/events.webp');
  background-position: 42% center;
}
.seitenkopf-bild[data-banner='kontakt'] {
  background-image: url('../img/banner/kontakt.webp');
  background-position: 50% center;
}
.seitenkopf-bild[data-banner='jobs'] {
  background-image: url('../img/banner/jobs.webp');
  background-position: 66% center;
}

.seitenkopf {
  /* Hoehe waechst mit der Fensterbreite, statt auf dem Telefon als flacher
     Streifen dazustehen, durch den das Bild stark beschnitten wird. */
  min-height: clamp(320px, 34vw, 460px);
  display: grid;
  align-content: center;
  /* Der Banner laeuft unter die Kopfzeile, damit die schwebende Leiste
     auch hier auf einem Bild sitzt und nicht auf leerer Flaeche.

     Negativer Rand **und** Polster gehoeren zusammen: Der Rand schiebt den
     Banner unter die Leiste, das Polster holt den Inhalt wieder in die
     sichtbare Flaeche. Eines ohne das andere drueckt ihn aus der Mitte —
     genau das war hier frueher der Fall, als das Polster ohne Gegenstueck
     stand. */
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding-top: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem));
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
  /* `background-color`, nicht die Kurzschreibweise `background`. Das
     Element traegt beide Klassen (`seitenkopf seitenkopf-bild`), und die
     Kurzschreibweise setzt alle uebrigen background-Werte zurueck — damit
     fiel `background-size: cover` aus `.seitenkopf-bild` auf `auto`
     zurueck und das Bannerbild lag in Originalgroesse in der Flaeche,
     also dreifach vergroessert. Das Bild ueberlebte nur, weil die
     Banner-Regeln hoehere Spezifitaet haben. */
  background-color: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  text-align: center;
}
/* Eigene Skala, nicht `--t-h1`: Die Bannerueberschrift steht allein auf
   einer grossen Flaeche und darf deutlich groesser anfangen als eine
   Ueberschrift im Fliesstext. */
/* Auf dem Telefon traegt die Ueberschrift den ganzen Banner — sie darf
   dort deutlich groesser anfangen. 13vw heisst rund 51px auf einem
   390px-Geraet statt der vorherigen 40px. */
.seitenkopf h1 { font-size: clamp(3rem, 13vw, 4.5rem); }
.seitenkopf p {
  margin: 1rem auto 0;
  max-width: 54ch;
  color: var(--tinte-leise);
  text-transform: none;
}
.seitenkopf .unterzeile {
  color: var(--akzent);
  font-weight: 400;
  font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
}

/* Auf dem Telefon traegt der Banner ein festes Seitenverhaeltnis statt einer
   Mindesthoehe. Der Umweg ueber eigene Hochformat-Zuschnitte war falsch: Ein
   schmaler Ausschnitt aus einem Breitbild heisst staerker vergroessern, nicht
   schwaecher. Und eine feste Mindesthoehe bei schmaler Breite erzwingt genau
   diese Vergroesserung, weil `cover` die Hoehe fuellen muss.

   **3:2 statt 16:9 — gemessen, nicht geschaetzt.** Mit dem Verhaeltnis des
   Bildes (16:9, die Datei ist 1536x864) war das Band bei 390 Pixel Breite
   219 Pixel hoch. Davon gehen 80 fuer die schwebende Kopfzeile ab, es
   bleiben 139 fuer 96 Pixel Text: 21 Pixel Luft ueber der Ueberschrift,
   22 darunter. Die Schrift klebte oben an der Leiste und unten an der
   Kante — genau das wirkte gequetscht.

   Das Polster ist hier **nicht** der Hebel: `align-content: center`
   zentriert den Inhalt, sobald er die Inhaltsbox ueberlaeuft, und das tut
   er auf jeder Telefonbreite. Ein kleineres Polster verschiebt deshalb
   nichts. Nur mehr Hoehe hilft.

   3:2 ergibt 260 Pixel, also 180 nutzbare statt 139 — die Luft verdoppelt
   sich auf gut 40 Pixel. Der Preis sind rund 16 Prozent seitlicher
   Beschnitt. Das ist der Tausch: etwas weniger Bild gegen Text, der nicht
   zwischen zwei Kanten klemmt. */
@media (max-width: 759px) {
  .seitenkopf-bild {
    min-height: 0;
    aspect-ratio: 3 / 2;
    background-position: center center;
  }
}

/* ------------------------------------------------------------------ FAQ -- */

.kontakt-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .kontakt-raster { grid-template-columns: 1fr 1fr; }
  /* Ist die FAQ leer, faellt die linke Spalte weg und das Formular rueckt
     in die Mitte. */
  .kontakt-raster[data-ohne-faq='ja'] {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
  }
}

.faq {
  border-bottom: 1px solid var(--linie);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Das Pluszeichen dreht sich beim Aufklappen zum Minus. Als ::after und
   nicht als Symbol im Markup: eine Zierde gehoert nicht in den Quelltext. */
.faq summary::after {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq[open] summary { color: var(--akzent); }
.faq-text {
  padding-bottom: 1.25rem;
  color: var(--tinte-leise);
}
/* Die Antwort kommt als reiner Text aus Clubinio, mit Zeilenumbruechen —
   `page-kontakt.js` setzt sie als `textContent`. Ohne `pre-wrap` faltet CSS
   die Umbrueche zu Leerzeichen und aus einer gegliederten Antwort wird ein
   Block. Dieselbe Loesung wie bei der Eventbeschreibung weiter unten, aus
   demselben Grund: kein Markup aus einem Shopadmin-Feld interpretieren. */
.faq-text p { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Jobs -- */

/* Im Original steht die Ansprache linksbuendig und in normaler Schriftlage,
   nicht als zentrierte Versalueberschrift. */
.abschnitt-oben { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
/* Ansprache und Formular gehoeren zusammen. Ohne das hier stossen zwei
   volle Abschnittspolster aneinander und reissen eine Luecke zwischen
   Einleitung und erstem Feld. Die zweite Zeile ueberspringt die
   ausgeblendeten Stellen. */
.abschnitt-oben + .abschnitt,
.abschnitt-oben + [hidden] + .abschnitt { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.jobs-ansprache {
  font-size: var(--t-h3);
  text-transform: none;
  margin-bottom: 1rem;
}
.jobs-intro { color: var(--tinte-leise); max-width: 70ch; }

/* -------------------------------------------------------------- Stellen -- */

.stelle {
  padding: 1.5rem;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r-karte);
  margin-bottom: 1rem;
}
.stelle h3 { font-size: var(--t-h3); margin-bottom: 0.5rem; }
/* `white-space` wie bei der FAQ-Antwort: `page-jobs.js` setzt die
   Beschreibung als reinen Text, die Umbrueche darin sollen stehen bleiben. */
.stelle p {
  color: var(--tinte-leise);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Formulare -- */

.form { display: grid; gap: 1.125rem; }

/* h2 traegt global keinen Abstand; ueber einem Formular braucht sie einen,
   sonst sitzt sie auf der ersten Feldbeschriftung. */
#kontaktformular h2 { margin-bottom: 1.5rem; }

/* Im Original stehen kurze Felder nebeneinander, nicht alle untereinander.
   `auto-fit` statt fester Spalten: unter ~420px je Feld bricht die Reihe
   von selbst um, ohne eigene Abfrage. */
.form-reihe {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.feld { display: grid; gap: 0.4rem; }
/* Im Original stehen die Beschriftungen in Normalschrift und gemischter
   Schreibung, nicht als fette Versalien. */
.feld > span {
  font-size: var(--t-klein);
  font-weight: 400;
  color: var(--tinte-leise);
}
.feld-pflicht { color: var(--akzent); }

input[type='text'], input[type='email'], input[type='tel'],
input[type='number'], input[type='file'], textarea, select {
  width: 100%;
  padding: 0.95rem 1.05rem;
  /* Kein Rahmen. Die Flaeche allein zeigt, wo geschrieben wird — eine Linie
     um jedes Feld zieht das Formular in Kaestchen auseinander. */
  border: 0;
  border-radius: var(--r-feld);
  background: rgb(255 255 255 / 6%);
  color: var(--tinte);
  font: inherit;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
:is(input[type='text'], input[type='email'], input[type='tel'],
    input[type='number'], textarea, select):hover:not(:focus) {
  background: rgb(255 255 255 / 8%);
}
textarea {
  min-height: 150px;
  resize: vertical;
  border-radius: var(--r-feld);
}
/* Fokus als schmaler Ring aussen. Er liegt ueber dem Rand, nicht darin,
   und verschiebt deshalb nichts. */
input:focus, textarea:focus, select:focus {
  outline: 0;
  background: rgb(255 255 255 / 10%);
  box-shadow: 0 0 0 2px rgb(231 245 14 / 45%);
}
::placeholder { color: var(--tinte-still); }

/* Das Dateifeld traegt keine eigene Flaeche: sonst steht ein Knopf in
   einem Kasten in einem Formular. Nur der Knopf bleibt sichtbar, der
   Dateiname steht daneben im Text. */
input[type='file'] {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
input[type='file']:focus {
  background: none;
  box-shadow: none;
}
input[type='file']::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--r-knopf);
  background: rgb(255 255 255 / 10%);
  color: var(--tinte);
  font: inherit;
  font-size: var(--t-klein);
  cursor: pointer;
  transition: background 0.2s ease;
}
input[type='file']::file-selector-button:hover {
  background: rgb(255 255 255 / 16%);
}
input[type='file']:focus-visible::file-selector-button {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Mehrfachauswahl der Bereiche auf der Jobseite. Keine Pillen mehr: sieben
   Umrisse mit je einem Kreis darin ergeben eine Wand aus Rahmen. Hier steht
   nur das Kaestchen und der Text daneben, in Spalten gesetzt, damit die
   unterschiedlich langen Bezeichnungen untereinander ausgerichtet bleiben. */
.auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0.9rem 1.5rem;
  margin-top: 0.3rem;
}
.auswahl label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--tinte-leise);
  cursor: pointer;
  transition: color 0.2s ease;
}
.auswahl label:hover,
.auswahl label:has(input:checked) { color: var(--tinte); }

/* Das Fieldset traegt im Original keinen Rahmen — nur die Beschriftung
   darueber, wie bei jedem anderen Feld. */
fieldset.feld {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.feld legend { padding: 0; }

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.zustimmung input { margin-top: 0.1rem; }

/* Ein eigenes Kaestchen fuer beide Stellen. Das Systemkaestchen ist ein
   weisses Quadrat und passt zu nichts hier; gefuellt statt umrandet spricht
   es dieselbe Sprache wie die Eingabefelder. */
.auswahl input, .zustimmung input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 7px;
  background: rgb(255 255 255 / 10%);
  cursor: pointer;
  transition: background 0.2s ease;
}
.auswahl label:hover input:not(:checked),
.zustimmung:hover input:not(:checked) { background: rgb(255 255 255 / 16%); }
.auswahl input:checked, .zustimmung input:checked {
  background: var(--haken) var(--akzent) center / 13px 13px no-repeat;
}
.auswahl input:focus-visible, .zustimmung input:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
.zustimmung a { color: var(--akzent); text-decoration: underline; }

/* Honigtopf. Fuer Menschen unsichtbar, fuer Skripte verlockend.
   Nicht `display: none` — manche Skripte ueberspringen genau das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.rueckmeldung {
  margin: 0;
  font-size: var(--t-klein);
  min-height: 1.4em;
}
.rueckmeldung[data-state='ok']      { color: var(--akzent); }
.rueckmeldung[data-state='fehler']  { color: #ff6b5e; }
.rueckmeldung[data-state='laeuft']  { color: var(--tinte-still); }

/* ------------------------------------------------------------- Eventseite -- */

/* Inhaltsspalte ~820px und Titel ~40px — Originalwerte. */
.event { max-width: 820px; margin-inline: auto; }
.event h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }

.event-flyer {
  width: 100%;
  border-radius: var(--r-karte);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--box);
  margin-bottom: 1.75rem;
}

.event .knopf-reihe { margin-bottom: 2rem; }
.event .knopf-reihe .knopf { flex: 1 1 260px; }

/* Der U18-Knopf laeuft ueber dieselbe Breite wie der Ticketknopf. Als
   schmaler Knopf unter einem breiten stand er auf dem Schreibtisch
   verloren in der Flaeche. */
.event .knopf-reihe-u18 .knopf { width: 100%; }

/* U18-Formular. Erscheint nur, wenn Minderjaehrige eingelassen werden —
   tools/build.py entscheidet das je Termin aus `ageRestriction`.

   Steht unter den Knoepfen und nicht daneben: Es ist kein gleichrangiger
   Weg zum Ticket, sondern eine Bedingung fuer einen Teil der Gaeste. Der
   Abstand nach oben ist deshalb negativ gegen den Abstand der Knopfreihe —
   Hinweis und Knopf gehoeren optisch zusammen, nicht zum Flyer darueber. */
/* Der Knopf steht direkt unter dem Ticketknopf, der Hinweis darunter: Die
   Handlung zuerst, die Erklaerung als Beschriftung dazu. Der negative
   Abstand nach oben arbeitet gegen den Abstand der Ticketreihe — beide
   Knoepfe gehoeren zusammen. */
.event .knopf-reihe-u18 { margin: -1rem 0 0.6rem; }
.u18-hinweis {
  margin: 0 0 2.5rem;
  color: var(--tinte-still);
  font-size: var(--t-klein);
}

.event-datum {
  color: var(--akzent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}
.event h1 { margin-bottom: 1.5rem; }
/* Die Beschreibung steht auf der Eventseite fast allein auf der Flaeche.
   Eine leichte Absetzung gibt ihr eine Kante, statt sie im Grund
   verschwinden zu lassen — ohne sie als Kasten zu rahmen. */
.event-text a { color: var(--akzent); }
.event-text {
  margin-top: 0.5rem;
  padding: 1.25rem 1.375rem;
  background: rgb(255 255 255 / 3.5%);
  border-radius: var(--r-karte);
  color: var(--tinte-leise);
  line-height: 1.55;
  /* Die Beschreibung kommt als reiner Text aus Clubinio, mit Zeilenumbruechen
     und Emoji. `pre-wrap` erhaelt die Umbrueche, ohne dass dafuer Markup
     aus einem Shopadmin-Feld interpretiert werden muss. */
  white-space: pre-wrap;
  /* Lange Adressen haben keine Trennstelle — ohne das hier laufen sie aus
     dem Kasten heraus und werden am Rand abgeschnitten. `anywhere` statt
     `break-word`, weil es auch in die Mindestbreite einfliesst: Sonst zieht
     ein einziger langer Link den Kasten breiter als den Bildschirm. */
  overflow-wrap: anywhere;
}

.infokasten {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r-karte);
}
.infokasten h2 { font-size: var(--t-h3); margin-bottom: 1.25rem; }
/* Zwei Paare nebeneinander, Beschriftung ueber dem Wert — wie im Original.
   `dt`/`dd` stehen im Markup abwechselnd; das Raster setzt sie deshalb in
   eine eigene Zelle je Paar, indem jedes `dt` eine neue Zeile beginnt. */
.infokasten dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2.5rem;
  margin: 0;
}
@media (min-width: 620px) {
  .infokasten dl { grid-template-columns: 1fr 1fr; }
}
.infopaar dt { margin: 0; }
.infokasten dd {
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0.25rem;
}
.infokasten dt {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.infokasten dd { margin: 0; }

.lounges {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.lounge {
  background: var(--karte);
  border-radius: var(--r-karte);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.lounge img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lounge-text { padding: 1rem 1.125rem 1.25rem; }
.lounge-text h3 { font-size: 1.0625rem; margin-bottom: 0.375rem; }
.lounge-wert { margin: 0; color: var(--tinte-leise); font-size: var(--t-klein); }
.lounge-hinweis {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--tinte-still);
  font-size: var(--t-klein);
}

/* Zentriert mit Pfeil davor — wie im Original. Der Pfeil ist wie bei den
   Knoepfen gezeichnet, nicht gesetzt. */
.zurueck::before {
  content: '';
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6.8l4.6-4.6L10 6l-6 6 6 6 1.4-1.4L6.8 12H19v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6.8l4.6-4.6L10 6l-6 6 6 6 1.4-1.4L6.8 12H19v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zurueck {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zurueck:hover { color: var(--akzent); }

/* ------------------------------------------------------------ Rechtstext -- */

.rechtstext { max-width: 72ch; }
.rechtstext h2 {
  font-size: var(--t-h3);
  margin: 2.5rem 0 0.875rem;
  text-transform: none;
}
.rechtstext h3 {
  font-size: 1.0625rem;
  margin: 1.75rem 0 0.5rem;
  text-transform: none;
}
.rechtstext p, .rechtstext li { color: var(--tinte-leise); }
.rechtstext a { color: var(--akzent); text-decoration: underline; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext address { font-style: normal; margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ Fuss -- */

/* Zwei Spalten wie im Original: links Marke und Rechtslinks, rechts die
   Anfahrt samt Social-Symbolen und dem Clubinio-Zeichen. */
.fuss {
  background: var(--kopf);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.fuss-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .fuss-raster { grid-template-columns: 1.4fr 1fr; }
}

/* Relativ zur Spalte, nicht als feste Pixelzahl — so macht es das
   Original (`width: 24%`). Feste 150px blieben auf dem Telefon gleich
   gross, waehrend die Spalte auf Fensterbreite schrumpfte, und das Zeichen
   nahm dort fast die ganze Breite ein.

   `clamp` statt reiner Prozente: nach unten gedeckelt, damit es auf sehr
   schmalen Geraeten nicht unleserlich klein wird, nach oben, damit es auf
   grossen Fenstern nicht aufblaeht. */
.fuss-logo {
  width: clamp(84px, 24%, 150px);
  margin-bottom: 1.25rem;
}

.fuss p, .fuss li { color: var(--tinte-leise); font-size: var(--t-klein); }
.fuss a:hover { color: var(--akzent); }

/* Impressum und Datenschutz stehen im Original nebeneinander unter dem
   Text, in der Akzentfarbe — keine eigene Spalte mit Ueberschrift. */
.fuss-recht {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.fuss-recht a { color: var(--akzent); }

.fuss-anfahrt h2 {
  font-size: var(--t-klein);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  color: var(--akzent);
}

/* Symbole ohne Rahmen, in der Akzentfarbe — so stehen sie im Original. */
.fuss-social { display: flex; gap: 0.75rem; margin: 1.25rem 0; }
.fuss-social a { color: var(--akzent); }
.fuss-social a:hover { color: var(--tinte); }

.clubinio { display: inline-block; }
.clubinio img { height: 38px; width: auto; }

/* ------------------------------------------------------------- Bewegung -- */

/* **Alles haengt an `html.anim`.** Diese Klasse setzt `assets/js/anim.js`,
   und zwar nur, wenn das Modul wirklich laeuft und `prefers-reduced-motion`
   nicht gesetzt ist. Faellt das Skript aus, bleibt die Klasse weg — und
   damit auch jede Regel, die etwas unsichtbar macht. Die Seite steht dann
   vollstaendig da, nur ohne Bewegung.

   Bewegt wird ausschliesslich `transform` und `opacity`. Beides laeuft im
   Compositor; alles andere (Hoehe, Position, Filter) erzwingt eine
   Neuberechnung des Layouts und ruckelt auf dem Telefon. */

html.anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.75s var(--kurve);
}
html.anim [data-reveal][data-sichtbar='ja'] {
  opacity: 1;
  transform: none;
}

/* Karten laufen versetzt ein, statt als Block aufzutauchen. Die
   Verzoegerung steht je Position im CSS, weil ein Inline-Style unter
   `style-src 'self'` nicht erlaubt waere. */
html.anim .karten [data-reveal]:nth-child(2) { transition-delay: 0.09s; }
html.anim .karten [data-reveal]:nth-child(3) { transition-delay: 0.18s; }
html.anim .karten [data-reveal]:nth-child(4) { transition-delay: 0.27s; }
html.anim .karten [data-reveal]:nth-child(5) { transition-delay: 0.36s; }
html.anim .karten [data-reveal]:nth-child(6) { transition-delay: 0.45s; }

/* Der Flyer zieht beim Darueberfahren leicht an. Die Karte selbst hebt
   schon ab — zusammen wirkt es, als laege das Bild tiefer in der Karte. */
.karte-bild { overflow: hidden; }
.karte-bild img { transition: transform 0.55s var(--kurve); }
.karte:hover .karte-bild img { transform: scale(1.05); }

/* Der Hero laeuft beim Laden auf: Logo, Titel, Knopf nacheinander. Kein
   Scroll-Ausloeser noetig — er steht ohnehin sofort im Bild. */
@keyframes hero-auf {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
html.anim .hero-logo,
html.anim .hero-titel,
html.anim .hero-text .knopf {
  animation: hero-auf 0.9s var(--kurve) both;
}
html.anim .hero-logo        { animation-delay: 0.08s; }
html.anim .hero-titel       { animation-delay: 0.22s; }
html.anim .hero-text .knopf { animation-delay: 0.40s; }

/* ---------------------------------------------------------------- Fehler -- */

.fehlerseite {
  min-height: 70svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 4rem;
}
.fehlerseite .kennzahl {
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 800;
  line-height: 1;
  color: var(--akzent);
}
.knopf-reihe[data-mitte] { justify-content: center; }

/* Der Knopf unter den Eventkarten steht mittig und mit Abstand — ohne das
   klebt er linksbuendig an der Unterkante der ersten Karte. */
#events .knopf-reihe {
  justify-content: center;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}