/* =====================================================================
   statCards — homepage "facts & figures" band, between the cert strip
   and the reference-logo band (order rev. 3, user 2026-07-07). Replaces
   the two old plain fascinationFacts / isoStandards number rows.

   A light full-bleed section with a centred grid of icon cards: gold
   line-icon, big navy count-up number, short uppercase label. The
   numbers tick 0 -> target once when the band scrolls into view
   (js/statCards.js; reduced-motion shows the final value at once).
   BEM naming, brand tokens mirror heroKuzu.css / footer (#eef1f5 tone).
   ===================================================================== */

.stat-cards {
    --sc-navy: #253D66;
    --sc-gold: #FCBA00;
    --sc-label: #5b6b82;

    width: 100vw;                        /* full-bleed like the hero / logo band */
    margin-left: calc(50% - 50vw);
    margin-bottom: 0;                    /* logo band ("Trusted by") folgt direkt darunter */
    background: #ffffff;
    padding: 56px 0 56px;                /* 56 = halbe Zäsur oben+unten -> jeder Übergang 112px, einheitlich (user 2026-07-08; +25% pass 2026-07-16, war 45/90) */
}

.stat-cards__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* heading + lead use the shared .fit-kicker / .fit-heading / .fit-intro; the lead now
   sits in the two-column .fit-sechead (sectionHeading.css, user 2026-07-10) — its
   measure comes from the grid column, the old local 640px cap is gone. */

.stat-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* --- card (plain div, or <a> when the .phtml sets an href) ------------ */
.stat-card {
    position: relative;
    overflow: hidden;
    display: block;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 0;                    /* eckig, keine abgerundeten Ecken */
    padding: 34px 22px 30px;
    text-align: center;
    text-decoration: none;               /* as <a>: keep the card look, no link styling */
    box-shadow: 0 6px 20px rgba(37, 61, 102, .06);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
a.stat-card:hover,
a.stat-card:focus-visible { text-decoration: none; }

/* gold top-edge accent, revealed on hover */
.stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 3px;
    background: var(--sc-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

/* :focus-visible pairs with :hover like the sibling card modules (serviceTiles /
   useCaseCards) — the linked cards were the only family member without a keyboard
   state (a11y fix 2026-07-10) */
.stat-card:hover,
a.stat-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(37, 61, 102, .12);
    border-color: #dde3ec;
}
.stat-card:hover::before,
a.stat-card:focus-visible::before { transform: scaleX(1); }

.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-bottom: 16px;
    color: var(--sc-gold);            /* plain gold icon on white, no bg shape */
}
.stat-card__icon svg { width: 34px; height: 34px; display: block; }

.stat-card__num {
    display: block;
    color: var(--sc-navy);
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.stat-card__label {
    display: block;
    margin-top: 12px;
    color: var(--sc-label);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;          /* = uppercase-label family (serviceTiles/useCaseCards/whenFit); was 600 */
    letter-spacing: .04em;     /* dito; was .06em (einziger Ausreißer der Familie) */
    text-transform: uppercase;
}

/* --- responsive: 4-up desktop -> 2x2 below 992px -------------------- */
@media (max-width: 991px) {
    .stat-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .stat-cards { padding: 38px 0 38px; margin-bottom: 0; }   /* 38 = mobile halbe Zäsur (+25% 2026-07-16, war 30) */
    .stat-cards__inner { padding: 0 16px; }
    .stat-cards__grid { gap: 16px; }
    .stat-card { padding: 28px 16px 24px; }
    .stat-card__icon { width: 36px; height: 36px; margin-bottom: 12px; }
    .stat-card__icon svg { width: 30px; height: 30px; }
}

/* reduced motion: no hover lift / accent slide (count-up is disabled in JS) */
@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .stat-card::before { transition: none; }
    .stat-card:hover,
    a.stat-card:focus-visible { transform: none; }
}