/* ===============================
   HERO SLIDER – COMPLETE CSS
   =============================== */

/* Wrapper füllt den ersten Viewport */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100svh; /* safer viewport on mobile */
  overflow: clip;
  background: #000; /* verhindert weißes Flackern beim Bildwechsel */
}

/* Slider-Layer (Hintergrundbilder) */
.hero-slider__viewport {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transition: opacity 12s linear; /* kontinuierlicher, langsamer Fade */
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }

/* Overlay-Layer (feste Überlagerung, füllt Viewport) */
.hero-slider__overlay {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 2;
  pointer-events: none; /* nie klickbar */
}

/* Bild füllt 100% des Viewports */
.hero-slider__overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;              /* Startzustand – wird per JS animiert */
  transform: scale(1.025); /* kleiner Soft-Zoom für angenehmen Start */
  transition: opacity 0.2s linear, transform 0.2s linear;
}

/* Content-Layer (Titel) */
.hero-slider__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center left;
  padding: 2rem 2rem 2rem 5vw;
  z-index: 3;
}

.hero-slider__title {
  margin: 0;
  font-size: 3vw !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #03854e; /* Start: schwarz */
  text-align: left;
  line-height: 1.1;
  transition: color 0.2s linear;
  mix-blend-mode: normal;
  max-width: 33vw !important;
}

@media(max-width: 768px){
  .hero-slider__title {
    font-size: 30px !important;
    max-width: 580px !important;
  }
}

/* Wenn Overlay aktiv → Titel wird weiß */
.hero-slider.is-overlay-active .hero-slider__title {
  color: #fff;
}

/* Optionaler Soft-Scrim für Lesbarkeit auf sehr hellen Bildern */
.hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
  z-index: 1; /* unter Content, über Slides */
  pointer-events: none;
}




/* Motion-Respect */
@media (prefers-reduced-motion: red