.d35-section-hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--d35-color-dark);
  color: var(--d35-color-surface);
}

.d35-section-hero-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.d35-section-hero-slider__viewport::-webkit-scrollbar {
  display: none;
}

.d35-section-hero-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

.d35-section-hero-slider__slide {
  position: relative;
  display: grid;
  height: 720px;
  min-height: 720px;
  max-height: 720px;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.d35-section-hero-slider__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: color-mix(in srgb, var(--d35-color-surface) 14%, var(--d35-color-dark));
}

.d35-section-hero-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d35-section-hero-slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(16, 16, 16, 0.78), rgba(16, 16, 16, 0.28) 58%, rgba(16, 16, 16, 0.16)),
    linear-gradient(0deg, rgba(16, 16, 16, 0.5), rgba(16, 16, 16, 0.08) 38%);
}

.d35-section-hero-slider__content {
  display: flex;
  align-items: center;
  min-width: 0;
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  /* Kein horizontales Padding: die Box kann bis an die Container-Kanten
     positioniert werden (mehr Spielraum im 3×3-Raster, luftigerer Hero).
     Oben an die echte Header-Höhe gekoppelt (+ kleiner Abstand), damit eine
     oben platzierte Box nie unter dem überlagernden Header klemmt; unten
     bewusst reduziert für den luftigen Look. */
  padding-block: calc(var(--d35-header-height) + var(--d35-topbar-height) + 1.5rem) clamp(2.5rem, 5vw, 4rem);
  padding-inline: 0;
}

/* Box-Position im 3×3-Raster: justify-content steuert horizontal (links/mitte/
   rechts innerhalb des Containers), align-items vertikal (oben/mitte/unten). */
.d35-section-hero-slider__content--pos-top-left { align-items: flex-start; justify-content: flex-start; }
.d35-section-hero-slider__content--pos-top-center { align-items: flex-start; justify-content: center; }
.d35-section-hero-slider__content--pos-top-right { align-items: flex-start; justify-content: flex-end; }
.d35-section-hero-slider__content--pos-center-left { align-items: center; justify-content: flex-start; }
.d35-section-hero-slider__content--pos-center { align-items: center; justify-content: center; }
.d35-section-hero-slider__content--pos-center-right { align-items: center; justify-content: flex-end; }
.d35-section-hero-slider__content--pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.d35-section-hero-slider__content--pos-bottom-center { align-items: flex-end; justify-content: center; }
.d35-section-hero-slider__content--pos-bottom-right { align-items: flex-end; justify-content: flex-end; }

/* Textausrichtung innerhalb der Box (unabhängig von der Box-Position). */
.d35-section-hero-slider__inner--align-left { text-align: left; }
.d35-section-hero-slider__inner--align-center { text-align: center; }
.d35-section-hero-slider__inner--align-right { text-align: right; }

/* Der Fließtext hat eine eigene (schmalere) max-width und würde als Grid-Item
   sonst links kleben — bei zentrierter/rechter Ausrichtung den Block selbst
   mit ausrichten, damit er unter der Headline sitzt statt linksbündig. */
.d35-section-hero-slider__inner--align-center .d35-section-hero-slider__body { margin-inline: auto; }
.d35-section-hero-slider__inner--align-right .d35-section-hero-slider__body { margin-inline-start: auto; }

/* Hochwertige Frosted-Glass-Card über dem Hero-Bild: Dark-Tint für sicheren
   Textkontrast (unabhängig vom Bild) + backdrop-blur für den Premium-Glaslook,
   feine helle Glaskante und weicher Schatten, der die Card vom Bild abhebt. */
.d35-section-hero-slider__inner {
  display: grid;
  gap: 1.2rem;
  max-width: 48rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--d35-radius, 14px);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: color-mix(in srgb, var(--d35-color-dark) 66%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55);
}

/* Ohne backdrop-filter (ältere Browser): kräftigeres Dark, damit der Text auch
   ohne Weichzeichner klar lesbar bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .d35-section-hero-slider__inner {
    background: color-mix(in srgb, var(--d35-color-dark) 86%, transparent);
  }
}

/* Pro Slide abschaltbar: Ohne Box liegt der Text direkt auf dem Bild — Glas-Card
   entfällt komplett, ein Text-Shadow sichert die Lesbarkeit (zusammen mit dem
   Verlaufs-Overlay des Slides). */
.d35-section-hero-slider__slide--no-box .d35-section-hero-slider__inner {
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.d35-section-hero-slider__preheading {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.d35-section-hero-slider__heading {
  margin: 0;
  color: var(--d35-color-surface);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 0.98;
  text-wrap: balance;
}

.d35-section-hero-slider__body {
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.05rem;
  line-height: 1.72;
}

.d35-section-hero-slider__body > :first-child {
  margin-top: 0;
}

.d35-section-hero-slider__body > :last-child {
  margin-bottom: 0;
}

.d35-section-hero-slider__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.4rem;
}

.d35-section-hero-slider__nav {
  position: absolute;
  right: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.d35-section-hero-slider__nav-button[disabled] {
  opacity: 0.42;
  pointer-events: none;
}

.d35-section-hero-slider__note {
  color: var(--d35-color-muted);
}

@media (max-width: 760px) {
  .d35-section-hero-slider__slide {
    height: 720px;
    min-height: 720px;
    max-height: 720px;
  }

  /* Hintergrund-Box nur auf Mobil ausblenden (auf Desktop bleibt die Glas-Box).
     Gleiche Entschärfung wie --no-box, plus Text-Shadow für die Lesbarkeit. */
  .d35-section-hero-slider__slide--no-box-mobile .d35-section-hero-slider__inner {
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  }

  .d35-section-hero-slider__slide::after {
    background:
      linear-gradient(0deg, rgba(16, 16, 16, 0.82), rgba(16, 16, 16, 0.2) 78%),
      linear-gradient(90deg, rgba(16, 16, 16, 0.5), rgba(16, 16, 16, 0.16));
  }

  /* Mobil: die Box ist nahezu vollbreit — horizontal immer zentriert. Die
     vertikale Lage kommt aus dem eigenen Mobil-Dropdown (--mpos-*), nicht aus
     der Desktop-Position. */
  .d35-section-hero-slider__content {
    justify-content: center;
    padding-block: 6rem 5.25rem;
  }

  .d35-section-hero-slider__content--mpos-oben { align-items: flex-start; }
  .d35-section-hero-slider__content--mpos-mitte { align-items: center; }
  .d35-section-hero-slider__content--mpos-unten { align-items: flex-end; }

  /* Text mobil immer zentriert. */
  .d35-section-hero-slider__inner {
    text-align: center;
  }

  .d35-section-hero-slider__nav {
    right: 1.25rem;
    bottom: 1.25rem;
  }
}