/* ==========================================================================
   Graskind-Welt – Rahmen für die WebGL-Leinwand (nur Startseite).
   Ohne .has-world gilt ausschließlich die DOM-Fassung (ohne JS, reduzierte
   Bewegung, kein WebGL2, Fehler). Kapitelspezifisches: assets/css/world/<kapitel>.css
   Selektor-Konvention: .has-world [data-world="ready"] … – greift nur, wenn die
   Station der Sektion erfolgreich aufgebaut wurde.
   ========================================================================== */

canvas.world {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity .9s var(--ease-out, ease);
}
.has-world canvas.world { opacity: 1; }

.world-labels { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.world-label {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  padding: .28rem .6rem; border-radius: 999px;
  font: 700 .82rem/1.2 var(--font, "Onest"), system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
  color: var(--ink); background: rgba(251, 247, 238, .92); box-shadow: 0 4px 14px rgba(20, 30, 20, .18);
  opacity: 0; transition: opacity .25s linear; will-change: transform, opacity;
}

/* Inhalt liegt über der Leinwand */
.has-world main, .has-world .site-footer { position: relative; z-index: 1; }
.has-world .hero[data-world="ready"],
.has-world .chapter[data-world="ready"] {
  background: transparent; transition: background-color .9s ease;
}
.has-world .chapter[data-world="ready"] > .deckle,
.has-world .hero[data-world="ready"] .hero__meadow { opacity: 0; transition: opacity .6s ease; }

/* Bühnen-Bedienelemente (Chips, Tabs, Leisten) während der Flüge zwischen den Kapiteln ausblenden */
.has-world .chapter[data-world="ready"] .chapter__stage > * { transition: opacity .35s ease; }
.has-world .chapter[data-world="ready"]:not([data-world-settled]) .chapter__stage > * { opacity: 0; pointer-events: none; }

/* Bühne: Zeigerereignisse für die Welt, senkrechtes Wischen bleibt Scrollen */
.has-world [data-world="ready"] .chapter__stage,
.has-world [data-world="ready"] .hero__stage { touch-action: pan-y; }
.world-hover, .world-hover body { cursor: pointer; }

/* Textschritte als Papierkarten, damit sie auf der Landschaft lesbar bleiben (Desktop) */
@media (min-width: 901px) {
  .has-world .chapter[data-world="ready"] .step {
    min-height: 0; margin: 24vh 0; margin: 24svh 0;
    padding: clamp(1.5rem, 2.4vw, 2.3rem) clamp(1.5rem, 2.6vw, 2.5rem);
    border-radius: 26px;
    background: rgba(251, 247, 238, .93);
    box-shadow: 0 18px 50px rgba(24, 34, 20, .16), 0 2px 6px rgba(24, 34, 20, .08);
  }
  .has-world .chapter[data-world="ready"] .step--intro { margin-top: 36vh; margin-top: 36svh; }
  .has-world .chapter[data-world="ready"] .step:last-child { margin-bottom: 40vh; margin-bottom: 40svh; }
  .has-world .chapter.on-dark[data-world="ready"] .step { background: rgba(10, 20, 38, .84); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
}

/* Bei reduzierter Bewegung gibt es keine Welt – zur Sicherheit */
.reduce-motion canvas.world, .reduce-motion .world-labels { display: none; }