/* Basis: Container bleibt flexibel in der Breite */
.carousel-fixed-height {
    max-width: 70%;
}

/* Feste Höhe für Carousel-Inner und Items */
.carousel-fixed-height .carousel-inner,
.carousel-fixed-height .carousel-item {
    height: 60vh;
    /* anpassen: z.B. 500px oder 50vh */
    min-height: 300px;
    /* verhindert zu kleine Höhe auf sehr kleinen Bildschirmen */
    overflow: hidden;
}

/* Bilder füllen den Container und werden proportional zugeschnitten */
.carousel-fixed-height .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Optional: Indikatoren und Controls bleiben sichtbar über dem Bild */
.carousel-fixed-height .carousel-indicators {
    z-index: 5;
}

.carousel-fixed-height .carousel-control-prev,
.carousel-fixed-height .carousel-control-next {
    z-index: 6;
}

/* Kleinere Höhe auf sehr kleinen Bildschirmen */
@media (max-width: 576px) {

    .carousel-fixed-height .carousel-inner,
    .carousel-fixed-height .carousel-item {
        height: 40vh;
        min-height: 200px;
    }
}

/* Optional: noch feinere Anpassung für mittlere Bildschirme */
@media (min-width: 577px) and (max-width: 991px) {

    .carousel-fixed-height .carousel-inner,
    .carousel-fixed-height .carousel-item {
        height: 50vh;
        min-height: 250px;
    }
}

/* Fallback für Browser ohne object-fit Unterstützung */
@supports not (object-fit: cover) {
    .carousel-fixed-height .carousel-item img {
        /* Bild als Hintergrund simulieren */
        width: auto;
        height: 100%;
        max-width: none;
    }
}