/* Bild-Slider in der News-Detailansicht (Bootstrap 3): gleiche Optik wie der Bootstrap-5-Slider */
/* Werte aus Bootstrap 5.1, in px, weil Bootstrap 3 die Basis-Schriftgröße auf 10px setzt */

/* Slider-Bilder höchstens so hoch wie ein 3:2-Querformat in voller Breite (statt der 360px der Homepage, .news-img-wrap img):
   16:9- und 3:2-Bilder sind inhaltsbreit, quadratische und Hochformat-Bilder werden kleiner und zentriert */
.news-carousel .carousel-inner {
    container-type: inline-size;
}

.news-carousel .item img {
    max-height: 66.667cqw;
}

/* Zugehörige Dateien, Links und News bündig mit der Textspalte (wie .news-img-wrap in dhbw-news.css) */
@media only screen and (min-width: 830px) {
    .news-detail .news-related-wrap {
        width: 41.6em;
        margin: 0 auto;
    }
}

/* Überschriften 1,25 x so groß wie der Text, wie im Intranet (Text 18px, der Abschnitt selbst hat 20px) */
.news-detail .news-related h4 {
    font-size: 1.125em;
    margin: 1.5em 0 .5em;
}

/* Wenig Abstand unter der Bildunterschrift wie im Intranet; der große Abstand zum Text (sonst 3em unter der Bildunterschrift) kommt erst nach den Indikatoren */
.news-carousel p.news-img-caption {
    margin-bottom: 16px !important;
}

.news-carousel {
    margin-bottom: 3em;
}

/* Pfeile, schmale Klickflächen am Bildrand wie im Intranet */
.news-carousel .carousel-control-prev,
.news-carousel .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: none;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}

.news-carousel .carousel-control-prev:hover,
.news-carousel .carousel-control-prev:focus,
.news-carousel .carousel-control-next:hover,
.news-carousel .carousel-control-next:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}

.news-carousel .carousel-control-prev {
    left: 0;
}

.news-carousel .carousel-control-next {
    right: 0;
}

.news-carousel .carousel-control-prev-icon,
.news-carousel .carousel-control-next-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    /* auch auf hellen Bildern sichtbar */
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 80%));
}

.news-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.news-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Indikatoren als Striche unter den Bildern statt als Punkte darüber, damit sie Bildunterschriften nicht verdecken */
.news-carousel .carousel-indicators {
    position: static;
    display: flex;
    justify-content: center;
    width: auto;
    margin: 8px 15% 0;
    padding: 0;
    list-style: none;
}

.news-carousel .carousel-indicators > button {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin: 0 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #5c6971;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-radius: 0;
    opacity: .5;
    transition: opacity .6s ease;
}

.news-carousel .carousel-indicators > .active {
    width: 30px;
    height: 3px;
    margin: 0 3px;
    background-color: #5c6971;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .news-carousel .carousel-control-prev,
    .news-carousel .carousel-control-next,
    .news-carousel .carousel-indicators > button {
        transition: none;
    }
}