/* ============================================================
   OTR | otr-atmo.css | Version 1.0.0 | 2026-07-06
   Atmosphäre-Layer: Sonnenlauf-Keyart im Hero, Tiefe (Vignette/
   Parallax), Ornament-Divider, warmes Glühen, Wasserzeichen,
   Sekundärfarben. Setzt otr-base.css + otr-components.css voraus.
   Deckung: BRAND_OTR.md Sektion 6 (Grafische Elemente) + Palette.
   Nur Variablen aus otr-base.css — kein Hardcode ausser Scrim-RGBA
   (bewusst, da halbtransparente Near-Black-Abstufungen).
   ============================================================ */

/* --- 1 · Hero-Keyart (Sonnenlauf) --------------------------- */
/* Seite setzt das Bild per Inline-Variable:
   <header class="hero X-hero hero-key" style="--hero-key:url('/_assets/keyart/hub.jpg')"> */
.hero-key { position: relative; overflow: hidden; }
.hero-key::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    /* Text-Scrim links (Text ist überall linksbündig) */
    linear-gradient(90deg, rgba(36,28,18,0.80) 0%, rgba(36,28,18,0.46) 34%, rgba(36,28,18,0.12) 58%, rgba(36,28,18,0) 80%),
    /* Vignette – Tiefe an den Rändern */
    radial-gradient(125% 135% at 50% 42%, rgba(36,28,18,0) 54%, rgba(36,28,18,0.60) 100%),
    /* nahtloser Übergang nach unten in die Seite */
    linear-gradient(0deg, var(--otr-near-black) 1%, rgba(36,28,18,0) 30%),
    var(--hero-key);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-key::after { background-attachment: fixed, fixed, fixed, fixed; }
}
.hero-key > .container { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .hero-key::after {
    background:
      linear-gradient(0deg, var(--otr-near-black) 16%, rgba(36,28,18,0.5) 62%, rgba(36,28,18,0.72) 100%),
      radial-gradient(140% 120% at 50% 34%, rgba(36,28,18,0) 46%, rgba(36,28,18,0.6) 100%),
      var(--hero-key);
    background-size: cover; background-position: center;
  }
}

/* Abstand Hero -> erster Inhalt (nicht "abgehakt") */
#main { padding-top: 48px; }

/* --- 2 · Ornament-Divider (Punkte-Trio, reines CSS) --------- */
.otr-divider { display: flex; align-items: center; justify-content: center; max-width: 340px; margin: 8px auto 56px; }
.otr-divider::before, .otr-divider::after { content: ''; flex: 1; height: 1px; background: var(--otr-amber); opacity: 0.38; }
.otr-divider i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--otr-amber); margin: 0 16px; position: relative; }
.otr-divider i::before, .otr-divider i::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--otr-apricot); }
.otr-divider i::before { left: -14px; }
.otr-divider i::after  { right: -14px; }

/* --- 3 · Warmes Glühen in dunkler Sektion ------------------- */
.otr-glow { position: relative; overflow: hidden; }
.otr-glow::before {
  content: ''; position: absolute; top: -34%; right: -8%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,163,34,0.13) 0%, rgba(217,83,30,0.05) 46%, transparent 72%);
  pointer-events: none; z-index: 0;
}
.otr-glow > .container { position: relative; z-index: 1; }

/* --- 4 · Übergroßes Anton-Wasserzeichen -------------------- */
/* <section class="... otr-wm" data-wm="OTR"> */
.otr-wm { position: relative; overflow: hidden; }
.otr-wm::before {
  content: attr(data-wm); position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); font-family: 'Anton', sans-serif;
  font-size: clamp(140px, 30vw, 360px); line-height: 1; letter-spacing: 0.02em;
  white-space: nowrap; color: rgba(245, 240, 235, 0.035); pointer-events: none; z-index: 0;
}
.otr-wm > .container { position: relative; z-index: 1; }

/* --- 5 · Sekundärfarben ------------------------------------- */
.eyebrow.kick { color: var(--otr-apricot); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--otr-burnt-orange); margin-right: 9px; vertical-align: middle; }
  