/* =========================================================
   Komorebi Studio – Themenwelten
   Atmosphärisch, tief, parallaktisch.
   ========================================================= */

:root {
  --c-ink:        #f6efe1;
  --c-ink-dim:    #d9cfb8;
  --c-gold:       #f3c97a;
  --c-gold-soft:  #e9b86a;
  --c-night:      #0d1419;
  --c-night-deep: #060a0e;
  --c-veil:       rgba(8, 12, 16, 0.55);

  --font-serif:  "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-soft:   cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--c-night-deep);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Globale Atmosphäre / Vignette / Korn ---------- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
body::before {
  /* Sehr weiche Tiefen-Vignette – nur die äußersten Ecken minimal abdunkeln */
  background: radial-gradient(ellipse at 50% 50%,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0) 65%,
              rgba(0,0,0,0.30) 95%,
              rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}
body::after {
  /* Filmkorn */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .35;
  mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Typografie ---------- */
h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.15; }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }

p  { line-height: 1.7; color: var(--c-ink-dim); max-width: 60ch; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: .72rem;
  color: var(--c-gold);
  font-family: var(--font-sans);
  font-weight: 500;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(6,10,14,.6), rgba(6,10,14,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav__brand {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-serif);
  font-size: 1.25rem; letter-spacing: .14em;
  text-transform: uppercase;
}
.nav__brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nav__links { display: flex; gap: 1.6rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }
.nav__links a { opacity: .7; transition: opacity .3s var(--ease-soft); }
.nav__links a:hover { opacity: 1; color: var(--c-gold); }

/* ---------- Audio Toggle ---------- */
.audio-toggle {
  position: fixed;
  bottom: 1.6rem; right: 1.6rem;
  z-index: 100;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(243, 201, 122, .35);
  background: rgba(6, 10, 14, .6);
  backdrop-filter: blur(8px);
  color: var(--c-gold);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .4s var(--ease-soft), border-color .4s, background .4s;
}
.audio-toggle:hover { transform: scale(1.08); border-color: var(--c-gold); }
.audio-toggle.is-playing { animation: pulse 2.4s ease-in-out infinite; }
.audio-toggle svg { width: 20px; height: 20px; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,201,122,.35); }
  50%      { box-shadow: 0 0 0 16px rgba(243,201,122,0);  }
}

/* =========================================================
   HERO – Parallax-Bühne (Rellax steuert die Layer)
   ========================================================= */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #04080b;
  isolation: isolate;
}
.stage__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Sanfter Boden-Schatten, fest an die Bühne gebunden – nicht parallax */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%,   rgba(0,0,0,.30) 0%, transparent 50%);
  z-index: 4;
}
.layer {
  position: absolute;
  /* Über die Bühne hinaus, damit Rellax die Layer translaten kann ohne Kanten zu zeigen */
  top: -30%;
  left: -10%;
  right: -10%;
  bottom: -30%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

.stage__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  z-index: 10;
}
.stage__caption .eyebrow { margin-bottom: 1.2rem; }
.stage__caption h1 {
  text-shadow: 0 4px 36px rgba(0,0,0,.7);
  background: linear-gradient(180deg, #fff8e7 0%, #f3c97a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stage__caption .lede {
  margin-top: 1.4rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--c-ink);
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
}

.scroll-cue {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  opacity: .8;
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 1px; height: 48px;
  margin: .8rem auto 0;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================
   Worlds Index – Karten der Themenwelten
   ========================================================= */
.intro {
  padding: clamp(6rem, 12vw, 10rem) 1.5rem 4rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.intro p { margin: 1.4rem auto 0; }

.worlds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.4rem;
  padding: 2rem clamp(1.2rem, 4vw, 3rem) 8rem;
  perspective: 1600px;
}

.world-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-soft), box-shadow .8s var(--ease-soft);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  cursor: pointer;
}
.world-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(6,10,14,0)   0%,
              rgba(6,10,14,.2)  45%,
              rgba(6,10,14,.92) 100%);
  z-index: 2;
  transition: opacity .6s var(--ease-soft);
}
.world-card__bg {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center;
  transition: transform 1.6s var(--ease-soft), filter 1.2s var(--ease-soft);
  filter: saturate(.85) brightness(.85);
}
.world-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.8rem 2.2rem;
  z-index: 3;
  transform: translateZ(40px);
}
.world-card__body h3 {
  font-size: 1.9rem;
  margin-bottom: .4rem;
  color: var(--c-ink);
}
.world-card__body p {
  font-size: .92rem;
  color: var(--c-ink-dim);
  opacity: 0;
  max-height: 0;
  transition: opacity .5s var(--ease-soft), max-height .5s var(--ease-soft), margin .5s;
}
.world-card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-gold);
  border-bottom: 1px solid rgba(243,201,122,.4);
  padding-bottom: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s .1s var(--ease-soft), transform .5s .1s var(--ease-soft);
}

.world-card:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(243,201,122,.15);
}
.world-card:hover .world-card__bg {
  transform: scale(1.08);
  filter: saturate(1.05) brightness(1);
}
.world-card:hover .world-card__body p {
  opacity: 1; max-height: 200px; margin-top: .6rem;
}
.world-card:hover .world-card__cta { opacity: 1; transform: translateY(0); }

/* =========================================================
   Themenwelt-Page (Subpages)
   ========================================================= */
.world-stage { height: 100vh; }

.world-content {
  position: relative;
  z-index: 3;
  padding: clamp(5rem, 10vh, 9rem) clamp(1.2rem, 6vw, 6rem) 8rem;
  background:
    linear-gradient(180deg,
      rgba(6,10,14,0)   0%,
      rgba(6,10,14,.92) 18%,
      rgba(6,10,14,1)   100%);
}
.world-content section {
  max-width: 760px;
  margin: 0 auto 5rem;
}
.world-content section.wide { max-width: 1100px; }

.chapter-num {
  font-family: var(--font-serif);
  font-size: 5rem;
  color: rgba(243,201,122,.18);
  line-height: 1;
  margin-bottom: -1.6rem;
  user-select: none;
}

.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  color: var(--c-ink);
  text-align: center;
  border-top: 1px solid rgba(243,201,122,.18);
  border-bottom: 1px solid rgba(243,201,122,.18);
  padding: 2.4rem 1rem;
  margin: 4rem auto !important;
  max-width: 720px !important;
}

.tracklist {
  list-style: none;
  border-top: 1px solid rgba(243,201,122,.15);
}
.tracklist li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem .4rem;
  border-bottom: 1px solid rgba(243,201,122,.08);
  color: var(--c-ink-dim);
  transition: padding .4s var(--ease-soft), color .4s;
  cursor: default;
}
.tracklist li:hover { padding-left: 1rem; color: var(--c-ink); }
.tracklist .num   { color: var(--c-gold); font-family: var(--font-serif); font-size: 1.1rem; min-width: 2.5rem; }
.tracklist .title { flex: 1; font-family: var(--font-serif); font-size: 1.15rem; }
.tracklist .time  { font-size: .8rem; opacity: .6; }

.back-link {
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 4rem;
  letter-spacing: .3em; text-transform: uppercase;
  font-size: .78rem;
  color: var(--c-gold);
}
.back-link::before { content: "←"; transition: transform .4s var(--ease-soft); }
.back-link:hover::before { transform: translateX(-4px); }

/* ---------- Floating Specks (Pollen / Light Dust) ---------- */
.specks {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.speck {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,232,180,.9), rgba(255,232,180,0) 70%);
  animation: float linear infinite;
}
@keyframes float {
  0%   { transform: translate3d(0, 110vh, 0) scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(40px, -10vh, 0) scale(1); opacity: 0; }
}

/* ---------- Footer ---------- */
.foot {
  position: relative;
  z-index: 3;
  padding: 3rem 1.5rem 2.4rem;
  font-size: .76rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(217, 207, 184, .55);
  border-top: 1px solid rgba(243,201,122,.08);
}
.foot__cols {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.foot__brand { margin: 0; }
.foot__links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.foot__links a {
  color: rgba(217,207,184,.7);
  transition: color .3s var(--ease-soft);
}
.foot__links a:hover { color: var(--c-gold); }
@media (max-width: 640px) {
  .foot__cols { flex-direction: column; text-align: center; }
}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 9rem 1.5rem 5rem;
  position: relative;
  z-index: 2;
}
.legal h1 {
  margin: .8rem 0 2.4rem;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.legal__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--c-ink);
  margin-bottom: 2.4rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(243,201,122,.4);
}
.legal h2 {
  margin: 2.6rem 0 .8rem;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--c-gold);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.legal p, .legal ul {
  color: var(--c-ink-dim);
  line-height: 1.75;
  margin-bottom: 1rem;
  max-width: 65ch;
}
.legal ul { padding-left: 1.4rem; }
.legal ul li { margin-bottom: .4rem; }
.legal a {
  color: var(--c-gold);
  border-bottom: 1px solid rgba(243,201,122,.3);
  transition: border-color .3s var(--ease-soft);
}
.legal a:hover { border-bottom-color: var(--c-gold); }
.legal__back {
  margin-top: 3rem;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- Cookie Banner ---------- */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.2rem 1.4rem 1.3rem;
  background: rgba(13, 20, 25, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(243,201,122,.18);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  color: var(--c-ink);
  font-size: .86rem;
  line-height: 1.55;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .55s var(--ease-soft), opacity .55s var(--ease-soft);
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin-bottom: .4rem;
  color: var(--c-gold);
}
.cookie-banner__text {
  color: var(--c-ink-dim);
  font-size: .82rem;
  margin-bottom: .9rem;
}
.cookie-banner__text a {
  color: var(--c-gold);
  border-bottom: 1px solid rgba(243,201,122,.3);
}
.cookie-banner__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.cookie-banner__btn {
  flex: 1 1 auto;
  min-width: 130px;
  padding: .65rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s var(--ease-soft), background .3s var(--ease-soft);
}
.cookie-banner__btn--accept {
  background: var(--c-gold);
  color: #1a1208;
  border: 1px solid var(--c-gold);
}
.cookie-banner__btn--accept:hover { transform: translateY(-1px); }
.cookie-banner__btn--decline {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid rgba(243,201,122,.35);
}
.cookie-banner__btn--decline:hover { border-color: var(--c-gold); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .stage__layers, .layer { transform: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .chapter-num { font-size: 3.4rem; }
  .world-card__body p { opacity: 1; max-height: 200px; margin-top: .6rem; }
  .world-card__cta    { opacity: 1; transform: none; }
}

/* =========================================================
   THEMING – pro Welt eigene Farb- und Lichtidentität
   ========================================================= */

/* Layer-Klassen für eindeutige Komposition */
.layer--cover {
  /* das eigentliche Cover-Bild – soll sichtbar bleiben */
  background-size: cover;
  background-position: center;
  filter: brightness(.95) saturate(1.05) contrast(1.05);
}
.layer--cover-far {
  /* Hintergrund-Echo, weichgezeichnet – aber hell genug, um Stimmung zu zeigen */
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(.85) saturate(1.1);
  opacity: .95;
}
.layer--tint {
  mix-blend-mode: screen;
}
.layer--shade {
  /* Dezenter, GANZFLÄCHIGER Vorder-Schleier, kein dunkler Innenrahmen mehr.
     Die eigentliche Bühnen-Vignette übernimmt .stage::after. */
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255,236,200,.04) 0%, transparent 65%);
  mix-blend-mode: screen;
  opacity: .6;
}

/* Akzent-Linien pro Themenwelt */
.world-content section {
  position: relative;
}
.world-content .chapter-num {
  display: inline-block;
}

/* ---------- I · Komorebi Forest ---------- */
.world--forest {
  --c-gold:      #f4d68b;
  --c-gold-soft: #e9b86a;
  --c-accent:    #a8c879;
  --c-deep:      #0c1410;
}
.world--forest .stage__caption h1 {
  background: linear-gradient(180deg, #fff8d8 0%, #f4c97a 60%, #cf9a3a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Sonnenstrahlen-Layer */
.fx-sunrays {
  background:
    conic-gradient(from 200deg at 50% 18%,
      rgba(255,225,150,0)   0deg,
      rgba(255,225,150,.18) 12deg,
      rgba(255,225,150,0)   24deg,
      rgba(255,225,150,.10) 38deg,
      rgba(255,225,150,0)   54deg,
      rgba(255,225,150,.22) 70deg,
      rgba(255,225,150,0)   90deg);
  mix-blend-mode: screen;
  opacity: .9;
  animation: rays-drift 22s ease-in-out infinite alternate;
}
@keyframes rays-drift {
  0%   { transform: rotate(-2deg) scale(1.05); opacity: .75; }
  100% { transform: rotate( 3deg) scale(1.12); opacity: 1;   }
}

/* ---------- II · Golden Dawn (Komorebi Sunrise) ---------- */
.world--dawn {
  --c-gold:      #ffd779;
  --c-gold-soft: #f0b758;
  --c-accent:    #ffe9a8;
  --c-deep:      #2a1f0e;
}
.world--dawn .stage__caption h1 {
  background: linear-gradient(180deg, #fff5cf 0%, #ffd779 55%, #c98a32 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Sonnen-Halo: pulsierend, warm, sehr präsent */
.fx-sunburst {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,235,160,.65) 0%, rgba(255,235,160,0) 32%),
    radial-gradient(circle at 50% 30%, rgba(255,200,110,.55) 0%, rgba(255,200,110,0) 18%);
  mix-blend-mode: screen;
  animation: sunburst 6s ease-in-out infinite alternate;
}
@keyframes sunburst {
  0%   { transform: scale(1);    opacity: .85; }
  100% { transform: scale(1.08); opacity: 1;   }
}
/* Längere, leuchtendere Sonnenstrahlen */
.fx-rays-bright {
  background:
    conic-gradient(from 195deg at 50% 28%,
      rgba(255,225,150,0)   0deg,
      rgba(255,225,150,.32) 10deg,
      rgba(255,225,150,0)   22deg,
      rgba(255,225,150,.18) 36deg,
      rgba(255,225,150,0)   54deg,
      rgba(255,225,150,.36) 72deg,
      rgba(255,225,150,0)   92deg);
  mix-blend-mode: screen;
  animation: rays-drift 18s ease-in-out infinite alternate;
}

/* ---------- III · Coastal Whispers ---------- */
.world--coast {
  --c-gold:      #d8e2ea;
  --c-gold-soft: #b5c7d4;
  --c-accent:    #88aabd;
  --c-deep:      #0e1822;
}
.world--coast .stage__caption h1 {
  background: linear-gradient(180deg, #ffffff 0%, #d8e2ea 55%, #88aabd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.world--coast .quote { border-color: rgba(216,226,234,.22); }
/* Wasser-Reflektion / Horizont-Glow */
.fx-tide {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0)    55%,
      rgba(180,210,230,.16)  62%,
      rgba(180,210,230,0)    68%,
      rgba(180,210,230,.10)  74%,
      rgba(180,210,230,0)    80%);
  mix-blend-mode: screen;
  animation: tide 9s ease-in-out infinite alternate;
}
@keyframes tide {
  0%   { transform: translate3d(0, .6%, 0) scaleY(1.0); opacity: .85; }
  100% { transform: translate3d(0, -.4%, 0) scaleY(1.04); opacity: 1; }
}

/* ---------- IV · Jungle Temple ---------- */
.world--jungle {
  --c-gold:      #f4a45a;
  --c-gold-soft: #d3823a;
  --c-accent:    #b86a2e;
  --c-deep:      #0a120a;
}
.world--jungle .stage__caption h1 {
  background: linear-gradient(180deg, #ffd9a8 0%, #f4a45a 55%, #a85a1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Feuerflackern + Rauch-Schwaden */
.fx-fire {
  background:
    radial-gradient(circle at 18% 78%, rgba(255,140,40,.55) 0%, rgba(255,140,40,0) 16%),
    radial-gradient(circle at 82% 78%, rgba(255,140,40,.55) 0%, rgba(255,140,40,0) 16%),
    radial-gradient(circle at 50% 92%, rgba(255,90,20,.35)  0%, rgba(255,90,20,0)  20%);
  mix-blend-mode: screen;
  animation: flicker 2.6s ease-in-out infinite alternate;
}
@keyframes flicker {
  0%   { opacity: .75; transform: translateY(0)   scale(1);    }
  35%  { opacity: 1;   transform: translateY(-1%) scale(1.02); }
  60%  { opacity: .85; transform: translateY(.5%) scale(.99);  }
  100% { opacity: 1;   transform: translateY(-.5%) scale(1.03);}
}
.fx-smoke {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(220,210,200,.18) 0%, rgba(220,210,200,0) 40%),
    radial-gradient(ellipse at 70% 55%, rgba(220,210,200,.14) 0%, rgba(220,210,200,0) 38%);
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: smoke 18s ease-in-out infinite alternate;
}
@keyframes smoke {
  0%   { transform: translate3d(-3%,  1%, 0) scale(1.05); opacity: .6; }
  100% { transform: translate3d( 4%, -2%, 0) scale(1.15); opacity: .9; }
}

/* ---------- V · Amber Memories ---------- */
.world--amber {
  --c-gold:      #ffb866;
  --c-gold-soft: #d68f3a;
  --c-accent:    #8a4a18;
  --c-deep:      #160d06;
}
.world--amber .stage__caption h1 {
  background: linear-gradient(180deg, #ffe1b0 0%, #ffb866 55%, #8a4a18 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Bernstein-Glühen */
.fx-amber-glow {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,170,80,.45) 0%, rgba(255,170,80,0) 35%),
    radial-gradient(circle at 30% 60%, rgba(255,140,40,.20) 0%, transparent 28%),
    radial-gradient(circle at 70% 45%, rgba(255,200,120,.22) 0%, transparent 26%);
  mix-blend-mode: screen;
  animation: amber-pulse 7s ease-in-out infinite alternate;
}
@keyframes amber-pulse {
  0%   { opacity: .75; transform: scale(1);    }
  100% { opacity: 1;   transform: scale(1.06); }
}

/* ---------- Per-World Akzente: Eyebrow, Tracklist, Chapter ---------- */
.world--forest .eyebrow,
.world--dawn   .eyebrow,
.world--coast  .eyebrow,
.world--jungle .eyebrow,
.world--amber  .eyebrow,
.world--forest .tracklist .num,
.world--dawn   .tracklist .num,
.world--coast  .tracklist .num,
.world--jungle .tracklist .num,
.world--amber  .tracklist .num,
.world--forest .back-link,
.world--dawn   .back-link,
.world--coast  .back-link,
.world--jungle .back-link,
.world--amber  .back-link {
  color: var(--c-gold);
}
.world--coast .chapter-num  { color: rgba(216,226,234,.18); }
.world--jungle .chapter-num { color: rgba(244,164,90,.18);  }
.world--amber  .chapter-num { color: rgba(255,184,102,.20); }
.world--dawn   .chapter-num { color: rgba(255,215,121,.26); }
.world--forest .chapter-num { color: rgba(244,214,139,.20); }

/* Audio-Toggle übernimmt Welten-Akzent */
.audio-toggle { color: var(--c-gold); border-color: rgba(243,201,122,.35); }
.world--coast  .audio-toggle { border-color: rgba(216,226,234,.35); }
.world--jungle .audio-toggle { border-color: rgba(244,164,90,.35);  }
.world--amber  .audio-toggle { border-color: rgba(255,184,102,.35); }

/* =========================================================
   Welten-spezifische Deko (im world-content)
   ========================================================= */

/* Trennlinie mit Welt-Glyph */
.glyph {
  display: flex; align-items: center; justify-content: center;
  gap: 1.4rem;
  margin: 4rem auto;
  color: var(--c-gold);
  opacity: .7;
  font-family: var(--font-serif);
  letter-spacing: .5em;
  text-transform: uppercase;
  font-size: .72rem;
}
.glyph::before, .glyph::after {
  content: ""; flex: 1; max-width: 120px;
  height: 1px; background: linear-gradient(to right, transparent, currentColor, transparent);
}

/* Atmosphäre-Liste (drei kurze Spalten mit Stimmungs-Notes) */
.atmos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}
.atmos__item {
  border-top: 1px solid rgba(243,201,122,.2);
  padding-top: 1rem;
}
.atmos__item .eyebrow { display: block; margin-bottom: .6rem; }
.atmos__item h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: .4rem;
  color: var(--c-ink);
}
.atmos__item p { font-size: .9rem; }

/* Großes Cover-Bildband mit Zoom-Parallax */
.cover-band {
  position: relative;
  height: 70vh;
  margin: 6rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(243,201,122,.12);
  border-bottom: 1px solid rgba(243,201,122,.12);
}
.cover-band__img {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 1.2s var(--ease-soft);
}
.cover-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(6,10,14,.4) 0%,
              rgba(6,10,14,0)  30%,
              rgba(6,10,14,0)  70%,
              rgba(6,10,14,.6) 100%);
  pointer-events: none;
}
.cover-band__caption {
  position: absolute; left: 0; right: 0; bottom: 2rem;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--c-ink-dim);
  z-index: 2;
  padding: 0 1.5rem;
}