/* ══════════════════════════════════════════════════════════
   Angebots-Baukasten · geteilt zwischen leads.html + mitarbeiter.html
   ══════════════════════════════════════════════════════════ */

.ab-overlay{
  position:fixed; inset:0; background:rgba(10,12,20,0.58);
  z-index:1100; display:none; align-items:center; justify-content:center; padding:24px;
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
}
.ab-overlay.active{ display:flex; }
.ab-box{
  background:#fff; border-radius:14px; width:min(1320px,100%); max-height:94vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.35);
}
.ab-head{
  padding:16px 22px; border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff;
}
.ab-head b{ font-size:16px; font-weight:700; }
.ab-head .ab-sub{ font-size:12px; color:#aab; margin-left:8px; }
.ab-close{ background:none; border:none; color:#fff; font-size:24px; cursor:pointer; opacity:.8; }
.ab-close:hover{ opacity:1; }

.ab-body{ display:grid; grid-template-columns:480px 1fr; min-height:0; flex:1; }
.ab-left{ border-right:1px solid #eee; overflow-y:auto; padding:14px 16px; background:#fafbfc; }
.ab-right{ display:flex; flex-direction:column; overflow:hidden; }

.ab-meta{
  background:#f9fafb; border:1px solid #eef; border-radius:8px;
  padding:10px 14px; font-size:12px; line-height:1.6; margin-bottom:14px; color:#374151;
}
.ab-meta b{ color:#0f172a; }

.ab-cat{ margin-bottom:18px; }
.ab-cat-label{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#6b7280; font-weight:700; margin-bottom:8px;
}
.ab-mod{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:14px 16px; margin-bottom:10px; cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.ab-mod:hover{ border-color:#1a7aff; background:#f5faff; }
.ab-mod.active{
  border-color:#2D599F; background:#f5faff;
  box-shadow:0 2px 10px rgba(45,89,159,0.10);
}
.ab-mod input[type="checkbox"]{ margin-top:3px; flex-shrink:0; width:16px; height:16px; cursor:pointer; }
.ab-mod-body{ flex:1; min-width:0; }
.ab-mod-name{ font-weight:600; font-size:14px; color:#0f172a; margin:0 0 3px; }
.ab-mod-desc{ font-size:12px; color:#6b7280; line-height:1.5; }
.ab-mod-price{ margin-top:8px; display:flex; align-items:center; gap:8px; }
.ab-mod-price label{ font-size:12px; color:#6b7280; white-space:nowrap; }
.ab-mod-price input{
  flex:1; padding:7px 10px; border:1px solid #d1d5db; border-radius:6px;
  font-size:13px; font-family:inherit;
}
.ab-mod-price input:focus{ outline:none; border-color:#1a7aff; }

/* Tarif-Block: stärker hervorgehoben — Pflicht-Auswahl */
.ab-mod-tariff{
  margin-top:12px; padding:12px 12px 10px;
  background:#f0f6ff; border:1px solid #c7dcfb; border-radius:8px;
}
.ab-mod-tariff > label{
  font-size:11px; color:#2D599F; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; display:block; margin-bottom:6px;
}
.ab-mod-tariff select.ab-tariff-select{
  width:100%; padding:9px 12px; border:1px solid #c7dcfb; border-radius:6px;
  font-size:13px; font-family:inherit; background:#fff; cursor:pointer; min-width:0;
  font-weight:500;
}
.ab-mod-tariff select.ab-tariff-select:focus{ outline:none; border-color:#1a7aff; box-shadow:0 0 0 2px rgba(26,122,255,0.15); }
.ab-mod-tariff select.ab-tariff-select:disabled{ background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
.ab-anonymize-label{ margin-top:8px !important; }
.ab-anonymize-label span{ font-size:11.5px; }

/* ── Schlanke Ansicht: Konfigurations-Felder erst sichtbar wenn Modul aktiv ── */
.ab-mod:not(.active) .ab-mod-price,
.ab-mod:not(.active) .ab-mod-tariff,
.ab-mod:not(.active) .ab-mod-instance-actions,
.ab-mod:not(.active) .ab-spk-wrap {
  display: none;
}

/* ── Sach-Paket: Multi-Sparten-Picker im linken Bedien-Panel ── */
.ab-spk-wrap{ margin-top:8px; }
.ab-spk-block{ transition:border-color 0.15s; }
.ab-spk-block:has(.ab-spk-active:checked){ border-color:#2D599F !important; background:#F8FAFC !important; }
.ab-spk-toggle{ user-select:none; }
.ab-spk-toggle:hover{ background:#F1F5F9; }
.ab-spk-row{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.ab-spk-row label{ font-size:12px; color:#6b7280; min-width:90px; white-space:nowrap; }
.ab-spk-row input[type="text"],
.ab-spk-row select{
  flex:1; padding:6px 8px; border:1px solid #cbd5e1; border-radius:5px;
  font-size:12.5px; font-family:inherit; background:#fff;
}
.ab-spk-row input[type="text"]:focus,
.ab-spk-row select:focus{ outline:none; border-color:#1a7aff; box-shadow:0 0 0 2px rgba(26,122,255,0.12); }
.ab-spk-row select:disabled{ background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
/* Hinweis am Modul-Header: "▸ klicken zum Konfigurieren" wenn inaktiv und Tarif-/SB-Komponenten vorhanden wären */
.ab-mod:not(.active) .ab-mod-name::after {
  content: "  ▸";
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
}
.ab-mod.active .ab-mod-name::after {
  content: "  ▾";
  color: #2D599F;
  font-weight: 400;
  font-size: 12px;
}

.ab-preview-head{
  padding:12px 20px; border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#6b7280;
}
.ab-preview{
  flex:1; overflow-y:auto; padding:20px; background:#f4f6fa;
}
.ab-preview-inner{
  background:#fff; border-radius:8px; padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  max-width:680px; margin:0 auto;
  font-family:'Segoe UI',Arial,sans-serif; font-size:14px; color:#09122A; line-height:1.6;
}
.ab-preview-inner p{ margin:0 0 12px; }
.ab-preview-inner ul{ margin:0 0 12px; padding-left:20px; }
.ab-preview-empty{ color:#9ca3af; text-align:center; padding:40px 20px; font-size:13px; }

.ab-foot{
  padding:12px 20px; border-top:1px solid #eee;
  display:flex; gap:10px; align-items:center; background:#fff;
}
.ab-foot-info{ flex:1; font-size:11.5px; color:#6b7280; line-height:1.45; }
.ab-btn{
  padding:9px 16px; border-radius:7px; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700;
}
.ab-btn.primary{ background:#1a7aff; color:#fff; }
.ab-btn.primary:hover{ background:#1565d8; }
.ab-btn.primary:disabled{ background:#9ab; cursor:not-allowed; }
.ab-btn.ghost{ background:#f3f4f6; color:#374151; }
.ab-btn.ghost:hover{ background:#e5e7eb; }

.ab-sparte-row{
  display:flex; gap:8px; align-items:center; margin-bottom:14px;
  font-size:12px;
}
.ab-sparte-row select{
  flex:1; padding:7px 10px; border:1px solid #d1d5db; border-radius:6px;
  font-size:13px; font-family:inherit; background:#fff;
}

@media (max-width:860px){
  .ab-body{ grid-template-columns:1fr; }
  .ab-left{ max-height:40vh; border-right:none; border-bottom:1px solid #eee; }
}