/* =====================================================================
   VERMOVIA — Scroll Experience (Startseite).
   Ein durchgehender Film in einer 100vh-Sticky-Stage, per Scroll gescrubbt.
   Nutzt ausschließlich Token-Variablen aus main.css.
   ===================================================================== */

/* ---------- Journey-Container & Stage ---------- */
.journey { position: relative; height: 820vh; }
.journey .stage {
  /* svh statt dvh: die einfahrende Mobile-Adressleiste darf die Bühne
     nicht laufend umbrechen — das erzeugt sichtbare Sprünge beim Scrollen */
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; background: var(--color-bg);
}
.journey .stage video,
.journey .stage .film-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.journey .stage .film-poster { display: none; }
body.exp-statisch .journey .stage video { display: none; }
body.exp-statisch .journey .stage .film-poster { display: block; }
body.exp-statisch .journey { height: 420vh; }

/* Vignette: Lesbarkeit + nahtloser Übergang in die Seite */
.journey .vig { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(11,20,22,0.55) 0%, rgba(11,20,22,0) 22%),
  linear-gradient(180deg, rgba(11,20,22,0) 62%, rgba(11,20,22,0.72) 100%),
  radial-gradient(120% 90% at 50% 55%, rgba(11,20,22,0) 55%, rgba(11,20,22,0.38) 100%);
}
/* Dunkel-Layer für Panel-Momente & Transformation */
.journey .dim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: rgba(11,20,22,0.55); transition: opacity 0.7s ease;
}
.journey .dim.an { opacity: 1; }
.journey .dim.tief { background: rgba(11,20,22,0.82); }

/* ---------- Overlays: Grundverhalten ---------- */
.journey .ovl {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s ease, visibility 0s linear 0.65s;
}
.journey .ovl.an {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.65s ease, transform 0.65s ease, visibility 0s;
}
.journey .ovl.an a, .journey .ovl.an button { pointer-events: auto; }
.journey .ovl .container { width: 100%; }
/* Safe Area: Inhalte nie hinter Notch/Dynamic Island oder Home-Indikator */
.journey .ovl .container {
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

/* ---------- Hero-Overlay (bestehende Hero-Inhalte) ---------- */
.ovl-hero { justify-content: center; }
.ovl-hero .hero-inhalt { max-width: 60ch; }
.ovl-hero p.lead { color: var(--color-text-dim); font-size: 1.1rem; max-width: 52ch; margin: var(--space-4) 0 var(--space-5); }
.ovl-hero .hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.ovl-hero .cta-login { color: var(--color-text-dim); font-size: 0.92rem; white-space: nowrap; }
.ovl-hero .cta-login:hover { color: var(--color-accent-soft); }
.ovl-hero .cta-hinweis { margin-top: var(--space-3); font-size: 0.8rem; color: var(--color-text-dim); letter-spacing: 0.04em; }
.ovl-hero h1 .zeile { display: block; }
/* Schmale Screens: natürlicher Umbruch statt erzwungener Zeilen */
@media (max-width: 540px) { .ovl-hero h1 .zeile { display: inline; } }
.scroll-hinweis {
  position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  color: var(--color-text-dim); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  pointer-events: auto;
}
.scroll-hinweis::after {
  content: ""; display: block; width: 1px; height: var(--space-6);
  background: linear-gradient(var(--color-accent), transparent);
  margin: var(--space-2) auto 0;
}
.scroll-hinweis:hover { color: var(--color-accent-soft); }
@media (max-height: 700px) { .scroll-hinweis { display: none; } }

/* ---------- Flug-Captions (kleine Textzeilen unten links) ---------- */
.ovl-cap { justify-content: flex-end; }
.ovl-cap .container { padding-bottom: 14vh; }
.ovl-cap .k {
  display: block; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-2);
}
.ovl-cap h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 22ch; text-shadow: 0 2px 24px rgba(6,12,14,0.65); }

/* ---------- Panels (Inhalte in den Holds) ---------- */
.panel-karte {
  background: rgba(16,28,31,0.78); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: var(--space-5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  max-width: 620px;
}
.panel-karte .vorzeile { margin-bottom: var(--space-3); }
.panel-karte h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom: var(--space-3); }
.panel-karte > p { color: var(--color-text-dim); max-width: 52ch; }

/* Objektdaten-Panel */
.daten-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4); margin-top: var(--space-5);
}
.daten-grid .kennzahl .wert { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-accent-soft); }
.daten-grid .kennzahl .label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim); }
.daten-hinweis { margin-top: var(--space-4); font-size: 0.78rem; color: var(--color-text-dim); letter-spacing: 0.03em; }

/* Netzwerk-Panel */
.ovl-netz .netz-flex { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.ovl-netz .panel-karte { flex: 1 1 340px; }
.netz-karte-wrap { flex: 1 1 240px; display: flex; justify-content: center; }
.netz-karte-wrap svg { width: 100%; max-width: 300px; height: auto; }
.netz-kette { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.netz-kette .glied {
  border: 1px solid var(--color-line); border-radius: 999px; padding: 6px 14px;
  font-size: 0.8rem; letter-spacing: 0.06em; color: var(--color-text);
  background: rgba(11,20,22,0.5);
}
.netz-kette .pfeil { color: var(--color-accent); font-size: 0.9rem; }

/* Plattform-/Transformations-Panel */
.ovl-plattform .plattform-wrap { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.ovl-plattform .panel-karte { flex: 1 1 340px; }
.ovl-plattform .mock-wrap { flex: 1 1 300px; max-width: 440px; }
.ovl-plattform .mock-wrap svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 48px rgba(6,12,14,0.6)); }

/* ---------- Finale ---------- */
.ovl-finale { text-align: center; align-items: center; }
.ovl-finale .wortmarke { height: clamp(34px, 5vw, 56px); width: auto; margin: 0 auto var(--space-5); }
.ovl-finale h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: var(--space-3); }
.ovl-finale .finale-sub { color: var(--color-text-dim); max-width: 46ch; margin: 0 auto var(--space-6); }
.ovl-finale .finale-cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; align-items: center; }
.ovl-finale .drees-zeile {
  margin-top: var(--space-6); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-text-dim);
}

/* ---------- Fortschrittslinie ----------
   Volle Breite + transform:scaleX statt width: die Animation bleibt damit
   reine Compositor-Arbeit — kein Layout, kein Paint pro Scrollframe. */
.film-fortschritt {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));
  z-index: 60; pointer-events: none; transition: opacity 0.4s ease;
}

/* ---------- Frame-Sequence-Canvas (Mobile/Tablet) ----------
   Zeichnet die 145-Frame-WebP-Sequenz; der Scrollprogress wählt den Frame.
   Keine Transition: ein neuer Frame ersetzt den alten direkt — Flüssigkeit
   kommt aus der Framedichte, nicht aus Blenden. */
#film-frames {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  display: none;
}
body.exp-frames #film-frames { display: block; }
body.exp-frames .journey .stage video { display: none; }
body.exp-statisch #film-frames { display: none; }

/* ---------- Nav-Verhalten während des Films ---------- */
.film-nav { transition: opacity 0.5s ease, background 0.5s ease; }
.film-nav.zurueckhaltend { opacity: 0.45; }
.film-nav.zurueckhaltend:hover, .film-nav.zurueckhaltend:focus-within { opacity: 1; }

/* ---------- Loader ---------- */
.film-loader {
  position: fixed; inset: 0; z-index: 90; background: var(--color-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); transition: opacity 0.8s ease; opacity: 1;
}
.film-loader.fertig { opacity: 0; pointer-events: none; }
.film-loader .marke { font-family: var(--font-display); letter-spacing: 0.28em; font-size: 1.2rem; color: var(--color-text); }
.film-loader .zaehler { font-size: 0.8rem; letter-spacing: 0.22em; color: var(--color-text-dim); }
.film-loader .balken { width: min(220px, 60vw); height: 1px; background: var(--color-line); position: relative; overflow: hidden; }
.film-loader .balken i { position: absolute; inset: 0; width: 0; background: var(--color-accent); display: block; }

/* ---------- Tablet: kompakter als Desktop, länger als Smartphone ---------- */
@media (max-width: 1024px) {
  .journey { height: 620vh; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  /* Deutlich kürzer als Desktop: ein Finger-Wisch erzeugt spürbaren
     Fortschritt. Kapitel-Modus (experience.js) spielt Flüge nativ ab,
     daher braucht die Reise keinen langen Scrubbing-Weg mehr. */
  .journey { height: 460vh; }
  body.exp-statisch .journey { height: 320vh; }
  .ovl-cap .container { padding-bottom: 18vh; }
  /* Backdrop-Blur ruckelt auf Mobil-GPUs beim Scrollen — deckende Fläche statt Blur */
  .panel-karte {
    padding: var(--space-4);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(13,23,26,0.93);
  }
  .daten-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .netz-karte-wrap { display: none; }           /* weniger Ebenen auf Mobile */
  .ovl-plattform .mock-wrap { display: none; }
  .ovl-cap h2 { font-size: 1.6rem; }
}

/* ---------- Smartphone quer: wenig Höhe — Panels kompakt und scrollbar ---------- */
@media (max-height: 500px) {
  .journey .ovl.an .panel-karte { pointer-events: auto; }
  .panel-karte { max-height: 82svh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-3); }
  .panel-karte h2 { font-size: 1.25rem; }
  .daten-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
  .ovl-cap .container { padding-bottom: 8vh; }
  .ovl-finale .wortmarke { height: 30px; margin-bottom: var(--space-3); }
  .ovl-finale .finale-sub { margin-bottom: var(--space-4); }
  .ovl-finale .drees-zeile { margin-top: var(--space-4); }
}

/* ---------- Reduzierte Bewegung: statische, sanft eingeblendete Szenen ---------- */
@media (prefers-reduced-motion: reduce) {
  .journey .ovl { transform: none; transition: opacity 0.4s ease, visibility 0s; }
  .journey .ovl.an { transform: none; }
  .film-loader { display: none; }
}

/* ---------- Telemetrie-Overlay (nur ?journeyDebug=1) ----------
   Wird ausschließlich per Testparameter erzeugt — normale Besucher sehen es nie. */
.journey-debug {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 8px 10px; border-radius: 6px;
  background: rgba(0,0,0,0.82); color: #7CFFB2;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre; pointer-events: none;
  text-shadow: none; letter-spacing: 0;
  max-width: 62vw;
}

/* Manueller Scrubber im Debugmodus — beweist Video-Seeking unabhängig vom Scroll */
.journey-debug-tools {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  background: rgba(0,0,0,0.9);
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
}
.journey-debug-tools label {
  display: block; color: #FFD37C; margin-bottom: 4px;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.journey-debug-tools input { width: 100%; height: 34px; }
.journey-debug .ja { color: #7CFFB2; }
.journey-debug .nein { color: #FF7C7C; }
.journey-debug b { color: #FFD37C; font-weight: 600; }