/* =====================================================================
   Seiten-CSS: Zertifizierungen
   Referenz: design-handoff/source/design/Zertifizierungen.dc.html
   Hero-Basis (.hero, .hero-bg--gray, .hero-inner, .btn-row, .pill*) aus style.css.
   ===================================================================== */

/* Sektion „Nachweise / Unsere Zertifikate“: weiß, Padding 80px 0 (Design) */
.zert-sec { background: var(--white); padding: clamp(48px, 6.5vw, 80px) 0; }

/* Kartenraster: 3 Spalten, gap 28px, margin-top 44px */
.zert-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(32px, 4vw, 44px); }

/* Karte: Border #e6eaf0, Radius 16, Padding 18, Shadow 0 8px 30px rgba(16,28,54,.08) */
.zert-card { min-width: 0; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; padding: 18px; box-shadow: 0 8px 30px rgba(16, 28, 54, .08); }
.zert-card-img { display: block; width: 100%; height: auto; border-radius: 6px; }
.zert-card-title { color: var(--navy); font-size: 16px; font-weight: 600; line-height: 1.35; margin: 16px 0 0; }
.zert-card-sub { color: var(--text-2); font-size: 13.5px; line-height: 1.45; margin: 4px 0 0; }

/* Dritte Karte (Verbandsmitgliedschaft): zentriert, gap 14 */
.zert-card--center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.zert-card--center .zert-card-title, .zert-card--center .zert-card-sub { margin: 0; }
.zert-badge { display: block; width: 150px; max-width: 100%; height: auto; }

@media (max-width: 980px) {
  .zert-cards { grid-template-columns: 1fr; gap: 24px; }
  /* Einspaltig: Karten nicht auf volle Tablet-Breite ziehen, Zertifikate bleiben lesbar */
  .zert-card { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* H1 „Zertifizierte Fachbetriebs­qualität“: Zeilen ausbalancieren, damit der weiche Trennstrich
   nur greift, wenn das Wort allein nicht in die Zeile passt (≤ ~400px). */
.hero-text h1 { text-wrap: balance; }