/* 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);
}
.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 { 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 { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; padding: 0.15rem; border-radius: 5px; }
a.pdf-link:hover { background: #ececec; }
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; }

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;
}
.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 { display: flex; gap: 0.5rem; margin-left: auto; }
.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-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; }
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; 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 { white-space: nowrap; }
.wg-einzug { color: var(--muted); margin-right: 0.35rem; }
tr.wg-unter td.primaer { padding-left: 1.4rem; }

/* Sortiment am Unternehmen */
.sortiment-tabelle td { vertical-align: middle; }
.sortiment-tabelle .chips { margin: 0; }
.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 */
.sortiment-tabelle .wg-toggle { display: inline-flex; width: 1.3rem; height: 1.3rem; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin-right: 0.3rem; cursor: pointer; color: var(--muted); vertical-align: middle; }
.sortiment-tabelle .wg-toggle .wg-pfeil { display: inline-block; font-size: 1.1em; transition: transform 0.15s; }
.sortiment-tabelle tr.wg-ober[data-offen="1"] .wg-pfeil { transform: rotate(90deg); }
.sortiment-tabelle .wg-toggle-leer { display: inline-block; width: 1.3rem; margin-right: 0.3rem; }
.sortiment-tabelle tr.wg-ober td.primaer { font-weight: 600; }
.sortiment-tabelle tr.wg-unter td.primaer { padding-left: 2.6rem; font-weight: 400; }
.sortiment-tabelle .wg-zaehler { font-weight: 400; margin-left: 0.4rem; }
.sortiment-tabelle tr[hidden] { display: none; }
.sortiment-tabelle .wg-neu-link { margin-left: 0.6rem; align-self: center; }
.sortiment-tabelle tr.wg-neu td { background: #f7f9fc; }
.sortiment-tabelle tr.wg-neu td.primaer { padding-left: 2.6rem; font-weight: 400; }
.sortiment-tabelle .wg-neu-feld { width: 100%; max-width: 22rem; padding: 0.3rem 0.45rem; font: inherit; }
.sortiment-tabelle .wg-neu-aktion { white-space: nowrap; }

/* ---- 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; }
}