/* Mobile first (xs, <576px) */
.carousel-control-prev,
.carousel-control-next {
    width: 60px;
    height: 60px;
    background-color: rgba(255,255,255,1);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #0F2942;
}

.carousel-control-prev {
    left: 30px;
}

.carousel-control-next {
    right: 30px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230F2942' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230F2942' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.carousel-item {
    height: 640px;
}

.carousel-item img {
    height: 100%;
    object-fit: cover;
}

.slider-overlay {
    position: absolute;
    width: 24%;
    pointer-events: none;
    z-index: 2;
}

.carousel-slide-link {
    display: block;
    position: relative;
    height: 100%;
}

/* Mobile: Sprechblase oben, Bild darunter (gestapelt) */
@media (max-width: 767.98px) {
    .carousel-item {
        height: auto;
    }

    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: flex !important;
        flex-direction: column-reverse;
        gap: 15px;
    }

    .carousel-item img {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        object-fit: cover;
    }

    .slider-overlay {
        position: relative;
        width: 100%;
        left: 0 !important;
        top: 0 !important;
        margin-top: 30px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        top: auto;
        bottom: 28vw;
        transform: translateY(50%);
        width: 30px;
        height: 30px;
    }

    .carousel-control-prev {
        left: 15px;
    }

    .carousel-control-next {
        right: 15px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 16px;
        height: 16px;
    }

    .bubble-content {
        padding: 12% 20% 12% 10%;
    }

    .bubble-content--tail-left {
        padding: 12% 10% 12% 20%;
    }

    .slider-overlay .bubble-content p {
        font-size: 1.4rem;
        line-height: 1.2;
    }
}

/* Sprechblase: echte Vorlage (Images/Sprechblase.svg) als Maske. mask-size:
   cover skaliert immer gleichmäßig (nie einseitig, also nie verzerrt) und
   füllt die Box immer vollständig aus (kein Leerraum an den Seiten, in dem
   der Text stehen könnte, ohne von der Form gedeckt zu sein).
   mask-position: center bottom (nicht center/center) – der Zipfel sitzt in
   der Vorlage ganz unten (nahe 98% der Bildhöhe). Ist die Box bei kurzen
   Texten proportional breiter als die Vorlage, muss "cover" oben UND unten
   beschneiden; mit "bottom" verschiebt sich dieser Beschnitt komplett nach
   oben (dort nur die unauffällige Rundung betroffen) und lässt die
   Zipfelspitze unten immer unangetastet.
   Hintergrundfarbe kommt pro Slide aus slide.bubbleColor (siehe
   Slider.html) via background-color, der Zipfel ist Teil der Maskenform
   und hat dadurch automatisch dieselbe Farbe/Transparenz wie die Blase. */
.bubble-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10.5% 19% 20% 9%;
    color: #575656;
    pointer-events: auto;
    -webkit-mask-image: url('../Images/Sprechblase.svg');
    mask-image: url('../Images/Sprechblase.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    -webkit-mask-size: cover;
    mask-size: cover;
    filter:
        drop-shadow(0 0 1px rgba(15, 41, 66, 0.35))
        drop-shadow(0 0.5rem 1.25rem rgba(15, 41, 66, 0.22));
}

/* Variante mit Zipfel links (gespiegelte Maske + gespiegeltes Padding) */
.bubble-content--tail-left {
    padding: 10.5% 9% 20% 19%;
    -webkit-mask-image: url('../Images/Sprechblase-links.svg');
    mask-image: url('../Images/Sprechblase-links.svg');
}

.bubble-content p {
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

#carouselExampleControls .carousel-control-prev,
#carouselExampleControls .carousel-control-next,
#carouselExampleControls .carousel-indicators {
    z-index: 3;
}

/* sm (≥576px) */
@media (min-width: 576px) {
}

/* md (≥768px): Breite hier mit anheben (vorher blieb sie bis 1400px bei den
   mobilen 24%, wodurch die Box bei langen Texten zu schmal wurde und der
   Text zu oft aus der Blasenform herauslief). */
@media (min-width: 768px) {
    .slider-overlay {
        width: 42%;
    }
    .bubble-content p {
        font-size: 1.15rem;
        line-height: 1.2;
    }
}

/* lg (≥992px) */
@media (min-width: 992px) {
    .slider-overlay {
        width: 40%;
    }
    .bubble-content p {
        font-size: 1.25rem;
    }
}

/* xl (≥1200px) */
@media (min-width: 1200px) {
    .slider-overlay {
        width: 38%;
    }
    .bubble-content p {
        font-size: 1.4rem;
    }
}

/* xxl (≥1400px) */
@media (min-width: 1400px) {
    .slider-overlay {
        width: 38%;
    }
    .bubble-content p {
        font-size: 1.65rem;
        line-height: 1.2;
    }
}

/* HD+ (≥1600px) */
@media (min-width: 1600px) {
    .slider-overlay {
        width: 36%;
    }
    .carousel-item {
        height: 720px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 70px;
        height: 70px;
    }
    .bubble-content p {
        font-size: 1.9rem;
        line-height: 1.2;
    }
}

/* FullHD (≥1920px) */
@media (min-width: 1920px) {
    .slider-overlay {
        width: 34%;
    }
    .carousel-item {
        height: 820px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 80px;
        height: 80px;
    }
    .carousel-control-prev {
        left: 50px;
    }
    .carousel-control-next {
        right: 50px;
    }
    .bubble-content p {
        font-size: 2.2rem;
        line-height: 1.2;
    }
}

/* WQHD / 1440p (≥2560px) */
@media (min-width: 2560px) {
    .slider-overlay {
        width: 30%;
    }
    .carousel-item {
        height: 1040px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 100px;
        height: 100px;
        border-width: 2px;
    }
    .carousel-control-prev {
        left: 70px;
    }
    .carousel-control-next {
        right: 70px;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 40px;
        height: 40px;
    }
    .bubble-content p {
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* QHD+ (≥3200px) */
@media (min-width: 3200px) {
    .slider-overlay {
        width: 27%;
    }
    .carousel-item {
        height: 1240px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 120px;
        height: 120px;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 48px;
        height: 48px;
    }
    .bubble-content p {
        font-size: 2.35rem;
        line-height: 1.2;
    }
}

/* 4K UHD (≥3840px) */
@media (min-width: 3840px) {
    .slider-overlay {
        width: 25%;
    }
    .carousel-item {
        height: 1440px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 140px;
        height: 140px;
        border-width: 3px;
    }
    .carousel-control-prev {
        left: 90px;
    }
    .carousel-control-next {
        right: 90px;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 56px;
        height: 56px;
    }
    .bubble-content p {
        font-size: 2.8rem;
        line-height: 1.2;
    }
}