/* FREYeinkauf — Grundstil
   Quelle der Werte: DESIGN_PROFILE.md (IBM/Carbon-Struktur im FREYLER-CD, nur hell).
   Regel: Farben und Abstände nur über die Tokens unten, nie hartkodiert in JS oder Inline-Styles. */

:root {
  /* Marke */
  --rot: #E4003A;
  --rot-hover: #C60033;
  --auf-rot: #FFFFFF;

  /* Flächen */
  --bg: #FFFFFF;
  --surface-2: #F2F4F4;
  --kopf: #E6EAEA;
  --border: #CFD5D5;

  /* Text */
  --text: #445052;
  --text-muted: #5E6A6C;
  --feldkante: #5E6A6C;
  --dunkel: #1F2124;

  /* Signale — nie Rot (DESIGN_PROFILE) */
  --ok-bg: #E3F1E6;      --ok-text: #1E5631;      --ok-rand: #2E7D46;
  --pruefen-bg: #FFEFC7; --pruefen-text: #6B4200; --pruefen-rand: #B87700;
  --problem-bg: #FFD27A; --problem-text: #5C2E00;
  --neutral-bg: #E6EAEA; --neutral-text: #445052;

  /* Form und Raster */
  --radius: 0;
  --radius-knopf: 2px;
  --space-unit: 8px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --row-height: 48px;
  /* 88px statt Carbon-48px: Logo mit Claim braucht laut CD mind. 36 mm (≈136px) Breite und
     rundum Schutzraum = Breite des „R" (≈16px). CD hat Vorrang vor dem Stil (DESIGN_PROFILE). */
  --kopfleiste-hoehe: 88px;
  --logo-breite: 136px;

  /* Schrift */
  --font: 'Barlow', Arial, Helvetica, sans-serif;
  --fs-meta: 14px; --fs-text: 16px; --fs-abschnitt: 20px; --fs-titel: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Carbon: unmittelbare Ansichtswechsel — keine Übergänge, keine Animationen */
* { transition: none !important; animation: none !important; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { margin: 0; font-weight: 700; }
.titel { font-size: var(--fs-titel); line-height: 1.1; text-transform: uppercase; }
.abschnitt-titel { font-size: var(--fs-abschnitt); line-height: 1.2; }
.meta { font-size: var(--fs-meta); color: var(--text-muted); }
.zahl { font-variant-numeric: tabular-nums; text-align: right; }
.versal { text-transform: uppercase; letter-spacing: 0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sichtbarer Fokus überall — 2px dunkel + 2px Abstand in Hintergrundfarbe (auch auf Rot sichtbar) */
:focus-visible {
  outline: 2px solid var(--dunkel);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg);
}
/* Überschriften bekommen beim Seitenwechsel per Skript den Fokus (Screenreader-Ansage) —
   sie sind nicht bedienbar, daher ohne Fokusrahmen. */
h1[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  min-height: var(--kopfleiste-hoehe);
  background: var(--rot);
  color: var(--auf-rot);
  display: flex;
  flex-wrap: wrap;            /* schmale Fenster: rechter Teil bricht in eine zweite Zeile um, statt abgeschnitten zu werden */
  align-items: stretch;
  padding: 0 var(--s3);
  column-gap: var(--s4);
  flex: none;
}
.kopfleiste__logo { display: flex; align-items: center; min-height: var(--kopfleiste-hoehe); }
.kopfleiste__logo img { width: var(--logo-breite); height: auto; display: block; }
.kopfleiste__app {
  display: flex; align-items: center;
  font-weight: 700; font-size: var(--fs-text); letter-spacing: 0.04em; text-transform: uppercase;
  padding-left: var(--s4);
  border-left: 1px solid var(--auf-rot);
  margin: var(--s2) 0;
}
.kopfleiste__nav { display: flex; align-items: stretch; gap: var(--s1); }
.kopfleiste__reiter {
  display: flex; align-items: center;
  padding: 0 var(--s3);
  color: var(--auf-rot); text-decoration: none;
  font-weight: 700; font-size: var(--fs-meta); letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
.kopfleiste__reiter[aria-current="page"] { border-bottom-color: var(--auf-rot); }
.kopfleiste__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-meta); padding: var(--s2) 0; white-space: nowrap; }
.kopfleiste__knopf {
  background: transparent; color: var(--auf-rot);
  border: 1px solid var(--auf-rot); border-radius: var(--radius-knopf);
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: var(--s1) var(--s2); cursor: pointer;
}
.kopfleiste__knopf:hover { background: var(--rot-hover); }
/* Gesellschaft im Kopf (Phase B): immer sichtbar, bei mehreren umschaltbar */
.kopfleiste__gesellschaft {
  background: var(--rot); color: var(--auf-rot); border: 1px solid var(--auf-rot); border-radius: var(--radius-knopf);
  font: inherit; font-weight: 700; padding: var(--s1) var(--s2); max-width: 220px;
}
.kopfleiste__gesellschaft option { color: var(--text); background: var(--bg); }
.kopfleiste__gesellschaft-text { font-weight: 700; }
.kopfleiste__pille {
  background: var(--problem-bg); color: var(--problem-text);
  border: 1px solid var(--problem-text);
  font-weight: 700; padding: 2px var(--s2); cursor: pointer; font: inherit; font-size: var(--fs-meta);
}

/* ---------- Seitengerüst ---------- */
.inhalt { flex: 1 0 auto; width: 100%; max-width: 1920px; margin: 0 auto; padding: var(--s4) var(--s3) var(--s5); }
.fusszeile {
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
}
.fusszeile__eintrag strong { color: var(--text); font-weight: 700; }

/* ---------- Karte / Seite mit einer Aufgabe ---------- */
.aufgabe {
  max-width: 640px;
  margin: var(--s5) auto 0;
  border: 1px solid var(--border);
  border-top: 4px solid var(--rot);
  background: var(--bg);
}
.aufgabe__kopf { padding: var(--s4) var(--s4) var(--s3); }
.aufgabe__koerper { padding: 0 var(--s4) var(--s4); }
.aufgabe__koerper p { margin: 0 0 var(--s3); }
.aufgabe__liste { margin: 0 0 var(--s3); padding: 0; list-style: none; }
.aufgabe__liste li { position: relative; padding-left: var(--s4); margin-bottom: var(--s2); }
.aufgabe__liste li::before {
  content: ''; position: absolute; left: 4px; top: 0.55em;
  width: 8px; height: 8px; background: var(--rot);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: flex-start;
  min-height: 48px; min-width: 160px;
  padding: 0 var(--s3);
  font: inherit; font-weight: 700; font-size: var(--fs-text);
  text-transform: uppercase; letter-spacing: 0.04em; text-align: left;
  border-radius: var(--radius-knopf);
  cursor: pointer;
}
.knopf--primaer { background: var(--rot); color: var(--auf-rot); border: 1px solid var(--rot); }
.knopf--primaer:hover { background: var(--rot-hover); border-color: var(--rot-hover); }
.knopf--primaer:active { background: var(--rot-hover); }
.knopf--sekundaer { background: transparent; color: var(--text); border: 1px solid var(--text); }
.knopf--sekundaer:hover { background: var(--surface-2); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.knopf__grund { font-size: var(--fs-meta); color: var(--text-muted); }

/* ---------- Auswahlliste (Nutzer) ---------- */
.auswahl { list-style: none; margin: 0 0 var(--s3); padding: 0; border-top: 1px solid var(--border); }
.auswahl li { border-bottom: 1px solid var(--border); }
.auswahl button {
  width: 100%; min-height: var(--row-height);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 0 var(--s3);
  background: transparent; border: 0; border-left: 3px solid transparent;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.auswahl button:hover { background: var(--surface-2); border-left-color: var(--text); }
.auswahl__name { font-size: var(--fs-text); font-weight: 700; }
.auswahl__meta { font-size: var(--fs-meta); color: var(--text-muted); }

/* ---------- Hinweise ---------- */
.hinweis {
  border: 1px solid var(--pruefen-rand);
  background: var(--pruefen-bg); color: var(--pruefen-text);
  padding: var(--s2) var(--s3); margin: 0 0 var(--s3);
}
.hinweis--problem { border-color: var(--problem-text); background: var(--problem-bg); color: var(--problem-text); }
.hinweis__titel { font-weight: 700; display: block; }
.codezeile {
  font-family: Consolas, 'Courier New', monospace; font-size: var(--fs-meta);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: var(--s2); white-space: pre-wrap; word-break: break-word; margin: 0 0 var(--s3);
}

/* ---------- Seitenkopf + Leerzustand ---------- */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--border); margin-bottom: var(--s4); }
.leer {
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: var(--s5) var(--s4);
  max-width: 720px;
}
.leer__titel { font-size: var(--fs-abschnitt); margin-bottom: var(--s2); }
.leer p { margin: 0 0 var(--s3); }

/* ---------- Karten (Abschnitte einer Seite) ---------- */
.karte { border: 1px solid var(--border); background: var(--bg); padding: var(--s4); margin-bottom: var(--s4); max-width: 960px; }
.karte > .abschnitt-titel { margin-bottom: var(--s2); }
.karte p { margin: 0 0 var(--s3); }
.statuszeile { margin: 0 0 var(--s3); }

/* ---------- Pillen (Status, immer mit Zeichen + Wort) ---------- */
.pille { display: inline-block; padding: 2px var(--s2); border: 1px solid; font-size: var(--fs-meta); font-weight: 700; border-radius: 12px; }
.pille--ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-rand); }
.pille--pruefen { background: var(--pruefen-bg); color: var(--pruefen-text); border-color: var(--pruefen-rand); }
.pille--problem { background: var(--problem-bg); color: var(--problem-text); border-color: var(--problem-text); }
.pille--neutral { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--feldkante); }

/* ---------- Formularfelder (Carbon: Fläche + Unterkante) ---------- */
.feld { display: flex; flex-direction: column; gap: var(--s1); margin: 0 0 var(--s3); max-width: 640px; }
.feld__label { font-size: var(--fs-meta); font-weight: 700; }
.feld__eingabe {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 0; border-bottom: 1px solid var(--feldkante); border-radius: var(--radius);
  min-height: 48px; padding: 0 var(--s3);
}
.feld__eingabe:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 0; border-bottom-width: 2px; }
.feld__eingabe[aria-invalid="true"] { border-bottom: 2px solid var(--problem-text); }
.feld__hilfe { font-size: var(--fs-meta); color: var(--text-muted); }
.feld__fehler { font-size: var(--fs-meta); background: var(--problem-bg); color: var(--problem-text); padding: var(--s1) var(--s2); font-weight: 700; }
.hinweis--ok { border-color: var(--ok-rand); background: var(--ok-bg); color: var(--ok-text); }
.karte .hinweis { margin-top: var(--s3); }

/* ---------- Ablagefeld für PDFs ---------- */
.ablage {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  border: 1px dashed var(--feldkante); background: var(--surface-2);
  padding: var(--s4); margin-bottom: var(--s3);
}
.ablage--aktiv { border-style: solid; border-color: var(--text); background: var(--kopf); }

/* ---------- Auswahlliste: gewählter Eintrag ---------- */
.auswahl button[aria-pressed="true"] { background: var(--surface-2); border-left-color: var(--text); }

/* ---------- Beleg-Anzeige ---------- */
.beleg { border: 1px solid var(--border); background: var(--surface-2); }
.beleg__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); background: var(--kopf); border-bottom: 1px solid var(--border); }
.beleg__knopf { min-width: 40px; min-height: 40px; font: inherit; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--feldkante); border-radius: var(--radius-knopf); cursor: pointer; padding: 0 var(--s2); }
.beleg__knopf:hover { background: var(--surface-2); }
.beleg__seite { min-width: 140px; text-align: center; font-size: var(--fs-meta); }
.beleg__trenner { width: 1px; height: 24px; background: var(--feldkante); margin: 0 var(--s2); }
.beleg__flaeche { overflow: auto; scrollbar-gutter: stable; max-height: 75vh; padding: var(--s2); }
.beleg__canvas { display: block; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); }

/* ---------- Brotkrumen, Reiter ---------- */
.brotkrumen { font-size: var(--fs-meta); color: var(--text-muted); margin-bottom: var(--s2); }
.brotkrumen a { color: var(--text); font-weight: 700; }
.reiter { display: flex; flex-wrap: wrap; gap: var(--s1); border-bottom: 1px solid var(--border); margin: var(--s4) 0; }
.reiter__eintrag {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3);
  font-weight: 700; font-size: var(--fs-meta); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.reiter__eintrag[aria-current="page"] { border-bottom-color: var(--rot); }
.reiter__eintrag[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Schriftfeld (Signature-Element: wie das Zeichnungs-Schriftfeld) ---------- */
.schriftfeld {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 4px solid var(--rot); border-left: 1px solid var(--text);
}
.schriftfeld__kasten {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s2) var(--s3); min-height: 64px;
  border-right: 1px solid var(--text); border-bottom: 1px solid var(--text);
  background: var(--surface-2);
}
.schriftfeld__kasten--breit { grid-column: span 2; }
.schriftfeld__kasten--stand { grid-column: span 3; }
.schriftfeld__titel { font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.schriftfeld__wert { font-size: var(--fs-abschnitt); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.schriftfeld__wert--klein { font-size: var(--fs-meta); }

.bauabschnitt { display: flex; gap: 4px; list-style: none; margin: 0 0 var(--s1); padding: 0; }
.bauabschnitt__segment { flex: 1; height: 12px; border: 1px solid var(--feldkante); background: var(--bg); }
.bauabschnitt__segment--erreicht { background: var(--rot); border-color: var(--rot); }

/* ---------- Formular: Auswahlgruppe, kurze Felder, Text-Knopf ---------- */
.auswahlgruppe { border: 0; padding: 0; margin: 0 0 var(--s3); }
.auswahlgruppe__option { display: inline-flex; align-items: center; gap: var(--s1); min-height: 48px; margin-right: var(--s4); font-size: var(--fs-text); }
.auswahlgruppe__option input { width: 20px; height: 20px; accent-color: var(--text); }
.feld__eingabe--kurz { max-width: 160px; }
.feld__eingabe[readonly] { background: var(--kopf); }
.knopf-text { background: none; border: 0; font: inherit; font-size: var(--fs-meta); font-weight: 700; color: var(--text); text-decoration: underline; cursor: pointer; padding: var(--s2); min-height: 40px; }
.auswahl__zeile { display: flex; align-items: center; gap: var(--s2); }
.auswahl__zeile > button:first-child, .auswahl__text { flex: 1; }
/* Neben-Knöpfe einer Zeile nur so breit wie nötig (sonst teilen sie sich 100 % mit dem Hauptknopf) */
.auswahl__zeile > .knopf-text, .auswahl__zeile > .knopf { width: auto; flex: none; }
.auswahl__text { display: flex; flex-direction: column; padding: var(--s2) var(--s3); }
.leer--klein { padding: var(--s3); max-width: none; }

/* ---------- Tabelle (Carbon: grauer Kopf, 48px-Zeilen, Linien) ---------- */
.tabelle__rahmen { margin-bottom: var(--s4); }
.tabelle__werkzeuge { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.tabelle__suchfeld { flex: 1 1 320px; margin-bottom: var(--s2); }
.tabelle__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); min-height: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--s1); border: 1px solid var(--feldkante); border-radius: 16px; background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-meta); padding: 4px var(--s3); cursor: pointer; min-height: 32px; }
.chip:hover { background: var(--kopf); }
.tabelle__scroll { overflow-x: auto; border: 1px solid var(--border); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
.tabelle th { background: var(--kopf); font-size: var(--fs-meta); font-weight: 700; text-align: left; padding: 0; border-bottom: 1px solid var(--feldkante); white-space: nowrap; }
.tabelle th.zahl { text-align: right; }
.tabelle__sortknopf { width: 100%; min-height: 48px; padding: 0 var(--s3); background: none; border: 0; font: inherit; font-weight: 700; color: var(--text); text-align: inherit; cursor: pointer; }
.tabelle__sortknopf:hover { background: var(--border); }
.tabelle__filterzeile td { background: var(--surface-2); padding: var(--s1) var(--s2); border-bottom: 1px solid var(--border); }
.tabelle__filter { width: 100%; min-height: 32px; font: inherit; font-size: var(--fs-meta); color: var(--text); background: var(--bg); border: 0; border-bottom: 1px solid var(--feldkante); padding: 0 var(--s2); }
.tabelle td { padding: var(--s2) var(--s3); height: var(--row-height); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle__zeile--klickbar { cursor: pointer; }
.tabelle__zeile--klickbar:hover td { background: var(--surface-2); }
.tabelle__leer td { color: var(--text-muted); padding: var(--s4) var(--s3); }
.tabelle__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; }
.tabelle__fuss select { font: inherit; font-size: var(--fs-meta); min-height: 40px; color: var(--text); background: var(--bg); border: 1px solid var(--feldkante); }

/* ---------- Prüfansicht: Positionen links, Beleg rechts ---------- */
.karte--breit { max-width: none; }
.pruefen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 1200px) {
  .pruefen:has(.pruefen__rechts) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pruefen__rechts { position: sticky; top: var(--s3); align-self: start; }
}
.abschnittkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.positionsformular { border: 1px solid var(--border); border-left: 3px solid var(--text); background: var(--surface-2); padding: var(--s3); margin-bottom: var(--s3); }
.positionsformular .feld__eingabe { background: var(--bg); }
.formgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--s3); }
.formgitter .feld { margin-bottom: var(--s2); }
.feld--breit { grid-column: 1 / -1; }
.zelle__hinweis { display: block; font-size: var(--fs-meta); color: var(--text-muted); }
.zelle__pille { margin-left: var(--s1); font-size: 12px; padding: 0 var(--s1); }
.hinweis--neutral { border-color: var(--feldkante); background: var(--neutral-bg); color: var(--neutral-text); }

/* ---------- Dialog ---------- */
.dialog { border: 1px solid var(--text); border-top: 4px solid var(--rot); border-radius: var(--radius); padding: var(--s4); max-width: 520px; color: var(--text); background: var(--bg); }
.dialog::backdrop { background: rgba(31, 33, 36, 0.45); }
.dialog p { margin: var(--s2) 0 var(--s4); }

/* ---------- Toasts ---------- */
.toast-stapel { position: fixed; right: var(--s3); bottom: var(--s5); display: flex; flex-direction: column; gap: var(--s2); z-index: 50; max-width: 420px; }
.toast { background: var(--text); color: var(--auf-rot); padding: var(--s2) var(--s3); border-left: 4px solid var(--rot); font-size: var(--fs-meta); }
.toast--fehler { background: var(--problem-bg); color: var(--problem-text); border-left-color: var(--problem-text); }

/* ---------- Diagnose-Overlay (Entwickler-Werkzeug) ---------- */
.diag {
  position: fixed; right: var(--s3); top: calc(var(--kopfleiste-hoehe) + var(--s3));
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
  background: var(--bg); border: 1px solid var(--text); border-top: 4px solid var(--text);
  z-index: 60; padding: var(--s3);
  font-size: var(--fs-meta);
}
.diag[hidden] { display: none; }
.diag__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.diag pre { margin: 0 0 var(--s2); white-space: pre-wrap; word-break: break-word; font-family: Consolas, 'Courier New', monospace; font-size: 13px; }
.diag__test--ok::before { content: '✓ '; color: var(--ok-text); font-weight: 700; }
.diag__test--fehler::before { content: '✕ '; color: var(--problem-text); font-weight: 700; }
.diag ul { list-style: none; margin: 0; padding: 0; }
.diag li { padding: 2px 0; border-bottom: 1px solid var(--surface-2); }

/* Schmale Fenster: Schriftfeld zweispaltig (nichts zerfällt, keine eigene Handy-Bedienung) */
@media (max-width: 760px) {
  .schriftfeld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schriftfeld__kasten--breit, .schriftfeld__kasten--stand { grid-column: span 2; }
}

@media print {
  .kopfleiste, .fusszeile, .toast-stapel, .diag { display: none !important; }
}

/* ---------- KI-Lesen ---------- */
.ki-knopf { display: inline-flex; align-items: center; gap: var(--s1); flex: none; }
.hinweisliste { margin: var(--s2) 0; padding-left: var(--s4); }
.hinweisliste li { margin-bottom: var(--s1); }

/* ---------- Angebot: Kopfdaten im Schriftfeld-Stil ---------- */
.schriftfeld__wert--mittel { font-size: var(--fs-text); }
.schriftfeld--angebot { margin-bottom: var(--s4); }
.schriftfeld--angebot .schriftfeld__kasten:nth-last-child(-n+2) { grid-column: span 3; }
@media (max-width: 760px) { .schriftfeld--angebot .schriftfeld__kasten:nth-last-child(-n+2) { grid-column: span 1; } }

/* ---------- Abgleich (Schritt 8) ---------- */
.abgleich-uebersicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); }
.abgleich-karte { border: 1px solid var(--border); border-top: 4px solid var(--dunkel); background: var(--bg); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.abgleich-karte__kopf { display: flex; justify-content: space-between; gap: var(--s2); }
.abgleich-karte__zahlen { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-meta); }
.abgleich-zahl strong { font-size: 1.25rem; }
.pillenreihe { display: flex; flex-wrap: wrap; gap: var(--s1); }
.aktionsreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.aktionsreihe > .knopf-text { width: auto; flex: none; }
.feld__eingabe--klein { min-height: 32px; padding: 0 var(--s2); max-width: 280px; font-size: var(--fs-meta); }
.feld__eingabe--text { min-height: 96px; padding: var(--s2) var(--s3); resize: vertical; }

/* ---------- Preisspiegel (Schritt 9) ---------- */
.ps__scroll { overflow-x: auto; border: 1px solid var(--border); }
.ps__scroll:focus-visible { outline: 2px solid var(--dunkel); }
.ps { min-width: 100%; border-collapse: collapse; }
.ps th, .ps td { vertical-align: top; padding: 12px var(--s3); height: var(--row-height); text-align: left; font-weight: 400; border-bottom: 1px solid var(--border); }
.ps thead th { font-weight: 700; white-space: nowrap; }
.ps th.zahl, .ps td.zahl { text-align: right; white-space: nowrap; }
.ps tbody th[scope="row"] { font-weight: 700; white-space: nowrap; }
.ps__lieferant > * { display: block; margin-left: auto; }
.ps .ps__fix { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.ps thead th { background: var(--kopf); position: sticky; top: 0; }
.ps thead th.ps__fix { z-index: 2; background: var(--kopf); }
.ps thead th.ps__lieferant { min-width: 180px; text-align: right; border-top: 4px solid var(--dunkel); white-space: normal; }
.ps__lieferantname { font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-align: right; }
.ps__zelle { text-align: right; font-variant-numeric: tabular-nums; }
.ps__zelle > span, .ps__zelle > button, .ps__zelle > strong { display: block; }
.ps__wert { font: inherit; font-variant-numeric: tabular-nums; color: var(--text); background: none; border: 0; padding: 0; margin-left: auto; cursor: pointer; text-align: right; }
button.ps__wert { text-decoration: underline dotted; }
button.ps__wert:focus-visible, .ps__lieferantname:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; }
.ps__info { font-size: var(--fs-meta); color: var(--text-muted); }
.ps__signal { font-size: var(--fs-meta); font-weight: 700; }
.ps__zelle--guenstig { background: var(--ok-bg); color: var(--ok-text); box-shadow: inset 4px 0 0 var(--ok-rand); }
.ps__zelle--guenstig .ps__wert { color: var(--ok-text); font-weight: 700; }
.ps__zelle--pruefen { background: var(--pruefen-bg); color: var(--pruefen-text); box-shadow: inset 4px 0 0 var(--pruefen-rand); }
.ps__zelle--nicht { background: var(--problem-bg); color: var(--problem-text); }
.ps__zelle--leer { color: var(--text-muted); }
.ps__gruppe th, .ps__gruppe td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--feldkante); }
.ps__gruppe .ps__zelle--guenstig { background: var(--ok-bg); }
.ps__gruppe .ps__zelle--pruefen { background: var(--pruefen-bg); }
.ps__fuss th, .ps__fuss td { background: var(--surface-2); }
.ps__fuss th { text-align: left; font-weight: 400; }
.ps__fuss:first-child th, .ps__fuss:first-child td { border-top: 2px solid var(--dunkel); }
.ps__fuss--summe th, .ps__fuss--summe td { font-weight: 700; font-size: 1.05rem; }
.ps__fuss .ps__zelle--guenstig { background: var(--ok-bg); }
.ps__fuss .ps__zelle--pruefen { background: var(--pruefen-bg); }
.ps__filter { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; font-weight: 700; cursor: pointer; }
.ps__filter input { width: 20px; height: 20px; accent-color: var(--dunkel); }
.ps__legende { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0 0; font-size: var(--fs-meta); }
.ps__legende dt { font-weight: 700; }
.ps__legende dd { margin: 0; }
.ps .ps__gruppe .ps__fix { background: var(--surface-2); }
.ps td.ps__zelle { text-align: right; }

/* ---------- Vergabe (Schritt 10) ---------- */
.ps__zelle--vergeben { box-shadow: inset 0 -3px 0 var(--dunkel); }
.ps__zelle--vergeben.ps__zelle--guenstig { box-shadow: inset 4px 0 0 var(--ok-rand), inset 0 -3px 0 var(--dunkel); }
.ps__zelle--vergeben.ps__zelle--pruefen { box-shadow: inset 4px 0 0 var(--pruefen-rand), inset 0 -3px 0 var(--dunkel); }
.vergabe-karte { border: 1px solid var(--border); border-left: 4px solid var(--dunkel); padding: var(--s3); margin-top: var(--s3); background: var(--bg); }
.vergabe-karte--widerrufen { border-left-color: var(--feldkante); color: var(--text-muted); background: var(--surface-2); }
.vergabe-karte__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.vergabe-karte__werte { display: grid; grid-template-columns: max-content max-content; gap: var(--s1) var(--s4); margin: 0 0 var(--s2); }
.vergabe-karte__werte dt { font-size: var(--fs-meta); }
.vergabe-karte__werte dd { margin: 0; font-weight: 700; }
.auswahlgruppe { border: 0; padding: 0; margin: 0 0 var(--s3); }
.auswahlgruppe__option { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; margin-right: var(--s4); cursor: pointer; }
.auswahlgruppe__option input { width: 20px; height: 20px; accent-color: var(--dunkel); }
.vg-positionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 280px; overflow-y: auto; border: 1px solid var(--border); padding: var(--s2); background: var(--bg); }

/* ---------- Zusagen und Absagen, Textvorlagen (E3) ---------- */
.mitteilungen-bereich { margin-top: var(--s4); border-top: 1px solid var(--border); padding-top: var(--s3); }
.mitteilungen { list-style: none; margin: 0; padding: 0; }
.mitteilungen > .auswahl__zeile { flex-wrap: wrap; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.mitteilungen .auswahl__name { font-weight: 700; min-width: 160px; }
.mitteilungen .auswahl__meta { flex: 1; min-width: 200px; }
.mail-editor { border: 1px solid var(--border); border-left: 4px solid var(--rot); padding: var(--s3); margin: var(--s2) 0 var(--s3); background: var(--bg); }
.mail-editor__text { min-height: 280px; line-height: 1.45; }
.vorlage { border-top: 1px solid var(--border); padding-top: var(--s3); margin-top: var(--s3); }
.vorlage__betreff { font-weight: 700; margin: 0 0 var(--s2); overflow-wrap: anywhere; }
.vorlage__text { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border); padding: var(--s3); margin: 0 0 var(--s3); max-height: 320px; overflow-y: auto; }
.drucken .mitteilungen-bereich { display: none !important; }

/* ---------- Versand: Sammelanfrage, Rücklauf (E4) ---------- */
.versand__liste { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-height: 240px; }
.versand__liste .auswahlgruppe__option { margin-right: 0; overflow-wrap: anywhere; }

/* ---------- Export / Druck A4 quer (Schritt 11) ---------- */
.ps__werkzeuge { align-items: center; }
.ps__druckkopf { display: none; }
@page { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Seite " counter(page) " von " counter(pages); font: 8pt Barlow, Arial, sans-serif; } }
.drucken { background: #fff; }
.drucken .kopfleiste, .drucken .fusszeile, .drucken .toast-stapel, .drucken .diag, .drucken .reiter, .drucken .brotkrumen,
.drucken .seitenkopf .knopf-reihe, .drucken .ps__werkzeuge, .drucken [data-formular], .drucken .vergabe-karte .knopf-reihe,
.drucken [data-action="vergabe-neu"], .drucken .hinweis a { display: none !important; }
.drucken * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.drucken .seite, .drucken main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.drucken .karte { border: 0; padding: 0; box-shadow: none; }
.drucken .ps__scroll { overflow: visible; border: 0; }
.drucken .ps { font-size: 7.5pt; width: 100%; table-layout: auto; }
.drucken .ps th, .drucken .ps td { padding: 2px 4px; height: auto; position: static; }
.drucken .ps thead th.ps__lieferant { min-width: 0; border-top-width: 2px; }
.drucken .ps__druckkopf { display: table-row; }
.drucken .ps__druckkopf th { background: #fff; text-align: left; font-size: 9pt; font-weight: 400; border-bottom: 2px solid var(--rot, #E4003A); padding-bottom: 4px; }
.drucken .ps__info, .drucken .ps__signal { font-size: 6.5pt; }
.drucken .ps tr { break-inside: avoid; }
.drucken .ps tfoot { display: table-row-group; }
.drucken .ps__wert { text-decoration: none; }
.drucken .ps__legende { font-size: 7pt; break-inside: avoid; }
.drucken .vergabe-karte { break-inside: avoid; }

/* ---------- Datenschutz (Schritt 12) ---------- */
.ablage__hinweis { margin-top: calc(-1 * var(--s2)); margin-bottom: var(--s3); max-width: 72ch; }
/* Erläuterungen in Zahlenzellen dürfen umbrechen — sonst zieht ein langer Nebenkosten-Text die Spalte auf (Befund Glas-Druck) */
.ps td.zahl .ps__info, .ps td.zahl .ps__signal, .ps td.ps__zelle .ps__info, .ps td.ps__zelle .ps__signal { white-space: normal; }
.drucken .ps th, .drucken .ps td { font-size: inherit; }

/* ---------- Erweiterung E1: Beleg-Spalte ausblendbar ---------- */
.pruefen__werkzeug { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.pruefen__umschalter { width: auto; }
.pruefen--ohne-beleg { grid-template-columns: minmax(0, 1fr) !important; }

/* ---------- E1-4: Angebot aus mehreren PDFs ---------- */
.auswahl__haken { width: 20px; height: 20px; flex: none; accent-color: var(--dunkel); align-self: center; }
.belegleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: 0 0 var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.belegleiste .feld__label { margin: 0; }
.belegleiste__eintrag { display: inline-flex; gap: var(--s1); align-items: center; }
.belegleiste .knopf-text[aria-pressed="true"] { font-weight: 700; }