/* HH Cinar GmbH: Leistungs-Galerie auf der Startseite (Sektion "Unsere Leistungen").
   Rechts neben der Liste 01 bis 05 wechseln die Fotos passend zum aktiven Punkt.
   Logik in js/leistung-gallery.js. style.css bleibt unveraendert. */

.index-split__media.leistung-gallery {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-card);
  aspect-ratio: 4 / 5;
}

.leistung-gallery .leistung-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 6s ease-out;
}
.leistung-gallery .leistung-gallery__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Desktop: Foto nicht mehr sticky, sondern genau so hoch wie die Liste links.
   Unterkante Foto = Unterkante des letzten Listenpunkts. */
@media (min-width: 900px) {
  .index-split__media.leistung-gallery {
    position: relative;
    top: auto;
    align-self: stretch;
    aspect-ratio: auto;
  }
}

/* Aktiver Punkt: rot wie beim Hover, Pfeil leicht nach rechts. */
.index-list li a { transition: color 0.4s ease; }
.index-list li.is-active a { color: var(--red); }
.index-list li.is-active .arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .leistung-gallery .leistung-gallery__img,
  .leistung-gallery .leistung-gallery__img.is-active {
    transition: none;
    transform: none;
  }
}