/* ── Schibsted Grotesk, in eigen beheer ────────────────────────────────────
   Het lettertype staat in assets/fonts/ en wordt niet meer bij Google opgehaald.
   Daardoor gaat er bij het laden van een pagina geen enkel gegeven van de
   bezoeker naar een externe partij. Het is een variabel lettertype: één bestand
   dekt alle gewichten van 400 tot 700.
   Licentie: SIL Open Font License 1.1, zie assets/fonts/OFL.txt.
   Vervangen door een nieuwe versie? Haal de bestanden op bij Google Fonts en
   werk hieronder alleen de bestandsnamen bij. */
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ══ Huisstijl ═══════════════════════════════════════════════════════════════
   Ronde 31 (oktober 2026): de achtergrond is de beige van het visitekaartje
   (#EADFCC, gemeten in "Minimalistische Mizaro-identiteitskaart"). Daaromheen
   een iets donkerder beige voor afwisselende vlakken, licht crème voor kaarten
   en velden (geen spierwit), olijfgroene koppen en mosgroene knoppen.
   Kleurregel van de eigenaar: groen op licht, of licht op groen, nooit groen
   op groen. Eén lettertype. */
:root{
  --been:#EADFCC;        /* beige van het visitekaartje: basis van de hele site */
  --been2:#E2D6BF;       /* iets donkerder beige voor afwisselende vlakken */
  --wit:#F4EDE1;         /* licht crème: kaarten, velden, kopbalk */
  --inkt:#1E2419;        /* tekst */
  --mos:#49523A;         /* hoofdkleur: koppen, knoppen, groene vlakken */
  --mos-hover:#3B432F;
  --diep:#2F3626;        /* donkerste groen, alleen als vlak */
  --olijf:#6C7157;       /* logokleur: lijnen, merktekens, grote accentkop */
  --olijf-tekst:#555B43; /* kleine olijftekst: contrast 5,4 op beige */
  --ivoor:#F3F0E4;       /* tekst op groen */
  --messing:#CFC6A2;     /* accent op groen: contrast 4,8 */
  --gedempt:#4F5345;     /* tweede tekstkleur: contrast 6,0 op beige */
  --gedempt-kaart:#4F5345;
  --gedempt-d:rgba(243,240,228,.8);
  --lijn:rgba(30,36,25,.15); --lijn-zacht:rgba(30,36,25,.09); --lijn-d:rgba(243,240,228,.24);
  --lijn-olijf:rgba(108,113,87,.32);
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --kop-h:88px;
  --zacht:cubic-bezier(.2,.7,.2,1);
  --schaduw:0 1px 2px rgba(30,36,25,.05),0 22px 44px -28px rgba(30,36,25,.4);
}*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--kop-h) + 16px)}
body{background:var(--been);color:var(--inkt);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--mos);color:var(--ivoor)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--mos);outline-offset:3px}
/* Op de mosgroene vlakken valt een groene focusrand weg; daar wordt hij ivoor. */
:is(.blok-groen,.afspraak,.kb-slot,.pakket.aanbevolen) :focus-visible{outline-color:var(--ivoor)}
img{max-width:100%;height:auto}
[data-pg][hidden]{display:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--mos);color:var(--ivoor);padding:12px 20px;z-index:200}
.skip:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blad{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 52px;position:relative}
@media(max-width:720px){.wrap{padding:0 22px}}

/* ── typografie ── */
h1,h2,h3{font-weight:600;letter-spacing:-.018em;line-height:1.15;text-wrap:balance}
h1,h2{color:var(--mos)}
.serif{font-family:var(--sans);font-weight:500;line-height:1.08;letter-spacing:-.028em}
.lbl{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3,p,li,summary,td,th,address{overflow-wrap:break-word}

/* ── kopbalk ── */
.site-kop{position:sticky;top:0;z-index:80;background:rgba(234,223,204,.93);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--lijn-zacht)}
/* De kopbalk staat op dezelfde randen als de inhoud eronder. */
.nav{max-width:1240px;margin:0 auto;padding:0 52px;height:var(--kop-h);display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav .logo{flex-shrink:0;display:block}
/* Het logo heeft een vaste verhouding van 2,434. Nooit vervormen. */
.nav .logo img{height:66px;width:auto;max-width:none;display:block}
.nav nav{display:flex;gap:34px}
.nav nav a{font-size:14.5px;font-weight:500;color:var(--inkt);padding:8px 0;position:relative;transition:color .25s}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--mos);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--zacht)}
.nav nav a:hover{color:var(--mos)}
.nav nav a:hover::after,.nav nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav nav a[aria-current="page"]{color:var(--mos)}
.nav .rechts{display:flex;align-items:center;gap:16px}
.taal{display:flex;align-items:center;gap:0;border:1px solid var(--lijn);padding:2px;background:var(--wit)}
.taal button{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.1em;padding:6px 10px;background:transparent;border:none;cursor:pointer;color:var(--gedempt);transition:all .25s}
.taal button[aria-pressed="true"]{background:var(--mos);color:var(--ivoor)}
.taal button:hover:not([aria-pressed="true"]){color:var(--inkt)}
.nav .cta{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;background:var(--mos);color:var(--ivoor);padding:0 20px;transition:background .25s;white-space:nowrap}
.nav .cta:hover{background:var(--mos-hover)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--lijn);background:var(--wit);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{width:18px;height:1.5px;background:var(--inkt);transition:all .25s;display:block}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1181px) and (max-width:1300px){
  .nav{gap:20px}
  .nav nav{gap:20px}
  .nav .rechts{gap:12px}
  .nav .cta{padding:0 16px}
}
@media(max-width:1180px){
  :root{--kop-h:72px}
  .nav nav,.nav .cta{display:none}
  .menu-btn{display:flex}
  .nav{padding:0 52px;gap:14px}
  .nav .logo img{height:54px}
}
@media(max-width:720px){.nav{padding:0 22px}}
.mmenu{position:fixed;inset:0;top:var(--kop-h);z-index:75;background:var(--been);padding:12px 22px 48px;overflow-y:auto}
.mmenu[hidden]{display:none}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{padding:12px 2px;font-size:20px;font-weight:500;letter-spacing:-.015em;border-bottom:1px solid var(--lijn-zacht);display:flex;align-items:center;min-height:56px}
.mmenu nav a[aria-current="page"]{color:var(--mos)}
.mmenu .btn{margin-top:26px;width:100%}
.taal.in-menu{display:none}
@media(max-width:1180px){
  .site-kop .taal{display:none}
  .mmenu .taal.in-menu{display:inline-flex;margin-top:22px}
  .taal button{padding:13px 16px}
}

/* ── knoppen ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;font-size:14.5px;font-weight:600;letter-spacing:.005em;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s;font-family:var(--sans);line-height:1.3}
.btn .p{transition:transform .3s var(--zacht)}
.btn:hover .p{transform:translateX(4px)}
.btn-donker{background:var(--mos);color:var(--ivoor)}
.btn-donker:hover{background:var(--mos-hover)}
.btn-lijn{border-color:rgba(73,82,58,.45);color:var(--mos);background:transparent}
.btn-lijn:hover{border-color:var(--mos);background:var(--mos);color:var(--ivoor)}
.btn-ivoor{background:var(--ivoor);color:var(--diep)}
.btn-ivoor:hover{background:var(--wit)}
.btn-lijn-licht{border-color:var(--lijn-d);color:var(--ivoor)}
.btn-lijn-licht:hover{border-color:var(--ivoor)}
.knoppen{display:flex;flex-wrap:wrap;gap:10px}
.knoppen-midden{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:48px}

/* ── secties ── */
section.blok{padding:104px 0;position:relative}
.blok-zand{background:var(--been2)}
.blok-groen{background:var(--mos);color:var(--ivoor)}
.blok-groen .lbl{color:var(--messing)}
.sec-kop{max-width:720px;margin-bottom:48px}
.sec-kop h2{font-size:clamp(25px,2.4vw,34px);margin-top:12px}
.sec-kop .toel{color:var(--gedempt);font-size:16px;line-height:1.7;margin-top:16px;max-width:58ch}
.sec-kop.midden{text-align:center;margin-left:auto;margin-right:auto}
.sec-kop.midden .toel{margin-left:auto;margin-right:auto}
.blok-groen .sec-kop h2{color:var(--ivoor)}
.blok-groen .sec-kop .toel{color:var(--gedempt-d)}
@media(max-width:900px){section.blok{padding:72px 0}.sec-kop{margin-bottom:36px}}

/* ── paginakop ── */
.pkop{padding:40px 0 48px;border-bottom:1px solid var(--lijn-zacht)}
.pkop .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:end}
.pkop .lbl{grid-column:1/-1}
.pkop h1{grid-column:1;grid-row:2/span 4;align-self:end;font-size:clamp(30px,3.3vw,46px);margin-top:14px}
/* Zonder inleiding ernaast krijgt de kop de volle breedte, zodat lange
   woorden zoals "administratiekantoor" niet hoeven af te breken. */
.pkop h1:last-child{grid-column:1/-1}
.pkop .lead,.pkop .updated,.pkop .dl{grid-column:2}
.pkop .lead{color:var(--gedempt);font-size:16px;line-height:1.75}
.pkop .updated{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst);margin-bottom:12px}
.pkop .dl{margin-top:24px}
.pkop .dl .fmt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.pkop.met-beeld{border-bottom:0;padding-bottom:36px}
/* Korte inleiding met de kern in één vlak eronder (diensten). */
.pkop .lead.kort{font-size:19px;line-height:1.45;font-weight:500;color:var(--mos);letter-spacing:-.01em;max-width:30ch}
.introvlak{grid-column:1/-1;grid-row:auto;margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr);background:var(--wit);border:1px solid var(--lijn-olijf)}
.introvlak > div{display:flex;flex-direction:column;gap:7px;padding:22px 26px;border-left:1px solid var(--lijn-olijf)}
.introvlak > div:first-child{border-left:0}
.introvlak b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.introvlak span{font-size:15px;line-height:1.5;color:var(--inkt)}
.introvlak .naar > span{font-size:14.5px;color:var(--gedempt)}
.introvlak .naar a{font-size:14.5px;font-weight:600;color:var(--mos)}
.introvlak .naar a span{font-size:inherit;color:inherit}
@media(max-width:1080px){.introvlak .naar a{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;min-height:44px;margin:-10px 0 -12px}}
@media(max-width:900px){
  .pkop{padding:32px 0 40px}
  .pkop .lead.kort{font-size:17px}
  .introvlak{grid-template-columns:minmax(0,1fr);margin-top:22px}
  .introvlak > div{padding:15px 20px;gap:4px;border-left:0;border-top:1px solid var(--lijn-olijf)}
  .introvlak > div:first-child{border-top:0}
  .pkop .wrap{grid-template-columns:minmax(0,1fr)}
  .pkop h1,.pkop .lead,.pkop .updated,.pkop .dl{grid-column:1;grid-row:auto}
  .pkop h1{font-size:clamp(24px,7vw,36px)}
  .pkop .lead{margin-top:16px;font-size:16px}
  .pkop .updated{margin-top:16px;margin-bottom:0}
  .pkop.met-beeld{padding-bottom:30px}
}

/* ── beelden ──
   Beelden worden nooit breder getoond dan hun bron toelaat bij een
   pixelverhouding van 1,25. Bij bijgesneden beelden geeft `sizes` de breedte
   van het getoonde beeld op, niet die van het vak. */
.beeld{display:block;background:var(--been2);overflow:hidden}
.beeld img{display:block;width:100%;height:100%;object-fit:cover}
.paginabeeld{margin:0}
.paginabeeld .beeld{aspect-ratio:21/9}
.breedbeeld{aspect-ratio:16/9}
.staand{aspect-ratio:3/4}
.liggend{aspect-ratio:4/3}
.drie-twee{aspect-ratio:3/2}
/* De entreefoto staat links uitgelijnd: de deur met het logo blijft in beeld,
   de tekst op de wand rechts valt buiten het staande kader. */
.over-duo .staand img{object-position:left center}
.over-duo{align-items:start}
@media(max-width:900px){.over-duo .staand{max-width:440px}}
@media(max-width:720px){.paginabeeld .beeld{aspect-ratio:3/2}}

/* ── hero: eerst de video, daaronder de kernzin en de knoppen ──
   Beide kolommen staan bovenaan uitgelijnd, zodat de kernzin zo hoog mogelijk
   begint. */
.hero{padding:28px 0 0}
.hero-beeld{margin:0}
.hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start;margin-top:36px}
/* Op lage schermen (13-inch laptops, tablet liggend) wordt de video iets
   kleiner, zodat de kernzin en de knop zonder scrollen in beeld staan. Vanaf
   900 pixels schermhoogte blijft hij 1010 pixels breed. */
@media(min-width:901px){.hero .hero-video{max-width:clamp(640px,calc((100vh - 360px) * 2),1010px)}}
.hero h1,.hero .hero-twee{font-size:clamp(30px,3.5vw,48px);line-height:1.05;letter-spacing:-.03em}
.hero h1{margin-top:18px}
.hero .hero-twee{color:var(--olijf)}
.hero .sub{font-size:16px;color:var(--gedempt);line-height:1.7;max-width:46ch}
.hero .knoppen{margin-top:26px}
.hero .lokaal{margin-top:18px;font-size:13.5px;font-weight:500;color:var(--olijf-tekst)}
/* De vier feiten in een crème band: één rustig overzicht onder de kernzin. */
.bewijs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:44px;background:var(--wit);border:1px solid var(--lijn-olijf)}
.bewijs li+li{border-left:1px solid var(--lijn-zacht)}
.bewijs li{position:relative;padding:18px 20px 18px 40px;font-size:14px;font-weight:500;line-height:1.45}
.bewijs li::before{content:"";position:absolute;left:21px;top:calc(18px + .55em);width:6px;height:6px;background:var(--mos);transform:rotate(45deg)}
.bewijs .bedrag{white-space:nowrap}
@media(max-width:900px){
  .hero{padding:22px 0 0}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:28px}
  .hero h1,.hero .hero-twee{font-size:clamp(27px,7.6vw,38px)}
  .bewijs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .bewijs li:nth-child(3){border-left:0}
  .bewijs li:nth-child(n+3){border-top:1px solid var(--lijn-zacht)}
}
@media(max-width:380px){
  .bewijs{grid-template-columns:minmax(0,1fr)}
  .bewijs li+li{border-left:0;border-top:1px solid var(--lijn-zacht)}
  .hero .knoppen .btn{width:100%}
}

/* ── beelden op ware verhouding: nooit bijgesneden, nooit vervormd ── */
.vrijbeeld{margin:0 auto;display:block}
.vrijbeeld img{display:block;width:100%;height:auto;background:var(--been2)}
.vrijbeeld.smal{max-width:820px}
.vrijbeeld.middel{max-width:960px}
/* Brede beelden bovenaan een pagina: iets minder hoog, zodat de paginatitel
   meteen in beeld is. Alleen lucht aan de boven- en onderkant valt weg. */
.topbeeld img{aspect-ratio:2.6/1;object-fit:cover;object-position:50% 35%}
/* Foto bovenaan diensten: 16:9 in plaats van 4:3, logo en whiteboard blijven in beeld. */
.vrijbeeld.diensttop{max-width:1010px}
.diensttop img{aspect-ratio:16/9;object-fit:cover;object-position:50% 30%}
/* Beeld bovenaan een pagina, boven de paginakop. */
.wrap.paginatop{padding-top:28px}
.paginatop + .pkop{padding-top:40px}
@media(max-width:900px){.wrap.paginatop{padding-top:18px}.paginatop + .pkop{padding-top:30px}}
.vrijbeeld video{display:block;width:100%;height:auto;background:var(--been2)}
/* De video is 1916 pixels breed; op 1010 pixels (bij pixelverhouding 1,25 dus
   1263 beeldpunten) blijft hij ruim scherp. */
.hero-video{max-width:1010px}
/* Iets minder hoog dan 16:9: plafond en vloer worden smaller, de wand met het
   logo en de welkomsttekst blijft volledig. */
.hero-video video{aspect-ratio:2/1;object-fit:cover;object-position:50% 45%}
.beeldsectie{padding-top:0 !important}

/* ── kernzin op de homepagina ── */
.statement{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:baseline}
.statement .groot{font-size:clamp(19px,1.9vw,25px);line-height:1.32;font-weight:500;letter-spacing:-.02em;color:var(--mos)}
@media(max-width:900px){.statement{grid-template-columns:minmax(0,1fr);gap:14px}}
/* ── duo: beeld naast tekst ── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.duo.beeld-rechts > .beeld,.duo.beeld-rechts > figure{order:2}
.duo .groot{font-size:clamp(19px,1.9vw,25px);line-height:1.3;font-weight:500;letter-spacing:-.02em;margin-top:16px}
.duo .tekst p:not(.lbl):not(.groot):not(.statement-k){color:var(--gedempt);margin-top:14px;line-height:1.8;max-width:56ch}
.duo .tekst h2{font-size:clamp(23px,2.2vw,30px);margin-top:12px}
.duo .tekst .knoppen{margin-top:28px}
@media(max-width:900px){
  .duo{grid-template-columns:minmax(0,1fr);gap:32px}
  .duo.beeld-rechts > .beeld,.duo.beeld-rechts > figure{order:0}
}

/* ── diensten op de homepagina: open kolommen, alleen een lijn erboven ── */
/* Elke kolom deelt dezelfde vier rijen (label, kop, uitleg, lijst), zodat de
   opsommingen in alle drie de kolommen precies op dezelfde hoogte beginnen. */
.dienstblokken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:56px;row-gap:0}
.dienstblok{border-top:1px solid var(--lijn);padding-top:28px;display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.dienstblok h3{font-size:20px;margin-top:10px}
.dienstblok .oms{color:var(--gedempt);margin-top:10px;line-height:1.7;font-size:15px}
.dienstblok ul{list-style:none;margin-top:20px;display:grid;gap:9px}
.dienstblok li,.vinklijst li{font-size:14.5px;padding-left:20px;position:relative;line-height:1.5}
.dienstblok li::before,.vinklijst li::before{content:"";position:absolute;left:1px;top:.6em;width:5px;height:5px;background:var(--olijf);transform:rotate(45deg)}
@media(max-width:1000px){.dienstblokken{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:40px}.dienstblok{display:flex;flex-direction:column;grid-row:auto}}

/* ── alle diensten ── */
.dienstenraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--lijn-zacht);border:1px solid var(--lijn-zacht)}
.dienstkaart{background:var(--wit);padding:34px 38px 36px;transition:background .3s}
.dienstkaart:hover{background:#FCFCFA}
.dienstkaart h2{font-size:clamp(17px,1.5vw,19px);position:relative;padding-left:20px}
.dienstkaart h2::before{content:"";position:absolute;left:0;top:.48em;width:6px;height:6px;background:var(--mos);transform:rotate(45deg)}
.dienstkaart p{color:var(--gedempt);margin-top:8px;line-height:1.75;font-size:15px;max-width:54ch}
@media(max-width:900px){.dienstenraster{grid-template-columns:minmax(0,1fr)}.dienstkaart{padding:28px 24px 30px}}
/* "Vennootschapsbelasting" moet op de smalste telefoons in zijn geheel passen. */
@media(max-width:380px){.dienstkaart{padding:26px 18px 28px}.dienstkaart h2{font-size:18.5px;padding-left:17px}}

/* ── werkwijze: zes stappen in twee kolommen ──
   De volgorde loopt per kolom van boven naar beneden (1-3, dan 4-6). Het blijft
   een <ol>, zodat een schermlezer de volgorde ook hoort. Geen zichtbare nummers. */
.stappenvlak{background:var(--wit);border:1px solid var(--lijn-olijf);padding:48px 52px}
.stappen{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:88px}
.stap{position:relative;padding:0 0 40px 40px}
.stap::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;background:var(--mos);border-radius:50%;box-shadow:0 0 0 4px var(--wit)}
.stap::after{content:"";position:absolute;left:5px;top:26px;bottom:6px;width:1px;background:var(--lijn)}
.stap:nth-child(3),.stap:last-child{padding-bottom:0}
.stap:nth-child(3)::after,.stap:last-child::after{display:none}
.stap h2{font-size:clamp(17px,1.5vw,19px);font-weight:600}
.stap p{color:var(--gedempt);margin-top:6px;line-height:1.75;max-width:52ch;font-size:15px}
@media(max-width:900px){
  .stappen{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .stappenvlak{padding:32px 22px}
  .stap{padding-left:34px;padding-bottom:30px}
  .stap:nth-child(3){padding-bottom:30px}
  .stap:nth-child(3)::after{display:block}
}
/* ── drie kernpunten ── */
.kern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px}
.kern > div{background:var(--wit);border:1px solid var(--lijn-zacht);padding:28px 28px 26px}
.kern h3{font-size:18px}
.kern p{color:var(--gedempt);font-size:15px;margin-top:8px;line-height:1.7}
@media(max-width:900px){.kern{grid-template-columns:minmax(0,1fr);margin-top:36px}}

/* ── over ons ── */
.statement-k{font-size:clamp(19px,1.8vw,24px);line-height:1.28;font-weight:500;letter-spacing:-.02em;margin-top:14px;color:var(--mos)}
.duo.over-duo{align-items:start}
.waarden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.waarde{border-top:1px solid var(--messing);padding-top:22px}
.waarde h3{font-size:19px;color:var(--ivoor)}
.waarde p{color:var(--gedempt-d);font-size:15px;margin-top:10px;line-height:1.7}
@media(max-width:900px){.waarden{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ── veelgestelde vragen ── */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.faq-grid .intro h2{font-size:clamp(25px,2.4vw,34px);margin-top:12px}
.faq-grid .intro p:not(.lbl){color:var(--gedempt);margin-top:16px;max-width:40ch;line-height:1.7}
.faq details{border-bottom:1px solid var(--lijn)}
.faq details:first-of-type{border-top:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;font-size:16px;font-weight:500;letter-spacing:-.01em;position:relative;transition:color .25s;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mos)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:6px;top:50%;width:12px;height:1.5px;background:var(--mos);transition:transform .3s var(--zacht)}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(0)}
.faq .antw{padding:0 0 22px;color:var(--gedempt);font-size:15px;line-height:1.8;max-width:62ch}
.faq .antw a{color:var(--mos);text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media(max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}.faq summary{font-size:15.5px;padding:16px 40px 16px 0;min-height:44px}}

/* ── afsluitend contactblok ── */
.afspraak{background:var(--mos);color:var(--ivoor)}
.afspraak .twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.afspraak .helft{padding:76px 64px 76px 0;display:flex;flex-direction:column;align-items:flex-start}
.afspraak .helft.re{padding:76px 0 76px 64px;border-left:1px solid var(--lijn-d)}
.afspraak .lbl{color:var(--messing)}
.afspraak h2{font-size:clamp(23px,2.2vw,30px);margin-top:14px;color:var(--ivoor);font-weight:500;letter-spacing:-.025em}
.afspraak p{color:var(--gedempt-d);margin-top:12px;font-size:15.5px;max-width:42ch;line-height:1.7}
.afspraak .btn{margin-top:28px}
.afspraak .direct{margin-top:24px;display:grid;gap:2px}
.afspraak .direct a{font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.012em;color:var(--ivoor);display:inline-flex;align-items:center;min-height:44px;justify-self:start;border-bottom:1px solid transparent;transition:border-color .25s}
.afspraak .direct a:hover{border-bottom-color:var(--messing)}
@media(max-width:900px){
  .afspraak .twee{grid-template-columns:minmax(0,1fr)}
  .afspraak .helft,.afspraak .helft.re{padding:60px 0}
  .afspraak .helft.re{border-left:0;border-top:1px solid var(--lijn-d)}
}

/* ── kennisbank: overzicht ── */
.kb-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kb-kaart{background:var(--wit);border:1px solid var(--lijn-olijf);padding:30px 32px 28px;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s,transform .3s var(--zacht)}
.kb-kaart:hover{border-color:rgba(73,82,58,.35);box-shadow:var(--schaduw);transform:translateY(-2px)}
/* Artikelbeeld bovenaan de kaart, van rand tot rand en laag gehouden (4:1). */
.kb-kaartbeeld{display:block;margin:-30px -32px 22px;border-bottom:1px solid var(--lijn-olijf);overflow:hidden;background:var(--been2)}
.kb-kaartbeeld img{display:block;width:100%;height:auto;aspect-ratio:4/1;object-fit:cover;object-position:50% 50%}
/* Op een tablet staan de kaarten onder elkaar en zijn ze breed: daar nog iets lager. */
@media(min-width:601px) and (max-width:900px){.kb-kaartbeeld img{aspect-ratio:5/1}}
.kb-kaart .cat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.kb-kaart h2{font-size:clamp(17px,1.5vw,19px);line-height:1.25;letter-spacing:-.015em;margin-top:12px;font-weight:600}
.kb-kaart .kb-intro{color:var(--gedempt);font-size:14.5px;line-height:1.7;margin-top:12px;flex:1}
.kb-kaart .kb-meta{font-size:13.5px;color:var(--mos);font-weight:600;margin-top:20px}
.kb-punt{color:var(--olijf);margin:0 8px}
@media(max-width:900px){.kb-lijst{grid-template-columns:minmax(0,1fr);gap:14px}.kb-kaart{padding:26px 22px}.kb-kaartbeeld{margin:-26px -22px 18px}}
@media(prefers-reduced-motion:reduce){.kb-kaart:hover{transform:none}}

/* ── kennisbank: artikel ── */
.kb-artikel{padding:40px 0 96px}
.kb-artikel .wrap{max-width:860px}
.kruimels{font-size:13.5px;color:var(--gedempt);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.kruimels a{border-bottom:1px solid var(--lijn);padding-bottom:2px}
.kruimels a:hover{border-color:var(--mos);color:var(--mos)}
.kb-beeld{margin:24px 0 0}
.kb-beeld img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;background:var(--been2)}
.kb-kop{margin-top:28px;padding-bottom:34px;border-bottom:1px solid var(--lijn)}
.kb-tags{font-size:13px;color:var(--gedempt);display:flex;align-items:center;flex-wrap:wrap}
.kb-tags .cat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.kb-kop h1{font-size:clamp(25px,2.8vw,36px);line-height:1.1;letter-spacing:-.026em;margin-top:16px;font-weight:500}
.kb-lead{font-size:17px;color:var(--gedempt);line-height:1.7;margin-top:20px;max-width:60ch}
.kb-tekst{margin-top:38px}
.kb-tekst p{line-height:1.8;margin-top:18px;max-width:68ch}
.kb-tekst h2{font-size:clamp(18px,1.7vw,21px);line-height:1.25;letter-spacing:-.018em;margin-top:52px}
.kb-tekst h2+p{margin-top:12px}
.kb-accent{border-left:2px solid var(--mos);padding:4px 0 4px 20px;font-size:16.5px;font-weight:500;color:var(--inkt);margin-top:28px !important;max-width:54ch}
.kb-noot{font-size:13.5px;color:var(--gedempt);margin-top:12px !important;line-height:1.65}
.kb-punten{list-style:none;margin-top:16px;display:grid;gap:9px;max-width:62ch}
.kb-punten li{padding-left:20px;position:relative;line-height:1.7;color:var(--gedempt)}
.kb-punten li::before{content:"";position:absolute;left:1px;top:.7em;width:5px;height:5px;background:var(--olijf);transform:rotate(45deg)}
.kb-vink{list-style:none;margin-top:18px;display:grid;gap:11px;max-width:62ch}
.kb-vink li{padding-left:28px;position:relative;line-height:1.65}
.kb-vink li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--mos);font-weight:700;font-size:14px}
/* Vragenlijst zonder volgnummers: een ruitje in de huisstijl. */
.kb-vragen{margin-top:18px;display:grid;gap:12px;max-width:62ch;list-style:none}
.kb-vragen li{padding-left:26px;position:relative;line-height:1.65;padding-bottom:12px;border-bottom:1px solid var(--lijn-zacht)}
.kb-vragen li:last-child{border-bottom:0;padding-bottom:0}
.kb-vragen li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--mos);transform:rotate(45deg)}
.kb-pakketten{margin-top:24px;display:grid;gap:16px;max-width:62ch}
.kb-pakketten dt{font-weight:600;font-size:16px}
.kb-pakketten dd{color:var(--gedempt);line-height:1.75;margin-top:4px}
.kb-link{margin-top:24px !important}
.kb-link a{font-weight:600;font-size:15px;color:var(--mos);border-bottom:1px solid var(--mos);padding-bottom:3px}
.kb-link a:hover{color:var(--mos-hover)}
.kb-link .p{display:inline-block;transition:transform .3s var(--zacht)}
.kb-link a:hover .p{transform:translateX(4px)}
/* Tabellen: op een breed scherm rustig, op een telefoon horizontaal
   scrollbaar. Er verdwijnt geen enkele kolom. */
.kb-tabel{margin-top:22px;border:1px solid var(--lijn);overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--wit)}
.kb-tabel table{border-collapse:collapse;width:100%;font-size:14.5px}
.kb-tabel th,.kb-tabel td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--lijn-zacht);vertical-align:top;line-height:1.5}
.kb-tabel .kb-bedrag{white-space:nowrap}
.kb-tabel.kan-scrollen{box-shadow:inset -14px 0 12px -12px rgba(30,36,25,.22)}
.kb-tabel.kan-scrollen:focus-visible{outline:2px solid var(--mos);outline-offset:3px}
.kb-tabel thead th{background:var(--mos);color:var(--ivoor);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.kb-tabel tbody th{font-weight:500;white-space:normal}
.kb-tabel tbody tr:last-child th,.kb-tabel tbody tr:last-child td{border-bottom:0}
.kb-tabel td.kb-eigen{font-weight:600;color:var(--mos)}
@media(max-width:600px){
  .kb-tabel table{font-size:14px}
  .kb-tabel th,.kb-tabel td{padding:11px 10px}
  .kb-tabel thead th{font-size:11px;letter-spacing:.04em}
}
@media(max-width:480px){
  .kb-tabel table{font-size:13.5px}
  .kb-tabel th,.kb-tabel td{padding:10px 7px}
  .kb-tabel th:first-child,.kb-tabel td:first-child{padding-left:10px}
  .kb-tabel thead th{font-size:11px;letter-spacing:0}
}
.kb-slot{margin-top:56px;padding:36px 38px;background:var(--mos);color:var(--ivoor)}
.kb-slotvraag{font-size:clamp(18px,1.7vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.3;max-width:34ch;color:var(--ivoor)}
.kb-slotknoppen{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.kb-slot .btn-donker{background:var(--ivoor);color:var(--diep)}
.kb-slot .btn-donker:hover{background:var(--wit)}
.kb-slot .btn-lijn{border-color:var(--lijn-d);color:var(--ivoor)}
.kb-slot .btn-lijn:hover{background:transparent;border-color:var(--ivoor)}
.kb-leesook{margin-top:48px;padding-top:24px;border-top:1px solid var(--lijn)}
.kb-leesook ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.kb-leesook li a{font-size:15.5px;font-weight:500;color:var(--mos);border-bottom:1px solid var(--lijn);padding-bottom:3px;line-height:1.5;display:inline-block}
.kb-leesook li a:hover{border-color:var(--mos)}
.kb-bronnen{margin-top:52px;padding-top:28px;border-top:1px solid var(--lijn);font-size:14px;color:var(--gedempt)}
.kb-bronkop{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.kb-bronnen p{margin-top:12px;line-height:1.7;max-width:66ch}
.kb-bronnen ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.kb-bronnen li a{border-bottom:1px solid var(--lijn);padding-bottom:2px;color:var(--inkt)}
.kb-bronnen li a:hover{border-color:var(--mos);color:var(--mos)}
.kb-ext{font-size:12px;color:var(--gedempt)}
.kb-disclaimer{margin-top:18px;font-size:13px;font-style:normal;color:var(--gedempt)}
@media(max-width:1080px){
  /* Links in het artikel moeten met een vinger te raken zijn. */
  .kruimels a,.kb-link a,.kb-bronnen li a,.kb-leesook li a{display:inline-flex;align-items:center;min-height:44px}
  .kruimels{gap:4px}
  .kb-bronnen ul{gap:0}
}
@media(max-width:720px){
  .kb-artikel{padding:32px 0 64px}
  .kb-slot{padding:28px 22px}
  .kb-tekst p,.kb-lead{font-size:16px}
  .kb-slotknoppen .btn{width:100%}
}

/* ── formulieren ── */
.c-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
@media(max-width:900px){.c-grid{grid-template-columns:minmax(0,1fr);gap:44px}}
.formvlak{background:var(--wit);border:1px solid var(--lijn-zacht);padding:40px 40px 36px}
@media(max-width:720px){.formvlak{padding:26px 18px 24px}}
form{display:grid;gap:22px}
.f-label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt);font-weight:600;margin-bottom:8px}
.f-input{width:100%;min-height:48px;padding:11px 14px;font-size:16px;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);outline:none;border-radius:0;font-family:var(--sans);transition:border-color .25s,box-shadow .25s}
.f-input:hover{border-color:rgba(30,36,25,.28)}
.f-input:focus{border-color:var(--mos);box-shadow:0 0 0 3px rgba(73,82,58,.12)}
.f-input::placeholder{color:#75786A}
textarea.f-input{resize:vertical;min-height:124px;line-height:1.6}
.f-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media(max-width:640px){.f-duo{grid-template-columns:minmax(0,1fr)}}
fieldset{border:none;min-width:0}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opts label{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font-size:14px;font-weight:500;border:1px solid var(--lijn);background:var(--wit);cursor:pointer;transition:all .2s}
.opts label:hover{border-color:rgba(73,82,58,.5)}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts label:has(input:checked){background:var(--mos);color:var(--ivoor);border-color:var(--mos)}
.opts label:has(input:focus-visible){outline:2px solid var(--mos);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--gedempt);cursor:pointer;line-height:1.6}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--mos)}
.consent a{color:var(--mos);text-decoration:underline;text-underline-offset:2px}
/* Het vinkje is een verplichte keuze; op een aanraakscherm moet het hele
   label met een vinger te raken zijn. */
@media(max-width:1080px){.consent{min-height:44px;align-items:center;padding:4px 0}.consent input{margin-top:0;width:20px;height:20px;flex-basis:20px}}
.f-voet{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.f-voet .note{font-size:13.5px;color:var(--gedempt)}
.f-fout{margin-top:18px;padding:14px 18px;border:1px solid #8C3A2B;color:#8C3A2B;font-size:14.5px;line-height:1.6;background:var(--wit)}
.f-extra{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.f-extra>summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:center;min-height:50px;padding:6px 36px 6px 0}
.f-extra>summary::-webkit-details-marker{display:none}
.f-extra>summary .f-label{margin:0;transition:color .25s}
.f-extra>summary:hover .f-label{color:var(--mos)}
.f-extra>summary::after,.f-extra>summary::before{content:"";position:absolute;right:6px;top:50%;width:12px;height:1.5px;background:var(--mos);transition:transform .3s var(--zacht)}
.f-extra>summary::before{transform:rotate(90deg)}
.f-extra[open]>summary::before{transform:rotate(0)}
.f-extra .f-extra-in{display:grid;gap:20px;padding:10px 0 22px}
.c-info{display:grid;gap:0;background:var(--wit);border:1px solid var(--lijn-zacht);padding:14px 32px 18px}
.c-info .blok:first-of-type{border-top:0}
.c-info .beeld{margin-bottom:28px}
.c-info .blok{padding:18px 0;border-top:1px solid var(--lijn)}
.c-info .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--olijf-tekst);font-weight:600;margin-bottom:4px}
.c-info .groot{font-size:18px;font-weight:500;letter-spacing:-.012em;display:inline-block;color:var(--inkt);transition:color .25s}
.c-info a.groot:hover{color:var(--mos)}
.c-info address{font-style:normal;font-size:15.5px;color:var(--gedempt);line-height:1.7}
.c-info .reg{font-size:15px;color:var(--gedempt);line-height:1.75}
@media(max-width:1080px){.c-info a.groot{min-height:44px;display:inline-flex;align-items:center}}
.bedankt{background:var(--wit);border:1px solid var(--lijn-zacht);padding:48px 40px;text-align:center}
.bedankt h2{font-size:24px}
.bedankt p{color:var(--gedempt);margin-top:12px;max-width:46ch;margin-left:auto;margin-right:auto}

/* ── juridisch ── */
.lg{max-width:820px}
.lg :is(h2,h3){font-size:clamp(19px,1.8vw,22px);margin:42px 0 12px;line-height:1.2;letter-spacing:-.016em}
.lg p{font-size:15.5px;color:var(--gedempt);margin-bottom:10px;line-height:1.8}
.lg p strong{color:var(--inkt);font-weight:600}
.lg .defs{display:grid;gap:9px;margin:8px 0 13px;padding-left:20px;border-left:2px solid var(--olijf)}
.lg ul.ab{list-style:none;margin:6px 0 13px;display:grid;gap:7px}
.lg ul.ab li{display:flex;gap:13px;font-size:15.5px;color:var(--gedempt);line-height:1.6}
.lg ul.ab .l{flex:0 0 20px;color:var(--mos);font-weight:700;font-size:13.5px;padding-top:2px}
.lg ul.st{list-style:none;margin:6px 0 13px;display:grid;gap:8px}
.lg ul.st li{padding-left:22px;position:relative;font-size:15.5px;color:var(--gedempt)}
.lg ul.st li::before{content:"";position:absolute;left:1px;top:.7em;width:5px;height:5px;background:var(--olijf);transform:rotate(45deg)}
.lg .lg-card{background:var(--wit);border:1px solid var(--lijn-zacht);padding:24px 28px;margin:13px 0 19px}
.lg .lg-card .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--olijf-tekst);font-weight:600;margin-bottom:10px}
.lg .lg-card p{line-height:1.9;margin:0}
.taalnoot{max-width:820px;margin:0 0 30px;background:var(--wit);border:1px solid var(--lijn);border-left:2px solid var(--mos);padding:16px 22px;font-size:14.5px;color:var(--gedempt)}
.lg-voet{max-width:820px;margin:52px 0 0;border-top:1px solid var(--lijn);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.lg-voet p{color:var(--gedempt);font-size:15px}

/* ── voettekst ── */
footer{background:var(--been2);border-top:1px solid var(--lijn-zacht);padding:72px 0 0}
.voet-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:56px;align-items:start}
.voet-grid .merk a{display:inline-block}
.voet-grid .merk img{height:84px;width:auto;max-width:none;display:block}
.voet-grid .merk p{color:var(--gedempt);font-size:14.5px;margin-top:18px;max-width:320px;line-height:1.7}
.voet-grid .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst);margin-bottom:14px}
.voet-grid ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--gedempt)}
.voet-grid ul a{transition:color .25s}
.voet-grid ul a:hover{color:var(--mos)}
.voet-grid ul.soc{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:24px}
.voet-grid ul.soc a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--lijn);color:var(--mos);transition:all .25s}
.voet-grid ul.soc a:hover{background:var(--mos);border-color:var(--mos);color:var(--ivoor)}
.voet-grid ul.soc svg{width:17px;height:17px;display:block}
.voet-base{margin-top:56px;border-top:1px solid var(--lijn);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--gedempt)}
.voet-base .links{display:flex;gap:24px;flex-wrap:wrap}
.voet-base a:hover{color:var(--mos)}
@media(max-width:900px){
  footer{padding-top:56px}
  .voet-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .voet-grid .merk img{height:70px}
}
/* Op aanraakschermen moeten de links in de voettekst met een vinger te raken zijn. */
@media(max-width:1080px){
  .voet-grid ul:not(.soc){gap:2px}
  .voet-grid ul:not(.soc) a,.voet-base .links a{display:inline-flex;align-items:center;min-height:44px}
  .voet-base{padding:12px 0 20px}
  .voet-base .links{gap:22px}
}

/* ── over ons: tekst links, beeld van de entree rechts ── */
.overkop .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:72px}
.overkop .overtuiging{margin-top:40px}
.overkop .overkop-alinea p{color:var(--gedempt);margin-top:14px;line-height:1.8;max-width:60ch}
.overkop .overkop-alinea{margin-top:6px}
.overbeeld{margin:0}
.overbeeld img{display:block;width:100%;height:auto;background:var(--been2)}
@media(max-width:900px){
  .overkop .wrap{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .overbeeld{max-width:560px}
}
/* ── contact: het visitekaartje naast de paginakop ── */
.contactkop .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:72px}
.contactkop .lead{margin-top:20px}
.visitekaartje{margin:0;justify-self:end;width:100%;max-width:560px}
/* Olijfgroene rand rond het hele kaartje, in de kleur van het logo, zodat het
   visitekaartje opvalt naast de paginakop. */
.visitekaartje img{display:block;width:100%;height:auto;border:3px solid var(--olijf);box-shadow:0 1px 2px rgba(30,36,25,.06),0 30px 60px -32px rgba(30,36,25,.5)}
@media(max-width:900px){
  .contactkop .wrap{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .visitekaartje{justify-self:start}
}

/* ── verder lezen in de kennisbank ── */
.leesverder{margin-top:56px;padding:30px 34px;background:var(--wit);border:1px solid var(--lijn-olijf)}
.leesverder ul{list-style:none;margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 36px}
.leesverder a{display:inline-flex;align-items:center;min-height:44px;color:var(--mos);font-weight:500;font-size:15.5px;line-height:1.4;text-decoration:underline;text-decoration-color:rgba(73,82,58,.35);text-underline-offset:4px;transition:text-decoration-color .25s}
.leesverder a:hover{text-decoration-color:var(--mos)}
.leesook-zin a{color:var(--mos);text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media(max-width:720px){.leesverder{padding:24px 20px}.leesverder ul{grid-template-columns:minmax(0,1fr)}}
/* ── zeer smalle telefoons ── */
@media(max-width:380px){
  .wrap{padding:0 18px}
  .nav{padding:0 18px}
  .afspraak .btn,.knoppen-midden .btn{width:100%}
}
/* liggend op een telefoon: kop niet onnodig hoog */
@media(max-height:560px) and (orientation:landscape){
  .stappen-beeld{position:static}
}

/* ── rustige opkomst bij scrollen ── */
/* Alleen verbergen als het script draait (klasse js op html). Zonder script, of
   als het niet laadt, blijft alle inhoud gewoon zichtbaar. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--zacht),transform .9s var(--zacht)}
.js .rv.in{opacity:1;transform:none}
.op{opacity:0;transform:translateY(12px);animation:opkomst .9s var(--zacht) forwards}
@keyframes opkomst{to{opacity:1;transform:none}}
.op.d1{animation-delay:.05s}.op.d2{animation-delay:.15s}.op.d3{animation-delay:.25s}.op.d4{animation-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .op{opacity:1;transform:none;animation:none}
}

/* PRIJZEN-CSS:START */
/* ── prijzenpagina, gegenereerd door maak-prijzen.pl ──
   Opbouw (oktober 2026): één keuze (de rechtsvorm), direct daaronder de drie
   pakketten met prijs en inhoud, en daaronder wat altijd is inbegrepen plus een
   rekenvoorbeeld. Details staan in uitklapblokken, zodat de pagina rustig blijft. */
.stapkop{text-align:center;max-width:64ch;margin:0 auto}
.stapkop h2{font-size:clamp(25px,2.4vw,34px);line-height:1.1;letter-spacing:-.026em;font-weight:500}
.stapkop p.uitleg{color:var(--gedempt);margin-top:12px;line-height:1.75;font-size:16px}
.stapkop .knoppen{justify-content:center;margin-top:28px}
.beeldwrap{padding-bottom:72px}
@media(max-width:900px){.beeldwrap{padding-bottom:52px}}

/* rechtsvorm: één schakelaar boven de pakketten */
.keuze{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.keuze h2{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em}
.vormkeuze{display:inline-flex;border:1px solid var(--mos);background:var(--wit)}
.vormkeuze button{font-family:var(--sans);font-size:15px;font-weight:600;min-height:48px;padding:10px 32px;border:0;background:transparent;color:var(--mos);cursor:pointer;transition:background .2s,color .2s}
.vormkeuze button+button{border-left:1px solid var(--lijn-olijf)}
.vormkeuze button:hover:not([aria-pressed="true"]){background:var(--been)}
.vormkeuze button[aria-pressed="true"]{background:var(--mos);color:var(--ivoor)}
.keuze .btwregel{font-size:14px;color:var(--gedempt)}

/* drie pakketten. Elke kaart deelt dezelfde zes rijen, zodat prijs, inhoud en
   knop in alle drie de kaarten precies op dezelfde hoogte staan. */
.pakketten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:20px;row-gap:0;margin-top:48px}
.pakket{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;background:var(--wit);border:1px solid var(--lijn-olijf);padding:34px 30px 30px;position:relative}
.pakket h3{font-size:22px;letter-spacing:-.02em;font-weight:600}
.pakket .belofte{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst);margin-top:6px}
.pakket .prijsregel{margin-top:22px;padding-bottom:20px;border-bottom:1px solid var(--lijn)}
.pakket .bedrag{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pakket .bedrag .b{font-size:40px;font-weight:500;letter-spacing:-.035em;line-height:1}
.pakket .bedrag .per{font-size:14px;color:var(--gedempt)}
.pakket .btwnoot{font-size:13px;color:var(--gedempt);margin-top:6px}
.pakket p.voor{color:var(--gedempt);font-size:14.5px;line-height:1.6;margin-top:18px}
.pakket .inhoud{margin-top:20px}
.pakket .plus{font-weight:600;font-size:14.5px;color:var(--mos);margin-bottom:12px}
.pakket ul{list-style:none;display:grid;gap:10px}
.pakket li{font-size:14.5px;line-height:1.45;padding-left:28px;position:relative}
.pakket li::before{content:"";position:absolute;left:0;top:.08em;width:18px;height:18px;border-radius:50%;background:var(--mos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23F3F0E4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pakket p.niet{font-size:13px;color:var(--gedempt);line-height:1.55;margin-top:22px;padding-top:16px;border-top:1px solid var(--lijn-zacht)}
.pakket a.vraag{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:22px;font-size:15px;font-weight:600;background:var(--mos);color:var(--ivoor);transition:background .25s}
.pakket a.vraag:hover{background:var(--mos-hover)}
.pakket .vlag{position:absolute;top:0;left:30px;transform:translateY(-50%);background:var(--messing);color:var(--diep);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:6px 12px}
/* het aanbevolen pakket in mosgroen */
.pakket.aanbevolen{background:var(--mos);color:var(--ivoor);border-color:var(--mos);box-shadow:var(--schaduw)}
.pakket.aanbevolen h3{color:var(--ivoor)}
.pakket.aanbevolen .belofte,.pakket.aanbevolen .plus{color:var(--messing)}
.pakket.aanbevolen .per,.pakket.aanbevolen .btwnoot,.pakket.aanbevolen p.voor,.pakket.aanbevolen p.niet{color:var(--gedempt-d)}
.pakket.aanbevolen .prijsregel,.pakket.aanbevolen p.niet{border-color:var(--lijn-d)}
.pakket.aanbevolen li::before{background-color:var(--messing);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%232F3626' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pakket.aanbevolen a.vraag{background:var(--ivoor);color:var(--diep)}
.pakket.aanbevolen a.vraag:hover{background:var(--wit)}

/* onder de pakketten: wat altijd is inbegrepen, en wat u samen betaalt */
.onderpakket{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:stretch}
.vorminfo,.rekenvak{background:var(--wit);border:1px solid var(--lijn-zacht);padding:26px 30px}
.vorminfo .k,.rekenvak .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.vorminfo ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.vorminfo li{font-size:15px;line-height:1.5;padding-left:26px;position:relative}
.vorminfo li::before{content:"";position:absolute;left:0;top:.12em;width:16px;height:16px;border-radius:50%;background:var(--mos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23F3F0E4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.leesook-zin{margin-top:16px;font-size:14.5px;color:var(--gedempt);line-height:1.6}
.stapkop .leesook-zin{margin-top:12px}
.reken{margin-top:14px;border:1px solid var(--lijn-zacht)}
.reken .rij{display:flex;justify-content:space-between;gap:18px;padding:13px 18px;border-bottom:1px solid var(--lijn-zacht);font-size:15px}
.reken .rij .ext{display:block;font-size:13px;color:var(--gedempt);margin-top:2px}
.reken .rij .bd{font-weight:600;white-space:nowrap}
.reken .rij.tot{background:var(--mos);color:var(--ivoor);border-bottom:0;font-weight:600}
.reken .rij.tot .bd{font-size:17px}
.rekennoot{font-size:13.5px;color:var(--gedempt);margin-top:12px;line-height:1.6}
.prijsnoot{text-align:center;max-width:70ch;margin:24px auto 0}

/* uitklapblokken voor details */
.uitklappen{margin-top:28px;display:grid;gap:12px}
.uitklap{background:var(--wit);border:1px solid var(--lijn-olijf)}
.uitklap>summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:center;min-height:56px;padding:14px 56px 14px 24px;font-weight:600;font-size:15px;color:var(--mos);transition:background .25s}
.uitklap>summary::-webkit-details-marker{display:none}
.uitklap>summary:hover{background:rgba(234,223,204,.45)}
.uitklap>summary::after,.uitklap>summary::before{content:"";position:absolute;right:24px;top:50%;width:12px;height:1.5px;background:var(--mos);transition:transform .3s}
.uitklap>summary::before{transform:rotate(90deg)}
.uitklap[open]>summary::before{transform:rotate(0)}
.uitklap>*:not(summary){margin:4px 24px 24px}
.vergelijk{margin-top:28px}

/* vergelijkingstabel (in een uitklapblok) */
.tabelhoes{overflow-x:auto;border:1px solid var(--lijn);background:var(--wit)}
/* Past de tabel niet (telefoon), dan een schaduw rechts en een tabstop, zie controleerTabellen. */
.tabelhoes.kan-scrollen{box-shadow:inset -14px 0 12px -12px rgba(30,36,25,.22)}
.tabelhoes.kan-scrollen:focus-visible{outline:2px solid var(--mos);outline-offset:3px}
table.verg{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
table.verg th,table.verg td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--lijn-zacht);vertical-align:top}
table.verg thead th{background:var(--mos);color:var(--ivoor);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
table.verg tbody th{font-weight:400;color:var(--inkt);width:40%}
table.verg tbody tr:nth-child(even){background:rgba(234,223,204,.35)}
table.verg td{text-align:center;color:var(--gedempt)}
table.verg td.ja{color:var(--mos);font-weight:700;font-size:15px}
table.verg td.nee{color:var(--gedempt);opacity:.6}
table.verg tbody tr:last-child th,table.verg tbody tr:last-child td{border-bottom:0}

/* aanvullende tarieven: raster van drie bij drie */
.tarieven{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.tarief{background:var(--wit);border:1px solid var(--lijn-zacht);padding:20px 22px;display:flex;flex-direction:column}
.tarief .naam{font-weight:600;font-size:15px;line-height:1.35}
.tarief .prijs{margin-top:8px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.tarief .prijs .b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--mos)}
.tarief .prijs .e{font-size:13px;color:var(--gedempt)}
.tarief .uitleg{color:var(--gedempt);font-size:14px;margin-top:8px;line-height:1.55}
.vormnoot{text-align:center;color:var(--gedempt);font-size:14.5px;margin-top:22px;max-width:66ch;margin-inline:auto;line-height:1.7}

/* software: één prijstabel, details uitklapbaar */
.softhoes{margin-top:36px}
.softtabel{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
.softtabel th,.softtabel td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--lijn-zacht);vertical-align:top}
.softtabel thead th{background:var(--mos);color:var(--ivoor);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.softtabel tbody th{font-weight:400;width:34%}
.softtabel tbody th .naam{display:block;font-weight:600;font-size:15px;color:var(--inkt)}
.softtabel .tech{display:block;font-size:13px;color:var(--gedempt);margin-top:2px}
.softtabel .vlagje{display:inline-block;margin-top:6px;background:var(--mos);color:var(--ivoor);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:3px 8px}
.softtabel .bedragcel{white-space:nowrap}
.softtabel .bedragcel .b{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--mos)}
.softtabel .bedragcel .per{font-size:13px;color:var(--gedempt)}
.softtabel td.voor{color:var(--gedempt);line-height:1.6}
.softtabel tbody tr:last-child th,.softtabel tbody tr:last-child td{border-bottom:0}
.soft{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.softkaart{background:var(--been);border:1px solid var(--lijn-zacht);padding:20px 20px 18px}
.softkaart h3{font-size:16px;letter-spacing:-.01em}
.softkaart .tech{font-size:13px;color:var(--gedempt);margin-top:2px}
.softkaart p.voor{font-size:14px;color:var(--gedempt);margin-top:8px;line-height:1.55}
.softkaart ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.softkaart li{font-size:14px;padding-left:16px;position:relative;line-height:1.45}
.softkaart li::before{content:"";position:absolute;left:1px;top:.55em;width:5px;height:5px;background:var(--olijf);transform:rotate(45deg)}
.scheiding{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.scheiding > div{background:var(--been);border:1px solid var(--lijn-zacht);padding:22px 24px}
.scheiding .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--olijf-tekst)}
.scheiding h3{font-size:17px;margin-top:8px}
.scheiding p{color:var(--gedempt);font-size:14.5px;margin-top:8px;line-height:1.65}
.uitklap .vormnoot{text-align:left;max-width:none;margin-inline:0}

.prijsfaq{max-width:860px;margin:36px auto 0}

/* afsluiting in mosgroen */
.blok-groen .stapkop h2{color:var(--ivoor)}
.blok-groen .stapkop p.uitleg{color:var(--gedempt-d)}

@media(max-width:1000px){
  .pakketten{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:28px;max-width:560px;margin-inline:auto}
  .pakket{display:flex;flex-direction:column;grid-row:auto}
  .onderpakket{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .tarieven{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soft,.scheiding{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){.tarieven{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
  .vormkeuze{display:flex;width:100%}
  .vormkeuze button{flex:1;padding:10px 8px}
  .pakket{padding:32px 22px 24px}
  .pakket .bedrag .b{font-size:34px}
  .vorminfo,.rekenvak{padding:22px 18px}
  .uitklap>summary{padding:14px 48px 14px 16px}
  .uitklap>*:not(summary){margin:4px 14px 18px}
}
/* PRIJZEN-CSS:EIND */