/* =============================================================
   Stell dir vor, die Stadt funktioniert.
   Storyboard (Ansicht 1–6) mit animierter roter Linie als Overlay,
   danach normales Scrollen durch Ansicht 7–12.
   ============================================================= */

:root {
  --red: #ff0000;
  --bg: #edecec;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --col: 100vw;   /* volle Bildschirmbreite (mobile: kein grauer Rand) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); -webkit-font-smoothing: antialiased; }

/* -------- Storyboard (sticky) -------- */
.story {
  position: relative;
  height: 600vh;            /* 6 Frames × 100vh */
}
/* Bühne: volle Breite, oben verankert. Frames werden in Originalproportion
   (nicht skaliert) bei voller Breite gezeigt; was nicht in die Höhe passt,
   wird unten beschnitten (overflow:hidden). */
.stage {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100svh;
  height: 100dvh;          /* füllt die volle Höhe, sobald die Adressleiste einklappt */
  overflow: hidden;
  background: #fff;
}

/* Vollständiger Frame (Logo + Karte + Route + Text + Icon in einem SVG).
   Volle Breite, oben verankert; die Route ist fest auf der Karte. */
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;            /* Originalproportion, KEINE Skalierung in die Höhe */
  display: block;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.frame:first-of-type { opacity: 1; }

/* Animierte Route: liegt im selben Koordinatensystem (0–2532) wie die Karte
   in den Frames → deckungsgleich. Wächst per stroke-dashoffset (JS). */
.route-ov {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1170 / 2532;
  z-index: 4;            /* über den Frames */
  pointer-events: none;
}
.route {
  fill: none;
  stroke: red;
  stroke-width: 21.64;
  stroke-linejoin: miter;   /* spitze Ecken wie im Original-SVG, keine Rundung */
  stroke-linecap: butt;
  stroke-miterlimit: 10;
}

/* Desktop (ab 700px): Bühne als zentrierte Handy-Spalte statt Vollbreite */
@media (min-width: 700px) {
  body { --col: min(100vw, calc(100svh * 1170 / 2532)); }
  .stage { width: var(--col); margin-inline: auto; }
}

/* Rechts-/Textseiten (Datenschutz, Impressum, Quellen): mobil volle Breite,
   auf großen Screens eine angenehm lesbare Spalte statt Handy-Schmalspalte. */
body.doc { --col: min(100vw, 520px); }

/* Mobil-SVG (<1024px) bzw. Laptop-SVG (>=1024px) der Rechtsseiten umschalten.
   Laptop-Variante füllt die Breite und skaliert (Höhe via viewBox/aspect-ratio). */
.doc .doc-lap { display: none; }
.doc .doc-lap .page-lap { display: block; width: 100%; height: auto; border: 0; }
@media (min-width: 1024px) {
  .doc .doc-mobile { display: none; }
  .doc .doc-lap { display: block; position: relative; width: 100%; margin-inline: auto; }
}

/* -------- Detailseiten (Ansicht 7–12), normales Scrollen -------- */
.pages { background: #fff; }
.page-wrap {
  position: relative;
  width: var(--col);
  margin-inline: auto;     /* Höhe folgt aus aspect-ratio (inline gesetzt) */
}
.page { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }

/* Klickflächen über den (Vektor-)Texten der SVGs */
.hot {
  position: absolute;
  display: block;
  z-index: 5;
  cursor: pointer;
  /* zum Justieren sichtbar machen: background: rgba(255,0,0,.25); */
}
/* Infos-Link liegt über dem Frame (per JS in px positioniert) */
#infoHot, #infoHotLap { pointer-events: all; cursor: pointer; }

/* =======================================================================
   Laptop-/Desktop-Ansicht (ab 1024px): Querformat-SVGs (1920×1080).
   Mobil-Layout wird ausgeblendet, Laptop-Layout eingeblendet.
   ======================================================================= */
.story-lap, .pages-lap { display: none; }

@media (min-width: 1024px) {
  .story, .pages { display: none; }     /* Mobil-Layout aus */
  .story-lap { display: block; position: relative; height: 600vh; }
  .pages-lap { display: block; background: #fff; }
}

.stage-lap {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 16:9-Box, die komplett in den Viewport passt (Breite ODER Höhe begrenzt) */
.lap-fit {
  position: relative;
  width: min(100vw, calc(100dvh * 1920 / 1080));
  aspect-ratio: 1920 / 1080;
}
/* Frame füllt die 16:9-Box exakt (Box hat schon das richtige Verhältnis) */
.frame-lap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.frame-lap:first-of-type { opacity: 1; }
.route-ov-lap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 4;
  pointer-events: none;
}
.route-lap {
  fill: none;
  stroke: red;
  stroke-width: 18.83;       /* wie die eingebackene Laptop-Route */
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 10;
}

/* Detailseiten (Ansicht 7–12) im Laptop-Format: volle Breite, normaler Scroll */
.page-wrap-lap { position: relative; width: 100%; }
.page-lap { display: block; width: 100%; height: auto; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frame, .frame-lap { transition: none; }
}

/* -------- Laptop A12: Video-Play-Button + Lightbox -------- */
.lap-play {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 0; cursor: pointer; z-index: 6;
  display: grid; place-content: center;
}
.lap-play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 26px solid #05141d;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.lap-play:hover { background: #fff; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; padding: 4vw; }
body.lb-open { overflow: hidden; }
body.lb-open .lightbox { display: flex; }
.lb-frame { width: min(92vw, 158vh); aspect-ratio: 16 / 9; }
.lb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb-close { position: absolute; top: 14px; right: 22px; background: transparent; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; }