/*
 * Startseite (suche.php): Leuchtflächen im Hero und Schein hinter dem Hero-Bild.
 *
 * Bis 21.10.2026 waren das live weichgezeichnete, pulsierende Flächen (blur 100–140 px, Puls, Mischmodus).
 * Ohne GPU (PageSpeed Desktop) kostete das die gesamte Blockierzeit der Startseite. Jetzt nichts mehr live
 * weichgezeichnet und nichts animiert ab 1024 px:
 *   - Hell ab 1024 px: die Original-Flächen einmal mit dem Browser-Blur gerendert (Puls eingefroren auf .75)
 *     als images/hero-glow-light.webp; gleiche Mischung wie zuvor (wald-sand-tokens.css: hell = screen).
 *   - Hell 768–1023 px: die Original-Flächen (.hero-glow__orig) wie bisher; < 768 px blendet search-mobile.css sie aus.
 *   - Dunkel: statische Verläufe (.hero-glow__dark), Variante D aus design-previews/hero-leuchten/.
 * Schein hinter dem Bild (.hero-halo): hell exakter Nachbau des Originals ohne Filter, dunkel statischer Verlauf.
 */

.hero-glow__orig,
.hero-glow__bake,
.hero-glow__dark { display: none; }

.hero-glow__bake {
    position: absolute;
    inset: 0;
    background: url('../../images/hero-glow-light.webp') 0 0 / 100% 100% no-repeat;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    html:not(.dark) .hero-glow__orig { display: block; }
}
@media (min-width: 1024px) {
    html:not(.dark) .hero-glow__bake { display: block; }
}

/* Dunkel: ohne Mischmodus (die Klasse mix-blend-multiply bleibt für hell, dort macht wald-sand-tokens.css screen daraus). */
.dark .hero-glow { mix-blend-mode: normal; }
.hero-glow__dark { position: absolute; pointer-events: none; }
@media (min-width: 768px) {
    .dark .hero-glow__dark { display: block; }
}
.hero-glow__dark--1 { top: -20%; left: -20%; width: 100%; height: 100%; background: radial-gradient(closest-side, rgba(16, 185, 129, .32), rgba(16, 185, 129, .12) 50%, rgba(16, 185, 129, 0) 100%); }
.hero-glow__dark--2 { bottom: -20%; right: -20%; width: 90%; height: 90%; background: radial-gradient(closest-side, rgba(20, 184, 166, .28), rgba(99, 102, 241, .11) 55%, rgba(99, 102, 241, 0) 100%); }
.hero-glow__dark--3 { top: 10%; right: 10%; width: 50%; height: 50%; background: radial-gradient(closest-side, rgba(52, 211, 153, .22), rgba(52, 211, 153, 0) 100%); }

/* Schein hinter dem Hero-Bild. Der Hero schneidet waagerecht ab (overflow-x-clip im Markup), sonst Querscrollen. */
.hero-halo {
    position: absolute;
    inset: -3rem;
    border-radius: 3rem;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(16, 185, 129, .35) 0%, rgba(20, 184, 166, .18) 50%, rgba(20, 184, 166, 0) 100%);
}
/* Hell: Original war ein Rechteck -inset-4 mit Smaragd .35 → Türkis .12 (wald-sand-tokens.css), blur 40px, Puls 1↔.5.
   Weichgezeichnetes Rechteck = Produkt zweier Gauß-Kanten (σ 40 px): Fläche 120 px (3σ) größer, je Achse eine
   Masken-Rampe nach der Normalverteilung, per intersect multipliziert. Deckkraft fest .75 (Mitte des Pulses). */
html:not(.dark) .hero-halo {
    inset: calc(-1rem - 120px);
    border-radius: 0;
    opacity: .75;
    background: linear-gradient(to right top, rgba(52, 211, 153, .35) 170px, rgba(20, 184, 166, .12) calc(100% - 170px));
    -webkit-mask-image:
        linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.023) 40px, rgba(0,0,0,.067) 60px, rgba(0,0,0,.159) 80px, rgba(0,0,0,.309) 100px, rgba(0,0,0,.5) 120px, rgba(0,0,0,.691) 140px, rgba(0,0,0,.841) 160px, rgba(0,0,0,.933) 180px, rgba(0,0,0,.977) 200px, #000 240px,
            #000 calc(100% - 240px), rgba(0,0,0,.977) calc(100% - 200px), rgba(0,0,0,.933) calc(100% - 180px), rgba(0,0,0,.841) calc(100% - 160px), rgba(0,0,0,.691) calc(100% - 140px), rgba(0,0,0,.5) calc(100% - 120px), rgba(0,0,0,.309) calc(100% - 100px), rgba(0,0,0,.159) calc(100% - 80px), rgba(0,0,0,.067) calc(100% - 60px), rgba(0,0,0,.023) calc(100% - 40px), rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.023) 40px, rgba(0,0,0,.067) 60px, rgba(0,0,0,.159) 80px, rgba(0,0,0,.309) 100px, rgba(0,0,0,.5) 120px, rgba(0,0,0,.691) 140px, rgba(0,0,0,.841) 160px, rgba(0,0,0,.933) 180px, rgba(0,0,0,.977) 200px, #000 240px,
            #000 calc(100% - 240px), rgba(0,0,0,.977) calc(100% - 200px), rgba(0,0,0,.933) calc(100% - 180px), rgba(0,0,0,.841) calc(100% - 160px), rgba(0,0,0,.691) calc(100% - 140px), rgba(0,0,0,.5) calc(100% - 120px), rgba(0,0,0,.309) calc(100% - 100px), rgba(0,0,0,.159) calc(100% - 80px), rgba(0,0,0,.067) calc(100% - 60px), rgba(0,0,0,.023) calc(100% - 40px), rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.023) 40px, rgba(0,0,0,.067) 60px, rgba(0,0,0,.159) 80px, rgba(0,0,0,.309) 100px, rgba(0,0,0,.5) 120px, rgba(0,0,0,.691) 140px, rgba(0,0,0,.841) 160px, rgba(0,0,0,.933) 180px, rgba(0,0,0,.977) 200px, #000 240px,
            #000 calc(100% - 240px), rgba(0,0,0,.977) calc(100% - 200px), rgba(0,0,0,.933) calc(100% - 180px), rgba(0,0,0,.841) calc(100% - 160px), rgba(0,0,0,.691) calc(100% - 140px), rgba(0,0,0,.5) calc(100% - 120px), rgba(0,0,0,.309) calc(100% - 100px), rgba(0,0,0,.159) calc(100% - 80px), rgba(0,0,0,.067) calc(100% - 60px), rgba(0,0,0,.023) calc(100% - 40px), rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.023) 40px, rgba(0,0,0,.067) 60px, rgba(0,0,0,.159) 80px, rgba(0,0,0,.309) 100px, rgba(0,0,0,.5) 120px, rgba(0,0,0,.691) 140px, rgba(0,0,0,.841) 160px, rgba(0,0,0,.933) 180px, rgba(0,0,0,.977) 200px, #000 240px,
            #000 calc(100% - 240px), rgba(0,0,0,.977) calc(100% - 200px), rgba(0,0,0,.933) calc(100% - 180px), rgba(0,0,0,.841) calc(100% - 160px), rgba(0,0,0,.691) calc(100% - 140px), rgba(0,0,0,.5) calc(100% - 120px), rgba(0,0,0,.309) calc(100% - 100px), rgba(0,0,0,.159) calc(100% - 80px), rgba(0,0,0,.067) calc(100% - 60px), rgba(0,0,0,.023) calc(100% - 40px), rgba(0,0,0,0) 100%);
    mask-composite: intersect;
}