/* Startseite · bausteine (Owner: wdf-section-builder, Auftrag P7-home-70) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width. Statische Fassung = Endzustand jeder Karte; Bewegung baut P8 darauf (Haken im HTML-Kommentar).
   Aus base.css kommen: .modul, .kapitel-kopf, .eyebrow, .lead, .szene/.szene-bild/.szene-ui, .app-karte/.app-kopf, .pfeil-link,
   .bs-demo, .bs-nutzen/.bsn-*, .bsu-* (Spanne, Bahn, Person, Toast …).
   base.css beschreibt Bausteine noch im Stand P4-B13 (Karten 2 je Reihe mit Subgrid, Oberfläche .bs-ui, blaue Verweis-Box,
   größere Oberflächen ab 1024 px). P4-B15 ordnet neu: je Add-on ein Creative mit kleiner App-Karte, Text daneben, Leiste ohne Kartenfläche.
   Darum stehen die betroffenen Regeln hier unter .bausteine (höhere Spezifität) im Stand P4-B15 — Anfrage an den Lead, base.css nachzuziehen.
   Neun Maße als Token-Verweis mit Prototyp-Wert als Rückfall, bis tokens.css sie führt (Anfrage P7-home-70):
   --size-addon-card(-md|-lg), --size-demo-col, --gap-addons, --gap-addon-cols, --font-size-benefit-sm, --tracking-benefit, --font-size-ui-value-md. */

/* ---------- Kopfzone: Kapitelkopf + Verweis auf das Live-Beispiel ---------- */
.bausteine .bs-kopf { display: grid; gap: var(--space-24); align-items: end; }

/* Verweis: ruhige Textzeile mit Kreis-Icon statt blauer Box (konkurriert nicht mit den Add-ons) */
.bausteine .bs-demo {
  display: inline-grid; grid-template-columns: var(--size-avatar) minmax(0, 1fr); gap: var(--space-14); align-items: center;
  justify-self: start; max-width: var(--size-app-card); min-height: var(--size-target); padding: var(--space-4) 0;
  border-radius: var(--radius-sm); background: none; box-shadow: none;
  color: var(--color-text-tertiary); font-size: var(--font-size-small); line-height: var(--leading-caption); text-decoration: none;
}
.bausteine .bs-demo b {
  display: block; color: var(--color-text); font-weight: var(--font-weight-medium); font-size: var(--font-size-ui);
  text-decoration: underline; text-decoration-color: var(--color-line-strong); text-decoration-thickness: 1px; text-underline-offset: var(--space-4);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.bausteine .bs-demo-ico {
  width: var(--size-avatar); height: var(--size-avatar); background: none; color: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-soft-a50);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.bausteine .bs-demo-ico svg { width: var(--space-16); height: var(--space-16); }
@media (hover: hover) {
  .bausteine .bs-demo:hover { background: none; box-shadow: none; }
  .bausteine .bs-demo:hover b { text-decoration-color: var(--color-accent); }
  .bausteine .bs-demo:hover .bs-demo-ico { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--glow-icon); }
}

/* ---------- Nutzen-Leiste: ohne Kartenfläche, nur Haarlinien oben/unten (Aufbau und Spalten aus base.css) ---------- */
.bausteine .bs-nutzen {
  margin-top: var(--space-48); padding: var(--space-24) 0; border-radius: 0; background: none; box-shadow: none;
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
}
.bausteine .bsn-chip { min-height: var(--space-32); padding: 0 var(--space-13); font-size: var(--font-size-mono-md); }
.bausteine .bsn-plus { width: var(--space-24); height: var(--space-24); font-size: var(--font-size-small); }
.bausteine .bsn-fluss { height: var(--space-24); }
.bausteine .bsn-seite { gap: var(--space-6); }
.bausteine .bsn-kern {
  font-size: var(--font-size-benefit-sm, clamp(1.125rem, 1.05rem + .4vw, 1.375rem)); line-height: var(--leading-mono);
  letter-spacing: var(--tracking-benefit, -.015em);
}
.bausteine .bsn-text { font-size: var(--font-size-small); line-height: var(--leading-text); }

/* ---------- Add-ons: je eines = Creative mit Karte + Text. Mobil Bild, Karte, Text untereinander ---------- */
.bs-liste { display: grid; gap: var(--space-64); margin-top: var(--space-64); }
.bs-addon { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); align-items: center; }
.bs-szene { min-width: 0; }
.bs-szene .szene-ui { margin: calc(-1 * var(--space-40)) var(--space-12) 0; max-width: var(--size-addon-card, 300px); min-width: 0; }

.bausteine .bs-text { display: grid; gap: var(--space-12); align-content: start; justify-items: start; min-width: 0; padding: 0; }
.bausteine .bs-text > * { margin-left: 0; margin-right: 0; }
.bausteine .bs-text > .eyebrow { margin-top: 0; color: var(--color-accent-soft); }
.bausteine .bs-text h3 { font-size: var(--font-size-station); line-height: var(--leading-station); letter-spacing: var(--tracking-station); text-wrap: balance; }
.bausteine .bs-text p:not(.eyebrow) { max-width: 40ch; color: var(--color-text-secondary); text-wrap: pretty; }
.bausteine .bs-text .pfeil-link { margin-top: var(--space-4); }
.bausteine .bs-hinweis { margin-top: var(--space-64); color: var(--color-text-tertiary); font-size: var(--font-size-mono); }

/* ---------- Daten-Karte auf dem Creative: höchstens drei Zeilen unter dem Kopf (Beispieldaten aus Story 1) ---------- */
.bausteine .bs-karte {
  grid-row: auto; grid-template-rows: none; gap: var(--space-12); padding: var(--space-14) var(--space-16) var(--space-16);
  border-radius: var(--radius-card); overflow: visible;
}
.bausteine .bs-karte > * { min-width: 0; }
.bausteine .bs-karte .app-kopf > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bausteine .bs-karte .app-kopf > :last-child { flex: none; }

/* 01 Preisrechner: Preisspanne + Regler (Spanne und Griffe aus base.css) */
.bausteine .bsu-label { margin-top: 0; color: var(--color-text-tertiary); font-size: var(--font-size-caption-sm); line-height: var(--leading-mono); }
.bausteine .bsu-wert { margin-top: calc(-1 * var(--space-4)); }
.bausteine .bsu-spanne { margin-top: 0; }

/* 02 Routing: eine Kriterienzeile, Lichtpunkt läuft zur Ziel-Person */
.bausteine .bsu-krit { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-ui-sm); color: var(--color-text); white-space: nowrap; overflow: hidden; }
.bausteine .bsu-krit > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bausteine .bsu-ok { flex: none; width: var(--size-check-sm); height: var(--size-check-sm); }
.bausteine .bsu-ok svg { width: var(--size-icon-3xs); height: var(--size-icon-3xs); }
.bausteine .bsu-ziel { grid-template-columns: minmax(var(--size-target-min), 1fr) auto; gap: var(--space-10); margin-top: 0; align-self: auto; }
.bausteine .bsu-person { padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); font-size: var(--font-size-micro); }
.bausteine .bsu-person b { font-size: var(--font-size-caption); }

/* 03 Angebot: drei Zeilen, die letzte automatisch (CI hell) */
.bausteine .bsu-doc li { gap: var(--space-8); padding: var(--space-7) 0; font-size: var(--font-size-caption); }
.bausteine .bsu-doc li:first-child { padding-top: 0; }
.bausteine .bsu-doc li:last-child { padding-bottom: 0; }
.bausteine .bsu-doc li svg { width: var(--space-14); height: var(--space-14); }

/* 04 Portal: Auftrag mit Fortschritt + Folgetermin */
.bausteine .bsu-auftrag { gap: var(--space-8) var(--space-10); margin-top: 0; font-size: var(--font-size-ui-sm); }
.bausteine .bsu-auftrag > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bausteine .bsu-auftrag small { font-size: var(--font-size-mono-xs); }
.bausteine .bsu-auftrag .bsu-mini { height: var(--size-bar); }
.bausteine .bsu-toast { gap: var(--space-10); margin-top: 0; padding: var(--space-9) var(--space-11); font-size: var(--font-size-micro); }
.bausteine .bsu-toast b { font-size: var(--font-size-caption); }

/* ---------- ab 768 px: mehr Luft, Karte größer und weiter ins Bild ---------- */
@media (min-width: 768px) {
  .bausteine .bs-nutzen { padding: var(--space-32) 0; }
  .bs-liste { gap: var(--space-96); }
  .bs-addon { gap: var(--space-32); }
  .bs-szene .szene-ui {
    margin: calc(-1 * (var(--space-64) + var(--space-8))) 0 0 var(--space-24);
    width: min(var(--size-addon-card-md, 360px), 58%); max-width: none;
  }
  .bausteine .bs-text { padding-left: var(--space-4); }
}

/* ---------- ab 1024 px: Verweis neben dem Kapitelkopf; Add-ons abwechselnd Bild links/rechts (7 : 5) ---------- */
@media (min-width: 1024px) {
  .bausteine .bs-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-demo-col, 380px)); column-gap: var(--space-64); }
  .bs-liste { gap: var(--gap-addons, clamp(96px, 8vw, 136px)); margin-top: var(--space-96); }
  .bs-addon { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-addon-cols, clamp(48px, 6vw, 104px)); }
  .bs-addon:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .bs-addon:nth-child(even) .bs-szene { order: 2; }
  .bs-szene .szene-ui { margin: calc(-1 * var(--space-96)) 0 0 var(--space-32); width: min(var(--size-addon-card-lg, 380px), 58%); }
  .bausteine .bs-text { padding-left: 0; }
  .bausteine .bs-karte { gap: var(--space-14); padding: var(--space-16) var(--space-18) var(--space-18); }
  .bausteine .bsu-wert { font-size: var(--font-size-ui-value-md, 2.25rem); }
}

/* ---------- ab 1100 px: Nutzen-Leiste symmetrisch (Raster aus base.css), Lichtlinien waagrecht ---------- */
@media (min-width: 1100px) {
  .bausteine .bs-nutzen { padding: var(--space-32) 0; }
  .bausteine .bsn-fluss { height: 1px; }
}