/* HanVos — rustige mobiele weergave voor alle pagina's (1 nov 2026). Alleen ≤768px; desktop ongewijzigd. */
@media (max-width:768px){
/* kop: één regel */
.topbalk{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:6px 16px!important;min-height:0!important}
.topbalk .tb-links{display:flex!important;flex:1 1 auto;min-width:0;gap:0!important;margin:0!important;padding:0!important}
.topbalk .tb-links .tb-item{display:none!important}
.topbalk .tb-links .tb-item:first-child{display:flex!important;font-size:12.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbalk .tb-spoed{flex:0 0 auto;font-size:0!important;padding:5px 11px!important;margin:0!important;box-shadow:none!important}
.topbalk .tb-spoed::after{content:"Storing? 7 d.p.w.";font-size:12px;font-weight:700}
nav .nav-inner{padding-top:8px!important;padding-bottom:8px!important}
nav .nav-logo-mark{width:38px!important;height:38px!important}
nav .nav-logo-tekst strong{font-size:16px!important}
nav .nav-logo-tekst span{font-size:11.5px!important}

/* hero compact */
.hero{min-height:0!important;padding-top:26px!important;padding-bottom:24px!important}
.hero .hero-inner,.hero .hero-content{padding-top:0!important;padding-bottom:0!important}
.hero .breadcrumb{font-size:11.5px!important;margin-bottom:10px!important}
.hero .hero-badge{font-size:10.5px!important;padding:5px 10px!important;margin-bottom:12px!important}
.hero h1{font-size:26px!important;line-height:1.15!important;margin-bottom:10px!important}
.hero .hero-sub{font-size:15px!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px!important}
.hero .hero-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:0 0 10px!important}
.hero .hero-btns a{width:auto!important;margin:0!important;padding:13px 8px!important;font-size:14.5px!important;text-align:center;justify-content:center;border-radius:10px!important}
.hero .hero-btns a:only-child{grid-column:1/-1}
.hero .hero-trust,.hero .hero-services{display:none!important}
.hero .hvm-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;gap:8px!important;margin:14px -16px 0!important;padding:0 16px 4px!important;scrollbar-width:none}
.hero .hvm-chips>a{flex:0 0 auto;white-space:nowrap;padding:8px 14px!important;font-size:13px!important}
.hero .hvm-chips::-webkit-scrollbar{display:none}

/* vaste twee-koloms indeling (inline) onder elkaar */
.s .w[style*="grid-template-columns:1fr 1fr"],.s .w[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
/* secties strakker */
.s{padding-top:38px!important;padding-bottom:38px!important}
.s .sk{margin-bottom:18px!important}
.s .st,.s h2{font-size:23px!important;line-height:1.2!important}
.s .ss{font-size:14.5px!important;line-height:1.55!important}
.s h3{line-height:1.25}

/* beoordelingen: drie naast elkaar */
.vbalk-v2{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;padding:16px!important}
.vbalk-v2 .vbalk-v2-id,.vbalk-v2 .vbalk-v2-stempel,.vbalk-v2 .vbalk-v2-reviews-t{display:none!important}
.vbalk-v2 .vbalk-v2-field{padding:9px 8px!important;min-height:0!important;margin:0!important;border-width:1px!important}
.vbalk-v2 .vbalk-v2-label{font-size:10px!important;margin-bottom:4px!important}
.vbalk-v2 .vbalk-v2-label .nr{display:none!important}
.vbalk-v2 .vbalk-v2-value{display:block!important}
.vbalk-v2 .vbalk-v2-score{font-size:22px!important}
.vbalk-v2 .vbalk-v2-stars svg{width:10px!important;height:10px!important}
.vbalk-v2 .vbalk-v2-reviews{font-size:10.5px!important;margin-top:2px!important}
.vbalk-v2>*:nth-child(n+5){display:none!important}

/* kaartjes in 2 kolommen, korte tekst */
.dienst-grid,.voordeel-grid,.voordelen-grid,.usp-grid,.usp-g,.usp-row,.link-grid,.regio-grid,.dg,.prov-g{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.dienst-card,.voordeel-item,.voordeel,.usp-card,.usp-item,.link-card,.regio-card,.dk{margin:0!important;padding:12px!important;border-radius:12px!important;min-width:0}
.dienst-card h3,.voordeel-item h4,.voordeel h3,.voordeel h4,.usp-card h3,.usp-item h3,.usp-item h4,.regio-card h3{font-size:14.5px!important;margin:6px 0 4px!important}
.dienst-card p,.voordeel-item p,.voordeel p,.usp-card p,.usp-item p{font-size:12.5px!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
.dienst-card .dc-icon,.usp-card .usp-icon,.usp-item .usp-icon,.voordeel .voordeel-icon,.voordeel-item .vi-icon,.regio-card .rc-icon{width:34px!important;height:34px!important;font-size:18px!important;margin:0 0 4px!important}
.voordeel-item{display:block!important}
.dienst-card .dc-prijs{font-size:12.5px!important;margin:6px 0 2px!important}
.dienst-card .dc-link{font-size:12.5px!important}
.dk-img{aspect-ratio:4/3;height:auto!important;margin:-12px -12px 8px!important}
.dk-img img{width:100%;height:100%;object-fit:cover}
.dk-body{padding:0!important}
.dk-body h3{font-size:14.5px!important;margin:0 0 4px!important}
.dk-body p,.dk-body .dl{display:none!important}
.dp{font-size:11.5px!important;padding:4px 7px!important;margin:0!important}

/* opsommingen compacter */
ul.check-list{gap:6px!important}
ul.check-list li{font-size:14px!important;line-height:1.45!important;padding-top:2px!important;padding-bottom:2px!important}

/* pakketten, prijzen, merken, ketels: horizontaal schuiven */
.kp.a,.pkg,.price-cards,.merken-grid,.atag-grid,.review-grid,.vs-he{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;padding:4px 16px 12px!important;margin-left:-16px!important;margin-right:-16px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;grid-template-columns:none!important}
.kp::-webkit-scrollbar,.pkg::-webkit-scrollbar,.price-cards::-webkit-scrollbar,.merken-grid::-webkit-scrollbar,.atag-grid::-webkit-scrollbar,.review-grid::-webkit-scrollbar,.vs-he::-webkit-scrollbar{display:none}
.kp.a>*,.pkg>*,.price-cards>*,.merken-grid>*,.atag-grid>*,.review-grid>*,.vs-he>*{flex:0 0 80%!important;max-width:80%!important;scroll-snap-align:center;margin:0!important}
.merken-grid .merk-card p{font-size:13px!important;line-height:1.5!important}
.hvm-hint{display:block;font-size:12px;color:#6b7280;margin:-4px 0 6px;text-align:right}

/* tabellen: zijwaarts schuiven i.p.v. afgesneden */
.s table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;font-size:13px!important}
.s table th,.s table td{padding:8px 10px!important;min-width:96px}

/* foutcodetabel: eigen schuifvak met vaste kop */
.s table.code-table{max-height:560px;overflow:auto!important}
.s table.code-table thead th{position:sticky;top:0;z-index:1}
/* stappen als compacte rijen */
.stap-g{grid-template-columns:1fr!important;gap:8px!important}
.stap:has(.snr){display:grid!important;grid-template-columns:40px 1fr;align-items:center;gap:0 10px;padding:12px!important;text-align:left!important}
.stap-img{display:none!important}
.stap:has(.snr) .stap-body{display:contents}
.stappen-grid{grid-template-columns:1fr!important;gap:8px!important}
.stap:not(:has(.snr)){display:block!important;position:relative;padding:12px 12px 12px 54px!important;text-align:left!important;min-height:0!important}
.stap:not(:has(.snr))::before{position:absolute!important;left:12px!important;top:12px!important;margin:0!important;transform:none!important}
.stap:not(:has(.snr)) .stap-body{padding:0!important}
.stap .snr{grid-row:1/3;margin:0!important;position:static!important;transform:none!important}
.stap h3{margin:0!important;font-size:15px!important;text-align:left!important}
.stap p{margin:2px 0 0!important;font-size:13px!important;text-align:left!important}

/* vestigingen / regio */
.vest-g{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:8px!important}
.vest-k{padding:10px!important}
.vest-k h3{font-size:14px!important}
.vest-adres,.vest-i{display:none!important}
.vest-link{font-size:11.5px!important}
.cards-row{grid-template-columns:1fr 1fr!important;gap:8px!important}
.cards-row>div{padding:10px 12px!important}
.cards-row>div>div:nth-child(2){font-size:15px!important}
.regio-list,.regio-lijst{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
.foto-breaker{height:120px!important;min-height:0!important}

/* veelgestelde vragen: dichtgeklapt, tik om te openen */
.faq-list{display:grid!important;gap:8px!important}
.faq-item{margin:0!important;border-radius:12px!important}
.hvm-faq .faq-q{cursor:pointer;position:relative;padding:14px 40px 14px 14px!important;font-size:14.5px!important;line-height:1.35!important}
.hvm-faq .faq-q::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:600;color:#E8521A}
.hvm-faq .faq-item.hvm-open .faq-q::after{content:"–"}
.hvm-faq .faq-item:not(.hvm-open) .faq-a{display:none!important}
.hvm-faq .faq-a{padding:0 14px 14px!important;font-size:14px!important;line-height:1.6!important}

/* lange tekstblokken: eerste deel + Lees verder */
.hvm-lang{position:relative;max-height:380px;overflow:hidden!important}
.hvm-lang::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(255,255,255,0),var(--hvm-bg,#fff));pointer-events:none}
.hvm-meer{display:block;margin:10px 0 0;padding:11px 16px;border:1px solid #d6dbe3;border-radius:10px;background:#fff;color:#0B1F3A;font:600 14px/1 inherit;width:100%;cursor:pointer}

/* blokken onderaan compacter */
.cta-bar{padding:30px 18px!important}
.cta-bar h2{font-size:22px!important}
.cta-bar p{font-size:14px!important}
.ft-banner__inner{padding-top:28px!important;padding-bottom:28px!important}
.info-box,.tip,.cta-box{padding:14px!important}
/* footer: linkkolommen naast elkaar */
footer .ftg{grid-template-columns:1fr 1fr!important;gap:22px 14px!important}
footer .ftg>.ftm{grid-column:1/-1}
footer .ftg>.ftc:last-child{grid-column:1/-1}
footer .ftl a,footer .ftc a{font-size:13px!important}
footer .ftbl{flex-wrap:wrap!important;gap:8px 14px!important}
}