/* ============================================================================
   Palo Hannover — Design und Layout
   ----------------------------------------------------------------------------
   Übernahme der bestehenden palopalo.de (WordPress mit Elementor, Theme
   „Hello Elementor", und den Clubinio-Plugins). Alle Maße und Farben sind
   an der laufenden Seite gemessen und stehen in referenz/*.json;
   tools/abgleich.py vergleicht dagegen.

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

   Grund #111, Kopf und Fuß #181818, weiße Schrift, NEXA, Akzent Gold
   #e5c083, Knöpfe als Umrisspillen in Gold (Rundung 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 palopalo.de** (`/wp-content/uploads/2025/08/`),
   nicht nur dieselbe Familie. Siehe assets/fonts/LIZENZEN.md.

   **Gewicht 700 ist Black.** So legt es das Original an; 600, 800 und 900
   fallen dort wie hier auf diesen Schnitt.

   **Fließtext in Inter** (Betreiber, 31.10.2026): Absätze, Listen,
   Formulare, Rechtstexte, Fuß. NEXA bleibt für Überschriften, Menü,
   Knöpfe, Daten und die Getränkekarte. Was das Original „Roboto" oder
   „Poppins" nennt — geladen nie, gezeichnet also die Ersatzschrift —,
   ist damit ebenfalls Inter. Dieselbe Datei wie palacio-hp und baggi-hp. */
@font-face { font-family: 'NEXA'; src: url('../fonts/nexa-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'NEXA'; src: url('../fonts/nexa-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'NEXA'; src: url('../fonts/nexa-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@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 palopalo.de (referenz/*.json). */
  --nacht:        #111111;   /* Seitengrund (Elementor-Kit) */
  --kopf:         #181818;   /* Kopfleiste, aufgeklapptes Menü */
  --menu:         #181818;
  --karte:        #111111;   /* Eventkarte */
  --karte-bild:   #0a0a0a;   /* Fläche hinter dem Flyer */
  --fuss:         #181818;   /* Fußbereich */

  /* Zwei Ebenen: NEXA für Überschriften, Menü, Knöpfe; Inter für den
     Fließtext (siehe Schriften oben). */
  --schrift-display: 'NEXA', sans-serif;
  --schrift-text:    'Inter', system-ui, -apple-system, sans-serif;

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

  /* **Akzent `#e5c083`** — gemessen an Menü, Knöpfen, Kartendatum,
     Fußüberschriften (Elementor-Farbe „accent"). Clubinio führt `#e5bf82`;
     maßgeblich ist, was ein Gast sieht. */
  --akzent:       #e5c083;
  --akzent-rgb:   229 192 131;
  /* **Schrift auf Goldfläche: dunkel statt weiß.** Das Original setzt Weiß
     auf #e5c083 (Ticketknopf) — 1,8:1, weit unter WCAG AA. #111 erreicht
     11,4:1. Der Absendeknopf der Formulare ist im Original schon schwarz. */
  --akzent-tinte: #111111;
  /* Gold ist auf dem dunklen Grund ohnehin hell genug (≥ 10:1) — Text-
     und Flächenvariante sind deshalb derselbe Wert. */
  --akzent-text:  #e5c083;
  --akzent-flaeche: #e5c083;
  --akzent-hell:  #e5c083;
  --link-text:    #cc3366;   /* Verweisfarbe des Themes (unsichtbar unter Spans) */

  /* Seitenrand von Kopf und Fuß. */
  --rand-kopf:    5%;

  --breite:       1140px;
  --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='%23111111' 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");
  /* Haken der Aufzählungen (Font Awesome „check", wie im Original). */
  --haken-voll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%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: 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-text);
  /* 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: NEXA. Versalien stehen im Original im Text, nicht per
   CSS — hier ebenso (sonst misst `text-transform` anders). */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 900;
}

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

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

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

.icon { flex: none; }

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

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

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

.unterzeile { margin: 0; }

/* Knopfreihe. */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }

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

/* Knopf: Umrisspille wie im Original — 2px Linie in Gold, Grund
   durchsichtig, NEXA 900 (gezeichnet Black) 15px/15px in Versalien, Polster
   12/24, Rundung 20, kein Pfeil (gemessen: 236×43 bei „ALLE EVENTS
   ANSEHEN"). Nur der Hero-Knopf hat auf dem Telefon 1px.

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

/* Zweite Stufe: dunkle Fläche statt Umriss — Lounge auf den Eventseiten,
   „Startseite" auf der 404. */
.knopf-leer { border-color: #242424; background: #242424; color: var(--tinte); }

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

/* **Kopf, Menü, Start-Hero und Seitenkopf vom System (cosmopolar.com)** —
   aus der Vorlage roxy-hp, deren Betreiber das am 31.10.2026 so
   entschieden hat (ebenso excalibur-hp, palacio-hp). Hier übernommen als
   Systemgerüst (R8), nicht als Nachbau von palopalo.de; Farben, Schrift,
   Logo und Texte sind Palo. **Dem Betreiber vorgelegt** (.auftrag.md).
   Diese drei Bereiche nimmt tools/abgleich.py benannt aus.

   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(24 24 24 / 92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Weichzeichner aus, solange das Menü offen ist: `backdrop-filter` erzeugt
   einen umgebenden Block für `position: fixed`, und das Vollbildmenü wäre
   dann nur so hoch wie die Kopfzeile (in cosmopolar-hp so passiert). */
.kopf[data-offen='ja'] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

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

/* Logo in der Höhe von cosmopolar.com (46px, Telefon 34px). Die Palo-
   Wortmarke ist 1,9:1 — 88px breit. */
.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(0.9rem, 1.8vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .menu li { display: flex; align-items: center; } }

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

/* „Mehr": ein Knopf in der Schrift der Punkte, dahinter ein Winkel. Er
   leuchtet, wenn die aktuelle Seite darunter liegt. */
.menu-mehr-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.7;
  cursor: pointer;
  transition: color 0.15s ease;
}
.menu-mehr-knopf::after {
  content: '';
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.25em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--kurve);
}
.menu-mehr-knopf[aria-expanded='true']::after { transform: translateY(0.2em) rotate(-135deg); }
.menu-mehr-knopf:hover,
.menu-mehr:has([aria-current='page']) > .menu-mehr-knopf { color: var(--akzent-hell); }

/* Breit: Klappliste unter dem Knopf, rechtsbündig. Offen beim Überfahren
   und per Klick oder Enter (ui.js, `aria-expanded`). Kein `:focus-within`:
   Es hielte die Liste nach Escape offen, solange der Knopf den Fokus hat.
   Ein unsichtbarer Steg (`::after`) überbrückt den Spalt zum Knopf, sonst
   klappte sie auf dem Weg dorthin zu. */
@media (min-width: 900px) {
  .menu-mehr { position: relative; }
  .menu .menu-unter {
    position: absolute;
    top: 100%;
    right: -1.25rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 13rem;
    padding: 0.75rem 0;
    border: 1px solid rgb(var(--tinte-rgb) / 10%);
    border-radius: 10px;
    background: rgb(24 24 24 / 97%);
    box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.25s var(--kurve), visibility 0.2s ease;
  }
  .menu-mehr::after {
    content: '';
    position: absolute;
    inset: 100% 0 auto;
    height: 0.75rem;
  }
  .menu-mehr:hover .menu-unter,
  .menu-mehr-knopf[aria-expanded='true'] + .menu-unter {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .menu-unter li { display: block; }
  .menu-unter a { display: block; padding: 0.45rem 1.25rem; }
}

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

  /* Dicht gestellt ([entschieden] Betreiber, 31.10.: „deutlich weniger
     Abstand"): kein Spalt, die Punkte nur mit schmalem Polster. */
  .menu ul { flex: none; flex-direction: column; align-items: center; gap: 0; }
  /* 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; line-height: 1.25; padding-block: 0.3rem; }
  /* Ab 24px große Schrift — dort trägt das Originalrot. */
  .menu a:hover,
  .menu a[aria-current='page'] { color: var(--akzent); }

  /* „Mehr" in der Größe der Punkte; die vier darunter kleiner und erst
     nach dem Antippen — so bleibt das Vollbildmenü ruhig. */
  .menu-mehr-knopf { font-size: clamp(1.75rem, 7vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.25; padding-block: 0.3rem; }
  .menu-mehr:has([aria-current='page']) > .menu-mehr-knopf { color: var(--akzent); }
  .menu .menu-unter { display: none; gap: 0; margin-block: 0.25rem 0.5rem; }
  .menu-mehr-knopf[aria-expanded='true'] + .menu-unter { display: flex; }
  .menu-unter a { font-size: clamp(1.25rem, 5vw, 1.5rem); color: rgb(var(--tinte-rgb) / 80%); }

  .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; }
  .kopf[data-offen='ja'] .menu li:nth-child(6) { transition-delay: 0.33s; }
  .kopf[data-offen='ja'] .menu li:nth-child(7) { transition-delay: 0.38s; }

  @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;
}
.hero-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Querformate auf dem Schreibtisch, Hochformate bis 767px — dieselbe
   Grenze wie im Original. */
.hero-medium[data-format='hoch'] { display: none; }
@media (max-width: 767px) {
  .hero-medium[data-format='quer'] { display: none; }
  .hero-medium[data-format='hoch'] { display: block; }
}
/* Schleier wie cosmopolar.com, in der Mitte dichter (65 % statt 35 %):
   Die goldene Augenbraue kam auf den hellen Stellen der Diashow nur auf
   1,9–2,7:1 (tools/bildkontrast.js). Abweichung für WCAG AA. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 65%) 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);
}
.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: Grund 30 % #111 wie im Original (dort 18px auf dem
   Schreibtisch), als Pille wie auf cosmopolar.com. */
.hero-text .knopf {
  padding: 0.7rem 1.4rem;
  border-radius: 980px;
  background: rgb(17 17 17 / 30%);
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 767px) { .hero-text .knopf { font-size: 15px; border-width: 1px; } }
.hero-text .knopf:hover { background: var(--akzent); }

/* **Diashow** — aus palacio-hp (dort aus sundayfunday-hp, gleicher
   Elementor-Baukasten). Projekteigen sind nur Dauer und Anzahl: 5 s je
   Bild, 0,5 s Überblendung, langsamer Zoom — wie das Original. Reines CSS;
   die Verzögerung je Bild steht hier, weil ein Inline-Style unter
   `style-src 'self'` nicht erlaubt wäre. Wer Bewegung abbestellt hat,
   sieht das erste Bild still. */
.hero--diashow { --dauer: 5s; }
.hero--diashow .hero-medium { --bilder: 4; }
.hero--diashow .hero-medium[data-format='hoch'] { --bilder: 5; }
.hero--diashow .hero-medium img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-dia calc(var(--bilder) * var(--dauer)) linear infinite;
}
.hero--diashow .hero-medium img:nth-child(1) { opacity: 1; }
.hero--diashow .hero-medium img:nth-child(2) { animation-delay: calc(var(--dauer) * 1); }
.hero--diashow .hero-medium img:nth-child(3) { animation-delay: calc(var(--dauer) * 2); }
.hero--diashow .hero-medium img:nth-child(4) { animation-delay: calc(var(--dauer) * 3); }
.hero--diashow .hero-medium img:nth-child(5) { animation-delay: calc(var(--dauer) * 4); }
/* Sichtbar ein Viertel (bei fünf Bildern ein Fünftel) der Runde — die
   Werte gelten für vier; bei fünf überlappt die Ausblendung 1 s, was im
   Dunkel der Überblendung nicht auffällt. */
@keyframes hero-dia {
  0%     { opacity: 0; transform: scale(1); }
  2.5%   { opacity: 1; }
  25%    { opacity: 1; }
  27.5%  { opacity: 0; transform: scale(1.15); }
  100%   { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--diashow .hero-medium img { animation: none; }
}

/* **Augenbraue** — Kicker über einer Überschrift, in der Akzentfarbe. Aus
   palacio-hp (dort als Systembaustein eingeführt). Gemessen: NEXA 400
   32px im Hero, 300 (Light) in den Bändern; auf dem Telefon 25px. Hier
   überall Black — [entschieden] Betreiber, 1.11.: „Headlines zu dünn". */
.augenbraue {
  margin: 0 0 20px;
  font-family: var(--schrift-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--akzent-text);
}
@media (max-width: 767px) { .augenbraue { font-size: 25px; } }

/* Fassungen je Breite. Das Original setzt an zwei Stellen auf dem Telefon
   einen anderen Text (Schlusspunkt, „PALO SINCE 1987."). */
@media (min-width: 768px) { [data-nur='schmal'] { display: none !important; } }
@media (max-width: 767px) { [data-nur='breit'] { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { [data-nicht='mittel'] { display: none !important; } }

/* --------------------------------------------------------- Bildbaender -- */

/* „Kult Klub" und „Palo mieten": Foto über die volle Breite, 600px hoch,
   der Text in einer Hälfte senkrecht mittig. Zwei Spalten mit 100px Rand
   und 100px Abstand (570px je Spalte bei 1440), auf dem Telefon eine mit
   30px Rand. Schleier #181818 mit 50 % Deckung (Elementor-Overlay, ein
   Pseudoelement — die Messung sieht es nicht, gelesen aus post-13.css). */
.abschnitt-bild {
  display: grid;
  align-items: center;
  min-height: 600px;
  padding-block: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.abschnitt-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(24 24 24 / 50%);
}
/* Auf dem Telefon liegt der Text über dem hellen Teil der Fotos (Original
   dort 2,0–3,8:1). Abweichung für WCAG AA: Schleier 75 %. */
@media (max-width: 767px) { .abschnitt-bild::before { background: rgb(24 24 24 / 75%); } }
.abschnitt-bild[data-bild='kult']   { background-image: url('../img/kult.webp'); background-position: right center; }
.abschnitt-bild[data-bild='mieten'] { background-image: url('../img/mieten.webp'); background-position: left center; }

.ueber {
  --breite: 100%;
  --gutter: 100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
}
.ueber--rechts .ueber-text { grid-column: 2; max-width: 512px; }
/* Rechts stehen Augenbraue und Überschrift so breit wie ihr Text (218 und
   498px bei 1440), links über die volle Spalte — so im Original. */
.ueber--rechts .ueber-text { display: flex; flex-direction: column; align-items: flex-start; }
/* Tablet: „Kult Klub" 388px ab 100px Rand, „Palo mieten" 357px ab 280px
   — gemessen. */
@media (min-width: 768px) and (max-width: 1024px) {
  .abschnitt-bild .ueber { grid-template-columns: 388px; }
  .abschnitt-bild .ueber--rechts { grid-template-columns: 357px; padding-left: 280px; }
  .ueber--rechts .ueber-text { grid-column: 1; }
}
@media (max-width: 767px) {
  .ueber { --gutter: 30px; grid-template-columns: 1fr; }
  .ueber--rechts .ueber-text { grid-column: 1; }
}

.ueber-text h2 {
  margin-bottom: 20px;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
}
/* Auf dem Telefon „PALO SINCE 1987." in Poppins 70px (im Original nicht
   geladen, gezeichnet der Ersatz), „IHR BUSINESS EVENT" 40px. */
@media (max-width: 767px) {
  .ueber-text h2 { font-family: var(--schrift-text); font-size: 40px; }
  #kult .ueber-text h2 { font-size: 70px; }
}
.ueber-text p:not(.augenbraue) {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}
.ueber-text .knopf-reihe { margin-top: 35px; }

/* -------------------------------------------------------- Wochentage -- */

/* **Neu: Wochentage.** Zwei Kacheln nebeneinander (720×450 bei 1440), je
   ein Foto, Text mittig: Tag in Gold (45px), Angebot in Weiß (40/44px),
   Uhrzeit gesperrt in Gold, darunter ein Hinweis in 9px. Auf dem Telefon
   untereinander, Tag 50px, Angebot 35px; auf dem Tablet 35/25px. */
.wochentage { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .wochentage { grid-template-columns: 1fr; } }
.wochentag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 50vh wie im Original (450px bei 900px Fensterhöhe). */
  min-height: 50vh;
  background-position: center;
  background-size: cover;
  text-align: center;
}
.wochentag[data-bild='freitag'] { background-image: url('../img/freitag.webp'); }
.wochentag[data-bild='samstag'] { background-image: url('../img/samstag.webp'); }
.wochentag > * { width: calc(100% - 30px); margin: 0; font-family: var(--schrift-display); }
.wochentag-name { font-size: 45px; font-weight: 700; line-height: 1; color: var(--akzent); }
.wochentag-angebot { margin-top: 10px; font-size: 40px; font-weight: 700; line-height: 1.1; }
.wochentag-zeit {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--akzent);
}
.wochentag-hinweis { margin-top: 10px; font-size: 9px; font-weight: 500; line-height: 11px; letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 1024px) {
  .wochentag-name { font-size: 35px; }
  .wochentag-angebot { font-size: 25px; line-height: 1; }
}
@media (max-width: 767px) {
  .wochentag-name { font-size: 50px; }
  .wochentag-angebot { font-size: 35px; }
}

/* --------------------------------------------------------------- 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 wie im Clubinio-Eventplugin des Originals: #111, Rundung 20, Flyer
   16:9 auf #0a0a0a — das Bild darin in natürlichem Verhältnis, nicht
   beschnitten. Grundschrift „Roboto" 16/24 (nie geladen, der Ersatz). */
.karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--karte);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
}
.karte-bild { aspect-ratio: 16 / 9; background: var(--karte-bild); }
.karte-bild img { width: 100%; height: auto; }

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

/* Der Abschnitt unten: 10px Abstand, 24px Polster; die 18px über der
   Zeile trägt die Zeile selbst, so wie die Messung sie sieht. */
.karte-abriss { margin: 0; padding: 10px 24px 24px; }
/* „MEHR ERFAHREN": NEXA 900 12/18, gesperrt, in Gold. */
.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(--akzent-text);
}

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

/* Monatsüberschrift der Eventliste: NEXA 800 32/38,4, Versalien, 1px
   gesperrt, zentriert, 60px über der ersten Karte der Gruppe. */
.monat {
  margin: 40px 0 20px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
.monat:first-child { margin-top: 0; }

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

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

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

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

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

/* Randloses Band: ohne Rundung, Kante an Kante, jedes Bild in seinem
   eigenen Verhältnis (4:5 und 2:3 gemischt). Das Band ist so hoch wie das
   höchste Bild, die Folien stehen oben — so misst es das Original (720px
   bei 1440, obwohl die sichtbaren drei 600px hoch sind). */
.slider-randlos .slider-band { align-items: flex-start; }

/* ------------------------------------------------------- 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 % — aus der
     Vorlage, dort für den Kontrast des Menüs auf dem Foto eingeführt
     (tools/bildkontrast.js prüft es hier für Gold). */
  background: linear-gradient(180deg, rgb(0 0 0 / 75%) 0, rgb(0 0 0 / 58%) 160px);
}
/* Bannerfotos des Originals, je Seite eines; auf dem Telefon die
   Hochformate, die das Original dort zeigt. */
.seitenkopf[data-banner='events']     { background-image: url('../img/banner/events.png'); }
.seitenkopf[data-banner='business']   { background-image: url('../img/banner/business.png'); }
.seitenkopf[data-banner='jobs']       { background-image: url('../img/banner/jobs.png'); }
.seitenkopf[data-banner='drinks']     { background-image: url('../img/banner/drinks.png'); }
.seitenkopf[data-banner='fundsachen'] { background-image: url('../img/banner/fundsachen.png'); }
.seitenkopf[data-banner='kontakt']    { background-image: url('../img/banner/kontakt.png'); }
@media (max-width: 767px) {
  .seitenkopf[data-banner='events']   { background-image: url('../img/banner/events-mobil.png'); }
  .seitenkopf[data-banner='business'] { background-image: url('../img/banner/business-mobil.png'); }
  .seitenkopf[data-banner='jobs']     { background-image: url('../img/banner/jobs-mobil.webp'); }
  .seitenkopf[data-banner='drinks']   { background-image: url('../img/banner/drinks-mobil.png'); }
  .seitenkopf[data-banner='kontakt']  { background-image: url('../img/banner/kontakt-mobil.png'); }
}
.seitenkopf h1 {
  font-size: clamp(3rem, 13vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* Unterzeile in Gold, NEXA Black (Original 400, siehe `.augenbraue`), 1rem unter der Zeile. Gold auf dem
   abgedunkelten Foto: gemessen in tools/bildkontrast.js. */
.seitenkopf .unterzeile {
  margin: 1rem auto 0;
  font-family: var(--schrift-display);
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--akzent-text);
}
/* Einleitender Satz unter der Unterzeile (Kontakt, Jobs, Fundsachen). */
.seitenkopf .einleitung {
  max-width: 686px;
  margin: 1.5rem auto 0;
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 759px) {
  .seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; }
  .seitenkopf:has(.einleitung) { aspect-ratio: auto; }
}

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

/* Monatsgruppen in einer Spalte von höchstens 1140px, 10px Rand. */
.seite-events .abschnitt { padding: 60px 0 40px; }
/* Spalte 1140px wie das Plugin (Karten 367px, 20px Abstand). */
.seite-events .abschnitt .huelle { --breite: 1160px; }
/* Kartentitel wie das Plugin: 26px, bis 1024px 21px, auf dem Telefon 24px;
   Rand bis 1024px 20px. */
@media (max-width: 1024px) {
  .seite-events .abschnitt .huelle { --gutter: 20px; }
  .seite-events .karte-titel { font-size: 21px; }
}
@media (max-width: 767px) { .seite-events .karte-titel { font-size: 24px; } }

/* ------------------------------------------------------------- Business -- */

/* **Neu: Hakenliste** — Aufzählung mit Haken in Gold (Font Awesome
   „check" des Originals, 12px), der Text als Span mit 5px Polster links —
   so misst ihn das Elementor-Listenwidget. Im Seitenkopf größer (NEXA
   20/30, als Block mittig, Zeilen linksbündig), im Text 16/24. */
.haken-liste { margin: 0; padding: 0; list-style: none; font-family: var(--schrift-text); font-size: 16px; line-height: 1.5; }
.haken-liste li { display: flex; align-items: center; }
.haken-liste li span { padding-left: 5px; }
.haken-liste li::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background: var(--akzent);
  -webkit-mask: var(--haken-voll) center / contain no-repeat;
  mask: var(--haken-voll) center / contain no-repeat;
}
.haken-liste--gross { display: inline-flex; flex-direction: column; margin-top: 60px; font-size: 20px; text-align: left; }
@media (max-width: 767px) { .haken-liste--gross { margin-top: 30px; font-size: 16px; } }
.ueber-text .haken-liste { margin-top: 34px; }

/* **Variante: Bild und Text** — zwei Spalten zu 535px, 50px Abstand
   (1120px), senkrecht mittig. Der Text hält zur Außenkante 10px. */
.ueber--bild {
  --breite: 1120px;
  --gutter: 0px;
  gap: 50px;
  align-items: center;
}
.ueber--bild .ueber-text:last-child { padding-right: 10px; }
.ueber--bild .ueber-text:first-child { padding-left: 10px; }
.ueber-bild { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Tablet: eine Spalte in der Reihenfolge des Markups — Bild 638px mittig,
   Text mit 75px Rand, Überschrift 49px. Telefon: Bild 350px (20px Rand),
   Text 30px Rand, Überschrift 40px; das Service-Bild zeigt das Original
   dort nicht. */
@media (max-width: 1024px) {
  .ueber--bild { --breite: 100%; grid-template-columns: 1fr; }
  .ueber--bild .ueber-bild { justify-self: center; max-width: 638px; }
  .ueber--bild .ueber-text { padding-inline: 75px; }
  .ueber--bild .ueber-text:first-child, .ueber--bild .ueber-text:last-child { padding-inline: 75px; }
  .ueber--bild .ueber-text h2 { font-size: 49px; }
}
@media (max-width: 767px) {
  .ueber--bild .ueber-bild { max-width: none; width: calc(100% - 40px); }
  .ueber--bild .ueber-text:first-child, .ueber--bild .ueber-text:last-child { padding-inline: 30px; }
  .ueber--bild .ueber-text h2 { font-family: var(--schrift-display); font-size: 40px; }
  #service .ueber-bild { display: none; }
}
.ueber-text strong { font-weight: 700; }

/* Abstände der Business-Abschnitte, gemessen: Location 90px über der
   Strecke, Service 100px über dem Partnerkasten. Der Service-Text steht
   oben, 10px unter der Bildkante — nicht mittig wie bei Location. */
#location { padding-bottom: 90px; }
#service { padding-block: 61px 100px; }
@media (max-width: 1024px) {
  #location { padding-bottom: 135px; }
  #service { padding-block: 105px 145px; }
  #service .ueber--bild { gap: 64px; }
}
@media (max-width: 767px) {
  #location { padding-bottom: 90px; }
  #service { padding-block: 16px 35px; }
  .seite-business #partner { padding-bottom: 131px; }
}
#service .ueber-text { align-self: start; margin-top: 10px; }

/* Räume: randlose Strecke, 10px Rand, drei Bilder (Telefon eins). */
.raeume { padding-inline: 10px; }

/* **Neu: Partnerkasten** — Trend ID in Grün, Polster 35px
   oben, 55px unten; Überschrift NEXA 600 36px mittig, darunter Text und
   Knopf links, Logo rechts (je 530px, 1100px). Knopf weiß mit grüner
   Schrift, ohne Linie.

   **Abweichung für WCAG AA:** Das Original nutzt #46a153 — Weiß darauf
   hat 3,24:1. #3a8544 ist derselbe Farbton, so wenig abgedunkelt wie
   nötig (Helligkeit 0,453 → 0,373): 4,55:1, für Fläche und Knopfschrift.
   tools/abgleich.py kennt genau dieses Paar (FARBTAUSCH). */
#partner { padding: 0 0 180px; }
#service + #partner { padding-top: 0; }
#partner .huelle { --breite: 100%; --gutter: 10px; }
.partner-kasten {
  display: flow-root;
  padding: 0 35px;
  background: #3a8544;
}
.partner-kasten h2 { max-width: 1140px; margin: 35px auto 0; font-size: 36px; font-weight: 600; line-height: 1; text-align: center; }
.partner-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
  max-width: 1100px;
  margin: 50px auto 0;
  padding-bottom: 55px;
}
.partner-raster p { margin: 0; font-size: 16px; line-height: 1.5; text-align: justify; }
.partner-raster img { justify-self: center; width: 334px; height: auto; }
.partner-kasten .knopf-reihe { margin-top: 34px; }
.partner-kasten .knopf { border: 0; background: #ffffff; color: #3a8544; text-transform: none; }
.partner-kasten .knopf:hover { background: #111111; color: #ffffff; }
/* Tablet: zwei gleiche Spalten mit je 20px Polster, Logo 188px.
   Telefon: eine Spalte, Polster 18px; Überschrift dreizeilig 36/43,2,
   Knopf und Logo 294px breit, 40px dazwischen. */
@media (max-width: 1024px) {
  .partner-raster { max-width: none; gap: 0; }
  .partner-raster > * { padding-inline: 20px; }
  .partner-raster img { width: 188px; padding: 0; }
}
@media (max-width: 767px) {
  .partner-kasten { padding: 0 18px; }
  .partner-kasten h2 { margin-top: 40px; line-height: 1.2; }
  .partner-raster { grid-template-columns: 1fr; gap: 40px; margin-top: 39px; padding-bottom: 38px; }
  .partner-raster img { justify-self: start; width: 294px; margin-left: 20px; }
  .partner-kasten .knopf-reihe { margin-top: 35px; }
  .partner-kasten .knopf { width: 100%; }
}

/* --------------------------------------------------------------- Drinks -- */

/* **Neu: Getränkekarte** wie die Elementor-Preislisten des Originals. Zwei
   Spalten zu 486px mit 20px Abstand, mittig (992px); auf dem Telefon eine.
   Karte: Grund rgba(24,24,24,.61), Rundung 30, Polster 50 (die letzte
   Liste hält 10px Abstand nach unten), 20px zur
   nächsten. Titel NEXA 700 20px mittig, Gruppentitel 20px in Gold, 10px
   darunter die Posten: Name 19/28,5, rechts Angabe (12px 600 in Gold) und
   Preis (19px 600). */
.seite-drinks .abschnitt { padding: 60px 0 150px; }
.getraenke {
  display: grid;
  grid-template-columns: repeat(2, 486px);
  justify-content: center;
  gap: 20px;
}
/* Tablet: zwei Spalten zu 308px, Polster 10px. Telefon: eine Spalte mit
   30px Rand, Polster 30px, Titel und Posten 15px. */
@media (max-width: 1024px) { .getraenke { grid-template-columns: repeat(2, 308px); } }
@media (max-width: 767px)  {
  .getraenke { grid-template-columns: 1fr; }
  .seite-drinks .abschnitt .huelle { --gutter: 30px; }
}
.getraenke .leer { grid-column: 1 / -1; }
.getraenke-spalte { display: flex; flex-direction: column; gap: 20px; }
.getraenke-karte {
  padding: 50px;
  border-radius: 30px;
  background: rgb(24 24 24 / 61%);
  font-family: var(--schrift-text);
}

.getraenke-karte h2,
.getraenke-karte h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.getraenke-karte h2 { margin-bottom: 10px; text-align: center; }
/* „Softdrinks" steht im Original als einziger Titel in „Poppins" (nie
   geladen, der Ersatz) — übernommen wie gemessen. */
.getraenke-karte[data-karte='Softdrinks'] h2 { font-family: var(--schrift-text); }
.getraenke-karte h3 { color: var(--akzent); }
.getraenke-gruppe + .getraenke-gruppe { margin-top: 20px; }
.getraenke-gruppe ul { margin: 10px 0 0; padding: 0; list-style: none; }
.getraenke-gruppe:last-child ul { margin-bottom: 10px; }
@media (max-width: 1024px) { .getraenke-karte { padding: 10px; } }
@media (max-width: 767px) {
  .getraenke-karte { padding: 30px; }
  .getraenke-karte h2, .getraenke-karte h3, .getraenke-karte .getraenk { font-size: 15px; }
}
.getraenk {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--schrift-display);
  font-size: 19px;
  line-height: 1.5;
}
/* Der Preis darf umbrechen (Tablet: „12% 0,75l / 159€" zweizeilig), wie
   im Original — dann linksbündig direkt neben dem Namen. */
.getraenk-preis { flex: 0 1 auto; font-weight: 600; }
.getraenk-preis small {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #e5bf83;
}

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

/* Aufklapper wie das Elementor-Akkordeon der Schwesterseiten (aus der
   Vorlage, roxy-hp) — `<details>`, ohne JavaScript bedienbar, Linie 8 %
   Weiß unter jedem Eintrag, offen ein Verlauf und ein 3px-Balken im
   Akzent. Palo hat im Original keine FAQ; der Block erscheint, sobald
   Clubinio Fragen führt (page-kontakt.js). */
.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 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 -- */

/* Formulare wie die der bestehenden Seite (Gravity Forms, Thema
   „orbital"): kein Kasten, Felder durchsichtig mit 1px-Linie #686e77,
   38px hoch, Rundung 20 (Bewerbung 10). Beschriftung „Roboto" 500
   14/20 in Weiß, „(erforderlich)" 12px in Gold daneben. Zwischen zwei
   Feldzeilen 40px, zwischen Spalten 16px. Absendeknopf über die volle
   Breite in Gold mit schwarzer Schrift, Rundung 3. Gemessen auf /kontakt/,
   /jobs/, /fundsachen/. */
.form {
  position: relative;
  display: grid;
  gap: 40px 16px;
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 1.43;
}
.form-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 16px;
  align-content: start;
}
@media (max-width: 640px) { .form-reihe { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 1024px) { .seite-jobs .form-reihe, .seite-fundsachen .form-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.feld { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
/* Bricht eine Beschriftung in Inter um (Fundsachen: „Wann hast du …"),
   bleiben die Felder einer Reihe trotzdem auf einer Linie. */
.form-reihe > .feld { justify-content: space-between; }
/* Beschriftung als Flexzeile wie im Original (Gravity Forms): Text und
   Pflichtmarke 6px auseinander, an der Grundlinie; bricht die Marke um,
   steht sie 6px tiefer in eigener Zeile (zweizeilig 43px, nicht 40). */
.feld > span,
.feld legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  color: var(--tinte);
}
.feld legend { margin-bottom: 12px; }
.feld-pflicht {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: #e5bf83;
}

/* `line-height` nach `font: inherit` — die Kurzschrift setzt sie zurück. */
.feld input:not([type='checkbox']):not([type='file']),
.feld select,
.feld textarea {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #686e77;
  border-radius: 20px;
  background: rgb(255 255 255 / 0%);
  color: var(--tinte);
  font: inherit;
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 38px;
}
.feld textarea { height: 288px; padding: 12px; line-height: 1.5; resize: vertical; }
.feld select { padding-right: 32px; -webkit-appearance: none; appearance: none;
  background: rgb(255 255 255 / 0%) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") right 14px center no-repeat; }
.feld select option { color: #111111; }
/* Feld halb so breit wie seine Beschriftung (Geschlecht). */
.feld--halb select, .feld--halb input { max-width: calc(50% - 8px); }
/* Auf /jobs/ ist der Absendeknopf so breit wie sein Text (97px). */
.seite-jobs .form > .knopf-reihe .knopf { width: auto; }
/* Auf /jobs/ ist das Gold der Pflichtmarke eine Stufe anders (#e4bf83). */
.seite-jobs .feld-pflicht { color: #e4bf83; }
.seite-jobs .feld input:not([type='checkbox']):not([type='file']),
.seite-jobs .feld select { border-radius: 10px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; }

/* Dateifeld: dieselbe Linie wie die übrigen, der Knopf darin ohne Rahmen. */
.feld input[type='file'] {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px 0 0;
  border: 1px solid #686e77;
  border-radius: 10px;
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 36px;
  color: var(--tinte);
  background: rgb(255 255 255 / 0%);
}
.feld input[type='file']::file-selector-button {
  height: 100%;
  margin-right: 12px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid #686e77;
  background: rgb(255 255 255 / 6%);
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
}
/* **Neu: Hinweis unter einem Feld** (erlaubte Dateien) — 13/18,6 in Gold. */
.feld-hinweis { font-size: 13px; line-height: 1.43; color: #e4bf83; }

/* Ankreuzfelder untereinander, 12px Abstand zum Text, 12px zwischen den
   Zeilen. Kästchen und Beschriftung sind Geschwister (`label for`), wie
   im Original — die Beschriftung füllt die Zeile. */
.auswahl { display: flex; flex-direction: column; gap: 12px; }
.auswahl > div { display: flex; align-items: center; gap: 12px; }
.auswahl > div > label { flex: 1; }
.auswahl label,
.zustimmung {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 1.43;
  color: var(--tinte);
  cursor: pointer;
}
.auswahl input,
.zustimmung input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--akzent); }

/* Absendeknopf: volle Breite, Gold, schwarze Schrift „Roboto" 500 14px,
   38px hoch, Rundung 3 — kein Umriss wie die übrigen Knöpfe. 24px unter
   dem letzten Feld statt der 40px zwischen Feldzeilen. */
.form > .knopf-reihe { margin-top: -16px; }
.form > .knopf-reihe .knopf {
  width: 100%;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgb(0 0 0 / 0%);
  border-radius: 3px;
  background: #e5bf83;
  color: #000000;
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}
.form > .knopf-reihe .knopf:hover { filter: brightness(1.08); }

/* 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.** Im Ruhezustand
   nimmt sie 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;
}
.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); }
/* Fehler in einem warmen Rot, nicht in Gold: Gold ist die Marke. */
.rueckmeldung[data-state='fehler'] {
  background: rgb(220 70 60 / 16%);
  box-shadow: inset 0 0 0 1px #dc463c;
  color: var(--tinte);
}
.rueckmeldung[data-state='fehler']::before { background-color: #dc463c; background-image: var(--ausruf); }
.rueckmeldung[data-state='laeuft'] { color: var(--tinte-still); }

/* -------------------------------------------------------- Kontakt, Jobs -- */

/* Kontakt: links die vier Hinweise (500px), rechts das Formular (550px),
   40px dazwischen. Jobs und Fundsachen: das Formular allein, 686px mittig.
   Auf dem Telefon untereinander, 30px Rand. */
.seite-kontakt .abschnitt,
.seite-jobs .abschnitt,
.seite-fundsachen .abschnitt { padding: 60px 0 120px; }
.seite-kontakt .abschnitt { padding-bottom: 159px; }
.seite-fundsachen .abschnitt { padding-bottom: 140px; }
.seite-jobs .abschnitt { padding-bottom: 160px; }
@media (max-width: 767px) {
  .seite-jobs .abschnitt { padding-bottom: 140px; }
}
@media (max-width: 1024px) { .seite-kontakt .abschnitt { padding-bottom: 192px; } }
@media (max-width: 767px)  { .seite-kontakt .abschnitt { padding-bottom: 151px; } }
.kontakt-raster {
  display: grid;
  grid-template-columns: 500px 550px;
  /* Rechtsbündig in der Hülle (190–1280px bei 1440) — so im Original. */
  justify-content: end;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1100px) { .kontakt-raster { grid-template-columns: 294px 344px; } }
@media (max-width: 767px)  { .kontakt-raster { grid-template-columns: 1fr; gap: 60px; } }
.seite-jobs .form,
.seite-fundsachen .form { max-width: 686px; margin-inline: auto; }
@media (max-width: 1024px) { .seite-kontakt .abschnitt .huelle { --gutter: 30px; } }
/* Tablet: Bewerbung und Fundsachen in der Spalte der Überschrift (357px),
   weiter zweispaltig. Telefon: 20px Rand, Kontakt 30px. */
@media (max-width: 1024px) {
  .seite-jobs .form,
  .seite-fundsachen .form { max-width: 357px; }
}
@media (max-width: 767px) {
  .seite-kontakt .abschnitt .huelle { --gutter: 30px; }
  .seite-jobs .abschnitt .huelle,
  .seite-fundsachen .abschnitt .huelle { --gutter: 20px; }
  .seite-jobs .form,
  .seite-fundsachen .form { max-width: none; }
}

/* Hinweise: Symbol 50px in Gold, 5px daneben die Überschrift (NEXA 600
   25/30), darunter der Satz (15/22,5). Systembaustein `.zeile`. */
.kontakt-hinweise { display: flex; flex-direction: column; gap: 69px; padding-top: 13px; }
.zeile { display: flex; align-items: flex-start; gap: 5px; }
.zeile .icon { flex: none; width: 50px; height: 50px; color: var(--akzent); }
/* Die Überschrift misst im Original als Inline-Span (32px hoch bei 30px
   Zeilenhöhe) — deshalb der Span bzw. Verweis darin. */
.zeile h2 {
  margin: 0 0 15px;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
}
/* Der erste Hinweis steht im Original in „Poppins" (nie geladen). */
.zeile:first-child p { font-family: var(--schrift-text); }
.zeile p { margin: 0; font-size: 15px; line-height: 1.5; }
.zeile p a { color: var(--akzent); }
.zeile h2 a:hover, .zeile p a:hover { text-decoration: underline; }

.kontakt-faq { max-width: 1090px; margin: 80px auto 0; }
.kontakt-faq h2 { margin-bottom: 20px; font-size: 32px; line-height: 1; }

/* ------------------------------------------------------------- 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; color: #333333; }
.seite-event .event { color: var(--tinte); }
.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, NEXA Black 14px mit 1px Sperrung;
   Tickets als Goldfläche, Lounge #242424. Symbol 14px, 10px davor.

   **Abweichung für WCAG AA:** Das Original setzt Weiß auf Gold (1,8:1);
   hier steht die Ticketbeschriftung in #111 (11,4:1). */
.event .knopf-reihe {
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
  padding-inline: 10px;
}
.event .knopf-reihe .knopf {
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 18px 24px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 0.3s;
}
.event .knopf-reihe .knopf:not(.knopf-leer) {
  border: 0 none #ffffff;
  background: var(--akzent);
  color: var(--akzent-tinte);
}
.event .knopf-reihe .knopf-leer { border: 0; }
/* 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", NEXA 700 20px, 46px unter
   den Knöpfen. Der Punkt dazwischen steht in Poppins 13px. */
.event-datum {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 46px;
  font-family: var(--schrift-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--akzent);
}
.event-datum span[aria-hidden] {
  color: var(--akzent-text);
  font-family: var(--schrift-text);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}
.event h1 {
  margin-top: 26px;
  text-transform: uppercase;
  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 ([entschieden] Betreiber, 31.10.; Original: Theme-Rot). */
.event-text {
  margin-top: 26px;
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 27px;
  color: #cccccc;
}
/* **Neu: Emoji-Kasten.** Im Original ein 1em-Bild mit 0,07em Rand je Seite
   (WordPress). Hier das Zeichen der Systemschrift in einem Kasten
   derselben Breite — so bricht der Text an denselben Stellen um. */
.event-text .emoji {
  display: inline-block;
  width: 1em;
  margin: 0 0.07em;
  text-align: center;
  line-height: 1;
  vertical-align: -0.1em;
}
.event-text a {
  font-family: var(--schrift-text);
  color: var(--akzent);
  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 {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}
.infokasten dl {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 10px;
}
.infopaar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 47%;
  padding: 10px;
}
@media (max-width: 767px) { .infopaar { width: 100%; } }
.infopaar dt {
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.infopaar dd { margin: 0; }
.infopaar dd span {
  display: block;
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.infopaar dd small {
  display: block;
  margin-top: 3px;
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  color: var(--tinte-still);
}

/* „Zurück": grau, NEXA Black 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-display);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinte-still);
  border-radius: 3px;
}
.event > .zurueck { display: flex; width: max-content; }
.zurueck .icon { width: 13px; height: 13px; }
.zurueck:hover { color: var(--tinte); }

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

/* Impressum und Datenschutz wie im Original: Text des Themes Hello
   Elementor in der Ersatzschrift („Roboto" ist dort nie geladen), Spalte
   1140px, 108px unter dem Kopf. h1 40/48, h2 32/38,4, h3 28/33,6, h4
   24/28,8 in 500; Text 16/24; Absätze 14,4px auseinander (0,9rem);
   Verweise in Gold. */
.seite-recht .abschnitt { padding: 100px 0 100px; }
.rechtstext { --breite: 1140px; --gutter: 0px; font-family: var(--schrift-text); }
/* Tablet: 100px Rand; Telefon: 15px Rand, 85px weniger Luft unter dem
   Kopf — wie im Original. */
@media (max-width: 1160px) { .rechtstext { --gutter: 100px; } }
@media (max-width: 767px) {
  .rechtstext { --gutter: 15px; }
  .seite-recht .abschnitt { padding-block: 15px 16px; }
}
/* Abstände wie Hello Elementor: Überschriften 0,5rem oben, 1rem unten. */
.rechtstext h1, .rechtstext h2, .rechtstext h3, .rechtstext h4 {
  margin: 0.5rem 0 1rem;
  font-family: var(--schrift-text);
  /* Original 500 — fetter wie alle Überschriften (Betreiber, 1.11.). */
  font-weight: 700;
}
.rechtstext h1 { font-size: 40px; line-height: 1.2; }
.rechtstext h2 { font-size: 32px; line-height: 1.2; }
.rechtstext h3 { font-size: 28px; line-height: 1.2; }
/* Beginn eines zweiten Textblocks: 14,4px Absatzrand + 20px Block-
   abstand + 8px Überschriftenrand, ohne Zusammenfall = 42,4px. */
.rechtstext .rechtstext-block { margin-top: 42.4px; }
.rechtstext h4 { font-size: 24px; line-height: 1.2; }
.rechtstext p,
.rechtstext li {
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
}
.rechtstext p { margin: 0 0 0.9rem; }
.rechtstext ul { margin: 0; padding-left: 40px; }
.rechtstext strong { font-weight: 700; }
.rechtstext a { color: #e5bf83; overflow-wrap: anywhere; }
/* Ein Satz im Impressum trägt im Original eine eigene Schrift (Rest einer
   Einfügung, als Inline-Stil) — hier als Klasse, weil die CSP keine
   Inline-Stile erlaubt. */
.rechtstext .eingefuegt { font-family: var(--schrift-text); }
.rechtstext a:hover { text-decoration: underline; }

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

/* Grund #181818, Polster 72px. Vier Spalten: Marke (Logo, Satz, Symbole),
   „Wichtiges", „Anfahrt", „Business" — 46 / 17 / 17 / 20 % der Breite
   (596 / 220 / 221 / 259px bei 1440). Überschriften NEXA 22px in Gold,
   Text 16/24. Darunter die Zeile „Mit 💛 in Hannover entwickelt" und die
   Standzeile. Gemessen auf jeder Seite des Originals gleich. */
.fuss p { margin: 0; }
.fuss-raster > div p { font-size: inherit; line-height: inherit; }
/* Fläche am Raster, nicht am <footer>: Die Urheberzeile ist im Original
   eine zweite Fläche, die Standzeile liegt außerhalb. Die Schriftfarbe
   des Rasters ist die des Themes (#333) — sichtbar nur an der Linie. */
.fuss-raster {
  position: relative;
  display: grid;
  grid-template-columns: 46% 17% 17% 20%;
  align-items: start;
  margin-bottom: 44px;
  padding: 72px;
  background: var(--fuss);
  color: #333333;
}
.fuss-marke,
.fuss-spalte,
.fuss-anfahrt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinte);
}
/* Blocksatz wie im Original. */
.fuss-raster > div p { text-align: justify; }
.fuss-marke { gap: 0; }
.fuss-marke > p { max-width: 337px; margin-top: 26px; }
.fuss-logo { width: 98px; height: auto; }

.fuss h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--akzent);
}
.fuss-recht { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fuss-recht a { display: block; color: var(--link-text); }
.fuss-recht a span { display: inline-block; color: var(--tinte); }
.fuss-recht a:hover span { color: var(--akzent); }
.fuss-anfahrt address { font-style: normal; }
.fuss-partner img { width: 145px; height: auto; }

/* Symbole 23px in Gold, 20px Abstand, 50px unter dem Satz. Der Verweis
   trägt die Werte des Elementor-Symbols (Grau #69727d, Rundung 10 %);
   sichtbar ist nur das Zeichen. */
.fuss-social { display: flex; gap: 20px; }
.fuss-marke .fuss-social { margin-top: 50px; }
.fuss-social a {
  display: flex;
  font-family: var(--schrift-text);
  font-size: 23px;
  line-height: 1;
  color: #69727d;
  border-radius: 10%;
  background: rgb(var(--akzent-rgb) / 0%);
}
.fuss-social svg { width: 23px; height: 23px; color: var(--akzent); }

/* **Neu: Urheberzeile** — „Mit 💛 in Hannover entwickelt 📲 living the
   goodlife GmbH", NEXA 500 16/24 mittig; die Zeile ist 44px hoch. */
.fuss-gemacht {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  min-height: 44px;
  padding: 0;
  background: var(--fuss);
  color: #333333;
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.fuss-gemacht a { color: var(--tinte); }
.fuss-gemacht .emoji {
  display: inline-block;
  width: 1em;
  margin: 0 0.07em;
  line-height: 1;
}
.fuss-gemacht .emoji::before { content: attr(data-emoji); }

/* Standzeile ganz unten, außerhalb der Fußfläche. */
.stand {
  margin: 0;
  padding: 10px 16px;
  font-family: var(--schrift-text);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--tinte-still);
}

/* Tablet: Business, Anfahrt, Wichtiges in einer Reihe — in dieser
   Reihenfolge, Business 35 %, dann 15 % frei, die beiden anderen je 25 %
   (242 / 173 / 173px bei 768) —, die Marke darunter mit 55px Abstand.
   Polster 8 % / 5 %. Verweise und Urheberzeile 14/21. */
@media (max-width: 1024px) {
  .fuss-raster {
    grid-template-columns: 35% 15% 25% 25%;
    row-gap: 55px;
    padding: 8% 5%;
  }
  [data-spalte='business'] { grid-column: 1; grid-row: 1; }
  .fuss-anfahrt { grid-column: 3; grid-row: 1; }
  [data-spalte='wichtiges'] { grid-column: 4; grid-row: 1; }
  .fuss-marke { grid-column: 1 / -1; grid-row: 2; }
  .fuss-raster .fuss-marke > p { max-width: 65%; font-size: 14px; line-height: 1.5; }
  .fuss-recht { gap: 6px; }
  .fuss-recht a { font-size: 14px; line-height: 1.5; }
  .fuss-logo { width: 130px; }
  .fuss-partner img { width: 135px; }
  .fuss-marke > p { margin-top: 26px; }
  .fuss-marke .fuss-social { margin-top: 30px; }
  .fuss-social a, .fuss-social svg { width: 18px; height: 18px; font-size: 18px; }
  .fuss-raster { margin-bottom: 41px; }
  .fuss-gemacht { min-height: 41px; font-size: 14px; }
}
/* Telefon: Marke, dann Business mit dem Logo von Trend ID mittig, die
   Symbole, die drei Verweise in einer Zeile, die Urheberzeile — alles in
   einer Fläche, Polster 8 %. Abstände gemessen: 6px unter dem Logo, sonst
   30px, über den Symbolen 44px, unter der Urheberzeile 3px mehr. Text
   14/21 in Poppins 300 (im Original nicht geladen, gezeichnet der Ersatz). */
@media (max-width: 767px) {
  /* Die Marke löst sich auf (display: contents), damit die Symbole hinter
     den Business-Text rücken können — so die Reihenfolge des Originals. */
  .fuss-raster { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 0; padding: 8%; }
  .fuss-marke { display: contents; }
  .fuss-logo { order: 1; width: 95px; }
  .fuss-marke > p { order: 2; margin-top: 6px; }
  [data-spalte='business'] { order: 3; margin-top: 30px; gap: 0; align-items: center; }
  .fuss-marke .fuss-social { order: 4; justify-content: center; margin-top: 44px; }
  [data-spalte='wichtiges'] { order: 5; margin-top: 30px; }
  .fuss .fuss-gemacht { order: 6; position: static; margin: 31px 0 0; min-height: 0; background: none; }
  .fuss-social a, .fuss-social svg { width: 18px; height: 18px; font-size: 18px; }
  .fuss-raster .fuss-marke > p, .fuss-raster .fuss-spalte p {
    max-width: none;
    font-family: var(--schrift-text);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
  }
  .fuss-raster .fuss-spalte p { margin-top: 30px; text-align: center; }
  .fuss h2, .fuss-anfahrt { display: none; }
  .fuss-partner { order: -1; }
  .fuss-partner img { width: 144px; }
  .fuss-recht { flex-direction: row; justify-content: center; gap: 16px; }
  .fuss-recht a { font-family: var(--schrift-text); font-size: 13px; font-weight: 300; }
  .fuss-gemacht { font-family: var(--schrift-text); font-size: 14px; font-weight: 300; }
  .fuss-gemacht { align-self: center; max-width: 200px; }
}

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

/* Schweben beim Scrollen (assets/js/anim.js, `initSchweben`): ±200px wie
   das Original. Über `translate`, damit es sich mit dem Einblenden
   (`transform`) zusammensetzt. In den Wochentag-Bändern wandern die Texte,
   das Band mit seinem Foto steht. */
html.anim [data-schweben],
html.anim .wochentag[data-schweben] > * {
  translate: 0 var(--schweben, 0px);
  will-change: translate;
}
html.anim .wochentag[data-schweben] { translate: 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); }


/* 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-text .augenbraue,
html.anim .hero-titel,
html.anim .hero-text .knopf {
  animation: hero-auf 0.9s var(--kurve) both;
}
html.anim .hero-text .augenbraue { 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; }