/* ============================================================
   Enbound — Deko-Ebenen (Atmosphäre an den Außenrändern)
   Wiederverwendbare Komponente: .decor Container + d-aura / d-ring / d-dots / d-sparkle
   Props (per inline style, da kein Build-Step/Framework):
     --decor-strength: 0–1   (Deckkraft-Multiplikator, z. B. 0.6 auf Rechtsseiten)
   Regeln: position:absolute; inset:0; pointer-events:none; aria-hidden im Markup.
   Elternsektion braucht position:relative; Content-Wrapper (.wrap) liegt auf z-index:1.
   ============================================================ */

.decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Weicher Auslauf oben/unten: keine harte Schnittkante mehr, wo eine Ebene
     die Sektionsgrenze (oder den Sticky-Header) berührt — Deko blendet sanft
     zwischen den Sektionen aus statt „abgeschnitten" zu wirken. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}

/* 1) Farb-Auren */
.decor .d-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  opacity: var(--decor-strength, 1);
}
.decor .d-aura--accent { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 68%); }
.decor .d-aura--rose   { background: radial-gradient(circle, color-mix(in srgb, var(--rose) 26%, transparent) 0%, transparent 68%); }

/* 2) Deko-Ringe — weicher Halo statt harter Kontur, damit der Ring aus der
   Aura "herauswächst" statt als eigenständige Form daneben zu stehen */
.decor .d-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 34px 6px color-mix(in srgb, var(--accent) 10%, transparent);
  opacity: var(--decor-strength, 1);
}
.decor .d-ring--rose {
  border-color: color-mix(in srgb, var(--rose) 26%, transparent);
  box-shadow: 0 0 34px 6px color-mix(in srgb, var(--rose) 9%, transparent);
}

/* 3) Punktraster-Patches — größerer, weicherer Fade, damit die Punkte in
   der Aura auslaufen statt als eigene Kachel danebenzustehen */
.decor .d-dots {
  position: absolute;
  width: 240px; height: 240px;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 75%);
          mask-image: radial-gradient(circle, #000 18%, transparent 75%);
  opacity: var(--decor-strength, 1);
}
.decor .d-dots--rose {
  background-image: radial-gradient(color-mix(in srgb, var(--rose) 30%, transparent) 1.6px, transparent 1.6px);
}

/* Optional: Sparkles auf Hero-/CTA-Bühnen — deterministisch geseedet (feste Delays im Markup) */
.decor .d-sparkle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: d-twinkle 3.6s ease-in-out infinite;
}
.decor .d-sparkle--rose { background: var(--rose); }

@keyframes d-twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.75); }
  50%      { opacity: .85; transform: translateY(-6px) scale(1); }
}

/* Sektionen mit Deko brauchen einen Stapelkontext; Inhalt bleibt über der Deko */
section { position: relative; }
section > .wrap { position: relative; z-index: 1; }

/* Seiten-weite Deko-Ebene (Unterseiten): EINE Ebene hinter dem gesamten Inhalt.
   z-index:-1 legt sie über den Seiten-Hintergrund, aber unter jeden Inhalt —
   funktioniert, weil die Unterseiten-Sektionen transparente Hintergründe haben.
   Auf der Startseite dagegen liegt die Deko pro Sektion (opake Abschnitte). */
body { position: relative; }
.decor-page { z-index: -1; }

/* Startseite: die beiden bestehenden Hero-Glows entfallen, sobald die Deko-Ebene
   die Atmosphäre übernimmt — sonst doppelt sich der Schein im selben Eck. */
.hero:has(.decor)::before,
.hero:has(.decor)::after { display: none; }

/* Deko lebt nur im Leerraum jenseits der Content-Spalte (--maxw: 1120px + Padding).
   Erst ab „echten" Großbildschirmen gibt es dafür ausreichend Luft (Laptop-Breiten
   wie 1280/1366 bleiben unangetastet) — darunter ausblenden, kein Layout-Shift. */
@media (max-width: 1440px) {
  .decor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .decor .d-sparkle { animation: none; opacity: .55; }
}