/* HH Cinar GmbH — Zusatz-CSS nur fuer den Testimonial-Slider auf der Startseite.
   style.css bleibt unveraendert. Zitat-Optik kommt bewusst von der bestehenden
   .values-quote-Klasse (style.css) — hier nur Slider-Mechanik + Trennlinie/Eyebrow. */

/* Dezente Trennlinie zur vorherigen bg-light-Sektion ("Unsere Leistungen"), da beide
   Sektionen denselben Off-White-Hintergrund nutzen. */
.testimonial-section {
  border-top: 1px solid var(--border);
}

/* .eyebrow--center ist fuer den dunklen Hero-Scrim gebaut (weisser Text) und passt auf
   hellem Hintergrund nicht — hier nur die Zentrierung uebernehmen. */
.testimonial-section .eyebrow {
  justify-content: center;
}

.testimonial-slider {
  margin-top: clamp(1rem, 3vw, 2rem);
}

.testimonial-slider__viewport {
  position: relative;
  min-height: clamp(260px, 34vw, 340px);
}

.testimonial-slider__item {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: 0; /* .values-quote bringt sonst clamp(3rem,6vw,5rem) margin-top mit,
                    das die Zentrierung hier stoeren wuerde */
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.testimonial-slider__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Optisch an .hero-full__dots/.hero-full__dot angelehnt, aber eigene Klassen und
   normaler Fluss statt position:absolute (dort an die Hero-Sektion als Overlay gebunden). */
.testimonial-slider__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.testimonial-slider__dot {
  width: 40px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--border);
  cursor: pointer;
  transition: background-color .25s ease;
}

.testimonial-slider__dot.is-active {
  background: var(--red);
}

.testimonial-slider__dot:hover {
  background: var(--mid);
}

.testimonial-slider__dot:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-slider__item {
    transition: none;
  }
}