/* ============================================================
   NOW LP-KERN — MECHANIK-STYLES

   Diese Datei wird pro Landingpage NICHT angefasst. Sie enthaelt die
   Design-Tokens, die Grundtypografie und alles, was Mechanik ist:
   Knoepfe, Reveal-Zustaende, Cookie-Leiste, Rechtstext-Modals,
   Kassen-Dialog, Sticky-Leiste, Fortschrittsbalken, Video-Bausteine,
   FAQ, Footer, Trennlinien, Materialrauschen.

   Die Farben stehen bewusst in :root und nirgends sonst als Literal.
   Eine neue LP mit anderer Palette aendert nur die Tokens.

   Reihenfolge im <head>: fonts.css, dann kern.css, dann seite.css.
   seite.css MUSS danach kommen — sie ueberschreibt bewusst.
   ============================================================ */

/* --- aus styles.css --- */

/* --- CSS Custom Properties --- */
:root {
  --gold: #C9A84C;
  --gold-light: #E2C97A;
  --gold-dark: #A07830;
  /* Zweite Signalfarbe. Traegt genau EINE Bedeutung: der Preis ist befristet.
     Zwei Elemente duerfen sie fuehren — das Early-Bird-Abzeichen der Ticket-
     Karte und das Early-Bird-Label der Preiszeile. Nie als Flaeche groesser
     als eine Pille, sonst kippt die Seite von Gold auf Rot.
     Weiss auf dem Verlauf: 4,8:1 am hellen Ende. --rot-light auf --black:
     5,6:1 — beides ueber der Schwelle fuer kleine fette Versalschrift. */
  --rot: #D23B25;
  --rot-dark: #A32717;
  --rot-light: #E85A44;
  --black: #0e0c0a;
  --surface: #181410;
  --surface-2: #211d18;
  --border: rgba(201, 168, 76, 0.28);
  --text: #f2efe9;
  --text-muted: #9e9a94;
  --text-dim: #6a6560;
  --white: #ffffff;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 4px;
  --radius-lg: 12px;
  --transition: 0.3s ease;
  --max-width: 1140px;
  --section-pad: 80px;
}

/* --- Custom Scrollbar (dark) --- */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.3) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.5);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Ohne overflow am html wandert das overflow-x:hidden des body (s.u.) per
     CSS-Regel auf den Viewport — der body selbst benutzt dann intern 'visible'
     und clippt gar nichts. Belegt: eine Sonde bei left:1200px im body treibt
     documentElement.scrollWidth von 430 auf 1211. Erst diese Zeile macht den
     body wieder zu einem echten Clipping-Kasten.
     hidden steht zuerst als Rueckfall fuer iOS < 16; clip gewinnt, wo es
     unterstuetzt wird, und macht das Wurzelelement nicht zum Scroll-Container
     (overflow-y bleibt dadurch 'visible' statt 'auto'). */
  overflow-x: hidden;
  overflow-x: clip;
}

/* WebGL background shader canvas */
#bgShader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

body {
  background-color: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Zweite Verteidigungslinie gegen horizontales Wischen; geclippt wird
     eigentlich schon am html (s.o.).
     NEBENWIRKUNG, die man kennen muss: hidden auf einer Achse laesst die
     andere zu 'auto' rechnen — der body ist dadurch ein Scroll-Container.
     Ein position:sticky-Element sucht sich seinen naechsten scrollenden
     Vorfahren, findet den body, und dessen Scrollport scrollt nie (es scrollt
     der Viewport). Sticky ist auf dieser Seite deshalb wirkungslos.
     Belegt: ein Testelement wanderte bei 800px Scroll volle 808px mit; ohne
     diese Zeile waren es 696px, also der erwartete Sticky-Anteil.
     Wer hier sticky braucht, nimmt die Zeile raus und prueft den Ueberlauf
     auf allen acht Breiten neu. */
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-pad) 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.28), 0 4px 16px rgba(201, 168, 76, 0.18);
}

.btn--gold:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(201, 168, 76, 0.55), 0 8px 32px rgba(201, 168, 76, 0.35);
}

.btn--large {
  padding: 18px 48px;
  font-size: 1rem;
  min-height: 56px;
}

.btn--full {
  width: 100%;
}

/* --- Scroll Reveal --- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-testi {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-testi.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Step-by-step list items (slide in from left) */
.js .reveal-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-item.visible {
  opacity: 1;
  transform: translateX(0);
}

@supports not (animation-timeline: scroll()) {
.js .reveal-card {
    opacity: 0;
    transform: translateY(-28px);
    filter: blur(6px);
    transition:
      opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }

.reveal-card.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@supports (animation-timeline: scroll()) {
@keyframes card-reveal-scroll {
    from {
      opacity: 0;
      transform: translateY(-24px);
      filter: blur(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

.reveal-card {
    animation: card-reveal-scroll linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 28%;
    will-change: transform, opacity, filter;
  }
}

/* --- Section Headers --- */
.section__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 20px;
}

.section__title em {
  font-style: italic;
  color: var(--gold);
}

.section__subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.7;
}

.section__header {
  text-align: center;
  margin-bottom: 64px;
}

.section__header .section__subtitle {
  margin: 0 auto;
}

@keyframes heroShimmer {
  0%   { opacity: 0.4; transform: scale(1) translateY(0); }
  50%  { opacity: 0.9; transform: scale(1.05) translateY(-10px); }
  100% { opacity: 0.5; transform: scale(1) translateY(0); }
}

/* --- Countdown --- */
.countdown__caption {
  margin-top: 60px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.countdown__caption + .countdown {
  margin-top: 0;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 60px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 14px;
  padding: 14px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 8px;
  background: none;
  border: none;
  border-radius: 0;
}

.countdown__num {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
  white-space: nowrap;
}

.countdown__sep {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.35;
  padding: 0 2px;
  margin-bottom: 18px;
  align-self: flex-start;
  padding-top: 3px;
  flex-shrink: 0;
}

.countdown__live {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* Kein Standbild-Hintergrund mehr, sondern nur Zeichen ueber laufendem
   Bild: Schlagschatten statt Flaeche, damit das Video hell bleibt. */
.hero__video--laeuft .hero-video__poster {
  background: none;
  cursor: pointer;
}

.hero__video--laeuft .hero-video__play svg {
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.85));
  transition: opacity var(--transition), transform var(--transition);
}

.hero__video--laeuft .hero-video__hint {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.hero__video--laeuft .hero-video__poster:hover .hero-video__play svg,
.hero__video--laeuft .hero-video__poster:focus-visible .hero-video__play svg {
  opacity: 1;
  transform: scale(1.05);
}

.video-replay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero__video-replay.visible,
.video-replay.visible {
  opacity: 1;
  pointer-events: auto;
}

.video-replay-btn {
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.video-replay-btn:hover {
  transform: scale(1.12);
  color: var(--gold-light);
}

.video-replay-btn svg {
  width: 100%;
  height: 100%;
}

.video-replay-btn {
  width: 56px;
  height: 56px;
}

.fw-card .btn {
  display: inline-flex;
  margin: 24px auto 0;
  width: auto;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  align-self: center;
}

/* ============================================
   FAQ
   ============================================ */
.faq {
  background:
    radial-gradient(ellipse 55% 55% at 90% 30%, rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 10% 70%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

.faq::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.45) 30%, rgba(201, 168, 76, 0.45) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3), 0 0 24px rgba(201, 168, 76, 0.12);
}

.faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item:first-child {
  border-top: 1px solid var(--border);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  text-align: left;
  transition: color var(--transition);
  min-height: 48px;
}

.faq__question:hover { color: var(--gold); }

.faq__icon {
  font-size: 1.4rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--transition);
  line-height: 1;
}

.faq__item.open .faq__icon { transform: rotate(45deg); }

.faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}

.faq__answer p {
  padding-bottom: 24px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 55%),
    var(--black);
  padding: 56px 0 0;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.45) 30%, rgba(201, 168, 76, 0.45) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3), 0 0 24px rgba(201, 168, 76, 0.12);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  gap: 24px;
  flex-wrap: wrap;
}

.footer__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.footer__tagline {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__bottom p {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.footer__legal {
  display: flex;
  gap: 24px;
}

.footer__legal a {
  font-size: 0.8rem;
  color: var(--text-dim);
  transition: color var(--transition);
}

.footer__legal a:hover { color: var(--gold); }

.footer__legal-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition);
  font-family: var(--font-body);
}

.footer__legal-btn:hover { color: var(--gold); }

.footer__logo-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

/* --- Legal Modals (Impressum / Datenschutz) --- */
.legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.legal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.legal-modal {
  background: #0a0a0a;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}

.legal-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition);
}

.legal-modal__close:hover { color: var(--gold); }

/* "Allgemeine Geschaeftsbedingungen (AGB)" und "Datenschutzerklaerung" sind
   laenger als der Modalkasten auf jedem Handy — ohne Umbruchhilfe stehen sie
   dort abgeschnitten. Der Kasten clippt, die Dokumentbreite bleibt unberuehrt:
   ein reiner Ueberlauftest sieht das nicht. */
.legal-modal__title,
.legal-modal__body h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 24px;
}

.legal-modal__body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin: 22px 0 8px;
}

.legal-modal__body p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 8px;
}

.legal-modal__body a {
  color: var(--gold);
  text-decoration: none;
}

.legal-modal__body a:hover {
  text-decoration: underline;
}

/* ============================================
   TICKET-AUSWAHL
   Zwei CopeCart-Produkte, deshalb fragt jeder Kauf-Knopf zuerst.
   Hintergrund, Zentrierung und das .open-Umschalten kommen von
   .legal-overlay (s.o.) — hier steht nur der Kasten.
   ============================================ */
.ticket-wahl__box {
  background: #0a0a0a;
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  /* Auf niedrigen Fenstern scrollt der Kasten in sich, statt oben und unten
     aus dem Bild zu laufen. */
  max-height: 85vh;
  overflow-y: auto;
  padding: 44px 36px 32px;
  position: relative;
  text-align: center;
}

.ticket-wahl__titel {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 26px;
}

.ticket-wahl__optionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Muster "gewichtete Karte" aus NOW-DESIGNSYSTEM.md 6.3 b — dunkler Verlauf,
   goldener Rahmen, Hover hebt an. Hier zusaetzlich als Flaeche klickbar:
   die ganze Karte ist der Link, nicht nur der Knopf darin. */
.ticket-wahl__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201, 168, 76, 0.22);
  background: linear-gradient(155deg, #1c1810 0%, #141008 100%);
  transition: border-color var(--transition), transform var(--transition);
  position: relative;
}

.ticket-wahl__option:hover,
.ticket-wahl__option:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
}

/* Eigener Fokusring statt des Browser-Standards — der ist grellorange und
   passt zu nichts auf dieser Seite. */
.ticket-wahl__option:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Der Kasten bekommt den Fokus beim Oeffnen programmatisch. Ein Ring um den
   ganzen Dialog waere hier nur Rauschen — sichtbar ist er ohnehin. */
.ticket-wahl__box:focus { outline: none; }

/* Die Dreier-Karte traegt das Abzeichen-Muster der Ticket-Karte. */
.ticket-wahl__option--deal { border-color: rgba(201, 168, 76, 0.45); }

.ticket-wahl__marke {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.ticket-wahl__menge {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ticket-wahl__preis {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1.05;
}

.ticket-wahl__alt {
  font-size: 0.88rem;
  color: var(--text-dim);
  text-decoration: line-through;
}

.ticket-wahl__cta {
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.ticket-wahl__fussnote {
  margin-top: 22px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
}

@media (max-width: 620px) {
.ticket-wahl__box { padding: 40px 20px 26px; }

/* Untereinander. Der Abstand waechst, damit das Abzeichen der zweiten
     Karte nicht auf der ersten klebt. */
.ticket-wahl__optionen { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 900px) {
:root {
    --section-pad: 80px;
  }
}

@media (max-width: 480px) {
:root {
    --section-pad: 48px;
  }

.btn--large {
    padding: 16px 28px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 380px;
  }

/* Auf Mobil steht der Footer als eine Spalte — dann gehoert er auch mittig.
     Linksbuendig wirkte hier zufaellig, weil Logo-Reihe und Rechtslinks ohnehin
     schon zentriert sind und nur Tagline, Knopf und Copyright links klebten. */
.footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

.footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

.footer__legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Cookie-Leiste ---
   Kein Vollbild-Overlay mehr: die Seite bleibt sichtbar und scrollbar.
   Ablehnen liegt gleichwertig neben Akzeptieren. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9995;
  background: rgba(14, 12, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}

.cookie-bar[hidden] { display: none; }

.cookie-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}

.cookie-bar__text {
  margin: 0;
  max-width: 660px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.cookie-bar__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookie-bar__link:hover { color: var(--gold-light); }

.cookie-bar__btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-bar__btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 11px 26px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.cookie-bar__btn--accept {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
}

.cookie-bar__btn--accept:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 28px rgba(201, 168, 76, 0.45);
}

.cookie-bar__btn--decline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.cookie-bar__btn--decline:hover {
  color: var(--text);
  border-color: var(--gold);
}

/* Solange die Leiste offen ist, weicht die Kaufleiste — sonst liegen
   auf dem Handy zwei fixe Balken uebereinander. */
body.consent-open .sticky-cta {
  transform: translateY(130%);
}

@media (max-width: 560px) {
.cookie-bar { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }

.cookie-bar__inner { gap: 12px; }

.cookie-bar__text { font-size: 0.8rem; }

.cookie-bar__btns { width: 100%; }

.cookie-bar__btn { flex: 1; padding: 12px 14px; }
}

/* --- Video-Platzhalter (ohne Consent) ---
   Hero und Testimonials zeigen statt des Players einen Einstieg, der
   mit einem Klick freischaltet. Der Cookie-Hinweis steht dabei, weil
   "Video ansehen" allein verschweigen wuerde, was der Klick ausloest. */
.hero-video__poster,
.testi-video__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 45%, rgba(201, 168, 76, 0.12) 0%, transparent 70%),
    var(--surface-2);
  border: 0;
  font-family: inherit;
  color: var(--gold);
  text-align: center;
  z-index: 2;
}

/* Der Testimonial-Platzhalter ist nur dann ein Bedienelement, wenn er die
   Videofreigabe traegt (.is-blocked) — sonst laege ein toter Knopf ueber
   dem laufenden Video. Der Hero-Platzhalter ist dagegen IMMER eins: er
   startet den Ton von vorn, egal ob das Video im Hintergrund laeuft oder
   bei "Bewegung reduzieren" gar nicht erst gestartet ist. */
.testi-video__poster { pointer-events: none; }

.hero-video__poster,
.testi-video__poster.is-blocked {
  pointer-events: auto;
  cursor: pointer;
}

.hero-video__play svg,
.testi-video__play svg {
  width: 54px;
  height: 54px;
  opacity: 0.9;
}

.testi-video__play svg { width: 42px; height: 42px; }

.hero-video__hint,
.testi-video__label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.testi-video__label { font-size: 0.72rem; }

.hero-video__consent,
.testi-video__consent {
  display: none;
  max-width: 260px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}

.testi-video__consent { max-width: 200px; font-size: 0.66rem; }

.hero-video__poster.is-blocked .hero-video__consent,
.testi-video__poster.is-blocked .testi-video__consent {
  display: block;
}

/* --- 4. Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.6), 0 0 20px rgba(201, 168, 76, 0.3);
  z-index: 10000;
  transition: none;
  pointer-events: none;
}

/* Sperre und Freigabe stehen bewusst zusammen und in DIESER Datei.
   Vorher lag die Sperre in seite.css. Beide Selektoren sind gleich stark
   (zwei Klassen), also entschied die Ladereihenfolge — und seite.css laedt
   spaeter. Die Freigabe verlor, die H1 blieb dauerhaft unsichtbar. Das
   .js davor macht die Freigabe staerker als jede Sperre mit zwei Klassen,
   egal aus welcher Datei sie kommt. */
.js .letter-assemble {
  visibility: hidden;
}

.js .letter-assemble.la-ready,
.letter-assemble.la-ready {
  visibility: visible;
}

.letter-assemble .la-word {
  display: inline-block;
  white-space: nowrap;
}

.letter-assemble .la-char {
  display: inline-block;
  opacity: 0;
  animation: letterFlyIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes letterFlyIn {
  0% {
    opacity: 0;
    transform: translate(var(--la-x), var(--la-y)) scale(0.5) rotate(var(--la-r));
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* --- 5. 3D Tilt on Module Cards --- */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
}

.tilt-card .tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201, 168, 76, 0.15), transparent 60%);
  transition: opacity 0.3s ease;
}

.tilt-card:hover .tilt-glare {
  opacity: 1;
}

/* --- 4. CTA-Licht-Sweep ---
   Der Vorlagen-Code animiert 'left'. Das ist eine Layout-Eigenschaft und
   loest in jedem Frame ein Neu-Layout aus — hier laeuft derselbe Streifen
   ueber transform, damit er auf der GPU bleibt.
   Weg: von -60% Buttonbreite bis rechts raus = 160% Buttonbreite. Der
   Streifen ist 45% breit, translateX rechnet in EIGENER Breite — 160/45
   sind rund 356%, aufgerundet auf 380% fuer den schraegen Anschnitt. */
.btn--gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn--gold::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(0) skewX(-18deg);
  pointer-events: none;
}

@keyframes sheen {
  from { transform: translateX(0)    skewX(-18deg); }
  to   { transform: translateX(380%) skewX(-18deg); }
}

.btn--gold:hover::after,
.btn--gold.is-sheen::after {
  animation: sheen 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq::before,
.footer::before {
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Das .js davor ist kein Schmuck, sondern noetig. Ohne es ist diese Regel
   genau so stark wie ein .problem::before aus seite.css — und seite.css
   laedt spaeter, also gewann dort das opacity: 0 und die Linie blieb fuer
   immer unsichtbar. Mit .js (steht auf <html>) gewinnt die Freigabe, egal
   aus welcher Datei die Sperre kommt. Gleiches Muster wie bei
   .js .letter-assemble.la-ready. */
.js .section-divider-visible::before,
.js .section-divider-visible::after,
.section-divider-visible::before,
.section-divider-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
.scroll-progress { display: none; }

.letter-assemble .la-char { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }

.tilt-card { transform: none !important; }

.tilt-card .tilt-glare { display: none; }

/* Reveals: sofort sichtbar und statisch. Greift unabhaengig davon, ob der
     Beobachter ueberhaupt ausloest — sonst blieben unscharfe Reste oder ganz
     leere Stellen stehen, je nachdem wo der Nutzer gerade steht. */
.js .reveal,
.js .reveal-item,
.js .reveal-card,
.js .reveal-testi {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }

/* Licht-Sweep und Materialrauschen komplett aus. */
.btn--gold::after { display: none; }

body::after { display: none; }
}

@media (max-width: 380px) {
.btn {
    white-space: normal;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

.countdown { padding: 12px 6px; }

.countdown__unit {
    padding: 0 3px;
    min-width: 0;
  }

.countdown__num { font-size: 1.35rem; }

.countdown__label {
    font-size: 0.55rem;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   10. MATERIALRAUSCHEN
   Gegen Farbstreifen in den grossen Goldverlaeufen auf breiten Monitoren.
   Liegt bewusst UEBER dem Inhalt: die Sektionsgruende sind deckend, ein
   Rauschen dahinter waere unsichtbar. Bei 2,5 % ist es als Struktur
   spuerbar und als Punktmuster nicht erkennbar.
   ============================================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9994;            /* unter der Cookie-Leiste (9995) */
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --- aus styles-moneymind.css --- */

/* --- Dauerhafte Kaufleiste (mobil) ---
   Ersetzt die entfernten Inline-CTAs: ab Hero-Ende immer erreichbar.
   Auf Desktop nicht noetig, dort ist die Seite kuerzer und die
   Ticket-Sektion schneller erreicht. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14, 12, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-cta.visible { transform: translateY(0); }

.sticky-cta__info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.sticky-cta__price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.sticky-cta__price s {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.85rem;
  margin-right: 4px;
}

.sticky-cta__meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sticky-cta__btn {
  flex-shrink: 0;
  padding: 13px 22px;
  font-size: 0.88rem;
  min-height: 46px;
}

@media (max-width: 900px) {
.sticky-cta { display: flex; }

/* Platz schaffen, damit die Leiste nichts verdeckt */
body.has-sticky-cta { padding-bottom: 76px; }
}

@media (max-width: 640px) {
/* Kleine Labels lesbar halten */
.section__eyebrow { font-size: 0.82rem; }

/* "SEKUNDEN" ist das laengste Label — weniger Sperrung, damit alle
     vier Einheiten samt Trennern in die Breite passen */
.countdown__label { font-size: 0.68rem; letter-spacing: 0.04em; }

/* Countdown: mehr Luft, damit die Ziffern nicht kleben */
.countdown { gap: 6px; }

.countdown__num { font-size: 1.5rem; }

/* Tap-Ziele auf Fingergroesse bringen */
.footer__legal-btn {
    padding: 14px 8px;
    font-size: 0.85rem;
  }

.footer__legal {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

.legal-modal__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.faq__question { padding-top: 18px; padding-bottom: 18px; }

/* Sektionstexte etwas luftiger */
.section__subtitle { font-size: 0.98rem; line-height: 1.7; }

.footer__bottom p { font-size: 0.85rem; }
}

/* ============================================================
   FUNNEL — mehrstufiges Formular als Vollbild-Overlay.
   Uebernommen aus den Recruiting-Landingpages, wo es seit August
   produktiv laeuft. Generisch: welche Frage welches Feld fuellt,
   steht im Markup (data-feld am .funnel-step), nicht hier.
   ============================================================ */

.funnel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background:
    radial-gradient(ellipse 75% 75% at 50% 50%, rgba(201, 168, 76, 0.10) 0%, transparent 65%),
    rgba(10, 8, 6, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  /* Die inaktiven Schritte parken per translateX(60px) rechts ausserhalb.
     Damit ist der Inhalt breiter als der Overlay: gemessen 450px bei 390px
     Fenster. "hidden" verhindert nur das Wischen, der Overlay BLEIBT ein
     Scrollcontainer und kann programmatisch verschoben werden — etwa wenn
     der Browser ein fokussiertes Eingabefeld in den Blick holt. Dann steht
     der ganze Funnel dauerhaft bis zu 60px schief.
     "clip" macht ihn gar nicht erst scrollbar. Die Zeile davor bleibt als
     Rueckfall fuer Safari vor iOS 16 stehen. */
  overflow: hidden;
  overflow: clip;
}
.funnel-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.funnel-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
  z-index: 2;
}
.funnel-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px 12px;
  transition: color var(--transition);
  z-index: 3;
}
.funnel-close:hover {
  color: var(--gold);
}
.funnel-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.funnel-step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}
.funnel-step.exit-left {
  opacity: 0;
  transform: translateX(-60px);
  pointer-events: none;
}
.funnel-step__inner {
  text-align: center;
  max-width: 640px;
  width: 100%;
  padding: 24px;
}
.funnel-step__count {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.funnel-step__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 40px;
}
.funnel-step__title em {
  font-style: italic;
  color: var(--gold);
}
.funnel-step__sub {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
}
.funnel-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}
.funnel-option:hover {
    border-color: var(--gold);
    background: rgba(201, 168, 76, 0.08);
    transform: translateX(6px);
  }
.funnel-option.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.12);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.2);
}
.funnel-option__icon {
  color: var(--gold);
  opacity: 0.3;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: opacity 0.3s ease, text-shadow 0.3s ease;
}
.funnel-option:hover .funnel-option__icon,
.funnel-option.selected .funnel-option__icon {
  opacity: 1;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.7);
}
.form__input {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  min-height: 52px;
  -webkit-appearance: none;
}
.form__input::placeholder {
  color: var(--text-dim);
}
.form__input:focus {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.04);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(201, 168, 76, 0.2), 0 0 40px rgba(201, 168, 76, 0.08);
}
.form__input.error {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}
.form__phone-wrap.error {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}
.form__error-msg {
  display: none;
  font-size: 0.78rem;
  color: #e05555;
  margin-top: -8px;
  padding-left: 4px;
}
.form__error-msg.visible {
  display: block;
}
.form__note {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.form__phone-wrap {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--transition);
}
.form__phone-wrap:focus-within {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.04);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(201, 168, 76, 0.2), 0 0 40px rgba(201, 168, 76, 0.08);
}
.form__select {
  width: 80px;
  flex-shrink: 0;
  padding: 16px 6px;
  text-align: center;
  background: rgba(201, 168, 76, 0.06);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-height: 52px;
}
.form__select option {
  background: var(--surface);
  color: var(--text);
}
.form__input--tel {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}
.form__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}
.form__input--age {
  width: 100%;
  text-align: center;
  -moz-appearance: textfield;
}
.form__input--age::-webkit-outer-spin-button,
.form__input--age::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.funnel-option {
    padding: 16px 20px;
    font-size: 0.9rem;
  }
.funnel-close {
    top: 16px;
    right: 16px;
  }
.funnel-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}