/**
 * Dekaii – Wavy Color Background im BOX-Modus
 * Der farbige Wavy-Flow (Lightpainting-Farben) läuft nur innerhalb einer Box
 * mit der Klasse .dk-wavy-box (z. B. der Elementor-Container der beiden
 * Headlines). Die Wellen liegen hinter dem Inhalt, blenden zu den Rändern
 * weich zu Schwarz aus. Canvas wird von assets/js/page-wavy-bg.js erzeugt.
 */
.dk-wavy-box {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* eigener Stacking-Context: Canvas bleibt in der Box */
}

/* Inhalt der Box liegt über dem Wavy-Canvas */
.dk-wavy-box > *:not(.dk-wavy-box__bg) {
    position: relative;
    z-index: 1;
}

.dk-wavy-box__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Weichzeichner für großflächige Farbflächen – Safari-fest als CSS-Filter */
    filter: blur(16px);
    /* Vignette: Ränder deutlich zu Schwarz ausblenden, damit der Effekt
       sich am Rand nicht "entlarvt". */
    -webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 28%, rgba(0,0,0,0.35) 60%, transparent 82%);
    mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 28%, rgba(0,0,0,0.35) 60%, transparent 82%);
}

@media (prefers-reduced-motion: reduce) {
    .dk-wavy-box__bg { display: none; }
}

/* ==========================================================================
   Footer-Aura (Theme-Footer, alle Seiten)
   WICHTIG: Der Footer wird NICHT zur .dk-wavy-box umgebaut (das setzte
   overflow:hidden → neuer Block-Formatting-Context → Margin-Collapsing
   gestoppt → Footer wurde übergroß). Stattdessen bekommt der Footer nur
   position:relative, und ein EIGENER, absolut positionierter Layer
   (.dk-footer-aura) trägt das Canvas – komplett aus dem Layout-Fluss.
   ========================================================================== */
#qodef-page-footer {
    position: relative;
}

/* Footer-Inhalt (Logo/Adresse/Copyright) über der Aura */
#qodef-page-footer > *:not(.dk-footer-aura) {
    position: relative;
    z-index: 1;
}

/* Die Footer-Bereiche haben per Customizer einen deckenden schwarzen
   Hintergrund (background-color:#000) und würden die Aura verdecken.
   Transparent schalten, damit die Aura durchscheint (Border bleibt). */
#qodef-page-footer-top-area,
#qodef-page-footer-bottom-area {
    background-color: transparent !important;
}

/* Hintergrund-Layer: füllt den Footer, clippt selbst (nicht der Footer).
   WICHTIG: Das Theme setzt `#qodef-page-footer > * { position:relative;
   display:inline-block; width:100% }` (ID-Spezifität). Damit unser Layer
   nicht in den Fluss gezogen wird (→ Höhe 0 → Canvas leer), MUSS unsere
   Regel dieselbe/höhere Spezifität haben: `#qodef-page-footer > .dk-footer-aura`. */
#qodef-page-footer > .dk-footer-aura {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #qodef-page-footer > .dk-footer-aura { display: none; }
}