/* ============================================================
   auftraege.css — Styles fuer das Angebote & Auftraege Modul
   ============================================================ */

/* ---- Status-Filter-Tabs ---- */
.au-status-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.au-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

@media (hover: hover) {
  .au-tab:hover { border-color: var(--border-mid); color: var(--text); }
}
.au-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.au-tab:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---- Suchleiste ---- */
.au-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  margin-bottom: 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.au-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.au-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}

.au-search-input::placeholder { color: var(--text-dim); }

.au-clear-search {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 3px;
  transition: color var(--transition);
}

.au-clear-search:hover { color: var(--text); }

/* ---- Tabelle ---- */
/* Echte <table> – kein CSS-Grid – damit overflow:hidden Buttons NIE abschneidet */
.au-list-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
}

/* ============================================================
   TABELLEN-LAYOUT — table-layout:fixed zwingt exakte Breiten
   ============================================================ */
.erp-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.au-th {
  padding: 11px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}

.au-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.au-row:last-child { border-bottom: none; }
@media (hover: hover) {
  .au-row:hover { background: var(--surface-2); }
}

/* Basis-TD: overflow:hidden verhindert, dass Inhalt die Spalte aufweitet */
.au-td {
  padding: 14px 16px;
  vertical-align: middle;
  overflow: hidden;
}

/* ---- Feste Spaltenbreiten ----
   Verteilung (bei Standardbreite ~1400 px):
     col-nr       145 px  → Belegnummer + Kommissionsnr.
     col-kunde    auto    → Kunde + Projektbetreff (absorbiert Restplatz)
     col-status   130 px  → Status-Badge zentriert
     col-betrag   150 px  → Netto + Brutto-Hint, rechtsbündig
     col-actions  260 px  → bis zu 6 Icon-Buttons in EINER Reihe
   ------------------------------------------------------------ */
.col-nr      { width: 145px !important; }
.col-kunde   { width: auto !important;  min-width: 200px; }
.col-status  { width: 130px !important; min-width: 160px !important; text-align: center !important; }
.col-betrag  {
  width: 180px !important;
  min-width: 180px !important;
  text-align: right;
  font-weight: 700 !important;
  padding-left: 20px !important;
  /* 2026-07-06 (ETS-Bug-Fix-14): Mehr Abstand zwischen Betrag und
     Aktions-Icons (vorher klebte der EUR-Wert direkt am ersten Icon). */
  padding-right: 32px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 2026-07-06 (ETS-Bug-Fix-10): Aktions-Spalte breiter + Buttons luftiger.
   Vorher waren 6-8 Icons in 280 px eingezwaengt und wirkten gequetscht.
   Jetzt: Standard 360 px auf breiten Screens, klare Icon-Groesse, mehr
   Gap. Responsive per Media-Queries — auf schmalen Screens (Tablet)
   passt sich die Groesse an. */
.col-actions {
  width: 360px !important;
  min-width: 340px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding-left: 20px !important;
  padding-right: 16px !important;
}

/* Button-Container — Standard-Flexbox, rechtsbuendig */
.actions-wrapper {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}

/* P2.1-BAU-Z2 (2026-07-13): Basis-Definition ist ab jetzt in style.css
   (.vn-action-btn / .re-btn-icon / .au-btn-icon / .mw-btn-icon gruppiert).
   Hier bleiben nur Responsive-Overrides + Modul-spezifische Hover-Farben.
   Der Status-Button hat keine accent-soft-Grund-Faerbung mehr — die
   Farbfuellung greift erst on-hover. */

/* ---- Responsive Spalten-Breite ----
   P2.1-BAU-Z2-Nachtrag (2026-07-13): Icon-Groesse-Overrides sind in
   style.css konsolidiert (.vn-action-btn/.re-btn-icon/.au-btn-icon/
   .mw-btn-icon Modul-agnostisch). Hier bleiben nur Spalten-Breiten
   und Wrapper-Layout-Overrides — kein Icon-Sizing mehr. */
@media (max-width: 1400px) {
  .col-actions { width: 320px !important; min-width: 310px !important; }
  .actions-wrapper { gap: 5px; }
}

@media (max-width: 1200px) {
  .col-actions { width: 280px !important; min-width: 260px !important; }
  .actions-wrapper { gap: 4px; }
}

@media (max-width: 1000px) {
  .col-actions { width: 240px !important; min-width: 230px !important; padding-left: 8px !important; padding-right: 8px !important; }
}

/* Sehr schmal (Handy): Aktions-Spalte wraps auf zwei Zeilen. */
@media (max-width: 820px) {
  .col-actions { width: 180px !important; min-width: 170px !important; }
  .actions-wrapper { flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
}

@media (hover: hover) {
  .au-btn-status.au-btn-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .au-btn-print.au-btn-icon:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }
  .au-btn-edit.au-btn-icon:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }
  .au-btn-delete.au-btn-icon:hover {
    background: var(--neg-soft);
    border-color: var(--neg);
    color: var(--neg);
  }
}
.au-btn-icon:active     { transform: scale(.98); }
.au-btn-icon:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Rechnungs-Variante: der grüne Farb-Marker am Print-Button
   entfällt — die Info „Rechnung erstellt" wandert in einen eigenen
   Status-Chip (.au-status-chip-rechnung) in der Status-Spalte,
   damit die Zeile datenklar ist und Hover reine Interaktion bleibt. */
.au-btn-print.au-btn-print-rechnung {
  /* Look identisch zum normalen Print-Button — keine Farb-Sondervariante mehr. */
}

/* ---- Einkaufs-Assistent (Bestell-PDF) ----
   Enterprise-Feature: dezenter Icon-Tint-Chip statt Amber-Gradient
   + Glow. Konsistent zum Dashboard-KPI-Icon-Look. */
.au-btn-bestellpdf.au-btn-icon {
  background: var(--tint-amber);
  border-color: var(--tint-amber);
  color: var(--tint-amber-fg);
}
@media (hover: hover) {
  .au-btn-bestellpdf.au-btn-icon:hover {
    background: var(--tint-amber);
    border-color: var(--tint-amber-fg);
    color: var(--tint-amber-fg);
  }
}

/* ---- Spaltentypografien mit Überlauf-Schutz ---- */
.au-nummer {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.au-datum {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
}

.au-kundenname {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.au-pos-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.au-brutto {
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-display);
  white-space: nowrap;
}

.au-netto-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
}

/* ---- Status-Badges ---- */
.au-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid transparent;
}

/* Semantische Farben:
     entwurf       = neutral    (kein Alarm, Grundzustand)
     gesendet      = accent-soft (Info: Angebot wartet auf Antwort)
     bestaetigt    = pos-soft    (positiv)
     abgeschlossen = pos-soft    (positiv, dunkler Ton)
     storniert     = neg-soft    (kritisch)
*/
.au-status-entwurf       { background: var(--surface-3);  color: var(--text-muted); border-color: var(--surface-3); }
.au-status-gesendet      { background: var(--accent-soft); color: var(--accent);    border-color: var(--accent-soft); }
.au-status-bestaetigt    { background: var(--pos-soft);   color: var(--pos);        border-color: var(--pos-soft); }
.au-status-abgeschlossen { background: var(--pos-soft);   color: var(--pos);        border-color: var(--pos-soft); font-weight: 700; }
.au-status-storniert     { background: var(--neg-soft);   color: var(--neg);        border-color: var(--neg-soft); }

/* Info-Chip "Rechnung erstellt" — Status-Info als Chip in der Status-Spalte,
   NIE hinter Hover (Hover ist reine Interaktion, keine Daten-Darstellung). */
.au-status-chip-rechnung {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--pos-soft);
  color: var(--pos);
  border: 1px solid var(--pos-soft);
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.au-status-chip-rechnung svg { width: 12px; height: 12px; }

/* Listen-Flags fuer Auftraege mit offenen VDE-Platzhaltern oder Empfehlungen
   (frueher "Cross-Sell-Vorschlaege"). Eigene Zeile unter der Belegnummer.
   Bei Status "abgeschlossen" nicht berechnet (siehe Skip in auftraege.js). */
.au-flags-row {
  margin-top: 4px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.au-flag-vde, .au-flag-cs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: help;
  border: 1px solid transparent;
}
.au-flag-vde {
  background: var(--tint-amber);
  color: var(--tint-amber-fg);
  border-color: var(--tint-amber);
}
.au-flag-cs {
  background: var(--tint-blue);
  color: var(--tint-blue-fg);
  border-color: var(--tint-blue);
}

/* Betrag-Header rechtsbündig */
.au-th.th-right  { text-align: right; }
.au-th.th-center { text-align: center; }


/* P3-CLEANUP (2026-07-15): `:not(.au-btn-icon)` verhindert Text-Padding
   bei Icon-Only-Buttons. Vorher war die Kombi `.au-btn-edit.au-btn-icon`
   ein Hybrid — Text-Padding aus dieser Regel + Icon-Container aus
   style.css:570 → SVG-Width auf 8px gequetscht (P3-BAU-G Wächter-Fund).
   Jetzt greift Text-Padding nur bei REINEN Text-Buttons. Die Icon-Kombi
   bleibt kanonisch 30x30 mit SVG 15x15. */
.au-btn-status:not(.au-btn-icon),
.au-btn-edit:not(.au-btn-icon),
.au-btn-delete:not(.au-btn-icon) {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* P2.1-BAU-Z2 (2026-07-13): Status-Text-Button ohne accent-soft-Basis
   — subtile Grundfarbe wie Archiv. Accent-Fuellung erst on-hover. */
.au-btn-status {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: 600;
}

.au-btn-edit {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}

.au-btn-delete {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

@media (hover: hover) {
  .au-btn-status:hover { background: var(--accent); color: #fff; }
  .au-btn-edit:hover   { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .au-btn-delete:hover { border-color: var(--neg);    color: var(--neg);    background: var(--neg-soft); }
}
.au-btn-status:active,
.au-btn-edit:active,
.au-btn-delete:active { transform: scale(.98); }

/* Leer-Zustand */
.au-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.au-empty p    { font-weight: 600; font-size: 15px; color: var(--text); }
.au-empty span { font-size: 13px; }

/* ---- Modul-Buttons ---- */
.au-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.au-btn-primary:hover  { background: var(--accent-hover); }
.au-btn-primary:active { transform: scale(.98); }

.au-btn-secondary {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.au-btn-secondary:hover { color: var(--text); border-color: var(--border-mid); }

.au-btn-danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition);
}

.au-btn-danger:hover { opacity: .85; }

/* ---- Modal ---- */
/* ===========================================================
   Planungs-Assistent — Auto-Terminvorschläge
   =========================================================== */

.pa-vorschlaege {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
}

.pa-vorschlaege-titel {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
}

.pa-vorschlaege-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
}

.pa-vorschlag-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) {
  .pa-vorschlag-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
}
.pa-vorschlag-btn:active { transform: scale(.98); }
.pa-vorschlag-btn--aktiv {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.pa-vb-tag {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.2;
}
.pa-vb-tag strong {
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
}

.pa-vb-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pa-vb-team {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}
.pa-vb-zeit {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pa-vb-ausl {
  font-size: 10px;
  font-weight: 600;
  color: var(--pos);
  letter-spacing: .03em;
}
.pa-vorschlag-btn--aktiv .pa-vb-ausl {
  color: var(--accent);
}

.pa-vorschlaege-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.pa-keine-vorschlaege {
  padding: 12px 14px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--warn);
  line-height: 1.5;
}

.au-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn .15s ease;
  padding: 16px;
}

.au-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 740px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: slideUp .2s ease;
}

.au-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.au-modal-title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.au-modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.au-modal-komm-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  letter-spacing: .3px;
  white-space: nowrap;
}

.au-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}

.au-modal-close:hover { color: var(--text); background: var(--surface-2); }

.au-modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.au-modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ---- Formular im Modal ---- */
.au-form-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.au-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.au-form-row .au-form-group { margin-bottom: 0; flex: 1; }

.au-form-group label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.au-required label::after { content: ' *'; color: var(--neg); }

.au-select,
.au-form-group input,
.au-form-group textarea {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  resize: vertical;
  width: 100%;
}

.au-select { cursor: pointer; }

.au-select:focus,
.au-form-group input:focus,
.au-form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.au-input-error {
  border-color: var(--neg) !important;
  box-shadow: 0 0 0 3px var(--neg-soft) !important;
}

.au-field-error { font-size: 11px; color: var(--neg); min-height: 14px; }
.au-field-hint  { font-size: 11px; color: var(--warn); }

/* ---- Positions-Zeilen ---- */
.au-pos-zeile {
  display: grid;
  /* P7.1: Einheit als eigene Spalte zwischen Menge und EP. Ohne sie war eine
     im Formular angelegte Position fuer das Aufmass nicht bindbar.
     Die Zahlenspalten sind dafuer enger gefasst, damit die Beschreibung nicht
     die ganze neue Spalte bezahlt: im echten 740px-Fenster gemessen faellt
     sie so von 266 auf 250 Pixel statt auf 174. Die Werte sind der gemessene
     Platzbedarf plus Polster — "1234.56" braucht 47px, "lfd.m" 29px,
     "12345.67" 55px, "12.345,67 EUR" 66px; nichts wird abgeschnitten. */
  /* Nr | Beschreibung | Menge | Einheit | EP | Gesamt | Hoch/Runter/Del */
  grid-template-columns: 24px 1fr 72px 62px 88px 96px 80px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  transition: border-color var(--transition);
}

.au-pos-zeile:hover { border-color: var(--border-mid); }

.au-pos-nr {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-align: right;
}

/* Positionsfelder als schlanke Inline-Inputs */
.au-pos-input {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  width: 100%;
  outline: none;
  transition: border-color var(--transition) !important;
}

.au-pos-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--focus-ring) !important; }
.au-pos-num { text-align: right; }

.au-pos-gesamt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.au-pos-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}

@media (hover: hover) {
  .au-pos-delete:hover { color: var(--neg); background: var(--neg-soft); }
}
.au-pos-delete:active { transform: scale(.95); }

/* Letzte Spalte der Standardzeile: Hoch, Runter, Entfernen nebeneinander.
   80px = 26 + 3 + 26 + 3 + 21 (Entfernen-Knopf), gemessen. */
.au-pos-aktionen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
/* Hoch/Runter einer Position: Aussehen von .au-bereich-btn, aber eine feste
   Breite — ohne sie schrumpft der Knopf auf die Breite des Pfeils (9px). */
.au-pos-schieben { width: 26px; padding: 0; }

/* Positions-Header (Spaltenbezeichnungen) */
.au-pos-header {
  display: grid;
  /* P7.1: dieselbe Spaltenfolge wie .au-pos-zeile — sonst stehen die
     Ueberschriften ueber den falschen Feldern. */
  grid-template-columns: 24px 1fr 72px 62px 88px 96px 80px;
  gap: 8px;
  padding: 0 10px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- Raum-/Bereichsgliederung (optional, Vorgabe AUS) ----
   Alle Regeln hier greifen ausschliesslich an Elementen, die es ohne
   eingeschaltete Gliederung gar nicht gibt. Ein Vorgang mit AUS sieht
   deshalb unveraendert aus. */

.au-bereiche-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.au-bereiche-schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.au-bereiche-schalter input { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; margin: 0; }

.au-bereiche-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin: 6px 0 0;
  line-height: 1.45;
}

.au-bereiche-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.au-bereich-item {
  display: grid;
  /* Name | hoch | runter | weg */
  grid-template-columns: 1fr 30px 30px 30px;
  gap: 6px;
  align-items: center;
}

.au-bereich-name {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  min-width: 0;
  outline: none;
  font-family: inherit;
}
.au-bereich-name:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }

.au-bereich-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  /* 30px waeren auf dem Telefon zu klein zum Treffen; 34px Hoehe ist der
     Wert, den auch die uebrigen Knoepfe der Maske tragen. */
  min-height: 32px;
  cursor: pointer;
  transition: all var(--transition);
}
@media (hover: hover) {
  .au-bereich-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .au-bereich-btn-weg:hover:not(:disabled) { border-color: var(--neg); color: var(--neg); background: var(--neg-soft); }
}
.au-bereich-btn:disabled { opacity: .35; cursor: default; }
.au-bereich-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.au-bereich-neu {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 8px;
}

.au-btn-bereich-anlegen {
  background: none;
  border: 1px dashed var(--border-mid);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
}
@media (hover: hover) {
  .au-btn-bereich-anlegen:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
}
.au-btn-bereich-anlegen:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.au-bereich-gruppe { margin-bottom: 12px; }

.au-bereich-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.au-bereich-kopf-ohne { background: var(--surface-2); border-left-color: var(--border-mid); }

.au-bereich-kopf-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  min-width: 0;
}
.au-bereich-kopf-anz { font-size: 10px; color: var(--text-dim); white-space: nowrap; }

.au-bereich-leer {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  padding: 6px 10px 10px;
  margin: 0;
}

.au-bereich-poswrap { margin-bottom: 6px; }

.au-bereich-zuordnung {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 0;
  flex-wrap: wrap;
}
.au-bereich-zuordnung label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}
.au-bereich-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  /* Damit ein langer Raumname das Fenster nicht aufreisst. */
  max-width: 100%;
  min-width: 0;
  flex: 1 1 140px;
  outline: none;
  cursor: pointer;
}
.au-bereich-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }

/* Telefon: die Schaltflaechen brauchen die volle Breite, sonst sind sie
   nicht sicher zu treffen, und der Anlegeknopf rutscht unter das Feld. */
@media (max-width: 560px) {
  .au-bereich-neu { grid-template-columns: 1fr; }
  .au-btn-bereich-anlegen { width: 100%; }
  .au-bereich-item { grid-template-columns: 1fr 34px 34px 34px; }
  .au-bereich-btn { min-height: 34px; }
  .au-bereich-zuordnung { padding: 6px 10px 0; }
  .au-bereich-zuordnung label { flex: 0 0 100%; }
  .au-bereich-select { flex: 1 1 100%; }
}

.au-btn-add-pos {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px dashed var(--border-mid);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 4px;
}

@media (hover: hover) {
  .au-btn-add-pos:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}
.au-btn-add-pos:active { transform: scale(.98); }
.au-btn-add-pos:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.au-no-pos {
  color: var(--text-dim);
  font-size: 13px;
  padding: 16px 0 8px;
}

/* ---- Summenblock ---- */
.au-summen-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.au-summen-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.au-summen-zeile:last-child { border-bottom: none; }

.au-summen-gesamt {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding-top: 10px;
  margin-top: 4px;
}

.au-summen-gesamt .au-summen-wert { color: var(--accent-blue); }

.au-summen-wert {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ============================================================
   Anzahlungs-Verrechnung im Editor (unter Brutto)
   Live-Restbetrag, Überzahlungs-Schutz, kompaktes Spacing.
   ============================================================ */

/* Erste Zeile (Anzahlung) bekommt eine gestrichelte Trennung
   gegenüber dem Brutto-Total — sichtbar abgesetzt. */
.s-row-anzahlung {
  border-top: 1px dashed var(--border-mid) !important;
  padding-top: 6px !important;
  margin-top: 4px;
  font-size: 13px;
}

.s-row-anzahlung .au-summen-label {
  color: var(--pos);
  font-weight: 500;
}

.s-row-anzahlung .au-summen-anz-betrag {
  color: var(--pos);
  font-weight: 700;
}

/* Pille „noch nicht eingegangen" wenn Anzahlung noch offen */
.au-anz-warn-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-soft);
  border-radius: 20px;
}

/* Restbetrag — warn (Standard) oder neg (Überzahlung).
   Kein Pulse mehr — Enterprise-Signale sind statisch. */
.s-row-restbetrag {
  padding-top: 4px !important;
  margin-bottom: 0;
}

.s-row-restbetrag .au-summen-label {
  font-weight: 700;
}

.au-summen-rest-gelb {
  color: var(--warn) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.au-summen-rest-rot {
  color: var(--neg) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* @keyframes au-rest-pulse — entfernt: Enterprise pulsiert nicht. */

/* Warn-Div bei Überzahlung */
.au-anz-warn-overpay {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--neg-soft);
  border: 1px solid var(--neg-soft);
  border-left: 3px solid var(--neg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--neg);
}

.au-anz-warn-overpay strong { color: var(--neg); font-weight: 700; }

/* Spacing-Reduzierung: Summen-Zeilen im Editor enger packen,
   damit der neue Block ohne zusätzliches Scrollen sichtbar ist. */
.au-summen-block .au-summen-zeile { padding: 5px 0; }
.au-summen-block .au-summen-gesamt { padding-top: 8px; }

/* ---- Rechnung-Druck-Button — gleiche Grösse wie Bearbeiten-Button ----
   P2.1-BAU-Z2 (2026-07-13): blaue accent-soft-Fuellung raus, angeglichen
   an subtile Archiv-Basis (var(--surface-2) + var(--border)). Der
   Accent-Farbimpuls kommt erst on-hover — konsistent zu allen anderen
   Aktions-Buttons. */
/* P3-CLEANUP (2026-07-15): Text-Padding-Regel nur wenn KEIN au-btn-icon.
   Bei Icon-Kombi bleibt die kanonische 30x30-Geometrie aus
   style.css:570 unangetastet. Siehe P3-BAU-G-Waechter-Fund. */
.au-btn-print:not(.au-btn-icon) {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

@media (hover: hover) {
  .au-btn-print:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }
}
.au-btn-print:active { transform: scale(.98); }
.au-btn-print:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ============================================================
   RECHNUNGS-VORSCHAU-MODAL — In-App Druckvorschau
   ============================================================ */

.au-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10500;
  padding: 16px;
  animation: fadeIn .2s ease;
}

.au-preview-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 900px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: slideUp .25s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}

/* Header */
.au-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}

.au-preview-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
}

.au-preview-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}

.au-preview-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.au-preview-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 5px;
  transition: all var(--transition);
}
.au-preview-close:hover { color: var(--text); background: var(--surface-3); }

/* Body: Info links + Miniaturvorschau rechts */
.au-preview-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

/* Linke Seite */
.au-preview-info {
  padding: 20px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Logo-Vorschau */
.au-preview-logo-wrap {
  background: var(--surface-2);
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.au-preview-logo-img {
  max-height: 50px;
  max-width: 180px;
  object-fit: contain;
}

.au-preview-logo-placeholder {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

/* Detail-Zeilen */
.au-preview-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.au-preview-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.au-preview-detail-label {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.au-preview-detail-val {
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-size: 12.5px;
}

.au-preview-mono { font-family: var(--font-mono); font-size: 12px; }

/* Summen-Box */
.au-preview-summen {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.au-preview-summen-zeile {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.au-preview-summen-zeile:last-child { border-bottom: none; }

.au-preview-summen-total {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-top: 1px solid var(--accent);
}

/* Anzahlungs-Verrechnung in der linken Summen-Box */
.au-preview-summen-abzug {
  font-size: 12px;
  color: var(--warn);
  font-style: italic;
  border-top: 1px dashed var(--warn-soft) !important;
}
.au-preview-summen-abzug small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-dim);
  font-style: normal;
  margin-top: 1px;
}

.au-preview-summen-endbetrag {
  font-size: 15px;
  font-weight: 700;
  color: var(--pos);
  background: var(--pos-soft);
  border-top: 1px solid var(--pos) !important;
  padding: 10px 12px;
  letter-spacing: .2px;
}

/* Warnungen — non-blocking, aber prominent */
.au-preview-warn {
  background: var(--neg-soft);
  border: 1px solid var(--neg-soft);
  border-left: 3px solid var(--neg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--neg);
}

.au-preview-warn-strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

.au-preview-warn-tag {
  display: inline-block;
  background: var(--neg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sanfte Variante fuer nicht-blockierende Hinweise (IBAN, Steuernummer
   fehlen — Druck laeuft, nur Platzhalter im PDF). */
.au-preview-warn-soft {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-soft);
  border-left: 3px solid var(--warn);
  color: var(--warn);
}
.au-preview-warn-tag-soft {
  background: var(--warn);
}

.au-preview-info-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Rechte Seite: Miniaturvorschau */
.au-preview-minipage {
  padding: 20px;
  background: #e8ecf0;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Miniatur-Dokument */
.au-preview-doc {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  padding: 18px 20px;
  width: 100%;
  max-width: 400px;
  font-size: 8px;
  color: #1a1a1a;
  line-height: 1.4;
}

.au-pm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}

.au-pm-name {
  font-size: 9px;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 2px;
}

.au-pm-adresse { font-size: 7px; color: #6b7280; }

.au-pm-logo {
  max-height: 22px;
  max-width: 60px;
  object-fit: contain;
}

.au-pm-logo-text {
  font-size: 9px;
  font-weight: 800;
  color: #1a365d;
}

.au-pm-divider {
  border-top: 1.5px solid #1a365d;
  margin: 6px 0;
}

.au-pm-empfaenger { font-size: 8.5px; color: #111; margin-bottom: 6px; }

.au-pm-titel {
  font-size: 12px;
  font-weight: 800;
  color: #1a365d;
  margin-bottom: 1px;
}

.au-pm-nr {
  font-size: 7.5px;
  color: #374151;
  margin-bottom: 8px;
}

.au-pm-positionen {
  border-top: 1px solid #e5e7eb;
  margin-bottom: 6px;
}

.au-pm-pos-zeile {
  display: flex;
  justify-content: space-between;
  padding: 2.5px 0;
  border-bottom: 0.5px solid #f3f4f6;
  font-size: 7.5px;
}

.au-pm-pos-text { color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-pm-pos-preis { font-weight: 600; color: #111; flex-shrink: 0; margin-left: 8px; }
.au-pm-pos-mehr { font-size: 7px; color: #9ca3af; padding: 2px 0; }

.au-pm-summen {
  border-top: 1.5px solid #1a365d;
  margin-bottom: 8px;
  padding-top: 4px;
}

.au-pm-summen-total {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 800;
  color: #1a365d;
}

.au-pm-summen-abzug {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-style: italic;
  color: #b45309;
  margin-top: 2px;
}
.au-pm-summen-abzug small {
  display: block;
  font-size: 6.5px;
  color: #78716c;
  font-style: normal;
}

.au-pm-summen-endbetrag {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed #16a34a;
  font-size: 10.5px;
  font-weight: 900;
  color: #166534;
}

.au-pm-zahlung-text {
  margin: 6px 0 4px;
  padding: 4px 6px;
  background: #eff6ff;
  border-left: 2px solid #2563eb;
  border-radius: 2px;
  font-size: 7px;
  line-height: 1.45;
  color: #1e40af;
}
.au-pm-zahlung-text strong { color: #166534; font-weight: 800; }
.au-pm-zahlung-text em { color: #475569; font-style: italic; font-size: 6.5px; }

/* P6.5: Hinweis zum Nachdruck. Eigener Block NEBEN .au-pm-zahlung-text,
   nicht an dessen Stelle - die Zahlungsangabe bleibt sichtbar. */
.au-pm-legacy-hinweis {
  margin: 4px 0;
  padding: 4px 6px;
  background: #fffbeb;
  border-left: 2px solid #d97706;
  border-radius: 2px;
  font-size: 7px;
  line-height: 1.45;
  color: #78350f;
}
.au-pm-legacy-hinweis strong { color: #92400e; font-weight: 800; }

.au-pm-iban-fehlt {
  color: var(--color-danger, #dc2626);
  font-weight: 700;
  font-size: 6.5px;
}

.au-pm-fuss {
  border-top: 0.5px solid #d1d5db;
  padding-top: 4px;
  font-size: 6.5px;
  color: #9ca3af;
}

/* Footer */
.au-preview-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--surface);
}

/* ZUGFeRD-Status-Zeile über dem Footer */
.au-preview-zf-status {
  padding: 8px 22px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.au-zf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pos-soft);
  color: var(--pos);
  border: 1px solid var(--pos-soft);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}

.au-zf-status-hint {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-style: italic;
}

/* Generische Badge-Klassen falls noch nicht vorhanden */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.badge-success {
  background: #ecfdf5;
  color: #166534;
  border-color: #86efac;
}

.au-preview-btn-cancel {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.au-preview-btn-cancel:hover { color: var(--text); border-color: var(--border-mid); }

.au-preview-btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.au-preview-btn-print:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
}

/* ============================================================
   POSITIONS-KARTEN — Typ-basierte Position Cards
   ============================================================ */

.au-pos-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color var(--transition);
}

@media (hover: hover) {
  .au-pos-card:hover { border-color: var(--border-mid); }
}

.au-pos-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.au-pos-kalk-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 7px 10px 9px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.au-pos-kalk-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 80px;
}

.au-pos-kalk-group label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}

.au-pos-kalk-result {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: right;
  align-self: flex-end;
  padding-bottom: 1px;
  white-space: nowrap;
}

.au-pos-kalk-result strong { color: var(--text); }

.au-pos-nr-sm {
  width: 18px;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}

.au-pos-text-main {
  flex: 1;
  min-width: 0;
}

.au-pos-gesamt-sm {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Typ-Badges ---- */
.au-typ-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .2px;
}

/* Typ-Kategorien — als Icon-Tint-Chips (keine Statusfarben).
   Lohn=blau · Material=grün · Kupfer/Rohstoff=amber ·
   Maschine/Sonstiges/Pauschale=violett (unterschieden per Icon+Label). */
.au-typ-lohn     { background: var(--tint-blue);   color: var(--tint-blue-fg);   border: 1px solid var(--tint-blue); }
.au-typ-material { background: var(--tint-green);  color: var(--tint-green-fg);  border: 1px solid var(--tint-green); }
.au-typ-kupfer   { background: var(--tint-amber);  color: var(--tint-amber-fg);  border: 1px solid var(--tint-amber); }
.au-typ-sonstiges{ background: var(--surface-3);   color: var(--text-muted);     border: 1px solid var(--surface-3); }
.au-typ-maschine { background: var(--tint-violet); color: var(--tint-violet-fg); border: 1px solid var(--tint-violet); }
.au-typ-pauschale{ background: var(--tint-violet); color: var(--tint-violet-fg); border: 1px solid var(--tint-violet); }

/* ---- Typ-Picker Dropdown ---- */
.au-add-pos-wrap { position: relative; display: inline-block; margin-top: 4px; }

.au-typ-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 500;
  min-width: 280px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadeIn .1s ease;
}

.au-typ-picker-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  padding: 4px 12px 2px;
}

.au-typ-picker-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: all var(--transition);
  text-align: left;
  width: 100%;
}

@media (hover: hover) {
  .au-typ-picker-btn:hover { background: var(--surface-2); }
}
.au-typ-picker-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -2px;
}

.au-typ-picker-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.au-typ-picker-label strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.au-typ-picker-label em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Kommissionsnummer — Tabelle ---- */
.col-komm { width: 120px; }

.au-komm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  white-space: nowrap;
}

.au-komm-leer {
  font-size: 12px;
  color: var(--text-dim);
}

/* ---- Kommissionsnummer — Modal-Formular ---- */
.au-komm-input {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft) !important;
}

.au-komm-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.au-komm-badge-sm {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  vertical-align: middle;
}

/* ============================================================
   Gewinn-Hebel Bar
   ============================================================ */
.au-hebel-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.au-hebel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex: 1;
}

.au-hebel-lohn {
  background: var(--accent-soft);
  border-right: 1px solid var(--border);
}

.au-hebel-mat {
  background: var(--pos-soft);
}

.au-hebel-item label {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.au-hebel-lohn label { color: var(--accent); }
.au-hebel-mat  label { color: var(--pos); }

.au-hebel-input-wrap {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.au-hebel-lohn .au-hebel-input-wrap { border-color: var(--accent-soft); }
.au-hebel-mat  .au-hebel-input-wrap { border-color: var(--pos-soft); }

.au-hebel-lohn .au-hebel-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.au-hebel-mat  .au-hebel-input-wrap:focus-within { border-color: var(--pos);    box-shadow: 0 0 0 3px rgba(30,122,68,.20); }

.au-hebel-input {
  width: 52px;
  border: none;
  background: transparent;
  padding: 5px 6px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
}

.au-hebel-lohn .au-hebel-input { color: var(--accent); }
.au-hebel-mat  .au-hebel-input { color: var(--pos); }

.au-hebel-unit {
  padding: 0 7px;
  font-size: 12px;
  font-weight: 600;
}

.au-hebel-lohn .au-hebel-unit { color: var(--accent); background: var(--accent-soft); }
.au-hebel-mat  .au-hebel-unit { color: var(--pos);    background: var(--pos-soft); }

.au-hebel-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  flex: 1;
  white-space: nowrap;
}

.au-hebel-sep {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}

/* ============================================================
   Position Cards — Kategorie-Akzente aus dem Tint-System.
   Farb-Semantik wie in den Typ-Badges (lohn=blau, mat=grün,
   kupfer=amber, sonstiges=violett).
   ============================================================ */
.au-pos-card-lohn     { border-left: 3px solid var(--tint-blue-fg)   !important; }
.au-pos-card-material { border-left: 3px solid var(--tint-green-fg)  !important; }
.au-pos-card-kupfer   { border-left: 3px solid var(--tint-amber-fg)  !important; }
.au-pos-card-sonstiges{ border-left: 3px solid var(--tint-violet-fg) !important; }

/* VDE-Platzhalter — Marker fuer Positionen, deren Preis noch nachgepflegt
   werden muss. Amber-Chip-Look konsistent zum VDE-Flag in der Liste. */
.au-pos-card.vde-platzhalter,
.au-pos-zeile.vde-platzhalter {
  background-color: var(--tint-amber);
  border-left: 4px solid var(--tint-amber-fg) !important;
}

.au-pos-gesamt-lohn   { color: var(--tint-blue-fg)  !important; }
.au-pos-gesamt-mat    { color: var(--tint-green-fg) !important; }
.au-pos-gesamt-kupfer { color: var(--tint-amber-fg) !important; }

.au-pos-kalk-result-lohn {
  background: var(--tint-blue);
  border: 1px solid var(--tint-blue);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--tint-blue-fg);
}
.au-pos-kalk-result-lohn strong { color: var(--tint-blue-fg); }

.au-pos-kalk-result-mat {
  background: var(--tint-green);
  border: 1px solid var(--tint-green);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--tint-green-fg);
}
.au-pos-kalk-result-mat strong { color: var(--tint-green-fg); }

.au-pos-kalk-result-kupfer {
  background: var(--tint-amber);
  border: 1px solid var(--tint-amber);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--tint-amber-fg);
}
.au-pos-kalk-result-kupfer strong { color: var(--tint-amber-fg); }

.au-kupfer-kurs-readonly {
  background: var(--surface-2) !important;
  color: var(--text-dim) !important;
  cursor: not-allowed;
  border-style: dashed !important;
}

.au-kupfer-no-markup {
  font-style: normal;
  font-size: 10px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: .2px;
  vertical-align: middle;
}

/* ---- Individuell-Override ---- */
.au-pos-input-pct {
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.au-pos-input-indiv {
  border-color: var(--warn) !important;
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  box-shadow: 0 0 0 2px var(--warn-soft) !important;
}

.au-pos-indiv-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---- Summen-Split — Kategorie-Farben synchron zu Typ-Badges ---- */
.au-summen-split-lohn .au-summen-label,
.au-summen-split-lohn .au-summen-wert   { color: var(--tint-blue-fg);   font-size: 12px; }

.au-summen-split-mat .au-summen-label,
.au-summen-split-mat .au-summen-wert    { color: var(--tint-green-fg);  font-size: 12px; }

.au-summen-split-kupfer .au-summen-label,
.au-summen-split-kupfer .au-summen-wert { color: var(--tint-amber-fg);  font-size: 12px; }

.au-summen-split-sonst .au-summen-label,
.au-summen-split-sonst .au-summen-wert  { color: var(--tint-violet-fg); font-size: 12px; }

.au-summen-netto-total {
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 2px;
}

.au-summen-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.au-summen-dot-lohn   { background: var(--tint-blue-fg); }
.au-summen-dot-mat    { background: var(--tint-green-fg); }
.au-summen-dot-kupfer { background: var(--tint-amber-fg); }
.au-summen-dot-sonst  { background: #7c3aed; }

/* ============================================================
   ARTIKEL-SEITENPANEL — Material-Auswahl neben dem Modal
   ============================================================ */

/* Toggle-Button im Modal-Header */
.au-ap-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

@media (hover: hover) {
  .au-ap-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}
.au-ap-toggle-btn:active { transform: scale(.98); }

.au-ap-toggle-aktiv {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Modal wird breiter wenn Panel offen */
.au-modal-mit-panel {
  width: 1100px !important;
  max-width: calc(100vw - 32px) !important;
}

/* Flex-Layout innerhalb des Modal-Body */
.au-modal-flex-layout {
  display: flex;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* Linke Spalte: Formular */
.au-modal-form-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px;
}

/* Rechte Spalte: Artikel-Panel (standardmäßig versteckt) */
.au-artikel-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-left: 0 solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  transition: width .22s cubic-bezier(.4,0,.2,1), border-left-width .22s, min-width .22s;
  flex-shrink: 0;
}

.au-artikel-panel.au-ap-offen {
  width: 340px;
  min-width: 280px;
  border-left-width: 1px;
}

/* Panel-Header */
.au-ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}

.au-ap-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.au-ap-count {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Suchfeld */
.au-ap-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  flex-shrink: 0;
}

.au-ap-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.au-ap-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.au-ap-input::placeholder { color: var(--text-dim); }

/* Tabs */
.au-ap-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  flex-shrink: 0;
}

.au-ap-tab {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

@media (hover: hover) {
  .au-ap-tab:hover { border-color: var(--border-mid); color: var(--text); }
}
.au-ap-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.au-ap-tab-aktiv {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Ergebnisliste */
.au-ap-liste {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.au-ap-hint {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Lade-Spinner */
.au-ap-laden {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

@keyframes au-spin {
  to { transform: rotate(360deg); }
}

.au-ap-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: au-spin .6s linear infinite;
}

/* Artikel-Zeile */
.au-ap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  outline: none;
}

.au-ap-item:last-child { border-bottom: none; }

@media (hover: hover) {
  .au-ap-item:hover { background: var(--accent-soft); }
}
.au-ap-item:focus { background: var(--accent-soft); }

.au-ap-item-body {
  flex: 1;
  min-width: 0;
}

.au-ap-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.au-ap-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* Quelle-Badge */
.au-ap-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.au-ap-badge-lager {
  background: var(--tint-blue);
  color: var(--tint-blue-fg);
  border: 1px solid var(--tint-blue);
}

.au-ap-badge-dn {
  background: var(--tint-green);
  color: var(--tint-green-fg);
  border: 1px solid var(--tint-green);
}

.au-ap-artnr {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* EK-Preis rechts */
.au-ap-item-ek {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}

.au-ap-ek-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-dim);
}

.au-ap-ek-wert {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--pos);
  white-space: nowrap;
}

/* Hinzufügen-Button */
.au-ap-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pos-soft);
  background: var(--pos-soft);
  color: var(--pos);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

@media (hover: hover) {
  .au-ap-add-btn:hover {
    background: var(--pos);
    border-color: var(--pos);
    color: #fff;
  }
}
.au-ap-add-btn:active { transform: scale(.95); }
.au-ap-add-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}


/* Toast */
.au-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 99999;
  animation: slideUp .2s ease;
}

/* ============================================================
   FLEX-ANZAHLUNG — Action-Button + Modal
   ============================================================ */

.au-btn-anzahlung {
  color: var(--accent);
}
@media (hover: hover) {
  .au-btn-anzahlung:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }
}
.au-btn-anzahlung-aktiv {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.au-btn-anzahlung-aktiv::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  background: var(--pos);
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
}

.au-anz-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 1100;
  animation: au-anz-fade .15s ease;
}
@keyframes au-anz-fade { from { opacity: 0; } to { opacity: 1; } }

.au-anz-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%; max-width: 500px;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.au-anz-head {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
}
.au-anz-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }

.au-anz-close {
  background: transparent; border: none; color: var(--text-muted);
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .au-anz-close:hover { background: var(--surface-3); color: var(--text); }
}

.au-anz-body {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.au-anz-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.au-anz-meta > div { display: flex; flex-direction: column; gap: 2px; }

.au-anz-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #64748b);
}

.au-anz-quick {
  display: flex; gap: 6px;
}
.au-anz-quick-btn {
  flex: 1;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: var(--transition);
}
@media (hover: hover) {
  .au-anz-quick-btn:hover { color: var(--text); border-color: var(--border-mid); }
}
.au-anz-quick-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.au-anz-form {
  display: flex; flex-direction: column; gap: 10px;
}

.au-anz-field { display: flex; flex-direction: column; gap: 4px; }
.au-anz-field-full { grid-column: 1 / -1; }

.au-anz-input-group {
  display: flex; align-items: stretch;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 7px;
  background: var(--surface, #fff);
  overflow: hidden;
  transition: var(--transition);
}
.au-anz-input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.au-anz-input {
  flex: 1; border: none; outline: none; background: none;
  padding: 8px 10px;
  font-family: inherit; font-size: 14px;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}

.au-anz-suffix {
  padding: 0 12px;
  display: flex; align-items: center;
  background: var(--bg, #f8fafc);
  border-left: 1px solid var(--border, #e2e8f0);
  font-size: 13px; font-weight: 700;
  color: var(--text-muted, #64748b);
}

.au-anz-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.au-anz-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--bg, #f8fafc);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ============================================================
   Anzahlungs-Info in der Auftragsliste (Status-Spalte)
   Block-Flow unter dem Status-Badge, linksbündig, kein Rahmen,
   kein position:absolute, kein z-index. Zeilenhöhe darf sich
   dezent erweitern.

   Wrapper-Klasse heißt bewusst .au-anz-meta-container, damit es
   keine Kollision mit der gleichnamigen .au-anz-meta gibt, die
   im Anzahlungs-Anforderungs-Modal als 3-Spalten-Grid lebt.
   ============================================================ */

.au-anz-meta-container {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}

/* Erste Zeile: Icon + AB-Nr + Datum, immer dezent grau */
.au-anz-meta-container .au-anz-line-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.au-anz-icon-svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: .75;
}

/* Zweite Zeile: Restbetrag semantisch —
   0 (voll bezahlt) = neutral, offen = --warn, überzahlt = --neg */
.au-anz-meta-container .au-anz-line-rest {
  margin-top: 1px;
  font-weight: 500;
  font-size: 0.75rem;
}

.au-anz-meta-container--offen .au-anz-line-rest        { color: var(--warn); }
.au-anz-meta-container--offen .au-anz-line-rest strong { color: var(--warn); font-weight: 700; }

.au-anz-meta-container--ok .au-anz-line-rest           { color: var(--pos); }
.au-anz-meta-container--ok .au-anz-line-rest strong    { color: var(--pos); font-weight: 700; }

.au-anz-meta-container--overpay .au-anz-line-rest        { color: var(--neg); }
.au-anz-meta-container--overpay .au-anz-line-rest strong { color: var(--neg); font-weight: 700; }

/* Tabellenzeile: alle Zellen oben bündig, damit Status (jetzt
   höher durch Anzahlungs-Info) und Beträge nicht vertikal driften. */
.erp-table tbody td,
.au-table tbody td,
.au-row > td {
  vertical-align: top;
}

/* Status-Spalte: Anzahlungs-Info im Block-Flow links angedockt */
.au-td.col-status .au-anz-meta-container {
  text-align: left;
  display: block;
}

/* ============================================================
   KPI-KOPFKARTEN (spezifisch fuer Auftragsliste)
   ------------------------------------------------------------
   Neue Klassen (au-hd-kpi-*) um die generischen .kpi-* aus
   style.css nicht zu ueberschreiben — Referenz-Look wie das
   Dashboard-KPI-Grid: Icon-Tint-Chips, Wert 28-32px, Label
   uppercase in --text-dim.
   ============================================================ */
.au-hd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.au-hd-kpi-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) {
  .au-hd-kpi-karte:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.au-hd-kpi-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.au-hd-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tint-blue);
  color: var(--tint-blue-fg);
}
.au-hd-kpi-icon svg { width: 16px; height: 16px; }

.au-hd-kpi-karte--blau   .au-hd-kpi-icon { background: var(--tint-blue);   color: var(--tint-blue-fg); }
.au-hd-kpi-karte--amber  .au-hd-kpi-icon { background: var(--tint-amber);  color: var(--tint-amber-fg); }
.au-hd-kpi-karte--neutral .au-hd-kpi-icon { background: var(--surface-3); color: var(--text-muted); }
.au-hd-kpi-karte--gruen  .au-hd-kpi-icon { background: var(--tint-green); color: var(--tint-green-fg); }

.au-hd-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.au-hd-kpi-wert {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

/* Semantische Wert-Faerbung — sparsam, nur wo sinnvoll */
.au-hd-kpi-karte--warn .au-hd-kpi-wert { color: var(--warn); }

.au-hd-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .au-hd-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .au-hd-kpi-karte { padding: 14px 16px; }
  .au-hd-kpi-wert { font-size: 22px; }
}
@media (max-width: 420px) {
  .au-hd-kpi-grid { grid-template-columns: 1fr; }
}