/**
 * @file        section/stats/stats.css
 * @location    /section/stats/stats.css
 * @description Archiv-Statistiken. Prefix: st1__
 *
 *              FARBEN (COLOR-GUIDE.md) — alle ≥ 7:1:
 *                BG:       --color-page      C4  #f5f6f8
 *                Heading:  --color-ink       C5  #1e2d3d  12.96:1 ✓
 *                Subtitle: --color-ink-soft  C6  #3a4c5a   8.22:1 ✓
 *                Zahl:     --color-navy      C1  #07003D  11.66:1 ✓
 *                Label:    --color-ink-soft  C6  #3a4c5a   8.22:1 ✓
 *                Border:   --color-border  dekorativ (kein Text)
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-18  Neu. Extrahiert aus stat1.php v1.0.0.
 *                      Farben auf COLOR-GUIDE Tokens.
 */

/* ── Section ─────────────────────────────────────────────────────── */
.st1__section {
    background:    var(--color-page);   /* C4 #f5f6f8 — kein blindendes Weiß */
    padding:       80px 0 96px;
    border-bottom: 1px solid var(--color-border); /* dekorativ ✓ */
    font-family:   var(--font-base);
}

.st1__container {
    max-width: var(--max-content);
    margin:    0 auto;
    padding:   0 var(--page-padding-x);
}

/* ── Header ──────────────────────────────────────────────────────── */
.st1__header {
    text-align:    center;
    margin-bottom: var(--space-12);
}

/* C5/C4 12.96:1 ✓ */
.st1__heading {
    font-size:      clamp(1.75rem, 4vw, 2.25rem);
    font-weight:    var(--weight-black);
    color:          var(--color-ink);
    letter-spacing: var(--tracking-tight);
    margin:         0 0 var(--space-2);
    line-height:    var(--leading-tight);
}

/* C6/C4 8.22:1 ✓ */
.st1__sub {
    font-size:   var(--text-base);
    color:       var(--color-ink-soft);
    margin:      0;
    line-height: var(--leading-normal);
}

/* ── Grid ────────────────────────────────────────────────────────── */
.st1__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-8);
}

/* ── Stat-Block ──────────────────────────────────────────────────── */
.st1__stat {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-2);
    padding:        0 var(--space-4);
    border-left:    3px solid var(--color-border); /* dekorativ ✓ */
}
.st1__stat:first-child { border-left: none; padding-left: 0; }

/* C1/C4 11.66:1 ✓ */
.st1__num {
    font-size:             clamp(2.8rem, 6vw, 4.25rem);
    font-weight:           var(--weight-black);
    color:                 var(--color-navy);
    letter-spacing:        var(--tracking-tight);
    line-height:           1;
    font-variant-numeric:  tabular-nums;
    transition:            opacity var(--transition-fast);
}
.st1__num.st1__counting { opacity: .85; }

/* C6/C4 8.22:1 ✓ */
.st1__label {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--color-ink-soft);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .st1__section   { padding: 56px 0 64px; }
    .st1__container { padding: 0 var(--page-padding-x-sm); }
    .st1__grid      { grid-template-columns: 1fr; gap: var(--space-8); }
    .st1__stat      {
        align-items:  center;
        text-align:   center;
        padding:      0;
        border-left:  none;
        border-top:   1px solid var(--color-border); /* dekorativ ✓ */
        padding-top:  var(--space-6);
    }
    .st1__stat:first-child { border-top: none; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .st1__num { transition: none; }
}