/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  /* Brand */
  --color-primary:        #0370B0;
  --color-primary-hover:  #025d94;
  --color-primary-light:  #e8f3fa;
  --color-primary-text:   #ffffff;

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

  /* Text */
  --color-text:           #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;

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

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

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

  /* Z-Index Skala — vermeidet Magic-Numbers im ganzen Stylesheet */
  --z-sticky:    1;
  --z-sidebar:   100;
  --z-topbar:    200;
  --z-dropdown:  500;
  --z-modal:     1000;
  --z-popover:   1100;   /* Searchable-Select, Tooltips — über Modals */
  --z-toast:     1200;

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

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

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

  /* Typography */
  --font-family: 'Inter', system-ui, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;

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

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

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

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

/* Material Symbols config */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
}

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

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

.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════
   SIDEBAR BRAND
═══════════════════════════════════════════════ */
.sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

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

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

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

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

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

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

/* Nav-Items: Icon zentrieren, Label + Section-Header + Badges ausblenden. */
body.is-sidebar-collapsed .sidebar-nav { padding-left: 8px; padding-right: 8px; }
body.is-sidebar-collapsed .nav-item    { justify-content: center; padding-left: 0; padding-right: 0; }
body.is-sidebar-collapsed .nav-label,
body.is-sidebar-collapsed .nav-section-label,
body.is-sidebar-collapsed .nav-item__count,
body.is-sidebar-collapsed .nav-badge,
body.is-sidebar-collapsed .nav-error-badge,
body.is-sidebar-collapsed .nav-arrow { display: none !important; }

/* Eingeklappte Dropdowns ausblenden (sonst hängen Items unter der Sidebar) */
body.is-sidebar-collapsed .nav-group__children { display: none !important; }

/* Beim Einklappen sichtbar bleibt nur das Hauptmenü (.nav-section--main):
   Dashboard, Nachunternehmer, Gewerke, Händler, Materialbereiche, Projekte,
   Freigaben, Preissuche. Alles darunter (Dokumentation, Asana,
   Administration, System) wird ausgeblendet. */
body.is-sidebar-collapsed .nav-section--secondary { display: none !important; }

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

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

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

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

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

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

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

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

.nav-icon { font-size: 18px; }

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

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

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

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

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

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

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

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

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

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

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

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

/* ═══════════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════════ */
.content {
  flex: 1;
  padding: var(--space-8);
  overflow-y: auto;
}

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

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════ */
.heading-1 { font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-text); }
.heading-2 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); }
.heading-3 { font-size: var(--font-size-lg);  font-weight: 600; color: var(--color-text); }
.heading-4 { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); }

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.badge-info    { background: var(--color-info-bg);     color: var(--color-info-text); }

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

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

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

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

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

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

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

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

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

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

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

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

.table th {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  backdrop-filter: blur(2px);
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

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

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

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

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

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

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

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

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

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

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

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

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

.settings-tabs {
  width: 200px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition);
}
.settings-tab .material-symbols-outlined { font-size: 18px; }
.settings-tab:hover { background: var(--color-bg); color: var(--color-text); }
.settings-tab.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

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

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

/* ═══════════════════════════════════════════════
   ALERT
═══════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-5);
}
.alert .material-symbols-outlined { font-size: 18px; }
.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid rgba(22,163,74,.25);
}
.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid rgba(220,38,38,.25);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  gap: var(--space-3);
}
.empty-state-icon {
  font-size: 48px !important;
  color: var(--color-border-strong);
}

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

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

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

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

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

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

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

/* ── Original-Konditionen-Banner (Nachverhandlung) ──────────────────────
 * Zeigt die ursprünglichen Rabatte/Lieferkosten/Kommentar des NU oberhalb
 * der Eingabe-Maske, damit der Einkauf weiß, wovon er ausgeht. */
.negotiation-original-conditions {
  background: #fefce8;
  border: 1px solid #fde047;
  border-left: 4px solid #ca8a04;
  border-radius: var(--radius-md);
  padding: 12px var(--space-4);
  margin-bottom: var(--space-4);
}
.negotiation-original-conditions__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #713f12;
  margin-bottom: 6px;
}
.negotiation-original-conditions__title .material-symbols-outlined {
  font-size: 20px; color: #ca8a04;
}
.negotiation-original-conditions__list {
  list-style: none;
  margin: 0; padding: 0;
  font-size: var(--font-size-sm);
  color: #422006;
}
.negotiation-original-conditions__list li { margin: 2px 0; }
.negotiation-original-conditions__hint {
  margin-top: 8px;
  font-size: 12px;
  color: #713f12;
  font-style: italic;
}

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

/* „roh"-Tag macht klar, dass der gezeigte Wert OHNE Rabatt/Liefer ist. */
.negotiation-orig-hint__raw-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 6px;
  background: #f3f4f6;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.negotiation-orig-hint--bundle {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  padding: 6px 12px 10px;
  border-top: 1px dashed var(--color-border);
}
.negotiation-orig-hint--bundle .material-symbols-outlined { font-size: 16px; color: #6b7280; }

/* ── Vergleichs-Chips zu anderen vorausgewählten Partnern ──────────── */
.negotiation-compare {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.negotiation-compare--bundle {
  text-align: left;
  padding: 4px 12px 10px;
}
.negotiation-compare__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: #fff;
}
.negotiation-compare__chip.is-better {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.negotiation-compare__chip.is-worse {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.negotiation-compare__chip .material-symbols-outlined { font-size: 14px; }
.negotiation-compare__name { font-weight: 600; }
.negotiation-compare__price { font-weight: 700; }
.negotiation-compare__conds {
  margin-left: 4px;
  padding: 0 6px;
  background: rgba(0,0,0,.04);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.negotiation-compare__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.negotiation-compare__more:hover { background: rgba(0,0,0,.05); }

.negotiation-compare__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 10px;
  background: #fafafa;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: inline-block;
  text-align: right;
}
.negotiation-compare__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 12px;
}
.negotiation-compare--bundle .negotiation-compare__list { text-align: left; }

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

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

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

.negotiation-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);   /* = Beschreibungs-Textgröße (12px) */
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.negotiation-compare__table thead th {
  background: #f9fafb;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.negotiation-compare__table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.negotiation-compare__table tbody tr:last-child td { border-bottom: 0; }
.negotiation-compare__table tbody tr.is-cheapest {
  background: color-mix(in srgb, #16a34a 6%, #fff);
  font-weight: 600;
}
.negotiation-compare__table tbody tr.is-cheapest .material-symbols-outlined {
  font-size: 14px;
  color: #16a34a;
  vertical-align: middle;
  margin-right: 4px;
}
/* Vergleichs-Zeile spannt sich über alle Spalten der Items-Tabelle —
   so hat die Vergleichs-Tabelle die volle Breite zur Verfügung. */
.negotiation-compare-row > td {
  background: #fafafa;
  padding: 8px 12px 12px;
  border-top: 1px dashed var(--color-border);
}

/* ── Einzel-Positionen als eigene Karten (statt Tabelle) ─────────── */
.public-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}
/* Bündel-Karten innerhalb der Gruppe brauchen denselben Innen-Abstand. */
.public-group > .public-bundle {
  margin: var(--space-4);
}
.public-group > .public-items + .public-bundle,
.public-group > .public-bundle + .public-bundle {
  margin-top: 0;
}
.public-item {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.public-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.public-item__pos {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg, #f3f4f6);
  padding: 2px 8px;
  border-radius: 4px;
}
.public-item__summary {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--color-text);
}
.public-item__qty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.public-item__desc { margin: 0; }
.public-item__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.public-item__price-label {
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Eingabefeld + Angebot-Hint rechtsbündig stapeln (Input oben, Hint darunter). */
.public-item__price input.price-input {
  flex: 0 0 auto;
  width: 200px;
  order: 2;
  margin-left: auto;
}
.public-item__price .negotiation-orig-hint {
  flex: 0 0 100%;
  order: 3;
  margin-top: 0;
  text-align: right;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════
   MODAL — Standard-Pattern für Begründung etc.
═══════════════════════════════════════════════ */
.app-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.6);
  z-index: 1000;
  align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.app-modal.is-open { display: flex; }
.app-modal__panel {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 94%; max-width: 620px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-modal__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 17px var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.app-modal__head--danger  { background: linear-gradient(135deg,#fee2e2,#fecaca); border-bottom-color:#fecaca; }
.app-modal__head--warning { background: linear-gradient(135deg,#fef3c7,#fde68a); border-bottom-color:#fde68a; }
.app-modal__icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.app-modal__icon--danger  { background: var(--color-error);   box-shadow: 0 4px 10px rgba(220,38,38,.35); }
.app-modal__icon--warning { background: var(--color-warning); box-shadow: 0 4px 10px rgba(217,119,6,.35); }
.app-modal__icon .material-symbols-outlined { font-size: 22px; color: #fff; }
.app-modal__title { margin: 0; font-size: var(--font-size-lg); font-weight: 700; }
.app-modal__text { flex: 1; }
.app-modal__title--danger { color: #7f1d1d; }
.app-modal__subtitle { font-size: var(--font-size-sm); }
.app-modal__subtitle--danger { color: #991b1b; }
.app-modal__body {
  padding: var(--space-5) var(--space-6);
  background: #fafafa;
  max-height: 70vh;
  overflow-y: auto;
}
.app-modal__foot {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: #fff;
  display: flex; justify-content: flex-end; gap: var(--space-2);
}

/* Reason-Modal Summary-Leiste + Reason-Cards */
.reason-modal__summary {
  display: flex;
  gap: var(--space-5);
  padding: 10px var(--space-6);
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  font-size: var(--font-size-sm);
  color: #7c2d12;
}
.reason-card {
  margin-bottom: var(--space-4);
  background: #fff;
  border: 1px solid #fcd34d;
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.reason-card__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-4);
  background: #fffbeb;
}
.reason-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-warning);
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.reason-card__title { flex: 1; font-weight: 700; color: var(--color-text); }
.reason-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #fffdf7;
  border-bottom: 1px dashed #fde68a;
  font-size: var(--font-size-sm);
}
.reason-card__col-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.reason-card__body { padding: var(--space-3) var(--space-4); }
.reason-card__body-label {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 4px;
}

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

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

/* Preissuche-Filter-Form */
.pricesearch-filter-bar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.pricesearch-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.pricesearch-filter > .form-group { margin: 0; }
.pricesearch-filter__type    { flex: 0 0 auto; }
.pricesearch-filter__partner { flex: 1; min-width: 220px; }
.pricesearch-filter__q       { flex: 2; min-width: 240px; }
.pricesearch-filter__actions {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.pricesearch-filter .form-label {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
}
.pricesearch-filter .form-input--sm,
.pricesearch-filter .form-select-sm,
.pricesearch-filter .btn-sm { height: 34px; }

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

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

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

/* Read-only-Variante für terminale Phasen („In Freigabe", „Genehmigt"):
   gleicher Layoutslot wie der klickbare Button, aber ohne Border,
   ohne Hintergrund-Hover und ohne Cursor-Pointer. */
.btn-phase--readonly {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--color-text-muted, #6b7280) !important;
  cursor: default !important;
  pointer-events: none;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════
   INQUIRY — Filter-Leiste
═══════════════════════════════════════════════ */
.inquiry-filters {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: 10px var(--space-5);
  border-top: 1px solid var(--color-border);
  background: #f9fafb;
  font-size: var(--font-size-sm);
}
.inquiry-filters__label { font-weight: 600; margin-right: 4px; color: var(--color-text-muted); }
.inquiry-filters__sep   { width: 1px; height: 1.4em; background: var(--color-border-strong); margin: 0 6px; }
.inquiry-filters__count { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.inquiry-filters .filter-btn .material-symbols-outlined { font-size: 15px; }

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

/* Link-Zeile mit Copy/Open/Mail */
/* ── Angebotsfrist-Bar im Anfrage-Vorbereitungs-Header ──────────────────
 * Datumsfeld + Speichern, optional abgelaufen-Hinweis. Layout entspricht
 * den anderen Header-Reihen (kompakt, hellgrauer Hintergrund).
 */
.inquiry-deadline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-top: 1px solid var(--color-border);
}
.inquiry-deadline--expired { background: var(--color-warning-bg); }
.inquiry-deadline__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
}
.inquiry-deadline__label .material-symbols-outlined { font-size: 18px; color: var(--color-info-text); }
.inquiry-deadline__input {
  width: auto;
  min-width: 220px;
  flex: 0 0 auto;
}

.inquiry-link-row {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;     /* Buttons/Link sollen sich strecken… */
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-bottom: 1px solid var(--color-border);
}
/* …damit Kopieren/Öffnen/E-Mail/Manuell genauso hoch sind wie das Link-Feld.
 * .btn-sm hat sonst fix 34px — hier deaktiviert, damit `align-items: stretch`
 * greift und die Buttons auf die Höhe des `<input>` gezogen werden. */
.inquiry-link-row > .btn {
  display: inline-flex;
  align-items: center;
  height: auto;
}
.inquiry-link-row > .material-symbols-outlined { align-self: center; }
/* Icon-only-Variante: gleiche Höhe wie die anderen Buttons, aber quadratisches
 * Padding, damit das Icon nicht von Text-Breite verzerrt wird. */
.inquiry-link-row__btn--icon {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  aspect-ratio: 1 / 1;
  justify-content: center;
}
.inquiry-link-row--closed { background: var(--color-error-bg); }
.inquiry-link-row .material-symbols-outlined { color: #6366f1; }
.inquiry-link-row--closed .material-symbols-outlined { color: var(--color-error-text); }
.inquiry-link-row__msg {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-error-text);
  font-weight: 500;
}
.inquiry-link-row__input {
  flex: 1;
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  min-width: 240px;
}

/* Items-Tabelle der Inquiry-Card */
.td-qty-right { text-align: right; padding-top: 12px; }
.td-unit      { padding-top: 12px; }
.td-pos--compact, .td-desc--compact { padding-top: 12px; }
.td-pos--compact { font-family: ui-monospace, monospace; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ── Anfrage-Ansicht: „Antwort"-Spalte mit ✓ + Preis pro Position ──────── */
.td-answer {
  padding-top: 12px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.td-answer__check {
  font-size: 18px;
  color: #16a34a;
  vertical-align: middle;
  margin-right: 4px;
}
.td-answer__pending {
  font-size: 16px;
  color: var(--color-text-muted);
  vertical-align: middle;
  margin-right: 4px;
}
.td-answer__price  { font-weight: 700; color: var(--color-text); }
.td-answer__hint   { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.td-answer--done   { background: color-mix(in srgb, #16a34a 5%, transparent); }
.td-answer--open   { color: var(--color-text-muted); }

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

/* Footer-Zeile am Ende einer Gruppe: zeigt Rabatt + Lieferkosten,
   die der Partner mit der Anfrage zurückgegeben hat. */
.inquiry-group-foot > td {
  background: #fafafa;
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--space-3);
}
.inquiry-group-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}
.inquiry-group-foot__label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--font-size-xs);
}
.inquiry-group-foot__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.inquiry-group-foot__chip .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text-muted);
}

/* Hint unter dem Gruppen-Total, dass die Lieferkosten in der Summe drin sind. */
.inquiry-group-divider__delivery-hint {
  display: block;
  margin-top: 1px;
  font-size: 10px;            /* deutlich kleiner als der Preis darüber */
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0;
  line-height: 1.1;
}
.inquiry-group-divider:hover > td {
  background: linear-gradient(180deg, var(--color-primary-light), #f8fafc);
}
.inquiry-group-divider:focus-visible {
  outline: 2px solid var(--color-info-text);
  outline-offset: -2px;
}
.inquiry-group-divider__chevron {
  transition: transform var(--transition);
  color: var(--color-text-muted) !important;
}
.inquiry-group-divider:not(.is-collapsed) .inquiry-group-divider__chevron {
  transform: rotate(90deg);
}
/* Items, die zu einer eingeklappten Gruppe gehören → ausblenden.
   Bündel-Zeilen sind mehrere <tr>s mit demselben data-group-key. */
tr.inquiry-collapsible-row.is-hidden-by-group { display: none; }
.inquiry-group-divider:first-of-type > td { border-top: 0; }
.inquiry-group-divider--unassigned > td {
  background: linear-gradient(180deg, #f3f4f6, #fff);
}
.inquiry-group-divider__head {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.inquiry-group-divider__head .material-symbols-outlined {
  color: var(--color-info-text);
  font-size: 20px;
}
.inquiry-group-divider--unassigned .inquiry-group-divider__head .material-symbols-outlined {
  color: var(--color-text-muted);
}
.inquiry-group-divider__name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
/* Stats-Block rechts: Antworten-Counter + Gesamtbetrag mit FIXEN Breiten,
 * damit die Werte über alle Gruppen-Header untereinander bündig stehen. */
.inquiry-group-divider__stats {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.inquiry-group-divider__count {
  display: inline-block;
  width: 120px;
  text-align: right;
  color: var(--color-text-muted);
}
.inquiry-group-divider__total {
  display: inline-block;
  min-width: 110px;
  text-align: right;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 1.125rem;       /* prominenter Gesamtpreis */
  line-height: 1.15;
}
/* alle Items dieser Gruppe sind beantwortet → grünes Highlight */
.inquiry-group-divider__count--complete {
  color: #166534;
  font-weight: 600;
}
.inquiry-group-divider__total--has {
  color: var(--color-text);
  font-weight: 700;
}
/* Bündel-Zelle (rowspan über alle Items des Bündels) zentriert vertikal,
   damit ✓ + Gesamtpreis in der Mitte stehen statt oben kleben.
   Da die Zelle auf der ERSTEN Bündel-Zeile sitzt (rowspan=n), greifen die
   `--first`/`--last`-Border-Regeln der normalen Bündel-Zellen hier nicht.
   Selector muss spezifischer sein als `.inquiry-bundle-row > td`
   (sonst überschreibt deren `border-top: 0` unseren Wert). */
.inquiry-bundle-row > td.td-answer--bundle {
  vertical-align: middle;
  border-top: 1px solid var(--link-tag-color, var(--color-primary));
  border-bottom: 1px solid var(--link-tag-color, var(--color-primary));
}
/* white-space: normal verhindert, dass HTML-Einrückungen zwischen Summary/
   Description-Divs als sichtbare Leerzeile gerendert werden. Den Original-
   Zeilenumbruch im Beschreibungstext stellen wir gezielt auf .item-desc-body. */
.td-desc--compact { white-space: normal; }
.td-desc--compact .item-desc-body { white-space: pre-wrap; }

/* ═══════════════════════════════════════════════
   STATE-Badges (übergreifend)
═══════════════════════════════════════════════ */
.badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-error-bg);   color: var(--color-error-text);   font-weight: 700; }
.badge--info-light { background: #dbeafe; color: #1e40af; font-weight: 700; }
.badge--success-light { background: #dcfce7; color: #166534; font-weight: 700; }
.badge .material-symbols-outlined { font-size: 14px; vertical-align: middle; }

/* ═══════════════════════════════════════════════
   EMPTY-STATE
═══════════════════════════════════════════════ */
.empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state .material-symbols-outlined { font-size: 40px; color: #cbd5e1; display: block; margin-bottom: 8px; }

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

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

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

/* ═══════════════════════════════════════════════
   TEXT-CLAMP — 2-Zeilen-Fold mit Expand-Toggle
═══════════════════════════════════════════════ */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
.item-desc-wrap[data-clamped="open"] .text-clamp-2 {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}
/* "Vorgelesener" Whitespace wenn Block ausgeklappt: pre-wrap zeigt Original-Umbrüche */
.item-desc-wrap[data-clamped="open"] .item-desc-body { white-space: pre-wrap; }

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

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

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

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

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

.group-item-card {
  display: flex;
  gap: var(--space-2);
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.group-item-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.group-item-card.is-dragging { opacity: .4; }
.group-item-card:active { cursor: grabbing; }
.group-item-card__handle {
  color: var(--color-text-muted);
  font-size: 18px;
  align-self: flex-start;
  margin-top: 2px;
  flex-shrink: 0;
}
.group-item-card__body { flex: 1; min-width: 0; }
.group-item-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.group-item-card__pos {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-xs);
  background: var(--color-info-bg);
  color: var(--color-info-text);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  flex-shrink: 0;
}
.group-item-card__summary { flex: 1; font-weight: 600; color: var(--color-text); min-width: 100px; }
.group-item-card__qty { color: var(--color-text-muted); font-size: var(--font-size-sm); font-family: ui-monospace, monospace; }
.group-item-card__img-badge {
  display: inline-flex; align-items: center; gap: 2px;
  background: #eef2ff; color: #4338ca;
  padding: 1px 6px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: 600;
}
.group-item-card__img-badge .material-symbols-outlined { font-size: 13px; }
.group-item-card__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

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

/* Gruppen-Header-Zeile in der Edit-Items-Tabelle */
.group-row { background: linear-gradient(180deg, var(--color-primary-light), #fff); }
.group-row td {
  padding: 0 !important;
  border-top: 2px solid var(--color-primary);
}
/* Sichtbarer Abstand zwischen Gruppen — 5px in App-Hintergrundfarbe (grau) */
.group-row:not(:first-of-type) td {
  border-top: 5px solid var(--color-bg);
  box-shadow: inset 0 2px 0 var(--color-primary);
}
.group-row--unassigned td { border-top-color: var(--color-border-strong); }
.group-row--unassigned:not(:first-of-type) td {
  border-top-color: var(--color-bg);
  box-shadow: inset 0 2px 0 var(--color-border-strong);
}
.group-row--unassigned { background: linear-gradient(180deg, #f3f4f6, #fff); }
.group-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
}
.group-row__head .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 20px;
}
.group-row--unassigned .group-row__head .material-symbols-outlined { color: var(--color-text-muted); }
.group-row__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--font-size-base);
}
.group-row__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
/* .group-row__edit: aktuell keine eigenen Styles — Klasse bleibt als Hook für JS/zukünftige Varianten. */
.group-row__kind {
  margin-left: auto;
  width: auto;
  min-width: 180px;
  padding: 6px var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}
.group-row__kind:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(3,112,176,.12);
}
/* Compact form-control Modifier — überschreibt die --field-*-Tokens
   der Basis-Klasse, sodass kein !important nötig ist. Höhe 34px = btn-sm. */
.form-select-sm,
.form-input--sm {
  --field-py:        var(--space-1-5);
  --field-px:        var(--space-3);
  --field-font-size: var(--font-size-sm);
  --field-height:    34px;
  line-height: 1.4;
}

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

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

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

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

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

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

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

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

/* ── Öffentliche NU-Eingabe-Ansicht ──────────────────────────────────────── */
.public-meta-block {
  padding: .75rem 1rem;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: .75rem;
  font-size: .85rem;
  color: #374151;
  white-space: pre-wrap;
}
/* Section-Trenner zwischen Gruppen und Einzeleinträgen. */
.public-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f3f4f6, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
}
.public-section-divider:first-child { margin-top: 0; }
.public-section-divider .material-symbols-outlined {
  font-size: 22px;
  color: var(--color-primary, #6366f1);
}
.public-section-divider__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-text);
}
.public-section-divider__count {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 10px;
}
.public-section-divider--ungrouped {
  background: linear-gradient(180deg, #fafaf9, #fff);
}
.public-section-divider--ungrouped .material-symbols-outlined { color: #6b7280; }

/* Header-Card der Verhandlungs-/Anfrage-Seite — eigener Wrapper analog
   zur Gruppen-Card. Enthält Titel + Status + Intro/Frist/Meta. */
.public-inquiry-headcard {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);
  margin-bottom: var(--space-4);
}
.public-inquiry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}
.public-inquiry-header > div { display: flex; flex-direction: column; gap: 2px; }
.public-inquiry-header h2 { margin: 0; }

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

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

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

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

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

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

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

/* Bündel-Block in der Eingabe-Tabelle */
.public-bundle-row > td {
  background: color-mix(in srgb, var(--link-tag-color, var(--color-primary)) 6%, #fff);
  border-top: 0;
}
.public-bundle-row > td:first-child {
  box-shadow: inset 4px 0 0 var(--link-tag-color, var(--color-primary));
}
.public-bundle-row:not(.public-bundle-row--first) > td.td-pos--compact,
.public-bundle-row:not(.public-bundle-row--first) > td.td-desc--compact,
.public-bundle-row:not(.public-bundle-row--first) > td.td-qty-right,
.public-bundle-row:not(.public-bundle-row--first) > td.td-unit {
  padding-top: 4px;
}
.public-bundle-row:not(.public-bundle-row--last) > td { padding-bottom: 4px; }
.public-bundle-row--first > td { border-top: 1px solid var(--link-tag-color, var(--color-primary)); }
.public-bundle-row--last  > td { border-bottom: 1px solid var(--link-tag-color, var(--color-primary)); }

.public-bundle__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--link-tag-color, var(--color-primary));
}
.public-bundle__pos {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.public-bundle-row--first .public-bundle__pos { margin-top: 6px; }
.public-bundle__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.public-bundle__price-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--link-tag-color, var(--color-primary));
  text-transform: uppercase;
  letter-spacing: .04em;
}
.price-input {
  text-align: right;
  font-family: ui-monospace, monospace;
}


/* ── Anfrage-Vorbereitung: Bündel als zusammenhängende Zeilen-Gruppe ─────── */
/* Pro Bündel-Item eine eigene <tr> → Menge/Einheit liegen automatisch auf
   gleicher Höhe wie die zugehörige Beschreibung. Die Bündel-Identität entsteht
   über einen farbigen linken Streifen + Tag-Badge nur in der ersten Zeile. */
.inquiry-bundle-row > td {
  background: color-mix(in srgb, var(--link-tag-color, var(--color-primary)) 6%, #fff);
  border-top: 0;
}
.inquiry-bundle-row > td:first-child {
  box-shadow: inset 4px 0 0 var(--link-tag-color, var(--color-primary));
}

/* Erste Zeile: voller Padding-Top + Border, Folgezeilen: enger zusammen */
.inquiry-bundle-row--first > td {
  border-top: 1px solid var(--link-tag-color, var(--color-primary));
  /* padding-top bleibt bei 12px aus .td-pos--compact/.td-desc--compact/.td-qty-right/.td-unit */
}
.inquiry-bundle-row:not(.inquiry-bundle-row--first) > td.td-pos--compact,
.inquiry-bundle-row:not(.inquiry-bundle-row--first) > td.td-desc--compact,
.inquiry-bundle-row:not(.inquiry-bundle-row--first) > td.td-qty-right,
.inquiry-bundle-row:not(.inquiry-bundle-row--first) > td.td-unit {
  padding-top: 4px;
}
.inquiry-bundle-row:not(.inquiry-bundle-row--last) > td {
  padding-bottom: 4px;
}
.inquiry-bundle-row--last  > td {
  border-bottom: 1px solid var(--link-tag-color, var(--color-primary));
}

.inquiry-bundle__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--link-tag-color, var(--color-primary));
}
.inquiry-bundle__pos {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.inquiry-bundle-row--first .inquiry-bundle__pos { margin-top: 6px; }

.inquiry-attachments {
  margin: 0 var(--space-5) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fafbfc;
}
.inquiry-attachments__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  user-select: none;
}
.inquiry-attachments__summary::-webkit-details-marker { display: none; }
.inquiry-attachments__summary > .material-symbols-outlined { font-size: 18px; transition: transform var(--transition); }
.inquiry-attachments[open] > .inquiry-attachments__summary > .material-symbols-outlined { transform: rotate(180deg); }
.inquiry-attachments__label { color: var(--color-text); }
.inquiry-attachments__body { padding: 10px 12px 12px; border-top: 1px dashed var(--color-border-strong); }

/* ── Bündel-Zeile (mehrere verlinkte Items als 1 Anfrage) ───────────────── */
.bundle-row > td:first-child {
  /* etwas dickerer Akzent-Strich, damit ein Bündel auf Anhieb erkennbar ist */
  box-shadow: inset 6px 0 0 var(--link-tag-color, var(--color-primary));
}
.bundle-row .td-pos {
  position: relative;
}
.bundle-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.bundle-positions__pos {
  padding: 2px 6px;
  background: color-mix(in srgb, var(--link-tag-color, var(--color-primary)) 12%, #fff);
  color: var(--link-tag-color, var(--color-primary));
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.bundle-desc__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--color-text);
}
.bundle-desc__list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.bundle-desc__list li { margin: 4px 0 8px; }
.bundle-desc__row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.bundle-desc__summary {
  font-weight: 600;
  color: var(--color-text);
}
.bundle-desc__text {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Qty-Spalte im Bündel: pro Item ein Block wie bei Einzel-Items
   (Menge groß/fett, Einheit klein/muted). Nummerierung via <ol> 1./2./… */
.bundle-qty-stack {
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bundle-qty-stack__entry { line-height: 1.25; }
.bundle-qty-stack::marker,
.bundle-qty-stack__entry::marker {
  font-weight: 700;
  color: var(--color-text-muted);
}
.bundle-desc__pos {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--color-text-muted);
}
.bundle-desc__sep {
  color: var(--color-text-muted);
  margin: 0 2px;
}
.bundle-desc__qty { color: var(--color-text-muted); font-size: 11px; }

/* Badge in der Pos-Spalte der Show-Ansicht */
.link-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--link-tag-color, var(--color-primary));
  border-radius: 999px;
  letter-spacing: .04em;
}
.link-tag-badge .material-symbols-outlined { font-size: 13px !important; }

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

/* ── Bündel-Tags (Item-Verknüpfungen A/B/C/…) ────────────────────────────── */
.item-row.is-link-tagged > td:first-child {
  box-shadow: inset 4px 0 0 var(--link-tag-color, var(--color-primary));
}
.item-link-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.item-link-tag.is-tagged {
  color: var(--link-tag-color, var(--color-primary)) !important;
}
.item-link-tag__label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .03em;
}

/* Popover */
.link-tag-popover {
  position: absolute;
  z-index: 1100;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 10px 12px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.link-tag-popover__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.link-tag-popover__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.link-tag-chip {
  min-width: 32px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: var(--font-size-sm);
  border: 2px solid var(--link-tag-color, var(--color-border-strong));
  border-radius: 999px;
  background: #fff;
  color: var(--link-tag-color, var(--color-text));
  cursor: pointer;
  transition: background var(--transition);
}
.link-tag-chip:hover  { background: color-mix(in srgb, var(--link-tag-color) 12%, #fff); }
.link-tag-chip.is-active { background: var(--link-tag-color); color: #fff; }
.link-tag-popover__new,
.link-tag-popover__off {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
}
.link-tag-popover__new:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.link-tag-popover__new[disabled] {
  opacity: .55;
  cursor: not-allowed;
  background: var(--color-bg);
}
.link-tag-popover__new[disabled]:hover { background: var(--color-bg); border-color: var(--color-border-strong); }
.link-tag-popover__off       { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, #fff); }
.link-tag-popover__off:hover { background: color-mix(in srgb, var(--color-danger) 8%, #fff); }
.link-tag-popover .material-symbols-outlined { font-size: 16px; }

/* Zeile „Bündel-Button + Überschrift" über der Beschreibung */
.item-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
/* Reservierter Slot für den Bündel-Button — gleiche Breite mit oder ohne Tag,
   damit das Überschriftenfeld beim Setzen/Lösen nicht springt. */
.item-summary-row .item-link-tag {
  flex: 0 0 56px;
  width: 56px;
  padding: 6px 0;
  justify-content: center;
}
/* Vollbild-Button rechts vom Überschriftenfeld */
.item-summary-row .item-fullscreen {
  flex: 0 0 36px;
  width: 36px;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Überschriftenfeld füllt den restlichen Platz */
.item-summary-row .item-summary-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Vollbild-Modal für Item-Bearbeitung — ca. 70% Breite */
.item-fullscreen-modal__panel {
  width: 70vw !important;
  max-width: 1200px !important;
  max-height: 90vh;
}
.item-fullscreen-modal__body { max-height: calc(90vh - 130px); }
.item-fullscreen-modal__body textarea { min-height: 200px; }
.item-fullscreen-modal__body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.item-fullscreen-modal__body .form-group { margin-bottom: var(--space-4); }
@media (max-width: 768px) {
  .item-fullscreen-modal__panel { width: 95vw !important; }
  .item-fullscreen-modal__body .form-row { grid-template-columns: 1fr; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Icon-Sizing-Utilities (statt inline style="font-size:...") */
.icon-xs   { font-size: 12px !important; }
.icon-sm   { font-size: 14px !important; }
.icon-base { font-size: 16px !important; }
.icon-lg   { font-size: 18px !important; }
.icon-xl   { font-size: 22px !important; }

/* Card-Header mit Flex-Aktionen (auch außerhalb Kalkulation) */
.card-header--flex {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

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

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

/* Alert-Komponente (flach, ohne phase-banner Margin/Padding) */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.alert--success { background: var(--color-success-bg); border-color: #86efac; color: #166534; }
.alert--error   { background: var(--color-error-bg);   border-color: #fecaca; color: var(--color-error-text); }
.alert--warning { background: var(--color-warning-bg); border-color: #fde68a; color: var(--color-warning-text); }
.alert--info    { background: var(--color-info-bg);    border-color: #93c5fd; color: var(--color-info-text); }

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

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

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

/* Form-Error: einheitliche Inline-Fehlermeldungen unter Form-Feldern. */
.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-error);
  line-height: 1.4;
}
.form-error--block {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-error-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-error);
}

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

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

/* Bundle-Stripe — einheitlicher Border-Indikator für gebündelte Tabellen-Rows.
   Wird zusätzlich zu kontext-spezifischen Klassen (.public-bundle-row, .inquiry-bundle-row, .bundle-row)
   verwendet, ersetzt aber langfristig deren box-shadow:inset-Duplikate. */
.bundle-stripe > td:first-child {
  box-shadow: inset 4px 0 0 var(--link-tag-color, var(--color-primary));
}

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

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

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

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

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

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

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

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

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

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

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


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

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

/* PriceSearch Result-Meta-Zeile */
.pricesearch-results__meta {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

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

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

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

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

/* Adress-Grid: 2-spaltig für Rechnungs- vs. Baustellen-Adresse. */
.addresses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (max-width: 720px) {
  .addresses-grid { grid-template-columns: 1fr; }
}

/* Copy-Adresse Button (kleinerer Text) */
.copy-from-billing {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
}
.copy-from-billing .material-symbols-outlined { font-size: .9rem; }

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

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

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

/* ── Micro-Utilities ──────────────────────────────────────────────────── */
/* Inline-Icon im Fließtext — gleicht Material-Symbols an die umgebende Zeile an. */
.inline-icon {
  font-size: 14px;
  vertical-align: middle;
}
.inline-icon--lg { font-size: 1rem; }

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

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

/* Buttons / interaktive Elemente in disabled-Look (statt inline style="opacity:.5"). */
.btn.is-disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

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

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

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

/* ── Offer-Pill Icon-Varianten (statt inline color="...") ──────────────── */
.offer-pill__icon--cheap      { color: var(--color-success); }
.offer-pill__icon--wrong      { color: #ea580c; }
.offer-pill__icon--incomplete { color: var(--color-amber-700); }

/* Link-Tag Icon im Bündel-Kontext */
.link-tag-icon {
  font-size: 16px;
  color: var(--link-tag-color, var(--color-primary));
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ── PriceSearch: Zeitraum-Filter (Preset + von/bis) ──────────────────── */
.pricesearch-filter__preset { flex: 0 0 160px; }
.pricesearch-filter__date   { flex: 0 0 150px; }
.pricesearch-filter__date input[type="date"] {
  font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

/* ── Drag&Drop-Zone Komponente ────────────────────────────────────────── */
.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}
.dropzone__input {
  /* Native File-Input unsichtbar, aber im DOM für FormData */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone__icon {
  font-size: 24px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--transition);
}
.dropzone__text {
  flex: 1;
  min-width: 0;          /* erlaubt ellipsis im Kind */
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
  line-height: 1.3;
}
.dropzone__placeholder {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone__filename {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  position: relative;    /* über dem absolut positionierten Input */
  z-index: 1;
}
.dropzone__clear:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.dropzone__clear .material-symbols-outlined { font-size: 18px; }

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

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

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

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

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

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

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

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

.form-actions__spacer { flex: 1; }

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

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

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

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

.d-inline { display: inline; }

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

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

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

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

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

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

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

/* Sidebar-Trennlinie zwischen Nav-Gruppen — sehr dezent (~5% Schwarz auf weiß). */
.nav-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
  margin: var(--space-2) var(--space-4);
  height: 0;
}

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

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

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

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

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

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

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

/* Bündel-Zeile in der Detail-Tabelle: linker Tag-Farbbalken zur visuellen
   Klammer um zusammengehörige Positionen. */
.shortlist-detail-bundle td:first-child {
  border-left: 3px solid var(--link-tag-color, var(--color-primary));
}
.shortlist-detail-bundle--first td { padding-top: 10px; }

/* Footer-Zeile in der Detail-Tabelle: Rabatt + Lieferkosten als Chips. */
.shortlist-detail-foot td {
  background: #fafafa;
  border-top: 1px solid var(--color-border);
  padding: 8px var(--space-3) !important;
}
.shortlist-detail-foot__label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--font-size-xs);
  margin-right: var(--space-3);
}
.shortlist-detail-foot__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-sm);
}
.shortlist-detail-foot__chip .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text-muted);
}
/* Eigene Badge-Spalte VOR dem Preis. Fixe Breite → über alle Zeilen bündig. */
.shortlist-partner__badge {
  flex: 0 0 auto;
  width: 180px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
}

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

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

/* Step-Back-Modale: Begründung für „Neu nachverhandeln" / „Auswahl
   korrigieren". Backdrop + zentrierte Panel-Karte. */
.stepback-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.stepback-modal[hidden] { display: none; }
.stepback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.stepback-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stepback-modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.stepback-modal__head > .material-symbols-outlined { color: var(--color-primary); }
.stepback-modal__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
}
.stepback-modal__close:hover { background: #f3f4f6; color: var(--color-text); }
.stepback-modal__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stepback-modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  background: #fafafa;
}
.shortlist-partner__total {
  flex: 0 0 auto;
  /* Genug Breite für „9.999.999,99 €" ohne Umbruch (ca. 14 Zeichen × ~10px). */
  width: 150px;
  min-width: 150px;
  text-align: right;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

/* ══ Nachverhandlung-View (Phase B) ══════════════════════════════════════ */
.negotiation-group { margin-top: var(--space-5); }
.negotiation-partner {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
}
.negotiation-partner:first-of-type { border-top: 2px solid var(--color-border-strong); }
.negotiation-partner__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.negotiation-partner__name {
  font-size: var(--font-size-md);
  color: var(--color-text);
}
.negotiation-partner__sum {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.negotiation-partner__delta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  background: #f3f4f6;
  color: var(--color-text-muted);
}
.negotiation-partner__delta.is-down {
  background: var(--color-success-bg);
  color: #166534;
}
.negotiation-partner__delta.is-up {
  background: #fee2e2;
  color: #991b1b;
}
.negotiation-table input.negotiation-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 140px;
}
.negotiation-partner__note {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.negotiation-partner--inline .negotiation-partner__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-3);
  align-items: center;
}
.negotiation-partner-list .negotiation-partner { border-top: 1px dashed var(--color-border); }
.negotiation-partner-list .negotiation-partner:first-child { border-top: 0; }

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

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

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

.release-group {
  margin-top: var(--space-5);
}
.release-group__items th,
.release-group__items td {
  vertical-align: middle;
}
.release-group__items th.release-partner-col,
.release-group__items td.release-partner-col--cheap,
.release-group__items td.release-partner-col--incomplete {
  border-left: 1px solid var(--color-border);
}
.release-partner-col {
  text-align: center;
  white-space: nowrap;
}
.release-partner-col--cheap {
  background: var(--color-success-bg);
}
.release-partner-col--incomplete {
  background: var(--color-warning-bg);
  opacity: 0.85;
}

.release-group__bundle-row td:nth-child(2) {
  border-left: 3px solid var(--color-indigo-500);
}

.release-group__totals {
  background: var(--color-surface-alt);
  border-top: 2px solid var(--color-border-strong);
  font-size: var(--font-size-md);
}
.release-group__totals td { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.release-group__choice {
  background: var(--color-gray-50);
}
.release-choice-radio {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.release-choice-radio input { accent-color: var(--color-primary); }
.release-choice-radio:has(input:checked) {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

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

/* Ungruppierte Items */
.release-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.release-item:last-child { border-bottom: none; }
.release-item__head { margin-bottom: var(--space-2); }
.release-item__offers {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.release-item__offer {
  display: grid;
  grid-template-columns: 18px 24px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-surface);
}
.release-item__offer.is-cheap { border-color: var(--color-success); background: var(--color-success-bg); }
.release-item__offer:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.release-item__price { font-weight: 600; }
.release-item__reason {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
}

.release-submit {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════
   Public Inquiry v2 — Bündel + Gruppensumme + Rabatt
═══════════════════════════════════════════════ */

/* ── Bündel-Karte innerhalb einer Gruppe ────────────────────────── */
.public-bundle {
  margin-top: var(--space-3);
  border: 2px solid var(--color-indigo-50);
  border-left: 4px solid var(--color-indigo-500);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.public-bundle__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-indigo-50);
  color: var(--color-indigo-600);
  font-size: var(--font-size-md);
  font-weight: 700;
}
.public-bundle__head .material-symbols-outlined { font-size: 20px; }
.public-bundle__count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: var(--font-size-sm);
}
.public-bundle__items {
  margin: 0;
  width: 100%;
  font-size: var(--font-size-md);
}
.public-bundle__items th {
  background: var(--color-surface-alt);
  font-size: var(--font-size-xs);
}
.public-bundle__items .item-desc-summary {
  font-size: var(--font-size-base);
  font-weight: 600;
}
.public-bundle__items .item-desc-body {
  font-size: var(--font-size-base);
}
.public-bundle__items td { font-size: var(--font-size-base); }
.public-bundle__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-indigo-50);
  border-top: 1px solid var(--color-indigo-500);
}
.public-bundle__price-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-indigo-600);
  font-size: var(--font-size-md);
  font-weight: 700;
}
.public-bundle__price-row .form-input {
  max-width: 220px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--font-size-md);
}

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

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

/* Gruppen-Summe (Endpreis-Block, rechts) */
.public-group-total {
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.public-group-total__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.public-group-total__row--discount { color: var(--color-warning-text); }
.public-group-total__row--net {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-md);
  color: var(--color-text);
}
.public-group-total__row--net strong:last-child { font-size: 1.15rem; color: var(--color-primary); }

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

/* ── Lieferkosten-Eingabe ────────────────────────────────────────────── */
.public-delivery {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-cyan-500);
  border-radius: var(--radius-md);
}
.public-delivery__label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  margin: 0;
}
.public-delivery__label .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-cyan-500);
}
.public-delivery__input {
  max-width: 160px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

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

/* ── Deploy / Release UI ─────────────────────────────────────────────── */
.deploy-form code {
  background: var(--color-gray-100);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

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

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

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

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