/* WAS MACHT DIESE DATEI:
   Das komplette Aussehen der Oberfläche, angeglichen an die Kataster-Website
   (website-ghl/seite/seite.css, Paket C1 November 2026, Richtung in doku/DESIGN-CLOUD.md).
   Derselbe blau getönte Grund, dieselbe Tinte, dieselben voll gerundeten Knöpfe,
   System-Schrift, ein Blau als Hauptfarbe, Orange nur für die eine Haupthandlung
   einer Ansicht, Rot ausschließlich für Gefahr und Fehler.
   Farben, Größen und Abstände stehen nur als Tokens ganz oben. Hell und dunkel
   schaltet das Attribut data-theme auf <html> (gesetzt von thema.js); ohne Wahl
   folgt es der Geräte-Einstellung. Gegliedert wird über Flächen und Haarlinien,
   Schatten haben nur Ebenen, die wirklich schweben (Schublade, Fenster, Meldung). */

/* ---------- Design-Tokens: Hell ---------- */
:root {
  --k-grund: #f5f7fb;
  --k-flaeche: #fdfdff;
  --k-flaeche-2: #f9fafd;
  --k-stufe: #e8edf5;
  --k-gewaehlt: #fdfdff;
  --k-tinte: #0b1220;
  --k-leise: #4a5368;
  --k-sehr-leise: #5b6475;
  --k-linie: rgba(11, 18, 32, 0.12);
  --k-linie-stark: rgba(11, 18, 32, 0.22);
  --k-blau: #0071e3;
  --k-blau-hover: #0062c4;
  --k-blau-text: #0058b0;
  --k-auf-blau: #f8fbff;
  --k-blau-weich: rgba(0, 113, 227, 0.09);
  --k-blau-rand: rgba(0, 88, 176, 0.45);
  --k-zeile-hover: #f1f4f9;
  --k-gefahr: #c8102e;
  --k-gefahr-weich: rgba(200, 16, 46, 0.09);
  --k-gefahr-rand: rgba(200, 16, 46, 0.45);
  --k-auf-gefahr: #fff8f8;
  --k-achtung: #8a4f00;
  --k-achtung-weich: rgba(255, 159, 10, 0.14);
  --k-achtung-rand: rgba(138, 79, 0, 0.4);
  --k-ok: #17703c;
  --k-ok-weich: rgba(23, 112, 60, 0.1);
  /* Akzent (Robin, 30.10.2026): Apple-Systemorange, nur für die eine Haupthandlung einer Ansicht.
     Dunkle Schrift darauf (9,1:1); ein feiner Rand fasst den Knopf auf hellem Grund. Nie neben Gefahrzeichen. */
  --k-akzent: #ff9f0a;
  --k-akzent-hover: #f59300;
  --k-auf-akzent: #0b1220;
  --k-akzent-rand: rgba(11, 18, 32, 0.16);
  /* Ebenen, die schweben, und der Schleier dahinter */
  --k-schatten-schwebe: 0 18px 48px rgba(8, 20, 48, 0.22);
  --k-schleier: rgba(7, 11, 20, 0.38);
  --k-pdf-grund: #4a5160;
  --k-schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui,
    "Helvetica Neue", Arial, sans-serif;
  --k-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Schriftgrößen in rem (Sperrliste 18 und 19) */
  --k-gr-titel: 1.75rem;
  --k-gr-zwischen: 1.125rem;
  --k-gr-text: 1rem;
  --k-gr-tabelle: 0.875rem;
  --k-gr-klein: 0.8125rem;
  --k-gr-mini: 0.75rem;
  /* Maße */
  --k-radius: 14px;
  --k-radius-klein: 10px;
  --k-seitenleiste: 256px;
  --k-knopf-hoehe: 40px;
  --k-dauer: 180ms;
  color-scheme: light;
}

/* ---------- Design-Tokens: Dunkel (nur diese Werte ändern sich) ---------- */
html[data-theme="dunkel"] {
  --k-grund: #070b14;
  --k-flaeche: #0d1420;
  --k-flaeche-2: #0a101b;
  --k-stufe: #18223a;
  --k-gewaehlt: #1d2a40;
  --k-tinte: #eef2f8;
  --k-leise: #a6afc0;
  --k-sehr-leise: #8f99ab;
  --k-linie: rgba(255, 255, 255, 0.12);
  --k-linie-stark: rgba(255, 255, 255, 0.22);
  --k-blau: #0071e3;
  --k-blau-hover: #0062c4;
  --k-blau-text: #5aafff;
  --k-blau-weich: rgba(90, 175, 255, 0.14);
  --k-blau-rand: rgba(90, 175, 255, 0.5);
  --k-zeile-hover: #121a29;
  --k-gefahr: #ff6b6b;
  --k-gefahr-weich: rgba(255, 107, 107, 0.15);
  --k-gefahr-rand: rgba(255, 107, 107, 0.5);
  --k-auf-gefahr: #1a0508;
  /* Achtung dunkel Richtung Gelb, damit sie sich vom Orange der Haupthandlung abhebt (Prüfer G0b) */
  --k-achtung: #e9d25a;
  --k-achtung-weich: rgba(233, 210, 90, 0.13);
  --k-achtung-rand: rgba(233, 210, 90, 0.45);
  --k-ok: #4cd07d;
  --k-ok-weich: rgba(76, 208, 125, 0.14);
  --k-akzent-hover: #ffb340;
  --k-akzent-rand: transparent;
  --k-schatten-schwebe: 0 18px 48px rgba(0, 0, 0, 0.55);
  --k-schleier: rgba(0, 0, 0, 0.55);
  --k-pdf-grund: #1f2532;
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* "hidden" muss IMMER verstecken, auch wenn eine Klasse display setzt (sonst
   bleiben Modal/Schublade trotz hidden sichtbar). */
[hidden] { display: none !important; }
html, body { height: 100%; }
html {
  accent-color: var(--k-blau);
  caret-color: var(--k-blau);
  scrollbar-color: var(--k-linie-stark) transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--k-schrift);
  font-size: var(--k-gr-text); line-height: 1.5;
  color: var(--k-tinte); background: var(--k-grund);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--k-mono); font-size: 0.88em; background: var(--k-stufe); color: var(--k-tinte); padding: 1px 6px; border-radius: 6px; }
h1 { font-size: var(--k-gr-titel); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--k-gr-zwischen); line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
b, strong { font-weight: 650; }
::selection { background: var(--k-blau); color: var(--k-auf-blau); }
/* Ein Fokusring für alles, in Markenfarbe (Sperrliste 13). */
:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 2px; border-radius: 6px; }
/* Nur für Vorleseprogramme: unsichtbar, aber vorgelesen. */
.vorlese-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Grundlayout ---------- */
.app { display: grid; grid-template-columns: var(--k-seitenleiste) 1fr; height: 100vh; height: 100dvh; }

/* ---------- Seitenleiste ---------- */
.seite {
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 14px 16px; border-right: 1px solid var(--k-linie);
  background: var(--k-grund); min-width: 0;
}
.marke { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; min-width: 0; }
.marke-zeichen { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.marke-zeichen svg { width: 32px; height: 32px; }
.marke-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.marke-sub { font-size: var(--k-gr-mini); color: var(--k-leise); margin-top: 1px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px;
  padding: 8px 12px; border-radius: 999px; text-align: left;
  color: var(--k-leise); font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  transition: background-color var(--k-dauer) ease-out, color var(--k-dauer) ease-out;
}
.nav-zeile:hover { background: var(--k-stufe); color: var(--k-tinte); }
/* Gewählte Ansicht: helle Fläche mit Haarlinie wie die gewählte Fläche der Website, Zeichen in Blau. */
.nav-zeile.aktiv { background: var(--k-gewaehlt); color: var(--k-tinte); font-weight: 600; box-shadow: inset 0 0 0 1px var(--k-linie); }
.nav-zeile.aktiv .nav-icon { stroke: var(--k-blau-text); }
.nav-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Ein Handgriff im Menü (kein Wechsel der Ansicht): mit dünner Linie darüber abgesetzt. */
.nav-aktion { margin-top: 10px; position: relative; }
.nav-aktion::before { content: ""; position: absolute; left: 12px; right: 12px; top: -6px; border-top: 1px solid var(--k-linie); }
.nav-aktion:disabled { opacity: 0.5; cursor: wait; }
.nav-aktion + .nav-aktion { margin-top: 0; }
.nav-aktion + .nav-aktion::before { display: none; }
.nav-zahl { margin-left: auto; font-size: var(--k-gr-mini); font-weight: 600; color: var(--k-sehr-leise); font-variant-numeric: tabular-nums; }
.nav-zeile.aktiv .nav-zahl { color: var(--k-leise); }

.seite-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 4px 0 12px; border-top: 1px solid var(--k-linie); }
.waechter { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--k-gr-mini); color: var(--k-leise); line-height: 1.35; }
/* Der Zustand steht im Text („Aktiv …"), darum ohne Statuspunkt davor (Sperrliste 22). */
.punkt { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k-sehr-leise); flex: none; }
.punkt.an { background: var(--k-ok); }
/* Hell/Dunkel-Schalter: runder Knopf wie auf der Website. Das Zeichen zeigt, wohin ein Klick führt
   (Mond = dunkel machen, Sonne = hell machen); das Wort darin hören nur Vorleseprogramme. */
.thema-schalter {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 1px solid var(--k-linie); border-radius: 999px;
  color: var(--k-tinte); transition: background-color var(--k-dauer) ease-out;
}
.thema-schalter:hover { background: var(--k-stufe); }
.thema-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="hell"] .nur-dunkel { display: none; }
html[data-theme="dunkel"] .nur-hell { display: none; }

/* ---------- Hauptbereich ---------- */
.haupt { overflow-y: auto; padding: 40px clamp(20px, 4vw, 56px) 64px; min-width: 0; }
.ansicht { display: none; max-width: 1180px; margin: 0 auto; }
.ansicht.aktiv { display: block; animation: rein 0.25s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; flex-wrap: wrap; }
.kopf > div:first-child { min-width: 0; }
.unterzeile { color: var(--k-leise); font-size: 0.9375rem; margin-top: 6px; max-width: 70ch; text-wrap: pretty; }
/* Kleine, ruhige Zeile unter einer Tabelle: sagt, wie viel man gerade
   sieht und wie viel es insgesamt gibt. */
.tabellen-fuss { color: var(--k-leise); font-size: var(--k-gr-klein); margin: 12px 4px 0; }
.kopf-aktionen { display: flex; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* ---------- Knöpfe: flach, eine Füllung, voll gerundet wie auf der Website ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--k-knopf-hoehe); padding: 0 18px; border-radius: 999px;
  background: var(--k-blau); color: var(--k-auf-blau);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--k-dauer) ease-out, color var(--k-dauer) ease-out, transform var(--k-dauer) ease-out;
}
.knopf:hover { background: var(--k-blau-hover); }
.knopf:active { transform: scale(0.97); }
.knopf.still { background: var(--k-stufe); color: var(--k-tinte); }
.knopf.still:hover { background: var(--k-linie-stark); }
/* Die eine Haupthandlung einer Ansicht in Orange (sparsam, nie neben Gefahrzeichen). */
.knopf.knopf-akzent { background: var(--k-akzent); color: var(--k-auf-akzent); box-shadow: inset 0 0 0 1px var(--k-akzent-rand); }
.knopf.knopf-akzent:hover { background: var(--k-akzent-hover); }
.knopf.gefahr-knopf { color: var(--k-gefahr); }
.knopf.gefahr-knopf-voll { background: var(--k-gefahr); color: var(--k-auf-gefahr); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Auswahlkästchen in der Kataster-Tabelle und die Leiste darüber (Punkt 6). */
.wahl-spalte { width: 48px; padding-right: 0 !important; }
/* Eigene Häkchen: zu sehen ist ein 20-px-Kästchen, tippen kann man auf 44 x 44 px (durchsichtiger Rand,
   negative Ränder halten die Zeile so niedrig wie vorher). Gilt für die Auswahl in der Tabelle und die Filter-Haken. */
.wahl-spalte input[type="checkbox"], .schalter-klein input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 44px; margin: -12px;
  border: 12px solid transparent; border-radius: 17px; background: var(--k-flaeche) center / 14px 14px no-repeat;
  background-clip: padding-box; box-shadow: inset 0 0 0 1.5px var(--k-linie-stark); cursor: pointer; vertical-align: middle;
}
.wahl-spalte input[type="checkbox"]:checked, .schalter-klein input[type="checkbox"]:checked {
  background-color: var(--k-blau); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4 5.6 10.4 11.5 3.8' fill='none' stroke='%23f8fbff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wahl-spalte input[type="checkbox"]:focus-visible, .schalter-klein input[type="checkbox"]:focus-visible { outline: 3px solid var(--k-blau); outline-offset: -10px; border-radius: 17px; }
.auswahl-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 16px; margin: 0 0 12px; border: 1px solid var(--k-blau-rand); border-radius: 999px; background: var(--k-blau-weich); font-size: var(--k-gr-tabelle); font-weight: 550; }
.aussortieren-liste { max-height: 180px; overflow-y: auto; margin-bottom: 12px; font-size: var(--k-gr-tabelle); }
/* Das Bearbeiten-Formular im Stoff-Fenster. */
.bearbeiten-form .feld-zeile { grid-template-columns: 130px 1fr; }
.bearbeiten-form input[disabled] { opacity: 0.6; cursor: not-allowed; }
.bearbeiten-form .gesperrt-hinweis { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); margin: -6px 0 12px 140px; }
.beleg-konflikt { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.beleg-konflikt .knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.konflikt-hinweis { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); }
/* Ein Link, der wie ein Knopf aussieht (z. B. "Bericht öffnen": er führt
   auf eine eigene, druckbare Seite und braucht deshalb kein JavaScript). */
a.knopf { text-decoration: none; }
.link-knopf { color: var(--k-blau-text); font-size: var(--k-gr-klein); font-weight: 600; text-underline-offset: 3px; }
.link-knopf:hover { text-decoration: underline; }
.knopf-reihe { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.knopf-reihe.rechts { justify-content: flex-end; }

/* ---------- Zahlenleiste (Übersicht) ----------
   Eine Fläche, darin die Zahlen nebeneinander, getrennt durch Haarlinien
   (wie die Preisspalten der Website), statt sechs schwebender Karten. Jede
   Zahl zeichnet ihre rechte und untere Linie selbst; der Rahmen schneidet die
   äußeren ab, angebrochene Reihen bleiben sauber. */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  margin-bottom: 24px; background: var(--k-flaeche); border: 1px solid var(--k-linie);
  border-radius: var(--k-radius); overflow: hidden;
}
.kacheln:empty { display: none; }
.kachel { background: var(--k-flaeche); padding: 18px 20px 16px; box-shadow: 1px 1px 0 var(--k-linie); min-width: 0; }
.kachel .k-zahl { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel .k-name { font-size: var(--k-gr-klein); color: var(--k-leise); margin-top: 4px; }
.kachel.warnung .k-zahl { color: var(--k-gefahr); }
.kachel.hinweis .k-zahl { color: var(--k-achtung); }
.kachel.gut .k-zahl { color: var(--k-ok); }
/* Anklickbare Zahl (führt in die Prüfung). */
.kachel.klickbar { cursor: pointer; transition: background-color var(--k-dauer) ease-out; }
.kachel.klickbar:hover { background: var(--k-flaeche-2); }
.kachel.klickbar:focus-visible { outline: 3px solid var(--k-blau); outline-offset: -3px; border-radius: 0; }

/* ---------- Zwei-Spalten-Blöcke ---------- */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.block { background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--k-radius); padding: 20px 20px 22px; min-width: 0; }
.block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.schritte { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 14px; }
.schritte li { counter-increment: s; position: relative; padding-left: 36px; font-size: var(--k-gr-tabelle); color: var(--k-leise); }
.schritte li b { color: var(--k-tinte); font-weight: 600; }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--k-blau-weich); color: var(--k-blau-text); font-size: var(--k-gr-mini); font-weight: 700; display: grid; place-items: center; }

.aktivitaet { display: flex; flex-direction: column; }
.akt-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--k-linie); font-size: var(--k-gr-tabelle); min-width: 0; }
.akt-zeile:first-child { border-top: none; }
.akt-zeile .akt-produkt { font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.akt-zeile .akt-zeit { margin-left: auto; color: var(--k-sehr-leise); font-size: var(--k-gr-mini); white-space: nowrap; }

/* Aktions-Marken (auch im Protokoll) */
.marke-aktion { font-size: var(--k-gr-mini); font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.marke-aktion.hinzugefügt { color: var(--k-ok); background: var(--k-ok-weich); }
.marke-aktion.reaktiviert { color: var(--k-ok); background: var(--k-ok-weich); }
.marke-aktion.geändert { color: var(--k-blau-text); background: var(--k-blau-weich); }
.marke-aktion.aussortiert { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
/* Die vier Marken der Datei-Erkennung: bewusst neutral, sie beschreiben
   keinen Stoff, sondern einen Vorgang am Verzeichnis. */
.marke-aktion.erkannt { color: var(--k-leise); background: var(--k-stufe); }
.marke-aktion.bestätigt { color: var(--k-blau-text); background: var(--k-blau-weich); }
.marke-aktion.zurückgenommen { color: var(--k-achtung); background: var(--k-achtung-weich); }
.marke-aktion.verworfen { color: var(--k-leise); background: var(--k-stufe); }
.marke-aktion.unklar { color: var(--k-achtung); background: var(--k-achtung-weich); }

/* ---------- Rückgängig-Zeile (Übersicht, unter der Automatik) ---------- */
.rueckgaengig { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--k-linie); }
.rueckgaengig .rg-text { min-width: 0; }
.rueckgaengig .rg-titel { font-size: var(--k-gr-klein); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rueckgaengig .rg-neben { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); }
.rueckgaengig .knopf { margin-left: auto; }

/* ---------- Karten der Automatik (Rückfragen und Meldungen) ----------
   Sie stehen über allen Ansichten. Die Karte sagt zuerst, WAS erkannt wurde,
   dann WAS PASSIEREN WÜRDE, und erst dann kommen die Knöpfe. Solange sie da
   ist, wurde am Verzeichnis nichts verändert. Rückfrage: warm getönte Fläche
   mit feinem Rand; Fehler: roter Rand; Meldung: neutral. Kein Seitenstreifen. */
.karten { display: flex; flex-direction: column; gap: 12px; }
.karten:empty { display: none; }
.karte {
  background: var(--k-flaeche); border: 1px solid var(--k-achtung-rand);
  border-radius: var(--k-radius); padding: 18px 20px 16px;
  margin-bottom: 4px;
}
.karte.ist-meldung { border-color: var(--k-linie-stark); }
.karte.ist-fehler { border-color: var(--k-gefahr-rand); }
.karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.karte-marke { font-size: var(--k-gr-mini); font-weight: 600; padding: 2px 10px; border-radius: 999px; color: var(--k-achtung); background: var(--k-achtung-weich); }
.karte.ist-meldung .karte-marke { color: var(--k-leise); background: var(--k-stufe); }
.karte.ist-fehler .karte-marke { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
.karte-datei { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-titel { font-size: 1rem; font-weight: 650; line-height: 1.4; }
.karte-text { font-size: var(--k-gr-tabelle); color: var(--k-leise); margin-top: 6px; max-width: 75ch; }
.karte-liste { list-style: none; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.karte-liste li { font-size: var(--k-gr-tabelle); font-weight: 550; padding-left: 14px; position: relative; }
.karte-liste li::before { content: "–"; position: absolute; left: 0; color: var(--k-gefahr); }
.karte-liste li span { font-weight: 400; color: var(--k-sehr-leise); font-size: var(--k-gr-klein); }
.karte-signale { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); margin-top: 10px; line-height: 1.5; }
.karte-knoepfe { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.karte-fuss { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); margin-top: 10px; }

/* ---------- Prüfung (Ampel + Prüfpunkte + Mängelliste) ----------
   EINE Zahl oben, die alles sagt („73 %"), darunter die fünf Pflichtpunkte
   einzeln. Farblogik wie im ganzen Programm: grün = erledigt,
   orange = Empfehlung offen, rot = Pflichtangabe fehlt. */
.ampel { background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--k-radius); padding: 24px 24px 22px; margin-bottom: 16px; }
.ampel.gut { --ampel-farbe: var(--k-ok); }
.ampel.hinweis { --ampel-farbe: var(--k-achtung); }
.ampel.warnung { --ampel-farbe: var(--k-gefahr); }
.ampel-kopf { display: flex; align-items: center; gap: 20px; }
.ampel-zahl { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; flex: none; color: var(--ampel-farbe); font-variant-numeric: tabular-nums; }
.ampel-titel { font-size: var(--k-gr-zwischen); font-weight: 650; letter-spacing: -0.01em; }
.ampel-sub { font-size: var(--k-gr-tabelle); color: var(--k-leise); margin-top: 2px; }
.ampel-balken { height: 8px; border-radius: 999px; background: var(--k-stufe); margin-top: 18px; overflow: hidden; }
.ampel-balken span { display: block; height: 100%; border-radius: 999px; background: var(--ampel-farbe); transition: width 0.4s ease; }

.pruef-liste { display: flex; flex-direction: column; }
.pruef-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--k-linie); }
.pruef-zeile:first-child { border-top: none; padding-top: 2px; }
.pruef-nr { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--k-gr-mini); font-weight: 700; background: var(--k-ok-weich); color: var(--k-ok); margin-top: 1px; }
.pruef-mitte { flex: 1; min-width: 0; }
.pruef-titel { font-size: var(--k-gr-tabelle); font-weight: 600; }
.pruef-erklaerung { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); margin-top: 1px; }
.pruef-ergebnis { flex: none; font-size: var(--k-gr-mini); font-weight: 600; color: var(--k-ok); white-space: nowrap; margin-top: 3px; }
/* Offene Punkte: Pflicht ist rot (Mangel), Empfehlung orange (Hinweis). */
.pruef-zeile.offen.ist-pflicht .pruef-nr { background: var(--k-gefahr-weich); color: var(--k-gefahr); }
.pruef-zeile.offen.ist-pflicht .pruef-ergebnis { color: var(--k-gefahr); }
.pruef-zeile.offen.ist-empfehlung .pruef-nr { background: var(--k-achtung-weich); color: var(--k-achtung); }
.pruef-zeile.offen.ist-empfehlung .pruef-ergebnis { color: var(--k-achtung); }

/* Zwischenüberschrift über einer Liste: doppelt so viel Platz darüber wie darunter. */
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 40px 0 16px; }
.block-neben { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); max-width: 70ch; }

/* Marken in der Mängelliste: was bei diesem Stoff fehlt. */
.marken-reihe { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fehlt-marke { font-size: var(--k-gr-mini); font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.fehlt-marke.pflicht { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
.fehlt-marke.empfehlung { color: var(--k-achtung); background: var(--k-achtung-weich); }

/* ---------- Werkzeugleiste (Suche + Filter) und Formularfelder ---------- */
.werkzeugleiste { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.suche { position: relative; flex: 1 1 240px; min-width: 200px; }
.such-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--k-sehr-leise); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.suche input { width: 100%; min-height: var(--k-knopf-hoehe); padding: 8px 16px 8px 38px; border-radius: 999px; border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); font-size: 0.9375rem; }
.filter { min-height: var(--k-knopf-hoehe); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); color: var(--k-tinte); max-width: 220px; font-size: 0.9375rem; }
.such-taste { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--k-schrift); font-size: var(--k-gr-mini); color: var(--k-sehr-leise); background: var(--k-stufe); border-radius: 6px; padding: 1px 6px; pointer-events: none; }
.suche input::placeholder, .feld-zeile input::placeholder { color: var(--k-sehr-leise); }
.suche input:focus-visible, .filter:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 1px; border-color: var(--k-blau); border-radius: inherit; }
.suche input:focus-visible { border-radius: 999px; }
.filter:focus-visible { border-radius: 999px; }
.schalter-klein { display: inline-flex; align-items: center; gap: 8px; font-size: var(--k-gr-klein); color: var(--k-leise); padding: 8px 4px; cursor: pointer; min-height: var(--k-knopf-hoehe); }

/* ---------- Tabelle ----------
   Eine Fläche mit Haarlinien; der Kopf in normaler Schreibung (Sperrliste 16). */
.tabelle-rahmen { background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--k-radius); overflow: hidden; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--k-gr-tabelle); }
.tabelle thead th { text-align: left; font-size: var(--k-gr-mini); font-weight: 600; color: var(--k-leise); padding: 12px 14px; border-bottom: 1px solid var(--k-linie); background: var(--k-flaeche-2); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.tabelle thead th[data-sort] { cursor: pointer; user-select: none; }
.tabelle thead th[data-sort]:hover { color: var(--k-tinte); }
.tabelle tbody tr { border-top: 1px solid var(--k-linie); transition: background-color 0.1s; cursor: pointer; }
.tabelle tbody tr:first-child { border-top: none; }
.tabelle tbody tr:hover { background: var(--k-zeile-hover); }
.tabelle td { padding: 12px 14px; vertical-align: middle; }
.tabelle td.produkt-zelle { font-weight: 600; }
.zell-neben { color: var(--k-sehr-leise); font-size: var(--k-gr-mini); }
/* Lange Protokoll-Details (z. B. eine Hinweiszeile) blähen die Zeile sonst auf
   zehn Zeilen Höhe auf. Sichtbar sind zwei Zeilen; der volle Text erscheint beim
   Zeigen mit der Maus und steht vollständig im CSV-Export und auf dem Ausdruck. */
.details-kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* Protokoll: lange Pfade in Details und Dateinamen in Quelle brechen um, sonst
   schiebt die Tabelle die Spalte Quelle aus dem Rahmen (Robin, 28.09.2026). */
#ansicht-protokoll .tabelle td:nth-child(5) { max-width: 420px; }
#ansicht-protokoll .tabelle td:nth-child(6) { max-width: 200px; overflow-wrap: anywhere; }
#ansicht-protokoll .tabelle-rahmen { overflow-x: auto; }
/* CAS-Nummer und Menge nie mitten im Wert umbrechen (Prüfer G0b, Handy). */
/* CAS und Menge brechen nicht um (Klasse ohne-umbruch in app.js, unabhängig von der Spaltenfolge). */
.tabelle td.ausgelagert-zeile, tr.ist-ausgelagert td { color: var(--k-sehr-leise); }
tr.ist-ausgelagert td.produkt-zelle { text-decoration: line-through; text-decoration-color: var(--k-sehr-leise); }

/* Status- & Gefahr-Marken (normale Schreibung, kein Sperren) */
.status-marke { font-size: var(--k-gr-mini); font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.status-marke.aktiv { color: var(--k-ok); background: var(--k-ok-weich); }
.status-marke.ausgelagert { color: var(--k-leise); background: var(--k-stufe); }
.signal { font-size: var(--k-gr-mini); font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.signal.gefahr { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
.signal.achtung { color: var(--k-achtung); background: var(--k-achtung-weich); }

/* GHS-Piktogramme (rote Raute mit Kürzel) */
.ghs-reihe { display: inline-flex; gap: 5px; flex-wrap: wrap; vertical-align: middle; }
.ghs { width: 26px; height: 26px; position: relative; display: inline-grid; place-items: center; flex: none; }
.ghs::before { content: ""; position: absolute; inset: 2px; background: var(--k-flaeche); border: 1.5px solid var(--k-gefahr); transform: rotate(45deg); border-radius: 3px; }
.ghs span { position: relative; font-size: 0.5625rem; font-weight: 700; color: var(--k-gefahr); }

/* ---------- Leerzustände ---------- */
.leer { padding: 56px 20px; text-align: center; color: var(--k-leise); }
.leer h3 { font-size: 1rem; font-weight: 650; color: var(--k-tinte); margin-bottom: 6px; }
.leer p { font-size: var(--k-gr-tabelle); max-width: 46ch; margin: 0 auto; }

/* ---------- Detail-Schublade (Stoff-Fenster) ---------- */
.schublade-hinter { position: fixed; inset: 0; background: var(--k-schleier); z-index: 40; animation: einblenden 0.2s ease; }
.schublade { position: fixed; top: 0; right: 0; width: min(480px, 100vw); height: 100vh; height: 100dvh; background: var(--k-flaeche); border-left: 1px solid var(--k-linie); box-shadow: var(--k-schatten-schwebe); z-index: 41; display: flex; flex-direction: column; animation: reinschieben 0.24s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes reinschieben { from { transform: translateX(100%); } to { transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.schublade-kopf { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 72px 16px 24px; border-bottom: 1px solid var(--k-linie); }
.schublade-kopf h2 { font-size: 1.25rem; line-height: 1.25; }
.schublade-aktionen { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
/* Seit Punkt 6 stehen bis zu fünf Knöpfe im Kopf der Schublade: sie dürfen umbrechen, der Titel gibt nach, ✕ bleibt erreichbar. */
.schublade-kopf { flex-wrap: wrap; }
.schublade-kopf h2 { min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere; }
.knopf.klein { min-height: 32px; padding: 0 12px; font-size: var(--k-gr-klein); }
.schublade-kopf .schliessen { position: absolute; top: 16px; right: 16px; }
.schliessen { width: 40px; height: 40px; border-radius: 50%; color: var(--k-leise); font-size: 1rem; flex: none; transition: background-color var(--k-dauer) ease-out; }
.schliessen:hover { background: var(--k-stufe); color: var(--k-tinte); }
.schublade-inhalt { overflow-y: auto; padding: 20px 24px 40px; }
.detail-marken { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.feld-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); overflow: hidden; margin-bottom: 20px; }
.feld { background: var(--k-flaeche); padding: 10px 12px; min-width: 0; box-shadow: 0 0 0 1px var(--k-linie); }
.feld.breit { grid-column: 1 / -1; }
.feld-name { font-size: var(--k-gr-mini); color: var(--k-sehr-leise); }
.feld-wert { font-size: var(--k-gr-tabelle); margin-top: 2px; overflow-wrap: anywhere; }
.feld-wert a { color: var(--k-blau-text); }
/* Zwischentitel im Stoff-Fenster: doppelt so viel Platz darüber wie darunter. */
.detail-block-titel { font-size: var(--k-gr-klein); font-weight: 650; color: var(--k-leise); margin: 24px 0 10px; }
.hsatz { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--k-linie); font-size: var(--k-gr-tabelle); }
.hsatz:first-of-type { border-top: none; }
.hsatz code { flex: none; }
.detail-hist { display: flex; flex-direction: column; }
.detail-hist .akt-zeile { font-size: var(--k-gr-klein); }

/* ---------- Hilfe: Lesetext ohne Kasten, wie der Ratgeber der Website ---------- */
.hilfe-text { max-width: 68ch; }
.hilfe-text h2 { margin: 40px 0 10px; font-size: 1.25rem; }
.hilfe-text h2:first-child { margin-top: 0; }
.hilfe-text h3 { margin: 24px 0 8px; font-size: 1rem; font-weight: 650; }
.hilfe-text p { color: var(--k-leise); font-size: 1rem; margin-bottom: 10px; text-wrap: pretty; }
.hilfe-text b { color: var(--k-tinte); }
.liste { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.liste li { padding-left: 18px; position: relative; color: var(--k-leise); font-size: 1rem; }
.liste li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 6px; height: 1px; background: var(--k-sehr-leise); }
.spalten-liste { font-size: var(--k-gr-tabelle); color: var(--k-tinte); background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); padding: 12px 16px; line-height: 2; }
.hinweis-block { background: var(--k-achtung-weich); border: 1px solid var(--k-achtung-rand); border-radius: var(--k-radius-klein); padding: 12px 16px; margin: 16px 0; color: var(--k-tinte) !important; }
.fuss-info { font-size: var(--k-gr-klein); color: var(--k-sehr-leise) !important; margin-top: 20px; }

/* ---------- Fenster (Willkommen, Bestätigen, Zuordnen) ---------- */
.modal-hinter { position: fixed; inset: 0; background: var(--k-schleier); z-index: 60; display: grid; place-items: center; padding: 16px; animation: einblenden 0.2s ease; overflow-y: auto; }
.modal { background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: 20px; padding: 28px 30px 24px; max-width: 480px; width: 100%; box-shadow: var(--k-schatten-schwebe); animation: rein 0.3s ease-out; }
.modal h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 12px; }
.modal p { color: var(--k-leise); font-size: 0.9375rem; margin-bottom: 12px; }
.modal .hinweis-block { color: var(--k-tinte); }

/* ---------- Meldung unten (Toast) ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--k-tinte); color: var(--k-grund); padding: 12px 20px; border-radius: 999px; font-size: var(--k-gr-tabelle); font-weight: 550; z-index: 70; box-shadow: var(--k-schatten-schwebe); animation: rein 0.25s ease-out; }

/* ---------- Schmale Fenster und Handy ----------
   Oben eine Zeile mit Marke und Thema-Schalter, darunter die Ansichten als
   waagerecht schiebbare Leiste. Knöpfe und Felder mindestens 44 px hoch,
   Eingaben 16 px, damit das Handy nicht heranzoomt. */
@media (max-width: 820px) {
  :root { --k-knopf-hoehe: 44px; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .seite {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marke fuss" "nav nav";
    align-items: center; gap: 8px 12px; padding: 10px 16px 10px; border-right: none; border-bottom: 1px solid var(--k-linie);
  }
  .marke { grid-area: marke; padding: 0; }
  .marke-zeichen, .marke-zeichen svg { width: 28px; height: 28px; }
  .marke-sub { display: none; }
  .nav { grid-area: nav; flex-direction: row; overflow-x: auto; gap: 4px; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-zeile { width: auto; flex: none; min-height: 44px; padding: 8px 14px; white-space: nowrap; }
  .nav-zahl { display: none; }
  .nav-aktion { margin-top: 0; }
  .nav-aktion::before { display: none; }
  .seite-fuss { grid-area: fuss; margin: 0; padding: 0; border-top: 0; }
  .waechter { display: none; }
  .thema-schalter { width: 44px; height: 44px; }
  .haupt { padding: 24px 16px 48px; }
  .kopf { margin-bottom: 24px; }
  .zwei-spalten { grid-template-columns: 1fr; }
  .filter { max-width: none; flex: 1 1 160px; font-size: 1rem; }
  .suche input, .nachfrage-eingabe, .feld-zeile input, .feld-zeile select, .korrektur-zeile input, .angabe-mail textarea { font-size: 1rem; }
  .knopf.klein, .zeile-aktionen .knopf, #nachfrage-block .nachfrage-beispiele .link-knopf { min-height: 44px; }
  .link-knopf { display: inline-flex; align-items: center; min-height: 44px; }
  .such-taste { display: none; }
  .schublade-kopf { padding: 18px 68px 14px 16px; }
  .schublade-kopf .schliessen { top: 12px; right: 12px; width: 44px; height: 44px; }
  .schublade-aktionen { justify-content: flex-start; }
  .schublade-inhalt { padding: 16px 16px 40px; }
  .modal { padding: 24px 20px 20px; }
}
@media (max-width: 480px) {
  .kopf-aktionen, #ansicht-automatik .kopf-aktionen { justify-content: flex-start; }
  .nachfrage-zeile { flex-wrap: wrap; }
  .nachfrage-knopf { flex: 1 1 100%; }
  #nachfrage-block { padding: 20px 16px; }
  .bearbeiten-form .feld-zeile, .feld-zeile { grid-template-columns: 1fr; gap: 4px; }
  .bearbeiten-form .gesperrt-hinweis { margin-left: 0; }
  .tabelle-rahmen { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ansicht.aktiv, .schublade, .schublade-hinter, .modal, .modal-hinter, .toast { animation: none; }
  .knopf, .nav-zeile, .thema-schalter { transition: none; }
}

/* ---------- Automatik (Monatsblick) ----------
   Farblogik wie überall: Stufe 1 grün (sicher), Stufe 2 orange (unsicher),
   Stufe 3 rot (offen), Lücke grau. Die Marken tragen immer auch Text, damit
   niemand die Farbe deuten muss. */
/* Der Kopf trägt hier vier Bedien-Elemente (Monat, Drucken, Anfragen,
   Hochladen). Wird das Fenster schmal, rutschen sie in die nächste Zeile,
   statt die Überschrift zu einem Strich zusammenzuquetschen. */
#ansicht-automatik .kopf { flex-wrap: wrap; align-items: flex-end; }
#ansicht-automatik .kopf > div:first-child { flex: 1 1 260px; min-width: 240px; }
#ansicht-automatik .kopf-aktionen { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }

.stand-zeile { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 0.8125rem; color: var(--k-leise); background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: 999px; padding: 8px 18px; margin-bottom: 16px; }
.stand-zeile .stand-teil { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stand-zeile .stand-teil b { color: var(--k-tinte); font-weight: 600; }
.stand-zeile .stand-teil.ist-gefahr { color: var(--k-gefahr); font-weight: 600; }
.stand-zeile .stand-teil.ist-ok { color: var(--k-ok); }
.stand-zeile .stand-teil.ist-achtung { color: var(--k-achtung); }
.stand-zeile .punkt { width: 7px; height: 7px; }
.stand-zeile .punkt.rot { background: var(--k-gefahr); }

.ablage-flaeche { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 40px 24px; border: 1.5px dashed var(--k-linie-stark); border-radius: var(--k-radius); background: var(--k-flaeche-2); color: var(--k-leise); font-size: 0.9375rem; text-align: left; cursor: pointer; margin-bottom: 16px; transition: border-color var(--k-dauer) ease-out, background-color var(--k-dauer) ease-out; }
.ablage-flaeche b { color: var(--k-tinte); font-weight: 600; }
.ablage-flaeche:hover, .ablage-flaeche.ist-drueber { border-color: var(--k-blau); background: var(--k-blau-weich); }
.ablage-flaeche:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 2px; border-radius: var(--k-radius); }
.ablage-icon { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--k-blau-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Fortschrittskarte eines Hochlade-Vorgangs. */
.fortschritt-schritte { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fortschritt-schritt { font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; color: var(--k-leise); background: var(--k-stufe); }
.fortschritt-schritt.ist-fertig { color: var(--k-ok); background: var(--k-ok-weich); }
.fortschritt-schritt.ist-aktiv { color: var(--k-blau-text); background: var(--k-blau-weich); }
.fortschritt-schritt.ist-fehler { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
#ansicht-automatik .karten { margin-bottom: 16px; }
#ansicht-automatik .block { margin-bottom: 16px; }
/* Keine Karte in der Karte (Sperrliste 2): Tabellen und Zahlen in einer Fläche verlieren ihren eigenen Rahmen. */
.block .tabelle-rahmen { border: 0; border-top: 1px solid var(--k-linie); border-radius: 0; background: transparent; margin: 0 -20px -22px; }
.block .tabelle-rahmen .tabelle thead th { background: transparent; }
.block .tabelle td:first-child, .block .tabelle th:first-child { padding-left: 20px; }
.block .tabelle td:last-child, .block .tabelle th:last-child { padding-right: 20px; }
.block .knopf-reihe + .tabelle-rahmen, .block .kacheln + .knopf-reihe { margin-top: 16px; }
.block .knopf-reihe { margin-bottom: 16px; }
.block .kacheln { border: 0; border-radius: 0; background: transparent; gap: 8px 24px; overflow: visible; }
.block .kachel { background: transparent; box-shadow: none; padding: 0; }
.block > .zell-neben { margin-top: 12px !important; }
#ansicht-automatik .block.ist-ueberfaellig { border-color: var(--k-gefahr-rand); }
#ansicht-automatik .block.ist-ueberfaellig h2 { color: var(--k-gefahr); }
.kachel.ist-stufe-1 .k-zahl { color: var(--k-ok); }
.kachel.ist-stufe-2 .k-zahl { color: var(--k-achtung); }
.kachel.ist-stufe-3 .k-zahl { color: var(--k-gefahr); }
.kachel.ist-luecke .k-zahl { color: var(--k-leise); }

/* Die Automatik-Kachel in der Übersicht: eine breite Kachel, darin die vier
   Zahlen des laufenden Monats. Optik wie jede andere Kachel, ein blauer
   Akzent, hell und dunkel gleich. */
.kacheln-automatik { grid-template-columns: 1fr; }
.kachel-automatik { display: block; }
.ka-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ka-titel { font-size: 1rem; font-weight: 650; color: var(--k-tinte); }
.ka-marke { font-size: 0.75rem; font-weight: 600; color: var(--k-blau-text); background: var(--k-blau-weich); border-radius: 999px; padding: 2px 10px; }
.ka-neben { font-size: 0.75rem; color: var(--k-leise); margin-left: auto; text-align: right; }
.ka-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.ka-zahl .k-zahl { font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ka-zahl.ist-stufe-1 .k-zahl { color: var(--k-ok); }
.ka-zahl.ist-stufe-2 .k-zahl { color: var(--k-achtung); }
.ka-zahl.ist-stufe-3 .k-zahl { color: var(--k-gefahr); }
.ka-zahl.ist-luecke .k-zahl { color: var(--k-leise); }
.ka-zahl .k-name { font-size: 0.8125rem; color: var(--k-leise); margin-top: 3px; }

/* Beleg-Ansicht, Stufe 3: die zwei Lesarten nebeneinander. Links der
   Regelleser, rechts der KI-Leser, darunter der Grund des Richters. */
.zwei-lesarten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.lesart { border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); padding: 8px 10px; background: var(--k-flaeche-2); }
.lesart.ist-regel { border-color: var(--k-blau-rand); }
.lesart.ist-ki { border-color: var(--k-achtung-rand); }
.lesart-kopf { font-size: 0.75rem; font-weight: 650; color: var(--k-leise); margin-bottom: 3px; }
.lesart-wert { font-size: 0.8125rem; font-weight: 600; word-break: break-word; }
.lesart-neben { font-size: 0.75rem; color: var(--k-leise); margin-top: 2px; }
.lesart-zitat { font-size: 0.75rem; color: var(--k-leise); margin-top: 4px; font-style: italic; word-break: break-word; }
.lesart-grund { font-size: 0.75rem; color: var(--k-gefahr); margin-top: 2px; }
@media (max-width: 900px) { .zwei-lesarten { grid-template-columns: 1fr; } }

/* Die Stufen-Marke: kleine Fläche mit Text. */
.stufe-marke { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.stufe-marke.s1 { color: var(--k-ok); background: var(--k-ok-weich); }
.stufe-marke.s2 { color: var(--k-achtung); background: var(--k-achtung-weich); }
.stufe-marke.s3 { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
.stufe-marke.luecke { color: var(--k-leise); background: var(--k-stufe); }
.stufe-marke.status { color: var(--k-blau-text); background: var(--k-blau-weich); }

/* Zeilen der Listen: Knöpfe rechts, Zitat kursiv und gekürzt. */
.zeile-aktionen { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.zeile-aktionen .knopf { padding: 4px 11px; font-size: 0.75rem; }
.zitat { font-style: italic; color: var(--k-leise); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.zitat-seite { color: var(--k-sehr-leise); font-size: 0.75rem; font-style: normal; white-space: nowrap; }
.wert-code { font-family: var(--k-mono); font-size: 0.8125rem; }
#ansicht-automatik .tabelle tbody tr { cursor: default; }
#ansicht-automatik .tabelle tbody tr:hover { background: none; }
.korrektur-zeile { display: flex; gap: 6px; align-items: center; }
.korrektur-zeile input { min-height: 32px; padding: 4px 10px; border-radius: var(--k-radius-klein); border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); min-width: 120px; }
.korrektur-zeile input:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 1px; border-color: var(--k-blau); border-radius: var(--k-radius-klein); }
.offen-punkte { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.offen-punkte li { font-size: 0.8125rem; color: var(--k-leise); padding-left: 12px; position: relative; }
.offen-punkte li::before { content: "–"; position: absolute; left: 0; color: var(--k-gefahr); }
.automatik-fuss { font-size: 0.8125rem; color: var(--k-sehr-leise); margin-top: 6px; }

/* Trefferliste im Zuordnungs-Dialog. */
.modal.modal-breit { max-width: 560px; width: 100%; }
/* Eine beschriftete Zeile im Fenster „Neuen Stoff anlegen". */
.feld-zeile { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.feld-zeile > span { font-size: 0.8125rem; color: var(--k-leise); }
.feld-zeile input, .feld-zeile select { width: 100%; min-height: var(--k-knopf-hoehe); padding: 8px 12px; border-radius: var(--k-radius-klein); border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); color: var(--k-tinte); font: inherit; font-size: 0.875rem; }
.feld-zeile input:focus-visible, .feld-zeile select:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 1px; border-color: var(--k-blau); border-radius: var(--k-radius-klein); }
.modal .suche { margin: 8px 0 10px; }
.zuordnung-treffer { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); }
.zuordnung-treffer:empty { display: none; }
.treffer { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-top: 1px solid var(--k-linie); font-size: 0.875rem; }
.treffer:first-child { border-top: none; }
.treffer:hover, .treffer:focus-visible { background: var(--k-blau-weich); outline: none; }
.treffer .treffer-nr { font-family: var(--k-mono); font-size: 0.8125rem; color: var(--k-blau-text); min-width: 44px; }
.treffer .treffer-name { font-weight: 550; }
.treffer .treffer-neben { color: var(--k-sehr-leise); font-size: 0.75rem; margin-left: auto; text-align: right; }
.treffer-hinweis { padding: 12px; font-size: 0.8125rem; color: var(--k-sehr-leise); }

/* ---------- Beleg-Ansicht (Vollbild) ----------
   Links das PDF und der Seitentext mit Markierung, rechts die drei Blöcke.
   Sie liegt über allem — man ist hier, um EINE Sache zu prüfen. */
.beleg { position: fixed; inset: 0; z-index: 50; background: var(--k-grund); display: flex; flex-direction: column; animation: einblenden 0.2s ease; }
.beleg-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 24px 12px; border-bottom: 1px solid var(--k-linie); background: var(--k-flaeche); }
.beleg-oben { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.beleg-nr { font-family: var(--k-mono); font-size: 0.8125rem; color: var(--k-blau-text); font-weight: 600; }
.beleg-titel h2 { font-size: 1.25rem; }
.beleg-zusammenfassung { font-size: 0.875rem; color: var(--k-leise); margin-top: 3px; }
.beleg-aktionen { display: flex; align-items: center; gap: 8px; flex: none; }
.beleg-koerper { display: grid; grid-template-columns: minmax(360px, 5fr) minmax(380px, 6fr); gap: 0; flex: 1; min-height: 0; }
.beleg-links { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--k-linie); background: var(--k-flaeche-2); }
.beleg-seitenwahl { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--k-linie); font-size: 0.8125rem; }
.beleg-seitenwahl #beleg-seite { font-weight: 600; min-width: 90px; text-align: center; }
.beleg-seitenwahl .zell-neben { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-pdf { flex: 1 1 55%; width: 100%; border: none; background: var(--k-pdf-grund); min-height: 240px; }
.beleg-text { flex: 1 1 45%; min-height: 160px; display: flex; flex-direction: column; padding: 8px 16px 14px; border-top: 1px solid var(--k-linie); }
.beleg-text .detail-block-titel { margin: 4px 0 6px; }
.beleg-seitentext { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--k-mono); font-size: 0.75rem; line-height: 1.5; color: var(--k-leise); background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); padding: 10px 12px; }
.beleg-seitentext mark { background: var(--k-achtung-weich); color: var(--k-tinte); outline: 2px solid var(--k-achtung); border-radius: 2px; }
.beleg-rechts { overflow-y: auto; padding: 8px 24px 40px; }
.beleg-rechts .detail-block-titel { margin: 18px 0 8px; }
.beleg-rechts .detail-block-titel:first-child { margin-top: 10px; }
.beleg-tabelle-rahmen { box-shadow: none; }
.beleg-felder { font-size: 0.8125rem; }
.beleg-felder td, .beleg-felder th { padding: 8px 10px; }
.beleg-felder tbody tr { cursor: pointer; }
.beleg-felder tbody tr.ist-gewaehlt { background: var(--k-blau-weich); }
.beleg-felder .zitat { max-width: 260px; -webkit-line-clamp: 1; line-clamp: 1; }
.beleg-felder .feld-name-zelle { font-weight: 550; white-space: nowrap; }
/* Die Zitat-Spalte darf die Knöpfe rechts nicht aus dem Rahmen schieben: Zitat und
   Begründung umbrechen in fester Breite, die Knopf-Spalte bleibt immer sichtbar
   (Robin, 28.09.2026: „ganz rechts ist etwas abgeschnitten"). */
.beleg-felder .feld-name-zelle { white-space: normal; min-width: 110px; }
.beleg-felder td:nth-child(2) { max-width: 200px; overflow-wrap: anywhere; }
.beleg-felder td:nth-child(6) { max-width: 260px; }
.beleg-felder td:nth-child(6) .zell-neben { white-space: normal; word-break: break-word; }
.beleg-felder td:nth-child(6) .zitat { max-width: 240px; }
.beleg-felder .zeile-aktionen { flex-direction: column; align-items: stretch; gap: 4px; }
/* Wird die Tabelle breiter als der Platz, scrollt sie seitlich, und die Knopf-Spalte
   bleibt rechts am Rand kleben, damit „bestätigen" und „korrigieren" nie verschwinden. */
.beleg-tabelle-rahmen { overflow-x: auto; }
.beleg-felder td.nur-schirm, .beleg-felder th:last-child { position: sticky; right: 0; background: var(--k-flaeche); box-shadow: -1px 0 0 var(--k-linie); }
.beleg-felder tbody tr.ist-gewaehlt td.nur-schirm { background: var(--k-flaeche); }
.beleg-ba-texte { display: flex; flex-direction: column; gap: 1px; background: var(--k-linie); border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); overflow: hidden; }
.ba-text { background: var(--k-flaeche); padding: 10px 12px; cursor: pointer; }
.ba-text:hover { background: var(--k-blau-weich); }
.ba-text .ba-kopf { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--k-sehr-leise); }
.ba-text .ba-wert { font-size: 0.875rem; margin-top: 3px; }
.ba-text .ba-zitat { font-size: 0.75rem; color: var(--k-sehr-leise); font-style: italic; margin-top: 3px; }
.beleg-excel .feld-gitter { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 0; }
.beleg-excel .feld.ist-automatik { background: var(--k-blau-weich); }
.beleg-excel .feld.ist-automatik .feld-name::after { content: " · Automatik"; color: var(--k-blau-text); text-transform: none; letter-spacing: 0; }
.beleg-excel .excel-hinweis { font-size: 0.8125rem; color: var(--k-sehr-leise); padding: 12px 14px; border: 1px dashed var(--k-linie-stark); border-radius: var(--k-radius-klein); }
.beleg-leer { font-size: 0.8125rem; color: var(--k-sehr-leise); padding: 12px 14px; }
@media (max-width: 980px) {
  .beleg-koerper { grid-template-columns: 1fr; overflow-y: auto; }
  .beleg-links { border-right: none; border-bottom: 1px solid var(--k-linie); min-height: 70vh; }
  .beleg-rechts { overflow: visible; }
}

/* ---------- Druck / PDF ----------
   Grundgedanke: Auf Papier soll ein amtstaugliches DOKUMENT entstehen, keine
   abfotografierte Bildschirmseite. Dafür gibt es drei Bausteine, die nur im
   Druck auftauchen (Klasse "nur-druck"): einen Dokument-Kopf (Titel, Datum,
   Anzahl), eine Zeile mit der gerade eingestellten Auswahl und einen Fuß mit
   Unterschriftszeilen und Rechts-Hinweis. Umgekehrt verschwinden Navigation,
   Suchfeld und Knöpfe. Wichtig: Das Papier ist IMMER weiß mit schwarzer
   Schrift — auch wenn am Bildschirm der Dunkelmodus läuft. */

/* Diese Bausteine sind am Bildschirm unsichtbar und nur im Druck da. */
.nur-druck { display: none; }
/* Spalten, die nur auf dem Papier stehen: H-Sätze, Warnzeichen, Datenblatt.
   Damit ist der Ausdruck ein vollständiges Verzeichnis mit allen fünf
   Pflichtangaben nach § 6 Abs. 12 GefStoffV, ohne die Bildschirmtabelle zu überladen. */
.druck-spalte { display: none; }
.nr-zelle { white-space: nowrap; color: var(--k-leise); font-variant-numeric: tabular-nums; }
.nur-druck-inline { display: none; }

@media print {

  /* 1) Farben für Papier: alle Tokens auf schwarz/weiß umstellen, sonst
        druckt der Dunkelmodus weiße Schrift auf weißes Papier (leeres Blatt).
        Papier ist die eine Ausnahme von „kein reines Schwarz und Weiß“. */
  :root, html[data-theme="dunkel"], html[data-theme="hell"] {
    color-scheme: light;
    --k-grund: #ffffff; --k-flaeche: #ffffff; --k-flaeche-2: #ffffff; --k-stufe: #ffffff; --k-gewaehlt: #ffffff;
    --k-tinte: #000000; --k-leise: #2b2b2b; --k-sehr-leise: #4a4a4a;
    --k-linie: #9a9a9a; --k-linie-stark: #6a6a6a;
    --k-blau: #000000; --k-blau-text: #000000; --k-auf-blau: #000000; --k-blau-weich: transparent; --k-blau-rand: #6a6a6a;
    --k-gefahr: #9c0011; --k-gefahr-weich: transparent; --k-gefahr-rand: #9c0011; --k-auf-gefahr: #ffffff;
    --k-achtung: #6b4000; --k-achtung-weich: transparent; --k-achtung-rand: #6b4000;
    --k-ok: #14562f; --k-ok-weich: transparent;
    --k-schatten-schwebe: none;
  }

  /* 2) Seitenformat: A4 hochkant mit ruhigem Rand. */
  @page { size: A4 portrait; margin: 14mm 12mm 15mm; }

  html, body { height: auto; background: #fff; }
  body { font-size: 10pt; line-height: 1.4; color: #000; }

  /* 3) Alles Bedienbare raus — es gehört nicht auf Papier. */
  .seite, .werkzeugleiste, .kopf-aktionen, .toast, .schublade-hinter,
  .modal-hinter, .schliessen, .schublade-aktionen, .knopf-reihe,
  .link-knopf, .block-kopf .link-knopf,
  /* Rückfragen und der Rückgängig-Knopf sind Bedienung, kein Dokument. */
  .karten, .rueckgaengig { display: none !important; }

  .app { display: block; height: auto; }
  .haupt { overflow: visible; padding: 0; }
  .ansicht { display: none !important; max-width: none; margin: 0; }
  .ansicht.aktiv { display: block !important; animation: none; }

  /* 4) Die Druck-Bausteine einschalten. */
  .nur-druck { display: block; }
  .druck-spalte { display: table-cell; }
  #tabelle { font-size: 8pt; }
  #tabelle td, #tabelle th { padding: 1.2mm 1.4mm; }
  .nur-druck-inline { display: inline; }
  .am-schirm { display: none; }

  /* Der Bildschirm-Kopf (großes "Kataster") entfällt — der Dokument-Kopf
     darunter sagt dasselbe, nur amtlich. */
  .kopf { display: none; }

  /* 5) Dokument-Kopf. */
  .druck-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14pt; padding-bottom: 6pt; margin-bottom: 9pt;
    border-bottom: 1pt solid #000;
  }
  .dk-marke { display: flex; align-items: center; gap: 8pt; color: #000; min-width: 0; }
  .dk-titel { font-size: 16pt; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
  .dk-untertitel { font-size: 8.5pt; color: #2b2b2b; margin-top: 1pt; }
  /* Rechter Block darf umbrechen (lange Abteilungsnamen sollen nicht über den
     Rand hinauslaufen) und höchstens 45 % der Breite belegen. */
  .dk-meta { text-align: right; font-size: 8.5pt; color: #2b2b2b; line-height: 1.5; max-width: 45%; flex: none; }
  .dk-meta b { color: #000; font-weight: 600; }

  /* Zeile „Auswahl: …" — macht nachvollziehbar, was gedruckt wurde. */
  .druck-auswahl {
    font-size: 8.5pt; color: #2b2b2b; margin-bottom: 8pt;
    padding: 4pt 6pt; border: 0.5pt solid #9a9a9a;
  }
  .druck-auswahl b { color: #000; font-weight: 600; }
  .druck-auswahl:empty { display: none; }

  /* 6) Tabellen: Kopfzeile wiederholt sich auf jeder Seite, Zeilen brechen nicht. */
  .tabelle-rahmen { box-shadow: none; border: none; border-radius: 0; overflow: visible; background: none; }
  .tabelle { font-size: 8.5pt; width: 100%; }
  .tabelle thead { display: table-header-group; }
  .tabelle tfoot { display: table-footer-group; }
  .tabelle thead th {
    position: static; background: none; color: #000; font-size: 7pt;
    padding: 3pt 4pt; border-bottom: 0.8pt solid #000; letter-spacing: 0.04em;
  }
  .tabelle tbody tr { break-inside: avoid; page-break-inside: avoid; border-top: 0.4pt solid #9a9a9a; cursor: auto; }
  .tabelle tbody tr:hover { background: none; }
  .tabelle td { padding: 3pt 4pt; vertical-align: top; }
  .zell-neben { color: #4a4a4a; font-size: 7.5pt; }
  .details-kurz { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  tr.ist-ausgelagert td { color: #4a4a4a; }

  /* 7) Marken (Gefahr, Status, Aktion) ohne Farbfläche zeichnen — Hintergründe
        druckt der Drucker oft nicht mit, Rahmen und Schrift immer. */
  .signal, .status-marke, .marke-aktion {
    background: none !important; border: 0.5pt solid currentColor;
    border-radius: 2pt; padding: 0 3pt; font-size: 7pt; font-weight: 600;
  }
  .signal.gefahr { color: var(--k-gefahr); font-weight: 700; }
  .signal.achtung { color: var(--k-achtung); }
  .status-marke.ausgelagert { color: #4a4a4a; }

  /* GHS-Rauten: nur Umriss, damit sie auch schwarz-weiß erkennbar bleiben. */
  .ghs { width: 15pt; height: 15pt; }
  .ghs::before { background: none; border: 0.8pt solid var(--k-gefahr); inset: 1pt; }
  .ghs span { font-size: 5.5pt; color: var(--k-gefahr); }

  /* 8) Dokument-Fuß: Unterschriftszeilen + Rechts-Hinweis, nie umbrechen. */
  .druck-fuss { margin-top: 10pt; padding-top: 6pt; border-top: 0.8pt solid #000; break-inside: avoid; page-break-inside: avoid; }
  /* Unterschriftszeilen wie auf einem Formular: freier Platz, darunter die
     Linie, darunter klein die Beschriftung. */
  .df-zeilen { display: flex; gap: 18pt; margin: 18pt 0 8pt; }
  .df-zeile { flex: 1; border-top: 0.5pt solid #000; padding-top: 2pt; }
  .df-zeile span { font-size: 7pt; color: #4a4a4a; display: block; }
  .df-hinweis { font-size: 7.5pt; color: #2b2b2b; line-height: 1.45; }
  .df-hinweis b { color: #000; font-weight: 600; }

  /* 9) Einzelner Stoff („Datenblatt"): Ist die Schublade offen, wird NUR sie
        gedruckt — als eigenes Blatt, nicht als Schublade am Rand. */
  body.stoff-offen .haupt { display: none !important; }
  body.stoff-offen .schublade {
    position: static; width: auto; height: auto; max-height: none;
    border: none; box-shadow: none; display: block; animation: none; overflow: visible;
  }
  body:not(.stoff-offen) .schublade { display: none !important; }
  .schublade-kopf { padding: 0 0 5pt; border-bottom: 0.5pt solid #9a9a9a; margin-bottom: 8pt; }
  .schublade-kopf h2 { font-size: 14pt; }
  .schublade-inhalt { overflow: visible; padding: 0; }
  .detail-marken { margin-bottom: 9pt; }

  /* Feld-Gitter: am Bildschirm entstehen die Linien durch Lücken im
     Hintergrund — auf Papier braucht es echte Rahmen. */
  .feld-gitter { background: none; gap: 0; border: 0.5pt solid #9a9a9a; border-radius: 0; margin-bottom: 10pt; }
  .feld { border-right: 0.4pt solid #9a9a9a; border-bottom: 0.4pt solid #9a9a9a; padding: 4pt 6pt; break-inside: avoid; }
  .feld-name { font-size: 6.5pt; color: #4a4a4a; }
  .feld-wert { font-size: 9pt; }
  .feld-wert a { color: #000; text-decoration: none; }
  .detail-block-titel { font-size: 8pt; margin: 10pt 0 4pt; color: #000; }
  .hsatz { font-size: 8.5pt; padding: 2.5pt 0; border-top: 0.4pt solid #9a9a9a; break-inside: avoid; }
  .detail-hist .akt-zeile { font-size: 8pt; padding: 2.5pt 0; }

  /* 10) Übersicht (falls sie gedruckt wird): Kacheln und Blöcke mit Rahmen. */
  .kachel, .block { border: 0.5pt solid #9a9a9a; box-shadow: none; border-radius: 0; break-inside: avoid; }
  .kachel .k-zahl { font-size: 18pt; }
  .kachel.warnung .k-zahl, .kachel.hinweis .k-zahl { color: #000; }
  .zwei-spalten { gap: 8pt; }
  .akt-zeile { border-top: 0.4pt solid #9a9a9a; padding: 3pt 0; font-size: 8.5pt; }

  /* 10b) Prüfbericht: Ampel als Zahl (der farbige Balken würde auf Papier
         fehlen, weil Drucker Hintergründe standardmäßig weglassen — deshalb
         verschwindet er und die Zahl trägt die Aussage). */
  .ampel { border: 0.5pt solid #9a9a9a; box-shadow: none; border-radius: 0; padding: 6pt 8pt; margin-bottom: 9pt; break-inside: avoid; }
  .ampel-balken { display: none; }
  .ampel-kopf { gap: 12pt; }
  .ampel-zahl { font-size: 26pt; }
  .ampel-titel { font-size: 11pt; }
  .ampel-sub { font-size: 8.5pt; }

  .pruef-zeile { padding: 3pt 0; border-top: 0.4pt solid #9a9a9a; break-inside: avoid; }
  .pruef-nr { background: none !important; border: 0.5pt solid currentColor; width: 12pt; height: 12pt; font-size: 6.5pt; }
  .pruef-titel { font-size: 8.5pt; }
  .pruef-erklaerung { font-size: 7pt; }
  .pruef-ergebnis { font-size: 7.5pt; }

  /* Zwischen-Überschrift „Was noch fehlt" bleibt, der Haken daneben nicht. */
  .abschnitt-kopf { margin: 10pt 0 5pt; }
  .abschnitt-kopf h2 { font-size: 11pt; }
  .abschnitt-kopf .schalter-klein { display: none !important; }
  .block-neben { font-size: 7pt; }

  /* Fehlt-Marken wie alle Marken: Rahmen statt Farbfläche. */
  .fehlt-marke { background: none !important; border: 0.5pt solid currentColor; border-radius: 2pt; padding: 0 3pt; font-size: 7pt; }

  /* 11) Hilfe-Seite bleibt lesbar, nur ohne Kasten-Optik. */
  .hilfe-text { border: none; box-shadow: none; padding: 0; max-width: none; }
  .hinweis-block { border-left: 2pt solid #000; background: none; padding: 5pt 7pt; }
  code { background: none; border: 0.4pt solid #9a9a9a; }
  .spalten-liste { border: 0.5pt solid #9a9a9a; line-height: 1.6; }

  /* Leerer Bestand: der Hinweis soll auch auf Papier stehen (statt leerem Blatt). */
  .leer { padding: 14pt 0; text-align: left; }

  /* 12) Monatsblick der Automatik: Bedienung raus, Zahlen und Listen bleiben. */
  .ablage-flaeche, .fortschritt-karten, #fortschritt-karten, .zeile-aktionen, .nur-schirm, .beleg, #zuordnung, #kachel-automatik { display: none !important; }
  .stand-zeile { border: 0.5pt solid #9a9a9a; border-radius: 0; padding: 4pt 6pt; font-size: 8pt; margin-bottom: 8pt; }
  .stand-zeile .punkt { display: none; }
  .stufe-marke, .fortschritt-schritt { background: none !important; border: 0.5pt solid currentColor; border-radius: 2pt; padding: 0 3pt; font-size: 7pt; }
  .kachel.ist-stufe-1 .k-zahl, .kachel.ist-stufe-2 .k-zahl, .kachel.ist-stufe-3 .k-zahl { color: #000; }
  #ansicht-automatik .block { padding: 6pt 8pt; margin-bottom: 8pt; }
  #ansicht-automatik .block.ist-ueberfaellig { border-left: 2pt solid #000; }
  .zitat { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; font-size: 8pt; }
  .automatik-fuss { display: none; }

  /* Keine Bewegung im Druck. */
  * { animation: none !important; transition: none !important; }
}

/* Nachfrage: Eingabezeile mit Knopf, darunter Beispielfragen als Links. */
/* Der Block soll als Eingabe erkennbar sein: großes Feld mit Lupe, Beispiele als Pillen. */
#nachfrage-block { padding: 24px 24px 22px; }
.nachfrage-kopf { margin-bottom: 14px; }
.nachfrage-kopf h2 { font-size: 1.25rem; margin: 0 0 4px; }
.nachfrage-unter { margin: 0; font-size: 0.8125rem; color: var(--k-leise); max-width: 70ch; line-height: 1.45; }
.nachfrage-zeile { display: flex; gap: 10px; margin: 0 0 12px; }
.nachfrage-feld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; border-radius: 999px; background: var(--k-flaeche-2); border: 1px solid var(--k-linie-stark); transition: border-color var(--k-dauer) ease-out; }
.nachfrage-feld:focus-within { border-color: var(--k-blau); outline: 3px solid var(--k-blau); outline-offset: 1px; }
.nachfrage-lupe { flex: none; color: var(--k-sehr-leise); }
.nachfrage-eingabe { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; color: var(--k-tinte); }
.nachfrage-eingabe:focus-visible { outline: none; }
.nachfrage-eingabe::placeholder { color: var(--k-sehr-leise); }
.nachfrage-knopf { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.nachfrage-beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.nachfrage-beispiele::before { content: "Zum Beispiel:"; font-size: 0.8125rem; color: var(--k-sehr-leise); margin-right: 2px; }
.nachfrage-beispiele .link-knopf { font-size: 0.8125rem; font-weight: 500; min-height: 32px; padding: 4px 14px; border-radius: 999px; background: var(--k-stufe); color: var(--k-tinte); transition: background-color var(--k-dauer) ease-out, color var(--k-dauer) ease-out; }
.nachfrage-beispiele .link-knopf:hover { background: var(--k-blau-weich); color: var(--k-blau-text); text-decoration: none; }

/* Hinweis im Beleg-Kopf, sobald ein Mensch den Stoff freigegeben hat. */
.beleg-freigabe { align-self: center; font-size: 0.8125rem; font-weight: 600; color: var(--k-ok); padding: 0 6px; }

/* ---------- Versionen, Änderungen, Postausgang (Punkt 8, 02.10.2026) ---------- */
.kacheln-aenderungen { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kachel.ist-gefaehrlicher .k-zahl { color: var(--k-gefahr); }
.kachel.ist-ruhig .k-zahl { color: var(--k-ok); }
.kachel .k-neben { font-size: 0.75rem; color: var(--k-leise); margin-top: 6px; }
.aenderung-saetze { list-style: none; display: flex; flex-direction: column; gap: 3px; margin: 2px 0 4px; }
.aenderung-saetze li { font-size: 0.8125rem; padding-left: 12px; position: relative; }
.aenderung-saetze li::before { content: "–"; position: absolute; left: 0; color: var(--k-sehr-leise); }
.aenderung-saetze li.ist-gef { color: var(--k-gefahr); font-weight: 600; }
.aenderung-saetze li.ist-gef::before { color: var(--k-gefahr); }
.aenderung-saetze li.ist-unklar { color: var(--k-achtung); }
.aenderung-marke { display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.aenderung-marke.gef { background: var(--k-gefahr); color: var(--k-auf-gefahr); }
.aenderung-marke.ruhig { background: var(--k-blau-weich); color: var(--k-blau-text); }
.aenderung-marke.pruefen { background: var(--k-achtung-weich); color: var(--k-achtung); }
.liste-fehler { color: var(--k-gefahr); font-weight: 600; }
.post-text { white-space: pre-wrap; font: inherit; font-size: 0.8125rem; line-height: 1.45; border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); padding: 10px 12px; margin: 6px 0 2px; background: var(--k-flaeche-2); }
.post-fehlt { color: var(--k-gefahr); font-weight: 600; }
.post-text-zeile td { background: var(--k-flaeche-2); }
.post-text-zeile .post-text { max-width: 720px; margin: 6px 0 4px; background: var(--k-flaeche); }
.versionen-liste { display: flex; flex-direction: column; }
.versionen-liste .version { display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--k-linie); font-size: 0.8125rem; }
.versionen-liste .version:first-child { border-top: 0; }
.versionen-liste .version-nr { font-weight: 650; }
.versionen-liste .version-nr small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--k-leise); }
.versionen-liste .version-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 3px; font-size: 0.8125rem; }
.versionen-liste .version-links .link-knopf { font-size: 0.8125rem; }
.versionen-liste .version.ist-aktuell .version-nr { color: var(--k-blau-text); }
@media print {
  .aenderung-marke.gef, .aenderung-saetze li.ist-gef { color: #000; background: none; }
}

/* Schmale Fenster: die Tabellen der Automatik lassen sich seitlich schieben, statt Knöpfe abzuschneiden (Prüfer-Befund 03.10.2026). */
#ansicht-automatik .tabelle-rahmen { overflow-x: auto; }

/* ---------- Angaben von Menschen im Beleg (Punkt 5, 03.10.2026) ---------- */
.angaben-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; margin: 4px 0 8px; }
.angabe-zeile { display: flex; flex-direction: column; gap: 3px; }
.angabe-zeile select, .angabe-zeile input { width: 100%; }
.angabe-fund { font-size: 0.75rem; color: var(--k-leise); min-height: 1em; }
.angabe-fund.stufe-1 { color: var(--k-ok); }
.angabe-fund.stufe-2 { color: var(--k-achtung); }
.angabe-fund.stufe-unbekannt { color: var(--k-gefahr); font-weight: 600; }
.angabe-mail { margin: 6px 0 10px; }
.angabe-mail summary { cursor: pointer; font-size: 0.8125rem; color: var(--k-blau-text); }
.angabe-mail textarea { width: 100%; margin: 8px 0 6px; font: inherit; font-size: 0.8125rem; padding: 8px 12px; border: 1px solid var(--k-linie-stark); border-radius: var(--k-radius-klein); background: var(--k-flaeche); color: var(--k-tinte); }
.angaben-protokoll { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; margin-bottom: 10px; }
.angabe-hinweis { margin: 2px 0 8px; }
.angabe-zeile select.angabe-unbekannt { outline: 2px solid var(--k-gefahr); outline-offset: 1px; }
.angabe-ki { display: flex; gap: 6px; align-items: center; margin: 2px 0 6px; }

/* Beleg im schmalen Fenster (Prüfer-Befund 03.10.2026: bei 375 px war die rechte Spalte 3500 px breit):
   die Rasterkinder dürfen schrumpfen, unter 900 px stehen Blatt und Angaben untereinander. */
.beleg-links, .beleg-rechts { min-width: 0; }
@media (max-width: 900px) {
  .beleg { overflow-y: auto; }
  .beleg-koerper { grid-template-columns: 1fr; flex: none; }
  .beleg-links { border-right: none; border-bottom: 1px solid var(--k-linie); }
  .beleg-pdf { min-height: 320px; }
  .beleg-rechts { overflow-y: visible; padding: 8px 16px 40px; }
  .beleg-kopf { flex-wrap: wrap; padding: 12px 16px; }
  .beleg-aktionen { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
}

/* Technik-Stand im schmalen Fenster: die Teile dürfen umbrechen statt abgeschnitten zu werden. */
@media (max-width: 600px) { .stand-zeile .stand-teil { white-space: normal; } }
.kacheln-klein { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.kacheln-klein .kachel { padding: 12px 14px; }
.kacheln-klein .kachel .k-zahl { font-size: 1.25rem; }

/* Hersteller anfragen (Punkt 10): auf schmalen Schirmen steht der Postfach-Satz unter der Überschrift. */
@media (max-width: 600px) {
  #automatik-hersteller-block .block-kopf { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* =====================================================================
   Cloud-Version (Paket C2, November 2026): Anmeldung, Rollen, Bestätigung,
   Nachweise, GHS-Piktogramme, QR-Druckbogen, Lagerort-Seite.
   Gleiche Tokens wie oben, keine neuen Farben. Rot nur für Gefahr.
   ===================================================================== */

/* ---------- Rollen und Betriebsart (rollen.js setzt data-art und data-rolle am body) ----------
   Was die eigene Rolle nicht darf, wird nicht gezeigt; der Server prüft trotzdem jede Anfrage. */
body[data-rolle="mitarbeiter"] [data-stufe="P"],
body[data-rolle="mitarbeiter"] [data-stufe="W"],
body[data-rolle="mitarbeiter"] [data-stufe="I"],
body[data-rolle="fachkraft"] [data-stufe="I"],
body[data-rolle="mitarbeiter"] #tabelle .wahl-spalte { display: none !important; }
body[data-art="cloud"] [data-cloud="aus"],
body[data-art="cloud"] [data-nur-lokal],
body:not([data-art="cloud"]) [data-nur-cloud] { display: none !important; }
/* In der Cloud gibt es keinen Ordner-Wächter: der Platz unten bleibt dem Thema-Schalter. */
body[data-art="cloud"] .waechter { display: none; }
body[data-art="cloud"] .thema-schalter { margin-left: auto; }
/* Seitenleisten-Status in einer Zeile, Rest mit Auslassung (vollständig im Titel). */
#waechter-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Empfehlungen in der Prüfung: ohne Punkt davor, der Text trägt die Aussage (Sperrliste 22). */
.pruef-zeile.ist-empfehlung .pruef-nr { display: none; }

/* ---------- Kopf: Betrieb, Person, Rolle ---------- */
.konto { display: flex; flex-direction: column; gap: 6px; margin: 0 4px 16px; padding: 12px 12px 10px; border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); background: var(--k-flaeche); min-width: 0; }
.konto-betrieb { font-size: var(--k-gr-tabelle); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.konto-wer { font-size: var(--k-gr-mini); color: var(--k-leise); overflow-wrap: anywhere; }
.konto-knoepfe { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.angemeldet-als { font-size: var(--k-gr-klein); color: var(--k-leise); margin: 2px 0 12px; }
.formular-fehler { color: var(--k-gefahr); font-size: var(--k-gr-klein); font-weight: 600; margin: 4px 0 8px; }
.feld-zeile-oben { align-items: start; }
.feld-zeile-oben > span { padding-top: 10px; }
.feld-zeile textarea { width: 100%; min-height: 96px; padding: 8px 12px; border-radius: var(--k-radius-klein); border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); color: var(--k-tinte); font: inherit; font-size: 0.875rem; resize: vertical; }
.feld-zeile textarea:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 1px; border-color: var(--k-blau); border-radius: var(--k-radius-klein); }

/* Betriebswahl (Fenster und Anmeldeseite): ganze Zeile tippbar. */
.betrieb-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.betrieb-wahl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 16px; border: 1px solid var(--k-linie-stark); border-radius: var(--k-radius-klein); background: var(--k-flaeche); text-align: left; transition: background-color var(--k-dauer) ease-out; }
.betrieb-wahl:hover { background: var(--k-zeile-hover); }
.betrieb-wahl.ist-aktiv { border-color: var(--k-blau-rand); background: var(--k-blau-weich); }
.betrieb-wahl-name { font-weight: 650; }
.betrieb-wahl-rolle { font-size: var(--k-gr-klein); color: var(--k-leise); }
.betrieb-wahl[disabled] { opacity: 0.6; cursor: wait; }

/* Bestätigungsfenster (Vorschau des Servers). */
.bestaetigung-satz { color: var(--k-tinte) !important; font-weight: 550; }
.bestaetigung-liste { max-height: 220px; overflow-y: auto; font-size: var(--k-gr-tabelle); }
.bestaetigung-liste li { font-size: var(--k-gr-tabelle); }
.bestaetigung-neben { font-size: var(--k-gr-klein) !important; }
.bestaetigung-text { font-size: var(--k-gr-tabelle) !important; }
.bestaetigung-haken { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; margin: 4px 0 12px; border: 1px solid var(--k-achtung-rand); border-radius: var(--k-radius-klein); background: var(--k-achtung-weich); font-size: var(--k-gr-tabelle); cursor: pointer; }
.bestaetigung-haken input { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* ---------- GHS-Piktogramme (echte UNECE-Rauten aus fachfunktionen.js) ---------- */
.ghs-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.ghs-bilder { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.ghs-bild { width: 30px; height: 30px; flex: none; display: block; }
.ghs-bild.ghs-gross { width: 52px; height: 52px; }
.ghs-text { font-size: var(--k-gr-mini); font-weight: 600; color: var(--k-gefahr); }
.gefahr-zelle { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.schublade .ghs-bild { width: 44px; height: 44px; }

/* ---------- Reiter (Ansicht Nachweise) ---------- */
.reiter { display: flex; gap: 4px; margin: -8px 0 24px; padding: 4px; border: 1px solid var(--k-linie); border-radius: 999px; background: var(--k-flaeche); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter-knopf { flex: none; min-height: 40px; padding: 8px 16px; border-radius: 999px; color: var(--k-leise); font-size: 0.9375rem; font-weight: 550; white-space: nowrap; transition: background-color var(--k-dauer) ease-out, color var(--k-dauer) ease-out; }
.reiter-knopf:hover { color: var(--k-tinte); background: var(--k-stufe); }
.reiter-knopf[aria-selected="true"] { background: var(--k-blau); color: var(--k-auf-blau); }
.reiter-knopf:focus-visible { border-radius: 999px; }
.fach-einleitung { margin: 0 0 16px; font-size: var(--k-gr-klein); }
.fach-tabelle td { vertical-align: top; }
.fach-tabelle tbody tr { cursor: default; }
.fach-tabelle tr[data-lagerort] { cursor: pointer; }
.fach-tabelle tr.ist-gewaehlt { background: var(--k-blau-weich); }
.zeilen-knopf { font-weight: 600; text-align: left; color: var(--k-blau-text); min-height: 32px; text-underline-offset: 3px; }
.zeilen-knopf:hover { text-decoration: underline; }
.zeilen-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fach-fehler { padding: 16px 0; }
.fach-detail { margin-top: 16px; }
.fach-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.fach-zwischen { font-size: 1rem; font-weight: 650; margin: 24px 0 8px; }
.fach-hinweis { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--k-achtung-rand); border-radius: var(--k-radius-klein); background: var(--k-achtung-weich); color: var(--k-tinte); font-size: var(--k-gr-tabelle); }
.fach-gut { margin: 16px 0 4px; color: var(--k-ok); font-weight: 600; font-size: var(--k-gr-tabelle); }
.fach-mehr { margin-top: 16px; }
.fach-mehr summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--k-blau-text); font-weight: 600; font-size: var(--k-gr-tabelle); }
.fach-rechts { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--k-linie); font-size: var(--k-gr-klein); color: var(--k-leise); }

/* Ampel der Zusammenlagerung: Zeichen plus Wort, nie nur Farbe. */
/* Kennzeichen der Regeltabelle über der Ampel (Nachzug 02.11.2026): Entwurf in Achtung-Farbe, nie Rot, nie Grün. */
.freigabe-entwurf { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--k-radius-klein); background: var(--k-achtung-weich); color: var(--k-tinte); font-size: var(--k-gr-tabelle); max-width: 80ch; }
.freigabe-entwurf p + p { margin-top: 4px; color: var(--k-leise); }
.freigabe-titel { font-weight: 650; color: var(--k-achtung); }
.freigabe-kurz { padding: 8px 14px; margin-bottom: 12px; }
.freigabe-frei { margin: 0 0 16px; font-size: var(--k-gr-klein); color: var(--k-leise); }
.ampel-marke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; font-size: var(--k-gr-mini); font-weight: 650; text-align: left; max-width: 100%; }
.ampel-marke svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ampel-marke-gross { font-size: var(--k-gr-tabelle); padding: 6px 14px 6px 10px; }
.ampel-marke-gross svg { width: 20px; height: 20px; }
.ampel-rot { color: var(--k-gefahr); background: var(--k-gefahr-weich); }
.ampel-gelb { color: var(--k-achtung); background: var(--k-achtung-weich); }
.ampel-gruen { color: var(--k-ok); background: var(--k-ok-weich); }
.ampel-grau { color: var(--k-leise); background: var(--k-stufe); }

.paar-liste { list-style: none; display: flex; flex-direction: column; }
.paar { padding: 14px 0; border-top: 1px solid var(--k-linie); }
.paar:first-child { border-top: none; }
.paar-kopf { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.paar-stoffe { font-size: var(--k-gr-tabelle); overflow-wrap: anywhere; }
.paar-text { font-size: var(--k-gr-tabelle); color: var(--k-leise); margin-top: 6px; max-width: 80ch; }
.paar-text b { color: var(--k-tinte); }
.paar-fundstellen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 10px; font-size: var(--k-gr-klein); }
.paar-fundstellen p { color: var(--k-tinte); }
.paar-label { display: block; font-size: var(--k-gr-mini); font-weight: 600; color: var(--k-leise); margin-bottom: 2px; }
.paar-blatt { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.paar-blatt q { color: var(--k-leise); }

/* Marken für Alter und Stand (Rot nur für Gefahr, darum hier höchstens Achtung). */
.stand-marke { display: inline-block; font-size: var(--k-gr-mini); font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.stand-ok { color: var(--k-ok); background: var(--k-ok-weich); }
.stand-achtung { color: var(--k-achtung); background: var(--k-achtung-weich); }
.stand-neutral { color: var(--k-leise); background: var(--k-stufe); }

/* Anfrage-Entwürfe zum Kopieren. */
.entwurf-liste { display: flex; flex-direction: column; gap: 20px; max-height: 60vh; overflow-y: auto; margin-bottom: 4px; }
.entwurf h3 { font-size: 1rem; font-weight: 650; margin-bottom: 2px; }
.entwurf-text { display: block; width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--k-linie-stark); border-radius: var(--k-radius-klein); background: var(--k-flaeche-2); color: var(--k-tinte); font: inherit; font-size: var(--k-gr-tabelle); line-height: 1.45; resize: vertical; }

/* Unterweisung. */
.faellig-liste { list-style: none; display: flex; flex-direction: column; }
.faellig-liste li { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--k-linie); font-size: var(--k-gr-tabelle); }
.faellig-liste li:first-child { border-top: none; padding-top: 0; }
.unterweisung-form-block { margin-top: 16px; }
.unterweisung-form-block h2 { margin-bottom: 16px; }
.fach-form .feld-zeile { grid-template-columns: 170px 1fr; }
.feld-mit-einheit { display: inline-flex; align-items: center; gap: 10px; font-size: var(--k-gr-tabelle); color: var(--k-leise); }
.feld-mit-einheit input { width: 96px !important; }
.stoff-feld { border: none; margin: 8px 0 12px; min-width: 0; }
.stoff-feld legend { font-size: 0.8125rem; color: var(--k-leise); margin-bottom: 8px; }
.stoff-suche { flex: 1 1 220px; max-width: 360px; }
.stoff-wahl-liste { max-height: 240px; overflow-y: auto; border: 1px solid var(--k-linie); border-radius: var(--k-radius-klein); padding: 4px 0; }
.stoff-wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px; font-size: var(--k-gr-tabelle); cursor: pointer; }
.stoff-wahl:hover { background: var(--k-zeile-hover); }
.stoff-wahl input { width: 20px; height: 20px; flex: none; }
.stoff-wahl-liste .zell-neben { padding: 8px 12px; display: block; }

/* Aushang mit QR-Code. Das SVG bringt seinen weißen Grund selbst mit (auch im Dunkelmodus lesbar). */
.aushang-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qr-klein { display: block; width: 64px; height: 64px; border-radius: 6px; }
.qr-bogen { display: none; }

@media (max-width: 820px) {
  /* Am Handy eine ruhige Zeile statt eines Kastens: Betrieb links, Handgriffe rechts. */
  .konto { grid-area: konto; margin: 0; padding: 0; border: 0; background: none; flex-direction: row; align-items: center; gap: 12px; flex-wrap: nowrap; }
  .konto-text { flex: 1; min-width: 0; }
  .konto-betrieb, .konto-wer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .konto-knoepfe { flex: none; gap: 0 12px; flex-wrap: nowrap; }
  .seite { grid-template-areas: "marke fuss" "konto konto" "nav nav"; }
  .konto-knoepfe .link-knopf { min-height: 44px; }
  .reiter { width: auto; margin: -4px -16px 20px; border-radius: 0; border-left: 0; border-right: 0; padding: 4px 16px; }
  .reiter-knopf { min-height: 44px; }
  .paar-fundstellen { grid-template-columns: 1fr; }
  .fach-form .feld-zeile { grid-template-columns: 1fr; gap: 4px; }
  .feld-zeile-oben > span { padding-top: 0; }
  .zeilen-knopf { min-height: 44px; }
  #ansicht-nachweise .tabelle-rahmen { overflow-x: auto; }
  .feld-zeile textarea, .entwurf-text, .stoff-suche { font-size: 1rem; }
}

/* ---------- QR-Druckbogen: A4, zwei Aushänge je Blatt, schwarz auf weiß ---------- */
@media print {
  body.qr-druck > *:not(.qr-bogen) { display: none !important; }
  body.qr-druck .qr-bogen { display: block; }
  .qr-aushang { height: 138mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10mm 12mm; border-bottom: 1px dashed #6a6a6a; break-inside: avoid; page-break-inside: avoid; }
  .qr-aushang:nth-child(2n) { border-bottom: none; break-after: page; page-break-after: always; }
  .qr-aushang:last-child { break-after: auto; page-break-after: auto; }
  .qr-betrieb { font-size: 11pt; color: #2b2b2b; margin-bottom: 2mm; }
  .qr-ort { font-size: 24pt; font-weight: 700; line-height: 1.15; margin-bottom: 6mm; }
  .qr-bild { width: 70mm; height: 70mm; }
  .qr-satz { font-size: 13pt; max-width: 140mm; margin-top: 5mm; }
  .qr-link { font-size: 8pt; color: #4a4a4a; margin-top: 3mm; word-break: break-all; }
  .ghs-bild { width: 22px; height: 22px; }
}

/* ---------- Anmeldeseite (anmelden.html) ---------- */
.anmelden-seite { min-height: 100dvh; display: flex; flex-direction: column; }
.anmelden-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(16px, 4vw, 40px); }
.anmelden-kopf .marke { padding: 0; }
.anmelden-kopf .thema-schalter { width: 44px; height: 44px; }
.anmelden-haupt { width: 100%; max-width: 440px; margin: 0 auto; padding: clamp(24px, 8vh, 96px) 16px 48px; flex: 1; }
.anmelden-haupt h1 { margin-bottom: 16px; }
.anmelden-text { color: var(--k-leise); margin-bottom: 20px; max-width: 46ch; }
.anmelden-text b { color: var(--k-tinte); overflow-wrap: anywhere; }
.anmelden-feld { display: block; font-size: var(--k-gr-klein); font-weight: 600; color: var(--k-leise); margin-bottom: 6px; }
.anmelden-eingabe { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--k-radius-klein); border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); color: var(--k-tinte); font-size: 1rem; }
.anmelden-eingabe:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 1px; border-color: var(--k-blau); border-radius: var(--k-radius-klein); }
.anmelden-code { font-variant-numeric: tabular-nums; letter-spacing: 0.3em; font-size: 1.375rem; font-weight: 600; }
.anmelden-knopf { width: 100%; min-height: 48px; margin-top: 16px; }
.anmelden-neben { font-size: var(--k-gr-klein); color: var(--k-leise); margin: 20px 0 4px; }
.anmelden-schritt .link-knopf { min-height: 44px; display: inline-flex; align-items: center; }
.anmelden-fuss { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--k-linie); font-size: var(--k-gr-mini); color: var(--k-sehr-leise); }

/* 404-Seite (web/404.html, Restpunkt G1 H1): Aufbau der Anmeldeseite, Marke als Link, große leise Zahl. */
.marke-link { color: var(--k-tinte); text-decoration: none; min-height: 44px; border-radius: var(--k-radius-klein); }
.marke-link:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 2px; }
.fehlt-zahl { font-size: 3.5rem; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--k-sehr-leise); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
a.anmelden-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- Lagerort-Seite hinter dem QR-Code (lagerort.html), 375 px zuerst ---------- */
.lagerort-seite { font-size: 1.125rem; }
.lo-haupt { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.lo-kopf { margin-bottom: 24px; }
.lo-betrieb { font-size: var(--k-gr-tabelle); color: var(--k-leise); margin-bottom: 4px; }
.lo-kopf h1 { font-size: 2rem; overflow-wrap: anywhere; }
.lo-stand { font-size: var(--k-gr-tabelle); color: var(--k-leise); margin-top: 6px; }
.lagerort-seite h2 { font-size: 1.25rem; margin-bottom: 12px; }
.lo-notruf { margin-bottom: 32px; padding: 16px; border: 1px solid var(--k-linie-stark); border-radius: var(--k-radius); background: var(--k-flaeche); }
.lo-notruf-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lo-notruf-liste li { display: flex; flex-direction: column; gap: 2px; }
.lo-notruf-titel { font-size: var(--k-gr-tabelle); color: var(--k-leise); }
.lo-anruf { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.5rem; font-weight: 700; color: var(--k-blau-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.lo-anruf:hover { text-decoration: underline; }
.lo-notruf-text { font-size: 1.0625rem; }
.lo-stoffe { list-style: none; display: flex; flex-direction: column; }
.lo-stoff { padding: 20px 0; border-top: 1px solid var(--k-linie); }
.lo-stoff:first-child { border-top: none; padding-top: 4px; }
.lo-stoff-kopf { display: flex; flex-direction: column; gap: 10px; }
.lo-stoff-name h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lo-stoff-neben { font-size: var(--k-gr-tabelle); color: var(--k-leise); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lo-knoepfe { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.lo-knopf { width: 100%; min-height: 52px; font-size: 1.0625rem; white-space: normal; text-align: center; }
.lo-fehlt { font-size: var(--k-gr-tabelle); color: var(--k-achtung); }
.lo-leer { color: var(--k-leise); padding: 16px 0; }
.lo-fehler { padding: 20px 0; }
.lo-fehler p { color: var(--k-leise); }
.lo-fuss { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--k-linie); font-size: var(--k-gr-tabelle); color: var(--k-leise); }
@media (min-width: 640px) {
  .lo-stoff-kopf { flex-direction: row; align-items: flex-start; }
  .lo-knoepfe { flex-direction: row; }
  .lo-knopf { width: auto; flex: 1; }
}

/* =====================================================================
   Fix-Runde Oberfläche (November 2026, nach G1, G2, G3 Befund M-4).
   Gleiche Tokens wie oben, keine neuen Farben.
   ===================================================================== */

/* Klassen statt style-Attribut: die Cloud schickt die CSP „style-src 'self'“,
   die jedes style-Attribut im HTML und in innerHTML blockiert. */
.leer-zeile { padding: 8px 0; }
.text-gefahr { color: var(--k-gefahr); }
.detail-herkunft { margin: -10px 0 14px; }
.detail-ghs { margin-bottom: 4px; }
.akt-zeile .akt-zeit.akt-zeit-links { margin-left: 0; }
.detail-hist-text { padding: 0 0 8px 2px; }
.block-fuss-zeile { margin: 12px 0 0; }
.ohne-umbruch { white-space: nowrap; }
.zahl-zelle { font-variant-numeric: tabular-nums; }
.beendet { display: grid; place-items: center; height: 100vh; height: 100dvh; font-family: var(--k-schrift); text-align: center; color: var(--k-leise); padding: 20px; }
.beendet-titel { font-size: 1.1875rem; font-weight: 600; color: var(--k-tinte); margin-bottom: 8px; }

/* Code-Schrift nie unter 12 px, auch in kleiner Umgebung (Sperrliste 18). */
code { font-size: max(0.75rem, 0.88em); }

/* Willkommen-Fenster: der Rechts-Hinweis ist eine getönte Fläche ohne eigenen Rahmen
   (im Fenster keine Karte in der Karte, Sperrliste 2). */
.willkommen-recht { background: var(--k-achtung-weich); border-radius: var(--k-radius-klein); padding: 12px 16px; margin: 16px 0; color: var(--k-tinte) !important; }

/* Eingabe im Bestätigungsfenster: Beschriftung über dem Feld, Feld volle Breite. */
.feld-zeile.feld-zeile-stapel { grid-template-columns: 1fr; gap: 6px; align-items: stretch; }

/* Nachweis-Tabellen: alle Zellen oben ausgerichtet, der Zeilen-Knopf trägt seinen Text oben
   wie jede andere Zelle (die Tippfläche bleibt 44 px hoch). */
.fach-tabelle .zeilen-knopf { display: inline-flex; align-items: flex-start; padding: 0; }

/* Den Platz für Betrieb und Person im Kopf von Anfang an freihalten, wenn die Seite zuletzt
   in der Cloud lief (thema.js setzt data-art-vermutet), sonst springt das Menü nach unten. */
html[data-art-vermutet="cloud"] #konto[hidden] { display: flex !important; visibility: hidden; }

/* Hinweis unten am Rand: das Nachladen geht gerade nicht (schwebt, darum mit Schatten). */
.netz-hinweis { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 65; width: max-content; max-width: calc(100vw - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 18px; border: 1px solid var(--k-linie); border-radius: var(--k-radius); background: var(--k-flaeche); color: var(--k-tinte); box-shadow: var(--k-schatten-schwebe); font-size: var(--k-gr-tabelle); }
.netz-hinweis .link-knopf { min-height: 44px; display: inline-flex; align-items: center; }
@media print { .netz-hinweis { display: none !important; } }

@media (max-width: 820px) {
  /* Die Reiter-Leiste reicht am Handy von Rand zu Rand; ohne max-width: none endete sie 32 px vor dem Rand. */
  .reiter { max-width: none; }
}
@media (max-width: 480px) {
  /* Muss nach der Grundregel .feld-zeile stehen, sonst gewinnt die Grundregel. */
  .feld-zeile, .bearbeiten-form .feld-zeile, .fach-form .feld-zeile { grid-template-columns: 1fr; gap: 4px; }
  .bearbeiten-form .gesperrt-hinweis { margin-left: 0; }
}

/* Tippflächen: der Lagerort-Knopf ist auch bei kurzen Namen 44 px breit. */
.zeilen-knopf { min-width: 44px; }

/* Nachweis-Tabellen am Handy als Liste: Name und Ampel bzw. Status vorn, der Rest mit Beschriftung
   darunter, nichts hinter seitlichem Scrollen (G2 Befund 10). Der Tabellenkopf bleibt für Vorleseprogramme. */
@media (max-width: 600px) {
  .fach-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fach-tabelle, .fach-tabelle tbody { display: block; }
  .fach-tabelle tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; padding: 14px 16px; }
  .fach-tabelle td { display: block; padding: 0 !important; }
  .fach-tabelle td.produkt-zelle { flex: 1 1 50%; min-width: 0; }
  .fach-tabelle td[data-label] { font-size: var(--k-gr-klein); }
  .fach-tabelle td[data-label]::before { content: attr(data-label) ": "; color: var(--k-sehr-leise); font-weight: 400; }
  .fach-tabelle td.zeilen-ende { flex-basis: 100%; }
  .fach-tabelle td.wahl-spalte { width: 20px; margin-top: 2px; }
  .fach-tabelle .zeilen-aktionen { justify-content: flex-start; }
  #ansicht-nachweise .tabelle-rahmen { overflow-x: visible; }
  /* Im Stoff-Fenster: Links im Feld haben eine 44 px hohe Tippfläche, ohne die Zeile höher zu machen. */
  .feld-wert a { display: inline-block; padding: 14px 0; margin: -14px 0; }
}

/* Einladung in einen weiteren Betrieb: Name und Rolle, darunter Ablehnen und Annehmen. */
/* Im Fenster ohne eigenen Rahmen (keine Karte in der Karte, Sperrliste 2): Haarlinie zwischen den Einladungen. */
.einladung { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--k-linie); }
.einladung:last-child { border-bottom: 1px solid var(--k-linie); }
.einladung-text { display: flex; flex-direction: column; gap: 2px; }
.einladung .knopf-reihe { margin-top: 0; }

/* G2 Runde 2: am Handy Betrieb und Person umbrechen statt abschneiden; im Protokoll bricht die
   Quelle (meist ein Dateiname) nicht mitten im Namen um, die Tabelle schiebt dafür seitlich. */
@media (max-width: 820px) {
  .konto-betrieb, .konto-wer { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
}
#ansicht-protokoll .tabelle td:nth-child(6) { max-width: none; overflow-wrap: normal; white-space: nowrap; }

/* ---------- Ansicht Betrieb (betrieb.js): Mitglieder und Profil, nur Cloud und Inhaber ----------
   Flächen wie in Nachweise (.block, .fach-tabelle), Formular wie die Unterweisung (.fach-form). */
.block-titel { font-size: var(--k-gr-zwischen); margin-bottom: 14px; }
#betrieb-mitglieder > .block { margin-bottom: 8px; }
#betrieb-mitglieder > .block .knopf-reihe { margin: 8px 0 12px; }
.mitglied-mail { overflow-wrap: anywhere; }
.mitglieder-erklaerung { margin-top: 10px; }
#betrieb-einladungen .block-neben { margin: -6px 0 12px; }
.rolle-wahl { min-height: var(--k-knopf-hoehe); padding: 6px 30px 6px 12px; border-radius: var(--k-radius-klein); border: 1px solid var(--k-linie-stark); background: var(--k-flaeche); color: var(--k-tinte); font: inherit; font-size: var(--k-gr-tabelle); max-width: 100%; }
.rolle-wahl:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 1px; border-color: var(--k-blau); }
.profil-form { display: grid; gap: 16px; }
.profil-gruppe { margin: 0; min-inline-size: 0; }
.profil-gruppe legend { float: left; width: 100%; font-size: var(--k-gr-zwischen); font-weight: 650; letter-spacing: -0.01em; margin-bottom: 14px; padding: 0; }
.profil-gruppe legend + * { clear: both; }
.profil-erklaerung { margin: 0 0 12px; }
.profil-gruppe .feld-zeile:last-child, .profil-gruppe .profil-erklaerung:last-child { margin-bottom: 0; }
.farbe-wahl { max-width: 96px; padding: 4px !important; cursor: pointer; }
.profil-knoepfe { margin-top: 0; }
.profil-unlesbar .block-titel { margin-bottom: 8px; }
.profil-unlesbar p + p { margin-top: 8px; }
.profil-unlesbar .knopf-reihe { margin-top: 14px; }
#profil-hinweis .hinweis-block { margin-top: 0; }
@media (max-width: 600px) {
  .rolle-wahl, .farbe-wahl { min-height: 44px; font-size: 1rem; }
  .profil-gruppe legend { font-size: 1rem; }
}