/* HipFix. Fonts self-hosted. */
@font-face{font-family:'Bricolage Grotesque';src:url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'),url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Lexend';src:url(fonts/lexend-latin-wght-normal.woff2) format('woff2-variations'),url(fonts/lexend-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* Colours: the text colours on coloured areas were chosen for contrast;
   never swap them for white or black. */
:root{
  --beige:#e8ded0;
  --inkt:#2e1a28;
  --zacht:#57454d;
  --diep:#594154;
  --op-diep:#f8f3ea;
  --op-diep-zacht:#dbd3cf;
  --groen:#526b4e;
  --groen-hover:#4a6046;
  --op-groen:#f8f3ea;
  --vlak:#f0e8dc;
  --vlak-hover:#d8d1c6;
  --op-vlak:#120a10;
  --vlak-rand:rgba(46,26,40,.22);
  --rand-hover:#ddd1c6;
  --uit:cubic-bezier(.16,1,.3,1);
  --kop:'Bricolage Grotesque',system-ui,sans-serif;
  --lijf:'Lexend',system-ui,sans-serif;
  --kolom:35em;
  --rand:clamp(16px,4vw,56px);
  --kophoogte:84px;
}
*{box-sizing:border-box}
h1,h2,h3{overflow-wrap:break-word}
.wegwijzer strong,.wegwijzer span,.lijst li,blockquote,figcaption{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
/* alleen als het scherm smal is ten opzichte van de letter: 318px bij 16px, 478px bij 24px */
@media (max-width:19.9em){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}}
/* ruimte onder de vaste kop (en de belbalk op de telefoon), meeschalend met de letter; geldt ook voor Tab-focus */
html{scroll-padding-top:calc(90px + 1.5rem)}
@media (max-width:40em){html{scroll-padding-top:calc(76px + 3.5rem)}}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--beige);color:var(--inkt);font:400 1.1875rem/1.7 var(--lijf)}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--diep);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--inkt)}
:focus-visible{outline:3px solid var(--inkt);outline-offset:2px;box-shadow:0 0 0 2px var(--op-diep);border-radius:4px}
h1,h2,h3{font-family:var(--kop);color:var(--inkt);line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-0.015em}
h2{font-size:clamp(min(2rem,8.6vw),4vw,3.25rem);font-weight:800}
h3{font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:0}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:77.5rem;margin:0 auto;padding:0 var(--rand)}
.ico{width:20px;height:20px;flex:none}

/* kop */
.kop{background:var(--beige);position:sticky;top:0;z-index:10;box-shadow:0 10px 24px -22px rgba(46,26,40,.55)}
.kop .wrap{max-width:90rem;display:flex;align-items:center;gap:16px;min-height:var(--kophoogte)}
.logo{flex-shrink:0;text-decoration:none;color:var(--inkt);font:800 1.75rem/1 var(--kop);letter-spacing:-0.02em}
.menu{display:flex;gap:18px;margin-left:auto;margin-right:6px;font-size:1.125rem}
.menu a{color:var(--inkt);text-decoration:none;font-weight:500;padding:6px 0;border-bottom:3px solid transparent;white-space:nowrap}
.menu a:hover{border-bottom-color:var(--groen)}
.taal{font-size:1.125rem;color:var(--diep);font-weight:500}
.bel{display:flex;gap:8px}
.bel a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:1.125rem;padding:11px 14px;border-radius:12px;white-space:nowrap}
.bel-tel{background:var(--groen);color:var(--op-groen)}
.bel-tel:hover{background:var(--groen-hover);color:var(--op-groen)}
.bel-wa{color:var(--diep);box-shadow:inset 0 0 0 2px var(--diep)}
.bel-wa:hover{background:var(--rand-hover);color:var(--diep)}
.mobielmenu{display:none}
.mobielmenu:not([open]) ul{display:none}

/* opening: de boulevard vult het eerste scherm, het paneel staat er helemaal in */
.opening{position:relative;display:grid;align-items:end;min-height:calc(100vh - var(--kophoogte) - 2.3rem);min-height:calc(100svh - var(--kophoogte) - 2.3rem)}
.opening > figure{position:absolute;inset:0;overflow:clip}
.opening > figure img{width:100%;height:100%;object-fit:cover;object-position:62% 52%}
.fotonaam{position:absolute;right:var(--rand);top:18px;font-size:1.125rem;color:var(--op-diep);background:rgba(46,26,40,.8);padding:4px 12px;border-radius:8px}
.opening .wrap{position:relative;width:100%;padding-block:clamp(24px,4vh,48px)}
.paneel{background:var(--beige);max-width:39rem;padding:clamp(26px,3vw,40px);border-radius:20px;box-shadow:0 26px 50px -30px rgba(46,26,40,.7)}
.paneel h1{color:var(--diep);font-size:clamp(2.5rem,min(5.4vw,8.4svh),4.5rem);font-weight:800;letter-spacing:-0.025em}
.paneel .onder{font-size:clamp(1.25rem,1.7vw,1.375rem);margin:14px 0 22px}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
.knop{display:inline-block;background:var(--groen);color:var(--op-groen);text-decoration:none;font-weight:600;font-size:1.1875rem;padding:15px 22px;border-radius:12px}
.knop:hover{background:var(--groen-hover);color:var(--op-groen)}
.knop.rand{background:transparent;color:var(--diep);box-shadow:inset 0 0 0 2px var(--diep)}
.knop.rand:focus-visible{box-shadow:inset 0 0 0 2px var(--diep),0 0 0 2px var(--op-diep)}
.knop.rand:hover{background:var(--rand-hover);color:var(--diep)}
.bewijs{display:flex;flex-wrap:wrap;gap:4px 22px;margin:20px 0 0;font-size:1.125rem;color:var(--zacht)}
.bewijs b{color:var(--inkt)}
.bewijs .ster{color:var(--diep)}

/* wegwijzer */
.wegwijzer{padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px)}
.wegwijzer h2{font-size:clamp(1.75rem,3vw,2.375rem);margin-bottom:24px}
.wegwijzer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wegwijzer a{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--vlak-rand);border-radius:18px;padding:22px 24px;text-decoration:none;color:var(--op-vlak);height:100%;transition:background .25s var(--uit),transform .25s var(--uit),box-shadow .25s var(--uit)}
.wegwijzer li:hover > a{background:var(--vlak-hover);transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--vlak-rand),0 14px 22px -16px rgba(46,26,40,.55)}
.wegwijzer strong{display:block;font:700 1.5rem/1.2 var(--kop);color:var(--op-vlak)}
.wegwijzer span{font-size:1.125rem}
.wegwijzer i{flex:0 0 44px;height:44px;border-radius:50%;background:var(--diep);color:var(--op-diep);display:grid;place-items:center;font-style:normal;font-size:1.25rem;transition:transform .25s var(--uit)}
.wegwijzer li:hover > a i{transform:translateX(3px)}

/* lucas */
.lucas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,120px)}
.lucas figure img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:40% 30%;border-radius:0 24px 24px 0}
.lucas .tekst{padding-right:var(--rand);max-width:calc(var(--kolom) + var(--rand))}
.intro{font-size:1.375rem;line-height:1.6}
.lucas h2{margin-bottom:24px}

/* ervaringen: vier recensies, allemaal even groot */
.ervaringen{padding:clamp(56px,7vw,104px) 0}
.ervaringen .rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:36px}
.ervaringen blockquote{margin:0;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--vlak-rand);border-radius:20px;padding:30px 32px 26px;position:relative;color:var(--op-vlak);display:flex;flex-direction:column}
.ervaringen blockquote::before{content:"“";position:absolute;top:-4px;left:26px;font:800 5.5rem/1 var(--kop);color:var(--diep)}
.ervaringen blockquote p{margin:34px 0 16px;font-size:1.25rem;line-height:1.55;flex:1}
.ervaringen footer{font-size:1.125rem;font-weight:600}
.kopregel{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.score{font-size:1.125rem;margin:0}
.score b{font:800 2.125rem/1 var(--kop);color:var(--diep);margin-right:6px}
.naar-google{display:flex;flex-wrap:wrap;gap:8px 32px;margin:28px 0 0}
.naar-google a{font-weight:500}

/* nazorg: een licht vlak over de hele breedte */
.nazorg{background:var(--vlak);color:var(--op-vlak);padding:clamp(64px,8vw,120px) 0}
.nazorg h2,.nazorg h3{color:var(--op-vlak)}
.twee{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,88px);align-items:start}
.tekst{max-width:var(--kolom)}
.tekst h2{margin-bottom:24px}
.plekken{display:grid;gap:14px;margin:32px 0}
.plek{background:var(--beige);box-shadow:inset 0 0 0 1px var(--vlak-rand);border-radius:16px;padding:22px 24px}
.plek h3{margin-bottom:6px}
.plek p{margin:0;font-size:1.125rem}
.nazorg .fotos{display:grid;gap:18px;position:sticky;top:120px}
.nazorg figure img{border-radius:20px;aspect-ratio:4/3.4;object-fit:cover;width:100%}
.nazorg figcaption{font-size:1.125rem;margin-top:10px}

/* gewone blokken */
.blok{padding:clamp(64px,8vw,120px) 0}
.vergoeding .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,88px);align-items:start}
.vergoeding h2{color:var(--diep)}
.lijst{list-style:none;padding:0;margin:24px 0}
.lijst li{display:flex;gap:14px;align-items:baseline;padding:9px 0;font-weight:500}
.lijst li::before{content:"";flex:0 0 11px;height:11px;background:var(--diep);transform:rotate(45deg) translateY(-2px);border-radius:2px}
.risico{background:var(--diep);color:var(--op-diep);border-radius:22px;padding:clamp(24px,3vw,40px)}
.risico h3{font-size:1.875rem;font-weight:800;color:var(--op-diep)}
.risico a{color:var(--op-diep)}
.risico table{width:100%;border-collapse:collapse;margin:20px 0;table-layout:fixed}
.risico th,.risico small{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.risico th,.risico td{text-align:left;padding:14px 0;border-bottom:1px solid rgba(248,243,234,.24);vertical-align:top}
.risico th{font-weight:600;padding-right:16px}
.risico td.kans{width:36%;font:700 1.3125rem/1.3 var(--kop);text-align:right}
.risico small{display:block;font-size:1.125rem;color:var(--op-diep-zacht);font-weight:400}

/* strook */
.denia{padding:clamp(64px,8vw,120px) 0 clamp(48px,6vw,80px);overflow:hidden}
.strook{margin-top:36px}
.strook ul{list-style:none;margin:0;padding:0 max(var(--rand),calc((100vw - 77.5rem)/2 + var(--rand))) 12px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 max(var(--rand),calc((100vw - 77.5rem)/2 + var(--rand)));scrollbar-width:thin;scrollbar-color:var(--diep) transparent}
.strook ul:focus-visible{outline-offset:-4px}
.strook li{flex:0 0 min(82vw,520px);scroll-snap-align:start}
.strook img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.strook p{font-size:1.125rem;color:var(--zacht);margin:10px 0 0}
.bediening{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bediening button{height:56px;border:0;background:var(--diep);color:var(--op-diep);font:600 1.125rem/1 var(--lijf);cursor:pointer;border-radius:999px}
.bediening .pijl{width:56px;font-size:1.375rem}
.bediening .pauze{display:inline-flex;align-items:center;gap:10px;padding:0 20px}
.bediening button:hover{background:var(--inkt)}
.pauze .ico{display:inline-block;width:14px;height:16px;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
.pauze[data-staat=gepauzeerd] .ico{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* contact */
.contact{background:var(--groen);color:var(--op-groen);padding:clamp(64px,8vw,112px) 0}
.contact h2{color:var(--op-groen);max-width:16ch}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.contact a{color:var(--op-groen)}
.telefoon{display:inline-block;font:800 clamp(2.375rem,5.4vw,4rem)/1.05 var(--kop);text-decoration:none;margin:4px 0 18px;letter-spacing:-0.02em}
.contact .knoppen{margin:6px 0 24px}
.contact .knop{background:var(--op-groen);color:var(--groen);display:inline-flex;align-items:center;gap:10px}
.contact .knop:hover{background:var(--beige);color:var(--groen-hover)}
.contact .knop.rand{background:transparent;color:var(--op-groen);box-shadow:inset 0 0 0 2px var(--op-groen)}
.contact .knop.rand:hover{background:var(--groen-hover);color:var(--op-groen)}
.contact :focus-visible{outline-color:var(--op-groen);box-shadow:none}

/* voet */
.voet{background:var(--inkt);color:var(--op-diep-zacht);padding:56px 0 72px;font-size:1.125rem}
.voet .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.voet h3{color:var(--op-diep);font-size:1.25rem;margin-bottom:10px}
.voet a{color:var(--op-diep)}
.voet ul{list-style:none;padding:0;margin:0;line-height:2.1}
.voet .logo{color:var(--op-diep)}
.voet :focus-visible{outline-color:var(--op-diep);box-shadow:none}

@keyframes op{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes scherp{from{opacity:.3;transform:scale(1.03)}to{opacity:1;transform:none}}
.paneel{animation:op 1s var(--uit) .2s both}
.opening > figure img{animation:scherp 1.8s var(--uit) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.wegwijzer li:hover > a{transform:none}.wegwijzer li:hover > a i{transform:none}}

@media (max-width:100em){
  .menu,.taal{display:none}
  .mobielmenu{display:block;margin-left:auto}
  .mobielmenu summary{list-style:none;cursor:pointer;font-weight:600;font-size:1.125rem;padding:10px 16px;box-shadow:inset 0 0 0 2px var(--diep);color:var(--diep);border-radius:12px}
  .mobielmenu summary::-webkit-details-marker{display:none}
  .mobielmenu[open] ul{position:absolute;z-index:2;max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem);overflow-y:auto;left:0;right:0;top:100%;background:var(--beige);list-style:none;margin:0;padding:8px var(--rand) 20px;box-shadow:0 18px 26px -18px rgba(46,26,40,.5)}
  .mobielmenu li a{display:block;padding:12px 0;font-size:1.25rem;color:var(--inkt);border-bottom:1px solid var(--vlak-rand);text-decoration:none}
}
@media (max-width:62em){
  .wegwijzer ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:53.75em){
  .lucas,.twee,.vergoeding .wrap,.contact .wrap{grid-template-columns:minmax(0,1fr)}
  .nazorg .fotos{position:static}
  .voet .wrap{grid-template-columns:minmax(0,1fr)}
  .ervaringen .rij{grid-template-columns:minmax(0,1fr)}
  /* Lucas: de foto naast de kop, niet als los blok na de onderwerpen */
  .lucas{grid-template-columns:minmax(0,1fr) clamp(8.5rem,34vw,15rem);gap:0 18px;padding:clamp(24px,5vw,48px) var(--rand) clamp(56px,8vw,96px);align-items:start}
  .lucas .tekst{display:contents}
  .lucas figure{grid-column:2;grid-row:1}
  .lucas figure img{border-radius:18px;aspect-ratio:4/5;object-position:46% 30%}
  .lucas h2{grid-column:1;grid-row:1;align-self:center;margin:0}
  .lucas .tekst > p{grid-column:1/-1;max-width:var(--kolom)}
  .lucas .intro{margin-top:24px}
}
@media (max-width:40em){
  :root{--kophoogte:70px}
  .mobielmenu[open] ul{top:calc(100% + 24px + 2.15rem);max-height:calc(100vh - 76px - 24px - 2.02rem);max-height:calc(100dvh - 76px - 24px - 2.02rem)}
  .kop .wrap{gap:10px}
  .logo{font-size:1.5rem}
  .kop .bel{position:absolute;left:0;right:0;top:100%;gap:0}
  .kop .bel a{flex:1 1 50%;justify-content:center;border-radius:0;padding:12px 10px;font-size:1.1875rem}
  .kop .bel-wa{background:var(--groen-hover);color:var(--op-groen);box-shadow:none}
  .kop .bel-wa:hover{background:var(--inkt);color:var(--op-groen)}
  .kop .bel .lang{display:none}
  /* even hoog als de belbalk (12px boven en onder plus een regel), ook bij een grotere browserletter */
  .kop{margin-bottom:calc(24px + 2.02rem)}
  /* telefoon: foto boven, paneel eronder; de foto krimpt zodat kop en knoppen op het eerste scherm passen */
  /* de regel met de sterren mag net onder de vouw vallen (+4.5rem): dan krijgt de foto die ruimte */
  .opening{display:flex;flex-direction:column;align-items:stretch;min-height:calc(100vh - 94px - 2.02rem - 2.3rem + 4.5rem);min-height:calc(100svh - 94px - 2.02rem - 2.3rem + 4.5rem)}
  .opening > figure{position:relative;inset:auto;flex:1 1 auto;min-height:100px;max-height:52svh}
  .opening > figure img{position:absolute;inset:0}
  .opening .wrap{padding-block:16px 24px}
  .paneel{padding:0;background:none;box-shadow:none;border-radius:0;animation:none}
  .paneel h1{font-size:min(2.75rem,10.6vw)}
  .paneel .onder{font-size:1.1875rem;margin:10px 0 16px;line-height:1.55}
  .fotonaam{top:auto;bottom:10px;left:var(--rand);right:auto;padding:2px 10px}
  .fotonaam .lang{display:none}
  .knop{width:100%;text-align:center;padding:13px 18px}
  .contact .knop{justify-content:center}
  .wegwijzer ul{gap:10px}
  .wegwijzer a{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 14px;border-radius:14px}
  .wegwijzer a > span > span{display:none}
  .wegwijzer strong{font-size:1.1875rem}
  .wegwijzer i{flex:none;width:34px;height:34px;font-size:1.125rem}
  .nazorg figure img{aspect-ratio:3/2}
  /* risico's: onder elkaar in plaats van twee smalle kolommen met afbreekstreepjes */
  .risico tr,.risico th,.risico td{display:block}
  .risico th{padding:14px 0 4px;border:0}
  .risico td.kans{width:auto;text-align:left;padding:0 0 14px}
}
@media (max-width:23em){
  .kop .bel a{font-size:1.125rem;padding:12px 8px}
  .kop .bel-tel .ico{display:none}
  .kop .bel-tel{flex:1 1 auto}
  .kop .bel-wa{flex:0 0 auto;padding-inline:16px}
}
@media (max-width:19.9em){
  .kop .bel-wa .wa-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:24em){
  .lucas{grid-template-columns:minmax(0,1fr)}
  .lucas h2{margin-bottom:18px}
  .lucas figure{grid-column:1;grid-row:2}
  .lucas figure img{aspect-ratio:3/2}
}
html:not(.js) .bediening{display:none}
/* korte laptopschermen: het paneel moet helemaal in beeld blijven, dus de regel met de cijfers vervalt daar */
@media (min-width:40.01em) and (max-height:780px){
  .paneel .bewijs{display:none}
  .opening .wrap{padding-block:18px}
  .paneel .onder{margin:10px 0 18px}
}
/* telefoon en tablet: de foto's van de nazorg tussen de tekst en de twee blokken, niet als losse foto's erna */
@media (max-width:53.75em){
  .nazorg .twee{display:flex;flex-direction:column}
  .nazorg .tekst{display:contents}
  .nazorg .fotos{order:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 8px}
  .nazorg .plekken{order:2}
  .nazorg .tekst > p:last-child{order:3}
}
@media (max-width:24em){
  .nazorg .fotos{grid-template-columns:minmax(0,1fr)}
}

/* ---- added for the live site (7-8 November 2026) ---- */
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--inkt);color:var(--op-diep);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.logo:hover{color:var(--inkt)}
.voet .logo:hover{color:var(--op-diep)}

/* Vithas: big on hipfix.eu, small on hipfix.nl */
.vithas{padding:clamp(56px,7vw,104px) 0}
.vithas .kaart{background:var(--diep);color:var(--op-diep);border-radius:24px;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:start}
.vithas h2,.vithas h3{color:var(--op-diep)}
.vithas a{color:var(--op-diep)}
.vithas .feiten{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vithas .feiten li{background:rgba(248,243,234,.1);border-radius:14px;padding:16px 18px}
.vithas .feiten b{display:block;font:700 1.25rem/1.3 var(--kop)}
.vithas .knop{background:var(--op-diep);color:var(--diep);margin-top:8px}
.vithas .knop:hover{background:var(--beige);color:var(--inkt)}
.vithas :focus-visible{outline-color:var(--op-diep);box-shadow:none}
.vithas-klein{margin-top:28px;background:var(--beige);box-shadow:inset 0 0 0 1px var(--vlak-rand);border-radius:16px;padding:22px 24px}
.vithas-klein h3{margin-bottom:6px}
.vithas-klein p{margin:0;font-size:1.125rem}

/* questions */
.vragen{padding:clamp(56px,7vw,104px) 0}
.vragen .lijstvragen{max-width:46rem;margin-top:28px;display:grid;gap:12px}
.vragen details{background:var(--vlak);box-shadow:inset 0 0 0 1px var(--vlak-rand);border-radius:16px;color:var(--op-vlak)}
.vragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 22px;font:700 1.25rem/1.3 var(--kop)}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";flex:0 0 36px;height:36px;border-radius:50%;background:var(--diep);color:var(--op-diep);display:grid;place-items:center;font:600 1.375rem/1 var(--lijf)}
.vragen details[open] summary::after{content:"−"}
.vragen details > div{padding:0 22px 6px}

/* sub pages */
.pagina{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,112px)}
.pagina .tekst{max-width:var(--kolom)}
.pagina h1{color:var(--diep);font-size:clamp(2.25rem,5vw,3.5rem);font-weight:800;margin-bottom:24px}
.pagina h2{font-size:clamp(1.5rem,3vw,2rem);margin:40px 0 14px}
.pagina ul{padding-left:1.2em}
.pagina li{margin-bottom:.6em}
.terug{display:inline-block;margin-bottom:20px;font-weight:500}

/* footer details */
.voet .klein{font-size:1rem;line-height:1.6;margin-top:18px}
.voet .onderregel{grid-column:1/-1;border-top:1px solid rgba(248,243,234,.18);padding-top:20px;font-size:1rem}

/* print: no sticky bars, colours readable on paper, the risk block keeps its contrast */
@media print{
  .kop,.mobielmenu,.bediening,.skip,.knoppen,.bel{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .opening{min-height:0;display:block}.opening > figure{position:static}.opening > figure img{height:auto;animation:none}
  .paneel{box-shadow:none;animation:none}
  .risico,.vithas .kaart,.contact,.voet{background:#fff!important;color:#000!important;box-shadow:inset 0 0 0 1px #000}
  .risico *,.vithas .kaart *,.contact *,.voet *{color:#000!important}
  .strook ul{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0}
  .strook li{flex:none}
  .vragen details > div{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}
@media (max-width:53.75em){
  .vithas .kaart{grid-template-columns:minmax(0,1fr)}
}