/* ==========================================================================
   Goodtomeet · site.css
   Eén stylesheet voor alle pagina's. Richting vastgesteld op 10 augustus:
   lichte basis, palet inktzwart / Pruisisch blauw / ijs-aqua / oceaanblauw /
   lila-as, hoofdknop donker oceaanblauw met wit (5,7:1), pilvormige knoppen,
   ruime signploeg-maat, levend Velaris-verloop als beeldtaal.
   Contrast nagerekend: inkt op wit 18,6:1 · muted 7,8:1 · ocean-donker wit
   5,7:1 · accenttekst op tint minimaal 5,2:1.
   ========================================================================== */
:root{
  --ink:#0D0C1D;            /* inktzwart */
  --surface:#161B33;        /* Pruisisch blauw, donkere panelen */
  --text:#0D0C1D;
  --muted:#5C566B;          /* 7,8:1 op wit */
  --acc:#B2ECE1;            /* ijs-aqua, markeringen en accenten op donker */
  --ocean:#2E86AB;          /* oceaanblauw, groot accent en logo-mond */
  --ocean-donker:#1F6E93;   /* knoppen en accenttekst op licht, wit erop 5,7:1 */
  --lila:#A69CAC;
  --wit:#FFFFFF;
  --zacht:#F6F8F9;          /* afwisselende lichte sectie */
  --aquatint:#EAF8F4;
  --oceantint:#EAF3F8;
  --lilatint:#F3F1F6;
  --line:#E3E4EA;
  --roze:#F7E9EE;           /* handwerk in de procesplaat */
  --roze-rand:#D9A9BC;
  --roze-tekst:#96435F;     /* 5,6:1 op de roze tint */
  --schaduw:0 30px 70px -30px rgba(13,12,29,.28), 0 4px 12px -6px rgba(13,12,29,.10);
  --wrap:1400px; --gutter:48px; --sec:104px;
  --font:'Poppins',system-ui,-apple-system,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
/* De zijmarge en de hoogte van een sectie lopen mee met het scherm. Vier
   stappen in plaats van één, want het verschil tussen een tablet van 800 en
   een telefoon van 360 is groter dan het verschil tussen 1400 en 1000. */
@media (max-width:1080px){ :root{ --gutter:32px; --sec:80px; } }
@media (max-width:820px) { :root{ --gutter:24px; --sec:64px; } }
@media (max-width:560px) { :root{ --gutter:20px; --sec:52px; } }
@media (max-width:380px) { :root{ --gutter:16px; --sec:44px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--wit);color:var(--text);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ocean-donker)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,[role=tab]:focus-visible{
  outline:2px solid var(--ocean-donker);outline-offset:3px;border-radius:6px}
.donker a:focus-visible,.donker button:focus-visible{outline-color:var(--acc)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;font-family:var(--mono);font-size:14px;z-index:100}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--sec) 0}

/* ── typografie ────────────────────────────────────────────────────────── */
h1{font-weight:900;font-size:clamp(42px,5vw,76px);line-height:1.0;
  letter-spacing:-0.04em;margin:0 0 30px;max-width:15ch}
h2{font-weight:900;font-size:clamp(28px,3.4vw,48px);line-height:1.06;
  letter-spacing:-0.032em;margin:0 0 14px}
h3{font-weight:700;font-size:21px;line-height:1.3;margin:0 0 10px}
h1 em,h2 em{font-style:normal;color:var(--ocean)}
p{margin:0 0 18px}
.lead{font-size:19px;color:var(--muted);max-width:52ch;margin:0 0 18px}
.small{font-size:15px;color:var(--muted)}
mark{background:var(--acc);color:var(--ink);padding:1px 6px;border-radius:6px}
.lab{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;font-weight:700;display:flex;align-items:center;gap:10px}
.lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ocean);flex:0 0 8px}
.donker .lab::before,.band .lab::before{background:var(--acc)}
.chiplab{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ocean-donker);font-weight:700;
  background:var(--oceantint);border-radius:99px;padding:9px 18px;margin:0 0 28px}
.chiplab i{width:8px;height:8px;border-radius:50%;background:var(--ocean);font-style:normal}
.mono{font-family:var(--mono)}

/* ── achtergronden ─────────────────────────────────────────────────────── */
.bg-zacht{background:var(--zacht)}
.donker{background:var(--ink);color:#F2F3F7}
.donker h1,.donker h2,.donker h3{color:#fff}
.donker .lead,.donker .small{color:var(--lila)}
.donker .lab{color:var(--lila)}

/* ── knoppen ───────────────────────────────────────────────────────────── */
.btn{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:14px 26px;border-radius:99px;text-decoration:none;display:inline-block;
  border:none;cursor:pointer;background:var(--ocean-donker);color:#fff;line-height:1.3;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{background:#1A5F80;color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(31,110,147,.55)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn svg{transition:transform .18s ease}
.btn:hover svg.na{transform:translateX(3px)}
/* de ademende halo om de hoofdactie, naar de button-pulse uit BRIEF 15 */
@media (prefers-reduced-motion:no-preference){
  .btn-puls{animation:halo 4s ease-in-out infinite}
  @keyframes halo{0%,100%{box-shadow:0 0 0 5px rgba(31,110,147,.28)}50%{box-shadow:0 0 0 14px rgba(31,110,147,.10)}}
  .btn-puls:hover{animation-play-state:paused}
}
.btn-wit{background:#fff;color:var(--ink)}
.btn-wit:hover{background:var(--acc);color:var(--ink)}
.btn-lijn{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-lijn:hover{background:var(--ink);color:#fff}
.donker .btn-lijn{color:#fff;border-color:rgba(255,255,255,.55)}
.donker .btn-lijn:hover{background:#fff;color:var(--ink)}
.lijnlink{font-weight:700;font-size:16px;color:var(--ink);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--ocean)}
.donker .lijnlink{color:#fff}
.knoppenrij{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* ── kop van de site ───────────────────────────────────────────────────── */
.kop{height:88px;display:flex;align-items:center;background:var(--wit);
  position:sticky;top:0;z-index:60;border-bottom:1px solid transparent}
.kop.rand{border-bottom-color:var(--line)}
.kop .wrap{width:100%;display:flex;align-items:center;justify-content:space-between}
.logotype{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.logotype svg{width:34px;height:34px;display:block}
.logotype b{font-weight:900;font-size:22px;letter-spacing:-0.03em;white-space:nowrap}
.logotype i{font-style:normal;display:inline-block;width:.22em;height:.22em;border-radius:50%;
  background:var(--ocean);vertical-align:baseline;margin-left:.09em}
.logotype b span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .kop .logotype b span{animation:klapletter 6s ease-in-out infinite;transform-origin:50% 60%}
  @keyframes klapletter{10%{transform:rotateX(90deg) skew(0deg,8deg)}20%,100%{transform:none}}
}
.menu{display:flex;align-items:center;gap:40px}
.menu a{font-size:15.5px;color:inherit;text-decoration:none;opacity:.8}
.menu a:hover{opacity:1}
.menu a.btn{opacity:1;color:#fff}
.menu a[aria-current=page]{opacity:1;font-weight:700}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{padding:72px 0 0;position:relative;overflow:hidden}
/* luminous topography: drijvende contourlijnen, oplichtend rond de cursor */
.topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* De basislaag stond op 9 procent dekking. Op wit is dat vrijwel niets,
   waardoor het leek alsof de achtergrond uit stond en alleen de glans onder
   de cursor iets liet zien. Op een telefoon, waar geen cursor is, zag je dus
   helemaal niets. De lijnen liggen nu altijd zacht in beeld en deinen mee. */
.topo.basis path{stroke:rgba(46,134,171,.20);stroke-width:1.15}
.topo.glans path{stroke:rgba(31,110,147,.42);stroke-width:1.25}
.topo.glans{opacity:0;transition:opacity .4s;
  -webkit-mask-image:radial-gradient(240px at var(--mx,50%) var(--my,50%), #000 0%, transparent 75%);
  mask-image:radial-gradient(240px at var(--mx,50%) var(--my,50%), #000 0%, transparent 75%)}
.hero:hover .topo.glans{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .topo path{animation:drijf 26s ease-in-out infinite alternate}
  .topo path:nth-child(2n){animation-duration:32s;animation-direction:alternate-reverse}
  .topo path:nth-child(3n){animation-duration:38s}
  @keyframes drijf{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
}
/* minmax(0,…fr): de kolombreedte kijkt niet naar de inhoud. Anders schuift
   de kolomgrens (en dus de kaartenstapel) mee met de breedte van het
   tikkerwoord, en dat was precies het verspringen. */
.herorooster{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:64px;align-items:start;position:relative}
/* iets kleiner dan de standaard h1, zodat de kop vrij blijft van de kaarten */
.herorooster h1{min-height:2.05em;font-size:clamp(38px,4.3vw,62px)}
/* de kop is altijd precies twee regels: "AI-developers voor" breekt niet,
   en het wisselwoord staat op zijn eigen regel (zie .tikker) */
@media (min-width:821px){.herorooster h1{white-space:nowrap}}
.herorooster .stapel{margin-top:34px}
/* in de hero ligt de laatste kaart (Goodtomeet) bovenop, zoals in het voorbeeld */
.stapel.voorlaatst .skaart:nth-child(1){z-index:-2}
.stapel.voorlaatst .skaart:nth-child(2){z-index:-1}
.stapel.voorlaatst .skaart:nth-child(3){z-index:1}
/* geen sluiers in deze variant: de achterste kaarten tonen alleen hun
   kopregel, de rest van de tekst verschijnt pas wanneer de kaart bij
   hover boven de stapel komt. Zo steken er geen halve woorden uit. */
.stapel.voorlaatst .skaart::after{display:none}
.stapel.voorlaatst .skaart:nth-child(1) .sgroot,.stapel.voorlaatst .skaart:nth-child(1) .sklein,
.stapel.voorlaatst .skaart:nth-child(2) .sgroot,.stapel.voorlaatst .skaart:nth-child(2) .sklein{
  opacity:0;transition:opacity .35s}
/* aanwijzen haalt een achterste kaart naar voren en toont de tekst; de
   kaart zelf verschuift daarbij niet, dus de stapel blijft rustig */
.stapel.voorlaatst .skaart:nth-child(1):hover,.stapel.voorlaatst .skaart:nth-child(2):hover{z-index:2}
.stapel.voorlaatst .skaart:hover .sgroot,.stapel.voorlaatst .skaart:hover .sklein{opacity:1}
/* in de hero niets afknippen: de stapel mag desnoods iets over de rand van
   de kolom heen, de hero zelf vangt dat op. Geen wit verloop overheen. */
.hero .stapel{padding:24px 8px 96px 8px;overflow:visible}
.hero .stapel::after{display:none}
/* op middelbrede schermen is de kolom smaller: de kaarten schalen mee */
@media (max-width:1260px) and (min-width:1081px){
  .hero .skaart{width:300px}
  .hero .skaart:nth-child(2){transform:skewY(-8deg) translate(52px,40px)}
  .hero .skaart:nth-child(3){transform:skewY(-8deg) translate(104px,80px)}
}
.skaart .sicoon.geel{background:var(--acc)}
.skaart .sicoon.geel svg{color:var(--ink)}
.skaart .skop .punt{display:inline-block;width:.22em;height:.22em;border-radius:50%;
  background:var(--ocean);vertical-align:baseline;margin-left:.06em}

/* losse foto met ronde hoeken, zonder donker kader */
.fotolos{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--schaduw)}
.fotolos img{width:100%;height:460px;object-fit:cover;object-position:center 35%}
.livechip{position:absolute;bottom:18px;left:18px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:#fff;background:rgba(13,12,29,.72);border:1px solid rgba(255,255,255,.25);
  border-radius:99px;padding:9px 16px;backdrop-filter:blur(6px)}
.livechip i{width:9px;height:9px;border-radius:50%;background:#3ED598;font-style:normal}
@media (prefers-reduced-motion:no-preference){
  .livechip i{animation:puls 2.4s ease-in-out infinite}
}

/* ── over-blok: het beeldpaneel met het verhaal van Goodtomeet ─────────── */
.overblok{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
@media (max-width:1080px){.overblok{grid-template-columns:1fr;gap:40px}}
.hero .rooster{display:grid;grid-template-columns:1.02fr .98fr;gap:88px;align-items:center;position:relative}
.paginarooster{display:grid;grid-template-columns:1.02fr .98fr;gap:88px;align-items:start}
.paginarooster.midden{align-items:center}
.hero .lead{font-size:18px;max-width:47ch;margin-bottom:38px}

/* beeldpaneel met levend verloop */
.leefpaneel{border-radius:26px;overflow:hidden;background:var(--ink);padding:34px;
  box-shadow:var(--schaduw);position:relative}
.leefpaneel .foto{position:relative;border-radius:16px;overflow:hidden;
  outline:1px solid rgba(255,255,255,.22)}
.leefpaneel .foto img{width:100%;height:400px;object-fit:cover;object-position:center 35%}
.glaschip{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:#fff;
  background:rgba(13,12,29,.72);border:1px solid rgba(255,255,255,.25);
  border-radius:12px;padding:12px 16px;backdrop-filter:blur(6px)}
.glaschip b{font-size:15px;color:var(--acc)}

/* statblokken */
.stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:64px 0 0;padding:0 0 72px}
.stat{border-radius:14px;padding:22px 24px;background:var(--aquatint)}
.stat:nth-child(2){background:var(--oceantint)}
.stat:nth-child(3){background:var(--lilatint)}
.stat b{display:block;font-family:var(--mono);font-weight:700;font-size:24px;
  letter-spacing:-0.01em;color:var(--ocean-donker);margin-bottom:4px}
.stat:nth-child(3) b{color:#5A4E6B}
.stat span{font-size:14.5px;color:var(--muted)}

/* ── waarom wij: drie genummerde beweringen ────────────────────────────── */
.waarom{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.waarom .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.waarom .kolom{padding:44px 40px 44px 0;border-right:1px solid var(--line)}
.waarom .kolom:last-child{border-right:none;padding-right:0}
.waarom .kolom+.kolom{padding-left:40px}
.waarom .nr{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ocean-donker);
  display:block;margin-bottom:12px}
.waarom p{margin:0;font-size:15.5px;color:var(--muted)}
.waarom b{color:var(--ink)}

/* ── volle band met foto en scrim (de meting) ──────────────────────────── */
.band{position:relative;overflow:hidden;color:#fff;padding:124px 0}
.band .achter{position:absolute;inset:0;z-index:0}
.band .achter img{width:100%;height:100%;object-fit:cover}
.band .achter::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(13,12,29,.94) 0%, rgba(13,12,29,.86) 45%, rgba(13,12,29,.45) 100%)}
.band .inhoud{position:relative;z-index:1;max-width:640px}
.band h2{color:#fff}
.band .lead{color:#D9D6E2;max-width:56ch}
.band .lab{color:var(--acc)}
.stapjes{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:44px 0 40px;
  position:relative;z-index:1}
.stapje{border-top:1.5px solid rgba(178,236,225,.45);padding-top:14px}
.stapje b{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--acc);display:block;margin-bottom:8px}
.stapje span{font-size:15px;color:#E5E2EC}

/* ── procesplaat ───────────────────────────────────────────────────────── */
.pp{background:var(--wit);border:1px solid var(--line);border-radius:26px;padding:38px;
  box-shadow:var(--schaduw)}
.pp .rijkop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:700}
.pp .rij{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;gap:10px;
  align-items:stretch;margin-bottom:34px}
.ppvak{background:var(--zacht);border:1.5px solid var(--line);border-radius:10px;padding:14px 16px}
.ppvak b{display:block;font-size:15.5px;line-height:1.35;margin-bottom:4px}
.ppvak span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ppvak.hand{background:var(--roze);border-color:var(--roze-rand)}
.ppvak.hand span{color:var(--roze-tekst)}
.ppvak.auto{background:var(--aquatint);border-color:var(--ocean)}
.ppvak.auto span{color:var(--ocean-donker)}
.pppijl{align-self:center;color:var(--lila)}
.pppijl svg{width:22px;height:22px;display:block}
.pp .twijfel{max-width:420px;margin-left:calc(25% + 12px)}
.pp .twijfel .ppvak{background:var(--lilatint);border-color:var(--line)}
.pp .ppvoet{font-family:var(--mono);font-size:12px;color:var(--muted);margin:26px 0 0}

/* ── podium met producttabs ────────────────────────────────────────────── */
.ptabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px}
.ptab{font-family:var(--mono);font-weight:700;font-size:13.5px;letter-spacing:.02em;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;
  padding:11px 20px;cursor:pointer}
.ptab[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.podium{border-radius:28px;border:1px solid var(--line);padding:52px 44px;min-height:430px;
  background:linear-gradient(160deg,#F0F6F3 0%,#EDF1F7 55%,#F2EFF6 100%)}
.scherm[hidden]{display:none}
.scherm{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.scherm .uitleg h3{font-size:24px;font-weight:900;letter-spacing:-0.02em}
.scherm .uitleg p{max-width:44ch;color:var(--muted)}
.scherm .uitleg .mono{font-size:12.5px;letter-spacing:.05em;color:var(--ocean-donker);text-transform:uppercase;font-weight:700}
/* telefoon */
.tel{width:268px;background:#141019;border-radius:34px;padding:12px;box-shadow:var(--schaduw)}
.tel .in{background:#fff;border-radius:24px;overflow:hidden}
.tel .balk{background:var(--surface);color:#fff;padding:14px 16px;display:flex;
  justify-content:space-between;font-size:13.5px;font-weight:700}
.tel .balk span:last-child{opacity:.75;font-weight:400}
.tel .chipje{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--aquatint);color:var(--ocean-donker);
  border-radius:99px;padding:5px 10px;margin:12px 16px 4px;font-weight:700}
.tel .regel{display:flex;justify-content:space-between;padding:9px 16px;font-size:13.5px;
  border-bottom:1px solid var(--zacht)}
.tel .regel span:first-child{color:var(--muted)}
.tel .teken{margin:12px 16px;border:1.5px dashed var(--line);border-radius:8px;padding:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lila);text-align:center}
.tel .knopje{display:block;margin:0 16px 16px;background:var(--ocean-donker);color:#fff;
  text-align:center;border-radius:99px;padding:11px;font-family:var(--mono);
  font-size:12.5px;font-weight:700}
/* browservenster */
.venster{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--schaduw);min-width:0}
.venster .top{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--zacht)}
.venster .top i{width:9px;height:9px;border-radius:50%;background:var(--line);font-style:normal}
.venster .top span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--muted);margin-left:8px;text-transform:uppercase}
.venster .body{padding:18px 20px}
/* planbord in het venster */
.plan{display:grid;grid-template-columns:86px repeat(5,1fr);gap:6px;font-family:var(--mono);font-size:10.5px}
.plan .d{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:3px 2px;text-align:center}
.plan .r{color:var(--muted);padding:7px 2px;white-space:nowrap}
.plan .c{height:26px;border-radius:5px;background:var(--zacht)}
.plan .vol{background:var(--ocean)}
.plan .half{background:#C4DAE8}
.plan .serv{background:#E4DCEE}
.legenda{display:flex;gap:18px;margin-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;color:var(--muted);text-transform:uppercase;flex-wrap:wrap}
.legenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;font-style:normal}
/* nacalculatie */
.nac .kop2{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;
  font-size:14.5px;margin-bottom:12px}
.nac .kop2 span{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.nacrij{display:grid;grid-template-columns:120px 1fr 64px;gap:12px;align-items:center;
  font-size:13px;margin-bottom:9px}
.nacrij .naam{color:var(--muted)}
.nacbalk{position:relative;height:14px;background:var(--zacht);border-radius:7px}
.nacbalk i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--aquatint);
  border:1px solid var(--ocean);font-style:normal}
.nacbalk.over i{background:var(--roze);border-color:var(--roze-rand)}
.nacbalk s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);text-decoration:none}
.nacrij .uit{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ocean-donker)}
.nacrij .uit.rood{color:var(--roze-tekst)}
.nacvoet{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;
  color:var(--muted);letter-spacing:.05em;margin-top:12px;text-transform:uppercase}
.podiumvoet{font-family:var(--mono);font-size:12px;color:var(--muted);margin:22px 0 0}

/* ── kaarten ───────────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2>*,.grid3>*{min-width:0}
.kaart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.bg-zacht .kaart{border-color:#DCE0E4}
.kaart-acc{border:2px solid var(--ocean)}
.kaart .monoregel{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted);margin:14px 0 0}
.badge{width:46px;height:46px;border-radius:12px;background:var(--oceantint);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.badge svg{width:24px;height:24px;color:var(--ocean-donker)}
.badge-rood{background:var(--roze)}
.badge-rood svg{color:var(--roze-tekst)}
.badge-groen{background:var(--aquatint)}

/* lijsten met vinkje of kruisje */
.lijst{list-style:none;margin:0;padding:0}
.lijst li{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.lijst li:last-child{margin-bottom:0}
.lijst svg{flex:0 0 19px;width:19px;height:19px;margin-top:4px;color:var(--ocean-donker)}
.lijst.rood svg{color:var(--roze-tekst)}
.donker .lijst svg{color:var(--acc)}

/* ── cijfertabs ────────────────────────────────────────────────────────── */
.ctabs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 0}
.ctab{position:relative;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:16px;padding:26px 24px 22px;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:10px}
.ctab[aria-selected=true]{border:2px solid var(--ocean)}
.ctab .n{font-family:var(--mono);font-weight:700;font-size:38px;letter-spacing:-0.02em;
  color:var(--ocean-donker)}
.ctab .k{font-size:15px;color:var(--muted)}
.ctab .hint{margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.ctab .hint svg{width:12px;height:12px;transition:transform .2s}
.ctab:hover .hint{color:var(--ink)}
.ctab[aria-selected=true] .hint{color:var(--ocean-donker)}
.ctab[aria-selected=true] .hint svg{transform:rotate(180deg)}
.ctab .balkje{height:6px;border-radius:3px;background:#DDE3E1;overflow:hidden}
.ctab .balkje i{display:block;height:100%;border-radius:3px;background:#CBD5D8;font-style:normal}
.ctab[aria-selected=true] .balkje i{background:var(--ocean)}
.cpanel{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:30px 34px;margin-top:18px;display:flex;gap:32px;align-items:center;justify-content:space-between}
.cpanel::before{content:"";position:absolute;top:-9px;left:var(--notch,16.6%);width:16px;height:16px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg)}
.cpanel[hidden]{display:none}
.cpanel p{margin:0;max-width:72ch}
.cpanel .bron{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);margin-top:10px;text-transform:uppercase;font-weight:700}

/* ── prijstabel ────────────────────────────────────────────────────────── */
.ptbl{width:100%;max-width:1120px;border-collapse:collapse;margin:34px 0 0}
.ptbl th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:left;font-weight:700;padding:0 16px 12px 0;
  border-bottom:1.5px solid var(--line)}
.ptbl th:nth-child(2),.ptbl th:nth-child(3){text-align:right}
.ptbl td{padding:18px 16px 6px 0;vertical-align:baseline}
.ptbl td:nth-child(2),.ptbl td:nth-child(3){text-align:right;font-family:var(--mono);
  font-size:15.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptbl td:nth-child(2){color:var(--ocean-donker);font-weight:700}
.ptbl td:nth-child(3){color:var(--muted)}
.ptbl .sub td{padding:0 16px 18px 0;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:14.5px}
.ptbl tr:last-child td{border-bottom:none}

/* gewone inhoudstabel (kostenpagina) */
.tabel{width:100%;border-collapse:collapse;margin:26px 0 34px;font-size:15.5px}
.tabel th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:left;font-weight:700;padding:0 14px 10px 0;
  border-bottom:1.5px solid var(--line)}
.tabel td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tabel td.n{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ocean-donker);font-weight:700}
.tabel-scroll{overflow-x:auto;--tabelbg:#fff;
  background:
    linear-gradient(90deg, var(--tabelbg) 30%, transparent) left / 44px 100%,
    linear-gradient(270deg, var(--tabelbg) 30%, transparent) right / 44px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(13,12,29,.18), transparent) left / 18px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(13,12,29,.18), transparent) right / 18px 100%;
  background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}

/* ── rekenhulp ─────────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:40px}
.schuif{padding:22px 0 26px;border-bottom:1px solid var(--line)}
.schuif:last-of-type{border-bottom:none}
.schuif .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.schuif label{font-size:16px;font-weight:700;max-width:34ch}
.schuif output{font-family:var(--mono);font-weight:700;font-size:20px;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;
  margin:0;padding:16px 0;cursor:grab;display:block;touch-action:none}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--ink)}
input[type=range]::-moz-range-track{height:2px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--ocean);
  border:2.5px solid var(--ink);margin-top:-12px}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:var(--ocean);border:2.5px solid var(--ink)}
.uitkomst{border-left:1px solid var(--line);padding-left:56px}
.uitkomst .rij{padding:22px 0;border-bottom:1px solid var(--line)}
.uitkomst .rij:last-of-type{border-bottom:none}
.uitkomst .getal{font-weight:900;font-size:clamp(40px,3.6vw,54px);letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;display:block;margin-bottom:4px;line-height:1.05}
.uitkomst .getal.blauw{color:var(--ocean-donker)}
.uitkomst .bij{font-size:14.5px;color:var(--muted)}
.oordeel{font-weight:700;font-size:17.5px;line-height:1.4;margin:24px 0 0}
.oordeel.goed{color:#1E7A4F}
.oordeel.midden{color:#8A6D1F}
.oordeel.slecht{color:var(--roze-tekst)}
.aanname{font-size:14.5px;color:var(--muted);margin:8px 0 0}

/* ── livetracker ───────────────────────────────────────────────────────── */
.tracker{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--schaduw);margin-top:40px}
.trkop{display:flex;align-items:center;gap:14px;background:var(--zacht);
  padding:16px 24px;border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.trkop .live{display:inline-flex;align-items:center;gap:8px;color:var(--ocean-donker)}
.trkop .live i{width:9px;height:9px;border-radius:50%;background:#2E9E6B;font-style:normal}
@media (prefers-reduced-motion:no-preference){
  .trkop .live i{animation:puls 2.4s ease-in-out infinite}
  @keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
}
.trkop .vlag{margin-left:auto;background:var(--lilatint);border-radius:99px;padding:5px 12px;color:var(--muted)}
.trgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.tr{padding:22px 24px;border-right:1px solid var(--zacht);border-bottom:1px solid var(--zacht)}
.tr:nth-child(3n){border-right:none}
.tr .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.tr .v{font-family:var(--mono);font-weight:700;font-size:26px;margin:6px 0 4px;
  font-variant-numeric:tabular-nums}
.tr .d{font-size:13px;color:var(--muted)}
.tr .d.op{color:#1E7A4F}
.trvoet{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px}
.trdagen{display:flex;align-items:flex-end;gap:10px;height:110px;padding:8px 4px}
.trdagen i{flex:1;background:#C4DAE8;border-radius:6px 6px 0 0;font-style:normal;position:relative}
.trdagen i:last-child{background:var(--ocean)}
.trdagen i span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase}
.trdagenlab{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;margin-top:30px;font-weight:700}
.traanp{background:var(--aquatint);border-radius:12px;padding:20px 22px}
.traanp b{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ocean-donker);display:block;margin-bottom:8px}
.traanp p{margin:0;font-size:14.5px}
.trdisclaimer{font-family:var(--mono);font-size:12px;color:var(--muted);margin:18px 0 0}

/* ── vragen ────────────────────────────────────────────────────────────── */
.vragen{max-width:900px}
.vragen details{border-bottom:1px solid var(--line)}
.vragen summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-weight:700;font-size:19px;line-height:1.35}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";position:absolute;right:6px;top:19px;
  font-family:var(--mono);font-weight:700;font-size:24px;color:var(--ocean-donker);line-height:1}
.vragen details[open] summary::after{content:"\2212"}
.vragen .antw{padding:0 44px 24px 0;margin:0;color:var(--muted);max-width:66ch}

/* ── contactblok met Marc ──────────────────────────────────────────────── */
.mblok{position:relative;overflow:hidden;background:var(--aquatint);border-radius:26px;
  padding:64px 60px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
  color:var(--ink)}
.mblok .golf{position:absolute;bottom:0;left:0;width:200%;height:190px;pointer-events:none;opacity:.65}
.mblok .golf path{fill:#CFEFE6}
.mblok .golf.g2 path{fill:#BFE9DE}
.mblok .golf.g2{height:140px;opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .mblok .golf.g1{animation:golfstroom 44s linear infinite}
  .mblok .golf.g2{animation:golfstroom 64s linear infinite reverse}
  @keyframes golfstroom{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
.mblok .in{position:relative}
.mgezicht{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.mgezicht img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.mgezicht b{display:block;font-size:17px;color:var(--ink)}
/* De functieregel stond in het grijs van gewone bijtekst en verdween daardoor
   naast de naam. Nu in het blauw van het logo, zodat hij meetelt.
   Let op de tint: het blauw van de logomond (#2E86AB) haalt op dit groene
   vlak maar 3,8 op 1 en is bij 14,5 pixels te licht om prettig te lezen.
   Ocean-donker (#1F6E93) is dezelfde familie, haalt 5,2 en is op de site al
   de kleur voor accenttekst op een lichte ondergrond. */
.mgezicht > span > span,
.mgezicht > span:not(.avwrap){font-size:14.5px;color:var(--ocean-donker);font-weight:700}
.mgezicht > span > b{color:var(--ink);font-weight:700}
.mblok h2{font-size:clamp(26px,2.6vw,38px);margin:14px 0 26px;max-width:20ch}
.mblok .btn-ink{background:var(--ink);color:#fff}
.mblok .btn-ink:hover{background:#26243B;color:#fff}
.mblok .teken{position:relative;color:var(--ink)}
.mblok .teken svg{width:min(300px,100%);height:auto;display:block;margin:0 auto}
@media (prefers-reduced-motion:no-preference){
  .mblok .teken svg{animation:zweef 5.6s ease-in-out infinite alternate}
  @keyframes zweef{from{transform:translateY(6px) rotate(-7deg)}to{transform:translateY(-26px) rotate(2deg)}}
  /* de tekstregeltjes naast het poppetje "praten": ze lichten om beurten op */
  .mblok .teken g path{animation:praat 3.8s ease-in-out infinite}
  .mblok .teken g path:nth-child(2){animation-delay:.5s}
  .mblok .teken g path:nth-child(3){animation-delay:1s}
  .mblok .teken g path:nth-child(4){animation-delay:1.5s}
  @keyframes praat{0%,55%,100%{opacity:.3}18%,34%{opacity:1}}
}

/* ── kaartstapel: drie kaarten schuin achter elkaar (spec Marc, 10 aug) ──
   Alle drie in dezelfde rasterpositie, gekanteld met skewY(-8deg). Kaart 2
   schuift 64px rechts en 40 omlaag, kaart 3 128 en 80: een trap. De achterste
   twee liggen onder een sluier die bij hover verdwijnt, en rechts valt de
   stapel weg in een verloop van de achtergrondkleur. Geen JavaScript. */
.stapel{position:relative;display:grid;justify-content:start;
  padding:24px 160px 110px 8px;overflow:hidden}
.skaart{grid-area:1/1;width:350px;min-height:152px;border-radius:16px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 16px 32px -20px rgba(13,12,29,.20);
  padding:20px 22px;transform:skewY(-8deg);position:relative}
.skaart:nth-child(2){transform:skewY(-8deg) translate(64px,40px);z-index:-1}
.skaart:nth-child(3){transform:skewY(-8deg) translate(128px,80px);z-index:-2}
/* de sluier op de achterste twee */
.skaart::after{content:"";position:absolute;inset:0;border-radius:16px;
  background:rgba(246,248,249,.62);opacity:0;transition:opacity .6s;pointer-events:none}
.skaart:nth-child(2)::after,.skaart:nth-child(3)::after{opacity:1}
.skaart:hover::after{opacity:0}
.skaart .skop{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.skaart .sicoon{width:28px;height:28px;border-radius:50%;background:var(--oceantint);
  display:flex;align-items:center;justify-content:center;flex:0 0 28px}
.skaart .sicoon svg{width:15px;height:15px;color:var(--ocean-donker)}
.skaart .skop b{font-size:15px}
.skaart .sgroot{font-weight:700;font-size:17.5px;letter-spacing:-0.015em;line-height:1.3;margin:0 0 10px;min-height:2.6em}
.skaart .sklein{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted);margin:0}
@media (max-width:820px){
  .stapel{padding:12px 0 24px}
  .skaart{grid-area:auto;transform:none;width:100%;margin-bottom:14px}
  .skaart:nth-child(2),.skaart:nth-child(3){transform:none;z-index:auto}
  .skaart:nth-child(2)::after,.skaart:nth-child(3)::after{opacity:0}
  .skaart:nth-child(1):hover,.skaart:nth-child(2):hover,.skaart:nth-child(3):hover{transform:none}
  .stapel::after{display:none}
  /* los onder elkaar: dan is alle tekst gewoon zichtbaar */
  .stapel.voorlaatst .skaart .sgroot,.stapel.voorlaatst .skaart .sklein{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .skaart,.skaart::after,.skaart .sgroot,.skaart .sklein{transition:none}
}


/* ── hero-opzet naar het hero-3-voorbeeld (Marc, 10 aug): chip, kop met
   tikker, knoppen, en het beeldpaneel op volle breedte eronder ─────────── */
.nuchip{display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:5px 14px 5px 5px;
  text-decoration:none;color:var(--muted);font-size:13.5px;margin:0 0 26px}
.nuchip b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;font-weight:700;
  color:var(--ocean-donker);background:var(--zacht);border:1px solid var(--line);
  border-radius:6px;padding:3px 8px}
.nuchip svg{width:14px;height:14px;color:var(--ink);transition:transform .15s}
.nuchip:hover svg{transform:translateX(3px)}
/* het wisselwoord staat op een eigen regel en breekt nooit af: wordt het
   woord breder dan de kolom, dan schaalt het script de letter iets kleiner */
.tikker{color:var(--ocean);display:block;white-space:nowrap}
.tikker.wisselt{transition:opacity .24s ease,transform .24s ease}
.tikker.weg{opacity:0;transform:translateY(.35em)}
.btn svg{width:15px;height:15px;vertical-align:-2px;margin:0 6px 0 0}
.btn svg.na{margin:0 0 0 6px}
.heropaneel .leefpaneel .foto img{height:440px}
.hero .stats{margin-top:56px}

/* gefaseerd binnenkomen bij het laden, alleen als beweging aan staat */
@media (prefers-reduced-motion:no-preference){
  .anim{animation:introUp .65s cubic-bezier(.16,.84,.28,1) both}
  .a2{animation-delay:.1s}.a3{animation-delay:.18s}.a4{animation-delay:.26s}.a5{animation-delay:.38s}
  @keyframes introUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* ── drie klikkaartjes als verwijzing naar de productpagina ────────────── */
.kaartjes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.kaartje{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;color:var(--ink);font-weight:700;font-size:16px;gap:12px}
.kaartje:hover{border-color:var(--ocean)}
.kaartje svg{width:17px;height:17px;color:var(--ocean-donker);flex:0 0 17px}
@media (max-width:820px){.kaartjes{grid-template-columns:1fr}}

/* ── schermcompositie in de teaser: venster met telefoon ervoor ────────── */
.schermpjes{position:relative;padding:0 0 40px 56px;min-width:0}
.schermpjes .venster{width:100%;max-width:520px;margin-left:auto}
.schermpjes .tel{position:absolute;left:0;bottom:0;width:212px;transform:rotate(-3deg);z-index:2}
.schermpjes .tel .regel{font-size:12px;padding:7px 14px}
.schermpjes .tel .balk{font-size:12px;padding:11px 14px}
.schermpjes .tel .teken{margin:10px 14px;padding:10px}
.schermpjes .tel .knopje{margin:0 14px 14px;padding:9px;font-size:11.5px}
@media (max-width:1080px){.schermpjes{padding-left:0}.schermpjes .tel{display:none}}

/* ── plaatshouder ──────────────────────────────────────────────────────── */
.ph{border:1.5px dashed #C6CBD2;border-radius:12px;padding:22px;background:var(--zacht);color:var(--muted)}
.ph .flag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ocean-donker);margin:0 0 8px;display:block}
.ph p:last-child{margin-bottom:0}

/* ── formulier ─────────────────────────────────────────────────────────── */
.formulier{max-width:640px}
.veld{margin-bottom:18px}
.veld label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.veld label small{font-weight:400;color:var(--muted)}
.veld input,.veld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px}
.veld input:hover,.veld textarea:hover{border-color:#C9CFD6}
.veld textarea{min-height:130px;resize:vertical}
.formfout{display:none;background:var(--roze);border:1px solid var(--roze-rand);
  color:var(--roze-tekst);border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:15px}
.formfout.zichtbaar{display:block}

/* ── footer ────────────────────────────────────────────────────────────── */
.voet{background:var(--ink);color:#E9E4EE;padding:72px 0 0;margin-top:0}
.voet .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:56px}
.voet .logotype{color:#fff}
.voet .fintro{color:var(--lila);font-size:15.5px;max-width:36ch;margin:18px 0 20px}
.voet .fmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--lila);
  text-transform:uppercase;line-height:2}
.voet h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8E8399;margin-bottom:16px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:10px}
.voet li a{color:#E9E4EE;text-decoration:none;font-size:15.5px}
.voet li a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:4px}
.voet .onder{border-top:1px solid rgba(255,255,255,.13);margin-top:52px;padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:#8E8399;text-transform:uppercase}
.voet .onder a{color:#8E8399}

/* ── beweging bij scrollen ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.28,1)}
  .up.in{opacity:1;transform:none}
  .tilt{opacity:0;transform:rotate(-1.1deg) translateY(30px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,.84,.28,1)}
  .tilt.in{opacity:1;transform:none}
}

/* ── mobiel ────────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero .rooster,.paginarooster,.herorooster{grid-template-columns:1fr;gap:48px}
  .hero .stapel{padding:12px 0 24px}
  .hero::before{width:420px;height:420px;top:auto;bottom:-80px}
  .leefpaneel{padding:20px}
  .leefpaneel .foto img{height:300px}
  .menu a{display:none}
  .menu a.btn{display:inline-block}
  .waarom .wrap{grid-template-columns:1fr}
  .waarom .kolom{border-right:none;border-bottom:1px solid var(--line);padding:26px 0}
  .waarom .kolom+.kolom{padding-left:0}
  .waarom .kolom:last-child{border-bottom:none}
  .ctabs{grid-template-columns:1fr}
  .cpanel{flex-direction:column;align-items:flex-start}
  .cpanel::before{display:none}
  .calc,.grid2,.grid3{grid-template-columns:1fr}
  .scherm{grid-template-columns:1fr;gap:30px}
  .stats{grid-template-columns:1fr}
  .stapjes{grid-template-columns:1fr 1fr;gap:20px}
  .trgrid{grid-template-columns:1fr 1fr}
  .tr:nth-child(3n){border-right:1px solid var(--zacht)}
  .tr:nth-child(2n){border-right:none}
  .trvoet{grid-template-columns:1fr}
  .mblok{grid-template-columns:1fr;padding:40px 26px}
  .mblok .teken{display:none}
  .voet .fgrid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
  .logotype b{font-size:19px}
  .logotype svg{width:28px;height:28px}
  .menu a.btn{padding:11px 16px;font-size:13px;white-space:nowrap}
}
@media (max-width:820px){
  .pp{padding:22px 18px}
  .pp .rij{grid-template-columns:1fr;gap:8px}
  .pppijl{justify-self:center;transform:rotate(90deg)}
  .pp .twijfel{margin-left:0;max-width:none}
  .podium{padding:26px 20px}
  .ptbl thead{display:none}
  .ptbl,.ptbl tbody,.ptbl tr,.ptbl td{display:block}
  .ptbl td{padding:2px 0;text-align:left}
  .ptbl td:nth-child(2),.ptbl td:nth-child(3){text-align:left}
  .ptbl tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .ptbl .sub td{border-bottom:none}
  .knoppenrij .btn{width:100%;text-align:center}
  .voet .fgrid{grid-template-columns:1fr}
}

/* ── toevoegingen (Marc, 10 aug): pulserende NU-chip, live-stip op de
   avatar, voorbeeld-tabs in de teaser, en de kleinere prijzenlink ──────── */
.avwrap{position:relative;flex:0 0 auto;display:inline-block}
.mlive{position:absolute;right:1px;bottom:1px;width:15px;height:15px;border-radius:50%;
  background:#3ED598;border:3px solid #fff;font-style:normal}
@media (prefers-reduced-motion:no-preference){
  .mlive{animation:puls 2.4s ease-in-out infinite}
  /* het NU-badge pulseert zelf: een ring die uitdijt en vervaagt */
  .nuchip b{animation:nupuls 2.2s ease-out infinite}
  @keyframes nupuls{from{box-shadow:0 0 0 0 rgba(46,134,171,.45)}to{box-shadow:0 0 0 9px rgba(46,134,171,0)}}
}
button.kaartje{font-family:inherit;cursor:pointer;width:100%;text-align:left}
.kaartje[aria-selected="true"]{border-color:var(--ocean);box-shadow:inset 0 0 0 1px var(--ocean)}
.orderlijst{padding:4px 0}
.orij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.orij:last-child{border-bottom:0}
.orij em{font-style:normal;font-size:11px;letter-spacing:.05em;white-space:nowrap;
  padding:3px 10px;border-radius:999px;background:#EFF3F2;color:var(--muted)}
.orij em.ok{background:#DCF3EA;color:var(--ocean-donker)}
/* de kleine verwijslink: zwart, onderstreept, met een pijltje dat meeschuift */
.pijllink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  color:var(--ink);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px}
.pijllink svg{width:16px;height:16px;transition:transform .15s}
.pijllink:hover svg{transform:translateX(3px)}

/* ── nog een ronde (Marc, 10 aug avond) ─────────────────────────────────── */
/* het ordervenster staat los (zonder telefoon) en lijnt links uit */
#vb-order .venster{margin-left:0}
/* de hoofdknop in de kop pulseert in het groen */
@media (prefers-reduced-motion:no-preference){
  .btn-puls-groen{animation:halo-groen 4s ease-in-out infinite}
  @keyframes halo-groen{0%,100%{box-shadow:0 0 0 5px rgba(62,213,152,.38)}50%{box-shadow:0 0 0 13px rgba(62,213,152,.10)}}
  .btn-puls-groen:hover{animation-play-state:paused}
}
#vb-order.schermpjes{padding-left:0}

/* ── de contourlijnen in de hero deinen traag op en neer; basis en glans
   bewegen identiek zodat de cursorglans op de lijnen blijft liggen ─────── */
@media (prefers-reduced-motion:no-preference){
  .topo path{animation:topogolf 11s ease-in-out infinite alternate}
  .topo path:nth-child(2n){animation-duration:14s;animation-delay:-4s}
  .topo path:nth-child(3n){animation-duration:17s;animation-delay:-9s}
  .topo path:nth-child(4n){animation-duration:13s;animation-delay:-6s}
  @keyframes topogolf{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
}

/* ── de hoofdknop in de menubalk: groen, met de groene puls eromheen ────── */
.kop .btn,.menu a.btn{background:#3ED598;color:var(--ink)}
.kop .btn:hover{background:#2FC28B;color:var(--ink);box-shadow:0 10px 22px -10px rgba(62,213,152,.6)}

/* ── procesplaat: de vakjes zijn knoppen die bij aanwijzen of focus een
   regel uitleg tonen. Zonder muis (tab of tik) werkt het via :focus ──── */
button.ppvak{font-family:inherit;text-align:left;width:100%;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s}
button.ppvak:hover,button.ppvak:focus-visible{border-color:var(--ocean);
  box-shadow:0 10px 24px -16px rgba(13,12,29,.5);transform:translateY(-2px)}
.ppvak em{display:block;font-style:normal;font-size:13.5px;line-height:1.45;
  color:var(--muted);max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease}
button.ppvak:hover em,button.ppvak:focus-visible em{max-height:9em;opacity:1;margin-top:10px}
.ppvak.hand em{color:var(--roze-tekst)}
.ppvak.auto em{color:var(--ocean-donker)}
@media (prefers-reduced-motion:reduce){
  button.ppvak,.ppvak em{transition:none}
}

/* ── het groene CTA-blok dat door de site heen terugkomt ───────────────── */
.ctablok{padding-top:0}
.ctagroen{background:var(--ink);color:#fff;border-radius:26px;padding:48px 52px;
  display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctagroen h2{color:#fff;font-size:clamp(24px,2.4vw,34px)}
.ctagroen p{color:var(--lila)}
.ctagroen-licht{background:var(--wit);color:var(--ink);border:1px solid var(--line)}
.ctagroen-licht h2{color:var(--ink)}
.ctagroen-licht p{color:var(--muted)}
.btn-groen{background:#3ED598;color:var(--ink)}
.btn-groen:hover{background:#2FC28B;color:var(--ink);box-shadow:0 10px 22px -10px rgba(62,213,152,.6)}
@media (max-width:820px){.ctagroen{padding:32px 26px}}

/* de knop in de menubalk heeft dezelfde maat als die in de hero */
.kop .btn,.menu a.btn{padding:14px 26px;font-size:15px}

/* ── het logo-icoon leeft: in de kop, in de voettekst en in het CTA-blok.
   Het wiebelt zachtjes, knippert regelmatig met de ogen (een dubbele
   knipper, zoals mensen doen) en de mond trekt even breder. De selectors
   pakken de vorm van het icoon zelf: bal, oog, oog, mond. ─────────────── */
@media (prefers-reduced-motion:no-preference){
  .kop .logotype svg,.voet .logotype svg{animation:kopwieg 7s ease-in-out infinite;transform-origin:50% 70%}
  @keyframes kopwieg{
    0%,100%{transform:translateY(0) rotate(0deg)}
    35%{transform:translateY(-2px) rotate(-5deg)}
    65%{transform:translateY(-1px) rotate(3deg)}
  }
  /* de ogen: twee keer kort knipperen per ronde van 4,2 seconden */
  .kop .logotype svg circle,.voet .logotype svg circle,.mblok .teken svg circle{
    transform-box:fill-box;transform-origin:center;
    animation:knipper 4.2s ease-in-out infinite}
  .kop .logotype svg circle:nth-of-type(2),.voet .logotype svg circle:nth-of-type(2),
  .mblok .teken svg circle:nth-of-type(2){animation-delay:.05s}
  @keyframes knipper{
    0%,14%,22%,30%,100%{transform:scaleY(1)}
    18%,26%{transform:scaleY(.1)}
  }
  /* de mond: het laatste pad in de kop- en voetlogo's, het vierde in het CTA-icoon */
  .kop .logotype svg path:last-child,.voet .logotype svg path:last-child,
  .mblok .teken svg path:nth-child(4){
    transform-box:fill-box;transform-origin:center;
    animation:lach 7s ease-in-out infinite}
  @keyframes lach{0%,55%,100%{transform:scale(1)}70%{transform:scale(1.16,1.3)}}
  /* aanwijzen geeft een extra knikje */
  .kop .logotype:hover svg,.voet .logotype:hover svg{animation-duration:2.2s}
}

/* het verwijsblok naar de rekenhulp: zelfde kaart, inhoud naast elkaar */
.rekenkaart{display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* het icoon staat dichter tegen het woordmerk aan */
.logotype{gap:6px}

/* knoptekst in Poppins in plaats van de mono (Marc, 10 aug) */
.btn{font-family:var(--font);letter-spacing:0;font-size:16px}

/* ══ meer leven op de pagina (Marc, 10 aug) ══════════════════════════════ */
@media (prefers-reduced-motion:no-preference){

  /* blokken in een rij komen na elkaar binnen in plaats van allemaal tegelijk */
  .grid2 > .up:nth-child(2),.grid3 > .up:nth-child(2),
  .kolommen > .up:nth-child(2),.stats > .up:nth-child(2){transition-delay:.09s}
  .grid3 > .up:nth-child(3),.kolommen > .up:nth-child(3),
  .stats > .up:nth-child(3){transition-delay:.18s}
  .grid3 > .up:nth-child(4){transition-delay:.27s}
  .grid3 > .up:nth-child(5){transition-delay:.36s}
  .dagen > .up:nth-child(2){transition-delay:.09s}
  .dagen > .up:nth-child(3){transition-delay:.18s}
  .dagen > .up:nth-child(4){transition-delay:.27s}

  /* de getekende schermen bouwen zichzelf op zodra je ze bereikt: regel voor
     regel, alsof het systeem de gegevens binnenhaalt. De vertraging per regel
     zet het script, zodat het aantal regels niet uitmaakt. */
  .schermpjes.speelt .orij,
  .schermpjes.speelt .tel .regel,
  .schermpjes.speelt .plan .c{animation:rijin .55s cubic-bezier(.16,.84,.28,1) backwards}
  @keyframes rijin{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}

  /* de regel die op dat moment verwerkt wordt, licht even op */
  .orij.bezig{background:var(--oceantint)}
  .tel .regel.bezig{background:var(--aquatint)}

  /* een blokje op het planbord springt van "onder voorbehoud" naar "ingepland" */
  .plan .c{transition:background .55s ease}

  /* de knop op het telefoonscherm ademt, zodat het scherm niet dood staat */
  .schermpjes .tel .knopje{animation:knopademt 3.4s ease-in-out infinite}
  @keyframes knopademt{0%,100%{box-shadow:0 0 0 0 rgba(31,110,147,.30)}
    55%{box-shadow:0 0 0 8px rgba(31,110,147,0)}}
}
.orij,.tel .regel{transition:background .4s}

/* de foto in de donkere band krijgt ruimte om traag mee te schuiven */
.band .achter img{height:118%;top:-9%;position:absolute;left:0;will-change:transform}

/* ══ aanpassingen 10 aug, avond ══════════════════════════════════════════ */
/* de live-stip staat linksboven op de foto, net als de chip op het overzicht */
.mlive{right:auto;bottom:auto;top:1px;left:1px}

/* de voettekst rustiger: vier gelijke kolommen, contact als eigen kolom */
.voet .fgrid{grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:48px}
.voet .fmerk .fintro{margin-bottom:0}
.voet .fmeta a{color:var(--lila);text-decoration:none}
.voet .fmeta a:hover{color:#fff}
.voet .fpijl{color:#fff;font-size:15px;text-decoration-color:var(--acc)}
.voet .fpijl svg{color:var(--acc)}

/* ── branchepagina ──────────────────────────────────────────────────────── */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.branche{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.branche:hover{border-color:var(--ocean);transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(13,12,29,.45)}
.branche h3{margin-bottom:8px}
.branche p{color:var(--muted);margin:0 0 14px}
.branche .bmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--ocean-donker);margin:0;display:block}
.branche .badge{margin-bottom:16px}
@media (max-width:1080px){.branches{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.branches{grid-template-columns:1fr}}

/* de losse iconen uit de sprite erven geen tekenstijl van het spritebestand,
   dus die zetten we hier: lijnen in plaats van gevulde vlakken */
.badge svg,.bicoon svg{fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}

/* ══ aanpassingen 10 aug, laat ══════════════════════════════════════════ */
/* de bronknop in een uitlegpaneel mag niet samengeknepen worden */
.bronknop{flex:0 0 auto;white-space:nowrap;align-self:center}

/* de stappenrij op de branchepagina: drie knoppen boven één uitlegpaneel */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.stap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  font-family:inherit;text-align:left;cursor:pointer;display:flex;align-items:baseline;gap:14px;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.stap b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ocean-donker)}
.stap span{font-weight:700;font-size:17px;color:var(--ink)}
.stap:hover{border-color:var(--ocean);transform:translateY(-2px)}
.stap[aria-selected="true"]{border-color:var(--ocean);box-shadow:inset 0 0 0 1px var(--ocean)}
@media (max-width:820px){.stappen{grid-template-columns:1fr}}

/* het verwijsblok naar de meting: één klikbare rij met de drie stappen */
.metingblok{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 30px;
  text-decoration:none;color:var(--ink);transition:border-color .25s,box-shadow .25s,transform .25s}
.metingblok:hover{border-color:var(--ocean);transform:translateY(-3px);
  box-shadow:0 20px 44px -30px rgba(13,12,29,.5)}
.metingblok .mstap{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  background:var(--oceantint);border-radius:99px;padding:8px 16px;white-space:nowrap}
.metingblok .mstap b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ocean-donker)}
.metingblok .mpijl svg{width:18px;height:18px;color:var(--lila)}
.metingblok .mtekst{flex:1 1 260px;font-size:15.5px;color:var(--muted);line-height:1.5}
.metingblok .mtekst b{display:block;color:var(--ink);font-size:17px}
.metingblok .mknop{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  color:var(--ocean-donker);white-space:nowrap}
.metingblok .mknop svg{width:17px;height:17px;transition:transform .2s}
.metingblok:hover .mknop svg{transform:translateX(4px)}
@media (prefers-reduced-motion:no-preference){
  .metingblok .mstap{transition:background .25s,transform .25s}
  .metingblok:hover .mstap:nth-of-type(1){background:var(--aquatint);transform:translateY(-2px)}
  .metingblok:hover .mstap:nth-of-type(2){background:var(--aquatint);transform:translateY(-2px);transition-delay:.06s}
  .metingblok:hover .mstap:nth-of-type(3){background:var(--aquatint);transform:translateY(-2px);transition-delay:.12s}
}
@media (max-width:820px){.metingblok .mpijl{display:none}}

/* een markering die niet halverwege mag afbreken */
mark.heel{white-space:nowrap}

/* op een gekleurde sectie moet de schaduwtruc diezelfde kleur gebruiken,
   anders zie je witte randjes naast de tabel */
.bg-zacht .tabel-scroll{--tabelbg:var(--zacht)}
.donker .tabel-scroll{--tabelbg:var(--ink)}

/* ══ contactpagina ═══════════════════════════════════════════════════════
   Het formulier staat meteen in beeld, naast de drie manieren om ons te
   bereiken. De kop toont hier geen menu maar het telefoonnummer, zodat de
   pagina één ding vraagt: contact opnemen. */
.kop .kopkaal{gap:22px}
.kop .belnr{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;opacity:1}
.kop .belnr svg{width:17px;height:17px;color:var(--ocean-donker)}
.kop .belnr:hover{color:var(--ocean-donker)}
.kop .terug{font-size:14.5px}
.contactsectie{padding-top:56px}
.contactrooster{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contactrooster h1{font-size:clamp(34px,3.6vw,52px);margin-bottom:20px}
.contactrooster .lead{margin-bottom:30px}

.kanalen{display:grid;gap:12px}
.kanaal{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#fff;
  border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.kanaal:hover{border-color:var(--ocean);transform:translateY(-2px);
  box-shadow:0 16px 34px -26px rgba(13,12,29,.5)}
.kicoon{width:44px;height:44px;border-radius:12px;background:var(--oceantint);flex:0 0 44px;
  display:flex;align-items:center;justify-content:center}
.kicoon svg{width:22px;height:22px;color:var(--ocean-donker)}
.kicoon.kgroen{background:#E4F7EE}
.kicoon.kgroen svg{color:#1F9D63}
.ktekst{display:block;font-size:14.5px;color:var(--muted);line-height:1.45}
.ktekst b{display:block;font-size:17px;color:var(--ink);margin-bottom:2px}
.kpijl{margin-left:auto;flex:0 0 auto}
.kpijl svg{width:18px;height:18px;color:var(--lila);transition:transform .2s}
.kanaal:hover .kpijl svg{transform:translateX(4px);color:var(--ocean-donker)}

.formulier h2{font-size:24px;margin:0 0 6px}
.naform{font-size:13.5px;color:var(--muted);margin:16px 0 0;line-height:1.5}
@media (max-width:980px){
  .contactrooster{grid-template-columns:1fr;gap:44px}
  .kop .terug{display:none}
}
@media (max-width:560px){
  .kop .belnr span{display:none}
}

/* ── tijdlijn op de contactpagina: drie stappen met een lijn ertussen ──── */
.tijdlijn{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:0;counter-reset:tl}
.tl{position:relative;display:grid;grid-template-columns:56px 1fr;gap:26px;padding-bottom:26px}
.tl:last-child{padding-bottom:0}
/* de verbindingslijn loopt door de bolletjes heen */
.tl::before{content:"";position:absolute;left:27px;top:52px;bottom:-4px;width:2px;
  background:linear-gradient(180deg,var(--ocean) 0%, #C4DAE8 100%)}
.tl:last-child::before{display:none}
.tlbol{width:56px;height:56px;border-radius:50%;background:var(--ocean-donker);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 56px;position:relative;z-index:1}
.tlbol b{font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.tlkaart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 28px;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.tl:hover .tlkaart{border-color:var(--ocean);transform:translateY(-2px);
  box-shadow:0 18px 40px -30px rgba(13,12,29,.5)}
.tlwanneer{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ocean-donker);font-weight:700;display:block;margin-bottom:8px}
.tlkaart h3{margin:0 0 8px}
.tlkaart p{margin:0;color:var(--muted)}
.tlkost{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  background:var(--aquatint);color:var(--ocean-donker);border-radius:99px;padding:5px 12px}
.tlkost.tlbetaald{background:var(--lilatint);color:#5C4E6B}
@media (max-width:560px){
  .tl{grid-template-columns:44px 1fr;gap:18px}
  .tlbol{width:44px;height:44px;flex:0 0 44px}
  .tl::before{left:21px;top:44px}
  .tlkaart{padding:20px 22px}
}
/* de tekst in het metingblok staat midden tussen de stappen en de link */
.mtekst.mmidden{text-align:center;padding:0 8px}

/* ══ de kop van de binnenpagina's: overal dezelfde opbouw en hoogte ══════
   Label, titel, inleiding, knoppenrij. De vaste minimumhoogte zorgt dat
   een korte titel als "De meting" evenveel ruimte krijgt als een lange. */
.paginakop{padding:64px 0 var(--sec)}
/* boven uitlijnen in plaats van centreren: dan begint de tekst op elke
   pagina op dezelfde hoogte, ook als de titel over twee regels loopt */
.paginakop .wrap{display:flex;flex-direction:column;justify-content:flex-start;min-height:330px}
.paginakop h1{font-size:clamp(38px,4.3vw,62px);margin-bottom:22px;max-width:18ch}
.paginakop .lead{max-width:58ch;margin-bottom:0}
.paginakop .knoppenrij{margin-top:30px}
@media (max-width:820px){
  .paginakop .wrap{min-height:0}
}

/* ── de menubalk rustiger: één lettertype, iets kleiner, strakkere maat ── */
.menu{gap:30px}
.menu a{font-size:15px}
.menu a.btn{font-size:15px;padding:12px 22px}
.kop .belnr{font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:0;
  white-space:nowrap}
.kop .belnr svg{width:16px;height:16px}
@media (max-width:1180px){
  .menu{gap:22px}
  .kop .belnr span,.kop .belnr{font-size:14.5px}
}

/* ── het groene slotblok: evenveel wit erboven als eronder ───────────────
   De sectie erboven levert de ruimte al met zijn eigen onderruimte, dus
   hier geen extra padding. Eindigt de pagina met een gekleurde sectie,
   dan valt die ruimte binnen dat vlak en zetten we hem hier alsnog. */
.ctasectie{padding-top:0}
.bg-zacht + .ctasectie{padding-top:var(--sec)}

/* het WhatsApp-merkteken is een gevuld logo en oogt daardoor zwaarder dan
   de lijniconen ernaast; iets kleiner maakt het optisch gelijk */
.kicoon.kgroen svg{width:19px;height:19px}

/* de eerste sectie na de paginakop begint hoger: de kop levert er al
   ruimte onder, dus daar hoeft geen volle sectiemarge overheen */
.paginakop + section{padding-top:56px}
@media (max-width:820px){ .paginakop + section{padding-top:40px} }

/* ── scherp blijven tijdens het scrollen ─────────────────────────────────
   Een element dat draait of schuift krijgt een eigen laag in de browser.
   Zonder aankondiging wordt die laag tijdens het scrollen op een te lage
   resolutie getekend, en dat zie je als wazigheid. Met will-change weet de
   browser het vooraf en tekent hij scherp; translateZ(0) houdt de laag op
   de grafische kaart. */
/* LET OP: hier stonden ook de drie tekeningen die draaien (het logo in de kop
   en de voet, en het poppetje in het groene blok). Dat pakte verkeerd uit.

   will-change:transform met translateZ(0) zet een element op een eigen laag
   op de grafische kaart. De browser tekent die laag één keer als bitmap en
   verschuift of draait daarna dat plaatje. Bij iets wat alleen schuift merk
   je dat niet. Bij iets wat draait wel: een vectortekening wordt dan een
   raster dat meedraait, en dan zie je de pixels. Precies het probleem dat we
   met deze regel dachten op te lossen.

   Wat overblijft schuift alleen zijwaarts of verticaal, en daar helpt de
   eigen laag wel zonder dat het scherpte kost. */
.mblok .golf,.topo path,.schuif input[type=range]{
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
/* de tekst in de kop mag geen eigen laag krijgen, anders wordt die zacht */
.kop .logotype b,.voet .logotype b{will-change:auto;transform:none}

/* ══ tekst en blokken komen tot leven bij het scrollen ═══════════════════
   Dit zijn eenmalige bewegingen: ze spelen af zodra je het blok bereikt en
   stoppen daarna helemaal. Ze kosten dus niets terwijl je verder leest, in
   tegenstelling tot de bewegingen die eindeloos doorlopen. De vertraging
   per element zet het script, zodat regels na elkaar binnenkomen. */
@media (prefers-reduced-motion:no-preference){
  .leef{opacity:0;transform:translateY(16px);
    transition:opacity .62s cubic-bezier(.16,.84,.28,1),transform .62s cubic-bezier(.16,.84,.28,1)}
  .leef.in{opacity:1;transform:none}
  /* tabelrijen alleen laten opkomen, niet schuiven: dat gaat schokken */
  tr.leef{transform:none}
  /* de kop van een binnenpagina speelt meteen bij het laden af */
  .paginakop .wrap > *{animation:introUp .6s cubic-bezier(.16,.84,.28,1) both}
  .paginakop .wrap > *:nth-child(2){animation-delay:.07s}
  .paginakop .wrap > *:nth-child(3){animation-delay:.14s}
  .paginakop .wrap > *:nth-child(4){animation-delay:.21s}
}

/* ══ menubalk op een telefoon ════════════════════════════════════════════
   Vijf links, een telefoonnummer en een knop passen niet naast elkaar op
   een smal scherm; ze duwden de hele pagina breder. Onder 1080 pixels
   klapt het menu daarom uit onder de balk. */
.vw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menuknop{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer}
.menuknop span[aria-hidden]{display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .25s,opacity .2s}
.menuknop[aria-expanded="true"] span[aria-hidden]:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknop[aria-expanded="true"] span[aria-hidden]:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] span[aria-hidden]:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Het menu was een lijstje dat onder de balk uitklapte. Op een telefoon
   werkt dat niet: de tikvlakken zijn klein, de pagina schuift eronder
   gewoon door, en het telefoonnummer en de knop verdwijnen onderaan de
   lijst. Hieronder is het een paneel dat over de pagina heen komt, met
   regels waar je met een duim bij kunt en de twee dingen waar het om gaat,
   bellen en contact, onderaan binnen bereik. */
@media (max-width:1080px){
  .menuknop{display:flex;position:relative;z-index:82}

  /* Het waas eronder, dat het menu sluit bij een tik ernaast. Het moet
     onder 60 blijven: de kopbalk staat op sticky met z-index 60 en maakt
     daarmee een eigen stapellaag. Alles wat in die balk zit, dus ook dit
     paneel, kan er niet bovenuit komen. Een hoger getal op het waas legde
     het juist over het menu heen. */
  .menuwaas{position:fixed;inset:0;z-index:55;background:rgba(13,12,29,.42);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .menuwaas.open{opacity:1;visibility:visible}

  .kop .menu{position:fixed;top:0;right:0;bottom:0;z-index:81;
    width:min(88vw,380px);
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:var(--wit);padding:calc(88px + 10px) 0 0;
    border-left:1px solid var(--line);
    box-shadow:-30px 0 60px -40px rgba(13,12,29,.55);
    transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;overscroll-behavior:contain}
  .kop .menu.open{transform:none}

  /* de vijf paginalinks: ruime regels, duidelijke scheiding */
  .kop .menu a{font-size:18px;font-weight:700;opacity:1;
    display:flex;align-items:center;min-height:58px;
    padding:0 var(--gutter);margin:0;
    border-bottom:1px solid var(--line);color:var(--ink)}
  .kop .menu a:first-child{border-top:1px solid var(--line)}
  .kop .menu a[aria-current=page]{color:var(--ocean-donker);
    box-shadow:inset 3px 0 0 var(--ocean-donker);background:var(--zacht)}
  .kop .menu a:active{background:var(--zacht)}

  /* Bellen en de knop staan onderaan, waar de duim zit. De selector moet
     a.belnr zijn en niet .belnr: de regel voor .kop .menu a hierboven zet
     margin op 0 en is met dat extra element specifieker. */
  .kop .menu a.belnr{margin-top:auto;border-bottom:0;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:16px;gap:10px;
    padding-top:0;color:var(--ocean-donker)}
  .kop .menu a.btn{margin:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
    padding:0 24px;min-height:54px;text-align:center;border-bottom:0;
    justify-content:center;color:#fff;border-radius:99px}
  .kop .menu a.btn:first-child{border-top:0}
}
/* het menu schuift; wie liever geen beweging heeft, krijgt het meteen */
@media (max-width:1080px) and (prefers-reduced-motion:reduce){
  .kop .menu,.menuwaas{transition:none}
}
/* zolang het menu open staat scrollt de pagina eronder niet mee */
body.menu-open{overflow:hidden}

/* de voettekst stapelt weer op smallere schermen. Deze regels staan bewust
   achteraan: de nieuwe kolomverdeling hierboven maakte de oudere mobiele
   regels ongedaan, waardoor de pagina op een telefoon te breed werd. */
@media (max-width:1080px){ .voet .fgrid{grid-template-columns:1fr 1fr;gap:34px} }
@media (max-width:680px){ .voet .fgrid{grid-template-columns:1fr;gap:28px} }

/* ══ de beweging volgt het scrollen ══════════════════════════════════════
   Moderne browsers kunnen een animatie aan de scrolpositie koppelen in
   plaats van aan een klok. Het blok komt dan mee omhoog terwijl jij scrolt,
   en staat stil zodra jij stilstaat. Dat draait op de grafische kaart en
   kost dus geen scriptwerk.
   Kan een browser dit nog niet, dan valt hij terug op de eenmalige
   overgang hierboven, die door het script wordt aangezet. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .leef{
      transition:none;                    /* de scroll neemt het over */
      /* belangrijk: de rusttoestand is zichtbaar. Slaat de scroltijdlijn om
         wat voor reden niet aan, dan staat de tekst er gewoon, in plaats van
         onzichtbaar te blijven wachten op een animatie die nooit komt. */
      opacity:1;transform:none;
      animation:leefMee linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 32%;
    }
    @keyframes leefMee{
      from{opacity:0;transform:translateY(26px)}
      to{opacity:1;transform:none}
    }
    /* tabelrijen alleen laten opkomen, niet schuiven */
    tr.leef{animation-name:leefMeeVlak}
    @keyframes leefMeeVlak{from{opacity:0}to{opacity:1}}
    /* blokken die al een eigen beweging hadden, doen nu ook mee met de scroll */
    .up,.tilt{transition:none;opacity:1;transform:none;
      animation:leefMee linear both;
      animation-timeline:view();animation-range:entry 5% cover 34%}
    .tilt{animation-name:leefMeeKanteling}
    @keyframes leefMeeKanteling{
      from{opacity:0;transform:rotate(-1.1deg) translateY(30px)}
      to{opacity:1;transform:none}
    }
  }
}

/* ══ verschillende bewegingen per soort blok ═════════════════════════════
   Niet alles komt op dezelfde manier binnen. De beweging past bij wat het
   blok is: een lijst schuift binnen zoals je hem leest, cijfers groeien,
   kaarten komen naar voren, en getekende schermen kantelen op hun plek.
   Alles hangt aan de scrolpositie, dus jij bepaalt het tempo. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* het labeltje boven een kop zakt van boven naar beneden */
    .lab.leef{animation-name:zakIn;animation-range:entry 0% cover 22%}
    @keyframes zakIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

    /* opsommingen en tabelrijen schuiven binnen zoals je ze leest */
    .lijst > li.leef,.vraaglijst > li.leef,.kanaal.leef,.tl.leef{
      animation-name:vanLinks;animation-range:entry 8% cover 30%}
    @keyframes vanLinks{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
    tr.leef{animation-name:vanLinksVlak;animation-range:entry 4% cover 26%}
    @keyframes vanLinksVlak{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

    /* kaarten komen naar voren in plaats van omhoog */
    .branche.leef,.kaart.up,.dag.leef,.stap.leef,.kaartje.leef,.metingblok.leef{
      animation-name:naarVoren;animation-range:entry 6% cover 34%}
    @keyframes naarVoren{
      from{opacity:0;transform:scale(.94) translateY(20px)}
      to{opacity:1;transform:none}
    }

    /* cijfers groeien, want daar gaat het om */
    .stat.up{animation-name:groei;animation-range:entry 5% cover 30%}
    @keyframes groei{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

    /* de genummerde stappen komen om en om van links en rechts */
    .kolom.up:nth-child(odd){animation-name:vanLinks}
    .kolom.up:nth-child(even){animation-name:vanRechts}
    @keyframes vanRechts{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

    /* de kaartjes naast de schermen komen van rechts */
    .kaartjes .kaartje.leef,.kaartjes .kaartje.up{animation-name:vanRechts}

    /* getekende schermen kantelen op hun plek, iets later en trager */
    .tilt{animation-name:kantelIn;animation-range:entry 2% cover 42%}
    @keyframes kantelIn{
      from{opacity:0;transform:rotate(-2deg) scale(.96) translateY(34px)}
      to{opacity:1;transform:none}
    }

    /* het groene slotblok komt als geheel naar voren */
    .mblok .in > .leef{animation-range:entry 10% cover 38%}

    /* de vragen klappen open van boven */
    .vragen details.leef{animation-name:zakIn;animation-range:entry 6% cover 24%}
  }
}

/* ══ de zwaardere bewegingen uit de proef ════════════════════════════════
   Vijf effecten van animatie-proef.html, hier als losse klassen zodat ze
   per blok aan of uit kunnen. Ze gelden alleen voor blokken die onder de
   vouw staan: staat een kop al in beeld zodra de pagina laadt, dan is een
   scrolgekoppelde animatie per definitie al afgelopen en zie je niets.
   Buiten het @supports-blok staat telkens de rusttoestand, en die is
   zichtbaar. Slaat de scroltijdlijn niet aan, dan staat de tekst er
   gewoon in plaats van onzichtbaar te wachten. */

/* A · de kop veegt open. De overloop verbergt de aanloop van onderen; de
   voetruimte eronder is er zodat de staarten van de g en de j niet worden
   afgesneden, en gaat er bij de ondermarge weer af. */
.veeg{overflow:hidden;padding-bottom:.16em;margin-bottom:calc(14px - .16em)}
.veeg > span{display:inline-block}

/* B · woord voor woord. Het script knipt de kop in losse woorden. Draait
   het script niet, dan blijft de kop een gewone kop. */
.woorden > span{display:inline-block;white-space:pre}

/* C · het cijfer telt mee met de scroll. inherits:true is nodig: het cijfer
   wordt door ::after getekend, en die erft de waarde anders niet. */
@property --tel{syntax:'<integer>';initial-value:0;inherits:true}
.telop{position:relative;display:inline-block}

/* D · kaarten kantelen naar je toe. De diepte staat op het raster, want
   perspectief werkt vanaf de ouder. */
.grid3,.branches{perspective:1200px}
.grid3 > .kaart,.branches > .branche{transform-origin:50% 100%}

/* E · een lijn die zichzelf tekent, als accent onder een kop */
.trekstreep{display:block;width:100%;height:74px;margin:30px 0 4px}
.trekstreep path{fill:none;stroke:var(--ocean);stroke-width:3;stroke-linecap:round}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* A · bereik in cover, niet in entry: bij een kop van een regel is de
       entry-fase maar zo hoog als de kop, en dan is de veeg voorbij terwijl
       de tekst nog op de onderrand van het scherm staat. */
    .veeg{view-timeline-name:--veegkop}
    .veeg > span{animation:veegOpen linear both;animation-timeline:--veegkop;
      animation-range:cover 8% cover 38%}
    @keyframes veegOpen{
      from{clip-path:inset(0 100% 0 0);transform:translateY(16px)}
      to{clip-path:inset(0 0 0 0);transform:none}
    }

    /* B · elk woord krijgt zijn eigen stukje scroll; het script zet dat */
    .woorden{view-timeline-name:--zin}
    .woorden > span{animation:woordIn linear both;animation-timeline:--zin}

    /* De volle band heeft overflow:hidden om de achtergrondfoto binnen de
       ronding te houden, en is daardoor zelf een scrolgebied. Een kop die
       daarin staat wordt dan tegen dat vaste vlak gemeten in plaats van
       tegen de pagina, en blijft op een vaste stand hangen. Binnen de band
       hangt de beweging daarom aan de band zelf. */
    .band{view-timeline-name:--vlak}
    .band .woorden,.band .veeg{view-timeline-name:none}
    .band .woorden > span,.band .veeg > span{animation-timeline:--vlak}
    @keyframes woordIn{
      from{opacity:0;transform:translateY(20px) rotate(2deg)}
      to{opacity:1;transform:none}
    }

    /* C · het getal loopt op met de scrolpositie. De echte waarde staat in
       de tekst eronder, die onzichtbaar is maar wel wordt voorgelezen; het
       meelopende cijfer ligt daar overheen en telt niet mee voor spraak. */
    .ctab{view-timeline-name:--telkaart}
    .telop{animation:telOp linear both;animation-timeline:--telkaart;
      animation-range:entry 20% cover 55%}
    @keyframes telOp{from{--tel:0}to{--tel:var(--doel)}}
    .telop b{visibility:hidden}
    .telop b::after{visibility:visible;position:absolute;left:0;top:0;
      content:counter(getal) attr(data-na);counter-reset:getal var(--tel)}

    /* D · de kaarten klappen overeind, per kolom iets later. De kaarten
       dragen op de ene pagina .up en op de andere .leef, dus beide staan
       hier genoemd. */
    .grid3 > .kaart.up,.grid3 > .kaart.leef,
    .branches > .branche.up,.branches > .branche.leef{
      animation-name:waaierIn;animation-range:entry 5% cover 34%}
    .grid3 > .kaart.up:nth-child(3n+2),.grid3 > .kaart.leef:nth-child(3n+2),
    .branches > .branche.up:nth-child(3n+2),.branches > .branche.leef:nth-child(3n+2){
      animation-range:entry 11% cover 40%}
    .grid3 > .kaart.up:nth-child(3n),.grid3 > .kaart.leef:nth-child(3n),
    .branches > .branche.up:nth-child(3n),.branches > .branche.leef:nth-child(3n){
      animation-range:entry 17% cover 46%}
    @keyframes waaierIn{
      from{opacity:0;transform:rotateX(34deg) translateY(40px) scale(.95)}
      to{opacity:1;transform:none}
    }

    /* E · de lijn loopt mee met het scrollen. De lijn draagt pathLength=1000,
       zodat het streepjespatroon precies even lang is als de lijn zelf en er
       aan het eind geen stuk animatie overblijft waarin niets gebeurt. */
    .trekstreep path{stroke-dasharray:1000;stroke-dashoffset:1000;
      animation:trekken linear both;animation-timeline:view();
      animation-range:entry 10% cover 55%}
    @keyframes trekken{to{stroke-dashoffset:0}}
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   DE TELEFOON
   Tachtig procent van de bezoekers komt op een telefoon. Dit blok staat
   daarom niet in de kantlijn maar draagt de hele opmaak.

   De aanleiding was één meting. Op een scherm van 390 pixels blijft er na
   de marges 346 over. Het woord "systeemkoppelingen" is bij 38 pixels
   bijna 400 pixels breed, en "procesautomatisering" nog een stuk meer.
   Een woord dat niet kan afbreken duwt zijn kolom breder dan het scherm.
   Omdat vrijwel alle roosters op `1fr` staan, en dat "minstens zo breed als
   de langste regel" betekent, duwde dat de hele kolom mee en verdween de
   marge aan de rechterkant. Het Nederlands zit vol met zulke
   samenstellingen, dus dat speelde op elke pagina.

   Drie dingen moesten daarom samen: woorden mogen afbreken, kolommen mogen
   krimpen, en de koppen worden op een klein scherm een maat kleiner.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · lange woorden mogen afbreken ─────────────────────────────────────
   overflow-wrap:break-word is een noodrem: een woord breekt alleen als het
   in zijn eentje niet op een hele regel past. Gewone woorden lopen dus
   normaal door naar de volgende regel.

   Ik heb hier eerst hyphens:auto bij gezet, met de Nederlandse
   afbreekregels. Dat pakte slecht uit: in de koppen verscheen "Wat kost
   maat-werk software" en "maatwerk softwa-re per projecttype", terwijl die
   woorden gewoon op de volgende regel pasten. Afbreken is bij een grote kop
   lelijker dan het probleem dat het oplost, dus het staat er niet meer in.
   De koppen zijn in plaats daarvan een maat kleiner gezet, zodat ook het
   langste woord op een regel past. */
h1,h2,h3,h4,p,li,dt,dd,figcaption,blockquote,summary,label,td,th,
.lead,.lab,.monoregel,.bron,.stat b,.stat span,.branche p,.kaart p{
  overflow-wrap:break-word}
/* losse cijfers, prijzen en telefoonnummers nooit afbreken */
.stat b,.teller,.ptbl td,.tabel td.n,.belnr,.trgrid .v{-webkit-hyphens:none;hyphens:none}

/* ── 2 · roosterkinderen mogen krimpen ────────────────────────────────────
   Zonder min-width:0 is de kleinste maat van een kolom die van zijn langste
   woord. Dat is precies wat de marge opat. */
.herorooster > *,.overblok > *,.hero .rooster > *,.paginarooster > *,
.stats > *,.waarom .wrap > *,.stapjes > *,.grid2 > *,.grid3 > *,
.ctabs > *,.calc > *,.kaartjes > *,.voet .fgrid > *,.branches > *,
.stappen > *,.contactrooster > *,.kanalen > *,.tijdlijn > *,.dagen > *,
.telrij > *,.waaier > *,.verhaal > *{min-width:0}

/* ── 3 · de koppen een maat kleiner op een klein scherm ───────────────────
   De onderwaarde van de clamp gold tot nu toe vanaf 820 pixels omlaag, dus
   een telefoon van 360 kreeg dezelfde 38 pixels als een tablet van 800. */
@media (max-width:820px){
  h1{font-size:clamp(30px,6.6vw,44px);letter-spacing:-0.03em;max-width:none}
  h2{font-size:clamp(24px,5.2vw,34px);letter-spacing:-0.024em}
  h3{font-size:19px}
  .lead{font-size:16.5px}
}
@media (max-width:380px){
  h1{font-size:clamp(26px,7.4vw,30px)}
  h2{font-size:clamp(21px,5.8vw,24px)}
}

/* ── 4 · de hero ──────────────────────────────────────────────────────────
   De kop bevat een tikker die woorden van heel verschillende lengte
   doorloopt. Zou het aantal regels per woord verschillen, dan verspringt de
   pagina bij elke wisseling. Nagemeten: bij 26 tot 30 pixels komen alle
   zeven woorden op twee regels uit, dus daar is de ruimte op gezet. */
@media (max-width:820px){
  .herorooster{gap:34px}
  .herorooster h1{font-size:clamp(29px,7vw,40px);min-height:2.1em;margin-bottom:22px}
  .hero{padding-top:44px}
  .hero .lead{margin-bottom:28px;max-width:none}
  .hero .stapel{padding:12px 0 56px}
}
/* Op de smalste toestellen moet ook "procesautomatisering" nog op één regel
   passen; bij 320 pixels is daar na de marges 288 voor. */
@media (max-width:380px){
  .herorooster h1{font-size:clamp(22px,6.8vw,27px)}
}

/* ── 5 · knoppen zijn tikdoelen ───────────────────────────────────────────
   Onder een centimeter valt lastig te raken. Apple houdt 44 pixels aan,
   Google 48. Op een telefoon staan ze bovendien onder elkaar en over de
   volle breedte, want naast elkaar past niet zonder af te knellen. */
@media (max-width:560px){
  .btn{padding:15px 24px;min-height:50px;display:inline-flex;
    align-items:center;justify-content:center;text-align:center}
  .knoppenrij{gap:12px;flex-direction:column;align-items:stretch}
  .knoppenrij .btn,.knoppenrij > a{width:100%}
  .pijllink{min-height:44px;display:inline-flex;align-items:center}
}

/* ── 6 · beweging op een telefoon ─────────────────────────────────────────
   Op een breed scherm schuiven lijsten en kaarten van opzij binnen. Op een
   telefoon werkt dat twee keer verkeerd. Ten eerste staat zo'n blok in zijn
   beginstand 26 pixels naar rechts, en dat is precies genoeg om buiten het
   scherm te steken: de pagina kon daardoor zijwaarts schuiven. Ten tweede
   leest zijwaartse beweging op een smal scherm onrustig, want het blok is
   even breed als het scherm zelf.
   Alles wat zijwaarts kwam, komt op een telefoon rustig van onderen. */
@supports (animation-timeline: view()){
  @media (max-width:820px) and (prefers-reduced-motion:no-preference){
    /* de nth-child-varianten moeten er los bij: die zijn een stap
       specifieker dan .kolom.up en zouden anders blijven winnen */
    .lijst > li.leef,.vraaglijst > li.leef,.kanaal.leef,.tl.leef,
    tr.leef,.kolom.up,.kolom.up:nth-child(odd),.kolom.up:nth-child(even),
    .kaartjes .kaartje.leef,.kaartjes .kaartje.up,
    .branche.leef,.grid3 > .kaart.up,
    .grid3 > .kaart.up:nth-child(3n+2),.grid3 > .kaart.up:nth-child(3n),
    .branches > .branche.leef:nth-child(3n+2),.branches > .branche.leef:nth-child(3n){
      animation-name:zachtOp;animation-range:entry 4% cover 26%}
    @keyframes zachtOp{
      from{opacity:0;transform:translateY(16px)}
      to{opacity:1;transform:none}
    }
    /* de kaarten kantelen niet meer naar voren: op deze maat is het
       perspectief zo kort dat het vervormt in plaats van diepte geeft */
    .grid3,.branches{perspective:none}
    /* getekende schermen komen recht omhoog in plaats van scheef */
    .tilt{animation-name:zachtOp;animation-range:entry 2% cover 30%}
  }
}

/* ── 7 · de tarieventabel wordt een reeks kaarten ─────────────────────────
   Vier kolommen waarvan er twee een zin bevatten, dat past niet op een
   telefoon. Zijwaarts schuiven was de vorige oplossing, maar je ziet niet
   dat het kan en vergelijken lukt dan alsnog niet. Elke regel is hier een
   kaartje; de kolomnaam komt uit data-kop op de cel. */
@media (max-width:640px){
  .tabel-scroll{overflow-x:visible}
  .tabel{display:block;font-size:15px;margin:22px 0 30px}
  .tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .tabel tbody,.tabel tr,.tabel td{display:block;width:100%}
  .tabel tr{border:1px solid var(--line);border-radius:16px;
    padding:18px 20px;margin-bottom:14px;background:var(--wit)}
  .bg-zacht .tabel tr{background:var(--wit)}
  .tabel td{border-bottom:0;padding:0}
  .tabel td + td{margin-top:12px}
  /* de eerste cel is de naam, de tweede het bedrag */
  .tabel td:first-child{font-weight:700;font-size:17.5px;line-height:1.3}
  .tabel td.n{font-size:20px;color:var(--ocean-donker);margin-top:4px}
  /* bij de overige cellen komt de kolomnaam erboven te staan */
  .tabel td:nth-child(n+3)::before{content:attr(data-kop);display:block;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .tabel td:nth-child(n+3){color:var(--muted);line-height:1.5}
}

/* ── 8 · de prijstabel houdt wel kolommen, maar smaller ───────────────────
   Daar staan alleen korte bedragen in, dus die blijft leesbaar. */
@media (max-width:560px){
  .ptbl{font-size:14.5px}
  .ptbl th,.ptbl td{padding-left:0;padding-right:10px}
  .ptbl td:last-child,.ptbl th:last-child{padding-right:0}
}

/* ── 9 · niets achter aanwijzen verstoppen ────────────────────────────────
   Twee blokken lieten hun tekst pas zien als je er met de muis overheen
   ging. Op een telefoon bestaat dat niet, dus stond daar een leeg vlak:
   twee van de drie kaarten in de hero waren blanco, en de toelichting bij
   elk vak van de procesplaat was onbereikbaar.

   De vraag is niet hoe breed het scherm is maar of er een muis is, dus
   staat dit op (hover:none) en niet op een breedte. Een smal venster op een
   laptop houdt zo gewoon het aanwijsgedrag. */
@media (hover:none){
  /* de selector moet even zwaar zijn als die hierboven, inclusief het
     nth-child, anders wint de regel die de tekst juist verbergt */
  .stapel.voorlaatst .skaart:nth-child(1) .sgroot,
  .stapel.voorlaatst .skaart:nth-child(1) .sklein,
  .stapel.voorlaatst .skaart:nth-child(2) .sgroot,
  .stapel.voorlaatst .skaart:nth-child(2) .sklein{opacity:1}
  .skaart::after{opacity:0}

  /* de toelichting in de procesplaat staat er meteen bij */
  button.ppvak em{max-height:none;opacity:1;margin-top:10px}
}

/* ── 10 · tikdoelen en leesbaarheid ───────────────────────────────────────
   Een vinger is geen muisaanwijzer. Apple houdt 44 pixels aan, Google 48.
   De links in de voettekst en de losse tekstlinks waren 22 tot 26 pixels
   hoog: raak te krijgen, maar je moet mikken. De ruimte eromheen groeit
   mee, dus de lijstjes worden ook rustiger om te lezen. */
@media (max-width:820px){
  .voet .fgrid a,.voet a:not(.logotype):not(.btn){
    display:inline-flex;align-items:center;min-height:44px}
  .lijnlink,.pijllink{min-height:44px;display:inline-flex;align-items:center;gap:8px}
  .vraaglijst > li a,.lijst > li a{min-height:40px;display:inline-flex;align-items:center}
  /* het chipje boven de kop miste er twee: 38 in plaats van 44 */
  .nuchip{min-height:44px}
  /* de kleine kaarttekst is op een telefoon te licht om prettig te lezen */
  .sklein{font-size:13.5px}
  .skaart .sgroot{font-size:17px}
}

/* ── 11 · de rekenhulp onder de duim ──────────────────────────────────────
   De greep van een schuif is 26 pixels. Met een muis is dat ruim, met een
   duim is het mikken, zeker omdat het spoor er maar 2 dik is. Op een
   aanraakscherm wordt de greep groter en het spoor iets steviger. */
@media (hover:none){
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-runnable-track{height:4px}
  input[type=range]::-moz-range-track{height:4px}
  input[type=range]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-14px}
  input[type=range]::-moz-range-thumb{width:32px;height:32px}
}

/* ══ de hoofdpagina beweegt rustiger ══════════════════════════════════════
   Op de binnenpagina's past de beweging bij het soort blok: lijsten
   schuiven van links binnen zoals je ze leest, cijfers groeien, schermen
   kantelen. Op de hoofdpagina werkte dat niet. Daar staan die soorten kort
   na elkaar, en dan valt vooral het zijwaarts schuiven op, waardoor de
   rustiger bewegingen ernaast lijken stil te staan.

   Op de hoofdpagina komt daarom alles op dezelfde manier omhoog, binnen
   hetzelfde stukje scroll. De binnenpagina's blijven zoals ze waren.
   (Marc, 11 augustus) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .thuis .leef,.thuis .up,.thuis .tilt,
    .thuis .lab.leef,.thuis .vragen details.leef,
    .thuis .lijst > li.leef,.thuis .vraaglijst > li.leef,
    .thuis .kanaal.leef,.thuis .tl.leef,.thuis tr.leef,
    .thuis .kolom.up,.thuis .kolom.up:nth-child(odd),.thuis .kolom.up:nth-child(even),
    .thuis .kaartjes .kaartje.leef,.thuis .kaartjes .kaartje.up,
    .thuis .branche.leef,.thuis .kaart.up,.thuis .stat.up,
    .thuis .dag.leef,.thuis .stap.leef,.thuis .kaartje.leef,.thuis .metingblok.leef,
    .thuis .mblok .in > .leef{
      animation-name:thuisOp;
      animation-range:entry 2% cover 16%}
    /* De doorzichtigheid is op 40 procent van het bereik al weg, de rest is
       alleen nog de laatste centimeters van de beweging. Anders lees je een
       blok terwijl het nog aan het verschijnen is, en dat oogt vervaagd in
       plaats van levendig. Op een telefoon staan drie kaartjes onder elkaar
       tegelijk in beeld, en dan zie je dat verschil meteen. */
    @keyframes thuisOp{
      from{opacity:0;transform:translateY(20px)}
      40% {opacity:1}
      to  {opacity:1;transform:none}
    }
    /* de getekende schermen mogen hun eigen tempo houden: ze zijn groter,
       dus ze hebben iets meer scroll nodig om niet te schokken */
    .thuis .tilt{animation-range:entry 3% cover 38%}
  }
}

/* ══ nog een ronde na de livegang (Marc, 11 augustus) ═════════════════════ */

/* Het chipje boven de kop stond half in mono (het woord NU) en half in
   Poppins. Elders op de site staan zulke labels helemaal in mono. */
.nuchip span{font-family:var(--mono);font-size:13px;letter-spacing:.02em}
@media (max-width:560px){ .nuchip span{font-size:12px} }

@media (max-width:820px){
  /* De schuine kaartenstapel naast de hero heeft op een smal scherm geen
     functie meer: hij staat dan onder de kop in plaats van ernaast, en duwt
     de knoppen en de rest van de pagina omlaag. De inhoud ervan staat verderop
     op de pagina toch al uitgeschreven. */
  .hero .stapel{display:none}
  .herorooster{gap:0}

  /* In de sectie met de voorbeeldschermen staan de keuzeknoppen onder de
     tekening. Op een telefoon zie je dan eerst een plaatje zonder te weten
     dat er iets te kiezen valt. Knoppen dus eerst. */
  #bouwen .grid2{display:flex;flex-direction:column;gap:26px}
  #bouwen .grid2 > div:last-child{order:-1}
  #bouwen .kaartjes{margin-top:0}
}

/* ══ de keuzebalk over meten ══════════════════════════════════════════════
   Onderaan, niet over de hele pagina heen: een balk die de site afdekt tot
   je iets kiest is een drempel, geen keuze. Beide knoppen zijn even groot
   en even opvallend, want weigeren moet net zo makkelijk zijn als toestaan.
   Dat is niet alleen netjes, het is ook wat de regels voorschrijven. */
.cookiebalk{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--wit);border-top:1px solid var(--line);
  box-shadow:0 -22px 44px -34px rgba(13,12,29,.5);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom)}
.cookiebalk.open{transform:none}
.cookiebalk-in{max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter);
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cookiebalk p{margin:0;flex:1 1 380px;min-width:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.cookiebalk p a{color:var(--ocean-donker)}
.cookieknoppen{display:flex;gap:12px;flex-shrink:0}
.cookiebalk .btn{font-size:14px;padding:12px 22px}
@media (prefers-reduced-motion:reduce){ .cookiebalk{transition:none} }
@media (max-width:640px){
  .cookiebalk-in{gap:16px;padding:18px var(--gutter)}
  .cookieknoppen{width:100%}
  .cookieknoppen .btn{flex:1;justify-content:center;min-height:48px;
    display:inline-flex;align-items:center}
}

/* het vakje op de privacypagina waar je je keuze terugziet */
.keuzestand{background:var(--wit);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;margin-top:20px}
.keuzestand .huidig{margin:0;font-weight:700;color:var(--ink)}
.keuzestand .huidig.aan{color:var(--ocean-donker)}

/* Op 320 pixels schoot de contactregel 2 pixels buiten beeld. Oorzaak: het
   icoon staat vast op 44 breed, de tekst mag niet krimpen onder zijn langste
   woord, en het pijltje erachter paste er net niet meer bij. Op de smalste
   toestellen valt het pijltje daarom weg; het is versiering, de hele regel is
   toch al aanklikbaar. */
@media (max-width:360px){
  .kanaal{gap:12px;padding:16px}
  .kanaal .kpijl{display:none}
  .ktekst{min-width:0}
}

/* De knop in een uitlegpaneel staat op white-space:nowrap en flex:0 0 auto,
   zodat hij op een breed scherm niet wordt samengeknepen. Op 320 pixels is
   "Wat we bouwen voor groothandels" daardoor breder dan het scherm. Daar mag
   hij wel afbreken en de volle breedte pakken. */
@media (max-width:560px){
  .bronknop{flex:1 1 auto;white-space:normal;width:100%;text-align:center;
    justify-content:center;display:inline-flex;align-items:center;min-height:48px}
}