:root {
  --navy: #1f2a44;
  --blue: #1f4e79;
  --blue-light: #3a72a4;
  --blue-bg: #eaf1f8;
  --accent: #2f9e6e;
  --orange: #ff6a3d;
  --gray: #8a97a3;
  --bg: #f3f5f8;
  --sidebar-bg: #fbf7f4;
  --border: #e3e8ee;
  --text: #1d2733;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --shadow: 0 2px 10px rgba(31, 78, 121, 0.06);
  --shadow-lg: 0 8px 28px rgba(31, 78, 121, 0.12);
}
[data-theme="dark"] {
  --navy: #c8d8f0;
  --blue: #5b9bd5;
  --blue-light: #7ab3e0;
  --blue-bg: #1a2535;
  --accent: #3ecf8e;
  --orange: #ff8c62;
  --gray: #7a8a96;
  --bg: #111518;
  --sidebar-bg: #161b22;
  --border: #2a3340;
  --text: #dce4ed;
  --card-bg: #1c2330;
  --input-bg: #1c2330;
  --shadow: 0 2px 10px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", "Inter", Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.app {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.brand {
  padding: 4px 6px 12px;
}
.brand-logo {
  width: 148px;
  height: auto;
  display: block;
}
.gesendet-date {
  display: block;
  font-size: 10px;
  color: #e9a825;
  margin-top: 3px;
  white-space: nowrap;
}
.brand-version {
  font-size: 10px;
  color: var(--gray);
  margin-top: 4px;
  padding-left: 2px;
  letter-spacing: .02em;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #5b6573;
  cursor: pointer;
}
.nav-item:hover { background: #f1ece8; }
.nav-item.active {
  background: var(--card-bg);
  color: var(--navy);
  box-shadow: var(--shadow);
}
.nav-icon { font-size: 14px; width: 18px; text-align: center; color: var(--orange); }
.nav-divider { height: 1px; background: var(--border); margin: 8px 4px; }

/* Main */
.main {
  flex: 1;
  padding: 28px 32px 60px;
  min-width: 0;
}

.view { display: none; }
.view.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.view-head h1 {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
}
.view-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.badge-ausschreibung {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e3f0fb;
  color: #1565c0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.badge-budgetpreis {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8e8e8;
  color: #555;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.kat-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.kat-standard      { background: #f0f2f5; color: #6b7a8d; }
.kat-ausschreibung { background: #e3f0fb; color: #1565c0; }
.kat-budgetpreis   { background: #e8e8e8; color: #555; }

/* Kontrakt-Inhalte Tiles */
.ki-tiles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ki-tile {
  padding: 5px 13px; border: 1.5px solid var(--border); border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; background: var(--card-bg);
  color: var(--gray); user-select: none; transition: all .12s;
}
.ki-tile.active { border-color: var(--accent); background: #effaf3; color: #1a7f4b; }
.ki-tile:hover:not(.active) { border-color: var(--blue-light); color: var(--blue); }
.badge-ki {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: #e8f5e9; color: #2e7d32;
  border: 1px solid #a5d6a7; vertical-align: middle;
}

/* Renewal-Zeile — eingerückt, normal */
.row-kontrakt-renewal td:nth-child(2) { padding-left: 24px !important; }
.row-kontrakt-renewal td:nth-child(2)::before { content: '↳'; color: var(--gray); margin-right: 6px; font-size: 12px; }
[data-theme="dark"] .row-kontrakt-renewal td { background: var(--card-bg); }

/* Kontrakt mit Ablaufdatum — blau hinterlegt */
.row-kontrakt-ablauf td { background: #eaf4fd !important; border-left: 3px solid #3a72a4; }
[data-theme="dark"] .row-kontrakt-ablauf td { background: #0f1e2d !important; }
.kontrakt-renewal-status {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.kontrakt-renewal-status.red    { background: #fdecea; color: #c62828; border: 1px solid #f5c6c6; }
.kontrakt-renewal-status.yellow { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }
.kontrakt-renewal-status.green  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }

.badge-auslaufend {
  display: inline-block; margin-left: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  background: #fdecea; color: #c62828; border: 1px solid #f5c6c6;
  vertical-align: middle;
}
.badge-ablaufdatum {
  display: inline-block; margin-left: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  background: #fff3e0; color: #e65100; border: 1px solid #ffcc80;
  vertical-align: middle; white-space: nowrap;
}
.badge-ablauf-over  { background: #fdecea !important; color: #c62828 !important; border-color: #f5c6c6 !important; }
.badge-ablauf-soon  { background: #fff3e0 !important; color: #e65100 !important; border-color: #ffcc80 !important; }
.badge-ablauf-ok    { background: #e8f5e9 !important; color: #2e7d32 !important; border-color: #a5d6a7 !important; }

.kontrakt-ablauf-cell { display: flex; flex-direction: column; gap: 2px; }
.kontrakt-ablauf-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #3a72a4; }
.kontrakt-ablauf-days { font-size: 10px; color: var(--gray); }
.kontrakt-ablauf-days.bald { color: #e65100; font-weight: 700; }
.kontrakt-ablauf-days.abgelaufen { color: #c62828; font-weight: 700; }
.bisheriger-preis-label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #3a72a4; margin-bottom: 1px; }

.row-kontrakt-rot  td { background: #fff0f0 !important; border-left: 3px solid #e74c3c; }
.row-kontrakt-gelb td { background: #fffbea !important; border-left: 3px solid #f0c040; }
.row-kontrakt-gruen td { background: #f0faf4 !important; border-left: 3px solid #2f9e6e; }
[data-theme="dark"] .row-kontrakt-rot  td { background: #2d1a1a !important; }
[data-theme="dark"] .row-kontrakt-gelb td { background: #2a2510 !important; }
[data-theme="dark"] .row-kontrakt-gruen td { background: #0f2a1a !important; }
.kontrakt-linked-preview {
  padding: 8px 12px; background: var(--blue-bg); border-radius: 8px;
  font-size: 13px; border: 1px solid var(--border);
}
.row-ausschreibung td { background: #eaf4fd; }
.row-budgetpreis td { background: #f2f2f2; }
.row-en-needs-update td { background: #fffbea; }
.badge-en-update { display: inline-block; font-size: 11px; padding: 1px 5px; background: #fff3cd; border: 1px solid #f0c040; border-radius: 3px; color: #7a5f00; margin-bottom: 3px; white-space: nowrap; }
.en-cell { display: flex; flex-direction: column; gap: 2px; }
.row-deleted td { background: #fff0f0 !important; opacity: .7; text-decoration: line-through; }
.row-deleted td input, .row-deleted td select { text-decoration: line-through; color: #999; }
.del-confirm-btn, .del-confirm-kd-btn {
  padding: 4px 10px; font-size: 11px; border-radius: 5px; cursor: pointer;
  background: #fde8e8; color: #c0392b; border: 1px solid #f5c6c6; font-weight: 600;
}
.del-confirm-btn:hover, .del-confirm-kd-btn:hover { background: #f5c6c6; }
.del-restore-btn {
  padding: 4px 10px; font-size: 11px; border-radius: 5px; cursor: pointer;
  background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7;
}
.del-restore-btn:hover { background: #c8e6c9; }
.badge-import {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* Cards / panels */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.table-card { padding: 0; overflow: hidden; }

.panel { display: none; animation: fadeIn .25s ease; }
.panel.active { display: block; }

#last-angebot-info {
  border-radius: 6px;
  padding: 9px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
}
#last-angebot-info.info-banner-info  { background: #e8f4fd; border: 1px solid #b3d9f5; color: #1a4a6e; }
#last-angebot-info.info-banner-warn  { background: #fff8e1; border: 1px solid #ffe082; color: #6d4c00; }
#last-angebot-info.info-banner-neutral { background: #f5f5f5; border: 1px solid #ddd; color: #555; }
#last-angebot-info .info-icon { margin-right: 6px; }
#last-angebot-info .info-count { opacity: .7; font-size: 12px; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

h2 {
  margin: 0;
  font-size: 19px;
  color: var(--navy);
  font-weight: 700;
}
h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.hint { margin: 0; font-size: 13px; color: var(--gray); }
.muted { color: var(--gray); font-weight: 400; }

/* Step indicator */
.steps {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all .15s ease;
}
.step:hover { border-color: var(--blue-light); }
.step.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.step.done { color: var(--accent); border-color: var(--accent); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 11px;
}
.step.active .step-num { background: rgba(255,255,255,.18); color: #fff; }
.step.done .step-num { background: #effaf3; color: var(--accent); }

/* Inputs */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 20px;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: #4a5663;
  gap: 6px;
}

input[type="text"], input[type="number"], textarea, .search-input {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: normal;
  color: var(--text);
  width: 100%;
  background: #fbfcfe;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(58, 114, 164, .15);
  background: var(--card-bg);
}

textarea { resize: vertical; }

.search-input { margin-bottom: 14px; }

/* Buttons */
button {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
button:hover { background: var(--blue-bg); border-color: var(--blue-light); }
button:active { transform: scale(.98); }

button.primary {
  background: var(--navy);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 12px 26px;
  box-shadow: var(--shadow);
}
button.primary:hover { background: #2c3a5e; }

button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--blue);
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.panel-actions .primary { margin-left: auto; }
#panel-1 .panel-actions { display: none; }

/* Kunden grid */
.kunden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.kunde-card-wrapper { display: contents; }
.kunde-card-wrapper.open { display: block; grid-column: 1 / -1; }
.kunde-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: #fbfcfe;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  position: relative;
}
.kunde-card:hover {
  border-color: var(--blue-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.kunde-card.selected {
  border-color: var(--accent);
  background: #effaf3;
  box-shadow: 0 0 0 3px rgba(47, 158, 110, .15);
}
.kunde-card .kunde-name {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  padding-right: 24px;
}
.kunde-card .kunde-addr {
  font-size: 12px;
  color: var(--gray);
  white-space: pre-line;
  line-height: 1.5;
  margin-bottom: 8px;
}
.kunde-abk {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--navy); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
}
.kunde-card .kunde-nr {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 999px;
  padding: 3px 10px;
}
.kunde-card .kunde-check {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 16px;
  color: var(--accent);
  opacity: 0;
  transition: opacity .15s ease;
}
.kunde-card.selected .kunde-check { opacity: 1; }
.kunde-card.editing { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.kunde-edit-toggle {
  position: absolute; top: 10px; right: 32px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--gray); padding: 2px 4px; border-radius: 4px;
  opacity: 0; transition: opacity .15s;
}
.kunde-card:hover .kunde-edit-toggle { opacity: 1; }
.kunde-edit-panel {
  grid-column: 1 / -1;
  background: #f5f8ff;
  border: 1px solid var(--blue);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 16px;
  margin-top: -14px;
}
.kep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.kep-grid label { display: flex; flex-direction: column; font-size: 12px; color: var(--gray); gap: 4px; }
.kep-full { grid-column: 1 / -1; }
.kep-input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card-bg); width: 100%; box-sizing: border-box; }
.kep-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.kep-actions { display: flex; gap: 8px; }
.neukunde-card { border-color: #f0c040; background: #fffcf0; }
.neukunde-card:hover { border-color: #e6a800; box-shadow: var(--shadow-lg); }
.neukunde-card.selected { border-color: var(--accent); background: #effaf3; }
.neukunde-icon { font-size: 22px; margin-bottom: 4px; }
.neukunde-form { border-color: #f0c040 !important; background: #fffcf0 !important; }
[data-theme="dark"] .neukunde-card { background: #2a2510; border-color: #7a6010; }
[data-theme="dark"] .neukunde-form { background: #2a2510 !important; border-color: #7a6010 !important; }

.kunden-grid:empty::after {
  content: "Keine Kunden gefunden.";
  color: var(--gray);
  font-size: 13px;
}

.selected-kunde {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  background: #effaf3;
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── Schritt 2: Kopfdaten ───────────────────────────────────────────────── */
.kd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.kd-head-left { display: flex; flex-direction: column; gap: 8px; }
.kd-head-left h2 { margin: 0; }

.kd-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kd-group {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--border);
}
.kd-group:last-child { border-bottom: none; padding-bottom: 8px; }

.kd-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-light);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kd-icon { font-size: 14px; }

.kd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
}
.kd-row-wide { }

.kd-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 140px;
}
.kd-span2 { flex: 2 1 320px; }

.kd-label-text {
  font-size: 12px;
  font-weight: 600;
  color: #4a5663;
  letter-spacing: 0.01em;
}

.kd-validity-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kd-validity-input input {
  width: 72px;
  flex-shrink: 0;
}
.kd-validity-unit {
  font-size: 13px;
  color: var(--gray);
  font-weight: 500;
}

/* ── Step 2 Kachel-Layout ── */
.kd2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.kd2-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
}
.kd2-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--blue-bg);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
}
.kd2-icon { font-size: 15px; }
.kd2-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 16px 18px;
}
.kd2-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--gray);
  font-weight: 600;
}
.kd2-label input,
.kd2-label select {
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  width: 100%;
}
.kd2-label input:focus,
.kd2-label select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,78,121,.08);
}
.kd2-full { grid-column: 1 / -1; }

.kd2-tile-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.kd2-tile {
  flex: 1; min-width: 80px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
  text-align: center;
}
.kd2-tile:hover { border-color: var(--blue-light); background: var(--blue-bg); }
.kd2-tile.active {
  border-color: var(--accent);
  background: #effaf3;
  color: #1a7f4b;
  box-shadow: 0 0 0 3px rgba(47,158,110,.12);
}
[data-theme="dark"] .kd2-tile.active { background: #192b22; color: var(--accent); }
.kd2-sublabel { font-size: 11px; color: var(--gray); font-weight: 600; display: block; margin-bottom: 4px; }
.kd2-sub-select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--input-bg); color: var(--text); }

.kd2-section {
  margin-bottom: 20px;
}
.kd2-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 12px;
  padding-left: 2px;
}
/* Bearbeiter-Kacheln: kompakter als Kunden */
#bearbeiter-tiles .kunde-card {
  padding: 12px 14px;
}
#bearbeiter-tiles .kunde-name { font-size: 14px; margin-bottom: 4px; }
#bearbeiter-tiles .kunde-addr { font-size: 11px; margin-bottom: 6px; }

@media (max-width: 700px) {
  .kd2-grid { grid-template-columns: 1fr; }
}

/* Positions layout */
.positions-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.catalog-filters button {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 999px;
  font-weight: 600;
}
.catalog-filters button.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Generic data table (Übersicht + Katalog) */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 560px;
  overflow: auto;
  background: var(--card-bg);
}
.table-card .table-wrap { border: none; border-radius: 0; max-height: none; }

.data-table, .catalog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.data-table thead th, .catalog-table thead th {
  position: sticky;
  top: 0;
  background: var(--blue-bg);
  color: var(--blue);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 16px;
  z-index: 1;
}
.data-table th.num, .data-table td.num,
.catalog-table th.num, .catalog-table td.num { text-align: right; }

.data-table tbody tr, .catalog-table tbody tr {
  border-top: 1px solid var(--border);
  transition: background .12s ease;
}
.data-table tbody tr:hover, .catalog-table tbody tr:hover { background: var(--blue-bg); }
.data-table tbody tr.clickable { cursor: pointer; }

/* Status */
.status-select {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  border: 1px solid transparent;
  cursor: pointer;
  appearance: none;
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 10px;
}
.status-select.status-vorbereitung { background-color: #eef1f5; color: #5b6573; }
.status-select.status-geprueft { background-color: #e8f4fd; color: #1565c0; }
.status-select.status-gesendet { background-color: #fff4e0; color: #b9770e; }
.status-select.status-abgelehnt { background-color: #fdecea; color: #b71c1c; }
.status-select.status-neue-version { background-color: #ede7f6; color: #5e35b1; }

/* Positions-Status */
.sp-posstatus, .f-posstatus {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid transparent;
  cursor: pointer;
  appearance: none;
}
.pos-status-offen { background: #eef1f5; color: #5b6573; }
.pos-status-beauftragt { background: #e6f7ee; color: #1a7f4b; }
.pos-status-abgelehnt { background: #fdecea; color: #c0392b; }
.catalog-table tbody tr { cursor: grab; }
.catalog-table tbody tr.dragging { opacity: .4; }

.data-table td, .catalog-table td {
  padding: 12px 16px;
  vertical-align: top;
}
.data-table td.kunde { font-weight: 600; }
.data-table td.angebotsnr { font-family: "Consolas", monospace; font-size: 12px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table td.betrag { font-weight: 700; color: var(--navy); white-space: nowrap; }
.data-table td.betrag-optional { font-weight: 600; color: var(--gray); white-space: nowrap; }
.data-table td.betrag-jaehrlich { font-weight: 600; color: var(--blue); white-space: nowrap; }
.data-table td.betrag-beauftragt { font-weight: 700; color: #1a7f4b; white-space: nowrap; }
.data-table td.bearbeiter-col { font-size: 12px; color: var(--navy); white-space: nowrap; }
.data-table td.kunde { white-space: nowrap; }
.muted { color: var(--gray); }
.data-table td.action { text-align: right; white-space: nowrap; }
.data-table .dl-btn,
.data-table .edit-btn,
.data-table .folder-btn {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
}
.data-table .folder-btn {
  background: #e8f4fd;
  color: #1565c0;
  border-color: #90caf9;
  font-weight: bold;
}
.data-table .folder-btn:hover { background: #bbdefb; }

.overview-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 12px;
}
.tab-btn {
  padding: 7px 18px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s;
}
.tab-btn:hover { border-color: var(--blue-light); color: var(--navy); background: var(--blue-bg); }
.tab-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
[data-theme="dark"] .tab-btn.active { background: var(--blue); border-color: var(--blue); }

/* Tab-Gruppe "Bestandskunden" */
.tab-group {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  position: relative;
  margin-top: 10px;
}
.tab-group .tab-btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
}
.tab-group .tab-btn:first-of-type { border-radius: 6px 0 0 6px; }
.tab-group .tab-btn:last-of-type { border-right: none; border-radius: 0 6px 6px 0; }
.tab-group-label {
  position: absolute;
  top: -9px; left: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray);
  background: var(--bg);
  padding: 0 4px;
  white-space: nowrap;
  z-index: 1;
}
.tab-group-active { border-color: var(--navy); }
.tab-group-active .tab-group-label { color: var(--navy); }

.badge-verlaengerung {
  display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px;
  background: #e8f5e9; border: 1px solid #81c784; border-radius: 10px; color: #2e7d32;
  vertical-align: middle;
}
.badge-neuer-vertrag {
  display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px;
  background: #ede7f6; border: 1px solid #9575cd; border-radius: 10px; color: #4527a0;
  vertical-align: middle;
}

.overview-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.overview-filter label {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.overview-filter select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
  min-width: 180px;
}

/* Expand/Collapse */
.data-table th.expand-col, .data-table td.expand-col {
  width: 32px;
  padding-left: 16px;
  padding-right: 0;
}
.expand-toggle {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.expand-toggle:hover { background: var(--blue-bg); }

.expand-row > td {
  padding: 0 16px 16px 48px;
  background: #fafbfc;
  border-top: none;
}
.expand-row:hover { background: transparent; }
.expand-loading {
  padding: 12px 0;
  color: var(--gray);
  font-size: 13px;
}
.expand-positions {
  padding: 8px 0;
}
.sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sub-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray);
  background: var(--blue-bg);
  padding: 8px 10px;
}
.sub-table th.num, .sub-table td.num { text-align: right; }
.sub-table tbody tr { border-top: 1px solid var(--border); }
.sub-table td {
  padding: 6px 10px;
  vertical-align: middle;
}
.sub-table input[type="number"] {
  width: 90px;
  text-align: right;
}
.sub-table input[type="text"] {
  width: 100%;
}
.sub-table input, .sub-table select {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sub-table .sp-gesamt { font-weight: 700; color: var(--navy); white-space: nowrap; }

/* Swimlane-Trennzeilen in der Angebote-Übersicht */
.swimlane-row { pointer-events: none; }
.swimlane-row:hover { background: transparent !important; }
.swimlane-label {
  padding: 16px 16px 6px !important;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--orange);
  background: transparent !important;
  border-top: 2px solid var(--border) !important;
}
.swimlane-row:first-child .swimlane-label { border-top: none !important; padding-top: 8px !important; }

/* Editierbare Felder in Artikel- und Kunden-Tabelle */
.edit-input, .edit-select, .edit-textarea {
  width: 100%;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--navy);
  transition: border-color .12s, background .12s;
}
.edit-input:hover, .edit-select:hover, .edit-textarea:hover { border-color: var(--border); }
.edit-input:focus, .edit-select:focus, .edit-textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.edit-textarea { resize: vertical; min-height: 44px; line-height: 1.4; }
.pfad-cell { display: flex; align-items: center; gap: 4px; }
.kd-pfad { min-width: 200px; font-size: 12px; color: #555; flex: 1; }
.kd-land { min-width: 150px; font-size: 13px; }
.neue-kunde-hint { padding: 16px; color: var(--gray); font-size: 14px; display: flex; align-items: center; gap: 12px; }
.flag { font-style: normal; }
.pick-folder-btn { flex-shrink: 0; padding: 4px 8px; font-size: 13px; border-radius: 5px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); }
.num-input { text-align: right; }
.del-btn {
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid #e0c0c0;
  background: #fdecea;
  color: #c0392b;
  cursor: pointer;
  font-weight: 700;
}
.del-btn:hover { background: #f5b7b1; }
.data-table td.action { vertical-align: middle; }

.data-table tbody:empty + tbody::before,
#angebote-list:empty::after {
  content: "Noch keine Angebote erstellt.";
  color: var(--gray);
  font-size: 13px;
}
#angebote-list:empty {
  display: table-row-group;
}

.catalog-table td.art-nr {
  font-family: "Consolas", monospace;
  font-size: 11.5px;
  color: var(--gray);
  white-space: nowrap;
}
.catalog-table td.bezeichnung { font-weight: 600; color: var(--text); }
.catalog-table td .cat-badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 700;
}
.catalog-table td.price { color: var(--blue); font-weight: 700; white-space: nowrap; }
.catalog-table td.action { text-align: right; }
.catalog-table .ci-add {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
}

.positions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 140px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.positions-list.dragover {
  border-color: var(--blue-light);
  background: var(--blue-bg);
}
.positions-list:empty::before {
  content: "Noch keine Positionen. Artikel aus der Tabelle links per Drag & Drop hierher ziehen oder \"Übernehmen\" klicken.";
  color: var(--gray);
  font-size: 13px;
  display: block;
  text-align: center;
  padding: 30px 10px;
}

.position-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fbfcfe;
  position: relative;
  box-shadow: var(--shadow);
}

.position-item .pos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.position-item .pos-num {
  font-weight: 800;
  color: var(--navy);
  font-size: 13px;
}
.position-item .pos-cat {
  font-size: 11px;
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 700;
}
.position-item .pos-remove {
  border: none;
  background: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  font-weight: 700;
}
.position-item .pos-remove:hover { background: #fdecea; border-radius: 6px; }

.position-item .pos-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.total-fw {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}
.pos-fw-hint {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 3px;
  letter-spacing: .01em;
}
.pos-sp-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.pos-sp-std {
  font-size: 11px;
  color: var(--gray);
  text-decoration: line-through;
  font-weight: 400;
}
.pos-sp-badge {
  font-size: 10px;
  font-weight: 700;
  background: #e6f7ee;
  color: #1a7f4b;
  border: 1px solid #b7e5cc;
  border-radius: 999px;
  padding: 1px 7px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pos-row {
  display: grid;
  grid-template-columns: 100px 130px 140px;
  gap: 10px;
}
.pos-row label {
  font-size: 11px;
  color: var(--gray);
  gap: 3px;
  font-weight: 600;
}

.total-row {
  text-align: right;
  font-size: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: #4a5663;
}
.total-row strong { color: var(--navy); margin-left: 8px; font-size: 20px; }

#status-msg { font-size: 13px; color: var(--gray); margin-left: 8px; }
#status-msg.error { color: #c0392b; font-weight: 600; }
#status-msg.ok { color: var(--accent); font-weight: 600; }

/* Admin-Panel-Karte (in Einstellungen-View) */
.admin-panel-card {
  padding: 18px 16px;
}
.admin-panel-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray);
}
.kategorien-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kategorien-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.kategorien-list li span { flex: 1; }
.kategorien-list li button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray);
  padding: 0 3px;
  font-size: 14px;
  line-height: 1;
}
.kategorien-list li button:hover { color: #c0392b; }
.kategorien-list li .btn-kat-up,
.kategorien-list li .btn-kat-down { color: var(--blue-light); font-size: 12px; }
.kategorien-list li .btn-kat-up:hover,
.kategorien-list li .btn-kat-down:hover { color: var(--blue); }
.kategorien-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kategorien-add .edit-input { flex: 1; margin: 0; }

/* Einstellungen */
.settings-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}
.settings-artikel-panel { padding: 14px 16px; position: sticky; top: 80px; }
.settings-artikel-list { display: flex; flex-direction: column; max-height: calc(100vh - 220px); overflow-y: auto; }
.settings-artikel-row { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.sa-nr { font-weight: 700; color: var(--blue); min-width: 60px; flex-shrink: 0; font-size: 11px; }
.sa-bez { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-artikel-row:last-child { border-bottom: none; }
.waehrung-grid { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.waehrung-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.waehrung-label { width: 90px; color: var(--gray); font-weight: 600; }
.waehrung-unit { color: var(--gray); font-weight: 700; }
.waehrung-row .edit-input { width: 100px; }

/* Sonderpreise im Katalog */
.sp-std-price {
  text-decoration: line-through;
  color: var(--gray);
  font-size: 11px;
  display: block;
}
.sp-special {
  color: var(--accent);
}
/* Gültigkeitsbalken in der Angebotsliste */
.datum-cell { min-width: 90px; }
.validity-bar-wrap {
  position: relative;
  margin-top: 4px;
  height: 5px;
  background: #dde3ea;
  border-radius: 3px;
  overflow: hidden;
  min-width: 70px;
}
.validity-bar {
  height: 100%;
  border-radius: 3px;
}
.validity-bar.valid   { background: #2f9e6e; }
.validity-bar.expired { background: #e74c3c; }
.validity-label {
  display: block;
  font-size: 10px;
  color: var(--gray);
  margin-top: 2px;
  white-space: nowrap;
}

/* Aufklappbare Artikelbeschreibung im Katalog */
.cat-expand-cell { display: flex; align-items: center; gap: 6px; }
.cat-expand-btn {
  flex-shrink: 0;
  width: 18px; height: 18px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 3px;
  cursor: pointer;
  color: var(--gray);
}
.cat-expand-btn:hover { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-light); }
.cat-expand-placeholder { display: inline-block; width: 18px; flex-shrink: 0; }
.cat-detail-row td { background: var(--blue-bg); padding: 6px 12px 8px 32px !important; }
.cat-desc-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text); line-height: 1.6; }
.cat-desc-list li { margin: 0; }

/* Sprach-Umschalter in Schritt 3 */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.lang-btn {
  padding: 4px 12px;
  font-size: 13px;
  border: none;
  background: var(--card-bg);
  cursor: pointer;
  color: var(--gray);
  transition: background 0.15s, color 0.15s;
}
.lang-btn.active {
  background: var(--blue);
  color: #fff;
}
.lang-btn:not(.active):hover { background: var(--blue-bg); color: var(--blue); }

.sp-kunden-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-kunden-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
}
.sp-kunden-name {
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.sp-kunden-preis {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.sp-kunden-label {
  display: block;
  font-size: 10px;
  color: var(--accent);
  font-style: italic;
  margin-top: 4px;
}
.row-has-sonderpreis td:first-child {
  border-left: 3px solid var(--accent);
}

/* Verlauf */
.verlauf-aktion {
  font-weight: 600;
  color: var(--navy);
}
.verlauf-ts {
  font-size: 12px;
  color: var(--gray);
  white-space: nowrap;
}

/* Sidebar Benutzer-Info */
.sidebar-user {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-user-name {
  font-size: 12px;
  color: var(--gray);
  font-weight: 600;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-logout-btn {
  font-size: 12px;
  padding: 5px 10px;
  width: 100%;
  text-align: left;
  color: var(--gray);
}
.sidebar-logout-btn:hover { color: #c0392b; background: #fdf0ee; }

/* Login-Overlay */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 68, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.login-box {
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 40px 44px 36px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-logo {
  width: 140px;
  margin: 0 auto 4px;
  display: block;
}
.login-box h2 {
  margin: 0;
  font-size: 20px;
  text-align: center;
  color: var(--navy);
}
#login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#login-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
#login-form input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
#login-form input:focus { border-color: var(--blue-light); }
#login-form .primary { margin-top: 4px; width: 100%; justify-content: center; }
.login-error {
  font-size: 13px;
  color: #c0392b;
  background: #fdf0ee;
  border: 1px solid #f5c6c2;
  border-radius: 6px;
  padding: 7px 10px;
  margin: 0;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 68, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  backdrop-filter: blur(1px);
}
.modal-box {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 32px 36px 28px;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-box h3 { margin: 0; font-size: 17px; color: var(--navy); }
#benutzer-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#benutzer-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
#benutzer-modal-form input,
#benutzer-modal-form select {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
#benutzer-modal-form input:focus,
#benutzer-modal-form select:focus { border-color: var(--blue-light); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue-light); margin: 0 0 10px;
}
.expiry-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e74c3c; color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 4px; vertical-align: middle;
}
.expiry-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.expiry-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  border-left: 4px solid; font-size: 13px;
}
.expiry-item.soon  { background: #fff8e1; border-color: #f9a825; }
.expiry-item.overdue { background: #fdecea; border-color: #e74c3c; }
.expiry-item .ex-label { font-weight: 600; flex: 1; color: var(--text); }
.expiry-item .ex-days  { font-size: 12px; white-space: nowrap; }
.expiry-item.soon .ex-days  { color: #e65100; }
.expiry-item.overdue .ex-days { color: #c0392b; }
.expiry-item .ex-kunde { color: var(--gray); font-size: 12px; }

/* ── Kontraktliste ── */
.kl-form-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; padding: 16px 0; }
.kl-form-col { display: flex; flex-direction: column; }
.kl-form-col-wide {}
.kl-preise-grid { display: flex; flex-direction: column; gap: 6px; }
.kl-preis-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kl-preis-jahr { min-width: 40px; font-weight: 700; color: var(--navy); }
.kl-preis-inp { width: 110px !important; }
.kl-preis-pct { min-width: 54px; font-size: 11px; }
.kl-pct { font-weight: 700; }
.pct-up   { color: #c0392b; }
.pct-down { color: #2e7d32; }
.pct-zero { color: var(--gray); }
.kl-cur-year { font-weight: 700; color: var(--navy); }
#kl-table td { vertical-align: top; font-size: 12px; }
#kl-table td:nth-child(5) { min-width: 160px; }

/* ── Quartals-Tabelle ── */
.dash-quartale-wrap { overflow-x: auto; }
.dash-q-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-q-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray); font-weight: 700; padding: 6px 12px; border-bottom: 2px solid var(--border); text-align: left; }
.dash-q-table th.num { text-align: right; }
.dash-q-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.dash-q-table td.num { text-align: right; }
.dash-q-table tbody tr:last-child td { border-bottom: none; }
.dash-q-table tbody tr:hover td { background: var(--blue-bg); }
.q-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.q-offen { background: #fff8e1; color: #e65100; }
.q-beau  { background: #e8f5e9; color: #2e7d32; }
.q-abg   { background: #fdecea; color: #c62828; }
.q-pct   { font-size: 11px; color: var(--gray); margin-left: 4px; }

/* ══ FoxManager-Style Dashboard ══ */

/* KPI-Karten Zeile */
.fx-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.fx-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.fx-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fx-kpi-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.fx-kpi-body { min-width: 0; }
.fx-kpi-label { font-size: 10px; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fx-kpi-value { font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.1; white-space: nowrap; }
.fx-kpi-sub { font-size: 10px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status-Chips */
.fx-stat-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.fx-stat-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--card-bg); border: 1.5px solid;
  border-radius: 999px; padding: 5px 14px;
  font-size: 12px; font-weight: 600;
}
.fx-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fx-stat-label { color: var(--text); }
.fx-stat-count { background: var(--blue-bg); color: var(--blue); border-radius: 999px; padding: 1px 7px; font-size: 11px; }

/* Charts Zeile */
.fx-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.fx-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.fx-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.fx-chart-title { font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .06em; }

/* Vertikale Balken */
.fx-vbars {
  display: flex; align-items: flex-end; gap: 8px; height: 140px;
}
.fx-vbar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fx-vbar-val { font-size: 9px; color: var(--gray); text-align: center; min-height: 12px; }
.fx-vbar-track {
  width: 100%; flex: 1; background: var(--blue-bg); border-radius: 6px 6px 0 0;
  display: flex; align-items: flex-end; overflow: hidden;
}
.fx-vbar-fill { width: 100%; border-radius: 6px 6px 0 0; transition: height .5s ease; min-height: 4px; }
.fx-vbar-label { font-size: 10px; color: var(--gray); font-weight: 600; }

/* Donut */
.fx-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fx-donut-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fx-donut-item { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.fx-donut-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.fx-donut-item span { flex: 1; color: var(--gray); }
.fx-donut-item strong { color: var(--navy); }

/* Horizontale Balken */
.fx-bars { display: flex; flex-direction: column; gap: 8px; }

/* Dark-Mode Anpassungen */
[data-theme="dark"] .fx-kpi-card,
[data-theme="dark"] .fx-chart-card { background: var(--card-bg); }
[data-theme="dark"] .fx-vbar-track { background: var(--blue-bg); }

/* ── Dashboard: Section Labels ── */
.dash-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 10px; padding-left: 2px;
}

/* ── Pipeline-Karten ── */
.dash-pipeline {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 4px;
}
.dash-pipe-card {
  border: 1.5px solid; border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.dash-pipe-head {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
}
.dash-pipe-icon { font-size: 18px; }
.dash-pipe-label { flex: 1; }
.dash-pipe-count {
  font-size: 22px; font-weight: 800; line-height: 1;
}
.dash-pipe-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.dash-pipe-stat { text-align: center; }
.dash-pipe-stat-val   { font-size: 13px; font-weight: 700; }
.dash-pipe-stat-label { font-size: 10px; color: var(--gray); margin-top: 2px; }
.dash-pipe-bar-wrap {
  height: 6px; background: rgba(0,0,0,.08); border-radius: 999px;
  position: relative; overflow: hidden;
}
.dash-pipe-bar { height: 100%; border-radius: 999px; transition: width .5s ease; }
.dash-pipe-bar-label {
  position: absolute; right: 0; top: 8px;
  font-size: 10px; color: var(--gray); white-space: nowrap;
}

/* ── Gesamt-KPIs ── */
.dash-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 4px;
}
.dash-kpi {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.dash-kpi-icon  { font-size: 20px; margin-bottom: 4px; }
.dash-kpi-label { font-size: 10px; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.dash-kpi-value { font-size: 18px; font-weight: 800; line-height: 1.1; }
.dash-kpi-sub   { font-size: 10px; color: var(--gray); margin-top: 3px; }

/* ── Charts ── */
.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.dash-card-title { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.dash-chart-wrap { display: flex; flex-direction: column; gap: 7px; }

.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bar-row-label { width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); flex-shrink: 0; }
.bar-row-label.short { width: 70px; }
.bar-track { flex: 1; background: #eef1f5; border-radius: 4px; height: 16px; overflow: hidden; }
.bar-track-multi { display: flex; }
.bar-seg  { height: 100%; transition: width .4s; }
.bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.bar-val  { width: 80px; text-align: right; color: var(--gray); white-space: nowrap; flex-shrink: 0; }
.bar-val.short { width: 44px; }
.dash-legend { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.dash-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gray); }
.dash-leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Kleine Buttons in Tabellen */
button.small { padding: 3px 10px; font-size: 12px; }
button.danger:hover { color: #c0392b; border-color: #e8b4b0; background: #fdf0ee; }

/* Checkbox-Spalte in Angebotsliste */
.cb-col { width: 36px; text-align: center; }
.cb-col input[type="checkbox"] { cursor: pointer; width: 15px; height: 15px; }
.row-cb { cursor: pointer; width: 15px; height: 15px; }

/* Selektions-Zusammenfassungsleiste */
#selection-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-light);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
#selection-bar.visible { display: flex; }
#selection-bar strong { color: var(--blue); }
.sel-sep { color: var(--gray); }
#btn-deselect-all { margin-left: auto; }

/* Benutzer-Tabelle: Rolle-Badge */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.role-badge.admin { background: #eaf1f8; color: var(--blue); }
.role-badge.user  { background: #f0f0f0; color: #666; }
.ukat-section { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ukat-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--blue-bg); gap: 12px;
}
.ukat-section-head strong { font-size: 13px; color: var(--navy); min-width: 60px; }
.ukat-list { list-style: none; margin: 0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.ukat-list li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
.ukat-list li:last-child { border-bottom: none; }
.ukat-item-name { font-weight: 600; min-width: 100px; }
.ukat-range-preview { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ukat-range-preview-wrap { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; min-width: 0; }
.ukat-artnr-chip {
  font-size: 10px; font-weight: 600; padding: 1px 6px;
  background: var(--blue-bg); color: var(--blue);
  border: 1px solid var(--blue-light); border-radius: 999px;
  white-space: nowrap;
}
.ukat-artnr-more { font-size: 10px; color: var(--gray); font-weight: 600; }
.ukat-range-empty { font-size: 11px; color: var(--orange); font-style: italic; }
.ukat-auto-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #e8f5e9; color: #2e7d32; font-size: 11px; font-weight: 700;
  border: 1px solid #a5d6a7; white-space: nowrap;
}
[data-theme="dark"] .ukat-auto-badge { background: #1b3a1e; color: var(--accent); border-color: #2e7d32; }
.ukat-empty { color: var(--gray); font-style: italic; font-size: 12px; align-items: center; background: none !important; border: none !important; }
.ukat-del-btn { padding: 0 4px; font-size: 11px; background: none; border: none; cursor: pointer; color: var(--gray); }
.ukat-del-btn:hover { color: #c0392b; }

.bm-perms-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; background: var(--blue-bg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
}
.bm-perm {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer; font-weight: normal;
}
.bm-perm input { width: 15px; height: 15px; cursor: pointer; }

@media (max-width: 980px) {
  .sidebar { width: 76px; }
  .brand-logo { width: 52px; }
  .nav-item span:last-child { display: none; }
  .nav-item { justify-content: center; }
  .grid { grid-template-columns: 1fr 1fr; }
  .positions-layout { grid-template-columns: 1fr; }
  .steps { flex-wrap: wrap; }
}

/* ── Dark Mode ── */
.sidebar-user-card { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-role { font-size: 10px; color: var(--gray); text-transform: uppercase; letter-spacing: .05em; }
.sidebar-user-actions { display: flex; align-items: center; gap: 6px; }
.dark-toggle {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--text); display: flex; align-items: center; justify-content: center;
}
.dark-toggle:hover { background: var(--blue-bg); }
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .login-box,
[data-theme="dark"] .modal-box { background: var(--card-bg); }
[data-theme="dark"] .nav-item { color: var(--gray); }
[data-theme="dark"] .nav-item:hover { background: var(--blue-bg); }
[data-theme="dark"] .nav-item.active { background: var(--blue-bg); color: var(--navy); }
[data-theme="dark"] .data-table thead th { background: var(--blue-bg); color: var(--text); }
[data-theme="dark"] .data-table tbody tr:hover td { background: var(--blue-bg); }
[data-theme="dark"] .card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .angebot-row td { background: var(--card-bg); }
[data-theme="dark"] .swimlane-label { background: var(--bg); color: var(--gray); }
[data-theme="dark"] .overview-tabs button { background: var(--card-bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .overview-tabs button.active { background: var(--blue-bg); color: var(--navy); }
[data-theme="dark"] .status-select { color: var(--text); }

/* ── Sortierung ── */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { background: var(--blue-bg); }
th[data-sort]::after { content: ' ↕'; color: var(--gray); font-size: 10px; }
th[data-sort].sort-asc::after { content: ' ↑'; color: var(--blue); }
th[data-sort].sort-desc::after { content: ' ↓'; color: var(--blue); }

/* ── Spalten ein-/ausblenden ── */
.col-vis-wrap { position: relative; }
.col-vis-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-lg);
  z-index: 200; display: flex; flex-direction: column; gap: 7px; min-width: 160px;
}
.col-vis-panel label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.hide-col-datum       #overview-table th:nth-child(3), .hide-col-datum       #overview-table td:nth-child(3)       { display: none; }
.hide-col-kunde       #overview-table th:nth-child(4), .hide-col-kunde       #overview-table td:nth-child(4)       { display: none; }
.hide-col-angebotsnummer #overview-table th:nth-child(5), .hide-col-angebotsnummer #overview-table td:nth-child(5) { display: none; }
.hide-col-titel       #overview-table th:nth-child(6), .hide-col-titel       #overview-table td:nth-child(6)       { display: none; }
.hide-col-kategorie   #overview-table th:nth-child(7), .hide-col-kategorie   #overview-table td:nth-child(7)       { display: none; }
.hide-col-bearbeiter  #overview-table th:nth-child(8), .hide-col-bearbeiter  #overview-table td:nth-child(8)       { display: none; }
.hide-col-status      #overview-table th:nth-child(9), .hide-col-status      #overview-table td:nth-child(9)       { display: none; }
.hide-col-fest        #overview-table th:nth-child(10), .hide-col-fest       #overview-table td:nth-child(10)      { display: none; }
.hide-col-optional    #overview-table th:nth-child(11), .hide-col-optional   #overview-table td:nth-child(11)      { display: none; }
.hide-col-jaehrlich   #overview-table th:nth-child(12), .hide-col-jaehrlich  #overview-table td:nth-child(12)      { display: none; }
.hide-col-beauftragt  #overview-table th:nth-child(13), .hide-col-beauftragt #overview-table td:nth-child(13)      { display: none; }

/* ── Kundendetailseite ── */
.kd-stats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.kd-stat {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 20px; flex: 1; min-width: 130px;
}
.kd-stat-label { font-size: 12px; color: var(--gray); margin-bottom: 4px; }
.kd-stat-value { font-size: 22px; font-weight: 800; color: var(--navy); }

/* ── Kommentar-Modal ── */
.km-add-box {
  background: var(--blue-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.km-add-box textarea {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
}
.km-list { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; }
.km-entry {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--card-bg);
  position: relative;
}
.km-entry-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--gray); margin-bottom: 6px;
}
.km-entry-user { font-weight: 700; color: var(--navy); }
.km-entry-text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.km-del-btn {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--gray); font-size: 13px; padding: 2px 6px;
  border-radius: 4px; opacity: 0;
}
.km-entry:hover .km-del-btn { opacity: 1; }
.km-del-btn:hover { background: #fde8e8; color: #c0392b; }
.km-empty { text-align: center; color: var(--gray); font-size: 13px; padding: 20px 0; font-style: italic; }
.km-has-notes {
  background: #eaf7ef !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="dark"] .km-has-notes { background: #192b22 !important; }
.km-row-preview {
  display: flex; gap: 6px; align-items: baseline;
  margin-top: 3px; font-size: 11px;
  border-left: 2px solid var(--accent); padding-left: 6px;
}
.km-row-user { font-weight: 700; color: var(--accent); white-space: nowrap; }
.km-row-text { color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--blue); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  margin-left: 4px; vertical-align: middle;
}
.btn-kommentar {
  background: none; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; padding: 3px 7px;
  font-size: 12px; color: var(--gray);
}
.btn-kommentar:hover { border-color: var(--blue); color: var(--blue); }

/* ── Preishistorie ── */
.ph-btn { font-size: 11px; padding: 2px 8px; }
.ph-change-up   { color: var(--accent); font-weight: 700; }
.ph-change-down { color: var(--orange); font-weight: 700; }

/* ── Status-Badge (Kundendetail) ── */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-badge.status-vorbereitung  { background: #f0f2f5; color: #6b7a8d; }
.status-badge.status-geprueft      { background: #e8f4fd; color: #1565c0; }
.status-badge.status-gesendet      { background: var(--blue-bg); color: var(--blue); }
.status-badge.status-abgelehnt     { background: #fde8e8; color: #c0392b; }
.status-badge.status-neue-version  { background: #fff3cd; color: #7a5f00; }

/* ── Artikelliste: Gruppen + Duplikate ── */
.artnr-group-row td { background: var(--blue-bg) !important; }
.artnr-group-label {
  font-size: 11px; font-weight: 700; color: var(--blue);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px !important;
}
.row-artnr-dup td { background: #fff0f0 !important; }
[data-theme="dark"] .row-artnr-dup td { background: #2d1a1a !important; }
.inp-artnr-dup { border-color: #e74c3c !important; color: #c0392b !important; }
.artnr-dup-badge {
  font-size: 10px; font-weight: 700; color: #c0392b;
  background: #fde8e8; border: 1px solid #f5c6c6;
  border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  white-space: nowrap;
}

/* ── Preise-View ── */
#preise-list { display: flex; flex-direction: column; gap: 10px; }
.preise-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.preise-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--blue-bg);
  border-bottom: 1px solid var(--border);
}
.preise-artnr { font-size: 12px; font-weight: 700; color: var(--gray); min-width: 80px; }
.preise-bez   { font-weight: 700; color: var(--navy); flex: 1; }
.preise-kat   { font-size: 11px; color: var(--gray); flex: 1; }
.preise-hist-btn { font-size: 11px; margin-left: auto; }
.preise-table { width: 100%; border-collapse: collapse; }
.preise-table td { padding: 7px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.preise-table tr:last-child td { border-bottom: none; }
.preise-std-row { background: transparent; }
.preise-sp-row  { background: #f6fdf9; }
[data-theme="dark"] .preise-sp-row { background: #192b22; }
.preise-info-cell { color: var(--gray); font-size: 13px; }
.preise-preis-cell { width: 140px; white-space: nowrap; }
.preise-preis-cell input { width: 120px; text-align: right; }
.preise-add-row td { padding: 8px 16px; }
.preise-add-form { display: flex; gap: 8px; align-items: center; }
.sp-inline-input { width: 120px; text-align: right; }
.sp-pct { font-size: 11px; font-weight: 600; white-space: nowrap; }
.sp-pct-down { color: var(--accent); }
.sp-pct-up   { color: var(--orange); }

/* ── Kunde-Link in Tabelle ── */
.kunde-link { cursor: pointer; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.kunde-link:hover { color: var(--navy); }