/* Nur index.php lädt diese Anpassungen für die neuen, sehr breiten Herobilder. */
.hero-slide {
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.hero.is-animating .hero-slide.is-active {
    z-index: 2;
    animation: hero-slide-in .55s ease-in-out both;
}

.hero.is-animating .hero-slide.is-leaving {
    z-index: 1;
    visibility: visible;
    animation: hero-slide-out .55s ease-in-out both;
}

.hero.is-animating[data-slide-direction="prev"] .hero-slide.is-active {
    animation-name: hero-slide-in-back;
}

.hero.is-animating[data-slide-direction="prev"] .hero-slide.is-leaving {
    animation-name: hero-slide-out-back;
}

@keyframes hero-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes hero-slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes hero-slide-in-back { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes hero-slide-out-back { from { transform: translateX(0); } to { transform: translateX(100%); } }

.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% center;
}

@media (prefers-reduced-motion: reduce) {
    .hero.is-animating .hero-slide.is-active,
    .hero.is-animating .hero-slide.is-leaving {
        animation: none;
    }
}

/* Die Motive sind bereits blau eingefärbt: nur ein leichter Verlauf links für die Textlesbarkeit. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #0f356a99 0%, #0f356a66 30%, #0f356a1a 50%, transparent 62%);
}

@media (max-width: 760px) {
    .hero {
        background: #123f74;
    }

    .hero-slides {
        top: 105px;
        bottom: auto;
        height: clamp(245px, 43vw, 310px);
    }

    .hero-slide,
    .hero-slide:not(.hero-slide-alternate) {
        top: 0;
        height: 100%;
    }

    .hero-slide img {
        object-position: 60% center;
    }

    .hero::after,
    .hero:has(.hero-slide-alternate.is-active)::after {
        background: linear-gradient(180deg, transparent 0%, transparent 26%, #123f7400 34%, #123f74 54%, #123f74 100%);
    }

    .hero-copy {
        padding-top: clamp(275px, 46vw, 340px);
        padding-bottom: 155px;
    }

    .hero-description,
    .hero-price {
        max-width: 520px;
    }
}

@media (max-width: 480px) {
    .hero-slides {
        top: 100px;
        height: 250px;
    }

    .hero-slide img {
        object-position: 61% center;
    }

    .hero-copy {
        padding-top: 270px;
    }
}