/* Graskind – Kapitel D2 · Ozean-Poster „Blaue Tiefen“ (inc/sections/ozean.php).
 * DOM-Fassung (ohne 3D): Poster in einem tiefer werdenden Wasserbecken, Tiefenzonen daneben.
 * Welt-Modus: assets/js/world/scenes/ozean.js – Bühnenbilder weichen, Texte liegen als dunkle Karten darüber.
 */
.chapter--ozean {
  --chapter-bg: #0B2A4A; color: #EEF4F6;
  background-image: linear-gradient(180deg, #2A8CA0 0%, #1A6587 22%, #0B2A4A 60%, #030A18 100%);
}
.chapter--ozean .kicker { color: #EEF4F6; }
.chapter--ozean .kicker__num { background: var(--gk-green-light); color: var(--gk-green-ink); }
.chapter--ozean .lead, .chapter--ozean p { color: rgba(238, 244, 246, .86); }
.chapter--ozean .facts li::before { background: #7FD8E6; }
.chapter--ozean a:not(.btn) { color: var(--gk-green-light); }

.oz { position: absolute; inset: 0; overflow: clip; }
.oz__water {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(255, 255, 255, .22), transparent 70%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 46px);
}
.oz__poster { position: absolute; left: 50%; top: 50%; margin: 0; width: min(22cqw, 30cqh); translate: -50% -50%; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45)); }
.oz__poster a { display: block; border-radius: 4px; }
.oz__poster img { width: 100%; height: auto; }
.oz__zones {
  position: absolute; right: 4cqw; top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none;
  display: grid; gap: .5rem; font-size: .86rem;
}
.oz__zones li { padding: .35rem .7rem; border-radius: 999px; background: rgba(4, 18, 34, .55); box-shadow: inset 0 0 0 1px rgba(127, 216, 230, .25); }
.oz__zone { font-weight: 700; }
.oz__depth { opacity: .75; margin-left: .3rem; }
.oz__fish { position: absolute; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.oz__fish img { width: 100%; height: auto; }
.oz__fish--clown { width: min(9cqw, 110px); left: 12cqw; top: 22cqh; }
.oz__fish--hai { width: min(20cqw, 260px); left: 6cqw; top: 62cqh; opacity: .9; }
.motion-ok .oz__fish--clown { animation: oz-swim 7s ease-in-out infinite alternate; }
.motion-ok .oz__fish--hai { animation: oz-swim 11s ease-in-out infinite alternate-reverse; }
@keyframes oz-swim { from { transform: translate(0, 0); } to { transform: translate(5cqw, -2cqh); } }

/* Mittlere Breiten: Zonen stehen ohnehin in der Textkarte → Bühne zeigt nur das Poster */
@media (min-width: 901px) and (max-width: 1279px) {
  .oz__zones { display: none; }
}
@media (max-width: 900px) {
  /* Textkarten dunkel wie im Poster-Kapitel (sonst helle Schrift auf heller Karte) */
  .chapter--ozean .step { background: rgba(4, 18, 34, .92); color: #EEF4F6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-2); }
  .oz__poster { width: min(36cqw, 26cqh); top: 40%; }
  .oz__zones { right: auto; left: 50%; top: auto; bottom: 4cqh; translate: -50% 0; grid-template-columns: repeat(2, auto); font-size: .76rem; display: none; }
  .oz__fish--clown { left: 6cqw; top: 16cqh; }
  .oz__fish--hai { left: 54cqw; top: 58cqh; width: 38cqw; }
}

/* ---------- Welt-Modus ---------- */
.has-world #ozean[data-world="ready"] { background: transparent; }
.has-world #ozean[data-world="ready"] .oz > * { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
/* Längerer Scrollweg für den Tauchgang (Ablauf siehe scenes/ozean.js) */
.has-world #ozean[data-world="ready"] .step:not(.step--intro) { margin-top: 110vh; margin-top: 110svh; }
.has-world #ozean[data-world="ready"] .step--action { margin-top: 150vh; margin-top: 150svh; }
.has-world #ozean[data-world="ready"] .step:last-child { margin-bottom: 70vh; margin-bottom: 70svh; }
@media (min-width: 901px) {
  .has-world #ozean[data-world="ready"] .step { background: rgba(4, 18, 34, .82); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
}
@media (max-width: 900px) {
  .has-world #ozean[data-world="ready"] .step { background: rgba(4, 18, 34, .9); color: #EEF4F6; }
}

/* Beschriftungen im Wasser */
.world-label.oz-label { background: rgba(4, 18, 34, .78); color: #DFF6FA; box-shadow: 0 0 0 1px rgba(127, 216, 230, .35), 0 6px 18px rgba(0, 0, 0, .35); font-size: .8rem; }
.world-label.oz-label--zone { background: rgba(127, 216, 230, .92); color: #05243A; font-weight: 800; }
.world-label.oz-label--depth { background: rgba(4, 18, 34, .88); color: #FFE59A; font-variant-numeric: tabular-nums; font-size: .9rem; padding: .32rem .75rem; }
.world-label.oz-label--product { background: rgba(251, 247, 238, .95); color: var(--ink); }