/* ============================================================
   versicherungen.css — Versicherungen-Überblick + Kostenrechner
   Passend zum Navy/Gold/Cream-Design (styles.css-Tokens)
   ============================================================ */

/* ---------- Info-Karten ---------- */
.vsec{ background:var(--cream); }
.sec-head.center{ text-align:center; margin-inline:auto; max-width:680px; }
.sec-head.center .eyebrow{ justify-content:center; }

.vgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px; margin-top:40px;
}
.vcard{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:28px 26px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line); }
.vcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.vcard__ic{
  width:48px; height:48px; border-radius:13px; flex:none;
  background:var(--navy-900); color:var(--gold-200);
  display:grid; place-items:center;
}
.vcard__ic svg{ width:24px; height:24px; stroke-width:2.1; }
.vcard h3{
  font-family:var(--font-display); font-weight:800; font-size:19px;
  color:var(--navy); margin-bottom:10px; line-height:1.2;
}
.vcard p{ color:var(--body); font-size:15px; line-height:1.62; }

/* Badges */
.vbadge{
  display:inline-flex; align-items:center; font-weight:800; font-size:11.5px;
  letter-spacing:.02em; padding:6px 12px; border-radius:var(--r-pill);
  white-space:nowrap; text-transform:uppercase;
}
.vbadge--must{   background:#fbeaea; color:#b23b3b; }
.vbadge--strong{ background:#e2f0fa; color:var(--gold-600); }
.vbadge--rec{    background:#e9f0f2; color:var(--navy); }
.vbadge--opt{    background:#eef1ec; color:#6b7a55; }

/* ---------- Kostenrechner ---------- */
.vz{ background:#fff; }
.vz__grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:start;
}
.vz__intro .eyebrow{ margin-bottom:14px; }
.vz__intro h2{ font-size:clamp(26px,3vw,38px); }
.vz__lead{ margin-top:16px; color:var(--body); font-size:16.5px; line-height:1.66; max-width:42ch; }
.vz__motto{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--gold-600);
}
.vz__motto svg{ width:18px; height:18px; }
.vz__trust{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.vz__trust span{ display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--navy); }
.vz__trust svg{ width:17px; height:17px; color:var(--gold-600); flex:none; }

/* Rechner-Karte */
.vzc{
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:26px 26px 24px;
}

/* Objektart-Chips */
.vz-chips{ display:flex; gap:10px; }
.vz-chip{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:var(--r-pill); border:2px solid var(--line);
  background:#fff; color:var(--navy); font-weight:800; font-size:14.5px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.vz-chip svg{ width:17px; height:17px; }
.vz-chip:hover{ border-color:var(--gold); }
.vz-chip.is-active{ border-color:var(--gold); background:#fff; box-shadow:0 4px 14px rgba(46,123,176,.28); color:var(--gold-600); }

/* Wohnfläche-Slider */
.vz-field{ margin-top:22px; }
.vz-field__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.vz-field__lab{ font-weight:800; font-size:14px; color:var(--navy); }
.vz-field__val{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--gold-600); }
.vz-range{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--line) 0%); outline:none; margin:0;
}
.vz-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--gold); border:4px solid #fff; box-shadow:0 4px 12px rgba(46,123,176,.45); cursor:pointer;
}
.vz-range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--gold);
  border:4px solid #fff; box-shadow:0 4px 12px rgba(46,123,176,.45); cursor:pointer;
}

/* Policen-Auswahl */
.vz-opts{ display:grid; gap:10px; margin-top:24px; }
.vz-opt{
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease;
}
.vz-opt:hover{ border-color:var(--gold); }
.vz-opt.is-on{ border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.vz-opt input{ width:20px; height:20px; accent-color:var(--gold); flex:none; cursor:pointer; }
.vz-opt__t{ display:flex; flex-direction:column; gap:2px; font-weight:800; font-size:15px; color:var(--navy); line-height:1.2; }
.vz-opt__t small{ font-weight:600; font-size:12.5px; color:var(--muted); }

/* Kosten-Aufschlüsselung */
.vz-breakdown{ margin-top:24px; border-top:1px solid var(--line); padding-top:6px; }
.vz-breakdown .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 2px; border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--body);
}
.vz-breakdown .row span{ display:flex; flex-direction:column; gap:1px; }
.vz-breakdown .row span small{ font-size:12px; color:var(--muted); font-weight:600; }
.vz-breakdown .row b{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.vz-breakdown .row.is-off{ opacity:.4; }

/* Ergebnis */
.vz-result{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:18px; padding:20px 22px; border-radius:var(--r);
  background:var(--navy-900); color:#fff;
}
.vz-result__k{ display:flex; flex-direction:column; gap:3px; font-weight:800; font-size:15px; }
.vz-result__k small{ font-weight:600; font-size:12px; color:#c6d5de; }
.vz-result__v{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--gold-200);
  font-variant-numeric:tabular-nums; line-height:1;
}
.vz-result__v small{ font-size:13px; font-weight:700; color:#c6d5de; }

/* Hinweis (WEG) */
.vz-hint{
  display:flex; gap:10px; align-items:flex-start; margin-top:16px;
  background:#e2f0fa; border:1px solid var(--gold-200); border-radius:var(--r);
  padding:13px 15px; font-size:13.5px; line-height:1.55; color:var(--navy);
}
.vz-hint svg{ width:18px; height:18px; flex:none; color:var(--gold-600); margin-top:1px; }
.vz-hint[hidden]{ display:none; }

/* Footer der Rechner-Karte */
.vz-foot{
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.vz-note{ font-size:12.5px; color:var(--muted); line-height:1.55; flex:1; min-width:220px; }
.vz-foot .btn{ flex:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .vz__grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:480px){
  .vz-chips{ flex-direction:column; }
  .vz-result{ flex-direction:column; align-items:flex-start; }
  .vz-result__v{ align-items:flex-start; }
  .vcard__top{ flex-wrap:wrap; }
}