/* ============================================================================
   Roxy Übach-Palenberg — Design und Layout
   ----------------------------------------------------------------------------
   Übernahme der bestehenden roxy.club (WordPress mit Elementor und den
   Clubinio-Plugins). Alle Maße und Farben sind an der laufenden Seite
   gemessen und stehen in referenz/*.json; tools/abgleich.py vergleicht
   dagegen.

   **Struktur vom System, Marke vom Original.** Die Klassen sind die des
   Systems (cosmopolar-hp ∩ top10-singen-hp: .huelle, .abschnitt*,
   .kopfzeile, .knopf*, .karte*, .seitenkopf*, .form/.feld, .faq, .fuss*).
   Was das System nicht hat, steht unter einem Namen nach seiner Aufgabe
   und ist in docs/README.md als Rückgabe an die Vorlage vermerkt. Die
   Werte des Themes (dasselbe wie atrium-kiel.de) kommen aus der Messung.

   Schwarzer Grund, weiße Schrift, Montserrat Black in Versalien, Akzent
   Rot #f1001c mit Leuchtschatten, runde Knöpfe (15 px) und Karten (20 px).

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

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

/* **Dieselben Dateien wie auf roxy.club** (`/wp-content/uploads/2026/0x/`),
   nicht nur dieselben Familien — eine andere Fassung setzt dieselben
   Wörter messbar anders breit. Siehe assets/fonts/LIZENZEN.md.

   **Gewicht 600 ist Medium.** So legt es das Original an; wer hier eine
   echte SemiBold einsetzt, macht jeden 600er-Text breiter. Fehlende
   Gewichte (Montserrat 800, Poppins 600/800/900) fehlen auch im Original —
   der Browser nimmt dort wie hier den nächsten Schnitt. */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-500.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Inter, Fließtext — Wunsch des Betreibers 31.10. Variable Datei (100–900), Latin. */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

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

:root {
  /* Flächen — gemessen auf roxy.club (referenz/*.json). */
  --nacht:        #000000;   /* Seitengrund */
  --kopf:         #141414;   /* Kopfleiste */
  --menu:         #161616;   /* aufgeklapptes Menü auf dem Telefon */
  --karte:        #111111;   /* Eventkarte */
  --karte-bild:   #0a0a0a;   /* Fläche hinter dem Flyer */
  --fuss:         #0c0c0c;   /* Fußbereich */

  /* **Grundschrift „Titillium, sans-serif" — wie im Original.** Eine
     Datei dafür lädt die bestehende Seite nie; gezeichnet wird also
     `sans-serif`. Derselbe Stapel hier ergibt denselben Ersatz. Sichtbar
     wird das nur an der Standzeile ganz unten; alles andere setzt
     Montserrat oder Poppins ausdrücklich. */
  --schrift-grund:   'Titillium', sans-serif;
  --schrift-display: 'Montserrat', sans-serif;
  --schrift-poppins: 'Poppins', sans-serif;
  /* Fließtext in Inter (Betreiber 31.10.): Absätze, Eventtext, Rechtstexte. */
  --schrift-text:    'Inter', sans-serif;

  --tinte:        #ffffff;
  --tinte-rgb:    255 255 255;
  --tinte-still:  #9a9a9a;   /* Standzeile, Etiketten */

  /* **Akzent `#f1001c`, nicht der Clubinio-Wert `#eb244b`.** Gemessen an
     Navigation, Knöpfen, Kartendatum und Fußlinks — das ist, was ein Gast
     sieht. Der Clubinio-Wert steuert nur die Shop-Widgets. */
  --akzent:       #f1001c;
  --akzent-rgb:   241 0 28;
  --akzent-tinte: #ffffff;

  /* **Zwei Abweichungen vom Original, beide für WCAG AA** (tools/
     kontrast.js; gerechnet gegen den tatsächlich gemalten Grund):
     - Kleine rote Schrift auf den dunklen Flächen (#0a0a0a bis #181818)
       erreicht mit #f1001c nur 4,17–4,43:1. --akzent-text ist derselbe
       Farbton, so wenig aufgehellt wie nötig: mindestens 4,5:1. Große
       Schrift (Menü 20px, Datumszeile 20px, Überschriften) behält das
       Original.
     - Weiß auf #f1001c sind 4,41:1. Die Fläche der Knöpfe ist 3 Stufen
       dunkler (#ee001c): 4,51:1. Linien, Punkte, Balken behalten #f1001c.
     abgleich.py kennt genau diese Paare (FARBTAUSCH). */
  --akzent-text:  #f42e45;
  --akzent-flaeche: #ee001c;
  /* Aktiver Menüpunkt, der auf dem Foto steht (schwebende Kopfzeile wie
     cosmopolar.com): #f42e45 reicht dort auf hellen Bildstellen nicht.
     #ff4655: gemessen ≥ 4,5:1 an den gemalten Pixeln aller Seitenköpfe. */
  --akzent-hell:  #ff4655;
  /* Das eigene Rot des Fotoplugins (#e11d48) als Schrift: 4,11:1 → #e64266. */
  --rot-text:     #e64266;
  --link-text:    #cc3366;

  /* Seitenrand von Kopf und Fuß: 8 % der Breite, unter 1025px 5 %. */
  --rand-kopf:    8%;

  /* Hülle: Breite und Seitenrand. Jeder Abschnitt setzt beides für sich —
     das Original fährt je Abschnitt eigene Spaltenbreiten (1080 im
     „Über uns", 1140 in der Eventliste, volle Breite unter den Karten). */
  --breite:       1160px;
  --gutter:       10px;

  --kurve:        cubic-bezier(0.32, 0.72, 0, 1);

  --ausruf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M7 2h2v7H7zM7 11h2v2H7z'/%3E%3C/svg%3E");
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' 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");
  /* Pfeil der Knöpfe — Pfad des Originals (Font Awesome „long-arrow-alt-right"). */
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E");

  /* Kopfhöhe wie auf cosmopolar.com: 82px, unter 900px 80px. Hero,
     Seitenkopf und Ankersprung rechnen damit — weicht der Wert von der
     tatsächlichen Höhe ab, verschiebt sich der Inhalt um die Differenz. */
  --kopf-hoehe:   82px;
}
@media (max-width: 1024px) { :root { --rand-kopf: 5%; } }
@media (max-width: 899px)  { :root { --kopf-hoehe: 80px; } }

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

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

/* Sicherheitsnetz gegen seitliches Verschieben. `clip`, nicht `hidden`:
   `overflow: hidden` an einem Vorfahren setzt `position: sticky` außer
   Kraft, und die Kopfzeile klebt nicht mehr. */
html, body { overflow-x: clip; }

/* `hidden` muss gewinnen. Der Browser setzt dafür nur `display: none` mit
   schwacher Spezifität — jede eigene display-Regel schlägt es. Genau das
   ist passiert: `.knopf { display: inline-flex }` hat ein `hidden` am
   Lounge-Knopf überstimmt, und der stand auf jeder Eventseite. */
[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-grund);
  /* 16px/24px — gemessen an jedem Container des Originals. */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* Überschriften: Montserrat Black, Versalien. Größe, Zeilenhöhe und
   Sperrung setzt jede Stelle selbst — das Original fährt dafür sechs
   verschiedene Kombinationen, eine gemeinsame Grundgröße träfe keine. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 900;
  text-transform: uppercase;
}

/* Fließtext: Montserrat 15px/22,5px. Abstand 0,9rem wie Elementor — in
   rem, nicht em: bei 14px-Text wären es sonst 12,6 statt 14,4px. */
p {
  margin: 0 0 0.9rem;
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.5;
}
p:last-child { margin-bottom: 0; }

/* Nur für Lesegeräte — 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-flaeche);
  color: var(--akzent-tinte);
  font-weight: 700;
}
.sprung:focus { left: 1rem; top: 1rem; }

.icon { flex: none; }

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

/* Die Hülle begrenzt die Breite und hält den Rand. Breite und Rand sind
   Token, damit jeder Abschnitt seine gemessene Spalte setzen kann, ohne
   die Hülle nachzubauen. */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Schmale Spalte: die Eventseite, 820px wie im Original. */
.huelle-schmal { --breite: 820px; --gutter: 0px; }

/* Abschnitt: 100px oben und unten, wie die Bänder der Startseite. */
.abschnitt {
  position: relative;
  padding-block: 100px;
  isolation: isolate;
}

/* **Variante: Schein.** Ein sehr leiser Schein in der Markenfarbe hinter
   dem Abschnitt — gemessen am „Über uns" und an den Bildbändern. */
.abschnitt--schein::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, rgb(var(--akzent-rgb) / 12%) 0%,
              rgb(var(--akzent-rgb) / 5%) 35%, transparent 75%);
}

/* Eventabschnitt: Clubfoto `cover`, ab 1025px feststehend (Parallaxe des
   Originals), Schleier 0,74 — alles gemessen. Karten und Knopf halten
   100px Rand, auf dem Telefon 30px; die Überschrift läuft über die volle
   Breite. */
.abschnitt-bild {
  --breite: 100%;
  --gutter: 100px;
  background: url('../img/club-grund.webp') center / cover no-repeat;
}
@media (min-width: 1025px) { .abschnitt-bild { background-attachment: fixed; } }
@media (max-width: 767px)  { .abschnitt-bild { --gutter: 30px; } }
.abschnitt-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 74%);
}

/* Abschnittskopf „VISIT US.", „GET THE VIBE.": 50px/45px, Sperrung
   -0,04em (gemessen -2px), über die volle Breite zentriert, 70px Abstand
   darunter. Auf dem Telefon 35px/31,5px und 50px. */
.kopfzeile { margin-bottom: 70px; text-align: center; }
.kopfzeile h2 {
  font-size: 50px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
@media (max-width: 767px) {
  .kopfzeile { margin-bottom: 50px; }
  .kopfzeile h2 { font-size: 35px; }
}
.unterzeile { margin: 0; }

/* Knopfreihe. `data-mitte`: zentriert unter Karten und Bildband, 70px
   Abstand darüber, auf dem Telefon 50px. */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe[data-mitte] { justify-content: center; margin-top: 70px; }
@media (max-width: 767px) { .knopf-reihe[data-mitte] { margin-top: 50px; } }

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

/* Knopf: 12px/24px Polster, Montserrat Black 15px/15px, Rundung 15px,
   roter Schein `0 0 10px rgba(255,0,0,.26)` — alles gemessen (259×39 bei
   „ALLE EVENTS ANSEHEN"). Die Beschriftung steht in Versalien im Markup,
   nicht per text-transform: so im Original.

   **`line-height` nach `font: inherit`.** Die Kurzschrift setzt die
   Zeilenhöhe zurück; davor notiert, wäre der Knopf 6px höher. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 24px;
  border: 0;
  border-radius: 15px;
  background: var(--akzent-flaeche);
  color: var(--akzent-tinte);
  font: inherit;
  font-family: var(--schrift-display);
  line-height: 1;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 0 10px rgb(255 0 0 / 26%);
  cursor: pointer;
  transition: transform 0.25s var(--kurve), filter 0.2s ease;
}
.knopf:hover { filter: brightness(1.1); transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(0.98); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Pfeil am Ende, 15px — als Maske, damit er `currentColor` übernimmt. */
.knopf::after {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}
.knopf-ohne-pfeil::after { content: none; }

/* Zweite Stufe: dunkle Fläche statt Akzent, ohne Schein — Lounge und
   U18-Formular auf den Eventseiten, „Startseite" auf der 404. */
.knopf-leer { background: #242424; box-shadow: none; }

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

/* **Kopf, Menü, Start-Hero und Seitenkopf wie auf cosmopolar.com** —
   optisch, nicht inhaltlich (Betreiber, 31.10.2026). Aufbau, Maße und
   Verhalten aus cosmopolar-hp, Farben, Schriften, Logo und Texte bleiben
   Roxy. Der übrige Abgleich gegen roxy.club bleibt bestehen; diese drei
   Bereiche nimmt tools/abgleich.py benannt aus (ERSETZT).

   Die Zeile steht frei im Bild und bekommt erst beim Scrollen einen Grund
   (`data-fest`, ui.js). **Nur die Farbe ändert sich, nicht die Höhe** — die
   klebende Zeile belegt ihren Platz im Fluss, sonst ruckte alles darunter. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  isolation: isolate;
  transition: background 0.25s ease;
}
.kopf[data-fest='ja'] {
  background: rgb(20 20 20 / 92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Weichzeichner aus, solange das Menü offen ist: `backdrop-filter` erzeugt
   einen umgebenden Block für `position: fixed`, und das Vollbildmenü wäre
   dann nur so hoch wie die Kopfzeile (in cosmopolar-hp so passiert). */
.kopf[data-offen='ja'] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Oben mehr Luft als unten (28 + 8), gescrollt mittig (18 + 18) — die
   Summe bleibt gleich, die Höhe auch. Seitlich so breit wie der Rand neben
   einer 1200px-Spalte, nie unter dem Seitenabstand. */
.kopf-innen {
  --breite: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1.75rem max(clamp(1rem, 4vw, 2.5rem), calc((100% - 1200px) / 2)) 0.5rem;
  transition: padding 0.25s ease;
}
.kopf[data-fest='ja'] .kopf-innen { padding-top: 1.125rem; padding-bottom: 1.125rem; }

/* Logo in der Höhe von cosmopolar.com (46px, Telefon 34px). Die Roxy-Wortmarke
   ist 4:1 breit — dieselbe Höhe, nicht dieselbe Breite. */
.logo { display: flex; align-items: center; }
.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;
  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 Balkenhöhe 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;
}
@media (min-width: 900px) { .menu li { display: flex; align-items: center; } }

/* Montserrat Black 16px, Versalien, leicht gesperrt. Keine Unterstreichung
   — der aktive Punkt ist eingefärbt, das genügt als Signal. Die Farbe ist
   die Textvariante des Akzents: 16px zählt als kleine Schrift. */
.menu a {
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* 1,7 wie die Grundzeile von cosmopolar.com (dort 25,5/15). */
  line-height: 1.7;
  padding-block: 0.5rem;
  transition: color 0.15s ease;
}
.menu a:hover,
.menu a[aria-current='page'] { color: var(--akzent-hell); }

/* Der Menüfuß gehört nur ins aufgeklappte Menü auf schmalen Geräten. */
.menu-fuss { display: none; }

/* Schmale Geräte: das Menü füllt den Bildschirm, Punkte groß und mittig,
   darunter Anschrift, E-Mail und Symbole. Aufblenden statt Einschieben. */
@media (max-width: 899px) {
  .kopf[data-offen='ja'] { background: var(--kopf); }

  .menu {
    position: fixed;
    inset: var(--kopf-hoehe) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem clamp(1rem, 4vw, 2.5rem) 3rem;
    overflow-y: auto;
    background: var(--kopf);
    /* Ein sehr leiser Schein in der Markenfarbe nimmt der Fläche das
       Tafelhafte, ohne sie einzufärben. */
    background-image: radial-gradient(70% 40% at 50% 0%, rgb(var(--akzent-rgb) / 7%), transparent 70%);
    opacity: 0;
    transform: scale(1.03);
    /* Geschlossen auch für Tastatur und Lesegerät weg. */
    visibility: hidden;
    transition: opacity 0.28s ease, transform 0.35s var(--kurve), visibility 0.28s ease;
  }
  .kopf[data-offen='ja'] .menu { opacity: 1; transform: none; visibility: visible; }

  /* Abstand deutlich enger als die Vorlage (1,5rem) — Betreiber 31.10. */
  .menu ul { flex: none; flex-direction: column; align-items: center; gap: 0.25rem; }
  /* Block, nicht Flex: Als Flex-Element würde der Verweis zum Block samt
     Polster (58 statt 47,6px je Punkt, gegen cosmopolar.com gemessen). */
  .menu li { display: block; text-align: center; }
  .menu a { font-size: clamp(1.75rem, 7vw, 2.25rem); letter-spacing: -0.01em; }
  /* Ab 24px große Schrift — dort trägt das Originalrot. */
  .menu a:hover,
  .menu a[aria-current='page'] { color: var(--akzent); }

  .menu-fuss {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    margin-top: 2.5rem;
    text-align: center;
  }
  .menu-fuss p { margin: 0; font-size: 14px; color: var(--tinte-still); }
  .menu-fuss a { font-size: 14px; color: #b4b4b4; }
  .menu-fuss .fuss-social { justify-content: center; margin-top: 0.75rem; }

  /* Die Punkte laufen nacheinander ein. Die Verzögerung 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; }

  @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 -- */

/* Wie auf cosmopolar.com: feste Höhe, die mit dem Fenster wächst (keine
   vh — sonst springt sie auf dem Telefon mit der Adressleiste), unter die
   schwebende Kopfzeile geschoben, Verlaufsschleier oben und unten dunkler. */
.hero {
  position: relative;
  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;
}
/* Das Bild als Hintergrund des Medienfelds: auf dem Schreibtisch das
   Clubfoto, auf dem Telefon das Hochformat. */
.hero-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../img/hero.webp') center / cover no-repeat;
}
@media (max-width: 767px) {
  .hero-medium { background-image: url('../img/hero-mobil.webp'); }
}
.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 {
  --breite: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  position: relative;
  z-index: 2;
  padding-top: var(--kopf-hoehe);
}
/* Logo über der Zeile. **Bewusst nicht wie cosmopolar.com:** Dort steht ein
   fast quadratisches Zeichen, 100 / 220 / 112px hoch bei 1440 / 768 /
   390 (gemessen). Die Roxy-Wortmarke ist 4:1 — in derselben Höhe wäre sie
   auf dem Telefon 448px breit. Sie bleibt deshalb 44–72px hoch; die Zeile
   darunter steht dadurch 9–83px höher als dort. */
.hero-logo { display: block; margin: 0 auto 1rem; }
.hero-logo img { width: auto; height: clamp(44px, 6vw, 72px); margin-inline: auto; }
.hero-titel {
  margin: 0 0 1.25rem;
  font-size: clamp(2.75rem, 9vw, 5.3125rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-titel span { display: block; }
/* Der Knopf als Pille wie dort, knapper als die übrigen. Fläche und Schrift
   bleiben Roxy (Weiß auf Rot, AA). */
.hero-text .knopf {
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--akzent-flaeche);
  border-radius: 980px;
  font-size: 0.8125rem;
  font-weight: 800;
  /* 1,7 wie dort geerbt (46px hoch, nicht 37). */
  line-height: 1.7;
  letter-spacing: 0.01em;
  box-shadow: none;
}
.hero-text .knopf::after { width: 1em; height: 1em; }

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

/* Zwei gleiche Spalten, 60px Abstand, höchstens 1080px — Text links,
   Bildstrecke rechts, senkrecht mittig. 80px oben und unten, 30px seitlich. */
#ueber { padding-block: 80px; }
.ueber {
  --breite: 1140px;
  --gutter: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 767px) { .ueber { grid-template-columns: 1fr; } }

.ueber-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.ueber-text > * { width: 100%; }
.ueber-text h2 {
  font-size: 50px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
@media (max-width: 767px) { .ueber-text h2 { font-size: 35px; } }
.ueber-text p { text-align: justify; }
.ueber-text strong { font-weight: 700; }

/* **Neu: Trennbalken.** Schiene 6px mit 8 % Weiß, darauf der Akzent auf
   38 % der Breite mit Leuchtschatten — nachgemessen am Original. */
.trenner {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--tinte-rgb) / 8%);
}
.trenner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 999px;
  background: var(--akzent);
  box-shadow: 0 0 12px rgb(var(--akzent-rgb) / 50%), 0 0 30px rgb(var(--akzent-rgb) / 20%);
}

/* Bildstrecke neben dem Text: Rundung 28px, tiefer Schatten, unten ein
   Verlauf nach Schwarz (unteres Viertel, 0,42). */
.ueber .slider::after {
  content: '';
  position: absolute;
  inset: auto 0 29px;
  height: 28%;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(to top, rgb(0 0 0 / 42%), transparent);
  pointer-events: none;
}
.ueber .slider-band img {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}

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

/* Drei Spalten, 20px Abstand; auf dem Telefon eine. */
.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 767px) { .karten { grid-template-columns: 1fr; } }

/* Karte: #111, Rundung 20, Flyer 16:9 auf #0a0a0a — das Bild darin in
   natürlichem Verhältnis, nicht beschnitten. Der Verweis erbt im Original
   Poppins 16/24 vom Plugin-Stylesheet. */
.karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--karte);
  font-family: var(--schrift-poppins);
  font-size: 16px;
  line-height: 1.5;
}
.karte-bild { aspect-ratio: 16 / 9; background: var(--karte-bild); }
.karte-bild img { width: 100%; height: auto; }

/* Textblock: Datum, 10px, Titel — Polster 22/24. */
.karte-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 0;
}
.karte-termin {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--akzent-text);
}
/* Titel: 27px/1,25, höchstens zwei Zeilen mit Auslassung, immer zwei
   Zeilen hoch — so stehen „Mehr erfahren" und die Kartenunterkante einer
   Reihe auf einer Linie. 22px auf dem Telefon. */
.karte-titel {
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.5em;
}
@media (max-width: 767px) { .karte-titel { font-size: 22px; } }

/* Der Abschnitt unten. Im System eine Perforation — das Original hat
   keine; hier nur 10px Abstand, 24px Polster. Die 18px über der Zeile
   trägt die Zeile selbst, so wie die Messung sie sieht. */
.karte-abriss { margin: 0; padding: 10px 24px 24px; }
/* „MEHR ERFAHREN" in Poppins — verlangt ist 900, geladen ist 700 (wie im
   Original). */
.karte-infos {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  font-family: var(--schrift-poppins);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

/* Leerzustand (keine Termine, keine Alben, Formular aus) — Systemregel.
   Das Original zeigt nie einen, gemessen werden kann er nicht. */
.leer {
  color: var(--tinte-still);
  text-align: center;
  padding-block: 3rem;
}

/* Monatsüberschrift der Eventliste: 32px, 800, zentriert. */
.monat {
  margin: 40px 0 20px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1px;
  text-align: center;
}
.monat:first-child { margin-top: 0; }

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

/* Wie viele Folien gleichzeitig zu sehen sind, sagt `data-zeigen`
   (slider.js setzt die Folienbreite). Punkte 6px, Abstand 12px, Akzent;
   der aktive weiß. Punktreihe 24px hoch, 8px unter dem Bild. Pfeile 25px
   in Akzentfarbe, 10px vom Rand. Alles gemessen.

   `touch-action: pan-y` gibt das senkrechte Scrollen an die Seite weiter
   und behält die waagerechte Geste für das Blättern. 5px unter der
   Punktreihe als Polster, nicht als Rand: Ein Rand fiele mit dem des
   Knopfes darunter zusammen. */
.slider { position: relative; padding-bottom: 5px; }
.slider-spur {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.slider-band { display: flex; }
.slider-band > figure { margin: 0; flex: 0 0 100%; }
.slider-band img { width: 100%; height: auto; object-fit: cover; }

.slider-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--akzent);
  cursor: pointer;
}
.slider-pfeil svg { width: 25px; height: 25px; }
.slider-rueck { left: 10px; }
.slider-vor { right: 10px; }

.slider-punkte {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  margin-top: 8px;
}
.slider-punkt {
  width: 6px;
  height: 6px;
  margin: 0 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--akzent);
  cursor: pointer;
}
.slider-punkt[aria-current='true'] { background: var(--tinte); }

/* Randloses Band: ohne Rundung, Kante an Kante, jedes Bild in seinem
   eigenen Verhältnis (4:5 und 2:3 gemischt). Das Band ist so hoch wie das
   höchste Bild, die Folien stehen oben — so misst es das Original (720px
   bei 1440, obwohl die sichtbaren drei 600px hoch sind). */
.slider-randlos .slider-band { align-items: flex-start; }
/* **Variante: Querformat** („THE ROXY.") — dieselbe Strecke mit Bildern
   im Verhältnis der Dateien (1270×720). */
.slider--quer .slider-band img { aspect-ratio: 1270 / 720; }

/* Die Bänder der Startseite: Überschrift 50px über dem Band, Knopf 20px
   unter den Punkten. */
#fotos .kopfzeile,
#club .kopfzeile { margin-bottom: 50px; }
#fotos .knopf-reihe[data-mitte] { margin-top: 20px; }

/* ------------------------------------------------------------ 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: 20px;
}
.lb-zaehler {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--tinte-still);
  font-size: 14px;
}
.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; }
/* **Neu: „Foto melden"** neben dem Schließen-Knopf (Plugin clubinio-fotos). */
.lb-melden { top: 1rem; right: calc(1rem + 56px); }
.lb-knopf[hidden] { display: none; }
.lb-rueck { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lb-vor   { right: 1rem; top: 50%; transform: translateY(-50%); }

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

/* Wie auf cosmopolar.com: Höhe wächst mit der Breite (320–460px), der
   Banner läuft unter die schwebende Kopfzeile — negativer Rand und Polster
   gehören zusammen —, gleichmäßiger Schleier 58 %, unten eine feine Linie.
   Auf dem Telefon ein festes Seitenverhältnis 3:2 statt Mindesthöhe. */
.seitenkopf {
  min-height: clamp(320px, 34vw, 460px);
  display: grid;
  align-content: center;
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem)) 0 clamp(2.5rem, 7vw, 4rem);
  /* `background-color`, nicht die Kurzschreibweise: Sie setzte
     `background-size: cover` aus .seitenkopf-bild zurück. */
  background-color: #181818;
  border-bottom: 1px solid #2a2a2a;
  text-align: center;
}
.seitenkopf .huelle { --breite: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); }
.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;
  /* 58 % wie cosmopolar.com, oben hinter der Kopfzeile 75 %: Dort steht das
     Menü direkt auf dem Foto, und der aktive Punkt in Rot (16px) kam auf
     /jobs/ und /kontakt/ nur auf 4,30 bzw. 3,49:1 (tools/bildkontrast.js).
     cosmopolar.com dunkelt im Start-Hero oben ebenso ab (55 %). Allein reicht
     das nicht (bei 90 % noch 4,47:1) — dazu --akzent-hell am Menü. */
  background: linear-gradient(180deg, rgb(0 0 0 / 75%) 0, rgb(0 0 0 / 58%) 160px);
}
.seitenkopf[data-banner='events']  { background-image: url('../img/banner/events.webp'); }
.seitenkopf[data-banner='fotos']   { background-image: url('../img/banner/fotos.webp'); }
.seitenkopf[data-banner='jobs']    { background-image: url('../img/banner/jobs.webp'); }
.seitenkopf[data-banner='kontakt'] { background-image: url('../img/club-grund.webp'); }
.seitenkopf h1 {
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
}
/* Unterzeile im Akzent, 15–18px, 1rem unter der Zeile.

   **Abweichung, für WCAG AA:** Rot direkt auf dem Foto hat an den
   gemalten Pixeln weniger als 4,5:1 (tools/bildkontrast.js). Deshalb ein
   schmaler Grund aus 92 % Schwarz nur hinter dem Text. Rückbau: die drei
   Zeilen ab `display` streichen. */
.seitenkopf .unterzeile {
  display: table;
  margin: 1rem auto 0;
  padding: 0 8px;
  border-radius: 4px;
  background: rgb(0 0 0 / 92%);
  font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--akzent-text);
}
.seitenkopf[data-banner='events'] .unterzeile { font-family: var(--schrift-poppins); }
@media (max-width: 759px) {
  .seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------ Eventliste -- */

/* Monatsgruppen in einer Spalte von höchstens 1140px, 10px Rand. 75px
   unter dem Seitenkopf, 80px bis zum Fuß. */
.seite-events .abschnitt { padding: 75px 0 80px; }
.seite-events .karte { font-size: 15px; }
/* 20px fett zählt als große Schrift — dort trägt die Originalfarbe. */
.seite-events .karte-termin { font-size: 20px; color: var(--akzent); }
.seite-events .karte-titel { font-size: 26px; }
@media (max-width: 1024px) { .seite-events .karte-titel { font-size: 21px; } }
@media (max-width: 767px)  { .seite-events .karte-titel { font-size: 24px; } }

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

/* Kontaktseite: zwei gleich breite Spalten mit 20px Abstand in höchstens
   1120px, auf dem Telefon untereinander. Ohne FAQ (Clubinio führt derzeit
   keine) steht das Formular allein in der Mitte. */
.seite-kontakt .abschnitt { padding: 45px 0 39px; }
.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
/* Untereinander 49px zwischen FAQ und Formular — gemessen. */
@media (max-width: 767px) { .kontakt-raster { grid-template-columns: 1fr; row-gap: 49px; } }
.kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.kontakt-raster > div { display: flex; flex-direction: column; gap: 20px; }
.kontakt-raster h2 { font-size: 32px; line-height: 1; text-transform: none; }

/* Aufklapper wie das Elementor-Akkordeon des Originals — `<details>`
   wie dort, ohne JavaScript bedienbar. Höchstens 450px breit, Linie 8 %
   Weiß unter jedem Eintrag. Zeile 64px: Polster 18/4, Symbol (Plus oder
   Minus, Font Awesome, 18px in einem 28px-Kasten, 16px eingerückt), 10px,
   Frage in Montserrat 15/20,25 mit 88 % Weiß. Offen: 8px mehr Polster
   links, ein Verlauf im Akzent und ein 3px-Balken mit Schein. Die Antwort
   in Montserrat 15/25,5 mit 64 % Weiß, Absätze 15px auseinander. */
/* Die Liste lässt rechts 100px frei (450 von 550, 254 von 354) — auf dem
   Telefon nicht. */
#faq [data-faqs] { margin-right: 100px; }
.faq { border-bottom: 1px solid rgb(255 255 255 / 8%); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 10px;
  padding: 18px 4px;
  font-family: var(--schrift-display);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  /* Die Zeile trägt #1f2124 wie im Original, sichtbar ist die Frage. */
  color: #1f2124;
  list-style: none;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: rgb(255 255 255 / 88%); }
.faq summary::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin: 5px 5px 5px 21px;
  background: var(--akzent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%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 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq[open] summary {
  padding-left: 12px;
  background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 9%) 0%, rgb(var(--akzent-rgb) / 2.5%) 55%, rgb(0 0 0 / 0%) 100%);
}
.faq[open] summary::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
}
.faq[open] summary::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 3px;
  height: 28px;
  border-radius: 99px;
  background: var(--akzent);
  box-shadow: 0 0 14px rgb(var(--akzent-rgb) / 30%);
}
/* Geschlossen ausdrücklich `display: none` wie im Original: Chrome legt
   den Inhalt geschlossener <details> sonst trotzdem aus und meldet Maße,
   die niemand sieht — der Abgleich zählte sie mit. */
.faq:not([open]) .faq-text { display: none; }
.faq-text {
  padding: 0 12px 24px 16px;
  color: rgb(255 255 255 / 64%);
  background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 3.5%), rgb(0 0 0 / 0%) 75%);
}
.faq-text p {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.012em;
  color: rgb(255 255 255 / 64%);
  overflow-wrap: anywhere;
}
.faq-text p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .faq summary { padding-block: 16px; } }
/* Telefon: Liste über die volle Spalte, knapperes Polster, Symbol 6px
   eingerückt, Antwort mit Zeilenhöhe 1,65. */
@media (max-width: 767px) {
  #faq [data-faqs] { margin-right: 0; }
  .faq summary { padding: 15px 2px; }
  .faq[open] summary { padding-left: 7px; }
  /* Symbol 15px im 24px-Kasten, 10px eingerückt — gemessen. Die Zeile
     ist trotzdem 26px hoch (Eintrag 57px); das Polster des Symbols
     trägt die 2px. */
  .faq summary::before { width: 15px; height: 15px; margin: 5.5px 4.5px 5.5px 14.5px; }
  .faq-text { padding: 0 6px 20px 8px; }
  .faq-text p { line-height: 1.65; }
}

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

/* Formular wie das Clubinio-Plugin der bestehenden Seite — gemessen auf
   /jobs/ und /kontakt/: Rahmen 1px #262b36, Rundung 16, Polster 32 (Telefon
   24/20), Poppins als Grundschrift, Etiketten Montserrat Medium 13,6px in
   #cfd6e0, Felder 8 % Weiß ohne Rahmen mit Rundung 15. */
.form {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 1px solid #262b36;
  border-radius: 16px;
  /* Unsichtbar, steht aber so am Formular des Plugins. */
  background: rgb(2 1 1 / 0%);
  font-family: var(--schrift-poppins);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 767px) { .form { padding: 24px 20px; } }
.form > h2 {
  font-size: 25.6px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--akzent);
}
.form-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}
@media (max-width: 767px) { .form-reihe { grid-template-columns: 1fr; } }

.feld { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld > span,
.feld legend {
  display: block;
  padding: 0;
  font-family: var(--schrift-display);
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  color: #cfd6e0;
}
.feld-pflicht { font-style: normal; color: #f43f5e; }

/* `line-height` nach `font: inherit` — die Kurzschrift setzt sie zurück. */
.feld input:not([type='checkbox']):not([type='file']),
.feld textarea {
  display: block;
  width: 100%;
  /* Kein Rahmen; die Farbe steht trotzdem wie im Original (#666, an der
     Textfläche #333a47). */
  border: none;
  border-color: #666666;
  border-radius: 15px;
  background: rgb(255 255 255 / 8%);
  color: var(--tinte);
  font: inherit;
  font-family: var(--schrift-display);
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 16px;
}
.feld textarea { padding: 12px 14px; min-height: 135px; resize: vertical; border-color: #333a47; }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; }
.feld textarea::placeholder { color: rgb(255 255 255 / 45%); }

/* Dateifeld: Der Knopf darin trägt Polster und Rahmen — so ist das Feld
   wie im Original 39px hoch statt der 21px des Browserknopfs. */
.feld input[type='file'] {
  display: block;
  width: 100%;
  font-family: var(--schrift-poppins);
  font-size: 14.08px;
  line-height: 1.5;
  color: #cfd6e0;
}
.feld input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid #2f3644;
  border-radius: 10px;
  background: rgb(255 255 255 / 6%);
  color: #cfd6e0;
  font: inherit;
  cursor: pointer;
}

/* Ankreuzfelder (Stellen) untereinander, 9px Abstand zum Text. */
.auswahl { display: flex; flex-direction: column; gap: 8px; }
.auswahl label,
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.auswahl label {
  font-family: var(--schrift-poppins);
  font-size: 14.72px;
  line-height: 1.4;
  color: #cfd6e0;
}
.auswahl input { margin: 2px 0 0; accent-color: var(--akzent); }
.zustimmung {
  font-family: var(--schrift-display);
  font-size: 12.8px;
  line-height: 1.45;
  color: #9aa6b5;
}
.zustimmung input { margin: 3px 0 0; accent-color: var(--akzent); }

/* Absendeknopf über die volle Breite, Rundung 10, ohne Pfeil. */
.form > .knopf-reihe .knopf {
  width: 100%;
  padding: 14px 30px;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  box-shadow: none;
}
.form > .knopf-reihe .knopf::after { content: none; }

/* Felder des Kontaktformulars: anders als bei der Bewerbung — 2,4 % Weiß,
   Rahmen 9 % Weiß, Rundung 13, 52px hoch (Telefon 50px, Schrift 16px). */
.seite-kontakt .feld input:not([type='checkbox']),
.seite-kontakt .feld textarea {
  padding: 13px 16px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 13px;
  background: rgb(255 255 255 / 2.4%);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.seite-kontakt .feld input:not([type='checkbox']) { min-height: 52px; }
.seite-kontakt .feld textarea { min-height: 145px; }
.seite-kontakt .zustimmung { color: var(--tinte); }
@media (max-width: 767px) {
  .seite-kontakt .feld input:not([type='checkbox']),
  .seite-kontakt .feld textarea { font-size: 16px; padding: 12px 14px; line-height: 1.5; }
  .seite-kontakt .feld input:not([type='checkbox']) { min-height: 0; }
  .seite-kontakt .feld textarea { min-height: 138px; }
}

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

/* **Die Rückmeldung ist ein Kasten, keine Textzeile.** Rot ist hier die
   Akzentfarbe und zugleich die Fehlerfarbe — eine Erfolgsmeldung in
   derselben roten Zeile wie „Bitte stimme … zu" wäre übersehbar oder
   beunruhigend. Im Ruhezustand nimmt die Meldung keinen Platz ein. */
.rueckmeldung { margin: 0; font-size: 14px; }
.rueckmeldung:empty { display: none; }
.rueckmeldung[data-state='ok'],
.rueckmeldung[data-state='fehler'] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: center;
  padding: 1.125rem 1.25rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
}
/* Das Zeichen als ::before, damit es nicht vorgelesen wird. */
.rueckmeldung[data-state='ok']::before,
.rueckmeldung[data-state='fehler']::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
}
/* Grün, nicht in der Akzentfarbe: Das Rot ist schon der Fehlerfall. */
.rueckmeldung[data-state='ok'] {
  background: rgb(46 125 50 / 18%);
  box-shadow: inset 0 0 0 1px #2e7d32;
  color: var(--tinte);
  font-weight: 500;
}
.rueckmeldung[data-state='ok']::before {
  background-color: #2e7d32;
  background-image: var(--haken);
}
.rueckmeldung[data-state='fehler'] {
  background: rgb(var(--akzent-rgb) / 16%);
  box-shadow: inset 0 0 0 1px var(--akzent);
  color: var(--tinte);
}
.rueckmeldung[data-state='fehler']::before {
  background-color: var(--akzent);
  background-image: var(--ausruf);
}
.rueckmeldung[data-state='laeuft'] { color: var(--tinte-still); }

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

/* Ansprache und Formular in einer Spalte von 1120px, 45px unter dem Kopf. */
/* Spalte 1140px mit 10px Rand (1120px Inhalt) — wie die Kontaktseite. */
.seite-jobs .abschnitt .huelle,
.seite-kontakt .abschnitt .huelle { --breite: 1140px; }
.seite-jobs .abschnitt { padding: 45px 0 70px; }
@media (max-width: 1024px) { .seite-jobs .abschnitt .huelle, .seite-kontakt .abschnitt .huelle { --gutter: 20px; } }
.jobs-ansprache { margin-bottom: 19px; }
.jobs-intro { font-weight: 700; }
@media (max-width: 767px) { .jobs-ansprache p { font-size: 14px; } }

/* ---------------------------------------------------------------- Fotos -- */

/* Albenliste: Spalte höchstens 1140px, 10px Rand, 35px unter dem
   Seitenkopf. Drei Spalten mit 30px Abstand, unter 1025px eine. */
.seite-fotos .abschnitt { padding: 35px 0 60px; }
@media (max-width: 1024px) { .seite-fotos .abschnitt { padding-bottom: 160px; } }
.alben-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
@media (max-width: 1024px) { .alben-raster { grid-template-columns: 1fr; } }

/* Karte wie im Plugin des Originals: #0e0e0e, Rundung 14, Deckblatt 4:5
   auf #222, darunter 5px-Kante. Kante und Datumszeile im Seitenakzent,
   nicht im Plugin-Rot #e11d48 des Originals (Betreiber 31.10.). */
.album-karte {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #0e0e0e;
  font-family: var(--schrift-poppins);
  font-size: 15px;
  line-height: 1.5;
}
.album-bild { aspect-ratio: 4 / 5; background: #222; }
.album-bild img { width: 100%; height: 100%; object-fit: cover; }
.album-text {
  padding: 16px 18px;
  border-left: 5px solid var(--akzent);
}
.album-zeile {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.album-titel {
  margin-bottom: 8px;
  font-family: var(--schrift-poppins);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}
.album-ort {
  display: inline-block;
  font-weight: 700;
  color: #c9d2de;
}

/* Albumseite: Titel Poppins (verlangt 900, geladen 700), Angaben mit
   Symbolen, darunter die Bilder in CSS-Spalten — 4, unter 1025px 3, 15px
   Abstand, Rundung 8. */
.seite-album .abschnitt { padding: 25px 0 0; font-family: var(--schrift-poppins); }
/* Unter dem Kopf eine 2px-Linie wie im Fotoplugin des Originals — dort
   #f0f0f0, hier im Akzent (Betreiber 31.10.). */
.seite-album .kopfzeile { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid var(--akzent); }
.seite-album .kopfzeile h1 {
  margin: 8px 0 20px;
  font-family: var(--schrift-poppins);
  font-size: 40px;
  line-height: 1.2;
  text-transform: none;
}
.seite-album .unterzeile {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-family: var(--schrift-poppins);
  font-size: 15.2px;
  line-height: 1.5;
}
.seite-album .unterzeile span { display: flex; align-items: center; gap: 5px; }
.seite-album .unterzeile .icon { width: 18px; height: 18px; color: var(--akzent); }
@media (max-width: 1024px) {
  .seite-album .abschnitt .huelle { --gutter: 0px; }
  .seite-album .kopfzeile h1 { font-size: 32px; }
  .seite-album .unterzeile { flex-direction: column; gap: 10px; }
  .seite-album .unterzeile span { justify-content: center; }
}
@media (max-width: 767px) {
  .seite-album .abschnitt .huelle { --gutter: 10px; }
  .seite-album .abschnitt { padding-bottom: 25px; }
  .seite-album .kopfzeile h1 { font-size: 24px; }
}

.fotoraster {
  margin-block: 50px;
  column-count: 4;
  column-gap: 15px;
}
@media (max-width: 1024px) { .fotoraster { column-count: 3; } }
.fotoraster figure {
  position: relative;
  margin: 0 0 15px;
  overflow: hidden;
  border-radius: 8px;
  background: #171a21;
  break-inside: avoid;
  cursor: zoom-in;
}
@media (max-width: 767px) { .fotoraster figure { margin-bottom: 10px; } }
.fotoraster img { width: 100%; height: auto; }
.fotoraster figure:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* „Foto melden" steht nur in der Lightbox (.lb-melden), nicht auf jeder
   Vorschau — Betreiber 31.10. */


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

/* Grund #0f0f0f über den ganzen Inhalt, Spalte höchstens 820px, 20px
   Rand, 40px oben, 87px unten — gemessen. */
.seite-event main { background: #0f0f0f; padding-inline: 20px; }
.seite-event .abschnitt { padding: 40px 0 87px; }
.event-flyer { width: 100%; height: auto; border-radius: 16px; }

/* Knöpfe untereinander, 10px eingerückt, 10px Abstand, 36px unter dem
   Flyer. 50px hoch, Rundung 10, Montserrat Black 14px mit 1px Sperrung;
   Tickets in Akzentfarbe, die anderen #242424. Symbol 14px, 10px davor. */
.event .knopf-reihe {
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
  padding-inline: 10px;
}
.event .knopf-reihe .knopf {
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 18px 24px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform 0.3s;
}
.event .knopf-reihe .knopf::after { content: none; }
/* Eventknöpfe „schweben" beim Überfahren (Elementor-Hover „float"). */
.event .knopf-reihe .knopf:hover { transform: translateY(-8px); filter: none; }
.event .knopf .icon { width: 14px; height: 14px; }

/* Datumszeile: „SA 31.OKT • 22:00 UHR", Montserrat Bold 20px, 46px unter
   den Knöpfen. Der Punkt dazwischen steht in Poppins 13px. */
.event-datum {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 46px;
  font-family: var(--schrift-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--akzent);
}
.event-datum span[aria-hidden] {
  color: var(--akzent-text);
  font-family: var(--schrift-poppins);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}
.event h1 {
  margin-top: 26px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
}
@media (max-width: 1024px) { .event h1 { font-size: 32px; } }
@media (max-width: 767px)  { .event h1 { font-size: 26px; } }

/* Beschreibung: ein Block mit <br>, 15px/27px in #ccc — Schrift Inter und
   Verweise im Akzent statt Montserrat/Linkfarbe (Betreiber 31.10.). */
.event-text {
  margin-top: 26px;
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 27px;
  color: #cccccc;
}
/* **Neu: Emoji-Kasten.** Im Original ein 1em-Bild mit 0,07em Rand je Seite
   (WordPress). Hier das Zeichen der Systemschrift in einem Kasten
   derselben Breite — so bricht der Text an denselben Stellen um. */
.event-text .emoji {
  display: inline-block;
  width: 1em;
  margin: 0 0.07em;
  text-align: center;
  line-height: 1;
  vertical-align: -0.1em;
}
.event-text a {
  /* Verweise in der Akzentfarbe (Betreiber 31.10.); die Textstufe für AA
     auf #0f0f0f. */
  color: var(--akzent-text);
  overflow-wrap: anywhere;
}

/* Infokasten: Rahmen #262626, Rundung 14, Grund #181818. Die Paare in zwei
   Spalten zu 47 %, Etikett 11px in Grau, Wert 15px 800. */
.infokasten {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 26px;
  padding: 24px;
  border: 1px solid #262626;
  border-radius: 14px;
  background: #181818;
}
.infokasten h2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}
.infokasten dl {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 10px;
}
.infopaar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 47%;
  padding: 10px;
}
@media (max-width: 767px) { .infopaar { width: 100%; } }
.infopaar dt {
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.infopaar dd { margin: 0; }
.infopaar dd span {
  display: block;
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
/* „Einlass" steht im Original als einziges Etikett in Poppins. */
.infopaar:nth-child(3) dt { font-family: var(--schrift-poppins); }
.infopaar dd small {
  display: block;
  margin-top: 3px;
  font-family: var(--schrift-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  color: var(--tinte-still);
}

/* Newsletter-Kasten der Eventseite, dann „Zurück": grau, Montserrat Black
   13px, Pfeil davor, mittig, 26px unter dem Kasten. */
.event .newsletter { margin-top: 26px; }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px auto 0;
  padding-top: 20px;
  font-family: var(--schrift-display);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinte-still);
  border-radius: 3px;
}
.event > .zurueck { display: flex; width: max-content; }
.zurueck .icon { width: 13px; height: 13px; }
.zurueck:hover { color: var(--tinte); }

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

/* Impressum und Datenschutz wie der Clubinio-Rechtsbaustein des Originals:
   Spalte halb so breit wie das Fenster (700px bei 1440), 50px unter dem
   Kopf; Titel 32px in Akzentfarbe, 20px darunter die Abschnitte (32px
   Abstand); Zwischenüberschrift 14px fett, 7px darüber zum Text; Text
   14px/21px; Verweise in Poppins. Auf dem Telefon volle Breite, 20px Rand. */
.seite-recht .abschnitt { padding: 50px 0 49px; }
.rechtstext { --breite: 50%; --gutter: 10px; }
@media (max-width: 767px) { .rechtstext { --breite: 100%; --gutter: 20px; } }
.rechtstext h1 {
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--akzent);
}
.rechtstext section { margin-bottom: 32px; }
.rechtstext section:last-child { margin-bottom: 0; }
.rechtstext h2 {
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}
/* Absatzabstand 14px — der Rechtsbaustein rechnet in px, nicht wie
   Elementor in rem. */
.rechtstext p { margin-bottom: 14px; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext p,
.rechtstext li {
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 1.5;
}
.rechtstext ul { margin: 0 0 0.9rem; padding-left: 20px; }
.rechtstext li + li { margin-top: 0.3rem; }
.rechtstext a { font-family: var(--schrift-poppins); color: var(--akzent); }
.rechtstext a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Newsletter -- */

/* **Neu: Newsletter** wie das Clubinio-Plugin der bestehenden Seite. Im
   Fuß: Feld und Knopf als eine Pille (Feld #12151c, Knopf in Akzentfarbe),
   darunter die Einwilligung 11,5px. */
.newsletter .form {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.newsletter-zeile {
  display: flex;
  max-width: 460px;
  height: 48px;
  overflow: hidden;
  border: 1px solid #2a2f3a;
  border-radius: 999px;
  background: #12151c;
}
.newsletter-zeile input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-family: var(--schrift-display);
  font-size: 15px;
  line-height: 1.5;
}
.newsletter-zeile input::placeholder { color: rgb(255 255 255 / 45%); }
.newsletter-zeile input:focus { outline: none; }
.newsletter-zeile:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.newsletter-zeile .knopf {
  padding: 12px 22px;
  border-radius: 3px;
  font-size: 13.6px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  box-shadow: none;
}
.newsletter .zustimmung {
  max-width: 460px;
  margin-top: 9px;
  font-size: 11.52px;
  color: var(--tinte);
}
.newsletter .rueckmeldung { margin-top: 12px; max-width: 460px; }

/* Als eigener Kasten (/newsletter/ und Eventseite), gemessen am Plugin:
   #111, Rundung 22, Polster 80/40, mittig. Darüber das Foto mit 40 %
   Deckung und ein Verlauf 0,55 → 0,85 (#0a0b0e). Das Original legt Foto
   und Verlauf als zwei leere <span> hinein; hier sind es Hintergrund-
   schichten desselben Kastens — der 60-%-Schleier in #111 über dem Foto
   ergibt rechnerisch dasselbe wie das Foto mit 40 % über #111. */
.newsletter-kasten {
  overflow: hidden;
  padding: 80px 40px;
  border-radius: 22px;
  background:
    linear-gradient(rgb(10 11 14 / 55%), rgb(10 11 14 / 85%)),
    linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)),
    url('../img/newsletter-grund.webp') center / cover no-repeat,
    #111111;
  text-align: center;
}
.seite-event .newsletter-kasten {
  background:
    linear-gradient(rgb(10 11 14 / 55%), rgb(10 11 14 / 85%)),
    linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)),
    url('../img/club-grund.webp') center / cover no-repeat,
    #111111;
}
/* Überschrift 41,6px/1,1 — auf der Eventseite 800, auf /newsletter/ 700. */
.newsletter-kasten h1,
.newsletter-kasten h2 {
  font-size: 41.6px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.newsletter-kasten h1 { font-weight: 700; }
.newsletter-kasten > p {
  max-width: 560px;
  margin: 10px auto 26px;
  font-size: 16.8px;
  line-height: 1.5;
  color: #cfd6e0;
}
.newsletter-kasten .newsletter-zeile {
  max-width: 540px;
  height: auto;
  margin-inline: auto;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.newsletter-kasten .newsletter-zeile input {
  height: 56px;
  padding: 16px 20px;
  border-radius: 999px;
  background: rgb(255 255 255 / 96%);
  color: #111111;
  font-size: 16px;
}
.newsletter-kasten .newsletter-zeile input::placeholder { color: #757575; }
.newsletter-kasten .newsletter-zeile .knopf {
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1.5;
}
.seite-newsletter .newsletter-kasten .knopf { font-weight: 700; }
.newsletter-kasten .zustimmung {
  max-width: 540px;
  margin: 14px auto 0;
  font-size: 12.8px;
  line-height: 1.45;
  color: #c3ccd8;
}
/* Telefon: Polster 54/24, Überschrift 32px, Feld und Knopf untereinander
   über die volle Breite. */
@media (max-width: 767px) {
  .newsletter-kasten { padding: 54px 24px; }
  .newsletter-kasten h1,
  .newsletter-kasten h2 { font-size: 32px; }
  .newsletter-kasten .newsletter-zeile { flex-direction: column; }
  /* `flex: 1` würde das Feld in der Spalte auf die Inhaltshöhe drücken. */
  .newsletter-kasten .newsletter-zeile input { flex: none; }
}
.seite-newsletter .abschnitt { padding: 10px 10px 80px; }

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

/* Grund #0c0c0c, Polster 72px / 8 %. Drei Spalten 40 / 30 / 30 %: links
   Marke, Text, Rechtliches und Newsletter, die mittlere bleibt leer,
   rechts Social, Anfahrt, U18-Formular und „powered by Clubinio". Bis
   1024px untereinander — die rechte Spalte zuerst, wie im Original.
   Grund und Linie sitzen auf dem Raster, nicht auf <footer>: Die
   Standzeile darunter liegt im Original außerhalb der Fläche. */
.fuss p { margin: 0; }
.fuss-raster {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  padding: 72px var(--rand-kopf);
  background: var(--fuss);
  border-top: 1px solid rgb(254 112 112 / 12%);
}
.fuss-marke { grid-column: 1; }
.fuss-anfahrt { grid-column: 3; grid-row: 1; }
.fuss-marke,
.fuss-anfahrt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
/* Wortmarke: 22 % der Spalte (Telefon 40 %). Der Abstand darunter ist im
   Original 27px statt 20 — der Bildbaustein bringt 7px Zeilenraum mit. */
.fuss-logo { width: 22%; height: auto; margin-bottom: 7px; }

.fuss-recht { margin: 0; padding: 0; list-style: none; }
.fuss-recht a {
  display: block;
  font-family: var(--schrift-display);
  font-size: 15px;
  line-height: 1.5;
  /* Verweisfarbe des Themes; sichtbar ist die Farbe der Beschriftung. */
  color: var(--link-text);
}
.fuss-recht a span { display: inline-block; color: var(--akzent-text); }
.fuss-recht a:hover span { text-decoration: underline; }

/* Überschriften stehen in Versalien im Text, nicht per CSS. */
.fuss h2 { font-size: 17px; line-height: 1; text-transform: none; }
.fuss .newsletter { display: flex; flex-direction: column; gap: 20px; }
/* Unter 1025px 30px zwischen Linkliste, Überschrift und Feld. */
@media (max-width: 1024px) { .fuss .newsletter { gap: 30px; margin-top: 10px; } .fuss-recht { margin-top: 10px; } }
@media (max-width: 767px)  { .fuss .newsletter h2 { align-self: flex-start; } }
/* Schrift am Block, nicht nur am Span: Sonst bauen die Zeilen auf der
   Grundschrift (16/24) auf und der Block wird 48 statt 45px hoch. */
.fuss-anfahrt address {
  font-family: var(--schrift-display);
  font-size: 15px;
  font-style: normal;
  line-height: 1.5;
}
.fuss-social { display: flex; gap: 20px; }
/* Der Verweis trägt die Werte des Elementor-Symbols (Poppins 23px, Grau
   #69727d, Rundung 10 %); sichtbar ist nur das Zeichen in Akzentfarbe. */
.fuss-social a {
  display: flex;
  font-family: var(--schrift-poppins);
  font-size: 23px;
  line-height: 1;
  color: #69727d;
  border-radius: 10%;
  /* Unsichtbar, steht aber so am Elementor-Symbol des Originals. */
  background: rgb(2 1 1 / 0%);
}
.fuss-social svg { width: 23px; height: 23px; color: var(--akzent); }

/* **Neu: U18-Verweis** im Fuß — Poppins 700, Akzentfarbe, unterstrichen. */
.u18-link {
  align-self: flex-start;
  font-family: var(--schrift-poppins);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--akzent-text);
  text-decoration: underline;
}
.clubinio { align-self: flex-start; }
.clubinio img { width: 102px; height: auto; }

/* Standzeile ganz unten. */
.stand {
  margin: 0;
  padding: 10px 16px;
  font-family: var(--schrift-grund);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--tinte-still);
}

@media (max-width: 1024px) {
  .fuss-raster {
    display: flex;
    flex-direction: column-reverse;
    gap: 55px;
    padding: 8% var(--rand-kopf);
  }
  .fuss-marke { width: 65%; }
  .fuss-anfahrt { width: 85%; }
  .fuss-marke > p { font-size: 14px; }
  .fuss-social a { font-size: 18px; }
  .fuss-social svg { width: 18px; height: 18px; }
  .clubinio img { width: 133px; }
}
@media (max-width: 767px) {
  /* 70,18px zwischen den Spalten — mit Bruchteil gemessen. */
  .fuss-raster { gap: 70.18px; padding: 20% var(--rand-kopf); }
  .fuss-marke, .fuss-anfahrt { width: 100%; align-items: flex-start; }
  .fuss-marke > p { font-size: 15px; }
  .fuss-logo { width: 40%; }
  .clubinio img { width: 98px; }
}

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

/* **Alles hängt an `html.anim`.** Diese Klasse setzt assets/js/anim.js,
   und zwar nur, wenn das Modul wirklich läuft und `prefers-reduced-motion`
   nicht gesetzt ist. Fällt das Skript aus, bleibt die Klasse weg — und
   damit jede Regel, die etwas unsichtbar macht.

   Bewegt wird ausschließlich `transform` und `opacity`: beides läuft im
   Compositor, alles andere 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. Die Verzögerung steht je Position im CSS,
   weil ein Inline-Style unter `style-src 'self'` nicht erlaubt wäre. */
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; }

/* Eventkarte beim Überfahren — Werte aus dem Plugin-Stylesheet des
   Originals: Karte 6px höher mit Schatten, Flyer auf 1,04, Pfeil 4px nach
   rechts. */
.karte { transition: transform 0.3s var(--kurve), box-shadow 0.3s var(--kurve); }
.karte:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgb(0 0 0 / 35%); }
.karte-bild { overflow: hidden; }
.karte-bild img { transition: transform 0.55s var(--kurve); }
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte-infos svg { transition: transform 0.3s var(--kurve); }
.karte:hover .karte-infos svg { transform: translateX(4px); }

.album-karte { transition: transform 0.3s var(--kurve); }
.album-karte:hover { transform: translateY(-4px); }
.album-karte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Der Hero läuft beim Laden auf: Logo, Titel, Knopf nacheinander. */
@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 -- */

/* 404: Kennzahl in Akzentfarbe, Zeile, Satz, zwei Knöpfe — mittig. Die
   404 des Originals ist eine nackte Serverseite; diese folgt dem Rahmen. */
.fehlerseite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 60svh;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}
.fehlerseite .kennzahl {
  margin: 0;
  font-size: clamp(80px, 18vw, 160px);
  font-weight: 900;
  line-height: 1;
  color: var(--akzent);
}
.fehlerseite h1 { font-size: clamp(28px, 5vw, 50px); line-height: 1; letter-spacing: -0.04em; }
.fehlerseite p { margin: 0; }
.fehlerseite .knopf-reihe { justify-content: center; gap: 14px; }