/* ========================================
   LEISTUNGEN – MOTION & BACKGROUND PARALLAX
======================================== */

.leistungen-motion-section {
    position: relative;
    overflow: hidden;
}

.leistungen-motion-headline,
.leistung-card {
    will-change: transform, opacity, filter;
}

.leistung-card {
    position: relative;
    overflow: hidden;
}

/* Nur Spalten mit einer bg-Klasse erhalten Background-Parallax. */
.leistung-card:is(
    .leistung-bg-left,
    .leistung-bg-right,
    .leistung-bg-up,
    .leistung-bg-down
) {
    --leistung-bg-x: 50%;
    --leistung-bg-y: 50%;

    background-position:
        var(--leistung-bg-x)
        var(--leistung-bg-y) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/*
 * Auch horizontal bewegte Bilder bleiben immer flaechenfuellend.
 * Kein auto 115%, da dies je nach Bildformat Weissraum erzeugt.
 */
.leistung-card.leistung-bg-left,
.leistung-card.leistung-bg-right {
    background-size: cover !important;
}

/* Auf kleinen Smartphones kein Background-Parallax/Repaint. */
@media (max-width: 620px) {
    /*
     * Divi-Spalten erhalten sonst je nach Modulinhalt unterschiedliche Hoehen.
     * Auf Mobile bleiben alle Leistungskacheln deshalb exakt quadratisch.
     */
    .leistungen-motion-section .leistung-card {
        box-sizing: border-box;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1;
    }

    .leistung-card:is(
        .leistung-bg-left,
        .leistung-bg-right,
        .leistung-bg-up,
        .leistung-bg-down
    ) {
        background-position: center center !important;
    }
}

/* Im Divi Visual Builder stets den finalen Zustand zeigen. */
body.et-fb .leistungen-motion-headline,
body.et-fb .leistung-card,
.et-fb-root-ancestor .leistungen-motion-headline,
.et-fb-root-ancestor .leistung-card {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .leistungen-motion-headline,
    .leistung-card {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        transition: none !important;
        will-change: auto;
    }

    .leistung-card:is(
        .leistung-bg-left,
        .leistung-bg-right,
        .leistung-bg-up,
        .leistung-bg-down
    ) {
        background-position: center center !important;
    }
}