/* AUTO-GENERIERT via scripts/css-merge.js — zusammenhängender Lauf, Kaskade erhalten.
   Quellen (Ladereihenfolge): sh-redesign-ed-header.css, sh-redesign-ed-actions.css, sh-redesign-ed-stepper.css, sh-redesign-ed-kpis.css, sh-redesign-ed-tabs.css, sh-redesign-ed-overview.css, sh-redesign-pte-toolbar.css, sh-redesign-pte-rows.css, sh-redesign-ed-docs.css, sh-redesign-rail-cards.css, sh-redesign-rail-chatter.css, sh-redesign-ed-global.css, sh-redesign-pte-special.css, sh-redesign-ed-sums.css, sh-rd-ed-stepper-flat.css, sh-rd-ed-kpis-hot.css, sh-rd-ed-head-tabs.css, sh-rd-ed-operative.css, sh-rd-ed-colconfig.css, sh-rd-ed-rowactions.css, sh-rd-ed-kalk-zahlung.css, sh-rd-ed-acceptance-ki.css
   Regenerieren: node scripts/css-merge.js --out sh-editor.css sh-redesign-ed-header.css sh-redesign-ed-actions.css sh-redesign-ed-stepper.css sh-redesign-ed-kpis.css sh-redesign-ed-tabs.css sh-redesign-ed-overview.css sh-redesign-pte-toolbar.css sh-redesign-pte-rows.css sh-redesign-ed-docs.css sh-redesign-rail-cards.css sh-redesign-rail-chatter.css sh-redesign-ed-global.css sh-redesign-pte-special.css sh-redesign-ed-sums.css sh-rd-ed-stepper-flat.css sh-rd-ed-kpis-hot.css sh-rd-ed-head-tabs.css sh-rd-ed-operative.css sh-rd-ed-colconfig.css sh-rd-ed-rowactions.css sh-rd-ed-kalk-zahlung.css sh-rd-ed-acceptance-ki.css */
@import url('/fonts/space-grotesk-figtree-mono-google.css');

/* ===== gemergt aus sh-redesign-ed-header.css ===== */
/* ServiceHub Redesign - ed-header (Editor-Kopfzeile). REIN OPTISCH, additiv.
   Verfeinert die Belegkopf-Zeile des gemeinsamen Dokument-Editors
   (Angebot/Auftrag/Rechnung/Lieferschein/Gutschrift):
   Belegnummer (Space Mono, gedaempft) + Status-Badge + Icon-Chip +
   Titel/Untertitel (Space Grotesk) + Meta-Chips + Aktions-Knoepfe + Leerzustand.

   Scope strikt auf den Editor (.del-wrap ... .del-doc-header). KEINE
   Funktions-/Markup-Aenderung, kein display:none auf Knoepfe/Felder/Tabs.
   Eigene, lokal gescopte --sex-Tokens (ladereihenfolge-unabhaengig),
   Light + Dark via [data-theme=dark]. ASCII-Kommentare, keine Token-Listen
   in Kommentaren (Kommentar-Schliesser nur am echten Ende). */

/* ── Lokale Tokens (warm) ──────────────────────────────────────────────── */
.del-wrap {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-honey: #D99A2B;
  --sex-ok: #16A34A;
  --sex-warn: #C7791A;
  --sex-info: #2F6BD6;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;
  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-pill: 999px;

  --sex-shadow: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sex-font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] .del-wrap {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-honey: #E6AE4A;
  --sex-ok: #3BC07A;
  --sex-warn: #E5A33C;
  --sex-info: #5C8FE8;

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;
  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ── Kopfzeile (Container) ─────────────────────────────────────────────── */
.del-wrap .del-doc-header {
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  padding: 13px 22px;
  gap: 18px;
  box-shadow: var(--sex-shadow-sm);
  position: relative;
}

/* Zarte warme Akzentlinie an der Unterkante, nur Optik */
.del-wrap .del-doc-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--sex-accent) 0,
    var(--sex-honey) 120px,
    transparent 280px
  );
  opacity: .5;
  pointer-events: none;
}

/* ── Linke Seite: Nummer/Status/Titel ──────────────────────────────────── */
.del-wrap .del-doc-header-main {
  gap: 6px;
  min-width: 0;
}

/* Titelzeile: Icon-Chip + Belegnummer + Status-Badge */
.del-wrap .del-doc-title {
  gap: 11px;
  flex-wrap: wrap;
}

/* Beleg-Icon als warmer, runder Chip */
.del-wrap .del-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sex-r-md);
  background: var(--sex-accent-soft);
  border: 1px solid var(--sex-border);
  box-shadow: var(--sex-shadow-sm);
  font-size: 18px;
  line-height: 1;
  flex: none;
}

/* Belegnummer: Space Mono, gedaempft, leicht gespreizt */
.del-wrap .del-doc-number {
  font-family: var(--sex-font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--sex-text-2);
  letter-spacing: .01em;
}

/* Status-Badge im Kopf: pill-Form, weiche Schrift; die JS-Inline-Farbe
   (background) bleibt als Fuellung erhalten, wir verfeinern nur die Form. */
.del-wrap .del-doc-title .del-status-badge {
  padding: 4px 11px;
  border-radius: var(--sex-r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  box-shadow: var(--sex-shadow-sm);
}

/* ── Meta-Zeile: Kunde + Belegtitel als ruhige Chips ───────────────────── */
.del-wrap .del-doc-meta {
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--sex-font-body);
  font-size: 12.5px;
  color: var(--sex-text-2);
}

.del-wrap .del-doc-meta .del-doc-customer,
.del-wrap .del-doc-meta .del-doc-desc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--sex-r-pill);
  background: var(--sex-surf-2);
  border: 1px solid var(--sex-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kundenname etwas kraeftiger, Titel ruhiger */
.del-wrap .del-doc-meta .del-doc-customer {
  color: var(--sex-ink);
  font-weight: 600;
}
.del-wrap .del-doc-meta .del-doc-desc {
  color: var(--sex-text-2);
  font-style: normal;
}

/* ── Rechte Seite: Aktions-Knoepfe ─────────────────────────────────────── */
.del-wrap .del-doc-header-actions {
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Sekundaere Knoepfe: warme, ruhige Flaeche */
.del-wrap .del-doc-header-actions .del-btn {
  border-radius: var(--sex-r-sm);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  font-weight: 600;
  box-shadow: var(--sex-shadow-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr),
    color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}

.del-wrap .del-doc-header-actions .del-btn:hover {
  background: var(--sex-surf-2);
  border-color: var(--sex-border-2);
  color: var(--sex-ink);
  transform: translateY(-1px);
  box-shadow: var(--sex-shadow);
}

.del-wrap .del-doc-header-actions .del-btn:active {
  transform: translateY(0);
  box-shadow: var(--sex-shadow-sm);
}

/* Primaerer Knopf (Bearbeiten): Marken-Akzent */
.del-wrap .del-doc-header-actions .del-btn--primary {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
}
.del-wrap .del-doc-header-actions .del-btn--primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  color: #fff;
}

/* Icon-Knopf (...) etwas dezenter */
.del-wrap .del-doc-header-actions .del-btn--icon {
  color: var(--sex-text-2);
  letter-spacing: .12em;
}

/* ── Leerzustand-Kopf (kein Beleg gewaehlt) ────────────────────────────── */
.del-wrap .del-empty-header {
  gap: 12px;
  font-family: var(--sex-font-body);
  color: var(--sex-text-2);
}

.del-wrap .del-empty-header .del-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sex-r-md);
  background: var(--sex-surf-2);
  border: 1px solid var(--sex-border);
  font-size: 24px;
  line-height: 1;
  opacity: 1;
  flex: none;
}

/* ── Belegliste-Kopf links (gleiche Sprache wie der Belegkopf) ─────────── */
.del-wrap .del-sidebar-header {
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
}
.del-wrap .del-sidebar-header h3 {
  font-family: var(--sex-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
}

/* Belegnummer in der Liste: ebenfalls Space Mono, leise */
.del-wrap .del-doc-item-number {
  font-family: var(--sex-font-mono);
  color: var(--sex-text-2);
  letter-spacing: .01em;
}
.del-wrap .del-doc-item--active .del-doc-item-number {
  color: var(--sex-ink);
}

/* ── Mobile: Kopf darf umbrechen, nichts wird versteckt ────────────────── */
@media (max-width: 720px) {
  .del-wrap .del-doc-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }
  .del-wrap .del-doc-header-actions {
    justify-content: flex-start;
  }
}


/* ===== gemergt aus sh-redesign-ed-actions.css ===== */
/* =========================================================================
   ServiceHub Redesign  —  ed-actions  (REIN OPTISCH, additiv)

   Verfeinert NUR die Aktions-Flaechen der gemeinsamen Beleg-Editor-Shell
   (Angebot / Auftrag / Rechnung / Lieferschein / Gutschrift):
     - obere Aktionsleiste  (.del-doc-header-actions + .del-btn ...)
     - Control-Panel-Variante (.ue-toolbar__actions + .ue-toolbar__btn)
     - Drei-Punkte-Menue-Toggle + Dropdown-Panels (.ue-menu-...)
     - Annahme / Unterschrift  (sh-quote-acceptance: .sh-qacc-btn / .sh-qacc-dlg)
     - Bearbeiten  (sh-order-edit: .sh-oedit-btn / .sh-oedit-dlg)
     - eingebettete PDF-Vorschau-Chrome (.del-preview ...) — BLEIBT sichtbar,
       wird nur waermer gerahmt.

   KEINE Funktions-, Markup- oder Logik-Aenderung. Es wird NICHTS versteckt
   (kein display none auf Buttons, Tabs, Feldern oder Zeilen).
   Eigene, lokal gescopte --sex-Tokens (ladereihenfolge-unabhaengig).
   Globale Basis (.btn, .badge, .data-table, :root) wird NICHT neu definiert.
   Light und Dark via [data-theme="dark"].

   Kommentar-Hygiene: in diesem File stehen keine Token-Listen mit dem
   Schliesser-Zeichenpaar; Klammern sind ausgeglichen.
   ========================================================================= */



/* ---------- Lokale Tokens (Light), gescoped auf die Editor-Aktions-Roots ---------- */
.del-doc-header-actions,
.ue-toolbar__actions,
.ue-menu-dropdown,
.sh-qacc-dlg,
.sh-oedit-dlg,
.del-preview {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-violet: #7C5BD6;
  --sex-violet-soft: #F0ECFB;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-sh-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-sh-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --sex-sh-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Lokale Tokens (Dark) ---------- */
[data-theme="dark"] .del-doc-header-actions,
[data-theme="dark"] .ue-toolbar__actions,
[data-theme="dark"] .ue-menu-dropdown,
[data-theme="dark"] .sh-qacc-dlg,
[data-theme="dark"] .sh-oedit-dlg,
[data-theme="dark"] .del-preview {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-ok: #3BC07A;
  --sex-ok-soft: rgba(59, 192, 122, .15);
  --sex-warn: #E5A33C;
  --sex-warn-soft: rgba(229, 163, 60, .15);
  --sex-info: #5C8FE8;
  --sex-violet: #9D82E6;
  --sex-violet-soft: rgba(157, 130, 230, .16);

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --sex-sh-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
}

/* =========================================================================
   1) Obere Aktionsleiste im Belegkopf  (.del-doc-header-actions)
      Pill-Buttons in Token-Farben. Primary (Bearbeiten) = Akzent.
   ========================================================================= */

.del-doc-header-actions {
  gap: 6px;
  flex-wrap: wrap;
}

/* Sekundaer-Aktionen als ruhige warme Pillen */
.del-doc-header-actions .del-btn {
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-pill);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  line-height: 1.1;
  box-shadow: var(--sex-sh-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.del-doc-header-actions .del-btn:hover {
  background: var(--sex-accent-soft);
  border-color: var(--sex-accent-line);
  color: var(--sex-accent);
  box-shadow: var(--sex-sh-soft);
  transform: translateY(-1px);
}
.del-doc-header-actions .del-btn:active {
  transform: translateY(0) scale(.98);
  background: var(--sex-surf-3);
}
.del-doc-header-actions .del-btn:focus-visible {
  outline: none;
  box-shadow: var(--sex-ring);
  border-color: var(--sex-accent);
}

/* Primaer-Aktion (Bearbeiten) — Akzent-Pille */
.del-doc-header-actions .del-btn--primary,
.del-doc-header-actions .del-btn-primary {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-sh-accent);
}
.del-doc-header-actions .del-btn--primary:hover,
.del-doc-header-actions .del-btn-primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  color: #fff;
  transform: translateY(-1px);
}

/* Drei-Punkte-Trigger als runder Icon-Knopf */
.del-doc-header-actions .del-btn--icon,
.del-doc-header-actions .del-btn-icon {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--sex-r-pill);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--sex-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.del-doc-header-actions .del-btn--icon:hover,
.del-doc-header-actions .del-btn-icon:hover {
  color: var(--sex-accent);
}

/* =========================================================================
   2) Control-Panel-Variante  (.ue-toolbar__actions / .ue-toolbar__btn)
      Die Basis liegt schon in sh-redesign-editor.css; hier nur Feinschliff
      der Pill-Geometrie + sauberere Aktionsgruppen-Trennung.
   ========================================================================= */

.ue-toolbar__actions {
  gap: 6px;
}

.ue-toolbar__actions .ue-toolbar__btn {
  border-radius: var(--sex-r-pill);
  padding: 7px 14px;
  font-weight: 600;
  box-shadow: var(--sex-sh-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.ue-toolbar__actions .ue-toolbar__btn:hover {
  box-shadow: var(--sex-sh-soft);
  transform: translateY(-1px);
}
.ue-toolbar__actions .ue-toolbar__btn:focus-visible {
  outline: none;
  box-shadow: var(--sex-ring);
  border-color: var(--sex-accent);
}

/* Sanfte vertikale Trennlinie vor der Aktionsgruppe (Odoo-Anmutung) */
.ue-toolbar.sh-cp .ue-toolbar__actions {
  border-left: 1px solid var(--sex-border);
  padding-left: 10px;
}

/* =========================================================================
   3) Drei-Punkte-Menue-Toggle + Dropdown-Panels (.ue-menu-...)
      Toggle als runder Pill; Aktions-Eintraege bekommen warmen Hover.
      Danger/AI-Panels in passenden Tokenfarben.
   ========================================================================= */

.ue-menu-toggle {
  border-radius: var(--sex-r-pill);
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr);
}
.ue-menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sex-ring);
  border-color: var(--sex-accent);
}

/* Dropdown-Rahmen + Schatten waermer */
.ue-menu-dropdown {
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-sh-lg);
}

/* Action-Listen-Eintraege im Menue: warmer Hover, weiche Radien */
.ue-menu-dropdown .actions-column .btn {
  border-radius: var(--sex-r-sm);
  font-family: var(--sex-font-body);
  font-weight: 600;
  color: var(--sex-text);
  transition: background var(--sex-tr), color var(--sex-tr);
}
.ue-menu-dropdown .actions-column .btn:hover {
  background: var(--sex-accent-soft);
  color: var(--sex-accent);
}

/* Sektionstitel im Dropdown */
.ue-menu-dropdown .panel h2,
.ue-menu-dropdown .panel h3 {
  font-family: var(--sex-font-head);
  color: var(--sex-text-2);
  letter-spacing: .04em;
}

/* Gefahr-Panel (Loeschen etc.) in Akzent-Toenen */
.ue-menu-dropdown .panel[class*="danger"] {
  border-color: var(--sex-accent-line);
  background: var(--sex-accent-soft);
}
.ue-menu-dropdown .panel[class*="danger"] h2,
.ue-menu-dropdown .panel[class*="danger"] h3 {
  color: var(--sex-accent-700);
}
.ue-menu-dropdown .panel[class*="danger"] .btn:hover {
  background: rgba(231, 61, 37, .12);
  color: var(--sex-accent-700);
}

/* KI-Panel in Violett (Hausfarbe fuer KI) */
.ue-menu-dropdown .panel[class*="ai-panel"] {
  border-color: var(--sex-violet-soft);
  background: var(--sex-violet-soft);
}
.ue-menu-dropdown .panel[class*="ai-panel"] h2,
.ue-menu-dropdown .panel[class*="ai-panel"] h3 {
  color: var(--sex-violet);
}
.ue-menu-dropdown .panel[class*="ai-panel"] .btn:hover {
  background: rgba(124, 91, 214, .14);
  color: var(--sex-violet);
}

.ue-menu-separator {
  background: var(--sex-border);
}

/* =========================================================================
   4) Annahme / Unterschrift  (sh-quote-acceptance)
      Button (.sh-qacc-btn) + Dialog (.sh-qacc-dlg) inkl. Unterschrift-Bild.
   ========================================================================= */

/* Button-Variante ausserhalb der Toolbar (btn btn-ghost btn-sm) — Akzentlinie,
   um die Annahme/Unterschrift-Aktion sichtbar hervorzuheben. */
.sh-qacc-btn:not(.ue-toolbar__btn) {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-accent-line);
  color: var(--sex-accent);
  background: var(--sex-accent-soft);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-qacc-btn:not(.ue-toolbar__btn):hover {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-sh-accent);
}

/* Dialog-Schale */
.sh-qacc-dlg {
  border: none;
  background: transparent;
  color: var(--sex-text);
  font-family: var(--sex-font-body);
}
.sh-qacc-dlg::backdrop {
  background: rgba(35, 25, 18, .42);
  backdrop-filter: blur(2px);
}
.sh-qacc-dlg .panel {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-sh-lg);
  padding: 22px 24px;
  max-width: 540px;
  width: 92vw;
}
.sh-qacc-dlg .panel h2 {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
}

/* Key/Value-Zeilen */
.sh-qacc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--sex-border);
}
.sh-qacc__row:last-of-type {
  border-bottom: none;
}
.sh-qacc__k {
  font-size: 12px;
  font-weight: 600;
  color: var(--sex-muted);
  letter-spacing: .01em;
}
.sh-qacc__v {
  font-size: 13.5px;
  color: var(--sex-ink);
  text-align: right;
  word-break: break-word;
}

/* Status-Marker */
.sh-qacc__ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--sex-r-pill);
  background: var(--sex-ok-soft);
  color: var(--sex-ok);
  font-weight: 600;
  font-size: 12.5px;
}
.sh-qacc__no {
  color: var(--sex-muted);
}

/* Unterschrift-Block: gerahmte, leicht karierte Flaeche */
.sh-qacc__sig {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-md);
  background:
    linear-gradient(0deg, var(--sex-surf-2), var(--sex-surf-2));
  box-shadow: var(--sex-sh-sm);
}
.sh-qacc__sig img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-sm);
  box-shadow: var(--sex-sh-sm);
}
.sh-qacc__sig-meta {
  font-size: 12px;
  color: var(--sex-text-2);
  text-align: center;
  line-height: 1.5;
}
.sh-qacc__sig-meta b {
  color: var(--sex-ink);
}

.sh-qacc__empty {
  color: var(--sex-muted);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 6px 0;
}

/* Schliessen-Button im Annahme-Dialog */
.sh-qacc-dlg .btn-ghost {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr), color var(--sex-tr);
}
.sh-qacc-dlg .btn-ghost:hover {
  background: var(--sex-surf-2);
  border-color: var(--sex-accent);
  color: var(--sex-accent);
}

/* =========================================================================
   5) Bearbeiten  (sh-order-edit)
      Button (.sh-oedit-btn) + Dialog-Schale (.sh-oedit-dlg).
      Die Feld-Mikro-Styles bringt sh-order-edit.js selbst mit; hier nur
      Schale, Akzent-Fokus und der Primary-Speichern-Knopf.
   ========================================================================= */

.sh-oedit-btn:not(.ue-toolbar__btn) {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-oedit-btn:not(.ue-toolbar__btn):hover {
  background: var(--sex-accent-soft);
  border-color: var(--sex-accent-line);
  color: var(--sex-accent);
  box-shadow: var(--sex-sh-sm);
}

.sh-oedit-dlg {
  border: none;
  background: transparent;
  color: var(--sex-text);
  font-family: var(--sex-font-body);
}
.sh-oedit-dlg::backdrop {
  background: rgba(35, 25, 18, .42);
  backdrop-filter: blur(2px);
}
.sh-oedit-dlg .panel {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-sh-lg);
  padding: 22px 24px;
}
.sh-oedit-dlg .panel h2 {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
}

/* Akzent-Fokusring auf den Editierfeldern */
.sh-oedit-dlg .sh-oedit__f input:focus,
.sh-oedit-dlg .sh-oedit__f textarea:focus,
.sh-oedit-dlg .sh-oedit__f select:focus {
  outline: none;
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
}

/* Speichern = Akzent-Pille; Abbrechen = ruhige Pille */
.sh-oedit-dlg .btn-primary,
.sh-oedit-dlg .sh-oedit-save {
  border-radius: var(--sex-r-pill);
  background: var(--sex-accent);
  border: 1px solid var(--sex-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sex-sh-accent);
  transition: background var(--sex-tr), transform var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-oedit-dlg .btn-primary:hover:not(:disabled),
.sh-oedit-dlg .sh-oedit-save:hover:not(:disabled) {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  transform: translateY(-1px);
}
.sh-oedit-dlg .btn-primary:disabled,
.sh-oedit-dlg .sh-oedit-save:disabled {
  opacity: .55;
  box-shadow: none;
}
.sh-oedit-dlg .btn-ghost {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr), color var(--sex-tr);
}
.sh-oedit-dlg .btn-ghost:hover {
  background: var(--sex-surf-2);
  border-color: var(--sex-accent);
  color: var(--sex-accent);
}

/* =========================================================================
   6) Eingebettete PDF-Vorschau-Chrome  (.del-preview ...)
      BLEIBT SICHTBAR — nur waermer gerahmt. Keine Layout-Aenderung,
      kein Verstecken; Breite/Collapse-Logik der App bleibt unberuehrt.
   ========================================================================= */

.del-preview {
  background: var(--sex-surface);
  border-left: 1px solid var(--sex-border);
}

.del-preview-header {
  border-bottom: 1px solid var(--sex-border);
}
.del-preview-header h3 {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
}

.del-preview-toolbar {
  border-bottom: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
}

.del-preview-placeholder {
  color: var(--sex-muted);
}

/* Das "Papier" der Vorschau: weicher Rahmen + warmer Schatten */
.del-preview-doc {
  background: #fff;
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-sh-soft);
}
.del-preview-doc-header {
  border-bottom: 1px solid var(--sex-border);
  color: var(--sex-ink);
}
.del-preview-doc-footer {
  border-top: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
  color: var(--sex-text-2);
}

/* Vorschau-Positions-Tabelle (nur Chrome) */
.del-preview-table th {
  background: var(--sex-surf-2);
  color: var(--sex-muted);
  letter-spacing: .03em;
}
.del-preview-table td,
.del-preview-table th {
  border-color: var(--sex-border);
}

/* Vorschau-Summenblock */
.del-preview-totals {
  border-top: 1px solid var(--sex-border-2);
}
.del-preview-total-row {
  color: var(--sex-text-2);
}
.del-preview-total-row--final {
  color: var(--sex-ink);
  font-family: var(--sex-font-head);
  font-weight: 700;
}

/* Zahlenwerte in der Vorschau in Mono (passt zum Belegstil) */
.del-preview-align-right,
.del-preview-col-qty,
.del-preview-col-price,
.del-preview-col-total {
  font-family: var(--sex-font-mono);
}

/* Hinweis-/Vermerk-Noten der Vorschau */
.del-preview-internal-note,
.del-preview-pdf-note {
  color: var(--sex-muted);
}


/* ===== gemergt aus sh-redesign-ed-stepper.css ===== */
/* ============================================================================
   sh-redesign-ed-stepper.css
   REIN OPTISCHES Re-Design des Status-Steppers im Dokument-Editor.
   Gemeinsame Shell von Angebot / Auftrag / Rechnung / Lieferschein / Gutschrift.

   NULL Funktionsaenderung. Additiv. Keine Logik, kein Markup, kein display:none.
   Markup geerbt aus sh-statusbar.js (ShStatusbar.render) — wird im Editor in den
   Host-Container .sh-cp-statusbar (Ids qei- / oei- / iei- / iei-cn-statusbar)
   gerendert:
     .sh-statusbar  >  .sh-statusbar__stage (.is-done / .is-current / .is-cancelled)
                                            >  .sh-statusbar__num

   Status-Bedeutung (Happy-Path, Reihenfolge bleibt):
     Offen / In Arbeit / Abgeschlossen / Berechnet   (Auftrag)
     draft / approved / issued / paid                (Rechnung)
     Entwurf / Gesendet / Angenommen / Beauftragt    (Angebot)
   Aktive Stufe = accent, erledigte = ok-gruen, kommende = muted. Pfeil/Chevron
   (clip-path aus sh-statusbar.css) bleibt unveraendert — nur Optik wird verfeinert.

   Scope strikt: ALLE Regeln haengen an .sh-cp-statusbar (= Editor-Stepper-Host),
   damit weder die globale Basis noch die eng gescopten Finance- bzw. Invoices-
   Varianten (#dunning-statusbar / .iei-editor-container) beruehrt werden.

   Token-Hygiene: KEINE Stern-Slash-Paare im Kommentartext. Tokens werden im
   Fliesstext einzeln genannt, nie als Liste mit Trennzeichen, die den Kommentar
   vorzeitig schliessen koennte.
   ============================================================================ */

/* --- Lokale warme Tokens, gescoped auf den Editor-Stepper-Host ------------- */
/* Ladereihenfolge-unabhaengig: kein Verlass auf Reihenfolge der sh-redesign-Stufen. */
.sh-cp-statusbar {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E6F4EA;
  --sex-honey: #D99A2B;
  --sex-warn: #C7791A;
  --sex-info: #2F6BD6;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;
  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-shadow: 0 6px 20px rgba(120, 80, 50, .07);
  --sex-r-pill: 9px;

  --sex-font-num: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-text: 'Figtree', system-ui, sans-serif;
}

[data-theme="dark"] .sh-cp-statusbar {
  --sex-accent: #F2543B;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #3A211A;
  --sex-ok: #34C36A;
  --sex-ok-soft: #18271D;
  --sex-honey: #D99A2B;
  --sex-warn: #C7791A;
  --sex-info: #5C8DE8;

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2A241E;
  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B7ABA0;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A322B;

  --sex-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* --- Host-Rahmen: dezente warme Flaeche unter der Toolbar ------------------ */
.sh-cp-statusbar {
  padding: .7rem .85rem .15rem;
}
.sh-cp-statusbar .sh-statusbar {
  margin: 0 0 .55rem;
  gap: 0;
  font-family: var(--sex-font-text);
  letter-spacing: .005em;
}

/* --- Einzelstufe: warme Grundflaeche, kommende Stufen = muted -------------- */
/* Chevron-Form (clip-path) aus sh-statusbar.css bleibt unveraendert. */
.sh-cp-statusbar .sh-statusbar__stage {
  background: var(--sex-surf-2);
  color: var(--sex-muted);
  font-weight: 600;
  font-size: .8rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  transition: background .16s ease, color .16s ease;
}

/* --- Erledigte Stufen: ruhiges Gruen -------------------------------------- */
.sh-cp-statusbar .sh-statusbar__stage.is-done {
  background: var(--sex-ok-soft);
  color: var(--sex-ok);
}

/* --- Aktive Stufe: warmer Akzent, sanft hervorgehoben --------------------- */
.sh-cp-statusbar .sh-statusbar__stage.is-current {
  background: var(--sex-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sex-shadow);
}

/* --- Negativer Endzustand (storniert / abgelehnt) ------------------------- */
.sh-cp-statusbar .sh-statusbar__stage.is-cancelled {
  background: var(--sex-accent-soft);
  color: var(--sex-accent-700);
}
.sh-cp-statusbar .sh-statusbar__stage.is-current.is-cancelled {
  background: var(--sex-accent-700);
  color: #fff;
}

/* --- Nummern-Bubble: warme Plakette mit Mono-anmutender Ziffer ------------- */
.sh-cp-statusbar .sh-statusbar__num {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: .45rem;
  font-family: var(--sex-font-num);
  font-weight: 600;
  font-size: .66rem;
  background: rgba(120, 80, 50, .12);
  color: inherit;
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar__num {
  background: rgba(255, 255, 255, .12);
}

/* Erledigte Stufe: Bubble traegt das Gruen mit. */
.sh-cp-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: rgba(22, 163, 74, .16);
  color: var(--sex-ok);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: rgba(52, 195, 106, .20);
}

/* Aktive Stufe: helle Bubble auf Akzent. */
.sh-cp-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

/* Negativer Endzustand: Bubble in der Akzentfamilie. */
.sh-cp-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num {
  background: rgba(231, 61, 37, .18);
  color: var(--sex-accent-700);
}
.sh-cp-statusbar .sh-statusbar__stage.is-current.is-cancelled .sh-statusbar__num {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

/* Der Haken der erledigten Stufe (content via ::after in sh-statusbar.css)
   erbt jetzt das Gruen sauber ueber color:inherit der Bubble. */

/* --- Mobile-Feinschliff (Basis-Datei bricht bereits um) ------------------- */
@media (max-width: 640px) {
  .sh-cp-statusbar { padding: .55rem .6rem .1rem; }
  .sh-cp-statusbar .sh-statusbar__stage { font-size: .74rem; }
  .sh-cp-statusbar .sh-statusbar__num {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .35rem;
  }
}


/* ===== gemergt aus sh-redesign-ed-kpis.css ===== */
/* =========================================================================
   ServiceHub - Redesign Block "ed-kpis"
   Kennzahlen-Leiste (KPI-rail) + Verknuepfungs-Kacheln des Beleg-Editors
   (gemeinsame Shell von Angebot / Auftrag / Rechnung / Lieferschein / Gutschrift).
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. NULL Funktions-, Markup- oder Logikaenderung.
   Es wird NICHTS Funktionales versteckt (kein display:none auf Buttons, Tabs,
   Feldern oder Zeilen). Die eingebettete PDF-Vorschau bleibt unberuehrt.

   Verfeinert die ECHTEN Editor-Selektoren aus doc-editor-layout.css:
     .del-kpi-bar / .del-kpi / .del-kpi--highlight / .del-kpi--internal
                  / .del-kpi--empty / .del-kpi-label / .del-kpi-value
        = obere Kennzahlen-/Metrics-Leiste (Netto, Brutto, Marge, Std geplant/ist ...)
     .del-links / .del-link-list / .del-link
        = Verknuepfungs-Kacheln (Auftragswert / Rechnungen / Angebot / Kundenakte)

   BESTAND: sh-redesign-editor.css re-skinnt diese Selektoren bereits auf Basis
   der warmen Palette (Token-Namespace --she-...). Diese Datei DUPLIZIERT das nicht,
   sondern hebt nur die Kennzahlen-Leiste und die Verknuepfungs-Kacheln optisch an.

   Eigener, lokal auf die Editor-Container gescopeter Token-Namespace --sex-...
   (ladereihenfolge-unabhaengig, kollidiert nicht mit --she-... oder globalen Tokens).
   Globale Basis (.btn, .badge, .data-table, :root) wird NICHT neu definiert.
   Light und Dark via [data-theme="dark"]. Kein !important-Wust.
   ========================================================================= */



/* ---------- Tokens (Light) - auf die Editor-Container gescoped ---------- */
.del-wrap {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-honey-soft: #FBF0DA;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-info-soft: #EAF1FC;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-sh-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-sh-card: 0 2px 8px rgba(120, 80, 50, .06);
  --sex-sh-accent: 0 5px 14px rgba(231, 61, 37, .20);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-honey-soft: rgba(230, 174, 74, .16);
  --sex-ok: #3BC07A;
  --sex-ok-soft: rgba(59, 192, 122, .15);
  --sex-warn: #E5A33C;
  --sex-warn-soft: rgba(229, 163, 60, .15);
  --sex-info: #5C8FE8;
  --sex-info-soft: rgba(92, 143, 232, .16);

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-sh-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-card: 0 2px 8px rgba(0, 0, 0, .35);
  --sex-sh-accent: 0 5px 14px rgba(0, 0, 0, .45);
}

/* =========================================================================
   1) KENNZAHLEN-LEISTE / METRICS-BAR (oben im Editor)
      Netto / Brutto / Marge / Std geplant / Std ist ...
      Markup: .del-kpi-bar > .del-kpi[.--highlight|.--internal|.--empty]
                            > .del-kpi-label + .del-kpi-value
   ========================================================================= */

.del-wrap .del-kpi-bar {
  gap: 10px;
  padding: 9px 18px;
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  box-shadow: var(--sex-sh-card);
  /* dezenter Verlauf nach unten gibt der Leiste Tiefe, ohne Layout zu aendern */
  background-image: linear-gradient(180deg, var(--sex-surface) 0%, var(--sex-surf-2) 140%);
  scrollbar-width: thin;
}

/* Einzelne Kennzahl: weiche Token-Karte statt nur Rahmenstrich links */
.del-wrap .del-kpi {
  position: relative;
  flex: 0 0 auto;
  gap: 3px;
  padding: 7px 14px 8px;
  border-left: none;
  border-radius: var(--sex-r-sm);
  background: var(--sex-surf-2);
  transition: background var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.del-wrap .del-kpi:hover {
  background: var(--sex-surface);
  box-shadow: var(--sex-sh-card);
}

/* Farb-Akzent als zarter linker Balken (nutzt die per --kpi-color gesetzte Farbe) */
.del-wrap .del-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--sex-r-pill);
  background: var(--kpi-color, var(--sex-border-2));
  opacity: .85;
}

.del-wrap .del-kpi-label {
  font-family: var(--sex-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--sex-muted);
  white-space: nowrap;
}

/* Zahlen in Space Grotesk - ruhig, klar, leicht negativer Buchstabenabstand */
.del-wrap .del-kpi-value {
  font-family: var(--sex-font-head);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--sex-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hervorgehobene Kennzahl (Brutto / Auftragswert): warme Akzent-Karte */
.del-wrap .del-kpi--highlight {
  padding: 7px 16px 8px;
  background:
    linear-gradient(135deg, var(--sex-accent-soft) 0%, var(--sex-surface) 130%);
  box-shadow: var(--sex-sh-card);
}
.del-wrap .del-kpi--highlight::before {
  background: var(--kpi-color, var(--sex-accent));
  width: 3.5px;
  opacity: 1;
}
.del-wrap .del-kpi--highlight:hover {
  background:
    linear-gradient(135deg, var(--sex-accent-soft) 0%, var(--sex-surface) 110%);
  box-shadow: var(--sex-sh-accent);
}
.del-wrap .del-kpi--highlight .del-kpi-label {
  color: var(--sex-accent-700);
}
.del-wrap .del-kpi--highlight .del-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--sex-accent-700);
}

/* Interne Kennzahl (Marge / DB) - dezent honig-getoent statt nur opak */
.del-wrap .del-kpi--internal {
  opacity: 1;
  background: var(--sex-honey-soft);
}
.del-wrap .del-kpi--internal::before {
  background: var(--kpi-color, var(--sex-honey));
}
.del-wrap .del-kpi--internal .del-kpi-label {
  color: var(--sex-warn);
}
.del-wrap .del-kpi--internal .del-kpi-value {
  color: var(--sex-ink);
}

/* Leerer Platzhalter-Wert: ruhig zuruecknehmen */
.del-wrap .del-kpi--empty {
  opacity: 1;
  background: transparent;
}
.del-wrap .del-kpi--empty::before {
  opacity: .4;
}
.del-wrap .del-kpi--empty .del-kpi-value {
  color: var(--sex-muted);
  font-weight: 600;
}

/* schlanke, warme Scrollbar fuer die ueberlaufende Leiste (WebKit) */
.del-wrap .del-kpi-bar::-webkit-scrollbar {
  height: 6px;
}
.del-wrap .del-kpi-bar::-webkit-scrollbar-thumb {
  background: var(--sex-border-2);
  border-radius: var(--sex-r-pill);
}
.del-wrap .del-kpi-bar::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================================
   2) VERKNUEPFUNGS-KACHELN (Tab "Verknuepfte Belege")
      Auftragswert / Rechnungen / Angebot / Kundenakte / Lieferschein ...
      Markup: .del-links > h4 + ul.del-link-list > li > a
   ========================================================================= */

.del-wrap .del-links h4 {
  margin: 0 0 12px;
  font-family: var(--sex-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
}

/* Liste -> Raster aus tastbaren Kacheln (rein optisch, gleiche Eintraege) */
.del-wrap .del-links .del-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Trennstriche der Listendarstellung im Kachel-Look aufloesen */
.del-wrap .del-links .del-link-list li {
  padding: 0;
  border-bottom: none;
}

/* Die Kachel selbst sitzt auf dem Link (a fuellt das li komplett aus) */
.del-wrap .del-links .del-link-list li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  background: var(--sex-surf-2);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: var(--sex-sh-card);
  transition: border-color var(--sex-tr), background var(--sex-tr),
              box-shadow var(--sex-tr), transform var(--sex-tr), color var(--sex-tr);
}

/* Fuehrendes Emoji der Verknuepfung etwas groesser stellen (in einem Pill-Feld) */
.del-wrap .del-links .del-link-list li > a::first-letter {
  font-size: 17px;
}

.del-wrap .del-links .del-link-list li > a:hover {
  border-color: var(--sex-accent-line);
  background: var(--sex-surface);
  color: var(--sex-accent-700);
  box-shadow: var(--sex-sh-accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.del-wrap .del-links .del-link-list li > a:active {
  transform: translateY(0);
}

/* "Keine verknuepften Belege." ruhig setzen */
.del-wrap .del-links .del-muted {
  font-family: var(--sex-font-body);
  font-size: 12.5px;
  color: var(--sex-muted);
}

/* Eigenstaendige Inline-Verknuepfungen (.del-link ausserhalb der Kachel-Liste,
   z.B. in Tabellenzellen): nur Akzentfarbe waermer, kein Layout-Eingriff */
.del-wrap .del-link {
  color: var(--sex-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--sex-tr);
}
.del-wrap .del-link:hover {
  color: var(--sex-accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   3) Responsive - Kacheln einspaltig auf schmalen Editor-Breiten
   ========================================================================= */
@media (max-width: 1180px) {
  .del-wrap .del-kpi {
    padding: 6px 12px 7px;
  }
  .del-wrap .del-kpi-value {
    font-size: 15.5px;
  }
  .del-wrap .del-kpi--highlight .del-kpi-value {
    font-size: 16.5px;
  }
}

@media (max-width: 720px) {
  .del-wrap .del-links .del-link-list {
    grid-template-columns: 1fr;
  }
}


/* ===== gemergt aus sh-redesign-ed-tabs.css ===== */
/* =========================================================================
   ServiceHub Redesign  Beleg-Editor: Sub-Header + Tab-Leiste (ed-tabs)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. NULL Funktionsaenderung.
   Verfeinert die gemeinsame Editor-Shell von Angebot / Auftrag / Rechnung /
   Lieferschein / Gutschrift an genau zwei Stellen:

     .del-doc-header   Belegkopf (Sub-Header ueber den Tabs)
     .del-tabs         Tab-Leiste (Uebersicht / Positionen / Kalkulation /
                       Ausfuehrung / Zeiten und Material / Folgebelege /
                       Dokumente / Verlauf) + .del-tab + KI-Dropdown

   Es wird NICHTS versteckt: keine Tabs entfernt, keine Buttons / Felder /
   Zeilen ausgeblendet, kein display none auf funktionalen Elementen.
   Nur Farbe, Rahmen, Radius, Abstand, Hover und Aktiv-Zustand.

   Tokens sind als eigene sex-Praezedenz lokal auf die Editor-Container
   gescoped  damit diese Datei ladereihenfolge-unabhaengig funktioniert und
   die globale Basis (Tokens, btn, badge, data-table) NICHT beruehrt.
   Bestehende Recolor-Regeln in sh-redesign-editor.css (she-Tokens) werden
   nur gezielt verfeinert, nicht dupliziert. Light und Dark via data-theme.
   ========================================================================= */



/* ---------- Tokens (Light)  lokal auf die Editor-Shell gescoped ---------- */
.del-wrap {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-violet: #7C5BD6;
  --sex-violet-soft: #F0ECFB;
  --sex-violet-line: rgba(124, 91, 214, .26);

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;

  --sex-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-sh-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-violet: #9D82E6;
  --sex-violet-soft: rgba(157, 130, 230, .16);
  --sex-violet-line: rgba(157, 130, 230, .32);

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
}

/* =========================================================================
   1) Sub-Header  Belegkopf ueber den Tabs (.del-doc-header)
   ========================================================================= */
.del-wrap .del-doc-header {
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  position: relative;
}
/* zarte warme Akzent-Haarlinie als oberer Abschluss des Belegkopfs */
.del-wrap .del-doc-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
              var(--sex-accent-line),
              transparent 38%);
  opacity: .55;
  pointer-events: none;
}

/* Belegnummer als markante Headline (Space Grotesk) */
.del-wrap .del-doc-header .del-doc-number,
.del-wrap .del-doc-number {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
  font-weight: 700;
}
.del-wrap .del-doc-header .del-doc-meta,
.del-wrap .del-doc-meta,
.del-wrap .del-empty-header {
  color: var(--sex-muted);
  font-family: var(--sex-font-body);
}

/* =========================================================================
   2) Tab-Leiste (.del-tabs) + Tabs (.del-tab)
   ========================================================================= */
.del-wrap .del-tabs {
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  gap: 2px;
  padding: 9px 20px 0;
  /* overflow visible bleibt (KI-Dropdown) wird hier NICHT angefasst */
}

/* Basis-Tab: ruhige Grundform, warme Sekundaerfarbe */
.del-wrap .del-tabs .del-tab {
  position: relative;
  color: var(--sex-text-2);
  font-family: var(--sex-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 15px 11px;
  border-radius: var(--sex-r-sm) var(--sex-r-sm) 0 0;
  border-bottom: 2px solid transparent;
  transition: color var(--sex-tr), background var(--sex-tr);
}

/* Hover: weiche warme Flaeche, Text dunkler  kein harter Sprung */
.del-wrap .del-tabs .del-tab:hover {
  color: var(--sex-ink);
  background: var(--sex-surf-2);
}

/* Aktiver Tab: Akzentfarbe + zarte Akzentflaeche oben gerundet */
.del-wrap .del-tabs .del-tab.del-tab--active {
  color: var(--sex-accent);
  background: var(--sex-accent-soft);
  border-bottom-color: transparent;
}

/* animierter Akzent-Unterstrich (gleitet von der Mitte auf) am aktiven Tab */
.del-wrap .del-tabs .del-tab.del-tab--active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 2px 2px 0 0;
  background: var(--sex-accent);
  box-shadow: 0 0 0 1px var(--sex-accent-soft);
}

/* dezenter Tastatur-Fokus, ohne das Layout zu verschieben */
.del-wrap .del-tabs .del-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sex-accent-line);
  border-radius: var(--sex-r-sm) var(--sex-r-sm) 0 0;
}

/* ---------- KI-Tab in Hausfarbe Violett (Akzent fuer KI-Werkzeuge) ------- */
.del-wrap .del-tabs .del-tab.del-tab--ai {
  color: var(--sex-violet);
  font-weight: 700;
}
.del-wrap .del-tabs .del-tab.del-tab--ai:hover {
  background: var(--sex-violet-soft);
  color: var(--sex-violet);
}
.del-wrap .del-tabs .del-tab.del-tab--ai.del-tab--active {
  color: var(--sex-violet);
  background: var(--sex-violet-soft);
}
.del-wrap .del-tabs .del-tab.del-tab--ai.del-tab--active::after {
  background: var(--sex-violet);
  box-shadow: 0 0 0 1px var(--sex-violet-soft);
}

/* =========================================================================
   3) KI-Dropdown-Menue (.del-ai-menu)  Optik-Politur
   ========================================================================= */
.del-wrap .del-ai-menu {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-sh-lg);
  padding: 6px;
}
.del-wrap .del-ai-menu-section {
  color: var(--sex-violet);
  font-weight: 700;
  letter-spacing: .06em;
}
.del-wrap .del-ai-menu-item {
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  border-radius: var(--sex-r-xs);
  transition: background var(--sex-tr), color var(--sex-tr);
}
.del-wrap .del-ai-menu-item:hover {
  background: var(--sex-violet-soft);
  color: var(--sex-violet);
}
.del-wrap .del-ai-menu-divider {
  background: var(--sex-border);
}

/* =========================================================================
   4) Mobile  Tab-Leiste horizontal scrollbar, nichts faellt weg
   ========================================================================= */
@media (max-width: 640px) {
  .del-wrap .del-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 12px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .del-wrap .del-tabs::-webkit-scrollbar {
    height: 0;
  }
  .del-wrap .del-tabs .del-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


/* ===== gemergt aus sh-redesign-ed-overview.css ===== */
/* =========================================================================
   ServiceHub - Redesign: Belegeditor "Uebersicht"-Tab (ed-overview)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. Re-Skin des Uebersicht-Tab-Inhalts im
   gemeinsamen Belegeditor (Angebot - Auftrag - Rechnung - Lieferschein -
   Gutschrift). Styled die ECHTEN Selektoren aus doc-editor-layout.js
   (_renderOverviewTab):
     .del-ov-section / .del-ov-section h4 / .del-ov-icon  (Stammdaten-Karten)
     .del-ov-grid / .del-ov-grid--3 / .del-ov-field       (Feldraster)
     .del-ov-field label / input / textarea / select       (Felder)
     .del-ov-field--full                                    (volle Breite)
     .del-ov-info / dt / dd                                 (Info-Zeilen)
     .del-ov-actions / .del-ov-btn (+ --primary/--ghost/--ai)
     .del-ov-status                                         (Status-Pille)

   WICHTIG: doc-editor-layout.js injiziert beim Rendern einen INLINE
   style-Block mit hart codierten Hellfarben (kein Dark-Mode). Diese Schicht
   gewinnt durch hoehere Spezifitaet (.del-wrap-Scope: 0,2,0 vs inline 0,1,0)
   ohne !important-Wust und bringt die warme Palette + Dark-Mode zurueck.

   KEINE Funktions-/Markup-/Logik-Aenderung. Nichts wird versteckt (kein
   display:none auf Buttons/Tabs/Feldern/Zeilen). Reines CSS.

   Tokens lokal als --sex- auf den Tab-Inhalt gescoped (ladereihenfolge-
   unabhaengig). Light + Dark via data-theme. Globale Basis nicht angefasst.
   ========================================================================= */

/* ---------- Tokens (Light) - auf den Uebersicht-Tab-Inhalt gescoped ---------- */
.del-wrap .del-tab-content {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-ok: #16A34A;
  --sex-warn: #C7791A;
  --sex-info: #2F6BD6;
  --sex-violet: #7C5BD6;
  --sex-violet-700: #6A4BC0;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;
  --sex-field: #F8F4EF;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-shadow-accent: 0 5px 14px rgba(231, 61, 37, .26);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap .del-tab-content {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-ok: #3BC07A;
  --sex-warn: #E5A33C;
  --sex-info: #5C8FE8;
  --sex-violet: #9D82E6;
  --sex-violet-700: #8A6FD8;

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;
  --sex-field: #211C18;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
}

/* =========================================================================
   1) Sektionskarte (.del-ov-section)
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-section {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-shadow-soft);
  padding: 18px 20px;
  margin-bottom: 16px;
  font-family: var(--sex-font-body);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-section:hover {
  border-color: var(--sex-border-2);
}

/* Karten-Titel: dezenter unterstrichener Kopf statt harter 2px-Linie */
.del-wrap .del-tab-content .del-ov-section h4 {
  margin: 0 0 16px;
  padding: 0 0 12px;
  font-family: var(--sex-font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
  border-bottom: 1px solid var(--sex-border);
  display: flex;
  align-items: center;
  gap: 9px;
}
.del-wrap .del-tab-content .del-ov-section h4 .del-ov-icon {
  font-size: 1rem;
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sex-r-sm);
  background: var(--sex-accent-soft);
  color: var(--sex-accent);
  line-height: 1;
}

/* =========================================================================
   2) Feldraster + Felder (.del-ov-grid / .del-ov-field)
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-grid {
  gap: 12px 16px;
}

.del-wrap .del-tab-content .del-ov-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sex-muted);
}

.del-wrap .del-tab-content .del-ov-field input,
.del-wrap .del-tab-content .del-ov-field textarea,
.del-wrap .del-tab-content .del-ov-field select {
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-sm);
  padding: 9px 11px;
  font-size: .875rem;
  font-family: var(--sex-font-body);
  color: var(--sex-text);
  background: var(--sex-field);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr), background var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-field input::placeholder,
.del-wrap .del-tab-content .del-ov-field textarea::placeholder {
  color: var(--sex-muted);
  opacity: .8;
}
.del-wrap .del-tab-content .del-ov-field input:focus,
.del-wrap .del-tab-content .del-ov-field textarea:focus,
.del-wrap .del-tab-content .del-ov-field select:focus {
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
  background: var(--sex-surface);
  outline: none;
}
.del-wrap .del-tab-content .del-ov-field input:disabled,
.del-wrap .del-tab-content .del-ov-field textarea:disabled,
.del-wrap .del-tab-content .del-ov-field select:disabled {
  background: var(--sex-surf-3);
  color: var(--sex-muted);
  border-color: var(--sex-border);
  cursor: not-allowed;
}

/* Inline-Select im Dokument-Block (Bearbeiter) auf gleiche Optik */
.del-wrap .del-tab-content .del-ov-info select {
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-sm);
  background: var(--sex-field);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-info select:focus {
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
  outline: none;
}

/* =========================================================================
   3) Info-Zeilen (.del-ov-info / dt / dd) - Label muted, Wert ink
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-info {
  padding: 7px 0;
  border-bottom: 1px solid var(--sex-border);
  font-size: .875rem;
}
.del-wrap .del-tab-content .del-ov-info:last-child {
  border-bottom: none;
}
.del-wrap .del-tab-content .del-ov-info dt {
  color: var(--sex-muted);
  font-weight: 500;
}
.del-wrap .del-tab-content .del-ov-info dd {
  color: var(--sex-ink);
  font-weight: 600;
}
.del-wrap .del-tab-content .del-ov-info dd strong {
  font-family: var(--sex-font-mono);
  color: var(--sex-ink);
}

/* =========================================================================
   4) Status-Pille (.del-ov-status) - nur die generische, ungefaerbte Variante.
   Inline-eingefaerbte Pillen (style-Attribut) bleiben unberuehrt = semantisch.
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-status {
  border-radius: var(--sex-r-pill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* =========================================================================
   5) Aktionen + Buttons (.del-ov-actions / .del-ov-btn)
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-actions {
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sex-border);
}

.del-wrap .del-tab-content .del-ov-btn {
  padding: 9px 18px;
  border-radius: var(--sex-r-pill);
  border: 1px solid transparent;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--sex-font-body);
  cursor: pointer;
  transition: background var(--sex-tr), border-color var(--sex-tr), color var(--sex-tr), transform var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-btn:active {
  transform: scale(.98);
}

.del-wrap .del-tab-content .del-ov-btn--primary {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-shadow-accent);
}
.del-wrap .del-tab-content .del-ov-btn--primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  color: #fff;
  transform: translateY(-1px);
}

.del-wrap .del-tab-content .del-ov-btn--ghost {
  background: var(--sex-surface);
  border-color: var(--sex-border-2);
  color: var(--sex-text);
}
.del-wrap .del-tab-content .del-ov-btn--ghost:hover {
  background: var(--sex-accent-soft);
  border-color: var(--sex-accent-line);
  color: var(--sex-accent);
}

/* KI-Knopf in Hausfarbe Violett (warm abgestimmt, kein Blau-Lila-Gradient) */
.del-wrap .del-tab-content .del-ov-btn--ai {
  background: var(--sex-violet);
  border-color: var(--sex-violet);
  color: #fff;
}
.del-wrap .del-tab-content .del-ov-btn--ai:hover {
  background: var(--sex-violet-700);
  border-color: var(--sex-violet-700);
  color: #fff;
  transform: translateY(-1px);
}

/* =========================================================================
   6) Gesperrt-Hinweis (Banner oben im Tab) - warme Honig-Toene statt grellgelb.
   Trifft den inline gebauten Banner ueber das fuehrende Schloss-Icon-Pattern,
   ohne Markup zu aendern. Nur Farbe/Rahmen/Radius.
   ========================================================================= */

.del-wrap .del-tab-content > div[style*="fef3c7"] {
  background: var(--sex-surf-2) !important;
  border: 1px solid var(--sex-honey) !important;
  border-radius: var(--sex-r-md) !important;
  color: var(--sex-text) !important;
}
.del-wrap .del-tab-content > div[style*="fef3c7"] div {
  color: var(--sex-text) !important;
}
.del-wrap .del-tab-content > div[style*="fef3c7"] strong {
  color: var(--sex-ink) !important;
}

/* =========================================================================
   7) Zwei-Spalten-Kopf (Dokument-Info + Kunde) - inline grid bleibt, aber
   bei schmaler Breite einspaltig fuer saubere Lesbarkeit.
   ========================================================================= */

@media (max-width: 860px) {
  .del-wrap .del-tab-content > div[style*="grid-template-columns:1fr 1fr"],
  .del-wrap .del-tab-content > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ===== gemergt aus sh-redesign-pte-toolbar.css ===== */
/* =========================================================================
   ServiceHub - Re-Design - Positionen-Toolbar (Detail-Veredelung)
   Block: pte-toolbar2  ·  REIN OPTISCH, additiv, KEINE Funktionsaenderung.

   Geltungsbereich: NUR die Aktionsleiste oberhalb des Positions-Grids
   im Beleg-Editor (Angebot/Auftrag/Rechnung/Lieferschein/Gutschrift):
     .pte-wrap .pte-toolbar  +  ihre Buttons / Trenner / Modus-Pille.
   Die Tabelle selbst (.pte-row/.pte-th/.pte-cell ...) gehoert
   sh-redesign-pte.css - die fasse ich NICHT an.

   Leitbild: das neue Design (sh/app.css .pe-toolbar + .pe-tbtn) -
   warme surf-2-Leiste, pill-artige Ghost-Buttons auf Surface,
   Primaer-Knopf accent, dezente Hover-Anhebung, klare Gruppierung.

   Regeln, die hier eingehalten werden:
     - Genau diese eine Datei. Kein Markup, kein JS.
     - Nichts wird versteckt (kein display:none auf Buttons/Feldern).
     - Nur Farbe/Rahmen/Radius/Schatten/Abstand/Fokus.
     - Eigene Tokens, lokal auf den Editor-Container gescoped, damit das
       Styling von der CSS-Ladereihenfolge unabhaengig ist.
     - Globale Basis (.btn/.badge/.data-table/:root) bleibt unberuehrt.

   Kommentar-Hygiene: in diesem File kommt die Kommentar-Schliess-Sequenz
   bewusst NUR an den echten Kommentar-Enden vor. Token-Namen werden im
   Klartext ohne Sonderzeichen-Paare genannt.
   ========================================================================= */

/* ---------- lokale, warme Tokens (Light) - gescoped auf das Wrap ---------- */
.pte-wrap{
  --sex-accent:#E73D25; --sex-accent-700:#C5331E; --sex-accent-600:#D6371F;
  --sex-accent-soft:#FCEDE7; --sex-accent-line:rgba(231,61,37,.22);
  --sex-honey:#D99A2B; --sex-honey-soft:#FBF0DA;
  --sex-info:#2F6BD6; --sex-info-soft:#EAF1FC;
  --sex-surface:#FFFFFF; --sex-surf-2:#F6F1EB; --sex-surf-3:#EFE8E0;
  --sex-ink:#231C17; --sex-text:#463D35; --sex-text-2:#6B6157; --sex-muted:#9A8F84;
  --sex-border:#EEE5DC; --sex-border-2:#E3D9CE;
  --sex-font-body:'Figtree',system-ui,sans-serif;
  --sex-r-xs:7px; --sex-r-sm:9px; --sex-r-pill:999px;
  --sex-sh-btn:0 1px 2px rgba(120,80,50,.07);
  --sex-sh-hov:0 4px 12px rgba(120,80,50,.12),0 1px 2px rgba(120,80,50,.06);
  --sex-sh-pri:0 4px 12px rgba(231,61,37,.26);
  --sex-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .pte-wrap{
  --sex-accent:#F2543B; --sex-accent-700:#E0432B; --sex-accent-600:#EC4A30;
  --sex-accent-soft:rgba(242,84,59,.16); --sex-accent-line:rgba(242,84,59,.30);
  --sex-honey:#E6AE4A; --sex-honey-soft:rgba(230,174,74,.16);
  --sex-info:#5C8FE8; --sex-info-soft:rgba(92,143,232,.16);
  --sex-surface:#1E1A16; --sex-surf-2:#241F1A; --sex-surf-3:#2C2620;
  --sex-ink:#F6F1EC; --sex-text:#E2D8CE; --sex-text-2:#B3A99E; --sex-muted:#8C8175;
  --sex-border:#2E2822; --sex-border-2:#3A332B;
  --sex-sh-btn:0 1px 2px rgba(0,0,0,.4);
  --sex-sh-hov:0 4px 12px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.45);
  --sex-sh-pri:0 4px 14px rgba(242,84,59,.32);
}

/* ---------- die Leiste selbst ---------- */
.pte-wrap .pte-toolbar{
  gap:7px;
  padding:9px 12px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sex-surf-2) 70%,var(--sex-surface)) 0%,
    var(--sex-surf-2) 100%);
  border-bottom:1px solid var(--sex-border);
  border-radius:inherit;
  align-items:center;
}
.pte-wrap .pte-toolbar--loading{
  background:var(--sex-surf-2);
}

/* Modus-Pille (z.B. ANGEBOT) - klare, ruhige Akzentkapsel ---------------- */
.pte-wrap .pte-mode-badge{
  background:var(--sex-accent);
  color:#fff;
  padding:4px 12px;
  border-radius:var(--sex-r-pill);
  font-weight:700;
  letter-spacing:.05em;
  box-shadow:var(--sex-sh-pri);
}

/* Trenner zwischen Button-Gruppen - zarter, mittig --------------------- */
.pte-wrap .pte-toolbar-sep{
  width:1px;
  height:20px;
  background:var(--sex-border-2);
  margin:0 3px;
  border-radius:1px;
  flex-shrink:0;
}
.pte-wrap .pte-toolbar-spacer{ background:transparent; }

/* ---------- Pill-Buttons (Basis = Ghost auf Surface) ---------- */
.pte-wrap .pte-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 11px;
  border:1px solid var(--sex-border-2);
  background:var(--sex-surface);
  color:var(--sex-text-2);
  border-radius:var(--sex-r-xs);
  font-family:var(--sex-font-body);
  font-weight:600;
  box-shadow:var(--sex-sh-btn);
  transition:var(--sex-tr);
}
.pte-wrap .pte-btn:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
  box-shadow:var(--sex-sh-hov);
  transform:translateY(-1px);
}
.pte-wrap .pte-btn:active{
  transform:translateY(0);
  box-shadow:var(--sex-sh-btn);
}
.pte-wrap .pte-btn:focus-visible{
  outline:none;
  border-color:var(--sex-accent);
  box-shadow:0 0 0 3px var(--sex-accent-soft);
}
.pte-wrap .pte-btn--sm{ padding:6px 11px; }

/* Primaer "+ Position" - voller Akzent, gefuellt -------------------- */
.pte-wrap .pte-btn--primary{
  background:var(--sex-accent);
  color:#fff;
  border-color:var(--sex-accent);
  box-shadow:var(--sex-sh-pri);
}
.pte-wrap .pte-btn--primary:hover{
  background:var(--sex-accent-700);
  border-color:var(--sex-accent-700);
  color:#fff;
  box-shadow:var(--sex-sh-pri);
  transform:translateY(-1px);
}

/* Ghost (+ Gruppe / Spalten / Reset / Excel / CSV) = wie Basis ------- */
.pte-wrap .pte-btn--ghost{
  background:var(--sex-surface);
  border-color:var(--sex-border-2);
  color:var(--sex-text-2);
}
.pte-wrap .pte-btn--ghost:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
}

/* Spezial-Einfuege-Knoepfe - warm getoent, eigener Sinn sichtbar ----- */
.pte-wrap .pte-btn--text{ color:var(--sex-honey); }
.pte-wrap .pte-btn--text:hover{
  background:var(--sex-honey-soft);
  border-color:var(--sex-honey);
  color:var(--sex-honey);
}
.pte-wrap .pte-btn--heading{ color:var(--sex-info); }
.pte-wrap .pte-btn--heading:hover{
  background:var(--sex-info-soft);
  border-color:var(--sex-info);
  color:var(--sex-info);
}
.pte-wrap .pte-btn--sep{ color:var(--sex-text-2); }
.pte-wrap .pte-btn--sep:hover{
  background:var(--sex-surf-3);
  border-color:var(--sex-muted);
  color:var(--sex-ink);
}

/* Icon-Knoepfe in der Leiste bleiben dezent (nur falls vorhanden) ---- */
.pte-wrap .pte-toolbar .pte-btn--icon{
  border-color:transparent;
  background:transparent;
  color:var(--sex-muted);
  box-shadow:none;
}
.pte-wrap .pte-toolbar .pte-btn--icon:hover{
  background:var(--sex-surf-3);
  border-color:var(--sex-border-2);
  color:var(--sex-ink);
  transform:none;
}

/* Loading-Hinweis in der Leiste ------------------------------------- */
.pte-wrap .pte-toolbar--loading .pte-loading-indicator{
  color:var(--sex-muted);
  font-style:italic;
}


/* ===== gemergt aus sh-redesign-pte-rows.css ===== */
/* =========================================================================
   ServiceHub — Re-Design PTE Rows (pte-rows2)  ·  REIN OPTISCH, additiv
   Bereich: Positions-Table-Engine — Spaltenkopf, Item-Zeilen, Zeilen-Aktionen.
   Quelle: position-table-engine.css (Struktur) + sh/app.css .pos-tbl/.pe-* (Look).
   Markup-Anker (position-table-engine.js):
     .pte-header-row .pte-th        — Spaltenkopf
     .pte-row .pte-cell             — Item-Zeile + Zellen
     .pte-cell--actions             — Zeilen-Aktionsspalte (rechts)
     .pte-btn--icon                 — Aktions-Icons (Plus, Duplizieren, Loeschen, Mehr)
     .pte-gr-acts                   — Aktions-Cluster im Gruppen-Header
   --------------------------------------------------------------------------
   - ERGAENZT sh-redesign-pte.css — verfeinert nur, dupliziert NICHT.
   - Nur Optik: Farbe, Rahmen, Radius, Schatten, Mono-Ziffern, Hover, Fokus.
   - NICHTS Funktionales versteckt (kein display:none auf Buttons/Zeilen/Feldern).
   - Funktionale Status-Farben (DB negativ, Marge rot, NB violett) bleiben unberuehrt.
   - Tokens lokal auf .pte-wrap gescoped (eigener --sex-Namensraum) -> ladereihen-
     folge-unabhaengig. Light + Dark via [data-theme="dark"].
   ========================================================================= */

/* ---------- Tokens (Light) — eigener Namensraum, gescoped auf .pte-wrap -- */
.pte-wrap{
  --sex-accent:#E73D25; --sex-accent-700:#C5331E;
  --sex-accent-soft:#FCEDE7;
  --sex-honey:#D99A2B;
  --sex-ok:#16A34A; --sex-warn:#C7791A; --sex-info:#2F6BD6;
  --sex-surface:#FFFFFF; --sex-surf-2:#F6F1EB; --sex-surf-3:#EFE8E0;
  --sex-ink:#231C17; --sex-text:#463D35; --sex-text-2:#6B6157; --sex-muted:#9A8F84;
  --sex-border:#EEE5DC; --sex-border-2:#E3D9CE;
  --sex-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --sex-body:'Figtree',system-ui,sans-serif;
  --sex-mono:'Space Mono',ui-monospace,monospace;
  --sex-r-xs:7px; --sex-r-sm:9px;
  --sex-tr:.16s cubic-bezier(.2,.7,.3,1);
  --sex-ring:0 0 0 3px var(--sex-accent-soft);
}
[data-theme="dark"] .pte-wrap{
  --sex-accent:#F2543B; --sex-accent-700:#E0432B;
  --sex-accent-soft:rgba(242,84,59,.16);
  --sex-honey:#E6AE4A;
  --sex-ok:#3BC07A; --sex-warn:#E5A33C; --sex-info:#5C8FE8;
  --sex-surface:#1E1A16; --sex-surf-2:#241F1A; --sex-surf-3:#2C2620;
  --sex-ink:#F6F1EC; --sex-text:#E2D8CE; --sex-text-2:#B3A99E; --sex-muted:#8C8175;
  --sex-border:#2E2822; --sex-border-2:#3A332B;
}

/* =========================================================================
   1) SPALTENKOPF (.pte-header-row / .pte-th)
   Uppercase, muted, leichter Buchstabenabstand, ruhiger Mono-Unterton fuer
   Zahlen-Spalten-Koepfe. Verfeinert nur Typo + Rahmen — keine Layout-Aenderung.
   ========================================================================= */
.pte-wrap .pte-header-row{
  background:var(--sex-surf-2);
}
.pte-wrap .pte-th{
  color:var(--sex-muted);
  font-family:var(--sex-body);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.055em;
  text-transform:uppercase;
  border-bottom:1px solid var(--sex-border-2);
}
/* Zahlen-/Mengen-Spaltenkoepfe rechtsbuendig — folgt den Zellen */
.pte-wrap .pte-th[data-col-key="unitPriceNet"],
.pte-wrap .pte-th[data-col-key="listPriceNet"],
.pte-wrap .pte-th[data-col-key="purchasePriceNet"],
.pte-wrap .pte-th[data-col-key="lineTotalNet"],
.pte-wrap .pte-th[data-col-key="lineTotalGross"],
.pte-wrap .pte-th[data-col-key="contribution"],
.pte-wrap .pte-th[data-col-key="quantity"],
.pte-wrap .pte-th[data-col-key="quantityOrdered"],
.pte-wrap .pte-th[data-col-key="quantityDelivered"],
.pte-wrap .pte-th[data-col-key="quantityOpen"],
.pte-wrap .pte-th[data-col-key="markupPercent"],
.pte-wrap .pte-th[data-col-key="supplierDiscountPercent"],
.pte-wrap .pte-th[data-col-key="discountPercent"],
.pte-wrap .pte-th[data-col-key="taxRate"]{
  text-align:right;
}
/* Aktions-Spaltenkopf bleibt unauffaellig leer */
.pte-wrap .pte-col-actions{ background:var(--sex-surf-2); }

/* =========================================================================
   2) ITEM-ZEILEN (.pte-row / .pte-cell)
   Ruhiger Hover auf surf-2, dezente Zebra, sauberer Fokus-Ring.
   Generische Item-Zeilen — Status-/Gruppen-/NB-Varianten bleiben sh-redesign-pte.
   ========================================================================= */
.pte-wrap .pte-row{
  border-bottom:1px solid var(--sex-border);
  transition:background var(--sex-tr);
}
.pte-wrap .pte-row:hover{
  background:var(--sex-surf-2);
}
.pte-wrap .pte-cell{
  color:var(--sex-text);
}

/* Zahl-Spalten in Mono, rechtsbuendig, tabellarische Ziffern (Beträge ablesbar).
   Nur Optik — die funktionale Faerbung (z.B. negativer DB) kommt aus dem Bestand. */
.pte-wrap .pte-cell--unitPriceNet,
.pte-wrap .pte-cell--listPriceNet,
.pte-wrap .pte-cell--purchasePriceNet,
.pte-wrap .pte-cell--lineTotalNet,
.pte-wrap .pte-cell--lineTotalGross,
.pte-wrap .pte-cell--contribution,
.pte-wrap .pte-cell--quantity,
.pte-wrap .pte-cell--quantityOrdered,
.pte-wrap .pte-cell--quantityDelivered,
.pte-wrap .pte-cell--quantityOpen,
.pte-wrap .pte-cell--markupPercent,
.pte-wrap .pte-cell--supplierDiscountPercent,
.pte-wrap .pte-cell--discountPercent,
.pte-wrap .pte-cell--taxRate{
  font-family:var(--sex-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
  letter-spacing:-.01em;
}
/* Gesamt-Spalte einen Tick kraeftiger — der Blickanker je Zeile */
.pte-wrap .pte-cell--lineTotalNet,
.pte-wrap .pte-cell--lineTotalGross{
  color:var(--sex-ink);
  font-weight:700;
}

/* Editierbare Zelle — leiser Hover-Hint + klarer Fokus-Ring (additiv) */
.pte-wrap .pte-cell--editable:hover{
  background:var(--sex-surf-2);
  border-radius:var(--sex-r-xs);
}
.pte-wrap .pte-cell--editable:focus{
  outline:2px solid var(--sex-accent);
  outline-offset:-2px;
  border-radius:3px;
  background:var(--sex-surface);
  box-shadow:inset 0 0 0 1px var(--sex-accent);
}

/* =========================================================================
   3) ZEILEN-AKTIONEN (.pte-cell--actions, .pte-btn--icon, .pte-gr-acts)
   Icon-Buttons Plus / Duplizieren / Loeschen / Mehr: ruhend muted, dezent
   sichtbar, beim Zeilen-Hover hervortretend, Hover/Fokus -> accent.
   ========================================================================= */
.pte-wrap .pte-cell--actions{
  text-align:right;
  white-space:nowrap;
}

/* Aktions-Icons im Ruhezustand: gedaempft, leicht transparent */
.pte-wrap .pte-cell--actions .pte-btn--icon{
  border:1px solid transparent;
  background:transparent;
  color:var(--sex-muted);
  border-radius:var(--sex-r-xs);
  opacity:.55;
  transition:opacity var(--sex-tr),color var(--sex-tr),
             background var(--sex-tr),border-color var(--sex-tr);
}
/* Beim Ueberfahren der Zeile treten die Aktionen klar hervor */
.pte-wrap .pte-row:hover .pte-cell--actions .pte-btn--icon{
  opacity:1;
}
/* Einzelnes Icon: warmer Akzent-Hint */
.pte-wrap .pte-cell--actions .pte-btn--icon:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
  opacity:1;
}
.pte-wrap .pte-cell--actions .pte-btn--icon:focus-visible{
  outline:none;
  box-shadow:var(--sex-ring);
  color:var(--sex-accent);
  opacity:1;
}
.pte-wrap .pte-cell--actions .pte-btn--icon:active{
  transform:scale(.92);
}

/* Loeschen-Icon: erst beim Hover roter Akzent (kein Dauer-Alarm in der Zeile) */
.pte-wrap .pte-cell--actions .pte-btn--icon.pte-btn--danger:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent-700);
}

/* Gruppen-Header-Aktionen (Aufklappen / Gruppenmenue): folgen demselben Muster.
   Sichtbarkeit (opacity 0 -> 1 beim Gruppen-Hover) steuert der Bestand. */
.pte-wrap .pte-gr-acts .pte-btn--icon{
  border:1px solid transparent;
  background:transparent;
  color:var(--sex-muted);
  border-radius:var(--sex-r-xs);
  transition:color var(--sex-tr),background var(--sex-tr),border-color var(--sex-tr);
}
.pte-wrap .pte-gr-acts .pte-btn--icon:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
}
.pte-wrap .pte-gr-acts .pte-btn--icon:focus-visible{
  outline:none;
  box-shadow:var(--sex-ring);
  color:var(--sex-accent);
}

/* Add-Bar-Icon-Buttons in Systemgruppen (Aufklappen etc.) — dezent angeglichen */
.pte-wrap .pte-row--system-group .pte-btn--icon:hover,
.pte-wrap .pte-cell--system-group .pte-btn--icon:hover{
  background:var(--sex-accent-soft);
  border-color:var(--sex-accent);
  color:var(--sex-accent);
}

/* Drag-Handle in der Zeile: ruhend kaum sichtbar, beim Zeilen-Hover spuerbar */
.pte-wrap .pte-cell--drag .pte-drag-handle{
  color:var(--sex-border-2);
  border-radius:var(--sex-r-xs);
  transition:color var(--sex-tr),background var(--sex-tr);
}
.pte-wrap .pte-row:hover .pte-cell--drag .pte-drag-handle{
  color:var(--sex-muted);
}
.pte-wrap .pte-cell--drag .pte-drag-handle:hover{
  color:var(--sex-accent);
  background:var(--sex-accent-soft);
}


/* ===== gemergt aus sh-redesign-ed-docs.css ===== */
/* =========================================================================
   ServiceHub - Redesign: Belegeditor "Dokumente / Verknuepfungen / Verlauf"
   (ed-docs)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. Re-Skin von drei Tab-Inhalten im gemeinsamen
   Belegeditor (Angebot - Auftrag - Rechnung - Lieferschein - Gutschrift) plus
   der eingebetteten PDF-Vorschau-Spalte. Styled die ECHTEN Selektoren aus
   doc-editor-layout.js und doc-editor-layout.css:

     Dokumente-Tab (_renderDocumentsTab):
       .del-documents
       .del-doc-uploadbox (+ __icon / __title / __hint / __progress / is-dragover)
       .del-doc-list (+ __loading / __empty / __error)
       .del-doc-item (+ __icon / __body / __name / __meta / __attach / __actions)
       .del-doc-btn (+ --danger)

     Verknuepfungen-Tab (_renderLinksTab):
       .del-overview-grid / .del-card (Karten)
       .del-link-list / li / a (Verknuepfungsliste)

     Verlauf-Tab (_renderHistoryTab):
       .del-history / .del-history-list / .del-history-item
       .del-history-date / .del-history-change / .del-history-actor
       (als weiche Zeitleiste neu gerahmt)

     PDF-Vorschau (rechte Spalte, BLEIBT sichtbar - nur schoener):
       .del-preview / .del-preview-header / .del-preview-toolbar
       .del-preview-content / .del-preview-placeholder

   WICHTIG: doc-editor-layout.js injiziert beim Rendern der History inline
   style-Attribute (Hellfarben, kein Dark-Mode). Diese Schicht gewinnt durch
   hoehere Spezifitaet (.del-wrap-Scope) und bringt die warme Palette plus
   Dark-Mode zurueck - ohne Wust von Wichtig-Markern.

   KEINE Funktions-, Markup- oder Logik-Aenderung. Nichts wird versteckt (kein
   display none auf Buttons, Tabs, Feldern, Zeilen, Vorschau). Reines CSS.

   Tokens lokal als --sxd- auf die Editor-Container gescoped (ladereihenfolge-
   unabhaengig). Light plus Dark via data-theme. Globale Basis nicht angefasst.
   ========================================================================= */



/* ---------- Tokens (Light) - auf die Editor-Container gescoped ---------- */
.del-wrap .del-tab-content,
.del-wrap .del-preview {
  --sxd-accent: #E73D25;
  --sxd-accent-700: #C5331E;
  --sxd-accent-soft: #FCEDE7;
  --sxd-accent-line: rgba(231, 61, 37, .22);
  --sxd-honey: #D99A2B;
  --sxd-honey-soft: #FBF0DA;
  --sxd-ok: #16A34A;
  --sxd-ok-soft: #E9F8EF;
  --sxd-warn: #C7791A;
  --sxd-warn-soft: #FBF1E0;
  --sxd-info: #2F6BD6;
  --sxd-info-soft: #EAF1FC;

  --sxd-bg: #FAF6F2;
  --sxd-surface: #FFFFFF;
  --sxd-surf-2: #F6F1EB;
  --sxd-surf-3: #EFE8E0;
  --sxd-field: #F8F4EF;

  --sxd-ink: #231C17;
  --sxd-text: #463D35;
  --sxd-text-2: #6B6157;
  --sxd-muted: #9A8F84;
  --sxd-border: #EEE5DC;
  --sxd-border-2: #E3D9CE;

  --sxd-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sxd-font-body: 'Figtree', system-ui, sans-serif;
  --sxd-font-mono: 'Space Mono', ui-monospace, monospace;

  --sxd-r-xs: 7px;
  --sxd-r-sm: 9px;
  --sxd-r-md: 12px;
  --sxd-r-lg: 16px;
  --sxd-r-pill: 999px;

  --sxd-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sxd-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sxd-shadow-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --sxd-ring: 0 0 0 3px var(--sxd-accent-soft);
  --sxd-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap .del-tab-content,
[data-theme="dark"] .del-wrap .del-preview {
  --sxd-accent: #F2543B;
  --sxd-accent-700: #E0432B;
  --sxd-accent-soft: rgba(242, 84, 59, .16);
  --sxd-accent-line: rgba(242, 84, 59, .30);
  --sxd-honey: #E6AE4A;
  --sxd-honey-soft: rgba(230, 174, 74, .16);
  --sxd-ok: #3BC07A;
  --sxd-ok-soft: rgba(59, 192, 122, .15);
  --sxd-warn: #E5A33C;
  --sxd-warn-soft: rgba(229, 163, 60, .15);
  --sxd-info: #5C8FE8;
  --sxd-info-soft: rgba(92, 143, 232, .16);

  --sxd-bg: #15120F;
  --sxd-surface: #1E1A16;
  --sxd-surf-2: #241F1A;
  --sxd-surf-3: #2C2620;
  --sxd-field: #211C18;

  --sxd-ink: #F6F1EC;
  --sxd-text: #E2D8CE;
  --sxd-text-2: #B3A99E;
  --sxd-muted: #8C8175;
  --sxd-border: #2E2822;
  --sxd-border-2: #3A332B;

  --sxd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sxd-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sxd-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --sxd-ring: 0 0 0 3px var(--sxd-accent-soft);
}

/* =========================================================================
   1) DOKUMENTE-TAB - Container
   ========================================================================= */

.del-wrap .del-tab-content .del-documents {
  gap: 18px;
  font-family: var(--sxd-font-body);
  color: var(--sxd-text);
}

/* Hinweis-Zeile "Beleg muss zuerst gespeichert werden ..." */
.del-wrap .del-tab-content .del-documents > .del-muted {
  margin: 0;
  padding: 18px 20px;
  background: var(--sxd-surf-2);
  border: 1px dashed var(--sxd-border-2);
  border-radius: var(--sxd-r-md);
  color: var(--sxd-text-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* =========================================================================
   2) DOKUMENTE-TAB - Upload-Ablage (Drag and Drop)
   ========================================================================= */

.del-wrap .del-tab-content .del-doc-uploadbox {
  border: 2px dashed var(--sxd-border-2);
  border-radius: var(--sxd-r-lg);
  padding: 30px 22px;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--sxd-surf-2), var(--sxd-surface) 72%);
  cursor: pointer;
  transition: border-color var(--sxd-tr), background var(--sxd-tr), box-shadow var(--sxd-tr), transform var(--sxd-tr);
}
.del-wrap .del-tab-content .del-doc-uploadbox:hover,
.del-wrap .del-tab-content .del-doc-uploadbox:focus,
.del-wrap .del-tab-content .del-doc-uploadbox.is-dragover {
  border-color: var(--sxd-accent);
  background: var(--sxd-accent-soft);
  box-shadow: var(--sxd-shadow-soft);
  outline: none;
}
.del-wrap .del-tab-content .del-doc-uploadbox.is-dragover {
  transform: translateY(-1px);
}

.del-wrap .del-tab-content .del-doc-uploadbox__icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
  filter: saturate(.9);
}
.del-wrap .del-tab-content .del-doc-uploadbox__title {
  font-family: var(--sxd-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sxd-ink);
  margin-bottom: 5px;
}
.del-wrap .del-tab-content .del-doc-uploadbox__hint {
  font-size: 12.5px;
  color: var(--sxd-muted);
  line-height: 1.5;
}
.del-wrap .del-tab-content .del-doc-uploadbox__progress {
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: var(--sxd-r-sm);
  background: var(--sxd-info-soft);
  color: var(--sxd-info);
  border: 1px solid var(--sxd-accent-line);
  border-color: color-mix(in srgb, var(--sxd-info) 30%, transparent);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sxd-font-body);
}

/* =========================================================================
   3) DOKUMENTE-TAB - Liste plus Zustaende
   ========================================================================= */

.del-wrap .del-tab-content .del-doc-list {
  gap: 10px;
}

.del-wrap .del-tab-content .del-doc-list__loading,
.del-wrap .del-tab-content .del-doc-list__empty,
.del-wrap .del-tab-content .del-doc-list__error {
  padding: 22px 18px;
  text-align: center;
  font-size: 13px;
  border-radius: var(--sxd-r-md);
  background: var(--sxd-surf-2);
  border: 1px solid var(--sxd-border);
  color: var(--sxd-muted);
}
.del-wrap .del-tab-content .del-doc-list__error {
  color: var(--sxd-accent);
  background: var(--sxd-accent-soft);
  border-color: var(--sxd-accent-line);
}

/* Beleg-Datei-Zeile als weiche Karte */
.del-wrap .del-tab-content .del-doc-item {
  gap: 14px;
  padding: 13px 16px;
  background: var(--sxd-surface);
  border: 1px solid var(--sxd-border);
  border-radius: var(--sxd-r-md);
  box-shadow: var(--sxd-shadow-sm);
  transition: border-color var(--sxd-tr), box-shadow var(--sxd-tr), transform var(--sxd-tr);
}
.del-wrap .del-tab-content .del-doc-item:hover {
  border-color: var(--sxd-accent-line);
  box-shadow: var(--sxd-shadow-soft);
  transform: translateY(-1px);
}

.del-wrap .del-tab-content .del-doc-item__icon {
  font-size: 22px;
  line-height: 1;
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sxd-r-sm);
  background: var(--sxd-surf-2);
  border: 1px solid var(--sxd-border);
}

.del-wrap .del-tab-content .del-doc-item__name {
  font-family: var(--sxd-font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sxd-ink);
  margin-bottom: 3px;
}
.del-wrap .del-tab-content .del-doc-item__meta {
  font-size: 11.5px;
  color: var(--sxd-muted);
  font-family: var(--sxd-font-mono);
}

/* "Mit Beleg per E-Mail senden"-Haekchen */
.del-wrap .del-tab-content .del-doc-item__attach {
  color: var(--sxd-text-2) !important;
  font-size: 12px !important;
}
.del-wrap .del-tab-content .del-doc-item__attach input[type="checkbox"] {
  accent-color: var(--sxd-accent);
  width: 14px;
  height: 14px;
}

/* Aktions-Knoepfe (Download / Loeschen) */
.del-wrap .del-tab-content .del-doc-btn {
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--sxd-font-body);
  color: var(--sxd-text);
  background: var(--sxd-surface);
  border: 1px solid var(--sxd-border-2);
  border-radius: var(--sxd-r-pill);
  transition: background var(--sxd-tr), border-color var(--sxd-tr), color var(--sxd-tr), transform var(--sxd-tr);
}
.del-wrap .del-tab-content .del-doc-btn:hover {
  background: var(--sxd-accent-soft);
  border-color: var(--sxd-accent-line);
  color: var(--sxd-accent);
  transform: translateY(-1px);
}
.del-wrap .del-tab-content .del-doc-btn:active {
  transform: scale(.98);
}
.del-wrap .del-tab-content .del-doc-btn--danger {
  color: var(--sxd-accent-700);
}
.del-wrap .del-tab-content .del-doc-btn--danger:hover {
  background: var(--sxd-accent-soft);
  border-color: var(--sxd-accent-line);
  color: var(--sxd-accent-700);
}

/* =========================================================================
   4) VERKNUEPFUNGEN-TAB - Karten plus Verknuepfungsliste
   ========================================================================= */

.del-wrap .del-tab-content .del-overview-grid {
  gap: 16px;
}

/* Karte (auch fuer den Verknuepfungen-Tab genutzt) - warm gerahmt */
.del-wrap .del-tab-content .del-card {
  background: var(--sxd-surface);
  border: 1px solid var(--sxd-border);
  border-radius: var(--sxd-r-lg);
  box-shadow: var(--sxd-shadow-soft);
  padding: 18px 20px;
  font-family: var(--sxd-font-body);
  color: var(--sxd-text);
  transition: border-color var(--sxd-tr), box-shadow var(--sxd-tr);
}
.del-wrap .del-tab-content .del-card:hover {
  border-color: var(--sxd-border-2);
}
.del-wrap .del-tab-content .del-card h4 {
  margin: 0 0 14px;
  padding: 0 0 12px;
  font-family: var(--sxd-font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sxd-ink);
  border-bottom: 1px solid var(--sxd-border);
}

.del-wrap .del-tab-content .del-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.del-wrap .del-tab-content .del-link-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--sxd-border);
}
.del-wrap .del-tab-content .del-link-list li:last-child {
  border-bottom: none;
}
.del-wrap .del-tab-content .del-link-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sxd-accent);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: color var(--sxd-tr);
}
.del-wrap .del-tab-content .del-link-list a:hover {
  color: var(--sxd-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   5) VERLAUF-TAB - Zeitleiste
   --------------------------------------------------------------------------
   _renderHistoryTab() setzt inline style-Attribute (Hellfarben). Hoehere
   Spezifitaet ueberschreibt sie warm plus dark; gefaerbte Status-Badges
   bleiben unberuehrt (semantisch).
   ========================================================================= */

.del-wrap .del-tab-content .del-history {
  font-family: var(--sxd-font-body);
  color: var(--sxd-text);
}

.del-wrap .del-tab-content .del-history-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 4px;
  position: relative;
}

/* Eintrag als Zeitleisten-Knoten mit linker Fuehrungslinie und Punkt */
.del-wrap .del-tab-content .del-history-item {
  position: relative;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  padding: 10px 4px 16px 24px !important;
  border-bottom: none !important;
  border-left: 2px solid var(--sxd-border);
}
.del-wrap .del-tab-content .del-history-item:last-child {
  border-left-color: transparent;
  padding-bottom: 2px !important;
}
.del-wrap .del-tab-content .del-history-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 13px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sxd-surface);
  border: 2px solid var(--sxd-border-2);
}
/* Juengster Eintrag (erster in der Liste) hervorgehoben */
.del-wrap .del-tab-content .del-history-item:first-child::before {
  background: var(--sxd-accent);
  border-color: var(--sxd-accent);
  box-shadow: 0 0 0 4px var(--sxd-accent-soft);
}

.del-wrap .del-tab-content .del-history-date {
  color: var(--sxd-muted) !important;
  font-family: var(--sxd-font-mono);
  font-size: 11.5px !important;
}
.del-wrap .del-tab-content .del-history-actor {
  color: var(--sxd-text-2) !important;
  font-size: 12px !important;
}

/* =========================================================================
   6) EINGEBETTETE PDF-VORSCHAU (rechte Spalte) - BLEIBT sichtbar, nur schoener
   --------------------------------------------------------------------------
   Reine Optik: weiche Karte, ruhige Toolbar, gepolsterter Inhalt. KEIN
   display none, KEIN erzwungenes Ein- oder Ausblenden - die vorhandene
   Aufklapp- bzw. Kollaps-Logik (.del-preview--collapsed) bleibt unberuehrt.
   ========================================================================= */

.del-wrap .del-preview {
  background: var(--sxd-surf-2);
  border-left: 1px solid var(--sxd-border);
  font-family: var(--sxd-font-body);
  color: var(--sxd-text);
}

.del-wrap .del-preview .del-preview-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--sxd-border);
  background: var(--sxd-surface);
}
.del-wrap .del-preview .del-preview-header h3 {
  margin: 0;
  font-family: var(--sxd-font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sxd-ink);
}

.del-wrap .del-preview .del-preview-toolbar {
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sxd-border);
  background: var(--sxd-surface);
}

/* Umschalt-Knoepfe Kundensicht / Intern in der Vorschau-Toolbar */
.del-wrap .del-preview .del-preview-toolbar .del-btn {
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--sxd-font-body);
  color: var(--sxd-text-2);
  background: var(--sxd-surf-2);
  border: 1px solid var(--sxd-border-2);
  border-radius: var(--sxd-r-pill);
  transition: background var(--sxd-tr), border-color var(--sxd-tr), color var(--sxd-tr);
}
.del-wrap .del-preview .del-preview-toolbar .del-btn:hover {
  border-color: var(--sxd-accent-line);
  color: var(--sxd-accent);
  background: var(--sxd-accent-soft);
}
.del-wrap .del-preview .del-preview-toolbar .del-btn.del-btn--active {
  background: var(--sxd-accent);
  border-color: var(--sxd-accent);
  color: #fff;
}

/* Eckiger Ein-/Ausklapp-Knopf im Vorschau-Kopf */
.del-wrap .del-preview .del-preview-header .del-btn--icon {
  border: 1px solid var(--sxd-border-2);
  background: var(--sxd-surf-2);
  color: var(--sxd-text-2);
  border-radius: var(--sxd-r-sm);
  transition: background var(--sxd-tr), border-color var(--sxd-tr), color var(--sxd-tr);
}
.del-wrap .del-preview .del-preview-header .del-btn--icon:hover {
  border-color: var(--sxd-accent-line);
  color: var(--sxd-accent);
  background: var(--sxd-accent-soft);
}

/* Vorschau-Inhalt: weiche Buehne fuer das gerahmte Belegblatt */
.del-wrap .del-preview .del-preview-content {
  padding: 14px;
  background:
    radial-gradient(130% 80% at 50% 0%, var(--sxd-surf-2), var(--sxd-surf-3) 100%);
}

.del-wrap .del-preview .del-preview-placeholder {
  color: var(--sxd-muted);
  font-size: 13px;
}

/* Das eingebettete Belegblatt als weiche, erhabene Karte */
.del-wrap .del-preview .del-preview-content .del-preview-doc {
  border: 1px solid var(--sxd-border);
  border-radius: var(--sxd-r-md);
  box-shadow: var(--sxd-shadow-lg);
  overflow: hidden;
}


/* ===== gemergt aus sh-redesign-rail-cards.css ===== */
/* =========================================================================
   ServiceHub - Redesign: Belegeditor RECHTE INFO-LEISTE (rail-cards)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. Re-Skin der rechten Uebersicht-Leiste im
   gemeinsamen Belegeditor (Angebot - Auftrag - Rechnung - Lieferschein -
   Gutschrift). Styled die ECHTEN Selektoren aus order-editor-integration.js
   (_loadDetailSidebar), gemountet in #oei-detail-sidebar:

     .oei-detail-sidebar                        Rail-Container (rechte Spalte)
     .oei-sidebar-title                         Karten-Ueberschrift "Uebersicht"
     .oei-sidebar-card / __left / __icon /      verlinkte Zaehler-Kacheln
       __label / __right / __amount / __count   (Rechnungen, Zeiteintraege,
                                                  Berichte, Dokumente, Techniker)
     .oei-sidebar-gauge / __title / __value /   "Offene Rechnungen"-Block
       __bar / __fill / __label                 mit Balken + Summe
     .oei-sidebar-meta / __label                Summenblock Netto/MwSt/Brutto/
                                                  Verrechnet
     .oei-sidebar-loading                       Ladehinweis

   Die Status-Aktion neben der Leiste (Statusbar) liegt in der eigenen Schicht
   sh-statusbar.css und wird hier nicht angetastet. Diese Datei verfeinert
   ausschliesslich die Info-Karten der rechten Leiste.

   WARUM diese Datei: die Basis in sh-design-system.css faerbt die Leiste in
   kuehlem Blau/Grau (Hover Blau, kalte Neutraltoene). Diese Schicht hebt sie
   per hoeherer Spezifitaet (Container-Scope) auf die warme ELMETIC-Palette,
   ohne die Basis zu loeschen und ohne aufdringliche Wichtig-Marker.

   KEINE Funktions-, Markup- oder Logik-Aenderung. Nichts wird versteckt (kein
   display none auf Buttons, Tabs, Feldern oder Zeilen). Reines CSS.

   Tokens lokal als --sex-Praefix auf den Rail-Container gescoped
   (ladereihenfolge-unabhaengig). Light plus Dark via data-theme. Globale Basis
   (Punkt-btn, Punkt-badge, Punkt-data-table, Doppelpunkt-root) NICHT angefasst.
   ========================================================================= */

/* ---------- Tokens (Light) - auf den Rail-Container gescoped ---------- */
.oei-detail-sidebar {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-honey-soft: #FBF0DA;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-info-soft: #EAF1FC;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .oei-detail-sidebar {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-honey-soft: rgba(230, 174, 74, .16);
  --sex-ok: #3BC07A;
  --sex-ok-soft: rgba(59, 192, 122, .15);
  --sex-warn: #E5A33C;
  --sex-warn-soft: rgba(229, 163, 60, .15);
  --sex-info: #5C8FE8;
  --sex-info-soft: rgba(92, 143, 232, .16);

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
}

/* =========================================================================
   1) Rail-Container - warme Flaeche, weicher Trenner zur Mitte
   ========================================================================= */

.oei-detail-sidebar {
  border-left: 1px solid var(--sex-border);
  background: var(--sex-bg);
  padding: 16px;
  gap: 12px;
  font-family: var(--sex-font-body);
  color: var(--sex-text);
}

/* Eigene Scrollbar in warmem Ton, falls die Leiste scrollt */
.oei-detail-sidebar::-webkit-scrollbar {
  width: 8px;
}
.oei-detail-sidebar::-webkit-scrollbar-thumb {
  background: var(--sex-border-2);
  border-radius: var(--sex-r-pill);
}

/* =========================================================================
   2) Karten-Ueberschrift (.oei-sidebar-title)
   Dezenter, ruhiger Kopf in der Headline-Schrift.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-title {
  font-family: var(--sex-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sex-muted);
  margin: 2px 2px 2px;
}

/* =========================================================================
   3) Verlinkte Zaehler-Kacheln (.oei-sidebar-card)
   Weiche Token-Karte; Hover hebt warm an statt kuehl-blau.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-card {
  padding: 11px 13px;
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-shadow-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.oei-detail-sidebar .oei-sidebar-card:hover {
  background: var(--sex-surface);
  border-color: var(--sex-accent-line);
  box-shadow: var(--sex-shadow-soft);
  transform: translateY(-1px);
}
.oei-detail-sidebar .oei-sidebar-card:active {
  transform: translateY(0);
}

.oei-detail-sidebar .oei-sidebar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--sex-r-sm);
  background: var(--sex-accent-soft);
  color: var(--sex-accent);
  font-size: 16px;
  line-height: 1;
  transition: background var(--sex-tr), color var(--sex-tr);
}
.oei-detail-sidebar .oei-sidebar-card__icon svg {
  width: 17px;
  height: 17px;
}
.oei-detail-sidebar .oei-sidebar-card:hover .oei-sidebar-card__icon {
  background: var(--sex-accent);
  color: #fff;
}

.oei-detail-sidebar .oei-sidebar-card__label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--sex-text);
}

/* Geldbetrag der Kachel (z. B. Rechnungssumme) in Mono, gedaempft */
.oei-detail-sidebar .oei-sidebar-card__amount {
  font-family: var(--sex-font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--sex-text-2);
}

/* Zaehler-Badge: gefuellt accent bei Inhalt, gedaempft muted bei 0.
   Default = accent (greift fuer alle nicht-leeren Kacheln). */
.oei-detail-sidebar .oei-sidebar-card__count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--sex-r-pill);
  background: var(--sex-accent);
  color: #fff;
  font-family: var(--sex-font-mono);
  font-size: .7rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(231, 61, 37, .20);
}

/* =========================================================================
   4) "Offene Rechnungen"-Block (.oei-sidebar-gauge)
   Warme Karte, Summe gross in Mono, Balken in weicher Schiene.
   Die Ampelfarbe von Wert und Fuellung kommt inline aus dem JS (rot/gelb/
   gruen je Auslastung) und bleibt bewusst unangetastet = semantisch.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-gauge {
  padding: 14px;
  background: var(--sex-surf-2);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-shadow-sm);
  margin-top: 2px;
}
.oei-detail-sidebar .oei-sidebar-gauge__title {
  font-family: var(--sex-font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sex-muted);
  margin: 0 0 8px;
}
.oei-detail-sidebar .oei-sidebar-gauge__value {
  font-family: var(--sex-font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 9px;
}
.oei-detail-sidebar .oei-sidebar-gauge__bar {
  height: 7px;
  background: var(--sex-surf-3);
  border-radius: var(--sex-r-pill);
}
.oei-detail-sidebar .oei-sidebar-gauge__fill {
  border-radius: var(--sex-r-pill);
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}
.oei-detail-sidebar .oei-sidebar-gauge__label {
  font-family: var(--sex-font-mono);
  font-size: .64rem;
  color: var(--sex-muted);
  margin-top: 6px;
}

/* =========================================================================
   5) Summenblock (.oei-sidebar-meta) - Netto / MwSt / Brutto / Verrechnet
   Beschriftung gedaempft, Werte in Mono am rechten Rand. Brutto (vorletzte
   Zeile) bekommt eine ruhige Hervorhebung als Hauptsumme.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-meta {
  gap: 7px;
  padding: 14px;
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-shadow-sm);
  margin-top: 2px;
}
.oei-detail-sidebar .oei-sidebar-meta > div {
  font-size: .85rem;
  align-items: baseline;
}
.oei-detail-sidebar .oei-sidebar-meta > div + div {
  padding-top: 7px;
  border-top: 1px dashed var(--sex-border);
}
.oei-detail-sidebar .oei-sidebar-meta__label {
  color: var(--sex-muted);
  font-weight: 500;
}
.oei-detail-sidebar .oei-sidebar-meta > div > strong {
  font-family: var(--sex-font-mono);
  font-weight: 700;
  color: var(--sex-ink);
}

/* Brutto = vorletzte Zeile: als Hauptsumme leicht betont (Akzent-Wert,
   etwas groesser). Rein optische Gewichtung, keine Strukturaenderung. */
.oei-detail-sidebar .oei-sidebar-meta > div:nth-last-child(2) > strong {
  font-size: 1.02rem;
  color: var(--sex-accent);
}

/* =========================================================================
   6) Ladehinweis (.oei-sidebar-loading)
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-loading {
  color: var(--sex-muted);
  font-size: .85rem;
  font-style: italic;
  padding: 22px 0;
}


/* ===== gemergt aus sh-redesign-rail-chatter.css ===== */
/* =========================================================================
   ServiceHub Redesign — Block rail-chatter2
   REIN OPTISCH. Rechte Leiste des Dokument-Editors (Angebot/Auftrag/Rechnung/
   Lieferschein/Gutschrift): Verlauf und Notizen (.sh-chatter), Follower-Strip,
   Notiz-Composer, Aktivitaet planen, Aktivitaeten-Liste (Status-Timeline /
   Naechste Schritte). Warme ELMETIC-Palette, Token-Felder, Pill-Buttons,
   Timeline mit Punkt-Linie.

   Keine Funktionsaenderung. Kein display:none auf Buttons/Tabs/Felder/Zeilen.
   Strikt gescoped auf .sh-chatter (das Panel rendert ShChatter.mount).
   Eigene Tokens lokal auf .sh-chatter gescoped, damit ladereihenfolge-
   unabhaengig (analog sh-redesign-02-shell.css). Globale Basis NICHT
   redefiniert. Light und Dark via [data-theme="dark"].

   Kommentar-Hygiene: in diesem Block keine Stern-Slash-Paare im Fliesstext.
   ========================================================================= */



/* ---------- lokale Tokens (Light) auf das Panel gescoped ---------- */
.sh-chatter{
  --rc-accent:#E73D25; --rc-accent-700:#C5331E; --rc-accent-soft:#FCEDE7;
  --rc-accent-line:rgba(231,61,37,.22);
  --rc-honey:#D99A2B; --rc-honey-soft:#FBF0DA;
  --rc-ok:#16A34A; --rc-ok-soft:#E9F8EF;
  --rc-warn:#C7791A; --rc-warn-soft:#FBF1E0;
  --rc-info:#2F6BD6; --rc-info-soft:#EAF1FC;
  --rc-bg:#FAF6F2; --rc-surface:#FFFFFF; --rc-surf-2:#F6F1EB; --rc-surf-3:#EFE8E0;
  --rc-ink:#231C17; --rc-text:#463D35; --rc-text-2:#6B6157; --rc-muted:#9A8F84;
  --rc-border:#EEE5DC; --rc-border-2:#E3D9CE; --rc-field:#F6F1EB;
  --rc-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rc-font-body:'Figtree',system-ui,sans-serif;
  --rc-font-mono:'Space Mono',ui-monospace,monospace;
  --rc-r-xs:7px; --rc-r-sm:9px; --rc-r-md:12px; --rc-r-lg:16px; --rc-r-pill:999px;
  --rc-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rc-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rc-ring:0 0 0 3px var(--rc-accent-soft);
  --rc-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .sh-chatter{
  --rc-accent:#F2543B; --rc-accent-700:#E0432B; --rc-accent-soft:rgba(242,84,59,.16);
  --rc-accent-line:rgba(242,84,59,.30);
  --rc-honey:#E6AE4A; --rc-honey-soft:rgba(230,174,74,.16);
  --rc-ok:#3BC07A; --rc-ok-soft:rgba(59,192,122,.15);
  --rc-warn:#E5A33C; --rc-warn-soft:rgba(229,163,60,.15);
  --rc-info:#5C8FE8; --rc-info-soft:rgba(92,143,232,.16);
  --rc-bg:#15120F; --rc-surface:#1E1A16; --rc-surf-2:#241F1A; --rc-surf-3:#2C2620;
  --rc-ink:#F6F1EC; --rc-text:#E2D8CE; --rc-text-2:#B3A99E; --rc-muted:#8C8175;
  --rc-border:#2E2822; --rc-border-2:#3A332B; --rc-field:#241F1A;
  --rc-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rc-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
}

/* ---------- Panel-Schale ---------- */
.sh-chatter{
  background:var(--rc-surface);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-lg);
  box-shadow:var(--rc-sh-md);
  font-family:var(--rc-font-body);
  font-size:.84rem;
  color:var(--rc-text);
  overflow:hidden;
}

/* ---------- Kopf: Titel + Tabs ---------- */
.sh-chatter__head{
  padding:.7rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:linear-gradient(180deg,var(--rc-surf-2),var(--rc-surface));
}
.sh-chatter__title{
  font-family:var(--rc-font-head);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:-.01em;
  color:var(--rc-ink);
}
.sh-chatter__tabs{
  gap:.2rem;
  background:var(--rc-surf-2);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-pill);
  padding:3px;
}
.sh-chatter__tab{
  border-radius:var(--rc-r-pill);
  padding:.28rem .7rem;
  font-family:var(--rc-font-body);
  font-size:.74rem;
  font-weight:600;
  color:var(--rc-text-2);
  transition:var(--rc-tr);
}
.sh-chatter__tab:hover{ background:var(--rc-surface); color:var(--rc-ink); }
.sh-chatter__tab.is-active{
  background:var(--rc-surface);
  color:var(--rc-accent);
  box-shadow:var(--rc-sh-sm);
}

/* ---------- Follower-Strip ---------- */
.sh-chatter__followers{
  padding:.55rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:var(--rc-surf-2);
  gap:.55rem;
}
.sh-chatter__flabel{
  font-family:var(--rc-font-head);
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--rc-muted);
}
.sh-chatter__favatar{
  width:1.65rem; height:1.65rem;
  font-family:var(--rc-font-head);
  font-size:.6rem; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--rc-honey),var(--rc-accent));
  border:2px solid var(--rc-surface);
  margin-left:-5px;
  box-shadow:var(--rc-sh-sm);
}
.sh-chatter__favatar:first-child{ margin-left:0; }
.sh-chatter__fmore{ font-size:.7rem; color:var(--rc-text-2); margin-left:.3rem; }
.sh-chatter__fnone{ color:var(--rc-muted); font-size:.8rem; font-style:italic; }
.sh-chatter__fbtn{
  border:1px solid var(--rc-border-2);
  background:var(--rc-surface);
  padding:.28rem .7rem;
  border-radius:var(--rc-r-pill);
  font-size:.73rem;
  font-weight:600;
  color:var(--rc-text);
  transition:var(--rc-tr);
}
.sh-chatter__fbtn:hover{ border-color:var(--rc-accent); color:var(--rc-accent); }
.sh-chatter__fbtn.is-on{
  background:var(--rc-accent-soft);
  border-color:var(--rc-accent);
  color:var(--rc-accent);
}

/* ---------- Aktivitaet planen: Leiste + Knopf ---------- */
.sh-chatter__planbar{
  padding:.55rem .9rem;
  border-bottom:1px solid var(--rc-border);
  gap:.55rem;
}
.sh-chatter__planbtn{
  border:1px dashed var(--rc-border-2);
  background:transparent;
  padding:.34rem .8rem;
  border-radius:var(--rc-r-pill);
  font-size:.76rem;
  font-weight:700;
  color:var(--rc-accent);
  transition:var(--rc-tr);
}
.sh-chatter__planbtn:hover{
  background:var(--rc-accent-soft);
  border-color:var(--rc-accent);
  border-style:solid;
}

/* ---------- Aktivitaet planen: Formular ---------- */
.sh-chatter__planform{
  padding:.8rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:var(--rc-surf-2);
  gap:.5rem;
}
.sh-chatter__planinput{
  border:1px solid var(--rc-border-2);
  border-radius:var(--rc-r-sm);
  padding:.5rem .6rem;
  font-family:var(--rc-font-body);
  font-size:.82rem;
  color:var(--rc-ink);
  background:var(--rc-surface);
  transition:var(--rc-tr);
}
.sh-chatter__planinput::placeholder{ color:var(--rc-muted); }
.sh-chatter__planinput:focus{
  outline:none;
  border-color:var(--rc-accent);
  box-shadow:var(--rc-ring);
}

/* ---------- Notiz-Composer ---------- */
.sh-chatter__composer{
  padding:.8rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:var(--rc-surface);
}
/* Composer-Modus-Umschalter (Notiz / Nachricht) */
.sh-chatter__cmode{
  gap:.2rem;
  margin-bottom:.55rem;
  background:var(--rc-surf-2);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-pill);
  padding:3px;
}
.sh-chatter__cmode-btn{
  border-radius:var(--rc-r-pill);
  padding:.28rem .8rem;
  font-family:var(--rc-font-body);
  font-size:.74rem;
  font-weight:600;
  color:var(--rc-text-2);
  transition:var(--rc-tr);
}
.sh-chatter__cmode-btn.is-active{
  background:var(--rc-surface);
  color:var(--rc-accent);
  box-shadow:var(--rc-sh-sm);
}
.sh-chatter__input{
  border:1px solid var(--rc-border-2);
  border-radius:var(--rc-r-md);
  padding:.6rem .7rem;
  font-family:var(--rc-font-body);
  font-size:.84rem;
  color:var(--rc-ink);
  background:var(--rc-field);
  min-height:2.6rem;
  transition:var(--rc-tr);
}
.sh-chatter__input::placeholder{ color:var(--rc-muted); }
.sh-chatter__input:focus{
  outline:none;
  border-color:var(--rc-accent);
  background:var(--rc-surface);
  box-shadow:var(--rc-ring);
}

/* @Erwaehnungs-Chips + Menue */
.sh-chatter__mchip{
  padding:.12rem .2rem .12rem .55rem;
  border-radius:var(--rc-r-pill);
  background:var(--rc-accent-soft);
  color:var(--rc-accent);
  font-size:.73rem;
  font-weight:600;
}
.sh-chatter__mchip-x{ color:inherit; }
.sh-chatter__mention-menu{
  background:var(--rc-surface);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-md);
  box-shadow:var(--rc-sh-md);
  padding:.3rem;
}
.sh-chatter__mention-item{
  border-radius:var(--rc-r-sm);
  padding:.42rem .55rem;
  font-size:.82rem;
  color:var(--rc-ink);
  transition:var(--rc-tr);
}
.sh-chatter__mention-item:hover{ background:var(--rc-accent-soft); color:var(--rc-accent); }
.sh-chatter__mention-empty{ color:var(--rc-muted); font-size:.8rem; }

/* ---------- Aktivitaeten-Liste: Naechste Schritte ---------- */
.sh-chatter__actlist{ padding:.5rem .9rem; }
.sh-chatter__actitem{
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-md);
  background:var(--rc-surface);
  box-shadow:var(--rc-sh-sm);
  padding:.55rem .65rem;
  margin-bottom:.45rem;
  gap:.6rem;
  transition:var(--rc-tr);
}
.sh-chatter__actitem:hover{ border-color:var(--rc-accent-line); }
.sh-chatter__acticon{ font-size:1.05rem; }
.sh-chatter__actsummary{
  font-weight:600;
  color:var(--rc-ink);
  font-size:.82rem;
}
.sh-chatter__actwho{ color:var(--rc-text-2); font-size:.72rem; }
.sh-chatter__due{
  font-family:var(--rc-font-mono);
  font-size:.68rem;
  font-weight:700;
  padding:.1rem .45rem;
  border-radius:var(--rc-r-pill);
}
.sh-chatter__due.is-overdue{ background:var(--rc-accent-soft); color:var(--rc-accent); }
.sh-chatter__due.is-today{ background:var(--rc-honey-soft); color:var(--rc-warn); }
.sh-chatter__due.is-future{ background:var(--rc-surf-3); color:var(--rc-text-2); }

.sh-chatter__actbtn{
  border:1px solid var(--rc-border-2);
  background:var(--rc-surface);
  width:1.75rem; height:1.75rem;
  border-radius:var(--rc-r-sm);
  color:var(--rc-muted);
  transition:var(--rc-tr);
}
.sh-chatter__actbtn--done:hover{ background:var(--rc-ok-soft); border-color:var(--rc-ok); color:var(--rc-ok); }
.sh-chatter__actbtn--cancel:hover{ background:var(--rc-accent-soft); border-color:var(--rc-accent); color:var(--rc-accent); }

/* ---------- Verlaufs-Feed: Status-Timeline mit Punkt-Linie ---------- */
.sh-chatter__feed{
  padding:.7rem .9rem .8rem;
  position:relative;
}
.sh-chatter__loading,.sh-chatter__empty{
  color:var(--rc-muted);
  font-style:italic;
  padding:.7rem .2rem;
}

/* Feed-Eintrag als Timeline-Knoten: vertikale Linie + Punkt links */
.sh-chatter__item{
  position:relative;
  gap:.7rem;
  padding:.6rem 0 .6rem 1.3rem;
  border-bottom:none;
  align-items:flex-start;
}
.sh-chatter__item::before{
  content:"";
  position:absolute;
  left:5px; top:1.5rem; bottom:-.6rem;
  width:2px;
  background:var(--rc-border-2);
}
.sh-chatter__item:last-child::before{ display:none; }
.sh-chatter__item::after{
  content:"";
  position:absolute;
  left:0; top:1rem;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--rc-surface);
  border:2px solid var(--rc-border-2);
  box-shadow:0 0 0 3px var(--rc-surface);
}
/* Neueste Aktivitaet (erster Eintrag) = jetzt-Punkt in Akzent */
.sh-chatter__item:first-child::after{
  background:var(--rc-accent);
  border-color:var(--rc-accent);
  box-shadow:0 0 0 4px var(--rc-accent-soft);
}
/* erledigte Aktivitaets-Eintraege = ok-Punkt */
.sh-chatter__item--activity::after{
  background:var(--rc-ok);
  border-color:var(--rc-ok);
}
.sh-chatter__item:first-child.sh-chatter__item--activity::after{
  background:var(--rc-accent);
  border-color:var(--rc-accent);
}

/* Avatar im Feed */
.sh-chatter__avatar{
  width:2rem; height:2rem;
  font-family:var(--rc-font-head);
  font-size:.66rem; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--rc-accent),var(--rc-accent-700));
  box-shadow:var(--rc-sh-sm);
}
.sh-chatter__avatar--act{
  background:linear-gradient(135deg,var(--rc-honey),var(--rc-warn));
}
.sh-chatter__who{
  font-family:var(--rc-font-head);
  font-weight:700;
  font-size:.78rem;
  color:var(--rc-ink);
}
.sh-chatter__when{
  font-family:var(--rc-font-mono);
  color:var(--rc-muted);
  font-size:.68rem;
}
.sh-chatter__body{
  color:var(--rc-text);
  margin-top:.2rem;
  line-height:1.45;
}
.sh-chatter__act{
  color:var(--rc-text-2);
  margin-top:.2rem;
  font-size:.8rem;
}

/* ---------- Fehlerzustand ---------- */
.sh-chatter--err{ padding:1rem; color:var(--rc-accent); }

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .sh-chatter{ border-radius:var(--rc-r-md); }
}


/* ===== gemergt aus sh-redesign-ed-global.css ===== */
/* =========================================================================
   ServiceHub - Redesign: EDITOR-GLOBAL CHROME  (rein optisch, additiv)
   --------------------------------------------------------------------------
   Block "ed-global" der Beleg-Editor-Shell (Angebot - Auftrag - Rechnung -
   Lieferschein - Gutschrift). Diese Datei verfeinert die GLOBALE Chrome, die
   im Editor-Kontext aufpoppt, aber technisch an den document.body gehaengt
   wird (also nicht DOM-verschachtelt unter der Editor-Shell):

     1) Kontextmenue / Drei-Punkte-Dropdown  ->  #sh-context-menu
        (gebaut in internal.js showContextMenu(); rein inline gestylt, hier
         warm ueberfaerbt: Surface, weicher Pop-Schatten, runde Ecken)
     2) ShFeedback-Toasts  ->  .sh-toast-container / .sh-toast / .sh-toast--*
        (ink-Hintergrund, warmer Akzent je Typ; sh-feedback.js)
     3) ShFeedback-JS-Dialoge  ->  .sh-dialog-backdrop / .sh-dialog / .sh-btn
        (warmer Scrim + Blur, Surface-Panel, 16px-Radius, Pop-Schatten;
         dies sind die JS-gebauten confirm/prompt-Dialoge - NICHT die nativen
         <dialog>-Modale, die liegen bereits in sh-redesign-modals.css)
     4) Light- und Dark-Feinschliff der obigen Flaechen.

   HARTE REGELN dieser Datei:
   - NUR Optik. Keine Logik, kein Markup, kein display:none auf Buttons,
     Tabs, Felder oder Zeilen. Nichts Funktionales wird versteckt.
   - Tokens lokal auf die jeweiligen Container gescoped (--sex-...) ->
     ladereihenfolge-unabhaengig. Globale Basis (:root, .btn, .badge,
     .data-table) wird NICHT neu definiert.
   - Werte exakt wie sh-detail-drawer.css / theme.css (warme Palette).
   - Diese Container sind app-global (am body); wir scopen ueber ihre eigenen
     IDs bzw. Klassen, analog zu sh-redesign-modals.css (das ebenfalls per
     dialog.modal statt per Verschachtelung greift).
   ========================================================================= */



/* ---------------------------------------------------------------------------
   Tokens (Light) - lokal auf die ed-global Container gescoped
   --------------------------------------------------------------------------- */
#sh-context-menu,
.sh-toast-container,
.sh-dialog-backdrop {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-600: #D6371F;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-honey-soft: #FBF0DA;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-info-soft: #EAF1FC;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;
  --sex-field: #F6F1EB;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-pop: 0 24px 60px rgba(60, 40, 25, .20), 0 6px 18px rgba(120, 80, 50, .10);
  --sex-menu-sh: 0 14px 36px rgba(60, 40, 25, .16), 0 3px 10px rgba(120, 80, 50, .10);
  --sex-accent-sh: 0 5px 14px rgba(231, 61, 37, .28);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
  --sex-scrim: rgba(35, 25, 18, .40);

  /* dunkle Toast-Schale (ink-bg) */
  --sex-toast-bg: #2A211B;
  --sex-toast-border: rgba(255, 255, 255, .08);
  --sex-toast-ink: #F6F1EC;
  --sex-toast-sub: #C9BEB2;
}

/* ---------------------------------------------------------------------------
   Tokens (Dark)
   --------------------------------------------------------------------------- */
[data-theme="dark"] #sh-context-menu,
[data-theme="dark"] .sh-toast-container,
[data-theme="dark"] .sh-dialog-backdrop {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-600: #EC4A30;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-honey-soft: rgba(230, 174, 74, .16);
  --sex-ok: #3BC07A;
  --sex-ok-soft: rgba(59, 192, 122, .15);
  --sex-warn: #E5A33C;
  --sex-warn-soft: rgba(229, 163, 60, .15);
  --sex-info: #5C8FE8;
  --sex-info-soft: rgba(92, 143, 232, .16);

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;
  --sex-field: #241F1A;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-pop: 0 24px 60px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .4);
  --sex-menu-sh: 0 16px 40px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .4);
  --sex-accent-sh: 0 5px 14px rgba(242, 84, 59, .30);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-scrim: rgba(0, 0, 0, .55);

  --sex-toast-bg: #14110E;
  --sex-toast-border: rgba(255, 255, 255, .07);
  --sex-toast-ink: #F6F1EC;
  --sex-toast-sub: #B3A99E;
}

/* ===========================================================================
   1) Kontextmenue / Drei-Punkte-Dropdown   (#sh-context-menu)
   ---------------------------------------------------------------------------
   internal.js setzt die Grundstruktur per inline-Style (background, border,
   radius, shadow, padding ueber --elmetic-* Fallbacks). Wir ueberfaerben hier
   warm. Position/left/top/z-index/min-width bleiben unangetastet (kommen
   inline) - wir setzen nur Optik.
   =========================================================================== */
#sh-context-menu {
  background: var(--sex-surface) !important;
  border: 1px solid var(--sex-border) !important;
  border-radius: var(--sex-r-md) !important;
  box-shadow: var(--sex-menu-sh) !important;
  padding: 6px !important;
  font-family: var(--sex-font-body);
  color: var(--sex-text);
  overflow: hidden;
}

/* sanftes Auftauchen - rein dekorativ */
@keyframes sex-menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #sh-context-menu { animation: sex-menu-pop .14s cubic-bezier(.2, .7, .3, 1) both; }
}

/* Menue-Zeilen: internal.js baert div-Zeilen (inline padding 7px 16px).
   Wir runden, geben warmen Text + setzen den Hover (JS setzt Hover-bg inline
   per mouseenter; wir definieren die Ruhefarben). Direkte Kinder-Divs sind die
   Zeilen bzw. Separatoren. */
#sh-context-menu > div {
  border-radius: var(--sex-r-sm);
  color: var(--sex-text) !important;
  font-family: var(--sex-font-body);
  font-size: 13px;
  transition: background var(--sex-tr), color var(--sex-tr);
}
/* das Icon-Span links */
#sh-context-menu > div > span:first-child {
  color: var(--sex-muted);
}
/* Hover/Focus (ergaenzt den inline gesetzten Hover-bg um warme Optik) */
#sh-context-menu > div:hover {
  background: var(--sex-accent-soft) !important;
  color: var(--sex-accent) !important;
}
#sh-context-menu > div:hover > span:first-child {
  color: var(--sex-accent);
}

/* Separator-Zeile (internal.js: 1px hohes div). Wir faerben die Trennlinie
   warm; erkennbar an der inline height:1px. */
#sh-context-menu > div[style*="height:1px"],
#sh-context-menu > div[style*="height: 1px"] {
  background: var(--sex-border) !important;
  border-radius: 0;
}
#sh-context-menu > div[style*="height:1px"]:hover,
#sh-context-menu > div[style*="height: 1px"]:hover {
  background: var(--sex-border) !important;
}

/* ===========================================================================
   2) ShFeedback-Toasts   (.sh-toast-container / .sh-toast / .sh-toast--*)
   ---------------------------------------------------------------------------
   Dunkle ink-Schale mit warmem Akzentstreifen je Typ. Basisgeometrie
   (Position des Containers, Stapelung) kommt aus sh-components-extra.css -
   wir ueberlagern nur Farbe, Rahmen, Radius und Schatten.
   =========================================================================== */
.sh-toast-container > .sh-toast,
.sh-toast {
  background: var(--sex-toast-bg);
  color: var(--sex-toast-ink);
  border: 1px solid var(--sex-toast-border);
  border-left: 3px solid var(--sex-accent);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-pop);
  font-family: var(--sex-font-body);
}
.sh-toast .sh-toast__title {
  font-family: var(--sex-font-head);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--sex-toast-ink);
}
.sh-toast .sh-toast__msg {
  color: var(--sex-toast-sub);
}
.sh-toast .sh-toast__close {
  color: var(--sex-toast-sub);
  transition: color var(--sex-tr), background var(--sex-tr);
  border-radius: var(--sex-r-sm);
}
.sh-toast .sh-toast__close:hover {
  color: var(--sex-toast-ink);
  background: rgba(255, 255, 255, .08);
}

/* Akzentstreifen + Titelfarbe je Typ (warm) */
.sh-toast--success { border-left-color: var(--sex-ok); }
.sh-toast--success .sh-toast__title { color: var(--sex-ok); }
.sh-toast--error { border-left-color: var(--sex-accent); }
.sh-toast--error .sh-toast__title { color: var(--sex-accent); }
.sh-toast--warning { border-left-color: var(--sex-warn); }
.sh-toast--warning .sh-toast__title { color: var(--sex-honey); }
.sh-toast--info { border-left-color: var(--sex-info); }
.sh-toast--info .sh-toast__title { color: var(--sex-info); }

/* ===========================================================================
   3) ShFeedback-JS-Dialoge   (.sh-dialog-backdrop / .sh-dialog)
   ---------------------------------------------------------------------------
   Das sind die per sh-feedback.js gebauten confirm/prompt/dialog-Overlays
   (NICHT die nativen <dialog>-Modale -> die liegen in sh-redesign-modals.css).
   Echte Markup-Klassen laut sh-feedback.js:
     .sh-dialog-backdrop > .sh-dialog[.sh-dialog--danger]
       > .sh-dialog__header h2
       > .sh-dialog__body
       > .sh-dialog__footer > .sh-btn[.sh-btn--primary|--danger|--ghost]
   (die Basis-CSS-Datei nennt zusaetzlich __head/__foot - beide werden hier
    abgedeckt.)
   =========================================================================== */
.sh-dialog-backdrop {
  background: var(--sex-scrim);
  -webkit-backdrop-filter: blur(3px) saturate(.9);
  backdrop-filter: blur(3px) saturate(.9);
}

.sh-dialog {
  background: var(--sex-surface);
  color: var(--sex-text);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-pop);
  font-family: var(--sex-font-body);
  overflow: hidden;
}

/* sanftes Auftauchen */
@keyframes sex-dlg-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sh-dialog-backdrop .sh-dialog { animation: sex-dlg-pop .18s cubic-bezier(.2, .7, .3, 1) both; }
}

/* Kopfzeile (echtes Markup: .sh-dialog__header; Basis-CSS: .sh-dialog__head) */
.sh-dialog .sh-dialog__header,
.sh-dialog .sh-dialog__head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
}
.sh-dialog .sh-dialog__header h2,
.sh-dialog .sh-dialog__title {
  font-family: var(--sex-font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
  margin: 0;
  line-height: 1.25;
}

/* Body */
.sh-dialog .sh-dialog__body {
  padding: 20px 24px;
  color: var(--sex-text);
}
.sh-dialog .sh-dialog__body p { color: var(--sex-text); }

/* Felder in der formPrompt-Variante (.input/.select/textarea) warm angleichen */
.sh-dialog .sh-dialog__body .input,
.sh-dialog .sh-dialog__body .select,
.sh-dialog .sh-dialog__body input,
.sh-dialog .sh-dialog__body select,
.sh-dialog .sh-dialog__body textarea {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-sm);
  color: var(--sex-ink);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-dialog .sh-dialog__body .input::placeholder,
.sh-dialog .sh-dialog__body textarea::placeholder,
.sh-dialog .sh-dialog__body input::placeholder {
  color: var(--sex-muted);
}
.sh-dialog .sh-dialog__body .input:focus,
.sh-dialog .sh-dialog__body .select:focus,
.sh-dialog .sh-dialog__body input:focus,
.sh-dialog .sh-dialog__body select:focus,
.sh-dialog .sh-dialog__body textarea:focus {
  outline: none;
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
}

/* Fusszeile (echtes Markup: .sh-dialog__footer; Basis-CSS: .sh-dialog__foot) */
.sh-dialog .sh-dialog__footer,
.sh-dialog .sh-dialog__foot {
  padding: 14px 24px;
  border-top: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Buttons im JS-Dialog (.sh-btn-Familie) warm ueberfaerben */
.sh-dialog .sh-btn {
  border-radius: var(--sex-r-pill);
  font-family: var(--sex-font-body);
  font-weight: 600;
  transition: var(--sex-tr);
}
.sh-dialog .sh-btn--primary {
  background: var(--sex-accent);
  border: 1px solid var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-accent-sh);
}
.sh-dialog .sh-btn--primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  transform: translateY(-1px);
}
.sh-dialog .sh-btn--ghost {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border-2);
  color: var(--sex-text);
}
.sh-dialog .sh-btn--ghost:hover {
  border-color: var(--sex-accent);
  color: var(--sex-accent);
  background: var(--sex-accent-soft);
}
.sh-dialog .sh-btn--danger {
  background: var(--sex-accent-700);
  border: 1px solid var(--sex-accent-700);
  color: #fff;
}
.sh-dialog .sh-btn--danger:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Danger-Variante: Kopf-Akzent rot */
.sh-dialog.sh-dialog--danger .sh-dialog__header,
.sh-dialog.sh-dialog--danger .sh-dialog__head {
  border-bottom-color: var(--sex-accent-line);
}
.sh-dialog.sh-dialog--danger .sh-dialog__header h2,
.sh-dialog.sh-dialog--danger .sh-dialog__title {
  color: var(--sex-accent);
}

/* ===========================================================================
   4) Scrollbar-Feinschliff (warm) fuer Menue + JS-Dialog-Body
   =========================================================================== */
#sh-context-menu::-webkit-scrollbar,
.sh-dialog .sh-dialog__body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
#sh-context-menu::-webkit-scrollbar-thumb,
.sh-dialog .sh-dialog__body::-webkit-scrollbar-thumb {
  background: var(--sex-border-2);
  border-radius: var(--sex-r-pill);
}


/* ===== gemergt aus sh-redesign-pte-special.css ===== */
/* ServiceHub Redesign - PTE Sonderzeilen (Gruppe, Zwischensumme, Ueberschrift, Trennlinie).
   Rein optisch, additiv, gescoped auf .pte-table. Light und Dark. Keine Funktion/Markup.
   Verfeinert sh-redesign-pte.css; dupliziert die Basis nicht. */

.pte-table {
  --psp-accent: #E73D25;
  --psp-accent-soft: #FCEDE7;
  --psp-ink: #231C17;
  --psp-text: #463D35;
  --psp-muted: #9A8F84;
  --psp-surf2: #F6F1EB;
  --psp-surf3: #EFE8E0;
  --psp-border: #EEE5DC;
  --psp-honey: #D99A2B;
  --psp-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --psp-mono: 'Space Mono', ui-monospace, monospace;
}
[data-theme="dark"] .pte-table {
  --psp-accent: #F2543B;
  --psp-accent-soft: rgba(242, 84, 59, .16);
  --psp-ink: #F6F1EC;
  --psp-text: #E2D8CE;
  --psp-muted: #8C8175;
  --psp-surf2: #241F1A;
  --psp-surf3: #2C2620;
  --psp-border: #2E2822;
  --psp-honey: #E6AE4A;
}

/* Gruppen-Kopfzeile: warmer Hintergrund + Akzent-Streifen links + kraeftige Schrift */
.pte-table .pte-row--group-header {
  background: var(--psp-surf2);
}
.pte-table .pte-row--group-header td {
  font-family: var(--psp-head);
  font-weight: 700;
  color: var(--psp-ink);
  border-top: 1px solid var(--psp-border);
}
.pte-table .pte-row--group-header td:first-child {
  box-shadow: inset 3px 0 0 var(--psp-accent);
}

/* Gruppen-Zwischensummen (Stunden/Material/Pauschale/Std): fett, Mono-Zahlen */
.pte-table .pte-row--group-hrs td,
.pte-table .pte-row--group-mat td,
.pte-table .pte-row--group-pau td,
.pte-table .pte-row--group-std td {
  font-weight: 700;
  color: var(--psp-ink);
}
.pte-table .pte-row--group-hrs td:last-child,
.pte-table .pte-row--group-mat td:last-child,
.pte-table .pte-row--group-pau td:last-child,
.pte-table .pte-row--group-std td:last-child {
  font-family: var(--psp-mono);
}

/* Ueberschrift-Zeile: ueber volle Breite, Space Grotesk */
.pte-table .pte-row--heading td,
.pte-table .pte-heading-text {
  font-family: var(--psp-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--psp-ink);
  letter-spacing: -.01em;
}

/* Trennlinie: zarte warme Linie statt harter Border */
.pte-table .pte-row--separator td {
  border-top: 2px solid var(--psp-border);
}


/* ===== gemergt aus sh-redesign-ed-sums.css ===== */
/* ServiceHub Redesign - Editor Summen / Kalkulation / Zahlung.
   Rein optisch, additiv, gescoped auf .del-wrap. Light und Dark. Keine Funktion/Markup. */

.del-wrap {
  --ses-accent: #E73D25;
  --ses-accent-soft: #FCEDE7;
  --ses-ink: #231C17;
  --ses-text: #463D35;
  --ses-text-2: #6B6157;
  --ses-muted: #9A8F84;
  --ses-surface: #FFFFFF;
  --ses-surf2: #F6F1EB;
  --ses-border: #EEE5DC;
  --ses-border-2: #E3D9CE;
  --ses-ok: #16A34A;
  --ses-ok-soft: #E9F8EF;
  --ses-warn: #C7791A;
  --ses-warn-soft: #FBF1E0;
  --ses-honey: #D99A2B;
  --ses-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --ses-mono: 'Space Mono', ui-monospace, monospace;
  --ses-shadow: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
}
[data-theme="dark"] .del-wrap {
  --ses-accent: #F2543B;
  --ses-accent-soft: rgba(242, 84, 59, .16);
  --ses-ink: #F6F1EC;
  --ses-text: #E2D8CE;
  --ses-text-2: #B3A99E;
  --ses-muted: #8C8175;
  --ses-surface: #1E1A16;
  --ses-surf2: #241F1A;
  --ses-border: #2E2822;
  --ses-border-2: #3A332B;
  --ses-ok: #3BC07A;
  --ses-ok-soft: rgba(59, 192, 122, .15);
  --ses-warn: #E5A33C;
  --ses-warn-soft: rgba(229, 163, 60, .15);
  --ses-honey: #E6AE4A;
  --ses-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
}

/* Kalkulations-Bereich: warme Karte, Zahlen Mono, Ueberschriften Space Grotesk */
.del-wrap .del-calculation {
  background: var(--ses-surface);
  border: 1px solid var(--ses-border);
  border-radius: 16px;
  box-shadow: var(--ses-shadow);
  color: var(--ses-text);
}
.del-wrap .del-calculation h3,
.del-wrap .del-calculation h4 {
  font-family: var(--ses-head);
  color: var(--ses-ink);
}
.del-wrap .del-calculation .del-calc-value,
.del-wrap .del-calculation [class*="value"],
.del-wrap .del-calculation [class*="amount"] {
  font-family: var(--ses-mono);
  color: var(--ses-ink);
}

/* Zahlungs-Bereich + Status-Badge */
.del-wrap .del-payment {
  background: var(--ses-surf2);
  border: 1px solid var(--ses-border);
  border-radius: 12px;
  color: var(--ses-text);
}
.del-wrap .del-payment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
}
.del-wrap .del-payment-status--paid {
  background: var(--ses-ok-soft);
  color: var(--ses-ok);
}
.del-wrap .del-payment-status--open,
.del-wrap .del-payment-status--partial {
  background: var(--ses-warn-soft);
  color: var(--ses-warn);
}


/* ===== gemergt aus sh-rd-ed-stepper-flat.css ===== */
/* ============================================================================
   sh-rd-ed-stepper-flat.css
   REIN OPTISCHES Re-Design des Status-Steppers im Dokument-Editor.
   Bereich: ed-stepper-flat.

   ZIEL: Status-Stepper als FLACHE nummerierte Schritte mit Verbindungslinie
   statt Chevron / Pfeil. Erledigt = gruener Kreis mit Haekchen, aktuell =
   Akzent-gefuellter Kreis mit Nummer, kommend = grauer Kreis.

   NULL Funktionsaenderung. Additiv. Keine Logik, kein Markup, kein display:none.
   Keine Felder / Endpunkte / Routen / Events / Status / Rechte beruehrt.

   Markup geerbt aus sh-statusbar.js (ShStatusbar.render) — Host-Container ist
   .sh-cp-statusbar (Ids oei- / qei- / iei- / iei-cn-statusbar):
     .sh-statusbar  >  .sh-statusbar__stage (.is-done / .is-current / .is-cancelled)
                                            >  .sh-statusbar__num  +  Label-Text

   VORGEHEN: Die Chevron-Form (clip-path-Pfeil + negatives margin-right) aus
   sh-statusbar.css wird optisch entfernt; die Stufe wird zur flachen Pille,
   die Nummern-Bubble zum runden Kreis, dazwischen liegt eine Verbindungslinie.
   Reihenfolge der Stufen bleibt unveraendert.

   SCOPE strikt: ALLE Regeln haengen am Editor-Stepper-Host .sh-cp-statusbar.
   Die globale sh-statusbar.css (z. B. Finance-/Dunning-Statusbar ohne diesen
   Host) bleibt unberuehrt. Hoehere Spezifitaet (drei Klassen-Selektoren) sorgt
   dafuer, dass diese flache Variante unabhaengig von der Ladereihenfolge die
   Chevron-Optik der Basis und die vorhandene Recolor-Schicht ueberschreibt.

   Token-Hygiene: KEINE Stern-Slash-Paare im Kommentartext. Tokens werden im
   Fliesstext einzeln genannt, nie als Liste mit Trennzeichen, das den Kommentar
   vorzeitig schliessen koennte.
   ============================================================================ */

/* --- Lokale warme Tokens, gescoped auf den Editor-Stepper-Host --------------
   Ladereihenfolge-unabhaengig: kein Verlass auf vererbte sh-redesign-Tokens. */
.sh-cp-statusbar {
  --rd-accent: #E73D25;
  --rd-accent-700: #C5331E;
  --rd-accent-soft: #FCEDE7;
  --rd-honey: #D99A2B;
  --rd-ok: #16A34A;
  --rd-ok-soft: #E9F8EF;
  --rd-warn: #C7791A;
  --rd-info: #2F6BD6;
  --rd-violet: #7C5BD6;

  --rd-bg: #FAF6F2;
  --rd-surface: #FFFFFF;
  --rd-surf-2: #F6F1EB;
  --rd-surf-3: #EFE8E0;
  --rd-ink: #231C17;
  --rd-text: #463D35;
  --rd-text-2: #6B6157;
  --rd-muted: #9A8F84;
  --rd-border: #EEE5DC;
  --rd-border-2: #E3D9CE;

  --rd-r-pill: 999px;
  --rd-shadow: 0 6px 20px rgba(120, 80, 50, .07);
  --rd-shadow-accent: 0 5px 14px rgba(231, 61, 37, .28);

  --rd-font-num: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --rd-font-text: 'Figtree', system-ui, sans-serif;

  /* Masse fuer Kreis + Linie */
  --rd-dot: 1.7rem;
  --rd-line: var(--rd-border-2);
  --rd-line-done: var(--rd-ok);
}

[data-theme="dark"] .sh-cp-statusbar {
  --rd-accent: #F2543B;
  --rd-accent-700: #E0432B;
  --rd-accent-soft: rgba(242, 84, 59, .16);
  --rd-honey: #E6AE4A;
  --rd-ok: #3BC07A;
  --rd-ok-soft: rgba(59, 192, 122, .15);
  --rd-warn: #E5A33C;
  --rd-info: #5C8FE8;
  --rd-violet: #9D82E6;

  --rd-bg: #15120F;
  --rd-surface: #1E1A16;
  --rd-surf-2: #241F1A;
  --rd-surf-3: #2C2620;
  --rd-ink: #F6F1EC;
  --rd-text: #E2D8CE;
  --rd-text-2: #B3A99E;
  --rd-muted: #8C8175;
  --rd-border: #2E2822;
  --rd-border-2: #3A332B;

  --rd-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --rd-shadow-accent: 0 5px 14px rgba(242, 84, 59, .30);

  --rd-line: var(--rd-border-2);
  --rd-line-done: var(--rd-ok);
}

/* --- Host-Rahmen: ruhige warme Flaeche unter der Toolbar ------------------- */
.sh-cp-statusbar {
  padding: .8rem .85rem .25rem;
  font-family: var(--rd-font-text);
}

/* Die Statusbar-Reihe selbst: flache Reihe, vertikal mittig ---------------- */
.sh-cp-statusbar .sh-statusbar {
  margin: 0 0 .55rem;
  align-items: center;
  gap: 0;
  font-family: var(--rd-font-text);
  letter-spacing: .005em;
}

/* === Flache Stufe: Chevron-Pfeil aufheben ================================= */
/* Drei Klassen-Selektoren -> hoehere Spezifitaet als Basis und Recolor-Schicht.
   clip-path:none entfernt die Pfeilform; margin/Radius zuruecksetzen.
   Die Stufe wird zur transparenten Zelle, in der Kreis + Linie + Label liegen. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child {
  clip-path: none;
  -webkit-clip-path: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .25rem 1.15rem .25rem .35rem;
  background: transparent;
  color: var(--rd-muted);
  border-radius: 0;
  font-family: var(--rd-font-text);
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
  transition: color .16s ease;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child { padding-left: .15rem; }
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child  { padding-right: .35rem; }

/* === Verbindungslinie zwischen den Schritten ============================= */
/* Liegt links VOR der Nummern-Bubble und ueberbrueckt den Zwischenraum zur
   vorherigen Stufe. Bei der ersten Stufe ausgeblendet. Erledigte Stufe traegt
   eine gruene Linie, sonst neutrale Border-Farbe. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage::before {
  content: "";
  width: .95rem;
  height: 2px;
  flex: 0 0 auto;
  background: var(--rd-line);
  border-radius: 2px;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child::before {
  display: none;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done::before,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current::before {
  background: var(--rd-line-done);
}

/* === Nummern-Bubble -> runder Kreis ====================================== */
/* Kommend: grauer Ring mit Ziffer. Reset des Basis-Hintergrunds. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage .sh-statusbar__num {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rd-dot);
  height: var(--rd-dot);
  margin: 0;
  border-radius: 50%;
  font-family: var(--rd-font-num);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  background: var(--rd-surf-2);
  color: var(--rd-text-2);
  border: 1.5px solid var(--rd-border-2);
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* Label-Farbe folgt dem Zustand (Stufe traegt color), Bubble ueberschreibt sie. */

/* --- Erledigt: gruener Kreis mit Haekchen --------------------------------- */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done {
  color: var(--rd-ok);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: var(--rd-ok);
  color: #fff;
  border-color: var(--rd-ok);
}
/* Haekchen-Glyph aus sh-statusbar.css (::after content) gross + weiss halten. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  font-size: 0;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num::after {
  content: "\2713";
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* --- Aktuell: Akzent-gefuellter Kreis mit Nummer -------------------------- */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current {
  color: var(--rd-ink);
  font-weight: 700;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num {
  background: var(--rd-accent);
  color: #fff;
  border-color: var(--rd-accent);
  box-shadow: var(--rd-shadow-accent);
}
/* Sanfter Akzent-Ring um die aktuelle Bubble. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--rd-accent-soft);
  pointer-events: none;
}

/* --- Negativer Endzustand (storniert / abgelehnt) ------------------------- */
/* Bleibt funktional identisch (gleiche Klassen), optisch in der Akzentfamilie. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled {
  color: var(--rd-accent-700);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num {
  background: var(--rd-accent-soft);
  color: var(--rd-accent-700);
  border-color: var(--rd-accent);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num::after {
  content: none;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled {
  color: var(--rd-accent-700);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled .sh-statusbar__num {
  background: var(--rd-accent-700);
  color: #fff;
  border-color: var(--rd-accent-700);
}

/* --- Mobile-Feinschliff (Basis-Reihe bricht bereits um) ------------------- */
@media (max-width: 640px) {
  .sh-cp-statusbar {
    padding: .6rem .55rem .15rem;
  }
  .sh-cp-statusbar .sh-statusbar {
    flex-wrap: wrap;
    row-gap: .35rem;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage {
    font-size: .74rem;
    padding-right: .85rem;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage {
    --rd-dot: 1.5rem;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage::before {
    width: .6rem;
  }
}


/* ===== gemergt aus sh-rd-ed-kpis-hot.css ===== */
/* =========================================================================
   ServiceHub - Redesign-Verfeinerung  ::  BEREICH "ed-kpis-hot"
   Kennzahlen-Reihe des Beleg-Editors (Angebot / Auftrag / Rechnung /
   Lieferschein / Gutschrift) - die obere .del-kpi-bar.

   ZIEL (Vorlage ed3.png):
     - Das fuehrende, hervorgehobene Tile (Belegwert / Angebotswert /
       Auftragswert / Brutto - markiert als .del-kpi--highlight) wird eine
       ROTE VERLAUFS-Kachel: linear-gradient(140deg,#F1543C,#CE3620),
       weisse Schrift, Label uppercase.
     - Alle uebrigen Kennzahlen (Netto, MwSt, Marge, DB bzw. Std., Geliefert,
       Abgerechnet) werden ruhige weisse Token-Karten mit uppercase
       --muted Label und grosser Space-Grotesk-Zahl.

   REIN OPTISCH. Additive Schicht. NULL Funktions-, Markup-, Logik-,
   Feld-, Endpunkt-, Routen-, Event-, Status- oder Rechte-Aenderung.
   Es wird NICHTS Funktionales versteckt (kein display:none auf Buttons,
   Tabs, Feldern oder Zeilen). Jede Kennzahl bleibt sichtbar.

   ECHTE Selektoren (aus doc-editor-layout.js / doc-editor-layout.css):
     .del-wrap                          = Editor-Shell (Token-Scope)
     .del-kpi-bar                       = die Kennzahlen-Reihe (flex)
     .del-kpi                           = eine Kennzahl-Karte
       inline style="--kpi-color: ..."  = Akzentfarbe je Kennzahl
     .del-kpi--highlight                = fuehrende Geld-Kennzahl (HOT)
     .del-kpi--internal                 = interne Kennzahl (Marge / DB)
     .del-kpi--empty                    = Platzhalter (kein Wert)
     .del-kpi-label  /  .del-kpi-value  = Beschriftung / Zahl

   Verfeinert die bestehende Schicht sh-redesign-ed-kpis.css (Namespace
   --sex-...) und ist ladereihenfolge-unabhaengig: eigener, lokal auf
   .del-wrap gescopeter Token-Namespace --rd-...  Globale Basis
   (.btn, .badge, .data-table, :root) wird NICHT neu definiert.
   Light und Dark via [data-theme="dark"]. Kein !important-Wust.
   ========================================================================= */



/* ----------------------------------------------------------------------------
   Tokens (Light) - lokal auf die Editor-Shell gescoped
   ---------------------------------------------------------------------------- */
.del-wrap {
  --rd-accent: #E73D25;
  --rd-accent-700: #C5331E;
  --rd-accent-soft: #FCEDE7;

  /* Verlauf der HOT-Kachel (exakt wie Vorlage ed3.png) */
  --rd-hot-from: #F1543C;
  --rd-hot-to: #CE3620;
  --rd-hot-grad: linear-gradient(140deg, #F1543C 0%, #CE3620 100%);
  --rd-hot-ink: #FFFFFF;
  --rd-hot-ink-2: rgba(255, 255, 255, .82);
  --rd-hot-line: rgba(255, 255, 255, .26);

  --rd-honey: #D99A2B;
  --rd-honey-soft: #FBF0DA;
  --rd-ok: #16A34A;
  --rd-warn: #C7791A;
  --rd-warn-soft: #FBF1E0;
  --rd-info: #2F6BD6;
  --rd-violet: #7C5BD6;

  --rd-bg: #FAF6F2;
  --rd-surface: #FFFFFF;
  --rd-surf-2: #F6F1EB;
  --rd-surf-3: #EFE8E0;

  --rd-ink: #231C17;
  --rd-text: #463D35;
  --rd-text-2: #6B6157;
  --rd-muted: #9A8F84;
  --rd-border: #EEE5DC;
  --rd-border-2: #E3D9CE;

  --rd-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --rd-font-body: 'Figtree', system-ui, sans-serif;

  --rd-r-sm: 9px;
  --rd-r-md: 12px;
  --rd-r-lg: 16px;
  --rd-r-pill: 999px;

  --rd-sh-card: 0 2px 8px rgba(120, 80, 50, .06);
  --rd-sh-soft: 0 6px 20px rgba(120, 80, 50, .07);
  --rd-sh-hot: 0 8px 22px rgba(206, 54, 32, .26), 0 2px 6px rgba(206, 54, 32, .18);
  --rd-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ----------------------------------------------------------------------------
   Tokens (Dark)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .del-wrap {
  --rd-accent: #F2543B;
  --rd-accent-700: #E0432B;
  --rd-accent-soft: rgba(242, 84, 59, .16);

  /* HOT-Kachel im Dark etwas satter, weisse Schrift bleibt */
  --rd-hot-from: #F2543B;
  --rd-hot-to: #C5331E;
  --rd-hot-grad: linear-gradient(140deg, #F2543B 0%, #C5331E 100%);
  --rd-hot-ink: #FFF6F2;
  --rd-hot-ink-2: rgba(255, 246, 242, .80);
  --rd-hot-line: rgba(255, 255, 255, .22);

  --rd-honey: #E6AE4A;
  --rd-honey-soft: rgba(230, 174, 74, .16);
  --rd-ok: #3BC07A;
  --rd-warn: #E5A33C;
  --rd-warn-soft: rgba(229, 163, 60, .15);
  --rd-info: #5C8FE8;
  --rd-violet: #9B83E4;

  --rd-bg: #15120F;
  --rd-surface: #1E1A16;
  --rd-surf-2: #241F1A;
  --rd-surf-3: #2C2620;

  --rd-ink: #F6F1EC;
  --rd-text: #E2D8CE;
  --rd-text-2: #B3A99E;
  --rd-muted: #8C8175;
  --rd-border: #2E2822;
  --rd-border-2: #3A332B;

  --rd-sh-card: 0 2px 8px rgba(0, 0, 0, .35);
  --rd-sh-soft: 0 6px 20px rgba(0, 0, 0, .35);
  --rd-sh-hot: 0 8px 22px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .40);
}

/* =========================================================================
   1) Die Kennzahlen-Reihe selbst
   ========================================================================= */
.del-wrap .del-kpi-bar {
  align-items: stretch;        /* Karten gleich hoch, ohne Layout zu brechen */
  gap: 10px;
  padding: 10px 18px;
  background: var(--rd-surface);
  background-image: linear-gradient(180deg, var(--rd-surface) 0%, var(--rd-surf-2) 150%);
  border-bottom: 1px solid var(--rd-border);
  box-shadow: var(--rd-sh-card);
  scrollbar-width: thin;
}

/* =========================================================================
   2) Standard-Kennzahl  ->  ruhige weisse Token-Karte
      (Netto / MwSt / Std. / Geliefert / Abgerechnet ...)
   ========================================================================= */
.del-wrap .del-kpi {
  position: relative;
  flex: 0 0 auto;
  justify-content: center;     /* vertikal mittig in der gleich hohen Karte */
  gap: 5px;
  min-width: 116px;
  padding: 9px 15px 10px;
  border-left: none;           /* alten Rahmenstrich-Akzent abloesen */
  border-radius: var(--rd-r-md);
  background: var(--rd-surface);
  box-shadow: var(--rd-sh-card);
  transition: box-shadow var(--rd-tr), transform var(--rd-tr), background var(--rd-tr);
}
.del-wrap .del-kpi:hover {
  box-shadow: var(--rd-sh-soft);
  transform: translateY(-1px);
}

/* schmaler, farbiger Akzentstrich oben (nutzt die inline --kpi-color je Kennzahl) */
.del-wrap .del-kpi::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: var(--rd-r-pill);
  background: var(--kpi-color, var(--rd-border-2));
  opacity: .9;
}

/* Label: uppercase, --muted, ruhig */
.del-wrap .del-kpi-label {
  font-family: var(--rd-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rd-muted);
  white-space: nowrap;
}

/* Zahl: gross, Space Grotesk, tabellarische Ziffern */
.del-wrap .del-kpi-value {
  font-family: var(--rd-font-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================================================================
   3) HOT-Kachel  ->  rote Verlaufs-Karte mit weisser Schrift
      (fuehrende Geld-Kennzahl: Belegwert / Angebotswert / Auftragswert /
       Brutto - im Markup .del-kpi--highlight)
   ========================================================================= */
.del-wrap .del-kpi--highlight {
  min-width: 152px;
  padding: 10px 18px 11px;
  background: var(--rd-hot-grad);
  border: none;
  box-shadow: var(--rd-sh-hot);
}
.del-wrap .del-kpi--highlight:hover {
  background: var(--rd-hot-grad);
  box-shadow: var(--rd-sh-hot);
  transform: translateY(-1px);
}
/* feiner Glanz oben statt des farbigen Akzentstrichs */
.del-wrap .del-kpi--highlight::before {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rd-hot-line);
  opacity: 1;
}
.del-wrap .del-kpi--highlight .del-kpi-label {
  color: var(--rd-hot-ink-2);
  letter-spacing: .085em;
}
.del-wrap .del-kpi--highlight .del-kpi-value {
  color: var(--rd-hot-ink);
  font-size: 21px;
  font-weight: 700;
}

/* =========================================================================
   4) Interne Kennzahl (Marge / DB)  ->  dezent honig-getoent
   ========================================================================= */
.del-wrap .del-kpi--internal {
  opacity: 1;
  background: var(--rd-honey-soft);
}
.del-wrap .del-kpi--internal::before {
  background: var(--kpi-color, var(--rd-honey));
}
.del-wrap .del-kpi--internal .del-kpi-label {
  color: var(--rd-warn);
}
.del-wrap .del-kpi--internal .del-kpi-value {
  color: var(--rd-ink);
}

/* =========================================================================
   5) Leerer Platzhalter  ->  ruhig zuruecknehmen (bleibt sichtbar)
   ========================================================================= */
.del-wrap .del-kpi--empty {
  opacity: 1;
  background: var(--rd-surf-2);
  box-shadow: none;
}
.del-wrap .del-kpi--empty::before {
  opacity: .35;
}
.del-wrap .del-kpi--empty .del-kpi-value {
  color: var(--rd-muted);
  font-weight: 600;
}
/* eine HOT-Kachel ohne Wert soll nicht knallrot leer wirken */
.del-wrap .del-kpi--highlight.del-kpi--empty {
  background: var(--rd-surf-2);
  box-shadow: var(--rd-sh-card);
}
.del-wrap .del-kpi--highlight.del-kpi--empty .del-kpi-label {
  color: var(--rd-muted);
}
.del-wrap .del-kpi--highlight.del-kpi--empty .del-kpi-value {
  color: var(--rd-muted);
}

/* =========================================================================
   6) Schlanke, warme Scrollbar fuer die ueberlaufende Reihe (WebKit)
   ========================================================================= */
.del-wrap .del-kpi-bar::-webkit-scrollbar {
  height: 6px;
}
.del-wrap .del-kpi-bar::-webkit-scrollbar-thumb {
  background: var(--rd-border-2);
  border-radius: var(--rd-r-pill);
}
.del-wrap .del-kpi-bar::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================================
   7) Responsive - auf schmalen Editor-Breiten Zahlen leicht verkleinern
   ========================================================================= */
@media (max-width: 1180px) {
  .del-wrap .del-kpi {
    min-width: 104px;
    padding: 8px 13px 9px;
  }
  .del-wrap .del-kpi-value {
    font-size: 17.5px;
  }
  .del-wrap .del-kpi--highlight .del-kpi-value {
    font-size: 19px;
  }
}


/* ===== gemergt aus sh-rd-ed-head-tabs.css ===== */
/* =========================================================================
   ServiceHub Redesign  --  ed-head-tabs  (REIN OPTISCH, additiv)
   -------------------------------------------------------------------------
   Feinabgleich von Editor-Kopf + Tab-Leiste an das Ziel ed3.png.
   NULL Funktionsaenderung: keine Logik, Felder, Endpunkte, Routen, Events,
   Status oder Rechte. Es wird NICHTS versteckt (kein display none auf
   Buttons, Tabs, Feldern, Zeilen, Links). Nur Farbe, Rahmen, Radius,
   Abstand, Hover und Aktiv-Zustand.

   Behandelte Stellen:
     1) Editor-Pille  (.ue-toolbar__badge)  -> accent-soft Flaeche +
        accent-Text + GROSSBUCHSTABEN  (ANGEBOTSEDITOR / AUFTRAGSEDITOR ...)
     2) Top-Aktionen  (.ue-toolbar__actions)  -> Ghost-Knoepfe + genau ein
        Primaer-Knopf (Speichern) in Marken-Akzent
     3) Tab-Leiste  (.del-tabs .del-tab)  -> aktiv = accent-Text + 2px
        accent-Unterstrich (flach, ohne gefuellte Flaeche, wie ed3);
        Hover = warme surf-2-Flaeche

   Diese Datei VERFEINERT die bestehenden ed-header / ed-tabs (sie dupliziert
   sie nicht) und gleicht den Aktiv-Tab von der gefuellten Variante auf die
   flache ed3-Variante ab. Sie ist als letzte der Editor-Redesign-Schichten
   gedacht, ist aber durch matchende Spezifitaet auch unabhaengig robust.

   Eigene, lokal gescopte --rd-Tokens auf die Editor-Container -> diese Datei
   funktioniert ladereihenfolge-unabhaengig. Die globale Basis
   (Tokens am Wurzelelement, .btn, .badge, .data-table) wird NICHT neu
   definiert. Light und Dark via [data-theme="dark"].

   Kommentar-Hygiene: keine Token-Listen mit dem Schliesser-Zeichenpaar im
   Kommentar; Klammern sind ausgeglichen; Schliess-Sequenz nur am echten Ende.
   ========================================================================= */



/* ---------- Lokale Tokens (Light), gescoped auf die Editor-Roots ---------- */
.del-wrap,
.ue-toolbar,
.qei-editor-container,
.oei-editor-container,
.iei-editor-container {
  --rd-accent: #E73D25;
  --rd-accent-700: #C5331E;
  --rd-accent-soft: #FCEDE7;
  --rd-accent-line: rgba(231, 61, 37, .22);

  --rd-bg: #FAF6F2;
  --rd-surface: #FFFFFF;
  --rd-surf-2: #F6F1EB;
  --rd-surf-3: #EFE8E0;

  --rd-ink: #231C17;
  --rd-text: #463D35;
  --rd-text-2: #6B6157;
  --rd-muted: #9A8F84;
  --rd-border: #EEE5DC;
  --rd-border-2: #E3D9CE;

  --rd-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --rd-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rd-font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  --rd-r-xs: 7px;
  --rd-r-sm: 9px;
  --rd-r-md: 12px;
  --rd-r-lg: 16px;
  --rd-r-pill: 999px;

  --rd-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --rd-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --rd-sh-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --rd-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Lokale Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap,
[data-theme="dark"] .ue-toolbar,
[data-theme="dark"] .qei-editor-container,
[data-theme="dark"] .oei-editor-container,
[data-theme="dark"] .iei-editor-container {
  --rd-accent: #F2543B;
  --rd-accent-700: #E0432B;
  --rd-accent-soft: rgba(242, 84, 59, .16);
  --rd-accent-line: rgba(242, 84, 59, .30);

  --rd-bg: #15120F;
  --rd-surface: #1E1A16;
  --rd-surf-2: #241F1A;
  --rd-surf-3: #2C2620;

  --rd-ink: #F6F1EC;
  --rd-text: #E2D8CE;
  --rd-text-2: #B3A99E;
  --rd-muted: #8C8175;
  --rd-border: #2E2822;
  --rd-border-2: #3A332B;

  --rd-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --rd-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --rd-sh-accent: 0 5px 14px rgba(0, 0, 0, .5);
}

/* =========================================================================
   1) Editor-Pille  (.ue-toolbar__badge)
   ed3: weiche accent-soft Flaeche, accent-Text, GROSSBUCHSTABEN, pill.
   Die JS-Inline-Variable --ue-badge-color (blau / gruen) wird hier bewusst
   nicht mehr als Fuellung benutzt; wir setzen die warme Marken-Flaeche.
   ========================================================================= */
.ue-toolbar .ue-toolbar__badge {
  display: inline-flex;
  align-items: center;
  background: var(--rd-accent-soft);
  color: var(--rd-accent);
  border: 1px solid var(--rd-accent-line);
  border-radius: var(--rd-r-pill);
  padding: 4px 12px;
  font-family: var(--rd-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
  box-shadow: none;
}

/* Belegnummer neben der Pille: ruhige Mono-Schrift, gedaempft (ed3) */
.ue-toolbar .ue-toolbar__docnumber {
  font-family: var(--rd-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--rd-text-2);
  letter-spacing: .01em;
}

/* Kundenchip dezent */
.ue-toolbar .ue-toolbar__customer {
  font-family: var(--rd-font-body);
  font-size: 12.5px;
  color: var(--rd-muted);
}

/* =========================================================================
   2) Top-Aktionen  (.ue-toolbar__actions)
   ed3: Ghost-Knoepfe (PDF / Senden / Drucken ...) + genau ein Primaer-Knopf
   (Speichern) in Marken-Akzent. Wir verfeinern beide Knopf-Familien:
   - generische .btn / .ue-toolbar__btn  -> Ghost
   - markierte Primaer-Knoepfe           -> Akzent
   ========================================================================= */
.ue-toolbar .ue-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Ghost-Grundform fuer die Aktionsknoepfe der Editor-Toolbar */
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn,
.ue-toolbar .ue-toolbar__actions .btn-ghost,
.ue-toolbar .ue-toolbar__back.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border-2);
  color: var(--rd-text);
  border-radius: var(--rd-r-sm);
  padding: 8px 14px;
  font-family: var(--rd-font-body);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--rd-sh-sm);
  transition: background var(--rd-tr), border-color var(--rd-tr),
    color var(--rd-tr), box-shadow var(--rd-tr), transform var(--rd-tr);
}

.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn:hover,
.ue-toolbar .ue-toolbar__actions .btn-ghost:hover,
.ue-toolbar .ue-toolbar__back.btn-ghost:hover {
  background: var(--rd-surf-2);
  border-color: var(--rd-accent-line);
  color: var(--rd-ink);
  transform: translateY(-1px);
  box-shadow: var(--rd-sh-md);
}

.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn:active,
.ue-toolbar .ue-toolbar__actions .btn-ghost:active,
.ue-toolbar .ue-toolbar__back.btn-ghost:active {
  transform: translateY(0);
  box-shadow: var(--rd-sh-sm);
}

/* Genau ein Primaer-Knopf (Speichern) in Marken-Akzent.
   Greift markierte Primaer-Varianten ab, ohne Markup zu aendern. */
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn--primary,
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn.is-primary,
.ue-toolbar .ue-toolbar__actions .btn-primary,
.ue-toolbar .ue-toolbar__actions [data-action="save"],
.ue-toolbar .ue-toolbar__actions [data-action="quote-save"],
.ue-toolbar .ue-toolbar__actions [data-action="order-save"] {
  background: var(--rd-accent);
  border: 1px solid var(--rd-accent);
  color: #fff;
  box-shadow: var(--rd-sh-accent);
}

.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn--primary:hover,
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn.is-primary:hover,
.ue-toolbar .ue-toolbar__actions .btn-primary:hover,
.ue-toolbar .ue-toolbar__actions [data-action="save"]:hover,
.ue-toolbar .ue-toolbar__actions [data-action="quote-save"]:hover,
.ue-toolbar .ue-toolbar__actions [data-action="order-save"]:hover {
  background: var(--rd-accent-700);
  border-color: var(--rd-accent-700);
  color: #fff;
  transform: translateY(-1px);
}

/* Drei-Punkte-Menue-Toggle in die gleiche Ghost-Sprache holen */
.ue-toolbar .ue-toolbar__actions .ue-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border-2);
  color: var(--rd-text-2);
  border-radius: var(--rd-r-sm);
  box-shadow: var(--rd-sh-sm);
  transition: background var(--rd-tr), border-color var(--rd-tr), color var(--rd-tr);
}
.ue-toolbar .ue-toolbar__actions .ue-menu-toggle:hover {
  background: var(--rd-surf-2);
  border-color: var(--rd-accent-line);
  color: var(--rd-ink);
}

/* =========================================================================
   3) Tab-Leiste  (.del-tabs .del-tab)
   ed3: flacher Aktiv-Tab -> accent-Text + 2px accent-Unterstrich, OHNE
   gefuellte Flaeche. Hover = warme surf-2-Flaeche. Hier wird der in
   sh-redesign-ed-tabs.css gesetzte accent-soft-Fill des Aktiv-Tabs auf die
   flache ed3-Variante zurueckgenommen (gleiche/hoehere Spezifitaet).
   ========================================================================= */
.del-wrap .del-tabs {
  background: var(--rd-surface);
  border-bottom: 1px solid var(--rd-border);
  gap: 4px;
  padding: 10px 20px 0;
}

/* Basis-Tab: ruhige warme Sekundaerfarbe */
.del-wrap .del-tabs .del-tab {
  position: relative;
  color: var(--rd-text-2);
  font-family: var(--rd-font-body);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 14px 12px;
  border-radius: var(--rd-r-sm) var(--rd-r-sm) 0 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  transition: color var(--rd-tr), background var(--rd-tr);
}

/* Hover: weiche warme Flaeche, Text dunkler */
.del-wrap .del-tabs .del-tab:hover {
  color: var(--rd-ink);
  background: var(--rd-surf-2);
}

/* Aktiver Tab: flach (kein Fill), accent-Text, 2px accent-Unterstrich.
   Wichtig: Flaeche bewusst transparent, um den gefuellten Aktiv-Tab der
   Basis-Tabs-Schicht auf die ed3-Optik anzugleichen. */
.del-wrap .del-tabs .del-tab.del-tab--active,
.del-wrap .del-tabs .del-tab.del-tab--active:hover {
  color: var(--rd-accent);
  background: transparent;
  border-bottom-color: transparent;
}

/* gerader 2px-Unterstrich am Aktiv-Tab (volle Tab-Breite, ed3) */
.del-wrap .del-tabs .del-tab.del-tab--active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rd-accent);
  box-shadow: none;
}

/* dezenter Tastatur-Fokus, ohne Layout-Verschiebung */
.del-wrap .del-tabs .del-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--rd-accent-line);
  border-radius: var(--rd-r-sm) var(--rd-r-sm) 0 0;
}

/* =========================================================================
   4) Mobile  --  Tab-Leiste horizontal scrollbar, nichts faellt weg
   ========================================================================= */
@media (max-width: 640px) {
  .del-wrap .del-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 12px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .del-wrap .del-tabs::-webkit-scrollbar {
    height: 0;
  }
  .del-wrap .del-tabs .del-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .ue-toolbar .ue-toolbar__actions {
    justify-content: flex-start;
  }
}


/* ===== gemergt aus sh-rd-ed-operative.css ===== */
/* =========================================================================
   ServiceHub — REIN OPTISCHES Re-Design: Operatives Slide-over (ed-operative)
   Bereich: das operative Panel-Set im Auftrags-Editor (#oei-menu-dropdown):
     - "Naechste Schritte" Aktionszeilen     -> .wg-* (workflow-guidance.js)
     - "Operative Daten" (Stunden/Material)  -> .oei-operative-* (order-editor-integration.js)
     - "Technikerzuweisung"                  -> .oei-technician-panel / .oei-tech-*
     - "Verrechnung" (Netto/Brutto)          -> .oei-billing-panel / .oei-billing-* / .oei-inv-*
     - "Stunde/Material hinzufuegen"         -> .oei-operative-actions

   Goldene Regel: NUR Optik. Keine Logik, keine Felder, keine Endpunkte,
   keine Routen/Events/Status/Rechte. Nichts wird versteckt, alles bleibt
   sichtbar + klickbar. Markup-Struktur unveraendert (nur Klassen/Tokens).

   Scoping: alles unter #oei-menu-dropdown. ID-Specificity (1,0,1) gewinnt
   sauber gegen die per JS injizierten 1-Klassen-Inline-Regeln (0,1,0),
   ladereihenfolge-unabhaengig und ohne !important-Wust.
   Light + Dark via [data-theme="dark"].
   ========================================================================= */


/* ---------- lokale Tokens (warm, Light) ---------- */
#oei-menu-dropdown{
  --rd-accent:#E73D25; --rd-accent-700:#C5331E; --rd-accent-600:#D6371F;
  --rd-accent-soft:#FCEDE7; --rd-accent-line:rgba(231,61,37,.22);
  --rd-honey:#D99A2B; --rd-honey-soft:#FBF0DA;
  --rd-ok:#16A34A; --rd-ok-soft:#E9F8EF;
  --rd-warn:#C7791A; --rd-warn-soft:#FBF1E0;
  --rd-info:#2F6BD6; --rd-info-soft:#EAF1FC;
  --rd-violet:#7C5BD6; --rd-violet-soft:#F0ECFB;

  --rd-bg:#FAF6F2; --rd-surface:#FFFFFF; --rd-surf-2:#F6F1EB; --rd-surf-3:#EFE8E0;
  --rd-ink:#231C17; --rd-text:#463D35; --rd-text-2:#6B6157; --rd-muted:#9A8F84;
  --rd-border:#EEE5DC; --rd-border-2:#E3D9CE; --rd-field:#F6F1EB;

  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-font-mono:'Space Mono',ui-monospace,monospace;

  --rd-r-xs:7px; --rd-r-sm:9px; --rd-r-md:12px; --rd-r-lg:16px; --rd-r-xl:20px; --rd-r-pill:999px;

  --rd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --rd-sh-accent:0 5px 14px rgba(231,61,37,.28);

  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Dark ---------- */
[data-theme="dark"] #oei-menu-dropdown{
  --rd-accent:#F2543B; --rd-accent-700:#E0432B; --rd-accent-600:#EC4A30;
  --rd-accent-soft:rgba(242,84,59,.16); --rd-accent-line:rgba(242,84,59,.30);
  --rd-honey:#E6AE4A; --rd-honey-soft:rgba(230,174,74,.16);
  --rd-ok:#3BC07A; --rd-ok-soft:rgba(59,192,122,.15);
  --rd-warn:#E5A33C; --rd-warn-soft:rgba(229,163,60,.15);
  --rd-info:#5C8FE8; --rd-info-soft:rgba(92,143,232,.16);
  --rd-violet:#9D82E6; --rd-violet-soft:rgba(157,130,230,.16);

  --rd-bg:#15120F; --rd-surface:#1E1A16; --rd-surf-2:#241F1A; --rd-surf-3:#2C2620;
  --rd-ink:#F6F1EC; --rd-text:#E2D8CE; --rd-text-2:#B3A99E; --rd-muted:#8C8175;
  --rd-border:#2E2822; --rd-border-2:#3A332B; --rd-field:#241F1A;

  --rd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-sh-lg:0 18px 44px rgba(0,0,0,.5);
  --rd-sh-accent:0 5px 14px rgba(0,0,0,.5);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
}

/* =========================================================================
   PANELS — warme Karten (gemeinsame Huelle aller .panel im Slide-over)
   ========================================================================= */
#oei-menu-dropdown .panel{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
  font-family:var(--rd-font-body);
  color:var(--rd-text);
}
#oei-menu-dropdown .panel h2,
#oei-menu-dropdown .panel h3,
#oei-menu-dropdown .panel h4,
#oei-menu-dropdown .panel .oei-panel-title{
  font-family:var(--rd-font-head);
  color:var(--rd-ink);
  letter-spacing:-.01em;
}

/* =========================================================================
   "NAECHSTE SCHRITTE" — Leitsystem (workflow-guidance.js, .wg-*)
   ========================================================================= */
#oei-menu-dropdown .wg-panel{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
  padding:16px 18px;
  margin-bottom:14px;
  font-family:var(--rd-font-body);
  color:var(--rd-text);
}
#oei-menu-dropdown .wg-section{
  font-family:var(--rd-font-head);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-muted);
  margin-bottom:12px;
}

/* Banner */
#oei-menu-dropdown .wg-banner{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  border-radius:var(--rd-r-md);
  background:var(--rd-surf-2);
  border:1px solid var(--rd-border-2);
}
#oei-menu-dropdown .wg-banner--info{background:var(--rd-info-soft);border-color:transparent}
#oei-menu-dropdown .wg-banner--success,
#oei-menu-dropdown .wg-banner--done{background:var(--rd-ok-soft);border-color:transparent}
#oei-menu-dropdown .wg-banner--attention,
#oei-menu-dropdown .wg-banner--warn{background:var(--rd-warn-soft);border-color:transparent}
#oei-menu-dropdown .wg-banner--urgent{background:var(--rd-accent-soft);border-color:var(--rd-accent-line)}
#oei-menu-dropdown .wg-banner__emoji{font-size:1.15em;line-height:1.3;flex:none}
#oei-menu-dropdown .wg-banner__text{min-width:0}
#oei-menu-dropdown .wg-banner__headline{
  font-family:var(--rd-font-head);
  font-weight:700;
  color:var(--rd-ink);
  font-size:13.5px;
}
#oei-menu-dropdown .wg-banner__detail{color:var(--rd-text-2);font-size:12.5px;margin-top:2px}
#oei-menu-dropdown .wg-banner__meta{color:var(--rd-muted);font-size:11.5px;margin-top:3px}
#oei-menu-dropdown .wg-urgency-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-left:auto;margin-top:4px}
#oei-menu-dropdown .wg-urgency-dot--red{background:var(--rd-accent)}
#oei-menu-dropdown .wg-urgency-dot--orange{background:var(--rd-warn)}

/* Aktionszeilen: Icon + Inhalt + Pfeil, Hover surf-2 */
#oei-menu-dropdown .wg-actions{display:flex;flex-direction:column;gap:7px}
#oei-menu-dropdown .wg-action{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border-radius:var(--rd-r-md);
  border:1px solid var(--rd-border);
  background:var(--rd-surface);
  cursor:pointer;
  transition:var(--rd-tr);
}
#oei-menu-dropdown .wg-action:hover{
  background:var(--rd-surf-2);
  border-color:var(--rd-border-2);
  transform:translateY(-1px);
  box-shadow:var(--rd-sh-sm);
}
#oei-menu-dropdown .wg-action--primary{
  background:var(--rd-accent-soft);
  border-color:var(--rd-accent-line);
}
#oei-menu-dropdown .wg-action--primary:hover{background:var(--rd-accent-soft);border-color:var(--rd-accent)}
#oei-menu-dropdown .wg-action__icon{
  width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--rd-r-sm);
  background:var(--rd-surf-2);
  color:var(--rd-accent);
  font-size:1.05em;
}
#oei-menu-dropdown .wg-action--primary .wg-action__icon{background:var(--rd-surface);color:var(--rd-accent)}
#oei-menu-dropdown .wg-action__content{flex:1;min-width:0}
#oei-menu-dropdown .wg-action__label{
  font-weight:600;color:var(--rd-ink);font-size:13px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
#oei-menu-dropdown .wg-action__desc{color:var(--rd-text-2);font-size:12px;margin-top:2px}
#oei-menu-dropdown .wg-action__arrow{
  color:var(--rd-muted);font-size:1.05em;flex:none;
  transition:var(--rd-tr);
}
#oei-menu-dropdown .wg-action:hover .wg-action__arrow{color:var(--rd-accent);transform:translateX(2px)}
#oei-menu-dropdown .wg-action__badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--rd-r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:var(--rd-surf-2);color:var(--rd-text-2);
}
#oei-menu-dropdown .wg-action__badge--new{background:var(--rd-accent-soft);color:var(--rd-accent)}
#oei-menu-dropdown .wg-action__badge--info{background:var(--rd-info-soft);color:var(--rd-info)}
#oei-menu-dropdown .wg-action__badge--ok{background:var(--rd-ok-soft);color:var(--rd-ok)}
#oei-menu-dropdown .wg-action__badge--warn{background:var(--rd-warn-soft);color:var(--rd-warn)}

/* Kontext-Chips */
#oei-menu-dropdown .wg-context{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
#oei-menu-dropdown .wg-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:var(--rd-r-pill);
  border:1px solid var(--rd-border-2);background:var(--rd-surf-2);
  font-size:11.5px;color:var(--rd-text-2);
}
#oei-menu-dropdown .wg-chip b{color:var(--rd-ink);font-weight:600}
#oei-menu-dropdown .wg-chip--accent{background:var(--rd-accent-soft);border-color:var(--rd-accent-line);color:var(--rd-accent)}
#oei-menu-dropdown .wg-chip--ok{background:var(--rd-ok-soft);border-color:transparent;color:var(--rd-ok)}
#oei-menu-dropdown .wg-chip--warn{background:var(--rd-warn-soft);border-color:transparent;color:var(--rd-warn)}
#oei-menu-dropdown .wg-loading{color:var(--rd-muted);font-size:12.5px;font-style:italic;padding:8px 0}

/* KPIs (Finanzen) im Leitsystem */
#oei-menu-dropdown .wg-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
#oei-menu-dropdown .wg-kpi{
  background:var(--rd-surf-2);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-md);
  padding:11px 13px;
}
#oei-menu-dropdown .wg-kpi__label{font-size:11px;color:var(--rd-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#oei-menu-dropdown .wg-kpi__value{font-family:var(--rd-font-mono);font-weight:700;color:var(--rd-ink);font-size:15px;margin-top:3px}
#oei-menu-dropdown .wg-kpi__value--big{font-size:17px}
#oei-menu-dropdown .wg-kpi__value--red{color:var(--rd-accent)}
#oei-menu-dropdown .wg-kpi__value--green{color:var(--rd-ok)}
#oei-menu-dropdown .wg-kpi__value--muted{color:var(--rd-muted)}
#oei-menu-dropdown .wg-kpi-progress{height:6px;border-radius:var(--rd-r-pill);background:var(--rd-surf-3);overflow:hidden;margin-top:8px}
#oei-menu-dropdown .wg-kpi-progress__fill{height:100%;background:var(--rd-accent);border-radius:var(--rd-r-pill)}
#oei-menu-dropdown .wg-kpi-progress__fill--green{background:var(--rd-ok)}
#oei-menu-dropdown .wg-kpi-progress__fill--orange{background:var(--rd-honey)}

/* =========================================================================
   "OPERATIVE DATEN" — Stunden + Material (.oei-operative-*)
   ========================================================================= */
#oei-menu-dropdown .oei-operative-panel{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
}
#oei-menu-dropdown .oei-operative-panel h2{
  font-family:var(--rd-font-head);
  font-size:14px;
  font-weight:700;
  color:var(--rd-ink);
  letter-spacing:-.01em;
  margin:0 0 12px 0;
}
#oei-menu-dropdown .oei-operative-section{
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rd-border);
}
#oei-menu-dropdown .oei-operative-section:last-child{
  margin-bottom:0;padding-bottom:0;border-bottom:none;
}
#oei-menu-dropdown .oei-operative-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:9px;
  font-weight:600;font-size:13px;
  color:var(--rd-text);
}
#oei-menu-dropdown .oei-operative-icon{font-size:1.1em;line-height:1}
#oei-menu-dropdown .oei-operative-title{flex:1;font-family:var(--rd-font-head);color:var(--rd-ink)}
#oei-menu-dropdown .oei-operative-badge{
  background:var(--rd-surf-2);
  color:var(--rd-text-2);
  padding:2px 9px;
  border-radius:var(--rd-r-pill);
  font-size:11px;font-weight:700;
}
#oei-menu-dropdown .oei-operative-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 12px;
  font-size:12.5px;
  padding:11px 13px;
  background:var(--rd-surf-2);
  border-radius:var(--rd-r-md);
}
#oei-menu-dropdown .oei-operative-label{color:var(--rd-text-2);white-space:nowrap}
#oei-menu-dropdown .oei-operative-value{
  text-align:right;
  font-family:var(--rd-font-mono);
  font-weight:700;
  color:var(--rd-ink);
}
#oei-menu-dropdown .oei-operative-value--billable{color:var(--rd-ok)}
#oei-menu-dropdown .oei-operative-value--internal{color:var(--rd-muted)}
#oei-menu-dropdown .oei-operative-value--highlight{color:var(--rd-honey);font-weight:700}
#oei-menu-dropdown .oei-operative-loading,
#oei-menu-dropdown .oei-operative-empty{
  color:var(--rd-muted);
  font-size:12.5px;
  font-style:italic;
  padding:8px 0;
}
#oei-menu-dropdown .oei-operative-empty{text-align:center}

/* Aktions-Buttons: "Stunde hinzufuegen" / "Material hinzufuegen" */
#oei-menu-dropdown .oei-operative-actions{
  display:flex;gap:8px;margin-top:12px;
}
#oei-menu-dropdown .oei-operative-actions .btn{flex:1}

/* =========================================================================
   "TECHNIKERZUWEISUNG" (.oei-technician-panel / .oei-tech-*)
   ========================================================================= */
#oei-menu-dropdown .oei-technician-panel{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
}
#oei-menu-dropdown .oei-technician-panel h2{
  font-family:var(--rd-font-head);
  font-size:14px;font-weight:700;
  color:var(--rd-ink);letter-spacing:-.01em;
  margin:0 0 12px 0;
}
#oei-menu-dropdown .oei-tech-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
#oei-menu-dropdown .oei-tech-chip{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  background:var(--rd-surf-2);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-md);
  transition:var(--rd-tr);
}
#oei-menu-dropdown .oei-tech-chip:hover{background:var(--rd-surf-3);border-color:var(--rd-border-2)}
#oei-menu-dropdown .oei-tech-name{flex:1;font-weight:600;color:var(--rd-ink);font-size:12.5px}
#oei-menu-dropdown .oei-tech-remove{
  width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--rd-r-sm);
  background:transparent;color:var(--rd-muted);
  font-size:16px;line-height:1;cursor:pointer;
  transition:var(--rd-tr);
}
#oei-menu-dropdown .oei-tech-remove:hover{background:var(--rd-accent-soft);color:var(--rd-accent)}
#oei-menu-dropdown .oei-tech-empty{
  color:var(--rd-muted);font-size:12.5px;font-style:italic;
  padding:9px 12px;
  background:var(--rd-surf-2);
  border:1px dashed var(--rd-border-2);
  border-radius:var(--rd-r-md);
  text-align:center;
}
#oei-menu-dropdown .oei-tech-add{display:flex;gap:8px;align-items:stretch}
#oei-menu-dropdown .oei-tech-select{
  flex:1;
  appearance:none;
  background:var(--rd-surface);
  border:1px solid var(--rd-border-2);
  border-radius:var(--rd-r-sm);
  padding:9px 12px;
  font-family:var(--rd-font-body);
  font-size:13px;
  color:var(--rd-ink);
  transition:var(--rd-tr);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  padding-right:34px;
}
#oei-menu-dropdown .oei-tech-select:focus{outline:none;border-color:var(--rd-accent);box-shadow:var(--rd-ring)}
#oei-menu-dropdown .oei-tech-assign-btn{flex:none;white-space:nowrap}
#oei-menu-dropdown .oei-tech-loading{color:var(--rd-muted);font-size:12.5px;font-style:italic;padding:8px 0}

/* =========================================================================
   "VERRECHNUNG" — Netto/Brutto + Rechnungen (.oei-billing-* / .oei-inv-*)
   ========================================================================= */
#oei-menu-dropdown .oei-billing-panel{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
}
#oei-menu-dropdown .oei-billing-panel h2{
  font-family:var(--rd-font-head);
  font-size:14px;font-weight:700;
  color:var(--rd-ink);letter-spacing:-.01em;
  margin:0 0 12px 0;
}
/* Summen-Block: Mono-Werte auf warmer Flaeche */
#oei-menu-dropdown .oei-billing-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  font-size:13px;
  padding:13px 15px;
  background:var(--rd-surf-2);
  border-radius:var(--rd-r-md);
  margin-bottom:14px;
}
#oei-menu-dropdown .oei-billing-label{color:var(--rd-text-2)}
#oei-menu-dropdown .oei-billing-value{
  text-align:right;
  font-family:var(--rd-font-mono);
  font-weight:700;
  color:var(--rd-ink);
}
#oei-menu-dropdown .oei-billing-value--billable{color:var(--rd-info)}
#oei-menu-dropdown .oei-billing-value--billed{color:var(--rd-ok)}
#oei-menu-dropdown .oei-billing-value--open{color:var(--rd-accent)}
#oei-menu-dropdown .oei-billing-note{
  color:var(--rd-muted);font-size:12.5px;font-style:italic;
  padding:11px 13px;
  background:var(--rd-surf-2);
  border-radius:var(--rd-r-md);
}
#oei-menu-dropdown .oei-billing-section-title{
  font-family:var(--rd-font-head);
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--rd-muted);
  margin:0 0 9px;
}
#oei-menu-dropdown .oei-billing-loading{color:var(--rd-muted);font-size:12.5px;font-style:italic;padding:8px 0}

/* Rechnungsliste */
#oei-menu-dropdown .oei-invoices-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
#oei-menu-dropdown .oei-invoice-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 13px;
  background:var(--rd-surf-2);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-md);
  font-size:12.5px;
  transition:var(--rd-tr);
}
#oei-menu-dropdown .oei-invoice-row:hover{background:var(--rd-surf-3);border-color:var(--rd-border-2)}
#oei-menu-dropdown .oei-inv-no{font-family:var(--rd-font-mono);font-weight:700;color:var(--rd-ink)}
#oei-menu-dropdown .oei-inv-type{color:var(--rd-text-2)}
#oei-menu-dropdown .oei-inv-amount{
  margin-left:auto;
  font-family:var(--rd-font-mono);
  font-weight:700;color:var(--rd-ink);
}
#oei-menu-dropdown .oei-inv-date{color:var(--rd-muted);font-size:11.5px;width:100%;text-align:right}
/* Status-Pillen */
#oei-menu-dropdown .oei-inv-status{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:var(--rd-r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:var(--rd-surf-3);color:var(--rd-text-2);
}
#oei-menu-dropdown .oei-inv-status.oei-inv-paid{background:var(--rd-ok-soft);color:var(--rd-ok)}
#oei-menu-dropdown .oei-inv-status.oei-inv-overdue{background:var(--rd-accent-soft);color:var(--rd-accent)}
#oei-menu-dropdown .oei-inv-status.oei-inv-sent{background:var(--rd-info-soft);color:var(--rd-info)}
#oei-menu-dropdown .oei-inv-status.oei-inv-draft{background:var(--rd-surf-3);color:var(--rd-muted)}
#oei-menu-dropdown .oei-billing-actions{display:flex;gap:8px}
#oei-menu-dropdown .oei-billing-actions .btn{flex:1}

/* =========================================================================
   BUTTONS — warmes Pill-Look (gilt fuer alle .btn im Slide-over)
   ========================================================================= */
#oei-menu-dropdown .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;
  border:none;
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-weight:600;
  font-size:13px;
  transition:var(--rd-tr);
  white-space:nowrap;
  cursor:pointer;
}
#oei-menu-dropdown .btn-primary{background:var(--rd-accent);color:#fff;box-shadow:var(--rd-sh-accent)}
#oei-menu-dropdown .btn-primary:hover{background:var(--rd-accent-700);transform:translateY(-1px)}
#oei-menu-dropdown .btn-secondary{background:var(--rd-accent-soft);color:var(--rd-accent)}
#oei-menu-dropdown .btn-secondary:hover{background:var(--rd-accent);color:#fff}
#oei-menu-dropdown .btn-ghost{background:var(--rd-surface);border:1px solid var(--rd-border-2);color:var(--rd-text)}
#oei-menu-dropdown .btn-ghost:hover{border-color:var(--rd-accent);color:var(--rd-accent);background:var(--rd-accent-soft)}
#oei-menu-dropdown .btn-danger,
#oei-menu-dropdown .btn-ghost.btn-danger{color:var(--rd-accent);border-color:var(--rd-accent-line);background:var(--rd-surface)}
#oei-menu-dropdown .btn-ghost.btn-danger:hover{background:var(--rd-accent);color:#fff;border-color:var(--rd-accent)}

/* Aktionen-Spalte (Buttons untereinander) */
#oei-menu-dropdown .actions-column{display:flex;flex-direction:column;gap:8px}

/* =========================================================================
   Mobile-Feinschliff
   ========================================================================= */
@media (max-width:640px){
  #oei-menu-dropdown .oei-billing-grid{grid-template-columns:1fr auto}
  #oei-menu-dropdown .wg-kpis{grid-template-columns:1fr}
  #oei-menu-dropdown .oei-operative-actions,
  #oei-menu-dropdown .oei-billing-actions{flex-direction:column}
}


/* ===== gemergt aus sh-rd-ed-colconfig.css ===== */
/* =========================================================================
   ServiceHub Redesign — Block 11: PTE Spaltenkopf + Konfig/Reset/Excel/CSV
   Bereich: ed-colconfig
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Restyled NUR:
     - den Spalten-Kopf der Position-Table-Engine (.pte-header-row / .pte-th)
     - die Toolbar-Buttons Spalten-Konfig / Reset / Excel / CSV
       (data-pte-action: columns-config | columns-reset | export-excel | export-csv)
     - das Spalten-Konfig-Menue (#pte-col-config-dialog)
   KEINE Logik, keine Felder, keine Routen, keine Events, keine Rechte.
   Nichts wird versteckt; alle Buttons/Zeilen bleiben sichtbar + klickbar.

   Tokens: eigene --rd-* lokal gescoped auf die Bereichs-Container, damit die
   Datei ladereihenfolge-unabhaengig ist. Werte gespiegelt aus theme.css (warm).
   Light + Dark via [data-theme="dark"]. Nur Tokens, keine Hardcodes im Stil.
   ========================================================================= */

/* ---------- Tokens (Light) — auf alle Bereichs-Container gescoped ---------- */
.pte-toolbar,
.pte-header-row,
#pte-col-config-dialog{
  --rd-accent:#E73D25;
  --rd-accent-700:#C5331E;
  --rd-accent-soft:#FCEDE7;
  --rd-honey:#D99A2B;
  --rd-ok:#16A34A;
  --rd-warn:#C7791A;
  --rd-info:#2F6BD6;
  --rd-violet:#7C5BD6;

  --rd-bg:#FAF6F2;
  --rd-surface:#FFFFFF;
  --rd-surf-2:#F6F1EB;
  --rd-surf-3:#EFE8E0;

  --rd-ink:#231C17;
  --rd-text:#463D35;
  --rd-text-2:#6B6157;
  --rd-muted:#9A8F84;

  --rd-border:#EEE5DC;
  --rd-border-2:#E3D9CE;
  --rd-field:#F6F1EB;

  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-font-mono:'Space Mono',ui-monospace,monospace;

  --rd-r-xs:7px;
  --rd-r-sm:9px;
  --rd-r-md:12px;
  --rd-r-lg:16px;
  --rd-r-pill:999px;

  --rd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .pte-toolbar,
[data-theme="dark"] .pte-header-row,
[data-theme="dark"] #pte-col-config-dialog{
  --rd-accent:#F2543B;
  --rd-accent-700:#E0432B;
  --rd-accent-soft:rgba(242,84,59,.16);
  --rd-honey:#E6AE4A;
  --rd-ok:#3BC07A;
  --rd-warn:#E5A33C;
  --rd-info:#5C8FE8;
  --rd-violet:#9D82E6;

  --rd-bg:#15120F;
  --rd-surface:#1E1A16;
  --rd-surf-2:#241F1A;
  --rd-surf-3:#2C2620;

  --rd-ink:#F6F1EC;
  --rd-text:#E2D8CE;
  --rd-text-2:#B3A99E;
  --rd-muted:#8C8175;

  --rd-border:#2E2822;
  --rd-border-2:#3A332B;
  --rd-field:#241F1A;

  --rd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-sh-lg:0 18px 44px rgba(0,0,0,.5);
}

/* =========================================================================
   1) SPALTENKOPF  (.pte-header-row / .pte-th)
   ========================================================================= */
.pte-header-row{
  background:var(--rd-surf-2);
}

.pte-th{
  font-family:var(--rd-font-head);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-muted);
  border-bottom:1px solid var(--rd-border-2);
  padding:9px 10px;
}

/* Drag-Zustaende warm umgefaerbt */
.pte-th--dragging{
  opacity:.4;
  background:var(--rd-surf-3) !important;
}
.pte-th--drag-over{
  background:var(--rd-accent-soft) !important;
  box-shadow:inset 0 0 0 2px var(--rd-accent);
  border-radius:var(--rd-r-xs);
}

/* Resize-Griff in Akzentfarbe */
.pte-col-resize:hover{ background:var(--rd-accent); opacity:.45; }
.pte-col-resize:active{ background:var(--rd-accent); opacity:.8; }

/* =========================================================================
   2) TOOLBAR-BUTTONS  Spalten-Konfig / Reset / Excel / CSV
   Nur die vier Block-11-Buttons treffen — ueber data-pte-action selektiert,
   damit + Position / Gruppe / Text usw. unangetastet bleiben.
   ========================================================================= */
.pte-toolbar .pte-btn[data-pte-action="columns-config"],
.pte-toolbar .pte-btn[data-pte-action="columns-reset"],
.pte-toolbar .pte-btn[data-pte-action="export-excel"],
.pte-toolbar .pte-btn[data-pte-action="export-csv"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:var(--rd-r-pill);
  border:1px solid var(--rd-border-2);
  background:var(--rd-surface);
  color:var(--rd-text-2);
  font-family:var(--rd-font-body);
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:var(--rd-sh-sm);
  transition:var(--rd-tr);
}

.pte-toolbar .pte-btn[data-pte-action="columns-config"]:hover,
.pte-toolbar .pte-btn[data-pte-action="columns-reset"]:hover,
.pte-toolbar .pte-btn[data-pte-action="export-excel"]:hover,
.pte-toolbar .pte-btn[data-pte-action="export-csv"]:hover{
  border-color:var(--rd-accent);
  color:var(--rd-accent);
  background:var(--rd-accent-soft);
}

.pte-toolbar .pte-btn[data-pte-action="columns-config"]:focus-visible,
.pte-toolbar .pte-btn[data-pte-action="columns-reset"]:focus-visible,
.pte-toolbar .pte-btn[data-pte-action="export-excel"]:focus-visible,
.pte-toolbar .pte-btn[data-pte-action="export-csv"]:focus-visible{
  outline:none;
  box-shadow:var(--rd-ring);
  border-color:var(--rd-accent);
}

/* Export-Buttons (Excel/CSV) bekommen einen dezenten Honig-Akzent beim Hover */
.pte-toolbar .pte-btn[data-pte-action="export-excel"]:hover,
.pte-toolbar .pte-btn[data-pte-action="export-csv"]:hover{
  border-color:var(--rd-honey);
  color:var(--rd-honey);
  background:var(--rd-surf-2);
}

/* =========================================================================
   3) SPALTEN-KONFIG-MENUE  (#pte-col-config-dialog) — als weiche Karte
   Inline-Styles aus der JS-Erzeugung werden gezielt mit hoeherer Spezifitaet
   ueberschrieben (kein !important noetig, ID + Element traegt).
   ========================================================================= */
#pte-col-config-dialog{
  background:var(--rd-surface);
  color:var(--rd-text);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-lg);
  padding:22px 24px;
  font-family:var(--rd-font-body);
}

/* Titel */
#pte-col-config-dialog h3{
  font-family:var(--rd-font-head);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--rd-ink);
}

/* Tabelle im Dialog */
#pte-col-config-dialog table{
  width:100%;
  border-collapse:collapse;
}
#pte-col-config-dialog thead th{
  font-family:var(--rd-font-head);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-muted);
  text-align:left;
  padding:0 8px 8px;
  border-bottom:1px solid var(--rd-border);
}

/* Zeilen */
#pte-col-config-dialog tbody tr{
  border-bottom:1px solid var(--rd-border);
  border-radius:var(--rd-r-sm);
  transition:var(--rd-tr);
}
#pte-col-config-dialog tbody tr:last-child{ border-bottom:none; }
#pte-col-config-dialog tbody tr:hover{ background:var(--rd-surf-2); }
#pte-col-config-dialog tbody td{
  font-size:13px;
  color:var(--rd-text);
  vertical-align:middle;
}
/* Drag-Griff-Spalte + Pflicht-Hinweis dezenter */
#pte-col-config-dialog tbody td[title]{ color:var(--rd-muted); }
#pte-col-config-dialog tbody td span{ color:var(--rd-muted); }

/* Checkbox in Akzentfarbe */
#pte-col-config-dialog input[type="checkbox"]{
  accent-color:var(--rd-accent);
  cursor:pointer;
}
#pte-col-config-dialog input[type="checkbox"]:disabled{
  cursor:not-allowed;
  opacity:.6;
}

/* Dialog-Buttons (Abbrechen / Speichern) */
#pte-col-config-dialog .pte-btn{
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-weight:600;
  transition:var(--rd-tr);
}
#pte-col-config-dialog .pte-btn--ghost{
  background:var(--rd-surface);
  border:1px solid var(--rd-border-2);
  color:var(--rd-text);
}
#pte-col-config-dialog .pte-btn--ghost:hover{
  border-color:var(--rd-accent);
  color:var(--rd-accent);
  background:var(--rd-accent-soft);
}
#pte-col-config-dialog .pte-btn--primary{
  background:var(--rd-accent);
  border:1px solid var(--rd-accent);
  color:#fff;
  box-shadow:0 5px 14px rgba(231,61,37,.28);
}
#pte-col-config-dialog .pte-btn--primary:hover{
  background:var(--rd-accent-700);
  border-color:var(--rd-accent-700);
  transform:translateY(-1px);
}
#pte-col-config-dialog .pte-btn:focus-visible{
  outline:none;
  box-shadow:var(--rd-ring);
}


/* ===== gemergt aus sh-rd-ed-rowactions.css ===== */
/* =========================================================================
   ServiceHub Redesign — BEREICH ed-rowactions
   0b-Block 15: PTE Zeilen-Aktionen (+ / Duplizieren / Loeschen / Mehr-Menue)
   --------------------------------------------------------------------------
   REIN OPTISCH. Keine Logik, keine Felder, keine Endpunkte, keine Events,
   keine Rechte. Nichts wird entfernt oder versteckt. Nur Farbe / Rahmen /
   Radius / Schatten der Icon-Buttons je Positionszeile + des Kontext-Menues.

   Ziel-Markup (position-table-engine.js):
     td.pte-cell--actions  > button.pte-btn.pte-btn--icon  (+ / Dupl. / Mehr)
     td.pte-cell--actions  > button.pte-btn.pte-btn--icon.pte-btn--danger (X Loeschen)
     div.pte-gr-acts       > button.pte-btn.pte-btn--icon  (Gruppen-Akt. + / Menue)
     div.pte-ctx-menu      > button.pte-ctx-item            (Mehr-Menue / Gruppenmenue)

   Tokens lokal auf die jeweiligen Container gescoped -> ladereihenfolge-
   unabhaengig. Das Kontext-Menue wird per JS an document.body angehaengt,
   liegt also ausserhalb von .pte-wrap -> eigener Token-Scope auf .pte-ctx-menu.
   Light + Dark via [data-theme="dark"].
   ========================================================================= */

/* ---------- Tokens (Light) auf die Zeilen-Aktions-Container ---------- */
.pte-cell--actions,
.pte-gr-acts,
.pte-ctx-menu{
  --rd-accent:#E73D25;
  --rd-accent-700:#C5331E;
  --rd-accent-soft:#FCEDE7;
  --rd-danger:#E73D25;
  --rd-danger-soft:#FCEDE7;
  --rd-honey:#D99A2B;
  --rd-violet:#7C5BD6;
  --rd-violet-soft:#F0ECFB;
  --rd-surface:#FFFFFF;
  --rd-surf-2:#F6F1EB;
  --rd-ink:#231C17;
  --rd-text:#463D35;
  --rd-muted:#9A8F84;
  --rd-border:#EEE5DC;
  --rd-border-2:#E3D9CE;
  --rd-r-sm:9px;
  --rd-r-md:12px;
  --rd-shadow:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-shadow-lg:0 14px 34px rgba(120,80,50,.14);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
  --rd-font-body:'Figtree',system-ui,sans-serif;
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .pte-cell--actions,
[data-theme="dark"] .pte-gr-acts,
[data-theme="dark"] .pte-ctx-menu{
  --rd-accent:#F2543B;
  --rd-accent-700:#E0432B;
  --rd-accent-soft:rgba(242,84,59,.16);
  --rd-danger:#F2543B;
  --rd-danger-soft:rgba(242,84,59,.16);
  --rd-honey:#E6AE4A;
  --rd-violet:#9D82E6;
  --rd-violet-soft:rgba(157,130,230,.16);
  --rd-surface:#1E1A16;
  --rd-surf-2:#241F1A;
  --rd-ink:#F6F1EC;
  --rd-text:#E2D8CE;
  --rd-muted:#8C8175;
  --rd-border:#2E2822;
  --rd-border-2:#3A332B;
  --rd-shadow:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-shadow-lg:0 14px 34px rgba(0,0,0,.5);
}

/* =========================================================================
   1) Zeilen-Aktions-Icon-Buttons (+ / Duplizieren / Mehr)
   Container: td.pte-cell--actions und Gruppen-Aktionen div.pte-gr-acts
   Ruhezustand: zurueckhaltend (muted, transparent). Hover: warm -> accent.
   ========================================================================= */
.pte-cell--actions .pte-btn--icon,
.pte-gr-acts .pte-btn--icon{
  color:var(--rd-muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--rd-r-sm);
  min-width:28px;
  line-height:1;
  font-family:var(--rd-font-body);
  transition:color var(--rd-tr),background-color var(--rd-tr),
             border-color var(--rd-tr),box-shadow var(--rd-tr),
             transform var(--rd-tr);
}

/* Hover/Fokus: weicher accent-Teppich, Icon faerbt sich accent */
.pte-cell--actions .pte-btn--icon:hover,
.pte-gr-acts .pte-btn--icon:hover{
  color:var(--rd-accent);
  background:var(--rd-accent-soft);
  border-color:var(--rd-accent-soft);
}
.pte-cell--actions .pte-btn--icon:focus-visible,
.pte-gr-acts .pte-btn--icon:focus-visible{
  outline:none;
  color:var(--rd-accent);
  border-color:var(--rd-accent);
  box-shadow:var(--rd-ring);
}
.pte-cell--actions .pte-btn--icon:active,
.pte-gr-acts .pte-btn--icon:active{
  transform:translateY(.5px);
}

/* Loeschen (X): bleibt dezent in Ruhe, Hover = warmes Rot.
   Selektor deckt sowohl die normale Zeile als auch die Trennlinien-Zeile ab. */
.pte-cell--actions .pte-btn--icon.pte-btn--danger:hover,
.pte-cell--actions .pte-btn--danger.pte-btn--icon:hover{
  color:var(--rd-danger);
  background:var(--rd-danger-soft);
  border-color:var(--rd-danger-soft);
}
.pte-cell--actions .pte-btn--icon.pte-btn--danger:focus-visible{
  outline:none;
  color:var(--rd-danger);
  border-color:var(--rd-danger);
  box-shadow:var(--rd-ring);
}

/* =========================================================================
   2) Kontext-Menue (Mehr-Menue / Gruppenmenue) als weiche, warme Karte
   Container: div.pte-ctx-menu  (per JS an document.body angehaengt)
   ========================================================================= */
.pte-ctx-menu{
  background:var(--rd-surface);
  border:1px solid var(--rd-border-2);
  border-radius:var(--rd-r-md);
  box-shadow:var(--rd-shadow-lg);
  padding:6px;
  font-family:var(--rd-font-body);
}

/* Menue-Eintraege: weiche Pillen-Hover, warme Toene */
.pte-ctx-menu .pte-ctx-item{
  color:var(--rd-text);
  background:transparent;
  border:none;
  border-radius:var(--rd-r-sm);
  padding:8px 12px;
  transition:color var(--rd-tr),background-color var(--rd-tr);
}
.pte-ctx-menu .pte-ctx-item:hover{
  background:var(--rd-surf-2);
  color:var(--rd-ink);
}
.pte-ctx-menu .pte-ctx-item:focus-visible{
  outline:none;
  background:var(--rd-surf-2);
  color:var(--rd-ink);
  box-shadow:var(--rd-ring);
}

/* Loeschen-Eintrag (falls vorhanden): warmes Rot */
.pte-ctx-menu .pte-ctx-item--danger{
  color:var(--rd-danger);
}
.pte-ctx-menu .pte-ctx-item--danger:hover,
.pte-ctx-menu .pte-ctx-item--danger:focus-visible{
  background:var(--rd-danger-soft);
  color:var(--rd-danger);
}

/* KI-Eintrag: warmer Violett-Akzent statt kaltem Blau-Lila */
.pte-ctx-menu .pte-ctx-item--ai{
  color:var(--rd-violet);
  font-weight:600;
}
.pte-ctx-menu .pte-ctx-item--ai:hover,
.pte-ctx-menu .pte-ctx-item--ai:focus-visible{
  background:var(--rd-violet-soft);
  color:var(--rd-violet);
}

/* Die schmalen Inline-Trenner zwischen Menuegruppen (per JS als div mit
   hellem Background erzeugt) warm einfaerben — nur Optik. */
.pte-ctx-menu > div[style]{
  background:var(--rd-border) !important;
}


/* ===== gemergt aus sh-rd-ed-kalk-zahlung.css ===== */
/* =========================================================================
   ServiceHub Re-Design — Bereich "ed-kalk-zahlung"
   Block 17 (Kalkulations-Tab) + Block 18 (Zahlung / "Als bezahlt markieren")
   im Beleg-Editor (doc-editor-layout.js / invoice-editor-integration.js).

   REIN OPTISCH. Keine Logik, keine Felder, keine Endpunkte, keine Routen,
   keine Status, keine Rechte. Nichts wird entfernt oder versteckt — alle
   Buttons/Felder/Zeilen/Tabs bleiben sichtbar und klickbar.

   Scoping: ausschliesslich unter .del-wrap (Editor-Tab-Container) sowie den
   Block-Wurzeln .del-calculation / .del-payment / .qei-status-card. Eigene
   --rd-* Tokens werden auf alle vier Wurzeln dupliziert, damit das Re-Design
   ladereihenfolge-unabhaengig greift. Light + Dark via [data-theme="dark"].

   Hinweis zu Kommentaren: Token-Namen werden hier ohne Stern notiert, und ein
   Kommentar wird immer sauber mit der echten Schliess-Sequenz beendet.
   ========================================================================= */

/* ---------- Tokens (Light) — auf allen Block-Wurzeln gespiegelt ---------- */
.del-wrap,
.del-calculation,
.del-payment,
.qei-status-card{
  --rd-accent:#E73D25; --rd-accent-700:#C5331E; --rd-accent-soft:#FCEDE7;
  --rd-accent-line:rgba(231,61,37,.22);
  --rd-honey:#D99A2B; --rd-honey-soft:#FBF0DA;
  --rd-ok:#16A34A; --rd-ok-soft:#E9F8EF;
  --rd-warn:#C7791A; --rd-warn-soft:#FBF1E0;
  --rd-info:#2F6BD6; --rd-info-soft:#EAF1FC;
  --rd-violet:#7C5BD6; --rd-violet-soft:#F0ECFB;
  --rd-bg:#FAF6F2; --rd-surface:#FFFFFF; --rd-surf-2:#F6F1EB; --rd-surf-3:#EFE8E0;
  --rd-ink:#231C17; --rd-text:#463D35; --rd-text-2:#6B6157; --rd-muted:#9A8F84;
  --rd-border:#EEE5DC; --rd-border-2:#E3D9CE; --rd-field:#F6F1EB;
  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-font-mono:'Space Mono',ui-monospace,monospace;
  --rd-r-xs:7px; --rd-r-sm:9px; --rd-r-md:12px; --rd-r-lg:16px; --rd-r-xl:20px; --rd-r-pill:999px;
  --rd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-sh-accent:0 5px 14px rgba(231,61,37,.28);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .del-wrap,
[data-theme="dark"] .del-calculation,
[data-theme="dark"] .del-payment,
[data-theme="dark"] .qei-status-card{
  --rd-accent:#F2543B; --rd-accent-700:#E0432B; --rd-accent-soft:rgba(242,84,59,.16);
  --rd-accent-line:rgba(242,84,59,.30);
  --rd-honey:#E6AE4A; --rd-honey-soft:rgba(230,174,74,.16);
  --rd-ok:#3BC07A; --rd-ok-soft:rgba(59,192,122,.15);
  --rd-warn:#E5A33C; --rd-warn-soft:rgba(229,163,60,.15);
  --rd-info:#5C8FE8; --rd-info-soft:rgba(92,143,232,.16);
  --rd-violet:#9D82E6; --rd-violet-soft:rgba(157,130,230,.16);
  --rd-bg:#15120F; --rd-surface:#1E1A16; --rd-surf-2:#241F1A; --rd-surf-3:#2C2620;
  --rd-ink:#F6F1EC; --rd-text:#E2D8CE; --rd-text-2:#B3A99E; --rd-muted:#8C8175;
  --rd-border:#2E2822; --rd-border-2:#3A332B; --rd-field:#241F1A;
  --rd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-sh-accent:0 5px 14px rgba(0,0,0,.45);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
}

/* =========================================================================
   BLOCK 17 — Kalkulations-Tab (.del-calculation)
   KPI-Karten (VK / EK / Deckungsbeitrag / Marge), Gruppen- und Positions-
   Tabellen. Warme Karten, Zahlen in Space Mono, Ueberschriften Space Grotesk.
   ========================================================================= */
.del-calculation{
  font-family:var(--rd-font-body);
  color:var(--rd-text);
}
.del-calculation h3{
  font-family:var(--rd-font-head);
  font-size:14.5px;
  font-weight:700;
  color:var(--rd-ink);
  letter-spacing:-.01em;
}

/* KPI-Karten — warme Surface-Kacheln, farbiger Akzentstreifen aus --kpi-color */
.del-calculation .del-kpi{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
  overflow:hidden;
  transition:var(--rd-tr);
}
.del-calculation .del-kpi::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  border-radius:0 var(--rd-r-pill) var(--rd-r-pill) 0;
  background:var(--kpi-color,var(--rd-accent));
}
.del-calculation .del-kpi:hover{
  transform:translateY(-2px);
  box-shadow:var(--rd-sh-accent);
}
.del-calculation .del-kpi-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rd-muted);
}
.del-calculation .del-kpi-value{
  font-family:var(--rd-font-mono);
  font-size:19px;
  font-weight:700;
  color:var(--kpi-color,var(--rd-ink));
  line-height:1.1;
}

/* Tabellen (Gruppen-Kalkulation + Positionen mit EK) — warme data-table */
.del-calculation table.data-table{
  width:100%;
  border-collapse:collapse;
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  overflow:hidden;
  box-shadow:var(--rd-sh-sm);
  margin:6px 0 4px;
}
.del-calculation table.data-table thead th{
  font-family:var(--rd-font-body);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rd-muted);
  text-align:left;
  padding:11px 14px;
  background:var(--rd-surf-2);
  border-bottom:1px solid var(--rd-border);
  white-space:nowrap;
}
.del-calculation table.data-table tbody td{
  padding:11px 14px;
  font-size:13px;
  color:var(--rd-text);
  border-bottom:1px solid var(--rd-border);
  vertical-align:middle;
}
.del-calculation table.data-table tbody tr:last-child td{
  border-bottom:none;
}
.del-calculation table.data-table tbody tr{
  transition:background .12s;
}
.del-calculation table.data-table tbody tr:hover{
  background:var(--rd-surf-2);
}
/* Zahlenspalten (rechtsbuendig per Inline-Style) monospaced + crisper Ink */
.del-calculation table.data-table td[style*="right"]{
  font-family:var(--rd-font-mono);
  color:var(--rd-ink);
  white-space:nowrap;
}
.del-calculation table.data-table th[style*="right"]{
  text-align:right;
}
/* Negative-Marge-Zeilen (Inline-Hintergrund #fdecea) auf warmes Accent-Soft */
.del-calculation table.data-table tr[style*="fdecea"],
.del-calculation table.data-table tr[style*="background:#fdecea"]{
  background:var(--rd-accent-soft);
}

/* Negativ-Kalkulations-Warnung (Inline #fdecea / #e74c3c) auf warmes Accent */
.del-calculation > div[style*="fdecea"]{
  background:var(--rd-accent-soft);
  border:1px solid var(--rd-accent-line);
  border-radius:var(--rd-r-md);
  color:var(--rd-accent-700);
}

/* Hinweistexte ("Keine Positionen", "Keine EK-Preise ...") */
.del-calculation .del-info{
  color:var(--rd-muted);
  font-size:13px;
  line-height:1.55;
}

/* =========================================================================
   BLOCK 18 — Zahlung (.del-payment) + "Als bezahlt markieren"
   Karten, Status-Badge (paid=ok, offen=warn, ueberfaellig=accent),
   Definitionslisten, Zahlungseingangs-Tabelle.
   ========================================================================= */
.del-payment{
  font-family:var(--rd-font-body);
  color:var(--rd-text);
}

/* Grid + Karten */
.del-payment .del-overview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.del-payment .del-card{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
  padding:16px 18px;
}
.del-payment .del-card--full{
  grid-column:1 / -1;
}
.del-payment .del-card h4{
  font-family:var(--rd-font-head);
  font-size:13.5px;
  font-weight:700;
  color:var(--rd-ink);
  margin:0 0 12px;
  letter-spacing:-.01em;
}

/* Status-Badge: paid=ok, offen/teilweise=warn, ueberfaellig=accent */
.del-payment .del-payment-status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-size:11.5px;
  font-weight:700;
  margin-bottom:10px;
  background:var(--rd-surf-2);
  color:var(--rd-text-2);
}
.del-payment .del-payment-status--paid{
  background:var(--rd-ok-soft);
  color:var(--rd-ok);
}
.del-payment .del-payment-status--open,
.del-payment .del-payment-status--partial,
.del-payment .del-payment-status--partially_paid{
  background:var(--rd-warn-soft);
  color:var(--rd-warn);
}
.del-payment .del-payment-status--overdue{
  background:var(--rd-accent-soft);
  color:var(--rd-accent);
}

/* Definitionsliste (Betraege) — Label gedeckt, Wert Ink, Zahlen Mono */
.del-payment .del-dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:7px 16px;
  margin:0;
  font-size:13px;
}
.del-payment .del-dl dt{
  color:var(--rd-text-2);
  font-weight:500;
}
.del-payment .del-dl dd{
  margin:0;
  text-align:right;
  font-family:var(--rd-font-mono);
  font-weight:600;
  color:var(--rd-ink);
}
.del-payment .del-dl dd strong{
  font-weight:700;
  color:var(--rd-ink);
}

/* Zahlungseingangs-Tabelle */
.del-payment .del-simple-table{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
}
.del-payment .del-simple-table thead th{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rd-muted);
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--rd-border);
}
.del-payment .del-simple-table tbody td{
  padding:10px 12px;
  font-size:12.5px;
  color:var(--rd-text);
  border-bottom:1px solid var(--rd-border);
}
.del-payment .del-simple-table tbody tr:last-child td{
  border-bottom:none;
}
.del-payment .del-simple-table td[style*="right"]{
  font-family:var(--rd-font-mono);
  color:var(--rd-ink);
  white-space:nowrap;
}

/* =========================================================================
   "Als bezahlt markieren" — Primaer-CTA in der Status-Karte des Editors
   (.qei-status-card .qei-action-btn--primary). Warmes Accent statt des
   hart inline-gesetzten Gruen. Reiner Farbtausch — Button bleibt sichtbar,
   gleiche Aktion (data-action="mark-paid"). Die Inline-Farbe wird nur fuer
   diese beiden Eigenschaften gezielt ueberschrieben.
   ========================================================================= */
.qei-status-card{
  font-family:var(--rd-font-body);
}
.qei-status-card .qei-status-card__title{
  font-family:var(--rd-font-head);
  color:var(--rd-ink);
  letter-spacing:-.01em;
}
.qei-status-card .qei-status-card__hint{
  color:var(--rd-text-2);
}
.qei-status-card .qei-status-card__action{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

/* Primaer-Button generell warm (greift fuer freigeben / senden / bezahlt) */
.qei-status-card .qei-action-btn--primary{
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-weight:600;
  box-shadow:var(--rd-sh-accent);
  transition:var(--rd-tr);
}
.qei-status-card .qei-action-btn--primary:hover{
  transform:translateY(-1px);
}
/* "Als bezahlt markieren" traegt inline background/border #27ae60 →
   gezielt auf das warme Accent umfaerben (nur Farbe, kein Layout). */
.qei-status-card .qei-action-btn--primary[data-action="mark-paid"][style]{
  background:var(--rd-accent) !important;
  border-color:var(--rd-accent) !important;
  color:#fff !important;
}
.qei-status-card .qei-action-btn--primary[data-action="mark-paid"][style]:hover{
  background:var(--rd-accent-700) !important;
  border-color:var(--rd-accent-700) !important;
}

/* =========================================================================
   Mobile — KPI- und Karten-Grids stapeln (rein optisch)
   ========================================================================= */
@media(max-width:640px){
  .del-calculation > div[style*="repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }
  .del-payment .del-overview-grid{
    grid-template-columns:1fr;
  }
}


/* ===== gemergt aus sh-rd-ed-acceptance-ki.css ===== */
/* =========================================================================
   ServiceHub Redesign — Bereich "ed-acceptance-ki"
   REIN OPTISCH. Keine Funktionsaenderung. Nur Tokens, Farben, Rahmen,
   Radien, Schatten — kein Layout-Umbau, kein display:none auf Controls.

   Block 3  Annahme/Unterschrift-Dialog  (dialog.sh-qacc-dlg, sh-qacc__...)
            warme Karte mit Pop-Schatten, gerundete Zeilen.
   Block 2  KI-Menue / KI-Dropdown        (del-ai-dropdown, del-tab--ai,
            del-ai-menu, del-ai-menu-item, del-ai-menu-section,
            del-ai-menu-divider) + KI-Umschreiben-Knopf im Versand-Dialog
            violett-getoent, Eintraege gerundet mit Hover.

   Scoping: eigene --rd-... Tokens lokal auf die Bereichs-Container
   (.sh-qacc-dlg und .del-ai-menu/.del-ai-dropdown) gesetzt — damit
   ladereihenfolge-unabhaengig. Light hier, Dark via [data-theme="dark"].
   Globale Basis (.btn/.badge/.data-table/:root) NICHT angefasst.
   ========================================================================= */

/* ---------- Tokens (Light) — Annahme/Unterschrift-Dialog ---------- */
.sh-qacc-dlg{
  --rd-accent:#E73D25; --rd-accent-700:#C5331E; --rd-accent-soft:#FCEDE7;
  --rd-honey:#D99A2B; --rd-ok:#16A34A; --rd-ok-soft:#E9F8EF;
  --rd-warn:#C7791A; --rd-info:#2F6BD6;
  --rd-bg:#FAF6F2; --rd-surface:#FFFFFF; --rd-surf-2:#F6F1EB; --rd-surf-3:#EFE8E0;
  --rd-ink:#231C17; --rd-text:#463D35; --rd-text-2:#6B6157; --rd-muted:#9A8F84;
  --rd-border:#EEE5DC; --rd-border-2:#E3D9CE;
  --rd-no:#D92D20; --rd-no-soft:#FCEBE9;
  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-font-mono:'Space Mono',ui-monospace,monospace;
  --rd-r-xs:7px; --rd-r-sm:9px; --rd-r-md:12px; --rd-r-lg:16px; --rd-r-xl:20px; --rd-r-pill:999px;
  --rd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-sh-pop:0 24px 60px rgba(120,80,50,.20),0 4px 14px rgba(120,80,50,.10);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .sh-qacc-dlg{
  --rd-accent:#F2543B; --rd-accent-700:#E0432B; --rd-accent-soft:rgba(242,84,59,.16);
  --rd-honey:#E6AE4A; --rd-ok:#3BC07A; --rd-ok-soft:rgba(59,192,122,.15);
  --rd-warn:#E5A33C; --rd-info:#5C8FE8;
  --rd-bg:#15120F; --rd-surface:#1E1A16; --rd-surf-2:#241F1A; --rd-surf-3:#2C2620;
  --rd-ink:#F6F1EC; --rd-text:#E2D8CE; --rd-text-2:#B3A99E; --rd-muted:#8C8175;
  --rd-border:#2E2822; --rd-border-2:#3A332B;
  --rd-no:#F2675A; --rd-no-soft:rgba(217,45,32,.18);
  --rd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-sh-pop:0 24px 60px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.45);
}

/* ---------- Backdrop (warmer Schleier) ---------- */
.sh-qacc-dlg::backdrop{
  background:rgba(35,28,23,.46);
  backdrop-filter:blur(2px);
}

/* ---------- Dialog-Karte ---------- */
.sh-qacc-dlg{
  border:none;
  padding:0;
  background:transparent;
  color:var(--rd-text);
  font-family:var(--rd-font-body);
}
.sh-qacc-dlg .panel{
  max-width:520px;
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-pop);
  padding:22px 24px;
  color:var(--rd-text);
}
.sh-qacc-dlg .panel > h2{
  font-family:var(--rd-font-head);
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--rd-ink);
  padding-bottom:14px;
  border-bottom:1px solid var(--rd-border);
}

/* ---------- Datenzeilen ---------- */
.sh-qacc-dlg .sh-qacc__row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  padding:.46rem .55rem;
  margin:1px 0;
  border-bottom:none;
  border-radius:var(--rd-r-sm);
  font-size:.86rem;
  transition:background var(--rd-tr);
}
.sh-qacc-dlg .sh-qacc__row:nth-child(odd){
  background:var(--rd-surf-2);
}
.sh-qacc-dlg .sh-qacc__row:hover{
  background:var(--rd-surf-3);
}
.sh-qacc-dlg .sh-qacc__row:last-of-type{border-bottom:none;}
.sh-qacc-dlg .sh-qacc__k{
  color:var(--rd-text-2);
  font-weight:500;
}
.sh-qacc-dlg .sh-qacc__v{
  font-weight:600;
  color:var(--rd-ink);
  text-align:right;
}
.sh-qacc-dlg .sh-qacc__ok{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 10px;
  border-radius:var(--rd-r-pill);
  background:var(--rd-ok-soft);
  color:var(--rd-ok);
  font-weight:700;
  font-size:.8rem;
}
.sh-qacc-dlg .sh-qacc__no{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 10px;
  border-radius:var(--rd-r-pill);
  background:var(--rd-no-soft);
  color:var(--rd-no);
  font-weight:700;
  font-size:.8rem;
}

/* ---------- Unterschrift-Box ---------- */
.sh-qacc-dlg .sh-qacc__sig{
  margin-top:.9rem;
  border:1px solid var(--rd-border-2);
  border-radius:var(--rd-r-md);
  padding:.8rem;
  background:#fff;
  text-align:center;
  box-shadow:var(--rd-sh-sm);
  position:relative;
}
.sh-qacc-dlg .sh-qacc__sig::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:var(--rd-r-md) 0 0 var(--rd-r-md);
  background:var(--rd-ok);
}
.sh-qacc-dlg .sh-qacc__sig img{
  max-width:100%;
  max-height:170px;
  border-radius:var(--rd-r-xs);
}
.sh-qacc-dlg .sh-qacc__sig-meta{
  font-size:.78rem;
  color:var(--rd-text-2);
  margin-top:.5rem;
  line-height:1.45;
}
.sh-qacc-dlg .sh-qacc__sig-meta b{color:var(--rd-ink);}

/* ---------- Leer / Lade-Zustand ---------- */
.sh-qacc-dlg .sh-qacc__empty{
  padding:1.4rem .4rem;
  text-align:center;
  color:var(--rd-text-2);
  line-height:1.55;
  font-size:.9rem;
}
.sh-qacc-dlg .sh-qacc__empty b{color:var(--rd-ink);}

/* ---------- Schliessen-Knopf (nur farblich angleichen) ---------- */
.sh-qacc-dlg .panel > div:last-child .btn-ghost{
  border-radius:var(--rd-r-pill);
}

/* =========================================================================
   Block 2 — KI-Menue / KI-Dropdown (violett-getoent)
   ========================================================================= */

/* ---------- Tokens (Light) — KI-Menue ---------- */
.del-ai-dropdown,
.del-ai-menu{
  --rd-violet:#7C5BD6; --rd-violet-700:#6A49C4; --rd-violet-soft:#F0ECFB;
  --rd-violet-line:rgba(124,91,214,.22);
  --rd-surface:#FFFFFF; --rd-surf-2:#F6F1EB;
  --rd-ink:#231C17; --rd-text:#463D35; --rd-text-2:#6B6157; --rd-muted:#9A8F84;
  --rd-border:#EEE5DC; --rd-border-2:#E3D9CE;
  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-r-sm:9px; --rd-r-md:12px; --rd-r-lg:16px; --rd-r-pill:999px;
  --rd-sh-pop:0 18px 44px rgba(80,55,130,.18),0 4px 12px rgba(80,55,130,.10);
  --rd-tr:.15s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .del-ai-dropdown,
[data-theme="dark"] .del-ai-menu{
  --rd-violet:#9D82E6; --rd-violet-700:#8A6FDC; --rd-violet-soft:rgba(157,130,230,.16);
  --rd-violet-line:rgba(157,130,230,.30);
  --rd-surface:#1E1A16; --rd-surf-2:#241F1A;
  --rd-ink:#F6F1EC; --rd-text:#E2D8CE; --rd-text-2:#B3A99E; --rd-muted:#8C8175;
  --rd-border:#2E2822; --rd-border-2:#3A332B;
  --rd-sh-pop:0 18px 44px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4);
}

/* ---------- KI-Toggle-Button (del-tab--ai) ---------- */
.del-tab--ai{
  color:var(--rd-violet);
  font-family:var(--rd-font-body);
  font-weight:600;
  border-radius:var(--rd-r-pill);
  transition:background var(--rd-tr),color var(--rd-tr),box-shadow var(--rd-tr);
}
.del-tab--ai:hover{
  background:var(--rd-violet-soft);
  color:var(--rd-violet-700);
}
.del-tab--ai.del-tab--active{
  background:var(--rd-violet-soft);
  color:var(--rd-violet-700);
  box-shadow:inset 0 0 0 1px var(--rd-violet-line);
}

/* ---------- KI-Menue (Dropdown-Panel) ---------- */
.del-ai-menu{
  background:var(--rd-surface);
  border:1px solid var(--rd-violet-line);
  border-radius:var(--rd-r-md);
  box-shadow:var(--rd-sh-pop);
  padding:6px;
  color:var(--rd-text);
  font-family:var(--rd-font-body);
}

/* ---------- Menue-Eintraege (gerundet, Hover) ---------- */
.del-ai-menu .del-ai-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 12px;
  border:none;
  background:transparent;
  color:var(--rd-text);
  font-family:var(--rd-font-body);
  font-size:.85rem;
  font-weight:500;
  border-radius:var(--rd-r-sm);
  cursor:pointer;
  transition:background var(--rd-tr),color var(--rd-tr);
}
.del-ai-menu .del-ai-menu-item:hover{
  background:var(--rd-violet-soft);
  color:var(--rd-violet-700);
}
.del-ai-menu .del-ai-menu-item:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--rd-violet-line);
}

/* ---------- hervorgehobener KI-Chat-Eintrag (Copilot) ----------
   Markup setzt inline background:#6366f1 — wir tonen ihn auf das
   warme Violett um, ohne den Eintrag zu verstecken oder umzubauen. */
.del-ai-menu .del-ai-menu-item[data-ai-action="ai-chat"]{
  background:var(--rd-violet);
  color:#fff;
  font-weight:700;
  border-radius:var(--rd-r-sm);
  margin:4px 2px;
  box-shadow:0 5px 14px rgba(124,91,214,.28);
}
.del-ai-menu .del-ai-menu-item[data-ai-action="ai-chat"]:hover{
  background:var(--rd-violet-700);
  color:#fff;
}

/* ---------- Sektion-Ueberschriften ---------- */
.del-ai-menu .del-ai-menu-section{
  font-family:var(--rd-font-head);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-muted);
  padding:8px 12px 4px;
}

/* ---------- Trenner ---------- */
.del-ai-menu .del-ai-menu-divider{
  height:1px;
  margin:5px 8px;
  background:var(--rd-border);
  border:none;
}

/* =========================================================================
   Block 2 (Forts.) — KI-Umschreiben-Knopf im Versand-Dialog
   (#qeiSendKi) violett-getoent, damit die KI-Aktion einheitlich wirkt.
   Nur Farbe/Rahmen/Radius — keine Logik.
   ========================================================================= */
#qeiSendDialog #qeiSendKi{
  --rd-violet:#7C5BD6; --rd-violet-700:#6A49C4; --rd-violet-soft:#F0ECFB;
  --rd-violet-line:rgba(124,91,214,.30);
  background:var(--rd-violet-soft);
  color:var(--rd-violet-700);
  border:1px solid var(--rd-violet-line);
  border-radius:999px;
  font-weight:600;
  transition:background .15s cubic-bezier(.2,.7,.3,1),color .15s cubic-bezier(.2,.7,.3,1);
}
#qeiSendDialog #qeiSendKi:hover{
  background:var(--rd-violet);
  color:#fff;
  border-color:var(--rd-violet);
}
[data-theme="dark"] #qeiSendDialog #qeiSendKi{
  --rd-violet:#9D82E6; --rd-violet-700:#B49CEC; --rd-violet-soft:rgba(157,130,230,.16);
  --rd-violet-line:rgba(157,130,230,.34);
}