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

/* Container */
.scroll-zoom-bg {
    overflow: hidden !important;
    position: relative;
    /* Verhindert horizontales Scrollen durch Skalierung */
    touch-action: pan-y; 
}

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

/* Das zoomende Hintergrundbild */
.scroll-zoom-bg > .kt-inside-inner-col::before {
    content: "";
    position: absolute;
    /* Kleiner Puffer gegen Blitzer an den Rändern */
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Die dynamische Variable vom JS */
    transform: scale(var(--zoom-scale, 1.1));
    
    /* Performance-Booster */
    will-change: transform;
    z-index: 0;
}

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