/* ═══════════════════════════════════════════════
   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:     #6b7280; /* 2026-08-07 von #9ca3af abgedunkelt — war auf manchen Monitoren unlesbar (Kontrast ~2,5:1 → ~4,8:1, WCAG AA) */
  --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;
  /* ⚠⚠ MUSS ÜBER --z-overlay-modal (3000) LIEGEN. Der Kommentar sagte „über
     Modals" und stimmte auch — solange Modals bei --z-modal (1000) lagen. Die
     heutigen bl-modal liegen bei 3000: eine Auswahl-Liste mit Suche im Fenster
     verschwand damit hinter dessen Fussleiste, und ein Bestaetigen-Dialog aus
     einem Fenster heraus waere unsichtbar gewesen (.confirm-modal haengt am
     selben Wert). Popovers haengen am body und muessen ueber ALLEM liegen, was
     sie geoeffnet hat. */
  --z-popover:   3100;
  --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; }


/* [MEINE TICKETS 24.09.2026] Fester Eintrag über dem Benutzerblock — nur mit eigenen Tickets. */
.sidebar-tickets {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  flex-shrink: 0;
}

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

/* [VORGANGSKETTE 24.09.2026] Kunde → Baustelle → Projekt → Beleg über dem Seiteninhalt (layout/_vorgangskette.php).
   Glieder vertikal mittig. Jeder Name steht ganz bis zu einer Höchstbreite, erst darüber wird gekürzt (voller
   Name im Tooltip) — ein kurzer Name wird so nie für einen langen geopfert. Passt die Leiste nicht in eine Zeile,
   bricht sie um statt zu scrollen. */
.vorgangskette {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) 2px;
  margin: 0 0 var(--space-4); padding: 6px 8px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
  font-size: var(--font-size-sm);
}
.vorgangskette__glied {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; max-width: 100%;
  padding: 4px 8px; border-radius: 6px; color: var(--color-text); text-decoration: none;
}
a.vorgangskette__glied:hover { background: var(--color-primary-light); color: var(--color-primary); }
.vorgangskette__glied--aktuell { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.vorgangskette__glied--leer { color: var(--color-text-muted); font-style: italic; }
.vorgangskette__icon { font-size: 18px; flex: none; color: var(--color-text-muted); }
.vorgangskette__glied--aktuell .vorgangskette__icon, a.vorgangskette__glied:hover .vorgangskette__icon { color: var(--color-primary); }
.vorgangskette__art { flex: none; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; font-style: normal; }
.vorgangskette__label { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorgangskette__trenner { font-size: 18px; color: var(--color-border-strong); flex: none; }
@media (max-width: 640px) {
  .vorgangskette__art { display: none; }
}

/* ═══════════════════════════════════════════════
   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;
}
/* `display:inline-flex` würde sonst das UA-Default für [hidden] überschreiben
   — ein per JS versteckter Knopf bliebe sichtbar (bekannte Falle im Projekt). */
.btn[hidden] { display: none; }
.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; }
/* Knopf-Zelle in einer Feld-Zeile: nebeneinander, auf einer Mittellinie,
   unten bündig mit den Eingabefeldern daneben. */
.form-group--actions { flex-direction: row; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.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); }
/* Abgelehnte Freigabe: die Station wurde erreicht, aber negativ beendet.
   Bewusst rot statt grün/blau — sonst ist sie von „erledigt" nicht zu
   unterscheiden (siehe _phase_breadcrumb.php). */
.phase-step--rejected { background: var(--color-danger-bg, #fee2e2); border-color: #fca5a5; color: var(--color-danger, #b91c1c); font-weight: 700; }
.phase-step--rejected .phase-step__num  { background: var(--color-danger, #b91c1c); }
.phase-step--rejected .phase-step__icon { color: var(--color-danger, #b91c1c); }
.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; }
/* [18.09.2026] Symbol direkt in der Karten-Ueberschrift (z. B. „mail Anschreiben / Vortext", „notes Schlusstext"):
   als Inline-Span stand es auf der Grundlinie und damit sichtbar tiefer als der Text — jetzt mittig und mit Abstand.
   Bewusst KEIN Flex auf .card-header__title (traegt anderswo h2/h3 und Nebeninhalte). */
.card-header__title > .material-symbols-outlined { vertical-align: middle; position: relative; top: -1px; margin-right: var(--space-2, .5rem); }
/* 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; }
/* [VERSAND-CHECKLISTE] Absender-Zeile + Pflichthaken im Popup „E-Mail an alle". */
.bulkmail-sender { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--color-border); }
.user-badge { display: inline-flex; align-items: center; gap: .5rem; }
.user-avatar--sm { width: 28px; height: 28px; font-size: var(--font-size-xs); flex: 0 0 28px; }
.user-badge__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.user-badge__name { font-weight: 600; font-size: var(--font-size-sm); }
.user-badge__role { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bulkmail-check { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--color-border); }
/* ⚠ Eigener Name für die Ueberschrift: hiess sie wie die Zeilentitel, addierten
   sich beide Regeln (gleiche Spezifitaet) und die Zeilentitel bekamen 12px +
   margin-bottom — genau der Versatz, den der Grid-Umbau beseitigen sollte. */
.bulkmail-check__heading { display: block; margin-bottom: .4rem; font-size: var(--font-size-sm); }
/* Aufmachung wie die Optionen darüber („PDF anhängen"): gerahmter Kasten.
   Zusätzlich eine Ampel — offen = hellrot, bestätigt = hellgrün. So sieht der
   Einkäufer im Vorbeischauen, was noch fehlt, statt es zählen zu müssen.
   ⚠ Gesteuert über die Klasse --ok, die der change-Handler setzt, NICHT über
   :has(input:checked): Chrome invalidiert :has() nicht zuverlässig, wenn
   `checked` per Skript gesetzt wird — im Test blieb eine abgewählte Zeile grün. */
.bulkmail-check__row { display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .6rem; row-gap: 2px;
  padding: .6rem .75rem; border: 1px solid #fecaca;
  border-radius: var(--radius-md); cursor: pointer;
  /* Sehr helles Rot: ein Hinweis, keine Fehlermeldung — die Punkte sind ja
     nur „noch offen", nicht falsch. Kräftige Warnfarben lesen sich hier zu
     hart, weil beim Öffnen erst mal ALLE Zeilen offen sind. */
  background: #fef4f4;
  transition: background var(--transition), border-color var(--transition); }
.bulkmail-check__row + .bulkmail-check__row { margin-top: .5rem; }
.bulkmail-check__row--ok { background: #f0fdf4; border-color: #bbf7d0; }
.bulkmail-check__row input { margin: 0; cursor: pointer; grid-column: 1; grid-row: 1; }
/* Schriftgröße wie bei den Optionen darüber (16px/24px). ⚠ Nicht nur Optik:
   bei kleinerer Schrift sitzt das Kästchen wegen der Font-Metriken sichtbar
   höher als die Textmitte — gemessen 2,6px gegenüber 0,3px hier. */
.bulkmail-check__title { grid-column: 2; font-weight: 600; }
/* ⚠ min-width:0 + anywhere — ein langer Projektname sprengt sonst die Spalte. */
.bulkmail-check__val { grid-column: 2; min-width: 0; color: var(--color-text-muted);
  font-size: var(--font-size-xs); overflow-wrap: anywhere; }

/* [BESTANDS-FILTER] Optionen-Reihe unter Status/Typ/Suche. flex-basis:100%
   erzwingt den Umbruch in eine eigene Zeile, damit die Optionen nicht zwischen
   die Eingabefelder rutschen. Der Zurücksetzen-Knopf sitzt MIT drin (sonst
   schöbe ihn das margin-left:auto der Filterleiste in die nächste Zeile). */
/* ⚠ min-height = Hoehe des Zuruecksetzen-Knopfes (btn--sm, 34px). Ohne sie
   ist die Reihe nur so hoch wie die Beschriftungen (21px); sobald durch eine
   Auswahl der Knopf dazukommt, waechst sie — und die mittig ausgerichteten
   Optionen springen um die Differenz nach unten. */
.project-filter__entries { flex: 1 0 100%; display: flex; flex-wrap: wrap;
  align-items: center; gap: .35rem .75rem; min-height: 34px; }
/* ⚠ Trennstrich + Knopf als EINE Einheit nach rechts schieben. Liegt das
   margin-left:auto auf nur einem der beiden, reisst ein Zeilenumbruch sie
   auseinander: der Strich bliebe rechts oben, der Knopf landete links unten.
   Ohne aktiven Filter wird die Einheit gar nicht erst gerendert; damit die
   Optionen dabei nicht springen, ist jede Option selbst knopfhoch (unten). */
.project-filter__resetwrap { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.project-filter__entry   { display: flex; align-items: center; gap: .35rem;
  min-height: 34px; font-size: var(--font-size-sm); cursor: pointer; }
.project-filter__entry input { margin: 0; cursor: pointer; }
/* [FRAGEN] Die moeglichen Antworten einer Katalogfrage: untereinander und volle Breite —
   sie sind ganze Saetze, keine Etiketten. Ein Klick traegt sie ins Antwortfeld. */
.frage-optionen { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
/* ⚠ Die Eingabe fuer den eigenen Punkt braucht Abstand nach oben — sonst klebt sie an der
   letzten Antwortmoeglichkeit und sieht aus wie eine davon. */
.frage-optionen__neu { margin-top: var(--space-4); }
.frage-optionen .btn { text-align: left; white-space: normal; }
/* [FRAGEN] Die Abschnitte einer Frage — Frage, Hintergrund, Beispiel, Antworten, Vermutung.
   ⚠ Trennstrich UND Luft: ohne beides lief der Text ineinander, und die fetten
   Zwischenzeilen im Fliesstext waren von den Abschnittsueberschriften nicht zu unterscheiden. */
.frage-abschnitt + .frage-abschnitt {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
/* Klein, gesperrt, grau: die Ueberschrift ordnet den Abschnitt, sie konkurriert nicht mit
   den fetten Zwischenzeilen im Text darunter. */
.frage-abschnitt__titel {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.frage-abschnitt--fuss p { margin: 0 0 var(--space-2); }
.frage-abschnitt--fuss p:last-child { margin-bottom: 0; }
/* Absaetze im Fragetext bekommen Luft; eine Zeile, die NUR fett ist, ist eine
   Zwischenueberschrift und braucht mehr davon. */
.frage-text p { margin: var(--space-2) 0; }
.frage-text p:first-child { margin-top: 0; }
.frage-text p:last-child { margin-bottom: 0; }
.frage-text ul, .frage-text ol { margin: var(--space-2) 0 var(--space-3); padding-left: 1.2rem; }
.frage-text li { margin: .2rem 0; }
.frage-text p:has(> strong:only-child) { margin-top: var(--space-5); }
.frage-text p:first-child:has(> strong:only-child) { margin-top: 0; }

/* [FRAGEN] Beschriftung und „Bild einfügen" in einer Zeile über dem Editor. */
.frage-edit__kopf { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; }

/* [FRAGEN] Bildschirmfoto mitten im Text — nie breiter als die Karte. */
.frage-bild { max-width: 100%; height: auto; display: block; margin: .6rem 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* Eigener Punkt darunter: Feld nimmt die Breite, Knopf bleibt daneben. */
.frage-optionen__neu { display: flex; gap: .4rem; align-items: center; max-width: 46rem; }
.frage-optionen__neu .form-input { flex: 1; }

/* Senkrechter Trennstrich zwischen den Gruppen und vor dem Knopf. */
.project-filter__sep { width: 1px; height: 1.35rem; background: var(--color-border); }

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

/* [GRUPPEN] Dritte Ansicht: je Kalkulations-Gruppe die Partner-Antwort-Tabelle */
.inquiry-gruppen { display: none; margin-top: var(--space-4); }
body[data-inquiry-view="gruppen"] .inquiry-group { display: none !important; }
body[data-inquiry-view="gruppen"] .inquiry-gruppen { display: block; }
/* Jede Gruppe ist eine eigene .card — sichtbarer Abstand statt Trennlinie. */
.inquiry-gruppen__block + .inquiry-gruppen__block { margin-top: var(--space-5); }
.inquiry-gruppen__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 12px var(--space-5);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.inquiry-gruppen__head .material-symbols-outlined { color: var(--color-indigo-500); }
.inquiry-gruppen__stats { margin-left: auto; }
.inquiry-gruppen__block .table { margin: 0; }
.inquiry-gruppen__block .table td .material-symbols-outlined { font-size: var(--font-size-md); vertical-align: middle; }
.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;
  /* [KARTEN-KLAPP] Die GANZE Zeile klappt auf und zu (Muster wie im Reiter
     „Unterlagen") — der Zeiger sagt das an. */
  cursor: pointer;
}
/* ⚠ Die bedienbaren Elemente in der Kopfzeile behalten ihren eigenen Zeiger,
   sonst sieht ein Knopf aus wie Flaeche zum Klappen. */
.inquiry-group__head a,
.inquiry-group__head button,
.inquiry-group__head summary,
.inquiry-group__head label,
.inquiry-group__head .js-inquiry-status { cursor: pointer; }
.inquiry-group__head input,
.inquiry-group__head select { cursor: auto; }
/* Pfeil dreht sich beim Aufklappen — dasselbe Verhalten wie .doc-section. */
.js-inquiry-card-toggle .material-symbols-outlined { transition: transform .15s ease; }
/* [KARTEN-KLAPP] Eingeklappt bleibt nur die Kopfzeile: Pfeil + Titel + Antwort-Status. */
.inquiry-group.is-collapsed > :not(.inquiry-group__head) { display: none; }
.inquiry-group.is-collapsed .inquiry-group__head > :not(.js-inquiry-card-toggle):not(.card-header__title):not(.inquiry-status) { display: none; }
.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; }
/* [NACHTRAEGLICHE PREISANFRAGE] Abzeichen fuer Betriebe, die erst nach dem
   Anfrage-Start dazukamen. Sitzt in der Kopfzeile neben dem Namen und muss
   deshalb dieselbe vertikale Mitte halten wie die uebrigen Abzeichen dort
   (Hausregel: nebeneinanderstehende Elemente immer vertikal mittig). */
/* [NACHTRAEGLICHE PREISANFRAGE] Der Nachtrag-Bereich ueber den Partner-Karten.
   ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig — die Felder
     haben unterschiedlich hohe Beschriftungen, deshalb align-items:end auf der
     Feldzeile, damit Knopf und Auswahlfelder auf EINER Grundlinie sitzen. */
/* [NACHTRAEGLICHE PREISANFRAGE] Dasselbe Abzeichen im Vergleich. Steht direkt
   hinter dem Namen, deshalb ein kleiner Abstand und vertikal mittig — Hausregel
   fuer nebeneinanderstehende Elemente. */
.shortlist-partner__late {
  display: inline-flex;
  align-items: center;
  margin-left: .35rem;
  font-size: var(--font-size-xs, .75rem);
  font-weight: 600;
  white-space: nowrap;
}

/* [DATEI-UEBERSICHT v174] Reiter „Dateien" der Preisanfrage. */
/* [DATEI-UEBERSICHT v174] Gruppen-Anhaenge an der Partner-Karte (wieder sichtbar). */
.inquiry-group__atts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem .75rem 0; }
.inquiry-group__atts-label { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.inquiry-group__att { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; }
.inquiry-group__att .material-symbols-outlined { font-size: 1em; }

/* [ANFRAGE-ORDNER v175] Ordner-Bereich im Reiter „Dateien". */
.inquiry-folder__list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.inquiry-folder__item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inquiry-folder__picks { display: flex; flex-direction: column; gap: .25rem; max-height: 16rem; overflow-y: auto; padding: .5rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-sm, 4px); }
.inquiry-folder__pick { display: flex; align-items: center; gap: .45rem; font-size: var(--font-size-sm); }

/* [UNTERLAGEN] Je Bereich eine Box: Text oben, Dateien mit Vorschau darunter. */
/* [UNTERLAGEN] Klappbare Bereichs-Box mit Zaehlern im Kopf. */
.doc-section > summary { cursor: pointer; list-style: none; }
.doc-section > summary::-webkit-details-marker { display: none; }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig. Titel, Pfeil und
   Zaehler sitzen auf EINER Grundlinie, auch wenn die Zaehler kleiner sind. */
.doc-section__head { display: flex; align-items: center; gap: .5rem; }
.doc-section__chevron { transition: transform .15s ease; flex: 0 0 auto; }
.doc-section[open] > summary .doc-section__chevron { transform: rotate(180deg); }
.doc-section__counts { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.doc-section__count {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.doc-section__count .material-symbols-outlined { font-size: 1.05em; }
.doc-section__to { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .75rem; }
.doc-section__to > .material-symbols-outlined { font-size: 1.1rem; color: var(--color-text-muted); }
/* Dropzone je Bereich — flacher als die Vollbild-Variante. */
.doc-section__drop { min-height: 4.5rem; }
.doc-section__drop.is-over { border-color: var(--color-primary, #2563eb); background: var(--color-surface-alt, #f8fafc); }
.doc-section__drop.is-busy { opacity: .6; pointer-events: none; }

/* [UNTERLAGEN] Auswahl-Popup fuer Projektdateien. */
.pf-list { padding: var(--space-3) var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig — die Vorschau ist
   hoeher als der Text daneben. */
.pf-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .5rem; border-radius: var(--radius-sm, 4px); cursor: pointer;
}
.pf-item:hover { background: var(--color-surface-alt, #f8fafc); }
.pf-item__thumb {
  /* ⚠ Doppelt so gross wie die Kacheln in den Abschnitten (Wunsch Betreiber):
     hier waehlt man aus, da muss man das Bild ERKENNEN — in der Liste dient
     es nur der Wiedererkennung. */
  flex: 0 0 auto; width: 5.2rem; height: 5.2rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-alt, #f8fafc);
}
.pf-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-item__thumb .material-symbols-outlined { font-size: 2.6rem; color: var(--color-text-muted); }
/* Schon uebernommen: sichtbar, aber nicht waehlbar. */
.pf-item.is-drin { opacity: .45; cursor: not-allowed; }
.pf-item.is-drin:hover { background: transparent; }
.pf-item__info { display: flex; flex-direction: column; min-width: 0; }
.pf-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc-section__intro { margin: 0 0 .75rem; }
.doc-section__title { display: flex; align-items: center; gap: .4rem; margin: 0; }
.doc-section__readonly { padding: .5rem .75rem; background: var(--color-surface-alt, #f8fafc); border-radius: var(--radius-sm, 4px); }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig — der Hinweis
   „nicht gespeichert" steht neben dem Knopf. */
.doc-section__save { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.doc-section__save-state { color: var(--color-text-muted); }
.doc-section__save-state--offen { color: var(--color-warning, #b45309); font-weight: 600; }
.doc-section__files-label { margin-bottom: .35rem; font-weight: 600; }
.doc-section__upload { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.doc-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig. Die Vorschau ist
   hoeher als der Text daneben, deshalb align-items:center auf der Zeile. */
.doc-file {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
}
.doc-file__pick { display: flex; align-items: center; }
/* Feste Kachel, damit die Zeilen trotz unterschiedlicher Bildmasse buendig bleiben. */
.doc-file__thumb {
  flex: 0 0 auto;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-alt, #f8fafc);
  text-decoration: none;
}
.doc-file__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-file__thumb .material-symbols-outlined { font-size: 1.6rem; color: var(--color-text-muted); }
.doc-file__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig — das
   Herkunfts-Sinnbild ist groesser als der Text daneben. */
.doc-file__meta { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.doc-file__origin-icon { font-size: 1em; }
.doc-file__info a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file__del,
.doc-file__dl { flex: 0 0 auto; }

.inquiry-files__origin { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.inquiry-files__origin .material-symbols-outlined { font-size: 1.1em; }
/* ⚠ display:flex NIE direkt auf einem <td> — deshalb der innere Container. */
.inquiry-files__actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.inquiry-files__upload { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.inquiry-files__upload-field { display: flex; align-items: center; gap: .5rem; flex: 1 1 20rem; }
.inquiry-files__msg { margin: 0; color: var(--color-text-muted); flex-basis: 100%; }
.inquiry-files__msg--error { color: var(--color-danger, #dc2626); font-weight: 600; }

/* [MEHRFACHAUSWAHL] Klappfeld mit Suche und Haekchen (public/js/multi-select.js).
   ⚠ Das Original-<select> bleibt im DOM — es wird nur unsichtbar gemacht, NICHT
     mit display:none entfernt: sonst faende FormData es nicht mehr. */
.ms { position: relative; }
.ms__native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  overflow: hidden;
}
.ms__trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-muted);
  /* ⚠ Ein langer Name darf den Knopf nicht sprengen. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms__trigger--filled { color: var(--color-text); font-weight: 500; }
.ms__panel {
  position: absolute; z-index: var(--z-dropdown, 50);
  top: calc(100% + 2px); left: 0; right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: .5rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.ms__panel[hidden] { display: none; }
.ms__tools { display: flex; gap: .25rem; }
.ms__list { max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig. */
.ms__item {
  display: flex; align-items: center; gap: .45rem;
  padding: .25rem .35rem; border-radius: var(--radius-sm, 4px);
  cursor: pointer; font-size: var(--font-size-sm);
}
.ms__item:hover { background: var(--color-surface-alt, #f8fafc); }
.ms__item[hidden] { display: none; }
.ms__empty { margin: 0; padding: .35rem; }

/* [NACHTRAEGLICHE PREISANFRAGE] Eigene, klappbare Box.
   ⚠⚠ overflow SICHTBAR — sonst schneidet `.card { overflow: hidden }` die
     Klappfelder der Mehrfachauswahl ab. Sie haengen absolut und ragen ueber den
     Kartenrand hinaus; genau das war der Fehler, bevor der Bereich eine eigene,
     nicht mehr verschachtelte Box wurde. */
/* ⚠ Abstand OBEN wie unten: die Box steht jetzt als eigenstaendige Karte
   zwischen der grossen Anfrage-Karte und den Partner-Karten und klebte sonst
   an der darueberliegenden. */
.late-partner { margin: 1rem 0; overflow: visible; }
.late-partner > summary { cursor: pointer; list-style: none; }
.late-partner > summary::-webkit-details-marker { display: none; }
/* ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig. */
/* ⚠ `.card-header` verteilt mit justify-content:space-between — Pfeil, Sinnbild
   und Titel wurden dadurch ueber die ganze Breite auseinandergezogen. Hier
   sollen sie beieinander stehen. */
/* ⚠⚠ HINTERGRUND LEICHT ABWEICHEND (Wunsch Betreiber 27.08.2026): der Kasten
   sieht aus wie eine Partner-Karte, ist aber KEINE — er legt welche an. Der
   zarte Ton unterscheidet ihn, ohne ihn aus der Reihe zu nehmen. Kopfzeile UND
   Rumpf tragen ihn, sonst bliebe unter der Kopfzeile ein weisser Streifen. */
.late-partner,
.late-partner > summary,
.late-partner__body { background: var(--color-indigo-50, #eef2ff); }
.late-partner__head { gap: var(--space-3); }
/* Der Klapp-Pfeil ist ein <span> mit Knopf-Aussehen (im <summary> darf kein
   echter Knopf stehen) — er braucht deshalb die Knopf-Groesse von Hand. */
.late-partner__toggle { display: inline-flex; align-items: center; justify-content: center; }
.late-partner__title .material-symbols-outlined { color: var(--color-indigo-500); }
.late-partner__chevron { transition: transform .15s ease; }
.late-partner[open] > summary .late-partner__chevron { transform: rotate(180deg); }
/* ⚠ Auch der Karten-Rumpf darf nicht abschneiden — er umschliesst die Felder. */
.late-partner__body { overflow: visible; }
.late-partner__body { display: flex; flex-direction: column; gap: .75rem; }
.late-partner__intro { display: flex; align-items: center; gap: .5rem; }
.late-partner__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
}
/* ⚠ Mehrfachauswahl: beide Listen gleich breit und gleich hoch, damit man
   Gewerk und Betrieb nebeneinander vergleichen kann. */
.late-partner__pick { flex: 1 1 18rem; min-width: 14rem; }
/* ⚠ Die Hoehe kommt jetzt vom Mehrfachauswahl-Bauteil, nicht vom Select. */
/* Der Knopf sitzt unten buendig mit den Listen, nicht auf halber Hoehe. */
.late-partner__action { display: flex; flex-direction: column; gap: .35rem; justify-content: flex-end; }
.late-partner__msg { margin: 0; color: var(--color-text-muted); }
.late-partner__msg--error { color: var(--color-danger, #dc2626); font-weight: 600; }
/* ⚠⚠ EIGENE KLASSE, NICHT display:flex auf .late-partner__msg. Die zweite
   Meldung in diesem Kasten (#late-partner-msg) wird ueber das hidden-Attribut
   versteckt — eine Autor-Regel mit display schlaegt die Browser-Regel
   [hidden]{display:none} und liesse sie dauerhaft sichtbar stehen.
   ⚠ Symbol und Text vertikal mittig, wie ueberall im Haus. */
.late-partner__notice { display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; }
.late-partner__notice .material-symbols-outlined { font-size: 1.1rem; }

.inquiry-group__late {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  white-space: nowrap;
}

.inquiry-group__rating {
  font-size: var(--font-size-sm);
  color: #f59e0b;
  letter-spacing: 1px;
  margin-left: 4px;
}
/* Strukturierte Meta-Zeile im Karten-Kopf: volle Breite unter Titel+Status,
   je Angabe eine Zelle mit Beschriftung oben und Wert darunter („Tabelle"). */
.inquiry-meta {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: flex-start;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.inquiry-meta__cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Trennstriche zwischen den Zellen — nur nebeneinander (ab 720px); in der
   gestapelten Schmal-Ansicht wären linke Randstriche nur Störkanten. */
@media (min-width: 720px) {
  .inquiry-meta { column-gap: 0; }
  .inquiry-meta__cell { padding: 0 var(--space-5); }
  .inquiry-meta__cell::before {
    content: '';
    position: absolute; left: 0; top: 3px; bottom: 3px;
    width: 1px; background: var(--color-border);
  }
  /* Zeilenanfänge (erste Zelle + JS-markierte Wrap-Anfänge) ohne Strich */
  .inquiry-meta__cell:first-child,
  .inquiry-meta__cell--zeilenstart { padding-left: 0; }
  .inquiry-meta__cell:first-child::before,
  .inquiry-meta__cell--zeilenstart::before { display: none; }
}
.inquiry-meta__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.inquiry-meta__value {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm);
  min-height: 26px;
}
.inquiry-meta__value a { color: var(--color-indigo-500); display: inline-flex; align-items: center; gap: 6px; }
/* [Support 25.09.] Meta-Zeile ist Text, kein Klapp-Griff: markierbar, Textcursor. */
.inquiry-meta { cursor: text; user-select: text; }
.inquiry-meta a, .inquiry-meta button { cursor: pointer; }
.inquiry-meta__value--tel { flex-wrap: wrap; gap: 4px; }
.inquiry-meta__sep { color: var(--color-text-muted); }
.inquiry-meta__copy { padding: 2px; }
.inquiry-meta__copy .material-symbols-outlined { font-size: var(--font-size-sm); }
.inquiry-meta__copy.is-copied { background: var(--color-primary); }
.inquiry-meta__copy.is-copied .material-symbols-outlined { color: #fff; }
.inquiry-meta__value .material-symbols-outlined { font-size: var(--font-size-md); color: var(--color-text-muted); }
.inquiry-meta__value .badge .material-symbols-outlined { color: inherit; }
/* Feedback-Öffner als klickbarer Badge-Chip (Optik wie der „Versendet"-Chip) */
.inquiry-meta__badgebtn { cursor: pointer; border: 0; font: inherit; }

/* „…"-Aktionen-Menü der Link-Zeile (details-Dropdown, Muster mail-history).
   ⚠ .card hat overflow:hidden (Eckenrundung) — das würde das Panel an der
   Kartenkante abschneiden. Die Anfrage-Karte stellt deshalb auf visible um
   und rundet stattdessen den Tabellen-Body unten selbst. */
.card.inquiry-group { overflow: visible; }
.inquiry-group > .card-body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
/* inline-flex statt inline-block: als Flex-Kind der Link-Zeile streckt sich
   das details auf die Zeilen-Höhe (align-items: stretch) — der Summary-Button
   füllt sie und ist damit genauso hoch wie Öffnen/PDF daneben. */
.inquiry-actions { position: relative; display: inline-flex; margin-left: auto; }
.inquiry-actions[open] { z-index: 60; }
.inquiry-actions__summary {
  list-style: none; user-select: none;
  display: inline-flex; align-items: center;
  height: 100%;
}
.inquiry-actions__summary::-webkit-details-marker { display: none; }
.inquiry-actions__chev { font-size: 1.1em; transition: transform var(--transition); }
.inquiry-actions[open] .inquiry-actions__chev { transform: rotate(180deg); }
.inquiry-actions__panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  min-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: 4px;
}
.inquiry-actions__item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  padding: 7px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer;
  font: inherit; font-size: var(--font-size-sm); text-align: left;
  color: inherit; text-decoration: none;
  white-space: nowrap;
}
.inquiry-actions__item:hover { background: var(--color-surface-alt); }
.inquiry-actions__item:disabled { opacity: .5; cursor: not-allowed; }
.inquiry-actions__item .material-symbols-outlined { font-size: 1.15em; color: var(--color-text-muted); }
.inquiry-actions__item--danger,
.inquiry-actions__item--danger .material-symbols-outlined { color: var(--color-danger); }
.inquiry-actions__form { margin: 0; }
.inquiry-actions__sub {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 6px 34px;
  font-size: var(--font-size-xs);
}
.inquiry-actions__caption {
  display: flex; align-items: center; gap: .5rem;
  padding: 7px 10px 2px;
  font-size: var(--font-size-sm);
}
.inquiry-actions__caption .material-symbols-outlined { font-size: 1.15em; color: var(--color-text-muted); }
.inquiry-actions__sumrow {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 7px 34px;
}
.inquiry-actions__sumrow .form-input { width: 120px; }
.inquiry-actions__divider { height: 1px; background: var(--color-border); margin: 4px 6px; }

/* Anfrage-Positions-Tabelle: Kopf + Zeilen in normaler Größe (wie Gruppen-Text
   14px) statt der 16px-Basisgröße — Nutzer-Wunsch 2026-08-10. */
.inquiry-group > .card-body .table th,
.inquiry-group > .card-body .table td { font-size: var(--font-size-sm); }

/* Datei-Kachel-Overlay: Download + Löschen oben rechts über der Kachel */
.md-tilewrap { position: relative; min-width: 0; }
.md-tilewrap .md-tile { height: 100%; }
.md-tilewrap__actions {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; gap: 4px;
}
.md-tilewrap__actions form { margin: 0; display: flex; }
.md-tilewrap__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; padding: 0; text-decoration: none;
}
.md-tilewrap__btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.md-tilewrap__btn--danger:hover { color: var(--color-danger); }
.md-tilewrap__btn .material-symbols-outlined { font-size: 16px; }

/* 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: flex-start;  /* Spalten (Frist / Checkboxen / Bulk) oben bündig */
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-top: 1px solid var(--color-border);
}
/* Auch bei abgelaufener Frist grau — der Warn-Badge neben dem Datumsfeld
   bleibt der sichtbare Hinweis (Nutzer-Wunsch: „Hintergrund: Grau"). */
.inquiry-toolbar--expired { background: #f9fafb; }
.inquiry-toolbar__bulk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Rechte Spalte: beide Bulk-Aktionen untereinander, rechtsbündig. */
.inquiry-toolbar__bulkcol {
  margin-left: auto;       /* pusht den Block ans rechte Ende */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
/* 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;
  align-items: flex-start;  /* Frist-Spalte + Checkbox-Spalte oben bündig */
  gap: var(--space-6);
}
/* Linke Spalte: Label ÜBER dem Datumsfeld, Speichern direkt darunter. */
.inquiry-deadline__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
/* Label-Zeile: Label + abgelaufen-Badge bzw. Aktiv-Hinweis nebeneinander. */
.inquiry-deadline__labelrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Die drei Options-Checkboxen untereinander. */
.inquiry-deadline__opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.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;
}

/* [ANFRAGE 18.09.2026] Kommentar des Anbieters als Zeile UEBER der ersten Gruppe, gelb hinterlegt — gleiche Zellen und
   Schrift wie eine Positionszeile, traegt nur Text: Kurzlabel + Freitext mit Zeilenumbruechen. */
.inquiry-partner-comment > td { background: #fef9c3; }
.inquiry-partner-comment > td:first-child { border-left: 4px solid #facc15; }
.inquiry-partner-comment__icon { font-size: 18px; color: #a16207; vertical-align: middle; }
.inquiry-partner-comment__text { white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
/* [KI-LESER] Preise aus dem Kommentar LINKS neben dem Text, jeder wie ein Einzelpreis (td-answer__price) mit Bezeichnung. */
.inquiry-partner-comment__zeile { display: flex; align-items: flex-start; gap: var(--space-4); }
.inquiry-partner-comment__preise { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; min-width: 12rem; max-width: 22rem; }
.inquiry-partner-comment__preis { display: flex; flex-direction: column; padding: 4px 8px; background: #fff; border: 1px solid #fde68a; border-radius: 6px; }
.inquiry-partner-comment__preis-label { font-size: var(--font-size-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.inquiry-partner-comment__quelle { font-size: var(--font-size-xs); color: #a16207; }
.inquiry-partner-comment__body { flex: 1 1 auto; min-width: 0; }
.inquiry-partner-comment__aktion { flex: 0 0 auto; margin: 0; }
@media (max-width: 720px) { .inquiry-partner-comment__zeile { flex-wrap: wrap; } }
/* 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; }
/* [v275] Textvorlage: geordnete Baustein-Listen (Anschreiben / Schlusstext) */
.tv-liste__titel { margin: 0 0 .5rem; }
.tv-liste__eintraege { list-style: decimal; margin: 0 0 .5rem; padding-left: 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.tv-liste__eintrag { display: flex; align-items: center; gap: .25rem; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius, 8px); background: var(--color-surface, #fff); }
.tv-liste__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tv-liste__leer { margin: 0 0 .5rem; }
.tv-liste__neu { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tv-liste__neu .form-select { max-width: 28rem; }
/* [30.09.2026] Anrede vor den Bausteinen des Anschreibens — wie gedruckt, nur zum Lesen */
.qtb__anrede { display: flex; align-items: center; gap: .6rem; padding: 6px 10px; margin-bottom: var(--space-2); border: 1px dashed var(--color-border); border-radius: var(--radius, 8px); background: var(--color-bg-subtle, #f9fafb); }
.qtb__anrede-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.qtb__anrede-text { flex: 1 1 auto; min-width: 0; }
.qtb__anrede-wahl { flex: 0 1 26rem; min-width: 0; }
.qtb__anrede-eigen { flex: 1 1 14rem; min-width: 0; }
.qtb__anrede-status { flex: 1 1 100%; }
.qtb__anrede--gespeichert { border-color: #86efac; background: #f0fdf4; }   /* kurz grün nach dem Speichern */
/* [STANDARDTEXTE] Platzhalter-Felder unter dem Text (✓ Einsetzen) */
.qtb__ph { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin-top: .5rem; padding: .5rem .75rem; border: 1px dashed var(--color-border, #d1d5db); border-radius: .5rem; background: var(--color-bg-subtle, #f9fafb); }
.qtb__ph-feld { display: flex; flex-direction: column; gap: .2rem; min-width: 12rem; }
.qtb__ph-label { font-size: .78rem; color: var(--color-text-muted, #6b7280); }
.qtb__ph-label code { font-size: .72rem; }
.qtb__ph-apply { align-self: flex-end; }
.wz-platzhalter { margin-top: 1rem; }
/* [PLATZHALTER-WERTE 18.09.2026] Eine Zeile je Platzhalter: Bezeichnung · Feld · Standard-Knopf */
.wz-platzhalter__liste { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.wz-platzhalter__zeile { display: grid; grid-template-columns: minmax(14rem, 1fr) 11rem auto; gap: var(--space-3); align-items: center; padding: .55rem var(--space-3); }
.wz-platzhalter__zeile + .wz-platzhalter__zeile { border-top: 1px solid var(--color-border); }
.wz-platzhalter__label { display: flex; flex-direction: column; gap: .1rem; margin: 0; cursor: pointer; }
.wz-platzhalter__label code { font-size: .72rem; color: var(--color-text-muted); }
.wz-platzhalter__input { text-align: right; }
.wz-platzhalter__standard { white-space: nowrap; }
.wz-platzhalter__standard:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) { .wz-platzhalter__zeile { grid-template-columns: 1fr; } .wz-platzhalter__input { text-align: left; } }
.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;
}
/* Kundenanfragen (Energie-Analyse): Anlage, Modul-Klappkarten, Erfassung */
.ca-create__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: var(--space-4); }
.ca-modpick__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; }
.ca-modpick__opt { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--font-size-sm); }
/* [MEHRFACH] Checkbox-Liste der Mehrfachauswahl — umbricht in Zeilen, Optionen bleiben klickbar beisammen. */
.ca-multi { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.ca-multi__opt { white-space: nowrap; cursor: pointer; }
.ca-modpick summary { cursor: pointer; }
.ca-mod__summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.ca-mod__summary::-webkit-details-marker { display: none; }
.ca-mod__icon { color: var(--color-primary); }
.ca-mod__chev { margin-left: auto; color: var(--color-text-muted); transition: transform var(--transition); }
.ca-mod[open] .ca-mod__chev { transform: rotate(180deg); }
.ca-mod__body { border-top: 1px solid var(--color-border); }
/* Abschluss-Popup (öffentliche Datenaufnahme): schmales einspaltiges Panel */
.ca-finish-panel { max-width: 560px; }

/* [BAUSTELLEN] Liegenschaften-Karte in der Kundenmaske — Klappzeilen im
   Stil der Kontaktpersonen, inaktive Einträge sichtbar aber gedimmt. */
.cs-item { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .5rem; }
.cs-item--add { border-style: dashed; margin-top: 1rem; }
.cs-item--inactive { opacity: .65; }
.cs-item__summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; list-style: none; flex-wrap: wrap; }
.cs-item__summary::-webkit-details-marker { display: none; }
/* [ANZAHLUNG/MATERIAL v256] Auswahl „Art des Abschlags" (invoices/_abschlag_auswahl.php) — beim Anlegen, im Folgebeleg, in der Kettenkarte */
.abschlag-auswahl { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.abschlag-auswahl--kompakt { align-items: center; gap: .3rem; vertical-align: middle; }
.abschlag-auswahl:not(.abschlag-auswahl--kompakt) .form-field { display: flex; flex-direction: column; gap: 4px; }   /* Beschriftung ueber dem Feld */
.abschlag-auswahl .form-field[hidden] { display: none; }
.abschlag-auswahl__prozent { max-width: 9rem; }
.abschlag-auswahl__betrag  { max-width: 10rem; }
.abschlag-auswahl__text    { min-width: 14rem; }
.abschlag-auswahl--kompakt .abschlag-auswahl__prozent { width: 4.5rem; }
.abschlag-auswahl--kompakt .abschlag-auswahl__betrag  { width: 7rem; }
.abschlag-auswahl--kompakt .abschlag-auswahl__text    { min-width: 0; width: 11rem; }
/* ⚠ Vorher inline display:flex — das schlug [hidden], die Abschlagsfelder standen auch bei „Rechnung" da. */
.rechnung-anlegen__abschlag { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; flex-basis: 100%; }
.rechnung-anlegen__abschlag[hidden] { display: none; }
/* [AUS DEM ANGEBOT 24.09.2026] Auswahl der Auftragspositionen im Rechnungseditor */
.aa-liste { max-height: 55vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 8px; padding: .25rem .5rem; }
.aa-liste__titel { font-weight: 600; font-size: var(--font-size-sm); padding: .45rem 0 .15rem; border-bottom: 1px solid var(--color-border); }
.aa-liste__zeile { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; margin: 0; }
.aa-liste__zeile--da { opacity: .6; }
.aa-liste__nr { min-width: 3.5rem; font-family: var(--font-mono, monospace); font-size: var(--font-size-sm); }
.aa-liste__text { flex: 1 1 auto; min-width: 0; }
.aa-liste__menge { flex: none; font-size: var(--font-size-sm); }
/* [VORGANGSKETTE 24.09.2026] Projekte je Baustelle + Sprungziel der Leiste (#baustelle-<id>) */
.cs-item:target { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.cs-projekte__liste { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.cs-projekte__liste a { display: inline-flex; align-items: center; gap: .35rem; }
.cs-projekte__icon { font-size: 18px; color: var(--color-text-muted); }
.cs-item__summary--add { color: var(--color-primary); font-weight: 600; }
/* Kleines Symbol in einer Textzeile (Baustelle in Listen/Köpfen) */
.ca-inline-icon { font-size: 1rem; vertical-align: text-bottom; margin-right: .2rem; }

/* Kunden-Freigabe-Zeile + Unterschrift-Anzeige */
.ca-share { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; border-top: 1px solid var(--color-border); }
.ca-share__url { font-size: var(--font-size-sm); word-break: break-all; }
/* „Daten anfordern": Label + Adressfeld + Senden-Knopf auf einer Mittellinie */
.ca-share__mail { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ca-share__mailto { width: 18rem; max-width: 100%; }
.ca-signature { max-height: 80px; max-width: 260px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }

/* Erfassungs-Tabelle: Was | Feld | Status */
/* ⚠ .table setzt global --font-size-sm. Die Frage ist aber das, was der Kunde
   liest, bevor er antwortet — sie laeuft auf normaler Schriftgroesse. */
.ca-table__what { width: 28%; font-size: var(--font-size-base); }
.ca-table__what label { cursor: pointer; }
.ca-table__status { width: 9rem; white-space: nowrap; }
.ca-table td { vertical-align: middle; }

/* ⚠⚠ AUF DEM HANDY IST DREISPALTIG ZU ENG. Was + Feld + Status brauchten
   402 px auf einem 375-px-Schirm: die Frage brach auf drei Zeilen um, das
   Eingabefeld blieb briefmarkengross, und die Status-Spalte schnitt sich
   selbst ab. Deshalb wird die Zeile hier zur Karte — Frage, darunter der
   Status, darunter das Feld ueber die volle Breite.
   ⚠ display:flex steht auf dem TR, NICHT auf den TDs (das zerlegt in Safari
   die Zelle); die Reihenfolge macht order, nicht die HTML-Folge. */
@media (max-width: 720px) {
  .ca-table, .ca-table tbody { display: block; }
  .ca-table thead { display: none; }
  .ca-table tbody tr {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .ca-table tbody tr:last-child { border-bottom: none; }
  .ca-table tbody td { display: block; width: auto; padding: 0; border-bottom: none; }
  .ca-table__what   { order: 1; }
  .ca-table__status { order: 2; white-space: normal; }
  .ca-table__field  { order: 3; }
  .ca-table__field .form-input,
  .ca-table__field .form-select,
  .ca-table__field textarea { width: 100%; max-width: none; }
}
.ca-state { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.ca-mod__foot { padding: var(--space-3); border-top: 1px solid var(--color-border); }
.ca-pre-wrap { white-space: pre-wrap; }
.ca-richtext-view p { margin: 0 0 .4rem; }
.ca-richtext-view :last-child { margin-bottom: 0; }
.ca-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ca-dot--ok { background: var(--color-success); }
.ca-dot--missing { background: var(--color-border); box-shadow: inset 0 0 0 2px var(--color-text-muted); }
.ca-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.ca-thumb { position: relative; width: 96px; height: 96px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-bg); }
.ca-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ca-thumb__pdf { font-size: 2.2rem; color: var(--color-error); }
.ca-thumb__del { position: absolute; top: 2px; right: 2px; border: none; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ca-thumb__del .material-symbols-outlined { font-size: 15px; }
.ca-upload { display: flex; align-items: center; gap: var(--space-2); }
.ca-upload__file { max-width: 340px; }
.ca-upload__drop { flex: 0 1 420px; min-width: 0; }
.ca-upload__manual { display: flex; align-items: center; gap: var(--space-2); }
/* hidden-Attribut muss das display:flex schlagen (JS versteckt die Zeile) */
.ca-upload__manual[hidden] { display: none; }
/* Zeilen-Formulare: dürfen umbrechen — Inputs mit flex-Basis statt width:100 %,
   sonst quetscht die Flex-Zeile das Namensfeld auf schmalen Fenstern kaputt. */
.ca-def-add, .ca-def-row__form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ca-def-row__form { flex: 1; min-width: 0; }
.ca-def-row__form .form-input, .ca-def-add .form-input { width: auto; flex: 1 1 220px; min-width: 10rem; }
.ca-def-add__sort { flex: 0 0 6rem !important; width: 6rem; min-width: 6rem !important; }
.ca-def-row__handle { cursor: grab; color: var(--color-text-muted); flex: 0 0 auto; }
.ca-def-row__handle:active { cursor: grabbing; }
.ca-def-row--sorting { opacity: .5; }
.ca-def-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.ca-def-row--head { background: var(--color-bg); border-radius: var(--radius); padding: var(--space-2); }
.ca-def-row--add { padding-top: var(--space-3); }
.ca-def-row__type { flex: 0 0 10rem; min-width: 10rem !important; width: 10rem; }
.ca-pkg__name { max-width: 16rem; }
.ca-pkg__mods { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); flex: 1; min-width: 0; }

/* Verträge (Admin): Ausfüll-Maske — Platzhalter-Felder zweispaltig */
.contract-fill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: var(--space-4); }

/* GAEB-Reader: Zusatztexte (Projekt-/Baubeschreibung) als Klappkarte überm LV */
.gaeb-addtexts__summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.gaeb-addtexts__summary::-webkit-details-marker { display: none; }
.gaeb-addtexts__summary .material-symbols-outlined { color: var(--color-primary); }
.gaeb-addtexts__chev { margin-left: auto; color: var(--color-text-muted); transition: transform var(--transition); }
.gaeb-addtexts[open] .gaeb-addtexts__chev { transform: rotate(180deg); }
.gaeb-addtexts__body { border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.gaeb-addtexts__text { white-space: pre-wrap; font-size: var(--font-size-sm); margin-top: .25rem; }

/* Anfrage-Seite: Datei-Kacheln im Mappen-Stil, kompakter (kein Auswahl-/
   Positions-Overlay) — ganze Kachel = Link. */
.md-grid--inquiry {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.md-grid--inquiry .md-tile__preview { height: 88px; }
.md-grid--inquiry .md-tile__pdficon { font-size: 40px; }
.md-tile--link { text-decoration: none; color: inherit; cursor: pointer; }
.md-tile--link:hover { border-color: var(--color-primary); }
.md-tile--link .md-tile__meta { padding-bottom: 6px; }

/* Mail-Verlauf-Dropdown (Anfrage-Seite): eine Sendung = Chip, mehrere =
   zugeklapptes <details>, Panel absolut, neueste zuerst. */
.mail-history { position: relative; display: inline-block; }
.mail-history__single { text-decoration: none; cursor: pointer; }
.mail-history__summary { cursor: pointer; list-style: none; user-select: none; }
.mail-history__summary::-webkit-details-marker { display: none; }
.mail-history__chev { font-size: 1.1em; transition: transform var(--transition); }
.mail-history[open] .mail-history__chev { transform: rotate(180deg); }
.mail-history__list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 280px; max-height: 280px; overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: 4px;
}
.mail-history__row {
  display: flex; align-items: center; gap: .4rem;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  text-decoration: none; color: inherit;
  white-space: nowrap;
}
.mail-history__row:hover { background: var(--color-surface-alt); }
.mail-history__row--failed { color: var(--color-danger); }
.mail-history__row .material-symbols-outlined { font-size: 1.1em; }
.mail-history__to {
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.mail-history__open { margin-left: auto; color: var(--color-text-muted); }
/* 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 {
  /* Vorerst ausgeblendet — die Gruppen-Art bleibt serverseitig erhalten (kind),
     nur die Auswahl ist aus der Oberfläche genommen. Zum Zurückholen: Zeile löschen. */
  display: none;
  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-textarea--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; }
/* ⚠ min-width:0 ist Pflicht: Flex-Items haben von Haus aus min-width:auto und
   schrumpfen damit NIE unter ihr laengstes Wort. Dateinamen ohne Leerzeichen
   ("2463PATR_Bestand_Technikzentrale_HZR2-10_2026-03-06.pdf") sprengten so die
   150px-Kachel und liefen ueber die Nachbarkachel. */
.public-attachment__info { display: flex; flex-direction: column; min-width: 0; }
/* "anywhere" statt "break-word": nur anywhere wirkt auch auf die min-content-
   Breite, mit der die Flexbox rechnet - break-word allein bricht den Text zwar
   optisch, die Box bleibt aber zu breit. */
.public-attachment__name { font-weight: 600; overflow-wrap: anywhere; }
.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); }
/* [VORBEMERKUNGEN NACHLADEN 11.09.2026] Knopfzeile unter der Beschreibung (nur GAEB) */
.calc-description-edit__reload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.calc-description-edit__reload .form-checkbox-row { margin: 0; }
.calc-description-edit__reload-hint { flex: 1 1 100%; }   /* Hinweis in eigener Zeile unter Knopf + Haken */
/* [DATANORM BEFUNDE 8+9] Import-Hinweise in der Dateiliste (kein Fehler, aber sichtbar) */
.datanorm-import-warn { color: #b45309; margin-top: .2rem; }
.datanorm-import-warn__icon { font-size: 1rem; vertical-align: -.2em; margin-right: .2rem; }
/* [ARTIKELBILDER 23.09.2026] Miniatur aus dem DATANORM-Archiv: feste Kante, object-fit contain —
   die Zeile darf beim Laden nicht springen. Groß im Artikel-Kopf (max 240px). */
.datanorm-article-zelle { display: inline-flex; align-items: center; gap: .5rem; }
.datanorm-article-bild { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain;
  background: #fff; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; }
.datanorm-article-bild--gross { width: 240px; height: 240px; flex-basis: 240px; max-width: 100%; margin-right: 1rem; }
.urkalk-calc__result--bild, .urkalk-detail__result--bild { display: grid; grid-template-columns: 40px 1fr; column-gap: .5rem; align-items: center; }
.urkalk-calc__result-bild, .urkalk-detail__result-bild { grid-row: 1 / span 2; width: 40px; height: 40px; object-fit: contain;
  background: #fff; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; }
/* Superuser „GAEB-Vorbemerkungen": Sammel-Lauf-Zeile */
.su-gaeb-vb__run {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
.su-gaeb-vb__run .form-checkbox-row { margin: 0; }

/* ── 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); }
/* [30.09.2026] Hinweiszeile bündig unter dem Kartenkopf (Angebote/Rechnungen: „Neue … über das Projekt"): ohne Abstand, ohne Balken links */
.alert--leiste  { margin: 0; border-left: 0; border-right: 0; border-radius: 0; }
.alert--orange  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }   /* [30.09.2026] Bau-Hinweis Rechnungen, bündig über dem blauen */
.alert--leiste + .alert--leiste { border-top: 0; }                                 /* zwei Leisten übereinander: keine doppelte Linie */

/* 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; }
/* [FAVORITEN 22.09.2026] Kopfzeile mit X in beiden Aufklappmenüs (Firma, Favoriten) + Favoriten-Einträge als Links. */
.context-switcher__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1); font-size: .8rem; font-weight: 600; color: var(--color-text); }
.context-switcher__x { border: 0; background: none; cursor: pointer; color: var(--color-text-muted); display: inline-flex; padding: 2px; border-radius: var(--radius-sm); }
.context-switcher__x:hover { color: var(--color-text); background: var(--color-gray-100); }
.context-switcher__x .material-symbols-outlined { font-size: 20px; }
.context-switcher--fav .context-switcher__icon { color: #f59e0b; }
a.ctx-item { text-decoration: none; }
.ctx-item__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ctx-item__label { color: var(--color-text); font-weight: 600; }
.ctx-item__sub { font-size: .72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* 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); }
/* [30.09.2026] Angebots-Wizard: GAEB-Dateien als Tabelle mit Auswahl — die ganze Zeile ist klickbar, die gewählte hebt sich ab */
.wz-gaeb-tabelle__zeile { cursor: pointer; }
.wz-gaeb-tabelle__zeile td { vertical-align: middle; }
.wz-gaeb-tabelle__zeile:has(input:checked) { background: #eef5fb; }

/* ── 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;
  /* [LISTE] Lange Dateinamen brachen in die Bezeichnung — jetzt eine Zeile mit Auslassung, der volle Name im Tooltip. */
  max-width: 26rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 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; }
/* ⚠ Links .6rem statt .25rem: der rote Balken der vertraulichen Zeile (inset-Schatten)
   sitzt sonst direkt am Vorschaubild. Der Abstand gilt fuer ALLE Zeilen, sonst
   staende die vertrauliche gegen die anderen versetzt. */
.pfiles-list__row { display: flex; align-items: center; gap: .6rem; padding: .45rem .25rem .45rem .6rem; 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; }
/* ⚠ min-width statt 0: mit drei Kennzeichen in der Zeile schrumpfte der Dateiname
   auf NULL — die Zeile zeigte Kennzeichen und Datum, aber nicht, um welche Datei es
   geht. Der Name behaelt 12rem, die Angaben rechts weichen stattdessen um. */
.pfiles-list__name { flex: 1 1 auto; min-width: 12rem; 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; }
/* ⚠ Zwei Spalten statt einer: die Breite der Kennzeichen-Spalte darf nicht vom Inhalt
   abhaengen, sonst wandern Ordner und Art in jeder Zeile an eine andere Stelle. */
.pfiles-list__kz   { flex: 0 0 16rem; min-width: 0; white-space: normal; }
/* ⚠ 13.5rem UND min-width:0: ein Flex-Element waechst sonst ueber seine Basis hinaus,
   sobald der Inhalt breiter ist (min-width:auto) — „1.000 KB · 27.08.2026 09:53" ist die
   laengste Zeile, und schon drei Pixel Unterschied verschieben die Spalten daneben. */
.pfiles-list__wann { flex: 0 0 13.5rem; min-width: 0; overflow: hidden; text-align: right; }
.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;
  flex-wrap: wrap;          /* sonst schrumpfen die Tabs bis zum Wortbruch */
  gap: 2px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.entity-tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;      /* lieber umbrechen als „Firmen-\A gruppe" */
  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[hidden] { display: none; }
.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 entfernt (2026-08-10): der Feedback-Öffner ist jetzt
   der Textlink .inquiry-meta__link in der Meta-Zeile. */

/* [KOMPAKT-DETAILS] Popup mit der verschobenen Detail-Karte. z-index 1100 —
   bewusst UNTER dem Feedback-Popup (1200), das aus der Karte heraus öffnet. */
.inquiry-detail-modal { position: fixed; inset: 0; z-index: 1100; }
.inquiry-detail-modal[hidden] { display: none; }
.inquiry-detail-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .5);
}
.inquiry-detail-modal__panel {
  position: relative;
  margin: 4vh auto;
  width: min(1150px, 94vw);
  max-height: 92vh; overflow: auto;
  background: var(--color-bg, var(--color-surface-alt));
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
  padding: var(--space-4);
}
.inquiry-detail-modal__close {
  position: sticky; top: 0; float: right; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; padding: 0;
}
.inquiry-detail-modal__close:hover { background: var(--color-surface-alt); }
.inquiry-detail-modal__body .inquiry-group { margin-top: 0; }
/* Die Kompakt-Ansicht blendet .inquiry-group hart aus (!important) —
   im Popup muss die verschobene Karte trotzdem sichtbar sein. */
body[data-inquiry-view="kompakt"] .inquiry-detail-modal .inquiry-group,
body[data-inquiry-view="gruppen"] .inquiry-detail-modal .inquiry-group { display: block !important; }

.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; }
/* Offenes Dropdown darf nicht an der Kartenkante abgeschnitten werden (.card { overflow: hidden }) —
   bei einer kurzen Kalkulation fehlten sonst die unteren Einträge (Aus Leistungs-Gruppe, Neue Gruppe). */
.card--menue-offen { overflow: visible; }
.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: flex-start; gap: .6rem; cursor: pointer; min-height: 2.1rem; }
.urkalk-noterow__head .badge { flex-shrink: 0; }
.urkalk-noterow__prevwrap { flex: 1; min-width: 0; }
/* Vorschau WIE EINGEGEBEN (Umbrüche bleiben), auf 2 Zeilen geclampt; „Mehr lesen"
   hebt den Clamp auf. Quill-Absätze ohne Margin, sonst misst der Clamp daneben. */
.urkalk-noterow__preview {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--color-text, #111827);
}
.urkalk-noterow__preview--open { display: block; -webkit-line-clamp: unset; }
.urkalk-noterow__preview p { margin: 0; }
.urkalk-noterow__more {
  display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none;
  color: var(--color-primary, #2563eb); font-size: var(--font-size-xs, 12px); cursor: pointer;
}
.urkalk-noterow__more[hidden] { display: none; }
.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; }
/* Verarbeitungshinweis während Upload + KI-Auslese ([hidden] braucht die
   explizite Gegenregel — es verliert sonst gegen display:flex). */
.inquiry-offer-upload__busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.inquiry-offer-upload__busy[hidden] { display: none; }
.inquiry-offer-upload__spin {
  font-size: var(--font-size-lg);
  color: var(--color-indigo-500);
  animation: inquiry-upload-spin 1s linear infinite;
}
@keyframes inquiry-upload-spin { to { transform: rotate(360deg); } }
/* Ergebnis-Zeile nach der Verarbeitung (KI übernommen / Vorschlag / nichts). */
.inquiry-offer-upload__result--ok   { color: var(--color-success-text); }
.inquiry-offer-upload__result--warn { color: var(--color-warning-text); }
.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; }
/* [DOKUMENTART v259] Weitere Dokumente (Mailtext, AGB, Datenblatt) zugeklappt unter den Angeboten. */
.inquiry-files__weitere { margin-top: .5rem; }
.inquiry-files__weitere > summary { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; list-style: none;
  font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.inquiry-files__weitere > summary::-webkit-details-marker { display: none; }
.inquiry-files__weitere > summary .material-symbols-outlined { font-size: 1.1rem; transition: transform .15s; }
.inquiry-files__weitere[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.inquiry-files__weitere > .md-grid { margin-top: .4rem; }
/* Kachel + „Art ändern" untereinander: die Kachel füllt, die Auswahl sitzt darunter. */
.md-grid--inquiry .md-tilewrap { display: flex; flex-direction: column; gap: 4px; }
.md-grid--inquiry .md-tilewrap .md-tile { height: auto; flex: 1 1 auto; }
.md-tilewrap__art { margin: 0; }
.md-tilewrap__art .form-select { width: 100%; font-size: var(--font-size-xs); padding-top: 2px; padding-bottom: 2px; }
/* [MAIL-HINWEISE v259] Kurzfassung an der Partner-Karte + Liste in der gelben Zeile. */
.inquiry-hinweise-kurz { flex-basis: 100%; display: flex; align-items: flex-start; gap: .4rem; margin-top: .5rem;
  padding: .45rem .7rem; border-radius: 8px; background: #fef9c3; border: 1px solid #facc15;
  font-size: var(--font-size-sm); color: #713f12; }
.inquiry-hinweise-kurz .material-symbols-outlined { font-size: 1.1rem; color: #a16207; flex: 0 0 auto; }
.inquiry-hinweise { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inquiry-hinweise__eintrag { display: flex; align-items: flex-start; gap: var(--space-3); }
.inquiry-hinweise__preis { flex: 0 0 7rem; text-align: right; }
.inquiry-hinweise__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.inquiry-hinweise__aktion { flex: 0 0 auto; margin: 0; }
.inquiry-hinweise__eintrag--erledigt { opacity: .55; }
.inquiry-hinweise__eintrag--erledigt .inquiry-hinweise__text { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.inquiry-uploads__file--neben { opacity: .7; }
.shortlist-partner__zusatz { display: flex; align-items: flex-start; gap: .4rem; margin: 0 .75rem .5rem 2.5rem;
  padding: .35rem .6rem; border-radius: 6px; background: #fef9c3; border: 1px solid #facc15;
  font-size: var(--font-size-sm); color: #713f12; }
.shortlist-partner__zusatz .material-symbols-outlined { font-size: 1.05rem; color: #a16207; flex: 0 0 auto; }
.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); }
/* [Support 25.09.] Suchleiste + Spaltenkopf haften beim Scrollen (Kalkulation Details).
   ⚠ .card hat overflow:hidden — das macht die Karte zum Scroll-Rahmen, sticky endete dort. overflow:clip schneidet
   die Ecken genauso ab, ist aber KEIN Scroll-Container: sticky bezieht sich dann auf .content (scrollt selbst, Topbar
   liegt ausserhalb → top:0). Die Hoehe der Suchleiste setzt das Skript in show.php als --items-filter-h. */
.card--sticky-kopf { overflow: clip; }
/* top = minus Innenabstand von .content: sticky haftet an der Innenkante des Scroll-Bereichs — ohne den Ausgleich
   liefe der Inhalt in einem 16-px-Streifen ÜBER der Suchleiste sichtbar durch. */
.card--sticky-kopf .items-filter { position: sticky; top: calc(-1 * var(--space-4)); z-index: 6; background: var(--color-surface); }
.card--sticky-kopf .table thead th {
  position: sticky; top: calc(var(--items-filter-h, 52px) - var(--space-4)); z-index: 5;
  background: var(--color-surface);
  box-shadow: inset 0 -2px 0 var(--color-border);   /* ersetzt die Linie des tr — border-collapse verliert sie beim Haften */
}
/* [STICKY] Urkalk-Werkzeugleiste (Filter + Ansicht + Sprung + Neue Position):
   JS schaltet auf position:fixed (bündig unter der Topbar, Kartenbreite),
   sobald die Originalstelle nach oben rausläuft — klebt so bis ganz unten. */
#urkalk-filter { background: var(--color-surface, #fff); }
#urkalk-filter.is-stuck {
  position: fixed; z-index: 60;
  border: 1px solid var(--color-border, #e5e7eb); border-top: 0;
  border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.items-filter__new { flex: 0 0 auto; white-space: nowrap; }
/* [Ticket 8ff10888, 02.10.2026] Schnellknöpfe der klebenden Leiste: Position · Gruppe · Mehr (Menü klappt rechtsbündig auf) */
.items-filter__neu { display: inline-flex; align-items: stretch; gap: .35rem; flex: 0 0 auto; }
.items-filter__neu[hidden] { display: none; }
.items-filter__neu .urkalk-newmenu { display: inline-flex; position: relative; }
.items-filter__neu .urkalk-newmenu__list { right: 0; left: auto; top: calc(100% + 4px); }
/* [SUCHLEISTE] Ansicht-/Sprung-Icon + „+ Neue Position" auf Feldhöhe strecken —
   die kleinen Buttons standen sonst niedriger als Suchfeld und Selects. */
.urkalk-ansicht__knopf, #urkalk-colors-toggle, #urkalk-jump-last, .items-filter__new { align-self: stretch; height: auto; } /* height:auto, sonst gewinnt die btn--sm-Höhe über stretch */
/* [ZULETZT BEARBEITET] Gelbe Zeilen-Markierung — ID-Selektor gewinnt über grün/blau. */
#urkalk-items tr.urkalk-row-last-edited > td { background: rgba(250, 204, 21, .18); }
/* [KALK-LADEN] Popup: Quelle-Tabs, Kaskaden-Zeile, Positions-Liste mit Auswahl. */
.urkalk-calcload__tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.urkalk-calcload__tabs .btn.is-active { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff; }
.urkalk-calcload__row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.urkalk-calcload__row[hidden] { display: none !important; } /* display:flex hebelt [hidden] sonst aus */
.urkalk-calcload__row .form-select, .urkalk-calcload__row .form-input { flex: 1 1 auto; min-width: 0; }
.urkalk-calcload__list { display: flex; flex-direction: column; gap: .25rem; max-height: 450px; overflow: auto; margin-top: .5rem; }
.urkalk-calcload__list[hidden] { display: none !important; } /* display:flex hebelt [hidden] sonst aus */
.urkalk-calcload__list--projects { max-height: 330px; margin-top: 0; margin-bottom: .5rem; }
/* Faktor-Feld im Modal-Fuß: klein, links der Buttons, vertikal mittig. */
.urkalk-calcload__factor { display: flex; align-items: center; gap: .45rem; margin-right: auto; }
.urkalk-calcload__factor .form-input { width: 90px; text-align: right; }
.urkalk-calcload__item { display: flex; gap: .6rem; align-items: baseline; text-align: left; padding: .45rem .6rem;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; background: var(--color-surface, #fff); cursor: pointer; }
.urkalk-calcload__item.is-active { border-color: var(--color-primary, #2563eb); background: rgba(37, 99, 235, .06); }
.urkalk-calcload__pos { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 600; }
.urkalk-calcload__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urkalk-calcload__meta { flex: 0 0 auto; color: var(--color-text-muted, #6b7280); font-size: var(--font-size-sm); white-space: nowrap; }
#urkalk-cl-search { margin-top: .5rem; }

/* [LV-SPERRE] Schalter aktiv = amber; Schloss je Zeile (offen = Ausnahme, grün);
   gesperrte Zeilen zeigen keinen Edit-Cursor auf den Inline-Feldern. */
#urkalk-lvlock-toggle.urkalk-lvlock--on { background: rgba(250, 204, 21, .3); border-color: #d97706; color: #92400e; }
.js-urkalk-lock .material-symbols-outlined { font-size: 18px; }
.urkalk-lock--open .material-symbols-outlined { color: var(--color-success, #16a34a); }
#urkalk-items tr.urkalk-row-lv-locked .qpos-edit { cursor: default; }
.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). */
/* [GRUPPEN] Einrückung nach Verschachtelungs-Tiefe (--ug-depth aus dem Markup):
   Überschriften, Positionen und Summenzeilen rücken je Ebene ein — so sind
   beliebig tiefe Gruppen auf einen Blick lesbar. */
/* [SAMMELAUSWAHL 15.09.2026] 34px statt 12px: links steht jetzt der Haken (absolut
   positioniert, damit er unabhaengig von Gruppen-Tiefe und Zeilenart buendig sitzt). */
#urkalk-items .urkalk-indent { padding-left: calc(34px + var(--ug-depth, 0) * 20px); }
#urkalk-items .urkalk-row-groupsum > td:nth-child(2) { padding-left: calc(12px + var(--ug-depth, 0) * 20px); }
/* Tiefere Überschriften optisch abstufen — Ebene 0 bleibt die kräftigste. */
.urkalk-row-heading[style*="--ug-depth:1"] > td { background: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 55%, #fff); }
.urkalk-row-heading[style*="--ug-depth:2"] > td,
.urkalk-row-heading[style*="--ug-depth:3"] > td { background: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 30%, #fff); font-weight: 600; }
/* [GRUPPENSUMME] Abschlusszeile je Gruppe — Betrag füllt das Preis-JS live. */
.urkalk-row-groupsum > td {
  background: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 45%, #fff);
  border-bottom: 2px solid var(--color-border, #e5e7eb);
  color: var(--color-text-secondary, var(--color-text-soft));
}
/* [18.09.2026] Groessere Schrift fuer die Summenzeile (vorher text-sm) — Ansage „Mach die Schrift groesser". */
.urkalk-groupsum__label { font-size: var(--font-size-md, 15px); font-weight: 600; }
.urkalk-row-groupsum .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.urkalk-groupsum__val { text-align: right; font-weight: 700; color: var(--color-text); white-space: nowrap; font-size: var(--font-size-lg, 16px); font-variant-numeric: tabular-nums; }
.urkalk-row-heading > td { background: var(--color-surface-alt, #f1f5f9); font-weight: 700; border-top: 2px solid var(--color-border, #e5e7eb);}
/* [GRUPPENZEILE] Klick auf die Zeile klappt die Gruppe — die ganze Zeile zeigt das an. */
.urkalk-row-heading { cursor: pointer; }
.urkalk-row-heading:hover > td { background: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 70%, #dbeafe); }
.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 */
/* [GRUPPEN-LEISTE] Auf-/Zu-Pfeil links vor der Pos-Nummer — Zeile bleibt vertikal mittig. */
.urkalk-heading__poscell { white-space: nowrap; }
.urkalk-heading__poscell .js-urkalk-heading-collapse { margin-right: .2rem; vertical-align: middle; }
.urkalk-collapsed { display: none !important; } /* eingeklappte Gruppen-Zeilen — schlägt das Filter-inline-display */
/* [MARKIERUNG 09.09.2026] Alternativ/Eventual/entfällt: Zeile gedämpft, Badge neben der Bezeichnung, Preis bleibt lesbar. */
.urkalk-row-mark > td { color: #6b7280; }
.urkalk-row-mark .urkalk-price { opacity: .7; }
.urkalk-mark { margin-left: .35rem; vertical-align: middle; font-weight: 500; }
.urkalk-grouptree__row--aus { color: #6b7280; }
.urkalk-summary__totrow--aus { color: #6b7280; font-size: var(--font-size-sm); }
/* [SCROLL 09.09.2026] Die gerade angelegte/geänderte Zeile blitzt kurz auf, damit das Auge sie nach dem Neuladen findet. */
@keyframes urkalk-neu { 0% { background-color: #fef3c7; } 100% { background-color: transparent; } }
.urkalk-row-neu > td { animation: urkalk-neu 2.5s ease-out; }
/* [KLAPP-STABIL] Positionstabelle mit festen Spalten: Ein-/Ausklappen und Filtern
   verändern die Spaltenbreiten NICHT mehr (Auto-Layout rechnete nur sichtbare
   Zeilen → alles sprang). Beschreibung (ohne Klasse) bekommt den Rest. */
#urkalk-items { table-layout: fixed; width: 100%; }
#urkalk-items .urkalk-col-pos     { width: 160px; white-space: nowrap; }
#urkalk-items .urkalk-col-qty     { width: 110px; text-align: right; white-space: nowrap; }
#urkalk-items .urkalk-col-price   { width: 210px; }
#urkalk-items .urkalk-col-actions { width: 170px; }
/* [ARTEN-SPALTE 15.09.2026] Vier Symbole — Material, Lohn, Geraet, Fremd. ⚠ NUR in der
   Kompaktansicht: in der vollen Ansicht steht die Aufschluesselung ohnehin mit Betraegen in
   der Preisspalte, dort waere es doppelt. Die Spalte ist sonst ganz weg (nicht nur leer),
   sonst nimmt sie bei table-layout:fixed Platz, den die Beschreibung braucht. */
#urkalk-items:not(.is-compact) .urkalk-col-arten { display: none; }
#urkalk-items.is-compact .urkalk-col-arten { width: 108px; white-space: nowrap; text-align: center; }
.urkalk-art { font-size: 17px; vertical-align: middle; color: var(--color-border, #d1d5db); margin: 0 1px; }
.urkalk-art--an { color: var(--color-primary, #2563eb); }

/* Kompakt: EP+GP nebeneinander brauchen mehr Preis-Spalte, Aktionen nur den Kalk-Button. */
#urkalk-items.is-compact .urkalk-col-price   { width: 280px; }
#urkalk-items.is-compact .urkalk-col-actions { width: 185px; } /* Kalk-Button + „…"-Icon nebeneinander */
/* [KOMPAKT] Kompaktansicht (Toggle in der Filter-Leiste): Positionen zeigen nur
   Pos · Menge/Einheit · Bezeichnung · Einzelpreis/Gesamt; Langtext, Aufmaß,
   Art-Aufschlüsselung und Neben-Aktionen sind ausgeblendet (Kalk-Button bleibt). */
#urkalk-items.is-compact .urkalk-desc,
#urkalk-items.is-compact .urkalk-aufmass-list,
#urkalk-items.is-compact .urkalk-price__line:not(.urkalk-price__total),
#urkalk-items.is-compact .urkalk-actions__stack > :not(.js-urkalk-calc):not(.js-urkalk-edit):not(.urkalk-actions__menu):not(.js-urkalk-lock) { display: none; }
/* [KOMPAKT] Das „…"-Aktionen-Menü (und das LV-Schloss) bleibt sichtbar — als Icon NEBEN dem Kalk-Button. */
#urkalk-items.is-compact .urkalk-actions__stack { flex-direction: row; align-items: center; }
/* [LV-SPERRE] Kompakt braucht Platz für das dritte Icon (Schloss). */
#urkalk-items.is-lv-locked.is-compact .urkalk-col-actions { width: 215px; }
/* Positions-Zeilen kompakt: Trigger + LV-Schloss als reine Icons (platzsparend);
   die GRUPPEN-Zeilen behalten ihr „Aktion"-Label (liegen nicht im Stack). */
#urkalk-items.is-compact .urkalk-actions__stack .urkalk-actions__trigger,
#urkalk-items.is-compact .urkalk-actions__stack .js-urkalk-lock { width: auto; font-size: 0; gap: 0; padding-inline: .4rem; }
#urkalk-items.is-compact .urkalk-actions__stack .urkalk-actions__trigger .material-symbols-outlined,
#urkalk-items.is-compact .urkalk-actions__stack .js-urkalk-lock .material-symbols-outlined { font-size: 18px; }
#urkalk-items.is-compact tbody td { padding-top: .3rem; padding-bottom: .3rem; }
/* Kompakt: Einzelpreis + Gesamt NEBENEINANDER, nur die Beträge (Labels aus);
   Trennlinie/Abstände der Detail-Zeilen (border-top der Gesamt-Zeile) hier neutralisieren —
   sonst stehen „weiße Kästchen" unter den Beträgen. */
/* TD bleibt echte Tabellenzelle (display:flex ließe sie hinter der Zeilenhöhe
   zurück → „weiße Balken" unter den Beträgen); Beträge als inline-block-Spalten. */
#urkalk-items.is-compact td.urkalk-price { text-align: right; vertical-align: middle; white-space: nowrap; }
#urkalk-items.is-compact .urkalk-price__total > span:first-child { display: none; }
/* Feste Spaltenbreiten je Betrag → Einzelpreis und Gesamt fluchten über ALLE Zeilen;
   sämtliche Detail-Deko (Trennstrich, Abstände, Hintergrund) hier neutralisiert. */
#urkalk-items.is-compact .urkalk-price .urkalk-price__total {
  display: inline-block; width: 110px; text-align: right; white-space: nowrap;
  border: 0; margin: 0; padding: 0; background: none;
}
/* ⚠⚠ DIE BEIDEN BLÖCKE MÜSSEN IN DIE ZELLE PASSEN. Innenbreite ist 240 px; mit
   110 + 16 + 132 = 258 lief der Gesamt-Betrag über das rechte Polster hinaus und stand
   damit rechts NEBEN der Gruppensumme darunter, die sich brav ans Polster hält.
   Jetzt 110 + 8 + 120 = 238 — beide enden exakt an derselben Kante. */
#urkalk-items.is-compact .urkalk-price .urkalk-price__total--grand { width: 120px; margin-left: .5rem; }
/* [EK-HISTORIE] (i) DIREKT NEBEN dem EK-Feld. Flex liegt auf einem WRAPPER in der
   Zelle — display:flex auf der TD selbst versetzt den Zeilen-Rahmen (Klick springt weg). */
/* [EK-INFO-SPALTE] Das (i) hat eine eigene, immer reservierte Spalte hinter dem EK — die Felder liegen sauber hintereinander. */
.urkalk-calc__ekinfocell { width: 22px; padding: 0 !important; text-align: center; vertical-align: middle; }
.urkalk-calc__ekinfo {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 100%; min-height: 32px;
  border: 0; background: none; padding: 0; cursor: pointer; line-height: 1;
  color: var(--color-warning, #b45309);
}
.urkalk-calc__ekinfo .material-symbols-outlined { font-size: 17px; vertical-align: middle; }
/* [PREIS AUF ANFRAGE 23.09.2026] Katalog nennt keinen Preis: leeres EK-Feld mit Hinweis statt einer stillen 0,00. */
.urkalk-calc__ek--anfrage { border-color: var(--color-warning, #b45309); }
.urkalk-calc__ek--anfrage::placeholder { color: var(--color-warning, #b45309); font-style: italic; font-size: var(--font-size-xs); }
.urkalk-ekinfo-pop {
  /* Hängt am body, muss ÜBER dem Kalk-Modal (--z-overlay-modal: 3000) liegen —
     genau dafür gibt es --z-popover; die 3100 stand hier vorher als nackte Zahl. */
  position: fixed; z-index: var(--z-popover); width: 280px; padding: .6rem 1.8rem .6rem .7rem;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); font-size: var(--font-size-base);
}
.urkalk-ekinfo-pop__close {
  position: absolute; top: .3rem; right: .3rem;
  border: 0; background: none; padding: .1rem; cursor: pointer; line-height: 1;
  color: var(--color-text-muted, #6b7280);
}
.urkalk-ekinfo-pop__close:hover { color: var(--color-text); }
.urkalk-ekinfo-pop__close .material-symbols-outlined { font-size: 18px; }
.urkalk-ekinfo-pop__row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.urkalk-ekinfo-pop__hist-title { margin-top: .5rem; font-weight: 700; color: var(--color-text-secondary, var(--color-text-soft)); }
.urkalk-ekinfo-pop__hist { padding: .15rem 0; border-top: 1px dashed var(--color-border, #e5e7eb); white-space: nowrap; }
.urkalk-ekinfo-pop__hist:first-of-type { border-top: 0; }
/* [GRUPPENBAUM] Gruppen-Summen (alle Ebenen) über der Gesamtübersicht. */
.urkalk-grouptree__title { margin: 0 0 var(--space-3, .75rem); }
.urkalk-grouptree__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .3rem 0 .3rem calc(var(--ug-depth, 0) * 20px);
  border-bottom: 1px dashed var(--color-border, #e5e7eb);
  font-size: var(--font-size-base);
}
.urkalk-grouptree__label .material-symbols-outlined { font-size: 17px; vertical-align: middle; color: var(--color-text-muted, var(--color-text-soft)); }
.urkalk-grouptree__val { font-weight: 700; white-space: nowrap; }
.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; }
/* [KOMPAKT] Aufklapp-Pfeil neben der Bezeichnung: blendet die (kompakt versteckte)
   Beschreibung je Zeile ein. In der Detailansicht unsichtbar (Text ist eh da). */
.urkalk-desc-expand { display: none; border: 0; background: transparent; cursor: pointer; padding: 0 .15rem; margin-left: .25rem; color: var(--color-text-muted, #6b7280); vertical-align: middle; }
.urkalk-desc-expand .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.urkalk-desc-expand:hover { color: var(--color-text, #111827); }
#urkalk-items.is-compact .urkalk-desc-expand { display: inline-flex; align-items: center; }
#urkalk-items.is-compact tr.is-desc-open .urkalk-desc { display: block; }
/* [SCHNELLANSICHT 18.09.2026] Aufgeklappt = der GANZE Text, ohne Kurzfassung und ohne „mehr lesen"; die Spalte ist klickbar. */
#urkalk-items.is-compact tr.is-desc-open .urkalk-desc__short,
#urkalk-items.is-compact tr.is-desc-open .urkalk-desc__toggle { display: none; }
#urkalk-items.is-compact tr.is-desc-open .urkalk-desc__full[hidden] { display: block; }
#urkalk-items.is-compact tbody td:has(> div > [data-sum-view]), #urkalk-items.is-compact td.urkalk-text__zelle { cursor: pointer; }
/* Textzeile kompakt: Ueberschrift und Text in einer Zeile, Bearbeiten-Knopf bleibt sichtbar.
   ⚠ [18.09.2026] KEIN display:flex auf dem td — die Zelle faellt sonst aus dem Tabellenraster (anonyme Zelle drumherum,
   Hintergrund nur auf dem Flex-Kasten, Zeilenhoehe stimmt nicht mehr). Stattdessen bleiben die Kinder inline. */
#urkalk-items.is-compact .urkalk-row-text > td.urkalk-text__zelle { vertical-align: middle; }
#urkalk-items.is-compact .urkalk-row-text .urkalk-text__head { display: inline-flex; margin: 0 .6rem 0 0; vertical-align: baseline; }
#urkalk-items.is-compact .urkalk-row-text .urkalk-richtext { display: inline; margin: 0; }
#urkalk-items.is-compact .urkalk-row-text .urkalk-richtext p { margin: 0; display: inline; }
#urkalk-items.is-compact .urkalk-row-text .urkalk-kommentar { margin-top: .3rem; }
/* Kurzfassung langer Beschreibungen: volles HTML, per Zeilen-Klemme gekürzt —
   Formatierungen (durchgestrichen, fett, farbig) bleiben in der Vorschau sichtbar. */
.urkalk-desc__short { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.urkalk-desc__short[hidden] { display: none !important; } /* display:-webkit-box hebelt [hidden] sonst aus */
/* 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%; white-space: nowrap; } /* „… Aktion" nie zweizeilig */
/* 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; }
/* [URKALKULATION] Trennstrich zwischen den Aktions-Gruppen (Position · Kopieren+Kalkulation ·
   Stammdaten). Muster wie .inquiry-actions__divider. */
.urkalk-actions__divider { height: 1px; background: var(--color-border, #e5e7eb); margin: 4px 6px; }
.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; }
/* Feste Spaltenbreiten (th-Angaben gelten exakt) — der komplette Überschuss geht an die
   breitenlose Auswahl/Beschreibungs-Spalte, statt an „Gesamt" zu wandern.
   NUR die Kalk-Tabelle: das Aufmaß-Popup (.urkalk-aufmass) behält Auto-Layout. */
.urkalk-calc-table:not(.urkalk-aufmass) { table-layout: fixed; width: 100%; }
/* 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; }
/* [POSITIONSDETAILS] Leiste über der Kostentabelle: Menge/Einheit + Kurztext,
   aufklappbar der volle Positionstext. Elemente stehen nebeneinander → mittig. */
.urkalk-posinfo {
  margin: 0 0 .75rem; padding: .5rem .75rem;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 8px);
  background: var(--color-surface-alt, var(--color-bg, #f8fafc));
}
.urkalk-posinfo[hidden] { display: none; }
.urkalk-posinfo__bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.urkalk-posinfo__qty {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: var(--color-bg, #fff); border: 1px solid var(--color-border, #e5e7eb);
  font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap;
}
.urkalk-posinfo__qty[hidden] { display: none; }
.urkalk-posinfo__sum { flex: 1 1 12rem; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text); }
.urkalk-posinfo__toggle { flex: 0 0 auto; margin-left: auto; }
.urkalk-posinfo__text {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--color-border, #e5e7eb);
  max-height: 12rem; overflow-y: auto;   /* Langtext darf die Kostentabelle nicht verdrängen */
  font-size: var(--font-size-sm); color: var(--color-text-secondary, var(--color-text-soft));
}
.urkalk-posinfo__text[hidden] { display: none; }
/* [POSITIONSPREIS] Formel-Zeile unter der Kalk-Summe: Menge × Einzelpreis = Positions-Gesamt. */
.urkalk-calc__postotal { display: block; font-weight: 400; margin-top: 2px; white-space: nowrap; }
.urkalk-calc__postotal[hidden] { display: none; }
/* SZ-Dropdown (Standard/Global/Eigener/Kein), Zuschlag-%-Spalte, eigener Zuschlag (unter der Auswahl) + KP-Spalte. */
.urkalk-calc__zuschlag { color: var(--color-text-secondary); white-space: nowrap; }
/* [ZUSCHLAG-FELD] Zuschlag % als Eingabefeld in der Spalte */
.urkalk-calc__zuschlag .form-input { width: 4.5rem; display: inline-block; padding: 4px 6px; text-align: right; }
/* [EINHEIT-SUCHE] Einheit als Eingabefeld mit Vorschlagsliste */
.urkalk-calc__einheitwrap { position: relative; }
.urkalk-calc__einheitwrap .form-input { min-width: 5rem; width: 6rem; padding: 4px 6px; }
.urkalk-calc__units {
  position: fixed; z-index: 1000; min-width: 6rem; max-height: 220px; overflow-y: auto;
  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);
}
.urkalk-calc__units[hidden] { display: none; }
.urkalk-calc__unit { display: block; width: 100%; text-align: left; border: none; background: none; padding: 5px 10px; cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text); }
.urkalk-calc__unit:hover, .urkalk-calc__unit.is-active { background: var(--color-bg, #f8fafc); }
.urkalk-calc__result.is-active { background: var(--color-bg, #f8fafc); }
/* [WIEDERHERSTELLEN] Rueckhol-Leiste unter der Kalk-Tabelle */
.urkalk-calc__undo { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.urkalk-calc__undo[hidden] { display: none; }
.urkalk-calc__undo [data-undo-text] { flex: 1 1 auto; }
/* KP und Gesamt: genug Platz, Zahlen rechtsbuendig wie die Koepfe */
.urkalk-calc__kp, .urkalk-calc__rowtotal { white-space: nowrap; padding-left: 8px; }
.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); }
/* [Ticket 9f00cc2b, 02.10.2026] Mehrere Leistungen aus der Vorlage: Haken links neben dem Treffer, Leiste darunter */
.urkalk-tpl-wahl { display: flex; align-items: center; gap: .5rem; }
.urkalk-tpl-wahl__haken { flex: none; width: 18px; height: 18px; cursor: pointer; }
.urkalk-tpl-leiste { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; padding: .5rem .75rem;
  border-radius: var(--radius-md, 6px); background: var(--color-primary-light, #e0f2fe); }
.urkalk-tpl-leiste__zahl { margin-right: auto; font-weight: 600; }

/* [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; }
/* [PROJEKT-ZUSCHLÄGE] Read-only-Anzeige klein halten — Platz sparen. */
#urkalk-zuschlag .urkalk-zuschlag__label { font-size: .78rem; }
.urkalk-zuschlag__ro { font-size: .78rem; color: var(--color-text-muted, #6b7280); white-space: nowrap; }
.urkalk-zuschlag__ro strong { color: var(--color-text, #111827); font-weight: 600; }
.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); }
/* Position enthält eine „Fremd"-Kalkzeile → hellblau statt hellgrün. */
.urkalk-row-calc-done.urkalk-row-calc-fremd > td { background: rgba(37, 99, 235, .07); }
/* [FARBEN 18.09.2026] Umschalter „Farben ausblenden": keine Hintergrundfarbe nach Kalkulationsstand (kalkuliert, Fremd,
   zuletzt bearbeitet); Gruppen-Köpfe behalten ihr Grau — sie sind Struktur, kein Status. */
#urkalk-items.is-farblos tr.urkalk-row-calc-done > td,
#urkalk-items.is-farblos tr.urkalk-row-calc-done.urkalk-row-calc-fremd > td,
#urkalk-items.is-farblos tr.urkalk-row-last-edited > td { background: transparent; }
/* [AUFBLITZEN] Sprung zur zuletzt bearbeiteten Zeile: kurz kraeftig gelb, dann in 3 s auslaufen — steht NACH der
   is-farblos-Regel und gewinnt ueber die Animation auch bei ausgeschalteten Farben. */
@keyframes urkalk-blitz { 0% { background-color: #fde047; } 25% { background-color: #fde047; } 100% { background-color: transparent; } }
#urkalk-items tr.urkalk-row-blitz > td, #urkalk-items.is-farblos tr.urkalk-row-blitz > td { animation: urkalk-blitz 3s ease-out; }
.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;
  /* ⚠ flex-shrink:0 gehoert zwingend zu min-width:0 am __info (siehe dort):
     Bis dahin hielt der zu breite Dateiname die Kachel auf 150px auf. Sobald er
     umbrechen darf, wuerde die Kachel als Flex-Item bis auf Icon-Breite
     zusammenfallen. Die Liste hat flex-wrap, die Kachel rutscht also in die
     naechste Zeile statt zu schrumpfen. */
  width: 150px; flex-shrink: 0; 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. */
/* ⚠ GRID statt Flex — nur so sitzt das Kästchen zuverlässig auf der Mitte der
   ERSTEN Textzeile (Projektregel: nebeneinanderstehendes immer vertikal
   mittig). align-items:center wirkt im Grid PRO ZEILE, das Kästchen richtet
   sich also am Titel aus und nicht an der Gesamthöhe. Die Zusatzzeile landet
   über grid-column:2 automatisch bündig unter dem Titel — ohne die
   Einrückung aus Kästchenbreite + Abstand nachrechnen zu müssen.
   (Ein früherer Versuch mit translateY(calc(…)) war genau daran gescheitert.) */
.bulkmail-opt { display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .6rem; row-gap: 2px; padding: .6rem .75rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer; }
.bulkmail-opt__title { grid-column: 2; }
.bulkmail-opt__sub   { grid-column: 2; }
.bulkmail-opt + .bulkmail-opt { margin-top: .5rem; }
.bulkmail-opt:hover { background: var(--color-bg); }
.bulkmail-opt input[type="radio"],
.bulkmail-opt input[type="checkbox"] { margin: 0; grid-column: 1; grid-row: 1; }
.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); }
/* ⚠ [09.09.2026] display:flex schlug das hidden-Attribut — in den Dialogen „Aus Leistung“/„Aus Leistungs-Gruppe“ standen dadurch
   ZWEI Fußzeilen (Schritt-Fuß + „Dazu gehört“-Fuß) gleichzeitig; das Attribut muss gewinnen. */
.bl-modal__foot[hidden] { display: none; }

.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. */
/* Werkzeuge nach Bereich gruppiert: je Gruppe eine Überschrift + eigenes Raster. */
.tools-group { margin-top: var(--space-4); }
.tools-group + .tools-group { margin-top: var(--space-5); }
.tools-group__title { margin: 0; font-size: var(--font-size-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-2); }
.tools-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); 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: 24px; 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; font-size: var(--font-size-sm); }
/* Kleiner gesetzte Beschreibung — sie bestimmt die Höhe der Kachel. */
.tools-card__desc { font-size: var(--font-size-xs); line-height: 1.35; 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; }
/* Kompakte Variante (Kundenanfragen: Drop-Zone je Bild-Position) */
.sf-drop--compact { flex-direction: row; justify-content: center; padding: .6rem .9rem; gap: .5rem; cursor: pointer; font-size: var(--font-size-sm); }
.sf-drop--compact .material-symbols-outlined { color: var(--color-primary); }
/* [DATENRAUM 10.09.2026] Grenzen-Zeile, Haken unter dem Upload, Vorschaubilder, Zugang anpassen */
.sf-drop__limits { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sf-upload-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3) var(--space-8); margin-top: var(--space-4); }
.sf-upload-opts .form-checkbox-row { font-size: var(--font-size-sm); }
.sf-upload-opts .form-hint { display: block; margin-top: 2px; line-height: 1.4; }
.sf-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); display: block; }
.sf-thumb-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-alt, #f3f4f6); }
.sf-thumb-icon__svg { width: 30px; height: 36px; display: block; }
.sf-filelink { color: inherit; text-decoration: none; }
.sf-filelink:hover { text-decoration: underline; }
.sf-settings { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.sf-settings__title { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-3); }
.sf-settings__title .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }
.sf-settings__fields { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; }
.sf-settings__fields .form-input--sm { width: 190px; }
.sf-settings__fields .form-select--sm { width: 220px; }
.sf-settings__hint { margin: var(--space-2) 0 0; }
.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); }
.task-card[hidden] { display: none; }

/* Abschluss-Spalte: EINE Spalte, darin die zwei Bahnen „Erledigt" / „Abgelehnt".
   ⚠ Doppelte Breite, sonst quetschen sich die Karten der beiden Bahnen. */
.kanban__col--doppelt { flex: 2 1 0; min-width: 300px; }
.kanban__lanes { display: flex; gap: var(--space-3); align-items: stretch; }
.kanban__lane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.kanban__lane + .kanban__lane { border-left: 1px solid var(--color-border); padding-left: var(--space-3); }
.kanban__lane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); }
.kanban__lane-title { font-weight: 600; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.kanban__lane .kanban__col-body { padding-top: var(--space-2); flex: 1 1 auto; }

/* Filterleiste über dem Board (Art / Bereich). */
.task-filter { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.task-filter__field { display: flex; flex-direction: column; gap: .25rem; min-width: 10rem; }
.task-filter__field .form-label { margin: 0; }

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

/* ── [BAUPROJEKTE] Werkzeug „Aktuelle Bauprojekte" — zuklappbare Kategorien ── */
.bp-cat { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); margin-bottom: var(--space-3); background: var(--color-surface); }
.bp-cat__summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; font-weight: 600; }
.bp-cat__summary::-webkit-details-marker { display: none; }
.bp-cat__chevron { transition: transform .15s; font-size: 20px; color: var(--color-text-muted); }
.bp-cat[open] > .bp-cat__summary .bp-cat__chevron { transform: rotate(90deg); }
.bp-cat__icon { font-size: 20px; color: var(--color-text-muted); }
.bp-cat__badge { margin-left: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0 10px; font-size: var(--font-size-sm); font-weight: 600; }
.bp-cat__empty { padding: 0 var(--space-4) var(--space-3); margin: 0; }
.bp-cat .table-scroll { padding: 0 var(--space-4) var(--space-3); }
.bp-today td { background: var(--color-accent-blue-light, rgba(37, 99, 235, .08)); color: var(--color-accent-blue, #2563eb); font-weight: 600; border-top: 2px solid var(--color-accent-blue, #2563eb); border-bottom: 2px solid var(--color-accent-blue, #2563eb); }
.bp-today__icon { font-size: 16px; vertical-align: -3px; }

/* ── [STATUS] Klickbares Antwort-Status-Badge auf der Anfrage-Seite ── */
button.inquiry-status { cursor: pointer; border: 0; font: inherit; }

/* ── [AUSFÜHRUNG] Pflicht-Frage „Preise mit/ohne Ausführung" (öffentliche Anfrage) ── */
.exec-ask { border: 2px solid var(--color-accent-blue, #2563eb); border-radius: var(--radius-md, 8px); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface); }
.exec-ask--invalid { border-color: var(--color-danger, #dc2626); }
.exec-ask__title { display: flex; align-items: center; gap: var(--space-2); font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-3); }
.exec-ask__req { color: var(--color-danger, #dc2626); }
.exec-ask__options { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.exec-ask__opt { flex: 1 1 240px; display: flex; align-items: flex-start; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--space-3); cursor: pointer; }
.exec-ask__opt:has(input:checked) { border-color: var(--color-accent-blue, #2563eb); background: var(--color-accent-blue-light, rgba(37, 99, 235, .08)); }
/* Nach der Abgabe ist die ganze Seite schreibgeschützt — gesperrte Optionen
   sichtbar dimmen, sonst wirken sie wie ein kaputter Klick (Nutzer-Meldung). */
.exec-ask__opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.exec-ask__opt input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.exec-ask__body { display: flex; flex-direction: column; gap: 2px; }
.exec-ask__label { font-weight: 600; }
.exec-ask__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.exec-ask__error { margin-top: var(--space-2); color: var(--color-danger, #dc2626); font-weight: 600; }
.cs-exec { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.cs-exec .material-symbols-outlined { font-size: 18px; }
.card-header--actions .inquiry-status { margin-left: auto; }

/* ── [BETA-BESTAND] Nachschlage-Popup in der Kunden-Neuanlage ────────────── */
.bl-modal__dialog.beta-dialog { width: min(720px, 100%); }
.beta-hint { margin: var(--space-2) 0 var(--space-3); }
.beta-results { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); }
/* Treffer-Zeile: ganze Fläche klickbar, Übernehmen-Hinweis erscheint beim Hover. */
.beta-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name take" "sub take" "meta take";
  gap: 2px var(--space-3);
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  cursor: pointer;
}
.beta-hit:hover { border-color: var(--color-accent-blue, #2563eb); background: var(--color-accent-blue-light, rgba(37, 99, 235, .06)); }
.beta-hit__name { grid-area: name; font-weight: 600; }
.beta-hit__sub  { grid-area: sub;  font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.beta-hit__meta { grid-area: meta; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.beta-hit__take {
  grid-area: take;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent-blue, #2563eb);
  opacity: 0;
}
.beta-hit:hover .beta-hit__take, .beta-hit:focus-visible .beta-hit__take { opacity: 1; }

/* [BILD-TOOL] Werkzeug „Bilder verkleinern": Optionen-Zeile, große Dropzone,
   Datei-Liste mit Status/Ergebnis, Aktions-Leiste, Cropper-Bühne. */
.imgtool-options { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.imgtool-options__field { display: flex; flex-direction: column; gap: .25rem; min-width: 180px; }
.imgtool-options__field--wide { min-width: 540px; flex: 1 1 540px; }
.imgtool-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 2.5rem 1rem; border: 2px dashed var(--color-border, #d1d5db); border-radius: 10px; background: var(--color-surface-muted, #f9fafb); cursor: pointer; text-align: center; }
.imgtool-drop:hover, .imgtool-drop.is-over { border-color: var(--color-primary, #2563eb); background: rgba(37, 99, 235, .04); }
.imgtool-drop__icon { font-size: 42px; color: var(--color-text-muted, #6b7280); }
.imgtool-drop__text { font-weight: 600; }
.imgtool-list { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; }
.imgtool-list[hidden] { display: none !important; } /* display:flex hebelt [hidden] sonst aus */
.imgtool-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; background: var(--color-surface, #fff); }
.imgtool-item__icon { color: var(--color-text-muted, #6b7280); }
.imgtool-item__thumb { flex: 0 0 auto; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border, #e5e7eb); background: var(--color-surface-muted, #f3f4f6); }
.imgtool-item__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imgtool-item__size { flex: 0 0 auto; color: var(--color-text-muted, #6b7280); font-size: var(--font-size-sm); white-space: nowrap; }
.imgtool-item__right { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.imgtool-item__state { color: var(--color-text-muted, #6b7280); font-size: var(--font-size-sm); white-space: nowrap; }
.imgtool-item__state--err { color: var(--color-danger, #dc2626); }
.imgtool-item__result { font-size: var(--font-size-sm); white-space: nowrap; }
.imgtool-item__result strong { color: var(--color-success, #16a34a); }
.imgtool-actions { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.imgtool-actions[hidden] { display: none !important; } /* display:flex hebelt [hidden] sonst aus */
.imgtool-crop__stage { max-height: 60vh; }
.imgtool-crop__stage img { display: block; max-width: 100%; }
/* [PROJEKT] Hinweiszeile unter den Optionen: wie die Bilder heißen werden und
   in welchem Projekt sie landen. ⚠ display:flex hebelt [hidden] sonst aus. */
.imgtool-hint {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-left: 3px solid var(--color-primary, #2563eb);
  border-radius: 8px;
  background: var(--color-surface-muted, #f9fafb);
  font-size: var(--font-size-sm); color: var(--color-text-secondary, #4b5563);
}
.imgtool-hint[hidden] { display: none !important; }
.imgtool-hint__icon { font-size: 20px; color: var(--color-primary, #2563eb); flex: 0 0 auto; }
.imgtool-hint__link { margin-left: auto; white-space: nowrap; }
.imgtool-item__badge { color: var(--color-primary, #2563eb); font-weight: 600; text-decoration: none; }
.imgtool-item__badge:hover { text-decoration: underline; }

/* ── [GAEB-EDITOR] Werkzeug „GAEB-Editor" (/werkzeuge/gaeb-editor) ────────── */
.gaebedit-bar {
  display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap;
  margin: 1rem 0; padding: .75rem .9rem;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px;
  background: var(--color-surface-muted, #f9fafb);
}
.gaebedit-bar[hidden] { display: none !important; } /* display:flex hebelt [hidden] sonst aus */
.gaebedit-bar__file { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.gaebedit-bar__file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.gaebedit-bar__jump { display: flex; flex-direction: column; gap: .25rem; }
.gaebedit-bar__jump .form-input { width: 11rem; }
.gaebedit-bar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: wrap; }

.gaebedit-msg { margin: .5rem 0; padding: .55rem .75rem; border-radius: 6px; font-size: var(--font-size-sm);
  background: var(--color-surface-muted, #f3f4f6); }
.gaebedit-msg[hidden] { display: none !important; }
.gaebedit-msg--ok    { background: var(--color-success-bg, #dcfce7); color: var(--color-success, #166534); }
.gaebedit-msg--error { background: var(--color-danger-bg, #fee2e2);  color: var(--color-danger, #b91c1c); }
.gaebedit-msg--info  { background: var(--color-info-bg, #dbeafe);    color: var(--color-info, #1e40af); }

.gaebedit-group { border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; margin-bottom: .5rem; background: var(--color-surface, #fff); }
.gaebedit-group__head { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; cursor: pointer; font-weight: 600; }
.gaebedit-group__rno { font-family: var(--font-family-mono, monospace); color: var(--color-text-muted, #6b7280); }
.gaebedit-group__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaebedit-group__count { flex: 0 0 auto; font-size: var(--font-size-sm); color: var(--color-text-muted, #6b7280); }
.gaebedit-group__body { overflow-x: auto; }

.gaebedit-table { width: 100%; }
.gaebedit-table__pos   { width: 9rem; white-space: nowrap; }
.gaebedit-table__num   { width: 7rem; }
.gaebedit-table__unit  { width: 5.5rem; }
.gaebedit-table__tools { width: 6rem; white-space: nowrap; text-align: right; }
.gaebedit-table .form-input { width: 100%; }
.gaebedit-table .form-input.is-invalid { border-color: var(--color-danger, #dc2626); }

.gaebedit-row--dirty > td { background: var(--color-warning-bg, #fef9c3); }
.gaebedit-row--hit   > td { background: var(--color-warning-bg, #fde68a); transition: background .4s ease; }
.gaebedit-row__badge { font-size: var(--font-size-xs); color: var(--color-warning, #b45309); margin-left: .35rem; }
.gaebedit-row__badge[hidden] { display: none !important; }
.gaebedit-long__text { white-space: pre-wrap; font-size: var(--font-size-sm); color: var(--color-text-muted, #4b5563); }
.gaebedit-long__area { width: 100%; font-size: var(--font-size-sm); font-family: inherit; }
.gaebedit-row--remark > td { background: var(--color-surface-muted, #f9fafb); }
.gaebedit-row__kind { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-xs);
  color: var(--color-text-muted, #6b7280); white-space: nowrap; }
.gaebedit-row__kind .material-symbols-outlined { font-size: 1rem; }
.gaebedit-addtexts { margin: .75rem 0; }
.gaebedit-addtexts[hidden] { display: none !important; }
.gaebedit-addtexts__body { padding: .6rem .75rem; }
.gaebedit-table__ozin { font-family: var(--font-family-mono, monospace); font-size: var(--font-size-xs); }
.gaebedit-table__tools { width: 9.5rem; }
.gaebedit-gedit { display: flex; gap: .75rem; align-items: flex-end; padding: .5rem .75rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb); background: var(--color-surface-muted, #f9fafb); }
.gaebedit-gedit__f { display: flex; flex-direction: column; gap: .2rem; }
.gaebedit-gedit__f .form-input { width: 9rem; }
.gaebedit-gedit__f--wide { flex: 1 1 auto; }
.gaebedit-gedit__f--wide .form-input { width: 100%; }
.gaebedit-hd { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: .6rem .75rem; }
.gaebedit-hd__group { display: flex; flex-direction: column; gap: .3rem; min-width: 14rem; }
.gaebedit-hd__f { display: flex; flex-direction: column; gap: .1rem; }
.gaebedit-raw__area { width: 100%; font-family: var(--font-family-mono, monospace); font-size: var(--font-size-xs);
  white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* [GAEB-90] Werkzeug „GAEB 90 umwandeln" — Ergebnis mit Quelle/Ziel-Gegenprobe */
.g90-result { margin-top: 1rem; }
.g90-result[hidden] { display: none !important; }
.g90-result__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.g90-table { max-width: 34rem; }
.g90-table__row--diff { background: var(--color-danger-bg, #fee2e2); font-weight: 600; }
.g90-hint { margin-top: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════
   [VERTRÄGE] Vorlagen aus Elementen (v167)

   ⚠ Die ZWEI PLATZHALTER-FARBEN sind die Kernaussage der Maske: blau =
     füllt sich aus dem System (Kunde, Baustelle), gelb = verlangt beim
     Ausfüllen eine Eingabe. Sie erscheinen an drei Stellen — im Editor
     (über public/js/contract-editor.js), im Einfüge-Katalog und in der
     Fundliste — und müssen überall dieselben bleiben.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠ Drei Felder seit v180 (Titel, Briefpapier, Nachunternehmer) — der Titel
   behaelt das doppelte Gewicht, die beiden Auswahlfelder teilen sich den Rest. */
/* Ein <fieldset> nur als Sperr-Schalter — ohne den Browser-Rahmen, den es von
   Haus aus mitbringt. ⚠ min-width:0 ist Pflicht: fieldset bekommt sonst eine
   implizite Mindestbreite und sprengt Grid- und Flex-Kinder darin. */
.fieldset-plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset-plain[disabled] { opacity: .6; }

/* ⚠⚠ ZWEI MASKEN TEILEN SICH DIESE KLASSE. Die Vorlagen-Maske
   (admin/contracts/form.php) hat ZWEI Felder — Titel und Briefpapier —, die
   Vertragsmaske seit v180 DREI. Ein gemeinsames Dreier-Gitter liess in der
   Vorlagen-Maske eine leere dritte Spalte stehen und quetschte die beiden
   vorhandenen Felder zusammen. Deshalb bleibt die Grundregel bei zwei Spalten,
   und die dritte kommt als eigener Modifier dazu. */
.ct-head { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
.ct-head--drei { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 720px) { .ct-head { grid-template-columns: 1fr; } }

/* ── Ein Element ───────────────────────────────────────────────────────── */
.ct-el { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: var(--color-surface); }
.ct-el__bar { display: flex; align-items: center; gap: var(--space-2);
              padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle, #f9fafb); }
.ct-el__kind { display: flex; align-items: center; color: var(--color-text-muted); }

/* Beschreibung des Elements: nimmt den freien Platz in der Leiste ein und
   sieht erst beim Hineinklicken wie ein Eingabefeld aus — sie soll wie eine
   Überschrift wirken, nicht wie ein Formularfeld unter vielen. */
.ct-el__label { flex: 1 1 auto; min-width: 6rem; border: 1px solid transparent;
                background: transparent; border-radius: var(--radius-sm);
                padding: .15rem .4rem; font: inherit; font-weight: 600;
                color: var(--color-text); }
.ct-el__label::placeholder { font-weight: 400; color: var(--color-text-muted); }
.ct-el__label:hover  { border-color: var(--color-border); }
.ct-el__label:focus  { border-color: var(--color-primary); background: var(--color-surface); outline: none; }

/* Auf-/Zuklappen: Pfeil ganz links, dreht sich beim Zuklappen nach rechts.
   ⚠ Der Inhalt wird nur AUSGEBLENDET, nicht entfernt — display:none hindert
     den Browser nicht daran, die Felder mitzusenden. Ein zugeklappter
     Textblock wird also trotzdem gespeichert. */
.ct-el__toggle { display: inline-flex; align-items: center; justify-content: center;
                 background: none; border: 0; padding: 0; margin-right: var(--space-1);
                 color: var(--color-text-muted); cursor: pointer; }
.ct-el__toggle .material-symbols-outlined { transition: transform .15s ease; }
.ct-el--collapsed .ct-el__toggle .material-symbols-outlined { transform: rotate(-90deg); }
.ct-el--collapsed .ct-el__body { display: none; }
.ct-el--collapsed .ct-el__bar { border-bottom: 0; }
.ct-el__actions { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; margin-left: auto; }
.ct-el__body { padding: var(--space-3); }
.ct-el__media { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.ct-el__img { max-width: 260px; max-height: 180px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ct-el__pdf { font-size: 3rem; color: var(--color-text-muted); }

/* ── Platzhalter ───────────────────────────────────────────────────────── */
.ct-ph { display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-sm);
         font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; line-height: 1.5; }
.ct-ph--sys { background: var(--color-primary-light); color: var(--color-primary); }
.ct-ph--own { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ct-ph--btn { border: 1px solid transparent; cursor: pointer; }
.ct-ph--btn:hover { border-color: currentColor; }

.ct-ph-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ct-ph-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.ct-ph-catalog__group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }

/* Die Färbung IM Editor — dieselben zwei Farben wie oben.
   Quill setzt die Klassen über einen ClassAttributor mit Präfix `ct-ph`. */
.ql-editor .ct-ph-sys { background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-sm); }
.ql-editor .ct-ph-own { background: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-sm); }

/* ── Ausfüllen ─────────────────────────────────────────────────────────── */
.ct-source { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 720px) { .ct-source { grid-template-columns: 1fr; } }
.ct-fill__name { width: 15rem; white-space: nowrap; }

/* ── Unterschriftsfeld ─────────────────────────────────────────────────── */
.ct-sig { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-5); }
.ct-sig__col { flex: 1 1 14rem; min-width: 12rem; }
.ct-sig__line { border-bottom: 1px solid var(--color-text); height: 2.4rem; }
.ct-sig__line--filled { border-bottom-color: var(--color-text); }
.ct-sig__label { font-size: .75rem; color: var(--color-text-muted); padding-top: .2rem; margin-bottom: var(--space-3); }
.ct-sig__img { max-height: 2.3rem; }
.ct-sig__canvas { width: 100%; max-width: 600px; height: 200px; border: 1px dashed var(--color-border-strong);
                  border-radius: var(--radius-sm); background: var(--color-surface); touch-action: none; }

/* Briefpapier-Verwaltung in der Firmenmaske. */
.lh-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* [BRIEFPAPIER] v170: die vier Schutzraum-Felder oben/rechts/unten/links.
   Engerer Abstand als .lh-row — die vier gehören sichtbar zusammen und sollen
   nicht wie vier einzelne Eingaben wirken. */

/* [VERTRÄGE] v169: Schalter „Text darf im Projekt angepasst werden" und die
   gesperrte Textanzeige im Vertrag. */
.ct-switch { display: flex; align-items: flex-start; gap: var(--space-3);
             margin-top: var(--space-4); cursor: pointer; }
.ct-switch input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; }

/* ⚠ Sieht bewusst NICHT wie ein Eingabefeld aus — hier lässt sich nichts
   ändern, und das soll man sehen, bevor man hineinklickt. */
.ct-el__readonly { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border-strong);
                   background: var(--color-bg-subtle, #f9fafb); border-radius: var(--radius-sm);
                   color: var(--color-text); }
.ct-el__readonly p:first-child { margin-top: 0; }
.ct-el__readonly p:last-child  { margin-bottom: 0; }

/* Beschreibung im Vertrag: dort nur Anzeige, kein Eingabefeld. */
.ct-el__label--static { border-color: transparent; background: transparent; cursor: default; }
.ct-el__label--static:hover { border-color: transparent; }

/* [HERKUNFT] Zeile unter vererbten Einstellungsfeldern: welcher Wert gilt
   gerade, und von welcher Ebene kommt er? (v1.4.11)
   Eigener Wert = grün mit Haken; geerbt = gedämpft mit Pfeil nach unten —
   die Richtung zeigt an, dass der Wert von weiter oben herunterkommt. */
.setting-origin {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .25rem;
}
.setting-origin__icon { font-size: 14px; line-height: 1; }
.setting-origin--own { color: var(--color-success, #2e7d32); }

/* [UMFANG] Trenner in der Tab-Leiste: schneidet die Ausschnitte (diese Firma /
   Gruppe / alle) von einem anderen Gegenstand ab — „Rollen" ist keine weitere
   Stufe, sondern etwas anderes. (v1.4.13) */
.entity-tabs__divider {
  width: 1px;
  align-self: stretch;
  margin: .35rem .75rem;              /* Abstand ist der eigentliche Trenner */
  background: var(--color-border-strong);
  flex-shrink: 0;
}

/* ── Briefpapier: Vorschaubild in der Liste ───────────────────────────── */
.lh-col-thumb { width: 4.5rem; }
.lh-thumb {
  display: block;
  width: 3.5rem;
  aspect-ratio: 210 / 297;          /* A4-Anmutung, auch bevor das Bild da ist */
  position: relative;
  border: 1px solid var(--color-border-strong);
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-surface);
}
/* ⚠⚠ KEIN eigener HINTERGRUND auf dem Bild. Der Platzhalter dahinter soll
   durchscheinen, wenn die Bild-Route 404 liefert (kein poppler, unrasterbares
   PDF) — ein gescheitertes <img> behaelt seine Box und haette mit opakem
   Hintergrund genau das zugedeckt, was es zeigen sollte. Den Grund malt der
   Container .lh-thumb. Die frueher hier stehende Regel :not([src]) war tot:
   das src-Attribut ist IMMER gesetzt, sie prueft nur seine Anwesenheit,
   nicht den Ladeerfolg. */
.lh-thumb__img {
  /* ⚠ Absolut ueber dem Platzhalter — kein onerror moeglich (CSP verbietet
     inline-Handler), also deckt ein GELADENES Bild den Platzhalter einfach zu.
     Laedt es nicht, bleibt das Symbol sichtbar. */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
    display: block;
}
/* Ein kaputtes Bild traegt keine Flaeche — dann scheint der Platzhalter durch. */

/* Sichtbar nur, solange das Bild fehlt oder mit onerror ausgeblendet wurde. */
.lh-thumb__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.4rem;
}
.lh-actions { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }

/* ── Briefpapier bearbeiten: Formular + Live-Vorschau ─────────────────── */
.lh-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .lh-edit { grid-template-columns: minmax(0, 1fr); }
}
.lh-edit__mm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Das Blatt: Bild von Seite 1, darueber die Schutzraeume als Flaechen.
   ⚠ Alle Kinder positionieren sich in PROZENT — die Umrechnung mm → %
   macht letterhead-editor.js gegen die echte Seitengroesse. */
.lh-sheet {
  position: relative;
  /* ⚠ container-type: size macht cqh moeglich — letterhead-editor.js rechnet
     die Punktgroesse als Anteil der Blatthoehe, damit die Vorschau bei jeder
     Fenstergroesse stimmt statt in Pixeln zu raten. */
  container-type: size;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.lh-sheet__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lh-sheet__zone {
  position: absolute;
  background: rgba(217, 119, 6, .18);   /* --color-warning, durchscheinend */
  pointer-events: none;
}
.lh-sheet__zone--top    { top: 0; left: 0; right: 0; }
.lh-sheet__zone--bottom { bottom: 0; left: 0; right: 0; }
.lh-sheet__zone--left   { left: 0; }
.lh-sheet__zone--right  { right: 0; }
.lh-sheet__text {
  position: absolute;
  border: 1px dashed var(--color-primary);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}
.lh-sheet__text-label {
  /* ⚠⚠ KEIN eigenes font-size. Der Label ist der EINZIGE Text im Vorschau-
     Kasten; eine feste Groesse hier machte die Groessen-Einstellung komplett
     wirkungslos — man tippte 8, 12, 18 und im Blatt bewegte sich nichts.
     Die Groesse kommt von #lh-textfeld (letterhead-editor.js). */
  color: var(--color-primary);
  background: var(--color-surface);
  padding: 0 .25rem;
  margin-top: -.6rem;
}
.lh-hint-guess { color: var(--color-warning-text); }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL (Hochformat) — Burger-Navigation statt fester Seitenleiste
   ---------------------------------------------------------------------------
   Bis hierher ging das Layout von einer 240-px-Leiste links aus: `.sidebar`
   fest positioniert, `.main-wrapper` mit `margin-left`. Auf einem Telefon im
   Hochformat (375 px) blieben davon rund 135 px Inhalt übrig — jede Seite lief
   in eine Spalte aus Einzelwörtern.

   Unter 768 px wird dieselbe Sidebar deshalb zur SCHUBLADE: sie liegt links
   außerhalb des Bildes und fährt auf Tippen des Burger-Knopfes über den Inhalt.
   Der Inhalt bekommt die volle Breite.

   ⚠⚠ DER EINGEKLAPPT-ZUSTAND (`is-sidebar-collapsed`) WIRD HIER NICHT
     ÜBERSCHRIEBEN, SONDERN GAR NICHT ERST GESETZT — das erledigt das Skript in
     base.php. Andernfalls müssten hier rund dreißig Collapsed-Regeln (Icon-
     Spalte, versteckte Labels, Flyouts, Account-Popup) einzeln zurückgenommen
     werden, und jede neue Regel dort wäre hier ein neues Loch.
   ⚠ Z-INDEX: Topbar 200 < Abdunkelung 250 < Schublade 300. Die Schublade muss
     über der Topbar liegen, sonst schnitte deren Rand sie oben ab.
═══════════════════════════════════════════════════════════════════════════ */
.topbar-burger { display: none; }
.nav-scrim     { display: none; }

@media (max-width: 768px) {

  /* ── Sidebar → Schublade ────────────────────────────────────────────── */
  /* ⚠⚠ GESCHOBEN WIRD MIT `left`, NICHT MIT `transform`. Ein transform macht
     das Element zum Bezugsrahmen für ALLE `position: fixed`-Nachfahren — und
     der Hilfe-Chat hängt genau dort drin (public/js/app.js hängt das Widget in
     die Sidebar-Fußzeile). Mit transform flog sein geöffnetes Fenster beim
     Schließen der Schublade mit aus dem Bild. `left` ist eine Spur teurer zu
     animieren und hier das einzig Richtige. */
  .sidebar {
    --drawer-w: min(300px, 84vw);
    width: var(--drawer-w);
    min-width: 0;
    height: 100dvh;                 /* 100vh rechnet die Browserleisten mit */
    z-index: 300;
    left: calc(-1 * var(--drawer-w));
    transition: left .22s ease;
  }
  body.is-nav-open .sidebar { left: 0; box-shadow: 0 0 40px rgba(0, 0, 0, .32); }
  @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
  .main-wrapper { margin-left: 0; }

  .nav-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 250;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-scrim[hidden] { display: none; }

  /* ── Topbar: Burger + Titel, alles Übrige weicht ────────────────────── */
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-burger {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
  }
  .topbar-burger__icon--close { display: none; }
  body.is-nav-open .topbar-burger__icon--open  { display: none; }
  body.is-nav-open .topbar-burger__icon--close { display: inline-flex; }

  .topbar-left  { flex: 1 1 auto; min-width: 0; }
  .topbar-title { font-size: var(--font-size-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .breadcrumb   { display: none; }   /* der Titel sagt dasselbe kürzer */
  .topbar-right { flex: 0 0 auto; gap: var(--space-1); }
  /* Die beiden allgemeinen Knöpfe (Schriftgröße, Hilfe) BLEIBEN — für sie gibt
     es in der Schublade keinen Ersatz. Sie schrumpfen auf ihr Symbol. */
  .topbar-pill { padding: var(--space-2); }
  .topbar-pill__name { display: none; }
  /* Weg müssen die Superuser-Werkzeuge (i18n-Debug, Tickets): sie stehen hinter
     dem Trennstrich, sind Entwickler-Werkzeuge und über die Schublade
     erreichbar („Support-Tickets" in der Navigation).
     ⚠ Der Trennstrich selbst wird in einem <style>-Block IN der Seite gesetzt
     (base.php, Superuser-Bereich) — der steht hinter dieser Datei und gewinnt
     bei gleicher Spezifität. Deshalb hier eine Stufe höher. */
  .topbar .topbar-divider, .topbar-divider ~ .topbar-pill { display: none; }
  /* Firmen-Umschalter bleibt: nur das Symbol, Auswahl als volle Breite. */
  .context-switcher > summary { padding: var(--space-2); }
  .context-switcher__name     { display: none; }
  .context-switcher__panel {
    position: fixed; top: calc(var(--topbar-height) + 4px);
    left: .75rem; right: .75rem; min-width: 0; max-height: 60vh;
  }

  /* ── Inhalt bekommt die Fläche ──────────────────────────────────────── */
  .content   { padding: var(--space-3); padding-bottom: var(--space-6); }
  /* [Support 25.09.] Haftende Suchleiste: Versatz folgt dem kleineren Innenabstand von .content. */
  .card--sticky-kopf .items-filter { top: calc(-1 * var(--space-3)); }
  .card--sticky-kopf .table thead th { top: calc(var(--items-filter-h, 52px) - var(--space-3)); }
  .card-body { padding: var(--space-3); }
  .card-header { padding: var(--space-3); }
  /* Karten-Kopfzeilen mit Aktionen brechen um, statt zu quetschen. */
  .card-header--actions { flex-wrap: wrap; gap: var(--space-2); }
  .page-title-large { font-size: var(--font-size-lg); }

  /* Der Hilfe-Chat sitzt in der Schublade; sein Fenster klappte bislang
     „neben der Sidebar" auf — auf dem Telefon also außerhalb des Bildes. */
  .help-chat--in-sidebar .help-chat__panel,
  body.is-sidebar-collapsed .help-chat--in-sidebar .help-chat__panel {
    left: .75rem; right: .75rem; bottom: .75rem;
    width: auto; height: min(78dvh, 620px);
  }

  /* ── Werkzeug-Übersicht (/werkzeuge) ────────────────────────────────── */
  .tools-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .tools-card { padding: var(--space-3); gap: var(--space-3); }

  /* ── Bilder verkleinern (/werkzeuge/bilder) ─────────────────────────── */
  /* Optionen untereinander — die 540-px-Mindestbreite des Umbenennen-Feldes
     schob die Seite sonst quer aus dem Bild. */
  .imgtool-options { flex-direction: column; gap: .75rem; }
  .imgtool-options__field,
  .imgtool-options__field--wide { min-width: 0; width: 100%; flex: 0 0 auto; }
  .imgtool-drop { padding: 1.5rem .75rem; }
  .imgtool-hint__link { margin-left: 0; }

  /* Eine Bildzeile ist auf 375 px nicht in EINER Reihe zu haben: Vorschau
     links, Text daneben, Zustand und Knöpfe in einer zweiten Reihe darunter.
     Grid statt Flex — so bleibt die Vorschau über beide Reihen bündig links. */
  .imgtool-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "thumb name" "thumb size" "right right";
    align-items: center;
    column-gap: .6rem; row-gap: .35rem;
  }
  .imgtool-item__thumb, .imgtool-item__icon { grid-area: thumb; align-self: center; }
  .imgtool-item__name  { grid-area: name; white-space: normal; overflow-wrap: anywhere; }
  .imgtool-item__size  { grid-area: size; justify-self: start; }
  .imgtool-item__right { grid-area: right; flex-wrap: wrap; justify-content: flex-start; row-gap: .35rem; }
  .imgtool-item__result { white-space: normal; }

  /* Aktionsknöpfe: volle Breite, Daumen-tauglich. */
  .imgtool-actions { flex-direction: column; align-items: stretch; }
  .imgtool-actions .btn { width: 100%; justify-content: center; }
  .imgtool-actions .text-sm { text-align: center; }

  /* Zuschneiden-Fenster: fast Vollbild, Fußzeile mit vollbreiten Knöpfen. */
  .bl-modal { padding: var(--space-2); }
  .bl-modal__head, .bl-modal__foot { padding: var(--space-3); }
  .bl-modal__body { padding: var(--space-3); }
  .bl-modal__foot { flex-wrap: wrap; }
  .bl-modal__foot .btn { flex: 1 1 auto; justify-content: center; }
  .imgtool-crop__stage { max-height: 52dvh; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AUFGABEN-DETAIL — Kopf-Felder und Link
   ---------------------------------------------------------------------
   Die Felder standen vorher in drei nebeneinander gesetzten Formularen
   unterschiedlicher Breite und Höhe. Ein Raster mit gemeinsamer Grundlinie
   räumt das auf: der Titel bekommt doppelte Breite, alles andere teilt sich
   den Rest gleichmäßig, und ab Tablet-Breite bricht es sauber um.
   ⚠ Hausregel: nebeneinanderstehende Elemente vertikal mittig — hier über
     `align-items: end`, weil die Beschriftungen unterschiedlich hoch sind
     und die EINGABEFELDER auf einer Linie stehen sollen.
═══════════════════════════════════════════════════════════════════════ */
.task-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  gap: var(--space-3);
}
.task-fields__wide { grid-column: span 2; min-width: 0; }
.task-fields .form-group { margin: 0; min-width: 0; }
.task-fields__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3); margin-top: var(--space-3);
}

/* Eine Zeile je Adresse. ⚠ Hausregel: nebeneinanderstehende Elemente vertikal
   mittig — und die Knoepfe sind SO HOCH WIE DAS FELD (Wunsch Betreiber
   27.08.2026), nicht die kleine Variante daneben. */
.task-link { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.task-link + .task-link { margin-top: var(--space-2); }
.task-link__field { flex: 1 1 22rem; min-width: 0; margin: 0; }
.task-link__open[hidden] { display: none !important; }
/* ⚠ Gleiche Hoehe wie das Eingabefeld: die Felder bauen ihre Hoehe aus
   `--field-py` + Schrift (height bleibt auto), die Knoepfe aus festem
   Innenabstand. Dieselbe Rechnung am Knopf haelt beide auf einer Linie —
   eine feste Pixelzahl waere beim naechsten Schriftgroessen-Wechsel falsch. */
.task-link .btn {
  padding-top: var(--space-3-5);
  padding-bottom: var(--space-3-5);
  line-height: var(--font-size-sm);
}
.task-link__foot {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3);
}
.task-link__foot #t-link-state { margin-left: auto; }

/* ⚠ Die Ablegeflaeche der Aufgaben-Dateien ist DREIMAL so hoch wie die
   schmale Standard-Variante (Wunsch Betreiber 27.08.2026): sie ist hier das
   Haupt-Bedienelement — Screenshots landen per Ziehen darin, und ein
   fingerbreiter Streifen ist dafuer ein zu kleines Ziel. */
/* ⚠ `height` der Grundform ist fest (48px) — deshalb hier auf auto stellen
   und die Hoehe ueber min-height geben, sonst bliebe der Streifen schmal. */
/* Bild-Fenster: so gross wie noetig, aber nie groesser als das Fenster.
   ⚠ `max-height` am BILD, nicht nur am Rumpf — sonst schoebe ein hohes Foto
     die Kopfzeile mit dem Herunterladen-Knopf aus dem Bild. */
.bild-modal__dialog { width: min(1100px, 100%); }
.bild-modal__body { align-items: center; justify-content: center; padding: var(--space-3); }
.bild-modal__body img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 8rem);
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* ── Grosse Ablegeflaeche ────────────────────────────────────────────────
   ⚠ 144px = GENAU DREIMAL die 48px der Grundform. Bewusst in px, nicht in rem:
     die Grundform ist selbst in px gesetzt, und die App skaliert die Schrift
     (--ui-font-scale) — in rem waere die Flaeche mal doppelt, mal vierfach hoch.
   ⚠⚠ DIE GRUNDFORM IST EINE ZEILE: Sinnbild links, Text daneben, `flex: 1` auf
     dem Text. Hochkant gestellt zieht genau dieses `flex: 1` den Text auf die
     ganze Resthoehe — Sinnbild und Beschriftung klebten oben, darunter klaffte
     Leerraum. Deshalb hier: kein Strecken, alles mittig, Text zentriert. */
.dropzone--gross {
  height: auto;
  min-height: 144px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4);
  text-align: center;
}
.dropzone--gross .dropzone__icon { font-size: 40px; }
.dropzone--gross .dropzone__text { flex: 0 0 auto; align-items: center; gap: 2px; }
/* ⚠ Der Dateiname darf umbrechen — in der Zeilenform schneidet ihn `nowrap`
   ab, hier ist Platz dafuer. */
.dropzone--gross .dropzone__placeholder,
.dropzone--gross .dropzone__filename { white-space: normal; overflow: visible; }
.dropzone--gross .dropzone__call {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-base);
}

@media (max-width: 768px) {
  .task-fields { grid-template-columns: 1fr; }
  .task-fields__wide { grid-column: span 1; }
  .task-fields__foot { justify-content: stretch; }
  .task-fields__foot .btn { flex: 1 1 auto; justify-content: center; }
  .task-link__open, .task-link__remove { flex: 1 1 auto; justify-content: center; }
  .task-link__foot { flex-wrap: wrap; }
}

/* ── Artikel-Vorschau beim Ueberfahren einer Tabellenzeile ──────────────────
   Zeigt denselben Inhalt wie die Detailseite, ohne Seitenwechsel.
   ⚠ `pointer-events:none` ist hier wesentlich: die Karte darf die Maus NICHT
     annehmen. Sonst loeste sie beim Aufgehen unter dem Zeiger sofort ein
     mouseleave auf der Zeile aus und flackerte. Sie ist zum Lesen da, nicht
     zum Anfassen — angefasst wird ueber den „Details"-Knopf. */
.datanorm-vorschau {
  position: fixed;
  z-index: 60;
  width: min(46rem, calc(100vw - 2rem));
  /* Die tatsaechliche Hoehe setzt das Skript nach dem verfuegbaren Platz —
     hier steht nur die Obergrenze, damit die Karte nie den ganzen Schirm fuellt. */
  max-height: 32rem;
  overflow: auto;
  pointer-events: none;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: .75rem;
}
.datanorm-vorschau[hidden] { display: none; }
/* Innen sitzen ganze Karten aus der Detailansicht — im Schwebefenster
   brauchen sie weder eigenen Rahmen noch Schatten. */
.datanorm-vorschau .card {
  border: 0;
  box-shadow: none;
  margin: 0 0 .5rem;
}
.datanorm-vorschau .card:last-child { margin-bottom: 0; }

/* ── Kopier-Knöpfe im Kommentar-Popover ────────────────────────────────────
   Zwei Icon-Knöpfe über dem Text: Klartext und HTML in die Zwischenablage.
   ⚠ Der Rahmen ist seit dem Einbau ein <span role="button"> statt eines
     <button> — Buttons dürfen nicht ineinander stehen. */
.offer-comment__tools {
  display: flex;
  justify-content: flex-end;
  gap: .25rem;
  margin: -.15rem -.2rem .35rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.offer-comment__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.offer-comment__copy:hover { background: var(--color-surface-hover, #f3f4f6); color: var(--color-text, #111); }
.offer-comment__copy .material-symbols-outlined { font-size: 1rem; line-height: 1; }
/* Rückmeldung: kurz grün nach dem Kopieren, rot wenn es nicht ging. Ohne sie
   bliebe offen, ob der Klick etwas bewirkt hat — die Zwischenablage ist
   unsichtbar. */
.offer-comment__copy.is-done   { border-color: #16a34a; color: #16a34a; }
.offer-comment__copy.is-failed { border-color: #dc2626; color: #dc2626; }
.offer-comment__text { display: block; }

/* ── [MEHRERE TABS] Hinweis, wenn die Firma dieses Tabs nicht mehr aktiv ist ──
   Erscheint, sobald der Anwender in den Tab zurückkehrt — also BEVOR er klickt
   und in „Kein Zugriff auf dieses Projekt" läuft. */
.firma-hinweis {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(46rem, calc(100vw - 2rem));
  padding: .7rem .9rem;
  border: 1px solid #f59e0b;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  font-size: .85rem;
  line-height: 1.4;
}
.firma-hinweis__icon { color: #d97706; flex: 0 0 auto; }
.firma-hinweis__text { flex: 1 1 auto; }
.firma-hinweis__reload { flex: 0 0 auto; white-space: nowrap; }

/* [KLAPP] Auf-/zuklappbare Karten (Firmenformular): der Kopf ist der Schalter, der Pfeil
   sitzt rechts auf der Mittellinie (Hausregel: nebeneinander = vertikal mittig). */
[data-klapp] > .card-header { cursor: pointer; user-select: none; display: flex; align-items: center; gap: .75rem; }
[data-klapp] > .card-header > :first-child { flex: 1 1 auto; }
.klapp__chevron { flex: 0 0 auto; margin-left: auto; color: var(--color-text-muted); transition: transform .15s ease; }
.card--zu > .card-header { border-bottom: 0; }
/* Das hidden-Attribut verliert gegen Klassen mit eigenem display (z. B. die Logo-Karte, display:flex) — deshalb zusaetzlich per CSS. */
.card--zu > :not(.card-header) { display: none !important; }
.card--zu > .card-header .klapp__chevron { transform: rotate(-90deg); }

/* [STATISTIK] Rechnungsstatistik: Kacheln im Dashboard-Raster, Diagramm-Karten zu zweit,
   Inline-SVG aus App\Support\SvgChart (Farben/Schriften ueber CSS, damit sie zum Thema passen). */
.statistik-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.statistik-grid > .statistik-card--breit { grid-column: 1 / -1; }
@media (max-width: 1100px) { .statistik-grid { grid-template-columns: 1fr; } }
.statistik-card { margin: 0; }
.statistik-card > .card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.statistik-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.statistik-card__body--ring { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: var(--space-4); }
@media (max-width: 640px) { .statistik-card__body--ring { grid-template-columns: 1fr; } }
.statistik-chart svg.chart { width: 100%; height: auto; display: block; }
.statistik-chart svg.chart--ring { max-width: 180px; }
.statistik-card__body .table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; } /* Flex-/Grid-Kind darf schrumpfen, sonst schneidet die Karte die Tabelle ab */
.statistik-table { margin: 0; }
.statistik-table td, .statistik-table th { padding: .3rem .4rem; }
.statistik-table td:first-child, .statistik-table th:first-child { padding-left: 0; }
.statistik-table td:last-child, .statistik-table th:last-child { padding-right: 0; }
.statistik-table .nowrap { white-space: nowrap; }
.statistik-details { margin-top: var(--space-3); }
.statistik-details > summary { cursor: pointer; }
.statistik-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--space-3); align-items: center; }
.statistik-filter__plz    { flex: 0 0 110px; }
.statistik-filter__betrag { flex: 0 0 130px; }
.chart__grid { stroke: var(--color-border); stroke-width: 1; }
.chart__achse, .chart__label, .chart__wert { font-size: 11px; fill: var(--color-text-muted); font-family: inherit; }
.chart__wert { fill: var(--color-text); }
.chart__mitte { font-size: 14px; font-weight: 700; fill: var(--color-text); }
.chart__ring-grund { fill: none; stroke: var(--color-border); stroke-width: 26; }
.chart__leer { fill: var(--color-border); }
.chart-legend { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.chart-legend__punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }

/* [PROJEKTAKTE] Vorgangskette: sieben Stufen als Stepper, je Stufe Stand (leer/aktiv/warnung/erledigt),
   Kurztext, Zahl und der naechste Knopf. Bricht unter 1000 px auf zwei Reihen um. */
/* [30.09.2026] Kopfangaben in vier Gruppen (Team · Termine · Auftrag · Zuschläge & Abrechnung), je Zeile Beschriftung links,
   Wert rechts — statt loser Felder über die ganze Breite (Alexander: „hängt alles auseinander"). */
.akte-kopf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.akte-kopf__gruppe { min-width: 0; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.akte-kopf__titel { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: var(--font-size-xs); font-weight: 600;
                    letter-spacing: .05em; text-transform: uppercase; color: var(--color-primary); }
.akte-kopf__titel .material-symbols-outlined { font-size: 18px; }
.akte-kopf__liste { margin: 0; }
.akte-kopf__liste--summe { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--color-border); }
.akte-kopf__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .28rem 0; font-size: var(--font-size-sm); }
.akte-kopf__zeile + .akte-kopf__zeile { border-top: 1px dashed #edf1f5; }
.akte-kopf__zeile dt { flex: 0 0 auto; color: var(--color-text-muted); }
.akte-kopf__zeile dd { margin: 0; min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.akte-kopf__wert--gut { color: var(--color-success-text); }
.akte-kopf__wert--offen { color: var(--color-warning-text); }
.akte-kopf__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
@media (max-width: 1280px) { .akte-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .akte-kopf { grid-template-columns: minmax(0, 1fr); } }
.akte-kette { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; position: relative; }
@media (max-width: 1000px) { .akte-kette { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-4); } }
@media (max-width: 600px)  { .akte-kette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.akte-stufe { position: relative; padding: 0 .6rem; text-align: center; display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width: 0; }
.akte-stufe::before { content:""; position:absolute; top: 21px; left: -50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.akte-stufe:first-child::before { display:none; }
.akte-stufe--erledigt::before { background: var(--color-success); }
.akte-stufe__kreis { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
                     background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text-muted); }
.akte-stufe__kreis .material-symbols-outlined { font-size: 22px; }
.akte-stufe--aktiv    .akte-stufe__kreis { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.akte-stufe--warnung  .akte-stufe__kreis { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-bg); }
.akte-stufe--erledigt .akte-stufe__kreis { border-color: var(--color-success); color: #fff; background: var(--color-success); }
.akte-stufe__titel { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); }
.akte-stufe--leer .akte-stufe__titel { color: var(--color-text-muted); font-weight: 500; }
.akte-stufe__text { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.akte-stufe__zahl { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); }
.akte-stufe--warnung .akte-stufe__zahl { color: var(--color-error-text); }
.akte-stufe__aktion { margin-top: .2rem; }
.akte-stufe__aktion .btn { padding: .25rem .55rem; font-size: var(--font-size-xs); }

/* [MEINE FIRMA] Die AKTIVE Firma in der Companies-Liste. Nur sie laesst sich einrichten,
   deshalb muss sie auf einen Blick zu finden sein — ein linker Balken plus zarter Grund.
   Der Balken traegt die Aussage auch dort, wo Farbe allein nicht reicht. */
.table tr.firma-aktiv > td { background: var(--color-primary-light); }
.table tr.firma-aktiv > td:first-child { box-shadow: inset 3px 0 0 0 var(--color-primary); }

/* [VERBINDUNGEN] Die vier Programm-Zugaenge zugeklappt hinter einer Ueberschrift — wie das
   „Technische" der Stammdaten. Der Mailversand steht davor und offen. */
.verb-technik { margin-bottom: var(--space-4); }
.verb-technik__kopf { cursor: pointer; list-style: none; }
.verb-technik__kopf::-webkit-details-marker { display: none; }
.verb-technik__kopf h3 { margin: 0; }
.verb-technik__kopf::after { content: "expand_more"; font-family: 'Material Symbols Outlined';
                             margin-left: auto; color: var(--color-text-muted); font-size: 22px; }
.verb-technik[open] .verb-technik__kopf::after { content: "expand_less"; }
/* ⚠ Die Karten drinnen behalten ihren eigenen Rahmen — sonst sehen fuenf gestapelte
   Formulare aus wie eines. Nur der Abstand nach aussen faellt weg. */
.verb-technik__inhalt { padding: var(--space-4) var(--space-5) var(--space-2); }
.verb-technik__inhalt > .card:last-child { margin-bottom: var(--space-3); }

/* [STAMMDATEN] Die Firmenangaben als Folge eigenstaendiger Karten statt einer Feldwueste.
   Jede Karte beantwortet EINE Frage; die Ueberschrift ist die Frage, der Untertitel sagt,
   wo die Angaben landen. */
.stammdaten-block { margin-bottom: var(--space-4); }
.stammdaten-block .card-header h3 { margin: 0; }
.stammdaten-block .form-section { border: 0; padding: 0; margin: 0; }
.stammdaten-block .form-section__legend { display: none; }

/* Vorschau: ein angedeutetes Blatt. Der Rahmen macht sichtbar, dass es ein Dokument ist. */
.stammdaten-vorschau { margin-bottom: var(--space-4); }
.stammdaten-vorschau__blatt { border: 1px solid var(--color-border); border-radius: 8px;
                              background: #fff; padding: var(--space-5); min-height: 190px;
                              display: flex; flex-direction: column; gap: var(--space-4); }
.stammdaten-vorschau__absender { font-size: var(--font-size-sm); line-height: 1.5; color: #111; }
.stammdaten-vorschau__firma { font-weight: 700; font-size: var(--font-size-lg); }
.stammdaten-vorschau__mitte { flex: 1; display: flex; align-items: center; gap: .5rem;
                              color: var(--color-text-muted); font-size: var(--font-size-xs);
                              border-top: 1px dashed var(--color-border);
                              border-bottom: 1px dashed var(--color-border); padding: var(--space-4) 0; }
.stammdaten-vorschau__fuss { font-size: var(--font-size-xs); color: #444; line-height: 1.6;
                             overflow-wrap: anywhere; }
.stammdaten-vorschau__fuss:empty::after { content: "Noch keine Angaben für die Fußzeile.";
                                          color: var(--color-text-muted); font-style: italic; }

/* Technisches: zugeklappt, damit es niemanden aufhaelt, der nur eine Telefonnummer sucht. */
.stammdaten-technik { margin-bottom: var(--space-4); }
.stammdaten-technik__kopf { cursor: pointer; list-style: none; }
.stammdaten-technik__kopf::-webkit-details-marker { display: none; }
.stammdaten-technik__kopf h3 { margin: 0; }
.stammdaten-technik__kopf::after { content: "expand_more"; font-family: 'Material Symbols Outlined';
                                   margin-left: auto; color: var(--color-text-muted); font-size: 22px; }
.stammdaten-technik[open] .stammdaten-technik__kopf::after { content: "expand_less"; }

/* Der eine Speichern-Knopf klebt unten — nie suchen muessen. */
/* ⚠⚠ Der Speichern-Knopf klebt OBEN. Unten klebte er zuerst und verdeckte dabei jeweils
   die naechste Karte; oben steht er ueber dem, was man gerade bearbeitet. `top: 0` genuegt,
   weil `.content` selbst scrollt — die Topbar liegt ausserhalb dieses Bereichs. */
.stammdaten-speichern { position: sticky; top: 0; z-index: 5;
                        display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
                        margin-bottom: var(--space-4);
                        padding: var(--space-4) var(--space-5);
                        background: var(--color-surface); border: 1px solid var(--color-border);
                        border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.07); }

/* [AGB-BILD] Der hinterlegte AGB-Stand: erste Seite als Bild, daneben Name und Datum.
   Das Bild traegt Seitenverhaeltnis A4 und einen Rahmen, damit ein weisses PDF nicht
   im weissen Kartenhintergrund verschwindet. */
.agb-stand { display:flex; gap: var(--space-4); align-items:flex-start; flex-wrap:wrap; }
.agb-stand__bild { display:block; width: 110px; min-height: 156px; flex:0 0 auto;
                   border:1px solid var(--color-border); border-radius:6px; overflow:hidden;
                   background: var(--color-surface); }
.agb-stand__bild img { display:block; width:100%; height:auto; }
.agb-stand__bild--leer { display:flex; align-items:center; justify-content:center;
                         background: var(--color-primary-light); }
.agb-stand__bild--leer::after { content:"picture_as_pdf"; font-family:'Material Symbols Outlined';
                                font-size:38px; color: var(--color-primary); }
.agb-stand__text { flex:1 1 240px; min-width:0; }
.agb-stand__name { font-weight:600; overflow-wrap:anywhere; }

/* [PROJEKTDATEIEN v233] Ordner und Kennzeichen in der Dateizeile.
   ⚠ „vertraulich" bekommt einen linken Balken UND ein Wort — Farbe allein traegt die
   Aussage nicht, und hier haengt daran, ob eine Datei an die Konkurrenz geht. */
.pfiles-ordner { display:inline-flex; align-items:center; gap:.2rem; }
.pfiles-ordner .material-symbols-outlined { font-size:15px; }
.pfiles-kz { display:inline-block; margin-right:.3rem; padding:.05rem .4rem; border-radius:5px;
             font-size: var(--font-size-xs); font-weight:600;
             background: var(--color-primary-light); color: var(--color-primary); }
.pfiles-kz--vertraulich { background: var(--color-error-bg); color: var(--color-error-text); }
.pfiles-list__row--vertraulich { box-shadow: inset 3px 0 0 0 var(--color-error); }

/* Ablage-Klappe je Zeile: klein, schliesst sich nie von selbst. */
.pfiles-ablage { position: relative; }
.pfiles-ablage > summary { list-style: none; cursor: pointer; }
.pfiles-ablage > summary::-webkit-details-marker { display: none; }
.pfiles-ablage__form { position:absolute; right:0; top:100%; z-index:20; width: 20rem;
                       padding: var(--space-4); background: var(--color-surface);
                       border:1px solid var(--color-border); border-radius:10px;
                       box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* [MEINE FIRMA] Startseite: eine Kachel je Rubrik. Symbol oben, Name, darunter ein Satz,
   der sagt was man dort entscheidet. Drei Spalten ab 1100 px, zwei ab 760, eine darunter. */
.firma-kacheln { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
                 margin-top: var(--space-4); }
@media (max-width: 1100px) { .firma-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .firma-kacheln { grid-template-columns: 1fr; } }
.firma-kachel { display:flex; flex-direction:column; gap:.4rem; padding: var(--space-5);
                background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
                color: var(--color-text); text-decoration:none; min-height: 150px;
                transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.firma-kachel:hover { border-color: var(--color-primary); box-shadow: 0 6px 18px rgba(0,0,0,.07); transform: translateY(-2px); }
.firma-kachel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.firma-kachel__icon { font-size: 34px; line-height:1; color: var(--color-primary); }
.firma-kachel__titel { font-weight: 700; font-size: var(--font-size-lg); line-height:1.2; }
.firma-kachel__kurz { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height:1.45; }
/* ⚠ Der Stand sitzt unten, nicht neben dem Namen: er ist ein Hinweis, keine Ueberschrift.
   Wort UND Symbol — Farbe allein traegt die Aussage nicht. */
.firma-kachel__stand { margin-top:auto; padding-top:.5rem; display:flex; align-items:center; gap:.3rem;
                       font-size: var(--font-size-xs); font-weight:600; }
.firma-kachel__stand .material-symbols-outlined { font-size:16px; }
.firma-kachel__stand--fertig { color: var(--color-success-text); }
.firma-kachel__stand--offen  { color: var(--color-text-muted); font-weight:500; }

/* Weiterfuehrende Seite innerhalb einer Rubrik (Benutzer, Vorlagen, Zugangsdaten). */
.firma-weiter { display:flex; align-items:center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
                text-decoration:none; color: var(--color-text); margin-bottom: var(--space-4); }
.firma-weiter:hover { border-color: var(--color-primary); }
.firma-weiter__icon { font-size: 28px; color: var(--color-primary); }
.firma-weiter__text { display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0; }
.firma-weiter__pfeil { color: var(--color-text-muted); }

/* [30.09.2026] Bereiche der Projektakte als Karten (ersetzt die Knopfleiste .akte-navi): farbiger Akzent je Bereich,
   Kopf = Symbol + Name + Zahl (führt in den Bereich), darunter die letzten Einträge, unten „Alle anzeigen" / „Neu".
   Farbe über --akzent je Modifier; Kacheln so breit wie möglich, ab schmal untereinander. */
.akte-bereiche { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border);
                 background: var(--color-bg-subtle, #f9fafb);
                 /* [30.09.2026] volle Breite, gleich breite Spalten, dazwischen der Trenner nach der dritten
                    [02.10.2026] sechs statt fünf: „Formulare" zwischen Dateien und Bauleitung */
                 grid-template-columns: repeat(3, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); }
/* [30.09.2026] Kunde und Baustelle 50/50 über den Bereichen */
.akte-partner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6, 2rem);
                padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border);
                background: var(--color-bg-subtle, #f9fafb); }   /* [30.09.2026] hellgrau wie der Bereich mit den fünf Karten */
.akte-partner__karte + .akte-partner__karte { position: relative; }
.akte-partner__karte + .akte-partner__karte::before { content: ''; position: absolute; left: calc(-1 * var(--space-6, 2rem) / 2 - 1px); top: .25rem; bottom: .25rem;
                                                     border-left: 1px solid #e2e8f0; }   /* feiner Trennstrich zwischen Kunde und Baustelle */
.akte-partner__fahrt { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.akte-partner__fahrt .material-symbols-outlined { font-size: 18px; color: var(--akzent); }
.akte-partner__fahrt--leer { font-weight: 400; color: var(--color-text-muted); }
.akte-partner__von { margin-top: -.2rem; font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* [30.09.2026] ohne Rahmen (Alexander): nur Symbol + Text auf weißem Grund */
/* [30.09.2026] je Karte zwei gleiche Hälften (Alexander: „eher 25 / 25"): links Symbol + Name + Anschrift, rechts die Links */
.akte-partner__karte { --akzent: #0370b0; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 50%); align-items: start; column-gap: .9rem; min-width: 0; }
.akte-partner__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
                      border-radius: 50%; background: color-mix(in srgb, var(--akzent) 12%, white); color: var(--akzent); }
.akte-partner__icon .material-symbols-outlined { font-size: 24px; }
.akte-partner__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.akte-partner__art { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.akte-partner__name { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
a.akte-partner__name:hover { color: var(--akzent); text-decoration: underline; }
.akte-partner__name--leer { color: var(--color-text-muted); font-weight: 600; }
.akte-partner__zeile { font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* [30.09.2026] rechts neben Name + Anschrift, jeder Eintrag in eigener Zeile, rechtsbündig */
.akte-partner__kontakt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding-top: 1.1rem; }
.akte-partner__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 20px; }   /* Google Maps + Fahrweg nebeneinander */
.akte-partner__link { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--font-size-sm); color: var(--akzent); }
.akte-partner__link a { color: var(--akzent); text-decoration: none; }
.akte-partner__link a:hover { text-decoration: underline; }
.akte-partner__kontakt .material-symbols-outlined { font-size: 17px; color: var(--akzent); }
@media (max-width: 760px) { .akte-partner { grid-template-columns: minmax(0, 1fr); } .akte-partner__karte + .akte-partner__karte::before { display: none; }
  .akte-partner__karte { grid-template-columns: auto minmax(0, 1fr); } .akte-partner__kontakt { grid-column: 2; padding-top: .5rem; } }
.akte-bereiche__trenner { width: 0; border-left: 1px dashed #cbd5e1; margin: .25rem 0; }
@media (max-width: 1500px) {   /* darunter wären die Karten zu schmal für „Alle" + „Neue Preisanfrage" in einer Zeile */
  .akte-bereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .akte-bereiche__trenner { grid-column: 1 / -1; width: auto; border-left: 0; border-top: 1px dashed #cbd5e1; margin: 0; }
}
@media (max-width: 1100px) { .akte-bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .akte-bereiche { grid-template-columns: minmax(0, 1fr); } }
.akte-bereich { --akzent: var(--color-primary); display: flex; flex-direction: column; min-width: 0;
                background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--akzent);
                border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .15s ease, transform .15s ease; }
.akte-bereich:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.akte-bereich--preisanfragen { --akzent: #0e7490; }
.akte-bereich--angebote      { --akzent: #0370b0; }
.akte-bereich--rechnungen    { --akzent: #15803d; }
.akte-bereich--dateien       { --akzent: #b45309; }
.akte-bereich--bauleitung    { --akzent: #7c3aed; }
.akte-bereich--formulare     { --akzent: #0f766e; }   /* [FORMULARE 02.10.2026] */
.akte-bereich__kopf { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem .7rem; color: var(--color-text); text-decoration: none; }
.akte-bereich__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 10px; }
.akte-bereich__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
                      border-radius: 10px; background: color-mix(in srgb, var(--akzent) 12%, white); color: var(--akzent); }
.akte-bereich__icon .material-symbols-outlined { font-size: 22px; }
.akte-bereich__name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.akte-bereich__zahl { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--akzent); }
.akte-bereich__zahl--leer { color: var(--color-text-muted); font-weight: 600; }
.akte-bereich__suffix { font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-muted); }
.akte-bereich__liste { list-style: none; margin: 0; padding: 0 .5rem; border-top: 1px solid var(--color-border); }
.akte-bereich__liste li + li { border-top: 1px solid #f1f5f9; }
.akte-bereich__eintrag { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem; border-radius: 8px; color: var(--color-text); text-decoration: none; }
.akte-bereich__eintrag:hover { background: color-mix(in srgb, var(--akzent) 7%, white); }
.akte-bereich__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.akte-bereich__titel { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte-bereich__unter { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte-bereich__meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.akte-bereich__datum { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.akte-bereich__leer { margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.akte-bereich__fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: nowrap;
                      padding: .5rem .75rem .5rem 1rem; border-top: 1px solid var(--color-border); white-space: nowrap; }   /* „Neu" rechts neben „Alle anzeigen", kein Umbruch */
.akte-bereich__fuss .btn { flex: 0 0 auto; padding-inline: .35rem; gap: .25rem; font-size: var(--font-size-xs); }
.akte-bereich__fuss .btn .material-symbols-outlined { font-size: 16px; }
.akte-bereich__platz { visibility: hidden; pointer-events: none; }   /* hält die „Neu"-Zeile frei, damit „Alle anzeigen" überall gleich hoch steht */
.akte-bereich__alle { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--font-size-sm); font-weight: 600; color: var(--akzent); text-decoration: none; }
.akte-bereich__alle .material-symbols-outlined { font-size: 18px; transition: transform .15s ease; }
.akte-bereich__alle:hover .material-symbols-outlined { transform: translateX(2px); }

/* ── [BELEG] Festgeschriebener Beleg: Felder als Text, nicht als Eingabe ──────────────────────────
   Ein ausgestelltes Angebot (und eine ausgestellte Rechnung) ist unveraenderlich. Die Felder blieben
   bisher als weisse Eingabekaesten stehen — nur der blaue Hinweis sagte, dass nichts mehr geht.
   Mit dieser Klasse sehen readonly/disabled Felder aus wie gedruckter Text. */
/* ── [GESPERRT] Gesperrte Felder sehen gesperrt aus (Betreiber, 22.09.2026): grauer Grund statt nur blockiertem
   Klick — z. B. die Bindefrist beim freibleibenden Angebot. Festgeschriebene Belege (form--festgeschrieben) zeigen
   ihre Werte weiter als Text; deren Regeln stehen darunter und gewinnen. ─────────────────────────────────────── */
.form-input:disabled, .form-select:disabled, .form-textarea:disabled, textarea.form-input:disabled {
  background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; cursor: not-allowed; -webkit-text-fill-color: #6b7280;
}
.form-input:disabled::placeholder { color: #9ca3af; }
.form--festgeschrieben .form-input[readonly],
.form--festgeschrieben .form-select:disabled,
.form--festgeschrieben .form-input:disabled,
.form--festgeschrieben textarea[readonly] {
  background: transparent; border-color: transparent; box-shadow: none; padding-left: 0;
  color: var(--color-text); cursor: default; opacity: 1; -webkit-text-fill-color: var(--color-text);
}
.form--festgeschrieben .form-select:disabled { background-image: none; appearance: none; -webkit-appearance: none; }
.form--festgeschrieben .form-input[readonly]::placeholder { color: transparent; }
.form--festgeschrieben .form-checkbox:disabled { opacity: .9; }

/* ── [AUSSTELLEN] Fehlende Angaben: leicht orange hinterlegt, damit man sie sieht ──────────────── */
.form-input.is-fehlend, .form-select.is-fehlend, textarea.is-fehlend { background: #fff7ed; border-color: #fb923c; box-shadow: 0 0 0 3px rgba(251, 146, 60, .18); }
.card.is-fehlend, [data-qtb-section].is-fehlend, p.is-fehlend { background: #fff7ed; outline: 2px solid #fb923c; outline-offset: 2px; border-radius: 8px; }
.confirm-dialog__message { white-space: pre-line; }

/* ── [POSITIONEN] Rechnungseditor: lesbare Felder, Rich-Text-Beschreibung ─────────────────────── */
#rm-pos-table .form-input, #rm-pos-table .form-select { min-width: 4.5rem; }
#rm-pos-table .rm-pos { min-width: 5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#rm-pos-table .rm-ebene { min-width: 3.5rem; text-align: center; }
#rm-pos-table .rm-preis { min-width: 7.5rem; }
#rm-pos-table .rm-menge { min-width: 6rem; }
#rm-pos-table .rm-einheit { min-width: 7.5rem; }
#rm-pos-table td { vertical-align: top; }
.rm-desc { margin-top: .35rem; }
.rm-desc__view { cursor: text; padding: .35rem .5rem; border: 1px dashed var(--color-border); border-radius: 6px; min-height: 2rem; }
.rm-desc__view:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.rm-desc .ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; padding: 2px 4px; }
.rm-desc .ql-container.ql-snow { border-radius: 0 0 6px 6px; min-height: 90px; font-size: var(--font-size-sm); }
.rm-col-del { width: 2.5rem; }

/* [VERKNUEPFUNG 09.09.2026] Zwischenschritt „Dazu gehört“ im Dialog „Aus Leistung“. */
.urkalk-dazu__h { margin: .7rem 0 .25rem; font-size: var(--font-size-sm); color: #374151; font-weight: 600; }
.urkalk-dazu__row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; }
.urkalk-dazu__label { flex: 1; min-width: 0; }
.urkalk-dazu__menge { width: 6.5rem; text-align: right; }

/* [VERKNUEPFUNG 09.09.2026] Hinweise unter einer Position: Voraussetzung fehlt (gelb, mit „einfügen“), Ausschluss (rot). */
.urkalk-verkn { margin-top: .4rem; }
/* ⚠ flex-wrap: der Hinweis traegt seit v234 Preis und Unterschied — in einer schmalen
   Spalte lief das aus der Zeile heraus. Lieber ein Umbruch als eine abgeschnittene Zahl. */
.urkalk-verkn__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 6px; margin-top: .25rem; }
/* ⚠ Rahmen fuer ALLE Hinweisarten, nicht nur fuer die blaue: sie stehen untereinander in
   derselben Spalte, und ein Kasten mit Kante neben einem ohne sieht nach Fehler aus. Der
   Rahmen nimmt jeweils den kraeftigeren Ton der eigenen Farbe. */
.urkalk-verkn__row--fehlt { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.urkalk-verkn__row--konflikt { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.urkalk-verkn__row--doppelt { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }   /* Alternativen beide bepreist */
/* Alternative / Ergaenzung moeglich (Vorschlag).
   ⚠ Mit Rahmen: seit v234 traegt der Kasten Preis, Unterschied und drei Knoepfe ueber
     mehrere Zeilen — ohne Kante zerfiel er optisch in lose Zeilen der Positionsspalte. */
.urkalk-verkn__row--info { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.urkalk-verkn__row .material-symbols-outlined { font-size: 18px; }
/* ⚠ NUR der erste Knopf wird nach rechts geschoben. Seit v234 stehen drei nebeneinander
   (einfuegen / tauschen / ausblenden) — mit margin-left:auto an jedem draengt jeder den
   naechsten in eine eigene Zeile, und aus der Knopfreihe wird eine Treppe. */
.urkalk-verkn__row .btn { margin-left: auto; }
.urkalk-verkn__row .btn + .btn { margin-left: 0; }
/* Die drei Knoepfe der Alternative bleiben zusammen: entweder alle neben dem Hinweis
   oder alle in der naechsten Zeile — nie als Treppe. */
.urkalk-verkn__aktionen { order: 1; display: flex; flex-wrap: nowrap; gap: .4rem; margin-left: auto; }
.urkalk-verkn__aktionen .btn { margin-left: 0; }


/* [VERKNUEPFUNG STUFE 2, 09.09.2026] Sammel-Banner oben auf der Kalkulationsseite (alle offenen Hinweise, Sprung zur
   Position) + „bereits im LV“-Zeilen im Schritt „Dazu gehört“ (Einzel- und Gruppen-Dialog). */
.urkalk-verkn-banner { display: block; margin-bottom: var(--space-3); }
.urkalk-verkn-banner__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.urkalk-verkn-banner__head .btn { margin-left: auto; white-space: nowrap; }
.urkalk-verkn-banner__list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.urkalk-verkn-banner__list[hidden] { display: none; } /* display:flex darf das hidden-Attribut nicht schlagen (Umschalter „anzeigen/ausblenden“) */
.urkalk-verkn-banner__item { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 6px; background: rgba(255, 255, 255, .7); }
.urkalk-verkn-banner__item--fehlt { color: #92400e; }
.urkalk-verkn-banner__item--konflikt { color: #b91c1c; }
.urkalk-verkn-banner__item--doppelt { color: #92400e; }
.urkalk-verkn-banner__item--info { color: #1e40af; }
.urkalk-verkn-banner__item .material-symbols-outlined { font-size: 18px; flex: none; }
.urkalk-verkn-banner__text { flex: 1; min-width: 0; }
.urkalk-verkn-banner__item .btn { margin-left: auto; white-space: nowrap; flex: none; }
.urkalk-dazu__row--schon { color: #15803d; cursor: default; }
.urkalk-dazu__row--schon .material-symbols-outlined { font-size: 18px; }

/* [TEXTPOSITIONEN v227, 09.09.2026] Textblock in der Kalkulation und im Rechnungs-Editor: volle Breite, ruhiger Hintergrund,
   kein Preis, keine Kalkulation. */
.urkalk-row-text > td { background: var(--color-bg, #f8fafc); }
.urkalk-row-text .urkalk-text__head { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
/* [TEXTZEILE] gleiche Ausrichtung wie eine Position: Text in der Beschreibungs-Spalte, gleiche Zellabstaende */
.urkalk-row-text > td.urkalk-text__zelle, .urkalk-row-text > td.urkalk-text__menge { vertical-align: top; }
.urkalk-text__menge { text-align: right; white-space: nowrap; }
.urkalk-text__badge { white-space: nowrap; }
#urkalk-items.is-compact .urkalk-row-text > td.urkalk-text__menge { vertical-align: middle; }
.urkalk-row-text .urkalk-text__zelle .urkalk-richtext { margin-top: .15rem; }
.urkalk-row-text .urkalk-richtext { max-width: 72rem; }
/* ⚠ [09.09.2026] display:flex schlaegt das hidden-Attribut — der Text-Modus des Positions-Dialogs blendet die Mengen-Zeile darueber aus. */
.form-row[hidden] { display: none; }
.form-group[hidden] { display: none; }

/* [ANFRAGE 10.09.2026] Versand-Popup: Angebotsfrist rechts neben dem Absender + Hinweis, wenn das Feld auf der Seite
   einen anderen (ungespeicherten) Wert traegt als die Datenbank. */
.bulkmail-sender__frist { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.bulkmail-sender__frist strong { font-variant-numeric: tabular-nums; }
.bulkmail-frist-hint { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .75rem; padding: .55rem .7rem; border-radius: 8px; background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.bulkmail-frist-hint[hidden] { display: none; }
.bulkmail-frist-hint .material-symbols-outlined { font-size: 20px; flex: none; }
.bulkmail-frist-hint__text { flex: 1; min-width: 0; }
.bulkmail-frist-hint .btn { flex: none; }
.inquiry-toolbar__reminder-sender { margin-top: .3rem; }
/* [EINZELVERSAND 10.09.2026] Empfaenger-Zeile im Popup „E-Mail senden" */
.singlemail-to { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--space-3); }

/* [ERINNERUNG 10.09.2026] Popup „Erinnerungen an alle offenen Anfragen": Empfaengerliste. */
.remmail-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; max-height: 18rem; overflow: auto; }
.remmail-list__row { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-bottom: 1px solid var(--color-border); }
.remmail-list__row:last-child { border-bottom: none; }
.remmail-list__row .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted, #6b7280); flex: none; }
.remmail-list__row input[type="checkbox"] { flex: none; }
.remmail-list__who { flex: 1; min-width: 0; }
.remmail-list__meta { flex: none; white-space: nowrap; }
.bulkmail-frist-ok { color: #15803d; }

/* ── [GERÄTE-KALKULATION v231] Preismodelle, Rechner, Geräteeinsätze ─────────── */
.inline-form { display: inline; }
.pm-section { margin: var(--space-5) 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pm-rows td { vertical-align: middle; }
.pm-rows .form-input--sm, .pm-rows .form-select--sm { min-width: 5.5rem; }
/* [28.09.2026, V-7] Nebenkosten als Zeilen: Bezeichnung · Art · nur die Felder der Art · automatisch dabei · entfernen.
   Vorher eine Tabelle mit acht Spalten, breiter als der Bildschirm. Nebeneinander = vertikal mittig. */
.pm-nk { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.pm-nk-zeile { display: flex; flex-wrap: wrap; 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); }
.pm-nk-zeile__bez { flex: 1 1 14rem; min-width: 12rem; }
.pm-nk-zeile__art { flex: 0 1 17rem; }
.pm-nk-zeile__feld { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--font-size-sm); }
.pm-nk-zeile__feld .form-input--sm { width: 6.5rem; }
.pm-nk-zeile__feld .pm-nk-zeile__kurz { width: 4.5rem; }
.pm-nk-zeile__aktiv { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); margin-left: auto; white-space: nowrap; }
.pm-partner-suche { margin-bottom: var(--space-1); }
.pm-rc-nk { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 var(--space-3); }
.pm-rc-nk .form-checkbox-row { margin: 0; align-items: center; }
.pm-rc-warn { color: #b45309; margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.urkalk-einsaetze { margin-bottom: var(--space-3); }
.urkalk-einsatz__details summary { cursor: pointer; list-style: none; }
.urkalk-einsatz__details summary::-webkit-details-marker { display: none; }
.urkalk-einsatz__herleitung { margin-top: var(--space-2); min-width: 22rem; }
.urkalk-einsatz__herleitung td { padding: .15rem .4rem; font-size: var(--font-size-sm); }
.urkalk-einsatz__warn { color: #b45309; font-size: var(--font-size-sm); margin-top: .25rem; display: flex; align-items: center; gap: .25rem; }
.urkalk-einsatz__warn .material-symbols-outlined { font-size: 1rem; }
.urkalk-einsatz__dialog { width: min(920px, 100%); }
.urkalk-einsatz__ziele { display: flex; flex-direction: column; gap: .25rem; max-height: 18rem; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 8px; padding: .5rem .75rem; }
.urkalk-einsatz__ziel { display: flex; align-items: center; gap: .5rem; margin: 0; }
.urkalk-einsatz__ziel-pos { font-family: var(--font-mono, monospace); min-width: 4rem; }
.urkalk-einsatz__ziel-text { flex: 1 1 auto; }
.urkalk-einsatz__anteil { width: 5rem; }
tr.urkalk-calc-row.is-einsatz { background: #f3f7ff; }
tr.urkalk-calc-row.is-einsatz .urkalk-calc__bez:disabled { color: #1e3a8a; font-weight: 500; }

/* [ANHANG 11.09.2026] Projektdateien an eine Versand-Mail haengen — Einzelversand,
   Sammelversand und Erinnerung teilen sich diesen Baustein (_mail_anhang.php).
   ⚠ Die Zeile „Geht mit" steht bewusst AUSSERHALB des Aufklappers: sie muss auch
     sichtbar sein, wenn die Liste zugeklappt ist. */
.mail-anhang { margin: .75rem 0 .25rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; }
.mail-anhang__summary { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; cursor: pointer; font-weight: 600; font-size: .95rem; }
.mail-anhang__summary .material-symbols-outlined { font-size: 18px; }
.mail-anhang__zaehler { margin-left: auto; font-weight: 400; font-size: .85rem; color: var(--text-muted, #64748b); }
.mail-anhang__liste { max-height: 220px; overflow-y: auto; border-top: 1px solid var(--border, #e2e8f0); }
.mail-anhang__zeile { display: flex; align-items: center; gap: .55rem; padding: .4rem .7rem; cursor: pointer; margin: 0; }
.mail-anhang__zeile:hover { background: var(--bg-subtle, #f8fafc); }
.mail-anhang__name { flex: 1 1 auto; overflow-wrap: anywhere; }
.mail-anhang__meta { flex: 0 0 auto; font-size: .8rem; color: var(--text-muted, #64748b); white-space: nowrap; }
.mail-anhang + .form-hint, .mail-anhang__liste + .form-hint { display: block; padding: .4rem .7rem .55rem; margin: 0; }
.mail-anhang__leer { margin: .75rem 0 .25rem; }
/* ⚠⚠ SITZT IM FUSS DES POPUPS (das Skript haengt sie dorthin um). Die Zeile nuetzt nur,
   wenn sie in dem Moment zu sehen ist, in dem jemand auf „Jetzt versenden" drueckt. Im
   Koerper waere sie unter der Pflichthaken-Liste weggescrollt. */
.mail-anhang__gewaehlt { display: flex; align-items: flex-start; gap: .45rem; margin: .5rem 0 0; padding: .5rem .7rem;
  border-radius: 8px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: .9rem; overflow-wrap: anywhere;
  flex: 1 1 100%; order: -1; width: 100%; }
/* ⚠ Nur der Fuss MIT Anhangzeile bricht um — sonst ruecken die Knoepfe in anderen Popups. */
.bl-modal__foot--mit-anhang { flex-wrap: wrap; }
.mail-anhang__gewaehlt .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
/* ⚠⚠ `display:flex` schlaegt das hidden-Attribut — ohne diese Zeile steht „Geht mit:" leer da,
   obwohl nichts gewaehlt ist. Derselbe Grund beim Zaehler im Summary. */
.mail-anhang__gewaehlt[hidden] { display: none; }
.mail-anhang__zaehler[hidden] { display: none; }
.mail-anhang__upload { padding: .55rem .7rem; border-top: 1px solid var(--border, #e2e8f0); }
.mail-anhang__upload-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; font-size: .9rem; }
.mail-anhang__upload-label .material-symbols-outlined { font-size: 18px; }
.mail-anhang__upload .form-input { font-size: .85rem; }
.mail-anhang__leer + .mail-anhang__upload { border-top: 0; padding-left: 0; padding-right: 0; }

/* [ANHANG 11.09.2026] Die drei Versand-Popups sind breiter und hoeher geworden, seit die
   Projektdateien mit drinstehen. ⚠ Bewusst SCOPED auf die drei Dialoge — `.bl-modal__dialog`
   ist die Grundform jedes Popups der App, dort zu schrauben aendert ueberall etwas. */
[data-singlemail] .bl-modal__dialog { width: min(720px, 100%); }
[data-remmail] .bl-modal__dialog,
[data-bulkmail] .bl-modal__dialog { width: min(1040px, 100%); }
[data-singlemail] .bl-modal__dialog,
[data-remmail] .bl-modal__dialog,
[data-bulkmail] .bl-modal__dialog { max-height: 94vh; }
/* Die Dateiliste darf auf hohen Bildschirmen mehr zeigen, bleibt aber gedeckelt —
   sonst schiebt sie den Senden-Knopf aus dem Bild. */
[data-singlemail] .mail-anhang__liste,
[data-remmail] .mail-anhang__liste,
[data-bulkmail] .mail-anhang__liste { max-height: min(320px, 34vh); }

/* ─────────────────────────────────────────────────────────────────────────
   [VORSCHAUBILDER 14.09.2026] Projektdateien: Miniatur je Zeile + Kachel-Ansicht.

   ⚠⚠ EIN MARKUP, ZWEI ANSICHTEN. Liste und Kacheln zeigen dieselben <li>-Zeilen,
      nur anders gesetzt. Ein zweiter Satz Markup waere die Stelle, an der das
      Kennzeichen „vertraulich" in der einen Ansicht fehlt und in der anderen nicht.
   ⚠ Das Symbol liegt UNTER dem Bild. Kommt kein Bild (Word ohne Miniatur, kaputte
      PDF), wird es sichtbar — nie das „kaputtes Bild"-Zeichen des Browsers.
   ───────────────────────────────────────────────────────────────────────── */
.pfiles-ansicht { display: inline-flex; gap: .25rem; }
.pfiles-ansicht__btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.pfiles-list__vorschau { position: relative; flex: 0 0 auto; width: 40px; height: 40px;
                         display: flex; align-items: center; justify-content: center;
                         background: var(--color-surface-soft); border-radius: 5px; overflow: hidden; }
.pfiles-list__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Kachel-Ansicht: dieselben Zeilen als Raster. */
.pfiles-list--kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                        gap: var(--space-4); }
.pfiles-list--kacheln .pfiles-list__row { position: relative; flex-direction: column; align-items: stretch;
                                          gap: .2rem; padding: 0 0 .5rem; border: 1px solid var(--color-border);
                                          border-radius: 10px; overflow: visible; }
.pfiles-list--kacheln .pfiles-list__vorschau { width: 100%; height: 140px; border-radius: 9px 9px 0 0;
                                               border-bottom: 1px solid var(--color-border); }
.pfiles-list--kacheln .pfiles-list__icon { font-size: 42px; }
.pfiles-list--kacheln .pfiles-list__name { white-space: normal; overflow: hidden; padding: .45rem .6rem 0;
                                           font-weight: 600; line-height: 1.25;
                                           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ⚠ In der Kachel gelten die beiden Regeln der Listenansicht NICHT: 12rem Mindestbreite
   sprengten die 190px schmale Kachel, und rechtsbuendig steht hier nichts. */
.pfiles-list--kacheln .pfiles-list__kz,
.pfiles-list--kacheln .pfiles-list__wann { flex: 0 0 auto; white-space: normal; padding: 0 .6rem; text-align: left; }
.pfiles-list--kacheln .pfiles-list__name { min-width: 0; }
/* Die beiden Knoepfe legen sich in die Ecke des Vorschaubilds — mit hellem Grund,
   sonst verschwinden sie auf einem dunklen Foto. */
.pfiles-list--kacheln .pfiles-ablage,
.pfiles-list--kacheln .pfiles-list__del { position: absolute; top: .35rem; }
.pfiles-list--kacheln .pfiles-ablage   { right: 2.5rem; }
.pfiles-list--kacheln .pfiles-list__del { right: .4rem; }
.pfiles-list--kacheln .pfiles-ablage > summary,
.pfiles-list--kacheln .pfiles-list__del .kanban__card-iconbtn { background: rgba(255, 255, 255, .88);
                                                                border-radius: 6px; }
/* ⚠ In der Kachel taugt der inset-Schatten NICHT: er wird unter dem Vorschaubild
   gemalt und ist unsichtbar. Die Kachel bekommt darum einen roten Rahmen — das Wort
   „Vertraulich" steht ohnehin als Kennzeichen darin. */
.pfiles-list--kacheln .pfiles-list__row--vertraulich { box-shadow: none;
                                                       border-color: var(--color-error); }

/* Rueckmeldung nach dem Speichern im Hintergrund — kurz sichtbar, dann weg. */
.pfiles-gespeichert { display: inline-flex; align-items: center; gap: .2rem; color: var(--color-success);
                      font-size: var(--font-size-xs); font-weight: 600; }
.pfiles-gespeichert .material-symbols-outlined { font-size: 15px; }

/* [FILTER 14.09.2026] Leiste ueber der Dateiliste — drei Ausklapper, sofort wirksam. */
.pfiles-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
                 margin: .75rem 0 0; padding: .6rem .75rem;
                 background: var(--color-surface-soft); border: 1px solid var(--color-border);
                 border-radius: 8px; }
.pfiles-filter__feld { display: flex; flex-direction: column; gap: .15rem; }
.pfiles-filter__feld .form-select { min-width: 11rem; }
/* ⚠ align-self: die Leiste richtet ihre Felder unten aus (Beschriftung darueber) —
   die Zahl haette sonst keinen Bezug und klebte an der Unterkante. */
.pfiles-filter__stand { margin-left: auto; align-self: center; }
/* ⚠⚠ [hidden] MUSS hier ausdruecklich stehen. Die Regeln oben setzen display (flex,
   grid, inline-flex) — Autoren-CSS schlaegt die Browser-Voreinstellung von [hidden],
   und die ausgefilterten Zeilen blieben sichtbar. Genau so faellt ein Filter lautlos aus. */
.pfiles-list__row[hidden],
.pfiles-filter[hidden],
.pfiles-filter [hidden],
.pfiles-empty[hidden] { display: none !important; }

/* [SPALTEN 14.09.2026] Ordner und Art als eigene Spalten der Dateiliste.

   ⚠ Feste Breiten statt Tabelle: die Liste ist ein Flex-Behaelter, weil dieselben Zeilen
     in der Kachelansicht anders gesetzt werden. Eine echte <table> koennte das nicht.
   ⚠ Unter 900 px fallen beide Spalten weg — auf einem schmalen Fenster bliebe vom Namen
     sonst nichts uebrig. Ordner und Art stehen dort weiter im Filter zur Verfuegung. */
.pfiles-list__kopf { display: flex; align-items: center; gap: .6rem;
                     padding: .35rem .25rem .35rem .6rem; border-bottom: 2px solid var(--color-border);
                     text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.pfiles-list__kopf .pfiles-list__wann { text-align: right; }
.pfiles-list__kopf-aktionen { flex: 0 0 3.6rem; }
.pfiles-list__ordner { flex: 0 0 9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfiles-list__typ    { flex: 0 0 6rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfiles-list__leer   { opacity: .5; }
@media (max-width: 900px) {
  .pfiles-list:not(.pfiles-list--kacheln) .pfiles-list__ordner,
  .pfiles-list:not(.pfiles-list--kacheln) .pfiles-list__typ,
  .pfiles-list__kopf .pfiles-list__ordner,
  .pfiles-list__kopf .pfiles-list__typ { display: none; }
}

/* In der Kachel gibt es keine Spalten: Ordner und Art reihen sich unter den Namen,
   die Kopfzeile der Liste verschwindet ganz. */
.pfiles-list--kacheln .pfiles-list__kopf { display: none; }
.pfiles-list--kacheln .pfiles-list__ordner,
.pfiles-list--kacheln .pfiles-list__typ { flex: 0 0 auto; white-space: normal; padding: 0 .6rem; }

/* [ÜBERNEHMEN 14.09.2026] Auswahl „Dateien aus dem Projekt" — vier Spalten je 25 %.
   ⚠ Untereinander braucht ein Projekt mit zwei Dutzend Dateien mehr Bildschirm als der
     ganze Ordner darunter. Die Ordner-Ueberschrift laeuft ueber die volle Breite. */
/* ⚠ Ohne Rahmen (14.09.2026): die Auswahl steht schon in einer Karte — ein zweiter
   Kasten darin macht aus einer Liste ein Fenster im Fenster. */
.sf-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem .6rem;
           max-height: 22rem; overflow: auto; padding: .25rem 0; }
@media (max-width: 1200px) { .sf-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sf-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sf-pick { grid-template-columns: 1fr; } }
.sf-pick__gruppe { grid-column: 1 / -1; display: flex; align-items: center; gap: .25rem;
                   margin: .5rem 0 .1rem; font-weight: 600; }
.sf-pick__gruppe:first-child { margin-top: 0; }
.sf-pick__gruppe .material-symbols-outlined { font-size: 1rem; }
.sf-pick__eintrag { display: flex; align-items: center; gap: .45rem; min-width: 0;
                    padding: .25rem .35rem; border-radius: 6px; cursor: pointer; }
.sf-pick__eintrag:hover { background: var(--color-surface-soft); }
.sf-pick__haken { margin: 0; flex: 0 0 auto; }
.sf-pick__bild { position: relative; flex: 0 0 auto; width: 28px; height: 28px; overflow: hidden;
                 border-radius: 4px; background: var(--color-surface-soft);
                 display: flex; align-items: center; justify-content: center; }
.sf-pick__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-pick__icon { font-size: 18px; color: var(--color-text-secondary); }
.sf-pick__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sf-pick__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                 font-size: var(--font-size-sm); }
.sf-pick__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Ausgefilterte Eintraege und leere Ordner-Ueberschriften verschwinden — wieder mit
   !important, weil die Regeln oben display setzen (siehe Dateiliste). */
.sf-pick__eintrag[hidden], .sf-pick__gruppe[hidden] { display: none !important; }

/* [MEHRFACH-DUPLIZIEREN v234] Eine Zeile je Kopie: laufende Nummer, Ziel, Entfernen. */
.urkalk-dup__rows { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.urkalk-dup__row { display: flex; align-items: flex-end; gap: .5rem; }
.urkalk-dup__nr { flex: 0 0 1.4rem; padding-bottom: .45rem; color: var(--color-text-muted);
                  font-size: var(--font-size-sm); text-align: right; }
.urkalk-dup__feld { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.urkalk-dup__feld .form-select { width: 100%; }

/* [ALTERNATIVE PREIS v234] Preis und Unterschied im Verknuepfungs-Hinweis.
   ⚠ Farbe allein traegt die Aussage nicht — das Vorzeichen steht im Text (+/−). */
/* ⚠ Der Preis steht IMMER auf einer eigenen Zeile — order schiebt ihn hinter die
   Knoepfe, flex-basis:100% gibt ihm die volle Breite. So bleibt oben „Hinweis … Knoepfe"
   in einer Zeile, und die Zahlen draengen die Knoepfe nicht um.
   ⚠ Der Block darf umbrechen, die einzelnen Zahlen nicht (dafuer .nowrap im Markup). */
.urkalk-verkn__preis { order: 2; flex: 0 0 100%; font-size: var(--font-size-sm); }
.urkalk-verkn__preis--teurer { color: var(--color-error-text, #b91c1c); }
.urkalk-verkn__preis--guenstiger { color: var(--color-success, #15803d); }

/* [KALKULATIONS-GRUPPEN v235] Kennzeichen an der Zeile + Auswahl im Popup.
   ⚠ „weicht ab" bekommt Farbe UND Wort — die Farbe allein traegt die Aussage nicht. */
/* ⚠ Nur ein Symbol an der Zeile: der Zustand steckt in Farbe UND Sprechblase (title),
   alles Weitere im Popup dahinter. Ein beschrifteter Kasten war neben Text, Menge, Preisen
   und Verknuepfungs-Hinweisen zu viel. */
/* [STIL 15.09.2026] Wie die Arten-Symbole: nacktes Symbol statt gerahmtem Kasten — der
   Rahmen sah neben Text, Menge und Preisen nach einem weiteren Knopf aus, obwohl er nur
   einen Zustand zeigt. Farbe traegt die Aussage: blau = verknuepft, bernstein = weicht ab. */
.urkalk-kgruppe { display: inline-flex; align-items: center; justify-content: center;
                  vertical-align: middle; margin-right: .25rem; padding: 0;
                  background: none; border: 0; cursor: pointer;
                  color: var(--color-primary, #2563eb); }
.urkalk-kgruppe:hover { color: var(--color-primary-hover, #1d4ed8); }
.urkalk-kgruppe .material-symbols-outlined { font-size: 17px; }
.urkalk-kgruppe--abweichend { color: #b45309; }
.urkalk-kgruppe--abweichend:hover { color: #92400e; }
/* [SUCHE] Feld plus Trefferzahl in einer Zeile ueber der Auswahl. */
.urkalk-kg__suche { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.urkalk-kg__suche .form-input { flex: 1; }
.urkalk-kg__wahl { max-height: 16rem; overflow: auto; border: 1px solid var(--color-border);
                   border-radius: var(--radius-md); padding: .4rem; }
.urkalk-kg__zeile { display: grid; grid-template-columns: auto 4.5rem 1fr auto; align-items: center;
                    gap: .5rem; padding: .2rem .25rem; border-radius: 5px; cursor: pointer; }
.urkalk-kg__zeile:hover { background: var(--color-surface-soft); }

/* [FRAGEN v236] Verlauf einer Frage — wer gesprochen hat, sieht man an der Kante.
   ⚠ Die KI bekommt eine eigene Farbe UND ein Abzeichen: Farbe allein traegt die Aussage
   nicht, und hier haengt daran, ob jemand einen Satz fuer eine Auskunft des Steuerbueros
   haelt. */
.frage-beitrag { border: 1px solid var(--color-border); border-left-width: 3px; border-radius: 8px;
                 padding: .7rem .9rem; margin-bottom: .6rem; background: var(--color-surface); }
.frage-beitrag__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
                       font-size: var(--font-size-sm); margin-bottom: .35rem; }
.frage-beitrag--ki { border-left-color: #7c3aed; background: #f5f3ff; }
.frage-beitrag--extern { border-left-color: #0ea5e9; }
.frage-beitrag--antwort { border-left-color: #16a34a; }

/* [SUPPORT-VERLAUF v255] Verlauf eines Support-Tickets — gleiche Bauart wie der Fragen-Verlauf.
   ⚠ KI und Absender je mit Farbe UND Abzeichen: Farbe allein traegt die Aussage nicht. */
.support-nachricht { border: 1px solid var(--color-border); border-left-width: 3px; border-radius: 8px;
                     padding: .7rem .9rem; margin-bottom: .6rem; background: var(--color-surface); }
.support-nachricht__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
                           font-size: var(--font-size-sm); margin-bottom: .35rem; }
/* [28.09.2026] Kein pre-wrap mehr: RichText::display() liefert Editor-HTML bzw. Klartext mit <br> — pre-wrap dazu verdoppelte die Umbrüche. */
.support-nachricht__text { word-break: break-word; font-size: var(--font-size-sm); }
.support-nachricht__text p { margin: 0 0 .5em; }
.support-nachricht__text p:last-child { margin-bottom: 0; }
.support-nachricht__bilder { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.support-nachricht__bild { display: block; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden;
                           background: var(--color-bg-soft, #f8fafc); }
.support-nachricht__bild img { display: block; max-width: 160px; max-height: 120px; object-fit: cover; }
.support-nachricht--intern { border-left-color: #16a34a; }
.support-nachricht--ki { border-left-color: #7c3aed; background: #f5f3ff; }
.support-nachricht--absender { border-left-color: #0ea5e9; }
.support-antwort { margin-top: 1rem; position: relative; padding: .5rem; margin-left: -.5rem; margin-right: -.5rem;
                   border: 2px dashed transparent; border-radius: 12px; transition: border-color .15s, background .15s; }
/* [DRAG&DROP 24.09.2026] Ablage-Zustand beim Ziehen — gleiche Optik wie die Datei-Drop-Zonen (.sf-drop--over). */
.support-antwort--ablage { border-color: var(--color-primary, #2563eb); background: #eef4ff; }
.support-antwort__ablage { display: none; position: absolute; inset: 0; z-index: 1; align-items: center; justify-content: center;
                           gap: .5rem; border-radius: inherit; background: rgba(238, 244, 255, .88); color: var(--color-primary, #2563eb);
                           font-weight: 600; pointer-events: none; }
.support-antwort--ablage .support-antwort__ablage { display: flex; }
.support-antwort__meldung { margin-top: .4rem; font-size: var(--font-size-sm); color: var(--color-error-text, #b91c1c); }
.support-antwort__bilder { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.support-antwort__vorschau { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem;
                             border: 1px solid var(--color-border); border-radius: 6px; font-size: var(--font-size-xs, .75rem); }
.support-antwort__vorschau img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
/* [HILFE-SYSTEM v258] interne Notiz (nur Team) — gelb hinterlegt, damit sie nie wie eine Antwort aussieht */
.support-nachricht.support-nachricht--notiz { background: #fffbeb; border-color: #fde68a; }
.support-nachricht__mail { margin-left: .25rem; }
.support-antwort--notiz textarea { background: #fffbeb; }
[data-support-status-feld][hidden] { display: none; }
.support-modal__meine { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                        margin-bottom: 14px; padding: .5rem .75rem; border: 1px solid var(--color-border);
                        border-radius: 8px; text-decoration: none; }
.topbar-pill__zaehler { margin-left: .25rem; }
/* [SPRACHEINGABE 30.09.2026] Diktieren + Zusammenfassen unter der Ticket-Beschreibung — nebeneinander, vertikal mittig */
.support-modal__werkzeuge { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .25rem; }
.support-modal__werkzeug-status { flex: 1 1 12rem; min-width: 0; }
.support-modal__werkzeug--aktiv { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }
.support-modal__werkzeug--aktiv .material-symbols-outlined { animation: support-diktat-puls 1.2s ease-in-out infinite; }
@keyframes support-diktat-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* [SAMMELAKTION 15.09.2026] Mehrfachauswahl in der Urkalkulation ───────────
   Die Haken sitzen IN der POS-Spalte (eine siebte Spalte hätte alle colspans
   der Gruppen- und Summenzeilen anfassen müssen, table-layout ist fixed). */
/* ⚠⚠ Buendig links, unabhaengig von Gruppen-Tiefe und Zeilenart: die POS-Zelle rueckt mit
   `--ug-depth` ein, und Ueberschriften tragen davor noch den Einklapp-Knopf — im Fluss
   staende jeder Haken woanders. */
#urkalk-items .urkalk-pos-cell,
#urkalk-items .urkalk-heading__poscell { position: relative; }
.urkalk-pick {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  margin: 0; vertical-align: middle; cursor: pointer;
}
/* ⚠ Der Haken im Spaltenkopf muss mit denen in den Zeilen fluchten — die sitzen absolut
   bei 8px, der Kopf hat aber 20px Zellenpolster. Also auch ihn absolut setzen. */
#urkalk-items thead .urkalk-col-pos { position: relative; padding-left: 34px; }
.urkalk-pick-all {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  margin: 0; line-height: 0;
}
/* ⚠ display:flex übersteuert das [hidden]-Attribut — ohne diese Zeile stünde die
   Leiste dauerhaft da und meldete „0 ausgewählt". Dieselbe Falle wie bei .btn. */
.urkalk-picked[hidden] { display: none; }
.urkalk-picked {
  display: flex; align-items: center; gap: var(--space-2, .5rem); flex-wrap: wrap;
  padding: .5rem .75rem; margin: 0 0 var(--space-2, .5rem);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.urkalk-picked__count { font-weight: 700; font-size: var(--font-size-sm); margin-right: .25rem; }

/* [MATERIAL-LINK 15.09.2026] „Ihre Einreichungen" auf der Material-Partnerseite.
   ⚠ Oeffentliche Seiten laufen auf 16px — keine eigenen Schriftgroessen hier. */
.public-eingereicht { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.public-eingereicht__item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-success-bg); }
.public-eingereicht__item .material-symbols-outlined { color: var(--color-success); }
.public-eingereicht__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.public-eingereicht__meta { color: var(--color-text-muted); white-space: nowrap; }

/* [MATERIAL-LINK 16.09.2026] Grosse Ablage auf der Material-Partnerseite.
   ⚠⚠ Dreifache Hoehe der Standard-Ablage (48px → 144px, Wunsch Betreiber): sie ist auf
     dieser Seite die Hauptsache, nicht ein Feld unter vielen — und ein grosses Ziel trifft
     man beim Ziehen-und-Ablegen auch dann, wenn die Hand nicht ruhig ist.
   ⚠ Das Haus-JS fuer Ablagen laeuft hier nicht (das oeffentliche Layout laedt app.js
     bewusst nicht); die Zustaende is-dragover/is-filled setzt das Inline-Skript der
     Ansicht — die Klassennamen muessen also zusammenpassen. */
.dropzone--gross { height: 144px; flex-direction: column; justify-content: center; text-align: center; gap: var(--space-1); padding: var(--space-4); }
.dropzone--gross .dropzone__platzhalter { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.dropzone--gross .dropzone__symbol { font-size: 40px; color: var(--color-text-muted); }
.dropzone--gross .dropzone__wort { font-weight: 600; }
.dropzone--gross.is-dragover { border-color: var(--color-primary); background: var(--color-surface-soft); }
.dropzone--gross.is-filled { border-style: solid; border-color: var(--color-success); background: var(--color-success-bg); }
.dropzone__gewaehlt { font-weight: 600; overflow-wrap: anywhere; }
/* ⚠ Symbol IN der Ueberschrift — .card-header__title ist kein Flex-Container, nebeneinander
   gestellt bricht das Symbol in eine eigene Zeile um. */
.material-karte__titel { display: flex; align-items: center; gap: var(--space-2); }

/* [VORSCHAU 16.09.2026] Vorschaubild ÜBER dem Symbol — auch fuer PDF.
   ⚠⚠ Das Symbol bleibt im Markup stehen und liegt DAHINTER. Liefert der Vorschau-Endpunkt
     404 (kein poppler auf dem Server, kaputte Datei), verschwindet nur das <img> und der
     Partner sieht weiterhin sein Symbol — statt eines kaputten Bild-Platzhalters.
   ⚠ Gleiche Bauart wie die Projektdatei-Liste (.pfiles-list__vorschau). */
.public-attachment__vorschau { position: relative; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: var(--color-bg); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.public-attachment__vorschau .public-attachment__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-attachment-block .public-attachment__vorschau { width: 100%; height: 96px; }

/* [MAIL-ANHÄNGE v239] Verschickte Dateien in der Spalte „Anhänge" der gesendeten Mails.
   ⚠ Verlinkt wird nur, was noch auffindbar ist (Projektdateien); das erzeugte Anfrage-PDF
     und der Altbestand vor v239 bleiben reiner Text. */
.sent-att { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sent-att__item { display: flex; align-items: center; gap: .3rem; overflow-wrap: anywhere; }
.sent-att__icon { font-size: 1rem; color: var(--color-text-muted); flex: 0 0 auto; }
.sent-att__meta { color: var(--color-text-muted); white-space: nowrap; }

/* [MAIL-DETAIL 16.09.2026] Der Mailtext braucht Abstand zum Kartenrand.
   ⚠⚠ Der Abstand sitzt AN DER KARTE, nicht in der Mail: im Rahmen steht, was der
     Empfänger bekommen hat — dort Abstand hineinzuschreiben hieße, etwas anderes zu
     zeigen als verschickt wurde. Der Trennstrich kommt vom Kartenkopf, nicht vom Rahmen. */
.mail-detail__body { border-top: 1px solid var(--color-border); }

/* ── [MAIL-ANHÄNGE 16.09.2026] Anhänge der Mail-Detailansicht als Kacheln ──
   Dieselben Kacheln wie auf der Partner-Seite (App\Support\AnhangKachel), hier aber
   in einer Tabellenzeile: der 20px-Vorlauf der Partner-Seite säße mitten in der Zeile. */
.public-attachment-block--mail { margin-top: 0; }
/* ⚠⚠ Nicht mehr vorhandene Datei: gedämpft UND ohne Hover-Reaktion. Eine Kachel, die
   beim Überfahren aufleuchtet, verspricht einen Klick — hier gibt es keinen, weil die
   Datei weg ist. Der Name bleibt als Beleg stehen, was verschickt wurde.
   ⚠ Muss NACH `.public-attachment:hover` stehen (gleiche Spezifität, spätere Regel gewinnt). */
.public-attachment--weg { opacity: .65; cursor: default; }
.public-attachment--weg:hover { border-color: var(--color-border); background: #fff; }

/* ── [ANFRAGEART JE GRUPPE 16.09.2026] Nachunternehmer / Material je Gruppe ──
   Ein Schalter je Gruppe auf /gruppen (.group-card__art) und in „Bearbeiten" (.group-row__art),
   farblich nach Art, damit eine gemischte Anfrage auf einen Blick lesbar ist. Gesperrt (R3) =
   disabled mit Tooltip. Die Meldung „ist bereits für X vorgesehen" steht AN der Gruppe. */
.group-card__art,
.group-row__art {
  width: auto;
  min-width: 160px;
  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__art { margin-left: auto; }
.group-card__art--material,
.group-row__art--material { border-color: #7c3aed; color: #5b21b6; background: #f5f3ff; }
.group-card__art--nu,
.group-row__art--nu { border-color: var(--color-border-strong); }
/* Noch keine Art gewaehlt (neue Gruppe ohne „NU"/„MAT" im Namen): gelb, damit die Pflichtwahl auffaellt. */
.group-card__art--offen,
.group-row__art--offen { border-color: var(--color-warning); color: var(--color-warning-text); background: var(--color-warning-bg); }
.group-card__art:disabled,
.group-row__art:disabled { opacity: .7; cursor: not-allowed; }
.group-row__msg { margin: 0 var(--space-4) var(--space-2); }
.inquiry-group__art { font-weight: 600; margin-left: .35rem; }

/* ── [ANGEBOTS-WIZARD v242] Neues Angebot: Schritte, Kacheln, Quellen-Hinweise ─────────────────── */
.wz-step[hidden] { display: none !important; }
.wz-step__titel { margin: 0 0 var(--space-3); }
.wz-stepper .phase-step { cursor: pointer; font: inherit; font-size: var(--font-size-sm); }
/* [ABSTAENDE 18.09.2026] Die Schritte der Leiste klebten aneinander (phase-stepper: gap 0). */
.wz-stepper.phase-stepper { gap: .5rem .6rem; }
/* [STRUKTUR 18.09.2026] Bereiche je Schritt: Überschrift klein, Trennstrich zwischen Bereichen, Felder im 2-Spalten-Raster
   gleich breit; Einzelfelder spannen beide Spalten (form-field--voll), damit keine halbe Box allein steht. */
.wz-bereich { padding: var(--space-3) 0; }
.wz-bereich + .wz-bereich { border-top: 1px solid var(--color-border); }
.wz-bereich__titel { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.wz-step .form-row { margin-bottom: 0; align-items: start; }
.wz-step .form-row + .form-row { margin-top: var(--space-3); }
.wz-step .form-field { min-width: 0; }
.wz-step .form-field--voll { grid-column: 1 / -1; }
.wz-unterfeld { display: block; margin-top: var(--space-3); }
.wz-bereich--details { border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-3); }
/* Schritt Texte: Strich zwischen Anschreiben, Schlusstext und Platzhalter-Werten */
.wz-bausteine__abschnitt { margin: 0 0 var(--space-2); }
.wz-bausteine__abschnitt:not(:first-child) { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-3); }
.wz-platzhalter { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-3); }
.wz-stepper .phase-step:hover { border-color: #3b82f6; }
/* Offenes Pflichtfeld im Schritt: orange wie .is-fehlend, damit die Leiste dasselbe sagt wie das Feld. */
.phase-step--fehlt { background: #fff7ed; border-color: #fb923c; color: #9a3412; }
.phase-step--fehlt .phase-step__num { background: #fb923c; }
.wz-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.wz-kacheln--vier { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.wz-kachel { display: flex; flex-direction: column; gap: .35rem; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.wz-kachel:hover { border-color: #93c5fd; }
.wz-kachel--aktiv { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); background: #eff6ff; }
.wz-kachel--gesperrt { opacity: .55; cursor: not-allowed; }
.wz-kachel--klein { padding: var(--space-3); }
.wz-kachel input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-kachel__icon { font-size: 28px; color: #1e40af; }
.wz-kachel__titel { font-weight: 700; font-size: var(--font-size-base); }
.wz-kachel__text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.wz-radios { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .35rem 0; }
.wz-radios.is-fehlend { outline: 2px solid #fb923c; outline-offset: 4px; border-radius: 6px; background: #fff7ed; }
.wz-radio { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.wz-anzeige { padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-gray-100); min-height: 2.4rem; }
.wz-anzeige.is-fehlend { border-color: #fb923c; background: #fff7ed; }
.wz-quelle { display: inline-flex; align-items: center; gap: .25rem; margin-top: .3rem; margin-right: .75rem; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.wz-quelle .material-symbols-outlined { font-size: 14px; }
.wz-quelle--hinweis { color: #9a3412; }
.wz-quelle-block { margin-top: var(--space-2); }
/* ── [KOPIER-ASSISTENT 22.09.2026] Drei Stufen untereinander: Projekt → Angebot → was mitkommt ───── */
.wz-kopie { display: flex; flex-direction: column; gap: var(--space-3); }
.wz-kopie__stufe { display: flex; flex-direction: column; gap: .35rem; padding-left: var(--space-3); border-left: 3px solid var(--color-border); }
.wz-kopie__stufe.is-fehlend { border-left-color: #fb923c; background: #fff7ed; border-radius: 0 6px 6px 0; }
.wz-kopie__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wz-kopie__zeile .form-input { flex: 1 1 18rem; min-width: 0; }
.wz-kopie__liste { display: flex; flex-direction: column; gap: .2rem; max-height: 18rem; overflow: auto; padding: .3rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.wz-kopie__liste[hidden] { display: none !important; } /* display:flex hebelt [hidden] sonst aus */
.wz-kopie__projekt { display: block; width: 100%; text-align: left; padding: .35rem .5rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; font-size: var(--font-size-sm); }
.wz-kopie__projekt:hover { border-color: #93c5fd; background: #eff6ff; }
.wz-kopie__haken { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .65rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.wz-kopie__haken:has(input:checked) { border-color: #93c5fd; background: #f8fbff; }
.wz-kopie__haken:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.wz-kopie__haken input[type="checkbox"] { margin-top: .25rem; }
.wz-kopie__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wz-kopie__titel { font-weight: 600; }
.wz-kopie__text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.wz-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.wz-nav__mitte { margin-left: auto; margin-right: auto; }
.wz-summary { display: grid; grid-template-columns: 1fr; gap: .25rem; margin-bottom: var(--space-3); }
.wz-summary__zeile { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-3); padding: .35rem .5rem; border-bottom: 1px dashed var(--color-border); }
.wz-summary__k { color: var(--color-text-muted); }
.wz-summary__v { font-weight: 500; }
.wz-fehlt__liste { margin: .25rem 0 0 1rem; padding: 0; }
.wz-fehlt, .wz-hinweise { align-items: flex-start; }

/* ── [STANDARDTEXTE v243] Textbausteine: Verwendungs-Chips, Regel-Haken ───────────────────────── */
.tb-chip { margin-right: .25rem; margin-bottom: .2rem; }
.tb-checks { display: flex; flex-wrap: wrap; gap: .25rem .9rem; padding: .25rem 0; }
.tb-check { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--font-size-sm); cursor: pointer; }

/* ── [v275 TEXTVORLAGEN 30.09.2026] Wizard-Schritt „Wofür": Vorlagen als Auswahl-Kacheln (ersetzt die Hakenliste) ── */
.wz-bausteine__abschnitt { margin: var(--space-3) 0 .35rem; }
.wz-vorlage { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: .4rem; cursor: pointer; background: var(--color-surface); }
.wz-vorlage--aktiv, .wz-vorlage:has(input:checked) { border-color: #93c5fd; background: #f8fbff; }
.wz-vorlage input[type="radio"] { margin-top: .25rem; }
.wz-vorlage__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wz-vorlage__titel { font-weight: 600; }
.wz-vorlage__text, .wz-vorlage__teile { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.wz-vorlage__teile { color: var(--color-text); }

/* ── [30.09.2026] Angebots-Wizard „stylisch" (Alexander): Schrittleiste als Kreise mit Linie, Kacheln mit Symbol im Farbkreis
   und Haken, Bereiche als hellgraue Flächen, Vorlagen wie Kacheln, Zusammenfassung als Raster, Knopfleiste bleibt unten stehen.
   Nur Aussehen — die Abläufe (Blättern, Prüfung, Zwischenstand) sind unverändert. */
.wz-stepper.phase-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: .5rem 0 1.25rem; margin-bottom: var(--space-4);
                            background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.wz-stepper .phase-step { position: relative; flex-direction: column; justify-content: flex-start; gap: .45rem; padding: 0 .25rem; background: none; border: 0;
                          border-radius: 0; color: var(--color-text-muted); font-weight: 600; }
.wz-stepper .phase-step::before { content: ''; position: absolute; top: 1.1rem; left: calc(-50% + 1.5rem); right: calc(50% + 1.5rem); height: 2px; background: #e2e8f0; }
.wz-stepper .phase-step:first-child::before { display: none; }
.wz-stepper .phase-step:hover { border: 0; color: var(--color-primary); }
.wz-stepper .phase-step__num { width: 2.25rem; height: 2.25rem; border: 2px solid #cbd5e1; background: var(--color-surface); color: var(--color-text-muted); font-size: .9rem;
                               transition: background .15s, border-color .15s, box-shadow .15s; }
.wz-stepper .phase-step:hover .phase-step__num { border-color: var(--color-primary); }
.wz-stepper .phase-step__icon { display: none; }
.wz-stepper__label { font-size: var(--font-size-sm); line-height: 1.2; text-align: center; }
.wz-stepper .phase-step--done { background: none; color: var(--color-text); }
.wz-stepper .phase-step--done::before { background: #86efac; }
.wz-stepper .phase-step--done .phase-step__num { background: var(--color-success); border-color: var(--color-success); color: #fff; font-size: 0; }
.wz-stepper .phase-step--done .phase-step__num::after { content: '✓'; font-size: 1rem; }
.wz-stepper .phase-step--current { background: none; color: var(--color-primary); font-weight: 700; }
.wz-stepper .phase-step--current::before { background: #86efac; }
.wz-stepper .phase-step--current .phase-step__num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-size: .9rem;
                                                    box-shadow: 0 0 0 4px var(--color-primary-light); }
.wz-stepper .phase-step--current .phase-step__num::after { content: none; }
.wz-stepper .phase-step--fehlt { background: none; color: #9a3412; }
.wz-stepper .phase-step--fehlt .phase-step__num { background: #fff7ed; border-color: #fb923c; color: #9a3412; font-size: .9rem; }
.wz-stepper .phase-step--fehlt .phase-step__num::after { content: none; }
.wz-stepper .phase-step--fehlt.phase-step--current .phase-step__num { background: #fb923c; color: #fff; box-shadow: 0 0 0 4px #ffedd5; }
@media (max-width: 760px) { .wz-stepper .phase-step:not(.phase-step--current) .wz-stepper__label { display: none; } }

.wz-step__titel { margin: 0 0 var(--space-4); font-size: 1.3rem; font-weight: 700; }
.wz-kacheln { gap: var(--space-4); }
.wz-kacheln.is-fehlend { outline: 2px solid #fb923c; outline-offset: 6px; border-radius: 12px; }
.wz-kachel { position: relative; gap: .5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 12px;
             box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.wz-kachel:hover { border-color: #93c5fd; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.wz-kachel--aktiv { border-color: var(--color-primary); background: #f5fafd; box-shadow: 0 0 0 1px var(--color-primary), 0 6px 18px rgba(3, 112, 176, .12); }
.wz-kachel--aktiv::after { content: '✓'; position: absolute; top: .8rem; right: .8rem; display: flex; align-items: center; justify-content: center;
                           width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .85rem; font-weight: 700; }
.wz-kachel--gesperrt:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.wz-kachel__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
                   background: var(--color-primary-light); color: var(--color-primary); font-size: 24px; }
.wz-kachel--aktiv .wz-kachel__icon { background: var(--color-primary); color: #fff; }
.wz-kachel__titel { font-size: 1.05rem; }

.wz-bereich { padding: var(--space-4) var(--space-5); background: var(--color-bg-subtle, #f9fafb); border: 1px solid #edf1f5; border-radius: 12px; }
.wz-bereich + .wz-bereich { border-top: 1px solid #edf1f5; margin-top: var(--space-3); }
.wz-bereich__titel { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--space-3); color: var(--color-primary); }
.wz-bereich__titel::before { content: ''; width: 3px; height: .9rem; border-radius: 2px; background: var(--color-primary); }
.wz-bereich--details { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid #edf1f5; }
.wz-bereich[hidden] { display: none; }
.wz-anzeige { background: var(--color-surface); border-color: #e2e8f0; border-radius: 8px; }
.wz-step .form-field > .form-label { display: block; }   /* „Bindung" stand sonst in einer Zeile mit dem Haken */

.wz-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.wz-vorlage { position: relative; margin: 0; padding: .9rem 1rem; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s, box-shadow .15s; }
.wz-vorlage:hover { border-color: #93c5fd; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.wz-vorlage--aktiv, .wz-vorlage:has(input:checked) { border-color: var(--color-primary); background: #f5fafd; box-shadow: 0 0 0 1px var(--color-primary); }
.wz-vorlage input[type="radio"] { accent-color: var(--color-primary); }

.wz-gaeb-tabelle .wz-gaeb-tabelle__wahl { width: 2.75rem; padding-left: 1rem; padding-right: .25rem; }
.wz-gaeb-tabelle .wz-gaeb-tabelle__wahl input { margin: 0; accent-color: var(--color-primary); }

.wz-summary { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.wz-summary__zeile { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border: 1px solid #edf1f5; border-radius: 10px; background: var(--color-bg-subtle, #f9fafb); }
.wz-summary__k { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wz-summary__v { font-weight: 600; overflow-wrap: anywhere; }

.wz-nav { position: sticky; bottom: 0; z-index: 5; margin-top: var(--space-5); padding: .75rem 0; background: var(--color-surface);
          box-shadow: 0 -8px 12px -10px rgba(15, 23, 42, .18); }

/* ── [KOMMENTAR 17.09.2026] Interner Kommentar in der Kalkulation (Position + Kalkulation) — nur Anzeige ── */
.urkalk-kommentar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .3rem .5rem; margin-top: .4rem; padding: .35rem .6rem; border-radius: .45rem; background: var(--color-warning-bg, #fffbeb); border: 1px dashed #fde68a; font-size: var(--font-size-sm); color: var(--color-warning-text, #92400e); }
.urkalk-kommentar[hidden] { display: none; }
.urkalk-kommentar--kalk { margin-top: .5rem; max-width: 60rem; }
.urkalk-kommentar__icon { font-size: 16px; line-height: 1.2; }
.urkalk-kommentar__badge { font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; }
.urkalk-kommentar__text { flex: 1 1 100%; white-space: pre-line; cursor: text; }
.urkalk-kommentar__text[hidden], .urkalk-kommentar__edit[hidden] { display: none; }
.urkalk-kommentar__edit { flex: 1 1 100%; }
.urkalk-kommentar__edit .form-input { width: 100%; font-size: var(--font-size-sm); }
.urkalk-kommentar__actions { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }

/* [POS-SPERRE 18.09.2026] Schloss neben der geschuetzten Positionsnummer */
.urkalk-pos-lock { font-size: 14px; vertical-align: -2px; color: var(--color-text-muted, #6b7280); margin-left: .15rem; }
#urkalk-edit-pos:read-only, #urkalk-rh-pos:read-only { background: var(--color-gray-100, #f3f4f6); color: var(--color-text-muted, #6b7280); cursor: not-allowed; }

/* [DATENRAUM 18.09.2026] Häkchen-Spalte links in der Dateitabelle + Zähler am Knopf „Markierte löschen" */
.sf-select-cell { width: 36px; text-align: center; }
.sf-select-cell input { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.sf-bulk-count { font-variant-numeric: tabular-nums; }


/* [v264 PRODUKT-ANFRAGEN] Entscheidungsblock auf der Anfrage-Seite */
.produkt-block__grund { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border, #cbd2dc); background: var(--color-bg-soft, #f8fafc); border-radius: var(--radius-sm, 4px); font-size: .9rem; }
.produkt-block__form { margin-top: var(--space-3); }
.task-dropzone--gesperrt .task-card { cursor: pointer; }

/* [Support 28.09., Lars] Preisanfrage: Suche + Ansicht-Umschalter haften oben — Detail, Kompakt und Gruppen.
   Eigene Karte als Kind von .content (dem Scroll-Container), sonst endete das Haften mit der Kopf-Karte. */
.inquiry-kopfleiste { position: sticky; top: calc(-1 * var(--space-4)); z-index: 20; }
.inquiry-kopfleiste .inquiry-filter-bar { border-top: 0; }
.inquiry-kopfleiste .inquiry-view-toggle { margin-bottom: 0; padding-bottom: var(--space-2); }
@media (max-width: 768px) {   /* dort hat .content nur --space-3 Innenabstand */
  .inquiry-kopfleiste { top: calc(-1 * var(--space-3)); }
}

/* [28.09.2026 Geräte V-1–V-4] Einsatz-Dialog: geltendes Angebot als eine Zeile, Kosten sofort, „Mehr Einstellungen" */
.einsatz-preis { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.einsatz-preis__icon { color: var(--color-text-muted); font-size: 1.2rem; }
.einsatz-preis__text { flex: 1 1 auto; font-weight: 600; }
.einsatz-vorschau { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-2); overflow: hidden; }
.einsatz-vorschau .table { margin: 0; }
.einsatz-vorschau__warn { margin: 0; padding: 0 var(--space-3) var(--space-2) calc(var(--space-3) + 1rem); color: var(--color-warning-text, #92400e); font-size: var(--font-size-sm); }
.einsatz-vorschau__warn:empty { display: none; }
.einsatz-mehr { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.einsatz-mehr__summary { cursor: pointer; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-2); }
/* [28.09.2026 Geräte V-6] abgelaufene Mietangebote zugeklappt */
.geraet-alte { margin-top: var(--space-3); }
.geraet-alte__summary { cursor: pointer; color: var(--color-text-muted); font-weight: 600; padding: var(--space-2) 0; }

/* [BAUSTELLEN-NAVI 29.09.2026] Kopf der Baustellen-Detailseite: Beschriftung links, Wert rechts, Zeilen vertikal mittig. */
.bs-kopf { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-2) var(--space-4); margin: 0; align-items: center; }
.bs-kopf dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bs-kopf dd { margin: 0; }
.bs-kopf__anschrift { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; }
.bs-kopf__anschrift > span:first-child { margin-right: .35rem; }
.bs-kopf__notiz { align-self: start; white-space: normal; }
@media (max-width: 640px) { .bs-kopf { grid-template-columns: 1fr; } .bs-kopf dt { margin-top: var(--space-2); } }

/* ── [BAUSTELLEN-FELDER 29.09.2026] Datenerhebung: Info-Knopf, Unterlagen, Paket wechseln, Feldwahl ───────────── */
.ca-hilfe { display: inline-flex; align-items: center; gap: var(--space-2); }
.ca-hilfe__knopf {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; padding: 0;
  border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary);
  font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.ca-hilfe__knopf:hover, .ca-hilfe__knopf[aria-expanded="true"] { background: var(--color-primary); color: #fff; }
/* Erklärung hängt an ihrer Frage: offene Frage ohne Trennlinie, Kasten bündig mit dem Fragetext. */
.ca-table__zeile--hilfe-offen > td { border-bottom-color: transparent; }
.ca-hilfe__zeile > td { padding: 0; }
.ca-hilfe__text {
  margin: 0; padding: var(--space-3) var(--space-5);   /* Text bündig mit der Frage (Zellenabstand 20 px) */
  background: var(--color-primary-light);
  font-size: var(--font-size-base); line-height: 1.55; font-weight: 400; color: var(--color-text);
}
.ca-hilfe__erklaerung { margin: 0 0 var(--space-2); }
.ca-hilfe__titel { font-weight: 600; margin-top: var(--space-2); }
.ca-hilfe__liste { margin: var(--space-1) 0 0; padding-left: 1.25rem; }
.ca-hilfe__liste li { margin: 2px 0; }
@media (max-width: 720px) {
  .ca-table tbody tr.ca-table__zeile--hilfe-offen { border-bottom: none; padding-bottom: var(--space-2); }
  .ca-table tbody tr.ca-hilfe__zeile { padding: 0; }
  .ca-hilfe__text { padding: var(--space-3) var(--space-4); }
}
.ca-unterlagen__kopf { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.ca-unterlagen__kacheln { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); }
.ca-unterlagen__kachel { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ca-unterlagen__kachel .ca-thumb { width: 120px; height: 120px; }
.ca-unterlagen__kachel .ca-thumb > a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.ca-unterlagen__symbol { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-text-muted); }
.ca-unterlagen__endung { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .03em; }
.ca-unterlagen__name { width: 100%; font-size: var(--font-size-sm); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.ca-unterlagen__groesse { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ca-paket { display: flex; flex-direction: column; gap: var(--space-3); }
.ca-paket__form { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ca-paket__select { max-width: 22rem; }
.ca-feldwahl { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.ca-feldwahl__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 2px 0; }
.ca-def-hilfe { flex: 1 0 100%; }
.ca-def-hilfe textarea { margin-bottom: var(--space-2); }
.ca-def-row--inaktiv { opacity: .6; }
.bs-bereich th { background: var(--color-bg); font-size: var(--font-size-sm); }
.bs-umzug__liste { margin: 0 0 var(--space-2); padding-left: 1.2rem; }
.bs-umzug__form { max-width: 28rem; }

/* [BAUSTELLE 30.09.2026] Adresse der Baustelle: Straße|Nr. und PLZ|Ort|Land je eine Zeile, Vorschläge unter der Straße;
   Karte mit Fahrzeit rechts (Neu-Formular und Detailseite). */
.bs-adresse__zeile { display: grid; gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.bs-adresse__zeile > .form-group { margin-bottom: 0; }   /* sonst hat nur das letzte Feld keinen Abstand → Versatz */
.bs-adresse__zeile--strasse { grid-template-columns: minmax(0, 1fr) 6rem; }
.bs-adresse__zeile--ort { grid-template-columns: 6.5rem minmax(8rem, 1fr) minmax(9rem, 12rem); }
.bs-adresse { container-type: inline-size; }
/* Schmale Spalte (z. B. Detailseite 50 / 50): Land in eine eigene Zeile, sonst wird „Deutschland" abgeschnitten. */
@container (max-width: 30rem) {
  .bs-adresse__zeile--ort { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .bs-adresse__zeile--ort > :last-child { grid-column: 1 / -1; }
}
.bs-adresse__suche { position: relative; }
.bs-adresse__name { display: flex; align-items: center; gap: .35rem; }
.bs-adresse__name > .form-input { flex: 1 1 auto; min-width: 0; }
.bs-adresse__komplett { margin-bottom: var(--space-3); }
.bs-adresse__komplett-feld { resize: none; overflow: hidden; min-height: 2.5rem; line-height: 1.4; }
.bs-adresse__trenner { border: 0; border-top: 1px solid var(--color-border); margin: 0 0 var(--space-4); }
.bs-adresse__vorschlaege { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: .25rem 0;
                           list-style: none; background: var(--color-surface, #fff); border: 1px solid var(--color-border);
                           border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 18rem; overflow-y: auto; }
.bs-adresse__vorschlag { padding: .45rem .75rem; cursor: pointer; font-size: var(--font-size-sm); line-height: 1.35; }
.bs-adresse__vorschlag:hover, .bs-adresse__vorschlag--aktiv { background: #eef5fb; }
.bs-adresse__vorschlag-gruppe { padding: .35rem .75rem .15rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; cursor: default; }   /* [KUNDE 30.09.2026] Überschrift „Vorhandene Baustellen" / „Adressvorschläge" */
/* Formular und Karte nebeneinander, sobald beide Platz haben — sonst die Karte darunter. */
.bs-neu { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.bs-neu > .card:first-child { flex: 3 1 34rem; min-width: 0; }
.bs-neu > .bs-karte { flex: 2 1 20rem; min-width: 0; }
/* [30.09.2026] Detailseite 50 / 50, mehr Abstand zur Karte (Alexander). */
.bs-kopf-raster { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; }
.bs-kopf-raster__links { flex: 1 1 24rem; min-width: 0; }
.bs-kopf-raster > .bs-karte { flex: 1 1 24rem; min-width: 0; }
.bs-karte { overflow: hidden; }
/* [30.09.2026] Detailseite: ohne Rahmen — Titel, Karte und Fahrzeit bündig links. */
.bs-karte--offen { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.bs-karte--offen > .card-header, .bs-karte--offen > .card-body { padding-left: 0; padding-right: 0; background: transparent; border: 0; }
.bs-karte--offen > .card-header { padding-top: 0; }
.bs-karte--offen .bs-karte__rahmen { border-radius: 8px; overflow: hidden; }
.bs-bearbeiten { margin-top: var(--space-5); }
.bs-karte__titel { display: flex; align-items: center; gap: .4rem; margin: 0; }
.bs-karte__rahmen { position: relative; aspect-ratio: 4 / 3; background: #f3f4f6; }
.bs-karte__karte { position: absolute; inset: 0; }
.bs-karte__leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem;
                  padding: 1rem; text-align: center; flex-wrap: wrap; }
.bs-karte__leer[hidden], .bs-karte__karte[hidden] { display: none; }
.bs-karte__punkt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }   /* display:flex überstimmt sonst hidden */
.bs-karte__fahrt { display: flex; align-items: center; gap: .6rem; }
.bs-karte__fahrt > .material-symbols-outlined { color: var(--color-primary, #0370B0); }
.bs-karte__fahrt-wert { font-weight: 600; }
@media (max-width: 700px) {
  .bs-adresse__zeile--ort { grid-template-columns: 6rem minmax(0, 1fr); }
  .bs-adresse__zeile--ort > :last-child { grid-column: 1 / -1; }
}

/* [v268 30.09.2026] Projektliste: Umschalter Liste ⇄ Karte, Karte der gefilterten Projekte */
.projekt-ansicht { display: inline-flex; align-items: center; gap: 0; }
.projekt-ansicht > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.projekt-ansicht > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.projekt-karte { display: flex; flex-direction: column; gap: .5rem; }
.projekt-karte__flaeche { height: calc(min(70vh, 44rem) + 100px); min-height: calc(22rem + 100px);   /* +100 px (Alexander 30.09.) */ border-radius: 8px; overflow: hidden; background: #f3f4f6; }
.projekt-karte__leer { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 12rem; text-align: center; }
.projekt-karte__info { display: flex; flex-direction: column; gap: .5rem; max-width: 18rem; max-height: 16rem; overflow-y: auto; }
.projekt-karte__eintrag { display: flex; flex-direction: column; gap: .1rem; }
.projekt-regen__icon { font-size: 16px; vertical-align: middle; color: #0370B0; margin-left: .2rem; }
.projekt-karte__regen { color: #0370B0; font-weight: 600; }
.projekt-karte__umkreis { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.projekt-karte__umkreis > .form-label { margin: 0; }
.projekt-karte__umkreis-feld { width: 6rem; }

/* [01.10.2026, Prüfbericht B83] Legende unter der Projektkarte — Zeichen wie auf der Karte (projekt-karte.js). */
.projekt-karte__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; }
.projekt-karte__legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }
.projekt-karte__zeichen { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.projekt-karte__zeichen--pin { width: 12px; height: 12px; background: #EA4335; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.projekt-karte__zeichen--gruppe { width: 18px; height: 18px; border-radius: 50%; background: #EA4335; border: 2px solid #fff; box-shadow: 0 0 0 1px #EA4335; color: #fff; font-size: 10px; font-weight: 700; }
.projekt-karte__zeichen--sitz { width: 12px; height: 12px; border-radius: 50%; background: #0370B0; border: 2px solid #fff; box-shadow: 0 0 0 1px #0370B0; }
.projekt-karte__zeichen--umkreis { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #EA4335; background: rgba(234, 67, 53, .06); }

/* [01.10.2026, Prüfbericht B27] Handy (375 px): Konditionen und zweispaltige Formularzeilen sprengten die Karte
   („Projekt bearbeiten" rechts abgeschnitten). Raster dürfen schrumpfen, unter 480 px einspaltig. */
.terms-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.terms-grid > * { min-width: 0; }
@media (max-width: 1100px) { .terms-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  /* !important: viele Zeilen setzen ihre Spalten per style="grid-template-columns:…" (Projektformular: vier Spalten). */
  .form-row { grid-template-columns: minmax(0, 1fr) !important; }
  .form-row > * { grid-column: auto !important; min-width: 0; max-width: none !important; }
}

/* ── [ENTWURF 01.10.2026] Gruppenbuilder der Urkalkulation (layout/gruppenbuilder.html) ───────────────────────── */
.gb [hidden] { display: none !important; }   /* .alert/.gb__* setzen display — [hidden] muss gewinnen */
.gb__kopfknoepfe { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.gb__raster { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-auto-rows: max-content; align-content: start; gap: var(--space-5); align-items: start; }   /* max-content: der Baum (overflow-x) darf nicht auf 0 schrumpfen */
@media (max-width: 1200px) { .gb__raster { grid-template-columns: minmax(0, 1fr); } }
.gb__baum-rahmen { min-width: 0; overflow-x: auto; }
.gb__spalten, .gb__zeile { display: grid; grid-template-columns: 18px 22px 52px minmax(140px, 1fr) 56px 96px auto; align-items: center; gap: var(--space-2); min-width: 520px; }
.gb__spalten { padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); }
.gb__spalten > span:first-child { grid-column: 3; }
.gb__spalten > span:nth-child(2) { grid-column: 4; }
.gb__rechts { text-align: right; }
.gb__baum { list-style: none; margin: 0; padding: 0; min-height: 2.5rem; }
.gb__baum--kinder { padding-left: 28px; border-left: 1px dashed var(--color-border); margin-left: 21px; }
.gb__zeile { padding: 6px var(--space-2); border-radius: var(--radius-sm, 6px); border: 1px solid transparent; cursor: grab; background: var(--color-surface, #fff); position: relative; }
.gb__zeile:hover { background: var(--color-surface-soft, #f9fafb); }
.gb__zeile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.gb__knoten--markiert > .gb__zeile { border-color: var(--color-primary); background: #eff6ff; }
.gb__zeile--zieht { opacity: .45; }
.gb__zeile--in { border-color: var(--color-primary); background: #eff6ff; box-shadow: inset 0 0 0 2px rgba(3, 112, 176, .25); }
.gb__zeile--vor::before, .gb__zeile--nach::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--color-primary); border-radius: 2px; }
.gb__zeile--vor::before { top: -2px; }
.gb__zeile--nach::after { bottom: -2px; }
.gb__griff { color: var(--color-text-muted); font-size: 18px; }
.gb__auf { border: 0; background: none; padding: 0; cursor: pointer; color: var(--color-text-muted); display: inline-flex; }
.gb__auf--leer { visibility: hidden; }
.gb__nr { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.gb__nr--neu { color: var(--color-primary); font-weight: 700; }
.gb__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb__knoten--ebene1 > .gb__zeile .gb__name { font-weight: 700; }
.gb__knoten--ebene3 > .gb__zeile .gb__name, .gb__knoten--ebene4 > .gb__zeile .gb__name { font-weight: 500; }
.gb__eingabe { width: 100%; }
.gb__aktionen { display: inline-flex; justify-content: flex-end; gap: 2px; opacity: .25; transition: opacity .15s; }
.gb__zeile:hover .gb__aktionen, .gb__zeile:focus-within .gb__aktionen, .gb__knoten--markiert > .gb__zeile .gb__aktionen { opacity: 1; }
.gb__knopf .material-symbols-outlined { font-size: 18px; }
.gb__leerhinweis { padding: var(--space-4); text-align: center; }
.gb__vorschlaege { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 1201px) { .gb__vorschlaege { position: sticky; top: var(--space-4); } }   /* nur nebeneinander — sonst läge die Liste über dem Baum */
.gb__vorschlaege-kopf { display: flex; align-items: center; justify-content: space-between; }
.gb__vorschlaege-kopf .heading-4 { margin: 0; }
.gb__vorschlagsliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; }
.gb__vorschlag { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius-sm, 6px); cursor: grab; font-size: var(--font-size-sm); }
.gb__vorschlag:hover, .gb__vorschlag:focus-visible { background: #eff6ff; outline: none; }
.gb__vorschlag .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted); }
.gb__vorschlag--benutzt { color: var(--color-text-muted); }
.gb__vorschlag--frei { border-top: 1px dashed var(--color-border); margin-top: var(--space-1); color: var(--color-primary); font-weight: 600; }
.gb__vorschlag--frei .material-symbols-outlined { color: var(--color-primary); }
.gb__benutzt { margin-left: auto; }
.gb__fuss { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface-soft, #f9fafb); }
.gb__aenderungen { flex: 1 1 auto; color: var(--color-text-muted); }
.gb__aenderungen--warnung { color: var(--color-warning, #d97706); font-weight: 600; }
.gb__tabelle td, .gb__tabelle th { white-space: nowrap; }
.gb__fenster { width: 100%; max-width: none; height: calc(100vh - 2 * var(--space-4)); height: calc(100dvh - 2 * var(--space-4)); max-height: none; display: flex; flex-direction: column; }   /* Vollbild (Ansage Alexander) */
.gb.bl-modal { padding: var(--space-4); }
@media (max-width: 600px) { .gb.bl-modal { padding: 0; } .gb__fenster { height: 100vh; height: 100dvh; border-radius: 0; } }
.gb__fenster > .bl-modal__body { overflow: auto; flex: 1 1 auto; }
.gb__fenster > .alert--leiste { margin: 0; }
.gb__vorschau { max-height: 30vh; overflow: auto; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.gb__linkknopf { background: none; border: 0; padding: 0; cursor: pointer; }
.gb__listeknoepfe { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }

/* [01.10.2026] Kurztext mit Knopf „als Überschrift in die Beschreibung" (Urkalkulation, Position anlegen/bearbeiten) */
.urkalk-kurztext { display: flex; align-items: center; gap: var(--space-2); }
.urkalk-kurztext > .form-input { flex: 1 1 auto; min-width: 0; }

/* ═════ [STRUKTUR 01.10.2026] Dritte Ansicht der Urkalkulation „Struktur" ═══════════════════════════════════════════
   Ansage Alexander, Entwurf layout/kalkulation-struktur.html. Dieselbe Tabelle wie Detail/Kompakt (alle Knöpfe und
   Skripte bleiben), nur anders gelegt: jede Zeile ist ein Raster, die GANZE Zeile rückt je Gruppenebene ein (wie im
   Gruppenbuilder), links laufen gestrichelte Striche je Ebene; Spalten rechts (Arten · Menge · EP/GP · Kalk.) bleiben
   bündig, weil nur die Bezeichnung schmaler wird. Keine Hintergrundfarben. Texte des Angebots oben/unten,
   rechts Summe + Vorlagen (klebt unter der Filter-Leiste). ⚠ Filter blendet per style.display aus → Zeilen bekommen
   display:grid NUR über die Klasse; eingeklappt (.urkalk-collapsed) schlägt mit !important. */
.urkalk-ansicht { display: inline-flex; align-self: stretch; }
.urkalk-ansicht__knopf { height: auto; border-radius: 0; margin-left: -1px; }
.urkalk-ansicht__knopf:first-child { margin-left: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.urkalk-ansicht__knopf:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.urkalk-ansicht__knopf--an { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); position: relative; z-index: 1; }

.urkalk-struktur--an {
  --us-einzug: 26px;   /* eine Gruppenebene */
  --us-linie: 16px;    /* Strich unter dem linken Rand (Haken) der Eltern-Zeile — wie im Gruppenbuilder unter dem Griff */
  --us-strich: var(--color-border, #d1d5db);
  --us-spalten: 132px minmax(120px, 1fr) 76px 112px 196px 64px;   /* Pos · Bezeichnung · Arten · Menge · EP/GP · Kalk. */
  display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-4); align-items: start;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.urkalk-struktur__haupt { min-width: 0; }
.urkalk-struktur__seite[hidden] { display: none; }
.urkalk-struktur__seite {
  position: sticky; top: calc(var(--items-filter-h, 52px) + var(--space-3)); z-index: 2;
  display: flex; flex-direction: column; gap: var(--space-3);
  height: calc(100dvh - var(--items-filter-h, 52px) - 96px); overflow: hidden;
}
@media (max-width: 1200px) {
  .urkalk-struktur--an { grid-template-columns: minmax(0, 1fr); }
  .urkalk-struktur__seite { position: static; height: auto; }
  .urkalk-struktur__vorlagen { max-height: 420px; }
}
/* ⚠ Die Karte schneidet sonst mit overflow:hidden ab — das hebt das Kleben der rechten Spalte auf; clip schneidet gleich, ist aber kein Scroll-Container. */
.urkalk-seite--struktur .urkalk-items-card { overflow: clip; }

/* Texte: die Angebots-Karten ohne Rahmen direkt im Fluss — Vortext über, Schlusstext unter den Positionen. */
.urkalk-struktur__slot--oben:not(:empty) { margin-bottom: var(--space-6, 24px); }
.urkalk-struktur__slot--unten:not(:empty) { margin-top: 56px; }
.urkalk-struktur__slot > .card { margin: 0 !important; border: 0; box-shadow: none; background: transparent; overflow: visible; }
.urkalk-struktur__slot > .card > .card-body { padding: 0 var(--space-2); }
.urkalk-struktur__slot > #anschreiben > .card-header { display: none; }
.urkalk-struktur__slot > #schlusstext > .card-header { border: 0; padding: 0 var(--space-2); min-height: 0; justify-content: flex-end; }
.urkalk-struktur__slot > #schlusstext > .card-header .card-header__title { display: none; }
.urkalk-struktur__slot .qtb__pick, .urkalk-struktur__slot [data-qtb-add-pick] { display: none; }

/* Tabelle als Baum */
#urkalk-items.is-struktur { display: block; table-layout: auto; }
#urkalk-items.is-struktur > thead, #urkalk-items.is-struktur > tbody { display: block; }
#urkalk-items.is-struktur tr {
  display: grid; grid-template-columns: var(--us-spalten); column-gap: 6px; align-items: center;
  padding: 0 6px 0 calc(6px + var(--ug-depth, 0) * var(--us-einzug));
  background-repeat: no-repeat;
  background-image: linear-gradient(var(--us-farbe-jetzt, var(--us-farbe, transparent)), var(--us-farbe-jetzt, var(--us-farbe, transparent))); background-position: calc(2px + var(--ug-depth, 0) * var(--us-einzug)) 0; background-size: 100% 100%;
}
#urkalk-items.is-struktur tr.urkalk-collapsed { display: none !important; }
#urkalk-items.is-struktur tr > td, #urkalk-items.is-struktur tr > th {
  display: block; grid-row: 1; min-width: 0; padding: 6px 0; border: 0; background: none;
}
/* Zellen-Reihenfolge: Pos · Bezeichnung · Arten · Menge · EP/GP · Kalk. (die Menge steht rechts — sonst wanderte sie mit der Einrückung) */
#urkalk-items.is-struktur tr > :nth-child(1) { grid-column: 1; }
#urkalk-items.is-struktur tr > :nth-child(2) { grid-column: 4; text-align: right; }
#urkalk-items.is-struktur tr > :nth-child(3) { grid-column: 2; }
#urkalk-items.is-struktur tr > :nth-child(4) { grid-column: 3; text-align: center; }
#urkalk-items.is-struktur tr > :nth-child(5) { grid-column: 5; }
#urkalk-items.is-struktur tr > :nth-child(6) { grid-column: 6; }
#urkalk-items.is-struktur tr.urkalk-row-heading > :nth-child(2),
#urkalk-items.is-struktur tr.urkalk-row-groupsum > :nth-child(2) { grid-column: 2 / 5; text-align: left; }
#urkalk-items.is-struktur tr.urkalk-row-heading > :nth-child(3),
#urkalk-items.is-struktur tr.urkalk-row-groupsum > :nth-child(3) { display: none; }
#urkalk-items.is-struktur tr.urkalk-row-heading > :nth-child(4) { grid-column: 5 / 7; text-align: right; }
#urkalk-items.is-struktur tr.urkalk-row-groupsum > :nth-child(4) { grid-column: 5; text-align: right; }
#urkalk-items.is-struktur tr.urkalk-row-groupsum > :nth-child(5) { grid-column: 6; }
#urkalk-items.is-struktur thead tr { padding-left: 6px; border-bottom: 1px solid var(--color-border); }
#urkalk-items.is-struktur thead th { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); font-weight: 600; padding-top: 4px; padding-bottom: 6px; }
#urkalk-items.is-struktur thead .urkalk-col-pos { padding-left: 24px; }
#urkalk-items.is-struktur thead th { width: auto !important; }   /* die festen Spaltenbreiten der Tabelle gelten hier nicht — das Raster legt sie fest */
#urkalk-items.is-struktur .urkalk-pos-cell, #urkalk-items.is-struktur .urkalk-heading__poscell { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#urkalk-items.is-struktur thead .urkalk-col-price { text-align: right; }
#urkalk-items.is-struktur tbody tr:not(.urkalk-row-heading):not(.urkalk-row-groupsum) { border-bottom: 1px solid var(--color-border-light, #f1f5f9); }
/* Hintergrundfarben wie live, aber als EINE Fläche je Zeile ab der Einrückung (unterste Hintergrund-Lage der Zeile, die
   Striche liegen darüber) — die Striche links bleiben frei. ⚠ Kein ::after mit isolation: das machte jede Zeile zur eigenen
   Ebene, und die „…"-Menüs (position:fixed in der Zeile) lägen unter der nächsten Zeile.
   Schalter „Farben" (is-farblos) = in dieser Ansicht ganz ohne Farbe (auch Gruppen-Grau), Ansage 01.10. */
#urkalk-items.is-struktur tr.urkalk-row-heading { --us-farbe: var(--color-surface-alt, #f1f5f9); }
#urkalk-items.is-struktur tr.urkalk-row-heading[style*="--ug-depth:1"] { --us-farbe: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 55%, #fff); }
#urkalk-items.is-struktur tr.urkalk-row-heading[style*="--ug-depth:2"],
#urkalk-items.is-struktur tr.urkalk-row-heading[style*="--ug-depth:3"] { --us-farbe: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 30%, #fff); }
#urkalk-items.is-struktur tr.urkalk-row-groupsum { --us-farbe: color-mix(in srgb, var(--color-surface-alt, #f1f5f9) 45%, #fff); }
#urkalk-items.is-struktur tr.urkalk-row-calc-done { --us-farbe: rgba(22, 163, 74, .06); }
#urkalk-items.is-struktur tr.urkalk-row-calc-done.urkalk-row-calc-fremd { --us-farbe: rgba(37, 99, 235, .07); }
#urkalk-items.is-struktur tr.urkalk-row-last-edited { --us-farbe: rgba(250, 204, 21, .18); }
#urkalk-items.is-struktur.is-farblos tbody tr { --us-farbe: transparent !important; }   /* ⚠ !important: „Fremd" (drei Klassen) war spezifischer und blieb blau */
#urkalk-items.is-struktur tbody tr:hover { --us-farbe-jetzt: color-mix(in srgb, var(--color-primary-light) 70%, transparent); }
/* Einrückung: die Zelle selbst rückt NICHT mehr ein (das macht die Zeile); Platz für den Haken links. */
#urkalk-items.is-struktur .urkalk-indent,
#urkalk-items.is-struktur .urkalk-row-groupsum > td:nth-child(2) { padding-left: 0; }
#urkalk-items.is-struktur .urkalk-pos-cell, #urkalk-items.is-struktur .urkalk-heading__poscell { padding-left: 24px; }
#urkalk-items.is-struktur .urkalk-pick { left: 4px; }
/* Striche je Ebene (eine Ebene = ein Strich, je unter dem Aufklapp-Pfeil der Eltern-Gruppe) */
#urkalk-items.is-struktur tr[style*="--ug-depth:1"] { background-image: repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), linear-gradient(var(--us-farbe-jetzt, var(--us-farbe, transparent)), var(--us-farbe-jetzt, var(--us-farbe, transparent))); background-position: var(--us-linie) 0, calc(2px + var(--ug-depth, 0) * var(--us-einzug)) 0; background-size: 1px 100%, 100% 100%; }
#urkalk-items.is-struktur tr[style*="--ug-depth:2"] { background-image: repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), linear-gradient(var(--us-farbe-jetzt, var(--us-farbe, transparent)), var(--us-farbe-jetzt, var(--us-farbe, transparent))); background-position: var(--us-linie) 0, calc(var(--us-linie) + var(--us-einzug)) 0, calc(2px + var(--ug-depth, 0) * var(--us-einzug)) 0; background-size: 1px 100%, 1px 100%, 100% 100%; }
#urkalk-items.is-struktur tr[style*="--ug-depth:3"] { background-image: repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), linear-gradient(var(--us-farbe-jetzt, var(--us-farbe, transparent)), var(--us-farbe-jetzt, var(--us-farbe, transparent))); background-position: var(--us-linie) 0, calc(var(--us-linie) + var(--us-einzug)) 0, calc(var(--us-linie) + 2 * var(--us-einzug)) 0, calc(2px + var(--ug-depth, 0) * var(--us-einzug)) 0; background-size: 1px 100%, 1px 100%, 1px 100%, 100% 100%; }
#urkalk-items.is-struktur tr[style*="--ug-depth:4"] { background-image: repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), linear-gradient(var(--us-farbe-jetzt, var(--us-farbe, transparent)), var(--us-farbe-jetzt, var(--us-farbe, transparent))); background-position: var(--us-linie) 0, calc(var(--us-linie) + var(--us-einzug)) 0, calc(var(--us-linie) + 2 * var(--us-einzug)) 0, calc(var(--us-linie) + 3 * var(--us-einzug)) 0, calc(2px + var(--ug-depth, 0) * var(--us-einzug)) 0; background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%, 100% 100%; }
#urkalk-items.is-struktur tr[style*="--ug-depth:5"] { background-image: repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), repeating-linear-gradient(var(--us-strich) 0 4px, transparent 4px 7px), linear-gradient(var(--us-farbe-jetzt, var(--us-farbe, transparent)), var(--us-farbe-jetzt, var(--us-farbe, transparent))); background-position: var(--us-linie) 0, calc(var(--us-linie) + var(--us-einzug)) 0, calc(var(--us-linie) + 2 * var(--us-einzug)) 0, calc(var(--us-linie) + 3 * var(--us-einzug)) 0, calc(var(--us-linie) + 4 * var(--us-einzug)) 0, calc(2px + var(--ug-depth, 0) * var(--us-einzug)) 0; background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%, 100% 100%; }
/* Gruppen: Ordner-Symbol, Name eine Stufe kleiner, Aktionen erst beim Überfahren kräftig */
#urkalk-items.is-struktur .urkalk-row-heading > td { font-weight: 700; }
#urkalk-items.is-struktur .urkalk-row-heading > td:nth-child(2) { font-size: calc(1em - 1px); display: flex; align-items: center; gap: 6px; }
#urkalk-items.is-struktur .urkalk-row-heading > td:nth-child(2) > .material-symbols-outlined { font-size: 20px !important; color: var(--color-primary); }
/* Gruppen-Symbole (Aufklappen, Neue Position, Bearbeiten, Untergruppe, Löschen, Schloss) größer — Ansage 01.10. */
#urkalk-items.is-struktur .urkalk-row-heading .btn--icon { padding: .2rem .3rem; }
#urkalk-items.is-struktur .urkalk-row-heading .btn--icon .material-symbols-outlined { font-size: 22px; }
#urkalk-items.is-struktur .urkalk-row-heading .urkalk-grp-akt { opacity: .55; }
#urkalk-items.is-struktur .urkalk-row-heading:hover .urkalk-grp-akt, #urkalk-items.is-struktur .urkalk-row-heading:focus-within .urkalk-grp-akt { opacity: 1; }
/* Gruppensumme wie live, ohne Hintergrund und ohne Strich, Text rechtsbündig bis an den Betrag */
#urkalk-items.is-struktur .urkalk-row-groupsum > td:nth-child(2) { text-align: right; font-size: var(--font-size-sm); }
#urkalk-items.is-struktur .urkalk-row-groupsum > td:nth-child(4) { font-size: var(--font-size-sm); }
#urkalk-items.is-struktur .urkalk-row-groupsum .material-symbols-outlined { font-size: 16px; }
/* Positionen: Kurztext eine Stufe kleiner, Langtext immer EINE Zeile mit „…" (Klick in die Spalte = ganz, wie kompakt) */
#urkalk-items.is-struktur [data-sum-view] { font-size: calc(1em - 1px); }
#urkalk-items.is-struktur .urkalk-desc { display: block; margin-top: 1px !important; color: var(--color-text-muted); }
/* „+300 Z" am Zeilenende: so viele Zeichen des Langtexts sind nicht zu sehen (Ansage 01.10.) — das Skript setzt es nur,
   wenn der Text abgeschnitten ist; Klick in die Spalte zeigt ihn ganz. */
#urkalk-items.is-struktur tr:not(.is-desc-open) .urkalk-desc:has(> .urkalk-desc__rest) { position: relative; padding-right: 4.2em; }
.urkalk-desc__rest { display: none; }
#urkalk-items.is-struktur tr:not(.is-desc-open) .urkalk-desc__rest {
  display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--font-size-xs, 12px); font-weight: 600; color: var(--color-primary); background: var(--color-primary-light);
  border-radius: 999px; padding: 0 .4em; line-height: 1.5; white-space: nowrap;
}
/* ⚠ Einzeilig über white-space statt line-clamp: lange Texte bringen eine eigene 6-Zeilen-Klemme (.urkalk-desc__short) mit, die gewann.
   Alles innen wird inline (Absätze, Listen), Zeilenumbrüche fallen weg; [hidden] (Langfassung) bleibt unberührt. */
#urkalk-items.is-struktur tr:not(.is-desc-open) .urkalk-desc,
#urkalk-items.is-struktur tr.urkalk-row-text:not(.is-desc-open) .urkalk-text__zelle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#urkalk-items.is-struktur tr:not(.is-desc-open) .urkalk-desc *:not([hidden]):not(br):not(.urkalk-desc__toggle):not(.urkalk-desc__toggle *):not(.urkalk-desc__rest),
#urkalk-items.is-struktur tr.urkalk-row-text:not(.is-desc-open) .urkalk-text__zelle *:not([hidden]):not(br):not(.urkalk-kommentar):not(.urkalk-kommentar *) { display: inline !important; white-space: nowrap !important; margin: 0 .25em 0 0; padding: 0; -webkit-line-clamp: unset; }
#urkalk-items.is-struktur tr:not(.is-desc-open) .urkalk-desc br,
#urkalk-items.is-struktur tr.urkalk-row-text:not(.is-desc-open) .urkalk-text__zelle br { display: none !important; }
#urkalk-items.is-struktur .urkalk-desc__toggle, #urkalk-items.is-struktur .urkalk-desc-expand { display: none !important; }
/* EP/GP schmaler; Kalk.-Knopf nur als Symbol (grün = kalkuliert) */
#urkalk-items.is-struktur .urkalk-price .urkalk-price__total { width: 86px; }
#urkalk-items.is-struktur .urkalk-price .urkalk-price__total--grand { width: 104px; margin-left: 6px; }
#urkalk-items.is-struktur .urkalk-actions__stack { flex-direction: row; align-items: center; justify-content: flex-end; gap: 2px; }
#urkalk-items.is-struktur .urkalk-actions__stack > .js-urkalk-calc,
#urkalk-items.is-struktur .urkalk-actions__stack > .js-urkalk-edit { font-size: 0; gap: 0; padding-inline: .35rem; }
#urkalk-items.is-struktur .urkalk-actions__stack > .js-urkalk-calc .material-symbols-outlined,
#urkalk-items.is-struktur .urkalk-actions__stack > .js-urkalk-edit .material-symbols-outlined { font-size: 18px; }
.urkalk-struktur--an:has(#urkalk-items.is-lv-locked) { --us-spalten: 132px minmax(120px, 1fr) 76px 112px 196px 98px; }
/* Textpositionen: einzeilig wie der Langtext (Regel oben), Klick = ganz. */

/* Rechte Spalte */
.urkalk-struktur__box { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); }
.urkalk-struktur__boxtitel { margin: 0; }
/* [01.10.] Summe rechts entfernt (Ansage) — die Vorlagen nehmen die ganze Höhe der klebenden Spalte. */
.urkalk-struktur__box--vorlagen { flex: 1 1 auto; min-height: 0; }
.urkalk-struktur__vorlagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; }
.urkalk-struktur__vkopf { padding: var(--space-2) var(--space-2) 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.urkalk-struktur__vorlage { display: flex; align-items: center; gap: 6px; padding: 5px var(--space-2); border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: var(--font-size-sm); min-width: 0; }
.urkalk-struktur__vorlage:hover, .urkalk-struktur__vorlage:focus-visible { background: var(--color-primary-light); outline: none; }
.urkalk-struktur__vicon { font-size: 18px; color: var(--color-primary); flex: none; }
.urkalk-struktur__vname { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.urkalk-struktur__vorlage--da .urkalk-struktur__vname { color: var(--color-text-muted); }
.urkalk-struktur__da { font-size: 18px; color: var(--color-success); flex: none; vertical-align: middle; }
.urkalk-struktur__hinweis { margin: 0; }
.urkalk-struktur__hinweis .urkalk-struktur__da { font-size: 15px; }
/* [STRUKTUR] Ziehen: Gruppen am Kopf greifen, Ablage-Stelle als blaue Linie (davor/danach) bzw. Rahmen (hinein). */
#urkalk-items.is-struktur tr.urkalk-row-heading.is-ziehbar { cursor: grab; }
#urkalk-items.is-struktur tr.urkalk-row-heading.is-sorting { opacity: .45; }
#urkalk-items.is-struktur tr.is-drop-vor { box-shadow: inset 0 3px 0 var(--color-primary); }
#urkalk-items.is-struktur tr.is-drop-nach { box-shadow: inset 0 -3px 0 var(--color-primary); }
#urkalk-items.is-struktur tr.is-drop-in { box-shadow: inset 0 0 0 2px var(--color-primary); }
.urkalk-struktur__slot .qtb__entry.is-drop-vor { box-shadow: 0 -3px 0 var(--color-primary); }
.urkalk-struktur__slot .qtb__entry.is-drop-nach { box-shadow: 0 3px 0 var(--color-primary); }
.urkalk-struktur__slot .qtb__add.is-drop-in { box-shadow: inset 0 0 0 2px var(--color-primary); border-radius: var(--radius-md); }
.urkalk-struktur__vorlage[draggable="true"] { cursor: grab; }
/* [STRUKTUR] Vor-/Schlusstext eine Stufe kleiner als die Positionen (Ansage 01.10.). */
.urkalk-struktur__slot .qtb__view, .urkalk-struktur__slot .qtb__anrede, .urkalk-struktur__slot .qtb__anrede .form-select { font-size: var(--font-size-sm); }
.urkalk-struktur__slot .qtb__view p { margin-top: 0; margin-bottom: .35em; }

/* ═════ [01.10.2026] „Geräte verständlich" (Ansage Alexander, Entwurf layout/geraete-verstaendlich.html) ═════════════
   Ablauf in drei Schritten auf jeder Geräte-Seite, Stand-Spalte mit Handlungsknopf, Auswahlkarten für die Art,
   Seiten mit Hilfe-Kasten rechts, Probe „So rechnet die Kalkulation". ⚠ Sichtbarkeit je Art per style (data-geraet-nur),
   .card/.form-row setzen display und überstimmen [hidden]. */
.geraete-ablauf { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 900px) { .geraete-ablauf { grid-template-columns: minmax(0, 1fr); } }
.geraete-ablauf__schritt { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); opacity: .72; }
.geraete-ablauf__schritt--jetzt { opacity: 1; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(3, 112, 176, .12); }
.geraete-ablauf__nr { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.geraete-ablauf__inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geraete-ablauf__wer { font-size: var(--font-size-xs, 12px); color: var(--color-primary); font-weight: 600; margin-top: 2px; }

.geraete-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.geraete-chips__knopf { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: var(--font-size-sm); height: 32px; }
.geraete-chips__knopf b { margin-left: 3px; }
.geraete-chips__knopf--an { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.geraete-chips__knopf--warn b { color: #b45309; }
.geraete-liste td { vertical-align: middle; }
.geraete-liste__fuss { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); }
.geraete-liste__fuss .material-symbols-outlined { font-size: 16px; color: #d97706; }
.geraete-art { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); }
.geraete-art--eigen { color: #7c3aed; }
.geraete-art .material-symbols-outlined { font-size: 18px; }
.geraete-stand { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.geraete-stand__text { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: 600; }
.geraete-stand__text .material-symbols-outlined { font-size: 18px; }
.geraete-stand__text--ok { color: var(--color-success); }
.geraete-stand__text--warn { color: #b45309; }
.geraete-stand__text--fehlt { color: var(--color-error, #dc2626); }

.geraete-artwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
@media (max-width: 600px) { .geraete-artwahl { grid-template-columns: minmax(0, 1fr); } }
.geraete-artwahl__karte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.geraete-artwahl__karte input { position: absolute; opacity: 0; pointer-events: none; }
.geraete-artwahl__karte .material-symbols-outlined { font-size: 26px; color: var(--color-text-muted); }
.geraete-artwahl__karte--an { border-color: var(--color-primary); background: var(--color-primary-light); }
.geraete-artwahl__karte--an .material-symbols-outlined { color: var(--color-primary); }
.geraete-artwahl__karte:focus-within { box-shadow: 0 0 0 3px rgba(3, 112, 176, .2); }

.geraete-seite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .geraete-seite { grid-template-columns: minmax(0, 1fr); } }
.geraete-seite__haupt { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.geraete-seite__haupt > form { display: flex; flex-direction: column; gap: var(--space-4); }
.geraete-teil { display: flex; align-items: center; font-size: var(--font-size-md, 15px); font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.geraete-teil:first-child { margin-top: 0; }
.geraete-teil__nr { flex: none; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.geraete-aktionen { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.geraete-aktionen--links { justify-content: flex-start; }
.geraete-absatz { margin: 0 0 var(--space-2); }
.geraete-beispiel { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); background: #f0fdf4; border-radius: var(--radius-md); }
.geraete-mehr { margin: var(--space-2) 0; }
.geraete-mehr > summary { cursor: pointer; color: var(--color-primary); font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.geraete-link-icon { font-size: 18px; vertical-align: -4px; margin-right: 4px; }
.geraete-einsaetze { margin: 0 0 var(--space-2); padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.geraete-einheit { display: flex; align-items: center; gap: 6px; }
.geraete-einheit > em { font-style: normal; color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.geraete-hilfe { position: sticky; top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid #fde68a; border-radius: var(--radius-md); background: #fffbeb; }
.geraete-hilfe__titel { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); font-size: var(--font-size-md, 15px); }
.geraete-hilfe__titel .material-symbols-outlined { color: #d97706; }
.geraete-hilfe ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.geraete-hilfe--probe { border-color: #bfdbfe; background: #f8fbff; }
.geraete-hilfe--probe .geraete-hilfe__titel .material-symbols-outlined { color: var(--color-primary); }
.geraete-probe__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.geraete-probe__felder .form-group { margin: 0; }
.geraete-probe__warn { margin: var(--space-2) 0 0; padding-left: 1.1em; color: #b45309; }
.geraete-rechnung { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-2); margin: var(--space-2) 0 0; font-size: var(--font-size-sm); }
.geraete-rechnung dt { min-width: 0; }
.geraete-rechnung dt > span { display: block; }
.geraete-rechnung dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.geraete-rechnung__summe { font-weight: 700; border-top: 1px solid var(--color-border); padding-top: 4px; }
.pm-nk-zeile__bsp { flex: 1 0 100%; order: 99; }
.urkalk-einsatz__betrag { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-primary); font-weight: 600; }
.geraete-nk-zahl { border-bottom: 1px dotted var(--color-text-muted); cursor: help; white-space: nowrap; }
/* In der Geräte-Seite (Hauptspalte neben dem Probe-Kasten) etwas enger, damit eine Zeile eine Zeile bleibt. */
.geraete-seite .pm-nk-zeile__bez { flex: 1 1 9rem; min-width: 8rem; }
.geraete-seite .pm-nk-zeile__art { flex: 0 1 13rem; min-width: 10rem; }
.geraete-seite .pm-nk-zeile__feld .form-input { width: 5.5rem; }

/* ═══ [FORMULARE 02.10.2026] Formular-Baukasten: Vorlagen, Editor, Ausfüllen (Entwurf layout/formular-baukasten.html) ═══ */
.formular-knoepfe { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.formular-inline { display: inline-flex; margin: 0; }
.formular-inline-icon { font-size: 16px; vertical-align: -3px; }
.formular-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.formular-leer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); }
.formular-leer > .material-symbols-outlined { font-size: 44px; color: var(--color-primary); }
.formular-leer-text { margin: var(--space-2) 0; }
.formular-tabelle td { vertical-align: middle; }
.formular-tabelle__name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.formular-tabelle__name .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }
.formular-tabelle__zahl { text-align: right; }
.formular-tabelle__mono { font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
.formular-tabelle__aktionen { white-space: nowrap; text-align: right; }
.formular-tabelle__aus { opacity: .55; }
.formular-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.formular-start form { margin: 0; }
.formular-start__karte { width: 100%; height: 100%; display: flex; gap: var(--space-2); align-items: flex-start; text-align: left; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; font: inherit; }
.formular-start__karte:hover { border-color: var(--color-primary); background: var(--color-primary-light, #e0f2fe); }
.formular-start__karte > .material-symbols-outlined { color: var(--color-primary); }
.formular-start__karte small { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Editor */
/* ⚠ [02.10.2026] .card hat overflow:hidden — das hebt position:sticky der Spalten auf (Einstellungen rechts scrollten weg).
   clip schneidet weiter an den runden Ecken ab, ist aber kein Scroll-Container: die Spalten kleben am Inhalt (main.content). */
.formular-editor-karte { overflow: clip; }
.formular-editor { display: grid; grid-template-columns: 240px minmax(0, 1fr) 330px; gap: var(--space-4); padding: var(--space-4); align-items: start; }
.formular-editor__palette, .formular-editor__seite { position: sticky; top: var(--space-4); max-height: calc(100vh - 110px); overflow: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.formular-editor__blatt { background: var(--color-bg-subtle, #f1f5f9); border-radius: var(--radius-lg); padding: var(--space-4); min-height: 420px; }
.formular-pal__gruppe { display: flex; flex-direction: column; gap: 4px; }
.formular-pal__titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: var(--space-2) 0 2px; }
.formular-pal__el { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--font-size-sm); cursor: grab; user-select: none; }
.formular-pal__el .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }
.formular-pal__el:hover, .formular-pal__el:focus-visible { border-color: var(--color-primary); background: var(--color-primary-light, #e0f2fe); outline: none; }
.formular-pal__plus { margin-left: auto; opacity: 0; }
.formular-pal__el:hover .formular-pal__plus { opacity: 1; }
.formular-pal__el--aus { cursor: not-allowed; opacity: .5; border-style: dashed; }
.formular-pal__el--aus .material-symbols-outlined { color: var(--color-text-muted); }
.formular-blatt { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; }
.formular-blatt__leer { text-align: center; margin: var(--space-6) 0; }
.formular-blatt__ende { max-width: 760px; margin: var(--space-3) auto 0; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); display: flex; align-items: center; justify-content: center; gap: 6px; }
.formular-blatt__ende--an { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light, #e0f2fe); }
.formular-el { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; position: relative; }
.formular-el:hover { border-color: var(--color-border-strong); }
.formular-el--an { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(3, 112, 176, .14); }
.formular-el:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }   /* [Review F53] Tastatur */
.formular-el:focus-visible .formular-el__weg { opacity: 1; }
.formular-el--text { background: #fffbeb; }
.formular-el--umbruch { border-style: dashed; background: transparent; }
.formular-el--zieht { opacity: .4; }
.formular-el--vor::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 3px; border-radius: 2px; background: var(--color-primary); }
.formular-el--neu { animation: formular-neu 1.2s ease-out; }
@keyframes formular-neu { from { background: var(--color-primary-light, #e0f2fe); } to { background: var(--color-surface); } }
.formular-el__griff { color: var(--color-text-muted); cursor: grab; font-size: 20px; }
.formular-el__icon { color: var(--color-primary); font-size: 20px; }
.formular-el__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.formular-el__text b { font-weight: 600; font-size: var(--font-size-md); }
.formular-el__text small { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.formular-el__art { color: var(--color-text-muted); background: var(--color-bg-subtle, #f1f5f9); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.formular-el__weg { opacity: 0; }
.formular-el:hover .formular-el__weg, .formular-el--an .formular-el__weg { opacity: 1; }
.formular-tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.formular-tabs__knopf { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px; font-size: var(--font-size-sm); cursor: pointer; color: var(--color-text-muted); }
.formular-tabs__knopf--an { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.formular-tabs__inhalt { display: flex; flex-direction: column; gap: var(--space-3); }
.formular-tabs__inhalt[hidden] { display: none; }
.formular-tabs__inhalt .form-group { margin: 0; }
.formular-feld__kopf { display: flex; align-items: center; gap: 8px; color: var(--color-primary); }
.formular-schalter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--color-border-light, #eef2f7); }
.formular-schalter > span:first-child { display: flex; flex-direction: column; font-size: var(--font-size-sm); }
.formular-schalter small { color: var(--color-text-muted); }
.formular-schalter--fest > .material-symbols-outlined { color: var(--color-success); }
.formular-haken { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-sm); }
.formular-haken label { display: flex; align-items: center; gap: 6px; }
.formular-spalten { display: flex; flex-direction: column; gap: 6px; }
.formular-spalten__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 118px auto; gap: 4px; align-items: center; }
.formular-spalten__formel { grid-column: 1 / -1; }
.formular-spaeter { display: flex; gap: 8px; align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-subtle, #f1f5f9); color: var(--color-text-muted); }

/* Projekt-Liste */
.formular-neu { position: relative; }
.formular-neu__menue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 300px; padding: 4px; display: flex; flex-direction: column; }
.formular-neu__menue[hidden] { display: none; }
.formular-neu__menue form { margin: 0; }
.formular-neu__menue button { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; white-space: nowrap; }
.formular-neu__menue button:hover { background: var(--color-surface-hover, #f1f5f9); }
.formular-neu__menue .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }
.formular-stand { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; vertical-align: middle; }
.formular-stand .material-symbols-outlined { font-size: 15px; }
.formular-stand--entwurf { background: #f1f5f9; color: #475569; }
.formular-stand--wartet { background: #fef3c7; color: #92400e; }
.formular-stand--fertig { background: #dcfce7; color: #166534; }
.formular-stand--abgelaufen { background: #fee2e2; color: #991b1b; }
.formular-stand--frage { background: #ffedd5; color: #9a3412; margin-left: 4px; }
.formular-legende { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.formular-legende > span { display: inline-flex; align-items: center; gap: 6px; }

/* Ausfüllen */
.formular-fuellen { max-width: 1000px; }
.formular-fuellen__form { display: flex; flex-direction: column; gap: var(--space-4); }
.formular-fuellen__form .form-group { margin: 0; }
.formular-fuellen__ueberschrift { margin: var(--space-2) 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.formular-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); padding: var(--space-3); background: var(--color-bg-subtle, #f1f5f9); border-radius: var(--radius-md); position: relative; }
.formular-kopf > div { display: flex; flex-direction: column; min-width: 0; }
.formular-kopf small { color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.formular-kopf b { font-weight: 600; }
.formular-kopf__hinweis { position: absolute; right: 10px; top: 6px; display: inline-flex; align-items: center; gap: 2px; }
.formular-kopf__hinweis .material-symbols-outlined { font-size: 14px; }
.formular-erklaer { margin: 0; padding: var(--space-2) var(--space-3); background: #fffbeb; border-radius: var(--radius-md); }
.formular-umbruch { display: flex; align-items: center; gap: var(--space-2); }
.formular-umbruch::before, .formular-umbruch::after { content: ''; flex: 1; border-top: 1px dashed var(--color-border-strong); }
.formular-ankreuzen { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--space-4); }
.formular-ankreuzen legend { width: 100%; }
.formular-wetter { display: flex; align-items: center; gap: 8px; }
.formular-wetter > .material-symbols-outlined { color: #f59e0b; }
.formular-wetter .form-input { flex: 1; }
/* [Review F04/F22] /formulare: Blättern + Projektsuche im Dialog */
.formular-blaettern { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.formular-projektsuche { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); max-height: 240px; overflow-y: auto; background: var(--color-surface, #fff); }
.formular-projektsuche > button { text-align: left; padding: 8px 12px; border: 0; background: none; cursor: pointer; font: inherit; }
.formular-projektsuche > button:hover, .formular-projektsuche > button:focus { background: var(--color-bg-subtle, #f3f4f6); }
.formular-projektsuche > span { padding: 8px 12px; }
.formular-projektsuche[hidden] { display: none; }
/* [02.10.2026] Standort-Feld: Adresse, Knöpfe, Punkt-Zeile */
.formular-standort { border: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.formular-standort legend { padding: 0; }
.formular-standort__zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.formular-standort__punkt { font-variant-numeric: tabular-nums; line-height: 1.5; }
.formular-standort__punkt > .material-symbols-outlined { color: var(--color-primary, #2563eb); font-size: 18px; vertical-align: -4px; margin-right: 4px; }
.formular-standort__warnung { color: #b45309; }
.formular-ergebnis { display: block; font-size: var(--font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.formular-ftab td { vertical-align: middle; }
.formular-ftab__zeit { min-width: 92px; }
.formular-ftab__zahl { max-width: 90px; text-align: right; }
.formular-ftab output { font-weight: 600; font-variant-numeric: tabular-nums; }
.formular-ftab__summe { float: right; font-size: var(--font-size-sm); }
.formular-dateien { display: flex; flex-direction: column; gap: var(--space-2); }
.formular-dateien__liste { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.formular-dateien__eintrag { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.formular-dateien__eintrag img { width: 132px; height: 96px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.formular-dateien__eintrag .btn { position: absolute; top: 2px; right: 2px; background: rgba(255, 255, 255, .9); }
.formular-dateien__neu { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-muted); }
.formular-dateien__neu:focus-within { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.formular-dateien__datei { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.formular-dateien__neu:hover { border-color: var(--color-primary); color: var(--color-primary); }
.formular-dateien__neu--laed { opacity: .5; pointer-events: none; }
.formular-zeile2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.formular-pad { position: relative; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: #fff; height: 180px; margin-top: var(--space-2); }
.formular-pad--klein { height: 130px; max-width: 520px; }
.formular-pad--fehlt { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.formular-pad__flaeche { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.formular-pad__linie { position: absolute; left: 24px; right: 24px; bottom: 32px; border-bottom: 1px solid #cbd5e1; pointer-events: none; }
.formular-pad__bild { position: absolute; left: 24px; bottom: 30px; max-height: 70%; pointer-events: none; }
.formular-pad__hinweis { position: absolute; left: 0; right: 0; top: 45%; text-align: center; pointer-events: none; }
.formular-pad__knoepfe { position: absolute; right: 6px; top: 6px; display: flex; align-items: center; gap: 4px; }
.formular-pad__flaeche--ruht { touch-action: auto; pointer-events: none; cursor: default; }
.formular-pad__bild[hidden] { display: none; }
.formular-fuellen__enter-sperre { display: none; }
.formular-luecke { color: #b45309; font-weight: 600; }
/* [v285, Review G08] Freigabe-Verlauf am Formular */
.formular-verlauf { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.formular-verlauf > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.formular-verlauf__liste { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.formular-verlauf__eintrag { display: grid; grid-template-columns: 22px 110px 1fr; align-items: start; gap: 8px; }
.formular-verlauf__eintrag > .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted); }
.formular-verlauf__wann { padding-top: 2px; }
.formular-fuellen__stand--fehler { color: var(--color-error, #dc2626); font-weight: 600; }
/* [Review F07] Leiste „Eingaben auf diesem Gerät" — Knöpfe rechts, mittig zur Zeile */
.formular-kopie { align-items: center; }
.formular-kopie__knoepfe { display: inline-flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.formular-abschluss { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--color-border); }
.formular-abschluss h3 { margin: 0; }
.formular-abschluss__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.formular-weg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.formular-weg__karte { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; position: relative; }
.formular-weg__karte input { position: absolute; opacity: 0; pointer-events: none; }
.formular-weg__karte > .material-symbols-outlined { font-size: 28px; color: var(--color-text-muted); }
.formular-weg__karte > span:last-child { display: flex; flex-direction: column; }
.formular-weg__karte small { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.formular-weg__karte--an { border-color: var(--color-primary); background: var(--color-primary-light, #e0f2fe); box-shadow: 0 0 0 3px rgba(3, 112, 176, .12); }
.formular-weg__karte--an > .material-symbols-outlined { color: var(--color-primary); }
.formular-weg__teil { display: flex; flex-direction: column; gap: var(--space-3); }
.formular-weg__teil[hidden] { display: none; }
.formular-weg__teil .form-group { margin: 0; }
.formular-mailinfo { display: flex; gap: 8px; align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: #fef3c7; color: #78350f; }
.formular-loeschen { margin-top: var(--space-4); text-align: right; }
@media (max-width: 1200px) {
  /* [02.10.2026] Einstellungen bleiben RECHTS neben dem Formular (vorher rutschten sie unter das Formular — zum Einstellen
     ganz nach unten scrollen); der Baukasten wandert als Leiste darüber */
  .formular-editor { grid-template-columns: minmax(0, 1fr) 300px; }
  .formular-editor__palette { grid-column: 1 / -1; position: static; max-height: none; }
  .formular-pal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .formular-pal .formular-pal__gruppe { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .formular-pal .formular-pal__titel { width: 100%; margin: 0; }
}
@media (max-width: 760px) {
  .formular-editor, .formular-zeile2, .formular-weg, .formular-start { grid-template-columns: minmax(0, 1fr); }
  .formular-editor__palette, .formular-editor__seite { position: static; max-height: none; }
}
.formular-fehler[hidden] { display: none; }
.formular-schritte { margin: 0 0 var(--space-3); padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
/* [02.10.2026] Lange Erklärtexte (BauConnect-Importe) im Editor auf zwei Zeilen kürzen — das PDF zeigt sie ganz */
.formular-el--text .formular-el__text b { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }