/* ==========================================================================
   70 Abgleich-Agent · Owner: wdf-section-builder (Auftrag P7-70)
   Smartphone zuerst. Nur Token-Werte (Kombinationen per calc).
   Zustände am Fenster: data-state = 1-abgleichen | 2-markieren | 3-rueckfrage | 4-aufgeloest,
   data-summary = true|false, je Zeile data-marked = true|false, Passt-Zeilen mobil data-open.
   ========================================================================== */

.agent-sec {
  --agent-mark-col: calc(var(--s-8) + var(--s-6) * 2);        /* 176 px Markierungsspalte (ab 768) */
  --agent-chip-h: calc(var(--s-5) + var(--s-1));              /* 28 px = Höhe .mark */
  --agent-answer-h: calc(var(--s-6) + var(--s-1) * 1.5);      /* 46 px Antwort-Knopf */
  --agent-knot: calc(var(--s-1) * 1.5);                       /* 6 px Knoten der Verbindungslinie */
  --agent-rule: calc(var(--s-1) / 2);                         /* 2 px Linie der Rückfrage (mobil) */
}
.agent-sec__grid { row-gap: var(--s-5); }

/* ---------- Fenster: Kopfzeile ---------- */
.agent__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name restart" "tag tag";
  align-items: center;
}
.agent__name { grid-area: name; display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
/* Icon-Kachel: Türkis nur als Kontur, keine Tönung (Fix 7) */
.agent__ico {
  width: calc(var(--s-5) + var(--s-1) / 2); height: calc(var(--s-5) + var(--s-1) / 2);
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--color-accent-line);
  border-radius: var(--r-s);
  color: var(--color-accent);
}
.agent__ico .icon { width: var(--s-4); height: var(--s-4); }
/* Etikett darf bei 200 % Zoom umbrechen (sonst ragt es aus dem Fenster) */
.agent__bar .tag {
  grid-area: tag; justify-self: start; margin-left: 0;
  max-width: 100%;
  height: auto; min-height: var(--s-5);
  padding-block: calc(var(--s-1) / 2);
  line-height: var(--lh-title);
  white-space: normal;
}
/* Unter 360 px passen Name und „Neu abgleichen“ nicht nebeneinander: Knopf in eigene Zeile */
/* 359 px: bewusste Ausnahme der Breakpoint-Liste (Name und „Neu abgleichen“ passen unter 360 px nicht nebeneinander) */
@media (max-width: 359px) {
  .agent__bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tag" "restart"; }
  .agent__restart { justify-self: start; }
}

/* „Neu abgleichen“: leiser Knopf in der Kopfzeile, Trefferfläche 44 px über ::before */
.agent__restart {
  grid-area: restart;
  position: relative;
  min-height: var(--s-5);
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--s-1);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.agent__restart::before { content: ""; position: absolute; inset: calc(var(--s-3) * -1 + var(--s-1) / 2) calc(var(--s-2) * -1); }
.agent__restart:not([aria-disabled="true"]):active { transform: scale(var(--press-scale)); }
/* Gesperrt per aria-disabled (bleibt fokussierbar, Klick bricht im Skript ab): Deaktiviert-Farben statt Deckkraft */
.agent__restart[aria-disabled="true"] { color: var(--color-disabled-text); text-decoration-color: var(--color-disabled-line); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .agent__restart:not([aria-disabled="true"]):hover { color: var(--color-text); text-decoration-color: var(--color-accent); }
}

/* ---------- Zusammenfassung / Ladezeile (eine Zelle, keine Höhenänderung) ---------- */
.agent-sum {
  display: grid;
  padding: var(--s-3) var(--s-4);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-ui-meta);
  color: var(--color-text-muted);
}
.agent-sum > * { grid-area: 1 / 1; align-self: center; }
.agent-sum__list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.agent-sum__list > span { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.agent[data-summary="false"] .agent-sum__list,
.agent[data-summary="true"] .agent-sum__loading { visibility: hidden; }

/* ---------- Tabelle Pflichtenheft ↔ Workshop ---------- */
/* Spaltenkopf mobil nur für Screenreader (visuell verborgen), ab 768 sichtbar */
.agent-head {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Zeile mobil (Fix 2): „id chip“ / „satz satz“ / „workshop workshop“.
   Die Markierung steht oben rechts auf der Höhe der ID; der Satz läuft darunter über die volle Breite. */
.agent-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "spec spec" "voice voice";
  column-gap: var(--s-3);
  --agent-pad-y: var(--s-3);                                   /* Innenabstand oben/unten; die Markierung steht mobil auf dessen Höhe */
  padding: var(--agent-pad-y) var(--s-4);
  border-bottom: 1px solid var(--color-line);
}
.agent-row__spec { grid-area: spec; display: grid; gap: var(--s-1); min-width: 0; color: var(--color-text); }
.agent-row__id {
  display: flex; align-items: center;
  min-height: var(--agent-chip-h);
  font-size: var(--fs-mono);
  color: var(--color-text-muted);
}
.agent-row__satz { text-wrap: pretty; }
.agent-row__mark {
  position: absolute; top: var(--agent-pad-y); inset-inline-end: var(--s-4);
  display: flex; align-items: center;
}
.agent-row__link { display: none; }

.agent-row__voice {
  grid-area: voice;
  min-width: 0;
  margin-top: var(--s-2);
  padding-inline-start: var(--s-3);
  border-inline-start: 1px dashed var(--color-line-strong);
  display: grid; gap: calc(var(--s-1) / 2);
  color: var(--color-text-muted);
}
.agent-row__label { font-size: var(--fs-ui-meta); font-weight: var(--fw-medium); color: var(--color-text-muted); }
.agent-row__quote { text-wrap: pretty; }

/* Passt-Zeilen mobil: Workshop-Zitat eingeklappt (Fix 1), Knopf „Aus dem Workshop“ */
.agent-row__toggle { display: none; }
html.js .agent-row--ok .agent-row__label { display: none; }
html.js .agent-row--ok .agent-row__toggle {
  display: inline-flex; justify-self: start;
  position: relative;
  min-height: calc(var(--s-5) + var(--s-1)); align-items: center;
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
html.js .agent-row--ok .agent-row__toggle::before { content: ""; position: absolute; inset: calc(var(--s-2) * -1 - var(--s-1) / 2) calc(var(--s-2) * -1); }
html.js .agent-row--ok:not([data-open="true"]) .agent-row__quote { display: none; }
@media (hover: hover) and (pointer: fine) {
  .agent-row__toggle:hover { color: var(--color-text); }
}

/* P-03: Zustand 1–3 der Satz aus dem Pflichtenheft, Zustand 4 (auch ohne JS) die Meldung „angepasst/bestätigt: …“ an seiner Stelle */
.agent-row__vorher { display: none; }
.agent-row__nachher { display: inline; }
.agent:not([data-state="4-aufgeloest"]) .agent-row__vorher { display: inline; }
.agent:not([data-state="4-aufgeloest"]) .agent-row__nachher { display: none; }
.agent-row__status { font-weight: var(--fw-semibold); }

/* Abweichung P-03: Tönung + Kontur (erst, wenn die Zeile markiert ist) */
.agent-row--warn[data-marked="true"] {
  background: var(--color-warn-tint);
  box-shadow: inset 0 0 0 1px var(--color-warn-line);
  border-bottom-color: transparent;
}

/* Fehlt (Fix 6): gestrichelte Leerzeile ohne Zeichen; Markierung im Fluss rechts daneben */
.agent-row--miss { grid-template-areas: "spec mark" "voice voice"; }
.agent-row--miss .agent-row__mark { grid-area: mark; position: relative; top: auto; inset-inline-end: auto; }
.agent-row__empty {
  display: block;
  min-height: var(--agent-chip-h);
  border: 1px dashed var(--color-miss-line);
  border-radius: var(--r-s);
}
.agent-row--miss .agent-row__voice { margin-top: var(--s-2); }

/* ---------- Zustand 1/2: noch nicht markierte Zeilen als Skelett in Textform ---------- */
.agent-row[data-marked="false"] .sk {
  color: transparent;
  background: var(--color-ui-raised);
  border-radius: var(--r-s);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: wdf-pulse var(--dur-pulse) var(--ease-in-out) infinite alternate;
}
.agent-row[data-marked="false"] .agent-row__empty {
  border-color: transparent;
  background: var(--color-ui-raised);
  animation: wdf-pulse var(--dur-pulse) var(--ease-in-out) infinite alternate;
}
.agent-row[data-marked="false"] .agent-row__mark,
.agent-row[data-marked="false"] .agent-row__toggle .icon { visibility: hidden; }
.agent-row[data-marked="false"] .agent-row__toggle { pointer-events: none; text-decoration-color: transparent; }
.agent-row[data-marked="false"] .agent-row__voice { border-inline-start-color: transparent; }

/* ---------- Rückfrage (Zustand 3 und 4) ---------- */
.agent:is([data-state="1-abgleichen"], [data-state="2-markieren"]) .agent-ask-row { display: none; }
.agent-ask-row {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--color-line);
}
/* Mobil ohne eigene Karte (Fix 6): eingerückter Block mit Bernstein-Linie links, von P-03 her */
.agent-ask {
  padding-inline-start: var(--s-3);
  border-inline-start: var(--agent-rule) solid var(--color-warn-line);
}
.agent-ask__head {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-semibold);
  color: var(--color-warn);
}
.agent-ask__head .icon { width: var(--s-4); height: var(--s-4); }
.agent-ask__head .mono { font-size: var(--fs-mono); }
.agent-ask__q { margin-top: var(--s-2); font-size: var(--fs-ui-title); line-height: var(--lh-ui); color: var(--color-text); text-wrap: pretty; }
.agent-ask__label { margin-top: var(--s-3); font-size: var(--fs-ui-meta); font-weight: var(--fw-medium); color: var(--color-text-muted); }
.agent-ask__btns { margin-top: var(--s-2); display: grid; gap: var(--s-2); }

/* ---------- Rückfrage nach der Antwort (K-PRJ-08): eine Zeile „Ihre Antwort: …“ + „ändern“; die Meldung zu P-03 steht im Satz der P-03-Zeile ----------
   Zustand 4 (auch ohne JS, steht im statischen HTML): Formular weg, Antwortzeile da. „ändern“ (data-ask="offen") kehrt es um. */
.agent-ask__done { display: none; }
.agent:is([data-state="4-aufgeloest"]):not([data-ask="offen"]) .agent-ask__form { display: none; }
.agent:is([data-state="4-aufgeloest"]):not([data-ask="offen"]) .agent-ask__done { display: block; }
.agent-ask__answer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  column-gap: var(--s-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-muted);
}
.agent-ask__answer .glyph { margin-top: calc((1lh - var(--g)) / 2); }
.agent-ask__answer strong { font-weight: var(--fw-semibold); color: var(--color-text); }
/* „ändern“ ohne JS wirkungslos: dann verborgen. Trefferfläche 44 px über ::before */
.agent-ask__change { display: none; }
html.js .agent-ask__change {
  display: inline-flex; align-items: center;
  position: relative;
  min-height: var(--s-5);
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
html.js .agent-ask__change::before { content: ""; position: absolute; inset: calc(var(--s-2) * -1 - var(--s-1) / 2) calc(var(--s-2) * -1); }
@media (hover: hover) and (pointer: fine) {
  .agent-ask__change:hover { color: var(--color-text); }
}

/* Antwort-Knopf: default Fenster + Ring · gewählt Türkis-Kontur + Tönung + voller Haken */
.agent-answer {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  min-height: var(--agent-answer-h);
  padding: 0 var(--s-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m);
  background-color: var(--color-ui-window);
  font-size: var(--fs-ui-title);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.agent-answer .kbd { margin-inline-start: auto; }
.agent-answer[aria-pressed="true"] {
  border-color: var(--color-accent-line);
  background-image: linear-gradient(var(--color-accent-tint), var(--color-accent-tint));
  color: var(--color-text);
}
.agent-answer:not(:disabled):active { transform: scale(var(--press-scale)); }
.agent-answer:disabled { color: var(--color-disabled-text); border-color: var(--color-disabled-line); background-color: transparent; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .agent-answer:not(:disabled):not([aria-pressed="true"]):hover { background-color: var(--color-ui-overlay-hover); color: var(--color-text); } /* § 12a Runde 3: App-Knopf unter dem Zeiger (P15-M) */
}

/* ---------- Protokoll + Abschluss (Zustand 4) ---------- */
.agent:not([data-state="4-aufgeloest"]) .agent-log { display: none; }
.agent-log__done {
  display: grid; justify-items: start; gap: var(--s-2);
}
.agent-log__done p { font-size: var(--fs-ui); font-weight: var(--fw-semibold); color: var(--color-text); text-wrap: pretty; }

/* ==========================================================================
   Unter 768 (kompakt, K-PRJ-08): Zeilenabstand 8–12 px, Passt-Zeilen mit eingeklapptem Aufklapper „Aus dem Workshop“ (P2),
   Rückfrage ohne sichtbare Beschriftung „Ihre Antwort“, zusammengeklappte Antwortzeile ohne Bernstein-Linie.
   Die Aufklapper der Passt-Zeilen kosten bei 390 px zusammen rund 40 px (Zeilen mit .agent-row--ok in diesem Block, html.js …__toggle).
   ========================================================================== */
@media (max-width: 767px) {
  /* Der Chip steht auf der ID-Zeile (min-height = Chip-Höhe): top = Innenabstand der Zeile, Unterkante Chip ≤ Oberkante Satz (K-UI-02/08, gemessen 320/360/390) */
  .agent-row--ok { --agent-pad-y: calc(var(--s-3) / 2); }
  /* übrige Zeilen, Rückfrage und Zusammenfassung mobil enger (8 statt 12 px innen) */
  .agent-row--warn,
  .agent-row--miss { --agent-pad-y: var(--s-2); }
  .agent-ask-row,
  .agent-sum { padding-block: var(--s-2); }
  .agent-sec__grid { row-gap: var(--s-4); }
  /* Aufklapper „Aus dem Workshop“ der Passt-Zeilen (P2) rückt an den Satz heran: kostet nur seine Höhe */
  .agent-row--ok .agent-row__voice { margin-top: 0; }
  .agent-row--ok .agent-row__spec { gap: 0; }
  html.js .agent-row--ok .agent-row__toggle { min-height: var(--s-5); }  /* 24 px (A07); Trefferfläche per ::before größer */
  html.js .agent-row--ok .agent-row__toggle::before { inset: calc(var(--s-3) * -1) calc(var(--s-2) * -1); }
  .agent-answer { min-height: calc(var(--s-6) + var(--s-1)); }                              /* 44 px: Mindestgröße der Trefferfläche */
  .agent-log { padding-block: var(--s-3); }
  /* Rückfrage: „Ihre Antwort“ nur für Screenreader (die Knöpfe stehen direkt unter der Frage; Gruppenname bleibt) */
  .agent-ask__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* Zusammengeklappt: Antwortzeile ohne Bernstein-Linie (die Frage ist beantwortet) und mit knappem Abstand */
  .agent:not([data-ask="offen"])[data-state="4-aufgeloest"] .agent-ask { padding-inline-start: 0; border-inline-start: 0; }
  .agent:not([data-ask="offen"])[data-state="4-aufgeloest"] .agent-ask-row { padding-block: var(--s-1) var(--s-2); }
}

/* ==========================================================================
   Ab 480: Abschluss-Chip neben dem Satz, sobald Platz ist
   ========================================================================== */
@media (min-width: 480px) {
  .agent-log__done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
}

/* ==========================================================================
   Ab 768: drei Spalten Pflichtenheft · Markierung · Aus dem Workshop, Verbindungslinie
   ========================================================================== */
@media (min-width: 768px) {
  .agent-sec__grid { row-gap: var(--s-6); }

  .agent__bar { display: flex; }
  .agent__bar .tag { margin-left: auto; }
  .agent__restart { margin-left: auto; }
  .agent__restart:not([hidden]) ~ .tag { margin-left: 0; }

  .agent-head {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--agent-mark-col) minmax(0, 1fr);
    column-gap: var(--s-5);
    padding: var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--color-line);
    font-size: var(--fs-ui-colhead);
    font-weight: var(--fw-medium);
    color: var(--color-text-subtle);
  }

  .agent-row,
  .agent-row--miss {
    grid-template-columns: minmax(0, 1fr) var(--agent-mark-col) minmax(0, 1fr);
    grid-template-areas: "spec mark voice";
    column-gap: var(--s-5);
    align-items: center;
  }
  .agent-row__spec { gap: calc(var(--s-1) / 2); }
  .agent-row__id { min-height: 0; font-size: var(--fs-mono-l); }
  .agent-row__mark,
  .agent-row--miss .agent-row__mark {
    grid-area: mark;
    position: relative; top: auto; inset-inline-end: auto;
    align-self: stretch;
    justify-content: center;
  }
  .agent-row__voice,
  .agent-row--miss .agent-row__voice { margin: 0; padding: 0; border: 0; }
  .agent-row__label,
  html.js .agent-row--ok .agent-row__toggle { display: none; }
  html.js .agent-row--ok:not([data-open="true"]) .agent-row__quote { display: block; }
  .agent-row__empty { min-height: calc(var(--s-6) + var(--s-1)); }

  /* Verbindungslinie 1 px mit Knoten an beiden Enden; die deckende Markierung liegt darüber */
  .agent-row__link {
    display: block;
    position: absolute; top: 50%;
    left: calc(var(--s-5) * -1 + var(--agent-knot));
    right: calc(var(--s-5) * -1 + var(--agent-knot));
    border-top: 1px solid currentColor;
  }
  .agent-row__link::before,
  .agent-row__link::after {
    content: ""; position: absolute;
    top: calc(var(--agent-knot) / -2);
    width: var(--agent-knot); height: var(--agent-knot);
    border-radius: 50%;
    background: currentColor;
  }
  .agent-row__link::before { left: calc(var(--agent-knot) / -2); }
  .agent-row__link::after { right: calc(var(--agent-knot) / -2); }
  .agent-row--ok .agent-row__link { color: var(--color-accent-line); }
  .agent-row--warn .agent-row__link { color: var(--color-warn); }
  .agent-row--miss .agent-row__link { color: var(--color-miss-line); border-top-style: dashed; }
  /* Links steht nichts: hohler Knoten */
  .agent-row--miss .agent-row__link::before { background: var(--color-ui-window); border: 1px dashed var(--color-miss-line); }
  .agent-row[data-marked="false"] .agent-row__link { visibility: hidden; }

  /* Rückfrage als Block unter P-03, 12-px-Stich unter der Markierungsspalte */
  .agent-ask-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--agent-mark-col) minmax(0, 1fr);
    grid-template-areas: ". stich ." "ask ask ask";
    column-gap: var(--s-5);
    padding: 0 var(--s-4) var(--s-3);
  }
  .agent-ask-row::before {
    content: ""; grid-area: stich; justify-self: center;
    width: 1px; height: var(--s-3);
    background: var(--color-warn-line);
  }
  .agent-ask {
    grid-area: ask;
    padding: var(--s-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--r-m);
    background: var(--color-ui-raised);
    box-shadow: var(--shadow-1);
  }
  .agent-ask__btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Ab 1024: umgekehrter Aufbau (K-VIS-01): Kopf über die volle Breite (Dachzeile + H2 Spalte 1–6, Lead 7–12),
   darunter das Agent-Fenster über alle 12 Spalten. Bricht die Folge Text links / Fenster rechts.
   ========================================================================== */
@media (min-width: 1024px) {
  .agent-sec__text {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
    row-gap: var(--s-3);
  }
  .agent-sec__text .eyebrow { grid-column: 1 / span 6; grid-row: 1; }
  .agent-sec__text .heading-2 { grid-column: 1 / span 6; grid-row: 2; }
  .agent-sec__text .lead { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
  .agent-sec__panel { grid-column: 1 / -1; }

  /* Volle Breite: Rückfrage und Antworten behalten Lesebreite */
  .agent-ask__q { max-width: var(--measure); }
  .agent-ask__btns { max-width: var(--measure); }
}

/* ==========================================================================
   Zustand 4 als Datenstand (K-PRJ-02): Die Zeilen sind selbst aktualisiert, nicht nur protokolliert.
   P-03: Satz „angepasst:/bestätigt: …“ (siehe oben). P-04: Die Lücke steht als Zeile in der Pflichtenheft-Zelle der Fehlt-Zeile,
   Rand durchgezogen statt gestrichelt, „ergänzt:“ fett davor (wie bei P-03). Beide Markierungen wechseln auf „Geklärt“
   (Ring mit Haken, Kontur Türkis, Zeichen + Wort). Ohne JavaScript steht dieser Zustand im HTML.
   ========================================================================== */
/* Markierung: Vorher (Abweichung / Fehlt) bis Zustand 3, Nachher (Geklärt) in Zustand 4 — Wechsel über data-state wie bei P-03 */
.mark__nachher { display: none; }
.agent[data-state="4-aufgeloest"] .mark__nachher { display: inline-flex; }
.agent[data-state="4-aufgeloest"] .mark__vorher { display: none; }

/* P-03 ist geklärt: Bernstein-Tönung und -Kontur weichen (die Tönung liegt als ::before unten im Abschnitt „motion“) */
.agent[data-state="4-aufgeloest"] .agent-row--warn[data-marked="true"] { border-bottom-color: var(--color-line); }
.agent[data-state="4-aufgeloest"] .agent-row--warn::before { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }

/* P-04: gefüllte Zelle */
.agent-row__filled { display: none; }
.agent[data-state="4-aufgeloest"] .agent-row__empty {
  border-style: solid;
  border-color: var(--color-accent-line);
  padding: 0 var(--s-2) var(--s-1);
}
.agent[data-state="4-aufgeloest"] .agent-row__empty .agent-row__filled { display: block; }

/* Verbindungslinie (ab 768): geklärt = durchgezogen, Türkis, gefüllter Knoten */
@media (min-width: 768px) {
  .agent[data-state="4-aufgeloest"] .agent-row--warn .agent-row__link { color: var(--color-accent-line); }
  .agent[data-state="4-aufgeloest"] .agent-row--miss .agent-row__link { color: var(--color-accent-line); border-top-style: solid; }
  .agent[data-state="4-aufgeloest"] .agent-row--miss .agent-row__link::before { background: currentColor; border: 0; }
  .agent[data-state="4-aufgeloest"] .agent-row__empty { padding: var(--s-2) var(--s-3); }
  /* Stich unter P-03 führt zur Antwortzeile: geklärt = Türkis statt Bernstein */
  .agent[data-state="4-aufgeloest"] .agent-ask-row::before { background: var(--color-accent-line); }
}

/* Mobil: die Fehlt-Zeile nimmt in Zustand 4 das Raster der übrigen Zeilen („id mark / satz satz“), die Markierung sitzt
   innerhalb der Zelle auf der ID-Zeile (Rand 1 px + Innenabstand der Zelle). Oben wie rechts --s-2 Luft zum Rahmen,
   damit „Geklärt“ nicht am oberen Rand der türkisen Zelle klebt (K-UI P2 / K-VIS-05) */
@media (max-width: 767px) {
  .agent[data-state="4-aufgeloest"] .agent-row--miss { grid-template-areas: "spec spec" "voice voice"; }
  .agent[data-state="4-aufgeloest"] .agent-row--miss .agent-row__empty { padding-top: var(--s-2); }
  .agent[data-state="4-aufgeloest"] .agent-row--miss .agent-row__mark {
    position: absolute; grid-area: auto;
    top: calc(var(--agent-pad-y) + 1px + var(--s-2));
    inset-inline-end: calc(var(--s-4) + var(--s-2) + 1px);
  }
}

/* Übergang in Zustand 4: Markierung, gefüllte Zelle und Zusammenfassung blenden ein (Anzeige wechselt, Deckkraft läuft;
   nur Deckkraft, --dur-base; läuft auch beim Laden der Seite kaum sichtbar) */
@media (prefers-reduced-motion: no-preference) {
  .agent[data-state="4-aufgeloest"] :is(.mark__nachher, .agent-row__filled, .agent-sum__list) {
    animation: agent-einblenden var(--dur-base) var(--ease-out);   /* ohne Fill-Mode: sonst übersteuert sie die Ausgangsbewegung (GSAP-Inline-Deckkraft) von motion.js */
  }
}
@keyframes agent-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Ruhende Animationen (Befund motion): Ladezeichen nur im Ladezustand, Skelett-Puls und Ladezeichen nur im Bild
   ========================================================================== */
.agent[data-summary="true"] .agent-sum__loading .spinner { animation: none; }
.agent:not([data-inview="true"]) :is(.spinner, .agent-ask-skel .skeleton, .agent-row .sk, .agent-row__empty) { animation-play-state: paused; }

/* Reservierte Fläche der Rückfrage in Zustand 1–2: ruhiger Skelett-Block unter der Fehlt-Zeile (Fläche = Höhe --agent-ask-h,
   von motion.js gesetzt; ohne motion.js bleibt er aus). Zustand 3: blendet per Deckkraft aus (--dur-exit), die Rückfrage kommt. */
.agent-ask-skel { display: none; }
.agent[data-motion-reserve] .agent-ask-skel {
  display: block;
  position: absolute; z-index: 1;
  top: calc(100% + var(--s-2));
  inset-inline: var(--s-4);
  height: calc(var(--agent-ask-h, 0px) - var(--s-4));
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit);
}
.agent[data-motion-reserve]:is([data-state="1-abgleichen"], [data-state="2-markieren"]) .agent-ask-skel {
  opacity: 1; visibility: visible;
  transition: none;
}
.agent-ask-skel .skeleton { height: 100%; }
@media (min-width: 768px) {
  .agent[data-motion-reserve] .agent-ask-skel {
    top: calc(100% + var(--s-3));
    height: calc(var(--agent-ask-h, 0px) - var(--s-3) * 2);
  }
}

/* ---------- Reduced Motion: Skelett pulsiert nicht ---------- */
@media (prefers-reduced-motion: reduce) {
  .agent-row[data-marked="false"] .sk,
  .agent-row[data-marked="false"] .agent-row__empty,
  .agent-ask-skel .skeleton { animation: none; opacity: 0.7; }
  .agent-answer, .agent__restart { transition-property: background-color, border-color, color, opacity; }
  .agent-answer:active, .agent__restart:active { transform: none; }
}

/* ==========================================================================
   motion — Owner: wdf-motion-designer (P8-S), Bewegung agent-ablauf (motion.js)
   ========================================================================== */
/* Leselinie (ab 768): motion.js legt sie in die Tabelle und schiebt sie Zeile für Zeile (transform) */
.agent-table { position: relative; }
.agent-leselinie { display: none; }
@media (min-width: 768px) {
  .agent-leselinie {
    display: block;
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    height: 1px;
    background: var(--color-accent-line);
    opacity: 0;
    pointer-events: none;
  }
  /* Stich unter P-03 zeichnet sich nach unten, bevor die Rückfrage kommt (data-stich setzt motion.js kurz) */
  .agent-ask-row::before { transform-origin: top; transition: transform var(--dur-fast) var(--ease-out); }
  .agent-ask-row[data-stich="zu"]::before { transform: scaleY(0); transition: none; }
}
/* Platz für die Rückfrage (K-MOT-03): motion.js misst die Höhe der Rückfrage-Zeile und setzt data-motion-reserve +
   --agent-ask-h am Fenster. In Zustand 1/2 bleibt die Zeile unsichtbar im Fluss (visibility, nicht display), „Fehlt“
   steht per transform an der Stelle, an der es ohne Rückfrage stünde. In Zustand 3 fallen beide Regeln im selben Bild
   weg, in dem die Rückfrage erscheint und „Fehlt“ per FLIP (motion.js) startet: keine Layout-Position ändert sich,
   Fensterhöhe und Abschnitt 80 bleiben stehen. Ohne motion.js und unter Reduced Motion (Endzustand 4 sofort)
   setzt niemand das Attribut. */
.agent[data-motion-reserve]:is([data-state="1-abgleichen"], [data-state="2-markieren"]) .agent-ask-row {
  display: block;
  visibility: hidden;
}
.agent[data-motion-reserve]:is([data-state="1-abgleichen"], [data-state="2-markieren"]) .agent-row--miss {
  transform: translateY(calc(var(--agent-ask-h, 0px) * -1));
}
@media (min-width: 768px) {
  .agent[data-motion-reserve]:is([data-state="1-abgleichen"], [data-state="2-markieren"]) .agent-ask-row { display: grid; }
}
/* Abweichung P-03: Tönung und Kontur als eigene Fläche, damit sie per Deckkraft mit der Markierung
   einblenden kann (+160 ms = 2/3 von --dur-base, wie die Markierung). Gleiches Aussehen wie zuvor. */
.agent-row--warn { isolation: isolate; }
.agent-row--warn[data-marked="true"] { background: none; box-shadow: none; }
.agent-row--warn::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1;
  background: var(--color-warn-tint);
  box-shadow: inset 0 0 0 1px var(--color-warn-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out);
}
.agent-row--warn[data-marked="true"]::before {
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out) calc(var(--dur-base) * 2 / 3);
}
/* „Neu abgleichen“: die Tönung geht gemeinsam mit Markierungen und Protokoll */
.agent[data-motion="aus"] .agent-row--warn::before { opacity: 0; transition: opacity var(--dur-exit) var(--ease-out); }

/* motion — Owner: wdf-motion-designer (P8-U), Bewegung rahmen-und-bedienung (Aufklapper)
   Workshop-Zitat der Passt-Zeilen (nur mobil, data-open): kommt wie die anderen Aufklapper per @starting-style
   (Deckkraft + kurzer Weg, --dur-base), ohne Höhenanimation. Ab 768 steht das Zitat immer, dort nichts. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.js .agent-row--ok[data-open="true"] .agent-row__quote {
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  @starting-style {
    html.js .agent-row--ok[data-open="true"] .agent-row__quote { opacity: 0; transform: translateY(calc(-1 * var(--s-1))); }
  }
}

/* motion — Owner: wdf-motion-designer (P15-M, Runde 3 A), Bewegung agent-ablauf mit Scroll
   Erreicht der Scroll Zustand 4 ohne Eingabe des Besuchers, ist das Fenster 18–40 px niedriger als in Zustand 3.
   Damit darunter nichts verrutscht (CLS 0), hält das Protokoll-Band die Differenz als gleichmäßigen Innenabstand
   (oben und unten je die Hälfte). motion.js misst sie (--agent-hold) und gibt sie bei der ersten Eingabe im Fenster frei. */
.agent[data-motion-hold] .agent-log::before,
.agent[data-motion-hold] .agent-log::after { content: ""; display: block; height: calc(var(--agent-hold, 0px) / 2); }