/**
 * KSM Counter-Grid
 *
 * Kennzahlen-Grid (Desktop: gleichmäßige Verteilung je nach Anzahl).
 * Pro Eintrag: Icon → Counter (Zahl) + optionales Suffix → Label → Text.
 *
 * Alle Stellschrauben zentral über die Variablen im .ksm-counter-grid-Block.
 */

.ksm-counter-grid {
    /* ===== zentrale Stellschrauben ===== */
    --ksm-counter-cols:      2;                                  /* Spalten (Tablet) */
    --ksm-counter-gap:       var(--ksm-spacing-xl);              /* 36px Abstand zwischen Einträgen */
    --ksm-counter-icon-size: calc(var(--ksm-spacing-base) * 6);  /* 72px Icon-Breite */
    --ksm-counter-color:     var(--ksm-color-secondary);         /* Farbe der Zahl */

    display: flex;
    flex-wrap: nowrap;
    gap: var(--ksm-counter-gap);
    align-items: start;
}

/* ===== Eintrag ===== */
.ksm-counter {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ksm-spacing-sm);
}

/* ===== Icon ===== */
.ksm-counter__icon {
    margin-bottom: var(--ksm-spacing-sm);
}

.ksm-counter__icon-img {
    display: block;
    width: var(--ksm-counter-icon-size);
    height: auto;
}

/* ===== Counter (Zahl + Suffix) ===== */
.ksm-counter__value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--ksm-spacing-xs);
    color: rgba(var(--ksm-counter-color), 1);
    font-family: var(--ksm-font-italic);
    font-style: italic;
    font-weight: var(--ksm-font-weight-normal);
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);   /* 32 → 52px */
    line-height: 1;
}

/* Suffix (€, %, +) — separat stylbar, hier gleiche Größe wie die Zahl */
.ksm-counter__suffix {
    font: inherit;
}

/* ===== Label (uppercase, Regular — bewusst kein Heading) ===== */
.ksm-counter .ksm-counter__title {
    margin: 0;
    color: rgba(var(--ksm-color-text), 1);
    font-weight: var(--ksm-font-weight-normal);  /* überschreibt evtl. Bold-Defaults */
    font-size: var(--ksm-font-size-sm);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ===== Text ===== */
.ksm-counter__text {
    margin: 0;
    color: rgba(var(--ksm-color-text), 0.7);
    font-size: var(--ksm-font-size-sm);
    line-height: var(--ksm-line-height-normal);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 959px) {
    .ksm-counter-grid {
        display: grid;
        grid-template-columns: repeat(var(--ksm-counter-cols), 1fr);
    }

    .ksm-counter {
        flex: unset;
        min-width: unset;
    }
}