/* AB Warenwirtschaft – Gestaltung nach Skizzen: Schwarzweiß, Linie statt Fläche, Fläche statt Farbe. Eine Datei, kein Build. */
:root {
  --ink: #000000; --graph: #2E2E2E; --steel: #6B6B6B; --mist: #A3A3A3;
  --rule: #D6D6D6; --wash: #F4F4F4; --paper: #FFFFFF;
  /* Eine einzige Schrift im ganzen Haus: die des Geräts. Keine Web- oder Sonderschriften,
     Hierarchie nur über Größe und Gewicht. Gilt auch für die spätere Monteur-App. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { font: 400 13px/1.35 var(--schrift); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.cn, h1, h2, .band .zahl { letter-spacing: -0.4px; }
h1 { font-size: 33px; line-height: 1.05; letter-spacing: -0.5px; }
h2 { font-size: 20px; line-height: 1.15; }
.unterzeile { color: var(--steel); margin-top: 8px; font-size: 13px; }
.hilfe { font-size: 12px; color: var(--steel); }
.num { text-align: right; }
/* Zahlen stehen überall bündig untereinander. */
.tab td, .tab th, .num, .daten dd, .kennzahl, .zahl { font-variant-numeric: tabular-nums; }
.leer { color: var(--steel); padding: 26px 0; }
.sym { vertical-align: -3px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Raster */
.app { display: flex; min-height: 100vh; }
.seitenleiste { width: 240px; flex: 0 0 240px; background: var(--ink); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.kopfzeile { height: 64px; flex: 0 0 64px; border-bottom: 1.5px solid var(--ink); padding: 0 32px; display: flex; align-items: center; gap: 16px; }
.kopfzeile .pfad { color: var(--steel); font-size: 13px; }
.kopfzeile .pfad b { color: var(--ink); font-weight: 400; }
.kopfzeile .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.seite { padding: 26px 32px 48px; overflow-x: auto; }
.seitenkopf { display: flex; align-items: flex-start; gap: 24px; }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.abschnitt { margin-top: 36px; }
.abschnitt.erster { margin-top: 0; }
.abschnitt > .abschnittkopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.abschnitt > .abschnittkopf .hilfe { margin-left: 2px; }
.abschnitt > .abschnittkopf .rechts { margin-left: auto; }
.kennzahlen-kompakt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.kennzahlen-kompakt > div { min-height: 102px; padding: 18px 22px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.kennzahlen-kompakt > div:last-child { border-right: 0; align-items: stretch; }
.kennzahlen-kompakt span, .kennzahlen-kompakt small { color: var(--steel); font-size: 12px; font-weight: 400; }
.kennzahlen-kompakt b { font-size: 15px; }
.excel-legende { display: flex; gap: 28px; margin: 22px 0; color: var(--steel); font-size: 12px; }
.excel-rahmen { border: 1.5px solid var(--ink); }
.excel-formel { min-height: 42px; display: grid; grid-template-columns: 110px 46px 1fr auto; align-items: center; border-bottom: 1.5px solid var(--ink); }
.excel-formel > * { min-height: 42px; padding: 11px; border-right: 1px solid var(--rule); }
.excel-formel > em { border-right: 0; color: var(--steel); font-size: 12px; font-style: normal; }
.excel-scroll { overflow-x: auto; }
.excel-tabelle { min-width: 900px; width: 100%; border-collapse: collapse; }
.excel-tabelle th, .excel-tabelle td { padding: 9px 10px; border: 1px solid var(--rule); }
.excel-tabelle thead th { background: var(--wash); color: var(--graph); font-size: 12px; font-weight: 700; }
.excel-tabelle tfoot th, .excel-tabelle tfoot td { background: var(--wash); font-weight: 700; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 48px; }
@media (max-width: 1180px) { .zweispaltig { grid-template-columns: 1fr; } }

/* Seitenleiste */
.logo { padding: 22px; border-bottom: 1px solid #333; }
.logo img { display: block; width: 100%; height: auto; }
.umschalter { display: grid; grid-template-columns: 1fr; margin: 14px 12px 4px; border: 1px solid #fff; border-radius: 3px; overflow: hidden; }
.umschalter a, .umschalter span { display: flex; align-items: center; min-height: 34px; padding: 0 11px; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 700; }
.umschalter > * + * { border-top: 1px solid #333; }
.abrechnung-komponenten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.abrechnung-komponenten a { min-height: 156px; border: 1.5px solid var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 9px; color: var(--ink); text-decoration: none; }
.abrechnung-komponenten a:hover { background: var(--wash); }
.abrechnung-komponenten b { font-size: 16px; }.abrechnung-komponenten span { color: var(--steel); font-size: 12.5px; }.abrechnung-komponenten small { margin-top: auto; font-weight: 700; }
.umschalter a.aktiv { background: #fff; color: var(--ink); }
.umschalter .aus { color: #8A8A8A; cursor: default; }
.benutzer { cursor: pointer; }
.benutzer button { cursor: pointer; }
.profil-form { max-width: 560px; border-top: 1.5px solid var(--ink); padding-top: 22px; }
.profil-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.profil-infos > div { padding: 13px 0; }.profil-infos > div + div { border-left: 1px solid var(--rule); padding-left: 18px; }
.profil-infos span { display: block; color: var(--steel); font-size: 12px; margin-bottom: 3px; }.profil-infos b { font-size: 13px; }
.nav { flex: 1; overflow: auto; padding: 6px 12px 12px; }
.nav-gruppe { font-size: 11.5px; color: #8A8A8A; margin: 14px 8px 5px; }
.nav a { display: flex; align-items: center; gap: 11px; min-height: 33px; padding: 7px 8px; font-size: 13.5px; color: #fff; text-decoration: none; border-radius: 3px; white-space: normal; line-height: 1.18; }
.nav a .sym { width: 17px; height: 17px; }
.nav a > span:not(.schloss) { min-width: 0; }
.nav a.aktiv { background: #fff; color: var(--ink); font-weight: 700; }
.nav a.gesperrt { color: #8A8A8A; }
.nav a .zaehler { margin-left: auto; color: #8A8A8A; font-size: 12px; }
.nav a .schloss { margin-left: auto; width: 13px; height: 13px; }
.benutzer { border-top: 1px solid #333; padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.benutzer .kuerzel { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 34px; }
.benutzer .wer { min-width: 0; flex: 1; }
.benutzer .wer b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.benutzer .wer span { display: block; font-size: 12px; color: var(--mist); }
.benutzer form { margin: 0; }
.benutzer button { background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; display: flex; }

/* Kennzahlenband */
.band { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 22px 0 28px; }
.band > div { padding: 14px 18px 15px; border-left: 1px solid var(--rule); min-width: 0; }
.band > div:first-child { padding-left: 0; border-left: 0; }
/* Ohne schmale Schrift brauchen die Kennzahlen etwas weniger Größe, sonst brechen sie um. */
.band .zahl { font-size: 31px; letter-spacing: -0.6px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.band .label { font-size: 12.5px; color: var(--steel); margin-top: 7px; }
.band .zusatz { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 6px; }

/* Tabellen */
table.tab { border-collapse: collapse; width: 100%; }
.tab th { font-size: 12px; color: var(--steel); font-weight: 400; text-align: left; padding: 0 12px 9px; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.tab td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tab th:first-child, .tab td:first-child { padding-left: 0; }
.tab th.num { text-align: right; }
.tab tr.gewaehlt td, .tab tr:hover td { background: var(--wash); }
.tab .id { font-weight: 700; white-space: nowrap; }
.tab .zweite { display: block; color: var(--steel); font-size: 12px; margin-top: 2px; }
.tab .platzhalter td span { display: block; height: 11px; background: var(--wash); border-radius: 2px; }
.tab tfoot td { border-bottom: 0; color: var(--steel); font-size: 12px; padding-top: 12px; }
.tab td.aktion { white-space: nowrap; text-align: right; }
.tab td form { display: inline; margin: 0; }

/* Excel-Ansicht: bewusst tabellenartig, die Berechnungen bleiben sichtbar geschützt. */
.excel-formel { min-height: 45px; display: flex; align-items: center; gap: 0; border: 1.5px solid var(--ink); margin-top: 22px; }
.excel-zelle { width: 78px; align-self: stretch; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--rule); font-weight: 700; font-variant-numeric: tabular-nums; }
.excel-fx { width: 48px; align-self: stretch; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--rule); font-size: 17px; font-style: italic; }
.excel-formeltext { color: var(--steel); padding: 0 12px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.excel-aenderungen { padding: 0 14px; white-space: nowrap; font-weight: 700; }
.excel-formel .knopf { margin-right: 8px; }
.excel-legende { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin: 11px 0; font-size: 12px; }
.excel-legende .sym { vertical-align: -2px; margin-right: 5px; }
.excel-rahmen { border: 1px solid var(--rule); overflow: auto; max-height: calc(100vh - 260px); }
table.excel-tabelle { border-collapse: collapse; min-width: 1250px; width: 100%; font-size: 12.5px; }
.excel-tabelle th, .excel-tabelle td { border: 1px solid var(--rule); padding: 6px 8px; height: 31px; white-space: nowrap; vertical-align: middle; }
.excel-tabelle th { background: var(--wash); text-align: center; font-size: 11px; line-height: 1.1; font-weight: 400; position: sticky; top: 0; z-index: 2; }
.excel-tabelle th b { display: block; margin-top: 4px; text-align: left; font-size: 12px; font-weight: 700; }
.excel-tabelle td { max-width: 270px; overflow: hidden; text-overflow: ellipsis; }
.excel-tabelle td.excel-zeile, .excel-tabelle th.excel-zeile { min-width: 42px; width: 42px; background: var(--wash); color: var(--steel); text-align: right; font-variant-numeric: tabular-nums; }
.excel-tabelle th.geschuetzt, .excel-tabelle td.geschuetzt { background: var(--wash); }
.excel-tabelle td.excel-bearbeitbar { padding: 0; background: #fff; box-shadow: inset 0 -2px 0 var(--ink); }
.excel-eingabe { width: 100%; height: 30px; min-width: 90px; border: 0; border-radius: 0; padding: 0 8px; background: var(--paper); font: inherit; color: inherit; cursor: text; }
.excel-eingabe::placeholder { color: var(--steel); font-size: 11px; }
.excel-eingabe:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.excel-eingabe.num { text-align: right; min-width: 112px; font-variant-numeric: tabular-nums; }
.excel-fuss { display: flex; align-items: center; gap: 0; border: 1px solid var(--rule); border-top: 0; min-width: 700px; }
.excel-fuss b, .excel-fuss span, .excel-fuss a { padding: 8px 13px; border-right: 1px solid var(--rule); font-size: 12px; white-space: nowrap; }
.excel-fuss a { color: var(--ink); text-decoration: none; cursor: pointer; }
.excel-fuss a:hover { background: var(--wash); }
.excel-fuss b { border-top: 3px solid var(--ink); }
.excel-fuss span:last-child { margin-left: auto; border-right: 0; color: var(--steel); }
@media (max-width: 900px) { .excel-formel { flex-wrap: wrap; padding: 7px; gap: 7px; } .excel-zelle, .excel-fx { align-self: auto; height: 30px; border: 1px solid var(--rule); } .excel-formeltext { flex-basis: calc(100% - 146px); } .excel-aenderungen { margin-left: auto; padding: 0; } }

/* Excel & Backup */
.backup-stand { margin-left: auto; border: 1.5px solid var(--ink); padding: 10px 13px; display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.excel-backup-raster { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(480px, 1.08fr); gap: 42px; margin-top: 24px; align-items: start; }
.excel-karte { border: 1.5px solid var(--ink); padding: 22px; margin-bottom: 32px; }
.excel-karte-kopf { display: flex; gap: 14px; align-items: center; }
.excel-karte-kopf .unterzeile { margin-top: 3px; }
.excel-dateisymbol { width: 46px; height: 46px; border-radius: 3px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.excel-optionen, .excel-blaetter { border: 0; padding: 0; margin: 22px 0 0; }
.excel-optionen legend, .excel-blaetter legend { color: var(--steel); font-size: 12px; padding: 0; margin-bottom: 7px; }
.excel-optionen label { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.excel-optionen input { accent-color: #000; width: 18px; height: 18px; vertical-align: -4px; margin: 0 9px 0 0; }
.excel-optionen small { display: block; color: var(--steel); margin: 3px 0 0 28px; font-size: 12px; }
.export-zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0 28px; }
.export-zeitraum label { color: var(--steel); font-size: 12px; border: 0; padding: 0; }
.export-zeitraum .feld { margin-top: 5px; }
.excel-blaetter { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; }
.excel-blaetter legend { grid-column: 1 / -1; }
.excel-blaetter label { cursor: pointer; }
.excel-blaetter input { width: 16px; height: 16px; vertical-align: -3px; margin: 0 8px 0 0; accent-color: #000; }
.layout-umschalter { display: grid; grid-template-columns: 1.4fr 1fr .6fr; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.layout-umschalter button { min-height: 35px; border: 0; border-right: 1px solid var(--ink); background: var(--paper); font: 700 12px var(--schrift); cursor: pointer; }
.layout-umschalter button:last-child { border-right: 0; }
.layout-umschalter button.aktiv { background: var(--ink); color: #fff; }
.export-fuss { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 16px; }
.export-fuss > span { flex: 1; font-size: 12.5px; overflow-wrap: anywhere; }
.import-karte { border-style: solid; }
.datei-ablage { border: 1.5px dashed var(--steel); min-height: 118px; margin: 20px 0 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.datei-ablage span { color: var(--steel); font-size: 12px; }
.automatik-karte { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 18px 0; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: start; }
.automatik-karte h2 { font-size: 17px; }
.automatik-karte .unterzeile { margin-top: 2px; }
.schalter { display: inline-block; margin-top: 4px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; }
.schalter span { display: block; width: 36px; height: 21px; background: var(--ink); border-radius: 20px; position: relative; }
.schalter span::after { content: ''; width: 15px; height: 15px; background: #fff; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: left .15s; }
.schalter input:not(:checked) + span { background: var(--mist); }
.schalter input:checked + span::after { left: 18px; }
.backup-einstellungen { grid-column: 2 / -1; border-top: 1px solid var(--rule); padding-top: 14px; display: grid; grid-template-columns: 1fr 130px auto; align-items: end; gap: 10px; }
.backup-einstellungen .beschriftung { grid-row: 1; margin: 0; }
.backup-einstellungen .feld { grid-row: 2; }
.backup-einstellungen p { grid-column: 1 / -1; margin: 0; }
.protokoll-vorschau .abschnittkopf, .export-verlauf .abschnittkopf { margin: 0 0 14px; }
.protokoll-vorschau .abschnittkopf .knopf { margin-left: auto; }
.excel-protokoll-zeile { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: start; }
.excel-protokoll-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.excel-protokoll-zeile .badge { margin-right: 5px; }
.excel-protokoll-zeile .hilfe { text-align: right; white-space: nowrap; }
.export-verlauf { margin-top: 30px; }
@media (max-width: 1240px) { .excel-backup-raster { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .abrechnung-komponenten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .backup-stand { margin: 16px 0 0; white-space: normal; } .seitenkopf:has(.backup-stand) { display: block; } .excel-blaetter, .kennzahlen-kompakt, .abrechnung-komponenten { grid-template-columns: 1fr; } .export-fuss { align-items: stretch; flex-direction: column; } .backup-einstellungen { grid-template-columns: 1fr; } .backup-einstellungen .beschriftung, .backup-einstellungen .feld, .backup-einstellungen button { grid-row: auto; } .excel-protokoll-zeile { grid-template-columns: 70px 1fr; } .excel-protokoll-zeile .hilfe { grid-column: 2; text-align: left; } }

/* Knöpfe, Felder, Chips, Badges */
.knopf { height: 36px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 3px; font: 700 13px var(--schrift); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.knopf.haupt { background: var(--ink); color: #fff; }
.knopf.klein { height: 30px; font-size: 12px; padding: 0 11px; }
.knopf.leise { border-color: var(--rule); font-weight: 400; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopfleiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.feld { height: 38px; border: 1px solid var(--ink); border-radius: 3px; padding: 0 11px; font: 400 13px var(--schrift); color: var(--ink); width: 100%; background: var(--paper); }
.feld.pflicht, .feld:required { border-width: 1.5px; }
.feld[readonly], .feld:disabled { background: var(--wash); border-color: var(--rule); }
.feld:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
textarea.feld { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
select.feld { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='black' stroke-width='1.7'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.beschriftung { display: block; font-size: 12px; color: var(--steel); margin-bottom: 5px; }
.formzeile { margin-bottom: 16px; }
.formzeile.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formfehler { border: 1.5px solid var(--ink); background: var(--wash); padding: 10px 12px; margin-top: 14px; font-size: 12.5px; }
.kaestchen { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; margin-right: 16px; cursor: pointer; }
.kaestchen input { width: 14px; height: 14px; margin: 0; accent-color: #000; }
.chip { height: 24px; border-radius: 12px; border: 1px solid var(--ink); padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--paper); color: var(--ink); text-decoration: none; }
.chip.aktiv { background: var(--ink); color: #fff; }
.chipleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--ink); display: inline-block; line-height: 1.2; white-space: nowrap; }
.badge.invers { background: var(--ink); color: #fff; }
.badge.leise { border-color: var(--steel); color: var(--steel); font-weight: 400; }

/* Status-Glyphen */
.g { width: 11px; height: 11px; border: 1.5px solid #000; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.g-ok { background: #000; }
.g-min { background: linear-gradient(0deg, #000 45%, transparent 45%); }
.g-zero { background: #fff; }
.g-neg { background: repeating-linear-gradient(45deg, #000 0 1.5px, #fff 1.5px 3.5px); }
.g-open { border-style: dashed; border-color: #6B6B6B; }
.g-price { background: radial-gradient(circle, #000 2px, transparent 2.3px); }

/* Hinweis (Flash) */
.hinweis { border: 1.5px solid var(--ink); padding: 12px 14px; margin-bottom: 20px; display: flex; gap: 12px; align-items: center; }
.hinweis.ok { background: var(--wash); }
.hinweis .link { font-size: 12px; font-variant-numeric: tabular-nums; word-break: break-all; flex: 1; }

/* Drawer, ohne JavaScript über :target erreichbar */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 450px; max-width: 100vw; background: var(--paper); border-left: 1.5px solid var(--ink); transform: translateX(100%); transition: transform .18s ease; z-index: 20; display: flex; flex-direction: column; }
.drawer.offen { transform: none; }
.drawer-kopf { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.drawer-kopf h2 { font-size: 22px; }
.drawer-kopf a, .drawer-kopf button { color: var(--ink); background: none; border: 0; cursor: pointer; display: flex; padding: 4px; }
.drawer-inhalt { padding: 20px; overflow: auto; flex: 1; }
.drawer-fuss { padding: 16px 20px; border-top: 1px solid var(--rule); display: flex; gap: 10px; justify-content: flex-end; }

/* Rechtematrix */
.matrix th.rolle { text-align: center; padding: 0 8px 9px; }
.matrix th.rolle small { display: block; color: var(--steel); font-weight: 400; }
.matrix td.rolle { text-align: center; }
.matrix td.rolle.extern, .matrix th.rolle.extern { background: var(--wash); }
.matrix .recht small { display: block; color: var(--steel); font-size: 11.5px; }
.matrix tr.gruppe td { font-size: 11.5px; color: var(--steel); text-transform: uppercase; letter-spacing: .4px; padding-top: 18px; border-bottom: 1px solid var(--ink); }
.matrix input[type=checkbox] { width: 13px; height: 13px; accent-color: #000; margin: 0; }
.matrix .fest { display: inline-block; width: 11px; height: 11px; background: #000; border: 1.5px solid #000; }

/* Filterleiste und Blätterung */
.filter { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 18px 0 16px; }
.filter .formzeile { margin: 0; min-width: 150px; }
.blaettern { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 12.5px; color: var(--steel); }
.blaettern a { color: var(--ink); }

/* Anmeldung, Einladung, Sperrseite, Fehler */
.mitte { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mitte .box { width: 400px; max-width: 100%; border: 1.5px solid var(--ink); padding: 32px; }
.mitte .box .logo-schwarz { width: 200px; display: block; margin-bottom: 26px; }
.mitte .box h1 { font-size: 30px; margin-bottom: 18px; }
.mitte .einladung-box { width: min(520px, 100%); padding: 38px; }
.mitte .einladung-box .logo-schwarz { margin-bottom: 32px; }
.mitte .einladung-titel { font-size: clamp(27px, 5.5vw, 38px); line-height: 1.08; letter-spacing: -0.8px; overflow-wrap: anywhere; margin-bottom: 14px; }
.mitte .einladung-box #einladung-text { border-top: 1px solid var(--rule); padding-top: 15px; margin: 0 0 24px; font-size: 14px; line-height: 1.5; }
.mitte .einladung-box .formzeile { margin-bottom: 18px; }
.mitte .einladung-box .knopf.breit { width: 100%; justify-content: center; min-height: 42px; }
@media (max-width: 520px) { .mitte { align-items: flex-start; padding: 16px; } .mitte .einladung-box { padding: 25px 22px; } .mitte .einladung-box .logo-schwarz { width: 185px; margin-bottom: 26px; } .mitte .einladung-titel { font-size: 29px; } }
.sperre { text-align: center; padding: 80px 24px; }
.sperre .sym { width: 64px; height: 64px; margin-bottom: 18px; }
.sperre h1 { margin-bottom: 12px; }
.sperre p { color: var(--steel); max-width: 480px; margin: 0 auto 10px; }
.sperre .baustein { font-weight: 700; color: var(--ink); }

/* Diagramm */
.diagramm { width: 100%; height: auto; display: block; }
.diagramm text { font-size: 11px; fill: var(--steel); font-variant-numeric: tabular-nums; }
.diagramm line { stroke: var(--rule); stroke-width: 1; }
.legende { display: flex; gap: 16px; font-size: 12.5px; align-items: center; }
.legende i { display: inline-block; width: 11px; height: 11px; border: 1.5px solid #000; margin-right: 6px; vertical-align: -1px; }
.legende i.voll { background: #000; }

/* Druck */
@media print {
  .seitenleiste, .kopfzeile, .knopf, .drawer, .filter, .hinweis { display: none !important; }
  .seite { padding: 0; }
  body { font-size: 9.5px; }
  @page { size: A4; margin: 12mm; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .seitenleiste { width: auto; flex: none; height: auto; position: static; }
  .nav { max-height: 40vh; }
  .kopfzeile, .seite { padding-left: 16px; padding-right: 16px; }
  .band { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .band > div:first-child { padding-left: 18px; }
}

/* Ergänzungen für die Einzelseiten-Oberfläche */
.knopf.breit { width: 100%; justify-content: center; }
.knopfleiste.mittig { justify-content: center; }
.abstand-oben { margin-top: 22px; }
.abstand { margin: 12px 0 16px; }
.abstand-klein { margin-top: 6px; }
.feld.klein { height: 30px; width: 200px; }
.leer.unterstrichen { border-bottom: 1px solid var(--rule); padding-top: 0; }
.nowrap { white-space: nowrap; }
.hinweis .link { height: 32px; }
.platzhalter span, .platzhalter td span { display: block; height: 11px; background: var(--wash); border-radius: 2px; margin: 6px 0; }
h1.platzhalter span { height: 30px; width: 220px; margin: 0; }
tr.platzhalter td span { width: 70%; }
tr.platzhalter td:first-child span { width: 90%; }
.drawer button[data-schliessen] { font: inherit; }
.seitenleiste a img { display: block; }

/* Reiter wie in Skizze 07 */
.reiter { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; margin: 22px 0 6px; }
.reiter a { padding: 0 16px; height: 36px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-decoration: none; border-right: 1.5px solid var(--ink); color: var(--ink); background: var(--paper); }
.reiter a:last-child { border-right: 0; }
.reiter a.aktiv { background: var(--ink); color: #fff; }
.reiter a .zaehler { font-weight: 400; opacity: .8; }
.reiter-legende { margin-bottom: 4px; flex-wrap: wrap; }
.reiter-legende .hilfe { margin-left: 8px; }
.tab select.feld.zeile { height: 30px; width: auto; min-width: 130px; padding-right: 28px; font-size: 12px; }
.tab td.aktion .knopf { margin-left: 6px; }
.badge.inhaber { border-width: 1.5px; }

/* Schritt 2: Stammdaten */
.drawer.breit { width: 560px; }
.feld.datei { padding-top: 7px; }
.tab th.preis, .tab td.preis { white-space: nowrap; }
.kette { list-style: none; display: flex; margin: 22px 0 28px; padding: 0; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.kette li { flex: 1; padding: 9px 12px; font-size: 12.5px; font-weight: 700; text-align: center; border-right: 1.5px solid var(--ink); color: var(--steel); }
.kette li:last-child { border-right: 0; }
.kette li.erreicht { color: var(--ink); }
.kette li.aktuell { background: var(--ink); color: #fff; }
.kette li.storniert { background: repeating-linear-gradient(45deg, #000 0 1.5px, #fff 1.5px 6px); color: var(--ink); }
dl.daten { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 0; }
dl.daten dt { font-size: 12px; color: var(--steel); }
dl.daten dd { margin: 0; }
.tab tr.klickbar { cursor: pointer; }
.tab tr.status-fehler td { background: var(--wash); }
.tab .g { margin-right: 6px; }
.zahl.klein { font-size: 28px; }
.tab input.feld.inline { height: 28px; padding: 0 8px; font-size: 12.5px; width: 92px; border-color: var(--rule); }
.tab input.feld.inline:focus { border-color: var(--ink); }
.tab input.feld.inline.num { text-align: right; width: 72px; }
.tab input.feld.inline.gespeichert { border-color: var(--ink); background: var(--wash); }
.entwicklungshinweis { border-top: 1px solid #333; padding: 9px 18px; font-size: 11.5px; color: #8A8A8A; display: flex; align-items: center; gap: 7px; }
.entwicklungshinweis::before { content: ""; width: 9px; height: 9px; border: 1.5px solid #8A8A8A; background: repeating-linear-gradient(45deg, #8A8A8A 0 1.5px, transparent 1.5px 3.5px); flex: 0 0 auto; }

/* Regiebericht: Detailansicht nach Skizze 06 */
.regie-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; }
.regie-haupt { padding-right: 32px; }
.regie-pruefung { border-left: 1.5px solid var(--ink); padding: 0 0 0 26px; margin-left: 6px; }
.regie-pruefung h2 { font-size: 20px; margin-bottom: 4px; }
.regie-pruefung .klein-h2 { font-size: 15px; display: flex; align-items: center; gap: 7px; }
@media (max-width: 1240px) { .regie-detail { grid-template-columns: 1fr; } .regie-haupt { padding-right: 0; } .regie-pruefung { border-left: 0; border-top: 1.5px solid var(--ink); padding: 22px 0 0; margin: 26px 0 0; } }
.regie-spalten { grid-template-columns: minmax(0, 1fr); gap: 0; }
.regie-spalten > div > .abschnitt { max-width: 1040px; }
.regie-spalten .tab { max-width: 1040px; }
.regie-spalten .band.schmal { max-width: 1040px; }
.regie-spalten .band.schmal .zahl { font-size: 24px; overflow-wrap: anywhere; white-space: normal; }
.regie-spalten .band.schmal .zusatz { overflow-wrap: anywhere; }
.regie-kopfzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.regie-kopfzeile .knopf { margin-left: auto; }
.regie-sperre { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--steel); }
.regie-beschreibung-label { margin: 15px 0 5px; font-size: 12px; color: var(--graph); }
.regie-text { min-height: 78px; margin: 0; padding: 10px 12px; border: 1px solid var(--steel); background: var(--paper); color: var(--ink); font-size: 13px; line-height: 1.55; font-style: normal; white-space: pre-wrap; }
.regie-text:empty::before { content: 'Noch keine Beschreibung erfasst.'; color: var(--steel); }
.band.schmal { margin: 0; }
.band.schmal .zahl { font-size: 22px; }
.band.schmal > div { padding: 10px 14px 11px; }
.pruefliste { list-style: none; margin: 18px 0 20px; padding: 0; }
.pruefliste li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.pruefliste li .sym { flex: 0 0 auto; margin-top: 1px; }
.pruefliste li b { display: block; font-size: 13px; }
.pruefliste li span { display: block; font-size: 12px; color: var(--steel); margin-top: 2px; }
.knopfleiste.senkrecht { flex-direction: column; align-items: stretch; }
.knopfleiste.senkrecht .knopf { justify-content: center; }
.verlauf { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; }
.verlauf li { display: flex; gap: 10px; padding: 4px 0; color: var(--steel); }
.verlauf li b { color: var(--ink); font-weight: 400; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.unterschrift-feld { border-top: 1px solid var(--rule); padding-top: 10px; }
.unterschrift-feld .bild { height: 54px; display: flex; align-items: flex-end; }
.unterschrift-feld .bild img { max-height: 54px; max-width: 100%; }
.unterschrift-feld b { display: block; font-size: 13px; margin-top: 6px; }
.unterschrift-feld .hilfe { font-size: 11.5px; }
.fotogitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fotogitter figure { margin: 0; }
.fotogitter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); display: block; }
.fotogitter figcaption { font-size: 11.5px; color: var(--steel); margin-top: 5px; }
/* Erfassung in Schritten */
.schrittleiste { display: flex; gap: 3px; padding: 0 20px 14px; }
.schrittleiste span { flex: 1; height: 3px; background: var(--rule); }
.schrittleiste span.erledigt { background: var(--ink); }
.schrittleiste span.aktuell { background: var(--graph); }
.zeitblock { border: 1.5px solid var(--ink); border-radius: 3px; padding: 14px; margin-bottom: 14px; }
.zeitblock.aus { border-color: var(--rule); }
.zeitblock .kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.zeitblock .kopf b { font-size: 14px; }
.zeitblock .kopf .ergebnis { margin-left: auto; font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 700; }
.zeitblock .felder { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.zeitblock .personen { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.zeitblock .personen .knopf { width: 38px; justify-content: center; padding: 0; font-size: 17px; }
.zeitblock .personen .wert { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 26px; text-align: center; }
.zeitblock .personen .hilfe { margin-left: auto; }
.summenband { background: var(--ink); color: #fff; padding: 13px 16px; display: flex; align-items: center; border-radius: 3px; }
.summenband .zahl { margin-left: auto; font-size: 26px; font-variant-numeric: tabular-nums; font-weight: 700; }
.zeile-liste { margin-bottom: 14px; }
.zeile-liste .zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.zeile-liste .zeile .wer { flex: 1; min-width: 0; }
.zeile-liste .zeile .wer b { display: block; font-size: 13px; }
.zeile-liste .zeile .wer span { display: block; font-size: 12px; color: var(--steel); }
.zeile-liste .zeile .feld { width: 90px; }
.kaestchenliste label { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); border-radius: 3px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.kaestchenliste label input { width: 18px; height: 18px; accent-color: #000; margin: 0; }
.kaestchenliste label.an { border-color: var(--ink); border-width: 1.5px; }
.unterschrift-flaeche { border: 1.5px solid var(--ink); border-radius: 3px; touch-action: none; display: block; width: 100%; height: 170px; background: var(--paper); }

/* Bestand und Buchungen */
.tab tr.hervor td { background: var(--wash); }
.artenwahl { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.artenwahl button { border: 0; border-right: 1px solid var(--rule); background: var(--paper); font: 700 12.5px var(--schrift); height: 38px; cursor: pointer; color: var(--ink); }
.artenwahl button:last-child { border-right: 0; }
.artenwahl button.aktiv { background: var(--ink); color: #fff; }
.tab td .storniert { text-decoration: line-through; color: var(--steel); }
.inventur-feld { width: 88px; }

/* Schritt 4: Kommissionierung, Lieferschein, Pauschalen */
.reiter button { padding: 0 16px; height: 36px; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 13px; border: 0; border-right: 1.5px solid var(--ink); color: var(--ink); background: var(--paper); cursor: pointer; }
.reiter button:last-child { border-right: 0; }
.reiter button.aktiv { background: var(--ink); color: #fff; }
ul.liste { list-style: none; margin: 0; padding: 0; }
ul.liste li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
ul.liste li:last-child { border-bottom: 0; }
ol.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
ol.schritte li { counter-increment: schritt; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--rule); position: relative; font-size: 13px; }
ol.schritte li:last-child { border-bottom: 0; }
ol.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 9px; width: 19px; height: 19px; border: 1.5px solid var(--mist); border-radius: 50%; text-align: center; line-height: 16px; font-size: 11px; font-weight: 700; color: var(--steel); }
ol.schritte li.erledigt::before { background: var(--ink); border-color: var(--ink); color: #fff; }
ol.schritte li b { display: block; }
ol.schritte li .hilfe { display: block; }
.tab tr.seitenende td { border-bottom: 1.5px solid var(--ink); }
.tab td.warnung { font-weight: 700; }
.feld.zeile { height: 28px; padding: 0 6px; font-size: 13px; }
.beleg-status { min-height: 24px; margin-bottom: 9px; }
.beleg-status:empty { display: none; }
.lieferschein-detail { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .82fr); gap: 30px; align-items: start; }
.lieferschein-inhalt { min-width: 0; }
.lieferschein-inhalt .daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 0; }
.lieferschein-inhalt .daten .datenfeld { min-width: 0; }
.lieferschein-inhalt .daten .datenfeld.breit { grid-column: 1 / -1; }
.lieferschein-inhalt .daten .beschriftung { margin: 0 0 5px; }
.lieferschein-inhalt .daten .knopfleiste { margin: 2px 0 0; }
.lieferschein-inhalt .schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.lieferschein-inhalt .schritte li { min-height: 108px; padding: 40px 10px 12px; border: 0; border-left: 1px solid var(--rule); }
.lieferschein-inhalt .schritte li:first-child { border-left: 0; }
.lieferschein-inhalt .schritte li::before { left: 10px; top: 12px; border: 0; width: auto; height: auto; color: var(--ink); font-size: 28px; line-height: 1; text-align: left; }
.lieferschein-inhalt .schritte li.erledigt::before { background: transparent; color: var(--ink); }
.lieferschein-vorschau-bereich { min-width: 0; }
.lieferschein-vorschau { width: 100%; max-width: 470px; aspect-ratio: 210 / 297; margin: 0 auto; padding: 6.2% 6.5%; background: var(--paper); border: 1px solid var(--rule); box-shadow: 8px 10px 0 var(--wash); overflow: hidden; font-size: clamp(5px, .62vw, 8px); line-height: 1.25; }
.lsv-kopf { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.lsv-logo { display: flex; align-items: flex-start; min-width: 0; }
.lsv-logo img { display: block; width: 100%; max-width: 150px; height: auto; }
.lsv-meta-kopf { text-align: right; font-size: .9em; }
.lsv-titel { margin: 13px 0 11px; font-size: 2.25em; font-weight: 700; letter-spacing: -.04em; }
.lsv-untertitel { margin: -7px 0 11px; color: var(--steel); font-size: .75em; }
.lsv-adresse { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-bottom: 13px; }
.lsv-adresse p { margin: 0; }
.lsv-adresse b { display: block; margin-bottom: 4px; }
.lsv-meta { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2px 6px; }
.lsv-meta b { font-weight: 700; }
.lsv-tabelle { width: 100%; border-collapse: collapse; font-size: .84em; }
.lsv-tabelle th { text-align: left; font-weight: 700; padding: 3px 2px; border-bottom: 1px solid var(--ink); background: var(--rule); }
.lsv-tabelle td { padding: 4px 2px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lsv-tabelle td b { display: block; font-weight: 400; }
.lsv-tabelle td span { display: block; margin-top: 1px; color: var(--steel); font-size: .82em; }
.lsv-tabelle .num { text-align: right; }
.lsv-summe { margin: 6px 0 0; font-size: .88em; }
.lsv-hinweis { margin-top: 9px; padding-top: 4px; border-top: 1px solid var(--rule); font-size: .82em; }
.lsv-empfang { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26%; font-size: .74em; }
.lsv-signatur { height: 24px; border-bottom: 1px solid var(--ink); display: flex; align-items: end; }
.lsv-signatur img { max-width: 100%; max-height: 22px; }
.lsv-fuss { margin-top: 4px; font-size: .78em; }
.lsv-empfangsvermerk { margin-top: 5px; color: var(--steel); font-size: .69em; }
@media (max-width: 1240px) { .lieferschein-detail { grid-template-columns: 1fr; } .lieferschein-vorschau { max-width: 500px; margin-left: 0; } }
@media (max-width: 720px) { .lieferschein-inhalt .daten { grid-template-columns: 1fr; } .lieferschein-inhalt .daten .datenfeld.breit { grid-column: auto; } .lieferschein-inhalt .schritte { grid-template-columns: 1fr 1fr; } .lieferschein-inhalt .schritte li:nth-child(odd) { border-left: 0; } }
ul.liste.aufmerksamkeit li { display: flex; align-items: center; gap: 8px; }
ul.liste.aufmerksamkeit li .rechts { margin-left: auto; white-space: nowrap; }
/* Knopf ohne Funktion, weil der Baustein noch fehlt: sichtbar, aber nicht klickbar. */
.knopf.aus { color: var(--mist); border-color: var(--rule); background: var(--paper); cursor: default; pointer-events: none; }
.knopf.aus .hilfe { color: var(--mist); }
.nav-aus { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: var(--mist); font-size: 13px; cursor: default; }
.nav-aus .kommt { margin-left: auto; font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
/* Breite Tabellen rollen innerhalb ihrer Spalte, statt in die Nachbarspalte zu laufen. */
.rollbar { overflow-x: auto; max-width: 100%; }
#kom-positionen .feld.zeile { width: 64px; }
#kom-positionen select.feld.zeile { min-width: 104px; }

/* Kommissionierschein anlegen: vollständige Arbeitsansicht nach Skizze 26. */
.drawer.kommission-anlegen { top: 64px; left: 240px; right: 0; bottom: 0; width: auto; max-width: none; transform: translateY(100%); }
.drawer.kommission-anlegen.offen { transform: none; }
.drawer.kommission-anlegen .drawer-kopf { min-height: 56px; padding: 10px 32px; border-bottom-color: var(--ink); }
.drawer.kommission-anlegen form { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.kom-anlegen-raster { display: grid; grid-template-columns: minmax(0, 1fr) 460px; height: 100%; min-height: 0; }
.kom-anlegen-haupt { min-width: 0; padding: 26px 32px 30px; overflow: auto; }
.kom-anlegen-titel { display: flex; justify-content: space-between; align-items: flex-start; }
.kom-anlegen-titel .badge { display: inline-block; margin-bottom: 11px; }
.kom-anlegen-haupt .reiter { display: inline-flex; margin: 22px 0 14px; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.kom-anlegen-haupt .reiter button { height: 37px; }
.kom-weg { margin-bottom: 16px; }
.kom-weg .filter { margin: 0; padding: 12px; border: 1px solid var(--rule); background: var(--wash); align-items: end; }
.kom-weg .filter .formzeile { margin: 0; min-width: min(360px, 50vw); }
.kom-weg textarea.feld { height: auto; padding-top: 9px; }
.kom-entwurf-tabelle { margin-top: 16px; }
.kom-entwurf-tabelle td { height: 54px; vertical-align: middle; }
.kom-entwurf-tabelle .feld.zeile { width: 72px; }
.kom-anlegen-hilfe { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink); }
.kom-anlegen-hilfe h2 { font-size: 14px; margin-bottom: 5px; }
.kom-anlegen-hilfe p { margin: 0; color: var(--steel); }
.kom-anlegen-seite { min-width: 0; overflow: auto; padding: 26px; border-left: 1.5px solid var(--ink); }
.kom-anlegen-seite > h2 { margin-bottom: 4px; }
.kom-anlegen-seite > .unterzeile { margin: 0 0 16px; }
.kom-anlegen-seite .formzeile { margin-bottom: 14px; }
.kom-anlegen-seite .formzeile.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kom-anlegen-seite .kaestchen { display: grid; grid-template-columns: 20px 1fr; column-gap: 9px; align-items: start; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 700; cursor: pointer; }
.kom-anlegen-seite .kaestchen input { grid-row: span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.kom-anlegen-seite .kaestchen span { grid-column: 2; margin-top: 3px; color: var(--steel); font-size: 12px; font-weight: 400; line-height: 1.25; }
.kom-anlegen-seite .schalterzeile { padding-top: 12px; border-bottom: 1px solid var(--rule); }
.kom-anlegen-zaehler { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 12px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.kom-anlegen-zaehler > div { min-width: 0; padding: 11px 10px 12px; border-left: 1px solid var(--rule); }
.kom-anlegen-zaehler > div:first-child { border-left: 0; padding-left: 0; }
.kom-anlegen-zaehler b { display: block; font-size: 29px; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kom-anlegen-zaehler span { display: block; margin-top: 6px; color: var(--steel); font-size: 12px; }
.kom-bestandsinfo { display: flex; gap: 8px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--graph); }
.kom-anlegen-seite #ks-zaehler { margin: 10px 0 0; }
.kom-anlegen-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kom-anlegen-aktionen .haupt { margin-left: auto; }
@media (max-width: 1100px) { .drawer.kommission-anlegen { left: 0; top: 0; } .kom-anlegen-raster { grid-template-columns: 1fr; overflow: auto; } .kom-anlegen-seite { border-left: 0; border-top: 1.5px solid var(--ink); overflow: visible; } .kom-anlegen-haupt { overflow: visible; } }
@media (max-width: 680px) { .kom-anlegen-haupt, .kom-anlegen-seite { padding: 20px; } .kom-anlegen-haupt .reiter { display: grid; width: 100%; } .kom-anlegen-haupt .reiter button { border-right: 0; border-bottom: 1px solid var(--ink); } .kom-anlegen-haupt .reiter button:last-child { border-bottom: 0; } .kom-anlegen-seite .formzeile.nebeneinander, .kom-anlegen-hilfe { grid-template-columns: 1fr; gap: 14px; } }

/* Montageauftrag: verkleinerte, echte Druckvorschau neben den editierbaren Auftragsdaten. */
.montageauftrag-vorschau { max-width: 420px; min-height: 590px; margin: 0 auto; padding: 8.5% 7%; border: 1px solid var(--steel); background: var(--paper); box-shadow: 8px 10px 0 var(--wash); font-size: 9px; line-height: 1.25; }
.montageauftrag-formular { max-width: 986px; border-top: 1.5px solid var(--ink); padding-top: 18px; }
.montageauftrag-formular .formzeile { margin-bottom: 14px; }
.montageauftrag-formular .feld { width: 100%; }
.montageauftrag-formular textarea.feld { min-height: 80px; resize: vertical; padding-top: 9px; }
.montageauftrag-formular .gelesen { color: var(--graph); background: var(--wash); border-color: var(--rule); }
.formzeile-zwei { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(105px, .7fr); gap: 12px; }
.montageauftrag-formular .knopfleiste { display: flex; align-items: center; gap: 13px; padding-top: 3px; }
.montageauftrag-vorschau .mav-fahrzeug { margin: 5px 0 0; font-size: 8px; }
#auftrag-team-block { margin-top: 34px; }
@media (max-width: 720px) { .montageauftrag-formular .formzeile.nebeneinander, .formzeile-zwei { grid-template-columns: 1fr; } .montageauftrag-formular .knopfleiste { align-items: flex-start; flex-direction: column; } }
.mav-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 14px; }.mav-kopf img { width: 55%; max-width: 175px; height: auto; }.mav-kopf b { padding-top: 3px; white-space: nowrap; }
.mav-tabelle { width: 100%; margin-top: 8px; border-collapse: collapse; }.mav-tabelle th, .mav-tabelle td { padding: 3px 4px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }.mav-tabelle th { font-size: .92em; background: var(--wash); }.mav-block { margin-top: 11px; }.mav-block > b { display: block; margin-bottom: 4px; }.mav-block p { min-height: 40px; margin: 0; padding: 5px; border: 1px solid var(--rule); white-space: pre-wrap; }