/* ═══════════════════════════════════════════════════════════
   Seiten-CSS, Saunabau
   Eigenes Bauteil: Wärme-Farbwechsel (.warmzone). Die Seite wandert
   beim Scrollen von Marineblau in warme Bernsteintöne, nur der
   Hintergrund dieser einen Zone, nicht Kopfzeile, Fusszeile oder
   Schaltflächen. Gesteuert über die CSS-Variable --mix (0 bis 1),
   die sauna.js per ScrollTrigger-Scrub setzt (liest nur, hijackt nicht).
   ═══════════════════════════════════════════════════════════ */

.warmzone{
  --mix:0;                 /* 0 = Marineblau (--abyss), 1 = Bernstein */
  --warm:#6E4322;
  background:var(--abyss); /* Fallback ohne JS/Custom-Property-Interpolation */
}
.warmzone .sec{
  background:color-mix(in oklab, var(--abyss) calc(100% - var(--mix) * 100%), var(--warm) calc(var(--mix) * 100%));
  color:#fff;
}

/* Textfarben wie .sec--dark, hier ohne die Klasse zu duplizieren */
.warmzone .kicker{color:var(--accent)}
.warmzone .h2{color:#fff}
.warmzone .sec__lead{color:rgba(255,255,255.76)}
.warmzone .duo__txt>*+*{margin-top:1.1rem}

.warmzone .checks [data-ico]{color:var(--accent)}
.warmzone .checks strong{color:#fff}
.warmzone .checks p{color:rgba(255,255,255.74)}

.warmzone .steps li{background:rgba(255,255,255.06); border-color:rgba(255,255,255.16)}
.warmzone .steps p{color:rgba(255,255,255.72)}

.warmzone .duo__media img{border-radius:var(--r); box-shadow:0 30px 60px -30px rgba(0,0,0.5)}

@medianot all{
  /* Ohne Bewegung: ruhiger Mittelton statt Sprung zwischen den Extremen */
  .warmzone{--mix:.55}
}