/* Aussehen der Prüfoberfläche (docs/OBERFLAECHE.md, "Aussehen"): ruhig, wie eine Warenwirtschaft.
   Tabellen statt Kacheln, 4 px Rundung, feine Linien, Schrift des Geräts, keine Schatten, keine Animationen.
   Dunkelblau nur für die Kopfzeile und EINEN Haupt-Knopf je Seite. */
:root {
  --blau: #1B3A5C;
  --hell: #E8EEF4;
  --text: #1A2530;
  --flaeche: #F4F5F7;
  --linie: #C9D1DA;
  --gruen: #1E6B3A;
  --gelb: #8A5A00;
  --rot: #A4262C;
  --grau: #56616D;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--flaeche); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--blau); }

/* Kopfzeile: links der Kunde, dann die fünf Bereiche, rechts Name und Abmelden. Der Bereich der aktuellen Seite hat
   einen weißen Balken unten (wie ein Reiter) – so sieht man immer, wo man ist. */
header { background: var(--blau); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding: 0 16px; }
header .kunde { font-weight: 600; font-size: 17px; padding: 12px 0; }
header nav { display: flex; flex-wrap: wrap; margin-right: auto; }
header nav a { color: #fff; text-decoration: none; padding: 14px 10px 11px; border-bottom: 3px solid transparent; }
header nav a:hover { text-decoration: underline; }
header nav a[aria-current="page"] { border-bottom-color: #fff; font-weight: 600; }
.abmelden { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.knopf-kopf { background: transparent; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 5px 10px; font: inherit; cursor: pointer; }

main { padding: 16px; max-width: 1600px; margin: 0 auto; }
h1 { font-size: 22px; margin: 4px 0 10px; overflow-wrap: anywhere; }
h2 { font-size: 16px; margin: 18px 0 6px; }
.klein { font-size: 13px; color: var(--grau); }
.regel { font-weight: 600; }

/* Tabellen */
.tabelle { overflow-x: auto; background: #fff; border: 1px solid var(--linie); border-radius: 4px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--linie); }
thead th { background: var(--hell); font-weight: 600; white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
tr.position td { border-bottom: 0; padding-bottom: 2px; }
tr.zur-position td { padding-top: 2px; }
table.schmal { width: auto; background: #fff; border: 1px solid var(--linie); }
/* Prüfliste und Suche (table.liste): Eingang, Beleg, Grund bzw. Status. Der Grund braucht Platz. Im Beleg führt der
   Geschäftspartner zur Detailseite; der Dateiname darunter kommt vom Absender, kann sehr lang sein und darf deshalb
   mitten im Wort umbrechen – sonst schiebt er den Grund aus dem Bild. */
.spalte-eingang { white-space: nowrap; width: 1%; }
.spalte-beleg { min-width: 200px; width: 30%; }
.spalte-beleg a { font-weight: 600; }
.spalte-beleg .datei { overflow-wrap: anywhere; }
.spalte-grund { min-width: 260px; }
/* Prüfregeln: Der Satz, was die Regel prüft, braucht Platz. Lange Spaltenköpfe dürfen deshalb umbrechen;
   die Wirkung ("Ausnahme – Beleg geht in die Prüfung") bleibt am breiten Bildschirm in einer Zeile. */
table.regeln thead th { white-space: normal; }
.spalte-regel { min-width: 220px; }
.spalte-wirkung { white-space: nowrap; min-width: 150px; }
/* Positionen: Spaltenköpfe dürfen umbrechen, damit die Tabelle auf üblichen Bildschirmen ohne Rollen passt */
table.positionen thead th { white-space: normal; }
td.rechts { text-align: right; }

/* Eingaben und Knöpfe */
/* Rand der Eingabefelder dunkler als die Tabellenlinien: Man muss sehen, wo man tippen kann. */
input, select, textarea { font: inherit; color: inherit; background: #fff; border: 1px solid var(--grau); border-radius: 4px; padding: 5px 7px; max-width: 100%; }
td input { width: 100%; min-width: 80px; }
td input[type="checkbox"] { width: auto; min-width: 0; }
/* Kopf-Felder (Zeile mit Beschriftung links): genug Platz für Firmennamen */
tbody th + td input { min-width: 240px; }
input.breite-zahl { min-width: 70px; max-width: 110px; }
input.breite-lang { width: 320px; }
input.feld-beschreibung, input.feld-bezeichnung { min-width: 140px; }
/* Kurze Angaben (Einheit, Charge) brauchen weniger Platz – so passt die Tabelle der Lieferschein-Positionen
   (sieben Felder) auch am Laptop (1366 Pixel) neben das Original. */
input.feld-einheit, input.feld-charge { min-width: 64px; }
td label { white-space: nowrap; }
.rand-fehler { border-color: var(--rot); border-width: 2px; }
.rand-unsicher { border-color: var(--gelb); border-width: 2px; }
.knopf { font: inherit; color: var(--text); background: #fff; border: 1px solid var(--grau); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.knopf.haupt { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
.knopf:disabled { background: var(--flaeche); border-color: var(--linie); color: var(--grau); cursor: not-allowed; }
/* Sprungmarke vor einem Abschnitt: Beim Sprung dorthin bleibt die Überschrift sichtbar */
a[id]:not([href]) { display: block; scroll-margin-top: 8px; }
/* Verweis, der wie ein Knopf aussieht (führt auf eine andere Seite, z. B. "Neue Regel anlegen") */
a.knopf { display: inline-block; text-decoration: none; text-align: center; }
.unsichtbar { position: absolute; left: -9999px; }
label { display: inline-flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--grau); }
td label { flex-direction: row; align-items: center; margin-top: 4px; }
/* Beschriftung einer Zeile (Firma, Kundennummer ...): sieht aus wie der übrige Zeilenkopf */
label.zeilenname { display: inline; font: inherit; color: inherit; }
form.schmal, form.regelformular { display: flex; flex-direction: column; gap: 12px; max-width: 360px; background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 16px; }
form.schmal .knopf { align-self: flex-start; }
/* Ein Formular direkt unter einer Tabelle oder einem Hinweis (Seite „Lieferscheine per E-Mail“) braucht etwas Luft */
.tabelle + form.schmal, .hinweis + form.schmal { margin-top: 16px; }
/* Formular einer Prüfregel: breiter; die Auswahl (Ausnahme / Hinweis, Ja / Nein) steht untereinander */
form.regelformular { max-width: 720px; margin: 10px 0; }
form.regelformular fieldset { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
form.regelformular p, form.regelformular .aktionen { margin: 0; }
label.wahl { flex-direction: row; align-items: center; gap: 6px; font-size: 15px; color: var(--text); }
input[type="radio"], label.wahl input[type="checkbox"] { width: auto; margin: 0; }
input.breite-voll { width: 100%; }
/* Eingabefeld mit Einheit dahinter, z. B. "2000 €" */
.mit-einheit { display: flex; align-items: center; gap: 6px; }
.suchfelder, .aktionen, fieldset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.aktionen { margin: 14px 0; align-items: center; }
fieldset { border: 1px solid var(--linie); border-radius: 4px; background: #fff; margin: 10px 0; padding: 8px 12px 12px; }
legend { font-weight: 600; padding: 0 4px; }
.blaettern { display: flex; align-items: center; gap: 12px; }

/* Reiter über einer Liste (Alle · Aufträge · Lieferscheine): der gewählte hell hinterlegt, die Zahl dahinter grau */
.reiter { display: flex; flex-wrap: wrap; margin: 6px 0 14px; }
.reiter a, .reiter strong { padding: 6px 14px; border: 1px solid var(--linie); background: #fff; margin-right: -1px; text-decoration: none; }
.reiter > :first-child { border-radius: 4px 0 0 4px; }
.reiter > :last-child { border-radius: 0 4px 4px 0; margin-right: 0; }
.reiter strong { background: var(--hell); border-color: var(--blau); position: relative; }
.reiter a:hover { text-decoration: underline; }
.anzahl { color: var(--grau); font-weight: 400; }

/* Lange Erklärung über einer Liste (Prüfregeln): zugeklappt, damit die Liste gleich zu sehen ist */
details.erklaerung { max-width: 900px; margin: 6px 0 14px; padding: 6px 12px; background: #fff; border: 1px solid var(--linie); border-radius: 4px; }
details.erklaerung summary { color: var(--blau); cursor: pointer; }
details.erklaerung[open] summary { margin-bottom: 6px; }

/* Einstellungen: je Bereich eine Zeile – links Verweis und wofür, rechts der Stand */
.tabelle:has(> table.einstellungen) { max-width: 900px; }
table.einstellungen th[scope="row"] { font-weight: 400; width: 55%; }
table.einstellungen th[scope="row"] a { font-weight: 600; font-size: 16px; }

/* Meldungen */
.meldung, .hinweis, .warnung { border: 1px solid var(--linie); border-left-width: 4px; border-radius: 4px; background: #fff; padding: 8px 12px; margin: 10px 0; }
.meldung { border-left-color: var(--gruen); }
.hinweis { border-left-color: var(--grau); }
.warnung { border-left-color: var(--rot); }
.warnung-zeile { color: var(--rot); }
ul.meldungen { list-style: none; padding: 0; margin: 0 0 10px; }
ul.meldungen li { padding: 3px 0; }

/* Status: immer Farbe + Zeichen + Wort */
.status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.status svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.status-ok { color: var(--gruen); }
.status-unsicher { color: var(--gelb); }
.status-fehler { color: var(--rot); }
.status-uhr, .status-leer, .status-neu { color: var(--grau); }
.legende { font-size: 13px; color: var(--grau); margin-top: 18px; }

/* Detailseite: oben „Zur Prüfliste“, der Geschäftspartner als Überschrift, darunter Status, Art, Eingang und Datei */
.zurueck { margin: 0 0 2px; font-size: 14px; }
.belegkopf { margin-top: 0; overflow-wrap: anywhere; }
/* Ablehnen und Zurückstellen: zugeklappt unter den Haupt-Knöpfen; aufgeklappt über die ganze Breite */
.weitere-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.weitere-aktionen details { background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 6px 12px; }
.weitere-aktionen details[open] { flex: 1 1 100%; padding-bottom: 12px; }
.weitere-aktionen summary { color: var(--blau); cursor: pointer; }
.weitere-aktionen .felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }

/* Detailseite: Original links, Daten rechts */
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
/* Das Original bleibt beim Blättern in den Daten stehen (nur am breiten Bildschirm). */
.original { position: sticky; top: 8px; }
.original iframe { width: 100%; height: 78vh; border: 1px solid var(--linie); border-radius: 4px; background: #fff; }
.original img { max-width: 100%; border: 1px solid var(--linie); border-radius: 4px; }
.originaltext { background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 12px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; }
/* Original mit mehreren Seiten (hochgeladene Fotos): die Seiten untereinander in einem eigenen Kasten, der für sich
   rollt – so bleibt das Original neben den Daten stehen (wie ein PDF im Rahmen). */
.original .seiten { max-height: 78vh; overflow-y: auto; background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 8px; }
.original figure { margin: 0 0 14px; }
.original figure:last-child { margin-bottom: 0; }
.original figcaption { margin-bottom: 4px; }
.original .seiten img { display: block; }
.original .seiten iframe { height: 70vh; }

/* Hochladen: alles untereinander, große Flächen zum Tippen (Handy im Lager) */
form.hochladen { display: flex; flex-direction: column; gap: 12px; max-width: 720px; background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 16px; }
form.hochladen p, form.hochladen fieldset, form.hochladen .aktionen { margin: 0; }
form.hochladen fieldset { flex-direction: column; align-items: stretch; min-width: 0; }
form.hochladen label { font-size: 15px; color: var(--text); }
form.hochladen input[type="file"] { width: 100%; padding: 8px; }
form.hochladen summary { color: var(--blau); cursor: pointer; padding: 4px 0; }
.weitere-seiten { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
/* Statusseite eines Uploads: der Stand in einer eigenen, etwas größeren Zeile */
.stand { font-size: 17px; }

/* Fenster (Dialog) über einer Seite, ohne Programm im Browser – z. B. "Neue Regel anlegen" über der Liste der Prüfregeln.
   Die Seite dahinter ist unbedienbar (Attribut "inert" im HTML) und liegt unter einem abgedunkelten Schleier.
   Langer Inhalt rollt im Fenster; die Seite dahinter rollt nicht mit. Kein Schatten, keine Animation. */
body:has(.schleier) { overflow: hidden; }
.schleier { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px; background: rgba(26, 37, 48, 0.6); }
.fenster { display: flex; flex-direction: column; width: 100%; max-width: 940px; max-height: 100%; background: var(--flaeche); border: 1px solid var(--blau); border-radius: 4px; }
.fenster-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--hell); border-bottom: 1px solid var(--linie); border-radius: 4px 4px 0 0; }
.fenster-kopf h2 { margin: 0; font-size: 18px; }
.fenster-inhalt { padding: 4px 16px 16px; overflow-y: auto; }
/* Das Formular im Fenster: ohne eigenen Rahmen, über die ganze Breite; Tabellen und Erklärungen ebenso */
.fenster form.regelformular { max-width: none; margin: 10px 0 0; padding: 0; border: 0; background: transparent; }
/* Ein Rahmen (fieldset) wird von selbst nie schmaler als sein Inhalt. Im Fenster soll stattdessen eine zu breite
   Tabelle in ihrem eigenen Kasten rollen – das Fenster selbst rollt nie waagerecht. */
.fenster fieldset { min-width: 0; }
.fenster .tabelle, .fenster details { align-self: stretch; }
.fenster details { font-size: 13px; }
.fenster summary { color: var(--blau); cursor: pointer; }
.fenster details .tabelle { margin-top: 6px; }
/* Bedingungen einer eigenen Regel: je Bedingung zwei Zeilen – erst Feld, Vergleich, Wert und "Entfernen",
   darunter über die ganze Breite der Hinweis, was in das Feld "Wert" gehört */
tr.bedingung td { border-bottom: 0; padding-bottom: 2px; }
tr.zur-bedingung td { padding-top: 0; }
table.bedingungen select { min-width: 150px; }
table.bedingungen .spalte-feld { min-width: 160px; }
table.bedingungen .spalte-wert { min-width: 180px; }

/* Kleines Notebook, Tablet quer: Die Wirkung einer Prüfregel darf umbrechen, damit die Tabelle ohne Rollen passt */
@media (max-width: 1200px) {
  .spalte-wirkung { white-space: normal; }
}
/* Tablet: Original über den Daten */
@media (max-width: 900px) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .original { position: static; }
  .original iframe { height: 60vh; }
  /* Mehrere Seiten: kein eigener Rollkasten (auf dem Handy rollt die ganze Seite) */
  .original .seiten { max-height: none; overflow: visible; }
  /* Bedingungen einer eigenen Regel: Nummer und "Entfernen" in einer Zeile, darunter untereinander Feld, Vergleich,
     Wert und der Hinweis zum Wert (statt nebeneinander – dafür ist das Fenster jetzt zu schmal) */
  table.bedingungen thead { position: absolute; left: -9999px; }
  table.bedingungen tr { display: grid; grid-template-columns: 1fr auto; }
  table.bedingungen td { display: block; grid-column: 1 / -1; border-bottom: 0; padding: 3px 8px; }
  table.bedingungen tr.bedingung td:first-child { grid-column: 1; grid-row: 1; align-self: center; font-weight: 600; padding-top: 8px; }
  table.bedingungen tr.bedingung td:last-child { grid-column: 2; grid-row: 1; padding-top: 8px; }
  table.bedingungen tr.zur-bedingung td:first-child { display: none; }
  table.bedingungen tbody tr:not(.bedingung) { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
  table.bedingungen tbody tr:last-child { border-bottom: 0; }
  table.bedingungen .spalte-feld, table.bedingungen .spalte-wert { min-width: 0; }
  table.bedingungen select { width: 100%; }
}
/* Handy: Liste und Knöpfe gut bedienbar; breite Tabellen lassen sich waagerecht schieben */
@media (max-width: 600px) {
  main { padding: 10px; }
  header { gap: 0 12px; }
  header nav a { padding: 10px 7px 8px; }
  table.einstellungen th[scope="row"] { width: auto; }
  .aktionen .knopf, fieldset .knopf, fieldset label, fieldset input, .weitere-aktionen .felder > * { width: 100%; }
  .knopf { padding: 10px 12px; }
  input.breite-lang { width: 100%; }
  th, td { padding: 6px; }
  /* Kopf-Felder schmaler, damit die Spalte "Status" ohne Rollen zu sehen ist */
  tbody th + td input { min-width: 140px; }
  /* Prüfliste und Suche: je Beleg ein Block – oben Beleg und Eingang, darunter Grund bzw. Status (kein Rollen zur Seite) */
  table.liste thead { position: absolute; left: -9999px; }
  table.liste tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--linie); padding: 4px 0; }
  table.liste tbody tr:last-child { border-bottom: 0; }
  table.liste td { display: block; border-bottom: 0; padding: 3px 8px; min-width: 0; width: auto; }
  table.liste td.spalte-beleg { grid-column: 1; grid-row: 1; }
  table.liste td.spalte-eingang { grid-column: 2; grid-row: 1; text-align: right; }
  table.liste td:not(.spalte-beleg):not(.spalte-eingang) { grid-column: 1 / -1; }
  /* Fenster: volle Breite und Höhe */
  .schleier { padding: 0; }
  .fenster { max-width: none; height: 100%; border: 0; border-radius: 0; }
  .fenster-kopf { border-radius: 0; }
  .fenster-inhalt { padding: 4px 10px 12px; }
}

/* Übergabe (Datei-Import): je Belegart ein Kasten mit Anzahl und Knopf. Keiner der beiden Knöpfe ist der Haupt-Knopf –
   beide Belegarten sind gleich wichtig. */
.uebergabe-art { max-width: 720px; margin: 12px 0; padding: 10px 16px 14px; background: #fff; border: 1px solid var(--linie); border-radius: 4px; }
.uebergabe-art h2 { margin-top: 4px; }
.uebergabe-art p, .uebergabe-art form { margin: 6px 0 0; }

/* Stammdaten: je Liste ein kleines Formular zum Hochladen (Datei wählen, Knopf daneben) */
.stammdaten th[scope="row"] { font-weight: 600; }
.stammdaten-hochladen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.stammdaten-hochladen input[type="file"] { max-width: 100%; }

/* Zweiter Faktor einrichten: nummerierte Schritte, der QR-Code immer schwarz auf weiß (sonst liest das Handy ihn
   schlecht), der Schlüssel zum Abtippen in Vierergruppen und gut lesbar */
.schritte { max-width: 640px; padding-left: 22px; }
.schritte > li { margin: 0 0 18px; }
.qr-rahmen { margin: 10px 0 6px; }
.qr { display: block; width: 220px; height: 220px; background: #fff; border: 1px solid var(--linie); }
code.schluessel { font-size: 15px; letter-spacing: 0.05em; word-spacing: 0.3em; white-space: normal; overflow-wrap: anywhere; }

/* Nutzer: Knöpfe je Zeile nebeneinander (umbrechen am Handy), der Einmalcode groß und gut vorzulesen */
table.nutzer th[scope="row"] { font-weight: 600; }
.nutzer-aktionen { min-width: 220px; }
.nutzer-aktionen .knopf { margin: 0 4px 4px 0; padding: 4px 10px; }
.einmalcode { max-width: 720px; }
.einmalcode h2 { margin-top: 4px; }
.einmalcode code.schluessel { font-size: 20px; }

/* Bestell-Link: Seite für Verwalter (Link, QR-Code, Knöpfe nebeneinander) */
.bestell-link { max-width: 720px; }
.bestell-link code.schluessel { font-size: 14px; }
.aktionen form { margin: 0; }
.hochladen textarea { width: 100%; min-height: 120px; resize: vertical; }