/* komponenten.css — wiederverwendbare Bausteine: Knöpfe, Chips, Schalter, Badges,
   Popover, Dialoge, Tag-Picker, Stammform-Raster, Stammtabellen, Vorgangsformulare.
   Zweite von drei Dateien (SPEC 14.4). */
form.filter {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  padding: 0.75rem; background: var(--karte);
  border: 1px solid var(--rand); margin-bottom: 1rem;
}
form.filter label { display: flex; flex-direction: column; font-size: 0.85em; color: var(--muted); }
form.filter input, form.filter select { padding: 0.25rem; }
form.filter .filter-aktionen {
  display: flex; align-items: center; gap: 0.75rem; margin-left: auto; align-self: flex-end;
}
form.filter .filter-aktionen button.primaer { padding: 0.3rem 1rem; font-size: 0.9em; }
form.filter .filter-zuruecksetzen { color: var(--muted); font-size: 0.85em; text-decoration: underline; }
form.filter .filter-zuruecksetzen:hover { color: var(--fg); }

/* Lieferant-Hover-Popover */
.lieferant-hover {
  border-bottom: 1px dotted var(--muted);
  cursor: help;
}
#lieferant-info {
  display: none;
  position: absolute;
  z-index: 1000;
  background: var(--karte);
  border: 1px solid var(--rand);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.6rem 0.75rem;
  min-width: 260px;
  max-width: 340px;
  font-size: 0.85em;
  color: var(--fg);
  user-select: text; /* Text markierbar */
}
.li-firma { font-weight: 600; color: var(--akzent); margin-bottom: 0.25rem; }
.li-adresse { color: var(--muted); margin-bottom: 0.4rem; }
.li-kontakt {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.5rem;
  margin: 0 0 0.4rem 0;
}
.li-kontakt dt { color: var(--muted); }
.li-kontakt dd { margin: 0; }
.li-kontakt a { color: var(--akzent); text-decoration: none; }
.li-kontakt a:hover { text-decoration: underline; }
.li-kontakte-titel {
  font-weight: 600; color: var(--muted); font-size: 0.85em;
  text-transform: uppercase; letter-spacing: 0.4pt;
  border-top: 1px solid var(--rand); padding-top: 0.4rem; margin-top: 0.2rem;
}
ul.li-kontakte { list-style: none; padding: 0; margin: 0.3rem 0 0 0; }
li.li-kontakt-eintrag { padding: 0.25rem 0; border-bottom: 1px dotted var(--rand); }
li.li-kontakt-eintrag:last-child { border-bottom: none; }
.li-kontakt-name { font-weight: 500; }
.li-funktion { color: var(--muted); font-size: 0.9em; margin-bottom: 0.2rem; }
.li-badge {
  display: inline-block; padding: 0.05rem 0.35rem; border-radius: 8px;
  background: var(--erledigt-bg); color: var(--erledigt-fg);
  font-size: 0.75em; font-weight: 500;
}

/* Mini-Button für Zeilenaktionen */
button.mini {
  padding: 0.15rem 0.5rem; font-size: 0.85em;
  background: #fff; border: 1px solid var(--akzent); color: var(--akzent);
  cursor: pointer; border-radius: 3px;
}
button.mini:hover { background: var(--akzent); color: #fff; }
button.sekundaer {
  padding: 0.4rem 1rem; font-size: 1em;
  background: #fff; border: 1px solid var(--rand); color: var(--fg); cursor: pointer;
}
button.sekundaer:hover { background: #f0f0f0; }
button.loeschen {
  padding: 0.4rem 1rem; font-size: 1em;
  background: #fff; border: 1px solid var(--ueberfaellig-fg);
  color: var(--ueberfaellig-fg); cursor: pointer; border-radius: 3px;
}
button.loeschen:hover { background: var(--ueberfaellig-fg); color: #fff; }
/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: var(--karte); border: 1px solid var(--rand);
  min-width: 380px; max-width: 500px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* nie höher als der Bildschirm: Kopf bleibt stehen, der Inhalt scrollt, die Knopfleiste klebt unten (SPEC 14.4) */
  max-height: calc(100vh - 2rem); display: flex; flex-direction: column;
}
.modal > form, .modal > .modal-inhalt { overflow-y: auto; min-height: 0; }
.modal form .modal-aktionen { position: sticky; bottom: -1rem; margin: 0.25rem -1rem -1rem; padding: 0.6rem 1rem 1rem; background: var(--karte); border-top: 1px solid var(--rand); }
.modal header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem; background: var(--akzent); color: #fff;
}
.modal header h2 { margin: 0; font-size: 1.05em; }
.modal-schliessen {
  background: none; border: none; color: #fff;
  font-size: 1.4em; cursor: pointer; padding: 0 0.3rem; line-height: 1;
}
.modal form { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.modal-kontext { margin: 0; padding: 0.5rem; background: #f5f5f5; border-radius: 3px; }
.modal label:not(.chip):not(.schalter) { display: flex; flex-direction: column; font-size: 0.9em; color: var(--muted); gap: 0.2rem; }
.modal label input { padding: 0.4rem; font-size: 1em; }
.modal label .hinweis { font-size: 0.8em; margin-top: 0.1rem; }
.modal-aktionen { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }

/* Terminhistorie-Tabelle */
table.terminhistorie { margin-top: 0.5rem; }
table.terminhistorie th { background: #f5f5f5; }

/* Tag-Picker (Bezugspersonen etc.) */
.tag-picker {
  border: 1px solid var(--rand); background: #fff; border-radius: 4px;
  padding: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  min-height: 2.2rem;
}
.tag-picker .tp-chips { display: contents; }
.tag-picker .tp-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #e0eaf5; color: var(--akzent); border-radius: 12px;
  padding: 0.15rem 0.55rem; font-size: 0.85em;
}
.tag-picker .tp-chip button {
  background: none; border: none; color: var(--akzent);
  cursor: pointer; font-size: 1.1em; line-height: 1; padding: 0;
}
.tag-picker .tp-chip button:hover { color: var(--ueberfaellig-fg); }
.tag-picker .tp-input-wrap { position: relative; flex: 1; min-width: 12rem; }
.tag-picker .tp-input {
  border: none; outline: none; width: 100%; padding: 0.2rem;
  font-size: 0.95em; background: transparent;
}
.tag-picker .tp-options {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: 0.25rem 0 0 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--rand); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  max-height: 12rem; overflow: auto;
}
.tag-picker .tp-options li {
  padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.9em;
}
.tag-picker .tp-options li:hover,
.tag-picker .tp-options li.tp-aktiv { background: var(--akzent); color: #fff; }
.tag-picker .tp-options li.tp-leer { color: var(--muted); cursor: default; }
/* Avatar in Chip und Vorschlagsliste (ERP-Ausweisbild, sonst Initialen) */
.tag-picker .tp-options li { display: flex; align-items: center; gap: 0.5rem; }
.tag-picker .tp-avatar {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  background: #dfe4ea; color: #4a5563;
  font-size: 0.6rem; font-weight: 600; line-height: 1.5rem; text-align: center;
}
.tag-picker .tp-chip { padding-left: 0.2rem; }
.tag-picker .tp-chip .tp-avatar { width: 1.3rem; height: 1.3rem; line-height: 1.3rem; font-size: 0.55rem; }
.tag-picker .tp-options li.tp-aktiv .tp-avatar-leer,
.tag-picker .tp-options li:hover .tp-avatar-leer { background: #fff; }

/* Legende unter der Bestellübersicht */
.legende {
  margin-top: 1rem; padding: 0.75rem 1rem;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 4px;
  font-size: 0.82em; color: var(--muted);
  line-height: 1.9;
}
.legende > div + div { margin-top: 0.35rem; }
.legende strong { color: var(--fg); margin-right: 0.4rem; }
.legende .badge { margin: 0 0.15rem 0 0.35rem; }

/* Person mit Avatar (Makro person), z. B. Bezugspersonen in der Bestellung */
dd.personen { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.person { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.person-avatar {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  background: #dfe4ea; color: #4a5563; box-shadow: 0 0 0 1.5px var(--rand);
  font-size: 0.6rem; font-weight: 600; line-height: 1.6rem; text-align: center;
}

/* Blättern in Detailansichten: Pfeile rechts neben der Nummer (Makro blaettern) */
h1.mit-blaettern { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* Werkzeugzeile unter dem Titel (Unternehmen): Pfeile und Knöpfe an fester Stelle,
   unabhängig von der Länge des Namens darüber */
.detail-werkzeuge { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: -0.4rem 0 1rem; }
.detail-werkzeuge .blaettern { margin-left: 0; }
.detail-werkzeuge form.inline { margin: 0; }
.blaettern { display: inline-flex; gap: 0.25rem; margin-left: 0.2rem; }
.blaettern a, .blaettern .aus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 4px;
  border: 1px solid var(--rand); background: var(--karte);
  color: var(--akzent); text-decoration: none; line-height: 1;
  font-size: 1.15rem; font-weight: 400; padding-bottom: 0.1rem;
}
.blaettern a:hover { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.blaettern .aus { color: var(--rand); cursor: default; }
.modal header h2 small { font-weight: 400; opacity: 0.85; margin-left: 0.4rem; }
.modal header .blaettern { margin: 0 0.6rem 0 auto; }
.modal header .blaettern .aus { background: transparent; color: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.35); }

.hinweis-box {
  background: #eef3fa; border: 1px solid #c9d7ea; border-radius: 4px;
  padding: 0.6rem 0.9rem; margin: 0.5rem 0 1rem; font-size: 0.92em; color: #1f3a5f;
}

/* Pflicht-Tag-Picker ohne Auswahl / Formularfehler */
.tag-picker.tp-ungueltig { border-color: var(--ueberfaellig-fg); box-shadow: 0 0 0 2px var(--ueberfaellig-bg); }
.feld-fehler { margin: 0.3rem 0 0; color: var(--ueberfaellig-fg); font-size: 0.9em; }
.fehler-eingabe ul { margin: 0.5rem 0 1rem 1.2rem; }

/* Entwurfs-Hinweis in der Überschrift: zwei Grade kleiner, nicht fett */
h1 .entwurf-hinweis { font-size: 0.6em; font-weight: 400; color: var(--muted); }

/* ==========================================================================
   Einheitliches Button-System (26.08.2026, Feedback: nebeneinanderstehende
   Buttons hatten verschiedene Größen/Schriften). Gilt für Buttons UND
   Button-Links. Farben bleiben semantisch: primaer/btn-inline = blau gefüllt,
   sekundaer = neutral, loeschen = rot, mini = kleine Variante in Tabellen,
   Überschriften und Zwischenaktionen. Kommt absichtlich ganz ans Ende der
   Datei, damit es die älteren Einzelregeln überschreibt.
   ========================================================================== */
a.btn-inline, a.sekundaer, a.primaer,
button.primaer, button.sekundaer, button.loeschen, button.mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  box-sizing: border-box;
  font-family: inherit; font-size: 0.9rem; font-weight: 500; line-height: 1.2;
  min-height: 2.1rem; padding: 0.4rem 0.9rem; margin: 0;
  border: 1px solid transparent; border-radius: 3px;
  text-decoration: none; cursor: pointer; vertical-align: middle; white-space: nowrap;
}
a.btn-inline, a.primaer, button.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
a.btn-inline:hover, a.primaer:hover, button.primaer:hover { background: #163765; border-color: #163765; color: #fff; }
a.sekundaer, button.sekundaer { background: #fff; border-color: var(--rand); color: var(--fg); }
a.sekundaer:hover, button.sekundaer:hover { background: #f0f0f0; color: var(--fg); }
button.loeschen { background: #fff; border-color: var(--ueberfaellig-fg); color: var(--ueberfaellig-fg); }
button.loeschen:hover { background: var(--ueberfaellig-fg); color: #fff; }
button.mini { background: #fff; border-color: var(--akzent); color: var(--akzent); }
button.mini:hover { background: var(--akzent); color: #fff; }
button.mini.primaer { background: var(--akzent); color: #fff; }
button.mini.loeschen, button.mini.loeschen-rand { border-color: var(--ueberfaellig-fg); color: var(--ueberfaellig-fg); background: #fff; }
button.mini.loeschen:hover, button.mini.loeschen-rand:hover { background: var(--ueberfaellig-fg); color: #fff; }

/* Kleine Variante: alles, was in Tabellenzellen, Überschriften oder der
   Zwischenaktions-Leiste steht — dort einheitlich klein, egal welche Klasse. */
button.mini,
table td a.btn-inline, table td button.primaer, table td button.sekundaer, table td button.loeschen,
h1 a.btn-inline, h1 button, h2 a.btn-inline, h2 button {
  font-size: 0.8rem; font-weight: 500; min-height: 1.7rem; padding: 0.2rem 0.6rem; gap: 0.25rem;
}

/* Leisten mit mehreren Aktionen: gleicher Abstand, gleiche Grundlinie */
.aktionen, .modal-aktionen,
h1.mit-blaettern, .pos-aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.aktionen .hinweis { flex-basis: 100%; margin-top: 0.1rem; }
.aktionen a.btn-inline,
h1 a.btn-inline, .pos-aktionen .mini { margin: 0; }
form.inline { display: inline-flex; margin: 0; }
h1.mit-blaettern .blaettern { margin-left: 0; }

/* Unternehmensrollen (SPEC 3.7) */
.badge.rolle { margin-right: 0.25rem; }
.badge.rolle-lieferant { background: #e0eaf5; color: #1f4a8a; }
.badge.rolle-kunde { background: var(--erledigt-bg); color: var(--erledigt-fg); }
.badge.rolle-spediteur { background: #fff3cd; color: #7a5a00; }
form.bestellform small.hinweis.voll { grid-column: 1 / -1; }

.dubletten a { font-weight: 600; }

/* ---- PDF-Links (26.08.2026): Icon statt „PDF öffnen“, Vorschau als Button Icon + Text ---- */
.pdf-icon { width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }
a.pdf-link, button.pdf-link { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; padding: 0.15rem; border-radius: 5px; }
a.pdf-link:hover, button.pdf-link:hover { background: #ececec; }
button.pdf-link { border: 0; background: none; cursor: pointer; }
button.pdf-link:disabled { opacity: 0.5; cursor: default; }
table td a.pdf-link { padding: 0.1rem; }
a.pdf-vorschau { display: inline-flex; align-items: center; gap: 0.4rem; }
a.pdf-vorschau .pdf-icon { width: 1.15rem; height: 1.15rem; }

/* ---------- Stammdaten-Masken (stammform: Unternehmen, Einheiten) ----------
   Abschnitte als Überschriftenzeile mit Haarlinie statt Kästen;
   12er-Raster für proportionale Feldbreiten (PLZ schmal, Ort breit). */
form.stammform, .stamm-ansicht { max-width: 62rem; }
.stamm-ansicht.breit { max-width: none; }   /* Lantek Aufträge (SPEC 19): breite Tabellen füllen die Seite */
table.uebersicht.stamm-tabelle { width: 100%; }

form.stammform fieldset {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.6rem 0.9rem;
  border: 0; border-top: 1px solid var(--rand); background: transparent;
  padding: 0.9rem 0 0.4rem; margin: 0 0 1.1rem;
}
form.stammform fieldset:first-of-type { border-top: 0; padding-top: 0; }
form.stammform legend {
  grid-column: 1 / -1; padding: 0; margin-bottom: 0.2rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent);
  float: left; width: 100%;   /* legend ohne Rahmen im Grid-Fluss halten */
}
form.stammform legend small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 0.5rem; }
form.stammform label:not(.chip):not(.schalter) { display: block; font-size: 0.8rem; color: var(--muted); min-width: 0; }
form.stammform label small { font-weight: 400; color: #999; font-size: 0.72rem; }
form.stammform label small::before { content: "— "; }
form.stammform input, form.stammform select, form.stammform textarea {
  display: block; margin-top: 0.25rem; padding: 0.38rem 0.5rem; font-size: 0.95rem; font-family: inherit; color: var(--fg);
  border: 1px solid var(--rand); border-radius: 3px; background: #fff; width: 100%;
}
form.stammform input:focus, form.stammform select:focus, form.stammform textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent);
}
form.stammform input.kennung { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.03em; }
form.stammform textarea { resize: vertical; }
form.stammform .sp-3 { grid-column: span 3; }
form.stammform .sp-4 { grid-column: span 4; }
form.stammform .sp-5 { grid-column: span 5; }
form.stammform .sp-6 { grid-column: span 6; }
form.stammform .sp-7 { grid-column: span 7; }
form.stammform .sp-8 { grid-column: span 8; }
form.stammform .sp-9 { grid-column: span 9; }
form.stammform .sp-12 { grid-column: 1 / -1; }
@media (max-width: 700px) { form.stammform [class^="sp-"] { grid-column: 1 / -1; } }
form.stammform small.hinweis { color: var(--muted); font-size: 0.8rem; }

/* Rollen als Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1px solid var(--rand); border-radius: 999px; background: #fff; color: var(--fg); font-size: 0.9rem;
}
.chip > span::before {
  content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1.5px solid #bbb; background: #fff; flex: none;
}
.chip input:checked + span { border-color: var(--akzent); background: #e8eef7; color: var(--akzent); font-weight: 600; }
.chip input:checked + span::before {
  border-color: var(--akzent); background: var(--akzent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
.chip input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Italien-Felder: Landmarke, abgeblendet bei anderem Land */
.landmarke {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 2px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; color: #fff; background: #4b8a3a; vertical-align: 1px;
}
.landmarke.de { background: #555; }
form.stammform:not([data-land="IT"]) .nur-it { opacity: 0.45; }
form.stammform[data-land="IT"] .nur-it-hinweis { display: none; }
form.stammform[data-spediteur="1"] label.nicht-fuer-spediteur { display: none; }
form.stammform:not([data-spediteur="1"]) .nur-fuer-spediteur { display: none; }

/* Fußzeile: Schalter links, Aktionen rechts */
form.stammform .aktionen { border-top: 1px solid var(--rand); padding-top: 0.9rem; justify-content: space-between; }
form.stammform .aktionen-rechts, .aktionen .aktionen-rechts { display: flex; gap: 0.5rem; margin-left: auto; }
.modal-aktionen .schalter { margin-right: auto; }   /* Schalter links, Knöpfe rechts — wie in den Stammdaten-Formularen */
.schalter { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; color: var(--fg); font-size: 0.9rem; position: relative; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.schalter-knopf {
  width: 2.3rem; height: 1.3rem; border-radius: 999px; background: #c9c9c9; position: relative; flex: none; transition: background .15s;
}
.schalter-knopf::after {
  content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s;
}
.schalter input:checked + .schalter-knopf { background: var(--erledigt-fg); }
.schalter input:checked + .schalter-knopf::after { left: 1.15rem; }
.schalter input:focus-visible + .schalter-knopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.schalter-zeile { font-size: 0.85rem; }                                  /* Schalter in Tabellenzeilen (Wertelisten) */
.schalter-zeile .schalter-text { color: var(--muted); }
.schalter input:disabled + .schalter-knopf { opacity: 0.45; cursor: default; }
.schalter-text small { display: block; color: var(--muted); font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .schalter-knopf, .schalter-knopf::after { transition: none; } }

/* ---------- Stammdaten-Ansichten (.stamm-ansicht: Unternehmen-Detail, Lieferschein-Detail) ---------- */
.stamm-ansicht .abschnitt { border-top: 1px solid var(--rand); padding: 0.9rem 0 0.6rem; margin: 0 0 0.8rem; }
.stamm-ansicht .abschnitt:first-child { border-top: 0; padding-top: 0; }
.stamm-ansicht h2.eyebrow {
  margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent);
}
.stamm-ansicht h2.eyebrow small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 0.5rem; font-size: 0.78rem; }
.stamm-ansicht dl.stamm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 1.2rem; margin: 0; }
.stamm-ansicht dl.stamm > div { min-width: 0; }
.stamm-ansicht dl.stamm > div.breit { grid-column: span 2; }
.stamm-ansicht dl.stamm > div.voll { grid-column: 1 / -1; }
.stamm-ansicht dl.stamm dt { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.15rem; }
.stamm-ansicht dl.stamm dt small { font-weight: 400; color: #999; font-size: 0.72rem; }
.stamm-ansicht dl.stamm dt small::before { content: "— "; }
.stamm-ansicht dl.stamm dd { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.stamm-ansicht dl.stamm dd.kennung { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.03em; }
.stamm-ansicht dl.stamm dd.notiz-text { white-space: pre-line; }
.stamm-ansicht .leer { color: #aaa; }
/* Interne Notiz an Ort und Stelle ändern (Bestellung, Anfrage, Lieferschein) */
.stamm-ansicht .notiz-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 0.3rem; }
.stamm-ansicht .notiz-form .aktionen { margin-top: 0.35rem; display: flex; gap: 0.4rem; }
.stamm-ansicht dd .notiz-aendern { margin-left: 0.5rem; vertical-align: baseline; }
@media (max-width: 700px) { .stamm-ansicht dl.stamm { grid-template-columns: 1fr; } .stamm-ansicht dl.stamm > div.breit { grid-column: auto; } }

/* Kacheln für Adressen und Kontaktpersonen */
.stamm-ansicht .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; }
.stamm-ansicht .kachel {
  position: relative; background: var(--karte); border: 1px solid var(--rand); border-radius: 4px; padding: 0.7rem 0.85rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
}
.stamm-ansicht .kachel.kontakt { border-left: 3px solid var(--akzent); }
.stamm-ansicht .kachel.inaktiv { opacity: 0.55; }
.stamm-ansicht .kachel-titel { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.stamm-ansicht .kachel-unter { color: var(--muted); font-size: 0.85rem; margin-top: -0.2rem; }
.stamm-ansicht .kachel-text { font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.stamm-ansicht .kachel-aktion { display: flex; gap: 0.4rem; margin-top: 0.35rem; padding-top: 0.4rem; border-top: 1px dashed var(--rand); }
.stamm-ansicht .kachel-aktion form { margin: 0; }
.stamm-ansicht .leer-zeile { margin: 0; grid-column: 1 / -1; }
.stamm-ansicht details.anlegen { margin-top: 0.7rem; }
.stamm-ansicht details.anlegen summary { cursor: pointer; color: var(--akzent); font-size: 0.9rem; user-select: none; }
.stamm-ansicht details.anlegen summary::marker { color: var(--akzent); }
.stamm-ansicht details.anlegen form { margin-top: 0.6rem; }

/* ---------- Stammdaten-Listen (Unternehmen, Einheiten) ---------- */
form.stamm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.8rem 0 0.6rem; }
form.stamm-filter input[type="search"] {
  flex: 1 1 16rem; min-width: 12rem; padding: 0.42rem 0.6rem; font-size: 0.95rem; font-family: inherit;
  border: 1px solid var(--rand); border-radius: 3px; background: #fff;
}
form.stamm-filter input[type="search"]:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
form.stamm-filter .chips { gap: 0.4rem; }
form.stamm-filter .chip span { padding: 0.3rem 0.75rem 0.3rem 0.6rem; font-size: 0.85rem; }
form.stamm-filter a.filter-zuruecksetzen { font-size: 0.85rem; color: var(--muted); }
.zaehlzeile { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); margin: 0.9rem 0 0.4rem; }
.zaehlzeile small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 0.8rem; margin-left: 0.5rem; }
/* Ansichtswahl (SPEC 14.4): zwei Knöpfe „Tabelle | Liste“ rechts in der Zählzeile, die aktive gefüllt */
.zaehlzeile-mit-wahl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Listen-Baukasten (SPEC 14.5): Zeilen je Seite und Blättern, für alle Übersichten */
.seitenleiste-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; margin: 0.4rem 0 0.6rem; }
.zeilen-wahl label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.zeilen-wahl select { font: inherit; padding: 0.15rem 0.4rem; }
.seiten { display: inline-flex; align-items: center; gap: 0.6rem; }
.seiten a.sekundaer.aus { opacity: 0.35; pointer-events: none; }
.seiten-unten { margin-top: 0.6rem; }
.ansicht-wahl { display: inline-flex; border: 1px solid var(--rand); border-radius: 4px; overflow: hidden; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; }
.ansicht-wahl a { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; color: var(--fg); text-decoration: none; }
.ansicht-wahl a:hover { background: #f3f6fa; }
.ansicht-wahl svg { display: block; }
.ansicht-wahl a + a { border-left: 1px solid var(--rand); }
.ansicht-wahl a.aktiv { background: var(--akzent); color: #fff; }
.ansicht-wahl.ansicht-text a { padding: 0.3rem 0.8rem; }   /* Umschalter mit Text statt Icons (Lantek Aufträge: Nach Kunden · Nach Aufträgen) */
.ansicht-zeile { margin: -0.4rem 0 0.8rem; }
.badge.baugruppe { background: #fff3d6; color: #8a5a00; border: 1px solid #e8c98a; font-weight: 700; letter-spacing: 0.03em; }   /* Auftrag enthält eine Baugruppe (SPEC 19.1) */
table.stamm-tabelle th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
table.stamm-tabelle td { vertical-align: middle; }
table.stamm-tabelle td.primaer a { font-weight: 600; text-decoration: none; }
table.stamm-tabelle td.primaer a:hover { text-decoration: underline; }
table.stamm-tabelle td.primaer small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; }
table.stamm-tabelle td.kennung, table.stamm-tabelle td.zahl { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.03em; }
table.stamm-tabelle td.zahl { color: var(--muted); text-align: right; width: 4rem; }
table.stamm-tabelle th.zahl { text-align: right; }
table.stamm-tabelle td.leer-wert { color: #aaa; }
table.stamm-tabelle tr.inaktiv td.primaer a { color: var(--muted); }
table.stamm-tabelle td.rollen .badge { margin-right: 0.25rem; }
table.stamm-tabelle td.status .badge { white-space: nowrap; }

/* ---------- Vorgangsformulare im Stammform-Stil (SPEC 14.4) ----------
   Bestellung, Anfrage, Lieferschein, Angebot, ungeplanter Wareneingang tragen
   form.stammform.bestellform: Versal-Abschnitte, 12er-Raster, Hinweise als „— …“,
   Positionszeilen unter einem Stammtabellen-Kopf. Die alten bestellform-Regeln
   bleiben für Kompatibilität, werden hier aber übersteuert. */
form.stammform.bestellform { max-width: none; }
form.stammform.bestellform fieldset > table, form.stammform.bestellform fieldset > button,
form.stammform.bestellform fieldset > p { grid-column: 1 / -1; }
form.stammform label[hidden] { display: none !important; }
form.stammform fieldset > p.hinweis { margin: -0.2rem 0 0; font-size: 0.8rem; }
form.stammform .tag-picker { margin-top: 0.25rem; }
form.stammform .tag-picker input { display: inline-block; width: 100%; margin: 0; border: 0; padding: 0.2rem; }
form.stammform .tag-picker input:focus { outline: none; }
form.stammform #kontaktperson-container, form.stammform #adresse-container { display: block; }
form.stammform table.positionen { margin: 0.2rem 0 0; background: transparent; }
form.stammform table.positionen th { padding: 0.3rem 0.35rem; background: transparent; white-space: nowrap; }
form.stammform table.positionen td { padding: 0.25rem 0.35rem; vertical-align: top; border-bottom: 0; }
form.stammform table.positionen tbody tr:nth-child(even) td { background: #fafafa; }
form.stammform table.positionen input, form.stammform table.positionen select, form.stammform table.positionen textarea {
  margin-top: 0; padding: 0.3rem 0.4rem; font-size: 0.9rem;
}
form.stammform table.positionen textarea { min-height: 2.1rem; }
form.stammform table.positionen td.zeile-loeschen { vertical-align: middle; }
form.stammform table.positionen td.zeile-loeschen button { margin-top: 0; }
form.stammform table.positionen td.bezeichnung { font-weight: 500; padding-top: 0.5rem; }
form.stammform table.positionen td.einheit { color: var(--muted); padding-top: 0.5rem; }
form.stammform table.positionen td.zahl { padding-top: 0.5rem; width: auto; }
form.stammform table.positionen td.eingabe-schmal { width: 7rem; }
form.stammform table.positionen th.zahl:first-child, form.stammform table.positionen td.zahl:first-child { width: 2.2rem; }
form.stammform fieldset > button.zeile-plus {
  margin-top: 0.4rem; font-size: 0.85rem; padding: 0.3rem 0.8rem;
  background: #fff; border: 1px dashed var(--rand); color: var(--akzent); border-radius: 3px; cursor: pointer;
}
form.stammform fieldset > button.zeile-plus:hover { border-style: solid; border-color: var(--akzent); }
form.stammform .aktionen .hinweis { flex: 1 1 auto; flex-basis: auto; margin: 0; }
h1 small.h1-zusatz { display: block; font-size: 0.5em; font-weight: 400; color: var(--muted); margin-top: 0.2rem; }
h1.mit-blaettern small.h1-zusatz { display: inline; margin-top: 0; }

/* ---------- Dialoge im Stammform-Stil (SPEC 14.4 „Modal“, 28.08.2026) ----------
   Weißer Kopf mit Titel + grauem Kontext, 4-px-Oberkante in Akzentblau
   (rot bei Stornieren, orange/rot beim Wareneingang), Felder im 12er-Raster,
   Fußleiste mit Haarlinie. Alle sechs Dialoge tragen form.stammform.modal-form. */
.modal { border-top: 4px solid var(--akzent); border-radius: 4px; width: min(32rem, 94vw); min-width: 0; max-width: none; }
.modal.modal-we { width: min(36rem, 94vw); }
.modal.modal-kontakt { width: min(60rem, 94vw); }
.modal.modal-gefahr { border-top-color: var(--ueberfaellig-fg); }
.modal.we-menge_abweichend { border-top-color: #b06000; }
.modal.we-beanstandung { border-top-color: var(--ueberfaellig-fg); }
.modal header, .modal header.we-modal-header { background: transparent; color: var(--fg); padding: 0.8rem 1.1rem 0.4rem; }
.modal header h2 { font-size: 1.05rem; font-weight: 600; }
.modal header h2 small { display: block; font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 0; opacity: 1; }
.modal.modal-gefahr header h2, .modal.we-beanstandung header h2 { color: var(--ueberfaellig-fg); }
.modal.we-menge_abweichend header h2 { color: #b06000; }
.modal-schliessen { color: var(--muted); align-self: flex-start; }
.modal-schliessen:hover { color: var(--fg); }
.modal header .blaettern .aus { background: transparent; color: #bbb; border-color: var(--rand); }
.modal form.stammform { padding: 0.4rem 1.1rem 1rem; gap: 0.7rem; }
.modal form.stammform fieldset { border-top: 0; padding: 0.2rem 0 0; margin: 0; }
.modal form.stammform .sp-4, .modal form.stammform .sp-5, .modal form.stammform .sp-6, .modal form.stammform .sp-7 { min-width: 0; }
.modal form.stammform input, .modal form.stammform select, .modal form.stammform textarea { padding: 0.38rem 0.5rem; font-size: 0.95rem; }
.modal form.stammform .we-feld input, .modal form.stammform .we-feld textarea { padding: 0.5rem; font-size: 1.05rem; }
.modal-kontext {
  margin: 0; padding: 0.55rem 0.8rem; background: #f5f6f8; border-left: 3px solid var(--rand); border-radius: 0 3px 3px 0;
  font-size: 0.9rem; line-height: 1.45;
}
.modal-kontext small { color: var(--muted); }
.modal-hinweis { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.modal form.stammform .modal-aktionen { border-top: 1px solid var(--rand); padding-top: 0.8rem; margin-top: 0.2rem; }
.modal form.stammform small.hinweis { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.modal form.stammform .chips { margin-top: 0.3rem; }
button.we-submit { padding: 0.55rem 1.4rem; font-size: 1rem; }

/* Firmenfilter nach Warengruppe (Dialog in Bestellung und Anfrage) */
.modal-firmenfilter { max-width: 720px; width: 720px; }
.ff-inhalt { display: grid; grid-template-columns: 15rem 1fr; min-height: 18rem; max-height: 60vh; }
.ff-baum { border-right: 1px solid var(--rand); padding: 0.6rem 0.5rem; overflow-y: auto; }
.ff-baum details { margin-bottom: 0.2rem; }
.ff-baum summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }
.ff-baum summary::before { content: "›"; color: var(--muted); transition: transform 0.15s; width: 0.8rem; }
.ff-baum details[open] > summary::before { transform: rotate(90deg); }
.ff-gruppe { background: none; border: none; text-align: left; padding: 0.25rem 0.45rem; border-radius: 3px; cursor: pointer; font: inherit; color: var(--fg); width: 100%; }
.ff-gruppe.ff-unter { display: block; margin-left: 1.1rem; width: calc(100% - 1.1rem); font-size: 0.92em; }
.ff-gruppe:hover { background: #eef2f8; }
.ff-gruppe.ff-aktiv { background: var(--akzent); color: #fff; }
.ff-firmen { padding: 0.6rem 0.9rem; overflow-y: auto; }
.ff-titel { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent); margin-bottom: 0.4rem; }
.ff-titel small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 0.5rem; }
.ff-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ff-liste li { display: flex; align-items: center; gap: 0.5rem; }
.ff-firma.ff-gewaehlt { background: var(--erledigt-bg); color: var(--erledigt-fg); border-color: var(--erledigt-bg); }
.firmenfilter-knopf { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-end; padding-bottom: 0.15rem; }
.mit-knopf { display: flex; gap: 0.4rem; align-items: center; }
.mit-knopf select { flex: 1; }
.mit-knopf button, .mit-knopf .knopf-link { white-space: nowrap; }
.knopf-symbol { vertical-align: -0.15em; margin-right: 0.3rem; }   /* Symbol vor Knopftext, z. B. Trichter vor „Nach Warengruppe“ */
.mit-knopf .knopf-link[hidden] { display: none; }
.wg-einzug { color: var(--muted); margin-right: 0.35rem; }
tr.wg-unter td.primaer { padding-left: 1.4rem; }

/* Sortiment am Unternehmen */
.chip-gruen input:checked + span { background: var(--erledigt-bg); color: var(--erledigt-fg); border-color: var(--erledigt-fg); }
.loesch-folgen { margin: 0; padding-left: 1.2rem; font-size: 0.92em; line-height: 1.45; }
.loesch-folgen li { margin: 0.25rem 0; }
/* Sortiment: Untergruppen je Obergruppe ein-/ausklappbar */

/* ---- Schmale Bildschirme (SPEC 14.8) ---- */
/* Scrollcontainer um Tabellen (base.html legt ihn an): scrollt nur, wenn die
   Tabelle breiter ist als der Platz — auf dem Desktop unsichtbar. */
.tabelle-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; grid-column: 1 / -1; min-width: 0; }
@media (max-width: 930px) {
  .tabelle-scroll { margin: 0 -0.7rem; padding: 0 0.7rem; }   /* bis an den Rand, wie eine Karte */
  .tabelle-scroll > table { min-width: 100%; }
  table.uebersicht:not(.we-liste) th, table.uebersicht:not(.we-liste) td,
  table.positionen th { white-space: nowrap; }
  /* Modale: volle Breite, begrenzte Höhe, Kopf bleibt beim Scrollen sichtbar */
  .modal-overlay { align-items: flex-start; padding: 0.4rem; }
  .modal { width: 100%; min-width: 0; max-width: none; max-height: calc(100vh - 0.8rem); overflow-y: auto; }
  .modal header { position: sticky; top: 0; z-index: 2; }
  .modal-firmenfilter { width: 100%; }
  .ff-inhalt { grid-template-columns: 10rem 1fr; min-height: 0; max-height: none; }
  /* Filterzeilen und Aktionsleisten dürfen umbrechen */
  form.filter, .stamm-filter, .aktionen, .detail-werkzeuge { flex-wrap: wrap; }
  .chips { flex-wrap: wrap; }
}
/* Landesflagge (SPEC 14.4): kleines SVG in der Zeile, leicht gerahmt */
.flagge { display: inline-block; width: 1.25rem; height: 0.85rem; vertical-align: -0.1rem; margin-left: 0.3rem; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; }
.flagge-quadrat { width: 0.85rem; }

/* Lichtbox (SPEC 14.4): Vollbild über allem, Pfeile an den Rändern, Zähler unten */
.lichtbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; user-select: none; touch-action: pan-y; }
.lichtbox[hidden] { display: none; }
.lichtbox figure { margin: 0; max-width: 100vw; max-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.lichtbox img { max-width: 100vw; max-height: calc(100vh - 2.6rem); object-fit: contain; display: block; }
.lichtbox figcaption { color: #ddd; font-size: 0.85em; padding: 0.4rem 0.8rem; text-align: center; }
.lichtbox .lb-zaehler { font-variant-numeric: tabular-nums; margin-right: 0.6rem; color: #fff; }
.lichtbox .lb-karte { color: #fff; margin-left: 0.6rem; text-decoration: none; border: 1px solid #aaa; border-radius: 4px; padding: 0.05rem 0.45rem; white-space: nowrap; }
.lichtbox .lb-karte:hover { background: rgba(255, 255, 255, 0.15); }
.lichtbox .lb-karte[hidden] { display: none; }
.lichtbox button { position: absolute; background: rgba(0, 0, 0, 0.35); color: #fff; border: none; cursor: pointer; font-size: 2.2rem; line-height: 1; padding: 0.4rem 0.9rem; border-radius: 4px; }
.lichtbox button:hover { background: rgba(0, 0, 0, 0.6); }
.lichtbox .lb-zu { top: 0.6rem; right: 0.8rem; font-size: 1.8rem; }
.lichtbox .lb-pfeil { top: 50%; transform: translateY(-50%); }
.lichtbox .lb-zurueck { left: 0.6rem; }
.lichtbox .lb-vor { right: 0.6rem; }
body.lichtbox-offen { overflow: hidden; }
@media (max-width: 930px) { .lichtbox .lb-pfeil { display: none; }   /* am Telefon wischen oder Bildhälfte tippen */ }
td.nowrap, .nowrap { white-space: nowrap; }

/* Admin › Benutzer › Menüfreigaben (SPEC 2.3): Matrix Menüpunkt × Zustand, Radios mittig */
.menue-freigaben th, .menue-freigaben td { text-align: center; }
.menue-freigaben th:first-child, .menue-freigaben td:first-child { text-align: left; }
.menue-freigaben .radio-zelle { display: block; cursor: pointer; }
/* Feste Spaltenbreiten, damit Module und Stammdaten (zwei Tabellen) exakt untereinander stehen — Benutzer und Rollen */
table.menue-freigaben { table-layout: fixed; width: 100%; }
table.menue-freigaben th:not(:first-child) { width: 8rem; }
@media (max-width: 700px) { table.menue-freigaben th:not(:first-child) { width: 5.5rem; } }
/* Rollen für Menüfreigaben (SPEC 2.3): Rollenwahl über der Tabelle; gilt eine Rolle, ist die Tabelle blass und gesperrt */
.menue-rolle-wahl { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 0.6rem; }
.menue-rolle-wahl label { font-weight: 600; }
.menue-durch-rolle .menue-freigaben { opacity: 0.55; }
.menue-durch-rolle .radio-zelle { cursor: not-allowed; }
.rollen-neu { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; }
.rollen-neu label { display: grid; gap: 0.2rem; }
.rolle-name { display: grid; gap: 0.2rem; max-width: 24rem; margin-bottom: 0.6rem; }
.rolle-loeschen { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* Favoriten-Voreinstellung einer Rolle (SPEC 14.12): gewählte Reihenfolge oben, Auswahl nach Gruppe darunter */
form.bestellform fieldset.rolle-favoriten { display: block; border: 1px solid var(--rand); border-radius: 8px; padding: 0.6rem 1rem 1rem; margin: 1.2rem 0; background: var(--karte); }
.rolle-favoriten legend { font-weight: 700; padding: 0 0.3rem; }
.fav-reihe { margin: 0.6rem 0; padding-left: 1.6rem; display: grid; gap: 0.3rem; max-width: 34rem; }
.fav-reihe li { padding: 0.15rem 0; }
.fav-reihe li > span { margin-right: 0.5rem; }
.fav-reihe button.mini { margin-left: 0.25rem; padding: 0 0.45rem; }
.fav-leiste { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--rand); border-radius: 99px; padding: 0 0.4rem; margin-right: 0.3rem; }
.fav-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem 1.4rem; margin-top: 0.8rem; }
.fav-gruppe { display: grid; gap: 0.15rem; align-content: start; }
.fav-gruppe > strong { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }
/* gegen form.bestellform label (Spalte, klein, gedämpft): Kästchen und Text in einer Zeile */
form.bestellform label.fav-ziel { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; font-size: 0.9rem;
                                  color: var(--fg); cursor: pointer; }
form.bestellform label.fav-ziel input { margin: 0; padding: 0; flex: none; }
form.bestellform label.fav-gesperrt { color: var(--muted); }

/* Anfrage ohne Bestellung abgeschlossen (SPEC 9.9): neutrale, dunkle Marke; Leiste in Grau */
.badge.status-abgeschlossen { background: #e8e8ec; color: #3a3a46; border: 1px solid #c9c9d2; }
.ls-leiste.abgeschlossen { border-left-color: #6b6b78; background: #f4f4f6; }

/* PDF teilen (SPEC 14.9): Knopf neben PDF-Links, nur auf Geräten mit Teilen-Funktion */
.teilen-knopf { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.25rem; padding: 0.2rem; border: 1px solid var(--rand); border-radius: 5px; background: #fff; color: var(--akzent); cursor: pointer; line-height: 1; }
.teilen-knopf svg { width: 1.1rem; height: 1.1rem; }
.teilen-knopf:disabled { opacity: 0.5; cursor: wait; }
table td .teilen-knopf { padding: 0.15rem; }

/* „Versenden an“ (SPEC 20): breiteres Modal, Empfängergruppen als Chips, Versandknopf in der Galerie */
.modal.modal-breit { max-width: 46rem; }
.versenden-gruppe { border: 1px solid var(--rand); border-radius: 6px; padding: 0.5rem 0.7rem 0.7rem; margin: 0 0 0.6rem; }
.versenden-gruppe legend { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent); padding: 0 0.3rem; }
.versenden-gruppe .chip small { color: var(--muted); margin-left: 0.3rem; font-weight: 400; }
.galerie-versenden { position: absolute; left: 0.3rem; top: 0.3rem; background: rgba(255,255,255,0.9); }
td.aktion { white-space: nowrap; }
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* „Versenden an“: Mitarbeiter-Chips mit Avatar (Ausweisbild oder Initialen, wie person()), Text ohne eigene Laufleiste */
.versenden-gruppe .chip .person-avatar { width: 1.35rem; height: 1.35rem; font-size: 0.6rem; margin: -0.15rem 0; }
.versenden-modal textarea { overflow: hidden; resize: none; min-height: 6rem; }

/* Filterzeilen mit Gruppennamen (Anfragen: Status, Ergebnis) */
.chips-benannt { align-items: center; }
.chips-titel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-width: 4.5rem; }

/* Rückmeldedialog (SPEC 14.4, 19.5): Artikelkopf, drei vorbelegte Faktenkacheln, Menge als Kacheln bzw. Stepper, Erfolgsfeld */
.modal.rm-modal { width: min(38rem, 96vw); }
.modal.rm-modal.rm-gebucht { border-top-color: var(--erledigt-fg); }
.rm-artikel { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.rm-artikel img { width: 4.5rem; height: 4.5rem; object-fit: contain; flex: none; border: 1px solid var(--rand); border-radius: 4px; background: var(--karte); }
.rm-artikel strong { display: block; overflow-wrap: anywhere; }
.rm-artikel small { color: var(--muted); }
.rm-titel { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rm-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.rm-kachel { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--rand); border-radius: 4px; }
.rm-kachel strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rm-kachel small { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.rm-menge { margin: 0; padding: 0; border: 0; min-width: 0; }
.rm-menge legend { margin-bottom: 0.35rem; padding: 0; }
.rm-mengen-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: 0.4rem; }
.modal .rm-menge label.rm-mengen-kachel { display: block; position: relative; font-size: 1em; color: var(--fg); cursor: pointer; }
.rm-mengen-kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rm-mengen-kachel span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--karte); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rm-mengen-kachel span small { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rm-mengen-kachel input:checked + span { border-color: var(--akzent); background: #e8eef7; color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.rm-mengen-kachel input:checked + span small { color: var(--akzent); }
.rm-mengen-kachel input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.rm-stepper { display: flex; gap: 0.4rem; align-items: stretch; flex-wrap: wrap; }
.rm-stepper button { min-width: 3rem; min-height: 3rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--karte); font-size: 1.3rem; cursor: pointer; }
.rm-stepper .rm-alle { font-size: 0.9rem; padding: 0 0.9rem; }
.rm-stepper button:disabled { opacity: 0.35; cursor: default; }
.rm-stepper button, .rm-mengen-kachel { touch-action: manipulation; }
.modal .rm-stepper input { width: 5.5rem; padding: 0.3rem; text-align: center; font-size: 1.3rem; font-weight: 600; border: 1px solid var(--rand); border-radius: 4px; }
.rm-erfolg { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; border-radius: 4px; background: var(--erledigt-bg); color: var(--erledigt-fg); }
.rm-erfolg strong { font-size: 1.1rem; }
/* Rückmeldehinweis (SPEC 14.4, 19.5): Leiste unten im Bild mit Countdown-Balken und „Rückgängig“ */
.rm-hinweis-bereich { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + var(--hm-hoehe, 0px) + env(safe-area-inset-bottom, 0px)); width: min(34rem, calc(100% - 2rem)); z-index: 120; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.rm-hinweis { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 4px; background: #1f2a3a; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
.rm-hinweis-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.rm-hinweis-text small { opacity: 0.88; overflow-wrap: anywhere; }
.rm-hinweis-text ul { margin: 0.3rem 0 0; padding-left: 1rem; font-size: 0.85em; }
.rm-hinweis-knopf { flex: none; min-height: 2.6rem; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 3px; background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.rm-hinweis-knopf:hover, .rm-hinweis-knopf:focus-visible { background: rgba(255, 255, 255, 0.15); }
.rm-hinweis-balken { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--rm-von, 100%); background: #8fb3ff; animation-name: rm-balken; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes rm-balken { from { width: var(--rm-von, 100%); } to { width: 0; } }
.rm-hinweis-gebucht { background: var(--erledigt-fg); }
.rm-hinweis-zurueckgenommen { background: #4a4f57; }
.rm-hinweis-fehler { background: var(--ueberfaellig-fg); }
@media (prefers-reduced-motion: reduce) { .rm-hinweis-balken { animation: none; } }
@media (max-width: 30rem) {
  .rm-kacheln { grid-template-columns: 1fr; }
  .rm-kachel { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
}

/* Sortimentbaum (SPEC 14.4, 16.2): ein Baustein fürs Anlegen und die Detailansicht eines Unternehmens */
form.stammform[data-lieferant="0"] .nur-fuer-lieferant { display: none; }
.sn-komponente { display: grid; gap: 0.45rem; min-width: 0; }
.sn-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.sn-kopf .sn-suche { flex: 1 1 14rem; min-height: 2.5rem; padding: 0 0.7rem; font: inherit; border: 1px solid var(--rand); border-radius: 3px; box-sizing: border-box; }
.sn-stand { font-size: 0.85rem; }
.sn-legende { margin: 0; font-size: 0.8rem; }
.sn-mini { display: inline-block; width: 0.85rem; height: 0.85rem; border: 2px solid #9aa4b5; border-radius: 3px; vertical-align: -0.12rem; box-sizing: border-box; background: #fff; }
.sn-mini-liefert { border-color: var(--akzent); background: var(--akzent); }
.sn-mini-nicht { border-color: var(--ueberfaellig-fg); background: var(--ueberfaellig-fg); }
.sn-baum, .sn-unter { list-style: none; margin: 0; padding: 0; }
.sn-baum { max-height: 28rem; overflow-y: auto; padding: 0.25rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--karte); }
.sn-unter { margin-left: 2.4rem; padding-left: 0.2rem; border-left: 1px dashed var(--rand); }
.sn-ober[data-offen="0"] > .sn-unter { display: none; }
.sn-zeile { display: flex; align-items: center; gap: 0.25rem; min-height: 2.5rem; }
.sn-klapp, .sn-klapp-platz { flex: none; width: 2.2rem; height: 2.2rem; }
.sn-klapp { position: relative; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.sn-klapp:hover { background: #f3f5f9; }
.sn-klapp::before { content: ""; position: absolute; left: 0.8rem; top: 0.74rem; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.sn-klapp[aria-expanded="true"]::before { transform: rotate(45deg); }
.sn-wahl { display: flex; align-items: center; gap: 0.55rem; flex: 1; min-width: 0; min-height: 2.4rem; padding: 0.3rem 0.35rem; border: 0; border-radius: 4px; background: none; color: var(--fg); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn-wahl:hover { background: #f3f5f9; }
.sn-wahl:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.sn-kasten { flex: none; width: 1.3rem; height: 1.3rem; border: 2px solid #9aa4b5; border-radius: 4px; background: #fff no-repeat center / 80%; box-sizing: border-box; }
.sn-wahl[data-zustand="liefert"] .sn-kasten { border-color: var(--akzent); background-color: var(--akzent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.sn-wahl[data-zustand="liefert_nicht"] .sn-kasten { border-color: var(--ueberfaellig-fg); background-color: var(--ueberfaellig-fg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.sn-wahl[data-zustand="liefert_nicht"] .sn-name { color: var(--ueberfaellig-fg); }
.sn-wahl[data-zustand=""][data-geerbt="liefert"] .sn-kasten { border-color: #a9bbd9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d97c2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.sn-wahl[data-zustand=""][data-geerbt="liefert_nicht"] .sn-kasten { border-color: #e2a9a9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d08a8a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.sn-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sn-ober > .sn-zeile .sn-name { font-weight: 600; }
.sn-zahl { flex: none; padding-right: 0.4rem; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sn-neu-knopf { flex: none; }
.sn-neu-knopf .sn-kurz { display: none; }
.sn-neu { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: 4px; background: #f7f9fc; }
.sn-neu[hidden] { display: none; }
.sn-neu-feld { flex: 1; min-width: 0; min-height: 2.3rem; padding: 0 0.5rem; font: inherit; border: 1px solid var(--rand); border-radius: 3px; box-sizing: border-box; }
.sn-versteckt { display: none !important; }
@media (max-width: 30rem) {
  .sn-unter { margin-left: 1.2rem; }
  .sn-neu-knopf .sn-lang { display: none; }
  .sn-neu-knopf .sn-kurz { display: inline; font-size: 1.1rem; }
  .sn-zahl { max-width: 6rem; text-align: right; }
}

/* Admin › Sicherheitskoordination (SPEC 23.7) */
.sk-admin-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.9rem 1.2rem; align-items: start; }
.sk-admin-breit { grid-column: 1 / -1; }
.sk-admin-zeitraum { display: flex; gap: 0.8rem; flex-wrap: wrap; }
form.stammform.sk-admin-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.sk-baustellen { border: 1px solid var(--rand); border-radius: 8px; padding: 0.5rem 0.9rem 0.8rem; background: var(--karte); }
.sk-baustellen-titel { font-size: 0.8rem; color: var(--muted); }
.sk-baustellen-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.3rem 0 0.6rem; }
.sk-baustellen-suche { width: 100%; max-width: 22rem; box-sizing: border-box; padding: 0.35rem 0.55rem; }
.sk-mail-dialog { max-width: 30rem; border: 1px solid var(--rand); border-radius: 12px; padding: 1.2rem 1.4rem; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.sk-mail-dialog::backdrop { background: rgba(0,0,0,.3); }
.sk-mail-dialog h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.sk-mail-knoepfe { display: flex; justify-content: flex-end; margin-top: 1rem; }
.sk-mail-knoepfe button { min-width: 6rem; }
.sk-baustellen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 0.2rem 1.2rem; max-height: 22rem; overflow-y: auto; }
/* gegen „form.stammform label:not(.chip):not(.schalter)“ (Block, klein, gedämpft): Kästchen und Text in einer Zeile */
form.stammform .sk-baustellen label.sk-baustelle { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0.45rem;
                                    border-radius: 6px; font-size: 0.88rem; color: var(--fg); cursor: pointer; }
form.stammform .sk-baustellen label.sk-baustelle:hover { background: #f3f6fa; }
form.stammform .sk-baustellen label.sk-baustelle.gewaehlt { background: #eef3fa; }
form.stammform .sk-baustellen label.sk-baustelle input { display: inline-block; width: auto; margin: 0.15rem 0 0; flex: none; }
.sk-baustelle[hidden] { display: none; }
.sk-baustelle .ur-status { margin-left: 0.3rem; white-space: nowrap; }
.sk-anhaenge { color: var(--muted); white-space: nowrap; }
a.primaer.knopf-link { display: inline-block; padding: 0.45rem 1rem; border-radius: 4px; background: var(--akzent); color: #fff; text-decoration: none; }