/**
 * TRUE CARE – Slider-Komponente (BEM)
 * Vanilla JS Slider, kein externe Bibliothek
 */

/* ── Block: .slider ──────────────────────────────────────────────────────────── */

.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Element: Spur (alle Slides nebeneinander) */
.slider__track {
  display: flex;
  transition: transform var(--transition-slow);
  will-change: transform;
}

/* Element: Einzelner Slide */
.slider__slide {
  min-width: 100%;
  flex-shrink: 0;
}

/* Element: Navigations-Buttons */
.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-raised);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-full);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.slider__btn:hover {
  background-color: var(--color-primary);
}

.slider__btn:hover svg {
  stroke: var(--color-text-inverted);
}

.slider__btn--prev { left: var(--spacing-md); }
.slider__btn--next { right: var(--spacing-md); }

/* Element: Dots-Navigation */
.slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) 0;
}

.slider__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-full);
  background-color: var(--color-secondary);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

/* Modifier: Aktiver Dot */
.slider__dot--active {
  background-color: var(--color-primary);
  transform: scale(1.25);
}