/* ==========================================================================
   80 agentischer-bau · Owner: wdf-section-builder (Auftrag P7-80)
   Text → Freigabe-Karte (bedienbar) → vier Zusagen → Personenzeile. (Zitat Fleischmann entfällt, F2b: steht vollständig in 90.)
   Ab 1024: Text links, Karte rechts; darunter die Zusagen über die volle Breite, dann die Personenzeile.
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   Türkis nur als Kontur (style-lock § 8, Fix 7): Prüfschritte, Chip „Freigegeben“ und Zusagen ohne gefüllte Zeichen.
   ========================================================================== */

/* ---------- Abschnitt ---------- */
.bau__grid { row-gap: var(--s-4); }
.bau__text, .bau__card, .bau__pledges, .bau__person { min-width: 0; }
/* Gruppen: Text → Karte 24, Karte → Zusagen → Person je 16 (Zusagen innen 8, Text innen 12) */
.bau__card { margin-top: var(--s-2); }

/* Nur Smartphone (bis 767): zweiter Absatz als Kleintext (15 px), Zeilenabstand der Oberfläche; das hält den Abschnitt im Längenbudget (style-lock § 13, Auftrag F2b ≤ 1300 px bei 390). Ab 768 gilt wieder der Fließtext. */
.bau__text .body { font-size: var(--fs-small); }
.bau__text .body { line-height: var(--lh-ui); }

/* ---------- Freigabe-Karte (Fenster) ---------- */
.bau-card { min-width: 0; }
.bau-card__bar { column-gap: var(--s-3); }

/* Drei Chips in einer Rasterzelle: die Zelle ist so breit wie der breiteste, der Wechsel ändert nichts am Layout */
.bau-chips { display: grid; }
.bau-chip { grid-area: 1 / 1; justify-self: start; visibility: hidden; }
.bau-card[data-status="wartet"] .bau-chip--wartet,
.bau-card[data-status="freigegeben"] .bau-chip--freigegeben,
.bau-card[data-status="ueberarbeitung"] .bau-chip--ueberarbeitung { visibility: visible; }

.bau-card__body { position: relative; display: grid; gap: var(--s-3); padding: var(--s-3); }
.bau-card__title {
  font-family: inherit;
  font-size: var(--fs-ui-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}
/* Unterzeile: Glieder mit Trennpunkt per ::before in der Lücke; der Punkt des ersten Glieds jeder Zeile fällt aus dem Kasten und wird abgeschnitten (nie ein Punkt am Zeilenende) */
.bau-card__sub {
  display: flex; flex-wrap: wrap; column-gap: var(--s-3);
  margin-top: var(--s-1); overflow: hidden;
  font-size: var(--fs-ui-meta); line-height: var(--lh-ui); color: var(--color-text-muted);
}
.bau-card__sub > * { position: relative; min-width: 0; }
.bau-card__sub > * + *::before {
  content: "·";
  content: "·" / "";   /* reine Zierde: Screenreader lesen den Punkt nicht mit */
  position: absolute; inset-inline-end: 100%; inline-size: var(--s-3); text-align: center;
}
.bau-card__sub .mono { font-size: var(--fs-mono); }

/* Prüfschritte: eine Gruppe mit Haarlinien, jede Zeile ein Schalter (Zeile ≥ 44 px, ganze Zeile ist die Trefferfläche) */
.bau-steps {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m);
  overflow: hidden;
}
.bau-steps li + li { border-top: 1px solid var(--color-line); }
.bau-step {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: calc(var(--s-6) + var(--s-1));
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
/* echtes Kontrollkästchen bleibt im Dokument (Tastatur, Screenreader), sichtbar ist das Zustandszeichen */
.bau-step__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.bau-step:has(.bau-step__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: calc(var(--s-1) / -2); }
.bau-step:active .bau-step__mark { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  .bau-step:hover { background: var(--color-ui-raised); }
}
.bau-step__mark { display: grid; flex: none; transition: transform var(--dur-press) var(--ease-out); }
.bau-step__txt { flex: 1 1 0; min-width: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; text-wrap: pretty; }
.bau-step__txt .mono { font-size: var(--fs-mono); }
.bau-step__word { flex: none; font-size: var(--fs-ui-meta); }

/* geprüft / offen: beide Fassungen im Markup, der Zustand des Kontrollkästchens wählt */
.bau-step__off { display: none; }
.bau-step__input:not(:checked) ~ .bau-step__mark .bau-step__on,
.bau-step__input:not(:checked) ~ .bau-step__word .bau-step__on { display: none; }
.bau-step__input:not(:checked) ~ .bau-step__mark .bau-step__off { display: inline-grid; }
.bau-step__input:not(:checked) ~ .bau-step__word .bau-step__off { display: inline; }
.bau-step__input:checked ~ .bau-step__word { color: var(--color-text-muted); }
.bau-step__input:not(:checked) ~ .bau-step__word { color: var(--color-text); }

/* Fuß der Karte: Knöpfe; die Meldung hängt als Bezugsrahmen an dieser Gruppe */
.bau-foot { position: relative; }

/* Knopfzeile: nebeneinander, solange es passt; Umbruch statt Überlauf */
.bau-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bau-actions .btn-ui { flex: 1 1 auto; padding-inline: var(--s-3); }
.bau-actions .btn-ui--quiet { padding-inline: var(--s-2); }

/* Meldung über den Knöpfen: sitzt mit ihrer Unterkante direkt über der Knopfzeile (nach oben wachsend, also ohne Höhenänderung der Karte).
   Titel, Unterzeile und Knöpfe bleiben frei. Sie lässt Eingaben durch, damit sie nie einen Prüfschritt verdeckt, den der Besucher antippen will. */
.bau-card__toast { left: 0; right: 0; top: auto; bottom: calc(100% + var(--s-2)); pointer-events: none; }
.bau-card__toast .toast { align-items: flex-start; }
.bau-card__toast span { min-width: 0; text-wrap: pretty; }

/* ---------- Zusagen: ruhige Liste, Zeichen als Kontur, Titel läuft im Satz ---------- */
.bau__pledges { display: grid; gap: var(--s-2); align-content: start; }
.bau-pledge { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); align-items: start; }
.bau-pledge .glyph { margin-top: calc(var(--s-1) / 2); }
.bau-pledge p { max-width: var(--measure); line-height: var(--lh-quote); }

/* ---------- ab 480 ---------- */
@media (min-width: 480px) {
  .bau-card__body { padding: var(--s-4); }
}

/* ---------- ab 768: Zusagen zweispaltig, Karte nicht breiter als eine Lesespalte ---------- */
@media (min-width: 768px) {
  .bau__grid { row-gap: var(--s-5); }
  .bau__card { margin-top: 0; }
  .bau__text .body, .bau__text .body + .body { font-size: var(--fs-body); line-height: var(--lh-body); }
  .bau-pledge p { line-height: var(--lh-ui); }
  .bau__card { max-width: var(--measure); }
  .bau__pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
  .bau-actions .btn-ui { flex: 0 0 auto; padding-inline: var(--s-4); }
}

/* ---------- ab 1024: Text links · Karte rechts; Zusagen darunter ---------- */
@media (min-width: 1024px) {
  .bau__grid { align-items: start; column-gap: var(--grid-gap); row-gap: var(--s-6); }
  .bau__text { grid-column: 1 / span 6; grid-row: 1; }
  .bau__card { grid-column: 8 / span 5; grid-row: 1; max-width: none; }
  .bau__pledges { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--grid-gap); }
}

/* ---------- ab 1280: alle vier Zusagen in einer Reihe ---------- */
@media (min-width: 1280px) {
  .bau__pledges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* motion — Owner: wdf-motion-designer (P8-U), Bewegung freigabe-zustand (motion.js setzt data-motion="ready")
   Alles nur Deckkraft und transform. Unter Reduced Motion und ohne JS gilt der Wechsel wie oben (sofort). */
@media (prefers-reduced-motion: no-preference) {
  /* Status-Chip: der alte geht (--dur-exit), der neue kommt an Ort und Stelle (Deckkraft + scale 0,96 → 1, --dur-base).
     Die drei Chips teilen sich eine Rasterzelle; visibility wechselt erst nach dem Ausgang. */
  .bau-chip {
    opacity: 0; transform: scale(0.96);
    transition:
      opacity var(--dur-exit) var(--ease-out),
      transform var(--dur-exit) var(--ease-out),
      visibility 0s var(--dur-exit);
  }
  .bau-card[data-status="wartet"] .bau-chip--wartet,
  .bau-card[data-status="freigegeben"] .bau-chip--freigegeben,
  .bau-card[data-status="ueberarbeitung"] .bau-chip--ueberarbeitung {
    opacity: 1; transform: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s;
  }

  /* Prüfschritt: Zeichen „offen“ (halber Kreis) ↔ „geprüft“ (Haken-Ring) überblenden (--dur-fast).
     Beide Zeichen liegen in derselben Zelle (gleiche Größe, nichts springt); das Wort daneben wechselt sofort.
     Erst nach dem Laden (data-motion="ready"), damit beim Aufbau nichts einblendet. */
  .bau-card[data-motion="ready"] .bau-step__mark .glyph {
    display: inline-grid; grid-area: 1 / 1;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .bau-card[data-motion="ready"] .bau-step__input:checked ~ .bau-step__mark .bau-step__off,
  .bau-card[data-motion="ready"] .bau-step__input:not(:checked) ~ .bau-step__mark .bau-step__on { opacity: 0; }
}

/* ---------- Personenzeile auf allen Breiten ausblenden: der Block lebt in 120 bei der Buchungskarte (K-VIS-02/04) ---------- */
.bau__person { display: none; }

/* motion — Owner: wdf-motion-designer (P16-M, Runde 3b), Bewegung pruef-haken (motion.js)
   Während die Reviewer-Agenten abhaken (data-motion-pruefung, nur bei geprüften Schritten): Zeichen und Wort beider
   Fassungen liegen übereinander in einer Zelle, motion.js blendet „Offen“ → „Geprüft“. Breite = breiteste Fassung
   („Geprüft“, wie im Endzustand), keine Übergänge aus CSS (GSAP führt). */
.bau-steps[data-motion-pruefung] .bau-step__input:checked ~ .bau-step__mark .glyph {
  display: inline-grid; grid-area: 1 / 1; transition: none;
}
.bau-steps[data-motion-pruefung] .bau-step__input:checked ~ .bau-step__word { display: inline-grid; justify-items: end; }
.bau-steps[data-motion-pruefung] .bau-step__input:checked ~ .bau-step__word > span { grid-area: 1 / 1; display: inline; }