/* Bilder und Bild-Slider in der News-Detailansicht (Bootstrap 5) */

/* Einzelbilder und Slider-Bilder höchstens so breit wie der Inhalt und so hoch wie ein 3:2-Querformat in voller Breite:
   16:9- und 3:2-Bilder sind inhaltsbreit, quadratische und Hochformat-Bilder werden kleiner und zentriert */
.news-detail .news-img-wrap {
    container-type: inline-size;
    /* dhbw-news.css setzt ab 830px eine feste Breite von 41.6em (passt zur Textbreite der Homepage); im Intranet so breit wie der Text */
    width: auto !important;
}

.news-detail .news-img-wrap .mediaelement-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 66.667cqw;
    margin: 0 auto;
}

/* Überschriften von zugehörigen Dateien, Links und News 1,25 x so groß wie der Text (Bootstrap-h4 wäre 1.5rem);
   kein Abstand nach oben, der Textblock darüber hat schon Innenabstand (py-5) */
.news-detail .news-related h4 {
    font-size: 1.25em;
    margin: 0 0 .5em;
}

/* Indikatoren unter den Bildern statt darüber, damit sie Bild und Bildunterschrift nicht verdecken */
.news-carousel .carousel-indicators {
    position: static;
    margin: .5rem 15% 0;
}

.news-carousel .carousel-indicators [data-bs-target] {
    background-color: #5c6971;
}

/* Schmale Klickflächen, damit die Pfeile am Bildrand sitzen (nicht vom CSS anderer Extensions abhängig) */
.news-carousel .carousel-control-prev,
.news-carousel .carousel-control-next {
    width: 6%;
}

/* Pfeile auch auf hellen Bildern sichtbar halten */
.news-carousel .carousel-control-prev-icon,
.news-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 80%));
}