/* ============================================================================
   Rottau Events — Design und Layout
   ----------------------------------------------------------------------------
   Übernahme der bestehenden rottau-events.de (WordPress mit Elementor und
   dem Clubinio-Ticketwidget). Technische Vorlage drip-hp; Maße und Farben
   der Marke 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*,
   .kopf*, .hero*, .knopf*, .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.

   Schwarzer Grund, weiße Schrift, Inter im Text, MADE BLACK in den
   Seitentiteln, Rot #cc3938 als Akzent (Clubinio), Partyfoto im Hero.

   Keine Inline-Styles aus eigenem Code. Die Content-Security-Policy führt
   style-src 'self' 'unsafe-inline' NUR wegen des Ticketwidgets (es setzt
   seine Gestaltung selbst) — siehe serve.py.
   ========================================================================== */
/* ------------------------------------------------------------- Schriften -- */

/* **Dieselben Dateien wie auf rottau-events.de** (`/wp-content/uploads/`),
   mit denselben Gewichten wie dort angelegt: Inter „normal" und „bold" —
   bold ist dort die Datei inter-black — und MADE BLACK als einziger
   Schnitt. Siehe assets/fonts/LIZENZEN.md. Nexa ist im Original
   eingebunden, aber auf keiner Seite benutzt; sie fehlt hier. */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'MADE BLACK'; src: url('../fonts/made-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

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

:root {
  /* Flächen — gemessen auf rottau-events.de: überall Schwarz. */
  --nacht:        #000000;   /* Seitengrund */
  --kopf:         #000000;   /* Kopfzeile, wenn sie beim Scrollen Grund bekommt */
  --fuss:         #000000;   /* Fußbereich */

  /* Inter im Text, MADE BLACK in den Seitentiteln (gemessen). */
  --schrift-grund:   'Inter', sans-serif;
  --schrift-display: 'MADE BLACK', sans-serif;
  --schrift-text:    'Inter', sans-serif;

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

  /* **Akzent `#cc3938` aus Clubinio** (`designAccentColor`). Auf der
     bestehenden Seite trägt ihn nur der Flyer; sie selbst setzt keinen
     Akzent — der Knopf im Widget ist dessen eigenes Orange. Weiß auf
     #cc3938 hat 4,81:1 (AA), als Fläche also ohne Abdunkeln.
     **Als Schrift auf Schwarz nur 3,6:1** — für Verweise steht deshalb
     das Rot der bestehenden Seite (#ff0f0f, gemessen an „clubinio.de/hilfe"
     im Impressum, 5,3:1 auf Schwarz). */
  --akzent:       #cc3938;
  --akzent-rgb:   204 57 56;
  --akzent-tinte: #ffffff;
  --akzent-flaeche: #cc3938;
  --akzent-text:  #ff0f0f;
  --link-text:    #ff0f0f;

  /* **Plus- und Kassenknopf im Widget.** Das Original setzt #ff593c — Weiß
     darauf hat nur 3,11:1. So wenig abgedunkelt wie nötig: #d73e1e, 4,56:1
     (derselbe Ton). Dem Betreiber vorgelegt; andere Lösung: Schrift schwarz
     auf #ff593c (6,75:1). abgleich.py kennt genau dieses Paar
     (FLAECHENTAUSCH). */
  --kasse:        #d73e1e;

  /* **Gutscheinfläche 40 % statt 25 % — für WCAG AA.** Mit 25 % kam
     „Gutschein einlösen?" (65 % Weiß) auf dem Telefon an der hellsten
     Fotostelle auf 4,23:1 (tools/bildkontrast.js), mit 40 % darüber. */
  --glas-gutschein: 0.4;

  /* Hülle: Breite und Seitenrand. 1140px mit 10px Rand wie die
     Elementor-Container des Originals (1120px Inhalt bei 1440). */
  --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='%23ffffff' d='M7 2h2v7H7zM7 11h2v2H7z'/%3E%3C/svg%3E");
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-6.9'/%3E%3C/svg%3E");
  /* Pfeil der Knöpfe (Font Awesome „long-arrow-alt-right", aus drip-hp). */
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E");

  /* Kopfhöhe: Logo 33px (wie im Hero bei 1440) plus 2 × 10px. Der
     Seitenkopf läuft um genau diesen Wert unter die Kopfzeile, damit der
     Titel wie im Original 50px unter der Oberkante steht. */
  --kopf-hoehe:   53px;
}

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

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

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

/* `hidden` muss gewinnen. Der Browser setzt dafür nur `display: none` mit
   schwacher Spezifität — jede eigene display-Regel schlägt es. Genau das
   ist passiert: `.knopf { display: inline-flex }` hat ein `hidden` am
   Lounge-Knopf überstimmt, und der stand auf jeder Eventseite. */
[hidden] { display: none !important; }

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

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

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

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: MADE BLACK, Versalien. Die Schrift hat nur einen
   Schnitt; das Original fordert ihn mit Gewicht 400 an (gemessen) — hier
   genauso, sonst stünde in der Messung 900. Größe setzt jede Stelle selbst. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 400;
  text-transform: uppercase;
}

/* Fließtext: Inter 16px/24px (gemessen). Abstand 0,9rem wie Elementor. */
p {
  margin: 0 0 0.9rem;
  font-family: var(--schrift-text);
  font-size: 16px;
  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;
}

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

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

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

/* Knopf: das Original hat außerhalb des Widgets keinen. Hier für die 404,
   das Kontaktformular und den Shopverweis ohne Skript: Inter 700 15px in
   Versalien auf Akzentrot, Rundung 8px wie der Kassenknopf des Widgets.

   **`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: 8px;
  background: var(--akzent-flaeche);
  color: var(--akzent-tinte);
  font: inherit;
  font-family: var(--schrift-text);
  line-height: 1;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s var(--kurve), filter 0.2s ease;
}
.knopf:hover { filter: brightness(1.1); transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(0.98); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }

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


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

/* **Nur das Logo.** Die bestehende Seite hat keine sichtbare Kopfzeile;
   auf den Unterseiten steht im Markup ein Logo-Verweis mit Elementor-
   Platzhalterbild. Hier das Rottau-Logo als Weg zur Startseite — ohne
   Menü (vier Seiten, alle im Fuß verlinkt). Die Startseite hat keine
   Kopfzeile, ihr Logo steht im Hero (.auftrag.md).

   Systemverhalten aus drip-hp: klebt oben, bekommt erst beim Scrollen einen
   Grund (`data-fest`, ui.js); die Höhe bleibt gleich. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  isolation: isolate;
  transition: background 0.25s ease;
}
.kopf[data-fest='ja'] {
  background: rgb(0 0 0 / 92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Seitlich bündig mit der 1120px-Spalte des Inhalts, nie unter 20px. */
.kopf-innen {
  --breite: 100%;
  display: flex;
  align-items: center;
  height: var(--kopf-hoehe);
  padding: 10px max(20px, calc((100% - 1120px) / 2));
}

/* Logo 79px breit wie im Hero bei 1440 (33px hoch), auf dem Telefon 63px. */
.logo { display: flex; align-items: center; }
.logo img { width: 79px; height: auto; }
@media (max-width: 767px) { .logo img { width: 63px; } }

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

/* **Hero mit Kasse** — Systemvariante aus nordrausch-hp (`.hero.hero--kasse`,
   `.hero-kasse`): links Logo und Flyer, rechts das Clubinio-Ticketwidget
   und darunter die Kontaktzeile. Grund ist das Partyfoto des Originals
   (Quer-, Tablet- und Hochformat wie dort, gemessen), ohne Schleier — das
   Original legt keinen darüber.

   Maße bei 1440 (gemessen): zwei Spalten à 550px mit 20px Abstand ab
   x=160, Widget ab y=66, Logo 79px ab y=86, Flyer 512px 21px darunter,
   Hero 692px hoch. Unter 900px eine Spalte (Systemumbruch; das Original
   bricht erst unter 1025px um — dazwischen wurde nicht gemessen). */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--nacht);
  text-align: center;
}
.hero-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../img/hero.webp') center / cover no-repeat;
}
@media (max-width: 1024px) { .hero-medium { background-image: url('../img/hero-tablet.webp'); } }
@media (max-width: 767px)  { .hero-medium { background-image: url('../img/hero-mobil.webp'); } }

.hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  width: 100%;
}
.hero-logo { display: block; width: 79px; height: auto; }
/* **Neu: Flyer** des Termins im Hero — ein Motiv mit durchsichtigem Grund
   (Original: titel.webp), höchstens 512px wie dort. */
.hero-flyer { display: block; width: 100%; max-width: 512px; height: auto; }
/* „Neuer Termin folgt" — nur ohne Termin (home.js). Rottau-Branding:
   MADE BLACK wie die Seitentitel. */
.hero-titel {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4.625rem);
  line-height: 1;
  text-wrap: balance;
}

/* Variante „Kasse": zwei Spalten, oben bündig. Das Widget bringt seine
   Gestaltung selbst mit (gläserne Flächen, Rubik). */
/* `justify-items: stretch` — das `place-items: center` von .hero ließe
   die Spalten auf Inhaltsbreite schrumpfen; das Widget stand dann 371
   statt 550px breit (Rasterfalle, Auftrag Abschnitt 3). */
.hero--kasse {
  grid-template-columns: repeat(2, minmax(0, 550px));
  justify-content: center;
  justify-items: stretch;
  align-items: start;
  gap: 20px;
  padding: 66px 20px 30px;
}
.hero--kasse .hero-text { padding-top: 20px; }
.hero-kasse {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
/* Das Widget setzt links; die Mitte gilt nur der Kontaktzeile darunter. */
.hero-kasse [data-kasse] { text-align: left; }
/* Rückfall ohne Widget-Skript: der Shopknopf mittig (home.js). */
.hero-kasse [data-kasse] .knopf-reihe { justify-content: center; margin: 0; }
/* Kontaktzeile unter dem Widget: Inter 16/24, mittig (gemessen). */
.hero-kontakt { margin: 0; font-size: 16px; line-height: 1.5; }
.hero-kontakt a { text-decoration: underline; }

/* Ohne Termin: eine Spalte, alles mittig — Logo, Zeile, Kontakt. */
.hero--kasse[data-termin='nein'] {
  grid-template-columns: minmax(0, 720px);
  align-content: center;
  min-height: 692px;
}
.hero--kasse[data-termin='nein'] .hero-text { padding-top: 0; }
.hero--kasse[data-termin='nein'] .hero-logo { width: 160px; }

/* Eine Spalte: Logo 88px bei 768 (gemessen y=40), 63px auf dem Telefon
   (y=51); Flyer 509 bzw. 350px, 20px bis zum Widget. */
@media (max-width: 899px) {
  .hero--kasse {
    grid-template-columns: minmax(0, 550px);
    gap: 20px;
    padding: 40px 20px 40px;
  }
  .hero--kasse .hero-text { padding-top: 0; gap: 20px; }
  .hero-logo { width: 88px; }
  .hero-flyer { max-width: 509px; }
}
@media (max-width: 767px) {
  .hero--kasse { padding-top: 51px; }
  .hero--kasse .hero-text { gap: 16px; }
  .hero-logo { width: 63px; }
}

/* ---------------------------------------------------------- Ticketwidget -- */

/* **Gestaltung des Clubinio-Widgets wie im Original.** rottau-events.de
   legt diese Regeln als Elementor-Zusatz-CSS über das Widget (post-1400.css,
   „TICKET BEREICH" bis „PLUS BUTTON"): gläserne Flächen, Gutschein
   gedimmt, Plus- und Kassenknopf Orange. Das Original führt die
   Regeln zweimal (je Widgetkopie); wirksam ist die zweite mit `#ff593c` —
   so gemessen. Die Klassen `.clubinio-widget` und `.cw-*` sind die des
   Widgets, kein Systemvokabular; die `!important` braucht es, weil das
   Widget seine eigene Gestaltung zur Laufzeit danach einsetzt.
   Aufbau wie der gleichnamige Abschnitt in nordrausch-hp. */
.clubinio-widget .cw-category {
  background: rgba(15, 15, 15, 0.35) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
}
.clubinio-widget .cw-ticket { background: transparent !important; }
.clubinio-widget .cw-category-header {
  color: rgba(255, 255, 255, 0.63) !important;
  background: transparent !important;
}
.clubinio-widget .cw-ticket-desc { color: rgba(255, 255, 255, 0.65) !important; }
.clubinio-widget .cw-cart-summary {
  background: rgba(15, 15, 15, 0.25) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
}
.clubinio-widget .cw-coupon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.clubinio-widget .cw-coupon .cw-coupon-toggle,
.clubinio-widget .cw-coupon .cw-coupon-toggle:hover,
.clubinio-widget .cw-coupon-content {
  background: rgba(15, 15, 15, var(--glas-gutschein)) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
.clubinio-widget .cw-coupon .cw-coupon-toggle span { color: rgba(255, 255, 255, 0.65) !important; }
.clubinio-widget .cw-coupon .cw-coupon-toggle svg {
  color: rgba(255, 255, 255, 0.65) !important;
  fill: rgba(255, 255, 255, 0.65) !important;
}
.clubinio-widget .cw-coupon input {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
}
.clubinio-widget .cw-coupon button:not(.cw-coupon-toggle) {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
}
.clubinio-widget .cw-checkout-btn,
.clubinio-widget .cw-checkout-btn:hover,
.clubinio-widget .cw-checkout-btn:focus,
.clubinio-widget .cw-checkout-btn:active,
.clubinio-widget .cw-checkout-btn:enabled,
.clubinio-widget .cw-checkout-btn:not(:disabled),
.clubinio-widget button.cw-checkout-btn {
  background: var(--kasse) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}
.clubinio-widget .cw-checkout-btn *,
.clubinio-widget .cw-checkout-btn span,
.clubinio-widget .cw-checkout-btn svg,
.clubinio-widget .cw-checkout-btn svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.clubinio-widget .cw-qty-increase {
  background: var(--kasse) !important;
  border: none !important;
  box-shadow: none !important;
}
.clubinio-widget .cw-qty-increase svg { color: #000 !important; fill: #000 !important; }
.clubinio-widget .cw-qty-increase:hover { opacity: 0.95 !important; }

/* **Was das Theme des Originals dem Widget mitgibt** (hello-elementor,
   Elementor-Kit): Knöpfe mit Zeilenhöhe 1,5 und der Kassenknopf in
   Versalien (gemessen „uppercase", 27px Zeile). Ohne das sind die Knöpfe
   im Widget 3–5px niedriger (wie in nordrausch-hp gefunden). */
.clubinio-widget button { line-height: 1.5; }
.clubinio-widget .cw-checkout-btn { text-transform: uppercase; }
/* **Abweichung für WCAG AA:** „powered by clubinio.de" steht im Original
   mit 42 % Weiß direkt auf dem Foto (bis 2,4:1). Hier 60 % Weiß (wie
   nordrausch-hp) auf einem schmalen dunklen Grund nur hinter dem Text. */
.clubinio-widget .cw-powered-by a {
  padding: 0 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 60%);
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ------------------------------------------------------------- Leerzustand -- */

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

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

/* Seitentitel wie auf rottau-events.de: MADE BLACK 74px/74px, Versalien,
   mittig, 50px unter der Oberkante, ohne Bild und ohne Linie; auf dem
   Telefon 32px. Läuft um die Kopfhöhe unter die Kopfzeile (System), damit
   der Titel trotz Logo dort steht, wo er im Original steht. */
.seitenkopf {
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding: 50px 0 0;
  text-align: center;
}
.seitenkopf .huelle { --breite: 100%; --gutter: 0px; }
/* Versalien stehen im Markup wie im Original, nicht per CSS. */
.seitenkopf h1 {
  font-size: 74px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}
@media (max-width: 767px) { .seitenkopf h1 { font-size: 32px; } }
/* **Neu: Variante „lang"** — längere Titel („DATENSCHUTZ") setzt das
   Original auf dem Telefon kleiner, damit sie in eine Zeile passen: 29px. */
@media (max-width: 767px) { .seitenkopf--lang h1 { font-size: 29px; } }
/* Unterzeile (nur /kontakt/, die es im Original nicht gibt): Inter 16/24. */
.unterzeile { margin: 0; }
.seitenkopf .unterzeile {
  margin-top: 1rem;
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
}

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

/* Kontaktseite: zwei gleich breite Spalten mit 20px Abstand in höchstens
   1120px, auf dem Telefon untereinander. Ohne FAQ (Clubinio führt derzeit
   keine) steht das Formular allein in der Mitte. */
/* Unten 40px bis zum Fuß: in drip-hp gemessen bei 390/768/1440
   (Formularunterkante → Fuß 40,0px; roxy.club: 39). */
.seite-kontakt .abschnitt { padding: 45px 0 40px; }
.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
/* Untereinander 50px zwischen FAQ und „KONTAKT" — gemessen auf
   im Original von drip-hp mit dem Plugin-FAQ (50,02px). */
@media (max-width: 767px) { .kontakt-raster { grid-template-columns: 1fr; row-gap: 50px; } }
.kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.kontakt-raster > div { display: flex; flex-direction: column; gap: 20px; }
.kontakt-raster h2 { font-size: 32px; line-height: 1; text-transform: none; }

/* Aufklapper im Stil des Clubinio-FAQ-Widgets (aus drip-hp)
   (clubinio-faq) — `<details>` wie im System, ohne JavaScript bedienbar.
   Übernommen aus haase-hp, wo dasselbe Widget vermessen wurde; roxy-hp
   hatte hier ein Elementor-Akkordeon (roxy.club führte keine Clubinio-FAQ).
   Eintrag über die volle Spalte, Linie unten in Akzentfarbe 26 %. Frage
   Poppins 600 16,8/23,52 in Weiß, Polster 20/8/20/20; Symbol 20×20 aus
   zwei 2px-Strichen in Akzentfarbe, 3px unter der Oberkante der ersten
   Zeile, 18px vor dem Text. Offen: Minus statt Plus und ein Balken 3×28
   am linken Rand. Antwort Poppins 15,68/25,09 in #9aa6b5, Polster
   0/8/22/44. Auf dem Telefon dieselben Werte (gemessen bei 390). */
.faq {
  position: relative;
  border-bottom: 1px solid rgb(var(--akzent-rgb) / 26%);
}
.faq[open]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 3px;
  height: 28px;
  background: var(--akzent);
}
.faq summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 8px 20px 20px;
  font-family: var(--schrift-text);
  font-size: 16.8px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinte);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
/* Das Symbol: ein 20px-Kasten vor dem Text, darin zwei Striche. */
.faq summary::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background:
    linear-gradient(var(--akzent), var(--akzent)) center / 20px 2px no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) center / 2px 20px no-repeat;
}
.faq[open] summary::before {
  background: linear-gradient(var(--akzent), var(--akzent)) center / 20px 2px no-repeat;
}
/* 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 summary span { flex: 1; min-width: 0; }
/* Das Polster sitzt an den Absätzen, nicht am Kasten: Im Original stehen
   Text und Polster im selben Element (clubinio-faq__a-inner). */
.faq-text p {
  margin: 0;
  padding: 0 8px 0 44px;
  /* In drip-hp gemessen (dort Poppins); haase-hp misst dort die
     Grundschrift — das Widget erbt sie vom Theme. */
  font-family: var(--schrift-text);
  font-size: 15.68px;
  line-height: 1.6;
  color: #9aa6b5;
  overflow-wrap: anywhere;
}
.faq-text p + p { margin-top: 15px; }
.faq-text p:last-child { padding-bottom: 22px; }

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

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

.feld { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld > span,
.feld legend {
  display: block;
  padding: 0;
  font-family: var(--schrift-text);
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  color: #cfd6e0;
}
/* Die Legende einer Gruppe („Bereiche"): über die volle Breite, Zeilenhöhe
   1,5 und 6px Abstand — eine <legend> nimmt am Flex-Abstand des
   Fieldsets nicht teil (gemessen 1054×20, Stellen 26px darunter). Regel
   aus haase-hp; in roxy-hp nie mit Stellen gemessen (0 Stellen dort). */
.feld legend { width: 100%; margin-bottom: 6px; line-height: 1.5; }
.feld-pflicht { font-style: normal; color: #f43f5e; }

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

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

/* Einwilligung: Kästchen und Text nebeneinander, 9px Abstand. */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.zustimmung {
  font-family: var(--schrift-text);
  font-size: 12.8px;
  line-height: 1.45;
  color: #9aa6b5;
}
.zustimmung input { margin: 3px 0 0; accent-color: var(--akzent); }

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

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

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

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

/* -------------------------------------------------------------- Kontakt -- */

/* Spalte 1140px mit 10px Rand (1120px Inhalt), unter 1025px 20px. */
.seite-kontakt .abschnitt .huelle { --breite: 1140px; }
@media (max-width: 1024px) { .seite-kontakt .abschnitt .huelle { --gutter: 20px; } }

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

/* Impressum und Datenschutz wie auf rottau-events.de: Inter 16/24 weiß,
   40px unter dem Titel; auf dem Telefon 12/18 (gemessen). Datenschutz in
   einer Spalte von 80 % (1152px bei 1440), Zwischenüberschriften Inter
   28/33,6. Verweise im Rot der bestehenden Seite. */
.seite-recht .abschnitt { padding: 40px 0 55px; }
.rechtstext { --breite: 80%; --gutter: 0px; }
@media (max-width: 1024px) { .rechtstext { --breite: 100%; --gutter: 18px; } }
.rechtstext section { margin-bottom: 14px; }
.rechtstext section:last-child { margin-bottom: 0; }
.rechtstext h2 {
  margin: 0 0 14px;
  font-family: var(--schrift-text);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}
.rechtstext p { margin-bottom: 14px; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext p,
.rechtstext li {
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
}
.rechtstext ul { margin: 0 0 14px; padding-left: 40px; }
.rechtstext a { color: var(--link-text); }
.rechtstext a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .rechtstext p, .rechtstext li { font-size: 12px; }
}

/* **Neu: Variante „Spalten"** — das Impressum des Originals: links die
   Angaben, rechts die Haftungstexte, je 550px mit 20px Abstand (1440),
   354px bei 768; Telefon untereinander. Überschriften dort fett im Text
   (16/25,6), rechts zusätzlich unterstrichen. */
.rechtstext--spalten {
  --breite: 1140px;
  --gutter: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 1024px) { .rechtstext--spalten { --gutter: 20px; } }
@media (max-width: 767px)  { .rechtstext--spalten { grid-template-columns: 1fr; gap: 14px; } }
.rechtstext--spalten h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.rechtstext--spalten > div:first-child p { line-height: 1.6; }
.rechtstext--spalten > div:last-child h2 { text-decoration: underline; line-height: 1.5; }
.rechtstext--spalten > div:last-child p { text-align: justify; }
@media (max-width: 767px) { .rechtstext--spalten h2 { font-size: 12px; } }

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

/* Wie der Fuß der Unterseiten von rottau-events.de: alles mittig auf
   Schwarz — die Rechtsverweise untereinander (Inter 13/19,5), darunter
   der Satz zum Vertragspartner (9/13,5, höchstens 550px), dann „powered
   by Clubinio" (104px). Neu ist „Kontakt" als vierter Verweis.

   **Bewusst eine Fassung für alle Seiten.** Die Startseite des Originals
   stellt bei 1440 das Logo links und die Verweise rechts und lässt den
   Satz weg; ihre Telefonfassung entspricht dieser hier. Ein Rahmen statt
   zwei (tools/rahmen.py). */
.fuss p { margin: 0; }
.fuss-raster {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 55px 20px 90px;
  text-align: center;
}
/* Telefon: 63px unter dem Zeichen bis zum Seitenende (gemessen). */
@media (max-width: 767px) { .fuss-raster { padding-bottom: 63px; } }
.fuss-raster {
}
/* Spalte wie im Original: 550px, bei 768–1024 354px, darunter volle
   Breite abzüglich 20px Rand. Die Verweise sind Blöcke über die Spalte. */
.fuss-recht { width: 100%; max-width: 550px; margin: 0; padding: 0; list-style: none; }

/* Der Verweis trägt die Linkfarbe des Themes (#cc3366, gemessen), sichtbar
   ist nur die Beschriftung in Weiß — wie im Original. */
.fuss-recht a {
  display: block;
  font-family: var(--schrift-text);
  font-size: 13px;
  line-height: 1.5;
  color: #cc3366;
}
.fuss-recht a span { display: inline-block; color: var(--tinte); }
.fuss-recht a:hover span { text-decoration: underline; }
/* **Neu: Hinweis zum Vertragspartner** unter den Rechtsverweisen. Auf dem
   Telefon setzt das Original 7px — hier 9px wie am Schreibtisch, kleiner
   ist nicht mehr lesbar. */
.fuss-hinweis {
  max-width: 550px;
  margin-top: 19px !important;
  font-family: var(--schrift-text);
  font-size: 9px;
  line-height: 1.5;
}
.clubinio { margin-top: 35px; }
.clubinio img { width: 104px; height: auto; }
@media (max-width: 1024px) {
  .fuss-recht, .fuss-hinweis { max-width: 354px; }
  .clubinio img { width: 78px; }
}
@media (max-width: 767px) {
  .fuss-recht, .fuss-hinweis { max-width: none; }
  .clubinio img { width: 91px; }
}

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

/* Der Hero läuft beim Laden auf — wie im Original (Elementor slideInDown
   bzw. fadeInLeft/Right): Logo, Flyer, Kasse nacheinander. */
@keyframes hero-auf {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: none; }
}
html.anim .hero-logo,
html.anim .hero-flyer,
html.anim .hero-titel,
html.anim .hero-kasse {
  animation: hero-auf 0.9s var(--kurve) both;
}
html.anim .hero-logo  { animation-delay: 0.08s; }
html.anim .hero-flyer,
html.anim .hero-titel { animation-delay: 0.22s; }
html.anim .hero-kasse { animation-delay: 0.40s; }

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

/* 404 wie auf rottau-events.de: „404" in MADE BLACK 162px, darunter
   „Seite nicht gefunden" in Inter 35/55 (Telefon 44/55), mittig, 161px
   unter der Oberkante (Telefon 143). Dazu ein Weg zur Startseite. */
.fehlerseite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 538px;
  margin-top: calc(var(--kopf-hoehe) * -1);
  padding: 161px 20px 60px;
  text-align: center;
}
/* Telefon: 30px Rand, die Zahl ohne Abstand über der Zeile (gemessen). */
@media (max-width: 767px) { .fehlerseite { gap: 0; padding: 143px 30px 60px; } }
/* **Höchstens 33vw** — das Original setzt 162px auch auf dem Telefon, und
   die Zahl (405px breit) läuft dort rechts aus dem Bild. Ab 491px Breite
   bleibt es bei 162px. */
.fehlerseite .kennzahl {
  max-width: 100%;
  margin: 0;
  font-family: var(--schrift-display);
  font-size: min(162px, 33vw);
  line-height: 1;
}
.fehlerseite h1 {
  max-width: 100%;
  font-family: var(--schrift-text);
  font-size: 35px;
  font-weight: 400;
  line-height: 55px;
  letter-spacing: -0.1px;
  text-transform: none;
}
@media (max-width: 767px) { .fehlerseite h1 { font-size: 44px; } }
.fehlerseite .knopf-reihe { justify-content: center; }
@media (max-width: 767px) { .fehlerseite .knopf-reihe { margin-top: 20px; } }