/* =============================================================================
   trust-stats — Reihe von Stat-Karten mit Count-up
   =============================================================================
   N gleichwertige Kennzahl-Karten (Default 4): grosse Akzent-Zahl plus
   Kontext-Label darunter. Die Zahlen zählen beim Sichtbarwerden hoch
   (IntersectionObserver). Vertrauens-/Social-Proof-Block für Landing Pages.

   TOKEN-PUR: ausschliesslich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --ts-* sind komponenten-lokale Layout-Konstanten (Zahlen-Grösse, Min-Höhe,
   Spalten-Mindestbreite) — an keine Marke gekettet, laut Regel erlaubt.

   Responsive: mobile-first. 1 Spalte <560px, 2 ab 560px, 4 ab 900px (das Grid
   reflowt allein über die Spaltenzahl, nichts wird in vw an eine gedeckelte
   Grösse gekettet). Touch-/Lesbarkeits-Mindesthöhe der Karte >= 44px.

   Lade-Reihenfolge: _tokens/_base.css → <brand>.css → diese Datei → trust-stats.js
   ============================================================================ */

.trust-stats {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --ts-num-size:   clamp(2.2rem, 5vw, 3.4rem);  /* Display-Zahl, fluid und gedeckelt */
  --ts-card-min:   44px;                        /* Touch-/Lesbarkeits-Mindesthöhe */
  --ts-cols:       1;                           /* Spaltenzahl, per Breakpoint erhöht */

  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ts-cols), 1fr);
  gap: var(--space-m);
}

.trust-stats__card {
  min-height: var(--ts-card-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-m) var(--space-s);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.trust-stats__num {
  font-family: var(--font-accent);
  font-size: var(--ts-num-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  /* tabellarische Ziffern: Breite springt beim Hochzählen nicht */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.trust-stats__label {
  font-family: var(--font-body);
  font-size: var(--font-scale-small);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink-soft);
  max-width: 22ch;
}

/* --- Breakpoints: nur die Spaltenzahl ändert sich, Proportionen bleiben ----- */
@media (min-width: 560px) {
  .trust-stats { --ts-cols: 2; }
}
@media (min-width: 900px) {
  .trust-stats { --ts-cols: 4; }
}

/* Reduced-Motion: das JS setzt ohnehin direkt den Endwert; hier nichts zu
   bewegen (kein Transform/Transition in dieser Komponente). Block bleibt als
   bewusste A11y-Markierung erhalten. */
@media (prefers-reduced-motion: reduce) {
  .trust-stats__num { transition: none; }
}