/* Testfassung S2b (05.11.2026): Blatt-Ansicht wie S2b (Runde 3, von Marco gewählt) mit den Zuständen aus Runde 4.
   Wird nach app.css und uebersicht.css geladen und ändert NUR die Darstellung am Bildschirm; Druck und PDF kommen aus #druck und bleiben wie in v26n.
   Fünf Zustandsfarben (blau neu, violett geändert, gelb Standard?, hellgrün nach ✓, hellrot nach ✗) und ein stärkeres Rot für Fehler;
   die Flächen der vier Bereiche sind eine Grünfamilie. Rundung höchstens 6 px. */
:root {
  --f1: #D6E9DB; --f2: #E0ECD2; --f3: #D2EAE2; --f4: #E9ECCF;
  --neu-f: #E1EBF5; --neu-r: #6A8FB4; --neu-t: #2C4C6C;
  --aend-f: #EEE5F6; --aend-t: #5B3A7E;
  --std-f: #F4E8CC; --std-t: #6B4E12;
  --ja-f: #D2F0C9; --ja-r: #3E8F4F; --ja-t: #1D5A2C;
  --nein-f: #FADBD6; --nein-r: #D2766A; --nein-t: #87301F;
  --fehler-f: #F2B3A8; --fehler-r: #B33A2B; --fehler-t: #7A1F14;
  --knopf-rand: #8A9690;
}

/* Kennzeichnung: damit niemand die Testfassung mit der echten App verwechselt */
body::before { content: "Testfassung S2b"; display: block; height: 18px; line-height: 18px; padding: 0 12px; background: var(--gruen-dunkel); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
@media print { body::before { display: none !important; } }

/* ---------- Legende ---------- */
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 12px 4px 2px; font-size: 13px; color: var(--leise); order: -1; }
.legende .l { display: inline-flex; align-items: center; gap: 6px; }
.legende i { display: inline-block; width: 16px; height: 16px; border-radius: 3px; flex: none; }
.legende .k-neu { background: var(--neu-f); box-shadow: inset 0 0 0 2px var(--neu-r); }
.legende .k-aend { background: var(--aend-f); box-shadow: inset 0 0 0 1px #C3A9DD; }
.legende .k-gelb { background: var(--std-f); box-shadow: inset 0 0 0 1px #D9B26A; }
.legende .k-ja { background: var(--ja-f); box-shadow: inset 0 0 0 2px var(--ja-r); }
.legende .k-nein { background: var(--nein-f); box-shadow: inset 0 0 0 2px var(--nein-r); }

/* ---------- Bereiche und Karten ---------- */
.bereich { border-radius: var(--r); padding: 14px 16px 16px; margin-top: 12px; order: 1; }
.b1 { background: var(--f1); } .b2 { background: var(--f2); } .b3 { background: var(--f3); } .b4 { background: var(--f4); }
.bereich > h2 { margin: 0; padding: 0 4px 2px; font-size: 19px; font-weight: 700; letter-spacing: -.005em; color: var(--gruen-dunkel); display: flex; align-items: center; gap: 10px; text-align: left; }
.bereich > h2 .et { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.75); color: var(--gruen-dunkel); letter-spacing: 0; }
.bereich .abschnitt { background: var(--papier); border-radius: var(--r); padding: 14px 16px 16px; margin-top: 10px; min-width: 0; order: 0; }
.bereich .abschnitt.text { background: none; padding: 6px 4px 0; margin-top: 6px; }
.bereich .abschnitt > h3.balken { background: none; margin: 0; padding: 0 0 10px; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); text-align: left; }
.bereich .abschnitt > h3.balken small { text-align: left; }
.bereich .inhalt { padding: 0; }
.bereich .zwei { gap: 0 10px; }
.bereich .zwei.oben, .bereich .zwei.personen { margin-top: 0; align-items: stretch; }
.bereich .abschnitt.bloche > h3.balken, .bereich .abschnitt.sortiment > h3.balken { margin-top: 0; }
#formular .briefkopf { order: 10; }
#formular .stand-zeile { order: 11; }

/* eine Ausrichtung für alles: Titel und Bezeichnungen links, Zahlen links unter ihrem Titel (Runde 3, Marco 15445) */
.reihe > label, .balken, .balken small, .notiz label, table.preise th, table.sorti th, .raster .kopf, .lp-raster * { text-align: left; }
.bereich table.preise .feld, .bereich table.sorti .feld, .bereich .raster .feld { text-align: left; }

@media (max-width: 1023px) {
  .bereich { border-radius: 0; padding: 12px 10px 14px; margin-top: 6px; }
  .bereich .abschnitt { padding: 12px 12px 14px; }
  .bereich .zwei { display: contents; }
  .bereich .raster, .bereich .reiter { margin-left: -12px; margin-right: -12px; }
  .bereich .reiter { padding: 0 12px; }
  .legende { padding: 10px 14px 4px; }
  .papier { padding: 0; }
}
@media (min-width: 1024px) {
  .papier { max-width: 1090px; padding: 6px 20px 22px; }
  .bereich .zwei { display: grid; grid-template-columns: 1fr 1fr; }
  .bereich { margin-top: 14px; }
}

/* ---------- Felder: Fläche mit der Bezeichnung darin (S2b) ---------- */
.bereich .reihe { display: flex; align-items: center; gap: 4px 10px; background: var(--feld); border-radius: var(--r); padding: 2px 12px; margin: 0 0 6px; min-height: 44px; }
.bereich .reihe > label { flex: 0 1 auto; max-width: 46%; margin: 0; padding: 0; font-size: 13px; line-height: 1.25; color: var(--leise); }
.bereich .reihe > div { flex: 1 1 0; min-width: 0; }
.bereich .reihe .feld { background: transparent; box-shadow: none; min-height: 40px; padding: 6px 0; }
.bereich .reihe .feld:focus { background: transparent; box-shadow: none; }
.bereich .reihe:focus-within { background: var(--papier); box-shadow: inset 0 0 0 2px var(--gruen); }
.bereich .reihe .mit-einheit .feld.kurz { max-width: 120px; }
.bereich .reihe .zeitraum .feld { max-width: none; }
.bereich .reihe .edv-feld { background: transparent; }
.bereich .abschnitt.uebergabe .reihe, .bereich .abschnitt.zertifizierung .reihe { background: none; padding: 0; flex-wrap: wrap; align-items: flex-start; min-height: 0; }
.bereich .abschnitt.uebergabe .reihe:focus-within, .bereich .abschnitt.zertifizierung .reihe:focus-within { box-shadow: none; background: none; }
.bereich .reihe .zuordnung button, .bereich .reihe .wahl-knoepfe button { background: var(--papier); box-shadow: inset 0 0 0 1px var(--knopf-rand); }
.bereich .reihe .zuordnung button[aria-pressed="true"], .bereich .reihe .wahl-knoepfe button[aria-pressed="true"] { background: var(--gruen); color: #fff; }
.bereich .reihe .hinweis-rot { margin: 0 0 6px; }
.bereich .abschnitt.vs .inhalt, .bereich .abschnitt.vereinbarung .inhalt { padding: 0; }
.bereich .person-balken { flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.bereich .edv-gruppe .feld { background: var(--feld); }
.bereich .s-reiter { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Namen: neu = blau (nicht in den Stammdaten), nur ein Hinweis, kein Alarm ---------- */
.bereich .reihe:has(.namefeld .feld.rot), .bereich .reihe:has(.namefeld .feld.hellrot) { background: var(--papier); box-shadow: inset 0 0 0 2px var(--neu-r); }
.bereich .gruppe-neu .reihe:has(.namefeld .feld.rot) { background: var(--papier); }
.bereich .namefeld .hinweis-rot { color: var(--neu-t); font-size: 13px; }
/* Fehler: kräftiger als das Hellrot nach ✗ */
.bereich .reihe:has(.feld.unklar), .bereich .reihe:has(.zeitraum .feld.rot), .bereich .reihe:has(.feld.pflicht) { background: var(--fehler-f); box-shadow: inset 0 0 0 2px var(--fehler-r); }
.feld.unklar, .feld.pflicht { background: var(--fehler-f) !important; box-shadow: inset 0 0 0 2px var(--fehler-r) !important; color: var(--fehler-t); }
.bereich .reihe .feld.unklar, .bereich .reihe .feld.pflicht { background: transparent !important; box-shadow: none !important; }
.bereich .reihe .feld.rot { background: transparent; }
#rot-bis, .hinweis-rot#rot-bis { color: var(--fehler-t); font-weight: 600; }

/* ---------- Fragen und Antworten: eine Zeile mit Frage, ✓ und ✗ ---------- */
.bereich .stamm-auf { margin: 10px 0 0; padding: 0; border-radius: var(--r); background: none; }
.bereich .stamm-auf .sa-neu, .bereich .stamm-auf .sa-erg { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; min-height: 52px; padding: 5px 8px 5px 12px; cursor: default; }
.bereich .stamm-auf[data-art="erg"] .sa-neu, .bereich .stamm-auf[data-art="neu"] .sa-erg { display: none; }
.bereich .stamm-auf .sa-neu .ic-person { flex: none; width: 18px; height: 18px; color: var(--neu-t); }
.bereich .stamm-auf .sa-frage { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: inherit; }
.bereich .stamm-auf .sa-status { display: none; flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.bereich .stamm-auf .sa-knoepfe { display: flex; flex: none; gap: 6px; }
.bereich .stamm-auf .sa-knoepfe button { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: var(--papier); color: var(--tinte); font-size: 14px; cursor: pointer; }
.bereich .stamm-auf .sa-knoepfe button:disabled { opacity: .55; cursor: default; }
.bereich .stamm-auf .sa-knoepfe .ic { width: 20px; height: 20px; }
.bereich .stamm-auf .b-nein { color: var(--fehler-t); }
.bereich .stamm-auf .sa-knoepfe .ic-zurueck, .bereich .stamm-auf .sa-knoepfe button[aria-pressed="true"] .ic-ja, .bereich .stamm-auf .sa-knoepfe button[aria-pressed="true"] .ic-nein { display: none; }
.bereich .stamm-auf .sa-knoepfe button[aria-pressed="true"] .ic-zurueck { display: block; }
.bereich .stamm-auf .sa-knoepfe button[aria-pressed="true"] { background: var(--papier); color: var(--gruen-dunkel); box-shadow: 0 0 0 2px rgba(0,0,0,.28); }
.bereich .stamm-auf .sa-text { margin: 0; padding: 0 12px 8px; font-size: 13px; color: var(--leise); }
.bereich .stamm-auf .sa-text.offen { color: var(--fehler-t); font-weight: 600; }
.bereich .stamm-auf[data-wahl] .sa-text:not(.offen) { display: none; }
.bereich .stamm-auf.standard[data-wahl="ja"] .sa-text:not(:empty) { display: block; }
/* beantwortet: Text statt Frage, nur der gewählte Knopf bleibt (↺), ein Tipp irgendwo in der Box holt die Wahl zurück */
.bereich .stamm-auf[data-wahl] .sa-frage, .bereich .stamm-auf[data-wahl] .ic-person { display: none; }
.bereich .stamm-auf[data-wahl] .sa-status { display: block; }
.bereich .stamm-auf[data-wahl] .sa-knoepfe button[aria-pressed="false"] { display: none; }
.bereich .stamm-auf[data-wahl] { cursor: pointer; }
.bereich .stamm-auf[data-wahl] .sa-neu, .bereich .stamm-auf[data-wahl] .sa-erg { cursor: pointer; }

/* Farben der Boxen */
.bereich .stamm-auf .sa-neu { background: var(--neu-f); color: var(--neu-t); box-shadow: inset 0 0 0 2px var(--neu-r); border-radius: var(--r); }
.bereich .stamm-auf .sa-erg { background: var(--aend-f); color: var(--aend-t); border-radius: var(--r); }
.bereich .stamm-auf.standard .sa-erg { background: var(--std-f); color: var(--std-t); }
.bereich .stamm-auf[data-wahl="ja"] .sa-neu, .bereich .stamm-auf[data-wahl="ja"] .sa-erg { background: var(--ja-f); color: var(--ja-t); box-shadow: inset 0 0 0 2px var(--ja-r); }
.bereich .stamm-auf[data-wahl="nein"] .sa-neu, .bereich .stamm-auf[data-wahl="nein"] .sa-erg { background: var(--nein-f); color: var(--nein-t); box-shadow: inset 0 0 0 2px var(--nein-r); }

/* Gruppenrahmen: ein neuer Verkäufer, Schlägerer oder Frächter bekommt blaue Fläche, Rahmen und „neu“ am Titel; die Frage steht unten über die ganze Breite */
.bereich .abschnitt.gruppe-neu { background: var(--neu-f); border: 2px solid var(--neu-r); padding: 12px 14px 14px; }
.bereich .abschnitt.gruppe-neu.ja { background: var(--ja-f); border-color: var(--ja-r); }
.bereich .abschnitt.gruppe-neu.nein { background: var(--nein-f); border-color: var(--nein-r); }
.bereich .abschnitt.gruppe-neu .reihe { background: var(--papier); }
.bereich .abschnitt.gruppe-neu .edv-gruppe .feld { background: var(--papier); }
.bereich .abschnitt.gruppe-neu > h3.balken { display: flex; flex-wrap: wrap; align-items: center; }
.bereich .abschnitt.gruppe-neu > h3.balken::after { content: "+ neu"; order: 2; padding: 2px 8px; border-radius: 4px; background: var(--neu-t); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.bereich .abschnitt.gruppe-neu.ja > h3.balken::after { background: var(--ja-t); }
.bereich .abschnitt.gruppe-neu.nein > h3.balken::after { background: var(--nein-t); color: #fff; }
/* Nach der Antwort tragen auch die leisen Bezeichnungen in der Gruppe die dunkle Zustandsfarbe (Kontrast mindestens 4,5) */
.bereich .abschnitt.gruppe-neu.ja { --leise: var(--ja-t); }
.bereich .abschnitt.gruppe-neu.nein { --leise: var(--nein-t); }
.bereich .abschnitt.gruppe-neu .stamm-auf:not(.standard) { margin: 12px -14px -14px; border-radius: 0 0 4px 4px; }
.bereich .abschnitt.gruppe-neu .stamm-auf:not(.standard) .sa-neu, .bereich .abschnitt.gruppe-neu .stamm-auf:not(.standard) .sa-erg { background: rgba(255,255,255,.6); box-shadow: none; border-radius: 0 0 4px 4px; }
.bereich .abschnitt.gruppe-neu.ja .stamm-auf[data-wahl="ja"] .sa-neu { background: rgba(255,255,255,.55); color: var(--ja-t); }
.bereich .abschnitt.gruppe-neu.nein .stamm-auf[data-wahl="nein"] .sa-neu { background: rgba(255,255,255,.55); color: var(--nein-t); }
.bereich .abschnitt.gruppe-neu .stamm-auf .sa-frage { color: var(--neu-t); }
/* Karten, die eine Frage unten tragen, halten sie am Fuß (Verkäufer und Schlägerer stehen gleich hoch nebeneinander) */
.bereich .zwei.personen > .abschnitt, .bereich .abschnitt.fraechter { display: flex; flex-direction: column; }
.bereich .zwei.personen > .abschnitt > .inhalt, .bereich .abschnitt.fraechter > .inhalt { flex: 1; display: flex; flex-direction: column; }
.bereich .abschnitt .inhalt > .stamm-auf.standard { order: 1; }
.bereich .abschnitt .inhalt > .stamm-auf:not(.standard) { order: 2; }
.bereich .zwei.personen > .abschnitt .inhalt > .stamm-auf:not(.standard) { margin-top: auto; }
.bereich .zwei.personen > .abschnitt .inhalt > .reihe:last-of-type { margin-bottom: 12px; }
.bereich .abschnitt.gruppe-neu .inhalt > .stamm-auf.standard { margin-bottom: 12px; }
/* Vertreter: kleine Box unter dem Namen */
.bereich .abschnitt.vs .stamm-auf { margin: 6px 0 4px; }

/* Violett: ein geändertes Feld, alter Wert klein dabei; nach ✓ hellgrün, nach ✗ hellrot (nur das Feld) */
.bereich .reihe.geaendert { flex-wrap: wrap; background: var(--aend-f); padding-bottom: 6px; }
.bereich .gruppe-neu .reihe.geaendert { background: var(--aend-f); }
.bereich .reihe.geaendert .alt { order: 5; flex: 1 0 100%; margin: -4px 0 0; font-size: 12px; font-weight: 400; color: var(--aend-t); text-align: left; }
.bereich .reihe.geaendert.ja { background: var(--ja-f); box-shadow: inset 0 0 0 2px var(--ja-r); }
.bereich .reihe.geaendert.ja .alt, .bereich .reihe.geaendert.ja > label { color: var(--ja-t); }
.bereich .reihe.geaendert.nein { background: var(--nein-f); box-shadow: inset 0 0 0 2px var(--nein-r); }
.bereich .reihe.geaendert.nein .alt, .bereich .reihe.geaendert.nein > label { color: var(--nein-t); }

/* ---------- Tabellen und Raster in den Karten ---------- */
.bereich .abschnitt.bloche .notiz, .bereich .abschnitt.sortiment .notiz { margin-top: 12px; }
.bereich .abschnitt.lieferprofil .lp-raster { background: none; }
.bereich .abschnitt.unterschriften .unterschrift { gap: 12px 24px; }
.bereich table.preise th, .bereich table.sorti th { background: var(--balken); }
.bereich .stamm-auf.standard { margin-top: 10px; }
.bereich .abschnitt.sortiment .stamm-auf.standard { margin-left: 0; }

/* ---------- Handy ---------- */
@media (max-width: 1023px) {
  .bereich .reihe { padding: 2px 12px; }
  .bereich .reihe > label { max-width: 52%; }
  .bereich .abschnitt.gruppe-neu { padding: 10px 10px 12px; }
  .bereich .abschnitt.gruppe-neu .stamm-auf:not(.standard) { margin: 12px -10px -12px; }
  .bereich .stamm-auf .sa-frage { font-size: 13px; }
  .bereich .stamm-auf .sa-status { font-size: 13px; }
}

/* ---------- Nachbesserung 1 ---------- */
.bereich .stamm-auf .sa-knoepfe label.b-haken { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; background: var(--papier); color: var(--tinte); cursor: pointer; }
.bereich .stamm-auf .sa-haken { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.bereich .stamm-auf .sa-haken:disabled { cursor: default; }
.bereich .stamm-auf .sa-knoepfe label.b-haken:has(input:disabled) { opacity: .55; }
.bereich .stamm-auf .sa-knoepfe label.b-haken:has(input:checked) .ic-ja { display: none; }
.bereich .stamm-auf .sa-knoepfe label.b-haken:has(input:checked) .ic-zurueck { display: block; }
.bereich .stamm-auf .sa-knoepfe label.b-haken:has(input:checked) { color: var(--gruen-dunkel); box-shadow: 0 0 0 2px rgba(0,0,0,.28); }
.bereich .stamm-auf .sa-knoepfe label.b-haken:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 2px; }
.bereich .stamm-auf[data-wahl] .sa-knoepfe label.b-haken:not(:has(input:checked)) { display: none; }
.bereich .stamm-auf .sa-knoepfe button:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.bereich .reihe > .feld { flex: 1 1 0; width: auto; }
.bereich .reihe textarea.feld.einzeilig { min-height: 40px; }
.bereich .abschnitt.gruppe-neu > h3.balken > .titel-text, .bereich .abschnitt.gruppe-neu > h3.balken > .s-reiter { order: 0; }
.bereich .abschnitt.gruppe-neu > h3.balken::after { order: 1; }
.bereich .abschnitt.gruppe-neu > h3.balken > .edv-gruppe { order: 2; }
.bereich .abschnitt.gruppe-neu > h3.balken > small { order: 3; }
/* Namen, die es noch nicht gibt: blau statt rot (Marco: neu = blau) */
.bereich .namefeld .feld.rot, .bereich .namefeld .feld.hellrot { background: var(--papier); box-shadow: inset 0 0 0 2px var(--neu-r); color: var(--tinte); }
.bereich .reihe .namefeld .feld.rot, .bereich .reihe .namefeld .feld.hellrot { background: transparent; box-shadow: none; }
@media (min-width: 1024px) {
  .papier { padding: 6px 12px 22px; }
  .bereich { padding: 14px 12px 14px; }
  .bereich .abschnitt { padding: 14px 12px 14px; }
  .bereich .abschnitt.gruppe-neu { padding: 12px 10px 12px; }
  .bereich .abschnitt.gruppe-neu .stamm-auf:not(.standard) { margin: 12px -10px -12px; }
  .bereich .stamm-auf .sa-neu, .bereich .stamm-auf .sa-erg { padding-left: 12px; }
  table.preise .feld { font-size: 13px; padding: 6px 0 6px 5px; letter-spacing: -.03em; }
  table.preise th { padding: 4px 6px; }
  table.sorti .feld { font-size: 15px; }
}

/* Nachbesserung 2: nach der Antwort ruht der Name (kein blauer Rand mehr), die Entscheidung trägt die Farbe */
.bereich .abschnitt.gruppe-neu.ja .reihe:has(.namefeld .feld.rot), .bereich .abschnitt.gruppe-neu.nein .reihe:has(.namefeld .feld.rot),
.bereich .abschnitt.gruppe-neu.ja .reihe:has(.namefeld .feld.hellrot), .bereich .abschnitt.gruppe-neu.nein .reihe:has(.namefeld .feld.hellrot) { box-shadow: none; }
.bereich .abschnitt.gruppe-neu.ja .namefeld .feld.rot, .bereich .abschnitt.gruppe-neu.nein .namefeld .feld.rot { box-shadow: none; }

/* leise Schrift nur in den Bereichen etwas dunkler (Kontrast mindestens 4,5 auf den Grünflächen) */
.bereich { --leise: #4F5B55; }