/* ============================================================
   HERO-VARIANTE: Video im Schriftzug (Zoom-Through)
   Nur auf der Testseite /test geladen.
   ============================================================ */

/* Scrollstrecke: Zoom + Ruhephase mit Video und CTA.
   Bewusst kurz gehalten — das volle Video soll schnell da sein. */
.hero-video { height: 240vh; }

.hero-video-sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--petrol-deep);
}

/* Das Video ist Hochformat. Am Breitbild sieht man davon nur einen
   waagrechten Streifen — mittig laege der auf Bauchhoehe. Mit 30%
   sitzt er auf Kopf-/Brusthoehe, sodass Gesichter im Bild bleiben,
   ohne zu viel Decke zu zeigen.
   Im Hochformat (Handy) wird ohnehin nichts abgeschnitten. */
.hero-video-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

/* Cream-Flaeche mit ausgestanzten Buchstaben — dort scheint das Video durch.
   Die Flaeche ist bewusst viel groesser als die viewBox, damit sie den
   Bildschirm in jedem Seitenverhaeltnis vollstaendig deckt. */
.hero-video-svg {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}
/* Schriftgroesse setzt js/hero-video.js passend zum Bildschirm —
   hier bewusst KEIN font-size, sonst schlaegt die Regel den JS-Wert. */
.hero-video-svg text {
  font-family: "Anton", Impact, sans-serif;
}
.hero-video-fill { fill: var(--cream); }

/* Titel-Duplikat im Preloader: identische Geometrie, gefuellte Buchstaben */
.preloader-title-svg { height: 100svh; }
.preloader-title-svg text { fill: var(--cream); }
.preloader-title-svg text + text { fill: var(--volt); }

/* Zone, ab der die Navigation hell wird (Video dominiert) */
.hero-video-navzone {
  position: absolute; left: 0; right: 0;
  top: 45%; bottom: 0;
  pointer-events: none;
}

/* Inhalt auf dem freigelegten Video */
.hero-video-cta {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(2.5rem, 9vh, 6rem);
  z-index: 3;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 1.3rem;
  color: var(--cream);
  visibility: hidden;
}
.hero-video-claim {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 4rem);
  line-height: 1.03;
  text-transform: uppercase;
  max-width: 18ch;
  text-shadow: 0 0.15em 1.2em rgba(10, 46, 49, 0.45);
}
/* Nur die Farbe hervorheben — Schriftart, Schnitt und Groesse
   bleiben wie im uebrigen Satz */
.hero-video-claim em {
  font: inherit;
  font-style: normal;
  color: var(--volt);
}
.hero-video-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-video-wa { color: var(--cream); }

/* Die Rand-UI liegt anfangs auf der Cream-Flaeche */
.hero-video .hero-side,
.hero-video .hero-next,
.hero-video .hero-scroll { z-index: 3; }

/* Testseiten-Kennzeichnung */
.test-badge {
  position: fixed; left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  z-index: 400;
  background: var(--volt); color: var(--volt-ink);
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.5em 1.1em;
  border-radius: 10rem;
  pointer-events: none;
}

@media (max-width: 700px) {
  .hero-video { height: 210vh; }
  /* Beide Buttons gleich gross und einzeilig — der grosse Button
     war am Handy sonst fast bildschirmbreit */
  .hero-video-actions .btn,
  .hero-video-actions .btn-lg {
    font-size: 0.78rem;
    padding: 0.95em 1.6em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { height: 100svh; }
  .hero-video-cta { visibility: visible; }
}