:root {
  /* Brand: Petrol von ber.at (User-Wunsch ab 1.21.0). Vorher Magenta-Rot
     (E2001A). Weiß-Hintergrund bleibt unverändert. */
  --brand:      #005a75;
  --brand-dark: #00445b;
  --brand-ink:  #ffffff;
  --brand-soft: #e0f2f8;   /* heller Petrol-Tint für Hover/Background */
  --ink: #1f1f1f;
  --ink-soft: #5a5a5a;
  --line: #e0e0e0;
  --bg: #f5f5f7;
  --bg-card: #ffffff;
  --ok: #0a7a2f;
  --warn: #b36a00;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
}

/* ───── Header ───── */
.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-logo { height: 42px; width: auto; }
.app-title h1 {
  font-size: 18px;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.app-title .tagline {
  font-size: 12px;
  color: var(--ink-soft);
}
.toolbar {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ───── Buttons ───── */
button {
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
button:hover { background: #fafafa; border-color: #c8c8c8; }
button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}
button.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.secondary {
  border-style: dashed;
  color: var(--ink-soft);
  width: 100%;
  margin-top: 8px;
}
button.pos-del {
  width: 32px;
  padding: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
}
button.pos-del:hover { color: var(--brand); border-color: var(--brand); }

/* ───── Magenta-CRM-Loader (neben Kundennummer) ─────
   Bei Neukunde wird die Zeile nicht entfernt sondern nur unsichtbar
   gemacht (.kn-hidden) — so reserviert sie Platz und das Layout springt
   beim Wechsel Neu↔Bestand nicht (Andreas 2026-05-24). */
.kunde-nummer-field {
  /* Volle Breite + reserve Höhe für Label + 32px-Input/Button-Row + 4px gap. */
  min-height: 58px;
  position: relative;
}
.kunde-nummer-field.kn-hidden {
  visibility: hidden;
  pointer-events: none;
}
.knd-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.knd-row input { flex: 1 1 auto; min-width: 0; }
button.knd-load-btn {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  border-style: solid;
  white-space: nowrap;
}
button.knd-load-btn:disabled { opacity: 0.55; cursor: progress; }
.knd-load-status {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: var(--ink-soft);
}
.knd-load-status.error { color: #b00020; }
.knd-load-status.ok    { color: #1b6f3a; }

/* firmenbuch.ai-Import (v1.91.0) — Link-Feld zwischen Firmendaten und
   Ansprechperson. Layout analog zur Magenta-Kundennummer-Zeile. */
.fb-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.fb-row input { flex: 1 1 auto; min-width: 0; }
button.fb-load-btn {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  border-style: solid;
  white-space: nowrap;
}
button.fb-load-btn:disabled { opacity: 0.55; cursor: progress; }
.fb-hint-inline { font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.fb-status {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: var(--ink-soft);
}
.fb-status.error { color: #b00020; }
.fb-status.ok    { color: #1b6f3a; }

/* Kundensuche-Dropdown unter dem Kundennummer-Feld */
.knd-suggest {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 40; margin-top: 2px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, #d0d0d0);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  max-height: 280px; overflow-y: auto;
}
.knd-suggest-item {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 10px; border: none; background: none; cursor: pointer;
  border-bottom: 1px solid var(--line, #eee);
}
.knd-suggest-item:last-child { border-bottom: none; }
.knd-suggest-item:hover { background: var(--brand-soft, #e0f2f8); }
.knd-suggest-nr   { flex: 0 0 auto; font-family: monospace; font-weight: 600; color: var(--brand, #005a75); }
.knd-suggest-name { color: var(--ink, #222); font-size: 13px; }
/* CRM-Direktladen-Eintrag: dezent abgesetzt vom AIC-Trefferblock. */
.knd-suggest-crm { background: var(--bg-subtle, #f4f6f7); border-top: 1px solid var(--line, #eee); }
.knd-suggest-crm .knd-suggest-name { color: var(--ink-soft, #6b6b6b); font-style: italic; }

/* ───── "Aktive Verträge"-Modal (öffnet nach CRM-Lookup) ───── */
#vtr-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
#vtr-overlay.open { display: flex; }
#vtr-box {
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: 0;
}
#vtr-box .pw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #e6e6e6;
}
#vtr-box .pw-head h3 { margin: 0; font-size: 16px; }
#vtr-box .pw-close {
  background: transparent; border: none; font-size: 22px;
  cursor: pointer; padding: 0 4px; color: #666;
  width: auto; margin: 0;
}
.vtr-subtitle {
  padding: 10px 18px 4px; color: var(--ink-soft);
  font-size: 13px;
}
.vtr-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.vtr-pill {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 12px;
  background: #eef2f7; color: #334155; white-space: nowrap;
}
.vtr-pill-account   { background: #e0f2fe; color: #0c4a6e; }
.vtr-pill-segment   { background: #f3e8ff; color: #6b21a8; }
.vtr-pill-territory { background: #fef3c7; color: #92400e; }
.vtr-list {
  padding: 12px 18px;
  display: grid; gap: 10px;
}
.vtr-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  margin: 0;
}
.vtr-card:hover { background: #fff; border-color: var(--brand); }
.vtr-card:active { transform: scale(0.997); }
.vtr-card-selected { background: #e8f7ec !important; border-color: #1b6f3a !important; }
.vtr-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.vtr-card-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.vtr-card-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; white-space: nowrap;
}
.vtr-status-active   { background: #e8f7ec; color: #1b6f3a; }
.vtr-status-vvl      { background: #fff3d9; color: #8a5b00; }
.vtr-status-inactive { background: #f1f1f1; color: #777; }
.vtr-card-meta {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
  font-size: 12px;
}
.vtr-card-meta > div { display: flex; gap: 6px; }
.vtr-card-meta dt { color: var(--ink-soft); margin: 0; }
.vtr-card-meta dd { margin: 0; color: var(--ink); font-weight: 500; }
.vtr-card-foot {
  margin-top: 8px; font-size: 11px; color: var(--ink-soft);
  text-align: right; font-style: italic;
}
.vtr-foot-hint {
  padding: 10px 18px 16px;
  font-size: 11px; color: var(--ink-soft);
  border-top: 1px solid #f0f0f0;
}

/* ───── Rufnummern-Sektion im Verträge-Modal ───── */
.vtr-numbers {
  padding: 8px 18px 16px;
  border-top: 1px solid #f0f0f0;
}
.vtr-numbers-title {
  margin: 8px 0 8px 0;
  font-size: 13px;
  color: var(--ink);
}
.vtr-numbers-loading,
.vtr-numbers-error,
.vtr-numbers-empty {
  font-size: 12px; color: var(--ink-soft); padding: 8px 0;
}
.vtr-numbers-error { color: #b00020; }
.vtr-numbers-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.vtr-numbers-table th {
  text-align: left; padding: 4px 6px;
  background: #fafafa; border-bottom: 1px solid #e0e0e0;
  font-weight: 600; color: var(--ink-soft);
}
.vtr-numbers-table td {
  padding: 4px 6px; border-bottom: 1px solid #f0f0f0;
}
.vtr-rufnr { font-weight: 600; font-family: ui-monospace, monospace; }
.vtr-numbers-table-inactive { opacity: 0.65; margin-top: 4px; }
.vtr-numbers-inactive { margin-top: 8px; font-size: 11px; }
.vtr-numbers-inactive summary { cursor: pointer; color: var(--ink-soft); }
.vtr-numbers-raw {
  background: #f6f6f6; padding: 8px; border-radius: 4px;
  font-size: 10px; max-height: 200px; overflow: auto; white-space: pre-wrap;
}

/* ───── VVL-Übernahme: Checkbox-Spalte + Footer ───── */
.vtr-col-check { width: 24px; padding-right: 0 !important; }
.vtr-col-check input { margin: 0; cursor: pointer; }
.vtr-vvl-footer {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 10px; padding: 10px 12px;
  background: #f3f6fa; border: 1px solid #d8e0ea; border-radius: 6px;
}
.vtr-vvl-count {
  font-size: 12px; font-weight: 600; color: var(--ink);
  min-width: 200px;
}
.vtr-vvl-tarif, .vtr-vvl-bindung {
  flex: 0 1 auto; padding: 4px 6px; font-size: 12px;
  border: 1px solid #c8d0dc; border-radius: 4px; background: #fff;
}
.vtr-vvl-tarif { flex: 1 1 240px; min-width: 0; }
button.vtr-vvl-apply {
  flex: 0 0 auto; width: auto; margin: 0;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
  border-style: solid;
}
button.vtr-vvl-apply:hover:not(:disabled) {
  background: var(--brand-dark); border-color: var(--brand-dark);
}
button.vtr-vvl-apply:disabled {
  opacity: 0.5; cursor: not-allowed; background: #cfd5dd; border-color: #cfd5dd;
}

/* ───── FNI Options-Sub-Tabelle ───── */
.vtr-fni-opts-btn {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid #c8d0dc; background: #f8fafc; color: #334155;
  cursor: pointer; width: auto; margin: 0; white-space: nowrap;
}
.vtr-fni-opts-btn:hover { background: #eef2f7; border-color: #94a3b8; }
.vtr-fni-opts-btn-open { background: #e2e8f0; border-color: #475569; }
.vtr-fni-opts-row td { padding: 6px 12px !important; background: #f8fafc; }
.vtr-fni-opts-table {
  width: 100%; border-collapse: collapse; font-size: 10px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
}
.vtr-fni-opts-table th {
  background: #eef2f7; padding: 3px 6px; text-align: left;
  border-bottom: 1px solid #cbd5e1; color: #475569;
}
.vtr-fni-opts-table td {
  padding: 3px 6px; border-bottom: 1px solid #f1f5f9;
  background: #fff !important;
}
.vtr-fni-opt-check, .vtr-fni-opt-check-all { margin: 0; cursor: pointer; }

/* Sortierbare Tabellen-Header (Mobile/FNI/Generic) */
.vtr-numbers-table th.vtr-sortable {
  cursor: pointer; user-select: none;
  position: relative; padding-right: 18px;
}
.vtr-numbers-table th.vtr-sortable:hover { background: #e0e7f0; }
.vtr-numbers-table th.vtr-sortable::after {
  content: "↕"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); opacity: 0.35; font-size: 10px;
}
.vtr-numbers-table th.vtr-sort-asc::after  { content: "↑"; opacity: 1; color: var(--brand); }
.vtr-numbers-table th.vtr-sort-desc::after { content: "↓"; opacity: 1; color: var(--brand); }

/* Bestand-Notiz unter dem Tarif-Namen im Druck/Vorschau (zeigt z. B.
   Optionen die per VVL aus dem CRM mit übernommen wurden). */
.pos-bestand-line {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.pos-bestand-line em { font-style: italic; }

/* ───── Layout ───── */
.layout {
  display: grid;
  /* Sidebar | Form-Pane (ziehbar via --form-w) | Resizer | Vorschau */
  grid-template-columns: 180px var(--form-w, 480px) 10px 1fr;
  gap: 16px;
  padding: 20px;
  align-items: start;
}
@media (max-width: 1300px) {
  .layout { grid-template-columns: 160px var(--form-w, 1fr) 10px 1fr; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .pane-resizer { display: none; }
}

/* Ziehbarer Trenner zwischen Eingabe und Vorschau (v1.78). Sticky, damit
   der Griff beim Scrollen erreichbar bleibt. */
.pane-resizer {
  align-self: stretch;
  position: sticky;
  top: 64px;
  height: calc(100vh - 80px);
  cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  touch-action: none;
}
.pane-resizer::before {
  content: "";
  width: 3px; height: 56px;
  background: var(--line, #d0d0d0);
  border-radius: 3px;
  transition: background .15s, height .15s;
}
.pane-resizer:hover::before,
.pane-resizer:focus-visible::before,
.pane-resizer.dragging::before {
  background: var(--brand, #005a75);
  height: 100%;
}
.pane-resizer:focus-visible { outline: none; }

/* Sidebar — fixed neben dem Form-Pane mit Anker-Links zu den Sektionen.
   Stil-Vorbild: DREI-Angebotstool. */
.sidebar {
  position: sticky; top: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px;
  font-size: 13px;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 0 10px;
}
.sidebar h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft, #888);
  font-weight: 600;
}
.nav-toggle {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, #d0d0d0);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--ink-soft, #888);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-toggle:hover {
  background: var(--brand-soft, #e0f2f8);
  color: var(--brand, #005a75);
  border-color: var(--brand, #005a75);
}

/* Eingeklappt: Sidebar-Spalte raus, Form-Pane + Vorschau bekommen den Platz. */
.layout.nav-collapsed { grid-template-columns: var(--form-w, 480px) 10px 1fr; }
.layout.nav-collapsed .sidebar { display: none; }
@media (max-width: 1300px) {
  .layout.nav-collapsed { grid-template-columns: var(--form-w, 1fr) 10px 1fr; }
}

/* Schmaler Wieder-Ausklapp-Button, nur im eingeklappten Zustand sichtbar. */
.nav-reopen {
  display: none;
  position: fixed; left: 8px; top: 72px; z-index: 50;
  width: 26px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line, #d0d0d0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--brand, #005a75);
  font-size: 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.nav-reopen:hover { background: var(--brand-soft, #e0f2f8); }
.layout.nav-collapsed .nav-reopen { display: flex; }
@media (max-width: 1100px) { .nav-reopen { display: none !important; } }
.sidebar nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--ink, #222);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sidebar nav a:hover { background: var(--brand-soft, #e0f2f8); color: var(--brand, #005a75); }
.sidebar nav a.active { background: var(--brand, #005a75); color: var(--brand-ink, #fff); font-weight: 600; }

/* ───── Historie-Box (Server-Angebote) ───── */
.historie-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #e0e0e0); }
.historie-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.historie-head h4 {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft, #888); font-weight: 600;
}
.historie-refresh {
  width: 22px; height: 22px; border: 1px solid var(--line, #d0d0d0); border-radius: 5px;
  background: var(--bg-card, #fff); color: var(--ink-soft, #888); cursor: pointer; font-size: 12px; line-height: 1;
}
.historie-refresh:hover { color: var(--brand, #005a75); border-color: var(--brand, #005a75); }
.historie-status { font-size: 12px; color: var(--ink-soft, #888); margin-bottom: 6px; }
/* Manueller "jetzt auf Server speichern"-Button */
.historie-save {
  width: 100%; padding: 8px 10px; margin-bottom: 4px;
  border: none; border-radius: 6px;
  background: var(--brand, #005a75); color: #fff;
  cursor: pointer; font-size: 12px; font-weight: 600;
}
.historie-save:hover { filter: brightness(1.08); }
.historie-save:disabled { opacity: .6; cursor: progress; }
.historie-count { font-size: 11px; color: var(--ink-soft, #888); }
.historie-login {
  width: 100%; padding: 7px 8px; border: 1px solid var(--brand, #005a75); border-radius: 6px;
  background: var(--brand-soft, #e0f2f8); color: var(--brand, #005a75);
  cursor: pointer; font-size: 12px; font-weight: 600; text-align: left;
}
.historie-login:hover { background: var(--brand, #005a75); color: #fff; }
.historie-login:disabled { opacity: .6; cursor: progress; }
.historie-err { display: block; margin-top: 4px; color: #b00020; font-size: 11px; }
.historie-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.historie-item {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 6px 8px; border: 1px solid var(--line, #eee); border-radius: 6px;
  background: var(--bg-card, #fff); cursor: pointer;
}
.historie-item:hover { background: var(--brand-soft, #e0f2f8); border-color: var(--brand, #005a75); }
.historie-firma { font-size: 12px; font-weight: 600; color: var(--ink, #222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historie-meta { font-size: 10px; color: var(--ink-soft, #888); }

/* ── Rufnummernplan-Eingabe (Formular) ── */
.rnp-edit-hint, .anm-hint { font-size: 12px; color: var(--ink-soft, #888); margin-bottom: 6px; }
.rnp-zeilen-head {
  display: grid; grid-template-columns: 1.3fr 92px 1fr 1fr 1fr 34px; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-soft, #888);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px;
}
#rnp-zeilen-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.rnp-zeile { display: grid; grid-template-columns: 1.3fr 92px 1fr 1fr 1fr 34px; gap: 6px; align-items: center; }
/* Bei "Neu" sind Rufnummer + Anbieter nicht relevant → ausgrauen + sperren. */
.rnp-zeile.rnp-neu .rnp-rufnummer,
.rnp-zeile.rnp-neu .rnp-provider { opacity: .4; pointer-events: none; background: var(--bg-subtle, #f4f6f7); }
.rnp-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rnp-zeile-del {
  width: 34px; height: 36px; border: 1px solid var(--line, #d0d0d0); border-radius: 6px;
  background: var(--bg-card, #fff); color: var(--ink-soft, #888); cursor: pointer; font-size: 16px; line-height: 1;
}
.rnp-zeile-del:hover { color: #c42826; border-color: #c42826; }

/* ───── Form ───── */
/* Form-Pane ist sticky: fixiert links beim Page-Scroll, eigener
   Scroll-Bereich für sehr lange Formulare. Andreas-Wunsch 2026-05-24:
   "alles auf einen Blick" → kompakter (siehe fieldset/label/input). */
.form-pane {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  position: sticky;
  top: 64px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 8px 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
fieldset:first-of-type { border-top: 0; padding-top: 0; }
legend {
  grid-column: 1 / -1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0;
  margin-bottom: 2px;
}
label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--ink-soft);
  gap: 2px;
}
label.full { grid-column: 1 / -1; }
label.small { max-width: 120px; }
input, select, textarea {
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0, 90, 117, .15);  /* Petrol mit 15% Alpha */
}
input[readonly] { background: #f5f5f7; color: var(--ink-soft); }
textarea { grid-column: 1 / -1; resize: vertical; }

/* Positionen */
#positionen-list {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 14px;
}
/* Positions-Editor v1.77: Karte statt enger Grid-Zeile. Jede Position
   ist eine eigenständige Karte mit beschrifteten Feldern. */
.position-row {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, #e0e0e0);
  border-radius: 10px;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* Karten-Body: die Felder unter dem Kopf (kompaktere vertikale Abstände). */
.pos-card-body { display: flex; flex-direction: column; gap: 8px; }

/* Karten-Kopf: Drag-Griff + Einklapp-Pfeil + Positions-Nummer + Typ + Löschen */
.pos-card-head { display: flex; align-items: center; gap: 10px; }
.pos-drag-handle {
  flex: 0 0 auto; cursor: grab; user-select: none;
  color: var(--ink-soft, #999); font-size: 16px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
}
.pos-drag-handle:hover { color: var(--brand, #005a75); background: var(--brand-soft, #e0f2f8); }
.pos-drag-handle:active { cursor: grabbing; }
.pos-num-field {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--brand, #005a75); white-space: nowrap;
}
.pos-card-head .pos-num-input {
  width: 52px; flex: 0 0 auto; text-align: center; font-weight: 700; color: var(--brand, #005a75);
}
.pos-card-head .pos-ursprung { flex: 1; min-width: 0; font-weight: 600; }
.pos-card-head .pos-del { flex: 0 0 auto; width: 36px; height: 36px; }
/* Beim Ziehen ausgegraut — Live-Reorder erfolgt direkt im Drag-over. */
.position-row.dragging, .kategorie-row.dragging { opacity: .45; }

/* Feld mit Label darüber */
.pos-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-field-lbl {
  font-size: 11px; font-weight: 600; color: var(--ink-soft, #5a5a5a);
  text-transform: uppercase; letter-spacing: .03em;
  text-align: left;
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
}
.pos-field-lbl > button { margin-left: auto; }   /* z.B. ×-Button bei Dauergutschrift rechts */

/* ── Einklappbarer Karten-Kopf ────────────────────────────────────── */
.pos-collapse-toggle {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, #d0d0d0); border-radius: 6px;
  background: var(--bg-card, #fff); color: var(--ink-soft, #888);
  cursor: pointer; font-size: 13px; line-height: 1;
  transition: transform .15s, background .15s, color .15s;
}
.pos-collapse-toggle:hover { background: var(--brand-soft, #e0f2f8); color: var(--brand, #005a75); }
.position-row.collapsed .pos-collapse-toggle { transform: rotate(-90deg); }
/* Kurzfassung (Tarif + Preis) — nur im eingeklappten Zustand sichtbar */
.pos-collapsed-summary { display: none; }
.position-row.collapsed .pos-collapsed-summary {
  display: block; flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink, #222);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.position-row.collapsed .pos-card-body { display: none; }
.position-row.collapsed .pos-ursprung { display: none; }  /* Typ steht in der Kurzfassung */
.position-row.collapsed { padding-bottom: 12px; }

/* ── Extra-Buttons (+Hardware / +Einmalgutschrift / +Hardware-Budget) in einer Zeile ── */
.pos-extras-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pos-extras-row > div { flex: 0 1 auto; min-width: 0; }

/* Zahlen-Felder-Reihe: Menge | Bindung | Listenpreis | Rabatt */
.pos-fields-grid {
  display: grid;
  grid-template-columns: 72px 1.4fr 1fr 1fr;
  gap: 10px;
}
.pos-field--budget { display: none; }            /* nur bei Gerätebezug */
.pos-listenpreis { text-align: right; }

/* Dauergutschrift einblendbar */
.pos-dauer-add {
  align-self: flex-start;
  font-size: 12px; padding: 6px 10px; line-height: 1;
  background: #f3f4f6; color: #374151;
  border: 1px dashed #9ca3af; border-radius: 6px;
  cursor: pointer;
}
.pos-dauer-add:hover { background: #e5e7eb; border-style: solid; }
.pos-field--dauer { display: none; max-width: 260px; }
.position-row.dauer-shown .pos-field--dauer { display: flex; }
.position-row.dauer-shown .pos-dauer-add { display: none; }

/* Automatische Einmalkosten (AIC Mobile): nur sichtbar, wenn der Tarif solche Kosten definiert. */
.pos-einmalkosten-block { display: none; }
.position-row.aic-ek .pos-einmalkosten-block {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  background: var(--brand-soft, #e0f2f8);
  border-radius: 6px;
}
.pos-ek-info { font-size: 12px; color: var(--ink-soft, #555); }
.pos-portierung-field {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink, #222); white-space: nowrap;
}
.pos-portierung-anzahl { width: 64px; }
.pos-dauer-del {
  font-size: 13px; line-height: 1; padding: 0 4px;
  background: transparent; color: #9ca3af; border: 0; cursor: pointer;
}
.pos-dauer-del:hover { color: #b91c1c; }
/* Einheitliche Feld-Optik in der Karte */
.position-row input,
.position-row select {
  font-size: 14px; padding: 9px 10px;
  border: 1px solid var(--line, #d0d0d0); border-radius: 6px;
  background: var(--bg-card, #fff); color: var(--ink, #1f1f1f);
  width: 100%; box-sizing: border-box; min-width: 0;
}
.position-row .pos-rufnummer { font-family: monospace; }

/* Tarif-Zelle: zeigt je nach Typ Tarif-Select / Bestandstarif-Text /
   Geräte-Picker. */
.pos-tarif-cell { width: 100%; min-width: 0; }
.pos-tarif-cell > .pos-bestandstarif { display: none; }
.position-row.urs-verl-keep .pos-tarif-cell > .pos-tarif { display: none; }
.position-row.urs-verl-keep .pos-tarif-cell > .pos-bestandstarif { display: block; }
.position-row.urs-geraet .pos-tarif-cell > .pos-tarif,
.position-row.urs-geraet .pos-tarif-cell > .pos-bestandstarif { display: none; }

/* Bindung-Zelle: Bindungs-Dropdown ODER bei Gerätebezug Stückpreis. */
.pos-bindung-cell { width: 100%; min-width: 0; }
.pos-bindung-cell > .pos-geraet-preis { display: none; }
.position-row.urs-geraet .pos-bindung-cell > .pos-bindung { display: none; }
.position-row.urs-geraet .pos-bindung-cell > .pos-geraet-preis { display: block; text-align: right; font-weight: 600; }

/* Geräte-Picker: Text-Input + Katalog-Button nebeneinander. */
.pos-geraet-pick-wrap { display: none; gap: 6px; align-items: stretch; }
.position-row.urs-geraet .pos-geraet-pick-wrap { display: flex; }
.pos-geraet-pick-wrap > .pos-geraet-name { flex: 1; min-width: 0; }
.pos-geraet-pick {
  padding: 9px 14px; font-size: 13px;
  background: var(--brand, #005a75); color: #fff;
  border: 1px solid var(--brand, #005a75); border-radius: 6px;
  cursor: pointer; white-space: nowrap; font-weight: 600;
  width: auto;
}
.pos-geraet-pick:hover { background: var(--brand-dark, #00445b); }

/* Gerätebezug: Listenpreis + Rabatt + Rufnummer raus, HW-Budget rein. */
.position-row.urs-geraet .pos-field--listenpreis,
.position-row.urs-geraet .pos-field--rabatt,
.position-row.urs-geraet .pos-field--rufnummer { display: none; }
.position-row.urs-geraet .pos-field--budget { display: flex; }
.position-row.urs-geraet .pos-fields-grid { grid-template-columns: 72px 1fr 1fr; }
.position-row.urs-geraet .pos-menge { text-align: center; font-weight: 600; }
.position-row.urs-geraet .pos-geraet-budget { text-align: right; font-weight: 600; }
.position-row.urs-geraet .pos-dauer-add,
.position-row.urs-geraet .pos-field--dauer { display: none !important; }

/* Sub-Blocks bei Gerätebezug ausblenden (für reine Geräte-Positionen
   nicht relevant). */
.position-row.urs-geraet > .pos-crosssell-block,
.position-row.urs-geraet > .pos-hardware-block,
.position-row.urs-geraet > .pos-gutschrift-block,
.position-row.urs-geraet > .pos-hwbudget-block { display: none; }

/* Geräte-Rest-Block: nur bei Gerätebezug, zeigt Live-Rest. */
.pos-geraet-rest-block { display: none; align-items: center; }
.position-row.urs-geraet .pos-geraet-rest-block { display: flex; }
.pos-geraet-rest {
  font-size: 12px; font-weight: 600; color: #0e7490;
  background: #ecfeff; padding: 5px 10px; border-radius: 4px;
}
.pos-geraet-rest.negativ { color: #991b1b; background: #fee2e2; }

/* ───── Sortier-Pfeile + Kategorie-Überschrift (Editor, v1.79) ───── */
.pos-sort, .kat-sort {
  display: flex; flex-direction: column; gap: 1px;
  flex: 0 0 auto;
}
.pos-up, .pos-down {
  width: 26px; height: 18px; padding: 0;
  font-size: 10px; line-height: 1;
  background: var(--bg-card, #fff); color: var(--ink-soft, #5a5a5a);
  border: 1px solid var(--line, #d0d0d0); border-radius: 4px;
  cursor: pointer;
}
.pos-up:hover, .pos-down:hover { background: var(--brand-soft, #e0f2f8); color: var(--brand, #005a75); border-color: var(--brand, #005a75); }

.pos-add-row { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.pos-tools-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-bottom: 6px; }
.pos-collapse-all {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: var(--radius, 8px);
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.pos-collapse-all:hover { border-color: var(--brand); color: var(--brand); }

/* Kategorie-Überschrift-Karte */
.kategorie-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--brand-soft, #e0f2f8);
  border: 1px solid var(--brand, #005a75);
  border-radius: 10px;
  padding: 10px 12px;
}
.kat-icon { color: var(--brand, #005a75); font-size: 16px; flex: 0 0 auto; }
.kat-titel {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 700;
  padding: 8px 10px;
  border: 1px solid var(--brand, #005a75); border-radius: 6px;
  background: #fff; color: var(--brand-dark, #00445b);
}
.kategorie-row .pos-del { flex: 0 0 auto; width: 34px; height: 34px; }

/* ───── Kategorie-Darstellung in Vorschau/PDF (v1.79) ───── */
.pv-positions .pv-kat-row td {
  background: #f4f6f7;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .01em;
  color: #1f1f1f;
  padding: 8px 8px 6px;
  border-top: 1px solid var(--line, #e4e8ea);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pv-positions .pv-kat-subtotal td {
  font-weight: 700;
  border-top: 1px solid var(--line, #e4e8ea);
  border-bottom: none;
  padding: 5px 8px 10px;
  background: transparent;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pv-kat-summary {
  margin: 8px 0 0 auto;
  max-width: 360px;
  font-size: 12px;
  /* Aufstellung (Titel + Kategorie-Zeilen + Gesamt) nie über einen
     Seitenumbruch zerreißen. */
  page-break-inside: avoid;
  break-inside: avoid;
}
.pv-kat-summary-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft, #6b6b6b); margin-bottom: 4px;
}
.pv-kat-summary .row {
  display: flex; justify-content: space-between;
  padding: 3px 0; border-bottom: 1px dotted var(--line, #ddd);
}
.pv-kat-summary .row.gesamt {
  border-bottom: 0; border-top: 2px solid #1f1f1f;
  font-weight: 700; font-size: 13px; margin-top: 2px; padding-top: 5px;
}

/* Hardware-Sub-Sektion pro Position: nimmt die volle Breite unterhalb
   der Hauptzeile ein. Liste leer, bis User "+ Hardware" klickt. */
.pos-hardware-block {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px; margin-left: 8px;
  border-left: 2px dashed var(--ink-soft, #ddd);
  padding-left: 8px;
}
.pos-hardware-list { display: flex; flex-direction: column; gap: 4px; }
.pos-hardware-list:empty + .pos-add-hw { margin-top: 0; }
.pos-hw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 28px;
  gap: 6px;
  align-items: center;
}
.pos-hw-row input { font-size: 12px; padding: 4px 6px; min-width: 0; }
.pos-hw-del {
  width: 28px; height: 24px; padding: 0;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer; font-size: 14px;
}
.pos-hw-del:hover { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.pos-add-hw,
.pos-add-gs,
.pos-add-hwb {
  align-self: flex-start;
  font-size: 11px; padding: 3px 8px;
  background: transparent; border: 1px dashed var(--ink-soft, #aaa);
  border-radius: 4px; cursor: pointer; color: var(--ink-soft, #666);
}
.pos-add-hw:hover,
.pos-add-gs:hover,
.pos-add-hwb:hover { color: var(--brand, #005a75); border-color: var(--brand, #005a75); }

/* Einmalgutschrift-Sub-Sektion: spiegelt Hardware, nur negative Preise.
   Gestrichelte Linie in dezentem Rotton, damit Vertrieb visuell unterscheidet. */
.pos-gutschrift-block {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px; margin-left: 8px;
  border-left: 2px dashed #fca5a5;
  padding-left: 8px;
}
.pos-gutschrift-list { display: flex; flex-direction: column; gap: 4px; }
.pos-gutschrift-list:empty + .pos-add-gs { margin-top: 0; }
.pos-gs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 28px;
  gap: 6px;
  align-items: center;
}
.pos-gs-row input { font-size: 12px; padding: 4px 6px; min-width: 0; }
.pos-gs-del {
  width: 28px; height: 24px; padding: 0;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer; font-size: 14px;
}
.pos-gs-del:hover { background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* Hardware-Budget-Sub-Sektion: 1:1 wie Einmalgutschrift, nur Orange-Farbcode
   damit der Vertrieb visuell zwischen "allgemeiner Gutschrift" (rot) und
   "speziellem HW-Budget" (orange) trennen kann. */
.pos-hwbudget-block {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px; margin-left: 8px;
  border-left: 2px dashed #fdba74;
  padding-left: 8px;
}
.pos-hwbudget-list { display: flex; flex-direction: column; gap: 4px; }
.pos-hwbudget-list:empty + .pos-add-hwb { margin-top: 0; }
.pos-hwb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 28px;
  gap: 6px;
  align-items: center;
}
.pos-hwb-row input { font-size: 12px; padding: 4px 6px; min-width: 0; }
.pos-hwb-del {
  width: 28px; height: 24px; padding: 0;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer; font-size: 14px;
}
.pos-hwb-del:hover { background: #ffedd5; border-color: #f97316; color: #9a3412; }

/* Fix-Text-Label fuer Einmalgutschrift / Hardware-Budget (v1.54.0). Ersetzt
   das frueher freie Input-Feld — Vertrieb sieht die Standard-Beschreibung,
   gibt nur noch den Betrag ein. */
.pos-gs-row .fixed-text,
.pos-hwb-row .fixed-text {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-soft, #475569);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 4px 8px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: text;
}
.pos-gs-row .fixed-text { border-color: #fecaca; background: #fef2f2; }
.pos-hwb-row .fixed-text { border-color: #fed7aa; background: #fff7ed; }

/* Position-Row Hintergrund-Akzent fuer Gerätebezug (analog zu den anderen
   ursprung-Farben). */
.position-row.urs-geraet .pos-ursprung { background: #ecfeff; color: #0e7490; }

/* ───── Position-Wizard / Hardware-Wizard / Textbaustein-Wizard (Modal) ───── */
#pos-wizard,
#hw-wizard,
#textbst-wizard,
#kuendigung-rufn-modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#pos-wizard[hidden],
#hw-wizard[hidden],
#textbst-wizard[hidden],
#kuendigung-rufn-modal[hidden] { display: none; }
#pos-wizard .pw-box,
#hw-wizard .pw-box,
#textbst-wizard .pw-box,
#kuendigung-rufn-modal .pw-box {
  background: var(--bg-card, #fff);
  border-radius: var(--radius, 8px);
  width: min(640px, 100%);
  height: min(560px, 90vh);          /* feste Höhe — verhindert Springerei beim Step-Wechsel */
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 20px 24px;
}
#pos-wizard .pw-step,
#hw-wizard .pw-step,
#textbst-wizard .pw-step,
#kuendigung-rufn-modal .pw-step {
  flex: 1; min-height: 0; overflow: auto;
}
#pos-wizard .pw-head,
#hw-wizard .pw-head,
#textbst-wizard .pw-head,
#kuendigung-rufn-modal .pw-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
#pos-wizard .pw-head h3,
#hw-wizard .pw-head h3,
#textbst-wizard .pw-head h3,
#kuendigung-rufn-modal .pw-head h3 { margin: 0; font-size: 16px; }
#pos-wizard .pw-close,
#hw-wizard .pw-close,
#textbst-wizard .pw-close,
#kuendigung-rufn-modal .pw-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; color: var(--ink-soft, #888);
}
#pos-wizard .pw-close:hover,
#hw-wizard .pw-close:hover,
#textbst-wizard .pw-close:hover,
#kuendigung-rufn-modal .pw-close:hover { color: var(--brand, #005a75); }
.pos-hw-name.from-catalog {
  background: #f3f4f6;
  font-style: italic;
}

/* AIC-Feld im Kunden-Formular: kompakt, neben Telefon. Nur intern,
   wird im Angebot nicht angedruckt. */
label.kunde-aic-field { max-width: 140px; }
label.kunde-aic-field select {
  background: #fffbeb;
  border-color: #fcd34d;
}
label.kunde-aic-field select.auto-matched {
  background: #d1fae5;
  border-color: #10b981;
  animation: aicPulse 1.4s ease;
}
@keyframes aicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  30%      { box-shadow: 0 0 0 4px rgba(16,185,129,.35); }
}

/* Territory-Feld (intern): wird auto-befüllt aus dem CRM, read-only,
   im Druck dank no-print ausgeblendet. */
label.kunde-terr-field { grid-column: 1 / -1; }
label.kunde-terr-field input {
  background: #f3f4f6; color: #374151; cursor: default;
  font-size: 12px;
}
.pw-step-label {
  font-size: 12px; color: var(--ink-soft, #666);
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
}
.pw-back {
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px;
  color: var(--ink-soft, #666);
}
.pw-back:hover { color: var(--brand, #005a75); border-color: var(--brand, #005a75); }
.pw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pw-btn {
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--line, #ddd);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all 0.15s;
}
.pw-btn:hover {
  border-color: var(--brand, #005a75);
  background: var(--brand-soft, #e0f2f8);
  transform: translateY(-1px);
}
.pw-btn.urs-neu       { border-color: #10b981; }
.pw-btn.urs-zusatz    { border-color: #3b82f6; }
.pw-btn.urs-verl      { border-color: #f59e0b; }
.pw-btn.urs-verl-keep { border-color: #a855f7; }
.pw-btn.urs-geraet    { border-color: #06b6d4; }

.pw-tarif-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 50vh; overflow: auto;
}
.pw-tarif-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--line, #eee); border-radius: 6px;
  background: var(--bg-card, #fff);
  font-size: 12px;
  transition: all 0.1s;
}
/* Filter-Treffer: [hidden] muss display:flex aus .pw-tarif-item ueberstimmen
   (User-Agent-Style verliert sonst gegen Klassen-display). */
.pw-tarif-item[hidden],
.pw-tarif-group[hidden] { display: none; }
.pw-tarif-item:hover { background: var(--brand-soft, #e0f2f8); border-color: var(--brand, #005a75); }
.pw-tarif-item .pw-tarif-name { font-weight: 500; }
.pw-tarif-item .pw-tarif-meta { color: var(--ink-soft, #888); font-size: 11px; }
.pw-tarif-group {
  font-size: 10px; text-transform: uppercase;
  color: var(--ink-soft, #999); letter-spacing: .06em;
  padding: 8px 0 4px;
  border-bottom: 1px dashed var(--line, #eee);
  margin-top: 4px;
}
.pw-tarif-group:first-child { margin-top: 0; }
.pw-empty { color: var(--ink-soft, #888); font-style: italic; padding: 20px; text-align: center; }

/* Suchfeld in Wizards (Position Step 3, Textbaustein Step 2) — filtert die
   Liste darunter live nach Eingabe; Klick-Handler bleiben erhalten. */
.pw-search {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 8px;
  font-family: inherit;
}
.pw-search:focus {
  outline: none;
  border-color: var(--brand, #005a75);
  box-shadow: 0 0 0 3px rgba(0, 90, 117, .15);
}
.pw-search::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Ursprung-Farbcode pro Position-Zeile (gilt im Editor wie auch im Print-Badge). */
.pos-ursprung { font-weight: 600; }
.position-row.urs-neu       .pos-ursprung { background: #ecfdf5; color: #065f46; }
.position-row.urs-zusatz    .pos-ursprung { background: #eff6ff; color: #1e40af; }
.position-row.urs-verl      .pos-ursprung { background: #fffbeb; color: #92400e; }
.position-row.urs-verl-keep .pos-ursprung { background: #faf5ff; color: #6b21a8; }

/* Print-Badge vor dem Tarifnamen in der Druckvorschau (gleiche Farbpalette). */
.pv-urs-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pv-urs-badge.urs-neu       { background: #ecfdf5; color: #065f46; }
.pv-urs-badge.urs-zusatz    { background: #eff6ff; color: #1e40af; }
.pv-urs-badge.urs-verl      { background: #fffbeb; color: #92400e; }
.pv-urs-badge.urs-verl-keep { background: #faf5ff; color: #6b21a8; }
.pv-urs-badge.urs-hw        { background: #f3f4f6; color: #374151; }  /* Hardware (neutral grau) */
.pv-urs-badge.urs-gs        { background: #fee2e2; color: #991b1b; }  /* Einmalgutschrift (rot, weil Abzug) */
.pv-urs-badge.urs-hwb       { background: #ffedd5; color: #9a3412; }  /* Hardware-Budget (orange, Abzug spezifisch fuer Hardware) */
.pv-urs-badge.urs-geraet    { background: #ecfeff; color: #0e7490; }  /* Geraetebezug (cyan, positiver Preis) */
.pv-urs-badge.urs-geraet-budget { background: #cffafe; color: #155e75; }  /* HW-Budget-Bestand zu Geraet (cyan-light, negativ) */
.pv-urs-badge.urs-einmal    { background: #e0f2f8; color: #005a75; }  /* Automatische Einmalkosten (Herstellung/Portierung), Petrol */

/* Gruppen-Verwaltung im Admin (Tarife-Tab) */
.adm-section-toolbar {
  display: flex; gap: 8px; margin-bottom: 12px; padding: 8px;
  background: #f9fafb; border-radius: 6px;
  border: 1px solid var(--line, #eee);
}
.adm-gruppen-list {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0 14px;
}
.adm-gruppe-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 100px;
  gap: 8px; align-items: center;
  padding: 4px 8px; border: 1px solid var(--line, #eee);
  border-radius: 4px; background: var(--bg-card, #fff);
}
.adm-gruppe-row.adm-gruppe-head {
  background: #f3f4f6; font-size: 10px; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft, #888);
  letter-spacing: 0.04em; padding: 6px 8px;
}
.adm-gruppe-row .gr-count {
  text-align: center; font-size: 11px; color: var(--ink-soft, #666);
  font-variant-numeric: tabular-nums;
}
.adm-gruppe-row .gr-save {
  font-size: 11px; padding: 4px 8px;
}

/* Cross-/Upsell-Verknuepfungen pro Tarif im Admin */
.adm-crosssell {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--ink-soft, #ddd);
}
.adm-empty-mini {
  font-size: 11px; color: var(--ink-soft, #888); font-style: italic;
  padding: 4px 0;
}
.adm-link-list {
  list-style: none; padding: 0; margin: 4px 0;
  display: flex; flex-direction: column; gap: 3px;
}
.adm-link-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; background: #f9fafb; border-radius: 4px;
  font-size: 12px;
}
.adm-link-del {
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer; padding: 0 6px; font-size: 12px;
  line-height: 1.4;
}
.adm-link-del:hover { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.adm-link-add-row {
  display: flex; gap: 6px; margin-top: 4px; align-items: center;
}
.adm-link-add-row .adm-link-select { flex: 1; min-width: 0; }
.adm-link-add {
  background: transparent; border: 1px dashed var(--brand, #005a75);
  color: var(--brand, #005a75); border-radius: 4px; padding: 3px 10px;
  cursor: pointer; font-size: 12px; white-space: nowrap;
}
.adm-link-add:hover { background: var(--brand-soft, #e0f2f8); }

/* Inline-Preis pro Tarif↔Hardware-Verknuepfung */
.adm-link-pricing {
  display: flex; gap: 4px; align-items: center;
}
.adm-link-pricing .adm-hw-preis {
  width: 72px; font-size: 11px;
}
.adm-link-pricing .adm-hw-save {
  padding: 2px 8px; font-size: 11px;
}

/* "Empfohlen"-Badge im Hardware-Wizard */
.pw-hw-badge {
  display: inline-block;
  background: var(--brand, #005a75);
  color: #fff;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Cross-/Upsell-Quick-Add-Buttons im Hauptformular pro Position */
.pos-crosssell-block {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px; margin-left: 8px;
  border-left: 2px dashed #93c5fd;
  padding-left: 8px;
}
.pos-crosssell-block:empty { display: none; }
.pos-crosssell-label {
  font-size: 11px; color: var(--ink-soft, #666); margin-top: 2px;
}
.pos-crosssell-buttons {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.pos-crosssell-add {
  background: #eff6ff; color: #1e40af;
  border: 1px solid #bfdbfe; border-radius: 4px;
  padding: 3px 8px; font-size: 11px; cursor: pointer;
  white-space: nowrap;
}
.pos-crosssell-add:hover { background: #dbeafe; border-color: #60a5fa; }
/* AIC-Cross-Sell (Stufe 3): bei VPN-Tarifen + AIC-Kunde werden die
   AIC-Pakete (Gruppe "AIC") als Empfehlungs-Buttons gezeigt. */
.pos-crosssell-add.is-aic {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.pos-crosssell-add.is-aic:hover { background: #fde68a; border-color: #f59e0b; }
.pos-crosssell-aic-hint {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  background: #fef3c7;
  color: #92400e;
  padding: 1px 8px;
  border-radius: 9px;
  border: 1px solid #fcd34d;
  vertical-align: middle;
}

/* Block fuer Vertragsverlaengerungen-ohne-Tarifwechsel in der Vorschau */
.pv-block-verl-keep ul { list-style: none; padding: 0; margin: 0; }
.pv-block-verl-keep li { padding: 5px 0; border-bottom: 1px dashed var(--ink-soft, #ddd); font-size: 10px; }
.pv-block-verl-keep li:last-child { border-bottom: none; }

#btn-add-position { grid-column: 1 / -1; }

/* ───── Preview (entspricht der PDF-Ausgabe) ─────
   Viewport = Grid-Spalte (flexibel), Preview-Pane = feste A4-Breite
   (794px ≈ 210mm @96dpi). Bei zu schmaler Spalte wird die Seite als
   Ganzes per zoom verkleinert → A4-Verhältnis bleibt erhalten, kein
   horizontales Quetschen (Peter v1.78.1). */
.preview-viewport {
  min-width: 0;
  overflow-x: clip;
}
.preview-pane {
  width: 794px;
  box-sizing: border-box;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 40px;
  min-height: 1100px;
  font-size: 12px;
  color: var(--ink);
}

/* Header v1.75: zwei Logos oben (links Magenta Business, rechts BER-ITK
   in Petrol). Optisches Vorbild: Magenta-Original-Angebot v692ff. */
.pv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;    /* Logos oben ausrichten, nicht vertikal zentriert */
  padding: 0 0 8px;           /* weiter nach oben (vorher 4px oben) */
  margin-bottom: 12px;
  gap: 24px;
}
/* Magenta linksbündig, BER rechtsbündig am Seitenrand. */
.pv-head-logo { height: auto; width: auto; max-width: 48%; display: block; }
.pv-head-logo--magenta { margin-right: auto; }
.pv-head-logo--ber { margin-left: auto; }
.pv-head-logo--magenta { max-height: 62px; }
.pv-head-logo--ber { max-height: 62px; }

/* Kunde links, Berater-Karte rechts. */
.pv-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 18px;
  align-items: start;
}
.pv-meta .pv-kunde {
  line-height: 1.55;
  font-size: 14px;
  color: var(--ink, #1f1f1f);
}
.pv-meta .pv-kunde strong { font-size: 15px; }
.pv-berater-title {
  font-size: 15px;          /* = Firmenname links, für konsistenten Kopf */
  color: var(--ink, #1f1f1f);
  margin-bottom: 6px;
}
.pv-berater-card {
  display: flex;
  gap: 12px;
  align-items: center;
}
.pv-berater-foto {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.pv-berater-info {
  font-size: 14px;          /* = Adresse links, gleiche Schriftgröße */
  line-height: 1.55;
}
.pv-berater-info > div {
  display: grid;
  grid-template-columns: 48px 1fr;   /* feste Label-Spalte → Werte bündig untereinander */
  column-gap: 8px;
}
/* Gleiche Schriftfarbe wie der Kundenblock links (Peter, 2026-05-29). */
.pv-berater-info .lbl { color: var(--ink, #1f1f1f); }
.pv-berater-info .val { color: var(--ink, #1f1f1f); }

/* Angebots-Titel-Zeile: links magenta-Titel "Angebot gültig bis …",
   rechts das Ausstellungsdatum. */
.pv-angebot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 34px 0 18px;     /* mehr Abstand zu den oberen Blöcken (Peter) */
  gap: 24px;
}
.pv-angebot-titleblock { flex: 1; }
.pv-angebot-title {
  font-size: 18px;
  font-weight: 700;
  color: #E20074;
  margin: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pv-angebot-id {
  font-size: 10px;
  color: #6b6b6b;
  margin-top: 2px;
}
.pv-angebot-date {
  font-size: 12px;
  color: #1f1f1f;
  text-align: right;
  white-space: nowrap;
}

.pv-block-title {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 22px 0 6px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.pv-block-title:first-child { margin-top: 0; }

.pv-empty {
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin: 24px 0;
}

.pos-rabatt-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.pos-rabatt-badge.dauer {
  background: #fee2e2;
  color: #991b1b;
  font-variant-numeric: tabular-nums;
}
.pos-rabatt-none { color: var(--ink-soft); }
table.pv-positions td.pos-gesamt { font-weight: 600; }

table.pv-positions {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
table.pv-positions th {
  text-align: left;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  padding: 7px 6px;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 600;
}
table.pv-positions td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.pv-positions td.num,
table.pv-positions th.num { text-align: right; white-space: nowrap; }
table.pv-positions .pos-name { font-weight: 600; }
table.pv-positions .pos-desc {
  color: var(--ink-soft); font-size: 11px; margin-top: 2px;
  white-space: pre-wrap;   /* Newlines aus der Tarif-Beschreibung erhalten */
}
table.pv-positions .pos-rufnummer-line { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 11px; margin-top: 2px; color: var(--ink); }
/* Bindung als eigene Zeile unter der Beschreibung (Peter, 2026-05-29). */
table.pv-positions .pos-bindung-line { font-size: 11px; margin-top: 3px; color: var(--ink-soft); }
/* Bezug einer Zusatzanmeldung zur Hauptposition. */
table.pv-positions .pos-bezug-line { font-size: 11px; margin-top: 2px; color: var(--ink-soft); }
table.pv-positions .pos-bezug-line em { font-style: italic; color: var(--ink); }
table.pv-positions .empty {
  text-align: center;
  padding: 30px;
  color: var(--ink-soft);
  font-style: italic;
}

.pv-totals {
  margin-left: auto;
  width: 340px;
  font-size: 13px;
  margin-bottom: 28px;
}
.pv-totals .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
}
.pv-totals .row.sum {
  background: #f5f5f7;
  border-left: 3px solid var(--brand);
  font-weight: 600;
  font-size: 14px;
}
.pv-totals .row.sum span:last-child { font-size: 16px; }

.pv-kommentar {
  background: #f5f5f7;
  border-left: 3px solid var(--brand);
  padding: 12px 16px;
  margin: 24px 0;
  white-space: pre-wrap;
  font-size: 12px;
}

.pv-signatur {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pv-signatur-hinweis {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.pv-signatur-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.pv-sig {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 70%;
}
.pv-sig-field {
  border-bottom: 1px solid var(--ink);
  height: 40px;
  position: relative;
}
.pv-sig-field--big {
  height: 110px;
}
.pv-sig-prefix {
  position: absolute;
  bottom: 3px;
  left: 0;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #fff;
  padding-right: 6px;
}
.pv-sig-caption {
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 4px;
}

/* Unterschrift + Datum nebeneinander (zweispaltig). Label steht UNTER
   der Linie statt absolut innerhalb. Wird im Hauptangebot und in
   Folgeseiten verwendet. */
.pv-sigdate-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-top: 56px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pv-sigdate {
  display: flex;
  flex-direction: column;
}
.pv-sigdate-line {
  border-bottom: 1px solid var(--ink);
  height: 64px;
}
.pv-sigdate-line--big { height: 110px; }
.pv-sigdate-label {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}
.pv-ns-sigdate { margin-top: 56px; margin-bottom: 18px; }

/* Zwei-Spalten-Layout in Folgeseiten via {cols}…{|}…{/cols}-Markern.
   Reduziert die endlosen Untereinander-Listen für Formularblöcke
   (Firmendaten + Kontakt, Ausweisdaten etc.). */
.pv-ns-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 8px 0 12px;
}
.pv-ns-col { min-width: 0; }
.pv-ns-col > .pv-ns-list { margin-top: 4px; }
.pv-ns-col > h4.pv-ns-subsection {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand);
  border-bottom: 1px solid var(--line);
  margin: 0 0 6px;
  padding-bottom: 3px;
}

/* Manueller Seitenumbruch im Markdown via {seitenumbruch} (1.47.1).
   Im Browser nur ein dezenter Trenn-Strich, im Druck zwingender
   Page-Break. */
.pv-pagebreak {
  margin: 28px 0;
  border-top: 2px dashed #d1d5db;
  position: relative;
}
.pv-pagebreak::after {
  content: "↓ Seitenumbruch ↓";
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #fff; padding: 0 10px;
  font-size: 9px; color: #9ca3af; letter-spacing: .1em;
}

/* Vertragsseite-Wrapper (Screen): visueller Abstand zur Hauptseite,
   damit man im Browser sieht, dass dies im Druck auf neuer Seite landet. */
.pv-vertragsseite {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 2px dashed #d1d5db;
}
/* Eigener Header der „Logischer Schritt"-Folgeseite (1.75.x): BER-Logo
   rechts oben + Adress-Zeile darunter (Vorbild: Magenta-Original v692ff). */
.pv-fs-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 38px;
}
.pv-fs-header-logo {
  height: 80px;
  width: auto;
  display: block;
}
.pv-fs-header-addr {
  margin-top: 16px;
  font-size: 11px;
  color: #1f1f1f;
}

/* Fahrplan-Block (1.47.0 → 1.75.x überarbeitet): Titel + Magenta-Berater-
   Card + Inhalt aus Folgeseiten-Markdown. Keine Unterschrift mehr auf
   dieser Seite — die liegt auf der Anmeldung-Folgeseite. */
.pv-fahrplan { margin-bottom: 24px; }
.pv-fahrplan-title {
  font-size: 22px;
  font-weight: 800;
  color: #1f1f1f;
  margin: 0 0 18px;
}
.pv-fahrplan-intro {
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.pv-fahrplan-berater {
  font-size: 11px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.pv-fahrplan-berater-title { margin-bottom: 4px; }
.pv-fahrplan .pv-ns-content { font-size: 11px; line-height: 1.45; }
.pv-fahrplan .pv-ns-content h3.pv-ns-section {
  font-size: 14px;
  font-weight: 800;
  margin: 18px 0 8px;
  color: #1f1f1f;
  border-bottom: 0;
}

/* MFG-Logo unten rechts auf der „Logischer Schritt"-Seite. */
.pv-mfg {
  display: block;
  margin-left: auto;
  margin-top: 24px;
  max-width: 200px;
  height: auto;
}

/* Angebots-ID am Ende jeder Folgeseite (klein, unten links).
   Im Druck visuell unauffällig; im Screen ebenfalls als Hinweis sichtbar. */
.pv-page-id {
  margin-top: 18px;
  padding-top: 6px;
  border-top: 1px solid var(--line, #eee);
  font-size: 9px;
  color: var(--ink-soft, #888);
  letter-spacing: .04em;
  text-align: left;
}

/* Footer-ID vor einem {seitenumbruch}: liegt direkt vor dem pv-pagebreak
   und darf NICHT auf eine eigene Seite rutschen — kompakter Abstand,
   page-break-after: avoid haelt sie mit der vorausgehenden Unterschrifts-
   linie zusammen. */
.pv-page-id-pre {
  margin-top: 12px;
  padding-top: 4px;
  page-break-after: avoid;
  break-after: avoid;
}

.pv-betreuer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
}
.pv-betreuer-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pv-betreuer-foto {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand);
  flex-shrink: 0;
}
.pv-betreuer-info {
  display: flex;
  flex-direction: column;
}
.pv-betreuer .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.pv-betreuer .name { font-weight: 600; font-size: 13px; }
.pv-betreuer .line { color: var(--ink-soft); }

.pv-footer-zone {
  margin-top: 28px;
  padding: 8px 12px;
  background: #f9fafb;
  border-left: 3px solid var(--brand, #005a75);
  font-size: 9.5px;
  color: var(--ink);
  line-height: 1.5;
  break-inside: avoid;
}
.pv-footer-zone strong { color: var(--brand, #005a75); }

.pv-footer-disclaimer {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 8.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  text-align: justify;
  break-inside: avoid;
}
.pv-footer-disclaimer strong { color: var(--ink); }
.pv-footer-disclaimer a { color: var(--brand, #005a75); text-decoration: underline; }

.pv-footer {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
}

/* ───── Footer (App) ───── */
.app-footer {
  padding: 12px 20px;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  background: #fff;
}

/* ───── Embedded (im CRM-iframe) ───── */
body.embedded .app-header {
  padding: 8px 14px;
}
body.embedded .app-header .tagline { display: none; }
body.embedded .app-logo { height: 28px; }
body.embedded .app-title h1 { font-size: 14px; }
body.embedded .layout { padding: 10px; gap: 12px; }
body.embedded .form-pane { top: 58px; max-height: calc(100vh - 78px); }
body.embedded .app-footer { display: none; }
body.embedded .preview-pane { padding: 20px 28px; min-height: 900px; }

/* "Der nächste logische Schritt" — statische Folgeseite nach dem Angebot.
   Stilistisch ähnlich pv-block-* aber mit Margin-Top fuer optische Trennung
   in der Vorschau. Im Print bricht sie auf eine neue Seite um. */
.pv-naechster-schritt {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid var(--brand);
}

/* ── Rufnummernplan — eigene Druckseite ── */
/* Kompakt halten, damit Tabelle + Rechtstexte + Unterschrift auf EINE A4-Seite
   passen (Peter, 2026-05-29). */
.pv-rnp { margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--brand); page-break-before: always; break-before: page; }
.pv-rnp-title { font-size: 17px; color: #E20074; margin: 0 0 1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pv-rnp-subid { font-size: 9px; color: #6b6b6b; margin-bottom: 5px; }
.pv-rnp-block-title {
  font-size: 10.5px; font-weight: 700; color: #fff; background: #1f1f1f;
  padding: 2px 8px; margin: 6px 0 3px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pv-rnp-firma { display: flex; gap: 16px; font-size: 11px; margin-bottom: 2px; }
.pv-rnp-firma .lbl { font-weight: 700; min-width: 80px; }
.pv-rnp-table { width: 100%; border-collapse: collapse; font-size: 10px; table-layout: fixed; }
.pv-rnp-table th, .pv-rnp-table td { border: 1px solid #999; padding: 2px 6px; text-align: left; word-break: break-word; }
.pv-rnp-table th { background: #f0f0f0; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pv-rnp-table .c-nr { width: 26px; text-align: center; color: #6b6b6b; }
/* Notiz-Spalte (5.) bekommt den maximalen Rest, die übrigen Spalten schmaler. */
.pv-rnp-table th:nth-child(2), .pv-rnp-table td:nth-child(2) { width: 15%; }
.pv-rnp-table th:nth-child(3), .pv-rnp-table td:nth-child(3) { width: 19%; }
.pv-rnp-table th:nth-child(4), .pv-rnp-table td:nth-child(4) { width: 15%; }
.pv-rnp-notes { border: 1px solid #999; height: 26px; margin-bottom: 3px; }
.pv-rnp-legal { font-size: 8px; line-height: 1.25; color: #333; text-align: justify; }
.pv-rnp-legal p { margin: 0 0 3px; }
.pv-rnp-placeholder { color: #b00020; font-style: italic; }
/* Unterschriftsbereich: Platz über den Linien zum händischen Unterschreiben,
   feine 1px-Linien (nicht fett), Labels einheitlich klein. */
.pv-rnp-sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px; gap: 32px; }
.pv-rnp-sign-label { display: block; border-top: 1px solid #000; padding-top: 4px; font-size: 8.5px; color: #555; }
.pv-rnp-sign-line { flex: 1; }
.pv-rnp-sign-date { width: 160px; border-top: 1px solid #000; padding-top: 4px; font-size: 8.5px; color: #1f1f1f; }

/* Tarif-Datenblatt — eigene Druckseite pro Tarif (Magenta-Stil, Image-Vorlage). */
.pv-tarifblatt { page-break-before: always; break-before: page; margin-top: 6px; }
.pv-tdb-table { width: 100%; border-collapse: collapse; font-size: 10px; table-layout: fixed; }
.pv-tdb-table thead th {
  color: #E20074; font-weight: 700; text-align: left; vertical-align: bottom;
  border-bottom: 2px solid #E20074; padding: 4px 6px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pv-tdb-table th.pv-tdb-name { font-size: 14px; }
.pv-tdb-table .pv-tdb-takt, .pv-tdb-table .pv-tdb-einh { width: 78px; text-align: right; white-space: nowrap; }
.pv-tdb-table td { padding: 4px 6px; border-bottom: 1px solid var(--line, #e4e8ea); vertical-align: top; word-break: break-word; }
.pv-tdb-table td.pv-tdb-bez { font-size: 10px; line-height: 1.3; }
.pv-tdb-table tr.pv-tdb-sec td {
  font-weight: 700; color: #1f1f1f; font-size: 10.5px;
  padding-top: 8px; border-bottom: 1px solid #1f1f1f;
}
@media print { .pv-tdb-table tr { page-break-inside: avoid; break-inside: avoid; } }
.pv-ns-title {
  font-size: 22px;
  color: var(--brand);
  margin: 0 0 12px;
}
.pv-ns-section {
  font-size: 14px;
  margin: 16px 0 6px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.pv-ns-betreuer {
  background: var(--brand-soft);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 12px;
}
.pv-ns-betreuer .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 4px;
}
.pv-ns-betreuer .line { line-height: 1.5; }
.pv-naechster-schritt p { font-size: 12px; line-height: 1.5; margin: 6px 0; }
.pv-ns-list {
  margin: 6px 0; padding-left: 20px;
  font-size: 12px; line-height: 1.5;
}
.pv-ns-list li { margin: 3px 0; }
.pv-ns-claim {
  margin-top: 16px; padding: 10px;
  background: #f9fafb;
  border-left: 3px solid var(--brand);
  font-size: 12px;
}

/* Unterschriftsfeld in Folgeseiten — {signatur:Label} im Markdown.
   Genug vertikaler Platz, damit eine echte Unterschrift Platz findet. */
.pv-ns-signatur {
  margin-top: 56px;
  margin-bottom: 18px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pv-ns-sig-line {
  border-bottom: 1px solid var(--ink);
  height: 0;
}
.pv-ns-sig-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Inline-Schreiblinie in Folgeseiten — entsteht aus 6+ Underscores im
   Markdown. Damit der Kunde direkt auf der Linie eintragen / unterschreiben
   kann (Firma, IBAN, …). */
.pv-ns-fillline {
  display: inline-block;
  min-width: 60%;
  border-bottom: 1px solid var(--ink);
  height: 1.6em;
  vertical-align: bottom;
  margin-left: 4px;
}
.pv-ns-list .pv-ns-fillline {
  min-width: 65%;
}
/* In Listen (z.B. Firmendaten/Ausweis) sollen alle Linien an derselben
   rechten Kante enden — egal wie lang das Label davor ist. Flex-Layout
   pro <li> mit der Schreiblinie als flex:1. */
.pv-ns-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pv-ns-list li .pv-ns-fillline {
  flex: 1;
  min-width: 0;
  margin-left: 0;
}

/* ───── Magenta-Vertragsseite (Anmeldung Business Tarife) ─────
   Aktiviert per {magenta-header} im Folgeseiten-Markdown. Optisches
   Vorbild: offizielle Magenta-Vorlage „Anmeldung Business Tarife für
   Firmenkunden". T-Logo, magenta-Titel, schwarze Section-Banner,
   Form-Felder mit Label links + Schreiblinie rechts. */
.pv-naechster-schritt--magenta {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 2px dashed #d1d5db;
  position: relative;
}
/* Screen-Marker "↓ Seitenumbruch ↓" oberhalb der Anmeldung-Folgeseite,
   damit der User in der Voransicht sieht: hier startet im PDF eine
   neue Seite (Peter v1.74.x). Im Print versteckt — dort gibts den
   echten page-break über .pv-naechster-schritt { page-break-before:
   always }. */
.pv-naechster-schritt--magenta::before {
  content: "↓ Seitenumbruch ↓";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 10px;
  font-size: 9px;
  color: #9ca3af;
  letter-spacing: .1em;
  white-space: nowrap;
}
/* Innerer (markdown-erzeugter) Pagebreak in der Magenta-Folgeseite wird
   weder im Screen noch im Print als sichtbarer Trenner gerendert — die
   .pv-pagebreak ~ *-Geschwister-Regeln greifen aber weiter und machen
   den Vollmacht-Block kompakt. */
.pv-naechster-schritt--magenta .pv-pagebreak { display: none; }
/* Pre-Pagebreak-Angebots-ID (wird vom Renderer vor {seitenumbruch}
   eingefuegt) ist im Magenta-Modus sinnlos, weil's keinen echten
   Seitenumbruch gibt — auf Screen UND Print verstecken. */
.pv-naechster-schritt--magenta .pv-page-id-pre { display: none !important; }
.pv-magenta-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 2px;
}
.pv-magenta-tlogo {
  flex: 0 0 auto;
  width: 42px;
  height: auto;
  display: block;
}
.pv-magenta-titleblock {
  flex: 1;
  padding-top: 4px;
}
.pv-magenta-title {
  font-size: 18px;
  font-weight: 800;
  color: #E20074;
  line-height: 1.1;
}
.pv-magenta-id {
  font-size: 9px;
  color: #6b6b6b;
  margin-top: 2px;
  letter-spacing: .02em;
}
.pv-magenta-rule {
  height: 0;
  border-bottom: 1px solid #1f1f1f;
  margin: 4px 0 6px;
}
.pv-section-banner {
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  margin: 10px 0 6px;
  letter-spacing: .01em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pv-ns-cols .pv-section-banner:first-child,
.pv-ns-col > .pv-section-banner:first-child {
  margin-top: 0;
}
.pv-form-field {
  display: grid;
  grid-template-columns: 122px 1fr;
  align-items: end;
  gap: 8px;
  padding: 7px 0 3px;
}
.pv-form-field-label {
  font-size: 10px;
  color: #1f1f1f;
  line-height: 1.2;
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-form-field-line {
  border-bottom: 1px solid #1f1f1f;
  height: 1.8em;
}
/* Lastschrift-Absatz unter den Einzugs-Feldern muss klein bleiben damit
   alles auf eine A4-Seite passt (Vorbild: Magenta-Original). */
.pv-naechster-schritt--magenta .pv-ns-content p {
  font-size: 8.5px;
  line-height: 1.3;
  margin: 4px 0;
}
.pv-naechster-schritt--magenta .pv-ns-cols {
  gap: 18px;
  margin: 4px 0 8px;
}
.pv-footer-sigline {
  margin-top: 40px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pv-footer-sigline-rule {
  border-bottom: 1px solid #000;
  height: 0;
}
.pv-footer-sigline-label {
  font-size: 9px;
  color: #1f1f1f;
  margin-top: 3px;
}
/* Kurze Signaturlinie (z.B. Kontoinhaber-Unterschrift): Linie ~40%,
   linksbündig, viel Platz darüber zum händischen Unterschreiben. */
.pv-sigline-short {
  margin-top: 55px;
  width: 40%;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pv-sigline-short-rule {
  border-bottom: 1px solid #000;
  height: 0;
}
.pv-sigline-short-label {
  font-size: 9px;
  color: #1f1f1f;
  margin-top: 3px;
}

/* Block-Unterschriftslinie ohne Label — entsteht aus einer Markdown-Zeile,
   die NUR aus 6+ Underscores besteht. Genug Vorlauf nach oben, damit eine
   Unterschrift Platz findet. */
.pv-ns-signline {
  margin-top: 64px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  height: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ───── Print ───── */
@media print {
  @page { size: A4; margin: 15mm 12mm; }
  body { background: #fff; font-size: 11px; orphans: 3; widows: 3; }
  .no-print { display: none !important; }
  .layout { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .pane-resizer { display: none !important; }
  .preview-viewport { overflow: visible !important; }
  .preview-pane {
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    /* Bildschirm-Skalierung im Druck zurücksetzen. */
    zoom: 1 !important;
    width: auto !important;
    margin: 0 !important;
  }
  .pv-head { page-break-inside: avoid; break-inside: avoid; }
  .pv-meta { page-break-inside: avoid; break-inside: avoid; }
  .pv-title, .pv-subtitle { page-break-after: avoid; break-after: avoid; }
  .pv-block-title {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  table.pv-positions { page-break-inside: auto; }
  table.pv-positions thead { display: table-header-group; }
  table.pv-positions tr { page-break-inside: avoid; break-inside: avoid; }
  .pv-totals { page-break-inside: avoid; break-inside: avoid; }
  .pv-kommentar { page-break-inside: avoid; break-inside: avoid; }
  .pv-textbausteine,
  .pv-textbst { page-break-inside: avoid; break-inside: avoid; }
  /* Kuendigungs-Baustein kann mit vielen Leerzeilen laenger als eine Seite
     werden — dann muss er umbrechen duerfen, sonst schneidet der Druck die
     unteren Rufnummern ab. Kopf + Einleitung bleiben beisammen. */
  .pv-textbst-kuendigung { page-break-inside: auto; break-inside: auto; }
  .pv-textbst-kuendigung .pv-textbst-kopf,
  .pv-textbst-kuendigung h4 { page-break-after: avoid; break-after: avoid; }
  .pv-rufn-liste li { page-break-inside: avoid; break-inside: avoid; }
  .pv-signatur, .pv-betreuer, .pv-footer {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .pv-betreuer-foto {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Vertragsseite (Unterschrift + Betreuer) startet auf eigener Druck-
     Seite und bleibt im Block zusammen. */
  .pv-vertragsseite {
    page-break-before: always;
    break-before: page;
    page-break-inside: avoid;
    break-inside: avoid;
    padding-top: 0;
  }
  /* "Der nächste logische Schritt" startet im Druck auf eigener Seite. */
  .pv-naechster-schritt {
    page-break-before: always;
    break-before: page;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .pv-ns-title { color: var(--brand); }
  .pv-ns-section { page-break-after: avoid; break-after: avoid; }
  /* Magenta-Vertragsseite — kein Screen-Trenner im Druck, page-break
     übernimmt der Default .pv-naechster-schritt-Selektor oben. */
  .pv-naechster-schritt--magenta {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .pv-naechster-schritt--magenta::before { display: none; }
  /* Magenta-Vertragsseite — Farben/Banner müssen im PDF erhalten bleiben. */
  .pv-section-banner {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-after: avoid;
    break-after: avoid;
  }
  .pv-magenta-header,
  .pv-magenta-title {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-after: avoid;
    break-after: avoid;
  }
  .pv-magenta-tlogo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pv-form-field { page-break-inside: avoid; break-inside: avoid; }
  .pv-footer-sigline { page-break-inside: avoid; break-inside: avoid; }
  .pv-ns-list, .pv-ns-betreuer, .pv-ns-claim {
    page-break-inside: avoid; break-inside: avoid;
  }
  .pv-signatur-hinweis { page-break-after: avoid; break-after: avoid; }
  .pv-sig-field { border-bottom: 1px solid #000; }
  .pv-sig-prefix { background: #fff; }
  .pv-ns-signatur { page-break-inside: avoid; break-inside: avoid; }
  .pv-ns-sig-line { border-bottom: 1px solid #000; }
  .pv-ns-fillline { border-bottom: 1px solid #000; }
  .pv-ns-signline { border-bottom: 1px solid #000; page-break-inside: avoid; break-inside: avoid; }
  .pv-sigdate-row { page-break-inside: avoid; break-inside: avoid; }
  .pv-sigdate-line { border-bottom: 1px solid #000; }
  /* Manueller Seitenumbruch im Markdown (1.47.1). */
  .pv-pagebreak {
    page-break-after: always;
    break-after: page;
    border: 0;
    margin: 0;
    height: 0;
  }
  .pv-pagebreak::after { display: none; }
  /* Magenta-Vertragsseite: kein echter Pagebreak — alles auf 1 A4-Seite
     (Vorbild: Magenta-Original v692). Die ".pv-pagebreak ~ *"-Regeln
     unten greifen weiterhin und machen die Vollmacht/Datenschutz/
     Pool/TKG-Blöcke automatisch kompakt, damit sie unter den Anmelde-
     Block auf dieselbe Seite passen. */
  .pv-naechster-schritt--magenta .pv-pagebreak {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  /* Angebots-ID-Vorlauf vor jedem {seitenumbruch} ist hier sinnlos —
     wir haben ja keinen echten Pagebreak. Verstecken. */
  .pv-naechster-schritt--magenta .pv-page-id-pre { display: none !important; }
  /* Inhalt nach manuellem Seitenumbruch in einer Folgeseite kompakter,
     damit Vollmacht + Datenschutz + Pool-Hinweis + TKG + Schluss-
     Unterschrift gemeinsam auf eine A4-Seite passen. */
  .pv-pagebreak ~ * { font-size: 9px; line-height: 1.35; }
  .pv-pagebreak ~ .pv-ns-section { font-size: 11.5px; margin: 6px 0 3px; }
  .pv-pagebreak ~ .pv-ns-subsection { font-size: 10px; margin: 5px 0 2px; }
  .pv-pagebreak ~ .pv-ns-list { margin: 3px 0; }
  .pv-pagebreak ~ .pv-ns-list li { margin: 1px 0; }
  .pv-pagebreak ~ p { margin: 3px 0; text-align: justify; hyphens: auto; }
  /* Mehr Platz fuer die finale Unterschrift (Druckschrift Zeichnungs-
     berechtigter) — Peter-Wunsch v1.71.x / v1.72.x. */
  .pv-pagebreak ~ .pv-footer-sigline { margin-top: 70px; }
  /* Schluss-Unterschrift nach Vollmacht: der 64px-margin-top reicht
     bei normalem Schriftbild, sprengt aber auf der dicht gepackten
     Vollmachtsseite die Seitenhöhe und rutscht auf eine 3. Druckseite. */
  .pv-pagebreak ~ .pv-ns-signline {
    margin-top: 22px;
    margin-bottom: 4px;
    page-break-before: avoid;
    break-before: avoid;
  }
  /* "Bei Firmen…" — der fette Hinweis direkt vor der Schluss-Unterschrift
     soll mit der Unterschriftslinie zusammenbleiben, damit nicht beides
     getrennt umbrochen wird. */
  .pv-pagebreak ~ p:has(strong) { page-break-after: avoid; break-after: avoid; }
}

/* Textbausteine — gewählte Bausteine als Cards (Wizard-Pattern wie Positionen) */
.textbst-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.textbst-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, #ddd);
  border-radius: 6px;
  font-size: 12px;
}
.textbst-card .textbst-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.textbst-card { flex-wrap: wrap; }
.textbst-card .textbst-title { flex: 1; font-weight: 500; min-width: 0; }
.textbst-card .textbst-edit,
.textbst-card .textbst-del {
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1;
}
.textbst-card .textbst-edit:hover { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.textbst-card .textbst-del:hover  { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.textbst-card .textbst-mod {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: #eff6ff; color: #1e40af; font-weight: 600;
}
.textbst-card .textbst-rufn {
  padding: 3px 8px; font-size: 11px; line-height: 1;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.textbst-card .textbst-rufn:hover { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.textbst-card .textbst-rufn-anz {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border-radius: 8px; background: var(--brand, #005a75); color: #fff;
  font-size: 10px; font-weight: 600;
}

/* Rufnummern-Modal (Kuendigungs-Bausteine) — Layout innerhalb der pw-box,
   die Overlay-/Box-Optik erbt es von den Wizard-Selektoren oben. */
#kuendigung-rufn-modal .krm-step { display: flex; flex-direction: column; gap: 6px; }
#kuendigung-rufn-modal .krm-bekannt {
  border: 1px solid var(--line, #ddd); border-radius: 4px;
  max-height: 210px; overflow: auto;
}
#kuendigung-rufn-modal .krm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--line, #eee);
}
#kuendigung-rufn-modal .krm-item:last-child { border-bottom: 0; }
#kuendigung-rufn-modal .krm-item:hover { background: #eff6ff; }
#kuendigung-rufn-modal .krm-nr { font-weight: 600; }
#kuendigung-rufn-modal .krm-herkunft {
  margin-left: auto; color: var(--ink-soft, #666);
  font-size: 11px; text-align: right;
}
#kuendigung-rufn-modal .krm-leer-hint {
  padding: 10px; font-size: 12px; color: var(--ink-soft, #666);
}
#kuendigung-rufn-modal .krm-extra {
  width: 100%; box-sizing: border-box; padding: 8px;
  font-family: inherit; font-size: 12px;
  border: 1px solid var(--line, #ddd); border-radius: 4px;
}
#kuendigung-rufn-modal .krm-leer-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-top: 4px;
}
#kuendigung-rufn-modal .krm-leerzeilen { width: 70px; padding: 4px 6px; }
#kuendigung-rufn-modal .krm-actions {
  display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px;
}
#kuendigung-rufn-modal .krm-actions button {
  font-size: 12px; padding: 5px 12px;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer;
}
#kuendigung-rufn-modal .krm-actions button.primary {
  background: var(--brand, #005a75); color: var(--brand-ink, #fff);
  border-color: var(--brand, #005a75);
}

.textbst-edit-area {
  flex: 1 1 100%; margin-top: 8px;
  display: none; flex-direction: column; gap: 6px;
}
.textbst-card.editing .textbst-edit-area { display: flex; }
.textbst-edit-area textarea {
  width: 100%; min-height: 120px;
  font-size: 12px; padding: 8px; border: 1px solid var(--line, #ddd);
  border-radius: 4px; box-sizing: border-box; font-family: inherit;
}
.textbst-edit-area .textbst-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.textbst-edit-area button {
  font-size: 11px; padding: 4px 10px;
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; cursor: pointer;
}
.textbst-edit-area button.primary {
  background: var(--brand, #005a75); color: var(--brand-ink, #fff);
  border-color: var(--brand, #005a75);
}
.textbst-edit-area button:hover { border-color: var(--brand, #005a75); color: var(--brand, #005a75); }
.textbst-edit-area button.primary:hover { color: #fff; }
.textbst-empty {
  font-size: 12px; color: var(--ink-soft, #888); font-style: italic;
  padding: 10px; text-align: center;
  border: 1px dashed var(--line, #eee); border-radius: 6px;
}
.textbst-badge.kat-aktion     { background: #fffbeb; color: #92400e; }
.textbst-badge.kat-hardware   { background: #f3f4f6; color: #374151; }
.textbst-badge.kat-vollmacht  { background: #eff6ff; color: #1e40af; }
.textbst-badge.kat-kuendigung { background: #fee2e2; color: #991b1b; }
.textbst-badge.kat-sonstiges  { background: #ecfdf5; color: #065f46; }
.textbst-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.textbst-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400 !important;
  color: var(--ink) !important;
}
.textbst-row input[type="checkbox"] {
  accent-color: var(--brand);
  margin-top: 2px;
}
.textbst-row span { flex: 1; }

/* Textbausteine — Vorschau */
.pv-textbausteine {
  margin: 18px 0 24px;
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pv-textbst + .pv-textbst {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.pv-textbst h4 {
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--ink);
}
.pv-textbst-body {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.pv-textbst-body p { margin: 0 0 8px; }
.pv-textbst-body p:last-child { margin: 0; }

/* Kuendigungs-Bausteine: Kopfblock mit Firma + Kd.-Nr., damit der Zettel
   beim Netzbetreiber zuordenbar bleibt, und die Rufnummern-Liste mit
   Leerzeilen zum handschriftlichen Nachtragen beim Kundentermin. */
.pv-textbst-kopf {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.pv-textbst-kopf .lbl {
  display: inline-block; min-width: 92px;
  color: var(--ink-soft);
}
.pv-textbst-kopf .val { font-weight: 600; color: var(--ink); }
.pv-rufn-liste {
  margin: 6px 0 8px;
  padding-left: 22px;
  font-size: 12px;
}
.pv-rufn-liste li { margin-bottom: 4px; }
.pv-rufn-nr { font-weight: 600; color: var(--ink); }
/* Leerzeile: Schreiblinie in Rufnummern-Breite, Hoehe fuer Handschrift. */
.pv-rufn-liste li.pv-rufn-leer {
  height: 18px;
  border-bottom: 1px solid var(--ink-soft);
  max-width: 240px;
  margin-bottom: 8px;
}

/* ───── Admin-Panel ─────
   Stil-Vorbild: DREI-Angebotstool (app/index.html), 1:1 auf BER-Petrol-Brand übernommen.
   Klassen-Präfix .adm-*, eigenes Modal-Overlay, Tabs links, Content rechts. */
.btn-admin {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink-soft);
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: .03em;
}
.btn-admin:hover { background: #fafafa; color: var(--brand); border-color: var(--brand); }

/* SharePoint-Save-Button: erkennbar als zweiter Speicher-Pfad. */
.btn-sp-save {
  background: #e0f2fe;
  border: 1px solid #0284c7;
  color: #075985;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
.btn-sp-save:hover:not(:disabled) { background: #bae6fd; }
.btn-sp-save:disabled { opacity: 0.6; cursor: progress; }
.sp-status {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

#adm-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 20, 0.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 20000;
}
#adm-overlay.open { display: flex; }
#adm-box {
  background: #fff;
  width: min(1100px, 96vw);
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Höherer Kontrast NUR im Admin-Panel (1.99.28): Labels fast schwarz, Rahmen
     klar sichtbar. Überschreibt --ink-soft/--line für alle Admin-Kindelemente,
     ohne das Kunden-Frontend zu beeinflussen. */
  --ink-soft: #1f2937;
  --line: #94a3b8;
}
/* Feld-Labels im Admin zusätzlich kräftiger (Farbe + Gewicht) für klare
   Ablesbarkeit der Formulare (Tarife/Hardware). */
#adm-box .adm-lbl { color: #111827; font-weight: 700; }
/* Eingabefelder: dunklerer Rahmen + dunkler Text, Fokus deutlich. */
#adm-box .adm-fi { border-color: #94a3b8; color: #111827; }
#adm-box .adm-fi:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0,90,117,.15); }
/* Karten-Rahmen kräftiger (Hintergrund bleibt hell, damit weiße Felder sich
   abheben). „Ungespeichert"-Markierung (.dirty) explizit erhalten. */
#adm-box .adm-card { border-color: #cbd5e1; }
#adm-box .adm-card.dirty { border-color: var(--brand); background: #fffaf9; }
#adm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-bottom: 1px solid var(--line);
}
#adm-head h3 { margin: 0; font-size: 16px; color: var(--ink); font-weight: 600; }
#adm-head .adm-user {
  font-size: 11px; color: var(--ink-soft);
  margin-left: auto; margin-right: 12px;
}
#adm-head .adm-user strong { color: var(--ink); }
#adm-close {
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%; font-size: 16px;
  background: #f5f5f7; border: 1px solid var(--line);
}
#adm-close:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

#adm-tabs {
  display: flex; gap: 2px;
  padding: 0 12px;
  background: #fafafa;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;            /* nicht im Flex-Layout collapsen */
  min-height: 42px;          /* Tab-Bar bleibt immer sichtbar */
}
#adm-tabs[hidden] { display: none !important; }
#adm-user[hidden] { display: none !important; }
#adm-overlay[hidden] { display: none !important; }
/* Header + Content auch flex-stable machen */
#adm-head { flex-shrink: 0; }
#adm-content { flex: 1 1 auto; min-height: 0; }
.adm-tab {
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  border-radius: 0;
  white-space: nowrap;
}
.adm-tab:hover { color: var(--ink); background: #f0f0f2; }
.adm-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

#adm-content {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  background: #fff;
}
.adm-section { display: none; }
.adm-section.active { display: block; }

.adm-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.adm-section-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
.adm-section-head .adm-actions { margin-left: auto; display: flex; gap: 6px; }

.adm-card {
  position: relative;
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}
.adm-card.dirty { border-color: var(--brand); background: #fffaf9; }
.adm-card-del {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%; font-size: 14px;
  background: #fff; border: 1px solid var(--line);
  color: var(--ink-soft);
}
.adm-card-del:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.adm-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.adm-row.cols-2 { grid-template-columns: 1fr 1fr; }
.adm-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.adm-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.adm-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.adm-row > .adm-fld-wide { grid-column: span 2; }
.adm-row > .adm-fld-full { grid-column: 1 / -1; }

/* Betreuer-Foto im Admin */
.adm-foto-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100px;
  flex-shrink: 0;
}
.adm-foto-preview {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px dashed #d1d5db;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.adm-foto-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.adm-foto-placeholder {
  font-size: 10px; color: #9ca3af; text-align: center;
}
.adm-foto-actions {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
}
.adm-foto-btn {
  display: inline-block; cursor: pointer;
  padding: 4px 8px; font-size: 11px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand);
  border-radius: 4px; text-align: center;
  font-family: inherit;
}
.adm-foto-btn:hover { background: var(--brand-dark, #00445b); }
.adm-foto-btn:disabled {
  opacity: .4; cursor: not-allowed;
  background: var(--brand); /* keep colour */
}
.adm-foto-btn--secondary {
  background: #fff; color: var(--ink);
  border: 1px solid #d1d5db;
}
.adm-foto-btn--secondary:hover {
  background: #f3f4f6;
}
.adm-foto-clear {
  padding: 3px 6px; font-size: 10px;
  background: transparent; color: #6b7280;
  border: 1px solid #d1d5db; border-radius: 4px;
  cursor: pointer;
}
.adm-foto-clear:disabled {
  opacity: .4; cursor: not-allowed;
}
.adm-foto-clear:not(:disabled):hover {
  background: #fee2e2; color: #b91c1c; border-color: #fca5a5;
}

/* Eingabefeld mit Lock-Toggle daneben (Rabatt-Cap, Mindestvertragsdauer) */
.adm-locked-input {
  display: flex; gap: 6px; align-items: center;
}
.adm-locked-input > .adm-fi { flex: 1; min-width: 0; }
.adm-lock-btn {
  background: transparent; border: 1px solid var(--ink-soft, #ccc);
  border-radius: 4px; padding: 2px 6px; cursor: pointer;
  font-size: 14px; line-height: 1; min-width: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.adm-lock-btn:hover { background: var(--brand-soft, #f0f0f0); border-color: var(--brand, #999); }

.adm-lbl {
  display: block;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.adm-fi {
  width: 100%;
  font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink);
  font-family: var(--font);
}
.adm-fi:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0,90,117,.12); }
.adm-fi-sm { padding: 4px 7px; font-size: 12px; }
.adm-ta {
  width: 100%;
  font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font);
  resize: vertical; min-height: 64px;
}
.adm-ta:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0,90,117,.12); }
/* Leistungs-Editor: Monospace, damit die |-Spalten optisch ausgerichtet sind. */
.adm-ta-leist { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.adm-hint { margin-top: 4px; font-size: 11px; color: var(--ink-soft, #6b6b6b); line-height: 1.4; }

.adm-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--brand);
  background: #fff;
  color: var(--brand);
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
}
.adm-add-btn:hover { background: var(--brand); color: #fff; }

.adm-save-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 7px 14px;
}
.adm-save-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.adm-save-btn[disabled] { background: #ccc; border-color: #ccc; cursor: not-allowed; }

.adm-saved-msg {
  font-size: 12px; color: var(--ok);
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity .2s;
}
.adm-saved-msg.show { opacity: 1; }

.adm-group-label {
  background: #f5f5f7;
  border-left: 3px solid var(--brand);
  padding: 6px 10px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
  color: var(--ink);
  margin: 14px 0 8px;
  border-radius: 0 4px 4px 0;
}
.adm-group-label:first-child { margin-top: 0; }

.adm-empty {
  padding: 30px;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

/* Login-Box vor Authentifizierung */
.adm-login-box {
  text-align: center;
  padding: 50px 30px;
}
.adm-login-box h4 {
  font-size: 18px; margin: 0 0 8px;
  color: var(--ink); font-weight: 600;
}
.adm-login-box p {
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-size: 13px;
}
.adm-login-btn {
  background: #2F2F2F;
  color: #fff;
  border-color: #2F2F2F;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
}
.adm-login-btn:hover { background: var(--brand); border-color: var(--brand); }
.adm-login-err {
  color: var(--brand);
  font-size: 13px;
  margin-top: 12px;
}

/* Audit-Log */
.adm-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.adm-log-table th {
  text-align: left;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft);
  padding: 8px 6px; border-bottom: 2px solid var(--ink);
  font-weight: 600;
}
.adm-log-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.adm-log-action {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.adm-log-action.create  { background: #e6f4ea; color: var(--ok); }
.adm-log-action.update  { background: #e8f0fe; color: #1a73e8; }
.adm-log-action.archive { background: #fff3cd; color: var(--warn); }
.adm-log-action.restore { background: #e6f4ea; color: var(--ok); }
.adm-log-action.firma_save { background: #f3e5f5; color: #6a1b9a; }

/* Lock/Unlock-Textbloecke (Stil-Vorbild DREI: index.html:205–208) */
.txt-block {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fafbfc;
  position: relative;
}
.txt-block.unlocked {
  border-color: var(--brand);
  background: #fffaf9;
  box-shadow: 0 0 0 3px rgba(0,90,117,.08);
}
.txt-block-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.txt-block-head h5 {
  margin: 0; font-size: 13px; font-weight: 600;
  color: var(--ink);
}
.txt-block-head .actions { margin-left: auto; display: flex; gap: 4px; }
.txt-lock-badge {
  font-size: 10px; padding: 2px 8px;
  background: #f5f5f7; color: var(--ink-soft);
  border-radius: 10px; font-weight: 600;
}
.txt-block.unlocked .txt-lock-badge {
  background: var(--brand); color: #fff;
}
.txt-edit-btn, .txt-save-btn, .txt-cancel-btn {
  font-size: 11px; padding: 4px 9px;
}
.txt-save-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.txt-save-btn:hover { background: var(--brand-dark); }
.txt-block-hint { font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; font-style: italic; }
.txt-block-content {
  font-size: 12px; color: var(--ink);
  white-space: pre-wrap; line-height: 1.5;
  padding: 6px 0;
  min-height: 28px;
}
.txt-block.unlocked .txt-block-content { display: none; }
.txt-block-editor { display: none; }
.txt-block.unlocked .txt-block-editor { display: block; }
.txt-block-editor textarea {
  width: 100%; min-height: 90px;
  font-size: 12px; padding: 8px;
  border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font);
  resize: vertical;
}

/* Logos & Bilder */
.adm-logo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.adm-logo-card {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.adm-logo-preview {
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.adm-logo-preview img { max-width: 100%; max-height: 100%; }
.adm-logo-preview.empty { color: var(--ink-soft); font-size: 11px; font-style: italic; }
.adm-logo-card h6 { margin: 0 0 4px; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.adm-logo-meta { font-size: 10px; color: var(--ink-soft); margin-bottom: 8px; }
.adm-logo-actions { display: flex; gap: 6px; justify-content: center; }
.adm-logo-actions input[type="file"] { display: none; }
.adm-logo-actions .file-label {
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 4px;
  cursor: pointer;
}
.adm-logo-actions .file-label:hover { background: var(--brand); color: #fff; }

/* Mailversand */
.adm-mail-tpl {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 14px;
}
@media (max-width: 900px) { .adm-mail-tpl { grid-template-columns: 1fr; } }
.adm-mail-tpl-list {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbfc;
  max-height: 70vh; overflow-y: auto;
}
.adm-mail-tpl-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 12px;
}
.adm-mail-tpl-row:hover { background: #fff; }
.adm-mail-tpl-row.active { background: #fff; border-left: 3px solid var(--brand); padding-left: 9px; }
.adm-mail-tpl-row .titel { font-weight: 600; color: var(--ink); }
.adm-mail-tpl-row .meta { font-size: 10px; color: var(--ink-soft); margin-top: 2px; }
.adm-mail-tpl-vars {
  font-size: 10px; color: var(--ink-soft);
  background: #f5f5f7; padding: 6px 8px;
  border-radius: 4px; margin-top: 4px;
}
.adm-mail-tpl-vars code { background: #fff; padding: 1px 4px; border-radius: 2px; }

/* Tracking-Charts */
.adm-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.adm-stat-card {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}
.adm-stat-num {
  font-size: 28px; font-weight: 600;
  color: var(--brand); line-height: 1.1;
}
.adm-stat-lbl {
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 4px;
}
.adm-bar {
  height: 18px; background: #f5f5f7;
  border-radius: 4px; overflow: hidden;
  position: relative;
}
.adm-bar-fill {
  height: 100%;
  background: var(--brand);
  transition: width .3s;
}
.adm-bar-row {
  display: grid; grid-template-columns: 130px 1fr 60px;
  gap: 10px; align-items: center;
  padding: 4px 0;
  font-size: 12px;
}

/* Diagnose */
.adm-diag-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin: 14px 0;
}
.adm-diag-card {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.adm-diag-card .num { font-size: 22px; font-weight: 600; color: var(--ink); }
.adm-diag-card .lbl { font-size: 11px; color: var(--ink-soft); }
.adm-diag-meta {
  font-size: 11px; color: var(--ink-soft);
  font-family: monospace;
  background: #f5f5f7;
  padding: 8px; border-radius: 4px;
}

/* Switch-Toggle (aktiv/inaktiv) */
.adm-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.adm-switch input { accent-color: var(--brand); }

/* Kundentyp-Toggle (Bestandskunde / Neukunde) */
.kunde-typ-toggle {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kunde-typ-option {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  transition: background .12s ease, color .12s ease;
}
.kunde-typ-option:has(input:checked) {
  background: var(--bg-card);
  color: var(--brand);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.kunde-typ-option input[type="radio"] {
  accent-color: var(--brand);
  margin: 0;
}

/* ── PDF-Import (Magenta Prolongation-Order) ─────────────────────────── */
.btn-pdf-import { background: var(--brand-soft, #e0f2f8); border-color: var(--brand, #005a75); color: var(--brand, #005a75); font-weight: 600; }
.btn-pdf-import:hover { background: var(--brand, #005a75); border-color: var(--brand, #005a75); color: #fff; }

#imp-overlay { position: fixed; inset: 0; background: rgba(15, 15, 20, 0.55); display: none; align-items: center; justify-content: center; z-index: 20000; }
#imp-overlay[aria-hidden="false"], #imp-overlay.open { display: flex; }
#imp-box { background: #fff; width: min(880px, 96vw); max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
#imp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border-bottom: 1px solid var(--line, #e3e8ea); }
#imp-head h3 { margin: 0; font-size: 16px; color: var(--brand-dark, #00445b); }
#imp-close { border: none; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: #888; padding: 0 4px; }
#imp-close:hover { color: var(--brand, #005a75); }
#imp-body { padding: 16px 18px; overflow: auto; }
#imp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line, #e3e8ea); background: #fafafa; }
.imp-foot-spacer { flex: 1; }
.imp-mode { font-size: 12px; color: #555; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.imp-status { font-size: 13px; color: #555; margin-bottom: 10px; }
.imp-status.error { color: #b00020; font-weight: 600; }
.imp-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.imp-fact { background: var(--brand-soft, #e0f2f8); border-left: 3px solid var(--brand, #005a75); border-radius: 6px; padding: 8px 12px; min-width: 120px; }
.imp-fact .k { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #667; }
.imp-fact .v { font-size: 15px; font-weight: 700; color: var(--brand-dark, #00445b); margin-top: 2px; }
.imp-warnings { background: #fff7e6; border: 1px solid #ffd591; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 12px; color: #8a5a00; }
.imp-warnings ul { margin: 4px 0 0; padding-left: 18px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.imp-table th { text-align: left; background: var(--brand, #005a75); color: #fff; padding: 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; }
.imp-table th.r, .imp-table td.r { text-align: right; }
.imp-table td { padding: 5px 8px; border-bottom: 1px solid var(--line, #e3e8ea); }
.imp-table tbody tr:nth-child(even) { background: #f5f8f9; }
.imp-table .mono { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Anzeige-Schalter (Angebot-Abschnitt) ────────────────────────────── */
.ang-toggles { margin-top: 8px; padding: 10px 12px; background: var(--bg-soft, #f5f8f9); border: 1px solid var(--line, #e3e8ea); border-radius: 8px; }
.ang-toggles-title { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted, #6b7780); margin-bottom: 6px; }
.ang-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.ang-toggle input { width: auto; margin: 0; flex: 0 0 auto; }
.ang-toggle span { user-select: none; }

/* ── Optionale Geräte (zum Ankreuzen) ────────────────────────────────── */
.field-hint { font-size: 11px; color: var(--muted, #6b7780); margin: 0 0 6px; line-height: 1.4; }
.field-hint code { background: var(--bg-soft, #f5f8f9); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.pv-optgeraete { margin: 18px 0 8px; }
.pv-optgeraete-title { font-size: 14px; color: var(--brand-dark, #00445b); margin: 0 0 4px; }
.pv-optgeraete-hint { font-size: 10.5px; color: #555; margin-bottom: 8px; }
.pv-optgeraete-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pv-optgeraete-table td { padding: 6px 8px; border-bottom: 1px solid var(--line, #e3e8ea); vertical-align: middle; }
.pv-optg-box { width: 26px; text-align: center; }
.pv-optg-preis { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; width: 110px; }
.pv-checkbox { display: inline-block; width: 13px; height: 13px; border: 1.5px solid #333; border-radius: 2px; background: #fff; vertical-align: middle; }

/* ── Vollmacht-/Unterschriftsblock auf der Hauptseite (Bestandskunden) ── */
/* Gleiche horizontale Ränder wie die Fußzeile (.pv-footer-disclaimer hat
   padding 8px 12px) — sonst stehen Vollmacht und Fußzeile unterschiedlich weit
   innen. */
.pv-vollmacht-main { margin-top: 24px; padding: 0 12px; }
/* Schriftgröße exakt wie die Fußzeile (8.5px); !important schlägt eine
   spezifischere #preview-p-Regel, die sonst die kleinere Größe überstimmt. */
.pv-vollmacht-main p,
.pv-vollmacht-main li { font-size: 8.5px !important; line-height: 1.45; text-align: justify; hyphens: auto; }
/* Mehr Platz oberhalb der Unterschriftslinie zum Unterschreiben/Stempeln. */
.pv-vollmacht-main .pv-footer-sigline { margin-top: 120px; }

/* Optionale-Geräte-Picker (Katalog-Auswahl) */
.optg-picker { display: flex; gap: 8px; margin-bottom: 8px; }
.optg-picker input { flex: 1; }
.optg-picker .secondary { flex: 0 0 auto; white-space: nowrap; }

/* ── Historie: Lösch-Button pro Angebot ──────────────────────────────── */
.historie-row { display: flex; align-items: stretch; gap: 4px; }
.historie-row .historie-item { flex: 1; }
.historie-del {
  flex: 0 0 auto; width: 34px; border: 1px solid var(--line, #e3e8ea);
  background: #fff; border-radius: 6px; cursor: pointer; color: #b00020;
  font-size: 14px; line-height: 1;
}
.historie-del:hover { background: #fdecef; border-color: #b00020; }

/* ── Optionale Geräte: strukturierte Eingabezeilen (Art.-Nr. · Bez. · Preis) ── */
.optg-rows-head, .optg-row { display: grid; grid-template-columns: 38px 92px 1fr 92px 28px; gap: 6px; align-items: center; }
.optg-rows-head { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #6b7780); margin: 6px 0 4px; }
.optg-row { margin-bottom: 5px; }
.optg-row input { width: 100%; box-sizing: border-box; }
.optg-move { display: flex; flex-direction: column; gap: 2px; }
.optg-move button { font-size: 8px; line-height: 1; padding: 1px 0; cursor: pointer; border: 1px solid var(--line, #e3e8ea); background: #fff; border-radius: 3px; }
.optg-move button:hover { background: var(--brand-soft, #e0f2f8); border-color: var(--brand, #005a75); }
.optg-del { color: #b00020; border: 1px solid var(--line, #e3e8ea); background: #fff; border-radius: 4px; cursor: pointer; height: 28px; }
.optg-del:hover { background: #fdecef; border-color: #b00020; }
/* Render: Artikelnummer-Spalte in der Angebots-Ankreuzliste */
.pv-optg-nr { white-space: nowrap; color: #555; font-variant-numeric: tabular-nums; width: 70px; }

/* ════════════════════════════════════════════════════════════════════════
   Formular-Aufräumung 2026-06-02 (Kundendaten / Angebot / Optionale Geräte
   / Anmeldedaten / Positions-Rufnummer). Rein Layout — keine Feld-/JS-Änderung.
   ════════════════════════════════════════════════════════════════════════ */

/* Optionale Geräte: Sub-Blöcke müssen die VOLLE Formularbreite spannen, sonst
   landen sie im 2-Spalten-Grid einzeln verstreut ("Unfall" im Screenshot). */
#sec-optgeraete .field-hint,
#sec-optgeraete .optg-picker,
#sec-optgeraete .optg-rows-head,
#sec-optgeraete #optg-rows { grid-column: 1 / -1; }
#sec-optgeraete .field-hint { margin: 0 0 6px; }
#sec-optgeraete .optg-picker { margin-bottom: 6px; }
#sec-optgeraete .optg-picker #optg-pick-input { flex: 1 1 auto; min-width: 0; }

/* Anzeige-Schalter ("Im Angebot anzeigen"): kompakte Inline-Zeilen statt
   zentrierter Spalte (Label erbte sonst flex-direction:column). */
.ang-toggle { flex-direction: row; justify-content: flex-start; padding: 2px 0; }
.ang-toggles { padding: 8px 10px; margin-top: 6px; }
.ang-toggles-title { margin-bottom: 5px; }

/* firmenbuch.ai-Sprunglink: dezent neben dem Feld-Label. */
.fb-open-link { font-size: 11px; font-weight: 600; color: var(--brand, #005a75);
  text-decoration: none; margin-left: 8px; white-space: nowrap; }
.fb-open-link:hover { text-decoration: underline; }

/* Rufnummer(n) in der Position: mehrzeilig + vertikal ziehbar, damit die ganze
   Liste sichtbar ist. */
textarea.pos-rufnummer { width: 100%; resize: vertical; min-height: 36px;
  line-height: 1.4; padding: 6px 8px; }

/* Formular einen Tick kompakter & gleichmäßiger (gilt für alle Abschnitte). */
#angebot-form fieldset { gap: 6px 10px; padding: 9px 0; }
#angebot-form label { gap: 3px; }

/* ── Kompakter (enger) — schnelleres Durchkommen + Geräte-Block bändigen ── */
#angebot-form fieldset { gap: 4px 10px; padding: 7px 0; }
#angebot-form label { gap: 2px; }
#angebot-form legend { margin-bottom: 1px; }
#angebot-form input, #angebot-form select { padding: 5px 8px; }
.ang-toggles { padding: 6px 10px; margin-top: 4px; }
.ang-toggle { padding: 1px 0; }
/* Optionale Geräte: Zeilen/Picker auf sinnvolle Breite begrenzen, damit sie
   auf breit gezogenem Formular-Pane nicht über die ganze Breite zerfasern. */
#sec-optgeraete .optg-rows-head,
#sec-optgeraete .optg-row,
#sec-optgeraete .optg-picker { max-width: 700px; }
#sec-optgeraete .optg-row { margin-bottom: 4px; }

/* ── Aufräum-Runde 2 (2026-06-02): nebeneinander-Layouts, einklappbar ── */

/* Label-Beschriftung + firmenbuch.ai-Link in EINER Zeile. */
.fld-lbl-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fld-lbl-row .fb-open-link { margin-left: 0; }

/* "Im Angebot anzeigen": Titel oben, beide Checkboxen nebeneinander. */
.ang-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.ang-toggles-title { flex: 0 0 100%; margin-bottom: 2px; }
.ang-toggle { padding: 0; }

/* Optionale Geräte: "+ leere Zeile" als dezenter Add-Button UNTER der Liste
   (statt als dritte schwebende Spalte im Picker). */
.optg-picker .secondary { flex: 0 0 auto; white-space: nowrap; }
.optg-add-empty { display: block; width: 100%; max-width: 700px; margin-top: 6px;
  padding: 6px 10px; border: 1px dashed var(--line, #d0d5d8); border-radius: 6px;
  background: #fff; color: var(--muted, #6b7780); cursor: pointer; font-size: 12px; text-align: center; }
.optg-add-empty:hover { border-color: var(--brand, #005a75); color: var(--brand, #005a75); background: var(--brand-soft, #e0f2f8); }

/* Einklappbare Abschnitte. */
.collapsible > legend { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.coll-caret { display: inline-block; transition: transform .15s ease; font-size: 9px; color: var(--muted, #6b7780); }
.collapsible:not(.collapsed) .coll-caret { transform: rotate(90deg); }
.collapsible.collapsed > *:not(legend) { display: none !important; }

/* Historie "Meine Angebote": Lösch-Button schlank/dezent statt klobiger Kasten. */
.historie-row { display: flex; align-items: stretch; gap: 4px; margin-bottom: 4px; }
.historie-del { width: 30px; flex: 0 0 auto; border: 1px solid transparent; background: transparent;
  color: #aab; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; }
.historie-del:hover { color: #b00020; background: #fdecef; border-color: #f3c2cb; }

/* ── Aufräum-Runde 3 (2026-06-02): mehr nebeneinander ── */
/* Anzeige-Schalter wirklich NEBENEINANDER erzwingen (2 feste Spalten),
   statt Flex-Umbruch bei langen Labels. */
.ang-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: center; }
.ang-toggles-title { grid-column: 1 / -1; }
/* Telefon · AIC · Territory in einer Zeile (3 Spalten). */
.fld-trio { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; align-items: end; }

/* Trio-Fix: Territory spannte sonst voll (1/-1) und AIC war auf 140px begrenzt
   → beide im 3-Spalten-Trio auf eine normale Spalte zwingen. */
.fld-trio .kunde-terr-field { grid-column: auto; }
.fld-trio label.kunde-aic-field { max-width: none; }

/* "Im Angebot anzeigen": Toggles gestapelt, jedes Label einzeilig (kein Umbruch),
   Box steht neben dem Betreuer (beide ohne .full → 2 Spalten). */
.ang-toggles { display: flex; flex-direction: column; gap: 3px; }
.ang-toggle span { white-space: nowrap; }

/* "Im Angebot anzeigen" als EINE Zeile: Titel + beide Toggles nebeneinander. */
.ang-toggles { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.ang-toggles-title { flex: 0 0 auto; margin: 0; }

/* Dokument anhängen (Magenta-Formulare): Checkbox-Liste 2-spaltig. */
#sec-anhaenge .anhang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
#sec-anhaenge .anhang-item { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
#sec-anhaenge .anhang-item input { margin: 0; flex-shrink: 0; }

/* Anhang-Eingabefelder: pro aktiviertem Dokument ein Panel mit Feld-Grid.
   Leerer Input = Auto-Wert (steht als Platzhalter), Eingabe überschreibt. */
#anhang-felder { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.anhang-doc-felder { border: 1px solid var(--border, #dfe6ea); border-radius: 8px; padding: 8px 10px; background: var(--bg-soft, #fafcfd); }
.anhang-doc-title { font-weight: 600; font-size: 12px; margin-bottom: 8px; }
.anhang-feld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.anhang-feld { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted, #6b7780); }
.anhang-feld input { width: 100%; min-width: 0; }