/* ==========================================================================
   verenigingwebsitelatenmaken.nl: ontwerp "Het clubhuis" (31-10-2026).
   Sportief en gemoedelijk als een clubhuis op zaterdag: marineblauw draagt (hero, volvlak, footer), clubgeel
   juicht (primaire knop met inkt-tekst, scorebordcijfers op marine, shirtstrepen, CTA-band). Signatuur: scorebord
   en strepen. Elke H2 krijgt links een scorebordtegel (inkt vlak, geel sectienummer via een CSS-counter); eyebrows
   zijn klein-kapitaal met twee korte gele streepjes ervoor; de hero heeft rechtsboven drie gele shirtstrepen.
   Kaarten hoek 12, knoppen hoek 8, velden hoek 8, foto's hoek 12. Geen pills, geen diagonalen, geen maskers.
   Zelfde klassenamen als de motor (bouw.py, main.js, md_paginas_basis.py); tokens uit config.py.
   Geen framework, geen externe requests: de letters staan in assets/fonts/.
   ========================================================================== */

@font-face{font-family:"Unbounded";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/kop-700.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tekst-400.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tekst-700.woff2") format("woff2");}

:root{
  --inkt:#0E1A33;
  --merk:#142850;
  --accent:#FFC233;
  --grond:#F3F5F9;
  --wit:#FFFFFF;
  --diep:#0A1730;
  --lijn:rgba(14,26,51,.10);
  --lijn-sterk:rgba(14,26,51,.24);
  --lijn-licht:rgba(255,255,255,.20);
  --zacht:rgba(14,26,51,.76);
  --zacht-licht:rgba(255,255,255,.86);
  --schaduw:0 16px 44px rgba(14,26,51,.10);

  --kop:Unbounded,"Arial Black","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tekst:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --xs:14px; --s:17px; --m:19px; --l:26px; --xl:40px; --xxl:68px;
  --maxw:1220px;
  --hero:840px;
  --gut:clamp(16px,4vw,48px);
  --ritme:clamp(60px,7vw,92px);
  --rk:12px;          /* kaarten en foto's */
  --rb:8px;           /* knoppen en velden */
  --streep:var(--accent);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--tekst);font-size:var(--s);
  line-height:1.62;overflow-x:clip;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;margin:0;overflow-wrap:break-word;line-height:1.14;}
h1{font-size:clamp(34px,4.8vw,var(--xxl));letter-spacing:-.02em;line-height:1.08;}
h2{font-size:clamp(26px,3vw,var(--xl));letter-spacing:-.015em;}
h3{font-size:clamp(20px,1.9vw,var(--l));letter-spacing:-.01em;line-height:1.2;}
h4{font-size:var(--m);}
p{margin:0;}
a{color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
strong,b{font-weight:700;}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}
main{counter-reset:sectie;}

.wrap{max-width:calc(var(--maxw) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);width:100%;}
.sec{padding:var(--ritme) 0;}
.sec--licht{background:var(--grond);}
.sec--merk{background:var(--merk);color:var(--wit);}
.sec--donker{background:var(--diep);color:var(--wit);}
.sec--accent{background:var(--accent);color:var(--inkt);--streep:var(--inkt);}
.sec--vragen{background:var(--grond);}
.sec--licht + .sec--vragen{background:var(--wit);}
.sec--merk p,.sec--donker p{color:var(--zacht-licht);}
.sec--merk h2,.sec--merk h3,.sec--donker h2,.sec--donker h3{color:var(--wit);}
.sec--merk a,.sec--donker a{color:var(--wit);}
.lead{font-size:var(--m);line-height:1.6;color:var(--zacht);}
.sec--merk .lead,.sec--donker .lead{color:var(--zacht-licht);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--inkt);padding:10px 16px;z-index:99;border-radius:var(--rb);font-weight:700;}
.vb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
:focus-visible{outline:3px solid var(--merk);outline-offset:3px;}
.sec--merk :focus-visible,.sec--donker :focus-visible,.hero :focus-visible,.voet :focus-visible{outline-color:var(--accent);}
.club :focus-visible{outline-color:var(--merk);}
.sec--accent :focus-visible{outline-color:var(--inkt);}

/* --- eyebrow: klein-kapitaal met twee korte gele streepjes ervoor ------------------------------------ */
.label{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-family:var(--tekst);font-size:13px;font-weight:700;
  line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--merk);}
.label::before{content:"";flex:none;width:14px;height:15px;
  background:linear-gradient(90deg,var(--streep) 0 5px,transparent 5px 9px,var(--streep) 9px 14px);}
.sec--merk .label,.sec--donker .label,.hero .label{color:var(--wit);}
.sec--accent .label{color:var(--inkt);}

/* --- signatuur: scorebordtegel met het sectienummer links van elke H2 ---------------------------------- */
.kopblok h2,.bedankt__kop{counter-increment:sectie;position:relative;padding-left:52px;}
.kopblok h2::before,.bedankt__kop::before{content:counter(sectie,decimal-leading-zero);position:absolute;left:0;top:.08em;
  width:34px;height:34px;border-radius:6px;background:var(--inkt);color:var(--accent);
  font-family:var(--kop);font-weight:700;font-size:13px;letter-spacing:0;line-height:1;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.sec--merk .kopblok h2::before,.sec--donker .kopblok h2::before{background:var(--diep);box-shadow:inset 0 0 0 1px rgba(255,194,51,.55);}

/* --- kop ------------------------------------------------------------------------ */
.kop{background:var(--wit);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--lijn);}
.kop__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;}
.merk{font-family:var(--kop);font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.1;color:var(--inkt);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-width:0;}
.merk::before{content:"";width:26px;height:26px;border-radius:6px;flex:none;background-color:var(--merk);
  background-image:linear-gradient(90deg,transparent 0 6px,var(--accent) 6px 9px,transparent 9px 11.5px,var(--accent) 11.5px 14.5px,
    transparent 14.5px 17px,var(--accent) 17px 20px,transparent 20px);
  background-size:100% 16px;background-position:0 5px;background-repeat:no-repeat;}
.nav{display:flex;gap:clamp(12px,1.5vw,22px);}
.nav__link{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;font-size:16px;color:var(--inkt);}
.nav__link:hover,.nav__link.is-hier{text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:3px;text-underline-offset:9px;}
.kop__acties{display:flex;align-items:center;gap:18px;}
.tel{display:inline-flex;align-items:center;min-height:44px;font-weight:700;white-space:nowrap;font-size:16px;color:var(--inkt);
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px;}
.kop__acties .knop{min-height:46px;padding:11px 18px;font-size:15px;}
.menuknop{display:none;width:48px;height:48px;border-radius:var(--rb);border:2px solid var(--inkt);
  background:var(--wit);padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.menuknop span:not(.vb){display:block;width:20px;height:2px;background:var(--inkt);border-radius:1px;}
.mobielmenu{display:none;flex-direction:column;gap:0;padding:4px var(--gut) 24px;}
.mobielmenu__link{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--lijn);
  text-decoration:none;font-weight:700;}
.mobielmenu .knop{margin-top:16px;width:100%;}

/* --- knoppen: hoek 8, 16px/700, geel gevuld met inkt-tekst --------------------------------------------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;min-height:52px;
  border-radius:var(--rb);border:2px solid transparent;font-family:var(--tekst);font-weight:700;
  font-size:16px;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
.knop--vol{background:var(--accent);color:var(--inkt);border-color:var(--accent);}
.knop--vol:hover{background:var(--diep);border-color:var(--diep);color:var(--wit);}
.hero .knop--vol:hover,.sec--merk .knop--vol:hover,.sec--donker .knop--vol:hover{background:var(--wit);border-color:var(--wit);color:var(--inkt);}
.knop--merk{background:var(--inkt);color:var(--wit);border-color:var(--inkt);}
.knop--merk:hover{background:var(--merk);border-color:var(--merk);}
.knop--lijn{border-color:currentColor;background:transparent;color:inherit;}
.knop--lijn:hover{background:rgba(14,26,51,.06);}
.hero .knop--lijn,.sec--merk .knop--lijn,.sec--donker .knop--lijn{color:var(--wit);border-color:var(--wit);}
.hero .knop--lijn:hover,.sec--merk .knop--lijn:hover,.sec--donker .knop--lijn:hover{background:rgba(255,255,255,.12);}
.knoprij{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center;}
.tekstlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--accent);background:none;border:0;
  padding:0;cursor:pointer;color:inherit;}
.tekstlink:hover{text-decoration-color:currentColor;}
.sec--accent .tekstlink{text-decoration-color:var(--inkt);}
.tekstlink::after{content:"\2192";font-weight:700;}
.pijl{display:inline;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--accent);text-underline-offset:6px;}
.pijl::after{content:" \2192";}

/* --- hero: marine vlak, drie gele shirtstrepen rechtsboven, tekst links, clubkaart rechts ------------------ */
.hero{position:relative;background:var(--merk);color:var(--wit);overflow:hidden;
  min-height:clamp(600px,82vh,var(--hero));display:flex;align-items:center;}
.hero::before{content:"";position:absolute;top:0;right:clamp(16px,4vw,64px);width:110px;height:40%;pointer-events:none;
  background:linear-gradient(90deg,var(--accent) 0 18px,transparent 18px 46px,var(--accent) 46px 64px,
    transparent 64px 92px,var(--accent) 92px 110px);}
.hero__waas{display:none;}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(32px,4.5vw,72px);
  align-items:center;padding-top:clamp(48px,5.5vw,84px);padding-bottom:clamp(56px,6vw,96px);}
.hero h1{color:var(--wit);font-size:clamp(34px,4.3vw,60px);letter-spacing:-.03em;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .lead{margin-top:24px;max-width:36em;color:var(--zacht-licht);}
.hero .knoprij{margin-top:32px;}
.hero__vinkjes{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;}
.hero__vinkjes li{position:relative;padding-left:30px;font-weight:700;font-size:16px;color:var(--wit);}
.hero__vinkjes li::before{content:"";position:absolute;left:2px;top:6px;width:13px;height:7px;border-left:3px solid var(--accent);
  border-bottom:3px solid var(--accent);transform:rotate(-45deg);}
.hero__vak{position:relative;display:grid;justify-items:end;}
.hero__vak .club{width:min(100%,460px);}

/* hero van de vervolgpagina's: zelfde marine vlak en strepen, kruimelpad */
.hero--kaal{display:block;min-height:0;padding:clamp(40px,5vw,72px) 0 clamp(52px,6vw,88px);}
.hero--kaal::before{height:62%;}
.hero--kaal .wrap{position:relative;z-index:1;}
.hero--kaal h1{max-width:17em;font-size:clamp(34px,4.6vw,var(--xxl));padding-right:clamp(0px,9vw,140px);}
.hero--kaal .lead{margin-top:22px;max-width:62ch;}
.hero--kaal .lead a{text-underline-offset:4px;text-decoration-color:var(--accent);color:var(--wit);}
.kruimels{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--xs);font-weight:700;margin-bottom:26px;color:var(--zacht-licht);}
.kruimels a{color:var(--wit);text-underline-offset:4px;text-decoration-color:var(--accent);}
.kruimels span:last-child{font-weight:400;}

/* --- de band met de clubhuisfoto onder de hero ------------------------------------------------------- */
.fotoband{background:linear-gradient(var(--merk) 0 38%,var(--wit) 38% 100%);padding:0 0 clamp(24px,3vw,40px);}
.fotoband img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 58%;border-radius:var(--rk);}
.fotoband figure{margin:0;}
.fotoband figcaption{margin-top:12px;font-size:var(--xs);color:var(--zacht);}

/* --- de clubkaart (hero en /lid-worden-formulier/) ------------------------------------------------------ */
.club{background:var(--wit);color:var(--inkt);border-radius:var(--rk);box-shadow:0 26px 70px rgba(5,12,28,.38);
  overflow:hidden;text-align:left;}
.club__kop{display:flex;align-items:center;gap:12px;padding:16px 20px 14px;}
.club__logo{flex:none;width:40px;height:40px;border-radius:8px;background-color:var(--merk);
  background-image:linear-gradient(90deg,transparent 0 10px,var(--accent) 10px 15px,transparent 15px 17.5px,var(--accent) 17.5px 22.5px,
    transparent 22.5px 25px,var(--accent) 25px 30px,transparent 30px);background-size:100% 24px;background-position:0 8px;background-repeat:no-repeat;}
.club__naam{display:block;font-family:var(--kop);font-weight:700;font-size:16px;line-height:1.2;}
.club__sub{display:block;font-size:12px;color:var(--zacht);line-height:1.3;margin-top:2px;}
.club__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  background:var(--grond);}
.club__tab{min-height:48px;padding:6px 8px;border:0;background:transparent;font-weight:700;font-size:15px;color:var(--inkt);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;}
.club__tab + .club__tab{border-left:1px solid var(--lijn);}
.club__tab:hover{background:var(--wit);}
.club__tab[aria-selected="true"]{background:var(--wit);border-bottom-color:var(--accent);}
.club__paneel{padding:16px 20px 20px;min-height:296px;}
.club__paneel h3{font-family:var(--tekst);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--zacht);margin:2px 0 8px;}
.club__paneel h3 + .wedstrijden{margin-bottom:12px;}
.wedstrijd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;
  border-top:1px solid var(--lijn);}
.wedstrijd:last-child{border-bottom:1px solid var(--lijn);}
.wedstrijd__wanneer{display:block;font-size:12px;color:var(--zacht);line-height:1.3;}
.wedstrijd__teams{display:block;font-weight:700;font-size:15px;line-height:1.3;}
.score{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px;height:38px;padding:0 10px;border-radius:6px;
  background:var(--merk);color:var(--accent);font-family:var(--kop);font-weight:700;font-size:17px;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.score--nog{font-size:14px;}
.nieuws{display:grid;gap:0;}
.nieuws li{padding:11px 0;border-top:1px solid var(--lijn);}
.nieuws li:last-child{border-bottom:1px solid var(--lijn);}
.nieuws time{display:block;font-size:12px;color:var(--zacht);}
.nieuws strong{display:block;font-size:16px;line-height:1.35;}
.nieuws span{display:block;font-size:14px;color:var(--zacht);line-height:1.45;margin-top:2px;}
.lidform{display:grid;gap:12px;}
.lidform .veld label{font-size:14px;}
.lidform .veld input,.lidform .veld select{min-height:46px;}
.lidform__rij{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;}
.lidform .knop{width:100%;margin-top:2px;}
.lidform__fout{font-size:14px;font-weight:700;color:var(--inkt);}
.lidform__ok{display:grid;gap:8px;padding:18px;border-radius:var(--rb);background:var(--grond);border-left:5px solid var(--accent);}
.lidform__ok strong{font-family:var(--kop);font-weight:700;font-size:17px;line-height:1.25;}
.lidform__ok p{font-size:15px;color:var(--zacht);}
.lidform__ok .tekstlink{min-height:40px;font-size:15px;justify-self:start;}
.club__voet{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--merk);color:var(--wit);font-size:13px;font-weight:700;
  letter-spacing:.06em;}
.club__voet::before{content:"";flex:none;width:12px;height:12px;
  background:linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px,var(--accent) 8px 12px);}
.club-plek{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start;margin:32px 0 8px;}
.club-plek .club{box-shadow:var(--schaduw);border:1px solid var(--lijn);}
.club-plek .club__paneel{min-height:330px;}
.club-plek__tekst h3{margin-bottom:12px;}
.club-plek__tekst p{color:var(--zacht);}
.club-plek__tekst p + p{margin-top:14px;}
.club-plek__tekst .vinkjes{margin-top:18px;}
.sec--merk .club-plek__tekst p{color:var(--zacht-licht);}

/* --- rasters en kaarten ------------------------------------------------------------------ */
.kopblok{max-width:860px;margin-bottom:clamp(32px,4vw,52px);}
.kopblok .lead{margin-top:18px;max-width:62ch;}
.raster{display:grid;gap:clamp(16px,2vw,24px);}
.raster--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.raster--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.raster--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rk);padding:clamp(22px,2.2vw,30px);
  display:flex;flex-direction:column;gap:10px;color:var(--inkt);}
.sec:not(.sec--licht):not(.sec--merk):not(.sec--vragen) .kaart{background:var(--grond);}
.sec--merk .kaart,.sec--donker .kaart{background:rgba(255,255,255,.06);color:var(--wit);border-color:var(--lijn-licht);}
.sec--accent .kaart{background:var(--wit);color:var(--inkt);}
.kaart h3{font-size:clamp(19px,1.7vw,22px);}
.kaart p{color:var(--zacht);}
.sec--merk .kaart p,.sec--donker .kaart p{color:var(--zacht-licht);}
.kaart--link{text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease;}
.kaart--link:hover{border-color:var(--merk);box-shadow:var(--schaduw);}
.kaart--link .pijl{margin-top:auto;padding-top:10px;align-self:flex-start;white-space:nowrap;}
.kaart__vanaf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 4px;font-size:var(--xs);color:var(--zacht);}
.kaart__vanaf strong{display:inline-flex;align-items:center;height:34px;padding:0 10px;border-radius:6px;background:var(--merk);
  color:var(--accent);font-family:var(--kop);font-weight:700;font-size:16px;line-height:1;white-space:nowrap;}
.kaart__extra{font-size:var(--xs);font-weight:700;color:var(--inkt) !important;margin-top:-4px;}
.kaart__links{margin-top:auto;padding-top:4px;}
.kaart__links .tekstlink{display:inline;min-height:0;line-height:1.5;padding:6px 0;}
.kaart__links .tekstlink::after{margin-left:6px;}
.voorwie__slot{margin-top:28px;max-width:70ch;}

/* tekst naast beeld */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;}
.split--boven{align-items:start;}
.split--tekst{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.split--beeld{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.split > div > p + p,.proza p + p{margin-top:16px;}
.proza p{color:var(--zacht);max-width:70ch;}
.sec--merk .proza p,.sec--donker .proza p{color:var(--zacht-licht);}
.proza h2{margin:44px 0 16px;font-size:var(--l);}
.proza h2:first-child{margin-top:24px;}
.proza h3{margin:28px 0 10px;}
.proza a,.lead a,.note a,.wrap > ul a,.vinkjes a,.tabel a,.stappen-lijst a{text-underline-offset:4px;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;}
.sec--licht .proza a,.sec--licht .vinkjes a,.sec--vragen a{text-decoration-color:var(--merk);}
.wrap > ul:not([class]),.split ul:not([class]),.wrap > .proza ul{display:grid;gap:10px;margin:16px 0;max-width:76ch;}
.wrap > ul:not([class]) li,.split ul:not([class]) li,.proza li{position:relative;padding-left:24px;color:var(--zacht);}
.wrap > ul:not([class]) li::before,.split ul:not([class]) li::before,.proza li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:12px;
  background:var(--accent);}
.sec--merk .wrap > ul:not([class]) li,.sec--merk .split ul:not([class]) li{color:var(--zacht-licht);}
.sec--merk ul:not([class]) strong{color:var(--wit);}
.nobr{white-space:nowrap;}
.wrap > h3{margin:34px 0 12px;}
.sec--merk .wrap > h3{color:var(--wit);}
.wrap > .proza + .proza,.wrap > .vinkjes + .proza,.wrap > .proza + .vinkjes,.wrap > ul + .proza,.wrap > .proza + ul,
.wrap > .raster + .proza,.wrap > .proza + .raster,.wrap > .tabel-wrap + .proza,.wrap > .proza + .tabel-wrap,
.wrap > .stappen-lijst + .proza,.wrap > .proza + .stappen-lijst,.wrap > .pakketten + .proza{margin-top:20px;}
.wrap > .vinkjes{margin:18px 0;max-width:76ch;}

/* rijen met een lijn ertussen */
.rijen > div{padding:18px 0;border-top:1px solid var(--lijn);}
.rijen > div:last-child{border-bottom:1px solid var(--lijn);}
.rijen h3{font-family:var(--tekst);font-weight:700;font-size:var(--m);margin-bottom:6px;}
.rijen p{color:var(--zacht);}

/* --- vinkjes ------------------------------------------------------------------------------- */
.vinkjes{display:grid;gap:10px;}
.vinkjes li{position:relative;padding-left:32px;line-height:1.5;}
.vinkjes li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:6px;background:var(--merk);}
.vinkjes li::after{content:"";position:absolute;left:6px;top:8px;width:10px;height:5px;border-left:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);transform:rotate(-45deg);}
.sec--merk .vinkjes li,.sec--donker .vinkjes li{color:var(--wit);}
.sec--merk .vinkjes li::before,.sec--donker .vinkjes li::before{background:var(--accent);}
.sec--merk .vinkjes li::after,.sec--donker .vinkjes li::after{border-color:var(--inkt);}

/* --- werkwijze (home): drie stappen als scorebordregels ------------------------------------------------- */
.werkstappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);counter-reset:ws;}
.werkstappen li{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--rk);background:var(--grond);border:1px solid var(--lijn);}
.werkstappen li::before{counter-increment:ws;content:counter(ws);display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:8px;background:var(--merk);color:var(--accent);font-family:var(--kop);font-weight:700;
  font-size:24px;line-height:1;margin-bottom:6px;}
.werkstappen h3{font-size:clamp(19px,1.7vw,22px);}
.werkstappen p{color:var(--zacht);}

/* stappen van de motor en de genummerde lijst uit de markdown */
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.stap{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:var(--rk);background:var(--grond);
  border:1px solid var(--lijn);}
.sec--licht .stap{background:var(--wit);}
.stap__wanneer{font-family:var(--kop);font-weight:700;font-size:var(--m);color:var(--merk);}
.stap p{color:var(--zacht);}
.stappen-lijst{counter-reset:stap;display:grid;gap:12px;margin:18px 0;max-width:80ch;}
.stappen-lijst li{position:relative;padding:4px 0 4px 52px;min-height:36px;color:var(--zacht);}
.stappen-lijst li::before{counter-increment:stap;content:counter(stap);position:absolute;left:0;top:0;width:36px;height:36px;
  border-radius:6px;background:var(--merk);color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--kop);font-weight:700;font-size:15px;line-height:1;}
.stappen-lijst strong{color:var(--inkt);}
.sec--merk .stappen-lijst li{color:var(--zacht-licht);}
.sec--merk .stappen-lijst li::before{background:var(--accent);color:var(--inkt);}
.sec--merk .stappen-lijst strong{color:var(--wit);}

/* --- usp-balk: vier vakken met een gele shirtstreep bovenaan ------------------------------------------ */
.sec--usp{padding:clamp(28px,3.6vw,48px) 0 clamp(44px,5vw,72px);}
.usp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);}
.usp__item{position:relative;padding:22px 0 0;border-top:1px solid var(--lijn-sterk);}
.usp__item::before{content:"";position:absolute;top:-3px;left:0;width:56px;height:5px;background:var(--accent);}
.usp__item h3{font-family:var(--tekst);font-weight:700;font-size:var(--m);line-height:1.3;}
.usp__item p{color:var(--zacht);font-size:16px;margin-top:6px;}

/* --- pakketten ---------------------------------------------------------------------- */
.pakketten{align-items:stretch;padding-top:18px;}
.pakket{position:relative;background:var(--wit);color:var(--inkt);border-radius:var(--rk);border:1px solid var(--lijn);
  padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;}
.sec:not(.sec--licht):not(.sec--merk) .pakket{background:var(--grond);}
.pakket--uit{border:2px solid var(--merk);padding-top:calc(clamp(22px,2.4vw,32px) + 30px);box-shadow:var(--schaduw);}
.sec:not(.sec--licht) .pakket--uit{background:var(--wit);}
.pakket h3{font-size:var(--l);}
.pakket__voor,.pakket p{color:var(--zacht);font-size:16px;}
.pakket .vinkjes{flex-grow:1;align-content:start;margin:8px 0 14px;}
.pakket .vinkjes li{color:var(--inkt);font-size:16px;}
.pakket .knop{width:100%;}
.prijs,.pakket .prijs{display:inline-flex;align-self:flex-start;align-items:center;padding:10px 14px;border-radius:8px;background:var(--merk);
  font-family:var(--kop);font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:1;letter-spacing:-.01em;
  color:var(--accent);white-space:nowrap;margin-top:4px;}
.prijs__duur,.pakket .prijs__duur{font-size:var(--xs);color:var(--zacht);}
.merkje{position:absolute;top:0;left:0;right:0;height:32px;border-radius:9px 9px 0 0;background:var(--merk);color:var(--wit);
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.merkje::before{content:"";width:12px;height:12px;background:linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px,var(--accent) 8px 12px);}
.losse{margin-top:clamp(22px,2.4vw,30px);border-radius:var(--rk);background:var(--wit);border:1px solid var(--lijn);
  padding:16px 22px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;}
.sec:not(.sec--licht) .losse{background:var(--grond);}
.losse span{display:inline-flex;align-items:center;gap:8px;}
.losse span.losse__slot{display:inline;color:var(--zacht);}
.losse span b{font-weight:700;padding:3px 8px;border-radius:6px;background:var(--merk);color:var(--accent);white-space:nowrap;}
.losse a{text-underline-offset:4px;text-decoration-color:var(--merk);}
.note{margin-top:20px;color:var(--zacht);font-size:var(--xs);max-width:92ch;}
.sec--donker .note,.sec--merk .note{color:var(--zacht-licht);}
.sec--accent .note{color:var(--inkt);}

/* --- tabel ----------------------------------------------------------------------------- */
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:8px 0;border-radius:var(--rk);border:1px solid var(--lijn);}
.tabel{width:100%;border-collapse:collapse;background:var(--wit);color:var(--inkt);font-variant-numeric:tabular-nums;}
.tabel th,.tabel td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn);font-size:16px;
  overflow-wrap:break-word;}
.tabel tbody tr:last-child > *{border-bottom:0;}
.tabel thead th{background:var(--merk);color:var(--wit);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.tabel tbody th{font-weight:700;}
.sec--merk .tabel a,.sec--donker .tabel a,.sec--merk .pakket a:not(.knop),.sec--merk .case a{color:var(--inkt);text-decoration-color:var(--merk);}
.tabel tbody tr:nth-child(even){background:rgba(243,245,249,.7);}

/* --- echte projecten ----------------------------------------------------------------------- */
.cases{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.case{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--rk);background:var(--grond);
  border:1px solid var(--lijn);}
.sec--licht .case{background:var(--wit);}
.case__plaats{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--zacht);}
.case h3{font-size:clamp(19px,1.7vw,22px);}
.case p{color:var(--zacht);}
.case__site{margin-top:auto;font-size:var(--xs);font-weight:700;color:var(--inkt) !important;overflow-wrap:anywhere;}

/* --- zekerheden: genummerde scorebordtegels op marine ---------------------------------------- */
.zekerheden{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.zekerheid{display:flex;flex-direction:column;gap:10px;}
.zekerheid__nr{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:8px;
  background:var(--accent);color:var(--inkt);font-family:var(--kop);font-weight:700;font-size:20px;line-height:1;}
.zekerheid h3{font-size:var(--m);line-height:1.3;font-family:var(--tekst);font-weight:700;}
.zekerheid p{font-size:16px;}

/* --- foto's ------------------------------------------------------------------------ */
.foto{margin:0;position:relative;}
.foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rk);}
.foto--staand img{aspect-ratio:4/5;}
.foto--breed img{aspect-ratio:16/9;}
.wrap > .foto--breed{margin-top:clamp(28px,3.4vw,44px);}
.foto figcaption{margin-top:10px;font-size:var(--xs);color:var(--zacht);}
.foto--streep::after{content:"";position:absolute;right:22px;top:-10px;width:64px;height:84px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 26px,var(--accent) 26px 38px,transparent 38px 52px,var(--accent) 52px 64px);}

/* --- rekenhulp (motor), voor het geval een pagina hem gebruikt ------------------------------------- */
.rekenhulp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,3.5vw,48px);align-items:start;}
.rekenhulp > .knoprij,.rekenhulp > .note{grid-column:1 / -1;margin-top:0;}
.rekenhulp .formvelden{grid-template-columns:repeat(2,minmax(0,1fr));}
.rekenhulp__in{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rk);padding:clamp(22px,2.6vw,34px);
  display:grid;gap:clamp(22px,2.6vw,30px);}
.rekenhulp fieldset,.rekenhulp__groep{margin:0;padding:0;border:0;min-width:0;display:grid;gap:14px;}
.rekenhulp legend{padding:0;margin-bottom:8px;font-family:var(--kop);font-weight:700;font-size:var(--m);}
.rekenhulp__waarde{font-weight:700;font-size:var(--xs);color:var(--merk);}
.rekenhulp__uit{background:var(--merk);color:var(--wit);border-radius:var(--rk);padding:clamp(22px,2.6vw,34px);
  display:grid;gap:8px;position:sticky;top:100px;}
.rekenhulp__uit p{color:var(--zacht-licht);}
.rekenhulp__uit h3{color:var(--wit);font-size:var(--m);}
.rekenhulp__rij{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--lijn-licht);}
.rekenhulp__label{color:var(--zacht-licht);font-size:var(--xs);}
.rekenhulp__getal{font-family:var(--kop);font-weight:700;font-size:var(--m);white-space:nowrap;text-align:right;color:var(--accent);}
.rekenhulp__melding{padding-top:12px;border-top:1px solid var(--lijn-licht);line-height:1.6;font-size:16px;}
.rekenhulp__melding:empty{display:none;}

/* --- demo-kaarten en voorbeelden ----------------------------------------------------------- */
.kaart__beeld{margin:calc(-1*clamp(22px,2.2vw,30px)) calc(-1*clamp(22px,2.2vw,30px)) 8px;border-radius:11px 11px 0 0;overflow:hidden;}
.kaart__beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.kaart--demo{background:var(--wit) !important;}
.raster--3.voorbeelden{align-items:stretch;}
.voorbeeld{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;}
.voorbeeld img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:var(--rk);
  border:1px solid var(--lijn);transition:box-shadow .15s ease,border-color .15s ease;}
.voorbeeld:hover img{box-shadow:var(--schaduw);border-color:var(--merk);}
.voorbeeld h3{font-size:clamp(19px,1.7vw,22px);margin-top:4px;}
.voorbeeld__soort{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--zacht);}
.voorbeeld p:not(.voorbeeld__soort){color:var(--zacht);}
.sec--merk .voorbeeld p,.sec--merk .voorbeeld__soort{color:var(--zacht-licht);}

/* --- faq: uitklapbaar, eerste open ---------------------------------------------------------------- */
.faq{display:grid;gap:10px;}
.vraag{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rk);}
.sec--licht + .sec--vragen .vraag{background:var(--grond);}
.vraag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 20px;min-height:64px;}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary h3{margin:0;font-family:var(--tekst);font-weight:700;font-size:var(--m);line-height:1.35;}
.vraag summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:6px;background:var(--merk);
  color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;line-height:1;}
.vraag[open] summary::after{content:"\2212";background:var(--accent);color:var(--inkt);}
.vraag__a{padding:0 20px 20px;}
.vraag__a p{color:var(--zacht);line-height:1.65;max-width:72ch;}
.vraag__a p + p{margin-top:10px;}
.vraag__a a{text-underline-offset:4px;text-decoration-color:var(--merk);text-decoration-thickness:2px;}
.faqblok{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;}
.faqblok .kopblok{margin-bottom:0;position:sticky;top:110px;}

/* --- cta-band: geel vlak, inkt-tekst ------------------------------------------------------- */
.cta{position:relative;overflow:hidden;}
.cta::after{content:"";position:absolute;bottom:0;right:clamp(16px,4vw,64px);width:110px;height:46%;pointer-events:none;
  background:linear-gradient(90deg,var(--inkt) 0 18px,transparent 18px 46px,var(--inkt) 46px 64px,transparent 64px 92px,var(--inkt) 92px 110px);
  opacity:.12;}
.cta__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;}
.cta .kopblok{margin-bottom:0;max-width:none;}
.cta h2{max-width:20em;color:var(--inkt);}
.cta .lead{margin-top:18px;max-width:60ch;color:var(--inkt);}
.cta .lead a{text-decoration-color:var(--inkt);}
.cta__acties{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.cta__acties .knoprij{margin-top:0;}
.cta .knop--lijn{color:var(--inkt);border-color:var(--inkt);}
.cta .knop--lijn:hover{background:var(--inkt);color:var(--wit);}
.cta .knop--merk:hover{background:var(--wit);color:var(--inkt);border-color:var(--wit);}
.cta__mail{display:flex;flex-wrap:wrap;gap:8px 24px;font-weight:700;}
.cta__mail a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px;overflow-wrap:anywhere;color:var(--inkt);}

/* --- formulier ----------------------------------------------------------------------- */
.form,.offerte{background:var(--wit);color:var(--inkt);border-radius:var(--rk);border:1px solid var(--lijn);
  box-shadow:var(--schaduw);padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,26px);margin:0;}
.offerte fieldset{margin:0;padding:0;border:0;min-width:0;}
.offerte legend{padding:0;margin-bottom:12px;font-family:var(--kop);font-weight:700;font-size:clamp(18px,1.6vw,21px);line-height:1.25;}
.offerte fieldset + fieldset{margin-top:22px;}
.keuzes{display:flex;flex-wrap:wrap;gap:8px;}
.keuze{position:relative;display:inline-flex;}
.keuze input{position:absolute;opacity:0;width:1px;height:1px;}
.keuze span{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--rb);
  border:2px solid var(--lijn-sterk);background:var(--wit);cursor:pointer;line-height:1.25;font-weight:700;font-size:16px;}
.keuze span:hover{border-color:var(--merk);}
.keuze input:checked + span{background:var(--merk);border-color:var(--merk);color:var(--wit);box-shadow:inset 0 -4px 0 var(--accent);}
.keuze input:focus-visible + span{outline:3px solid var(--merk);outline-offset:3px;}
.formvelden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.veld{display:flex;flex-direction:column;gap:6px;min-width:0;}
.veld--breed{grid-column:1 / -1;}
.veld label{font-weight:700;font-size:15px;}
.vereist{color:var(--inkt);}
.veld input,.veld select,.veld textarea{font:inherit;font-size:16px;color:inherit;background:var(--wit);border:1.5px solid var(--lijn-sterk);
  border-radius:var(--rb);padding:0 14px;min-height:50px;width:100%;}
.veld textarea{padding:12px 14px;min-height:120px;resize:vertical;}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:3px solid var(--accent);outline-offset:0;border-color:var(--merk);}
.veld__hulp{font-size:var(--xs);color:var(--zacht);}
.uitkomst{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  padding:16px 18px;border-radius:var(--rk);background:var(--merk);color:var(--wit);}
.uitkomst div{flex:1 1 220px;min-width:0;display:grid;gap:2px;}
.uitkomst div strong{font-weight:700;font-size:15px;}
.uitkomst div span{font-size:var(--xs);color:var(--zacht-licht);}
.uitkomst output{font-family:var(--kop);font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:1;white-space:nowrap;color:var(--accent);}
.akkoord{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--zacht);}
.akkoord input{margin-top:2px;width:22px;height:22px;accent-color:var(--merk);flex:none;}
.akkoord a{text-underline-offset:4px;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form button[type=submit],.offerte button[type=submit]{width:100%;}
.form .note,.offerte .note{margin-top:0;}
.offerte__tussenkop{font-size:clamp(19px,1.7vw,22px);margin:30px 0 8px;}

/* stappenformulier */
.fstap{display:grid;gap:clamp(16px,2vw,22px);}
.offerte--stappen .fstap[hidden]{display:none;}
.fstap__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.fstap__teller{flex:1 1 auto;text-align:center;font-size:15px;font-weight:700;color:var(--zacht);}
.fstap__nav .knop{min-height:48px;padding:11px 20px;}
.fstap__balk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.fstap__balk span{height:8px;border-radius:3px;background:var(--grond);border:1px solid var(--lijn);}
.fstap__balk span.is-af{background:var(--merk);border-color:var(--merk);}
.fstap__balk span.is-hier{background:var(--accent);border-color:var(--accent);}

/* de prijscalculator van de motor (calc), voor het geval een pagina hem gebruikt */
.calc{background:var(--wit);border-radius:var(--rk);border:1px solid var(--lijn);padding:clamp(22px,3vw,36px);display:grid;gap:18px;}
.calc h3{font-size:var(--m);}
.calc__groep{display:grid;gap:8px;}
.calc__optie{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--lijn-sterk);border-radius:var(--rb);cursor:pointer;}
.calc__optie input{margin-top:3px;accent-color:var(--merk);}
.calc__optie.is-inbegrepen{opacity:.55;}
.calc__bedrag{font-weight:700;color:var(--merk);}
.calc__duur{display:block;font-size:var(--xs);color:var(--zacht);}
.calc__uitkomst{display:grid;gap:2px;padding:16px;border-radius:var(--rk);background:var(--merk);color:var(--wit);}
.calc__label{font-size:var(--xs);font-weight:700;}
.calc__totaal{font-family:var(--kop);font-weight:700;font-size:var(--xl);line-height:1;color:var(--accent);}

/* --- contactregels en kleine stukken --------------------------------------------------- */
.contactregels{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:16px;}
.contactregels a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;
  text-decoration-thickness:2px;text-decoration-color:var(--accent);text-underline-offset:6px;overflow-wrap:anywhere;}
.bedankt__kop{margin-top:clamp(48px,5vw,72px);}
.proza--lang{max-width:76ch;}
.proza--lang h2{margin:48px 0 14px;font-size:var(--l);}
.proza--lang h2:first-child{margin-top:8px;}

/* --- voet: diep marine, vier kolommen ---------------------------------------------------- */
.voet{background:var(--diep);color:var(--zacht-licht);padding:clamp(56px,6vw,84px) 0 28px;}
.voet__raster{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1.3fr;gap:clamp(24px,3vw,44px);}
.voet__kol{min-width:0;}
.voet__kop{display:flex;align-items:center;gap:10px;font-family:var(--tekst);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;}
.voet__kop::before{content:"";flex:none;width:12px;height:13px;
  background:linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px,var(--accent) 8px 12px);}
.voet__kol:first-child .voet__kop{font-family:var(--kop);font-weight:700;font-size:15px;letter-spacing:-.01em;
  text-transform:none;color:var(--wit);overflow-wrap:anywhere;}
.voet__kol:first-child .voet__kop::before{display:none;}
.voet li{min-height:36px;display:flex;align-items:center;font-size:16px;}
.voet a{text-decoration:none;overflow-wrap:break-word;color:var(--wit);}
.voet__kol:last-child a{overflow-wrap:anywhere;}
.voet a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;}
.voet__onder{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;
  margin-top:clamp(40px,4.6vw,56px);padding-top:16px;border-top:1px solid var(--lijn-licht);font-size:var(--xs);}
.voet__onder a{display:inline-flex;align-items:center;min-height:44px;color:var(--wit);text-decoration:underline;text-underline-offset:5px;}

/* --- smal --------------------------------------------------------------------------- */
@media (max-width:1380px){
  .kop__acties .tel{display:none;}
}
@media (max-width:1180px){
  .zekerheden{grid-template-columns:repeat(3,minmax(0,1fr));}
  .nav{display:none;}
}
@media (max-width:1100px){
  .raster--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .usp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;}
  .voet__raster{grid-template-columns:1fr 1fr;}
  .hero__in{grid-template-columns:minmax(0,1fr);}
  .hero__vak{max-width:560px;justify-items:start;}
}
@media (max-width:900px){
  .split,.split--tekst,.split--beeld,.cta__in,.rekenhulp,.faqblok,.stappen,.club-plek,.werkstappen{grid-template-columns:minmax(0,1fr);}
  .rekenhulp__uit{position:static;}
  .faqblok .kopblok{position:static;}
  .split--form > div:last-child{order:-1;}
  .raster--3,.zekerheden{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pakketten{gap:28px;padding-top:0;}
  .split .foto{max-width:560px;}
  .split--beeld > div:first-child{order:2;}
  .cta::after{height:30%;}
}
@media (max-width:720px){
  .kop__in{min-height:68px;gap:12px;}
  .kop__acties{display:none;}
  .menuknop{display:flex;flex:none;}
  .kop.is-open .mobielmenu{display:flex;}
  .merk{font-size:13px;white-space:normal;overflow-wrap:anywhere;}
  .merk::before{width:24px;height:24px;}
  .raster--2,.raster--3,.raster--4,.zekerheden,.formvelden,.rekenhulp .formvelden,.lidform__rij{grid-template-columns:minmax(0,1fr);}
  .voet__raster{grid-template-columns:1fr;}
  .hero{min-height:0;}
  .hero::before{width:74px;height:120px;right:16px;
    background:linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 31px,var(--accent) 31px 43px,transparent 43px 62px,var(--accent) 62px 74px);}
  .hero--kaal::before{height:96px;}
  .hero__in{padding-top:44px;padding-bottom:52px;gap:36px;}
  .hero h1,.hero--kaal h1{font-size:34px;padding-right:0;}
  .hero h1{padding-right:56px;}
  .hero--kaal h1{padding-right:64px;}
  h2{font-size:26px;}
  h3{font-size:20px;}
  .kopblok h2,.bedankt__kop{padding-left:46px;}
  .kopblok h2::before,.bedankt__kop::before{width:32px;height:32px;top:0;font-size:12px;}
  .hero__vinkjes{flex-direction:column;}
  .hero__vak .club{width:100%;}
  .club__paneel{padding:14px 16px 18px;min-height:0;}
  .club__kop{padding:14px 16px 12px;}
  .club__tab{font-size:14px;}
  .hero .knop,.cta .knop,.knoprij .knop{width:100%;}
  .fotoband img{aspect-ratio:16/10;}
  .usp{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;}
  .usp__item h3{font-size:16px;}
  .usp__item p{font-size:15px;}
  .tabel th,.tabel td{padding:10px 12px;font-size:15px;}
  .tabel-wrap .tabel:has(tr > :nth-child(4)){min-width:620px;}
  .voet__onder{flex-direction:column;align-items:flex-start;}
  .losse{flex-direction:column;align-items:flex-start;}
  .vraag summary{padding:12px 16px;}
  .vraag summary h3{font-size:16px;}
  .vraag__a{padding:0 16px 18px;}
  .foto--streep::after{width:46px;height:60px;right:14px;
    background:linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 18.5px,var(--accent) 18.5px 27.5px,transparent 27.5px 37px,var(--accent) 37px 46px);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .kaart--link,.voorbeeld img,.knop,.club__tab{transition:none;}
}