/* ============================================================
   WorkSpace – Hauptstylesheet  (Modern Design als Standard)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ── Globale SVG-Icon-Klasse (für #i-chev-l/r/u/d und weitere Lucide-Icons) ── */
.icon { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; display: inline-block; }
.icon.lg { width: 16px; height: 16px; }
.icon.sm { width: 11px; height: 11px; vertical-align: -1px; }
.icon.xl { width: 18px; height: 18px; }

:root {
  --bg:        #f5f5f7;
  --surface:   #ffffff;
  --surface2:  #f5f5f7;
  --border:    rgba(0,0,0,0.08);
  --border-mid:rgba(0,0,0,0.13);
  --primary:   #0071e3;
  --primary-d: #0064cc;
  --text:      #1d1d1f;
  --muted:     #6e6e73;
  --text3:     #aeaeb2;
  --danger:    #ff3b30;
  --success:   #34c759;
  --warn:      #ff9500;
  --header-h:  52px;
  --sidebar-w: 220px;
  --row-h:     46px;
  --month-w:   88px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

/* ── Top-Navigation ──────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
#topbar .logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 700; font-size: 1rem;
  text-decoration: none; letter-spacing: -0.3px;
}
#topbar .logo svg { width: 28px; height: 28px; }
#topbar nav { display: flex; gap: 2px; margin-left: 20px; }
#topbar nav button {
  background: none; border: none; color: var(--muted);
  padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 0.875rem; font-weight: 500; transition: all 0.15s;
  font-family: var(--font);
}
#topbar nav button:hover  { background: rgba(0,0,0,0.05); color: var(--text); }
#topbar nav button.active { background: rgba(0,113,227,0.1); color: var(--primary); font-weight: 600; }
/* Bauleitung-Link im Topbar-Nav */
#topbar nav .nav-bauleitung-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: #fff !important; text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 600; transition: background 0.15s;
  margin-left: 6px;
}
#topbar nav .nav-bauleitung-btn:hover { background: #0064cc; }
#topbar .spacer { flex: 1; }
#topbar .user-info {
  color: var(--muted); font-size: 0.8rem;
  display: flex; align-items: center; gap: 12px;
}
#topbar .user-info strong { color: var(--text); }
#topbar .btn-logout {
  background: rgba(0,0,0,0.05); border: 1px solid var(--border-mid);
  color: var(--text); padding: 5px 12px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.8rem; transition: background 0.15s;
  font-family: var(--font);
}
#topbar .btn-logout:hover { background: rgba(0,0,0,0.09); }
#topbar .btn-settings {
  background: rgba(0,0,0,0.05); border: none; color: var(--muted);
  padding: 6px 9px; border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; transition: background 0.15s;
}
#topbar .btn-settings:hover,
#topbar .btn-settings.active { background: rgba(0,0,0,0.09); color: var(--text); }

/* Avatar */
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #34aadc);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  cursor: pointer; flex-shrink: 0;
}

/* ── Einstellungen-Seite ─────────────────────────────────── */
.settings-nav-btn {
  display: block; width: 100%; text-align: left; padding: 9px 14px;
  border: none; background: none; cursor: pointer; border-radius: var(--radius-sm);
  font-size: 0.875rem; color: var(--muted); transition: all 0.15s;
  margin-bottom: 2px; font-family: var(--font);
}
.settings-nav-btn:hover  { background: rgba(0,0,0,0.04); color: var(--text); }
.settings-nav-btn.active { background: rgba(0,113,227,0.1); color: var(--primary); font-weight: 600; }
.settings-tab { padding: 0; }
.settings-tab .card-header { padding: 16px 24px; border-bottom: 1px solid var(--border); }

/* ── Hauptinhalt ─────────────────────────────────────────── */
#app {
  margin-top: var(--header-h);
  padding: 24px;
  min-height: calc(100vh - var(--header-h));
}

/* ── Seiten ──────────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ── Karten ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.015);
}
.card-header h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.2px; }
.card-header .spacer { flex: 1; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500;
  border: none; cursor: pointer; transition: all 0.15s;
  text-decoration: none; font-family: var(--font);
}
.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); }
.btn-secondary {
  background: rgba(0,0,0,0.05); color: var(--text);
  border: 1px solid var(--border-mid);
}
.btn-secondary:hover { background: rgba(0,0,0,0.09); }
.btn-danger    { background: rgba(255,59,48,0.08); color: var(--danger); border: 1px solid rgba(255,59,48,0.2); }
.btn-danger:hover { background: rgba(255,59,48,0.15); }
.btn-warning   { background: rgba(255,149,0,0.08); color: #b36200; border: 1px solid rgba(255,149,0,0.2); }
.btn-warning:hover { background: rgba(255,149,0,0.14); }
.btn-success   { background: rgba(52,199,89,0.08); color: #1a8a3a; border: 1px solid rgba(52,199,89,0.2); }
.btn-success:hover { background: rgba(52,199,89,0.15); }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.btn-icon {
  padding: 6px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.05); border: 1px solid var(--border-mid);
  cursor: pointer; color: var(--muted); transition: all 0.15s;
}
.btn-icon:hover { background: rgba(0,0,0,0.09); color: var(--text); }

/* ── Year-Nav ────────────────────────────────────────────── */
.year-nav {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.05); border-radius: var(--radius-sm);
  padding: 3px 5px;
}
.year-nav button {
  background: none; border: none; width: 28px; height: 28px;
  border-radius: 6px; font-size: 1rem; cursor: pointer;
  color: var(--muted); transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
}
.year-nav button:hover { background: rgba(0,0,0,0.07); color: var(--text); }
.year-nav span { font-size: 0.9rem; font-weight: 600; min-width: 38px; text-align: center; }

/* ── Gantt-Tabelle ───────────────────────────────────────── */
#gantt-container {
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
#gantt-container::-webkit-scrollbar { height: 8px; width: 8px; }
#gantt-container::-webkit-scrollbar-track { background: transparent; }
#gantt-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18); border-radius: 4px;
}
#gantt-container::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }

.gantt-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 13px;
}
/* Keine vertikalen Trennlinien */
.gantt-table th, .gantt-table td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0;
  white-space: nowrap;
}
.gantt-table thead th {
  background: var(--surface2);
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  padding: 9px 8px;
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 13px;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border-mid);
}
/* Monatsspalten-Header bleiben kompakter */
.gantt-table thead th.col-month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 4px; }

/* Fixe Spalten links */
.col-fix {
  position: sticky;
  left: 0;
  z-index: 5;
  /* Kein eigenes background – erbt von tr für korrekten Hover */
  background: inherit;
}
.gantt-table thead th.col-fix {
  background: var(--surface2);
  z-index: 15;
}

.col-nr    { width: 70px;  min-width: 70px; }
.col-name  { width: 200px; min-width: 160px; }
.col-mgr   { width: 130px; min-width: 100px; }
.col-bh    { width: 130px; min-width: 100px; }
.col-start { width: 70px;  min-width: 60px; }
.col-dur   { width: 55px;  min-width: 50px; }
.col-end   { width: 70px;  min-width: 60px; }
.col-fee   { width: 100px; min-width: 90px;  text-align: right; }
.col-yr    { width: 90px;  min-width: 80px;  text-align: right; }
.col-month { width: var(--month-w); min-width: var(--month-w); text-align: right; }
/* Heute-Spalte: td bekommt direkt background (Ausnahme vom inherit-Prinzip) */
td.col-month-today { background-color: rgba(0,113,227,0.05) !important; }
th.col-month-today {
  background-color: rgba(0,113,227,0.12) !important;
  color: var(--primary) !important;
  font-weight: 700;
}
/* Aktuelles Jahr – gleiche Hervorhebung wie aktueller Monat */
td.col-yr-today { background-color: rgba(0,113,227,0.05) !important; }
th.col-yr-today {
  background-color: rgba(0,113,227,0.12) !important;
  color: var(--primary) !important;
  font-weight: 700;
}

/* ── Zeilen – Background auf TR, td erbt → Hover funktioniert für sticky cols ── */
.gantt-table tbody tr          { height: var(--row-h); background-color: var(--surface); }
.gantt-table tbody tr:hover    { background-color: #f2f2f4 !important; }
.gantt-table tbody td {
  padding: 0 8px;
  vertical-align: middle;
  color: var(--text);
  background-color: transparent; /* tr-Farbe durchscheinen lassen */
}
/* sticky cols: background inherit vom tr → Hover zieht durch */
.gantt-table tbody td.col-fix  { background-color: inherit; }

/* Gantt-Balken-Zelle */
.gantt-cell {
  padding: 0 !important;
  position: relative;
}
.gantt-bar-wrapper {
  width: 100%; height: 24px;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  cursor: pointer;
  position: relative;
}
.gantt-bar {
  height: 20px;
  border-radius: 5px;
  margin: 0 2px;
  opacity: 0.85;
  transition: opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
  overflow: hidden;
}
.gantt-bar:hover { opacity: 1; }
.gantt-bar-past  { opacity: 0.5; }
.gantt-fee-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1;
  padding: 2px 2px 0;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.gantt-fee-label:hover {
  background: rgba(0,113,227,0.1);
  color: var(--primary);
}
.gantt-fee-label.fee-overridden {
  color: var(--primary);
  font-weight: 700;
}
.gantt-fee-label.fee-overridden::after {
  content: ' ✎';
  font-size: 8px;
}

/* Ausgaben-Zeilen – background auf tr */
.gantt-table tbody tr.expense-row { background-color: var(--surface) !important; }
/* Kein Hover-Effekt auf expense-rows nötig – erbt von allgemeinem tr:hover */

/* Drag & Drop */
.gantt-table tbody tr[draggable="true"] { cursor: grab; }
.gantt-table tbody tr[draggable="true"]:active { cursor: grabbing; }
.gantt-table tbody tr.dragging { opacity: 0.4; }
.gantt-table tbody tr.drag-over td { border-top: 2px solid var(--primary) !important; }

/* Fee-Popover */
.fee-popover {
  position: fixed;
  z-index: 499;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 260px;
}
.fee-popover-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.fee-popover-header strong {
  font-size: 0.875rem;
  flex: 1;
}

/* Zusammenfassung – background auf tr, schmäler als Datenzeilen */
.gantt-table tbody tr.summary-row {
  height: 34px;
  background-color: #f6f6f8 !important; /* opakes rgba(0,0,0,0.025) auf weiß */
}
.gantt-table tbody tr.summary-row:hover { background-color: #f6f6f8 !important; }
.summary-row td { font-weight: 700; border-top: 1px solid var(--border-mid); }
.summary-row.deficit td { color: var(--danger); }

/* Abschnitt-Header – schmal, background auf tr */
.gantt-table tbody tr.section-header {
  height: 26px !important;
  background-color: var(--surface2) !important;
}
.gantt-table tbody tr.section-header:hover { background-color: var(--surface2) !important; cursor: default; }
.gantt-table tbody tr.section-header.collapsible { cursor: pointer !important; }
.gantt-table tbody tr.section-header.collapsible:hover { filter: brightness(0.96); }
.section-header td {
  color: var(--muted) !important;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 10px !important;
  border-bottom: 1px solid var(--border-mid) !important;
}
.sh-inner { display: flex; align-items: center; gap: 6px; }
/* Chevron */
.section-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  background: rgba(0,0,0,0.06); flex-shrink: 0;
  transition: transform 0.2s, background 0.15s;
}
.section-chevron svg { width: 9px; height: 9px; display: block; }
.collapsible:hover .section-chevron { background: rgba(0,0,0,0.11); }
.section-header.collapsed .section-chevron { transform: rotate(-90deg); }
/* Zähler-Badge */
.section-count-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none;
  background: rgba(0,0,0,0.07); color: var(--muted);
  border-radius: 9px; padding: 1px 6px;
  transition: background 0.2s, color 0.2s;
}
.section-header.collapsed .section-count-badge {
  background: rgba(0,113,227,0.12); color: var(--primary);
}
/* Eingeklappte Zeilen */
.gantt-row-hidden { display: none !important; }

/* ── Adressbuch Karten ───────────────────────────────────── */
/* ── Adressbuch Toolbar ────────────────────────────────────── */
.ct-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  flex-wrap: wrap;
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin: -24px -24px 24px -24px;
}
.ct-contacts-card {
  border-radius: 0 !important;
  margin-left: -24px;
  margin-top: -24px;
  margin-bottom: -24px;
  border-left: none;
  border-top: none;
  border-bottom: none;
}
.ct-toolbar-title { font-size: 1.1rem; font-weight: 700; white-space: nowrap; margin: 0; }
.ct-toolbar-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.ct-toolbar-search {
  flex: 1; min-width: 140px; height: 32px; padding: 0 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.84rem; background: var(--bg);
}
.ct-toolbar-select {
  height: 32px; padding: 0 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.84rem; background: var(--bg); min-width: 130px;
}

/* Sort toggle */
.ct-sort-toggle {
  display: flex; align-items: center;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 3px; position: relative;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.ct-sort-pill {
  position: absolute; top: 3px; left: 3px; height: 24px;
  border-radius: 14px; background: var(--primary);
  transition: transform .22s cubic-bezier(.4,0,.2,1), width .18s ease;
  z-index: 0;
}
.ct-sort-opt {
  position: relative; z-index: 1;
  padding: 0 12px; height: 24px; display: flex; align-items: center;
  font-size: 0.78rem; font-weight: 600; color: var(--text2);
  transition: color .18s; white-space: nowrap; border-radius: 14px;
}
.ct-sort-active { color: #fff; }

.ct-abc-nav {
  position: fixed;
  right: 0;
  top: calc(var(--header-h) + 53px);
  height: calc(100vh - var(--header-h) - 53px);
  width: 26px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  z-index: 15;
  overflow: hidden;
}
.ct-abc-nav span {
  font-size: 11px; line-height: 1; color: var(--text3);
  cursor: default; padding: 2px 3px; user-select: none;
}
.ct-abc-nav span.has-entry { color: var(--text); cursor: pointer; }
.ct-abc-nav span.has-entry:hover { color: var(--primary); }
.ct-abc-nav span.active { color: var(--primary); font-weight: 600; }
.ct-letter-sep {
  padding: 5px 16px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text3); background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.contact-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px;
  background: rgba(0,0,0,0.025);
  border-bottom: 1px solid var(--border);
}
.contact-card-name { font-weight: 700; font-size: 0.94rem; letter-spacing: -0.1px; }
.contact-card-data {
  display: grid;
  grid-template-columns: minmax(140px,2fr) minmax(120px,1fr) minmax(120px,1fr) minmax(160px,2fr) minmax(150px,2fr);
  gap: 0; padding: 9px 18px;
  font-size: 0.84rem; color: var(--muted);
  align-items: center;
}
.contact-card-data a { color: var(--primary); text-decoration: none; }
.contact-card-data a:hover { text-decoration: underline; }
.contact-person-row {
  display: grid;
  grid-template-columns: minmax(140px,2fr) minmax(120px,1fr) minmax(120px,1fr) minmax(160px,2fr) minmax(150px,2fr);
  gap: 0; padding: 7px 18px 7px 32px;
  font-size: 0.83rem; color: var(--muted);
  border-top: 1px solid var(--border);
  align-items: center;
}
.contact-person-row .person-name { font-weight: 600; color: var(--text); }
.contact-person-row a { color: var(--primary); text-decoration: none; }
.contact-person-row a:hover { text-decoration: underline; }

/* Search & Filter Bar */
.search-bar {
  display: flex; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.search-input {
  flex: 1; padding: 8px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 0.875rem; font-family: var(--font);
  background: var(--surface2); outline: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
  background: var(--surface);
}
.role-select {
  padding: 8px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 0.875rem; font-family: var(--font);
  background: var(--surface2); color: var(--text);
  min-width: 160px; outline: none;
  transition: border-color 0.15s;
}
.role-select:focus { border-color: var(--primary); }

/* ── Status-Toggle (Angebot / Beauftragt) ────────────────── */
/* Einheitliches Easing: cubic-bezier(.5,0,.2,1) wie bzp-seg, 0.28s. */
.status-toggle-wrap { display:flex; align-items:center; gap:7px; }
.status-lbl { font-size:0.8rem; color:var(--muted); white-space:nowrap; transition:color .22s cubic-bezier(.5,0,.2,1); }
.status-toggle { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; }
.status-toggle input { opacity:0; width:0; height:0; }
.status-track { position:absolute; inset:0; background:#ddd; border-radius:11px; transition:background .28s cubic-bezier(.5,0,.2,1); }
.status-track .status-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .28s cubic-bezier(.5,0,.2,1); box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.status-toggle input:checked + .status-track { background:var(--primary); }
.status-toggle input:checked + .status-track .status-knob { transform:translateX(18px); }
.proj-status-btn { display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; font-size:9px; font-weight:800; cursor:pointer;
  border:none; margin-left:4px; vertical-align:middle; transition:all 0.15s; flex-shrink:0; }
.proj-status-btn.beauftragt { background:#dcfce7; color:#16a34a; }
.proj-status-btn.beauftragt:hover { background:#16a34a; color:#fff; }
.proj-status-btn.angebot    { background:#fff7ed; color:#ea580c; }
.proj-status-btn.angebot:hover { background:#ea580c; color:#fff; }
.section-header-angebot td { background:var(--surface2) !important; color:var(--muted) !important; }
[data-theme="clean"] .section-header-angebot td { background:#334155 !important; color:#fff !important; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

/* Modals die über dem Projekt-Popup liegen, ohne doppelten Overlay */
#modal-hoai-wizard,
#modal-contact {
  z-index: 1500;       /* über PDF-Vorschau (1300), damit „Verfasser anlegen" aus der Plan-Vorschau funktioniert */
  background: rgba(0,0,0,0.18);
  backdrop-filter: none;
}
/* Plan-Such-/Anlege-Modals müssen auch über der PDF-Vorschau liegen */
#pl-contact-search-modal { z-index: 1500 !important; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  /* Flex-Spalte: Header + Body(scrollbar) + Footer bleiben immer sichtbar */
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.99);
  transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.015);
}
.modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.2px; flex: 1; }
.modal-header .spacer { flex: 1; }
.modal-close {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.07); font-size: 1.1rem;
  cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.modal-close:hover { background: rgba(0,0,0,0.12); color: var(--text); }
/* Body scrollt, Header und Footer bleiben fest */
.modal-body { padding: 22px; overflow-y: auto; overflow-x: hidden; flex: 1; }
.modal-footer {
  padding: 14px 22px; flex-shrink: 0;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: rgba(0,0,0,0.015);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Formular ────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span2 { grid-column: 1 / -1; }
/* SMTP-Sektionen */
.smtp-section { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.smtp-section-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); background:var(--surface2,#f8f9fa); padding:8px 16px; border-bottom:1px solid var(--border); }
.smtp-section-body { padding:16px; }
/* Radio-Pills (SMTP Verschlüsselung etc.) */
.radio-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:0.83rem; background:var(--surface2,var(--card)); transition:background .15s,border-color .15s; }
.radio-pill:has(input:checked) { background:var(--primary-light,#eff6ff); border-color:var(--primary,#3b82f6); color:var(--primary,#3b82f6); font-weight:600; }
.radio-pill input[type="radio"] { display:none; }
.btn-group { display:flex; flex-wrap:wrap; gap:6px; }
.form-group { display: flex; flex-direction: column; gap: 5px; position: relative; }
.form-group label {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
.form-group textarea { resize: vertical; min-height: 70px; }

/* ── Projekt-Popup Sektionen ────────────────────────────── */
.proj-section { margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.proj-section-last { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.proj-section-title {
  font-size:12px; font-weight:700; color:var(--text); margin-bottom:12px;
  text-transform:uppercase; letter-spacing:0.5px;
  display:flex; align-items:center; gap:8px;
}
.proj-section-icon {
  width:26px; height:26px; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; flex-shrink:0;
}

/* ── Bauherr-Karte ────────────────────────────────────────── */
.proj-bauherr-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--border-mid);
  border-radius:10px; background:#fafbfc;
}
.proj-bauherr-avatar {
  width:40px; height:40px; border-radius:10px;
  background:#eff6ff; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--primary); flex-shrink:0;
}
.proj-bauherr-info { flex:1; min-width:0; }
.proj-bauherr-name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-bauherr-detail { font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-bauherr-actions { display:flex; gap:4px; flex-shrink:0; }
.proj-bauherr-action {
  background:none; border:none; cursor:pointer; color:var(--muted);
  padding:4px 6px; border-radius:4px; font-size:12px; display:flex; align-items:center;
}
.proj-bauherr-action:hover { background:#f3f4f6; color:var(--text); }

/* ── Adopt-Button (Vom Bauherrn übernehmen etc.) ──────────── */
.proj-adopt-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:5px; font-size:11px; font-weight:600;
  border:1px solid var(--border-mid); background:#fff; color:var(--muted);
  cursor:pointer; transition:all 0.15s;
}
.proj-adopt-btn:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }

/* ── Projektbearbeiter Checkliste ───────────────────────── */
/* ── Projektbearbeiter Chips ──────────────────────────────── */
.proj-members-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; min-height: 36px;
  border: 1.5px solid var(--border-mid); border-radius: 8px;
  background: var(--surface1);
}
.proj-member-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 12px;
  background: #f3f4f6; font-size: 11px; font-weight: 500;
  color: var(--text);
}
.proj-member-chip-remove {
  cursor: pointer; color: var(--muted);
  font-size: 13px; line-height: 1;
  margin-left: 2px;
}
.proj-member-chip-remove:hover { color: var(--danger); }

/* + Button neben Label */
.proj-add-btn {
  background: none; border: none;
  color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1;
  cursor: pointer; padding: 0 2px;
  transition: color 0.15s;
}
.proj-add-btn:hover { color: var(--primary); }

/* Dropdown-Liste (Overlay) */
.proj-member-dropdown {
  position: absolute; z-index: 10; left: 0; right: 0;
  border: 1.5px solid var(--border-mid); border-radius: 8px;
  background: #fff; max-height: 140px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-top: 4px;
}
.proj-member-dd-item {
  padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background 0.1s;
}
.proj-member-dd-item:hover { background: rgba(0,113,227,0.07); }

/* Toggle-Gruppe (Person / Firma) – animierter Sliding-Pill */
.toggle-group {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.toggle-group::before {
  content: ''; position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--surface); border-radius: 7px;
  box-shadow: var(--shadow-sm);
  transition: left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index: 0; pointer-events: none;
}
.toggle-group:has(> .toggle-btn:nth-of-type(2).active)::before { left: 50%; }
.toggle-btn {
  position: relative; z-index: 1;
  padding: 5px 14px; border: none;
  border-radius: 7px; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; font-family: var(--font);
  transition: color .22s cubic-bezier(.5,0,.2,1), font-weight .22s;
  background: transparent; color: var(--muted);
}
.toggle-btn.active {
  background: transparent; color: var(--text);
  font-weight: 600;
}

/* ── Expense-Items Inline-Inputs ─────────────────────────── */
.exp-input {
  padding: 7px 10px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  transition: border-color 0.15s;
  outline: none;
}
.exp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }

/* ── Info-Badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-blue   { background: rgba(0,113,227,0.1);  color: #0071e3; }
.badge-green  { background: rgba(52,199,89,0.12); color: #1a8a3a; }
.badge-purple { background: rgba(124,58,237,0.1); color: #7c3aed; }
.badge-orange { background: rgba(255,149,0,0.12); color: #b36200; }
.badge-gray   { background: rgba(0,0,0,0.06);     color: var(--muted); }

/* ── Zahlen & Beträge ────────────────────────────────────── */
.amount     { text-align: right; font-variant-numeric: tabular-nums; }
.amount-neg { color: var(--danger); }
.amount-pos { color: var(--success); }

/* ── Tabs ────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  padding: 10px 20px;
  border: none; background: none;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  font-family: var(--font);
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ── Loader ──────────────────────────────────────────────── */
.loader {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; color: var(--muted);
}

/* ── Farb-Auswahl (Custom Dropdown) ───────────────────────── */
.proj-color-dd-wrap { position: relative; }
.proj-color-dd-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1.5px solid var(--border-mid); border-radius: 8px;
  background: #fff; cursor: pointer; transition: border-color 0.15s;
  font-size: 0.875rem;
}
.proj-color-dd-trigger:hover { border-color: var(--primary); }
.proj-color-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #4A90D9; flex-shrink: 0;
}
.proj-color-dd-label { flex: 1; }
.proj-color-dd-arrow { color: var(--muted); font-size: 10px; }
.proj-color-dd-list {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; z-index: 10;
  border: 1.5px solid var(--border-mid); border-radius: 8px;
  background: #fff; max-height: 180px; overflow-y: auto;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
.proj-color-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; font-size: 13px;
  transition: background 0.1s;
}
.proj-color-dd-item:hover { background: rgba(0,113,227,0.07); }
.proj-color-dd-item-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}

/* ── Tooltip ─────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1d1d1f;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
}

/* ── Data-Table (Projekte-Liste) ─────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  background: var(--surface2);
  border-bottom: 1px solid var(--border-mid);
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(0,0,0,0.018); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: 1; }
  #app { padding: 16px; }
}

/* ── Hilfklassen ─────────────────────────────────────────── */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.text-muted { color: var(--muted); }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }

/* ============================================================
   THEME: clean  (altes dunkles Design)
   Aktiviert via <html data-theme="clean">
   ============================================================ */

[data-theme="clean"] {
  --bg:        #f0f2f5;
  --surface:   #ffffff;
  --surface2:  #f8fafc;
  --border:    #e2e8f0;
  --border-mid:#cbd5e1;
  --surface3:  #f1f4f9;
  --primary:   #4A90D9;
  --primary-d: #357abd;
  --text:      #1e293b;
  --muted:     #64748b;
  --text3:     #94a3b8;
  --danger:    #dc2626;
  --success:   #16a34a;
  --warn:      #d97706;
  --radius-sm: 7px;
  --radius:    10px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.3);
}

[data-theme="clean"] #topbar {
  background: #1a2332;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-bottom: none;
}
[data-theme="clean"] #topbar .logo { color: #fff; }
[data-theme="clean"] #topbar nav button { color: #94a3b8; }
[data-theme="clean"] #topbar nav button:hover { background: rgba(255,255,255,0.08); color: #fff; }
[data-theme="clean"] #topbar nav button.active { background: var(--primary); color: #fff; }
[data-theme="clean"] #topbar nav .nav-bauleitung-btn { background: var(--primary); color: #fff !important; }
[data-theme="clean"] #topbar nav .nav-bauleitung-btn:hover { background: #0064cc; }
[data-theme="clean"] #topbar .user-info { color: #94a3b8; }
[data-theme="clean"] #topbar .user-info strong { color: #fff; }
[data-theme="clean"] #topbar .btn-logout { background: rgba(255,255,255,0.1); border: none; color: #fff; }
[data-theme="clean"] #topbar .btn-logout:hover { background: rgba(255,255,255,0.2); }
[data-theme="clean"] #topbar .btn-settings { background: rgba(255,255,255,0.1); color: #94a3b8; }
[data-theme="clean"] #topbar .btn-settings:hover,
[data-theme="clean"] #topbar .btn-settings.active { background: rgba(255,255,255,0.2); color: #fff; }

[data-theme="clean"] .gantt-table thead th {
  background: #1e293b;
  color: #fff;
}
[data-theme="clean"] .gantt-table thead th.col-fix { background: #1e293b; }
[data-theme="clean"] .col-month-today { background: #eef6ff !important; }
[data-theme="clean"] th.col-month-today { background: #dbeafe !important; color: #1d4ed8 !important; }
[data-theme="clean"] .col-yr-today { background: #eef6ff !important; }
[data-theme="clean"] th.col-yr-today { background: #dbeafe !important; color: #1d4ed8 !important; }

[data-theme="clean"] .section-header td,
[data-theme="clean"] .section-header td.col-fix { background: #334155 !important; color: #fff !important; }

[data-theme="clean"] .gantt-table tbody tr:hover    { background-color: #f0f4f8 !important; }
[data-theme="clean"] .gantt-table tbody tr.section-header,
[data-theme="clean"] .gantt-table tbody tr.section-header:hover { background-color: #334155 !important; }
[data-theme="clean"] .gantt-table tbody tr.section-header td { color: #fff !important; }

[data-theme="clean"] .settings-nav-btn.active { background: var(--primary); color: #fff; }
[data-theme="clean"] .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

[data-theme="clean"] .modal {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
[data-theme="clean"] .modal-header,
[data-theme="clean"] .modal-footer { background: #f8fafc; }
[data-theme="clean"] .card-header { background: #f8fafc; }
[data-theme="clean"] .summary-row td { background: #f8fafc; }

[data-theme="clean"] .gantt-fee-label:hover { background: #dbeafe; color: var(--primary); }
[data-theme="clean"] .badge-blue   { background: #dbeafe; color: #1d4ed8; }
[data-theme="clean"] .badge-green  { background: #dcfce7; color: #15803d; }
[data-theme="clean"] .badge-orange { background: #fed7aa; color: #c2410c; }
[data-theme="clean"] .badge-purple { background: #f3e8ff; color: #7c3aed; }
[data-theme="clean"] .btn-secondary { background: #f1f5f9; border-color: var(--border); }
[data-theme="clean"] .btn-secondary:hover { background: #e2e8f0; }
[data-theme="clean"] .btn-danger  { background: #fef2f2; border-color: #fca5a5; }
[data-theme="clean"] .btn-warning { background: #fffbeb; border-color: #fcd34d; }
[data-theme="clean"] .btn-success { background: #f0fdf4; border-color: #86efac; }

/* ── Theme Switcher in Einstellungen ── */
.theme-switcher { display: flex; gap: 14px; margin-bottom: 24px; }
.theme-option {
  flex: 1; max-width: 200px;
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 14px; cursor: pointer; transition: all 0.2s;
  background: var(--surface); text-align: center;
}
.theme-option:hover { border-color: var(--primary); }
.theme-option.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.18);
}
.theme-option-preview {
  width: 100%; height: 80px; border-radius: 8px;
  margin-bottom: 10px; overflow: hidden; position: relative;
}
.theme-option-name { font-size: 0.875rem; font-weight: 600; }
.theme-option-desc { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }

/* Preview: Modern */
.preview-modern { background: #f5f5f7; }
.preview-modern .p-topbar { height: 18px; background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; padding: 0 8px; gap: 4px; }
.preview-modern .p-dot { width: 22px; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.1); }
.preview-modern .p-dot.a { background: #0071e3; opacity: 0.7; }
.preview-modern .p-body { padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.preview-modern .p-card { background: #fff; border-radius: 8px; height: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.preview-modern .p-bar { background: #0071e3; border-radius: 4px; height: 6px; width: 60%; margin-top: 3px; opacity: 0.65; }

/* Preview: Clean */
.preview-clean { background: #1a2332; }
.preview-clean .p-topbar { height: 18px; background: #1a2332; display: flex; align-items: center; padding: 0 8px; gap: 4px; }
.preview-clean .p-dot { width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.15); }
.preview-clean .p-dot.a { background: #4A90D9; }
.preview-clean .p-body { padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.preview-clean .p-card { background: #fff; border-radius: 5px; height: 12px; }
.preview-clean .p-bar { background: #4A90D9; border-radius: 3px; height: 6px; width: 60%; margin-top: 3px; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════
   Projektplanung
   ═══════════════════════════════════════════════════════ */

/* Meine / Alle – Toggle (animierter Sliding-Pill) */
.pp-filter-seg {
  position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:#f2f2f7; border-radius:7px; padding:2px; gap:0;
}
.pp-filter-seg-pill {
  position:absolute; top:2px; bottom:2px; left:2px;
  width:calc(50% - 2px);
  background:#fff; border-radius:5px;
  box-shadow:0 1px 3px rgba(15,23,42,.12), 0 1px 1px rgba(15,23,42,.04);
  transition:left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index:0; pointer-events:none;
}
/* Zweiter Knopf aktiv → Pill nach rechts gleiten lassen */
.pp-filter-seg:has(> .pp-filter-btn:nth-of-type(2).pp-filter-active) .pp-filter-seg-pill { left:50%; }
.pp-filter-btn {
  position:relative; z-index:1;
  background:none; border:none; cursor:pointer;
  padding:4px 12px; font-size:12px; font-weight:500; color:var(--muted);
  border-radius:5px;
  transition:color .22s cubic-bezier(.5,0,.2,1), font-weight .22s;
  white-space:nowrap; font-family:inherit;
}
.pp-filter-btn.pp-filter-active {
  background:transparent; color:#1d1d1f; font-weight:600;
}
:root {
  --pp-cell:    38px;
  --pp-label-w: 240px;
  --pp-lph14:   #4f8ef7;
  --pp-lph5:    #f0a030;
  --pp-lph67:   #a84ff7;
  --pp-lph8:    #8e8e93;
}

/* Outer scroll wrapper – feste Höhe damit Header sticky korrekt wirkt und Scrollbar
   immer unten sichtbar ist */
.pp-gantt-outer {
  overflow-x:auto;
  overflow-y:auto;
  height: calc(100vh - var(--header-h) - 100px);
}
.pp-gantt-outer::-webkit-scrollbar { height:7px; width:7px; }
.pp-gantt-outer::-webkit-scrollbar-track { background:#f0f0f5; }
.pp-gantt-outer::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }

/* Header-Wrapper (sticky vertikal – relativ zu pp-gantt-outer als Scroll-Container) */
.pp-header-wrap { position:sticky; top:0; z-index:50; background:#fff; }
.pp-header-row { display:flex; background:#fff; }
.pp-header-top  { border-bottom:1px solid var(--border-mid); min-height:20px; }
.pp-header-bottom { border-bottom:2px solid var(--border); align-items:center; }

/* Eck-Zelle (leer, oben links) – sticky horizontal */
.pp-header-label-corner {
  width:var(--pp-label-w, 240px); flex-shrink:0;
  position:sticky; left:0; z-index:20; background:#fff;
  padding:3px 14px; display:flex; align-items:center;
  border-right:1px solid var(--border);
}

/* Label-Kopfzelle (untere Header-Zeile) – sticky horizontal */
.pp-header-label {
  width:var(--pp-label-w, 240px); flex-shrink:0;
  position:sticky; left:0; z-index:20; background:#fff;
  padding:4px 14px;
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
  border-right:1px solid var(--border);
  display:flex; align-items:center;
  align-self:stretch; /* volle Höhe für Resize-Handle */
}

/* Resize-Handle an der rechten Kante der Label-Spalte */
.pp-label-resize {
  position:absolute; right:0; top:0; bottom:0; width:5px;
  cursor:ew-resize; z-index:5; background:transparent; transition:background .15s;
}
.pp-label-resize:hover { background:rgba(0,113,227,.35); }

/* Gruppen-Zelle (Jahr / Monat in oberer Header-Zeile) */
.pp-group-cell {
  flex-shrink:0; text-align:center;
  font-size:11px; font-weight:600; color:var(--muted);
  padding:3px 6px; border-left:1px solid var(--border-mid);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
}

/* Monats-/Wochen-/Tages-Zellen */
.pp-month-cell { flex-shrink:0; text-align:center; font-size:10px; color:#aaa; padding:4px 0; border-left:1px solid #eee; width:var(--pp-cell); }
.pp-month-cell.pp-jan     { border-left-color:#bbb; color:#555; font-weight:700; }
.pp-month-cell.pp-now     { background:rgba(0,113,227,.10); color:var(--primary); font-weight:700; }
.pp-month-cell.pp-weekend { background:rgba(0,0,0,.04); color:#bbb; }

/* Projektzeilen */
.pp-project-row { border-bottom:1px solid var(--border); }
.pp-proj-header { display:flex; align-items:stretch; cursor:pointer; background:#fff; transition:background .12s; }
.pp-proj-header:hover { background:#f7f7fa; }
.pp-proj-label {
  width:var(--pp-label-w, 240px); flex-shrink:0; padding:10px 14px;
  display:flex; align-items:center; gap:8px;
  border-right:1px solid var(--border); font-weight:600; font-size:13px;
  position:sticky; left:0; z-index:5; background:#fff;
}
.pp-proj-header:hover .pp-proj-label { background:#f7f7fa; }
.pp-expand-arrow { width:10px; height:10px; color:#bbb; transition:transform .2s; flex-shrink:0; vertical-align:middle; }
.pp-project-row.pp-expanded .pp-expand-arrow { transform:rotate(90deg); }
.pp-proj-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-proj-settings-btn { background:none; border:none; color:#bbb; cursor:pointer; font-size:14px; padding:2px 4px; border-radius:4px; transition:color .15s; flex-shrink:0; }
.pp-proj-settings-btn:hover { color:var(--primary); }
.pp-summary-track { flex:1; position:relative; display:flex; align-items:center; min-height:42px; overflow:hidden; }

/* Dünne Summary-Balken (zugeklappt) */
.pp-summary-bar { position:absolute; top:11px; height:18px; border-radius:4px; opacity:.55; pointer-events:none; }

/* Phasenzeilen */
.pp-phase-rows { display:none; }
.pp-project-row.pp-expanded .pp-phase-rows { display:block; }
.pp-phase-row { display:flex; align-items:stretch; border-top:1px solid rgba(0,0,0,.04); }
.pp-phase-label {
  width:var(--pp-label-w, 240px); flex-shrink:0;
  padding:5px 14px 5px calc(63px + var(--pp-num-w, 40px));
  display:flex; align-items:center; gap:7px;
  border-right:1px solid var(--border); font-size:11px; color:#666; font-weight:500; min-height:34px;
  position:sticky; left:0; z-index:4; background:#fff;
}
.pp-phase-tag { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.pp-phase-track {
  flex:1; position:relative; min-height:34px; overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent,transparent calc(var(--pp-cell) - 1px),#f0f0f5 calc(var(--pp-cell) - 1px),#f0f0f5 var(--pp-cell));
}

/* Meilenstein-Zeile */
.pp-milestone-row { display:flex; align-items:stretch; border-top:1px solid rgba(0,0,0,.04); }
.pp-milestone-label {
  width:var(--pp-label-w, 240px); flex-shrink:0;
  padding:4px 14px 4px calc(63px + var(--pp-num-w, 40px));
  display:flex; align-items:center; gap:6px;
  border-right:1px solid var(--border); font-size:11px; color:#aaa; font-style:italic;
  position:sticky; left:0; z-index:4; background:#fff;
}
.pp-milestone-track { flex:1; position:relative; min-height:48px; }

/* Phase-Balken */
.pp-bar {
  position:absolute; top:5px; height:24px; border-radius:5px;
  display:flex; align-items:center; padding:0 8px;
  font-size:10px; font-weight:700; color:#fff; white-space:nowrap;
  overflow:hidden; cursor:grab; box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:box-shadow .12s; z-index:2;
}
.pp-bar:hover { box-shadow:0 2px 8px rgba(0,0,0,.28); }
.pp-bar.pp-dragging { cursor:grabbing; box-shadow:0 4px 16px rgba(0,0,0,.3); z-index:10; opacity:.88; }
.pp-bar.pp-not-contracted { opacity:.22; cursor:default; pointer-events:none; }
.pp-bar-handle { position:absolute; top:0; width:7px; height:100%; cursor:ew-resize; background:rgba(255,255,255,.28); z-index:3; }
.pp-bar-handle.left  { left:0;  border-radius:5px 0 0 5px; }
.pp-bar-handle.right { right:0; border-radius:0 5px 5px 0; }

/* Heute-Spalte (blauer Hintergrund, wie in der Budgetplanung) */
.pp-today-col { position:absolute; top:0; bottom:0; background:rgba(0,113,227,.08); z-index:1; pointer-events:none; border-left:1.5px solid rgba(0,113,227,.25); }

/* Meilenstein-Raute (verschiebbar) */
.pp-ms-marker {
  position:absolute; top:8px; transform:none;
  width:12px; height:12px; background:#f59e0b; border:2px solid #fff;
  border-radius:2px; rotate:45deg; z-index:4; cursor:grab;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:box-shadow .12s;
}
.pp-ms-marker:hover { box-shadow:0 0 0 3px rgba(245,158,11,.3); }
.pp-ms-label {
  position:absolute; top:0; transform:translateX(-50%);
  font-size:11px; font-weight:700; color:#92400e; white-space:nowrap;
  background:rgba(255,248,230,.92); padding:1px 5px; border-radius:3px; pointer-events:none;
}

/* Popup-Inhalte */
.pp-popup-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.pp-lph-check-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.pp-lph-check-row:last-child { border-bottom:none; }
.pp-lph-check-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
.pp-lph-check-row label { font-size:13px; font-weight:600; cursor:pointer; flex:1; }
.pp-lph-phase-tag { font-size:10px; padding:2px 7px; border-radius:5px; color:#fff; font-weight:700; }
.pp-milestone-entry { display:flex; align-items:center; gap:8px; padding:6px 8px; background:#f7f7fa; border-radius:7px; margin-bottom:6px; }
.pp-milestone-entry input[type=text] { flex:1; border:1.5px solid #e0e0e5; border-radius:5px; padding:4px 8px; font-size:12px; outline:none; }
.pp-milestone-entry input[type=text]:focus { border-color:var(--primary); }
.pp-milestone-entry input[type=date] { border:1.5px solid #e0e0e5; border-radius:5px; padding:4px 8px; font-size:12px; outline:none; }
.pp-milestone-entry input[type=date]:focus { border-color:var(--primary); }
.pp-del-ms-btn { background:none; border:none; color:#ff3b30; cursor:pointer; font-size:16px; padding:0 4px; }
.btn-add-pp-milestone { background:none; border:1.5px dashed rgba(0,113,227,.4); color:var(--primary); border-radius:7px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; width:100%; margin-top:4px; transition:background .15s; }
.btn-add-pp-milestone:hover { background:rgba(0,113,227,.06); }

/* Drag-Handle Projektzeilen-Reihenfolge */
.pp-row-drag-handle { cursor:move; color:#ccc; font-size:13px; padding:0 5px 0 2px; flex-shrink:0; user-select:none; line-height:1; }
.pp-row-drag-handle:hover { color:#999; }
.pp-row-drag-handle:active { cursor:move; }

/* Projektnummer – feste Breite (längste Nummer) → alle Namen auf gleicher Vorderkante */
.pp-proj-number {
  font-size:10px; font-weight:700; color:var(--muted);
  flex-shrink:0; white-space:nowrap; opacity:.7;
  min-width:var(--pp-num-w, 40px);
  text-align:right;
}

/* Zoom-Buttons – animierter Sliding-Pill (Monate/Wochen/Tage) */
.pp-zoom-seg {
  position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(62px,1fr);
  background:#f2f2f7; border:1px solid var(--border); border-radius:7px;
  padding:3px; gap:0; font-size:11px; font-weight:600;
}
.pp-zoom-seg-pill {
  position:absolute; top:3px; bottom:3px;
  background:#fff; border-radius:5px;
  box-shadow:0 1px 3px rgba(15,23,42,.12), 0 1px 1px rgba(15,23,42,.04);
  transition:left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index:0; pointer-events:none;
  /* Initial wird Position per JS gesetzt */
  left:3px; width:calc(33.3333% - 6px);
}
.pp-zoom-btn {
  position:relative; z-index:1;
  border:none; background:transparent; cursor:pointer;
  padding:5px 10px; font-size:11px; font-weight:600;
  color:var(--muted); font-family:inherit; border-radius:5px;
  transition:color .22s cubic-bezier(.5,0,.2,1);
  white-space:nowrap;
}
.pp-zoom-btn.pp-zoom-active { color:var(--text); font-weight:700; }
.pp-zoom-btn:not(.pp-zoom-active):hover { color:#334155; }

/* Projektlaufzeit-Linie im Summary-Track (blau, über den Balken) */
.pp-proj-duration-line {
  position:absolute; top:3px; /* oben – liegt über den Balken */
  height:3px; border-radius:2px;
  background:rgba(0,100,210,.6); z-index:4; pointer-events:none;
  box-shadow:0 1px 4px rgba(0,113,227,.3);
}

/* Editierbare LPH-Bezeichnungen im Projekt-Popup */
.pp-lph-edit-group { display:flex; gap:5px; flex:1; }
.pp-lph-label-inp {
  width:68px; flex-shrink:0; border:1.5px solid #e0e0e5; border-radius:5px;
  padding:3px 6px; font-size:11px; font-weight:700; outline:none; color:var(--text);
  background:#fafafa;
}
.pp-lph-label-inp:focus { border-color:var(--primary); background:#fff; }
.pp-lph-desc-inp {
  flex:1; border:1.5px solid #e0e0e5; border-radius:5px;
  padding:3px 6px; font-size:12px; outline:none; color:var(--text); background:#fafafa;
}
.pp-lph-desc-inp:focus { border-color:var(--primary); background:#fff; }

/* ══════════════════════════════════════════════════════════════
   KOSTENERMITTLUNG – Tabellarische Ansicht
   ══════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────── */
.ke-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
  flex-wrap:wrap; gap:8px;
}
.ke-toolbar-left, .ke-toolbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ke-title { font-size:1.05rem; font-weight:700; color:var(--text); margin:0; white-space:nowrap; }
.ke-select {
  padding:5px 10px; border:1.5px solid var(--border-mid); border-radius:7px;
  font-size:0.82rem; min-width:180px; background:#fff; color:var(--text); outline:none;
}
.ke-select:focus { border-color:var(--primary); }
.ke-toolbar-btn {
  display:flex; align-items:center; gap:5px; padding:0 12px;
  height:30px; font-size:0.82rem; border:1px solid var(--border-mid); border-radius:7px;
  cursor:pointer; background:#fff; color:var(--text); white-space:nowrap; box-sizing:border-box;
}
.ke-toolbar-btn:hover { background:#f3f4f6; }

/* ── Spalten-Picker (Kostenschätzung) ───────────────────────── */
.ke-cols-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
  width: 240px; background: #fff; border: 1px solid var(--border-mid);
  border-radius: 8px; padding: 6px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  font-size: 13px; color: var(--text);
}
.ke-cols-pop[hidden] { display: none; }
.ke-cols-pop-head {
  padding: 6px 14px 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
}
.ke-cols-pop-list { max-height: 360px; overflow: auto; }
.ke-cols-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; cursor: pointer;
  user-select: none;
}
.ke-cols-row:hover { background: rgba(0,0,0,0.04); }
.ke-cols-row.mandatory { background: #f8f8f5; cursor: not-allowed; color: var(--muted); }
.ke-cols-row input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.ke-cols-row.mandatory input[type="checkbox"] { cursor: not-allowed; }
.ke-cols-hint { font-size: 11px; color: var(--muted); margin-left: 4px; }
.ke-cols-badge {
  font-size: 10px; background: #e6f1fb; color: #0c447c;
  padding: 1px 6px; border-radius: 3px; margin-left: auto; font-weight: 500;
}
.ke-cols-pop-foot {
  border-top: 1px solid var(--border); margin-top: 4px; padding: 7px 12px 5px;
  display: flex; gap: 6px; justify-content: space-between;
}
.ke-cols-pop-foot button {
  font-size: 11px; padding: 4px 10px; border: 1px solid var(--border-mid);
  border-radius: 6px; background: #fff; cursor: pointer; color: var(--text);
}
.ke-cols-pop-foot button:hover { background: #f3f4f6; }

/* ── Mengenermittlung ───────────────────────────────────────── */
.ke-menge-cell {
  display: flex;
  align-items: center;
  width: 100%;
}
.ke-menge-cell span {
  flex: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ke-me-btn {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
}
.ke-me-btn:hover { background: var(--bg-hover); color: var(--primary); }
.ke-row:hover .ke-me-btn,
.ke-row-l3:hover .ke-me-btn,
.ke-me-btn--active { visibility: visible; }
/* Aktiv-Zustand: ME hat Einträge → blau */
.ke-me-btn--active { color: var(--primary); }
.ke-me-btn--active:hover { background: #eff6ff; }
.ke-me-pop {
  position: fixed;
  z-index: 9999;
  width: 540px;
  background: #fff;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  font-size: 13px;
  color: var(--text);
  display: none;
  flex-direction: column;
  max-height: 65vh;
  overflow: hidden;
}
.ke-me-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.ke-me-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 460px;
}
.ke-me-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.ke-me-close:hover { background: var(--bg-hover); color: var(--text); }
.ke-me-body { overflow-y: auto; flex: 1; }
.ke-me-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ke-me-table th {
  padding: 5px 6px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ke-me-row td,
.ke-me-ghost td {
  padding: 2px 3px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.ke-me-ghost td { background: #fafafa; }
.ke-me-pos-cell {
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  padding-right: 6px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ke-me-inp {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 12px;
  background: transparent;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.ke-me-inp:focus { border-color: var(--primary); background: #fff; }
.ke-me-formel { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 12px; }
.ke-me-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
}
.ke-me-del:hover { background: #fee2e2; color: #dc2626; }
.ke-me-hint {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--border-light);
  background: #fafafa;
  flex-shrink: 0;
}
.ke-me-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-light);
  background: #f8fafc;
  flex-shrink: 0;
}
.ke-me-sum-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.ke-me-sum-unit  { color: var(--muted); font-size: 11px; }
.ke-me-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  min-width: 64px;
  text-align: right;
  margin-left: auto;
}
.ke-me-apply {
  padding: 5px 14px;
  border: none;
  border-radius: 5px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ke-me-apply:hover { filter: brightness(1.1); }

/* Spalte ausblenden — wirkt auf <col>, <th>, <td> mit data-col */
.ke-col-hidden { display: none !important; }

/* Langtext-Vorschau unter Bezeichnung */
.ke-cell-lt {
  margin-top: 3px;
  font-size: 11px; color: #6b7280; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: text;
}
.ke-cell-lt.empty { color: #cbd5e1; font-style: italic; }
.ke-cell-lt:hover { color: #1f2937; }

/* Textarea für Langtext-Edit */
.ke-edit-textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 4px;
  font: inherit; font-size: 12px; line-height: 1.5;
  border: 1px solid #2563eb; border-radius: 4px;
  padding: 6px 8px; resize: vertical; min-height: 48px;
  background: #fff; color: var(--text);
  outline: none;
}
.ke-toolbar-icon {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1px solid var(--border-mid); border-radius:7px;
  cursor:pointer; background:#fff; color:var(--muted);
}
.ke-toolbar-icon:hover { background:#f3f4f6; color:var(--text); }
.ke-btn-export {
  background:var(--text) !important; color:#fff !important; border-color:var(--text) !important;
  font-weight:600;
}
.ke-btn-export:hover { opacity:0.88; }
.ke-btn-danger {
  color:#dc2626 !important; border-color:#fca5a5 !important;
}
.ke-btn-danger:hover { background:#fef2f2 !important; }
.ke-chevron { font-size:10px; margin-left:2px; }

/* ── Dropdown ────────────────────────────────────────────── */
.ke-dropdown-wrap { position:relative; }
.ke-dropdown-menu {
  position:absolute; top:100%; left:0; margin-top:4px; background:#fff;
  border:1px solid var(--border-mid); border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:50;
  min-width:130px; padding:4px 0; overflow:hidden;
}
.ke-dropdown-item {
  padding:7px 16px; cursor:pointer; font-size:0.82rem; color:var(--text);
}
.ke-dropdown-item:hover { background:#f3f4f6; }
.ke-dropdown-item.active { background:rgba(0,113,227,0.08); color:var(--primary); font-weight:600; }

/* ── Tabs ────────────────────────────────────────────────── */
.ke-tabs { display:flex; gap:4px; }
.ke-tabs .ke-tab {
  padding:4px 12px; font-size:0.78rem; border-radius:6px;
  cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--muted);
}
.ke-tabs .ke-tab:hover { background:#f3f4f6; }
.ke-tabs .ke-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }

/* ── Suche ───────────────────────────────────────────────── */
.ke-search-wrap { display:flex; align-items:center; gap:4px; }
.ke-search-input {
  border:1px solid var(--border-mid); border-radius:7px; padding:5px 10px;
  font-size:0.82rem; width:150px; outline:none; transition:width 0.2s;
}
.ke-search-input:focus { border-color:var(--primary); width:200px; }

/* ── Tabelle ─────────────────────────────────────────────── */
.ke-table-wrap { overflow-x:auto; overflow-y:auto; flex:1; min-height:0; }
/* ── Bauteil/Gewerk Autocomplete ── */
#ke-ac-pop {
  position:fixed; z-index:2000;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.13);
  min-width:160px; max-height:220px; overflow-y:auto;
}
.ke-ac-item {
  padding:7px 10px 7px 14px; font-size:13px; cursor:pointer;
  border-bottom:1px solid var(--border); white-space:nowrap;
  color:var(--text); display:flex; align-items:center; gap:6px;
}
.ke-ac-item:last-child { border-bottom:none; }
.ke-ac-item:hover { background:#f0f7ff; }
.ke-ac-item.sel { background:#eff6ff; color:var(--primary); font-weight:500; }
.ke-ac-label { flex:1; }
.ke-ac-del {
  flex-shrink:0; font-size:14px; line-height:1; color:var(--muted);
  padding:0 2px; border-radius:3px; opacity:0;
  transition:opacity .1s;
}
.ke-ac-item:hover .ke-ac-del { opacity:1; }
.ke-ac-del:hover { color:var(--danger); background:#fee2e2; }
.ke-table { width:100%; border-collapse:collapse; font-size:0.82rem; table-layout: fixed; }
.ke-th {
  padding:7px 10px; font-size:0.7rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.04em;
  border-bottom:2px solid var(--border-mid); background:#fafbfc;
  white-space:nowrap;
  position:sticky; top:0; z-index:10;
}
/* Col-Resizer am rechten Rand jeder TH (sticky-TH bietet bereits Positionsbezug) */
.ke-col-resizer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 9px;
  cursor: col-resize;
  user-select: none;
  z-index: 11;
}
.ke-col-resizer::before {
  content: ''; position: absolute; right: 4px; top: 4px; bottom: 4px;
  width: 1px; background: var(--border-mid, #d1d5db); transition: background .12s, width .12s;
}
.ke-col-resizer:hover::before,
.ke-col-resizer.active::before { background: var(--primary, #2563eb); width: 2px; right: 3.5px; }
body.ke-col-resizing { cursor: col-resize !important; user-select: none !important; }
body.ke-col-resizing * { cursor: col-resize !important; }
/* TD-Inhalt darf nicht aus der Spalte ausbrechen wenn fix layout */
.ke-table td.ke-td { overflow: hidden; text-overflow: ellipsis; }
.ke-table td.ke-td .ke-cell-lt { white-space: normal; overflow: hidden; }
.ke-th-text { text-align:left; }
.ke-th-num { text-align:right; }
.ke-th-center { text-align:center; }
.ke-th[data-col="menge"] { min-width:88px; }

/* Zeilen */
.ke-row { transition:background 0.1s; }
.ke-row:hover { background:#f0f4ff !important; }

.ke-row-l1 { background:#fff; font-weight:600; }
.ke-row-l1-open { background:#fafafa; font-weight:600; }
.ke-row-l2 { background:#f8f9fb; font-weight:500; }
.ke-row-l3 { background:#fff; font-weight:400; color:#4b5563; }
.ke-row-eventual { opacity:0.5; font-style:italic; }

/* Inline-Eingabezeile */
.ke-row-inline { background:#fffde7; }
.ke-row-inline td { padding:4px 6px; border-bottom:1px solid #eef0f3; }
.ke-inline-input {
  border:1px solid var(--border); border-radius:2px; padding:4px 6px;
  font-size:0.82rem; outline:none; width:100%; box-sizing:border-box;
  background:#fff; color:var(--text); font-family:inherit;
}
.ke-inline-input:focus { border-color:var(--primary); background:#f8faff; }
/* Nummer-Felder: rechts ausgerichtet, ohne Spinner */
.ke-inline-num { width:80px; text-align:right; }
.ke-inline-num::-webkit-outer-spin-button,
.ke-inline-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ke-inline-num[type=number] { -moz-appearance:textfield; }
.ke-inline-select {
  border:1px solid var(--border); border-radius:2px; padding:4px 6px;
  font-size:0.82rem; outline:none; background:#fff; color:var(--text); font-family:inherit;
}

/* Zellen */
.ke-td { padding:8px 10px; border-bottom:1px solid #eef0f3; white-space:nowrap; line-height:1.3; height:34px; box-sizing:border-box; }
.ke-td-num { text-align:right; font-variant-numeric:tabular-nums; }
.ke-td-center { text-align:center; }

.ke-td-name { min-width:280px; position:relative; }
.ke-td-name .ke-toggle {
  cursor:pointer; display:inline-flex; align-items:center;
  color:var(--muted); margin-right:4px; vertical-align:middle;
}
.ke-td-name .ke-kg { color:var(--muted); margin-right:6px; font-weight:500; font-size:0.75rem; }

/* + Position Button */
.ke-td-name .ke-pos-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:5px; border:1px solid var(--border-mid);
  cursor:pointer; opacity:0; transition:opacity 0.15s; color:var(--text);
  background:#fff; font-size:0.78rem; margin-left:10px; vertical-align:middle;
  font-weight:500;
}
.ke-row:hover .ke-pos-btn { opacity:1; }
.ke-pos-btn:hover { background:#f3f4f6; border-color:var(--border-mid); }

/* Drei-Punkte-Menü */
.ke-td-name .ke-more-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px; border:1px solid transparent;
  cursor:pointer; opacity:0; transition:opacity 0.15s; color:var(--muted);
  background:transparent; font-size:14px; margin-left:4px; vertical-align:middle;
}
.ke-row:hover .ke-more-btn { opacity:0.6; }
.ke-more-btn:hover { opacity:1 !important; background:#f0f0f5; border-color:var(--border); }

/* Context-Menü */
.ke-context-menu {
  position:absolute; top:100%; left:0; margin-top:2px;
  background:#fff; border:1px solid var(--border-mid); border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.12); z-index:60;
  min-width:170px; padding:4px 0; font-weight:400;
}
.ke-context-item {
  padding:7px 14px; cursor:pointer; font-size:0.82rem; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.ke-context-item:hover { background:#f3f4f6; }
.ke-context-item.danger { color:#dc2626; }
.ke-context-item.danger:hover { background:#fef2f2; }
.ke-context-sep { height:1px; background:var(--border); margin:4px 0; }
.ke-context-has-sub { position:relative; }
.ke-color-sub {
  position:absolute; left:100%; top:0; margin-left:2px;
  background:#fff; border:1px solid var(--border-mid); border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.12); z-index:61;
  min-width:130px; padding:4px 0;
}
.ke-color-dot {
  display:inline-block; width:14px; height:14px; border-radius:4px;
  font-size:9px; line-height:14px; text-align:center;
}

/* Alte add-btn (für Subgroups-Ebene) */
.ke-td-name .ke-add-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:4px; border:1px solid transparent;
  cursor:pointer; opacity:0; transition:opacity 0.15s; color:var(--muted);
  background:transparent; font-size:14px; margin-left:6px; vertical-align:middle;
}
.ke-row:hover .ke-add-btn { opacity:0.5; }
.ke-add-btn:hover { opacity:1 !important; background:#f0f0f5; border-color:var(--border); }

/* Summenzeilen */
.ke-row-sum { font-weight:600; background:#f9fafb; }
.ke-row-sum-bold { font-weight:700; background:#f3f4f6; }
.ke-row-sum td { border-top:2px solid var(--text); }

/* Leerer Zustand */
.ke-empty { text-align:center; padding:60px 20px !important; color:var(--muted); font-size:0.9rem; }

/* ── Footer ──────────────────────────────────────────────── */
.ke-footer {
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  padding:8px 16px; border-top:1px solid var(--border);
  background:var(--surface); font-size:0.78rem; color:var(--muted);
  flex-shrink:0;
}
.ke-footer strong { color:var(--text); font-weight:700; }
.ke-footer-row { display:flex; align-items:center; gap:16px; }
.ke-footer-kw-row { gap:20px; color:var(--primary); font-weight:600; font-size:0.76rem; }

/* ── Views / Navigation ─────────────────────────────────── */
.ke-view { }
/* Tabellenansicht: fixe Höhe → Toolbar oben fix, Footer unten fix, Tabelle scrollt */
#ke-view-table {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h));
}
#ke-migrate-banner { flex-shrink: 0; }
/* Verhindert äußeres Scrollen wenn Kosten-Tabelle aktiv ist */
body.ke-table-active { overflow: hidden; }
.ke-view-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:12px; padding:32px 24px 0;
}
.ke-subtitle { color:var(--muted); font-size:0.88rem; margin:6px 0 0; padding:0 24px; }
.ke-view-nav { padding:16px 24px 0; }

/* Zurück-Button */
.ke-back-btn {
  background:none; border:none; color:var(--primary); cursor:pointer;
  font-size:0.84rem; padding:0; display:flex; align-items:center; gap:4px;
}
.ke-back-btn:hover { text-decoration:underline; }

/* Breadcrumb in Toolbar */
.ke-breadcrumb { font-size:0.82rem; display:flex; align-items:center; gap:6px; }
.ke-breadcrumb-nr { color:var(--muted); font-weight:500; }
.ke-breadcrumb-pname { color:var(--text); }
.ke-breadcrumb-arrow { color:var(--muted); }
.ke-breadcrumb-name { color:var(--text); font-weight:600; cursor:pointer; padding:2px 6px; border-radius:4px; transition:background 0.15s; }
.ke-meta-pill {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 2px 8px;
  background: #f3f4f6; color: var(--muted, #6b7280);
  border-radius: 999px; font-size: 11px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background .15s, color .15s;
}
.ke-meta-pill:hover { background: #e0e7ff; color: var(--primary, #4338ca); }
.ke-breadcrumb-name:hover { background:var(--surface); }
.ke-toolbar-sep { color:var(--border); margin:0 4px; }
.ke-bez-source-wrap { display:flex; align-items:center; gap:6px; position:relative; }

/* Stammdaten-Toggle – gleicher Stil wie ke-bauteil-btn, aktiv = blau */
.ke-bez-sw {
  background:none; border:1px solid var(--border); border-radius:4px;
  padding:3px 12px; font-size:12px; cursor:pointer; color:var(--muted);
  transition:all 0.15s; font-weight:600; display:inline-flex; align-items:center; gap:5px;
  font-family:inherit; white-space:nowrap;
}
.ke-bez-sw:hover { background:#eff6ff; color:var(--primary); border-color:#93c5fd; }
.ke-bez-sw.on { background:#eff6ff; color:var(--primary); border-color:#93c5fd; }

/* Info-Tooltip bei Hover */
.ke-bez-info {
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid var(--border);
  border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  padding:10px 13px; font-size:0.78rem; line-height:1.45;
  color:var(--text); white-space:normal; width:260px; z-index:200;
  opacity:0; pointer-events:none;
  transition:opacity .15s;
}
.ke-bez-info::before {
  content:''; position:absolute; top:-6px; left:18px;
  width:10px; height:10px; background:#fff;
  border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform:rotate(45deg);
}
.ke-bez-source-wrap:hover .ke-bez-info { opacity:1; }

/* Meine/Alle Toggle – animierter Sliding-Pill (wie bzp-seg) */
.ke-toggle-wrap {
  position:relative;
  display:flex; align-items:center; gap:0;
  background:var(--border); border-radius:8px; padding:3px; flex-shrink:0;
}
.ke-toggle-wrap::before {
  content:''; position:absolute;
  top:3px; bottom:3px; left:3px;
  width:calc(50% - 3px);
  background:var(--surface);
  border-radius:6px;
  box-shadow:0 1px 3px rgba(15,23,42,.12), 0 1px 1px rgba(15,23,42,.04);
  transition:left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index:0; pointer-events:none;
}
/* Zweiter Knopf aktiv → Pill nach rechts gleiten lassen.
   Funktioniert mit :has() (Safari 15.4+, Chromium 105+). Wenn :has() nicht
   unterstützt wird, bleibt der Pill links — der Button-Text-Wechsel zeigt
   dennoch den Zustand an. */
.ke-toggle-wrap:has(> .ke-toggle-btn:nth-child(2).active)::before { left:50%; }
.ke-toggle-btn {
  position:relative; z-index:1;
  padding:6px 18px; border-radius:6px; border:none; cursor:pointer;
  font-size:0.82rem; font-weight:400;
  background:transparent; color:var(--muted);
  transition:color .22s cubic-bezier(.5,0,.2,1), font-weight .22s;
}
.ke-toggle-btn.active {
  background:transparent; color:var(--text); font-weight:600;
}

/* Card Grid */
.ke-card-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:16px; padding:20px 24px;
}

/* Projekt-Karte */
.ke-card {
  background:var(--surface); border-radius:10px; padding:20px 22px;
  cursor:pointer; border:1.5px solid var(--border);
  transition:all 0.15s; box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.ke-card:hover {
  border-color:var(--primary); box-shadow:0 2px 12px rgba(108,140,255,0.15);
}
.ke-card-nr { font-size:0.75rem; color:var(--muted); margin-bottom:6px; }
.ke-card-name { font-weight:600; font-size:0.95rem; color:var(--text); margin-bottom:12px; }
.ke-card-meta {
  display:flex; align-items:center; gap:8px;
  font-size:0.8rem; color:var(--muted);
}
.ke-card-meta svg { flex-shrink:0; }

/* Schätzungs-Karte */
.ke-est-card {
  background:var(--surface); border-radius:10px; padding:20px 22px;
  cursor:pointer; border:1.5px solid var(--border);
  transition:all 0.15s; box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.ke-est-card:hover {
  border-color:var(--primary); box-shadow:0 2px 12px rgba(108,140,255,0.15);
}
.ke-est-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.ke-est-card-name { font-weight:600; font-size:0.95rem; color:var(--text); }
.ke-est-card-date { font-size:0.78rem; color:var(--muted); margin-top:3px; }
.ke-est-card-badge {
  font-size:0.7rem; font-weight:600; padding:3px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:0.03em;
}
.ke-est-card-badge.aktiv { background:#e8f5e9; color:#2e7d32; }
.ke-est-card-badge.entwurf { background:#fff3e0; color:#e65100; }
.ke-est-card-badge.freigegeben { background:#e3f2fd; color:#1565c0; }
.ke-est-card-badge.archiviert { background:#f5f5f5; color:#757575; }
.ke-est-card-total { font-size:1.25rem; font-weight:700; color:var(--text); margin-top:12px; letter-spacing:-0.01em; }
.ke-est-card-type { font-size:0.78rem; color:var(--muted); margin-top:4px; }

/* Neue Schätzung Karte */
.ke-new-card {
  background:rgba(108,140,255,0.03); border-radius:10px; padding:20px 22px;
  cursor:pointer; border:1.5px dashed rgba(108,140,255,0.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:140px; transition:all 0.15s;
}
.ke-new-card:hover { border-color:var(--primary); background:rgba(108,140,255,0.06); }
.ke-new-card-icon {
  width:44px; height:44px; border-radius:50%;
  background:rgba(108,140,255,0.1); display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.ke-new-card-label { font-weight:600; font-size:0.9rem; color:var(--primary); }
.ke-new-card-sub { font-size:0.78rem; color:var(--muted); margin-top:4px; }

/* ── Netto/Brutto Toggle ─────────────────────────────────── */
.ke-nb-toggle {
  position:relative; display:flex;
  background:#f3f4f6; border:1px solid var(--border-mid); border-radius:8px;
  padding:2px; gap:0;
}
.ke-nb-toggle::before {
  content:''; position:absolute;
  top:2px; bottom:2px; left:2px;
  width:calc(50% - 2px);
  background:var(--primary); border-radius:6px;
  box-shadow:0 1px 3px rgba(37,99,235,.25);
  transition:transform 0.22s cubic-bezier(.4,0,.2,1);
}
.ke-nb-toggle.brutto::before { transform:translateX(100%); }
.ke-nb-btn {
  -webkit-appearance:none; appearance:none;
  position:relative; z-index:1;
  flex:1; height:26px; padding:0 13px; margin:0;
  font-size:0.82rem; font-weight:500; cursor:pointer;
  border:none; background:transparent; color:var(--muted);
  font-family:inherit; border-radius:6px;
  transition:color 0.22s; white-space:nowrap;
}
.ke-nb-btn.on { color:#fff; font-weight:600; }
.ke-nb-btn:hover:not(.on) { color:var(--text); }

/* Projekt-Nr über Titel */
.ke-project-nr { display:block; font-size:0.82rem; color:var(--muted); margin:0 0 2px; }

/* ── Viewmode-Buttons (DIN 276 Level + Gewerke) ─────────── */
.ke-viewmode-wrap {
  display:flex; align-items:center; gap:4px;
}
.ke-viewmode-label {
  font-size:11px; color:var(--muted); margin-right:4px; font-weight:500;
}
.ke-level-btn, .ke-gewerke-btn {
  background:none; border:1px solid var(--border); border-radius:4px;
  padding:3px 10px; font-size:12px; cursor:pointer; color:var(--muted);
  transition:all 0.15s; font-weight:500;
}
.ke-level-btn:hover, .ke-gewerke-btn:hover {
  background:var(--surface2); color:var(--text);
}
.ke-level-btn.active {
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.ke-gewerke-btn {
  margin-left:8px; padding:3px 14px;
}
.ke-gewerke-btn.active {
  background:var(--primary); color:#fff; border-color:var(--primary);
}

/* Bauteil-Toggle */
.ke-bauteil-btn {
  background:none; border:1px solid var(--border); border-radius:4px;
  padding:3px 12px; font-size:12px; cursor:pointer; color:var(--muted);
  transition:all 0.15s; font-weight:600; display:inline-flex; align-items:center; gap:5px;
}
.ke-bauteil-btn:hover { background:#eff6ff; color:#1d4ed8; border-color:#93c5fd; }
.ke-bauteil-btn.active { background:#eff6ff; color:#1d4ed8; border-color:#93c5fd; }

/* Bauteil-Gruppen-Header */
.ke-row-bauteil-header { background:#eff6ff; border-bottom:1px solid #dbeafe; border-left:3px solid #93c5fd; }
.ke-row-bauteil-header:hover { background:#dbeafe; }

/* ── Steuerelemente (+ / Dreiecke / Drag) ────────────────── */
.ke-td-ctrl { padding:4px 2px !important; width:44px; }
.ke-ctrl-wrap {
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.ke-add-btn {
  background:none; border:1px solid var(--border); border-radius:4px;
  width:20px; height:20px; font-size:14px; line-height:18px;
  cursor:pointer; color:var(--muted); transition:opacity 0.15s;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  opacity:0;
}
.ke-row:hover .ke-add-btn, .ke-row-hover .ke-add-btn { opacity:1; }
.ke-add-btn:hover { border-color:var(--primary); color:var(--primary); }

.ke-collapse-btn {
  width:16px; text-align:center; cursor:pointer; flex-shrink:0;
  user-select:none; color:var(--muted);
}
.ke-collapse-btn:hover { color:var(--text); }

.ke-drag-handle {
  width:16px; text-align:center; cursor:move; flex-shrink:0;
  color:var(--muted); font-size:14px; opacity:0;
  transition:opacity 0.15s; user-select:none;
}
.ke-row:hover .ke-drag-handle, .ke-row-hover .ke-drag-handle { opacity:0.6; }
.ke-drag-handle:hover { opacity:1 !important; }

/* ── Lösch-Button ────────────────────────────────────────── */
.ke-del-btn {
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:16px; font-weight:700;
  opacity:0; transition:opacity 0.15s; padding:2px 6px;
}
.ke-row:hover .ke-del-btn, .ke-row-hover .ke-del-btn { opacity:0.7; }
.ke-del-btn:hover { color:var(--danger); opacity:1 !important; }

/* ── Kontextmenü-Button (⋮) ─────────────────────────────── */
.ke-ctx-btn {
  background:none; border:1px solid transparent; border-radius:4px; cursor:pointer;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:14px; font-weight:700; padding:0;
  opacity:0; transition:all 0.15s;
}
.ke-row:hover .ke-ctx-btn, .ke-row-hover .ke-ctx-btn { opacity:0.6; }
.ke-ctx-btn:hover { opacity:1 !important; background:var(--surface2); border-color:var(--border); color:var(--text); }

/* ── Kontextmenü ─────────────────────────────────────────── */
.ke-context-menu {
  position:fixed; z-index:1000;
  background:#fff; border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  padding:6px 0; min-width:240px; font-size:14px;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ke-ctx-item {
  display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer;
  color:#1a1a1a; transition:background 0.1s; position:relative;
}
.ke-ctx-item svg { flex-shrink:0; color:#6b7280; }
.ke-ctx-item:hover { background:#f3f4f6; }
.ke-ctx-item-danger { color:#ef4444; }
.ke-ctx-item-danger svg { color:#ef4444; }
.ke-ctx-item-danger:hover { background:#fef2f2; }
.ke-ctx-sep { border-top:1px solid #e5e7eb; margin:4px 0; }

/* Farb-Submenu */
.ke-ctx-item-color { position:relative; }
.ke-ctx-color-panel {
  position:absolute; left:100%; top:-4px; margin-left:4px;
  background:#fff; border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  padding:10px 12px; min-width:180; z-index:1001;
}
.ke-ctx-color-label {
  font-size:11px; color:#9ca3af; font-weight:500; margin-bottom:8px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.ke-ctx-color-dots { display:flex; gap:6px; flex-wrap:wrap; }
.ke-ctx-color-dot {
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform 0.1s, border-color 0.15s;
}
.ke-ctx-color-dot:hover { transform:scale(1.15); }

/* ── Angebots-Picker (KG 700) ───────────────────────────── */
.ke-offer-card {
  border:1px solid #e5e7eb; border-radius:10px; padding:14px 18px;
  margin-bottom:10px; cursor:pointer; transition:all 0.15s;
}
.ke-offer-card:hover { border-color:#93c5fd; background:#f0f9ff; box-shadow:0 2px 8px rgba(37,99,235,0.1); }
.ke-offer-linked { border-style:dashed; opacity:0.65; }
.ke-offer-linked:hover { opacity:0.85; }

/* ── Eventualposition (EP) ───────────────────────────────── */
.ke-ep-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:#f3f4f6; color:#6b7280; font-size:9px; font-weight:700;
  padding:1px 5px; border-radius:3px; letter-spacing:0.5px;
  border:1px solid #d1d5db; flex-shrink:0; vertical-align:middle;
}
.ke-row-ep { opacity:0.7; }
.ke-row-ep:hover { opacity:0.85; }

/* ── Bezugswert-Popup (%-Positionen) ─────────────────────── */
.ke-bw-info-btn {
  background:none; border:none; cursor:pointer; color:#6366f1;
  padding:1px; border-radius:3px; display:inline-flex; align-items:center;
  vertical-align:middle; margin-left:3px; transition:background 0.15s;
}
.ke-bw-info-btn:hover { background:#eef2ff; }
.ke-td-ep-pct .ke-ep-pct-wrap {
  display:flex; align-items:center; gap:4px;
  justify-content:flex-end;
}
.ke-bw-ref-badge {
  display:inline-flex; align-items:center; gap:4px; margin-top:2px;
  font-size:10px; color:#6366f1; background:#eef2ff;
  padding:1px 7px; border-radius:3px; border:1px solid #c7d2fe;
  line-height:1.3;
}
.ke-bw-popup {
  background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  border:1px solid #e5e7eb; width:360px; overflow:hidden;
  animation:ke-bw-popup-in 0.15s ease-out;
}
@keyframes ke-bw-popup-in {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); }
}
.ke-bw-popup-title {
  padding:14px 16px 2px; font-size:13px; font-weight:700; color:#1f2937;
}
.ke-bw-popup-subtitle {
  padding:0 16px 10px; font-size:11px; color:#9ca3af;
}
.ke-bw-popup-list {
  max-height:380px; overflow-y:auto; padding:0 6px 6px;
}
.ke-bw-popup-divider {
  border-top:1px solid #e5e7eb; margin:4px 10px;
}
.ke-bw-popup-item {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:9px 12px; border:none; background:none; cursor:pointer;
  border-radius:8px; text-align:left; font-size:13px; color:#374151;
  transition:background 0.1s;
}
.ke-bw-popup-item:hover { background:#f3f4f6; }
.ke-bw-popup-item.active { background:#eef2ff; color:#4338ca; }
.ke-bw-popup-item-left { flex:1; min-width:0; }
.ke-bw-popup-item-label { font-weight:500; }
.ke-bw-popup-item-desc { font-size:11px; color:#9ca3af; margin-top:1px; }
.ke-bw-popup-item.active .ke-bw-popup-item-desc { color:#818cf8; }
.ke-bw-popup-item-right {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.ke-bw-popup-item-sum {
  font-size:12px; font-weight:500; color:#6b7280;
  font-variant-numeric:tabular-nums;
}
.ke-bw-popup-item.active .ke-bw-popup-item-sum { color:#6366f1; }

/* ── PDF-Export-Dialog ───────────────────────────────────── */
.ke-pdf-section { margin-bottom:20px; }
.ke-pdf-section-title {
  font-size:12px; font-weight:700; color:var(--text); margin-bottom:8px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.ke-pdf-sublabel { font-size:11px; color:var(--muted); margin-bottom:6px; font-weight:500; }
.ke-pdf-chips { display:flex; gap:6px; flex-wrap:wrap; }
.ke-pdf-chip {
  padding:6px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border); background:#fff; color:var(--text);
  transition:all 0.15s;
}
.ke-pdf-chip:hover { border-color:var(--primary); color:var(--primary); }
.ke-pdf-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.ke-pdf-check {
  display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px;
  color:var(--text); cursor:pointer; user-select:none;
}
.ke-pdf-check input[type="checkbox"],
.ke-pdf-check input[type="radio"] { accent-color:var(--primary); margin:0; }
.ke-pdf-pflicht { font-size:10px; color:var(--muted); margin-left:auto; }
.ke-pdf-hint { font-size:11px; color:var(--muted); }

/* ── Inline-Editing ──────────────────────────────────────── */
.ke-td:has(.ke-edit-input) { padding:3px 6px; }
.ke-edit-input {
  width:100%; padding:3px 6px;
  border:2px solid var(--primary); border-radius:2px;
  font-size:13px; outline:none; background:#eff6ff;
  box-sizing:border-box; font-family:inherit; display:block;
}
.ke-edit-input:focus { box-shadow:0 0 0 2px rgba(59,130,246,0.15); }

select.ke-edit-input { padding:2px 2px; }

/* ── KG-Spalte fixiert ──────────────────────────────────── */
.ke-td-kg { max-width:150px; overflow:hidden; text-overflow:ellipsis; }
select.ke-select-kg { max-width:142px; }

/* ── Row-Hover & Drag-Drop ───────────────────────────────── */
.ke-row-hover { background:var(--surface) !important; }
.ke-row-l1 { background:#f8f9fa; border-bottom:1px solid #e5e7eb; }
.ke-row-l2 { background:#fcfcfd; border-bottom:1px solid #f0f0f0; }
.ke-row-l3 { border-bottom:1px solid #f3f4f6; }
.ke-row-l3-header { background:#f9fafb; border-bottom:1px solid #f0f0f0; }
.ke-row-gw-header { background:#f8f9fa; border-bottom:1px solid #e5e7eb; }
.ke-drop-target { background:#dbeafe !important; }
.ke-drop-above { border-top:2px solid var(--primary) !important; }
.ke-drop-below { border-bottom:2px solid var(--primary) !important; }

/* ── Gewerke-Ansicht Header ──────────────────────────────── */
.ke-row-gw-header td { padding:10px 8px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:900px) {
  .ke-toolbar { padding:8px 10px; }
  .ke-title { font-size:0.95rem; }
  .ke-select { min-width:140px; }
  .ke-view-header { padding:20px 16px 0; }
  .ke-card-grid { padding:16px; }
  .ke-subtitle { padding:0 16px; }
}


/* ═══════════════════════════════════════════════════════════ */
/* Angebote & Rechnungen                                       */
/* ═══════════════════════════════════════════════════════════ */

/* Summary Cards */
.ang-summary-cards {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;
}
.ang-summary-card {
  background:#fff; border-radius:12px; padding:14px 18px;
  border:1px solid var(--border); display:flex; align-items:center; gap:12px;
}
.ang-summary-icon {
  width:38px; height:38px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.ang-summary-label {
  font-size:11px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.ang-summary-value {
  font-size:16px; font-weight:700; color:var(--text); margin-top:1px;
  font-variant-numeric:tabular-nums;
}

/* Tabs */
.ang-tabs { display:flex; gap:0; }
.ang-tab {
  padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
  border:none; border-bottom:2px solid transparent;
  background:none; color:var(--muted); transition:all 0.15s;
}
.ang-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.ang-tab-count {
  margin-left:5px; padding:1px 7px; border-radius:10px; font-size:11px;
  background:#f3f4f6; color:var(--muted);
}
.ang-tab.active .ang-tab-count { background:#eff6ff; color:var(--primary); }

/* Filters */
.ang-filters { display:flex; gap:5px; }
.ang-filter-btn {
  padding:4px 11px; border-radius:6px; font-size:12px; font-weight:500;
  cursor:pointer; border:1.5px solid var(--border); background:#fff; color:#6b7280;
  transition:all 0.15s;
}
.ang-filter-btn.active { border-color:var(--primary); background:#eff6ff; color:var(--primary); }

/* Status Badges */
.ang-status { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.ang-status-dot { width:6px; height:6px; border-radius:3px; }

.ang-status-entwurf    { background:#f3f4f6; color:#6b7280; }
.ang-status-entwurf .ang-status-dot { background:#9ca3af; }
.ang-status-offen      { background:#eff6ff; color:#2563eb; }
.ang-status-offen .ang-status-dot { background:#3b82f6; }
.ang-status-beauftragt { background:#f0fdf4; color:#16a34a; }
.ang-status-beauftragt .ang-status-dot { background:#22c55e; }
.ang-status-abgelehnt  { background:#fef2f2; color:#dc2626; }
.ang-status-abgelehnt .ang-status-dot { background:#ef4444; }
.ang-status-abgeschlossen { background:#f5f3ff; color:#7c3aed; }
.ang-status-abgeschlossen .ang-status-dot { background:#8b5cf6; }
.ang-status-bezahlt    { background:#f0fdf4; color:#16a34a; }
.ang-status-bezahlt .ang-status-dot { background:#22c55e; }
.ang-status-ueberfaellig { background:#fef2f2; color:#dc2626; }
.ang-status-ueberfaellig .ang-status-dot { background:#ef4444; }
.ang-status-storniert  { background:#f3f4f6; color:#6b7280; }
.ang-status-storniert .ang-status-dot { background:#9ca3af; }

/* Progress Bar */
.ang-progress { display:flex; align-items:center; gap:8px; }
.ang-progress-bar { flex:1; height:6px; border-radius:3px; background:#f0f0f2; overflow:hidden; }
.ang-progress-fill { height:100%; border-radius:3px; background:var(--primary); transition:width 0.3s; }
.ang-progress-fill.full { background:#22c55e; }
.ang-progress-pct { font-size:11px; color:var(--muted); white-space:nowrap; }

/* Table */
.ang-table { width:100%; border-collapse:collapse; font-size:13px; }
.ang-table th {
  padding:9px 14px; text-align:left; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:0.04em;
  border-bottom:2px solid var(--border); background:#fafbfc;
}
.ang-table th.right { text-align:right; }
.ang-table td { padding:11px 14px; border-bottom:1px solid #f0f0f2; }
.ang-table td.right { text-align:right; }
.ang-table td.num { font-variant-numeric:tabular-nums; font-weight:600; }
.ang-table tbody tr { cursor:pointer; transition:background 0.1s; }
.ang-table tbody tr:hover { background:#f8fafc; }
.ang-table .ang-link { font-weight:600; color:var(--primary); }
.ang-table .ang-sub { font-size:11px; color:var(--muted); }

/* Editor Header (sticky) */
.ang-editor-header {
  background:#fff; border-bottom:1px solid var(--border); padding:12px 28px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:20;
}
.ang-back-btn {
  display:flex; align-items:center; gap:5px; padding:5px 13px; border-radius:8px;
  border:1.5px solid var(--border); background:#fff; font-size:13px; font-weight:600;
  cursor:pointer; color:var(--text);
}

/* Positions Table in Editor */
.ang-pos-table { width:100%; border-collapse:collapse; font-size:13px; }
.ang-pos-table th {
  padding:8px 14px; text-align:left; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:0.04em;
  border-bottom:2px solid var(--border); background:#fafbfc;
}
.ang-pos-table td { padding:10px 14px; border-bottom:1px solid #f0f0f2; }
.ang-pos-type {
  padding:2px 6px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase;
}
.ang-pos-type-hoai { background:#eff6ff; color:var(--primary); }
.ang-pos-type-pos  { background:#f3f4f6; color:#6b7280; }
.ang-pos-type-std  { background:#fef3c7; color:#d97706; }
.ang-pos-type-gruppe  { background:#f0fdf4; color:#16a34a; }
.ang-pos-type-freitext { background:#f5f3ff; color:#7c3aed; }

/* Summenbereich */
.ang-sums { background:#fafbfc; border-top:2px solid var(--text); }
.ang-sum-row { display:flex; align-items:center; justify-content:space-between; padding:9px 20px; }
.ang-sum-row + .ang-sum-row { border-top:1px solid var(--border); }
.ang-sum-row.bold { border-top:2px solid var(--text); }
.ang-sum-label { font-size:13px; color:var(--text); }
.ang-sum-label-bold { font-size:14px; font-weight:700; color:var(--text); }
.ang-sum-value { font-size:13px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; min-width:130px; text-align:right; }
.ang-sum-value-bold { font-size:15px; font-weight:700; }
.ang-sum-value-big  { font-size:17px; font-weight:700; }
.ang-sum-input { width:60px; padding:4px 8px; border:1.5px solid var(--border); border-radius:6px; text-align:center; font-size:13px; }

/* Add Menu */
.ang-add-menu {
  position:absolute; top:100%; right:0; margin-top:6px; background:#fff;
  border-radius:12px; border:1px solid var(--border); box-shadow:0 8px 30px rgba(0,0,0,0.12);
  width:280px; z-index:30; overflow:hidden;
}
.ang-add-item {
  display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer;
  border-bottom:1px solid #f0f0f2; transition:background 0.1s;
}
.ang-add-item:last-child { border-bottom:none; }
.ang-add-item:hover { background:#f8fafc; }
.ang-add-icon { font-size:17px; width:30px; text-align:center; }
.ang-add-label { font-size:13px; font-weight:600; color:var(--text); }
.ang-add-desc { font-size:11px; color:var(--muted); }

/* HOAI Wizard Stepper */
/* ── HOAI Wizard Slide Viewport ───────────────────────────── */
.hoai-wiz-viewport {
  height:800px; overflow:hidden; position:relative;
}
.hoai-wiz-track {
  display:flex; width:400%; height:100%;
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hoai-wiz-page {
  width:25%; height:100%; overflow-y:auto; padding:20px; flex-shrink:0;
}

.hoai-stepper {
  display:flex; padding:16px 20px; border-bottom:1px solid var(--border); gap:4px;
}
.hoai-step {
  flex:1; text-align:center; cursor:pointer; padding-bottom:8px;
  border-bottom:2px solid transparent; transition:all 0.15s;
}
.hoai-step.active { border-bottom-color:var(--primary); }
.hoai-step.done   { border-bottom-color:var(--primary); opacity:0.5; }
.hoai-step-label { font-size:11px; font-weight:600; color:var(--muted); }
.hoai-step.active .hoai-step-label { color:var(--primary); }
.hoai-step.done .hoai-step-label   { color:var(--primary); }

/* HOAI Wizard content */
.hoai-lb-card {
  display:flex; align-items:flex-start; gap:12px; padding:11px 14px;
  border-radius:10px; cursor:pointer; transition:all 0.15s;
  border:1.5px solid var(--border); background:#fff; margin-bottom:6px;
}
.hoai-lb-card.selected { border-color:var(--primary); background:#eff6ff; }
.hoai-lb-radio {
  width:16px; height:16px; border-radius:8px; margin-top:3px; flex-shrink:0;
  box-sizing:border-box; border:2px solid #d2d2d7; background:#fff;
}
.hoai-lb-card.selected .hoai-lb-radio { border:5px solid var(--primary); }
.hoai-lb-par { font-size:13px; font-weight:700; color:var(--primary); }
.hoai-lb-name { font-size:13px; font-weight:600; color:var(--text); }
.hoai-lb-info { font-size:12px; color:#6b7280; margin-top:3px; line-height:1.5; }

.hoai-hz-card {
  flex:1; padding:12px; border-radius:10px; cursor:pointer; text-align:center;
  border:1.5px solid var(--border); background:#fff; transition:all 0.15s;
}
.hoai-hz-card.selected { border-color:var(--primary); background:#eff6ff; }
.hoai-hz-nr { font-size:18px; font-weight:800; color:var(--text); }
.hoai-hz-card.selected .hoai-hz-nr { color:var(--primary); }
.hoai-hz-label { font-size:10px; color:var(--muted); margin-top:4px; }

/* ── HOAI Info-Icon (Mouseover-Tooltip) ──────────────────── */
.hoai-info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid #9ca3af;
  background:none;
  font-size:10px; font-weight:700; font-style:italic; font-family:Georgia,serif;
  color:#6b7280; cursor:help; flex-shrink:0;
  transition:all 0.15s;
}
.hoai-info-icon:hover { background:#eff6ff; border-color:var(--primary); color:var(--primary); }

/* Legacy: .hoai-info-btn bleibt für Rückwärtskompatibilität */
.hoai-info-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:8px; border:1.5px solid #d2d2d7;
  background:none; font-size:10px; color:#86868b; cursor:help; flex-shrink:0; padding:0;
}
.hoai-info-btn:hover { background:#f0f0f2; }

/* ── HOAI Mouseover-Tooltip ──────────────────────────────── */
.hoai-tooltip {
  position:fixed;
  z-index:1300;
  background:#1d1d1f;
  color:#e5e5ea;
  border-radius:10px;
  padding:12px 16px;
  font-size:12px;
  line-height:1.6;
  max-width:380px;
  box-shadow:0 8px 30px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  pointer-events:auto;
  animation:hoai-tip-in 0.12s ease;
}
@keyframes hoai-tip-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.hoai-tooltip b { color:#fff; font-weight:700; }
.hoai-tooltip a.hoai-tooltip-link {
  display:inline-block;
  margin-top:6px;
  color:#60a5fa;
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:6px;
}
.hoai-tooltip a.hoai-tooltip-link:hover { color:#93c5fd; text-decoration:underline; }

/* HOAI Info Overlay (Legacy Fallback) */
.hoai-info-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1100;
  display:flex; align-items:center; justify-content:center;
}
.hoai-info-box {
  background:#1d1d1f; color:#fff; border-radius:14px; padding:24px 28px;
  max-width:560px; max-height:80vh; overflow-y:auto;
}
.hoai-info-box h4 { margin:0 0 10px; font-size:15px; }
.hoai-info-box p  { margin:0; font-size:13px; line-height:1.7; color:#d2d2d7; }

/* HOAI Zuschläge/Nachlass Tabelle */
.hoai-sums-table {
  margin-top:16px; border-top:1px solid var(--border); padding-top:6px;
}
.hoai-sum-row {
  display:grid; grid-template-columns:1fr 140px 110px; align-items:center;
  padding:8px 4px; border-bottom:1px solid #f0f0f2; font-size:13px; gap:8px;
}
.hoai-sum-row.hoai-sum-bold { font-weight:700; border-bottom:1px solid #d4d4d8; }
.hoai-sum-val { text-align:right; font-variant-numeric:tabular-nums; color:#6b7280; }
.hoai-sum-val-bold { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }

/* ── KG-Dialog (Anrechenbare Kosten Detail) ────────────────── */
.hoai-kg-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);
  z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:hoai-kg-fadein 0.15s ease;
}
@keyframes hoai-kg-fadein { from { opacity:0; } to { opacity:1; } }
.hoai-kg-modal {
  background:var(--surface);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  width:100%;
  max-width:720px;
  max-height:88vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  animation:hoai-kg-slidein 0.18s ease;
}
@keyframes hoai-kg-slidein { from { transform:translateY(12px) scale(0.98); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.hoai-kg-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.015);
}
.hoai-kg-input {
  border:1px solid var(--border-mid);
  border-radius:6px;
  padding:4px 6px;
  font-size:12px;
  font-family:var(--font);
  background:#fff;
  outline:none;
  transition:border-color 0.15s;
}
.hoai-kg-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(0,113,227,0.12);
}
.hoai-kg-technik-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px;
  border-radius:12px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s;
}
.hoai-kg-technik-badge:hover { background:#bfdbfe; }

/* ── KG Inline (Step 2) ───────────────────────────────────── */
.hoai-kg-estimate-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:#fafbfc;
  border:1px solid var(--border);
  border-radius:10px 10px 0 0;
  border-bottom:none;
}
.hoai-kg-estimate-bar label {
  font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.hoai-kg-estimate-bar select {
  flex:1; font-size:12px; padding:5px 8px;
  border:1px solid var(--border); border-radius:6px; background:#fff;
  font-family:var(--font);
}
.hoai-kg-table-wrap {
  border:1px solid var(--border);
  border-radius:0 0 10px 10px;
  overflow:hidden;
  margin-bottom:0;
}
.hoai-kg-table-wrap.no-estimate {
  border-radius:10px;
}
.hoai-kg-table {
  width:100%; border-collapse:collapse; font-size:12px;
}
.hoai-kg-table thead th {
  padding:7px 8px; text-align:left;
  font-size:10px; font-weight:600; color:var(--muted);
  text-transform:uppercase; background:#fafbfc;
  border-bottom:2px solid var(--border);
}
.hoai-kg-table tfoot td {
  padding:8px; border-top:2px solid var(--text);
}
.hoai-kg-technik-hint {
  padding:10px 14px; border-radius:8px;
  background:#fffbeb; border:1px solid #fcd34d;
  font-size:12px; color:#92400e; margin-top:10px;
}

/* Invoice mini-cards in editor */
.ang-inv-card {
  display:flex; align-items:center; gap:14px; padding:9px 13px;
  border-radius:8px; border:1px solid var(--border); cursor:pointer;
  transition:background 0.1s; margin-bottom:6px;
}
.ang-inv-card:hover { background:#f8fafc; }

/* Section Title (reused pattern) */
.ang-section-title {
  font-size:12px; font-weight:700; color:var(--text); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:8px;
}
.ang-section-icon {
  width:26px; height:26px; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; flex-shrink:0;
}

/* Nachtrag rows */
.ang-nachtrag-row { background:#fffbeb; }
.ang-nachtrag-row:hover { background:#fef3c7 !important; }

/* Collapsible details in Summenbereich */
.ang-sums details summary {
  padding:10px 20px; font-size:13px; font-weight:600; color:var(--muted);
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:5px;
  border-top:1px solid var(--border); list-style:none;
}
.ang-sums details summary::-webkit-details-marker { display:none; }
.ang-sums details[open] summary svg { transform:rotate(180deg); }

/* ── Angebot Editor: Positions Redesign ──────────────────── */

/* Position item wrapper */
.ang-pos-item { border-bottom:1px solid #f0f0f0; }

/* Position row (HOAI header, POS/STD/GRP/TXT row) */
.ang-pos-row {
  display:flex; align-items:center; padding:10px 12px; cursor:pointer;
  gap:10px; transition:background 0.15s;
}
.ang-pos-row:hover { background:#fafafa; }

/* Drag handle */
.ang-drag { color:#d2d2d7; cursor:move; font-size:14px; flex-shrink:0; }

/* Position chevron (16px) */
.ang-pos-chev {
  width:16px; height:16px; color:var(--muted); transition:transform 0.2s; flex-shrink:0;
}
.ang-pos-chev.open { transform:rotate(90deg); }

/* Position title & subtitle */
.ang-pos-title { font-weight:600; font-size:13px; }
.ang-pos-subtitle { font-size:11px; color:var(--muted); margin-top:1px; }

/* Amount column */
.ang-pos-amount {
  font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap;
}

/* Action buttons */
.ang-pos-actions { display:flex; gap:4px; align-items:center; margin-left:8px; }
.ang-pos-actions button {
  background:none; border:none; cursor:pointer; color:var(--muted);
  padding:4px; border-radius:4px; font-size:13px; line-height:1;
}
.ang-pos-actions button:hover { background:#f3f4f6; color:var(--text); }

/* LP Detail table (inside HOAI) */
.ang-lp-detail { background:#fafbfc; }
.ang-lp-table { width:100%; border-collapse:collapse; font-size:12px; }
.ang-lp-table td { padding:7px 12px; border-bottom:1px solid #f0f0f0; vertical-align:top; }
.ang-lp-table tr:last-child td { border-bottom:none; }

/* LP number column */
.ang-lp-nr {
  font-weight:700; color:var(--primary); width:52px; white-space:nowrap;
  font-size:11px; padding-top:9px !important;
}

/* LP name cell */
.ang-lp-name-cell { /* flex container for name toggle + desc */ }

/* LP name toggle (click to expand desc) */
.ang-lp-name-toggle {
  display:flex; align-items:center; gap:4px; cursor:pointer; user-select:none;
}
.ang-lp-name-toggle:hover { color:var(--primary); }

/* LP name text */
.ang-lp-name { font-weight:600; font-size:12px; }

/* Mini chevron for LP rows (10px) */
.ang-lp-chev {
  width:10px; height:10px; color:var(--muted); transition:transform 0.2s; flex-shrink:0;
}
.ang-lp-chev.open { transform:rotate(90deg); }

/* LP description (hidden by default, contenteditable) */
.ang-lp-desc {
  font-size:11px; color:#555; line-height:1.45; margin-top:4px;
  display:none; padding:6px 8px; border:1px solid transparent; border-radius:4px;
  white-space:pre-wrap;
}
.ang-lp-desc.show { display:block; }
.ang-lp-desc:focus {
  outline:none; border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 2px rgba(0,113,227,0.12);
}

/* LP percentage, unit, base, total columns */
.ang-lp-pct { text-align:center; font-weight:600; width:55px; white-space:nowrap; }
.ang-lp-unit { text-align:center; color:var(--muted); width:75px; font-size:11px; }
.ang-lp-base { text-align:right; color:var(--muted); width:90px; font-variant-numeric:tabular-nums; }
.ang-lp-total { text-align:right; font-weight:600; width:90px; font-variant-numeric:tabular-nums; }

/* Dimmed LP row (unchecked / not commissioned) */
.ang-lp-dim td { opacity:0.4; }

/* HOAI Subtotal row */
.ang-lp-subtotal { background:var(--primary-light); }
.ang-lp-subtotal td { padding:8px 12px; font-weight:700; font-size:12px; }

/* Besondere Leistungen header */
.ang-bes-header-row { background:#f8f9fa; border-top:1px dashed #e0e0e0; }
.ang-bes-header {
  padding:8px 12px 6px 16px; font-size:11px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;
}

/* Drag & Drop for positions */
.ang-pos-item[draggable="true"] { cursor:default; }
.ang-drag {
  cursor:move; user-select:none;
}
.ang-drag:active { cursor:move; }
.ang-pos-drop-above { border-top:2px solid var(--primary) !important; }
.ang-pos-drop-below { border-bottom:2px solid var(--primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS EXTENSIONS — Firmendaten, Briefpapier
   ═══════════════════════════════════════════════════════════════ */

/* Section title inside settings cards */
.settings-section-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text); margin-bottom: 12px;
}

/* Two-logo upload layout */
.settings-logo-uploads { display: flex; gap: 24px; flex-wrap: wrap; }
.settings-logo-box { display: flex; align-items: center; gap: 16px; }
.settings-logo-area {
  border: 2px dashed var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--surface2); position: relative;
}
.settings-logo-area.square { width: 80px; height: 80px; }
.settings-logo-area.wide { width: 200px; height: 80px; }
.settings-logo-area img { width: 100%; height: 100%; object-fit: contain; }
.settings-logo-empty {
  color: var(--muted); font-size: 0.75rem; text-align: center; padding: 8px;
}

/* Toggle button group (Links / Rechts) – animierter Sliding-Pill */
.settings-toggle-group {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface3, #f1f4f9);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 3px; gap: 0;
}
.settings-toggle-group::before {
  content: ''; position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--surface); border-radius: 5px;
  box-shadow: 0 1px 3px rgba(15,23,42,.12), 0 1px 1px rgba(15,23,42,.04);
  transition: left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index: 0; pointer-events: none;
}
.settings-toggle-group:has(> .settings-toggle-btn:nth-of-type(2).active)::before { left: 50%; }
.settings-toggle-btn {
  position: relative; z-index: 1;
  padding: 6px 14px; border: none; border-radius: 5px;
  font-size: 0.8rem; cursor: pointer; background: transparent;
  color: var(--muted); font-weight: 500; font-family: inherit;
  transition: color .22s cubic-bezier(.5,0,.2,1), font-weight .22s;
}
.settings-toggle-btn.active {
  color: var(--text); font-weight: 600;
}

/* Switch row (toggle + label) */
.settings-switch-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 0.85rem; color: var(--text); font-weight: 500;
}
.settings-switch {
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
}
.settings-switch input { display: none; }
.settings-switch-slider {
  position: absolute; inset: 0; background: #ccc; border-radius: 10px;
  transition: background .28s cubic-bezier(.5,0,.2,1);
}
.settings-switch-slider:before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .28s cubic-bezier(.5,0,.2,1);
}
.settings-switch input:checked + .settings-switch-slider { background: var(--primary); }
.settings-switch input:checked + .settings-switch-slider:before { transform: translateX(16px); }

/* Info box */
.settings-info-box {
  padding: 12px 14px; background: var(--primary-light); border-radius: 8px;
  border: 1px solid rgba(0,113,227,0.1); font-size: 0.8rem; color: #444; line-height: 1.5;
}

/* Hint box (warning style) */
.settings-hint-box {
  padding: 10px 14px; background: #fefce8; border-radius: 8px;
  border: 1px solid rgba(202,138,4,0.15); font-size: 0.8rem; color: #666; line-height: 1.5;
}

/* Footer preview inside briefpapier settings */
.settings-footer-preview {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px;
}
.settings-footer-preview-title {
  font-size: 0.7rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}
.settings-footer-preview-cols {
  display: flex; gap: 16px; font-size: 0.78rem; color: #555; line-height: 1.6;
}
.settings-footer-preview-col { flex: 1; }
.settings-footer-preview-col strong {
  display: block; color: var(--text); font-weight: 600; margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT PREVIEW — Mehrseitiges DIN A4 Layout (Honorarangebot)
   ═══════════════════════════════════════════════════════════════ */

.print-preview-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--surface2); overflow-y: auto;
}
.print-preview-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.print-preview-layout {
  display: flex; min-height: calc(100vh - 52px);
}
.print-preview-wrap {
  flex: 1; display: flex; justify-content: center; padding: 30px 20px 60px;
  background: #e8e8ec; min-height: calc(100vh - 52px); overflow-y: auto;
}

/* ── Sidebar: Druck-Optionen & Editor ─────────────────────── */
.pp-sidebar {
  width: 340px; flex-shrink: 0; background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e5e7eb);
  padding: 18px 18px 30px; overflow-y: auto;
  position: sticky; top: 52px; max-height: calc(100vh - 52px);
  font-size: 13px; box-shadow: -2px 0 8px rgba(0,0,0,0.04);
}
.pp-sidebar h3 {
  margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--text, #1a1a1a);
  display: flex; align-items: center; gap: 8px;
}
.pp-sidebar h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted, #6b7280);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pp-sidebar h4 small { text-transform: none; color: #aaa; font-weight: 400; }

.pp-status-badge {
  display: inline-block; background: #e0e7ff; color: #2563eb;
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  margin-left: auto;
}
.pp-status-badge.dirty { background: #fef3c7; color: #92400e; }
.pp-status-badge.saved { background: #dcfce7; color: #166534; }

.pp-side-section {
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.pp-side-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pp-side-section-flush { border-bottom: none; padding-bottom: 0; margin-bottom: 12px; }

/* Toggle-Switch */
.pp-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; padding: 8px 10px; background: var(--surface2, #f7f7f9);
  border-radius: 8px; font-size: 13px; user-select: none;
}
.pp-toggle:hover { background: var(--hover, #f0f0f4); }
.pp-toggle strong { display: block; margin-bottom: 2px; color: var(--text, #1a1a1a); }
.pp-toggle small { color: var(--muted, #888); font-size: 11px; }
.pp-toggle input { display: none; }
.pp-toggle-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pp-toggle-slider {
  width: 40px; height: 22px; background: #ccc; border-radius: 11px;
  position: relative; flex-shrink: 0;
  transition: background .28s cubic-bezier(.5,0,.2,1);
}
.pp-toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .28s cubic-bezier(.5,0,.2,1);
}
.pp-toggle input:checked + .pp-toggle-slider { background: var(--primary, #2563eb); }
.pp-toggle input:checked + .pp-toggle-slider::after { transform: translateX(18px); }

/* Editor-Toolbar */
.pp-editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  background: var(--surface2, #f7f7f9); border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px 6px 0 0;
}
.pp-editor-toolbar button,
.pp-editor-toolbar select {
  min-width: 28px; height: 28px; padding: 0 8px; background: #fff;
  border: 1px solid var(--border, #d0d0d0); border-radius: 4px; cursor: pointer;
  font-size: 12px; color: var(--text, #333); display: flex; align-items: center;
  justify-content: center;
}
.pp-editor-toolbar button:hover { background: var(--hover, #e8eaf0); border-color: #888; }
.pp-editor-toolbar button.active {
  background: rgba(37,99,235,.15); border-color: var(--primary, #2563eb); color: var(--primary, #2563eb);
}
.pp-editor-toolbar select { padding: 0 4px; }

.pp-editor {
  min-height: 60px; padding: 8px 10px;
  border: 1px solid var(--border, #e0e0e0); border-top: none;
  border-radius: 0 0 6px 6px; background: #fff;
  font-size: 13px; line-height: 1.5; color: var(--text, #1a1a1a);
  outline: none; max-height: 200px; overflow-y: auto;
}
.pp-editor:focus {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37,99,235,.1);
}
.pp-editor[data-field="subject"],
.pp-editor[data-field="project-ref"] { min-height: 36px; }
.pp-editor-text { min-height: 110px; }

.pp-save-btn { width: 100%; margin-top: 6px; }
.pp-reset-btn {
  width: 100%; padding: 8px; background: transparent; color: var(--muted, #6b7280);
  border: 1px solid var(--border, #ddd); border-radius: 6px;
  font-size: 12px; cursor: pointer; margin-top: 6px;
}
.pp-reset-btn:hover { background: var(--hover, #f0f0f4); }

/* LP-Beschreibungen ausblenden */
.pp-hide-lp-desc .pp-lp-desc { display: none !important; }
/* LP-Beschreibung aus → Titel + Werte in einer Zeile (spart Platz) */
.pp-hide-lp-desc .pp-lp-section {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.pp-hide-lp-desc .pp-lp-section > .pp-lp-title {
  flex: 1;
  margin-bottom: 0;
  padding-left: 4px;
}
.pp-hide-lp-desc .pp-lp-section > .pp-lp-summary {
  flex: none;
  border-top: none;
  padding: 0;
}
.pp-hide-lp-desc .pp-lp-section > .pp-lp-summary > .pp-lp-col-name {
  display: none;
}

.print-pages-container {
  display: flex; flex-direction: column; gap: 24px; align-items: center;
}
.print-page {
  width: 595px; height: 842px; background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  /* DIN 5008 Form A (Brief mit Briefkopf):
     oben 16,9 mm · links 25 mm · rechts 20 mm · unten 16,9 mm
     (bei PX_PER_MM = 2,8333 → 48 / 71 / 57 / 48 px) */
  padding: 48px 57px 48px 71px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px; color: #1a1a1a; position: relative; line-height: 1.5;
  page-break-after: always;
  box-sizing: border-box;
  overflow: hidden;       /* 1 DOM-Page == 1 PDF-Page: Überlauf wird geclippt */
}

/* ── Seite 1: Anschreiben (Cover) ─────────────────────────── */
.pp-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.pp-header-left { flex: 1; }
.pp-header-right { text-align: right; font-size: 9px; color: #1e1e1e; line-height: 1.7; flex-shrink: 0; }
.pp-logo-wrap { margin-bottom: 4px; }
.pp-logo-wrap img { max-height: 80px; max-width: 200px; display: block; }
.pp-company-name { font-size: 16px; font-weight: 300; letter-spacing: 3px; color: #1a1a1a; }
.pp-company-subtitle { font-size: 8.5px; color: #1e1e1e; margin-top: 2px; letter-spacing: 0.2px; }
.pp-company-partners { font-size: 8.5px; color: #1e1e1e; margin-top: 6px; font-weight: 500; font-style: italic; }
.pp-contact-block { font-size: 9px; color: #1e1e1e; line-height: 1.7; text-align: right; margin-top: 4px; }

/* Sender-Line wird im klassischen Pfad nicht mehr gerendert. Fallback: display:none
   falls sie doch irgendwo (z.B. Alt-Inhalt) auftaucht, damit keine Linie erscheint.
   Im Layout-Modus ausserdem pp-header (klassischer Kopf) unterdrücken. */
.pp-sender-line { display: none !important; }
.print-page.has-lh .pp-header { display: none !important; }
.pp-recipient { margin-top: 0; margin-bottom: 10px; font-size: 10px; line-height: 1.6; }
.pp-recipient-name { font-weight: 600; }

.pp-cover-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 30px 0 18px; }

.pp-cover-info {
  display: flex; justify-content: space-between; padding: 12px 0;
  border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 20px;
  font-size: 9.5px; line-height: 1.6;
}
.pp-cover-info-left { flex: 1; }
.pp-cover-info-right { text-align: left; }
.pp-cover-info strong { display: block; font-weight: 700; margin-bottom: 2px; }

.pp-text { font-size: 9.5px; line-height: 1.65; margin-bottom: 14px; color: #333; }

.pp-closing { font-size: 9.5px; color: #333; line-height: 1.6; margin-bottom: 28px; }
.pp-signature { font-size: 9.5px; color: #333; margin-bottom: 28px; }

.pp-cover-sums {
  border-top: 1px solid #ddd; padding-top: 14px; margin-bottom: 24px;
}
.pp-cover-sums table { width: 220px; font-size: 9.5px; border-collapse: collapse; }
.pp-cover-sums td { padding: 3px 0; }
.pp-cover-sums td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pp-cover-sums .pp-sum-divider td { border-top: 1px solid #ddd; padding-top: 6px; }
.pp-cover-sums .pp-sum-total td { font-weight: 700; font-size: 10.5px; border-top: 1px solid #ddd; padding-top: 6px; }

/* ── Summen + Unterschrift Bauherr nebeneinander ─────────── */
.pp-sums-sig-row { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 24px; }
.pp-sums-sig-row .pp-cover-sums { margin-bottom: 0; flex: 0 0 auto; }
.pp-sums-sig-row .pp-bauherr-sig { flex: 1; }

/* ── Meta-Block rechts (Datum, Angebot-Nr, Projekt-Nr) ───── */
.pp-meta { display: flex; justify-content: flex-end; margin: 14px 0 18px; }
.pp-meta-right { text-align: right; color: #1e1e1e; font-size: 9px; line-height: 1.55; }
.pp-meta-right strong { color: #1a1a1a; font-weight: 600; }

/* ── Betreff + Projekt-Referenz (Block 5a) ───────────────── */
.pp-subject { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #1a1a1a; }
.pp-project-ref { font-size: 9.5px; color: #1e1e1e; margin-bottom: 14px; }

/* ── Unterschriftsfeld Bauherr (Block 11) ────────────────── */
.pp-sig-block { display: flex; gap: 40px; padding-top: 56px; }
.pp-sig-field { flex: 1; }
.pp-sig-line { border-top: 1px solid #999; padding-top: 4px; font-size: 8px; color: #1e1e1e; }
.pp-hide-bauherr-sig .pp-bauherr-sig { display: none; }

/* ── Alt: pp-cover-payment (deprecated, Fallback) ──────────── */
.pp-cover-payment {
  font-size: 8.5px; color: #1e1e1e; line-height: 1.6;
  border-top: 1px solid #ddd; padding-top: 12px;
}
.pp-cover-payment .pp-pay-label { color: #1e1e1e; font-size: 8px; }

.pp-page-number {
  /* bottom:6px → liegt UNTER der Fußzeile (bottom:22px), kollidiert nicht mit mittlerer Footer-Spalte */
  position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center; font-size: 8.5px; color: #1e1e1e;
}

/* ── Detail-Seiten: Kopfzeile (alt, für Angebote) ────────── */
.pp-detail-header {
  display: flex; justify-content: space-between; margin-bottom: 2px;
  font-size: 9px; line-height: 1.4;
}
.pp-detail-header-left { font-weight: 600; color: #1a1a1a; }
.pp-detail-header-right { text-align: right; color: #1a1a1a; }
.pp-detail-header-sub {
  display: flex; justify-content: space-between; margin-bottom: 12px;
  font-size: 8.5px; color: #1e1e1e;
}
.pp-detail-sep { border: none; border-top: 1px solid #1e3a6e; margin: 0 0 14px; }

/* ── KE Detail-Seiten: Kopfzeile mit Logo ────────────────── */
.ke-pp-detail-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ke-pp-detail-hdr-logo { flex: 0 0 auto; }
.ke-pp-detail-hdr-info { flex: 1; min-width: 0; }
.ke-pp-detail-hdr-name {
  font-size: 10px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.ke-pp-detail-hdr-addr {
  font-size: 8px;
  color: #555;
  line-height: 1.3;
}
.ke-pp-detail-hdr-right {
  flex: 0 0 auto;
  text-align: right;
  font-size: 8.5px;
  color: #1a1a1a;
  line-height: 1.4;
}

/* ── HOAI-Abschnitt ──────────────────────────────────────── */
.pp-hoai-title {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.pp-hoai-title h2 { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0; }
.pp-hoai-title .pp-hoai-amount { font-size: 14px; font-weight: 700; color: #1a1a1a; }

.pp-hoai-info { margin-bottom: 14px; font-size: 9.5px; line-height: 1.8; }
.pp-hoai-info-row {
  display: flex; justify-content: space-between;
  padding: 0 0 1px;
}
.pp-hoai-info-row .pp-info-label { color: #333; }
.pp-hoai-info-row .pp-info-value { color: #1a1a1a; text-align: right; font-variant-numeric: tabular-nums; }

/* ── LP-Tabelle ──────────────────────────────────────────── */
.pp-lp-table-head {
  display: flex; padding: 7px 0; background: #f5f6f8;
  font-size: 8px; color: #1a1a1a; border-bottom: 1px solid #ddd;
  margin-bottom: 0;
}
.pp-lp-col-name { flex: 1; padding-left: 4px; }
.pp-lp-col-pct { width: 70px; text-align: right; }
.pp-lp-col-ep { width: 90px; text-align: right; }
.pp-lp-col-total { width: 90px; text-align: right; padding-right: 4px; }

.pp-lp-section { padding: 10px 0 4px; border-bottom: 1px solid #eee; }
.pp-lp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.pp-lp-desc { margin: 0 0 8px 20px; font-size: 9px; color: #333; line-height: 1.55; }
.pp-lp-desc-item { margin-bottom: 2px; padding-left: 4px; }
.pp-lp-desc-sub { margin-left: 16px; list-style: disc; padding-left: 10px; }
.pp-lp-desc-sub li { margin-bottom: 1px; }

.pp-lp-summary {
  display: flex; padding: 5px 0; font-size: 9.5px;
  border-top: 1px solid #ddd;
}
.pp-lp-summary .pp-lp-col-name { flex: 1; }
.pp-lp-summary .pp-lp-col-total { font-weight: 700; }

/* ── Positions-Beschreibung (Stundenlohn / Freitext / Pauschal) ─ */
.pp-pos-desc {
  padding: 2px 4px 8px 4px; font-size: 9px; color: #444;
  border-bottom: 1px solid #ddd; margin-bottom: 2px; line-height: 1.4;
}
.pp-pos-desc-italic { font-style: italic; }

/* ── Zwischensumme / Zuschlag ────────────────────────────── */
.pp-subtotal-row {
  display: flex; padding: 5px 0; font-size: 9.5px;
  border-bottom: 1px solid #ddd;
}
.pp-subtotal-row .pp-lp-col-name { flex: 1; }
.pp-subtotal-row .pp-lp-col-total { font-weight: 600; }
.pp-subtotal-row.pp-zuschlag { color: #333; font-weight: 600; }

/* ── Endsummen (Detail-Seiten) ───────────────────────────── */
.pp-final-sums { margin-top: 20px; width: 55%; margin-left: auto; }
.pp-final-sums table { width: 100%; border-collapse: collapse; font-size: 10px; }
.pp-final-sums td { padding: 4px 0; }
.pp-final-sums td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pp-final-sums .pp-fs-zwischen td { font-weight: 700; border-top: 1px solid #ddd; padding-top: 6px; }
.pp-final-sums .pp-fs-total td { font-weight: 700; font-size: 11px; }

/* ── Kalkulations-Seiten ─────────────────────────────────── */
.pp-kalk-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; }

.pp-kalk-table { width: 100%; border-collapse: collapse; font-size: 9px; margin-bottom: 16px; }
.pp-kalk-table th {
  padding: 6px 8px; font-size: 8px; color: #888; font-weight: 400;
  text-align: right; border-bottom: 1px solid #ddd; background: #f5f6f8;
}
.pp-kalk-table th:first-child { text-align: left; }
.pp-kalk-table td { padding: 8px 8px; text-align: right; border-bottom: 1px solid #eee; font-variant-numeric: tabular-nums; }
.pp-kalk-table td:first-child { text-align: left; color: #333; }
.pp-kalk-table .pp-kalk-total td { font-weight: 700; border-top: 1.5px solid #333; }

.pp-kalk-formula { font-size: 9px; line-height: 1.8; color: #333; margin-top: 10px; }
.pp-kalk-formula-row { display: flex; justify-content: space-between; padding: 1px 0; }
.pp-kalk-formula-row .pp-kf-label { color: #333; }
.pp-kalk-formula-row .pp-kf-value { text-align: right; font-variant-numeric: tabular-nums; }
.pp-kalk-formula-row.pp-kf-result { font-weight: 700; margin-top: 4px; }
.pp-kalk-formula-row.pp-kf-result .pp-kf-label { font-weight: 700; }

/* ── Footer auf Seite 1 ─────────────────────────────────── */
.pp-footer {
  /* an DIN-5008-Ränder ausgerichtet: links 25 mm / rechts 20 mm */
  position: absolute; bottom: 40px; left: 71px; right: 57px;
  border-top: 0.5px solid #ccc; padding-top: 8px;
  display: flex; gap: 24px; font-size: 7px; color: #1e1e1e; line-height: 1.5;
}
.pp-footer-col { flex: 1; }
.pp-footer-col strong { color: #1e1e1e; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   Letterhead-Layer in Druckvorschau (aus letterhead_layouts)
   — überlagert jede .print-page wenn ein Layout gewählt wurde.
   Koordinaten: 1 mm = 2.8333 px (595px / 210mm)
   ═══════════════════════════════════════════════════════════════ */
.print-page.has-lh { padding: 0; }
.pp-lh-bg {
  position: absolute; inset: 0; pointer-events: none;
  font-family: inherit;
}
.pp-lh-bg .pp-lh-elem {
  position: absolute;
  line-height: 1.25;
}
/* Nur Bild-Elemente clippen — Textelemente (Büroanschrift etc.) dürfen überlaufen */
.pp-lh-bg .pp-lh-elem[data-kind="image"] { overflow: hidden; }
.pp-lh-bg .pp-lh-elem[data-align="left"]    { text-align:left; }
.pp-lh-bg .pp-lh-elem[data-align="right"]   { text-align:right; }
.pp-lh-bg .pp-lh-elem[data-align="center"]  { text-align:center; }
.pp-lh-bg .pp-lh-elem[data-align="justify"] { text-align:justify; }
/* Block: inline-block inner div zentriert im Container — spiegelt justify-content:center des Editors */
.pp-lh-bg .pp-lh-elem[data-align="block"]   { text-align:center; }
.pp-lh-bg .pp-lh-elem img { width:100%; height:100%; object-fit:contain; display:block; }
.pp-lh-bg .pp-lh-footer {
  /* Flex-Fallback — wenn im Editor keine cols-Positionen definiert sind.
     An DIN 5008 ausgerichtet: links 25 mm / rechts 20 mm */
  position:absolute; left:71px; right:57px; bottom:22px;
  display:flex; gap:14px; font-size:7px; color:#1e1e1e; line-height:1.5;
}
.pp-lh-bg .pp-lh-footer-col { flex:1; }
.pp-lh-bg .pp-lh-footer-col strong { color:#1e1e1e; font-weight:600; display:block; margin-bottom:2px; }
/* Absolut-positionierte Footer-Spalten (wenn im Briefpapier-Editor verschoben) */
.pp-lh-bg .pp-lh-footer-col-abs {
  line-height: 1.35;
  color: #1e1e1e;
}
.pp-lh-bg .pp-lh-footer-col-abs strong { color:#1e1e1e; font-weight:600; display:block; margin-bottom:2px; }
.pp-lh-bg .pp-lh-sender {
  font-size: 7px; color:#1e1e1e;
  padding-bottom:2px; letter-spacing:0.3px;
  white-space: pre-line;
  /* keine Trennlinie mehr — auf Userwunsch entfernt */
}
.print-page.has-lh .pp-content-area {
  position: relative; z-index: 2;
  /* padding wird inline pro Seite in mm gesetzt (contentTopMm + contentBottomMm) */
}

/* ═══════════════════════════════════════════════════════════════
   Print media query
   ═══════════════════════════════════════════════════════════════ */
@page { size: A4; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   Briefpapier-Editor (Einstellungen → Briefpapier)
   ═══════════════════════════════════════════════════════════════ */

/* Inline-Toggle (Fußzeile an/aus in der Card-Header-Leiste) */
.inline-toggle { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); cursor:pointer; user-select:none; }
.inline-toggle .sw { width:34px; height:20px; background:#ccc; border-radius:10px; position:relative; transition:background .28s cubic-bezier(.5,0,.2,1); }
.inline-toggle .sw::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .28s cubic-bezier(.5,0,.2,1); }
.inline-toggle input { display:none; }
.inline-toggle input:checked + .sw { background: var(--primary); }
.inline-toggle input:checked + .sw::after { transform: translateX(14px); }

/* Seiten-Umschalter (Erste Seite / Folgeseite) in der Action-Bar */
.bp-seg { display:flex; gap:2px; background:#f0f0f2; padding:2px; border-radius:6px; }
.bp-seg button { border:none; background:transparent; padding:5px 10px; border-radius:4px; font-size:12px; cursor:pointer; color:var(--muted); font-weight:500; font-family:var(--font); }
.bp-seg button.active { background:#fff; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.08); }

/* Status-Chip (Live / Ungespeichert / Gespeichert) */
.status-chip { font-size:11px; padding:3px 8px; border-radius:10px; font-weight:500; background:#f0f0f2; color:var(--muted); }
.status-chip.dirty { background:#fff3e0; color:#e65100; }
.status-chip.saved { background:#e8f5e9; color:#2e7d32; }

/* ─── Landing-Ansicht (Kacheln) ─── */
.bp-landing { padding:24px; display:flex; flex-direction:column; gap:32px; }
.bp-group {}
.bp-group-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.bp-group-title { font-size:13px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; }
.bp-group-icon { font-size:18px; line-height:1; }
.bp-group-line { flex:1; height:1px; background:var(--border); }
.bp-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.bp-tile { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:all 0.15s; display:flex; flex-direction:column; }
.bp-tile:hover { border-color:var(--primary); box-shadow:0 4px 16px rgba(0,113,227,0.12); transform:translateY(-2px); }
.bp-tile-thumb { aspect-ratio:210/297; background:#fafafa; border-bottom:1px solid rgba(0,0,0,0.06); position:relative; display:flex; align-items:center; justify-content:center; }
.bp-tile-thumb svg { width:92%; height:92%; }
.bp-tile-body { padding:12px 14px; }
.bp-tile-name { font-weight:600; font-size:14px; margin-bottom:2px; }
.bp-tile-meta { color:var(--muted); font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.bp-tile-badge { background:rgba(0,113,227,0.1); color:var(--primary); padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600; }
.bp-tile-actions { display:flex; gap:4px; margin-top:6px; }
.bp-tile-actions button { border:none; background:rgba(0,0,0,0.05); color:var(--muted); border-radius:5px; padding:3px 8px; font-size:11px; cursor:pointer; font-family:var(--font); }
.bp-tile-actions button:hover { background:rgba(0,0,0,0.1); color:var(--text); }
.bp-tile-actions button.danger:hover { background:rgba(255,59,48,0.1); color:var(--danger); }
.bp-tile.action { border:2px dashed rgba(0,0,0,0.15); background:transparent; align-items:center; justify-content:center; min-height:240px; flex-direction:column; gap:8px; color:var(--muted); }
.bp-tile.action:hover { border-color:var(--primary); color:var(--primary); background:rgba(0,113,227,0.03); }
.bp-tile.action .icon { font-size:32px; line-height:1; }
.bp-tile.action .label { font-weight:600; font-size:14px; }

/* ─── Editor-Layout (Canvas + Properties-Panel) ─── */
.bp-editor { display:flex; min-height:calc(100vh - 200px); }
.bp-canvas-area {
  flex:1; overflow:auto; background:#e8e8ec;
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px; position:relative;
}
/* A4: 210×297mm @ 3px/mm */
.bp-a4 {
  width:630px; height:891px; background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,0.12); position:relative;
  background-image:radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size:15px 15px;
}

/* Dummy-Angebot (Vorschau-Schemen im Hintergrund) */
.bp-a4 .dummy { position:absolute; color:#b8b8bc; pointer-events:none; user-select:none; font-family:'Helvetica Neue',Arial,sans-serif; }
.bp-a4 .dummy-thin  { font-size:7pt; }
.bp-a4 .dummy-meta  { font-size:9pt; line-height:1.45; text-align:right; }
.bp-a4 .dummy-recip { font-size:10pt; line-height:1.4; }
.bp-a4 .dummy-subj  { font-size:13px; font-weight:700; color:#b8b8bc; }
.bp-a4 .dummy-ref   { font-size:9pt; }
.bp-a4 .dummy-text  { font-size:10pt; line-height:1.55; }
.bp-a4 .dummy-sum   { font-size:9pt; border-top:1px solid #d9d9dc; border-bottom:1px solid #d9d9dc; padding:4px 0; width:220px; border-collapse:collapse; }
.bp-a4 .dummy-sum tr td:nth-child(2) { text-align:right; }
.bp-a4 .dummy-sum tr.total td { border-top:1px solid #d9d9dc; padding-top:3px; font-weight:700; }
.bp-a4 .dummy-sig { border-top:1px solid #d9d9dc; width:100%; padding-top:4px; font-size:7pt; color:#c5c5c9; }
.bp-a4 .dummy-pagenr { font-size:9pt; color:#b8b8bc; }
.bp-a4 .dummy-footer {
  position:absolute; left:45px; right:45px; bottom:24px;
  display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:18px;
  font-size:7pt; line-height:1.4;
  border-top:1px solid #e5e5e8; padding-top:8px; color:#b8b8bc;
}
.bp-a4 .dummy-footer strong { color:#a5a5a9; font-weight:600; display:block; margin-bottom:2px; }
.bp-a4 .dummy-footer .nowrap { white-space:nowrap; }

/* ── Randlinien-Guides im Briefpapier-Editor ── */
.bp-margin-guide {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(0,113,227,0.3);
  pointer-events: none; z-index: 6;
}
.bp-margin-guide::before {
  content: attr(data-label);
  position: absolute; top: 8px;
  font-size: 8px; font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #0071e3; white-space: nowrap;
  background: rgba(255,255,255,0.88); padding: 1px 4px;
  border-radius: 3px; border: 1px solid rgba(0,113,227,0.25);
  line-height: 1.5;
}
.bp-margin-guide-left::before  { left: 3px; }
.bp-margin-guide-right::before { right: 3px; }

/* Editierbare Elemente (liegen über dem Dummy) */
.bp-a4 .elem {
  position:absolute; min-width:25px; min-height:14px;
  cursor:move; user-select:none; padding:0;
  display:flex; align-items:center;
}
.bp-a4 .elem:hover { outline:1px solid rgba(0,113,227,0.5); outline-offset:-1px; background:rgba(0,113,227,0.04); }
.bp-a4 .elem.selected { outline:1.5px solid var(--primary); outline-offset:-1px; background:rgba(0,113,227,0.06); z-index:10; }
.bp-a4 .elem .handle { position:absolute; width:8px; height:8px; background:var(--primary); border:1.5px solid #fff; border-radius:50%; display:none; }
.bp-a4 .elem.selected .handle { display:block; }
.bp-a4 .elem .handle.se { bottom:-4px; right:-4px; cursor:se-resize; }

.bp-a4 .elem-image { background:#f7f7f9; outline:1px dashed rgba(0,0,0,0.22); outline-offset:-1px; color:#8a8a8e; font-size:10px; justify-content:center; text-align:center; flex-direction:column; gap:1px; }
.bp-a4 .elem-image .lbl { font-weight:600; font-size:10px; }
.bp-a4 .elem-image .sub { font-size:8.5px; color:#a8a8ac; }
.bp-a4 .elem-image.has-src { background:none; outline-color:transparent; padding:0; }
.bp-a4 .elem-image.has-src img { width:100%; height:100%; object-fit:contain; display:block; }

.bp-a4 .elem-text { line-height:1.3; color:var(--text); }
.bp-a4 .elem-sender { color:#3a3a3c; white-space:pre-wrap; line-height:1.25; align-items:flex-start; padding-top:1px; }
.bp-a4 .elem-pagenr { color:#3a3a3c; font-size:8pt; }
.bp-a4 .elem-footer-col { color:#3a3a3c; line-height:1.35; align-items:flex-start; padding:2px 3px; }
.bp-a4 .elem-footer-col strong { color:#555; font-weight:600; display:block; margin-bottom:2px; }
.bp-a4 .elem-footer-col .inner { line-height:1.35; }

.bp-a4 .elem .inner { width:100%; outline:none; }
.bp-a4 .elem-text .inner { white-space:pre-wrap; }
.bp-a4 .elem[data-align="left"]   { justify-content:flex-start; }
.bp-a4 .elem[data-align="center"] { justify-content:center; }
.bp-a4 .elem[data-align="right"]  { justify-content:flex-end; }
.bp-a4 .elem[data-align="block"]  { justify-content:center; }
.bp-a4 .elem[data-align="left"]   .inner { text-align:left; }
.bp-a4 .elem[data-align="center"] .inner { text-align:center; }
.bp-a4 .elem[data-align="right"]  .inner { text-align:right; }
.bp-a4 .elem[data-align="block"]  .inner { display:inline-block; width:auto; max-width:100%; text-align:left; }

.bp-a4 .elem.editing { outline:1.5px solid var(--primary) !important; cursor:text; background:#fff; }
.bp-a4 .elem.editing .inner { cursor:text; display:block !important; width:100% !important; }
.bp-a4 .elem.richtext .inner { word-wrap:break-word; }

.bp-a4 .elem-label {
  position:absolute; top:-18px; left:0; font-size:10px; color:var(--primary);
  font-weight:600; background:#fff; padding:1px 6px; border-radius:3px;
  border:1px solid var(--primary); pointer-events:none; white-space:nowrap;
  display:none;
}
.bp-a4 .elem.selected .elem-label { display:block; }
.bp-a4 .elem:hover .elem-label { display:block; color:var(--muted); border-color:#ccc; }

/* ─── Eigenschaften-Panel ─── */
.bp-props {
  width:300px; flex-shrink:0; background:var(--surface);
  border-left:1px solid var(--border);
  padding:16px; overflow-y:auto;
}
.bp-props h4 { margin:0 0 14px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; }
.bp-props .elem-kind { font-size:10px; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); margin-bottom:4px; font-weight:600; }
.bp-props .empty { color:var(--text3); font-size:12px; padding:14px 0; text-align:center; line-height:1.5; }
.bp-props-group { margin-bottom:14px; }
.bp-props-group > label { display:block; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:5px; }
.bp-props-row { display:flex; gap:6px; }
.bp-props-row input { flex:1; min-width:0; }
.bp-props input[type="text"], .bp-props input[type="number"], .bp-props textarea, .bp-props select {
  width:100%; padding:6px 8px; border:1px solid rgba(0,0,0,0.15); border-radius:5px;
  font-size:12.5px; font-family:var(--font); background:#fff; color:var(--text);
}
.bp-props input:focus, .bp-props textarea:focus, .bp-props select:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,113,227,0.15);
}
.bp-props textarea { min-height:70px; resize:vertical; }
.bp-props .vis-toggle { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; background:#f7f7f9; border-radius:7px; margin-bottom:14px; cursor:pointer; }
.bp-props .seg { display:flex; gap:2px; background:#f0f0f2; padding:2px; border-radius:6px; }
.bp-props .seg button { flex:1; border:none; background:transparent; padding:6px 0; border-radius:4px; font-size:12px; cursor:pointer; color:var(--muted); font-weight:500; font-family:var(--font); }
.bp-props .seg button.active { background:#fff; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.bp-props .hint-row { font-size:11px; color:var(--muted); line-height:1.45; padding:8px 10px; background:#f7f7f9; border-radius:6px; }
.bp-props .elem-list { margin-top:6px; }
.bp-props .elem-list .row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:6px; cursor:pointer; background:#f7f7f9; margin-bottom:4px; }
.bp-props .elem-list .row:hover { background:#eef2f7; }
.bp-props .elem-list .row .name { font-size:12.5px; color:var(--text); font-weight:500; }
.bp-props .elem-list .row.is-hidden .name { color:var(--text3); text-decoration:line-through; }
.bp-props .elem-list .row .vis { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:500; background:#e8f5e9; color:#2e7d32; }
.bp-props .elem-list .row.is-hidden .vis { background:#f0f0f2; color:var(--text3); }

/* Rich-Text-Toolbar */
.bp-props .rt-toolbar { display:flex; gap:4px; flex-wrap:wrap; padding:6px; background:#f7f7f9; border-radius:7px; margin-bottom:8px; align-items:center; }
.bp-props .rt-toolbar button { min-width:28px; height:28px; padding:0 7px; border:1px solid rgba(0,0,0,0.1); background:#fff; border-radius:5px; cursor:pointer; font-size:12.5px; color:var(--text); font-family:var(--font); }
.bp-props .rt-toolbar button:hover { background:#eef2f7; border-color:var(--primary); }
.bp-props .rt-toolbar button.active { background:#e3effd; border-color:var(--primary); color:var(--primary); }
.bp-props .rt-toolbar .b { font-weight:700; }
.bp-props .rt-toolbar .i { font-style:italic; }
.bp-props .rt-toolbar .u { text-decoration:underline; }
.bp-props .rt-toolbar input[type="number"] { width:54px; height:28px; padding:0 6px; border:1px solid rgba(0,0,0,0.15); border-radius:5px; font-size:12px; font-family:var(--font); }
.bp-props .rt-toolbar .label { font-size:11px; color:var(--muted); margin:0 2px; }
.bp-props .rt-toolbar .sep { width:1px; height:18px; background:rgba(0,0,0,0.1); margin:0 2px; }

/* Platzhalter-Hilfe im Props-Panel */
.bp-token-help > summary { padding:4px 0; outline:none; }
.bp-token-help > summary::-webkit-details-marker { display:none; }
/* Caret als inline SVG-Background (data-URL) — wird beim Open mit transform:rotate(90deg) nach unten gedreht */
.bp-token-help > summary::before {
  content:""; display:inline-block;
  width:11px; height:11px; margin-right:6px; vertical-align:-1px;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9,18 15,12 9,6'/></svg>");
  transition:transform 0.15s;
}
.bp-token-help[open] > summary::before { transform:rotate(90deg); }
.bp-props .bp-token-chip {
  display:inline-block; margin:2px 3px 2px 0; padding:2px 7px;
  background:#eef2f7; color:var(--primary); border:1px solid rgba(0,0,0,0.06);
  border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; cursor:pointer; font-weight:500;
}
.bp-props .bp-token-chip:hover { background:#dce7f5; border-color:var(--primary); }

/* Hint-Bar (Tastatur-Shortcuts) */
.bp-hint-bar {
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  background:#1d1d1f; color:#fff; padding:6px 14px; border-radius:20px;
  font-size:11.5px; box-shadow:0 4px 12px rgba(0,0,0,0.2); z-index:50;
}
.bp-hint-bar kbd { background:rgba(255,255,255,0.15); padding:1px 6px; border-radius:3px; font-family:var(--font); font-size:10.5px; }


/* ============================================================
   BAUZEITPLANUNG
   ============================================================ */

/* ── View-Shell ──────────────────────────────────────────── */
.bzp-view-gantt {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

/* ── Toolbar (2 Zeilen) ──────────────────────────────────── */
.bzp-toolbar {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0; z-index: 10;
}
.bzp-toolbar-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px;
}
.bzp-toolbar-context {
  border-bottom: 1px solid var(--border);
  background: var(--surface3, #f1f4f9);
  min-height: 36px;
}
.bzp-toolbar-controls {
  min-height: 36px;
}
.bzp-sep { color: var(--border); margin: 0 2px; }
.bzp-proj-lbl { font-weight: 700; font-size: 13px; color: var(--text); }
.bzp-plan-sel {
  border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px;
  font-size: 12px; background: var(--surface); cursor: pointer; max-width: 220px;
  color: var(--text);
}
.bzp-today-badge {
  display: flex; align-items: center; gap: 5px;
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.18);
  border-radius: 6px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; color: var(--primary, #2563eb);
}
/* ── Plan-Chip im Header ─────────────────────────────────── */
.bzp-plan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 20px; padding: 3px 10px 3px 8px;
  font-size: 12px; cursor: pointer; color: var(--text);
  transition: border-color .15s; font-family: inherit;
  max-width: 280px;
}
.bzp-plan-chip:hover { border-color: var(--primary, #2563eb); }
.bzp-plan-chip .bzp-plan-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #2563eb); flex-shrink: 0; }
.bzp-plan-chip .bzp-plan-chip-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bzp-plan-chip .bzp-plan-chip-arrow { color: #94a3b8; font-size: 9px; flex-shrink: 0; }
/* Dropdown zur Planauswahl */
.bzp-plan-chip-menu {
  position: fixed; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16);
  z-index: 1000; min-width: 240px; overflow: hidden; padding: 4px;
}
.bzp-plan-chip-menu-item {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: 6px; cursor: pointer; font-size: 12px;
}
.bzp-plan-chip-menu-item:hover { background: var(--surface3, #f1f4f9); }
.bzp-plan-chip-menu-item.active { background: rgba(37,99,235,.08); color: var(--primary, #2563eb); font-weight: 600; }
.bzp-plan-chip-menu-sep { height: 1px; background: var(--border); margin: 3px 2px; }

/* ── Status-Pill ─────────────────────────────────────────── */
.bzp-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
}
.bzp-status-pill .bzp-status-dot { width: 6px; height: 6px; border-radius: 50%; }
.bzp-status-pill.ok    { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.bzp-status-pill.ok    .bzp-status-dot { background: #10b981; }
.bzp-status-pill.warn  { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.bzp-status-pill.warn  .bzp-status-dot { background: #f59e0b; }
.bzp-status-pill.late  { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.bzp-status-pill.late  .bzp-status-dot { background: #ef4444; }
.bzp-status-pill.done  { background: #e0f2fe; border-color: #bae6fd; color: #075985; }
.bzp-status-pill.done  .bzp-status-dot { background: #0284c7; }
.bzp-status-pill.idle  { background: var(--surface3, #f1f4f9); border-color: var(--border); color: var(--muted); }
.bzp-status-pill.idle  .bzp-status-dot { background: #94a3b8; }

/* ── Toolbar-Action-Buttons (Teilen / PDF) ─────────────── */
.bzp-toolbar-act {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; font-family: inherit;
  transition: all .12s; white-space: nowrap;
}
.bzp-toolbar-act.sec { background: var(--surface); color: var(--text); border-color: var(--border); }
.bzp-toolbar-act.sec:hover { background: var(--surface3, #f1f4f9); }
.bzp-toolbar-act.pri { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }
.bzp-toolbar-act.pri:hover { filter: brightness(.93); }
/* Jahres-Navigation: bordered pill */
.bzp-year-nav {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--surface);
}
.bzp-year-nav button {
  border: none; background: transparent;
  width: 26px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); font-size: 13px;
  transition: background .1s; padding: 0;
}
.bzp-year-nav button:hover { background: var(--surface3, #f1f4f9); }
.bzp-year-nav span {
  font-weight: 700; font-size: 13px; min-width: 40px; text-align: center;
  padding: 0 4px; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); line-height: 28px;
}
/* View-Toggle: Segmented Control (animiert, gleitender Pill) */
.bzp-view-btns {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
  background: var(--surface3, #f1f4f9);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 3px; gap: 0;
  font-size: 11px; font-weight: 600;
}
.bzp-view-btns .bzp-seg-pill {
  position: absolute; top: 3px; bottom: 3px;
  background: var(--surface, #fff);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15,23,42,.12), 0 1px 1px rgba(15,23,42,.04);
  transition: left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index: 0; pointer-events: none;
  /* Initial wird Position per JS nach Render gesetzt; Fallback: erster Knopf */
  left: 3px; width: calc(33.3333% - 6px);
}
.bzp-view-btns button {
  position: relative; z-index: 1;
  border: none; background: transparent;
  padding: 5px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; border-radius: 5px;
  font-family: inherit; color: var(--muted);
  transition: color .18s ease;
}
.bzp-view-btns button.active {
  color: var(--text); font-weight: 700;
}
.bzp-view-btns button:not(.active):hover { color: #334155; }
/* Schulferien-Chip */
.bzp-schul-toggle {
  display: flex; align-items: center; gap: 5px;
  background: #f0fdf4; color: #065f46; border-radius: 6px; padding: 4px 9px;
  font-size: 11px; font-weight: 600; border: 1px solid #d1fae5;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.bzp-schul-toggle:hover { background: #dcfce7; border-color: #86efac; }
.bzp-schul-toggle.off { background: var(--surface3, #f1f4f9); color: var(--muted); border-color: var(--border); text-decoration: line-through; }

/* ── Body Layout ─────────────────────────────────────────── */
.bzp-body {
  display: flex; flex: 1; overflow: hidden;
}

/* ── Linke Sidebar ───────────────────────────────────────── */
.bzp-sidebar {
  width: 220px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  overflow: hidden;
}
.bzp-sidebar h4 {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; padding: 10px 12px 5px; font-weight: 700;
}
/* Sidebar Tabs */
.bzp-sidebar-tabs {
  display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bzp-sidebar-tab {
  flex: 1; border: none; background: none; padding: 9px 4px;
  font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer;
  text-align: center; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; transition: all .12s;
}
.bzp-sidebar-tab:hover { color: var(--text); }
.bzp-sidebar-tab.active { color: var(--primary, #2563eb); border-bottom-color: var(--primary, #2563eb); }
.bzp-sidebar-content { overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
/* Plan-Item */
.bzp-plan-item {
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.04);
  position: relative; transition: background .1s;
}
.bzp-plan-item:hover { background: var(--surface3, #f1f4f9); }
.bzp-plan-item.active { background: rgba(37,99,235,.07); }
.bzp-plan-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary, #2563eb); border-radius: 0 2px 2px 0;
}
.bzp-plan-item-name { font-weight: 600; font-size: 12px; }
.bzp-plan-item-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
/* Fortschrittsbalken im Plan-Item */
.bzp-plan-item-bar {
  margin-top: 6px; height: 3px; background: var(--border);
  border-radius: 3px; overflow: hidden;
}
.bzp-plan-item-bar-fill { height: 100%; background: var(--primary, #2563eb); border-radius: 3px; }
.bzp-plan-dot {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; font-size: 16px;
  color: var(--muted); opacity: 0; padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.bzp-plan-item:hover .bzp-plan-dot { opacity: 1; }
.bzp-plan-dot:hover { background: rgba(0,0,0,.06); }
/* Sidebar Add-Button */
.bzp-sidebar-add-btn {
  margin: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px; font-size: 11px; color: var(--primary, #2563eb);
  border: 1.5px dashed rgba(37,99,235,.4); background: rgba(37,99,235,.05);
  border-radius: 7px; cursor: pointer; font-family: inherit; transition: all .12s;
}
.bzp-sidebar-add-btn:hover { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.6); }

/* „+ Bauabschnitt hinzufügen"-Zeile am Tabellen-Ende */
tr.bzp-add-ba-row td { border-bottom: none !important; }
.bzp-add-ba-cell {
  padding: 10px 14px !important; text-align: left; cursor: pointer;
  color: var(--primary, #2563eb); font-size: 12px; font-weight: 600;
  background: var(--surface2, #f8fafc) !important;
  border-top: 1.5px dashed rgba(37,99,235,.35) !important;
  transition: background .12s, color .12s;
}
.bzp-add-ba-cell:hover { background: rgba(37,99,235,.06) !important; color: #1d4ed8; }
.bzp-add-ba-spacer { background: var(--surface2, #f8fafc); border-top: 1.5px dashed transparent; }

/* Kalender-Toggle (Sidebar Panel "Kalender") */
.bzp-cal-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; font-size: 11px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; font-family: inherit;
  transition: all .12s; text-align: left;
}
.bzp-cal-toggle:hover { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.4); }
.bzp-cal-toggle.active {
  background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.4);
  color: #047857; font-weight: 600;
}

/* ── Gantt-Zweipane ──────────────────────────────────────── */
.bzp-gantt-main   { flex: 1; display: flex; overflow: hidden; }
/* Linke Seite: KEIN eigener Scrollbar – wird per scrollTop-Sync mit rechts mitgeführt */
.bzp-gantt-fixed  { flex-shrink: 0; width: 416px; overflow: hidden; border-right: 2px solid var(--border-mid, #cbd5e1); background: var(--surface); z-index: 10; }
/* Rechter Gantt-Bereich: beide Scrollbars IMMER sichtbar */
.bzp-gantt-scroll { flex: 1; overflow-x: scroll; overflow-y: scroll; position: relative; scrollbar-gutter: stable; }
.bzp-gantt-inner  { position: relative; min-height: 100%; }
/* Dezentes, konsistentes Scrollbar-Styling (WebKit + Firefox) nur für den rechten Gantt-Bereich */
.bzp-gantt-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }
.bzp-gantt-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.bzp-gantt-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.bzp-gantt-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 2px solid #f1f5f9; }
.bzp-gantt-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.bzp-gantt-scroll::-webkit-scrollbar-corner { background: #f1f5f9; }

/* ── Gantt-Tabelle ───────────────────────────────────────── */
table.bzp-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
table.bzp-table th, table.bzp-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.bzp-table th {
  background: var(--surface3, #f1f4f9); font-size: 10px; font-weight: 700; color: var(--muted);
  padding: 0 6px; height: 26px; line-height: 26px; position: sticky; top: 0; z-index: 20;
  border-bottom: 2px solid var(--border-mid, #cbd5e1);
}
table.bzp-table td {
  height: 38px !important; padding: 0 8px; font-size: 12px; vertical-align: middle;
  box-sizing: border-box;
}
table.bzp-table tr.bzp-phase-row td,
table.bzp-table tr.bzp-phase-row td.bzp-col-g { height: 32px !important; }
table.bzp-table tr.bzp-lei-row td,
table.bzp-table tr.bzp-lei-row td.bzp-col-g { height: 30px !important; }
/* Gantt-Wrap folgt der Row-Höhe */
tr.bzp-lei-row .bzp-wrap { height: 30px !important; }
.bzp-wrap { height: 38px; box-sizing: border-box; }
/* Fixierte Info-Spalten */
.bzp-st-ctrl  {
  background: var(--surface); padding: 0 !important; width: 46px; min-width: 46px;
  text-align: center; vertical-align: middle; white-space: nowrap;
}
.bzp-st-ctrl > * { vertical-align: middle; }
.bzp-st-name  { background: var(--surface); width: 190px; min-width: 190px; position: relative; overflow: hidden; }
.bzp-st-user  { background: var(--surface); color: var(--muted); font-size: 11px; width: 110px; min-width: 110px; }
.bzp-st-prog  { background: var(--surface); width: 90px; min-width: 90px; text-align: center; position: relative; overflow: hidden; }
/* Neue, optional einblendbare Info-Spalten */
.bzp-st-num   { background: var(--surface); width: 44px; min-width: 44px; text-align: center; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bzp-st-resp  { background: var(--surface); color: var(--muted); font-size: 11px; width: 120px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzp-st-start { background: var(--surface); width: 82px; min-width: 82px; text-align: center; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bzp-st-end   { background: var(--surface); width: 82px; min-width: 82px; text-align: center; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bzp-st-dur   { background: var(--surface); width: 56px; min-width: 56px; text-align: center; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bzp-st-notes { background: var(--surface); width: 44px; min-width: 44px; text-align: center; position: relative; }
/* Titel-Zeile "Gewerke & Abschnitte" */
th.bzp-st-head-title {
  background: var(--surface3, #f1f4f9) !important; z-index: 25;
  text-align: left; font-size: 11px; font-weight: 700;
  color: var(--text); letter-spacing: .01em; padding-left: 10px !important;
}
table.bzp-table th.bzp-st-ctrl,
table.bzp-table th.bzp-st-name, table.bzp-table th.bzp-st-user,
table.bzp-table th.bzp-st-prog,
table.bzp-table th.bzp-st-num, table.bzp-table th.bzp-st-resp,
table.bzp-table th.bzp-st-start, table.bzp-table th.bzp-st-end,
table.bzp-table th.bzp-st-dur, table.bzp-table th.bzp-st-notes { background: var(--surface3, #f1f4f9); z-index: 25; }

/* Notizen-Icon in der Spalte */
.bzp-note-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
  color: #9ca3af; font-size: 13px; transition: background .1s, color .1s;
  user-select: none;
}
.bzp-note-icon:hover { background: var(--surface3, #f1f4f9); color: var(--text); }
.bzp-note-icon.has-note { color: #f59e0b; }
.bzp-note-icon.has-note:hover { color: #d97706; }

/* Notizen-Popover */
.bzp-note-pop {
  position: absolute; z-index: 3000; min-width: 280px; max-width: 380px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px;
}
.bzp-note-pop textarea {
  width: 100%; min-height: 90px; resize: vertical; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 12px;
  color: var(--text); background: #fff; box-sizing: border-box;
}
.bzp-note-pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.bzp-note-pop-btn {
  font-size: 11px; padding: 4px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text);
}
.bzp-note-pop-btn.primary { background: #1f2937; color: #fff; border-color: #1f2937; }

/* Farbpicker im Notizen-Popover */
.bzp-note-pop-color { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #e5e7eb; }
.bzp-note-pop-color-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 5px; font-weight: 600; }
.bzp-note-pop-swatches {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 6px;
}
.bzp-note-pop-swatch {
  width: 100%; aspect-ratio: 1 / 1; min-height: 18px; border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 4px; cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s;
}
.bzp-note-pop-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.bzp-note-pop-swatch.active { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #111; transform: scale(1.08); }
.bzp-note-pop-colorctrl { display: flex; align-items: center; gap: 6px; }
.bzp-note-pop-preview {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.1);
  flex-shrink: 0; background: #ccc;
}
.bzp-note-pop-hex {
  width: 42px; height: 22px; padding: 0; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; background: none;
}
.bzp-note-pop-hex::-webkit-color-swatch-wrapper { padding: 2px; }
.bzp-note-pop-hex::-webkit-color-swatch { border: none; border-radius: 2px; }

/* Spalten-Dropdown (Toolbar-Button) */
.bzp-colmenu {
  position: absolute; z-index: 3000; min-width: 220px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px 0;
  font-size: 12px;
}
.bzp-colmenu-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer;
  user-select: none;
}
.bzp-colmenu-item:hover { background: var(--surface3, #f1f4f9); }
.bzp-colmenu-item input[type=checkbox] { margin: 0; accent-color: #2563eb; }
.bzp-colmenu-item.locked { color: var(--muted); cursor: not-allowed; }
.bzp-colmenu-item.locked:hover { background: transparent; }
.bzp-colmenu-sep { height: 1px; background: var(--border); margin: 4px 0; }
/* + Hinzufügen-Button */
.bzp-row-add-btn {
  border: none; background: none; color: #c0c4cc; font-size: 14px; font-weight: 400;
  cursor: pointer; width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; transition: color .12s, background .12s; border-radius: 4px;
  vertical-align: middle;
}
.bzp-row-add-btn:hover { color: var(--primary, #2563eb); background: rgba(37,99,235,.07); }
/* Split-Button [+][+-im-Quadrat] — + direkt, zweites + mit Rahmen = Dropdown */
.bzp-split-btn {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; gap: 4px;
  line-height: 1; width: 100%;
}
.bzp-split-btn .bzp-split-plus  {
  width: 20px; height: 20px; border-radius: 3px;
  font-size: 14px; font-weight: 400;
}
.bzp-split-btn .bzp-split-caret {
  width: 20px; height: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff; color: #6b7280;
  transition: all .12s;
}
.bzp-split-btn .bzp-split-caret:hover {
  border-color: #2563eb; background: rgba(37,99,235,.08); color: #2563eb;
}
/* ── Kontext-Menü / Dropdown ────────────────────────────────── */
.bzp-ctx-menu {
  position: fixed;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  padding: 6px;
  z-index: 1000;
  font-size: 13px;
  user-select: none;
}
.bzp-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #111827;
  line-height: 1.2;
}
.bzp-ctx-item:hover { background: #f3f4f6; }
.bzp-ctx-item.danger { color: #dc2626; }
.bzp-ctx-item.danger:hover { background: #fef2f2; }
.bzp-ctx-sep {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 2px;
}
.bzp-ctx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
/* Spalten-Resize */
.bzp-col-resizer {
  position: absolute; right: -2px; top: 0; bottom: 0; width: 5px;
  cursor: ew-resize; z-index: 5;
}
.bzp-col-resizer.resizing { background: var(--primary, #2563eb); opacity: .5; }
.bzp-col-span { text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 0 6px !important; border-right: 1px solid var(--border); background: var(--surface3, #f1f4f9); }
/* KW-Zwischenzeile in Tagesansicht: dezenter als Monats-Spanne, hinterlegt
   wie der Monats-Header, mit eigenem Border-bottom als sichtbarer Trenner
   zwischen KW- und Tages-Zeile. */
.bzp-col-kw-span {
  font-size: 9px !important; font-weight: 600 !important; text-transform: none !important;
  color: var(--muted); background: var(--surface3, #f1f4f9) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 17px !important; line-height: 17px !important;
}
td.bzp-col-g { padding: 0 !important; vertical-align: middle; overflow: visible !important; position: relative; }

/* ── Kalender-Einfärbung ─────────────────────────────────── */
th.bzp-col-today  { background: rgba(37,99,235,.15) !important; color: var(--primary, #2563eb) !important; }
td.bzp-col-today  { background: rgba(37,99,235,.06) !important; }
th.bzp-col-hol    { background: rgba(239,68,68,.22) !important; color: #991b1b !important; }
td.bzp-col-hol    { background: rgba(239,68,68,.11) !important; }
th.bzp-col-shol   { background: rgba(16,185,129,.18) !important; color: #065f46 !important; }
td.bzp-col-shol   { background: rgba(16,185,129,.09) !important; }
th.bzp-col-we     { background: rgba(0,0,0,.07) !important; color: #94a3b8 !important; }
td.bzp-col-we     { background: rgba(0,0,0,.06) !important; }
/* Kalender-Einfärbung MUSS durchgehend über alle Zeilen sein –
   auch bei Phase-Row, Lei-Row, Hover und Add-BA-Spacer.
   Höhere Specificity (0,3,2 / mit :hover 0,4,2) überschreibt Row-Backgrounds. */
table.bzp-table tr td.bzp-col-today,
table.bzp-table tr.bzp-phase-row td.bzp-col-today,
table.bzp-table tr.bzp-phase-row:hover td.bzp-col-today,
table.bzp-table tr.bzp-lei-row td.bzp-col-today,
table.bzp-table tr.bzp-lei-row:hover td.bzp-col-today,
table.bzp-table tr.bzp-add-ba-row td.bzp-col-today { background: rgba(37,99,235,.10) !important; }

table.bzp-table tr td.bzp-col-hol,
table.bzp-table tr.bzp-phase-row td.bzp-col-hol,
table.bzp-table tr.bzp-phase-row:hover td.bzp-col-hol,
table.bzp-table tr.bzp-lei-row td.bzp-col-hol,
table.bzp-table tr.bzp-lei-row:hover td.bzp-col-hol,
table.bzp-table tr.bzp-add-ba-row td.bzp-col-hol { background: rgba(239,68,68,.14) !important; }

table.bzp-table tr td.bzp-col-shol,
table.bzp-table tr.bzp-phase-row td.bzp-col-shol,
table.bzp-table tr.bzp-phase-row:hover td.bzp-col-shol,
table.bzp-table tr.bzp-lei-row td.bzp-col-shol,
table.bzp-table tr.bzp-lei-row:hover td.bzp-col-shol,
table.bzp-table tr.bzp-add-ba-row td.bzp-col-shol { background: rgba(16,185,129,.12) !important; }

table.bzp-table tr td.bzp-col-we,
table.bzp-table tr.bzp-phase-row td.bzp-col-we,
table.bzp-table tr.bzp-phase-row:hover td.bzp-col-we,
table.bzp-table tr.bzp-lei-row td.bzp-col-we,
table.bzp-table tr.bzp-lei-row:hover td.bzp-col-we,
table.bzp-table tr.bzp-add-ba-row td.bzp-col-we { background: rgba(0,0,0,.07) !important; }
/* Dot-Indikatoren im Header (KW) */
.bzp-hd { display: flex; gap: 2px; justify-content: center; margin-top: 2px; }
.bzp-hd span { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }
.bzp-hd-pub { background: #ef4444; }
.bzp-hd-sch { background: #10b981; }
/* Label der Zeitspalten */
.bzp-col-lbl { text-align: center; font-size: 9px; padding: 0 2px !important; }
.bzp-col-lbl-m { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* ── Monatsansicht: kompakter Header mit Feiertags-Indikator-Leiste (Variante B) ── */
/* ALLE Header-Zeilen (Zeile 1 = Jahr/Titel, Zeile 2 = Monate/Bezeichnungen) hart auf 26 px pinnen.
   Damit links (Gewerke&Abschnitte + Bezeichnung) und rechts (Jahr + Monate) pixelgleich sind. */
table.bzp-view-month thead tr th,
table.bzp-view-month thead tr td {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 1 !important;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Monats-TH: name zentriert, Indikator-Leiste absolut am unteren Rand */
table.bzp-view-month thead th.bzp-month-head {
  position: relative;
  padding: 0 2px !important;
  vertical-align: top;
  overflow: hidden;
  /* Zeile 2 (Monate) um 26px nach oben schieben, damit sie auf gleicher Höhe liegt wie
     die Bezeichnungs-Zeile in der linken Tabelle. Die Jahres-Zeile (Row 1) bleibt darüber. */
  transform: translateY(-26px);
}
.bzp-month-head .bzp-month-name {
  display: block; text-align: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  line-height: 12px;
  padding-top: 3px;
}
.bzp-hol-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: rgba(248,250,252,.7);
}
.bzp-hol-dot {
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ef4444;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #fff;
  cursor: help;
}
.bzp-hol-dot.bzp-hol-dot-school {
  background: #10b981;
  width: 3px; height: 3px;
}

/* ── Phase-Zeilen ────────────────────────────────────────── */
tr.bzp-phase-row td {
  background: var(--surface3, #f1f4f9) !important;
  font-weight: 700; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text);
  padding: 0 10px; cursor: pointer;
  border-top: 2px solid var(--border-mid, #cbd5e1) !important;
  height: 32px !important; line-height: 32px; border-right: none; overflow: visible;
}
tr.bzp-phase-row td.bzp-st-ctrl { background: var(--surface3, #f1f4f9) !important; padding: 0 !important; }
tr.bzp-phase-row td .bzp-phi { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 100%; }
/* Farbiger linker Akzentstreifen */
.bzp-ph-accent-bar { width: 4px; height: 16px; border-radius: 2px; flex-shrink: 0; }
tr.bzp-phase-row td .bzp-ph-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
tr.bzp-phase-row td .bzp-ph-cnt { color: var(--muted); font-weight: 400; font-size: 10px; }
tr.bzp-phase-row td .bzp-ph-chev { font-size: 10px; color: var(--muted); transition: .15s; margin-left: 2px; }
tr.bzp-phase-row.collapsed td .bzp-ph-chev { transform: rotate(-90deg); }
tr.bzp-phase-row td .bzp-ph-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s; }
tr.bzp-phase-row:hover td .bzp-ph-actions { opacity: 1; }
tr.bzp-phase-row:hover td { background: #e9ecf2 !important; }
.bzp-ph-edit-btn, .bzp-ph-del-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 5px;
  width: 22px; height: 22px; font-size: 12px; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: background .12s;
}
.bzp-ph-edit-btn:hover { background: var(--surface3, #f1f4f9); color: var(--text); }
.bzp-ph-del-btn:hover  { background: #fee2e2; color: #ef4444; }
.bzp-st-ctrl { position: relative; }
.bzp-ph-grip {
  position: absolute !important; left: 2px; top: 50%;
  transform: translateY(-50%) !important;
  font-size: 11px; color: #9ca3af;
  display: inline-block; vertical-align: middle;
}

/* ── Gewerk-Zeilen ───────────────────────────────────────── */
.bzp-gw-name {
  display: flex; align-items: center; gap: 6px; padding-left: 16px; overflow: hidden;
}
/* Sub-Zeile (Leistungen): 26px Einrückung wie Mockup */
.bzp-gw-name.bzp-gw-name-sub { padding-left: 52px; }
.bzp-gw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bzp-gw-dot.bzp-gw-dot-sub { width: 5px; height: 5px; opacity: .75; }
.bzp-gw-user { font-size: 10px; color: var(--muted); }
.bzp-gw-chev-btn {
  border: none; background: none; cursor: pointer; font-size: 9px; color: var(--muted);
  padding: 2px 4px; border-radius: 3px; transition: background .12s; font-family: inherit;
}
.bzp-gw-chev-btn:hover { background: var(--border); color: var(--text); }
/* Gewerk-Collapse-Chevron in der Name-Zelle (vor dem Dot) */
.bzp-gw-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-right: 4px;
  font-size: 10px; color: var(--muted, #6b7280); cursor: pointer;
  border-radius: 3px; transition: background .12s, color .12s; flex-shrink: 0;
}
.bzp-gw-chev:hover { background: var(--surface3, #f1f4f9); color: var(--text); }
/* ⋮-Button: absolut positioniert rechts in der Name-Zelle */
.bzp-dot-btn {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; font-size: 15px;
  color: var(--muted); opacity: 0; padding: 1px 4px; border-radius: 4px; z-index: 5;
  transition: opacity .12s;
}
tr:hover .bzp-dot-btn { opacity: 1; }
.bzp-dot-btn:hover { background: rgba(0,0,0,.07); }
/* Drag Grip absolut in Name-TD (links) */
.bzp-drag-grip {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  cursor: move; color: #ccc; font-size: 9px;
  opacity: 0; transition: opacity .12s; user-select: none; padding: 0 3px;
}
tr:hover .bzp-drag-grip { opacity: 1; }

/* ── Leistungs-Zeilen (3. Ebene) ─────────────────────────── */
tr.bzp-lei-row td { background: rgba(0,0,0,.012) !important; font-size: 11px; height: 30px !important; line-height: 1.2 !important; }
tr.bzp-lei-row:hover td { background: rgba(0,0,0,.025) !important; }
tr.bzp-lei-row .bzp-wrap { height: 30px !important; }
td.bzp-lei-name-td { padding-left: 0 !important; }
.bzp-bar-lei { height: 12px !important; top: 50%; transform: translateY(-50%); }

/* Hover-Effekt auf fixierten Info-Spalten */
tr:hover .bzp-st-ctrl, tr:hover .bzp-st-name,
tr:hover .bzp-st-user, tr:hover .bzp-st-prog,
tr:hover .bzp-st-num, tr:hover .bzp-st-resp,
tr:hover .bzp-st-start, tr:hover .bzp-st-end,
tr:hover .bzp-st-dur, tr:hover .bzp-st-notes,
tr:hover .bzp-st-start, tr:hover .bzp-st-end { background: rgba(37,99,235,.03) !important; }

/* Inline-Edit */
.bzp-editable { cursor: text; border-radius: 3px; padding: 1px 3px; transition: background .1s; display: inline-block; }
.bzp-editable:hover { background: rgba(37,99,235,.08); outline: 1px dashed rgba(37,99,235,.4); }
.bzp-date-computed { font-size: 10px; color: var(--muted); font-style: italic; }

/* ── Fortschritt-Spalte ──────────────────────────────────── */
.bzp-prog-pill {
  width: 48px; height: 6px; background: var(--border);
  border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.bzp-prog-fill { height: 100%; border-radius: 6px; }
/* Farbcodiert nach Soll-Ist-Vergleich */
.bzp-prog-fill.bzp-prog-done       { background: #10b981; } /* 100 % fertig */
.bzp-prog-fill.bzp-prog-ahead      { background: #0ea5e9; } /* vor Plan (>= +10 %) */
.bzp-prog-fill.bzp-prog-on-track   { background: #34d399; } /* im Plan (-5 .. +10 %) */
.bzp-prog-fill.bzp-prog-warn       { background: #fbbf24; } /* leicht im Verzug (-15 .. -5 %) */
.bzp-prog-fill.bzp-prog-late       { background: #f87171; } /* im Verzug (< -15 %) */
.bzp-prog-fill.bzp-prog-notstarted { background: #cbd5e1; } /* noch nicht gestartet */
/* Legacy-Aliase für Abwärtskompatibilität */
.bzp-prog-fill.bzp-prog-high { background: #34d399; }
.bzp-prog-fill.bzp-prog-mid  { background: #fbbf24; }
.bzp-prog-fill.bzp-prog-low  { background: #f87171; }
.bzp-prog-txt {
  font-size: 10px; font-weight: 700; min-width: 26px; text-align: right; color: var(--muted);
}

/* ── Balken ──────────────────────────────────────────────── */
.bzp-wrap { position: relative; height: 38px; display: flex; align-items: center; overflow: visible; }
.bzp-bar {
  position: absolute; height: 22px; border-radius: 7px;
  cursor: grab; user-select: none; overflow: visible;
  /* Keine horizontale Unterteilung (kein inset-top-highlight). */
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: box-shadow .12s, opacity .12s;
  /* Deckend füllen → keine vertikalen Tages-Trennlinien schimmern durch. */
  opacity: 1;
}
.bzp-bar:hover { box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.bzp-bar.dragging { cursor: grabbing !important; opacity: .85; box-shadow: 0 6px 18px rgba(0,0,0,.28); z-index: 50; }
.bzp-bar.bzp-bar-lei { opacity: 1; }
.bzp-bar.bzp-bar-lei:hover { opacity: 1; }
/* Parent-Gewerk (mit Leistungen): dunkler Rand als Erkennungsmerkmal, ebenfalls transparent. */
.bzp-bar.bzp-bar-parent {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.15);
}
.bzp-bar.bzp-bar-parent:hover {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.22);
}
.bzp-done { position: absolute; left: 0; top: 0; bottom: 0; opacity: .2; pointer-events: none; background: #000; }
/* Resize-Handles */
.bzp-rh { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 6; display: flex; align-items: center; justify-content: center; }
.bzp-rh-l { left: 0; border-radius: 7px 0 0 7px; }
.bzp-rh-r { right: 0; border-radius: 0 7px 7px 0; }
.bzp-rh::after { content: ''; width: 2px; height: 12px; background: rgba(255,255,255,.6); border-radius: 2px; }
/* Label vor / AT nach Balken */
.bzp-bar-pre {
  position: absolute; right: calc(100% + 5px); top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 600; color: var(--text); white-space: nowrap;
  background: rgba(255,255,255,.95); padding: 1px 5px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1); pointer-events: none; z-index: 9;
}
.bzp-bar-post {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--muted); white-space: nowrap; font-weight: 600;
  pointer-events: none; z-index: 9;
}
/* Meilenstein-Balken */
.bzp-bar-ms { height: 6px !important; top: 50%; transform: translateY(-50%); }
.bzp-ms-wrap {
  position: absolute; right: -2px; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none; overflow: visible; z-index: 10;
}
.bzp-ms-diamond {
  width: 14px; height: 14px; background: #dc2626; transform: rotate(45deg);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(220,38,38,.35);
  flex-shrink: 0; cursor: pointer; pointer-events: all;
}
.bzp-ms-label {
  position: absolute; top: calc(50% + 12px); right: -4px; transform: translateX(50%);
  font-size: 7px; font-weight: 700; white-space: nowrap;
  color: #dc2626; background: rgba(255,255,255,.85); padding: 1px 3px; border-radius: 3px;
}

/* ── Drag & Drop ─────────────────────────────────────────── */
tr.bzp-row-dragging { opacity: .35; pointer-events: none; }
tr.bzp-row-drag-above td { border-top: 2.5px solid var(--primary, #2563eb) !important; }
tr.bzp-row-drag-below td { border-bottom: 2.5px solid var(--primary, #2563eb) !important; }
tr.bzp-phase-row.bzp-phase-drag-over td { background: rgba(37,99,235,.07) !important; outline: 1px dashed var(--primary, #2563eb); }
tr.bzp-phase-row.bzp-section-drag-over td { border-top: 2px solid var(--primary, #2563eb) !important; }

/* ── HTML5-DnD für Leistungen (linke Liste) ───────────────── */
tr.bzp-dnd-dragging { opacity: .40; }
tr.bzp-dnd-dragging td { background: rgba(37,99,235,.04); }
/* Insertion-Line oben/unten (2px Balken in Primary-Farbe) */
tr.bzp-lei-row.bzp-dnd-insert-above td {
  box-shadow: inset 0 2px 0 0 var(--primary, #2563eb) !important;
}
tr.bzp-lei-row.bzp-dnd-insert-below td {
  box-shadow: inset 0 -2px 0 0 var(--primary, #2563eb) !important;
}
/* Highlight für Gewerk-TR als Drop-Ziel */
tr.bzp-dnd-hover td {
  background: rgba(37,99,235,.10) !important;
  outline: 1px dashed var(--primary, #2563eb);
  outline-offset: -1px;
}

/* ── Heute-Linie ─────────────────────────────────────────── */
.bzp-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary, #2563eb); opacity: .7; pointer-events: none; z-index: 25; }
.bzp-today-line::before { content: '▼'; position: absolute; top: -2px; left: -5px; font-size: 9px; color: var(--primary, #2563eb); }

/* ── SVG-Overlay ─────────────────────────────────────────── */
.bzp-dep-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; overflow: visible; }

/* ── Fortschritt-Popup ───────────────────────────────────── */
.bzp-prog-popup {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px;
  animation: bzpCtxFadeIn .08s ease forwards;
}
.bzp-prog-popup-lbl { text-align: center; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.5px; }
.bzp-prog-popup-slider { width: 100%; accent-color: var(--primary, #2563eb); cursor: pointer; height: 6px; }
.bzp-prog-popup-btns { display: flex; justify-content: center; }
.bzp-prog-popup-ok {
  background: var(--primary, #2563eb); color: #fff; border: none; border-radius: 6px;
  padding: 5px 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity .12s;
}
.bzp-prog-popup-ok:hover { opacity: .85; }

/* ── Drag-Ghost Overlay (flackerfreies Live-Resize) ──────── */
.bzp-drag-ghost {
  position: absolute;
  height: 22px;
  border-radius: 7px;
  opacity: .55;
  border: 2px dashed rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 50;
  transition: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ── Arbeitstag-Dialog ───────────────────────────────────── */
.bzp-wd-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; animation: bzpCtxFadeIn .1s ease forwards;
}
.bzp-wd-dialog {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.22);
  padding: 20px 24px 16px; max-width: 380px; width: 90%;
}
.bzp-wd-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.bzp-wd-body  { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.bzp-wd-btns  { display: flex; gap: 8px; }
.bzp-wd-btn   { flex: 1; padding: 8px 10px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .12s; }
.bzp-wd-btn span { font-weight: 400; opacity: .75; }
.bzp-wd-btn-sec { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.bzp-wd-btn-pri { background: var(--primary, #2563eb); color: #fff; }
.bzp-wd-btn:hover { opacity: .82; }

/* ── Spalten-Resize ──────────────────────────────────────── */
.bzp-col-sort-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-size: 11px;
  flex-shrink: 0; font-weight: 700;
}

/* ── Detail-Popover (anchored) ────────────────────────────── */
.bzp-detail {
  position: fixed; top: 80px; left: 50%;
  width: 420px; max-width: 94vw; max-height: 82vh;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.08);
  display: none; flex-direction: column; overflow: hidden;
  z-index: 220; opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease;
}
.bzp-detail.open { display: flex; opacity: 1; transform: translateY(0); }
/* Popover-Pfeil (nach oben zeigend) */
.bzp-detail::before {
  content: ""; position: absolute;
  width: 12px; height: 12px; background: var(--surface);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
  top: var(--arrow-top, -7px);
  left: var(--arrow-left, 24px);
  display: var(--arrow-display, block);
}
.bzp-detail-backdrop {
  position: fixed; inset: 0; background: transparent;
  z-index: 210; pointer-events: none;
}
.bzp-detail-backdrop.open { pointer-events: auto; }
.bzp-dp-head { padding: 14px 18px 11px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.bzp-dp-head h4 { font-size: 14px; font-weight: 700; flex: 1; margin: 0; }
.bzp-dp-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.bzp-dp-close {
  border: none; background: none; cursor: pointer; font-size: 18px; color: var(--muted);
  padding: 4px 8px; border-radius: 5px; transition: background .12s, color .12s;
}
.bzp-dp-close:hover { background: var(--surface3, #f1f4f9); color: var(--text); }
.bzp-dp-body { padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; overflow-y: auto; }
.bzp-dp-body .bzp-dp-field.full { grid-column: 1 / -1; }
.bzp-dp-field label { display: block; font-size: 9.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bzp-dp-field input, .bzp-dp-field select { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 12px; font-family: inherit; }
.bzp-dp-field input[type=color] { width: 40px; height: 30px; border-radius: 5px; padding: 2px; }
.bzp-dp-body .bzp-dp-field { grid-column: 1 / -1; }
.bzp-dp-daterange { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.bzp-dp-daterange .bzp-dp-field { grid-column: auto; }
.bzp-dp-daterow { display: flex; align-items: center; gap: 10px; }
.bzp-dp-modebtns { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #f8fafc; }
.bzp-dp-modebtn {
  border: none; background: transparent; padding: 5px 12px; font-size: 11px; cursor: pointer;
  color: var(--muted); font-weight: 600; transition: background .12s, color .12s;
}
.bzp-dp-modebtn:hover { background: #eef2f7; }
.bzp-dp-modebtn.active { background: #1f2937; color: #fff; }

.bzp-dp-color-wrap { display: flex; flex-direction: column; gap: 6px; }
.bzp-dp-swatches {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
}
.bzp-dp-swatch {
  width: 100%; aspect-ratio: 1 / 1; min-height: 20px; border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 4px; cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s;
}
.bzp-dp-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.bzp-dp-swatch.active { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #111; transform: scale(1.08); }
.bzp-dp-color-row { display: flex; align-items: center; gap: 8px; }
.bzp-dp-color-hex { font-size: 11px; color: var(--muted); font-family: monospace; }
.bzp-dp-inh-badge {
  display: inline-block; margin-left: 6px; font-size: 9px; padding: 1px 6px;
  background: #fef3c7; color: #92400e; border-radius: 999px; text-transform: none; letter-spacing: 0;
}

.bzp-dp-actions { padding: 12px 18px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }

/* ── Statusleiste (unten) ───────────────────────────────── */
.bzp-legend {
  padding: 5px 14px; background: var(--surface); border-top: 1px solid var(--border);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 10px; color: var(--muted); flex-shrink: 0;
}

/* ── Toast (kleine Benachrichtigung unten mittig) ───────── */
.bzp-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: #1a1a1a; color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 5000; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bzp-toast.show {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.bzp-leg-label { font-weight: 700; color: var(--text); font-size: 10px; }
.bzp-leg-item { display: flex; align-items: center; gap: 4px; }
.bzp-leg-bar { width: 16px; height: 8px; border-radius: 3px; }
.bzp-leg-diamond { width: 8px; height: 8px; background: #dc2626; transform: rotate(45deg); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(220,38,38,.35); }
.bzp-leg-today { width: 2px; height: 12px; background: var(--primary, #2563eb); border-radius: 2px; }
.bzp-statusbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bzp-stat-badge {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.bzp-stat-badge .bzp-stat-val { color: var(--text); font-weight: 700; }
.bzp-stat-badge .bzp-stat-val.warn { color: #b45309; }
.bzp-stat-badge .bzp-stat-val.late { color: #b91c1c; }
.bzp-stat-badge .bzp-stat-val.done { color: #059669; }
.bzp-stat-sep { color: #cbd5e1; }
.bzp-leg-bar  { width: 16px; height: 8px; border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════
   PDF-Export-Dialog (Bauzeitenplan)
   ═══════════════════════════════════════════════════════════════ */
.bzp-pdf-overlay{
  position:fixed; inset:0; background:rgba(17,24,39,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9000; padding:24px; animation:bzpPdfFadeIn .15s ease;
}
@keyframes bzpPdfFadeIn{ from{opacity:0} to{opacity:1} }
.bzp-pdf-modal{
  background:#fff; border-radius:14px; overflow:hidden;
  /* Breiter für Querformat-Vorschau; fällt bei kleinen Screens auf 96vw zurück */
  width:min(1600px, 96vw); max-height:94vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.bzp-pdf-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #e5e7eb; background:#fafafa;
}
.bzp-pdf-head h2{ margin:0; font-size:16px; font-weight:600; color:#1f2937; }
.bzp-pdf-sub{ font-size:12px; color:#6b7280; margin-top:2px; }
.bzp-pdf-close{
  background:none; border:0; font-size:22px; color:#6b7280;
  cursor:pointer; padding:2px 10px; border-radius:6px; line-height:1;
}
.bzp-pdf-close:hover{ background:#f0f0f5; color:#111; }

.bzp-pdf-body{
  display:grid; grid-template-columns:340px 1fr;
  flex:1; min-height:0; overflow:hidden;
}
.bzp-pdf-opts{
  padding:16px 18px; border-right:1px solid #e5e7eb; overflow:auto;
}
.bzp-pdf-sec{ margin-bottom:18px; }
.bzp-pdf-sec h3{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#6b7280; text-transform:uppercase;
}

/* Collapse-Panels im PDF-Dialog */
.bzp-pdf-panel{
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  margin-bottom:10px; overflow:hidden;
}
.bzp-pdf-panel > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#f9fafb;
  font-size:12px; color:#1f2937;
}
.bzp-pdf-panel > summary::-webkit-details-marker{ display:none; }
.bzp-pdf-panel > summary:hover{ background:#f3f4f6; }
.bzp-pdf-panel-title{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#374151; text-transform:uppercase;
}
.bzp-pdf-panel-caret{
  width:11px; height:11px; flex-shrink:0; color:#6b7280;
  transition:transform .15s ease; transform:rotate(-90deg);
  vertical-align:-1px;
}
.bzp-pdf-panel[open] > summary .bzp-pdf-panel-caret{ transform:rotate(0deg); }
.bzp-pdf-panel-summary{
  font-size:11px; color:#6b7280; font-weight:400;
  max-width:55%; text-align:right; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.bzp-pdf-panel-body{ padding:12px 12px 4px; }
.bzp-pdf-panel-body .bzp-pdf-sec:last-child{ margin-bottom:8px; }
.bzp-pdf-sub{
  margin:4px 0 6px; font-size:10px; font-weight:600; letter-spacing:.05em;
  color:#9ca3af; text-transform:uppercase;
}

/* Slider-Zeilen im PDF-Dialog */
.bzp-pdf-slider-row{
  display:flex; align-items:center; gap:10px;
  margin-top:8px;
  padding-right:0; /* Werte bündig mit dem Panel-Body-Rand (= 12 px vom Dialograhmen, identisch zu den Papier-Chips) */
}
.bzp-pdf-slider-row > label{
  min-width:84px; font-size:12px; color:#6b7280;
}
.bzp-pdf-slider{
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; background:#e5e7eb; border-radius:4px;
  outline:none; cursor:pointer;
}
.bzp-pdf-slider:disabled{ opacity:.4; cursor:not-allowed; }
.bzp-pdf-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#3b82f6; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  cursor:pointer;
}
.bzp-pdf-slider::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#3b82f6; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  cursor:pointer;
}
.bzp-pdf-slider-val{
  min-width:52px; text-align:right;
  font-size:12px; font-weight:600; color:#1f2937;
  font-variant-numeric:tabular-nums;
}
.bzp-pdf-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.bzp-pdf-row label{ font-size:12px; color:#6b7280; }
.bzp-pdf-inp{
  border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px;
  font:inherit; font-size:13px; color:#1f2937; background:#fff; width:100%;
}
.bzp-pdf-inp:focus{ outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px #eff6ff; }

.bzp-pdf-seg{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; background:#f9fafb;
}
.bzp-pdf-seg-3{ grid-template-columns:repeat(3,1fr); }
.bzp-pdf-seg-2{ grid-template-columns:repeat(2,1fr); }
.bzp-pdf-seg button{
  border:0; background:transparent; padding:8px 4px;
  font:inherit; font-size:12px; color:#1f2937; cursor:pointer;
  border-right:1px solid #e5e7eb;
}
.bzp-pdf-seg button:last-child{ border-right:0; }
.bzp-pdf-seg button.active{
  background:#fff; color:#3b82f6; font-weight:600;
  box-shadow:inset 0 -2px 0 #3b82f6;
}

.bzp-pdf-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.bzp-pdf-chip{
  border:1px solid #e5e7eb; border-radius:999px;
  padding:5px 12px; font-size:12px; cursor:pointer; user-select:none;
  background:#fff; color:#1f2937;
}
.bzp-pdf-chip.active{ background:#eff6ff; border-color:#3b82f6; color:#3b82f6; font-weight:600; }

.bzp-pdf-chk{ display:flex; flex-direction:column; gap:2px; }
.bzp-pdf-chk label{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#1f2937;
  padding:4px 4px; border-radius:6px; cursor:pointer;
}
.bzp-pdf-chk label:hover{ background:#f5f5f7; }
.bzp-pdf-chk input{ margin:0; }

.bzp-pdf-pre{
  background:#4b5563; padding:20px; overflow:hidden;
  display:flex; flex-direction:column;
}
.bzp-pdf-pre-label{
  font-size:11px; color:#d1d5db; margin-bottom:10px;
  text-align:center; letter-spacing:.04em;
}
.bzp-pdf-pre-scroll{
  flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center;
  padding:4px;
}
.bzp-pdf-page{
  background:#fff; width:100%; max-width:720px; min-height:480px;
  border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.bzp-pdf-pre-empty{
  padding:60px 20px; text-align:center; color:#9ca3af; font-size:13px;
}

.bzp-pdf-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; border-top:1px solid #e5e7eb; background:#fafafa; gap:10px;
}
.bzp-pdf-hint{ font-size:12px; color:#6b7280; }
.bzp-pdf-kbd{
  display:inline-block; padding:1px 6px; border:1px solid #e5e7eb;
  border-radius:4px; background:#f5f5f7;
  font:11px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.bzp-pdf-btns{ display:flex; gap:8px; }
.bzp-pdf-btn{
  border:1px solid #e5e7eb; background:#fff; color:#1f2937;
  padding:8px 14px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:500;
}
.bzp-pdf-btn:hover{ background:#f5f5f7; }
.bzp-pdf-btn-pri{ background:#3b82f6; color:#fff; border-color:#3b82f6; }
.bzp-pdf-btn-pri:hover{ background:#2563eb; }
.bzp-pdf-btn-sec{ background:#fff; color:#3b82f6; border-color:#3b82f6; }
.bzp-pdf-btn-sec:hover{ background:#eff6ff; }
.bzp-pdf-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Responsive: bei schmalen Viewports Vorschau unterhalb */
@media (max-width: 900px){
  .bzp-pdf-body{ grid-template-columns:1fr; }
  .bzp-pdf-opts{ border-right:0; border-bottom:1px solid #e5e7eb; max-height:40vh; }
}

/* ═══════════════════════════════════════════════════════════
   KOSTENSCHÄTZUNG DRUCKVORSCHAU – Seiteninhalt
═══════════════════════════════════════════════════════════ */

/* Projektinfo-Box (Seite 1) */
.ke-pp-info-box {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 24px;
  border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden;
}
.ke-pp-info-cell {
  padding: 10px 14px; background: #f8f9fb;
  border-right: 1px solid #e0e0e0;
}
.ke-pp-info-label {
  font-size: 8.5px; font-weight: 700; color: #1a3a6c;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px;
}
.ke-pp-info-value { font-size: 11px; color: #1a1a1a; line-height: 1.4; }

/* Zusammenfassungs-Tabelle (Seite 1) */
.ke-pp-sum-table {
  width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 11px;
}
.ke-pp-sum-table thead th {
  font-size: 9.5px; font-weight: 700; color: #fff;
  background: #1a3a6c; padding: 7px 10px;
  letter-spacing: .3px;
}
.ke-pp-sum-table td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.ke-pp-sum-table tr.ke-pp-sum-kg td {
  font-weight: 700; background: #eef2f9;
  border-bottom: 1px solid #dde4f0;
}
.ke-pp-sum-table tr.ke-pp-sum-sep td { padding: 0; height: 1px; background: #bbb; }
.ke-pp-sum-table tr.ke-pp-sum-row td { background: #fafafa; }
.ke-pp-sum-table tr.ke-pp-sum-total td {
  font-weight: 700; font-size: 12px; color: #1a3a6c;
  background: #eef2f9; border-top: 2px solid #1a3a6c; border-bottom: none;
}

/* Signaturblock (Seite 1) */
.ke-pp-sig-block {
  margin-top: 40px; padding-top: 14px;
  border-top: 1px solid #ddd;
  font-size: 10px; color: #888;
}
.ke-pp-sig-line { font-size: 10px; color: #999; }

/* Detail-Tabelle (Seiten 2–N) */
.ke-pp-detail-table {
  width: 100%; border-collapse: collapse; font-size: 10.5px; margin-bottom: 12px;
}
.ke-pp-detail-table thead th {
  font-size: 9px; font-weight: 700; color: #fff;
  background: #1a3a6c; padding: 6px 8px;
  white-space: nowrap; letter-spacing: .3px;
}
.ke-pp-col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* KG-Ebene 1 (Hauptgruppe) */
.ke-pp-detail-table tr.ke-pp-row-l1 td {
  padding: 7px 8px; background: #1a3a6c; color: #fff;
  font-size: 11px; font-weight: 700; border-bottom: none;
}
/* KG-Ebene 2 (Untergruppe) */
.ke-pp-detail-table tr.ke-pp-row-l2 td {
  padding: 5px 8px 5px 20px; background: #dde6f5; color: #1a2a4a;
  font-size: 10.5px; font-weight: 600; border-bottom: 1px solid #c8d5ea;
}
/* KG-Ebene 3 (Unteruntergruppe) */
.ke-pp-detail-table tr.ke-pp-row-l3 td {
  padding: 4px 8px 4px 22px; background: #eef2f9; color: #1a2a4a;
  font-size: 10px; font-weight: 600; border-bottom: 1px solid #dce4f0;
}
/* Positions-Zeilen */
.ke-pp-detail-table tr.ke-pp-row-item td {
  padding: 4px 8px 4px 36px; color: #222;
  border-bottom: 1px solid #f0f0f0;
}
.ke-pp-detail-table tr.ke-pp-row-item:nth-child(odd) td { background: #fafafa; }
.ke-pp-detail-table tr.ke-pp-row-item:nth-child(even) td { background: #fff; }
/* Eventualpositionen */
.ke-pp-detail-table tr.ke-pp-row-item.ke-pp-ep td {
  color: #888; font-style: italic; background: #f5f5f5 !important;
}
/* Notiz-Zeilen */
.ke-pp-detail-table tr.ke-pp-row-note td {
  padding: 2px 8px 4px 36px; background: #fffbf0;
  border-bottom: 1px solid #f0f0f0;
}
/* Chips */
.ke-pp-chip-ep {
  display: inline-block; background: #fff3e0; color: #b35900;
  border-radius: 3px; padding: 1px 5px; font-size: 8.5px;
  font-style: normal; margin-left: 6px; vertical-align: middle;
}
.ke-pp-chip-note {
  display: inline-block; background: #fff9c4; color: #6b4f00;
  border-radius: 3px; padding: 1px 5px; font-size: 8.5px;
}

/* Gesamtsummen am Ende der letzten Seite */
.ke-pp-final-sums {
  margin-top: 16px; display: flex; justify-content: flex-end;
  border-top: 2px solid #1a3a6c; padding-top: 10px;
}
.ke-pp-final-sums table { border-collapse: collapse; min-width: 260px; font-size: 11px; }
.ke-pp-final-sums td { padding: 4px 10px; }
.ke-pp-final-sums td:last-child { text-align: right; font-variant-numeric: tabular-nums; min-width: 100px; }
.ke-pp-final-sums tr.ke-pp-fs-netto td { font-weight: 700; font-size: 12px; }
.ke-pp-final-sums tr.ke-pp-fs-brutto td {
  font-weight: 700; font-size: 13px; color: #1a3a6c;
  border-top: 1.5px solid #1a3a6c; padding-top: 7px;
}

/* ── Kennwerte-Popover ───────────────────────────────────── */
.ke-kw-wrap {
  position: relative;
}
.ke-kw-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 14px 16px;
  width: 250px;
}
.ke-kw-pop-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.ke-kw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ke-kw-label {
  font-size: 12px;
  color: #444;
  flex: 1;
  line-height: 1.3;
}
.ke-kw-hint {
  display: block;
  font-size: 10px;
  color: #aaa;
  font-weight: 400;
}
.ke-kw-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ke-kw-input {
  width: 72px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  text-align: right;
  padding: 0 6px;
  font-family: inherit;
  background: #fafafa;
  color: #1a1a1a;
}
.ke-kw-input:focus {
  outline: none;
  border-color: #1a3a6e;
  background: #fff;
}
.ke-kw-unit {
  font-size: 11px;
  color: #888;
  width: 22px;
}
.ke-kw-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 10px 0;
}
.ke-kw-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.ke-kw-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #666;
}
.ke-kw-res-val {
  font-weight: 600;
  color: #bbb;
  font-variant-numeric: tabular-nums;
}
.ke-kw-save {
  width: 100%;
  height: 30px;
  border-radius: 6px;
  background: #1a3a6e;
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.ke-kw-save:hover { background: #243f80; }
.ke-kw-save:disabled { opacity: .6; cursor: default; }

/* Drucken: Toolbar + Sidebar ausblenden */
#ke-print-preview-overlay.pp-printing .print-preview-toolbar,
#ke-print-preview-overlay.pp-printing .pp-sidebar { display: none !important; }
#ke-print-preview-overlay.pp-printing .print-preview-wrap { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════ */
/* Phase C – Schritt 3: Bauabschnitt-Stil (Ohne/Standard/Farbe)        */
/* ═══════════════════════════════════════════════════════════════════ */

/* Farb-Swatch-Grid (12 in einer Zeile, exakt Breite wie Toggle) */
.bzp-sw-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:4px; width:100%; padding:3px;
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px;
}
.bzp-sw{
  aspect-ratio:1; border-radius:5px; cursor:pointer;
  border:2px solid transparent; position:relative;
  transition:transform .15s ease;
}
.bzp-sw:hover{ transform:scale(1.08); }
.bzp-sw.active{
  border-color:#0f172a;
  box-shadow:0 0 0 1px #fff inset;
}
.bzp-sw-custom{
  background:conic-gradient(from 0deg,#ef4444,#f59e0b,#facc15,#22c55e,
                            #06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.bzp-sw-custom.active{ border-color:#0f172a; }
.bzp-sw-customin{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
  border:none; padding:0; width:100%; height:100%;
}

/* Segmented Toggle (Stil) */
.bzp-seg{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px;
  padding:3px; font-size:12px; font-weight:600; width:100%;
}
.bzp-seg-pill{
  position:absolute; top:3px; bottom:3px;
  background:#fff; border-radius:6px;
  box-shadow:0 1px 3px rgba(15,23,42,.12), 0 1px 1px rgba(15,23,42,.04);
  transition:left .28s cubic-bezier(.5,0,.2,1), width .28s cubic-bezier(.5,0,.2,1);
  z-index:0; pointer-events:none;
}
.bzp-seg button{
  position:relative; z-index:1;
  border:none; background:transparent;
  padding:6px 0; color:#64748b; cursor:pointer;
  font-size:12px; font-weight:600;
  transition:color .18s ease;
  font-family:inherit;
}
.bzp-seg button.active{ color:#0f172a; }
.bzp-seg button:not(.active):hover{ color:#334155; }

/* Parent-Zeilen-Varianten (Bauabschnitt-Kopfzeile im Gantt + PDF) */
/* "Ohne" = aktuelle Darstellung, keine zusätzliche Regel nötig      */

/* ── Standard: blaue Akzentfüllung ──────────────────────────── */
tr.bzp-phase-row.bzp-row-style-standard > td,
tr.bzp-phase-row.bzp-row-style-standard:hover > td{
  background:#dbeafe !important;
  color:#1e3a8a;
}
#bzp-left-table tr.bzp-phase-row.bzp-row-style-standard > td:first-child{
  box-shadow: inset 4px 0 0 #2563eb;
}

/* ── Farbe: helle Füllung + subtile WE/Feiertag-Overlays ────── */
tr.bzp-phase-row.bzp-row-style-farbe > td,
tr.bzp-phase-row.bzp-row-style-farbe:hover > td{
  background: var(--bzp-row-fill, #f1f5f9) !important;
  color: #0f172a !important;
}
/* Akzentleiste nur auf der linken Tabelle (erste Zelle = ctrl) */
#bzp-left-table tr.bzp-phase-row.bzp-row-style-farbe > td:first-child{
  box-shadow: inset 4px 0 0 var(--bzp-row-bar, #64748b);
}
/* Wochenende/Feiertag: Füllung bleibt als Basis, Overlay via Box-Shadow */
table.bzp-table tr.bzp-phase-row.bzp-row-style-farbe > td.bzp-col-we,
table.bzp-table tr.bzp-phase-row.bzp-row-style-farbe:hover > td.bzp-col-we{
  background: var(--bzp-row-fill, #f1f5f9) !important;
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.06) !important;
}
table.bzp-table tr.bzp-phase-row.bzp-row-style-farbe > td.bzp-col-hol,
table.bzp-table tr.bzp-phase-row.bzp-row-style-farbe:hover > td.bzp-col-hol{
  background: var(--bzp-row-fill, #f1f5f9) !important;
  box-shadow: inset 0 0 0 9999px rgba(220,38,38,.18) !important;
}
table.bzp-table tr.bzp-phase-row.bzp-row-style-farbe > td.bzp-col-shol,
table.bzp-table tr.bzp-phase-row.bzp-row-style-farbe:hover > td.bzp-col-shol{
  background: var(--bzp-row-fill, #f1f5f9) !important;
  box-shadow: inset 0 0 0 9999px rgba(16,185,129,.14) !important;
}

/* ═══════════════════════════════════════════════════════════
   BAUDOKUMENTATION
   ═══════════════════════════════════════════════════════════ */

/* ── Projekt-Selector Bar ───────────────────────────────── */
.baudok-project-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: var(--header-h); z-index: 100;
  box-shadow: var(--shadow-sm);
}
.baudok-project-bar label {
  font-weight: 600; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.baudok-project-bar select {
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 0.875rem; font-family: var(--font);
  background: var(--surface2); color: var(--text); cursor: pointer; min-width: 280px;
}
.baudok-project-bar select:focus { outline: none; border-color: var(--primary); }
.baudok-project-bar .spacer { flex: 1; }

/* ── Zurück-Button in Sub-Nav ───────────────────────────── */
.bdok-back-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 0.8rem; font-weight: 500;
  color: var(--muted); padding: 12px 10px 12px 4px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s; white-space: nowrap; flex-shrink: 0;
}
.bdok-back-btn:hover { color: var(--primary); }
.bdok-subnav-sep {
  width: 1px; height: 18px; background: var(--border-mid);
  margin: 0 6px; flex-shrink: 0;
}

/* ── Sub-Navigation ─────────────────────────────────────── */
.baudok-subnav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex; gap: 2px; align-items: center;
  /* Aus dem #app-Padding herausbrechen → volle Breite */
  margin: -24px -24px 0 -24px;
  position: sticky; top: var(--header-h); z-index: 99;
}
.baudok-subnav button {
  background: none; border: none; color: var(--muted);
  padding: 12px 16px; font-size: 0.825rem; font-weight: 500; cursor: pointer;
  font-family: var(--font); border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.baudok-subnav button:hover { color: var(--text); }
.baudok-subnav button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.baudok-subnav .bdg {
  background: rgba(0,113,227,0.12); color: var(--primary);
  padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 700;
}
.baudok-subnav .bdg-red   { background: rgba(255,59,48,0.12);  color: var(--danger); }
.baudok-subnav .bdg-green { background: rgba(52,199,89,0.12);  color: #1a7f37; }

/* ── Content-Bereich ────────────────────────────────────── */
.baudok-content { padding: 28px 0 24px; }
.baudok-section { display: none; }
.baudok-section.active { display: block; }

/* ── Protokoll-Editor (Vollbild-Overlay) ────────────────── */
#baudok-editor {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: #f0f0f5;
  overflow-y: auto;
}
/* Letterhead-Layer nur für PDF — im Editor ausblenden */
.baudok-lh-layer { display: none !important; }
/* ── Editor Topbar (dunkel, sticky) ─────────────────────── */
.baudok-editor-topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(28,28,30,0.97);
  backdrop-filter: blur(20px);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; height: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.baudok-editor-topbar .et-title {
  color: rgba(255,255,255,0.9); font-weight: 600; font-size: 13.5px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.baudok-editor-topbar .et-btn {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85); padding: 6px 13px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--font);
  transition: background 0.15s; display: inline-flex; align-items: center; gap: 5px;
}
.baudok-editor-topbar .et-btn:hover { background: rgba(255,255,255,0.18); }
.baudok-editor-topbar .et-btn-primary {
  background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 600;
}
.baudok-editor-topbar .et-btn-primary:hover { background: var(--primary-d); }
.baudok-autosave-status {
  font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap;
  transition: color 0.3s;
}
.baudok-autosave-status.saving  { color: rgba(255,255,255,0.65); }
.baudok-autosave-status.saved   { color: #34c759; }
.baudok-autosave-status.error   { color: #ff453a; }

/* ── Editor Toolbar (weiß, unter Topbar) ────────────────── */
.baudok-editor-toolbar {
  position: sticky; top: 52px; z-index: 9;
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 7px 24px; display: flex; align-items: center; gap: 6px;
}
.baudok-editor-toolbar-inner {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
}
.e-tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: none;
  font-size: 12px; color: var(--muted); font-family: var(--font);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.e-tool-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.e-tool-btn.meta-btn {
  background: rgba(0,113,227,0.07); color: var(--primary);
  border-color: rgba(0,113,227,0.2); font-weight: 600;
}
.e-tool-btn.meta-btn:hover { background: rgba(0,113,227,0.12); }
.e-tool-sep {
  width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex-shrink: 0;
}

/* ── Dokument-Canvas ────────────────────────────────────── */
.doc-canvas {
  margin: 0; padding: 0;
}

/* ── Dokument-Karte ─────────────────────────────────────── */
.doc {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  padding-bottom: 80px;
}

/* ── Dokument-Header (blauer Gradient) ──────────────────── */
.doc-header {
  background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%);
  padding: 26px 32px 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.doc-header-left { flex: 1; min-width: 0; }
.doc-type-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92);
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; margin-bottom: 10px;
}
.doc-title {
  font-size: 20px; font-weight: 700; color: #fff; line-height: 1.25;
  margin: 0 0 4px; border: none; background: transparent;
  font-family: var(--font); width: 100%;
}
.doc-title:focus { outline: none; }
.doc-title::placeholder { color: rgba(255,255,255,0.45); font-weight: 400; }
.doc-subtitle {
  font-size: 13px; color: rgba(255,255,255,0.72); margin: 0;
  border: none; background: transparent; font-family: var(--font); width: 100%;
}
.doc-subtitle:focus { outline: none; }
.doc-subtitle::placeholder { color: rgba(255,255,255,0.35); }
/* Nr.-Badge oben rechts im Header */
.doc-nr-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 90px; padding: 8px 14px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.15); gap: 2px;
}
.doc-nr-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,0.65);
}
.doc-nr-value {
  font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap;
}

/* ── Meta-Leiste (4 Spalten) ────────────────────────────── */
.doc-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border); background: #fafafa;
}
.doc-meta-cell {
  padding: 12px 20px; border-right: 1px solid var(--border);
}
.doc-meta-cell:last-child { border-right: none; }
.doc-meta-label {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); margin-bottom: 3px;
}
.doc-meta-value {
  font-size: 12px; font-weight: 600; color: var(--text);
  border: none; background: transparent; font-family: var(--font); width: 100%;
  padding: 0;
}
.doc-meta-value:focus { outline: none; }
.doc-meta-value::placeholder { color: #bbb; font-weight: 400; }

/* Editierbare Meta-Zellen: Hover- und Fokus-Indikator */
.doc-meta-editable {
  cursor: text; transition: background 0.15s;
  border-radius: 0;
}
.doc-meta-editable:hover { background: rgba(0,113,227,0.06); }
.doc-meta-editable:focus-within {
  background: rgba(0,113,227,0.09);
  box-shadow: inset 0 -2px 0 #0071e3;
}
.doc-meta-editable:focus-within .doc-meta-label { color: #0071e3; }

/* ── Abschnitte ─────────────────────────────────────────── */
.doc-section {
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.doc-section:last-child { border-bottom: none; }
.doc-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; margin-bottom: 14px;
}
.doc-section-action {
  margin-left: auto; font-size: 11px; font-weight: 500;
  color: var(--primary); background: none; border: none;
  cursor: pointer; padding: 0; text-decoration: none; flex-shrink: 0;
}
.doc-section-action:hover { opacity: 0.7; }
.doc-section-toggle {
  cursor: pointer; user-select: none;
}
.doc-section-toggle:hover .doc-section-title { color: var(--primary) !important; }
#doc-sig-row .doc-sig-grid { margin-bottom: 4px; padding: 0 16px; }
.doc-section-stripe {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
}
.doc-section-title {
  font-size: 12px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text);
}

/* ── Teilnehmer-Tabelle ─────────────────────────────────── */
.baudok-teilnehmer { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.baudok-teilnehmer th {
  font-size: 9.5px; font-weight: 700; color: var(--muted);
  background: var(--bg); padding: 6px 16px; text-align: left;
  border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .3px;
}
.baudok-teilnehmer td {
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text);
}
.baudok-teilnehmer tr:last-child td { border-bottom: none; }
.baudok-teilnehmer [contenteditable]:focus { outline: none; background: rgba(0,113,227,0.04); border-radius: 3px; }
.baudok-add-row {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 16px;
  color: var(--primary); font-size: 12px; font-weight: 500; cursor: pointer;
  padding: 6px 0; margin-top: 8px; background: none; border: none;
  font-family: var(--font);
}
.baudok-add-row:hover { opacity: 0.75; }

/* ── Status-Chips ───────────────────────────────────────── */
.status-chip {
  appearance: none; -webkit-appearance: none;
  border: none; border-radius: 20px; padding: 3px 9px;
  font-size: 10.5px; font-weight: 600; font-family: var(--font);
  cursor: pointer; outline: none;
}
.status-chip.chip-anwesend  { background: rgba(52,199,89,0.12);  color: #1a7f37; }
.status-chip.chip-entschuldigt { background: rgba(255,149,0,0.12); color: #b86000; }
.status-chip.chip-abwesend  { background: rgba(255,59,48,0.10);  color: #c0392b; }
.status-chip.chip-erledigt  { background: rgba(52,199,89,0.12);  color: #1a7f37; }
.status-chip.chip-offen     { background: rgba(255,149,0,0.12);  color: #b86000; }
.status-chip.chip-info      { background: rgba(0,113,227,0.10);  color: var(--primary); }

/* ── TOP-Karten ─────────────────────────────────────────── */
.top-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin: 0 16px 10px; overflow: hidden; background: #fff;
  transition: box-shadow .15s, opacity .15s;
}
.top-card-dragging { opacity: .45; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
.top-card-over { box-shadow: 0 0 0 2px var(--primary); }
.top-drag-handle {
  color: #c0c0c5; cursor: move; flex-shrink: 0;
  display: flex; align-items: center; padding: 0 2px;
  transition: color .15s;
}
.top-drag-handle:hover { color: var(--muted); }
.top-drag-handle:active { cursor: move; }
.top-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Editing-Flag in Protokoll-Liste */
.proto-editing-flag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 2px 7px; border-radius: 20px;
  background: #fff3cd; border: 1px solid #ffc107;
  font-size: 11px; font-weight: 500; color: #856404;
  vertical-align: middle; white-space: nowrap;
}
.top-nr {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.top-title {
  flex: 1; border: none; background: transparent;
  font-size: 13px; font-weight: 600; font-family: var(--font);
  color: var(--text); padding: 0;
}
.top-title:focus { outline: none; }
.top-title::placeholder { color: #bbb; font-weight: 400; }
.top-card-collapse {
  background: none; border: none; cursor: pointer;
  color: #c0c0c5; padding: 0 3px; border-radius: 4px;
  transition: color 0.15s, background 0.15s; line-height: 1; flex-shrink: 0;
  display: flex; align-items: center;
}
.top-card-collapse:hover { color: var(--muted); background: var(--border); }
.top-collapse-icon { transition: transform 0.2s ease; display: block; }
.top-card-collapsed .top-collapse-icon { transform: rotate(180deg); }
.top-card-collapsed .top-body,
.top-card-collapsed .top-photos,
.top-card-collapsed .top-footer { display: none; }
.top-card-collapsed .top-card-header { border-bottom: none; }

.top-card-delete {
  background: none; border: none; cursor: pointer;
  color: #c0c0c5; font-size: 15px; padding: 0 2px;
  border-radius: 4px; transition: color 0.15s, background 0.15s; line-height: 1;
}
.top-card-delete:hover { color: var(--danger); background: rgba(255,59,48,0.07); }
.top-body { padding: 0; }

/* ── Rich-Text-Toolbar ───────────────────────────────── */
.top-fmt-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.top-fmt-btn {
  width: 26px; height: 24px; border: none; background: transparent;
  border-radius: 4px; cursor: pointer; font-family: var(--font);
  font-size: 12px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; user-select: none;
}
.top-fmt-btn:hover { background: var(--border); color: var(--text); }
.tfb-b  { font-weight: 700; }
.tfb-i  { font-style: italic; }
.tfb-u  { text-decoration: underline; }
.tfb-s  { text-decoration: line-through; }
.tfb-ul { font-size: 15px; line-height: 1; }
.tfb-ol { font-size: 11px; letter-spacing: -.5px; }
.tfb-in, .tfb-out { font-size: 16px; }
.top-fmt-sep {
  width: 1px; height: 16px; background: var(--border-mid);
  margin: 0 3px; flex-shrink: 0;
}
.top-fmt-size {
  height: 24px; padding: 0 4px;
  border: 1px solid var(--border-mid); border-radius: 4px;
  background: var(--surface); font-family: var(--font);
  font-size: 11px; color: var(--text); cursor: pointer;
}
.top-fmt-color-btn {
  width: 26px; height: 24px; border: 1px solid var(--border-mid);
  border-radius: 4px; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1px; flex-shrink: 0;
}
.top-fmt-color-letter { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1; }
.top-fmt-color-swatch { width: 18px; height: 3px; border-radius: 2px; background: #E24B4A; }

/* ── Contenteditable Textfeld ───────────────────────── */
.top-body-text {
  width: 100%; min-height: 120px; padding: 10px 16px;
  font-size: 12.5px; font-family: var(--font); color: var(--text);
  line-height: 1.65; outline: none; display: block;
}
.top-body-text:empty::before {
  content: attr(data-placeholder); color: var(--text3); pointer-events: none;
}
.top-body-text ul, .top-body-text ol { padding-left: 18px; margin: 3px 0; }
.top-body-text li { margin: 1px 0; }
/* Format-Block-Stufen — entsprechen 1:1 dem PDF-Render (paper-top-body) */
.top-body-text p, .top-body-text div { font-size: 12.5px; margin: 0 0 6px; }
.top-body-text h4 { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 10px 0 3px; line-height: 1.45; }
.top-body-text h5 { font-size: 13.2px; font-weight: 700; color: var(--text); margin: 8px 0 3px; line-height: 1.45; }
.top-photos {
  padding: 10px 14px 12px; border-top: 1px solid var(--border); background: #fafafa;
}
.top-photos-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted); margin-bottom: 8px;
}
.top-photos-content {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}
.top-photos-strip {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
}
.top-photo-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; width: 150px; height: 68px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border); background: #fff;
  color: var(--muted); font-size: 11px; cursor: pointer;
  transition: all 0.15s; flex-shrink: 0;
}
.top-photo-dropzone small { font-size: 9px; color: var(--text3, #aeaeb2); }
.top-photo-dropzone:hover,
.top-photo-dropzone.dz-over {
  border-color: var(--primary); color: var(--primary);
  background: rgba(0,113,227,0.04);
}
.top-photo-thumb {
  width: 100px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); overflow: hidden;
  flex-shrink: 0; display: flex; flex-direction: column;
}
.ph-img-wrap {
  position: relative; width: 100%; height: 72px;
}
.ph-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.top-photo-thumb .ph-rm {
  position: absolute; top: 3px; right: 3px;
  background: rgba(0,0,0,0.55); color: #fff; border: none;
  border-radius: 50%; width: 17px; height: 17px; font-size: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.top-photo-thumb:hover .ph-rm { opacity: 1; }
.ph-caption {
  width: 100%; border: none; border-top: 1px solid var(--border);
  background: var(--surface2); font-family: var(--font);
  font-size: 10px; color: var(--text); padding: 4px 6px;
  outline: none; resize: none;
}
.ph-caption::placeholder { color: var(--text3); }

/* ── Bibliotheks-Button im TOP ──────────────────────── */
.top-photo-lib-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-mid); background: transparent;
  font-family: var(--font); font-size: 11px; color: var(--muted);
  cursor: pointer; white-space: nowrap; align-self: flex-start;
  transition: border-color .15s, color .15s;
}
.top-photo-lib-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Datei-Picker Modal ─────────────────────────────── */
.fp-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.fp-modal {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); width: min(92vw, 1100px);
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.fp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fp-title { font-size: 14px; font-weight: 600; flex: 1; }
.fp-close {
  width: 26px; height: 26px; border: none; background: transparent;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--muted);
}
.fp-close:hover { background: var(--surface2); color: var(--text); }
/* Quell-Tabs */
.fp-source-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  flex-shrink: 0; padding: 0 20px; background: var(--surface2);
}
.fp-src-tab {
  padding: 8px 16px; border: none; border-bottom: 2px solid transparent;
  background: transparent; font-family: var(--font); font-size: 12px;
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.fp-src-tab:hover { color: var(--text); }
.fp-src-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
/* Typ-Filter */
.fp-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.fp-search {
  flex: 1; height: 30px; border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm); padding: 0 10px;
  font-family: var(--font); font-size: 12px; background: var(--surface2);
  color: var(--text); outline: none;
}
.fp-search:focus { border-color: var(--primary); }
.fp-type-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.fp-tab {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-mid);
  background: transparent; font-family: var(--font); font-size: 11px;
  color: var(--muted); cursor: pointer;
}
.fp-tab.active, .fp-tab:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Grid */
.fp-grid {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.fp-date-header {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.fp-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.fp-empty {
  text-align: center; padding: 60px 0;
  font-size: 13px; color: var(--text3);
}
.fp-item {
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; overflow: hidden; transition: border-color .15s;
  display: flex; flex-direction: column;
  aspect-ratio: 1;
}
.fp-item:hover { border-color: var(--primary); }
.fp-item-selected { border-color: var(--primary); background: rgba(0,113,227,0.06); }
.fp-item-used { opacity: .45; cursor: default; }
.fp-item-preview {
  position: relative; flex: 1; min-height: 0; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fp-item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-item-icon {
  font-size: 11px; font-weight: 700; padding: 4px 8px;
  border-radius: 4px; letter-spacing: .5px;
}
.fp-icon-pdf { background: #fde8e8; color: #c0392b; }
.fp-icon-file { background: #e8f0fe; color: #1a73e8; }
.fp-item-badge {
  position: absolute; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 700;
}
/* Quell-Badge auf Vorschau */
.fp-item-src {
  position: absolute; bottom: 4px; left: 4px;
  font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 3px; letter-spacing: .3px; opacity: .9;
}
.fp-src-foto     { background: #e0f2fe; color: #0369a1; }
.fp-src-tagebuch { background: #fef9c3; color: #854d0e; }
.fp-src-anhang   { background: #f0fdf4; color: #166534; }
.fp-item-name {
  font-size: 9px; color: var(--text2); padding: 3px 5px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 0; line-height: 1.3;
}
.fp-item-proto { font-size: 9px; color: var(--text3); padding: 0 6px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.fp-count { flex: 1; font-size: 12px; color: var(--muted); }
.fp-btn-cancel {
  padding: 6px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid); background: transparent;
  font-family: var(--font); font-size: 12px; color: var(--muted); cursor: pointer;
}
.fp-btn-cancel:hover { background: var(--surface2); }
.fp-btn-confirm {
  padding: 6px 18px; border-radius: var(--radius-sm);
  border: none; background: var(--primary); color: #fff;
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
.fp-btn-confirm:disabled { opacity: .4; cursor: default; }
.fp-btn-confirm:not(:disabled):hover { background: var(--primary-d); }
.top-photo-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: var(--surface2); color: var(--muted); font-size: 10px;
}
.ph-spinner { font-size: 18px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ph-name { font-size: 9px; text-align: center; word-break: break-all; padding: 0 3px; }
.top-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted); background: #fafafa;
}
.top-footer-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted); flex-shrink: 0;
}
.tm-frist {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 11px; font-family: var(--font);
  background: #fff; color: var(--text); cursor: pointer;
}
.tm-frist { min-width: 140px; }
.tm-frist:focus { outline: none; border-color: var(--primary); }

/* Verantwortlich-Combobox */
.verant-combo {
  position: relative; flex: 1; max-width: 240px;
}
.tm-verantwortlich-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 22px 4px 8px; font-size: 11px; font-family: var(--font);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 6px center;
  color: var(--text); cursor: pointer;
}
.tm-verantwortlich-input:focus {
  outline: none; border-color: var(--primary);
}
.verant-dropdown {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  max-height: 200px; overflow-y: auto; z-index: 9999;
}
.verant-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; transition: background .1s;
}
.verant-dd-item:hover { background: var(--surface3); }
.verant-dd-initial {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.verant-dd-name  { font-size: 12px; font-weight: 500; color: var(--text); }
.verant-dd-sub   { font-size: 10px; color: var(--muted); margin-top: 1px; }
.verant-dd-empty { padding: 10px; font-size: 11px; color: var(--muted); text-align: center; }

/* TOP hinzufügen */
.doc-add-top-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--border); padding: 11px; cursor: pointer;
  margin: 6px 16px 0;
  color: var(--muted); font-size: 12.5px; font-family: var(--font);
  background: none; width: 100%; border-radius: var(--radius-sm);
  transition: all 0.15s; margin: 6px 16px 0;
}
.doc-add-top-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,113,227,0.03); }

/* Anhänge */
.doc-attachments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; position: relative; padding: 0 16px; }
.doc-upload-zone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--border); padding: 14px 20px; border-radius: var(--radius-sm);
  text-align: center; cursor: pointer; color: var(--muted);
  transition: all 0.15s; font-size: 12px; user-select: none;
}
.doc-upload-zone:hover,
.doc-upload-zone.dz-over { border-color: var(--primary); color: var(--primary); background: rgba(0,113,227,0.03); }
.doc-file-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: var(--radius-sm); font-size: 12px;
}
.doc-file-chip .fc-icon { font-size: 15px; flex-shrink: 0; }
.doc-file-chip .fc-name { flex: 1; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-chip .fc-size { color: var(--muted); font-size: 11px; white-space: nowrap; }
.doc-file-chip .fc-uploading { color: #888; font-style: italic; }
.doc-file-chip.doc-file-loading { opacity: 0.65; }
.doc-file-chip.doc-file-error  { background: #fff5f5; border-color: #fcc; }
.doc-file-chip .fc-dl { color: var(--text2); text-decoration: none; font-size: 13px; }

/* ── Unterschriften ─────────────────────────────────────── */
.doc-sig-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.doc-sig { flex: 1; }
.doc-sig-line { border-top: 1.5px solid var(--border); margin: 44px 0 6px; }
.doc-sig-name { font-size: 12px; font-weight: 700; color: var(--text); }
.doc-sig-role { font-size: 10px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* ── Verteiler-Liste ────────────────────────────────────── */
.verteiler-list { padding: 0 16px; }
.verteiler-list-row {
  display: flex; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; gap: 4px;
}
.verteiler-list-row:last-child { border-bottom: none; }
.vl-name  { font-weight: 600; color: var(--text);  flex: 1; min-width: 0; padding: 2px 4px; border-radius: 4px; }
.vl-firma { color: var(--muted);                   flex: 1; min-width: 0; padding: 2px 4px; border-radius: 4px; }
.vl-email { color: var(--primary); font-size: 11.5px; flex: 1; min-width: 0; padding: 2px 4px; border-radius: 4px; }
.vl-name[contenteditable="true"]:focus,
.vl-firma[contenteditable="true"]:focus,
.vl-email[contenteditable="true"]:focus { outline: none; background: rgba(0,113,227,0.06); }
.vl-del {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0; opacity: 0.5; transition: opacity 0.12s;
}
.vl-del:hover { opacity: 1; color: #c0392b; }

/* ── Dokument-Footer ────────────────────────────────────── */
.doc-footer {
  padding: 10px 28px; border-top: 1px solid var(--border); background: #fafafa;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.doc-footer span:nth-child(2) { text-align: center; }
.doc-footer span:last-child   { text-align: right; }

/* ── Titel-Input im Popup ───────────────────────────────── */
.titel-input {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--primary); border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.10);
  background: rgba(0,113,227,0.02);
  font-size: 14px; font-weight: 600; font-family: var(--font); color: var(--text);
  transition: box-shadow 0.15s;
}
.titel-input:focus { outline: none; box-shadow: 0 0 0 4px rgba(0,113,227,0.18); }
.titel-input::placeholder { color: #bbb; font-weight: 400; }
.titel-hint {
  font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.4;
}

/* ── Neues Protokoll Popup ──────────────────────────────── */
#np-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px) saturate(180%);
  align-items: center; justify-content: center;
  z-index: 1200; padding: 20px;
}
#np-overlay.open { display: flex; }
.np-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 620px;
  height: min(88vh, 660px);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.np-progress-bar { height: 2px; background: var(--border); flex-shrink: 0; }
.np-progress-fill { height: 100%; background: var(--primary); transition: width .4s cubic-bezier(.4,0,.2,1); }
.np-modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.015);
}
.np-step-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--primary);
  background: rgba(0,113,227,0.08);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.np-modal-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; flex: 1; }
.np-modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.05); border: none; cursor: pointer;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.np-modal-close:hover { background: rgba(0,0,0,0.1); color: var(--text); }
.np-modal-steps { flex: 1; overflow: hidden; position: relative; display: flex; }
.np-step-panel {
  width: 100%; flex-shrink: 0; overflow-y: auto; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 16px;
  transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
}
#np-step1  { transform: translateX(0); opacity: 1; }
#np-step2  { transform: translateX(100%); opacity: 0; position: absolute; inset: 0; }
#np-step2b { transform: translateX(100%); opacity: 0; position: absolute; inset: 0; }
#np-step2.show  { transform: translateX(0); opacity: 1; }
#np-step2b.show { transform: translateX(0); opacity: 1; }
#np-step1.hide  { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.np-field-label {
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--muted); margin-bottom: 6px; text-transform: uppercase;
}
.np-select, .np-input {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--surface);
  appearance: none; transition: border-color .15s, box-shadow .15s; outline: none;
}
.np-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 32px; cursor: pointer;
}
.np-select:focus, .np-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }
.np-input::placeholder { color: #aeaeb2; }
.np-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.np-type-card {
  border: 1px solid var(--border-mid); border-radius: var(--radius);
  padding: 13px 10px 11px; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; transition: border-color .15s, background .15s, box-shadow .15s;
  background: var(--surface);
}
.np-type-card:hover { border-color: rgba(0,113,227,0.35); background: #f9f9fb; box-shadow: var(--shadow); }
.np-type-card.selected { border-color: var(--primary); background: rgba(0,113,227,0.04); box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }
.np-type-card.selected .np-type-icon { background: var(--primary); }
.np-type-card.selected .np-type-icon svg { stroke: #fff; }
.np-type-card.selected .np-type-name { color: var(--primary); }
.np-type-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.np-type-name { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.3; }
.np-type-desc { font-size: 9.5px; color: #aeaeb2; line-height: 1.3; }
.np-divider { border: none; border-top: 1px solid var(--border); }
.np-nf-inline {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; margin: 0 4px;
}
.np-nf-icon {
  width: 22px; height: 22px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}
.np-nf-icon.on { background: #0071e3; border-color: #0071e3; }
.np-nf-label { font-size: 11px; color: var(--muted); transition: color 0.2s; white-space: nowrap; }
.np-nf-label.on { color: #0071e3; }
.np-nf-pill {
  width: 32px; height: 18px; border-radius: 9px; flex-shrink: 0;
  background: rgba(0,0,0,0.15); position: relative;
  transition: background 0.22s;
}
.np-nf-pill.on { background: #0071e3; }
.np-nf-pill::after {
  content: ''; position: absolute;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  top: 2.5px; left: 2.5px;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}
.np-nf-pill.on::after { transform: translateX(14px); }

/* Beta-Einstellungen Toggle */
.beta-toggle-wrap { cursor: pointer; flex-shrink: 0; padding: 2px 0; }
.beta-pill {
  width: 42px; height: 24px; border-radius: 12px;
  background: var(--border); position: relative; transition: background .22s cubic-bezier(.4,0,.2,1);
}
.beta-pill.on { background: #0071e3; }
.beta-pill::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  top: 3px; left: 3px; transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.beta-pill.on::after { transform: translateX(18px); }

.np-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.np-form-field { display: flex; flex-direction: column; gap: 5px; }
.np-form-field.full { grid-column: 1 / -1; }
.np-form-field label { font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
#np-titel { font-size: 14px; font-weight: 500; }
.np-tabs-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.np-tab-btn {
  padding: 8px 14px; border: none; background: none;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
  transition: color .15s; white-space: nowrap;
}
.np-tab-btn:hover { color: var(--text); }
.np-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.np-tab-btn.active .np-tab-badge { background: var(--primary); color: #fff; }
.np-tab-badge { font-size: 10px; font-weight: 600; background: rgba(0,0,0,0.07); color: var(--muted); padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; transition: background .15s, color .15s; }
.np-tab-versand-badge { font-size: 9px; font-weight: 600; background: rgba(0,113,227,0.08); color: var(--primary); padding: 1px 7px; border-radius: 10px; letter-spacing: .2px; }
.np-tab-panel { display: none; flex-direction: column; gap: 7px; }
.np-tab-panel.active { display: flex; }
.np-person-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.np-p-avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #0071e3, #34aadc); }
.np-p-info { flex: 1; min-width: 0; }
.np-p-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-p-role { font-size: 11px; color: var(--muted); }
.np-p-anw { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: none; cursor: pointer; font-family: inherit; flex-shrink: 0; transition: background .15s, color .15s; }
.np-p-anw.anwesend     { background: rgba(52,199,89,0.10);  color: #1a8a3a; }
.np-p-anw.entschuldigt { background: rgba(255,149,0,0.10);  color: #924e00; }
.np-p-anw.abwesend     { background: rgba(255,59,48,0.08);  color: #c0392b; }
.np-p-email-badge { font-size: 10.5px; color: var(--muted); background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 20px; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.np-p-email-badge.has-email { background: rgba(0,113,227,0.08); color: var(--primary); }
.np-p-remove { background: none; border: none; color: #aeaeb2; cursor: pointer; padding: 4px; border-radius: 5px; line-height: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.np-p-remove:hover { color: #ff3b30; background: rgba(255,59,48,0.08); }
.np-add-person-btn { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px dashed var(--border-mid); border-radius: var(--radius-sm); background: none; color: var(--muted); font-size: 12.5px; font-family: inherit; cursor: pointer; width: 100%; transition: border-color .15s, color .15s, background .15s; }
.np-add-person-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,113,227,0.08); }
.np-send-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: flex-start; gap: 13px; background: var(--bg); }
.np-send-card-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-send-card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.np-send-card-desc  { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.np-info-box { background: rgba(0,113,227,0.08); border-radius: var(--radius-sm); border: 1px solid rgba(0,113,227,0.15); padding: 10px 13px; display: flex; gap: 9px; align-items: flex-start; }
.np-info-box p { font-size: 11.5px; color: #004fa3; line-height: 1.5; }
.np-email-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.np-email-row span { font-size: 12px; color: var(--text); flex: 1; }
.np-email-row small { font-size: 11px; color: #aeaeb2; }
.np-hint { font-size: 11.5px; color: #aeaeb2; text-align: center; padding: 6px 0 2px; }
.np-modal-footer {
  padding: 13px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; gap: 10px;
  background: rgba(0,0,0,0.015);
}
.np-step-dots { display: flex; gap: 5px; align-items: center; }
.np-step-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: background .2s, width .2s; }
.np-step-dot.active { background: var(--primary); width: 16px; border-radius: 3px; }
.np-step-dot.done   { background: rgba(0,113,227,0.35); }
.np-btns { display: flex; gap: 8px; align-items: center; }
/* Adressbuch-Picker – kein eigener Backdrop (Modal-Backdrop reicht) */
#np-picker-overlay { display: none; position: fixed; inset: 0; background: transparent; z-index: 1300; align-items: center; justify-content: center; }
#np-picker-overlay.open { display: flex; }
.np-picker-box { background: #fff; border-radius: var(--radius); width: 330px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 460px; }
.np-picker-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.np-picker-title { font-size: 14px; font-weight: 600; }
.np-picker-close { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.06); border: none; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.np-picker-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.np-picker-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--border-mid); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.np-picker-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }
.np-picker-list { overflow-y: auto; flex: 1; padding: 6px 0; }
.np-picker-item { padding: 8px 13px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background .1s; }
.np-picker-item:hover { background: rgba(0,113,227,0.08); }
.np-picker-avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-picker-name { font-size: 13px; font-weight: 500; }
.np-picker-sub  { font-size: 11px; color: var(--muted); }

/* ============================================================
   PLÄNE-SEITE (Reste der alten Stand-Alone-Pläne-Seite —
   die `.active`-Bindung verhindert, dass die ID-Spezifität
   das globale `.page { display:none }` überschreibt und die
   neue Plan-Management-Section ständig sichtbar macht.)

   `height:100%/overflow:hidden` aus der Stand-Alone-Variante
   ist im Beta-Sidebar-Layout schädlich (überdeckt Sidebar,
   schneidet Filter-/Sel-Bar ab) — daher entfernt.
   ============================================================ */
/* Pläne-Bereich edge-to-edge: kein 24px-Padding/Margin vom #app-Container */
#page-plaene.active {
  display: block; padding: 0 !important; margin: 0 !important;
  /* kompensiere die fehlende Top-Margin von #app, indem die Section
     in der vollen Breite über den ganzen Hauptbereich gezogen wird */
  margin-left: -24px !important; margin-right: -24px !important;
  margin-top: -24px !important;
  width: calc(100% + 48px) !important;
  /* relativ-Anker für das absolute Drag-Overlay */
  position: relative;
}
#page-plaene .pl-pane { padding: 0; }

/* ── Header ─────────────────────────────────────────────── */
.plans-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 12px; flex-wrap: wrap;
}
.plans-title { font-size: 18px; font-weight: 700; margin: 0; }
.plans-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.plans-project-select {
  height: 32px; border: 1px solid var(--border); border-radius: 6px;
  padding: 0 10px; font-size: 13px; background: var(--bg);
  color: var(--text); min-width: 180px; cursor: pointer;
}

.plans-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px; border-radius: 6px; font-size: 12px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, opacity .15s; white-space: nowrap;
}
.plans-btn:disabled { opacity: .45; cursor: default; }
.plans-btn-new-folder { background: var(--bg); border-color: var(--border); color: var(--text); }
.plans-btn-new-folder:hover:not(:disabled) { background: var(--border); }
.plans-btn-upload {
  background: var(--accent, #0071e3); color: #fff; cursor: pointer;
  user-select: none;
}
.plans-btn-upload:hover { opacity: .88; }
.plans-btn-upload input { display: none; }

.plans-search-wrap {
  position: relative; display: flex; align-items: center;
}
.plans-search-wrap svg {
  position: absolute; left: 8px; color: var(--muted); pointer-events: none;
}
.plans-search {
  height: 32px; border: 1px solid var(--border); border-radius: 6px;
  padding: 0 10px 0 28px; font-size: 13px; background: var(--bg);
  color: var(--text); width: 180px;
}
.plans-search:focus { outline: none; border-color: var(--accent, #0071e3); }

/* ── Body split ──────────────────────────────────────────── */
.plans-body {
  display: flex; flex: 1; overflow: hidden;
}

/* ── Sidebar / Ordnerbaum ────────────────────────────────── */
.plans-sidebar {
  width: 220px; min-width: 180px; max-width: 300px;
  border-right: 1px solid var(--border);
  overflow-y: auto; flex-shrink: 0;
  background: var(--bg-sidebar, var(--bg));
}
.plans-tree-wrap { padding: 8px 0; }

/* Baum-Knoten */
.plans-tree-node { user-select: none; }
.plans-tree-label {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 0;
  cursor: pointer; font-size: 13px; border-radius: 5px;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.plans-tree-label:hover { background: rgba(0,113,227,0.07); }
.plans-tree-label.active { background: rgba(0,113,227,0.12); font-weight: 600; color: var(--accent, #0071e3); }
.plans-tree-label .pt-indent { display: inline-block; flex-shrink: 0; }
.plans-tree-label .pt-toggle {
  width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted); transition: transform .15s;
  cursor: pointer;
}
.plans-tree-label .pt-toggle.open { transform: rotate(90deg); }
.plans-tree-label .pt-icon { flex-shrink: 0; color: #f0a500; }
.plans-tree-label .pt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.plans-tree-label .pt-actions {
  visibility: hidden; display: flex; gap: 2px; flex-shrink: 0; margin-left: auto;
}
.plans-tree-label:hover .pt-actions { visibility: visible; }
.plans-tree-label .pt-act-btn {
  width: 20px; height: 20px; border: none; background: none; cursor: pointer;
  color: var(--muted); border-radius: 3px; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.plans-tree-label .pt-act-btn:hover { background: rgba(0,0,0,0.08); color: var(--text); }

/* Root-Eintrag "Alle Dateien" */
.plans-tree-root {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: 5px; color: var(--text);
}
.plans-tree-root:hover { background: rgba(0,113,227,0.07); }
.plans-tree-root.active { background: rgba(0,113,227,0.12); color: var(--accent, #0071e3); }

.plans-tree-children { padding-left: 0; }

/* ── Content-Bereich ────────────────────────────────────── */
.plans-content {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

.plans-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 16px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 34px;
  flex-wrap: wrap;
}
.plans-bc-seg {
  cursor: pointer; color: var(--accent, #0071e3);
  transition: opacity .15s;
}
.plans-bc-seg:hover { opacity: .7; }
.plans-bc-sep { color: var(--muted); }
.plans-bc-seg.last { color: var(--text); font-weight: 600; cursor: default; }

.plans-files-grid {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px;
}
.plans-files-grid.list-view { display: block; padding: 0; }

/* Datei-Karte (Grid-View) */
.plans-file-card {
  width: 110px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column;
  position: relative;
}
.plans-file-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); border-color: var(--accent, #0071e3); }
.plans-file-card.selected { border-color: var(--accent, #0071e3); box-shadow: 0 0 0 2px rgba(0,113,227,.25); }

.plans-card-thumb {
  width: 100%; height: 70px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover, #f5f5f7); overflow: hidden; flex-shrink: 0;
}
.plans-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plans-card-thumb .plans-file-icon {
  font-size: 28px; font-weight: 700; color: #fff; border-radius: 6px;
  padding: 4px 8px; font-family: monospace;
}
.plans-card-thumb .plans-file-icon.icon-pdf  { background: #e63946; }
.plans-card-thumb .plans-file-icon.icon-img  { background: #2a9d8f; }
.plans-card-thumb .plans-file-icon.icon-doc  { background: #2b6cb0; }
.plans-card-thumb .plans-file-icon.icon-xls  { background: #276749; }
.plans-card-thumb .plans-file-icon.icon-ppt  { background: #c05621; }
.plans-card-thumb .plans-file-icon.icon-zip  { background: #744210; }
.plans-card-thumb .plans-file-icon.icon-dwg  { background: #6b46c1; }
.plans-card-thumb .plans-file-icon.icon-txt  { background: #718096; }
.plans-card-thumb .plans-file-icon.icon-file { background: #4a5568; }

.plans-card-info { padding: 5px 7px 7px; }
.plans-card-name {
  font-size: 11px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.plans-card-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.plans-card-menu {
  position: absolute; top: 4px; right: 4px; display: none;
}
.plans-file-card:hover .plans-card-menu { display: block; }
.plans-card-menu-btn {
  width: 20px; height: 20px; border-radius: 4px; border: none;
  background: rgba(0,0,0,.45); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  line-height: 1;
}
.plans-card-menu-btn:hover { background: rgba(0,0,0,.7); }

/* Context-Menü */
.plans-ctx-menu {
  position: fixed; z-index: 9000; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); min-width: 160px;
  padding: 4px 0; font-size: 13px;
}
.plans-ctx-item {
  padding: 7px 14px; cursor: pointer; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.plans-ctx-item:hover { background: rgba(0,113,227,0.08); }
.plans-ctx-item.danger { color: #e63946; }
.plans-ctx-item.danger:hover { background: rgba(230,57,70,0.08); }
.plans-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Empty state ─────────────────────────────────────────── */
.plans-empty-hint {
  width: 100%; text-align: center; padding: 40px 20px;
  color: var(--muted); font-size: 14px;
}

/* ── Upload-Fortschrittsbalken ───────────────────────────── */
.plans-upload-bar {
  position: fixed; bottom: 20px; right: 24px; z-index: 8000;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  width: 320px; padding: 12px 14px; font-size: 13px;
}
.plans-upload-inner { display: flex; flex-direction: column; gap: 8px; }
.plans-upload-label { font-weight: 600; }
.plans-upload-prog-wrap { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.plans-upload-prog { height: 100%; background: var(--accent, #0071e3); border-radius: 3px; transition: width .2s; }
.plans-upload-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  cursor: pointer; color: var(--muted); font-size: 14px;
}

/* Inline-Rename im Baum */
.plans-tree-rename-input {
  font-size: 13px; border: 1px solid var(--accent, #0071e3);
  border-radius: 4px; padding: 1px 5px; background: var(--bg);
  color: var(--text); width: 120px;
}

/* ============================================================
   BAUDOK PLÄNE-TAB (eingebettet in Baudokumentation)
   ============================================================ */
.baudok-plaene-wrap {
  flex-direction: column;
  height: calc(100vh - 180px);
  overflow: hidden;
}
.baudok-section.active.baudok-plaene-wrap { display: flex; }

/* ── Toolbar ────────────────────────────────────────────── */
.bpl-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap;
}
.bpl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px; border-radius: 6px; font-size: 12px;
  font-weight: 600; cursor: pointer; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); white-space: nowrap;
  transition: background .12s;
}
.bpl-btn:hover { background: var(--border); }
.bpl-btn-primary {
  background: var(--accent, #0071e3); color: #fff;
  border-color: var(--accent, #0071e3); cursor: pointer; user-select: none;
}
.bpl-btn-primary:hover { opacity: .88; background: var(--accent, #0071e3); }
.bpl-btn-primary input { display: none; }

.bpl-search-wrap {
  position: relative; display: flex; align-items: center; margin-left: auto;
}
.bpl-search-wrap svg {
  position: absolute; left: 7px; color: var(--muted); pointer-events: none;
}
.bpl-search {
  height: 30px; border: 1px solid var(--border); border-radius: 6px;
  padding: 0 10px 0 26px; font-size: 12px; background: var(--bg);
  color: var(--text); width: 160px;
}
.bpl-search:focus { outline: none; border-color: var(--accent, #0071e3); }

/* ── Body: Baum + Grid ──────────────────────────────────── */
.bpl-body {
  display: flex; flex: 1; overflow: hidden;
}
.bpl-sidebar {
  width: 200px; min-width: 160px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 6px 0;
  background: var(--bg);
}
.bpl-content {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.bpl-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  min-height: 32px; flex-wrap: wrap;
}

/* ── Drag & Drop Drop-Zone ──────────────────────────────── */
.plans-files-grid {
  position: relative;
}
.plans-files-grid.dnd-over::after {
  content: 'Dateien hier ablegen';
  position: absolute; inset: 8px;
  border: 2px dashed var(--accent, #0071e3);
  border-radius: 10px;
  background: rgba(0,113,227,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--accent, #0071e3);
  pointer-events: none; z-index: 10;
}

/* ============================================================
   PLÄNE – Lightbox & PDF-Viewer
   ============================================================ */

/* Hover-Hint auf Kacheln */
.plans-card-thumb { position: relative; }
.plans-card-hint {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff; font-size: 9px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.plans-file-card:hover .plans-card-hint { opacity: 1; }

/* Overlay */
.plans-lb-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

/* Modal-Box (normal) */
.plans-lb-box {
  background: var(--bg, #fff); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  width: min(860px, 90vw); max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transition: width .2s, max-height .2s, border-radius .2s;
}

/* Vollbild-Modus (Browser-Viewport, kein OS-Fullscreen) */
.plans-lb-box.plans-lb-fullscreen {
  width: 100vw !important; max-height: 100vh !important;
  border-radius: 0 !important;
  position: fixed; inset: 0; z-index: 10001;
}

/* Topbar */
.plans-lb-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar, var(--bg)); flex-shrink: 0;
}
.plans-lb-title {
  flex: 1; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.plans-lb-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s;
}
.plans-lb-btn:hover { background: var(--border); }

/* Bild-Bereich */
.plans-lb-img-wrap {
  flex: 1; background: #111;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; min-height: 300px;
}
.plans-lb-img-wrap img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  display: block;
}
.plans-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s;
}
.plans-lb-nav:hover { background: rgba(255,255,255,.3); }
.plans-lb-prev { left: 12px; }
.plans-lb-next { right: 12px; }

/* Footer */
.plans-lb-foot {
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); flex-shrink: 0;
}

/* PDF-iframe */
.plans-pdf-box { width: min(960px, 92vw); }
.plans-pdf-iframe {
  flex: 1; border: none; width: 100%; min-height: 500px;
  background: #525659;
}
.plans-lb-fullscreen .plans-pdf-iframe { min-height: 0; height: 100%; }

/* PDF-Thumbnail Canvas */
.plans-pdf-thumb-canvas {
  width: 100%; height: auto;
  display: none; /* wird nach Render via JS eingeblendet */
  background: #fff;
}
.plans-pdf-icon-fallback {
  /* sichtbar bis Canvas gerendert ist */
}

/* PDF-Viewer Bottombar (Vollbild-Modus) */
.plans-pdf-box { flex-direction: column; }
.plans-pdf-box .plans-pdf-iframe { flex: 1; min-height: 0; }

.plans-pdf-bottombar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #1e1e1e; flex-shrink: 0;
  gap: 10px; flex-wrap: wrap;
}
.plans-pdf-fname {
  font-size: 12px; color: #aaa; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.plans-pdf-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.plans-pdf-bar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 14px; border-radius: 7px; font-size: 12px;
  font-weight: 500; cursor: pointer; border: 1px solid #444;
  background: #2e2e2e; color: #e5e5e5; white-space: nowrap;
  text-decoration: none; transition: background .12s;
}
.plans-pdf-bar-btn:hover { background: #3a3a3a; }
.plans-pdf-bar-btn-primary {
  background: #0071e3; border-color: #0071e3; color: #fff;
}
.plans-pdf-bar-btn-primary:hover { background: #005bb5; }

/* ============================================================
   PWA / Offline / Sync
   ============================================================ */

/* ── Offline-Banner ──────────────────────────────────────── */
#offline-banner {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  align-items: center; justify-content: center; gap: 7px;
  padding: 7px 16px;
  background: #1d1d1f; color: #f5f5f7;
  font-size: 12px; font-weight: 500;
}

/* ── Offline-Sync-Button in Toolbar ─────────────────────── */
.bpl-btn-offline {
  margin-left: 0;
  border-color: rgba(0,113,227,0.3);
  color: var(--primary, #0071e3);
}
.bpl-btn-offline:hover { background: rgba(0,113,227,0.07); }
.bpl-btn-offline:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Sync-Fortschrittsbalken ─────────────────────────────── */
#plans-sync-wrap {
  display: none;
  align-items: center; gap: 10px;
  padding: 6px 14px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#plans-sync-bar-track {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
#plans-sync-bar {
  height: 100%; width: 0%; border-radius: 2px;
  background: var(--primary, #0071e3);
  transition: width 0.2s ease;
}
#plans-sync-label {
  font-size: 11px; color: var(--muted); white-space: nowrap;
  min-width: 140px;
}

/* ── Bauleitung-Karte: Pläne-Kachel ─────────────────────── */
.ke-card-divider {
  margin: 12px 0 10px;
  border: none; border-top: 1px solid var(--border);
}
.ke-card-plans-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 7px 10px; margin: 0;
  border: 1px solid rgba(0,113,227,0.2);
  border-radius: 7px; background: rgba(0,113,227,0.05);
  color: var(--primary, #0071e3); font-size: 12px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.ke-card-plans-btn:hover {
  background: rgba(0,113,227,0.12); border-color: rgba(0,113,227,0.4);
}
.ke-card-plans-arrow { margin-left: auto; }


/* ════════════════════════════════════════════════════════════════════
   AVA-Modul (Phase 1 — Cockpit / Sub-Nav-Skelett)
   Erweitert in späteren Phasen für LV-Editor / Bieter-Vergleich / etc.
   ════════════════════════════════════════════════════════════════════ */
#page-ava    { padding: 0; }
#page-kosten { padding: 0; margin: -24px -24px 0 -24px; }
#ava-app { font-size: 13px; color: #1f2937; min-height: calc(100vh - 80px); }

/* Sub-Nav (Baudok-Pattern: sticky, full-width, klebt unter Header) */
.ava-subnav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex; gap: 2px; align-items: center;
  /* Aus dem #app-Padding herausbrechen → volle Breite */
  margin: -24px -24px 0 -24px;
  position: sticky; top: var(--header-h); z-index: 99;
}
.ava-subnav .ava-tab {
  background: none; border: none; color: var(--muted);
  padding: 12px 16px; font-size: 0.825rem; font-weight: 500; cursor: pointer;
  font-family: var(--font); border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.ava-subnav .ava-tab:hover:not(.active) { color: var(--text); }
.ava-subnav .ava-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* Kosten-Bereich: Sub-Tabs (analog .ava-subnav) */
.kos-subnav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex; gap: 2px; align-items: center;
  margin: -24px -24px 14px -24px;
  position: sticky; top: var(--header-h); z-index: 99;
}
.kos-subnav .kos-tab {
  background: none; border: none; color: var(--muted);
  padding: 12px 16px; font-size: 0.825rem; font-weight: 500; cursor: pointer;
  font-family: var(--font); border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.kos-subnav .kos-tab:hover:not(.active) { color: var(--text); }
.kos-subnav .kos-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.kos-subnav .kos-tab .lp-tag {
  font-size: 10px; font-weight: 400; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-left: 2px;
}
.kos-subnav .kos-tab.active .lp-tag { color: var(--primary); opacity: .7; }

/* Pane-Switching im Kosten-Bereich */
.kos-pane { display: none; }
.kos-pane.active { display: block; }

/* Beta-Layout-Fix: Subnavs dürfen nicht über die fixe Beta-Sidebar greifen.
   Negativer left-Margin (für Edge-to-Edge in Classic-Mode) wird entfernt. */
body.layout-beta-sidebar .kos-subnav,
body.layout-beta-sidebar .ava-subnav,
body.layout-beta-sidebar .pl-subnav {
  margin-left: 0;
}

/* ═════════════════════════════════════════════════════════════════
   Plan-Management Phase 1
   Sub-Tab-Navigation (Liste / Versand / Eingang / Verteiler)
   ════════════════════════════════════════════════════════════════ */
.pl-subnav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  display: flex; gap: 2px; align-items: center;
  margin: 0;
  position: sticky; top: var(--header-h); z-index: 99;
}
.pl-page-title {
  font-size: 15px; font-weight: 600; letter-spacing: -.2px;
  color: var(--text); padding: 0 14px 0 4px; margin-right: 6px;
  border-right: 1px solid var(--border); align-self: stretch;
  display: flex; align-items: center;
}
.pl-subnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pl-subnav-actions .pl-btn { padding: 5px 11px; font-size: 12.5px; }
/* alte Page-Head komplett aus, nur falls noch irgendwo hängend */
.pl-page-head { display: none; }
.pl-subnav .pl-tab {
  background: none; border: none; color: var(--muted);
  padding: 12px 16px; font-size: 0.825rem; font-weight: 500; cursor: pointer;
  font-family: var(--font); border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-subnav .pl-tab:hover:not(.active) { color: var(--text); }
.pl-subnav .pl-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.pl-subnav .pl-tab .pl-tab-count {
  font-size: 10.5px; font-weight: 600;
  background: var(--bg, #f8fafc); color: var(--muted);
  padding: 1px 7px; border-radius: 99px; min-width: 18px; text-align: center;
}
.pl-subnav .pl-tab.active .pl-tab-count {
  background: rgba(79,70,229,0.10); color: var(--primary);
}

.pl-pane { display: none; }
.pl-pane.active { display: block; }

/* Page-Head */
.pl-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.pl-page-head h1 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.2px; }
.pl-page-head .pl-sub { margin: 0; font-size: 0.8rem; color: var(--muted); }
.pl-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Filter-Bar */
.pl-filter-bar {
  display: flex; gap: 10px; align-items: center; margin: 0;
  flex-wrap: wrap; padding: 8px 14px; background: #fcfcfd;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  /* sticky direkt unter der Toolbar (Variante B) */
  position: sticky;
  top: calc(var(--header-h) + 41px);
  z-index: 98;
}
.pl-filter-bar input[type="search"], .pl-filter-bar select {
  padding: 6px 10px; font-size: 12.5px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; font-family: inherit;
}
.pl-filter-bar input[type="search"] { min-width: 220px; }
.pl-filter-bar .pl-pill-group { display: inline-flex; gap: 0; }
.pl-filter-bar .pl-pill {
  padding: 5px 12px; font-size: 12px; border: 1px solid var(--border);
  background: #fff; color: var(--muted); cursor: pointer; font-family: inherit;
}
.pl-filter-bar .pl-pill:first-child { border-radius: 6px 0 0 6px; }
.pl-filter-bar .pl-pill:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.pl-filter-bar .pl-pill:not(:first-child):not(:last-child) { border-left: 0; }
.pl-filter-bar .pl-pill.active {
  background: rgba(79,70,229,0.10); color: var(--primary);
  border-color: rgba(79,70,229,0.35); font-weight: 500;
}
.pl-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.pl-toggle input { margin: 0; }
.pl-result-count { font-size: 11.5px; color: var(--muted); }

/* Buttons */
.pl-btn {
  padding: 7px 13px; font-size: 12.5px; border-radius: 6px;
  cursor: pointer; font-family: inherit; font-weight: 500;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-btn:hover { background: #f5f6f9; }
.pl-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.pl-btn-primary:hover { background: #3730a3; background: var(--primary); filter: brightness(0.92); }

/* Selection-Bar — schwebt am unteren Bildschirmrand, damit die Tabelle nicht
   nach unten verschoben wird, sobald man einen Plan markiert. */
.pl-sel-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--primary); color: #fff;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 900;
  box-shadow: 0 12px 28px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.10);
  animation: pl-sel-bar-in 0.18s ease-out;
  max-width: calc(100vw - 32px);
}
@keyframes pl-sel-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}
.pl-sel-count { padding: 2px 9px; background: rgba(255,255,255,0.18); border-radius: 999px; font-size: 11px; font-weight: 600; }
.pl-sel-btn {
  padding: 5px 12px; background: #fff; color: var(--primary);
  border: 0; border-radius: 6px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.pl-sel-btn:hover { opacity: 0.92; }
.pl-sel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pl-sel-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.pl-sel-btn-outline:hover { background: rgba(255,255,255,0.12); opacity: 1; }

/* Tabelle — edge-to-edge, ohne Card-Border (passt zum Sticky-Header oben) */
.pl-table-wrap {
  background: #fff; border: 0;
  border-radius: 0; overflow: auto;
}
.pl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pl-table thead th {
  background: #f8fafc; color: var(--muted);
  font-size: 11px; font-weight: 600; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.pl-table tbody tr { border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.pl-table tbody tr:hover { background: #fafbff; }
.pl-table tbody tr.pl-old { color: var(--text-3); font-style: italic; }
.pl-table tbody tr.pl-old td { opacity: 0.7; }
.pl-table td { padding: 9px 12px; vertical-align: middle; }
.pl-col-check { width: 32px; }
.pl-col-actions { width: 80px; text-align: right; white-space: nowrap; }
.pl-col-nr { font-weight: 600; color: var(--text); white-space: nowrap; }
.pl-col-titel .pl-meta { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.pl-empty { text-align: center; padding: 32px; color: var(--muted); }

/* Pills */
.pl-idx-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
  border-radius: 4px; background: #f8fafc; color: var(--muted);
}
.pl-idx-pill.is-current { background: rgba(79,70,229,0.10); color: var(--primary); }
.pl-status-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.03em; border-radius: 4px; text-transform: uppercase;
}
.pl-status-pill.entwurf      { background: #f8fafc; color: var(--text-3); }
.pl-status-pill.freigegeben  { background: #dcfce7; color: #166534; }
.pl-status-pill.archiviert   { background: #f8fafc; color: var(--text-3); opacity: 0.6; }

.pl-icon-btn {
  background: transparent; border: 0; padding: 4px 6px;
  cursor: pointer; color: var(--text-3); border-radius: 4px;
}
.pl-icon-btn:hover { background: #f5f6f9; color: var(--primary); }

/* Coming-Soon-Block */
.pl-coming-soon {
  background: #fff; border: 1px dashed var(--border);
  border-radius: 12px; padding: 50px 30px; text-align: center;
  color: var(--muted);
}
.pl-coming-soon svg { color: var(--text-3); margin-bottom: 12px; }
.pl-coming-soon h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); font-weight: 600; }
.pl-coming-soon p { margin: 0; font-size: 13px; line-height: 1.6; }
.pl-coming-tag {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  background: #fef3c7; color: #92400e; margin-left: 6px; vertical-align: middle;
}
.pl-coming-link {
  display: inline-block; margin-top: 14px; font-size: 12.5px;
  color: var(--primary); text-decoration: none; font-weight: 500;
}
.pl-coming-link:hover { text-decoration: underline; }

/* Drawer (Plan-Detail) */
.pl-drawer { position: fixed; inset: 0; z-index: 1100; }
.pl-drawer-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.4); }
.pl-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 540px; max-width: 92vw;
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; overflow: hidden;
}
.pl-drawer-head {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.pl-drawer-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.pl-drawer-sub { font-size: 12px; color: var(--muted); }
.pl-drawer-close {
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.pl-drawer-close:hover { color: var(--text); }
.pl-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.pl-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.pl-drawer-grid label, .pl-drawer-full {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted); font-weight: 500;
}
.pl-drawer-full { margin-bottom: 14px; }
.pl-drawer-grid input, .pl-drawer-grid select,
.pl-drawer-full input, .pl-drawer-full textarea {
  padding: 7px 9px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit; color: var(--text); background: #fff;
}
.pl-drawer-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.pl-drawer-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text); }
.pl-d-history-count { font-weight: 400; color: var(--muted); margin-left: 4px; }
.pl-drawer-file {
  font-size: 12.5px; padding: 8px 10px; background: #f8fafc;
  border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; gap: 10px; word-break: break-all;
}
.pl-drawer-file .pl-d-file-meta { font-size: 11px; color: var(--muted); }

.pl-d-history { display: flex; flex-direction: column; gap: 6px; }
.pl-d-history-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
.pl-d-h-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px;
}
.pl-d-h-row.is-current { background: rgba(79,70,229,0.06); border-color: rgba(79,70,229,0.30); }
.pl-d-h-row .pl-d-h-idx { font-weight: 600; min-width: 22px; }
.pl-d-h-row .pl-d-h-date { color: var(--muted); min-width: 90px; }
.pl-d-h-row .pl-d-h-aend { flex: 1; color: var(--text); font-style: italic; }

.pl-drawer-foot {
  padding: 14px 22px; border-top: 1px solid var(--border);
  background: #f8fafc; display: flex; align-items: center; gap: 8px;
}

/* Modal (Neuer Plan) */
.pl-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.pl-modal[hidden], .pl-drawer[hidden], .pl-sel-bar[hidden] { display: none !important; }
.pl-modal-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.45); }
.pl-modal-panel {
  position: relative; background: #fff; border-radius: 14px;
  width: 600px; max-width: 92vw; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.pl-modal-head {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.pl-modal-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.pl-modal-sub { font-size: 12px; color: var(--muted); }
.pl-modal-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.pl-modal-divider { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.pl-modal-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); }

.pl-mode-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pl-mode-tab {
  background: none; border: 0; padding: 9px 14px; font-size: 12.5px;
  cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent;
  font-family: inherit;
}
.pl-mode-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.pl-mode-pane { display: none; }
.pl-mode-pane.active { display: block; }

.pl-dropzone {
  border: 2px dashed var(--border); background: #f8fafc;
  border-radius: 10px; padding: 30px 16px; text-align: center;
  cursor: pointer; transition: 0.15s; color: var(--muted);
}
.pl-dropzone:hover { background: rgba(79,70,229,0.06); border-color: rgba(79,70,229,0.35); color: var(--primary); }
.pl-dropzone.is-drag { background: rgba(79,70,229,0.10); border-color: var(--primary); color: var(--primary); }
.pl-dz-title { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--text); }
.pl-dz-sub { font-size: 11.5px; margin-top: 2px; }
.pl-dz-picked {
  margin-top: 10px; padding: 9px 12px; background: rgba(79,70,229,0.06);
  border: 1px solid rgba(79,70,229,0.30); border-radius: 6px; font-size: 12px;
}

/* ─── Massenimport-Modal ──────────────────────────────────── */
.pl-bulk-panel {
  width: 96vw; max-width: 96vw;
  height: 88vh; max-height: 92vh;
  /* User darf das Panel größer/kleiner ziehen */
  resize: both;
  /* min-Werte als Untergrenze, damit's nutzbar bleibt */
  min-width: 800px; min-height: 480px;
  overflow: auto;
}
.pl-bulk-panel .pl-modal-body { flex: 1; min-height: 0; }
.pl-bulk-panel .pl-bulk-table-wrap { max-height: none; flex: 1; }
.pl-bulk-body  { display: flex; flex-direction: column; gap: 12px; }
.pl-bulk-drop {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border: 2px dashed var(--border); background: var(--bg, #f8fafc);
  border-radius: 8px; cursor: pointer; color: var(--muted);
  font-size: 12.5px; transition: .15s;
}
.pl-bulk-drop:hover, .pl-bulk-drop.is-drag { background: rgba(79,70,229,0.06); border-color: var(--primary); color: var(--primary); }
.pl-bulk-drop b { color: var(--text); font-weight: 600; }
.pl-bulk-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font-size: 12px; flex-wrap: wrap;
}
.pl-bulk-count { font-weight: 600; }
.pl-bulk-progress { color: var(--muted); }
.pl-bulk-table-wrap {
  border: 1px solid var(--border); border-radius: 8px; overflow: auto;
  max-height: 50vh; background: #fff;
}
.pl-bulk-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pl-bulk-table thead th {
  background: var(--bg, #f8fafc); color: var(--muted);
  font-size: 10.5px; font-weight: 600; text-align: left;
  padding: 7px 8px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  position: sticky; top: 0; z-index: 5;
}
.pl-bulk-table .pl-bulk-st { width: 130px; }
.pl-bulk-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.pl-bulk-table td { padding: 5px 8px; vertical-align: middle; }
.pl-bulk-table input[type="text"], .pl-bulk-table input[type="date"], .pl-bulk-table select {
  width: 100%; padding: 4px 6px; font-size: 11.5px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  font-family: inherit; min-width: 60px;
}
.pl-bulk-table input[type="text"]:hover, .pl-bulk-table input[type="date"]:hover, .pl-bulk-table select:hover,
.pl-bulk-table input[type="text"]:focus, .pl-bulk-table input[type="date"]:focus, .pl-bulk-table select:focus {
  border-color: var(--border); background: #fff; outline: none;
}
.pl-bulk-table input[type="text"]:focus, .pl-bulk-table input[type="date"]:focus, .pl-bulk-table select:focus {
  border-color: var(--primary);
}
.pl-bulk-table .pl-bulk-row-disabled td { opacity: .4; }
.pl-bulk-st-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; font-size: 10px; font-weight: 600;
  border-radius: 99px; line-height: 1.6;
}
.pl-bulk-st-pill.is-pending { background: var(--bg); color: var(--muted); }
.pl-bulk-st-pill.is-loading { background: rgba(79,70,229,0.12); color: var(--primary); }
.pl-bulk-st-pill.is-ok      { background: #dcfce7; color: #166534; }
.pl-bulk-st-pill.is-warn    { background: #fef3c7; color: #92400e; }
.pl-bulk-st-pill.is-err     { background: #fef2f2; color: #991b1b; }
.pl-bulk-st-pill.is-manual  { background: #ecfccb; color: #3f6212; }
.pl-bulk-table .pl-bulk-fname {
  font-size: 11px; color: var(--muted); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-bulk-table .pl-bulk-x {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 2px 6px; border-radius: 4px; font-size: 16px; line-height: 1;
}
.pl-bulk-table .pl-bulk-x:hover { background: #fef2f2; color: #991b1b; }
.pl-bulk-options {
  padding: 8px 0; font-size: 12px; color: var(--muted);
}
.pl-bulk-options code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 11px; }

/* ─── Plan-Vorschau-Modal (Lightbox mit PDF/Bild) ────────── */
.pl-preview { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
.pl-preview[hidden] { display: none !important; }
.pl-preview-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.65); }
.pl-preview-panel {
  position: relative; background: #fff; border-radius: 12px;
  width: 98vw; height: 94vh;
  /* keine max-width — soll bei großen Bildschirmen mitwachsen */
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
/* Im Fullscreen-Modus: kein Border-Radius, volle Größe */
.pl-preview-panel:fullscreen {
  width: 100vw; height: 100vh; max-width: none;
  border-radius: 0;
}
.pl-preview-panel:-webkit-full-screen {
  width: 100vw; height: 100vh; max-width: none;
  border-radius: 0;
}
.pl-preview-head {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: #fafbfc; flex-shrink: 0;
}
.pl-preview-title-wrap { min-width: 0; flex-shrink: 1; }
.pl-preview-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-preview-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-preview-zoom, .pl-preview-actions { display: flex; align-items: center; gap: 4px; }
.pl-preview-zoom { margin-left: auto; }
.pl-pv-btn {
  background: #fff; border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 10px; font-size: 11.5px; cursor: pointer; color: var(--text);
  font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.pl-pv-btn:hover { background: var(--bg, #f8fafc); }
.pl-pv-zoom-display { font-size: 11.5px; color: var(--muted); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.pl-pv-pos { font-size: 11.5px; color: var(--muted); min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.pl-pv-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

.pl-preview-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.pl-preview-doc {
  flex: 1; min-width: 0; background: #1e293b; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center; padding: 12px;
}
.pl-preview-doc iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pl-preview-doc img { max-width: 100%; height: auto; transform-origin: 0 0; cursor: grab; }
.pl-preview-doc img.is-grab { cursor: grabbing; }

/* PDF.js-Container — eigener Renderer mit Hand-Tool.
   WICHTIG: kein `display:flex` auf dem scrollbaren Wrapper, sonst
   verschluckt flexbox die linke Seite beim horizontalen Scrollen.
   Stattdessen `width: max-content` auf dem Inner-Container, das macht
   ihn so breit wie der Inhalt — und der Wrapper scrollt richtig. */
.pl-pv-pdf-wrap {
  width: 100%; height: 100%;
  overflow: auto;
  background: #1e293b;
  cursor: grab;
}
.pl-pv-pdf-wrap.is-grabbing { cursor: grabbing; }
.pl-pv-pdf-wrap.is-grabbing * { cursor: grabbing !important; }
.pl-pv-pdf-inner {
  /* mind. so breit wie der Container, aber wachsen wenn canvas größer */
  min-width: 100%;
  width: max-content;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-sizing: border-box;
}
.pl-pv-pdf-canvas {
  display: block;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  background: #fff;
  /* Cursor wird vom Wrapper geerbt */
  cursor: inherit;
  /* Selection im PDF deaktivieren, sonst stört's beim Pan */
  user-select: none; -webkit-user-select: none;
}

.pl-pv-page-info {
  font-size: 11.5px; color: var(--muted); min-width: 80px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.pl-preview-empty { color: #94a3b8; padding: 60px 20px; text-align: center; }

.pl-preview-meta {
  width: 320px; max-width: 35vw; background: #fff;
  border-left: 1px solid var(--border); overflow-y: auto;
  padding: 16px 18px; flex-shrink: 0;
}
.pl-preview-meta h4 {
  margin: 0 0 6px; font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.pl-preview-meta dl { margin: 0 0 18px; display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; font-size: 12.5px; }
.pl-preview-meta dt { color: var(--muted); }
.pl-preview-meta dd { margin: 0; color: var(--text); word-break: break-word; }
.pl-preview-meta .pv-aend {
  font-size: 12px; padding: 8px 10px; background: var(--bg, #f8fafc);
  border-radius: 6px; color: var(--text); font-style: italic; line-height: 1.5;
}
/* Editierbare Vorschau-Felder (analog Drawer-Edit-Felder, aber kompakter) */
.pl-preview-meta .pv-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 14px; }
.pl-preview-meta .pv-edit.pv-edit-3 { grid-template-columns: 1fr 1fr 1fr; }
.pl-preview-meta .pv-edit label,
.pl-preview-meta > label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; color: var(--muted); font-weight: 500;
}
.pl-preview-meta .pv-edit input,
.pl-preview-meta .pv-edit select {
  padding: 6px 8px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 5px; font-family: inherit; color: var(--text); background: #fff;
  width: 100%; box-sizing: border-box;
}
.pl-preview-meta .pv-edit input:focus,
.pl-preview-meta .pv-edit select:focus,
.pl-preview-meta textarea:focus {
  outline: none; border-color: var(--primary, #4f46e5);
}

/* ─── Rechtsklick-Kontextmenü ───────────────────────────── */
.pl-ctxmenu {
  position: fixed; z-index: 1400;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  padding: 4px; min-width: 200px;
  font-size: 12.5px;
}
.pl-ctxmenu[hidden] { display: none !important; }
.pl-ctxitem {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--text);
  font-family: inherit; font-size: 12.5px;
  border-radius: 5px;
}
.pl-ctxitem:hover { background: var(--primary-light, #eef2ff); color: var(--primary, #4f46e5); }
.pl-ctxitem svg { flex-shrink: 0; }
.pl-ctxitem-danger { color: #b91c1c; }
.pl-ctxitem-danger:hover { background: #fef2f2; color: #991b1b; }
.pl-ctxsep { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

/* ─── Hover-Thumbnail (Mini-Vorschau in der Liste) ───────── */
.pl-thumb {
  position: fixed; z-index: 1200; pointer-events: none;
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  width: 320px; padding: 6px;
  transition: opacity .15s; opacity: 0;
}
.pl-thumb.is-show { opacity: 1; }
.pl-thumb-frame {
  width: 100%; height: 380px; background: #f1f5f9;
  border-radius: 6px; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted);
}
.pl-thumb-frame iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.pl-thumb-frame img { max-width: 100%; max-height: 100%; }
.pl-thumb-cap { font-size: 11px; color: var(--muted); padding: 6px 4px 2px; text-align: center; }

/* ─── Drop-Zone unter der Plan-Tabelle (immer sichtbar) ─── */
.pl-droparea {
  margin: 14px 14px 18px;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: rgba(248,250,252,0.6);
  transition: .15s;
  /* füllt den Restplatz unter der Tabelle */
  flex: 1;
}
.pl-droparea.is-drag {
  background: rgba(79,70,229,0.08);
  border-color: var(--primary);
  border-style: dashed;
}
.pl-droparea-card {
  text-align: center; color: var(--muted);
  pointer-events: none;
}
.pl-droparea.is-drag .pl-droparea-card { color: var(--primary); }
.pl-droparea-title {
  font-size: 17px; font-weight: 700; margin-top: 8px;
  color: var(--primary);
}
.pl-droparea.is-drag .pl-droparea-title { color: var(--primary); }
.pl-droparea-sub { font-size: 12.5px; margin-top: 4px; }

/* ── Sortierbare Spalten-Header ─────────────────────────── */
.pl-table th.pl-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.pl-table th.pl-sortable:hover { background: #f1f5f9; color: var(--text); }
.pl-table th.pl-sortable .pl-sort-ind {
  display: inline-block;
  width: 10px; margin-left: 3px;
  font-size: 10px; opacity: 0.35;
  vertical-align: middle;
}
.pl-table th.pl-sortable .pl-sort-ind::before { content: '↕'; }
.pl-table th.pl-sortable.is-sort-asc  .pl-sort-ind { opacity: 1; color: var(--primary); }
.pl-table th.pl-sortable.is-sort-asc  .pl-sort-ind::before { content: '▲'; }
.pl-table th.pl-sortable.is-sort-desc .pl-sort-ind { opacity: 1; color: var(--primary); }
.pl-table th.pl-sortable.is-sort-desc .pl-sort-ind::before { content: '▼'; }

/* ── Versand-Wizard (Phase 2 Etappe 2b) ─────────────────── */
.pl-dist-panel { width: 760px; max-width: 96vw; height: 80vh; max-height: 92vh; }
.pl-dist-panel .pl-modal-body { display: flex; flex-direction: column; padding: 0; }
.pl-step-bar {
  display: flex; gap: 6px; padding: 14px 22px;
  border-bottom: 1px solid var(--border); background: #f8fafc;
}
.pl-step {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--muted);
}
.pl-step .pl-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e2e8f0; color: #475569;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
}
.pl-step.is-active { color: var(--text); font-weight: 600; }
.pl-step.is-active .pl-step-num { background: var(--primary); color: #fff; }
.pl-step.is-done .pl-step-num { background: #10b981; color: #fff; }
.pl-step.is-done .pl-step-num::before { content: '✓'; }
.pl-step.is-done .pl-step-num > span { display: none; }

.pl-step-pane { display: none; padding: 18px 22px; flex: 1; overflow: auto; }
.pl-step-pane.is-active { display: block; }

.pl-dist-toolbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
.pl-dist-toolbar input[type=search] {
  flex: 0 0 320px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
}
.pl-dist-plans {
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.pl-dist-plan-row {
  display: grid; grid-template-columns: 28px 80px 1fr 110px 70px;
  gap: 10px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; cursor: pointer;
}
.pl-dist-plan-row:last-child { border-bottom: 0; }
.pl-dist-plan-row:hover { background: #f8fafc; }
.pl-dist-plan-row.is-selected { background: #eef2ff; }
.pl-dist-plan-row .pl-dpr-titel { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dist-plan-row .pl-dpr-meta  { color: var(--muted); font-size: 11px; }
.pl-dist-plan-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 12.5px; }

.pl-dist-listrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  padding: 9px 11px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.pl-dist-listrow select {
  flex: 1; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 12.5px; background: #fff;
}
.pl-btn-sec {
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 11px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.pl-btn-sec:hover { background: #f1f5f9; border-color: #94a3b8; }
.pl-btn-outline {
  background: #fff; color: #b91c1c; border-color: #fca5a5;
}
.pl-btn-outline:hover { background: #fef2f2; }
.pl-link-btn {
  background: transparent; border: 0; padding: 4px 6px;
  font-size: 11.5px; color: var(--primary); cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.pl-link-btn:hover { background: rgba(79,70,229,0.08); border-radius: 4px; }
.pl-dist-msg-tools {
  display: flex; align-items: center; gap: 4px;
  margin-top: 4px; font-weight: normal;
}

.pl-dist-recip-input { display: flex; gap: 8px; margin-bottom: 8px; }
.pl-dist-recip-input input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px; box-sizing: border-box;
}
.pl-dist-recip-list {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: 7px;
  padding: 6px; min-height: 60px; max-height: 320px; overflow: auto;
}
.pl-dist-recip-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; background: #f8fafc; border-radius: 6px;
  font-size: 12.5px;
}
.pl-dist-recip-row .pl-drr-name  { font-weight: 500; }
.pl-dist-recip-row .pl-drr-email { color: var(--muted); }
.pl-dist-recip-row .pl-drr-src   {
  font-size: 10.5px; padding: 1px 7px; border-radius: 11px;
  background: #ddd6fe; color: #5b21b6;
}
.pl-dist-recip-row .pl-drr-src.is-free { background: #fef3c7; color: #92400e; }
.pl-dist-recip-row .pl-drr-x {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 0 4px;
}
.pl-dist-recip-row .pl-drr-x:hover { color: #b91c1c; }
.pl-dist-recip-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 12.5px; }

.pl-dist-opts label {
  display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); font-weight: 500;
}
.pl-dist-opts input[type=text],
.pl-dist-opts input[type=date],
.pl-dist-opts textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px; color: var(--text); background: #fff;
  box-sizing: border-box;
}
.pl-dist-opts textarea { resize: vertical; min-height: 90px; }
.pl-dist-opts .pl-check-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 22px; font-weight: normal; color: var(--text);
}
.pl-dist-opts .pl-check-row input { margin: 0; }

.pl-dist-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  font-size: 12.5px;
}
.pl-dist-preview-block {
  padding: 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}
.pl-dist-preview-block h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.pl-dist-preview-block .pl-dpb-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.pl-dist-preview-block .pl-dpb-row:last-child { border-bottom: 0; }
.pl-dist-preview-block .pl-dpb-row > span:first-child { color: var(--muted); }
.pl-dist-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-top: 1px solid var(--border);
}

/* ── Versand-Tab (Phase 2) ───────────────────────────────── */
.pl-versand-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 12px 14px;
  border-bottom: 1px solid var(--border);
}
.pl-versand-actions { display: flex; gap: 6px; }
.pl-versand-list { padding: 4px 0; }
.pl-versand-table tbody tr:hover { background: #f8fafc; }
.pl-versand-table .pl-bulk-x {
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  width: 22px; height: 22px; cursor: pointer; color: var(--muted);
  font-size: 14px;
}
.pl-versand-table .pl-bulk-x:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* ── Verfasser-Banner: KI hat Verfasser erkannt aber nicht im Adressbuch ─ */
.pl-verfasser-banner {
  margin-top: 6px;
  padding: 6px 9px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 11.5px;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}
.pl-verfasser-banner.is-linked {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.pl-verfasser-banner button {
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid #fbbf24;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  color: #92400e;
}
.pl-verfasser-banner button:hover { background: #fef3c7; }
.pl-verfasser-banner.is-linked button {
  border-color: #34d399;
  color: #065f46;
}
.pl-verfasser-banner .pl-vb-spacer { flex: 1 1 auto; }
.pl-verfasser-banner .pl-vb-x {
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; color: inherit; padding: 0 2px; opacity: .55;
}
.pl-verfasser-banner .pl-vb-x:hover { opacity: 1; }
.pl-verfasser-banner .pl-vb-suggest {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  width: 100%; margin-top: 2px;
}
.pl-verfasser-banner .pl-vb-hint { font-size: 11px; opacity: .8; }
.pl-verfasser-banner .pl-vb-pick {
  font-size: 11.5px; padding: 3px 9px;
  border: 1px dashed #fbbf24; border-radius: 4px;
  background: #fff; cursor: pointer; color: #92400e;
  font-family: inherit;
}
.pl-verfasser-banner .pl-vb-pick:hover {
  background: #fef3c7; border-style: solid;
}
.pl-verfasser-banner .pl-vb-search {
  font-size: 11.5px; padding: 3px 9px;
  border: 1px solid #cbd5e1; border-radius: 4px;
  background: #fff; cursor: pointer; color: #475569;
  font-family: inherit;
}
.pl-verfasser-banner .pl-vb-search:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Damit die Drop-Zone wirklich Restplatz nimmt: pl-pane wird flex-Container */
#page-plaene .pl-pane.active { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h, 50px) - 80px); }
#page-plaene .pl-pane.active > .pl-table-wrap { flex: 0 0 auto; }
#page-plaene .pl-pane.active > .pl-droparea   { flex: 1 1 auto; }

/* ── Übersicht-Cockpit (DIN-276-Stufen-Bahn + Trend + Quickstand + Δ) ─── */
.kos-overview { padding: 4px 0 24px; }
.kos-overview .ov-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.kos-overview .ov-head h1 {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.2px;
}
.kos-overview .ov-head .ov-meta {
  font-size: 12px; color: var(--text-3, #94a3b8);
}
.kos-overview .ov-head .ov-meta b { color: var(--text-1, #0f172a); font-weight: 500; }
.kos-overview .ov-head .ov-actions { margin-left: auto; display: flex; gap: 8px; }

.kos-stages-rail {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.kos-stages-rail h3 {
  margin: 0 0 12px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.kos-stages-rail h3 .ds {
  margin-left: auto; font-size: 12px; color: var(--text-2, #475569); font-weight: 400;
}
.kos-stages-rail h3 .ds b { color: #b91c1c; font-weight: 600; }
.kos-stages-flow {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; align-items: stretch;
}
.kos-stage {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  padding: 10px 12px; position: relative; transition: border-color .15s, box-shadow .15s;
}
.kos-stage:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(67,56,202,.06); }
.kos-stage.is-current { border-color: #4f46e5; box-shadow: 0 0 0 2px #eef2ff; }
.kos-stage.is-future  { background: #f8fafc; border-style: dashed; opacity: .65; }
.kos-stage .lp { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #94a3b8; text-transform: uppercase; }
.kos-stage .label { font-size: 11.5px; font-weight: 500; color: #0f172a; margin: 2px 0 6px; }
.kos-stage .value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.kos-stage .value.muted { color: #94a3b8; }
.kos-stage .meta { font-size: 10.5px; color: #94a3b8; margin-top: 4px; }
.kos-stage .status-pill {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 4px; text-transform: uppercase;
}
.kos-stage .status-pill.ok    { background: #dcfce7; color: #166534; }
.kos-stage .status-pill.now   { background: #dbeafe; color: #1e40af; }
.kos-stage .status-pill.todo  { background: #f1f5f9; color: #94a3b8; }
.kos-stage .status-pill.warn  { background: #fef3c7; color: #92400e; }
.kos-stage .delta-inline {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 9.5px; font-weight: 600; margin-left: 4px;
}
.kos-stage .delta-inline.up   { background: #fef2f2; color: #991b1b; }
.kos-stage .delta-inline.down { background: #dcfce7; color: #166534; }
.kos-stage .delta-inline.flat { background: #f1f5f9; color: #94a3b8; }

.kos-row-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) { .kos-row-2 { grid-template-columns: 1fr; } }

.kos-card {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  padding: 14px 16px;
}
.kos-card h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.kos-card h3 .meta { font-size: 11px; color: #94a3b8; font-weight: 400; margin-left: auto; }

.kos-trend-svg { width: 100%; height: 160px; display: block; }
.kos-trend-leg { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10.5px; color: #475569; margin-top: 8px; }
.kos-trend-leg .li { display: inline-flex; align-items: center; gap: 5px; }
.kos-trend-leg .swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.kos-trend-empty { color: #94a3b8; font-size: 12px; padding: 28px 0; text-align: center; }

.kos-qs { display: flex; flex-direction: column; gap: 8px; }
.kos-qs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f8fafc; border-radius: 8px;
}
.kos-qs-item .icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #475569;
}
.kos-qs-item .icon svg { width: 14px; height: 14px; }
.kos-qs-item .lbl { font-size: 11.5px; color: #475569; }
.kos-qs-item .val { font-size: 13px; font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.kos-qs-item.warn   .icon { background: #fef3c7; color: #92400e; }
.kos-qs-item.danger .icon { background: #fef2f2; color: #991b1b; }
.kos-qs-item.ok     .icon { background: #dcfce7; color: #166534; }

.kos-deltas {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.kos-deltas h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.kos-deltas h3 .open-link { margin-left: auto; font-size: 11px; color: #4f46e5; font-weight: 500; cursor: pointer; }
.kos-deltas-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px;
}
.kos-deltas-empty { color: #94a3b8; font-size: 12px; padding: 18px 0; text-align: center; }
.kos-delta-row {
  padding: 9px 11px; border: 1px solid #f1f5f9; border-radius: 8px;
  background: #fafbfd;
  display: flex; flex-direction: column; gap: 3px;
}
.kos-delta-row .head { display: flex; align-items: center; gap: 8px; }
.kos-delta-row .tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 3px; text-transform: uppercase;
}
.kos-delta-row .tag.add { background: #fef2f2; color: #991b1b; }
.kos-delta-row .tag.sub { background: #dcfce7; color: #166534; }
.kos-delta-row .amount { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.kos-delta-row .amount.add { color: #b91c1c; }
.kos-delta-row .amount.sub { color: #166534; }
.kos-delta-row .label { font-size: 12px; font-weight: 500; }
.kos-delta-row .desc  { font-size: 10.5px; color: #475569; line-height: 1.4; }

/* Zurück-Button + Trenner (analog .bdok-back-btn) */
.ava-back-btn {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 12px 12px 0; color: var(--muted);
  font-size: 0.825rem; font-weight: 500; font-family: var(--font);
  transition: color .15s;
}
.ava-back-btn:hover { color: var(--primary); }
.ava-subnav-sep {
  width: 1px; height: 18px; background: var(--border); margin: 0 8px;
  flex-shrink: 0;
}

/* Pane-Container — flach, kein Padding */
.ava-pane { display: none; padding: 0; }
.ava-pane.active { display: block; }
.ava-pane > .ava-stub, .ava-pane > .ava-loading,
.ava-pane > #ava-cockpit-content { padding: 28px 0 24px; }

.ava-loading { padding: 40px; text-align: center; color: #9ca3af; font-size: 13px; }
.ava-stub    { padding: 40px; text-align: center; color: #9ca3af; font-size: 13px; line-height: 1.6;
               background: #fff; border: 1px dashed #e5e7eb; border-radius: 10px; }
.ava-stub small { color: #cbd5e1; font-size: 11px; }

/* Cockpit — KPI-Cards (5er-Grid wie im Mockup) */
.ava-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.ava-card  { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 13px 15px; }
.ava-card .label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; }
.ava-card .value { font-size: 20px; font-weight: 700; margin-top: 4px; color: #0f172a;
                   font-variant-numeric: tabular-nums; }
.ava-card .delta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.ava-card .delta.bad  { color: #dc2626; }
.ava-card .delta.warn { color: #d97706; }
.ava-card .delta.good { color: #10b981; }

/* Cockpit — Budget-Balken */
.ava-budget-bar { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
                  padding: 14px 16px; margin-bottom: 18px; }
.ava-budget-bar .bb-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.ava-budget-bar .bb-track { display: flex; height: 24px; border-radius: 5px; overflow: hidden;
                            background: #f3f4f6; }
.ava-budget-bar .bb-seg { display: flex; align-items: center; justify-content: center;
                          font-size: 10.5px; font-weight: 600; color: #fff; min-width: 1px; }
.ava-budget-bar .bb-seg.invoiced { background: #10b981; }
.ava-budget-bar .bb-seg.awarded  { background: #3b82f6; }
.ava-budget-bar .bb-seg.draft    { background: #a3a3a3; }

/* LV-Liste-Tabelle */
.ava-lv-list { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.ava-lv-list table { width: 100%; border-collapse: collapse; }
.ava-lv-list th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase;
                  color: #6b7280; background: #fafafa; border-bottom: 1px solid #e5e7eb;
                  font-weight: 600; }
.ava-lv-list td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
                  font-size: 13px; }
.ava-lv-list td.num { font-variant-numeric: tabular-nums; text-align: right; }
.ava-lv-list tr:hover td { background: #f9fafb; cursor: pointer; }
.ava-lv-list .status { font-size: 11px; padding: 3px 8px; border-radius: 10px; display: inline-block;
                       font-weight: 500; }
.ava-lv-list .status.entwurf       { background: #fef3c7; color: #92400e; }
.ava-lv-list .status.versendet     { background: #dbeafe; color: #1e40af; }
.ava-lv-list .status.vergeben      { background: #d1fae5; color: #065f46; }
.ava-lv-list .status.in_abrechnung { background: #e0e7ff; color: #3730a3; }
.ava-lv-list .status.schlussrechnung { background: #ddd6fe; color: #5b21b6; }
.ava-lv-list .status.abgeschlossen { background: #f3f4f6; color: #374151; }

.ava-empty { padding: 60px 20px; text-align: center; color: #9ca3af; }
.ava-empty h3 { color: #374151; margin: 0 0 8px; font-size: 16px; }
.ava-empty .btn { margin-top: 14px; }

/* Untertitel unter LV-Name in der Cockpit-Liste */
.ava-lv-list .ava-lv-sub {
  font-size: 11px; color: #9ca3af; margin-top: 2px; font-weight: 400;
}

/* ── LV-Editor (Phase 2) ───────────────────────────────────── */
.ava-ed-top {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 10px 28px;
  /* Volle Breite — bricht aus dem #app-Padding (24px) aus, gleich wie .ava-subnav */
  margin: 0 -24px;
  /* Sticky direkt unter der Subnav — bleibt FIX, egal ob die Page minimal scrollt */
  position: sticky;
  top: calc(var(--header-h, 60px) + var(--ava-subnav-h, 40px));
  z-index: 95;
}
/* LV-Picker: Dropdown + Bleistift + Flyover */
.ava-ed-lv-picker { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ava-ed-lv-sel-wrap { position: relative; display: inline-flex; align-items: center; }
.ava-ed-lv-sel {
  height: 34px; padding: 0 26px 0 10px;
  border: 1px solid #d1d5db; border-radius: 7px;
  background: #fff; font-size: 14px; font-weight: 600; color: #0f172a;
  appearance: none; cursor: pointer; min-width: 160px; max-width: 320px;
}
.ava-ed-lv-sel:hover { border-color: #93c5fd; }
.ava-ed-lv-arr { position: absolute; right: 7px; pointer-events: none; color: #9ca3af; }
.ava-ed-pencil-btn {
  width: 32px; height: 34px; border: 1px solid #d1d5db; border-radius: 7px;
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #6b7280; flex-shrink: 0; transition: background .1s, color .1s, border-color .1s;
}
.ava-ed-pencil-btn:hover { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.ava-ed-pencil-btn.open  { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
/* Flyover */
.ava-ed-title-fly {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
  background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
  padding: 14px 16px; width: 320px;
  box-shadow: 0 4px 16px rgba(15,23,42,.10);
}
.ava-ed-title-fly-ptr {
  position: absolute; top: -6px; left: 22px;
  width: 11px; height: 11px; background: #fff;
  border-left: 1px solid #d1d5db; border-top: 1px solid #d1d5db;
  transform: rotate(45deg);
}
.ava-ed-title-fly-fields { display: flex; gap: 10px; margin-bottom: 12px; }
.ava-ed-fly-field { display: flex; flex-direction: column; gap: 4px; }
.ava-ed-fly-label { font-size: 11px; color: #6b7280; font-weight: 500; }
.ava-ed-fly-input {
  height: 32px; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 0 10px; font-size: 13px; color: #0f172a; background: #fff; width: 100%;
}
.ava-ed-fly-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.ava-ed-fly-btns { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.ava-ed-fly-cancel { padding: 5px 12px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; color: #6b7280; }
.ava-ed-fly-cancel:hover { background: #f9fafb; }
.ava-ed-fly-save   { padding: 5px 12px; font-size: 12px; border: 1px solid #93c5fd; border-radius: 6px; background: #eff6ff; cursor: pointer; color: #1e40af; font-weight: 500; }
.ava-ed-fly-save:hover { background: #dbeafe; }
.ava-ed-los {
  display: inline-block; padding: 2px 10px; background: #eef2ff; color: #3730a3;
  border-radius: 5px; font-size: 13px; font-weight: 700; letter-spacing: .5px;
  border: 1px solid transparent; transition: border-color 0.15s;
}
.ava-ed-los:hover { border-color: #818cf8; }
.ava-ed-los-add {
  display: inline-block; padding: 2px 10px; background: #f9fafb; color: #6b7280;
  border-radius: 5px; font-size: 11px; font-weight: 500; cursor: pointer;
  border: 1px dashed #d1d5db;
}
.ava-ed-los-add:hover { background: #eef2ff; color: #3730a3; border-color: #818cf8; }

/* Los-Spalte in Cockpit-Liste — editierbar */
.ava-lv-list td.ava-cell-los { cursor: text; transition: background 0.1s; }
.ava-lv-list td.ava-cell-los:hover { background: #f1f5f9; }
.ava-lv-list td.ava-cell-los.ava-edit-active {
  outline: 2px solid #2563eb; outline-offset: -2px; background: #fff;
}
.ava-ed-meta { flex: 1; font-size: 11px; color: #6b7280; padding: 0 10px; }
.ava-ed-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ava-ed-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px; font-weight: 500;
  color: #374151;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ava-ed-btn:hover:not([disabled]) { background: #f9fafb; border-color: #9ca3af; color: #1f2937; }
.ava-ed-btn:active:not([disabled]) { background: #f3f4f6; }
.ava-ed-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ava-ed-btn .icon { width: 14px; height: 14px; flex-shrink: 0; }
/* Primary-Variante (Speichern) */
.ava-ed-btn.primary {
  background: #2563eb; color: #fff; border-color: #2563eb;
}
.ava-ed-btn.primary:hover:not([disabled]) { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.ava-ed-sep { width: 1px; height: 22px; background: #e5e7eb; margin: 0 4px; }

/* Editor-Body als Grid: links Tabelle, rechts Sidebar — beide scrollen UNABHÄNGIG.
   Default-Breite: ~1/3 des Viewports, gedeckelt zwischen 380 und 560 px. Per Drag
   überschreibbar (gespeichert in localStorage als 'ava-detail-w'). */
.ava-ed-body {
  display: grid;
  grid-template-columns: 1fr var(--ava-detail-w, clamp(380px, 33vw, 560px));
  gap: 0;
  align-items: stretch;
  background: #fff;
  /* Feste Höhe — Browser scrollt nicht mehr, nur die zwei Spalten innen. */
  height: calc(100vh - var(--header-h, 60px) - var(--ava-subnav-h, 40px) - var(--ava-edtop-h, 55px));
  overflow: hidden;
  /* Bricht aus dem #app-Padding (24px) aus — links/rechts bis Fensterrand, unten kein Scroll-Überhang. */
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: -24px;
}
.ava-ed-body.detail-collapsed { grid-template-columns: 1fr 36px; }
/* Während des Resize-Drags: keine Transition, Cursor halten */
.ava-ed-body.resizing { user-select: none; cursor: ew-resize; }
.ava-ed-body.resizing * { cursor: ew-resize !important; pointer-events: none; }

/* Linke Spalte: Vorbemerkungen + Tabelle untereinander */
.ava-items-col {
  display: flex; flex-direction: column; min-width: 0;
  height: 100%; overflow: hidden;
}

.ava-items-table-wrap {
  background: #fff;
  overflow: auto;
  min-width: 0;
  height: 100%;
}
/* Auftragssumme am unteren Rand des Scroll-Containers fixieren */
.ava-items-table tfoot {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
  box-shadow: 0 -1px 0 #e5e7eb;
}

/* Detail-Sidebar — eigener Scroll-Container, volle Höhe der ed-body */
.ava-detail {
  background: #fff;
  display: flex; flex-direction: row;
  height: 100%;
  overflow: hidden;
  /* Positioning-Kontext für den Resizer (sonst wird der relativ zum Viewport positioniert!) */
  position: relative;
}
/* Resizer am linken Rand (6 px breit, ziehbar) */
.ava-detail-resizer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: ew-resize; z-index: 10; background: transparent;
  transition: background .15s, border-color .15s;
  border-left: 1px solid #e5e7eb;
}
.ava-detail-resizer:hover, .ava-detail-resizer.active {
  background: #2563eb; opacity: .25; border-left-color: #2563eb;
}
/* Bei collapsed: Resizer ausblenden */
.ava-ed-body.detail-collapsed .ava-detail-resizer { display: none; }
.ava-detail-toggle {
  width: 28px; flex-shrink: 0; background: #fafafa; border-right: 1px solid #f1f5f9;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12px; cursor: pointer; color: #6b7280;
  transition: background .15s, color .15s;
}
.ava-detail-toggle:hover { background: #f3f4f6; color: #1f2937; }
.ava-detail-toggle .icon { width: 14px; height: 14px; transition: transform .2s; }
.ava-ed-body.detail-collapsed .ava-detail-toggle .icon { transform: rotate(180deg); }
.ava-ed-body.detail-collapsed .ava-detail-inner { display: none; }

.ava-detail-inner {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  max-height: calc(100vh - 100px);
}
.ava-detail-empty {
  padding: 40px 20px; text-align: center; color: #9ca3af; font-size: 12px; line-height: 1.6;
}
.ava-detail-empty small { color: #cbd5e1; font-size: 11px; }

.ava-detail-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.ava-detail-head {
  padding: 12px 14px 12px 0; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ava-detail-oz {
  font-size: 13px; font-weight: 700; color: #1e40af; font-variant-numeric: tabular-nums;
}
.ava-detail-type {
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
  background: #dbeafe; color: #1e40af; text-transform: uppercase; letter-spacing: .3px;
}
.ava-detail-kt { flex-basis: 100%; font-size: 13px; font-weight: 600; color: #0f172a; }

.ava-detail-tabs {
  display: flex; border-bottom: 1px solid #e5e7eb; background: #fff;
}
.ava-dtab {
  flex: 1; padding: 10px 8px; font-size: 12px; color: #6b7280; cursor: pointer;
  border-bottom: 2px solid transparent; font-weight: 500; text-align: center; user-select: none;
  transition: all .15s;
}
.ava-dtab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.ava-dtab:hover:not(.active) { color: #374151; background: #f9fafb; }

.ava-detail-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.ava-dpane { display: none; }
.ava-dpane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 14px 0; }

/* Langtext-Pane: Textarea wächst, KG+Sirados bleibt unten fixiert */
#ava-dpane-lang { overflow: hidden; }
#ava-dpane-lang .ava-rt-edit { flex: 1; min-height: 80px; overflow-y: auto; }
#ava-detail-pos-only { margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f5f9; flex-shrink: 0; }

.ava-detail-label {
  display: block; font-size: 11px; color: #6b7280; text-transform: uppercase;
  letter-spacing: .4px; font-weight: 600; margin-bottom: 6px;
  height: 16px; line-height: 16px; overflow: visible;
}
.ava-detail-text, .ava-detail-input, .ava-detail-select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px;
  font-family: inherit; color: #1f2937; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.ava-detail-text { resize: vertical; min-height: 100px; line-height: 1.5; }
input.ava-detail-input { height: 34px; }
select.ava-detail-input { height: 34px; padding-top: 0; padding-bottom: 0; }
.ava-detail-text:focus, .ava-detail-input:focus, .ava-detail-select:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.ava-detail-foot {
  display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #e5e7eb;
  background: #fafafa; align-items: center;
}
.ava-detail-foot .ava-ed-btn { font-size: 12px; padding: 7px 12px; }
.ava-detail-status {
  font-size: 11px; color: #9ca3af; transition: color .2s;
}
.ava-detail-status.saving  { color: #2563eb; }
.ava-detail-status.saved   { color: #10b981; }
.ava-detail-status.error   { color: #dc2626; }

/* KI-Toolbar */
.ava-ai-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px;
  padding: 6px 8px; margin-bottom: 12px;
}
.ava-ai-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #1e40af; font-weight: 600; padding-right: 4px;
}
.ava-ai-label .icon { width: 14px; height: 14px; color: #2563eb; }
.ava-ai-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 4px 8px; border-radius: 5px; cursor: pointer;
  background: #fff; color: #1e40af; border: 1px solid #bfdbfe;
  font-family: inherit; font-weight: 500; transition: all .15s;
}
.ava-ai-btn:hover:not(:disabled) { background: #dbeafe; border-color: #93c5fd; }
.ava-ai-btn:disabled { opacity: .5; cursor: not-allowed; }
.ava-ai-btn .icon { width: 11px; height: 11px; }

/* Rich-Text-Editor (Langtext) */
.ava-rt-toolbar {
  display: flex; align-items: center; gap: 4px;
  background: #f9fafb; border: 1px solid #d1d5db; border-bottom: 0;
  border-radius: 6px 6px 0 0; padding: 5px 8px;
}
.ava-rt-btn {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 4px;
  width: 26px; height: 26px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #374151; font-family: inherit; line-height: 1;
}
.ava-rt-btn:hover { background: #f3f4f6; color: #1f2937; }
.ava-rt-btn:active, .ava-rt-btn.active { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.ava-rt-btn.b { font-weight: 700; }
.ava-rt-btn.i { font-style: italic; }
.ava-rt-btn.u { text-decoration: underline; }
.ava-rt-size-group {
  display: inline-flex; align-items: center;
  border: 1px solid #e5e7eb; border-radius: 4px; overflow: hidden;
}
.ava-rt-size-btn {
  background: #fff; border: none; border-right: 1px solid #e5e7eb;
  height: 26px; padding: 0 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; color: #374151; line-height: 1; white-space: nowrap;
  font-size: 11px;
}
.ava-rt-size-btn:last-child { border-right: none; }
.ava-rt-size-btn:hover { background: #f3f4f6; color: #1f2937; }
.ava-rt-size-btn.sz-l   { font-size: 13px; font-weight: 500; }
.ava-rt-size-btn.sz-xl  { font-size: 16px; font-weight: 500; }
.ava-rt-size-btn.sz-xxl { font-size: 20px; font-weight: 500; }
.ava-rt-color {
  width: 26px; height: 26px; border: 1px solid #e5e7eb; border-radius: 4px;
  cursor: pointer; padding: 1px; background: #fff;
}
.ava-rt-edit {
  width: 100%; box-sizing: border-box;
  border: 1px solid #d1d5db; border-radius: 0 0 6px 6px;
  padding: 10px 12px; min-height: 400px; flex: 1;
  overflow-y: auto;
  font-size: 13px; font-family: Arial, Helvetica, sans-serif; line-height: 1.55;
  color: #1f2937; background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
  white-space: pre-wrap; word-wrap: break-word;
}
.ava-rt-edit:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ava-rt-edit:empty:before {
  content: attr(placeholder); color: #cbd5e1; font-style: italic;
}

/* 2-Spalten Grid für Einheit/Sirados */
.ava-detail-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* ── Bieter-Vergleich + Abrechnung (Phase 3 + 4) ───────────── */
.ava-bv-wrap {
  padding: 0;
  background: #fff;
  /* Feste Höhe + flex-column → Tabellen-Wrap füllt mit overflow:auto, Footer hängt fest unten */
  height: calc(100vh - var(--header-h, 60px) - var(--ava-subnav-h, 40px));
  display: flex; flex-direction: column;
  /* Bricht aus dem #app-Padding (24px) aus, damit Footer wirklich am Bildschirmrand sitzt */
  margin: 0 -24px -24px -24px;
}
.ava-bv-head {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-bottom: 1px solid #e5e7eb; padding: 10px 14px;
}
.ava-bv-lv-select-wrap { display: flex; flex-direction: column; gap: 2px; }
/* Bieter-Karten oben sind redundant — Infos jetzt im Bieter-Header (bidder-head) */
.ava-bv-bidders { display: none !important; }
.ava-bv-bidders-OLD {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; padding: 14px;
}
.ava-bv-bidder-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 12px 14px; transition: border-color .15s;
}
.ava-bv-bidder-card.ke { background: #f0f9ff; border-color: #bfdbfe; }
.ava-bv-bidder-card.rank-1 { border-color: #10b981; box-shadow: 0 0 0 1px #10b981 inset; }
.ava-bv-bidder-card.awarded { background: #ecfdf5; border-color: #10b981; }
.ava-bv-bidder-card.incomplete { background: #fef2f2; border-color: #fecaca; }
.ava-bv-bidder-card .bc-rank {
  display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 5px; background: #e5e7eb; color: #374151; font-weight: 700; font-size: 11px;
  margin-right: 6px;
}
.ava-bv-bidder-card.rank-1 .bc-rank { background: #10b981; color: #fff; }
.ava-bv-bidder-card .bc-name { font-weight: 600; font-size: 13px; color: #0f172a; }
.ava-bv-bidder-card .bc-sum {
  font-size: 18px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums; margin-top: 8px;
}
.ava-bv-bidder-card .bc-meta { font-size: 11px; color: #6b7280; margin-top: 4px; }
.ava-bv-bidder-card .bc-actions { display: flex; gap: 4px; margin-top: 8px; }
.ava-bv-bidder-card .bc-actions .ava-ed-btn { font-size: 11px; padding: 4px 8px; }

/* Scroll-Container der EINEN Tabelle (thead+tbody+spacer+tfoot in einem).
   H+V-Scroll nativ. Spacer-Zeile am Ende des tbody füllt den Container, damit
   tfoot sticky-bottom immer greift (auch bei kurzen LVs).
   H-Scrollbar wird visuell ausgeblendet (User scrollt H per Trackpad/Shift+Wheel) —
   sonst nimmt sie 15px Platz unter dem Footer weg. */
.ava-bv-scroller {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  background: #fff;
  padding: 0;
}
.ava-bv-scroller::-webkit-scrollbar:horizontal { height: 0; display: none; }
.ava-bv-scroller .ava-bv-table { width: max-content; min-width: 100%; }
/* table-layout: fixed → Spaltenbreiten kommen NUR aus colgroup, nicht aus
   sichtbarem Inhalt. Damit bleiben Spalten beim H-Scroll absolut stabil
   (sonst rebalanced der Browser je nach welche Bieter-Cells sichtbar sind). */
.ava-bv-scroller .ava-bv-table { table-layout: fixed; }

/* ava-bv-wrap muss flex-column + min-height:0 sein, damit der scroller
   intern scrollt (sonst wächst er über die wrap-Höhe hinaus). */
.ava-bv-wrap { display: flex; flex-direction: column; min-height: 0; }

/* Protokoll-Liste: ganze Zeile klickbar, Hover-Effekt als Hinweis */
tr.proto-row { transition: background 0.12s; }
tr.proto-row:hover { background: #f5f7fa; }
tr.proto-row:hover td:first-child { box-shadow: inset 3px 0 0 #2563eb; }

/* Drag & Drop für Teilnehmer- und Verteiler-Zeilen im Protokoll */
.baudok-grip-cell { width: 22px; padding: 0; }
.baudok-drag-grip {
  display: inline-block; width: 18px; padding: 4px 0; line-height: 1;
  text-align: center; cursor: move; color: #cbd5e1; user-select: none;
  font-weight: 700; font-size: 12px; letter-spacing: -1px;
}
.baudok-drag-grip:hover { color: #64748b; }
.baudok-drag-grip:active { cursor: move; color: #2563eb; }
.baudok-draggable-row.baudok-row-dragging { opacity: 0.35; }
/* Verteiler-Liste: Grip vor dem Namen einfügen mit Lücke */
.verteiler-list-row .vl-grip { margin-right: 4px; flex-shrink: 0; }

/* Während Drag: Container relativ + größere Hit-Zone auf jeder Reihe */
.baudok-dnd-active { position: relative; }
.baudok-dnd-active.verteiler-list { padding: 6px 0; }
.baudok-dnd-active .baudok-draggable-row.verteiler-list-row {
  margin: 4px 0; transition: margin 0.12s;
}
/* Bei Tabellen erweitern wir das Cell-Padding (margin auf tr ignoriert Browser) */
.baudok-dnd-active.baudok-teilnehmer-body td,
table .baudok-dnd-active td {
  padding-top: 8px; padding-bottom: 8px; transition: padding 0.12s;
}

/* Drop-Indikator: dicke blaue Linie über volle Container-Breite,
   absolut positioniert per JS — gut sichtbar auch bei kleinen Listen */
.baudok-drop-indicator {
  position: absolute; height: 4px; background: #2563eb;
  border-radius: 2px; pointer-events: none; z-index: 100;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}
.baudok-drop-indicator::before,
.baudok-drop-indicator::after {
  content: ''; position: absolute; top: -3px; width: 10px; height: 10px;
  border: 3px solid #2563eb; border-radius: 50%; background: #fff;
}
.baudok-drop-indicator::before { left: -5px; }
.baudok-drop-indicator::after  { right: -5px; }

/* Bieter-Pick-Modal: Filter-Chips, Liste der Adressbuch-Einträge */
.bv-pick-gewerke { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-pick-chip {
  padding: 4px 10px; font-size: 11px; font-weight: 500;
  background: #fff; color: #475569; border: 1px solid #cbd5e1; border-radius: 12px;
  cursor: pointer; transition: all 0.15s; user-select: none;
}
.bv-pick-chip:hover { border-color: #2563eb; color: #2563eb; }
.bv-pick-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.bv-pick-list {
  max-height: 400px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.bv-pick-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #f1f5f9; gap: 12px;
}
.bv-pick-row:hover:not(.used) { background: #f9fafb; }
.bv-pick-row.used { opacity: 0.55; }
.bv-pick-info { flex: 1; min-width: 0; }
.bv-pick-name { font-size: 13px; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.bv-pick-meta { display: flex; gap: 10px; margin-top: 2px; font-size: 11px; color: #6b7280; align-items: center; flex-wrap: wrap; }
.bv-pick-tag { background: #eef2ff; color: #1e40af; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.bv-pick-used-badge { font-size: 10px; font-weight: 500; background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 10px; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* iOS-Style Toggle Switches in der BV-Toolbar */
.ava-bv-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; font-size: 12px; color: #475569;
  margin-right: 16px;
}
.ava-bv-toggle input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.ava-bv-toggle-track {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
  background: #cbd5e1; border-radius: 10px;
  transition: background 0.2s ease;
}
.ava-bv-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: left 0.2s ease;
}
.ava-bv-toggle input:checked + .ava-bv-toggle-track {
  background: #2563eb;
}
.ava-bv-toggle input:checked + .ava-bv-toggle-track .ava-bv-toggle-thumb {
  left: 18px;
}
.ava-bv-toggle:hover .ava-bv-toggle-track { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.ava-bv-toggle-label { white-space: nowrap; }

/* Position-Highlight: günstigster grün, teuerster rot, Mitte neutral.
   Wird nur gesetzt wenn der "Beste Preise hervorheben"-Toggle aktiv ist. */
.ava-bv-table td.bidder-grp.price-best { background: #dcfce7 !important; color: #166534 !important; }
.ava-bv-table td.bidder-grp.price-worst { background: #fee2e2 !important; color: #991b1b !important; }

/* tfoot sticky-bottom in der Single-Table, opaker Hintergrund + Trenner oben */
.ava-bv-table tfoot tr.bv-foot-toggle-row td {
  background: #f9fafb; border-top: 2px solid #cbd5e1; padding: 0;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .bv-footer-toggle {
  padding: 4px 10px; font-size: 11px; color: #475569; cursor: pointer;
  display: flex; align-items: center; gap: 6px; user-select: none;
  /* Rahmen um den Toggle-Inhalt — wirkt wie ein klickbarer Pill/Button */
  border: 1px solid #cbd5e1; border-radius: 4px;
  background: #fff;
  margin: 4px 14px;
  /* Sticky-LEFT damit beim H-Scroll am linken Container-Rand sichtbar bleibt
     (parent td hat colspan=alle und scrollt mit). */
  position: sticky; left: 14px;
  width: max-content; max-width: 600px;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .bv-footer-toggle:hover {
  background: #f3f4f6; color: #1f2937; border-color: #94a3b8;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .bv-footer-toggle:hover {
  background: #f3f4f6; color: #1f2937;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .chev {
  font-size: 9px; transition: transform .15s; display: inline-block; transform: rotate(-90deg);
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .chev.open { transform: rotate(0deg); }
/* Footer-Σ-Zeilen */
.ava-bv-table tfoot td.bv-foot-label { color: #374151; padding: 8px 10px; font-weight: 600; }
.ava-bv-table tfoot tr.bv-foot-bold td.bv-foot-label { font-weight: 700; color: #0f172a; }
.ava-bv-table tfoot td.bv-foot-val {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #6b7280; padding: 8px 10px; font-weight: 600;
}
.ava-bv-table tfoot tr.bv-foot-bold td.bv-foot-val { font-weight: 700; color: #0f172a; }
/* KEIN grünes Filling im Footer — Bieter-Zellen opak weiß */
.ava-bv-table tfoot td.bidder-grp { background: #fff !important; color: #0f172a !important; }
/* Footer-Inputs rahmenlos */
.ava-bv-table tfoot input.bv-foot-pct {
  width: 50px; box-sizing: border-box; border: none; outline: none;
  background: transparent; padding: 0; font: inherit; text-align: right;
  font-variant-numeric: tabular-nums; color: inherit; line-height: inherit;
}

.ava-bv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ava-bv-table th {
  text-align: left; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase;
  color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  font-weight: 600; position: sticky; top: 0; z-index: 2; letter-spacing: .3px;
  white-space: nowrap;
}
.ava-bv-table th.num, .ava-bv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Pro-Bieter Spalten (3er-Block: EP / GB / Vermerk) — leicht eingefärbt + Trenn-Linie links */
.ava-bv-table th.bidder-grp,
.ava-bv-table td.bidder-grp { background: rgba(239,246,255,0.55); border-left: 1px solid #e5e7eb; }
.ava-bv-table th.bidder-grp { color: #1e40af; }
/* Erste Spalte eines Bieter-Blocks → dicke Trenn-Linie */
/* Cell-Border entfernt — LV→Bieter-Trennlinie kommt vom Container (.bv-split-left border-right).
   Trennlinie ZWISCHEN Bietern: 4px Indigo auf .bidder-divider — geht durch alle Zeilen
   (Bieter-Header, Spalten-Header, alle Zellen) damit die Linie durchgehend ist. */
.ava-bv-table th.bidder-head.bidder-divider,
.ava-bv-table th.bidder-grp.bidder-divider,
.ava-bv-table td.bidder-grp.bidder-divider {
  border-left: 2px solid #94a3b8 !important;
}

/* Bieter-Header — 2-zeilig: Zeile 1 (Rang + Name + ⋮-Menü) · Zeile 2 (Σ + Δ% + Status) */
.ava-bv-table th.bidder-head {
  text-align: left; background: #eef2ff; color: #1e3a8a;
  border-bottom: none; padding: 6px 10px;
  cursor: move; user-select: none; vertical-align: middle;
}
.ava-bv-table th.bidder-head.rank-1     { background: #ecfdf5; }
.ava-bv-table th.bidder-head.awarded    { background: #dbeafe; }
.ava-bv-table th.bidder-head.recommended { box-shadow: inset 0 -3px 0 #ca8a04; }
.ava-bv-table th.bidder-head:active { cursor: move; }
.ava-bv-table th.bidder-head.bv-bidder-dragging { opacity: .4; }
.ava-bv-table th.bidder-head.bv-bidder-drop-left  { box-shadow: inset 4px 0 0 #16a34a; }
.ava-bv-table th.bidder-head.bv-bidder-drop-right { box-shadow: inset -4px 0 0 #16a34a; }

.ava-bv-table .bv-head-row1 {
  display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2;
}
.ava-bv-table .bv-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  background: #94a3b8; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.ava-bv-table th.bidder-head.rank-1 .bv-rank { background: #16a34a; }
.ava-bv-table .bv-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1e3a8a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ava-bv-table .bv-trophy { color: #ca8a04; margin-right: 3px; }
.ava-bv-table .bv-menu-btn {
  background: transparent; border: none; cursor: pointer;
  width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  color: #6b7280; font-size: 16px; line-height: 1; border-radius: 4px;
}
.ava-bv-table .bv-menu-btn:hover { background: rgba(0,0,0,0.06); color: #1f2937; }

.ava-bv-table .bv-head-row2 {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11px;
}
.ava-bv-table .bv-sum { font-weight: 600; color: #0f172a; flex-shrink: 0; }
.ava-bv-table .bv-delta { font-size: 10.5px; color: #6b7280; flex: 1; }
.ava-bv-table .bv-delta.better { color: #16a34a; }
.ava-bv-table .bv-delta.worse  { color: #dc2626; }
.ava-bv-table .bv-status {
  display: inline-block; font-size: 9.5px; padding: 2px 6px; border-radius: 3px;
  text-transform: none; font-weight: 600; letter-spacing: 0; flex-shrink: 0;
}
.ava-bv-table .bv-status.angenommen      { background: #16a34a; color: #fff; }
.ava-bv-table .bv-status.eingegangen     { background: #fff;    color: #6b7280; border: 1px solid #d1d5db; }
.ava-bv-table .bv-status.beauftragt      { background: #2563eb; color: #fff; }
.ava-bv-table .bv-status.nicht-abgegeben { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
/* Bieter ohne Werte: Rang-Pill grau und entsättigt */
.ava-bv-table th.bidder-head.no-offer { opacity: 0.7; }
.ava-bv-table .bv-rank.no-rank { background: #e5e7eb; color: #9ca3af; }

/* 3-Punkte-Menü Popover */
.bv-bidder-popover {
  position: fixed; min-width: 200px; background: #fff;
  border: 1px solid #d1d5db; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1000; padding: 4px 0; font-size: 13px;
}
.bv-bidder-popover .bv-pop-item {
  padding: 8px 14px; cursor: pointer; color: #1f2937;
  display: flex; align-items: center; gap: 8px;
}
.bv-bidder-popover .bv-pop-item:hover { background: #f3f4f6; }
.bv-bidder-popover .bv-pop-item.danger { color: #dc2626; }
.bv-bidder-popover .bv-pop-item.danger:hover { background: #fef2f2; }
.bv-bidder-popover .bv-pop-sep { height: 1px; background: #e5e7eb; margin: 4px 0; }

/* Kurztext: feste Spaltenbreite, lange Texte mit Ellipsis (Tooltip per title= zeigt voll) */
.ava-bv-table td.bv-cell-kurztext {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}
.ava-bv-table th, .ava-bv-table td { line-height: 1.5; box-sizing: border-box; }

/* ── Sticky thead + tfoot ──
   thead bleibt beim V-Scroll oben, tfoot bleibt unten — ohne JS.
   WICHTIG: Hintergründe MÜSSEN opak sein, sonst scheint der scrollende tbody
   durch die Header-/Footer-Zellen durch. Die generelle .bidder-grp-Regel
   nutzt rgba(...,0.55) — wir überschreiben sie hier mit höherer Spezifität. */
.ava-bv-table thead th { position: sticky; top: 0; z-index: 6; background: #f9fafb; }
.ava-bv-table thead th.bidder-head { background: #eef2ff; }
.ava-bv-table thead th.bidder-head.rank-1     { background: #ecfdf5; }
.ava-bv-table thead th.bidder-head.awarded    { background: #dbeafe; }
/* Spalten-Header EP/GB/Vermerk pro Bieter (Zeile 2 thead) — opak */
.ava-bv-table thead th.bidder-grp { background: #eef2ff; }
/* Footer-Zellen pro Bieter — opak (sonst scheint Tabelle durch) */
.ava-bv-table tfoot td { position: sticky; bottom: 0; z-index: 5; background: #fff; }
.ava-bv-table tfoot td.bidder-grp { background: #f8fafc; }
.ava-bv-table tfoot tr:first-child td { box-shadow: 0 -2px 0 #cbd5e1; }
/* Toggle-Bar im tfoot — opak weiß über die ganze Breite */
.ava-bv-table tfoot tr.bv-foot-toggle-row td { background: #fff; }

/* ── Sticky linke 6 Spalten (LV-Bereich) ──
   Beim H-Scroll bleiben die LV-Spalten stehen. Kumulative left-Werte. */
.ava-bv-table th.bv-sticky,
.ava-bv-table td.bv-sticky { position: sticky; z-index: 4; background: #fff; }
.ava-bv-table thead th.bv-sticky { z-index: 7; background: #f9fafb; }
.ava-bv-table tfoot td.bv-sticky { z-index: 7; background: #fff; }
.ava-bv-table tr.bv-title    td.bv-sticky { background: #eef2ff; }
.ava-bv-table tr.bv-subtitle td.bv-sticky { background: #f0f9ff; }
/* LV-Spalten: kompakte fixe Breiten via JS (siehe _avaBvFixColumnWidths).
   CSS gibt nur Fallback-min-width für initiales Rendering. */
.ava-bv-table th.bv-sticky-1, .ava-bv-table td.bv-sticky-1 { min-width: 50px; }
.ava-bv-table th.bv-sticky-2, .ava-bv-table td.bv-sticky-2 { min-width: 240px; }
.ava-bv-table th.bv-sticky-3, .ava-bv-table td.bv-sticky-3 { min-width: 60px; }
.ava-bv-table th.bv-sticky-4, .ava-bv-table td.bv-sticky-4 { min-width: 40px; }
.ava-bv-table th.bv-sticky-5, .ava-bv-table td.bv-sticky-5 { min-width: 90px; }
.ava-bv-table th.bv-sticky-6, .ava-bv-table td.bv-sticky-6 { min-width: 100px; }
/* Kurztext lange Texte mit Ellipsis kürzen — Spalte bleibt schmal,
   voller Text via title-Attribut als Tooltip sichtbar. */
.ava-bv-table td.bv-cell-kurztext {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kurztext-Header: overflow:visible damit Resize-Handle absolute am rechten
   Rand sichtbar bleibt. KEIN position:relative — sonst überschreibt es das
   sticky aus .bv-sticky und der Header scrollt mit. Sticky-Elemente sind
   automatisch containing block für absolute children. */
.ava-bv-table th.bv-kt-head { overflow: visible; }
/* Gemeinsames Styling für KT- und Vermerk-Resize-Handles: 3 vertikale Punkte
   (⋮) als sichtbarer Drag-Indikator, hover/active in blau. */
.ava-bv-table .bv-kt-resize-handle,
.ava-bv-table .bv-resize-handle {
  position: absolute; right: -4px; top: 0; width: 14px; height: 100%;
  cursor: col-resize; background: transparent; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.ava-bv-table .bv-kt-resize-handle::before,
.ava-bv-table .bv-resize-handle::before {
  content: "⋮"; font-size: 14px; color: #94a3b8; line-height: 1;
  font-weight: 700; letter-spacing: -2px;
}
.ava-bv-table .bv-kt-resize-handle:hover::before,
.ava-bv-table .bv-kt-resize-handle.active::before,
.ava-bv-table .bv-resize-handle:hover::before,
.ava-bv-table .bv-resize-handle.active::before { color: #2563eb; }
.ava-bv-table .bv-kt-resize-handle:hover,
.ava-bv-table .bv-kt-resize-handle.active,
.ava-bv-table .bv-resize-handle:hover,
.ava-bv-table .bv-resize-handle.active { background: rgba(37, 99, 235, 0.08); }
/* Trennlinie LV ↔ Bieter — helle Farbe wie die anderen Zell-Trennungen
   (#e5e7eb, gleiche Farbe wie die generelle border zwischen Spalten). */
.ava-bv-table th.bv-sticky-6,
.ava-bv-table td.bv-sticky-6 {
  border-right: 1px solid #e5e7eb;
}

/* ── Summen-Footer ───────────────────────────────────────────
   Eigener Container UNTERHALB des Tabellen-Wraps. Da .ava-bv-wrap
   feste Höhe hat und flex-column ist, hängt der Footer fix unten am
   Bildschirmrand. Tabellen-Wrap darüber scrollt eigenständig vertikal. */
.bv-footer {
  flex: 0 0 auto;
  background: #fff; border-top: 2px solid #cbd5e1;
  box-shadow: 0 -4px 12px -4px rgba(15,23,42,0.10);
  /* Gleiches horizontales Padding wie .ava-bv-table-wrap (14px) — sonst rutscht
     die Indigo-Trennlinie unten 14px nach links/rechts gegenüber oben. */
  padding-left: 14px;
  padding-right: 14px;
}
/* bv-footer-right hat scrollbar-gutter:stable — die H-Scrollbar nimmt 12px am unteren
   Container-Rand. bv-footer-left muss padding-bottom: 12px haben damit beide Hälften
   gleich hoch sind. Im expanded Zustand: keine zusätzliche Reserve nötig, da
   overflow-y:hidden die V-Scrollbar verbietet. */
.bv-footer-left { padding-bottom: 12px; }
.bv-footer .bv-split { gap: 0; }
/* Footer-Layout: links fix 700px (= bv-split-left), rechts H-scroll synchron mit oberer Bieter-Tabelle */
.bv-footer-left {
  flex: 0 0 700px; min-width: 700px;
  /* Trennung gehört zum LV-Container (links, NICHT scrollend) — gleich wie bv-split-left */
  border-right: 2px solid #94a3b8;
}
.bv-footer-right {
  flex: 1 1 auto; min-width: 0;
  /* overflow-x: scroll → H-Scrollbar IMMER reserviert (egal ob notwendig oder nicht).
     overflow-y: hidden → keine V-Scrollbar, auch wenn Browser überreagiert.
     scrollbar-gutter: stable → Browser reserviert Platz für die Scrollbar im Layout. */
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}
.bv-footer-right .bv-footer-table { width: max-content; min-width: 100%; }
/* Footer-Scrollbar deutlich sichtbar — das ist die einzige H-Scrollbar im BV (für oben + unten) */
.bv-footer-right::-webkit-scrollbar { height: 12px; }
.bv-footer-right::-webkit-scrollbar-track { background: #f1f5f9; }
.bv-footer-right::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; border: 2px solid #f1f5f9; }
.bv-footer-right::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* Erste Bieter-Cell pro Footer-Zeile bekommt die Indigo-Trennlinie */
/* LV→Bieter-Trennlinie im Footer: vom Container (.bv-footer-left border-right).
   Trennlinie ZWISCHEN Bietern im Footer: gleiche 4px wie oben. */
.bv-footer-table td.bidder-divider {
  border-left: 2px solid #94a3b8 !important;
}
.bv-footer-table td.bv-foot-vermerk-spacer { background: transparent; border-bottom: 1px solid #f1f5f9; }
.bv-footer-toggle {
  background: #f9fafb; border-top: 2px solid #cbd5e1; border-bottom: 1px solid #e5e7eb;
  padding: 4px 12px; font-size: 11px; color: #6b7280; cursor: pointer;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.bv-footer-toggle:hover { background: #f3f4f6; color: #1f2937; }
.bv-footer-toggle .chev { transition: transform .15s; display: inline-block; font-size: 9px; }
.bv-footer.expanded .bv-footer-toggle .chev { transform: rotate(180deg); }
.bv-footer-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.bv-footer-table tr.expanded-only { display: none; }
.bv-footer.expanded .bv-footer-table tr.expanded-only { display: table-row; }
/* Single-Table-Layout: expanded-only auf tfoot des Single-Containers */
.ava-bv-table tfoot tr.expanded-only { display: none; }
.ava-bv-table tfoot.expanded tr.expanded-only { display: table-row; }
/* Toggle-Chevron rotiert wenn tfoot expanded ist */
.ava-bv-table tfoot.expanded .bv-footer-toggle .chev { transform: rotate(180deg); }
/* Padding identisch zu .ava-bv-table td — damit die Spalten-Pixel exakt aligned sind */
.bv-footer-table td {
  padding: 6px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
  box-sizing: border-box;
}
.bv-footer-table tr:last-child td { border-bottom: none; }
.bv-footer-table td.bv-foot-label { font-size: 12px; color: #374151; }
.bv-footer-table td.bv-foot-label.bold { font-weight: 700; color: #0f172a; }
.bv-footer-table td.bv-foot-val {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #6b7280; font-size: 12px;
}
.bv-footer-table td.bv-foot-val.bold { font-weight: 700; color: #0f172a; }
.bv-footer-table td.bv-foot-val.ke   { color: #6b7280; }
.bv-footer-table input.bv-foot-pct {
  width: 50px; box-sizing: border-box; border: 1px solid transparent;
  background: transparent; padding: 2px 4px; font: inherit; text-align: right;
  font-variant-numeric: tabular-nums; border-radius: 3px; font-size: 11px;
}
.bv-footer-table input.bv-foot-pct:hover { border-color: #cbd5e1; background: #fff; }
.bv-footer-table input.bv-foot-pct:focus { outline: none; border-color: #2563eb; background: #fff; }
.ava-bv-table th.bidder-head .bv-bidder-status.angenommen { background: #16a34a; color: #fff; }
.ava-bv-table th.bidder-head .bv-bidder-status.eingegangen { background: #fff; color: #6b7280; border: 1px solid #d1d5db; }
.ava-bv-table th.bidder-head .bv-bidder-status.beauftragt { background: #2563eb; color: #fff; }
.ava-bv-table th.bidder-head .bv-bidder-status.unvollständig { background: #fef2f2; color: #b91c1c; }

.ava-bv-table td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
/* Aktive Zelle (input fokussiert) — unterer Strich weg + blauer Inset-Rahmen
   als klarer Visual-Indikator. :focus-within greift wenn ein Input drinnen
   fokussiert ist. Gilt für EP/Vermerk in tbody UND %-Inputs im tfoot. */
.ava-bv-table td.bidder-cell:focus-within,
.ava-bv-table tfoot td:focus-within {
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 2px #2563eb;
  background: #fff !important;
}

/* Title / Subtitle / Position-Zeilen */
.ava-bv-table tr.bv-title    td { background: #eef2ff; color: #1e1b4b; font-weight: 600; font-size: 12.5px; }
.ava-bv-table tr.bv-subtitle td { background: #f0f9ff; color: #075985; font-weight: 500; }
/* Title/Subtitle Bieter-Spalten: gleiche blaue Tönung wie der LV-Bereich
   (statt grün) — damit ist die Title-Zeile durchgehend blau erkennbar. */
.ava-bv-table tr.bv-title    td.bidder-grp { background: #eef2ff; color: #1e1b4b; font-weight: 700; }
.ava-bv-table tr.bv-subtitle td.bidder-grp { background: #f0f9ff; color: #075985; font-weight: 600; }

/* Tiefen-Indent für Kurztext-Spalte (per data-depth, wie im LV-Editor) */
.ava-bv-table tr[data-depth="1"] td.bv-cell-kurztext { padding-left: 22px; }
.ava-bv-table tr[data-depth="2"] td.bv-cell-kurztext { padding-left: 42px; }
.ava-bv-table tr[data-depth="3"] td.bv-cell-kurztext { padding-left: 62px; }

/* Chevron für Title/Subtitle (klappt Subtree zu/auf) */
.ava-bv-table .bv-chev {
  display: inline-block; width: 12px; margin-right: 4px; cursor: pointer;
  transition: transform .15s; color: #6b7280; user-select: none; font-size: 10px;
}
.ava-bv-table .bv-chev.collapsed { transform: rotate(-90deg); }

/* OZ-Cell kompakt */
.ava-bv-table td.bv-cell-oz { color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* EP-Input pro Bieter — rahmenlos wie LV-Editor (.ava-edit-input):
   border:none, outline:none, transparent — kein Hover-/Focus-Rahmen. */
.ava-bv-table .bidder-cell.ep input {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  background: transparent; padding: 0; font: inherit; text-align: right;
  font-variant-numeric: tabular-nums; color: inherit; line-height: inherit;
}
/* Placeholder "—" bei leeren EP-Inputs nur sichtbar wenn nicht fokussiert.
   Beim Klick/Fokus: weg, damit der Cursor frei steht ohne störenden Strich. */
.ava-bv-table .bidder-cell.ep input::placeholder { color: #94a3b8; opacity: 1; }
.ava-bv-table .bidder-cell.ep input:focus::placeholder { color: transparent; }

/* Diff-Färbung (Bieter-EP/GB vs. KE-EP/GP) */
.ava-bv-table td.bidder-grp.diff-better  { background: #dcfce7; color: #166534; }
.ava-bv-table td.bidder-grp.diff-worse   { background: #fee2e2; color: #991b1b; }
.ava-bv-table td.bidder-grp.diff-equal   { background: rgba(229,231,235,0.5); color: #374151; }

/* Numerische Spalten (Kosten + alle Bieter-num-Zellen) nie umbrechen — Zahl + € auf einer Zeile */
.ava-bv-table td.num,
.ava-bv-table td.bidder-grp.num { white-space: nowrap; }

/* Vermerk-Spalte — Breite per inline-style pro Bieter, Drag-Handle am rechten Rand
   Höhe wird per JS auf die ganze Tabellenhöhe gesetzt (siehe _avaBvSizeResizeHandles)
   damit der Drag-Hotspot über die komplette Spalte verfügbar ist.
   WICHTIG: position muss STICKY bleiben (sonst scrollt der Header mit) — sticky wirkt
   wie ein containing block für absolute Children, also bleibt das Handle korrekt
   am rechten Rand der Vermerk-Spalte verankert. */
.ava-bv-table th.bv-vermerk-head { overflow: visible; }
/* (Styling für .bv-resize-handle ist gemeinsam mit .bv-kt-resize-handle weiter
   oben definiert — 3-Punkte-Indikator, hover/active blau.) */
/* Vermerk-Input rahmenlos wie LV-Editor */
.ava-bv-table .bidder-cell.vermerk input {
  width: 100%; min-width: 60px; box-sizing: border-box; border: none; outline: none;
  background: transparent; padding: 0; font: inherit; font-size: 11px;
  color: #4b5563; line-height: inherit;
}
.ava-bv-table .bidder-cell.vermerk input:focus { color: #0f172a; }

/* ── tfoot Single-Source-of-Truth: sticky-bottom, opak, hoher z-index ──
   Diese Regeln stehen am Ende des bv-Blocks und überschreiben alle vorherigen
   tfoot-Definitionen (gleiche Spezifität → letzte Regel gewinnt). */
.ava-bv-table tfoot td {
  position: sticky !important;
  bottom: 0;
  z-index: 8 !important;
  background: #f9fafb !important;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  border: none;
}
/* Sticky LV-Spalten im tfoot brauchen NOCH höheren z-index (über sticky thead) */
.ava-bv-table tfoot td.bv-sticky { z-index: 9 !important; background: #f9fafb !important; }
/* Bieter-Zellen im Footer: durchgehend blau (#eef2ff, wie LV-Title-Bereich).
   has-data Klasse macht den Text dunkler/bolder als visueller Hinweis dass
   der Bieter echte Werte eingetragen hat — Hintergrund bleibt blau. */
.ava-bv-table tfoot td.bidder-grp { background: #eef2ff !important; color: #475569 !important; }
.ava-bv-table tfoot td.bidder-grp.has-data { background: #eef2ff !important; color: #1e1b4b !important; font-weight: 700; }
/* Toggle-Bar (oberste tfoot-Zeile) — opak weiß, Trenner oben */
.ava-bv-table tfoot tr.bv-foot-toggle-row td {
  background: #fff !important;
  border-top: 2px solid #cbd5e1 !important;
  padding: 0 !important;
  z-index: 10 !important;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .bv-footer-toggle {
  padding: 4px 10px; font-size: 11px; color: #475569; cursor: pointer;
  display: flex; align-items: center; gap: 6px; user-select: none;
  /* Rahmen um den Toggle-Inhalt — wirkt wie ein klickbarer Pill/Button */
  border: 1px solid #cbd5e1; border-radius: 4px;
  background: #fff;
  margin: 4px 14px;
  /* Sticky-LEFT damit beim H-Scroll am linken Container-Rand sichtbar bleibt
     (parent td hat colspan=alle und scrollt mit). */
  position: sticky; left: 14px;
  width: max-content; max-width: 600px;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .bv-footer-toggle:hover {
  background: #f3f4f6; color: #1f2937; border-color: #94a3b8;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .bv-footer-toggle:hover {
  background: #f3f4f6; color: #1f2937;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .chev {
  font-size: 9px; transition: transform .15s; display: inline-block;
}
.ava-bv-table tfoot tr.bv-foot-toggle-row .chev.open { transform: rotate(180deg); }
/* Footer-Inputs (% Nachlass / USt / Skonto) rahmenlos wie LV-Editor */
.ava-bv-table tfoot input.bv-foot-pct {
  width: 50px; box-sizing: border-box; border: none; outline: none;
  background: transparent; padding: 0; font: inherit; text-align: right;
  font-variant-numeric: tabular-nums; color: inherit; line-height: inherit;
}
/* Σ-Werte: Labels grau, Werte rechts ausgerichtet */
.ava-bv-table tfoot td.bv-foot-label { color: #374151; }
.ava-bv-table tfoot tr.bv-foot-bold td.bv-foot-label { font-weight: 700; color: #0f172a; }
.ava-bv-table tfoot td.bv-foot-val {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: #6b7280;
}
.ava-bv-table tfoot tr.bv-foot-bold td.bv-foot-val { font-weight: 700; color: #0f172a; }

/* Status-Pills für Rechnungen */
.ava-status-pill {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .3px; font-weight: 600;
}
.ava-status-pill.entwurf       { background: #fef3c7; color: #92400e; }
.ava-status-pill.eingegangen   { background: #dbeafe; color: #1e40af; }
.ava-status-pill.in_pruefung   { background: #fef3c7; color: #92400e; }
.ava-status-pill.geprueft      { background: #e0e7ff; color: #3730a3; }
.ava-status-pill.freigegeben   { background: #d1fae5; color: #065f46; }
.ava-status-pill.bezahlt       { background: #d1fae5; color: #065f46; }
.ava-status-pill.storniert     { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }

/* Aufmaß-Tabelle (Menge-Tab) */
.ava-aufmass-info {
  font-size: 11px; color: #475569;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 10px;
}
.ava-aufmass-info b { color: #0f172a; font-weight: 600; font-variant-numeric: tabular-nums; }
.ava-aufmass-info .delta-pos { color: #b91c1c; font-weight: 600; }
.ava-aufmass-info .delta-neg { color: #047857; font-weight: 600; }
.ava-aufmass-info .delta-zero { color: #6b7280; }

.ava-aufmass-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ava-aufmass-table th {
  text-align: left; padding: 6px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .3px; color: #6b7280; background: #f9fafb;
  border-bottom: 1px solid #e5e7eb; font-weight: 600;
}
.ava-aufmass-table th.num { text-align: right; }
.ava-aufmass-table td {
  padding: 4px 6px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.ava-aufmass-table td.num { text-align: right; }
.ava-aufmass-table td.pos { color: #475569; font-weight: 500; }
.ava-aufmass-table input.aufm-cell {
  width: 100%; box-sizing: border-box; border: 1px solid transparent;
  background: transparent; padding: 4px 6px; font: inherit; color: inherit;
  border-radius: 4px;
}
.ava-aufmass-table input.aufm-cell:hover { border-color: #cbd5e1; }
.ava-aufmass-table input.aufm-cell:focus { outline: none; border-color: #2563eb; background: #fff; }
.ava-aufmass-table input.aufm-cell.num { text-align: right; }
.ava-aufmass-table tr.new td { background: #fafbfc; }
.ava-aufmass-table tr.new input.aufm-cell::placeholder { color: #cbd5e1; font-style: italic; }
.ava-aufmass-table tfoot td {
  padding: 8px 6px; border-top: 2px solid #e5e7eb; background: #f9fafb;
  font-size: 12px;
}
.ava-aufmass-del {
  background: none; border: none; cursor: pointer; color: #cbd5e1;
  padding: 2px 4px; border-radius: 3px; font-size: 14px;
}
.ava-aufmass-table tr:hover .ava-aufmass-del { color: #dc2626; }
.ava-aufmass-del:hover { background: #fee2e2; }

/* ── Plus-Button auf Title/Subtitle (Hover-Sichtbarkeit) ───────── */
.ava-row-add-btn {
  background: none; border: 1px solid transparent; cursor: pointer;
  padding: 1px 7px; border-radius: 4px; margin-left: 6px;
  font-size: 13px; font-weight: 500; line-height: 1.2;
  display: inline-flex; align-items: center;
  opacity: 0; transition: opacity .15s, background .15s, border-color .15s;
  vertical-align: -1px;
}
.ava-items-table tr:hover .ava-row-add-btn { opacity: 1; }
.ava-row-add-btn:hover { background: rgba(255,255,255,.5); border-color: currentColor; }
.ava-items-table tr.itype-title    .ava-row-add-btn { color: #7c3aed; }
.ava-items-table tr.itype-subtitle .ava-row-add-btn { color: #0369a1; }
.ava-items-table tr.itype-title    .ava-row-add-btn:hover { background: #fff; }
.ava-items-table tr.itype-subtitle .ava-row-add-btn:hover { background: #fff; }

/* ── Add-Menü (Popover) ───────────────────────────────────── */
.ava-add-menu {
  position: fixed; min-width: 220px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
  padding: 4px; z-index: 1500;
  display: none; font-size: 13px;
}
.ava-add-menu.open { display: block; }
.ava-am-item {
  padding: 8px 10px; border-radius: 5px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; color: #1f2937;
  user-select: none;
}
.ava-am-item:hover { background: #eff6ff; color: #1e40af; }
.ava-am-item .icon { width: 14px; height: 14px; color: #6b7280; flex-shrink: 0; }
.ava-am-item:hover .icon { color: #2563eb; }
.ava-am-item span { flex: 1; }
.ava-am-key {
  font-size: 10px; color: #9ca3af; font-family: 'SF Mono', Menlo, Consolas, monospace;
  padding: 1px 6px; background: #f3f4f6; border-radius: 3px; flex-shrink: 0;
}
.ava-am-sep { height: 1px; background: #f1f5f9; margin: 4px 0; }

/* ── Rechtsklick-Kontextmenü mit Submenüs ─────────────────── */
.ava-ctx-menu {
  position: fixed; min-width: 240px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15,23,42,.22);
  padding: 5px; z-index: 1600;
  display: none; font-size: 13px; user-select: none;
}
.ava-ctx-menu.open { display: block; }
.ava-ci {
  position: relative; padding: 9px 12px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; color: #1f2937;
}
.ava-ci .icon { color: #6b7280; width: 16px; height: 16px; flex-shrink: 0; }
.ava-ci:hover { background: #f1f5f9; }
.ava-ci span:not(.ava-ci-tag):not(.ava-ci-key) { flex: 1; }
.ava-ci.danger { color: #dc2626; }
.ava-ci.danger .icon { color: #dc2626; }
.ava-ci.has-sub::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid #94a3b8; border-top: 1.5px solid #94a3b8;
  transform: rotate(45deg); margin-left: auto; flex-shrink: 0;
}
.ava-ci.has-sub:hover::after { border-color: #475569; }
.ava-ci-sep { height: 1px; background: #e5e7eb; margin: 5px 4px; }
.ava-ci-key {
  font-size: 10px; color: #9ca3af; font-family: 'SF Mono', Menlo, Consolas, monospace;
  padding: 1px 6px; background: #f3f4f6; border-radius: 3px; flex-shrink: 0;
}
.ava-ci-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.ava-ci-tag.A { background: #e0e7ff; color: #3730a3; }
.ava-ci-tag.E { background: #fef3c7; color: #92400e; }
.ava-ci-tag.B { background: #fee2e2; color: #991b1b; }

/* Submenu — wird beim Hover des parent-.ci sichtbar */
.ava-ci-sub {
  position: absolute; left: 100%; top: -5px; margin-left: 4px;
  min-width: 180px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px; box-shadow: 0 14px 40px rgba(15,23,42,.22);
  padding: 5px; display: none; z-index: 1;
}
.ava-ci.has-sub:hover > .ava-ci-sub,
.ava-ci.has-sub:focus-within > .ava-ci-sub { display: block; }

/* Farb-Grid im Submenu */
.ava-ci-color-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px;
}
.ava-ci-color {
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.08);
}
.ava-ci-color:hover { transform: scale(1.15); transition: transform .1s; }
.ava-ci-color.none {
  background: repeating-linear-gradient(45deg,#fff,#fff 4px,#e5e7eb 4px,#e5e7eb 5px);
}

/* Langtext-Auszug unter dem Kurztext in der LV-Tabelle */
.ava-items-table td .ava-cell-lt {
  font-size: 11px; color: #64748b; margin-top: 2px; font-weight: 400;
  line-height: 1.4; max-height: 32px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ava-items-table tr.itype-position.selected td .ava-cell-lt { color: #475569; }

@media (max-width: 1100px) {
  .ava-ed-body { grid-template-columns: 1fr; }
  .ava-ed-body.detail-collapsed { grid-template-columns: 1fr; }
  .ava-detail { position: relative; top: 0; max-height: none; }
}
.ava-items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ava-items-table th {
  text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: #6b7280; background: #f9fafb;
  border-bottom: 1px solid #e5e7eb; font-weight: 600;
  position: sticky; top: 0; z-index: 10;
}
.ava-items-table th.num { text-align: right; }
.ava-items-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ava-items-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ava-items-table tbody tr { cursor: pointer; }
/* Kein Hover-Highlight im LV-Editor — Selection (.selected) ist der visuelle Marker */
.ava-items-table tbody tr.selected { background: #eff6ff; }
/* Verhindert die hässliche Text-Selektion beim Shift+Klick auf Mehrfach-Range.
   Inline-Edit hat ein eigenes <input>-Element, das davon nicht betroffen ist. */
.ava-items-table tbody { user-select: none; -webkit-user-select: none; }
.ava-items-table tbody input,
.ava-items-table tbody .ava-edit-input { user-select: text; -webkit-user-select: text; }
.ava-items-table tfoot td {
  padding: 12px; background: #f9fafb; border-top: 2px solid #e5e7eb;
  font-variant-numeric: tabular-nums; font-size: 13px;
}

/* Item-Type-Spezifika (Farben aus Mockup ava-mockup.html) */
/* Title — Indigo */
.ava-items-table tr.itype-title td {
  background: #eef2ff; color: #3730a3; font-weight: 600; font-size: 13px;
}
.ava-items-table tr.itype-title td.ava-cell-subtotal { font-weight: 700; color: #1e1b4b; }

/* Subtitle — Sky */
.ava-items-table tr.itype-subtitle td {
  background: #f0f9ff; color: #075985; font-weight: 500; font-size: 12.5px;
}
.ava-items-table tr.itype-subtitle td.ava-cell-subtotal { font-weight: 700; color: #0c4a6e; }

/* Hint — Slate, italic, eingerückt */
.ava-items-table tr.itype-hint td {
  background: #f1f5f9; color: #475569; font-style: italic; font-size: 12px;
}

/* LV-Vorbemerkung — Amber */
.ava-items-table tr.itype-lv_vorbemerkung td {
  background: #fffbeb; color: #78350f; font-style: italic;
}

/* Selected — pro Type eine etwas dunklere Variante des eigenen Hintergrunds + blauer Strich links */
.ava-items-table tbody tr.itype-position.selected        td { background: #dbeafe; }
.ava-items-table tbody tr.itype-position.selected        td.ava-cell-oz { color: #1e40af; font-weight: 600; }
.ava-items-table tbody tr.itype-title.selected           td { background: #c7d2fe; }
.ava-items-table tbody tr.itype-subtitle.selected        td { background: #bae6fd; }
.ava-items-table tbody tr.itype-hint.selected            td { background: #cbd5e1; }
.ava-items-table tbody tr.itype-lv_vorbemerkung.selected td { background: #fde68a; }
/* Zusätzlicher Marker: blauer Strich am linken Zeilenrand für ALLE selected-Zeilen */
.ava-items-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}

.ava-items-table .itype-pill {
  display: inline-block; font-size: 9.5px; padding: 2px 5px; border-radius: 7px;
  background: transparent; color: #94a3b8; text-transform: uppercase; letter-spacing: .2px;
  white-space: nowrap; line-height: 1.4;
  border: none;
}
/* GP-Spalte: Zahl + €-Symbol nie umbrechen */
.ava-items-table td.ava-cell-gp,
.ava-items-table td.ava-cell-subtotal { white-space: nowrap; }

/* TYP-Pill horizontal zentriert in der Spalte */
.ava-items-table td.ava-cell-typ { text-align: center; padding-left: 4px; padding-right: 4px; }

/* Tiefen-Einrückung für die Kurztext-Spalte — verstärkte Stufen damit die Hierarchie
   (Title → Subtitle → Position) optisch klar ist. */
.ava-items-table tr[data-depth="1"] td[data-field="short_text"] { padding-left: 32px; }
.ava-items-table tr[data-depth="2"] td[data-field="short_text"] { padding-left: 56px; }
.ava-items-table tr[data-depth="3"] td[data-field="short_text"] { padding-left: 80px; }

/* ── Verlauf-Sidebar (Slide-In von rechts) ─────────────── */
.ava-verlauf-sidebar {
  position: fixed;
  top: calc(var(--header-h, 60px) + var(--ava-subnav-h, 40px) + var(--ava-edtop-h, 55px));
  right: 0;
  bottom: 0;
  width: min(560px, 92vw);
  background: #fff;
  border-left: 1px solid #d1d5db;
  box-shadow: -8px 0 24px rgba(0,0,0,0.10);
  z-index: 90;
  display: flex; flex-direction: column;
  animation: ava-verlauf-in 0.18s ease-out;
}
.ava-verlauf-sidebar[hidden] { display: none; }
@keyframes ava-verlauf-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.ava-verlauf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
  font-size: 14px; color: #0f172a;
}
.ava-verlauf-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; color: #9ca3af; line-height: 1; padding: 0 6px;
}
.ava-verlauf-close:hover { color: #1f2937; }
.ava-verlauf-filter {
  display: flex; gap: 4px; padding: 10px 18px;
  border-bottom: 1px solid #f1f5f9; background: #fafafa;
}
.ava-verlauf-fbtn {
  background: #fff; border: 1px solid #d1d5db; border-radius: 5px;
  padding: 5px 11px; font-size: 12px; cursor: pointer; color: #374151;
}
.ava-verlauf-fbtn.active {
  background: #eff6ff; border-color: #2563eb; color: #1e40af; font-weight: 500;
}
.ava-verlauf-body { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.ava-verlauf-loading,
.ava-verlauf-empty { text-align: center; padding: 30px 10px; color: #9ca3af; font-size: 12px; }

/* Einträge */
.ava-verlauf-list { display: flex; flex-direction: column; gap: 6px; }
.ava-verlauf-entry {
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px;
  background: #fff; font-size: 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px;
}
.ava-verlauf-entry.is-rolled-back { opacity: 0.55; background: #f9fafb; }
.ava-verlauf-entry .ve-meta {
  font-size: 10.5px; color: #6b7280; line-height: 1.5;
}
.ava-verlauf-entry .ve-meta b { color: #374151; }
.ava-verlauf-entry .ve-action {
  font-size: 11px; color: #1e40af; font-weight: 500;
  background: #eff6ff; padding: 2px 6px; border-radius: 4px;
  display: inline-block; margin-bottom: 3px;
}
.ava-verlauf-entry .ve-diff { color: #0f172a; line-height: 1.45; }
.ava-verlauf-entry .ve-diff .ve-old { color: #b91c1c; text-decoration: line-through; word-break: break-word; }
.ava-verlauf-entry .ve-diff .ve-new { color: #047857; word-break: break-word; }
.ava-verlauf-entry .ve-diff .ve-arrow { color: #9ca3af; margin: 0 4px; }
.ava-verlauf-entry .ve-rollback {
  align-self: start;
  background: #fff; border: 1px solid #d1d5db; border-radius: 4px;
  padding: 4px 8px; font-size: 11px; cursor: pointer; color: #374151;
  white-space: nowrap;
}
.ava-verlauf-entry .ve-rollback:hover { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
.ava-verlauf-entry .ve-rolled-back-info {
  grid-column: 1 / -1; font-size: 10.5px; color: #6b7280; font-style: italic; margin-top: 2px;
}

/* Item-Header in der LV-weiten Ansicht (zeigt OZ + Kurztext) */
.ava-verlauf-item-head {
  font-size: 11px; color: #6b7280; margin: 12px 0 4px;
  padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.ava-verlauf-item-head:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ── Multi-Select Floating-Bar ──────────────────────────── */
.ava-multi-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; gap: 8px; align-items: center;
  background: #1f2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
  font-size: 13px;
  animation: ava-multi-bar-in 0.18s ease-out;
}
.ava-multi-bar .ava-multi-count {
  font-weight: 600;
  padding: 0 10px 0 4px;
  border-right: 1px solid rgba(255,255,255,0.2);
  margin-right: 4px;
  color: #fff;
}
.ava-multi-bar .ava-ed-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #f9fafb;
  padding: 6px 12px;
  font-size: 12px;
}
.ava-multi-bar .ava-ed-btn:hover:not([disabled]) {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.ava-multi-bar .ava-ed-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
@keyframes ava-multi-bar-in {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
.ava-items-table .itype-pill.t-position        { background: transparent; color: #64748b; }
.ava-items-table .itype-pill.t-hint            { background: transparent; color: #94a3b8; }
.ava-items-table .itype-pill.t-title           { background: transparent; color: #475569; font-weight: 600; }
.ava-items-table .itype-pill.t-subtitle        { background: transparent; color: #64748b; font-weight: 500; }
.ava-items-table .itype-pill.t-lv_vorbemerkung { background: transparent; color: #b45309; }

/* Pos-Typ-Sonderpillen (Bedarfspos./Eventualpos./etc.) — auffällig damit User sofort sieht
   dass die Position NICHT in der Standard-Auftragssumme enthalten ist. */
.ava-items-table .itype-pill.postyp-bedarf,
.ava-items-table .itype-pill.postyp-eventual,
.ava-items-table .itype-pill.postyp-alternativ {
  background: #fef3c7; color: #78350f; font-weight: 700;
  border: 1px solid #fcd34d;
}
.ava-items-table .itype-pill.postyp-stundenlohn { background: #dbeafe; color: #1e40af; font-weight: 700; border: 1px solid #93c5fd; }
.ava-items-table .itype-pill.postyp-pauschal    { background: #e0e7ff; color: #3730a3; font-weight: 700; border: 1px solid #a5b4fc; }
.ava-items-table .itype-pill.postyp-zulage      { background: #f3e8ff; color: #6b21a8; font-weight: 700; border: 1px solid #d8b4fe; }
/* „ohne Gesamtpreis" Variante (BPo/EPo/APo) — andere Färbung damit visuell unterscheidbar */
.ava-items-table .itype-pill.postyp-nogp        { background: #fef9c3; color: #854d0e; border: 1px dashed #fcd34d; }

/* GP-Zelle bei Sonderpositionen MIT Gesamtpreis (BP/EP/AP/Stundenlohn) — ausgegraut.
   Bedeutet: GP ist gerechnet, taucht aber nicht in der Hauptauftragssumme auf,
   sondern in der Sondersumme im Footer. */
.ava-items-table td.ava-cell-gp-muted {
  color: #94a3b8 !important;
}
/* GP-Zelle bei Sonderpositionen OHNE Gesamtpreis (BPo/EPo/APo) — durchgestrichen + grau.
   Bedeutet: kein Gesamtpreis-Beitrag, nicht mal in der Sondersumme. */
.ava-items-table td.ava-cell-gp-strike {
  color: #94a3b8 !important;
  text-decoration: line-through;
}

/* Bedarfspositionen + Eventualpositionen optional dezenter Hintergrund auf der ganzen Zeile */
.ava-items-table tr.has-postyp.postyp-bedarf,
.ava-items-table tr.has-postyp.postyp-eventual,
.ava-items-table tr.has-postyp.postyp-alternativ {
  background: linear-gradient(to right, rgba(254,243,199,0.35), transparent 30%);
}

.ava-items-table .drag-handle {
  color: transparent; cursor: move; font-size: 14px; line-height: 1;
  width: 24px; text-align: center;
  padding-left: 0; padding-right: 0;
  user-select: none;
  transition: color .12s ease;
}
.ava-items-table tbody tr:hover .drag-handle { color: #94a3b8; }
.ava-items-table tbody tr:hover .drag-handle:hover { color: #475569; }
.ava-items-table .drag-handle:active { cursor: move; }

/* DnD-Feedback */
.ava-items-table tbody tr.ava-dragging td { opacity: 0.4; }
.ava-items-table tbody tr.ava-drop-above td { box-shadow: inset 0 2px 0 #2563eb; }
.ava-items-table tbody tr.ava-drop-below td { box-shadow: inset 0 -2px 0 #2563eb; }
.ava-items-table tbody tr.ava-drop-into td { background: #dbeafe !important; box-shadow: inset 0 0 0 2px #2563eb; }
/* Spring-Loading-Hint: Titel ist „armed" zum Auto-Aufklappen (600 ms Hover) */
.ava-items-table tbody tr.ava-drop-pending td {
  background: #fef3c7 !important;
  box-shadow: inset 0 0 0 2px #f59e0b;
  animation: ava-pending-pulse 600ms ease-in-out;
}
@keyframes ava-pending-pulse {
  0%   { box-shadow: inset 0 0 0 0 #f59e0b; }
  50%  { box-shadow: inset 0 0 0 3px #f59e0b; }
  100% { box-shadow: inset 0 0 0 2px #f59e0b; }
}

/* Klapp-Chevron für Title/Subtitle */
.ava-chev {
  width: 12px; height: 12px; cursor: pointer;
  margin-right: 6px; vertical-align: -1px;
  transition: transform .15s ease; flex-shrink: 0;
  display: inline-block;
}
.ava-items-table tr.itype-title    .ava-chev { color: #3730a3; }
.ava-items-table tr.itype-subtitle .ava-chev { color: #075985; }
.ava-chev.collapsed { transform: rotate(-90deg); }
.ava-chev:hover { opacity: 0.7; }
.ava-items-table tr.itype-title.collapsed-children   .ava-chev,
.ava-items-table tr.itype-subtitle.collapsed-children .ava-chev { transform: rotate(-90deg); }

.ava-items-loading { text-align: center; padding: 30px; color: #9ca3af; font-size: 13px; }
.ava-items-empty { text-align: center; padding: 40px 20px; color: #6b7280; font-size: 13px; }
.ava-items-empty .hint { font-size: 11px; color: #9ca3af; margin-top: 6px; }

/* Inline-Edit (Phase 2C) — Kein Hover-Highlight mehr (nur Cursor-Indikator) */
.ava-items-table td.ava-edit { cursor: text; }
/* Hover-Highlights entfernt — User-Wunsch: ruhigere Tabelle ohne flackernde Färbung beim Vorbeibewegen */
.ava-items-table td.ava-edit-active {
  /* WICHTIG: Padding gleich lassen wie im Default-TD, sonst springt die Zellhöhe */
  background: #fff !important;
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.ava-edit-input {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  background: transparent; font: inherit; color: inherit;
  padding: 0; margin: 0;
  line-height: inherit;
}
.ava-edit-input.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Bautagebuch Desktop Sidebar ─────────────────────────── */
.baudok-section.active.bdok-bautagebuch-wrap { display: flex; align-items: stretch; gap: 0; }
.bdok-diary-main { flex: 5; min-width: 0; overflow: auto; }
.bdok-sb-inner { width: 390px; height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.bdok-sb-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 0.5px solid var(--border); flex-shrink: 0; position: sticky; top: 0; background: #fff; z-index: 2; }
.bdok-sb-title { font-size: 14px; font-weight: 600; color: var(--text); }
.bdok-sb-section { padding: 12px 16px; border-bottom: 0.5px solid var(--border); }
.bdok-sb-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.bdok-sb-field { display: flex; justify-content: space-between; align-items: flex-start; padding: 3px 0; font-size: 13px; gap: 8px; }
.bdok-sb-field .f-label { color: var(--muted); flex-shrink: 0; min-width: 80px; }
.bdok-sb-field .f-val { text-align: right; flex: 1; color: var(--text); word-break: break-word; }
.bdok-sb-notes { background: rgba(0,0,0,.04); border-radius: 7px; padding: 9px 11px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: var(--text); }
.bdok-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 4px; }
.bdok-photo-thumb { position: relative; border-radius: 7px; overflow: hidden; background: rgba(0,0,0,.06); cursor: pointer; }
.bdok-photo-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.bdok-photo-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 20px; text-align: center; padding: 0; z-index: 1; }
.bdok-photo-caption { font-size: 11px; color: var(--muted); padding: 4px 6px 5px; line-height: 1.3; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdok-photo-caption-input {
  display: block; width: 100%; font-size: 11px; padding: 4px 6px;
  border: none; border-top: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: var(--font); outline: none;
}
.bdok-photo-caption-input:focus { background: rgba(0,113,227,.05); }
.bdok-trade-card { background: rgba(0,0,0,.04); border-radius: 8px; padding: 9px 11px; margin-bottom: 6px; font-size: 13px; }
.bdok-trade-card .tc-name { font-weight: 500; margin-bottom: 2px; }
.bdok-trade-card .tc-meta { color: var(--muted); font-size: 12px; }
.bdok-edit-input { width: 100%; border: 1px solid var(--border-mid); border-radius: 6px; padding: 6px 9px; font-size: 13px; font-family: inherit; background: #fff; color: var(--text); }
.bdok-edit-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,113,227,.1); }
textarea.bdok-edit-input { resize: vertical; min-height: 80px; line-height: 1.55; }
.bdok-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bdok-edit-row label { font-size: 12px; color: var(--muted); flex-shrink: 0; min-width: 70px; }
.bdok-trade-edit { background: rgba(0,0,0,.04); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.bdok-sb-foot { padding: 12px 16px; display: flex; gap: 8px; position: sticky; bottom: 0; background: #fff; border-top: 0.5px solid var(--border); }
.bdok-upload-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px dashed var(--border-mid); border-radius: 6px; font-size: 12px; color: var(--primary); cursor: pointer; background: none; }
.bdok-upload-btn:hover { background: rgba(0,113,227,.06); }
tr.bdok-sel td { background: rgba(0,113,227,.06) !important; }

/* ── Bautagebuch Sidebar – Resize & Icon-Buttons ─────────── */
.bdok-resize-handle { width: 4px; cursor: col-resize; background: transparent; flex-shrink: 0; z-index: 3; transition: background .15s; position: relative; }
.bdok-resize-handle::after { content:''; position:absolute; inset:-4px 0; }
.bdok-resize-handle:hover, .bdok-resize-handle.dragging { background: var(--primary); }
.bdok-sb-inner { width: 100%; }
.bdok-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; border:1px solid var(--border-mid); background:transparent; cursor:pointer; color:var(--muted); transition:background .12s, color .12s; }
.bdok-icon-btn:hover { background:rgba(0,0,0,.06); color:var(--text); }
.bdok-icon-btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; width:auto; padding:0 12px; gap:5px; font-size:13px; font-weight:500; }
.bdok-icon-btn.primary:hover { background:var(--primary-d); }
.bdok-icon-btn.danger { border-color:transparent; color:var(--danger); }
.bdok-icon-btn.danger:hover { background:rgba(255,59,48,.08); }

/* ── Bautagebuch Sidebar immer sichtbar ──────────────────── */
.bdok-diary-sidebar { flex: 4; min-width: 260px; max-width: 800px; border-left: 0.5px solid var(--border); background: #fff; overflow: hidden; }
.bdok-sb-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:10px; color:var(--muted); font-size:13px; padding:40px; text-align:center; }

/* ── Bautagebuch Filter-Bar ──────────────────────────────── */
.bdok-filter-bar { position:relative; display:flex; align-items:center; background:var(--bg,#f1f3f5); border-radius:8px; padding:3px; gap:0; }
.bdok-filter-pill { position:absolute; top:3px; bottom:3px; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); transition:left .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1); pointer-events:none; z-index:0; }
.bdok-filter-btn { position:relative; z-index:1; border:none; background:transparent; cursor:pointer; padding:5px 13px; font-size:12.5px; font-weight:500; color:var(--muted); border-radius:6px; transition:color .18s; white-space:nowrap; }
.bdok-filter-btn.active { color:var(--text); font-weight:600; }
.bdok-filter-btn:hover:not(.active) { color:var(--text); }

/* ── Tabellen-Rows Fade-In bei Filterwechsel ─────────────── */
@keyframes bdok-row-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
#bdok-diary-body tr { animation: bdok-row-in .18s ease both; }

/* ── Kontakt-Modal Redesign ──────────────────────────────── */
.ct-section-title {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 10px;
}
.ct-person-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}
.ct-person-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.ct-person-card-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.ct-person-card-label .ct-funktion-preview {
  font-weight: 400; color: var(--muted); font-size: 11px;
}
.ct-person-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,113,227,0.12); color: var(--primary);
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ct-person-body {
  padding: 12px;
}
.ct-person-grid-top {
  display: grid; grid-template-columns: 100px 1fr 1fr; gap: 8px 10px; margin-bottom: 8px;
}
.ct-person-grid-bot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
}
.ct-person-grid-full { grid-column: 1 / -1; }
.ct-persons-section-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.ct-add-person-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  border: 1px solid rgba(0,113,227,0.25);
  border-radius: 6px; padding: 4px 10px;
  background: rgba(0,113,227,0.07); cursor: pointer;
  font-family: var(--font);
}
.ct-add-person-btn:hover { background: rgba(0,113,227,0.13); }

/* ── Kontakt Rollen-Chip-UI ──────────────────────────────── */
.ct-role-chip-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:36px; padding:5px 8px; border:0.5px solid var(--border); border-radius:8px; background:#fff; cursor:default; }
.ct-role-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 9px; border-radius:20px; font-size:11.5px; font-weight:600; line-height:1.5; transition:opacity .15s; }
.ct-role-chip.c-blue  { background:rgba(0,113,227,.1);  color:#0058b0; }
.ct-role-chip.c-green { background:rgba(39,174,96,.12); color:#1a6e3c; }
.ct-role-chip.c-amber { background:rgba(243,156,18,.12);color:#8a5600; }
.ct-role-chip.c-pink  { background:rgba(212,83,126,.12);color:#8c2349; }
.ct-role-chip.c-teal  { background:rgba(29,158,117,.12);color:#0a5c42; }
.ct-role-chip-del { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; opacity:.55; transition:opacity .12s; }
.ct-role-chip-del:hover { opacity:1; }
.ct-role-add-sel { border:none; background:transparent; font-size:12px; color:var(--muted); cursor:pointer; padding:1px 2px; outline:none; }
.ct-role-add-sel:focus { outline:none; }

/* ── Bautagebuch Lightbox ────────────────────────────────── */
.bdok-lb { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999; display:flex; align-items:center; justify-content:center; }
.bdok-lb-img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:4px; display:block; }
.bdok-lb-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,.15); border:none; border-radius:50%; width:40px; height:40px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s; }
.bdok-lb-close:hover { background:rgba(255,255,255,.3); }
.bdok-lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; border-radius:50%; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s; }
.bdok-lb-nav:hover { background:rgba(255,255,255,.3); }
.bdok-lb-prev { left:20px; }
.bdok-lb-next { right:20px; }
.bdok-lb-counter { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:13px; }

/* ── Drag & Drop Zonen ───────────────────────────────────── */
.bdok-drop-zone { border:1.5px dashed transparent; border-radius:8px; transition:border-color .15s, background .15s; min-height:36px; }
.bdok-drop-zone.bdok-dz-over { border-color:var(--primary,#0071e3); background:rgba(0,113,227,.05); }

/* ════════════════════════════════════════════════════════
   Cockpit (Startseite)
   ════════════════════════════════════════════════════════ */
.cp-wrap { max-width:1400px; margin:0 auto; padding:18px 20px 80px; position:relative; }

/* Hero */
.cp-hero {
  background:linear-gradient(135deg, #eef4fb 0%, #e6f1fb 100%);
  border-radius:14px; padding:18px 22px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cp-hero-left { flex:1; min-width:0; }
.cp-hero-date { font-size:12px; color:#4d6b8e; font-weight:500; letter-spacing:.02em; }
.cp-hero-greet { font-size:24px; font-weight:600; color:#0c4a8a; margin:2px 0 4px; line-height:1.2; }
.cp-hero-summary { font-size:13px; color:#4d6b8e; }
.cp-hero-kpis { display:flex; gap:10px; align-items:stretch; flex-shrink:0; }
.cp-kpi {
  background:#fff; border:1px solid rgba(12,74,138,.08);
  border-radius:10px; padding:9px 14px; min-width:88px; text-align:center;
}
.cp-kpi-label { font-size:11px; color:#4d6b8e; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.cp-kpi-value { font-size:18px; font-weight:600; color:#0c4a8a; margin-top:2px; }
.cp-kpi-weather { min-width:130px; }

/* Hauptbereich Grid (2x2) */
.cp-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px; margin-bottom:14px;
}
@media (max-width: 920px) { .cp-grid { grid-template-columns: 1fr; } }

/* Cards */
.cp-card {
  background:#fff; border:1px solid var(--border, #e5e7eb);
  border-radius:12px; padding:0; overflow:hidden;
  display:flex; flex-direction:column;
}
.cp-card-header {
  padding:13px 16px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--border, #f1f3f6);
}
.cp-card-title {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted, #6b7280);
}
.cp-card-sub { font-size:11px; color:var(--text3, #9ca3af); }
.cp-card-body { padding:12px 16px 14px; flex:1; min-height:120px; font-size:13px; }
.cp-empty { padding:18px 0; text-align:center; color:var(--muted); font-size:12.5px; }
.cp-card-alle {
  font-size:11px; color:var(--primary, #2563eb); text-decoration:none;
  padding:2px 6px; border-radius:4px; white-space:nowrap;
  transition: background .15s;
}
.cp-card-alle:hover { background:#eff6ff; }

/* ── Kalender-Seite ───────────────────────────────────────── */
.kal-day-group { margin-bottom:18px; }
.kal-day-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted, #6b7280); padding:0 2px 6px; border-bottom:1px solid var(--border, #e2e8f0);
  margin-bottom:8px;
}
.kal-event {
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 10px; border-radius:8px; margin-bottom:4px;
  background:var(--surface2, #f8fafc);
}
.kal-event:hover { background:#eff6ff; }
.kal-event-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px;
}
.kal-event-body { flex:1; min-width:0; }
.kal-event-title { font-size:13px; font-weight:500; color:#111827; }
.kal-event-meta { font-size:11px; color:var(--muted, #6b7280); margin-top:1px; }
.kal-range-btns { display:flex; gap:4px; }

/* Tab-Bar in Pendenzen */
.cp-tab-bar { display:flex; gap:4px; }
.cp-tab {
  font-size:11px; padding:4px 10px; border-radius:14px; border:0; cursor:pointer;
  background:transparent; color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:6px;
}
.cp-tab:hover { background:var(--surface2, #f5f5f7); }
.cp-tab-active { background:#185FA5; color:#fff; }
.cp-tab-active:hover { background:#185FA5; }
.cp-tab-badge {
  display:inline-block; min-width:16px; padding:0 5px; border-radius:9px;
  background:rgba(255,255,255,.25); color:inherit; font-size:10px; line-height:14px;
}
.cp-tab:not(.cp-tab-active) .cp-tab-badge { background:#e5e7eb; color:#6b7280; }

/* Pendenz-Eintrag */
.cp-pend-row {
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border, #f1f3f6); font-size:13px;
}
.cp-pend-row:last-child { border-bottom:0; }
.cp-pend-row:hover { background:rgba(0,113,227,.03); cursor:pointer; }
.cp-pend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cp-pend-dot-overdue { background:#A32D2D; }
.cp-pend-dot-today   { background:#BA7517; }
.cp-pend-dot-soon    { background:#185FA5; }
.cp-pend-dot-later   { background:#888780; }
.cp-pend-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-pend-meta { font-size:11px; color:var(--muted); flex-shrink:0; }
.cp-pend-meta-overdue { color:#A32D2D; font-weight:600; }
.cp-pend-meta-today   { color:#854F0B; font-weight:600; }

/* Projekt-Card im Cockpit */
.cp-proj-card {
  padding:10px 12px; margin-bottom:7px; border:1px solid var(--border, #e5e7eb);
  border-radius:8px; cursor:pointer; transition:all .12s;
}
.cp-proj-card:hover { border-color:#185FA5; background:rgba(24,95,165,.03); }
.cp-proj-card-mine { background:#eef4fb; border-color:transparent; }
.cp-proj-card-mine:hover { background:#dceaf6; }
.cp-proj-row1 { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:13px; }
.cp-proj-name { font-weight:500; color:#0c4a8a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-proj-lph { font-size:11px; color:#4d6b8e; flex-shrink:0; padding:1px 7px; background:rgba(12,74,138,.08); border-radius:8px; }
.cp-proj-bar { height:4px; background:rgba(12,74,138,.08); border-radius:2px; margin:6px 0 4px; overflow:hidden; }
.cp-proj-bar-fill { height:100%; background:#185FA5; border-radius:2px; }
.cp-proj-meta { font-size:11px; color:#4d6b8e; }

/* Aktivitäten-Feed */
.cp-card-collapse { background:transparent; border:0; cursor:pointer; font-size:14px; color:var(--muted); padding:0 6px; }
.cp-card-activity .cp-card-body { padding-bottom:8px; }
.cp-act-row { display:flex; gap:10px; padding:6px 0; font-size:13px; }
.cp-act-row:not(:last-child) { border-bottom:1px solid var(--border, #f5f5f7); }
.cp-act-time { font-size:11px; color:var(--text3, #9ca3af); min-width:64px; flex-shrink:0; }
.cp-act-text { flex:1; color:var(--muted, #6b7280); }
.cp-act-text strong { color:var(--text); font-weight:500; }

/* Floating Action Button */
.cp-fab {
  position:fixed; right:24px; bottom:24px;
  width:54px; height:54px; border-radius:50%;
  background:#185FA5; color:#fff; border:0; cursor:pointer;
  box-shadow:0 6px 18px rgba(24,95,165,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; transition:transform .15s, background .15s;
}
.cp-fab:hover { background:#0c4a8a; transform:scale(1.05); }
.cp-fab.cp-fab-open { transform:rotate(45deg); }
.cp-fab-menu {
  position:fixed; right:24px; bottom:88px;
  background:#fff; border:1px solid var(--border, #e5e7eb);
  border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.10);
  padding:6px; min-width:180px; z-index:1000;
  display:none; flex-direction:column; gap:2px;
}
.cp-fab-menu.cp-fab-menu-open { display:flex; }
.cp-fab-menu button {
  background:transparent; border:0; text-align:left;
  padding:9px 12px; border-radius:6px; font-size:13px; cursor:pointer;
  color:var(--text); transition:background .12s;
}
.cp-fab-menu button:hover { background:var(--surface2, #f5f5f7); }

/* Aufgaben-Karte: kleiner + Knopf im Header */
.cp-aufg-add-btn {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: #2563eb; color: #fff;
  border: none; cursor: pointer; flex-shrink: 0; margin-left: 8px;
  transition: background .15s;
}
.cp-aufg-add-btn:hover { background: #1d4ed8; }

/* Cockpit-Cards mit Scroll bei vielen Einträgen */
.cp-card-projekte .cp-card-body { max-height:380px; overflow-y:auto; scrollbar-width:thin; }
.cp-card-projekte .cp-card-body::-webkit-scrollbar { width:6px; }
.cp-card-projekte .cp-card-body::-webkit-scrollbar-thumb { background:rgba(12,74,138,.18); border-radius:3px; }
.cp-card-projekte .cp-card-body::-webkit-scrollbar-track { background:transparent; }

/* Aufgaben + Aktivität: Scroll bei vielen Einträgen */
.cp-card-pendenzen .cp-card-body,
.cp-card-activity  .cp-card-body { max-height:380px; overflow-y:auto; scrollbar-width:thin; }
.cp-card-pendenzen .cp-card-body::-webkit-scrollbar,
.cp-card-activity  .cp-card-body::-webkit-scrollbar { width:6px; }
.cp-card-pendenzen .cp-card-body::-webkit-scrollbar-thumb,
.cp-card-activity  .cp-card-body::-webkit-scrollbar-thumb { background:rgba(12,74,138,.18); border-radius:3px; }
.cp-card-pendenzen .cp-card-body::-webkit-scrollbar-track,
.cp-card-activity  .cp-card-body::-webkit-scrollbar-track { background:transparent; }

/* Cockpit-Scroll: Karten rasten auf Grenzen ein (außer Projekte — dort normales Scrollen) */
.cp-card-pendenzen .cp-card-body { scroll-snap-type:y mandatory; scroll-padding-top:0; }
.cp-card-activity  .cp-card-body { scroll-snap-type:y proximity; }
.cp-pend-row  { scroll-snap-align:start; }
.cp-act-row   { scroll-snap-align:start; }

/* ── Zeiterfassungs-Widget im Cockpit ─────────────────── */
.cp-zeit-running {
  background:#E1F5EE; border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.cp-zeit-running-meta {
  font-size:11px; color:#085041; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
}
.cp-zeit-running-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cp-zeit-running-info { flex:1; min-width:0; }
.cp-zeit-running-proj { font-size:14px; font-weight:600; color:#04342C; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-zeit-running-svc  { font-size:11px; color:#0F6E56; margin-top:1px; }
.cp-zeit-running-time { font-size:24px; font-weight:600; color:#04342C; font-variant-numeric:tabular-nums; }
.cp-zeit-running-actions { display:flex; gap:6px; margin-top:8px; }
.cp-zeit-running-actions button { flex:1; font-size:12px; padding:6px 8px; }

.cp-zeit-start {
  display:flex; flex-direction:column; gap:6px; margin-bottom:10px;
}
.cp-zeit-start select {
  font-size:13px; padding:6px 8px;
  border:1px solid var(--border, #e5e7eb); border-radius:6px; background:#fff; width:100%;
}
.cp-zeit-start-btn {
  background:#185FA5; color:#fff; border:0; border-radius:8px;
  padding:9px 14px; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .12s;
}
.cp-zeit-start-btn:hover:not(:disabled) { background:#0c4a8a; }
.cp-zeit-start-btn:disabled { background:#94a3b8; cursor:not-allowed; }

.cp-zeit-today-list {
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
  font-weight:500; margin-bottom:5px;
}
.cp-zeit-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; font-size:13px;
  border-bottom:1px solid var(--border, #f1f3f6);
}
.cp-zeit-row:last-child { border-bottom:0; }
.cp-zeit-row-proj { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:8px; }
.cp-zeit-row-svc  { font-size:11px; color:var(--muted); margin-left:4px; }
.cp-zeit-row-time { font-variant-numeric:tabular-nums; color:var(--muted); flex-shrink:0; }
.cp-zeit-row-sum  { font-weight:600; color:var(--text); border-top:1px solid var(--border, #f1f3f6); padding-top:6px; }

/* ════════════════════════════════════════════════════════
   Zeiterfassung — Redesign mit Toggle + Pills + Counter
   ════════════════════════════════════════════════════════ */
.cp-zeit-body { padding: 14px 16px 16px; }

/* Pill-Toggle Projektarbeit / Interne Arbeit */
.cp-zt-toggle {
  display: inline-flex;
  background: #E6F1FB;
  border-radius: 24px;
  padding: 3px;
  position: relative;
  margin-bottom: 14px;
  width: 100%;
  max-width: 360px;
}
.cp-zt-toggle-slider {
  position: absolute; top: 3px; left: 3px;
  width: calc(50% - 3px); height: calc(100% - 6px);
  background: #185FA5;
  border-radius: 21px;
  box-shadow: 0 1px 3px rgba(12,74,138,.25);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.cp-zt-toggle.is-internal .cp-zt-toggle-slider { transform: translateX(100%); }
.cp-zt-toggle button {
  flex: 1; position: relative; z-index: 1;
  background: transparent; border: 0;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: #0c4a8a; cursor: pointer; border-radius: 21px;
  transition: color 220ms ease;
}
.cp-zt-toggle.is-project  button:nth-child(2) { color: #fff; }   /* slider sitzt hinter btn 2 */
.cp-zt-toggle.is-internal button:nth-child(3) { color: #fff; }
.cp-zt-toggle.is-project  button:nth-child(3) { color: #0c4a8a; }
.cp-zt-toggle.is-internal button:nth-child(2) { color: #0c4a8a; }

/* Projekt-Combobox */
.cp-zt-field-label {
  font-size: 11px; color: var(--muted, #6b7280);
  font-weight: 500; margin-bottom: 5px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.cp-zt-field-hint { font-size: 10px; color: var(--text3, #9ca3af); font-weight: 400; }
.cp-zt-proj-box {
  display: flex; align-items: center; gap: 8px;
  background: #fafbfc;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.cp-zt-proj-box:hover { border-color: #185FA5; background: #fff; }
.cp-zt-proj-box-text { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-zt-proj-box-text.is-empty { color: var(--muted, #6b7280); font-style: italic; }
.cp-zt-proj-box svg { flex-shrink: 0; }

/* Pill-Reihen (LPH, angebotene Leistungen, interne Kategorien) */
.cp-zt-section { margin-bottom: 12px; }
.cp-zt-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.cp-zt-pill {
  font-size: 12px; padding: 7px 13px; border-radius: 18px;
  border: 1px solid #B5D4F4; background: #fff; color: #0c4a8a;
  cursor: pointer; font-weight: 500; line-height: 1;
  transition: all .12s;
  display: inline-flex; align-items: center; gap: 5px;
}
.cp-zt-pill:hover { border-color: #185FA5; background: #E6F1FB; }
.cp-zt-pill.is-active { background: #185FA5; color: #fff; border-color: #185FA5; }
.cp-zt-pill.is-active:hover { background: #0c4a8a; border-color: #0c4a8a; }
.cp-zt-pill-more {
  border-color: var(--border, #e5e7eb); color: var(--muted, #6b7280); background: #fff;
}
.cp-zt-pill-more:hover { border-color: var(--text); color: var(--text); background: #fafbfc; }

/* Angebots-Pills: gelb=Hauptangebot, grün=Nachtrag */
.cp-zt-pill-offer {
  background: #FAEEDA; border-color: #FAC775; color: #854F0B;
}
.cp-zt-pill-offer:hover { background: #f6e4cb; border-color: #ef9f27; }
.cp-zt-pill-offer.is-active { background: #BA7517; border-color: #BA7517; color: #fff; }
.cp-zt-pill-offer.is-active:hover { background: #854F0B; border-color: #854F0B; }
.cp-zt-pill-nachtrag {
  background: #EAF3DE; border-color: #C0DD97; color: #3B6D11;
}
.cp-zt-pill-nachtrag:hover { background: #ddebcc; border-color: #97C459; }
.cp-zt-pill-nachtrag.is-active { background: #639922; border-color: #639922; color: #fff; }
.cp-zt-pill-nachtrag.is-active:hover { background: #3B6D11; border-color: #3B6D11; }
.cp-zt-pill-typ {
  font-size: 9px; font-weight: 600;
  background: rgba(133,79,11,.85); color: #fff;
  padding: 1px 5px; border-radius: 6px;
}
.cp-zt-pill-nachtrag .cp-zt-pill-typ { background: rgba(59,109,17,.85); }
.cp-zt-pill-offer.is-active .cp-zt-pill-typ,
.cp-zt-pill-nachtrag.is-active .cp-zt-pill-typ { background: rgba(255,255,255,.25); }

/* Footer mit Bereit-Hinweis und Play-Button */
.cp-zt-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; margin-top: 6px;
  border-top: 1px solid var(--border, #f1f3f6);
}
.cp-zt-ready { flex: 1; min-width: 0; }
.cp-zt-ready-label { font-size: 11px; color: var(--muted, #6b7280); font-weight: 500; }
.cp-zt-ready-text { font-size: 13px; color: var(--text); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-zt-ready-text.is-disabled { color: var(--muted, #6b7280); font-style: italic; }
.cp-zt-play-btn {
  background: #185FA5; border: 0;
  width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(24,95,165,.35);
  transition: transform 150ms ease, box-shadow 150ms, background 150ms;
}
.cp-zt-play-btn:hover:not(:disabled) {
  background: #0c4a8a;
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(24,95,165,.45);
}
.cp-zt-play-btn:active:not(:disabled) { transform: scale(0.96); }
.cp-zt-play-btn:disabled {
  background: #cbd5e0; cursor: not-allowed;
  box-shadow: none;
}

/* Live-Modus: pulsierender Punkt + großer Counter */
.cp-zt-live {
  background: linear-gradient(135deg, #E1F5EE 0%, #d5f0e4 100%);
  border-radius: 10px; padding: 16px 18px;
  margin-bottom: 10px;
}
.cp-zt-live-meta {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: #085041; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.cp-zt-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #1D9E75;
  animation: cp-zt-pulse 2s infinite;
}
@keyframes cp-zt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29,158,117,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(29,158,117,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); }
}
.cp-zt-live-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-zt-live-info { flex: 1; min-width: 0; }
.cp-zt-live-proj { font-size: 14px; color: #04342C; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-zt-live-svc  { font-size: 11px; color: #0F6E56; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-zt-live-time {
  font-size: 28px; font-weight: 600; color: #04342C;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
.cp-zt-live-actions { display: flex; gap: 8px; margin-top: 12px; }
.cp-zt-live-actions button {
  flex: 1; padding: 8px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: opacity .12s;
}
.cp-zt-live-stop {
  background: #185FA5; border: 0; color: #fff;
}
.cp-zt-live-stop:hover { background: #0c4a8a; }

/* Heute-Liste */
.cp-zt-today-label {
  font-size: 11px; color: var(--muted, #6b7280);
  font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  margin: 14px 0 6px;
}
.cp-zt-today-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px solid var(--border, #f5f5f7);
}
.cp-zt-today-row:last-child { border-bottom: 0; }
.cp-zt-today-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.cp-zt-today-svc  { font-size: 11px; color: var(--muted, #6b7280); margin-left: 4px; }
.cp-zt-today-time { font-variant-numeric: tabular-nums; color: var(--muted, #6b7280); flex-shrink: 0; }
.cp-zt-today-row.is-sum { border-top: 1px solid var(--border, #e5e7eb); padding-top: 6px; font-weight: 600; color: var(--text); margin-top: 4px; }

/* Projekt-Auswahl Popover */
.cp-zt-proj-popover {
  position: absolute; z-index: 100;
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.10);
  padding: 6px; min-width: 280px; max-width: 360px;
  max-height: 320px; overflow-y: auto;
}
.cp-zt-proj-popover input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  font-size: 13px; outline: none; margin-bottom: 6px;
}
.cp-zt-proj-popover input:focus { border-color: #185FA5; }
.cp-zt-proj-option {
  padding: 7px 10px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
  display: block;
}
.cp-zt-proj-option:hover { background: #E6F1FB; color: #0c4a8a; }
.cp-zt-proj-option.is-empty { color: var(--muted, #6b7280); font-style: italic; cursor: default; }
.cp-zt-proj-option.is-empty:hover { background: transparent; }

/* ════════════════════════════════════════════════════════
   Meine Zeiten — Detailseite Zeiterfassung
   ════════════════════════════════════════════════════════ */
.zt-page { max-width:1400px; margin:0 auto; padding:18px 20px 60px; }

.zt-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.zt-page-title { font-size:22px; font-weight:600; color:var(--text); margin:0 0 2px; }
.zt-page-sub { font-size:13px; color:var(--muted); }
.zt-page-actions { display:flex; gap:8px; flex-shrink:0; }

.zt-toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; background:#fff;
  border:1px solid var(--border, #e5e7eb); border-radius:10px;
  margin-bottom:14px;
}
.zt-toolbar-sep { width:1px; height:22px; background:var(--border, #e5e7eb); margin:0 4px; }

.zt-range-toggle {
  display:inline-flex; background:#E6F1FB; border-radius:18px; padding:2px;
}
.zt-range-btn {
  background:transparent; border:0; padding:5px 14px;
  font-size:12px; font-weight:500; color:#0c4a8a; cursor:pointer;
  border-radius:16px;
}
.zt-range-btn.zt-range-active { background:#185FA5; color:#fff; }

.zt-nav-btn {
  background:transparent; border:1px solid var(--border, #e5e7eb);
  border-radius:6px; padding:4px 10px; cursor:pointer;
  font-size:14px; color:var(--text); line-height:1;
}
.zt-nav-btn:hover { background:#f1f5f9; border-color:#185FA5; color:#185FA5; }
.zt-range-label {
  font-size:13px; font-weight:500; color:var(--text);
  min-width:180px; text-align:center;
}
.zt-today-btn {
  background:#fff; border:1px solid var(--border, #e5e7eb);
  border-radius:6px; padding:5px 12px; font-size:12px;
  cursor:pointer; color:var(--text);
}
.zt-today-btn:hover { background:#185FA5; color:#fff; border-color:#185FA5; }

.zt-toolbar select {
  font-size:12px; padding:5px 8px; border-radius:6px;
  border:1px solid var(--border, #e5e7eb); background:#fff;
  color:var(--text);
}

.zt-summary { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px; }
.zt-summary-card {
  background:#fff; border:1px solid var(--border, #e5e7eb);
  border-radius:10px; padding:12px 14px;
}
.zt-summary-label {
  font-size:11px; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.zt-summary-value { font-size:22px; font-weight:600; color:#0c4a8a; margin-top:2px; font-variant-numeric:tabular-nums; }

.zt-list-wrap { background:#fff; border:1px solid var(--border, #e5e7eb); border-radius:10px; overflow:hidden; }
.zt-list-header,
.zt-list-row {
  display:grid;
  grid-template-columns: 96px 110px 70px minmax(160px,1.5fr) minmax(140px,1.3fr) minmax(160px,2fr) 80px 70px;
  gap:10px; padding:10px 14px; align-items:center;
  font-size:13px;
}
.zt-list-header {
  background:#f8fafc; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border, #e5e7eb);
}
.zt-list-row { border-bottom:1px solid var(--border, #f1f5f9); }
.zt-list-row:last-child { border-bottom:0; }
.zt-list-row:hover { background:#f8fafc; }
.zt-list-row.is-day-header {
  background:#eef4fb; padding:8px 14px;
  font-weight:600; color:#0c4a8a; font-size:12px;
}

.zt-col-date { color:var(--text); font-weight:500; }
.zt-col-time { color:var(--muted); font-variant-numeric:tabular-nums; }
.zt-col-dur  { font-weight:600; color:#0c4a8a; font-variant-numeric:tabular-nums; }
.zt-col-proj { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zt-col-svc  { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zt-col-notes input {
  width:100%; padding:4px 6px; border:1px solid transparent;
  border-radius:4px; font-size:13px; background:transparent;
}
.zt-col-notes input:hover { background:#fff; border-color:var(--border, #e5e7eb); }
.zt-col-notes input:focus { background:#fff; border-color:#185FA5; outline:none; }
.zt-col-billed { display:flex; justify-content:center; }
.zt-col-billed input { cursor:pointer; }
.zt-col-actions { display:flex; gap:4px; justify-content:flex-end; }
.zt-col-actions button {
  padding:3px 6px; font-size:11px; border-radius:4px;
  border:1px solid var(--border, #e5e7eb); background:#fff;
  color:var(--muted); cursor:pointer;
}
.zt-col-actions button:hover { color:var(--text); border-color:var(--text); }
.zt-col-actions button.zt-del:hover { color:#fff; background:#dc2626; border-color:#dc2626; }

.zt-internal-pill {
  display:inline-block; font-size:10px; padding:1px 6px;
  background:#E6F1FB; color:#0c4a8a; border-radius:8px;
  font-weight:500; margin-right:4px;
}
.zt-empty { padding:30px; text-align:center; color:var(--muted); font-size:13px; }

/* ════════════════════════════════════════════════════════
   Wetter-Kacheln im Cockpit + Forecast-Modal
   ════════════════════════════════════════════════════════ */
.cp-kpi-weather-wrap {
  display:flex; gap:8px; align-items:stretch; flex-wrap:nowrap;
  max-width:520px; overflow-x:auto;
}
.cp-kpi-weather-wrap::-webkit-scrollbar { height:4px; }
.cp-kpi-weather-wrap::-webkit-scrollbar-thumb { background:rgba(12,74,138,.18); border-radius:2px; }

.cp-weather-tile {
  background:#fff; border:1px solid rgba(12,74,138,.12);
  border-radius:10px; padding:9px 14px; min-width:130px;
  cursor:pointer; transition:border-color .15s, background .15s;
  text-align:left;
}
.cp-weather-tile:hover {
  border-color:rgba(24,95,165,.5);
  background:#f8fbff;
}
.cp-weather-tile-loc {
  font-size:11px; color:#4d6b8e; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; justify-content:space-between; align-items:baseline; gap:6px;
}
.cp-weather-tile-temp { font-size:18px; font-weight:600; color:#0c4a8a; }
.cp-weather-tile-desc { font-size:12.5px; color:#4d6b8e; margin-top:1px; }
.cp-weather-tile-projs { font-size:10px; color:var(--text3, #9ca3af); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-weather-tile-default {
  background:#E6F1FB; border-color:transparent;
}

/* Forecast Modal — Hourly + Daily */
.cp-wm-hour {
  flex-shrink:0; background:var(--surface2, #f5f5f7);
  border-radius:8px; padding:8px 10px; min-width:64px;
  text-align:center;
}
.cp-wm-hour-time { font-size:11px; color:var(--muted); }
.cp-wm-hour-icon { font-size:18px; line-height:1; margin:3px 0; }
.cp-wm-hour-temp { font-size:13px; font-weight:600; color:#0c4a8a; }
.cp-wm-hour-rain { font-size:10px; color:#185FA5; }

.cp-wm-day {
  display:grid; grid-template-columns:80px 30px 1fr 70px 70px;
  gap:10px; align-items:center;
  padding:9px 12px;
  border-bottom:1px solid var(--border, #f1f5f9);
  font-size:13px;
}
.cp-wm-day:last-child { border-bottom:0; }
.cp-wm-day-name { font-weight:500; color:var(--text); }
.cp-wm-day-icon { font-size:18px; text-align:center; }
.cp-wm-day-desc { color:var(--muted); }
.cp-wm-day-temp { text-align:right; font-variant-numeric:tabular-nums; }
.cp-wm-day-temp-min { color:var(--muted); }
.cp-wm-day-temp-max { color:#0c4a8a; font-weight:600; }
.cp-wm-day-rain { text-align:right; font-size:11px; color:#185FA5; font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════════════════════
   Wetter-Popover (statt Modal)
   ════════════════════════════════════════════════════════ */
.cp-wp {
  position:absolute; z-index:1000;
  background:#fff; border:1px solid var(--border, #e5e7eb);
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12);
  padding:14px 16px; width:480px; max-width:calc(100vw - 24px);
  font-size:13px;
}
.cp-wp-arrow {
  position:absolute; top:-7px; width:14px; height:14px;
  background:#fff; transform:rotate(45deg);
  border-top:1px solid var(--border, #e5e7eb);
  border-left:1px solid var(--border, #e5e7eb);
}
.cp-wp-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.cp-wp-title { font-size:15px; font-weight:600; color:var(--text); }
.cp-wp-projects { font-size:11px; color:var(--muted); margin-top:2px; }
.cp-wp-close {
  background:transparent; border:0; cursor:pointer;
  font-size:20px; line-height:1; color:var(--muted);
  padding:0 4px; flex-shrink:0;
}
.cp-wp-close:hover { color:var(--text); }
.cp-wp-section-label {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted);
  margin:8px 0 6px;
}
.cp-wp-hourly {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:5px; margin-bottom:6px;
}
.cp-wp-hour {
  background:var(--surface2, #f5f5f7);
  border-radius:6px; padding:6px 4px;
  text-align:center;
}
.cp-wp-hour-time { font-size:10px; color:var(--muted); }
.cp-wp-hour-icon { font-size:14px; line-height:1; margin:2px 0; }
.cp-wp-hour-temp { font-size:12px; font-weight:600; color:#0c4a8a; font-variant-numeric:tabular-nums; }
.cp-wp-hour-rain { font-size:9px; color:#185FA5; }
.cp-wp-daily { /* Container */ }
.cp-wp-day {
  display:grid; grid-template-columns:60px 24px 1fr 60px 50px;
  gap:8px; align-items:center;
  padding:5px 6px;
  border-bottom:1px solid var(--border, #f1f5f9);
  font-size:12px;
}
.cp-wp-day:last-child { border-bottom:0; }
.cp-wp-day-name { font-weight:500; color:var(--text); }
.cp-wp-day-icon { font-size:14px; text-align:center; }
.cp-wp-day-desc { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-wp-day-temp { text-align:right; font-variant-numeric:tabular-nums; font-size:11px; }
.cp-wp-day-temp-min { color:var(--muted); }
.cp-wp-day-temp-max { color:#0c4a8a; font-weight:600; }
.cp-wp-day-rain { text-align:right; font-size:10px; color:#185FA5; font-variant-numeric:tabular-nums; }

/* Wetter-Popover: Zahnrad + Settings-Bereich */
.cp-wp-iconbtn {
  background:transparent; border:0; cursor:pointer;
  color:var(--muted); padding:4px 6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:background .12s, color .12s;
}
.cp-wp-iconbtn:hover { background:var(--surface2, #f5f5f7); color:var(--text); }
.cp-wp-settings {
  background:#f8fafc; border:1px solid var(--border, #e5e7eb);
  border-radius:8px; padding:10px 12px; margin-bottom:10px;
}
.cp-wp-set-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 0;
}
.cp-wp-set-label { font-size:11px; color:var(--muted); font-weight:500; }
.cp-wp-set-pills {
  display:inline-flex; background:#fff; border:1px solid var(--border, #e5e7eb);
  border-radius:14px; padding:2px;
}
.cp-wp-set-pills button {
  background:transparent; border:0; cursor:pointer;
  font-size:11px; color:var(--text); font-weight:500;
  padding:4px 10px; border-radius:12px;
  transition:background .12s, color .12s;
}
.cp-wp-set-pills button:hover { background:var(--surface2, #f5f5f7); }
.cp-wp-set-pills button.is-active {
  background:#185FA5; color:#fff;
}
.cp-wp-set-pills button.is-active:hover { background:#0c4a8a; }

/* Hourly grid: 6 Spalten, mehrere Reihen je nach Anzahl Stunden */
.cp-wp-hourly { grid-template-columns:repeat(6, 1fr); gap:4px; }
.cp-wp-hour { padding:5px 2px; }
.cp-wp-hour-time { font-size:9px; }
.cp-wp-hour-icon { font-size:13px; }
.cp-wp-hour-temp { font-size:11px; }
.cp-wp-hour-rain { font-size:9px; }

/* Cockpit-Termine */
.cp-termin-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 0; font-size:13px;
  border-bottom:1px solid var(--border, #f1f3f6);
}
.cp-termin-row:last-child { border-bottom:0; }
.cp-termin-row[onclick]:hover { background:rgba(0,113,227,.03); }
.cp-termin-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
}
.cp-termin-time {
  font-size:11px; font-weight:500; color:var(--muted);
  min-width:62px; flex-shrink:0;
}
.cp-termin-title {
  flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.cp-termin-loc {
  font-size:11px; color:var(--text3);
  flex-shrink:0; max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ═════════════════════════════════════════════════════════════
   AVA · Stammdaten (Settings → AVA → Stammdaten)  — Tree + Liste
   ═════════════════════════════════════════════════════════════ */
.ava-sub-tabs button.ava-sub-tab {
  background: transparent; border: 0; padding: 6px 14px; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 500;
}
.ava-sub-tabs button.ava-sub-tab.on {
  background: var(--primary); color: #fff;
}

.amt-wrap {
  display: grid; grid-template-columns: 280px 1fr;
  height: calc(100vh - 200px); min-height: 540px;
  border-top: 1px solid var(--border);
}
.amt-side {
  background: var(--surface2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.amt-side-h {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.amt-side-h2 {
  padding: 12px 14px 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.amt-tree { flex: 1; overflow-y: auto; padding: 6px; }
.amt-node {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px; border-radius: 5px; cursor: pointer;
  font-size: 13px; color: var(--text); user-select: none;
}
.amt-node:hover { background: rgba(0,0,0,0.04); }
.amt-node.on { background: var(--primary); color: #fff; }
.amt-node.amt-drop-target,
.ava-sd-tnode.amt-drop-target {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: rgba(74,144,217,0.12);
}
.amt-node.on .amt-cnt { background: rgba(255,255,255,0.25); color: #fff; }
.amt-node .tw {
  width: 14px; text-align: center; font-family: ui-monospace, monospace;
  font-size: 10px; color: var(--muted); flex-shrink: 0;
}
.amt-node.on .tw { color: rgba(255,255,255,0.7); }
.amt-node .ic { width: 16px; flex-shrink: 0; }
.amt-node .nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.amt-node .amt-cnt {
  background: rgba(0,0,0,0.06); color: var(--muted);
  padding: 1px 7px; border-radius: 999px; font-size: 11px; flex-shrink: 0;
}
.amt-node .amt-edit {
  display: none; background: rgba(0,0,0,0.06); border: 0; border-radius: 4px;
  padding: 2px 5px; font-size: 11px; cursor: pointer; color: var(--muted);
}
.amt-node:hover .amt-edit { display: inline-block; }
.amt-node.on .amt-edit { display: inline-block; background: rgba(255,255,255,0.2); color: #fff; }
.amt-side-actions {
  border-top: 1px solid var(--border); padding-bottom: 8px;
}
.amt-action {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 6px 14px; cursor: pointer;
  font-size: 12px; color: var(--primary);
}
.amt-action:hover { background: rgba(74,144,217,0.08); }
.amt-action[disabled] { color: var(--text3); cursor: not-allowed; }
.amt-action[disabled]:hover { background: transparent; }
.amt-action .ic { width: 16px; }

.amt-main {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
}
.amt-filter {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.amt-search {
  flex: 1; min-width: 200px; padding: 7px 12px;
  border: 1.5px solid var(--border); border-radius: 6px; font-size: 13px;
  background: #fff;
}
.amt-select {
  padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 12px; background: #fff;
}
.amt-list { flex: 1; overflow-y: auto; }
.amt-list table { width: 100%; border-collapse: collapse; font-size: 13px; }
.amt-list th {
  text-align: left; padding: 8px 14px; background: var(--surface2);
  color: var(--muted); font-weight: 500; font-size: 12px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
.amt-list td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.amt-list tr:hover td { background: var(--surface2); }
.amt-list .amt-kt { font-weight: 500; }
.amt-list .amt-lt {
  color: var(--muted); font-size: 12px; margin-top: 2px;
  max-width: 460px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.amt-list .amt-ep { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.amt-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 500;
}
.amt-bg-eigen     { background: #dbeafe; color: #1e40af; }
.amt-bg-gaeb      { background: #d1fae5; color: #065f46; }
.amt-bg-stlk      { background: #fef3c7; color: #92400e; }
.amt-bg-sirados   { background: #fce7f3; color: #9d174d; }
.amt-bg-dbd       { background: #ede9fe; color: #5b21b6; }
.amt-bg-hersteller{ background: #ccfbf1; color: #115e59; }
.amt-bg-kg        { background: var(--surface3); color: var(--muted); border: 1px solid var(--border); }

.amt-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* Preis-Historie im Item-Modal */
#amt-item-history-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
#amt-item-history-body th, #amt-item-history-body td { padding: 6px 12px; border-bottom: 1px solid var(--border); text-align: left; }
#amt-item-history-body th { background: var(--surface2); color: var(--muted); font-weight: 500; }
#amt-item-history-body td.ep { font-variant-numeric: tabular-nums; font-weight: 500; }
#amt-item-history-body tr:last-child td { border-bottom: 0; }

/* AVA-Stammdaten — SVG-Icon-Helpers */
.amt-iconbtn { padding: 5px 8px !important; }
.amt-iconbtn .ico { width: 14px; height: 14px; display: block; }
.amt-action .ico {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: currentColor; fill: none;
}
.amt-node .ico {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; opacity: 0.85;
}
.amt-node.on .ico { opacity: 1; }
.amt-node .tw svg {
  width: 10px; height: 10px;
  stroke: currentColor; fill: none;
}
.amt-edit-svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
}

/* AVA-Stammdaten — Mode-Switch (Positionen / Vorbemerkungen) */
.amt-modeswitch {
  display: flex; gap: 0; padding: 8px;
  border-bottom: 1px solid var(--border); background: var(--surface3);
}
.amt-mode {
  flex: 1; background: transparent; border: 0; padding: 7px 10px;
  border-radius: 6px; font-size: 12px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.amt-mode .ico { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.amt-mode.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* AVA-Stammdaten — Sirados-VB-Import-Wizard */
.amt-wiz-steps {
  display: flex; gap: 0; margin-bottom: 18px;
}
.amt-wiz-step {
  flex: 1; padding: 9px 14px; background: var(--surface2);
  border: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.amt-wiz-step:first-child { border-radius: 8px 0 0 8px; }
.amt-wiz-step:last-child { border-radius: 0 8px 8px 0; }
.amt-wiz-step.on {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 500;
}
.amt-wiz-step.done {
  background: #ecfdf5; color: var(--success); border-color: #a7f3d0; font-weight: 500;
}
.amt-wiz-step .sn {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px; flex-shrink: 0;
}
.amt-wiz-step.on .sn, .amt-wiz-step.done .sn { background: rgba(255,255,255,0.25); color: inherit; }

/* Rich-Text Toolbar Buttons */
.rt-btn {
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 9px; font-size: 12px; cursor: pointer; min-width: 28px;
}
.rt-btn:hover { background: var(--surface3); border-color: var(--border-mid); }
.rt-btn:active { background: var(--primary); color: #fff; }

/* VB-Import-Wizard: Liste-Item Style */
.amt-vbw-row {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 30px 1fr 90px 240px 80px;
  gap: 10px; align-items: start; font-size: 12.5px;
}
.amt-vbw-row:last-child { border-bottom: 0; }
.amt-vbw-row:hover { background: var(--surface2); }
.amt-vbw-outline { font-weight: 600; }
.amt-vbw-prev { color: var(--muted); font-size: 11.5px; margin-top: 2px;
  max-height: 32px; overflow: hidden; }
.amt-vbw-size { color: var(--muted); font-size: 11px; text-align: right;
  font-variant-numeric: tabular-nums; }
.amt-vbw-target { font-size: 11.5px; color: #065f46; }
.amt-vbw-target.allgemein { color: var(--warn); background: #fef3c7;
  padding: 2px 8px; border-radius: 4px; display: inline-block; }
.amt-vbw-status-mapped { color: var(--success); font-size: 11px; }
.amt-vbw-status-allgemein { color: var(--warn); font-size: 11px; }

/* ── AVA: Positions-Bibliothek-Popup (Split-View, kein Blur) ─────────────── */

/* Overlay — kein backdrop-filter, leicht transparent */
.ava-pos-lib-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.18);
  display: none;
}
.ava-pos-lib-overlay.open { display: block; }

/* Popup-Container */
.ava-pos-lib-popup {
  position: fixed; z-index: 1201;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 720px; max-width: calc(100vw - 32px);
  height: 500px; max-height: calc(100vh - 64px);
  min-width: 480px; min-height: 320px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
}
/* Resize-Handles: 8 Richtungen */
.ava-pos-lib-popup .rs {
  position: absolute; z-index: 10; user-select: none;
}
.ava-pos-lib-popup .rs-n  { top:0;    left:6px;  right:6px;  height:5px; cursor:n-resize; }
.ava-pos-lib-popup .rs-s  { bottom:0; left:6px;  right:6px;  height:5px; cursor:s-resize; }
.ava-pos-lib-popup .rs-w  { left:0;   top:6px;   bottom:6px; width:5px;  cursor:w-resize; }
.ava-pos-lib-popup .rs-e  { right:0;  top:6px;   bottom:6px; width:5px;  cursor:e-resize; }
.ava-pos-lib-popup .rs-nw { top:0;    left:0;    width:10px; height:10px; cursor:nw-resize; }
.ava-pos-lib-popup .rs-ne { top:0;    right:0;   width:10px; height:10px; cursor:ne-resize; }
.ava-pos-lib-popup .rs-sw { bottom:0; left:0;    width:10px; height:10px; cursor:sw-resize; }
.ava-pos-lib-popup .rs-se { bottom:0; right:0;   width:10px; height:10px; cursor:se-resize; }

.ava-pos-lib-head {
  display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--border); gap: 10px; flex-shrink: 0;
}
.ava-pos-lib-head h3 { font-size: 14px; font-weight: 600; flex: 1; }
.ava-pos-lib-close {
  background: none; border: none; cursor: pointer;
  color: var(--text2); font-size: 20px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
}
.ava-pos-lib-close:hover { background: var(--bg2); }

/* Split-Body */
.ava-pos-lib-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}

/* Linke Spalte: Suche + Filter + Liste */
.ava-pos-lib-left {
  width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.ava-pos-lib-search-wrap { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ava-pos-lib-search {
  width: 100%; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; background: var(--bg2); color: var(--text);
}
.ava-pos-lib-search:focus { outline: none; border-color: var(--primary); }

/* Filter-Tabs */
.ava-pos-lib-filters {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0;
}
.ava-pos-lib-ftab {
  flex: 1; padding: 6px 8px; font-size: 11px; font-weight: 500;
  cursor: pointer; border-bottom: 2px solid transparent;
  color: var(--text2); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap;
}
.ava-pos-lib-ftab:hover { color: var(--text); }
.ava-pos-lib-ftab.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--bg); }
.ava-pos-lib-ftab .fav-count {
  font-size: 10px; background: var(--bg3,#f3f4f6);
  padding: 0 4px; border-radius: 8px; color: var(--text2);
}

/* Liste */
.ava-pos-lib-list { flex: 1; overflow-y: auto; padding: 5px; }
.ava-pos-lib-item {
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: background .1s;
}
.ava-pos-lib-item:hover { background: var(--bg2); }
.ava-pos-lib-item.sel { background: #eff6ff; }
.ava-pos-lib-item-info { flex: 1; min-width: 0; }
.ava-pos-lib-item-title {
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ava-pos-lib-item-tag {
  display: inline-block; font-size: 10px; padding: 1px 5px;
  border-radius: 3px; margin-top: 3px; font-weight: 500;
}
.ava-pos-lib-item-tag.sirados { background: #fce7f3; color: #9d174d; }
.ava-pos-lib-item-tag.stamm   { background: #dbeafe; color: #1e40af; }
.ava-pos-lib-item-tag.eigen   { background: #d1fae5; color: #065f46; }

/* Stern-Button in Liste + Vorschau */
.ava-pos-lib-star {
  cursor: pointer; font-size: 16px; line-height: 1;
  color: #d1d5db; flex-shrink: 0; user-select: none;
  transition: color .12s;
  background: none; border: none; padding: 2px;
}
.ava-pos-lib-star:hover { color: #f59e0b; }
.ava-pos-lib-star.on   { color: #f59e0b; }

/* Leer-Zustand */
.ava-pos-lib-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px 16px;
  color: var(--text3); font-size: 12px; gap: 8px; text-align: center;
}

/* Rechte Spalte: Vorschau */
.ava-pos-lib-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.ava-pos-lib-prev-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ava-pos-lib-prev-title { font-size: 13px; font-weight: 600; flex: 1; }
.ava-pos-lib-prev-body {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  font-size: 12px; line-height: 1.7; color: var(--text);
}
.ava-pos-lib-prev-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%;
  color: var(--text3); font-size: 12px; gap: 8px;
}
.ava-pos-lib-prev-empty svg {
  width: 28px; height: 28px; opacity: .3;
  stroke: var(--text3); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Footer */
.ava-pos-lib-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* ── Detail-Panel: Bibliotheks-Bar unter dem Langtext ────────────────────── */
.ava-detail-vb-lib-bar {
  display: none; margin-top: 10px; flex-direction: column; gap: 6px;
}
.ava-detail-vb-lib-bar.visible { display: flex; }
.ava-detail-vb-lib-btns { display: flex; gap: 8px; align-items: center; }
.ava-detail-vb-inserted {
  display: none; align-items: center; gap: 5px;
  font-size: 11px; color: #059669;
  background: #d1fae5; padding: 3px 9px; border-radius: 4px;
}
.ava-detail-vb-inserted.visible { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar Haupt-Tabs: Bearbeiten | Stammdaten  — animierter Slider
   ═══════════════════════════════════════════════════════════════════════════ */
.ava-main-tabs {
  display: flex; flex-shrink: 0;
  position: relative;
  background: #dbeafe;          /* helles Blau als Rinnsal */
  padding: 3px;
  margin: 8px 8px 6px;
  border-radius: 9px;
  border-bottom: none;
  box-shadow: inset 0 1px 3px rgba(37,99,235,.12);
}
/* Gleitende Pille (::after) */
.ava-main-tabs::after {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: #2563eb;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(37,99,235,.35);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}
/* Pill wandert zur zweiten Hälfte wenn "stammdaten" aktiv */
.ava-main-tabs[data-active="stammdaten"]::after {
  transform: translateX(100%);
}
.ava-mtab {
  flex: 1; padding: 6px 10px; font-size: 12px; font-weight: 500;
  cursor: pointer; text-align: center;
  color: #3b82f6;            /* inactive: mittelblau */
  border: none; background: transparent;
  position: relative; z-index: 1;
  user-select: none; border-radius: 6px;
  transition: color .15s;
}
.ava-mtab:hover:not(.active) { color: #1d4ed8; }
.ava-mtab.active { color: #fff; font-weight: 600; }

/* Wrapper-Panes (Bearbeiten / Stammdaten) */
.ava-mpane { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
.ava-mpane.active { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════════
   Stammdaten-Pane in der Detail-Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mode-Toggle: LV-Positionen | Vorbemerkungen — identisch zu .ava-detail-tabs / .ava-dtab */
.ava-sd-mode {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid #e5e7eb; background: #fff;
}
.ava-sd-modebn {
  flex: 1; padding: 10px 8px; font-size: 12px; color: #6b7280; cursor: pointer;
  border: none; border-bottom: 2px solid transparent;
  font-weight: 500; text-align: center; user-select: none;
  background: transparent;
  transition: all .15s;
}
.ava-sd-modebn:hover:not(.active) { color: #374151; background: #f9fafb; }
.ava-sd-modebn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }

/* Vorschau-Panel unten (nach dem Body-Bereich) */
.ava-sd-preview {
  flex-shrink: 0; min-height: 52px; max-height: 80%;
  border-top: 1px solid var(--border);   /* oben trennen, nicht unten */
  overflow: hidden; display: flex; flex-direction: column;
}
.ava-sd-preview-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  color: var(--muted); font-size: 11px; padding: 10px;
}
.ava-sd-preview-empty svg { opacity: .4; }
.ava-sd-preview-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.ava-sd-preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ava-sd-preview-title { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava-sd-preview-ins {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; padding: 3px 9px;
  border: 1px solid var(--primary); border-radius: 5px;
  background: var(--primary); color: #fff; cursor: pointer; flex-shrink: 0;
}
.ava-sd-preview-ins:hover { opacity: .85; }
.ava-sd-preview-body {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  font-size: 11px; line-height: 1.6; color: var(--text);
}

/* Resize-Handle zwischen Vorschau und Spaltenbereich */
.ava-sd-preview-resizer {
  height: 5px; flex-shrink: 0; cursor: ns-resize;
  background: transparent; border-top: 1px solid var(--border);
  transition: background .1s;
}
.ava-sd-preview-resizer:hover,
.ava-sd-preview-resizer.active { background: var(--primary-light, #dbeafe); }

/* Stammdaten-Pane (LV-Editor-Sidebar) — Settings-Pattern: Filter oben, Tree+Items split, Vorschau unten */
.ava-sd-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* Filter-Bar oben */
.ava-sd-filterbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; flex-shrink: 0;
  background: #fff; border-bottom: 1px solid var(--border);
}
.ava-sd-search-wrap { flex: 1; position: relative; display: flex; align-items: center; min-width: 0; }
.ava-sd-search-icon {
  position: absolute; left: 8px; color: var(--muted);
  pointer-events: none; stroke: currentColor; fill: none; stroke-width: 2;
}
.ava-sd-filterbar .ava-sd-search-input {
  flex: 1; min-width: 0; padding: 5px 9px 5px 26px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg2, #f8fafc);
}
.ava-sd-filterbar .ava-sd-search-input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.ava-sd-filter-chk { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); cursor: pointer; user-select: none; flex-shrink: 0; }
.ava-sd-filter-chk input { margin: 0; }
.ava-sd-filter-sel { padding: 4px 7px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2, #f8fafc); flex-shrink: 0; }

/* Tree+Items Split-Layout */
.ava-sd-split { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* Tree-Knoten — kompakt */
.ava-sd-tnode {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px; cursor: pointer; font-size: 12px;
  border-radius: 4px; margin: 1px 4px;
  white-space: nowrap; overflow: hidden;
  transition: background .1s;
  user-select: none;
}
.ava-sd-tnode:hover { background: var(--bg2, #f8fafc); }
.ava-sd-tnode.on    { background: #eff6ff; color: var(--primary); font-weight: 600; }
.ava-sd-tnode .tw   { display: inline-block; width: 12px; text-align: center; color: #94a3b8; flex-shrink: 0; font-size: 10px; }
.ava-sd-tnode .tw:hover { color: var(--text); }
.ava-sd-tnode-ic    { width: 14px; height: 14px; flex-shrink: 0; color: #f59e0b; stroke: currentColor; fill: none; }
.ava-sd-tnode.on .ava-sd-tnode-ic { color: var(--primary); }
.ava-sd-tnode .tw svg { stroke: currentColor; fill: none; }
.ava-sd-tnode .nm   { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ava-sd-tcnt        { font-size: 10px; color: var(--muted); background: var(--bg3, #f1f4f9); padding: 0 6px; border-radius: 99px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* OBSOLETE Drilldown-Klassen — bleiben unbenutzt, aber CSS-clean */
.ava-sd-crumbs-DEAD {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; flex-shrink: 0;
  background: var(--bg2, #f8fafc); border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  min-height: 30px;
}
.ava-sd-crumb-back {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--primary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.ava-sd-crumb-back:hover:not(:disabled) { background: #eff6ff; border-color: var(--primary); }
.ava-sd-crumb-back:disabled { opacity: .35; cursor: not-allowed; }
.ava-sd-crumb-path { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.ava-sd-crumb {
  cursor: pointer; color: var(--muted); white-space: nowrap;
  padding: 1px 5px; border-radius: 3px; transition: all .1s;
  flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.ava-sd-crumb:not(.cur):hover { background: #fff; color: var(--text); }
.ava-sd-crumb.cur { color: var(--text); font-weight: 600; cursor: default; }
.ava-sd-crumb-sep { color: #cbd5e1; flex-shrink: 0; font-size: 10px; }
.ava-sd-crumb-stat {
  margin-left: auto; font-size: 10px; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 99px;
  padding: 1px 8px; flex-shrink: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Such-Bar */
.ava-sd-searchbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; flex-shrink: 0;
  background: #fff; border-bottom: 1px solid var(--border);
}
.ava-sd-search-input {
  flex: 1; min-width: 0;
  padding: 5px 9px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg2, #f8fafc);
  transition: all .1s;
}
.ava-sd-search-input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.ava-sd-search-scope {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--muted); cursor: pointer; flex-shrink: 0;
  user-select: none;
}
.ava-sd-search-scope input { margin: 0; }

/* Drilldown-Liste — Folders und Positions gemixt in einer Spalte */
.ava-sd-list { flex: 1; overflow-y: auto; padding: 4px; min-width: 0; }

/* Folder-Reihe in der Drilldown-Liste */
.ava-sd-folder-row {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; cursor: pointer; font-size: 12.5px;
  border-radius: 5px; margin: 1px 0;
  border: 1px solid transparent;
  transition: all .1s; user-select: none;
}
.ava-sd-folder-row:hover { background: #eff6ff; border-color: #c7d8eb; }
.ava-sd-folder-row.sel  { background: #dbeafe; border-color: #93c5fd; }
.ava-sd-folder-row .ico { font-size: 14px; color: var(--primary); flex-shrink: 0; }
.ava-sd-folder-row .label {
  flex: 1; min-width: 0;
  font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ava-sd-folder-row .count {
  flex-shrink: 0; font-size: 10.5px; color: var(--muted);
  background: var(--bg3, #f1f4f9); padding: 1px 7px; border-radius: 99px;
  min-width: 28px; text-align: center; font-variant-numeric: tabular-nums;
}
.ava-sd-folder-row .arrow { flex-shrink: 0; color: #94a3b8; font-size: 13px; }

/* Such-Treffer-Header */
.ava-sd-search-header {
  padding: 5px 10px; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  background: var(--bg2, #f8fafc); border-bottom: 1px solid var(--border);
  margin: 4px -4px 2px; position: sticky; top: -4px; z-index: 1;
}
.ava-sd-search-header.first { margin-top: 0; }

/* Pfad-Hint unter Treffer (zeigt: aus welchem Folder kommt der Treffer) */
.ava-sd-item-path {
  font-size: 10.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic;
}

/* Match-Highlight */
.ava-sd-list mark {
  background: #fef9c3; color: inherit; padding: 0 1px; border-radius: 2px;
}

/* OZ-Tag in der Position-Reihe */
.ava-sd-item-oz {
  font-family: ui-monospace, "SF Mono", monospace; font-size: 10px;
  background: #fce7f3; color: #9d174d; padding: 1px 5px; border-radius: 3px;
  flex-shrink: 0; margin-right: 4px;
}
.ava-sd-item-ep {
  flex-shrink: 0; font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-left: 6px;
}
.ava-sd-item-usage {
  flex-shrink: 0; font-size: 10px; color: var(--success, #16a34a);
  background: #ecfdf5; padding: 0 5px; border-radius: 99px;
  margin-left: 4px; font-weight: 600;
}

/* Item-Liste reuse — leichter Tweak für Drilldown-Kontext */
.ava-sd-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 7px; border-radius: 5px; cursor: default;
  font-size: 12px; transition: background .1s;
  border: 1px solid transparent;
}
.ava-sd-item:hover { background: #f1f5f9; border-color: #e2e8f0; }
.ava-sd-item.sel {
  background: #dbeafe;
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
}
.ava-sd-item.sel:hover { background: #bfdbfe; }
.ava-sd-item.sel .ava-sd-item-title { color: var(--primary); font-weight: 600; }
.ava-sd-item:active { cursor: move; }
.ava-sd-item.ava-sd-dragging { opacity: .35; }
.ava-sd-item .ico { flex-shrink: 0; margin-top: 1px; color: var(--muted); }
.ava-sd-grip { flex-shrink: 0; margin-top: 1px; color: #c4c9d4; transition: color .1s; }
.ava-sd-item:hover .ava-sd-grip { color: #9ca3af; }
.ava-sd-item-text { flex: 1; min-width: 0; }
.ava-sd-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ava-sd-item-unit { color: var(--muted); font-size: 10px; margin-top: 2px; }
.ava-sd-empty { padding: 16px 10px; color: var(--muted); font-size: 11px; text-align: center; }
.ava-sd-hint { padding: 12px 10px; color: var(--muted); font-size: 11px; }
.ava-sd-loading { padding: 12px 10px; color: var(--muted); font-size: 11px; }

/* ── Delete-Confirm Flyover ──────────────────────────────────── */
.dcf-fly {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.07);
  max-width: 300px;
  min-width: 190px;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
  transform: translateX(-50%);
}
.dcf-fly.dcf-vis {
  animation: dcf-in .15s ease;
}
@keyframes dcf-in {
  from { opacity:0; margin-top:-6px; }
  to   { opacity:1; margin-top:0; }
}
.dcf-msg { margin: 0 0 12px; white-space: pre-wrap; }
.dcf-btns { display: flex; gap: 8px; justify-content: flex-end; }
.dcf-cancel {
  padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; color: #374151; font-size: 12px; font-family: inherit;
  cursor: pointer;
}
.dcf-cancel:hover { background: #f3f4f6; }
.dcf-ok {
  padding: 6px 13px; border: none; border-radius: 6px;
  background: #dc2626; color: #fff; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.dcf-ok:hover { background: #b91c1c; }

/* ── Stammdaten Keyboard-Fokus: Border um aktive Spalte ──────────────── */
.ava-sd-tree, .ava-sd-list { position: relative; }
.ava-sd-tree { overflow-y: auto; }
.ava-sd-tree::-webkit-scrollbar { width: 4px; }
.ava-sd-tree::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.ava-sd-tree.ava-sd-kfocus,
.ava-sd-list.ava-sd-kfocus {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: rgba(74,144,217,0.025);
  border-radius: 4px;
}

/* ── Tree-Crumbs für Drilldown (macOS-Finder-Style) ──────────────────── */
.ava-sd-tree-crumbs {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; flex-shrink: 0;
  background: var(--bg2, #f8fafc); border-bottom: 1px solid var(--border);
  font-size: 11px; overflow-x: auto; white-space: nowrap;
}
.ava-sd-tree-crumbs::-webkit-scrollbar { height: 4px; }
.ava-sd-tree-crumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.ava-sd-crumb-back {
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 7px; cursor: pointer; color: var(--primary);
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.ava-sd-crumb-back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.ava-sd-crumb-back:hover { background: #eff6ff; border-color: var(--primary); }
.ava-sd-crumb-path { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ava-sd-crumb-link {
  color: var(--muted); cursor: pointer; padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; flex-shrink: 0;
}
.ava-sd-crumb-link:hover { background: #fff; color: var(--text); }
.ava-sd-crumb-cur {
  color: var(--text); font-weight: 600; padding: 1px 5px;
  white-space: nowrap; flex-shrink: 0;
}
.ava-sd-tree-crumbs .ava-sd-crumb-sep { color: #cbd5e1; flex-shrink: 0; font-size: 10px; }

/* Sichtbarer Spalten-Resizer mit Drag-Handle */
.ava-sd-col-resizer {
  width: 6px !important; flex-shrink: 0; cursor: ew-resize;
  background: var(--surface3, #f1f4f9);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  position: relative;
  transition: background .1s;
}
.ava-sd-col-resizer::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 26px; background: #cbd5e1; border-radius: 1px;
  transition: background .1s, height .1s;
}
.ava-sd-col-resizer:hover { background: #dbeafe; }
.ava-sd-col-resizer:hover::before { background: var(--primary); height: 36px; }
.ava-sd-col-resizer.active { background: #dbeafe; }
.ava-sd-col-resizer.active::before { background: var(--primary); height: 100%; border-radius: 0; }

/* Source-Unit-Badges */
.ava-sd-item-src-unit { background: var(--surface3, #f1f4f9); color: var(--text); text-transform: none; }
.ava-sd-item-src-kg   { background: #dbeafe; color: #1e40af; text-transform: none; }

/* Visuelles Feedback nach Einfügen — kurzer grüner Puls auf der Stamm-Zeile */
.ava-sd-item.ava-sd-just-inserted {
  animation: sd-flash 0.55s ease-out;
}
@keyframes sd-flash {
  0%   { background: #bbf7d0; box-shadow: inset 3px 0 0 var(--success, #16a34a); }
  100% { background: transparent; }
}

/* ═════════════════════════════════════════════════════════════════════
   Einheiten-Verwaltung (Settings → Einheiten)
   ═════════════════════════════════════════════════════════════════════ */
.units-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.units-lookup {
  flex: 1; padding: 7px 11px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg2, #f8fafc);
}
.units-lookup:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }

.units-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.units-table th {
  background: var(--bg2, #f8fafc); padding: 9px 12px; text-align: left;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; border-bottom: 1px solid var(--border);
}
.units-table td {
  padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.units-table tr:last-child td { border-bottom: 0; }
.units-table tbody tr { transition: background .08s; }
.units-table tbody tr:hover td { background: var(--bg2, #f8fafc); }
.units-table .grip {
  color: #cbd5e1; cursor: move; user-select: none;
  font-size: 14px; line-height: 1; text-align: center;
}
.units-table tr:hover .grip { color: var(--muted); }
.units-table .grip:active { cursor: move; }
.units-table .name { font-weight: 500; }
.units-table .usage-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.units-table .actions { text-align: right; white-space: nowrap; display: flex; gap: 4px; justify-content: flex-end; }

.units-table .icon-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 9px; cursor: pointer; color: var(--muted); font-size: 12px;
  transition: all .1s; line-height: 1;
}
.units-table .icon-btn:hover { background: var(--bg2, #f8fafc); color: var(--text); border-color: var(--muted); }
.units-table .icon-btn.danger:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); background: #fef2f2; }
.units-table .icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.units-table .toggle-active {
  width: 36px; height: 20px; border-radius: 99px;
  background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s;
  display: inline-block; vertical-align: middle;
}
.units-table .toggle-active::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.units-table .toggle-active.on { background: var(--success, #16a34a); }
.units-table .toggle-active.on::after { transform: translateX(16px); }
.units-table tr.inactive .name { color: var(--muted); text-decoration: line-through; }

.units-table tr.add-row td {
  background: #eff6ff;
  padding: 10px 12px;
}
.units-table tr.add-row input {
  padding: 5px 10px; font-size: 13px; border: 1px solid var(--primary);
  border-radius: 4px; width: 240px; margin-right: 8px;
}
.units-table tr.add-row input:focus { outline: none; box-shadow: 0 0 0 2px rgba(74,144,217,0.2); }
.units-table tr.add-row .btn-save {
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer;
  font-weight: 500; margin-right: 4px;
}
.units-table tr.add-row .btn-save:hover { background: var(--primary-d, #357abd); }
.units-table tr.add-row .btn-cancel {
  background: #fff; border: 1px solid var(--border);
  padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; color: var(--muted);
}
.units-table tr.add-row .btn-cancel:hover { background: var(--bg2, #f8fafc); }

.units-table tr.editing td { background: #fef9c3; }
.units-table tr.editing input.name-edit {
  padding: 4px 8px; font-size: 13px; border: 1px solid var(--primary);
  border-radius: 4px; width: 200px;
}
.units-table tr.dragging td { opacity: 0.4; }
.units-table tr.drop-target td { box-shadow: inset 0 2px 0 var(--primary); }
.units-table tr.just-saved {
  animation: units-flash 0.6s ease-out;
}
@keyframes units-flash {
  0%   { background: #bbf7d0; }
  100% { background: transparent; }
}

/* ── Stern in Stammdaten-Items (Vorbemerkungen-Modus) ────────── */
.ava-sd-item-star {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 14px; color: #d1d5db; padding: 0 2px; line-height: 1;
  align-self: center;
}
.ava-sd-item-star:hover { color: #f59e0b; }
.ava-sd-item-star.on    { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════════
   Inline-Suggest-Popup — Auto-Complete unter dem aktiven Input/Cell
   ═══════════════════════════════════════════════════════════════════════ */
.sug-popup {
  position: fixed;            /* JS setzt left/top/width pro Anchor */
  z-index: 10500;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.15), 0 2px 6px rgba(15,23,42,0.08);
  /* Breite wird vom JS auf Input-Breite gesetzt */
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 12.5px;
  animation: sug-pop 0.12s ease-out;
}
@keyframes sug-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sug-list { flex: 1; overflow-y: auto; padding: 3px 0; }
.sug-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  align-items: start;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.08s;
}
.sug-row:last-child { border-bottom: 0; }
.sug-row:hover, .sug-row.sel { background: #eff6ff; }
.sug-row.sel { box-shadow: inset 3px 0 0 var(--primary); }
.sug-row-l { min-width: 0; }
.sug-row-kt {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px;
}
.sug-row-kt mark { background: #fef9c3; color: inherit; padding: 0 1px; border-radius: 2px; }
.sug-row-lt {
  color: var(--muted); font-size: 11px; line-height: 1.4;
  margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sug-row-r {
  text-align: right; font-size: 10.5px; line-height: 1.4;
  flex-shrink: 0; min-width: 80px;
}
.sug-row-ep {
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
  font-size: 12px;
}
.sug-row-ep .unit { color: var(--muted); font-weight: 400; font-size: 10px; }
.sug-row-meta {
  display: flex; gap: 4px; align-items: center; justify-content: flex-end;
  margin-top: 2px; flex-wrap: wrap;
}
.sug-badge {
  font-size: 9.5px; padding: 1px 6px; border-radius: 3px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.sug-badge.b-eigen   { background: #dcfce7; color: #166534; }
.sug-badge.b-sirados { background: #fce7f3; color: #9d174d; }
.sug-badge.b-gaeb    { background: #dbeafe; color: #1e40af; }
.sug-badge.b-stlk    { background: #fef3c7; color: #78350f; }
.sug-badge.b-dbd, .sug-badge.b-hersteller { background: #f1f5f9; color: var(--muted); }
.sug-row-usage {
  font-size: 10px; color: var(--success, #16a34a);
  background: #ecfdf5; padding: 0 5px; border-radius: 99px; font-weight: 600;
}
.sug-foot {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-size: 10.5px; color: var(--muted);
  background: #f8fafc; border-top: 1px solid var(--border);
}
.sug-foot-keys { flex: 1; }
.sug-foot kbd {
  background: #fff; border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 3px;
  padding: 0 4px; font-size: 10px; font-family: inherit;
  color: var(--text); margin: 0 1px;
}
.sug-count { font-variant-numeric: tabular-nums; }
.sug-count a { text-decoration: none; }
.sug-count a:hover { text-decoration: underline; }
.sug-empty {
  padding: 18px 14px; text-align: center; color: var(--muted); font-size: 12px;
}
.sug-loading { padding: 16px 14px; text-align: center; color: var(--muted); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════
   Unit-Picker-Popup — kompaktes Custom-Dropdown für die Einheit-Cell
   ═══════════════════════════════════════════════════════════════════════ */
.unit-pop {
  position: fixed; z-index: 10600;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.10);
  min-width: 100px;
  max-height: 280px;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  animation: unit-pop 0.10s ease-out;
}
@keyframes unit-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.unit-pop-list {
  flex: 1; overflow-y: auto; padding: 4px 0;
}
.unit-pop-row {
  padding: 6px 14px; cursor: pointer;
  transition: background .06s;
  white-space: nowrap;
}
.unit-pop-row:hover, .unit-pop-row.sel {
  background: #eff6ff; color: var(--primary);
}
.unit-pop-row.sel { font-weight: 600; }
.unit-pop-row.cur::before {
  content: '✓'; color: var(--success, #16a34a); margin-right: 6px; font-size: 11px;
}
.unit-pop-row.cur:not(.sel)::before {
  content: '✓'; color: var(--success, #16a34a); margin-right: 6px; font-size: 11px;
}
.unit-pop-empty {
  padding: 14px; text-align: center; color: var(--muted); font-size: 12px;
}

/* Anchor-Input (das was in der Cell steht) — etwas schöner als ein Standard-Input */
.unit-anchor {
  width: 100%; padding: 4px 18px 4px 8px;
  border: 1px solid var(--primary); border-radius: 4px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  outline: none;
}
.unit-anchor:focus { box-shadow: 0 0 0 2px rgba(74,144,217,0.2); }
.sug-via-lt {
  font-size: 9.5px; color: var(--warn, #d97706); margin-left: 6px;
  font-weight: 500; vertical-align: middle;
  background: #fef3c7; padding: 0 5px; border-radius: 3px;
}

/* Langtext-Snippet im Stammdaten-Pane (nur bei aktiver Suche) */
.ava-sd-item-lt {
  font-size: 11px; color: var(--muted);
  margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ava-sd-item-lt-hint {
  font-size: 9.5px; color: var(--warn, #d97706);
  background: #fef3c7; padding: 0 5px; border-radius: 3px;
  margin-right: 5px; font-weight: 500;
}

/* Source-Badges in der Items-Liste */
.ava-sd-item-meta { margin-top: 3px; display: flex; gap: 4px; }
.ava-sd-item-src {
  font-size: 9.5px; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.02em; font-weight: 600;
  background: #f1f5f9; color: var(--muted);
}
.ava-sd-item-src-eigen   { background: #dcfce7; color: #166534; }
.ava-sd-item-src-sirados { background: #fce7f3; color: #9d174d; }
.ava-sd-item-src-gaeb    { background: #dbeafe; color: #1e40af; }
.ava-sd-item-src-stlk    { background: #fef3c7; color: #78350f; }
.ava-sd-item-src-dbd, .ava-sd-item-src-hersteller { background: #e0e7ff; color: #3730a3; }

/* Status-Banner oben in der Stammdaten-Drilldown-Liste — immer sichtbar */
.ava-sd-status {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; margin: 0 0 4px;
  border-radius: 4px; font-size: 10.5px;
  background: var(--surface3, #f1f4f9); color: var(--muted);
  border-left: 3px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.ava-sd-status.ok   { background: #ecfdf5; border-left-color: var(--success, #16a34a); color: #065f46; }
.ava-sd-status.warn { background: #fef3c7; border-left-color: var(--warn,    #d97706); color: #78350f; }
.ava-sd-status.err  { background: #fef2f2; border-left-color: var(--danger,  #dc2626); color: #991b1b; }
.ava-sd-status .msg { flex: 1; min-width: 0; word-break: break-word; }
.ava-sd-status .btn {
  padding: 1px 8px; font-size: 12px; line-height: 1;
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer; flex-shrink: 0;
}
.ava-sd-status .btn:hover { background: var(--bg2, #f8fafc); }

/* ── KG Autocomplete Dropdown ─────────────────────────────── */
.ke-kg-drop {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  /* Volle Höhe — kein Scrollbar bis 90vh */
  max-height: 90vh;
  overflow-y: visible;
  font-size: 13px;
}

/* KG-Inline-Edit: Input über volle Spaltenbreite, dezent gerahmt */
.ke-td-kg.ke-td-kg-editing { padding: 0; }
.ke-kg-search-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 2px solid var(--primary, #2563eb);
  background: #fff;
  color: var(--text);
  outline: none;
  border-radius: 0;
}
.ke-kg-back {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #3b82f6);
  cursor: pointer;
  user-select: none;
}
.ke-kg-back:hover { background: #f0f6ff; }
.ke-kg-back svg { flex-shrink: 0; }
.ke-kg-divider { height: 1px; background: var(--border); }
.ke-kg-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  user-select: none;
}
.ke-kg-opt-label { flex: 1; min-width: 0; }
.ke-kg-opt-arr {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 8px 12px;
  margin-right: -12px;        /* zum Rand erweitert für leichteres Treffen */
  color: var(--muted, #9ca3af);
  display: flex;
  align-items: center;
  border-left: 1px solid transparent;
  cursor: default;             /* Hover öffnet, kein Klick */
  transition: background .12s, color .12s, border-color .12s;
}
.ke-kg-opt:hover,
.ke-kg-opt.active { background: #f1f5f9; color: var(--text); }
.ke-kg-opt:hover .ke-kg-opt-arr,
.ke-kg-opt.active .ke-kg-opt-arr { color: var(--text); border-left-color: var(--border); }
/* Klick auf den Pfeil = Drilldown — Hover als visueller Hinweis */
.ke-kg-opt-arr:hover {
  background: var(--primary, #2563eb);
  color: #fff;
  border-left-color: var(--primary, #2563eb);
}

/* Sub-Panel: gleiches Aussehen wie Main-Panel, leicht gehobener Schatten */
.ke-kg-subpanel {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 8px 28px rgba(37,99,235,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════
   PROJEKT-CHAT
   ═══════════════════════════════════════════════════════════════════════ */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 600;
  min-width: 16px; height: 16px;
  padding: 0 5px; border-radius: 8px;
  margin-left: 2px;
}

#page-chat { padding: 0; }
#page-chat.active { display: flex; flex-direction: column; height: calc(100vh - var(--header-h, 60px)); }

.chat-layout {
  flex: 1; display: grid;
  grid-template-columns: 220px 260px 1fr;
  background: #fff;
  height: 100%; overflow: hidden;
}

/* ── Spalten-Header (Side-Heads) ── */
.chat-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #fafbfc;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
}
.chat-side-head input[type="search"] {
  flex: 1; min-width: 0;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff; padding: 4px 8px; border-radius: 4px;
  font: inherit; font-size: 12px;
  outline: none;
}
.chat-side-title { flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.chat-icon-btn {
  background: transparent; border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px; cursor: pointer;
  padding: 3px 6px; color: var(--text);
  display: inline-flex; align-items: center;
}
.chat-icon-btn:hover { background: #f3f4f6; }

/* ── Spalte 1: Projekte ── */
.chat-projects {
  border-right: 1px solid var(--border, #e5e7eb);
  display: flex; flex-direction: column;
  background: #fafbfc;
  min-width: 0;
}
.chat-projects-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.chat-proj-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer;
  font-size: 13px; color: var(--text);
  border-left: 3px solid transparent;
}
.chat-proj-row:hover { background: rgba(0,0,0,0.04); }
.chat-proj-row.on { background: #dbeafe; border-left-color: #2563eb; color: #1e40af; }
.chat-proj-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted, #6b7280);
  flex-shrink: 0;
}
.chat-proj-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Spalte 2: Threads ── */
.chat-threads {
  border-right: 1px solid var(--border, #e5e7eb);
  display: flex; flex-direction: column;
  min-width: 0;
}
.chat-threads-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.chat-thread-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; cursor: pointer;
  font-size: 13px; color: var(--text);
  border-left: 3px solid transparent;
}
.chat-thread-row:hover { background: rgba(0,0,0,0.04); }
.chat-thread-row.on { background: #dbeafe; border-left-color: #2563eb; color: #1e40af; }
.chat-thread-def { color: #f59e0b; flex-shrink: 0; }
.chat-thread-name-cell { flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-thread-unread {
  background: #2563eb; color: #fff;
  font-size: 10px; font-weight: 600;
  min-width: 18px; height: 18px;
  padding: 0 6px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Spalte 3: Verlauf + Compose ── */
.chat-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: #fff;
}
.chat-main-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #fff; flex-shrink: 0;
  font-size: 14px;
}
.chat-thread-name { font-weight: 600; color: var(--text); }
.chat-thread-meta { font-size: 11px; color: var(--muted, #6b7280); }

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 12px 16px;
  font-size: 13px; line-height: 1.55;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff;
}
.chat-day-sep {
  text-align: center; font-size: 11px;
  color: var(--muted, #9ca3af);
  margin: 8px 0 4px;
}
.chat-msg {
  display: flex; gap: 10px;
  align-items: flex-start;
}
.chat-msg-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #1f2937;
  user-select: none;
}
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-head { display: flex; align-items: baseline; gap: 8px; }
.chat-msg-author { font-weight: 500; color: var(--text); }
.chat-msg-time { font-size: 11px; color: var(--muted, #9ca3af); }
.chat-edited { font-size: 10px; color: var(--muted, #9ca3af); }
.chat-msg-text { color: var(--text); margin-top: 2px; word-wrap: break-word; }
.chat-msg-text .chat-mention {
  background: #fbeaf0; color: #72243e;
  padding: 1px 6px; border-radius: 3px;
  font-weight: 500;
}
.chat-msg-text .chat-ref {
  background: #e6f1fb; color: #0c447c;
  padding: 1px 6px; border-radius: 3px;
  cursor: pointer;
}
.chat-msg-text .chat-ref:hover { background: #b5d4f4; }
.chat-deleted { color: var(--muted, #9ca3af); font-style: italic; }

.chat-compose {
  flex-shrink: 0;
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 10px 14px 12px;
  background: #fafbfc;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-compose textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical; min-height: 44px; max-height: 200px;
  background: #fff;
  outline: none;
}
.chat-compose textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.12); }
.chat-compose-foot {
  display: flex; align-items: center; gap: 8px;
}
.chat-hint { font-size: 11px; color: var(--muted, #6b7280); flex: 1; }
.chat-send-btn {
  background: #2563eb; color: #fff;
  border: 0; border-radius: 5px;
  padding: 6px 14px; cursor: pointer;
  font-size: 12px; font-weight: 500;
}
.chat-send-btn:hover { background: #1d4ed8; }

.chat-empty-hint {
  padding: 24px 16px; text-align: center;
  color: var(--muted, #9ca3af); font-size: 12px; font-style: italic;
}

/* Chat-Window-Modus (eigenes Browser-Fenster über window.open #chat) */
body.plan3-chat-window #topbar nav button:not(#nav-chat-btn),
body.plan3-chat-window #topbar nav .nav-bauleitung-btn,
body.plan3-chat-window #topbar .btn-settings,
body.plan3-chat-window #topbar .btn-logout {
  display: none;
}
body.plan3-chat-window #topbar .user-info { font-size: 12px; }
body.plan3-chat-window #app { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING-CHAT-BUBBLE
   ═══════════════════════════════════════════════════════════════════════ */
.chatfly-wrap {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 9100;
  pointer-events: none;
}
.chatfly-wrap > * { pointer-events: auto; }

.chatfly-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #185FA5; color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  position: absolute; right: 0; bottom: 0;
  transition: background .15s, transform .15s;
}
.chatfly-bubble:hover { background: #0C447C; transform: translateY(-1px); }
.chatfly-badge {
  position: absolute; top: -4px; right: -4px;
  background: #E24B4A; color: #fff;
  font-size: 10px; font-weight: 600;
  min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* Drawer — slides up from bubble area */
.chatfly-drawer {
  position: absolute; right: 0; bottom: 70px;
  width: min(460px, calc(100vw - 48px));
  height: min(680px, calc(100vh - 120px));
  background: #fff;
  border: 1px solid var(--border-mid, #d1d5db);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 320px;
  min-height: 400px;
}

/* Resize-Handles: oben, links, Ecke oben-links */
.chatfly-resize-edge-top {
  position: absolute; top: 0; left: 8px; right: 8px; height: 6px;
  cursor: ns-resize; z-index: 5;
}
.chatfly-resize-edge-left {
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 6px;
  cursor: ew-resize; z-index: 5;
}
.chatfly-resize-corner {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px;
  cursor: nwse-resize; z-index: 6;
}
.chatfly-resize-corner::after {
  content: ''; position: absolute; left: 4px; top: 4px;
  width: 6px; height: 6px;
  border-left: 2px solid var(--border-mid, #d1d5db);
  border-top: 2px solid var(--border-mid, #d1d5db);
  border-top-left-radius: 2px;
  opacity: 0; transition: opacity .12s;
}
.chatfly-drawer:hover .chatfly-resize-corner::after { opacity: 1; }
body.chatfly-resizing { cursor: nwse-resize !important; user-select: none !important; }
body.chatfly-resizing-h { cursor: ns-resize !important; user-select: none !important; }
body.chatfly-resizing-w { cursor: ew-resize !important; user-select: none !important; }
body.chatfly-resizing *, body.chatfly-resizing-h *, body.chatfly-resizing-w * { user-select: none !important; }

/* Splitter zwischen Verlauf und Compose */
.chatfly-msg-splitter {
  height: 5px; cursor: ns-resize;
  background: transparent;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  transition: background .12s;
}
.chatfly-msg-splitter:hover { background: #dbeafe; border-top-color: #93c5fd; }

/* Vertikaler Splitter zwischen Sidebar und Main */
.cft-side-resizer {
  width: 5px; flex-shrink: 0;
  cursor: ew-resize;
  background: transparent;
  border-right: 1px solid #f1f5f9;
  transition: background .12s;
  margin-left: -1px;
}
.cft-side-resizer:hover { background: #dbeafe; border-right-color: #93c5fd; }
.chatfly-drawer[hidden] { display: none; }
.chatfly-wrap[data-state="open"] .chatfly-bubble { background: #0C447C; }

.chatfly-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #185FA5; color: #fff;
  font-size: 13px;
}
.chatfly-title { font-weight: 500; }
.chatfly-spacer { flex: 1; }
.chatfly-icon-btn {
  background: transparent; border: 0; color: rgba(255,255,255,.85);
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.chatfly-icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.chatfly-tabs {
  display: flex; background: rgba(0,0,0,0.10);
}
.chatfly-tab {
  flex: 1; padding: 8px 0;
  background: transparent; border: 0;
  color: rgba(255,255,255,.7); font-size: 12px; font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.chatfly-tabs { background: #185FA5; }
.chatfly-tab { color: rgba(255,255,255,.65); }
.chatfly-tab.active { color: #fff; font-weight: 500; border-bottom-color: #fff; background: rgba(0,0,0,0.10); }
.chatfly-tab.disabled { color: rgba(255,255,255,.35); cursor: not-allowed; }
.chatfly-tab:hover:not(.disabled):not(.active) { color: #fff; background: rgba(0,0,0,0.06); }

.chatfly-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; background: #fff; }

/* Plus-Button als sauberer SVG-Kreis (in Compose-Bar) */
.chatfly-plus {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-mid, #d1d5db);
  background: #fff; color: var(--muted, #6b7280);
  cursor: pointer; flex-shrink: 0;
  transition: transform .18s ease, background .15s, color .15s, border-color .15s;
}
.chatfly-plus:hover { background: #f3f4f6; color: var(--text); border-color: #9ca3af; }
.chatfly-plus.is-open { background: #185FA5; color: #fff; border-color: #185FA5; transform: rotate(135deg); }

/* Plus-Menü Einträge */
.cft-pmrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  color: var(--text);
}
.cft-pmrow:hover { background: var(--surface2, #f3f4f6); }
.cft-pmrow > div { display: flex; flex-direction: column; gap: 1px; }
.cft-pmsub { font-size: 10px; color: var(--muted, #6b7280); font-weight: 400; }
.cft-pmrow svg { flex-shrink: 0; color: var(--muted, #6b7280); }

/* Sidebar-Row Hover */
.cft-srow:hover { background: rgba(0,0,0,0.04); }
.cft-unread {
  margin-left: auto;
  background: #185FA5; color: #fff;
  font-size: 9px; font-weight: 600;
  min-width: 18px; height: 16px;
  padding: 0 5px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Login-Page: Bubble verstecken */
body.no-app-shell .chatfly-wrap { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   KI-Settings-Page
   ═══════════════════════════════════════════════════════════════════════ */
.ai-src-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface2, #f8fafc);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; color: var(--text);
  user-select: none;
}
.ai-src-toggle input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; }

.ai-prov-card {
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s, background .12s;
  background: #fff;
  position: relative;
}

/* ── LV-Detail-Pane: 4-Spalten-Kopfzeile (OZ/Menge/Einheit/EP) ── */
.ava-detail-grid-pos-row1 {
  display: grid;
  grid-template-columns: 0.7fr 0.9fr 0.9fr 1fr;
  gap: 8px;
}
.ava-detail-grid-pos-row1.is-non-position {
  grid-template-columns: 1fr;
}
.ava-detail-grid-pos-row1.is-non-position .ava-pos-only-cell {
  display: none;
}
@media (max-width: 460px) {
  .ava-detail-grid-pos-row1 { grid-template-columns: 1fr 1fr; }
}

/* Input mit € rechts */
.ava-input-with-suffix {
  position: relative;
}
.ava-input-with-suffix .ava-detail-input {
  padding-right: 22px;
  text-align: right;
}
.ava-input-suffix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #9ca3af;
  pointer-events: none;
}

/* GP-/Aufmaß-Hint klein und grau unter dem Feld */
.ava-field-hint {
  display: block;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 3px;
  line-height: 1.2;
  min-height: 12px;
}

/* EP-AI-Button neben dem EP-Label */
.ava-ep-ai-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  color: #6366f1;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  vertical-align: middle;
  transition: background .12s, border-color .12s;
}
.ava-ep-ai-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

/* EP-Vorschlag-Modal */
.ep-source-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
.ep-source-card .head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.ep-source-card .head .label {
  font-size: 10px; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
}
.ep-source-card .head .count {
  margin-left: auto; font-size: 10px; color: #9ca3af;
}
.ep-source-card .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; border-radius: 5px; gap: 8px;
}
.ep-source-card .row + .row { margin-top: 2px; }
.ep-source-card .row .text { color: #4b5563; font-size: 11px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-source-card .row .ep { font-weight: 500; color: #1f2937; flex-shrink: 0; }
.ep-source-card .row.is-recent { background: #f3f4f6; }
.ep-source-card .row.dim { opacity: .55; }
.ep-source-card .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid #e5e7eb; text-align: center;
}
.ep-source-card .stats .cell { padding: 2px 0; }
.ep-source-card .stats .cell.mid {
  background: #eef2ff; border-radius: 6px; padding: 4px 0;
}
.ep-source-card .stats .lbl { font-size: 9px; color: #9ca3af; }
.ep-source-card .stats .cell.mid .lbl { color: #4338ca; }
.ep-source-card .stats .val { font-size: 13px; font-weight: 500; color: #1f2937; }
.ep-source-card .stats .cell.mid .val { color: #4338ca; }
.ep-source-card .empty {
  padding: 18px 6px; text-align: center; color: #9ca3af; font-size: 11px;
}

.ep-combined-card {
  background: #fff; border: 2px solid #6366f1; border-radius: 10px;
  padding: 14px; margin-top: 14px;
}
.ep-combined-card .stats { grid-template-columns: repeat(3, 1fr); gap: 10px;
  display: grid; text-align: center; margin-bottom: 8px; }
.ep-combined-card .stats .cell { padding: 8px; }
.ep-combined-card .stats .cell.mid {
  background: #eef2ff; border-radius: 8px;
}
.ep-combined-card .stats .lbl { font-size: 10px; color: #9ca3af; }
.ep-combined-card .stats .cell.mid .lbl { color: #4338ca; }
.ep-combined-card .stats .val { font-size: 18px; font-weight: 500; color: #1f2937; }
.ep-combined-card .stats .cell.mid .val { font-size: 22px; color: #4338ca; }
.ep-combined-card .calc-info {
  font-size: 11px; color: #6b7280; line-height: 1.5;
  background: #f9fafb; padding: 8px 10px; border-radius: 6px;
}

/* Menge-Feld gesperrt-aus-Aufmaß-Optik */
#ava-field-menge.is-locked {
  background: #f3f4f6;
  color: #4b5563;
  cursor: not-allowed;
}
#ava-field-menge.is-locked:focus { outline: none; }

/* ── KI-Assist-Modal im LV-Editor ──────────────────────── */
#ava-ai-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.ava-ai-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.ava-ai-modal-box {
  position: relative; background: #fff;
  border-radius: 12px;
  width: min(680px, 92vw); max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .3);
  overflow: hidden;
}
.ava-ai-modal-head {
  padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 8px;
  background: #fafbfc;
  font-size: 13px;
}
.ava-ai-modal-meta {
  font-size: 10px; color: #9ca3af;
}

/* Plain/HTML-Toggle im KI-Modal */
.ava-ai-fmt-toggle {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.ava-ai-fmt-toggle button {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
  font-family: inherit;
}
.ava-ai-fmt-toggle button + button { border-left: 1px solid #e5e7eb; }
.ava-ai-fmt-toggle button:hover { background: #f3f4f6; }
.ava-ai-fmt-toggle button.active {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 500;
}
.ava-ai-modal-x {
  background: transparent; border: 0;
  font-size: 22px; line-height: 1; color: #9ca3af;
  cursor: pointer; padding: 0 4px;
}
.ava-ai-modal-x:hover { color: #1f2937; }
.ava-ai-modal-body {
  padding: 14px 18px; flex: 1; overflow: auto;
  background: #fff;
}
.ava-ai-result {
  font-size: 13px; line-height: 1.55; color: #1f2937;
  min-height: 80px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.ava-ai-result p     { margin: 0 0 8px; }
.ava-ai-result p:last-child { margin-bottom: 0; }
.ava-ai-result ul    { margin: 0 0 10px; padding-left: 22px; }
.ava-ai-result li    { margin: 0 0 3px; }
.ava-ai-result strong { font-weight: 600; }
.ava-ai-result em    { font-style: italic; }
.ava-ai-modal-foot {
  padding: 10px 16px; border-top: 1px solid #e5e7eb;
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  background: #fafbfc;
}
.ava-ai-stamm-row {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
  border: 1px solid transparent; margin-bottom: 6px;
}
.ava-ai-stamm-row:hover {
  background: #f3f4f6; border-color: #cbd5e1;
}

/* Conv-Reihen im KI-Chat: „…"-Button erst bei Hover sichtbar */
.cfa-conv-row:hover { background: rgba(99, 102, 241, .06); }
.cfa-conv-row:hover .cfa-conv-menu-btn { display: flex !important; }
.cfa-conv-menu-btn:hover { background: rgba(0, 0, 0, .07); }

/* ── Standalone-Chat-Modus (?mode=chat) ───────────────────
   Gleicher Inhalt wie Bubble-Drawer, aber vollflächig im eigenen Browser-Fenster.
   Alles außer dem Chat-Container wird ausgeblendet, Drawer = volles Viewport. */
body.chat-only {
  margin: 0;
  background: #fff;
  overflow: hidden;
}
body.chat-only > *:not(#chatfly):not(svg):not(script):not(style) {
  display: none !important;
}
body.chat-only #chatfly {
  position: static;
  width: 100%;
  height: 100vh;
}
body.chat-only #chatfly-bubble {
  display: none !important;
}
body.chat-only #chatfly-drawer {
  position: static !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column;
}
body.chat-only #chatfly-drawer[hidden] {
  display: flex !important;        /* hidden-Attribut überstimmen */
}
body.chat-only .chatfly-resize-edge-top,
body.chat-only .chatfly-resize-edge-left,
body.chat-only .chatfly-resize-corner {
  display: none !important;
}
body.chat-only .chatfly-body {
  flex: 1;
  min-height: 0;
}

/* KI-Chat: Datei-Anhänge — Pending im Compose + gesendete unter Messages */
.cfa-pending-attachments {
  padding: 6px 10px;
  background: #fafbfc;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cfa-att-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 99px;
  font-size: 11px;
  color: #374151;
  text-decoration: none;
  max-width: 240px;
}
.cfa-att-pill .cfa-att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.cfa-att-pill .cfa-att-size { color: #9ca3af; font-size: 10px; }
.cfa-att-pill button {
  background: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 0 2px;
  margin-left: 2px;
}
.cfa-att-pill button:hover { color: #b91c1c; }
.cfa-att-link:hover { background: #f3f4f6; border-color: #cbd5e1; }

/* Anhänge unter Message — Bilder als Thumbs */
.cfa-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}
.cfa-att-thumb {
  display: inline-block;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  width: 96px;
  height: 96px;
  background: #f3f4f6;
}
.cfa-att-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* KI-Chat: Aktions-Buttons unter Antworten */
.ai-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  background: #fff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.ai-action-btn:hover { background: #eef2ff; border-color: #6366f1; }
.ai-action-btn:disabled { cursor: default; }
.ai-action-btn[disabled] svg { animation: ai-spin 1s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Blinkender Cursor während KI streamt */
.ai-stream-cursor {
  display: inline-block;
  margin-left: 2px;
  color: #6366f1;
  font-weight: 600;
  animation: ai-cursor-blink 1s steps(2, start) infinite;
}
@keyframes ai-cursor-blink {
  to { visibility: hidden; }
}
.ai-prov-card:hover { border-color: var(--border-mid, #cbd5e1); }
.ai-prov-card.active {
  border-color: var(--primary, #4A90D9);
  background: rgba(74, 144, 217, 0.06);
}
.ai-prov-card.active::after {
  content: '✓';
  position: absolute; top: 8px; right: 10px;
  background: var(--primary, #4A90D9); color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.ai-prov-head { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.ai-prov-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: #fff; flex-shrink: 0;
}
.ai-prov-meta { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.ai-prov-models { font-size: 10px; color: var(--text3); margin-top: 4px; }

.ai-key-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface2, #f8fafc);
  border-radius: 8px;
  font-size: 13px;
}
.ai-key-row input { flex: 1; min-width: 0; }
.ai-key-row .ai-key-label { width: 100px; flex-shrink: 0; font-weight: 500; }
.ai-key-row code {
  background: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px;
  border: 1px solid var(--border);
  font-family: ui-monospace, monospace;
  color: var(--muted);
}

.ai-whitelist-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--surface2, #f8fafc);
  border-radius: 6px;
  font-size: 12px;
}
.ai-whitelist-row .url { flex: 1; font-family: ui-monospace, monospace; }
.ai-whitelist-row .x {
  cursor: pointer; color: var(--muted);
  background: transparent; border: 0; font-size: 16px; padding: 0 4px;
}
.ai-whitelist-row .x:hover { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════
   Layout-Toggle (Beta) — Classic ↔ Sidebar
   Body-Klasse wird von APP.applyLayoutMode() gesetzt.
   ═══════════════════════════════════════════════════════════════════ */

/* Beta-Layout ist Standard — Top-Nav ist die nav-beta. */
#topbar nav.nav-beta { display: flex; }

/* GF-Trenner (kleiner vertikaler Strich vor den GF-Items) */
.nav-gf-divider {
  display: inline-block;
  width: 1px; height: 20px;
  background: var(--border, #e5e7eb);
  margin: 0 8px;
  align-self: center;
}
#topbar .nav-gf {
  /* GF-Items optisch leicht abgesetzt — gleiche Buttons, aber etwas zurückhaltender */
  opacity: 0.85;
}
#topbar .nav-gf:hover,
#topbar .nav-gf.active { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   Beta-Layout · Projekt-Kacheln (renderProjectListBeta)
   ═══════════════════════════════════════════════════════════════════ */

.proj-tiles-sortbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #f9fafb); margin: -1px -1px 0;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
  font-size: 12px;
}
.proj-tiles-sortlabel { color: var(--muted, #6b7280); margin-right: 4px; }
.proj-tiles-sortbtn {
  padding: 4px 10px; background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; font-family: inherit; font-size: 12px; color: var(--muted, #6b7280);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.proj-tiles-sortbtn:hover { color: var(--text, #1f2937); border-color: var(--text3, #cbd5e1); }
.proj-tiles-sortbtn.active {
  background: var(--primary-light, #eef2ff); color: var(--primary, #4338ca);
  border-color: var(--primary-border, #c7d2fe); font-weight: 500;
}
.proj-tiles-sortdir {
  cursor: pointer; padding: 2px 8px; color: var(--primary, #4338ca);
  font-weight: 600; user-select: none; font-size: 14px;
}
.proj-tiles-sortdir:hover { background: var(--primary-light, #eef2ff); border-radius: 4px; }
.proj-tiles-count { margin-left: auto; color: var(--muted, #6b7280); font-size: 11px; }

.proj-tiles-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding: 16px 14px 22px;
}

.proj-tile {
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-left: 4px solid #6366f1; border-radius: 8px;
  padding: 12px 14px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex; flex-direction: column; gap: 6px;
}
.proj-tile:hover {
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.proj-tile.is-archived { opacity: 0.6; }

.proj-tile-row1 {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.proj-tile-num { font-weight: 600; }
.proj-tile-pill {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 500; line-height: 1.4;
  white-space: nowrap;
}
.proj-tile-pill-green { background: #EAF3DE; color: #3B6D11; }
.proj-tile-pill-blue  { background: #E6F1FB; color: #0C447C; }
.proj-tile-pill-amber { background: #FAEEDA; color: #854F0B; }
.proj-tile-pill-gray  { background: #F1EFE8; color: #444441; }

.proj-tile-name {
  font-size: 14px; font-weight: 600; color: var(--text, #1f2937);
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.proj-tile-sub {
  font-size: 12px; color: var(--text2, #374151);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-tile-meta {
  font-size: 11px; color: var(--muted, #6b7280);
}
.proj-tile-foot {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--border-soft, #f1f5f9);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.proj-tile-time { color: var(--muted, #6b7280); flex: 1; }
.proj-tile-fee  { color: var(--text, #1f2937); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   Projekte-Header · Animierter Scope-Toggle (Alle / Meine)
   Pattern wie ct-sort-toggle (Adressbuch).
   ═══════════════════════════════════════════════════════════════════ */
.proj-scope-toggle {
  display: flex; align-items: center;
  background: var(--surface, #f8fafc); border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 20px; padding: 3px; position: relative;
  cursor: pointer; user-select: none; flex-shrink: 0;
  margin-left: 12px;
}
.proj-scope-pill {
  position: absolute; top: 3px; left: 3px; height: 24px;
  border-radius: 14px; background: var(--primary, #4338ca);
  transition: transform .22s cubic-bezier(.4,0,.2,1), width .18s ease;
  z-index: 0;
}
.proj-scope-opt {
  position: relative; z-index: 1;
  padding: 0 14px; height: 24px; display: flex; align-items: center;
  font-size: 0.78rem; font-weight: 600; color: var(--text2, #374151);
  transition: color .18s; white-space: nowrap; border-radius: 14px;
}
.proj-scope-active { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   Beta-Layout · Projekt-Sidebar (links, fixiert, collapsible)
   Sichtbar nur wenn body.layout-beta-sidebar UND aside[data-show="1"]
   ═══════════════════════════════════════════════════════════════════ */
:root { --beta-side-w: 240px; --beta-side-w-collapsed: 56px; }

.beta-side {
  position: fixed; top: var(--header-h, 52px); left: 0; bottom: 0;
  width: var(--beta-side-w);
  background: #fff;
  border-right: 1px solid var(--border, #e5e7eb);
  z-index: 9; /* unter chat-bubble (≥10) und unter modals */
  display: none;
  flex-direction: column;
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
body.layout-beta-sidebar .beta-side[data-show="1"] { display: flex; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side { width: var(--beta-side-w-collapsed); }
body.layout-beta-sidebar .beta-side[data-show="1"] ~ #app {
  margin-left: var(--beta-side-w);
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
body.layout-beta-sidebar.beta-side-collapsed .beta-side[data-show="1"] ~ #app {
  margin-left: var(--beta-side-w-collapsed);
}

.beta-side-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 14px; gap: 8px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  background: #fafbfc; min-height: 38px;
}
.beta-side .back {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted, #6b7280);
  cursor: pointer; flex: 1; min-width: 0;
}
.beta-side .back:hover { color: var(--primary, #4338ca); }
.beta-side .back .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta-side .back .icon-collapsed { display: none; }
.beta-side .back .icon-expanded  { display: inline-block; flex-shrink: 0; }

.beta-side .toggle-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: 0; padding: 0; border-radius: 6px;
  cursor: pointer; color: var(--text3, #9ca3af); flex-shrink: 0;
  transition: background .15s, color .15s;
}
.beta-side .toggle-icon:hover { background: var(--border-soft, #f1f5f9); color: var(--text, #1f2937); }
.beta-side .toggle-icon svg { width: 16px; height: 16px; }
.beta-side .toggle-icon .icon-expand { display: none; }
.beta-side .toggle-icon .icon-collapse { display: inline-block; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .toggle-icon .icon-collapse { display: none; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .toggle-icon .icon-expand   { display: inline-block; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .toggle-icon { color: var(--primary, #4338ca); }

/* Eingeklappt: Top-Bar vertikal stapeln, beide Icons zentriert */
body.layout-beta-sidebar.beta-side-collapsed .beta-side-top {
  flex-direction: column; padding: 8px 0; gap: 6px; align-items: center;
}
body.layout-beta-sidebar.beta-side-collapsed .beta-side .back { flex: 0 0 auto; justify-content: center; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .back .label { display: none; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .back .icon-expanded { display: none; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .back .icon-collapsed { display: inline-block; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .back svg.icon-collapsed { width: 22px; height: 22px; }

.beta-side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }

.beta-side .proj-card {
  margin: 10px 10px 6px;
  padding: 12px 14px 10px;
  border-left: 3px solid #6366f1;
  background: #fafbfc; border-radius: 0 6px 6px 0;
}
.beta-side .proj-card .meta { font-size: 10px; color: var(--text3, #9ca3af); }
.beta-side .proj-card .name { font-size: 13px; font-weight: 600; margin: 2px 0 4px; color: var(--text, #1f2937); }
.beta-side .proj-card .sub  { font-size: 11px; color: var(--muted, #6b7280); }

.beta-side .proj-nav { padding: 4px 0 12px; }
.beta-side .proj-nav .h {
  padding: 12px 14px 4px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text3, #9ca3af);
}
.beta-side .proj-nav .item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 12px; color: var(--text2, #374151);
  cursor: pointer;
}
.beta-side .proj-nav .item:hover:not(.active):not(.is-stub) { background: var(--border-soft, #f1f5f9); }
.beta-side .proj-nav .item.active {
  background: var(--primary-light, #eef2ff); color: var(--primary, #4338ca);
  border-left: 2px solid var(--primary, #4338ca); padding-left: 12px; font-weight: 500;
}
.beta-side .proj-nav .item.is-stub { opacity: 0.55; cursor: pointer; }
.beta-side .proj-nav .item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Eingeklappt: Card + Nav-Texte verstecken, Icons zentrieren */
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-card,
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-nav .h,
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-nav .item span { display: none; }
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-nav .item {
  justify-content: center; padding: 8px 0; border-left: 0;
}
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-nav .item.active {
  background: var(--primary-light, #eef2ff); padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   AVA-Subnav · Projekt-Dropdown im Beta-Mode
   - Classic: Back-Pfeil sichtbar, Down-Caret versteckt → klassisches Verhalten
   - Beta: Back-Pfeil versteckt, Down-Caret sichtbar → Klick öffnet Dropdown
   ═══════════════════════════════════════════════════════════════════ */
.ava-back-wrap { position: relative; display: inline-flex; }
.ava-back-btn { display: inline-flex; align-items: center; gap: 6px; }
.ava-back-arrow { display: inline-block; }
.ava-back-caret { display: none; }
body.layout-beta-sidebar .ava-back-arrow { display: none; }
body.layout-beta-sidebar .ava-back-caret { display: inline-block; opacity: .6; transition: opacity .15s; }
body.layout-beta-sidebar .ava-back-btn:hover .ava-back-caret { opacity: 1; }

.ava-proj-dd {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 320px; max-width: 460px; max-height: 60vh;
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  overflow-y: auto; padding: 4px;
  z-index: 50;
  font-size: 13px;
}
.ava-proj-dd[hidden] { display: none; }
.ava-proj-dd-back {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  color: var(--muted, #6b7280); font-size: 12px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  margin-bottom: 4px;
}
.ava-proj-dd-back:hover { background: var(--border-soft, #f1f5f9); color: var(--text, #1f2937); }
.ava-proj-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
}
.ava-proj-dd-item:hover { background: var(--border-soft, #f1f5f9); }
.ava-proj-dd-item.active {
  background: var(--primary-light, #eef2ff); color: var(--primary, #4338ca); font-weight: 500;
}
.ava-proj-dd-item .num {
  font-variant-numeric: tabular-nums; color: var(--muted, #6b7280);
  min-width: 70px; font-size: 11px; flex-shrink: 0;
}
.ava-proj-dd-item.active .num { color: var(--primary, #4338ca); }
.ava-proj-dd-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava-proj-dd-item.is-archived { opacity: 0.55; }
.ava-proj-dd-sep {
  padding: 10px 12px 4px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text3, #9ca3af);
  border-top: 1px solid var(--border-soft, #f1f5f9); margin-top: 6px;
}
.ava-proj-dd-empty {
  padding: 16px; text-align: center; color: var(--muted, #6b7280); font-size: 12px;
}

/* Beta-Sidebar Resize-Handle (rechte Kante, 6 px breiter Hot-Spot, 1 px Linie sichtbar) */
.beta-side-resize {
  position: absolute; top: 0; right: -3px; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 11;
  display: flex; align-items: stretch;
}
.beta-side-resize::before {
  content: ''; width: 1px; background: var(--border, #e5e7eb);
  margin-left: 2px; transition: background .14s, width .14s;
}
.beta-side-resize:hover::before,
.beta-side-resize-active::before {
  background: var(--primary, #4338ca); width: 2px; margin-left: 1.5px;
}
body.layout-beta-sidebar.beta-side-collapsed .beta-side-resize { display: none; }

/* Subtiler Grip-Hint am Resize-Handle: 3 vertikale Punkte mittig, immer
   leicht sichtbar, beim Hover deutlicher — kommuniziert Drag-Affordance. */
.beta-side-resize::after {
  content: ''; position: absolute;
  top: 50%; left: 1px;
  transform: translateY(-50%);
  width: 4px; height: 22px;
  background-image: radial-gradient(circle, var(--text3, #9ca3af) 1px, transparent 1px);
  background-size: 4px 6px;
  background-repeat: repeat-y;
  opacity: 0.45;
  transition: opacity .15s;
  pointer-events: none;
}
.beta-side-resize:hover::after,
.beta-side-resize-active::after { opacity: 0.95; }

/* Beta-Sidebar: Project-Card Pills + Bauleitung-Foot */
.beta-side .proj-card .pills {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px;
}
.beta-side .proj-card .pills .proj-tile-pill {
  font-size: 10px; padding: 1px 8px;
}

.beta-side .proj-nav-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-soft, #f1f5f9);
}
.beta-side .proj-nav-bauleitung {
  text-decoration: none; color: inherit;
}

/* Eingeklappt: Pills weg, Bauleitung-Text weg */
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-nav-foot {
  border-top: 1px solid var(--border-soft, #f1f5f9); margin-top: 6px; padding-top: 6px;
}

/* Beta-Sidebar: Card-Erweiterungen (Adresse, Zeit, Edit-Stift) */
.beta-side .proj-card { position: relative; }
.beta-side .proj-card .addr,
.beta-side .proj-card .time {
  font-size: 11px; color: var(--muted, #6b7280); margin-top: 2px;
}
.beta-side .proj-card .time {
  font-variant-numeric: tabular-nums;
}
.beta-side .proj-card-edit {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  background: transparent; border: 0; padding: 0; border-radius: 4px;
  cursor: pointer; color: var(--text3, #9ca3af);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, opacity .15s;
  opacity: 0;
}
.beta-side .proj-card:hover .proj-card-edit { opacity: 1; }
.beta-side .proj-card-edit:hover { background: var(--border-soft, #f1f5f9); color: var(--primary, #4338ca); }

/* Beta-Sidebar: Beteiligte-Avatare */
.beta-side-members {
  padding: 6px 14px 4px;
}
.beta-side-members .h {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text3, #9ca3af); margin-bottom: 6px;
}
.beta-side-members .ava-row {
  display: flex; gap: -6px; flex-wrap: wrap;
}
.beta-side-members .ava {
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  border: 2px solid #fff;
  margin-right: -6px;
  cursor: default;
  transition: transform .15s;
}
.beta-side-members .ava:hover { transform: scale(1.08); z-index: 2; }
.beta-side-members .ava.is-manager {
  background: linear-gradient(135deg, var(--primary, #4338ca), #7c3aed);
}
.beta-side-members .ava.ava-more {
  background: var(--surface, #f8fafc); color: var(--muted, #6b7280);
  border: 2px solid var(--border, #e5e7eb);
}

/* Eingeklappt: Beteiligte verstecken (Card auch bereits weg laut bestehender Regel) */
body.layout-beta-sidebar.beta-side-collapsed .beta-side-members { display: none !important; }

/* Honorar · Projekt-Filter-Banner */
.ang-proj-filter {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--primary-light, #eef2ff);
  color: var(--primary, #4338ca);
  border: 1px solid var(--primary-border, #c7d2fe);
  border-radius: 8px;
  font-size: 13px;
}
.ang-proj-filter-icon { display: flex; align-items: center; opacity: 0.85; }
.ang-proj-filter-text { flex: 1; line-height: 1.3; }
.ang-proj-filter-text strong { font-variant-numeric: tabular-nums; }
.ang-proj-filter-x {
  background: transparent; border: 0; padding: 4px 6px;
  cursor: pointer; color: inherit; opacity: 0.7;
  border-radius: 4px; display: flex; align-items: center;
  transition: opacity .15s, background .15s;
}
.ang-proj-filter-x:hover { opacity: 1; background: rgba(255,255,255,0.6); }

/* Projekt-Kacheln · Tage-Pille (zwischen Nr. und Status-Pille in row1) */
.proj-tile-days {
  font-size: 10px; padding: 1px 7px; border-radius: 99px;
  font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--surface, #f8fafc); color: var(--muted, #6b7280);
  border: 1px solid var(--border-soft, #f1f5f9);
  white-space: nowrap;
}
.proj-tile-days.is-future  { background: #E6F1FB; color: #0C447C; border-color: transparent; }
.proj-tile-days.is-near    { background: #FAEEDA; color: #854F0B; border-color: transparent; }
.proj-tile-days.is-overdue { background: #FCEBEB; color: #A32D2D; border-color: transparent; }

/* Beta-Sidebar · Cost-Bar in der Project-Card (3 Segmente: abgerechnet / vergeben / frei) */
.beta-side .proj-card .proj-card-costbar {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-soft, #f1f5f9);
}
.proj-card-costbar-head {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500; color: var(--text2, #374151);
  margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.proj-card-costbar-head .muted { color: var(--text3, #9ca3af); }
.proj-card-costbar-rail {
  display: flex; height: 6px;
  border-radius: 3px; overflow: hidden;
  background: var(--border, #e5e7eb);
}
.proj-card-costbar-rail .seg { height: 100%; transition: width .25s; }
.proj-card-costbar-rail .seg-abr { background: #3B6D11; }     /* abgerechnet (dunkelgrün) */
.proj-card-costbar-rail .seg-ver { background: #c7d2fe; }     /* vergeben aber nicht abgerechnet (hellblau) */
.proj-card-costbar-rail .seg-fre { background: transparent; } /* frei (Grundfarbe sichtbar) */

/* Eingeklappt: Cost-Bar weg (Card eh ausgeblendet) */
body.layout-beta-sidebar.beta-side-collapsed .proj-card-costbar { display: none; }

/* Beta-Sidebar · Member-Popover (Klick auf Avatar) */
.beta-member-popover {
  position: fixed; z-index: 200;
  min-width: 240px; max-width: 320px;
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
  padding: 12px 14px;
  font-size: 13px; line-height: 1.4;
}
.beta-member-popover[hidden] { display: none; }
.beta-member-popover .bmp-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.beta-member-popover .bmp-ava {
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}
.beta-member-popover .bmp-ava.is-manager {
  background: linear-gradient(135deg, var(--primary, #4338ca), #7c3aed);
}
.beta-member-popover .bmp-name-block { flex: 1; min-width: 0; }
.beta-member-popover .bmp-name { font-size: 14px; font-weight: 600; color: var(--text, #1f2937); }
.beta-member-popover .bmp-tag {
  font-size: 10px; color: var(--primary, #4338ca);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}
.beta-member-popover .bmp-x {
  width: 24px; height: 24px;
  background: transparent; border: 0; padding: 0; border-radius: 4px;
  cursor: pointer; color: var(--text3, #9ca3af);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.beta-member-popover .bmp-x:hover { background: var(--border-soft, #f1f5f9); color: var(--text, #1f2937); }
.beta-member-popover .bmp-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 3px 0;
}
.beta-member-popover .bmp-lbl {
  width: 60px; flex-shrink: 0;
  font-size: 11px; color: var(--text3, #9ca3af);
  text-transform: uppercase; letter-spacing: .04em;
}
.beta-member-popover .bmp-row a {
  color: var(--primary, #4338ca); text-decoration: none;
  word-break: break-all;
}
.beta-member-popover .bmp-row a:hover { text-decoration: underline; }

/* Aufgaben-Bereich (page-aufgaben) */

/* ── Edge-to-edge Seitenlayout ─── */
#page-aufgaben.active {
  display: flex;
  flex-direction: column;
  margin: -24px;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
.aufg-page-wrap {
  display: flex;
  flex: 1;
  overflow: hidden;
}
/* Projektspezifische Ansicht: aufg-Sidebar ausblenden */
.aufg-page-wrap.aufg-no-sidebar .aufg-sidebar { display: none; }

/* ── Projekt/Mitarbeiter-Sidebar (links) ── */
.aufg-sidebar {
  width: 200px; min-width: 140px; max-width: 320px;
  flex-shrink: 0; position: relative;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden; user-select: none;
}
.aufg-sb-scroll {
  flex: 1; overflow-y: auto; padding-bottom: 8px;
}
.aufg-sb-section {
  padding: 11px 14px 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.aufg-sb-divider {
  height: 1px; background: var(--border); margin: 6px 0;
}
.aufg-sb-item {
  display: flex; align-items: center; gap: 0;
  padding: 6px 14px; cursor: pointer;
  font-size: 12px; color: var(--text);
  border-left: 2px solid transparent;
  transition: background .1s;
}
.aufg-sb-item:hover { background: var(--surface2); }
.aufg-sb-item.active {
  background: #eff6ff; color: #2563eb;
  border-left-color: #2563eb; font-weight: 500;
}
.aufg-sb-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aufg-sb-badge {
  flex-shrink: 0;
  font-size: 10px; font-variant-numeric: tabular-nums;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 0 6px; color: var(--muted);
}
.aufg-sb-item.active .aufg-sb-badge {
  background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8;
}
.aufg-sb-avatar {
  flex-shrink: 0; width: 20px; height: 20px;
  border-radius: 50%; background: #e0e7ff; color: #4338ca;
  font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-right: 8px;
}
.aufg-sb-item.active .aufg-sb-avatar { background: #dbeafe; color: #1d4ed8; }
/* Einträge ohne Aufgaben (gedimmt) */
.aufg-sb-item--dim { opacity: .45; }
.aufg-sb-item--dim:hover { opacity: .7; }
/* Topbar mit Filter-Toggle */
.aufg-sb-topbar {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.aufg-sb-filter-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; padding: 3px 9px;
  border-radius: 20px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.aufg-sb-filter-toggle:hover { background: var(--surface2); }
.aufg-sb-filter-toggle.active {
  background: #eff6ff; color: #2563eb; border-color: #bfdbfe;
}
/* Resize-Handle */
.aufg-sb-resizer {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 4px; cursor: ew-resize; z-index: 10;
  transition: background .15s;
}
.aufg-sb-resizer:hover, .aufg-sb-resizer.resizing { background: var(--primary); opacity: .5; }

/* Detail-Flyover (rechts) */
.aufg-detail-pane {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  border-left: 1px solid var(--border, #e5e7eb);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.aufg-detail-pane--open {
  width: 320px;
}
.aufg-detail-pane--resizing {
  transition: none;
  user-select: none;
}
/* Resize-Handle am linken Rand */
.aufg-det-resizer {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
.aufg-det-resizer:hover,
.aufg-detail-pane--resizing .aufg-det-resizer {
  background: var(--primary, #4A90D9);
  opacity: .35;
}
.aufg-det-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  flex-shrink: 0;
  min-width: 320px;
}
.aufg-det-badge {
  font-size: 11px; font-weight: 600;
  background: var(--primary-light, #eef2ff);
  color: var(--primary, #4338ca);
  border: 1px solid var(--primary-border, #c7d2fe);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}
.aufg-det-close {
  margin-left: auto;
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--muted, #6b7280); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.aufg-det-close:hover { background: var(--surface, #f8fafc); color: var(--text, #1f2937); }
.aufg-det-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 320px;
}
.aufg-det-field { margin-bottom: 16px; }
.aufg-det-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted, #6b7280);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}
.aufg-det-value {
  font-size: 13px; color: var(--text, #1f2937);
  line-height: 1.5;
}
.aufg-det-title {
  font-size: 15px; font-weight: 600;
  color: var(--text, #1f2937);
  line-height: 1.4;
  margin-bottom: 16px;
  min-width: 320px;
}
.aufg-det-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft, #f1f5f9);
  flex-shrink: 0;
  min-width: 320px;
}
.aufg-det-btn {
  display: block; width: 100%;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.aufg-det-btn-primary {
  background: #2563eb; color: #fff;
}
.aufg-det-btn-primary:hover { background: #1d4ed8; }
.aufg-det-btn-secondary {
  background: var(--surface, #f8fafc);
  color: var(--text, #1f2937);
  border: 1px solid var(--border, #e5e7eb);
  margin-top: 8px;
}
.aufg-det-btn-secondary:hover { background: var(--border-soft, #f1f5f9); }
.aufg-det-btn-danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  margin-top: 8px;
}
.aufg-det-btn-danger:hover { background: #fee2e2; }

/* TOP-Textblock aus Protokoll */
.aufg-det-top-text {
  font-size: 12px; line-height: 1.65; color: var(--text, #1f2937);
  background: var(--surface2, #f8fafc);
  border: 1px solid var(--border-soft, #f1f5f9);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  min-width: 288px;
  word-break: break-word;
}
.aufg-det-top-text p { margin: 0 0 6px }
.aufg-det-top-text p:last-child { margin-bottom: 0 }

/* Foto-Grid im Detail-Panel */
.aufg-det-photos {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; min-width: 288px;
}
.aufg-det-photo {
  width: 80px; height: 60px;
  border-radius: 5px; overflow: hidden;
  border: 1px solid var(--border-soft, #f1f5f9);
  cursor: pointer;
  flex-shrink: 0;
}
.aufg-det-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Haupt bereich (rechts) */
.aufg-page-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.aufg-page-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.aufg-page-list {
  flex: 1;
  overflow-y: auto;
}

.aufg-filters {
  display: flex; gap: 4px; flex-shrink: 0;
}
.aufg-filter {
  padding: 5px 11px; background: transparent;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  font-family: inherit; font-size: 12px; color: var(--muted, #6b7280);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.aufg-filter:hover { color: var(--text, #1f2937); border-color: var(--text3, #cbd5e1); }
.aufg-filter.active {
  background: var(--primary-light, #eef2ff);
  color: var(--primary, #4338ca);
  border-color: var(--primary-border, #c7d2fe);
  font-weight: 500;
}
.aufg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--border-soft, #f1f5f9);
  cursor: pointer; transition: background .12s;
  border-radius: 0;
}
.aufg-row:hover { background: var(--surface, #f8fafc); }
.aufg-row--active { background: #eff6ff !important; }
.aufg-row:last-child { border-bottom: 0; }
.aufg-text { flex: 1; min-width: 0; }
.aufg-title { font-size: 13px; font-weight: 500; color: var(--text, #1f2937); }
.aufg-sub { font-size: 11px; color: var(--muted, #6b7280); margin-top: 2px; }
.aufg-meta { font-size: 11px; color: var(--muted, #6b7280); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.aufg-meta.cp-pend-meta-overdue { color: #A32D2D; font-weight: 600; }
.aufg-meta.cp-pend-meta-today { color: #854F0B; font-weight: 600; }
/* Bearbeiten-Bleistift in Aufgaben-Zeile */
.aufg-row-edit {
  opacity: 0; flex-shrink: 0; margin-left: 4px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 5px; cursor: pointer;
  color: var(--muted, #6b7280); transition: opacity .15s, background .15s, color .15s;
}
.aufg-row:hover .aufg-row-edit { opacity: 1; }
.aufg-row-edit:hover { background: #eff6ff; color: #2563eb; }

/* ── Aufgaben: Neue-Aufgabe-Button ────────────────────────── */
.aufg-add-btn {
  display: flex; align-items: center; gap: 5px;
  margin-left: 12px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: #2563eb; color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s;
}
.aufg-add-btn:hover { background: #1d4ed8; }

/* ── Aufgaben-Popover (Interne Aufgabe) ───────────────────── */
.aufg-popover {
  position: fixed; z-index: 1100;
  width: 420px;
  background: #fff;
  border: 1px solid var(--border-mid, #cbd5e1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.aufg-popover.aufg-popover--open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Header */
.aufg-pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
/* Intern / Gewerke Toggle */
.aufg-type-toggle {
  display: flex; align-items: center;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 2px; gap: 1px;
}
.aufg-type-btn {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 4px;
  border: none; background: transparent; color: #64748b; cursor: pointer;
  transition: background .15s, color .15s;
}
.aufg-type-btn.active {
  background: #fff; color: #2563eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.aufg-pop-title { flex: 1; font-size: 13px; font-weight: 700; color: #111827; }
.aufg-pop-close {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px;
  color: #9ca3af; cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  transition: background .15s, color .15s;
}
.aufg-pop-close:hover { background: #f3f4f6; color: #374151; }
/* Body */
.aufg-pop-body {
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 13px;
  overflow-y: auto; max-height: calc(100vh - 220px);
}
.aufg-pop-section { display: flex; flex-direction: column; gap: 6px; }
.aufg-pop-label {
  font-size: 10px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .06em;
}
/* Textarea */
.aufg-pop-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--border-mid, #cbd5e1); border-radius: 8px;
  padding: 8px 11px;
  font-size: 13px; font-family: inherit; color: #111827; line-height: 1.5;
  min-height: 70px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.aufg-pop-textarea:focus {
  border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.aufg-pop-textarea::placeholder { color: #9ca3af; }
/* Select / input */
.aufg-pop-select {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; border: 1px solid var(--border-mid, #cbd5e1); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: #1f2937; background: #fff;
  outline: none; transition: border-color .15s;
}
.aufg-pop-select:focus { border-color: #2563eb; }
/* Date chips */
.aufg-chip {
  padding: 3px 11px; font-size: 12px; font-family: inherit;
  border: 1px solid #d1d5db; border-radius: 20px;
  background: #f9fafb; color: #374151; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.aufg-chip:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.aufg-chip.active { border-color: #2563eb; background: #2563eb; color: #fff; }
.aufg-pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aufg-pop-date-input {
  margin-top: 4px; width: 100%; box-sizing: border-box;
  padding: 7px 10px; border: 1px solid var(--border-mid, #cbd5e1); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: #1f2937;
  outline: none; transition: border-color .15s;
}
.aufg-pop-date-input:focus { border-color: #2563eb; }
/* Error */
.aufg-pop-err { color: #dc2626; font-size: 11px; }
/* Footer */
.aufg-pop-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.aufg-pop-btn-cancel {
  padding: 6px 14px; font-size: 12px; font-family: inherit;
  border: 1px solid #d1d5db; border-radius: 7px;
  background: transparent; color: #6b7280; cursor: pointer;
  transition: background .15s;
}
.aufg-pop-btn-cancel:hover { background: #f9fafb; }
.aufg-pop-btn-save {
  padding: 6px 16px; font-size: 12px; font-weight: 600; font-family: inherit;
  border: none; border-radius: 7px;
  background: #2563eb; color: #fff; cursor: pointer;
  transition: background .15s;
}
.aufg-pop-btn-save:hover:not([disabled]) { background: #1d4ed8; }
.aufg-pop-btn-save[disabled] { opacity: .6; cursor: not-allowed; }

/* Standalone-Task-Tag in der Aufgabenliste */
.aufg-source-tag {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 4px; background: #e0f2fe; color: #0369a1;
  margin-left: 6px; vertical-align: middle; font-weight: 500;
}

/* Projekte-Seite (page-projects) */
#page-projects.active {
  margin: -24px;
  overflow-y: auto;
}
#page-projects > .card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

/* Projekt-Übersicht (Beta · page-projektoverview) */
#page-projektoverview.active {
  margin: -24px;
  overflow-y: auto;
}
#page-projektoverview > .card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.pov-kpis {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pov-kpi {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pov-kpi:hover {
  border-color: var(--primary-border, #c7d2fe);
  box-shadow: 0 4px 10px rgba(15,23,42,.06);
  transform: translateY(-1px);
}
.pov-kpi.is-warn {
  border-color: #f3c879;
  background: #FEF7E7;
}
.pov-kpi.is-crit {
  border-color: #f3a3a3;
  background: #FEF1F1;
}
.pov-kpi-lbl {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text3, #9ca3af);
  margin-bottom: 6px;
}
.pov-kpi-val {
  font-size: 22px; font-weight: 700;
  color: var(--text, #1f2937);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pov-kpi-sub {
  font-size: 11px; color: var(--muted, #6b7280);
  margin-top: 4px;
}

.pov-cols {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pov-box {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
}
.pov-box-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 10px;
  font-size: 13px; font-weight: 600;
  color: var(--text, #1f2937);
}
.pov-more {
  font-size: 11px; font-weight: 500;
  color: var(--primary, #4338ca);
  text-decoration: none;
}
.pov-more:hover { text-decoration: underline; }
.pov-empty {
  padding: 14px 0;
  color: var(--muted, #6b7280); font-size: 12px; font-style: italic;
}

/* Sidebar-Item Badge (offene Aufgaben etc.) */
.beta-side .proj-nav .item .proj-nav-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: var(--surface, #f8fafc); color: var(--text2, #374151);
  border-radius: 99px;
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-soft, #f1f5f9);
}
.beta-side .proj-nav .item.active .proj-nav-badge {
  background: var(--primary, #4338ca); color: #fff; border-color: transparent;
}
.beta-side .proj-nav .item .proj-nav-badge.is-crit {
  background: #FCEBEB; color: #A32D2D; border-color: transparent;
}
.beta-side .proj-nav .item .proj-nav-badge.is-warn {
  background: #FAEEDA; color: #854F0B; border-color: transparent;
}
/* Eingeklappt: Badges ebenfalls verstecken (Spans sind eh weg) */
body.layout-beta-sidebar.beta-side-collapsed .beta-side .proj-nav-badge { display: none; }

/* Übersicht · Quick-Actions im Header */
.pov-quick-actions {
  display: flex; gap: 6px;
}
.pov-qa-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  font-family: inherit; font-size: 12px; color: var(--text, #1f2937);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pov-qa-btn:hover {
  background: var(--primary-light, #eef2ff);
  color: var(--primary, #4338ca);
  border-color: var(--primary-border, #c7d2fe);
}
.pov-qa-btn svg { opacity: 0.85; }

/* Liste · View-Toggle aktive Optik */
.proj-view-btn:hover { background: var(--surface, #f8fafc) !important; }

/* Projekt-Kacheln · Sortier-Dropdown (statt Buttons) */
.proj-tiles-sortbar .proj-tiles-sortsel {
  padding: 4px 24px 4px 10px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-family: inherit; font-size: 12px;
  color: var(--text, #1f2937);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
}
.proj-tiles-sortbar .proj-tiles-sortsel:hover { border-color: var(--text3, #cbd5e1); }
.proj-tiles-sortbar .proj-tiles-sortsel:focus { outline: none; border-color: var(--primary, #4338ca); }

/* Projekt-Kacheln · Mockup-Stil-Anpassungen */

/* Daten-Zeile im Body (Honorar etc.) */
.proj-tile-data {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px;
  padding-top: 2px;
}
.proj-tile-data .lbl {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3, #9ca3af);
  min-width: 56px;
}
.proj-tile-data .val {
  color: var(--text, #1f2937);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-left: auto;
}
.proj-tile-data .val .muted { color: var(--text3, #9ca3af); font-weight: 400; font-style: italic; }

/* Foot-Layout neu: Avatar + PL-Name links · Termin-Pille rechts */
.proj-tile-foot {
  margin-top: auto !important;
  padding: 8px 10px !important;
  border-top: 1px solid var(--border-soft, #f1f5f9);
  background: #fafbfc;
  margin-left: -14px; margin-right: -14px; margin-bottom: -12px;
  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  border-top-color: var(--border-soft, #f1f5f9) !important;
}
.proj-tile-foot .proj-tile-time { display: none; } /* alte Zeit-Range nicht mehr im Foot */
.proj-tile-foot .proj-tile-fee { display: none; }  /* alte Honorar-Anzeige nicht mehr im Foot */
.proj-tile-pl-ava {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.proj-tile-pl-name {
  color: var(--text, #1f2937); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-tile-pl-name.muted { color: var(--text3, #9ca3af); font-style: italic; font-weight: 400; }
.proj-tile-foot .proj-tile-days { margin-left: auto; }

/* Projekt-Kachel: Indikator für überfällige Aufgaben (im row1) */
.proj-tile-overdue {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; border-radius: 99px;
  background: #FCEBEB; color: #A32D2D;
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid transparent;
  animation: proj-tile-overdue-pulse 2.4s ease-out 0.6s 1;
}
.proj-tile-overdue svg { flex-shrink: 0; }
@keyframes proj-tile-overdue-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(163, 45, 45, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(163, 45, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(163, 45, 45, 0); }
}

/* Honorar-Bar in Projekt-Kachel */
.proj-tile-data .proj-tile-data-pct {
  margin-left: 6px; font-size: 10px; color: var(--text3, #9ca3af);
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.proj-tile-bar {
  height: 4px; border-radius: 99px;
  background: var(--border-soft, #f1f5f9);
  overflow: hidden; margin-top: 3px;
}
.proj-tile-bar > div {
  height: 100%; background: var(--primary, #4338ca);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.proj-tile-bar.is-green > div { background: #639922; }
.proj-tile-bar.is-warn > div  { background: #EF9F27; }
.proj-tile-bar.is-crit > div  { background: #E24B4A; }

/* Übersicht · Aktivitäten-Timeline */
.pov-tl { display: flex; flex-direction: column; }
.pov-tl-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  font-size: 12px;
}
.pov-tl-item:last-child { border-bottom: 0; }
.pov-tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px; flex-shrink: 0;
}
.pov-tl-dot-b { background: var(--primary, #4338ca); }
.pov-tl-dot-g { background: #639922; }
.pov-tl-dot-a { background: #BA7517; }
.pov-tl-dot-r { background: #E24B4A; }
.pov-tl-body { flex: 1; min-width: 0; }
.pov-tl-text { color: var(--text, #1f2937); line-height: 1.35; }
.pov-tl-sub { font-size: 11px; color: var(--muted, #6b7280); margin-top: 1px; font-variant-numeric: tabular-nums; }
.pov-tl-when {
  font-size: 11px; color: var(--text3, #9ca3af);
  white-space: nowrap; flex-shrink: 0;
}

/* Übersicht · Milestones */
.pov-ms { display: flex; flex-direction: column; gap: 6px; }
.pov-ms-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--surface, #f8fafc);
  border-left: 3px solid var(--border, #e5e7eb);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
}
.pov-ms-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text3, #9ca3af);
  flex-shrink: 0;
}
.pov-ms-lbl {
  flex: 1; min-width: 0;
  color: var(--text, #1f2937);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pov-ms-when {
  font-size: 11px; color: var(--text3, #9ca3af);
  white-space: nowrap; flex-shrink: 0;
}
.pov-ms-item.done {
  border-left-color: #639922; opacity: .6;
}
.pov-ms-item.done .pov-ms-dot { background: #639922; }
.pov-ms-item.today {
  border-left-color: var(--primary, #4338ca);
  background: var(--primary-light, #eef2ff);
}
.pov-ms-item.today .pov-ms-dot { background: var(--primary, #4338ca); }
.pov-ms-item.today .pov-ms-when { color: var(--primary, #4338ca); font-weight: 600; }
.pov-ms-item.crit {
  border-left-color: #E24B4A;
  background: #FEF1F1;
}
.pov-ms-item.crit .pov-ms-dot { background: #E24B4A; }
.pov-ms-item.crit .pov-ms-when { color: #A32D2D; font-weight: 600; }

/* ── Projekt-Übersicht · Mini-Bauzeitenplan ──────────────────────────── */
.pov-bzp-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.pov-bzp-toggle {
  display: flex; gap: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px; overflow: hidden;
}
.pov-bzp-btn {
  background: none; border: none; cursor: pointer;
  padding: 3px 12px; font-size: 12px; font-weight: 500;
  color: var(--muted, #6b7280);
  transition: background 0.15s, color 0.15s;
}
.pov-bzp-btn.active {
  background: var(--primary, #4338ca);
  color: #fff;
}
.pov-bzp-inner {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.pov-bzp-hdr-row {
  display: flex; align-items: flex-end; margin-bottom: 4px;
}
.pov-bzp-hdr-track {
  position: relative; height: 28px;
}
.pov-bzp-hdr-tick {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; transform: translateX(-50%);
  gap: 1px;
}
.pov-bzp-hdr-wd {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  color: var(--muted, #9ca3af); letter-spacing: 0.03em;
}
.pov-bzp-hdr-wd.today { color: var(--primary, #4338ca); }
.pov-bzp-hdr-date {
  font-size: 10px; color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.pov-bzp-hdr-date.today { color: var(--primary, #4338ca); font-weight: 600; }
.pov-bzp-row {
  display: flex; align-items: center; gap: 0; height: 26px;
}
.pov-bzp-lbl {
  width: 140px; min-width: 140px; max-width: 140px;
  font-size: 12px; color: var(--text, #374151);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 10px; flex-shrink: 0;
}
.pov-bzp-track {
  flex: 1; position: relative; height: 18px;
  background: var(--bg-alt, #f3f4f6);
  border-radius: 4px; overflow: visible;
}
.pov-bzp-bar {
  position: absolute; top: 0; height: 100%;
  min-width: 4px;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 5px;
  font-size: 10px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0.88;
  transition: opacity 0.15s;
}
.pov-bzp-bar:hover { opacity: 1; }
.pov-bzp-bar-lbl {
  font-size: 10px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  pointer-events: none;
}
.pov-bzp-milestone-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  z-index: 3; pointer-events: none;
}
.pov-bzp-ms-diamond {
  width: 10px; height: 10px;
  transform: rotate(45deg);
  border-radius: 2px;
  flex-shrink: 0;
}
.pov-bzp-ms-label {
  font-size: 9px; font-weight: 600;
  color: var(--text, #374151);
  white-space: nowrap;
  background: rgba(255,255,255,.85);
  padding: 0 3px; border-radius: 2px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.pov-bzp-lbl-cont {
  /* Folgezeilen einer Gruppe: dezenter linker Strich, kein Margin (würde Track verschieben) */
  border-left: 2px solid var(--border, #e5e7eb);
}
.pov-bzp-ms {
  font-size: 9px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pov-bzp-today {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--primary, #4338ca); opacity: 0.6;
  border-radius: 1px; pointer-events: none; z-index: 2;
  transform: translateX(-50%);
}
.pov-task-list { display: flex; flex-direction: column; gap: 0; }
.pov-task-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border, #f3f4f6);
}
.pov-task-item:last-child { border-bottom: none; }
.pov-task-overdue { color: #A32D2D !important; font-weight: 600; }
.pov-task-done { opacity: 0.45; }
.pov-task-done .pov-tl-text { text-decoration: line-through; }
.pov-task-done-btn {
  flex-shrink: 0; margin-left: 6px;
  background: none; border: 1px solid var(--border, #d1d5db);
  border-radius: 20px; padding: 2px 9px;
  font-size: 11px; font-weight: 500; color: var(--muted, #6b7280);
  cursor: pointer; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.pov-task-item:hover .pov-task-done-btn { opacity: 1; }
.pov-task-done-btn:hover {
  background: #639922; border-color: #639922; color: #fff;
}

.pov-bzp-sep {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted, #9ca3af);
}
.pov-bzp-sep::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border, #e5e7eb);
}

/* Projekt-Kachel · Kosten-Indikator (▲▼ Pille mit Status) */
.proj-tile-cost-ind {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 5px;
}
.proj-tile-cost-ind svg { width: 9px; height: 9px; }
.proj-tile-cost-ind.is-flat  { background: #F1EFE8; color: #444441; }
.proj-tile-cost-ind.is-under { background: #EAF3DE; color: #3B6D11; }
.proj-tile-cost-ind.is-tight { background: #FAEEDA; color: #854F0B; }
.proj-tile-cost-ind.is-over  { background: #FCEBEB; color: #A32D2D; }

/* Verlauf-Bereich (page-verlauf) — größere Activity-Timeline */
.verl-tl { display: flex; flex-direction: column; }
.verl-tl-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.verl-tl-item:last-child { border-bottom: 0; }
.verl-tl-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
}
.verl-tl-body { flex: 1; min-width: 0; }
.verl-tl-title {
  font-size: 13px; font-weight: 500; color: var(--text, #1f2937);
  line-height: 1.35;
}
.verl-tl-sub {
  font-size: 11px; color: var(--muted, #6b7280);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.verl-tl-when {
  font-size: 11px; color: var(--text3, #9ca3af);
  white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Beteiligte-Bereich (page-beteiligte) */
.bet-list { display: flex; flex-direction: column; }
.bet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  cursor: pointer;
  transition: background .15s;
  border-radius: 6px;
}
.bet-row:hover { background: var(--surface, #f8fafc); }
.bet-row:last-child { border-bottom: 0; }
.bet-ava {
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}
.bet-ava.is-manager {
  background: linear-gradient(135deg, var(--primary, #4338ca), #7c3aed);
}
.bet-text { flex: 1; min-width: 0; }
.bet-name {
  font-size: 13px; font-weight: 500; color: var(--text, #1f2937);
  display: flex; align-items: center; gap: 8px;
}
.bet-manager-tag {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary, #4338ca);
  background: var(--primary-light, #eef2ff);
  padding: 1px 7px; border-radius: 99px;
}
.bet-meta { font-size: 11px; color: var(--muted, #6b7280); margin-top: 2px; }
.bet-action {
  width: 28px; height: 28px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  color: var(--text2, #374151); text-decoration: none;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.bet-action:hover { color: var(--primary, #4338ca); border-color: var(--primary-border, #c7d2fe); }

/* ============================================================
   Kalender — .kal-*
   ============================================================ */

/* Page-Level: sidebar + main */
.kal-page {
  flex-direction: row;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  padding: 0;
  background: var(--bg);
}
/* Kalender-Seite als flex-Layout wenn aktiv (überschreibt .page.active { display:block }) */
.page.active.kal-page {
  display: flex;
}
/* #app-Padding entfernen wenn Kalender aktiv — edge-to-edge */
#app:has(#page-kalender.active) {
  padding: 0;
}

/* ── Sidebar ── */
.kal-sb {
  width: 230px;
  min-width: 230px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: visible;  /* kein Scrollbar */
  padding: 12px 0 16px;
  flex-shrink: 0;
  position: relative; /* für Loading-Overlay */
}
/* Lade-Overlay unten links in der Sidebar */
.kal-sb-loading {
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  background: rgba(30,41,59,.82);
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  z-index: 10;
  backdrop-filter: blur(4px);
}
.kal-sb-loading-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kal-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes kal-spin { to { transform: rotate(360deg); } }

/* "+ Neuer Termin"-Button in Sidebar */
.kal-sb-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 16px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: box-shadow .15s;
  white-space: nowrap;
}
.kal-sb-new-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.16); }

/* Mini-Kalender */
.kal-mini-cal { padding: 0 10px 12px; }
.kal-mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.kal-mini-cal-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.kal-mini-nav {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--muted); border-radius: 50%;
  transition: background .1s;
}
.kal-mini-nav:hover { background: var(--surface2); }
.kal-mini-dow-header {
  display: grid;
  /* KW-Spalte (22px) + 7 Wochentage */
  grid-template-columns: 22px repeat(7, 1fr);
  margin-bottom: 2px;
}
.kal-mini-dow-header > div {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 2px 0;
}
.kal-mini-dow-header > div.kal-mini-kw-head {
  color: var(--text3);
  font-size: 8px;
}
.kal-mini-grid {
  display: grid;
  /* KW-Spalte (22px) + 7 Wochentage */
  grid-template-columns: 22px repeat(7, 1fr);
  gap: 1px 0;
}
/* KW-Zelle im Mini-Kalender */
.kal-mini-kw {
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  height: 24px;
  cursor: default;
}
.kal-mini-day {
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  border-radius: 50%;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 1px auto;
  transition: background .1s;
}
.kal-mini-day:hover { background: var(--surface2); }
.kal-mini-day.other-month { color: var(--text3); }
.kal-mini-day.today { background: var(--primary); color: #fff; font-weight: 700; }
.kal-mini-day.in-range { background: var(--primary-light, #dbeafe); color: var(--primary); }

/* Kalender-Einträge in Sidebar (Toggle-Schalter) */
.kal-sb-cal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 16px 3px 12px;
  cursor: pointer;
  border-radius: 0 20px 20px 0;
  margin-right: 8px;
  transition: background .1s;
  user-select: none;
}
.kal-sb-cal:hover { background: var(--surface2); }
.kal-sb-cal-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
/* Ausgeschaltet: nur Rahmen, kein Fill */
.kal-sb-cal-dot.off {
  background: transparent !important;
}
.kal-sb-cal-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.kal-sb-cal.dimmed .kal-sb-cal-name { color: var(--text3); }

/* Sidebar-Divider */
.kal-sb-divider { height: 1px; background: var(--border); margin: 8px 0; }

/* Team-Liste in Sidebar */
.kal-sb-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 16px 6px;
}
.kal-sb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 12px;
  cursor: default;
}
.kal-sb-user-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kal-sb-user-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main area (toolbar + views) ── */
.kal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Toolbar ── */
.kal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.kal-view-toggle {
  display: flex;
  background: var(--surface3);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.kal-view-btn {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.kal-view-btn.active {
  background: var(--primary);
  color: #fff;
}

.kal-nav-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.kal-nav-btn:hover { background: var(--surface2); color: var(--text); }

.kal-period-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  min-width: 140px;
}

.kal-today-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
  transition: background .15s;
}
.kal-today-btn:hover { background: var(--surface2); }

.kal-google-status-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  display: none;
}
.kal-google-status-pill.connected {
  display: inline-block;
  background: #dcfce7;
  color: var(--success);
}
.kal-google-status-pill.disconnected {
  display: inline-block;
  background: var(--surface3);
  color: var(--muted);
}

/* ── Views — kein Padding, 4-seitig bis zum Rand ── */
.kal-view {
  flex: 1;
  overflow: auto;
  padding: 0;
  margin: 0;
}

/* ── Month View ── */
.kal-month-dow-header {
  display: grid;
  /* KW-Spalte (32px) + 7 Tage */
  grid-template-columns: 32px repeat(7, 1fr);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.kal-month-dow-header > div {
  text-align: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
/* KW-Spalten-Header */
.kal-month-dow-header > div.kal-kw-head {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0;
  border-right: 1px solid var(--border);
}

.kal-month-grid {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  min-height: calc(100% - 32px);
}

/* KW-Zelle im Grid */
.kal-month-kw {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  user-select: none;
}

.kal-day-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 110px;
  padding: 4px;
  background: #fff; /* Wochentage: weiß */
  position: relative;
  cursor: pointer;
  transition: background .1s;
}
/* Letzte Spalte (Sonntag) hat keinen rechten Rand */
.kal-day-cell:nth-child(8n) { border-right: none; }
.kal-day-cell:hover { background: var(--surface2); }
/* Wochentage: weiß */
.kal-day-cell.other-month { background: var(--bg); }
/* Sa / So: grau */
.kal-day-cell.weekend { background: var(--surface2); }
.kal-day-cell.weekend.other-month { background: var(--surface3); }
/* Heute: leicht blau */
.kal-day-cell.today { background: rgba(59,130,246,0.06); }
.kal-day-cell.today.weekend { background: rgba(59,130,246,0.08); }
.kal-day-cell.today .kal-day-num {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
}

.kal-day-num {
  font-size: 12px;
  font-weight: 400;
  color: var(--text3);
  margin-bottom: 3px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.kal-day-cell.today .kal-day-num { color: #fff; }

/* Event chips — left-border style */
.kal-chip {
  display: block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.5;
  max-width: 100%;
  border-left: 3px solid transparent;
}
.kal-chip:hover { filter: brightness(0.93); }

/* Type colours — translucent + border-left */
.kal-type-appointment { background: rgba(59,130,246,0.12); color: #1d4ed8; border-color: #3b82f6; }
.kal-type-vacation    { background: rgba(34,197,94,0.13);  color: #15803d; border-color: #22c55e; }
.kal-type-sick        { background: rgba(239,68,68,0.12);  color: #b91c1c; border-color: #ef4444; }
.kal-type-holiday     { background: rgba(234,179,8,0.13);  color: #78350f; border-color: #eab308; }
.kal-type-other       { background: rgba(168,85,247,0.12); color: #7e22ce; border-color: #a855f7; }

/* ── Week + 2-Wochen-View Header ── */
.kal-week-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Scrollbarer Zeitbereich (Wochenansicht) — Header bleibt fest, nur Body scrollt */
.kal-week-body-scroll { flex: 1; overflow-y: auto; min-height: 0; }

/* Gemeinsamer sticky Container für DOW-Header + Ganztag-Zeile */
.kal-sticky-top {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.kal-week-header {
  display: grid;
  background: var(--surface);
}

/* Day-of-week header: DOW label + date number side by side */
.kal-week-dow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .05em;
  gap: 4px;
}
.kal-week-dow .kal-dow-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s;
}

/* ── Sticky linke Spalte (Zeitspalte + Ganztag-Label) ── */
.kal-week-header > :first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
}
.kal-allday-row > :first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
}
.kal-time-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.kal-week-dow:hover .kal-dow-num { background: var(--surface2); }
.kal-week-dow.today { color: var(--primary); }
.kal-week-dow.today .kal-dow-num {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.kal-allday-row {
  display: grid;
}
.kal-allday-cell {
  padding: 3px 4px;
  border-right: 1px solid var(--border);
  min-height: 24px;
  min-width: 0;
  overflow: hidden;
}

.kal-week-body { display: grid; }
.kal-time-col { display: flex; flex-direction: column; }
.kal-time-slot {
  height: 48px;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  font-size: 10px;
  color: var(--text3);
  text-align: right;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 3px;
  box-sizing: border-box;
}
.kal-time-slot:first-child { color: transparent; }

.kal-day-col {
  border-right: 1px solid var(--border);
  position: relative;
  min-height: 1152px; /* 24 * 48 */
  background: #fff;
}
/* Wochenendspalten im Wochen-/2-Wochen-View */
.kal-day-col.weekend { background: var(--surface2); }
/* Heutespalte im Wochen-/2-Wochen-View: leicht blau */
.kal-day-col.today { background: rgba(59,130,246,0.04); }
.kal-day-col.today.weekend { background: rgba(59,130,246,0.07); }
/* Wochenende-Header-Zelle */
.kal-week-dow.weekend { color: var(--text3); }
.kal-week-dow.weekend.today { color: var(--primary); }
.kal-hour-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

/* Now-line (aktuelle Uhrzeit) — blau */
.kal-now-line {
  position: absolute;
  left: -1px; right: 0;
  height: 2px;
  background: var(--primary, #3b82f6);
  z-index: 3;
  pointer-events: none;
}
.kal-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary, #3b82f6);
}

/* Timed events — left-border style */
.kal-timed-event {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition: filter .1s;
  border-left: 3px solid transparent;
}
.kal-timed-event:hover { filter: brightness(.92); z-index: 2; }

/* Event title + time */
.kal-ev-title {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kal-ev-time {
  font-size: 10px;
  opacity: .75;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
}
.kal-ev-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -.3px;
  border: 1px solid rgba(255,255,255,0.5);
}

/* ── Gesetzliche Feiertage ── */
.kal-holiday-day { background: rgba(251,191,36,0.18) !important; }
.kal-day-cell.kal-holiday-day .kal-day-num { color: #b45309; font-weight: 700; }
.kal-holiday-chip {
  background: rgba(234,179,8,0.18);
  color: #92400e;
  border-left-color: #f59e0b;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  line-height: 1.5;
  cursor: default;
}

/* ── 2-Wochen-View ── */
.kal-2week-inner { overflow-x: auto; overflow-y: auto; height: 100%; }
.kal-2w-scroll { min-width: calc(52px + 14 * 68px); }
.kal-day-col.kal-2w-weekend,
.kal-allday-cell.kal-2w-weekend { background: var(--surface2); }
.kal-week-dow.kal-2w-weekend { color: var(--text3); }
.kal-week-dow.kal-2w-weekend.today { color: var(--primary); }
.kal-2w-ev { font-size: 10px; }
.kal-2w-ev .kal-ev-title { font-size: 10px; }
.kal-2w-ev .kal-ev-time  { font-size: 9px; }

/* ── Heatmap View ── */
.kal-hm-inner { padding: 0; }
.kal-hm-wrap { display: flex; flex-direction: column; gap: 0; }
.kal-hm-legend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.kal-hm-leg { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.kal-hm-grid { display: grid; border-left: 1px solid var(--border); }
.kal-hm-corner {
  padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .04em;
}
.kal-hm-day-head {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px; background: var(--surface2);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center;
}
.kal-hm-day-head.today .kal-hm-dow  { color: var(--primary); }
.kal-hm-day-head.today .kal-hm-dnum { color: var(--primary); font-weight: 700; }
.kal-hm-dow  { font-size: 11px; font-weight: 600; color: var(--muted); }
.kal-hm-dnum { font-size: 12px; color: var(--text); margin-top: 1px; }
.kal-hm-user-cell {
  padding: 8px 10px 6px; background: var(--surface);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 72px;
}
.kal-hm-username { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-hm-bar-wrap { position: relative; height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; display: flex; align-items: center; }
.kal-hm-bar { height: 100%; border-radius: 3px; transition: width .3s; }
.kal-hm-bar-lbl { position: absolute; right: 0; font-size: 10px; color: var(--text3); transform: translateY(-110%); }
.kal-hm-cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; transition: filter .15s; position: relative;
}
.kal-hm-cell:hover { filter: brightness(.93); }
.kal-hm-cell.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.kal-hm-weekend { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.025) 4px, rgba(0,0,0,.025) 8px); }
.kal-hm-h   { font-size: 13px; font-weight: 700; }
.kal-hm-cnt { font-size: 10px; opacity: .75; }
.kal-hm-bg-0 { background: var(--surface2); }
.kal-hm-bg-0 .kal-hm-h { color: var(--text3); }
.kal-hm-bg-1 { background: #dcf5e4; }
.kal-hm-bg-1 .kal-hm-h, .kal-hm-bg-1 .kal-hm-cnt { color: #1a6b35; }
.kal-hm-bg-2 { background: #82d49a; }
.kal-hm-bg-2 .kal-hm-h, .kal-hm-bg-2 .kal-hm-cnt { color: #0d4521; }
.kal-hm-bg-3 { background: #2ea65c; }
.kal-hm-bg-3 .kal-hm-h, .kal-hm-bg-3 .kal-hm-cnt { color: #fff; }
.kal-hm-bg-4 { background: #e05a2b; }
.kal-hm-bg-4 .kal-hm-h, .kal-hm-bg-4 .kal-hm-cnt { color: #fff; }
.kal-hm-bg-0.kal-hm-leg { background: var(--surface3); color: var(--muted); }
.kal-hm-bg-1.kal-hm-leg { background: #dcf5e4; color: #1a6b35; }
.kal-hm-bg-2.kal-hm-leg { background: #82d49a; color: #0d4521; }
.kal-hm-bg-3.kal-hm-leg { background: #2ea65c; color: #fff; }
.kal-hm-bg-4.kal-hm-leg { background: #e05a2b; color: #fff; }
.kal-hm-summary { border-top: 1px solid var(--border); padding: 14px 16px 16px; background: var(--surface); }
.kal-hm-summary-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.kal-hm-summary-grid { display: flex; flex-direction: column; gap: 8px; }
.kal-hm-sum-row { display: grid; grid-template-columns: 26px 140px 1fr 36px 50px; align-items: center; gap: 10px; }
.kal-hm-sum-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.kal-hm-sum-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-hm-sum-bar-wrap { height: 6px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.kal-hm-sum-bar { height: 100%; border-radius: 4px; transition: width .4s; }
.kal-hm-sum-pct { font-size: 12px; font-weight: 700; text-align: right; }
.kal-hm-sum-h { font-size: 11px; color: var(--muted); text-align: right; }

/* ── Team View ── */
.kal-team-inner { display: table; width: 100%; border-collapse: collapse; }
.kal-team-head-row, .kal-team-row { display: table-row; }
.kal-team-label-cell {
  display: table-cell; width: 140px; min-width: 140px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  background: var(--surface2); position: sticky; left: 0; z-index: 1; vertical-align: middle;
}
.kal-team-day-head {
  display: table-cell; text-align: center; padding: 4px 2px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  background: var(--surface2); min-width: 36px; white-space: nowrap;
}
.kal-team-day-head.today { color: var(--primary); font-weight: 700; }
.kal-team-event-cell {
  display: table-cell; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  vertical-align: top; padding: 2px; min-width: 36px; cursor: pointer;
}
.kal-team-event-cell:hover { background: var(--surface2); }
.kal-team-chip {
  display: block; width: 100%; height: 22px; border-radius: 4px;
  font-size: 10px; font-weight: 500; padding: 0 4px 0 6px; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  border-left: 3px solid transparent;
}

/* ── Loading / Empty ── */
.kal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--muted);
  font-size: 13px;
}

/* ── Schnellansicht-Popup ── */
/* ── Schnellansicht-Popup (Google Calendar-Style) ── */
.kal-qv {
  position: fixed;
  z-index: 9999;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  outline: none;
}
.kal-qv-accent {
  height: 5px;
  width: 100%;
  background: var(--primary);
}
.kal-qv-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 10px 8px 16px;
  border-bottom: 1px solid var(--border);
}
.kal-qv-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  min-height: 22px;
  outline: none;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  word-break: break-word;
}
.kal-qv-title[contenteditable="true"] {
  cursor: text;
  background: var(--surface2);
  box-shadow: 0 0 0 2px var(--primary);
}
.kal-qv-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  margin-top: 1px;
}
.kal-qv-act {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.kal-qv-act:hover { background: var(--surface3); color: var(--text); }
.kal-qv-act-del:hover { background: rgba(220,38,38,.08); color: var(--danger); }
/* Body */
.kal-qv-body {
  padding: 8px 0 4px;
}
.kal-qv-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 16px;
  min-height: 32px;
}
.kal-qv-row:hover { background: var(--surface2); }
.kal-qv-row-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  margin-top: 7px;
}
.kal-qv-row-val {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  padding: 4px 0;
}
.kal-qv-display {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  display: inline-block;
}
.kal-qv-display:hover { background: var(--surface3); }
.kal-qv-time-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kal-qv-sep { color: var(--muted); font-size: 12px; }
/* Inline-Inputs (Ort, Beschreibung) */
.kal-qv-input {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  outline: none;
  transition: border-color .15s, background .15s;
  width: 100%;
  box-sizing: border-box;
}
.kal-qv-input:focus {
  border-color: var(--primary);
  background: var(--surface);
}
.kal-qv-inline { margin: -3px -6px; width: calc(100% + 12px); }
.kal-qv-textarea { resize: vertical; min-height: 52px; line-height: 1.45; }
.kal-qv-user-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Save-Leiste */
.kal-qv-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}

/* ── Drag & Drop ── */
.kal-timed-event { user-select: none; }
.kal-timed-event.kal-ev-dragging { opacity: .15 !important; cursor: grabbing !important; }
.kal-ev-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border: 2px dashed var(--primary);
  border-radius: 5px;
  background: rgba(0,113,227,0.07);
  box-sizing: border-box;
}
.kal-day-col.kal-drop-target { background: rgba(74,144,217,.06) !important; }
/* Resize-Handles oben + unten */
.kal-ev-resize,
.kal-ev-resize-top {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  background: transparent;
  z-index: 2;
}
.kal-ev-resize     { bottom: 0; border-radius: 0 0 4px 4px; }
.kal-ev-resize-top { top: 0;    border-radius: 4px 4px 0 0; }
.kal-ev-resize:hover,
.kal-ev-resize-top:hover { background: rgba(0,0,0,.12); }
.kal-timed-event { position: absolute; cursor: grab; }
.kal-timed-event:active { cursor: grabbing; }
/* ── Create-Popover (neuer Termin per Klick/Drag) ── */
.kal-cpop {
  position: fixed;
  z-index: 9999;
  width: 390px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  outline: none;
  animation: kal-cpop-in .13s ease;
}
@keyframes kal-cpop-in {
  from { opacity: 0; transform: scale(.97) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.kal-cpop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 10px 10px 16px;
  border-bottom: 1px solid var(--border);
}
.kal-cpop-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.kal-cpop-body { padding: 10px 14px 6px; }
.kal-cpop-title-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  outline: none;
  padding: 2px 0 7px;
  margin-bottom: 10px;
}
.kal-cpop-title-input::placeholder { color: var(--text3); font-weight: 400; }

/* Zeilen mit Icon + Inhalt */
.kal-cpop-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 0;
  min-height: 28px;
}
.kal-cpop-row-ico {
  width: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
  color: var(--text3);
}
.kal-cpop-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding-top: 3px;
}
.kal-cpop-check-label input[type=checkbox] { cursor: pointer; }
.kal-cpop-duo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.kal-cpop-sep { font-size: 12px; color: var(--muted); }
.kal-cpop-field {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 8px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.kal-cpop-field:focus { border-color: var(--primary); background: var(--surface); }
textarea.kal-cpop-field { resize: vertical; line-height: 1.4; }
select.kal-cpop-field { cursor: pointer; }

.kal-cpop-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* Preview-Chip beim Ziehen eines neuen Termins */
.kal-ev-create-preview {
  position: absolute;
  left: 2px; right: 2px;
  background: rgba(74,144,217,0.18);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  padding: 3px 6px;
  pointer-events: none;
  z-index: 5;
  user-select: none;
  min-height: 16px;
}
/* Cursor auf Tagesspalten signalisiert "hier ziehen" */
.kal-day-col { cursor: crosshair; }
.kal-timed-event, .kal-timed-event * { cursor: grab; }
.kal-timed-event:active, .kal-timed-event:active * { cursor: grabbing; }

/* Google-Badge im Bearbeiten-Modal */
.kal-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #4285F4;
  background: rgba(66,133,244,.1);
  border: 1px solid rgba(66,133,244,.25);
  border-radius: 4px;
  padding: 2px 7px 2px 5px;
}
.kal-google-open-link {
  font-size: 11px;
  color: var(--primary);
  text-decoration: none;
  margin-left: 10px;
  opacity: .8;
}
.kal-google-open-link:hover { opacity: 1; text-decoration: underline; }