/* AB Warenwirtschaft – Gestaltung nach den Skizzen: Schwarzweiß, Linie statt Fläche.
   Eine Datei, kein Build, kein Framework.

   ====================================================================
   ALLE Farben, Abstände, Radien und Schriftstufen stehen hier und nur hier.
   Außerhalb dieses Abschnitts steht kein Farbwert. Wer etwas ändern will,
   ändert es an dieser einen Stelle – wie ABStil.swift in der App.
   ==================================================================== */

:root {
  /* ---- Farben: Dunkel ist der Ausgangspunkt, Hell die Umkehrung ---- */
  --grund: #0D0D0D;          /* Hintergrund aller Bildschirme */
  --flaeche: #1A1A1A;        /* Karten, Eingabefelder, Listenblöcke */
  --leiste: #111111;         /* Seiten- und Tableiste */
  --hervor: #1F1F1F;         /* gewählte Zeile, aktiver Menüpunkt */
  --linie: #2E2E2E;          /* Rahmen, Trennlinien, leere Balken */
  --text: #F2F2F2;
  --gedaempft: #A3A3A3;      /* Nebentext, Beschriftungen */
  --platzhalter: #8C8C8C;    /* Platzhalter in Feldern, inaktive Tabs */
  --akzent: #FFFFFF;         /* Hauptknöpfe, aktiver Tab, Linienzeichnungen */
  --auf-akzent: #0D0D0D;     /* Schrift auf dem Akzent */
  --warnung: #E3B866;
  --warnung-flaeche: #2A2419;
  --warnung-linie: #4A3E26;
  --ok: #5FC27A;             /* ✓ „sicher erkannt“ in der Einsatz-Notiz */
  --demo: #F07C1E;
  --auf-demo: #1A1206;
  /* Kästchen oben rechts (Rolle/Ansicht): etwas heller als die Leiste, fast weiße Schrift, feiner Rand. */
  --kaestchen: #262626; --auf-kaestchen: #F5F5F5; --kaestchen-linie: #3D3D3D;
  /* Aktives Feld in Umschaltern: im Dunkeln klar hell, nie dunkel auf dunkel. */
  --segment-aktiv: #EDEDED; --auf-segment-aktiv: #111111;
  /* „Ansicht als …“ in fremder Rolle: orange wie das Band in der App, dunkle Schrift (Kontrast ≥ 4,5:1). */
  --vorschau: #F07C1E; --auf-vorschau: #1A1206;
  --fehler: #F2A08C;
  --fehler-flaeche: #2C1E1B;
  --fehler-linie: #5A3A32;
  /* Verdunklung hinter Dialogen und der ausgeklappten Seitenleiste. */
  --schleier: rgba(0, 0, 0, .25);
  --schatten: 0 24px 60px rgba(0, 0, 0, .55);
  /* Damit der Browser Auswahlpfeile, Bildlaufleisten und Datumsfelder passend zeichnet. */
  color-scheme: dark;

  /* ---- Abstände: nur diese sechs ---- */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px;

  /* ---- Radien ---- */
  --r-karte: 14px;           /* Karten und Tabellen */
  --r-feld: 10px;            /* Knöpfe und Felder */
  --r-chip: 999px;           /* voll rund */

  /* ---- Maße ----
     Die Seiten wirkten eingeengt. Diese Werte geben ihnen Luft; sie stehen
     hier und nur hier, damit „mehr Abstand“ eine Zeile ist und nicht
     hundert. Die Breiten-Abstufungen stehen weiter unten bei den
     Bildschirmgrößen. */
  --h-knopf: 44px;
  --h-zeile: 52px;           /* Tabellenzeile, mindestens */
  --h-tipp: 44px;            /* kleinste Tippfläche, auch am Finger */
  --b-seitenleiste: 264px;
  --h-kopfleiste: 64px;
  --b-inhalt-max: 1600px;    /* darüber wird der Inhalt nicht breiter, sondern steht mittig */
  --b-formular-max: 720px;   /* Profil und ähnliche Formularseiten */

  /* Ein Innenrand für alle Seiten, links wie rechts. `clamp` statt fester
     Stufen: auf dem Telefon 16 px, am großen Schirm 48 px, dazwischen mitwachsend.
     Nichts klebt an der Seitenleiste, nichts wird rechts abgeschnitten. */
  --rand: clamp(16px, 3vw, 48px);
  --a-abschnitt: 32px;       /* zwischen Kacheln, Tabellen, Karten */
  --a-titel: 12px;           /* Abschnittsüberschrift zu ihrem Inhalt */
  --a-karte: 24px;           /* Innenrand von Karten und Tabellenbehältern */
  --a-zelle: 16px;           /* Innenabstand links/rechts in Tabellenzellen */
  --a-spalte: 32px;          /* Hauptspalte zu rechter Spalte */

  /* ---- Schrift ----
     Eine einzige Schrift im ganzen Haus: die des Geräts. Keine Web- und keine
     Sonderschrift, auch nicht für Titel — Hierarchie nur über Größe und Gewicht. */
  --schrift: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --s-titel: 32px;           /* Seitentitel */
  --s-zahl: 34px;            /* Kennzahlen in Kacheln */
  --s-zahl-klein: 17px;      /* Zahlen in Tabellen */
  --s-abschnitt: 13px;       /* Kartentitel, Gruppen in der Seitenleiste */
  --s-zeile: 14px;           /* Menüpunkte, Zellen mit Gewicht */
  --s-text: 14px;
  --s-klein: 12px;           /* Unterzeilen, Tabellenköpfe */

  /* Verdunklung hinter Dialogen und der ausgeklappten Seitenleiste. */
  --schleier: rgba(0, 0, 0, .25);
  --schatten: 0 24px 60px rgba(0, 0, 0, .55);
  /* Damit der Browser Auswahlpfeile, Bildlaufleisten und Datumsfelder passend zeichnet. */
  color-scheme: dark;

  /* ---- Papier ----
     Vorschauen von Lieferschein, Montageauftrag, Regiebericht und Nachweisen
     sind in beiden Modi weiß mit schwarzer Schrift. Ein Ausdruck sieht aus wie
     ein Ausdruck, auch nachts. Diese Werte wechseln deshalb nie. */
  --papier: #FFFFFF;
  --papier-text: #000000;
  --papier-gedaempft: #4A4A4A;
  --papier-linie: #D6D6D6;
  --papier-hervor: #F4F4F4;
}

/* Hell. Dieselben Namen, andere Werte – deshalb muss keine Regel doppelt
   geschrieben werden. Standard ist die Einstellung des Geräts; die beiden
   data-theme-Regeln erzwingen einen Modus. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dunkel"]) {
    --grund: #F7F7F5; --flaeche: #FFFFFF; --leiste: #EFEFEC; --hervor: #EDEDEA;
    --linie: #E3E3DF; --text: #111111; --gedaempft: #5E5E5E; --platzhalter: #6B6B6B;
    --akzent: #111111; --auf-akzent: #F7F7F5;
    --warnung: #855C00; --warnung-flaeche: #FFF6E0; --warnung-linie: #E9D29A; --ok: #1E7A3A; --demo: #E8650A; --auf-demo: #FFFFFF;
    --kaestchen: #FFFFFF; --auf-kaestchen: #111111; --kaestchen-linie: #D6D6D1;
    --segment-aktiv: #FFFFFF; --auf-segment-aktiv: #111111;
    --vorschau: #E8650A; --auf-vorschau: #1A1206;
    --fehler: #B3261E; --fehler-flaeche: #FDECEA; --fehler-linie: #F2B8B5;
    --schleier: rgba(0, 0, 0, .25);
    --schatten: 0 24px 60px rgba(17, 17, 17, .22);
    color-scheme: light;
  }
}
:root[data-theme="hell"] {
  --grund: #F7F7F5; --flaeche: #FFFFFF; --leiste: #EFEFEC; --hervor: #EDEDEA;
  --linie: #E3E3DF; --text: #111111; --gedaempft: #5E5E5E; --platzhalter: #6B6B6B;
  --akzent: #111111; --auf-akzent: #F7F7F5;
  --warnung: #855C00; --warnung-flaeche: #FFF6E0; --warnung-linie: #E9D29A; --ok: #1E7A3A; --demo: #E8650A; --auf-demo: #FFFFFF;
  --kaestchen: #FFFFFF; --auf-kaestchen: #111111; --kaestchen-linie: #D6D6D1;
  --segment-aktiv: #FFFFFF; --auf-segment-aktiv: #111111;
  --vorschau: #E8650A; --auf-vorschau: #1A1206;
  --fehler: #B3261E; --fehler-flaeche: #FDECEA; --fehler-linie: #F2B8B5;
  --schleier: rgba(0, 0, 0, .25);
  --schatten: 0 24px 60px rgba(17, 17, 17, .22);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { font: 400 var(--s-text)/1.45 var(--schrift); color: var(--text); background: var(--grund);
       -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.cn, h1, h2, .band .zahl { letter-spacing: -0.4px; }
/* Titel: Systemschrift, 700, 32 px. Die Wirkung kommt aus Größe und Gewicht. */
h1 { font-size: var(--s-titel); font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.15; overflow-wrap: anywhere; }
.unterzeile { color: var(--gedaempft); margin-top: 8px; font-size: 13px; }
.hilfe { font-size: 12px; color: var(--gedaempft); }
.num { text-align: right; }
/* Zahlen stehen überall bündig untereinander. */
.tab td, .tab th, .num, .daten dd, .kennzahl, .zahl { font-variant-numeric: tabular-nums; }
.sym { vertical-align: -3px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================
   Rahmen: Seitenleiste, Kopfleiste, Inhalt. Nach den Skizzen.
   ====================================================================== */
.app { display: flex; min-height: 100vh; background: var(--grund); color: var(--text); }
.seitenleiste {
  width: var(--b-seitenleiste); flex: 0 0 var(--b-seitenleiste);
  background: var(--leiste); color: var(--text);
  border-right: 1px solid var(--linie);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.kopfzeile {
  position: relative; z-index: 10;
  height: var(--h-kopfleiste); flex: 0 0 var(--h-kopfleiste);
  border-bottom: 1px solid var(--linie);
  padding: 0 var(--a6); display: flex; align-items: center; gap: var(--a4);
}
.kopfzeile .pfad { color: var(--gedaempft); font-size: 13px; min-width: 0;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopfzeile .pfad b { color: var(--text); font-weight: 400; }
/* Eine Reihe, 8 px Abstand, alles vertikal mittig. Nichts wird absolut
   positioniert -- genau daran lagen die Überlappungen am 28.09. */
.kopfzeile .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px;
                     flex-wrap: nowrap; }
.kopfzeile .rechts > * { flex: 0 0 auto; }
.kopfzeile .badge { max-width: none; }
/* Der Rollenknopf: für die IT anklickbar, für alle anderen eine Plakette. */
/* `font: inherit` statt `font-family`: Ein Knopf erbt sonst die Schrift des
   Browsers, und der Test über --schrift wacht zu Recht über jede Ausnahme. */
button.badge { cursor: default; font: inherit; }
button.badge.klickbar { cursor: pointer; }
button.badge.klickbar:hover { border-color: var(--akzent); color: var(--text); }

/* Kopfzeile rechts (09.10.2026): Rollenkästchen, Darstellung und Glocke 36 px hoch, voll gerundet.
   „Angemeldet als …“ (Anzeige) oder „Ansicht als: … ▾“ (Umschalter der IT); in fremder Rolle orange. */
.kopfzeile .rechts { --kopf-h: 36px; }
.kopfzeile #rolle-badge {
  height: var(--kopf-h); padding: 0 var(--a3); border-radius: var(--r-chip);
  background: var(--kaestchen); color: var(--auf-kaestchen); border: 1px solid var(--kaestchen-linie);
  font-size: var(--s-zeile); font-weight: 500; gap: 4px;
}
.kopfzeile #rolle-badge .name { font-weight: 600; }
.kopfzeile #rolle-badge .kurz { display: none; }
@media (max-width: 1199px) {
  .kopfzeile #rolle-badge .lang, .kopfzeile #rolle-badge .name { display: none; }
  .kopfzeile #rolle-badge .kurz { display: inline; }
}
.kopfzeile #rolle-badge.vorschau { background: var(--vorschau); color: var(--auf-vorschau); border-color: var(--vorschau); font-weight: 600; }
.kopfzeile #rolle-badge.vorschau .beenden { text-decoration: underline; }
.kopfzeile .darstellung-umschalter { height: var(--kopf-h); padding: 3px; gap: 2px; align-items: center; }
.kopfzeile .darstellung-umschalter button { width: 28px; height: 28px; }
.kopfzeile .glocke { width: var(--kopf-h); height: var(--kopf-h); }
/* Eigene Tooltips statt title: unter dem Knopf, mit Abstand, verdecken nichts links daneben. */
[data-tipp] { position: relative; }
[data-tipp]:hover::after, [data-tipp]:focus-visible::after, [data-tipp].tipp-offen::after {
  content: attr(data-tipp); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--kaestchen); color: var(--auf-kaestchen); border: 1px solid var(--kaestchen-linie);
  padding: 4px var(--a2); border-radius: var(--r-feld); font: 500 var(--s-klein)/1.3 var(--schrift);
  white-space: nowrap; z-index: 95; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* Die Auswahl hängt unter dem Knopf. */
.vorschau-wahl {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 220px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden;
}
.vorschau-kopf, .vorschau-fuss {
  padding: var(--a2) var(--a3); color: var(--gedaempft); font-size: var(--s-klein);
}
.vorschau-kopf { border-bottom: 1px solid var(--linie); }
.vorschau-fuss { border-top: 1px solid var(--linie); }
.vorschau-eintrag {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: var(--a2) var(--a3); color: var(--text); cursor: pointer;
  font: 600 var(--s-zeile)/1.4 var(--schrift);
}
.vorschau-eintrag:hover { background: var(--hervor); }

/* Das Band. Es steht über dem Inhalt und bleibt dort, solange die Vorschau
   läuft -- wer fremde Augen trägt, muss es jederzeit sehen können. */
.vorschau-band {
  display: flex; align-items: center; gap: var(--a3);
  padding: var(--a3) var(--rand);
  background: var(--warnung-flaeche); color: var(--warnung);
  border-bottom: 1px solid var(--warnung-linie);
  font-weight: 600;
}
.vorschau-band .knopf { margin-left: auto; }
/* Derselbe Innenrand links und rechts, auf jeder Größe. Ab `--b-inhalt-max`
   wird der Inhalt nicht breiter, sondern steht mittig -- sonst laufen Zeilen
   über einen halben Meter Bildschirm.

   Oben 32 px: der Titel beginnt dicht unter der Kopfzeile. Vorher standen hier
   erst 40 px Rand und darunter noch der Abstand des Seitenkopfs -- zusammen
   fast hundert Pixel Leere über dem ersten Wort. */
.seite { padding: var(--a-abschnitt) var(--rand) 56px; min-width: 0;
         width: 100%; max-width: var(--b-inhalt-max); margin: 0 auto; }
.seitenkopf { margin-bottom: var(--a-abschnitt); }
.seitenkopf { display: flex; align-items: flex-start; gap: var(--a-spalte); }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); flex-wrap: wrap; }

/* ---- Suche in der Kopfleiste ----
   Sie steht in der Mitte, zwischen Pfad und den Knöpfen rechts. Die Ergebnisse
   hängen darunter, nach Art gruppiert. */
.kopf-suche { position: relative; flex: 1; max-width: 560px; margin: 0 auto; }
.kopf-suche > .sym { position: absolute; left: var(--a3); top: 50%; transform: translateY(-50%);
                     color: var(--platzhalter); pointer-events: none; }
.kopf-suche input {
  width: 100%; height: var(--h-tipp); padding: 0 56px 0 40px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  font: 400 var(--s-text)/1.4 var(--schrift);
}
.kopf-suche input::placeholder { color: var(--platzhalter); }
.kopf-suche input:focus { outline: none; border-color: var(--akzent); }
.kopf-suche kbd {
  position: absolute; right: var(--a2); top: 50%; transform: translateY(-50%);
  font: 400 11px/1 var(--schrift); color: var(--platzhalter);
  border: 1px solid var(--linie); border-radius: 6px; padding: 4px 6px; pointer-events: none;
}
.suche-ergebnisse {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  max-height: 70vh; overflow: auto;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
  box-shadow: var(--schatten); padding: var(--a2);
}
.suche-gruppe { font-size: var(--s-klein); font-weight: 600; color: var(--gedaempft);
                padding: var(--a2) var(--a3) var(--a1); }
.suche-treffer {
  display: block; padding: var(--a2) var(--a3); border-radius: var(--r-feld);
  color: inherit; text-decoration: none; cursor: pointer;
}
.suche-treffer:hover, .suche-treffer.gewaehlt { background: var(--hervor); }
.suche-treffer b { display: block; }
.suche-treffer span { display: block; color: var(--gedaempft); font-size: var(--s-klein);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche-leer { padding: var(--a4) var(--a3); color: var(--gedaempft); text-align: center; }
@media (max-width: 1023px) { .kopf-suche kbd { display: none; } }
@media (max-width: 767px) { .kopf-suche { display: none; } }

.glocke {
  position: relative; width: var(--h-tipp); height: var(--h-tipp);
  display: grid; place-items: center; border-radius: var(--r-chip);
  border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--text); cursor: pointer;
}
/* Der Zähler statt eines blinden Punktes: „3" beantwortet die Frage, die man
   beim Hinschauen hat, ein Punkt nicht. */
.glocke .punkt {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--fehler);
  color: var(--flaeche); font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; font-variant-numeric: tabular-nums;
}

/* ---- Das Feld hinter der Glocke ----
   Am Schreibtisch hängt es unter ihr, auf dem Handy kommt es von unten: dort
   wäre ein 360 px breites Kärtchen am oberen Rand unerreichbar für den Daumen. */
.glocke-kasten { position: relative; flex: 0 0 auto; }
.glocke-feld {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 380px; max-width: calc(100vw - 2 * var(--rand));
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-karte); box-shadow: var(--schatten);
  overflow: hidden;
}
.glocke-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a3); padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie);
}
.glocke-liste { max-height: min(60vh, 460px); overflow-y: auto; }
.glocke-zeile {
  display: flex; gap: var(--a3); align-items: flex-start;
  padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.glocke-zeile:last-child { border-bottom: 0; }
.glocke-zeile:hover { background: var(--hervor); }
/* Ungelesenes trägt einen Streifen an der Seite -- Fettdruck allein sieht
   man bei drei Zeilen nicht, und Farbe allein reicht nie. */
.glocke-zeile.neu { box-shadow: inset 3px 0 0 var(--fehler); }
.glocke-zeichen { flex: 0 0 auto; color: var(--gedaempft); padding-top: 2px; }
.glocke-zeichen.kritisch { color: var(--fehler); }
.glocke-zeichen.warnung { color: var(--warnung); }
.glocke-text { min-width: 0; }
.glocke-text b { display: block; font-size: var(--s-zeile); font-weight: 600;
                 overflow-wrap: anywhere; }
.glocke-text .zweite { display: block; color: var(--gedaempft); font-size: var(--s-klein); margin-top: 2px; }

@media (max-width: 639px) {
  .glocke-feld {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: auto; max-width: none;
    border-radius: var(--r-karte) var(--r-karte) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.glocke-offen::before {
    content: ''; position: fixed; inset: 0; background: var(--schleier); z-index: 69;
  }
}
.abschnitt { margin-top: var(--a-abschnitt); }
.abschnitt.erster { margin-top: 0; }
.abschnitt > .abschnittkopf { display: flex; align-items: baseline; gap: var(--a3);
                              margin-bottom: var(--a-titel); }
.abschnitt > .abschnittkopf .hilfe { margin-left: 2px; }
.abschnitt > .abschnittkopf .rechts { margin-left: auto; }
.kennzahlen-kompakt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--text); border-bottom: 1px solid var(--text); }
.kennzahlen-kompakt > div { min-height: 102px; padding: 18px 22px; border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.kennzahlen-kompakt > div:last-child { border-right: 0; align-items: stretch; }
.kennzahlen-kompakt span, .kennzahlen-kompakt small { color: var(--gedaempft); font-size: 12px; font-weight: 400; }
.kennzahlen-kompakt b { font-size: 15px; }
.excel-legende { display: flex; gap: 28px; margin: 22px 0; color: var(--gedaempft); font-size: 12px; }
.excel-rahmen { border: 1.5px solid var(--text); }
.excel-formel { min-height: 42px; display: grid; grid-template-columns: 110px 46px 1fr auto; align-items: center; border-bottom: 1.5px solid var(--text); }
.excel-formel > * { min-height: 42px; padding: 11px; border-right: 1px solid var(--linie); }
.excel-formel > em { border-right: 0; color: var(--gedaempft); font-size: 12px; font-style: normal; }
.excel-scroll { overflow-x: auto; }
.excel-tabelle { min-width: 900px; width: 100%; border-collapse: collapse; }
.excel-tabelle th, .excel-tabelle td { padding: 9px 10px; border: 1px solid var(--linie); }
.excel-tabelle thead th { background: var(--flaeche); color: var(--gedaempft); font-size: 12px; font-weight: 700; }
.excel-tabelle tfoot th, .excel-tabelle tfoot td { background: var(--flaeche); font-weight: 700; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--a-spalte); }
@media (max-width: 1180px) { .zweispaltig { grid-template-columns: 1fr; } }

/* ---- Seitenleiste ---- */

/* Das Logo als Maske auf Textfarbe: schwarz in Hell, weiß in Dunkel, eine Datei. */
.logo { padding: var(--a5) var(--a4) var(--a4); display: flex; align-items: center; gap: var(--a2); }
.logo a { display: block; min-width: 0; flex: 1; }
.logo .ab-logo { width: 100%; max-width: 208px; height: 32px; }
/* Knopf zum Ein- und Ausklappen. Eingeklappt bleibt eine schmale Leiste mit den
   Symbolen -- die Navigation verschwindet nie ganz. */
.leiste-klapp {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  background: var(--flaeche); color: var(--gedaempft); cursor: pointer;
}
.leiste-klapp:hover { color: var(--text); }
.app.leiste-schmal .seitenleiste { width: 64px; flex-basis: 64px; }
.app.leiste-schmal .logo { padding: var(--a4) 0; justify-content: center; }
.app.leiste-schmal .logo a { display: none; }
.app.leiste-schmal .leiste-klapp { transform: rotate(180deg); }
.app.leiste-schmal .umschalter { margin: 0 var(--a2) var(--a3); gap: var(--a2); }
/* Eingeklappt drei quadratische Knöpfe untereinander, alle gleich groß. Vorher
   stand hier der beschnittene Name -- „arenhand", „brechnun". Ein Zeichen sagt
   in 44 px mehr als acht Buchstaben, von denen drei fehlen. */
.app.leiste-schmal .umschalter > a, .app.leiste-schmal .umschalter > span {
  justify-content: center; padding: 0;
  width: var(--h-tipp); height: var(--h-tipp); min-height: var(--h-tipp);
  margin: 0 auto; border: 1px solid var(--linie);
}
.app.leiste-schmal .umschalter .bereichsname { display: none; }
.app.leiste-schmal .umschalter a.aktiv { border-color: var(--akzent); }
.app.leiste-schmal .umschalter .aus { opacity: .5; }
/* Ausgeklappt bleibt es beim Namen; das Zeichen liefe dort nur mit. */
.umschalter .bereichszeichen { display: none; }
.app.leiste-schmal .umschalter .bereichszeichen { display: block; }
.app.leiste-schmal .nav { padding: 0 var(--a2) var(--a3); }
.app.leiste-schmal .nav a { justify-content: center; padding: var(--a2) 0; }
.app.leiste-schmal .nav a > span:not(.schloss), .app.leiste-schmal .nav-gruppe,
.app.leiste-schmal .nav a .kommt, .app.leiste-schmal .nav a .schloss,
.app.leiste-schmal .benutzer .wer,
.app.leiste-schmal .entwicklungshinweis { display: none; }

/* Eingeklappt wird aus der Zahl ein Punkt am Zeichen: „3" wäre in 44 px neben
   einem Symbol nicht lesbar, aber dass überhaupt etwas offen ist, muss man
   sehen -- sonst findet man die Freigaben nur zufällig. */
.app.leiste-schmal .nav a { position: relative; }
.app.leiste-schmal .nav-zahl {
  position: absolute; top: 4px; right: 8px;
  min-width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--fehler); color: transparent; font-size: 0; overflow: hidden;
}

/* Die Fußzeile eingeklappt: Avatar oben, Abmelden darunter, beide mittig und
   je 44 px. Nebeneinander blieben von 64 px Leistenbreite keine 30 px je
   Knopf -- man trifft sie nicht. */
.app.leiste-schmal .benutzer {
  flex-direction: column; align-items: center; gap: 8px;
  padding: var(--a3) 0 calc(var(--a3) + 8px);
}
.app.leiste-schmal .benutzer .kuerzel,
.app.leiste-schmal .benutzer button {
  width: var(--h-tipp); height: var(--h-tipp); flex: 0 0 var(--h-tipp);
  display: grid; place-items: center; border-radius: var(--r-feld);
}
.app.leiste-schmal .benutzer .kuerzel { border-radius: 50%; cursor: pointer; }

/* Bereichsumschalter: die drei Bereiche **untereinander**, über die volle Breite
   der Seitenleiste. Nebeneinander blieben von 264 px keine 80 px je Eintrag --
   "Warenhandel" wurde beschnitten, und mehr Bereiche gingen gar nicht. */
.umschalter {
  display: flex; flex-direction: column; gap: var(--a1);
  margin: 0 var(--a3) var(--a5);
}
.umschalter > a, .umschalter > span {
  display: flex; align-items: center; min-height: 36px;
  padding: 0 var(--a3); border-radius: var(--r-feld);
  color: var(--gedaempft); text-decoration: none;
  font-size: var(--s-zeile); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.umschalter a:hover { color: var(--text); background: var(--hervor); }
.umschalter a.aktiv { background: var(--akzent); color: var(--auf-akzent); }
.umschalter .aus { color: var(--platzhalter); cursor: default; }

/* Der schwebende Hinweis an der schmalen Leiste.
   `position: fixed`, damit ihn kein `overflow` der Leiste beschneidet -- genau
   daran scheiterte der eingebaute `title` nicht, wohl aber jede Lösung
   innerhalb der Leiste. Er zeigt den vollen Namen und bei Gesperrtem den Grund. */
.leiste-hinweis {
  position: fixed; z-index: 90; transform: translateY(-50%);
  background: var(--text); color: var(--flaeche);
  padding: 6px var(--a3); border-radius: var(--r-feld);
  font-size: var(--s-klein); font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none; max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.leiste-hinweis.sichtbar { opacity: 1; visibility: visible; }

.nav { flex: 1; overflow: auto; padding: 0 var(--a3) var(--a3); }
/* Gruppenüberschriften bekommen Luft nach oben, damit die Gruppen sichtbar
   getrennt sind. Einträge brechen nie um -- lieber mit „…" kürzen. */
.nav-gruppe {
  font-size: var(--s-klein); font-weight: 600; color: var(--gedaempft);
  margin: 20px var(--a3) var(--a1);
}
.nav a > span:not(.schloss) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a {
  display: flex; align-items: center; gap: var(--a3);
  min-height: 40px; padding: var(--a2) var(--a3);
  font-size: var(--s-zeile); font-weight: 600; color: var(--gedaempft);
  text-decoration: none; border-radius: var(--r-feld); line-height: 1.2;
}
.nav a:hover { color: var(--text); background: var(--hervor); }
.nav a .sym { width: 18px; height: 18px; flex: 0 0 18px; }
.nav a > span:not(.schloss) { min-width: 0; }
.nav a.aktiv { background: var(--hervor); color: var(--text); }
/* Geplant: grau, mit Schloss, nicht anklickbar – wie in der App. */
.nav a.gesperrt { color: var(--platzhalter); }
.nav a .zaehler { margin-left: auto; color: var(--gedaempft); font-size: var(--s-klein);
                  font-variant-numeric: tabular-nums; }
.nav a .zaehler.warnt { color: var(--fehler); font-weight: 600; }
.nav a .schloss { margin-left: auto; width: 14px; height: 14px; }
/* Geplant und noch nicht gebaut: Name gedämpft, Uhr rechts. Anklickbar bleibt es —
   ein Klick landet auf der Planungsseite statt ins Leere. */
.nav a.geplant { color: var(--platzhalter); }
.nav a.geplant .sym { opacity: .6; }
.nav a.geplant .kommt { margin-left: auto; width: 14px; height: 14px; flex: 0 0 14px; }
/* Offene Belegfreigaben als Zahl im Menü, damit sie nicht liegen bleiben. */
.nav-zahl { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px;
            background: var(--akzent); color: var(--auf-akzent);
            font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
            font-variant-numeric: tabular-nums; }

.benutzer {
  border-top: 1px solid var(--linie); padding: var(--a3) var(--a4);
  display: flex; align-items: center; gap: var(--a3); cursor: pointer;
}
.benutzer .kuerzel {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  border: 1.5px solid var(--linie); display: grid; place-items: center;
  font-size: var(--s-klein); font-weight: 600;
}
.benutzer .wer { min-width: 0; flex: 1; }
.benutzer .wer b { display: block; font-size: 13px; font-weight: 600;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* „IT (extern) · SYNTEXA" muss in eine Zeile. Bricht es um, wächst die
   Fußzeile in die Navigation hinein; lieber abschneiden -- der volle Name
   steht im Titel und im Profil. */
.benutzer .wer span { display: block; font-size: var(--s-klein); color: var(--gedaempft);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.benutzer form { margin: 0; }
.benutzer button {
  background: none; border: 0; color: var(--gedaempft); cursor: pointer;
  padding: var(--a2); display: grid; place-items: center; border-radius: var(--r-feld);
}
.benutzer button:hover { color: var(--text); background: var(--hervor); }

/* ---- Kennzahl-Kacheln ----
   Zwei Dinge gehen hier leicht schief, und beide sahen im Echtbetrieb hässlich aus:

   1. **Die Zahl bricht um.** "125.678,78 €" passte nicht in eine schmale Kachel.
      Die Schriftgröße richtet sich deshalb nach der **Kachelbreite** (cqi), nicht
      nach dem Bildschirm (vw): eine schmale Kachel bekommt kleinere Ziffern,
      egal wie breit der Bildschirm ist. Dazu nowrap, damit Zahl und Einheit
      zusammenbleiben.
   2. **Eine Kachel allein in der letzten Reihe.** auto-fit füllt von links und
      lässt am Ende gern eine einzelne stehen (5 + 1). Das Raster richtet sich
      deshalb nach der Anzahl, die app.js als data-anzahl anschreibt. */
.band { display: grid; gap: var(--a4); margin: 0 0 var(--a-abschnitt);
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.band > div {
  container-type: inline-size;
  padding: 20px; min-width: 0; overflow-wrap: anywhere;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
}
.band .label, .band .zahl, .band .zusatz { display: block; }
.band .label {
  font-size: var(--s-abschnitt); color: var(--gedaempft); font-weight: 600;
  /* Die Beschriftung bricht an Wortgrenzen um, höchstens zwei Zeilen (09.10.2026, statt
     abzuschneiden) -- nie mitten im Wort: „Von Subunter-\nnehmern" liest sich wie ein
     Tippfehler; das overflow-wrap: anywhere von .band > div gilt hier ausdrücklich nicht.
     Zwei Zeilen sind immer reserviert, damit Zahl und Zusatz in einer Reihe auf gleicher
     Höhe stehen; die Kacheln selbst sind als Rasterzellen einer Reihe gleich hoch. */
  overflow-wrap: normal; hyphens: manual; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.band .zahl {
  font-weight: 700;
  font-size: clamp(20px, 9cqi, var(--s-zahl)); line-height: 1.1;
  margin-top: 6px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.band .zahl.warnt { color: var(--warnung); }
.band .zahl.fehlt { color: var(--fehler); }

/* Gleichmäßige Reihen je Anzahl -- nie eine einzelne Kachel am Ende. */
.band[data-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band[data-anzahl="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.band[data-anzahl="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.band[data-anzahl="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1439px) {
  .band[data-anzahl="5"], .band[data-anzahl="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .band[data-anzahl="4"], .band[data-anzahl="5"], .band[data-anzahl="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .band, .band[data-anzahl="4"], .band[data-anzahl="5"], .band[data-anzahl="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Drei Kacheln nebeneinander oder untereinander, nie 2 + 1. */
  .band[data-anzahl="3"] { grid-template-columns: 1fr; }
}
.band .zusatz { font-size: var(--s-klein); color: var(--gedaempft); margin-top: var(--a2);
                display: flex; align-items: center; gap: var(--a1); }
.band .zusatz:has(.zeile) { flex-wrap: wrap; }
.band > div.klickbar { cursor: pointer; }
.band > div.klickbar:hover { border-color: var(--gedaempft); }
.band .zusatz .zeile { flex-basis: 100%; margin-top: var(--a1); }
/* Braucht Ihre Aufmerksamkeit: vergessene Einsatzzeiten (über 24 h offen). */
.aufmerksam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a2); }
.aufmerksam li { display: flex; flex-direction: column; gap: 2px; padding: var(--a2) 0; border-bottom: 1px solid var(--linie); font-size: var(--s-zeile); }

/* ---- Tabellen ----
   Kopf klein und gedämpft, Zeilen 44 px, gewählte Zeile hervorgehoben.
   Zahlen rechtsbündig und bündig untereinander. */
table.tab { border-collapse: collapse; width: 100%; }
.tab th {
  font-size: 14px; line-height: 1.2; color: var(--gedaempft); font-weight: 600; text-align: left;
  padding: var(--a3) var(--a-zelle); border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.tab td { padding: var(--a3) var(--a-zelle); border-bottom: 1px solid var(--linie);
          vertical-align: middle; font-size: var(--s-text); }
.tab tbody tr { height: var(--h-zeile); }
.tab th:first-child, .tab td:first-child { padding-left: 0; }
.tab th:last-child, .tab td:last-child { padding-right: 0; }
.tab th.num, .tab td.num { text-align: right; }
.tab tr.gewaehlt td, .tab tbody tr:hover td { background: var(--hervor); }
/* Nummern und Termine brechen nicht um. */
.tab .id { font-weight: 600; white-space: nowrap; }
.tab .zweite { display: block; color: var(--gedaempft); font-size: var(--s-klein); margin-top: 2px; }
.tab .platzhalter td span { display: block; height: 11px; background: var(--hervor); border-radius: 2px; }
.tab tfoot td { border-bottom: 0; color: var(--gedaempft); font-size: var(--s-klein);
                padding-top: var(--a3); }
/* Zwischenzeile je Warengruppe. Sie trennt, sie ist keine Datenzeile:
   kein Zeiger, keine Hervorhebung beim Überfahren. */
.tab tbody tr.gruppenzeile { height: auto; }
.tab tbody tr.gruppenzeile:hover td { background: var(--hervor); }
.tab tr.gruppenzeile td {
  background: var(--hervor); font-weight: 600; font-size: var(--s-klein);
  letter-spacing: .02em; padding: var(--a2) var(--a3); border-bottom: 1px solid var(--linie);
}
.tab tr.gruppenzeile td:first-child { padding-left: var(--a3); }
/* Die Summe steht unter der Tabelle und wiegt schwerer als eine Fußnote. */
.tab tfoot tr td { color: var(--text); font-size: var(--s-text); font-weight: 600;
                   border-top: 2px solid var(--linie); }
/* Die Knöpfe am Zeilenende. `nowrap` schob sie bei drei Knöpfen aus der
   Tabelle heraus -- „Inhaber übergeben" stand halb außerhalb der Seite.
   Sie brechen jetzt um und bleiben rechtsbündig. */
.tab td.aktion { text-align: right; }
.tab td.aktion > * { display: inline-flex; }
.tab td.aktion { white-space: normal; }
.tab td form { display: inline; margin: 0; }
/* Breite Tabellen rollen in ihrem Kasten, nie die ganze Seite. */
.tabellenrollbar { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r-karte);
                   background: var(--flaeche); padding: 0 var(--a4); }

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

/* Excel & Backup */
.backup-stand { margin-left: auto; border: 1.5px solid var(--text); padding: 10px 13px; display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.excel-backup-raster { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(480px, 1.08fr); gap: 42px; margin-top: 24px; align-items: start; }
.excel-karte { border: 1.5px solid var(--text); padding: 22px; margin-bottom: 32px; }
.excel-karte-kopf { display: flex; gap: 14px; align-items: center; }
.excel-karte-kopf .unterzeile { margin-top: 3px; }
.excel-dateisymbol { width: 46px; height: 46px; border-radius: 3px; background: var(--akzent); color: var(--auf-akzent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.excel-optionen, .excel-blaetter { border: 0; padding: 0; margin: 22px 0 0; }
.excel-optionen legend, .excel-blaetter legend { color: var(--gedaempft); font-size: 12px; padding: 0; margin-bottom: 7px; }
.excel-optionen label { display: block; padding: 11px 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.excel-optionen input { accent-color: var(--akzent); width: 18px; height: 18px; vertical-align: -4px; margin: 0 9px 0 0; }
.excel-optionen small { display: block; color: var(--gedaempft); margin: 3px 0 0 28px; font-size: 12px; }
.export-zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0 28px; }
.export-zeitraum label { color: var(--gedaempft); font-size: 12px; border: 0; padding: 0; }
.export-zeitraum .feld { margin-top: 5px; }
.excel-blaetter { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; }
.excel-blaetter legend { grid-column: 1 / -1; }
.excel-blaetter label { cursor: pointer; }
.excel-blaetter input { width: 16px; height: 16px; vertical-align: -3px; margin: 0 8px 0 0; accent-color: var(--akzent); }
.layout-umschalter { display: grid; grid-template-columns: 1.4fr 1fr .6fr; border: 1.5px solid var(--text); border-radius: 3px; overflow: hidden; }
.layout-umschalter button { min-height: 35px; border: 0; border-right: 1px solid var(--text); background: var(--grund); font: 700 12px var(--schrift); cursor: pointer; }
.layout-umschalter button:last-child { border-right: 0; }
.layout-umschalter button.aktiv { background: var(--akzent); color: var(--auf-akzent); }
.export-fuss { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--linie); margin-top: 18px; padding-top: 16px; }
.export-fuss > span { flex: 1; font-size: 12.5px; overflow-wrap: anywhere; }
.import-karte { border-style: solid; }
.datei-ablage { border: 1.5px dashed var(--gedaempft); min-height: 118px; margin: 20px 0 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.datei-ablage span { color: var(--gedaempft); font-size: 12px; }
/* Gemeinsame Ablage: Rahmen wie die Karten, Hover und Ziehen sichtbar, Fehler rot. */
.datei-ablage { border-radius: var(--r-karte); border-color: var(--linie); background: var(--flaeche); text-align: center; padding: var(--a4); transition: border-color .15s, background .15s; }
.datei-ablage:hover, .datei-ablage.ueber { border-color: var(--akzent, var(--text)); background: var(--grund); }
.datei-ablage:focus-within { outline: 2px solid var(--akzent, var(--text)); outline-offset: 2px; }
.datei-ablage.fehler { border-color: var(--fehler); }
.datei-ablage .datei-fehler { color: var(--fehler); font-size: var(--s-klein); }
.datei-ablage.klein { min-height: 72px; margin: 0 0 var(--a3); }
.datei-gewaehlt { display: flex; align-items: center; gap: var(--a3); margin: 0 0 var(--a3); flex-wrap: wrap; }
.datei-gewaehlt .datei-name { font-weight: 600; overflow-wrap: anywhere; }
.bestellung-pruefung { border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--a4); margin: 0 0 var(--a4); background: var(--flaeche); }
.bestellung-pruefung h3 { margin: 0 0 var(--a3); font-size: var(--s-abschnitt); }
.pruefliste { display: grid; gap: var(--a2); margin: 0 0 var(--a3); }
.pruefzeile { display: grid; grid-template-columns: 24px 160px minmax(0, 1fr) minmax(0, 240px); gap: var(--a3); align-items: center; }
.pruef-titel { color: var(--gedaempft); }
.pruef-wert { overflow-wrap: anywhere; }
.formzeile.nebeneinander.dreifach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formzeile.nebeneinander.vierfach { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .formzeile.nebeneinander.vierfach { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .pruefzeile { grid-template-columns: 24px minmax(0, 1fr); }
  .pruefzeile > .pruef-wert, .pruefzeile > .hilfe, .pruefzeile > .knopf { grid-column: 2; }
  .formzeile.nebeneinander.dreifach { grid-template-columns: 1fr; }
}
.automatik-karte { border-top: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); padding: 18px 0; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: start; }
.automatik-karte h2 { font-size: 17px; }
.automatik-karte .unterzeile { margin-top: 2px; }
.schalter { display: inline-block; margin-top: 4px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; }
.schalter span { display: block; width: 36px; height: 21px; background: var(--text); border-radius: 20px; position: relative; }
.schalter span::after { content: ''; width: 15px; height: 15px; background: var(--auf-akzent); border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: left .15s; }
.schalter input:not(:checked) + span { background: var(--platzhalter); }
.schalter input:checked + span::after { left: 18px; }
/* Vier Paare aus Beschriftung und Feld nebeneinander: Empfänger, Häufigkeit,
   Wochentag, Uhrzeit. Der Wochentag ist bei „täglich“ ausgeblendet und fällt
   dann ganz aus dem Gitter — die übrigen rücken nach. */
.backup-einstellungen { grid-column: 2 / -1; border-top: 1px solid var(--linie); padding-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; gap: 10px; }
.backup-einstellungen .paar { display: grid; gap: 4px; min-width: 0; }
.backup-einstellungen .beschriftung { margin: 0; }
.backup-einstellungen .feld { min-width: 0; width: 100%; }
.backup-einstellungen .knopfleiste, .backup-einstellungen p { grid-column: 1 / -1; margin: 0; }
/* Das Archiv steht unter der ganzen Karte, nicht in einer ihrer Spalten. */
.backup-archiv { grid-column: 1 / -1; border-top: 1px solid var(--linie); padding-top: 14px; overflow-x: auto; }
.backup-archiv .abschnittkopf { margin: 0 0 10px; }
.backup-archiv h3 { font-size: var(--s-abschnitt); margin: 0; }
.protokoll-vorschau .abschnittkopf, .export-verlauf .abschnittkopf { margin: 0 0 14px; }
.protokoll-vorschau .abschnittkopf .knopf { margin-left: auto; }
.excel-protokoll-zeile { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); align-items: start; }
.excel-protokoll-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.excel-protokoll-zeile .badge { margin-right: 5px; }
.excel-protokoll-zeile .hilfe { text-align: right; white-space: nowrap; }
.export-verlauf { margin-top: 30px; }
@media (max-width: 1240px) { .excel-backup-raster { grid-template-columns: 1fr; } }
/* Zurück-Zeile über dem Seitenkopf, wie in Skizze Web_8. */
.zurueck { display: inline-flex; align-items: center; gap: var(--a2);
           color: var(--gedaempft); text-decoration: none; font-weight: 600;
           margin-bottom: var(--a3); }
.zurueck:hover { color: var(--text); }
/* Technische Angaben in fester Breite -- ein Aufrufweg liest sich nur so. */
.technisch { margin: 0; padding: var(--a3); background: var(--grund);
             border: 1px solid var(--linie); border-radius: var(--r-feld);
             font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
             white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }

/* ======================================================================
   Filterleiste für Listenseiten
   ----------------------------------------------------------------------
   Leiste und Tabelle stehen in **einer** Karte: optisch eine Einheit, und
   es bleibt keine leere Fläche dazwischen. Alle Bedienelemente sind gleich
   hoch und sitzen auf einer Linie -- vorher standen die Status-Pillen
   tiefer als die Felder, weil nur die Felder ein Label hatten. Deshalb hat
   hier nichts mehr ein Label: Platzhalter und Symbole reichen.
   ====================================================================== */
.filterleiste {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--a3);
  padding: var(--a4) var(--a-karte);
  border-bottom: 1px solid var(--linie);
}
.filterzeile { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap;
               min-width: 0; width: 100%; }
/* Alles in einer Zeile gleich hoch. Vorher war der Suchkasten 50 px und die
   Knöpfe daneben 44 -- sechs Pixel, die man nicht benennen kann und trotzdem
   sieht. Die Segmentleiste ist der Rahmen um die Segmente und zählt mit. */
.filterleiste .feld, .filterleiste .knopf, .filterleiste .segment,
.filterleiste .filter-suche, .filterleiste .segmentleiste, .filterleiste .zeitraum {
  height: var(--h-tipp); min-height: var(--h-tipp);
}
.filterleiste .segment { height: calc(var(--h-tipp) - 6px); min-height: 0; }

/* Suchfeld mit Lupe. Das ✕ zum Leeren bringt type="search" selbst mit. */
.filter-suche { position: relative; flex: 1; min-width: 220px; }
.filter-suche > .sym { position: absolute; left: var(--a3); top: 50%; transform: translateY(-50%);
                       color: var(--platzhalter); pointer-events: none; }
.filter-suche .feld { padding-left: 40px; padding-right: 34px; }
/* Der Hinweis „/" steht im Feld, nicht daneben: daneben wäre er eine Spalte
   Breite für ein Zeichen. */
.filter-taste { position: absolute; right: var(--a3); top: 50%; transform: translateY(-50%);
                color: var(--platzhalter); pointer-events: none;
                font: 600 11px/1 var(--schrift); border: 1px solid var(--linie);
                border-radius: 4px; padding: 2px 5px; background: var(--grund); }
@media (max-width: 639px) { .filter-taste { display: none; } }

/* Segmentleiste: ein Block, kein Pillenhaufen. */
.segmentleiste {
  display: flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r-feld);
  overflow-x: auto; max-width: 100%;
}
.segment {
  display: inline-flex; align-items: center; gap: var(--a2);
  padding: 0 var(--a3); border: 0; border-radius: var(--r-feld);
  background: none; color: var(--gedaempft); cursor: pointer;
  font: 600 var(--s-zeile)/1 var(--schrift); white-space: nowrap;
}
.segment:hover { color: var(--text); }
.segment.aktiv { background: var(--segment-aktiv); color: var(--auf-segment-aktiv); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmentzahl { color: var(--gedaempft); font-variant-numeric: tabular-nums; font-weight: 400; }
.segment.aktiv .segmentzahl { color: var(--auf-segment-aktiv); }

/* Der Farbpunkt steht in der Leiste und in der Plakette -- dasselbe Zeichen
   an beiden Orten, sonst muss man zweimal lernen, was welche Farbe heißt. */
.statuspunkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
               background: var(--platzhalter); flex: 0 0 auto; margin-right: 6px; }
/* In einer Plakette darf der Punkt kleiner sein: dort trägt ihn der Text. */
.badge .statuspunkt { width: 6px; height: 6px; margin-right: 5px; }

/* Das Systemlog zeigt viele kurze Zeilen. Eine Zeile bleibt eine Zeile:
   Rohdaten stehen erst beim Aufklappen darunter. */
#systemlog-tabelle td { padding-top: var(--a2); padding-bottom: var(--a2); }
#systemlog-tabelle tr.aufklapp td { padding: var(--a3) var(--a-zelle); background: var(--grund); }
.rohdaten { margin: var(--a2) 0 0; font: var(--s-klein)/1.5 var(--schrift);
            color: var(--gedaempft); white-space: pre-wrap; overflow-wrap: anywhere;
            /* Zahlen untereinander: in Rohdaten steht viel Zahl. */
            font-variant-numeric: tabular-nums; }
.statuspunkt.z-entwurf { background: var(--platzhalter); }
.statuspunkt.z-unterschrieben { background: var(--warnung); }
.statuspunkt.z-geprueft, .statuspunkt.z-abgeschlossen { background: var(--text); }
.statuspunkt.z-offen { background: var(--warnung); }
/* Vorfälle und Systemlog: Schwere und Status im selben Zeichen wie überall. */
.statuspunkt.z-behoben { background: var(--text); }
.statuspunkt.z-kritisch { background: var(--fehler); }
.statuspunkt.z-warnung { background: var(--warnung); }
.statuspunkt.z-hinweis { background: var(--platzhalter); }

/* Auswahlen, die nur eine Seite braucht (Warengruppe, Farbe). Sie stehen in
   derselben Zeile wie die Suche und wirken sofort -- es gibt keinen Knopf
   „Filtern", weder hier noch sonst in der Leiste. */
.filter-wahl { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 220px; }

.filter-zurueck { margin-left: auto; }

/* Zeitraum: ein Knopf mit Menü statt zweier Textfelder. */
.zeitraum { position: relative; flex: 0 0 auto; }
.zeitraum-knopf { display: inline-flex; align-items: center; gap: var(--a2); white-space: nowrap; }
.zeitraum-menue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 260px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
  box-shadow: var(--schatten); padding: var(--a2);
}
.zeitraum-wahl {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: var(--a2) var(--a3); border-radius: var(--r-feld);
  font: 400 var(--s-text)/1.3 var(--schrift); color: var(--text);
}
.zeitraum-wahl:hover { background: var(--hervor); }
.zeitraum-eigen { border-top: 1px solid var(--linie); margin-top: var(--a2); padding: var(--a3) var(--a3) var(--a2); }
.zeitraum-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); margin-top: var(--a2); }

/* Beim Nachladen wird die Liste blasser, die Höhe bleibt -- sonst springt die
   Seite unter dem Finger weg. */
.listeninhalt { transition: opacity .12s; }
.listeninhalt.laedt { opacity: .6; pointer-events: none; }

/* Sortierbare Spaltenköpfe. */
.tab th[data-sort] { cursor: pointer; user-select: none; }
.tab th[data-sort]:hover { color: var(--text); }
.tab th[data-sort].sortiert::after { content: ' ▾'; }
.tab th[data-sort][aria-sort="ascending"]::after { content: ' ▴'; }

/* Leerzustand mit Weg nach vorn oder zurück. */
.leerzustand { display: flex; flex-direction: column; align-items: center; gap: var(--a3);
               padding: var(--a6) var(--a4); color: var(--gedaempft); text-align: center; }
.leerzustand b { color: var(--text); font-size: 16px; }
.leerzustand .sym { color: var(--platzhalter); }

/* Der Knopf „Filter" gehört dem Handy; am Schreibtisch steht alles nebeneinander. */
.filter-blatt-knopf { display: none; }
.filterblatt-fuss { display: none; }

/* Handy: neben der Suche steht nur noch „Filter“ mit der Zahl der gesetzten
   Filter. Alles Übrige -- Segmente, Zeitraum, Auswahlen -- liegt in einem Blatt
   von unten und wird mit „Anwenden“ übernommen. Ein Blatt statt vier Reihen
   Bedienelemente über der Liste: sonst sieht man auf dem Telefon den Filter
   und nicht das, wonach man gesucht hat. */
@media (max-width: 639px) {
  .filterleiste { padding: var(--a3); }
  .filter-suche { flex: 1; min-width: 0; }
  .filter-blatt-knopf { display: inline-flex; align-items: center; gap: var(--a2); flex: 0 0 auto; }

  /* Zeile 2 -- Segmente, Zeitraum, Auswahlen -- liegt im Blatt. */
  .filterleiste > .filterzeile:nth-child(2) { display: none; }

  .filterleiste.blatt-offen::before {
    content: ''; position: fixed; inset: 0; background: var(--schleier);
    z-index: 60;
  }
  .filterleiste.blatt-offen > .filterzeile:nth-child(2) { display: flex; }

  .filterleiste.blatt-offen > .filterzeile:nth-child(2),
  .filterleiste.blatt-offen > .filterblatt-fuss {
    position: fixed; left: 0; right: 0; z-index: 61;
    background: var(--flaeche); padding: var(--a4);
    border-top: 1px solid var(--linie);
  }
  .filterleiste.blatt-offen > .filterzeile:nth-child(2) {
    bottom: 72px; border-radius: var(--r-karte) var(--r-karte) 0 0;
    max-height: 60vh; overflow-y: auto; align-items: flex-start;
  }
  .filterleiste.blatt-offen > .filterblatt-fuss {
    display: flex; gap: var(--a3); bottom: 0;
    padding-bottom: calc(var(--a4) + env(safe-area-inset-bottom, 0px));
  }
  .filterleiste.blatt-offen > .filterblatt-fuss .knopf { flex: 1; }

  .zeitraum, .zeitraum-knopf { width: 100%; }
  .filter-wahl { flex: 1 1 calc(50% - var(--a2)); max-width: none; min-width: 0; }
  .zeitraum-menue { left: 0; right: 0; min-width: 0; }
  .filter-zurueck { margin-left: 0; width: 100%; }
  .segmentleiste { width: 100%; }
}

/* ---- Statuskacheln des Systemzustands (Web_7) ----
   Vier je Reihe, jede mit Punkt, Zustand, Name und einer Zeile Detail. Eine
   gestörte Kachel bekommt einen farbigen Rahmen -- man soll sie finden, ohne
   zu lesen. */
.statuskacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                 gap: var(--a4); margin-bottom: var(--a-abschnitt); }
.statuskachel { padding: 20px; min-width: 0; background: var(--flaeche);
                border: 1px solid var(--linie); border-radius: var(--r-karte); }
.statuskachel .punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
                       background: var(--text); margin-right: var(--a2); flex: 0 0 auto; }
.statuskachel .zustand { display: flex; align-items: center; font-size: var(--s-klein);
                         font-weight: 600; color: var(--gedaempft); }
.statuskachel b { display: block; margin: var(--a2) 0 var(--a1); font-size: 16px; }
.statuskachel .detail { display: block; color: var(--gedaempft); font-size: var(--s-klein);
                        overflow-wrap: anywhere; }
.statuskachel.stoerung { border-color: var(--fehler-linie); }
.statuskachel.stoerung .punkt { background: var(--fehler); }
.statuskachel.stoerung .zustand { color: var(--fehler); }
.statuskachel.warnung { border-color: var(--warnung-linie); }
.statuskachel.warnung .punkt { background: var(--warnung); }
.statuskachel.warnung .zustand { color: var(--warnung); }
@media (max-width: 1439px) { .statuskacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .statuskacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#sz-stoerung { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }
#sz-stoerung .knopf { margin-left: auto; }

/* ---- Abrechnung: Kachelraster 3 x 2 (Web_Abr_1) ----
   Die Grundregel fehlte nach dem Umbau ganz; ohne sie standen die sechs
   Kacheln als Fließtext hintereinander. */
.abrechnung-komponenten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a4); margin-bottom: var(--a-abschnitt);
}
.komponente {
  display: flex; flex-direction: column; gap: var(--a2);
  padding: var(--a-karte); min-width: 0;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
  color: inherit; text-decoration: none;
}
.komponente:hover { border-color: var(--text); }
.komponente-kopf { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a2); }
.komponente-sym {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--r-feld); color: var(--gedaempft);
}
.komponente-zusatz { margin-left: auto; font-size: var(--s-klein); color: var(--gedaempft);
                     text-align: right; overflow-wrap: anywhere; }
.komponente > b { font-size: 17px; font-weight: 700; }
.komponente-text { color: var(--gedaempft); font-size: var(--s-text); flex: 1; }
.komponente-oeffnen { display: flex; align-items: center; gap: var(--a1);
                      font-weight: 600; margin-top: var(--a2); }
@media (max-width: 900px) { .abrechnung-komponenten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .backup-stand { margin: 16px 0 0; white-space: normal; } .seitenkopf:has(.backup-stand) { display: block; } .excel-blaetter, .kennzahlen-kompakt, .abrechnung-komponenten { grid-template-columns: 1fr; } .export-fuss { align-items: stretch; flex-direction: column; } .backup-einstellungen { grid-template-columns: 1fr; } .backup-einstellungen .beschriftung, .backup-einstellungen .feld, .backup-einstellungen button { grid-row: auto; } .excel-protokoll-zeile { grid-template-columns: 70px 1fr; } .excel-protokoll-zeile .hilfe { grid-column: 2; text-align: left; } }

/* ---- Knöpfe, Felder, Chips ---- */
.knopf {
  height: var(--h-knopf); padding: 0 var(--a4);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  font: 600 var(--s-text)/1 var(--schrift);
  background: var(--flaeche); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--a2);
  text-decoration: none; white-space: nowrap;
}
.knopf:hover { background: var(--hervor); }
/* Textknopf: Knopf ohne Rahmen und Fläche, für „Zur Notiz“, „Erneut versuchen“ u. ä. */
.knopf.textknopf { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.knopf.textknopf:hover { background: var(--hervor); }
/* Leerer Zustand (09.10.2026): ruhige Karte mit Symbol, Titel, Satz und Knöpfen; ein Bauteil für alle Seiten. */
.leer-karte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--a2); padding: var(--a6);
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r-karte); max-width: 420px; }
.leer-karte-sym { color: var(--gedaempft); }
.leer-karte-titel { font-size: 16px; font-weight: 700; color: var(--text); }
.leer-karte-text { margin: 0; font-size: 14px; color: var(--gedaempft); }
.leer-karte-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a2); margin-top: var(--a2); }
.leer-karte-knoepfe .knopf { height: 36px; }
.leer-ueber { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--a4); pointer-events: none; z-index: 2; }
.leer-ueber .leer-karte { pointer-events: auto; }
.leer-traeger { position: relative; }
.knopf.haupt { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.knopf.haupt:hover { opacity: .9; background: var(--akzent); }
.knopf.gefahr { background: var(--fehler); color: var(--auf-akzent); border-color: var(--fehler); }
.knopf.gefahr:hover { opacity: .9; background: var(--fehler); }

/* Eigener Dialog statt prompt/confirm/alert */
.ab-dialog { border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); color: var(--text);
             box-shadow: var(--schatten); padding: var(--a5); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.ab-dialog.breit { width: min(760px, calc(100vw - 32px)); }
.ab-dialog::backdrop { background: var(--schleier); }
.ab-dialog h2 { margin: 0 0 var(--a3); }
.ab-dialog-text { margin: 0 0 var(--a4); color: var(--gedaempft); white-space: pre-line; }
.katalog-wahl { max-height: 46vh; overflow-y: auto; margin-top: var(--a3); }
.rb-wahl-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--a3);
                  max-height: 46vh; overflow-y: auto; margin: var(--a3) 0; }
.rb-wahl-karte { display: flex; flex-direction: column; gap: var(--a1); text-align: left; padding: var(--a3);
                 border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); color: var(--text); cursor: pointer; font: inherit; }
.rb-wahl-karte:hover { border-color: var(--akzent); }
.rb-wahl-karte.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.rb-wahl-markt { font-size: 1.15em; }
.ab-dialog-knoepfe { display: flex; justify-content: flex-end; gap: var(--a3); margin-top: var(--a4); }
.knopf.klein { height: 32px; font-size: var(--s-klein); padding: 0 var(--a3); }
.knopf.leise { font-weight: 400; color: var(--gedaempft); }
.knopf.leise:hover { color: var(--text); }
.knopf.breit { width: 100%; justify-content: center; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopfleiste { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }

.feld {
  height: var(--h-tipp); border: 1px solid var(--linie); border-radius: var(--r-feld);
  padding: 0 var(--a3); font: 400 var(--s-text) var(--schrift);
  color: var(--text); width: 100%; background: var(--flaeche);
}
.feld::placeholder { color: var(--platzhalter); }
.feld[readonly], .feld:disabled { background: var(--hervor); color: var(--gedaempft); }
.feld:focus { outline: none; border-color: var(--akzent); }
textarea.feld { height: auto; min-height: 84px; padding: var(--a2) var(--a3); resize: vertical; }
/* Der Auswahlpfeil kommt vom Browser. Er war vorher ein SVG mit stroke='black' --
   im Dunkelmodus unsichtbar -- und danach gar keiner mehr. Über color-scheme
   zeichnet der Browser ihn in beiden Modi richtig. */
select.feld { padding-right: var(--a2); }
.beschriftung { display: block; font-size: var(--s-klein); color: var(--gedaempft);
                margin-bottom: var(--a1); }
.formzeile { margin-bottom: var(--a4); }
.formzeile.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a3); }
.formfehler {
  border: 1px solid var(--fehler-linie); background: var(--fehler-flaeche); color: var(--fehler);
  border-radius: var(--r-feld); padding: var(--a3); margin-top: var(--a3); font-size: var(--s-klein);
}
.kaestchen { display: inline-flex; align-items: center; gap: var(--a2); font-size: var(--s-text);
             margin-right: var(--a4); cursor: pointer; }
.kaestchen input { width: 16px; height: 16px; margin: 0; accent-color: var(--akzent); }

.chip {
  height: 30px; border-radius: var(--r-chip); border: 1px solid var(--linie);
  padding: 0 var(--a3); font-size: var(--s-klein); display: inline-flex; align-items: center;
  gap: var(--a1); background: var(--flaeche); color: var(--gedaempft); text-decoration: none;
}
.chip:hover { color: var(--text); }
.chip.aktiv { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.chip.warnt { color: var(--warnung); border-color: var(--warnung-linie);
              background: var(--warnung-flaeche); }
.chip.fehlt { color: var(--fehler); border-color: var(--fehler-linie);
              background: var(--fehler-flaeche); }
.chipleiste { display: flex; gap: var(--a2); flex-wrap: wrap; align-items: center; }

.badge {
  font-size: 11px; font-weight: 600; padding: 3px var(--a2); border-radius: var(--r-chip);
  border: 1px solid var(--linie); color: var(--gedaempft);
  /* inline-flex, nicht inline-block: eine Plakette mit Farbpunkt brach sonst in
     schmalen Zellen um -- der Punkt oben, der Text darunter. */
  display: inline-flex; align-items: center; line-height: 1.4; white-space: nowrap;
}
.badge.invers { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.badge.leise { font-weight: 400; }
.badge.fehlt { color: var(--fehler); border-color: var(--fehler-linie); background: var(--fehler-flaeche); }

/* Schwere und Status haben je einen eigenen Stil -- keiner fällt auf den
   nackten Grundstil zurück. Ein Test wacht darüber, damit eine neue Stufe
   nicht als grauer Klumpen erscheint. */
/* Kritisch ist gefüllt, nicht nur umrandet -- es ist die einzige Stufe, bei
   der jemand aufstehen muss. */
.badge.z-kritisch { background: var(--fehler); color: var(--flaeche); border-color: var(--fehler); }
.badge.z-kritisch .statuspunkt { background: var(--flaeche); }
.badge.z-warnung { color: var(--warnung); border-color: var(--warnung-linie); background: var(--warnung-flaeche); }
.badge.z-hinweis { color: var(--gedaempft); border-color: var(--linie); background: var(--grund); font-weight: 400; }
.badge.z-offen { color: var(--warnung); border-color: var(--warnung-linie); background: var(--warnung-flaeche); }
.badge.z-behoben { color: var(--gedaempft); border-color: var(--linie); background: var(--grund); font-weight: 400; }

/* Der Belegversand: wartet, freigegeben, gesendet, abgelehnt, fehlgeschlagen.
   Jede Stufe mit eigenem Aussehen -- eine Plakette, die nur grau ist, sagt
   nichts darüber, ob der Beleg beim Kunden ist. */
.badge.z-wartet_freigabe { color: var(--warnung); border-color: var(--warnung-linie); background: var(--warnung-flaeche); }
.badge.z-freigegeben { color: var(--text); border-color: var(--linie); background: var(--hervor); }
.badge.z-gesendet { color: var(--gedaempft); border-color: var(--linie); background: var(--grund); font-weight: 400; }
.badge.z-abgelehnt { color: var(--gedaempft); border-color: var(--linie); background: var(--grund); font-weight: 400; }
.badge.z-fehler { color: var(--fehler); border-color: var(--fehler-linie); background: var(--fehler-flaeche); }

.statuspunkt.z-wartet_freigabe { background: var(--warnung); }
.statuspunkt.z-freigegeben { background: var(--text); }
.statuspunkt.z-gesendet { background: var(--platzhalter); }
.statuspunkt.z-abgelehnt { background: var(--platzhalter); }
.statuspunkt.z-fehler { background: var(--fehler); }
.tab tr.leise td { color: var(--gedaempft); }

/* ---- Karte ---- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
         padding: var(--a-karte); }
.karte + .karte { margin-top: var(--a-abschnitt); }
/* Formularseiten wie „Mein Profil" bleiben schmal; über 720 px liest sich ein
   Formular nicht besser, es zerfasert nur. */
.seite.schmal, section.schmal { max-width: var(--b-formular-max); }
.karte + .karte, form.karte + .karte, .karte + form.karte { margin-top: var(--a-abschnitt); }
.kartenfuss { display: flex; justify-content: flex-end; margin-top: var(--a4); }
/* Eine Zeile in der Karte „Sicherheit": links die Sache, rechts der Knopf. */
.sicherheit-zeile {
  display: flex; align-items: center; gap: var(--a4);
  padding: var(--a3) 0; border-top: 1px solid var(--linie);
}
.sicherheit-zeile:first-of-type { border-top: 0; padding-top: 0; }
.sicherheit-zeile > div:first-child { min-width: 0; flex: 1; }
.sicherheit-zeile b { display: block; }
.sicherheit-zeile .zweite { display: block; color: var(--gedaempft); font-size: var(--s-klein); margin-top: 2px; }
.sicherheit-zeile > .knopf, .sicherheit-zeile > button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .sicherheit-zeile { flex-direction: column; align-items: stretch; }
}
.karte > h2, .kartentitel {
  font-size: var(--s-abschnitt); font-weight: 600;
  color: var(--gedaempft); margin: 0 0 var(--a-titel);
}
/* Beschriftung und Wert bekommen immer Abstand. Ohne diese Regel klebte
   "RolleIT (extern)" zusammen -- der Wert stand direkt hinter der Beschriftung. */
.daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: var(--a3) var(--a5); margin: 0; }
.daten dt, .daten .beschriftung { color: var(--gedaempft); font-size: var(--s-klein);
                                  margin: 0 0 var(--a1); }
.daten dd { margin: 0 0 var(--a3); }

/* ---- Füllstandsbalken ---- */
.balken { height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--akzent); }
.balken.warnt > span { background: var(--warnung); }
.balken.fehlt > span { background: var(--fehler); }

/* ---- Leerzustand ---- */
.leer { color: var(--gedaempft); padding: var(--a6) 0; text-align: center; font-size: var(--s-text); }
/* Leere Tabelle: eine Zeile über die volle Breite, gedämpfter Text, kein Kasten
   und kein Einzug. Die Zeile ist keine Datenzeile -- sie hebt sich nicht hervor. */
.tab tbody tr.leerzeile, .tab tbody tr.leerzeile:hover td { background: none; }
.tab tr.leerzeile td { border-bottom: 0; padding-left: 0; padding-right: 0; }
.tab tr.leerzeile td.leer { color: var(--gedaempft); text-align: center; padding: var(--a6) 0; }

/* ---- Status-Glyphen ---- */
.g { width: 11px; height: 11px; border: 1.5px solid var(--text); display: inline-block;
     margin-right: var(--a1); vertical-align: -1px; }
.g-ok { background: var(--text); }
.g-min { background: linear-gradient(0deg, var(--warnung) 45%, transparent 45%); }
.g-zero { background: transparent; }
.g-neg { border-color: var(--fehler); }
.g-open { border-style: dashed; border-color: var(--gedaempft); }
.g-price { border-style: dotted; }

/* ---- Hinweisleisten ---- */
.hinweis {
  border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-karte);
  padding: var(--a3) var(--a4); margin-bottom: var(--a5);
  display: flex; gap: var(--a3); align-items: center; font-size: var(--s-text);
}
.hinweis.ok { border-color: var(--linie); }
.hinweis.warnung { background: var(--warnung-flaeche); border-color: var(--warnung-linie);
                   color: var(--warnung); }
.hinweis.fehler { background: var(--fehler-flaeche); border-color: var(--fehler-linie);
                  color: var(--fehler); }
.hinweis .link { font-size: var(--s-klein); font-variant-numeric: tabular-nums;
                 word-break: break-all; flex: 1; }

/* Drawer, ohne JavaScript über :target erreichbar */
/* ---- Seitenformulare und Dialoge ----
   Sie liegen über allem, auch über der Kopfleiste, haben einen eigenen deckenden
   Hintergrund und dunkeln ab, was dahinter liegt. Der abgedunkelte Hintergrund
   ist ein Schlagschatten über den ganzen Bildschirm -- so braucht kein Dialog ein
   zusätzliches Element im Markup. Kopf, Inhalt und Knöpfe liegen innerhalb.
   Am 28.09. war der Hintergrund durchsichtig, weil er auf einer Variablen stand,
   die es nicht mehr gab; die Tabelle darunter schien durch. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0;
          width: 640px; max-width: 100vw;
          background: var(--flaeche); color: var(--text);
          border-left: 1px solid var(--linie);
          transform: translateX(100%); transition: transform .18s ease;
          z-index: 80; display: flex; flex-direction: column; }
.drawer.offen { transform: none; box-shadow: var(--schatten); }
/* Die Abdunklung ist ein **Geschwister** des Fensters, kein Kind.
   Als Kind mit z-index: -1 lag sie über dem eigenen Hintergrund des Fensters --
   das ganze Formular war grau. So liegt sie zwischen Seite und Fenster. */
body:has(.drawer.offen)::before,
body:has(dialog[open])::before {
  content: ''; position: fixed; inset: 0; z-index: 70;
  background: var(--schleier);
}
/* Manche Fenster umschließen Inhalt und Fuß mit einem <form>. Ohne diese Regel
   ist das Formular ein gewöhnlicher Block, der Fuß rutscht unten aus dem Bild
   und der Speichern-Knopf ist nicht erreichbar. */
.drawer > form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer-kopf { display: flex; align-items: center; justify-content: space-between;
                padding: var(--a4) var(--a-karte); border-bottom: 1px solid var(--linie); flex: 0 0 auto; }
.drawer-kopf h2 { font-size: 22px; }
.drawer-kopf a, .drawer-kopf button { color: var(--text); background: none; border: 0; cursor: pointer; display: flex; padding: 4px; }
/* Innenrand 24 px, Felder 12 px untereinander, Abschnittsüberschriften mit
   24 px darüber und 8 px darunter. */
.drawer-inhalt { padding: var(--a-karte); overflow: auto; flex: 1; min-height: 0; }
.drawer-inhalt .formzeile { margin-bottom: var(--a3); }
.drawer-inhalt h3, .drawer-inhalt .abschnittkopf { margin: var(--a5) 0 var(--a2); }
.drawer-inhalt > :first-child { margin-top: 0; }
/* Speichern gehört in die Fußleiste, nicht mitten in den Inhalt. */
.drawer-inhalt > .knopfleiste:last-child { margin-top: var(--a5); }
/* Genau eine Knopfleiste, fest am unteren Rand: links Abbrechen, rechts der
   Hauptknopf. Sie rollt nicht mit dem Inhalt weg. */
.drawer-fuss { padding: var(--a4) var(--a-karte); border-top: 1px solid var(--linie);
               display: flex; gap: var(--a3); align-items: center; flex: 0 0 auto;
               background: var(--flaeche); }
.drawer-fuss .knopf.haupt, .drawer-fuss button[type="submit"] { margin-left: auto; }

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

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

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

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

/* Druck */
/* Logo im Ausdruck: am Bildschirm unsichtbar, gedruckt oben links wie auf den PDFs. */
.druck-logo { display: none; }
@media print {
  .druck-logo { display: block; width: 45mm; height: auto; margin: 0 0 6mm; filter: grayscale(1); }
  .seitenleiste, .kopfzeile, .knopf, .drawer, .filter, .hinweis { display: none !important; }
  .seite { padding: 0; }
  body { font-size: 9.5px; }
  @page { size: A4; margin: 12mm; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .seitenleiste { width: auto; flex: none; height: auto; position: static; }
  .nav { max-height: 40vh; }
  .kopfzeile, .seite { padding-left: 16px; padding-right: 16px; }
  .band { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .band > div:first-child { padding-left: 18px; }
}

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

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

/* Schritt 2: Stammdaten */
.drawer.breit { width: 860px; }
/* ---- Große Formulare als ganze Seite ----
   Montageauftrag, Kundenauftrag, Kommissionierschein, Lieferschein und
   Regiebericht haben Positionen. In einem 860-px-Fenster steht jede
   Positionszeile im Weg; sie brauchen die Breite, wie in den Skizzen 04, 26, 38.
   Sie liegen deshalb über dem Inhalt, nicht neben ihm -- Seitenleiste und
   Kopfleiste bleiben sichtbar, damit man weiß, wo man ist. */
.drawer.ganzseitig {
  top: var(--h-kopfleiste); left: var(--b-seitenleiste); right: 0; bottom: 0;
  width: auto; max-width: none; border-left: 0; border-top: 1px solid var(--linie);
  transform: translateY(100%);
}
.drawer.ganzseitig.offen { transform: none; }
.drawer.ganzseitig .drawer-kopf,
.drawer.ganzseitig .drawer-inhalt,
.drawer.ganzseitig .drawer-fuss { padding-left: var(--rand); padding-right: var(--rand); }
.drawer.ganzseitig .drawer-inhalt { max-width: 1680px; width: 100%; margin: 0 auto; }
/* Klappt die Seitenleiste ein oder weg, geht das Formular bis an den Rand. */
.app.leiste-schmal .drawer.ganzseitig { left: 64px; }
@media (max-width: 1023px) { .drawer.ganzseitig { left: 0; } }
@media (max-width: 767px) { .drawer.ganzseitig { top: 0; } }
.feld.datei { padding-top: 7px; }
.tab th.preis, .tab td.preis { white-space: nowrap; }
.kette { list-style: none; display: flex; margin: 22px 0 28px; padding: 0; border: 1.5px solid var(--text); border-radius: 3px; overflow: hidden; }
.kette li { flex: 1; padding: 9px 12px; font-size: 12.5px; font-weight: 700; text-align: center; border-right: 1.5px solid var(--text); color: var(--gedaempft); }
.kette li:last-child { border-right: 0; }
.kette li.erreicht { color: var(--text); }
.kette li.aktuell { background: var(--akzent); color: var(--auf-akzent); }
.kette li.storniert { background: repeating-linear-gradient(45deg, var(--text) 0 1.5px, var(--flaeche) 1.5px 6px); color: var(--text); }
dl.daten { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 0; }
dl.daten dt { font-size: 12px; color: var(--gedaempft); }
dl.daten dd { margin: 0; }
.tab tr.klickbar { cursor: pointer; }
.tab tr.status-fehler td { background: var(--flaeche); }
.tab .g { margin-right: 6px; }
.zahl.klein { font-size: 28px; }
.tab input.feld.inline { height: 28px; padding: 0 8px; font-size: 12.5px; width: 92px; border-color: var(--linie); }
.tab input.feld.inline:focus { border-color: var(--text); }
.tab input.feld.inline.num { text-align: right; width: 72px; }
.tab input.feld.inline.gespeichert { border-color: var(--text); background: var(--flaeche); }
.entwicklungshinweis { border-top: 1px solid var(--linie); padding: 9px 18px; font-size: 11.5px; color: var(--platzhalter); display: flex; align-items: center; gap: 7px; }
.entwicklungshinweis::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--platzhalter); background: repeating-linear-gradient(45deg, var(--platzhalter) 0 1.5px, transparent 1.5px 3.5px); flex: 0 0 auto; }

/* Regiebericht: Detailansicht nach Skizze 06 */
.regie-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; }
.regie-haupt { padding-right: 32px; }
.regie-pruefung { border-left: 1.5px solid var(--text); padding: 0 0 0 26px; margin-left: 6px; }
.regie-pruefung h2 { font-size: 20px; margin-bottom: 4px; }
.regie-pruefung .klein-h2 { font-size: 15px; display: flex; align-items: center; gap: 7px; }
@media (max-width: 1240px) { .regie-detail { grid-template-columns: 1fr; } .regie-haupt { padding-right: 0; } .regie-pruefung { border-left: 0; border-top: 1.5px solid var(--text); padding: 22px 0 0; margin: 26px 0 0; } }
.regie-spalten { grid-template-columns: minmax(0, 1fr); gap: 0; }
.regie-spalten > div > .abschnitt { max-width: 1040px; }
.regie-spalten .tab { max-width: 1040px; }
.regie-spalten .band.schmal { max-width: 1040px; }
.regie-spalten .band.schmal .zahl { font-size: 24px; overflow-wrap: anywhere; white-space: normal; }
.regie-spalten .band.schmal .zusatz { overflow-wrap: anywhere; }
.regie-kopfzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.regie-kopfzeile .knopf { margin-left: auto; }
.regie-sperre { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gedaempft); }
.regie-beschreibung-label { margin: 15px 0 5px; font-size: 12px; color: var(--gedaempft); }
.regie-text { min-height: 78px; margin: 0; padding: 10px 12px; border: 1px solid var(--gedaempft); background: var(--grund); color: var(--text); font-size: 13px; line-height: 1.55; font-style: normal; white-space: pre-wrap; }
.regie-text:empty::before { content: 'Noch keine Beschreibung erfasst.'; color: var(--gedaempft); }
.band.schmal { margin: 0; }
.band.schmal .zahl { font-size: 22px; }
.band.schmal > div { padding: 10px 14px 11px; }
.pruefliste { list-style: none; margin: 18px 0 20px; padding: 0; }
.pruefliste li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.pruefliste li .sym { flex: 0 0 auto; margin-top: 1px; }
.pruefliste li b { display: block; font-size: 13px; }
.pruefliste li span { display: block; font-size: 12px; color: var(--gedaempft); margin-top: 2px; }
.knopfleiste.senkrecht { flex-direction: column; align-items: stretch; }
.knopfleiste.senkrecht .knopf { justify-content: center; }
.verlauf { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; }
.verlauf li { display: flex; gap: 10px; padding: 4px 0; color: var(--gedaempft); }
.verlauf li b { color: var(--text); font-weight: 400; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.unterschrift-feld { border-top: 1px solid var(--linie); padding-top: 10px; }
.unterschrift-feld .bild { height: 54px; display: flex; align-items: flex-end; }
.unterschrift-feld .bild img { max-height: 54px; max-width: 100%; }
.unterschrift-feld b { display: block; font-size: 13px; margin-top: 6px; }
.unterschrift-feld .hilfe { font-size: 11.5px; }
.fotogitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fotogitter figure { margin: 0; }
.fotogitter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--linie); display: block; }
.fotogitter figcaption { font-size: 11.5px; color: var(--gedaempft); margin-top: 5px; }
/* Erfassung in Schritten */
.schrittleiste { display: flex; gap: 3px; padding: 0 20px 14px; }
.schrittleiste span { flex: 1; height: 3px; background: var(--linie); }
.schrittleiste span.erledigt { background: var(--text); }
.schrittleiste span.aktuell { background: var(--gedaempft); }
.zeitblock { border: 1.5px solid var(--text); border-radius: 3px; padding: 14px; margin-bottom: 14px; }
.zeitblock.aus { border-color: var(--linie); }
.zeitblock .kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.zeitblock .kopf b { font-size: 14px; }
.zeitblock .kopf .ergebnis { margin-left: auto; font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 700; }
.zeitblock .felder { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.zeitblock .personen { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.zeitblock .personen .knopf { width: 38px; justify-content: center; padding: 0; font-size: 17px; }
.zeitblock .personen .wert { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 26px; text-align: center; }
.zeitblock .personen .hilfe { margin-left: auto; }
.summenband { background: var(--akzent); color: var(--auf-akzent); padding: 13px 16px; display: flex; align-items: center; border-radius: 3px; }
.summenband .zahl { margin-left: auto; font-size: 26px; font-variant-numeric: tabular-nums; font-weight: 700; }
.zeile-liste { margin-bottom: 14px; }
.zeile-liste .zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.zeile-liste .zeile .wer { flex: 1; min-width: 0; }
.zeile-liste .zeile .wer b { display: block; font-size: 13px; }
.zeile-liste .zeile .wer span { display: block; font-size: 12px; color: var(--gedaempft); }
.zeile-liste .zeile .feld { width: 90px; }
.kaestchenliste label { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linie); border-radius: 3px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.kaestchenliste label input { width: 18px; height: 18px; accent-color: var(--akzent); margin: 0; }
.kaestchenliste label.an { border-color: var(--text); border-width: 1.5px; }
/* Unterschriftenfeld: **immer Papier, auch im Dunkelmodus.**
   Der Strich wird als schwarzes PNG gespeichert und landet so auf dem weißen
   PDF. Auf dunklem Grund unterschrieb der Kunde schwarz auf fast schwarz und
   sah nichts -- auf dem iPad, das abends von selbst umschaltet, ein Ausfall
   der Rückfallebene. Ein weißes Feld sagt außerdem: hier wird unterschrieben. */
.unterschrift-flaeche {
  border: 1.5px solid var(--papier-linie); border-radius: 3px; touch-action: none;
  display: block; width: 100%; height: 170px;
  background: var(--papier); color-scheme: light;
}
/* Auf dem iPad quer ist der Platz knapper; 140 px reichen für eine Unterschrift. */
@media (max-height: 820px) and (min-width: 700px) {
  .unterschrift-flaeche { height: 140px; }
}

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

/* Schritt 4: Kommissionierung, Lieferschein, Pauschalen */
.reiter button { padding: 0 16px; height: 36px; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 13px; border: 0; border-right: 1.5px solid var(--text); color: var(--text); background: var(--grund); cursor: pointer; }
.reiter button:last-child { border-right: 0; }
.reiter button.aktiv { background: var(--akzent); color: var(--auf-akzent); }
ul.liste { list-style: none; margin: 0; padding: 0; }
ul.liste li { padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
ul.liste li:last-child { border-bottom: 0; }
ol.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
ol.schritte li { counter-increment: schritt; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--linie); position: relative; font-size: 13px; }
ol.schritte li:last-child { border-bottom: 0; }
ol.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 9px; width: 19px; height: 19px; border: 1.5px solid var(--platzhalter); border-radius: 50%; text-align: center; line-height: 16px; font-size: 11px; font-weight: 700; color: var(--gedaempft); }
ol.schritte li.erledigt::before { background: var(--text); border-color: var(--akzent); color: var(--auf-akzent); }
ol.schritte li b { display: block; }
ol.schritte li .hilfe { display: block; }
.tab tr.seitenende td { border-bottom: 1.5px solid var(--text); }
.tab td.warnung { font-weight: 700; }
.feld.zeile { height: 28px; padding: 0 6px; font-size: 13px; }
.beleg-status { min-height: 24px; margin-bottom: 9px; }
.beleg-status:empty { display: none; }
.lieferschein-detail { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .82fr); gap: 30px; align-items: start; }
.lieferschein-inhalt { min-width: 0; }
.lieferschein-inhalt .daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 0; }
.lieferschein-inhalt .daten .datenfeld { min-width: 0; }
.lieferschein-inhalt .daten .datenfeld.breit { grid-column: 1 / -1; }
.lieferschein-inhalt .daten .beschriftung { margin: 0 0 5px; }
.lieferschein-inhalt .daten .knopfleiste { margin: 2px 0 0; }
.lieferschein-inhalt .schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--text); border-bottom: 1px solid var(--text); }
.lieferschein-inhalt .schritte li { min-height: 108px; padding: 40px 10px 12px; border: 0; border-left: 1px solid var(--linie); }
.lieferschein-inhalt .schritte li:first-child { border-left: 0; }
.lieferschein-inhalt .schritte li::before { left: 10px; top: 12px; border: 0; width: auto; height: auto; color: var(--text); font-size: 28px; line-height: 1; text-align: left; }
.lieferschein-inhalt .schritte li.erledigt::before { background: transparent; color: var(--text); }
.lieferschein-vorschau-bereich { min-width: 0; }
.lieferschein-vorschau { width: 100%; max-width: 470px; aspect-ratio: 210 / 297; margin: 0 auto; padding: 6.2% 6.5%; background: var(--grund); border: 1px solid var(--linie); box-shadow: 8px 10px 0 var(--flaeche); overflow: hidden; font-size: clamp(5px, .62vw, 8px); line-height: 1.25; }
.lsv-kopf { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--text); }
.lsv-logo { display: flex; align-items: flex-start; min-width: 0; }
.lsv-logo img { display: block; width: 100%; max-width: 150px; height: auto; }
.lsv-meta-kopf { text-align: right; font-size: .9em; }
.lsv-titel { margin: 13px 0 11px; font-size: 2.25em; font-weight: 700; letter-spacing: -.04em; }
.lsv-untertitel { margin: -7px 0 11px; color: var(--gedaempft); font-size: .75em; }
.lsv-adresse { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-bottom: 13px; }
.lsv-adresse p { margin: 0; }
.lsv-adresse b { display: block; margin-bottom: 4px; }
.lsv-meta { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2px 6px; }
.lsv-meta b { font-weight: 700; }
.lsv-tabelle { width: 100%; border-collapse: collapse; font-size: .84em; }
.lsv-tabelle th { text-align: left; font-weight: 700; padding: 3px 2px; border-bottom: 1px solid var(--text); background: var(--linie); }
.lsv-tabelle td { padding: 4px 2px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.lsv-tabelle td b { display: block; font-weight: 400; }
.lsv-tabelle td span { display: block; margin-top: 1px; color: var(--gedaempft); font-size: .82em; }
.lsv-tabelle .num { text-align: right; }
.lsv-summe { margin: 6px 0 0; font-size: .88em; }
.lsv-hinweis { margin-top: 9px; padding-top: 4px; border-top: 1px solid var(--linie); font-size: .82em; }
.lsv-empfang { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26%; font-size: .74em; }
.lsv-signatur { height: 24px; border-bottom: 1px solid var(--text); display: flex; align-items: end; }
.lsv-signatur img { max-width: 100%; max-height: 22px; }
.lsv-fuss { margin-top: 4px; font-size: .78em; }
.lsv-empfangsvermerk { margin-top: 5px; color: var(--gedaempft); font-size: .69em; }
@media (max-width: 1240px) { .lieferschein-detail { grid-template-columns: 1fr; } .lieferschein-vorschau { max-width: 500px; margin-left: 0; } }
@media (max-width: 720px) { .lieferschein-inhalt .daten { grid-template-columns: 1fr; } .lieferschein-inhalt .daten .datenfeld.breit { grid-column: auto; } .lieferschein-inhalt .schritte { grid-template-columns: 1fr 1fr; } .lieferschein-inhalt .schritte li:nth-child(odd) { border-left: 0; } }
/* ---- Rechtlich noch offen ----
   Eingeklappt eine Zeile mit Warnsymbol und Zahl, wie in der App. Aufgeklappt
   die ganze Liste. Der Kasten sieht nur die, die ihn erledigen können. */
[data-offene-punkte] { border: 1px solid var(--warnung-linie); border-radius: var(--r-karte);
                       background: var(--warnung-flaeche); overflow: hidden; }
.punkte-kopf {
  display: flex; align-items: center; gap: var(--a3); width: 100%;
  padding: var(--a3) var(--a4); border: 0; background: none; cursor: pointer;
  font: 600 var(--s-text)/1.3 var(--schrift); color: var(--warnung); text-align: left;
}
.punkte-kopf .sym { flex: 0 0 auto; }
.punkte-titel { min-width: 0; }
.punkte-pfeil { margin-left: auto; transition: transform .15s; }
[data-offene-punkte].offen .punkte-pfeil { transform: rotate(180deg); }
.punkte-inhalt { display: none; padding: 0 var(--a4) var(--a4); }
[data-offene-punkte].offen .punkte-inhalt { display: block; }
.punkt-kopf { display: flex; align-items: center; gap: var(--a2); }
ul.liste.punkte { margin: 0; }
ul.liste.aufmerksamkeit li { display: flex; align-items: center; gap: 8px; }
ul.liste.aufmerksamkeit li .rechts { margin-left: auto; white-space: nowrap; }
/* Knopf ohne Funktion, weil der Baustein noch fehlt: sichtbar, aber nicht klickbar. */
.knopf.aus { color: var(--platzhalter); border-color: var(--linie); background: var(--grund); cursor: default; pointer-events: none; }
.knopf.aus .hilfe { color: var(--platzhalter); }
.nav-aus { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: var(--platzhalter); font-size: 13px; cursor: default; }
.nav-aus .kommt { margin-left: auto; font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
/* Breite Tabellen rollen innerhalb ihrer Spalte, statt in die Nachbarspalte zu laufen. */
/* Eine Tabelle, die breiter ist als ihr Platz, rollt in sich -- statt die
   ganze Seite zu verbreitern und Knöpfe aus dem Bild zu schieben. */
.rollbar { overflow-x: auto; max-width: 100%; }
.rollbar > .tab { min-width: 100%; }
#kom-positionen .feld.zeile { width: 64px; }
#kom-positionen select.feld.zeile { min-width: 104px; }

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

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

/* ---- Mitgehendes Layout ----------------------------------------------------
   Sechs Stufen, von der Hosentasche bis zum Fernseher. Der Menü-Knopf erscheint,
   sobald die Seitenleiste einklappt -- vorher verschwand sie unter 900 px
   kommentarlos und es gab keinen Weg mehr in die Navigation.
   -------------------------------------------------------------------------- */
.seitenleiste-knopf {
  display: none; align-items: center; justify-content: center;
  width: var(--h-tipp); height: var(--h-tipp);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  background: var(--flaeche); color: var(--text); cursor: pointer; flex: 0 0 auto;
}

/* Ab 1440 px: Innenrand 40 px, sonst wie die Skizzen. */
/* --rand wächst selbst mit (clamp); eine eigene Stufe braucht es nicht mehr. */

/* Ab 2560 px: der Inhalt wird nicht breiter, die Schrift sanft größer. */
@media (min-width: 2560px) {
  :root { --s-text: clamp(14px, 0.62vw, 18px); --s-zeile: clamp(14px, 0.62vw, 18px); }
}

/* 1024 bis 1439 px: schmalere Seitenleiste, Detailspalten werden Seitenfenster. */
@media (max-width: 1439px) and (min-width: 1024px) {
  :root { --b-seitenleiste: 232px; }
}

/* Tablet, 768 bis 1023 px: Seitenleiste einklappbar, standardmäßig zu.
   Kacheln drei je Reihe, Detailspalten unter die Liste. */
@media (max-width: 1023px) {
  .inhalt { width: 100%; }
  .band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mit-detail, .zweispaltig { grid-template-columns: 1fr; }
  .tab-wrap, .tabellenrollbar { overflow-x: auto; }
}

/* Handy, bis 767 px: die Leiste verschwindet ganz und kommt über den Menüknopf als Überlagerung.
   Zwischen 768 und 1099 px bleibt die schmale Symbolleiste stehen (siehe „Seitenleiste ein- und ausklappen“). */
@media (max-width: 767px) {
  .seitenleiste-knopf { display: inline-flex; }
  .seitenleiste, .app.leiste-schmal .seitenleiste {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 90;
    width: 280px; flex-basis: 280px;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .app.seitenleiste-offen .seitenleiste { transform: translateX(0); box-shadow: var(--schatten); }
  .app.seitenleiste-offen::before {
    content: ''; position: fixed; inset: 0; z-index: 85; background: var(--schleier);
  }
  .leiste-klapp { display: none; }
}

/* Handy, bis 767 px: Tabellen werden Karten, Formulare einspaltig,
   Seitenfenster im Vollbild, Knopfleisten unten fest. */
@media (max-width: 767px) {
  /* --rand ist per clamp schon bei 16 px; hier bleibt nur, was wirklich anders ist. */
  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seitenkopf { flex-direction: column; gap: var(--a3); }
  .seitenkopf .aktionen { margin-left: 0; width: 100%; }
  .seitenkopf .aktionen .knopf { flex: 1; justify-content: center; }
  .formzeile.nebeneinander, .formzeile-zwei { grid-template-columns: 1fr; }

  /* Jede Zeile wird eine Karte. Die Kopfzeile verschwindet; jede Zelle trägt
     ihre Beschriftung selbst, aus data-spalte. */
  .tab.karten thead { display: none; }
  .tab.karten, .tab.karten tbody, .tab.karten tr, .tab.karten td { display: block; width: 100%; }
  .tab.karten tr {
    border: 1px solid var(--linie); border-radius: var(--r-karte);
    padding: var(--a3); margin-bottom: var(--a3); height: auto;
    background: var(--flaeche);
  }
  .tab.karten td {
    border: 0; padding: var(--a1) 0; display: flex; gap: var(--a3);
    align-items: baseline; justify-content: space-between; text-align: right;
  }
  .tab.karten td::before {
    content: attr(data-spalte); color: var(--gedaempft); font-size: var(--s-klein);
    text-align: left; flex: 0 0 auto;
  }
  .tab.karten td:empty, .tab.karten td.leer::before { display: none; }
  /* Eine Zelle mit zweiter Zeile ist im Kartenmodus ein Flex-Element; ohne
     Umbruch stünde die zweite Zeile neben der ersten und liefe aus der Karte.
     `min-width: 0` lässt langen Text auch wirklich brechen. */
  .tab.karten td { flex-wrap: wrap; }
  .tab.karten td > .zweite { flex: 1 0 100%; text-align: right; min-width: 0;
                             overflow-wrap: anywhere; }

  .drawer { width: 100%; max-width: 100%; border-left: 0; }
  .drawer-fuss {
    position: sticky; bottom: 0; background: var(--flaeche);
    border-top: 1px solid var(--linie); padding: var(--a3) var(--a-karte);
  }
  .drawer-fuss .knopf { flex: 1; justify-content: center; min-height: var(--h-knopf); }
}

/* Breite Tabellen rollen in ihrem Kasten, die Seite selbst scrollt nie seitlich. */
.tabellenrollbar { overflow-x: auto; max-width: 100%; }
body { overflow-x: hidden; }
/* Bei gestapelten Spalten steht zuerst, was Aufmerksamkeit braucht, nicht das Diagramm. */
@media (max-width: 1180px) {
  .zweispaltig > div:last-child { order: -1; }
}
/* Probe-Umgebung: auf jeder Seite sichtbar, damit niemand sie für den Echtbetrieb hält. */
.probe-fahne { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--warnung) 0 7px, var(--warnung-linie) 7px 14px); color: var(--auf-akzent); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.probe-fahne b { font-weight: 400; font-variant-numeric: tabular-nums; opacity: .85; }
body.ist-probe .kopfzeile { border-bottom-width: 3px; }
/* Zwischenüberschrift in der Bausteinliste, trennt Weboberfläche und App. */
.tab tr.gruppenzeile td { background: var(--flaeche); border-top: 1.5px solid var(--text); padding-top: 10px; font-size: 12px; letter-spacing: .3px; }

/* ======================================================================
   Anmeldeseite nach Web_1: links Logo und Regalzeichnung, rechts das Formular.
   ====================================================================== */

/* Das Logo als Maske auf einer Fläche in Textfarbe: so ist es in Hell schwarz
   und in Dunkel weiß, ohne zwei Bilddateien. Kommt später ein SVG von Toni,
   wird nur die Datei getauscht. */
.ab-logo {
  display: block;
  width: 276px;
  height: 40px;
  background: currentColor;
  -webkit-mask: url("/bilder/logo_weiss.png") no-repeat left center / contain;
  mask: url("/bilder/logo_weiss.png") no-repeat left center / contain;
}

.anmeldeseite { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
                background: var(--grund); color: var(--text); }
.anmelde-bild { position: relative; display: flex; flex-direction: column;
                align-items: center; justify-content: center;
                border-right: 1px solid var(--linie); padding: var(--a6); }
.anmelde-logo { position: absolute; top: var(--a6); left: var(--a6); }
.regal { width: min(70%, 420px); height: auto; color: var(--akzent); }

.anmelde-form { position: relative; display: flex; align-items: center;
                justify-content: center; padding: var(--a6); }
.anmelde-mitte { width: min(100%, 420px); }

/* Drei Knöpfe in einer Kapsel. In der Kopfleiste steht sie in der Reihe mit;
   nur auf der Anmeldeseite, die keine Kopfleiste hat, schwebt sie oben rechts. */
.darstellung-umschalter {
  display: flex; gap: var(--a1); padding: var(--a1);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-chip);
}
.darstellung-umschalter button {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: var(--r-chip); background: transparent;
  color: var(--gedaempft); cursor: pointer;
}
.darstellung-umschalter button:hover { color: var(--text); }
.darstellung-umschalter button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
.darstellung-umschalter button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.anmeldeseite .darstellung-umschalter { position: absolute; top: var(--a5); right: var(--a5); z-index: 2; }

.anmeldeseite h1 { font-size: var(--s-titel); line-height: 1.1; margin: 0; letter-spacing: 0; }
.strich { display: block; width: 190px; height: 10px; margin: var(--a3) 0 var(--a4);
          color: var(--akzent); }
.anmelde-text { color: var(--gedaempft); margin: 0 0 var(--a5); font-size: var(--s-text); }
.anmelde-h2 { font-weight: 700; font-size: 22px;
              margin: var(--a5) 0 var(--a2); }
.anmelde-klein { color: var(--gedaempft); font-size: var(--s-klein); margin: var(--a3) 0; }
.anmelde-klein code { font-family: var(--schrift); letter-spacing: 0.06em; color: var(--text); }
.anmelde-fuss { color: var(--gedaempft); font-size: var(--s-klein); text-align: center;
                margin: var(--a4) 0 0; line-height: 1.6; }

/* Eingabefeld mit Symbol links und optionalem Knopf rechts. */
.feldzeile { position: relative; margin-bottom: var(--a3); }
.feldzeile .feld-sym { position: absolute; left: var(--a4); top: 50%; transform: translateY(-50%);
                       color: var(--platzhalter); pointer-events: none; }
.feld.gross {
  width: 100%; height: 56px; padding: 0 var(--a5) 0 46px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  font: 400 var(--s-text)/1.4 var(--schrift);
}
.feld.gross::placeholder { color: var(--platzhalter); }
.feld.gross:focus { outline: none; border-color: var(--akzent); }
.feldzeile .feld-knopf {
  position: absolute; right: var(--a3); top: 50%; transform: translateY(-50%);
  width: var(--h-tipp); height: var(--h-tipp); display: grid; place-items: center;
  border: 0; background: transparent; color: var(--platzhalter); cursor: pointer;
  border-radius: var(--r-feld);
}
.feldzeile .feld-knopf:hover { color: var(--text); }

.anmeldeseite .knopf.haupt {
  width: 100%; height: 56px; margin-top: var(--a4);
  background: var(--akzent); color: var(--auf-akzent);
  border: 0; border-radius: var(--r-feld);
  font: 600 15px/1 var(--schrift); cursor: pointer;
}
.anmeldeseite .knopf.haupt:hover { opacity: 0.9; }
.anmeldeseite .knopf.haupt:disabled { opacity: 0.5; cursor: default; }

/* Sechs Felder für die sechs Ziffern. */
/* minmax(0, 1fr) statt 1fr: Eingabefelder bringen eine Standardbreite mit, die
   1fr nicht unterschreiten würde – die Felder liefen sonst aus der Spalte heraus. */
.code-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
               gap: var(--a2); margin: var(--a4) 0; }
.code-feld {
  min-width: 0; height: 64px; text-align: center;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  font: 700 26px/1 var(--schrift); font-variant-numeric: tabular-nums;
}
.code-feld:focus { outline: none; border-color: var(--akzent); }

.qr-rahmen { background: var(--akzent); padding: var(--a3); border-radius: var(--r-karte);
             width: max-content; margin: var(--a4) 0; }
.qr-rahmen img { display: block; width: 200px; height: 200px; }

.codeliste { list-style: none; margin: var(--a4) 0; padding: 0;
             display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.codeliste li {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-feld);
  padding: var(--a3); text-align: center; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.anmeldeseite .formfehler {
  background: var(--fehler-flaeche); border: 1px solid var(--fehler-linie);
  color: var(--fehler); border-radius: var(--r-feld);
  padding: var(--a3); margin-top: var(--a3); font-size: var(--s-klein);
}

/* Unter 1024 px klappt die Zeichnung weg; das Formular bleibt vollständig. */
@media (max-width: 1023px) {
  .anmeldeseite { grid-template-columns: 1fr; }
  .anmelde-bild { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ======================================================================
   Liste mit Detailspalte (Web_3): links die Tabelle in einer Karte,
   rechts die gewählte Zeile ausführlich.
   ====================================================================== */
.mit-detail { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--a5);
              align-items: start; }
@media (max-width: 1280px) { .mit-detail { grid-template-columns: 1fr; } }

.listenkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
  padding: 0 var(--a4); overflow-x: auto;
}
.listenkarte .tab th:first-child, .listenkarte .tab td:first-child { padding-left: var(--a1); }
/* Steht eine Filterleiste in der Karte, hat sie ihren eigenen Innenrand --
   die Tabelle bekommt ihren darunter. */
.listenkarte > .filterleiste + .listeninhalt { padding: 0 var(--a-karte) var(--a3); }

.detailkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
  padding: var(--a5); position: sticky; top: var(--a5);
}
.detailkarte .kopfzeile-detail { display: flex; align-items: center; justify-content: space-between;
                                 gap: var(--a3); margin-bottom: var(--a3); }
.detailkarte .nummer { color: var(--gedaempft); font-size: var(--s-klein);
                       font-variant-numeric: tabular-nums; }
.detailkarte h2 { font-weight: 700; font-size: 26px;
                  margin: 0 0 var(--a2); }
.detailkarte .unterzeile { color: var(--gedaempft); font-size: var(--s-text); margin-bottom: var(--a5); }
.detailkarte dl { margin: 0; }
.detailkarte dt { font-size: var(--s-abschnitt); font-weight: 600; color: var(--text);
                  margin-top: var(--a4); }
.detailkarte dd { margin: var(--a1) 0 0; color: var(--gedaempft); font-size: var(--s-text);
                  display: flex; justify-content: space-between; gap: var(--a3); }
.detailkarte dd + dt { border-top: 1px solid var(--linie); padding-top: var(--a4); }
.detailkarte .knopfleiste { margin-top: var(--a6); }
.detailkarte .knopfleiste .knopf { flex: 1; justify-content: center; }

/* Filterchips über der Liste, rechts die Zeitangabe. */
.filterleiste { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
                margin: var(--a5) 0 var(--a4); }
.filterleiste .rechts { margin-left: auto; color: var(--gedaempft); font-size: var(--s-text); }

/* Materialstand als schmaler Balken in der Tabelle. */
.tab .balken { width: 72px; margin-top: 6px; }

/* ======================================================================
   Papier bleibt Papier: Vorschauen von Lieferschein, Montageauftrag,
   Regiebericht und Nachweisen sind immer weiß mit schwarzer Schrift,
   auch im Dunkelmodus. Ein Ausdruck sieht aus wie ein Ausdruck.
   ====================================================================== */
.papier, .beleg-vorschau, .druckvorschau {
  --grund: var(--papier); --flaeche: var(--papier); --hervor: var(--papier-hervor);
  --linie: var(--papier-linie); --text: var(--papier-text);
  --gedaempft: var(--papier-gedaempft); --platzhalter: var(--papier-gedaempft);
  --akzent: var(--papier-text); --auf-akzent: var(--papier);
  background: var(--papier); color: var(--papier-text); color-scheme: light;
}

/* Zuteilung an Subunternehmer: angefragt wartet, angenommen steht, abgelehnt
   ist erledigt -- dieselben drei Farben wie überall sonst. */
.statuspunkt.z-angefragt { background: var(--warnung); }
.statuspunkt.z-angenommen { background: var(--text); }

/* Der Anfragekasten über dem Auftrag. Er soll auffallen, ohne zu alarmieren:
   Eine Anfrage ist kein Fehler, sie wartet nur auf eine Antwort. */
.anfragekasten {
  border: 1px solid var(--warnung-linie);
  border-left: 3px solid var(--warnung);
  border-radius: var(--r-karte);
  background: var(--warnung-flaeche);
  padding: var(--a-karte);
  margin-bottom: var(--a-abschnitt);
}
.anfrage-kopf { display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; }
.anfrage-kopf > div:nth-child(2) { display: flex; flex-direction: column; min-width: 12rem; flex: 1; }
.anfrage-kopf .zweite { color: var(--gedaempft); font-size: var(--s-klein); }
.anfrage-knoepfe { display: flex; gap: var(--a2); flex-wrap: wrap; }
.anfrage-absage { display: flex; flex-direction: column; gap: var(--a2); margin-top: var(--a4); }
.anfrage-absage .knopf { align-self: flex-start; }

/* „Vor Ort“ im Montageauftrag: wohin, zu wem, wie hinein. Ruhig gehalten --
   das ist die wichtigste Karte der Seite, aber keine Warnung. */
.vorort {
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  padding: var(--a-karte);
  margin-bottom: var(--a-abschnitt);
}
.vorort-kopf { display: flex; align-items: center; gap: var(--a2); margin-bottom: var(--a3); }
.vorort-kopf h2 { font-size: var(--s-abschnitt); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.vorort-gesperrt { color: var(--gedaempft); font-size: var(--s-klein); margin: var(--a3) 0 0; }

/* Änderungsprotokoll: die Spalten „vorher“ und „nachher“ zeigen höchstens vier
   sichtbare Zeilen. Ein neu angelegter Kunde ändert ein Dutzend Felder; die
   Zeile wuchs sonst auf über 200 px, und man sah drei Einträge statt zwanzig.
   Der vollständige Inhalt steht im Titel. */
.protokoll-werte {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ein Knopf, der wie ein Verweis aussieht: „Passwort vergessen?" steht unter
   dem Anmeldeknopf und soll ihn nicht verdrängen. Als <button>, nicht als
   <a>, weil er keine Adresse öffnet, sondern das Formular wechselt. */
.knopf.textknopf {
  background: none; border: 0; color: var(--gedaempft);
  font-size: var(--s-klein); height: auto; padding: var(--a2) 0; margin-top: var(--a2);
  text-decoration: underline; text-underline-offset: 3px;
}
.knopf.textknopf:hover { color: var(--text); }

/* Die ruhige Antwort auf „Link anfordern“: kein Fehler, keine Bestätigung --
   nur der Satz, der für jede Adresse derselbe ist. */
.formhinweis {
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  background: var(--flaeche); color: var(--gedaempft);
  padding: var(--a3); font-size: var(--s-klein); margin-bottom: var(--a3);
}

/* Arbeiten am Montageauftrag: nummerierte Positionen, keine Tabelle. */
.arbeitsliste { list-style: none; margin: 0 0 var(--a4); padding: 0; display: grid; gap: var(--a3); }
.arbeitsliste > li.arbeit {
  display: flex; gap: var(--a4); align-items: flex-start; justify-content: space-between;
  padding: var(--a4); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte);
}
.arbeitsliste .arbeit-text { min-width: 0; }
.arbeitsliste .arbeit-text p { margin: var(--a1) 0 0; color: var(--gedaempft); white-space: pre-line; }
.arbeitsliste .arbeit-aktionen { display: flex; gap: var(--a1); flex-wrap: wrap; flex: none; }
.arbeitsliste > li.leer { color: var(--gedaempft); }
@media (max-width: 767px) { .arbeitsliste > li.arbeit { flex-direction: column; } }

/* Änderungsprotokoll: eine Zeile je Ereignis, Einzelheiten zum Aufklappen. */
.protokoll-liste { list-style: none; margin: 0; padding: 0; }
.protokoll-liste > li { border-top: 1px solid var(--linie); }
.protokoll-liste > li:first-child { border-top: 0; }
.protokoll-liste > li.leer { padding: var(--a5) var(--a4); color: var(--gedaempft); }
.protokoll-eintrag > summary {
  display: grid; grid-template-columns: 150px 180px minmax(0, 1fr) minmax(0, 220px);
  gap: var(--a3); align-items: center; padding: var(--a3) var(--a4); cursor: pointer; list-style: none;
}
.protokoll-eintrag > summary::-webkit-details-marker { display: none; }
.protokoll-eintrag > summary:hover { background: var(--grund); }
.protokoll-zeit { font-variant-numeric: tabular-nums; color: var(--gedaempft); white-space: nowrap; }
.protokoll-person { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protokoll-was { display: inline-flex; align-items: center; gap: var(--a2); min-width: 0; }
.protokoll-was .sym { flex: none; color: var(--gedaempft); }
.protokoll-bezug { color: var(--gedaempft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.protokoll-detail {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--a1) var(--a3);
  margin: 0; padding: 0 var(--a4) var(--a4) calc(150px + var(--a4) + var(--a3));
}
.protokoll-detail dt { color: var(--gedaempft); }
.protokoll-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .protokoll-eintrag > summary { grid-template-columns: 1fr auto; }
  .protokoll-zeit { order: 2; font-size: var(--s-klein); }
  .protokoll-person { order: 1; }
  .protokoll-was { order: 3; grid-column: 1 / -1; }
  .protokoll-bezug { order: 4; grid-column: 1 / -1; text-align: left; }
  .protokoll-detail { padding-left: var(--a4); grid-template-columns: 1fr; }
}
.protokoll-liste.kompakt .protokoll-eintrag > summary { grid-template-columns: 130px minmax(0, 1fr); padding-left: 0; padding-right: 0; }
.protokoll-liste.kompakt .protokoll-person, .protokoll-liste.kompakt .protokoll-bezug { display: none; }
.protokoll-liste.kompakt .protokoll-detail { padding-left: 0; }

/* Aus der Bestellung nicht erkannt: gelb, bis jemand es einträgt. */
.feld.nicht-erkannt { border-color: var(--warnung); background: var(--warnung-flaeche); }
.bestellung-vermerk { font-size: var(--s-klein); color: var(--warnung); margin: 0 0 var(--a3); }

/* Team und Partner: Woche je Zeile, ein Tag je Spalte. */
.tp-frei { display: flex; align-items: center; gap: var(--a3); padding: var(--a3) var(--a4); flex-wrap: wrap; }
.tp-frei .beschriftung { margin: 0; }
.tp-frei .feld { max-width: 180px; }
.tp-tabelle td.tp-tag { vertical-align: top; min-width: 96px; font-size: var(--s-klein); }
.tp-tag.tpz-eingeplant { background: var(--flaeche); }
.tp-tag.tpz-abwesend { background: var(--warnung-flaeche); }
.tp-tag.tpz-konflikt { box-shadow: inset 0 0 0 2px var(--fehler); }
.tp-auftrag { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-abw { display: block; border: 0; background: none; padding: 0; color: var(--warnung); font: inherit; font-weight: 600; cursor: pointer; text-align: left; min-height: 24px; }
.tp-abwesenheit { margin-top: var(--a5); max-width: 640px; }

.anfrage-fahrzeuge { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a4); align-items: center; margin-top: var(--a3); }
.anfrage-fahrzeuge .beschriftung { width: 100%; margin: 0; }

/* Einsätze am Auftrag: je Person und Tag eine Karte. */
.einsatz-karte { border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); padding: var(--a4); margin: 0 0 var(--a3); }
.einsatz-kopf { margin-bottom: var(--a2); }
.einsatz-daten { margin: 0 0 var(--a2); }
.einsatz-hinweis { color: var(--warnung); font-size: var(--s-klein); margin: 0 0 var(--a2); }
.einsatz-korrektur { margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--linie); }

/* Rechtsform: Auswahl mit Suche, eine Liste für alle Formulare */
.rf-auswahl { position: relative; display: grid; gap: 6px; }
.rf-liste {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 4px 0; list-style: none;
  max-height: 260px; overflow-y: auto; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-karte); box-shadow: var(--schatten);
}
.rf-liste[hidden] { display: none; }
.rf-liste li { padding: 8px 12px; cursor: pointer; }
.rf-liste li:hover { background: var(--hervor); }
.rf-liste li.leer { cursor: default; color: var(--gedaempft); }

/* Schalter mit Beschriftung daneben: der vorhandene `.schalter` (oben), dazu eine Zeile. */
.schalterzeile-text { display: flex; align-items: center; gap: var(--a3); }
.schalterzeile-text .schalter { margin-top: 0; }
.fz-nutzung { margin-bottom: var(--a4); width: max-content; }
.fz-nutzung .segment { height: 34px; }
.team-rolle { display: flex; gap: var(--a2); flex-wrap: wrap; }
.team-rolle .feld { min-width: 0; }

/* Logo-Vorschau: so, wie es gedruckt wird -- auf Weiß und in Graustufen, 45 mm. */
.logo-vorschau { display: flex; flex-wrap: wrap; gap: var(--a4); margin: var(--a3) 0 var(--a4); }
.logo-vorschau figure { margin: 0; padding: var(--a4); background: var(--papier); border: 1px solid var(--papier-linie); border-radius: var(--r-feld); }
.logo-vorschau img { display: block; width: 45mm; height: auto; }
.logo-vorschau .grau img { filter: grayscale(1); }
.logo-vorschau figcaption { margin-top: var(--a2); font-size: var(--s-klein); color: var(--papier-gedaempft); }

/* Anfahrt am Auftrag */
.anfahrt-ergebnis { margin: 0 0 var(--a3); font-variant-numeric: tabular-nums; }
.anfahrt-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin: var(--a2) 0 var(--a4); }
.anfahrt-hand { margin-top: var(--a2); }
#anf-frei-zeile .kaestchen { margin-top: var(--a2); }
#anf-frei-zeile #anf-merken-name { margin-top: var(--a2); }
.fb-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a4); margin-bottom: var(--a4); }
.fb-filter .formzeile { min-width: 200px; margin: 0; }

/* Mitzuführen und Hinweise je Auftrag */
.punktliste { list-style: none; margin: 0 0 var(--a3); padding: 0; }
.punktliste li { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); padding: var(--a2) 0; border-bottom: 1px solid var(--linie); }
.punktliste li.leer { color: var(--gedaempft); }
.punkt-neu { display: flex; gap: var(--a2); }
.punkt-neu .feld { flex: 1; min-width: 0; }
.unterkopf { font-size: var(--s-text); margin: 0 0 var(--a2); }
.anfahrt-soll { padding: 10px 0; font-variant-numeric: tabular-nums; }

/* Kennzeichen in drei Feldern wie auf dem Schild */
.kz-eingabe { display: flex; align-items: center; gap: var(--a2); }
.kz-eingabe .feld { text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; }
.kz-ort { width: 4.5em; } .kz-bu { width: 3.8em; } .kz-zahl { width: 5em; } .kz-zusatz { width: 4em; }
.kz-trenn { color: var(--gedaempft); }
.kz-ausland { margin-top: var(--a2); }

/* Team und Partner → Leute: Karten je Firma, kompakte Personenliste.
   Personenzeile und Firmenkarte sind Bausteine (personZeile, firmaKarte in app.js),
   damit Kunden-Ansprechpartner dieselbe Optik übernehmen können. */
.tp-leute { max-width: 1120px; margin-top: var(--a6); }
.tp-leute-kopf { display: flex; align-items: center; gap: var(--a3); }
.tp-leute-kopf h2 { margin: 0; }
.tp-leute-text { max-width: 68ch; }
.tp-leute-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin-bottom: 24px; }
.tp-leute-steuer .reiter { margin: 0; }
.tp-leute-steuer input[type=search] { max-width: 320px; flex: 1 1 220px; }
@media (max-width: 899px) { .tp-leute-steuer { flex-direction: column; align-items: flex-start; } .tp-leute-steuer input[type=search] { flex: none; width: 100%; max-width: 320px; } }
.firma-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 20px; margin-bottom: 16px; }
.firma-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a3); }
.firma-karte-kopf h3 { margin: 0; font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.firma-karte-unter { color: var(--gedaempft); font-size: 13px; margin-top: 2px; }
.firma-karte-unter a { color: inherit; }
.firma-karte-aktionen { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.firma-karte-leer { color: var(--gedaempft); margin: 0; }
.firma-karte-leer button { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; cursor: pointer; font: inherit; }
.personen-liste { display: flex; flex-direction: column; }
.person-zeile { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(140px, 1.5fr) minmax(140px, 1.5fr) minmax(0, 340px); align-items: center;
                column-gap: var(--a4); min-height: 44px; border-top: 1px solid var(--linie); padding: 6px 0; }
.person-zeile.kopf { border-top: 0; min-height: 0; padding: 0 0 4px; color: var(--gedaempft); font-size: 12px; }
.person-zeile.leise { opacity: .6; }
.person-zeile .person-name { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.person-zeile .zweite { display: block; color: var(--gedaempft); font-size: 12px; font-weight: 400; }
.person-zeile .person-status { display: flex; align-items: center; justify-content: flex-end; gap: var(--a2); flex-wrap: wrap; }
.person-zeile .person-info { display: none; }
.person-zeile .person-aktionen { display: inline-flex; gap: var(--a2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 699px) {
  .firma-karte-kopf { flex-direction: column; align-items: flex-start; }
  .firma-karte-aktionen .knopf, .firma-karte-aktionen a { min-height: 44px; min-width: 44px; }
  /* Gestapelt: Name und Status oben, darunter Position · Telefon, darunter die Knöpfe. */
  .person-zeile { grid-template-columns: 1fr auto; row-gap: 4px; padding: 10px 0; }
  .person-zeile.kopf { display: none; }
  .person-zeile .person-position, .person-zeile .person-telefon { display: none; }
  .person-zeile .person-status { display: contents; }
  .person-zeile .person-badge { grid-row: 1; grid-column: 2; justify-self: end; }
  .person-zeile .person-info { display: block; grid-row: 2; grid-column: 1 / -1; color: var(--gedaempft); font-size: 13px; }
  .person-zeile .person-aktionen { grid-row: 3; grid-column: 1 / -1; justify-content: flex-start; }
  .person-zeile .person-aktionen .knopf { min-height: 44px; }
}

/* Team & Partner: Subunternehmerkarten ein- und ausklappbar */
.firma-alle { display: flex; justify-content: flex-end; margin-bottom: var(--a2); }
.textlink { background: none; border: 0; padding: 4px 0; color: var(--gedaempft); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.firma-karte-kopf.klappbar { cursor: pointer; min-height: 44px; }
.firma-karte.zu .firma-karte-kopf { margin-bottom: 0; }
.firma-klapp { display: inline-flex; align-items: center; gap: var(--a2); background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.firma-klapp:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.firma-chevron { width: 8px; height: 8px; border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft); transform: rotate(-45deg); transition: transform 150ms ease; flex: none; margin-right: 2px; }
.firma-karte.offen .firma-chevron { transform: rotate(45deg); }
.firma-karte-rumpf { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 150ms ease; }
.firma-karte-rumpf > div { overflow: hidden; min-height: 0; }
.firma-karte.zu .firma-karte-rumpf { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 150ms ease, visibility 0s 150ms; }
@media (prefers-reduced-motion: reduce) { .firma-chevron, .firma-karte-rumpf, .firma-karte.zu .firma-karte-rumpf { transition: none; } }
/* Tage am Montageauftrag: oben die Felder, darunter Differenz, Bericht und Knöpfe */
#auftrag-tage-block .abschnittkopf { flex-wrap: wrap; }
#auftrag-tage-block .abschnittkopf h2 { flex-shrink: 0; }
.tag-zeile { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.tag-felder { display: grid; grid-template-columns: minmax(130px, 160px) minmax(110px, 130px) 1fr; gap: 10px; align-items: end; }
.tag-feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tag-feld .feld { width: 100%; min-width: 0; }
.tag-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 6px; }
.tag-fuss .tag-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.tag-bericht { font-size: 13px; }
@media (max-width: 700px) { .tag-felder { grid-template-columns: 1fr 1fr; } }
/* Demo-Umgebung: oranges Band oben, auf jeder Seite */
.demo-band { position: sticky; top: 0; z-index: 1000; background: var(--demo); color: var(--auf-demo); text-align: center; font-weight: 700; letter-spacing: .5px; font-size: 13px; padding: 5px 12px; }

/* ======================================================================
   Einsatzplanung (07.10.2026), nur mit eingeschaltetem Schalter.
   Helle Leiste, aktiver Punkt im Akzent (schwarz hinterlegt im hellen Modus).
   ====================================================================== */
.app.planung-v2 .seitenleiste { background: var(--flaeche); }
.app.planung-v2 .nav a.aktiv { background: var(--akzent); color: var(--auf-akzent); }

/* Kategorien: Fläche und Schrift kommen als Daten aus der Palette. */
.kat-chip {
  display: inline-block; padding: 2px var(--a2); border-left: 3px solid;
  border-radius: var(--r-feld); font-weight: 600; font-size: var(--s-zeile); line-height: 1.5;
}
.kat-palette { display: flex; flex-wrap: wrap; gap: var(--a2); margin: var(--a1) 0 var(--a3); }
.kat-farbe {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid; cursor: pointer; padding: 0;
}
.kat-farbe.gewaehlt { outline: 2px solid var(--text); outline-offset: 2px; }
.person-kennung { margin-left: var(--a2); font-size: var(--s-klein); }

/* ---------- Einsatzplanung: Kalender (Skizze 013) ---------- */
.ep-rahmen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--a5); align-items: start; }
.ep-links { display: flex; flex-direction: column; gap: var(--a4); position: sticky; top: var(--a4); }
.ep-neu { width: 100%; justify-content: center; }
.ep-block h3 { font-size: var(--s-klein); text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); margin: 0 0 var(--a2); }
.ep-link { font-size: var(--s-zeile); color: var(--text); }
.ep-kategorien { display: flex; flex-direction: column; gap: var(--a1); margin-bottom: var(--a2); }
.ep-kat-filter { display: flex; align-items: center; gap: var(--a2); font-size: var(--s-zeile); cursor: pointer; }
.ep-farbe { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; flex: 0 0 12px; }
.ep-ohne { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a1); }
.ep-ohne-eintrag { width: 100%; text-align: left; border: 1px dashed var(--linie); background: none; border-radius: var(--r-feld);
  padding: var(--a2); font: inherit; font-size: var(--s-zeile); color: var(--text); cursor: pointer; display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.ep-mini-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--a2); font-size: var(--s-zeile); }
.ep-pfeil-klein { border: 0; background: none; font: inherit; font-size: 18px; cursor: pointer; color: var(--text); padding: 0 var(--a2); }
.ep-mini-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: var(--s-klein); }
.ep-mini-wt { color: var(--gedaempft); }
.ep-mini-tag { border: 0; background: none; font: inherit; padding: 4px 0; border-radius: 4px; cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; }
.ep-mini-tag.fremd { color: var(--platzhalter); }
.ep-mini-tag.im-bereich { background: var(--hervor); }
.ep-mini-tag.heute { background: var(--akzent); color: var(--auf-akzent); }
/* Kopfzeile der Einsatzplanung (09.10.2026): jedes Bedienelement 36 px hoch, gleiche Rundung und
   Randfarbe, mittig auf einer Linie mit dem Datum. Heute ‹ › als eine Gruppe; Umschalter mit 3 px
   Innenabstand, das aktive Feld füllt sein Segment. Die Breite jedes Segments reserviert die fette
   Schrift (::after), damit beim Umschalten nichts springt. */
.ep-leiste { --ep-h: 36px; display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; margin-bottom: var(--a4); }
.ep-nav { display: inline-flex; height: var(--ep-h); box-sizing: border-box; border: 1px solid var(--linie); border-radius: var(--r-feld);
  overflow: hidden; background: var(--flaeche); flex: none; }
.ep-nav .knopf { height: 100%; border: 0; border-radius: 0; padding: 0 var(--a3); font-size: var(--s-zeile); }
.ep-nav .knopf + .knopf { border-left: 1px solid var(--linie); }
.ep-nav .ep-pfeil { width: calc(var(--ep-h) - 2px); padding: 0; justify-content: center; font-size: 18px; }
.ep-datum { display: flex; align-items: center; gap: var(--a2); min-width: 0; }
.ep-zeitraum { font: 600 22px/var(--ep-h) var(--schrift); margin: 0; white-space: nowrap; }
.ep-schalter { display: flex; align-items: center; gap: var(--a2); margin-left: auto; flex-wrap: wrap; }
.ep-leiste .segmentleiste { height: var(--ep-h); box-sizing: border-box; padding: 3px; gap: 0; overflow: visible; background: var(--leiste); }
.ep-leiste .segment { height: 100%; padding: 0 var(--a3); border-radius: calc(var(--r-feld) - 3px); font-weight: 500;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--gedaempft); }
.ep-leiste .segment::after { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.ep-leiste .segment:hover:not(:disabled) { color: var(--text); }
.ep-leiste .segment:disabled { cursor: default; opacity: .6; }
.ep-leiste .segment.aktiv { background: var(--segment-aktiv); color: var(--auf-segment-aktiv); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--linie); }
.ep-umfang-wahl { display: none; height: var(--ep-h); width: auto; padding-right: var(--a5, 28px); }
@media (max-width: 1099px) {
  /* Umschalter in die zweite Zeile unter das Datum, nichts abgeschnitten. */
  .ep-schalter { flex-basis: 100%; margin-left: 0; }
}
/* Auch breiter, wenn die Seitenleiste dem Kalender den Platz nimmt: dann ebenfalls links unter dem Datum. */
.ep-haupt { container-type: inline-size; }
@container (max-width: 940px) { .ep-schalter { flex-basis: 100%; margin-left: 0; } }
@media (max-width: 639px) {
  .ep-leiste #ep-umfang { display: none; }
  .ep-umfang-wahl { display: block; }
  .ep-zeitraum { font-size: 18px; }
}
.ep-kalender { border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); overflow: hidden; }
.ep-kopf { display: grid; border-bottom: 1px solid var(--linie); }
.ep-kopf-tag { display: flex; flex-direction: column; align-items: flex-start; padding: var(--a2) var(--a3); border-left: 1px solid var(--linie); }
.ep-kopf-tag:first-child { border-left: 0; }
.ep-wt { font-size: var(--s-klein); color: var(--gedaempft); }
.ep-zahl { font: 600 24px/1.2 var(--schrift); font-variant-numeric: tabular-nums; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ep-kopf-tag.heute .ep-zahl { background: var(--akzent); color: var(--auf-akzent); }
.ep-bereich { border-bottom: 1px solid var(--linie); padding: var(--a2) 0; }
.ep-bereich-name { display: block; font-size: var(--s-klein); color: var(--gedaempft); padding: 0 var(--a3) var(--a1); }
.ep-ganztag { display: grid; gap: 3px 0; padding: 0 2px; min-height: 28px; }
.ep-eintrag {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0 2px; padding: 3px var(--a2);
  border: 1px solid transparent; border-left: 4px solid var(--text); border-radius: 4px;
  background: var(--hervor); color: var(--text); font: inherit; font-size: var(--s-klein); text-align: left; cursor: pointer;
}
.ep-eintrag.ohne-kategorie { border-left-color: var(--gedaempft); }
.ep-eintrag:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.ep-e-zeile { display: flex; align-items: center; gap: var(--a1); min-width: 0; }
.ep-e-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.ep-e-nr { font-variant-numeric: tabular-nums; flex: 0 0 auto; opacity: .85; }
.ep-e-zweite { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.ep-punkt { min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-chip); background: var(--warnung); color: var(--warnung-flaeche);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; flex: none; }
/* Rückfragen unter der Notiz (09.10.2026): je Zeile gelber Punkt, Notiztext fett, Frage, Antworten als Knöpfe. */
.ep-rf { margin-top: var(--a2); border: 1px solid var(--warnung-linie); background: var(--warnung-flaeche); border-radius: var(--r-feld); padding: var(--a2) var(--a3); }
.ep-rf-kopf { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a1); font-size: var(--s-zeile); color: var(--text); }
.ep-rf-rueck { margin-left: auto; font-size: var(--s-klein); color: var(--text); display: inline-flex; align-items: center; gap: var(--a2); }
.ep-rf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ep-rf-zeile { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--a1) var(--a3); align-items: center; padding: var(--a2) 0;
  border-top: 1px solid var(--warnung-linie); border-radius: 4px; }
.ep-rf-zeile:first-child { border-top: 0; }
.ep-rf-zeile:focus-visible, .ep-rf-zeile:focus-within { outline: 2px solid var(--warnung); outline-offset: 2px; }
.ep-rf-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--warnung); }
.ep-rf-text { font-size: var(--s-zeile); color: var(--text); min-width: 0; }
.ep-rf-text b { margin-right: var(--a1); }
.ep-rf-antworten { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--a1); align-items: center; }
.ep-rf-antworten .knopf { height: 30px; }
.ep-rf-antworten .knopf .nr { color: var(--gedaempft); font-weight: 500; margin-right: 4px; font-variant-numeric: tabular-nums; }
.ep-rf-antworten .feld { height: 30px; width: 200px; }
.ep-rf-merken { grid-column: 2 / -1; font-size: var(--s-klein); color: var(--text); }
.ep-eintrag.status-angefragt { border-style: dashed; border-left-style: solid; border-color: currentColor; }
.ep-eintrag.status-abgelehnt { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie) 6px 8px); }
.ep-eintrag.alt { border-style: dashed; border-color: var(--gedaempft); }
.ep-eintrag.frist { outline: 2px solid var(--fehler); outline-offset: -1px; }
.ep-eintrag.abgesagt { opacity: .55; text-decoration: line-through; }
.ep-eintrag.kompakt { padding: 1px var(--a1); }
.ep-zeitbereich { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); border-bottom: 1px solid var(--linie); }
.ep-stunden { display: grid; grid-template-rows: repeat(13, 40px); font-size: var(--s-klein); color: var(--gedaempft); text-align: right; padding-right: var(--a1); }
.ep-raster { display: grid; height: 520px; background-image: linear-gradient(var(--linie) 1px, transparent 1px); background-size: 100% 40px; }
.ep-raster-spalte { position: relative; border-left: 1px solid var(--linie); }
.ep-eintrag.mit-zeit { position: absolute; left: 2px; right: 2px; margin: 0; overflow: hidden; }
.ep-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--fehler); }
.ep-jetzt::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--fehler); }
.ep-fuss { display: grid; background: var(--grund); }
.ep-fuss-tag { display: flex; flex-direction: column; gap: 2px; padding: var(--a2) var(--a3); border-left: 1px solid var(--linie); font-size: var(--s-klein); color: var(--gedaempft); }
.ep-fuss-tag:first-child { border-left: 0; }
.ep-fuss-tag b { color: var(--text); font-weight: 600; }
.ep-zustand { margin: var(--a4); }
.ep-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ep-monat-tag { min-height: 110px; border-left: 1px solid var(--linie); border-top: 1px solid var(--linie); padding: var(--a1); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-monat-tag:nth-child(7n + 1) { border-left: 0; }
.ep-monat-tag.fremd { background: var(--grund); }
.ep-monat-zahl { align-self: flex-start; border: 0; background: none; font: 600 var(--s-zeile)/1 var(--schrift); padding: 4px 6px; border-radius: 50%; cursor: pointer; color: var(--text); }
.ep-monat-tag.heute .ep-monat-zahl { background: var(--akzent); color: var(--auf-akzent); }
.ep-mehr { font-size: var(--s-klein); color: var(--gedaempft); padding-left: var(--a1); }
.ep-geruest { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--a2); padding: var(--a4); }
.ep-geruest-spalte { display: flex; flex-direction: column; gap: var(--a2); }
.ep-geruest-spalte span { height: 34px; border-radius: 4px; background: var(--hervor); }

/* ---------- Fenster „Neuer Einsatz“ (Skizze 014) ---------- */
/* Fenster „Neuer Einsatz“ (Skizze 015, 09.10.2026): höchstens 1200 px breit und 90 % der Fensterhöhe,
   Kopfleiste steht, nur der Inhalt scrollt. Auf dem Handy bildschirmfüllend. */
.ep-fenster { position: fixed; inset: 0; z-index: 80; background: var(--schleier); display: flex; align-items: center; justify-content: center; padding: var(--a4); }
.ep-fenster[hidden] { display: none; }
body.ep-fenster-offen { overflow: hidden; }
.ep-fenster-innen { width: min(1200px, 100%); max-height: 90vh; background: var(--flaeche); border-radius: var(--r-karte); box-shadow: var(--schatten);
  display: flex; flex-direction: column; overflow: hidden; }
.ep-f-kopf { flex: none; background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 0 var(--a5); }
.ep-f-leiste { --ep-h: 36px; display: flex; flex-wrap: wrap; gap: var(--a2) var(--a4); align-items: center; justify-content: space-between; padding: var(--a3) 0; }
.ep-f-links, .ep-f-rechts { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.ep-f-leiste .knopf { height: var(--ep-h); }
.ep-f-leiste .segmentleiste { height: var(--ep-h); box-sizing: border-box; padding: 3px; gap: 0; background: var(--leiste); }
.ep-f-leiste .segment { height: 100%; padding: 0 var(--a3); border-radius: calc(var(--r-feld) - 3px); color: var(--gedaempft); font-weight: 500;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.ep-f-leiste .segment::after { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
.ep-f-leiste .segment.aktiv { background: var(--segment-aktiv); color: var(--auf-segment-aktiv); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--linie); }
.ep-f-zu { width: var(--ep-h); padding: 0; justify-content: center; }
.ep-f-menue { position: relative; }
.ep-f-katmenue { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-feld); box-shadow: var(--schatten); padding: var(--a2); min-width: 220px; }
.ep-f-katmenue .ep-f-kat { flex-direction: column; align-items: stretch; }
.ep-f-katmenue .ep-kat-chip { text-align: left; }
.ep-f-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: var(--a4) var(--a5) var(--a5); display: flex; flex-direction: column; gap: var(--a3); }
.ep-f-meta { display: flex; align-items: center; gap: var(--a2); font-size: var(--s-klein); color: var(--gedaempft); }
.ab-dialog-zu { float: right; margin: calc(-1 * var(--a2)) calc(-1 * var(--a2)) 0 var(--a3); width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); color: var(--text); cursor: pointer; }
.ab-dialog-zu:hover { border-color: var(--text); }
.ep-f-fuss { display: flex; justify-content: flex-end; padding-top: var(--a3); border-top: 1px solid var(--linie); }
.ep-f-stand { margin-left: auto; font-size: var(--s-klein); color: var(--gedaempft); }
.ep-f-titel { font: 600 24px/1.3 var(--schrift); border: 0; border-bottom: 1px solid var(--linie); padding: var(--a2) 0; background: none; color: var(--text); width: 100%; }
.ep-f-titel:focus { outline: none; border-bottom-color: var(--text); }
.ep-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ep-f-reihe { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: flex-end; }
.ep-f-reihe .formzeile { margin: 0; min-width: 120px; }
.ep-f-breit { flex: 1 1 280px; }
.ep-f-zeitpaar { display: inline-flex; gap: var(--a1); align-items: center; }
.ep-f-tage, .ep-f-kat { display: flex; flex-wrap: wrap; gap: var(--a1); align-items: center; }
.ep-tag-chip, .ep-kat-chip { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: var(--r-chip); padding: 4px var(--a3); font: inherit; font-size: var(--s-zeile); cursor: pointer; }
.ep-tag-chip.an { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.ep-kat-chip { border-width: 2px; }
.ep-kat-chip.an { font-weight: 600; }
.ep-f-notiz { min-height: 320px; resize: vertical; width: 100%; font: inherit; line-height: 1.5; }
/* Notiz links breit (Zieh-Griff unten rechts), rechts „So hat das System es verstanden“. Unter 1200 px untereinander. */
.ep-f-notizbereich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a4); align-items: start; }
.ep-f-notizbereich[data-modus="notiz"] { grid-template-columns: minmax(0, 1fr); }
.ep-f-notizbereich[data-modus="notiz"] .ep-f-erkannt { display: none; }
.ep-f-notizbereich[data-modus="tabelle"] { grid-template-columns: minmax(0, 1fr); }
.ep-f-notizbereich[data-modus="tabelle"] .ep-f-notizspalte { display: none; }
.ep-f-notizspalte { display: flex; flex-direction: column; gap: var(--a1); min-width: 0; }
.ep-f-spaltenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a2); }
.ep-f-erkannt { border: 1px solid var(--linie); border-radius: var(--r-feld); padding: var(--a3); min-width: 0; background: var(--flaeche); }
.ep-f-erkannt .ep-rf-kopf { border-bottom: 1px solid var(--linie); padding-bottom: var(--a2); margin-bottom: 0; }
.ep-f-live { margin-left: auto; }
.ep-f-erkannt .ep-rf-rueck + .ep-f-live { margin-left: var(--a2); }
.ep-f-erkannt .ep-rf-zeile { grid-template-columns: 18px 110px minmax(0, 1fr); padding: var(--a2) var(--a1); border-top: 1px solid var(--linie); }
.ep-f-erkannt .ep-rf-zeile:first-child { border-top: 0; }
.ep-f-erkannt .ep-rf-zeile.gelb { background: var(--warnung-flaeche); }
.ep-f-erkannt .ep-rf-antworten, .ep-f-erkannt .ep-rf-merken { grid-column: 3; }
.ep-rf-zeichen { font-weight: 700; text-align: center; }
.ep-rf-zeile.gruen .ep-rf-zeichen { color: var(--ok); }
.ep-rf-zeile.gelb .ep-rf-zeichen { color: var(--warnung); }
.ep-rf-zeile.sonst { color: var(--gedaempft); }
.ep-rf-art { font-size: var(--s-klein); color: var(--gedaempft); }
.ep-rf-zeile .ep-rf-text b { font-weight: 500; }
.ep-rf-zeile.gelb .ep-rf-text b { font-weight: 700; }
.ep-rf-zeile.gelb .ep-rf-text span { display: block; font-size: var(--s-klein); }
.ep-rf-leer { padding: var(--a3) var(--a1); }
.ep-f-legende { margin: var(--a2) 0 0; font-size: var(--s-klein); }
.ep-f-erkannt-tabelle { margin-top: var(--a2); }
@media (max-width: 1199px) { .ep-f-notizbereich { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .ep-fenster { padding: 0; }
  .ep-fenster-innen { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .ep-f-kopf, .ep-f-inhalt { padding-left: var(--a3); padding-right: var(--a3); }
  .ep-f-leiste .segment { padding: 0 var(--a2); }
  .ep-f-erkannt .ep-rf-zeile { grid-template-columns: 18px minmax(0, 1fr); }
  .ep-f-erkannt .ep-rf-art { display: none; }
  .ep-f-erkannt .ep-rf-antworten, .ep-f-erkannt .ep-rf-merken { grid-column: 2; }
}
.ep-f-anfragen { border-top: 1px solid var(--linie); padding-top: var(--a3); }
.ep-f-anfragen h3 { font-size: var(--s-zeile); margin: 0 0 var(--a2); }
.ep-f-firmen { display: flex; flex-direction: column; gap: var(--a1); margin-bottom: var(--a3); }
.ep-firma { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a2); font-size: var(--s-zeile); cursor: pointer; }
.ep-firma .zweite { color: var(--gedaempft); font-size: var(--s-klein); }
.ep-firma.belegt b { color: var(--gedaempft); }

@media (max-width: 899px) {
  .ep-rahmen { grid-template-columns: minmax(0, 1fr); }
  .ep-links { position: static; }
  .ep-mini { display: none; }
  .ep-kalender { overflow-x: auto; }
  .ep-kopf, .ep-ganztag, .ep-raster, .ep-fuss, .ep-monat { min-width: 640px; }
}
.ep-firma.ohne-leitung { cursor: default; }
.ep-firma.ohne-leitung b { color: var(--gedaempft); }
.ep-eintrag .ep-vorlage { font-size: 10px; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; flex: 0 0 auto; }

/* Schalter der neuen Einsatzplanung (Betrieb, nur IT): so breit wie die drei Stellungen, gut zu tippen. */
.planung-schalter { width: max-content; margin-top: var(--a3); }
.planung-schalter .segment { min-height: calc(var(--h-tipp) - 6px); }
.baustein-planung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-top: var(--a2); }
.bereich-schalter { display: flex; flex-direction: column; gap: var(--a2); padding: var(--a3) 0; border-top: 1px solid var(--linie); }
.bereich-schalter-kopf { display: flex; align-items: center; gap: var(--a2); }

/* Nachrichten (Stufe 1c): Liste links, Chat rechts; eigene Nachrichten rechts dunkel, andere links grau. */
.nr-rahmen { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--a4); min-height: 70vh; }
.nr-liste { display: flex; flex-direction: column; gap: var(--a2); min-width: 0; }
.nr-chats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 72vh; }
.nr-gruppe { font: 600 var(--s-klein)/1.4 var(--schrift); color: var(--gedaempft); text-transform: uppercase; letter-spacing: .04em; padding: var(--a3) var(--a2) var(--a1); }
.nr-zeile { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; padding: var(--a2); border-radius: var(--r-feld); cursor: pointer; color: var(--text); font: inherit; }
.nr-zeile:hover { background: var(--grund); }
.nr-zeile.aktiv { background: var(--flaeche); box-shadow: var(--schatten); }
.nr-zeile-kopf, .nr-zeile-fuss { display: flex; justify-content: space-between; gap: var(--a2); min-width: 0; }
.nr-zeile-kopf b, .nr-zeile-fuss .zweite { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-zahl { flex: none; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--akzent); color: var(--auf-akzent); font: 600 var(--s-klein)/20px var(--schrift); text-align: center; }
.nr-chat { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); display: flex; flex-direction: column; min-width: 0; }
.nr-leer { margin: auto; }
.nr-offen { display: flex; flex-direction: column; height: 72vh; }
.nr-offen[hidden] { display: none; }
.nr-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a2); padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); }
.nr-verlauf { flex: 1; overflow-y: auto; padding: var(--a4); display: flex; flex-direction: column; gap: var(--a3); }
.nr-mehr { align-self: center; }
.nr-blase { max-width: 72%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; }
.nr-blase.eigen { align-self: flex-end; align-items: flex-end; }
.nr-inhalt { background: var(--grund); color: var(--text); border-radius: var(--r-karte); padding: var(--a2) var(--a3); display: flex; flex-direction: column; gap: var(--a1); overflow-wrap: anywhere; }
.nr-blase.eigen .nr-inhalt { background: var(--akzent); color: var(--auf-akzent); }
.nr-name { font: 600 var(--s-klein)/1.3 var(--schrift); }
.nr-text { white-space: pre-wrap; }
.nr-geloescht { opacity: .7; }
.nr-bild { max-width: 260px; max-height: 260px; border-radius: var(--r-feld); display: block; }
.nr-datei { color: inherit; text-decoration: underline; }
.nr-karte { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-feld); padding: var(--a2) var(--a3); display: flex; flex-direction: column; gap: 2px; }
.nr-karte.gesperrt { color: var(--gedaempft); }
.nr-karte-knoepfe { display: flex; gap: var(--a2); margin-top: var(--a1); }
.nr-fuss { display: flex; gap: var(--a1); color: var(--gedaempft); font-size: var(--s-klein); }
.nr-loeschen { border: 0; background: none; color: var(--gedaempft); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.nr-eingabe { display: flex; align-items: flex-end; gap: var(--a2); padding: var(--a3) var(--a4); border-top: 1px solid var(--linie); }
.nr-eingabe[hidden] { display: none; }
.nr-eingabe textarea { flex: 1; resize: vertical; min-height: var(--h-knopf); max-height: 160px; }
.nr-plus { position: relative; }
.nr-menu { position: absolute; bottom: calc(100% + var(--a1)); left: 0; z-index: 5; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-feld); box-shadow: var(--schatten); display: flex; flex-direction: column; padding: var(--a1); white-space: nowrap; }
@media (max-width: 760px) { .nr-rahmen { grid-template-columns: 1fr; } .nr-offen { height: 80vh; } .nr-blase { max-width: 90%; } }

/* Dienstplan (Stufe 1c): Personen × Tage, Einsätze in Kategoriefarbe, Abwesenheit grau. */
/* Dienstplan (Umbau 09.10.2026): Kopf wie die Einsatzplanung, ein Rahmen, feste Personenspalte 220 px,
   Kopfzeile und Personenspalte stehen beim Scrollen, Zeilen 52 px, Gruppenzeilen 36 px. */
.dp-kopf { align-items: flex-end; }
.dp-leiste { margin-bottom: 0; }
.dp-drucken { height: var(--ep-h); }
.dp-filter { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center; margin-bottom: var(--a3); }
.dp-filter .feld { height: 36px; width: auto; }
.dp-filter .kaestchen { height: 36px; display: inline-flex; align-items: center; gap: var(--a1); }
.dp-suche { margin-left: auto; min-width: 200px; }
.dp-leer { display: flex; justify-content: center; margin-bottom: var(--a3); }
.dp-druckkopf { display: none; }
.dp-rahmen { --dp-person: 220px; --dp-tage: 7; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche);
  overflow: auto; max-height: calc(100vh - 260px); -webkit-overflow-scrolling: touch; }
.dp-tabelle { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: calc(var(--dp-person) + 7 * 96px); font-size: var(--s-zeile); }
.dp-tabelle.monat { min-width: calc(var(--dp-person) + var(--dp-tage) * 30px); }
.dp-tabelle col.dp-person-spalte { width: var(--dp-person); }
.dp-tabelle th, .dp-tabelle td { border-bottom: 1px solid var(--linie); border-left: 1px solid var(--linie); padding: 0; vertical-align: top; background: var(--flaeche); }
.dp-tabelle th:first-child, .dp-tabelle td:first-child { border-left: 0; }
.dp-tabelle thead th { position: sticky; top: 0; z-index: 3; text-align: left; padding: 6px var(--a2); font-weight: 600; height: 44px; }
.dp-tabelle thead th .dp-wt { display: block; font-size: var(--s-klein); color: var(--gedaempft); font-weight: 500; }
.dp-tabelle th:first-child, .dp-tabelle td.dp-person { position: sticky; left: 0; z-index: 2; }
.dp-tabelle thead th:first-child { z-index: 4; }
.dp-tabelle .we { background: var(--grund); }
.dp-tabelle thead th.heute { background: var(--akzent); color: var(--auf-akzent); }
.dp-tabelle thead th.heute .dp-wt { color: var(--auf-akzent); }
.dp-tabelle td.heute { background: color-mix(in srgb, var(--akzent) 5%, var(--flaeche)); }
.dp-tabelle td.dp-person { height: 52px; padding: 6px var(--a2); vertical-align: middle; }
.dp-person b { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-person .zweite { display: block; font-size: var(--s-klein); color: var(--gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-ohne-app { width: 7px; height: 7px; border-radius: 50%; background: var(--gedaempft); flex: none; }
.dp-firma td { height: 36px; background: var(--grund); padding: 0 var(--a2); vertical-align: middle; font-size: var(--s-zeile); }
.dp-firma td.dp-person { background: var(--grund); }
.dp-klapp { border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; padding: 0; display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; }
.dp-klapp .pfeil { width: 16px; display: inline-block; font-size: 16px; line-height: 1; flex: none; }
.dp-klapp b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dp-klapp .zahl-personen { color: var(--gedaempft); font-weight: 400; white-space: nowrap; flex: none; }
.dp-firma .dp-anzahl { color: var(--gedaempft); text-align: center; font-variant-numeric: tabular-nums; }
.dp-zelle { cursor: pointer; padding: 4px; height: 52px; }
.dp-zelle.krank { background: var(--fehler-flaeche); }
.dp-zelle.urlaub { background: var(--hervor); }
.dp-zelle.nicht-verfuegbar { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie) 6px 7px); }
.dp-block { display: flex; flex-direction: column; gap: 1px; margin-bottom: 3px; padding: 3px 6px; border-left: 3px solid var(--linie); border-radius: 4px;
  text-decoration: none; color: var(--text); background: var(--hervor); overflow: hidden; min-width: 0; }
.dp-block b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--s-klein); }
.dp-block span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 4px; }
.dp-block .dp-kuerzel { display: none; }
.dp-block.abgesagt { text-decoration: line-through; opacity: .6; }
.dp-abw { display: block; width: 100%; text-align: left; padding: 3px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--text);
  font: inherit; font-size: var(--s-klein); font-weight: 600; cursor: pointer; }
.dp-zelle.krank .dp-abw { color: var(--fehler); }
.dp-zelle.urlaub .dp-abw { color: var(--gedaempft); }
.dp-punkte { display: flex; flex-wrap: wrap; gap: 3px; padding-top: 2px; }
.dp-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gedaempft); display: inline-block; }
.dp-tabelle.monat thead th { padding: 6px 2px; text-align: center; font-size: var(--s-klein); }
.dp-tabelle.monat thead th:first-child { text-align: left; padding: 6px var(--a2); }
.dp-tabelle.monat .dp-zelle { padding: 4px 2px; }
@media (max-width: 639px) {
  .dp-rahmen { --dp-person: 120px; max-height: none; }
  .dp-suche { margin-left: 0; min-width: 0; flex: 1 1 100%; }
  .dp-kopf { flex-direction: column; align-items: flex-start; }
  .dp-klapp .zahl-personen { display: none; }
}
@media print {
  .seitenleiste, .kopfleiste, .kopfzeile, .dp-kopf, .dp-filter, .dp-leiste, .dp-leer, .dp-fuss, #dp-nurit, .vorschau-band { display: none !important; }
  body { background: var(--papier) !important; }
  .dp-tabelle td.dp-person, .dp-zelle, .dp-firma td { height: auto; font-size: 8pt; padding: 1.2mm 1.5mm; }
  .dp-tabelle thead th { height: auto; font-size: 8pt; padding: 1.2mm 1.5mm; }
  .dp-block { padding: 0.6mm 1.2mm; margin-bottom: 0.6mm; }
  .dp-block b, .dp-block span, .dp-person .zweite { font-size: 7pt; }
  .dp-druckkopf { display: flex; justify-content: space-between; margin-bottom: 4mm; font-size: 10pt; }
  .dp-rahmen { max-height: none; overflow: visible; border-color: var(--papier-text); }
  .dp-tabelle { min-width: 0; font-size: 8pt; }
  .dp-tabelle th, .dp-tabelle td { position: static !important; background: var(--papier) !important; color: var(--papier-text) !important; border-color: var(--papier-linie); }
  .dp-tabelle thead th.heute { border-bottom: 2px solid var(--papier-text); }
  .dp-block { background: var(--papier) !important; color: var(--papier-text) !important; border-left: 2px solid var(--papier-text) !important; }
  .dp-block .dp-kuerzel { display: inline; font-weight: 700; }
  .dp-zelle.nicht-verfuegbar { background: repeating-linear-gradient(135deg, var(--papier) 0 6px, var(--papier-linie) 6px 7px) !important; }
}

/* Aufgaben (Stufe 1c): Spalten Offen / In Arbeit / Erledigt, rechts das Detail. */
.af-rahmen { display: grid; grid-template-columns: 1fr; gap: var(--a4); }
.af-rahmen:has(.af-detail:not([hidden])) { grid-template-columns: 1fr minmax(300px, 380px); }
.af-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); align-items: start; }
.af-spalte { display: flex; flex-direction: column; gap: var(--a2); background: var(--grund); border-radius: var(--r-karte); padding: var(--a3); }
.af-spalte h2 { font-size: var(--s-zeile); margin: 0; }
.af-karte { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-feld); padding: var(--a2) var(--a3); cursor: pointer; font: inherit; color: var(--text); }
.af-karte.aktiv { box-shadow: var(--schatten); border-color: var(--text); }
.af-faellig { font-size: var(--s-klein); color: var(--gedaempft); }
.af-faellig.ueberfaellig { color: var(--fehler); font-weight: 600; }
.af-fortschritt { position: relative; display: block; height: 14px; background: var(--grund); border-radius: 7px; overflow: hidden; }
.af-fortschritt span { position: absolute; inset: 0 auto 0 0; background: var(--linie); }
.af-fortschritt i { position: relative; font: normal var(--s-klein)/14px var(--schrift); padding-left: var(--a1); }
.af-detail { display: flex; flex-direction: column; gap: var(--a2); }
.af-detail-kopf { display: flex; justify-content: space-between; gap: var(--a2); align-items: flex-start; }
.af-text { white-space: pre-wrap; }
.af-zeile { display: flex; gap: var(--a2); align-items: flex-end; }
.af-zeile .feld { flex: 1; }
.af-kommentar p { margin: 2px 0 var(--a2); white-space: pre-wrap; }
@media (max-width: 900px) { .af-spalten { grid-template-columns: 1fr; } .af-rahmen:has(.af-detail:not([hidden])) { grid-template-columns: 1fr; } }

/* ---------- Seitenleiste ein- und ausklappen (09.10.2026) ----------
   Sanfter Wechsel in 150 ms. Eingeklappt nutzt der Inhalt die ganze Breite neben der Leiste,
   24 px Rand links und rechts, ohne Höchstbreite -- Kalender und Tabelle gehen bis zum Rand.
   Unter 1100 px ist sie immer eingeklappt und klappt als Überlagerung auf (`leiste-ueber`). */
.seitenleiste { transition: width .15s ease, flex-basis .15s ease; }
.app.leiste-schmal .seite { max-width: none; padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) and (max-width: 1099px) {
  /* Die schmale Leiste steht neben dem Inhalt (die alte Regel bis 900 px stapelte sie darüber). */
  .app { flex-direction: row; }
  .seitenleiste { position: sticky; top: 0; height: 100vh; }
  .nav { max-height: none; }
  .app.leiste-ueber .seitenleiste { position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; box-shadow: var(--schatten); }
  .app.leiste-ueber .inhalt { margin-left: 64px; }
  .app.leiste-ueber::before { content: ''; position: fixed; inset: 0; z-index: 85; background: var(--schleier); }
}
@media (prefers-reduced-motion: reduce) { .seitenleiste, .ep-rahmen { transition: none; } }

/* Linke Spalte der Einsatzplanung: eigener Knopf vor „Heute“, eigener gemerkter Zustand. */
.ep-rahmen { transition: grid-template-columns .15s ease; }
.ep-rahmen.links-zu { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
.ep-rahmen.links-zu .ep-links { visibility: hidden; overflow: hidden; min-width: 0; }
.ep-links-klapp { width: var(--ep-h, 36px); height: var(--ep-h, 36px); padding: 0; justify-content: center; flex: none; }
.ep-links-klapp .sym { transition: transform .15s ease; }
.ep-rahmen.links-zu .ep-links-klapp .sym { transform: rotate(180deg); }

/* ---------- Einsatzplanung als Tabelle (Skizze 016) ---------- */
.ep-tab-leiste { --ep-h: 36px; display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; margin: calc(-1 * var(--a2)) 0 var(--a4); }
.ep-tab-leiste .feld { height: var(--ep-h); width: auto; min-width: 0; max-width: 220px; font-size: var(--s-zeile); }
.ep-tab-filtertext { color: var(--gedaempft); font-size: var(--s-zeile); }
.ep-tab-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.ep-tab-rechts .knopf { height: var(--ep-h); }
.ep-spalten { position: relative; }
.ep-spalten summary { list-style: none; cursor: pointer; }
.ep-spalten summary::-webkit-details-marker { display: none; }
.ep-spalten-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-feld); box-shadow: var(--schatten); padding: var(--a2) var(--a3); display: flex; flex-direction: column; gap: var(--a1); min-width: 180px; }
.ep-tab-rahmen { border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); overflow-x: auto; }
.ep-tab { width: 100%; border-collapse: collapse; font-size: var(--s-zeile); font-variant-numeric: tabular-nums; color: var(--text); }
.ep-tab th, .ep-tab td { padding: 0 var(--a2); height: 34px; text-align: left; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.ep-tab td + td, .ep-tab th + th { border-left: 1px solid var(--linie); }
.ep-tab thead th { background: var(--leiste); font-weight: 600; border-bottom: 1.5px solid var(--text); position: sticky; top: 0; z-index: 1; }
.ep-tab .num { text-align: right; }
.ep-tab td.nr, .ep-tab th.nr { width: 44px; text-align: center; color: var(--gedaempft); }
.ep-t-gruppe th { background: var(--hervor); border-top: 1.5px solid var(--text); font-weight: 400; padding: var(--a1) var(--a2); }
.ep-t-gkopf { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.ep-t-titel { color: var(--gedaempft); font-size: var(--s-klein); }
.ep-t-kat { display: inline-block; padding: 1px var(--a2); border-radius: var(--r-chip); border: 1px solid; font-size: var(--s-klein); font-weight: 600; text-transform: uppercase; }
.ep-t-schalterleiste { margin-left: auto; display: flex; gap: var(--a4); align-items: center; }
.ep-t-schalter { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--s-klein); cursor: pointer; }
.ep-t-schalter .schalter { margin-top: 0; }
.ep-t-schalter.nur-lesen { cursor: default; opacity: .7; }
.ep-t-zelle { position: relative; outline: none; }
.ep-t-zelle.bearbeitbar { cursor: cell; }
.ep-t-zelle.gewaehlt { box-shadow: inset 0 0 0 2px var(--text); }
.ep-t-zelle.geerbt { color: var(--gedaempft); }
.ep-t-zelle.aus, .ep-t-muster { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie) 6px 7px); }
.ep-t-zelle.rf { background: var(--warnung-flaeche); box-shadow: inset 0 0 0 1px var(--warnung-linie); }
.ep-t-zelle.rf.gewaehlt { box-shadow: inset 0 0 0 2px var(--warnung); }
.ep-t-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; box-shadow: inset 0 0 0 2px var(--akzent); padding: 0 var(--a2);
  font: inherit; color: var(--text); background: var(--flaeche); text-align: inherit; }
.ep-t-weg { border: 0; background: none; color: var(--gedaempft); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 var(--a1); float: right; visibility: hidden; }
.ep-t-zeile:hover .ep-t-weg, .ep-t-zelle.gewaehlt .ep-t-weg, .ep-t-weg:focus-visible { visibility: visible; }
.ep-t-weg:hover { color: var(--fehler); }
.ep-t-neu td { color: var(--gedaempft); }
.ep-t-neu-feld { width: 100%; max-width: 420px; height: 30px; border: 0; background: none; font: inherit; color: var(--text); padding: 0; }
.ep-t-neu-feld::placeholder { color: var(--gedaempft); }
.ep-t-neu-feld:focus { outline: none; box-shadow: 0 1px 0 var(--akzent); }
.ep-t-rf td { background: var(--warnung-flaeche); height: auto; white-space: normal; }
.ep-t-rf .ep-rf-zeile { border-top: 0; padding: var(--a1) 0; }
.ep-t-summe th, .ep-t-summe td { font-weight: 700; border-top: 1.5px solid var(--text); border-bottom: 0; height: 38px; }
.ep-tab-legende { display: flex; align-items: center; gap: var(--a1); flex-wrap: wrap; margin-top: var(--a2); }
.ep-t-muster { display: inline-block; width: 22px; height: 12px; border: 1px solid var(--linie); }
.ep-tab-leer .ep-tab-rahmen { min-height: 360px; }
.ep-tab-leer .leer-ueber { top: 36px; }
@media (max-width: 899px) { .ep-rahmen.links-zu { grid-template-columns: minmax(0, 1fr); } .ep-rahmen.links-zu .ep-links { display: none; } }
.nur-druck { display: none; }
@media (max-width: 639px) { .ep-tab-rechts { margin-left: 0; } .ep-tab-leiste .feld { max-width: none; flex: 1 1 140px; } }
@media print {
  body.ep-tab-druck .ep-links, body.ep-tab-druck .ep-leiste .ep-schalter, body.ep-tab-druck .ep-links-klapp, body.ep-tab-druck .ep-nav,
  body.ep-tab-druck .ep-tab-leiste, body.ep-tab-druck .ep-t-neu, body.ep-tab-druck .ep-t-rf, body.ep-tab-druck .ep-t-weg, body.ep-tab-druck .ep-tab-legende + .hilfe,
  body.ep-tab-druck .vorschau-band, body.ep-tab-druck .demo-band { display: none !important; }
  body.ep-tab-druck { background: var(--papier) !important; }
  body.ep-tab-druck .ep-rahmen { display: block; }
  body.ep-tab-druck .ep-tab-rahmen { border: 0; overflow: visible; }
  body.ep-tab-druck .ep-tab { font-size: 8pt; color: var(--papier-text); }
  body.ep-tab-druck .ep-tab th, body.ep-tab-druck .ep-tab td { height: auto; padding: 1mm 1.5mm; border-color: var(--papier-text); background: var(--papier) !important; color: var(--papier-text) !important; position: static; }
  body.ep-tab-druck .ep-t-gruppe th { border-top: 1.5pt solid var(--papier-text); font-weight: 700; }
  body.ep-tab-druck .ep-t-kat { border-color: var(--papier-text); background: var(--papier) !important; color: var(--papier-text) !important; }
  body.ep-tab-druck .schalter { display: none; }
  body.ep-tab-druck .nur-druck { display: inline; }
  body.ep-tab-druck .ep-t-zelle.aus, body.ep-tab-druck .ep-t-muster { background: repeating-linear-gradient(135deg, var(--papier) 0 5px, var(--papier-linie) 5px 6px) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.ep-tab-druck .ep-t-zelle.gewaehlt { box-shadow: none; }
  body.ep-tab-druck .ep-zeitraum { font-size: 14pt; }
}

/* ---------- Regiebericht: Positionen und Person zuordnen (09.10.2026) ---------- */
.rb-positionen { list-style: none; margin: var(--a1) 0 var(--a2); padding: 0; display: flex; flex-direction: column; gap: var(--a1); }
.rb-pos { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) 36px; align-items: center; gap: var(--a1);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-feld); padding: 2px var(--a1); }
.rb-pos.zieht { opacity: .5; }
.rb-pos .feld { border: 0; box-shadow: none; padding-left: 0; min-width: 0; }
.rb-pos-griff { cursor: grab; color: var(--gedaempft); text-align: center; user-select: none; letter-spacing: -2px; }
.rb-pos-nr { color: var(--gedaempft); text-align: right; font-variant-numeric: tabular-nums; }
.rb-pos-weg { border: 0; background: none; color: var(--gedaempft); font: inherit; font-size: 20px; cursor: pointer; height: 36px; }
.rb-pos-weg:hover { color: var(--fehler); }
.rb-positionen-anzeige { margin: 0; padding-left: 1.6em; }
.rb-positionen-anzeige li { padding: 2px 0; }
#rb-monteure tr.gelb td { background: var(--warnung-flaeche); }
.rb-zuordnen { display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; margin-top: var(--a1); }
.rb-zuordnen .feld { width: auto; max-width: 280px; }

/* Regieberichte: „⋯“ je Zeile (Entwurf löschen, 4k). */
.aktion-spalte { width: 44px; text-align: right; }
.zeilenmenue { position: relative; display: inline-block; }
.zeilenmenue summary { list-style: none; cursor: pointer; }
.zeilenmenue summary::-webkit-details-marker { display: none; }
.zeilenmenue-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-feld); box-shadow: var(--schatten); padding: var(--a1); white-space: nowrap; }
.regie-verworfene { margin: var(--a2) var(--a3); }

/* Interne Notiz und „An Montageleiter senden“ (4h). */
.ep-f-intern { display: inline-flex; align-items: center; gap: var(--a1); }
.ep-f-hinweis { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
#ep-f-hinweis-stand.warnt { color: var(--warnung); font-weight: 600; }
.ep-hinweis-empf { display: flex; flex-direction: column; gap: var(--a1); margin: var(--a1) 0 var(--a3); }

/* Glocke (09.10.2026): Eintrag mit leisen Knöpfen beim Darüberfahren, Rückgängig-Zeile, Fuß. */
.glocke-zeile { align-items: center; }
.glocke-ziel { display: flex; gap: var(--a3); align-items: flex-start; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.glocke-knoepfe { display: flex; gap: 2px; opacity: 0; transition: opacity .1s; }
.glocke-zeile:hover .glocke-knoepfe, .glocke-zeile:focus-within .glocke-knoepfe { opacity: 1; }
@media (hover: none) { .glocke-knoepfe { opacity: 1; } }
.glocke-knopf { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-feld); background: none;
  color: var(--gedaempft); font: inherit; cursor: pointer; }
.glocke-knopf:hover { background: var(--flaeche); color: var(--text); }
.glocke-rueck { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); padding: var(--a2) var(--a4);
  border-bottom: 1px solid var(--linie); font-size: var(--s-klein); }
.glocke-fuss { display: flex; justify-content: space-between; gap: var(--a2); padding: var(--a2) var(--a4); border-top: 1px solid var(--linie); }

/* Übersicht Montage (09.10.2026): ganze Kachel klickbar, Zusatzzeilen als eigene leise Knöpfe. */
.band > .kachel-link { cursor: pointer; border-radius: var(--r-karte); outline: 1px solid transparent; transition: outline-color .1s; }
.band > .kachel-link:hover { outline-color: var(--text); }
.kachel-zusatz { border: 0; background: none; padding: 2px 4px; margin: 0 -4px; border-radius: var(--r-feld); font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.kachel-zusatz:hover { background: var(--hervor); color: var(--text); }
.kachel-zusatz.warnt { color: var(--warnung); font-weight: 600; }
.aufmerksam-link { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.aufmerksam-link:hover b { text-decoration: underline; }
#mo-aufmerksam.blinkt { outline: 2px solid var(--warnung); outline-offset: 4px; border-radius: var(--r-feld); }

/* Regiebericht aus der App: Ansicht ist das PDF selbst (09.10.2026) */
.rb-pdf-ansicht { display: block; width: 100%; height: 80vh; margin-top: var(--a4); border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); }