/* ==========================================================================
   HERO SLIDER  –  Slick.js + Bootstrap 4.6.2
   ==========================================================================
   Breakpoints entsprechen Bootstrap 4:
     xs/sm  ( < 768px )      -> Seitenverhältnis 4 / 3   (Smartphone)
     md     ( 768–991px )    -> Seitenverhältnis 16 / 9  (Tablet, frei anpassbar)
     lg+    ( >= 992px )     -> Seitenverhältnis 10 / 3  (große Darstellung)

   Das Seitenverhältnis wird über die Custom-Property --hero-ratio als
   padding-bottom in Prozent gesteuert:
     4/3   -> 3  / 4  = 75%
     16/9  -> 9  / 16 = 56.25%
     10/3  -> 3  / 10 = 30%
   ========================================================================== */

.hero {
    --hero-ratio: 75%;          /* 4 / 3  Mobile First */
    --hero-slide-duration: 6000ms;
    position: relative;
    background: #0d0d0f;
    overflow: hidden;
    padding: 0;
}

@media (min-width: 768px) {
    .hero {
        --hero-ratio: 40%;
    }   /* 16 / 9 */
}

@media (min-width: 992px) {
    .hero {
        --hero-ratio: 30%;
    }      /* 10 / 3 */
}

/* --------------------------------------------------------------------------
   Bühne: erzeugt über das ::before-padding die gewünschte Höhe / Ratio
   -------------------------------------------------------------------------- */
.hero__stage {
    position: relative;
    width: 100%;
}

.hero__stage::before {
    content: "";
    display: block;
    padding-bottom: var(--hero-ratio);
}

/* --------------------------------------------------------------------------
   Slider füllt die Bühne komplett
   -------------------------------------------------------------------------- */
.hero__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

/* Kein Flackern der übrigen Slides vor der Slick-Initialisierung */
.hero__slider:not(.slick-initialized) .hero__slide + .hero__slide {
    display: none;
}

/* Slick-interne Container auf volle Höhe zwingen (nötig bei fade + object-fit) */
.hero__slider .slick-list,
.hero__slider .slick-track {
    height: 100% !important;
}

.hero__slider .slick-slide {
    height: 100%;
}
.hero__slider .slick-slide > div {   /* falls Slick einen Wrapper setzt */
    height: 100%;
}

/* --------------------------------------------------------------------------
   Einzelner Slide
   -------------------------------------------------------------------------- */
.hero__slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Bild verdeckt die komplette Slide-Fläche */
.hero__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Abdunkelung für Text-Lesbarkeit */
.hero__scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, 0) 80%),
        linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
}
.hero__scrim.left {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, 0) 80%),
        linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
}
.hero__scrim.right {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, 0) 80%),
        linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
}

/* --------------------------------------------------------------------------
   Slide-Inhalt (Headline / Text / CTA)
   -------------------------------------------------------------------------- */
.hero__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    /* Inhalt selbst nicht klickbar -> Swipe/Drag geht an Slick durch */
    pointer-events: none;
    /* Platz nach unten, damit Text nicht hinter dem Balken-Menü liegt */
    padding-bottom: 2.75rem;
}

.hero__content-inner {
    max-width: 34rem;
}
.hero__content-inner.right {
    float: right;
    text-align: right;
}

@media (min-width: 992px) {
    .hero__content {
        padding-bottom: 3.5rem;
    }
    .hero__content-inner {
        max-width: 42rem;
    }
}

.hero__title {
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: .75rem;
    font-size: clamp(1.6rem, 1rem + 3.4vw, 3.75rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.hero__text {
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   Gestaffelte Einblendung: Headline -> Text -> CTA.
   Das Timing steuert JS: es setzt .is-in nacheinander auf die drei Elemente
   des aktiven Slides (Verzögerungen = STAGGER in hero-slider.js).
   -------------------------------------------------------------------------- */
.hero__title,
.hero__text,
.hero__cta {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.hero__title.is-in,
.hero__text.is-in,
.hero__cta.is-in {
    opacity: 1;
    transform: none;
}

/* Auf sehr kleinen Screens (4/3 = wenig Höhe) Text kompakter halten */
@media (max-width: 575.98px) {
    .hero__content {
        padding-bottom: 2.25rem;
    }
    .hero__title   {
        font-size: clamp(1.25rem, .9rem + 3vw, 1.75rem);
        margin-bottom: .5rem;
    }
    .hero__text {
        font-size: .95rem;
        line-height: 1.4;
        margin-bottom: .9rem;
        /* Notbremse gegen Überlauf bei sehr langen Texten */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero__cta {
        padding: .375rem .9rem;
        font-size: .95rem;
    }
}

.hero__cta {
    pointer-events: auto;      /* Button bleibt klickbar */
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    /* Bootstrap-Hover-Transition erhalten + Einblend-Transition ergänzen */
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
        border-color .15s ease-in-out, box-shadow .15s ease-in-out,
        opacity .6s ease, transform .6s ease;
}

/* --------------------------------------------------------------------------
   Balken-Menü  =  gleichzeitig Fortschrittsanzeige
   -------------------------------------------------------------------------- */
.hero__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    .hero__progress {
        padding-bottom: 1.5rem;
    }
}

.hero-progress {
    display: flex;
    gap: .5rem;
}

.hero-progress__item {
    position: relative;
    flex: 1 1 0;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: height .15s ease, background-color .15s ease;
}

@media (min-width: 992px) {
    .hero-progress__item {
        height: 5px;
    }
}

/* größere Touch-/Klickfläche, ohne das Layout zu verändern */
.hero-progress__item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    bottom: -14px;
}

.hero-progress__item:hover,
.hero-progress__item:focus-visible {
    height: 7px;
    background: rgba(255, 255, 255, .45);
    outline: none;
}

.hero-progress__item[aria-current="true"] {
    background: rgba(255, 255, 255, .4);
}

.hero-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: #fff;
    border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* Keine Bewegung aber ein sanftes Fade + die Staffelung bleiben erhalten */
    .hero__title,
    .hero__text,
    .hero__cta {
        transform: none !important;
        transition: opacity .4s ease !important;
    }
}