/* Hero-Slider: vollbreite Bilder, Position über --hero-slider-index */
:where(.hero-slider) {
    --hero-slider-height: 39.9vw;           /* Vorlage: 766px bei 1920px */
    --hero-slider-band-top: 46.3%;          /* Vorlage: Band ab 355 von 766px */
    /* Vorlage: Band multipliziert mit dem Bild (aus den Pixeln der Vorlage
       zurückgerechnet), nicht #8bbab7 mit 80 % Deckkraft */
    --hero-slider-band-color: #7dc3be;
    --hero-slider-band-blend: multiply;
    --hero-slider-duration: 700ms;
    --hero-slider-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-slider {
    --hero-slider-index: 0;

    position: relative;
    overflow: hidden;
    height: var(--hero-slider-height);
    touch-action: pan-y;
}

.hero-slider__track {
    display: flex;
    height: 100%;
    transform: translateX(calc(var(--hero-slider-index) * -100%));
    transition: transform var(--hero-slider-duration) var(--hero-slider-ease);
}

.hero-slider__slide {
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
}

.hero-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-slider--band::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: var(--hero-slider-band-top) 0 0;
    background: var(--hero-slider-band-color);
    mix-blend-mode: var(--hero-slider-band-blend);
    pointer-events: none;
}

/* Tablet */
@media (min-width: 600px) and (max-width: 900px) {
    .hero-slider {
        --hero-slider-height: 55vw;
    }
}

/* Mobil: Vorlage 272 von 360 Einheiten Breite */
@media (max-width: 599px) {
    .hero-slider {
        --hero-slider-height: 75.5vw;
        --hero-slider-band-top: 44%;
        --side-arrow-size: 29vw;
        --side-arrow-hidden: 68%;
        --side-arrow-icon-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider__track {
        transition: none;
    }
}