/* Wrapper des Sliders aufteilen */
#slider-pro-3-562 .sp-slides-container {
    display: flex !important;
    flex-direction: row;
    width: 100% !important;
}

/* Linke Textspalte */
.slider-left-text {
    width: 33%;
    background: #ffffff;
    color: #000;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    text-align: center;
    min-height: 450px; /* gleiche Höhe wie Slider-Bilder */
}

/* Rechte Bildspalte */
.slider-right-images {
    width: 67%;
    position: relative;
}

/* Buttons rechts */
#slider-pro-3-562 .sp-arrows,
#slider-pro-3-562 .sp-buttons {
    right: 20px !important;
}

/* Linke 33%-Spalte stylen */
.left-slider {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* Text nach unten */
    align-items: flex-start;      /* linksbündig */
    padding-bottom: 40px;         /* optionaler Abstand nach unten */
    color: #274888 !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 300 !important;
    font-size: 40px !important;
    line-height: 50px !important;
    opacity: 1 !important;
}

#slider-pro-3-562 .sp-layer {
    visibility: hidden !important;
}

@media (min-width: 901px) {

    /* Slider-Text verstecken */
    #slider-pro-3-562 .sp-layer {
        visibility: hidden !important;
    }

    /* Linke Spalte anzeigen */
    .left-slider {
        display: flex !important;
    }
}

/* --------------------------------------- */
/* MOBILE: linker Text verstecken, Slider-Text zeigen */
/* --------------------------------------- */
@media (max-width: 900px) {

    /* Slider-Text wieder sichtbar */
    #slider-pro-3-562 .sp-layer {
        visibility: visible !important;
    }

    /* Linke Spalte ausblenden */
    .left-slider {
        display: none !important;
    }
}

.left-slider strong{
    font-weight:700;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    #slider-pro-3-562 .sp-slides-container {
        flex-direction: column;
    }
    .slider-left-text, 
    .slider-right-images {
        width: 100%;
    }
}

.sp-mask.sp-grab {
    width: 100% !important;
    border-radius: 6px !important;
    pointer-events: none;
}

.wp-block-group.alignfull.ipack-container.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained:has(.sp-mask.sp-grab) {
    padding: 0 !important;
}

.slider-pro .sp-layer.sp-black.sp-padding.desc-in.desc-in-bg.hide-medium-screen,
div .sp-layer.sp-black.sp-padding.desc-in.desc-in-bg.hide-medium-screen {
    text-align: left !important;
    margin-left: 60px !important;
    margin-bottom: 20px !important;
    background-color: inherit !important;
    max-width: 50% !important;
}

#slider-pro-3-562 p.sp-layer.desc-in {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 300 !important;
    font-size: 40px !important;
    line-height: 70px !important;
    opacity: 1 !important;
    text-shadow: black 1px 1px 2px;
}

.sp-button {
    height: 16px;
    width: 16px;
    margin-top: 10px;
}

.sp-slides-container {
    margin-top: 5rem;
}

/* .wp-block-group.alignfull.ipack-container.is-layout-constrained {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
} */

#slider-pro-3-562 {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;     /* feste Höhe */
    overflow: hidden;
    position: relative;
    margin:0px !important;
}

/* Slides und Bildcontainer */
#slider-pro-3-562 .sp-slides,
#slider-pro-3-562 .sp-slide,
#slider-pro-3-562 .sp-image-container {
    height: 450px !important;
    width: 100% !important;
}

/* Bilder so strecken, dass sie den Slider komplett füllen */
#slider-pro-3-562 .sp-image {
    width: 100% !important;
    height: 450px !important;
    object-fit: cover !important;   /* Bild wird gestreckt, nicht beschnitten */
    object-position: center center;
}

#slider-pro-3-562 .sp-slides-container{
    height:450px;
    margin-top:0px;
}

/* Slider Arrows */
.sp-arrow{
    width:15px !important;
    height:25px !important;
}

.sp-arrow.sp-previous-arrow::after, .sp-arrow.sp-previous-arrow::before {
    background-color: #00000060 !important;
}

.sp-arrow.sp-next-arrow::after, .sp-arrow.sp-next-arrow::before {
    background-color: #00000060 !important;
}


@media (max-width: 799px) {

    #slider-pro-3-562 {
        width: 100% !important;
        max-width: 100% !important;
        height: 330px !important;     /* feste Höhe */
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        margin-top:4rem !important;
    }

    .slider-pro .sp-layer.sp-black.sp-padding.desc-in.desc-in-bg.hide-medium-screen,
    div .sp-layer.sp-black.sp-padding.desc-in.desc-in-bg.hide-medium-screen {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .slider-pro .sp-layer.sp-black.sp-padding.desc-in.desc-in-bg,
    div .sp-layer.sp-black.sp-padding.desc-in.desc-in-bg {
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    #slider-pro-3-562 p.sp-layer.desc-in {
        font-size: 20px !important;
        line-height: 30px !important;
        white-space: normal !important;
        display: block !important;
        visibility: visible !important;
        width: auto !important;
        text-shadow: black 1px 1px 2px;
    }

    .sp-slides-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .sp-mask.sp-grab,
    .sp-slide,
    .sp-image-container,
    .sp-slide.sp-selected {
        max-height: 300px !important;
    }

    /* Slides und Bildcontainer */
    #slider-pro-3-562 .sp-slides,
    #slider-pro-3-562 .sp-slide,
    #slider-pro-3-562 .sp-image-container {
        height: 300px !important;
        width: 100% !important;
    }

    #slider-pro-3-562 .sp-image {
        width: 100% !important;
        height: 300px !important;
        object-fit: cover !important;   /* Bild wird gestreckt, nicht beschnitten */
        object-position: center center;
    }


    #slider-pro-3-562 .sp-slides-container{
        height:260px;
        margin-top:0px;
    }

}

@media (min-width: 1299px) {
    .sp-mask.sp-grab {
    pointer-events: none;
}
}