@media(max-width:900px){
/* #3 backdrop-filter goedkoper: mobile-menu blur alleen wanneer open (.is-active); glaspanelen lichtere blur (nagenoeg identiek, veel goedkoper op scroll) */
.zms-menu-overlay:not(.is-active){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.gd-glass-card,.glass-panel{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.static-card,.user-message{backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important}
}

@media(max-width:767px){#gd-embed-2026{min-width:0!important;width:auto!important;max-width:calc(100% - 28px)!important;margin-left:auto!important;margin-right:auto!important}#gd-form{max-width:100%!important}.f-cta p{line-height:1.6}.zb-steden h2{line-height:1.3}.zb-steden .zb-steden-p{line-height:1.5}.e-card{min-width:0}}
@media(min-width:992px){.infographic-card .ai-panel{min-height:158px}}

/* sectiekop gecentreerd, model /rotterdam. `.wrap>.sh` laat de `.sh` van de
   ROI-rekentool met rust, want die zit in `.g` */
.wrap>.sh{text-align:center;margin-inline:auto}
/* tekstpijl in de kaartlijsten wordt de iso-3D-pijl uit de voettekst-CTA */
.lgroup a .arw{font-size:0;line-height:0;width:21px;height:15px;flex:none;margin-left:auto;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20105%2075'%3E%3Cpolygon%20points='38,13%2050,19%2050,35%2038,29'%20fill='%23c2410c'/%3E%3Cpolygon%20points='38,13%2096,6%2096,22%2038,29'%20fill='%23ea580c'/%3E%3Cpolygon%20points='10,39%2050,19%2070,29%2030,49'%20fill='%23fb923c'/%3E%3Cpolygon%20points='30,49%2070,29%2070,45%2030,65'%20fill='%23ea580c'/%3E%3Cpolygon%20points='10,39%2030,49%2030,65%2010,55'%20fill='%23f97316'/%3E%3Cpolygon%20points='82,35%2070,29%2070,45%2082,51'%20fill='%23c2410c'/%3E%3Cpolygon%20points='82,35%2096,6%2096,22%2082,51'%20fill='%23f97316'/%3E%3Cpolygon%20points='82,35%2070,29%2050,19%2038,13%2096,6'%20fill='%23ff9c54'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .18s}
.lgroup a:hover .arw{transform:translateX(3px)}
/* het definitieblok is per 2026-08-11 een antwoordkaart en draagt zijn eigen
   opmaak in de embed zelf. Een regel hier zou daar overheen gaan, want dit blok
   staat later in het document dan de paginacode. */
/* kostenblok. ALLEEN boven 992px: anders overrulet dit de eenkolomsregel van de
   pagina zelf en lopen de kaarten 56-83px buiten beeld op een telefoon. */
@media(min-width:992px){
.costgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.costgrid .cases{align-self:center}
}
@media(max-width:991px){
.costgrid{grid-template-columns:minmax(0,1fr)}
}
.case{padding:16px 18px}
.case .metric{font-size:1.65rem}
/* stonden op 1.3vw zonder ondergrens: 4,68px op een telefoon. De overige .muted
   zijn spans (tabelkop, .metric) en blijven buiten schot. */
.soft,p.muted{font-size:clamp(14px,1.3vw,17px)}
/* de Designer zet SITE-BREED p{font-size:1.3vw;line-height:1.6vw} op de tag zelf.
   Een kale <p> valt daardoor op een telefoon naar 4,68px. Gemeten raakt dat alleen
   de FAQ-antwoorden van /wat-kost-seo; `inherit` haalt de 17px van het blok terug. */
#zms-faq .faq-answer-body p{font-size:inherit;line-height:inherit}
/* de bronlinks onder de ROI-rekentool waren onderstreept maar droegen exact de
   grijstint van de tekst eromheen (#64748b op 12px), dus op een telefoon zag
   niemand dat het links waren. De bundel zet zelf `#zms-roi .ft a{color:inherit}`,
   dus de volle keten is nodig om daar overheen te komen. */
#zms-roi .ft li a{color:#c2410c;text-underline-offset:2px}
/* dekkingsblok naar een kolom. :has() spaart de geo-grid die op vijf paginas de
   kaartlijsten draagt */
.geo-grid:has(.meter-card){grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.geo-grid:has(.meter-card)>div:first-child{max-width:760px}
.geo-grid .meter-card{width:100%;max-width:620px;text-align:left}
.meter-card .mrow{grid-template-columns:132px 1fr auto}
/* `.mrow .eng .dot` van de pagina weegt zwaarder, vandaar de volle keten */
.meter-card .mrow .eng .dot{width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.meter-card .mrow .eng .dot svg{width:16px;height:16px;display:block}
/* De hero op een telefoon. Deze familie had een VASTE padding waar branche en
   stad 20vh gebruiken, dus op een kort in-app venster bleef de kop te laag; twee
   paginas stonden zelfs met de H1 achter de navbalk. Ondergrens 137px houdt hem
   vrij van het kruimelpad. De augustuspaginas dragen hun kruimelpad BINNEN de
   hero, vandaar :not(:has(.zms-crumb)) — dat weegt ook zwaarder dan #zms-hero. */
@media(max-width:991px){
#zms-hero:not(:has(.zms-crumb)){padding-top:clamp(137px,20vh,162px)}
#zms-hero .zms-cta{line-height:1.2}
#zms-hero .zms-sub{margin-bottom:20px;line-height:1.42}
#zms-hero .zmsb-strip{margin-top:12px;padding-top:11px;gap:8px}
#zms-hero .zmsb-logos{gap:7px 12px}
/* brak op 360px over twee regels en werd 90px hoog. Op deze familie gehouden,
   want .f-cta-btn staat ook op branche en stad en die zitten op 72px. */
body:has(#zms-hero) .f-cta-btn{font-size:16px;padding:15px 26px;line-height:1.2}
}