/* Dimi_2: Zusatzschicht. Farben nur aus den Tokens des Elternthemes. */
/* Jede Szene liegt als Canvas in ihrer Bildfläche und scrollt mit ihr. Unter 834 px ist die Karte nicht sticky: dann Bezugspunkt für den Canvas. */
@media (max-width: 833px) { .fx-on .home .story-media, .fx-on .home .story.flip .story-media { position: relative; top: auto; } }
/* Bildflächen werden zur Bühne; ohne WebGL bleibt das Foto stehen. */
.fx-on .story-media img { visibility: hidden; }

/* Kapitelnavigation (nur breite Bildschirme) */
.fx-chapters { display: none; }
@media (min-width: 1320px) {
  .fx-chapters { display: block; position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 8; background: color-mix(in srgb, var(--navy-deep) 88%, transparent); border-radius: 22px; padding: 8px 0; }
  .fx-chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .fx-chapters a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
  .fx-chapters a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-night-muted); transition: transform .2s, background .2s; }
  .fx-chapters a[aria-current="true"]::before { background: var(--sand); transform: scale(1.5); }
  .fx-chapters a:hover::before, .fx-chapters a:focus-visible::before { background: var(--white); }
  .fx-chapters a:focus-visible { outline: 2px solid var(--on-night); outline-offset: 1px; }
  .fx-chapters span { position: absolute; right: 52px; white-space: nowrap; font-size: 14px; color: var(--on-night); background: color-mix(in srgb, var(--navy-deep) 95%, transparent); padding: 5px 11px; border-radius: 10px; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .2s, transform .2s; }
  .fx-chapters a:hover span, .fx-chapters a:focus-visible span { opacity: 1; transform: none; }
}