/* Zes fictieve huishoudvoorbeelden (batch 2, prioriteitenronde 12-10-2026). */
.vh-wrap{max-width:900px;margin:0 auto;padding:40px 16px 56px}
.vh-head{text-align:center;margin:0 0 24px}
.vh-badge{display:inline-flex;align-items:center;gap:6px;background:#fff7ed;border:1px solid #fed7aa;color:var(--oranje);font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-pil);margin:0 0 14px}
.vh-head h1{font-family:var(--font-serif);font-size:var(--tekst-h1);margin:0 0 12px;color:var(--ink)}
.vh-situatie{color:#374151;line-height:1.65;max-width:680px;margin:0 auto 14px;font-size:1.02rem}
.vh-conclusie-kort{display:inline-block;font-weight:700;padding:8px 16px;border-radius:var(--radius-sm);font-size:.95rem}
.vh-conclusie-kort.ja{background:var(--groen-licht);color:var(--groen-dark)}
.vh-conclusie-kort.nee{background:#fff7ed;color:var(--oranje)}

/* B2-04-fix: minmax(140px,1fr) alleen is niet genoeg -- op een smalle viewport met 2 geforceerde
   kolommen (zie media-query hieronder) kan de track zelf niet onder de content-breedte krimpen
   zonder minmax(0, ...), waardoor lange labels ("Warmtepompverbruik/jaar") de kaart buiten het
   scherm duwen. overflow-wrap zorgt dat zulke labels ook zonder spaties kunnen breken. */
.vh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:12px;margin:28px 0}
.vh-card{background:#fff;border:1px solid var(--grijs-rand);border-radius:var(--radius-md);padding:14px 10px;text-align:center;min-width:0}
.vh-card .l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:700;overflow-wrap:anywhere}
.vh-card .v{font-size:1.35rem;font-weight:800;color:var(--ink);margin-top:4px;overflow-wrap:anywhere}

.vh-blok{margin:28px 0;background:#fff;border:1px solid var(--grijs-rand);border-radius:var(--radius-md);padding:20px 22px}
.vh-blok h2{font-family:var(--font-serif);font-size:1.25rem;margin:0 0 12px;color:var(--ink)}
.vh-blok p{color:#374151;line-height:1.65;margin:0 0 10px}
.vh-lijst{color:#374151;line-height:1.7;margin:0;padding-left:20px}
.vh-lijst li{margin:0 0 8px}
.vh-waarsch{background:#fff7ed;border:1px solid #fed7aa;border-left:3px solid var(--oranje);border-radius:8px;padding:12px 16px;color:#1a3d28;font-size:.92rem;line-height:1.55}
.vh-extra{background:var(--groen-licht);border-color:#a7f3c0}
.vh-extra h2,.vh-extra h3{color:var(--groen-dark)}
.vh-conclusie{text-align:center;background:var(--grijs-bg)}
.vh-conclusie p{max-width:620px;margin:0 auto 16px}
.vh-terug{text-align:center;margin:24px 0 0;font-size:.92rem}
.vh-terug a{color:var(--groen-dark);font-weight:600}

/* Overzichtspagina */
.vh-ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:28px 0}
.vh-ovk{display:block;background:#fff;border:1px solid var(--grijs-rand);border-top:4px solid var(--muted);border-radius:var(--radius-md);padding:18px;text-decoration:none;color:inherit;transition:box-shadow var(--trans), transform var(--trans)}
.vh-ovk:hover{box-shadow:var(--shadow-zwevend);transform:translateY(-2px)}
.vh-ovk.ja{border-top-color:var(--groen)}
.vh-ovk.nee{border-top-color:var(--oranje)}
.vh-ovk-verdict{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius-pil);padding:3px 10px;margin-bottom:9px}
.vh-ovk.ja .vh-ovk-verdict{background:var(--groen-licht);color:var(--groen-dark)}
.vh-ovk.nee .vh-ovk-verdict{background:#fff7ed;color:var(--oranje)}
.vh-ovk h3{font-size:1.05rem;margin:0 0 6px;color:var(--ink)}
.vh-ovk p{font-size:.88rem;color:var(--muted);margin:0 0 12px;line-height:1.5}
.vh-ovk-rij{display:flex;justify-content:space-between;font-size:.85rem;padding:5px 0;border-top:1px solid #f1ede6}
.vh-ovk-rij span:first-child{color:var(--muted)}
.vh-ovk-rij span:last-child{font-weight:600;color:var(--ink)}

@media (max-width:600px){
    .vh-wrap{padding:28px 14px 40px}
    .vh-head h1{font-size:1.5rem}
    .vh-blok{padding:16px 16px}
    /* minmax(0,1fr), niet kaal "1fr": laat de kolom krimpen tot onder de content-breedte i.p.v.
       de content te laten overlopen (B2-04). */
    .vh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .vh-card .v{font-size:1.15rem}
}
@media (max-width:400px){
    /* Op de smalste ondersteunde breedte (320px) hebben de langste kaartlabels (bv. in het
       EV-/warmtepompblok: "Warmtepompverbruik/jaar") ook met minmax(0,1fr) te weinig ruimte in 2
       kolommen. Eén kolom is hier veiliger dan op tekstgrootte te blijven schaven. */
    .vh-cards{grid-template-columns:1fr}
}