/* Effektgruppe: layout/horizontal-panels; Reihenfolge in inc/assets.php. */

/* Nur anwenden, wenn JS aktiv ist UND Bildschirm groß genug */
@media (min-width: 1024px) {
    .horizontal-scroll-wrapper.js-active {
        position: relative;
        width: 100%;
        overflow: clip;
        background-color: #1a1a1a;
    }

    .horizontal-scroll-wrapper.js-active > .kt-inside-inner-col {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1),
        background-color 0.8s ease;;
        will-change: transform;
    }

    .horizontal-scroll-wrapper.js-active > .kt-inside-inner-col > .wp-block-kadence-column {
        height: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .horizontal-scroll-wrapper.js-active > .kt-inside-inner-col > .wp-block-kadence-column > .kt-inside-inner-col {
        position: absolute !important;
        top: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        z-index: 10;
    }
}