/* Website-Effekte: Ebene über der Seite, nie klickbar, für Screenreader verborgen (aria-hidden, inert).
   Gruppenwerte (per CSSOM): --fx-color, --fx-opacity (0..1), --fx-size, --fx-glow, --fx-thick, --fx-speed.
   Elementwerte: --fx-x, --fx-y, --fx-phase (0..1), --fx-turn, --fx-r (0.6..1.4), --fx-c (Farbvariante) u. a. */
.site-effects{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden;isolation:isolate;contain:strict}
.site-effect{position:absolute;inset:0;mix-blend-mode:screen;opacity:var(--fx-opacity);pointer-events:none}
:root[data-studio-tone="light"] .site-effect{mix-blend-mode:normal}
.site-effect i{position:absolute;left:var(--fx-x);top:var(--fx-y);display:block;transform-origin:center;animation-duration:var(--fx-speed);animation-delay:calc(var(--fx-speed) * var(--fx-phase,0) * -1);animation-iteration-count:infinite;animation-timing-function:ease-in-out}

/* Kerzenschein, Feuer, Partylichter */
.site-effect-candle i,.site-effect-fire i{scale:var(--fx-size);width:clamp(80px,14vw,240px);height:clamp(120px,24vh,320px);border-radius:50%;filter:blur(18px);background:radial-gradient(ellipse at 50% 78%,#fff3 0,var(--fx-color) 22%,transparent 65%);animation-name:site-flame}
.site-effect-fire i{width:clamp(130px,24vw,360px);height:clamp(160px,34vh,450px);filter:blur(12px);background:radial-gradient(ellipse at 50% 88%,#fff6 0,var(--fx-color) 25%,transparent 62%);animation-name:site-fire}
.site-effect-party i{scale:var(--fx-size);width:clamp(110px,22vw,350px);height:clamp(110px,22vw,350px);translate:-50% -50%;border-radius:50%;filter:blur(8px);background:radial-gradient(circle,var(--fx-c,var(--fx-color)),transparent 70%);animation-name:site-party}

/* Laser – Muster sweep (Schwenk), fan (Fächer), cross (gekreuzt), scan (Scanner), chaos */
.site-effect-laser i{width:clamp(240px,56vw,1100px);height:var(--fx-thick);margin-top:calc(var(--fx-thick) / -2);border-radius:999px;background:linear-gradient(90deg,transparent,var(--fx-color) 16%,#fff 50%,var(--fx-color) 84%,transparent);box-shadow:0 0 var(--fx-glow) var(--fx-color),0 0 calc(var(--fx-glow) / 3) var(--fx-color);animation-name:site-laser}
.site-effect-laser:is([data-pattern="fan"],[data-pattern="cross"]) i{top:auto;bottom:0;width:160vmax;margin:0 0 calc(var(--fx-thick) / -2);transform-origin:0 50%;background:linear-gradient(90deg,#fff,var(--fx-color) 6%,color-mix(in srgb,var(--fx-color) 70%,transparent) 55%,transparent 92%)}
.site-effect-laser[data-pattern="fan"] i{animation-name:site-laser-fan}
.site-effect-laser[data-pattern="cross"] i{animation-name:site-laser-cross}
.site-effect-laser[data-pattern="scan"] i{left:0;top:0;width:100%;margin:0;animation-name:site-laser-scan;animation-timing-function:linear}
.site-effect-laser[data-pattern="chaos"] i{translate:-50% 0;animation-name:site-laser-chaos;animation-timing-function:steps(1,end)}

/* Stroboskop: alle Blitze gleichzeitig (höchstens 3 pro Sekunde) */
.site-effect-strobe i{width:calc(clamp(120px,20vw,300px) * var(--fx-size));aspect-ratio:1;translate:-50% -50%;border-radius:50%;filter:blur(10px);background:radial-gradient(circle,#fff 0,var(--fx-color) 32%,transparent 70%);opacity:0;animation-name:site-strobe;animation-timing-function:linear;animation-delay:0s}

/* Konfetti: fallende Schnipsel in Effektfarbe und Varianten */
.site-effect-confetti i{top:-8vh;width:calc(9px * var(--fx-size));height:calc(15px * var(--fx-size));border-radius:2px;background:var(--fx-c,var(--fx-color));box-shadow:0 0 calc(var(--fx-glow) / 5) var(--fx-c,var(--fx-color));animation-name:site-confetti;animation-timing-function:linear;animation-duration:calc(var(--fx-speed) * var(--fx-r))}
.site-effect-confetti i:nth-child(3n){border-radius:50%;height:calc(9px * var(--fx-size))}
.site-effect-confetti i:nth-child(4n+1){width:calc(5px * var(--fx-size));height:calc(20px * var(--fx-size))}

/* Glitzer: funkelnde Sterne */
.site-effect-sparkle i{width:calc(30px * var(--fx-size));aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fff 0 7%,var(--fx-c,var(--fx-color)) 16%,transparent 42%);opacity:0;animation-name:site-sparkle;animation-duration:calc(var(--fx-speed) * var(--fx-r))}
.site-effect-sparkle i::before,.site-effect-sparkle i::after{content:"";position:absolute;inset:0;margin:auto;width:100%;height:max(2px,calc(var(--fx-thick) * .6));border-radius:999px;background:linear-gradient(90deg,transparent,var(--fx-c,var(--fx-color)) 28%,#fff 50%,var(--fx-c,var(--fx-color)) 72%,transparent)}
.site-effect-sparkle i::after{rotate:90deg}

/* Bokeh-Lichter: große, weiche, schwebende Kreise */
.site-effect-bokeh i{width:calc(clamp(60px,11vw,190px) * var(--fx-size) * var(--fx-r));aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fx-c,var(--fx-color)) 55%,transparent) 0 52%,color-mix(in srgb,var(--fx-c,var(--fx-color)) 85%,#fff) 60%,transparent 69%);filter:blur(calc(var(--fx-glow) / 10));animation-name:site-bokeh;animation-duration:calc(var(--fx-speed) * var(--fx-r))}

/* Spotlights: wandernde Lichtkegel von oben */
.site-effect-spotlight i{--cone:calc(10deg * var(--fx-size));top:-6vh;width:150vh;height:125vh;translate:-50% 0;transform-origin:50% 0;background:conic-gradient(from calc(180deg - var(--cone)) at 50% 0,transparent 0deg,color-mix(in srgb,color-mix(in srgb,var(--fx-color) 80%,#fff) 70%,transparent) calc(var(--cone) * .7),color-mix(in srgb,color-mix(in srgb,var(--fx-color) 80%,#fff) 70%,transparent) calc(var(--cone) * 1.3),transparent calc(var(--cone) * 2));-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 96%);mask-image:linear-gradient(180deg,#000 10%,transparent 96%);animation-name:site-spotlight}

/* Discokugel: kreisende Lichtpunkte um eine Kugel */
.site-effect-disco::before{content:"";position:absolute;left:50%;top:16%;width:calc(54px * var(--fx-size));aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(from 8deg,#fff9 0 10deg,color-mix(in srgb,var(--fx-color) 50%,#888) 10deg 20deg),radial-gradient(circle at 35% 30%,#fff,transparent 60%);background-blend-mode:overlay;box-shadow:0 0 var(--fx-glow) color-mix(in srgb,var(--fx-color) 70%,transparent)}
.site-effect-disco i{width:calc(11px * var(--fx-size) * var(--fx-r));aspect-ratio:1;margin:calc(-5px * var(--fx-size)) 0 0 calc(-5px * var(--fx-size));border-radius:50%;background:radial-gradient(circle,#fff 0 22%,var(--fx-c,var(--fx-color)) 42%,transparent 70%);box-shadow:0 0 calc(var(--fx-glow) / 2) color-mix(in srgb,var(--fx-c,var(--fx-color)) 70%,transparent);animation-name:site-disco,site-twinkle;animation-duration:var(--fx-speed),calc(var(--fx-speed) / 9);animation-timing-function:linear,ease-in-out}

.site-effects[data-running=false] .site-effect{display:none}
.site-effects-pause{position:fixed;right:12px;bottom:12px;z-index:30;min-height:44px;padding:9px 13px;border:1px solid #fff8;border-radius:8px;background:#172029e8;color:#fff;font:500 12px/1.3 'Avenir Next','Segoe UI',sans-serif;cursor:pointer;box-shadow:0 3px 14px #0006}
.site-effects-pause[hidden]{display:none}
.site-effects-pause:focus-visible{outline:2px solid #ffd391;outline-offset:3px}

@keyframes site-flame{0%,100%{opacity:.32;transform:translate3d(-7px,9px,0) scale(.8)}45%{opacity:.85;transform:translate3d(4px,-8px,0) scale(1.12)}}
@keyframes site-fire{0%,100%{opacity:.18;transform:translate3d(-6px,12px,0) scale(.72)}30%{opacity:.8;transform:translate3d(7px,-16px,0) scale(1.15)}65%{opacity:.5;transform:translate3d(-4px,-4px,0) scale(.95)}}
@keyframes site-party{0%,100%{opacity:.12;transform:translate3d(-25px,16px,0) scale(.75)}50%{opacity:.95;transform:translate3d(30px,-22px,0) scale(1.1)}}
@keyframes site-laser{0%{opacity:0;transform:translateX(-50%) rotate(calc(var(--fx-turn) - 14deg)) translateX(-20%)}50%{opacity:1}100%{opacity:0;transform:translateX(-50%) rotate(calc(var(--fx-turn) + 14deg)) translateX(20%)}}
@keyframes site-laser-fan{0%,100%{opacity:.55;transform:rotate(calc(var(--fx-turn) - 10deg))}50%{opacity:1;transform:rotate(calc(var(--fx-turn) + 10deg))}}
@keyframes site-laser-cross{0%,100%{opacity:.5;transform:rotate(calc(var(--fx-turn) - 14deg))}50%{opacity:1;transform:rotate(calc(var(--fx-turn) + 14deg))}}
@keyframes site-laser-scan{0%{opacity:0;transform:translateY(-4vh)}8%,92%{opacity:1}100%{opacity:0;transform:translateY(104vh)}}
@keyframes site-laser-chaos{0%{opacity:1;transform:rotate(var(--fx-a1))}25%{opacity:.35;transform:rotate(var(--fx-a2))}50%{opacity:1;transform:rotate(var(--fx-a3))}75%{opacity:.6;transform:rotate(var(--fx-a4))}100%{opacity:1;transform:rotate(var(--fx-a1))}}
@keyframes site-strobe{0%{opacity:0}3%{opacity:1}13%,100%{opacity:0}}
@keyframes site-confetti{0%{transform:translate3d(0,0,0) rotate3d(1,.35,.2,0deg)}100%{transform:translate3d(var(--fx-sway),118vh,0) rotate3d(1,.35,.2,var(--fx-spin))}}
@keyframes site-sparkle{0%,100%{opacity:0;transform:scale(.15) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes site-bokeh{0%,100%{opacity:.25;transform:translate3d(-3vw,4vh,0) scale(.92)}50%{opacity:.95;transform:translate3d(3vw,-6vh,0) scale(1.06)}}
@keyframes site-spotlight{0%,100%{transform:rotate(calc(var(--fx-turn) - 24deg))}50%{transform:rotate(calc(var(--fx-turn) + 24deg))}}
@keyframes site-disco{from{transform:rotate(var(--fx-turn)) translateX(var(--fx-radius))}to{transform:rotate(calc(var(--fx-turn) + 360deg)) translateX(var(--fx-radius))}}
@keyframes site-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.site-effects,.site-effects-pause{display:none}}