/* Ablauf-Analyse, Eingabe v2 /ablauf-analyse/ und /en/process-analysis/ (Paket D, WI-20261024-site-ablauf-block1;
   Erlebnis v2 W4, Plan v02 §4, Brand-Review §5/§6.2, Petrol-Bauvorgabe §3).
   Rahmen W: baut auf dem Werkbank-System auf (styles/components/werkbank.css: wb-seite, wb-wrap, wb-btn, Tokens) und
   setzt nur, was die Eingabe braucht. Lime nur fuer die EINE Handlung je Bildschirm (Primaerknopf), Textlinks,
   Haekchen und Fokus in Tinte, nie Petrol; Warnfarbe nur fuer Fehlertexte; Radien: Mehrfachwahl 4, Einfachwahl 8.
   Objekte E (Musterkarte, werdender Bericht, Laufzettel der Statusseite): Klasse .wb-doc, Doc-Token nur dort
   (Check C2, test/ds-anfrage/doc-linie.test.mjs); Petrol nur im Schaetzbalken der Musterkarte und in der offenen
   Zeile des Laufzettels; keine Bedienelemente im Objekt (C5).
   Bedienziele >= 44 px, Schrift in Feldern 16 px (kein Zoom auf iOS). Die reduzierte Kopfleiste steht in
   styles/components/chrome.css (.site-header--reduziert). */

/* Ergaenzung "DS Zeichen" (Erlebnis v2 W2): U+2248, U+2192 und schmale Leerzeichen fehlen den latin-Teilmengen
   (cmap gemessen). Gleicher Familienname, enger unicode-range: bei ueberlappenden Bereichen prueft der Browser die
   zuletzt definierte Regel zuerst (CSS Fonts 4, unicode-range), alles andere kommt weiter aus der Hauptdatei (styles/fonts.css).
   Bau und Quellen: tools/schriften/zeichen-ergaenzung.py; Pruefung: test/ds-anfrage/zeichen.test.mjs. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; unicode-range: U+202F, U+2192, U+2248;
  src: url("/assets/fonts/zeichen/ds-zeichen-text.woff2?v=4857923a") format("woff2-variations"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; unicode-range: U+202F, U+2192, U+2248;
  src: url("/assets/fonts/zeichen/ds-zeichen-display.woff2?v=13db56d8") format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; unicode-range: U+2009, U+202F, U+2192, U+2248;
  src: url("/assets/fonts/zeichen/ds-zeichen-mono.woff2?v=ddedbbc7") format("woff2"); }
/* DS Serif (Dokumentschrift der Linie E, Brand-Review §4.1) fuer die Kernzahlen der Objekte; wie in bericht.css. */
@font-face { font-family: "DS Serif Display"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/ds-serif/DSSerif-Display.woff2?v=3a5cb8b5") format("woff2"); }
@font-face { font-family: "DS Serif Display"; font-style: normal; font-display: swap; font-weight: 400; unicode-range: U+2248;
  src: url("/assets/fonts/zeichen/ds-zeichen-serif-display.woff2?v=1c9e4fa0") format("woff2"); }

/* Klassen mit eigenem display duerfen das hidden-Attribut nicht aufheben (vgl. styles/components/rechner.css). */
.ab [hidden] { display: none !important; }

.ab-wrap {
  padding-block: clamp(20px, 4vw, 56px) clamp(56px, 8vw, 104px);
}

.ab-formular {
  min-width: 0;
  max-width: 40rem;
}

.ab-schritt,
.ab-stoerung {
  scroll-margin-top: 96px;
}

/* Rechte Spalte (werdender Bericht) erst ab 1100 px und nur in der Eingabe (Plan v02 §4). */
.ab-werdend { display: none; }

@media (min-width: 1100px) {
  .ab-raster[data-ansicht="eingabe"] {
    display: grid;
    grid-template-columns: minmax(0, 40rem) 20rem;
    column-gap: 64px;
    align-items: start;
  }

  .ab-raster[data-ansicht="eingabe"] .ab-werdend:not([hidden]) {
    display: block;
    position: sticky;
    top: 96px;
  }
}

.ab-raster[data-ansicht="start"] .ab-formular { max-width: none; }

/* ---------- Einstieg (Schritt 0) ---------- */
.ab-einstieg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 900px) {
  .ab-einstieg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }

  .ab-einstieg__text { padding-top: 12px; }
}

.ab-titel { max-width: 12ch; text-wrap: balance; }

.ab-lead { max-width: 34ch; margin-top: 14px; }

.ab-sprache {
  margin-top: 10px;
  color: var(--wb-color-ink);
  font-weight: 600;
}

.ab-hinweis {
  max-width: 34rem;
  margin-top: 18px;
  color: var(--wb-color-ink-muted);
  font-size: var(--wb-size-small);
  line-height: 1.5;
}

.ab-hinweis a { color: inherit; }

.ab-weiche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 18px;
}

.ab-weiche .wb-btn { min-height: 52px; }

/* Textknopf: ein Knopf, der wie ein Textlink aussieht (Tinte, unterstrichen), Ziel 44 px. */
.ab-textknopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wb-color-ink);
  font: 500 var(--wb-size-body)/1.3 var(--wb-font-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}

.ab-textknopf:disabled { color: var(--wb-color-ink-faint); cursor: default; text-decoration-style: dotted; }
.ab-textknopf:focus-visible { outline: 2px solid var(--wb-color-focus-paper); outline-offset: 3px; }

.ab-linkzeile {
  margin-top: 6px;
  color: var(--wb-color-ink-faint);
  font-size: var(--wb-size-small);
}

.ab-linkzeile a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--wb-color-ink-muted);
  text-underline-offset: 4px;
}

.ab-einstieg__muster .wb-ki-zeile { margin-top: 16px; }

.ab-beispiele { margin-top: var(--wb-space-3); }
.ab-beispiele__titel { font-weight: 600; }
.ab-beispiele ul { margin: 6px 0 0; padding: 0; list-style: none; }
.ab-etikett { color: var(--wb-color-ink-faint); font-family: var(--wb-font-mono); font-size: var(--wb-size-mono); }

/* ---------- Musterkarte (Objekt E, Petrol nur im Schaetzbalken) ---------- */
.ab-muster { margin: 0; }

.ab-muster__etikett {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--wb-color-ink-faint);
  font: 600 12px/16px var(--wb-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance; /* W6g (@Brand F-09): EN „Sample report, fictitious business, in German“ bricht nicht als „IN / GERMAN“ */
}

.ab-muster__etikett::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--wb-color-ink-faint);
}

.wb-doc.wb-doc--muster {
  padding: 20px 20px 22px;
  background: var(--wb-doc-papier);
  color: var(--wb-doc-tinte);
  box-shadow: var(--wb-shadow-sheet);
}

.wb-doc .ab-mk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wb-doc .ab-mk__kicker { color: var(--wb-doc-leise); font: 600 12px/16px var(--wb-font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.wb-doc .ab-mk__h1 {
  margin-top: 8px;
  font: 400 26px/1.15 "DS Serif Display", Georgia, serif;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.wb-doc .ab-mk__zahl { white-space: nowrap; }
.wb-doc .ab-mk__band { margin-top: 14px; }
.wb-doc .ab-mk__zeile + .ab-mk__zeile { margin-top: 10px; }
.wb-doc .ab-mk__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; font: 600 14px/18px var(--wb-font-body); }
.wb-doc .ab-mk__wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-doc .ab-mk__svg { display: block; width: 100%; overflow: visible; }
.wb-doc .ab-mk__achse { display: flex; justify-content: space-between; margin-top: 2px; color: var(--wb-doc-leise); font: 400 12px/16px var(--wb-font-body); font-variant-numeric: tabular-nums; }
.wb-doc .ab-mk__notiz { margin-top: 6px; color: var(--wb-doc-leise); font: 400 13px/18px var(--wb-font-body); }
.wb-doc .ab-mk__legende { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; color: var(--wb-doc-leise); font: 400 13px/18px var(--wb-font-body); }
.wb-doc .ab-mk__legende span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wb-doc .ab-mk__legende svg { flex: none; }
.wb-doc .ab-mk-f-tinte { fill: var(--wb-doc-tinte); }
.wb-doc .ab-mk-s-tinte { fill: url(#ab-mk-schraffur-tinte); }
.wb-doc .ab-mk-muster-tinte rect { fill: var(--wb-doc-tinte); }
.wb-doc .ab-mk-f-akzent { fill: var(--wb-doc-akzent); }
.wb-doc .ab-mk-s-akzent { fill: url(#ab-mk-schraffur-akzent); }
.wb-doc .ab-mk-muster-akzent rect { fill: var(--wb-doc-akzent); }
.wb-doc .ab-mk-fuge { fill: var(--wb-doc-papier); }

/* ---------- Kapitelzeile (Plan v02 §4, BR-19) ---------- */
.ab-kapitel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--wb-color-ink-faint);
  font: 600 13px/20px var(--wb-font-body);
}

.ab-kapitel li { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; }
.ab-kapitel li[aria-current] { color: var(--wb-color-ink); box-shadow: inset 0 -2px 0 var(--wb-color-ink); }
.ab-kapitel li.ist-erledigt { color: var(--wb-color-ink-muted); }
.ab-kapitel__haken { display: none; }
.ab-kapitel li.ist-erledigt .ab-kapitel__haken {
  display: inline-block;
  width: 5px;
  height: 9px;
  margin: 0 2px 3px 1px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* ---------- Spiegelzeile am Handy (Bildschirme 4 bis 6; nicht klebend, BR-08) ---------- */
.ab-spiegelzeile {
  margin: 0 0 22px;
  padding: 12px 14px 12px;
  border: 1px solid var(--wb-color-paper-line);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
}

/* RA-01: Etikett und Wert in einer Zeile, darunter der Balken; die Hoehe haengt nicht am Zustand (kein Satz im Band,
   Balkenplatz bleibt). W6b (Brand N-03): Raster statt Umbruch, der Wert steht immer rechts in Zeile 1, das Etikett bricht
   in seiner Spalte um; der Kopf ist fest zwei Etikettzeilen hoch (36 px), bei jeder Handybreite und jedem Zustand. */
/* W6c (@Neo-Entscheid 4, Verifier W6b LOW): bei 200 % Textzoom lag die zweite Etikettzeile unter dem Balken und das Etikett
   zerfiel neben breiten Werten in Silben (gemessen, Work-Item W6c). Deshalb Mindesthoehe statt fester Hoehe: bei 100 % bleibt
   der Kopf 36 px (zwei Etikettzeilen, N-03-Messung 360/375/390/768), vergroesserter Text schiebt den Balken nach unten.
   Nur unter Textzoom steht das Etikett ueber dem Wert: 1em - 13px ist bei 100 % null (Etikett teilt die Zeile wie das
   fruehere Raster minmax(0, 1fr) auto) und waechst nur, wenn der Browser die Schrift vergroessert. */
.ab-sz__oben { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; min-height: 36px; margin: 0; }
.ab-sz__titel { flex: 1 1 calc(max(0px, 1em - 13px) * 1000); min-width: 0; max-width: 100%; color: var(--wb-color-ink-faint); font: 600 13px/18px var(--wb-font-body); }
.ab-sz__wert { flex: none; margin-left: auto; }
/* Vierstelliger Wert (intake.js setzt data-breit ab 1.000 Std.): 15 px, sonst braucht das Etikett bei 360 px drei Zeilen */
.ab-spiegelzeile[data-breit] .ab-sz__wert { font-size: 15px; }
/* Summe hoeher als die Arbeitszeit des Betriebs: einziger Hinweis am Handy, deshalb in Tinte (N-03) */
.ab-spiegelzeile[data-summe="hart"] .ab-sz__titel { color: var(--wb-color-ink); }
/* RA-01: 18 px, damit „Zusammen bisher · 1 Ablauf" und „≈ 140–280 Std." bei 390 in einer Zeile stehen */
/* Zeilenhoehe 18 px wie das Etikett: beide ersten Zeilen teilen eine Zeilenbox (Grundlinien-Ausrichtung schob das
   Etikett um ≈ 4 px nach unten und eine zweite Etikettzeile ueber den Kopf hinaus, gemessen W6b) */
.ab-sz__wert { font: 640 18px/18px var(--wb-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-sz__balken { display: block; width: 100%; height: 8px; margin-top: 8px; }
.ab-spiegelzeile[data-zustand="leer"] .ab-sz__balken,
.ab-spiegelzeile[data-zustand="stoerung"] .ab-sz__balken { visibility: hidden; }
.ab-sz__balken .ab-balken-fest,
.ab-sz-muster rect { fill: var(--wb-color-ink); }
.ab-sz__balken .ab-balken-fuge { fill: var(--wb-color-sheet); }

@media (min-width: 1100px) {
  .ab-spiegelzeile { display: none !important; }
}

/* ---------- Schritte ---------- */
.ab-schritt__titel {
  font-size: var(--wb-size-section);
  line-height: 1.12;
  text-wrap: balance;
}

.ab-schritt__titel:focus { outline: none; }
.ab-schritt__titel:focus-visible { outline: 2px solid var(--wb-color-focus-paper); outline-offset: 4px; }

.ab-schritt__satz {
  max-width: 52ch;
  margin-top: 12px;
  color: var(--wb-color-ink-muted);
}

.ab-kicker {
  margin-bottom: 4px;
  color: var(--wb-color-ink-faint);
  font: 600 13px/18px var(--wb-font-body);
}

.ab-weg { margin-top: var(--wb-space-3); }

.ab-gruppe {
  min-width: 0;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.ab-frage {
  margin-bottom: 12px;
  padding: 0;
  font-weight: 600;
  text-wrap: balance;
}

.ab-frage__hilfe {
  margin: -6px 0 12px;
  color: var(--wb-color-ink-muted);
  font-size: var(--wb-size-small);
}

.ab-optional {
  margin-left: 6px;
  color: var(--wb-color-ink-faint);
  font-size: var(--wb-size-small);
  font-weight: 400;
}

/* Gemeinsam: native Eingaben unsichtbar, die Flaeche ist das Etikett */
.ab-wahl,
.ab-seg__teil,
.ab-chip,
.ab-karte {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.ab-wahl input,
.ab-seg__teil input,
.ab-chip input,
.ab-karte input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* ---------- Einfachwahl als Kacheln (Branche, Dauer): ohne Kaestchen, gewaehlt 2 px Tinte und Haekchen (SP-06) ---------- */
.ab-wahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 768px) {
  .ab-wahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ab-wahl span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  height: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-paper-raised);
  color: var(--wb-color-ink);
  font-weight: 500;
  line-height: 1.3;
  hyphens: manual;
  overflow-wrap: break-word;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ab-wahl:hover span { border-color: var(--wb-color-ink); }

.ab-wahl input:checked + span {
  padding: 9px 13px;
  border: 2px solid var(--wb-color-ink);
  background: var(--wb-color-sheet);
  font-weight: 600;
}

.ab-wahl input:checked + span::after {
  content: "";
  flex: none;
  width: 6px;
  height: 11px;
  margin: 0 3px 4px auto;
  border: solid var(--wb-color-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ab-wahl input:focus-visible + span,
.ab-seg__teil input:focus-visible + span,
.ab-chip input:focus-visible + span,
.ab-karte input:focus-visible + span {
  outline: 2px solid var(--wb-color-focus-paper);
  outline-offset: 3px;
}

/* ---------- Segmentreihen (Groesse, Rolle, Zeitraum, Ziel, Start, Ja/Nein): gewaehlt Tinte voll ---------- */
.ab-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 4px;
}

.ab-seg--4 { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }

.ab-seg__teil span {
  display: flex;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  height: 100%;
  padding: 8px 6px;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
  color: var(--wb-color-ink);
  line-height: 1.25;
  text-align: center;
  hyphens: manual;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ab-seg__teil:hover span { border-color: var(--wb-color-ink); }

.ab-seg__teil input:checked + span {
  border-color: var(--wb-color-ink);
  background: var(--wb-color-ink);
  color: var(--wb-color-paper);
  font-weight: 600;
}

.ab-seg-gruppe { margin-top: 10px; }

/* ---------- Chips (Werkzeuge, Mehrfachwahl): Radius 4, Haekchen-Quadrat ---------- */
.ab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ab-chip span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
  color: var(--wb-color-ink);
  line-height: 1.3;
  transition: border-color 120ms ease;
}

.ab-chip span::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--wb-color-paper-edge);
  border-radius: 3px;
  background: var(--wb-color-sheet);
}

.ab-chip:hover span { border-color: var(--wb-color-ink); }
.ab-chip input:checked + span { border-color: var(--wb-color-ink); font-weight: 600; }

.ab-chip input:checked + span::before {
  border-color: var(--wb-color-ink);
  background: var(--wb-color-ink);
  box-shadow: inset 0 0 0 3px var(--wb-color-sheet);
}

.ab-chip--keins span { border-style: dashed; }

/* ---------- Zeitfresser-Karten: drei Gruppen, feste Hoehe, quadratisches Rang-Abzeichen (BR-21) ----------
   Am Handy einspaltig verdichtet (Entscheid E1, @Brand-Abnahme W3/W4): Karte 48 px, Fuge 6 px, Gruppenetikett 13/16 mit
   16 px darueber und 6 px darunter; ab 520 px zweispaltig wie bisher. */
.ab-karten__gruppe {
  margin: 18px 0 8px;
  color: var(--wb-color-ink-faint);
  font: 600 13px/18px var(--wb-font-body);
}

.ab-karten__gruppe:first-child { margin-top: 0; }

.ab-karten__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@media (min-width: 520px) {
  .ab-karten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ab-karte span {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
  color: var(--wb-color-ink);
  line-height: 1.25;
  transition: border-color 120ms ease;
}

.ab-karte:hover span { border-color: var(--wb-color-ink); }
.ab-karte input:checked + span { padding: 7px 11px 7px 13px; border: 2px solid var(--wb-color-ink); font-weight: 600; }

/* E1 (nach den Grundregeln, damit sie gewinnen): am Handy Karte 48 px, Fuge 6 px, Gruppenetikett 13/16 */
@media (max-width: 519.98px) {
  .ab-karten__gruppe { margin: 16px 0 6px; line-height: 16px; }
  .ab-karten__gruppe:first-child { margin-top: 0; }
  .ab-karten__liste { gap: 6px; }
  .ab-karte span { height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .ab-karte input:checked + span { padding-top: 5px; padding-bottom: 5px; }
}

.ab-rang:empty { display: none; }

.ab-rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 2px;
  background: var(--wb-color-ink);
  color: var(--wb-color-paper);
  font: 600 13px/1 var(--wb-font-body);
  font-variant-numeric: tabular-nums;
}

/* ---------- Felder ---------- */
.ab-feld {
  display: grid;
  gap: 6px;
  margin-top: 20px;
}

.ab-feld__label { font-weight: 600; }

.ab input[type="text"],
.ab input[type="email"],
.ab textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
  color: var(--wb-color-ink);
  font: 400 16px/1.4 var(--wb-font-body);
}

.ab textarea { min-height: 6.5em; resize: vertical; field-sizing: content; }
.ab textarea::placeholder { color: var(--wb-color-ink-faint); }

.ab input:focus-visible,
.ab textarea:focus-visible {
  outline: 2px solid var(--wb-color-focus-paper);
  outline-offset: 2px;
}

.ab [aria-invalid="true"] { border-color: var(--wb-color-finding-on-paper); }

.ab-feld__hinweis {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--wb-color-ink-muted);
  font-size: var(--wb-size-small);
  line-height: 1.5;
}

.ab-feld--frei { margin-top: 26px; }
.ab-feld--frei .ab-feld__hinweis { margin-top: 0; }

.ab-fehler {
  margin-top: 8px;
  color: var(--wb-color-finding-on-paper);
  font-size: var(--wb-size-small);
  font-weight: 600;
}

.ab-zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 16px;
}

@media (min-width: 600px) {
  .ab-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ab-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  cursor: pointer;
  line-height: 1.45;
}

.ab-check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--wb-color-ink);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein normales Feld (Muster KI-Starter). */
.ab-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ab-klein {
  margin-top: 16px;
  color: var(--wb-color-ink-muted);
  font-size: var(--wb-size-small);
  line-height: 1.5;
}

/* ---------- Ablauf-Bildschirm (Schritt 4): Zahlfeld mit −/+ ohne Vorbelegung ---------- */
.ab-menge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ab-stepper {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
}

.ab-stepper__knopf {
  width: 48px;
  min-height: 48px;
  border: 0;
  background: var(--wb-color-paper-raised);
  color: var(--wb-color-ink);
  font: 500 22px/1 var(--wb-font-body);
  cursor: pointer;
}

.ab-stepper__knopf:hover { background: var(--wb-color-paper-muted); }
.ab-stepper__knopf:focus-visible { outline: 2px solid var(--wb-color-focus-paper); outline-offset: -2px; }

.ab .ab-stepper input {
  width: 6ch;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-inline: 1px solid var(--wb-color-paper-line);
  border-radius: 0;
  font: 600 20px/1 var(--wb-font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Spiegelsatz am Ort der Eingabe (Plan v02 §4 Schritt 4); Zustaende: leer, rechnet (alter Wert bleibt), wert,
   rueckfrage, grenze, stoerung. Keine Befundfarbe, keine Animation. */
.ab-spiegelsatz {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--wb-color-ink);
  background: var(--wb-color-sheet);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.ab-spiegelsatz[data-zustand="leer"] { border-left-color: var(--wb-color-paper-line); color: var(--wb-color-ink-faint); }
.ab-spiegelsatz[data-zustand="stoerung"],
.ab-spiegelsatz[data-zustand="grenze"] { border-left-color: var(--wb-color-ink-faint); }
.ab-spiegelsatz[data-zustand="rueckfrage"] { font-weight: 600; }

.ab-rueckfrage { margin-top: 10px; }

/* ---------- Navigation ---------- */
.ab-navi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--wb-space-5);
}

.ab-navi [data-weiter],
.ab-navi [data-aktion="anfordern"] { margin-left: auto; }

.ab-navi .wb-btn { min-height: 52px; }
.ab-navi__ueber { flex: 1 1 100%; justify-content: flex-end; font-size: var(--wb-size-small); }
.ab-navi--links { margin-top: 20px; }

/* ---------- Code: ein Feld, sechs Zellen als Hintergrund (SP-10: Abstand = Zelle − Vorschub) ---------- */
.ab-code__meta {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  color: var(--wb-color-ink-muted);
  font-size: 15px;
  line-height: 1.45;
}

.ab-code__meta b { color: var(--wb-color-ink); font-weight: 600; overflow-wrap: anywhere; }

.ab-feld--code { margin-top: 20px; }

.ab-code__feld {
  --zelle: 48px;
  position: relative;
  display: block;
  width: calc(6 * var(--zelle));
  height: 60px;
  overflow: clip;
}

.ab-code__zellen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, var(--zelle));
}

.ab-code__zellen span {
  margin: 0 3px;
  border: 1px solid var(--wb-color-paper-edge);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-sheet);
}

/* 1ch = Vorschub einer Ziffer in JetBrains Mono: jede Ziffer steht mittig in ihrer Zelle, auch die sechste; das Feld ist
   um einen Zellabstand breiter als die Zellen, damit nach der sechsten Ziffer nichts rollt. */
.ab .ab-code__feld input {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(6 * var(--zelle) + var(--zelle));
  height: 60px;
  min-height: 0;
  padding: 0 0 0 calc((var(--zelle) - 1ch) / 2);
  border: 0;
  background: transparent;
  color: var(--wb-color-ink);
  font: 500 28px/60px var(--wb-font-mono);
  letter-spacing: calc(var(--zelle) - 1ch);
  caret-color: var(--wb-color-ink);
}

.ab .ab-code__feld input:focus-visible { outline: none; }
.ab-code__feld:focus-within .ab-code__zellen span { border-color: var(--wb-color-ink); }
.ab-code__feld:focus-within { outline: 2px solid var(--wb-color-focus-paper); outline-offset: 4px; border-radius: var(--wb-radius-sm); }
.ab-code__feld:has(input[aria-invalid="true"]) .ab-code__zellen span { border-color: var(--wb-color-finding-on-paper); }

.ab-code__oder { margin-top: 16px; }

.ab-code__hilfe {
  margin-top: 6px;
  color: var(--wb-color-ink-muted);
  font-size: var(--wb-size-small);
  line-height: 1.5;
}

.ab-code__hilfe .ab-textknopf { font-size: var(--wb-size-small); }
.ab-code__status { color: var(--wb-color-ink-muted); font-size: var(--wb-size-small); }

/* ---------- Werdender Bericht (ab 1100 px, Objekt E ohne Akzent: Papier, Serif-Zahl, Tinten-Balken) ---------- */
.wb-doc.wb-doc--werdend {
  padding: 20px 20px 18px;
  background: var(--wb-doc-papier);
  color: var(--wb-doc-tinte);
  box-shadow: var(--wb-shadow-sheet);
}

.wb-doc .ab-wd__kicker { color: var(--wb-doc-leise); font: 600 12px/16px var(--wb-font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.wb-doc .ab-wd__betrieb { margin-top: 6px; color: var(--wb-doc-tinte); font: 600 15px/1.35 var(--wb-font-body); }
.wb-doc .ab-wd__nw { white-space: nowrap; }
.wb-doc .ab-wd__werkzeuge { margin-top: 2px; color: var(--wb-doc-tinte-weich); font: 400 13px/1.4 var(--wb-font-body); }
.wb-doc .ab-wd__stunden { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wb-doc-linie); }
.wb-doc .ab-wd__wert { font: 400 36px/1.05 "DS Serif Display", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.wb-doc .ab-wd__einheit { margin-top: 2px; color: var(--wb-doc-leise); font: 400 13px/18px var(--wb-font-body); }
.wb-doc .ab-wd__balken { display: block; width: 100%; height: 12px; margin-top: 10px; }
.wb-doc .ab-wd__balken .ab-balken-fest,
.wb-doc .ab-wd-muster rect { fill: var(--wb-doc-tinte); }
.wb-doc .ab-wd__balken .ab-balken-fuge { fill: var(--wb-doc-papier); }
.wb-doc .ab-wd__zustand { margin-top: 14px; color: var(--wb-doc-leise); font: 400 14px/1.45 var(--wb-font-body); }
.wb-doc .ab-wd__liste { margin: 14px 0 0; padding: 0; list-style: none; }
.wb-doc .ab-wd__liste li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--wb-doc-linie); font: 600 13px/18px var(--wb-font-body); }
.wb-doc .ab-wd__liste li.ist-offen { color: var(--wb-doc-leise); font-weight: 400; }
.wb-doc .ab-wd__zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Stoerung ---------- */
.ab-stoerung {
  margin-top: var(--wb-space-4);
  padding: 18px 20px;
  border: 1px solid var(--wb-color-ink);
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-paper-raised);
}

.ab-stoerung:focus { outline: none; }
.ab-stoerung__text { max-width: 60ch; }

.ab-stoerung__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- Haeufige Fragen ---------- */
.ab-fragen {
  max-width: 46rem;
  margin-top: var(--wb-space-8);
  padding-top: var(--wb-space-4);
  border-top: 1px solid var(--wb-color-paper-line);
}

.ab-fragen__titel { font-size: var(--wb-size-title); }

.ab-fragen details { border-bottom: 1px solid var(--wb-color-paper-line); }

.ab-fragen summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  font-weight: 600;
}

.ab-fragen details p {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--wb-color-ink-muted);
}

/* ---------- Statusseite (Schritt 7, Worker-Seite lib/ablauf/seiten.mjs): W-Rahmen mit E-Laufzettel ---------- */
.ab-status__satz { margin-top: 12px; max-width: 44ch; color: var(--wb-color-ink-muted); font-size: var(--wb-size-lead); line-height: 1.5; }
/* E2: 120 ms Farb- und Kantenuebergang auch am Knopf der Eingabe (Kacheln, Segmente, Chips, Karten tragen ihn schon);
   unter prefers-reduced-motion keiner */
.ab-formular .wb-btn { transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; }
@media (prefers-reduced-motion: reduce) {
  .ab-formular *, .ab-formular *::before, .ab-formular *::after { transition: none !important; }
}

/* Reduzierter Fuss ab Schritt 1: dieselben Regeln wie lib/ablauf/seiten.mjs (Status- und Systemseiten) */
.ab-sys__fuss { padding: 0 var(--wb-page-x) 40px; color: var(--wb-color-ink-faint); font-size: var(--wb-size-small); line-height: 1.6; text-align: center; }
.ab-sys__fuss a { color: inherit; }
/* Der Vollfuss der Site setzt selbst display; ohne diese Regel bliebe er trotz hidden stehen (gemessen am Render W4b) */
.site-footer[hidden], .ab-sys__fuss[hidden] { display: none !important; }

/* RA-05: Kennungen (Domain, Adresse, „E-Mail") brechen nicht an ihrem Bindestrich (Kontaktschritt, Code, Systemseiten) */
.nw { white-space: nowrap; }
/* RA-03: Namenszeile unter dem Pruefsatz, Name Inter 600 15 in Tinte (NS-06: ohne Firma, die steht im Kopf) */
.ab-status__name { margin-top: 6px; font-size: 15px; line-height: 1.4; }
.ab-status__person { color: var(--wb-color-ink); font-weight: 600; }
.ab-status__seit { margin-top: 12px; color: var(--wb-color-ink-faint); font-size: var(--wb-size-small); font-variant-numeric: tabular-nums; }
.ab-status__schluss { margin-top: 18px; color: var(--wb-color-ink-muted); }
.ab-status__weg { margin-top: 22px; }
.ab-status__stoerung { margin-top: 14px; color: var(--wb-color-ink-faint); font-size: var(--wb-size-small); }

.wb-doc.wb-doc--zettel {
  margin-top: 22px;
  padding: 18px 20px 14px;
  background: var(--wb-doc-papier);
  color: var(--wb-doc-tinte);
  box-shadow: var(--wb-shadow-sheet);
}

.wb-doc .ab-zettel__kicker { color: var(--wb-doc-leise); font: 600 12px/16px var(--wb-font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.wb-doc .ab-zettel__zeit { margin-top: 2px; color: var(--wb-doc-leise); font: 400 13px/18px var(--wb-font-body); font-variant-numeric: tabular-nums; }
.wb-doc .ab-zettel__lauf { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--wb-doc-linie-stark); }
.wb-doc .ab-zettel__lauf li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wb-doc-linie); font: 400 15px/1.35 var(--wb-font-body); }
.wb-doc .ab-zettel__lauf li:last-child { border-bottom: 0; }
.wb-doc .ab-zettel__name { display: inline-flex; align-items: baseline; gap: 8px; padding-left: 18px; }
.wb-doc .ab-zettel__wann { color: var(--wb-doc-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-doc .ab-zettel__lauf li[data-stand="fertig"] .ab-zettel__name { position: relative; }
.wb-doc .ab-zettel__lauf li[data-stand="fertig"] .ab-zettel__name::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.18em;
  width: 5px;
  height: 9px;
  border: solid var(--wb-doc-tinte-weich);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.wb-doc .ab-zettel__lauf li[data-stand="offen"] { color: var(--wb-doc-leise); }
.wb-doc .ab-zettel__lauf li[data-stand="laeuft"] { font-weight: 600; }
.wb-doc .ab-zettel__lauf li[data-stand="laeuft"] .ab-zettel__wann { color: var(--wb-doc-akzent); font-weight: 600; }

/* ---------- Schmal (ab 320 px) ---------- */
@media (max-width: 599px) {
  .ab-navi [data-weiter],
  .ab-navi [data-aktion="anfordern"] { flex: 1 1 auto; }

  .ab-wahl span { padding: 10px 12px; }
  .ab-wahl input:checked + span { padding: 9px 11px; }
  .wb-doc.wb-doc--muster { padding: 16px 16px 18px; }
  .wb-doc .ab-mk__h1 { font-size: 24px; }
}

@media (max-width: 359px) {
  .ab-code__feld { --zelle: 44px; }

  /* Reduzierter Kopf (chrome.css, Budget 360 px) lief bei 320 px um 15 px ueber (gemessen W4, auch vor W4): auf den Seiten
     der Ablauf-Analyse wird nur der Kontakt-Knopf enger; Lockup und Schutzraum bleiben, das Ziel bleibt 44 px hoch. */
  .site-header--reduziert .kopf-kontakt { padding: 0 6px; font-size: 12px; }
}