/* ==========================================================================
   certana/stats  („Konkrete Ergebnisse“)
   Mobil: 2×2-Raster ohne Symbole, Wert groß und orange.
   Ab 992px: Überschrift zentriert, Kacheln in einer Reihe mit Symbol im Kreis.
   ========================================================================== */

.stats {
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f9fc 100%);
}

.stats__head { margin-bottom: clamp(1.25rem, 3vw, 2.75rem); }
.stats__eyebrow { margin-bottom: 0.75rem; }

.stats__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 1.4rem 0.75rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(11, 18, 32, 0.05);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 16px 36px -28px rgba(11, 18, 32, 0.3);
}

/* Symbol nur ab Desktop (Mobil-Entwurf ohne Symbole) */
.stat__icon {
    display: none;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 1.4rem;
    border-radius: 50%;
    background: #fff1e3;
    color: var(--c-accent);
}
.stat__icon .icon { width: 36px; height: 36px; stroke-width: 1.8; }

.stat__value {
    margin: 0 0 0.35rem;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--c-accent);
    overflow-wrap: anywhere;
    hyphens: auto;
}
.stat__marker {
    top: -1.1em;
    margin-left: 0.1em;
    font-family: var(--font-sans);
    font-size: 0.35em;
    font-weight: 500;
    color: var(--c-muted);
}

.stat__label {
    margin: 0 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}

.stat__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--c-muted);
}

.stats__footnote {
    max-width: 52rem;
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--c-muted);
}

/* Tablet ----------------------------------------------------------------- */
@media (min-width: 768px) {
    .stats__grid { gap: 1rem; }
    .stat { padding: 2rem 1.25rem 2.1rem; }
    .stat__label { font-size: 1.125rem; }
    .stat__text { font-size: 0.9375rem; }
}

/* Desktop: eine Reihe mit Symbolen --------------------------------------- */
@media (min-width: 992px) {
    .stats__head { text-align: center; }
    .stats__footnote { margin-inline: auto; text-align: center; }

    .stats__grid {
        grid-template-columns: none;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: clamp(1rem, 1.6vw, 1.5rem);
    }

    .stat { padding: 2.25rem 1.5rem 2.5rem; }
    .stat__icon { display: grid; }
    .stat__label { font-size: clamp(1.125rem, 0.95rem + 0.35vw, 1.375rem); }
    .stat__text { font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.0625rem); }
}