/* ==========================================================================
   tandarts-websitelatenmaken.nl — ontwerp "Het afsprekenbord" (29-10-2026).
   Fris, licht en klinisch-vriendelijk: indigo draagt (hero-vlak rechts, volvlak-sectie, footer), mint geeft lucht
   (primaire knop met inkt-tekst, vrije tijdslots, CTA-band), lichtlila en wit wisselen elkaar af als vlak.
   Signatuur: de slot-stip (mint rondje van 14px met inkt vinkje voor elke H2) en eyebrow-labels als
   tijdslot-chips. Kaarten hoek 24 met zachte schaduw, knoppen en velden hoek 10, labels hoek 6.
   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:"Sora";font-weight:800;font-style:normal;font-display:swap;
  src:url("/assets/fonts/kop-800.woff2") format("woff2");}
@font-face{font-family:"Sora";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/kop-700.woff2") format("woff2");}
@font-face{font-family:"Nunito Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tekst-400.woff2") format("woff2");}
@font-face{font-family:"Nunito Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tekst-600.woff2") format("woff2");}

:root{
  --inkt:#1A1830;
  --merk:#4D3DCB;
  --accent:#3BE0A7;
  --grond:#F2F2FB;
  --wit:#FFFFFF;
  --diep:#2E2491;
  --lijn:rgba(26,24,48,.12);
  --lijn-licht:rgba(255,255,255,.22);
  --zacht:rgba(26,24,48,.74);
  --zacht-licht:rgba(255,255,255,.86);
  --schaduw:0 10px 30px rgba(26,24,48,.08);
  --schaduw-hoog:0 24px 60px rgba(26,24,48,.22);

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

  --xs:14px; --s:17px; --m:20px; --l:28px; --xl:44px; --xxl:76px;
  --maxw:1200px;
  --hero:860px;
  --gut:clamp(16px,4vw,48px);
  --ritme:clamp(64px,7vw,100px);
  --r:10px;        /* knoppen en velden */
  --rk:24px;       /* kaarten */
  --rl:6px;        /* labels */
  /* de slot-stip: mint rondje met inkt vinkje */
  --stip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%233BE0A7'/%3E%3Cpath d='M4 7.2l2 2 4-4.2' fill='none' stroke='%231A1830' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,*::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.6;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.1;}
h1{font-weight:800;font-size:clamp(38px,5.2vw,var(--xxl));letter-spacing:-.03em;line-height:1.04;}
h2{font-size:clamp(28px,3.2vw,var(--xl));letter-spacing:-.02em;}
h3{font-size:var(--m);line-height:1.25;letter-spacing:-.01em;}
h4{font-size:var(--m);}
p{margin:0;}
a{color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
strong,b{font-weight:600;}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}

.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);}
.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);}
.sec--accent .lead,.sec--accent p{color:var(--inkt);}
.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(--r);}
.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,.voet :focus-visible{outline-color:var(--accent);}

/* --- label: de tijdslot-chip (lichtlila op wit, wit op lila en indigo) ------------- */
.label{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 12px 4px 10px;background:var(--grond);
  color:var(--inkt);border-radius:var(--rl);font-family:var(--tekst);font-size:var(--xs);font-weight:600;line-height:1.2;
  margin-bottom:18px;}
.label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--merk);flex:none;}
.sec--licht .label,.hero .label,.sec--vragen .label,.sec--merk .label,.sec--donker .label,.sec--accent .label{background:var(--wit);}
.sec--merk .label,.sec--donker .label{color:var(--inkt);}
.sec--merk .label::before,.sec--accent .label::before{background:var(--accent);}
.sec--accent .label::before{background:var(--merk);}
.sec--licht + .sec--vragen .label{background:var(--grond);}

/* --- signatuur: de slot-stip voor elke H2 ------------------------------------------ */
.kopblok h2::before,.proza--lang h2::before,.bedankt__kop::before{content:"";display:inline-block;width:14px;height:14px;
  margin-right:14px;vertical-align:.32em;background:var(--stip) center/14px 14px no-repeat;}

/* --- 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:22px;min-height:76px;}
.merk{font-family:var(--kop);font-weight:700;font-size:var(--s);letter-spacing:-.025em;line-height:1.1;color:var(--inkt);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;}
.merk::before{content:"";width:26px;height:26px;border-radius:7px;flex:none;
  background:var(--merk) var(--stip) 50% 50%/12px 12px no-repeat;}
.nav{display:flex;gap:clamp(12px,1.5vw,24px);}
.nav__link{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:16px;
  white-space:nowrap;}
.nav__link:hover,.nav__link.is-hier{text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:3px;text-underline-offset:8px;}
.kop__acties{display:flex;align-items:center;gap:18px;}
.tel{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;white-space:nowrap;font-size:16px;
  color:var(--merk);}
.tel:hover{text-decoration:underline;text-underline-offset:5px;}
.kop__acties .knop{min-height:46px;padding:11px 18px;font-size:16px;}
.menuknop{display:none;width:48px;height:48px;border-radius:var(--r);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:2px;}
.mobielmenu{display:none;flex-direction:column;gap:2px;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:600;}
.mobielmenu .knop{margin-top:16px;width:100%;}

/* --- knoppen: hoek 10, 16px/600, 15px 26px -------------------------------------------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;min-height:52px;
  border-radius:var(--r);border:2px solid transparent;font-family:var(--tekst);font-weight:600;
  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(--inkt);border-color:var(--inkt);color:var(--accent);}
.knop--merk{background:var(--merk);color:var(--wit);border-color:var(--merk);}
.knop--merk:hover{background:var(--diep);border-color:var(--diep);}
.sec--merk .knop--merk{background:var(--wit);color:var(--merk);border-color:var(--wit);}
.knop--lijn{border-color:currentColor;background:transparent;color:inherit;}
.knop--lijn:hover{background:rgba(77,61,203,.08);}
.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:600;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent);background:none;border:0;
  padding:0;cursor:pointer;color:var(--merk);}
.sec--merk .tekstlink,.sec--accent .tekstlink{color:inherit;}
.sec--accent .tekstlink{text-decoration-color:var(--merk);}
.tekstlink:hover{text-decoration-thickness:3px;}
.tekstlink::after,.pijl::after{content:"\203A";font-weight:700;}
.pijl{display:inline;font-weight:600;color:var(--merk);text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--accent);text-underline-offset:5px;}
.pijl::after{content:" \203A";}

/* --- hero van de home: lichtlila, tekst links, indigo vlak met de afsprakenkaart rechts ---- */
.hero{position:relative;background:var(--grond);color:var(--inkt);}
.hero__waas{display:none;}
.hero--home{min-height:clamp(620px,86vh,var(--hero));display:flex;align-items:center;overflow:hidden;}
/* het indigo vlak: loopt tot de rechterrand en schuift één kolom onder de kaart door */
.hero--home::before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc((100% - min(var(--maxw),100% - 2*var(--gut))) / 2 + min(var(--maxw),100% - 2*var(--gut)) * 4 / 12);
  background:var(--merk);}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);
  align-items:center;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px);}
.hero__tekst{max-width:640px;}
.hero--home h1{font-size:clamp(38px,5.2vw,var(--xxl));}
.h1__rest{display:block;margin-top:14px;font-weight:700;font-size:var(--l);line-height:1.2;letter-spacing:-.015em;
  color:var(--merk);max-width:22em;}
.hero .lead{margin-top:24px;max-width:36em;}
.hero .knoprij{margin-top:30px;}
.hero__vinkjes{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;font-size:16px;font-weight:600;}
.hero__vinkjes li{display:inline-flex;align-items:center;gap:10px;}
.hero__vinkjes li::before{content:"";width:20px;height:20px;flex:none;background:var(--stip) center/20px 20px no-repeat;}
.hero__bord{position:relative;display:flex;justify-content:flex-end;}

/* de fotoband onder de hero: schermbreed, 21:9 */
.fotoband{background:var(--grond);}
.fotoband img{width:100%;aspect-ratio:21/9;max-height:640px;object-fit:cover;object-position:50% 45%;}

/* hero van de vervolgpagina's: lichtlila vlak met kruimelpad */
.hero--kaal{padding:clamp(32px,4.5vw,56px) 0 clamp(52px,6vw,88px);}
.hero--kaal h1{max-width:18em;font-size:clamp(38px,4.6vw,68px);}
.hero--kaal .lead{margin-top:20px;max-width:62ch;}
.hero--kaal .lead a{text-underline-offset:4px;text-decoration-color:var(--merk);}
.hero--kaal .knoprij{margin-top:24px;}
.kruimels{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--xs);font-weight:600;margin-bottom:22px;color:var(--zacht);}
.kruimels a{color:var(--merk);text-underline-offset:4px;}
.kruimels span:last-child{font-weight:400;}

/* --- de afsprakenkaart ---------------------------------------------------------------- */
.bord{position:relative;width:min(100%,460px);background:var(--wit);color:var(--inkt);border-radius:var(--rk);
  box-shadow:var(--schaduw-hoog);padding:clamp(20px,2.2vw,28px);}
.bord__kop{display:flex;align-items:center;gap:10px;font-family:var(--kop);font-weight:700;font-size:16px;
  padding-bottom:14px;border-bottom:1px solid var(--lijn);}
.bord__stip{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(59,224,167,.25);flex:none;}
.bord__soorten{display:flex;gap:8px;margin-top:16px;}
.bord__soort{min-height:40px;padding:6px 14px;border-radius:var(--rl);border:2px solid var(--lijn);background:var(--wit);
  font-weight:600;font-size:var(--xs);cursor:pointer;}
.bord__soort:hover{border-color:var(--merk);}
.bord__soort[aria-pressed="true"]{background:var(--grond);border-color:var(--merk);color:var(--merk);}
.bord__week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px;}
.bord__kolom{display:grid;gap:8px;align-content:start;}
.bord__dag{text-align:center;font-family:var(--kop);font-weight:700;font-size:var(--xs);text-transform:lowercase;
  padding:4px 0;color:var(--zacht);}
.slot{min-height:44px;padding:0 2px;border-radius:var(--r);border:2px solid var(--accent);background:var(--wit);color:var(--inkt);
  font-weight:600;font-size:var(--xs);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s ease;}
.slot:hover{background:rgba(59,224,167,.18);}
.slot.is-gekozen{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--inkt);}
.slot.is-bezet{border-color:transparent;background:#E9E9F1;color:rgba(26,24,48,.42);cursor:not-allowed;text-decoration:line-through;}
.bord__legenda{display:flex;gap:16px;margin-top:12px;font-size:var(--xs);color:var(--zacht);}
.bord__legenda span{display:inline-flex;align-items:center;gap:6px;}
.bord__legenda span::before{content:"";width:14px;height:14px;border-radius:4px;border:2px solid var(--accent);}
.bord__legenda .bord__bezet::before{border-color:transparent;background:#E9E9F1;}
.bord__keuze{margin-top:14px;padding:12px 14px;border-radius:var(--r);background:var(--grond);font-size:var(--xs);line-height:1.45;}
.bord__keuze strong{color:var(--merk);}
.bord__knop{width:100%;margin-top:14px;}
.bord--groot{width:100%;max-width:560px;}
.bord--groot .slot{min-height:52px;font-size:16px;}
.bord-plek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(36px,4vw,56px);padding:clamp(24px,3.4vw,48px);border-radius:var(--rk);background:var(--merk);color:var(--wit);}
.bord-plek h3{color:var(--wit);font-size:var(--l);margin-bottom:18px;}
.bord-plek .stappen-lijst li{color:var(--zacht-licht);}
.bord-plek .stappen-lijst strong{color:var(--wit);}
.bord-plek .stappen-lijst li::before{background:var(--accent);color:var(--inkt);}
.bord-plek .note{color:var(--zacht-licht);}

/* --- rasters en kaarten ------------------------------------------------------------------ */
.kopblok{max-width:860px;margin-bottom:clamp(32px,4vw,52px);}
.kopblok .lead{margin-top:16px;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-radius:var(--rk);padding:clamp(22px,2.4vw,32px);box-shadow:var(--schaduw);
  display:flex;flex-direction:column;gap:10px;color:var(--inkt);border:1px solid var(--lijn);}
.sec--licht .kaart{border-color:transparent;}
.sec--merk .kaart,.sec--donker .kaart{background:rgba(255,255,255,.08);color:var(--wit);border-color:var(--lijn-licht);box-shadow:none;}
.kaart h3{font-size:var(--m);}
.kaart p{color:var(--zacht);}
.sec--merk .kaart p,.sec--donker .kaart p{color:var(--zacht-licht);}
.kaart--link{text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.kaart--link:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(26,24,48,.14);}
.kaart--link .pijl{margin-top:auto;padding-top:10px;align-self:flex-start;white-space:nowrap;}
.kaart__icoon{width:52px;height:52px;border-radius:16px;background:var(--grond);color:var(--merk);
  display:inline-flex;align-items:center;justify-content:center;flex:none;}
.sec--licht .kaart__icoon{background:var(--grond);}
.kaart__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.kaart__vanaf{font-family:var(--kop);font-weight:700;font-size:16px;color:var(--merk);white-space:nowrap;}
.kaart--wie .tekstlink{display:inline;min-height:0;margin-top:auto;align-self:flex-start;font-size:16px;line-height:1.5;padding:6px 0;}
.kaart--wie .tekstlink::after{margin-left:5px;}
.chip{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;min-height:28px;padding:3px 10px;
  border-radius:var(--rl);background:var(--grond);color:var(--merk);font-size:var(--xs);font-weight:600;line-height:1.2;}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}
.sec--licht .kaart .chip{background:var(--grond);}
.kaart--case h3{font-size:var(--m);}
.cases__kop{font-size:var(--l);margin:clamp(44px,5vw,64px) 0 20px;}
.note--groot{font-size:16px;margin-top:24px;}

/* 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,.95fr) minmax(0,1.05fr);}
.split > div > p + p,.proza p + p{margin-top:16px;}
.split .vinkjes{margin:4px 0 22px;}
.tweede{margin-top:clamp(40px,4.5vw,60px);}
.tweede .kopblok{margin-bottom:20px;}
.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{text-underline-offset:4px;text-decoration-color:var(--merk);}
.sec--merk .proza a{text-decoration-color:var(--accent);}
.wrap > ul:not([class]),.wrap > .proza ul{display:grid;gap:10px;margin:16px 0;max-width:76ch;}
.wrap > ul:not([class]) li,.proza li{position:relative;padding-left:24px;color:var(--zacht);}
.wrap > ul:not([class]) li::before,.proza li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--merk);}
.sec--merk .wrap > ul:not([class]) li{color:var(--zacht-licht);}
.sec--merk .wrap > ul:not([class]) li::before{background:var(--accent);}
.wrap > h3{margin:36px 0 12px;font-size:var(--l);}
.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 h3{font-family:var(--tekst);font-weight:600;font-size:var(--m);margin-bottom:6px;}
.rijen p{color:var(--zacht);}

/* --- vinkjes: de slot-stip als vinkje ---------------------------------------------------- */
.vinkjes{display:grid;gap:12px;}
.vinkjes li{position:relative;padding-left:32px;line-height:1.5;}
.vinkjes li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
  background:var(--stip) center/20px 20px no-repeat;}
.sec--merk .vinkjes li,.sec--donker .vinkjes li{color:var(--wit);}
.sec--licht .vinkjes li,.wrap > .vinkjes li{color:var(--zacht);}
.vinkjes li strong{color:var(--inkt);}
.sec--merk .vinkjes li,.sec--merk .wrap > .vinkjes li{color:var(--zacht-licht);}
.sec--merk .vinkjes li strong{color:var(--wit);}

/* --- werkwijze (home): drie stappen als afspraakkaartjes op indigo ------------------------- */
.werkstappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.werkstappen li{background:var(--wit);color:var(--inkt);border-radius:var(--rk);padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;gap:12px;border-top:6px solid var(--accent);}
.sec--merk .werkstappen h3{color:var(--inkt);font-size:var(--l);}
.sec--merk .werkstappen p{color:var(--zacht);}
.werkstap__nr{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:var(--rl);
  background:var(--grond);color:var(--merk);font-weight:600;font-size:var(--xs);}

/* 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);}
.sec--licht .stap{background:var(--wit);}
.stap__wanneer{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;
  border-radius:var(--r);background:var(--merk);color:var(--wit);font-family:var(--kop);font-weight:700;font-size:var(--m);
  align-self:flex-start;}
.stap p{color:var(--zacht);}
.stappen-lijst{counter-reset:stap;display:grid;gap:16px;margin:18px 0;max-width:76ch;}
.stappen-lijst li{position:relative;padding-left:52px;color:var(--zacht);min-height:36px;}
.stappen-lijst li::before{counter-increment:stap;content:counter(stap);position:absolute;left:0;top:-4px;width:36px;height:36px;
  border-radius:50%;background:var(--merk);color:var(--wit);font-family:var(--kop);font-weight:700;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;}
.stappen-lijst strong{color:var(--inkt);}
.sec--merk .stappen-lijst li{color:var(--zacht-licht);}
.sec--merk .stappen-lijst strong{color:var(--wit);}
.sec--merk .stappen-lijst li::before{background:var(--accent);color:var(--inkt);}

/* --- usp-balk: vier items, twee per rij op mobiel ----------------------------------------- */
.sec--usp{padding:clamp(40px,4.6vw,60px) 0;}
.usp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);}
.usp__item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;}
.usp__icoon{width:48px;height:48px;border-radius:14px;background:var(--accent);color:var(--inkt);
  display:inline-flex;align-items:center;justify-content:center;}
.usp__icoon svg{width:24px;height:24px;}
.usp__item h3{font-family:var(--tekst);font-weight:600;font-size:var(--m);line-height:1.3;}
.usp__item p{color:var(--zacht);font-size:16px;margin-top:4px;}

/* --- pakketten ---------------------------------------------------------------------- */
.pakketten{align-items:stretch;padding-top:20px;}
.pakket{position:relative;background:var(--wit);color:var(--inkt);border-radius:var(--rk);box-shadow:var(--schaduw);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;border:1px solid var(--lijn);}
.sec--licht .pakket{border-color:transparent;}
.pakket--uit{transform:translateY(-16px);border:2px solid var(--merk);padding-top:calc(clamp(24px,2.6vw,34px) + 34px);
  box-shadow:0 20px 50px rgba(77,61,203,.18);}
.sec--licht .pakket--uit{border-color:var(--merk);}
.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 12px;}
.pakket .vinkjes li{color:var(--inkt);font-size:16px;}
.pakket .knop{width:100%;}
.prijs,.pakket .prijs{font-family:var(--kop);font-weight:800;font-size:var(--xl);line-height:1;letter-spacing:-.03em;
  color:var(--merk);white-space:nowrap;margin-top:4px;font-variant-numeric:tabular-nums;}
.prijs__duur,.pakket .prijs__duur{font-size:var(--xs);color:var(--zacht);margin-top:-4px;}
.merkje{position:absolute;top:0;left:0;right:0;height:36px;border-radius:22px 22px 0 0;background:var(--merk);color:var(--wit);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--xs);font-weight:600;}
.merkje::before{content:"";width:14px;height:14px;background:var(--stip) center/14px 14px no-repeat;}
.losse{margin-top:clamp(22px,2.6vw,32px);background:var(--wit);border-radius:var(--rk);
  padding:clamp(18px,2.2vw,24px) clamp(22px,2.6vw,32px);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;}
.losse span b{font-family:var(--kop);font-weight:700;color:var(--merk);}
.losse a{text-underline-offset:4px;}
.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);}
.note a{text-underline-offset:4px;}

/* --- tabel ------------------------------------------------------------------------ */
.tabel-wrap{overflow-x:auto;border-radius:16px;-webkit-overflow-scrolling:touch;max-width:100%;margin:8px 0;box-shadow:var(--schaduw);}
.tabel{width:100%;border-collapse:collapse;background:var(--wit);color:var(--inkt);}
.tabel th,.tabel td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--lijn);font-size:16px;
  overflow-wrap:break-word;}
.tabel thead th{background:var(--merk);color:var(--wit);font-weight:600;font-size:var(--xs);border-top:0;}
.tabel tbody th{font-weight:600;}
.tabel tbody tr:nth-child(even) td,.tabel tbody tr:nth-child(even) th{background:rgba(242,242,251,.75);}
.tabel td:first-child{font-weight:600;}
.sec--merk .tabel{color:var(--inkt);}
.sec--merk .tabel-wrap{box-shadow:none;}

/* --- zekerheden: indigo vlak, vijf genummerde tijdslots ---------------------------------- */
.zekerheden{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);}
.zekerheid{border-radius:var(--rk);padding:22px;background:rgba(255,255,255,.08);border:1px solid var(--lijn-licht);
  display:flex;flex-direction:column;gap:10px;}
.zekerheid__nr{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:36px;
  padding:0 10px;border-radius:var(--r);background:var(--accent);color:var(--inkt);font-family:var(--kop);font-weight:700;font-size:16px;}
.zekerheid h3{font-size:var(--m);line-height:1.25;}
.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:12px;font-size:var(--xs);color:var(--zacht);}
/* een vrij tijdslot op de hoek van de foto: de signatuur in het beeld */
.split .foto::after{content:"";position:absolute;right:20px;top:20px;width:56px;height:56px;border-radius:16px;
  box-shadow:var(--schaduw);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231A1830' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px 26px no-repeat;}

/* --- rekenhulpen (de motor kent ze; deze silo gebruikt ze nu niet) ------------------------ */
.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-radius:var(--rk);padding:clamp(22px,2.6vw,34px);box-shadow:var(--schaduw);
  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:600;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:10px;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;font-variant-numeric:tabular-nums;text-align:right;}
.rekenhulp__rij.is-groot .rekenhulp__getal{font-size:var(--xl);line-height:1;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;}
.rekenhulp__fout{color:var(--accent) !important;font-weight:600;}

/* --- demo-kaarten en voorbeelden ----------------------------------------------------------- */
.kaart--demo{padding:0;overflow:hidden;gap:10px;}
.kaart--demo > :not(.kaart__beeld){margin-left:clamp(22px,2.4vw,28px);margin-right:clamp(22px,2.4vw,28px);}
.kaart--demo > :last-child{margin-bottom:clamp(22px,2.4vw,28px);}
.kaart__beeld{overflow:hidden;margin-bottom:8px;border-bottom:1px solid var(--lijn);}
.kaart__beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.kaart--demo h3{font-size:var(--m);}
.raster--3.voorbeelden{align-items:stretch;}
.demo-rijen{display:grid;gap:clamp(28px,3.4vw,44px);margin-top:clamp(28px,3vw,40px);}
.demo-rij{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--wit);border-radius:var(--rk);box-shadow:var(--schaduw);padding:clamp(18px,2.4vw,28px);}
.sec:not(.sec--licht) .demo-rij{border:1px solid var(--lijn);}
.demo-rij__beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--lijn);}
.demo-rij__tekst{display:flex;flex-direction:column;gap:12px;}
.demo-rij__tekst h3{font-size:var(--l);}
.demo-rij__fictief{font-size:var(--xs);color:var(--zacht);margin-top:-6px;}
.demo-rij__tekst .knoprij{margin-top:8px;}
.demo-rij__tekst .vinkjes li{color:var(--zacht);font-size:16px;}

/* --- faq: uitklapbaar, eerste open ------------------------------------------------------- */
.faq{display:grid;gap:10px;}
.vraag{background:var(--wit);border-radius:16px;box-shadow:var(--schaduw);}
.sec--licht + .sec--vragen .vraag{background:var(--grond);box-shadow:none;}
.vraag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px 20px;min-height:64px;}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary h3{margin:0;font-family:var(--tekst);font-weight:600;font-size:var(--m);line-height:1.35;}
.vraag summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:var(--inkt);display:inline-flex;align-items:center;justify-content:center;font-size:var(--l);font-weight:600;line-height:1;}
.vraag[open] summary::after{content:"\2212";background:var(--merk);color:var(--wit);}
.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);}
.faqblok{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;}
.faqblok .kopblok{margin-bottom:0;position:sticky;top:110px;}

/* --- cta-band: mint vlak, indigo knop ------------------------------------------------------- */
.cta__in{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 .kopblok h2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%231A1830'/%3E%3Cpath d='M4 7.2l2 2 4-4.2' fill='none' stroke='%233BE0A7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.cta h2{max-width:18em;}
.cta .lead{margin-top:16px;max-width:60ch;}
.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{border-color:var(--inkt);}
.cta .knop--lijn:hover{background:rgba(26,24,48,.08);}
.cta__mail{display:flex;flex-wrap:wrap;gap:8px 24px;font-weight:600;}
.cta__mail a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px;overflow-wrap:anywhere;}

/* --- formulier ----------------------------------------------------------------------- */
.form,.offerte{background:var(--wit);color:var(--inkt);border-radius:var(--rk);box-shadow:var(--schaduw-hoog);
  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:var(--m);}
.offerte fieldset + fieldset{margin-top:20px;}
.offerte fieldset .veld__hulp{display:block;margin-top:8px;}
.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(--r);
  border:2px solid var(--accent);background:var(--wit);cursor:pointer;line-height:1.25;font-weight:600;font-size:16px;}
.keuze span:hover{background:rgba(59,224,167,.14);}
.keuze input:checked + span{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--inkt);}
.keuze input:disabled + span{border-color:transparent;background:#E9E9F1;color:rgba(26,24,48,.5);cursor:not-allowed;}
.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:600;font-size:var(--xs);}
.vereist{color:var(--merk);}
.veld input,.veld select,.veld textarea{font:inherit;color:inherit;background:var(--wit);border:2px solid var(--lijn);
  border-radius:var(--r);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 rgba(77,61,203,.25);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 20px;background:var(--grond);border-radius:16px;}
.uitkomst div{flex:1 1 220px;min-width:0;display:grid;gap:2px;}
.uitkomst div strong{font-weight:600;font-size:var(--xs);}
.uitkomst div span{font-size:var(--xs);color:var(--zacht);}
.uitkomst output{font-family:var(--kop);font-weight:800;font-size:var(--xl);line-height:1;white-space:nowrap;color:var(--merk);
  font-variant-numeric:tabular-nums;}
.akkoord{display:flex;gap:12px;align-items:flex-start;font-size:var(--xs);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:var(--m);margin:28px 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:var(--xs);font-weight:600;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:4px;background:var(--grond);}
.fstap__balk span.is-af{background:var(--merk);}
.fstap__balk span.is-hier{background:var(--accent);}

/* de prijscalculator van de motor (calc), voor het geval een pagina hem gebruikt */
.calc{background:var(--wit);border-radius:var(--rk);box-shadow:var(--schaduw);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:2px solid var(--lijn);border-radius:var(--r);cursor:pointer;}
.calc__optie input{margin-top:3px;accent-color:var(--merk);}
.calc__optie.is-inbegrepen{opacity:.55;}
.calc__bedrag{font-weight:600;color:var(--merk);}
.calc__duur{display:block;font-size:var(--xs);color:var(--zacht);}
.calc__uitkomst{display:grid;gap:2px;padding:16px 20px;background:var(--grond);border-radius:16px;}
.calc__label{font-size:var(--xs);font-weight:600;}
.calc__totaal{font-family:var(--kop);font-weight:800;font-size:var(--xl);line-height:1;}

/* --- 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:600;text-decoration:underline;color:var(--merk);
  text-decoration-thickness:2px;text-decoration-color:var(--accent);text-underline-offset:5px;overflow-wrap:anywhere;}
.bedankt__kop{margin-top:clamp(48px,5vw,72px);}
.proza--lang{max-width:76ch;}
.proza--lang h2{margin:48px 0 14px;}
.proza--lang h2:first-child{margin-top:24px;}

/* --- voet: indigo, vier kolommen, voetregel in diep indigo ---------------------------------- */
.voet{background:var(--merk);color:var(--zacht-licht);padding:clamp(56px,6vw,84px) 0 0;}
.voet__raster{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.2fr;gap:clamp(24px,3vw,44px);}
.voet__kol{min-width:0;}
.voet__kop{font-family:var(--kop);font-weight:700;font-size:16px;color:var(--accent);margin-bottom:14px;}
.voet__kol:first-child .voet__kop{font-size:var(--m);letter-spacing:-.02em;color:var(--wit);overflow-wrap:break-word;}
.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:10px 0;font-size:var(--xs);background:var(--diep);
  box-shadow:0 0 0 100vmax var(--diep);clip-path:inset(0 -100vmax);}
.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:1300px){
  .kop__acties .tel{display:none;}
}
@media (max-width:1160px){
  .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));}
  .voet__raster{grid-template-columns:1fr 1fr;}
  .hero__in{grid-template-columns:minmax(0,1fr);}
  .hero--home::before{display:none;}
  .hero__bord{justify-content:flex-start;background:var(--merk);margin:0 calc(-1*var(--gut));padding:clamp(28px,5vw,48px) var(--gut);}
  .hero--home .hero__in{padding-bottom:0;}
  .bord-plek{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:900px){
  .split,.split--tekst,.split--beeld,.cta__in,.rekenhulp,.faqblok,.stappen,.werkstappen,.demo-rij{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;}
  .pakket--uit{transform:none;}
  .split .foto{max-width:560px;}
  .fotoband img{aspect-ratio:16/9;}
}
@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:16px;white-space:normal;overflow-wrap:anywhere;min-width:0;}
  .merk::before{width:24px;height:24px;}
  .raster--2,.raster--3,.raster--4,.zekerheden,.formvelden,.rekenhulp .formvelden{grid-template-columns:minmax(0,1fr);}
  .voet__raster{grid-template-columns:1fr;}
  .hero--home{min-height:0;}
  .hero__in{padding-top:40px;gap:32px;}
  .hero--home h1,.hero--kaal h1{font-size:38px;}
  .h1__rest{font-size:22px;}
  h2{font-size:28px;}
  .kopblok h2::before{margin-right:10px;}
  .bord{width:100%;padding:18px;}
  .bord__week{gap:6px;}
  .bord__kolom{gap:6px;}
  .knoprij .knop,.cta .knop,.bord__knop{width:100%;}
  .hero__vinkjes{flex-direction:column;gap:8px;}
  .usp{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;}
  .usp__item{grid-template-columns:minmax(0,1fr);gap:10px;}
  .usp__item h3{font-size:16px;}
  .usp__item p{font-size:var(--xs);}
  .tabel th,.tabel td{padding:10px 12px;font-size:var(--xs);}
  .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;}
  .fotoband img{aspect-ratio:4/3;}
  .pakket .prijs{font-size:40px;}
  .demo-rij{padding:16px;}
}