/**
 * Stats Counter – Kennzahlen-Sektion mit animiertem Hochzählen.
 *
 * Layout: 1 Spalte Mobile, 2 Spalten Tablet (≥600px), 4 Spalten Desktop (≥1024px).
 * Animation wird via JS (Intersection Observer) ausgelöst.
 */

/* Mobile: 1 Spalte */
.stats-counter__grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-items: center;
}

/* Tablet: 2 Spalten */
@media (min-width: 600px) {
  .stats-counter__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: 4 Spalten nebeneinander */
@media (min-width: 1024px) {
  .stats-counter__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stats-counter__item {
  color: inherit;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Zähler-Zahl: Start bei Opacity 0, wird via JS sichtbar */
.stats-counter__number {
  display: block;
  color: currentColor;
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* Wenn der Observer die Sektion sieht, triggert JS die Klasse */
.stats-counter.is-visible .stats-counter__number {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Einblendung der einzelnen Items */
.stats-counter__grid > *:nth-child(1) .stats-counter__number { transition-delay: 0ms; }
.stats-counter__grid > *:nth-child(2) .stats-counter__number { transition-delay: 100ms; }
.stats-counter__grid > *:nth-child(3) .stats-counter__number { transition-delay: 200ms; }
.stats-counter__grid > *:nth-child(4) .stats-counter__number { transition-delay: 300ms; }

.stats-counter__label {
  display: block;
  margin-top: 8px;
  color: currentColor;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.stats-counter {
  color: var(--stats-counter-foreground);
}

.text-primary-foreground .stats-counter {
  color: var(--stats-counter-foreground-on-primary);
}

@media (max-width: 1023px) {
  .stats-counter__number {
    font-size: 56px;
  }
}

@media (max-width: 599px) {
  .stats-counter__number {
    font-size: 48px;
  }
}