/* Effektgruppe: backgrounds/hover; Reihenfolge in inc/assets.php. */

/* --- Basis-Styles (unverändert, nur .is-active angepasst) --- */
.zoom-background {
    position: relative;
    overflow: hidden;
}

.zoom-background > .kt-inside-inner-col {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Hintergrundbild */
.zoom-background > .kt-inside-inner-col::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: inherit;
    background-position: inherit;
    background-image: inherit;
    will-change: transform;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: blur(0px) grayscale(0%);; /* Initialwert für saubere Interpolation */
    z-index: -2;
}

/* Overlay Standard (bleibt hell) */
.zoom-background > .kt-inside-inner-col::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.0);
    transition: background 0.5s ease;
    z-index: -1;
}

/* --- NEU: Dunkle Variante (.zoom-background-dark) --- */

/* Dunkler werdendes Overlay */
.zoom-background-dark:hover > .kt-inside-inner-col::after,
.zoom-background-dark.is-active > .kt-inside-inner-col::after {
    background: rgba(0, 0, 0, 0.4); /* Hier stellst du die Dunkelheit ein */
}

/* --- Hover & Aktiv-Logik (Standard) --- */
.zoom-background:hover > .kt-inside-inner-col::before,
.zoom-background.is-active > .kt-inside-inner-col::before {
    transform: scale(1.15);
    will-change: transform;
}

/* Text-Sichtbarkeit */
.zoom-background-text {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 10;
}

.zoom-background:hover .zoom-background-text,
.zoom-background.is-active .zoom-background-text {
    opacity: 1;
    pointer-events: auto;
}

/* Starker Blur-Effekt und leichter Zoom */
.zoom-background-blurred:hover > .kt-inside-inner-col::before,
.zoom-background-blurred.is-active > .kt-inside-inner-col::before {

    filter: blur(5px); /* Hier die Stärke des Blur-Effekts anpassen */
}

/* Startzustand: Bild ist Schwarz-Weiß */
.zoom-background-black-white > .kt-inside-inner-col::before {
    filter: grayscale(100%);
}

/* Hover/Aktiv: Bild wird farbig */
.zoom-background-black-white:hover > .kt-inside-inner-col::before,
.zoom-background-black-white.is-active > .kt-inside-inner-col::before {
    filter: grayscale(0%);
}