/* =====================================================================
   certStrip — slim certification strip. Sits UNDER the homeStatement
   positioning block as its proof (user 2026-07-08 reorder: the claim
   "Anspruch"/"Our standard" first, the cert badges as evidence right below;
   was directly under the hero before). Typographic badges (no third-party
   cert logos), gold shield-check icons, navy names, each badge links to its
   certificate PDF. White ground; statCards follows (brings its own 28px top).

   No lead-in label (user 2026-07-07). Badges are EQUAL-WIDTH, rows CENTRED,
   and stack full-width on mobile -> always tidy regardless of viewport (the
   old auto-width + left wrap produced ragged 4+1 / 2+2+1 rows). Internal
   layout stays icon-left / text-right (NOT the icon-top statCards look).
   ===================================================================== */

.cert-strip {
    --cs-navy: #253D66;
    --cs-gold: #FCBA00;
    --cs-text: #5b6b82;

    width: 100vw;                        /* full-bleed like the sibling sections */
    margin-left: calc(50% - 50vw);
    background: #ffffff;
    padding: 8px 0 8px;                  /* certStrip is the MIDDLE of the "Our standard" trias (statement -> certificates -> references): tight ~16px on BOTH sides, KEPT off the +25% pass so the trias stays grouped (user 2026-07-16) */
}

.cert-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* equal-width badges, rows centred */
.cert-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 18px);
}

/* --- badge (links to the certificate PDF) ------------------------------ */
.cert-badge {
    flex: 1 1 190px;                     /* grow to fill... */
    max-width: 230px;                    /* ...but cap so EVERY badge (incl. the last row) is the same width */
    min-height: 64px;                    /* ALL badges the same height, even when a subline wraps to 2 lines */
    display: flex;
    align-items: center;
    justify-content: flex-start;         /* icon left, text right */
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid #e6eaf0;
    border-radius: 0;                    /* eckig, wie die Karten-Familie */
    background: #fff;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cert-badge:hover,
.cert-badge:focus-visible {
    text-decoration: none;
    border-color: #dde3ec;
    box-shadow: 0 6px 16px rgba(37, 61, 102, .10);
    transform: translateY(-2px);
}

.cert-badge__icon {
    width: 22px; height: 22px;
    flex: 0 0 auto;
    color: var(--cs-gold);
}

.cert-badge__text { display: flex; flex-direction: column; line-height: 1.2; }
.cert-badge__name { color: var(--cs-navy); font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.cert-badge__sub  { color: var(--cs-text); font-size: 11px; letter-spacing: .02em; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
    .cert-strip { padding: 6px 0 6px; }   /* trias tight, mobile (~12px, kept off the +25% pass) */
    .cert-strip__inner { padding: 0 16px; }
    /* full-width stack: badges are single-line -> naturally equal height (no min);
       identifier (icon + name) LEFT, description RIGHT -> fills the wide field
       instead of leaving empty white space (user 2026-07-07) */
    .cert-badge { flex-basis: 100%; max-width: none; min-height: 0; padding: 12px 16px; }
    .cert-badge__text {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cert-badge { transition: none; }
    .cert-badge:hover { transform: none; }
}