/* Startseite · abschluss-cta (Owner: wdf-section-builder, Auftrag P7-home-110) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15, .schluss), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width. Statische Fassung; Bewegung (Lead + Aktion gestaffelt) baut P8 darauf.
   Aus base.css kommen: .wrap, .lead, .mikro, .link, .btn und das große Porträt (.portraet-gross, 4 : 5, Verlauf, figcaption). */

.abschluss { position: relative; padding: var(--space-section) 0 var(--space-section-end); }
.abschluss-raster { display: grid; gap: var(--space-48); align-items: center; }
.abschluss-text { display: grid; gap: var(--space-24); align-content: center; }
.abschluss-text h2 {
  font-size: var(--font-size-h2); line-height: var(--leading-h2-close); letter-spacing: var(--tracking-h2);
  text-wrap: balance; max-width: 16ch;
}
.abschluss-text .lead { max-width: 48ch; }

/* Aktion: Button, Mikrotext, leiser Link. Mobil Button über volle Breite */
.abschluss-aktion { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); margin-top: var(--space-8); }
.abschluss-aktion .btn { width: 100%; }
/* unter dem Button liegen Button-Schein und Wolkenkern: Mikrotext heller für ≥ 4,5 : 1 (style-lock.md § Kontraste) */
.abschluss-aktion .mikro { color: var(--color-text-secondary); }
.abschluss-leise { flex-basis: 100%; color: var(--color-text-secondary); font-size: var(--font-size-small); }
.abschluss-leise .link { display: inline-block; padding: var(--space-8) 0; }

@media (min-width: 560px) {
  .abschluss-aktion .btn { width: auto; }
}

/* ---------- ab 1024 px: Text links (1,25), Bernd rechts (0,75), rechtsbündig ---------- */
@media (min-width: 1024px) {
  .abschluss-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: var(--space-96); }
  .abschluss-bild { justify-self: end; }
}

/* P9 (K-PRJ-04): Graustufe des Porträts steht jetzt global an .portraet-gross img (base.css, P9-3). */