/* Effektgruppe: backgrounds/scroll-blur; Reihenfolge in inc/assets.php. */

/* Container */
.scroll-blur-bg {
    overflow: hidden !important;
    position: relative;
    touch-action: pan-y; 
}

.scroll-blur-bg > .kt-inside-inner-col {
    position: relative;
    background-color: transparent !important;
    background-blend-mode: normal;
}

/* Das blurrende Hintergrundbild */
.scroll-blur-bg > .kt-inside-inner-col::before {
    content: "";
    position: absolute;
    /* Etwas größerer Puffer, um den unscharfen Rand zu verstecken */
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Die dynamische Variable vom JS (Standard: maximaler Blur) */
    filter: blur(var(--scroll-blur, 3px));
    
    /* Performance-Booster für CSS-Filter */
    will-change: filter;
    z-index: 0;
}

/* Inhalte stabil und knackig halten */
.scroll-blur-bg > .kt-inside-inner-col > * {
    position: relative;
    z-index: 1;
}