/* DB Counter — self-contained, no Bootstrap dependency */

.db-counter-wrapper {
    --dbc-bg:      #333333;
    --dbc-text:    #ffffff;
    --dbc-radius:  5px;
    --dbc-gap:     16px;
}

/* ── Grid ─────────────────────────────────────────────── */

.db-counter-grid {
    display: flex;
    flex-wrap: nowrap;        /* one row on desktop */
    gap: var(--dbc-gap);
    align-items: stretch;     /* equal height */
}

/* wide: Kunden + Websites  — ratio 2 */
.db-counter-block--wide   { flex: 2 1 0; min-width: 0; }
/* narrow: computed values — ratio 1.33 */
.db-counter-block--narrow { flex: 1.33 1 0; min-width: 0; }

/* ── Card ─────────────────────────────────────────────── */

.db-counter-inner {
    height: 100%;
    padding: 28px 12px;
    background-color: var(--dbc-bg);
    color: var(--dbc-text);
    text-align: center;
    border-radius: var(--dbc-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}

.db-counter-inner i {
    color: var(--dbc-text);
    display: block;
}

/* ── Number row ───────────────────────────────────────── */

.db-counter-number {
    color: var(--dbc-text);
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 2.2rem);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.db-counter-suffix,
.db-counter-prefix {
    font-size: 0.65em;
    color: var(--dbc-text);
    font-weight: normal;
}

.db-counter-label {
    color: var(--dbc-text);
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ── Responsive ───────────────────────────────────────── */

/* ≤1199 px: 2 wide + 3 narrow → wrap, 2+3 */
@media (max-width: 1199px) {
    .db-counter-grid {
        flex-wrap: wrap;
    }
    .db-counter-block--wide {
        flex: 1 1 calc(50% - var(--dbc-gap) / 2);
        max-width: calc(50% - var(--dbc-gap) / 2);
    }
    .db-counter-block--narrow {
        flex: 1 1 calc(33.333% - var(--dbc-gap));
    }
}

/* ≤767 px: 2 columns */
@media (max-width: 767px) {
    .db-counter-block--wide,
    .db-counter-block--narrow {
        flex: 1 1 calc(50% - var(--dbc-gap) / 2);
        max-width: calc(50% - var(--dbc-gap) / 2);
    }
}

/* ≤479 px: 1 column */
@media (max-width: 479px) {
    .db-counter-block--wide,
    .db-counter-block--narrow {
        flex: 1 1 100%;
        max-width: 100%;
    }
}