/* Tokens (--bg, --ink, --muted, --container, --gutter) kommen aus css/tokens.css. */

.reichweite {
  background: var(--bg);
  color: var(--ink);
  padding-block: clamp(64px, 10vw, 120px);
  padding-inline: var(--gutter);
}
.reichweite__inner { max-width: var(--container); margin-inline: auto; }

.reichweite__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 560px) {
  .reichweite__stats { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(16px, 3vw, 64px); }
}

.stat__num {
  margin: 0;
  display: grid; /* Endzahl unsichtbar im selben Feld: reserviert die Breite */
  font-size: clamp(36px, 7vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums; /* Schibsted Grotesk setzt bei tabular-nums auch Punkt und Plus breit; die Breite reserviert .stat__ghost */
  white-space: nowrap;
}
/* Drei Spalten ab 560px: Schriftgröße an die Breite koppeln, damit die Zahlen mit Schibsted Grotesk nie überlaufen. */
@media (min-width: 560px) {
  .stat__num { font-size: clamp(30px, calc((100vw - 2 * var(--gutter) - 2 * clamp(16px, 3vw, 64px)) / 15), 96px); }
}
.stat__ghost, .stat__live { grid-area: 1 / 1; }
.stat__ghost { visibility: hidden; }
.stat__label { margin: 15px 0 0; font-size: clamp(14px, 0.5vw + 7px, 22px); line-height: 1.4; color: var(--muted); }

.reichweite__note { margin: 48px 0 0; font-size: clamp(13px, 0.4vw + 7px, 19px); line-height: 1.4; color: var(--muted); }

.reichweite a:focus-visible, .reichweite :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Einblenden nur mit JS, damit ohne JS alles sichtbar ist */
.js .reichweite__inner { opacity: 0; transform: translateY(6px); transition: opacity .6s ease-out, transform .6s ease-out; }
.js .reichweite.is-in .reichweite__inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reichweite__inner { opacity: 1; transform: none; transition: none; }
}