/* ── Onboarding-Slideshow ──
       Text läuft über die echte Sponti-Sprechblase (spontiSay()), deshalb hier
       nur noch Maske (Mehrfach-Highlight per SVG-Cutouts statt Einzel-Spotlight-
       Box-Shadow), Klick-Blocker und schlanke Navigationsleiste. */
    /* Figur bleibt während des Onboardings bewusst an ihrer gewohnten Stelle
       (NICHT verschieben - war ein früherer, verworfener Lösungsversuch).
       Stattdessen weicht die Navbar selbst aus (s. .onboarding-navbar weiter
       unten: randständig statt mit Extra-Margin, kompaktere Innenabstände).
       z-index 500: über der Maske (498, s.u.) - sonst wird die Figur vom
       abdunkelnden Maskenrechteck mitverdunkelt, auch ohne eigenes Cutout-
       Target (z.B. Slide 1 ohne targets). Bewusst UNTER der Navbar (510),
       damit ein minimaler Rand-Overlap der FÜSSE toleriert wird, ohne dass
       Beinpixel über den Navbar-Text schneiden - die Karte deckt die Füsse
       stattdessen sauber ab. */
    body.onboarding-open .sponti-companion { z-index: 500; }
    /* Eigenes Dim-Overlay für den Header: der Header ist Flex-Kind von body
       und bildet im Browser je nach Rendering-Path einen eigenen Stacking-
       Context - die SVG-Maske (z-index:498) greift dort unzuverlässig.
       Stattdessen ein separates fixed Div (z-index:499) genau in der Header-
       Höhe, das per JS ein-/ausgeblendet wird (aus bei Slides, die den Header
       highlighten, an sonst). Höhe wird per JS dynamisch gesetzt. */
    #onboarding-header-dim {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      background: rgba(8,16,20,.88);
      z-index: 499;
      pointer-events: none;
    }
    body.onboarding-open #onboarding-header-dim { display: block; }
    /* Gibt der Zentrierungs-Berechnung in _animateScrollToCenter() (app.js)
       genug Scroll-Spielraum, damit auch weiter oben liegende Ziele
       (Routendaten, Quelle-Box) wirklich bis zur Bildschirmmitte gescrollt
       werden können, statt am Seitenende gekappt zu werden. Nur während des
       Onboardings, keine Auswirkung auf die echte Ergebnis-/Detailseite. */
    body.onboarding-open #screen-result.screen.active { padding-bottom: 50vh; }
    #onboarding-blocker {
      display: none;
      position: fixed;
      inset: 0;
      /* Über Begleiter (500), sonst bleiben dessen Buttons/Links trotz Blocker
         anklickbar (fixed-positionierte Elemente mit höherem z-index stapeln
         über dem Blocker und fangen Klicks ab). */
      z-index: 501;
      background: transparent;
    }
    #onboarding-blocker.open { display: block; }
    #onboarding-mask-svg {
      display: none;
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 498;
      pointer-events: none;
    }
    #onboarding-mask-svg.open { display: block; }
    #onboarding-mask-rect { fill: rgba(8,16,20,.88); }
    .onboarding-highlight-outline { fill: none; stroke: var(--accent); stroke-width: 2; }
    /* Randständig statt mit zusätzlichem 1rem-Abstand zum unteren Rand, plus
       kompakte, einzeilige Innenabstände (.45rem/.65rem) - macht die Navbar
       insgesamt niedriger, damit sie nicht in den Bereich der Figur hinein-
       reicht (die NICHT verschoben wird, s. body.onboarding-open
       .sponti-companion oben). Safe-Area-Inset bleibt als Padding erhalten,
       damit der Inhalt nicht unter Home-Indicator/Gesture-Bar verschwindet.
       Hintergrund deutlich transparenter als --panel (.78), da die Karte hier
       nur noch eine schmale Leiste ist statt eine flächige Box - bei voller
       Deckung wirkte sie unnötig schwer. */
    .onboarding-navbar {
      display: none;
      position: fixed;
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom) + .5rem);
      transform: translateX(-50%);
      z-index: 510;
      width: min(360px, calc(100vw - 2rem));
      background: rgba(10,24,32,.45);
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      padding: .45rem .65rem;
      backdrop-filter: blur(20px);
      box-shadow: 0 12px 32px rgba(0,0,0,.4);
    }
    .onboarding-navbar.open { display: block; }
    .onboarding-dots {
      display: flex;
      align-items: center;
      gap: .3rem;
    }
    .onboarding-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--line-strong);
    }
    .onboarding-dot.active { background: var(--accent); }
    /* Einzeilig statt zweier gestapelter Reihen (Punkte oben, Aktionen
       darunter) - spart Höhe, s. Kommentar an .onboarding-navbar oben. */
    .onboarding-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
    }
    .onboarding-skip {
      background: none;
      border: none;
      color: var(--muted);
      font-size: .78rem;
      cursor: pointer;
      padding: .4rem 0;
      white-space: nowrap;
    }
    .onboarding-next-group { display: flex; gap: .4rem; flex-shrink: 0; }
    .onboarding-btn {
      border-radius: 10px;
      padding: .4rem .8rem;
      font-weight: 600;
      font-size: .82rem;
      cursor: pointer;
      border: 1px solid var(--line-strong);
      background: rgba(255,255,255,.04);
      color: var(--text);
      white-space: nowrap;
    }
    .onboarding-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #1a140a;
    }
    /* Hinweis-Button auf screen-start (#btn-show-onboarding, index.php):
       gleiche gedämpfte Grundoptik wie .btn-secondary, aber mit akzentfarbenem
       Rahmen/Text statt --border/--muted - etwas auffälliger, da er erst
       aktiv angeklickt werden muss statt sich wie das restliche UI passiv zu
       erklären. Verschwindet dauerhaft, sobald das Tutorial einmal aufgerufen
       wurde (s. _updateOnboardingHintButton()). */
    /* Sitzt als erstes Kind in .start-center-group (index.php, direkt vor
       #btn-start) - dessen flex-direction:column + gap sorgt bereits für
       den Abstand zum Hauptbutton darunter, keine eigene Positionierung
       nötig. */
    .btn-onboarding-hint {
      border-color: var(--accent-dk);
      color: var(--accent);
    }
    .btn-onboarding-hint:hover { background: var(--faint); border-color: var(--accent); color: var(--accent); }