/* Drie kleuren: blauw, wit en een lichte blauwtint. Tekst is een diepere tint van hetzelfde blauw. */
:root{
  --blauw:#1F4FB5;
  --blauw-diep:#0F2A66;
  --tint:#E9EFFA;
  --wit:#FFFFFF;

  --tekst:var(--blauw-diep);
  --tekst-2:rgba(15,42,102,.72);
  --lijn:rgba(31,79,181,.16);
  --lijn-sterk:rgba(31,79,181,.28);
  --op-blauw:rgba(255,255,255,.86);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --gutter:clamp(20px,4vw,40px);
  --sectie:clamp(64px,9vw,120px);

  /* Kritisch gedempt: snel weg, zacht aankomen, geen doorschieten */
  --veer:cubic-bezier(.16,1,.3,1);
  --veer-snel:cubic-bezier(.2,.9,.3,1);
  --schaduw:0 1px 2px rgba(15,42,102,.06),0 10px 30px -18px rgba(15,42,102,.35);
  --schaduw-hoog:0 2px 4px rgba(15,42,102,.06),0 24px 48px -24px rgba(15,42,102,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.55}
img,svg{display:block;max-width:100%}
a{color:var(--blauw);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--blauw-diep)}
input,textarea,button,select{font-family:inherit}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px;border-radius:4px}
.sectie--blauw :focus-visible,.hero :focus-visible,.header :focus-visible,.footer :focus-visible,.cta :focus-visible{outline-color:var(--wit)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--wit);color:var(--blauw);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.sectie{padding:var(--sectie) 0}
.sectie--blauw{background:var(--blauw);color:var(--wit)}
.sectie--tint{background:var(--tint)}
.stack{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.kop-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,72px);align-items:center}
.grid-2--top{align-items:start}
.grid-2>*,.blokken>*,.kaarten>*,.reviews>*,.galerij>*{min-width:0}

/* Typografie: tracking en regelafstand per formaat */
.label{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blauw)}
.sectie--blauw .label{color:var(--op-blauw)}
.display{margin:0;overflow-wrap:break-word;font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;text-wrap:balance}
.h1{font-size:clamp(40px,11vw,96px);line-height:.9;letter-spacing:-.02em}
/* "VERSTOPT?" is ~7,6em breed: schaal mee met de kolom zodat het vraagteken erachter blijft */
.hero__tekst{container-type:inline-size}
.hero__tekst .h1{font-size:clamp(30px,12.6cqi,88px)}
.geen-breuk{white-space:nowrap}
.h1--sub{font-size:clamp(32px,6vw,84px);line-height:.92;letter-spacing:-.02em;max-width:20ch}
@media (max-width:480px){.h1--sub{font-size:clamp(24px,7.8vw,40px)}}
.h2{font-size:clamp(26px,4.4vw,56px)}
/* In een kolom schaalt de kop met de kolom mee, zodat lange woorden als VEELGESTELDE heel blijven */
.grid-2>.stack{container-type:inline-size}
.grid-2>.stack .h2{font-size:clamp(26px,min(4.4vw,8.4cqi),56px)}
.h3{font-size:clamp(24px,2.8vw,34px);letter-spacing:0}
.lead{margin:0;font-size:clamp(19px,2vw,25px);line-height:1.4;font-weight:500;max-width:36ch;text-wrap:pretty}
.tekst{margin:0;font-size:18px;line-height:1.6;max-width:60ch;color:var(--tekst-2);text-wrap:pretty}
.sectie--blauw .tekst{color:var(--op-blauw)}
.prose{display:flex;flex-direction:column;gap:18px;max-width:64ch}
.prose p{margin:0;font-size:18px;line-height:1.65;color:var(--tekst-2)}
.prose h3{margin:14px 0 0;font-family:var(--display);font-stretch:115%;font-weight:800;font-size:24px;line-height:1.1;color:var(--tekst)}
.prose ul{margin:0;padding-left:22px;font-size:18px;line-height:1.65;color:var(--tekst-2)}

/* Header: doorschijnend materiaal, inhoud schuift eronder door */
.header{position:sticky;top:0;z-index:40;background:rgba(31,79,181,.9);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);transition:box-shadow .3s var(--veer)}
.header.open{background:var(--blauw)}
.header.gescrold{box-shadow:0 10px 30px -16px rgba(15,42,102,.55)}
.header__in{max-width:1240px;margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;color:var(--wit);text-decoration:none}
.logo:hover{color:var(--wit)}
.logo__tekst{display:flex;flex-direction:column;font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.01em;font-size:clamp(16px,1.6vw,20px)}
.logo__tekst span+span{padding-left:1.1em}
.logo svg{width:26px;height:42px;flex:none;transition:transform .5s var(--veer)}
.logo:hover svg{transform:rotate(-12deg) translateY(-2px)}
.nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);font-size:15px;font-weight:600}
.nav>a:not(.knop){position:relative;color:var(--wit);text-decoration:none;padding:6px 0;white-space:nowrap}
.nav>a:not(.knop)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--wit);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--veer)}
.nav>a:not(.knop):hover::after,.nav>a[aria-current="page"]::after{transform:scaleX(1)}
.sociaal-mini{display:flex;gap:4px}
.sociaal-mini a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--wit);transition:background .2s,transform .1s}
.sociaal-mini a:hover{background:rgba(255,255,255,.14);color:var(--wit)}
.sociaal-mini a:active{transform:scale(.92)}
.sociaal-mini svg{width:19px;height:19px}
.menu-knop{display:none;background:none;border:0;color:var(--wit);font-weight:700;font-size:16px;min-height:44px;padding:8px 4px;cursor:pointer}
.mobiel-nav{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--veer)}
.mobiel-nav>div{overflow:hidden;display:flex;flex-direction:column;padding:0 var(--gutter);font-family:var(--display);font-stretch:115%;font-weight:700;font-size:22px;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .45s var(--veer)}
.mobiel-nav a{color:var(--wit);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.mobiel-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.mobiel-nav .sociaal-mini{padding:14px 0 20px;gap:10px}
.mobiel-nav .sociaal-mini a{border:0;width:44px;height:44px;background:rgba(255,255,255,.12)}
.header.open .mobiel-nav{grid-template-rows:1fr}
.header.open .mobiel-nav>div{opacity:1;transform:none}
@media (min-width:1081px){.mobiel-nav{display:none}}
@media (max-width:1080px){.nav{display:none}.menu-knop{display:block}}

/* Knoppen: reageren op het indrukken, niet pas op loslaten */
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;border-radius:10px;font-weight:700;white-space:nowrap;border:0;cursor:pointer;transition:transform .12s var(--veer-snel),background .2s,box-shadow .25s,color .2s;-webkit-tap-highlight-color:transparent}
.knop:hover{box-shadow:var(--schaduw)}
.knop:active{transform:scale(.97);box-shadow:none;transition-duration:.08s}
.knop svg{width:20px;height:20px;flex:none}
.knop--groot{padding:18px 26px;font-size:19px;min-height:62px}
.knop--klein{padding:11px 16px;font-size:16px}
.knop--wit{background:var(--wit);color:var(--blauw)}
.knop--wit:hover{color:var(--blauw-diep)}
.knop--rand-wit{background:transparent;color:var(--wit);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.knop--rand-wit:hover{background:rgba(255,255,255,.12);color:var(--wit);box-shadow:inset 0 0 0 2px var(--wit)}
.knop--blauw{background:var(--blauw);color:var(--wit)}
.knop--blauw:hover{background:var(--blauw-diep);color:var(--wit)}
.knop--rand{background:transparent;color:var(--blauw);box-shadow:inset 0 0 0 2px var(--blauw)}
.knop--rand:hover{background:var(--blauw);color:var(--wit)}
.knop--tint{background:var(--tint);color:var(--blauw)}
.knop--tint:hover{color:var(--blauw-diep)}

/* Hero */
.hero{background:var(--blauw);color:var(--wit);padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,104px);overflow:hidden}
.hero__tekst{display:flex;flex-direction:column;gap:26px;min-width:0}
.hero__noot{margin:0;font-size:15px;line-height:1.5;color:var(--op-blauw);max-width:44ch}
.kruimel{display:flex;gap:8px;font-size:15px;font-weight:600;flex-wrap:wrap;color:var(--op-blauw)}
.kruimel a{color:var(--op-blauw)}
.kruimel a:hover{color:var(--wit)}
.kruimel b{color:var(--wit)}

/* Foto's */
.foto{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--tint);isolation:isolate}
.foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .9s var(--veer)}
.foto figcaption{position:absolute;left:14px;bottom:14px;right:14px;width:fit-content;max-width:calc(100% - 28px);padding:8px 12px;border-radius:8px;background:rgba(15,42,102,.62);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);color:var(--wit);font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.35}
.hero .foto{height:clamp(300px,42vw,540px);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.foto--groot{height:clamp(340px,40vw,560px)}
.foto--kaart{height:320px}
button.foto{all:unset;display:block;position:relative;border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--tint);isolation:isolate}
button.foto:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
button.foto:hover img{transform:scale(1.04)}
button.foto:active img{transform:scale(1.01);transition-duration:.12s}

.galerij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){.galerij{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:380px){.galerij{grid-template-columns:1fr}}
.galerij figure{margin:0;display:flex;flex-direction:column;gap:10px}
.galerij button.foto{aspect-ratio:4/5}
.galerij figcaption{font-size:15px;color:var(--tekst-2);line-height:1.4}

/* Lightbox: groeit uit de foto waarop geklikt is en keert daarheen terug */
.lightbox{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:transparent;display:none;align-items:center;justify-content:center}
.lightbox[open]{display:flex}
.lightbox::backdrop{background:rgba(15,42,102,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--veer)}
.lightbox.zichtbaar::backdrop{opacity:1}
.lightbox__inhoud{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:min(92vw,1100px);padding:20px}
.lightbox img{max-width:100%;max-height:78dvh;width:auto;height:auto;border-radius:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform-origin:top left}
.lightbox p{margin:0;color:var(--wit);font-weight:600;text-align:center;opacity:0;transition:opacity .3s}
.lightbox.zichtbaar p{opacity:1}
.lightbox__sluit{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:var(--wit);font-size:26px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,transform .1s}
.lightbox__sluit:hover{background:rgba(255,255,255,.28)}
.lightbox__sluit:active{transform:scale(.92)}

/* Kaarten */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.kaart{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:28px 26px 24px;text-decoration:none;color:var(--tekst);transition:transform .45s var(--veer),box-shadow .45s var(--veer),border-color .3s}
a.kaart:hover{color:var(--tekst);transform:translateY(-4px);box-shadow:var(--schaduw-hoog);border-color:var(--lijn-sterk)}
a.kaart:active{transform:translateY(-1px) scale(.99);transition-duration:.1s}
.kaart__nr{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:15px;color:var(--blauw)}
.kaart__titel{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:26px;line-height:1.05;overflow-wrap:break-word}
.kaart__tekst{font-size:16px;line-height:1.55;color:var(--tekst-2);flex:1}
.kaart__meer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--lijn);padding-top:16px;font-weight:700;font-size:15px;color:var(--blauw)}
.kaart__meer span{transition:transform .4s var(--veer)}
a.kaart:hover .kaart__meer span{transform:translateX(5px)}
.kaart--blauw{background:var(--blauw);border-color:var(--blauw);color:var(--wit);justify-content:space-between}
.kaart--blauw .kaart__tekst{color:var(--op-blauw)}
.kaart--blauw .kaart__titel{color:var(--wit)}
.sectie--tint .kaart:not(.kaart--blauw){border-color:transparent}

/* Genummerde punten */
.punten{display:flex;flex-direction:column;border-top:1px solid var(--lijn-sterk)}
.punt{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--lijn-sterk);font-size:17px;line-height:1.5}
.punt b:first-child{font-family:var(--display);font-stretch:125%;font-weight:800;color:var(--blauw)}
.punt span{color:var(--tekst-2)}
.punt strong{color:var(--tekst)}

/* Stappen */
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));position:relative}
.stappen::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blauw);border-radius:3px;transform:scaleX(var(--voortgang,1));transform-origin:left;transition:transform 1.4s var(--veer)}
.stappen li{display:flex;flex-direction:column;gap:10px;padding:24px 20px 22px 0}
.stappen b{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:44px;line-height:1;color:var(--blauw)}
.stappen strong{font-size:19px}
.stappen span{font-size:16px;line-height:1.5;color:var(--tekst-2)}

/* Blokken */
.blokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.blok{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px}
.sectie--tint .blok{border-color:transparent}
.blok--blauw{background:var(--blauw);color:var(--wit);border-color:var(--blauw)!important}
.blok--blauw a{color:var(--wit)}
.blok__klein{font-size:15px;color:var(--tekst-2)}
.blok--blauw .blok__klein{color:var(--op-blauw)}
.blok__groot{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:26px;line-height:1.1;overflow-wrap:break-word}
.blok__getal{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(34px,4vw,48px);line-height:1;color:var(--blauw);font-variant-numeric:tabular-nums}
.blok p{margin:0;font-size:16px;line-height:1.55;color:var(--tekst-2)}
.blok--blauw p{color:var(--op-blauw)}

/* Reviews */
.score{display:flex;align-items:center;gap:14px}
.score__getal{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:48px;line-height:1;color:var(--blauw)}
.score__meta{display:flex;flex-direction:column;font-size:15px;line-height:1.35;color:var(--tekst-2)}
.sterren{color:var(--blauw);letter-spacing:2px}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.review{margin:0;background:var(--tint);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:18px}
.sectie--tint .review{background:var(--wit)}
.review blockquote{margin:0;font-size:19px;line-height:1.5;flex:1;text-wrap:pretty}
.review figcaption{font-size:15px;color:var(--tekst-2)}
.review figcaption strong{color:var(--tekst)}
.bron{margin:0;font-size:14px;color:var(--tekst-2)}

/* Chips */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.chips li{border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:11px 19px;font-weight:600;font-size:17px}
.chips li.hoofd{background:var(--wit);color:var(--blauw);border-color:var(--wit)}
.chips--licht li{border-color:var(--lijn-sterk);background:var(--wit);color:var(--tekst)}

/* Sociale media */
.sociaal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.sociaal a{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;padding:24px;border-radius:14px;background:var(--wit);text-decoration:none;color:var(--tekst);transition:transform .45s var(--veer),box-shadow .45s var(--veer)}
.sociaal a:hover{color:var(--tekst);transform:translateY(-4px);box-shadow:var(--schaduw-hoog)}
.sociaal a:active{transform:scale(.98);transition-duration:.1s}
.sociaal__icoon{width:56px;height:56px;border-radius:16px;background:var(--blauw);color:var(--wit);display:flex;align-items:center;justify-content:center}
.sociaal__icoon svg{width:28px;height:28px}
.sociaal strong{display:block;font-family:var(--display);font-stretch:115%;font-weight:800;font-size:22px;line-height:1.1}
.sociaal small{display:block;margin-top:4px;font-size:15px;color:var(--tekst-2);line-height:1.4}
.sociaal i{font-style:normal;font-weight:700;font-size:22px;color:var(--blauw);transition:transform .4s var(--veer)}
.sociaal a:hover i{transform:translateX(5px)}

/* FAQ: vloeiend open en dicht waar de browser het kan */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--lijn-sterk);interpolate-size:allow-keywords}
.faq details{border-bottom:1px solid var(--lijn-sterk)}
.faq details::details-content{height:0;overflow:hidden;transition:height .45s var(--veer),content-visibility .45s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;min-height:44px;font-weight:700;font-size:clamp(18px,1.8vw,21px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--blauw);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;line-height:1;transition:transform .45s var(--veer),background .2s,color .2s}
.faq summary:hover::after{background:var(--blauw);color:var(--wit)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--blauw);color:var(--wit)}
.faq p{margin:0;padding:0 56px 24px 0;font-size:17px;line-height:1.6;color:var(--tekst-2);max-width:64ch}

.vinkjes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vinkjes li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:17px;line-height:1.45}
.vinkjes li::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--blauw);color:var(--wit);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px}

/* Dienstpagina */
.lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--lijn-sterk)}
.lijst li{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--lijn-sterk);font-size:18px;font-weight:600}
.lijst li::before{content:"→";color:var(--blauw)}
.paneel{background:var(--tint);border-radius:14px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:22px}
.paneel__voet{border-top:1px solid var(--lijn-sterk);padding-top:22px;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.45}
.andere{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.andere a{display:flex;justify-content:space-between;align-items:center;gap:16px;border-radius:14px;padding:20px 22px;background:var(--wit);text-decoration:none;color:var(--tekst);transition:transform .45s var(--veer),box-shadow .45s var(--veer)}
.andere a:hover{color:var(--tekst);transform:translateY(-3px);box-shadow:var(--schaduw-hoog)}
.andere small{display:block;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:13px;color:var(--blauw)}
.andere strong{font-size:19px}
.andere i{font-style:normal;color:var(--blauw);font-weight:700;font-size:20px}

/* Contact */
.contactlijst{display:flex;flex-direction:column;border-top:1px solid var(--lijn-sterk)}
.contactlijst>a,.contactlijst>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--lijn-sterk);text-decoration:none;color:var(--tekst)}
.contactlijst>a:hover{color:var(--tekst)}
.contactlijst>a i{transition:transform .4s var(--veer)}
.contactlijst>a:hover i{transform:translateX(5px)}
.contactlijst small{display:block;font-size:14px;color:var(--tekst-2)}
.contactlijst strong{font-weight:700;font-size:20px;overflow-wrap:anywhere}
.contactlijst .groot{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:clamp(24px,2.6vw,32px);color:var(--blauw)}
.contactlijst i{font-style:normal;font-size:22px;color:var(--blauw)}
.formulier{background:var(--wit);border-radius:14px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;box-shadow:var(--schaduw)}
.formulier h3{margin:0;font-family:var(--display);font-stretch:115%;font-weight:800;font-size:24px}
.formulier label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:15px}
.formulier input,.formulier textarea,.formulier select{font-size:17px;padding:14px 16px;border:1.5px solid var(--lijn-sterk);border-radius:10px;background:var(--wit);color:var(--tekst);transition:border-color .2s,box-shadow .2s}
.formulier input:focus,.formulier textarea:focus,.formulier select:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 4px rgba(31,79,181,.15)}
.formulier [aria-invalid="true"]{border-color:var(--blauw-diep);box-shadow:0 0 0 4px rgba(15,42,102,.14)}
.formulier textarea{resize:vertical;min-height:120px}
.formulier .fout{color:var(--blauw-diep);font-size:14px;font-weight:700;min-height:1em}
.formulier .klein{font-size:13px;color:var(--tekst-2);margin:0}
.bedankt{background:var(--wit);border-radius:14px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;box-shadow:var(--schaduw)}
.kaartje{border-radius:14px;overflow:hidden;background:var(--tint)}
.kaartje iframe{display:block;width:100%;height:340px;border:0}

/* CTA */
.cta{background:var(--blauw);color:var(--wit);border-radius:18px;padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;position:relative;overflow:hidden}
.cta .display{font-size:clamp(26px,3.4vw,42px);position:relative}
.cta .knoppen{position:relative}
.cta__logo{position:absolute;right:30px;bottom:-60px;width:150px;opacity:.12;transform:rotate(8deg);color:var(--wit)}

/* Footer */
.footer{background:var(--blauw-diep);color:var(--wit);padding:clamp(40px,6vw,72px) 0 32px}
.footer a{color:var(--wit);text-decoration:none;opacity:.78;transition:opacity .2s}
.footer a:hover{opacity:1;color:var(--wit)}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px}
.footer__merk{display:flex;flex-direction:column;gap:18px}
.footer__merk .logo__tekst{font-size:28px}
.footer__merk .sociaal-mini{gap:8px}
.footer__merk .sociaal-mini a{opacity:1;background:rgba(255,255,255,.1);width:42px;height:42px}
.footer__merk .sociaal-mini a:hover{background:rgba(255,255,255,.2)}
.footer__kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:24px;flex:1 1 280px;min-width:0;max-width:760px;font-size:15px;line-height:1.8}
.footer__kolommen div{display:flex;flex-direction:column}
.footer__kolommen b{margin-bottom:6px}
.footer__kolommen span{opacity:.78}
.footer__kolommen a,.footer__kolommen span{overflow-wrap:anywhere}
.footer__onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;font-size:14px;opacity:.75}

/* Belbalk mobiel: licht materiaal */
.belbalk{display:none}
@media (max-width:1080px){
  .belbalk{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:50;grid-template-columns:1.4fr 1fr;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:0 -1px 0 var(--lijn),0 -10px 30px -18px rgba(15,42,102,.4);transform:translateY(110%);transition:transform .5s var(--veer)}
  .belbalk.zichtbaar{transform:none}
  .belbalk .knop{min-height:54px;font-size:18px}
  body{padding-bottom:78px}
}
@media (max-width:420px){.knop{white-space:normal;text-align:center}}

/* Beeld van Facebook en Instagram: pas laden na toestemming */
.extern-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.extern{border-radius:14px;overflow:hidden;background:var(--wit);min-height:420px;display:flex}
.extern__leeg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 24px;text-align:center}
.extern__leeg strong{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:22px}
.extern__leeg p{margin:0;max-width:34ch;font-size:15px;line-height:1.5;color:var(--tekst-2)}
.extern__leeg a{font-size:15px;font-weight:700}
.extern iframe{display:block;width:100%;border:0;background:var(--wit);animation:opkomen .6s var(--veer) both}
.extern[data-extern="facebook"] iframe{height:620px}
.extern[data-extern="instagram"] iframe{height:620px}

.extern--berichten{display:block;min-height:320px;background:transparent}
.extern--berichten .extern__leeg{background:var(--wit);border-radius:14px;min-height:320px}
.berichten{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.berichten::-webkit-scrollbar{display:none}
.bericht{flex:0 0 clamp(260px,82vw,400px);min-width:0;scroll-snap-align:start;display:flex;align-items:flex-start}
.carrousel__pijlen{display:flex;gap:10px}
.carrousel__pijlen[hidden]{display:none}
.carrousel__pijl{width:48px;height:48px;border-radius:50%;border:0;background:var(--blauw);color:var(--wit);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s var(--veer-snel),background .2s,opacity .25s;-webkit-tap-highlight-color:transparent}
.carrousel__pijl svg{width:22px;height:22px}
.carrousel__pijl:hover{background:var(--blauw-diep)}
.carrousel__pijl:active{transform:scale(.92);transition-duration:.08s}
.carrousel__pijl:disabled{opacity:.3;cursor:default;transform:none;background:var(--blauw)}
.bericht__kader{width:100%;overflow:hidden;border-radius:12px;background:var(--wit)}
.bericht__kader iframe{display:block;border:0;width:500px;transform-origin:top left;animation:opkomen .6s var(--veer) both}

/* Cookiemelding: licht materiaal, komt van onderen en gaat daar weer heen */
.cookiemelding{position:fixed;z-index:70;left:16px;bottom:16px;width:min(420px,calc(100vw - 32px));padding:22px;border-radius:16px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:0 0 0 1px var(--lijn),0 24px 60px -20px rgba(15,42,102,.45);display:flex;flex-direction:column;gap:12px;transform:translateY(calc(100% + 40px));opacity:0;transition:transform .55s var(--veer),opacity .3s}
.cookiemelding.zichtbaar{transform:none;opacity:1}
.cookiemelding[hidden]{display:none}
.cookiemelding strong{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:20px;line-height:1.15}
.cookiemelding p{margin:0;font-size:15px;line-height:1.5;color:var(--tekst-2)}
.cookiemelding__knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.cookiemelding__knoppen .knop{min-height:48px;white-space:normal}
@media (max-width:1080px){.cookiemelding{bottom:calc(88px + env(safe-area-inset-bottom))}}
.linkknop{all:unset;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}
.linkknop:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}
.footer .linkknop{opacity:.78;text-decoration:none}
.footer .linkknop:hover{opacity:1;text-decoration:underline}
@media (prefers-reduced-transparency:reduce){.cookiemelding{background:var(--wit);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Binnenkomen bij scrollen (alleen als JavaScript draait) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--veer),transform .9s var(--veer);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}
.js .stappen{--voortgang:0}
.js .stappen.in{--voortgang:1}
.js .hero .intro{opacity:0;transform:translateY(20px);animation:opkomen .9s var(--veer) forwards;animation-delay:calc(var(--i,0) * 80ms + 60ms)}
.js .hero .foto{animation:materie 1.1s var(--veer) both;animation-delay:.15s}
@keyframes opkomen{to{opacity:1;transform:none}}
@keyframes materie{from{opacity:0;transform:scale(1.04);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .hero .intro{opacity:1;transform:none}
  .js .reveal{transform:none;transition:opacity .3s ease!important}
  .knop:active,a.kaart:hover,.sociaal a:hover,.andere a:hover{transform:none}
  .foto img,button.foto:hover img{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .header{background:var(--blauw);backdrop-filter:none;-webkit-backdrop-filter:none}
  .belbalk{background:var(--wit);backdrop-filter:none;-webkit-backdrop-filter:none}
  .foto figcaption{background:var(--blauw-diep);backdrop-filter:none}
}