/* ============================================================================
   Atrium Kiel — Design und Layout
   ----------------------------------------------------------------------------
   Übernahme der bestehenden atrium-kiel.de (WordPress mit Elementor). Alle
   Maße und Farben hier sind an der laufenden Seite gemessen und stehen in
   referenz/*.json; tools/abgleich.py vergleicht dagegen.

   Schwarzer Grund, weiße Schrift, Montserrat Black in Versalien, ein
   Akzent in Magenta (#e6007e) 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 atrium-kiel.de**, zugeschnitten auf den
   lateinischen Zeichenvorrat (assets/fonts/LIZENZEN.md). Eine andere
   Fassung derselben Familie setzt dieselben Wörter messbar anders breit.

   **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; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* **Fließtext in Inter** — Wunsch des Betreibers (31.10.2026), nicht das
   Original. Eine variable Datei für alle Gewichte, dieselbe wie auf
   cosmopolar.com (Lizenz: assets/fonts/LIZENZEN.md). */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

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

:root {
  /* Flächen — gemessen auf atrium-kiel.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 */

  /* **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;
  /* Fließtext: Absätze, Eventbeschreibung, FAQ-Antworten, Rechtstexte.
     Überschriften, Menü, Knöpfe und Etiketten bleiben Montserrat/Poppins. */
  --schrift-text:    'Inter', sans-serif;
  --schrift-display: 'Montserrat', sans-serif;
  --schrift-poppins: 'Poppins', sans-serif;

  --tinte:        #ffffff;
  --tinte-rgb:    255 255 255;
  --tinte-still:  #9a9a9a;   /* Standzeile im Fuß */

  /* **Akzent `#e6007e`, nicht der Clubinio-Wert `#e3368d`.** Gemessen an
     Navigation, Knöpfen, Kartendatum und Fußlinks — das ist, was ein Gast
     sieht. Der Clubinio-Wert steuert nur Shop-Widgets.
     Weiß darauf: 4,51:1. Auf dem Seitengrund #000: 4,66:1. */
  --akzent:       #e6007e;
  --akzent-rgb:   230 0 126;
  --akzent-tinte: #ffffff;

  /* **Textvarianten für kleine Schrift auf dunklen Flächen — Abweichung
     vom Original.** Auf den aufgehellten Flächen (#0c0c0c bis #161616)
     erreicht #e6007e nur 4,09–4,35:1 — unter den 4,5:1 von WCAG AA.
     Gleicher Farbton, nur so weit aufgehellt wie nötig (berechnet, min.
     4,52:1 auf jeder dunklen Fläche). Flächen und große Schrift behalten
     die Originalfarbe. tools/kontrast.js prüft, abgleich.py kennt den
     Tausch. Albumdatum und Eventverweise (im Original Plugin-Rot und
     Linkfarbe) tragen auf Wunsch des Betreibers ebenfalls diese Farbe. */
  --akzent-text:  #f80088;

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

  --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");

  /* Kopfhöhe 82px, unter 900px 80px — gemessen auf cosmopolar.com, dessen
     Kopf hier übernommen ist (siehe Abschnitt Kopf). */
  --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. Die randlose Bildstrecke
   rechnet die Scrollleiste bereits heraus (`--sb`); das hier faengt ab, was
   kuenftig dazukommt, ohne dass es jemandem auffaellt.

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

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

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

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

body {
  margin: 0;
  background: var(--nacht);
  color: var(--tinte);
  font-family: var(--schrift-grund);
  /* 16px/24px — gemessen an jedem Container des Originals. */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

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

/* Überschriften: Montserrat Black, Versalien. Größe, Zeilenhöhe und
   Sperrung setzt jede Stelle selbst — das Original fährt dafür sechs
   verschiedene Kombinationen (80/73, 50/45 mit -0,04em, 36/32,4 …), eine
   gemeinsame Grundgröße hätte nichts davon getroffen. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 900;
  text-transform: uppercase;
}
/* Nur auf der Startseite und nur im Inhalt: ausgeglichene Zeilen. So setzt
   es das Original (gemessen: `text-wrap: balance` an den fünf H2 von „/",
   an keiner anderen Seite, nicht im Fuß). Die Kastenbreite bleibt gleich,
   die Textbreite nicht — „Der größte Club …" lief ohne 24px breiter. */
.seite-start main h2 { text-wrap: balance; }

/* Fließtext: Inter 15px/22,5px (im Original Montserrat). Abstand 0,9rem wie Elementor — in
   rem, nicht em: bei 14px-Text (Jobs, Telefon) wären es sonst 12,6 statt
   14,4px je Absatz. */
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 fuer Lesegeraete — etwa die H1 der Startseite. */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

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


/* Abschnittsüberschrift „EVENTS", „FOTOS": 50px/45px, Sperrung -0,04em
   (gemessen -2px), über die volle Breite zentriert. Auf dem Telefon
   35px/31,5px. Der Abstand darunter: 70px, auf dem Telefon 50px. */
.abschnitt-titel {
  font-size: 50px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: center;
  margin-bottom: 70px;
}
@media (max-width: 767px) {
  .abschnitt-titel { font-size: 35px; margin-bottom: 50px; }
}

/* Zentrierte Knopfzeile unter Karten und Bildband — 70px Abstand
   darüber, auf dem Telefon 50px. */
.knopf-mitte { display: flex; justify-content: center; margin-top: 70px; }
@media (max-width: 767px) { .knopf-mitte { margin-top: 50px; } }

/* Eventabschnitt: dasselbe Clubfoto wie der Hero, Schleier 0,74 —
   beides gemessen. Seitenrand 100px bis hinunter auf 768px, darunter 30px. */
.abschnitt-bild {
  position: relative;
  padding: 100px 0;
  background: url('../img/hero.webp') center / cover no-repeat;
  isolation: isolate;
}
.abschnitt-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 74%);
}
/* Die Überschrift läuft über die volle Breite (gemessen x=0), nur Karten
   und Knopf halten den Rand. */
.abschnitt-bild .karten,
.abschnitt-bild .knopf-mitte { margin-inline: 100px; }
@media (max-width: 767px) {
  .abschnitt-bild .karten,
  .abschnitt-bild .knopf-mitte { margin-inline: 30px; }
}

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

/* Pfeil am Ende, 15px — als Maske, damit er `currentColor` übernimmt. */
.knopf::after {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  /* Pfad des Originals (Font Awesome „long-arrow-alt-right"). */
  -webkit-mask: 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") 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='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") center / contain no-repeat;
}
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }



.icon { flex: none; }

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

/* **Aussehen von cosmopolar.com übernommen** (Wunsch des Betreibers,
   31.10.2026) — nicht das des Originals. Gemessen dort: Leiste 82px hoch
   (unter 900px 80px), frei im Bild ohne Grund; erst beim Scrollen ein
   halbdurchsichtiger Grund mit Weichzeichner. Inhalte, Farben und Schriften
   bleiben die von Atrium.

   **Klebt oben, belegt aber Platz im Fluss.** Hero und Seitenkopf ziehen
   sich mit negativem Rand darunter, damit die Leiste auf dem Bild steht. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  isolation: isolate;
  transition: background 0.25s ease;
}

/* **Nur die Farbe ändert sich, nicht die Höhe.** Eine klebende Zeile belegt
   weiterhin ihren Platz im Fluss; änderte sich die Höhe, ruckte der Inhalt
   darunter. Den Schalter `data-fest` setzt ui.js ab 40px Scrollweg. */
.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` — das Vollbildmenü
   bezöge sich sonst auf die 80px hohe Leiste statt auf das Sichtfeld und
   wäre im gescrollten Zustand nur so hoch wie sie. */
.kopf[data-offen='ja'] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Oben mehr Luft als unten: Die Zeile rückt vom Fensterrand weg und steht
   frei im Bild. Gescrollt sitzt sie mittig auf ihrem Grund — **die Summe
   bleibt gleich** (28+8 und 18+18), sonst ruckte der Inhalt beim
   Umschalten. Seitenrand wie im übrigen Atrium-Rahmen (`--rand-kopf`),
   damit Leiste, Inhalt und Fuß in einer Flucht stehen. */
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  height: var(--kopf-hoehe);
  padding: 1.75rem var(--rand-kopf) 0.5rem;
  transition: padding 0.25s ease;
}
.kopf[data-fest='ja'] .kopf-innen {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

/* Wortmarke statt Bildzeichen: Cosmopolars Zeichen ist 46px hoch und fast
   quadratisch, Atriums Marke 8:1 breit. Gleiche Höhe ergäbe 368px Breite —
   die Höhe ist deshalb so gewählt, dass die Marke so viel Fläche belegt wie
   dort das Zeichen. */
.logo { display: flex; align-items: center; }
.logo img { width: auto; height: 32px; }
@media (max-width: 899px) {
  .logo img { height: 22px; }
}

/* Drei Balken, die sich zum Kreuz drehen. 44px bleibt die Trefferfläche,
   die Balken sind schmaler. */
.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;
}
.menu li { display: flex; align-items: center; }

/* Montserrat Black 16px, gesperrt, ohne Unterstreichung — der aktive Punkt
   ist eingefärbt, das genügt als Signal. **Textvariante** `--akzent-text`:
   16px gilt nicht als große Schrift, und auf dem gescrollten Grund erreicht
   #e6007e nur 4,1:1. */
.menu a {
  display: block;
  padding-block: 0.5rem;
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.menu a:hover,
.menu a[aria-current='page'] { color: var(--akzent-text); }

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

/* Unter 900px: das Menü füllt den Bildschirm. */
@media (max-width: 899px) {
  /* Solange das Menü offen ist, muss die Leiste decken — sonst stünde über
     dem Menü ein Streifen, durch den das Hero-Video scheint. */
  .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 var(--rand-kopf) 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%);
    /* Aufblenden und leicht aufziehen statt einschieben. Geschlossen auch
       für Tastatur und Lesegerät weg. */
    opacity: 0;
    transform: scale(1.03);
    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 mittig, groß und untereinander. Ab 28px gilt die Schrift als
     groß — dort trägt die Originalfarbe (4,1:1 ≥ 3:1). **Dicht gesetzt**
     (Wunsch des Betreibers): kein Abstand zwischen den Punkten, die
     Trefferfläche je Punkt bleibt mit dem Polster über 44px. */
  .menu ul {
    flex: none;
    flex-direction: column;
    gap: 0;
  }
  .menu li { justify-content: center; }
  .menu a {
    padding-block: 0.375rem;
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .menu a:hover,
  .menu a[aria-current='page'] { color: var(--akzent); }

  /* Anschrift, E-Mail und Symbole unter den Punkten — fünf Punkte allein
     lassen die Vollbildfläche leer wirken. */
  .menu-fuss {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    margin-top: 2.5rem;
    text-align: center;
  }
  .menu-fuss p { margin: 0; color: var(--tinte-still); font-size: 0.875rem; }
  .menu-fuss a { font-size: 0.875rem; color: var(--tinte); }
  .menu-fuss .fuss-social { margin-top: 0.75rem; }

  /* Die Punkte laufen nacheinander ein. Verzögerung je Position im CSS —
     ein Inline-Style wäre unter `style-src 'self'` nicht erlaubt. */
  .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 -- */

/* **Aussehen von cosmopolar.com übernommen** (Wunsch des Betreibers,
   31.10.2026). Gemessen dort: 639px bei 900px Fensterhöhe, unter die
   Kopfleiste gezogen, dunkler Verlaufsschleier, Zeichen über einem
   zweizeiligen Titel in Montserrat Black.

   Feste Höhe als `height`, nicht als `aspect-ratio`; `svh` statt `vh`,
   sonst springt sie auf dem Telefon mit der Adressleiste.

   Medien bleiben die von Atrium: Schreibtisch das Clubfoto, bis 1024px das
   Hochkantvideo (Quelle setzt ui.js). */
.hero {
  position: relative;
  height: clamp(500px, 71svh, 790px);
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding-inline: var(--rand-kopf);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--nacht) url('../img/hero.webp') center / cover no-repeat;
  isolation: isolate;
  text-align: center;
}
/* Schleier, damit die Schrift auf dem Bild trägt — oben dunkler für die
   Leiste, unten dunkler für den Übergang in die Seite. */
.hero::before {
  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-video { display: none; }
@media (max-width: 1024px) {
  .hero { background-image: none; }
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Der Text beginnt unter der Leiste, damit er in der sichtbaren Fläche
   mittig steht und nicht in der ganzen. */
.hero-text {
  width: 100%;
  padding-top: var(--kopf-hoehe);
}
.hero-logo-link { display: inline-block; margin-bottom: 1rem; }
.hero-logo { width: clamp(160px, 18vw, 260px); height: auto; }
.hero-titel {
  margin: 0 0 1.25rem;
  font-size: clamp(2.75rem, 9vw, 5.3125rem);
  line-height: 1.02;
  letter-spacing: 0;
}
/* Unter 600px bricht „Willkommen im" sonst in zwei Zeilen und der Titel
   steht dreizeilig. */
@media (max-width: 599px) {
  .hero-titel { font-size: clamp(2rem, 9.5vw, 2.75rem); }
}

/* Knapper als die übrigen Knöpfe — unter einer sehr großen Überschrift muss
   der Knopf sie nicht noch einmal überbieten. */
.hero-text .knopf {
  padding: 0.7rem 1.4rem;
  font-size: 0.8125rem;
}

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

/* Zwei gleiche Spalten, 60px Abstand, höchstens 1080px — Text links,
   Bildstrecke rechts, senkrecht mittig. 80px oben und unten, 30px seitlich.
   Dahinter ein sehr leiser Schein in der Markenfarbe. */
.abschnitt-ueber {
  position: relative;
  padding: 80px 30px;
  isolation: isolate;
}
.abschnitt-ueber::before,
.abschnitt-fotoband::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%);
}
.ueber {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1080px;
  margin-inline: auto;
  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 h2 {
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
@media (max-width: 767px) { .ueber-text h2 { font-size: 28px; } }
.ueber-text p { text-align: justify; }
.ueber-text strong { font-weight: 700; }
/* Die beiden Absätze stehen im Original in EINEM Textbaustein: dazwischen
   der Absatzabstand (14px), nicht die 20px zwischen den Bausteinen. */
.ueber-absaetze { width: 100%; }

/* Trennbalken: Schiene 6px mit 8 % Weiß, darauf der Akzent auf 38 % der
   Breite mit Leuchtschatten — nachgemessen am ::before des Originals. */
.trenner {
  position: relative;
  width: 100%;
  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: Rundung 28px, tiefer Schatten mit kühlem Schimmer, unten
   ein Verlauf nach Schwarz (unteres Viertel, 0,42), dahinter ein
   cyanfarbener Schein rechts unten. */
.ueber-bild { position: relative; }
.ueber-bild::before {
  content: '';
  position: absolute;
  top: 52%;
  left: 50%;
  width: 85%;
  height: 85%;
  z-index: -1;
  background: radial-gradient(circle, rgb(96 216 245 / 15%) 0%,
              rgb(96 216 245 / 6%) 38%, transparent 72%);
  pointer-events: none;
}
.ueber-bild::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(to top, rgb(0 0 0 / 42%), transparent);
  pointer-events: none;
}
.ueber-bild .slider-band img {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%), 0 0 70px rgb(96 216 245 / 10%);
}

/* --------------------------------------------------------------- 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 (ein Flyer in 1,9:1 lässt
   unten einen Streifen frei, wie im Original). */
.karte {
  overflow: hidden;
  border-radius: 20px;
  background: var(--karte);
}
/* Der Verweis erbt im Original Poppins vom Plugin-Stylesheet. */
.karte-link { display: block; height: 100%; font-family: var(--schrift-poppins); }
.karte-bild { aspect-ratio: 16 / 9; background: var(--karte-bild); }
.karte-bild img { width: 100%; height: auto; }

/* Textblock: Flexspalte mit 10px Abstand — nachgemessen am Original
   (date 22,5 + 10 + Titel + 10 + „mehr" 36, Polster 22/24/24). */
.karte-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}
.karte-datum {
  display: block;
  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. 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;
  /* Immer zwei Zeilen hoch, auch bei kurzem Titel — so stehen „Mehr
     erfahren" und die Kartenunterkante einer Reihe auf einer Linie
     (gemessen: „GZUZ LIVE ON STAGE" einzeilig, Kasten 65px). */
  min-height: 2.5em;
}
@media (max-width: 767px) { .karte-titel { font-size: 22px; } }
/* „MEHR ERFAHREN" in Poppins — verlangt ist 900, geladen ist 700 (wie im
   Original). */
.karte-mehr {
  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);
}

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

/* Wie viele Folien gleichzeitig zu sehen sind, sagt `data-zeigen`
   (slider.js setzt die Folienbreite). Punkte 6px, Abstand 18px, 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 (gemessen: 20 statt 25px). */
.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 (Fotos): Bilder 4:5 ohne Rundung, Kante an Kante. */
.slider-randlos .slider-band img { aspect-ratio: 4 / 5; }

/* Fotoband der Startseite: 100px oben und unten, Überschrift 50px über
   dem Band, Knopf 25px unter den Punkten. */
.abschnitt-fotoband {
  position: relative;
  padding-block: 100px;
  isolation: isolate;
}
.abschnitt-fotoband .abschnitt-titel { margin-bottom: 50px; }
.abschnitt-fotoband .knopf-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; }
.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) -- */

/* Kopf der Unterseiten Events, Fotos, Jobs, Kontakt. **Aussehen von
   cosmopolar.com übernommen** (Wunsch des Betreibers, 31.10.2026).
   Gemessen dort: 460 / 320px hoch (1440 / 768), auf dem Telefon 3:2; unter
   die Kopfleiste gezogen, Schleier 58 %, Titel 72px, Unterzeile 18px in
   Akzentfarbe, Linie unten. Bilder bleiben die von Atrium. */
.seitenkopf {
  position: relative;
  min-height: clamp(320px, 34vw, 460px);
  display: grid;
  align-content: center;
  /* Negativer Rand **und** Polster gehören zusammen: Der Rand schiebt den
     Banner unter die Leiste, das Polster holt den Inhalt wieder in die
     sichtbare Fläche. */
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem)) var(--rand-kopf) clamp(2.5rem, 7vw, 4rem);
  background: var(--karte) center / cover no-repeat;
  border-bottom: 1px solid rgb(var(--tinte-rgb) / 8%);
  isolation: isolate;
  text-align: center;
}
.seitenkopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 58%);
}
.seitenkopf[data-banner='events']  { background-image: url('../img/hero.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/banner/kontakt.webp'); }
.seitenkopf h1 {
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 1.08;
}
/* Unterzeile in normaler Schreibung und Grundschnitt — die Zeile darüber
   ist laut genug. Poppins, weil Atrium keine Inter führt. Textvariante der
   Akzentfarbe: 18px gilt nicht als große Schrift. */
.seitenkopf p {
  max-width: 54ch;
  margin: 1rem auto 0;
  font-family: var(--schrift-text);
  font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--akzent-text);
  /* Abweichung von der Vorlage: Deren Gelb trägt auf jedem Bild, Magenta
     ist dunkler und ging auf hellen Bannern (Konfetti auf /kontakt/) unter.
     Ein weicher Schatten hebt die Zeile, ohne sie sichtbar zu umranden. */
  text-shadow: 0 1px 14px rgb(0 0 0 / 85%), 0 0 2px rgb(0 0 0 / 60%);
}

/* Telefon: festes Seitenverhältnis statt Mindesthöhe. Eine Mindesthöhe bei
   schmaler Breite zwingt `cover` zum starken Vergrößern; 3:2 lässt bei
   390px nach Abzug der Leiste rund 180px für den Text. */
@media (max-width: 759px) {
  .seitenkopf {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

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

/* Monatsgruppen in einer Spalte von höchstens 1140px, 10px Rand. 75px
   unter dem Seitenkopf; Monat → Karten 20px, Karten → nächster Monat 40px. */
.eventliste {
  max-width: 1160px;
  margin-inline: auto;
  padding: 75px 10px 80px;
}
.eventliste .karte-link { font-size: 15px; line-height: 1.5; }
.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; }
@media (max-width: 767px) { .eventliste .karten { grid-template-columns: 1fr; } }
.eventliste .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .eventliste .karten { grid-template-columns: 1fr; } }
/* 20px fett zählt als große Schrift — dort trägt die Originalfarbe. */
.eventliste .karte-datum { font-size: 20px; color: var(--akzent); }
.eventliste .karte-titel { font-size: 26px; }
@media (max-width: 1024px) { .eventliste .karte-titel { font-size: 21px; } }
@media (max-width: 767px)  { .eventliste .karte-titel { font-size: 24px; } }

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

/* Kontaktseite: zwei gleich breite Spalten mit 20px Abstand in höchstens
   1120px, darunter 1024px mit 20px Rand, auf dem Telefon untereinander.
   In jeder Spalte die Überschrift (Montserrat Black 32px) und 20px darunter
   der Inhalt. */
.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1140px;
  margin-inline: auto;
  padding: 45px 10px 90px;
}
@media (max-width: 1024px) { .kontakt-raster { padding-inline: 20px; } }
@media (max-width: 767px)  { .kontakt-raster { grid-template-columns: 1fr; } }
.kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.kontakt-spalte { display: flex; flex-direction: column; gap: 20px; }
.kontakt-spalte h2 { font-size: 32px; line-height: 1; text-transform: none; }

/* Akkordeon wie im Plugin: Frage Poppins 600 16,8px, Pluszeichen 20px in
   Akzentfarbe, Linie 10 % Weiß unter jedem Eintrag; die Antwort klappt über
   grid-template-rows auf (0fr → 1fr), eingerückt um 44px, in #9aa6b5. */
.faq-eintrag { border-bottom: 1px solid rgb(255 255 255 / 10%); }
.faq-frage {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  padding: 20px 8px 20px 20px;
  border: 0;
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-family: var(--schrift-poppins);
  font-size: 16.8px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
/* Silbentrennung nur hier — so im Original (gemessen: einzig am
   Fragetext der FAQ, auf keiner anderen Seite). */
.faq-frage-text { display: block; flex: 1; hyphens: auto; }
.faq-symbol { position: relative; flex: none; width: 20px; height: 20px; margin-top: 3px; }
.faq-symbol::before,
.faq-symbol::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: var(--akzent);
}
.faq-symbol::before { left: 0; right: 0; top: 10px; height: 2px; transform: translateY(-1px); }
.faq-symbol::after {
  top: 0; bottom: 0; left: 10px; width: 2px;
  transform: translateX(-1px);
  transition: transform 0.25s, opacity 0.25s;
}
.faq-frage[aria-expanded='true'] .faq-symbol::after { transform: translateX(-1px) scaleY(0); opacity: 0; }
.faq-antwort {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s;
}
.faq-frage[aria-expanded='true'] + .faq-antwort { grid-template-rows: 1fr; }
.faq-antwort-text {
  overflow: hidden;
  min-height: 0;
  padding: 0 8px 0 44px;
  font-family: var(--schrift-text);
  font-size: 15.68px;
  line-height: 1.6;
  color: #9aa6b5;
}
.faq-frage[aria-expanded='true'] + .faq-antwort .faq-antwort-text { padding-bottom: 22px; }
.faq-frage:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

/* Felder des Kontaktformulars: anders als bei der Bewerbung — 2,4 % Weiß,
   Rahmen 9 % Weiß, Rundung 13, 52px hoch (Telefon 50px, Schrift 16px). */
.formular-kontakt .feld-eingabe,
.formular-kontakt .feld-text {
  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;
}
.formular-kontakt .feld-eingabe { min-height: 52px; }
.formular-kontakt .feld-text { min-height: 145px; }
.formular-kontakt .einwilligung { color: var(--tinte); }
@media (max-width: 767px) {
  .formular-kontakt .feld-eingabe,
  .formular-kontakt .feld-text { font-size: 16px; }
  /* 12/14px Polster, Zeile 24px → 50px hoch, wie gemessen. */
  .formular-kontakt .feld-eingabe { min-height: 0; padding: 12px 14px; line-height: 1.5; }
  .formular-kontakt .feld-text { padding: 12px 14px; min-height: 138px; }
  /* Über „KONTAKT" 30px mehr, wenn die Spalten untereinander stehen. */
  #kontaktformular { padding-top: 30px; }
}

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

/* Albenliste: Spalte höchstens 1140px, 10px Rand, 35px unter dem
   Seitenkopf. Drei Spalten à 360px mit 30px Abstand, unter 1025px eine. */
.albenliste {
  max-width: 1160px;
  margin-inline: auto;
  /* Unter der letzten Karte 60px, unter 1025px 160px — beides gemessen. */
  padding: 35px 10px 60px;
}
@media (max-width: 1024px) { .albenliste { 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 Datum in der Akzentfarbe**
   (Wunsch des Betreibers) — im Original ein eigenes Rot des Plugins. */
.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-datum {
  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, auf dem Telefon 3,
   15px Abstand, Rundung 8. */
.albumseite {
  max-width: 1160px;
  margin-inline: auto;
  padding: 25px 10px 0;
  font-family: var(--schrift-poppins);
}
.album-kopf {
  margin-bottom: 40px;
  padding-bottom: 30px;
  text-align: center;
}
.album-kopf h1 {
  margin: 8px 0 20px;
  font-family: var(--schrift-poppins);
  font-size: 40px;
  line-height: 1.2;
  text-transform: none;
}
.album-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 15.2px;
  line-height: 1.5;
}
.album-meta-eintrag { display: flex; align-items: center; gap: 5px; }
.album-meta-eintrag .icon { width: 18px; height: 18px; color: var(--akzent); }
/* Bis 1024px: Angaben untereinander, Titel 32px, ohne Seitenrand (gemessen
   x=0 bei 768px); auf dem Telefon Titel 24px und wieder 10px Rand. */
@media (max-width: 1024px) {
  .albumseite { padding-inline: 0; }
  .album-kopf h1 { font-size: 32px; }
  .album-meta { flex-direction: column; gap: 10px; }
  .album-meta-eintrag { justify-content: center; }
}
@media (max-width: 767px) {
  /* Auf dem Telefon 25px unter dem Raster, darüber nicht (gemessen am
     inneren Elementor-Container). */
  .albumseite { padding-inline: 10px; padding-bottom: 25px; }
  .album-kopf h1 { font-size: 24px; }
}

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

/* Schleier der Seitenköpfe je Seite — gemessen (Schreibtisch / Telefon). */
.seitenkopf[data-banner='fotos']::before { opacity: 0.61; }
.seitenkopf[data-banner='kontakt']::before { opacity: 0.75; }
@media (max-width: 767px) {
  .seitenkopf[data-banner='fotos']::before { opacity: 0.48; }
  .seitenkopf[data-banner='kontakt']::before { opacity: 0.49; }
}

/* ------------------------------------------------------------ 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. */
.formular {
  position: relative;
  padding: 32px;
  border: 1px solid #262b36;
  border-radius: 16px;
  background: rgb(2 1 1 / 0%);
  font-family: var(--schrift-poppins);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 767px) { .formular { padding: 24px 20px; } }
.formular-titel {
  margin-bottom: 16px;
  font-size: 25.6px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--akzent);
}
.formular-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 767px) { .formular-raster { grid-template-columns: 1fr; } }
.formular-raster .feld-voll { grid-column: 1 / -1; }
.formular > .feld { margin-bottom: 16px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld-label {
  display: block;
  font-family: var(--schrift-display);
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  color: #cfd6e0;
}
.feld-label-gruppe { line-height: 1.5; }
.feld-pflicht { color: #f43f5e; }

/* `line-height` nach `font: inherit` — die Kurzschrift setzt sie zurück. */
.feld-eingabe,
.feld-text {
  display: block;
  width: 100%;
  /* Kein Rahmen; die Farbe steht trotzdem wie im Original (#666 bzw.
     #333a47 an der Textfläche). */
  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;
}
.feld-eingabe { padding: 8px 16px; }
.feld-text { padding: 12px 14px; resize: vertical; border-color: #333a47; }
.feld-eingabe:focus,
.feld-text:focus { outline: 2px solid var(--akzent); outline-offset: 0; }
.feld-text::placeholder { color: rgb(255 255 255 / 45%); }

.feld-datei {
  display: block;
  width: 100%;
  font-family: var(--schrift-poppins);
  font-size: 14.08px;
  line-height: 1.5;
  color: #cfd6e0;
}
/* Der Knopf im Dateifeld trägt Polster und Rahmen — so ist das Feld wie im
   Original 39px hoch statt der 21px des Browserknopfs. */
.feld-datei::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;
}

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

.formular-knopf {
  display: block;
  width: 100%;
  padding: 14px 30px;
  border: 0;
  border-radius: 10px;
  background: var(--akzent);
  color: var(--akzent-tinte);
  font: inherit;
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  cursor: pointer;
}
.formular-knopf:hover { filter: brightness(1.1); }
.formular-knopf[disabled] { opacity: 0.6; cursor: wait; }

/* Seiten mit Formular: Spalte 1120px, 10px Rand. */
.formularseite {
  max-width: 1140px;
  margin-inline: auto;
  padding: 45px 10px 70px;
}
.jobs-einleitung { margin-bottom: 19px; }
@media (max-width: 1024px) { .formularseite { padding-inline: 20px; } }
@media (max-width: 767px)  { .jobs-einleitung p { font-size: 14px; } }

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

/* **Die Erfolgsmeldung war eine rote Textzeile.**

   Rot ist auf dieser Seite die Akzentfarbe — und zugleich die Farbe, in
   der jeder Fehler steht. Wer eine Bewerbung abgeschickt hatte, las
   „Danke! Wir haben deine Bewerbung" in derselben Farbe wie „Bitte
   stimme der Datenschutzerklaerung zu", in derselben Groesse, an
   derselben Stelle. Das ist im besten Fall uebersehbar und im
   schlechteren beunruhigend.

   Jetzt ein eigener Kasten mit Flaeche, Rahmen und Zeichen. Eine
   Einsendung ist der Moment, in dem jemand etwas aus der Hand gibt —
   dort gehoert die deutlichste Rueckmeldung der ganzen Seite hin, nicht
   die leiseste.

   Im Ruhezustand nimmt die Meldung keinen Platz ein: `min-height` auf
   einer leeren Zeile haette sonst dauerhaft eine Luecke ueber dem Knopf
   hinterlassen. */
.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 — der Text
   sagt bereits, was los ist. */
.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 Magenta läge zu nah am Rot des
   Fehlerfalls. #2e7d32 als Kante, die Schrift bleibt weiß. */
.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(204 32 38 / 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); }

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

/* Grund #0f0f0f über die ganze Seite, Spalte höchstens 820px, 20px Rand,
   40px oben, 87px unten — gemessen. */
.eventseite {
  background: #0f0f0f;
  padding-inline: 20px;
}
.event { max-width: 820px; margin-inline: auto; 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-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
  padding-inline: 10px;
}
.eventknopf {
  display: flex;
  gap: 10px;
  height: 50px;
  padding: 18px 24px;
  border-radius: 10px;
  background: #242424;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: none;
}
.eventknopf::after { content: none; }
.eventknopf-akzent { background: var(--akzent); }
.eventknopf .icon { width: 14px; height: 14px; }

/* Datumszeile: „SA 31.OKT • 22:00 UHR", Montserrat Bold 20px, 46px unter
   den Knöpfen. */
.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-punkt {
  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, Fließtext in Inter.
   Verweise in der Akzentfarbe (Wunsch des Betreibers; im Original die
   Linkfarbe des Themes) — Textvariante, 15px gilt nicht als große Schrift. */
.event-text {
  margin-top: 26px;
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 27px;
  color: #cccccc;
}
/* Emoji: 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.

   **Das Zeichen ist breiter als 1em** (Apple Color Emoji: 19px bei 15px
   Schrift). In einem 1em-Kasten ragte es nach rechts heraus und deckte das
   folgende Leerzeichen zu. Deshalb auf 80 % verkleinert; Breite und Rand
   sind durch 0,8 geteilt, der Kasten bleibt 1em + 2 × 0,07em der Zeile. */
.event-text .emoji {
  display: inline-block;
  width: 1.25em;
  margin: 0 0.0875em;
  font-size: 0.8em;
  text-align: center;
  line-height: 1;
  vertical-align: -0.1em;
}
.event-text a {
  color: var(--akzent-text);
  overflow-wrap: anywhere;
}

/* Infokasten. */
.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;
}
.info-raster {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px;
}
.info-eintrag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 47%;
  padding: 10px;
}
@media (max-width: 767px) { .info-eintrag { width: 100%; } }
.info-label {
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.info-label-poppins { font-family: var(--schrift-poppins); }
.info-wert {
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.info-zusatz {
  font-family: var(--schrift-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinte-still);
}

/* Zurück: grau, Montserrat Black 13px, Pfeil davor, mittig, 26px unter dem
   Kasten (davon 20px Polster des Verweises). */
.zurueck-zeile { display: flex; justify-content: center; margin-top: 26px; }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  border-radius: 3px;
  font-family: var(--schrift-display);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.zurueck .icon { width: 13px; height: 13px; }
.zurueck:hover { color: var(--tinte); }

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

/* Impressum und Datenschutz wie der Clubinio-Rechtsbaustein des Originals:
   Spalte 700px, 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. */
/* Breite: die Hälfte des Fensters, 10px Polster je Seite — 700px bei 1440,
   364px bei 768 (gemessen); auf dem Telefon volle Breite mit 20px Rand. */
.rechtsseite {
  width: 50%;
  margin-inline: auto;
  padding: 50px 10px 49px;
}
@media (max-width: 767px) { .rechtsseite { width: 100%; padding-inline: 20px; } }
.rechtsseite h1 {
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--akzent);
}
.recht-abschnitt { margin-bottom: 32px; }
.recht-abschnitt:last-child { margin-bottom: 0; }
.recht-abschnitt 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 (gemessen: Absätze genau 77px auseinander). */
.recht-abschnitt p { margin-bottom: 14px; }
.recht-abschnitt p:last-child { margin-bottom: 0; }
.recht-abschnitt p,
.recht-abschnitt li {
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 1.5;
}
.recht-abschnitt ul { margin: 0 0 0.9rem; padding-left: 20px; }
.recht-abschnitt li + li { margin-top: 0.3rem; }
.recht-abschnitt a { color: var(--akzent); }
.recht-abschnitt a:hover { text-decoration: underline; }

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

/* Grund #0c0c0c, Polster 72px / 8vw. Drei Spalten 40 / 30 / 30 %: links
   Marke, Text und Rechtliches, die mittlere bleibt leer, rechts Social,
   Anfahrt und „powered by Clubinio". Bis 1024px untereinander — die rechte
   Spalte zuerst, wie im Original. */
/* Grund, Linie und Polster sitzen auf dem Raster, nicht auf <footer>:
   Die Standzeile darunter liegt im Original außerhalb der Fläche, auf dem
   Seitengrund. */
.fuss-raster {
  background: var(--fuss);
  border-top: 1px solid rgb(254 112 112 / 12%);
}
/* In den Spalten trägt `gap` den Abstand, nicht der Absatzrand. */
.fuss p { margin: 0; }
.fuss-raster {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  padding: 72px var(--rand-kopf);
}
/* Absatz → Linkliste: 20px auf dem Schreibtisch, 30px darunter. Mit
   `.fuss-marke` davor — die Grundregel `.fuss-links { margin: 0 }` steht
   weiter unten und überstimmte die einfache Klasse. */
@media (max-width: 1024px) { .fuss-marke .fuss-links { margin-top: 10px; } }
.fuss-marke { grid-column: 1; }
.fuss-seite { grid-column: 3; grid-row: 1; }

.fuss-marke,
.fuss-seite {
  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-links { margin: 0; padding: 0; list-style: none; }
.fuss-links 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: #cc3366;
}
.fuss-links a span { display: inline-block; color: var(--akzent-text); }
.fuss-links a:hover span { text-decoration: underline; }

/* „FOLLOW US", „ANFAHRT" stehen in Versalien im Text, nicht per CSS. */
.fuss-seite h2 { font-size: 17px; line-height: 1; text-transform: none; }
.fuss-seite address {
  display: flex;
  flex-direction: column;
  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%;
  background: rgb(2 1 1 / 0%);
}
.fuss-social svg { width: 23px; height: 23px; color: var(--akzent); }
.clubinio img { width: 102px; height: auto; }

/* Standzeile ganz unten. */
.fuss-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-seite { 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; aus gerundeten
     Werten abgelesen waren es 69. */
  .fuss-raster { gap: 70.18px; padding: 20% var(--rand-kopf); }
  .fuss-marke, .fuss-seite { width: 100%; align-items: flex-start; }
  .fuss-marke p { font-size: 15px; }
  .fuss-logo { width: 40%; }
  /* 28 % der Spalte = 98,27px, genau wie das Original (98px fest wären
     0,1px niedriger). */
  .clubinio img { width: 28%; }
}

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

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

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

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

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

/* 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-mehr svg { transition: transform 0.3s var(--kurve); }
.karte:hover .karte-mehr svg { transform: translateX(4px); }

/* Eventknöpfe „schweben" beim Überfahren (Elementor-Hover „float"). */
.eventknopf { transition: transform 0.3s; }
.eventknopf:hover { transform: translateY(-8px); filter: none; }

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

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

/* 404: Kennzahl in Akzentfarbe, Zeile, Satz, zwei Knöpfe — mittig. */
.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; }
.fehler-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.knopf-dunkel { background: #242424; box-shadow: none; }