/* ==========================================================================
   startslider.css
   Slider + Lightbox Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Slider – Basis
   -------------------------------------------------------------------------- */
.swiper.startSwiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Gewünschte Höhe anpassen */
    height: clamp( 320px, 60vw, 367px );
  
}

.startSwiper .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Slider-Bild
   -------------------------------------------------------------------------- */
.startslider_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.swiper-slide:hover .slider_shader {
    opacity: 1; 
}
.starslider_text_cont {
    font-size: 25px;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}
.swiper-slide:hover .starslider_text_cont {
    opacity: 1; 
}
.starslider_text_cont a {
    text-decoration: none;
    font-weight: 300;
}
.starslider_text_cont a:hover {
    text-decoration: none;
    font-weight: 300;
    color: var(--neutral-600);
}


/* Swiper setzt während Transitionen pointer-events:none auf den Wrapper –
   den Plus-Button davon explizit ausnehmen */
.swiper-slide .startslider_plus,
.swiper-slide-duplicate .startslider_plus {
    pointer-events: auto !important;
    touch-action: manipulation;
}


/* --------------------------------------------------------------------------
   7. Lightbox – Overlay
   -------------------------------------------------------------------------- */
.startslider_lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* hidden-Attribut versteckt das Element; dieser Selektor überschreibt
   mögliche display-Konflikte */
.startslider_lightbox[hidden] {
    display: none;
}

/* Backdrop (separates Element für Klick-Schließen) */
.lightbox_backdrop {
    position: absolute;
    inset: 0;
    background: rgba( 10, 10, 10, 0.82 );
    backdrop-filter: blur( 14px );
    -webkit-backdrop-filter: blur( 14px );
    cursor: pointer;
}

/* Scroll-Lock wenn Lightbox offen */
body.lightbox-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Lightbox – Innerer Content-Bereich
   -------------------------------------------------------------------------- */
.lightbox_inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: min( 92vw, 550px );
    max-height: 95vh;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: auto;
    /* sanfte Einblendung */
    animation: lbFadeIn 0.25s ease forwards;
}

@keyframes lbFadeIn {
    from { opacity: 0; transform: translateY( 12px ); }
    to   { opacity: 1; transform: translateY( 0 );    }
}

/* --------------------------------------------------------------------------
   9. Lightbox – Bild
   -------------------------------------------------------------------------- */
.lightbox_image_wrap {
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    height:500px;
    line-height: 0;
}

.lightbox_img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 70vh;
    object-fit: cover;


    /* Fade-in: startet bei opacity 0, .is-loaded blendet ein */
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: opacity;
}

.lightbox_img.is-loaded {
    opacity: 1;
}

.btn-prev {
  left: 24px;
  right: auto;
}
.btn-next{
  right: 24px;
  left: auto;
}
/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
    .starslider_text_cont {
        bottom: 70px;
        right: 70px;
        left: 16px;
        padding: 30px 0px 0px 20px;
    }

    .startslider_plus {
        bottom: 36px;
        left: 36px;
        right: 16px;
        width: 40px;
        height: 40px;
        z-index: 105;
    }

    .lightbox_inner {
        padding: 48px 0px 16px;
    }
    .btn-next {
        right: 0px;
    }
     .btn-prev {
        left: 0px;
    }
}

.swiper-button-next::after, .swiper-button-prev::after {
  font-family: '' !important;
  font-size: 0 !important;
  content: '' !important;
}
.swiper-button-next, .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
}
.gb-carousel-control-icon {
    line-height: 0px !important;
}