/* PressureWashing.pt. Contract: inkt #0E2230 voor tekst en donkere vlakken, wit en koel grijs als achtergrond,
   signaalgeel #FFC72C ALLEEN op knoppen (met inkt-tekst), één radius (12px), 8px-ritme, twee lettertypen.
   Mobiel eerst; 960px is het kantelpunt naar twee kolommen. Geen reveal-animaties (leadgen-regel 28). */
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-0.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-0.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --ink: #0E2230; --ink-2: #44566A; --wit: #FFFFFF; --tint: #EEF3F5; --lijn: #D6E0E5;
  --geel: #FFC72C; --geel-hover: #F5B800; --groen: #1E7A4C;
  --r: 12px; --kop: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif; --tekst: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --schaduw: 0 1px 2px rgba(14, 34, 48, .06), 0 8px 24px rgba(14, 34, 48, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--wit); color: var(--ink); font: 400 17px/1.55 var(--tekst); padding-bottom: 72px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--kop); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.01em; overflow-wrap: break-word; }
h1 { font-size: clamp(30px, 6.4vw, 48px); font-weight: 800; }
h2 { font-size: clamp(24px, 4.2vw, 34px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 12px; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #1B6FA8; outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.smal { max-width: 760px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--wit); padding: 8px 12px; border-radius: var(--r); z-index: 50; }
.skip:focus { left: 8px; }

/* knoppen: geel met inkt-tekst; a.btn uitgezonderd van elke context die links herkleurt */
.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  background: var(--geel); color: var(--ink); border: 0; border-radius: var(--r); font: 700 17px/1.2 var(--kop);
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover, a.btn:hover { background: var(--geel-hover); }
.btn-vol { width: 100%; }
.btn-groot { min-height: 56px; font-size: 18px; padding: 14px 26px; }

/* kop */
.kop { position: sticky; top: 0; z-index: 30; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kop-rij { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.merk { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; }
.merkteken { width: 34px; height: 34px; }
.merk-naam { font: 800 clamp(15px, 4.4vw, 18px)/1 var(--kop); letter-spacing: -.01em; white-space: nowrap; }
.merk-naam span { color: var(--ink-2); font-weight: 700; }
.hoofdnav { display: none; }
.hoofdnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.hoofdnav a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 600; border-radius: var(--r); }
.hoofdnav a:hover, .hoofdnav a[aria-current] { background: var(--tint); }
.kop-acties { display: flex; align-items: center; gap: 8px; }
.kop-bel { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; font-weight: 600; text-decoration: none; }
.kop-nr { display: none; }
.kop-acties .kop-knop { display: none; }
.menu-knop { min-height: 44px; padding: 8px 12px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); color: var(--ink); font: 600 16px var(--tekst); cursor: pointer; }
.kop.open .hoofdnav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); border-bottom: 1px solid var(--lijn); padding: 8px 20px 16px; }
.kop.open .hoofdnav ul { flex-direction: column; }
.kop.open .hoofdnav a { padding: 12px; font-size: 18px; }

/* hero: de foto ligt achter de HELE hero, op elk scherm (Maxim 14-10: "de hele hero als afbeelding",
   voorbeeld fietsenmakersaanhuis.nl). Kop en formulier staan erop; het formulier is een kaart van donker glas.
   Nooit meer foto boven en tekst of formulier eronder. De donkere grondkleur zit op de sectie zelf,
   zodat de witte tekst ook leesbaar is (en gemeten wordt) voordat de foto laadt. */
.hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--ink); color: var(--wit);
  padding: clamp(136px, 38vw, 200px) 0 36px; }
.hero-achter { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.hero-achter img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-achter::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 34, 48, .35) 0, rgba(14, 34, 48, .12) 14%, rgba(14, 34, 48, .55) 30%, rgba(14, 34, 48, .8) 48%, rgba(14, 34, 48, .88) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hero-grid > * { min-width: 0; }
.met-foto h1 { color: var(--wit); text-shadow: 0 1px 24px rgba(0, 0, 0, .3); margin: 0; }
.met-foto .sub { color: #E6EEF2; margin: 14px 0 20px; }
.met-foto .kruimel { display: none; }
.met-foto .kruimel ol, .met-foto .kruimel li, .met-foto .kruimel li + li::before { color: #D9E3E8; }
.met-foto .kruimel a { color: var(--wit); }
.met-foto .hero-tel a:not(.btn):not(.wa-knop), .met-foto .contactlijst a { color: var(--wit); }
.zonder-form { padding-bottom: 48px; }
.zonder-form .hero-tel { margin-top: 20px; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .8s ease; }
.hero-video.speelt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* kop over de hero (acinstallationlisbon-patroon, Maxim 19-08 en 14-10): het beeld loopt door tot de bovenrand.
   Alleen met JS, want het script zet de witte balk terug na de hero. De tint (inkt 62%) loopt onder de balk weg
   in een verloop, dus geen zichtbare strook; de tint zorgt ook dat de contrastpoort de witte tekst goed meet. */
.js .kop-over .kop { position: fixed; left: 0; right: 0; top: 0; background-color: rgba(14, 34, 48, .62); border-bottom-color: transparent;
  transition: background-color .25s ease; }
.js .kop-over .kop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 56px; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 34, 48, .62), rgba(14, 34, 48, 0)); transition: opacity .25s ease; }
.js .kop-over .merk, .js .kop-over .kop-bel, .js .kop-over .hoofdnav a { color: var(--wit); }
.js .kop-over .merk-naam span { color: var(--wit); }
.js .kop-over .hoofdnav a:hover, .js .kop-over .hoofdnav a[aria-current] { background: rgba(255, 255, 255, .14); }
.js .kop-over .menu-knop { background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, .55); }
.js .kop-over .hero.met-foto { padding-top: calc(64px + clamp(136px, 38vw, 200px)); }
.js .kop-over.kop-vast .kop, .js .kop-over .kop.open { background-color: var(--wit); border-bottom-color: var(--lijn); }
.js .kop-over.kop-vast .kop::after, .js .kop-over .kop.open::after { opacity: 0; }
.js .kop-over.kop-vast .merk, .js .kop-over.kop-vast .kop-bel, .js .kop-over.kop-vast .hoofdnav a,
.js .kop-over .kop.open .merk, .js .kop-over .kop.open .kop-bel, .js .kop-over .kop.open .hoofdnav a { color: var(--ink); }
.js .kop-over.kop-vast .merk-naam span, .js .kop-over .kop.open .merk-naam span { color: var(--ink-2); }
.js .kop-over.kop-vast .hoofdnav a:hover, .js .kop-over.kop-vast .hoofdnav a[aria-current],
.js .kop-over .kop.open .hoofdnav a:hover, .js .kop-over .kop.open .hoofdnav a[aria-current] { background: var(--tint); }
.js .kop-over.kop-vast .menu-knop, .js .kop-over .kop.open .menu-knop { background: var(--wit); color: var(--ink); border-color: var(--lijn); }
/* formulier als donker glas op de foto (zoals de prijscheck van fietsenmakersaanhuis) */
.hero .formkaart { background: rgba(14, 34, 48, .55); color: var(--wit); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero .form-kop { color: var(--wit); }
.hero .balkjes i { background: rgba(255, 255, 255, .25); }
.hero .balkjes i.aan { background: var(--geel); }
.hero .voortgang, .hero .form-onder, .hero .veld label { color: #DCE6EB; }
.hero .chip span { background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .3); color: var(--wit); }
.hero .chip:hover span { border-color: rgba(255, 255, 255, .7); }
.hero .chip input:checked + span { background: var(--geel); border-color: var(--geel); color: var(--ink); box-shadow: none; }
.hero .chip input:focus-visible + span { outline-color: var(--wit); }
.hero .veld input { border-color: var(--wit); }
.hero .terug { color: var(--wit); }
.hero .terugkoppeling { color: #A8E6BC; }
.hero .fout { color: #FFB4AB; }
.kop-blok { padding-bottom: 8px; }
.sub { font-size: 19px; color: var(--ink-2); max-width: 36em; }
.hero-tel { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.bel-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
/* WhatsApp-knop: altijd standaard (Maxim 14-10). WhatsApp-groen met inkt-tekst haalt AA; wit op groen niet. */
.wa-knop, a.wa-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px;
  background: #25D366; color: var(--ink); border-radius: var(--r); font: 700 17px/1.2 var(--kop); text-decoration: none; white-space: nowrap; }
.wa-knop:hover { background: #1EBE5B; }
.wa-zweef { display: none; }
/* tekst per apparaat (Maxim 14-10): .d alleen vanaf 600 px, .m alleen op de telefoon */
@media (max-width: 599px) { .d { display: none !important; } }
@media (min-width: 600px) { .m { display: none !important; } .met-foto .kruimel { display: block; } }
.kruimel ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; color: var(--ink-2); }
.kruimel li + li::before { content: "/"; margin-right: 4px; color: var(--ink-2); }
.kruimel a { color: var(--ink-2); display: inline-block; padding: 2px 0; }

/* formulierkaart en stappenformulier */
.formkaart { background: var(--wit); color: var(--ink); border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw); padding: 20px; align-self: start; }
.stapform fieldset, .herkomst fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-kop { font-size: 22px; margin-bottom: 8px; }
.balkjes { display: none; gap: 6px; margin-bottom: 6px; }
.balkjes i { flex: 1; height: 4px; border-radius: var(--r); background: var(--lijn); }
.balkjes i.aan { background: var(--ink); }
.voortgang { display: none; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
legend { font: 700 17px/1.3 var(--kop); margin-bottom: 10px; padding: 0; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.chips > * { min-width: 0; }
.chip { position: relative; display: flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { flex: 1; display: flex; align-items: center; min-height: 52px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--r);
  background: var(--wit); font-weight: 600; font-size: 16px; line-height: 1.25; cursor: pointer; overflow-wrap: anywhere; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--tint); }
.chip input:focus-visible + span { outline: 3px solid #1B6FA8; outline-offset: 2px; }
.veld { margin-bottom: 12px; }
.veld label { display: block; font-weight: 600; margin-bottom: 4px; }
.veld input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8A9AA6; border-radius: var(--r); font: 400 17px var(--tekst); color: var(--ink); background: var(--wit); }
.veld input:focus { border-color: var(--ink); outline: 2px solid #1B6FA8; outline-offset: 0; }
.veld input[aria-invalid="true"] { border-color: #B3261E; }
.fout { color: #B3261E; font-size: 15px; margin: 4px 0 0; }
.terug { display: none; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; margin: -6px 0 4px -4px; border: 0; background: none; color: var(--ink); font: 600 16px var(--tekst); cursor: pointer; }
.terugkoppeling { color: var(--groen); font-weight: 600; min-height: 0; }
.terugkoppeling:empty { display: none; }
.form-onder { font-size: 15px; color: var(--ink-2); margin: 12px 0 0; }
.hp { position: absolute; left: -9999px; }
.js .stapform .balkjes { display: flex; }
.js .stapform .voortgang { display: block; }
.js .stapform .stap { display: none; }
.js .stapform .stap.actief { display: block; }
.js .stapform .terug { display: inline-flex; }

/* zekerheden */
.strook { background: var(--tint); padding: 24px 0; }
.zeker { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.zeker li { display: flex; gap: 14px; align-items: flex-start; }
.zeker h3 { margin-bottom: 4px; font-size: 18px; }
.zeker p { margin: 0; color: var(--ink-2); }
.tegel { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--ink); color: var(--wit); }

/* secties */
.sectie { padding: 40px 0; }
.tint { background: var(--tint); }
.sectie > .wrap > p, .tekst p { max-width: 68ch; }
.na-kaarten { margin-top: 16px; }
.noot { font-size: 16px; color: var(--ink-2); }

/* voor/na-schuif */
.schuif { margin: 0; }
.schuif-vak { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r); background: var(--lijn); touch-action: pan-y; user-select: none; }
.schuif-vak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.schuif-voor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.schuif-label { position: absolute; top: 12px; padding: 4px 10px; border-radius: var(--r); background: rgba(14, 34, 48, .82); color: var(--wit); font: 700 14px/1.3 var(--kop); pointer-events: none; }
.schuif-l { left: 12px; }
.schuif-r { right: 12px; }
.schuif-greep { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--wit); pointer-events: none; }
.schuif-knop { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--wit); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.schuif-range { position: absolute; left: 0; bottom: 0; width: 100%; height: 44px; margin: 0; opacity: 0; cursor: ew-resize; }
.schuif.vast .schuif-vak { cursor: grabbing; }
.schuif figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.bewijs-grid { display: grid; gap: 20px; align-items: center; }
.bewijs-grid > * { min-width: 0; }

/* probleem, stappen, factoren */
.probleem { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.probleem li { border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px; background: var(--wit); }
.probleem h3 { font-size: 18px; margin-bottom: 4px; }
.probleem p { margin: 0; color: var(--ink-2); }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.stap-nr { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--geel); color: var(--ink); font: 800 18px var(--kop); }
.step h3 { margin-bottom: 2px; font-size: 18px; }
.step p { margin: 0; color: var(--ink-2); }
.factoren, .plaatsen, .links { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.factoren li, .plaatsen li { display: flex; gap: 10px; align-items: flex-start; }
.factoren svg { flex: none; color: var(--groen); margin-top: 3px; }
.plaatsen { grid-template-columns: 1fr 1fr; }
.plaatsen svg { flex: none; margin-top: 3px; }
.links a { display: inline-block; padding: 6px 0; font-weight: 600; }
.kort-stappen { padding-left: 20px; }
.kort-stappen li { margin-bottom: 8px; }
.contactlijst { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.contactlijst li { display: flex; align-items: center; gap: 10px; }
.contactlijst a { display: inline-block; padding: 8px 0; font-weight: 600; }
.gebied { display: flex; gap: 14px; align-items: flex-start; }
.gebied p { margin: 0; }

/* kaarten: hele kaart is de link (regel 29b) */
.kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kaarten > li { min-width: 0; }
.kaart { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--wit); }
.kaart:hover, .kaart:focus-visible { border-color: var(--ink); box-shadow: var(--schaduw); }
.kaart-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
.kaart-tekst { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.kaart-tekst strong { font: 700 19px/1.25 var(--kop); }
.bekijk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }

/* vergelijking: op mobiel gestapeld met labels */
.vergelijk { width: 100%; border-collapse: collapse; }
.vergelijk th, .vergelijk td { text-align: left; padding: 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.vergelijk thead th { font: 700 16px var(--kop); }
.vergelijk tbody th { font-weight: 700; }
.vergelijk td:last-child { font-weight: 600; }

/* herhaalde knop */
.cta-band { padding: 40px 0; }
.cta-kaart { background: var(--ink); color: var(--wit); border-radius: var(--r); padding: 28px 20px; display: grid; gap: 20px; }
.cta-kaart h2 { color: var(--wit); }
.cta-kaart p { color: #D9E3E8; }
.cta-kaart a:not(.btn) { color: var(--wit); }
.tldr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tldr li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.tldr svg { color: var(--geel); flex: none; }
.cta-acties p { margin: 12px 0 0; }
.cta-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cta-tel a { display: inline-block; padding: 6px 0; font-weight: 700; }

/* vragen */
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { cursor: pointer; padding: 16px 32px 16px 0; font: 700 18px/1.35 var(--kop); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 24px; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 16px; color: var(--ink-2); max-width: 64ch; }

/* tekstpagina's */
.tekst h2 { margin-top: 28px; font-size: 24px; }
.feiten { display: grid; grid-template-columns: 1fr; gap: 4px 16px; }
.feiten dt { font-weight: 700; margin-top: 8px; }
.feiten dd { margin: 0; color: var(--ink-2); }
.herkomst .chips { margin-bottom: 16px; }

/* voettekst */
.voet { background: var(--ink); color: #D9E3E8; padding: 40px 0 24px; }
.voet a:not(.btn) { color: var(--wit); display: inline-block; padding: 5px 0; }
.voet-merk { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.voet-icoon { width: 40px; height: 40px; flex: none; }
.voet-naam { font: 800 20px var(--kop); color: var(--wit); margin-bottom: 4px; }
.voet-feiten { max-width: 60ch; }
.voet-grid { display: grid; gap: 20px; }
.voet-kop { font: 700 16px var(--kop); color: var(--wit); margin-bottom: 6px; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet-klein { margin-top: 24px; font-size: 15px; }

/* vaste balk onderaan op mobiel */
.vaste-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 -4px 16px rgba(14, 34, 48, .08); }
.vaste-balk .btn { flex: 1; min-width: 0; padding: 12px 10px; }
.balk-knop { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 48px;
  font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--lijn); border-radius: var(--r); }
.balk-wa { background: #25D366; border-color: #25D366; color: var(--ink); min-width: 76px; }

@media (min-width: 600px) {
  .zeker { grid-template-columns: repeat(3, 1fr); }
  .probleem { grid-template-columns: 1fr 1fr; }
  .kaarten { grid-template-columns: 1fr 1fr; }
  .stappen { grid-template-columns: 1fr 1fr; }
  .voet-grid { grid-template-columns: repeat(3, 1fr); }
  .plaatsen { grid-template-columns: repeat(3, 1fr); }
  .feiten { grid-template-columns: 160px 1fr; }
  .feiten dt { margin-top: 0; }
}
@media (max-width: 599px) {
  .btn-groot, a.btn-groot { white-space: normal; text-align: center; max-width: 100%; }
  .vergelijk thead { display: none; }
  .vergelijk tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
  .vergelijk th, .vergelijk td { display: block; border: 0; padding: 2px 0; }
  .vergelijk td::before { content: attr(data-l) ": "; font-weight: 400; color: var(--ink-2); }
}
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .vaste-balk { display: none; }
  .hoofdnav { display: block; }
  .menu-knop { display: none; }
  .kop-nr { display: inline; }
  .kop-acties .kop-knop { display: inline-flex; min-height: 44px; padding: 10px 18px; }
  .hero.met-foto { padding: 56px 0 64px; }
  .js .kop-over .hero.met-foto { padding-top: 120px; }
  .met-foto .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 56px; align-items: center;
    min-height: min(820px, calc(100svh - 184px)); }
  .met-foto .hero-achter::after { background: linear-gradient(90deg, rgba(14, 34, 48, .92) 0, rgba(14, 34, 48, .78) 40%, rgba(14, 34, 48, .52) 70%, rgba(14, 34, 48, .44) 100%),
    linear-gradient(180deg, rgba(14, 34, 48, .3), transparent 30%); }
  .met-foto .formkaart { margin-top: 0; padding: 28px; }
  .zonder-form .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 440px; }
  .zonder-form .hero-kern { max-width: 680px; }
  .kop-rij { gap: 16px; }
  .wa-zweef { display: inline-flex; position: fixed; right: 24px; bottom: 24px; z-index: 40; box-shadow: 0 6px 24px rgba(14, 34, 48, .25); padding: 12px 22px; }
  .sectie { padding: 64px 0; }
  .bewijs-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
  .kaarten { grid-template-columns: repeat(3, 1fr); }
  .stappen { grid-template-columns: repeat(4, 1fr); }
  .probleem.drie { grid-template-columns: repeat(3, 1fr); }   /* locatiepagina's: drie punten naast elkaar */
  .cta-kaart { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }