/* ============================================================
   HERO — WALDKORRIDOR

   Das Video läuft einmal (9 s): aus dem Nebelwald heraus, die
   Straße glüht auf, die Kamera steigt über die Wipfel. Am Ende
   übernimmt das Standbild des letzten Frames und bleibt stehen;
   beim Scrollen fahren wir in dessen Fluchtpunkt hinein.

   Am letzten Frame nachgemessen (1920 × 1080):
     Straße   x 963 → 50,16 % der Breite
     Horizont y 276 → 25,6 %, Halbwert 26,4 %
     Fluchtpunkt also 50,16 % / 26,0 %
   Positionen rechnet js/tunnel.js in Viewport-Pixel um, sonst
   wandert der Zoom-Ursprung bei anderem Seitenverhältnis aus
   dem Fluchtpunkt.
   ============================================================ */

:root {
  --tunnel-scroll: 175svh;   /* Flugstrecke = davon 75svh */
  --light: var(--c-lamp);    /* Farbe des Straßenlichts (= #fdf6e6) */
  --light-core: #fffdf6;
}

/* ---------- Rahmen ------------------------------------------------- */
.tunnel {
  position: relative;
  height: var(--tunnel-scroll);
  background: #000;
}

.tunnel__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

/* Video und Standbild liegen in einer Ebene und werden gemeinsam um
   den Fluchtpunkt skaliert. */
/* Den Maßstab schreibt js/tunnel.js direkt hierher. Ohne JavaScript
   bleibt es bei scale(1) — der Hero steht dann einfach still. */
.tunnel__scene {
  position: absolute;
  inset: 0;
  transform-origin: var(--vp-x, 50.16%) var(--vp-y, 26%);
  transform: scale(1);
  will-change: transform;
}

/* ---------- Video und eingefrorenes Standbild -------------------------
   Das Video läuft einmal durch. Am Ende übernimmt das Standbild des
   letzten Frames — beim 9-fachen Zoom kostet ein Bild keine
   Dekodierung und bleibt zuverlässig stehen. */
.tunnel__video,
.tunnel__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mittig — js/tunnel.js rechnet den Zoom-Ursprung mit genau
     dieser Annahme (Beschnitt gleichmäßig auf beide Seiten). */
  object-position: 50% 50%;
}

.tunnel__still { opacity: 0; }

/* Umschalten am Videoende. Ohne Blende, sonst blitzt der Wechsel.
   `display: none` statt `opacity: 0`: ein durchsichtiges Video bliebe
   eine eigene Compositing-Ebene, die den ganzen Zoom über mitgeschleppt
   wird. Das Element liegt absolut, es reflowt beim Ausblenden nichts. */
.tunnel.is-frozen .tunnel__video { display: none; }
.tunnel.is-frozen .tunnel__still { opacity: 1; }

/* ---------- Schleier über der hellen Phase ---------------------------
   Die ersten fünf Sekunden spielen im dunklen Nebelwald, danach steigt
   die Kamera über die Wipfel und der Himmel füllt das obere Viertel.
   Dort steht das Motto — ohne Schleier bliebe es bei 1,2:1 stehen.

   Sichtbar ist der Grundzustand, nicht die Ausnahme: ohne JavaScript
   läuft das Video trotzdem bis in die helle Phase, und dann muss der
   Schleier liegen. js/tunnel.js nimmt ihn nur für die dunkle Eröffnung
   weg (.is-dark-phase) und gibt ihn rechtzeitig wieder frei. */
.tunnel__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 700ms var(--ease-ui);
  /* Nicht Schwarz, sondern der kühle Grünton des Waldes — sonst legt
     sich ein Balken über den Dunst statt einer Verlaufsstimmung. */
  background: linear-gradient(to bottom,
              rgba(20, 28, 26, 0.58) 0%,
              rgba(20, 28, 26, 0.52) 26%,
              rgba(20, 28, 26, 0.10) 46%,
              rgba(20, 28, 26, 0) 58%);
}

.tunnel.is-dark-phase .tunnel__scrim { opacity: 0; }

/* ---------- Weiß-Übergang am Ende des Durchflugs --------------------- */
.tunnel__flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--c-cream);
  opacity: 0;              /* js/tunnel.js schreibt direkt hierher */
  pointer-events: none;
}

/* ============================================================
   HERO-INHALT

   Anordnung: oben die Wortmarke riesig über die volle Breite, unten
   links die Aussage in zwei versetzten Zeilen, unten rechts der Knopf.
   Mehr steht nicht im Bild — das Video trägt die Mitte.
   ============================================================ */
.tunnel__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3.4svh, 44px) var(--gutter) clamp(26px, 4.4svh, 52px);
  opacity: 1;              /* js/tunnel.js blendet beim Scrollen ab */
  pointer-events: none;
}

/* ---------- Wortmarke ------------------------------------------------
   Läuft über die ganze Breite und steht von Beginn an im Bild — kein
   Reveal, damit der Name schon da ist, während die Kamera noch im
   Nebelwald fährt. */
.hero__brand {
  text-align: center;
  /* Aldrich, nur hier und in keiner anderen Zeile der Seite. Der
     Schnitt existiert ausschließlich in 400 — ein höheres Gewicht
     würde der Browser künstlich fetten. */
  font-family: 'Aldrich', var(--font);
  /* „Peter Beratung" baut in Aldrich 7,88 em breit — nachgemessen.
     Der Grad wird aus der verfügbaren Spaltenbreite gerechnet, nicht
     aus dem Viewport: sonst füllt er bei 1920 anders als bei 1440,
     weil die Randspalte fest ist. Teiler 8,05 lässt Luft für
     Scrollleisten. */
  font-size: calc((100vw - var(--gutter) * 2) / 8.05);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--light-core);
  text-shadow: 0 2px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- Fußzeile: Aussage links, Knopf rechts -------------------- */
.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

/* ---------- Aussage ---------------------------------------------------
   Zwei Zeilen, die zweite eingerückt — der Versatz nimmt die Bewegung
   des Videos auf, statt einen Block hinzustellen. Archivo, nicht
   Aldrich: die technische Schrift bleibt der Wortmarke vorbehalten.

   Der Grad ist so gewählt, dass „Fakten schaffen," rund die halbe
   Viewportbreite füllt; der Abstand nach unten hebt den Block über die
   Grundlinie des Knopfs, statt ihn auf den unteren Rand zu kleben. */
.hero__motto {
  margin-bottom: clamp(0px, 11svh, 116px);
  font-size: clamp(26px, 6.6vw, 104px);
  font-weight: var(--w-medium);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  color: var(--light-core);
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.85);
}

.hero__motto-a,
.hero__motto-b { display: block; }

/* Einrückung in em, damit sie mit dem Grad mitwächst */
.hero__motto-b { padding-left: 1em; }

/* ---------- Textmarker auf „Wege finden" ------------------------------
   Der Balken fährt von links auf und die Schrift kippt dabei auf Tinte,
   wie mit einem Marker gezogen. --ease-spring ist die resampelte
   Framer-Feder: kritisch gedämpft, kein Überschwingen — dieselbe Kurve,
   die eine Spring-Animation mit hoher Dämpfung erzeugt.

   Ohne JavaScript bleibt der Balken eingefahren und die Zeile steht
   einfach hell da; die Aussage geht dadurch nicht verloren. */
.hero__hl {
  position: relative;
  display: inline-block;
}

.hero__hl-bar {
  position: absolute;
  /* Oben bis zur Versalhöhe, unten knapp unter die Grundlinie, seitlich
     ein Stück Überstand — sonst sitzt der Balken wie ein Kasten. */
  inset: 0.1em -0.09em 0.06em;
  z-index: 0;
  background: var(--c-amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 820ms var(--ease-spring);
}

.hero__hl-text {
  position: relative;
  z-index: 1;
  /* Erst umfärben, wenn der Balken die Zeile zur Hälfte überstrichen
     hat — vorher stünde dunkle Schrift auf dunklem Bild. */
  transition: color 320ms linear 260ms;
  text-shadow: none;
}

.hero__motto.is-marked .hero__hl-bar { transform: scaleX(1); }

/* Tinte auf Bernstein ergibt 6,9:1 */
.hero__motto.is-marked .hero__hl-text { color: var(--c-ink); }

.hero__cta { flex-shrink: 0; pointer-events: auto; }

/* ============================================================
   CTA — nachgebaut nach der übergebenen InteractiveHoverButton:
   Label rutscht nach rechts raus, ein zweites mit Pfeil rutscht
   von rechts nach, und ein Punkt links wächst über den ganzen
   Knopf. Füllfarbe ist das warme Licht der Straße.
   ============================================================ */
.ihbutton {
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 13rem;
  padding: 15px 26px;
  border: 1px solid rgba(253, 246, 230, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--light-core);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-body);
  text-align: center;
  cursor: pointer;
  isolation: isolate;
}

/* Der wachsende Punkt — die eigentliche Füllung */
.ihbutton__fill {
  position: absolute;
  left: 20%;
  top: 40%;
  z-index: -1;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--light);
  transition: all 340ms var(--ease-ui);
}

.ihbutton:hover .ihbutton__fill,
.ihbutton:focus-visible .ihbutton__fill {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  scale: 1.8;
}

/* Label 1 rutscht raus */
.ihbutton__label {
  display: inline-block;
  translate: 4px 0;
  transition: translate 340ms var(--ease-ui), opacity 340ms var(--ease-ui);
}

.ihbutton:hover .ihbutton__label,
.ihbutton:focus-visible .ihbutton__label { translate: 48px 0; opacity: 0; }

/* Label 2 rutscht nach, mit Pfeil */
.ihbutton__hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  translate: 48px 0;
  opacity: 0;
  color: var(--c-ink);
  transition: translate 340ms var(--ease-ui), opacity 340ms var(--ease-ui);
}

.ihbutton:hover .ihbutton__hover,
.ihbutton:focus-visible .ihbutton__hover { translate: -4px 0; opacity: 1; }

.ihbutton__hover svg { width: 17px; height: 17px; }

.ihbutton:focus-visible { outline: 2px solid rgba(253,246,230,0.8); outline-offset: 3px; }

/* Warme Variante: füllt sich in Bernstein statt in Lampenlicht.
   Markiert den primären Weg, wenn zwei Knöpfe nebeneinanderstehen.
   Tinte auf Bernstein ergibt 6,9:1. */
.ihbutton--warm { border-color: rgba(201, 138, 46, 0.6); }
.ihbutton--warm .ihbutton__fill { background: var(--c-amber); }

/* ---------- Scrollhinweis --------------------------------------------- */
.tunnel__hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  z-index: 3;
  /* 0.4 ergab nur 3,47:1 auf dem Tunnelgrund. 0.7 bringt über die
     ganze Bandbreite des Untergrunds mindestens 6,5:1. */
  color: rgba(253, 246, 230, 0.7);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.9);
  opacity: 0;              /* js/tunnel.js zeigt ihn, sobald Licht ist */
  transition: opacity 700ms var(--ease-ui);
  pointer-events: none;
}

/* ---------- Responsiv -------------------------------------------------- */
/* Auf dem Handy war der Weg vom Hero zur nächsten Sektion zu lang:
   50svh reines Durchfliegen sind dort mehrere Wischer. 135/130svh
   lassen 35 bzw. 30svh Flugstrecke — der Zoom bleibt weich, der
   Übergang kommt aber deutlich früher. */
@media (max-width: 900px) {
  :root { --tunnel-scroll: 135svh; }
  .hero__brand { letter-spacing: -0.005em; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* Untereinander gestapelt schiebt der Abstand nur den Knopf weg */
  .hero__motto { margin-bottom: 0; }
  .hero__cta { align-self: stretch; }
  .ihbutton { width: 100%; }
}

@media (max-width: 560px) {
  :root { --tunnel-scroll: 130svh; }
  .tunnel__content { padding-inline: 16px; }
  /* Zweizeilig, sonst wird die Wortmarke auf dem Handy unlesbar klein */
  .hero__brand { font-size: 18.6vw; white-space: normal; line-height: 1.0; }
  .hero__motto { font-size: clamp(26px, 8.5vw, 40px); }
  /* Auf 390px fraeße die volle Einrückung ein Achtel der Zeile */
  .hero__motto-b { padding-left: 0.6em; }
  .ihbutton { padding: 13px 20px; font-size: var(--t-small); }
}

/* ---------- Reduzierte Bewegung ---------------------------------------
   Kein Durchflug: Bild und Licht stehen sofort, die Seite scrollt
   normal weiter. */
@media (prefers-reduced-motion: reduce) {
  .tunnel { height: 100svh; }
  .tunnel__scrim { transition: none; }
  .hero__hl-bar, .hero__hl-text { transition: none; }
  .tunnel__pin { position: relative; }
  .tunnel__scene { transform: none; }
  .tunnel__video { display: none; }
  .tunnel__still { opacity: 1; }
}