/* ============================================================
   Vernast — KelderDry professionele kelderontvochtiger
   Aanvullend op kelder.css + verslag.css + zouten.css
   ============================================================ */

/* USP-strip onder hero-lede */
.usp-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.usp-strip span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:9999px;}
.usp-strip svg{width:14px;height:14px;flex:none;}

/* hero footnote */
.hero-foot{margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.55;max-width:560px;}

/* WEL / NIET kaarten (op rood) */
.wn-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px;}
@media (max-width:820px){.wn-grid{grid-template-columns:1fr;}}
.wn{background:#fff;border-radius:var(--radius-lg);padding:32px 32px 34px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.wn .wn-head{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.wn .wn-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.wn .wn-ic svg{width:22px;height:22px;}
.wn.ok .wn-ic{background:rgba(16,185,129,.14);color:#0a8f5f;}
.wn.no .wn-ic{background:var(--red-soft);color:var(--red);}
.wn h3{font-size:20px;margin:0;}
.wn ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.wn li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text);line-height:1.5;}
.wn li svg{flex:none;width:17px;height:17px;margin-top:2px;}
.wn.ok li svg{color:#0a8f5f;}
.wn.no li svg{color:var(--red);}
.wn-quote{margin-top:26px;background:#fff;border-left:4px solid var(--red);border-radius:var(--radius);padding:24px 28px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.wn-quote p{margin:0;font-size:16px;line-height:1.7;color:var(--text);}
.wn-quote b{color:var(--red);}

/* capaciteit eerlijk uitgelegd */
.cap-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 22px;}
@media (max-width:640px){.cap-compare{grid-template-columns:1fr;}}
.capc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm);}
.capc .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.capc .n{font-size:34px;font-weight:800;color:var(--ink);margin:7px 0 3px;line-height:1;}
.capc .s{font-size:13.5px;color:var(--text-mid);line-height:1.5;}
.capc.max .n{color:var(--red);}
.dimlist{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;}
@media (max-width:640px){.dimlist{grid-template-columns:1fr;}}
.dimlist li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.45;}
.dimlist li svg{flex:none;width:15px;height:15px;color:var(--red);margin-top:3px;}

/* RV voor/na badge in hero */
.rvfloat{display:flex;align-items:center;gap:14px;}
.rvfloat .rv{text-align:center;}
.rvfloat .rv .v{font-size:26px;font-weight:800;line-height:1;}
.rvfloat .rv .l{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:4px;color:var(--text-dim);}
.rvfloat .rv.wet .v{color:var(--red);}
.rvfloat .rv.dry .v{color:#0a8f5f;}
.rvfloat .arr2{color:var(--text-dim);}
.rvfloat .arr2 svg{width:20px;height:20px;}

/* ontvochtiging vs ventilatie */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px;}
@media (max-width:820px){.vs-grid{grid-template-columns:1fr;}}
.vsc{background:#fff;border-radius:var(--radius-lg);padding:32px 32px 34px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.vsc .vk{display:inline-flex;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);padding:6px 13px;border-radius:9999px;margin-bottom:14px;}
.vsc.alt .vk{background:var(--ink);}
.vsc h3{font-size:21px;margin:0 0 16px;}
.vsc ul{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.vsc li{font-size:14.5px;color:var(--text);line-height:1.5;padding:11px 0;border-top:1px solid var(--line);display:flex;gap:11px;align-items:flex-start;}
.vsc li:first-child{border-top:0;}
.vsc li svg{flex:none;width:16px;height:16px;color:var(--red);margin-top:2px;}
.vsc.alt li svg{color:var(--ink);}

/* Hero-foto als echte <img> (i.p.v. image-slot): rechts uitgelijnd zodat het
   wandtoestel altijd volledig zichtbaar blijft, zonder ongewenste inzoom. */
.hero-media img.hero-photo{display:block;width:100%;height:440px;object-fit:cover;object-position:80% 50%;border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(0,0,0,.35);}
@media(max-width:768px){.hero-media img.hero-photo{height:300px;}}

/* Mobiel-fix: de technische specs-tabel (.tier, min-width 560px) zat in een
   grid-kolom met min-width:auto en verbreedde daardoor de hele pagina op smalle
   schermen (afgesneden content / balk aan de zijkant). Laat de kolom krimpen en
   de tabel binnen z'n eigen kader horizontaal scrollen. */
.zsplit > *{min-width:0;}
.tier{overflow-x:auto;}