/* =============================================================================
   frog-view.css — IMPORT MANIFEST (Issue #299 Etappe 7)
   The former 7459-line monolith was split VERBATIM (byte-identical move) into
   one file per section under src/styles/frog-view/. Order is load-bearing —
   later sections override earlier ones; do not reorder. All existing
   `import './frog-view.css'` call sites keep working unchanged.
   ============================================================================= */
/* =============================================================================
   TSCHEPP-AR — Design System
   Extracted from Paper Styleguide "Tschepp-AR — Styleguide" (NA-0)
   Prefix: .fv-
   ============================================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--ar-font-body); }
/* ---------------------------------------------------------------------------
   Design Tokens — available globally
   ---------------------------------------------------------------------------
   IMPORTANT: These CSS variables mirror src/brand/tokens.ts (the
   canonical source-of-truth for the brand). When you change a token
   here, update the matching field in tokens.ts so the canvas renderers
   (tile-map's POI labels, route tooltip, GPS pill) stay in sync.
   Token mapping:
     --ar-black           → BRAND.colors.black
     --ar-white           → BRAND.colors.white
     --ar-gold            → BRAND.colors.gold
     --ar-green           → BRAND.colors.green
     --ar-sage            → BRAND.colors.sage
     --ar-gray            → BRAND.colors.gray
     --ar-font-display    → BRAND.fonts.display
     --ar-font-body       → BRAND.fonts.body
     --ar-font-cinzel     → BRAND.fonts.serif
   --------------------------------------------------------------------------- */
:root {
  --ar-black: #1A1F16;
  --ar-white: #F7F5F0;
  --ar-green: #3D5A3E;
  --ar-gold: #C4A96A;
  --ar-gray: #5A5347;
  --ar-sage: #8B9D83;

  --ar-bg: var(--ar-white);
  --ar-text: var(--ar-black);
  /* Text-Abstufungen für Overlay-Karten (Issue 115746: die fv-card-Familie
     stand hart auf Nacht-Weiß und hatte keinen Hell-Zweig). */
  --ar-text-dim: rgba(26, 31, 22, 0.5);
  --ar-text-faint: rgba(26, 31, 22, 0.32);
  --ar-accent: var(--ar-gold);
  --ar-action: var(--ar-green);

  --ar-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ar-font-body: 'Inter', system-ui, sans-serif;
  --ar-font-cinzel: 'Cinzel', 'Times New Roman', serif;

  --ar-glass-bg: rgba(255, 255, 255, 0.12);
  --ar-glass-border: rgba(255, 255, 255, 0.08);
  --ar-glass-radius: 12px;

  /* Overlay glass — for floating UI: header, bottom sheet, footer-nav,
     buttons. Use these tokens for any full-width-bar overlay so the
     glassmorphism rendering is consistent across the whole app. */
  /* Was 0.65: in DAY mode the bright satellite map bled straight through the
     bottom-sheet / route card, washing it to a translucent grey ("ausgegraut").
     The night fix only raised the .fv-page--night value — day mode kept 0.65
     and stayed washed. Lift to 0.86 to match, so the card reads as a solid
     bright glass surface in both modes (Alex 2026-07-10). */
  --ar-overlay-bg: rgba(247, 245, 240, 0.86);
  --ar-overlay-border: rgba(0, 0, 0, 0.06);
  --ar-overlay-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  --ar-overlay-blur: blur(20px);
  --ar-overlay-icon: #1A1F16;
}
/* ---------------------------------------------------------------------------
   Page Toolbar (sky/photo toggles — floats top-right below SiteNav)
   --------------------------------------------------------------------------- */
.fv-toolbar {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 90;
  display: flex;
  gap: 6px;
}
.fv-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: var(--ar-white);
  background: var(--ar-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.fv-toolbar__btn:hover {
  background: rgba(255, 255, 255, 0.22);
}
.fv-toolbar__btn--active {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px var(--ar-gold);
}
/* ---------------------------------------------------------------------------
   Global Site Navigation
   --------------------------------------------------------------------------- */
.sn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 56px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
/* Glassmorphism when scrolled */
.sn-header:not(.sn-header--transparent) {
  background: rgba(26, 31, 22, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.06);
}
/* Force glassmorphism on map pages (always over the map) */
.sn-header--glass {
  background: var(--ar-overlay-bg) !important;
  backdrop-filter: var(--ar-overlay-blur) !important;
  -webkit-backdrop-filter: var(--ar-overlay-blur) !important;
  border-bottom-color: var(--ar-overlay-border) !important;
}
.sn-header__spacer { height: 56px; }
.sn-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
}
.sn-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ar-white);
  flex-shrink: 0;
}
.sn-header__logo { height: 28px; width: auto; }
/* Geschlossene Marke (Tropfen + Wortmarke in einer Datei, Alex 29.07.).
   Etwas höher als die alte reine Bildmarke, weil die Wortmarke nur einen
   Teil der Höhe einnimmt — 30px Bildhöhe ergeben eine Wortmarke in etwa der
   Größe der bisherigen 15px-Textzeile.
   Sie ist eine MASKE, kein Bild: die Breite kommt darum aus dem
   Seitenverhältnis der viewBox (222.59 × 54.12), nicht aus `width: auto` —
   das ergäbe bei einem <span> null Breite. Die Farbe erbt sie über
   `currentColor` von `.sn-header__brand`, also schwarz auf hellem Glas und
   weiß über dem dunklen Hero, ohne dass es hier noch einmal steht. */
.sn-header__lockup { height: 30px; aspect-ratio: 222.59 / 54.12; display: block; }
.sn-header__title {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.sn-header__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.sn-header__link {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(247,245,240,0.55);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.sn-header__link:hover {
  color: rgba(247,245,240,0.85);
  background: rgba(255,255,255,0.06);
}
.sn-header__link--active {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
}
.sn-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}
.sn-header__user {
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: rgba(247,245,240,0.6);
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sn-header__user:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.9);
}
.sn-header__auth-btn {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.sn-header__auth-btn:hover { background: rgba(255,255,255,0.14); }
/* Icon buttons (sky/photo toggles in header) */
.sn-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: rgba(247,245,240,0.6);
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.sn-header__icon-btn:hover {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
}
.sn-header__icon-btn--active {
  color: var(--ar-gold);
  background: rgba(196,169,106,0.12);
}
/* Fade slider popover */
.sn-fade-wrap { position: relative; }
.sn-fade-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: rgba(26, 31, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  z-index: 1001;
}
.sn-fade-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sn-fade-panel span {
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: rgba(247,245,240,0.5);
}
.sn-fade-panel input[type="range"] {
  width: 100%;
  accent-color: var(--ar-gold);
  height: 4px;
}
/* Hamburger */
.sn-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.sn-header__burger span {
  display: block;
  height: 2px;
  background: var(--ar-white);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.sn-header__burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sn-header__burger--open span:nth-child(2) { opacity: 0; }
.sn-header__burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Drawer */
.sn-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
}
.sn-drawer--open {
  pointer-events: auto;
  visibility: visible;
}
.sn-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.sn-drawer--open .sn-drawer__backdrop { opacity: 1; }
.sn-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: rgba(26, 31, 22, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 80px 24px 32px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sn-drawer--open .sn-drawer__panel { transform: translateX(0); }
.sn-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sn-drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: var(--ar-font-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(247,245,240,0.6);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.sn-drawer__link:hover {
  color: var(--ar-white);
  background: rgba(255,255,255,0.06);
}
.sn-drawer__link--active {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
}
.sn-drawer__link svg { opacity: 0.5; }
.sn-drawer__link--active svg { opacity: 1; }
.sn-drawer__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 16px 0;
}
.sn-drawer__auth {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sn-drawer__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.sn-drawer__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ar-gold);
  color: var(--ar-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.sn-drawer__user-name {
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ar-white);
}
.sn-drawer__user-email {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247,245,240,0.35);
}
.sn-drawer__logout,
.sn-drawer__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.7);
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0 16px;
}
.sn-drawer__logout:hover,
.sn-drawer__login:hover { background: rgba(255,255,255,0.08); }
/* Theme toggles in drawer */
.sn-drawer__theme {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sn-drawer__theme-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(247,245,240,0.6);
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.sn-drawer__theme-btn:hover {
  color: var(--ar-white);
  background: rgba(255,255,255,0.06);
}
.sn-drawer__theme-btn--active {
  color: var(--ar-gold);
}
.sn-drawer__theme-btn svg { opacity: 0.5; }
.sn-drawer__theme-btn--active svg { opacity: 1; color: var(--ar-gold); }
/* Light mode header — dark text on light pages.
   KEIN filter:brightness(0) auf dem Logo mehr: das war für die alte weiße
   IMG-Bildmarke. Die InlineMark (Issue #388) färbt sich über currentColor,
   und brightness(0) machte auch ihren hellen T-Balken schwarz — der Tropfen
   wurde zum konturlosen Klecks (Alex 2026-07-27). */
.sn-header--light .sn-header__brand { color: var(--ar-black); }
.sn-header--light .sn-header__title { color: var(--ar-black); }
.sn-header--light .sn-header__link { color: rgba(26,31,22,0.5); }
.sn-header--light .sn-header__link:hover { color: rgba(26,31,22,0.8); background: rgba(0,0,0,0.04); }
.sn-header--light .sn-header__link--active { color: var(--ar-black); background: rgba(0,0,0,0.06); }
.sn-header--light .sn-header__icon-btn { color: rgba(26,31,22,0.5); }
.sn-header--light .sn-header__icon-btn:hover { color: var(--ar-black); background: rgba(0,0,0,0.06); }
.sn-header--light .sn-header__icon-btn--active { color: var(--ar-gold); background: rgba(196,169,106,0.1); }
.sn-header--light .sn-header__user { color: rgba(26,31,22,0.55); }
.sn-header--light .sn-header__user:hover { background: rgba(0,0,0,0.05); color: rgba(26,31,22,0.85); }
.sn-header--light .sn-header__auth-btn {
  color: var(--ar-black);
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
.sn-header--light .sn-header__auth-btn:hover { background: rgba(0,0,0,0.08); }
.sn-header--light .sn-header__burger span { background: var(--ar-black); }
/* Light glassmorphism when scrolled */
.sn-header--light:not(.sn-header--transparent) {
  background: rgba(247, 245, 240, 0.82);
  border-bottom-color: rgba(0,0,0,0.06);
}
/* Landing-Hero (Alex 2026-07-27): der transparente Header liegt dort über
   dem DUNKLEN Hero-Video. Die --light-Farben oben gelten für hellen
   Seitengrund — hier stünde schwarz auf dunklem Fels. Solange KEIN
   Glass-Hintergrund gerendert ist (--transparent), bleibt die Leiste hell;
   sobald gescrollt wird, greift wieder das helle Glass + dunkler Text. */
.sn-header--hero.sn-header--transparent .sn-header__brand { color: var(--ar-white); }
.sn-header--hero.sn-header--transparent .sn-header__title { color: var(--ar-white); }
.sn-header--hero.sn-header--transparent .sn-header__link { color: rgba(247,245,240,0.65); }
.sn-header--hero.sn-header--transparent .sn-header__link:hover { color: rgba(247,245,240,0.9); background: rgba(255,255,255,0.06); }
.sn-header--hero.sn-header--transparent .sn-header__link--active { color: var(--ar-white); background: rgba(255,255,255,0.1); }
.sn-header--hero.sn-header--transparent .sn-header__icon-btn { color: rgba(247,245,240,0.65); }
.sn-header--hero.sn-header--transparent .sn-header__icon-btn:hover { color: var(--ar-white); background: rgba(255,255,255,0.08); }
.sn-header--hero.sn-header--transparent .sn-header__user { color: rgba(247,245,240,0.7); }
/* Anmelden fehlte in dieser Override-Liste (Alex 29.07., Shot 116320): im
   Light-Mode blieb die --light-Schwarzregel stehen — schwarzer Button auf
   dunklem Fels, während alles andere weiß übersteuert wurde. Werte = die
   Basis-Dunkel-Optik des Buttons. */
.sn-header--hero.sn-header--transparent .sn-header__auth-btn {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.sn-header--hero.sn-header--transparent .sn-header__auth-btn:hover { background: rgba(255,255,255,0.14); }
.sn-header--hero.sn-header--transparent .sn-header__burger span { background: var(--ar-white); }
/* Mobile: show burger, hide desktop links */
@media (max-width: 768px) {
  .sn-header__links { display: none; }
  .sn-header__auth-btn { display: none; }
  .sn-header__user { display: none; }
  .sn-header__burger { display: flex; }
  .sn-header__actions { margin-left: auto; }

  /* #87 Map-mode (navigate-tile, mobile): header bar collapses to just the
     logo + title; bar background/border hidden; logo opens the menu. */
  .sn-header--map { background: transparent !important; border-color: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    /* The transparent bar must not swallow taps meant for the map controls that
       now sit at title height (compass). Let clicks pass through, keep the
       logo button itself interactive (drawer is a sibling, unaffected). */
    pointer-events: none; }
  .sn-header--map .sn-header__brand { pointer-events: auto; }
  .sn-header--map .sn-header__actions { display: none; }
  /* Mobile map header: drop the "TSCHEPP·AR" wordmark, show only the logo —
     larger + a drop-shadow so it reads clearly over the map. Tapping it still
     opens the menu (the brand stays a button). */
  .sn-header--map .sn-header__title { display: none; }
  .sn-header--map .sn-header__logo {
    height: 42px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  }
  /* Die geschlossene Marke trägt die Wortmarke mit — sie darf auf der Karte
     deshalb NICHT auf die 42px der reinen Bildmarke wachsen (das wären über
     170px Breite auf einem 390px-Schirm). 34px halten sie lesbar und lassen
     der Karte den Platz. Der Schlagschatten bleibt: er trennt sie vom Bild. */
  .sn-header--map .sn-header__lockup {
    height: 34px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  }
  /* Logo sits in the top-left of the map. Give it visible breathing room
     so it doesn't crowd the screen edge: 16px horizontal + small top
     pad. The 42px logo stays vertically centred inside the 56px header. */
  .sn-header--map .sn-header__inner { padding-left: 16px; padding-right: 16px; padding-top: 4px; }
  .sn-header__brand--btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
}
/* Desktop: hide burger, drawer still usable */
@media (min-width: 769px) {
  .sn-header__burger { display: none; }

  /* Chat (ChapGuide) launcher: move out of the bottom-left corner to sit just
     right of the map legend, at the same bottom height as the legend + the
     bottom-right info box (all at bottom:24). */
  #cloudchat-btn {
    left: 236px !important;
    right: auto !important;
    bottom: 24px !important;
  }

  /* Map-mode (navigate-tile) on desktop mirrors the mobile collapse, but KEEPS
     the title: the full nav bar (links + theme/auth/burger) is hidden and the
     header becomes transparent. The logo+title float top-left as a glass card
     (à la the reference image); clicking it opens the nav drawer from the right.
     pointer-events:none lets map controls under the bar still receive clicks;
     the brand re-enables them for itself. */
  .sn-header--map {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
    height: auto !important;   /* let the brand sit at top:24, not centred in 56px */
  }
  .sn-header--map .sn-header__links,
  .sn-header--map .sn-header__actions { display: none; }
  /* Drop the centered max-width wrapper so the brand card hugs the real corner
     with equal top + left inset (24), matching the other three corners. */
  .sn-header--map .sn-header__inner {
    max-width: none;
    margin: 0;
    padding: 24px;
    align-items: flex-start;
  }
  .sn-header--map .sn-header__brand {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px 9px 15px; /* left inset matches the legend (15px) so logo + legend content line up */
    border-radius: 14px;
    background: var(--ar-overlay-bg, rgba(26, 31, 22, 0.7));
    border: 1px solid var(--ar-overlay-border, rgba(255, 255, 255, 0.12));
    backdrop-filter: var(--ar-overlay-blur, blur(14px));
    -webkit-backdrop-filter: var(--ar-overlay-blur, blur(14px));
    box-shadow: var(--ar-overlay-shadow, 0 6px 22px rgba(0, 0, 0, 0.32));
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .sn-header--map .sn-header__brand:hover { border-color: rgba(196, 169, 106, 0.55); }
  .sn-header--map .sn-header__logo { height: 34px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
  .sn-header--map .sn-header__title { display: inline; font-size: 17px; letter-spacing: 0.18em; }
}
/* ---------------------------------------------------------------------------
   Footer navigation (#88) — mobile-only bottom tab bar.
   Hidden by default (desktop); shown only at the mobile breakpoint.
   --------------------------------------------------------------------------- */
.footer-nav { display: none; }
/* Zoom + recenter control stack — shared base (positioning differs per
   breakpoint: mobile = bottom-right above the sheet, desktop = top-right
   below the compass). */
.map-ctrl-stack {
  position: fixed;
  right: 12px;
  z-index: 55; /* under the bottom sheet (100), over the map */
  display: none;
  flex-direction: column;
  gap: 10px;
}
.map-ctrl-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ar-overlay-border, rgba(255, 255, 255, 0.2));
  background: var(--ar-overlay-bg, rgba(15, 15, 20, 0.85));
  color: var(--ar-overlay-icon, #fff);
  backdrop-filter: var(--ar-overlay-blur, blur(8px));
  -webkit-backdrop-filter: var(--ar-overlay-blur, blur(8px));
  box-shadow: var(--ar-overlay-shadow, 0 2px 10px rgba(0, 0, 0, 0.4));
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.map-ctrl-btn svg { width: 22px; height: 22px; display: block; }
.map-ctrl-btn:active { filter: brightness(1.3); }
.map-follow-btn {
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease;
}
.map-follow-btn--active {
  color: #172116;
  background: #c4a96a;
  border-color: rgba(255, 247, 220, 0.85);
  box-shadow: 0 0 0 3px rgba(196, 169, 106, 0.22),
    var(--ar-overlay-shadow, 0 2px 10px rgba(0, 0, 0, 0.4));
}
.map-location-debug {
  width: 142px;
  margin-left: -98px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--ar-overlay-border, rgba(255, 255, 255, 0.2));
  border-radius: 12px;
  background: var(--ar-overlay-bg, rgba(15, 15, 20, 0.85));
  color: var(--ar-overlay-icon, #fff);
  box-shadow: var(--ar-overlay-shadow, 0 2px 10px rgba(0, 0, 0, 0.4));
  backdrop-filter: var(--ar-overlay-blur, blur(8px));
  -webkit-backdrop-filter: var(--ar-overlay-blur, blur(8px));
  font: 600 10px/1.25 var(--ar-font-body, Inter, system-ui, sans-serif);
  pointer-events: none;
}
.map-location-debug span {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 5px;
}
.map-location-debug b {
  color: #c4a96a;
  font-weight: 700;
}
/* Desktop: show the stack bottom-RIGHT, just above the floating info box
   (which sits at right:24 / bottom:24). Compass stays top-right. */
@media (min-width: 769px) {
  /* bottom is set inline (tracks the box height); just position right + show. */
  .map-ctrl-stack { display: flex; right: 24px; top: auto !important; }
}
/* Aux map controls (debug/story/AI/settings/vector + GuidePill route/story) are
   hidden on the clean map at ALL widths now (mobile + desktop) — only the
   compass + zoom/recenter remain. */
.nav-aux-btn { display: none !important; }
@media (max-width: 768px) {
  /* The CloudChat (ChapGuide) floating launcher is replaced by the footer
     "Chat-Bot" tab on mobile. Desktop keeps the launcher (no footer there). */
  #cloudchat-btn { display: none !important; }

  /* Center the chat box horizontally on mobile (the widget pins it bottom-left
     by default, which looks off-center). left:0 + right:0 + margin auto centers
     its fixed-width panel; overrides the widget's `left: 16px` (no !important). */
  #cloudchat-container.bubble {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 210; /* above the map, bottom sheet (100) AND the Entdecken drop-up (200) so the tab bar stays tappable */
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    /* Flacher als frueher (Alex 2026-08-12, Aufnahme 118964): Die Leiste soll
       weniger Karte verdecken, und der Kreis in der Mitte soll oben
       herausragen statt buendig zu sitzen. Gemessen am Prueftstand mit genau
       diesen Regeln: 66 -> 56 px, der Kreis ragt 12 px hinaus (vorher lag er
       2 px INNERHALB). */
    padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    /* Canonical overlay-glass tokens — same source as .bs-sheet so the
       sheet sitting on top of the footer reads as one continuous strip.
       --ar-overlay-bg flips automatically between day/night via the
       .fv-page--night cascade; .footer-nav--dark is therefore a no-op. */
    backdrop-filter: var(--ar-overlay-blur);
    -webkit-backdrop-filter: var(--ar-overlay-blur);
    background: var(--ar-overlay-bg);
    border-top: 0;
  }
  .footer-nav--dark { background: var(--ar-overlay-bg); }
  .footer-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    text-decoration: none;
    color: rgba(26, 31, 22, 0.55); /* idle — dark text on light glass */
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease;
  }
  .footer-nav--dark .footer-nav__item { color: rgba(247, 245, 240, 0.55); }
  .footer-nav__item--active,
  .footer-nav--dark .footer-nav__item--active { color: var(--ar-gold, #C4A96A); } /* brand gold */
  .footer-nav__icon { width: 26px; height: 26px; display: block; }
  .footer-nav__icon svg { width: 100%; height: 100%; display: block; }
  .footer-nav__label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }

  /* Gesicht statt Sprechblase im Reiter (Alex 2026-08-05). Der Ring erbt
     `currentColor`, faerbt sich im aktiven Reiter also mit — dieselbe
     Rueckmeldung wie bei den gezeichneten Symbolen daneben. */
  .footer-nav__face {
    width: 26px; height: 26px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid currentColor;
    background: rgba(0, 0, 0, 0.18);
  }
  /* Realtime-Sitzung läuft, Overlay ist eingeklappt (Alex 2026-08-10:
     „kleine Animation mit Ringen, die weggehen — okay, a realtime agent
     is active"). Die Markup-Klasse existierte seit dem Minimieren-Umbau,
     hatte aber NIE eine Regel — der aktive Agent war unsichtbar, sobald
     die Karte übernahm. Zwei zeitversetzt auslaufende Ringe um das
     Portrait; dezent (goldene Hausfarbe, 2,4-s-Takt), damit es einlädt
     statt zu alarmieren. Antippen stellt das Gespräch wieder her —
     dieselbe Fläche wie immer, die Ringe zeigen nur, DASS es etwas
     wiederherzustellen gibt. */
  .footer-nav__item--pulsing .footer-nav__icon { position: relative; }
  .footer-nav__item--pulsing .footer-nav__icon::before,
  .footer-nav__item--pulsing .footer-nav__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #C4A96A;
    opacity: 0;
    pointer-events: none;
    animation: fn-live-ring 2.4s ease-out infinite;
  }
  .footer-nav__item--pulsing .footer-nav__icon::after { animation-delay: 1.2s; }
  @keyframes fn-live-ring {
    0%   { transform: scale(1);    opacity: 0.9; }
    70%  { transform: scale(1.9);  opacity: 0;   }
    100% { transform: scale(1.9);  opacity: 0;   }
  }
  @media (prefers-reduced-motion: reduce) {
    .footer-nav__item--pulsing .footer-nav__icon::before,
    .footer-nav__item--pulsing .footer-nav__icon::after { animation: none; opacity: 0.5; transform: scale(1.25); }
  }
  /* Langer Druck hält das Mikrofon offen (Alex 2026-08-11). Das muss man
     SEHEN: Der Kopf sieht beim Halten sonst aus wie beim Tippen, und wer
     nicht weiß, ob schon zugehört wird, spricht ins Leere. Deshalb tritt an
     die Stelle der einladenden Ringe ein ruhiger, durchgehender Ring in
     Warmrot — kein Blinken, sondern ein Zustand.

     Die Ringe der Pulsanimation werden dabei angehalten: „lädt ein" und
     „hört gerade zu" sind zwei verschiedene Aussagen und dürfen sich nicht
     überlagern. */
  .footer-nav__item[data-mic='true'] .footer-nav__icon::before,
  .footer-nav__item[data-mic='true'] .footer-nav__icon::after {
    animation: none;
    opacity: 1;
    transform: scale(1.18);
    border-color: #E5484D;
  }
  .footer-nav__item[data-mic='true'] .footer-nav__face {
    box-shadow: 0 0 0 2px #E5484D, 0 0 12px rgba(229, 72, 77, 0.5);
  }
  /* Kein Kontextmenü, keine Textauswahl beim Halten — sonst legt sich iOS
     mit seiner Linkvorschau über die Geste. */
  .footer-nav__item--portrait {
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
  }

  /* Ohne Bild die Initialen im selben Ring — kein Ersatzgesicht. */
  .footer-nav__face-initials {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    color: currentColor;
  }
  /* Abgemeldeter Profil-Reiter: Person-Silhouette im selben Ring wie das
     Google-Bild — gleiche Geometrie, damit der Reiter beim Anmelden nicht
     springt. Das SVG bekommt Luft, sonst stoesst die Schulter an den Ring. */
  /* Abgemeldet gibt es kein Bild — dann ist der Ring auch keins wert. Der
     Reiter zeichnet die Silhouette wie Route, Entdecken und Tagebuch ihre
     Zeichen: nackte Strichzeichnung, gleiche Staerke, gleiche Groesse
     (Alex 2026-08-10, Aufnahme 118858). Erst mit Google-Bild kommt der Ring
     zurueck — dann rahmt er etwas. */
  .footer-nav__face--anon {
    display: flex; align-items: center; justify-content: center;
    border: 0;
    background: none;
  }
  .footer-nav__face--anon svg {
    width: 100%; height: 100%; display: block;
    stroke-width: 2;
  }

  /* Reiter mit Portraet zeigen NUR das Bild (Alex 2026-08-05, Aufnahme
     118386). 40 px ersetzen exakt Symbol (26) + Abstand (4) + Beschriftung
     (11) — die Leiste bleibt dadurch gleich hoch, obwohl der Kreis um die
     Haelfte waechst. Der Ring wird zugleich kraeftiger: bei 26 px trug ihn
     1,5 px, bei 40 px sieht das duenn aus. */
  .footer-nav__item--portrait { justify-content: center; }

  /* ── Die Mitte als Hauptsache (Alex 2026-08-10, Aufnahmen 118858/118860) ──
     Der Kreis ist gross (62 px) und sitzt MITTIG in der Leiste.
     Der Goldring ist IMMER gold, nicht `currentColor` wie bei den Reitern:
     das hier ist kein Reiter, der aktiv sein kann, sondern die eine Handlung
     der Leiste. Er ist zugleich der einzige Rahmen — „den grünen Rand
     wegmachen, er hat den Gold Rahmen" (Alex, 118860). Der fruehere zweite
     Ring war ein „Kragen" in Leistenfarbe, mit dem der hochgezogene Kreis an
     der Leiste haengen sollte; in Nachtfarbe (rgba(30,36,26,.86)) las er sich
     ueber der Karte als gruener Saum.

     Symmetrie durch Bauart statt durch Zahlen: Das Hochziehen (frueher
     margin-top:-22) machte oben 10 px und unten 17 px Luft — sichtbar schief
     (am gebauten Stand gemessen). Jetzt zentriert `justify-content: center`
     den Kreis im Reiter, und weil die Leiste oben und unten gleich viel
     Polster hat (8 px), sind die Abstaende von selbst gleich. Die negativen
     Aussenabstaende halten dabei die LEISTENHOEHE: ohne sie waere die Zeile
     62 statt 41 px hoch und die ganze Leiste um 21 px gewachsen. */
  .footer-nav__item--hero {
    flex: 0 0 auto;
    width: 86px;
    justify-content: center;
    position: relative;
    z-index: 1;   /* der Schatten deckt sonst die Nachbarreiter zu */
    /* Das Herausragen macht eine Verschiebung, KEIN negativer Aussenabstand:
       Eine Verschiebung ist rein optisch, die Leistenhoehe bleibt also von den
       vier Reitern bestimmt und aendert sich nicht mit. Die Tippflaeche wandert
       mit, weil der ganze Reiter verschoben wird. */
    transform: translateY(-8px);
  }
  .footer-nav__item--hero .footer-nav__icon {
    width: 62px; height: 62px;
    margin: -10px 0;   /* haelt die Leistenhoehe, siehe oben */
  }
  .footer-nav__item--hero .footer-nav__face {
    width: 62px; height: 62px;
    border: 2.5px solid var(--ar-gold, #C4A96A);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);   /* hebt ihn von der Karte ab */
  }
  /* Die Ringe der laufenden Sitzung muessen den groesseren Kreis umschliessen. */
  .footer-nav__item--hero.footer-nav__item--pulsing .footer-nav__icon::before,
  .footer-nav__item--hero.footer-nav__item--pulsing .footer-nav__icon::after {
    border-width: 2.5px;
  }

  /* Der aktive Reiter bekommt zusaetzlich einen kurzen Balken unter der
     Beschriftung. Farbe allein traegt die Aussage nicht: goldene Schrift auf
     hellem Glas ist im Sonnenlicht schwach, und Farbe ist fuer einen Teil der
     Besucher gar kein Signal. */
  .footer-nav__item { position: relative; }
  .footer-nav__item--active:not(.footer-nav__item--hero)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 34px; height: 3px;
    border-radius: 2px;
    background: var(--ar-gold, #C4A96A);
  }
  /* Die frueheren 41-px-Regeln fuer Portraet-Reiter sind hier WEG, nicht
     vergessen: seit dem grossen Mittelknopf (118858) ist die Mitte der
     einzige Portraet-Reiter, und ihre Masse stehen oben im Hero-Block. Zwei
     Bloecke mit gleicher Spezifitaet zur selben Sache hatten sich schon
     einmal ueberschrieben — der spaetere gewann und der Kreis blieb bei
     41 px (hier am gebauten Stand gemessen). */
  .footer-nav__face img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    /* Das Standbild zeigt die ganze Figur; im 26-px-Kreis waere der Kopf
       sonst ein Punkt. Der Ausschnitt holt ihn nach vorn. */
    /* GEMESSEN am Quellbild (2026-08-05): Das Standbild ist bereits ein enges
       Brustbild, der Kopf sitzt zwischen 2 % und 60 % der Hoehe. Der frueher
       hier stehende 2,1-fache Zoom war fuer ein Ganzkoerperbild gedacht und
       schnitt Hut und Kinn ab. 1,45-fach, verankert auf der Kopfmitte, zeigt
       das Gesicht ganz. */
    object-position: 50% 30%;
    transform: scale(1.45);
    transform-origin: 50% 30%;
  }


  /* Mobile: zoom + recenter sit RIGHT under the compass (top-anchored)
     so they don't compete with the bottom sheet + footer-nav stack.
     Compass is at top:16, height 48 → first button starts ~76px from top.
     The `bottom` inline value (legacy mobile-bottom mode) is overridden
     here so we end up in top-anchored layout. */
  .map-ctrl-stack {
    display: flex;
    top: 76px;
    bottom: auto !important;
    right: 16px;
  }

  /* Native iOS owns the status bar/Dynamic Island while the web map draws
     edge-to-edge underneath it. Only the explicit embed contract reserves a
     top lane for web chrome; Safari keeps the historical 0/8/16px positions.
     `max()` uses the real device safe area when WebKit exposes it and a 58px
     fallback for WKWebView configurations whose CSS env inset is zero. */
  html.tschepp-ios-embed {
    --tschepp-ios-embed-top-inset: max(env(safe-area-inset-top, 0px), 58px);
  }
  html.tschepp-ios-embed .sn-header--map {
    top: var(--tschepp-ios-embed-top-inset);
  }
  html.tschepp-ios-embed button[title="Einnorden (Rotation zurücksetzen)"] {
    top: calc(16px + var(--tschepp-ios-embed-top-inset)) !important;
  }
}
/* ── Hybrid-App: Web-Bedienelemente treten zurück ─────────────────────────
   Issue #942 (Alex 2026-08-04, Bildschirmfoto 117546). Die iOS-App ist eine
   Hybrid-Version: die Karte kommt aus dem Web, die Bedienoberfläche baut die
   App nativ. Solange beide Seiten ihre eigenen Knöpfe zeichnen, steht dasselbe
   zweimal auf dem Schirm und der Anwender rät, welcher gilt.

   Darum verschwindet in der eingebetteten Ansicht, was die App selbst stellt.
   Bewusst NICHT betroffen: der „…"-Knopf oben rechts — der ist bereits nativ
   (Track30MapScreen, Menü „Kartenoptionen"), er sieht nur so aus, als gehörte
   er zur Web-Spalte.

   Keine Media-Query: der Einbettungs-Vertrag gilt unabhängig vom Viewport.

   Folge, die bewusst in Kauf genommen ist: Zoom, Einnorden, Erzähler-Schalter,
   das Optionen-Blatt und die Sprachwahl sind im Embed über das Web nicht mehr
   erreichbar. Sie gehören auf die native Seite; bis sie dort stehen, fehlen
   sie in der App. Im Browser bleibt alles unverändert. */
html.tschepp-ios-embed .map-ctrl-stack {
  display: none !important;
}
/* Die aktive Routen-Karte unten ist der Rückweg zur Routenauswahl — die führt
   die App nativ. Deckt beide Ausprägungen ab (`mini` und `strip`). */
html.tschepp-ios-embed [data-active-route-card] {
  display: none !important;
}
/* ---------------------------------------------------------------------------
   Light Mode (default) — white/cream
   --------------------------------------------------------------------------- */
.fv-page--light {
  --ar-bg: var(--ar-white);
}
/* ---------------------------------------------------------------------------
   Day Mode — vivid summer sky
   --------------------------------------------------------------------------- */
.fv-page--day {
  --ar-bg: #5BA0E0;
  --ar-text: #1A1F16;
  --ar-white: #1A1F16;
  --ar-black: #F7F5F0;
  --ar-gray: #3A3530;
  --ar-sage: #2A3A23;
  --ar-gold: #8B7340;
  --ar-glass-bg: rgba(255, 255, 255, 0.82);
  --ar-glass-border: rgba(0, 0, 0, 0.12);
}
/* ---------------------------------------------------------------------------
   Night Mode — dark sky with stars
   --------------------------------------------------------------------------- */
.fv-page--night {
  --ar-bg: #080D1A;
  --ar-text: #F7F5F0;
  /* Secondary text colour for night — was missing before, which kept
     .ent-card__dist / __desc / __cat and similar uses of var(--ar-gray)
     stuck at the day-mode #5A5347 (illegible on the dark overlay). */
  --ar-gray: rgba(247, 245, 240, 0.6);
  --ar-text-dim: rgba(247, 245, 240, 0.45);
  --ar-text-faint: rgba(247, 245, 240, 0.3);
  --ar-glass-bg: rgba(255, 255, 255, 0.08);
  --ar-glass-border: rgba(255, 255, 255, 0.06);
  /* Was rgba(26,31,22,0.65): at 0.65 the bright blurred map bled straight
     through the sheet glass, washing the whole POI card to one muddy olive
     ("ausgegraut", Alex 2026-07-09, 113177). Lift the base tone a touch and
     raise opacity so the card reads as a crisp, brighter dark surface with
     real contrast against the map, without killing the glass feel. Shared
     token → footer/header stay seamless. */
  --ar-overlay-bg: rgba(30, 36, 26, 0.86);
  --ar-overlay-border: rgba(255, 255, 255, 0.1);
  --ar-overlay-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  --ar-overlay-icon: #F7F5F0;
}
.fv-page--night.fv-page {
  background: linear-gradient(180deg, #030508 0%, #080D1A 30%, #0C1528 60%, #111E35 100%);
}
.sg-sky-layer {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}
.sg-bg-photo .sg-sky-layer {
  display: none;
}
/* Stars overlay for night mode */
.fv-page--night::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 50%;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 25% 8%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 40% 22%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.5px 1.5px at 55% 5%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 70% 18%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 85% 12%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 15% 35%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 35% 42%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 60% 38%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 5% 48%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 48% 28%, rgba(255,255,255,0.45), transparent),
    radial-gradient(2px 2px at 92% 8%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 20% 25%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 65% 45%, rgba(255,255,255,0.55), transparent),
    radial-gradient(2.5px 2.5px at 78% 3%, rgba(255,255,255,1), transparent),
    radial-gradient(1.5px 1.5px at 33% 10%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(255,255,255,0.45), transparent);
  z-index: 0;
  pointer-events: none;
  animation: fv-twinkle 4s ease-in-out infinite alternate;
}
@keyframes fv-twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
/* Shooting stars */
.fv-page--night::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 50%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fv-page--night .fv-shooting-star {
  position: fixed;
  top: 0; left: 0;
  width: 100px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4) 40%, transparent);
  border-radius: 1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
}
.fv-page--night .fv-shooting-star--a {
  animation: fv-shoot-a 12s 3s ease-in infinite;
}
.fv-page--night .fv-shooting-star--b {
  animation: fv-shoot-b 16s 9s ease-in infinite;
}
.fv-page--night .fv-shooting-star--c {
  animation: fv-shoot-c 20s 15s ease-in infinite;
}
@keyframes fv-shoot-a {
  0% { opacity: 0; top: 8%; left: 15%; transform: rotate(35deg) translateX(0); }
  1% { opacity: 1; }
  4% { opacity: 0; top: 8%; left: 15%; transform: rotate(35deg) translateX(300px); }
  100% { opacity: 0; }
}
@keyframes fv-shoot-b {
  0% { opacity: 0; top: 5%; left: 65%; transform: rotate(25deg) translateX(0); }
  1% { opacity: 1; }
  3% { opacity: 0; top: 5%; left: 65%; transform: rotate(25deg) translateX(250px); }
  100% { opacity: 0; }
}
@keyframes fv-shoot-c {
  0% { opacity: 0; top: 15%; left: 40%; transform: rotate(40deg) translateX(0); }
  0.5% { opacity: 0.8; }
  2.5% { opacity: 0; top: 15%; left: 40%; transform: rotate(40deg) translateX(350px); }
  100% { opacity: 0; }
}
.fv-page--night .fv-header__back {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.fv-page--night .fv-header__back:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.fv-page--night .fv-gorge::before {
  background: linear-gradient(180deg,
    #080D1A 0%,
    rgba(8, 13, 26, 0.95) 15%,
    rgba(8, 13, 26, 0.6) 30%,
    rgba(8, 13, 26, 0.15) 42%,
    rgba(26,31,22,0.15) 52%,
    rgba(26,31,22,0.35) 70%,
    rgba(26,31,22,0.55) 100%
  );
}
.fv-page--day .fv-gorge::before {
  background: linear-gradient(180deg,
    #5BA0E0 0%,
    rgba(91, 160, 224, 0.95) 15%,
    rgba(91, 160, 224, 0.6) 30%,
    rgba(91, 160, 224, 0.15) 42%,
    rgba(26,31,22,0.15) 52%,
    rgba(26,31,22,0.35) 70%,
    rgba(26,31,22,0.55) 100%
  );
}
.fv-page--night .fv-species__name {
  color: #fff;
}
.fv-page--night .fv-card__text {
  color: rgba(247, 245, 240, 0.7);
}
/* Browse page dark overrides */
.fv-page--night .browse-hero__subtitle {
  color: rgba(247, 245, 240, 0.55);
}
.fv-page--night .browse-chips__btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(247, 245, 240, 0.6);
}
.fv-page--night .browse-chips__btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--ar-white);
}
.fv-page--night .browse-chips__btn--active {
  background: var(--ar-white);
  border-color: var(--ar-white);
  color: var(--ar-black);
}
.fv-page--night .browse-chips__btn--active:hover {
  background: var(--ar-white);
  border-color: var(--ar-white);
  color: var(--ar-black);
}
.fv-page--night .browse-card {
  background: rgba(255, 255, 255, 0.04);
}
.fv-page--night .browse-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* Glassmorphism cards when photo background is active */
.sg-bg-photo .browse-card {
  background: var(--ar-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--ar-glass-border);
}
.sg-bg-photo .browse-card:hover {
  box-shadow: inset 0 0 0 1px var(--ar-glass-border), 0 8px 32px rgba(0, 0, 0, 0.25);
}
.sg-bg-photo .browse-card__img-wrap {
  background: rgba(255,255,255,0.04);
}
.fv-page--night .browse-card__img-wrap {
  background: rgba(255, 255, 255, 0.03);
}
.fv-page--night .fv-loading__spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--ar-accent);
}
/* ---------------------------------------------------------------------------
   Page Shell
   --------------------------------------------------------------------------- */
.fv-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 56px;
  background-color: var(--ar-bg);
  color: var(--ar-text);
  font-family: var(--ar-font-body);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.fv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.fv-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fv-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(26, 31, 22, 0.06);
  color: var(--ar-text);
  text-decoration: none;
  transition: background-color 0.2s;
}
.fv-header__back:hover {
  background-color: rgba(26, 31, 22, 0.12);
}
/* Music volume control */
.fv-header__music {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fv-volume-slider {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 4px 10px;
}
.fv-volume-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
}
.fv-volume-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ar-accent);
  cursor: pointer;
}
.fv-volume-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ar-accent);
  border: none;
  cursor: pointer;
}
.fv-volume-slider__stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.fv-volume-slider__stop:hover {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}
.fv-header__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--ar-action);
  border-radius: 20px;
  padding: 8px 16px;
}
.fv-header__badge-label {
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fv-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fv-header__brand-group {
  text-align: right;
}
.fv-header__auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.fv-header__auth-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}
.fv-page--light .fv-header__auth-btn {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}
.fv-page--light .fv-header__auth-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.25);
}
.fv-header__mascots {
  display: flex;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  margin-bottom: -6px;
  width: 96px;
  margin-left: auto;
  margin-right: auto;
}
.fv-header__mascot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 1;
  transition: opacity 500ms ease;
  mix-blend-mode: screen;
}
.fv-header__mascot--hidden {
  opacity: 0;
}
.fv-header__mascot--flip {
  transform: scaleX(-1);
}
.fv-header__brand {
  font-family: var(--ar-font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ar-text);
}
.fv-header__subtitle {
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ar-sage);
  margin-top: 4px;
}
/* ---------------------------------------------------------------------------
   Canvas — white area, image centered, pinch-zoom, dots relative to image
   --------------------------------------------------------------------------- */
.fv-canvas {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* Kontext-Deckel des Canvas-Bildes als Variablen (Crop-Sizing v2,
     SpeciesView): das unsichtbare Messelement im Canvas löst sie zu px auf,
     die Crop-Rechnung dimensioniert damit die sichtbare Content-Box.
     Jede Regel, die max-width/max-height des Canvas-Bildes für einen
     Kontext ändert, muss die Variablen AM CANVAS mitziehen (vererbend —
     deshalb hier und nicht am img). */
  --fv-img-maxh: 85dvh;
  --fv-img-maxw: 85vw;
}
/* Embedded detail view ("Mehr ansehen" inside the map bottom sheet / Tschauko
   overlay): the page must be a TRANSPARENT layer over the glassmorphism sheet
   so the (already alpha-transparent) Flora & Fauna illustrations reveal the
   glass box behind them instead of the solid day/night sky — in BOTH modes.
   (Alex 2026-07-09) */
.fv-page--embedded,
.fv-page--embedded.fv-page {
  background: transparent !important;
}
.fv-page--embedded::before,
.fv-page--embedded::after {
  display: none !important;
}
/* Embedded: drop the Tscheppaschlucht gorge photo backdrop (+ its dark
   top→bottom gradient overlay) behind the annotation cards, and undo the -60vh
   pull it used to span behind the illustration — the transparent illustration
   should sit on the glass sheet, not a canyon photo. This also removes the dark
   lower half of that overlay, which had made the collapsed detail card read
   darker than the expanded one. (Alex 2026-07-09) */
.fv-page--embedded .fv-gorge {
  background-image: none !important;
  margin-top: 0 !important;
  padding: 20px 16px 28px !important;
}
.fv-page--embedded .fv-gorge::before {
  display: none !important;
}
@media (min-width: 769px) {
  .fv-canvas--fullscreen {
    height: 100vh;
    height: 100dvh;
    flex: none;
  }

  /* Embedded desktop detail view (the floating map bottom-sheet panel is
     ~440px wide; the Tschauko overlay slot is similarly narrow). The base
     rule sizes the illustration to 85vw/85dvh — i.e. relative to the whole
     VIEWPORT — so inside a 440px panel the image blew up to ~1165px and, with
     the canvas clipping overflow, only its centre third stayed visible: it
     read as "not centred / cut off" and the %-anchored annotation dots landed
     off-image. Size it to the PANEL instead via an inline-size container
     (width-only → can never collapse the canvas height). The dead 56px
     padding-top (reserved for the standalone NavBar, which embedded mode never
     renders) is also dropped so the plate sits higher and fully in view. */
  .fv-page--embedded {
    padding-top: 0;
  }
  .fv-page--embedded .fv-canvas {
    container-type: inline-size;
    --fv-img-maxh: 72dvh; /* Crop-Spiegel, siehe Basisregel .fv-canvas */
    --fv-img-maxw: 92cqw;
  }
  .fv-page--embedded .fv-canvas__image {
    max-width: 92cqw;
    max-height: 72dvh;
  }
  /* Issue #318: the embedded canvas was 100dvh tall (grows with the SCREEN)
     while the illustration is panel-width-capped (~fixed px in the ~440px
     sheet) — so the top/bottom letterbox grew linearly with screen height
     (~180px on 1080p, ~720px on 4K). Let the canvas hug the image instead:
     the air above/below is now a constant padding on every device. Grid
     centring (place-items) is unaffected; max-height keeps it inside the
     viewport for tall portrait plates on small screens. */
  .fv-page--embedded .fv-canvas--fullscreen {
    height: auto;
    min-height: 320px;
    max-height: 100dvh;
    padding: 24px 0 16px;
  }
}
.fv-canvas__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.1s ease-out;
}
/* Wrapper sits exactly around the image so annotation dots use it as
   their containing block — % anchors then map to image-pixel space,
   not to the wider inline-flex container that bleeds beyond the image
   for portrait aspect ratios. */
.fv-canvas__image-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.fv-canvas__image {
  display: block;
  max-width: 85vw;
  max-height: 85dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
/* ---------------------------------------------------------------------------
   Annotation Dots — positioned relative to canvas__inner (image wrapper)
   --------------------------------------------------------------------------- */
.fv-dot-wrap {
  position: absolute;
  z-index: 5;
}
.fv-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ar-accent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s, background-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.fv-dot--active {
  background-color: var(--ar-action);
  box-shadow: 0 0 0 4px rgba(61, 90, 62, 0.3), 0 2px 12px rgba(0, 0, 0, 0.4);
}
.fv-dot--hovered {
  box-shadow: 0 0 0 6px rgba(196, 169, 106, 0.35), 0 2px 12px rgba(0, 0, 0, 0.3);
}
/* Popover — appears next to active dot */
.fv-dot-popover {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
  padding: 10px 14px;
  width: 240px;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.fv-dot-popover--right {
  left: 40px;
}
.fv-dot-popover--left {
  right: 40px;
}
.fv-dot-popover__label {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 3px;
}
.fv-dot-popover__text {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.7);
  line-height: 1.5;
  margin: 0;
}
.fv-dot-popover__player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.fv-dot-popover__mascot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
  margin: -20px 0 -10px;
}
.fv-dot-popover__player .fv-audio-control__play {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.fv-dot-popover__player .fv-waveform {
  transform: scale(0.6);
  transform-origin: left center;
}
/* ---------------------------------------------------------------------------
   Annotation Pills — right side of canvas
   --------------------------------------------------------------------------- */
.fv-pills {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}
.fv-pills__item {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.fv-pills__item:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}
.fv-pills__item--active {
  background-color: var(--ar-green);
  border-color: var(--ar-green);
}
.fv-pills__item--title {
  background-color: var(--ar-accent);
  border-color: var(--ar-accent);
  color: var(--ar-black);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fv-pills__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--ar-black);
  flex-shrink: 0;
}
.fv-pills__play svg {
  width: 10px;
  height: 10px;
}
/* ---------------------------------------------------------------------------
   Species Name — below canvas
   --------------------------------------------------------------------------- */
.fv-species {
  position: absolute;
  bottom: 80px;
  left: 40px;
  display: flex;
  flex-direction: column;
  z-index: 3;
  pointer-events: none;
}
.fv-species__latin {
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ar-sage);
}
.fv-species__name {
  font-family: var(--ar-font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ar-text);
  line-height: 1.1;
}
.fv-species__desc {
  font-family: var(--ar-font-body);
  font-size: 15px;
  color: var(--ar-gray);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 520px;
  display: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 245, 240, 0.7);
  border-radius: 10px;
  padding: 12px 16px;
}
.fv-species__annotation {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 245, 240, 0.7);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 10px;
  max-width: 520px;
  pointer-events: auto;
}
.fv-species__annotation-label {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-text);
  display: block;
  margin-bottom: 4px;
}
.fv-species__annotation-text {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: var(--ar-gray);
  line-height: 1.5;
  margin: 0;
}
/* Social-Overlay im eingebetteten Detail-Panel (Alex 30.07., 2. Iteration:
   „zu weit unten, gehört weiter links, weiter rauf"): unten-links IM
   Canvas-Bereich verankert — immer sichtbar, linksbündig; Buttons sind die
   bestehenden fv-species__action-btn-Glasbausteine, Icons aus ActionIcons. */
.fv-species-social {
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.fv-species__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.fv-species__action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: #d4a843;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
}
.fv-species__action-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
/* Embedded map-sheet 2D/3D toggle (Issue #329) — compact glass pill pinned to
   the top-right of the species canvas. Mirrors the action-btn glass style but
   sits inside the sheet flow (not the hidden absolute actions row). */
.fv-canvas__3d-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 34px;
  padding: 0 12px;
  font: 700 13px/1 var(--ar-font-display, 'Space Grotesk', system-ui, sans-serif);
  letter-spacing: 0.04em;
  color: #d4a843;
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: 999px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.2s ease;
}
.fv-canvas__3d-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.fv-species__action-btn svg {
  color: var(--ar-accent);
}
.fv-species__action-btn--ar {
  width: auto;
  padding: 0 14px;
  gap: 6px;
  border-radius: 20px;
  text-decoration: none;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
}
.fv-species__action-label {
  color: var(--ar-accent);
  letter-spacing: 0.05em;
}
.fv-species__action-btn--liked svg {
  color: #e74c3c;
}
.fv-species__action-count {
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: var(--ar-accent, #d4a843);
  color: #fff;
  border-radius: 9px;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
/* Track buttons — play + numbered annotation triggers (mobile only) */
.fv-species__tracks {
  display: none;
  gap: 6px;
  margin-top: 10px;
  position: relative;
}
@media (max-width: 768px) {
  .fv-species__tracks {
    display: flex;
  }
}
.fv-species__track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: var(--ar-accent);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fv-species__track-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.fv-species__track-btn--active {
  background-color: var(--ar-accent);
  color: var(--ar-black);
  border-color: var(--ar-accent);
}
.fv-species__track-btn--active:hover {
  background-color: var(--ar-accent);
}
/* Mini mascot inline with track buttons */
.fv-species__mini-mascot {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.fv-species__mini-mascot-owl {
  width: 80px;
  height: 80px;
  object-fit: contain;
  mix-blend-mode: screen;
}
.fv-species__mini-mascot .fv-waveform {
  transform: scale(0.5);
  transform-origin: left center;
}
/* Comments overlay */
.fv-comments-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  animation: fv-fade-in 0.2s ease;
}
@keyframes fv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fv-comments {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: var(--ar-text, #F7F5F0);
  width: 100%;
  max-height: 80vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  animation: fv-slide-up 0.25s ease;
}
@keyframes fv-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.fv-comments__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fv-comments__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #F7F5F0;
}
.fv-comments__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: var(--ar-text-dim);
}
.fv-comments__list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  min-height: 100px;
}
.fv-comments__empty {
  text-align: center;
  color: var(--ar-text-dim);
  font-size: 14px;
  padding: 32px 0;
}
.fv-comments__item {
  margin-bottom: 16px;
}
.fv-comments__item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.fv-comments__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--ar-gold);
}
.fv-comments__date {
  font-size: 11px;
  color: var(--ar-text-dim);
}
.fv-comments__body {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  color: var(--ar-text);
}
.fv-comments__delete {
  background: none;
  border: none;
  color: var(--ar-text-faint);
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}
.fv-comments__item:hover .fv-comments__delete {
  opacity: 1;
}
.fv-comments__delete:hover {
  color: rgba(255, 100, 100, 0.8);
}
.fv-comments__input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.fv-comments__input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: #F7F5F0;
  font-size: 14px;
  outline: none;
}
.fv-comments__input::placeholder {
  color: rgba(247, 245, 240, 0.3);
}
.fv-comments__input:focus {
  border-color: var(--ar-gold);
}
.fv-comments__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ar-accent, #d4a843);
  color: #fff;
}
.fv-comments__send:disabled {
  opacity: 0.4;
}
/* Desktop: lightbox style */
@media (min-width: 769px) {
  .fv-comments-overlay {
    align-items: center;
  }
  .fv-comments {
    max-width: 520px;
    max-height: 70vh;
    border-radius: 20px;
    animation: fv-scale-in 0.2s ease;
  }
  @keyframes fv-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}
@media (min-width: 769px) {
  .fv-species__desc { display: block; }
  .fv-species__name { color: #fff; }
}
/* Login prompt overlay */
.fv-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fv-fade-in 0.2s ease;
}
.fv-login {
  position: relative;
  width: 380px;
  max-width: 90vw;
  padding: 48px 40px 40px;
  background: var(--ar-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
  color: #F7F5F0;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  animation: fv-scale-in 0.25s ease;
}
/* ---------------------------------------------------------------------------
   Info Bar: Player + Description + Facts — dark band
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Shared Audio Control — reused in every card
   --------------------------------------------------------------------------- */
.fv-audio-control {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fv-audio-control__mascot {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  animation: fv-fade-in 500ms ease;
  mix-blend-mode: screen;
  pointer-events: none;
  margin: -30px 0;
  position: relative;
  left: 20px;
}
.fv-audio-control__play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ar-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.fv-audio-control__play:hover { opacity: 0.85; }
.fv-audio-control__play--active {
  background-color: var(--ar-green);
}
.fv-audio-control__play--disabled {
  opacity: 0.3;
  cursor: default;
}
.fv-audio-control__track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fv-audio-control__title {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ar-text);
  letter-spacing: -0.01em;
}
.fv-audio-control__meta {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--ar-text-dim);
}
.fv-infobar__desc-text {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--ar-gray);
  margin: 0;
  max-width: 720px;
}
/* Facts row */
.fv-infobar__facts {
  display: flex;
  justify-content: space-between;
  padding: 16px 40px 20px;
  border-top: 1px solid rgba(247, 245, 240, 0.08);
}
.fv-infobar__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fv-infobar__fact-label {
  font-family: var(--ar-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ar-accent);
}
.fv-infobar__fact-value {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ar-white);
}
.fv-infobar__fact-value--accent {
  color: var(--ar-sage);
}
/* ---------------------------------------------------------------------------
   Canvas Mini-Player — floats inside the image area
   --------------------------------------------------------------------------- */
.fv-canvas-player {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
}
.fv-canvas-player__mascot {
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  animation: fv-fade-in 500ms ease;
  mix-blend-mode: screen;
  flex-shrink: 0;
  margin: -50px -40px -20px 0;
  position: relative;
  left: 10px;
}
.fv-canvas-player__mascot--right {
  left: auto;
  right: -10px;
  margin: -50px 0 -20px -60px;
}
.fv-canvas-player__bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--ar-glass-radius);
  max-width: 340px;
}
.fv-canvas-player__row {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.fv-canvas-player__title {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.fv-canvas-player__time {
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: rgba(247, 245, 240, 0.45);
}
.fv-canvas-player__waveform {
  transform: scale(0.65);
  transform-origin: left center;
  flex-shrink: 0;
  position: relative;
  left: 30px;
  top: -12px;
}
/* Speech arcs — comic-style mouth lines */
.fv-speech {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  top: -14px;
  left: 14px;
  flex-shrink: 0;
}
.fv-speech--left {
  left: -14px;
}
.fv-speech__arc {
  border-radius: 50%;
  border: 2px solid var(--ar-green);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: fv-speech-pulse 1s ease-in-out infinite;
}
.fv-speech__arc--left {
  border-top-color: transparent;
  border-bottom-color: var(--ar-green);
  border-left-color: transparent;
  border-right-color: transparent;
}
.fv-speech__arc--1 { width: 8px; height: 3px; animation-delay: 0s; }
.fv-speech__arc--2 { width: 13px; height: 3px; animation-delay: 0.2s; }
.fv-speech__arc--3 { width: 8px; height: 3px; animation-delay: 0.4s; }
@keyframes fv-speech-pulse {
  0%, 100% { opacity: 0.2; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1.6); }
}
.fv-canvas-player__desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.7);
  margin: 0;
  white-space: normal;
}
/* ---------------------------------------------------------------------------
   Waveform bars
   --------------------------------------------------------------------------- */
.fv-waveform {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 36px;
  transform: scale(0.75);
  transform-origin: left center;
}
.fv-waveform__bar {
  width: 3px;
  border-radius: 1.5px;
  flex-shrink: 0;
  transition: height 0.12s ease;
}
.fv-waveform__bar--gold {
  background-color: var(--ar-accent);
}
.fv-waveform__bar--gold-muted {
  background-color: rgba(196, 169, 106, 0.25);
}
.fv-waveform__bar--dark {
  background-color: rgba(255, 255, 255, 0.25);
}
.fv-waveform__bar--dark-active {
  background-color: var(--ar-action);
}
/* ---------------------------------------------------------------------------
   Anatomy Intro
   --------------------------------------------------------------------------- */
.fv-anatomy-intro {
  padding: 40px 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fv-anatomy-intro__label {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-accent);
}
.fv-anatomy-intro__text {
  font-family: var(--ar-font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--ar-gray);
  margin: 0;
  max-width: 680px;
}
/* ---------------------------------------------------------------------------
   Gorge Section
   --------------------------------------------------------------------------- */
.fv-gorge {
  background-image: url('/frog-view/gorge-bg.png');
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-top: -60vh;
  padding: calc(60vh + 48px) 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 769px) {
  .fv-gorge--desktop-hidden > .fv-card:not(.fv-card--comments),
  .fv-gorge--desktop-hidden > .fv-glass:not(.fv-card--comments) {
    display: none;
  }
}
.fv-gorge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg,
    var(--ar-bg) 0%,
    rgba(247, 245, 240, 0.95) 15%,
    rgba(247, 245, 240, 0.6) 30%,
    rgba(247, 245, 240, 0.15) 42%,
    rgba(26,31,22,0.15) 52%,
    rgba(26,31,22,0.35) 70%,
    rgba(26,31,22,0.55) 100%
  );
  z-index: 0;
}
.fv-gorge > * { position: relative; z-index: 1; }
/* ---------------------------------------------------------------------------
   Glassmorphism Card
   --------------------------------------------------------------------------- */
.fv-glass {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
}
.fv-card {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fv-card--annotation {
  display: none;
}
.fv-card__text-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
  overflow: hidden;
}
.fv-card__text-wrap--open {
  grid-template-rows: 1fr;
}
.fv-card__text-wrap > .fv-card__text {
  min-height: 0;
  overflow: hidden;
}
.fv-card__text {
  font-family: var(--ar-font-body);
  font-size: 15px; line-height: 24px;
  color: var(--ar-gray); margin: 0;
}
/* --- Inline Comments Card (mobile) ---------------------------------------- */
.fv-card--comments {
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: auto;
  max-width: 600px;
  align-self: flex-start;
}
.fv-card-comments__empty {
  text-align: center;
  color: var(--ar-text-dim);
  font-family: var(--ar-font-body);
  font-size: 14px;
  padding: 16px 0;
  margin: 0;
}
.fv-card-comments__header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ar-glass-border);
  margin-bottom: 12px;
}
.fv-card-comments__title {
  font-family: var(--ar-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-text);
  letter-spacing: 0.02em;
}
.fv-card-comments__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fv-card-comments__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fv-card-comments__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fv-card-comments__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--ar-accent);
}
.fv-card-comments__delete {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--ar-text-faint);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
}
.fv-card-comments__item:hover .fv-card-comments__delete {
  opacity: 1;
}
.fv-card-comments__delete:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
}
.fv-card-comments__date {
  font-size: 11px;
  color: var(--ar-text-dim);
}
.fv-card-comments__body {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ar-gray);
  margin: 0;
}
.fv-card-comments__input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ar-glass-border);
}
.fv-card-comments__input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--ar-glass-border);
  border-radius: 20px;
  background: var(--ar-glass-bg);
  color: var(--ar-text);
  font-size: 13px;
  font-family: var(--ar-font-body);
  outline: none;
}
.fv-card-comments__input::placeholder {
  color: var(--ar-text-dim);
}
.fv-card-comments__input:focus {
  border-color: var(--ar-accent);
}
.fv-card-comments__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--ar-accent);
  color: var(--ar-black);
  cursor: pointer;
  flex-shrink: 0;
}
.fv-card-comments__send:disabled {
  opacity: 0.4;
}
/* ---------------------------------------------------------------------------
   Sage Card
   --------------------------------------------------------------------------- */
.fv-sage {
  flex-direction: row; align-items: center;
  gap: 16px; padding: 18px 24px;
  cursor: pointer; transition: background-color 0.2s;
}
.fv-sage:hover { background-color: rgba(255, 255, 255, 0.16); }
.fv-sage__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background-color: var(--ar-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fv-sage__content { display: flex; flex-direction: column; gap: 3px; }
.fv-sage__title {
  font-family: var(--ar-font-display);
  font-size: 16px; font-weight: 600; color: #fff;
}
.fv-sage__subtitle {
  font-family: var(--ar-font-body);
  font-size: 13px; color: rgba(247, 245, 240, 0.55);
}
.fv-sage__chevron { flex-shrink: 0; margin-left: auto; }
/* ---------------------------------------------------------------------------
   AR Button
   --------------------------------------------------------------------------- */
.fv-ar-section {
  padding: 32px 40px 48px;
  background-color: var(--ar-bg);
  position: relative;
  z-index: 1;
}
.fv-ar-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 20px 24px;
  background-color: var(--ar-action);
  border-radius: 14px; border: none; cursor: pointer;
  transition: opacity 0.2s;
}
.fv-ar-btn:hover { opacity: 0.9; }
.fv-ar-btn__label {
  font-family: var(--ar-font-display);
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: #fff;
}
/* ---------------------------------------------------------------------------
   Loading / Error States
   --------------------------------------------------------------------------- */
.fv-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* A loading/error state inside a map/live BottomSheet is content, not a new
   page shell. Keep enough height for a stable sheet without inheriting the
   standalone page's 100dvh white surface. */
.fv-loading--embedded {
  min-height: min(320px, 45dvh);
  padding: 24px;
  text-align: center;
}
.fv-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(26, 31, 22, 0.1);
  border-top-color: var(--ar-accent);
  border-radius: 50%;
  animation: fv-spin 0.8s linear infinite;
}
@keyframes fv-spin {
  to { transform: rotate(360deg); }
}
@keyframes fv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fv-loading__text {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: var(--ar-sage);
}
/* Bewegtbild in der Karten-Detailkarte (HeroVideo). Bis das erste Bild da
   ist, bleibt das Element durchsichtig — darunter liegt der dunkle Grund des
   Rahmens. KEIN Standbild aus der Mitte des Films mehr (Alex 2026-08-11);
   der Film zeigt seinen ersten Moment selbst. */
.poi-card__video { opacity: 0; transition: opacity 180ms linear; }
.poi-card__video--visible { opacity: 1; }
/* ---------------------------------------------------------------------------
   Pin Mascot — mobile only, owl + waveform above pin
   --------------------------------------------------------------------------- */
.fv-pin-mascot {
  display: none;
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -12px;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
  z-index: 7;
  animation: fv-fade-in 500ms ease;
}
.fv-pin-mascot__owl {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  /* KEIN `mix-blend-mode: screen` (Alex 2026-08-10). Die anderen Eulen-
     Plaetze in dieser Datei tragen es noch — ein Erbe aus der Zeit des
     Alpha-Videos, als Schwarz durchsichtig werden musste. Diese Eule keyt
     ihre Transparenz selbst, und `screen` haette die neuen Woelkchen
     unbrauchbar gemacht: sie sind Weiss bei halber Deckkraft, und Weiss auf
     Weiss ergibt unter `screen` nichts. Auf einem hellen Bluetenfoto (118896)
     waeren sie unsichtbar gewesen. So zeigt sie sich wie die Eule am
     Karten-Ballon und am 3D-Pin, die beide nie geblendet haben. */
}
/* Die Balken-Waveform neben dem Pin ist WEG (Alex 2026-08-10, 118896/118897:
   „die Eule mit den Bubbles … das gefaellt mir besser"). Ihre Regeln stehen
   hier nicht mehr, damit niemand sie fuer eine noch benutzte Form haelt —
   `MascotWaveform` selbst lebt weiter im Abspieler und beim Mini-Maskottchen. */
/* ===========================================================================
   MOBILE — max-width: 768px
   =========================================================================== */
@media (max-width: 768px) {

  .fv-header { padding: 16px 20px; }

  .fv-header__badge { padding: 6px 12px; }
  .fv-header__badge-label { font-size: 11px; }

  .fv-header__mascots { display: none; }
  .fv-header__brand { font-size: 17px; }
  .fv-header__subtitle { font-size: 10px; }

  .fv-canvas { padding-top: 30px; padding-bottom: 90px; --fv-img-maxw: 95%; }
  .fv-canvas__image { max-width: 95%; }

  .fv-dot { width: 22px; height: 22px; font-size: 11px; }
  .fv-dot-popover { display: none; }

  .fv-pills { display: none; }

  .fv-canvas-player { display: none; }

  .fv-pin-mascot { display: flex; }
  .fv-canvas-player__mascot { width: 80px; height: 80px; margin: -40px 0 -16px; }
  .fv-canvas-player__bar { padding: 8px 14px 8px 10px; gap: 10px; }
  .fv-canvas-player__title { font-size: 12px; }
  .fv-canvas-player__time { font-size: 10px; }
  .fv-canvas-player__bar { max-width: 280px; padding: 12px 14px; }
  .fv-canvas-player__desc { font-size: 12px; }

  .fv-species { bottom: 20px; left: 20px; }
  .fv-canvas--3d .fv-species { bottom: 80px; }
  .fv-species__latin { font-size: 12px; }
  .fv-species__name { font-size: 28px; }
  .fv-species__actions { order: -1; }

  .fv-audio-control__play { width: 30px; height: 30px; }
  .fv-audio-control__title { font-size: 13px; }
  .fv-audio-control__meta { font-size: 11px; }

  .fv-infobar__facts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; padding: 16px 20px;
  }
  .fv-infobar__fact-label { font-size: 10px; }
  .fv-infobar__fact-value { font-size: 15px; }

  .fv-anatomy-intro { padding: 24px 20px 16px; gap: 8px; }
  .fv-anatomy-intro__label { font-size: 11px; }
  .fv-anatomy-intro__text { font-size: 14px; line-height: 22px; }

  .fv-gorge { margin-top: -40vh; padding: calc(40vh + 24px) 16px 32px; gap: 14px; }

  .fv-glass { border-radius: 12px; }
  .fv-card { padding: 18px 20px; gap: 10px; }
  .fv-card--annotation { display: flex; }
  .fv-card__text { font-size: 13px; line-height: 20px; }

  .fv-sage { gap: 12px; padding: 14px 18px; }
  .fv-sage__icon { width: 36px; height: 36px; }
  .fv-sage__title { font-size: 14px; }
  .fv-sage__subtitle { font-size: 11px; }

  .fv-ar-section { padding: 16px 16px 32px; }
  .fv-ar-btn { padding: 18px 20px; }
  .fv-ar-btn__label { font-size: 14px; }
}
/* Embedded (in-map knowledge panel) ALWAYS uses the mobile presentation.
   The mobile/desktop split above keys on the VIEWPORT (@media), but the
   embedded panel is ~440px wide regardless of screen — so on a desktop the
   wide viewport pulled the desktop presentation (hover dot-popovers, pills
   bar, canvas player, large dots, hidden annotation cards) into the narrow
   panel. Mirror the relevant mobile rules here, scoped to the embed; the
   two-class selectors outweigh both the desktop base rules and the
   min-width overrides. (Alex 2026-07-13) */
/* Abstand-Fix (Alex 27.07.): das 56px-padding-top der .fv-page reserviert
   Platz für den ABSOLUTEN fv-header der Standalone-Seite — im Sheet gibt es
   den nicht, der Inhalt hing 56px zu tief (Alex' Verdacht „hidden Mehr-
   Button" war es nicht; gemessene Zerlegung: 56 fv-page + 30 fv-canvas).
   min-height:100dvh ist im Sheet ebenso sinnlos und blähte die Scrollhöhe. */
.fv-page--embedded { padding-top: 0; min-height: auto; }
/* 2D-Canvas randlos im Sheet (Alex 27.07., Shot 115961; Tschepp 337d504
   parallel identisch gelöst): die 20px-Content-Polsterung kostete links/
   rechts Bildfläche. Margins hier decken auch den ERST-2D-Einstieg (ohne
   vorherigen 3D-Toggle ist canvasHeight null und Tschepps Inline-Zweig in
   SpeciesView greift nicht); der Inline-Style überschreibt mit denselben
   Werten — keine Doppelung. width explizit wegen Safari-width-auto-Falle
   (Routen-Strip, Shot 115914). Die 95%/85vw-Bild-Deckel der Standalone-
   Seite entfallen embedded (max-width-Zeile darunter). */
.fv-page--embedded .fv-canvas { padding-top: 20px; padding-bottom: 12px; margin-left: -20px; margin-right: -20px; width: calc(100% + 40px);
  /* Crop-Spiegel (siehe design-system .fv-canvas). Abzug 64px statt 120px
     (Alex 29.07., Shot 116322 P2): der Canvas darf mehr Hoehe nutzen, die
     Audio-Karte beginnt dafuer weiter unten — ausdruecklich ok. */
  --fv-img-maxh: calc(80dvh - 64px); --fv-img-maxw: 100%; }
/* 2D so groß wie der Platz (Alex 27.07.): das Bild darf bis zur restlichen
   Sheet-Höhe wachsen. Seit Shot 116062 beginnt es an der Sheet-Oberkante
   (Kopfzeile liegt transparent drüber); seit Issue #424 ist das Panel 80%
   hoch → Deckel 80dvh minus Grip/Puffer (+20px Atem-Padding oben, Alex
   28.07., Shot 116079: das Bild klebte an der Panel-Kante — der Canvas
   selbst bleibt bündig bis ganz oben, nur der Inhalt rückt runter).
   width:auto hält die Layoutbox
   exakt ums gerenderte Bild — die %-Anker der Annotationspunkte bleiben
   damit korrekt (kein object-fit-Leerraum). */
.fv-page--embedded .fv-canvas__image { max-width: 100%; width: auto; height: auto; max-height: calc(80dvh - 64px); }
.fv-page--embedded .fv-canvas__inner { text-align: center; }
.fv-page--embedded .fv-dot { width: 22px; height: 22px; font-size: 11px; }
.fv-page--embedded .fv-dot-popover { display: none; }
.fv-page--embedded .fv-pills { display: none; }
.fv-page--embedded .fv-canvas-player { display: none; }
.fv-page--embedded .fv-pin-mascot { display: flex; }
.fv-page--embedded .fv-canvas-player__mascot { width: 80px; height: 80px; margin: -40px 0 -16px; }
.fv-page--embedded .fv-canvas-player__bar { max-width: 280px; padding: 12px 14px; gap: 10px; }
.fv-page--embedded .fv-canvas-player__title { font-size: 12px; }
.fv-page--embedded .fv-canvas-player__time { font-size: 10px; }
.fv-page--embedded .fv-canvas-player__desc { font-size: 12px; }
.fv-page--embedded .fv-species__desc { display: none; }
.fv-page--embedded .fv-species__latin { font-size: 12px; }
.fv-page--embedded .fv-species__name { font-size: 28px; }
.fv-page--embedded .fv-species__actions { order: -1; }
.fv-page--embedded .fv-card--annotation { display: flex; }
.fv-page--embedded .fv-gorge--desktop-hidden > .fv-card:not(.fv-card--comments),
.fv-page--embedded .fv-gorge--desktop-hidden > .fv-glass:not(.fv-card--comments) { display: flex; }
/* =============================================================================
   BROWSE PAGE — Species overview / catalog
   ============================================================================= */
/* Hero */
.browse-hero {
  padding: 100px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.browse-hero__title {
  font-family: var(--ar-font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ar-text);
  margin: 0;
}
.browse-hero__subtitle {
  font-family: var(--ar-font-body);
  font-size: 16px;
  color: var(--ar-gray);
  margin: 0;
  line-height: 1.5;
}
.browse-hero__count {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ar-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 0;
}
/* Category chips — horizontal scroll */
.browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 40px 24px;
}
.browse-chips__btn {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid rgba(26, 31, 22, 0.12);
  background: transparent;
  color: var(--ar-gray);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.browse-chips__btn:hover {
  border-color: var(--ar-sage);
  color: var(--ar-text);
}
.browse-chips__btn--active {
  background: var(--ar-black);
  border-color: var(--ar-black);
  color: var(--ar-white);
}
.browse-chips__btn--active:hover {
  background: var(--ar-black);
  border-color: var(--ar-black);
  color: var(--ar-white);
}
.browse-chips__count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
}
.browse-chips__btn--active .browse-chips__count {
  opacity: 0.7;
}
/* Content area */
.browse-content {
  padding: 0 40px;
  flex: 1;
}
/* Species grid — dense, cards side by side */
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
/* Species card */
.browse-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(26, 31, 22, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}
.browse-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 31, 22, 0.08);
}
.browse-card__img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(26, 31, 22, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.browse-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}
.browse-card:hover .browse-card__img {
  transform: scale(1.05);
}
.browse-card__info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.browse-card__name {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-text);
  line-height: 1.3;
}
.browse-card__latin {
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ar-sage);
  line-height: 1.3;
}
.browse-card__tag {
  font-family: var(--ar-font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ar-accent);
  margin-top: 3px;
  opacity: 0.75;
}
/* Sponsor Footer (shared across all pages) */
.fv-sponsor-footer {
  padding: 40px 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.fv-sponsor-footer__text {
  font-family: var(--ar-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ar-sage);
}
.fv-sponsor-footer__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.fv-sponsor-footer__logo {
  height: 36px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity 0.2s;
}
.fv-sponsor-footer__logo:hover {
  opacity: 0.7;
}
/* Night mode: logos are white-on-transparent, show them brighter */
.fv-page--night .fv-sponsor-footer__logo {
  opacity: 0.35;
  filter: none;
}
.fv-page--night .fv-sponsor-footer__logo:hover {
  opacity: 0.55;
}
.fv-page--night .fv-sponsor-footer__text {
  color: rgba(247, 245, 240, 0.4);
}
/* ── Browse page mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .browse-hero { padding: 80px 16px 20px; }
  .browse-hero__title { font-size: 28px; }
  .browse-hero__subtitle { font-size: 14px; }

  .browse-chips { padding: 0 16px 16px; gap: 6px; }
  .browse-chips__btn { font-size: 12px; padding: 7px 12px; }

  .browse-content { padding: 0 16px; }

  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

  .browse-card { border-radius: 10px; }
  .browse-card__info { padding: 8px 10px 10px; }
  .browse-card__name { font-size: 12px; }
  .browse-card__latin { font-size: 10px; }

  .fv-sponsor-footer { padding: 24px 16px 20px; gap: 14px; }
  .fv-sponsor-footer__logos { gap: 20px; }
  .fv-sponsor-footer__logo { height: 28px; }
}
/* ---------------------------------------------------------------------------
   3D Annotation Pins (CSS2DRenderer)
   --------------------------------------------------------------------------- */
.fv-3d-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.fv-3d-wrap--visible {
  opacity: 1;
  transform: scale(1);
}
.fv-3d-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ar-accent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: box-shadow 0.2s, background-color 0.2s;
}
.fv-3d-dot--active {
  background-color: var(--ar-action);
  box-shadow: 0 0 0 4px rgba(61, 90, 62, 0.3), 0 2px 12px rgba(0, 0, 0, 0.4);
}
.fv-3d-popover {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 245, 240, 0.8);
  border-radius: 10px;
  padding: 10px 14px;
  width: 220px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: none;
}
.fv-3d-popover--visible {
  display: block;
}
.fv-3d-popover__label {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ar-text);
  display: block;
  margin-bottom: 3px;
}
.fv-3d-popover__text {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--ar-gray);
  line-height: 1.5;
  margin: 0;
}
/* =============================================================================
   3D MODEL VIEWER
   ============================================================================= */
.mv-canvas {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--ar-bg);
}
.mv-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 40px;
  background-color: var(--ar-black);
}
.mv-info__latin {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ar-sage);
}
.mv-info__name {
  font-family: var(--ar-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ar-white);
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .mv-info { padding: 16px 20px; }
  .mv-info__name { font-size: 18px; }
}
/* =============================================================================
   Site Footer (.site-footer)
   ============================================================================= */
.site-footer {
  margin-top: auto;
  background: transparent;
  color: #F7F5F0;
  position: relative;
  z-index: 1;
}
.sg-bg-photo .site-footer {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Top: Brand + Links side by side */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F7F5F0;
}
.site-footer__brand-name {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.site-footer__tagline {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.5);
  max-width: 320px;
}
.site-footer__links {
  display: flex;
  gap: 64px;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer__col-title {
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ar-gold);
  margin-bottom: 4px;
}
.site-footer__link {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: rgba(247, 245, 240, 0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer__link:hover {
  color: #F7F5F0;
}
.site-footer__text {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: rgba(247, 245, 240, 0.4);
}
/* Divider */
.site-footer__divider {
  height: 1px;
  width: 100%;
  background: rgba(247, 245, 240, 0.1);
}
/* Bottom: Sponsors + Copyright */
.site-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__sponsors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__sponsor-label {
  font-family: var(--ar-font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.3);
}
.site-footer__sponsor-logos {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-footer__sponsor-img {
  height: 32px;
  width: auto;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.site-footer__sponsor-img:hover {
  opacity: 0.65;
}
.site-footer__copy {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.25);
}
.site-footer__bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.site-footer__lang {
  display: flex;
  gap: 4px;
}
.site-footer__lang-btn {
  background: none;
  border: 1px solid rgba(247, 245, 240, 0.12);
  border-radius: 4px;
  color: rgba(247, 245, 240, 0.35);
  font-family: var(--ar-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.site-footer__lang-btn:hover {
  color: rgba(247, 245, 240, 0.6);
  border-color: rgba(247, 245, 240, 0.25);
}
.site-footer__lang-btn--active {
  color: var(--ar-accent, #C4A96A);
  border-color: var(--ar-accent, #C4A96A);
  background: rgba(196, 169, 106, 0.1);
}
/* ── Site Footer mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer__inner { padding: 40px 20px 24px; gap: 28px; }
  .site-footer__links { flex-direction: column; gap: 28px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-footer__sponsor-logos { gap: 20px; }
  .site-footer__sponsor-img { height: 26px; }
}
/* =============================================================================
   Styleguide Page (.sg-)
   ============================================================================= */
/* Photo background mode */
.sg-bg-photo__img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('/frog-view/gorge-bg.png') center top / cover no-repeat;
  z-index: 0;
}
.sg-bg-photo__overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
/* Fade controls */
.sg-fade-controls {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 100;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}
.sg-fade-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-fade-controls span {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.sg-fade-controls input[type="range"] {
  width: 100%;
  accent-color: var(--ar-gold);
}
.sg-fade-controls__divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.sg-bg-photo .sg-content {
  position: relative;
  z-index: 1;
}
/* Ensure all direct children except the photo layer sit above it */
.sg-bg-photo > *:not(.sg-bg-photo__img) {
  position: relative;
  z-index: 1;
}
/* Override sky gradient and stars in photo mode */
.sg-bg-photo.fv-page {
  background: transparent !important;
}
.sg-bg-photo::after,
.sg-bg-photo::before {
  display: none !important;
}
/* Photo button active state */
.sg-photo-btn--active {
  background-color: rgba(196,169,106,0.25) !important;
  border: 1px solid rgba(196,169,106,0.4) !important;
}
/* Light mode footer: dark text */
.fv-page--light .site-footer {
  color: #1A1F16;
}
.fv-page--light .site-footer__logo { color: #1A1F16; }
.fv-page--light .site-footer__tagline { color: rgba(26,31,22,0.6); }
.fv-page--light .site-footer__col-title { color: #1A1F16; }
.fv-page--light .site-footer__link { color: rgba(26,31,22,0.6); }
.fv-page--light .site-footer__link:hover { color: #1A1F16; }
.fv-page--light .site-footer__text { color: rgba(26,31,22,0.5); }
.fv-page--light .site-footer__divider { background: rgba(26,31,22,0.1); }
.fv-page--light .site-footer__sponsor-label { color: rgba(26,31,22,0.4); }
.fv-page--light .site-footer__copy { color: rgba(26,31,22,0.35); }
.fv-page--light .site-footer__lang-btn { color: rgba(26,31,22,0.35); border-color: rgba(26,31,22,0.12); }
.fv-page--light .site-footer__lang-btn:hover { color: rgba(26,31,22,0.6); border-color: rgba(26,31,22,0.25); }
.fv-page--light .site-footer__lang-btn--active { color: var(--ar-green, #3D5A3E); border-color: var(--ar-green, #3D5A3E); background: rgba(61,90,62,0.1); }
/* Light mode photo: footer glass */
.sg-bg-photo.fv-page--light .site-footer {
  background: rgba(247,245,240,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sg-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 0;
}
.sg-section { display: flex; flex-direction: column; gap: 24px; padding-bottom: 48px; }
.sg-section--last { padding-bottom: 80px; }
.sg-divider { height: 1px; width: 100%; background: var(--ar-sage); opacity: 0.25; }
.sg-label {
  font-family: var(--ar-font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ar-gold);
}
.sg-title {
  font-family: var(--ar-font-display);
  font-size: clamp(36px, 6vw, 64px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ar-text);
}
.sg-header { padding-top: 16px; }
.sg-header .sg-desc {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 2vw, 18px); line-height: 1.55;
  color: var(--ar-gray); max-width: 600px;
}
.sg-section-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
  padding-top: 16px;
}
.sg-num {
  display: block;
  font-family: var(--ar-font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ar-gold);
}
.sg-heading {
  font-family: var(--ar-font-display);
  font-size: clamp(24px, 3vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25;
  color: var(--ar-text); margin-top: 4px;
}
.sg-aside {
  font-family: var(--ar-font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--ar-sage); max-width: 400px;
  text-align: right;
}
/* Rows */
.sg-row { display: flex; gap: 16px; }
.sg-row--2 > * { flex: 1 1 0%; min-width: 0; }
.sg-row--3 > * { flex: 1 1 0%; min-width: 0; }
.sg-row--5 > * { flex: 1 1 0%; min-width: 0; }
.sg-row--6 > * { flex: 1 1 0%; min-width: 0; }
/* Logo cards */
.sg-logo-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; border-radius: 12px;
  aspect-ratio: 1 / 1; max-height: 280px;
}
.sg-logo-card__text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sg-logo-card__label { font-family: var(--ar-font-display); font-size: 13px; font-weight: 600; }
.sg-logo-card__sub { font-family: var(--ar-font-body); font-size: 12px; color: var(--ar-sage); }
.sg-logo-card__img { height: 80px; width: auto; }
/* Color swatches */
.sg-swatch { border-radius: 12px; overflow: clip; display: flex; flex-direction: column; }
.sg-swatch--hero { flex-direction: row; }
.sg-swatch__color { height: 100px; width: 100%; position: relative; }
.sg-swatch__color--hero { height: 200px; flex: 1; }
.sg-swatch__info--hero { width: 240px; flex-shrink: 0; justify-content: center; padding: 24px; }
/* Gold metallic swatch */
.sg-swatch__color--gold {
  background: linear-gradient(
    135deg,
    #7A6420 0%,
    #B8973C 15%,
    #E8D9A0 30%,
    #FFF8E0 40%,
    #E8D9A0 50%,
    #B8973C 65%,
    #7A6420 78%,
    #B8973C 88%,
    #E8D9A0 95%,
    #C4A96A 100%
  ) !important;
  overflow: hidden;
}
.sg-swatch__color--gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.7) 48%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.7) 52%,
    rgba(255, 255, 255, 0) 65%,
    transparent 80%
  );
  animation: sg-shimmer 3s 1s ease-in-out infinite;
}
@keyframes sg-shimmer {
  0% { transform: translateX(-80%) rotate(-5deg); }
  50% { transform: translateX(80%) rotate(-5deg); }
  100% { transform: translateX(80%) rotate(-5deg); }
}
/* Gold shimmer text */
.sg-gold-text {
  background: linear-gradient(
    90deg,
    #7A6420 0%,
    #C4A96A 15%,
    #D9C68A 35%,
    #E0CFA0 50%,
    #D9C68A 65%,
    #C4A96A 85%,
    #7A6420 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
@keyframes sg-gold-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Gold shimmer for background elements (buttons, badges, bars) */
.sg-gold-shimmer {
  background: linear-gradient(135deg, #7A6420 0%, #B8973C 20%, #C4A96A 40%, #B8973C 60%, #7A6420 80%, #B8973C 100%) !important;
  background-size: 300% 100% !important;
  animation: sg-gold-shift 8s ease-in-out infinite !important;
  color: #1A1F16 !important;
  border: none !important;
}
.sg-swatch__info { background: #EDEAE3; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.sg-swatch__name { font-family: var(--ar-font-display); font-size: 13px; font-weight: 600; color: #1A1F16; }
.sg-swatch__hex { font-family: var(--ar-font-body); font-size: 12px; color: var(--ar-sage); }
.sg-swatch__usage { font-family: var(--ar-font-body); font-size: 11px; color: var(--ar-sage); }
/* Type cards */
.sg-type-card { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.sg-type-card--dark { background: #1A1F16; color: #F7F5F0; }
.sg-type-card--light { background: #EDEAE3; color: #1A1F16; }
.sg-pill {
  display: inline-flex; align-self: flex-start;
  padding: 4px 12px; border-radius: 100px;
  font-family: var(--ar-font-body); font-size: 11px;
  font-weight: 500; letter-spacing: 0.06em;
}
.sg-pill--gold { background: rgba(196,169,106,0.2); color: #C4A96A; }
.sg-pill--green { background: rgba(61,90,62,0.15); color: #3D5A3E; }
.sg-type-card__specimen { display: flex; flex-direction: column; gap: 8px; }
.sg-type-card__font { font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.02em; line-height: 1.1; }
.sg-type-card__meta { font-family: var(--ar-font-body); font-size: 14px; opacity: 0.5; }
.sg-type-card__examples { display: flex; flex-direction: column; gap: 6px; }
.sg-type-card__divider { height: 1px; width: 100%; }
.sg-type-card--dark .sg-type-card__divider { background: rgba(247,245,240,0.1); }
.sg-type-card--light .sg-type-card__divider { background: #D4D0C8; }
.sg-type-card__body { display: flex; flex-direction: column; gap: 6px; font-family: var(--ar-font-body); font-size: 16px; line-height: 1.6; }
.sg-type-card--light .sg-type-card__body { color: #5A5347; }
.sg-type-card--light .sg-type-card__meta { color: var(--ar-sage); opacity: 1; }
/* Verlauf-Prinzip (horizontal: solid left → gradient → photo right) */
.sg-verlauf {
  border-radius: 12px;
  overflow: clip;
  display: flex;
  flex-direction: column;
}
.sg-verlauf--h {
  flex-direction: row;
  height: 300px;
}
.sg-verlauf__solid {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.sg-verlauf--h .sg-verlauf__solid {
  width: 35%;
  flex-shrink: 0;
}
.sg-verlauf--dark .sg-verlauf__solid { background: #1A1F16; }
.sg-verlauf--light .sg-verlauf__solid { background: #F7F5F0; }
.sg-verlauf__title {
  font-family: var(--ar-font-display);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sg-verlauf--dark .sg-verlauf__title { color: #F7F5F0; }
.sg-verlauf--light .sg-verlauf__title { color: #1A1F16; }
.sg-verlauf__desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.55;
}
.sg-verlauf--dark .sg-verlauf__desc { color: rgba(247,245,240,0.6); }
.sg-verlauf--light .sg-verlauf__desc { color: #5A5347; }
.sg-verlauf__photo {
  position: relative;
  flex: 1;
  min-height: 200px;
}
.sg-verlauf__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.sg-verlauf__fade {
  position: absolute;
  pointer-events: none;
}
.sg-verlauf--h .sg-verlauf__fade {
  top: 0; bottom: 0; left: 0;
  width: 50%;
}
.sg-verlauf__fade--dark {
  background: linear-gradient(90deg, #1A1F16 0%, transparent 100%);
}
.sg-verlauf__fade--light {
  background: linear-gradient(90deg, #F7F5F0 0%, transparent 100%);
}
/* Keep tag style shared */
.sg-gradient-card__tag { font-family: var(--ar-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-gold); }
/* UI Cards */
.sg-ui-card { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.sg-ui-card--dark { background: #1A1F16; color: #F7F5F0; }
.sg-ui-card--light { background: #EDEAE3; color: #1A1F16; }
.sg-ui-card__title { font-family: var(--ar-font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-gold); }
.sg-ui-card__code { font-family: var(--ar-font-body); font-size: 11px; color: var(--ar-sage); white-space: pre-wrap; line-height: 1.5; }
/* Glass demo */
.sg-glass-demo {
  background: rgba(247,245,240,0.12); border: 1px solid rgba(247,245,240,0.08);
  border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.sg-glass-demo__header { display: flex; justify-content: space-between; font-family: var(--ar-font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.sg-glass-demo__player { display: flex; align-items: center; gap: 12px; }
.sg-glass-demo__play {
  width: 36px; height: 36px; border-radius: 100px;
  background: rgba(247,245,240,0.15); display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.sg-glass-demo__track { flex: 1; height: 4px; background: rgba(247,245,240,0.1); border-radius: 2px; }
.sg-glass-demo__progress {
  width: 35%; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #7A6420 0%, #B8973C 20%, #C4A96A 40%, #B8973C 60%, #7A6420 80%, #B8973C 100%);
  background-size: 300% 100%;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.sg-glass-demo__time { font-family: var(--ar-font-body); font-size: 11px; opacity: 0.4; }
.sg-glass-demo__body { font-family: var(--ar-font-body); font-size: 13px; opacity: 0.6; line-height: 1.55; }
/* Badges */
.sg-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-badge { padding: 8px 18px; border-radius: 100px; font-family: var(--ar-font-body); font-size: 13px; font-weight: 500; }
.sg-badge--filled { background: #3D5A3E; color: #F7F5F0; }
.sg-badge--outline { background: rgba(61,90,62,0.12); color: #3D5A3E; }
.sg-badge--gold { background: #C4A96A; color: #1A1F16; font-weight: 600; }
/* Hotspots */
.sg-hotspots { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.sg-hotspot {
  width: 40px; height: 40px; border-radius: 100px;
  background: rgba(26,31,22,0.6); border: 2px solid rgba(247,245,240,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ar-font-body); font-size: 14px; font-weight: 500;
  color: #F7F5F0; flex-shrink: 0;
}
.sg-hotspots__label { font-family: var(--ar-font-body); font-size: 12px; color: var(--ar-sage); padding-left: 8px; }
/* Rules */
.sg-rules {
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--ar-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ar-glass-border);
}
.sg-rules--do { border-color: var(--ar-glass-border); }
.sg-rules--dont { border-color: var(--ar-glass-border); }
.sg-rules__title { font-family: var(--ar-font-display); font-size: 18px; font-weight: 700; }
.sg-rules--do .sg-rules__title { color: #6B9E6E; }
.sg-rules--dont .sg-rules__title { color: #C46050; }
.sg-rules__item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ar-font-body); font-size: 14px; line-height: 1.55; color: rgba(247,245,240,0.75); }
.sg-rules__icon { flex-shrink: 0; font-size: 14px; line-height: 1.3; }
.sg-rules--do .sg-rules__icon { color: #6B9E6E; }
.sg-rules--dont .sg-rules__icon { color: #C46050; }
/* Light mode overrides for rules */
.fv-page--light .sg-rules {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(0,0,0,0.08);
}
.fv-page--light .sg-rules--do { border-color: rgba(0,0,0,0.08); }
.fv-page--light .sg-rules--dont { border-color: rgba(0,0,0,0.08); }
.fv-page--light .sg-rules--do .sg-rules__title { color: #3D5A3E; }
.fv-page--light .sg-rules--dont .sg-rules__title { color: #8B4040; }
.fv-page--light .sg-rules__item { color: var(--ar-gray); }
.fv-page--light .sg-rules--do .sg-rules__icon { color: #3D5A3E; }
.fv-page--light .sg-rules--dont .sg-rules__icon { color: #8B4040; }
/* Dialogs section */
.sg-dialogs {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.sg-dialog-preview {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sg-dialog-preview__label {
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sg-dialog {
  position: relative;
  padding: 40px 32px 32px;
  background: var(--ar-glass-bg);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sg-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.4);
  cursor: pointer;
  transition: all 0.15s;
}
.sg-dialog__close:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(247,245,240,0.7);
}
.sg-dialog__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.sg-dialog__brand-name {
  font-family: var(--ar-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #F7F5F0;
}
.fv-page--light .sg-dialog__brand-name { color: #1A1F16; }
.sg-dialog__icon {
  color: var(--ar-gold);
  margin-bottom: 20px;
}
.sg-dialog__icon--success { color: #6B9E6E; }
.sg-dialog__icon--warn { color: #C4A96A; }
.sg-dialog__title {
  font-family: var(--ar-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
  background: linear-gradient(90deg, #7A6420 0%, #C4A96A 15%, #D9C68A 35%, #E0CFA0 50%, #D9C68A 65%, #C4A96A 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.sg-dialog__desc {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247,245,240,0.85);
  margin: 0 0 28px;
  max-width: 260px;
}
.sg-dialog__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ar-glass-radius);
  background: rgba(255,255,255,0.06);
  color: #F7F5F0;
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.sg-dialog__btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
.sg-dialog__btn--primary:hover {
  background: #D4B97A;
  border-color: transparent;
}
.sg-dialog__btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.6);
}
.sg-dialog__btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: #F7F5F0;
}
.sg-dialog__btn--danger {
  background: rgba(196,60,50,0.2);
  border-color: rgba(196,60,50,0.3);
  color: #E07060;
}
.sg-dialog__btn--danger:hover {
  background: rgba(196,60,50,0.3);
  border-color: rgba(196,60,50,0.4);
}
.sg-dialog__btn--google { /* inherits default glass style */ }
.sg-dialog__actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.sg-dialog__actions .sg-dialog__btn { flex: 1; }
.sg-dialog__hint {
  font-family: var(--ar-font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(247,245,240,0.3);
  margin-top: 16px;
}
/* Light mode dialogs */
.fv-page--light .sg-dialog {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}
.fv-page--light .sg-dialog__close {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.04);
  color: rgba(26,31,22,0.4);
}
.fv-page--light .sg-dialog__close:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(26,31,22,0.6);
}
.fv-page--light .sg-dialog__title {
  background: linear-gradient(90deg, #7A6420 0%, #A08040 15%, #B8973C 35%, #C4A96A 50%, #B8973C 65%, #A08040 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.fv-page--light .sg-dialog__desc { color: rgba(26,31,22,0.85); }
.fv-page--light .sg-dialog__btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #1A1F16;
}
.fv-page--light .sg-dialog__btn:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.14);
}
.fv-page--light .sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
.fv-page--light .sg-dialog__btn--ghost {
  background: transparent;
  border-color: rgba(0,0,0,0.06);
  color: rgba(26,31,22,0.5);
}
.fv-page--light .sg-dialog__btn--danger {
  background: rgba(196,60,50,0.08);
  border-color: rgba(196,60,50,0.15);
  color: #8B4040;
}
.fv-page--light .sg-dialog__hint { color: rgba(26,31,22,0.3); }
/* Verlauf-Dialog light: standalone overrides (for portal rendering outside .fv-page) */
.sg-vdialog--light .sg-dialog__title {
  background: linear-gradient(90deg, #7A6420 0%, #A08040 15%, #B8973C 35%, #C4A96A 50%, #B8973C 65%, #A08040 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.sg-vdialog--light .sg-dialog__btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #1A1F16;
}
.sg-vdialog--light .sg-dialog__btn:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.14);
}
.sg-vdialog--light .sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
/* Dark Verlauf — force light text even inside .fv-page--light */
.sg-vdialog--dark .sg-dialog__title {
  color: #F7F5F0;
}
.sg-vdialog--dark .sg-dialog__label {
  color: rgba(247,245,240,0.7);
}
.sg-vdialog--dark .sg-dialog__input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #F7F5F0;
}
.sg-vdialog--dark .sg-dialog__input::placeholder {
  color: rgba(247,245,240,0.35);
}
.sg-vdialog--dark .sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.5);
  background: rgba(255,255,255,0.12);
}
.sg-vdialog--dark .sg-dialog__desc {
  color: rgba(247,245,240,0.85);
}
.sg-vdialog--dark .sg-vdialog__desc {
  color: rgba(247,245,240,0.6);
}
.sg-vdialog--dark .sg-dialog__hint {
  color: rgba(247,245,240,0.3);
}
.sg-vdialog--dark .sg-dialog__link {
  color: var(--ar-gold);
}
.sg-vdialog--dark .sg-dialog__btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: #F7F5F0;
}
.sg-vdialog--dark .sg-dialog__btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.15);
}
.sg-vdialog--dark .sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
.sg-vdialog--dark .sg-dialog__btn--google {
  color: #F7F5F0;
}
.sg-vdialog--light .sg-dialog__label {
  color: rgba(26,31,22,0.7);
}
.sg-vdialog--light .sg-dialog__input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
  color: #1A1F16;
}
.sg-vdialog--light .sg-dialog__input::placeholder {
  color: rgba(26,31,22,0.3);
}
.sg-vdialog--light .sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.6);
  background: rgba(0,0,0,0.02);
}
.sg-vdialog--light .sg-dialog__hint {
  color: rgba(26,31,22,0.3);
}
/* Verlauf-Dialoge */
.sg-vdialog {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  min-height: 540px;
}
.sg-vdialog__content {
  position: relative;
  flex: 0 0 420px;
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.sg-vdialog__content .sg-dialog__form {
  width: 100%;
}
.sg-vdialog__content .sg-dialog__btn {
  width: 100%;
}
.sg-vdialog--dark .sg-vdialog__content {
  background: #1A1F16;
  color: #F7F5F0;
}
.sg-vdialog--light .sg-vdialog__content {
  background: #F7F5F0;
  color: #1A1F16;
}
.sg-vdialog__content .sg-dialog__title {
  text-align: left;
  align-self: flex-start;
}
.sg-vdialog__content .sg-vdialog__desc {
  align-self: flex-start;
}
.sg-vdialog__content--centered {
  text-align: center;
  align-items: center;
}
.sg-vdialog__content--centered .sg-dialog__title {
  text-align: center;
  align-self: center;
}
.sg-vdialog__content--centered .sg-vdialog__desc {
  align-self: center;
}
.sg-vdialog__content--centered .comic-cover__meta {
  justify-content: center;
}
.sg-vdialog__content--centered .comic-cover__label {
  align-self: center;
}
.sg-vdialog__content--centered .comic-cover__preview {
  align-self: center;
}
.sg-vdialog__content .sg-dialog__hint {
  align-self: center;
}
.sg-vdialog__desc {
  font-family: var(--ar-font-body);
  font-size: 19px;
  line-height: 1.7;
  color: rgba(247,245,240,0.7);
  margin: 0 0 28px;
}
.sg-vdialog__desc--light {
  color: rgba(26,31,22,0.6);
}
.sg-vdialog__photo {
  position: relative;
  flex: 1;
}
.sg-vdialog__img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.sg-vdialog__fade {
  position: absolute;
  top: 0; left: 0; width: 50%; height: 100%;
}
.sg-vdialog__fade--dark {
  background: linear-gradient(90deg, #1A1F16 0%, transparent 100%);
}
.sg-vdialog__fade--light {
  background: linear-gradient(90deg, #F7F5F0 0%, transparent 100%);
}
.sg-vdialog__content .sg-dialog__close {
  top: 16px;
  right: auto;
  left: 16px;
}
.sg-dialog__close--light {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: rgba(26,31,22,0.4) !important;
}
.sg-dialog__close--light:hover {
  background: rgba(0,0,0,0.1) !important;
  color: rgba(26,31,22,0.7) !important;
}
.sg-dialog__input--light {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1A1F16 !important;
}
.sg-dialog__input--light::placeholder {
  color: rgba(26,31,22,0.3) !important;
}
/* Verlauf dialog brand overlay */
.sg-vdialog__brand-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.sg-vdialog__brand-logo {
  width: 28px;
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}
.sg-vdialog__brand-text {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #F7F5F0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* Verlauf dialog video */
.sg-vdialog__video {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 768px) {
  .sg-vdialog { flex-direction: column; height: calc(85vh); }
  .sg-vdialog__content { flex: 3; order: 2; padding: 24px 20px; border-radius: 0 0 20px 20px; overflow-y: auto; }
  .sg-vdialog__photo { flex: 2; order: 1; min-height: 0; }
  /* Story card (selection/title view): 40/60 image-to-text ratio in portrait */
  .sg-vdialog:has(.sg-vdialog__content--centered) .sg-vdialog__content { flex: 0 0 60%; }
  .sg-vdialog:has(.sg-vdialog__content--centered) .sg-vdialog__photo { flex: 0 0 40%; min-height: 180px; }
  .sg-vdialog:has(.sg-vdialog__content--centered) { height: auto; min-height: 520px; }
  .sg-vdialog__fade { top: auto; bottom: 0; left: 0; width: 100%; height: 50%; }
  .sg-vdialog__fade--dark { background: linear-gradient(0deg, #1A1F16 0%, transparent 100%); }
  .sg-vdialog__fade--light { background: linear-gradient(0deg, #F7F5F0 0%, transparent 100%); }
  .sg-vdialog__brand-overlay { top: 12px; right: 12px; }
}
/* Compact variant — used on landing page (two side-by-side) */
.sg-vdialog--compact {
  min-height: 420px;
}
.sg-vdialog--compact .sg-vdialog__content {
  flex: 0 0 200px;
  padding: 28px 24px;
}
.sg-vdialog--compact .sg-dialog__title {
  font-size: 17px;
}
.sg-vdialog--compact .sg-vdialog__desc {
  font-size: 13px;
  margin-bottom: 12px;
}
.sg-vdialog--compact .comic-cover__meta {
  font-size: 11px;
}
.sg-vdialog--compact .comic-cover__label {
  font-size: 11px;
}
.sg-vdialog--compact .sg-vdialog__brand-overlay {
  top: 12px;
  right: 12px;
}
.sg-vdialog--compact .sg-vdialog__brand-logo {
  width: 20px;
}
.sg-vdialog--compact .sg-vdialog__brand-text {
  font-size: 11px;
}
@media (max-width: 768px) {
  .landing-stories__grid { grid-template-columns: 1fr; }
  .sg-vdialog--compact { min-height: auto; }
  .sg-vdialog--compact .sg-vdialog__content { flex: none; }
  .sg-vdialog--compact .sg-vdialog__photo { min-height: 260px; }
}
/* Dialog form elements */
.sg-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  text-align: left;
}
.sg-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-dialog__label {
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(247,245,240,0.85);
}
.sg-dialog__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: #F7F5F0;
  font-family: var(--ar-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.sg-dialog__input::placeholder {
  color: rgba(247,245,240,0.25);
}
.sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.5);
  background: rgba(255,255,255,0.06);
}
.sg-dialog__link {
  color: var(--ar-gold);
  cursor: pointer;
  font-weight: 600;
}
.sg-dialog__link:hover {
  text-decoration: underline;
}
/* Divider "or" */
.sg-dialog__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 4px 0 12px;
}
.sg-dialog__divider::before,
.sg-dialog__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(26,31,22,0.1);
}
.sg-dialog__divider span {
  font-size: 12px;
  color: rgba(26,31,22,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Success state */
.sg-dialog__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  text-align: center;
}
.sg-dialog__success p {
  font-size: 14px;
  color: rgba(26,31,22,0.7);
  margin: 0;
  line-height: 1.5;
}
/* Light mode form */
.fv-page--light .sg-dialog__label { color: rgba(26,31,22,0.85); }
.fv-page--light .sg-dialog__input {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: #1A1F16;
}
.fv-page--light .sg-dialog__input::placeholder { color: rgba(26,31,22,0.3); }
.fv-page--light .sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.6);
  background: rgba(0,0,0,0.02);
}
/* ── Dialog overlay (global) ───────────────────────────────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: dialog-fade-in 0.2s ease-out;
}
.dialog-overlay__inner {
  max-width: 900px;
  width: calc(100% - 32px);
  animation: dialog-slide-up 0.25s ease-out;
}
.dialog-overlay__inner .sg-dialog:only-child {
  max-width: 380px;
  margin: 0 auto;
}
@keyframes dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ── Styleguide mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sg-content { padding: 72px 16px 0; }
  .sg-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sg-aside { text-align: left; max-width: none; }

  .sg-row--3, .sg-row--5, .sg-row--6 { flex-wrap: wrap; }
  .sg-row--5 > * { flex: 1 1 calc(33.33% - 12px); min-width: 90px; }
  .sg-row--6 > * { flex: 1 1 calc(33.33% - 12px); min-width: 90px; }
  .sg-swatch--hero { flex-direction: column; }
  .sg-swatch__color--hero { height: 160px; }
  .sg-swatch__info--hero { width: 100%; }
  .sg-row--3 > * { flex: 1 1 calc(50% - 8px); }
  .sg-row--2 { flex-direction: column; }

  .sg-logo-card { aspect-ratio: auto; height: 200px; }
  .sg-logo-card svg { width: 48px; height: 60px; }
  .sg-swatch__color { height: 70px; }

  .sg-verlauf--h { flex-direction: column; height: auto; }
  .sg-verlauf--h .sg-verlauf__solid { width: 100%; }
  .sg-verlauf--h .sg-verlauf__fade { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 50%; }
  .sg-verlauf__fade--dark { background: linear-gradient(180deg, #1A1F16 0%, transparent 100%); }
  .sg-verlauf__fade--light { background: linear-gradient(180deg, #F7F5F0 0%, transparent 100%); }
  .sg-verlauf__photo { min-height: 200px; }
  .sg-type-card { padding: 20px; }
}
/* =============================================================================
   Landing Page
   ============================================================================= */
.landing {
  --ar-black: #1A1F16;
  --ar-white: #F7F5F0;
  --ar-gold: #C4A96A;
  --ar-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ar-font-body: 'Inter', system-ui, sans-serif;
  --ln-text: #F7F5F0;
  --ln-text-75: rgba(247,245,240,0.75);
  --ln-text-65: rgba(247,245,240,0.65);
  --ln-text-60: rgba(247,245,240,0.6);
  --ln-text-55: rgba(247,245,240,0.55);
  --ln-text-50: rgba(247,245,240,0.5);
  --ln-text-45: rgba(247,245,240,0.45);
  --ln-text-40: rgba(247,245,240,0.4);
  --ln-text-35: rgba(247,245,240,0.35);
  --ln-text-25: rgba(247,245,240,0.25);
  --ln-bg: var(--ar-black);
  --ln-bg-alt: #1e2318;
  --ln-card-bg: rgba(255,255,255,0.04);
  --ln-card-border: rgba(255,255,255,0.06);
  --ln-card-bg-hover: rgba(255,255,255,0.07);
  --ln-card-border-hover: rgba(255,255,255,0.1);
  --ln-btn-bg: rgba(255,255,255,0.08);
  --ln-btn-border: rgba(255,255,255,0.12);
  --ln-btn-bg-hover: rgba(255,255,255,0.14);
  --ln-btn-border-hover: rgba(255,255,255,0.2);
  background: var(--ln-bg);
  color: var(--ln-text);
  min-height: 100vh;
}
.fv-page--light.landing {
  --ln-text: #1A1F16;
  --ln-text-75: rgba(26,31,22,0.75);
  --ln-text-65: rgba(26,31,22,0.65);
  --ln-text-60: rgba(26,31,22,0.6);
  --ln-text-55: rgba(26,31,22,0.55);
  --ln-text-50: rgba(26,31,22,0.5);
  --ln-text-45: rgba(26,31,22,0.45);
  --ln-text-40: rgba(26,31,22,0.4);
  --ln-text-35: rgba(26,31,22,0.35);
  --ln-text-25: rgba(26,31,22,0.25);
  --ln-bg: #F7F5F0;
  --ln-bg-alt: #EDE9E0;
  --ln-card-bg: rgba(0,0,0,0.03);
  --ln-card-border: rgba(0,0,0,0.06);
  --ln-card-bg-hover: rgba(0,0,0,0.06);
  --ln-card-border-hover: rgba(0,0,0,0.1);
  --ln-btn-bg: rgba(0,0,0,0.06);
  --ln-btn-border: rgba(0,0,0,0.1);
  --ln-btn-bg-hover: rgba(0,0,0,0.1);
  --ln-btn-border-hover: rgba(0,0,0,0.16);
}
.sg-bg-photo.landing {
  --ln-bg: transparent;
  --ln-bg-alt: transparent;
}
/* Landing hero is full-viewport — nav overlays it, no padding-top */
.landing.fv-page {
  padding-top: 0;
}
/* ── Hero ── */
.landing-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-hero__video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.landing-hero__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    180deg,
    rgba(26,31,22,0.2) 0%,
    rgba(26,31,22,0.1) 40%,
    rgba(26,31,22,0.5) 70%,
    rgba(26,31,22,0.85) 100%
  );
  z-index: 1;
}
.landing-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 680px;
}
.landing-hero__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.landing-hero__logo {
  width: 40px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.landing-hero__brand-name {
  font-family: var(--ar-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ar-white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.landing-hero__title {
  font-family: var(--ar-font-display);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.landing-hero__subtitle {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(247,245,240,0.75);
  margin-bottom: 40px;
  max-width: 480px;
}
/* Hero always stays light-on-dark (video behind it) */
.fv-page--light.landing .landing-hero__content { color: var(--ar-white); }
.landing-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-black);
  background: var(--ar-gold);
  border: none;
  border-radius: 8px;
  padding: 14px 36px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.landing-hero__cta:hover {
  background: #d4b97a;
  transform: translateY(-1px);
}
.landing-hero__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(247,245,240,0.35); /* hero always dark */
  animation: landing-bounce 2s ease-in-out infinite;
}
@keyframes landing-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
/* ── Intro ── */
.landing-intro {
  padding: 120px 24px;
  background: var(--ln-bg);
}
.landing-intro__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.landing-intro__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.landing-intro__text {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  color: var(--ln-text-65);
  max-width: 560px;
  margin: 0 auto 56px;
}
.landing-intro__stats {
  display: flex;
  justify-content: center;
  gap: 64px;
}
.landing-intro__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.landing-intro__stat-num {
  font-family: var(--ar-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--ar-gold);
}
.landing-intro__stat-label {
  font-family: var(--ar-font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ln-text-40);
}
/* ── Stories ── */
.landing-stories {
  padding: 80px 24px 120px;
  background: var(--ln-bg);
}
.landing-stories__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.landing-stories__heading {
  font-family: var(--ar-font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ln-text);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.landing-stories__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ln-text-60);
  max-width: 560px;
  margin: 0 auto 48px;
}
.landing-stories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.landing-stories__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ar-cream);
  background: #1A1F16;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.landing-stories__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.landing-stories__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}
.landing-stories__card:hover .landing-stories__card-bg {
  transform: scale(1.05);
}
.landing-stories__card-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  opacity: 0.3;
}
.landing-stories__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}
.landing-stories__card-content {
  position: relative;
  z-index: 1;
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-stories__card-meta {
  font-family: var(--ar-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.landing-stories__card-title {
  font-family: var(--ar-font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--ar-cream);
  letter-spacing: -0.01em;
}
.landing-stories__card-subtitle {
  font-size: 14px;
  color: rgba(247,245,240,0.7); /* card always dark (image behind) */
  line-height: 1.4;
}
.landing-stories__card-scenes {
  font-size: 12px;
  color: rgba(212,185,122,0.7);
  margin-top: 4px;
}
.landing-stories__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ar-gold);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.landing-stories__link:hover {
  color: #e8d49e;
}
/* ── Featured Species ── */
.landing-featured {
  padding: 0 24px 120px;
  background: var(--ln-bg);
}
.landing-featured__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.landing-featured__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 48px;
}
.landing-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.landing-featured__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: var(--ar-white);
  transition: transform 0.25s;
}
.landing-featured__card:hover {
  transform: scale(1.02);
}
.landing-featured__card-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.landing-featured__card-img img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.landing-featured__card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 16px;
  background: linear-gradient(0deg, rgba(26,31,22,0.85) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.landing-featured__card-name {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
}
.landing-featured__card-latin {
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-style: italic;
  color: rgba(247,245,240,0.5); /* card always dark (image behind) */
}
.landing-featured__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ar-gold);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-featured__all:hover {
  color: #d4b97a;
}
/* ── Hero actions ── */
.landing-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.landing-hero__secondary {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: rgba(247,245,240,0.55); /* hero always dark */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.landing-hero__secondary:hover {
  color: rgba(247,245,240,0.85);
}
/* ── Community section ── */
.landing-community {
  padding: 100px 24px;
  background: linear-gradient(180deg, var(--ln-bg) 0%, var(--ln-bg-alt) 50%, var(--ln-bg) 100%);
}
.landing-community__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.landing-community__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.landing-community__text {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ln-text-60);
  max-width: 480px;
  margin: 0 auto 56px;
}
.landing-community__features {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 48px;
}
.landing-community__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 180px;
}
.landing-community__feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(196,169,106,0.1);
  border: 1px solid rgba(196,169,106,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ar-gold, #C4A96A);
}
.landing-community__feature-title {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
}
.landing-community__feature-desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ln-text-45);
}
.landing-community__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ln-text);
  background: var(--ln-btn-bg);
  border: 1px solid var(--ln-btn-border);
  border-radius: 8px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.landing-community__cta:hover {
  background: var(--ln-btn-bg-hover);
  border-color: var(--ln-btn-border-hover);
}
/* ── Browse auth banner ── */
.browse-auth-banner {
  padding: 0 16px;
  margin-top: 8px;
}
.browse-auth-banner__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(196,169,106,0.08);
  border: 1px solid rgba(196,169,106,0.12);
}
.browse-auth-banner__text {
  flex: 1;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(247,245,240,0.7);
}
.browse-auth-banner__btn {
  font-family: var(--ar-font-display, 'Space Grotesk', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1F16;
  background: #C4A96A;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.browse-auth-banner__btn:hover {
  background: #d4b97a;
}
.browse-auth-banner__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: rgba(247,245,240,0.35);
  transition: color 0.2s;
}
.browse-auth-banner__close:hover {
  color: rgba(247,245,240,0.7);
}
/* Light mode banner */
.fv-page--light .browse-auth-banner__inner {
  background: rgba(196,169,106,0.06);
  border-color: rgba(196,169,106,0.12);
}
.fv-page--light .browse-auth-banner__text {
  color: rgba(26,31,22,0.65);
}
.fv-page--light .browse-auth-banner__close {
  color: rgba(26,31,22,0.3);
}
.fv-page--light .browse-auth-banner__close:hover {
  color: rgba(26,31,22,0.6);
}
/* ── Footer on landing ── */
.landing .site-footer {
  background: transparent;
}
.landing .site-footer__col-title {
  color: var(--ln-text-45);
}
.landing .site-footer__link {
  color: var(--ln-text-55);
}
.landing .site-footer__link:hover {
  color: var(--ln-text);
}
.landing .site-footer__text {
  color: var(--ln-text-40);
}
.landing .site-footer__tagline {
  color: var(--ln-text-50);
}
.landing .site-footer__copy {
  color: var(--ln-text-25);
}
.landing .site-footer__sponsor-label {
  color: var(--ln-text-35);
}
.landing .site-footer__sponsor-img {
  filter: brightness(0) invert(1);
  opacity: 0.4;
}
.fv-page--light.landing .site-footer__sponsor-img {
  filter: none;
  opacity: 0.5;
}
.fv-page--light.landing .site-footer__logo { color: #1A1F16; }
.fv-page--light.landing .site-footer__brand-name { color: #1A1F16; }
/* ── Responsive ── */
@media (max-width: 768px) {
  .landing-hero { min-height: 100svh; }
  .landing-hero__brand { margin-bottom: 32px; }
  .landing-hero__scroll-hint { bottom: 24px; }
  .landing-intro { padding: 80px 20px; }
  .landing-intro__stats { gap: 32px; }
  .landing-stories { padding: 64px 20px 80px; }
  .landing-stories__grid { grid-template-columns: 1fr; }
  .landing-stories__card { min-height: 260px; }
  .landing-featured { padding: 0 20px 80px; }
  .landing-featured__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .landing-featured__card-info { padding: 16px 12px; }
  .landing-featured__card-name { font-size: 13px; }
  .landing-community { padding: 64px 20px; }
  .landing-community__features { flex-direction: column; align-items: center; gap: 32px; }
  .landing-community__feature { max-width: 240px; }
  .landing-routes { padding: 64px 20px; }
  .landing-routes__grid { flex-direction: column; }
  .landing-routes__card { min-height: auto; }
}
/* =============================================================================
   Landing — Routes Section
   ============================================================================= */
.landing-routes {
  padding: 100px 24px;
  background: var(--ln-bg);
}
.landing-routes__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.landing-routes__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.landing-routes__text {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ln-text-60);
  max-width: 520px;
  margin: 0 auto 48px;
}
.landing-routes__grid {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}
.landing-routes__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 28px 24px;
  border-radius: 12px;
  background: var(--ln-card-bg);
  border: 1px solid var(--ln-card-border);
  text-decoration: none;
  color: var(--ln-text);
  transition: background 0.2s, border-color 0.2s;
  min-height: 200px;
}
.landing-routes__card:hover {
  background: var(--ln-card-bg-hover);
  border-color: var(--ln-card-border-hover);
}
.landing-routes__card-accent {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.landing-routes__card-name {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.landing-routes__card-subtitle {
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: var(--ln-text-45);
  font-style: italic;
  margin-bottom: 12px;
}
.landing-routes__card-desc {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ln-text-60);
  flex: 1;
}
.landing-routes__card-stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--ln-text-35);
}
.landing-routes__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ar-gold, #C4A96A);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-routes__link:hover { color: #d4b97a; }
/* =============================================================================
   Routes Page (/routes)
   ============================================================================= */
.rp-page {
  --ar-black: #1A1F16;
  --ar-white: #F7F5F0;
  --ar-gold: #C4A96A;
  --ar-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ar-font-body: 'Inter', system-ui, sans-serif;
  /* Mode-aware text colors (night defaults) */
  --rp-text: #F7F5F0;
  --rp-text-90: rgba(247,245,240,0.9);
  --rp-text-70: rgba(247,245,240,0.7);
  --rp-text-60: rgba(247,245,240,0.6);
  --rp-text-50: rgba(247,245,240,0.5);
  --rp-text-40: rgba(247,245,240,0.4);
  --rp-text-35: rgba(247,245,240,0.35);
  --rp-text-30: rgba(247,245,240,0.3);
  --rp-text-25: rgba(247,245,240,0.25);
  --rp-text-20: rgba(247,245,240,0.2);
  --rp-text-15: rgba(247,245,240,0.15);
  --rp-text-12: rgba(247,245,240,0.12);
  --rp-text-07: rgba(247,245,240,0.07);
  --rp-text-06: rgba(247,245,240,0.06);
  --rp-subtle-bg: rgba(255,255,255,0.04);
  --rp-subtle-bg-hover: rgba(255,255,255,0.07);
  --rp-subtle-border: rgba(255,255,255,0.06);
  --rp-subtle-border-strong: rgba(255,255,255,0.08);
  --rp-line-bg: rgba(255,255,255,0.08);
}
.fv-page--light.rp-page {
  --rp-text: #1A1F16;
  --rp-text-90: rgba(26,31,22,0.9);
  --rp-text-70: rgba(26,31,22,0.7);
  --rp-text-60: rgba(26,31,22,0.6);
  --rp-text-50: rgba(26,31,22,0.5);
  --rp-text-40: rgba(26,31,22,0.4);
  --rp-text-35: rgba(26,31,22,0.35);
  --rp-text-30: rgba(26,31,22,0.3);
  --rp-text-25: rgba(26,31,22,0.25);
  --rp-text-20: rgba(26,31,22,0.2);
  --rp-text-15: rgba(26,31,22,0.15);
  --rp-text-12: rgba(26,31,22,0.12);
  --rp-text-07: rgba(26,31,22,0.07);
  --rp-text-06: rgba(26,31,22,0.06);
  --rp-subtle-bg: rgba(0,0,0,0.03);
  --rp-subtle-bg-hover: rgba(0,0,0,0.06);
  --rp-subtle-border: rgba(0,0,0,0.06);
  --rp-subtle-border-strong: rgba(0,0,0,0.08);
  --rp-line-bg: rgba(0,0,0,0.1);
}
/* Header */
.rp-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}
.rp-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--rp-subtle-bg);
  border: 1px solid var(--rp-subtle-border-strong);
  color: var(--rp-text-60);
  text-decoration: none;
  transition: background 0.2s;
}
.rp-header__back:hover { background: rgba(255,255,255,0.1); }
.rp-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rp-header__logo { width: 22px; height: auto; }
.rp-header__title {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Hero */
.rp-hero {
  text-align: center;
  padding: 48px 40px 56px;
  max-width: 720px;
  margin: 0 auto;
}
.rp-hero__title {
  font-family: var(--ar-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.rp-hero__subtitle {
  font-family: var(--ar-font-body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--rp-text-60);
}
/* Selector */
.rp-selector {
  display: flex;
  gap: 12px;
  padding: 0 40px;
  max-width: 960px;
  margin: 0 auto 48px;
}
.rp-selector__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  border-radius: 12px;
  background: var(--rp-subtle-bg);
  border: 2px solid var(--rp-subtle-border);
  color: var(--rp-text-60);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-selector__btn:hover {
  background: var(--rp-subtle-bg-hover);
}
.rp-selector__btn--active {
  background: var(--rp-subtle-border-strong);
  border-color: var(--route-color);
  color: var(--rp-text);
}
.rp-selector__name {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
}
.rp-selector__meta {
  font-family: var(--ar-font-body);
  font-size: 12px;
  opacity: 0.5;
}
/* Body – two-column on desktop */
.rp-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.rp-body .rp-detail,
.rp-body .rp-section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 1024px) {
  .rp-body {
    display: flex;
    gap: 48px;
    align-items: flex-start;
  }
  .rp-body__left {
    flex: 1.2;
    min-width: 0;
  }
  .rp-body__right {
    flex: 1;
    min-width: 0;
    position: sticky;
    top: 24px;
  }
}
@media (max-width: 768px) {
  .rp-body { padding: 0 20px; }
}
/* Detail */
.rp-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 48px;
}
.rp-detail__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.rp-detail__color {
  width: 6px;
  height: 40px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rp-detail__name {
  font-family: var(--ar-font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
}
.rp-detail__subtitle {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: var(--rp-text-50);
  font-style: italic;
}
.rp-detail__desc {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--rp-text-60);
  margin-bottom: 32px;
}
.rp-detail__stats {
  display: flex;
  gap: 40px;
  margin-bottom: 24px;
}
.rp-detail__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-detail__stat-val {
  font-family: var(--ar-font-display);
  font-size: 24px;
  font-weight: 700;
}
.rp-detail__stat-label {
  font-family: var(--ar-font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rp-text-35);
}
.rp-detail__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rp-detail__highlight {
  font-family: var(--ar-font-body);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
  opacity: 0.8;
}
/* Timeline */
.rp-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 40px;
}
.rp-section--full {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}
.rp-section--last { padding-bottom: 80px; }
.rp-section--wide { max-width: 1200px; }
.rp-section__title {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
}
.rp-timeline {
  overflow-x: auto;
  padding-bottom: 16px;
}
.rp-timeline__track {
  position: relative;
  margin: 0 60px;
}
.rp-timeline__endpoint {
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rp-timeline__endpoint--start { left: 0; }
.rp-timeline__endpoint--end { left: 100%; }
.rp-timeline__endpoint-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: -7px;
  border: 2px solid var(--rp-text-20);
}
.rp-timeline__endpoint-label {
  font-family: var(--ar-font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--rp-text-40);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rp-timeline__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rp-line-bg);
  border-radius: 2px;
}
.rp-timeline__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--route-color);
  border-radius: 2px;
  opacity: 0.4;
}
.rp-timeline__poi {
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
}
.rp-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rp-text-25);
  border: 2px solid var(--rp-text-20);
  margin: -5px auto 0;
  transition: all 0.2s;
}
.rp-timeline__dot--diamond {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-top: -6px;
  transform: rotate(45deg);
  background: var(--route-color);
  border-color: var(--route-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--route-color) 40%, transparent);
}
.rp-timeline__poi-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.rp-timeline__connector {
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--rp-text-20);
}
.rp-timeline__poi-name {
  font-family: var(--ar-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--rp-text-70);
}
.rp-timeline__poi--highlight .rp-timeline__poi-name {
  color: var(--rp-text);
  font-size: 12px;
}
.rp-timeline__poi-km {
  font-family: var(--ar-font-body);
  font-size: 10px;
  color: var(--rp-text-30);
}
.rp-timeline__km-axis {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 0;
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: var(--rp-text-20);
}
/* POI List */
.rp-pois {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rp-pois__item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rp-subtle-bg);
}
.rp-pois__item:last-child { border-bottom: none; }
.rp-pois__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.rp-pois__content { flex: 1; }
.rp-pois__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.rp-pois__name {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
}
.rp-pois__km {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--rp-text-30);
}
.rp-pois__desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--rp-text-50);
}
/* Section head with toggle */
.rp-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.rp-section__head .rp-section__title {
  margin-bottom: 0;
}
/* Station Toggle */
.rp-st-toggle {
  display: flex;
  gap: 4px;
  background: var(--rp-subtle-bg);
  border-radius: 8px;
  padding: 3px;
}
.rp-st-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--rp-text-30);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-st-toggle__btn:hover {
  color: var(--rp-text-50);
}
.rp-st-toggle__btn--active {
  background: var(--rp-subtle-border-strong);
  color: var(--rp-text);
}
/* Station Line (vertical proportional view) */
.rp-stline {
  padding-top: 20px;
  padding-bottom: 20px;
}
.rp-stline__rail {
  position: relative;
  margin-left: 52px;
}
.rp-stline__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--route-color), var(--rp-line-bg));
  border-radius: 1px;
}
/* km tick marks */
.rp-stline__km-tick {
  position: absolute;
  left: -44px;
  transform: translateY(-50%);
}
.rp-stline__km-tick span {
  font-family: var(--ar-font-body);
  font-size: 10px;
  color: var(--rp-text-20);
  letter-spacing: 0.02em;
}
/* Station nodes — single line, no overlap */
.rp-stline__node {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  white-space: nowrap;
}
.rp-stline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rp-text-20);
  border: 2px solid var(--rp-line-bg);
  flex-shrink: 0;
  margin-left: -3px;
  position: relative;
  z-index: 1;
}
.rp-stline__node--highlight .rp-stline__dot {
  width: 10px;
  height: 10px;
  margin-left: -4px;
  background: var(--route-color);
  border-color: var(--route-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--route-color) 40%, transparent);
}
.rp-stline__node--endpoint .rp-stline__dot {
  width: 12px;
  height: 12px;
  margin-left: -5px;
  border-radius: 3px;
  background: var(--route-color);
  border-color: var(--route-color);
}
.rp-stline__card-name {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--rp-text-70);
}
.rp-stline__node--highlight .rp-stline__card-name {
  color: var(--rp-text);
  font-size: 14px;
}
.rp-stline__node--endpoint .rp-stline__card-name {
  color: var(--rp-text);
}
.rp-stline__card-meta {
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: var(--rp-text-20);
}
/* Footer on routes page */
.rp-page .site-footer { background: transparent; }
.rp-page .site-footer__col-title { color: rgba(247,245,240,0.45); }
.rp-page .site-footer__link { color: rgba(247,245,240,0.55); }
.rp-page .site-footer__link:hover { color: #F7F5F0; }
.rp-page .site-footer__text { color: rgba(247,245,240,0.4); }
.rp-page .site-footer__tagline { color: rgba(247,245,240,0.5); }
.rp-page .site-footer__copy { color: rgba(247,245,240,0.25); }
.rp-page .site-footer__sponsor-label { color: rgba(247,245,240,0.3); }
.rp-page .site-footer__sponsor-img { filter: brightness(0) invert(1); opacity: 0.4; }
/* Light footer on routes */
.fv-page--light.rp-page .site-footer { background: transparent; }
.fv-page--light.rp-page .site-footer__sponsor-img { filter: none; opacity: 0.5; }
/* Elevation Profile */
.rp-elev {
  width: 100%;
}
.rp-elev__stats {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rp-elev__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: var(--rp-text-70);
}
.rp-elev__stat svg {
  opacity: 0.5;
}
.rp-elev__stat-dim {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rp-text-35);
}
.rp-elev__svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.rp-elev__label {
  font-family: var(--ar-font-body);
  font-size: 10px;
  fill: var(--rp-text-30);
}
.rp-elev__poi-label {
  font-family: var(--ar-font-display);
  font-size: 9px;
  font-weight: 500;
  fill: var(--rp-text-40);
  letter-spacing: 0.02em;
}
.rp-elev__poi-label--highlight {
  font-size: 10px;
  font-weight: 700;
  fill: var(--rp-text-70);
}
.rp-elev__tooltip {
  font-family: var(--ar-font-body);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--rp-text);
  letter-spacing: 0.01em;
}
/* Mode Toggle */
.rp-mode-toggle {
  display: flex;
  gap: 8px;
}
.rp-mode-toggle__btn {
  padding: 6px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.5);
  font-family: var(--ar-font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.rp-mode-toggle__btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.8);
}
.rp-mode-toggle__btn--active {
  background: var(--route-color);
  color: #fff;
  border-color: var(--route-color);
}
/* Station 3D View */
.rp-st3d {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.rp-st3d__canvas {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
/* Glassmorphism mode */
.rp-st3d--glass .rp-st3d__canvas {
  border-radius: var(--ar-glass-radius);
  background: var(--ar-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ar-glass-border);
}
.rp-st3d__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Controls — overlay bottom of canvas */
.rp-st3d__controls {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(26, 31, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 10;
}
/* Glass mode: controls also get glass treatment */
.rp-st3d--glass .rp-st3d__controls {
  background: var(--ar-glass-bg);
  border-color: var(--ar-glass-border);
}
.rp-st3d__sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.rp-st3d__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ar-font-body);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.5);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-st3d__btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.7);
}
.rp-st3d__btn--active {
  background: rgba(255,255,255,0.1);
  color: var(--ar-white);
  border-color: rgba(255,255,255,0.2);
}
.rp-st3d__slider {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(247,245,240,0.5);
  font-size: 12px;
  font-family: var(--ar-font-body);
}
.rp-st3d__slider input[type="range"] {
  width: 70px;
  accent-color: var(--route-color, var(--ar-gold));
}
.rp-st3d__slider span {
  min-width: 18px;
  text-align: right;
}
.rp-st3d__nav {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 12px;
  border-radius: 10px;
  background: rgba(26, 31, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 10;
}
.rp-st3d--glass .rp-st3d__nav {
  background: var(--ar-glass-bg);
  border-color: var(--ar-glass-border);
}
.rp-st3d__nav-btn {
  font-family: var(--ar-font-body);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.7);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-st3d__nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: var(--ar-white);
}
.rp-st3d__nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.rp-st3d__nav-label {
  font-family: var(--ar-font-head);
  font-size: 14px;
  color: var(--ar-white);
  letter-spacing: 0.03em;
  text-align: center;
  min-width: 120px;
}
/* Routes responsive */
@media (max-width: 768px) {
  .rp-selector { flex-direction: column; gap: 8px; padding: 0 20px; }
  .rp-selector__btn { flex-direction: row; justify-content: space-between; }
  .rp-detail__stats { gap: 24px; }
  .rp-hero { padding: 32px 20px 40px; }
  .rp-detail { padding: 0 20px 40px; }
  .rp-section { padding: 24px 20px; }
  .rp-elev__stats { gap: 16px; }
  .rp-stline__rail { margin-left: 44px; }
  .rp-stline__km-tick { left: -38px; }
}
/* =============================================================================
   STORIES — Overview Page
   ============================================================================= */
.stories-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 60px;
  max-width: 640px;
  margin: 0 auto;
}
.story-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, background 0.2s ease;
}
.story-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}
.story-card__cover {
  width: 80px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--story-color, var(--ar-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.story-card__emoji {
  font-size: 36px;
}
.story-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
}
.story-card__title {
  font-family: var(--ar-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ar-white);
  line-height: 1.3;
}
.story-card__subtitle {
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: rgba(247, 245, 240, 0.55);
  line-height: 1.3;
}
.story-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(247, 245, 240, 0.4);
  font-family: var(--ar-font-body);
}
.story-card__dot {
  opacity: 0.4;
}
/* --- Format comparison links --- */
.story-format-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: var(--ar-white);
  font-family: var(--ar-font-body);
  font-size: 14px;
  transition: background 0.2s;
}
.story-format-link:hover {
  background: rgba(255, 255, 255, 0.1);
}
.story-format-link__icon {
  font-size: 20px;
}
.story-format-link__label {
  font-weight: 600;
}
/* =============================================================================
   COMIC VIEWER
   ============================================================================= */
.comic-viewer {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  color: var(--ar-white);
  z-index: 50;
}
/* --- Header --- */
.comic-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  z-index: 2;
  flex-shrink: 0;
}
.comic-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ar-white);
  text-decoration: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.comic-header__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.comic-header__title {
  font-family: var(--ar-font-head);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comic-header__scene {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.5);
}
/* --- Comic Cover (Verlauf-Dialog style) --- */
.comic-cover {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.comic-cover .sg-vdialog {
  max-width: 900px;
  width: 100%;
  min-height: 420px;
}
.comic-cover__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comic-cover__label {
  font-family: var(--ar-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.comic-cover__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--ar-font-body);
  color: rgba(247, 245, 240, 0.4);
  margin: 4px 0 8px;
}
.comic-cover__preview {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(247, 245, 240, 0.55);
  font-style: italic;
  margin: 0 0 4px;
}
/* Story Verlauf — expandable wrapper */
.story-verlauf-wrap {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-verlauf-wrap .sg-vdialog {
  min-height: 480px;
  transition: min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-verlauf-wrap--expanded .sg-vdialog {
  min-height: calc(100vh - 140px);
}
@media (max-width: 768px) {
  .story-verlauf-wrap--expanded .sg-vdialog {
    min-height: auto;
  }
  .story-verlauf-wrap {
    overflow: hidden;
    border-radius: 16px;
  }
}
/* Fade overlay for film-cut transitions */
.story-fade-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10;
  border-radius: 16px;
  transition: opacity 0.4s ease-in-out;
}
/* Reversed layout: media left, text right */
.sg-vdialog--reversed {
  flex-direction: row-reverse;
}
.sg-vdialog--reversed .sg-vdialog__fade {
  left: auto;
  right: 0;
}
.sg-vdialog--reversed .sg-vdialog__fade--dark {
  background: linear-gradient(270deg, #1A1F16 0%, transparent 100%);
}
.sg-vdialog--reversed .sg-vdialog__fade--light {
  background: linear-gradient(270deg, #F7F5F0 0%, transparent 100%);
}
.sg-vdialog--reversed .sg-vdialog__brand-overlay {
  right: auto;
  left: 20px;
}
/* Mobile: no layout reversal, always photo top + text bottom */
@media (max-width: 768px) {
  .sg-vdialog.sg-vdialog--reversed {
    flex-direction: column;
  }
  .sg-vdialog--reversed .sg-vdialog__content {
    order: 2;
  }
  .sg-vdialog--reversed .sg-vdialog__photo {
    order: 1;
  }
  .sg-vdialog--reversed .sg-vdialog__fade {
    left: 0; right: auto;
    top: auto; bottom: 0;
    width: 100%; height: 50%;
  }
  .sg-vdialog--reversed .sg-vdialog__fade--dark {
    background: linear-gradient(0deg, #1A1F16 0%, transparent 100%);
  }
  .sg-vdialog--reversed .sg-vdialog__fade--light {
    background: linear-gradient(0deg, #F7F5F0 0%, transparent 100%);
  }
}
/* Story title row with mascot */
.story-title-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  align-self: flex-start;
  width: 100%;
}
.story-title-row .sg-dialog__title {
  flex: 1;
  margin-bottom: 0;
}
.story-mascot-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  align-self: flex-start;
}
.story-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  margin-bottom: -4px;
}
@media (max-width: 768px) {
  .story-mascot {
    width: 56px;
    height: 56px;
    margin-bottom: -4px;
  }
}
/* Story page brand — top right, gold shimmer */
.story-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-left: auto;
}
.story-brand__logo {
  width: 26px;
  height: auto;
  filter: brightness(0) saturate(100%);
  /* Gold tint via CSS filter: sepia + saturate + hue-rotate to match #C4A96A */
  filter: sepia(1) saturate(3) brightness(0.85) hue-rotate(10deg);
  animation: sg-shimmer 3s 1s ease-in-out infinite;
}
.story-brand__text {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #7A6420 0%, #C4A96A 15%, #D9C68A 35%, #E0CFA0 50%, #D9C68A 65%, #C4A96A 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
@media (max-width: 480px) {
  .story-brand__text { display: none; }
}
/* Expanded story: align text to bottom on desktop, top on mobile */
.story-verlauf-wrap--expanded .sg-vdialog__content {
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .story-verlauf-wrap--expanded .sg-vdialog__content {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .story-verlauf-wrap--expanded .sg-vdialog__content {
    overflow: visible;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc {
    max-height: 30vh;
    overflow-y: auto;
    /* Apple-style thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc::-webkit-scrollbar {
    width: 3px;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc::-webkit-scrollbar-track {
    background: transparent;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
  }
  .story-scene-location,
  .story-mascot,
  .story-scene-chapter {
    position: relative;
    z-index: 3;
  }
  .story-scene-location {
    margin-top: -100px;
  }
}
/* Story titles — Cinzel (gold, serif) */
.story-verlauf-wrap .sg-dialog__title {
  font-family: var(--ar-font-cinzel);
  font-size: 28px;
  color: var(--ar-gold);
}
/* Scene location badge */
.story-scene-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  align-self: flex-start;
}
/* Scene chapter label */
.story-scene-chapter {
  font-family: var(--ar-font-cinzel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  align-self: flex-start;
}
/* Sprach-Hinweis: die Sage liegt in der gewaehlten Sprache nicht vor, gezeigt
   wird die deutsche Fassung. Bewusst zurueckhaltend — eine Auskunft, keine
   Warnung; die Geschichte bleibt die Hauptsache. */
.story-scene-langhint {
  font-family: var(--ar-font-body);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.72;
  margin: -8px 0 14px;
  align-self: flex-start;
  padding-left: 10px;
  border-left: 2px solid var(--ar-gold, #C4A96A);
}
/* Scene narrator */
.story-scene-narrator {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  margin-top: auto;
  align-self: flex-start;
  padding-top: 16px;
}
/* Story navigation controls */
.story-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}
.story-nav--overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 320px;
  margin-top: 0;
  z-index: 20;
}
@media (max-width: 768px) {
  .story-nav--overlay {
    bottom: 12px;
    max-width: 280px;
  }
}
.story-nav__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.story-nav__btn:disabled {
  opacity: 0.2;
  cursor: default;
}
.story-nav__btn:not(:disabled):hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}
.sg-vdialog--light .story-nav__btn {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}
.sg-vdialog--light .story-nav__btn:not(:disabled):hover {
  background: rgba(0,0,0,0.08);
}
.sg-vdialog--light .story-nav__dot {
  background: rgba(0,0,0,0.12);
}
.story-nav__btn--finish {
  border: none;
  color: #1A1F16;
}
.story-nav__dots {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.story-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s, background 0.2s;
}
.story-nav__dot--active {
  transform: scale(1.4);
}
.story-nav__dot--done {
  opacity: 0.6;
}
/* Close X button — top right on media side */
/* Story audio play button with waveform */
.story-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  justify-content: center;
}
.story-audio-btn--playing {
  border-radius: 20px;
  width: auto;
  padding: 8px 14px;
  gap: 8px;
}
.story-audio-waveform {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding-bottom: 8px;
}
.story-audio-btn:hover {
  opacity: 0.85;
}
.story-audio-btn__waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}
.story-audio-btn__bar {
  width: 3px;
  border-radius: 2px;
  transition: height 0.08s ease;
  min-height: 3px;
}
.story-close-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F7F5F0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.story-close-x:hover {
  background: rgba(0,0,0,0.6);
}
/* Zoomable canvas for story illustrations */
.story-zoom-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.story-zoom-canvas:active {
  cursor: grabbing;
}
/* Verlauf wrap needs relative positioning for fade overlay */
.story-verlauf-wrap {
  position: relative;
}
@media (max-width: 768px) {
  .comic-cover {
    padding: 0;
    align-items: stretch;
  }
  .comic-cover .sg-vdialog {
    border-radius: 0;
    min-height: auto;
  }
}
/* --- Comic Panel --- */
.comic-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  position: relative;
  animation: comic-fade-in 0.35s ease;
}
@keyframes comic-fade-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.comic-panel__illustration {
  flex-shrink: 0;
  margin-bottom: 16px;
}
.comic-panel__illustration-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.03);
}
.comic-panel__illustration-hint {
  font-size: 12px;
  font-family: var(--ar-font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.comic-panel__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--ar-font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
/* --- Speech bubble --- */
.comic-panel__bubble {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
}
.comic-panel__bubble-arrow {
  position: absolute;
  top: -8px;
  left: 32px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
.comic-panel__bubble-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.comic-panel__narrator {
  font-family: var(--ar-font-head);
  font-size: 13px;
  font-weight: 700;
}
.comic-panel__scene-title {
  font-family: var(--ar-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ar-white);
}
.comic-panel__text {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(247, 245, 240, 0.85);
  margin: 0;
}
.comic-panel__number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ar-font-head);
  color: var(--ar-black);
  padding: 4px 10px;
  border-radius: 20px;
}
/* --- Controls --- */
.comic-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.comic-controls__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ar-white);
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.comic-controls__btn:disabled {
  opacity: 0.2;
  cursor: default;
}
.comic-controls__btn--finish {
  border: none;
  color: var(--ar-black);
}
/* --- Progress dots --- */
.comic-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comic-progress__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s, background 0.2s;
}
.comic-progress__dot--active {
  transform: scale(1.4);
}
.comic-progress__dot--done {
  opacity: 0.6;
}
/* --- Desktop: larger panel --- */
@media (min-width: 769px) {
  .comic-panel {
    padding: 40px;
    align-items: center;
  }

  .comic-panel__illustration {
    max-width: 640px;
    width: 100%;
  }

  .comic-panel__bubble {
    max-width: 640px;
    width: 100%;
    padding: 28px 32px;
  }

  .comic-panel__scene-title { font-size: 24px; }
  .comic-panel__text { font-size: 16px; line-height: 1.8; }
}
/* =============================================================================
   BOOK VIEWER
   ============================================================================= */
.book-viewer {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1a1a18;
  color: var(--ar-white);
  z-index: 50;
}
/* --- Book spread --- */
.book-spread {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}
.book-spread--flip-next {
  animation: book-flip-next 0.4s ease;
}
.book-spread--flip-prev {
  animation: book-flip-prev 0.4s ease;
}
@keyframes book-flip-next {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  50% { opacity: 0.5; transform: perspective(1200px) rotateY(-15deg) scale(0.95); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}
@keyframes book-flip-prev {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  50% { opacity: 0.5; transform: perspective(1200px) rotateY(15deg) scale(0.95); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}
/* Desktop: two pages side by side */
.book-spread__desktop {
  display: none;
}
/* Mobile: single stacked page */
.book-spread__mobile {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
@media (min-width: 769px) {
  .book-spread__desktop {
    display: flex;
    max-width: 960px;
    width: 100%;
    height: 100%;
    max-height: 600px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  .book-spread__mobile { display: none; }
}
/* --- Spine --- */
.book-spread__spine {
  width: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  flex-shrink: 0;
}
/* --- Book pages --- */
.book-page {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.book-page--left {
  background: #1e1e1c;
}
.book-page--right {
  background: #232320;
}
/* Left page: illustration */
.book-page__illustration {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
}
.book-page__illustration-inner {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 80%;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.02);
}
.book-page__illustration-label {
  font-size: 11px;
  font-family: var(--ar-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.book-page__location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: var(--ar-font-body);
  color: rgba(247, 245, 240, 0.4);
  margin-top: 12px;
}
.book-page__number {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-family: var(--ar-font-body);
  color: rgba(247, 245, 240, 0.25);
}
/* Right page: text */
.book-page__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  overflow-y: auto;
}
.book-page__chapter {
  font-family: var(--ar-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.book-page__title {
  font-family: var(--ar-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--ar-white);
  margin: 0 0 12px;
  line-height: 1.3;
}
.book-page__divider {
  width: 40px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 20px;
}
.book-page__narrative {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(247, 245, 240, 0.8);
  margin: 0;
  flex: 1;
}
.book-page__narrator {
  margin-top: 20px;
  font-size: 12px;
  font-family: var(--ar-font-body);
}
/* --- Mobile book page (stacked) --- */
.book-page-mobile {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.book-page-mobile__illustration {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #1e1e1c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  position: relative;
  flex-shrink: 0;
}
.book-page-mobile__text {
  padding: 24px 20px 40px;
  background: #232320;
  flex: 1;
}
/* =============================================================================
   STORY VIEWER — Fullscreen horizontal strip
   ============================================================================= */
.story-viewer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 50;
  background: #1A1F16;
}
/* Header overlay — floats over content */
.story-viewer__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 10;
}
/* Controls overlay — floats at bottom */
.story-viewer__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 10;
}
/* Horizontal strip */
.story-strip {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.story-strip__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Single scene — full viewport, VerlaufDialog layout */
.story-scene {
  display: flex;
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
}
/* Text side — ~30% */
.story-scene__text {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px;
  z-index: 1;
  overflow-y: auto;
}
.story-scene__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--ar-font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.story-scene__chapter {
  font-family: var(--ar-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.story-scene__title {
  font-family: var(--ar-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}
.story-scene__narrative {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 24px;
}
.story-scene__narrator {
  font-family: var(--ar-font-head);
  font-size: 13px;
  font-weight: 700;
  margin-top: auto;
}
/* Media side — ~70% */
.story-scene__media {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.story-scene__media-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}
.story-scene__media-label {
  font-size: 12px;
  font-family: var(--ar-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Fade from text into media — same as VerlaufDialog */
.story-scene__fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
}
/* Mobile: stack vertically */
@media (max-width: 768px) {
  .story-scene {
    flex-direction: column;
  }

  .story-scene__text {
    flex: none;
    order: 2;
    padding: 24px 20px 100px;
  }

  .story-scene__media {
    flex: none;
    height: 40vh;
    order: 1;
    border-radius: 0 0 20px 20px;
  }

  .story-scene__fade {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
  }

  .story-scene__title {
    font-size: 22px;
  }

  .story-strip__track {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}
/* =============================================================================
   Legal Pages (Impressum, Datenschutz, AGB)
   ============================================================================= */
.legal-page {
  min-height: 100vh;
  background: var(--ar-bg);
  color: var(--ar-text);
  display: flex;
  flex-direction: column;
}
.legal-page__inner {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  width: 100%;
}
.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ar-green);
  text-decoration: none;
  margin-bottom: 32px;
  transition: opacity 0.2s;
}
.legal-page__back:hover {
  opacity: 0.7;
}
.legal-page__content h1 {
  font-family: var(--ar-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ar-black);
  margin-bottom: 8px;
}
.legal-page__meta {
  font-size: 13px;
  color: var(--ar-gray);
  margin-bottom: 32px;
}
.legal-page__content h2 {
  font-family: var(--ar-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ar-black);
  margin-top: 32px;
  margin-bottom: 12px;
}
.legal-page__content h3 {
  font-family: var(--ar-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ar-black);
  margin-top: 20px;
  margin-bottom: 8px;
}
.legal-page__content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ar-text);
  margin-bottom: 12px;
}
.legal-page__content ul {
  padding-left: 20px;
  margin-bottom: 12px;
}
.legal-page__content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ar-text);
  margin-bottom: 4px;
}
.legal-page__content a {
  color: var(--ar-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page__content a:hover {
  opacity: 0.7;
}
.legal-page__content strong {
  font-weight: 600;
}
/* Legal page footer — light background overrides */
.legal-page .site-footer { color: #1A1F16; }
.legal-page .site-footer__logo { color: #1A1F16; }
.legal-page .site-footer__brand-name { color: #1A1F16; }
.legal-page .site-footer__tagline { color: rgba(26,31,22,0.6); }
.legal-page .site-footer__col-title { color: #1A1F16; }
.legal-page .site-footer__link { color: rgba(26,31,22,0.6); }
.legal-page .site-footer__link:hover { color: #1A1F16; }
.legal-page .site-footer__text { color: rgba(26,31,22,0.5); }
.legal-page .site-footer__divider { background: rgba(26,31,22,0.1); }
.legal-page .site-footer__sponsor-label { color: rgba(26,31,22,0.4); }
.legal-page .site-footer__sponsor-img { filter: none; opacity: 0.7; }
.legal-page .site-footer__copy { color: rgba(26,31,22,0.35); }
.legal-page .site-footer__lang-btn { color: rgba(26,31,22,0.35); border-color: rgba(26,31,22,0.12); }
.legal-page .site-footer__lang-btn:hover { color: rgba(26,31,22,0.6); border-color: rgba(26,31,22,0.25); }
.legal-page .site-footer__lang-btn--active { color: var(--ar-green); border-color: var(--ar-green); background: rgba(61,90,62,0.1); }
@media (max-width: 600px) {
  .legal-page__inner {
    padding: 32px 16px 48px;
  }

  .legal-page__content h1 {
    font-size: 26px;
  }

  .legal-page__content h2 {
    font-size: 18px;
  }
}
/* ── Survey Dialog ─────────────────────────────────────────────────── */
.sg-survey {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 8px 0 20px;
}
.sg-survey__question {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-survey__label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26,31,22,0.75);
  letter-spacing: 0.01em;
}
.sg-survey__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-survey__chip {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(26,31,22,0.12);
  background: rgba(26,31,22,0.03);
  color: rgba(26,31,22,0.7);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sg-survey__chip:hover {
  border-color: rgba(196,169,106,0.4);
  color: rgba(26,31,22,0.9);
}
.sg-survey__chip--active {
  background: var(--ar-gold);
  border-color: var(--ar-gold);
  color: #fff;
  font-weight: 500;
}
.sg-survey__chip--active:hover {
  background: var(--ar-gold);
  border-color: var(--ar-gold);
  color: #fff;
}
.sg-survey__textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(26,31,22,0.1);
  border-radius: 8px;
  background: rgba(26,31,22,0.03);
  color: #1A1F16;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}
.sg-survey__textarea::placeholder {
  color: rgba(26,31,22,0.3);
}
.sg-survey__textarea:focus {
  border-color: rgba(196,169,106,0.6);
}
/* ── Onboarding Dialog ─────────────────────────────────────────────── */
.sg-onboarding {
  display: flex;
  flex-direction: row;
  background: #F7F5F0;
  border-radius: 16px;
  overflow: hidden;
  max-width: 780px;
  width: 100%;
  min-height: 420px;
}
.sg-onboarding__image {
  position: relative;
  flex: 0 0 340px;
  overflow: hidden;
}
.sg-onboarding__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sg-onboarding__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent 0%, #F7F5F0 100%);
}
.sg-onboarding__brand {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-heading);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.05em;
}
.sg-onboarding__logo {
  width: 18px;
  height: 18px;
}
.sg-onboarding__content {
  flex: 1;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.sg-onboarding__title {
  font-family: var(--ar-font-heading);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.2;
}
.sg-onboarding__text {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26,31,22,0.65);
  margin: 0 0 28px;
}
.sg-onboarding__dots {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.sg-onboarding__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26,31,22,0.12);
  transition: all 0.2s ease;
}
.sg-onboarding__dot--active {
  width: 24px;
  border-radius: 4px;
}
.sg-onboarding__nav {
  display: flex;
  gap: 12px;
  width: 100%;
}
.sg-onboarding__btn {
  flex: 1;
  padding: 13px 24px;
  border-radius: 10px;
  border: none;
  font-family: var(--ar-font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sg-onboarding__btn--primary {
  color: #fff;
}
.sg-onboarding__btn--primary:hover {
  filter: brightness(1.1);
}
.sg-onboarding__btn--ghost {
  background: rgba(26,31,22,0.05);
  color: rgba(26,31,22,0.6);
}
.sg-onboarding__btn--ghost:hover {
  background: rgba(26,31,22,0.08);
}
/* Mobile: stack vertically */
@media (max-width: 768px) {
  .sg-onboarding { flex-direction: column; max-width: 100%; max-height: 85vh; min-height: auto; }
  .sg-onboarding__image { flex: 0 0 auto; height: 160px; }
  .sg-onboarding__fade { top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(0deg, #F7F5F0 0%, transparent 100%); }
  .sg-onboarding__brand { top: 12px; left: auto; right: 12px; }
  .sg-onboarding__content { padding: 0 20px 24px; align-items: center; text-align: center; }
  .sg-onboarding__title { font-size: 20px; }
  .sg-onboarding__text { font-size: 14px; }
}
/* ---------------------------------------------------------------------------
   ThreeCanvas — Loading + Error states
   Positioning shim only; the actual look (spinner, type, color) comes from
   the shared .fv-loading / .fv-loading__spinner / .fv-loading__text rules
   so the 3D-Modell-Ladeanzeige sits in the same visual language as every
   other loading state in the app. No backdrop, no modal feel.
   --------------------------------------------------------------------------- */
.three-canvas__status {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  animation: fv-fade-in 0.2s ease-out;
}
/* cache-bust r1 2026-07-04 — see main.tsx build stamp */
/* ---------------------------------------------------------------------------
 * Navigation Mode — Map + POI overlay
 * Uses design tokens from frog-view.css (--ar-*)
 * --------------------------------------------------------------------------- */

/* ---- Floating Nav Button ---- */

.nav-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: rgba(61, 90, 62, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.nav-fab:hover {
  transform: scale(1.08);
  background: rgba(61, 90, 62, 0.95);
}

.nav-fab:active {
  transform: scale(0.95);
}

.nav-fab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #F7F5F0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Fullscreen Map Container ---- */

.nav-map {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #1A1F16;
  display: flex;
  flex-direction: column;
}

.nav-map__canvas {
  flex: 1;
  position: relative;
}

.nav-map__canvas .mapboxgl-map {
  width: 100%;
  height: 100%;
}

/* ---- Close Button ---- */

.nav-map__close {
  position: absolute;
  top: max(env(safe-area-inset-top, 12px), 12px);
  right: 12px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(26, 31, 22, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav-map__close:hover {
  background: rgba(26, 31, 22, 0.9);
}

.nav-map__close svg {
  width: 20px;
  height: 20px;
  stroke: #F7F5F0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

/* ---- Center-on-user Button ---- */

.nav-map__center-btn {
  position: absolute;
  bottom: 24px;
  left: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(26, 31, 22, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav-map__center-btn:hover {
  background: rgba(26, 31, 22, 0.9);
}

.nav-map__center-btn svg {
  width: 20px;
  height: 20px;
  stroke: #F7F5F0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- User Position Dot ---- */

.nav-user-dot {
  width: 18px;
  height: 18px;
  position: relative;
}

.nav-user-dot__inner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4A90D9;
  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(74, 144, 217, 0.6);
  position: absolute;
  top: 0;
  left: 0;
}

.nav-user-dot__pulse {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(74, 144, 217, 0.35);
  position: absolute;
  top: 0;
  left: 0;
  animation: nav-pulse 2s ease-out infinite;
}

@keyframes nav-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ---- POI Markers ---- */

.nav-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.nav-marker:hover {
  transform: scale(1.1);
}

.nav-marker__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.8);
  position: relative;
}

.nav-marker__icon--info       { background: #3D5A3E; }
.nav-marker__icon--viewpoint  { background: #C4A96A; }
.nav-marker__icon--water      { background: #4A90D9; }
.nav-marker__icon--bridge     { background: #8B6B47; }

.nav-marker--nearest .nav-marker__icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
  box-shadow:
    0 0 0 4px rgba(196, 169, 106, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.4);
  animation: nav-glow 2s ease-in-out infinite alternate;
}

@keyframes nav-glow {
  0% { box-shadow: 0 0 0 4px rgba(196, 169, 106, 0.3), 0 2px 10px rgba(0, 0, 0, 0.4); }
  100% { box-shadow: 0 0 0 8px rgba(196, 169, 106, 0.5), 0 2px 14px rgba(0, 0, 0, 0.5); }
}

.nav-marker__label {
  margin-top: 4px;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---- Nearest POI Bottom Bar ---- */

.nav-nearest-bar {
  position: absolute;
  bottom: 24px;
  left: 72px;
  right: 16px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(26, 31, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  color: #F7F5F0;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-nearest-bar__label {
  font-size: 11px;
  color: var(--ar-sage, #8B9D83);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-nearest-bar__name {
  font-size: 15px;
  font-weight: 600;
  color: #F7F5F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-nearest-bar__dist {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ar-gold, #C4A96A);
  white-space: nowrap;
}

/* ---- POI Info Panel (bottom sheet) ---- */

.nav-panel-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.3);
}

.nav-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 21;
  max-height: 70vh;
  border-radius: 20px 20px 0 0;
  background: #1A1F16;
  color: #F7F5F0;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: nav-slide-up 0.3s ease-out;
  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
}

@keyframes nav-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.nav-panel__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 12px auto 8px;
}

.nav-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-panel__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.nav-panel__close svg {
  width: 16px;
  height: 16px;
  stroke: #F7F5F0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.nav-panel__body {
  padding: 0 20px;
}

.nav-panel__name {
  font-family: var(--ar-font-display, 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #F7F5F0;
}

.nav-panel__distance {
  font-size: 13px;
  color: var(--ar-gold, #C4A96A);
  font-weight: 600;
  margin-bottom: 12px;
}

.nav-panel__desc {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.75);
  margin-bottom: 16px;
}

.nav-panel__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.nav-panel__btn--primary {
  background: var(--ar-green, #3D5A3E);
  color: #F7F5F0;
}

.nav-panel__btn--primary:hover {
  background: #4a6e4b;
}

.nav-panel__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #F7F5F0;
}

.nav-panel__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.nav-panel__btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Loading State ---- */

.nav-map__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1F16;
  color: var(--ar-sage, #8B9D83);
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 15px;
  z-index: 5;
}

.nav-map__loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--ar-gold, #C4A96A);
  border-radius: 50%;
  animation: nav-spin 0.8s linear infinite;
  margin-right: 12px;
}

@keyframes nav-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   BottomSheet — Desktop floating-panel mode
   On desktop (>=900px) the bottom-sheet becomes a floating glass panel
   pinned bottom-left with a max-width, instead of stretching the full
   viewport. Mobile (<900px) keeps the original full-width bottom-sheet.
   Inline styles in BottomSheet.tsx set position/left/right/bottom/radius
   for mobile; these rules override for desktop via !important because
   they fight inline styles.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .bs-sheet--floating-desktop {
    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;
    width: min(440px, calc(50vw - 48px));
    border-radius: 16px !important;
    border-top-width: 1px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  }
}

/* ---------------------------------------------------------------------------
   Sheet scrollbar — Apple-style glass pill (Issue #320). Thin rounded thumb,
   no track/buttons, translucent so the glass sheet shows through; brightens
   on hover like macOS overlay scrollbars. currentColor-based (the sheet sets
   its text colour per day/night mode inline), so the pill is automatically
   light-on-dark glass and dark-on-cream glass without a mode selector.
   Same idiom as the comic-viewer's story dialog (comic-viewer.css).
   --------------------------------------------------------------------------- */
.bs-sheet__scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
}
.bs-sheet__scroll::-webkit-scrollbar {
  width: 9px;
}
.bs-sheet__scroll::-webkit-scrollbar-track {
  background: transparent;
}
.bs-sheet__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 999px;
  /* Transparent border + padding-box clip insets the pill from the sheet
     edge — the classic macOS floating-pill look. */
  border: 3px solid transparent;
  background-clip: padding-box;
}
.bs-sheet__scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, currentColor 42%, transparent);
  background-clip: padding-box;
  border: 3px solid transparent;
}
.bs-sheet__scroll::-webkit-scrollbar-button {
  display: none;
}
.arcturian-indicator {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.arcturian-indicator--mic_level {
  display: grid;
  place-items: end center;
  padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
}

.arcturian-indicator__meter {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 5px 10px;
  border: 1px solid rgb(196 169 106 / 55%);
  border-radius: 999px;
  background: rgb(15 20 16 / 66%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
  backdrop-filter: blur(10px);
}

.arcturian-indicator__meter i {
  width: 3px;
  height: 8px;
  border-radius: 99px;
  background: #c4a96a;
  transform-origin: 50% 100%;
  animation: arcturian-mic-level 760ms ease-in-out infinite alternate;
}

.arcturian-indicator__meter i:nth-child(2) { animation-delay: -410ms; }
.arcturian-indicator__meter i:nth-child(3) { animation-delay: -180ms; }
.arcturian-indicator__meter i:nth-child(4) { animation-delay: -560ms; }

.arcturian-indicator--activity_pulse {
  display: grid;
  place-items: center;
}

.arcturian-indicator__pulse {
  width: min(66vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgb(196 169 106 / 72%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(196 169 106 / 25%);
  animation: arcturian-activity-pulse 1.7s ease-out infinite;
}

.arcturian-indicator--error {
  display: grid;
  place-items: center;
  background: rgb(10 12 10 / 18%);
}

.arcturian-indicator__error {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgb(240 177 160 / 78%);
  border-radius: 50%;
  color: #f0b1a0;
  background: rgb(61 22 18 / 72%);
  font: 700 20px/1 system-ui, sans-serif;
}

@keyframes arcturian-mic-level {
  from { transform: scaleY(.55); opacity: .72; }
  to { transform: scaleY(2.25); opacity: 1; }
}

@keyframes arcturian-activity-pulse {
  0% { transform: scale(.78); opacity: 0; box-shadow: 0 0 0 0 rgb(196 169 106 / 25%); }
  24% { opacity: .8; }
  100% { transform: scale(1.06); opacity: 0; box-shadow: 0 0 0 34px rgb(196 169 106 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .arcturian-indicator__meter i,
  .arcturian-indicator__pulse {
    animation: none;
  }
}
/* ===========================================================================
   LivePage — immersive "live view" Dr.-Tschauko chat (/live).
   Fullscreen character video + live subtitles + one big push-to-talk.
   Dark, cinematic; deliberately outside the .fv-page skeleton.
   =========================================================================== */

.tl-root {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #05070a;
  overflow: hidden;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--ar-font-body, system-ui, sans-serif);
}

/* The map dashboard hosts the exact same Realtime surface inside its own
   draggable sheet. Only geometry changes: the surface fills the remaining
   sheet body and never establishes another viewport-level layer. */
.tl-root--dashboard {
  position: relative;
  inset: auto;
  z-index: 0;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: 0 0 22px 22px;
}
.tl-root--dashboard .tl-topbar {
  left: 104px; /* leave the host-owned Verlauf toggle unobstructed */
  right: 56px; /* leave the host-owned close control unobstructed */
}
.tl-root--dashboard .tl-controls {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

/* ── Fullscreen character video ─────────────────────────────────────────── */
.tl-stage { position: absolute; inset: 0; }
.tl-midshot { position: absolute; inset: 0; }
.tl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Face sits in the upper-middle of the clip — bias the crop upward so it
     stays framed when `cover` trims a tall phone viewport. */
  object-position: 50% 28%;
  background: #05070a;
}
.tl-video--panel {
  opacity: 0;
  will-change: opacity;
}

/* FULLBODY comparison variant: both keyed canvases share the exact same
   geometry. The transparent reference frame is the only startup/total-failure
   fallback; incoming green video is never exposed directly. */
.tl-fullbody {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(62, 86, 66, 0.52), transparent 43%),
    linear-gradient(160deg, #17221b 0%, #090d0b 62%, #030504 100%);
}
.tl-fullbody__poster,
.tl-fullbody__canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, 56.25vh);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}
.tl-fullbody__poster {
  z-index: 0;
  opacity: 1;
  transition: opacity 80ms linear;
}
.tl-fullbody__poster--hidden {
  opacity: 0;
  visibility: hidden;
}
.tl-fullbody__canvas {
  z-index: 1;
  will-change: opacity;
}
.tl-fullbody__source {
  position: absolute;
  width: 2px;
  height: 2px;
  left: -10px;
  bottom: -10px;
  opacity: 0;
  pointer-events: none;
}

/* Explicit, shareable A/B test affordance. Selection is mirrored to ?avatar=
   and localStorage, while MIDSHOT remains the first-run default. */
.tl-avatar-variant {
  position: absolute;
  top: calc(62px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 8;
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  background: rgba(4, 7, 6, 0.56);
  box-shadow: 0 6px 24px rgba(0,0,0,0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tl-avatar-variant__caption {
  grid-column: 1 / -1;
  padding: 1px 7px 0;
  color: rgba(255,255,255,0.62);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tl-avatar-variant button {
  border: 0;
  border-radius: 10px;
  padding: 7px 10px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.tl-avatar-variant button.is-active {
  background: var(--ar-gold, #d8b666);
  color: #1a1206;
}
.tl-avatar-variant button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Legibility gradients so white status/subtitles read over any frame. */
.tl-scrim { position: absolute; left: 0; right: 0; pointer-events: none; }
.tl-scrim--top {
  top: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.tl-scrim--bottom {
  bottom: 0; height: 52%;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0));
}

/* ── Top bar: status + close ────────────────────────────────────────────── */
.tl-topbar {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 16px; right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.tl-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tl-status__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9aa0a6;
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
.tl-status--ready .tl-status__dot { background: #7ed957; animation: tl-pulse 2s ease-in-out infinite; }
.tl-status--listening .tl-status__dot { background: #3b82f6; animation: tl-pulse 1.1s ease-in-out infinite; }
.tl-status--speaking .tl-status__dot { background: var(--ar-gold, #d8b666); animation: tl-pulse 0.8s ease-in-out infinite; }
.tl-status--connecting .tl-status__dot { background: #d8b666; animation: tl-pulse 1s ease-in-out infinite; }
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50% { box-shadow: 0 0 0 5px rgba(255,255,255,0.14); }
}
.tl-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tl-close svg { width: 20px; height: 20px; }
.tl-close:active { transform: scale(0.95); }

/* ── Error ──────────────────────────────────────────────────────────────── */
.tl-error {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  z-index: 4;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(120, 20, 20, 0.9);
  border: 1px solid rgba(255,120,120,0.4);
  font-size: 14px;
  text-align: center;
}

/* ── Subtitle (live caption) ────────────────────────────────────────────── */
.tl-subtitle {
  position: absolute;
  left: 50%;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(760px, calc(100% - 40px));
  z-index: 3;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  animation: tl-sub-in 0.25s ease;
}
@keyframes tl-sub-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tl-subtitle__who {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 3px;
  color: var(--ar-gold, #d8b666);
}
.tl-subtitle--user .tl-subtitle__who { color: #7fb2ff; }
.tl-subtitle__text {
  display: block;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.34;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.tl-subtitle--partial .tl-subtitle__text { opacity: 0.72; }

.tl-hint {
  position: absolute;
  left: 50%;
  bottom: calc(160px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  text-align: center;
  width: min(600px, calc(100% - 40px));
}

/* ── Species detail inside the canonical dashboard BottomSheet ─────────── */
.tl-species-sheet {
  box-shadow: 0 -14px 44px rgba(0,0,0,0.55);
}

/* Alex 2026-08-04 (Bildschirmfoto 117520): Die Pflanze fing erst unterhalb
   des Schliessen-Knopfes an — der Knopf sass als eigenes Band ueber dem
   Inhalt. Das Blatt ist der Rahmen fuer die Darstellung, nicht fuer eine
   Knopfleiste: der Inhalt gehoert ganz nach oben.

   Der Knopf ist `collapsedContent` und wird darum immer im Fluss gerendert
   (BottomSheet-Vertrag). Statt den geteilten Vertrag zu aendern, nehmen wir
   ihn hier aus dem Fluss: verankert am Blatt selbst — `.bs-sheet__scroll`
   bleibt bewusst unpositioniert — schwebt er ueber der Darstellung, statt sie
   nach unten zu druecken, und scrollt nicht mit ihr weg. Im eingeklappten
   Zustand bleibt er sichtbar und behaelt seine Griff-Rolle. */
.tl-species-sheet .tl-species__close {
  position: absolute;
  top: 6px;
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  margin: 0;
}
/* Das Blatt gibt dem Inhalt-Wrapper 16px Abstand per Inline-Stil mit — der
   waere hier genau der Spalt, den der Knopf hinterlaesst. */
.tl-species-sheet .tl-species__close + div {
  margin-top: 0 !important;
}
.tl-species-sheet .bs-sheet__scroll {
  padding-top: 0;
}

.tl-species__close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px auto 0;
  padding: 6px 16px 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tl-species__close svg { width: 18px; height: 18px; }
.tl-species__loading {
  min-height: min(320px, 45dvh);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 44px 20px;
  color: var(--ar-gray, #6b7280);
}

/* ── Bottom controls ────────────────────────────────────────────────────── */
.tl-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.tl-controls > * { pointer-events: auto; }
.tl-controls--blocked > * { pointer-events: none; }

/* Hero start (idle) — BREITE PILLE, bewusst keine Kreisform.
   Issue #479 (Sabrina): Start und Push-to-Talk saßen als gleich großer
   gold-runder Knopf an derselben Stelle; sie hielt den Start-Knopf wie ein
   Mikrofon. Das Symbol allein (Dreieck vs. Mikro) hat nicht getragen — die
   FORM muss es tun. Rund heißt auf dieser Seite ab jetzt: sprechen. */
.tl-start {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--ar-gold, #d8b666);
  border-radius: 999px;
  background: rgba(26, 18, 6, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  padding: 12px 26px 12px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  animation: tl-ring 2.2s ease-in-out infinite;
}
/* Das Play-Dreieck sitzt als kleine Scheibe IN der Pille — es bleibt das
   vertraute Start-Zeichen, ohne selbst wie ein Mikro-Knopf auszusehen. */
.tl-start__ring {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ar-gold, #d8b666);
  position: relative;
}
.tl-start__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #1a1206;
  transform: translateX(2px);
}
@keyframes tl-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,182,102,0.35), 0 8px 30px rgba(0,0,0,0.45); }
  50% { box-shadow: 0 0 0 14px rgba(216,182,102,0.0), 0 8px 30px rgba(0,0,0,0.45); }
}
.tl-start:active { transform: scale(0.98); }
.tl-start__label {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
/* Kündigt die Mikro-Geste an, bevor sie gebraucht wird. */
.tl-start__hint {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

/* Push-to-talk — one big circular mic. */
.tl-ptt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: none;
  background: var(--ar-gold, #d8b666);
  color: #1a1206;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.tl-ptt svg { width: 30px; height: 30px; }
.tl-ptt__label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
.tl-ptt:active { transform: scale(0.96); }
.tl-ptt:disabled { opacity: 0.5; cursor: default; }
.tl-ptt--active {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 0 0 10px rgba(59,130,246,0.22), 0 8px 30px rgba(0,0,0,0.45);
  animation: tl-mic 1.2s ease-in-out infinite;
}
@keyframes tl-mic {
  0%, 100% { box-shadow: 0 0 0 8px rgba(59,130,246,0.22), 0 8px 30px rgba(0,0,0,0.45); }
  50% { box-shadow: 0 0 0 16px rgba(59,130,246,0.08), 0 8px 30px rgba(0,0,0,0.45); }
}

@media (min-width: 900px) {
  .tl-video { object-position: 50% 22%; }
}

/* ── Eulen-Buehne (/live-tschauka, Alex 2026-08-03) ──────────────────────
   Dieselbe Flaeche wie die Menschen-Avatare, nur mit der freigestellten
   Eule: dunkler Schluchtgrund, Figur gross und mittig, leicht nach oben
   gerueckt, damit Untertitel und PTT-Knopf darunter Platz haben. */
.tl-owl-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(84, 118, 78, 0.45), transparent 62%),
    linear-gradient(170deg, #22301d 0%, #131c11 58%, #080c07 100%);
}
.tl-owl-stage__avatar {
  width: min(74vw, 46vh);
  height: min(74vw, 46vh);
  margin-bottom: 12vh;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
  transition: width 320ms ease, height 320ms ease, margin 320ms ease;
}

/* ── Kompakte Buehne: ein Detail-Blatt ist offen ──────────────────────────
   Alex 2026-08-04 (Bildschirmfoto 117435, die Krainer Lilie deckte die Eule
   vollstaendig zu): „Fuer den Fall, dass das Overlay-Dashboard angezeigt
   wird, moechte ich, dass der Avatar so klein gezoomt wird, dass er oben in
   diesem oberen Bereich, 20 %, genau ueber dem Dashboard [sitzt] … sobald
   das Dashboard wieder weg ist, habe ich wieder die Eule zentral im Screen
   oder den Avatar."

   Das Blatt nimmt 80 % der Hoehe ein (`expandedRatio` 0,80), oben bleiben
   also genau jene 20 %. Die Figur rueckt dorthin — klein, mittig, weich
   ueberblendet. Gilt fuer BEIDE Figuren: Eule und Mensch. */
.tl-stage[data-compact='true'] .tl-owl-stage {
  place-items: start center;
}
.tl-stage[data-compact='true'] .tl-owl-stage__avatar {
  width: min(30vw, 15vh);
  height: min(30vw, 15vh);
  margin-bottom: 0;
  margin-top: calc(env(safe-area-inset-top, 0px) + 44px);
}
/* Der Schluchtgrund darf nicht mitschrumpfen — nur die Figur wandert. */
.tl-stage[data-compact='true'] .tl-owl-stage {
  background:
    radial-gradient(circle at 50% 12%, rgba(84, 118, 78, 0.35), transparent 55%),
    linear-gradient(170deg, #22301d 0%, #131c11 58%, #080c07 100%);
}

/* Menschen-Figur: ihre Videoflaeche fuellt die ganze Buehne. Gleichmaessig
   verkleinert reichte der Kasten bis 27 % Bildhoehe (gemessen) — zu tief.

   Der Ausschnitt war zunaechst rund. Alex 2026-08-04 (Bildschirmfoto 117520):
   „Der Realtime-Agent … wird in einem Kreis dargestellt. Das sollte eigentlich
   nicht so sein. Sondern es soll einfach nur kleiner, weiter oben positioniert
   werden." Der Kreis schnitt die Figur zu einem Medaillon zusammen; sie soll
   ihre eigene Silhouette behalten — wie die Eule daneben. Also: hochkantiger
   Ausschnitt mit weicher Kante statt Kreis, kleiner als zuvor und dichter an
   die Oberkante. */
.tl-midshot,
.tl-fullbody {
  transition: width 320ms ease, height 320ms ease, top 320ms ease, border-radius 320ms ease;
}
.tl-stage[data-compact='true'] .tl-midshot,
.tl-stage[data-compact='true'] .tl-fullbody {
  inset: auto auto auto 50%;
  translate: -50% 0;
  top: calc(env(safe-area-inset-top, 0px) + 2px);
  width: min(24vw, 11vh);
  height: min(30vw, 14vh);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
/* Der Avatar-Test-Umschalter (nur /live) sass genau ueber dem kleinen Kopf. */
.tl-stage[data-compact='true'] ~ .tl-avatar-variant {
  display: none;
}

/* Die Verdunkelung oben wuerde die kleine Figur schlucken. */
.tl-stage[data-compact='true'] ~ .tl-scrim--top,
.tl-stage[data-compact='true'] .tl-scrim--top {
  opacity: 0.35;
}
/* ===========================================================================
   Tschauko Voice Overlay — Drop-up over the map, glass surface family
   shared with EntdeckenOverlay + BottomSheet (canonical --ar-* tokens,
   single source of glass parameters in frog-view.css).
   =========================================================================== */

.tsch-overlay-root { position: fixed; inset: 0; z-index: 200; }

.tsch-overlay__backdrop {
  position: absolute;
  inset: 0;
  /* Transparent click-catcher — keep the map visible behind the sheet
     (same call as EntdeckenOverlay: no full-screen dim). */
  background: transparent;
}

.tsch-overlay-root .tsch-overlay {
  position: absolute;
  left: 0; right: 0;
  top: 56px;
  bottom: calc(57px + env(safe-area-inset-bottom, 0px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ar-overlay-bg);
  backdrop-filter: var(--ar-overlay-blur);
  -webkit-backdrop-filter: var(--ar-overlay-blur);
  color: var(--ar-text);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: tsch-overlay-up 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

html.tschepp-ios-embed .tsch-overlay-root .tsch-overlay {
  bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes tsch-overlay-up { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* Drag handle — same pattern as ent-overlay__drag */
.tsch-overlay__drag {
  flex: 0 0 auto;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.tsch-overlay__drag:active { cursor: grabbing; }
.tsch-overlay__grip {
  width: 40px; height: 5px;
  border-radius: 3px;
  background: var(--ar-sage);
  opacity: 0.55;
  margin: 10px auto 2px;
  transition: opacity 0.15s ease, width 0.15s ease;
}
.tsch-overlay__drag:active .tsch-overlay__grip { opacity: 0.9; width: 52px; }

.tsch-overlay__head {
  display: flex;
  flex-direction: column;
  padding: 4px 20px 12px;
}
.tsch-overlay__title {
  margin: 0;
  font-family: var(--ar-font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ar-text);
}
.tsch-overlay__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ar-gray);
}

.tsch-overlay__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ar-overlay-border, rgba(26, 31, 22, 0.12));
  background: var(--ar-overlay-bg, rgba(255, 255, 255, 0.6));
  color: var(--ar-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tsch-overlay__close svg { width: 18px; height: 18px; }

/* Portrait + status block — sits below the head, above the transcript. */
.tsch-overlay__portrait-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px 12px;
  flex: 0 0 auto;
}
.tsch-overlay__portrait {
  flex: 0 0 80px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ar-glass-bg);
  border: 2px solid var(--ar-sage);
  display: flex; align-items: center; justify-content: center;
  color: var(--ar-text);
  /* Clip the HLS portrait video to the circle — without this the
     1280×720 <video> renders at its intrinsic size and overflows the
     avatar as a raw rectangle. */
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tsch-overlay__portrait svg { width: 48px; height: 48px; }
/* The animated Dr.-Tschauko clip fills and covers the round avatar. */
.tsch-overlay__portrait-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* State rings — wake up the portrait when the bot is doing something. */
.tsch-portrait--connecting { border-color: var(--ar-sage); animation: tsch-pulse 1.2s ease-in-out infinite; }
.tsch-portrait--speaking { border-color: var(--ar-gold); box-shadow: 0 0 0 6px rgba(196, 169, 106, 0.15); }
.tsch-portrait--listening { border-color: #3b82f6; box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12); animation: tsch-pulse 2s ease-in-out infinite; }
.tsch-portrait--error { border-color: #dc2626; }
.tsch-portrait--closed { border-color: var(--ar-gray); opacity: 0.6; }
@keyframes tsch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 169, 106, 0.0); }
  50% { box-shadow: 0 0 0 10px rgba(196, 169, 106, 0.18); }
}

.tsch-overlay__status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tsch-overlay__status-label {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-text);
}
.tsch-overlay__timer {
  font-size: 12px;
  color: var(--ar-gray);
  font-variant-numeric: tabular-nums;
}

/* Transcript — scrolling area, takes the remaining height. */
.tsch-overlay__transcript {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tsch-overlay__empty {
  text-align: center;
  color: var(--ar-gray);
  font-size: 14px;
  margin-top: 24px;
}

.tsch-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tsch-bubble--bot {
  align-self: flex-start;
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: var(--ar-text);
  border-bottom-left-radius: 4px;
}
.tsch-bubble--user {
  align-self: flex-end;
  background: var(--ar-gold);
  color: #1A1F16;
  border-bottom-right-radius: 4px;
}
.tsch-bubble--partial { opacity: 0.6; font-style: italic; }

.tsch-overlay__error {
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #dc2626;
  font-size: 13px;
}

/* Inline knowledge slot — SpeciesView rendered in place of the transcript
   when the agent sets a knowledge focus (show_species). Takes the same
   remaining height as the transcript; scrolls internally. */
.tsch-overlay__knowledge {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}
.tsch-overlay__knowledge-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 10px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--ar-glass-border);
  background: var(--ar-glass-bg);
  color: var(--ar-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tsch-overlay__knowledge-close svg { width: 18px; height: 18px; }

/* Push-to-talk button — the primary action, pinned at the bottom of the
   column (flex:0 0 auto). Gold pill in the resting state; turns to the
   listening-blue with a ring while the mic is held. */
.tsch-overlay__ptt {
  flex: 0 0 auto;
  margin: 4px 16px 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  background: var(--ar-gold);
  color: #1A1F16;
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.tsch-overlay__ptt svg { width: 22px; height: 22px; }
.tsch-overlay__ptt:active { transform: scale(0.98); }
.tsch-overlay__ptt:disabled { opacity: 0.5; cursor: default; }
/* Held — mic is capturing. Blue matches the listening portrait ring. */
.tsch-overlay__ptt--active {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18);
}

/* Desktop centering — same safety as EntdeckenOverlay. */
@media (min-width: 769px) {
  .tsch-overlay-root .tsch-overlay {
    max-width: 480px;
    margin: 0 auto;
    top: 80px;
    border-radius: 22px;
  }
}

/* ── Big-video avatar body (panel view = "video") ───────────────────────── */
.tsch-av {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}
.tsch-av__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 40vh;
  border-radius: 18px;
  overflow: hidden;
  background: #05070a;
}
.tsch-av__stage--compact { flex: 0 0 auto; height: 32vh; min-height: 0; }
.tsch-av__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Face sits upper-middle — bias the crop upward like the /live view. */
  object-position: 50% 26%;
  background: #05070a;
}
.tsch-av__video--panel {
  opacity: 0;
  will-change: opacity;
}
.tsch-av__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.12) 60%, transparent);
  pointer-events: none;
}
.tsch-av__subtitle {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  text-align: center;
  color: #fff;
  animation: tsch-av-sub 0.22s ease;
}
@keyframes tsch-av-sub {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.tsch-av__who {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: var(--ar-gold, #d8b666);
}
.tsch-av__subtitle--user .tsch-av__who { color: #7fb2ff; }
.tsch-av__text {
  display: block;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.32;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}
.tsch-av__subtitle--partial .tsch-av__text { opacity: 0.72; }
.tsch-av__species {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(248, 247, 244, 0.98);
  color: var(--ar-text, #1a1f16);
  border-radius: 16px;
}

/* View toggle pill (top-left, mirrors the close button top-right). */
.tsch-overlay__toggle {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(127, 127, 127, 0.28);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ar-text, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tsch-overlay__toggle:active { transform: scale(0.97); }

/* ── Standort-Karte im Gespräch (Issue: OSM-Kartenbild bei Standortfragen) ──
   Liegt im selben Slot wie die Arten-Darstellung: Der Agent blendet ein Bild
   ein, der Besucher kommt mit „zurück" in den Gesprächsverlauf. */
.agent-map { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }

.agent-map__frame {
  position: relative;
  overflow: hidden;                 /* die Kacheln ragen bewusst über den Rand */
  border-radius: 14px;
  background: #e8e4dc;              /* Kartengrund, solange Kacheln laden */
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  max-width: 100%;
}

.agent-map__pin {
  position: absolute;
  /* Nadelspitze auf die Koordinate, nicht die Bildmitte. */
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.agent-map__me {
  position: absolute;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #1497de;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(20, 151, 222, 0.28);
  pointer-events: none;
}

.agent-map__credit {
  position: absolute; right: 0; bottom: 0;
  padding: 2px 6px;
  font-size: 10px; line-height: 1.4;
  color: #1A1F16;
  background: rgba(255, 255, 255, 0.78);
  border-top-left-radius: 6px;
}

.agent-map__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center;
}
.agent-map__title { font-size: 14px; font-weight: 600; }
.agent-map__title em { font-style: normal; opacity: 0.7; font-weight: 400; }

.agent-map__open {
  padding: 8px 16px;
  border: none; border-radius: 20px;
  background: #C4A96A; color: #1A1F16;
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ── Vertiefter Modus: Inhalt groß, Erzähler klein ─────────────────────────
   Alex 29.07. (Screenshot 116232): Öffnet der Agent eine Art oder eine Karte,
   teilte sich die Fläche vorher etwa hälftig — oben das große Porträt, unten
   der Inhalt im Rest. Das Porträt ist in dem Moment aber nur noch Beiwerk:
   man will die Pflanze sehen, nicht das Gesicht.

   Die Klasse `tsch-overlay--immersive` wurde schon gesetzt, hatte aber KEINE
   einzige Regel — der Modus existierte nur dem Namen nach. Hier ist er.

   Das Porträt wird zum kleinen Kreis und legt sich über die linke obere Ecke
   des Inhalts; der Inhalt bekommt die volle Fläche. Der Sprechzustand bleibt
   sichtbar (die Ringe hängen am Porträt, nicht an der Zeile). */
.tsch-overlay--immersive .tsch-overlay__portrait-row {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 3;
  padding: 0;
  gap: 8px;
  pointer-events: none;          /* der Inhalt darunter bleibt bedienbar */
}

.tsch-overlay--immersive .tsch-overlay__portrait {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-width: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tsch-overlay--immersive .tsch-overlay__portrait svg { width: 24px; height: 24px; }

/* Status-Text und Zeitanzeige treten zurück — im vertieften Modus zählt der
   Inhalt. Der Zustand bleibt am Ring des Porträts ablesbar. */
.tsch-overlay--immersive .tsch-overlay__status { display: none; }

/* Der Inhalt beginnt oben am Rahmen statt unter der Porträt-Zeile. */
.tsch-overlay--immersive .tsch-overlay__knowledge {
  padding-top: 0;
}

/* Der Zurück-Knopf rückt aus dem Weg des Porträt-Kreises. */
.tsch-overlay--immersive .tsch-overlay__knowledge-close {
  margin-left: 60px;
}

/* ── Video-Ansicht, vertiefter Modus (Alex 29.07., Screenshot 116232) ──────
   Vorher teilte sich die Fläche etwa hälftig: 32vh Erzähler-Video oben, der
   Inhalt im Rest. Alex: „das Ganze im Fullscreen und den Doktor in einem Kreis
   links oben klein". Genau das — die Bühne wird zum Kreis und legt sich über
   den Inhalt, der Inhalt bekommt die volle Höhe. */
.tsch-av { position: relative; }

.tsch-av__stage--compact {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  min-height: 0;
  border-radius: 50%;
  border: 2px solid var(--ar-gold, #C4A96A);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;          /* der Inhalt darunter bleibt bedienbar */
}
/* Im Kreis liegt der Blick auf dem Gesicht, nicht auf der Brust. */
.tsch-av__stage--compact .tsch-av__video { object-position: 50% 22%; }
/* Der Verlauf ist für die große Bühne gedacht und macht den Kreis nur dunkel. */
.tsch-av__stage--compact .tsch-av__scrim { display: none; }

/* Untertitel im vertieften Modus: schwebt unten über dem Inhalt, damit man
   weiter mitlesen kann, was der Erzähler sagt. */
.tsch-av__subtitle--floating {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  z-index: 4;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(10, 12, 9, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F7F5F0;
  max-height: 30%;
  overflow-y: auto;
}

/* ===========================================================================
   Video-Modus: das Bild fuellt die Flaeche bis zur Oberkante
   (Alex 2026-08-04, Aufnahme 117556)
   ---------------------------------------------------------------------------
   Die Klasse `tsch-overlay--video` war gesetzt, hatte aber KEINE Regeln — der
   Ziehgriff blieb ein normales Flex-Kind und schob das Video um seine eigene
   Hoehe (10 px Rand + 5 px Griff + 2 px) nach unten. Sichtbar war davon der
   helle Sheet-Grund als Streifen ueber dem Bild: bei einem Video, das bis an
   die abgerundete Kante laufen soll, liest sich das wie ein Fehldruck.

   Loesung: im Video-Modus schwebt der Griff UEBER dem Bild, statt Platz zu
   beanspruchen. Die Rundung kommt weiterhin vom Sheet (`overflow: hidden`),
   das Video muss sie also nicht selbst kennen.
   =========================================================================== */

.tsch-overlay--video .tsch-overlay__drag {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Ueber dem Bild, aber unter Schliessen-Knopf und Verlauf-Umschalter. */
  z-index: 2;
}

/* Auf dem dunklen Bild braucht der Griff eine helle Farbe — die Salbei-Variante
   des hellen Grundes verschwaende darauf. Und er rueckt ein Stueck hoch, damit
   er der Status-Pille (`.tl-topbar`, top 14px) nicht ins Gehege kommt. */
.tsch-overlay--video .tsch-overlay__grip {
  margin: 6px auto 0;
  background: rgba(247, 245, 240, 0.85);
  opacity: 0.75;
}

/* Das Bild traegt jetzt selbst die obere Rundung — sichtbar wird sie zwar
   ohnehin erst durch das `overflow: hidden` des Sheets, aber ohne diese Zeile
   stuende hier weiter die alte Aussage „oben eckig, unten rund", die nach dem
   Hochruecken schlicht nicht mehr stimmt. */
.tsch-overlay--video .tl-root--dashboard {
  border-radius: 22px 22px 0 0;
}