in den Body) ----- */
.dot-grid {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 24px 24px;
}
/* --- Hintergrund: Aurora Option B „Nordlicht-Vorhänge“ (Live-Default) ---
Site-weit, genau EINE Aurora; KEINE lokalen ::before-Auroras in Sections.
Option A (dezente Ambient-Radials, body::after) liegt als Drop-in in
aurora/AURORA-GUIDE.md — nie beide gleichzeitig.
Braucht Markup im Body (nach dem .dot-grid), siehe aurora/AURORA-GUIDE.md:
PFLICHT: (1) Fade nach rgba(farbe,0), NIE nach transparent (sonst dunkler Ring).
(2) isolation:isolate auf .aurora (sonst mis-compositet mix-blend die Seite). */
.aurora {
position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
isolation: isolate;
animation: auroraHue 30s ease-in-out infinite; will-change: filter;
}
@keyframes auroraHue { 0%, 100% { filter: hue-rotate(-16deg); } 50% { filter: hue-rotate(24deg); } }
.aurora-curtain {
position: absolute; bottom: -6%; transform-origin: 50% 100%;
filter: blur(38px); mix-blend-mode: screen; will-change: transform, opacity;
background: linear-gradient(to top,
rgba(34,197,94,0) 0%, rgba(34,197,94,0.30) 14%, rgba(45,212,160,0.26) 34%,
rgba(56,189,248,0.21) 55%, rgba(139,92,246,0.18) 74%, rgba(236,72,153,0.10) 88%, rgba(236,72,153,0) 100%);
}
/* Höhen seit 2026-07-24 (Navbar oben transparent, Aurora ragt ins Menü) */
.aurora-c1 { left: 2%; width: 22%; height: 92%; animation: auroraSwayA 13s ease-in-out infinite; }
.aurora-c2 { left: 20%; width: 16%; height: 74%; filter: blur(30px); animation: auroraSwayB 16s ease-in-out infinite; animation-delay: -4s; }
.aurora-c3 { left: 33%; width: 26%; height: 98%; animation: auroraSwayA 14s ease-in-out infinite; animation-delay: -8s; }
.aurora-c4 { left: 52%; width: 18%; height: 80%; filter: blur(44px); animation: auroraSwayC 17s ease-in-out infinite; animation-delay: -3s; }
.aurora-c5 { left: 64%; width: 24%; height: 92%; animation: auroraSwayB 15s ease-in-out infinite; animation-delay: -10s; }
.aurora-c6 { left: 80%; width: 20%; height: 78%; filter: blur(32px); animation: auroraSwayC 18s ease-in-out infinite; animation-delay: -6s; }
.aurora-rays {
position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.12;
background: repeating-linear-gradient(to right, rgba(255,255,255,0) 0px, rgba(200,255,235,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 5px);
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 2%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 96%);
mask-image: linear-gradient(to top, rgba(0,0,0,0) 2%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 96%);
animation: auroraRayDrift 30s linear infinite; will-change: transform;
}
@keyframes auroraSwayA { 0%, 100% { transform: translateX(-34px) translateY(6px) scaleY(0.98) scaleX(1.02); opacity: 0.5; } 50% { transform: translateX(44px) translateY(-12px) scaleY(1.2) scaleX(0.9); opacity: 0.95; } }
@keyframes auroraSwayB { 0%, 100% { transform: translateX(40px) translateY(-6px) scaleY(1.12) scaleX(0.98); opacity: 0.46; } 50% { transform: translateX(-46px) translateY(10px) scaleY(0.86) scaleX(1.14); opacity: 0.86; } }
@keyframes auroraSwayC { 0%, 100% { transform: translateX(-24px) translateY(-4px) scaleY(0.9) scaleX(1.08); opacity: 0.42; } 50% { transform: translateX(36px) translateY(14px) scaleY(1.26) scaleX(0.86); opacity: 0.82; } }
@keyframes auroraRayDrift { 0% { transform: translateX(0); } 100% { transform: translateX(22px); } }
/* --- Reduced Motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
.aurora, .aurora-curtain, .aurora-rays { animation: none; }
.dot-glow { animation: none; }
.reveal { opacity: 1; transform: none; }
}
/* --- Windows-Kontrastmodus (forced-colors) ------------------------------ */
/* Hintergründe/box-shadows fallen dort weg: Buttons, die nur über ihren
Hintergrund sichtbar sind, bekommen einen Rahmen in Systemfarbe. */
@media (forced-colors: active) {
.btn-primary, .btn-secondary, button { border: 1px solid ButtonText; }
}