/* Graskind-Welt – Kapitel poster: Regeln für den Welt-Modus (.has-world [data-world="ready"] …) und Szenen-Ergänzungen. */

/* ---------- Planetenleiste als Schaltflächen (DOM-Fassung und Welt) ---------- */
.ps__rail-btn {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 4px;
}
.ps__rail-btn::after { content: ""; position: absolute; inset: 0 -.5rem 0 -1.7rem; }   /* Trefferfläche inkl. Punkt */
.ps__rail-btn:hover { color: #fff; }
.ps__rail-btn:focus-visible { outline: 2px solid var(--gk-yellow); outline-offset: 3px; }

/* ---------- Welt-Modus ---------- */
/* DOM-Himmel, Morgenlicht und Bühnenbilder ruhen – die Leinwand zeigt das All */
.has-world #poster[data-world="ready"]::before,
.has-world #poster[data-world="ready"]::after { opacity: 0; transition: opacity .6s ease; }
.has-world #poster[data-world="ready"] .ps__sky { visibility: hidden; }
/* Poster-Links bleiben per Tastatur erreichbar; sichtbar nur bei Fokus */
.has-world #poster[data-world="ready"] .ps__poster,
.has-world #poster[data-world="ready"] .ps__kitchen { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.has-world #poster[data-world="ready"] .ps__poster:focus-within,
.has-world #poster[data-world="ready"] .ps__kitchen:focus-within { opacity: 1; pointer-events: auto; }
.has-world #poster[data-world="ready"] .ps__kitchen li { --k: 1; }

/* Leiste: dunkles Papierschild über dem All */
.has-world #poster[data-world="ready"] .ps__rail {
  opacity: 1; padding: .7rem .9rem .7rem 1.9rem; border-left: 0; gap: .05rem;
  background: rgba(8, 16, 34, .58); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .5s ease, transform .5s var(--ease-out, ease);
}
.has-world #poster[data-world="ready"] .ps__rail::before {   /* Bahnlinie */
  content: ""; position: absolute; left: calc(1.9rem - 1.1rem); top: 1.05rem; bottom: 1.05rem; width: 2px;
  background: linear-gradient(rgba(255, 200, 1, .6), rgba(173, 213, 175, .35)); border-radius: 2px;
}
.has-world #poster[data-world="ready"] .ps__rail li { color: rgba(238, 241, 244, .72); transition: color .3s, transform .3s var(--ease-out, ease); }
.has-world #poster[data-world="ready"] .ps__rail li.is-active { color: #fff; transform: translateX(3px); }
.has-world #poster[data-world="ready"] .ps__rail li.is-active .ps__rail-btn { font-weight: 800; }
/* Küchenposter-Phase: Leiste tritt zurück (per Tastatur weiter erreichbar und dann sichtbar) */
.has-world #poster[data-world="ready"] [data-phase="kitchen"] .ps__rail { opacity: 0; transform: translateX(14px); pointer-events: none; }
.has-world #poster[data-world="ready"] [data-phase="kitchen"] .ps__rail:focus-within { opacity: 1; transform: none; pointer-events: auto; }

/* Mehr Scrollweg für den Flug durch das System (nur Welt-Modus) */
/* Mehr Scrollweg für die Planetentour (Tempo siehe poster.js: tl/pace) */
.has-world #poster[data-world="ready"] .step--action { margin-top: 480vh; margin-top: 480svh; }

/* Beschriftungen der Himmelskörper und Poster */
.world-label.poster-label {
  padding: .2rem .6rem .2rem .5rem; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  color: #F3EADA; background: rgba(8, 16, 34, .72);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(243, 234, 218, .22);
}
.world-label.poster-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .4rem .1rem 0; border-radius: 50%;
  background: #ADD5AF; vertical-align: middle;
}
.world-label.poster-label.is-focus { color: #1E1A0C; background: #FFC801; box-shadow: 0 6px 20px rgba(255, 200, 1, .35); }
.world-label.poster-label.is-focus::before { background: #04785C; }
.world-label.poster-label--sun::before { background: #FFC801; }
.world-label.poster-label--product {
  text-transform: none; letter-spacing: 0; font-size: .74rem; white-space: pre-line; max-width: 11.5rem; text-align: center; line-height: 1.25;
  border-radius: 12px; padding: .3rem .65rem;
  color: var(--ink, #1B1A16); background: rgba(243, 234, 218, .94); box-shadow: 0 6px 18px rgba(30, 20, 10, .25);
}
.world-label.poster-label--product::before { background: #04785C; }
.world-label.poster-label--product.is-focus { background: #FFC801; }
.world-label.poster-label--product::before { margin-bottom: .12rem; }
.world-label.poster-label--lens { font-size: .7rem; white-space: nowrap; max-width: none; }

@media (max-width: 900px) {
  /* Mobil: Leiste als schmale Reihe oben, wischbar */
  .has-world #poster[data-world="ready"] .ps__rail {
    left: 3vw; right: 3vw; top: calc(var(--header-h, 64px) + 14px);
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .2rem; padding: .35rem .45rem;
    font-size: .74rem; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  }
  .has-world #poster[data-world="ready"] .ps__rail::-webkit-scrollbar { display: none; }
  .has-world #poster[data-world="ready"] .ps__rail::before { display: none; }
  .has-world #poster[data-world="ready"] .ps__rail li { flex: none; padding: 0; }
  .has-world #poster[data-world="ready"] .ps__rail li::before { display: none; }
  .has-world #poster[data-world="ready"] .ps__rail li.is-active { transform: none; }
  .has-world #poster[data-world="ready"] .ps__rail-btn { padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; }
  .has-world #poster[data-world="ready"] .ps__rail-btn::after { inset: 0; }
  .has-world #poster[data-world="ready"] .ps__rail li.is-active .ps__rail-btn { background: #FFC801; color: #1E1A0C; }
  .has-world #poster[data-world="ready"] .step--action { margin-top: 470svh; }
  .world-label.poster-label { font-size: .66rem; }
  .world-label.poster-label--lens { white-space: normal; max-width: 8.5rem; }
}