/* Startseite · diagnose (Owner: wdf-section-builder, Auftrag P7-home-90) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width. Statische Fassung; Bewegung (Bild blendet ein, Karte legt sich darüber, Prüfpunkte reihen sich ein) baut P8 darauf.
   Aus base.css kommen: .modul, .kapitel-kopf, .eyebrow, .lead, .szene/.szene-bild/.szene-ui, .app-karte/.app-kopf und die gesamte
   diagnose-formular-Komponente (.dg-pruef*, .dg-szene, .dg-karte, .dg-feld, .dg-meldung, .dg-erfolg, Zustände leer/fehler/erfolg; ui.js setzt sie).
   Hier nur das Raster des Abschnitts. */

/* ---------- Raster: mobil Kopf (mit Prüfliste) → Bild + Karte ---------- */
.dg-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
.dg-buehne { min-width: 0; }

/* ---------- ab 1024 px: links Kopf + Prüfliste (4), rechts Bühne mit überlappender Karte (7) ---------- */
@media (min-width: 1024px) {
  .dg-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap-story2); align-items: center; }
}

/* P9 (K-CONV-06): Prüfpunkte als Nutzen für den Inhaber, Fachbegriff klein darunter (Zuordnung wie Kontakt/Erstkontakt).
   Statt Pillen ein Kachelraster mit 2 Spalten (zweizeilige Pillen tragen nicht); Erfolgs-Animation aus base.css bleibt. */
.dg-pruef--nutzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dg-pruef--nutzen li {
  align-items: flex-start; padding: var(--space-8) var(--space-10); border-radius: var(--radius-sm);
  font: var(--font-weight-medium) var(--font-size-caption-sm) / var(--leading-snug) var(--font-text); letter-spacing: 0; text-transform: none; color: var(--color-text);
}
.dg-pruef--nutzen li svg { flex: none; margin-top: var(--space-2); }
.dg-p-txt { display: grid; gap: var(--space-2); min-width: 0; }
.dg-p-txt small { font-size: var(--font-size-mono-2xs); color: var(--color-text-tertiary); overflow-wrap: anywhere; }