/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  /* Brand */
  --color-primary:        #0370B0;
  --color-accent-blue:    #2563eb;  /* blue-600 — Info-/Edit-Akzente (UI-Audit P3) */
  --color-primary-hover:  #025d94;
  --color-primary-light:  #e8f3fa;
  --color-primary-text:   #ffffff;

  /* Neutrals */
  --color-bg:             #f3f4f6;
  --color-surface:        #ffffff;
  --color-border:         #e5e7eb;
  --color-border-strong:  #d1d5db;

  /* Text */
  --color-text:           #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;
  --color-text-soft:      #6b7280;  /* gray-500 — zwischen secondary und muted (UI-Audit P3) */

  /* Semantic */
  --color-success:        #16a34a;
  --color-success-bg:     #dcfce7;
  --color-success-text:   #15803d;
  --color-warning:        #d97706;
  --color-warning-bg:     #fef3c7;
  --color-warning-text:   #b45309;
  --color-error:          #dc2626;
  --color-error-bg:       #fee2e2;
  --color-error-text:     #b91c1c;
  --color-info:           #0370B0;
  --color-info-bg:        #e8f3fa;
  --color-info-text:      #025d94;

  /* Layout */
  --sidebar-width:        240px;
  --topbar-height:        60px;

  /* Spacing */
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;

  /* Z-Index Skala — vermeidet Magic-Numbers im ganzen Stylesheet */
  --z-sticky:    1;
  --z-sidebar:   100;
  --z-topbar:    200;
  --z-dropdown:  500;
  --z-modal:     1000;
  --z-popover:   1100;   /* Searchable-Select, Tooltips — über Modals */
  --z-toast:     1200;
  /* Hohe Sonder-Ebenen (UI-Audit P4) — bestehende Magic Numbers, nur benannt: */
  --z-overlay:       2000;   /* Vollbild-Overlays über allem Normalen */
  --z-overlay-modal: 3000;   /* bl-modal/gaeb-map (historisch über --z-modal-Konsumenten) */
  --z-flyout:        8900;   /* Help-Chat-Panel */
  --z-alert:         9500;   /* System-Alerts */
  --z-max:           9999;

  /* Erweiterte Farb-Palette für Komponenten, die nicht 1:1 in den Brand-Tokens landen */
  --color-indigo-500:    #6366f1;
  --color-indigo-600:    #4338ca;
  --color-indigo-50:     #eef2ff;
  --color-cyan-500:      #0ea5e9;
  --color-blue-700:      #1e40af;
  --color-blue-100:      #dbeafe;
  --color-amber-700:     #b45309;
  --color-emerald-300:   #86efac;
  --color-green-700:     #166534;
  --color-surface-alt:   #fafbfc;   /* Karten-Header / Filter-Leisten */
  --color-surface-muted: #fafafa;   /* Optgroup-Label Hintergrund */
  --color-surface-soft:  #f9fafb;   /* Hover-Backgrounds */
  --color-slate-300:     #cbd5e1;
  --color-gray-50:       #f9fafb;
  --color-gray-100:      #f3f4f6;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.14);

  /* Typography */
  --font-family: 'Inter', system-ui, sans-serif;
  --font-size-2xs:  10px;          /* Sub-Tiny: Tabellen-Cell-Annotations, Mini-Chips */
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;
  --icon-size:      20px;          /* Standard-Icongröße (material-symbols) */
  --icon-size-lg:   24px;

  /* ── Semantische Token-Erweiterungen ───────────────────────────────────
   * Wurden im UI-Konsistenz-Refactor eingeführt, damit Party-Farben,
   * Rating-Sterne und Begründungs-Block-Farben nicht mehr als Inline-Hex
   * im HTML kleben.                                                       */
  --color-party-sub:        #6366f1;    /* NU / Subcontractor */
  --color-party-sub-bg:     #eef2ff;
  --color-party-dealer:     #0ea5e9;    /* Händler / Dealer */
  --color-party-dealer-bg:  #e0f2fe;
  --color-rating:           #f59e0b;
  --color-rating-bg:        #fef3c7;
  --color-reason-bg:        #fffbeb;    /* Amber-50  */
  --color-reason-border:    #fde68a;    /* Amber-200 */
  --color-reason-text:      #92400e;    /* Amber-800 */

  /* Transition */
  --transition: 150ms ease;
}

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Material Symbols: lokal gehostet ───────────────────────────────────
   Variable Font (nur FILL-Axis aktiv, weil das einzige was wir toggeln).
   ~445 KB statt ~3,8 MB bei vollvariabler Version, ~150 KB vs. 400+ KB
   gegenüber den statischen Single-Weight-Files.

   `font-display: block` versteckt den Fallback-Text während der Block-
   Period (~3 s) — kein „expand_more"-Wortsalat mehr beim ersten Load.
   Same-Origin → kein zusätzlicher DNS/TLS-Handshake. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

/* Material Symbols config */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* Variante: gefüllt (z. B. für Sterne, Badges, …). Die Glyphe selbst (z. B.
   `star`) ist gleich; nur die FILL-Axis macht den Unterschied zwischen
   outline und solid. Mit `.is-filled` auf dem Icon-Element nutzbar. */
.material-symbols-outlined.is-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
body { display: flex; }

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0; /* Flex-Item neben der Sidebar darf schrumpfen → kein horizontaler Seiten-Scroll */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════
   SIDEBAR BRAND
═══════════════════════════════════════════════ */
.sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
/* Wenn ein Company-Logo statt des Standard-Icons gerendert wird,
   geben wir ihm moderaten Vertikalraum: leicht reduziertes Padding +
   max-height auf ca. 2/3 der Brand-Box-Höhe. So bleibt visueller
   Atemraum um das Logo herum erhalten — kein „bildschirmfüllendes
   Logo"-Look. Modifier-Klasse statt `:has()` für ältere Browser. */
.sidebar-brand--has-logo {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.brand-logo {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  flex: 1;
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
}

.brand-text { display: flex; flex-direction: column; }
.brand-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.brand-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════
   SIDEBAR-COLLAPSE
═══════════════════════════════════════════════ */
.sidebar-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sidebar-toggle:hover { background: var(--color-bg); color: var(--color-text); }
.sidebar-toggle .material-symbols-outlined { font-size: var(--font-size-xl); }
/* Default: zeige „chevron_left" (zum Einklappen); im collapsed-Mode „chevron_right". */
.sidebar-toggle__icon-collapse { display: none; }

body.is-sidebar-collapsed .sidebar-toggle__icon-expand   { display: none; }
body.is-sidebar-collapsed .sidebar-toggle__icon-collapse { display: inline-flex; }

/* Collapsed-State: Sidebar schrumpft auf reine Icon-Spalte. */
body.is-sidebar-collapsed .sidebar {
  width: var(--sidebar-width-collapsed, 64px);
  min-width: var(--sidebar-width-collapsed, 64px);
}
body.is-sidebar-collapsed .main-wrapper {
  margin-left: var(--sidebar-width-collapsed, 64px);
}

/* Brand: im Collapsed-Modus verschwindet das Brand-Icon UND der Text —
   übrig bleibt nur der Toggle-Button, der die ganze Brand-Box füllt. */
body.is-sidebar-collapsed .sidebar-brand {
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  gap: 0;
}
body.is-sidebar-collapsed .sidebar-brand .brand-icon,
body.is-sidebar-collapsed .sidebar-brand .brand-text,
body.is-sidebar-collapsed .sidebar-brand .brand-logo { display: none; }
body.is-sidebar-collapsed .sidebar-brand .sidebar-toggle {
  margin: 0;                /* kein margin-left: auto mehr nötig */
}

/* Nav-Items: Icon zentrieren, Label + Section-Header + Badges ausblenden. */
body.is-sidebar-collapsed .sidebar-nav { padding-left: 8px; padding-right: 8px; }
body.is-sidebar-collapsed .nav-item    { justify-content: center; padding-left: 0; padding-right: 0; }
/* Eingeklappte Sidebar: eigenes Hover-Tooltip (per JS an <body> gehängt,
   position:fixed → wird NICHT vom overflow der .sidebar-nav abgeschnitten).
   Bewusst kein natives title-Attribut. Farben invertiert über Theme-Tokens
   (--color-text als Hintergrund, --color-surface als Text) → funktioniert in
   Light- und Dark-Theme. Die Icons bleiben in Normalgröße (18px, Default). */
.nav-tooltip {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--color-text);
  color: var(--color-surface);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-tooltip.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); }
body.is-sidebar-collapsed .nav-label, body.is-sidebar-collapsed .nav-section-label, body.is-sidebar-collapsed .nav-badge, body.is-sidebar-collapsed .nav-chevron { display: none !important; }

/* Eingeklappte Dropdowns ausblenden (sonst hängen Items unter der Sidebar) */


/* Eingeklappt: Das Hauptmenü (.nav-section--main) bleibt als Icons sichtbar.
   Der untere Block (.nav-section--secondary: Administration/Verwaltung) wird
   NICHT mehr komplett versteckt, sondern über den Overflow-Trigger
   (.nav-flyout-trigger) als Flyout erreichbar gemacht. */
/* Nur eingeklappt sichtbare Elemente: der „Mehr"-Trigger und Direkt-Shortcuts
   (z. B. Superuser). Spezifität (0,2,1) muss die .nav-item-Basisregel
   (display:flex, 0,1,0) schlagen, sonst blieben sie auch ausgeklappt sichtbar. */
body:not(.is-sidebar-collapsed) .nav-flyout-trigger,
body:not(.is-sidebar-collapsed) .nav-collapsed-only { display: none; }
body.is-sidebar-collapsed .nav-flyout-trigger,
body.is-sidebar-collapsed .nav-collapsed-only { display: flex; }

body.is-sidebar-collapsed .nav-section--secondary {
  display: none;                                             /* zu, bis der Trigger öffnet */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  max-height: min(80vh, 560px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .18));
}
body.is-sidebar-collapsed .nav-section--secondary.is-open { display: block; animation: account-popup-in .12s ease-out; }

/* Im Flyout volle Beschriftung + Sub-Items zeigen (die allgemeinen Collapse-
   Regeln blenden Labels/Sub-Items/Sektion-Überschriften sonst aus). */
body.is-sidebar-collapsed .nav-section--secondary .nav-label,
body.is-sidebar-collapsed .nav-section--secondary .nav-section-label,
body.is-sidebar-collapsed .nav-section--secondary .nav-badge { display: revert !important; }
body.is-sidebar-collapsed .nav-section--secondary .nav-sub { display: flex !important; padding-left: 0; }
body.is-sidebar-collapsed .nav-section--secondary .nav-chevron, body.is-sidebar-collapsed .nav-section--secondary > .nav-divider:first-child { display: none !important; }

/* Linksbündig im Flyout: die Collapse-Regel (Z. ~316) zentriert die Items und
   nullt ihr Padding — beides hier zurücknehmen, damit Icons + Labels auf einer
   gemeinsamen linken Kante stehen (Items, Sub-Items und Sektion-Labels gleich
   ausgerichtet). Höhere Spezifität (0,3,1) schlägt die Collapse-Regel. */
body.is-sidebar-collapsed .nav-section--secondary .nav-item {
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
}
body.is-sidebar-collapsed .nav-section--secondary .nav-sub-item   { padding-left: 10px; padding-right: 10px; }
body.is-sidebar-collapsed .nav-section--secondary .nav-section-label { padding-left: 10px; }

/* Superuser aus dem „Mehr"-Flyout entfernen — es hat sein eigenes Flyout. */


/* Eigenständiges Nav-Flyout (Superuser): immer versteckt, nur .is-open (per
   Trigger, nur eingeklappt) zeigt es. Gleicher Look wie das „Mehr"-Flyout. */
.nav-flyout-panel {
  display: none;
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  max-height: min(80vh, 560px);
  overflow-y: auto;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .18));
}
.nav-flyout-panel.is-open { display: block; animation: account-popup-in .12s ease-out; }
.nav-flyout-panel .nav-sub { display: flex; padding-left: 0; }
body.is-sidebar-collapsed .nav-flyout-panel .nav-label { display: revert !important; }
body.is-sidebar-collapsed .nav-flyout-panel .nav-item {
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
}
body.is-sidebar-collapsed .nav-flyout-panel .nav-sub-item { padding-left: 10px; padding-right: 10px; }

/* Footer / User-Karte: bei collapsed nur Avatar, Logout-Button darunter
   gestapelt — sonst quetscht sich beides in eine schmale Zeile. */
body.is-sidebar-collapsed .user-info { display: none; }
body.is-sidebar-collapsed .sidebar-footer {
  flex-direction: column;
  gap: var(--space-2);
  padding-left: 0;
  padding-right: 0;
}
body.is-sidebar-collapsed .sidebar-user { justify-content: center; flex: 0 0 auto; }

/* Tooltip via title-Attribut nutzen die Browser eh — kein extra CSS nötig. */

/* ═══════════════════════════════════════════════
   SIDEBAR NAV
═══════════════════════════════════════════════ */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-3) var(--space-2);
  display: block;
}
.nav-section-label:first-child { padding-top: var(--space-2); }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

.nav-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.nav-item--danger { color: var(--color-error); }
.nav-item--danger:hover { background: var(--color-error-bg); color: var(--color-error); }

.nav-icon { font-size: var(--font-size-xl); }

.nav-chevron {
  margin-left: auto;
  font-size: var(--font-size-lg);
  transition: transform var(--transition);
}
.nav-group-toggle[aria-expanded="false"] .nav-chevron {
  transform: rotate(-90deg);
}

.nav-badge {
  margin-left: auto;
  background: var(--color-error);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
/* Neutraler Counter-Badge (z. B. offene Freigaben) — Primary statt Error. */
.nav-badge--count {
  background: var(--color-primary);
  padding: 1px 7px;
  line-height: 1.3;
}

/* Sub nav */
.nav-sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-left: var(--space-6);
  margin-top: 2px;
}
.nav-sub.open { display: flex; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition);
}
.nav-sub-item:hover { background: var(--color-bg); color: var(--color-text); }
.nav-sub-item.active { color: var(--color-primary); background: var(--color-primary-light); font-weight: 600; }
.nav-sub-icon { font-size: var(--font-size-lg); }

/* Gruppen-Überschrift im Superuser-Flyout (zwischen den .nav-sub-item-Gruppen). */
.nav-sub-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) 2px;
}
.nav-sub-label:first-child { padding-top: 2px; }

/* Engere Variante für Gruppen, die als dauerhaft offene Sub-Navi rendern. */
.nav-sub--tight { gap: 0; margin-top: 0; }
.nav-sub--tight .nav-sub-item { padding-top: 3px; padding-bottom: 3px; }

/* Hybrid-Pattern: Hauptpunkt = Link, daneben separater Chevron-Button. */
.nav-item-split {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.nav-item-split .nav-item--linked { flex: 1; }


/* ═══════════════════════════════════════════════
   SIDEBAR FOOTER
═══════════════════════════════════════════════ */
.sidebar-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  /* Click-Target: Block ist seit dem Profil-Feature ein <a>-Element */
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.sidebar-user:hover {
  background: rgba(99, 102, 241, .08);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-info { display: flex; flex-direction: column; min-width: 0; }
.user-name  { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ── Account-Popup (Konto-Flyout aus dem Avatar) ──────────────────────────
   Vor allem für den eingeklappten Modus: dort sind Name/Rolle ausgeblendet
   und das Sekundär-Menü versteckt — der Klick auf den Avatar öffnet dann
   dieses Flyout (per JS, position:fixed → kein Clipping durch die Sidebar). */
.sidebar-account { position: relative; flex: 1; min-width: 0; display: flex; }
.sidebar-account .sidebar-user { flex: 1; min-width: 0; }
body.is-sidebar-collapsed .sidebar-account { flex: 0 0 auto; }
/* Eingeklappt: separater Logout-Button entfällt — „Abmelden" liegt im Popup. */
body.is-sidebar-collapsed .sidebar-footer__logout { display: none; }

.account-popup {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 232px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .18));
  padding: 6px;
  display: none;
}
.account-popup.is-open { display: block; animation: account-popup-in .12s ease-out; }
@keyframes account-popup-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.account-popup__header { display: flex; align-items: center; gap: var(--space-3); padding: 8px 10px 10px; }
.account-popup__id   { display: flex; flex-direction: column; min-width: 0; }
.account-popup__name { font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-popup__role { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.account-popup__sep  { border: 0; border-top: 1px solid var(--color-border); margin: 4px 0; }
.account-popup__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px 10px;
  border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none;
  font-size: var(--font-size-base); line-height: 1.1;
  transition: background .12s ease;
}
.account-popup__item:hover { background: var(--color-surface-alt, rgba(99, 102, 241, .08)); }
/* Logout ist ein <button> in einem POST-Formular (CSRF) — Button-Defaults auf die <a>-Optik zurücksetzen. */
button.account-popup__item { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.account-popup__item .material-symbols-outlined { font-size: 1.25rem; color: var(--color-text-muted); }
.account-popup__item--danger,
.account-popup__item--danger .material-symbols-outlined { color: var(--color-error, #b91c1c); }

/* ═══════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left { display: flex; flex-direction: column; justify-content: center; }
.topbar-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); line-height: 1.2; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 1px;
}
.breadcrumb-item { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.breadcrumb-item.active { color: var(--color-primary); font-weight: 500; }
.breadcrumb-sep { font-size: var(--font-size-base); color: var(--color-text-muted); }

.topbar-right { display: flex; align-items: center; gap: var(--space-2); }

/* ═══════════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════════ */
.content {
  flex: 1;
  min-width: 0; /* Flex-Item darf unter die Inhaltsbreite schrumpfen → kein horizontaler Seiten-Scroll */
  padding: var(--space-4);
  /* Extra Luft unten: der schwebende Hilfe-Chat-Button (unten rechts) darf nie über Inhalt liegen */
  padding-bottom: 100px;
  overflow-y: auto;
}

.page { display: none; }
.page.active { display: block; }

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════ */
.heading-1 { font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-text); }
.heading-2 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); }
.heading-3 { font-size: var(--font-size-lg);  font-weight: 600; color: var(--color-text); }
.heading-4 { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); }
/* heading-5 / heading-6 fehlten — werden in show.php / show-public.php
 * referenziert. Kleiner als h4, h6 als Caps-Eyebrow. */
.heading-5 { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }


.text-2xs { font-size: var(--font-size-2xs); }
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }

.text-xl   { font-size: var(--font-size-xl); }
.text-bold { font-weight: 600; }
.text-muted  { color: var(--color-text-muted); }
.text-soft   { color: var(--color-text-soft); }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.ml-auto { margin-left: auto; }
.mt-4    { margin-top: var(--space-4); }
.text-right { text-align: right; }

/* ── Utility-Klassen (UI-Audit Paket 1, 2026-07-13): decken die häufigsten
   Inline-Style-Muster ab — Spacing an der --space-Skala (mb-4 = 16px = 1rem). */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.inline { display: inline; }
.flex   { display: flex; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.align-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-1); }
.gap-sm { gap: var(--space-2); }


.nowrap { white-space: nowrap; }
.pointer { cursor: pointer; }
.link-plain { text-decoration: none; color: inherit; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-mono   { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.btn .material-symbols-outlined { font-size: var(--font-size-lg); }

/* Doppelt so groß wie .btn — für prominente Bottom-Actions */
.btn--xl {
  padding: 14px var(--space-7, 28px);
  font-size: var(--font-size-lg);
  gap: var(--space-3, 10px);
}
.btn--xl .material-symbols-outlined { font-size: var(--font-size-3xl); }

/* Größe wie ein .form-input (Default, ohne --sm Modifier) — passt visuell als Submit-Button neben einem Input. */
.btn--lg {
  padding: var(--space-3-5) var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.btn--lg .material-symbols-outlined { font-size: var(--icon-size); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* UI-Audit Paket 2: zentrale Erfolgs-Variante (war nur view-lokal in
   orders/public.php — die self-contained Public-Seite behält ihre Kopie)
   + Block-Button für Auth-Seiten statt style="width:100%". */
.btn--success {
  background: var(--color-success); color: #fff; border-color: var(--color-success);
}
.btn--success:hover { background: #15803d; border-color: #166534; }
.btn--block { width: 100%; justify-content: center; }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-bg); }

.btn--danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}
.btn--danger:hover { background: #b91c1c; }

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--color-bg); color: var(--color-text); }

.btn--icon {
  padding: 6px;
  border-radius: var(--radius-md);
  position: relative;
}

.btn--sm {
  padding: 7px var(--space-3);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  height: 34px;
  box-sizing: border-box;
}
.btn--sm .material-symbols-outlined { font-size: var(--font-size-base); }

.btn-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: var(--color-error);
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
/* Dynamisch gefärbte Chips (UI-Audit P4): Farbe als Custom-Property setzen —
   <span class="badge badge--custom" style="--badge-color:var(--color-success)">…</span>
   (12 % Alpha-Hintergrund via color-mix; Fallback = neutraler Chip). */
.badge--custom {
  color: var(--badge-color, var(--color-text-soft));
  background: color-mix(in srgb, var(--badge-color, var(--color-text-soft)) 12%, transparent);
}
/* Kleiner Farb-Punkt (Legenden/Auswahl) statt Inline-Kreis. */
.color-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-color, var(--color-text-muted));
}
/* Badge-Modifier (single-dash) — siehe konsolidierte Definition Z. ~9362.
   Frühere Duplikat-Definitionen hier (Z. 706-709) entfernt: identische
   Property-Werte wurden später unverändert nochmal definiert; im Cascade
   gewann immer der spätere Block, der frühere war effektiv tot.
   .badge--error trägt im späteren Block zusätzlich font-weight:700. */

/* ═══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
}

.card-header-actions { display: flex; align-items: center; gap: var(--space-2); }

.card-body { padding: var(--space-5) var(--space-6); }
.card-body.p-0 { padding: 0; }

.card-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ═══════════════════════════════════════════════
   STATS
═══════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon .material-symbols-outlined { font-size: var(--font-size-2xl); color: #fff; }
.stat-icon--blue   { background: var(--color-primary); }
.stat-icon--green  { background: var(--color-success); }
.stat-icon--yellow { background: var(--color-warning); }
.stat-icon--red    { background: var(--color-error); }

.stat-body { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); line-height: 1.2; }
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.stat-delta .material-symbols-outlined { font-size: var(--font-size-sm); }
.stat-delta.positive { color: var(--color-success); }
.stat-delta.negative { color: var(--color-error); }
.stat-delta.neutral  { color: var(--color-text-muted); }

/* Klickbare Aufgaben-Kacheln (Dashboard „Meine offenen Aufgaben"): stat-card
   als Link — kein Link-Look, aber Hover-Feedback (Rahmen + leichtes Anheben). */
a.stat-card { text-decoration: none; color: inherit; }
.stat-card--action {
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.stat-card--action:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Dashboard-Abschnitts-Überschrift (Icon + Text). */
.dashboard-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.dashboard-section-title .material-symbols-outlined { color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════
   CONTENT GRID (2-col)
═══════════════════════════════════════════════ */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-4);
  align-items: start;
}

/* ═══════════════════════════════════════════════
   DASHBOARD GRID (3 Kacheln untereinander, mittlere
   Reihe in 2 Spalten)
═══════════════════════════════════════════════ */
.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dashboard-grid__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 980px) {
  .dashboard-grid__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table thead tr {
  border-bottom: 2px solid var(--color-border);
}

.table th {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* Die .text-right-Utility (0,1,0) verlor gegen `.table th` (0,1,1) — Köpfe
   von Zahlen-/Aktionen-Spalten standen links, die Werte darunter rechts
   (Feedback 2026-07-28, /zusatzartikel; betraf ALLE Listen mit
   <th class="text-right">). Spezifische Regel stellt die Utility scharf. */
.table th.text-right,
.table td.text-right { text-align: right; }

.table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background: var(--color-bg); }

/* Fristen-Ampel für Listen-Zeilen (z. B. SharedService-Dashboard): leicht gelb =
   Frist läuft in ≤ 3 Tagen ab, leicht rot = heute fällig oder bereits abgelaufen.
   Steht nach der Hover-Regel → Ampel-Farbe bleibt auch beim Hovern sichtbar. */
.table tbody tr.row--due-soon { background: #fef9c3; }
.table tbody tr.row--due-now  { background: #fee2e2; }

.table-row--error td  { background: #fff8f8; }
.table-row--warning td { background: #fffdf5; }

/* ═══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.form-group:last-child { margin-bottom: 0; }

.form-group--inline { margin-bottom: 0; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Variante: Felder stehen DIREKT nebeneinander (Spalten am Inhalt statt
   50/50-Raster) — z. B. Preis + Einheit, die zusammengehören. */
.form-row--inline {
  grid-template-columns: auto auto;
  justify-content: flex-start;
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-required { color: var(--color-error); }

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-input,
.form-select,
.form-textarea {
  /* Größen-Tokens als Custom-Properties, damit Modifier sie ohne !important kippen können. */
  --field-py:        var(--space-3-5);
  --field-px:        var(--space-5);
  --field-font-size: var(--font-size-sm);
  --field-height:    auto;

  padding: var(--field-py) var(--field-px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--field-font-size);
  height: var(--field-height);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(3,112,176,.12);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); }

.form-textarea { resize: vertical; min-height: 80px; }

.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%239ca3af' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 30px; }

.form-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Trennlinie zwischen Form-Sektionen (Stammdaten, Adresse, Steuer, …). */
.form-section-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* Input with icon */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-input { padding-left: 34px; }
.input-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Toggle */
.toggle { display: inline-flex; cursor: pointer; }
.toggle input { display: none; }
.toggle-track {
  width: 38px;
  height: 22px;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: var(--radius-full);
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-track { background: var(--color-primary); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
}
.toggle-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════
   STATUS LIST
═══════════════════════════════════════════════ */
.status-list { display: flex; flex-direction: column; gap: var(--space-3); }

.status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.status-dot--green  { background: var(--color-success); }
.status-dot--yellow { background: var(--color-warning); }
.status-dot--red    { background: var(--color-error); }

/* ═══════════════════════════════════════════════
   QUICK ACTIONS
═══════════════════════════════════════════════ */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.quick-action-btn .material-symbols-outlined { font-size: var(--font-size-2xl); color: var(--color-primary); }
.quick-action-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }

/* ═══════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════ */
.progress-bar {
  height: 6px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 3px;
  min-width: 80px;
}
.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width .6s ease;
}
.progress-fill--red { background: var(--color-error); }

/* ═══════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.filter-bar .form-input,
.filter-bar .form-select { width: auto; }
.filter-bar .input-icon-wrap .form-input { min-width: 220px; }

/* ═══════════════════════════════════════════════
   SETTINGS LAYOUT
═══════════════════════════════════════════════ */
.settings-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* ═══════════════════════════════════════════════
   SR-ONLY (accessibility)
═══════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ═══════════════════════════════════════════════
   SETTINGS TABS
═══════════════════════════════════════════════ */
.settings-wrapper {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}


.settings-content { flex: 1; min-width: 0; }

/* Gestapelte Settings-Sektionen (Allgemein · Claude KI · Mail-Account) untereinander. */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ═══════════════════════════════════════════════
   INFO BOX
═══════════════════════════════════════════════ */
.info-box {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.info-box .material-symbols-outlined { font-size: var(--font-size-xl); flex-shrink: 0; margin-top: 1px; }
.info-box--blue {
  background: var(--color-primary-light);
  color: var(--color-info-text);
  border: 1px solid rgba(3,112,176,.2);
}

/* ═══════════════════════════════════════════════
   ALERT
═══════════════════════════════════════════════ */
/* Alert: Banner für Info/Success/Warning/Error.
   Konsolidiert aus zwei historischen Definitionen (vorher: Z. 1212 + Z. 5434).
   Effective Cascade: padding/gap/border kommen aus der späteren Definition,
   margin-bottom + font-weight aus der früheren. Beide Modifier-Varianten
   (single-dash .alert-success und BEM .alert--success) werden parallel
   gepflegt — Views nutzen heute beides (siehe F-3 für Migration). */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 20px;
  border: 0;            /* nur der farbige border-left der Variante (--success/--error) bleibt */
  border-radius: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-5);
  transition: opacity .5s ease;
}
.alert.is-hiding { opacity: 0; }
.alert .material-symbols-outlined { font-size: var(--font-size-xl); }
.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: rgba(22,163,74,.25);
}
.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: rgba(220,38,38,.25);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════ */
/* Empty-State: zentrierte Box mit Icon + Heading + optionaler CTA.
   Konsolidiert aus zwei historischen Definitionen (vorher: Z. 1237 + Z. 3126,
   beide trugen via Cascade bei). Properties: flex-Layout aus dem ursprünglichen
   Block, padding/color aus dem späteren. Sorgt für deterministisches
   Cascade-Verhalten, eliminiert duplicate-Definition-Verwirrung. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.empty-state-icon {
  font-size: 48px !important;
  color: var(--color-border-strong);
}

/* ═══════════════════════════════════════════════
   SECRET INPUT (password with toggle)
═══════════════════════════════════════════════ */
.input-secret-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-secret-wrap .form-input { padding-right: 40px; }
.input-secret-toggle {
  position: absolute;
  right: 4px;
  color: var(--color-text-muted) !important;
}

/* ═══════════════════════════════════════════════
   LOG CONTEXT
═══════════════════════════════════════════════ */
.log-context { margin-top: 4px; }
.log-context summary { cursor: pointer; }
.log-context-pre {
  font-size: var(--font-size-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════
   STATS GRID SMALL (4 narrow cards)
═══════════════════════════════════════════════ */
.stats-grid--sm {
  grid-template-columns: repeat(4, 1fr);
}

/* ═══════════════════════════════════════════════
   BREADCRUMB link style
═══════════════════════════════════════════════ */
.breadcrumb-item[href] { color: var(--color-text-muted); }
.breadcrumb-item[href]:hover { color: var(--color-primary); }

/* ═══════════════════════════════════════════════
   QUICK ACTIONS as links
═══════════════════════════════════════════════ */
a.quick-action-btn { text-decoration: none; }

/* ═══════════════════════════════════════════════
   KALKULATION — Phase-Banner
   Verwendung: <div class="phase-banner phase-banner--success">…</div>
═══════════════════════════════════════════════ */
.phase-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
}
.phase-banner__body { flex: 1; min-width: 240px; }
.phase-banner--info     { background:#dbeafe; border-color:#93c5fd;          color:#1e40af; }
.phase-banner--info     .material-symbols-outlined { color:#1e40af; }
.phase-banner--success  { background:var(--color-success-bg); border-color:#86efac; color:#166534; }
.phase-banner--success  .material-symbols-outlined { color:var(--color-success); }
.phase-banner--warning  { background:var(--color-warning-bg); border-color:#fde68a; color:#92400e; }
.phase-banner--warning  .material-symbols-outlined { color:#92400e; }
.phase-banner--danger   { background:var(--color-error-bg);   border-color:#fecaca; color:#7f1d1d;
                          border-left: 4px solid var(--color-error); }
.phase-banner--danger   .material-symbols-outlined { color:var(--color-error); }
.phase-banner--final    { background:var(--color-success-bg); border-color:#86efac; color:#166534;
                          border-left: 4px solid var(--color-success); }
.phase-banner--purple   { background:#ede9fe; border-color:#c4b5fd; color:#5b21b6; }
.phase-banner--purple   .material-symbols-outlined { color:#5b21b6; }
.phase-banner--compact  { padding: 11px var(--space-4); margin-top: var(--space-4); font-size: var(--font-size-sm); }

/* ── Mitarbeiter-Bearbeitungs-Banner (öffentliche Anfrage-Sicht) ─────────
 * Wird angezeigt, wenn ein eingeloggter Einkäufer die Anfrage-Maske über
 * „Manuell eingeben/korrigieren" öffnet — soll groß und auffällig sein,
 * damit kein Missverständnis entsteht: das ist NICHT die NU-Sicht.
 */
.staff-edit-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: linear-gradient(135deg, #4338ca, #7c3aed);
  color: #fff;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  box-shadow: 0 8px 20px -8px rgba(67, 56, 202, 0.55);
}
.staff-edit-banner__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-edit-banner__icon .material-symbols-outlined { font-size: 30px; color: #fff; }
.staff-edit-banner__body { flex: 1 1 auto; }
.staff-edit-banner__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.staff-edit-banner__sub {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.staff-edit-banner__sub strong { color: #fff; font-weight: 700; }
.staff-edit-banner--negotiation { background: linear-gradient(135deg, #047857, #0d9488); }


/* ── Share-Link Panel (Kunden-URL nach Re-Open der Anfrage) ──────────── */
.share-link-panel {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.share-link-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.share-link-panel__head strong { flex: 1 1 auto; color: var(--color-text); }


.share-link-panel__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.share-link-panel__url-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.share-link-panel__url-row .form-input {
  flex: 1 1 auto;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
}
.share-link-panel__status {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}


/* ── Original-Konditionen-Banner (Nachverhandlung) ──────────────────────
 * Zeigt die ursprünglichen Rabatte/Lieferkosten/Kommentar des NU oberhalb
 * der Eingabe-Maske, damit der Einkauf weiß, wovon er ausgeht. */


/* ── Original-Hint pro Item in der Verhandlungs-Maske ─────────── */
.negotiation-orig-hint {
  margin-top: 4px;
  text-align: right;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.negotiation-orig-hint strong { color: var(--color-text); font-weight: 700; }

/* „roh"-Tag macht klar, dass der gezeigte Wert OHNE Rabatt/Liefer ist. */


/* ── Vergleichs-Chips zu anderen vorausgewählten Partnern ──────────── */
.negotiation-compare {
  margin-top: 6px;
  text-align: right;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}


/* ── Tabellen-Layout für Vergleichs-Anbieter ─────────────────────────── */
.negotiation-compare__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.negotiation-compare__title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.negotiation-compare__title .material-symbols-outlined { font-size: var(--font-size-lg); }
.negotiation-compare__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.negotiation-compare__badge.is-better { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.negotiation-compare__badge.is-worse  { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* Badge + Details-Button als eine Einheit rechts oben in der Header-Zeile. */
.negotiation-compare__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Details-Button — toggelt die Vergleichs-Tabelle ein/aus. */
.negotiation-compare__expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.negotiation-compare__expand:hover {
  background: var(--color-gray-100);
  color: var(--color-text);
  border-color: #d1d5db;
}
.negotiation-compare__expand .material-symbols-outlined {
  font-size: 18px;
  transition: transform var(--transition);
}
.negotiation-compare__expand[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(180deg);
}
.negotiation-compare__expand[aria-expanded="true"] {
  background: var(--color-bg, #f9fafb);
  color: var(--color-text);
  border-color: #d1d5db;
}

.negotiation-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;                   /* feste 14 px — wie vom User gewünscht */
  font-variant-numeric: tabular-nums;
  background: transparent;           /* Hintergrund der Eltern-Zelle übernehmen */
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.negotiation-compare__table thead th {
  background: #f9fafb;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.negotiation-compare__table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.negotiation-compare__table tbody tr:last-child td { border-bottom: 0; }
.negotiation-compare__table tbody tr.is-cheapest {
  background: color-mix(in srgb, var(--color-success) 6%, #fff);
  font-weight: 600;
}
.negotiation-compare__table tbody tr.is-cheapest .material-symbols-outlined {
  font-size: 14px;
  color: var(--color-success);
  vertical-align: middle;
  margin-right: 4px;
}
/* Eigene Zeile („jetziges Angebot") — bewusst optisch abgesetzt, damit
   man auf einen Blick erkennt: „das hier ist mein Stand, alles andere
   ist Konkurrenz". Default = neutrales Blau (für Initial-State ohne
   Eingabe). Sobald ein Preis vorliegt, signalisiert grün/rot, wie es
   gegenüber der günstigsten Konkurrenz steht — Live-Update beim Tippen.
*/
.negotiation-compare__table tbody tr.is-mine {
  background: color-mix(in srgb, #3b82f6 6%, #fff);
  font-weight: 600;
  border-bottom: 2px solid color-mix(in srgb, #3b82f6 25%, transparent);
}
.negotiation-compare__table tbody tr.is-mine.is-mine--better {
  background: color-mix(in srgb, var(--color-success) 12%, #fff);          /* grün */
  border-bottom-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}
.negotiation-compare__table tbody tr.is-mine.is-mine--worse {
  background: color-mix(in srgb, var(--color-error) 12%, #fff);          /* rot */
  border-bottom-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}
.negotiation-compare__table tbody tr.is-mine .material-symbols-outlined {
  font-size: 14px;
  color: #3b82f6;
  vertical-align: middle;
  margin-right: 4px;
}
.negotiation-compare__table tbody tr.is-mine.is-mine--better .material-symbols-outlined {
  color: var(--color-success);
}
.negotiation-compare__table tbody tr.is-mine.is-mine--worse .material-symbols-outlined {
  color: var(--color-error);
}
.negotiation-compare__table tbody tr.is-mine .text-muted {
  font-weight: 400;
  margin-left: 4px;
}
/* Vergleichs-Zeile spannt sich über alle Spalten der Items-Tabelle —
   so hat die Vergleichs-Tabelle die volle Breite zur Verfügung. */


/* ── Einzel-Positionen als eigene Karten (statt Tabelle) ─────────── */
.public-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}


/* Karten-Variante (alt): `.public-item` als <div> stapelte Header/Desc/Price
   vertikal. Im neuen Tabellen-Layout ist `.public-item` ein <tr> — dort
   muss `display: table-row` greifen, sonst landen alle <td> untereinander
   in einer Spalte (display:flex/column auf <tr> zerlegt die Cells). */
div.public-item {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* Eingabefeld + Angebot-Hint rechtsbündig stapeln (Input oben, Hint darunter). */


/* 3-Spalten-Layout pro Item: [Infos] [Eingabe] [Mini-Tabelle].
   Die `.public-item__row` umschließt die drei Spalten — die große
   Vergleichs-Tabelle (`.negotiation-compare`) bleibt als sibling
   darunter mit voller Breite. */


/* Mini-Label über dem Eingabefeld — gleiche Optik wie .public-item__qty
   (font-weight 600, tabular-nums), rechtsbündig direkt über dem Input. */


/* Mini-Tabelle „Erstangebot ↔ Neuer Preis ↔ Gespart" */
.neg-savings-mini {
  flex: 0 0 auto;
  min-width: 260px;
  max-width: 320px;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  background: var(--color-surface-alt, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.neg-savings-mini th,
.neg-savings-mini td {
  padding: 4px 10px;
  font-weight: 500;
  white-space: nowrap;
}
.neg-savings-mini th {
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 500;
}
.neg-savings-mini td {
  text-align: right;
  font-family: ui-monospace, monospace;
  color: var(--color-text);
}
.neg-savings-mini tr.is-sum {
  font-weight: 700;
  background: rgba(0, 0, 0, .02);
}
.neg-savings-mini tr.is-sum th,
.neg-savings-mini tr.is-sum td {
  color: var(--color-text);
}
.neg-savings-mini tr.is-spacer td {
  padding: 2px 0;
  border-bottom: 1px solid var(--color-border);
}
.neg-savings-mini tr.is-savings {
  font-weight: 700;
  background: color-mix(in srgb, #3b82f6 4%, #fff);
}
.neg-savings-mini tr.is-savings th {
  color: var(--color-text);
}
.neg-savings-mini td.is-positive { color: var(--color-success); }
.neg-savings-mini td.is-negative { color: var(--color-error); }

/* ── Einzelpositionen als Tabellen-Zeilen (NU-Public-Sicht) ────────────
   Struktur: Pos | Artikel/Beschreibung | Menge | Einh. | Preis-Input.
   Nur Layout — keine Logik-Änderung, dieselben Inputs + data-Attribute
   wie in der Karten-Variante. */
.public-items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;                    /* kein Zellenabstand — Karten verbinden sich */
  table-layout: fixed;                  /* feste Spalten-Breiten */
}
/* Mit table-layout:fixed teilen sich Spalten ohne explizite Breite den Rest
   gleichmäßig auf — der Preis-Input würde sonst ~die Hälfte der Tabelle
   einnehmen. Daher Preis-Spalte (letzte Spalte) explizit auf 220 px setzen.
   */
.public-items-table > thead > tr > th:last-child{
  width: 220px;
}
/* POS-Spalte etwas breiter (statt der globalen 60 px aus `.col-w-pos`), damit
   längere Positions-Nummern wie „01.02.030" reinpassen, ohne umbrechen zu
   müssen. Nur in diesen beiden Tabellen — global bleibt `.col-w-pos = 60 px`. */
.public-items-table > thead > tr > th.col-w-pos{
  width: 80px;
}
/* Margin nur für die Nachverhandlungs-Variante (show.php), die mit
   `tbody.public-item-group`-Karten arbeitet. Show-public.php verwendet
   ein einzelnes `<tbody>` ohne Karten-Layout und bleibt bei margin:0,
   damit die Tabelle bündig in der Public-Group sitzt. */
.public-items-table:has(> tbody.public-item-group) {
  margin-top: var(--space-4);
  margin-right: calc(var(--space-4) + 2px);
  margin-bottom: var(--space-4);
  margin-left: calc(var(--space-4) + 4px);
  width: calc(100% - 2 * var(--space-4) - 6px);
}
/* Spacer-tbody zwischen Item-Karten — erzeugt den vertikalen Abstand,
   den früher `border-spacing` lieferte. Wichtig: zwischen tbodies, NICHT
   zwischen Zeilen innerhalb desselben tbody (so bleibt der Rahmen der
   Karte links/rechts durchgehend). */
.public-items-table > tbody.public-item-spacer > tr > td {
  height: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
}
/* Jedes Item als visuelle Karte: <tbody class="public-item-group">
   umschließt die Item-Row + (optional) die Compare-Row und bekommt einen
   eigenen Rahmen mit abgerundeten Ecken */
.public-items-table > tbody.public-item-group > tr > td {
  background: #fff;
  border-top:    1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.public-items-table > tbody.public-item-group > tr > td:first-child {
  border-left: 1px solid var(--color-border);
}
.public-items-table > tbody.public-item-group > tr > td:last-child {
  border-right: 1px solid var(--color-border);
}
/* Abgerundete Ecken nur an den ÄUSSEREN Ecken der Karte. */
.public-items-table > tbody.public-item-group > tr:first-child > td:first-child {
  border-top-left-radius: 8px;
}
.public-items-table > tbody.public-item-group > tr:first-child > td:last-child {
  border-top-right-radius: 8px;
}
.public-items-table > tbody.public-item-group > tr:last-child > td:first-child {
  border-bottom-left-radius: 8px;
}
.public-items-table > tbody.public-item-group > tr:last-child > td:last-child {
  border-bottom-right-radius: 8px;
}
/* Item-Row + Compare-Row gehören zu einer Karte → innen keine Trennlinie */
.public-items-table > tbody.public-item-group > tr.public-item-row:not(:last-child) > td {
  border-bottom: 0;
}
.public-items-table > tbody.public-item-group > tr.public-item-compare-row > td {
  border-top: 0;
}
.public-items-table thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--space-3) var(--space-5);   /* gleich wie .table th */
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}
.public-items-table__col-pos   { width: 90px; }
.public-items-table__col-qty   { width: 90px;  text-align: right; }
.public-items-table__col-unit  { width: 60px; }
.public-items-table__col-price { width: 220px; }
.public-items-table tbody td {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: var(--font-size-base);
}
/* Vergleichs-Tabelle innerhalb der Item-Compare-Zelle behält ihre eigene
   Schriftgröße (14 px) — Ohne diesen Override
   würde die generische `tbody td`-Regel (oben) bei gleicher Spezifität
   gewinnen (späterer Selektor in der CSS-Datei) und z. B. font-size-base
   forcen, das hier sowieso 14 px ist — defensive Absicherung. */
.public-items-table .negotiation-compare__table,
.public-items-table .negotiation-compare__table thead th,
.public-items-table .negotiation-compare__table tbody td {
  font-size: 14px;
}
/* Beschreibung-Zelle bleibt oben, damit „Mehr lesen"-Button stabil unten
   am Textende anliegt und die anderen Spalten optisch mittig zur Item-Zeile
   ausgerichtet sind. */
.public-items-table tbody td.public-item-row__desc {
  vertical-align: top;
}
/* (Vorher: `.public-items-table tbody tr:last-child > td { border-bottom: 0 }` —
   entfernt, weil die Compare-Row die LETZTE Zeile der Item-Karte ist und ihr
   unterer Rahmen den Kartenrand schließen muss.) */

/* Compare-Row: kein eigener Hintergrund mehr — sie übernimmt das Weiß
   der Item-Karte (vom tbody.public-item-group-Wrapper). */
.public-items-table tbody tr.public-item-compare-row > td {
  padding-top: 4px;
  padding-bottom: 16px;
}
.public-items-table tbody tr.public-item-compare-row > td > .negotiation-compare {
  margin-top: 0;
}
.public-item-row__pos {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--font-size-base);
  font-weight: 700;
}
.public-item-row__summary {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.public-item-row__text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0;
}
/* Anmerkung des Anbieters zur Position — sitzt unter der Beschreibung
   (bzw. unter dem „Mehr lesen"-Button), nicht in der Preis-Zelle. */


.public-item-row__qty {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-base);
}
.public-item-row__unit { font-size: var(--font-size-base); }
.public-item-row__price input.price-input { width: 100%; }
/* [INQUIRY v94] Preisart-Umschalter (Einzel-/Gesamtpreis) je Position — gleiche Größe wie das Preisfeld darunter. */
.public-item-row__pricemode { width: 100%; margin-bottom: 4px; }
/* Marker: Einzelpreis aus Gesamtpreis berechnet — überall, wo ein abgeleiteter €/Einheit erscheint. */
.price-from-total { font-size: 15px; line-height: 1; color: var(--color-text-muted); vertical-align: middle; cursor: help; }
.inquiry-pauschal-badge { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: var(--font-size-2xs); font-weight: 600; background: #ede9fe; color: #6d28d9; white-space: nowrap; }
.public-item-row__price .negotiation-orig-hint {
  margin-top: 4px;
  text-align: right;
}

/* ── Preis-Zelle mit Live-Mini-Tabelle (Popup beim Focus) ─────────────────
   Die Mini-Tabelle „Erstangebot ↔ Neuer Preis ↔ Gespart" hängt als
   Floating-Panel an der Preis-Zelle. Standardmäßig versteckt (Attribut
   `hidden` + display:none); beim Focus auf das Input wird sie eingeblendet
   und live mit Werten aktualisiert.
   */
.public-item-row__price-cell{
  position: relative;
  vertical-align: top;
  min-width: 180px;
}
.public-item-row__price-cell input.price-input{ width: 100%; }
.public-item-row__price-cell .neg-savings-mini{
  position: absolute;
  /* Rechts vom Input — bei zu wenig Platz fällt's per Media-Query unten drunter. */
  right: calc(100% + 12px);
  top: 0;
  z-index: 20;
  margin: 0;
  width: 280px;
  min-width: 260px;
  max-width: 320px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.public-item-row__price-cell .neg-savings-mini[hidden]{ display: none; }

@media (max-width: 1100px) {
  .public-item-row__price-cell .neg-savings-mini{
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    width: 280px;
  }
}
/* Live-Gesamtpreis pro Position: erscheint nach „Blur" unter dem Input. */
.public-item-row__total {
  margin-top: 4px;
  text-align: right;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Eigene „Gesamt"-Spalte (nur Nachverhandlung): Zeilensumme je Position. */
.public-items-table__col-gesamt { width: 130px; }
.public-item-row__gesamt { font-weight: 600; white-space: nowrap; vertical-align: top; }
/* Vergleichs-Block-Zeile: rückt unter die Item-Zeile, voller Breite. */
.public-item-row__cmp-row > td {
  padding: 0 10px 12px 10px;
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}

/* ── Public-NU-Sicht: Mindestschriftgröße base (14 px) ───────────────────
   Auf der Public-Sicht soll nichts kleiner als die Standard-Größe wirken,
   damit das Formular auch ohne Brille gut lesbar bleibt. Overrides für
   die üblichen kleinen Klassen + Header-Cells. */
.public-wrap { font-size: var(--font-size-base); }
.public-wrap .text-sm,
.public-wrap .text-xs,
.public-wrap small,
.public-wrap .public-items-table thead th,
.public-wrap .form-help,
.public-wrap .form-hint,
.public-wrap .badge{
  font-size: var(--font-size-base);
}


/* Spaltenbreiten: die Einzelpreis-Spalte ist deutlich schmaler — dort
   stehen nur Stückpreise. Die anderen Geld-Spalten haben Platz für
   den Maximalwert „9.999.999,99 €" (mit Minus-Zeichen sogar etwas mehr). */
.negotiation-compare__col-name   { width: auto; }
.negotiation-compare__col-price  { width: 70px;  text-align: right; }
.negotiation-compare__col-pct    { width: 65px;  text-align: right; }
.negotiation-compare__col-total  { width: 130px; text-align: right; }
.negotiation-compare__col-rabnum { width: 135px; text-align: right; color: #b91c1c; }
.negotiation-compare__col-netto  { width: 130px; text-align: right; font-weight: 700; }


/* Original-Hint direkt über Rabatt- bzw. Lieferkosten-Feldern.
 * Sitzt rechts neben dem Block-Label, damit das Layout des Eingabefelds
 * darunter erhalten bleibt. */
.public-discount__orig-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-3);
  padding: 2px 8px;
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #713f12;
}
.public-discount__orig-hint .material-symbols-outlined {
  font-size: 14px; color: #ca8a04;
}
.public-discount__orig-hint strong { color: #713f12; font-weight: 700; }
.public-discount__orig-hint--none {
  background: var(--color-gray-100);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.public-discount__orig-hint--none .material-symbols-outlined { color: var(--color-text-muted); }
.public-discount__orig-hint--none em { font-style: italic; }

/* ── „Kalkulieren"-Block in der Nachverhandlung ─────────────────────────
 * Button oben links, Ergebnis-Zellen rechts (Original → Aktuell → Differenz).
 * Erscheint zwischen letzter Gruppe und Submit-Button. */
.negotiation-calc {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.negotiation-calc__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.negotiation-calc__result {
  margin-top: var(--space-4);
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.negotiation-calc__cell {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px var(--space-3);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.negotiation-calc__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.negotiation-calc__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.negotiation-calc__arrow {
  align-self: center;
  font-size: 24px;
  color: var(--color-text-muted);
}
.negotiation-calc__pct {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}
.negotiation-calc__cell--delta.is-down {
  background: var(--color-success-bg);
  border-color: #86efac;
}
.negotiation-calc__cell--delta.is-down .negotiation-calc__value,
.negotiation-calc__cell--delta.is-down .negotiation-calc__pct  { color: #166534; }
.negotiation-calc__cell--delta.is-up {
  background: #fee2e2;
  border-color: #fca5a5;
}
.negotiation-calc__cell--delta.is-up .negotiation-calc__value,
.negotiation-calc__cell--delta.is-up .negotiation-calc__pct  { color: #991b1b; }
.negotiation-calc__cell--delta.is-zero { background: var(--color-gray-100); }

/* ── Angebotsfrist-Banner in der öffentlichen NU-Sicht ───────────────────
 * Zeigt oben in der Karte: bis wann + wie lange noch.
 * Drei Zustände: normal (blau), drängend < 24 h (gelb), abgelaufen (rot).
 */
.inquiry-deadline-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-left: 4px solid var(--color-accent-blue);
  color: #1e3a8a;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.inquiry-deadline-banner .material-symbols-outlined {
  font-size: 26px;
  color: var(--color-accent-blue);
}
.inquiry-deadline-banner__body { flex: 1 1 auto; line-height: 1.35; }
.inquiry-deadline-banner__title { font-size: var(--font-size-md); }
.inquiry-deadline-banner__rel {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  margin-top: 2px;
}
.inquiry-deadline-banner--urgent {
  background: var(--color-warning-bg);
  border-color: #fde68a;
  border-left-color: #d97706;
  color: #92400e;
}
.inquiry-deadline-banner--urgent .material-symbols-outlined { color: #d97706; }
.inquiry-deadline-banner--expired {
  background: var(--color-error-bg);
  border-color: #fecaca;
  border-left-color: var(--color-error);
  color: #7f1d1d;
}
.inquiry-deadline-banner--expired .material-symbols-outlined { color: var(--color-error); }
@media (max-width: 640px) {
  .staff-edit-banner { padding: var(--space-4); gap: var(--space-3); }
  .staff-edit-banner__icon { width: 44px; height: 44px; }
  .staff-edit-banner__icon .material-symbols-outlined { font-size: var(--icon-size-lg); }
  .staff-edit-banner__title { font-size: 1.15rem; }
}
.phase-banner__link {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  margin-left: 4px;
}

/* Reason / Begründung — orange Text unter Beschreibung */
.reason-text {
  margin-top: var(--space-2);
  color: var(--color-warning-text);
  white-space: pre-wrap;
}
.reason-missing {
  margin-top: var(--space-2);
  color: var(--color-error);
  font-style: italic;
}

/* ═══════════════════════════════════════════════
   KALKULATION — Offer-Pille (Show, Release, Detail)
═══════════════════════════════════════════════ */
.offer-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.offer-pill__name        { flex: 1; font-weight: 500; }
.offer-pill__price-unit  { min-width: 90px;  text-align: right; font-family: ui-monospace, monospace; color: var(--color-text-secondary); }
.offer-pill__price-total { min-width: 100px; text-align: right; font-weight: 700; font-family: ui-monospace, monospace; color: var(--color-text); }
.offer-pill__icon { font-size: var(--font-size-lg); }
.offer-pill__icon--sub    { color: var(--color-indigo-500); }
.offer-pill__icon--dealer { color: #0ea5e9; }

.offer-pill--cheapest { background: var(--color-success-bg); border-color: #86efac; }
.offer-pill--chosen   { background: var(--color-success-bg); border-color: #86efac; }
.offer-pill--against  { background: #ffedd5; border-color: #fdba74; }

.offer-list { display: flex; flex-direction: column; gap: 4px; }

/* ═══════════════════════════════════════════════
   KALKULATION — Beschreibungs-Header pro Card
═══════════════════════════════════════════════ */
.calc-description-block {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}
.calc-description-block__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-2);
}
.calc-description-block__body {
  white-space: pre-wrap;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   KALKULATION — Item-Beschreibungs-Zelle
═══════════════════════════════════════════════ */
.item-desc-summary {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.item-desc-body  { white-space: pre-wrap; }
.item-desc-notes {
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
  white-space: pre-wrap;
  color: var(--color-text-muted);
}
.item-mehrkosten { white-space: nowrap; text-align: right; padding-top: var(--space-4); font-family: ui-monospace, monospace; font-weight: 700; }
.item-mehrkosten__abs { color: var(--color-warning-text); }
.item-mehrkosten__pct { color: #92400e; font-size: var(--font-size-sm); font-weight: 500; }

/* ═══════════════════════════════════════════════
   KALKULATION — Phase-Breadcrumb (Stepper)
═══════════════════════════════════════════════ */
.phase-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 10px var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.phase-step {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-weight: 500;
}
.phase-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--color-text-muted);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.phase-step__num .material-symbols-outlined { font-size: var(--font-size-base); color: #fff; }
.phase-step__icon { font-size: 16px; color: inherit; }
.phase-step--current { background: #dbeafe; border-color: #3b82f6; color: #1e40af; font-weight: 700; }
.phase-step--current .phase-step__num  { background: #1e40af; }
.phase-step--current .phase-step__icon { color: #1e40af; }
.phase-step--done    { background: var(--color-success-bg); border-color: #86efac; color: var(--color-success); }
.phase-step--done .phase-step__num  { background: var(--color-success); }
.phase-step--done .phase-step__icon { color: var(--color-success); }
.phase-step__sep { font-size: var(--font-size-xl); color: #cbd5e1; margin: 0 3px; }

/* ═══════════════════════════════════════════════
   KALKULATION — Action-Bar (Bottom-Buttons)
═══════════════════════════════════════════════ */
.action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}


/* Sticky-Variante: bleibt als Leiste am unteren Rand des Scrollbereichs sichtbar.
   Negative Seitenränder spannen sie über das .content-Padding;
   padding-right hält die Buttons frei vom schwebenden Hilfe-Chat-Button. */
.action-bar--sticky {
  position: sticky;
  bottom: 0;
  z-index: 90;
  margin: var(--space-5) calc(-1 * var(--space-4)) 0;
  padding: 10px calc(96px + var(--space-4)) 10px var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
}
/* Seiten mit Sticky-Leiste: die 100px Chat-Button-Luft übernimmt die Leiste
   selbst — das globale Bottom-Padding muss hier weg, sonst endet der
   Sticky-Bereich (Containing Block = Content-Box) 100px über dem Sichtrand. */
.content:has(.action-bar--sticky) { padding-bottom: 0; }
/* Einheitliche Button-Höhe in der Leiste: Icons nicht größer als der Text
   (= Höhe des Text-Buttons „Abbrechen"). */
.action-bar--sticky .btn--xl .material-symbols-outlined { font-size: var(--font-size-lg); }

/* SUPERUSER „Phase zurück"-Button — lila */
.btn--superuser {
  background: #7c3aed;
  color: #fff;
  border-color: #6d28d9;
}
.btn--superuser:hover { background: #6d28d9; }

/* Approve-Button (grün) — überschreibt btn-primary-Farbe */
.btn--approve { background: var(--color-success); border-color: #15803d; color: #fff; }
.btn--approve:hover { background: #15803d; border-color: #166534; }

/* Reject-Button (sekundär in rot) */
.btn--reject { color: var(--color-error-text); border-color: #fecaca; }
.btn--reject:hover { background: var(--color-error-bg); }

/* Danger-Variante für „Nicht freigeben & zurückgeben" */
.btn--danger-solid { background: var(--color-error); border-color: var(--color-error-text); color: #fff; }
.btn--danger-solid:hover { background: var(--color-error-text); }

/* ═══════════════════════════════════════════════
   FREIGABEN — Kennzahlen-Leiste
═══════════════════════════════════════════════ */
.kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #f9fafb;
  border-bottom: 1px solid var(--color-border);
}
.kpi-bar__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi-bar__value {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}
.kpi-bar__value--success { color: var(--color-success); }
.kpi-bar__value--warning { color: var(--color-warning-text); }

/* ═══════════════════════════════════════════════
   TABLE-CELL Utility-Klassen (Kalkulations-Tabellen)
═══════════════════════════════════════════════ */
tr.va-top  { vertical-align: top; }
.td-pos    { font-family: ui-monospace, monospace; font-size: var(--font-size-sm); color: var(--color-text-muted); padding-top: var(--space-4); }
.td-desc   { padding-top: var(--space-4); }
.td-qty    { padding-top: var(--space-4); }
.td-qty .qty-value { font-weight: 600; }
.td-offers { /* default cell */ }

/* ═══════════════════════════════════════════════
   MODAL — Standard-Pattern für Begründung etc.
═══════════════════════════════════════════════ */
.app-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.6);
  z-index: 1000;
  align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.app-modal.is-open { display: flex; }
.app-modal__panel {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 94%; max-width: 620px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-modal__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 17px var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.app-modal__head--danger  { background: linear-gradient(135deg,#fee2e2,#fecaca); border-bottom-color:#fecaca; }

.app-modal__icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.app-modal__icon--danger  { background: var(--color-error);   box-shadow: 0 4px 10px rgba(220,38,38,.35); }

.app-modal__icon .material-symbols-outlined { font-size: var(--font-size-2xl); color: #fff; }
.app-modal__title { margin: 0; font-size: var(--font-size-lg); font-weight: 700; }
.app-modal__text { flex: 1; }
.app-modal__title--danger { color: #7f1d1d; }
.app-modal__subtitle { font-size: var(--font-size-sm); }
.app-modal__subtitle--danger { color: #991b1b; }
.app-modal__body {
  padding: var(--space-5) var(--space-6);
  background: #fafafa;
  max-height: 70vh;
  overflow-y: auto;
}
.app-modal__foot {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: #fff;
  display: flex; justify-content: flex-end; gap: var(--space-2);
}

/* Reason-Modal Summary-Leiste + Reason-Cards */


/* ═══════════════════════════════════════════════
   KARTEN-HEADER (Card mit Action-Reihe rechts)
═══════════════════════════════════════════════ */
.card-header--actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.card-header--actions > .card-header__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;          /* schiebt Filter + Neu nach rechts */
}
.card-header__title h2,
.card-header__title h3 { margin: 0; }
/* Filter-Form innerhalb eines card-header--actions (z. B. Projekte-Liste) */


/* Projekte-Filter teilt sich den Look der Preissuche.
   Hier nur die Spalten-Verteilung: Status schmaler, Suche nimmt den Rest. */
.project-filter__status { flex: 0 0 200px; }
.project-filter__q      { flex: 1 1 320px; min-width: 240px; }

/* Preissuche-Filter-Form */
.pricesearch-filter-bar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.pricesearch-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.pricesearch-filter > .form-group { margin: 0; }
.pricesearch-filter__type    { flex: 0 0 auto; }
.pricesearch-filter__partner { flex: 1 1 180px; min-width: 160px; }
.pricesearch-filter__q       { flex: 2 1 200px; min-width: 180px; }
.pricesearch-filter__actions {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
/* Single-row Variant: schiebt den Actions-Block an das rechte Ende der
   Filter-Zeile, sodass Search-/Reset-Button rechts neben dem letzten
   Filter-Feld landen statt unten. */
.pricesearch-filter__actions--inline { margin-left: auto; }
/* Alle Filter-Suchen (Kunden, Lieferanten, Projekte, Nachunternehmer,
   Artikelstammdaten, Preissuche-Filter) sollen wie die GAEB-Suche aussehen:
   normale (statt winzige) Labels, größere Felder (48px) und große Buttons.
   Der Such-/Reset-Block sitzt in DERSELBEN Zeile wie die Felder (rechts ans
   Zeilenende geschoben), nicht in einer eigenen Zeile darunter.
   AI- (.pricesearch-ai) und GAEB-Formular (.pricesearch-gaeb) sind eigene
   Klassen und bleiben davon unberührt. */
.pricesearch-filter .form-label {
  margin-bottom: var(--space-1);
}
.pricesearch-filter .form-input--sm,
.pricesearch-filter .form-select--sm { height: 48px; }
.pricesearch-filter .pricesearch-filter__actions {
  margin-left: auto;       /* in dieselbe Feld-Zeile, ans rechte Ende */
  align-items: flex-end;   /* Button unten bündig mit den Feldern */
}
.pricesearch-filter .pricesearch-filter__actions .btn--sm {
  height: 48px;
  padding: var(--space-3-5) var(--space-5);
  font-size: var(--font-size-sm);
}
.pricesearch-filter .pricesearch-filter__actions .btn--sm .material-symbols-outlined {
  font-size: 20px;
}

/* Sortierbare Tabellen-Header */
.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.sort-header:hover .sort-header__icon { opacity: .8; }
.sort-header__icon {
  font-size: 14px !important;
  color: var(--color-text-muted);
  opacity: .35;
  transition: opacity var(--transition), color var(--transition);
}
.sort-header.is-active { color: var(--color-primary); }
.sort-header.is-active .sort-header__icon { color: var(--color-primary); opacity: 1; }
.sort-header--right { justify-content: flex-end; }

/* Einheitlicher Aktions-Cluster in Tabellenzeilen (Edit/Show/Delete) */
.row-actions {
  white-space: nowrap;
  text-align: right;
}
.row-actions > * + * { margin-left: 4px; }
.row-actions form { display: inline; }

/* Status-Toggle (Aktivieren/Deaktivieren) in der Benutzer-Tabelle: gleiche
   Breite, damit die Buttons über die Zeilen hinweg bündig sind — je Zeile zeigt
   sich nur einer der beiden. Inhalt zentriert (Default-Buttons sind linksbündig). */
.user-status-toggle {
  min-width: 8.5rem;
  justify-content: center;
}

/* Phase-Action-Button in der Kalkulations-Liste:
   neutraler btn-secondary-Look (wie auf /projekte), aber feste Breite,
   damit alle Buttons in der Aktions-Spalte exakt gleich aussehen,
   egal wie lang das Label ist. Das Icon allein vermittelt die Phase. */
.btn-phase {
  min-width: 160px;
  justify-content: flex-start;
}

/* Read-only-Variante für terminale Phasen („In Freigabe", „Genehmigt"):
   gleicher Layoutslot wie der klickbare Button, aber ohne Border,
   ohne Hintergrund-Hover und ohne Cursor-Pointer. */


/* ═══════════════════════════════════════════════
   INQUIRY — Filter-Leiste
═══════════════════════════════════════════════ */
/* Filter-Leiste = pricesearch-filter-bar (wie /kunden), aber am Karten-FUSS:
 * Trennlinie oben statt unten, damit sie nicht mit dem Card-Rand doppelt. */
.inquiry-filter-bar {
  border-bottom: 0;
  border-top: 1px solid var(--color-border);
}
.inquiry-filters__label { font-weight: 600; margin-right: 4px; color: var(--color-text-muted); }
.inquiry-filters__count { font-size: var(--font-size-xs); color: var(--color-text-muted); align-self: center; }

/* ── Anfrage: Detail/Kompakt-Umschalter + Kompakt-Tabelle ───────────── */
.inquiry-view-toggle {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5) 0;   /* linksbündig mit der Filterleiste darunter */
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}
.inquiry-view-toggle .view-btn .material-symbols-outlined { font-size: var(--font-size-md); }
/* Standard: Detail-Karten sichtbar, Kompakt-Tabelle versteckt. */
.inquiry-kompakt { display: none; margin-top: var(--space-4); }
body[data-inquiry-view="kompakt"] .inquiry-group { display: none !important; }
body[data-inquiry-view="kompakt"] .inquiry-kompakt { display: block; }
.inquiry-kompakt__table th,
.inquiry-kompakt__table td { vertical-align: middle; }
/* Header-Ausrichtung: schlägt das generische `.table th { text-align:left }`. */
.inquiry-kompakt__table th.text-right  { text-align: right; }
.inquiry-kompakt__table th.text-center,
.inquiry-kompakt__table td.text-center { text-align: center; }
.inquiry-kompakt__table td .material-symbols-outlined { font-size: 1.05em; vertical-align: middle; }
.inquiry-kompakt__actions {
  display: flex; gap: var(--space-1, 4px);
  justify-content: flex-end; flex-wrap: wrap;
  white-space: nowrap;
}
.inquiry-kompakt__actions .d-inline { display: inline-flex; }
.inquiry-kompakt__sent-link { display: inline-flex; align-items: center; gap: .15rem; text-decoration: none; white-space: nowrap; line-height: 1.7; }
.inquiry-kompakt__sent-link .material-symbols-outlined { font-size: 1em; }
.inquiry-kompakt__sent-link--failed { color: var(--color-danger); }
.inquiry-kompakt__sent-open { font-size: .9em; opacity: .55; margin-left: .15rem; }

/* ═══════════════════════════════════════════════
   INQUIRY — Partner-Card (NU oder Händler)
═══════════════════════════════════════════════ */
.inquiry-group { margin-top: var(--space-4); }
.inquiry-group__head {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.inquiry-group__title {
  margin: 0;
  display: flex; align-items: center; gap: var(--space-2);
}
.inquiry-group__title .material-symbols-outlined { font-size: var(--font-size-2xl); }
.inquiry-group__title--sub    .material-symbols-outlined { color: var(--color-indigo-500); }
.inquiry-group__title--dealer .material-symbols-outlined { color: #0ea5e9; }
.inquiry-group__rating {
  font-size: var(--font-size-sm);
  color: #f59e0b;
  letter-spacing: 1px;
  margin-left: 4px;
}
.inquiry-group__meta {
  margin-top: 4px;
  display: flex; flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.inquiry-group__meta a { color: var(--color-indigo-500); }
.inquiry-group__meta .material-symbols-outlined { font-size: var(--font-size-md); vertical-align: middle; }

/* Link-Zeile mit Copy/Open/Mail */
/* ── Angebotsfrist-Bar im Anfrage-Vorbereitungs-Header ──────────────────
 * Datumsfeld + Speichern, optional abgelaufen-Hinweis. Layout entspricht
 * den anderen Header-Reihen (kompakt, hellgrauer Hintergrund).
 */
.inquiry-deadline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-top: 1px solid var(--color-border);
}

/* Kulanz-Checkbox „Abgabe nach Fristablauf erlaubt" in der Angebotsfrist-Leiste. */
.inquiry-deadline__late { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; }
.inquiry-deadline__late input { margin: 0; }

/* Toolbar-Zeile: Angebotsfrist links, Bulk-Mail-Button rechts. Trägt das
   Bar-Styling, das früher direkt auf `.inquiry-deadline` saß — die innere
   Deadline-Form wird mit dem `--bare`-Modifier transparent geschaltet,
   damit beide Forms visuell EINE Zeile bilden. */
.inquiry-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-top: 1px solid var(--color-border);
}
.inquiry-toolbar--expired { background: var(--color-warning-bg); }
.inquiry-toolbar__bulk {
  margin-left: auto;       /* pusht den Block ans rechte Ende */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Deadline-Form OHNE eigene Bar-Optik, wenn in der Toolbar gerendert.
   Wird nur in diesem Kontext angewendet — falls die Form mal solo steht,
   bleibt sie wie früher gestylt. */
.inquiry-deadline--bare {
  padding: 0;
  background: transparent;
  border-top: 0;
}
.inquiry-deadline__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
}
.inquiry-deadline__label .material-symbols-outlined { font-size: var(--font-size-xl); color: var(--color-info-text); }
.inquiry-deadline__input {
  width: auto;
  min-width: 220px;
  flex: 0 0 auto;
}

.inquiry-link-row {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;     /* Buttons/Link sollen sich strecken… */
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-bottom: 1px solid var(--color-border);
}
/* …damit Kopieren/Öffnen/E-Mail/Manuell genauso hoch sind wie das Link-Feld.
 * .btn--sm hat sonst fix 34px — hier deaktiviert, damit `align-items: stretch`
 * greift und die Buttons auf die Höhe des `<input>` gezogen werden. */
.inquiry-link-row > .btn,
.inquiry-link-row > form > .btn {
  display: inline-flex;
  align-items: center;
  height: auto;
}
/* Inline-Forms (z. B. „E-Mail senden", „Erneut freigeben") müssen ebenfalls
 * auf Eltern-Höhe gestreckt werden, damit der enthaltene Button die gleiche
 * Höhe wie die direkten Geschwister-Buttons bekommt. */
.inquiry-link-row__form,
.inquiry-link-row__inline-form {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-2);
}
.inquiry-link-row__form > .btn,
.inquiry-link-row__inline-form > .btn { width: 100%; }
/* Text-Beikost neben dem Senden-Button (PDF-Checkbox bzw. „PDF-Anhang aktiv")
 * nicht mitstrecken, sondern vertikal mittig zum Button. */
.inquiry-link-row__form > label,
.inquiry-link-row__form > .text-xs { align-self: center; }
/* Nur die rechts-ausgerichtete Variante (Reopen-Button) bekommt `margin-left:auto` */
.inquiry-link-row__inline-form { margin-left: auto; }
.inquiry-link-row > .material-symbols-outlined { align-self: center; }
/* Icon-only-Variante: gleiche Höhe wie die anderen Buttons, aber quadratisches
 * Padding, damit das Icon nicht von Text-Breite verzerrt wird. */
.inquiry-link-row__btn--icon {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  aspect-ratio: 1 / 1;
  justify-content: center;
}
.inquiry-link-row--closed { background: var(--color-error-bg); }
.inquiry-link-row .material-symbols-outlined { color: var(--color-indigo-500); }
.inquiry-link-row--closed .material-symbols-outlined { color: var(--color-error-text); }
.inquiry-link-row__msg {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-error-text);
  font-weight: 500;
}
.inquiry-link-row__input {
  flex: 1;
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  min-width: 240px;
}

/* Items-Tabelle der Inquiry-Card.
 * Schriftgröße aller Spalten = `var(--font-size-base)` (14 px) — gleiche Größe
 * wie die Item-Überschrift (.item-desc-summary, z. B. „Vorbereitung Betondecke"),
 * damit die Tabelle nicht mit 11/12-px-Texten flickert. */
.td-qty-right { text-align: right; padding-top: 12px; font-size: var(--font-size-base); }
.td-unit      { padding-top: 12px; font-size: var(--font-size-base); }
.td-pos--compact, .td-desc--compact { padding-top: 12px; }
.td-pos--compact {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-base);
  color: var(--color-text);    /* schwarz */
}

/* ── Anfrage-Ansicht: „Antwort"-Spalte mit ✓ + Preis pro Position ──────── */
.td-answer {
  padding-top: 12px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.td-answer__check {
  font-size: var(--font-size-xl);
  color: var(--color-success);
  vertical-align: middle;
  margin-right: 4px;
}
.td-answer__pending {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  vertical-align: middle;
  margin-right: 4px;
}
.td-answer__price  { font-weight: 700; color: var(--color-text); font-size: var(--font-size-base); }

.td-answer--done   { background: color-mix(in srgb, var(--color-success) 5%, transparent); }
.td-answer--open   { color: var(--color-text-muted); }

/* ── Gruppen-Divider in Anfrage-Vorbereitungs-Tabelle ────────────────────
 * Sektions-Trenner pro Calc-Gruppe — heller Blau-Verlauf für echte Gruppen,
 * neutrales Grau für die ungruppierten „Einzeleinträge". Bewusst schmal
 * gehalten (kompaktes Padding + kleinere Schrift), damit der Header nicht
 * dominiert.
 */
.inquiry-group-divider > td {
  background: linear-gradient(180deg, var(--color-primary-light), #fff);
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  padding: 10px var(--space-3);
  cursor: pointer;
  user-select: none;
}

/* Footer-Zeile am Ende einer Gruppe: zeigt Rabatt + Lieferkosten,
   die der Partner mit der Anfrage zurückgegeben hat. */
.inquiry-group-foot > td {
  background: #fafafa;
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--space-3);
}
.inquiry-group-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}
.inquiry-group-foot__label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--font-size-xs);
}
.inquiry-group-foot__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.inquiry-group-foot__chip .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text-muted);
}
/* Skonto-Variante: dezent grau (NICHT eingerechnet → nicht hervorheben).
   Der „günstigster Skonto"-Indikator wird ggf. am Partner-Total grün. */
.inquiry-group-foot__chip--skonto {
  background: #fafafa;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  border-style: dashed;
}
.inquiry-group-foot__chip--skonto .material-symbols-outlined {
  color: var(--color-text-muted);
}
.inquiry-group-foot__chip-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  font-style: italic;
  margin-left: 2px;
}

/* Hint unter dem Gruppen-Total, dass die Lieferkosten in der Summe drin sind. */
.inquiry-group-divider__delivery-hint {
  display: block;
  margin-top: 1px;
  font-size: var(--font-size-2xs);  /* deutlich kleiner als der Preis darüber */
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0;
  line-height: 1.1;
}
.inquiry-group-divider:hover > td {
  background: linear-gradient(180deg, var(--color-primary-light), #f8fafc);
}
.inquiry-group-divider:focus-visible {
  outline: 2px solid var(--color-info-text);
  outline-offset: -2px;
}
.inquiry-group-divider__chevron {
  transition: transform var(--transition);
  color: var(--color-text-muted) !important;
}
.inquiry-group-divider:not(.is-collapsed) .inquiry-group-divider__chevron {
  transform: rotate(90deg);
}
/* Items, die zu einer eingeklappten Gruppe gehören → ausblenden.
   */
tr.inquiry-collapsible-row.is-hidden-by-group { display: none; }
.inquiry-group-divider:first-of-type > td { border-top: 0; }
.inquiry-group-divider--unassigned > td {
  background: linear-gradient(180deg, var(--color-gray-100), #fff);
}
.inquiry-group-divider__head {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.inquiry-group-divider__head .material-symbols-outlined {
  color: var(--color-info-text);
  font-size: 20px;
}
.inquiry-group-divider--unassigned .inquiry-group-divider__head .material-symbols-outlined {
  color: var(--color-text-muted);
}
.inquiry-group-divider__name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
/* Stats-Block rechts: Antworten-Counter + Gesamtbetrag mit FIXEN Breiten,
 * damit die Werte über alle Gruppen-Header untereinander bündig stehen. */
.inquiry-group-divider__stats {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}
.inquiry-group-divider__count {
  display: inline-block;
  width: 120px;
  text-align: right;
  color: var(--color-text-muted);
}
.inquiry-group-divider__total {
  display: inline-block;
  min-width: 110px;
  text-align: right;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: var(--font-size-xl);  /* prominenter Gesamtpreis */
  line-height: 1.15;
}
/* alle Items dieser Gruppe sind beantwortet → grünes Highlight */
.inquiry-group-divider__count--complete {
  color: #166534;
  font-weight: 600;
}
.inquiry-group-divider__total--has {
  color: var(--color-text);
  font-weight: 700;
}

/* white-space: normal verhindert, dass HTML-Einrückungen zwischen Summary/
   Description-Divs als sichtbare Leerzeile gerendert werden. Den Original-
   Zeilenumbruch im Beschreibungstext stellen wir gezielt auf .item-desc-body. */
.td-desc--compact { white-space: normal; }
.td-desc--compact .item-desc-body { white-space: pre-wrap; }

/* ═══════════════════════════════════════════════
   STATE-Badges (übergreifend)
═══════════════════════════════════════════════ */
.badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-error-bg);   color: var(--color-error-text);   font-weight: 700; }
.badge--error   { background: var(--color-error-bg);   color: var(--color-error-text);   font-weight: 700; }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.badge--muted   { background: var(--color-border);                 color: #4b5563; }
.badge--system  { background: #ede9fe; color: #5b21b6; font-weight: 600; }
.badge--info-light { background: #dbeafe; color: #1e40af; font-weight: 700; }
.badge--success-light { background: #dcfce7; color: #166534; font-weight: 700; }
.badge .material-symbols-outlined { font-size: var(--font-size-base); vertical-align: middle; }

/* ═══════════════════════════════════════════════
   EMPTY-STATE
═══════════════════════════════════════════════ */
/* .empty-state — siehe konsolidierte Definition Z. ~1237 (oben). */
.empty-state .material-symbols-outlined { font-size: 40px; color: #cbd5e1; display: block; margin-bottom: 8px; }

/* Preis-Input (rechtsbündig + Monospace) */
.form-input.price-input {
  text-align: right;
  font-family: ui-monospace, monospace;
}

/* Activity-Log Zeitstempel-Zelle */
.log-ts { font-family: ui-monospace, monospace; color: var(--color-text-muted); white-space: nowrap; }

/* Item-Bilder-Galerie (kleine Thumbnails unter Beschreibung) */
.item-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}
.item-image-thumb {
  display: block;
  width: 64px; height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-gray-100);
  transition: transform var(--transition), box-shadow var(--transition);
}
.item-image-thumb:hover { transform: scale(1.05); box-shadow: var(--shadow-md); }
.item-image-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ═══════════════════════════════════════════════
   TEXT-CLAMP — 2-Zeilen-Fold mit Expand-Toggle
═══════════════════════════════════════════════ */
/* Anker-Größe für alle Texte der Anfrage-Vorbereitungs-Tabelle.
 * Wer die Standardgröße ändern will, ändert sie hier — alle anderen
 * NU-Tabellen-Zellen werden über `.inquiry-group .table …`-Selektoren
 * an diese Größe gekoppelt.                                              */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
/* In der Preissuche soll die Description-Spalte kompakter sein als in der
 * Anfrage-Vorbereitungs-Tabelle. Spezifischer Selektor schlägt `.table--lg`. */
td.td-desc--compact > .item-desc-wrap > .text-clamp-2,
td.td-desc--compact > .item-desc-wrap > .item-desc-body {
  font-size: var(--font-size-sm);
}
.item-desc-wrap[data-clamped="open"] .text-clamp-2 {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}
/* "Vorgelesener" Whitespace wenn Block ausgeklappt: pre-wrap zeigt Original-Umbrüche */
.item-desc-wrap[data-clamped="open"] .item-desc-body { white-space: pre-wrap; }

/* „Rich-Text"-Variante des Clamps für längere Lese-Texte (Anfrage-/Gruppen-
   Beschreibung): klemmt auf eine Maximalhöhe statt 2 Zeilen — sonst scrollt man
   bei langen GAEB-Beschreibungen ewig. Toggle nutzt dieselbe .text-clamp-toggle. */
.text-clamp-rich { max-height: 11em; overflow: hidden; }
.item-desc-wrap[data-clamped="open"] .text-clamp-rich { max-height: none; }

/* Aufklappbare Beschreibungs-Box (NU-Seite): „Beschreibung" (fett) als Kopf,
   Button „Komplette Beschreibung anzeigen" klappt den Text auf/zu — collapsed by
   default, damit lange GAEB-Beschreibungen nicht endlos scrollen. Reines
   <details>, kein JS. */
.public-desc__summary {
  display: flex; align-items: center; gap: .75rem; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.public-desc__summary::-webkit-details-marker { display: none; }
.public-desc__title { font-weight: 700; }
.public-desc__toggle { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.public-desc__chevron { transition: transform .15s ease; }
.public-desc[open] .public-desc__chevron { transform: rotate(180deg); }
.public-desc__less { display: none; }
.public-desc[open] .public-desc__more { display: none; }
.public-desc[open] .public-desc__less { display: inline; }
.public-desc__body { margin-top: .6rem; }

.text-clamp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.text-clamp-toggle:hover { background: var(--color-primary-light); }
.text-clamp-toggle__icon {
  font-size: var(--font-size-xl);
  transition: transform var(--transition);
}
.item-desc-wrap[data-clamped="open"] .text-clamp-toggle__icon { transform: rotate(180deg); }
.text-clamp-toggle__label { line-height: 1; }
/* Toggle ausblenden, wenn nicht nötig (JS markiert per Klasse) */
.text-clamp-toggle.is-hidden { display: none; }

/* ═══════════════════════════════════════════════
   RATING-INPUT (Sterne-Widget)
═══════════════════════════════════════════════ */
.rating-input {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 4rem;
  line-height: 1;
}
.rating-input .rating-star {
  cursor: pointer;
  user-select: none;
  color: #d1d5db;                   /* default: grau */
  transition: color var(--transition), transform 100ms;
  outline: none;
}
.rating-input .rating-star.is-filled,
.rating-input .rating-star.is-hover {
  color: #f59e0b;                   /* gefüllt: bernstein */
}
.rating-input .rating-star:hover { transform: scale(1.05); }
.rating-input .rating-star:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.rating-input .rating-clear { margin-left: var(--space-3); align-self: center; font-size: var(--font-size-base); }

/* Inline-Bewertung in Tabellen (Lieferanten-Übersicht): klickbare Sterne,
   per AJAX gespeichert. Bewusst generisch gehalten — auch für andere Listen
   (z. B. Nachunternehmer) wiederverwendbar. */
.inline-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.inline-rating__star {
  font-size: 1.15rem;
  color: #d1d5db;                    /* default: grau */
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: color var(--transition), transform 100ms;
}
.inline-rating__star.is-filled { color: #f59e0b; }   /* gefüllt: bernstein */
.inline-rating__star:hover { transform: scale(1.1); }
.inline-rating__star:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-radius: 3px;
}
.inline-rating.is-saving { opacity: .55; pointer-events: none; }

/* ═══════════════════════════════════════════════
   TOPBAR — Datum / KW / Uhrzeit
═══════════════════════════════════════════════ */
.topbar-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  padding: 4px 12px;
  border-right: 1px solid var(--color-border);
  margin-right: var(--space-2);
  user-select: none;
}
.topbar-clock__row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}
/* KW direkt vor dem Datum — Bold, aber keine Akzentfarbe (Vorgabe). */
.topbar-clock__kw  { font-weight: 700; color: inherit; }
.topbar-clock__sep { color: var(--color-text-muted); margin: 0 4px; }
.topbar-clock__date { font-family: ui-monospace, monospace; display: inline-flex; align-items: baseline; }
/* ═══════════════════════════════════════════════
   GROUPS — Zwischenschritt vor Bearbeitung
═══════════════════════════════════════════════ */
.group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.group-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: box-shadow var(--transition), opacity var(--transition);
}
.group-card.is-dragging { opacity: .4; box-shadow: var(--shadow-md); }
.group-card--unassigned { background: #fafafa; border-style: dashed; }

.group-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: #f9fafb;
  border-bottom: 1px solid var(--color-border);
}
.group-card--unassigned .group-card__head { background: transparent; border-bottom-style: dashed; }
.group-drag-handle {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: 20px;
}
.group-drag-handle:active { cursor: grabbing; }
.group-card__name {
  flex: 1;
  font-weight: 600;
  font-size: var(--font-size-md);
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.group-card__name:focus { background: #fff; border-color: var(--color-primary); outline: none; }
.group-card__name:hover { background: #fff; border-color: var(--color-border); }
.group-card__name-static { flex: 1; font-weight: 600; color: var(--color-text-secondary); padding: 4px 8px; }
.group-card__count { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }

/* Collapse-Toggle (Chevron links im Group-Header) */
.group-card__toggle {
  flex-shrink: 0;
  padding: 4px;
  margin-right: -4px;
}
.group-card__chevron {
  transition: transform .15s ease-out;
  font-size: 22px;
  color: var(--color-text-muted);
}
.group-card.is-collapsed .group-card__chevron { transform: rotate(-90deg); }
.group-card.is-collapsed .group-card__body    { display: none; }
.group-card.is-collapsed .group-card__head    {
  /* Im zugeklappten Zustand braucht der Header keinen unteren Rand-Spalt
     mehr — die Bottom-Border der Card übernimmt die Trennung. */
  border-bottom-color: transparent;
}

.group-card__body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 60px;
  transition: background var(--transition);
}
.group-card__body.is-drop-over {
  background: var(--color-primary-light);
  outline: 2px dashed var(--color-primary);
  outline-offset: -4px;
}
.group-card__empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* ── GAEB-Vorschläge („Fake-Gruppen") ───────────────────────────────────
   Sehen aus wie echte Gruppen-Karten, aber in warmer Akzentfarbe (amber/
   orange) markiert als VORSCHLAG. Sind kein echter calculation_groups-
   Eintrag — Items haben weiterhin group_id = NULL. Beim Klick auf "Weiter"
   verschwinden alle nicht-zugewiesenen Fake-Gruppen, ihre Items landen
   unter "Einzelaufgaben". */
.group-card--gaeb-fake {
  border-color: #fdba74;          /* amber-300 */
  background: #fffaf0;            /* sehr leichtes amber-50 */
  box-shadow: 0 1px 2px rgba(251,146,60,.15);
}
.group-card--gaeb-fake .group-card__head {
  background: #fff7ed;            /* amber-50 */
  border-bottom: 1px solid #fed7aa;
}
.gaeb-fake__head { flex-wrap: wrap; gap: var(--space-2); }
.gaeb-fake__select-all {
  display: inline-flex; align-items: center; cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.gaeb-fake__select-all:hover { background: rgba(251,146,60,.15); }
.gaeb-fake__select-all input {
  width: 16px; height: 16px;
  accent-color: #ea580c;          /* orange-600 */
  cursor: pointer;
}
/* „Alle markieren" im Karten-Header (Einzelanfragen-Pool + echte Gruppen) —
   wie GAEB-Variante, neutraler Akzent */
.card-select-all {
  display: inline-flex; align-items: center; cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.card-select-all:hover { background: rgba(3,112,176,.1); }
.card-select-all input {
  width: 16px; height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.gaeb-fake__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  background: #fed7aa;            /* amber-200 */
  color: #9a3412;                 /* orange-900 */
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.gaeb-fake__badge .material-symbols-outlined { font-size: 14px; }
.gaeb-fake__path-badge {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-xs);
  background: #fff;
  color: #c2410c;                 /* orange-700 */
  border: 1px solid #fdba74;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  flex-shrink: 0;
}
.gaeb-fake__name { flex: 1; min-width: 200px; color: #7c2d12; }
.gaeb-fake__assign {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
  cursor: default;
}
.gaeb-fake__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border-bottom: 1px solid #fed7aa;
  font-size: var(--font-size-xs);
  color: #9a3412;
  font-style: italic;
}
.gaeb-fake__hint .material-symbols-outlined { font-size: 14px; color: #ea580c; }
.gaeb-fake__body { padding-top: var(--space-1); }
/* Card im eingeklappten Zustand: Hint einklappen mit */
.group-card--gaeb-fake.is-collapsed .gaeb-fake__hint { display: none; }

.group-item-card {
  display: flex;
  gap: var(--space-2);
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.group-item-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.group-item-card.is-dragging { opacity: .4; }
.group-item-card:active { cursor: grabbing; }
.group-item-card__handle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  align-self: flex-start;
  margin-top: 2px;
  flex-shrink: 0;
}
.group-item-card__body { flex: 1; min-width: 0; }
.group-item-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.group-item-card__pos {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-xs);
  background: var(--color-info-bg);
  color: var(--color-info-text);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  flex-shrink: 0;
}
.group-item-card__summary { flex: 1; font-weight: 600; color: var(--color-text); min-width: 100px; }
.group-item-card__qty { color: var(--color-text-muted); font-size: var(--font-size-sm); font-family: ui-monospace, monospace; }
.group-item-card__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* Bilder in der Gruppier-Karte: kompaktere Thumbs als in der Positions-Tabelle. */
.group-item-card .item-image-thumb { width: 52px; height: 52px; }

/* Multi-Select-Checkbox (links vor dem Drag-Handle) */
.group-item-card__select {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.group-item-card__select input {
  width: 16px; height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.group-item-card.is-selected {
  background: rgba(99,102,241,.08);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

/* Floating Bulk-Action-Bar — erscheint, sobald ≥1 Item markiert ist.
   Position: fixed direkt unter der Topbar, mittig über der Sidebar-Spalte.
   Sticky scheitert hier, weil .card overflow:hidden hat und damit jeden
   sticky-Child aus dem Viewport-Kontext zieht. */
.bulk-move-bar[hidden] { display: none !important; } /* CSS display:flex schlägt sonst [hidden] */
.bulk-move-bar {
  position: fixed;
  top: calc(var(--topbar-height) + 12px);
  left: calc(var(--sidebar-width, 240px) + 24px);
  right: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  flex-wrap: wrap;
  animation: bulkBarSlideIn .18s ease-out;
}
@keyframes bulkBarSlideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Wenn Sidebar eingeklappt ist (Klasse wird vom Sidebar-Toggle auf <body>
   gesetzt), Bar nachziehen. */
body.is-sidebar-collapsed .bulk-move-bar {
  left: calc(var(--sidebar-width-collapsed, 64px) + 24px);
}
/* Auf schmalen Viewports (Mobile) ohne Sidebar-Margin volle Breite */
@media (max-width: 768px) {
  .bulk-move-bar { left: 12px; right: 12px; }
}
.bulk-move-bar__count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm);
}
.bulk-move-bar__count .material-symbols-outlined { font-size: 18px; }
.bulk-move-bar__target {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  white-space: nowrap;   /* „Verschieben nach" nie umbrechen */
}
.bulk-move-bar__target .text-muted { color: rgba(255,255,255,.85) !important; }
.bulk-move-bar__target .form-select { min-width: 240px; }
.bulk-move-bar .btn--ghost { color: #fff; }
.bulk-move-bar .btn--ghost:hover { background: rgba(255,255,255,.15); }

/* [ITEMS-FILTER] Vom Positions-Filter der Gruppen-Ansicht ausgeblendete Karten */
.is-filtered-out { display: none !important; }

/* ── Auswertung Preisanfragen (/auswertungen/preisanfragen) ─────────────── */
.report-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1000px) { .report-filter { grid-template-columns: 1fr 1fr; } }
.report-filter .form-group { margin: 0; }
.report-summary { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.report-summary__item { display: flex; flex-direction: column; min-width: 7rem; }
.report-summary__value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.report-summary__label { font-size: 0.8rem; color: var(--color-text-secondary, var(--color-text-soft)); }
.text-info { color: var(--color-info); }

/* ── Projekt-Konditionen (AG-/NU-Karten im Projekt-Formular) ───────────── */
.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1100px) { .terms-grid { grid-template-columns: 1fr; } }
.terms-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface-soft, #f9fafb); }
.terms-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.terms-card__head .material-symbols-outlined { color: var(--color-primary); font-size: var(--icon-size); }
.terms-card__section { margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.terms-card__check { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); margin-top: var(--space-2); }
.terms-card__foot { margin-top: var(--space-4); text-align: right; }
.terms-umlagen { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.terms-umlagen__row { display: flex; align-items: center; gap: var(--space-2); }
.terms-umlagen__row .form-input:first-child { flex: 2 1 auto; }
.terms-umlagen__row .form-input:nth-child(2) { flex: 0 0 7rem; }
.terms-umlagen__row .form-select { flex: 0 0 4.5rem; }

/* ── Textbausteine (Stammdaten /textbausteine) ─────────────────────────── */


.tb-cat-add { display: flex; gap: var(--space-2); align-items: center; }
.tb-cat-add .form-input { flex: 1 1 auto; }
/* Baustein-Popup: Der Fuß (Speichern) muss immer sichtbar bleiben, auch bei
   langen Bausteinen. Das erledigt jetzt die feste Dialog-Höhe weiter unten
   (Dialog = Flex-Spalte, Body scrollt, Editor füllt den Rest) — deshalb hier
   KEINE eigenen max-height-Deckel mehr: die überstimmten sonst den Vollbild-
   Modus (90vh statt voller Höhe) und deckelten den Editor auf 45vh. */
#tb-block-modal .bl-modal__body { overflow-y: auto; }
/* Angebots-Textbausteine (Anschreiben/Schlusstext als Einträge, /angebote/:id) */
.qtb__list { display: flex; flex-direction: column; gap: var(--space-2); }
.qtb__entry {
  display: flex; align-items: flex-start; gap: 6px;
  border: 1px solid var(--color-border); border-radius: var(--radius, 8px);
  background: var(--color-surface, #fff); padding: 8px 10px;
}
.qtb__entry.is-dragging { opacity: .35; }
.qtb__entry.is-editing { border-color: var(--color-primary, var(--color-accent-blue)); box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); }
/* Angehobene Karten-Kopie, die dem Cursor beim Ziehen folgt */
.qtb__entry--ghost {
  position: fixed; top: -1000px; left: -1000px; pointer-events: none; z-index: 1000;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22); transform: rotate(1.5deg); opacity: .95;
}
.qtb__handle {
  cursor: grab; color: var(--color-text-muted, #98a2b3); user-select: none;
  font-size: 20px; line-height: 1.4; flex: 0 0 auto; margin-top: 1px;
}
.qtb__handle:active { cursor: grabbing; }
.qtb__body { flex: 1 1 auto; min-width: 0; }
.qtb__view { cursor: text; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }
.qtb__view:hover { background: var(--color-bg, #f7f7f7); }
.qtb__view:focus-visible { outline: 2px solid var(--color-primary, var(--color-accent-blue)); outline-offset: 1px; }
.qtb__edit-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: 6px; }
.qtb__del {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: 2px;
  color: var(--color-text-muted, #98a2b3); border-radius: 4px; line-height: 1;
}
.qtb__del:hover { color: var(--color-danger, #dc2626); background: var(--color-bg, #f7f7f7); }
.qtb__empty { margin: 2px 0 8px; }
.qtb__add { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.qtb__pick { max-width: 340px; }

/* Positionen inline bearbeiten (Menge/Bezeichnung/Text) im Angebots-Editor */
.qpos-edit { cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
.qpos-edit:hover { background: var(--color-bg, #f7f7f7); box-shadow: inset 0 0 0 1px var(--color-border, #e5e7eb); }
.qpos-edit:focus-visible { outline: 2px solid var(--color-primary, var(--color-accent-blue)); outline-offset: 1px; }
.qpos-input { display: inline-block; }
.qpos-desc-ta { width: 100%; }
.qpos-desc-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: 6px; }

/* ── Dokumenten-Mappe (/mappen) ─────────────────────────────────────── */
/* Sichtbarkeits-Checkbox (Modal + Detail-Bearbeiten-Zeile) */
.mappen-create__conf {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-size-sm); cursor: pointer; white-space: nowrap;
}
.mappen-create__conf input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
/* Bearbeiten-Zeile im Mappen-Detail: Name | Checkboxen (untereinander) | Projekt | Speichern */
.mappen-edit {
  display: flex; align-items: flex-end; gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.mappen-edit__field { display: flex; flex-direction: column; gap: 4px; }
.mappen-edit__field .form-label { margin: 0; }
.mappen-edit__field--grow { flex: 1 1 300px; min-width: 240px; }
.mappen-edit__field--grow .form-input { width: 100%; }
.mappen-edit__opts { display: flex; flex-direction: column; gap: 6px; }
.mappen-edit__save { display: flex; align-items: center; gap: var(--space-2); }
.mappen-edit .ss-wrapper { width: 260px; }
.md-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}
.md-tile {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Quell-Position während des Ziehens: sichtbarer „Landeplatz" (die Karte
   selbst folgt als angehobener Klon dem Cursor, s. .md-tile--ghost). */
.md-tile.is-dragging {
  opacity: .45;
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  background: var(--color-surface-alt);
}
/* Angehobene Karten-Kopie am Cursor (Drag-Image-Snapshot) — muss gerendert,
   aber aus dem Sichtfeld sein; leicht gedreht + Schlagschatten = „getragen". */
.md-tile--ghost {
  position: absolute;
  top: -10000px; left: -10000px;
  pointer-events: none;
  transform: rotate(-3deg) scale(1.03);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  border-color: var(--color-primary);
}
.md-tile__select {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: rgba(255,255,255,.85); border-radius: var(--radius-sm);
  padding: 3px 5px; cursor: pointer; display: inline-flex;
}
.md-tile__select input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }
/* Positions-Nummer oben rechts — Reihenfolge fürs Sortieren/Sammel-PDF */
.md-tile__pos {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  min-width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* Bild-Lightbox */
.md-view-stage {
  background: #111;
  display: flex; align-items: center; justify-content: center;
  max-height: 78vh; overflow: hidden;
}
.md-view-stage img { max-width: 100%; max-height: 78vh; display: block; }
.md-tile__preview {
  display: flex; align-items: center; justify-content: center;
  height: 140px; background: var(--color-surface-alt); overflow: hidden;
}
.md-tile__img { width: 100%; height: 100%; object-fit: cover; }
.md-tile__pdficon { font-size: 56px; color: #b91c1c; }
.md-tile__meta { padding: 6px 8px 2px; min-width: 0; }
.md-tile__name {
  display: block; font-size: var(--font-size-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-tile__info { font-size: var(--font-size-xs); }
.md-tile__actions {
  display: flex; align-items: center; gap: 2px;
  padding: 2px 4px 6px;
}
/* Zuschneide-Popup: 10px Luft rund ums Bild, damit die Rand-Anfasser frei
   klickbar sind — und die Anfasser selbst 5× so groß wie der Cropper-Default
   (5px → 25px; Zentrier-Offsets von -3px auf -13px nachgezogen). */
.md-crop-stage {
  max-height: 60vh;
  overflow: hidden;
  background: #111;
  padding: 10px;
}
/* Innerer Frame = Referenzgröße für den Cropper (Content-Box der Stage);
   Bild VOR dem Init einpassen — sonst schneidet overflow:hidden die unteren
   Anfasser ab (kein 10px-Abstand unten). */
.md-crop-frame { position: relative; }
.md-crop-frame img {
  max-width: 100%;
  max-height: calc(60vh - 20px);
  display: block;
  margin: 0 auto;
}
#md-crop-modal .cropper-point {
  width: 15px;
  height: 15px;
  opacity: .9;
  border-radius: 4px;
}
#md-crop-modal .cropper-point.point-n  { top: -8px;    margin-left: -8px; }
#md-crop-modal .cropper-point.point-s  { bottom: -8px; margin-left: -8px; }
#md-crop-modal .cropper-point.point-e  { right: -8px;  margin-top: -8px; }
#md-crop-modal .cropper-point.point-w  { left: -8px;   margin-top: -8px; }
#md-crop-modal .cropper-point.point-ne { top: -8px;    right: -8px; }
#md-crop-modal .cropper-point.point-nw { top: -8px;    left: -8px; }
#md-crop-modal .cropper-point.point-se { bottom: -8px; right: -8px; width: 15px; height: 15px; opacity: .9; }
#md-crop-modal .cropper-point.point-sw { bottom: -8px; left: -8px; }

/* ── Zentrale Gruppen-Vorschläge (/kalkulationen/gruppen-vorschlaege) ── */
.gs-table { width: 100%; border-collapse: collapse; }
.gs-table th {
  text-align: left; font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: .03em; color: var(--color-text-muted);
  padding: 6px 8px; border-bottom: 1px solid var(--color-border);
}
.gs-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.gs-table .gs-preview:empty { display: none; }
.gs-empty { padding: var(--space-4) 8px; }
.gs-saved-badge {
  font-size: var(--font-size-xs);
  background: rgba(255,255,255,.25);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

.group-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px var(--space-4);
  background: transparent;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.group-add-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Gruppen-Header-Zeile in der Edit-Items-Tabelle */
.group-row { background: linear-gradient(180deg, var(--color-primary-light), #fff); }
.group-row td {
  padding: 0 !important;
  border-top: 2px solid var(--color-primary);
}
/* Sichtbarer Abstand zwischen Gruppen — 5px in App-Hintergrundfarbe (grau) */
.group-row:not(:first-of-type) td {
  border-top: 5px solid var(--color-bg);
  box-shadow: inset 0 2px 0 var(--color-primary);
}
.group-row--unassigned td { border-top-color: var(--color-border-strong); }
.group-row--unassigned:not(:first-of-type) td {
  border-top-color: var(--color-bg);
  box-shadow: inset 0 2px 0 var(--color-border-strong);
}
.group-row--unassigned { background: linear-gradient(180deg, var(--color-gray-100), #fff); }
.group-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
}
/* Show-Ansicht: Kategorie-Zeile ist zuklappbar (Chevron + Klick auf die Zeile) */
#show-items-table .group-row__head { cursor: pointer; }
.group-row__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: -2px 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.group-row__toggle:hover { background: rgba(0, 0, 0, 0.06); }
.group-row__head .group-row__toggle .material-symbols-outlined {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.group-row.is-collapsed .group-row__toggle .material-symbols-outlined { transform: rotate(-90deg); }
/* Zugeklappt: Beschreibung/Anhänge der Kategorie ebenfalls verbergen — eine kompakte Zeile */
.group-row.is-collapsed .group-details { display: none; }
.group-row__head .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 20px;
}
.group-row--unassigned .group-row__head .material-symbols-outlined { color: var(--color-text-muted); }
.group-row__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--font-size-base);
}
.group-row__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
/* .group-row__edit: aktuell keine eigenen Styles — Klasse bleibt als Hook für JS/zukünftige Varianten. */
.group-row__kind {
  margin-left: auto;
  width: auto;
  min-width: 180px;
  padding: 6px var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}
.group-row__kind:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(3,112,176,.12);
}
/* Compact form-control Modifier — überschreibt die --field-*-Tokens
   der Basis-Klasse, sodass kein !important nötig ist. Höhe 34px = btn--sm. */
.form-select--sm,
.form-input--sm {
  --field-py:        var(--space-1-5);
  --field-px:        var(--space-3);
  --field-font-size: var(--font-size-sm);
  --field-height:    34px;
  line-height: 1.4;
}

/* Anzeige in Item-Row, wenn Scope von der Gruppe kommt */
.scope-from-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-primary-light);
  color: var(--color-info-text);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.scope-from-group .material-symbols-outlined { font-size: var(--font-size-lg); }

/* ── Gruppen-Partner-Zuweisung (NU/Händler auf Gruppen-Ebene) ───────────── */
.group-row__partners {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 8px var(--space-4) 12px;
  border-top: 1px dashed var(--color-border);
  background: #fafbfc;
}
/* Dropdowns nebeneinander auf einer eigenen Zeile unter dem Label/Pills:
   Scope + Partner-Add je 30 %, Trennstrich, globale Suche nimmt den Rest. */
.group-row__controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}
.group-row__controls > select { flex: 0 0 auto; }
.group-row__controls > .ss-wrapper { min-width: 0; }
.group-row__controls .ss-wrapper:has(> .js-group-scope),
.group-row__controls .ss-wrapper:has(> .js-group-partner-add) { flex: 0 0 30%; width: 30%; }
.group-row__controls .ss-wrapper:has(> .js-group-partner-search) { flex: 1 1 0; }
.group-row__controls .ss-trigger { width: 100%; }
.group-row__ctrl-sep {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0 var(--space-2);
}
@media (max-width: 900px) {
  .group-row__controls { flex-wrap: wrap; }
  .group-row__ctrl-sep { display: none; }
  .group-row__controls .ss-wrapper:has(> .js-group-scope),
  .group-row__controls .ss-wrapper:has(> .js-group-partner-add),
  .group-row__controls .ss-wrapper:has(> .js-group-partner-search) { flex: 1 1 100%; width: 100%; }
}
.group-row__partners-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.group-row__partners-label .material-symbols-outlined { font-size: var(--font-size-lg); }
.group-partner-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.group-partner-empty {
  font-size: var(--font-size-sm);
  font-style: italic;
}
.group-partner-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 8px;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  /* Volle Namen ausschreiben — kein max-width / kein ellipsis */
}
.group-partner-pill__icon { font-size: 14px !important; }
.group-partner-pill__icon--sub    { color: var(--color-indigo-500); }
.group-partner-pill__icon--dealer { color: #0ea5e9; }
.group-partner-pill__name {
  white-space: nowrap;
}
.group-partner-pill__rating { color: #f59e0b; font-size: var(--font-size-sm); letter-spacing: .5px; }
.group-partner-pill__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-danger);
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}
.group-partner-pill__remove .material-symbols-outlined { font-size: 16px !important; }
.js-group-scope        { min-width: 220px; }
.js-group-partner-add  { min-width: 200px; }

/* ── Aufklappbarer Bereich pro Gruppe (Beschreibung + Anhänge) ──────────── */
.group-details {
  background: #fafbfc;
  border-top: 1px dashed var(--color-border);
}
.group-details[open] {
  border-bottom: 1px dashed var(--color-border);
}
.group-details__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  user-select: none;
}
.group-details__summary::-webkit-details-marker { display: none; }
.group-details__summary:hover { background: var(--color-primary-light); color: var(--color-text); }
.group-details__chevron {
  font-size: var(--font-size-xl);
  transition: transform var(--transition);
}
.group-details[open] .group-details__chevron { transform: rotate(180deg); }
.group-details__label { font-weight: 600; }
.group-details__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  background: var(--color-primary-light);
  color: var(--color-info-text);
  font-weight: 700;
}
.group-details__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.group-details__field-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.group-details__field-label .material-symbols-outlined { font-size: var(--font-size-lg); }
.js-group-description {
  background: #fff;
  min-height: 5em;
}
/* ── Gruppen-Preisvergleich (Show-Ansicht) ──────────────────────────────
 * Erscheint direkt unter dem Gruppen-Header und zeigt die Gesamtpreise
 * pro Partner für diese Gruppe — der günstigste wird hervorgehoben.
 */
.group-compare-row td {
  padding: 0;
  background: #fbfdff;
  border-top: 1px dashed var(--color-border);
}
.group-compare {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 8px var(--space-4);
}
.group-compare__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}
.group-compare__label .material-symbols-outlined { font-size: var(--font-size-xl); }
.group-compare__hint { font-weight: 400; margin-left: 4px; color: var(--color-text); }
.group-compare__hint--muted { color: var(--color-text-muted); font-style: italic; }
.group-compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.group-compare__partner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-size: var(--font-size-sm);
}
.group-compare__partner--cheap {
  background: var(--color-success-bg);
  border-color: #86efac;
}
.group-compare__partner--incomplete {
  background: var(--color-warning-bg);
  border-color: #fcd34d;
  opacity: 0.9;
}
.group-compare__name { font-weight: 600; }
.group-compare__total { color: var(--color-text); font-weight: 700; }

/* Zusatz-States für die Freigaben-Detail-Ansicht (Chosen vs. Cheapest) */
.group-compare__partner--chosen-cheap {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  box-shadow: inset 0 0 0 1px var(--color-success);
}
.group-compare__partner--chosen-against {
  background: #ffedd5;
  border-color: #ea580c;
  box-shadow: inset 0 0 0 1px #ea580c;
}

/* ── Gruppen-Entscheidung (Freigaben-Detail) ────────────────────────────
 * Erscheint direkt unter dem Gruppen-Header in /freigaben/:id und zeigt
 * die getroffene Entscheidung + Begründung + Partner-Vergleich.
 */
.group-decision-row td {
  padding: 0;
  background: #fffdf7;
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.group-decision {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px var(--space-4);
}
.group-decision__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}
.group-decision__head .material-symbols-outlined { font-size: var(--font-size-xl); }
.group-decision__title { font-weight: 700; color: var(--color-text); }
.group-decision__chosen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.group-decision__chosen--cheap   { background: var(--color-success-bg); color: #166534; }
.group-decision__chosen--against { background: #ffedd5;                  color: #9a3412; }
.group-decision__extra      { color: #b45309; font-weight: 600; }
.group-decision__cheap-note { color: #166534; font-style: italic; }
.group-decision__flow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.group-decision__flow .text-mono { font-variant-numeric: tabular-nums; }
.group-decision__arrow { color: var(--color-text-muted); }
.group-decision__savings {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: #166534;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.group-decision__savings.is-up { background: #fee2e2; color: #991b1b; }
.group-decision__reason {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid #ea580c;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: pre-wrap;
}
.group-decision__reason .material-symbols-outlined { font-size: var(--font-size-lg); color: #ea580c; margin-top: 2px; }

.group-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.group-attachments__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.group-attachments__title { font-weight: 700; color: var(--color-text); }
.group-attachments__add {
  margin-left: auto;
  cursor: pointer;
}
.group-attachments__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

/* Top-N als kleine Buttons (1..5) — gleiche Höhe wie .form-select--sm */
.group-topn-buttons {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.js-group-topn-btn,
.js-group-standard-btn {
  /* Maße passend zu .form-select--sm: padding 6px / font-size sm / border 1px */
  padding: 6px var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.js-group-topn-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-info-text);
}
.js-group-topn-btn:focus-visible,
.js-group-standard-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(3,112,176,.12);
}
.js-group-topn-btn[disabled],
.js-group-standard-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* [STANDARD-PARTNER] Gleiche Form wie die Zahlen-Knöpfe, aber gefüllt statt
   outline: Er steht am Ende der Reihe und ist die Aktion, die man am
   häufigsten will — deshalb farbig hervorgehoben statt gleichrangig. */
.js-group-standard-btn {
  min-width: auto;
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.js-group-standard-btn:hover {
  background: var(--color-primary-hover, #025d92);
  border-color: var(--color-primary-hover, #025d92);
  color: #fff;
}

/* ── Aufklappbarer Top-Bereich der Show-Ansicht (Beschreibung + Anhänge) ── */
.calc-top-details {
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}
.calc-top-details__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  user-select: none;
}
.calc-top-details__summary::-webkit-details-marker { display: none; }
.calc-top-details__summary:hover { background: var(--color-primary-light); }
.calc-top-details__chevron {
  font-size: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition);
}
.calc-top-details[open] .calc-top-details__chevron { transform: rotate(180deg); }
.calc-top-details__label { flex: 0 0 auto; }
.calc-top-details__badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  background: var(--color-primary-light);
  color: var(--color-info-text);
  font-weight: 700;
}
.calc-top-details__body > .calc-description-block,
.calc-top-details__body > .calc-attachments {
  border-top: 1px solid var(--color-border);
}

/* ── Öffentliche NU-Eingabe-Ansicht ──────────────────────────────────────── */
.public-meta-block {
  padding: .75rem 1rem;
  background: #fafafa;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: .75rem;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}
.public-meta-block__body {
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: break-word;   /* lange/ungebrochene Tokens nicht aus der Box laufen lassen */
}
.public-meta-block__body :first-child { margin-top: 0; }
.public-meta-block__body :last-child  { margin-bottom: 0; }
/* Section-Trenner zwischen Gruppen und Einzeleinträgen. */


/* Header-Card der Verhandlungs-/Anfrage-Seite — eigener Wrapper analog
   zur Gruppen-Card. Enthält Titel + Status + Intro/Frist/Meta. */
.public-inquiry-headcard {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);
  margin-bottom: var(--space-4);
}
.public-inquiry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}
.public-inquiry-header > div { display: flex; flex-direction: column; gap: 2px; }
.public-inquiry-header h2 { margin: 0; }
/* Company-Logo im Anfrage-Kopf: begrenzt wie im Public-Shell (layout.php) —
   nötig, weil die Staff-Ansicht (…/bearbeiten) show.php im App-Layout rendert
   und die Inline-Styles des Public-Layouts dort fehlen. */
.public-inquiry-header__logo { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.public-inquiry-header__logo img { max-height: 56px; max-width: 200px; width: auto; height: auto; object-fit: contain; display: block; }

.public-inquiry-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

/* ── GAEB-Toolbar (X83 Download / X84 Upload) ─────────────────────── */
.gaeb-toolbar {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gaeb-toolbar__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.gaeb-toolbar__icon {
  font-size: 28px;
  color: var(--color-primary, var(--color-accent-blue));
  flex-shrink: 0;
}
.gaeb-toolbar__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
}
.gaeb-toolbar__hint {
  margin: 2px 0 0;
  /* Standardgröße statt sm — der Hinweis erklärt Partnern den GAEB-Weg
     und war als Kleingedrucktes zu leicht zu überlesen (Feedback 2026-07-28). */
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}
.gaeb-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.gaeb-toolbar__actions .btn {
  cursor: pointer;
}
.gaeb-toolbar__actions .btn[aria-busy="true"] {
  opacity: .6;
  pointer-events: none;
}


.gaeb-toolbar__status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}


/* ── Partner-Statistik im Verhandlungs-Header ────────────────────── */
.partner-stats {
  background: var(--color-surface-alt, #fafbfc);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.partner-stats__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-base);
}
.partner-stats__head .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-primary, #6366f1);
}
.partner-stats__head .text-muted { margin-left: auto; }

/* ── Zuklappbare Variante (`<details>` + `<summary>`) ───────────────────
   Versteckt die Default-Marker-Pfeile der Browser und nutzt stattdessen
   ein eigenes Chevron-Icon, das beim Öffnen rotiert. Zusätzlich kollabiert
   der Container vertikal, sodass nur der Head sichtbar bleibt.

   Gleiche Optik für „Historisches Verhandlungs-Verhalten" und
   „Preis-Vergleich zu allen Partnern dieser Anfrage". */
.partner-stats--collapsible > summary.partner-stats__head {
  list-style: none;           /* Firefox: Marker ausblenden */
  cursor: pointer;
  user-select: none;
  outline: none;
}
.partner-stats--collapsible > summary.partner-stats__head::-webkit-details-marker {
  display: none;              /* Chrome/Safari: Marker ausblenden */
}
.partner-stats--collapsible > summary.partner-stats__head:focus-visible {
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}
.partner-stats__head-meta {
  margin-left: auto;
}
.partner-stats__head-chevron {
  font-size: 20px !important;
  color: var(--color-text-muted, var(--color-text-soft));
  transition: transform 0.18s ease;
  margin-left: 4px;           /* von der `auto`-Lücke unabhängig */
}
.partner-stats--collapsible[open] > summary > .partner-stats__head-chevron {
  transform: rotate(180deg);
}
/* Wenn das Details-Element gar keinen Body hat (z. B. Vergleichs-Tabelle ohne
   Daten), Chevron + Klick-Cursor unterdrücken — der Head dient dann nur als
   Statusanzeige. */
.partner-stats--no-body > summary.partner-stats__head {
  cursor: default;
}
/* Wenn zugeklappt zeigt `<details>` nur das `<summary>` — `.partner-stats`
   ist schon ein flex-column mit `gap: var(--space-3)`, dadurch sitzt der
   Body beim Öffnen automatisch mit dem richtigen Abstand zum Head. Keine
   zusätzliche margin nötig. */

.partner-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.partner-stats__cell {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.partner-stats__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.partner-stats__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.partner-stats__value.is-good { color: #166534; }
.partner-stats__value.is-bad  { color: #991b1b; }
.partner-stats__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.partner-stats__ranges {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.partner-stats__ranges thead th {
  background: var(--color-gray-100);
  padding: 6px 12px;
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.partner-stats__ranges thead th.text-right { text-align: right; }
.partner-stats__ranges tbody td {
  padding: 6px 12px;
  border-top: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.partner-stats__range-pct { font-weight: 700; }
.partner-stats__range-pct.is-good { color: #166534; }
.partner-stats__range-pct.is-bad  { color: #991b1b; }
.partner-stats__range-better { font-weight: 600; color: #166534; }

/* Vor/Nach-Anzeige innerhalb einer Cell (Rabatt + Lieferkosten). */
.partner-stats__value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.partner-stats__arrow {
  color: var(--color-text-muted);
  font-weight: 700;
}

/* Letzte Anfragen — Sub-Tabelle */
.partner-stats__recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partner-stats__subhead {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.partner-stats__recent-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
}
.partner-stats__recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.partner-stats__recent-table thead th {
  background: var(--color-gray-100);
  padding: 6px 10px;
  text-align: left;
  font-size: var(--font-size-2xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
  white-space: nowrap;
}
.partner-stats__recent-table thead th.text-right { text-align: right; }
.partner-stats__recent-table tbody td {
  padding: 6px 10px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
  white-space: nowrap;
}
.partner-stats__recent-table tbody td.text-mono { font-variant-numeric: tabular-nums; }

.public-group {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);
}
.public-group:first-of-type { margin-top: 0; }
.public-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}
.public-group__head--unassigned { background: var(--color-gray-100); }
.public-group__head .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 20px;
}
.public-group__head--unassigned .material-symbols-outlined { color: var(--color-text-muted); }
.public-group__name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
}
.public-group__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.public-group__desc {
  padding: 8px var(--space-4);
  background: #fafbfc;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  white-space: pre-wrap;
}
.public-group__attachments {
  padding: 8px var(--space-4) 10px;
  background: #fafbfc;
  border-bottom: 1px solid var(--color-border);
}
.public-group__attachments-head {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.public-group__attachments-head .material-symbols-outlined { font-size: var(--font-size-lg); }
.public-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.public-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition), background var(--transition);
}
.public-attachment:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.public-attachment__thumb,
.public-attachment__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  border-radius: 4px;
  object-fit: cover;
}
.public-attachment__icon { color: var(--color-text-muted); font-size: 18px !important; }
.public-attachment__info { display: flex; flex-direction: column; }
.public-attachment__name { font-weight: 600; }
.public-attachment__meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.public-items-table { margin: 0; }
.public-items-table thead th {
  background: #fafbfc;
  font-size: var(--font-size-sm);
}


.price-input {
  text-align: right;
  font-family: ui-monospace, monospace;
}


/* Schriftgrößen-Normierung innerhalb der Anfrage-NU-Karten-Tabelle:
 * alles auf `var(--font-size-base)` (= 14 px, gleiche Größe wie die
 * Item-Überschrift „Vorbereitung Betondecke"). Greift auch auf Texte, die
 * im HTML mit `text-sm`/`text-xs` annotiert sind. */
.inquiry-group .table th,
.inquiry-group .table td,
.inquiry-group .table td.text-sm,
.inquiry-group .table td.text-xs,
.inquiry-group .table .text-sm,
.inquiry-group .table .text-xs {
  font-size: var(--font-size-base);
}


/* Read-only-Variante des Anhänge-Blocks (Show-Seite) */
.calc-attachments--readonly { background: #fff; }


/* Überschrift-Zeile über der Beschreibung */
.item-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* Vollbild-Button rechts vom Überschriftenfeld */
.item-summary-row .item-fullscreen {
  flex: 0 0 36px;
  width: 36px;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Überschriftenfeld füllt den restlichen Platz */
.item-summary-row .item-summary-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Vollbild-Modal für Item-Bearbeitung — ca. 70% Breite */
.item-fullscreen-modal__panel {
  width: 70vw !important;
  max-width: 1200px !important;
  max-height: 90vh;
}
/* Seiten-Kopf (Titel links, Aktionen rechts) — genutzt von Auswertungen,
 * GAEB-Vergleich, Datenschutz-Seite. Bisher undefiniert → Blöcke stapelten. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* [GAEB-VERGLEICH] Wort-Diff-Hervorhebung + Zeilen-Tönung + Upload-Form. */
.gdiff-ins { background: #dcfce7; color: #166534; border-radius: 3px; padding: 0 2px; }
.gdiff-del { background: #fee2e2; color: #991b1b; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.gaeb-diff-row--added   > td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }
.gaeb-diff-row--removed > td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.gaeb-diff-row--changed > td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.gaeb-diff-table td { vertical-align: top; }
.gaeb-diff-text { max-width: 640px; }
.gaeb-diff-groups { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* Split-Ansicht (Gegenüberstellung wie ein Code-Diff): zwei gleich breite
 * Spalten, Seiten-Tönung je Status, leere Gegenseite schraffiert-grau. */
.gaeb-split-table { table-layout: fixed; }
.gaeb-split-table td { vertical-align: top; width: 50%; }
.gaeb-split-cell--removed { background: #fef2f2; }
.gaeb-split-cell--added   { background: #f0fdf4; }
.gaeb-split-table td.gaeb-split-cell--empty {
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 8px, #f1f5f9 8px, #f1f5f9 16px);
  /* Marker („entfallen"/—) in beiden Achsen mittig — schlägt das
   * `.gaeb-split-table td { vertical-align: top }` der Inhalts-Zellen. */
  vertical-align: middle;
  text-align: center;
}
.gaeb-split-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: .25rem; flex-wrap: wrap; }
.gaeb-split-head .text-mono { font-weight: 700; }
.gaeb-diff-form { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.gaeb-diff-form .form-group { flex: 1 1 280px; margin: 0; }
.gaeb-diff-form__actions { display: flex; align-items: center; gap: var(--space-3); flex-basis: 100%; }

/* [PAPIERKORB] Vollbild-Modal mit fester Suchleiste, Body scrollt. */
.trash-modal__panel {
  width: 96vw !important;
  max-width: none !important;
  height: 94vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.trash-modal__search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: .5rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.trash-modal__search .form-input { flex: 1; }
.trash-modal__search .material-symbols-outlined { color: var(--color-text-muted); }
.trash-modal__body { flex: 1; overflow: auto; max-height: none; }
.item-fullscreen-modal__body { max-height: calc(90vh - 130px); }
.item-fullscreen-modal__body textarea { min-height: 200px; }
.item-fullscreen-modal__body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.item-fullscreen-modal__body .form-group { margin-bottom: var(--space-4); }
@media (max-width: 768px) {
  .item-fullscreen-modal__panel { width: 95vw !important; }
  .item-fullscreen-modal__body .form-row { grid-template-columns: 1fr; }
}

.topbar-clock__time {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .02em;
}
@media (max-width: 768px) { .topbar-clock { display: none; } }

/* ═══════════════════════════════════════════════
   KALKULATION — Edit-View
═══════════════════════════════════════════════ */
.calc-description-edit {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}
.calc-description-edit .form-label { gap: 6px; }
.calc-description-edit textarea {
  background: #fff;
  resize: vertical;
  min-height: 14em;
}
.calc-description-edit__icon { font-size: var(--font-size-md); color: var(--color-text-muted); }

/* ── Anhänge auf Preisanfrage-Ebene ─────────────────────────────────────── */
.calc-attachments {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}
.calc-attachments__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.calc-attachments__icon { color: var(--color-text-muted); font-size: var(--font-size-xl); }
.calc-attachments__title { font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text); }
.calc-attachments__hint  { font-size: var(--font-size-sm); color: var(--color-text-muted); flex: 1; }
.calc-attachments__add   { cursor: pointer; }

/* ── Drag & Drop Zone für Datei-Upload ───────────────────────────────── */
.calc-attachments__dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
  border: 2px dashed var(--color-border, #d1d5db);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.calc-attachments__dropzone:hover {
  border-color: var(--color-primary, var(--color-accent-blue));
  color: var(--color-text);
  background: #f9fbff;
}
.calc-attachments__dropzone.is-dragover-window {
  border-color: var(--color-primary, var(--color-accent-blue));
  background: #eff6ff;
}
.calc-attachments__dropzone.is-dragover {
  border-color: var(--color-primary, var(--color-accent-blue));
  background: #dbeafe;
  color: var(--color-primary-dark, #1d4ed8);
  border-style: solid;
}
.calc-attachments__dropzone-icon {
  font-size: 36px;
  color: var(--color-primary, var(--color-accent-blue));
  flex-shrink: 0;
}
.calc-attachments__dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-sm);
}
.calc-attachments__dropzone-text strong {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: 600;
}
.calc-attachments__dropzone-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.calc-attachments__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.calc-attachments__empty {
  grid-column: 1 / -1;
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.calc-attachment {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.calc-attachment__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-muted);
}
.calc-attachment__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.calc-attachment__preview .material-symbols-outlined { font-size: 40px; }
.calc-attachment__info {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.calc-attachment__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}
.calc-attachment__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.calc-attachment__actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  gap: 4px;
}
.calc-attachment__remove,
.calc-attachment__copy {
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.calc-attachment__remove { color: var(--color-danger); }
.calc-attachment__remove:hover { background: color-mix(in srgb, var(--color-danger) 12%, #fff); }
.calc-attachment__copy   { color: var(--color-primary); }
.calc-attachment__copy:hover    { background: var(--color-primary-light); }
.calc-attachment__copy.is-copied {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.calc-attachment__remove .material-symbols-outlined,
.calc-attachment__copy   .material-symbols-outlined { font-size: var(--font-size-lg); }

.add-item-row { padding: var(--space-4); background: #f9fafb; border-top: 1px solid var(--color-border); }
.add-item-form {
  display: grid;
  grid-template-columns: 90px 1fr 110px 32px;
  gap: var(--space-2);
  align-items: start;
}
.add-item-form .form-group { margin: 0; }
.add-item-form .form-group--col { display: flex; flex-direction: column; gap: 6px; }
.add-item-form input[name="summary"] { font-weight: 600; margin-bottom: 6px; }
.add-item-form textarea { resize: vertical; min-height: 5em; }
.add-item-form .add-item-pos {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  text-align: center;
  padding: 14px 8px;
}
.add-item-form button[type="submit"] { align-self: start; }

/* ── Bulk-Add-Panel für neue Positionen ─────────────────────────────────── */
.add-items-panel {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.add-items-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.add-items-panel__icon { color: var(--color-primary); font-size: var(--font-size-2xl); }
.add-items-panel__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
.add-items-panel__hint {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.add-items-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.add-items-rows .add-item-form {
  padding: var(--space-3);
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.add-item-form__remove {
  align-self: start;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.add-item-form__remove:hover {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 35%, #fff);
  background: color-mix(in srgb, var(--color-danger) 8%, #fff);
}
.add-item-form__remove .material-symbols-outlined { font-size: var(--font-size-xl); }

.add-items-panel__actions {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.add-items-plus-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px dashed var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.add-items-plus-btn:hover {
  background: var(--color-primary-light);
  transform: scale(1.05);
}
.add-items-plus-btn .material-symbols-outlined { font-size: var(--font-size-2xl); }

.item-summary-input { font-weight: 600; margin-bottom: 6px; }

/* Pos-Spalte im Edit-View: kompaktes editierbares Feld — Platz für bis zu 3-stellige Pos. */
.item-pos-input {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
  padding: 8px 6px !important;
  width: 100%;
  min-width: 0;
}
/* Pos-Zelle in der Edit-Tabelle ausreichend breit für hierarchische Nummern (z. B. "03.18.1") */
#items-table .td-pos { min-width: 110px; }
.item-desc-input { resize: vertical; min-height: 5em; }
.item-notes-display { font-size: var(--font-size-xs); margin-top: 4px; }

/* Edit-Row Qty/Unit-Spalte — vertikal auf Höhe der Textarea ausgerichtet
   (Summary-Zeile + Margin überspringen, damit die Inputs auf gleicher Linie
   wie die Description-Textarea starten). */
.qty-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 56px;
}

/* Edit-Row Zuweisungs-Spalte */
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 5px;
  margin-bottom: var(--space-4);
}
.offers-list-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 1px;
}
.offers-list-edit .offers-empty {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Offer-Row im Edit-View (kompakter als die Pille im Show) */
.offer-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.offer-row__icon { font-size: var(--font-size-base); }
.offer-row__icon--sub    { color: var(--color-indigo-500); }
.offer-row__icon--dealer { color: #0ea5e9; }
.offer-row__name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
}
.offer-row__rating {
  font-size: var(--font-size-sm);
  color: #f59e0b;
  letter-spacing: .5px;
}
.offer-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-error);
  padding: 0;
  line-height: 0;
}
.offer-remove .material-symbols-outlined { font-size: var(--font-size-md); }

.add-sub-select { margin-top: calc(5px + 6px); }
.scope-empty-hint {
  margin-top: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Item-Delete-Button */
.item-delete-cell { text-align: right; }
.item-delete { color: var(--color-error); }
.item-delete .material-symbols-outlined { font-size: var(--icon-size-lg); }

/* ═══════════════════════════════════════════════
   COMPANY-Credentials Settings
═══════════════════════════════════════════════ */
.credentials-form .card-body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
.credential-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.credential-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  background: #fafafa;
  border-bottom: 1px solid var(--color-border);
}
.credential-row__icon { font-size: var(--font-size-2xl); color: var(--color-primary); }
.credential-row__title { flex: 1; min-width: 200px; }
.credential-row__body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.credential-input {
  font-family: ui-monospace, monospace;
  letter-spacing: .04em;
}
.credential-row__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-error-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  user-select: none;
}
.credential-row__clear .material-symbols-outlined { font-size: var(--font-size-lg); }

/* ═══════════════════════════════════════════════
   UTILITIES — Icons, Card-Header, Buttons, Forms
═══════════════════════════════════════════════ */

/* Icon-Sizing-Utilities (statt inline style="font-size:...") */

.icon-sm   { font-size: 14px !important; }


/* Card-Header mit Flex-Aktionen (auch außerhalb Kalkulation) */


/* Delete-Button-Variante (Ghost mit Error-Farbe) */
.btn--danger-ghost { color: var(--color-error); }
.btn--danger-ghost:hover { background: var(--color-error-bg); color: var(--color-error-text); }

/* Form-Error-Hint */
.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: 4px;
}

/* Alert-Komponente (flach, ohne phase-banner Margin/Padding) */
/* .alert Basis-Regel — siehe konsolidierte Definition Z. ~1212 (oben).
   Nur die BEM-Modifier (Z. 5443-5446 historisch) bleiben hier. */
/* (Duplikat konsolidiert — siehe Alias-Block unten, UI-Audit P4) */

/* Pagination */
.pagination {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}
.pagination__info {
  flex: 1;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.pagination .btn.is-disabled {
  pointer-events: none;
  opacity: .4;
}

/* ═══════════════════════════════════════════════
   UTILITIES & COMPONENTS — Frontend-Audit Patches
═══════════════════════════════════════════════ */

/* Heading-Icon Utility — ersetzt das inline-styled Material-Symbols neben Überschriften.
   Verwendung: <span class="heading-icon">search</span> in <span class="material-symbols-outlined heading-icon">… */
.heading-icon {
  vertical-align: middle;
  color: var(--color-blue-700);
  font-size: 1.25rem;
  margin-right: .25rem;
}

.heading-icon--muted   { color: var(--color-text-muted); }

/* ── Page-Title-Large: Großes Icon links über 2 Textzeilen ─────────────
   Test-Layout für die Stammdaten-Index-Seiten. Icon-Größe richtet sich
   nach der kombinierten Höhe von H2-heading-3 (~1.5rem mit line-height
   1.2 → ~1.8rem) plus Meta-Zeile (text-sm ~1.4rem) plus gap. Ergibt
   ~3rem Total → Icon 2.6rem damit es optisch leicht „über" beide Zeilen
   geht ohne riesig zu wirken. Vertikal zentriert. */
.page-title-large {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.page-title-large__icon {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-blue-700);
  flex-shrink: 0;
  /* Variable-Font-Achsen-Override: für die Display-Variante ein bisschen
     gefüllter, damit's bei der Größe besser wirkt als der dünne Standard-Stroke. */
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}
/* Farb-Modifier für status-codierte Title-Icons (Freigaben offen/freigegeben,
   Warnung-Listen, Fehler-Übersichten). Default ist blau; diese Modifier
   überschreiben gezielt. */
.page-title-large__icon--info    { color: #1e40af; }   /* blau — offen/in-progress */
.page-title-large__icon--success { color: var(--color-success); }   /* grün — abgeschlossen/OK */
.page-title-large__icon--warning { color: var(--color-warning); }
.page-title-large__icon--danger  { color: var(--color-error); }
.page-title-large__icon--muted   { color: var(--color-text-muted); }
.page-title-large__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-title-large__heading {
  margin: 0;
  line-height: 1.2;
}
.page-title-large__meta {
  display: block;
  line-height: 1.2;
}

/* Form-Error: einheitliche Inline-Fehlermeldungen unter Form-Feldern. */
.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-error);
  line-height: 1.4;
}


/* Alias: bestehende Inline-Pattern .alert-success/.alert-error sollen --success/--error nutzen.
   Beide BEM-Varianten verweisen auf die gleiche Optik. */
.alert--success { background: var(--color-success-bg); color: var(--color-success-text); border-color: #86efac; border-left: 4px solid var(--color-success); }
.alert--error   { background: var(--color-error-bg);   color: var(--color-error-text);   border-color: #fecaca; border-left: 4px solid var(--color-error); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #fde68a; border-left: 4px solid var(--color-warning); }
.alert--info    { background: var(--color-info-bg);    color: var(--color-info-text);    border-color: #93c5fd; border-left: 4px solid var(--color-info); }

/* Sort-Header — accessibler State über aria-sort (statt nur .is-active).
   Browser-default Outline für Focus-Indikator, damit Keyboard-Nutzer wissen, wo sie sind. */
.sort-header[aria-sort="ascending"],
.sort-header[aria-sort="descending"] {
  color: var(--color-primary);
}
.sort-header[aria-sort="ascending"]  .sort-header__icon,
.sort-header[aria-sort="descending"] .sort-header__icon {
  color: var(--color-primary);
  opacity: 1;
}
.sort-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ── Context-Switcher (ehemals inline-styled im Layout) ─────────────────── */
.context-switcher {
  position: relative;
}
.context-switcher > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: .85rem;
}
.context-switcher > summary::-webkit-details-marker { display: none; }
.context-switcher[open] > summary { background: var(--color-surface-soft); }

.context-switcher__icon         { color: var(--color-indigo-500); font-size: var(--font-size-lg); }
.context-switcher__name         { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.context-switcher__enterprise   { font-weight: 600; color: var(--color-text); }
.context-switcher__company      { font-size: .7rem; color: var(--color-text-secondary); }
.context-switcher__caret        { font-size: var(--font-size-lg); color: var(--color-text-muted); }

/* Topbar-Pille — gemeinsamer Style für Tickets, Suche, Schrift, Hilfe.
   Layout 1:1 wie der context-switcher (2-zeilig, gleiches Padding), damit
   alle Topbar-Elemente nebeneinander gleich groß wirken. */
.topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: .85rem;
  position: relative;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.topbar-pill:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-border-strong);
}
.topbar-pill__icon { font-size: var(--font-size-lg); color: var(--color-indigo-500); }
.topbar-pill__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.topbar-pill__title { font-weight: 600; color: var(--color-text); }
.topbar-pill__sub   { font-size: .7rem; color: var(--color-text-secondary); }
.topbar-pill__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-text-muted);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Rot = unbearbeitete (offene) Tickets — verlangt Aufmerksamkeit */
.topbar-pill__badge--danger { background: var(--color-error, #dc2626); }
/* Blau = Tickets in Bearbeitung — informational */
.topbar-pill__badge--info   { background: var(--color-info, #0ea5e9); }
@media (max-width: 1100px) {
  .topbar-pill__name { display: none; } /* enger Viewport: nur Icon + Badge */
}

.context-switcher__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
}
.context-switcher__group-label {
  padding: var(--space-2) var(--space-1) var(--space-1);
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.context-switcher__group-label .material-symbols-outlined {
  font-size: .9rem;
  vertical-align: middle;
}
.context-switcher__form { margin: 0; }
.ctx-item {
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}
.ctx-item .material-symbols-outlined { font-size: var(--font-size-lg); }
.ctx-item:hover           { background: var(--color-gray-100); }
.ctx-item.is-current      { background: var(--color-indigo-50); color: var(--color-indigo-600); }
.context-switcher__empty  { padding: var(--space-2) var(--space-3); font-size: .8rem; color: var(--color-text-muted); font-style: italic; }

/* Font-Zoom Indicator-Label im Topbar-Button */
.font-zoom-label {
  font-size: .65rem;
  font-weight: 600;
  margin-left: 2px;
}

/* ── Toast Container + Animation (ehemals via JS injiziert) ─────────────── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-alert);
  pointer-events: none;
}
.toast {
  min-width: 280px;
  box-shadow: var(--shadow-md);
  animation: aspm-toast-slide-in .2s ease;
  pointer-events: auto;
}
@keyframes aspm-toast-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Searchable-Select Komponente (ehemals 230 LOC style.cssText in app.js) ── */
.ss-wrapper {
  position: relative;
  width: 100%;
}
.ss-trigger {
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background-image: none;
  padding-right: var(--space-3);
}
.ss-trigger:disabled {
  cursor: not-allowed;
  opacity: .6;
}
.ss-trigger__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-trigger__label--placeholder { color: var(--color-text-muted); }
.ss-trigger__caret {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.ss-native {
  /* Ursprüngliches <select> sichtbar belassen für FormData, aber unsichtbar */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ss-popup {
  display: none;
  position: fixed;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
  max-height: 320px;
  flex-direction: column;
}
.ss-popup.is-open { display: flex; }

.ss-search {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  font-size: inherit;
  outline: none;
  width: 100%;
}

.ss-list {
  overflow-y: auto;
  flex: 1;
}
.ss-optgroup-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-surface-muted);
}
.ss-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: inherit;
  color: var(--color-text);
}
.ss-item:hover,
.ss-item.is-highlighted        { background: var(--color-gray-100); }
.ss-item.is-selected,
.ss-item.is-selected:hover     { background: var(--color-indigo-50); color: var(--color-indigo-600); font-weight: 600; }
.ss-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: .85rem;
}

/* Modal-Z-Index Tokenisierung — bestehende Werte ggf. überschreiben (falls einer der frühen
   Rules sie noch hartkodiert). Keine Spezifitäts-Eskalation nötig: Tokens werden konsumiert. */
.modal-backdrop { z-index: var(--z-modal); }
.sidebar        { z-index: var(--z-sidebar); }
.topbar         { z-index: var(--z-topbar); }


/* ── Generische Text-/Zell-Utilities ──────────────────────────────────── */
.text-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.text-warning    { color: var(--color-warning-text); }
.text-danger     { color: var(--color-danger, #b91c1c); }
.text-right      { text-align: right; }
.td-qty--right   { text-align: right; }
.td-actions      { white-space: nowrap; text-align: right; }

/* Partner-Icon (Sub vs. Händler) — vorher inline-styled */
.partner-icon            { font-size: var(--font-size-lg); vertical-align: middle; }
.partner-icon--sub       { color: var(--color-indigo-500); }
.partner-icon--dealer    { color: var(--color-cyan-500); }
.partner-chosen-mark     { font-size: .95rem; vertical-align: middle; color: var(--color-success); }

/* Lieferanten-Form: DATANORM-Katalog-Zuordnung mit Rabatt-Spalte */
.dealer-catalogs__table {
  width: 50%;
  min-width: 360px;
  border-collapse: collapse;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}
.dealer-catalogs__table th,
.dealer-catalogs__table td {
  padding: 6px 10px;
  vertical-align: middle;
}
.dealer-catalogs__table thead th {
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: transparent;
}
.dealer-catalogs__table th.dealer-catalogs__name-th {
  text-align: left;
  padding-left: 0;
}
.dealer-catalogs__row.is-selected > td {
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}
.dealer-catalogs__discount {
  text-align: right;
  font-family: ui-monospace, monospace;
}
.dealer-catalogs__discount[disabled] {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

/* PriceSearch Offer-Detail-Subpage */
.offer-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
}
.offer-detail-section {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.offer-detail-section__title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.offer-detail-section__title .material-symbols-outlined {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}
.offer-detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 160px) 1fr;
  gap: 6px 12px;
  font-size: var(--font-size-sm);
}
.offer-detail-list dt {
  color: var(--color-text-muted);
  font-weight: 500;
}
.offer-detail-list dd {
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}
.offer-detail-desc {
  white-space: pre-wrap;
  line-height: 1.45;
}
.offer-detail-note {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.offer-detail-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}
.offer-detail-image-thumb {
  display: block;
  width: 80px;
  height: 80px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.offer-detail-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PriceSearch Result-Meta-Zeile */
.pricesearch-results__meta {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Public Inquiry View (ehemals inline-styled) ─────────────────────── */
.inquiry-alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: .9rem;
}
.inquiry-intro {
  margin: 0 0 var(--space-4);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Badge-Icon: alle Icons im Badge auf eine Höhe — überschreibt ggf. die
   Standard-Größe der Material-Symbols. */
.badge .material-symbols-outlined {
  font-size: .85rem;
  vertical-align: middle;
}

/* ── Section-Headings & Form-Group-Größen-Modifier ────────────────────── */
.section-heading {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}
.section-heading--space-top { margin-top: var(--space-6); }

.form-group--xnarrow { max-width: 120px; }
.form-group--narrow  { max-width: 200px; }
.form-group--medium  { max-width: 180px; }

/* Form-Actions: zusätzlicher Top-Gap (z. B. unter komplettem Formular). */
.form-actions--top-gap {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Adress-Grid: 2-spaltig für Rechnungs- vs. Baustellen-Adresse. */


/* Copy-Adresse Button (kleinerer Text) */


/* Card mit etwas Abstand zur darüber liegenden Karte (z. B. Tagebuch-Karte). */
.card--top-gap { margin-top: var(--space-6); }

/* ── Project-Diary Einträge ────────────────────────────────────────────── */
.diary-new-form {
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-surface-muted);
}
.diary-entry {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.diary-entry__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.diary-entry__summary::-webkit-details-marker { display: none; }
.diary-entry__icon         { color: var(--color-indigo-500); font-size: var(--font-size-lg); }
.diary-entry__date         { font-size: .85rem; }
.diary-entry__preview {
  flex: 1;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diary-entry__created  { font-size: .75rem; }
.diary-entry__form     { margin-top: var(--space-3); }
.diary-entry__actions  { display: flex; gap: var(--space-2); }
.diary-entry__delete   { margin-left: auto; }

/* Empty-State: kompakte Variante */
.empty-state--compact {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-5);
}

/* ── Micro-Utilities ──────────────────────────────────────────────────── */
/* Inline-Icon im Fließtext — gleicht Material-Symbols an die umgebende Zeile an. */
.inline-icon {
  font-size: var(--font-size-base);
  vertical-align: middle;
}


/* Text-Color Utilities */
.text-error   { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* Table-Cell mit großzügigem Padding (für Empty-Row in Tabellen). */
.td-padded { padding: var(--space-6); }

/* Buttons / interaktive Elemente in disabled-Look (statt inline style="opacity:.5"). */
.btn.is-disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
/* Für <a>-Buttons (kein disabled-Attribut möglich): gleiche Optik + klick-tot.
   Immer zusammen mit aria-disabled="true" setzen. */
.btn--disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Release-Action-Bar Hint */
.release-summary__hint { margin-top: var(--space-1); }

/* ── Spalten-Breiten-Utilities für Tabellen ───────────────────────────── */
.col-w-pos          { width: 60px; }
.col-w-qty          { width: 110px; }
.col-w-unit         { width: 60px; }
.col-w-partner      { width: 230px; }
.col-w-price        { width: 120px; }


.col-w-actions      { width: 90px; }

/* ── Public Inquiry: Submit-Row & "eingegangen am"-Hinweis ─────────────── */
.inquiry-submit-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  justify-content: flex-end;
}
.inquiry-submitted-note {
  text-align: center;
  margin: var(--space-6) 0 0;
  color: var(--color-text-muted);
  font-size: .85rem;
}

/* ── Offer-Pill Icon-Varianten (statt inline color="...") ──────────────── */


/* Activity-Log Spalten-Breiten */
.col-w-timestamp { width: 160px; }
.col-w-user      { width: 200px; }
.col-w-action    { width: 100px; }

/* ── Table-Scroll Wrapper ─────────────────────────────────────────────────
   Tabellen in einer .card (mit overflow:hidden) konnten ihre Breite nicht
   überschreiten — Inhalte wurden abgeschnitten. Der Wrapper erlaubt
   horizontales Scrollen, ohne dass die Card scrollt.
   ─────────────────────────────────────────────────────────────────────── */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Compact-Table Modifier — weniger horizontales Padding für dichte Listen. */
.table--compact th,
.table--compact td {
  padding: var(--space-2-5) var(--space-3);
}
.table--compact th { font-size: var(--font-size-xs); }

/* ── Spalten-Breiten für Kalkulations-Liste ──────────────────────────── */
.col-w-num           { width: 64px;  text-align: center; }
.col-w-feedback      { width: 130px; text-align: center; }
.col-w-date          { width: 120px; }
.col-w-row-actions   { width: 1%; white-space: nowrap; }   /* schrumpft auf Buttons */

/* Phase-Spalte: schmal, ohne Umbruch */
.col-w-phase { width: 140px; white-space: nowrap; }

/* ── Calc-Link in Tabellen (Name → Edit) ──────────────────────────────── */
.calc-link {
  text-decoration: none;
  color: inherit;
}
.calc-link:hover { color: var(--color-primary); }
.calc-link__pdf {
  font-size: .75rem;
  margin-top: 2px;
}

/* ── Feedback-Numbers im Rückmeldungen-Cell ───────────────────────────── */
.feedback-num               { font-weight: 600; }
.feedback-num--items        { color: var(--color-success); }
.feedback-num--companies    { color: var(--color-blue-700); }

/* ── Badge-Modifier: Indigo + Approved ────────────────────────────────── */
.badge--indigo {
  background: var(--color-indigo-50);
  color: var(--color-indigo-600);
  font-weight: 700;
}
.badge--approved {
  background: var(--color-emerald-300);
  color: #14532d;            /* Dunkles Grün — hoher Kontrast auf der Pastellfläche */
  font-weight: 600;
}

/* ── Phase-Banner: inset-Variante (innerhalb einer Card) ──────────────── */
.phase-banner--inset {
  margin: var(--space-3) var(--space-5);
}

/* ── Utility: text-center ────────────────────────────────────────────── */
.text-center { text-align: center; }

/* ── PriceSearch: "Gesendet"-Spalte ───────────────────────────────────── */
.col-w-sent { width: 110px; }

.sent-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
.sent-cell__icon         { color: var(--color-success); }
.sent-cell__icon--manual { color: var(--color-text-muted); }
.sent-cell__date         { font-variant-numeric: tabular-nums; }

/* ── PriceSearch: Zeitraum-Filter (Preset + von/bis) ──────────────────── */
/* Kompakter (1-Row-Layout): vorher 160/150/150 → 140/130/130 = -60px Total,
   damit alle Felder + Actions auf üblichen 1280-1440px Screens nebeneinander
   passen. Bei schmalerer Viewport flex-wrap-Fallback. */
.pricesearch-filter__preset { flex: 0 0 140px; }
.pricesearch-filter__date   { flex: 0 0 130px; }
.pricesearch-filter__cheapest { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pricesearch-filter__cheapest-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  height: 34px; /* matcht .form-input--sm / .form-select--sm Höhe */
}
.pricesearch-filter__cheapest-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
/* Flex-Linienumbruch: erzwingt eine neue Zeile innerhalb des flex-wrap-
   Containers, damit der Suchen-Button unter den Filter-Feldern landet. */

.pricesearch-filter__date input[type="date"] {
  font-variant-numeric: tabular-nums;
}

/* ── PriceSearch: Modus-Toggle (Filter ↔ KI) ──────────────────────────── */
.search-mode-toggle {
  display: inline-flex;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
.search-mode-toggle__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.search-mode-toggle__tab .material-symbols-outlined {
  font-size: 1rem;
}
.search-mode-toggle__tab:hover {
  color: var(--color-text);
}
.search-mode-toggle__tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ── PriceSearch: KI-Such-Leiste ──────────────────────────────────────── */
.pricesearch-ai-bar {
  background: linear-gradient(135deg, var(--color-indigo-50) 0%, var(--color-surface-alt) 100%);
  border-bottom: 1px solid var(--color-border);
}
.pricesearch-ai {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}
.pricesearch-ai__field {
  flex: 1;
  margin: 0;
}
.pricesearch-ai__field .form-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.pricesearch-ai__notice {
  margin-top: var(--space-3);
}

/* Submit-Button matched die Höhe des form-input: btn--lg gibt's bereits,
   wir setzen hier nur ein klein wenig mehr Gewicht für die KI-Action. */
.pricesearch-ai__submit {
  font-weight: 700;
}

/* Loading-State: Spinner-Icon dreht sich, Button bleibt disabled-Look. */
.pricesearch-ai.is-loading .pricesearch-ai__submit-icon {
  animation: aspm-spin 1s linear infinite;
}
.pricesearch-ai.is-loading .form-input {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}
@keyframes aspm-spin {
  to { transform: rotate(360deg); }
}

/* Loader-Banner unter dem Form — wird nur sichtbar, wenn JS das [hidden]-Attribut
   entfernt. Der [hidden]-Selektor MUSS hier explizit kommen, weil das spätere
   `display: flex` sonst das User-Agent-Default für [hidden] überschreibt. */
.pricesearch-ai__loader[hidden],
.pricesearch-gaeb__loader[hidden] { display: none !important; }
.pricesearch-ai__loader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-indigo-50);
  border-left: 3px solid var(--color-indigo-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pricesearch-ai__spinner {
  font-size: 24px;
  color: var(--color-indigo-500);
  animation: aspm-spin 1s linear infinite;
}
.pricesearch-ai__loader-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
/* Cancel-Button im Loader rechtsbündig */
.pricesearch-loader__cancel {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── PriceSearch: GAEB-Upload-Bar ──────────────────────────────────────── */
.pricesearch-gaeb-bar {
  background: linear-gradient(135deg, var(--color-emerald-300) 0%, var(--color-surface-alt) 100%);
  background: linear-gradient(135deg, #ecfdf5 0%, var(--color-surface-alt) 100%);
  border-bottom: 1px solid var(--color-border);
}
.pricesearch-gaeb {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricesearch-gaeb__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.pricesearch-gaeb__file    { flex: 2 1 320px; margin: 0; }
.pricesearch-gaeb__preset  { flex: 0 0 180px; margin: 0; }
.pricesearch-gaeb__date    { flex: 0 0 160px; margin: 0; }
.pricesearch-gaeb__file .form-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Alle Form-Controls in der GAEB-Row auf gleiche Höhe wie die Dropzone (48px). */
.pricesearch-gaeb__row .form-select,
.pricesearch-gaeb__row .form-input {
  --field-height: 48px;
  --field-py: 0;
  display: flex;
  align-items: center;
}

/* ── Drag&Drop-Zone Komponente ────────────────────────────────────────── */
.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}
.dropzone__input {
  /* Native File-Input unsichtbar, aber im DOM für FormData */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone__icon {
  font-size: 24px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--transition);
}
.dropzone__text {
  flex: 1;
  min-width: 0;          /* erlaubt ellipsis im Kind */
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
  line-height: 1.3;
}
.dropzone__placeholder {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone__filename {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Datum + Uhrzeit nebeneinander in einer Formular-Zelle (z. B. „Abgabe Angebot"). */
.pf-datetime { display: flex; gap: .4rem; }
.pf-datetime__date { flex: 1 1 auto; min-width: 0; }
/* Uhrzeit: genug Innenraum für „HH:MM" — das form-input-Padding (20px je
   Seite) ließ bei fester 7.5rem-Breite nur „11:0" übrig. */
.pf-datetime__time { flex: 0 0 8.75rem; width: 8.75rem; padding-left: .5rem; padding-right: .5rem; }

/* Große Dropzone-Variante (4× Standardhöhe, Inhalt zentriert) — z. B. Projektdateien. */
.dropzone--tall { height: auto; min-height: 192px; flex-direction: column; justify-content: center; text-align: center; gap: var(--space-2); }
.dropzone--tall .dropzone__icon { font-size: 40px; }
.dropzone--tall .dropzone__text { flex: 0 0 auto; align-items: center; }
.dropzone--tall .dropzone__clear { position: absolute; top: 8px; right: 8px; }

/* [PROJEKT] Projektdateien: Dateiliste (Upload läuft über die Standard-[data-dropzone]-Komponente). */
.pfiles-empty { margin: .75rem 0 0; }
.pfiles-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; }
.pfiles-list__row { display: flex; align-items: center; gap: .6rem; padding: .45rem .25rem; border-bottom: 1px solid var(--color-border); }
.pfiles-list__row:last-child { border-bottom: 0; }
.pfiles-list__icon { font-size: var(--icon-size); color: var(--color-text-secondary); flex: 0 0 auto; }
.pfiles-list__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); text-decoration: none; }
.pfiles-list__name:hover { color: var(--color-primary); text-decoration: underline; }
.pfiles-list__meta { flex: 0 0 auto; white-space: nowrap; }
.pfiles-list__del { display: flex; align-items: center; }

.dropzone__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  position: relative;    /* über dem absolut positionierten Input */
  z-index: 1;
}
.dropzone__clear:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.dropzone__clear .material-symbols-outlined { font-size: var(--font-size-xl); }

/* States */
.dropzone.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.dropzone.is-dragover .dropzone__icon {
  color: var(--color-primary);
}
.dropzone.is-filled {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-bg);
}
.dropzone.is-filled .dropzone__icon {
  color: var(--color-success);
}
.dropzone.is-filled:hover {
  background: var(--color-success-bg);
}

.pricesearch-gaeb__loader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pricesearch-gaeb.is-loading .pricesearch-gaeb__submit-icon {
  animation: aspm-spin 1s linear infinite;
}

/* ── GAEB-Result-Liste ───────────────────────────────────────────────────
   Eine geordnete Liste — pro Eintrag: GAEB-Position + nested Match-Liste. */
.gaeb-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gaeb-result-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.gaeb-result-item:last-child { border-bottom: none; }
.gaeb-result-item__head {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: var(--space-3);
  align-items: start;
}
.gaeb-result-item__pos {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.gaeb-result-item__summary {
  font-weight: 600;
  margin-bottom: 2px;
}
.gaeb-result-item__desc {
  line-height: 1.4;
}
.gaeb-result-item__qty {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gaeb-result-item__empty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: 84px;       /* fluchtet mit gaeb-result-item__body */
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.gaeb-result-matches {
  list-style: none;
  margin: 0 0 0 84px;       /* eingerückt unter der GAEB-Beschreibung */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.gaeb-result-match {
  display: grid;
  grid-template-columns: 28px 24px minmax(140px, 1.5fr) minmax(110px, auto) 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.gaeb-result-match:hover {
  background: var(--color-gray-100);
}
.gaeb-result-match__rank {
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.gaeb-result-match__partner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gaeb-result-match__price {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.gaeb-result-match__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gaeb-result-match__action {
  justify-self: end;
}

/* Auf kleinen Viewports stacked statt Grid */
@media (max-width: 720px) {
  .gaeb-result-item__head {
    grid-template-columns: 1fr;
  }
  .gaeb-result-matches,
  .gaeb-result-item__empty { margin-left: 0; }
  .gaeb-result-match {
    grid-template-columns: 28px 24px 1fr auto;
  }
  .gaeb-result-match__meta { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════
   Benutzerverwaltung v2
═══════════════════════════════════════════════ */

/* User-Detail Block im Edit-Form (read-only Felder oben) */
.user-detail {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Form-Checkbox-Row (Label mit Checkbox + Erklärung daneben) */
.form-checkbox-row {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}
.form-checkbox-row .form-checkbox { margin-top: 3px; flex-shrink: 0; }

.form-actions__spacer { flex: 1; }

/* User-Invite-Link Banner (wenn kein Mail-Service aktiv ist) */
.user-invite-link {
  margin: var(--space-3) var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.user-invite-link > div { flex: 1; }
.user-invite-link input.form-input {
  margin-top: var(--space-2);
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-xs);
}

/* Company-Chips in der Enterprise-Sicht */
.company-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.company-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.company-chip--admin { background: var(--color-blue-100); color: var(--color-blue-700); font-weight: 600; }
.company-chip__role {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--color-surface);
}
.company-chip--admin .company-chip__role { color: var(--color-blue-700); }

/* ── Tab-Nav für Entity-Edit-Seiten (Enterprise, Company, …) ──────── */
.entity-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.entity-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: color .12s ease, border-color .12s ease;
}
.entity-tab:hover { color: var(--color-text); }
.entity-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.entity-tab .material-symbols-outlined { font-size: 18px; }

/* ── User-Liste-Zeile (Avatar + Name+E-Mail) ───────────────────────── */
.user-list-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.user-list-row__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-xs);
  overflow: hidden;
}
.user-list-row__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── Detail-Grid (Definition-Liste) ────────────────────────────────── */
.user-detail-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: .55rem 1rem;
  margin: 0;
}
.user-detail-grid dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.user-detail-grid dd {
  margin: 0;
}

/* ── Company-Zuweisungs-Liste (Checkboxen mit Hauptaccount-Pin) ───── */
.company-assign-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.company-assign-list__item {
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.company-assign-list__item.is-main {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  border-color: #bbf7d0;
}
.company-assign-list__label {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.company-assign-list__item.is-main .company-assign-list__label { cursor: default; }
.company-assign-list__label input[type="checkbox"]:disabled { opacity: .7; cursor: not-allowed; }
.company-assign-list__name {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* ── „Company hinzufügen"-Toggle in der Enterprise-Benutzer-Tabelle ─── */
.company-assign-toggle {
  margin-top: var(--space-2);
}
.company-assign-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  list-style: none;            /* default-triangle weg */
  user-select: none;
}
.company-assign-toggle__btn::-webkit-details-marker { display: none; }
.company-assign-toggle__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(99, 102, 241, .05);
}
.company-assign-toggle[open] .company-assign-toggle__btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.company-assign-toggle__btn .material-symbols-outlined { font-size: 14px; }
.company-assign-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-alt, #fafbfc);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.company-assign-form .form-select { min-width: 140px; max-width: 240px; }
.company-assign-form__check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Toggle-Badge (klickbarer Badge für Enterprise-Admin-Toggle) */
.badge--toggle {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  color: var(--color-text-secondary);
}
.badge--toggle:hover { background: var(--color-gray-100); }

/* ── Auth-Layout (Public-Flows: Einladung / Reset / Token-Invalid) ─────── */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg);
  padding: var(--space-5);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.auth-brand__icon { font-size: var(--font-size-3xl); color: var(--color-primary); }
.auth-brand h1 { font-size: var(--font-size-xl); font-weight: 700; margin: 0; }
.auth-brand span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.auth-greeting { margin-bottom: var(--space-4); color: var(--color-text-secondary); }
.auth-greeting code { font-family: ui-monospace, monospace; background: var(--color-surface-alt); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.auth-submit { width: 100%; justify-content: center; margin-top: var(--space-3); }
.auth-footer {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
}
.auth-footer a { color: var(--color-text-muted); }

.d-inline { display: inline; }

.login-forgot {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
}
.login-forgot a { color: var(--color-text-muted); }
.login-forgot a:hover { color: var(--color-primary); }

/* ── Live-Email-Check unter dem Eingabefeld ──────────────────────────── */
.email-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.email-check .material-symbols-outlined { font-size: var(--font-size-base); }
.email-check--ok   { color: var(--color-success-text); background: var(--color-success-bg); }
.email-check--info { color: var(--color-info-text);    background: var(--color-info-bg); }
.email-check--err  { color: var(--color-error-text);   background: var(--color-error-bg); }
.email-check--load { color: var(--color-text-muted);   background: var(--color-gray-100); }
.email-check--load .material-symbols-outlined { animation: aspm-spin 1s linear infinite; }

/* Trennlinie zwischen zwei Sections in derselben Karte (z. B. SMTP-Settings + Test-Mail). */
.section-divider {
  border-top: 1px solid var(--color-border);
}
/* Form-Action-Container an Form-Bottom geklebt (gleiche Höhe wie Inputs in derselben Row). */
.d-flex-end {
  display: flex;
  align-items: flex-end;
}

/* ── Permissions-Matrix (Member-Bereichszugriff) ─────────────────────── */
.permissions-matrix {
  margin-top: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.permissions-matrix .section-heading {
  margin-top: 0;
}
.permissions-matrix__quick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.permissions-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.permissions-table th,
.permissions-table td {
  padding: var(--space-2-5) var(--space-3);
}
.permissions-table__levels { width: 60%; }

.permissions-row__label {
  font-weight: 600;
  white-space: nowrap;
}
.permissions-row--sub .permissions-row__label {
  font-weight: 500;
  color: var(--color-text-secondary);
}
.permissions-row__indent {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
  font-family: ui-monospace, monospace;
}

/* Radio-Group als Pill-Toggle */
.permissions-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 2px;
}
.permissions-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.permissions-radio:hover {
  color: var(--color-text);
}
.permissions-radio input {
  /* Native Radio unsichtbar — Container ist klickbar */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.permissions-radio:has(input:checked) {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
/* Spezial-Highlight für „approve" und „delete" */
.permissions-radio:has(input[value="approve"]:checked) { color: var(--color-success-text); }
.permissions-radio:has(input[value="delete"]:checked)  { color: var(--color-error-text); }
.permissions-radio:has(input[value="none"]:checked)    { color: var(--color-text-muted); }

/* Sidebar-Trennlinie zwischen Nav-Gruppen — sehr dezent (~5% Schwarz auf weiß). */
.nav-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
  margin: var(--space-2) var(--space-4);
  height: 0;
}
/* Trenner INNERHALB eines Untermenüs (nav-sub): enger + an den Sub-Items ausgerichtet. */
.nav-divider--sub { margin: var(--space-1) var(--space-3); }

/* ═══════════════════════════════════════════════
   Release-View v2 — Gruppen-basierte Auswahl
═══════════════════════════════════════════════ */
.release-info {
  background: var(--color-info-bg);
  border-bottom: 1px solid var(--color-border);
}
.release-info p { margin: 0; }

/* ── Release-View (Phase C): Shortlist-Tabelle pro Gruppe ──────────────── */
.release-shortlist-table th,
.release-shortlist-table td { vertical-align: middle; }
.release-shortlist-table__col-num {
  width: 170px;
  min-width: 170px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.release-shortlist-table__col-pct {
  width: 110px;
  min-width: 110px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.release-shortlist__savings {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.release-shortlist__savings.is-down { background: var(--color-success-bg); color: #166534; }
.release-shortlist__savings.is-up   { background: #fee2e2; color: #991b1b; }
.release-shortlist-row { cursor: pointer; transition: background var(--transition); }
.release-shortlist-row:hover { background: var(--color-surface-alt); }
.release-shortlist-row.is-cheap { background: color-mix(in srgb, var(--color-success) 7%, transparent); }
.release-shortlist-row.is-cheap:hover { background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.release-shortlist-row.is-incomplete { opacity: 0.7; cursor: not-allowed; }
.release-shortlist-row .partner-icon { margin-right: 6px; }
.release-radio input[type="radio"] { width: 20px; height: 20px; cursor: pointer; }
.release-group__reason {
  padding: 12px var(--space-5);
  border-top: 1px solid var(--color-border);
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* „Keine Firma / Nicht mehr benötigt"-Option in der Auswahl (Skip + Begründung). */
.release-skip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-5);
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition);
}
.release-skip:hover { background: var(--color-surface-alt); }
.release-skip input[type="radio"] { width: 20px; height: 20px; cursor: pointer; flex: none; }
.release-skip .material-symbols-outlined { color: var(--color-text-muted); }
.release-skip:has(input:checked) {
  background: color-mix(in srgb, var(--color-warning) 9%, transparent);
  color: var(--color-text);
}
.release-skip__label { font-weight: 500; }

/* ══ Vorauswahl-Sicht (Nachverhandlungs-Phase A) ════════════════════════
 * Pro Gruppe eine Liste mit Partner-Checkboxen, max. 3 wählbar.
 */
.shortlist-group { margin-top: var(--space-5); }

/* Auto-Suggest-Block: Toleranz-Select + „Vorschlag setzen"-Button im Header. */
.shortlist-suggest {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.shortlist-suggest__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.shortlist-suggest__select {
  width: auto;
  min-width: 90px;
}
.shortlist-counter {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  background: var(--color-gray-100);
  padding: 4px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.shortlist-partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shortlist-partner {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.shortlist-partner:last-child { border-bottom: 0; }
.shortlist-partner:hover { background: var(--color-surface-alt); }
.shortlist-partner.is-picked {
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
}
.shortlist-partner__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-5);
  cursor: pointer;
  user-select: none;
}
.shortlist-partner__checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}
.shortlist-partner__checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
.shortlist-partner__checkbox:disabled ~ * { opacity: 0.5; }
.shortlist-partner__name {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-text);
}

/* Chevron-Button DIREKT rechts vom Partner-Namen — kleiner Abstand,
   nicht am rechten Zeilenende. Der Rest (Badge/Preis) wird via
   margin-left:auto am Toggle nach rechts gedrückt.
   Klick darf die umliegende Label-Checkbox NICHT triggern (siehe JS). */
.shortlist-partner__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -2px;
  margin-right: auto;          /* schiebt Badge + Preis ans Zeilenende */
  border: 1px solid transparent;
  background: transparent;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.shortlist-partner__toggle:hover {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.shortlist-partner__toggle .material-symbols-outlined { font-size: var(--font-size-xl); }
.shortlist-partner.is-expanded .shortlist-partner__toggle .material-symbols-outlined {
  transform: rotate(180deg);
}

/* Detail-Tabelle pro Partner — eingerückt unter der Partner-Zeile. */
.shortlist-partner__details {
  background: #fbfbfd;
  padding: var(--space-2) var(--space-5) var(--space-4);
  border-top: 1px dashed var(--color-border);
}

/* Streifen unter dem Partner-Label mit den letzten Nachverhandlungs-Daten:
   wer + wann + Vorher → Nachher + Differenz. Immer sichtbar (nicht im
   Details-Toggle), damit auf einen Blick erkennbar ist, ob/wer verhandelt
   hat. */
.shortlist-partner__nego {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 6px var(--space-5);
  background: #fafafa;
  border-top: 1px dashed var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.shortlist-partner__nego > .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.shortlist-partner__nego-label { flex: 1 1 auto; min-width: 0; }
.shortlist-partner__nego-label strong { color: var(--color-text); font-weight: 600; }
.shortlist-partner__nego-prices {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.shortlist-partner__nego-arrow { font-size: 16px !important; color: var(--color-text-muted); }
.shortlist-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}
.shortlist-detail-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}
.shortlist-detail-table tbody td {
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.shortlist-detail-table tbody tr:last-child td { border-bottom: 0; }


/* Footer-Zeile in der Detail-Tabelle: Rabatt + Lieferkosten als Chips. */
.shortlist-detail-foot td {
  background: #fafafa;
  border-top: 1px solid var(--color-border);
  padding: 8px var(--space-3) !important;
}
.shortlist-detail-foot__label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--font-size-xs);
  margin-right: var(--space-3);
}
.shortlist-detail-foot__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-sm);
}
.shortlist-detail-foot__chip .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text-muted);
}
/* Skonto-Variante: dezent grau (NICHT eingerechnet → nicht hervorheben).
   Der „günstigster Skonto"-Indikator ist die grüne Pille am Partner-Total. */
.shortlist-detail-foot__chip--skonto {
  background: #fafafa;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  border-style: dashed;
}
.shortlist-detail-foot__chip--skonto .material-symbols-outlined {
  color: var(--color-text-muted);
}
.shortlist-detail-foot__chip-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  font-style: italic;
  margin-left: 2px;
}
/* Eigene Badge-Spalte VOR dem Preis. Fixe Breite → über alle Zeilen bündig. */
.shortlist-partner__badge {
  flex: 0 0 auto;
  width: 180px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
}

/* Diff-Slot zwischen Badge und Preis: Mehr-/Minderkosten ggü. günstigstem
   Partner-Angebot. Feste Breite, damit Total-Spalten bündig bleiben. */
.shortlist-partner__diff {
  flex: 0 0 auto;
  width: 150px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  font-size: var(--font-size-sm);
}

/* Action-Bar mit 3 Buttons auf der Freigabe-Seite. */
.release-action-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Step-Back-Modale: Begründung für „Neu nachverhandeln" / „Auswahl
   korrigieren". Backdrop + zentrierte Panel-Karte. */
.stepback-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.stepback-modal[hidden] { display: none; }
.stepback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.stepback-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Vergleichs-Popup: breiter (kann viele Partner-Spalten enthalten) und
   die Body-Höhe ist scrollbar bei sehr vielen Positionen. */
.compare-modal__panel { max-width: 1100px; }
.compare-modal__body  { max-height: 70vh; overflow: auto; padding: 12px 20px; }
.compare-table th, .compare-table td { padding: 6px 10px; }
.compare-cell--cheap     { background: #dcfce7; color: #14532d; font-weight: 600; border-radius: 4px; }
.compare-cell--expensive { background: #fed7aa; color: #7c2d12; font-weight: 600; border-radius: 4px; }
.negotiation-master__col-compare { width: 130px; }
.negotiation-master__col-compare .btn { white-space: nowrap; }

/* Partner-Spaltenköpfe in der Vergleichs-Tabelle: Name vertikal gestellt
   spart horizontalen Platz drastisch, sodass viele Partner-Spalten
   nebeneinander passen ohne dass der Modal-Inhalt scrollen muss. */
.compare-th {
  vertical-align: bottom;
  text-align: center;
  width: 56px;
  min-width: 56px;
}
.compare-th--owner {
  width: 56px;
  min-width: 56px;
}
.compare-th__name {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);   /* von unten nach oben lesbar */
  font-size: var(--font-size-sm);
  font-family: ui-monospace, monospace;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 0;
  min-height: 110px;
  line-height: 1.1;
  text-align: center;
}

/* Zebra-Streifen über die Partner-Spalten (ab Spalte 3 = erste Partner-
   Spalte). Markierte Zellen (cheap/expensive) und Gruppen-Header bleiben
   unberührt — :not() schließt sie explizit aus. */
.compare-table th:nth-child(n+3):nth-child(odd),
.compare-table td:nth-child(n+3):nth-child(odd):not(.compare-cell--cheap):not(.compare-cell--expensive) {
  background: var(--color-gray-100);
}
.compare-row--group-head > td { background: #eef2ff !important; }

/* Pro Zelle zwei Preise: Original oben, Verhandelt unten.
   Beide Werte in Standard-Textfarbe (schwarz) — Original wird nur via
   Strikethrough klar als „vor Verhandlung" markiert. */
.compare-price-row {
  font-size: var(--font-size-sm);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-text);
}
.compare-price-row--orig {
  font-size: var(--font-size-xs);
}
.compare-price-row--orig.compare-price-row--strike {
  text-decoration: line-through;
}
.compare-price-row--neg {
  font-weight: 700;
}

/* „kein Rabatt vergeben" — Platzhalter-Strich in der unteren Zelle.
   Dezent in Muted-Farbe, damit das Auge nicht auf einer nicht-Zahl hängen bleibt. */
.compare-price-row--no-rebate {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.25;
}


/* Quick-Filter über der Vergleichs-Tabelle: Segmented Control mit drei
   Optionen. Aktiver Button visuell hervorgehoben. */
.compare-filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
  flex-wrap: wrap;
}
.compare-filter__group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.compare-filter__btn {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-right: 1px solid var(--color-border);
}
.compare-filter__btn:last-child { border-right: 0; }
.compare-filter__btn .material-symbols-outlined { font-size: var(--font-size-lg); }
.compare-filter__btn:hover { background: var(--color-gray-100); }
.compare-filter__btn.is-active {
  background: var(--color-primary, #6366f1);
  color: #fff;
}
.compare-filter__btn.is-active:hover { background: var(--color-primary, #6366f1); }
.compare-filter__btn--cheap.is-active { background: var(--color-success); }
.compare-filter__btn--expensive.is-active { background: var(--color-error); }
.compare-filter__hint { flex: 1; min-width: 200px; }

/* Sprung-Button in der letzten Spalte der Vergleichs-Tabelle:
   navigiert zur passenden public-item-Zeile im Eingabe-Formular.
   Markiert das Ziel kurz mit einer Outline-Animation. */
.compare-jump-cell { width: 60px; text-align: center; vertical-align: middle; }
.compare-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-primary, #6366f1);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.compare-jump-btn:hover {
  background: rgba(99, 102, 241, .12);
  transform: scale(1.05);
}
.compare-jump-btn .material-symbols-outlined { font-size: var(--icon-size); }
@keyframes compare-jump-flash {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, .55); }
  50%  { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.compare-jump-target {
  animation: compare-jump-flash 1.2s ease-out 2;
  scroll-margin-top: 80px;
}

/* Gruppen-Trenn-Zeile in der Vergleichs-Tabelle: eine breite Zeile als
   visueller Cluster-Header für alle Items derselben Gruppe / Scope. */
.compare-row--group-head > td {
  background: #eef2ff;
  color: var(--color-primary, #6366f1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--font-size-xs);
  border-top: 2px solid var(--color-primary, #6366f1);
  padding: 8px 10px;
}
.stepback-modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.stepback-modal__head > .material-symbols-outlined { color: var(--color-primary); }
.stepback-modal__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
}
.stepback-modal__close:hover { background: var(--color-gray-100); color: var(--color-text); }
.stepback-modal__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stepback-modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  background: #fafafa;
}
.shortlist-partner__total {
  flex: 0 0 auto;
  /* Breite ist hochgesetzt, weil eine zweite Skonto-Zeile drunter passen muss. */
  width: 220px;
  min-width: 220px;
  /* Mehr Luft zur Einzelpreis-/Diff-/Badge-Spalte links davon */
  margin-left: var(--space-4);
  text-align: right;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  /* Vertikaler Abstand zwischen Brutto und Skonto-Zeile */
  gap: 6px;
  line-height: 1.25;
}

/* Skonto-Zeile unter dem Brutto-Total: standardmäßig dezent grau, mit Wallet-Icon.
   Grün wird sie NUR, wenn dieser Partner das günstigste Skonto-Angebot
   im Vergleich aller vollständigen Angebote stellt (`.is-cheapest-skonto`).
   Konsistentes Padding (border-transparent) auf BEIDEN Varianten, damit der
   Zeilen-Sprung beim Wechsel grau↔grün null Pixel-Versatz erzeugt. */
.shortlist-partner__skonto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.shortlist-partner__skonto .material-symbols-outlined { font-size: 14px; }
.shortlist-partner__skonto .text-muted {
  color: var(--color-text-muted);
  font-weight: 400;
}
.shortlist-partner__skonto.is-cheapest-skonto {
  color: var(--color-success, #16a34a);
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.shortlist-partner__skonto.is-cheapest-skonto .material-symbols-outlined {
  color: var(--color-success, #16a34a);
}
.shortlist-partner__skonto.is-cheapest-skonto .text-muted {
  color: #166534;
  font-weight: 500;
}
.shortlist-partner__skonto-star {
  margin-left: 2px;
  color: var(--color-success, #16a34a);
}

/* Einzelpreis-Spalte (nur in Einzelaufgaben sichtbar) — links neben dem
   Gesamtpreis, schmaler und dezenter dargestellt. */
.shortlist-partner__unit {
  flex: 0 0 auto;
  width: 110px;
  min-width: 110px;
  text-align: right;
  color: var(--color-text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-right: var(--space-2);
}
.shortlist-partner--cheap .shortlist-partner__name { color: #166534; }
.shortlist-partner--incomplete { opacity: 0.85; }

/* ══ Nachverhandlung-View (Phase B) ══════════════════════════════════════ */

.negotiation-partner {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
}
.negotiation-partner:first-of-type { border-top: 2px solid var(--color-border-strong); }


.negotiation-partner__delta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}
.negotiation-partner__delta.is-down {
  background: var(--color-success-bg);
  color: #166534;
}
.negotiation-partner__delta.is-up {
  background: #fee2e2;
  color: #991b1b;
}


/* ── Master-Tabelle Nachverhandlung ─────────────────────────────────────
 *    Eine Zeile pro Partner mit eigenen Spalten für Original/Verhandelt/
 *    Differenz. Komplette Zeile ist klickbar (per JS onclick), der Partner-
 *    Name selbst ist zusätzlich als Link erreichbar (Tastatur/Accessibility). */
.negotiation-master tbody tr.negotiation-master__row { cursor: pointer; transition: background var(--transition); }
.negotiation-master tbody tr.negotiation-master__row:hover { background: var(--color-surface-alt); }
.negotiation-master tbody tr.negotiation-master__row.is-done {
  background: color-mix(in srgb, var(--color-success) 5%, transparent);
}
.negotiation-master tbody tr.negotiation-master__row.is-done:hover {
  background: color-mix(in srgb, var(--color-success) 9%, transparent);
}
/* Flex-Layout NICHT direkt auf das <td> setzen — das ändert dessen
   Render-Modus (display: table-cell → flex) und bricht die einheitliche
   Zeilenhöhe der anderen Spalten, was sich als „abgehackte" border-bottom
   bemerkbar macht. Stattdessen flext der Inner-Wrapper. */
.negotiation-master__partner { vertical-align: middle; }
.negotiation-master__partner-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.negotiation-master__partner .partner-icon { flex: 0 0 auto; font-size: var(--font-size-2xl); }
.negotiation-master__name {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.negotiation-master__name:hover { text-decoration: underline; }
/* Breite reserviert für „9.999.999,99 €" (14 Zeichen + Vorzeichen-Präfix bei
 * der Differenz). tabular-nums + nowrap erzwingen feste Ausrichtung ohne
 * Umbruch — auch bei größtmöglichen Beträgen. */
.negotiation-master__col-num {
  width: 170px;
  min-width: 170px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.negotiation-master__col-status { width: 150px; min-width: 150px; }
.negotiation-master__col-by   { width: 160px; min-width: 140px; }
.negotiation-master__col-date { width: 110px; min-width: 100px; white-space: nowrap; }

/* Sortierbare Header in der Master-Tabelle — Button-Reset + Pointer */
.negotiation-master thead th .sort-header {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.negotiation-master__col-chev   { width: 32px;  min-width: 32px;  color: var(--color-text-muted); text-align: right; }

/* Einzelaufgaben-Sektion (ungruppierte Items) — abgesetzt von den Gruppen
 * oben: 20 px Abstand + einheitlicher grauer Hintergrund. Kein Rahmen, kein
 * Außen-Padding — die einzelnen Karten innen sorgen selbst für Struktur. */
.shortlist-ungrouped {
  margin-top: 20px;
  background: var(--color-gray-100);
}
.shortlist-ungrouped > .card { margin-top: var(--space-4); }
.shortlist-ungrouped > .card:first-child { margin-top: 0; }

.release-group {
  margin-top: var(--space-5);
}


.release-group__reason {
  padding: var(--space-3) var(--space-5);
  background: var(--color-warning-bg);
  border-top: 1px solid var(--color-warning);
}
.release-group__reason .form-label {
  display: flex; align-items: center; gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Ungruppierte Items */


/* ═══════════════════════════════════════════════
   Public Inquiry v2 — Gruppensumme + Rabatt
═══════════════════════════════════════════════ */


.public-items-table .item-desc-summary{
  font-size: var(--font-size-base);
  font-weight: 600;
}
/* Beschreibungstext in der öffentlichen Positions-Tabelle einheitlich in
   Basisgröße (14 px) rendern — die kompaktere Preissuche-Regel bleibt unberührt. */
.public-items-table .item-desc-body{
  font-size: var(--font-size-base);
}
.public-items-table td{ font-size: var(--font-size-base); }


/* ── Gruppen-Footer mit Rabatt + Endpreis ────────────────────── */
.public-group__footer {
  padding: var(--space-4);
  background: var(--color-surface-alt);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) {
  .public-group__footer { grid-template-columns: 1fr; }
}

.public-discount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.public-discount__label {
  width: 100%;
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.public-discount__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  user-select: none;
}
.public-discount__opt input { accent-color: var(--color-primary); }
.public-discount__opt:has(input:checked) {
  color: var(--color-primary);
  font-weight: 600;
}
.public-discount__opt--custom {
  gap: var(--space-2);
}
.public-discount__custom {
  width: 80px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Gruppen-Summe (Endpreis-Block, rechts) */
.public-group-total {
  min-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.public-group-total__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  /* Schriftgröße wie der Positions-Beschreibungstext (gilt für Material/Leistung,
     Rabatt, Lieferkosten; die Netto-Zeile überschreibt unten auf größer). */
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}
.public-group-total__row--discount { color: var(--color-warning-text); }
.public-group-total__row--net {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-md);
  color: var(--color-text);
}
.public-group-total__row--net strong:last-child { font-size: var(--font-size-xl); color: var(--color-primary); }

/* ── Footer-Layout: Controls (Rabatt + Lieferkosten) untereinander ───── */
.public-group__footer-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Lieferkosten-Eingabe ────────────────────────────────────────────── */
.public-delivery {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ── Skonto-Block (gilt fürs gesamte Angebot, nicht pro Gruppe) ────── */
/* Standard-Skonto-Box: dezent neutral (zeigt: leeres Feld, optional).
   Prefilled-Variante (`.public-skonto--prefilled`) ist grün und betont so,
   dass bereits ein Wert hinterlegt ist. */
.public-skonto {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}
.public-skonto--prefilled {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  border-color: #bbf7d0;
}
.public-skonto--prefilled .form-input {
  background: #fff;
  border-color: #86efac;
  font-weight: 600;
}
.public-skonto__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.public-skonto__head .material-symbols-outlined {
  color: var(--color-success, #16a34a);
  font-size: 1.4rem;
}
.public-skonto__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #14532d;
}
.public-skonto__row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.public-skonto__field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 110px;
}
.public-skonto__field .form-input { max-width: 140px; }
.public-skonto__field--days .form-input { max-width: 110px; }
.public-skonto__sep {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-bottom: .55rem;
}
.public-skonto__preview {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px dashed #86efac;
  border-radius: 8px;
  font-size: var(--font-size-base);
  color: #166534;
}
.public-skonto__preview .material-symbols-outlined {
  color: var(--color-success);
  font-size: 1.1rem;
}

/* ── Konditionen-Tabelle (Rabatt + Lieferkosten in einer Tabelle) ───── */
.public-conditions-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0;
}
.public-conditions-table__row > th,
.public-conditions-table__row > td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
}
.public-conditions-table__row:last-child > th,
.public-conditions-table__row:last-child > td { border-bottom: 0; }
.public-conditions-table__label {
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  white-space: nowrap;
  width: 180px;
  vertical-align: middle;
}
.public-conditions-table__label .material-symbols-outlined {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 4px;
  color: var(--color-cyan-500);
}
.public-conditions-table__value { width: auto; }
.public-conditions-table__hint {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-left: 8px;
}
/* Optionen-Reihe für die Rabatt-Radios, damit sie sauber umbrechen */
.public-discount__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Lieferkosten-Input + Euro-Zeichen + Hint nebeneinander */
.public-delivery-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.public-delivery-input-wrap .public-delivery__input {
  max-width: 160px;
  flex: 0 0 auto;
}

/* ── Bestätigungs-Dialog vor Absenden (Public-NU-Sicht) ────────────── */
.confirm-modal {
  position: fixed; inset: 0; z-index: var(--z-popover);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3); /* Duplikat konsolidiert (UI-Audit P4): spätere padding-Regel galt */
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
}
.confirm-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  width: 100%;
  max-width: 100%;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 2-Spalten-Layout: links Zusammenfassung, rechts Eingaben/Signatur/AGB */
.confirm-modal__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: auto;
  flex: 1;
}
.confirm-modal__col {
  padding: 20px 24px;
  overflow: auto;
}
.confirm-modal__col--summary {
  border-right: 1px solid var(--color-border);
  background: #fafbfc;
}
.confirm-modal__col-title {
  margin: 0 0 12px 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
}
.confirm-modal__col-title .material-symbols-outlined {
  color: var(--color-primary, #6366f1);
  font-size: 22px;
}
.confirm-modal__sender-grid--2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1100px) {
  .confirm-modal__split { grid-template-columns: 1fr; }
  .confirm-modal__col--summary { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .confirm-modal__sender-grid--2 { grid-template-columns: 1fr; }
}
.confirm-modal__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.confirm-modal__head .material-symbols-outlined { color: var(--color-primary, #6366f1); }
.confirm-modal__close {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; padding: 4px;
  border-radius: 50%; color: var(--color-text-muted);
}
.confirm-modal__close:hover { background: var(--color-gray-100); color: var(--color-text); }

.confirm-modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: var(--space-3);
  background: #fafafa;
}

/* Summary innen */
.cs-group { margin-bottom: 1.25rem; }
.cs-group__head {
  margin: 0 0 .5rem 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}
.cs-table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.cs-table th, .cs-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--font-size-sm);
  vertical-align: top;
}
.cs-table thead th {
  background: #fafafa;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.cs-table .cs-pos   { width: 70px; font-family: ui-monospace, monospace; }
.cs-table .cs-qty   { width: 110px; font-variant-numeric: tabular-nums; }
.cs-table .cs-price { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-table .cs-total { width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }


.cs-table .cs-empty { color: var(--color-error, #dc2626); font-style: italic; }
.cs-table .cs-pos > div { line-height: 1.4; }


.cs-totals {
  width: 100%;
  border-collapse: collapse;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.cs-totals td {
  padding: 4px 10px;
  font-size: var(--font-size-base);
}
.cs-totals .cs-total { text-align: right; font-variant-numeric: tabular-nums; }
.cs-totals .cs-discount td { color: #b45309; }
.cs-totals .cs-delivery td { color: var(--color-cyan-500); }
.cs-totals .cs-net td { border-top: 1px solid var(--color-border); }
.cs-grand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  border-radius: 8px;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

/* ── Skonto-Block in der Confirm-Summary ─────────────────────────────── */
.cs-skonto {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}
.cs-skonto__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 8px;
  color: #14532d;
  font-size: var(--font-size-base);
}
.cs-skonto__head .material-symbols-outlined {
  color: var(--color-success, #16a34a);
  font-size: 1.2rem;
}
.cs-skonto .cs-totals td { font-size: var(--font-size-sm); }
.cs-skonto .cs-net td {
  color: #166534;
  font-size: var(--font-size-base);
  padding-top: 6px;
}

/* Absender-Block im Bestätigungs-Modal: Pflicht-Name + optionale E-Mail. */
.confirm-modal__sender {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}
.confirm-modal__sender-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.confirm-modal__sender-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.confirm-modal__sender-field label { margin: 0; }
.confirm-modal__sender-field input.form-input { width: 100%; }
/* Volle Breite (z. B. Kommentar-Zeile unterhalb der 3-Spalten-Reihe). */

/* Felder in der rechten Spalte vertikal stacken mit eigener Distanz */
.confirm-modal__col--input > .confirm-modal__sender-field,
.confirm-modal__col--input > .confirm-modal__sender-grid {
  margin-bottom: 14px;
}
.confirm-modal__col--input > .confirm-modal__sender-field:last-child {
  margin-bottom: 0;
}
.confirm-modal__sender-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 6px;
  font-size: var(--font-size-base);
}
@media (max-width: 700px) {
  .confirm-modal__sender-grid { grid-template-columns: 1fr; }
}

/* ── Signatur-Canvas im Bestätigungs-Modal ─────────────────────────── */
.confirm-sig-wrap {
  position: relative;
  margin-top: 4px;
}
.confirm-sig-canvas {
  width: 100%;
  height: 140px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: crosshair;
  display: block;
  touch-action: none;
}
.confirm-sig-canvas.is-signed {
  border-style: solid;
  border-color: var(--color-success);
  background: #f0fdf4;
}
.confirm-sig-canvas.is-dragover {
  border-style: solid;
  border-color: var(--color-accent-blue);
  background: #eff6ff;
}
.confirm-sig-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  color: #94a3b8;
  font-size: var(--font-size-base); /* 13px→Skala */
}
.confirm-sig-hint .material-symbols-outlined { font-size: var(--font-size-2xl); }
.confirm-sig-hint.is-hidden { display: none; }

.confirm-sig-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ── AGB-Checkbox-Zeile ────────────────────────────────────────────── */
.confirm-agb-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--font-size-base);
  line-height: 1.5;
  cursor: pointer;
  padding: 8px 0;
}
.confirm-agb-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.confirm-agb-label a { color: var(--color-accent-blue); text-decoration: underline; }
.confirm-agb-label a:hover { color: #1d4ed8; }
.public-delivery__label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  margin: 0;
}
.public-delivery__label .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-cyan-500);
}
.public-delivery__input {
  max-width: 160px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Lieferkosten-Zeile in der Gruppensumme ──────────────────────────── */
.public-group-total__row--delivery {
  color: var(--color-cyan-500);
}

/* ── Deploy / Release UI ─────────────────────────────────────────────── */


.deploy-preview {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  font-size: var(--font-size-base); /* 13px→Skala */
}
.deploy-preview.is-ok    { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.deploy-preview.is-error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }

.deploy-progress {
  margin-top: 24px;
  padding: 14px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
}
.deploy-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: var(--font-size-base); /* 13px→Skala */
  font-weight: 600;
}
.deploy-progress__bar {
  height: 8px;
  width: 100%;
  background: var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
}
.deploy-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue-500, #3b82f6), var(--color-blue-600, var(--color-accent-blue)));
  transition: width .25s ease;
}

.deploy-log {
  margin-top: 12px;
  max-height: 280px;
  overflow-y: auto;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.deploy-log__line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  word-break: break-all;
}
.deploy-log__line .material-symbols-outlined {
  font-size: 14px;
  flex-shrink: 0;
}
.deploy-log__line.is-ok    { color: #86efac; }
.deploy-log__line.is-warn  { color: #fde68a; }
.deploy-log__line.is-error { color: #fca5a5; }

.deploy-report {
  margin-top: 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.deploy-report__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--font-size-base);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}
.deploy-report__head.is-ok    { background: #ecfdf5; color: #065f46; }
.deploy-report__head.is-error { background: #fef2f2; color: #991b1b; }
.deploy-report__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding: 14px;
}
.deploy-report__grid > div { font-size: var(--font-size-base); /* 13px→Skala */ }
.deploy-report__errors {
  border-top: 1px solid var(--color-gray-200);
  padding: 12px 14px;
  font-size: var(--font-size-base); /* 13px→Skala */
  background: #fff8f8;
}
.deploy-report__errors ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.deploy-report__errors code {
  background: rgba(0,0,0,.06);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════
   SUPPORT-TICKET MODAL
═══════════════════════════════════════════════ */
.support-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(3px);
  animation: support-modal-fade .15s ease-out;
}
.support-modal-backdrop[hidden] { display: none; }

@keyframes support-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.support-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .25);
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: support-modal-slide .2s ease-out;
}
@keyframes support-modal-slide {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.support-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}
.support-modal__header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.support-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.support-modal__body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.support-modal__body .form-group { margin-bottom: 14px; }

.support-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--color-border);
  background: #f9fafb;
}

body.is-modal-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   UI-KONSISTENZ-REFACTOR — Phasen-übergreifende Tokens & Klassen
═══════════════════════════════════════════════════════════════════════ */

/* ── Tabellen-Schrift-Normierung ─────────────────────────────────────── */
/* `.table` hat als Default `font-size: var(--font-size-sm)` — für die Preisanfrage-Phasen
 * zu klein. Mit `.table--lg` werden alle Zellen + Helper-Klassen (text-sm,
 * text-xs) auf 14 px gehoben. Anchor-Größe = `.text-clamp-2`-Größe. */
.table--lg th,
.table--lg td,
.table--lg td.text-sm,
.table--lg td.text-xs,
.table--lg .text-sm,
.table--lg .text-xs {
  font-size: var(--font-size-base);
}

/* ── Party-Farb-Helper ─────────────────────────────────────────────── */
/* Ersetzt Inline-`style="color:var(--color-indigo-500)"`/`#0ea5e9` in den Views. */


.icon-party-sub    .material-symbols-outlined,
.material-symbols-outlined.icon-party-sub    { color: var(--color-party-sub); }
.icon-party-dealer .material-symbols-outlined,
.material-symbols-outlined.icon-party-dealer { color: var(--color-party-dealer); }


/* ── Begründungs-Block (Release/Inspection) ────────────────────────── */
/* Ersetzt 4× inline-Hex-Werte (`#fffbeb`/`#fde68a`/`#92400e`). */
.release-group__reason {
  padding: 8px 16px;
}
.release-group__reason--warning {
  background:   var(--color-reason-bg);
  border-top:   1px solid var(--color-reason-border);
  color:        var(--color-reason-text);
}
.release-group__reason--warning strong { color: var(--color-reason-text); }

/* ── Phase-Banner: Standard-Spacing-Varianten ──────────────────────── */
/* Vorher: 19× `style="margin:.75rem 1.25rem 0;padding:1rem 1.25rem"` auf
 * den Bannern. Diese Klassen setzen das einmal zentral. */
.phase-banner--in-card {
  /* Banner innerhalb einer Card (Card-Header bleibt unberührt) */
  margin: .75rem 1.25rem 0;
}
.phase-banner--in-card-bottom {
  /* Variante mit Bottom-Margin (z. B. shortlist.php) */
  margin: .75rem 1.25rem 1.25rem;
}
.phase-banner--standalone {
  /* Eigenständiges Banner ohne umgebende Card (= "as card") */
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}
.phase-banner--top-spaced {
  /* Banner mit Top-Spacing (z. B. Step-Back-Hinweis unter dem Inhalt) */
  margin-top: 1rem;
  padding: 1rem 1.25rem;
}

/* ── Done-State (Public-Inquiry Submission abgeschickt) ───────────── */
.done-state            { padding: 3rem 1.5rem; text-align: center; }
.done-state__icon      { font-size: 3.5rem !important; color: var(--color-success); }
.done-state__title     { margin: .75rem 0 .5rem; }
.done-state__text      { color: var(--color-text); margin: 0 0 .5rem; }

/* ── „Antwort-Details"-Badge + Info-Modal in der Anfrage-Übersicht ── */
.inquiry-answered {
  white-space: nowrap;
}
.inquiry-answered__info {
  margin-left: 4px;
  color: var(--color-text-muted);
}
.inquiry-answered__info:hover { color: var(--color-primary, var(--color-accent-blue)); }

.inquiry-info-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.inquiry-info-modal[hidden] { display: none; }
.inquiry-info-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
}
.inquiry-info-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.inquiry-info-modal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}
.inquiry-info-modal__head h3 { margin: 0; flex: 1; }
.inquiry-info-modal__head .material-symbols-outlined { color: var(--color-primary, #6366f1); }
.inquiry-info-modal__body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.inquiry-info-modal__grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 8px;
  column-gap: 16px;
  margin: 0 0 18px;
  font-size: var(--font-size-base);
}
.inquiry-info-modal__grid dt {
  color: var(--color-text-muted);
  font-weight: 600;
}
.inquiry-info-modal__grid dd {
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
}
.inquiry-info-modal__sig-label {
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.inquiry-info-modal__files { margin-top: 12px; }
.inquiry-info-modal__files-label { font-weight: 600; font-size: var(--font-size-base); margin-bottom: 6px; }
.inquiry-info-modal__sig-wrap {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  text-align: center;
}
.inquiry-info-modal__sig-wrap img {
  max-width: 100%;
  max-height: 200px;
}
.inquiry-info-modal__sig-empty {
  color: var(--color-text-muted);
  font-style: italic;
  padding: 12px;
  text-align: center;
  background: #f9fafb;
  border-radius: 8px;
}
.inquiry-info-modal__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end;
  background: #fafafa;
}
@media (max-width: 600px) {
  .inquiry-info-modal__grid { grid-template-columns: 1fr; }
  .inquiry-info-modal__grid dt { margin-top: 6px; }
}

/* ── Submitter-Info-Box (Staff-/Negotiation-View) ──────────────────── */
/* Wird INNERHALB der „Angebotsanfrage für …"-Card direkt über den
 * Partner-Stats gerendert. Neutraler Grau-Stil (passend zu .partner-stats),
 * damit der Block sich nicht zu prominent abhebt. */
.submitter-info {
  background: var(--color-surface-alt, #fafbfc);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.submitter-info__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text);
  font-size: var(--font-size-base);
}
.submitter-info__head .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-primary, #6366f1);
}
.submitter-info__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 14px 16px;
  align-items: start;
}
.submitter-info__grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 6px;
  column-gap: 12px;
  margin: 0;
  font-size: var(--font-size-base);
}
.submitter-info__grid dt {
  color: var(--color-text-muted);
  font-weight: 600;
}
.submitter-info__grid dd {
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}
.submitter-info__comment { white-space: pre-wrap; }
.submitter-info__sig {
  text-align: center;
  min-width: 200px;
}
.submitter-info__sig-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.submitter-info__sig img {
  max-width: 220px;
  max-height: 120px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}
@media (max-width: 900px) {
  .submitter-info__body { grid-template-columns: 1fr; }
  .submitter-info__sig  { text-align: left; }
}

/* ── Enterprise-Stammdaten-Form (Admin) ───────────────────────────── */
/* Vertical-Stack: Logo-Card, Stammdaten-Form, API-Keys-Card — alle über
 * die volle Container-Breite. Logo-Card hat im Inneren ein eigenes
 * 2-Spalten-Layout (Preview links, Aktionen rechts), damit die quadratische
 * Preview nicht über die ganze Seite zieht. */
.enterprise-form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.enterprise-logo-card__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.25rem;
  align-items: center;
}
@media (max-width: 700px) {
  .enterprise-logo-card__body { grid-template-columns: 1fr; }
}
.enterprise-logo-preview {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt, #fafbfc);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.enterprise-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.enterprise-logo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}
.enterprise-logo-empty .material-symbols-outlined {
  font-size: 48px;
}
.enterprise-logo-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}
.enterprise-logo-actions__upload {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

/* ── Profil-Seite (eigene Benutzerverwaltung) ──────────────────────
 * Wiederverwendung der Enterprise-Logo-Pattern für das User-Avatar.
 * Visuell identisches Layout: kreisförmige Preview + Action-Buttons rechts. */
.profile-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 880px;
}
.profile-avatar-card__body {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.25rem;
  align-items: center;
}
@media (max-width: 700px) {
  .profile-avatar-card__body { grid-template-columns: 1fr; }
}
.profile-avatar-preview {
  width: 160px;
  height: 160px;
  border-radius: 50%;          /* rund — passt zur Sidebar-Anzeige */
  background: var(--color-surface-alt, #fafbfc);
  border: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-indigo-500) 0%, #0ea5e9 100%);
  color: #fff;
}
.profile-avatar-empty__initials {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}
.profile-avatar-actions__upload {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

/* ── Crop-Modal (Profilbild-Zuschnitt mit Cropper.js) ──────────────── */
.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crop-modal[hidden] { display: none; }
.crop-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}
.crop-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: min(720px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.crop-modal__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.crop-modal__head .material-symbols-outlined { color: var(--color-primary); }
.crop-modal__body {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow: auto;
}
@media (max-width: 700px) {
  .crop-modal__body { grid-template-columns: 1fr; }
}
.crop-stage {
  width: 100%;
  height: 420px;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crop-stage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
/* Cropper.js overrides — runde Crop-Box NUR beim Avatar-Zuschnitt (.crop-stage,
   Profil); andere Cropper (z. B. Dokumenten-Mappe) bleiben rechteckig. */
.crop-stage .cropper-view-box,
.crop-stage .cropper-face {
  border-radius: 50%;
}
.cropper-view-box {
  outline: 1px solid #fff;
  outline-color: rgba(255, 255, 255, .9);
}
.crop-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.crop-preview {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt, #fafbfc);
}
.crop-modal__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt, #fafbfc);
}

/* Form-Section-Styles werden in beiden Cards verwendet (Stammdaten +
 * API-Keys) — der Selector greift in beiden Scopes. */
.enterprise-form .form-section,
.enterprise-api-card .form-section {
  border: 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding: 1rem 0 0;
  margin: 0 0 1rem;
  min-width: 0;       /* Browser-Fieldset-Default verhindert sonst Shrinking in Flex/Grid */
}
.enterprise-form .form-section:first-of-type,
.enterprise-api-card .form-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.enterprise-form .form-section__legend,
.enterprise-api-card .form-section__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: .75rem;
  width: 100%;
}
.enterprise-form .form-section__legend .material-symbols-outlined,
.enterprise-api-card .form-section__legend .material-symbols-outlined {
  color: var(--color-primary, #6366f1);
  font-size: 20px;
}
.enterprise-form .form-row,
.enterprise-api-card .form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: .75rem;
}
.enterprise-form .form-row .form-group,
.enterprise-api-card .form-row .form-group { flex: 1; margin: 0; }
@media (max-width: 700px) {
  .enterprise-form .form-row,
  .enterprise-api-card .form-row { flex-direction: column; gap: .75rem; }
}
.enterprise-form .form-hint,
.enterprise-api-card .form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: 4px;
}

/* API-Keys-Card — pro Feld eigene Zeile, kompaktere Form-Group-Abstände,
 * damit die Sektion nicht ewig lang wird. */
.enterprise-api-card .form-group { margin-bottom: .75rem; }
.enterprise-api-card .form-group:last-child { margin-bottom: 0; }

/* Inline-„Wert löschen"-Checkbox unter Password-Feldern: nicht als
 * Mini-Hint formatieren — Checkbox soll klickbar wirken. */
.enterprise-api-card .api-clear-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}
.enterprise-api-card .api-clear-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* Inline-Status-Markierung im Label („gespeichert" / „global wird genutzt") */
.enterprise-api-card .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Settings → Darstellung ────────────────────────────────────────── */
.appearance-section {
  border: 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding: 1rem 0 0;
  margin: 0 0 1rem;
}
.appearance-section:first-of-type { border-top: 0; padding-top: 0; }
.appearance-section__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: .75rem;
}
.appearance-section__legend .material-symbols-outlined {
  color: var(--color-primary, #6366f1);
  font-size: 20px;
}
.appearance-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
/* Tabellen-Form: pro Token eine Zeile mit Input + Live-Beispiel */
.appearance-fontsize-table {
  margin-top: 4px;
}
.appearance-fontsize-table th,
.appearance-fontsize-table td {
  vertical-align: middle;
}
.appearance-fontsize-table code {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.appearance-fontsize__row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.appearance-fontsize__row input[type="number"] {
  width: 90px;
  font-family: ui-monospace, monospace;
  text-align: right;
}
.appearance-fontsize__unit {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.appearance-fontsize__sample {
  /* Sample-Zelle: nicht-umbrechen + max-width, damit größere 3xl-Texte
   * die Tabelle nicht in die Breite ziehen. */
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}
.appearance-color__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.appearance-color__row input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.form-input--mono { font-family: ui-monospace, monospace; }
.appearance-preview {
  background: var(--color-surface-alt, #fafbfc);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.appearance-preview__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.appearance-preview__text {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* ── Hex-Eingabe: rot wenn kein valides #RRGGBB ── */
.appearance-color__row input[type="text"].is-invalid {
  border-color: var(--color-error, #dc2626);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}

/* ── Text-Inspector Toggle-Zeile ── */
.appearance-inspector-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: var(--color-surface-alt, #fafbfc);
}
.appearance-inspector-row kbd {
  display: inline-block;
  padding: 1px 6px;
  font: 600 var(--font-size-2xs)/1.2 ui-monospace, Menlo, monospace;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
  color: var(--color-text-muted, var(--color-text-soft));
}

/* ── Text-Inspector aktiv: Cursor auf Crosshair ── */
body.text-inspector-on,
body.text-inspector-on * { cursor: crosshair !important; }

/* ═══════════════════════════════════════════════════════════════════
   SHARED UI-HELPER (Welle 1 des Token-Refactor)
═══════════════════════════════════════════════════════════════════ */

/* ── Form-Flash-Box (oben in Form-Views: gespeichert / Fehler / Hinweis) ── */
.form-flash {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-size: var(--font-size-base);
  margin-bottom: 1rem;
}
/* display:flex überschreibt sonst das UA-[hidden] → leerer Kasten würde sichtbar bleiben. */
.form-flash[hidden] { display: none; }
.form-flash--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid #bbf7d0;
}
.form-flash--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid #fecaca;
}
.form-flash--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid #bfdbfe;
}
.form-flash--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid #fde68a;
}
.form-flash .material-symbols-outlined { font-size: var(--font-size-xl); }

/* ── Form-Fehler-Text (inline unter Feldern) ─────────────────────── */
.form-error-text {
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

/* ── Empty-Hint-Box (Forms — "noch nichts angelegt") ─────────────── */
.form-empty-box {
  padding: 1rem;
  border: 1px dashed var(--color-border-strong, #d1d5db);
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* ── Status-Chip (Mini-Pill auf Listen-Karten / Tabellenzellen) ── */


/* Backward-Compat-Aliase für `.badge--info/--success/--warning/--error` wurden im
   F-3-Refactor entfernt — alle Views nutzen jetzt durchgängig BEM-Notation
   (`.badge--*`, siehe Z. ~3128). Die einzigen aktiven Definitionen sind dort. */

/* ═══════════════════════════════════════════════════════════════════
   E-MAIL-TEMPLATES – Index-Cards + Edit-Layout
═══════════════════════════════════════════════════════════════════ */

/* ── Index: drei große Karten untereinander ───────────────────────── */
.email-templates-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.email-template-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--color-text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: pointer;
}
.email-template-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(99,102,241,.10);
}
.email-template-card__icon {
  width: 56px; height: 56px;
  flex: 0 0 56px;
  display: flex; align-items: center; justify-content: center;
  background: #eef2ff;
  color: var(--color-primary);
  border-radius: 12px;
}
.email-template-card__icon .material-symbols-outlined { font-size: 28px; }
.email-template-card__body  { flex: 1; min-width: 0; }
.email-template-card__title { margin: 0 0 .25rem; }
.email-template-card__desc  { margin: 0 0 .5rem; }
.email-template-card__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.email-template-card__arrow { color: var(--color-text-muted); }

/* ── Editor-Seite: 2-Spalten-Grid (Editor + Variablen-Picker) ───── */
.email-template-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.email-template-edit__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .email-template-edit__grid { grid-template-columns: 1fr; }
}
.email-template-edit__editor .form-textarea--code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  background: #fafbfc;
}
.email-template-edit__textbody summary {
  cursor: pointer;
  padding: .5rem 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Tab-Switcher: Visuell / HTML-Code ──────────────────────────── */
.tpl-mode-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.tpl-mode-tabs__group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2px;
  background: #fafbfc;
}
.tpl-mode-tab {
  background: transparent;
  border: 0;
  padding: .35rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .12s ease, color .12s ease;
}
.tpl-mode-tab .material-symbols-outlined { font-size: 16px; }
.tpl-mode-tab:hover { color: var(--color-text); }
.tpl-mode-tab.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* ── Quill-Host (Visueller Editor) ──────────────────────────────── */
.tpl-quill-host {
  min-height: 320px;
  background: #fff;
  border-radius: 0 0 6px 6px;
}
.tpl-quill-host .ql-editor {
  min-height: 320px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.55;
}
.ql-toolbar.ql-snow {
  border-radius: 6px 6px 0 0;
  border-color: var(--color-border);
}
.ql-container.ql-snow {
  border-radius: 0 0 6px 6px;
  border-color: var(--color-border);
}
.tpl-quill-host.is-hidden,
.ql-toolbar.is-hidden { display: none !important; }

/* ── Source-Textarea: nur sichtbar im Code-Tab ──────────────────── */
.tpl-source-input { display: none; }
.tpl-source-input.is-active { display: block; }

/* ── Drop-State auch für den Quill-Host ─────────────────────────── */
.tpl-quill-host.is-drop-target { box-shadow: 0 0 0 2px rgba(99, 102, 241, .08); }
.tpl-quill-host.is-drop-hover  {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
  background: #f5f7ff;
}

/* ── Variablen-Picker (rechte Spalte, sticky) ───────────────────── */
.email-template-edit__sidebar .card { position: sticky; top: 1rem; }
.var-group { border-bottom: 1px solid var(--color-border); }
.var-group:last-child { border-bottom: 0; }
.var-group__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-sm);
}
.var-group__head .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 18px;
}
.var-group__head::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 18px;
  transition: transform .15s ease;
}
.var-group[open] > .var-group__head::after { transform: rotate(180deg); }
.var-group__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 0 .5rem .65rem;
}
.var-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: .4rem .55rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: grab;
  text-align: left;
  font-size: var(--font-size-xs);
  transition: all .12s ease;
  user-select: none;
}
.var-pill:hover {
  border-color: var(--color-primary);
  background: #eef2ff;
}
.var-pill:active { cursor: grabbing; }
/* Während des Drags die Quell-Pille leicht ausblenden, damit klar ist,
   dass sie kopiert wird (Original bleibt in der Liste). */
.var-pill.is-dragging {
  opacity: .4;
  outline: 2px dashed var(--color-primary);
  outline-offset: 2px;
}

/* ── Drop-Targets während eines aktiven Drags ────────────────────── */
/* Subject-Input + beide Textareas: leichter, weicher Hint */
.email-template-edit__editor .form-input.is-drop-target,
.email-template-edit__editor .form-textarea.is-drop-target {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .08);
}
/* Beim direkten Hover über dem Target: kräftiger Akzent + Indigo-Bg */
.email-template-edit__editor .form-input.is-drop-hover,
.email-template-edit__editor .form-textarea.is-drop-hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
  background: #f5f7ff;
}
.var-pill code {
  background: transparent;
  color: var(--color-primary);
  font-family: ui-monospace, monospace;
  padding: 0;
  pointer-events: none;  /* damit der Drag definitiv vom Button startet, nicht vom inneren <code> */
}
.var-pill__sample {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  font-style: italic;
  pointer-events: none;
}
.var-pill__sample em { font-style: normal; opacity: .5; }

/* ── Preview-Card (volle Breite unten) ──────────────────────────── */
.email-preview {
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.email-preview__header {
  display: flex;
  gap: .5rem;
  padding: .6rem .85rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
}
.email-preview__frame {
  width: 100%;
  min-height: 540px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.email-preview__text {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .85rem 1rem;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: .5rem 0 0;
  color: var(--color-text);
}

/* ─── DATANORM Stammdaten ──────────────────────────────────────────
   Lieferanten-Detailseite: Stammdaten-Form, Upload-Form, Datei-Liste.
   Drei Cards stehen flach untereinander mit konstantem Abstand. */
.datanorm-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.datanorm-detail > .card { margin-bottom: 0; }

.datanorm-zip-list {
  list-style: none;
  margin: .35rem 0 0;
  padding: .25rem 0 0;
  border-top: 1px dashed var(--color-border);
}
.datanorm-zip-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-muted, var(--color-text-soft));
}
.datanorm-zip-list li code {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-xs);
  background: transparent;
  padding: 0;
  color: inherit;
}
.datanorm-zip-list li.is-datanorm {
  color: var(--color-text);
}
.datanorm-zip-list li.is-datanorm code {
  color: var(--color-success);
  font-weight: 600;
}


/* Activity-Log: Sprung-Link am Ende einer Beschreibung
   ─────────────────────────────────────────────────── */
.activity-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light, rgba(3,112,176,.08));
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.activity-jump-link:hover {
  background: rgba(3,112,176,.18);
  text-decoration: none;
}
.activity-jump-link .material-symbols-outlined {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
 * Confirm-Dialog — ersetzt native confirm() für [data-confirm]
 * ═══════════════════════════════════════════════════════════════════ */
.confirm-dialog__backdrop {
  /* Über jedem anderen Modal liegen, damit auch innerhalb von Modals
     bestätigt werden kann. */
  z-index: 1000;
}
.bl-modal__dialog.confirm-dialog {
  width: min(440px, 100%);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon body"
    ".    actions";
  gap: var(--space-4) var(--space-5);
  animation: confirmDialogPop .12s ease-out;
}
@keyframes confirmDialogPop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.confirm-dialog__icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-error-bg, #fee2e2);
  color: var(--color-error, #dc2626);
}
.confirm-dialog__icon .material-symbols-outlined { font-size: 28px; }
.confirm-dialog__icon--primary { background: rgba(99,102,241,.12); color: var(--color-primary, #6366f1); }
.confirm-dialog__icon--info    { background: rgba(14,165,233,.12); color: #0ea5e9; }
.confirm-dialog__body  { grid-area: body; }
.confirm-dialog__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}
.confirm-dialog__message {
  margin: 0;
  color: var(--color-text-secondary);
  white-space: pre-line;
  line-height: 1.5;
}
.confirm-dialog__actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════
   CSV-Info-Dialog — Format-Dokumentation per Entity
   Nutzt nativen <dialog> + showModal() statt eigenes Modal-System.
   Vorteile: ESC schließt out-of-box, Backdrop-Klick via ::backdrop-Style,
   kein z-index-Stress (top-layer rendering).
═══════════════════════════════════════════════════════════════════ */
.csv-info-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  max-width: 640px;
  width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  /* Native <dialog> centered via UA-styles, aber Safari/iOS brauchen explizit: */
  margin: auto;
}
.csv-info-dialog::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.csv-info-dialog__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}
.csv-info-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.csv-info-dialog__header h2 { margin: 0; }
.csv-info-dialog__close { flex-shrink: 0; }
.csv-info-dialog__section { margin: 0; }
.csv-info-dialog__section h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text);
}
.csv-info-dialog__list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.csv-info-dialog__list li { margin: 0; }
.csv-info-dialog__list code,
.csv-info-dialog__tip code {
  background: var(--color-gray-100, #f3f4f6);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .9em;
  font-family: ui-monospace, monospace;
}

/* Spalten-Tabelle: kompakt, scrollbar wenn lang. */
.csv-info-dialog__cols-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fafafa;
}
.csv-info-dialog__cols {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.csv-info-dialog__cols thead th {
  position: sticky; top: 0;
  background: var(--color-gray-100);
  text-align: left;
  padding: 6px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.csv-info-dialog__cols td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--color-gray-100);
}
.csv-info-dialog__cols tr:last-child td { border-bottom: 0; }
.csv-info-dialog__cols tr.is-required td { background: #fef9c3; }
.csv-info-dialog__cols code {
  background: transparent;
  font-family: ui-monospace, monospace;
}
.csv-info-dialog__idx {
  color: var(--color-text-muted);
  font-family: ui-monospace, monospace;
  text-align: right;
}

.csv-info-dialog__tip {
  margin: 0;
  padding: var(--space-3);
  background: #eff6ff;
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.csv-info-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 480px) {
  .confirm-dialog {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "body" "actions";
    justify-items: start;
  }
  .confirm-dialog__actions { width: 100%; }
}

/* Lösch-Dialog mit 3 Buttons — etwas breiter, Buttons dürfen umbrechen */
.bl-modal__dialog.group-delete-dialog { width: min(560px, 100%); }
.group-delete-dialog__actions { flex-wrap: wrap; }
.group-delete-dialog__actions .btn { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
 * Enterprise-Sharing-Card (V21) — Stammdaten teilen Ja/Nein pro Bereich
 * ═══════════════════════════════════════════════════════════════════ */
.enterprise-sharing-card .card-header h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.sharing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
.sharing-row {
  display: grid;
  grid-template-columns: auto 28px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sharing-row:hover { background: var(--color-bg); }
.sharing-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-primary, #6366f1);
}
.sharing-row__icon { color: var(--color-text-muted); }
.sharing-row__label { font-weight: 500; }
.sharing-row__state {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 9999px;
  background: rgba(99,102,241,.12);
  color: var(--color-primary, #6366f1);
}
.sharing-row:has(input:not(:checked)) .sharing-row__state {
  background: rgba(156,163,175,.18);
  color: var(--color-text-muted);
}
.sharing-row:has(input:not(:checked)) .sharing-row__state::before {
  content: attr(data-state-off);
}
.sharing-row:has(input:checked) .sharing-row__state::before {
  content: attr(data-state-on);
}
.sharing-row:has(input:checked) {
  border-color: rgba(99,102,241,.4);
  background: rgba(99,102,241,.04);
}
/* :has() ist breit unterstützt; ältere Browser sehen den text-Inhalt aus dem PHP. */
.sharing-row:has(input) .sharing-row__state { font-size: 0; }
.sharing-row:has(input) .sharing-row__state::before { font-size: var(--font-size-2xs); }

/* ═══════════════════════════════════════════════════════════════════
 * Provenance-Chip — zeigt creating-Company in Multi-Company-Enterprises
 * ═══════════════════════════════════════════════════════════════════ */
.provenance-chip {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: var(--font-size-2xs);
  font-weight: 500;
  padding: .1rem .45rem;
  border-radius: 9999px;
  background: rgba(14,165,233,.12);
  color: #0369a1;
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provenance-chip .material-symbols-outlined { font-size: 12px; }
.provenance-chip--legacy {
  background: rgba(156,163,175,.18);
  color: var(--color-text-muted);
}

/* Erklärungs-Block oberhalb der Sharing-Toggles */
.enterprise-sharing-explain {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.enterprise-sharing-explain__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: .75rem;
  align-items: start;
}
.enterprise-sharing-explain__row > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .15rem .55rem;
  border-radius: 9999px;
  font-size: var(--font-size-2xs);
  font-weight: 600;
}

/* ── Bearbeitungs-Sperre (Edit-Lock-Banner) ──────────────────────────────
   Wird oben im Content gerendert, wenn jemand ANDERES die Kalkulation
   bearbeitet. .edit-lock ist nur ein JS-Anker (keine eigene Optik). */
.edit-lock__banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  background: var(--color-warning-bg, #fef3c7);
  border: 1px solid var(--color-warning, #d97706);
  border-left-width: 4px;
  border-radius: var(--radius-md, 8px);
}
.edit-lock__icon {
  flex-shrink: 0;
  color: var(--color-warning, #d97706);
  font-size: 22px;
}
.edit-lock__text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.edit-lock__message {
  font-size: var(--font-size-sm);
  color: var(--color-warning-text, #b45309);
}
.edit-lock__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted, #9ca3af);
}
.edit-lock__takeover {
  flex-shrink: 0;
}

/* ── Avatar (Initialen + optionales Bild) ────────────────────────────── */
.lock-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary, #6366f1);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow: hidden;
  text-transform: uppercase;
}
.lock-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: var(--font-size-lg);
}
.lock-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Präsenz-Overlay (unten rechts) ──────────────────────────────────── */
.lock-presence {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: .65rem;
  max-width: 320px;
  padding: .6rem .85rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-left: 3px solid var(--color-warning, #d97706);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}
.lock-presence__text {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}
.lock-presence__name {
  font-size: var(--font-size-sm);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lock-presence__sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted, #9ca3af);
}

/* ── Popup / Modal ───────────────────────────────────────────────────── */
.lock-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lock-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .45);
}
.lock-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 100%;
  max-width: 420px;
  padding: 1.75rem;
  text-align: center;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.lock-modal__title {
  margin: .25rem 0 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
}
.lock-modal__message {
  margin: 0;
  font-size: var(--font-size-base);
}
.lock-modal__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #9ca3af);
}
.lock-modal__actions {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}

/* ── Dokumentation: Markdown-Handbuch ───────────────────────────────────────
   Lese-Layout (Navigation + Inhalt), Editor (Split) und Markdown-Typografie. */
.doc-layout { display: flex; align-items: stretch; min-height: 55vh; }
.doc-nav {
  flex: 0 0 240px;
  border-right: 1px solid var(--color-border);
  padding: .5rem 0;
  overflow-y: auto;
}


.doc-main { flex: 1; min-width: 0; padding: 1rem 1.5rem; }

/* Editor: Markdown links, Live-Vorschau rechts */
.doc-editor { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-top: .25rem; }

.doc-editor__md {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  resize: vertical;
  min-height: 460px;
  line-height: 1.5;
}


/* Gerendertes Markdown */
.doc-content { line-height: 1.65; color: var(--color-text); word-wrap: break-word; }
.doc-content > :first-child { margin-top: 0; }
.doc-content h1, .doc-content h2, .doc-content h3,
.doc-content h4, .doc-content h5, .doc-content h6 { margin: 1.4em 0 .5em; line-height: 1.25; font-weight: 700; }
.doc-content h1 { font-size: 1.6rem; }
.doc-content h2 { font-size: 1.35rem; border-bottom: 1px solid var(--color-border); padding-bottom: .25rem; }
.doc-content h3 { font-size: 1.15rem; }
.doc-content p, .doc-content ul, .doc-content ol, .doc-content blockquote, .doc-content table { margin: 0 0 1em; }
.doc-content ul, .doc-content ol { padding-left: 1.5rem; }
.doc-content li { margin: .25em 0; }
.doc-content a { color: var(--color-primary); text-decoration: underline; }
.doc-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .1em .35em;
}
.doc-content pre {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  overflow: auto;
  margin: 0 0 1em;
}
.doc-content pre code { background: none; border: 0; padding: 0; font-size: var(--font-size-sm); }
.doc-content blockquote {
  border-left: 3px solid var(--color-border);
  padding: .25rem 0 .25rem 1rem;
  color: var(--color-text-muted);
}
.doc-content table { border-collapse: collapse; width: auto; }
.doc-content th, .doc-content td { border: 1px solid var(--color-border); padding: .4rem .6rem; text-align: left; }
.doc-content th { background: var(--color-bg); font-weight: 600; }
.doc-content img { max-width: 100%; height: auto; }
.doc-content hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.5em 0; }

@media (max-width: 720px) {
  .doc-layout { flex-direction: column; }
  .doc-nav { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
}

/* Wiki-Seitenbaum (Navigation) + Breadcrumb */
.doc-nav__empty { padding: 1rem; }
.doc-tree { list-style: none; margin: 0; padding: 0; }
.doc-tree--root { padding: .5rem 0; }
.doc-tree .doc-tree { padding-left: .85rem; border-left: 1px solid var(--color-border); margin-left: .65rem; }
.doc-tree__item { margin: 0; }
.doc-tree__link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  font-size: var(--font-size-sm);
}
.doc-tree__link:hover { background: var(--color-bg); }
.doc-tree__link--active {
  background: var(--color-bg);
  font-weight: 600;
  border-left-color: var(--color-primary);
}
.doc-tree__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: .6rem;
}
.doc-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.doc-breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.doc-breadcrumb__sep { opacity: .6; }
.doc-breadcrumb__current { color: var(--color-text); font-weight: 600; }

/* Editor-Toolbar (Confluence-/Wiki-Stil) */
.doc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
  padding: .35rem .5rem;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-bg);
}
.doc-toolbar__group { display: flex; align-items: center; gap: .1rem; padding: 0 .35rem; }
.doc-toolbar__group + .doc-toolbar__group { border-left: 1px solid var(--color-border); }

.doc-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 30px;
  height: 30px;
  padding: 0 .4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
}
.doc-toolbar__btn:hover { background: var(--color-surface); border-color: var(--color-border); }
.doc-toolbar__btn .material-symbols-outlined { font-size: 19px; }
.doc-toolbar__btn--text { font-weight: 600; }


/* Editor-Split an die Toolbar andocken */
.doc-editor { margin-top: 0; }
.doc-editor__md { flex: 1 1 50%; min-width: 300px; border-top-left-radius: 0; }


/* Editor ohne Vorschau: Markdown-Textfeld über die volle Breite, an die Toolbar angedockt. */
.doc-editor__md { width: 100%; min-width: 0; min-height: 480px; border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ════════════════════════════════════════════════════════════════════════
   Hilfe-Assistent — globales „?"-Widget (HelpController@chat)
   Floatender Button unten rechts + ausklappbares Chat-Panel.
   ════════════════════════════════════════════════════════════════════════ */
.help-chat { position: fixed; z-index: var(--z-flyout); }
/* Solange IRGENDEIN Popup im Vollbild offen ist, weicht das Hilfe-Widget —
   greift für den runden FAB auf Seiten OHNE Sidebar (dort läge er über dem
   Fuß des randlosen Dialogs); in der Sidebar-Variante ist es ohnehin verdeckt.
   `:not([hidden])` ist entscheidend: die is-fullscreen-Klasse bleibt am
   geschlossenen Modal kleben (gewollt, merkt den Zustand). */
body:has(.is-fullscreen:not([hidden])) .help-chat { display: none; }

/* ── Floatender Auslöse-Button (FAB) ────────────────────────────────────── */
.help-chat__fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-flyout);
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-primary, #6366f1);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.help-chat__fab:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 0, 0, .26); }
.help-chat__fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary, #6366f1) 45%, #fff); outline-offset: 2px; }

/* ── In der Sidebar: eckige Schaltfläche direkt ÜBER der Account-Zeile ──────
   Das JS hängt den GANZEN Widget-Container dorthin (siehe app.js) — dadurch
   stimmt die Position bei jeder Fußzeilen-Höhe und beim Ein-/Ausklappen von
   selbst, und die Klick-Logik des Widgets bleibt intakt. Ohne Sidebar
   (Login, öffentliche Anfrage-Seite) bleibt der runde FAB rechts unten. */
.help-chat--in-sidebar { position: static; display: flex; flex-direction: column; flex-shrink: 0; }
.help-chat--in-sidebar .help-chat__fab {
  position: static;
  width: auto;
  height: 40px;
  margin: 0 var(--space-4) var(--space-3);
  border-radius: var(--radius-md, 8px);
  box-shadow: none;
  flex-shrink: 0;
}
.help-chat--in-sidebar .help-chat__fab:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.help-chat--in-sidebar .help-chat__fab-icon { font-size: 20px; }
/* Beschriftung: nur in der Sidebar sichtbar (der runde FAB bleibt Icon-only),
   und dort nur ausgeklappt — eingeklappt ist kein Platz dafür. */
.help-chat__fab-text { display: none; }
.help-chat--in-sidebar .help-chat__fab {
  gap: var(--space-2, .5rem);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: inherit;
}
.help-chat--in-sidebar .help-chat__fab-text { display: inline; white-space: nowrap; }
/* Icon-Wechsel Hilfe ⇄ Schließen: im Sidebar-Knopf per display statt per
   Überlagerung. Die globale Variante legt das X absolut über das Fragezeichen
   — hier gibt es keinen positionierten Bezug (Knopf ist static), das X landete
   neben dem Knopf, und das nur ausgeblendete Fragezeichen ließ eine Lücke. */
.help-chat--in-sidebar .help-chat__fab-icon--close {
  position: static;
  display: none;
  opacity: 1;
  transform: none;
}
.help-chat--in-sidebar.help-chat--open .help-chat__fab-icon--open  { display: none; }
.help-chat--in-sidebar.help-chat--open .help-chat__fab-icon--close { display: inline-flex; }
/* Panel klappt neben der Sidebar auf (nicht mehr rechts unten) — es soll dort
   erscheinen, wo der Knopf jetzt sitzt, ohne die Sidebar zu verdecken. */
.help-chat--in-sidebar .help-chat__panel {
  right: auto;
  left: calc(var(--sidebar-width, 240px) + .75rem);
  bottom: 1.25rem;
}
/* Eingeklappte Sidebar (64px): Knopf quadratisch/mittig, Panel rückt nach. */
body.is-sidebar-collapsed .help-chat--in-sidebar .help-chat__fab {
  width: 40px;
  margin-left: auto;
  margin-right: auto;
}
body.is-sidebar-collapsed .help-chat--in-sidebar .help-chat__fab-text { display: none; }
body.is-sidebar-collapsed .help-chat--in-sidebar .help-chat__panel {
  left: calc(var(--sidebar-width-collapsed, 64px) + .75rem);
}
.help-chat__fab-icon { font-size: 28px; line-height: 1; transition: opacity .12s ease, transform .12s ease; }
/* Icon-Wechsel Hilfe ⇄ Schließen je nach Zustand */
.help-chat__fab-icon--close { position: absolute; opacity: 0; transform: rotate(-45deg); }
.help-chat--open .help-chat__fab-icon--open  { opacity: 0; transform: rotate(45deg); }
.help-chat--open .help-chat__fab-icon--close { opacity: 1; transform: rotate(0); }

/* ── Chat-Panel ─────────────────────────────────────────────────────────── */
.help-chat__panel {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + 56px + .75rem);
  z-index: var(--z-alert);
  width: min(461px, calc(100vw - 2rem));
  height: min(80vh, 672px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
  animation: help-chat-in .14s ease-out;
}
.help-chat__panel[hidden] { display: none; }
/* Vollbild: Panel füllt das Fenster (1rem Rand); Esc oder Button beenden.
   Schrift wird mit hochskaliert — auf großer Fläche ist 12px zu klein. */
.help-chat__panel--fullscreen {
  left: 1rem; right: 1rem; top: 1rem; bottom: 1rem;
  width: auto; height: auto;
}
/* Explizit in px: die Root-Schrift der App ist 13px → 1rem wäre kaum größer. */
.help-chat__panel--fullscreen .help-chat__bubble,
.help-chat__panel--fullscreen .help-chat__input,
.help-chat__panel--fullscreen .help-chat__intro-text,
.help-chat__panel--fullscreen .help-chat__chip { font-size: 16px; }
.help-chat__panel--fullscreen .help-chat__title { font-size: 15px; }

.help-chat__panel--fullscreen .help-chat__input { max-height: 200px; }

/* ── Verlauf-Sidebar („alte Chats") — nur im Vollbild sichtbar ────────────
      Im Vollbild wird das Panel zum 2-Spalten-Grid: links der Verlauf (volle
      Höhe), rechts die gewohnte Spalte Header/Nachrichten/Eingabe. ───────── */
.help-chat__history { display: none; }
.help-chat__panel--fullscreen {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.help-chat__panel--fullscreen .help-chat__history {
  display: flex; flex-direction: column;
  grid-column: 1; grid-row: 1 / -1;
  min-height: 0;
  border-right: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface-soft, #f8fafc);
}
.help-chat__panel--fullscreen .help-chat__header, .help-chat__panel--fullscreen .help-chat__messages, .help-chat__panel--fullscreen .help-chat__composer { grid-column: 2; }
.help-chat__history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  font-size: 14px;
}
.help-chat__history-new { color: var(--color-text, var(--color-text-secondary)); }
.help-chat__history-list { flex: 1; overflow-y: auto; padding: .4rem; }
.help-chat__history-empty { color: var(--color-text-muted, var(--color-text-soft)); font-size: var(--font-size-base); /* 13px→Skala */ padding: .5rem .6rem; margin: 0; }
.help-chat__hist-item { display: flex; align-items: center; gap: .15rem; border-radius: 8px; margin-bottom: 2px; }
.help-chat__hist-item:hover { background: rgba(0, 0, 0, .05); }
.help-chat__hist-item--active { background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, transparent); }
.help-chat__hist-open {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: .5rem .6rem; font: inherit;
}
.help-chat__hist-title {
  font-size: var(--font-size-base); /* 13px→Skala */ color: var(--color-text, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.help-chat__hist-meta { font-size: 11px; color: var(--color-text-muted, var(--color-text-soft)); }
.help-chat__hist-del {
  display: none; align-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--color-text-muted, #9ca3af);
  padding: .35rem; margin-right: .25rem; border-radius: 6px;
}
.help-chat__hist-item:hover .help-chat__hist-del { display: inline-flex; }
.help-chat__hist-del:hover { color: var(--color-error, #dc2626); background: rgba(220, 38, 38, .08); }
.help-chat__hist-del .material-symbols-outlined { font-size: 16px; }
/* Schmale Screens: Sidebar weglassen, Vollbild bleibt einspaltig. */
@media (max-width: 720px) {
  .help-chat__panel--fullscreen { display: flex; flex-direction: column; }
  .help-chat__panel--fullscreen .help-chat__history { display: none; }
}
/* ── Page-Modus (Route /hilfe): Chat fest in den Seiteninhalt eingebettet ──
   Kein FAB, kein Float — das Panel füllt den Content-Bereich und nutzt dasselbe
   2-Spalten-Layout (Verlauf + Chat) wie der Vollbild-Modus. */
.help-chat--page { position: static; z-index: auto; display: block; }
.help-chat--page .help-chat__panel--page {
  position: static; inset: auto;
  width: 100%;
  height: calc(100vh - 6rem);       /* füllt den (jetzt randlosen) Inhaltsbereich */
  min-height: 380px;
  animation: none;
  box-shadow: none;                 /* App-Karten haben keinen Schlagschatten */
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.help-chat--page .help-chat__history {
  display: flex; flex-direction: column;
  grid-column: 1; grid-row: 1 / -1;
  min-height: 0;
  border-right: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface-soft, #f8fafc);
}
.help-chat--page .help-chat__header, .help-chat--page .help-chat__messages, .help-chat--page .help-chat__composer { grid-column: 2; }
.help-chat--page .help-chat__bubble,
.help-chat--page .help-chat__input,
.help-chat--page .help-chat__intro-text { font-size: 15px; }
/* Sekundär-Cluster einheitlich = Chat-Schrift minus 1 (14px), Icons knapp größer. */
.help-chat--page .help-chat__chip, .help-chat--page .help-chat__prov, .help-chat--page .help-chat__feedback-q, .help-chat--page .help-chat__feedback-done, .help-chat--page .help-chat__fb-btn, .help-chat--page .help-chat__online-hint, .help-chat--page .help-chat__online-btn, .help-chat--page .help-chat__source, .help-chat--page .help-chat__copy, .help-chat--page .help-chat__srcbtn, .help-chat--page .help-chat__verifybtn, .help-chat--page .help-chat__src { font-size: 14px; }
.help-chat--page .help-chat__prov-ico,
.help-chat--page .help-chat__online-btn .material-symbols-outlined,
.help-chat--page .help-chat__copy .material-symbols-outlined { font-size: 18px; }
/* Heller Karten-Header statt der blauen Widget-Titelzeile — wie .card-header. */
.help-chat--page .help-chat__header {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
}
.help-chat--page .help-chat__title { color: var(--color-text); font-weight: 600; }
.help-chat--page .help-chat__subtitle { color: var(--color-text-secondary); opacity: 1; }
.help-chat--page .help-chat__avatar { background: var(--color-primary-light); }
.help-chat--page .help-chat__header-icon { color: var(--color-primary); }
.help-chat--page .help-chat__icon-btn { color: var(--color-text-secondary); }
.help-chat--page .help-chat__icon-btn:hover { background: var(--color-surface-soft); color: var(--color-text); }
/* App-Hintergrund (var(--color-gray-100)) → die weißen Antwort-Karten heben sich ab (Chat-Optik). */
.help-chat--page .help-chat__messages { background: var(--color-bg); }
.help-chat--page .help-chat__history-head { background: var(--color-surface-alt); }
/* Unten kein Weiß: Composer wie die Nachrichtenfläche (grau), Eingabe als weißes Feld. */
.help-chat--page .help-chat__composer { background: var(--color-bg); }
.help-chat--page .help-chat__input { background: var(--color-surface); }
/* Antworten als klar abgegrenzte Karten (Chat-Optik), nativ in App-Farben:
   weiße Karte mit Rahmen + App-Radius, volle Breite, großzügiges Padding. */
.help-chat--page .help-chat__msg--assistant .help-chat__bubble {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  max-width: 100%;
}
/* Etwas mehr Luft zwischen den Turns, damit die Trennung klar ist. */
.help-chat--page .help-chat__messages { gap: var(--space-3); }
/* Diese Seite randlos: der Chat füllt den Inhaltsbereich (Padding minimal). */
.content--flush { padding: var(--space-1); }
/* Verlauf-Sidebar erst auf wirklich schmalen Fenstern ausblenden (Handy);
   die App-Sidebar frisst schon Breite, daher Spalte oben flexibel + niedriger Breakpoint. */
@media (max-width: 600px) {
  .help-chat--page .help-chat__panel--page { display: flex; flex-direction: column; }
  .help-chat--page .help-chat__history { display: none; }
}
@keyframes help-chat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */
.help-chat__header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  background: var(--color-primary, #6366f1);
  color: #fff;
}
.help-chat__header-icon { font-size: var(--icon-size-lg); }
.help-chat__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .25);
}
.help-chat__avatar[hidden] { display: none; }
.help-chat__titles { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.help-chat__title { font-size: var(--font-size-sm, .875rem); line-height: 1.2; }
.help-chat__subtitle { font-size: .72rem; opacity: .85; line-height: 1.2; }
.help-chat__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: .9;
  transition: background-color .12s ease, opacity .12s ease;
}
.help-chat__icon-btn:hover { background: rgba(255, 255, 255, .18); opacity: 1; }
.help-chat__icon-btn .material-symbols-outlined { font-size: var(--icon-size); }

/* ── Nachrichtenbereich ─────────────────────────────────────────────────── */
.help-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .85rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--color-bg, #f9fafb);
}
.help-chat__intro { color: var(--color-text-muted, var(--color-text-soft)); font-size: var(--font-size-sm, .875rem); }
.help-chat__intro-text { margin: 0 0 .7rem; line-height: 1.5; }

.help-chat__chip {
  text-align: left;
  padding: .4rem .65rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-primary, #6366f1);
  font-size: .8rem;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.help-chat__chip:hover { background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, #fff); border-color: var(--color-primary, #6366f1); }
/* Folgefragen-Chips unter einer Antwort: links eingerückt wie die Assistenten-Bubble, umbrechend. */
.help-chat__followups {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .15rem 0 .35rem;
  align-items: flex-start;
}
/* RAG-Quellen: „Quellen: [Dok] [Dok]" — Links öffnen das Original-Dokument (Proxy). */


.help-chat__source { color: var(--color-primary, #6366f1); text-decoration: underline; cursor: pointer; }
.help-chat__source:hover { text-decoration: none; }

/* „Jetzt online suchen": Hinweis + Button, wenn die Doku nichts hergab. */
.help-chat__online {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem;
  margin: .55rem 0 0;
}
.help-chat__online-hint { color: var(--color-text-muted, var(--color-text-soft)); font-size: .75rem; }
.help-chat__online-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem;
  border: 1px solid var(--color-primary, #6366f1);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, #fff);
  color: var(--color-primary, #6366f1);
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease;
}
.help-chat__online-btn:hover { background: color-mix(in srgb, var(--color-primary, #6366f1) 16%, #fff); }
.help-chat__online-btn .material-symbols-outlined { font-size: 1.05rem; }
/* Web-Quellen einer Online-Antwort (externe Links) — wie RAG-Quellen, aber abgesetzt. */


/* Herkunfts-Badge unter einer Antwort: kleiner Hinweis, woher das Wissen stammt. */
.help-chat__prov {
  display: inline-flex; align-items: center; gap: .22rem;
  align-self: flex-start;
  margin: 0 0 .45rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .68rem; font-weight: 600;
}
.help-chat__prov-ico { font-size: .95rem; }


/* Meta-Zeile unter einer Antwort: Herkunfts-Badge (links) + Kopier-Button (rechts). */


.help-chat__copy {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .55rem;
  border: 1px solid color-mix(in srgb, var(--color-primary, #0370B0) 35%, #fff);
  border-radius: 999px;
  background: var(--color-primary-light, #e8f3fa);
  color: var(--color-primary, #0370B0);
  font: inherit; font-size: .68rem; font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.help-chat__copy:hover { background: color-mix(in srgb, var(--color-primary, #0370B0) 18%, #fff); }
.help-chat__copy.is-done { color: var(--color-success, #16a34a); border-color: var(--color-success, #16a34a); background: #f0fdf4; }
.help-chat__copy .material-symbols-outlined { font-size: .95rem; }

/* Antwort-Fußzeile INNERHALB der Box: Herkunft + Kopieren + Quellen-Button + Feedback. */
.help-chat__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem;
  margin-top: 15px; padding-top: 14px;   /* mehr Luft zwischen Antwort, Trennlinie und Buttons */
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.help-chat__foot .help-chat__prov { margin: 0; }
.help-chat__foot .help-chat__feedback { margin-left: auto; }
/* Quellen-Button (gleiche Optik wie Kopieren) → klappt die Quellen in der Box auf. */
.help-chat__srcbtn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .55rem;
  border: 1px solid color-mix(in srgb, var(--color-primary, #0370B0) 35%, #fff); border-radius: 999px;
  background: var(--color-primary-light, #e8f3fa); color: var(--color-primary, #0370B0);
  font: inherit; font-size: .68rem; font-weight: 600; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.help-chat__srcbtn:hover,
.help-chat__srcbtn.is-open { background: color-mix(in srgb, var(--color-primary, #0370B0) 18%, #fff); }
.help-chat__srcbtn .material-symbols-outlined { font-size: .95rem; }

/* „Verifizieren"-Button (Web-Check) — eigene, deutliche Farbe (Violett). */
.help-chat__verifybtn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .55rem;
  border: 1px solid #ddd6fe; border-radius: 999px;
  background: #f5f3ff; color: #6d28d9;
  font: inherit; font-size: .68rem; font-weight: 600; cursor: pointer;
  transition: background-color .12s ease, opacity .12s ease;
}
.help-chat__verifybtn:hover { background: #ede9fe; }
.help-chat__verifybtn.is-busy { opacity: .6; cursor: default; }
.help-chat__verifybtn .material-symbols-outlined { font-size: .95rem; }

/* Ergebnis-Panel der Web-Prüfung — INNERHALB der Antwort-Box, über der Fußzeile. */
.help-chat__verify {
  margin-top: .55rem; padding: .5rem .65rem;
  border: 1px solid var(--color-border, #e5e7eb); border-left: 3px solid #6d28d9;
  border-radius: 8px; background: #faf9ff;
}
.help-chat__verify-head { display: flex; align-items: center; gap: .3rem; font-weight: 700; color: #6d28d9; margin-bottom: .25rem; }
.help-chat__verify-head .material-symbols-outlined { font-size: 1rem; }
.help-chat__verify-body { line-height: 1.5; }
.help-chat__verify-body p { margin: 0 0 .35rem; }
.help-chat__verify-body p:last-child { margin-bottom: 0; }
.help-chat__verify-src { margin-top: .4rem; }
.help-chat__verify-loading,
.help-chat__verify-err { color: var(--color-text-muted, var(--color-text-soft)); font-style: italic; }
/* Einklappbare Quellenliste (mit <br> getrennt), innerhalb der Box. */
.help-chat__src {
  margin-top: .55rem; padding-top: .5rem;
  border-top: 1px dashed var(--color-border, #e5e7eb);
  font-size: .8rem; line-height: 1.9;
}
.help-chat__src[hidden] { display: none; }
.help-chat__src-label { color: var(--color-text-muted, var(--color-text-soft)); font-weight: 600; }

/* Nachrichten-Blasen */
.help-chat__msg { display: flex; }

.help-chat__msg--assistant { justify-content: flex-start; }
.help-chat__bubble {
  max-width: 86%;
  padding: .55rem .75rem;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.help-chat__msg--assistant .help-chat__bubble {
  background: var(--color-surface, #fff);
  color: var(--color-text, #111827);
  border: 1px solid var(--color-border, #e5e7eb);
  border-bottom-left-radius: 4px;
}
/* Markdown-Inhalt in der Antwort-Blase */
.help-chat__bubble > :first-child { margin-top: 0; }
.help-chat__bubble > :last-child { margin-bottom: 0; }
.help-chat__bubble p { margin: 0 0 .5rem; }
.help-chat__bubble ul,
.help-chat__bubble ol { margin: 0 0 .5rem; padding-left: 1.2rem; }
.help-chat__bubble li { margin-bottom: .2rem; }
.help-chat__bubble h1,
.help-chat__bubble h2,
.help-chat__bubble h3 { font-weight: 700; line-height: 1.3; margin: .7rem 0 .35rem; }
.help-chat__bubble h1 { font-size: 1.4em; }
.help-chat__bubble h2 { font-size: 1.25em; }
.help-chat__bubble h3 { font-size: 1.1em; }
.help-chat__bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, #fff);
  padding: .05rem .3rem;
  border-radius: 4px;
}
.help-chat__bubble pre { background: #1e293b; color: #e2e8f0; padding: .6rem .7rem; border-radius: 8px; overflow-x: auto; }
.help-chat__bubble pre code { background: transparent; padding: 0; color: inherit; }
.help-chat__bubble a { color: var(--color-primary, #6366f1); text-decoration: underline; }
.help-chat__bubble table { width: 100%; border-collapse: collapse; font-size: .8em; margin: 0 0 .5rem; }
.help-chat__bubble th,
.help-chat__bubble td { border: 1px solid var(--color-border, #e5e7eb); padding: .25rem .4rem; text-align: left; vertical-align: top; word-break: break-word; }
.help-chat__bubble th { background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, #fff); font-weight: 600; }

/* Tipp-Animation (3 Punkte) */
.help-chat__bubble--typing { display: inline-flex; gap: .25rem; align-items: center; }
.help-chat__bubble--typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted, #9ca3af);
  animation: help-chat-blink 1.2s infinite ease-in-out both;
}
.help-chat__bubble--typing span:nth-child(2) { animation-delay: .18s; }
.help-chat__bubble--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes help-chat-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Eingabe ────────────────────────────────────────────────────────────── */
.help-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .6rem .7rem .3rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
}
.help-chat__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 9px .7rem;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  min-height: 40px;      /* gleiche Höhe wie die Buttons (📎/📖/Senden) */
  max-height: 120px;
  overflow-y: hidden;    /* keine Scrollbar bei 1 Zeile; autoGrow schaltet sie erst bei Max-Höhe ein */
  box-sizing: border-box;
  background: var(--color-bg, #f9fafb);
  color: var(--color-text, #111827);
}
.help-chat__input:focus { outline: none; border-color: var(--color-primary, #6366f1); background: #fff; }
.help-chat__send {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  cursor: pointer;
  transition: background-color .12s ease, opacity .12s ease;
}
.help-chat__send:hover { background: color-mix(in srgb, var(--color-primary, #6366f1) 88%, #000); }
.help-chat__send .material-symbols-outlined { font-size: var(--icon-size); }

/* ── Werkzeuge im Eingabefeld: Datei-Upload + Wissen-Toggle ─────────────── */
.help-chat__tool {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: var(--color-bg, #f9fafb);
  color: var(--color-text-muted, var(--color-text-soft));
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.help-chat__tool:hover { background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, #fff); color: var(--color-text, #111827); }
.help-chat__tool .material-symbols-outlined { font-size: var(--icon-size); }
/* Wissen-Schalter: „an" = farblich aktiv, „aus" = gedimmt + durchgestrichen */
.help-chat__tool--toggle.is-on {
  background: color-mix(in srgb, var(--color-primary, #6366f1) 14%, #fff);
  border-color: var(--color-primary, #6366f1);
  color: var(--color-primary, #6366f1);
}
.help-chat__tool--toggle:not(.is-on) { opacity: .7; }
.help-chat__tool--toggle:not(.is-on) .material-symbols-outlined { text-decoration: line-through; }

/* ── Angehängte Dateien (Chips über dem Eingabefeld) ───────────────────── */
.help-chat__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .45rem .7rem 0;
}
.help-chat__attach-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .2rem .2rem .2rem .45rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-bg, #f9fafb);
  font-size: .75rem;
  color: var(--color-text, #111827);
}
.help-chat__attach-chip.is-pending { opacity: .7; }
.help-chat__attach-ico { font-size: 16px; color: var(--color-text-muted, var(--color-text-soft)); }
.help-chat__attach-chip.is-pending .help-chat__attach-ico { animation: help-chat-spin 1s linear infinite; }
@keyframes help-chat-spin { to { transform: rotate(360deg); } }
.help-chat__attach-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.help-chat__attach-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted, var(--color-text-soft));
  cursor: pointer;
}
.help-chat__attach-x:hover { background: rgba(0, 0, 0, .08); color: var(--color-text, #111827); }
.help-chat__attach-x .material-symbols-outlined { font-size: 15px; }
.help-chat__attach-err { font-size: .72rem; color: var(--color-danger, #dc2626); padding: .2rem .3rem; }

/* ── Wissens-Dropdown (einzelne Collections an/aus) ─────────────────────── */
.help-chat__know { position: relative; flex: none; display: inline-flex; }
.help-chat__know-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
}
.help-chat__know-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: 240px;
  max-width: 70vw;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.help-chat__know-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  font-size: .78rem;
}
.help-chat__know-bulk { display: inline-flex; gap: .45rem; }
.help-chat__know-link {
  border: none; background: none; padding: 0;
  color: var(--color-primary, #6366f1);
  font-size: .72rem; cursor: pointer;
}
.help-chat__know-link:hover { text-decoration: underline; }
.help-chat__know-list { max-height: 220px; overflow-y: auto; padding: .3rem; }
.help-chat__know-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .4rem;
  border-radius: 7px;
  font-size: .8rem;
  cursor: pointer;
}
.help-chat__know-item:hover { background: var(--color-bg, #f9fafb); }
.help-chat__know-item input { flex: none; }
.help-chat__know-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-chat__know-loading { margin: 0; padding: .5rem .6rem; font-size: .76rem; color: var(--color-text-muted, var(--color-text-soft)); }


/* Feedback-Zeile unter jeder Antwort */
.help-chat__feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: -.35rem 0 .1rem;
  font-size: .72rem;
  color: var(--color-text-muted, var(--color-text-soft));
}
.help-chat__feedback-q { margin-right: .15rem; }
.help-chat__feedback-actions { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.help-chat__fb-btn {
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
  color: var(--color-text, var(--color-text-secondary));
  border-radius: 999px;
  padding: .1rem .55rem;
  font: inherit;
  font-size: .72rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.help-chat__fb-btn:hover { border-color: var(--color-primary, #6366f1); color: var(--color-primary, #6366f1); }
.help-chat__fb-btn--support:hover { border-color: var(--color-warning, #d97706); color: var(--color-warning, #d97706); }
.help-chat__feedback-done { font-size: .72rem; color: var(--color-success, #16a34a); }

/* Schmale Viewports: Panel nutzt nahezu die volle Breite/Höhe. */
@media (max-width: 480px) {
  .help-chat__panel {
    right: .75rem;
    left: .75rem;
    width: auto;
    height: min(74vh, 672px);
    bottom: calc(.75rem + 56px + .6rem);
  }
  .help-chat__fab { right: .9rem; bottom: .9rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Doku: Drag-&-Drop-Sortiermodus (Wiki-Baum)
   ════════════════════════════════════════════════════════════════════════ */
.doc-tree__drag-handle { display: none; }
.doc-nav--sorting .doc-tree__drag-handle {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  margin-right: .1rem;
  color: var(--color-text-muted, #9ca3af);
  cursor: grab;
}
.doc-nav--sorting .doc-tree__row { cursor: grab; user-select: none; }
.doc-nav--sorting .doc-tree__row:active { cursor: grabbing; }
.doc-tree__item.is-dragging { opacity: .5; }
.doc-tree__item--drop-before  > .doc-tree__row { box-shadow: inset 0 3px 0 0 var(--color-primary, #6366f1); border-radius: 4px; }
.doc-tree__item--drop-after   > .doc-tree__row { box-shadow: inset 0 -3px 0 0 var(--color-primary, #6366f1); border-radius: 4px; }
.doc-tree__item--drop-inside  > .doc-tree__row { box-shadow: inset 0 0 0 2px var(--color-primary, #6366f1); border-radius: 6px; background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent); }
.doc-nav__sort-hint {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .5rem;
  padding: .45rem .6rem;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--color-text, var(--color-text-secondary));
  background: color-mix(in srgb, var(--color-primary, #6366f1) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary, #6366f1) 22%, #fff);
  border-radius: 8px;
}
.doc-nav__sort-hint[hidden] { display: none; }
.doc-nav__sort-hint .material-symbols-outlined { font-size: 18px; color: var(--color-primary, #6366f1); }

/* Wiki-Baum: Abschnittsüberschriften, Trennlinien & Einklappen (V37) */
.doc-tree__heading,
.doc-tree__divider { display: flex; align-items: center; gap: .35rem; }
.doc-tree__heading {
  padding: .55rem .5rem .2rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted, var(--color-text-soft));
}
.doc-tree__heading-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.doc-tree__chevron {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted, #9ca3af);
  transition: transform .15s ease;
}
.doc-tree__item.is-collapsed > .doc-tree__heading .doc-tree__chevron { transform: rotate(-90deg); }
.doc-tree__item.is-collapsed > ul { display: none; }
/* Chevron nur zeigen, wenn die Überschrift Unterseiten hat */
.doc-tree__item--heading:not(:has(> ul)) .doc-tree__chevron { visibility: hidden; }
.doc-tree__divider { padding: .3rem .25rem; }
.doc-tree__rule { flex: 1; border: none; border-top: 1px solid var(--color-border, #e5e7eb); margin: 0; }

/* Projekt-Preis-Übersicht (gemeldete Preise) */
.price-overview__toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.price-overview__search { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center; }
.price-overview__search .material-symbols-outlined {
  position: absolute; left: .55rem; font-size: 20px;
  color: var(--color-text-muted, #9ca3af); pointer-events: none;
}
.price-overview__search .form-input { padding-left: 2.1rem; }
.price-overview__filter { max-width: 280px; flex: none; }
.price-overview__row--chosen { background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent); }
/* Sortierbare Spaltenköpfe der Preis-Übersicht */
[data-price-table] th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
[data-price-table] th.sortable:hover { background: var(--color-bg, #f9fafb); }
[data-price-table] th .sort-indicator { font-size: 1rem; vertical-align: -.18em; margin-left: .15rem; color: var(--color-text-muted, #9ca3af); }
[data-price-table] th.sortable:hover .sort-indicator { color: var(--color-primary, #6366f1); }
[data-price-table] th[aria-sort] .sort-indicator { color: var(--color-primary, #6366f1); }
/* Zahlen-/Preis-Spalten: sauber rechtsbündig, nie umbrechen (Zahl + €/Einheit zusammen) */
[data-price-table] td.text-right { white-space: nowrap; }
/* Bezeichnung: Volltext aufklappen */
.price-overview__desc-toggle {
  border: 0;
  background: transparent;
  padding: 0 .15rem;
  margin-left: .1rem;
  cursor: pointer;
  vertical-align: -.2em;
  color: var(--color-text-muted, #9ca3af);
}
.price-overview__desc-toggle:hover { color: var(--color-primary, #6366f1); }
.price-overview__desc-toggle .material-symbols-outlined { font-size: 1.05rem; transition: transform .15s ease; }
.price-overview__desc-toggle.is-open .material-symbols-outlined { transform: rotate(180deg); }
.price-overview__desc-full {
  margin-top: .3rem;
  max-width: 540px;
  white-space: normal;
  line-height: 1.45;
  color: var(--color-text, var(--color-text-secondary));
}
.price-overview__desc-full[hidden] { display: none; }

/* Master-System-Account-Hinweis: Avatar neben dem Text */
.master-notice__body {
  display: flex;
  gap: var(--space-4, 16px);
  align-items: flex-start;
}
.master-notice__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-muted, #eef2f7);
}
.master-notice__avatar[hidden] { display: none; }
.master-notice__avatar-fallback {
  flex: none;
  font-size: 56px;
  line-height: 1;
  color: var(--color-text-muted, #64748b);
}
.master-notice__text { min-width: 0; }
/* Icon-Fallbacks: .material-symbols-outlined setzt display:inline-flex und
   überschreibt damit das UA-[hidden]; explizit wieder ausblenden. */
.master-notice__avatar-fallback[hidden],
.help-chat__header-icon[hidden] { display: none; }

/* ── Wartungsmodus-Karte (Einstellungen) ─────────────────────────────────── */
.maintenance-card--on {
  border-color: var(--color-warning);
  box-shadow: inset 0 0 0 1px var(--color-warning);
}
.maintenance-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.maintenance-status__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.maintenance-status--off { color: var(--color-success-text); background: var(--color-success-bg); }
.maintenance-status--off .maintenance-status__dot { background: var(--color-success); }
.maintenance-status--on { color: var(--color-warning-text); background: var(--color-warning-bg); }
.maintenance-status--on .maintenance-status__dot {
  background: var(--color-warning);
  animation: maintenance-pulse 1.6s ease-out infinite;
}
@keyframes maintenance-pulse {
  0%       { box-shadow: 0 0 0 0 var(--color-warning); }
  70%,100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .maintenance-status--on .maintenance-status__dot { animation: none; }
}

/* ── Superuser-Drill-in-Navigation ──────────────────────────────────────── */
.nav-item--back { color: var(--color-text-muted); font-weight: 500; }
.nav-item--back:hover { color: var(--color-text); }
.nav-item--back .nav-icon { transition: transform var(--transition); }
.nav-item--back:hover .nav-icon { transform: translateX(-3px); }
/* Die fokussierte Superuser-Navi schiebt sich beim Betreten von links ein. */
.sidebar-nav--superuser .nav-section--main { animation: su-drillin .18s ease-out; }
@keyframes su-drillin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav--superuser .nav-section--main { animation: none; }
}

/* ── Rich-Text-Beschreibungen (Anfrage + Gruppen): Quill-Output kompakt darstellen.
      Quill verpackt Inhalt in <p>; ohne Tightening sähen die Default-1em-Margins
      gestaucht/locker aus. Listen explizit mit Marker + Einrückung. ───────────── */
.calc-description-block__body p,
.public-group__desc p,
.public-meta-block p,
.public-meta-block__body p { margin: 0 0 .4em; }
.calc-description-block__body p:last-child,
.public-group__desc p:last-child,
.public-meta-block p:last-child,
.public-meta-block__body p:last-child { margin-bottom: 0; }
.calc-description-block__body ul,
.public-group__desc ul,
.public-meta-block ul,
.public-meta-block__body ul { list-style: disc; padding-left: 1.5em; margin: .25em 0; }
.calc-description-block__body ol,
.public-group__desc ol,
.public-meta-block ol,
.public-meta-block__body ol { list-style: decimal; padding-left: 1.5em; margin: .25em 0; }
.calc-description-block__body li,
.public-group__desc li,
.public-meta-block li,
.public-meta-block__body li { margin: .15em 0; }

/* ── Rich-Text-Editor: Wrapper + Vollbild-Modus ─────────────────────────────
      .richtext umschließt die Quill-Instanz; der Vollbild-Button sitzt als
      letzte Gruppe GANZ RECHTS in der Quill-Toolbar (Toolbar = Flex, fs-Gruppe
      via margin-left:auto nach rechts). Im Vollbild füllt der Editor das
      Fenster (fixed/flex). ──────────────────────────────────────────────────── */
.richtext { position: relative; }
.richtext .ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; align-items: center; }
.richtext__fs-group.ql-formats { margin-left: auto; margin-right: 0; }
.richtext__fs { width: auto; height: auto; padding: 0 2px; border: 0; background: none; cursor: pointer; color: inherit; display: inline-flex; align-items: center; }
.richtext__fs:hover { color: var(--color-primary); }
.richtext__fs .material-symbols-outlined { font-size: var(--icon-size); }
/* Editor-Schrift an die Artikel-Textareas (.form-textarea) angleichen:
   Quill setzt hart 13px/Helvetica — wir nehmen dieselbe Größe + Font wie die Felder. */
.richtext .ql-container { font-size: var(--font-size-sm); font-family: inherit; }
.richtext--fullscreen {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  margin: 0; padding: 1rem;
  background: var(--color-surface);
  display: flex; flex-direction: column;
}
.richtext--fullscreen .ql-container { flex: 1 1 auto; overflow: auto; }
.richtext--fullscreen .ql-editor { min-height: 100%; }

/* [URKALKULATION] Kalkulations-Popup im Vollbild — überschreibt die Inline-Maße der .modal
   (max-width/height stehen als Inline-Style, daher !important). */
.urkalk-calc__headbtns { display: flex; gap: .25rem; align-items: center; }
#urkalk-calc-modal.is-fullscreen { padding: 0; } /* Backdrop-Padding weg → Modal füllt den Viewport */
#urkalk-calc-modal.is-fullscreen .bl-modal__dialog {
  max-width: 100% !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0;
}

/* „Neue Position"-Popup: Body scrollbar machen — das <form> wrappt Body+Footer und muss
   daher selbst Flex-Spalte sein, sonst greift .modal-body{flex:1;overflow} nicht und .modal
   schneidet nur ab. Plus Vollbild analog zum Kalk-Editor. */
#urkalk-new-modal .bl-modal__dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#urkalk-new-modal .bl-modal__body { min-height: 0; }
#urkalk-new-modal.is-fullscreen, #urkalk-group-modal.is-fullscreen, #urkalk-newgroup-modal.is-fullscreen { padding: 0; }
#urkalk-new-modal.is-fullscreen .bl-modal__dialog, #urkalk-group-modal.is-fullscreen .bl-modal__dialog, #urkalk-newgroup-modal.is-fullscreen .bl-modal__dialog {
  max-width: 100% !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0;
}
#urkalk-group-modal.is-fullscreen .urkalk-group__list { max-height: none; } /* Liste füllt im Vollbild den scrollenden Body */

/* „+ Neu"-Dropdown (Neuer Eintrag / aus Leistung / ganze Leistungs-Gruppe) */
.urkalk-newmenu { position: relative; display: inline-block; }
.urkalk-newmenu__list {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--z-popover, 1100);
  min-width: 230px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .35rem;
}
.urkalk-newmenu__list[hidden] { display: none; }
.urkalk-newmenu__item {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  padding: .5rem .6rem; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--color-text); border-radius: var(--radius-sm); white-space: nowrap;
}
.urkalk-newmenu__item .material-symbols-outlined { flex: 0 0 auto; }
.urkalk-newmenu__item:hover { background: var(--color-bg); }
.urkalk-newmenu__item .material-symbols-outlined { font-size: 19px; color: var(--color-text-muted); }

/* „Aus Leistungs-Gruppe": Checkbox-Liste der Leistungen einer Rubrik */
.urkalk-group__pick { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: .5rem; }
.urkalk-group__pickhead { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); }
.urkalk-group__list { max-height: 360px; overflow-y: auto; padding: .35rem .25rem; }
.urkalk-group__row { display: flex; align-items: flex-start; gap: .55rem; padding: .4rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.urkalk-group__row:hover { background: var(--color-bg); }
.urkalk-group__row input { margin-top: .2rem; flex-shrink: 0; }
.urkalk-group__row > span { flex: 1; min-width: 0; }
/* [HINWEIS] Interner Kalkulator-Kommentar als Zeile im Kalk-Popup: gelb, Klick klappt den Editor aus. */
.urkalk-calc-noterow > td { background: #fefce8; }
.urkalk-calc-table tr.urkalk-calc-noterow > td { vertical-align: middle; } /* schlägt .urkalk-calc-table td{top} — Inhalt genau mittig */
.urkalk-noterow__head { display: flex; align-items: center; gap: .6rem; cursor: pointer; min-height: 2.1rem; }
.urkalk-noterow__preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text, #111827); }
.urkalk-noterow__chev { color: var(--color-text-muted, #6b7280); flex-shrink: 0; }
.urkalk-noterow__editor { margin: .35rem 0 .25rem; }
.urkalk-noterow__editor .ql-container { background: #fff; }
.urkalk-noterow__editor .ql-toolbar { background: #fff; }
/* [ANZAHL] Zahlenfeld je Leistung rechts (Standard 1, ×Anzahl beim Anlegen). */
.urkalk-group__row .urkalk-group__qty {
  width: 88px; flex-shrink: 0; margin-top: 0;
  text-align: right;
}
.urkalk-group__rowsub { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* „Neue Gruppe(n)": Zeilen (Übergeordnet + Bezeichnung) */
.urkalk-grp__head { display: grid; grid-template-columns: 250px 1fr; gap: .5rem; padding: .25rem 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.urkalk-grp__row  { display: grid; grid-template-columns: 250px 1fr; gap: .5rem; margin-bottom: .45rem; }
.urkalk-grp__row .urkalk-grp__parent { min-width: 0; }

/* ── Anbieter-Positionskommentar: „!"-Flag + Klick-Popover ─────────────────
   Steht neben einem Einzelpreis (Vergleich); Klick zeigt den Kommentar. */
.offer-comment { position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  background: none; border: none; padding: 0 .15rem; margin: 0 0 0 .15rem; cursor: pointer;
  color: var(--color-warning, #d97706); line-height: 1; }
/* „!" deutlich: gefüllt (FILL 1, wie die Bewertungs-Sterne) + größer — soll im
   Vergleich (mehrere Anbieter nebeneinander) klar ins Auge springen. */
.offer-comment__icon { font-size: 1.4em; line-height: 1; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
/* Popover: position:fixed (von JS platziert) — sonst würde .card{overflow:hidden} es abschneiden. */
.offer-comment__pop { display: none; position: fixed; z-index: 1000; min-width: 180px; max-width: 320px;
  padding: .5rem .65rem; background: var(--color-surface, #fff); color: var(--color-text, #111);
  border: 1px solid var(--color-border, #d1d5db); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: .8rem; line-height: 1.4;
  font-weight: 400; white-space: normal; text-align: left; }
.offer-comment.is-open .offer-comment__pop { display: block; }
/* Statisches „!" mit Hover-Tooltip — für Checkbox-Karten, wo ein Klick-Button den Toggle stört. */
.offer-comment-static { color: var(--color-warning, #d97706); font-size: 1.4em; line-height: 1; cursor: help; vertical-align: middle; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
/* Kommentar als Klartext unter der Beschreibung (Einzelanbieter-Ansicht). */
.offer-comment-inline { display: flex; align-items: flex-start; gap: .3rem; margin-top: .25rem;
  padding: .3rem .45rem; border-radius: 6px; background: rgba(217,119,6,.08);
  color: var(--color-text, var(--color-text-secondary)); font-size: .78rem; line-height: 1.35; }
.offer-comment-inline__icon { color: var(--color-warning, #d97706); font-size: 1em; line-height: 1.3; flex: 0 0 auto; }
/* [INQUIRY-UPLOADS] Positionsbezogene NU-Dateien als kompakte Download-Pills (Icon + Name) je Position. */
.offer-files { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; vertical-align: middle; }
.offer-files__file { display: inline-flex; align-items: center; gap: .2rem; max-width: 180px; padding: .1rem .4rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); font-size: .78rem;
  color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.offer-files__file:hover { background: var(--color-bg); }
.offer-files__icon { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.offer-files__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [INQUIRY-UPLOADS] Vom NU/Händler mitgeschickte Dateien — Download-Links auf der Vorauswahl. */
.inquiry-uploads { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.inquiry-uploads__file { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%;
  padding: .15rem .45rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px;
  background: var(--color-surface, #fff); color: var(--color-text, var(--color-text-secondary));
  font-size: .75rem; line-height: 1.3; text-decoration: none; }
.inquiry-uploads__file:hover { border-color: var(--color-primary, var(--color-accent-blue)); color: var(--color-primary, var(--color-accent-blue)); }
.inquiry-uploads__icon { font-size: 1.05em; flex: 0 0 auto; color: var(--color-text-muted, var(--color-text-soft)); }
.inquiry-uploads__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
/* [MATERIAL] Datei-Block auf der Partner-Karte — deutlich sichtbar unter dem
   Status (eigene Zeile via flex-basis 100%). Grün = Summe ausgelesen,
   Orange = manuelle Prüfung/Übernahme nötig; Summe steht unter den Dateien. */
.inquiry-files { flex-basis: 100%; margin-top: .5rem; padding: .6rem .75rem;
  border: 1px solid; border-radius: 8px; }
/* [MANUELLER UPLOAD] Angebot selbst hinterlegen — eine Zeile unter dem Status,
   Summenfeld + Speichern erscheinen erst nach der Dateiwahl. */
.inquiry-offer-upload { flex-basis: 100%; display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-top: .5rem; }
.inquiry-offer-upload__pick { cursor: pointer; margin: 0; }
.inquiry-offer-upload__rest { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.inquiry-offer-upload__rest[hidden] { display: none; }
.inquiry-offer-upload__name { color: var(--color-text-muted, var(--color-text-soft));
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-offer-upload__sum { width: 11ch; }
.inquiry-files--read  { background: #f0fdf4; border-color: #bbf7d0; }
.inquiry-files--check { background: #fff7ed; border-color: #fed7aa; }
.inquiry-files__head { display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-muted, var(--color-text-soft)); margin-bottom: .4rem; }
.inquiry-files__head .material-symbols-outlined { font-size: 1rem; }
.inquiry-files__list { display: flex; flex-wrap: wrap; gap: .35rem; }
.inquiry-files__file { max-width: 100%; background: var(--color-surface, #fff); }
.inquiry-files__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.inquiry-files__sum { display: flex; align-items: center; gap: .35rem; margin-top: .45rem;
  font-size: var(--font-size-sm); font-weight: 600; }
.inquiry-files--read  .inquiry-files__sum { color: #15803d; }
.inquiry-files--check .inquiry-files__sum { color: #b45309; }
.inquiry-files__sum .material-symbols-outlined { font-size: 1.1rem; }
.shortlist-detail-uploads { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .4rem .6rem; }
.shortlist-detail-uploads__label { font-size: .72rem; font-weight: 600; color: var(--color-text-muted, var(--color-text-soft));
  text-transform: uppercase; letter-spacing: .03em; }

/* ── Eingebettete Company-Zugangsdaten in der Firmen-Liste ─────────────────
   Klappt als volle Zeile unter der jeweiligen Firma auf; nutzt die bestehende
   .credential-row-Optik aus der Standalone-Credentials-Seite. */
.cred-embed-row > td { background: var(--color-surface-alt, #f8fafc); padding: 0; }
.cred-embed { padding: 1rem 1.25rem 1.25rem; border-left: 3px solid var(--color-primary, var(--color-accent-blue)); }
.cred-embed__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cred-embed__head .material-symbols-outlined { color: var(--color-primary, var(--color-accent-blue)); }
.cred-embed__actions { display: flex; justify-content: flex-end; margin-top: .75rem; }

/* [MATERIAL-AUSF-FLAGS Phase 1 · superuser-only · leicht entfernbar]
   Pro-Position Material/Ausführung-Checkboxen im Kalkulations-Edit. */
.item-scope-flags { display: flex; gap: .85rem; margin-top: .4rem; flex-wrap: wrap; }
.item-scope-flags__opt { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-sm); color: var(--color-text-muted); cursor: pointer; }
.item-scope-flags__opt .material-symbols-outlined { font-size: 1.05em; }
.item-scope-flags__opt input { margin: 0; }

/* [DUP-CHECK · KI-Dubletten-Prüfung · superuser-only · leicht entfernbar]
   Ergebnis-Panel ganz oben + Sprung-Highlight auf der getroffenen Position. */
.dup-check { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--color-warning, #d97706) 45%, var(--color-border)); border-left: 4px solid var(--color-warning, #d97706); background: rgba(217,119,6,.06); }
.dup-check__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.dup-check__head .material-symbols-outlined { color: var(--color-warning, #d97706); }
.dup-check__close { margin-left: auto; border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); padding: 2px 9px; border-radius: 6px; transition: background var(--transition, .15s ease); }
.dup-check__close:hover { background: rgba(0,0,0,.07); color: var(--color-text); }
/* „Keine Doppler gefunden" → Erfolgs-Optik: leicht grün statt Warn-Orange. */
.dup-check--ok { border-color: color-mix(in srgb, var(--color-success, #16a34a) 45%, var(--color-border)); border-left-color: var(--color-success, #16a34a); background: rgba(22,163,74,.06); }
.dup-check--ok .dup-check__head .material-symbols-outlined { color: var(--color-success, #16a34a); }
.dup-check__hint, .dup-check__empty { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: .5rem; }
.dup-check__group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem 0; border-top: 1px dashed var(--color-border); }
.dup-check__item { display: inline-flex; align-items: baseline; gap: .35rem; padding: .15rem .4rem; border-radius: 5px; background: #fff; border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); font-size: var(--font-size-sm); }
.dup-check__item:hover { border-color: var(--color-warning, #d97706); }
.dup-check__pos { font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 700; }
.dup-check__sep { color: var(--color-warning, #d97706); font-weight: 700; }
.item-row--dup-flash > td { animation: dupFlash 2.4s ease-out; }
@keyframes dupFlash { 0%,40% { background: rgba(217,119,6,.22); } 100% { background: transparent; } }

/* [ITEMS-FILTER] Live-Suche-Leiste über der Positionstabelle (Kalkulation bearbeiten) */
.items-filter { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.items-filter__icon { color: var(--color-text-muted, var(--color-text-soft)); font-size: var(--icon-size); flex: 0 0 auto; }
.items-filter__input { flex: 1 1 auto; min-width: 0; }
.items-filter__count { flex: 0 0 auto; font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, var(--color-text-soft)); white-space: nowrap; }
.items-filter__clear { flex: 0 0 auto; }
.items-filter__select { flex: 0 0 auto; width: auto; max-width: 13rem; }

/* [AI-POPUP] Status-Popup während einer KI-Aktion (KI: Material/Ausführung, Dubletten).
   Nutzt das Layout des System-Admin-Hinweises (bl-modal + .master-notice__body).
   „Arbeitet"-Zustand zeigt einen CSS-Spinner (Icon-Font ist subsettet); Ergebnis die
   vorhandenen Icons check_circle / error. Schließt nach Erfolg automatisch. */
.ai-popup__brand { vertical-align: middle; color: #c026d3; margin-right: .15rem; }  /* KI-Magenta */
.ai-popup__spinner { flex: none; width: 56px; height: 56px; border: 4px solid var(--color-border, #e5e7eb); border-top-color: #c026d3; border-radius: 50%; animation: aiPopupSpin .8s linear infinite; }
@keyframes aiPopupSpin { to { transform: rotate(360deg); } }
.ai-popup__icon { flex: none; font-size: 56px; line-height: 1; }
.ai-popup[data-state="working"] .ai-popup__icon { display: none; }
.ai-popup:not([data-state="working"]) .ai-popup__spinner { display: none; }
.ai-popup[data-state="done"]  .ai-popup__icon { color: var(--color-success, #16a34a); }
.ai-popup[data-state="error"] .ai-popup__icon { color: var(--color-error, #dc2626); }

/* [KI-BUTTONS] KI-Aktions-Buttons: immer Magenta-Hintergrund (+ Roboter-Icon im Markup). */
.btn--ai { background: #c026d3; border-color: #c026d3; color: #fff; }
.btn--ai:hover { background: #a21caf; border-color: #a21caf; color: #fff; }
.btn--ai:disabled, .btn--ai[disabled] { background: #c026d3; border-color: #c026d3; color: #fff; opacity: .6; }

/* [SUPERUSER-BUTTONS] Superuser-Aktionen: Lila/Violett, klar abgesetzt von normalen Buttons. */
.btn--superuser { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.btn--superuser:hover { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.btn--superuser:disabled, .btn--superuser[disabled] { background: #7c3aed; border-color: #7c3aed; color: #fff; opacity: .5; }

/* [LV-DESC] Projekt-/LV-Beschreibung einklappbar (standardmäßig zu). */
.calc-description-edit__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text); user-select: none; }
.calc-description-edit__summary::-webkit-details-marker { display: none; }
.calc-description-edit__chevron { font-size: var(--font-size-xl); color: var(--color-text-muted); transition: transform var(--transition); }
.calc-description-edit[open] .calc-description-edit__chevron { transform: rotate(180deg); }
.calc-description-edit[open] textarea { margin-top: var(--space-3); }

/* [URKALKULATION] GAEB-Überschriften-Zeile in der read-only Positionstabelle (keine echte Position). */
.urkalk-row-heading > td { background: var(--color-surface-alt, #f1f5f9); font-weight: 700; border-top: 2px solid var(--color-border, #e5e7eb); }
.urkalk-row-heading .material-symbols-outlined { color: var(--color-text-muted, var(--color-text-soft)); }
.urkalk-row-heading .btn--icon { padding: .15rem .25rem; } /* Gruppen-Aktionen (Einklappen/Bearbeiten) kompakt */
.urkalk-collapsed { display: none !important; } /* eingeklappte Gruppen-Zeilen — schlägt das Filter-inline-display */
.urkalk-steplabel { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; cursor: pointer; }
.urkalk-steplabel input { margin: 0; flex: 0 0 auto; }
/* Positionen sortieren: Ziehgriff in der POS-Spalte. */
.urkalk-pos-cell { white-space: nowrap; }
.urkalk-sort-handle { cursor: grab; color: var(--color-text-muted, var(--color-text-soft)); font-size: 18px; vertical-align: middle; margin-right: .15rem; opacity: .5; }
.urkalk-sort-handle:hover { opacity: 1; }
.urkalk-sort-handle:active { cursor: grabbing; }
tr.is-sorting { opacity: .45; }
/* Aufmaß-Popup: Tabelle mit Beschreibung · Formel · Ergebnis · Einheit. */
.urkalk-aufmass.urkalk-calc-table td { vertical-align: middle; } /* schlägt .urkalk-calc-table td{top} → Ergebnis & Felder vertikal mittig */
.urkalk-aufmass .form-input, .urkalk-aufmass .form-select { width: 100%; }
.urkalk-aufmass .af-result { font-variant-numeric: tabular-nums; }
#urkalk-aufmass-add { margin-top: .85rem; } /* Abstand zwischen Zeilen-Tabelle und „Zeile hinzufügen" */
#urkalk-aufmass-modal.is-fullscreen { padding: 0; }
#urkalk-aufmass-modal.is-fullscreen .bl-modal__dialog,
#urkalk-priceadjust-modal.is-fullscreen .bl-modal__dialog {
  max-width: 100% !important; width: 100% !important;
  height: 100vh !important; max-height: 100vh !important; border-radius: 0;
}
#urkalk-priceadjust-modal.is-fullscreen { padding: 0; }
/* „mehr lesen" für lange Positions-Beschreibungen — eigener Button-Absatz unter dem Text. */
.urkalk-desc__toggle { margin-top: .45rem; }
/* Aufmaß-Zeilen unter der Positions-Beschreibung. */
.urkalk-aufmass-list { margin-top: 10px; }
.urkalk-aufmass-list__label { display: block; font-size: .78em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted, var(--color-text-soft)); }
.urkalk-aufmass-list__item { display: block; }

/* [URKALKULATION] Aktions-Spalte je Position: Kalkulation-Button + Aktionen-Dropdown. */
.urkalk-actions { white-space: nowrap; text-align: right; }
/* Kalkulation-Button oben, Aktionen-Dropdown darunter — als Spalte gestapelt.
   align-items:stretch (Default) macht beide gleich breit. */
.urkalk-actions__stack { display: inline-flex; flex-direction: column; gap: var(--space-1, .25rem); }
.urkalk-actions__menu { position: relative; }
.urkalk-actions__trigger { width: 100%; }
/* Liste: position:fixed (Koordinaten per JS) → wird von .card overflow:hidden NICHT gekappt. */
.urkalk-actions__list {
  position: fixed; z-index: 1000; min-width: 184px;
  display: none; flex-direction: column; gap: 2px; padding: 4px; text-align: left;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 6px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.urkalk-actions__menu.is-open .urkalk-actions__list { display: flex; }
.urkalk-actions__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--font-size-sm, 14px); color: var(--color-text);
  text-align: left; border-radius: var(--radius-sm, 4px); white-space: nowrap;
}
.urkalk-actions__item:hover { background: var(--color-bg, #f8fafc); }
.urkalk-actions__item .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.urkalk-actions__item--danger { color: var(--color-error, #dc2626); }
.urkalk-actions__item--danger:hover { background: rgba(220, 38, 38, .08); }

/* [URKALKULATION] Kalkulations-Popup: Kostenzeilen-Tabelle + Material-/Geräte-Suche. */
.urkalk-calc-table th, .urkalk-calc-table td { vertical-align: top; padding: 6px 8px; }
/* Drag-&-Drop-Sortierung: Griff ganz links je Zeile. */
.urkalk-calc__drag { width: 1%; text-align: center; vertical-align: middle !important; padding-left: 4px !important; padding-right: 0 !important; }
.urkalk-calc__draghandle { cursor: grab; color: var(--color-text-muted); font-size: 18px; user-select: none; line-height: 1; }
.urkalk-calc__draghandle:hover { color: var(--color-text); }
.urkalk-calc__draghandle:active { cursor: grabbing; }
.urkalk-calc-row.is-dragging { opacity: .45; }
/* Auch gesperrte Zeilen (gewähltes Material/Gerät) bleiben per Griff sortierbar. */
/* Lohn-Zeile: Auswahl-Dropdown + Tätigkeits-Textfeld nebeneinander. */
.urkalk-calc__lohnrow { display: flex; gap: .4rem; align-items: center; }
.urkalk-calc__lohnrow[hidden] { display: none; } /* display:flex überschreibt sonst das [hidden]-Attribut */
.urkalk-calc__lohnrow .urkalk-calc__lohnsel { flex: 0 0 auto; max-width: 55%; }
.urkalk-calc__lohntext { flex: 1 1 auto; min-width: 0; }
/* Footer-Markierungen (Position markieren + Alternative zu) als eigene volle Zeile,
   Aktionen darunter — „Alternative zu" wächst so in die freie Breite. */
.urkalk-calc__foot { flex-wrap: wrap; }
.urkalk-calc__marks { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex: 1 1 100%; }
.urkalk-calc__mark { display: flex; align-items: center; gap: .5rem; }
.urkalk-calc__alt { align-items: center; gap: .5rem; flex: 1 1 280px; min-width: 0; }
.urkalk-calc__alt .ss-wrapper { min-width: 0; }
.urkalk-calc__footactions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.urkalk-calc-table .form-input, .urkalk-calc-table .form-select { padding: 5px 8px; font-size: var(--font-size-sm); width: 100%; }
.urkalk-calc__add { color: var(--color-success, #16a34a); }
.urkalk-calc__add + .urkalk-calc__add { margin-left: var(--space-2, .5rem); }
/* Gesperrte Felder (z. B. Fremd: Menge/Einheit fix) dezent grau — wie eingerastete Auswahl. */
.urkalk-calc-table .form-input:disabled, .urkalk-calc-table .form-select:disabled {
  background: var(--color-bg, #f1f5f9); color: var(--color-text); -webkit-text-fill-color: var(--color-text);
  opacity: 1; cursor: not-allowed;
}
/* Kalkulations-ID-Chip im Popup-Header (Positions-ID, klickbar = kopieren). */
.urkalk-calc__head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.urkalk-calc__id {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%;
  padding: 2px 9px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px;
  background: var(--color-bg, #f8fafc); color: var(--color-text-secondary, var(--color-text-soft));
  font-size: var(--font-size-xs, 12px); cursor: pointer;
  transition: border-color var(--transition, .15s ease), color var(--transition, .15s ease);
}
.urkalk-calc__id[hidden] { display: none; }
.urkalk-calc__id:hover { border-color: var(--color-primary, var(--color-accent-blue)); color: var(--color-text); }
.urkalk-calc__id-label { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.urkalk-calc__id code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: var(--font-size-xs, 12px); overflow: hidden; text-overflow: ellipsis; }
.urkalk-calc__id-icon { font-size: 15px; flex: 0 0 auto; }
/* SZ-Dropdown (Standard/Eigener/Kein), Zuschlag-%-Spalte, eigener Zuschlag (unter der Auswahl) + KP-Spalte. */
.urkalk-calc__zuschlag { color: var(--color-text-secondary); white-space: nowrap; }
.urkalk-calc__ownz { display: flex; align-items: center; gap: .35rem; margin-top: 4px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.urkalk-calc__ownz[hidden] { display: none; }
.urkalk-calc__ownz .form-input { width: 72px; text-align: right; padding: 4px 6px; flex: 0 0 auto; }
.urkalk-calc__kp { font-weight: 600; color: var(--color-text); }
.urkalk-calc__pick { position: relative; }
.urkalk-calc__results {
  /* position:fixed (Koordinaten per JS) → wird vom modal-body-overflow NICHT abgeschnitten. */
  position: fixed; z-index: 1000;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 6px); box-shadow: 0 6px 18px rgba(0,0,0,.14);
  max-height: 240px; overflow-y: auto;
}
.urkalk-calc__result { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  border: none; background: none; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.urkalk-calc__result:last-child { border-bottom: none; }
.urkalk-calc__result:hover { background: var(--color-bg, #f8fafc); }
.urkalk-calc__result-label { font-size: var(--font-size-sm); color: var(--color-text); }
.urkalk-calc__result-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.urkalk-calc__noresult { padding: 8px 10px; font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* Auswahl-Zelle: Eingabefeld + Icons (X / Lupe) in einer Reihe. */
.urkalk-calc__pick { display: flex; align-items: center; gap: 4px; position: relative; }
/* Mengen-Zelle: Minuten-Rechner-Icon (nur Lohn) liegt IM Feld (rechts) —
   darf die schmale 90px-Spalte nicht verbreitern. */
.urkalk-calc__mengewrap { position: relative; }
.urkalk-calc__mengewrap--min .form-input { padding-right: 24px; }
.urkalk-calc__minbtn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--color-text-secondary, var(--color-text-soft));
}
.urkalk-calc__minbtn:hover { background: var(--color-bg, #f8fafc); color: var(--color-primary); }
.urkalk-calc__minbtn[hidden] { display: none; }
.urkalk-calc__minbtn .material-symbols-outlined { font-size: 16px; }
.urkalk-calc__pick[hidden] { display: none; }
.urkalk-calc__lohnsel[hidden] { display: none; }
.urkalk-calc__pick .form-input { flex: 1 1 auto; width: auto; min-width: 0; }
.urkalk-calc__iconbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 6px);
  background: var(--color-surface, #fff); color: var(--color-text-secondary, var(--color-text-soft));
}
.urkalk-calc__iconbtn[hidden] { display: none; }
.urkalk-calc__iconbtn:hover { background: var(--color-bg, #f8fafc); color: var(--color-text); }
.urkalk-calc__iconbtn .material-symbols-outlined { font-size: 18px; }
.urkalk-calc__clear:hover { color: var(--color-error, #dc2626); border-color: var(--color-error, #dc2626); }
/* Eingerastete (gesperrte) Auswahl sichtbar machen. */
.urkalk-calc-row.is-locked .form-input:disabled,
.urkalk-calc-row.is-locked .form-select:disabled { background: var(--color-bg, #f1f5f9); color: var(--color-text); -webkit-text-fill-color: var(--color-text); opacity: 1; cursor: not-allowed; }
.urkalk-calc-row.is-locked .urkalk-calc__bez { font-weight: 600; }

/* Liste ⇄ Detailsuche im selben Popup: ausgeblendete Ansicht wirklich verbergen
   (schlägt das .modal-footer{display:flex}, das das [hidden]-Attribut sonst aushebelt). */
#urkalk-calc-modal [data-calc-view][hidden] { display: none; }

/* [URKALKULATION] Detailsuche-Overlay: Quelle/Katalog/Suchfeld + Treffer-Liste. */
.urkalk-detail__bar { display: flex; gap: var(--space-2, .5rem); align-items: center; margin-bottom: var(--space-3, .75rem); }
.urkalk-detail__bar .form-select { flex: 0 0 auto; width: auto; max-width: 16rem; }
.urkalk-detail__bar .form-input { flex: 1 1 auto; min-width: 0; }
.urkalk-detail__results { display: flex; flex-direction: column; gap: 4px; }
/* Gruppen-Überschrift (Rubrik) in der „+ Stammdaten"-Trefferliste. */
.urkalk-detail__group { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .03em; margin: .55rem 0 .1rem; }
.urkalk-detail__group:first-child { margin-top: 0; }
.urkalk-detail__result {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 6px);
  background: var(--color-surface, #fff); padding: 8px 12px;
}
.urkalk-detail__result:hover { background: var(--color-bg, #f8fafc); border-color: var(--color-primary, var(--color-accent-blue)); }
.urkalk-detail__result-label { font-size: var(--font-size-sm); color: var(--color-text); font-weight: 600; }
.urkalk-detail__result-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* [URKALKULATION] Standard-Zuschläge-Leiste (oben) + Preis-Spalte je Position. */
.urkalk-zuschlag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, .75rem);
  padding: .6rem .9rem; border-bottom: 1px solid var(--color-border, #e5e7eb); background: var(--color-surface-alt, #f8fafc); }
.urkalk-zuschlag__label { font-weight: 600; font-size: var(--font-size-sm); }
.urkalk-zuschlag__field { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.urkalk-zuschlag__field .form-input { width: 64px; text-align: right; padding: 5px 8px; }
/* Kalkulation-Typ: fett + genug Raum, damit „Kalkulation-Typ" nicht umbricht. */
.urkalk-zuschlag__field--type { flex-shrink: 0; }
.urkalk-zuschlag__type-label { font-weight: 700; white-space: nowrap; color: var(--color-text-primary, #111827); }
.urkalk-zuschlag__status { font-size: var(--font-size-sm); color: var(--color-success, #16a34a); }
.urkalk-zuschlag__sep { width: 1px; align-self: stretch; background: var(--color-border, #e5e7eb); margin: 0 .25rem; }
.urkalk-price__line { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; }
/* Gesamt: nur fett, ohne Trennstrich (Bold reicht zur Abgrenzung). */
.urkalk-price__total { font-weight: 700; color: var(--color-text); margin-top: 2px; }
/* Gesamt Total (= Menge × Gesamt): Positions-Summe, mit feinem Trennstrich abgesetzt. */
.urkalk-price__total--grand { border-top: 1px solid var(--color-border, #e5e7eb); margin-top: 3px; padding-top: 3px; }

/* [RICH-TEXT] Gerenderte Beschreibung (Quill-HTML) in Tabellenzellen kompakt halten. */
/* Netz gegen unbrechbare Inhalte (NBSP-Ketten, lange URLs): Beschreibungen dürfen
   notfalls IM Wort brechen, statt die Tabelle über den Viewport zu sprengen. */
.urkalk-richtext { overflow-wrap: anywhere; }
.urkalk-richtext p { margin: 0 0 .25rem; }
.urkalk-richtext p:last-child { margin-bottom: 0; }
.urkalk-richtext ul, .urkalk-richtext ol { margin: .15rem 0 .25rem; padding-left: 1.25rem; }

/* [LEISTUNGEN] Hierarchische Listengruppen (verschachtelte Rubriken). */
.leistung-tree__group { background: var(--color-surface-2, #f8fafc); cursor: pointer; }
.leistung-tree__group:hover { background: var(--color-bg, #f1f5f9); }
.leistung-tree__group td { font-weight: 600; color: var(--color-text); }
.leistung-tree__icon { font-size: 18px; vertical-align: middle; margin-right: .35rem; color: var(--color-text-secondary); }
.leistung-tree__chevron { font-size: 18px; vertical-align: middle; margin-right: .2rem; color: var(--color-text-secondary); }
.leistung-tree__name { vertical-align: middle; }
.leistung-tree__count { margin-left: .5rem; }
/* [EINKLAPPEN] Zeile unter zugeklappter Rubrik — Klasse statt style.display, damit die Live-Suche nicht kollidiert. */
tr.leistung-tree__row--hidden { display: none; }
/* [FAVORITEN] Stern-Toggle in Listen: grau → gold, gefüllt wenn markiert. */
.fav-star { background: none; border: 0; padding: .1rem; margin-right: .25rem; cursor: pointer; vertical-align: middle; line-height: 1; color: var(--color-text-muted, #9ca3af); }
.fav-star .material-symbols-outlined { font-size: 20px; vertical-align: middle; transition: color .12s ease; }
.fav-star:hover { color: #f59e0b; }
.fav-star.is-fav { color: #f59e0b; }
.fav-star.is-fav .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* [REIHENFOLGE] Drag-Handle je Leistung — Reihenfolge = Arbeitsschritte auf dem Dach. */
.leistung-tree__draghandle { font-size: 18px; vertical-align: middle; margin-right: .25rem; color: var(--color-text-muted, #9ca3af); cursor: grab; }
.leistung-tree__draghandle:active { cursor: grabbing; }
tr.is-sorting { opacity: .5; }

/* [AUFMASS] Formel-Beispiele — volle Breite, IMMER Block 1 | Block 2 nebeneinander,
   Spalten so breit wie ihr Inhalt: KEINE Zeilenumbrüche in den Zellen. */
.urkalk-aufmass-help { margin-top: 1rem; padding: .7rem .9rem; background: var(--color-surface-2, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-sm); width: 100%; }
.urkalk-aufmass-help__cols { display: flex; gap: 3.5rem; flex-wrap: nowrap; align-items: flex-start; overflow-x: auto; }
.urkalk-aufmass-help__cols .urkalk-aufmass-help__table { flex: 0 0 auto; }
.urkalk-aufmass-help__table td { padding: .12rem .9rem .12rem 0; vertical-align: middle; white-space: nowrap; }
.urkalk-aufmass-help__table code { background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 4px; padding: 0 .35rem; }

/* [URKALKULATION] Undo-Löschen einer Position: Zeile ausgegraut, „Wiederherstellen" mittig. */
#urkalk-items tr.is-deleting { position: relative; }
#urkalk-items tr.is-deleting > td { color: var(--color-text-secondary, #9ca3af); }
#urkalk-items tr.is-deleting .btn,
#urkalk-items tr.is-deleting a,
#urkalk-items tr.is-deleting .urkalk-actions__menu { opacity: .4; pointer-events: none; }
.urkalk-row__restore {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; opacity: 1 !important; pointer-events: auto !important; white-space: nowrap;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .15));
}

/* [URKALKULATION] Preis-Zusammenfassung unten (alle Positionen). */
.urkalk-summary__title { margin: 0 0 var(--space-3, .75rem); }
.urkalk-summary__body { width: 100%; overflow-x: auto; }
.urkalk-summary__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.urkalk-summary__table thead th {
  background: #f9fafb;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.urkalk-summary__table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.urkalk-summary__table tbody tr:last-child td { border-bottom: 0; }
/* Zahlenspalten rechtsbündig — auch im Kopf (schlägt die thead-th-Regel per Spezifität). */
.urkalk-summary__num,
.urkalk-summary__table th.urkalk-summary__num { text-align: right; white-space: nowrap; }
/* Art-Gruppenkopf innerhalb der Tabelle. */
.urkalk-summary__group td {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-secondary, var(--color-text-soft));
  background: var(--color-gray-100);
  padding-top: 9px;
}
.urkalk-summary__item td:first-child { padding-left: 20px; }
.urkalk-summary__subtotal td {
  font-weight: 600;
  background: color-mix(in srgb, var(--color-border, #e5e7eb) 18%, #fff);
}
.urkalk-summary__row--total td { font-weight: 700; background: #eef2ff; border-top: 2px solid var(--color-border, #e5e7eb); }
/* Netto-Gesamt + wählbare Steuer = Endpreis (brutto) — rechtsbündiger Abschluss-Block. */
.urkalk-summary__totals { margin-top: var(--space-3, .75rem); margin-left: auto; max-width: 420px; }
.urkalk-summary__totrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.urkalk-summary__totrow[hidden] { display: none; } /* [hidden] muss display:flex schlagen */
.urkalk-summary__totlabel { display: flex; align-items: center; gap: .5rem; color: var(--color-text-secondary, #4b5563); }
.urkalk-summary__totval { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.urkalk-summary__tax { width: auto; min-width: 5rem; padding-top: 2px; padding-bottom: 2px; }


.urkalk-summary__totrow--grand { border-top: 2px solid var(--color-border, #e5e7eb); margin-top: .25rem; padding-top: .6rem; font-size: 1.05em; }
.urkalk-summary__totrow--grand .urkalk-summary__totlabel { color: var(--color-text); font-weight: 700; }
.urkalk-summary__totrow--grand .urkalk-summary__totval { font-weight: 800; }
.urkalk-summary__totactions { margin-top: .6rem; display: flex; justify-content: flex-end; }
/* read-only „Zusatz"-Zeile in der Preis-Spalte (künstliche Preisanpassung). */
.urkalk-price__zusatz span { color: var(--color-primary, var(--color-accent-blue)); font-style: italic; }
/* „Preis anpassen"-Popup. */
.urkalk-pa__head { display: flex; gap: 1rem; margin-bottom: 1rem; }
.urkalk-pa__cell { flex: 1 1 0; display: flex; flex-direction: column; gap: .25rem; background: var(--color-bg, #f8fafc); border-radius: var(--radius-md, 8px); padding: .65rem .85rem; }
.urkalk-pa__label { font-size: .85em; color: var(--color-text-muted, var(--color-text-soft)); }
.urkalk-pa__ro { font-variant-numeric: tabular-nums; }
.urkalk-pa__head .urkalk-pa__ro { font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.urkalk-pa__box { background: var(--color-bg, #f8fafc); border-radius: var(--radius-md, 8px); padding: .75rem 1rem; margin-top: 1rem; }
.urkalk-pa__section { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 8px); }
.urkalk-pa__sectitle { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted, var(--color-text-soft)); margin-bottom: .5rem; }
.urkalk-pa__row--grand { border-top: 2px solid var(--color-border, #e5e7eb); margin-top: .25rem; padding-top: .55rem; font-size: 1.05em; }
.urkalk-pa__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.urkalk-pa__row[hidden] { display: none; } /* [hidden] muss display:flex schlagen */
.urkalk-pa__rowlabel { color: var(--color-text-secondary, #4b5563); }
.urkalk-pa__input { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; padding-top: 4px; padding-bottom: 4px; }
.urkalk-pa__inwrap { display: flex; gap: .4rem; align-items: center; }
.urkalk-pa__unit { width: auto; min-width: 3.4rem; padding-top: 4px; padding-bottom: 4px; }
.urkalk-pa__clear { appearance: none; border: 0; background: none; cursor: pointer; color: var(--color-text-muted, var(--color-text-soft)); display: inline-flex; align-items: center; padding: .15rem; border-radius: 6px; }
.urkalk-pa__clear:hover { background: var(--color-bg, #f1f5f9); color: var(--color-text); }
.urkalk-pa__clear .material-symbols-outlined { font-size: 18px; }


.urkalk-pa__moderow { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; }
.urkalk-pa__moderadio { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.urkalk-pa__moderadio input { margin: 0; }
.urkalk-pa__toggle { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; cursor: pointer; }
.urkalk-pa__badge { margin-left: auto; background: var(--color-text, #1f2937); color: #fff; border-radius: 999px; padding: .2rem .7rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.urkalk-pa__poslist { margin-top: .5rem; max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-sm, 6px); }
.urkalk-pa__pos { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-bottom: 1px solid var(--color-border, #e5e7eb); cursor: pointer; }
.urkalk-pa__pos:last-child { border-bottom: 0; }
.urkalk-pa__posname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urkalk-pa__posnet { font-variant-numeric: tabular-nums; color: var(--color-text-muted, var(--color-text-soft)); }
/* wirksamer Zuschlag % hinter dem Aufschlag-Betrag — gedämpft. */
.urkalk-summary__pct { color: var(--color-text-muted, var(--color-text-soft)); font-weight: 400; }
/* Kalkuliert: Zeile ganz leicht grün, Button „abgehakt“ (grün gefüllt). */
.urkalk-row-calc-done > td { background: rgba(22, 163, 74, .06); }
.js-urkalk-calc.is-done { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.js-urkalk-calc.is-done:hover { background: #15803d; border-color: #15803d; }
.js-urkalk-calc.is-done .material-symbols-outlined { color: #fff; }

/* ── Angebot-Detail-Popup (Kalkulation-Show: Name + Angebot klickbar) ──────── */
[data-offer-item] .item-desc-summary { cursor: pointer; }
[data-offer-item] .item-desc-summary:hover { color: var(--color-primary, var(--color-accent-blue)); text-decoration: underline; }
[data-offer-item] .offer-pill { cursor: pointer; transition: box-shadow .12s ease; }
[data-offer-item] .offer-pill:hover { box-shadow: 0 0 0 2px var(--color-primary, var(--color-accent-blue)) inset; }
button.group-row__name.calc-offer-trigger {
  appearance: none; border: 0; background: none; font: inherit; color: inherit;
  padding: 0; cursor: pointer; text-align: left;
}
button.group-row__name.calc-offer-trigger:hover { color: var(--color-primary, var(--color-accent-blue)); text-decoration: underline; }

.offerpop {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: flex-start; justify-content: center;
  padding: 4rem 1rem 1rem; background: rgba(15, 23, 42, .45); overflow-y: auto;
}
.offerpop[hidden] { display: none; }
.offerpop__box {
  background: var(--color-surface, #fff); border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25); width: min(640px, 100%);
  max-height: calc(100vh - 5rem); display: flex; flex-direction: column;
}
.offerpop__head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.offerpop__title { margin: 0; flex: 1; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.offerpop__close {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--color-text-muted, var(--color-text-soft)); display: inline-flex; padding: .25rem; border-radius: 6px;
}
.offerpop__close:hover { background: var(--color-bg, #f1f5f9); }
.offerpop__body { padding: 1rem 1.25rem; overflow-y: auto; }
.offerpop__item + .offerpop__item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); }
.offerpop__itemname { font-weight: 700; margin-bottom: .5rem; }
.offerpop__pos { color: var(--color-text-muted, var(--color-text-soft)); font-family: ui-monospace, monospace; margin-right: .25rem; }
.offerpop__offer { padding: .6rem .75rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; }
.offerpop__offer + .offerpop__offer { margin-top: .5rem; }
.offerpop__offerhead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.offerpop__oicon { font-size: 18px; color: var(--color-text-muted, var(--color-text-soft)); }
.offerpop__oname { font-weight: 600; }
.offerpop__oprice { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offerpop__offer--best,
.offerpop__offer--cheap  { background: var(--color-success-bg); border-color: #86efac; }
.offerpop__offer--wrong  { background: #ffedd5; border-color: #fdba74; }
.offerpop__mark { display: inline-flex; align-items: center; gap: .15rem; font-size: .8em; font-weight: 600; }
.offerpop__mark .material-symbols-outlined { font-size: 15px; }
.offerpop__mark--cheap { color: var(--color-success); }

.offerpop__meta { margin: .5rem 0 0; display: grid; gap: .25rem; }
.offerpop__metarow { display: flex; gap: .5rem; font-size: .9em; }
.offerpop__metarow dt { flex: 0 0 7.5rem; color: var(--color-text-muted, var(--color-text-soft)); margin: 0; }
.offerpop__metarow dd { margin: 0; overflow-wrap: anywhere; }
.offerpop__metarow--muted { color: var(--color-text-muted, var(--color-text-soft)); font-style: italic; }

/* ── Public-Anfrage: Positions-Extras (Buttons/Editor/Upload) + Status + globaler Bereich ── */
.pos-extras { margin-top: .5rem; }
.pos-extras__buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.pos-extras__btn { display: inline-flex; align-items: center; gap: .25rem; }
.pos-extras__btn .material-symbols-outlined { font-size: 16px; }
.pos-extras__panel { margin-top: .5rem; }
.pos-extras__file { display: block; max-width: 100%; }

.pos-extras__readonly { font-size: var(--font-size-sm, .9rem); }
.file-names { font-size: var(--font-size-xs, .8rem); color: var(--color-text-muted, var(--color-text-soft)); margin-top: .3rem; word-break: break-word; }

.pos-status { display: flex; flex-direction: column; gap: .2rem; margin-top: .45rem; }
.pos-status__opt { display: flex; align-items: center; gap: .4rem; font-size: var(--font-size-xs, .8rem); cursor: pointer; white-space: nowrap; }
.pos-status__opt input { margin: 0; }
.pos-status--ro { margin-top: .45rem; }
.price-input.is-disabled { background: var(--color-bg, #f1f5f9); color: var(--color-text-muted, #9ca3af); }

.public-extra { margin: 1.25rem 0; padding: 1rem 1.25rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 8px); background: var(--color-surface, #fff); }
.public-extra__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.public-extra__title { margin: 0; font-size: 1.05rem; }
.public-extra__hint { font-size: var(--font-size-sm, .9rem); color: var(--color-text-muted, var(--color-text-soft)); margin: 0 0 .6rem; }
.public-extra__upload { margin-top: .75rem; }


/* ── Public-Anfrage: Anhänge im Beschreibungs-Block ── */
.public-attachment-block { margin-top: 20px; }
/* Projektbeschreibungs-/Gruppen-Box: kein pre-wrap (sonst große Einrückung aus GAEB-Text). */
.public-meta-block--flat .public-meta-block__body { white-space: normal; }

/* Public-Anfrage: Upload-Dropzones 3× so hoch (echte Ablagefläche), Inhalt vertikal zentriert. */
.dropzone[data-pub-dropzone] { height: 144px; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .4rem; }
.dropzone[data-pub-dropzone] .dropzone__text { flex: none; align-items: center; } /* nicht vertikal strecken → Icon+Text mittig */
.dropzone[data-pub-dropzone] .dropzone__placeholder { font-size: var(--font-size-base); } /* Hinweistext wie Positions-Beschreibung */

/* Public-Anfrage: Projektbeschreibungs-Box flach (ohne Hintergrund/Padding), Button links,
   Anhänge als Karten in Reihe (Bild oben, Infos darunter). */
.public-meta-block--flat { background: none; border: 0; padding: 0; }
.public-desc__summary--left { justify-content: flex-start; }
/* Partner übersahen den Beschreibungs-Aufklapper („Projektbeschreibung
   anzeigen") — Text so groß wie die Intro-Zeile (.inquiry-intro, 1.3rem).
   Gezielt NUR die --left-Variante der öffentlichen Partner-Seite
   (show-public.php, Projekt- UND Gruppen-Beschreibung); der kompakte
   btn--sm-Toggle in show.php bleibt unverändert. */
.public-desc__summary--left .public-desc__toggle { font-size: 1.3rem; }
.public-desc__summary--left .public-desc__chevron { font-size: 1.5rem; }
.public-attachment-block .public-attachment-list { gap: 12px; }
.public-attachment-block .public-attachment {
  flex-direction: column; align-items: stretch; gap: 6px;
  width: 150px; padding: 8px; text-align: center;
}
.public-attachment-block .public-attachment__thumb,
.public-attachment-block .public-attachment__icon { width: 100%; height: 96px; }
.public-attachment-block .public-attachment__info { align-items: center; }

/* Public-Anfrage: Beschreibungstext 20px oben/unten; Gruppen-Box bündig zum Header (Button klebt sonst am Rand). */
.public-meta-block--flat .public-desc__body { padding-top: 20px; padding-bottom: 20px; }
.public-group .public-meta-block--flat { padding: 20px var(--space-5); }
/* Abstand Button/Beschreibung → Tabellenkopf konsistent (20px), egal ob ein-/ausgeklappt. */
.public-group .public-meta-block--flat .public-desc__body { padding-bottom: 0; }

/* Public-Anfrage: aktive (aufgeklappte) Buttons im MouseOver-Stil; Button-Schrift wie X83 (font-size-sm). */
.pos-extras__btn { font-size: var(--font-size-sm); }
.pos-extras__btn[aria-expanded="true"] { background: var(--color-bg); color: var(--color-text); }
.public-desc[open] > .public-desc__summary .public-desc__toggle { background: var(--color-bg); }

/* Public-Anfrage: Abstand Bild→Button. */
.pos-extras .js-pos-img-panel { margin-bottom: 16px; }

/* [INQUIRY] X84-Zuordnungs-Popup (Upload-Position → unsere Position, Merge/Split). */
.gaeb-map { position: fixed; inset: 0; z-index: var(--z-overlay-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.gaeb-map[hidden] { display: none; }
.gaeb-map__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.gaeb-map__dialog { position: relative; background: var(--color-surface); border-radius: var(--radius-lg, 12px); box-shadow: 0 20px 60px rgba(0,0,0,.3); width: min(880px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.gaeb-map__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.gaeb-map__title { margin: 0; font-size: var(--font-size-lg); }
.gaeb-map__x { border: 0; background: none; cursor: pointer; color: var(--color-text-secondary); display: inline-flex; }
.gaeb-map__x:hover { color: var(--color-text); }
.gaeb-map__intro { margin: 0; padding: var(--space-3) var(--space-5) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.gaeb-map__mode { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); flex-wrap: wrap; }
.gaeb-map__mode-label { font-weight: 600; }
.gaeb-map__mode-opt { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.gaeb-map__body { overflow-y: auto; padding: 0 var(--space-5) var(--space-4); flex: 1 1 auto; }
.gaeb-map__rowhead { display: none; }
.gaeb-map__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
@media (min-width: 720px) { .gaeb-map__row { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-4); } }
.gaeb-map__pos { font-weight: 600; }
.gaeb-map__amt { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.gaeb-map__ctrl { display: flex; flex-direction: column; gap: var(--space-2); }
.gaeb-map__target { width: 100%; }
.gaeb-map__splits { display: flex; flex-direction: column; gap: var(--space-2); }
.gaeb-map__split { display: flex; gap: var(--space-2); align-items: center; }
.gaeb-map__split .gaeb-map__target { flex: 1 1 auto; }
.gaeb-map__amount { width: 120px; text-align: right; }
.gaeb-map__split-del { border: 0; background: none; cursor: pointer; color: var(--color-text-muted); display: inline-flex; }
.gaeb-map__split-del:hover { color: var(--color-danger, #dc2626); }
.gaeb-map__split-foot { display: flex; align-items: center; gap: var(--space-3); }
.gaeb-map__remainder { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.gaeb-map__remainder.is-over { color: var(--color-danger, #dc2626); font-weight: 600; }
.gaeb-map__split-toggle { align-self: flex-start; }
.gaeb-map__empty { padding: var(--space-5) 0; text-align: center; color: var(--color-text-secondary); }
.gaeb-map__foot { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gaeb-map__sum-head { font-weight: 600; margin-bottom: var(--space-1); }
.gaeb-map__sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gaeb-map__sum-list li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); }
.gaeb-map__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* [BAULEITUNG] Projekt-Status-Leiste (Handlung + Eskalation) — segmentierte, farbcodierte Schalter. */
.bauleitung-bar { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); }
.bauleitung-bar__group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bauleitung-bar__label { font-weight: 600; color: var(--color-text-secondary); }
.bauleitung-bar__value { color: var(--color-text); }
.bauleitung-bar__divider { align-self: stretch; width: 1px; min-height: 1.6rem; background: var(--color-border); }
.bauleitung-bar__address { margin-left: auto; }   /* Adresse ans rechte Ende der Leiste */
/* Prozess-Filter ans rechte Ende der Leiste (ersetzt die frühere Adresse). */
.bauleitung-bar__filter { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--color-text-secondary); }
.bauleitung-bar__filter .material-symbols-outlined { font-size: 18px; }
.bl-procfilter__select { min-width: 180px; }
.kanban__card[hidden] { display: none; }
.bauleitung-bar__segs { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.bauleitung-bar__seg { appearance: none; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); padding: .35rem .7rem; font: inherit; font-size: var(--font-size-sm); line-height: 1.2; border-radius: var(--radius-md); }
.bauleitung-bar__seg:hover { background: var(--color-bg); color: var(--color-text); }
/* Aktiver Zustand je Stufe — gefüllt + weiße Schrift. */
.bauleitung-bar__seg--ok.is-active      { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.bauleitung-bar__seg--minor.is-active   { background: #ca8a04; border-color: #ca8a04; color: #fff; }
.bauleitung-bar__seg--krit.is-active    { background: #ea580c; border-color: #ea580c; color: #fff; }
.bauleitung-bar__seg--blocker.is-active { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.bauleitung-bar__seg--warn.is-active    { background: #ea580c; border-color: #ea580c; color: #fff; }
.bauleitung-bar__seg--view.is-active    { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text, #fff); }

/* Eigener Status (Ampel) je Prozess (v93). Projekt-Status oben = read-only Badge (automatisch). */
/* Größe + Stil wie .bauleitung-bar__seg.is-active (gleiche Optik in der Leiste). */
.bl-esc-badge { display: inline-block; border: 1px solid transparent; padding: .35rem .7rem; font-size: var(--font-size-sm); line-height: 1.2; border-radius: var(--radius-md); color: #fff; }
.bl-esc-badge--ok      { background: var(--color-success); border-color: var(--color-success); }
.bl-esc-badge--minor   { background: #f59e0b; border-color: #f59e0b; }
.bl-esc-badge--krit    { background: #ea580c; border-color: #ea580c; }
.bl-esc-badge--blocker { background: #b91c1c; border-color: #b91c1c; }
.bl-esc-auto { margin-left: .35rem; }

/* „Neue Aufgabe"-Popup auf dem Prozess-Board (natives <dialog>, via data-dialog-open). */
.proc-newtask { width: min(440px, 92vw); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg, 12px); padding: 0; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, .25)); margin: auto; }
.proc-newtask::backdrop { background: rgba(0, 0, 0, .4); }
.proc-newtask__form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.proc-newtask__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.proc-newtask__title { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.proc-newtask__close { margin: -6px -6px 0 0; }
.proc-newtask__field { display: flex; flex-direction: column; gap: 4px; }
.proc-newtask__req { color: var(--color-error, #dc2626); }
.proc-newtask__opt { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; }
.proc-newtask__due { display: flex; gap: var(--space-2); }
.proc-newtask__due .form-input { flex: 1 1 auto; min-width: 0; }
.proc-newtask__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Freigabe-Bereich: Prozess-Karten in Prüfung (Tabellen-Zeile: Kommentar + 2 Aktionen). */
.rel-proc-form { display: flex; align-items: center; gap: var(--space-2); }
.rel-proc-form__comment { flex: 1 1 auto; min-width: 0; }
.rel-proc-form__btns { display: flex; gap: var(--space-2); white-space: nowrap; }

/* Prozess-Board: Prüfungsphase — als normale Aufgabe dargestellt; Button rechts in der Zeile, grau.
   Höhere Spezifität, damit der spätere .proc-panel__gate-Basisblock (display:flex) nicht gewinnt. */
.proc-panel__gate.proc-panel__gate--review { display: block; padding: 0; }
/* Text-Einzug wie bei echten Aufgaben angleichen (dort schiebt die Checkbox den Text nach rechts). */
.proc-panel__gate--review .proc-tasks__label { padding-left: calc(var(--space-2) + 18px + .6rem); }
.proc-review-withdraw { margin-left: auto; align-self: center; flex: 0 0 auto; }
.proc-review__withdraw { background: var(--color-text-soft); color: #fff; border-color: var(--color-text-soft); }
.proc-review__withdraw:hover { background: #4b5563; border-color: #4b5563; }

/* Prozess-Board: Banner mit der letzten Freigabe-Entscheidung (bis wieder in Prüfung). */
.proc-review-banner { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-sm, 6px); border: 1px solid; }
.proc-review-banner__icon { flex: 0 0 auto; }
.proc-review-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proc-review-banner__note { font-size: var(--font-size-sm); }
.proc-review-banner__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.proc-review-banner--ok       { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.proc-review-banner--no       { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.proc-review-banner--withdraw { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Status-Auswahl auf dem Prozess-Board: sieht aus wie ein normales Feld-Dropdown (.form-select),
   nur der Hintergrund trägt die Status-Farbe. Weiße Schrift/Pfeil für Lesbarkeit auf der Farbe;
   die aufgeklappte Liste bleibt schwarz auf weiß. Muss NACH .form-select stehen (Kaskade). */
.proc-fields__statussel { color: #fff; border-color: transparent;
  /* Dropdown-Pfeil immer WEISS (auf der farbigen Status-Fläche), nicht der graue Default. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
.proc-fields__statussel option { color: #111; background: #fff; }
/* Border = Hintergrundfarbe (sonst wirkt der graue Default-Rand „dreckig"). */
.proc-fields__statussel--ok      { background-color: var(--color-success); border-color: var(--color-success); }
.proc-fields__statussel--minor   { background-color: #f59e0b; border-color: #f59e0b; }
.proc-fields__statussel--krit    { background-color: #ea580c; border-color: #ea580c; }
.proc-fields__statussel--blocker { background-color: #b91c1c; border-color: #b91c1c; }

/* [BAULEITUNG] Spalten-Board (Jira/Asana-Stil) — feste Status-Spalten, kein Drag&Drop, keine Aufgabenanlage. */
/* Ohne Hintergrund/Box; Spalten füllen die Breite (flex:1) und sind nur durch einen Strich getrennt. */
.kanban { display: flex; gap: 0; align-items: stretch; padding-bottom: var(--space-2); overflow-x: auto; }
.kanban__col { flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); container-type: inline-size; }

.kanban__col + .kanban__col { border-left: 1px solid var(--color-border); }
.kanban__col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.kanban__col-title { font-weight: 600; font-size: var(--font-size-sm); }
.kanban__col-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.kanban__col-body { padding-top: var(--space-3); min-height: 8rem; display: flex; flex-direction: column; gap: var(--space-2); }
.kanban__empty { margin: auto 0; color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }

/* [BAULEITUNG] „Neu"-Dropdown + Aufgaben-Modal + Task-Karten. */
.bl-new { position: relative; }
.bl-new__menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: var(--space-1); display: flex; flex-direction: column; }
.bl-new__menu[hidden] { display: none; }
.bl-new__item { appearance: none; border: 0; background: none; text-align: left; cursor: pointer; padding: .5rem .75rem; border-radius: var(--radius-sm, 6px); font: inherit; color: var(--color-text); }
.bl-new__item:hover { background: var(--color-bg); }
.bl-new__empty { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .75rem; max-width: 260px; }
.bl-new__emptylink { color: var(--color-primary); text-decoration: none; }
.bl-new__emptylink:hover { text-decoration: underline; }

.bl-modal { position: fixed; inset: 0; z-index: var(--z-overlay-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.bl-modal[hidden] { display: none; }
.bl-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.bl-modal__dialog { position: relative; background: var(--color-surface); border-radius: var(--radius-lg, 12px); box-shadow: 0 20px 60px rgba(0,0,0,.3); width: min(520px, 100%); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
.bl-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.bl-modal__title { margin: 0; font-size: var(--font-size-lg); }
.bl-modal__dialog--wide { width: min(1040px, 100%); }
.bl-modal__x { border: 0; background: none; cursor: pointer; color: var(--color-text-secondary); display: inline-flex; }
.bl-modal__headbtns { display: flex; align-items: center; gap: var(--space-1, 4px); }
/* Textbaustein-Popup: mehr Fläche für den Rich-Text + Vollbild-Umschalter
   (Muster: Kalkulations-Popup #urkalk-calc-modal). */
#tb-block-modal .bl-modal__dialog { width: min(1200px, 100%); height: min(84vh, 860px); }
#tb-block-modal .bl-modal__body { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }
#tb-block-modal .bl-modal__body .form-field:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
#tb-block-modal .bl-modal__body .richtext { flex: 1 1 auto; display: flex; flex-direction: column; }
#tb-block-modal .bl-modal__body .richtext .ql-container { flex: 1 1 auto; overflow: auto; }
#tb-block-modal.is-fullscreen { padding: 0; }
#tb-block-modal.is-fullscreen .bl-modal__dialog {
  width: 100%; max-width: none; height: 100vh; max-height: 100vh; border-radius: 0;
}
/* Prozess-Typen-Editor: Kopfzeile der Regeln-Sektion (Titel links, „Leseform"-Button rechts). */


/* Leseform-Popup: WENN/DANN/SONST-Darstellung der Regeln. */
.pt-read { display: flex; flex-direction: column; gap: 1.2rem; max-height: 65vh; overflow: auto; }
.pt-read__rule { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .55rem .75rem; background: var(--color-bg); }
.pt-read__row { display: flex; gap: .6rem; align-items: baseline; }
.pt-read__row + .pt-read__row { margin-top: .35rem; }
.pt-read__kw { flex: 0 0 auto; min-width: 4.6rem; font-weight: 700; font-size: .78rem; letter-spacing: .03em; }
.pt-read__kw--wenn { color: var(--color-primary); }
.pt-read__kw--dann { color: var(--color-success); }
.pt-read__txt { flex: 1 1 auto; }
.pt-read__acts { margin: 0; padding-left: 1.1rem; }
.pt-read__acts li { margin: .1rem 0; }
.pt-read__branch + .pt-read__branch { margin-top: .3rem; }
.pt-read__opt { display: inline-block; font-weight: 600; margin-right: .4rem; }
.pt-read__none { color: var(--color-text-secondary); }
.pt-read__invalid { color: var(--color-error); }
.bl-modal__x:hover { color: var(--color-text); }
.bl-modal__body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.bl-modal__fields:empty { display: none; }
.bl-modal__field { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); }
/* Bulk-Versand-Popup (Anfrage): Empfänger-Auswahl nach Status + Warnhinweise. */
.bulkmail-opt { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.bulkmail-opt + .bulkmail-opt { margin-top: .5rem; }
.bulkmail-opt:hover { background: var(--color-bg); }
.bulkmail-opt input[type="radio"] { margin-top: .2rem; flex: 0 0 auto; }
.bulkmail-opt__text { display: flex; flex-direction: column; gap: 2px; }
.bulkmail-opt--disabled { opacity: .55; cursor: not-allowed; }
.bulkmail-warn { display: flex; align-items: center; gap: .4rem; margin: .75rem 0 0; font-size: var(--font-size-sm); color: #b45309; }
.bulkmail-warn .material-symbols-outlined { font-size: 18px; }
.bulkmail-warn--muted { color: var(--color-text-secondary); }
.bl-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-border); }

.kanban__card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
/* Bereichs-Streifen links auf jeder Karte: vertikales Label (Text aus
   data-scope-label, Farbe je data-card-scope = bauleitung | sharedservice). */
.kanban__card { position: relative; padding-left: calc(var(--space-3) + 24px); }
.kanban__card::before {
  content: attr(data-scope-label);
  position: absolute; left: 0; top: 0; bottom: 0; width: 24px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px);
  background: var(--color-bg); color: var(--color-text-muted);
}
.kanban__card[data-card-scope="bauleitung"]::before    { background: #e0edff; color: #1d4ed8; }
.kanban__card[data-card-scope="sharedservice"]::before { background: #f3e8ff; color: #7e22ce; }
/* Standard-Aufgaben-Karten („+ Aufgaben"-Dropdown): grauer Streifen „Aufgabe Bauleitung" —
   überschreibt die Bereichs-Farbe (Klasse gewinnt über die data-Attribut-Selektoren). */
.kanban__card.kanban__card--stdtask::before { background: var(--color-gray-100); color: #4b5563; }
/* Fälligkeit je Karte (Anlage-Popup): abgelaufen = leicht rot, in < 3 Tagen = leicht orange. */
.kanban__card--due-soon { background: #ffedd5; border-color: #fed7aa; }
.kanban__card--due-now  { background: #fee2e2; border-color: #fecaca; }
.kanban__card-due { display: inline-flex; align-items: center; gap: 4px; }
.kanban__card-due .material-symbols-outlined { font-size: 14px; }
.kanban__card-due--soon { color: #c2410c; font-weight: 600; }
.kanban__card-due--now  { color: #b91c1c; font-weight: 600; }
.kanban__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
/* Typ als deutlicher Chip: Icon + Hintergrund + größere Schrift. */
.kanban__card-type { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; background: var(--color-bg); color: var(--color-text); }
.kanban__card-type .material-symbols-outlined { font-size: 18px; }
.kanban__card-type--handwerker      { background: #e0edff; color: #1d4ed8; }
.kanban__card-type--nachunternehmer { background: #ccfbf1; color: #0f766e; }
.kanban__card-type--nachtrag        { background: #fef3c7; color: #b45309; }
.kanban__card-type--regiearbeiten   { background: #ede9fe; color: #6d28d9; }
.kanban__card-type--abnahme         { background: #dcfce7; color: #15803d; }
.kanban__card-type--abrechnung      { background: #e0e7ff; color: #4338ca; }
/* Statusfarbe (Ampel) als Hintergrund des Typ-Chips — MUSS nach der Basisregel .kanban__card-type
   stehen (gleiche Spezifität → spätere Regel gewinnt), sonst überschreibt das graue Basis-Background. */
.kanban__card-type--esc-ok      { background: var(--color-success); color: #fff; }
.kanban__card-type--esc-minor   { background: #f59e0b; color: #fff; }
.kanban__card-type--esc-krit    { background: #ea580c; color: #fff; }
.kanban__card-type--esc-blocker { background: #b91c1c; color: #fff; }
.kanban__card-tools { display: inline-flex; align-items: center; gap: .15rem; }
.kanban__card-del { margin: 0; line-height: 0; }
.kanban__card-iconbtn { border: 0; background: none; cursor: pointer; color: var(--color-text-muted); display: inline-flex; padding: 2px; border-radius: var(--radius-sm, 6px); }
.kanban__card-iconbtn:hover { color: var(--color-text); background: var(--color-bg); }
.kanban__card-iconbtn--danger:hover { color: var(--color-danger, #dc2626); }
.kanban__card-iconbtn .material-symbols-outlined { font-size: 18px; }
.kanban__card-title { font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); word-break: break-word; }
.kanban__card-meta { display: flex; flex-direction: column; gap: 1px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.kanban__card-phase { display: inline-flex; align-items: center; gap: 4px; }
.kanban__card-phase .material-symbols-outlined { font-size: 14px; }
.kanban__card-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
/* „Anzeigen" sieht standardmäßig aus wie früher sein Hover (weiße Fläche + Rahmen statt Ghost);
   beim Hover wird die Fläche leicht grau. */
.kanban__card-actions .btn--ghost { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.kanban__card-actions .btn--ghost:hover { background: var(--color-bg); border-color: var(--color-border-strong); color: var(--color-text); }
/* ── Responsive Karten: bei schmalen Spalten schrumpfen die Karten mit
     (Container-Query auf der Spaltenbreite) — kompaktere Paddings, kleinere
     Schrift/Icons/Chips und ein schmalerer Bereichs-Streifen statt Umbruch-Chaos. */
@container (max-width: 235px) {
  .kanban__card { padding: var(--space-2); padding-left: calc(var(--space-2) + 18px); gap: 6px; }
  .kanban__card::before { width: 18px; font-size: 9px; letter-spacing: .05em; }
  .kanban__card-type { font-size: var(--font-size-xs); padding: .18rem .45rem; gap: .25rem; }
  .kanban__card-type .material-symbols-outlined { font-size: 14px; }
  .kanban__card-iconbtn .material-symbols-outlined { font-size: 15px; }
  .kanban__card-title { font-size: var(--font-size-sm); }
  .kanban__card-meta { font-size: 10px; }
  .kanban__card-phase .material-symbols-outlined { font-size: 12px; }
  .kanban__card-actions .btn { padding: .2rem .55rem; font-size: var(--font-size-xs); }
}


/* [BAULEITUNG] Adresszeile im Kopf. */
.bl-address { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.bl-address .material-symbols-outlined { font-size: 16px; }

/* ───────────────────────────────────────────────────────────────────────────
   [PROZESS] Phasen-Gate-Board (Phase 1). Nutzt die .kanban-Spalten-Basis;
   eine Karte sitzt in der aktuellen Phase, erledigte Phasen sind abgehakt.
   ─────────────────────────────────────────────────────────────────────────── */
.proc-board__col.is-upcoming { opacity: .55; }
.proc-board__col.is-done .kanban__col-title { color: var(--color-text-muted); }
.proc-board__check { font-size: 18px; color: var(--color-success, #16a34a); }
.proc-board__card {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary, var(--color-accent-blue));
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: 4px;
}
.proc-board__card.is-done { border-left-color: var(--color-success, #16a34a); }
.proc-board__card-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.proc-board__card-icon { font-size: 18px; color: var(--color-primary, var(--color-accent-blue)); flex: 0 0 auto; }
.proc-board__card.is-done .proc-board__card-icon { color: var(--color-success, #16a34a); }
.proc-board__card-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-board__card-meta  { font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* Audit in der Karte: Erstellt + Geändert untereinander (schmale Spalte), je Icon + Datum + Name. */
.proc-board__card-audit { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--color-border); }
.proc-board__card-audit-item { display: flex; align-items: flex-start; gap: 5px; font-size: var(--font-size-xs); color: var(--color-text); }
.proc-board__card-audit-icon { font-size: 15px; color: var(--color-text-muted); flex: 0 0 auto; margin-top: 1px; }
.proc-board__card-audit-val { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.proc-board__card-audit-who { color: var(--color-text-muted); }

/* Panel unter dem Board: Checkliste / Eintritts-Abfrage / Gate. */
/* Großer Hinweis: Abschluss durch einen anderen, noch offenen Prozess blockiert. */
.proc-blocker { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: #fef2f2; color: #991b1b; }
.proc-blocker__icon { font-size: 32px; color: var(--color-danger, #dc2626); flex: 0 0 auto; }
.proc-blocker__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proc-blocker__title { font-size: var(--font-size-lg); }
.proc-panel { border-top: 1px solid var(--color-border); }
.proc-panel__heading { margin: 0 0 var(--space-3); }

/* 50/50: links Aufgaben/Buttons, rechts Kommentare/Log. */
.proc-panel--split { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: var(--space-5, 24px); align-items: start; }
.proc-panel__main { min-width: 0; }
.proc-panel__side { min-width: 0; border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
@media (max-width: 900px) { .proc-panel--split { grid-template-columns: 1fr; } .proc-panel__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-3); } }

/* Tabs */
.proc-tabs__nav { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.proc-tabs__btn { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); cursor: pointer; }
.proc-tabs__btn.is-active { color: var(--color-text); border-bottom-color: var(--color-primary, var(--color-accent-blue)); font-weight: 600; }
.proc-tabs__panel.is-hidden { display: none; }

/* Kommentar-Formular + Liste */
.proc-comment-form { margin-bottom: var(--space-4); }
.proc-comment-form__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.proc-comments { display: flex; flex-direction: column; gap: var(--space-3); }
.proc-comment { border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); padding: var(--space-3); }
.proc-comment__head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.proc-comment__body { font-size: var(--font-size-sm); color: var(--color-text); }
.proc-comment__body p { margin: 0 0 .4em; }
.proc-mention { background: #ede9fe; color: #5b21b6; border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* Log */
.proc-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.proc-log__item { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.proc-log__time { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.proc-log__text { flex: 1 1 auto; min-width: 0; }
.proc-log__who { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }

/* @-Erwähnungs-Dropdown */
.proc-mention-dd { position: absolute; z-index: 40; min-width: 180px; max-height: 220px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.proc-mention-dd.is-hidden { display: none; }
.proc-mention-dd__item { display: block; width: 100%; text-align: left; appearance: none; background: none; border: 0; padding: 6px 10px; font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; }
.proc-mention-dd__item.is-active, .proc-mention-dd__item:hover { background: var(--color-surface-muted, var(--color-bg)); }
.proc-panel__done { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--color-success, #16a34a); }
.proc-panel__gate { margin-top: var(--space-4); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
/* „Nächste Phase"-Button bewusst größer als Standard-Buttons. */
.proc-panel__advance { padding: var(--space-3) var(--space-5, 24px); font-size: var(--font-size-md); }
.proc-panel__advance .material-symbols-outlined { font-size: 22px; }

/* Superuser-Aktionen (Schritt zurück / neu starten) am Fuß des Prozess-Boards. */
.proc-admin { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.proc-admin__form { margin: 0; }

.proc-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Aufgaben-Zeile = EINE horizontale Reihe: Icon · Text · Due · Datum-Feedback (Umbruch nur als Fallback). */
.proc-tasks__item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); }
.proc-tasks__item.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.proc-done-history { margin-top: var(--space-3); }
.proc-done-history__title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.proc-done-history .proc-tasks__text { text-decoration: line-through; opacity: .75; }
/* Read-only Gate-Voraussetzung: hellgrau (offen) bzw. grün via is-done; Checkbox nicht klickbar. */
.proc-tasks__item--readonly { background: var(--color-surface-muted, #f3f4f6); }
.proc-tasks__label--readonly { cursor: default; }
.proc-tasks__item--readonly .proc-tasks__check { cursor: default; }
.proc-tasks__item.is-overdue { border-left: 3px solid var(--color-danger, #dc2626); }
/* Festes Icon ganz links (Aufgabe bzw. Feld) + Trennstrich zur Checkbox. */
.proc-tasks__icon { flex: 0 0 auto; align-self: stretch; display: flex; align-items: flex-start; padding: 2px var(--space-2) 0 0; border-right: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 22px; }
.proc-tasks__item--readonly .proc-tasks__icon { color: var(--color-text-secondary); }
.proc-tasks__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 0; }
/* ── Verknüpfte Prozesse (Board): klickbare Streifen zwischen Feldern und Aufgaben.
     Ampel: grau = läuft, grün = abgeschlossen, hell-orange = Eskalation nicht OK. */
.proc-links { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--color-border); }
.proc-links__heading { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.proc-links__item { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: .55rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text); background: var(--color-gray-100); }
.proc-links__item:hover { filter: brightness(.97); }
.proc-links__item--done { background: #dcfce7; border-color: #bbf7d0; }
.proc-links__item--esk  { background: #ffedd5; border-color: #fed7aa; }
.proc-links__name { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; min-width: 14rem; }
.proc-links__name .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted); }
.proc-links__kv { display: inline-flex; align-items: baseline; gap: .4rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; }
.proc-links__k { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
/* Beziehung (ganz rechts): Parallel | Blockiert (blockt den Starter) | Wird blockiert. */
.proc-links__rel { margin-left: auto; flex: 0 0 auto; padding: .15rem .55rem; border-radius: 999px;
  font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.proc-links__rel--blocked { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.proc-links__rel--blocks  { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
/* Zeile = Streifen + optionaler Lösen-Button (nur manuelle Verknüpfungen). */
.proc-links__row { display: flex; align-items: stretch; gap: .4rem; }
.proc-links__row .proc-links__item { flex: 1 1 auto; min-width: 0; }
.proc-links__unlink { display: flex; align-items: center; }
.proc-links__unlink-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 100%; min-height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; }
.proc-links__unlink-btn:hover { color: var(--color-danger, #b91c1c); border-color: var(--color-danger, #b91c1c); }
.proc-links__unlink-btn .material-symbols-outlined { font-size: 18px; }

.proc-tasks__form { min-width: 0; }
/* „startet Prozess"-Aufgabe: Text + „Anzeigen"-Button in einer Zeile (keine Checkbox). */
.proc-tasks__form--process { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.proc-tasks__form--process .proc-tasks__label { cursor: default; }
.proc-tasks__open { display: inline-flex; }
.proc-tasks__label { display: flex; align-items: flex-start; gap: .6rem; padding: var(--space-1) var(--space-2) 0; cursor: pointer; }
.proc-tasks__check { width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; margin-top: 2px; }
.proc-tasks__text { font-size: var(--font-size-md); color: var(--color-text); word-break: break-word; }
/* Kleiner Herkunfts-Hinweis (rechts neben „Frist setzen", mit Trenner): aus welcher Phase die Aufgabe stammt. */
.proc-tasks__phase { font-size: var(--font-size-xs); white-space: nowrap; vertical-align: middle; }
/* „bis Phase X"-Gate: Aufgabe muss bis zu dieser Phase erledigt sein (Flag + Warnfarbe). */
.proc-tasks__phase--due { color: var(--color-warning-text, #b45309); font-weight: 600; }
.proc-tasks__phase--due .material-symbols-outlined { font-size: 14px; vertical-align: -2px; margin-right: .15rem; }
.proc-tasks__sep { margin: 0 .4rem; color: var(--color-border-strong, var(--color-text-muted)); vertical-align: middle; }
/* Erledigt: NICHT durchgestrichen, nur grüner Hintergrund (is-done am Item); Text bleibt color-text. */
/* Due-Date als Text unter der Aufgabe (unter den Text eingerückt); Klick blendet den Editor ein. */
.proc-tasks__due-wrap { padding-left: calc(18px + .6rem + var(--space-2)); }
.proc-tasks__due-display { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; background: none; border: 0; margin: 0; padding: 1px 4px; border-radius: 4px; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; }
.proc-tasks__due-display .material-symbols-outlined { font-size: 16px; }
.proc-tasks__due-display:hover { background: var(--color-surface-muted, var(--color-bg)); color: var(--color-text); }
.proc-tasks__due-display.is-empty { color: var(--color-text-muted); }
.proc-tasks__due-display.is-overdue { color: var(--color-danger, #dc2626); font-weight: 600; }
.proc-tasks__due-display.is-locked { cursor: default; }
.proc-tasks__due-display.is-locked:hover { background: none; color: var(--color-text-secondary); }
.proc-tasks__due { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.proc-tasks__due .material-symbols-outlined { font-size: 15px; }
.proc-tasks__due.is-overdue { color: var(--color-danger, #dc2626); font-weight: 600; }
.proc-tasks__assign { display: none; }   /* Zuweisung erstmal ausgeblendet */
.proc-tasks__assignee { font-size: var(--font-size-sm); padding: 2px 6px; min-width: 130px; max-width: 180px; }
.proc-tasks__duebox { margin: 0; }
/* Editor standardmäßig versteckt (nur via „Frist setzen"/Datum-Klick einblenden);
   nötig, weil `.proc-due{display:flex}` sonst das [hidden]-Attribut überstimmt. */
.proc-tasks__duebox[hidden] { display: none; }
/* Wrapper nur zum Sperren (fieldset[disabled]) wenn die Aufgabe erledigt ist — ohne eigenes Layout. */
.proc-due__set { display: contents; border: 0; margin: 0; padding: 0; }
/* Frist getrennt: Datum + Uhrzeit, je mit Schnell-Buttons darunter. */
.proc-due { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; }
/* Box wie die Enum-Dropdowns (Standard form-input/-select), breit genug, dass die Buttons darunter passen. */
.proc-due__group { display: flex; flex-direction: column; gap: 4px; }
.proc-due__group--time { display: none; }   /* Uhrzeit erstmal ausgeblendet */
.proc-due__field { display: flex; align-items: center; gap: 2px; }
.proc-due__clear { appearance: none; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--color-text-muted); padding: 2px 5px; border-radius: 4px; }
.proc-due__clear:hover { color: var(--color-danger, #dc2626); background: var(--color-surface-muted, var(--color-bg)); }
.proc-due__date { width: 155px; --field-py: var(--space-1); --field-px: var(--space-2); }
.proc-due__time { width: 175px; }
.proc-due__date.is-overdue { border-color: var(--color-danger, #dc2626); color: var(--color-danger, #dc2626); }
.proc-due__quick { display: flex; gap: 3px; flex-wrap: wrap; width: 100%; }
.proc-due__chip { font-size: 11px; line-height: 1.2; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; }
.proc-due__chip:hover { background: var(--color-surface-muted, var(--color-bg)); color: var(--color-text); border-color: var(--color-primary, var(--color-accent-blue)); }
/* Zeit-Infos (Erstellt/Geändert/Erledigt) rechts, linksbündig untereinander, mit Abstand zum Rahmen. */
/* Audit zweispaltig: Erstellt | Erledigt, je Icon+Datum oben und „wer" darunter. */
.proc-tasks__audit { flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; white-space: nowrap; color: var(--color-text); padding-top: 8px; }
/* Feste Spaltenbreite, damit die Audit-Spalten bei unterschiedlich langen Namen nicht springen. */
.proc-tasks__audit-col { flex: 0 0 12.5rem; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 0 var(--space-3); }
.proc-tasks__audit-col:first-child { padding-left: 0; }
.proc-tasks__audit-col + .proc-tasks__audit-col { border-left: 1px solid var(--color-border); }
.proc-tasks__audit-line { display: flex; align-items: center; gap: 4px; }
.proc-tasks__audit-icon { font-size: 16px; flex: 0 0 auto; }
.proc-tasks__audit-who { color: var(--color-text-secondary); padding-left: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Löschen-Button ganz rechts in der Aufgaben-Zeile. */
.proc-tasks__del { flex: 0 0 auto; margin: 0; }
.proc-tasks__del-btn { display: inline-flex; align-items: center; background: none; border: 0; padding: 2px; border-radius: 4px; color: var(--color-text-muted); cursor: pointer; }
.proc-tasks__del-btn .material-symbols-outlined { font-size: 18px; margin-top: 17px; }
.proc-tasks__del-btn:hover { color: var(--color-danger, #dc2626); background: var(--color-surface-muted, var(--color-bg)); }

/* Custom-Felder oben am Board */
.proc-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.proc-fields__item { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.proc-fields__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.proc-fields__hint { font-style: italic; }
.proc-fields__note { font-size: var(--font-size-xs); color: var(--color-text-muted); font-style: italic; text-align: right; margin-top: 2px; }

/* Preisanfragen-Mehrfachauswahl (Feldtyp calculations): Dropdown-Panel mit Checkboxen + Chips. */
.proc-calcsel { position: relative; display: inline-block; }
.proc-calcsel__toggle { text-align: left; cursor: pointer; min-width: 13rem; }
.proc-calcsel__panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 260px; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: .4rem; display: flex; flex-direction: column; gap: 2px; }
.proc-calcsel__opt { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: var(--font-size-sm); white-space: nowrap; }
.proc-calcsel__opt:hover { background: var(--color-bg); }
.proc-calcsel__none { padding: .3rem .45rem; }
.proc-calcsel__chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: .5rem; }
.proc-calcsel__chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg);
  font-size: var(--font-size-xs); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.proc-calcsel__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.proc-calcsel__chip .material-symbols-outlined { font-size: 14px; }
/* Anzeige-Umbruch: voller Breite + Höhe 0 → folgende Felder beginnen in neuer Zeile (flex-wrap). */
.proc-fields__break { flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; }
.proc-fields__select { min-width: 160px; }
.proc-fields__input { min-width: 160px; }
.proc-fields__item.is-locked .proc-fields__input { cursor: not-allowed; background: var(--color-surface-muted, #f3f4f6); }
/* Nicht ausfüllbares Feld klar ausgrauen (besser sichtbar als nur das disabled-Default). */
.proc-fields__item.is-locked { opacity: .55; }
.proc-fields__item.is-locked .proc-fields__select { cursor: not-allowed; background: var(--color-surface-muted, #f3f4f6); }
/* Prozess-Board: Status-AUSWAHL (farbiges Ampel-Select) ganz links in der Feld-Zeile. */
.proc-fields__status form { margin: 0; }

/* Custom-Feld-Zeilen im Regel-Editor */
.ptf-list { display: flex; flex-direction: column; gap: var(--space-2); }
/* Ein Feld = Block aus Kopf (Name + Schlüssel) und eingerückter Options-Liste. */
.ptf-field { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); }


/* Optionale Phasen-Zuordnungen eines Felds (ausfüllbar in / notwendig in). */


/* Kompakte gestapelte Sortier-Pfeile (Standard-Icon-Buttons, nur enger) */
.ptp-row__sort .btn { width: 30px; height: 24px; min-height: 0; padding: 0; }


.ptf-field__breaklabel { display: flex; align-items: center; gap: .4rem; color: var(--color-text-muted); font-style: italic; font-size: var(--font-size-sm); }
.pt-add-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Tools & Helper — Hub-Kacheln: je 25 % Breite; Icon links, Trennstrich, dann Name + Beschreibung. */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.tools-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); background: var(--color-surface); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.tools-card:hover { border-color: var(--color-primary, var(--color-accent-blue)); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.tools-card__icon { font-size: 28px; color: var(--color-primary, var(--color-accent-blue)); flex: 0 0 auto; padding-right: var(--space-3); border-right: 1px solid var(--color-border); }
.tools-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tools-card__title { font-weight: 600; }
.tools-card__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (max-width: 1100px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tools-grid { grid-template-columns: 1fr; } }
.ptf-field__type { min-width: 0; }
/* Options-Liste nur bei „Auswahl"-Feldern; Text/Zahl/Datum brauchen keine Optionen. */
[data-ptf-row]:not([data-ptf-fieldtype="enum"]) [data-ptf-opts-wrap],
[data-ptf-row]:not([data-ptf-fieldtype="enum"]) [data-ptf-opts] { display: none; }
.ptf-field__key { color: var(--color-text-secondary); background: var(--color-surface-muted, var(--color-bg)); }
.ptf-opts { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-2) var(--space-4); padding-left: var(--space-3); border-left: 2px solid var(--color-border); }
.ptf-opt { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(170px, 240px) 40px; gap: var(--space-2); align-items: center; }
.ptf-opt__value { color: var(--color-text-secondary); background: var(--color-surface-muted, var(--color-bg)); }

/* Schlüssel/Wert + „neu generieren" nebeneinander (eine Grid-Zelle). */
.pt-keycell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pt-keycell .form-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) {
    .ptf-opt { grid-template-columns: 1fr; }
    .ptf-opts { margin-left: var(--space-2); }
}

/* Standard-Aufgaben-Pflege (Übersicht /prozess-typen): Zeilen + Aktionsleiste. */
.pt-std { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.pt-std__row { display: flex; gap: var(--space-2); align-items: center; }
.pt-std__row .form-input { flex: 1 1 auto; }
.pt-std__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* Board-Flags in der Prozess-Typen-Übersicht (Checkboxen speichern sofort). */
.pt-flags { display: flex; flex-direction: column; gap: 4px; }
.pt-flags__check { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
.pt-flags__check input { width: 15px; height: 15px; flex: 0 0 auto; }

/* Aufgaben-Editor (Prozess-Typ): je Aufgabe eine Zeile mit Auslöser + Verhalten. */
.ptt-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.ptt-task { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); }

.ptt-task__when { display: flex; gap: var(--space-2); min-width: 0; }
.ptt-task__when .form-select { flex: 1 1 0; min-width: 0; }
/* Auslöser-Umschaltung (Aufgaben-Tabelle): nur die passenden Dropdowns/Zeilen zeigen. */
[data-ptt-row][data-ptt-trigger="phase"] .ptt-task__when--field { display: none; }
[data-ptt-row][data-ptt-trigger="field"] .ptt-task__when--phase { display: none; }
[data-ptt-row][data-ptt-trigger="phase"] .ptt-trow--field-only { display: none; }
[data-ptt-row][data-ptt-trigger="field"] .ptt-trow--phase-only { display: none; }
/* Vorbelegung („Startet Prozess mit …"): nur sichtbar, wenn ein Ziel-Prozess gewählt ist. */
[data-ptt-row]:not([data-ptt-hasstarts]) .ptt-task__sf { display: none; }
.ptt-task__sf-inner { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ptt-task__sf-rows { display: flex; flex-direction: column; gap: 6px; }
.ptt-sfrow { display: flex; gap: var(--space-2); align-items: center; }
.ptt-sfrow .form-select { min-width: 200px; }

/* Phasen-Wechsel-/Zeitplan-Zeilen: eine Zeile mit Feld → Ziel (+ Optionen). */
.ptj-list, .pts-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.ptj-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); }
.ptj-row .form-select { min-width: 170px; max-width: 240px; }


.ptt-task__days { width: 90px; }
@media (max-width: 720px) {
    
    .ptt-task__when { flex-direction: column; }
}

.proc-prompt__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.proc-prompt__opt {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px);
    cursor: pointer; font-size: var(--font-size-sm);
}
.proc-prompt__opt:hover { border-color: var(--color-border-strong); }

/* ───────────────────────────────────────────────────────────────────────────
   [PROZESS] Regel-Editor (Phase 2): Typ bearbeiten — JSON-Code-Editor.
   ─────────────────────────────────────────────────────────────────────────── */
.pt-form { display: block; }
/* Typ-Editor: je Bereich eine EIGENE klappbare Karte — Kopf mit Icon, Titel, Übersicht (Zähler)
   und Pfeil; Inhalt ein-/ausblendbar (Zustand je Typ in localStorage, Fehler klappt alles auf). */
.pt-card { margin-top: var(--space-4); }
.pt-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; user-select: none; border-radius: var(--radius-md, 8px); }
.pt-card__head:hover { background: var(--color-bg); }
.pt-card.is-open .pt-card__head { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; }
.pt-card__icon { color: var(--color-primary, var(--color-accent-blue)); font-size: 22px; }
.pt-card__title { font-weight: 600; font-size: var(--font-size-md, 1rem); }
.pt-card__sum { margin-left: auto; color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: right; }
.pt-card__chev { color: var(--color-text-muted); transition: transform .15s ease; }
.pt-card.is-open .pt-card__chev { transform: rotate(180deg); }
.pt-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.pt-card__body .pt-meta { margin-bottom: 0; }
.pt-card__save { display: flex; justify-content: flex-end; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light, #eee); }
/* Versions-Historie: Abstand zum Formular + Änderungs-Chips (+ neu, − entfernt, ± angepasst). */
.pt-history-card { margin-top: var(--space-5); }
.pt-history__diff { max-width: 640px; }
.pt-hist-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; }
.pt-hist-chip--more { cursor: help; }

/* Phasen als klappbare Zeilen-Karten: zu = Name, auf = Editier-Tabelle (Einstellung | Feld | Zusatz). */
.ptp-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.ptp-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); }
.ptp-item__head { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; cursor: pointer; user-select: none; }
.ptp-item__head:hover { background: var(--color-bg); }
.ptp-item__chev { color: var(--color-text-muted); font-size: 20px; transition: transform .15s ease; }
.ptp-item.is-open .ptp-item__chev { transform: rotate(180deg); }
.ptp-item__name { font-weight: 600; }
.ptp-item__del { margin-left: auto; }
.ptp-item__body { border-top: 1px solid var(--color-border); padding: var(--space-3); }
.ptp-tbl { width: 100%; border-collapse: collapse; }
.ptp-tbl td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid var(--color-border-light, #eee); }
.ptp-tbl tr:last-child td { border-bottom: none; }
.ptp-tbl__lbl { width: 220px; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.ptp-tbl__extra { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ptp-tbl__extra--stack { flex-direction: column; align-items: flex-start; }   /* je Paar eine Zeile (Bei Freigabe / Keine Freigabe) */
.ptp-tbl__pair { display: flex; align-items: center; gap: var(--space-2); }
.ptp-tbl__extralbl { color: var(--color-text-secondary); font-size: var(--font-size-xs); white-space: nowrap; flex: 0 0 130px; width: 130px; }   /* feste Label-Spalte → Schlüssel/Werte über alle Zeilen bündig */
.ptp-tbl__checks { display: flex; flex-direction: column; gap: 0; }   /* je Checkbox eine Zeile */
/* Einheitliche Zeilenhöhe: Checkbox-/Freigabe-Zeilen so hoch wie eine Input-Zeile (47px). */
.ptp-tbl__check { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); cursor: pointer; white-space: nowrap; min-height: 47px; }
.ptp-tbl__check input { width: 16px; height: 16px; flex: 0 0 auto; }
.ptp-tbl__pair { min-height: 47px; }
.ptp-tbl .form-input, .ptp-tbl .form-select { max-width: 340px; }
.ptp-tbl .ptf-opt__label { max-width: none; }   /* Options-Anzeigetext: volle Spaltenbreite */
.ptp-tbl .pt-keycell { flex: 1 1 auto; }
/* Kopf-Badge (z. B. Feldtyp) rechts vor dem Löschen-Button. */
.ptp-item__sum { margin-left: auto; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.ptp-item__sum ~ .ptp-item__del { margin-left: 0; }
/* Anzeige-Umbruch: statische Zeile (nicht klappbar), gestreifter Grund wie bisher. */
.ptp-item--break { background: repeating-linear-gradient(45deg, var(--color-surface-muted, #f3f4f6) 0 8px, transparent 8px 16px); }
.ptp-item__head--static { cursor: default; }
.ptp-item__head--static:hover { background: transparent; }
.pt-meta { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pt-meta .form-group { flex: 1 1 280px; margin: 0; }
.pt-check { display: inline-flex; align-items: center; gap: .4rem; padding-bottom: var(--space-2); cursor: pointer; }
.pt-hint { margin: 0 0 var(--space-3); }

.pt-history { border-top: 1px solid var(--color-border); }
.pt-history__title { margin: 0 0 var(--space-3); }

/* Schlanker Code-Editor (Textarea + Zeilennummern-Gutter), keine externe Lib. */
.code-editor {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    background: var(--color-surface);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.code-editor__gutter {
    margin: 0;
    padding: var(--space-2) 8px;
    text-align: right;
    color: var(--color-text-muted);
    background: var(--color-surface-muted, var(--color-bg));
    border-right: 1px solid var(--color-border);
    white-space: pre;
    overflow: hidden;
    user-select: none;
    min-width: 3ch;
    font: inherit;
}
.code-editor__area {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    resize: vertical;
    margin: 0;
    padding: var(--space-2);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    white-space: pre;
    overflow: auto;
    min-height: 240px;
    tab-size: 2;
}

/* Phasen-Editor (UI-Formular): sortierbare Zeilen. */
.pt-section { margin: var(--space-4) 0 2px; }
.pt-add-phase { margin-top: var(--space-3); }
.ptp-head { display: grid; grid-template-columns: 56px minmax(140px, 1fr) 190px 160px 40px; gap: var(--space-2); padding: 0 var(--space-2) 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ptp-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ptp-row { display: grid; grid-template-columns: 56px minmax(140px, 1fr) 190px 160px 40px; gap: var(--space-2); align-items: center; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-surface); }
.ptp-row__sort { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.ptp-row__key { color: var(--color-text-secondary); background: var(--color-surface-muted, var(--color-bg)); }
/* Prüfungsphase-Konfig: volle Breite als zweite Zeile im Phasen-Grid. */


            /* Prüfungsphase: 50 % */
      /* Button-Text-Box daneben: 50 % */


@media (max-width: 720px) {
    .ptp-head { display: none; }
    .ptp-row { grid-template-columns: 1fr; }
    
    .ptp-row__sort { flex-direction: row; }
}

/* ── Prüfblatt Nachunternehmerrechnung (Tools & Helper) ─────────────────── */
.pb-section-title { margin: var(--space-5) 0 var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
.pb-section-title:first-child { margin-top: 0; }

/* Kopfdaten: festes 25%-Raster mit Zeilen-Umbrüchen. */
.pb-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) var(--space-4); align-items: start; }
.pb-head__cell { margin: 0; min-width: 0; }
/* AR/SR-Typ + Rechnungsnummer zusammen in einer Kopf-Zelle. */
.pb-arnr { display: flex; gap: .4rem; }
.pb-arnr__typ { flex: 0 0 76px; width: 76px; }
.pb-arnr__nr { flex: 1 1 auto; min-width: 0; }
.pb-head__cell--w50 { grid-column: span 2; }
.pb-head__cell--w75 { grid-column: span 3; }
.pb-head__break { grid-column: 1 / -1; height: 0; margin: 0; padding: 0; }
.pb-head input[readonly] { background: var(--color-surface-alt, #f1f3f5); color: var(--color-text-muted); cursor: not-allowed; }

/* Untere Sektionen: Rechnungsprüfung | Weitere Abzüge, dann Umbruch, dann Zahlungen (je 50%). */


.pb-calc { max-width: 620px; }
.pb-lines { display: flex; flex-direction: column; }
/* Alle Zeilen so hoch wie eine Eingabezeile (Input/Select 34px + 12px Padding + Rand). */
.pb-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px 8px; border-bottom: 1px solid var(--color-border-light, #eee); }
.pb-line--pct { grid-template-columns: 1fr auto auto; }
/* Eingabe + getrennte Ausgabe (Rechnungssumme / Abzug): Label | Eingabebox | Wert. */
.pb-line--io { grid-template-columns: 1fr auto auto; }
.pb-line__label { color: var(--color-text); }
.pb-line__field { justify-self: end; }
.pb-line__field .form-input { width: 140px; text-align: right; }
.pb-line__pct { display: inline-flex; align-items: center; gap: 4px; justify-self: end; color: var(--color-text-muted); white-space: nowrap; }
.pb-line__pct .form-input { width: 72px; text-align: right; }
.pb-line__pct .pb-line__select { width: auto; min-width: 130px; max-width: 240px; }
.pb-line__value { justify-self: end; min-width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pb-line__value--minus { color: var(--color-danger, #c0392b); }
.pb-line--result { background: var(--color-surface-alt, #f6f8fa); }
.pb-line--result .pb-line__label { font-weight: 600; }
.pb-line--total { margin-top: var(--space-2); background: #4b5563; color: #fff; border-radius: var(--radius-md, 8px); border: none; padding: 10px 12px; }
.pb-line--total .pb-line__label { font-weight: 700; color: #fff; }
.pb-line--total .pb-line__value { color: #fff; font-size: 1.15rem; font-weight: 700; min-width: 150px; }

/* Berechnungs-Karte: Rechnungsprüfung (Wasserfall) | Kommentar nebeneinander (50/50). */
.pb-calc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.pb-calc-cols .pb-calc { max-width: none; }
@media (max-width: 900px) { .pb-calc-cols { grid-template-columns: 1fr; } }
/* Rechte Prüfblatt-Spalte: deutliche Luft zwischen den Blöcken (Abzüge / NU-Kommentar / Kommentar Intern). */
.pb-comment .pb-section-title { margin-top: 2.5rem; }
.pb-comment .pb-section-title:first-child { margin-top: 0; }
.pb-comment__editor { width: 100%; }
/* Kommentare (NU + intern) unter der Berechnung, nebeneinander 50/50. */
.pb-comments-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.pb-comments-row .pb-section-title { margin-top: 0; }
@media (max-width: 900px) { .pb-comments-row { grid-template-columns: 1fr; } }

.pb-pay { margin-top: var(--space-2); }
.pb-pay td, .pb-pay th { vertical-align: middle; }
.pb-pay .pb-pay__netto, .pb-pay .pb-pay__brutto { text-align: right; }
.pb-pay input.form-input { width: 100%; }
/* Abzugs-Rechner (Abzug lt. Bauleitung inkl. SE): schmale rechte Spalte → feste Spaltenbreiten
   (table-layout fixed respektiert die th-Breiten), Beträge ohne Umbruch, Dropdown volle Zellbreite. */
.pb-abzug { table-layout: fixed; }
.pb-abzug td, .pb-abzug th { vertical-align: middle; padding-left: 6px; padding-right: 6px; }
.pb-abzug td:last-child, .pb-abzug th:last-child { padding-left: 0; padding-right: 0; }   /* 40px-Spalte = Icon-Button, ohne Padding */
.pb-abzug input.form-input, .pb-abzug select.form-select { width: 100%; }
.pb-abzug .pb-abzug__wert { text-align: right; }
.pb-abzug .pb-abzug__betrag { white-space: nowrap; }
.pb-pay .pb-pay__skonto-cell { text-align: right; white-space: nowrap; color: var(--color-text-muted); }
.pb-pay input.pb-pay__skonto { width: 76px; }
.pb-pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-2); }
.pb-pay-head__title { margin: 0; }
.pb-pay-head__vat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.pb-pay-head__vat .form-select { width: auto; min-width: 150px; }
.pb-pay tfoot td { border-top: 2px solid var(--color-border); }

/* Automatische Abschlags-Kandidaten (frühere Prüfblätter) — grau + ankreuzbar. */
.pb-auto { margin-top: var(--space-2); }
.pb-auto td, .pb-auto th { vertical-align: middle; }
.pb-auto__row { background: var(--color-surface-alt, #f6f8fa); }
.pb-auto__row td { color: var(--color-text-muted); }

/* Eigene Karten (Einstellungen / Berechnung / Zahlungen) + Abstand zur Historie. */
.pb-form > .card { margin-bottom: var(--space-5); }
.pb-history { margin-top: var(--space-5); }

@media (max-width: 900px) {
    .pb-head { grid-template-columns: repeat(2, 1fr); }
    .pb-head__cell--w50, .pb-head__cell--w75 { grid-column: span 2; }
    .pb-head__break { display: none; }
    
    
}
@media (max-width: 720px) {
    .pb-calc { max-width: none; }
    .pb-line__field .form-input { width: 110px; }
    .pb-head { grid-template-columns: 1fr; }
    .pb-head__cell--w50, .pb-head__cell--w75 { grid-column: span 1; }
}

/* ── „Gruppen anlegen"-Popup (Kalkulations-Gruppen): 75 % breit — links bis zu
     10 Namensfelder, rechts Vorschlags-Checkboxen (2-spaltig). ──────────────── */
.group-create-modal .bl-modal__dialog { width: min(75vw, 1240px); max-width: 75vw; }
.group-create-modal .bl-modal__body { max-height: 65vh; overflow: auto; }
.group-create-modal__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.group-create-modal__col { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.group-create-modal__col h4 { margin: 0 0 .25rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.group-create-modal__suggest { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .9rem; align-content: start; }
.group-create-modal__opt { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); }
.group-create-modal__opt:hover { background: var(--color-bg); }
.group-create-modal__opt input { flex: 0 0 auto; }
@media (max-width: 900px) {
  .group-create-modal .bl-modal__dialog { width: 94vw; max-width: 94vw; }
  .group-create-modal__body, .group-create-modal__suggest { grid-template-columns: 1fr; }
}

/* ── Direktsuche über der Nachunternehmer-Auswahl (Gewerke-Formular) ───────
   Sitzt bewusst ÜBER den Kacheln statt klein im Karten-Kopf: Es ist der
   Einstieg in die Auswahl, nicht eine Nebenaktion. Icon liegt IM Feld, damit
   die Zeile nicht in Icon + Feld auseinanderfällt. */
.sub-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1rem 0;
}
.sub-search-bar__icon {
  position: absolute;
  left: 1.6rem;
  font-size: 20px;
  color: var(--color-text-muted, #6b7280);
  pointer-events: none;
}
.sub-search-bar__input {
  flex: 1;
  padding-left: 2.6rem;
}
.sub-search-bar__hint {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Nachunternehmer-/Lieferanten-Zuordnung (Gewerke + Materialbereiche) ──
   Nutzt die Standard-.table wie alle übrigen Stammdaten-Listen (Feedback
   2026-07-28: die frühere Grid-Eigenbau-Optik fiel aus dem Rahmen). Hier
   stehen nur die Zusätze: Auswahl-Hervorhebung + Checkbox-Klickflächen. */
.sub-table { padding: .25rem 1rem 1rem; }
.sub-table .table { margin: 0; }
.sub-table__col { width: 90px; text-align: center; }
tr.sub-item--on > td { background: #eef2ff; }
/* Klickfläche: die ganze Zelle, nicht nur das 16px-Kästchen. */
td.sub-item__box { padding: 0; text-align: center; }
td.sub-item__box label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 0;
  cursor: pointer;
}
td.sub-item__box input {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: var(--color-indigo-500);
}
td.sub-item__box input:disabled { cursor: not-allowed; opacity: .35; }

/* ══ [ANFRAGE-KALENDER] /preisanfragen/kalender — Tage in Spalten, Strahl je Anfrage ══ */
.inquiry-cal {
  --ical-day-w: 34px;
  --ical-label-w: 280px;
  display: grid;
  grid-template-columns: var(--ical-label-w) repeat(var(--ical-days), var(--ical-day-w));
  align-items: stretch;
  min-width: max-content;
  font-size: var(--font-size-sm);
}
.inquiry-cal__corner, .inquiry-cal__labelhead, .inquiry-cal__label {
  grid-column: 1;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-surface, #fff);
  border-right: 1px solid var(--color-border, #e5e7eb);
}
.inquiry-cal__months, .inquiry-cal__dayrow, .inquiry-cal__track {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(var(--ical-days), var(--ical-day-w));
}
.inquiry-cal__month {
  text-align: left;
  padding: .35rem .5rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  border-left: 1px solid var(--color-border, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
}
.inquiry-cal__labelhead { padding: .4rem .75rem; border-bottom: 1px solid var(--color-border, #e5e7eb); align-self: stretch; display: flex; align-items: flex-end; }
.inquiry-cal__day {
  text-align: center;
  padding: .25rem 0 .35rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-muted, #6b7280);
  line-height: 1.15;
  display: flex; flex-direction: column;
}
.inquiry-cal__wd  { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .02em; }
.inquiry-cal__num { font-weight: 600; color: var(--color-text, #111827); font-size: var(--font-size-xs); }
.inquiry-cal__day--we { background: #f6f7f9; }
.inquiry-cal__day--today { background: #eef4ff; box-shadow: inset 0 -2px 0 var(--color-primary, #2563eb); }
.inquiry-cal__day--today .inquiry-cal__num { color: var(--color-primary, #2563eb); }

.inquiry-cal__label {
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  text-decoration: none; color: inherit;
  min-height: 46px;
}
.inquiry-cal__label:hover .inquiry-cal__name { color: var(--color-primary, #2563eb); }
.inquiry-cal__name { font-weight: 600; }
.inquiry-cal__name,
.inquiry-cal__label .text-xs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--ical-label-w) - 1.5rem);
}
.inquiry-cal__track { position: relative; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.inquiry-cal__cell { grid-row: 1; border-left: 1px solid #f1f2f4; }
.inquiry-cal__cell--we { background: #f6f7f9; }
.inquiry-cal__cell--today { background: #eef4ff; }

.inquiry-cal__bar {
  grid-row: 1;
  z-index: 2;
  margin: .55rem 2px;
  min-height: 20px;
  border-radius: 999px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 .5rem;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}
.inquiry-cal__bar:hover { filter: brightness(1.08); }
.inquiry-cal__bar--overdue { background: var(--color-danger, #dc2626); }
.inquiry-cal__bar--open {
  background: repeating-linear-gradient(135deg, #93b4f5 0 8px, #7ea5f0 8px 16px);
  color: #1e3a8a;
}
.inquiry-cal__bartext { font-size: var(--font-size-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.inquiry-cal__legend { display: flex; flex-wrap: wrap; gap: 1rem; padding: .6rem 1rem; border-top: 1px solid var(--color-border, #e5e7eb); align-items: center; }
.inquiry-cal__dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: var(--color-primary, #2563eb); vertical-align: -1px; margin-right: .25rem; }
.inquiry-cal__dot--overdue { background: var(--color-danger, #dc2626); }
.inquiry-cal__dot--open { background: repeating-linear-gradient(135deg, #93b4f5 0 4px, #7ea5f0 4px 8px); }
.inquiry-cal__dot--today { background: #eef4ff; box-shadow: inset 0 0 0 2px var(--color-primary, #2563eb); }
.inquiry-cal__legendnote { margin-left: auto; }
.inquiry-cal__monthtext {
  position: sticky;
  left: calc(var(--ical-label-w) + .5rem);
  display: inline-block;
}

/* ══ [DATEIFREIGABE] /werkzeuge/dateien — Drop-Zone + Fortschritt ══ */
.sf-drop {
  border: 2px dashed var(--color-border, #d1d5db);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; color: var(--color-text-muted, #6b7280);
  transition: border-color .15s, background .15s;
}
.sf-drop--over { border-color: var(--color-primary, #2563eb); background: #eef4ff; }
.sf-progress { margin-top: 1rem; }
.sf-progress__head { display: flex; justify-content: space-between; margin-bottom: .35rem; }
.sf-progress__track { height: 10px; border-radius: 999px; background: var(--color-surface-alt, #eef0f3); overflow: hidden; }
.sf-progress__bar { height: 100%; width: 0; background: var(--color-primary, #2563eb); border-radius: 999px; transition: width .2s; }

/* ══ [ROW-MENU] Zeilen-Aktionsmenü (details-basiert) — z. B. Projektliste ══ */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown, 500);
  min-width: 230px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: .3rem;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.row-menu__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.row-menu__item:hover { background: var(--color-primary-light, #eef4ff); }
.row-menu__item .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted, #6b7280); }
/* Menü-Einträge auch als <button> (Form-Aktionen wie Kopieren/Folge im Prüfblatt-Menü). */
.row-menu__panel form { display: block; }
button.row-menu__item { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }

.row-menu--up .row-menu__panel { top: auto; bottom: calc(100% + 4px); }

/* ── [LAGER] Lageranfragen: DATANORM-Direktsuche im Positions-Formular ────── */
.lag-search { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; margin-top: 4px; }
.lag-search__item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--color-border); padding: .5rem .75rem; font-size: var(--font-size-sm); cursor: pointer; }
.lag-search__item:last-child { border-bottom: 0; }
.lag-search__item:hover { background: var(--color-primary-light, #eef4ff); }
.lag-search__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: .1rem; }

/* ── [PRÜFBLATT] Listen-Gruppierung nach Projekt/Bauvorhaben (einklappbar) ── */
.pb-lgroup { border-top: 1px solid var(--color-border); }
.pb-lgroup:first-child { border-top: 0; }
.pb-lgroup__head { display: flex; align-items: center; gap: .5rem; padding: .65rem var(--space-5) .5rem; background: var(--color-surface-alt, #f8f9fb); cursor: pointer; list-style: none; user-select: none; }
.pb-lgroup__head::-webkit-details-marker { display: none; }
.pb-lgroup__head:hover { background: var(--color-primary-light, #eef4ff); }
.pb-lgroup__chevron { font-size: 20px; color: var(--color-text-muted); transition: transform .15s; }
.pb-lgroup[open] > .pb-lgroup__head .pb-lgroup__chevron { transform: rotate(90deg); }
.pb-lgroup__icon { font-size: 18px; color: var(--color-text-muted); }
.pb-lgroup__title { font-weight: 600; }
.pb-lgroup__sum { margin-left: auto; white-space: nowrap; }

/* ── [AUFGABEN] Entwicklungs-Kanban /aufgaben: Karten + Drag-Zustände ─────── */
.task-card { display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3); text-decoration: none; color: inherit; cursor: grab; }
.task-card:hover { border-color: var(--color-primary, #2563eb); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.task-card.is-dragging { opacity: .45; cursor: grabbing; }
.task-card__title { font-weight: 600; font-size: var(--font-size-sm); line-height: 1.35; }
.task-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.task-card__assignee { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.task-card__assignee .material-symbols-outlined { font-size: 14px; }
.task-card__counts { display: flex; align-items: center; gap: .75rem; }
.task-card__count { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.task-card__count .material-symbols-outlined { font-size: 14px; }
.task-col--resolved { background: var(--color-surface-alt, #f8f9fb); }
.task-col--resolved .task-card { opacity: .75; }
.task-dropzone.is-dragover { outline: 2px dashed var(--color-primary, #2563eb); outline-offset: -6px; border-radius: var(--radius-md); background: var(--color-primary-light, #eef4ff); }

/* Kommentar-Strang auf der Aufgaben-Detailseite. */
.task-comments { display: flex; flex-direction: column; gap: var(--space-3); }
.task-comment { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.task-comment__head { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--space-2); }
.task-comment__author { font-weight: 600; font-size: var(--font-size-sm); }
.task-comment__time { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.task-comment__delete { margin-left: auto; }
.task-comment__body { font-size: var(--font-size-sm); line-height: 1.5; white-space: normal; }

/* KI-Vorschlags-Box auf der Aufgaben-Detailseite. */
.task-ai { margin-top: var(--space-3); border: 1px solid var(--color-primary, #2563eb); border-radius: var(--radius-md); background: var(--color-primary-light, #eef4ff); }
.task-ai__head { display: flex; align-items: center; gap: .5rem; padding: var(--space-3) var(--space-3) 0; color: var(--color-primary, #2563eb); }
.task-ai__head .material-symbols-outlined { font-size: 18px; }
.task-ai__title { font-weight: 600; font-size: var(--font-size-sm); }
.task-ai__body { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); line-height: 1.5; }
.task-ai__body ul, .task-ai__body ol { margin: .35rem 0 .35rem 1.25rem; }
.task-ai__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 var(--space-3) var(--space-3); }