/* Aussehen der Prüfoberfläche (docs/OBERFLAECHE.md, "Aussehen"): ruhig, wie eine Warenwirtschaft – und seit 14.10.2026 überall im Aussehen
   von Lirodo wie die Website und das Kundenkonto (Angelos Wunsch „Farben und Schrift in unserem Design“): Fließtext in der Schrift des Geräts,
   Überschriften in einer klassischen Serifenschrift, die schon auf dem Gerät ist (Charter auf Mac und iPhone, Sitka oder Cambria unter
   Windows, sonst Georgia – geladen wird keine). Tabellen statt Kacheln, 4 px Rundung, feine Linien, keine Schatten, keine Verläufe, keine
   Animationen. Dunkelblau nur für die Kopfzeile und EINEN Haupt-Knopf je Seite.
   Abstände (seit 14.10.2026 einheitlich): 4, 8, 12, 16, 24, 32 Pixel – zwischen Abschnitten 24 bis 32, zwischen Text und seinen Knöpfen 8 bis
   12, innerhalb einer Zeile 4 bis 8. Die Seiten nutzen die ganze Breite des Bildschirms (bis 2000 Pixel). */
:root {
  --blau: #1B3A5C;      /* Kopfzeile und Haupt-Knopf (immer mit weißer Schrift) */
  --link: #1B3A5C;      /* Verweise, Rahmen des gewählten Reiters */
  --hell: #E8EEF4;
  --text: #1A2530;
  --flaeche: #F4F5F7;   /* Hintergrund der Seite */
  --karte: #fff;        /* Tabellen, Formulare, Kästen, Eingabefelder */
  --linie: #C9D1DA;
  --gruen: #1E6B3A;
  --gelb: #8A5A00;
  --rot: #A4262C;
  --grau: #56616D;
  --schleier: rgba(26, 37, 48, 0.6);
  --rund: 4px;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
/* Dunkle Darstellung (seit 09.10.2026, je Zugang unter „Einstellungen“): dieselbe ruhige Aufteilung, nur die Farben getauscht.
   „Wie am Gerät eingestellt“ folgt der Einstellung des Geräts. Die Werte stehen zweimal (CSS kann sie nicht teilen). Der QR-Code
   bleibt schwarz auf weiß (sonst liest das Handy ihn schlecht), ein PDF im Rahmen ebenso hell. */
:root[data-darstellung="dunkel"] {
  --blau: #24476E; --link: #9CC1EA; --hell: #26313D; --text: #E3E8EE; --flaeche: #14191F; --karte: #1C232B; --linie: #36414D;
  --gruen: #6CC48A; --gelb: #E0B04F; --rot: #F08A8A; --grau: #A0ACB8; --schleier: rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-darstellung="automatisch"] {
    --blau: #24476E; --link: #9CC1EA; --hell: #26313D; --text: #E3E8EE; --flaeche: #14191F; --karte: #1C232B; --linie: #36414D;
    --gruen: #6CC48A; --gelb: #E0B04F; --rot: #F08A8A; --grau: #A0ACB8; --schleier: rgba(0, 0, 0, 0.65);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--flaeche); color: var(--text); font: 15px/1.45 var(--sans); }
a { color: var(--link); text-underline-offset: .15em; }

/* Kopfzeile: links das Zeichen von Lirodo (seit 14.10.2026, vorher der Name des Kunden), dann die Bereiche, rechts Name und Unternehmen,
   „Mein Zugang“ und Abmelden. Der Bereich der aktuellen Seite hat einen weißen Balken unten (wie ein Reiter) – so sieht man immer, wo man
   ist. Ohne Anmeldung steht der Name des Unternehmens neben dem Zeichen. */
header { background: var(--blau); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding: 0 24px; }
.marke { display: inline-flex; align-items: center; gap: 10px; padding: 11px 0; color: #fff; text-decoration: none; font: 400 22px/1 var(--serif); }
.marke svg { width: 26px; height: 26px; flex: none; }
a.marke:hover span { text-decoration: underline; text-decoration-thickness: 1px; }
header .kunde { font-weight: 600; font-size: 15px; padding: 2px 0 2px 16px; border-left: 1px solid rgba(255, 255, 255, .5); margin-left: -12px; }
.abmelden .wer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.abmelden .firma { font-size: 12px; opacity: .85; }
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; }
/* margin-left: auto (seit 15.10.2026): Bricht die Kopfzeile um (Tablet), steht die Zeile mit Name und Abmelden trotzdem rechts */
.abmelden { display: flex; align-items: center; gap: 12px; padding: 8px 0; margin-left: auto; }
.knopf-kopf { background: transparent; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 5px 10px; font: inherit; cursor: pointer; }
/* „Mein Zugang“ bzw. „Kundenkonto“ neben dem Namen (seit 10.10.2026) */
.abmelden a { color: #fff; display: inline-block; padding: 8px 0; }
.abmelden a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }

/* Die ganze Breite des Bildschirms (seit 14.10.2026, vorher höchstens 1600 Pixel und in den Einstellungen 860 – Angelos Wunsch „keinen
   verschwendeten Platz mehr auf dem Display des Kunden“). Erst über 2000 Pixeln bleibt rechts und links Rand. */
main { padding: 24px; max-width: 2000px; margin: 0 auto; }
/* Kontakt, „Über Lirodo“, Impressum und Datenschutz unten auf jeder Seite nach der Anmeldung (nicht auf der öffentlichen Bestellseite) */
.fuss { max-width: 2000px; margin: 32px auto 0; padding: 16px 24px 32px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 13px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fuss nav a { display: inline-block; padding: 6px 0; }   /* Klickfläche am Handy (seit 15.10.2026) */
/* Überschriften in der Serifenschrift von Lirodo (wie lirodo.de und das Kundenkonto); kleine Überschriften (h3) in der Schrift des Geräts */
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: 28px; margin: 0 0 16px; overflow-wrap: anywhere; }
h2 { font-size: 20px; margin: 32px 0 12px; }
.klein { font-size: 13px; color: var(--grau); }
/* Hilfe direkt unter einem Feld (z. B. „Mit dem Auge … sehen Sie, was Sie getippt haben“) */
.feld-hilfe { margin: -4px 0 0; }
.regel { font-weight: 600; }

/* Tabellen */
.tabelle { overflow-x: auto; background: var(--karte); 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: var(--karte); 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; }
/* Prüfregeln in einem schmalen Platz (seit 14.10.2026, Angelos Hinweis: rechts abgeschnitten, waagerecht schieben erst ganz unten): Ist
   weniger als 960 Pixel Platz (Laptop mit Seitenleiste, Tablet, Handy), wird jede Regel ein Block – oben Nummer, Regel und „Ändern“, darunter
   Wirkung, Freigabe, Schwellenwert, Anzahl und Stand, jeweils mit ihrem Namen davor. So muss nichts zur Seite geschoben werden. */
.tabelle:has(> table.regeln) { container-type: inline-size; }
@container (max-width: 960px) {
  table.regeln thead { position: absolute; left: -9999px; }
  table.regeln, table.regeln tbody { display: block; }
  table.regeln tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
  table.regeln tbody tr:last-child { border-bottom: 0; }
  table.regeln td { display: block; border: 0; padding: 0; min-width: 0; }
  table.regeln td.spalte-nr { flex: 0 0 44px; }
  table.regeln td.spalte-regel { flex: 1 1 calc(100% - 44px - 140px - 44px); min-width: 0; font-weight: 600; }
  table.regeln td.spalte-regel .klein { font-weight: 400; }
  table.regeln td.spalte-knopf { flex: 0 0 auto; margin-left: auto; }
  table.regeln td[data-titel] { order: 1; font-size: 14px; }
  table.regeln td[data-titel]::before { content: attr(data-titel) ": "; color: var(--grau); }
  table.regeln td.spalte-wirkung, table.regeln td.spalte-freigeben { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: normal; min-width: 0; }
  table.regeln td.spalte-wirkung::before, table.regeln td.spalte-freigeben::before { content: attr(data-titel); }
  table.regeln td .geschaltet { flex-basis: 100%; }
}
/* 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: var(--karte); border: 1px solid var(--grau); border-radius: 4px; padding: 5px 7px; max-width: 100%; }
select { height: 36px; }   /* height, nicht min-height: WebKit (Safari, iPhone) zeichnet ein Auswahlfeld mit Rahmen sonst 21 px hoch (gemessen 18.10.2026) */
td input { width: 100%; min-width: 80px; }
td input[type="checkbox"] { width: 18px; height: 18px; 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; }
/* Passwortfeld mit Auge (auge.js): das Auge rechts im Feld, durchgestrichen, solange das Passwort zu sehen ist. Ohne Skript
   ist es unsichtbar. Edge zeigt sonst ein eigenes Auge daneben – das bleibt aus. */
.passwort-feld { position: relative; display: flex; }
.passwort-feld input { flex: 1; min-width: 0; padding-right: 38px; }
.auge { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 9px; color: var(--grau);
  background: none; border: 0; cursor: pointer; }
.auge[hidden] { display: none; }
.auge svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.auge[aria-pressed="false"] .auge-strich { display: none; }
.auge:hover { color: var(--text); }
.auge:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 4px; }
input::-ms-reveal { display: none; }
.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: var(--karte); 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; }
/* Seit 13.10.2026 (Angelos Wunsch „mehr Buttons, die der Kunde einfach anklicken kann“): kleine Knöpfe in Tabellen und Hinweisen,
   die Bereiche der Einstellungen als Knöpfe, unter jedem offenen Schritt von „So starten Sie“ seine Knöpfe */
.knopf.klein-knopf { padding: 3px 10px; font-size: 14px; white-space: nowrap; }
/* Artikel-Vorschläge unter einer Position (seit 27.10.2026, ENTSCHEIDUNGEN 127): die Knöpfe brechen um – die Bezeichnung ist lang */
.vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.vorschlaege .knopf { white-space: normal; text-align: left; }
table.einstellungen .bereich-knopf { font-weight: 600; margin-bottom: 4px; }
.aktionen.schritt-knoepfe { display: flex; margin: 8px 0 0; }
.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; gap: 8px; min-height: 24px; 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: var(--karte); 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; }
form.regelformular textarea { width: 100%; resize: vertical; }   /* „Gilt nicht für“ (132) */
label.wahl { flex-direction: row; align-items: flex-start; gap: 8px; min-height: 28px; font-size: 15px; color: var(--text); }
label.wahl > input { margin-top: 2px; }
/* min-width: 0 – sonst macht „tbody th + td input“ (240 px) in Tabellen wie „Ihr Zugang“ aus jedem Auswahlknopf einen breiten Block */
/* Kästchen und Auswahlknöpfe 18 px in der Farbe von Lirodo (seit 15.10.2026; vorher die 12 px des Browsers – am Handy kaum zu treffen) */
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; min-width: 0; margin: 0; flex: none; accent-color: var(--blau); }
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: 16px 0; align-items: center; }
fieldset { border: 1px solid var(--linie); border-radius: 4px; background: var(--karte); 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: 8px 0 16px; }
.reiter a, .reiter strong { padding: 6px 14px; border: 1px solid var(--linie); background: var(--karte); 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(--link); 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: var(--karte); border: 1px solid var(--linie); border-radius: 4px; }
details.erklaerung summary { color: var(--link); 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; }
/* Einstellungen, „Ihr Zugang“: links das Wort, rechts Stand und Formular in einer Zeile (bricht am Handy um) */
table.einstellungen.zugang th[scope="row"] { width: 170px; font-weight: 600; }
.zeile-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; margin: 6px 0 0; }
.zeile-formular label.wahl { padding: 4px 0; }
.zeile-knopf { margin: 6px 0 0; }
details.aufklappen { margin-top: 6px; }
/* Anmeldung: „oder“ zwischen Passwort und dem Weg über das Kundenkonto */
p.oder { color: var(--grau); margin: 14px 0 6px; max-width: 420px; display: flex; align-items: center; gap: 10px; }
p.oder::before, p.oder::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
details.aufklappen summary { color: var(--link); cursor: pointer; }
h3 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; }
.marke-klein { font-size: 12px; font-weight: 600; color: var(--grau); border: 1px solid var(--linie); border-radius: 4px; padding: 0 5px; }

/* Meldungen */
.meldung, .hinweis, .warnung { border: 1px solid var(--linie); border-left-width: 4px; border-radius: 4px; background: var(--karte); padding: 8px 12px; margin: 12px 0; }
.meldung { border-left-color: var(--gruen); }
.hinweis { border-left-color: var(--grau); }
.warnung { border-left-color: var(--rot); }
.warnung-zeile { color: var(--rot); }
/* Erste Schritte über der leeren Prüfliste (pruefliste.js) */
.erste-schritte h2 { margin-top: 0; }
.erste-schritte ol { margin: 8px 0; padding-left: 1.4em; }
.erste-schritte li + li { margin-top: 6px; }
/* Schritte mit Haken: das Zeichen ersetzt die Nummer; erledigte Schritte treten zurück */
.erste-schritte ol.schritte { list-style: none; padding-left: 0; }
.erste-schritte ol.schritte li.erledigt { color: var(--grau); }
/* „So starten Sie“: die Schritte nebeneinander, so viele wie Platz ist (seit 14.10.2026 – vorher eine schmale Spalte) */
.erste-schritte ol.schritte { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px 28px; margin: 12px 0 8px; }
.erste-schritte ol.schritte > li { margin: 0; }
.erste-schritte ol.schritte > li + li { margin-top: 0; }
.erste-schritte h2 .klein { font-weight: 400; }
ul.meldungen { list-style: none; padding: 0; margin: 0 0 10px; }
ul.meldungen li { padding: 3px 0; }

/* Status: immer Farbe + Zeichen + Wort */
/* Status: Zeichen und Wort im normalen Textfluss (seit 13.10.2026; vorher ein Flex-Kasten – dessen Grundlinie nahmen Safari und
   Chromium vom Zeichen, das Wort stand dann einige Pixel höher als der Text daneben). Das Zeichen ist 1em groß und mit vertical-align
   auf die Mitte der Schrift gesetzt; der Abstand zum Wort ist das Leerzeichen im HTML. */
.status { display: inline; font-weight: 600; white-space: nowrap; }
.status svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.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: 16px; }

/* Detailseite: oben „Zur Prüfliste“, der Geschäftspartner als Überschrift, darunter Status, Art, Eingang und Datei */
.zurueck { margin: 0 0 4px; font-size: 14px; }
/* Sprungmarken unter der Überschrift einer langen Seite (Einstellungen: Einrichtung · Mitarbeiter und Admins · Ihr Zugang) */
.sprung { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: -4px 0 16px; }
.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: 12px; margin: 0 0 16px; }
/* Der Innenabstand liegt auf summary (seit 15.10.2026): So klappt der ganze Kasten auf, nicht nur die Textzeile */
.weitere-aktionen details { background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 0; }
.weitere-aktionen details[open] { flex: 1 1 100%; }
.weitere-aktionen summary { color: var(--link); cursor: pointer; padding: 8px 12px; }
.weitere-aktionen .felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; padding: 0 12px 12px; }

/* 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: var(--karte); 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: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 8px; }
.original figure { margin: 0 0 16px; }
.original figure:last-child { margin-bottom: 0; }
.original figcaption { margin-bottom: 4px; }
.original .seiten img { display: block; }
.original .seiten iframe { height: 70vh; }
/* Text der E-Mail unter dem Original (seit 13.10.2026) */
details.mailtext { margin-top: 12px; }
details.mailtext summary { color: var(--link); cursor: pointer; }
details.mailtext[open] summary { margin-bottom: 6px; }
details.mailtext .originaltext { max-height: 40vh; overflow-y: auto; }

/* 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: var(--karte); 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(--link); 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: var(--schleier); }
.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(--link); 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; }
  /* … und die Bezeichnung etwas schmaler, lange Wörter getrennt (seit 13.10.2026: passt so auch bei 1024 Pixeln mit dem Knopf „Ändern“) */
  table.regeln .spalte-regel { min-width: 170px; }
  table.regeln thead th { hyphens: auto; -webkit-hyphens: auto; }
}
/* Kein Original (z. B. EG8, gelöscht): die Daten über die ganze Breite statt einer leeren linken Spalte (seit 15.10.2026) */
.zwei-spalten:has(> .original > p.hinweis:last-child) { grid-template-columns: minmax(0, 1fr); }
.zwei-spalten:has(> .original > p.hinweis:last-child) > .original { position: static; }
/* Tablet und kleiner Laptop (seit 15.10.2026 bis 1100 statt 900 px – bei 1024 war das Original 400 px schmal und die Positionen rollten):
   Original über den Daten, Rahmen und Fotos niedriger, damit die Daten bald folgen; mehrere Seiten rollen weiter in ihrem Kasten */
@media (max-width: 1100px) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .original { position: static; }
  .original iframe { height: 50vh; }
  .original img { max-height: 70vh; width: auto; max-width: 100%; }
  .original .seiten { max-height: 55vh; }
  .original .seiten img { max-height: none; }
}
@media (max-width: 900px) {
  /* 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: 12px; }
  /* Kopfzeile am Handy (seit 15.10.2026, vorher 185 px hoch): Zeile 1 Logo, „Mein Zugang“ und Abmelden; Zeile 2 die Bereiche in EINER
     Zeile, die seitlich rollt (der gewählte ist unterstrichen). Der Name steht unter „Mein Zugang“ – hier fällt er weg. */
  header { gap: 0 12px; padding: 0 12px; }
  .marke { font-size: 20px; padding: 8px 0; }
  .abmelden { order: 2; padding: 4px 0; gap: 8px; }
  .abmelden .wer { display: none; }
  header nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap; padding: 8px 8px 8px; }
  header .kunde { flex-basis: 100%; border-left: 0; margin: -4px 0 0; padding: 0 0 8px; font-size: 14px; }
  .fuss { padding: 12px 12px 24px; }
  table.einstellungen th[scope="row"] { width: auto; }
  /* „Ihr Zugang“: das Wort über dem Inhalt statt daneben */
  table.einstellungen.zugang tr > * { display: block; }
  table.einstellungen.zugang th[scope="row"] { width: auto; border-bottom: 0; padding-bottom: 0; }
  .aktionen .knopf, fieldset .knopf, fieldset label, fieldset input, .weitere-aktionen .felder > * { width: 100%; }
  .knopf { padding: 10px 12px; }
  form.schmal .knopf { align-self: stretch; }   /* der Haupt-Knopf so breit wie die Felder darüber */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { padding: 8px 10px; }
  select { height: 40px; }   /* so hoch wie die Eingabefelder am Handy */
  label.wahl { min-height: 36px; }
  summary { padding: 8px 0; }
  .link-knopf { padding: 8px 0; }
  .weitere-aktionen details { flex: 1 1 40%; }
  .weitere-aktionen summary { padding: 10px 12px; text-align: center; }
  .original iframe { height: 40vh; }
  .original-oeffnen .knopf { padding: 10px 12px; font-size: 15px; }
  .originaltext { white-space: pre; overflow-x: auto; font-size: 12px; }
  thead th { white-space: normal; }   /* Spaltenköpfe dürfen am Handy umbrechen – sonst rollt eine Tabelle wegen eines langen Kopfes */
  table.kompakt th.zahl { white-space: normal; }
  table.kompakt .status { white-space: normal; }   /* „ohne Änderung freigegeben“ darf umbrechen – sonst rollt die Tabelle (346 px in 307) */
  table.kompakt th, table.kompakt td { padding: 6px; }   /* Statistik-Tabellen in einem Kasten: 307 px Platz */
  /* Änderungsprotokoll des Belegs (Wann, Wer, Was, Einzelheiten): je Eintrag ein Block – Zeit und Name klein in einer Zeile, darunter
     die Handlung fett und die Einzelheiten */
  table.protokoll thead { position: absolute; left: -9999px; }
  table.protokoll tr { display: block; padding: 6px 8px; border-bottom: 1px solid var(--linie); }
  table.protokoll tr:last-child { border-bottom: 0; }
  table.protokoll td { display: block; border-bottom: 0; padding: 0; }
  table.protokoll td:nth-child(1), table.protokoll td:nth-child(2) { display: inline; font-size: 13px; color: var(--grau); }
  table.protokoll td:nth-child(2)::before { content: " · "; }
  table.protokoll td:nth-child(3) { font-weight: 600; margin-top: 2px; }
  table.protokoll td[colspan] { display: block; font-size: inherit; color: inherit; }
  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: var(--karte); border: 1px solid var(--linie); border-radius: 4px; }
.uebergabe-art h2 { margin-top: 4px; }
.uebergabe-art p, .uebergabe-art form { margin: 6px 0 0; }
/* „Jeden Morgen von selbst“ (seit 25.10.2026): Satz links, Schalter rechts, die Rückmeldung nach einem Klick darunter */
.uebergabe-art .automatik { margin: 8px 0 0; }
.uebergabe-art .automatik > span { flex: 1 1 200px; min-width: 0; }
.uebergabe-art .automatik > .geschaltet { flex-basis: 100%; }
/* lange Namen der Formate (seit 25.10.2026) sprengen sonst die Spalte: Feld und Beschriftung höchstens so breit wie der Kasten */
.uebergabe-art .format-wahl label { max-width: 100%; }
.uebergabe-art select { max-width: 100%; min-width: 0; }
/* Probebetrieb (seit 13.10.2026): Stand je Belegart auf der Seite „Übergabe“ und die Zeile „Übergabe“ auf der Detailseite – dort steht
   ein Knopf in einem eigenen kleinen Formular mitten im Satz */
.uebergabe-art .betrieb { margin: 4px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.uebergabe-art .betrieb form.schalter-form { margin: 0; }
.uebergabe-art .betrieb .aktionen { margin: 8px 0 0; }
.uebergabe-art .betrieb-zeile { margin: 6px 0 0; }
.uebergabe-zeile { margin: 1em 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 16px; }
.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; }
/* Zweiter Faktor am Handy: Knopf, der die App öffnet; QR-Code nur aufklappbar; Hilfe, wenn der Code nicht passt */
.app-knopf { margin: 10px 0 6px; }
.app-knopf .knopf { padding: 10px 20px; }
details.qr-anzeige { margin-top: 8px; }
details.qr-anzeige summary { color: var(--link); cursor: pointer; }
.code-hilfe { margin: -4px 0 12px; padding-left: 20px; max-width: 640px; }

/* 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; }
.seite-zweispaltig .bestell-link { max-width: none; }
.bestell-link code.schluessel { font-size: 14px; }
.aktionen form { margin: 0; }
.hochladen textarea { width: 100%; min-height: 120px; resize: vertical; }
/* Bestell-Link: Text für die Kunden zum Kopieren (seit 10.10.2026) */
label.kunden-text { display: flex; max-width: 44rem; margin: 10px 0; }
label.kunden-text textarea { width: 100%; resize: vertical; color: var(--text); }

/* Warenwirtschaft: zwei Kästen nebeneinander (am Handy untereinander), Häkchen untereinander, Beispiele für den IT-Partner,
   widerrufene Verbindungen grau */
.spalten { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.kasten { flex: 1 1 320px; max-width: 560px; min-width: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 10px 16px 14px; }
.kasten h3 { margin-top: 4px; }
.kasten form > label { display: block; margin: 8px 0; }
.kasten form > label input { display: block; width: 100%; max-width: 320px; margin-top: 4px; }
.kasten fieldset { flex-direction: column; align-items: flex-start; gap: 6px; }
label.haken { display: block; }
pre.beispiel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; padding: 8px 12px; font-size: 13px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.warnung-text { color: var(--rot); }
tr.vorbei td { color: var(--grau); }
/* Panel „Welche Warenwirtschaft?“ (seit 10.10.2026): je System eine Kachel (ein Knopf), das gewählte System hervorgehoben */
.kasten.ww-auswahl, .kasten.ww-system { max-width: none; margin: 16px 0; }
.kasten.ww-system h2 a { font-weight: 400; margin-left: 8px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.kachel { font: inherit; text-align: left; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: 4px;
  padding: 10px 12px; cursor: pointer; }
.kachel:hover, .kachel:focus-visible { border-color: var(--blau); }
.kachel.gewaehlt { border: 2px solid var(--blau); padding: 9px 11px; font-weight: 600; }
ol.schritte > li + li { margin-top: 12px; }
/* Schritte je Warenwirtschaft (seit 14.10.2026): eine nummerierte Liste in einem Schritt oder für sich */
ol.unterschritte { margin: 8px 0 12px; padding-left: 1.4em; max-width: 80ch; }
ol.unterschritte > li + li { margin-top: 6px; }
details.weitere-wege { margin-top: 18px; }
details.weitere-wege[open] summary { margin-bottom: 8px; }
/* Verbindungen (seit 18.10.2026, „sicher übergeben“): In der ersten Spalte stehen jetzt auch, ob die Warenwirtschaft die Dateien des Verbinders
   übernommen hat, und das Ergebnis von „Verbindung testen“; rechts die Knöpfe untereinander (testen, wie die Warenwirtschaft einliest,
   widerrufen) – je mindestens 36 px hoch. Am breiten Bildschirm eine Tabelle, in schmalem Platz (Handy, Tablet hochkant, Laptop mit
   Seitenleiste) je Verbindung ein Block: Name und Stand oben, „holt ab“ und „letzte Anfrage“ mit ihrem Wort davor, die Knöpfe darunter
   nebeneinander. Vorher (nur Tabelle) wäre die Spalte mit den Knöpfen am Handy aus dem Bild gerollt. */
.tabelle:has(> table.verbindungen) { container-type: inline-size; }
table.verbindungen td.spalte-knoepfe { width: 1%; min-width: 220px; }
table.verbindungen td.spalte-knoepfe > * { margin: 0; }
table.verbindungen td.spalte-knoepfe > * + * { margin-top: 8px; }
table.verbindungen .spalte-knoepfe .knopf, table.verbindungen .spalte-knoepfe .schalter { min-height: 36px; }
table.verbindungen .spalte-knoepfe a.knopf { display: inline-flex; align-items: center; justify-content: center; }
table.verbindungen .spalte-knoepfe .schalter-zeile { gap: 0 8px; }
table.verbindungen td:first-child .klein { overflow-wrap: anywhere; }
@container (min-width: 721px) {
  table.verbindungen td:first-child { min-width: 320px; }
  table.verbindungen td[data-titel="letzte Anfrage"] { white-space: nowrap; }
}
@container (max-width: 720px) {
  table.verbindungen thead { position: absolute; left: -9999px; }
  table.verbindungen, table.verbindungen tbody { display: block; }
  table.verbindungen tr { display: block; padding: 12px; border-bottom: 1px solid var(--linie); }
  table.verbindungen tr:last-child { border-bottom: 0; }
  table.verbindungen td { display: block; border: 0; padding: 0; min-width: 0; }
  table.verbindungen td + td { margin-top: 4px; }
  table.verbindungen td[data-titel]:not(:first-child)::before { content: attr(data-titel) ": "; color: var(--grau); }
  table.verbindungen td.spalte-knoepfe { width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
  table.verbindungen td.spalte-knoepfe > * + * { margin-top: 0; }
}
@media (max-width: 600px) {
  table.verbindungen .spalte-knoepfe .knopf { min-height: 40px; }
}
/* Ergebnis von „Verbindung testen“: ein heller Kasten unter dem Stand, je Schritt eine Zeile mit Zeichen (in Ordnung, Problem, nicht prüfbar).
   Pfade (C:\Slyke\Auftraege) und Meldungen der Warenwirtschaft dürfen mitten im Wort umbrechen – sonst schieben sie die Tabelle breit. */
.testergebnis { margin: 8px 0 0; padding: 8px 12px; max-width: 100ch; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; }
ul.testschritte { list-style: none; margin: 4px 0; padding: 0; }
ul.testschritte li { padding: 4px 0; overflow-wrap: anywhere; }
ul.testschritte li + li { border-top: 1px solid var(--linie); }
table.verbindungen td:first-child > div + div { margin-top: 4px; }
table.verbindungen td:first-child > .hinweis, table.verbindungen td:first-child > .testergebnis { margin-top: 8px; max-width: 100ch; }
/* Abgleich der Nummern (direkte Anbindung): je Liste eine Zeile, Nummern dürfen umbrechen */
ul.abgleich { list-style: none; margin: 8px 0 12px; padding: 0; max-width: 100ch; }
ul.abgleich li { padding: 4px 0; overflow-wrap: anywhere; }
ul.abgleich li + li { border-top: 1px solid var(--linie); }
.kasten.ww-system > .schalter-zeile { margin: 8px 0; flex-wrap: nowrap; }
.kasten.ww-system > .schalter-zeile > span { flex: 1 1 auto; min-width: 0; }   /* der Satz bleibt neben dem Schalter (am Handy brach er sonst darunter) */
.kasten.ww-system .schalter, .kasten.ww-system .zeile-formular .knopf { min-height: 36px; }
/* „Lieber gemeinsam?“ (seit 25.10.2026): das Angebot, die Anbindung mit uns einzurichten – ein ruhiger Kasten am Ende des Teils */
.mit-uns { background: var(--hell); border-radius: var(--rund); padding: 10px 14px; margin-top: 16px; }
.mit-uns p { margin: 4px 0; }
.kasten.ww-system > p { max-width: 100ch; }
/* Häkchen direkt in einem Formular eines Kastens (z. B. „Auch Wareneingänge … buchen“ der direkten Anbindung): das Kästchen links, der Satz
   daneben in normaler Schrift, die Erklärung klein dahinter. Ohne das galt die Regel für Eingabefelder („.kasten form > label input“: Block,
   volle Breite) auch für das Kästchen – es stand gestreckt in einer eigenen Zeile, der ganze Satz klein und grau darunter (Foto 18.10.2026). */
.kasten form > label.haken { position: relative; padding-left: 26px; font-size: 15px; color: var(--text); }
.kasten form > label.haken input { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; margin: 0; }

/* Einstellungen: aufgebaut wie die Systemeinstellungen von Apple (seit 13.10.2026, html.js), im Aussehen von Lirodo (seit 14.10.2026): links
   die Seitenleiste – weißer Kasten mit feiner Linie, einfarbige Symbole, der gewählte Bereich hell hinterlegt mit einem dunkelblauen Strich
   links –, rechts die Seite mit einer Kopfkarte; Zeilen in Gruppen mit eingerückten Trennlinien, Stand rechts in Grau, Pfeil „›“. Die Seite
   rechts nutzt die ganze Breite; die Gruppen der Übersicht stehen am breiten Bildschirm nebeneinander. Am Handy (unter 800 px) fehlt die
   Seitenleiste: Die Übersicht ist dann die Liste. */
body.mit-leiste main { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.einstellungen-inhalt { min-width: 0; }
.seitenleiste { position: sticky; top: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 8px;
  max-height: calc(100vh - 32px); overflow-y: auto; }
.seitenleiste ul { list-style: none; margin: 0; padding: 0; }
.seitenleiste ul + ul, .seitenleiste .profil + ul { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); }
.seitenleiste a { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 9px; border-left: 3px solid transparent; border-radius: var(--rund);
  color: var(--text); text-decoration: none; }
.seitenleiste a:hover { background: var(--flaeche); }
.seitenleiste a:hover > span:not(.symbol):not(.profil-kreis) { text-decoration: underline; }
.seitenleiste a[aria-current="page"] { background: var(--hell); border-left-color: var(--link); font-weight: 600; }
.seitenleiste .profil { padding: 8px 10px 10px 9px; }
.seitenleiste .profil > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.seitenleiste .profil strong { overflow-wrap: anywhere; }
.seitenleiste .nach-aussen { margin-left: auto; color: var(--grau); }
/* Symbole: Striche in der Farbe der Verweise, ohne farbige Kachel. Groß (Kopfkarte) auf einem hellen Feld. */
.symbol { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--link); }
.symbol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.symbol.gross { width: 56px; height: 56px; background: var(--hell); border-radius: var(--rund); }
.symbol.gross svg { width: 32px; height: 32px; stroke-width: 1.5; }
.profil-kreis { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.profil-kreis.gross { width: 64px; height: 64px; font-size: 24px; }
/* Kopfkarte: Symbol links, daneben Titel und ein Satz (seit 15.10.2026 flach und linksbündig – mittig war sie 190 px hoch, am Handy
   zusammen mit der Kopfzeile fast der halbe Bildschirm) */
.kopf-karte { display: flex; align-items: center; gap: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 16px 24px; margin: 0 0 24px; }
.kopf-karte-text { min-width: 0; }
.kopf-karte h1 { margin: 0 0 4px; }
.kopf-karte p { margin: 0; max-width: 100ch; color: var(--grau); }
/* Gruppen von Zeilen (Übersicht): Der Verweis liegt über der ganzen Zeile; ein Schalter im Stand liegt darüber und bleibt klickbar */
.gruppe { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); margin: 0 0 16px; overflow: hidden; }
.gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 16px; align-items: start; }
.gruppen .gruppe { margin: 0; }
.zeile { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 52px; color: var(--text); text-decoration: none; }
.zeile + .zeile::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; border-top: 1px solid var(--linie); }
.zeile-link { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 600; flex: none; }
.zeile-link::after { content: ""; position: absolute; inset: 0; }
.zeile:hover { background: var(--flaeche); }
.zeile:hover .zeile-name { text-decoration: underline; }
.zeile:has(.zeile-link:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; }
.zeile-link:focus-visible { outline: none; }
.zeile-wert { margin-left: auto; text-align: right; color: var(--grau); font-size: 14px; min-width: 0; }
.zeile-wert .klein { font-size: 13px; }
.zeile-wert form, .zeile-wert .geschaltet { position: relative; z-index: 1; }
.zeile-wert .geschaltet { justify-content: flex-end; }
.zeile .pfeil { color: var(--grau); font-size: 20px; line-height: 1; flex: none; }
.zeile-profil .zeile-name { display: flex; flex-direction: column; line-height: 1.25; }
.zeile-profil .pfeil { margin-left: auto; }
/* Tabellen der Einstellungen ohne doppelten Rahmen */
body.mit-leiste .tabelle:has(> table.einstellungen) { max-width: none; }
.nur-schmal { display: none; }
@media (max-width: 800px) {
  body.mit-leiste main { display: block; }
  .seitenleiste { display: none; }
  .nur-schmal { display: block; }
  .kopf-karte { gap: 12px; padding: 12px 16px; margin-bottom: 16px; }
  .kopf-karte .symbol.gross, .kopf-karte .profil-kreis.gross { width: 40px; height: 40px; font-size: 17px; }
  .kopf-karte .symbol.gross svg { width: 24px; height: 24px; }
  .kopf-karte h1 { font-size: 24px; }
}
/* Handy: der Stand unter dem Namen statt daneben (sonst bricht er in schmale Spalten um), lange Einleitungen linksbündig */
@media (max-width: 600px) {
  .zeile { flex-wrap: wrap; row-gap: 2px; }
  .zeile .pfeil { order: 2; margin-left: auto; }
  .zeile-wert { order: 3; flex-basis: 100%; margin-left: 34px; text-align: left; }
  .zeile-wert .geschaltet { justify-content: flex-start; }
}

/* Schalter (seit 10.10.2026, html.js schalter()): eine Einstellung mit einem Klick an oder aus. Eine Bahn mit Knopf wie an jedem
   Handy – rund, weil man sie so sofort erkennt (sonst 4 px) –, daneben das Wort („An“, „Aus“, „Aktiv“ …): Der Stand hängt nie nur an
   der Farbe. Ruhig wie der Rest: keine Animation, keine Schatten. */
form.schalter-form { display: inline-flex; margin: 0; vertical-align: middle; }
.schalter { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: var(--text); background: none; border: 0; padding: 3px 0; cursor: pointer; white-space: nowrap; }
.schalter .bahn { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--linie); border: 1px solid var(--grau); }
.schalter .bahn::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--karte); border: 1px solid var(--grau); box-sizing: border-box; }
.schalter[aria-checked="true"] .bahn { background: var(--gruen); border-color: var(--gruen); }
.schalter[aria-checked="true"] .bahn::after { left: 18px; border-color: var(--gruen); }
.schalter[aria-checked="true"] .wort { font-weight: 600; }
.schalter:hover .wort { text-decoration: underline; }
.schalter:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
/* Nach einem Klick springt die Seite an den Schalter (Sprungmarke) – mit etwas Luft darüber */
tr[id], h2[id], h3[id], section[id] { scroll-margin-top: 16px; }
/* Direkt nach dem Klick: was geschehen ist, mit „Rückgängig“ */
.geschaltet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 0 0; font-size: 13px; color: var(--gruen); }
.link-knopf { font: inherit; color: var(--link); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; }
/* Schalter in einer Tabellenzelle mit Text darunter oder daneben */
.schalter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
/* Drei Knöpfe nebeneinander, einer gewählt (Darstellung): ein Klick genügt */
.wahlknoepfe { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--grau); border-radius: 4px; overflow: hidden; }
.wahlknoepfe button { font: inherit; color: var(--text); background: var(--karte); border: 0; border-left: 1px solid var(--grau); padding: 6px 12px; cursor: pointer; }
.wahlknoepfe button:first-child { border-left: 0; }
.wahlknoepfe button[aria-pressed="true"] { background: var(--hell); font-weight: 600; }
.wahlknoepfe button[aria-pressed="true"]::before { content: "✓ "; }
.wahlknoepfe button:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; }

/* Statistik (seit 13.10.2026): die wichtigsten Zahlen über der Prüfliste und die Seite „Statistik“ (statistik.js). Zahlen nebeneinander,
   getrennt von feinen Linien (keine Kacheln); die Diagramme sind SVG – ihre Farben stehen hier, damit sie auch dunkel stimmen. */
.kennzahlen { margin: 12px 0 16px; padding: 12px 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; }
.kennzahlen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.kennzahlen-kopf h2 { margin: 0; }
.kennzahlen-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
dl.zahlen { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 6px 0; }
dl.zahlen > div { min-width: 8.5em; padding: 2px 20px 2px 0; margin-right: 20px; border-right: 1px solid var(--linie); }
dl.zahlen > div:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
dl.zahlen dt { font-size: 13px; color: var(--grau); }
dl.zahlen dd { margin: 2px 0 0; }
dl.zahlen dd strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
dl.zahlen-gross dd strong { font-size: 26px; }
dl.zahlen meter { display: block; width: 9em; height: 10px; margin-top: 4px; }
.nebenbei { font-size: 13px; color: var(--grau); }
dl.zahlen .nebenbei { display: block; }
.verlauf-klein { flex: 1 1 260px; max-width: 400px; margin: 0; }
.verlauf { margin: 4px 0 8px; }
.verlauf-klein figcaption, .verlauf figcaption { font-size: 13px; color: var(--grau); }
svg.balken { display: block; max-width: 100%; height: auto; }
svg.balken .b-auto { fill: var(--gruen); }
svg.balken .b-pruefung { fill: var(--gelb); }
svg.balken .b-flaeche { fill: transparent; }
svg.balken .b-achse { stroke: var(--linie); stroke-width: 1; }
svg.balken .b-text { fill: var(--grau); font-size: 9px; text-anchor: middle; }
.balken-legende { margin: 4px 0 0; }
.punkt { display: inline-block; width: .8em; height: .8em; margin-left: 10px; border-radius: 2px; vertical-align: -.05em; }
.punkt:first-child { margin-left: 0; }
.punkt-auto { background: var(--gruen); }
.punkt-pruefung { background: var(--gelb); }
.unterzeile { margin: 4px 0 0; color: var(--grau); }
ul.empfehlungen { margin: 0; padding-left: 1.2em; }
ul.empfehlungen li + li { margin-top: 16px; }
ul.empfehlungen li p { margin: 0; }
ul.empfehlungen .zeile-aktionen { display: flex; margin: 8px 0 0; }
.zeile-aktionen { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 4px; vertical-align: middle; }
td .zeile-aktionen { display: flex; margin: 8px 0 0; }
.tabelle:has(> table.kompakt) { max-width: 560px; }
.abschnitt .tabelle:has(> table.kompakt) { max-width: none; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
input.kurz { width: 7em; }
/* Zwei Kästen nebeneinander (seit 14.10.2026, z. B. „Übergabe“: Aufträge und Wareneingänge) – am schmalen Bildschirm untereinander */
.paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 336px), 1fr)); gap: 16px; align-items: stretch; margin: 16px 0; }
/* Kästen außerhalb eines Rasters: derselbe Abstand wie im Raster */
:is(main, .einstellungen-inhalt) > .abschnitt { margin: 16px 0; }
.paar > * { margin: 0; min-width: 0; max-width: none; }
/* Eine Seite in zwei Spalten (seit 14.10.2026, z. B. „Hochladen“: links das Formular, rechts was zuletzt hochgeladen wurde) */
/* Formular links höchstens 720 px, die Liste rechts bekommt den Rest (seit 15.10.2026; vorher 3:2 – am PC 1.100 px breite Dateifelder) */
.seite-zweispaltig { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
.seite-zweispaltig > * { min-width: 0; max-width: none; margin-top: 0; }
.seite-zweispaltig > section > h2:first-child { margin-top: 0; }
.seite-zweispaltig form.hochladen { max-width: none; }
.seite-zweispaltig > section > h2:first-child, .seite-zweispaltig > section > :first-child > h2:first-child { margin-top: 0; }
/* Formular links (so breit, wie es braucht), rechts Hinweise und Listen – z. B. „Postfach“ */
.seite-zweispaltig.formular-links { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.seite-zweispaltig.formular-links form.schmal { max-width: none; }
/* Zwei gleich breite Spalten – z. B. „Bestell-Link“ */
.seite-zweispaltig.halb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .seite-zweispaltig.formular-links, .seite-zweispaltig.halb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .seite-zweispaltig { grid-template-columns: minmax(0, 1fr); } }

/* Angaben als Liste: links das Wort, rechts der Wert (seit 14.10.2026 – „Abo und Rechnungen“, „Über Lirodo“) */
dl.daten { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 8px 16px; margin: 0 0 12px; }
dl.daten dt { color: var(--grau); }
dl.daten dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { dl.daten { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } dl.daten dd { margin-bottom: 8px; } }
/* Formular in einem Kasten: Felder untereinander, so breit wie der Kasten (Kündigen, Nachricht an Lirodo) */
form.formular-block { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 0; }
form.formular-block > label:not(.wahl) { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text); }
form.formular-block textarea, form.formular-block select { width: 100%; font-weight: 400; }
form.formular-block textarea { resize: vertical; min-height: 120px; }
form.formular-block .aktionen { margin: 2px 0 0; }
.abschnitt meter { display: block; width: min(420px, 100%); height: 14px; margin: 8px 0 4px; }
.abschnitt > .aktionen:last-child, .abschnitt > form:last-child { margin-bottom: 0; }

/* Raster aus Kästen (seit 14.10.2026, Statistik): drei Spalten am breiten Bildschirm, zwei am Laptop, eine am Handy. „doppelt“ geht über
   zwei Spalten, „ganz“ über alle. Kästen einer Reihe sind gleich hoch. */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.abschnitt { min-width: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 16px 20px 18px; }
.abschnitt > h2:first-child { margin-top: 0; }
.abschnitt > :last-child { margin-bottom: 0; }
.abschnitt .tabelle { border-color: var(--linie); }
/* Zahlen in einem Kasten: nebeneinander, so viele Spalten wie Platz ist (ohne Trennstriche, die beim Umbrechen falsch stünden) */
.abschnitt dl.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; margin: 0 0 8px; }
.abschnitt dl.zahlen > div { min-width: 0; padding: 0; margin: 0; border-right: 0; }
.raster > .doppelt { grid-column: span 2; }
.raster > .ganz { grid-column: 1 / -1; }
@media (max-width: 1280px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster > .doppelt { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .raster > .doppelt, .raster > .ganz { grid-column: auto; }
}
/* Kopf einer Seite: Überschrift links, Wahlen (Reiter) daneben – am schmalen Bildschirm darunter */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.seitenkopf h1 { margin: 0; }
.seitenkopf .wahlen { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.seitenkopf .reiter { margin: 0; }

/* „So starten Sie“: oben rechts „Einklappen“; eingeklappt eine Zeile mit dem nächsten Schritt und „Ausklappen“ */
.erste-schritte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.startliste-form { margin: 0; }
.startleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.startleiste h2 { margin: 0; font-size: 15px; }
.startleiste .aktionen { margin: 0; }
.startleiste-stand { color: var(--grau); }
.startleiste .startliste-form { margin-left: auto; }
@media (max-width: 600px) {
  dl.zahlen > div { flex: 1 1 42%; min-width: 0; padding-right: 0; margin-right: 0; border-right: 0; }
  table.statistik-tabelle td[data-titel]:not(:first-child)::before { content: attr(data-titel) ": "; color: var(--grau); }
  table.statistik-tabelle td.zahl { text-align: left; white-space: normal; }
  .startleiste .startliste-form { margin-left: 0; }
}

/* ===== Umbau 15.10.2026 (Angelos Wunsch: alle Kundenseiten auf PC, Tablet und Handy, Platz gut nutzen) – gemeinsame Regeln ===== */
/* Lesebreite: Fließtext höchstens rund 100 Zeichen je Zeile; Tabellen, Formulare, Kästen und Raster nutzen weiter die ganze Breite */
:is(main, .einstellungen-inhalt) > p:not(.aktionen):not(.zurueck):not(.belegkopf), :is(main, .einstellungen-inhalt) > :is(.hinweis, .meldung, .warnung),
.abschnitt > p.klein, .stand { max-width: 100ch; }
/* Seiten ohne Anmeldung (Anmelden, Passwort, Code): eine Karte in der Mitte wie bei Website und Kundenkonto */
body.anmelde-seite main { max-width: 560px; margin: 24px auto; }
body.anmelde-seite form.schmal { max-width: none; }
body.anmelde-seite :is(main) > p { max-width: none; }
input.code-feld { width: 9em; font-size: 20px; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
/* Zwischen Handy und Laptop (Tablet): der Firmenname fällt in der Kopfzeile weg, sonst bricht sie um */
@media (min-width: 601px) and (max-width: 1100px) { .abmelden .firma { display: none; } }
/* Knopf „Original in neuem Tab öffnen“ steht VOR dem Rahmen (am Handy ist die Schrift im Rahmen winzig) */
.original .original-oeffnen { margin: 0 0 8px; }
/* Positionen und Kopf-Felder passen sich ihrem Platz an (Container-Query wie bei table.regeln) */
.tabelle:has(> table.positionen), .tabelle:has(> table.kopf) { container-type: inline-size; }
/* Kopf-Felder des Belegs (table.kopf) als Tabelle (ab 481 px Platz): feste Spalten, damit der Status nahe am Wert steht */
@container (min-width: 481px) {
  table.kopf th[scope="row"] { width: 220px; }
  table.kopf td:nth-child(2) { width: 40%; }
}
/* Positionen in einem schmalen Platz (Handy, schmale Daten-Spalte): je Position ein Block – Feldname über jedem Feld, Beschreibung über die
   ganze Breite, darunter Status, „Laut Prüfung“ und „Entfernen“. So rollt nichts mehr zur Seite. */
@container (max-width: 800px) {
  table.positionen thead { position: absolute; left: -9999px; }
  table.positionen, table.positionen tbody { display: block; }
  table.positionen tr.position { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 8px 4px; }
  table.positionen tr.position td { display: block; border: 0; padding: 0; min-width: 0; width: 100%; }   /* width 100 %: WebKit lässt eine Zelle im Raster sonst nur so breit wie ihr Feld */
  table.positionen tr.position td:first-child { grid-column: 1 / -1; font-weight: 600; }
  table.positionen tr.position td:first-child::before { content: "Position "; }
  table.positionen tr.position td[data-titel]::before { content: attr(data-titel); display: block; font-size: 13px; color: var(--grau); margin-bottom: 2px; }
  table.positionen tr.position td:has(> input.feld-beschreibung), table.positionen tr.position td:has(> input.feld-bezeichnung) { grid-column: 1 / -1; }
  table.positionen td input:not([type="checkbox"]) { width: 100%; min-width: 0; max-width: none; }
  table.positionen td label { white-space: normal; }
  table.positionen tr.zur-position { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 8px 12px; border-bottom: 1px solid var(--linie); }
  table.positionen tr.zur-position td { display: block; border: 0; padding: 0; width: auto; }
  table.positionen tr.zur-position td:first-child { display: none; }
  table.positionen tr.zur-position td:nth-child(2) { flex: 1 1 200px; }
  table.positionen tr.zur-position td.rechts { margin-left: auto; }
  table.positionen tbody tr:last-child { border-bottom: 0; }
}
/* Kopf-Felder in einem schmalen Platz (Handy): Feldname und Status in einer Zeile, das Feld darunter über die ganze Breite */
@container (max-width: 480px) {
  table.kopf thead { position: absolute; left: -9999px; }
  table.kopf, table.kopf tbody { display: block; }
  table.kopf tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px; border-bottom: 1px solid var(--linie); }
  table.kopf tr:last-child { border-bottom: 0; }
  table.kopf th, table.kopf td { display: block; border: 0; padding: 0; width: 100%; min-width: 0; }
  table.kopf th[scope="row"] { grid-column: 1; grid-row: 1; }
  table.kopf td:last-child { grid-column: 2; grid-row: 1; text-align: right; }
  table.kopf td:last-child .klein { text-align: left; }
  table.kopf td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  table.kopf td:nth-child(2) :is(input, select) { width: 100%; min-width: 0; max-width: none; }
}
/* Am PC (ab 1600 px) die Kopf-Felder in zwei Spalten: 8 statt 15 Zeilen – Positionen und Knöpfe stehen dann im ersten Bildschirm */
@media (min-width: 1600px) {
  table.kopf thead { position: absolute; left: -9999px; }
  table.kopf { display: block; }
  table.kopf tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  /* Wert mindestens 200 px – eine lange Meldung in der Status-Spalte (AE5) drückte das Feld sonst auf 18 px (gemessen 18.10.2026) */
  table.kopf tr { display: grid; grid-template-columns: 170px minmax(200px, 3fr) minmax(0, 2fr); align-items: center; gap: 0 8px; padding: 6px 8px; border-bottom: 1px solid var(--linie); }
  table.kopf th, table.kopf td, table.kopf th[scope="row"], table.kopf td:nth-child(2) { display: block; border: 0; padding: 0; width: 100%; min-width: 0; }
  table.kopf td input { width: 100%; min-width: 0; max-width: none; }
}
/* Positionen als Tabelle (ab 801 px Platz): Beschreibung bekommt den freien Platz, Zahlen und Einheiten nur, was sie brauchen */
@container (min-width: 801px) {
  table.positionen td:has(> input.feld-beschreibung), table.positionen td:has(> input.feld-bezeichnung) { width: 34%; }
  input.feld-beschreibung, input.feld-bezeichnung { min-width: 180px; }
  table.positionen td:has(> input.breite-zahl), table.positionen td:has(> input.feld-einheit) { width: 1%; white-space: nowrap; }
}
/* Zeile „Übergabe“ auf der Detailseite: Text und Knöpfe als Zeile, die Knöpfe bleiben zusammen */
.uebergabe-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0; }
.uebergabe-zeile .knoepfe { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.uebergabe-zeile .knoepfe form { margin: 0; }
/* Zweiter Faktor: Schritt 2 (QR-Code) und Schritt 3 (Code) nebeneinander, sobald der Platz reicht (sonst lag das Code-Feld unter dem Rand) */
.schritte-feld { container-type: inline-size; }
@container (min-width: 640px) {
  .schritte-feld ol.schritte { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .schritte-feld ol.schritte > li:first-child { grid-column: 1 / -1; }
}
/* Mitarbeiter ohne Seitenleiste: Kopfkarte so breit wie die Tabelle darunter */
body:not(.mit-leiste) .kopf-karte { max-width: 900px; }
/* Lange Adressen und Befehle (Schnittstelle, Bestell-Link, Verbinder) brechen um statt die Seite quer rollen zu lassen */
code { overflow-wrap: anywhere; }
/* Aufklapper überall mit Klickfläche */
summary { padding: 6px 0; }

/* ===== Umbau anmeldung (15.10.2026) ===== */
/* Seiten ohne Anmeldung (Anmelden, Passwort setzen/vergessen, Code, Einrichten): main selbst ist die Karte in der Mitte – dieselbe wie im
   Kundenkonto und auf lirodo.de (ein Produkt, ein Bild). Das Formular darin ohne eigenen Kasten (sonst Kasten im Kasten); Erklärung, Felder,
   Haupt-Knopf, Zweit-Wege („Passwort vergessen?“, Hilfe, Abbrechen) haben so eine Breite. Vorher stand ein 360-px-Kasten links oben. */
body.anmelde-seite main { background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 24px; margin: 32px auto; }
body.anmelde-seite main > :last-child { margin-bottom: 0; }
body.anmelde-seite form.schmal { background: none; border: 0; border-radius: 0; padding: 0; }
/* Zweiten Faktor einrichten (Schritte 1–3): Karte 760 statt 560 px, damit Schritt 2 (QR-Code) und Schritt 3 (Code-Feld) nebeneinander passen
   (innen 712 px ≥ 640, Regel .schritte-feld oben) – am Laptop 1366×768 lag der Knopf sonst unter dem Bildschirmrand */
body.anmelde-seite main:has(ol.schritte) { max-width: 760px; }
/* Trefffläche mindestens 24 px: „Passwort vergessen?“ und die zugeklappte Hilfe (am PC war summary 22 px hoch; die Regel für ≤ 600 px gibt es schon) */
.nebenweg { margin: 16px 0 8px; }
.nebenweg a { display: inline-block; padding: 6px 0; }
body.anmelde-seite summary { padding: 6px 0; }
/* Zweiter Faktor unter „Mein Zugang“: die Schritte so breit wie der Fließtext darüber (Lesebreite 100ch, gemeinsame Regel) – sonst lägen
   QR-Code und Code-Feld bei 1920 px fast 1000 px auseinander; der Rest der Breite bleibt bewusst leer */
.schritte-feld { max-width: 100ch; }
/* Im Raster (Schritt 2 | Schritt 3) bekommt jeder Schritt den Platz für seine Nummer selbst – sonst stünde die „3.“ im Spalt zwischen den Spalten */
@container (min-width: 640px) {
  .schritte-feld ol.schritte { padding-left: 0; }
  .schritte-feld ol.schritte > li { margin-left: 22px; }
  .schritte-feld ol.schritte > li:last-child { margin-bottom: 0; }
}
@media (max-width: 600px) {
  /* Handy: die Karte mit 12 px Rand wie im Kundenkonto; innen 16 px, damit die Felder breit bleiben */
  body.anmelde-seite main { margin: 16px 12px; padding: 16px; }
}
/* ===== Ende Umbau anmeldung ===== */

/* ===== Umbau einstellungen (15.10.2026) ===== */
/* Seiten „Einstellungen“ (Übersicht), „Mein Zugang“, „Stammdaten“, „Löschfristen“, „Mitarbeiter und Admins“ auf allen Breiten
   (Befunde der Prüfung vom 18.10.2026). Nur neue Regeln und Klassen; wo eine bestehende Regel überschrieben wird, steht es dabei. */

/* Übersicht am PC (ab 1600 px): drei feste Spalten, „Über Lirodo“ (vierte Gruppe) unter der dritten – vorher füllte das Raster Zeile für
   Zeile, und der Kasten hing allein unter der ersten Spalte, während die dritte nach drei Zeilen zu Ende war */
@media (min-width: 1600px) {
  body.einstellungen-start .gruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.einstellungen-start .gruppen > .gruppe:nth-child(4) { grid-column: 3; }
}

/* Mein Zugang: Kopfkarte und Tabelle gleich breit; am PC höchstens 1200 px, linksbündig (eine 1.600 px breite Tabelle mit drei Wörtern
   je Zeile wirkt leer). Ohne Seitenleiste (Mitarbeiter) sind beide ohnehin 900 px breit. */
.zugang-seite { max-width: 1200px; }

/* Löschfristen (table.fristen): der Text nimmt den Platz, die vier Knöpfe bleiben in EINER Zeile – überschreibt für diese Tabelle
   „th[scope=row] { width: 55% }“ von table.einstellungen (so brach „90 Tage“ am Tablet allein in eine zweite Zeile um). Die Zelle ist
   so breit wie die Knopfreihe (width 1 % + nowrap in der Reihe); Hinweise darunter brechen weiter um. */
table.einstellungen.fristen th[scope="row"] { width: auto; }
table.einstellungen.fristen td { width: 1%; }
table.fristen .wahlknoepfe { flex-wrap: nowrap; }
table.fristen .wahlknoepfe button { white-space: nowrap; }
/* Am PC höchstens 1400 px, sonst steht die Erklärung 900 px weit von den Knöpfen (überschreibt „max-width: none“ mit Seitenleiste) */
body.mit-leiste .tabelle:has(> table.einstellungen.fristen) { max-width: 1400px; }
.tabelle:has(> table.fristen) { container-type: inline-size; }
/* Schmaler Platz (Handy, Tablet hochkant, kleiner Laptop mit Seitenleiste): Titel und Erklärung oben, darunter die Knöpfe über die ganze
   Breite – vier Knöpfe nebeneinander (je rund 80 px) trifft der Daumen; eine schmale Säule mit umgebrochenen Wörtern nicht */
@container (max-width: 760px) {
  table.einstellungen.fristen tr > * { display: block; width: auto; }
  table.einstellungen.fristen th[scope="row"] { border-bottom: 0; padding-bottom: 0; }
  table.einstellungen.fristen td { padding-top: 8px; }
  table.fristen form.schalter-form, table.fristen .wahlknoepfe { display: flex; width: 100%; }
  table.fristen .wahlknoepfe button { flex: 1 1 0; min-width: 0; padding: 8px 6px; text-align: center; }
}

/* Stammdaten (table.stammdaten): „Stand“ in einer Zeile („noch keine Datei“ stand am Laptop in drei Zeilen, obwohl daneben Platz war) */
table.stammdaten td:nth-child(2) { white-space: nowrap; }
.tabelle:has(> table.stammdaten) { container-type: inline-size; }
/* Als Tabelle (ab 761 px Platz): die Spalte „Liste“ höchstens die Hälfte, das Dateifeld bekommt den freien Platz, der Knopf bricht nicht um */
@container (min-width: 761px) {
  table.stammdaten th[scope="row"] { width: 50%; }
  table.stammdaten td:nth-child(4) { min-width: 260px; }
  .stammdaten-hochladen input[type="file"] { flex: 1 1 200px; min-width: 0; }
  .stammdaten-hochladen .knopf { white-space: nowrap; }
}
/* In schmalem Platz (Handy, Tablet hochkant, 1024 px mit Seitenleiste): je Liste ein Block – Name und Pflichtspalten, darunter Stand
   (links) und Datei (rechts), darunter Datei wählen und Knopf nebeneinander. Vorher brach in der 350 px breiten Tabelle jedes Wort um
   (2.100 px hoch für sechs Zeilen), am Tablet war das Dateifeld auf 140 px gestaucht. */
@container (max-width: 760px) {
  table.stammdaten thead { position: absolute; left: -9999px; }
  table.stammdaten, table.stammdaten tbody { display: block; }
  table.stammdaten tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--linie); }
  table.stammdaten tr:last-child { border-bottom: 0; }
  table.stammdaten th, table.stammdaten td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
  table.stammdaten th[scope="row"] { grid-column: 1 / -1; }
  table.stammdaten td:nth-child(2) { white-space: normal; }
  table.stammdaten td[data-titel]::before { content: attr(data-titel) ": "; color: var(--grau); }
  table.stammdaten td:nth-child(3) { text-align: right; }
  table.stammdaten td:nth-child(4) { grid-column: 1 / -1; margin-top: 4px; }
  .stammdaten-hochladen input[type="file"] { flex: 1 1 200px; min-width: 0; }
  .stammdaten-hochladen .knopf { flex: 1 0 auto; white-space: nowrap; }
}

/* Mitarbeiter und Admins */
/* Zähler über der Liste, am schmalen Bildschirm daneben der Weg zum Formular (ab 1200 px steht es rechts daneben – dann ohne) */
.nutzer-zaehler { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 16px 0 12px; }
.nutzer-zaehler .knopf { white-space: nowrap; }
/* Die Erklärung „Wer darf was?“ zugeklappt über der Liste, so breit wie sie; der Text darin in Lesebreite */
.nutzer-seite details.erklaerung { max-width: none; margin: 0; }
.nutzer-seite details.erklaerung p { max-width: 100ch; margin: 0; }
/* Spalte „Anmeldung“: Datum und Uhrzeit zusammen; die Spalte „Ändern“ nur so breit wie ihr breitester Knopf (vorher fest 220 px –
   überschreibt .nutzer-aktionen, damit „Anmeldung“ am Tablet nicht in drei Zeilen bricht) */
table.nutzer .zeitpunkt { white-space: nowrap; }
table.nutzer .nutzer-aktionen { min-width: 0; }
table.nutzer .nutzer-aktionen .knopf { white-space: nowrap; }
.tabelle:has(> table.nutzer) { container-type: inline-size; }
/* In schmalem Platz (Handy): je Zugang ein Block – Name und Knöpfe oben, darunter Zugang, Admin und Anmeldung mit ihrem Wort davor. Die
   Wörter sind die Spaltenköpfe derselben Tabelle (nutzer.js). Vorher rollte die Tabelle 617 px weit, Schalter „Admin“ und „Neue Einladung“
   lagen ohne Hinweis außerhalb des Bildes. */
@container (max-width: 640px) {
  table.nutzer thead { position: absolute; left: -9999px; }
  table.nutzer, table.nutzer tbody { display: block; }
  table.nutzer tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--linie); }
  table.nutzer tr:last-child { border-bottom: 0; }
  table.nutzer th, table.nutzer td { display: block; border: 0; padding: 0; min-width: 0; }
  table.nutzer th[scope="row"] { grid-column: 1; grid-row: 1; }
  table.nutzer td.nutzer-aktionen { grid-column: 2; grid-row: 1; text-align: right; }
  table.nutzer td.nutzer-aktionen .knopf { display: block; margin: 0 0 4px; }
  table.nutzer td:not(.nutzer-aktionen) { grid-column: 1 / -1; }
  table.nutzer td:nth-child(2)::before { content: "Zugang: "; color: var(--grau); }
  table.nutzer td:nth-child(3)::before { content: "Admin: "; color: var(--grau); }
  table.nutzer td:nth-child(4)::before { content: "Anmeldung: "; color: var(--grau); }
}
/* Ab 1200 px zwei Spalten: links Zähler, Liste und Hinweis, rechts (380 px) „Mitarbeiter einladen“ und „Zweiter Faktor für alle“ – der
   Einladen-Knopf steht so ohne Rollen neben der Liste (vorher auf dem zweiten Bildschirm in einem 360 px schmalen Kasten neben Leere) */
@media (min-width: 1200px) {
  .nutzer-seite { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  .nutzer-seite > * { min-width: 0; }
  .nutzer-einladen > h2:first-child { margin-top: 0; }
  .nutzer-einladen form.schmal { max-width: none; }
  .nutzer-zaehler .knopf { display: none; }
}
/* Darunter untereinander; ist sonst niemand da (neuer Kunde), kommt das Formular zuerst – Einladen ist dann die erste Handlung */
@media (max-width: 1199px) {
  .nutzer-seite.leer { display: flex; flex-direction: column; }
  .nutzer-seite.leer > .nutzer-einladen { order: -1; }
}
/* ===== Ende Umbau einstellungen ===== */

/* ===== Umbau eingaenge (15.10.2026) ===== */
/* Seitengruppe Hochladen, Übergabe, Postfach, Bestell-Link und Bestellseite, Lieferscheine per E-Mail – nach der Prüfung aller Breiten
   (Fotos in 375/768/1024/1440/1920 px, hell und dunkel). Nur Ergänzungen; bestehende Regeln werden hier mit genauerem Selektor überschrieben. */

/* Hochladen: das Formular bleibt auch einspaltig (Tablet, kleiner Laptop) höchstens 720 px breit – vorher 976 px breite Dateifelder
   (die Regel .seite-zweispaltig form.hochladen { max-width: none } gilt dann nur noch ab 1101 px) */
@media (max-width: 1100px) { .seite-zweispaltig form.hochladen { max-width: 720px; } }
/* Am Laptop und PC steht das Dateifeld zuerst: Dort wählt man Dateien vom Rechner */
@media (min-width: 1101px) { form.hochladen > fieldset.datei { order: -1; } }
/* Die Liste „Zuletzt hochgeladen“ wird am PC nicht breiter als 900 px; das Datum bricht als Tabelle nicht um */
.tabelle:has(> table.zuletzt) { container-type: inline-size; max-width: 900px; }
table.zuletzt td:nth-child(2) { white-space: nowrap; }
/* „Zuletzt hochgeladen“ in einem schmalen Platz (Handy, schmale rechte Spalte): je Upload ein Block – Datum und Stand links, „Ansehen“
   rechts, darunter „Von“ und „Seiten“ mit ihrem Namen (data-titel). Vorher rollte die Tabelle zur Seite, die Spalte „Seiten“ war abgeschnitten. */
@container (max-width: 600px) {
  table.zuletzt thead { position: absolute; left: -9999px; }
  table.zuletzt, table.zuletzt tbody { display: block; }
  table.zuletzt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 12px; border-bottom: 1px solid var(--linie); }
  table.zuletzt tbody tr:last-child { border-bottom: 0; }
  table.zuletzt td { display: block; border: 0; padding: 0; min-width: 0; width: auto; }
  table.zuletzt td:nth-child(1) { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  table.zuletzt td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; white-space: normal; }
  table.zuletzt td:nth-child(3) { grid-column: 1; grid-row: 2; }
  table.zuletzt td[data-titel] { grid-column: 1 / -1; font-size: 13px; color: var(--grau); }
  table.zuletzt td[data-titel]::before { content: attr(data-titel) ": "; }
}

/* Übergabe: am PC (ab 1600 px) die zwei Kästen links, die Liste der Importdateien rechts – vorher zwei 925 px breite Kästen mit drei Zeilen
   Inhalt und die Liste darunter */
.uebergabe-raster { margin: 16px 0; }
.uebergabe-raster > .paar { margin: 0 0 16px; }
@media (min-width: 1600px) {
  .uebergabe-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .uebergabe-raster > .paar { margin: 0; }
  .uebergabe-raster > .importdateien > h2:first-child { margin-top: 0; }
}

/* Postfach: das Auswahlfeld so breit wie die anderen Felder, nie breiter (ein langer Text einer Option zog sonst die Seite auf) */
form.postfach-form select { width: 100%; min-width: 0; }
/* Tabelle „Zu beachten bei diesen Anbietern“: der Anbieter in einer Zeile (vorher brach „Telekom (T-Online)“ bei 1.700 px Platz um),
   am PC nicht breiter als 960 px */
.tabelle:has(> table.anbieter) { max-width: 960px; }
table.anbieter th:first-child, table.anbieter td:first-child { white-space: nowrap; width: 1%; }

/* Bestell-Link: Adresse und Kennzahlen links, der QR-Code daneben, sobald der Platz reicht (sonst darunter) */
.link-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; }
.link-zeile .link-text { flex: 1 1 280px; min-width: 0; }
.link-zeile .qr-rahmen { flex: none; margin: 12px 0 8px; }
/* Die letzten Bestellungen über beide Spalten, sobald rechts „Ihren Kunden Bescheid geben“ steht (ohne Link bleibt die Liste rechts) */
.bestell-link-seite:has(> .bescheid) > .letzte-bestellungen { grid-column: 1 / -1; }
/* Ein Satz in einem 780 px breiten Kasten wirkt verloren */
.bestell-link > .hinweis { max-width: 70ch; }

/* Öffentliche Bestellseite: Formular bis 640 px (statt 560 wie beim Postfach – das Textfeld braucht Platz), rechts „So geht es weiter“ */
.bestell-seite > p { max-width: 100ch; }
.bestell-seite .seite-zweispaltig.formular-links { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); }
@media (max-width: 1100px) { .bestell-seite .seite-zweispaltig.formular-links { grid-template-columns: minmax(0, 1fr); } }
/* Kasten „So geht es weiter“ (Bestellseite) bzw. „So geht es mit der Adresse“ (Lieferscheine per E-Mail ohne Adresse): eine kurze Liste */
.abschnitt.so-weiter ul { margin: 0 0 12px; padding-left: 1.2em; }
.abschnitt.so-weiter li + li { margin-top: 8px; }

/* Handy */
@media (max-width: 600px) {
  /* Ein zweiter Satz, der am Handy nur Platz kostet (Hochladen) */
  .nicht-am-handy { display: none; }
  /* Hochladen: Kamera → Bemerkung → „Hochladen“, erst dann die Datei vom PC und das Kleingedruckte – der Knopf steht so auf dem ersten
     Bildschirm (vorher 1.200 px tief); die Dateifelder mit 48 px Tippfläche */
  form.hochladen > .aktionen { order: 3; }
  form.hochladen > fieldset.datei { order: 4; }
  form.hochladen > p.klein { order: 5; }
  form.hochladen input[type="file"] { padding: 12px 8px; }
  /* Übergabe: „Importdatei erstellen“ und „Echtbetrieb starten“ so breit wie die anderen Knöpfe am Handy */
  .uebergabe-art form:not(.schalter-form) { display: flex; }
  .uebergabe-art .aktionen form.schalter-form { display: flex; width: 100%; }
  .uebergabe-art form .knopf { width: 100%; }
  /* Postfach: der Anbieter darf wieder umbrechen */
  table.anbieter th:first-child, table.anbieter td:first-child { white-space: normal; width: auto; }
  /* Bestell-Link: QR-Code etwas kleiner */
  .bestell-link .qr { width: 200px; height: 200px; }
  /* Bestellseite: ein langer Firmenname braucht so keine drei Zeilen */
  .bestell-seite h1 { font-size: 24px; }
}
/* ===== Ende Umbau eingaenge ===== */

/* ===== Umbau regeln (15.10.2026) ===== */
/* Seitengruppe „Prüfregeln“ (regeln.js, regelfenster.js), Umbau vom 18.10.2026 nach der Prüfung aller Breiten (375 bis 1920 px).
   Bestehende Regeln oben bleiben unverändert; was hier gleich heißt, überschreibt sie bewusst (steht später in der Datei). */

/* Kopf der Liste: links die Reiter (Aufträge · Lieferscheine), rechts der Haupt-Knopf „Neue Regel anlegen“ und der Sprung zu den eigenen
   Regeln – vorher stand der Knopf nur ganz unten unter allen Regeln. Am Handy darunter, der Knopf so breit wie möglich. */
.regeln-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 8px 0 16px; }
.regeln-kopf .reiter { margin: 0; }
.regeln-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 0 auto; }
@media (max-width: 600px) {
  .regeln-aktionen { flex-basis: 100%; margin-left: 0; }
  .regeln-aktionen .knopf { flex: 1 1 auto; }
}

/* Spaltenköpfe der Prüfregeln nicht mehr trennen (überschreibt „hyphens: auto“ von oben): Zwischen 1001 und 1200 px brachen „Schwel-lenwert“
   und „ange-schla-gen“ in 3 bis 4 Zeilen; unter 1001 px Platz sind es jetzt ohnehin Blöcke. */
@media (max-width: 1200px) {
  table.regeln thead th { hyphens: manual; -webkit-hyphens: manual; }
}

/* Prüfregeln in einem schmalen Platz – jetzt bis 1000 px Platz (vorher 960: bei 976 px, Tablet quer ohne Seitenleiste, wurde die Tabelle
   noch gezeigt, mit fünfzeiligen Köpfen). Je Regel ein Block als festes Raster: Zeile 1 Nummer, Regel, „Ändern“; Zeile 2 Wirkung | Freigabe |
   Schwellenwert; Zeile 3 Anzahl | Geändert – in jedem Block an derselben Stelle (vorher Flex: die Werte sprangen von Block zu Block).
   Leere Zellen („Geändert“ im Auslieferungszustand) fallen weg. Überschreibt den Block „@container (max-width: 960px)“ von oben. */
@container (max-width: 1000px) {
  table.regeln thead { position: absolute; left: -9999px; }
  table.regeln, table.regeln tbody { display: block; }
  table.regeln tbody tr { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); gap: 4px 12px; align-items: start; padding: 12px; border-bottom: 1px solid var(--linie); }
  table.regeln tbody tr:last-child { border-bottom: 0; }
  table.regeln td { display: block; border: 0; padding: 0; min-width: 0; width: auto; order: 0; margin: 0; }
  table.regeln td.spalte-nr { grid-column: 1; grid-row: 1; }
  table.regeln td.spalte-regel { grid-column: 2 / 4; grid-row: 1; font-weight: 600; }
  table.regeln td.spalte-regel .klein { font-weight: 400; }
  table.regeln td.spalte-knopf { grid-column: 4; grid-row: 1; justify-self: end; }
  table.regeln td[data-titel] { font-size: 14px; }
  table.regeln td[data-titel]::before { content: attr(data-titel) ": "; color: var(--grau); }
  table.regeln td[data-titel]:empty { display: none; }
  table.regeln td.spalte-wirkung { grid-column: 2; }
  table.regeln td.spalte-freigeben { grid-column: 3; }
  table.regeln td[data-titel="Schwellenwert"] { grid-column: 4; }
  table.regeln td[data-titel="In 30 Tagen angeschlagen"] { grid-column: 2; }
  table.regeln td[data-titel="Geändert"] { grid-column: 3 / -1; }
  table.regeln td.spalte-wirkung, table.regeln td.spalte-freigeben { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: normal; }
  table.regeln td.spalte-wirkung::before, table.regeln td.spalte-freigeben::before { content: attr(data-titel); }
  table.regeln td .geschaltet { flex-basis: 100%; }
}
/* Handy (bis 480 px Platz): die Regel bekommt die ganze Breite neben der Nummer (vorher 150 px zwischen Nummer und Knopf, 4 bis 8 Zeilen),
   die Werte untereinander, „Ändern“ als letzte Zeile des Blocks mit größerer Klickfläche. */
@container (max-width: 480px) {
  table.regeln tbody tr { grid-template-columns: 44px minmax(0, 1fr); }
  table.regeln td.spalte-regel { grid-column: 2; }
  table.regeln td.spalte-wirkung, table.regeln td.spalte-freigeben, table.regeln td[data-titel="Schwellenwert"],
  table.regeln td[data-titel="In 30 Tagen angeschlagen"], table.regeln td[data-titel="Geändert"] { grid-column: 2; }
  table.regeln td.spalte-knopf { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
  table.regeln td.spalte-knopf .knopf { padding: 8px 16px; }
}

/* Seite einer Regel: drei Abschnitte (Stand, Formular, Verlauf). Ab 1101 px das Formular links (Speichern im ersten Bildschirm), rechts
   Vergleich, Zahlen, „Was das Lockern bedeutet“ und der Verlauf – vorher alles untereinander, am Laptop ein Drittel leer, Speichern erst im
   zweiten Bildschirm. Bis 1100 px untereinander in der Reihenfolge des HTML (erst was gilt, dann das Formular). */
.regel-stand > p, .regel-aendern > p { max-width: 100ch; }
@media (min-width: 1101px) {
  .regel-seite { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "aendern stand" "aendern verlauf"; gap: 0 32px; align-items: start; }
  .regel-seite > .regel-aendern { grid-area: aendern; }
  .regel-seite > .regel-stand { grid-area: stand; }
  .regel-seite > .regel-verlauf { grid-area: verlauf; }
  .regel-aendern form.regelformular { max-width: none; margin: 0; }
  .regel-aendern > .hinweis:first-child { margin-top: 0; }
  .regel-verlauf > h2 { margin-top: 24px; }
}
/* Vergleich „Gilt jetzt / Auslieferungszustand“ (table.vergleich): Köpfe dürfen umbrechen; ist weniger als 560 px Platz (Handy, schmale
   rechte Spalte), wird jede Einstellung ein Block – Name, darunter beide Werte mit ihrer Beschriftung (vorher rollte die Tabelle am Handy). */
.tabelle:has(> table.vergleich) { container-type: inline-size; }
table.vergleich thead th { white-space: normal; }
@container (max-width: 560px) {
  table.vergleich thead { position: absolute; left: -9999px; }
  table.vergleich, table.vergleich tbody { display: block; }
  table.vergleich tbody tr { display: block; padding: 8px 12px; border-bottom: 1px solid var(--linie); }
  table.vergleich tbody tr:last-child { border-bottom: 0; }
  table.vergleich th, table.vergleich td { display: block; border: 0; padding: 0; width: auto; }
  table.vergleich td { font-size: 14px; padding-top: 2px; }
  table.vergleich td::before { content: attr(data-titel) ": "; color: var(--grau); }
}
/* Seite einer eigenen Regel: die Angaben in einem Kasten wie jede Tabelle, nicht breiter als das Formular darunter */
.tabelle.angaben { max-width: 720px; }

/* Fenster „Neue Regel anlegen“ / „Regel bearbeiten“: „Schließen“ sieht aus wie ein Knopf (der Verweis kommt aus html.js – hier nur das
   Aussehen; am Handy 44 px hoch), die Erklärung „Was bedeuten die Felder?“ in lesbarer Größe (überschreibt 13 px von oben). */
.fenster-kopf a { display: inline-block; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 4px; background: var(--karte); text-decoration: none; white-space: nowrap; }
.fenster-kopf a:hover { text-decoration: underline; }
.fenster details { font-size: 14px; }
.fenster summary { padding: 6px 0; }
table.felder-erklaerung thead th { white-space: normal; }
/* Bedingungen im schmalen Fenster (bis 900 px wie oben): Zeile 1 „1 Kundennummer … [Entfernen]“ – der Name des Feldes neben der Nummer,
   „Entfernen“ klein als Nebenaktion (vorher stand der große Knopf allein neben der Nummer, der Name erst darunter); darunter eingerückt
   Vergleich, Wert und der Hinweis zum Wert. Überschreibt das Raster „1fr auto“ von oben. */
@media (max-width: 900px) {
  table.bedingungen tr { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 8px; padding: 0 8px; }
  table.bedingungen td { grid-column: 2 / -1; padding: 3px 0; }
  table.bedingungen tr.bedingung td:first-child { grid-column: 1; grid-row: 1; align-self: start; padding: 10px 0 3px; }
  table.bedingungen tr.bedingung td.spalte-feld { grid-column: 2; grid-row: 1; padding-top: 8px; }
  table.bedingungen tr.bedingung td:last-child { grid-column: 3; grid-row: 1; padding-top: 8px; }
  table.bedingungen tr.bedingung td:last-child .knopf { width: auto; padding: 4px 10px; font-size: 14px; white-space: nowrap; }
  table.bedingungen tr.zur-bedingung td:first-child { display: none; }
  table.bedingungen tbody tr:not(.bedingung) { padding-bottom: 8px; }
}
@media (max-width: 600px) {
  .fenster-kopf a { padding: 10px 14px; }
  /* Die Knöpfe des Fensters kleben unten im rollenden Fensterinhalt: „Regel anlegen“ über die ganze Breite, darunter „Regel in Worten
     zeigen“ und „Abbrechen“ nebeneinander – so kommt man immer heraus (vorher erst am Ende des langen Formulars). */
  .fenster .fenster-aktionen { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    margin: 0 -10px; padding: 8px 10px; background: var(--flaeche); border-top: 1px solid var(--linie); }
  .fenster .fenster-aktionen .haupt { grid-column: 1 / -1; }
  /* Erklärtabelle: zwei Spalten statt drei – „Beleg“ bzw. „Position“ steht hinter dem Namen des Feldes (data-ebene) */
  table.felder-erklaerung th:nth-child(2), table.felder-erklaerung td:nth-child(2) { display: none; }
  table.felder-erklaerung td[data-ebene]::after { content: " · " attr(data-ebene); color: var(--grau); font-size: 13px; }
}
/* ===== Ende Umbau regeln ===== */

/* ===== Umbau listen (18.10.2026) ===== */
/* Prüfliste, Statistik, Suche – der Entwickler dieser Gruppe wurde unterbrochen; das CSS zu seinen HTML-Änderungen steht hier. */
/* Kasten „Nicht verarbeitet“ (table.stapel, pruefliste.js): im schmalen Platz je Dokument ein Block – Datei und Eingang oben, Belegart und
   Weg darunter mit ihrem Wort davor, dann die Knöpfe. Vorher rollte die Tabelle mit fünf Spalten am Handy zur Seite. */
.tabelle:has(> table.stapel) { container-type: inline-size; }
@container (max-width: 700px) {
  table.stapel thead { position: absolute; left: -9999px; }
  table.stapel, table.stapel tbody { display: block; }
  table.stapel tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 8px; border-bottom: 1px solid var(--linie); }
  table.stapel tbody tr:last-child { border-bottom: 0; }
  table.stapel td { display: block; border: 0; padding: 0; min-width: 0; }
  table.stapel td[data-titel="Datei"] { grid-column: 1; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; }
  table.stapel td[data-titel="Eingang"] { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  table.stapel td[data-titel="Eingang"] .klein { display: inline; margin-left: 4px; }
  table.stapel td[data-titel="Belegart"], table.stapel td[data-titel="Weg"] { grid-column: 1 / -1; font-size: 14px; }
  table.stapel td[data-titel="Belegart"]::before, table.stapel td[data-titel="Weg"]::before { content: attr(data-titel) ": "; color: var(--grau); }
  table.stapel td[data-titel="Aktion"] { grid-column: 1 / -1; margin-top: 4px; }
  table.stapel td[data-titel="Aktion"] .aktionen { margin: 0; }
  table.stapel td[data-titel="Aktion"] .knopf { flex: 1 1 auto; }
}
/* Diagramm (statistik.js): die Beschriftung der Balken als HTML unter dem Bild – je Balken eine gleich breite Spalte. Als Schrift im SVG
   schrumpfte sie am Handy mit dem Bild auf rund 4 Pixel. */
.diagramm { display: flex; flex-direction: column; width: fit-content; max-width: 100%; }
.diagramm svg.balken { width: 100%; }
.balken-achse { display: flex; width: 100%; margin-top: 2px; font-size: 12px; color: var(--grau); }
.balken-achse > span { flex: 1 1 0; min-width: 0; text-align: center; }
/* Suche am Handy (form.suche): die Felder zu zweit nebeneinander, Knopf über die ganze Breite */
@media (max-width: 600px) {
  form.suche .suchfelder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
  form.suche .suchfelder label { min-width: 0; }
  form.suche .suchfelder input, form.suche .suchfelder select { width: 100%; min-width: 0; }
  form.suche .suchfelder label:first-child { grid-column: 1 / -1; }
  form.suche .suchfelder .knopf { grid-column: 1 / -1; }
}
/* ===== Ende Umbau listen ===== */

/* ===== Nachprüfung 18.10.2026: kleine Verweise mit Klickfläche ===== */
h2 a.klein, .regeln-aktionen a:not(.knopf) { display: inline-block; padding: 6px 0; }

/* ===== Kurzanleitung (seit 21.10.2026, anleitung.js): lesbare Breite; gedruckt ohne Kopf- und Fußzeile, auf zwei Seiten A4 ===== */
.anleitung { max-width: 860px; }
.anleitung h2 { margin-top: 24px; }
.anleitung li { margin: 4px 0; }
@media print {
  header, footer.fuss { display: none; }
  main { padding: 0; }
  .anleitung { max-width: none; font-size: 10.5pt; line-height: 1.35; }
  .anleitung h1 { font-size: 16pt; margin-top: 0; }
  .anleitung h2 { font-size: 12pt; margin-top: 10pt; break-after: avoid; }
  .anleitung a { color: inherit; text-decoration: none; }
  /* Wareneingangsliste (seit 25.10.2026): schwarz auf weiß auch bei dunkler Darstellung, ohne Formular, je Lieferschein eine Seite */
  :root[data-darstellung] { --text: #000; --karte: #fff; --flaeche: #fff; --linie: #888; --grau: #333; --rot: #A4262C; color-scheme: light; }
  .wareneingangsliste .nicht-drucken { display: none; }
  .wareneingangsliste h1 { font-size: 14pt; margin: 0 0 6pt; }
  .we-lieferschein { border: none; padding: 0; margin: 0; }
  .wareneingangsliste .tabelle { overflow: visible; border: none; }
  .we-lieferschein + .we-lieferschein { break-before: page; }
  .we-tabelle { font-size: 9.5pt; }
  .we-tabelle th, .we-tabelle td { padding: 3px 5px; }
  .we-tabelle tr { break-inside: avoid; }
}

/* ===== Wareneingangsliste (seit 25.10.2026, wareneingangsliste.js): je Lieferschein ein Kasten mit Angaben, QR-Code der Bestellung und
   Positionen zum Abhaken; die Regeln für den Druck stehen im Druckblock oben ===== */
.we-zusatz { font-weight: normal; }
.we-lieferschein { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 14px 16px; margin: 16px 0; }
.we-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.we-kopf h2 { margin-top: 0; }
.we-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
.we-angaben dt { font-weight: 600; }
.we-angaben dd { margin: 0; }
.we-qr { margin: 0; text-align: center; font-size: 0.85em; flex: none; }
.we-qr svg { display: block; margin: 0 auto 2px; }
.kaestchen { display: inline-block; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: middle; }
table.we-tabelle thead th { white-space: normal; }
table.we-tabelle td:nth-child(9), table.we-tabelle td:nth-child(10) { white-space: nowrap; }   /* Charge, MHD am Stück */
.we-unterschrift { margin-top: 22px; }
@media (max-width: 600px) { .we-kopf { flex-direction: column; } }

/* ===== Benachrichtigungen (seit 21.10.2026, benachrichtigungen.js): je Art zwei Schalter; im schmalen Platz je Art ein Block – der Titel
   oben, darunter die Schalter mit ihrem Wort ===== */
table.benachrichtigungen td { white-space: nowrap; width: 1%; }
table.benachrichtigungen th[scope="row"] .klein { font-weight: normal; margin-top: 2px; }
.tabelle:has(> table.benachrichtigungen) { container-type: inline-size; }
@container (max-width: 640px) {
  table.benachrichtigungen thead { position: absolute; left: -9999px; }
  table.benachrichtigungen, table.benachrichtigungen tbody { display: block; }
  table.benachrichtigungen tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 8px; border-bottom: 1px solid var(--linie); }
  table.benachrichtigungen tbody th { grid-column: 1 / -1; border: 0; padding: 0; }
  table.benachrichtigungen tbody td { display: block; border: 0; padding: 0; width: auto; }
  table.benachrichtigungen tbody td::before { content: attr(data-titel); display: block; font-size: 13px; color: var(--grau); margin-bottom: 4px; }
}
.pc-mitteilungen [data-stand] { margin: 8px 0 0; }