/* =================================================
   Grundlayout
   ================================================= */
.slider-section{
    max-width:1500px;
    margin:auto;
    position:relative;
    margin-bottom:30px;
}

/* ---------- Slider‑Box (Höhe nur über aspect‑ratio) ---------- */
.slider-box{
    position:relative;         /* Bezugspunkt für Pfeile & .swiper        */
    flex:0 1 60%;              /* Desktop: 60 % Breite                    */
    max-width:800px;           /* maximale Breite am Desktop              */
    aspect-ratio:3/2;          /* *** EINZIGE Höhenregel (3:2) ***        */
}

/* .swiper füllt die Box vollständig */
.slider-box .swiper{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* ---------- Slides & Bilder ---------- */
.swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;           /* Weißrand bei Hochformat                 */
}
.swiper-slide img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}

/* ---------- Flex‑Container ---------- */
.slider-inner{
    display:flex;
    flex-wrap:wrap;            /* Default: darf umbrechen                 */
    gap:2rem;
}

/* ---------- Text‑Box ---------- */
.text-box{
    flex:1 1 35%;
    min-width:280px;
    font-family:Roboto,sans-serif;
    padding:68px 50px 0 0;
    font-size:1.4em;
    line-height:1.4em;
    color:#000;
}

/* ---------- Pfeile ---------- */
.swiper-button-prev,
.swiper-button-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    color:#fff;
    background:rgba(0,0,0,.5);
    border-radius:50%;
    z-index:5;
    cursor:pointer;
}
.swiper-button-prev{left:10px;}
.swiper-button-next{right:40px;}
.swiper-button-prev:hover,
.swiper-button-next:hover{background:rgba(0,0,0,.8);}

/* ---------- Pagination‑Bullets ---------- */
.swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:rgba(255,255,255,.6);
    opacity:1;
}
.swiper-pagination-bullet-active{background:#ff5722;}

/* ---------- Detail‑Bild & Bildquelle ---------- */
.detailbild{
    position:absolute;
    bottom:-100px;
    right:200px;
    max-width:300px;
    box-shadow:0 0 10px rgba(0,0,0,.2);
    z-index:2;
}
.bildquelle{
    position:absolute;
    bottom:5px;
    right:10px;
    font-size:.7rem;
    color:#888;
}
/* ---------- Titel mit roter Linie ---------- */


.title-box{
    font-family:Roboto,sans-serif;
    border-top:3px solid red;
    padding-top:18px;
    color:#000;
    font-size:1.5em;
    line-height:1.2em;
    font-weight:400;
    display:inline-block;
    hyphens:none;
}




/* =================================================
   Responsive‑Anpassungen
   ================================================= */

/* Tablet (768–1023 px) */
@media (min-width:768px) and (max-width:1023px){
    .detailbild{
        bottom:-40px;
        right:0;
        max-width:200px;
        margin:2rem auto 0;
    }
}

/* Mobile (≤ 767 px) */
@media (max-width:767px){

    .slider-inner {
        flex-direction: column;
    }

    .slider-box {
        flex: 0 0 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
        min-height: 250px; /* neue Zeile, Höhe erzwingen */
    }

    .text-box {
        flex: 0 0 100%;
        max-width: 100%;
        padding:0;
        margin-bottom:50px;
    }



    .detailbild {
        display: none;
    }



    /* Pfeile unsichtbar auf Mobile */
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    /* Pagination unter dem Slider positionieren */
    .slider-box {
        position: relative;
        padding-bottom: 40px; /* Platz für Pagination unten */
    }

    /* Pagination: volle Breite, mittig ausrichten */
    .slider-box .swiper-pagination {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;               /* ganze Boxbreite */
        text-align: center;        /* Bullets zentrieren */
        z-index: 10;
    }

    .slider-section.has-detail { padding-bottom: 160px; }


}

/* Desktop ≥ 1024 px: Slider + Text fix nebeneinander     */
@media (min-width:1024px){
    .slider-inner{flex-wrap:nowrap;}
}