/* ============================================================================
   Klangwelten Bremen — Design und Layout
   ----------------------------------------------------------------------------
   Übernahme der bestehenden klangwelten-bremen.de (WordPress mit Elementor
   und den Clubinio-Plugins). 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*).
   Technische Vorlage ist roxy-hp — dasselbe Clubinio-Theme wie hier, die
   Werte des Themes gelten deshalb weitgehend unverändert.

   Schwarzer Grund, weiße Schrift, Baba Pro in Versalien, Akzent Rot
   #f3150f, Fließtext Inter (Betreiber 31.10.; das Original setzt Poppins).

   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 klangwelten-bremen.de** (`/wp-content/
   uploads/2026/04/`), nicht nur dieselben Familien — eine andere Fassung
   setzt dieselben Wörter messbar anders breit. Siehe assets/fonts/LIZENZEN.md.

   **Baba Pro gibt es nur als 700er-Schnitt**, deklariert wie im Original
   mit `font-weight: 700`. Das Original verlangt meist 900, manchmal 400 —
   gezeichnet wird in jedem Fall diese eine Datei. Weil die Anfrage
   (900) über dem Schnitt (700) liegt, setzt Chrome keinen künstlichen
   Fettdruck darauf: Der entsteht nur, wenn der Schnitt unter 600 liegt. */
@font-face { font-family: 'Baba Pro'; src: url('../fonts/babapro-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Inter variabel, dieselbe Datei wie im Systemkanon (cosmopolar-hp).
   **Bereich 400–700, nicht 100–900:** Das Original verlangt an Etiketten
   800 und 900, gezeichnet wurde Poppins 700 (nur dieser Schnitt lag vor).
   Der Bereich klemmt jede Anfrage darüber auf 700 — die Stufung bleibt
   wie gemessen, Inter wird nicht schwerer als die Schrift davor. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Flächen — gemessen auf klangwelten-bremen.de (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 */

  /* Zwei Rollen: Anzeige (Überschriften, Menü, Knöpfe) in Baba Pro,
     alles andere in Inter (Betreiber 31.10.; im Original Poppins). */
  --schrift-grund:   'Inter', sans-serif;
  --schrift-display: 'Baba Pro', sans-serif;

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

  /* **Akzent `#f3150f`, nicht der Clubinio-Wert `#f3170f`.** Gemessen an
     Navigation, Knöpfen, Kartendatum und Fußlinks (58 Textstellen und 11
     Flächen auf /) — das ist, was ein Gast sieht. Der Clubinio-Wert steuert
     nur die Shop-Widgets. */
  --akzent:       #f3150f;
  --akzent-rgb:   243 21 15;
  --akzent-tinte: #ffffff;

  /* **Drei Abweichungen vom Original, alle für WCAG AA** (tools/
     kontrast.js; gerechnet gegen den tatsächlich gemalten Grund), jeweils
     der kleinste Schritt im selben Farbton:
     - Weiß auf #f3150f: 4,26:1 → Fläche der Knöpfe #ec120c: 4,51:1.
     - #f3150f als kleine Schrift auf #111 (Eventliste): 4,43:1 →
       #f4312c: ≥ 4,50:1 auf jedem Grund bis #181818 (Infokasten).
     Linien, Punkte, große Schrift behalten #f3150f. abgleich.py kennt genau
     diese Paare (FARBTAUSCH, FLAECHENTAUSCH). */
  --akzent-text:  #f4312c;
  --akzent-flaeche: #ec120c;
  /* Aktiver Menüpunkt auf dem Foto (schwebende Kopfzeile des Systems):
     #f4312c kam auf dem Hero-Standbild trotz 75 % Schleier nur auf
     3,97:1. #ff4a44 ist der kleinste hellere Ton mit ≥ 4,5:1 an den
     gemalten Pixeln (4,71:1, tools/bildkontrast.js). */
  --akzent-hell:  #ff4a44;
  --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: Baba Pro, 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: Inter 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-grund);
  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;
}

/* Eventabschnitt: Standbild des Hero-Videos `cover`, ab 1025px
   feststehend (Parallaxe des Originals), dichter Schleier; auf dem Telefon
   das rote Hochformat des Originals (kwmobil.jpg). Karten und Knopf in
   der Hülle der Eventseite (1160px, 10px Rand) — das Original hat hier
   120/45/20px Rand; geändert, damit die Karten 1 zu 1 denen auf /events/
   gleichen (Betreiber 31.10.). Die Überschrift läuft über die volle
   Breite. */
.abschnitt-bild {
  background: url('../img/hero.webp') center / cover no-repeat;
}
@media (min-width: 1025px) { .abschnitt-bild { background-attachment: fixed; } }
@media (max-width: 767px)  {
  .abschnitt-bild { background-image: url('../img/events-grund-mobil.webp'); }
}
.abschnitt-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 74%);
}
@media (max-width: 767px) { .abschnitt-bild::before { content: none; } }
/* Die Überschrift steht 10px unter der Abschnittskante (110 statt 100)
   und hält 10px Seitenrand. Nur hier: .kopfzeile trägt auch den Kopf der
   Albumseite, und der läuft im Original ohne Rand über die Spalte. */
.abschnitt-bild .kopfzeile { padding: 10px 10px 0; }

/* Abschnittskopf „EVENTS": 50px/50px, Versalien im Text (nicht per CSS),
   über die volle Breite mit 10px Rand zentriert, 35px Abstand darunter.
   Auf dem Telefon 40px und 40px Abstand. */
.kopfzeile { margin-bottom: 35px; text-align: center; }
.kopfzeile h2 {
  font-size: 50px;
  line-height: 1;
  text-transform: none;
  text-wrap: balance;
}
@media (max-width: 767px) {
  .kopfzeile { margin-bottom: 40px; }
  .kopfzeile h2 { font-size: 40px; }
}
.unterzeile { margin: 0; }

/* Knopfreihe. `data-mitte`: zentriert unter den Karten, 40px Abstand
   darüber, im Tablet-Bereich des Originals (768–1024px) 66px. */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe[data-mitte] { justify-content: center; margin-top: 40px; }
@media (min-width: 768px) and (max-width: 1024px) { .knopf-reihe[data-mitte] { margin-top: 66px; } }

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

/* Knopf: 12px/24px Polster, Baba Pro 15px/15px, eckig, ohne Schein —
   alles gemessen (254×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: 0;
  background: var(--akzent-flaeche);
  color: var(--akzent-tinte);
  font: inherit;
  font-family: var(--schrift-display);
  line-height: 1;
  font-size: 15px;
  font-weight: 900;
  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 vom System** (Systemkanon im
   Auftrag; Aufbau, Maße und Verhalten aus cosmopolar-hp über die Vorlage
   roxy-hp). Farben, Schriften, Logo und Texte sind die von Klangwelten.
   Das Original hat eine feste Kopfleiste (100px) und einen 700px-Hero —
   ob das System hier erweitert wird, liegt dem Betreiber vor
   (.auftrag.md). tools/abgleich.py nimmt den Bereich bis dahin benannt
   aus (kopf_versetzen), tools/kopf-marke.py prüft dort Marke und Text.

   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 Systemhöhe (46px, Telefon 34px). Die Wortmarke von
   Klangwelten ist 3,7:1 breit (920×249) — dieselbe Höhe, nicht dieselbe
   Breite wie das fast quadratische Zeichen in cosmopolar-hp. */
.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; }

  /* Punkte dicht untereinander (Betreiber 31.10.; System 1.5rem). */
  .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;
}
/* Das Video füllt die Fläche (Regel aus baggi-hp). Es ist hochkant
   (720×1280, wie im Original, wo Elementor es ebenso füllt) — ohne diese
   Regel stand es in natürlicher Breite links und das Standbild schaute
   rechts daneben heraus. */
.hero-medium video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Oben fast deckend (95 % bis 90px), dann bis 220px auf die 55 %
     des Systems: Der aktive Menüpunkt in Rot liegt über dem laufenden
     Video, und dessen helle Szenen drückten ihn auf 2,2:1 (gemessen über
     die Laufzeit; das Standbild allein kam mit 75 % auf 4,71:1). Für 4,5:1
     braucht es rund 93 % — so dunkel war die Kopfleiste des Originals
     ohnehin (feste schwarze Leiste). */
  background: linear-gradient(180deg, rgb(0 0 0 / 95%) 0, rgb(0 0 0 / 95%) 90px, rgb(0 0 0 / 55%) 220px, 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, 44–72px hoch: Eine Wortmarke im Querformat
   (3,7:1) wäre in der Höhe eines quadratischen Zeichens auf dem Telefon
   breiter als der Bildschirm. Das Original zeigt sie 52px hoch (1440). */
.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 im Hero als Pille (System), knapper als die übrigen. Fläche
   und Schrift sind die von Klangwelten. Das Original zeigt ihn eckig wie
   alle Knöpfe — Teil der vorgelegten Kopf/Hero-Entscheidung. */
.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: 1;
  text-wrap: balance;
}
@media (max-width: 767px) { .ueber-text h2 { font-size: 26px; } }
/* Blocksatz ab 768px, auf dem Telefon linksbündig — gemessen. */
.ueber-text p { text-align: justify; }
@media (max-width: 767px) { .ueber-text p { text-align: start; } }
.ueber-text strong { font-weight: 700; }

.ueber .slider-band img { aspect-ratio: 4 / 5; }

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

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

/* Karte: #111, Rundung 20, Flyer 16:9 auf #0a0a0a — das Bild darin in
   natürlichem Verhältnis, nicht beschnitten. Text 15px.
   **Überall die Karte der Eventseite** (Betreiber 31.10.): Die Startseite
   des Originals nutzt einen anderen Baustein des Plugins (#0c0c0c, 16px,
   „MEHR ERFAHREN" in Poppins rot); sie zeigt jetzt dieselbe Karte wie
   /events/. */
.karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--karte);
  font-family: var(--schrift-grund);
  font-size: 15px;
  line-height: 1.5;
}
.karte-bild { aspect-ratio: 16 / 9; background: var(--karte-bild); }
.karte-bild img { width: 100%; height: auto; }

/* Textblock: Datum, Titel, Ort, je 10px Abstand — Polster 10/15. Die
   Summe trifft die gemessene Kartenhöhe (217 + 10 + 20 + 10 + 63 + 10 +
   18 + 10 + 36 = 394). */
.karte-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 15px 0;
}
.karte-termin {
  margin: 0;
  font-family: var(--schrift-grund);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--akzent-text);
}
/* Titel: 25px/1,25, höchstens zwei Zeilen mit Auslassung, immer zwei
   Zeilen hoch — so stehen „Mehr erfahren" und die Kartenunterkante einer
   Reihe auf einer Linie. Auf jeder Breite gleich (gemessen). */
.karte-titel {
  font-size: 25px;
  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: 24px; } }
/* Ort unter dem Titel: Inter 700 12px/18px, Versalien, Akzent. */
.karte-ort {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

/* Der Abschnitt unten. Im System eine Perforation — das Original hat
   keine; 10px näher am Ort, 15px Polster unten. Die 18px über der Zeile
   trägt die Zeile selbst, so wie die Messung sie sieht. */
.karte-abriss { margin: -10px 0 0; padding: 0 15px 15px; }
/* „MEHR ERFAHREN" in Baba Pro weiß — 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-display);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte);
}

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

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

/* ------------------------------------------------------------ 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='kontakt'] { background-image: url('../img/banner/kontakt.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-grund); }
@media (max-width: 759px) {
  .seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; }
}

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

/* Ein Raster in der Systemhülle (1140px Inhalt, 10px Rand), 35px unter
   dem Seitenkopf, 80px bis zum Fuß. Die Karte selbst ist die Grundform
   (siehe Karten). */
.seite-events .abschnitt { padding: 35px 0 80px; }

/* ------------------------------------------------------------------ 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. */
/* 85px unter dem Seitenkopf, 35px bis zum Fuß — gemessen. */
.seite-kontakt .abschnitt { padding: 85px 0 35px; }
.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; } }
/* Ohne FAQ: Formular in einer Spalte von 550px, bis 1024px volle Breite
   — gemessen. */
.kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 550px); justify-content: center; }
@media (max-width: 1024px) { .kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 1fr); } }
.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), Inter 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-grund);
  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-grund);
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  color: #cfd6e0;
}

/* `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-grund);
  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%); }

/* Pflichtfeld-Sternchen (System). */
.feld-pflicht { font-style: normal; color: #f43f5e; }

/* Einwilligung: Kästchen vor dem Text, 9px Abstand. */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.zustimmung {
  font-family: var(--schrift-grund);
  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; }

/* **Variante: Kontaktformular** in der Formsprache von cosmopolar.com
   (Betreiber 01.11.; vorher das Elementor-Formular des Originals mit
   Umrissen): kein Kasten, Spalte 550px; Felder gefüllt (6 % Weiß), ohne
   Rahmen, Rundung 14, 56px hoch; Fokus als Ring außen, der nichts
   verschiebt; Etiketten leise in Normalschrift; eigenes Kästchen, gefüllt
   wie die Felder; Knopf als volle Pille.

   **An #kontaktformular gebunden, nicht an .seite-kontakt:** Auf derselben
   Seite steht im Fuß das Newsletter-Formular, ebenfalls .form mit
   .zustimmung — Seitenregeln trafen es mit. */
#kontaktformular .form {
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#kontaktformular .form-reihe { gap: 18px; }
#kontaktformular .feld { gap: 8px; }
#kontaktformular .feld > span,
#kontaktformular .feld legend {
  padding: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #d0d0d0;
}
#kontaktformular .feld legend { padding-bottom: 12px; }
#kontaktformular .feld-pflicht { padding-inline-start: 2px; color: var(--akzent-text); }
#kontaktformular .feld input:not([type='checkbox']),
#kontaktformular .feld textarea {
  padding: 16px 18px;
  border: 0;
  border-radius: 14px;
  background: rgb(255 255 255 / 6%);
  font-size: 15px;
  line-height: 1.5;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
#kontaktformular .feld textarea { min-height: 150px; }
#kontaktformular .feld :is(input, textarea):hover:not(:focus) { background: rgb(255 255 255 / 8%); }
#kontaktformular .feld :is(input, textarea):focus {
  outline: 0;
  background: rgb(255 255 255 / 10%);
  box-shadow: 0 0 0 2px rgb(var(--akzent-rgb) / 55%);
}
#kontaktformular .feld ::placeholder { color: var(--tinte-still); }

#kontaktformular .zustimmung {
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #d0d0d0;
}
/* Eigenes Kästchen (Systemkanon): gefüllt statt Systemquadrat. */
#kontaktformular .zustimmung input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 0;
  border-radius: 7px;
  background: rgb(255 255 255 / 10%);
  cursor: pointer;
  transition: background 0.2s ease;
}
#kontaktformular .zustimmung:hover input:not(:checked) { background: rgb(255 255 255 / 16%); }
#kontaktformular .zustimmung input:checked { background: var(--haken) var(--akzent-flaeche) center / 13px 13px no-repeat; }
#kontaktformular .zustimmung input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
#kontaktformular .zustimmung a { color: var(--akzent-text); text-decoration: underline; }

#kontaktformular .form > .knopf-reihe { margin-top: 12px; }
#kontaktformular .form > .knopf-reihe .knopf {
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--schrift-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

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

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

/* Albenliste: Spalte höchstens 1140px, 10px Rand, 35px unter dem
   Seitenkopf. Drei Spalten mit 30px Abstand, bis 1024px zwei, auf dem
   Telefon eine — gemessen. */
/* 130px bis zum Fuß auf jeder Breite — gemessen. */
.seite-fotos .abschnitt { padding: 35px 0 130px; }
.alben-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
@media (max-width: 1024px) { .alben-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .alben-raster { grid-template-columns: 1fr; } }

/* Karte wie im Plugin des Originals: #0e0e0e, Rundung 14, Deckblatt 4:3
   auf #222, darunter 5px-Kante. Kante und Datum in der Akzentfarbe
   (Betreiber 31.10.; das Original nimmt das eigene Rot des
   Clubinio-Fotoplugins, #e11d48). */
.album-karte {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #0e0e0e;
  font-family: var(--schrift-grund);
  font-size: 15px;
  line-height: 1.5;
}
.album-bild { aspect-ratio: 4 / 3; 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-grund);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}
.album-ort {
  display: inline-block;
  font-weight: 700;
  color: #c9d2de;
}

/* Albumseite: Titel Inter (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-grund); }
/* Unter dem Kopf eine 2px-Linie in #f0f0f0 — vom Fotoplugin des Originals. */
.seite-album .kopfzeile { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #f0f0f0; }
.seite-album .kopfzeile h1 {
  margin: 8px 0 20px;
  font-family: var(--schrift-display);
  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-grund);
  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; }



/* ------------------------------------------------------------- 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, Inter 900 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;
  font-family: var(--schrift-grund);
  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 Inter 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-grund);
  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. Verweise in der
   Akzentfarbe (Betreiber 31.10.; das Original nimmt die Linkfarbe des
   Themes #cc3366). */
.event-text {
  margin-top: 26px;
  font-family: var(--schrift-grund);
  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 {
  font-family: var(--schrift-grund);
  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-grund);
  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-grund);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
/* „Einlass" steht im Original als einziges Etikett in der Textschrift. */
.infopaar:nth-child(3) dt { font-family: var(--schrift-grund); }
.infopaar dd small {
  display: block;
  margin-top: 3px;
  font-family: var(--schrift-grund);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  color: var(--tinte-still);
}

/* „Zurück": grau, Inter 900 13px, Pfeil davor, mittig, 26px unter dem
   Infokasten. */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px auto 0;
  padding-top: 20px;
  font-family: var(--schrift-grund);
  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 die bestehende Seite (gemessen): Fließtext
   in der Systemhülle (1140px), 50px unter dem Kopf; Titel Baba Pro 32px in
   Akzentfarbe, 20px darunter der Text; Absätze Inter 15/22,5 mit 0,9rem
   Abstand; Gliederung h3/h4/h5 in Inter 500, 28/24/20px, Rand 8/16;
   Verweise in Akzentfarbe. */
.seite-recht .abschnitt { padding: 50px 0 49px; }
@media (max-width: 1024px) { .rechtstext { --gutter: 20px; } }
.rechtstext h1 {
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--akzent);
}
/* Trennlinie wie der Elementor-Divider des Originals: 1px Akzent über 30 %
   der Spalte, 15px Polster und 20px Abstand je Seite (71px Text zu Text,
   gemessen). Der Absatz davor endet ohne Rand. */
.rechtstext hr {
  width: 30%;
  margin: 35px 0;
  border: 0;
  border-top: 1px solid var(--akzent);
}
.rechtstext p:has(+ hr) { margin-bottom: 0; }
.rechtstext h3,
.rechtstext h4,
.rechtstext h5 {
  margin: 8px 0 16px;
  font-family: var(--schrift-grund);
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
}
.rechtstext h3 { font-size: 28px; }
.rechtstext h4 { font-size: 24px; }
.rechtstext h5 { font-size: 20px; }
.rechtstext p,
.rechtstext li {
  font-family: var(--schrift-grund);
  font-size: 15px;
  line-height: 1.5;
}
/* **Variante: Blocksatz** wie im Original — die ganze Datenschutzerklärung
   (82 von 83 Absätzen, auch die Überschriften), im Impressum nur der
   Fließtext unter der Trennlinie; die Adressblöcke darüber stehen
   linksbündig. */
.rechtstext--blocksatz :is(p, li, h3, h4, h5),
.rechtstext hr ~ p { text-align: justify; }
.rechtstext ul { margin: 0; padding-left: 40px; }
.rechtstext strong, .rechtstext u { font-weight: 700; }
.rechtstext a { color: var(--akzent-text); }
.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-grund);
  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;
  font-family: var(--schrift-grund);
  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-family: var(--schrift-grund);
  font-size: 11.52px;
  color: #7a8595;
}
.newsletter .rueckmeldung { margin-top: 12px; max-width: 460px; }

/* ------------------------------------------------------------------ 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; }
/* Nur der Text unter dem Logo — `.fuss p` träfe auch die Standzeile
   (.stand, 11px) und schlüge sie über die Spezifität. */
.fuss-marke > p { font-size: 16px; line-height: 1.5; }
.fuss-raster {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  padding: 72px var(--rand-kopf);
  background: var(--fuss);
}
.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: 40 % der Spalte auf jeder Breite (194 von 484px bei 1440,
   180 von 449 bei 768). Der Abstand darunter ist im Original 27px statt
   20 — der Bildbaustein bringt 7px Zeilenraum mit. */
.fuss-logo { width: 40%; 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: 13px;
  font-weight: 400;
  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: 16px; line-height: 1; text-transform: none; }
/* 20px zwischen Überschrift und Feld auf jeder Breite (36 − 16 bei 1440
   und 768 gemessen). Gestreckt: In der Spalte mit `align-items:
   flex-start` (Telefon) nähme der Block sonst die Breite von Feld plus
   Knopf (400px) statt der Spalte (351px) und ragte aus dem Fenster. */
.fuss .newsletter { display: flex; flex-direction: column; gap: 20px; align-self: stretch; }
/* Bis 1024px 10px mehr über den Rechtslinks — gemessen. */
@media (max-width: 1024px) { .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-grund);
  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 (Inter 23px, Grau
   #69727d, Rundung 10 %); sichtbar ist nur das Zeichen in Akzentfarbe. */
.fuss-social a {
  display: flex;
  font-family: var(--schrift-grund);
  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); }

.clubinio { align-self: flex-start; }
/* 100px auf jeder Breite — gemessen. */
.clubinio img { width: 100px; 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; }
}
@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-recht a { font-size: 11px; }
  /* Auf dem Telefon ohne die 7px Zeilenraum des Bildbausteins. */
  .fuss-logo { margin-bottom: 0; }
}

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