/* ══════════════════════════════════════════════════════════
   Beitragsübersicht · Paket-Gegenüberstellung (alt ↔ neu)
   Eigenständiges Tool, aufrufbar per window.openBeitragsUebersicht(),
   zusätzlich als Block in den Angebots-Baukasten übernehmbar.
   Bedien-Oberfläche = intern → theme.css-Sprache (--brand-*).
   Das erzeugte Kunden-Dokument trägt seine Styles inline (Mail-tauglich).
   ══════════════════════════════════════════════════════════ */

.bu-overlay{
  position:fixed; inset:0; background:rgba(9,18,42,0.58);
  z-index:1150; display:none; align-items:center; justify-content:center; padding:22px;
  font-family:'Poppins','Montserrat','Segoe UI',Arial,sans-serif;
}
.bu-overlay.active{ display:flex; }
.bu-box{
  background:#fff; border-radius:16px; width:min(1380px,100%); max-height:95vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 100px rgba(9,18,42,0.35);
}
.bu-head{
  padding:15px 22px; border-bottom:1px solid #E5E5E7;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,#0d1b3e 0%,#12234F 60%,#1a2e63 100%); color:#fff;
}
.bu-head b{ font-size:15.5px; font-weight:700; letter-spacing:-0.01em; }
.bu-head .bu-sub{ font-size:12px; color:#B0CAF2; margin-left:8px; font-weight:400; }
.bu-close{ background:none; border:none; color:#fff; font-size:24px; cursor:pointer; opacity:.75; line-height:1; padding:0 4px; }
.bu-close:hover{ opacity:1; }

.bu-body{ display:grid; grid-template-columns:548px 1fr; min-height:0; flex:1; }
.bu-left{ border-right:1px solid #E5E5E7; overflow-y:auto; padding:16px 18px 40px; background:#FCFCFD; }
.bu-right{ display:flex; flex-direction:column; overflow:hidden; background:#eef1f6; }

/* ── Kopf-Einstellungen ────────────────────────────────── */
.bu-settings{
  background:#fff; border:1px solid #E5E5E7; border-radius:12px;
  padding:12px 14px; margin-bottom:14px;
}
.bu-field{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.bu-field:last-child{ margin-bottom:0; }
.bu-field > label{
  font-size:11px; font-weight:700; color:#5C5C5C; text-transform:uppercase;
  letter-spacing:0.06em; width:104px; flex-shrink:0;
}
.bu-field input[type="text"], .bu-field input[type="date"], .bu-field select{
  flex:1; min-width:0; padding:7px 10px; border:1px solid #E5E5E7; border-radius:8px;
  font-size:13px; font-family:inherit; color:#09122A; background:#fff;
}
.bu-field input:focus, .bu-field select:focus{
  outline:none; border-color:#2D599F; box-shadow:0 0 0 3px rgba(45,89,159,0.12);
}
.bu-seg{ display:flex; gap:0; border:1px solid #E5E5E7; border-radius:8px; overflow:hidden; }
.bu-seg button{
  border:none; background:#fff; color:#5C5C5C; font-family:inherit; font-size:12.5px;
  font-weight:600; padding:7px 14px; cursor:pointer; transition:background .15s,color .15s;
}
.bu-seg button + button{ border-left:1px solid #E5E5E7; }
.bu-seg button.on{ background:#2D599F; color:#fff; }

/* ── Positionen ─────────────────────────────────────────── */
.bu-sec-label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#5C5C5C; font-weight:700; margin:16px 0 8px;
  display:flex; align-items:center; justify-content:space-between;
}
.bu-pos{
  background:#fff; border:1px solid #E5E5E7; border-radius:12px;
  padding:12px 14px 13px; margin-bottom:10px;
  transition:border-color .15s, box-shadow .15s;
}
.bu-pos:hover{ border-color:#B0CAF2; }
.bu-pos-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.bu-pos-head input.bu-sparte{
  flex:1; min-width:0; padding:8px 11px; border:1px solid #E5E5E7; border-radius:8px;
  font-size:13.5px; font-weight:600; font-family:inherit; color:#12234F; background:#F7F7F8;
}
.bu-pos-head input.bu-sparte:focus{ outline:none; border-color:#2D599F; background:#fff; box-shadow:0 0 0 3px rgba(45,89,159,0.12); }
.bu-icon-btn{
  border:1px solid #E5E5E7; background:#fff; color:#5C5C5C; border-radius:8px;
  width:30px; height:30px; cursor:pointer; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:inherit; transition:background .15s,color .15s,border-color .15s;
}
.bu-icon-btn:hover{ background:#F7F7F8; color:#12234F; }
.bu-icon-btn.danger:hover{ background:#FBE7E7; color:#C23B3B; border-color:#f0c8c8; }
.bu-icon-btn:disabled{ opacity:.35; cursor:not-allowed; }

.bu-sides{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* min-width:0 — ohne das erzwingen die Zahlen-/Zahlweise-Felder eine Mindestbreite
   und das ganze Bedien-Panel bekommt einen horizontalen Scrollbalken. */
.bu-side{ min-width:0; border:1px solid #E5E5E7; border-radius:10px; padding:9px 10px 10px; background:#FCFCFD; }
.bu-side.neu{ background:#F5F9FF; border-color:#D7E4F5; }
.bu-side-head{
  display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; min-width:0;
}
.bu-side-title{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#5C5C5C;
}
.bu-side.neu .bu-side-title{ color:#2D599F; }
.bu-side-head label{ font-size:11px; color:#5C5C5C; display:inline-flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }
.bu-side-head input[type="checkbox"]{ width:13px; height:13px; cursor:pointer; margin:0; }

.bu-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.bu-row:last-child{ margin-bottom:0; }
.bu-row input, .bu-row select{
  flex:1; min-width:0; padding:6px 8px; border:1px solid #E5E5E7; border-radius:7px;
  font-size:12.5px; font-family:inherit; color:#09122A; background:#fff;
}
.bu-row input:focus, .bu-row select:focus{ outline:none; border-color:#2D599F; box-shadow:0 0 0 2px rgba(45,89,159,0.14); }
.bu-row input.bu-betrag{ flex:0 0 74px; text-align:right; font-weight:600; }
.bu-row select.bu-zw{ flex:1 1 96px; min-width:0; font-size:11.5px; padding:6px 4px; }
.bu-logo-slot{
  width:28px; height:28px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
}
/* Kanalwahl beim Einstellen ins Portal */
.bu-kanal{
  display:flex; gap:9px; align-items:flex-start; padding:9px 0; cursor:pointer;
  border-bottom:1px solid #F1F3F6;
}
.bu-kanal:last-of-type{ border-bottom:none; }
.bu-kanal input{ width:15px; height:15px; margin:2px 0 0; cursor:pointer; accent-color:#2D599F; flex-shrink:0; }
.bu-kanal b{ display:block; font-size:13px; font-weight:600; color:#12234F; }
.bu-kanal i{ display:block; font-style:normal; font-size:11.5px; color:#5C5C5C; line-height:1.45; margin-top:1px; }

/* Mehrere Tarif-Varianten je Position: eine davon ist die Empfehlung */
.bu-varianten{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.bu-side.ist-empf{ border-color:#2D599F; box-shadow:0 0 0 2px rgba(45,89,159,0.10); }
.bu-empf{
  display:inline-flex !important; align-items:center; gap:5px; cursor:pointer;
  font-size:11px; font-weight:600; color:#2D599F; white-space:nowrap;
}
.bu-empf input{ width:13px; height:13px; margin:0; cursor:pointer; accent-color:#2D599F; }
.bu-side:not(.ist-empf) .bu-empf{ color:#5C5C5C; font-weight:500; }
.bu-var-del{ width:24px; height:24px; font-size:14px; }
.bu-var-add{
  width:100%; padding:7px; border:1px dashed #B0CAF2; background:#fff; color:#2D599F;
  border-radius:9px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.bu-var-add:hover{ background:#F5F9FF; border-color:#2D599F; }

/* Bestandsvertrag des Kunden übernehmen */
.bu-row select.bu-bestand{
  flex:1; font-size:11.5px; background:#fff; border-color:#cbd5e1; color:#12234F;
}
.bu-row select.bu-bestand:focus{ border-color:#2D599F; }

/* Tarif aus der Datenbank: Auswahlliste + die daraus gesetzte Anzeige */
.bu-row select.bu-tarif-sel{ flex:1; font-size:12px; font-weight:500; background:#fff; }
.bu-side.neu select.bu-tarif-sel{ border-color:#B0CAF2; }
.bu-gewaehlt{ align-items:flex-start !important; }
.bu-gewaehlt-txt{ flex:1; min-width:0; line-height:1.35; }
.bu-gewaehlt-txt b{ display:block; font-size:12.5px; font-weight:600; color:#12234F; }
.bu-gewaehlt-txt span{ display:block; font-size:11.5px; color:#5C5C5C; }
.bu-frei-zurueck{ margin:-2px 0 6px; }
.bu-zurueck-db{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:11px; color:#2D599F; font-weight:600;
}
.bu-zurueck-db:hover{ text-decoration:underline; }
.bu-logo-slot img{ width:26px; height:26px; object-fit:contain; background:#fff; border:1px solid #E5E5E7; border-radius:5px; padding:2px; }
.bu-side.off{ opacity:.5; }
.bu-side.off .bu-row{ pointer-events:none; }

.bu-add{
  width:100%; padding:11px; border:1.5px dashed #B0CAF2; background:#F5F9FF; color:#2D599F;
  border-radius:10px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s,border-color .15s;
}
.bu-add:hover{ background:#E3ECF9; border-color:#2D599F; }

.bu-quick{
  background:#fff; border:1px solid #E5E5E7; border-radius:10px; padding:10px 12px; margin-bottom:12px;
}
.bu-quick-title{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#5C5C5C; margin-bottom:7px; }
.bu-quick .bu-row{ margin-bottom:0; }
.bu-hint{ font-size:11.5px; color:#5C5C5C; line-height:1.5; margin-top:6px; }

/* ── Vorschau ───────────────────────────────────────────── */
.bu-preview-head{
  padding:11px 20px; border-bottom:1px solid #E5E5E7; background:#fff;
  display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:#5C5C5C;
}
.bu-preview-head b{ color:#12234F; font-size:13px; }
.bu-preview{
  flex:1; overflow-y:auto; padding:22px;
  /* Das Dokument ist bewusst hell gestaltet — gegen Chrome Auto-Dark-Mode absichern. */
  color-scheme:light; forced-color-adjust:none;
}
.bu-doc-wrap{ max-width:660px; margin:0 auto; color-scheme:light; forced-color-adjust:none; }
.bu-empty{ color:#5C5C5C; text-align:center; padding:60px 20px; font-size:13px; }

.bu-foot{
  padding:12px 20px; border-top:1px solid #E5E5E7; background:#fff;
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
}
.bu-foot-info{ flex:1; min-width:180px; font-size:11.5px; color:#5C5C5C; line-height:1.45; }
.bu-btn{
  padding:9px 16px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; transition:background .15s,color .15s;
}
.bu-btn.primary{ background:#2D599F; color:#fff; }
.bu-btn.primary:hover{ background:#254A86; }
.bu-btn.primary:disabled{ background:#9fb0c8; cursor:not-allowed; }
.bu-btn.ghost{ background:#fff; color:#12234F; border-color:#E5E5E7; }
.bu-btn.ghost:hover{ background:#F7F7F8; }
.bu-btn.ghost:disabled{ opacity:.45; cursor:not-allowed; }

@media (max-width:1000px){
  .bu-body{ grid-template-columns:1fr; }
  .bu-left{ max-height:46vh; border-right:none; border-bottom:1px solid #E5E5E7; }
  .bu-sides{ grid-template-columns:1fr; }
}