/* ERP – „Fillbach Dunkel+Orange": Marken-Schicht über Bootstrap 5.3.
   Mix aus altem Eigen-Design (Anthrazit, Orange, Barlow) und liefersign-
   Bootstrap-Basis. Spec: docs/superpowers/specs/2026-08-06-design-
   dunkel-orange-design.md */

@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-600-latin.woff2") format("woff2");
}

:root {
  --orange: #e8630a; --orange-dunkel: #c95208; --dunkel: #1f2933;
  --hell: #f6f7f9; --linie: #e0e4e9;
  --gruen: #0d7a3f; --rot: #b3261e;
  --schatten: 0 1px 2px rgba(31,41,51,.06), 0 1px 3px rgba(31,41,51,.10);
  --aktiv-zeile: #fdeee2;

  /* Bootstrap-Laufzeit-Variablen auf die Marke umbiegen */
  --bs-primary: #e8630a; --bs-primary-rgb: 232, 99, 10;
  --bs-link-color: #c95208; --bs-link-color-rgb: 201, 82, 8;
  --bs-link-hover-color: #a84406; --bs-link-hover-color-rgb: 168, 68, 6;
  --bs-body-bg: #f6f7f9; --bs-body-color: #1f2933;
  --bs-border-color: #e0e4e9; --bs-border-radius: .625rem;
  --bs-success: #0d7a3f; --bs-success-rgb: 13, 122, 63;
  --bs-danger: #b3261e; --bs-danger-rgb: 179, 38, 30;
  --bs-body-font-family: "Barlow", system-ui, "Segoe UI", Roboto, sans-serif;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--bs-body-font-family); font-size: 15px; }

/* Schriftstufe je Nutzer (Inhaber 26.10.2026, Lager-Tablet): die Grund-
   schrift wächst, alles in rem wächst mit; Grautöne werden dunkler, weil
   helles Grau auf Weiß bei schlechten Augen zuerst verschwindet. */
html.schrift-1 { font-size: 125%; }
html.schrift-2 { font-size: 150%; }
html.schrift-1 body, html.schrift-2 body { font-size: .9375rem; }
html.schrift-1, html.schrift-2 { --bs-secondary-color: #3e4c59; }
html.schrift-1 .text-muted, html.schrift-2 .text-muted,
html.schrift-1 .text-secondary, html.schrift-2 .text-secondary,
html.schrift-1 .card-sub, html.schrift-2 .card-sub,
html.schrift-1 .card-adresse, html.schrift-2 .card-adresse,
html.schrift-1 .pick-marke.ko, html.schrift-2 .pick-marke.ko,
html.schrift-1 .pick-ko-menge, html.schrift-2 .pick-ko-menge,
html.schrift-1 .pick-pos, html.schrift-2 .pick-pos { color: #3e4c59 !important; }
.knopf-schrift { font-weight: 700; cursor: pointer; }

/* Kompilierte Bootstrap-Komponenten lesen --bs-primary nicht zur
   Laufzeit — gezielt nachziehen. */
.btn-primary {
  --bs-btn-bg: #e8630a; --bs-btn-border-color: #e8630a;
  --bs-btn-hover-bg: #c95208; --bs-btn-hover-border-color: #c95208;
  --bs-btn-active-bg: #a84406; --bs-btn-active-border-color: #a84406;
  --bs-btn-disabled-bg: #e8630a; --bs-btn-disabled-border-color: #e8630a;
  --bs-btn-focus-shadow-rgb: 232, 99, 10;
}
.btn-outline-primary {
  --bs-btn-color: #c95208; --bs-btn-border-color: #e8630a;
  --bs-btn-hover-bg: #e8630a; --bs-btn-hover-border-color: #e8630a;
  --bs-btn-active-bg: #c95208; --bs-btn-active-border-color: #c95208;
  --bs-btn-focus-shadow-rgb: 232, 99, 10;
}
.form-check-input:checked { background-color: #e8630a; border-color: #e8630a; }
.form-check-input:focus, .form-control:focus, .form-select:focus {
  border-color: #f0a468; box-shadow: 0 0 0 .25rem rgba(232, 99, 10, .2);
}
.list-group-item.active, .dropdown-item.active, .dropdown-item:active,
.nav-pills .nav-link.active, .page-item.active .page-link {
  background-color: #e8630a; border-color: #e8630a; color: #fff;
}
.page-link { color: #c95208; }
.page-link:hover { color: #a84406; }
.text-bg-primary, .badge.bg-primary { background-color: #e8630a !important; }
:focus-visible { outline: 2px solid #e8630a; outline-offset: 2px; }

/* Kopfleiste: Anthrazit, Module als Reiter mit orangem Aktiv-Unterstrich */
.navbar-erp { background: var(--dunkel); box-shadow: var(--schatten);
  padding-top: 0; padding-bottom: 0; }
.navbar-erp .container-fluid { min-height: 52px; }
.navbar-erp .navbar-brand { padding: .35rem 0; }
.nav-reiter { color: #cbd2d9; text-decoration: none; display: inline-flex;
  align-items: center; gap: .35rem; padding: 0 .5rem; min-height: 52px;
  font-weight: 500; font-size: .95rem; white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  transition: color 130ms ease, border-color 130ms ease; }
.nav-reiter:hover { color: #fff; }
.nav-reiter.aktiv { color: #fff; border-bottom-color: var(--orange); }
/* Eigene offene Aufgaben am Reiter „Aufgaben" (22.10.2026) */
.nav-zahl { background: var(--orange); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1; padding: .2rem .4rem;
  margin-left: .35rem; min-width: 1.2rem; text-align: center; }
.nav-zahl[hidden] { display: none; }
/* Unterleiste der zusammengelegten Kopfleisten-Einträge (30.10.2026) */
.unterleiste-erp { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem;
  padding: 0 1rem; background: #fff; border-bottom: 1px solid #dde1e6; }
.unterleiste-erp a { display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; color: #52606d; text-decoration: none; font-weight: 500;
  border-bottom: 3px solid transparent; white-space: nowrap; }
.unterleiste-erp a:hover { color: var(--dunkel); }
.unterleiste-erp a.aktiv { color: var(--dunkel); border-bottom-color: var(--orange); }
.nav-trenner { width: 1px; height: 22px; align-self: center;
  background: rgba(255,255,255,.22); margin: 0 .3rem; }
.knopf-geist { color: #cbd2d9; background: transparent;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  padding: .3rem .7rem; font-size: .875rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: color 130ms ease, border-color 130ms ease,
              background 130ms ease; }
.knopf-geist:hover { color: #fff; border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08); }
/* Name nur auf sehr breiten Screens — mit allen Admin-Reitern bricht die
   Leiste sonst um; im Portal-Kopf steht er immer. */
.nutzer-name { color: #cbd2d9; font-size: .9rem; display: none; }
@media (min-width: 1600px) { .navbar-erp .nutzer-name { display: inline; } }
.portal-kopf .nutzer-name { display: inline; }
/* Handy: Kopfleisten-Knöpfe nur mit Symbol (Geißler /fahrer, 29.10.2026) */
@media (max-width: 575.98px) { .navbar-erp .knopf-lang { display: none; } }

/* Flächen: weiße Karten mit weichem Schatten, ruhige Tabellen */
.card { border: 0; box-shadow: var(--schatten); border-radius: 10px; }
.table { --bs-table-hover-bg: #f8efe6; }
.table tr.aktiv > * { background-color: var(--aktiv-zeile); }
.table td, .table th { vertical-align: middle; }
/* Zahlen-Inputs unter ihre rechtsbündigen Überschriften rücken:
   .form-control ist block-level und klebt sonst links in der Zelle. */
.table td.zahl > .form-control, .table td.geld > .form-control,
.table td.geld > .form-select { margin-left: auto; }
/* Erfassungszeile: Preis-Stapel darf die Einzelpreis-Spalte nicht aufblähen */
#preis-stufe, #freipreis-feld, #freipreis-grund { max-width: 180px; }
.list-group-item { transition: background-color .15s; }
.list-group-item:hover { background-color: #faf3ec; }

/* Portal (Modulauswahl): gleiche Sprache wie die App — heller Grund,
   Anthrazit-Kopf, weiße Kacheln, oranger Hover-Unterstrich wie die
   Reiter der Navbar. Ein Akzentton je Bereich, nur am Icon. */
.portal-body { margin: 0; min-height: 100vh; background: var(--hell); }
.portal-kopf { background: var(--dunkel); box-shadow: var(--schatten);
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.2rem; min-height: 52px; }
.portal-inhalt { max-width: 880px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.portal-bereich { font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #52606d; margin: 1.5rem 0 .6rem .2rem; }
.portal-raster { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.portal-kachel { display: flex; align-items: center; gap: .9rem;
  background: #fff; border-radius: 10px; padding: .9rem 1.1rem;
  text-decoration: none; box-shadow: var(--schatten);
  border-bottom: 3px solid transparent;
  transition: box-shadow 130ms ease, border-color 130ms ease,
              transform 130ms ease; }
.portal-kachel:hover { border-bottom-color: var(--orange);
  box-shadow: 0 4px 14px rgba(31,41,51,.16); transform: translateY(-1px); }
.portal-kachel:active { transform: none; }
.kachel-icon { width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: var(--akzent, var(--orange));
  background: var(--akzent-hell, var(--aktiv-zeile)); }
.kachel-text { min-width: 0; }
.kachel-titel { display: block; font-weight: 600; color: var(--dunkel);
  line-height: 1.25; }
.kachel-sub { display: block; font-size: .82rem; color: #7b8794;
  margin-top: .1rem; }

/* Lieferantenakte: Kachelraster /einkauf (eine Kachel je Lieferant) */
.lief-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.lief-kachel { display: flex; gap: .8rem; padding: .8rem; background: #fff; border-radius: 10px;
  border: 1px solid #e3e6ea; border-bottom: 3px solid #e3e6ea; text-decoration: none; color: inherit; }
.lief-kachel:hover { border-bottom-color: var(--orange); }
.lief-kachel-neu .lief-plakette { background: var(--orange); color: #fff; }
.lief-kachel-warn { border-color: #f0ad4e; }
.lief-plakette { flex: 0 0 56px; height: 56px; border-radius: 10px; background: var(--dunkel); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; letter-spacing: .03em; }
.lief-text { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.lief-name { font-weight: 600; color: var(--dunkel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lief-zaehler { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .78rem; color: #7b8794; }
.lief-z.aktiv { color: var(--orange); }
.lief-sub { font-size: .78rem; color: #7b8794; }
.lief-warn { color: #b45309; margin-left: .4rem; }
/* Hersteller-Raster (E7): Kennzahlzeile, Mini-Ampeln, erster Handlungsbedarf */
.hst-zeile { font-size: .78rem; color: #5b6770; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hst-ampeln { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .76rem; color: #7b8794; }
.hst-ampel { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .25rem;
  vertical-align: -.05rem; background: #cbd2d9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.hst-ampel.gruen { background: #2e9e5b; } .hst-ampel.gelb { background: #f0ad4e; } .hst-ampel.rot { background: #d64545; }
.hst-ampel.orange { background: var(--orange); }
.hst-kachel-bedarf { font-size: .78rem; color: var(--orange); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lief-kachel.hst-bedarf { border-left: 4px solid var(--orange); }
.hst-kennzahl { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: .6rem .8rem; height: 100%; }
.hst-kennzahl .wert { font-size: 1.45rem; line-height: 1.1; font-weight: 600; color: var(--dunkel); }
.hst-kennzahl .label { font-size: .78rem; color: #7b8794; }
.hst-kennzahl.warn .wert { color: #b45309; } .hst-kennzahl.rot .wert { color: #d64545; } .hst-kennzahl.gruen .wert { color: #2e9e5b; }
.hst-chips a { margin-right: .3rem; }
.hst-badge-weg { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
td.ampel-gelb { background: #fff6e0; } td.ampel-rot { background: #fde8e8; }
.hst-plakette-gross { flex: 0 0 64px; height: 64px; font-size: 1rem; }

.bereich-vorgaenge  { --akzent: #e8630a; --akzent-hell: #fdeee2; }
.bereich-logistik   { --akzent: #0d7a3f; --akzent-hell: #e2f2e9; }
.bereich-stammdaten { --akzent: #1552a0; --akzent-hell: #e4ecf7; }
.bereich-auswertung { --akzent: #7b4a12; --akzent-hell: #f2e9de; }
.bereich-verwaltung { --akzent: #52606d; --akzent-hell: #e9edf0; }

/* Bestehende Bausteine im neuen Look */
.navbar-logo { height: 36px; width: auto; background: #fff;
  border-radius: 6px; padding: 3px 10px; display: block; }
.login-logo { width: 220px; max-width: 80%; height: auto; display: block;
  margin: 0 auto; }
.letter-spacing-wide { letter-spacing: .4em; font-size: 1.5rem; }
.min-w-0 { min-width: 0; }
#signature-canvas { display: block; background: #fff;
  border: 2px dashed #dee2e6 !important; border-radius: .375rem !important;
  transition: border-color .2s; }
#signature-canvas:active, #signature-canvas.signing {
  border-color: #e8630a !important; }
#progress-bar { transition: width 1s linear; }

/* ERP-Spezifika, die Bootstrap nicht abdeckt */
.markierung-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .35em;
  background: #7b8794; border: 1px solid rgba(31,41,51,.25); }
.markierung-punkt.m-orange { background: #e8630a; }
.markierung-punkt.m-rot    { background: #b3261e; }
.markierung-punkt.m-gruen  { background: #0d7a3f; }
.markierung-punkt.m-blau   { background: #1552a0; }
.markierung-punkt.m-braun  { background: #7b4a12; }
.markierung-punkt.m-gelb   { background: #e0a400; }
.badge.markierung { display: inline-flex; align-items: center; gap: .35rem; }

/* Alters-Ampel unter EK-Preisen: frisch grau, >90 Tage gelb, >1 Jahr rot */
.preis-alter { font-size: .72em; line-height: 1.1; color: #7b8794; white-space: nowrap; }
.preis-alter.gelb { color: #a97a00; }
.preis-alter.rot  { color: #b3261e; font-weight: 600; }

/* Lagerbestand: ein Stand für die ganze Liste, deshalb eigene Kopfzeile.
   Ampel wie oben — bis 7 Tage grau, bis 30 orange, darüber rot. */
.lager-stand { color: #7b8794; }
.lager-stand.orange { color: #a97a00; }
.lager-stand.rot { color: #b3261e; font-weight: 600; }
.lager-unter-min { color: #a97a00; font-weight: 600; }
/* Bestands-Ampel (Inhaber 27.10.2026): grün = frisch gezählt */
.bestand-frisch-gruen { background: #198754; color: #fff; }
.bestand-frisch-gelb { background: #fff3cd; color: #664d03; border: 1px solid #e0c46c; }
.bestand-frisch-grau { background: #f1f3f5; color: #6c757d; border: 1px solid #ced4da; }
/* Bestandszeile unter dem Mengenfeld der Erfassung: ruhig, nicht alarmierend */
/* Bestand unter dem Mengenfeld (Inhaber 03.09.2026): die Zelle richtet
   aus (Mengenzelle rechts, Bestellmaske links), grünes Icon wie vor den
   Positionsnamen, die Menge fett, Kommission in Orange darunter. */
.lager-hinweis { font-size: .72em; line-height: 1.25; color: #5c6b7a;
  white-space: nowrap; margin-top: .3rem; }
.lager-hinweis .bi { margin-right: .25em; }
.lager-hinweis .lager-menge { font-weight: 600; color: #1f2a36; }
.lager-hinweis .lager-kommission { color: var(--orange); }
.lager-hinweis .lager-gezaehlt { font-size: .8em; color: #6c757d; }
.lager-hinweis .lager-gezaehlt-gruen { color: #198754; }
.lager-hinweis .lager-gezaehlt-gelb { color: #997404; }
/* Menge in der Basiseinheit unter Menge/Einheit („= 4,26 M2“):
   Bildschirm-Auskunft in Erfassung, Lager und Fahrer-Ansicht
   (Inhaber 03.09.2026), nie auf dem Dokument. */
.basis-menge { font-size: .72em; line-height: 1.25; color: #5c6b7a;
  white-space: nowrap; }
.basis-menge:empty { display: none; }
/* Preis an nicht bearbeitbaren Belegen: Klick zeigt die Preisstufen
   (Inhaber 19.10.2026, beleg_erfassung.js initZeilenStufen). */
.preis-auskunft { cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px; }
#positionen-karte td.marge-zelle, #positionen-karte td.ek-zelle { color: #5c6b7a; }
/* Aufschlags-Ampel (Inhaber 03.09.2026, Aufschlag statt Marge seit
   22.10.2026): nur die Zahl färbt sich — rot unter 11 %, gelb bis 25 %,
   grün darüber; Farben wie die Hersteller-Kennzahlen. */
#positionen-karte td.marge-zelle.marge-rot   { color: #d64545; font-weight: 600; }
#positionen-karte td.marge-zelle.marge-gelb  { color: #b45309; font-weight: 600; }
#positionen-karte td.marge-zelle.marge-gruen { color: #2e9e5b; }
/* Fester Platz vor dem Artikelnamen: Bestands-Icon (bi-box-seam) oder
   dieser leere Platzhalter gleicher Breite, damit die Namen bündig
   bleiben (Task 10, Inhaber 02.09. abends über Session erp-06). */
.lager-icon { display: inline-block; width: 1.25em; }
/* Alternativ-/Optional-Positionen (Inhaber 03.09.2026): gedämpfte Zeile,
   Betrag in eckigen Klammern (Template), Badge unter der Positionsnummer.
   Eingabefelder bleiben aufrecht — nur die Auskunft ist kursiv. */
tr.pos-alternativ > td, tr.pos-optional > td { color: #6b7684; font-style: italic; }
tr.pos-alternativ > td a, tr.pos-optional > td a { color: inherit; }
tr.pos-alternativ input, tr.pos-optional input { font-style: normal; }
.zeilenart-badge { font-size: .65rem; font-weight: 500; font-style: normal; }
/* Positionsnummer als Menüknopf (Normal/Alternativ/Optional): sieht aus
   wie die Zahl, nur der kleine Pfeil verrät das Menü. */
.pos-nr-knopf { color: inherit; font: inherit; text-decoration: none; vertical-align: baseline; }
.pos-nr-knopf::after { margin-left: .25em; vertical-align: .15em; }
th.sortierbar { cursor: pointer; white-space: nowrap; }
td.zahl, th.zahl, td.geld, th.geld { text-align: right; font-variant-numeric: tabular-nums; }
tr.erfassungszeile td { background: #fbf6f1; vertical-align: top; }
/* Enter im letzten Feld setzt den Fokus auf „Hinzufügen" — deutlich
   sichtbar, auch wenn der Browser :focus-visible nicht setzt. */
tr.erfassungszeile button[form="pos-neu"]:focus {
  outline: 3px solid #e8630a; outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(232, 99, 10, .25); }
/* Kein d-inline-block (!important) — JS blendet über style.display um. */
/* Grund-Feld der Zeile sitzt seit 09.09.2026 unter dem Preisfeld (wie
   #freipreis-grund in der Erfassungszeile), nicht mehr in der Aktionsspalte. */
.grund-input { display: block; }
.preis-input + .grund-input { margin-top: .25rem; }
/* Spalten-Anfasser, die tabelle_spalten.js in sortierbare th einfügt */
.spalten-griff {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none;
}
.spalten-griff:hover { background: #e8630a; opacity: .5; }
tr.summe td { font-weight: 600; border-top: 2px solid #52606d; }

@media (max-width: 576px) {
  .container { padding-left: 12px; padding-right: 12px; }
  #signature-canvas { height: 150px !important; }
}

/* Ziehen & Ablegen zwischen Fenstern (ziehen.js): Anfasser an der
   Artikelakte, ziehbarer Historie-Kopf, Ziel-Karte beim Darüberziehen. */
.zieh-griff { cursor: grab; color: #a8a29e; margin-right: .25rem; }
.zieh-griff:hover { color: #e8630a; }
.vh-kopf[draggable="true"] { cursor: grab; }
[data-zieh="artikel"] tbody tr[data-id] { cursor: grab; }
.zieht { opacity: .5; }
#positionen-karte.dropziel, [data-zieh-ziel].dropziel {
  outline: 3px dashed #e8630a; outline-offset: -3px;
  background-color: #fdf3ea; }
#positionen-karte.dropziel-arbeitet { opacity: .6; }
/* Verschieben im selben Beleg: orange Linie, wo die Zeilen landen. */
#positionen-karte tbody tr.pos-drop-vor > td { box-shadow: inset 0 3px 0 #e8630a; }
#positionen-karte tbody tr.pos-drop-nach > td { box-shadow: inset 0 -3px 0 #e8630a; }
#positionen-karte .pos-griff { cursor: grab; color: #a8a29e; margin-right: .15rem; }
#positionen-karte td.pos-nr { white-space: nowrap; }
#positionen-karte .pos-loeschen { width: 1%; white-space: nowrap; padding-right: 0; }
#positionen-karte td.pos-nr .dropdown { display: inline-block; }
#positionen-karte tr[data-pos-id]:hover .pos-griff { color: #e8630a; }

/* Merkzettel: markierte Positionszeilen (Klick/Strg/Umschalt wie im
   Dateimanager). Ton statt Rahmen, damit die Tabelle ruhig bleibt. */
#positionen-karte tbody tr[data-pos-id] { cursor: pointer; }
#positionen-karte tbody tr.pos-markiert > td {
  background-color: #fdeee2; }
#positionen-karte tbody tr.pos-markiert > td:first-child {
  box-shadow: inset 3px 0 0 #e8630a; }
/* Ohne Maus wandert der Fokus mit ↑/↓ durch die Zeilen — bei Strg+Pfeil
   sogar ohne zu markieren. Eine graue Marke zeigt, wo die Leertaste
   greift; markierte Zeilen behalten ihre orangene. */
#positionen-karte tbody tr[data-pos-id]:focus { outline: none; }
#positionen-karte tbody tr[data-pos-id]:focus-visible:not(.pos-markiert) > td {
  background-color: #faf7f5; }
#positionen-karte tbody tr[data-pos-id]:focus-visible:not(.pos-markiert) > td:first-child {
  box-shadow: inset 3px 0 0 #a8a29e; }

/* ---- Kopfkarte der Belegerfassung ---------------------------------------
   Kunde/Zahlungsbedingung/Anschrift/Lieferart als zweispaltiges Raster
   statt vierzeiliger dl — die Positionstabelle rückt nach oben und ist
   auch auf einem 768-px-Laptop beim Öffnen sichtbar. */
.kopf-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  column-gap: 1.25rem; row-gap: .15rem; margin: 0; font-size: .92rem; }
.kopf-daten dt { font-weight: 600; white-space: nowrap; }
.kopf-daten dd { margin: 0; min-width: 0; }
@media (max-width: 900px) {
  .kopf-daten { grid-template-columns: max-content minmax(0, 1fr); }
}
#kopfkarte summary { cursor: pointer; }
/* Zahlen- und Geldspalten der Positionstabelle brechen nie um („399,20 €“
   auf zwei Zeilen) — die Breite geht in die Artikel-/Textspalte. */
#positionen-karte th, #positionen-karte td.zahl, #positionen-karte td.geld { white-space: nowrap; }

/* ---- Erfassungsfläche: Positionen links, Preishistorie rechts ----------
   Das Panel beantwortet beim Erfassen die Frage nach dem letzten Preis
   DIESES Kunden für DIESEN Artikel. Es klebt beim Scrollen, damit es auch
   bei langen Belegen im Blick bleibt; unter 1200 px rutscht es unter die
   Tabelle, statt die ohnehin breite Positionszeile zu quetschen. */
.erfassung-flaeche { display: flex; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; }
.erfassung-haupt { flex: 1 1 640px; min-width: 0; }
/* Rechte Spalte: Historie-Panel und darunter „Passt dazu" (08.09.2026)
   teilen sich die klebende Spalte IMMER hälftig (Inhaber 08.09.: „das
   Passt dazu wird teilweise von der Preishistorie überdeckt"); jedes
   Panel scrollt für sich. Dafür braucht die Spalte eine feste Höhe — nur
   dann ist die Hälfte eine Hälfte und nicht „so viel, wie der Inhalt
   will". Die Höhe hier ist der Fallback ohne JS; beleg_erfassung.js setzt
   sie auf die tatsächlich sichtbare Restfläche (Fensterhöhe minus
   Oberkante der Spalte), weil die Spalte beim Öffnen unter Kopfzeile und
   Kopfkarte beginnt und die untere Hälfte sonst unter dem Falz liegt
   (Inhaber 09.09.: „mach es immer halbe halbe und responsiv"). Die Breite
   wächst mit dem Fenster mit (300–400 px). */
.erfassung-seite {
  flex: 0 0 clamp(300px, 24vw, 400px); position: sticky; top: 1rem;
  height: calc(100vh - 2rem); display: flex; flex-direction: column;
  gap: .75rem; min-height: 0;
}
#verkaufshistorie, #passt-dazu {
  flex: 1 1 0; overflow-y: auto; min-height: 0;
  background: #fff; border: 1px solid var(--linie);
  border-radius: var(--bs-border-radius); box-shadow: var(--schatten);
  padding: .7rem .8rem; font-size: .82rem; line-height: 1.35;
}
#passt-dazu:empty { display: none; }
/* Unter 1200 px rutscht die Spalte unter die Tabelle: beide Panels
   nebeneinander je halbe Breite und gleich hoch; erst wenn eine Hälfte
   schmaler als 280 px würde, untereinander. */
@media (max-width: 1200px) {
  .erfassung-haupt { flex: 1 1 100%; }
  .erfassung-seite { flex: 1 1 100%; position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; }
  #verkaufshistorie, #passt-dazu { flex: 1 1 0; min-width: min(100%, 280px);
    height: clamp(14rem, 40vh, 24rem); }
}
.pd-kopf { border-bottom: 2px solid var(--orange); padding-bottom: .35rem;
  margin-bottom: .5rem; font-weight: 600; }
.pd-leer { color: #5c6b7a; margin: 0; }
.pd-liste { list-style: none; margin: 0; padding: 0; }
.pd-liste li { padding: .3rem .25rem; border-bottom: 1px solid var(--hell);
  cursor: pointer; border-radius: 3px; }
.pd-liste li:last-child { border-bottom: 0; }
.pd-liste li:hover, .pd-liste li:focus-visible { background: #fff3e8;
  outline: none; }
.pd-liste li[draggable="true"] { cursor: grab; }
.pd-zeile1 { display: flex; justify-content: space-between; gap: .35rem; }
.pd-artnr { font-weight: 600; font-variant-numeric: tabular-nums;
  word-break: break-all; }
.pd-zahl { color: var(--orange); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pd-zeile2 { display: flex; justify-content: space-between; gap: .35rem;
  align-items: baseline; }
.pd-bez { color: #5c6b7a; font-size: .95em; }
.vh-ruhe { color: #7b8794; }
.vh-kopf { border-bottom: 2px solid var(--orange); padding-bottom: .35rem;
  margin-bottom: .5rem; }
.vh-artnr { font-weight: 600; font-variant-numeric: tabular-nums;
  word-break: break-all; }
.vh-bez { color: #5c6b7a; font-size: .95em; }
.vh-leer { color: #5c6b7a; margin: 0; }
.vh-liste { list-style: none; margin: 0; padding: 0; }
.vh-liste li { padding: .3rem 0; border-bottom: 1px solid var(--hell); }
.vh-liste li:last-child { border-bottom: 0; }
.vh-zeile1 { display: flex; align-items: center; gap: .35rem; }
.vh-datum { color: #5c6b7a; font-variant-numeric: tabular-nums; }
.vh-art { font-weight: 600; font-size: .78em; letter-spacing: .03em;
  padding: 0 .3rem; border-radius: 4px; background: var(--hell);
  color: var(--dunkel); }
.vh-art-re, .vh-art-gs { background: #e6f0ea; color: var(--gruen); }
.vh-art-an { background: #fdeee2; color: var(--orange-dunkel); }
.vh-art-au { background: #e7ecf3; color: #3d4e63; }
.vh-marke { font-size: .74em; color: #7b8794; text-transform: uppercase; }
.vh-neu { color: var(--orange-dunkel); }
.vh-zeile2 { display: flex; align-items: baseline; gap: .3rem;
  flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.vh-rabatt, .vh-gleich { color: #7b8794; }
/* Dritte Zeile: Preis − Rabatt = Endpreis, damit sich der Kundenrabatt
   ablesen lässt (Inhaber 02.09.2026). Der Rabattsatz ist die Aussage der
   Zeile und steht deshalb betont. */
.vh-rechnung { display: flex; align-items: baseline; gap: .3rem;
  flex-wrap: wrap; font-variant-numeric: tabular-nums;
  color: #5c6b7a; font-size: .92em; }
.vh-rechnung .vh-rabatt { color: var(--orange-dunkel); font-weight: 600; }
.vh-rechnung .vh-ohne-rabatt { color: #9aa5b1; font-weight: 400;
  font-style: italic; }
/* Vergleichszahl links (alle Zeilen auf dieselbe Bezugsgröße gerechnet),
   die Belegzeile blass rechts — so stehen die Preise in einer Spalte
   untereinander und lassen sich mit einem Blick vergleichen. */
.vh-preis { font-weight: 600; }
.vh-bezug { color: #7b8794; font-size: .92em; }
.vh-unklar { color: var(--orange-dunkel); cursor: help; }
.vh-original { margin-left: auto; color: #7b8794; font-size: .92em;
  white-space: nowrap; }
.vh-storniert { opacity: .55; text-decoration: line-through; }
.vh-fuss { margin-top: .5rem; padding-top: .4rem;
  border-top: 1px solid var(--hell); color: #7b8794; font-size: .9em; }

/* Artikel-Historie rechts in der Artikelliste (Inhaber 19.10.2026): wer
   hat den Artikel wann, wie viel, zu welchen Konditionen bekommen. Dieselbe
   Zeilensprache wie das Erfassungs-Panel (vh-*), dazu Kunde und Menge vorn.
   Die Spalte klebt beim Scrollen und scrollt selbst; unter 1200 px rutscht
   sie unter die Liste. */
.ah-raster { display: flex; gap: 1rem; align-items: flex-start; }
.ah-haupt { flex: 1 1 0; min-width: 0; }
.ah-seite {
  flex: 0 0 clamp(300px, 26vw, 420px); position: sticky; top: 1rem;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: #fff; border: 1px solid var(--linie);
  border-radius: var(--bs-border-radius); box-shadow: var(--schatten);
  padding: .7rem .8rem; font-size: .82rem; line-height: 1.35;
}
.ah-seite.laedt { opacity: .55; transition: opacity .15s; }
@media (max-width: 1200px) {
  .ah-raster { flex-direction: column; align-items: stretch; }
  .ah-seite { flex: 1 1 auto; position: static; max-height: none; }
}
#artikeltabelle tr[data-id] { cursor: pointer; }
#artikeltabelle tr.ah-gewaehlt > td { background: #fff3e8; }
#artikeltabelle tr.ah-gewaehlt > td:first-child {
  box-shadow: inset 3px 0 0 var(--orange); }
.ah-filter { display: flex; flex-direction: column; gap: .4rem;
  margin-bottom: .5rem; }
.ah-arten { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.ah-arten .vh-art { cursor: default; }
.ah-art { font-weight: 600; font-size: .78em; letter-spacing: .03em;
  padding: .05rem .45rem; border-radius: 4px; border: 1px dashed #b5bec8;
  background: transparent; color: #7b8794; line-height: 1.5; }
.ah-art:hover { border-color: var(--orange); color: var(--orange-dunkel); }
.ah-art.an { border-style: solid; border-color: transparent; }
.ah-art.an[data-gruppe="KO"] { background: #e2f1ef; color: #2c5f5a; }
.ah-art.an[data-gruppe="LS"] { background: #ece9f6; color: #4b3f78; }
.ah-art.an[data-gruppe="AU"] { background: #e7ecf3; color: #3d4e63; }
.ah-art.an[data-gruppe="AN"] { background: #fdeee2; color: var(--orange-dunkel); }
.ah-art.an[data-gruppe="BL"] { background: #f6efd9; color: #6b5414; }
.vh-art-ls { background: #ece9f6; color: #4b3f78; }
.vh-art-ko { background: #e2f1ef; color: #2c5f5a; }
.vh-art-bl { background: #f6efd9; color: #6b5414; }
/* „Zuletzt bestellt" unter dem Kopf des Erfassungs-Panels */
.vh-bestellt { font-size: .85em; padding: .35rem 0 .5rem;
  border-bottom: 1px solid #e3e7ec; margin-bottom: .35rem; }
.vh-bestellt a { font-variant-numeric: tabular-nums; }
.vh-bestellt-wer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-nummer { font-variant-numeric: tabular-nums; color: inherit; }
a.ah-nummer:hover { color: var(--orange-dunkel); }
.ah-kunde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-kunde a { color: var(--dunkel); font-weight: 500; }
.ah-kunde a:hover { color: var(--orange-dunkel); }
.ah-menge { font-weight: 600; white-space: nowrap; }
.ah-mehr-zeile { border-bottom: 0 !important; padding-top: .5rem !important; }

/* ---------------------------------------------------------- Adressampel
   Gesperrte und gemahnte Adressen müssen in jeder Übersicht ins Auge
   fallen (Inhaber 02.09.2026). Die FARBE beantwortet „darf ich liefern?"
   — `gesperrt` (Handhaken) und `vorkasse` (automatische Sperre) beide
   rot, die automatische zusätzlich schraffiert, weil sie sich mit der
   Zahlung von selbst wieder aufhebt; `mahnung` orange: gemahnt, aber
   noch nicht gesperrt. Die MAHNSTUFE steckt nicht in der Farbe, sondern
   im Schild der Zeile — sonst übertönte Rot sie, denn die Sperre greift
   ab Stufe 2 und von einer Abstufung bliebe nur Stufe 1 sichtbar.
   Stufen und Wortlaut: erp/web/adressampel.py.

   Gemalt wird auf background-color der Zellen, NICHT über Bootstraps
   --bs-table-bg-state: das ist ein deckender inset-Schatten, unter dem
   Schraffur und Farbbalken verschwänden. So bleibt der Hover-Schatten
   (halbdurchsichtig) obendrauf wirksam, und die Auswahlzeile der
   Kundenliste deckt zwar die Fläche, nie aber den Balken. */
table.table tbody tr.ampel-gesperrt > * {
  background-color: #f6d6d4; --ampel-balken: var(--rot); }
table.table tbody tr.ampel-vorkasse > * {
  background-color: #fbe7e5; --ampel-balken: #d1584f;
  background-image: repeating-linear-gradient(135deg,
    transparent 0 5px, rgba(179, 38, 30, .18) 5px 10px); }
table.table tbody tr.ampel-mahnung > * {
  background-color: #fde2c2; --ampel-balken: var(--orange); }
/* Farbbalken am Zeilenanfang: bleibt erkennbar, wenn die Zeile unter dem
   Mauszeiger aufhellt oder (Kundenliste) als ausgewählt gilt. Der zweite
   Schatten ist Bootstraps eigener — ohne ihn verlöre die erste Zelle
   Hover- und Auswahl-Rückmeldung. */
table.table tbody tr.ampel-gesperrt > :first-child,
table.table tbody tr.ampel-vorkasse > :first-child,
table.table tbody tr.ampel-mahnung > :first-child {
  box-shadow: inset 4px 0 0 var(--ampel-balken),
              inset 0 0 0 9999px var(--bs-table-bg-state, transparent); }
/* WKV-Strich (erp.stamm.wkv, Inhaber 21.10.2026): Farbstrich am Anfang
   der Namenszelle statt eines Schilds, das dem Namen den Platz nahm.
   Bewusst NICHT an der ersten Zelle — dort sitzt der Ampelbalken — und
   in anderen Farben als die Ampel (grün/gelb/grau wie büro+). */
table.table tbody td:has(> .wkv-gueltig),
table.table tbody td:has(> .wkv-abgelaufen),
table.table tbody td:has(> .wkv-nicht_versichert) {
  box-shadow: inset 4px 0 0 var(--wkv-strich),
              inset 0 0 0 9999px var(--bs-table-bg-state, transparent); }
table.table tbody td:has(> .wkv-gueltig) { --wkv-strich: #2e9e5b; }
table.table tbody td:has(> .wkv-abgelaufen) { --wkv-strich: #e3b505; }
table.table tbody td:has(> .wkv-nicht_versichert) { --wkv-strich: #9aa5b1; }
.wkv-legende { font-size: .76rem; color: #7b8794; }
.wkv-legende i { display: inline-block; width: 4px; height: .8em;
  margin: 0 .25rem 0 .6rem; vertical-align: -.05em; }
/* Tippsuche des Beleg-Schnellstarts: dieselbe Ampel im Vorschlagsfeld. */
.ampel-vorschlag-gesperrt { background: #f6d6d4;
  box-shadow: inset 4px 0 0 var(--rot); }
.ampel-vorschlag-vorkasse { background-color: #fbe7e5;
  background-image: repeating-linear-gradient(135deg,
    transparent 0 5px, rgba(179, 38, 30, .18) 5px 10px);
  box-shadow: inset 4px 0 0 #d1584f; }
.ampel-vorschlag-mahnung  { background: #fde2c2;
  box-shadow: inset 4px 0 0 var(--orange); }

/* Positions-Assistent: Abschnitte, breites Fenster, klebende Rechnung (02.09.2026) */
.assistent-abschnitt { border-bottom: 1px solid var(--linie); }
.assistent-abschnitt-kopf { cursor: pointer; user-select: none; }
.assistent-abschnitt-kopf .badge { min-width: 1.8em; }
.modal-dialog.assistent-breit { max-width: min(1500px, 96vw); }
.assistent-rechnung { position: sticky; top: 0; }
.assistent-abschnitt .ist-vorbelegt { background: var(--aktiv-zeile); }
.assistent-abschnitt .ist-hand, #assistent-schritte .ist-hand { font-weight: 600; }

.assistent-knopf-bilder .btn { width: 7.5rem; padding: .35rem .25rem; line-height: 1.1; }
.assistent-knopf-bild { display: block; width: 100%; height: 3.2rem; object-fit: contain; margin: 0 auto .2rem; }

/* Materialliste (02.09.2026, Steildach): abgewählte Zeile blass, eigener
   Abschnitt unter den beiden Spalten in voller Breite. */
.materialliste tr.aus td { color: #8a949e; }
.materialliste td, .materialliste th { padding: .2rem .4rem; }
.assistent-materialliste-block { width: 100%; }

/* Artikelsuche: Klick-Baum (Etappe 5, 08.09.2026) — fingerdicke Kacheln */
.aw-pfad { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
  font-size: .9rem; }
.aw-pfad-trenner { color: #7b8794; }
.aw-pfad-aktiv { font-weight: 600; color: var(--dunkel); }
.aw-kacheln { display: grid; gap: .55rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.aw-kachel { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; min-height: 64px; padding: .6rem .8rem; text-align: left;
  background: #fff; border: 1px solid #dde3ea; border-left: 4px solid var(--orange);
  border-radius: 9px; box-shadow: var(--schatten); cursor: pointer;
  font-weight: 600; color: var(--dunkel); line-height: 1.2;
  transition: box-shadow 130ms ease, transform 130ms ease; }
.aw-kachel:hover, .aw-kachel:focus-visible { box-shadow: 0 4px 14px rgba(31,41,51,.16);
  transform: translateY(-1px); outline: none; }
.aw-kachel:active { transform: none; }
.aw-kachel-name { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; hyphens: auto; }
.aw-kachel-zahl { flex-shrink: 0; font-size: .78rem; font-weight: 600;
  color: var(--orange); background: var(--aktiv-zeile, #fdeee2);
  border-radius: 999px; padding: .15rem .5rem; }
.aw-kachel-ohne { border-left-color: #7b8794; }
.aw-kachel-ohne .aw-kachel-zahl { color: #52606d; background: #eef1f4; }

/* Helfer (20.09.2026): Frage-Leiste am unteren Rand — das Gegenstück zur
   Navbar oben, gleiche dunkle Schiene, gleiche Geist-Knöpfe. Aufgeklappt
   fährt rechts ein Blatt aus der Leiste hoch; Antworten stehen als Text auf
   Papier, ohne Sprechblasen. Orange nur für Fokus, Senden und Warnpunkt. */
:root { --helfer-hoehe: 46px;
  /* Blatt und Eingabegruppe sind gleich breit und rechtsbündig: gefragt
     wird genau unter der Stelle, an der die Antwort erscheint. */
  --helfer-breite: min(440px, calc(100vw - 1.5rem)); }
body:has(> .helfer) { padding-bottom: var(--helfer-hoehe); }
.helfer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  font-size: .92rem; }
/* unter Bootstrap-Modals (1055) und deren Schleier (1050) bleiben */
.helfer-leiste { display: flex; align-items: center; gap: .6rem; margin: 0;
  height: var(--helfer-hoehe); padding: 0 .75rem; background: var(--dunkel);
  border-top: 1px solid rgba(255,255,255,.08); }
.helfer-marke { color: #9aa5b1; font-size: 1.1rem; flex-shrink: 0; }
.helfer.denkt .helfer-marke { color: var(--orange);
  animation: helfer-dreh 1.6s linear infinite; }
@keyframes helfer-dreh { to { transform: rotate(360deg); } }
.helfer-rechts { display: flex; align-items: center; gap: .4rem;
  flex: 0 0 var(--helfer-breite); margin-left: auto; }
.helfer-eingabe { flex: 1 1 auto; min-width: 0; height: 32px;
  padding: 0 .7rem; color: #fff; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; }
.helfer-eingabe::placeholder { color: #9aa5b1; }
.helfer-eingabe:focus { outline: none; border-color: var(--orange);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(232,99,10,.28); }
/* Eine Zeile hoch und umbrechend: ein Vorschlag, der nicht mehr ganz passt,
   rutscht in die (abgeschnittene) zweite Zeile, statt mitten im Wort zu
   enden. Alle Vorschläge stehen ohnehin im aufgeklappten Blatt.
   Rechtsbündig: die Vorschläge lehnen sich an das Eingabefeld. */
.helfer-chips { display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .4rem; flex: 1 1 0; min-width: 0; height: 26px; overflow: hidden;
  white-space: nowrap; }
.helfer-chip { flex-shrink: 0; max-width: 22rem; overflow: hidden;
  text-overflow: ellipsis; color: #cbd2d9; background: transparent;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: .2rem .7rem; font-size: .82rem; line-height: 1.3;
  transition: color 130ms ease, border-color 130ms ease,
              background 130ms ease; }
.helfer-chip:hover, .helfer-chip:focus-visible { color: #fff; outline: none;
  border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.helfer-senden { flex-shrink: 0; width: 36px; height: 32px; color: #fff;
  background: var(--orange); border: 0; border-radius: 8px; }
.helfer-senden:hover { background: var(--orange-dunkel); }
.helfer-senden:focus-visible, .helfer-knopf:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; }

/* KW-Anzeige links im Helfer-Balken + Kalender-Blatt (Inhaber 21.10.2026).
   Das Blatt fährt links aus der Leiste hoch wie das Helfer-Blatt rechts. */
.kw-anzeige { flex-shrink: 0; display: flex; align-items: baseline; gap: .45rem;
  height: 32px; padding: 0 .7rem; color: #cbd2d9; background: transparent;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  font-size: .85rem; line-height: 30px; white-space: nowrap;
  transition: color 130ms ease, border-color 130ms ease, background 130ms ease; }
.kw-anzeige-kw { color: #fff; font-weight: 600; }
.kw-anzeige:hover, .kw-anzeige[aria-expanded="true"] { color: #fff;
  border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.kw-anzeige:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 575.98px) { .kw-anzeige-datum { display: none; } }

.kw-kalender { position: absolute; left: .75rem; bottom: var(--helfer-hoehe);
  width: min(340px, calc(100vw - 1.5rem)); padding: .6rem .7rem .55rem;
  background: #fff; color: var(--dunkel); border: 1px solid var(--linie);
  border-bottom: 0; border-top: 3px solid var(--orange);
  border-radius: 10px 10px 0 0; box-shadow: 0 -8px 30px rgba(31,41,51,.22);
  animation: helfer-hoch 160ms ease-out; }
.kw-kalender[hidden] { display: none; }
.kw-heute { display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; font-weight: 600; padding-bottom: .45rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--linie); }
.kw-heute-kw { flex-shrink: 0; color: var(--orange); }
.kw-kopf { display: flex; align-items: center; justify-content: space-between; }
.kw-monat { font-weight: 600; }
.kw-tabelle { width: 100%; border-collapse: collapse; margin-top: .25rem;
  text-align: center; font-variant-numeric: tabular-nums; }
.kw-tabelle thead th { color: #7b8794; font-size: .75rem; font-weight: 600;
  padding: .2rem 0; }
.kw-tabelle td { padding: 1px; }
.kw-spalte { width: 2.2rem; color: #7b8794; font-size: .78rem; font-weight: 600;
  border-right: 1px solid var(--linie); }
.kw-diese-woche { background: var(--hell); }
.kw-diese-woche .kw-spalte { color: var(--orange); }
.kw-tag { width: 100%; height: 30px; padding: 0; color: var(--dunkel);
  background: transparent; border: 0; border-radius: 6px; }
.kw-tag:hover { background: #eef1f4; }
.kw-tag:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.kw-wochenende { color: #7b8794; }
.kw-feiertag { color: var(--rot); font-weight: 600; }
.kw-fremd { color: #c1c9d2; }
.kw-fremd.kw-feiertag { color: #e3a3a3; }
.kw-feiertage { margin-top: .3rem; font-size: .78rem; color: var(--rot); }
.kw-ist-heute { color: var(--orange); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--orange); }
.kw-gewaehlt, .kw-gewaehlt:hover { color: #fff; background: var(--orange); }
.kw-fuss { display: flex; align-items: center; gap: .5rem; min-height: 1.9rem;
  margin-top: .35rem; padding-top: .4rem; border-top: 1px solid var(--linie); }
.kw-auswahl { flex: 1; min-width: 0; font-size: .8rem; color: #52606d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-heute-knopf { color: #52606d; background: transparent;
  border: 1px solid var(--linie); border-radius: 8px; padding: .15rem .7rem;
  font-size: .85rem; font-weight: 600; }
.kw-heute-knopf:hover { color: var(--dunkel); background: var(--hell); }

.helfer-blatt { position: absolute; right: .75rem; bottom: var(--helfer-hoehe);
  width: var(--helfer-breite); max-height: min(70vh, 640px);
  display: flex; flex-direction: column; background: #fff;
  color: var(--dunkel); border: 1px solid var(--linie); border-bottom: 0;
  border-top: 3px solid var(--orange); border-radius: 10px 10px 0 0;
  box-shadow: 0 -8px 30px rgba(31,41,51,.22);
  animation: helfer-hoch 160ms ease-out; }
.helfer-blatt[hidden] { display: none; }
@keyframes helfer-hoch { from { transform: translateY(12px); opacity: 0; } }
.helfer-kopf { display: flex; align-items: center; gap: .25rem;
  padding: .45rem .5rem .45rem .9rem; border-bottom: 1px solid var(--linie); }
.helfer-titel { flex: 1; font-weight: 600; }
.helfer-knopf { color: #52606d; background: transparent; border: 0;
  border-radius: 6px; padding: .2rem .45rem; line-height: 1; }
.helfer-knopf:hover { color: var(--dunkel); background: var(--hell); }
.helfer-verlauf { flex: 1 1 auto; min-height: 9rem; overflow-y: auto;
  padding: .8rem .9rem .4rem; overscroll-behavior: contain; }
.helfer-leer { color: #52606d; margin: 0; }
.helfer-frage { margin: .9rem 0 .35rem; padding-left: .6rem; font-weight: 600;
  border-left: 3px solid var(--dunkel); }
.helfer-leer[hidden] + .helfer-frage { margin-top: 0; }
.helfer-antwort { margin-bottom: .4rem; line-height: 1.45; }
.helfer-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.helfer-text p, .helfer-text ul { margin: 0 0 .45rem; white-space: normal; }
.helfer-text ul { padding-left: 1.15rem; }
.helfer-text a { font-weight: 600; }
.helfer-zwischen { font-weight: 600; }
.helfer-status { margin: 0 0 .3rem; color: #7b8794; font-style: italic; }
.helfer-fehler .helfer-text, .helfer-abgelehnt .helfer-text { color: var(--rot); }
.helfer-aus .helfer-text, .helfer-deckel .helfer-text { color: #52606d; }
.helfer-daumen { display: flex; align-items: center; gap: .15rem;
  min-height: 1.8rem; }
.helfer-dank { color: #7b8794; font-size: .82rem; }
.helfer-notiz { flex: 1; height: 28px; padding: 0 .5rem; font-size: .85rem;
  border: 1px solid var(--linie); border-radius: 6px; }
.helfer-notiz:focus { outline: none; border-color: var(--orange); }
/* Aktionskarte: ein Schritt, den der Helfer ausführen will oder ausgeführt
   hat. Orange Kante links wie die Klick-Kacheln — „hier passiert etwas". */
.helfer-karte { margin: .5rem 0 .6rem; padding: .55rem .7rem;
  background: var(--hell); border: 1px solid var(--linie);
  border-left: 4px solid var(--orange); border-radius: 8px; }
.helfer-karte-titel { font-weight: 600; }
.helfer-karte-zeilen { margin: .25rem 0 0; padding-left: 1.1rem;
  font-size: .88rem; overflow-wrap: anywhere; }
.helfer-karte-fuss { display: flex; align-items: center; gap: .5rem;
  margin-top: .5rem; min-height: 1.9rem; }
.helfer-karte-ja, .helfer-karte-nein { border-radius: 8px; padding: .25rem .8rem;
  font-size: .88rem; font-weight: 600; }
.helfer-karte-ja { color: #fff; background: var(--orange); border: 0; }
.helfer-karte-ja:hover { background: var(--orange-dunkel); }
.helfer-karte-nein { color: #52606d; background: transparent;
  border: 1px solid var(--linie); }
.helfer-karte-nein:hover { color: var(--dunkel); background: #fff; }
.helfer-karte-ja:disabled, .helfer-karte-nein:disabled { opacity: .55; }
.helfer-karte-ja:focus-visible, .helfer-karte-nein:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; }
.helfer-erledigt { color: var(--gruen); font-weight: 600; }
.helfer-karte-link { font-weight: 600; }
.helfer-karte-fehler { color: var(--rot); }
.helfer-hinweise { display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 .9rem; }
.helfer-hinweise:not(:empty) { padding-top: .5rem; padding-bottom: .5rem;
  border-top: 1px solid var(--linie); }
/* Chips auf dem hellen Blatt: Vorschläge (nur solange das Gespräch leer
   ist) und Hinweise */
.helfer-vorschlaege { display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 .9rem .7rem; }
.helfer-verlauf:has(.helfer-frage) + .helfer-vorschlaege { display: none; }
.helfer-hell { color: var(--dunkel); border-color: var(--linie);
  background: var(--hell); white-space: normal; text-align: left;
  max-width: 100%; }
.helfer-hell:hover, .helfer-hell:focus-visible { color: var(--dunkel);
  background: var(--aktiv-zeile); border-color: var(--orange); }
.helfer-hinweis::before { content: ""; display: inline-block; width: .5rem;
  height: .5rem; margin-right: .4rem; border-radius: 50%; background: #9aa5b1; }
.helfer-hinweis.warnung::before { background: var(--orange); }

@media (max-width: 767.98px) {
  .helfer-chips { display: none; }
  .helfer-rechts { flex: 1 1 auto; }
  .helfer-blatt { right: 0; width: 100vw; border-radius: 0;
    border-left: 0; border-right: 0; max-height: 75vh; }
}
@media (prefers-reduced-motion: reduce) {
  .helfer-blatt, .helfer.denkt .helfer-marke { animation: none; }
}
@media print { .helfer { display: none; } body:has(> .helfer) { padding-bottom: 0; } }

/* Aktionsleiste am Beleg (26.09.2026): der nächste Schritt klebt am unteren
   Bildschirmrand, statt unter Positionen, Prüfung und Verlauf zu liegen.
   Sticky am Ende des Inhalts: sie bleibt sichtbar, bis man ganz unten ist.
   Über dem Helfer-Balken (position: fixed, bottom 0) um dessen Höhe. */
.beleg-leiste { position: sticky; bottom: 0; z-index: 1030;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
  margin: 1rem -.75rem 0; padding: .5rem .75rem;
  background: #fff; border-top: 2px solid var(--orange);
  box-shadow: 0 -2px 8px rgba(31,41,51,.12); }
body:has(> .helfer) .beleg-leiste { bottom: var(--helfer-hoehe); }
.beleg-leiste-summe { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem .75rem; margin-right: auto; }
.beleg-leiste-knoepfe { display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem .5rem; }
/* Die Knopf-Formulare bringen me-2/mb-2 aus der Karte mit — in der Leiste
   regelt das Gap den Abstand. */
.beleg-leiste-knoepfe form, .beleg-leiste-knoepfe .btn { margin: 0 !important; }

/* ---------------------------------------------------------------------
   Prüfmaske C3 (Spec 2026-10-07 §3.0): PDF links fest (~38 %), rechts
   die dichte Tabelle; Markierung und Auswahl in Fillbach-Orange.
   --------------------------------------------------------------------- */
.er-c3 { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 1rem; align-items: start; }
.er-pdf { position: sticky; top: .5rem; height: calc(100vh - 10rem);
  overflow: auto; background: #525659; border: 1px solid var(--bs-border-color);
  padding: 8px; }
.er-pdf .er-pdf-ersatz { width: 100%; height: 100%; border: 0; }
.er-pdf-seite { position: relative; margin: 0 auto 8px; background: #fff; }
.er-pdf-mark { position: absolute; left: 0; right: 0; pointer-events: none;
  background: rgba(232, 99, 10, .22); outline: 2px solid var(--orange); }
/* Haken/Kreuz auf dem PDF (Inhaber 19.10.2026): Lage in % der Seite,
   Mittelpunkt = Klickpunkt. In der Maske nur lesend. */
.er-pdf-zeichen { position: absolute; transform: translate(-50%, -50%);
  font-size: 1.9rem; line-height: 1; font-weight: 700; pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.er-pdf-zeichen-haken { color: var(--gruen); }
.er-pdf-zeichen-kreuz { color: var(--rot); }
/* Zweites Fenster: schmale Leiste oben, PDF in voller Breite darunter */
body.er-fenster { margin: 0; height: 100vh; display: flex; flex-direction: column;
  background: #525659; }
.er-fenster-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .4rem .75rem; background: var(--dunkel); color: #fff;
  border-bottom: 2px solid var(--orange); }
.er-fenster-leiste .text-body-secondary { color: rgba(255,255,255,.65) !important; }
.er-fenster-zahl { display: flex; gap: .75rem; font-weight: 600; }
.er-fenster-zahl .text-success { color: #5fd38d !important; }
.er-fenster-zahl .text-danger, #er-fenster-meldung { color: #ff8a80 !important; }
.er-pdf.er-pdf-fenster { position: static; flex: 1; height: auto; border: 0; }
.er-pdf-fenster .er-pdf-zeichen { pointer-events: auto; }
.er-pdf-fenster[data-werkzeug="haken"] .er-pdf-seite,
.er-pdf-fenster[data-werkzeug="kreuz"] .er-pdf-seite { cursor: crosshair; }
/* Textebene über dem PDF (Inhaber 26.10.2026): unsichtbar, nur zum
   Markieren und Kopieren — Regeln wie pdf.js' eigenes pdf_viewer.css */
.er-pdf-seite .textLayer { position: absolute; inset: 0; overflow: clip;
  text-align: initial; line-height: 1; text-size-adjust: none;
  forced-color-adjust: none; transform-origin: 0 0; z-index: 0; }
.er-pdf-seite .textLayer :is(span, br) { color: transparent; position: absolute;
  white-space: pre; cursor: text; transform-origin: 0% 0%; }
.er-pdf-seite .textLayer span.markedContent { top: 0; height: 0; }
.er-pdf-seite .textLayer ::selection { background: rgba(0, 92, 230, .3); }
.er-pdf-seite .textLayer br::selection { background: transparent; }
.er-pdf-seite .textLayer .endOfContent { display: block; position: absolute;
  inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; }
.er-pdf-seite .textLayer.selecting .endOfContent { top: 0; }
/* Im Fenster nur mit „Auswählen“ (oder „Zeigen“) — sonst setzt Ziehen Zeichen */
.er-pdf-fenster:not([data-werkzeug="auswahl"]):not([data-werkzeug="zeigen"]) .textLayer {
  pointer-events: none; user-select: none; }
.er-pdf-fenster[data-werkzeug="radierer"] .er-pdf-zeichen { cursor: pointer;
  outline: 1px dashed currentColor; border-radius: 4px; }
/* „Bereich kopieren“ (Inhaber 27.10.2026): Rahmen ziehen statt Text markieren */
.er-pdf[data-werkzeug="kopieren"] .er-pdf-seite { cursor: crosshair; touch-action: none; }
.er-pdf[data-werkzeug="kopieren"] .textLayer { pointer-events: none; user-select: none; }
.er-pdf-rahmen { position: absolute; z-index: 3; pointer-events: none;
  border: 2px dashed var(--orange); background: rgba(232, 99, 10, .12); }
.er-kopie { position: fixed; z-index: 1080; width: 360px; max-width: calc(100vw - 16px); }
.er-kopie textarea { white-space: pre; }
/* IBAN-Zoom am Kasten „Zahlung“ (Inhaber 27.10.2026) */
.er-iban-zoom { border-top: 1px solid var(--bs-border-color); padding-top: .4rem; }
.er-iban-haken-fehlt { outline: 2px solid var(--rot); outline-offset: 2px; border-radius: 3px;
  padding: 0 .3rem; color: var(--rot); font-weight: 600; }
.er-iban-treffer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-bottom: .5rem; }
.er-iban-treffer canvas { background: #fff; border: 1px solid var(--bs-border-color); }
.er-iban-kopf { font-family: var(--bs-font-monospace); font-size: 1rem;
  white-space: pre; line-height: 1.5; }
.er-iban-anders { color: var(--rot); background: rgba(220, 53, 69, .15);
  font-weight: 700; }
.er-iban-seite { max-height: 55vh; overflow: auto; background: #525659; padding: 8px; }
.er-tabelle th { font-size: .75rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--bs-secondary-color); white-space: nowrap; }
.er-tabelle td { padding: .3rem .4rem; font-size: .875rem; }
/* Breiten (Inhaber 14.10.2026, „Ausklapplisten schneiden ab"): die
   Tabelle muss in die rechte Rasterspalte passen, sonst versteckt
   .table-responsive Art/Lager/EK/Prüfung hinter einem Rollbalken. Der
   Artikel-Knopf (ArtNr + Text) war nowrap und bis 545 px breit — er darf
   umbrechen; Rechnungstext behält ein Mindestmaß, Lager/EK brechen am
   Prozent-Badge um. */
.er-tabelle .er-text { max-width: 22rem; min-width: 10rem; }
.er-tabelle .er-artikel { min-width: 12rem; max-width: 26rem; }
.er-artikel .dropdown-toggle { max-width: 100%; white-space: normal;
  text-align: left; }
.er-wirkung .er-wert { white-space: normal; }
/* Weg je Zeile (Warenweg, 14.10.2026) steht unter dem Artikel: nur ein
   Vorschlag → gestrichelter Rahmen, bis jemand festlegt. */
.er-weg .er-weg-vorschlag { border-style: dashed; }
/* Detailzeile: die .row (g-3, Rand -8 px) ragte 1,6 px über die 6,4 px
   Zellen-Innenabstand hinaus — ein Rollbalken wegen 2 px. */
.er-details > td { padding-left: .5rem; padding-right: .5rem; }
.er-zeile { cursor: pointer; }
.er-zeile.er-aktiv > td { background: rgba(232, 99, 10, .07); }
.er-zeile.er-aktiv > td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.er-problem > td { border-top: 0; padding-top: 0; font-size: .85rem; }
.er-problem-klaeren .er-problem-text, .er-kopfproblem.er-problem-klaeren { color: #8a3b00; }
.er-ab { text-decoration: line-through; opacity: .55; }
.er-pille { font-size: .8rem; }
.er-leiste .btn-primary { background: var(--orange); border-color: var(--orange); }
/* Artikelsuche in der Prüfmaske (Inhaber 14.10.2026): der Dialog liegt
   rechts über der Tabelle, nicht über dem PDF. Die Vollbild-Ebene des
   Modals lässt Klick und Rad durch, damit das PDF links scroll- und
   anklickbar bleibt (eigener Scrollbereich .er-pdf); nur der Dialog
   fängt Eingaben. Breite = rechte Rasterspalte. */
.modal-seitlich { pointer-events: none; }
.modal-seitlich .modal-dialog { pointer-events: auto; margin: .5rem .5rem 0 auto;
  width: calc(62vw - 1.5rem); max-width: none; }
@media (max-width: 1499.98px) {
  .modal-seitlich .modal-dialog { width: calc(68vw - 1.5rem); }
}
@media (max-width: 1199.98px) {
  .modal-seitlich .modal-dialog { width: auto; margin: .5rem; }
}
/* Unter 1500 px (Laptop, Full-HD mit 125 %) bekommt die Tabelle mehr vom
   Raster; unter 1200 px liegt das PDF über der Tabelle. */
@media (max-width: 1499.98px) {
  .er-c3 { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); }
}
@media (max-width: 1199.98px) {
  .er-c3 { grid-template-columns: 1fr; }
  .er-pdf { position: static; height: 60vh; }
}
/* Artikel-Historie der gewählten Zeile (Inhaber 19.10.2026). Bei 1366 px
   ist die Tabelle randvoll (Layout-Fix 14.10.) — darum unter 1700 px eine
   Schublade über der rechten Kante, die man per Schalter oder Esc wieder
   schließt; ab 1700 px eine echte dritte Rasterspalte. */
.er-historie[hidden] { display: none !important; }
.er-historie { position: fixed; z-index: 1030;
  top: var(--er-historie-oben, .5rem); right: .5rem;
  bottom: calc(4.5rem + var(--helfer-hoehe, 0px));
  width: clamp(300px, 26vw, 400px); max-height: none;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
.er-historie .laedt { opacity: .55; transition: opacity .15s; }
.er-historie-kopf { display: flex; justify-content: space-between;
  align-items: center; margin-bottom: .4rem; }
@media (min-width: 1700px) {
  .er-c3.mit-historie { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr) 360px; }
  .er-historie { position: sticky; z-index: auto; top: .5rem; right: auto;
    bottom: auto; width: auto; max-height: calc(100vh - 10rem);
    box-shadow: var(--schatten); }
}


/* Auslastung (/admin/auslastung, 19.10.2026) — eine Farbe je Kennzahl */
.auslastung-kachel { border-left: 3px solid transparent !important; }
.auslastung-kachel.aktiv { border-left-color: var(--orange) !important; }
.auslastung-kachel:hover { background: rgba(232, 99, 10, .06); }
.auslastung-tage { display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; height: 160px;
  border-bottom: 1px solid var(--bs-border-color); }
.auslastung-tag { flex: 1 1 0; min-width: 2px; max-width: 48px; height: 100%; display: flex; align-items: flex-end; }
.auslastung-tag:hover .auslastung-saeule { background: var(--orange-dunkel); }
.auslastung-saeule { width: 100%; background: var(--orange); border-radius: 3px 3px 0 0; min-height: 0; }
.auslastung-tag.wochenende .auslastung-saeule { opacity: .55; }
.auslastung-balken th { font-weight: 500; width: 4.5rem; padding: 2px 6px 2px 0; white-space: nowrap; }
.auslastung-balken td { padding: 2px 0; }
.auslastung-balken td.text-end { width: 4.5rem; padding-left: 6px; white-space: nowrap; }
.auslastung-balken-spur { height: 12px; background: var(--bs-tertiary-bg, #f1f3f5); border-radius: 3px; }
.auslastung-balken-spur > div { height: 100%; background: var(--orange); border-radius: 3px; }
.auslastung-balken tr:hover .auslastung-balken-spur > div { background: var(--orange-dunkel); }
/* Auslastung-Kalender (Inhaber 21.10.2026): Monatsblätter, Stufe 0–4 in Orange */
.auslastung-kalender { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem 1.5rem; }
.auslastung-monat-tabelle { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.auslastung-monat-tabelle th { font-size: .7rem; font-weight: 500; color: var(--bs-secondary-color); text-align: center; }
.auslastung-monat-tabelle td { padding: 0; height: 2.3rem; }
.auslastung-kal-tag { display: flex; flex-direction: column; justify-content: space-between; height: 100%;
  padding: 1px 3px; border-radius: 4px; text-decoration: none; color: var(--bs-body-color);
  border: 1px solid transparent; line-height: 1.05; }
.auslastung-kal-tag.leer { color: var(--bs-tertiary-color); background: transparent; font-size: .7rem; }
.auslastung-kal-nr { font-size: .65rem; opacity: .75; }
.auslastung-kal-wert { font-size: .78rem; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; }
.auslastung-kal-stufe-0 { background: var(--bs-tertiary-bg, #f1f3f5); }
.auslastung-kal-stufe-1 { background: rgba(232, 99, 10, .18); }
.auslastung-kal-stufe-2 { background: rgba(232, 99, 10, .38); }
.auslastung-kal-stufe-3 { background: rgba(232, 99, 10, .62); }
.auslastung-kal-stufe-4 { background: rgba(232, 99, 10, .88); color: #fff; }
a.auslastung-kal-tag:hover { border-color: var(--orange-dunkel); }
.auslastung-kal-tag.gewaehlt { border-color: var(--dunkel); }
.auslastung-kal-tag.heute .auslastung-kal-nr { font-weight: 700; opacity: 1; }
/* Auslastung-Kuchen (Inhaber 21.10.2026): Anteile an „Vorgänge gesamt",
   Farben fest je Stück (geprüfte Kategorie-Palette), Rest neutral grau */
.auslastung-kuchen { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (max-width: 576px) { .auslastung-kuchen { grid-template-columns: minmax(0, 1fr); }
  .auslastung-kuchen-bild { max-width: 14rem; margin: 0 auto; } }
.auslastung-kuchen-bild { width: 100%; height: auto; display: block; }
.auslastung-kuchen-stueck { stroke: #fff; stroke-width: 2; stroke-linejoin: round; cursor: pointer; }
.auslastung-kuchen-bild a:hover .auslastung-kuchen-stueck { opacity: .8; }
.auslastung-kuchen-summe { font-size: 26px; font-weight: 600; fill: var(--bs-body-color); }
.auslastung-kuchen-einheit { font-size: 12px; fill: var(--bs-secondary-color); }
.auslastung-kuchen-punkt { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.auslastung-farbe-1 { fill: #2a78d6; background: #2a78d6; }
.auslastung-farbe-2 { fill: #eb6834; background: #eb6834; }
.auslastung-farbe-3 { fill: #1baf7a; background: #1baf7a; }
.auslastung-farbe-4 { fill: #eda100; background: #eda100; }
.auslastung-farbe-5 { fill: #e87ba4; background: #e87ba4; }
.auslastung-farbe-6 { fill: #008300; background: #008300; }
.auslastung-farbe-7 { fill: #6250d6; background: #6250d6; }
.auslastung-farbe-8 { fill: #9c6b3c; background: #9c6b3c; }
.auslastung-farbe-9 { fill: #8a8a86; background: #8a8a86; }
/* Auslastung-Verlauf (Inhaber 27.10.2026): Linien je Mitarbeiter zuschaltbar */
.auslastung-verlauf-reihen { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.auslastung-verlauf-chip { border: 1px solid var(--bs-border-color); background: transparent; border-radius: 999px;
  padding: .1rem .6rem; font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.auslastung-verlauf-chip.an { color: var(--bs-body-color); border-color: var(--dunkel); font-weight: 500; }
.auslastung-verlauf-chip:hover { border-color: var(--orange); }
.auslastung-verlauf-chip.gesperrt { opacity: .5; cursor: not-allowed; }
.auslastung-verlauf-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem;
  vertical-align: -1px; border: 1px solid var(--bs-border-color); background: transparent; }
.auslastung-verlauf-flaeche { position: relative; }
.auslastung-verlauf-bild { width: 100%; display: block; touch-action: pan-y; }
.auslastung-verlauf-gitter { stroke: var(--bs-border-color); stroke-width: 1; }
.auslastung-verlauf-gitter.basis { stroke: var(--bs-secondary-color); }
.auslastung-verlauf-we { fill: var(--bs-tertiary-bg, #f1f3f5); }
.auslastung-verlauf-achse { font-size: 11px; fill: var(--bs-secondary-color); }
.auslastung-verlauf-name { font-size: 12px; font-weight: 600; fill: var(--bs-body-color); }
.auslastung-verlauf-linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.auslastung-verlauf-linie.gesamt { stroke-dasharray: 5 3; }
.auslastung-verlauf-kreuz { stroke: var(--bs-secondary-color); stroke-width: 1; }
.auslastung-verlauf-marke { stroke: #fff; stroke-width: 2; }
.auslastung-verlauf-tipp { position: absolute; top: 8px; pointer-events: none; z-index: 5; min-width: 11rem;
  background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); padding: .4rem .6rem; font-size: .8rem; }
.auslastung-verlauf-tipp-zeile { display: flex; align-items: center; }
.auslastung-legende span { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; }
/* PDF-Fenster offen (Inhaber 19.10.2026): die Maske gibt die PDF-Spalte
   ab, die Tabelle bekommt die ganze Breite. */
.er-c3.pdf-ausgelagert > .er-pdf { display: none; }
.er-c3.pdf-ausgelagert { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1700px) {
  .er-c3.pdf-ausgelagert.mit-historie { grid-template-columns: minmax(0, 1fr) 360px; }
}