/*
 * Stats-/Kennzahlen-Section. Split-Layout: links der SectionHeader, rechts ein
 * Raster aus Kennzahlen (großer Wert + Label, je mit Trennlinie). Das dunkle
 * Band kommt aus .d35-section-dark (core.css); hier nur Layout + Typo + die
 * kontextabhängige Trennlinien-/Label-Farbe.
 */
.d35-stats-section__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--d35-gap);
}

@media (min-width: 900px) {
  .d35-stats-section__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

/* Kennzahlen-Raster. */
.d35-stats-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

@media (min-width: 600px) {
  .d35-stats-section__grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d35-stats-section__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .d35-stats-section__grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .d35-stats-section__grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Einzelne Kennzahl mit vertikaler Trennlinie links. */
.d35-stats-section__item {
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--d35-color-border);
}

.d35-stats-section__value {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
}

.d35-stats-section__label {
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--d35-color-muted);
}

/* Dark-Variante: Trennlinie/Label auf dunklem Grund aufhellen. */
.d35-stats-section--dark .d35-stats-section__item {
  border-left-color: rgb(255 255 255 / 0.25);
}

.d35-stats-section--dark .d35-stats-section__label {
  color: rgb(255 255 255 / 0.7);
}