/* ================================
   Portfolio Carousel: Controls + keine Größen-Sprünge
   ================================ */

.portfolio-carousel{
    /* Bootstrap-Iconfilter aushebeln (sonst oft "weiß") */
    --bs-carousel-control-icon-filter: none;
}

/* Controls klickbarer + Icon mit dunklem Badge-Hintergrund */
.portfolio-carousel .carousel-control-prev-icon,
.portfolio-carousel .carousel-control-next-icon{
    width: 3rem;
    height: 3rem;
    background-size: 55% 55%;
    border-radius: 999px;

    /* sichtbarer Kontrast auf hellen Flächen */
    background-color: rgba(10, 37, 64, .55);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Hover/Focus etwas kräftiger */
.portfolio-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.portfolio-carousel .carousel-control-next:hover .carousel-control-next-icon,
.portfolio-carousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.portfolio-carousel .carousel-control-next:focus-visible .carousel-control-next-icon{
    background-color: rgba(10, 37, 64, .75);
}

/* Indicators (Dots) auf weiß besser sichtbar */
.portfolio-carousel .carousel-indicators [data-bs-target]{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: rgba(10, 37, 64, .35);
    box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}

.portfolio-carousel .carousel-indicators .active{
    background-color: rgba(10, 37, 64, .9);
}

/* ================================
   Portfolio Carousel: feste Höhe, kein "Springen"
   ================================ */
.portfolio-carousel,
.portfolio-carousel .carousel-inner,
.portfolio-carousel .carousel-item{
    height: clamp(320px, 48vh, 720px);
}

@media (min-width: 992px){
    .portfolio-carousel,
    .portfolio-carousel .carousel-inner,
    .portfolio-carousel .carousel-item{
        height: clamp(420px, 68vh, 860px);
    }
}

/* Item zentrieren – aber Bootstrap-Carousel-Logik NICHT kaputtmachen:
   Nur aktive/transitionierende Slides dürfen "flex" sein. */
.portfolio-carousel .carousel-item{
    /* KEIN display hier! (Bootstrap regelt display:none/block) */
    align-items: center;
    justify-content: center;
}

.portfolio-carousel .carousel-item.active,
.portfolio-carousel .carousel-item.carousel-item-next,
.portfolio-carousel .carousel-item.carousel-item-prev{
    display: flex; /* nur diese sichtbar/animierend */
}

/* Bild füllt die feste Höhe, ohne Layout zu ändern */
.portfolio-carousel .carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* oder cover */
    display: block;
}