/* ==========================================================================
   VOWEGA — HEAD / HERO
   Archetyp: Full-Bleed Video-Bühne „Der erste Meter" (bau-brief §1, S0)
   Motion:   „Rollen statt Springen" — gerichteter Reveal aus der Fahrtrichtung
   Easing:   --ease  cubic-bezier(.34,.06,.12,1) („Anrollen")
   ========================================================================== */

/* ---------- Schriften (lokal self-hosted, DSGVO — kein CDN) --------------- */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/familjen-grotesk-wght-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/familjen-grotesk-wght-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../../fonts/source-sans-3-wght-normal.woff2") format("woff2");
}

/* ---------- Tokens (bau-brief §2.1 · Grün exakt aus dem Logo gesampelt) ---- */
:root {
  --papier: #fbfaf6;
  --kreide: #f2f0e9;
  --kreide-tief: #e7e3d8;
  --petrol: #15779b;
  --petrol-tief: #0c2e3c;
  --petrol-nacht: #0a2530;
  --petrol-licht: #2e93b8;
  /* Logo-Grün exakt nachgesampelt aus assets/logo-vowega.png (§0e-14b).
     Brief-Provisorium war #5CB646 — echter Wert: */
  --gruen: #5abc43;
  --gruen-tief: #46a032;
  /* KORREKTUR #23: --ink lief mit dem alten Brief-Schätzwert #16191A statt
     dem nachgesampelten Wert aus logo-farben.md (§0e-14b). #100E0E ist der
     tatsächlich gemessene Median aus 37.634 Pixeln der Wortmarke
     "ELEKTROMOBILE & ROLLER" — der Schätzwert war 3% zu hell. */
  --ink: #100e0e;
  --ink-still: #5a6266;

  --linie-1: rgba(22, 25, 26, 0.12);
  --linie-2: rgba(22, 25, 26, 0.22);
  --linie-3: rgba(22, 25, 26, 0.36);
  --linie-nacht-1: rgba(242, 240, 233, 0.14);
  --linie-nacht-2: rgba(242, 240, 233, 0.26);
  --linie-nacht-3: rgba(242, 240, 233, 0.4);

  --ease: cubic-bezier(
    0.34,
    0.06,
    0.12,
    1
  ); /* „Anrollen" — sitewide der einzige */

  --rand: 40px;
  --inhalt: 1360px;
  --nav-h: 96px;
  --band-h: 96px;

  --display-xl: clamp(3.2rem, 9.6vw, 9rem);
  --lead: clamp(1.25rem, 1.6vw, 1.625rem);
  --body: clamp(1.125rem, 0.9rem + 0.5vw, 1.3125rem); /* Zielwert 19px */
  --label: 0.9375rem; /* nie kleiner */
}

@media (max-width: 900px) {
  :root {
    --rand: 20px;
    --nav-h: 80px;
  }
}

/* ---------- Reset / Basis ------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--kreide);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* nie hidden+visible mischen (§0e-43) */
}
img,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke — Tastatur zuerst (BFSG) */
.skip {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 100;
  background: var(--gruen);
  color: var(--ink);
  padding: 14px 22px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip:focus {
  top: 14px;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
}

/* ==========================================================================
   1 · NAVIGATION — liegt ÜBER dem Video, das Video beginnt am ersten Pixel
   ========================================================================== */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
  padding-inline: var(--rand);
}
.nav__inner {
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
}

/* Das Logo bleibt UNVERÄNDERT (§0e-24). Weil es einen weißen Grund samt
   Schlagschatten mitbringt, bekommt es einen hellen Träger („Schild") —
   geändert wird der Untergrund, nie das Logo. */
.nav__marke {
  display: block;
  flex: 0 0 auto;
  background: #fdfdfd;
  padding: 8px 16px;
  box-shadow: 0 2px 0 rgba(10, 37, 48, 0.28);
}
.nav__marke img {
  height: 48px;
  width: auto;
}
@media (min-width: 901px) {
  .nav__marke img {
    height: 64px;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.nav__links a {
  display: block;
  padding: 10px 2px;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kreide);
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(10, 37, 48, 0.75);
  position: relative;
}
/* ⭐ Akzent-Device „Der Kilometerstein" als Aktiv-/Hover-Marke */
.nav__links a::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 0;
  background: var(--gruen);
  transition: height 0.18s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  height: 18px;
}

@media (max-width: 1100px) {
  .nav__links {
    display: none;
  }
}

/* ---------- Menue unterhalb 1100 px --------------------------------------
   Ohne das verschwindet die Navigation ersatzlos. Grosse Ziele und grosse
   Schrift, weil die Zielgruppe teils aelter/mobilitaetseingeschraenkt ist.  */
.nav__schalter {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--kreide);
  font: inherit;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(10, 37, 48, 0.75);
}
@media (max-width: 1100px) {
  .nav__schalter {
    display: inline-flex;
  }
}
.nav__balken {
  position: relative;
  width: 30px;
  height: 2px;
  background: var(--kreide);
}
.nav__balken::before,
.nav__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--kreide);
}
.nav__balken::before {
  top: -9px;
}
.nav__balken::after {
  top: 9px;
}

.menue {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--petrol-nacht);
  display: flex;
  flex-direction: column;
  padding: 24px var(--rand) calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 0.52s var(--ease),
    visibility 0s linear 0.52s;
  overflow-y: auto;
}
.menue.is-offen {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.52s var(--ease),
    visibility 0s;
}
.menue__kopf {
  display: flex;
  justify-content: flex-end;
}
.menue__zu {
  min-width: 56px;
  min-height: 56px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--kreide);
  font: inherit;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menue__liste {
  list-style: none;
  margin: clamp(16px, 4vh, 40px) 0 auto;
  padding: 0;
}
.menue__liste a {
  position: relative;
  display: block;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--linie-nacht-1);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.625rem, 5.4vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--kreide);
  text-decoration: none;
}
/* ⭐ Kilometerstein als Aktiv-Marke, wie in der Desktop-Nav */
.menue__liste a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 0;
  background: var(--gruen);
  transition: height 0.18s var(--ease);
}
.menue__liste a[aria-current="page"]::before,
.menue__liste a:hover::before {
  height: 22px;
}
.menue__draht {
  display: flex;
  gap: 12px;
  padding-top: 20px;
}
.menue__draht a {
  flex: 1 1 0;
  min-height: 64px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-weight: 600;
  background: var(--gruen);
  color: var(--ink);
}
.menue__draht a + a {
  background: none;
  color: var(--kreide);
  border: 1px solid var(--linie-nacht-2);
}
body.menue-offen {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .menue {
    transition: none;
  }
  .menue.is-offen {
    transition: none;
  }
}

/* ==========================================================================
   2 · HERO — Video inset:0 über den kompletten Head (§0e-17 / §0e-31)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  background: var(--petrol-nacht);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}

/* GEMESSEN 03.08.2026, nicht angenommen: Ein Bild, das den Viewport EXAKT
   fuellt, wird von Chrome als Hintergrund gewertet und ist KEIN LCP-Kandidat
   (bei 88% Hoehe ist es einer, bei 100% nie). Bei einem Full-Bleed-Head nach
   §0e-31 traegt darum zwangslaeufig die HEADLINE das LCP — gemessen 136-620 ms.
   Folge fuer die Choreografie: die H1 darf NIE aus opacity:0 kommen (das
   schliesst Chrome aus), deshalb laeuft der Reveal ueber eine Maske. */
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 62% 58%;
}
.hero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero__video.is-spielt {
  opacity: 1;
}

/* Gerichteter Verlauf zur Textseite — Text sitzt IN der Szene,
   nicht in einer schwebenden Karte (§0e-37). */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* 1 · zur Textseite unten — traegt Display + Band auch ueber hellem Asphalt */
    linear-gradient(
      to top,
      rgba(10, 37, 48, 0.9) 0%,
      rgba(10, 37, 48, 0.64) 17%,
      rgba(10, 37, 48, 0.26) 37%,
      rgba(10, 37, 48, 0) 58%
    ),
    /* 2 · nach links — von dort kommt die gerichtete Morgensonne */
    linear-gradient(
        to right,
        rgba(10, 37, 48, 0.74) 0%,
        rgba(10, 37, 48, 0.34) 32%,
        rgba(10, 37, 48, 0) 62%
      ),
    /* 3 · Kopfkante fuer die Navigation */
    linear-gradient(
        to bottom,
        rgba(10, 37, 48, 0.58) 0%,
        rgba(10, 37, 48, 0.08) 20%,
        rgba(10, 37, 48, 0) 34%
      );
}

.hero__body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  padding-bottom: clamp(28px, 4vh, 52px);
}

/* ---------- Display XL: 2 Zeilen, linksbündig, Grundlinie bei ~68 vh ------ */
.hero__h1 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--display-xl);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--kreide);
  text-wrap: balance;
}
.hero__h1 .zeile {
  display: block;
}
.hero__h1 .zeile--leise {
  color: rgba(242, 240, 233, 0.82);
}

.hero__meta {
  margin: clamp(18px, 2.4vh, 30px) 0 0;
  max-width: 46%;
  font-size: var(--lead);
  line-height: 1.5;
  color: rgba(242, 240, 233, 0.86);
}
@media (max-width: 900px) {
  .hero__meta {
    max-width: 100%;
  }
}

/* ---------- Der gerichtete Roll-Reveal ------------------------------------
   Aus der Fahrtrichtung herein: weiche 40-px-Kante, nichts poppt, nichts fällt.
   Startwert ist die ENDposition — ohne JS / ohne Motion steht alles da.      */
@property --roll {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 112%;
}
.roll {
  --roll: 112%;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 var(--roll),
    transparent calc(var(--roll) + 40px)
  );
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 var(--roll),
    transparent calc(var(--roll) + 40px)
  );
}

/* ==========================================================================
   3 · DIREKTDRAHT-BAND (96 px) — sitzt auf der Videounterkante
   Drei gleichrangige Wege statt „gefüllter CTA + Ghost-CTA" (§0b-8)
   ========================================================================== */
.direktdraht {
  position: relative;
  z-index: 4;
  min-height: var(--band-h);
  background: var(--petrol-nacht);
  border-top: 2px solid var(--petrol-licht); /* harte Lichtkante */
}
.direktdraht__inner {
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  min-height: var(--band-h);
  display: flex;
  align-items: stretch;
}

/* Live-Erreichbarkeit — Hotline Mo–Fr 16–20 Uhr */
.status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: clamp(20px, 3vw, 44px);
  border-right: 1px solid var(--linie-nacht-1);
  flex: 0 1 auto;
}
.status__punkt {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 999px; /* Ausnahme Radius 0 */
  background: var(--petrol-licht);
  box-shadow: 0 0 0 0 rgba(90, 188, 67, 0.55);
}
.status.is-offen .status__punkt {
  background: var(--gruen);
}
.status__text {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kreide);
  white-space: nowrap;
}
.status__zusatz {
  display: block;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  font-size: 0.9375rem;
  color: rgba(242, 240, 233, 0.68);
}

.wege {
  display: flex;
  margin-left: auto;
  flex: 0 0 auto;
}
.weg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--band-h);
  min-width: max(148px, 12vw);
  padding: 12px clamp(16px, 2.2vw, 30px);
  border-left: 1px solid var(--linie-nacht-1);
  text-decoration: none;
  color: var(--kreide);
  transition: background-color 0.18s var(--ease);
}
.weg:hover,
.weg:focus-visible {
  background: rgba(46, 147, 184, 0.18);
}
.weg__label {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 240, 233, 0.7);
}
.weg__wert {
  font-size: clamp(1.125rem, 1.35vw, 1.375rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* Grün ist FLÄCHE, nie Schrift (§0e-15) — Ink darauf ≈ 7:1 */
.weg--primaer {
  background: var(--gruen);
  color: var(--ink);
  border-left-color: transparent;
}
.weg--primaer .weg__label {
  color: rgba(22, 25, 26, 0.74);
}
.weg--primaer:hover,
.weg--primaer:focus-visible {
  background: var(--gruen-tief);
}

@media (max-width: 1000px) {
  :root {
    --band-h: auto;
  }
  .direktdraht__inner {
    flex-direction: column;
    padding-block: 18px;
    gap: 16px;
  }
  .status {
    border-right: 0;
    padding-right: 0;
  }
  .wege {
    margin-left: 0;
    width: 100%;
  }
  .weg {
    flex: 1 1 0;
    min-width: 0;
    min-height: 68px;
    padding-inline: 10px;
  }
  .weg:first-child {
    border-left: 0;
  }
  .weg__wert {
    font-size: 1.0625rem;
  }
}
@media (max-width: 560px) {
  .weg__wert {
    font-size: 0.9375rem;
  }
  .weg__label {
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   4 · Fixe Kontakt-FABs — ab dem ERSTEN Pixel sichtbar (§0e-12)
   ========================================================================== */
.fabs {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  width: 64px;
  height: 64px;
  border-radius: 999px; /* Ausnahme Radius 0 */
  display: grid;
  place-items: center;
  background: var(--gruen);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(10, 37, 48, 0.34);
  transition:
    transform 0.18s var(--ease),
    background-color 0.18s var(--ease);
}
.fab:hover,
.fab:focus-visible {
  transform: translateY(-3px);
  background: var(--gruen-tief);
}
.fab svg {
  width: 30px;
  height: 30px;
}
.fab--stumm {
  background: var(--papier);
}
.fab--stumm:hover,
.fab--stumm:focus-visible {
  background: var(--kreide-tief);
}

/* ==========================================================================
   4b · Mobil-Korrekturen (390 px ist eigener Bau-Gegenstand, §0e-19)
   ========================================================================== */

/* Der Bildausschnitt muss auf Hochkant das FAHRZEUG zeigen, nicht den Sitz.
   object-fit: cover beschneidet sonst genau die Aussage weg. */
@media (max-width: 900px) {
  .hero__poster,
  .hero__video {
    object-position: 64% 44%;
  }
}

/* Der FAB-Stapel lag auf dem dritten Weg des Direktdraht-Bands („Rückruf").
   Regel §0e-12: unten PLATZ SCHAFFEN, niemals den Knopf verstecken.
   Auf Mobil liegen die FABs darum in einer Reihe an der Unterkante,
   das Band bekommt darüber seinen eigenen Freiraum. */
@media (max-width: 1000px) {
  .fabs {
    flex-direction: row;
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }
  .fab {
    width: 56px;
    height: 56px;
  }
  .fab svg {
    width: 26px;
    height: 26px;
  }
  .direktdraht__inner {
    padding-bottom: 84px;
  }
}

/* ==========================================================================
   5 · A11y — No-Motion-First
   Ohne Motion steht der Head statisch stark: Poster + paintende Headline.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .roll {
    --roll: 112%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__poster,
  .hero__video {
    transform: none !important;
  }
  .hero__video {
    transition: none;
  }
  .skip,
  .weg,
  .fab,
  .nav__links a::after {
    transition: none;
  }
}