/* V075: ausschliesslich fuer die Hero-Bildreihe der Startseite */
.clinic-hero--immersive .hero-slider-shell {
  --hero-slider-transition-duration: 1s;
  position: relative;
  width: 100%;
  isolation: isolate;
}

/* Die bestehende Textbuehne bleibt unveraendert ueber dem Slider. */
.clinic-hero--immersive .hero-stage { pointer-events: none; }
.clinic-hero--immersive .hero-content-overlay { pointer-events: auto; }

.clinic-hero--immersive .hero-media.hero-slider {
  width: 100%;
  margin: 0;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}

/* Der vorhandene responsive Weissverlauf und der untere Weissbalken gehoeren
   zur Lesbarkeitsebene der Startseite. Sie liegen dauerhaft ueber saemtlichen
   Bildlagen und werden niemals Teil einer Slider-Animation. */
.clinic-hero--immersive .hero-media.hero-slider::after {
  z-index: 10;
  pointer-events: none;
  animation: none !important;
  transition: none !important;
}
.clinic-hero--immersive .hero-media.hero-slider::before {
  z-index: 11;
  pointer-events: none;
  animation: none !important;
  transition: none !important;
}

.clinic-hero--immersive .hero-slider-shell.is-dragging .hero-media.hero-slider { cursor: grabbing; }

.clinic-hero--immersive .hero-slider-track {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 2048 / 682;
  overflow: hidden;
  background: #e8edef;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  outline: none;
}

.clinic-hero--immersive .hero-slider-track:active,
.clinic-hero--immersive .hero-slider-shell.is-dragging .hero-slider-track { cursor: grabbing; }

.clinic-hero--immersive .hero-slider-track:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(47, 125, 150, .82);
}

.clinic-hero--immersive .hero-slider-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
  pointer-events: none;
}

.clinic-hero--immersive .hero-slider-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.clinic-hero--immersive .hero-slider-slide.is-entering,
.clinic-hero--immersive .hero-slider-slide.is-leaving {
  visibility: visible;
  pointer-events: none;
}

.clinic-hero--immersive .hero-slider-slide picture,
.clinic-hero--immersive .hero-slider-slide img {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.clinic-hero--immersive .hero-slider-slide img {
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(.98) contrast(1.03) brightness(1.01);
  -webkit-user-drag: none;
  user-select: none;
}

/* Alle drei Bewegungen verwenden feste Keyframes. Dadurch starten sie auch bei
   bereits zwischengespeicherten Bildern zuverlaessig und dauern exakt 1 s. */
@keyframes hero-slider-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hero-slider-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes hero-slider-slide-in-right {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes hero-slider-slide-out-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@keyframes hero-slider-slide-in-left {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes hero-slider-slide-out-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}
@keyframes hero-slider-reveal-right {
  from { transform: translate3d(0, 0, 0); box-shadow: -18px 0 42px rgba(9, 24, 33, .12); }
  to { transform: translate3d(103%, 0, 0); box-shadow: -30px 0 50px rgba(9, 24, 33, .04); }
}

/* Weiche Ueberblendung */
.clinic-hero--immersive .hero-slider-animation--fade .hero-slider-slide.is-entering {
  z-index: 3;
  opacity: 0;
  animation: hero-slider-fade-in var(--hero-slider-transition-duration) cubic-bezier(.42, 0, .58, 1) both;
}
.clinic-hero--immersive .hero-slider-animation--fade .hero-slider-slide.is-leaving {
  z-index: 2;
  opacity: 1;
  animation: hero-slider-fade-out var(--hero-slider-transition-duration) cubic-bezier(.42, 0, .58, 1) both;
}

/* Buendiger Tausch: altes Bild links hinaus, neues von rechts hinein. */
.clinic-hero--immersive .hero-slider-animation--slide .hero-slider-slide.is-entering {
  z-index: 3;
  opacity: 1;
  animation: hero-slider-slide-in-right var(--hero-slider-transition-duration) cubic-bezier(.76, 0, .24, 1) both;
}
.clinic-hero--immersive .hero-slider-animation--slide .hero-slider-slide.is-leaving {
  z-index: 2;
  opacity: 1;
  animation: hero-slider-slide-out-left var(--hero-slider-transition-duration) cubic-bezier(.76, 0, .24, 1) both;
}
.clinic-hero--immersive .hero-slider-animation--slide.is-reverse .hero-slider-slide.is-entering {
  animation-name: hero-slider-slide-in-left;
}
.clinic-hero--immersive .hero-slider-animation--slide.is-reverse .hero-slider-slide.is-leaving {
  animation-name: hero-slider-slide-out-right;
}

/* Freiziehen: das naechste Bild liegt bereits ruhig unter dem aktuellen. */
.clinic-hero--immersive .hero-slider-animation--reveal .hero-slider-slide.is-entering {
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.clinic-hero--immersive .hero-slider-animation--reveal .hero-slider-slide.is-leaving {
  z-index: 3;
  opacity: 1;
  animation: hero-slider-reveal-right var(--hero-slider-transition-duration) cubic-bezier(.65, 0, .35, 1) both;
}

/* Sehr dezente, rein informative Blockanzeige ohne Bedienelemente. */
.hero-slider-progress {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: clamp(7px, .8vw, 12px);
  width: min(104px, 22vw);
  height: 2px;
  display: flex;
  gap: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Ohne JavaScript bleiben alle Segmente dezent sichtbar. Die aktive Markierung
   wird erst nach erfolgreicher Slider-Initialisierung hervorgehoben. */
.hero-slider-shell:not(.is-ready) .hero-slider-progress-segment { background: rgba(24, 43, 53, .2); }

.hero-slider-progress-segment {
  min-width: 2px;
  height: 2px;
  flex: 1 1 0;
  border-radius: 1px;
  background: rgba(24, 43, 53, .2);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .24);
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

.hero-slider-progress-segment.is-active {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 .5px rgba(25, 39, 47, .16);
}

.hero-slider-shell:not(.is-ready) .hero-slider-progress-segment.is-active {
  background: rgba(24, 43, 53, .2);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .24);
}

.hero-slider-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px) {
  .clinic-hero--immersive .hero-slider-track { aspect-ratio: 2048 / 682; }
  .hero-slider-progress { bottom: 6px; width: min(82px, 26vw); }
}

@media (prefers-reduced-motion: reduce) {
  .clinic-hero--immersive .hero-slider-slide,
  .hero-slider-progress-segment { animation: none !important; transition: none !important; }
}