/* AskHenk — werkplek-ontwerp (november 2026)
   Rustig en neutraal: wit en lichtgrijs, paars als werkkleur, zwart voor tekst.
   Kleur alleen in banners en enkele secties.
   Werkkleur is #5b3fe0: het lichtere #7b61ff haalt op wit de leesbaarheidsgrens
   niet (4,2 van de 4,5) en blijft daarom alleen op donkere vlakken in gebruik. */
/* De lettertypes staan op onze eigen server. Geen verzoek naar Google bij
   elke paginaweergave, en dus waar wat de cookieverklaring belooft. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/public-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/public-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/public-sans-latin-600-normal.woff2') format('woff2')}

:root{
  --bg:#f3f4f6;          /* werkvlak achter de blokken */
  --side:#f3f4f6;        /* linkermenu */
  --card:#ffffff;
  --line:#e3e3ea;
  --line-2:#d4d4de;
  --ink:#121218;
  --ink-2:#474754;
  --ink-3:#6c6c7b;
  --pp:#5b3fe0;          /* werkkleur */
  --pp-d:#4426c4;        /* dieper, voor hover */
  --pp-l:#eeecfe;        /* lichte tint */
  --pp-xl:#f7f6ff;       /* heel lichte tint */
  --pp-br:#cec7fa;       /* rand op een tint */
  --pp-lt:#7b61ff;       /* het lichte huispaars: alleen op donker */

  /* De werkkleur van de pagina. Staat standaard op paars; een
     baliepagina zet hem op zijn eigen kleur (zie body.d-*). De topbalk,
     het logo en het Henk-venster blijven altijd paars: dat is het merk. */
  --accent:#5b3fe0;
  --accent-d:#4426c4;
  --accent-l:#eeecfe;
  --accent-xl:#f7f6ff;
  --accent-br:#cec7fa;
  --navy:#17122e;
  --slate:#2f2a42;
  /* opvrolijkers voor banners en grafieken */
  --red:#d93a2b;
  --amber:#f2a516;
  --green:#1f8a5b;
  --teal:#0f7c86;
  --r:12px;              /* hoekafronding van blokken */
  --r-s:8px;
  --top:64px;
  --sw:272px;            /* breedte linkermenu */
  --hp-w:400px;          /* breedte Henk-venster */
  --shadow:0 1px 2px rgba(18,18,24,.05),0 1px 3px rgba(18,18,24,.06);
  --shadow-h:0 8px 24px -8px rgba(18,18,24,.18);
  --fh:'Plus Jakarta Sans',system-ui,sans-serif;
  --fb:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);font-size:16px;line-height:1.62;color:var(--ink-2);background:var(--bg);font-weight:400;min-height:100vh;overflow-x:hidden}
img,svg,picture,video{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
strong,b{font-weight:600;color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pp);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:600;background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 var(--r-s) 0;font-weight:600}
.skip:focus{left:0}

/* ── koppen ──────────────────────────────────────────────────────
   Eén plek waar alle koptekengroottes staan. Verander de getallen
   hieronder en de hele site volgt. Twee knoppen, niet één: de
   grootte én het gewicht. Een kop van 24px in 800 schreeuwt harder
   dan dezelfde 24px in 700, dus die twee horen bij elkaar. */
:root{
  --kop-h1:26px;     /* paginatitel */
  --kop-h2:21px;     /* sectiekop */
  --kop-h3:16px;     /* kopje binnen een sectie */
  --kop-h4:14.5px;
  --kop-hero:28px;   /* alleen de openingskop van een pagina */
  --kop-vet:700;     /* gewicht van alle koppen */
}
h1,h2,h3,h4,.hero-h1,.hero-h2{font-family:var(--fh);font-weight:var(--kop-vet);color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--kop-h1);line-height:1.2}
h2{font-size:var(--kop-h2);line-height:1.25}
h3{font-size:var(--kop-h3);line-height:1.35;letter-spacing:-.008em}
h4{font-size:var(--kop-h4);line-height:1.4;letter-spacing:0}
.hero-h1{font-size:var(--kop-hero);line-height:1.18;letter-spacing:-.02em}
.hero-h2{font-size:calc(var(--kop-h2) - 2px);line-height:1.35;letter-spacing:-.01em;color:var(--accent);margin-top:12px}
h1,h2,h3,h4{overflow-wrap:anywhere}

/* ── geen cursief ────────────────────────────────────────────────
   Nadruk leggen we met grootte of kleur, nooit met schuine letters. */
em,i,cite,address{font-style:normal}
/* In lopende tekst is de tekst grijs en de nadruk zwart. */
.prose em,p em,li em{color:var(--ink);font-weight:600}
/* In een kop is de eerste regel zwart en de tweede grijs. */
/* Nadruk in een kop wordt grijs, nooit cursief. Alleen de nadruk áchteraan
   krijgt een eigen regel: zo blijft "Verkoop Henk. / Verdien elke maand mee."
   netjes in twee regels, zonder dat een nadruk midden in een zin de rest
   van die zin naar beneden duwt. */
h1 em,h2 em,h3 em,.hero-h1 em,.hero-h2 em,.qz-q em{color:var(--ink-3);font-weight:inherit}
h1>em:last-child,h2>em:last-child,h3>em:last-child,
.hero-h1>em:last-child,.hero-h2>em:last-child,.qz-q>em:last-child{display:block}
.bn :is(h1,h2,h3) em{color:#fff;opacity:.68}

/* ── TOPBALK ── */
.tb{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:300;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px 0 10px}
body.hp-push .tb{right:var(--hp-w)}
.tb-menu{flex:none;width:44px;height:44px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.tb-menu:hover{background:var(--bg)}
.logo{flex:none;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important;margin-right:8px}
.logo-mark{width:34px;height:34px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.logo-mark i{display:block;border-radius:2px}
.logo-mark i:nth-child(1){background:var(--ink)}
.logo-mark i:nth-child(2){background:var(--pp)}
.logo-mark i:nth-child(3){background:#bdbdc9}
.logo-mark i:nth-child(4){background:var(--ink)}
.logo-txt{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.logo-txt small{display:block;font-family:var(--fb);font-weight:400;font-size:11px;letter-spacing:.02em;color:var(--ink-3);margin-top:2px}

.ask{flex:1 1 auto;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:10px;height:46px;background:#f0f0f4;border:1px solid transparent;border-radius:var(--r-s);padding:0 6px 0 8px;transition:background .15s,border-color .15s,box-shadow .15s}
.ask:hover{background:#e9e9ef}
.ask:focus-within{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-h)}
.ask-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center 20%;background:#e2e2ea}
.ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px;color:var(--ink)}
.ask input::placeholder{color:var(--ink-3)}
.ask button{flex:none;border:0;background:var(--pp);color:#fff;font-weight:600;font-size:14px;height:34px;padding:0 14px;border-radius:6px;cursor:pointer;white-space:nowrap}
.ask button:hover{background:var(--pp-d)}

.tb-acts{flex:none;display:flex;align-items:center;gap:2px}
.tb-act{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;padding:4px 6px;border-radius:var(--r-s);color:var(--ink-2);font-size:11.5px;line-height:1.2;text-decoration:none!important}
.tb-act svg{width:22px;height:22px}
.tb-act:hover{background:var(--bg);color:var(--ink)}
.tb-act.tb-cta{flex-direction:row;gap:8px;background:var(--pp);color:#fff;font-size:14px;font-weight:600;padding:0 16px;height:40px;margin-left:8px}
.tb-act.tb-cta:hover{background:var(--pp-d);color:#fff}
.tb-act.tb-cta svg{width:18px;height:18px}
.lang{display:flex;align-items:center;gap:4px;font-size:12.5px;letter-spacing:.06em;margin:0 6px 0 10px;color:var(--ink-3)}
.lang a{color:var(--ink-3);padding:4px 3px;text-decoration:none!important}
.lang a.on{color:var(--ink);font-weight:600}
.tb-henk{display:none}

/* ── LINKERMENU ── */
.sb{position:fixed;top:var(--top);left:0;bottom:0;width:var(--sw);z-index:200;background:var(--side);overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 28px;scrollbar-width:thin;scrollbar-color:#e3e3ea transparent;transition:transform .22s cubic-bezier(.4,0,.2,1)}
/* de schuifbalk van het menu: dun en licht, niet de grijze balk
   die de browser standaard tekent */
.sb::-webkit-scrollbar{width:4px}
.sb::-webkit-scrollbar-track{background:transparent}
.sb::-webkit-scrollbar-thumb{background:#e3e3ea;border-radius:2px}
.sb:hover::-webkit-scrollbar-thumb{background:#d4d4de}
.hp-log{scrollbar-width:thin;scrollbar-color:#e3e3ea transparent}
.hp-log::-webkit-scrollbar{width:4px}
.hp-log::-webkit-scrollbar-track{background:transparent}
.hp-log::-webkit-scrollbar-thumb{background:#e3e3ea;border-radius:2px}
.sb-sec{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:18px 14px 6px}
.sb a.sb-i,.sb summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;border-radius:999px;color:var(--ink);font-size:14.5px;line-height:1.3;text-decoration:none!important;cursor:pointer;list-style:none}
.sb summary::-webkit-details-marker{display:none}
.sb a.sb-i:hover,.sb summary:hover{background:#e6e6ec}
.sb a.sb-i.on{background:var(--pp);color:#fff;font-weight:600}
.sb a.sb-i.on .sb-ic{color:#fff}
.sb-ic{flex:none;width:20px;height:20px;color:var(--ink-3)}
.sb-ic svg{width:20px;height:20px}
.sb details{border-radius:18px;margin:2px 0}
.sb details[open]{background:#fff;padding:4px 0 8px;margin:6px 0;box-shadow:var(--shadow)}
.sb details[open]>summary{border-radius:18px}
.sb summary .sb-chev{margin-left:auto;flex:none;transition:transform .2s;color:var(--ink-3)}
.sb details[open]>summary .sb-chev{transform:rotate(180deg)}
.sb summary .sb-tag{flex:none;font-size:11px;font-weight:600;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--ink);color:#fff}
.sb details a.sb-i{padding-left:48px;font-size:14px;min-height:40px}
.sb details a.sb-i.on{margin:0 8px;padding-left:40px}
.sb-foot{margin:22px 8px 0;padding:16px 14px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);font-size:13px;line-height:1.5}
.sb-foot p{margin-bottom:10px}
.sb-foot a{font-weight:600}
body.sb-closed .sb{transform:translateX(-100%)}
.sb-scrim{display:none}

/* ── HOOFDVLAK ── */
.main{padding:calc(var(--top) + 20px) 24px 0 calc(var(--sw) + 24px);transition:padding .22s cubic-bezier(.4,0,.2,1)}
body.sb-closed .main{padding-left:24px}
body.hp-push{padding-right:var(--hp-w);transition:padding-right .28s cubic-bezier(.4,0,.2,1)}
.wrap{max-width:1160px;margin:0 auto}

/* paginakop in de stijl van een dashboard */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:6px 2px 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);margin-bottom:8px}
.crumbs a{color:var(--ink-3)}
.crumbs span[aria-hidden]{opacity:.6}
.ph h1{margin-bottom:6px}
.ph-lead{max-width:760px;font-size:16.5px;color:var(--ink-2)}
.ph-acts{display:flex;gap:10px;flex-wrap:wrap}
.status{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--ink-2);margin-bottom:10px}
.status span{display:inline-flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block}
.dot.pp{background:var(--accent)}.dot.amber{background:var(--amber)}.dot.grey{background:#a5a5b2}

/* blokken */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:28px 30px;margin-bottom:20px;min-width:0}
.card>h2:first-child,.card>.eyebrow+h2{margin-bottom:12px}
.card h2+p,.card .lead{font-size:16.5px;max-width:780px}
.card p+p{margin-top:12px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;margin:-6px 0 18px;border-bottom:1px solid var(--line)}
.card-head h3{display:flex;align-items:center;gap:10px;font-size:15px}
.card-head h3 svg{width:20px;height:20px;color:var(--ink-3)}
.card.flat{box-shadow:none}
.card.tint{background:var(--accent-xl);border-color:#ded8fc}
.card.grey{background:#f8f8fa}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.eyebrow i{width:8px;height:8px;border-radius:2px;background:currentColor;display:inline-block}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.grid>.card{margin-bottom:0}
.stack>*+*{margin-top:20px}
.mt{margin-top:24px}.mt-s{margin-top:14px}.mb{margin-bottom:20px}
.muted{color:var(--ink-3)}
.small{font-size:14px}
.note{font-size:13.5px;color:var(--ink-3);margin-top:14px}
.wrap>.grid,.card+.grid{margin-bottom:20px}
/* Een sectie zonder eigen opmaak staat anders tegen de volgende aan.
   Banners en kaarten brengen hun eigen marge mee, deze niet. */
.wrap>section:not([class]){margin-bottom:38px}

/* KPI-tegels */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:20px}
.kpi{padding:16px 18px 18px;border-right:1px solid var(--line);min-width:0}
.kpi:last-child{border-right:0}
.kpi-l{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.kpi-v{font-family:var(--fh);font-weight:var(--kop-vet);font-size:var(--kop-h2);letter-spacing:-.02em;color:var(--ink);margin-top:6px;line-height:1.2}
.kpi-s{font-size:13px;color:var(--ink-3);margin-top:4px}
.kpi.k-pp{background:var(--accent)}.kpi.k-red{background:var(--red)}.kpi.k-navy{background:var(--navy)}.kpi.k-green{background:var(--green)}
.kpi:is(.k-pp,.k-red,.k-navy,.k-green) :is(.kpi-l,.kpi-v,.kpi-s){color:#fff}
.kpi:is(.k-pp,.k-red,.k-navy,.k-green) .kpi-s{opacity:.85}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-s);font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-d)}
.btn-d{background:var(--ink);color:#fff}.btn-d:hover{background:var(--slate)}
.btn-o{background:#fff;color:var(--ink);border-color:var(--line-2)}.btn-o:hover{border-color:var(--ink-3)}
.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{background:#efeff4}
.btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.btn-g:hover{border-color:#fff}
.btn-wa{background:#1faa54;color:#fff}.btn-wa:hover{background:#17853f}
/* een icoon in een knop heeft geen eigen maat en valt zonder dit weg */
.btn svg{flex:none;width:18px;height:18px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
/* een regel uitleg naast een knop, kleiner en lichter */
.btn-naast{font-size:13.5px;color:var(--ink-3);max-width:360px;line-height:1.45}
.link{font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.link:after{content:'→';transition:transform .15s}
.link:hover:after{transform:translateX(3px)}

/* banners mogen kleur hebben */
.bn{position:relative;overflow:hidden;border-radius:var(--r);padding:34px 36px;margin-bottom:20px;color:#fff;background:var(--navy)}
.bn h2,.bn h3,.bn strong{color:#fff}
.bn h2{margin-bottom:10px}
.bn h3+p{margin-top:8px}
.bn p{color:rgba(255,255,255,.84);max-width:680px}
.bn .eyebrow{color:rgba(255,255,255,.78)}
.bn a:not(.btn){color:#fff;text-decoration:underline}
.bn-pp{background:linear-gradient(120deg,#5b3fe0,#3a1fa6)}
.bn-blue{background:linear-gradient(120deg,#1c5bd9,#123f9c)}
.bn-navy{background:linear-gradient(120deg,#17122e,#2b2250)}
.bn-zwart{background:linear-gradient(120deg,#1c1c24,#0d0d11)}
.bn-teal{background:linear-gradient(120deg,#0f7c86,#0b5a62)}
.bn-amber{background:#f6b42c;color:var(--ink)}
.bn-amber :is(h2,h3,strong){color:var(--ink)}
.bn-amber p{color:#3d3014}
.bn-amber .eyebrow{color:#5c430a}
.bn-amber a:not(.btn){color:#3d3014}
.bn-red{background:linear-gradient(120deg,#d93a2b,#a92a1e)}
.bn-shape{position:absolute;right:-40px;top:-40px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.bn-shape+.bn-shape{right:120px;top:auto;bottom:-120px;width:200px;height:200px}
.bn>*{position:relative}
.bn img{height:auto}
/* banner met tekst links en iets rechts */
.bn-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:34px;align-items:center}

/* HERO op de homepage met Henk */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:20px}
.hero-txt{padding:44px 44px 40px}
.hero-txt .ph-lead{font-size:17.5px;margin-top:16px}
.hero-art{position:relative;background:radial-gradient(420px 360px at 60% 60%,#e4ddfd,transparent 70%),linear-gradient(180deg,#f6f4fd,#eeebf8);min-height:420px;overflow:hidden}
.hero-art picture,.hero-art>img{position:absolute;bottom:-24px;right:4%;height:100%}
.hero-art picture img,.hero-art>img{height:100%;width:auto;max-width:none}
.hero-bubble{position:absolute;left:16px;bottom:34%;max-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;box-shadow:var(--shadow-h);padding:14px 16px;font-size:14.5px;line-height:1.5;color:var(--ink);cursor:pointer;text-align:left}
.hero-bubble span{display:block;margin-top:8px;color:var(--accent);font-weight:600;font-size:13.5px}
.hero-bubble:hover{border-color:var(--line-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);background:#f3f3f6;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
button.pill{cursor:pointer}
button.pill:hover{background:var(--accent-l);border-color:var(--accent-br);color:var(--accent-d)}

/* servicekaarten */
.svc{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;box-shadow:var(--shadow);color:var(--ink-2);text-decoration:none!important;transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.svc:hover{border-color:var(--accent-br);box-shadow:var(--shadow-h);transform:translateY(-1px);text-decoration:none}
.svc-ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--accent-l);color:var(--accent);margin-bottom:6px}
.svc-ic svg{width:22px;height:22px}
.svc-ic.c-red{background:#fdeceb;color:var(--red)}.svc-ic.c-amber{background:#fef4df;color:#a76c00}.svc-ic.c-green{background:#e5f4ec;color:var(--green)}.svc-ic.c-teal{background:#e3f3f4;color:var(--teal)}.svc-ic.c-ink{background:#ececf1;color:var(--ink)}
.svc-n{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.svc h3{color:var(--ink)}
.svc p{font-size:14.5px;line-height:1.55}
.svc .link{margin-top:auto;padding-top:8px;font-size:14px}
.svc,.card{overflow-wrap:break-word}

/* lijstjes */
.checks{list-style:none;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px}
/* Het vinkje is een masker, geen plaatje met een vaste kleur erin:
   zo kleurt het mee met de kleur van de pagina. */
.checks li:before{content:'';position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--accent-l)}
.checks li:after{content:'';position:absolute;left:3.5px;top:6.5px;width:12px;height:12px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.checks.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.crosses{list-style:none;display:grid;gap:10px}
.crosses li{position:relative;padding-left:30px}
.crosses li:before{content:'';position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:#fdeceb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93a2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/11px no-repeat}

.prose ul,.prose ol{padding-left:22px;display:grid;gap:6px;margin:12px 0}
.prose p{margin-top:12px}
.prose p:first-child{margin-top:0}
.prose h2{margin:36px 0 10px}
.prose h3{margin:26px 0 6px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose blockquote{border-left:3px solid var(--accent);background:var(--accent-xl);padding:14px 18px;margin:16px 0;border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink)}
.prose img{border-radius:var(--r-s);margin:14px 0}
.prose figure{margin:16px 0}
.prose figcaption{font-size:13px;color:var(--ink-3);margin-top:6px}
.prose .grid{margin-top:14px}
.prose .eyebrow{margin-top:4px}
.prose a.svc{color:var(--ink-2)}
.prose a.svc h3,.prose a.svc h4{color:var(--ink)}
.prose table p{margin:0}
.prose>img,.prose>p>img{max-height:460px;width:100%;object-fit:cover}
.prose ul.checks,.prose ul.crosses{padding-left:0}

/* stappen */
.steps{counter-reset:s;display:grid;gap:0}
.step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:0 0 22px}
.step:before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent);font-family:var(--fh);font-weight:700;font-size:15px;display:grid;place-items:center;position:relative;z-index:1}
.step:after{content:'';position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--line)}
.step:last-child{padding-bottom:0}
.step:last-child:after{display:none}
.step h3{margin:6px 0 4px}
.step p{font-size:15px}

/* definitieblok */
.def{border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:var(--r-s);padding:22px 24px;background:#fbfbfc}
.def-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.def-q{font-family:var(--fh);font-weight:var(--kop-vet);font-size:var(--kop-h3);color:var(--ink);margin-bottom:10px}
.def p{color:var(--ink)}
.def em{font-style:italic}
.def-sig{margin-top:14px;font-size:13.5px;color:var(--ink-3)}

/* tabellen */
.kolomnaam{display:none}
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:#f7f7f9;color:var(--ink);font-weight:600;font-size:13.5px}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-family:var(--fh);font-weight:700;font-size:15.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:22px;line-height:1;color:var(--ink-3);flex:none}
.faq details[open] summary:after{content:'–'}
.faq details>div{padding:0 0 18px;max-width:820px}
.faq>details:first-of-type{border-top:0}
.prose .faq,.prose details{display:block}
.prose details summary{list-style:none}

/* tabbladen */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{border:0;background:none;padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--ink-2);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.tab[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.tabp[hidden]{display:none}

/* grafieken en schermafbeeldingen */
.chart{width:100%;height:auto}
.chart text{font-family:var(--fb);font-size:12px;fill:var(--ink-3)}
.chart .t-ink{fill:var(--ink)}
.chart .t-w{fill:#fff}
.chart .t-b{font-weight:600}
.chart .t-l{font-size:14px}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--ink-2);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.fig-note{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.shot{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;box-shadow:var(--shadow-h)}
.shot img{width:100%;height:auto}

/* platforms en kanalen */
.plat{display:flex;align-items:center;gap:12px}
.plat-b{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff;font-family:var(--fh);font-weight:700;font-size:15px;overflow:hidden}
.plat-b img{width:22px;height:22px;object-fit:contain}
.p-li{background:#0a66c2}.p-meta{background:#1d4ed8}.p-tt{background:#111}.p-yt{background:#e1251b}.p-wa{background:#1faa54}.p-g{background:#fff;border:1px solid var(--line);color:var(--ink)}
.plat-t b{display:block;font-family:var(--fh);font-size:14.5px;color:var(--ink)}
.plat-t small{font-size:13px;color:var(--ink-3)}

/* QUIZ */
.qz{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qz-top{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.qz-back{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer;font-size:13.5px}
.qz-bar{height:4px;background:#eeeef2}
.qz-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.qz-stage{padding:24px 22px 26px}
.qz-q{font-family:var(--fh);font-weight:var(--kop-vet);font-size:var(--kop-h2);color:var(--ink);line-height:1.3;margin-bottom:6px}
.qz-hint{font-size:14px;color:var(--ink-3);margin-bottom:14px}
.qz-opts{display:grid;gap:10px;margin-top:16px}
.qz-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-s);padding:13px 16px;cursor:pointer;font-size:15px;color:var(--ink);transition:border-color .12s,background .12s}
.qz-opt:hover{border-color:var(--accent);background:var(--accent-xl)}
.qz-opt.sel{border-color:var(--accent);background:var(--accent-l)}
.qz-k{flex:none;width:28px;height:28px;border-radius:6px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--ink-3)}
/* een keuze met een regel uitleg eronder */
.qz-tx{flex:1;min-width:0}
.qz-tx b{display:block;font-weight:600;line-height:1.3}
.qz-tx small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.qz-opt[aria-invalid],.fld input[aria-invalid=true]{border-color:var(--red)}
.qz .form{margin-top:16px}
.qz .btns{margin-top:16px}
.qz-opt:hover .qz-k,.qz-opt.sel .qz-k{border-color:var(--accent);color:var(--accent)}
.qz-res-t{font-family:var(--fh);font-weight:var(--kop-vet);font-size:var(--kop-h2);color:var(--ink);margin-bottom:8px}
.qz-meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.qz-m{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.qz-m b{display:block;font-family:var(--fh);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.qz-m span{display:block;height:6px;background:#eeeef2;border-radius:3px;margin-top:8px;overflow:hidden}
.qz-m span i{display:block;height:100%;background:var(--accent)}
.qz-m small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:6px}

/* formulieren */
.form{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:grid;gap:6px;font-size:14px;color:var(--ink)}
.fld>span{font-weight:500}
.fld em{font-style:normal;color:var(--ink-3);font-weight:400}
.fld input,.fld textarea,.fld select{width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff;padding:10px 12px;font-size:15px;color:var(--ink);outline:0}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
.fld textarea{min-height:110px;resize:vertical}
.tel{display:flex;gap:8px}
.tel select{flex:0 0 132px;width:132px}
.tel input{flex:1;min-width:0}
.form-err{color:var(--red);font-size:14px}
.form-ok{background:#e5f4ec;border:1px solid #bfe3cf;border-radius:var(--r-s);padding:18px 20px;color:#0f4f33}
.form-ok strong{color:#0f4f33}
.hp-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* PRIJZEN: pakketsamensteller */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.cfg-sum{position:sticky;top:calc(var(--top) + 20px)}
.mod{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.mod:last-child{border-bottom:0}
.mod input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);margin-top:2px;cursor:pointer}
.mod h4{font-size:15.5px}
.mod p{font-size:14px;color:var(--ink-3);margin-top:2px}
.mod-p{text-align:right;font-size:14px;color:var(--ink);white-space:nowrap}
.mod-p small{display:block;color:var(--ink-3);font-size:12.5px}
.mod-opt{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.mod-opt label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.mod-opt input{accent-color:var(--accent)}
.mod-opt select{border:1px solid var(--line-2);border-radius:var(--r-s);padding:6px 10px;font-size:14px;background:#fff}
.mod.dis{opacity:.55}
.sum-l{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0;color:var(--ink-2)}
.sum-l b{font-weight:500;color:var(--ink);white-space:nowrap}
.sum-t{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.sum-t span{font-size:14px;color:var(--ink-2)}
.sum-t b{font-family:var(--fh);font-size:var(--kop-h1);font-weight:var(--kop-vet);color:var(--ink)}
.sum-empty{font-size:14px;color:var(--ink-3);padding:10px 0}
.flag{display:flex;gap:10px;align-items:flex-start;background:#fff7e0;border:1px solid #f4d98a;border-radius:var(--r-s);padding:12px 14px;font-size:13.5px;color:#5c430a;margin-bottom:16px}

/* FOOTER */
.ft{margin:36px -24px 0;padding:36px 24px 28px;border-top:1px solid var(--line);background:#fff}
.ft-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.ft h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-family:var(--fb);font-weight:600}
.ft ul{list-style:none;display:grid;gap:8px;font-size:14px}
.ft ul a{color:var(--ink-2)}
.ft p{font-size:14px;max-width:340px;margin-top:12px}
.ft-bot{max-width:1160px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-3)}
.ft-bot button{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:13px;text-decoration:underline}

/* ── HENK-VENSTER RECHTS ── */
.hp{position:fixed;top:0;right:0;z-index:400;width:var(--hp-w);height:100vh;height:100dvh;display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 32px -20px rgba(18,18,24,.35);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);visibility:hidden}
.hp.open{transform:translateX(0);visibility:visible}
.hp-hd{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);min-height:var(--top)}
.hp-hd img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 20%}
.hp-nm{flex:1;min-width:0}
.hp-nm b{display:block;font-family:var(--fh);font-size:15.5px;color:var(--ink)}
.hp-nm small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.hp-nm small i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hp-ib{flex:none;width:36px;height:36px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-3)}
.hp-ib:hover{background:var(--bg);color:var(--ink)}
.hp-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:#f4f5f7}
.hp-m{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.hp-m.bot{background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.hp-m.me{background:var(--pp);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.hp-m a{color:inherit;text-decoration:underline}
.hp-typing{display:flex;gap:5px;padding:14px 16px}
.hp-typing i{width:7px;height:7px;border-radius:50%;background:#a5a5b2;animation:hpB 1.2s infinite ease-in-out}
.hp-typing i:nth-child(2){animation-delay:.2s}.hp-typing i:nth-child(3){animation-delay:.4s}
@keyframes hpB{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.hp-ft{flex:none;border-top:1px solid var(--line);padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:#fff}
.hp-human{display:flex;gap:8px;margin-bottom:10px}
.hp-human a{flex:1;display:flex;justify-content:center;align-items:center;gap:7px;min-height:40px;border-radius:var(--r-s);font-size:13.5px;font-weight:600;text-decoration:none!important;padding:0 10px;text-align:center;line-height:1.2}
.hp-human a.h-cal{background:#f2a516;color:#2c2004}
.hp-human a.h-cal:hover{background:#dd9510}
.hp-human a.h-wa{background:#1faa54;color:#fff}
.hp-human a.h-wa:hover{background:#17853f}
.hp-human a svg{flex:none;width:17px;height:17px}
.hp-in{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line-2);border-radius:12px;padding:6px 6px 6px 12px;background:#fff}
.hp-in:focus-within{border-color:var(--pp);box-shadow:0 0 0 3px var(--pp-l)}
.hp-in textarea{flex:1;min-width:0;border:0;outline:0;resize:none;font-size:15px;line-height:1.45;max-height:108px;padding:6px 0;background:transparent}
.hp-send{flex:none;width:36px;height:36px;border:0;border-radius:9px;background:var(--pp);color:#fff;display:grid;place-items:center;cursor:pointer}
.hp-send:hover{background:var(--pp-d)}
.hp-send:disabled{opacity:.5;cursor:default}
.hp-disc{font-size:11.5px;color:var(--ink-3);margin-top:8px;line-height:1.45;text-wrap:balance}
.hp-launch{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:350;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--ink);color:#fff;border-radius:999px;padding:6px 18px 6px 6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);font-weight:600;font-size:14.5px}
.hp-launch img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 20%}
.hp-launch:hover{background:var(--slate)}
body.hp-open .hp-launch{display:none}

/* cookiebalk */
.ck{position:fixed;left:16px;bottom:16px;z-index:500;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px -12px rgba(18,18,24,.35);padding:18px 20px;display:grid;gap:14px}
.ck[hidden]{display:none}
.ck p{font-size:14px}
.ck p strong{display:block;font-family:var(--fh);font-size:15px;margin-bottom:2px}
.ck-b{display:flex;gap:10px;justify-content:flex-end}

/* ── ASKHENK-EIGEN ONDERDELEN ── */

/* de vier balies in twee groepen */
.dgrp+.dgrp{margin-top:26px}
.dgrp-h{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dgrp-h b{font-family:var(--fh);font-weight:var(--kop-vet);font-size:var(--kop-h3);letter-spacing:-.01em;color:var(--ink)}
.dgrp-h span{font-size:14px;color:var(--ink-3);flex:1;min-width:200px}
.dgrp-h:after{content:'';flex:1;height:1px;background:var(--line);min-width:24px}
@media(max-width:620px){.dgrp-h:after{display:none}}

/* video: één verticale speler (9:16) met miniaturen ernaast */
.reels{display:grid;grid-template-columns:282px minmax(0,1fr);gap:26px;align-items:start}
.reel-main{position:relative;border-radius:var(--r);overflow:hidden;background:#15122a;box-shadow:var(--shadow-h);aspect-ratio:9/16}
.reel-main video{width:100%;height:100%;object-fit:cover;display:block;background:#15122a}
.reel-play{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.reel-play i{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.5)}
.reel-play i:after{content:'';width:0;height:0;border-left:19px solid var(--ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.reel-main.playing .reel-play{display:none}
.reel-cap{font-size:13.5px;color:var(--ink-3);margin-top:10px;text-align:center}
/* de kanalen waar het beeld heen gaat */
.kanalen{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kanalen span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);background:#f3f3f6;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 7px}
.kanalen img{width:20px;height:20px;object-fit:contain;border-radius:4px}

.reel-list{display:grid;gap:10px;margin-top:18px}
.reel-t{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:10px;cursor:pointer;transition:border-color .15s,background .15s}
.reel-t:hover{border-color:var(--accent-br);background:var(--accent-xl)}
.reel-t[aria-current=true]{border-color:var(--accent);background:var(--accent-l)}
/* height:auto is nodig: zonder dat wint het height-attribuut van de img
   en wordt aspect-ratio genegeerd. */
.reel-t img{flex:none;width:54px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:5px;background:#e2e2ea}
.reel-t span{flex:1;min-width:0}
.reel-t b{display:block;font-family:var(--fh);font-size:14.5px;color:var(--ink);line-height:1.3}
.reel-t small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.reel-t em{flex:none;font-style:normal;font-size:12px;color:var(--ink-3);letter-spacing:.04em;align-self:flex-start;padding-top:2px}
@media(max-width:900px){.reels{grid-template-columns:minmax(0,1fr)}.reel-main{max-width:282px;margin:0 auto}}
@media(max-width:600px){.reel-t{gap:10px;padding:8px}.reel-t img{width:44px}.reel-t b{font-size:13.5px}}

/* nostalgieband onder de blogverwijzing */
.nost{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.nost span{display:inline-flex;align-items:center;gap:7px;font-size:13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 13px;color:rgba(255,255,255,.88)}
.nost span i{width:8px;height:8px;border-radius:2px;display:inline-block;background:currentColor;opacity:.7}

/* nabouw van een eigen Henk-venster (voorbeeld in een kaart) */
.hm{background:#15122a;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:400px;box-shadow:var(--shadow-h);color:#e9e7f5;font-size:14px;max-width:460px;margin:0 auto}
.hm-hd{display:flex;align-items:center;gap:12px;padding:6px 4px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.hm-av{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 20%}
.hm-hd b{display:block;color:#fff;font-family:var(--fh)}
.hm-hd small{display:flex;align-items:center;gap:6px;color:#a593ff;font-size:12.5px}
.hm-hd small i{width:7px;height:7px;border-radius:50%;background:#22c55e}
.hm-hd span{flex:1;min-width:0}
.hm-log{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.hm-log p{background:#201c3d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;max-width:88%;line-height:1.5;font-size:13.5px;color:#e9e7f5!important;margin:0;border-bottom-left-radius:4px;align-self:flex-start}
.hm-log p.me,.hm-log p.hm-log-m.me{background:var(--pp-lt);border-color:transparent;color:#fff!important;align-self:flex-end;border-bottom-left-radius:12px;border-bottom-right-radius:4px}
/* de uitkomst van het gesprek, als een kaartje onderaan */
.hm-uit{display:flex;align-items:center;gap:10px;background:rgba(31,138,91,.16);border:1px solid rgba(63,191,106,.4);border-radius:10px;padding:11px 13px;color:#a6e8bf;font-size:13.5px}
.hm-uit svg{flex:none;width:18px;height:18px}
.hm-uit b{font-family:var(--fh);font-size:13.5px;color:#d6f5e2}
.hm-in{display:flex;gap:8px;align-items:center}
.hm-in span{flex:1;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:11px 12px;color:#837ba0;font-size:13.5px}
.hm-in b{width:40px;height:40px;border-radius:8px;background:var(--pp-lt);color:#fff;display:grid;place-items:center;font-size:15px}

/* het oude chatvenster van 2004, voor de blogband */
.old{background:#dfdfe6;border:1px solid #b9b9c4;border-radius:5px;overflow:hidden;font-family:Tahoma,Verdana,sans-serif;font-size:12.5px;color:#1c1c24;max-width:330px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.old-tb{background:linear-gradient(#5a74b8,#3c548f);color:#fff;padding:5px 9px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.old-tb i{font-style:normal;letter-spacing:1px;opacity:.9}
.old-bd{background:#fff;margin:7px;border:1px solid #9a9aa6;padding:9px;min-height:112px;line-height:1.5}
/* staat in een banner, dus de witte bannertekst moet hier terug naar zwart */
.bn .old,.bn .old p{color:#1c1c24;max-width:none}
.bn .old-bd b{color:#1b3f8f}
.bn .old-tb,.bn .old-tb span{color:#fff}
.bn .old-in span{color:#78788a}
.old-bd p+p{margin-top:7px}
.old-in{margin:0 7px 7px;display:flex;gap:5px}
.old-in span{flex:1;background:#fff;border:1px solid #9a9aa6;padding:5px 7px;color:#78788a}
.old-in em{font-style:normal;background:linear-gradient(#f2f2f6,#d8d8e2);border:1px solid #9a9aa6;padding:5px 11px}

/* ── een eigen kleur per balie ───────────────────────────────────
   Elke baliepagina kleurt zijn eigen inhoud. Alle vier de kleuren
   halen de leesbaarheidsgrens op wit (4,5), dus ze mogen ook tekst
   en knoppen dragen, niet alleen vlakjes. */
.d-sales   {--accent:#5b3fe0;--accent-d:#4426c4;--accent-l:#eeecfe;--accent-xl:#f7f6ff;--accent-br:#d1c9f6}
.d-info    {--accent:#1c5bd9;--accent-d:#123f9c;--accent-l:#e8effc;--accent-xl:#f4f8fe;--accent-br:#c3d5f6}
.d-service {--accent:#17704a;--accent-d:#0f5234;--accent-l:#e5f1eb;--accent-xl:#f4faf7;--accent-br:#bed7cc}
.d-help    {--accent:#b23c0b;--accent-d:#8b2e07;--accent-l:#fbeae2;--accent-xl:#fdf5f1;--accent-br:#e9c8bb}

/* de vier in het linkermenu houden hun kleur, ook als ze niet open staan */
.sb a[href="/sales-henk/"]   .sb-ic{color:#5b3fe0}
.sb a[href="/info-henk/"]    .sb-ic{color:#1c5bd9}
.sb a[href="/service-henk/"] .sb-ic{color:#17704a}
.sb a[href="/help-henk/"]    .sb-ic{color:#b23c0b}
.sb a.sb-i.on .sb-ic{color:#fff}
.sb a[href="/sales-henk/"].on   {background:#5b3fe0}
.sb a[href="/info-henk/"].on    {background:#1c5bd9}
.sb a[href="/service-henk/"].on {background:#17704a}
.sb a[href="/help-henk/"].on    {background:#b23c0b}

/* een opsomming met kopjes binnen een kaart */
.punt+.punt{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.punt h4{margin-bottom:3px}
.punt p{color:var(--ink-2)}

/* Taal. Sinds elke taal zijn eigen URL heeft, haalt de bouw de andere
   taal al uit de pagina en komen deze twee regels normaal niet meer aan
   bod. Ze blijven staan als vangnet: mocht er ooit een tweetalig stuk
   doorglippen, dan zie je nog steeds maar één taal in plaats van twee. */
body[data-lang=nl] [data-lang=en],body[data-lang=en] [data-lang=nl]{display:none}
body[data-lang=nl] [data-lang-block=en],body[data-lang=en] [data-lang-block=nl]{display:none}

/* metaregel boven een artikel */
.prose .status{margin-bottom:18px;color:var(--ink-3);font-size:13.5px;gap:0}
.prose .status>span+span:before{content:'·';margin:0 10px;opacity:.5}
.prose .status .pill{border:0;background:var(--accent-l);color:var(--accent-d);font-weight:600;padding:3px 10px;font-size:12px}
.prose .status .pill+span:before{content:none}
.prose .status>span+.pill{margin-left:0}


/* ── aanraakvlakken ──────────────────────────────────────────────
   Een losse knop of link moet op een telefoon te raken zijn zonder
   te mikken. Links middenin een zin blijven zoals ze zijn: die
   oprekken breekt de regelafstand, en ze tellen niet mee. */
.sb-foot a{display:inline-flex;align-items:center;min-height:36px}
.logo{padding:5px 0}
.ft-bot button{padding:7px 0;min-height:34px}
.crumbs a{display:inline-block;padding:6px 0}
td a{display:inline-block;padding:5px 0}
/* losse links in een artikel, bijvoorbeeld een inhoudsopgave */
/* Een link die alleen staat, niet midden in een zin, krijgt wat hoogte
   mee zodat hij op een telefoon te raken is. Hij kan direct in de kaart
   hangen of nog in een blokje zitten. */
.prose>a:not(.link):not(.btn),.prose div>a:not(.link):not(.btn),
.prose li>a:only-child{display:inline-block;padding:6px 0}
.lang a{padding:9px 7px;min-height:36px;display:inline-flex;align-items:center}
.ck a,.card>p>a[data-cookies]{display:inline-block;padding:4px 0}
@media(max-width:900px){
  .ft ul a{display:inline-block;padding:5px 0}
  .reel-t{min-height:44px}
}

/* ── RESPONSIEF ── */
@media (max-width:1280px){
  .tb-act .tb-lbl-x{display:none}
  .tb-act.tb-hide-m{display:none}
}
@media (max-width:1100px){
  .sb{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.2);background:#fff}
  body.sb-open .sb{transform:none}
  body.sb-open .sb-scrim{display:block;position:fixed;inset:var(--top) 0 0 0;z-index:150;background:rgba(18,18,30,.35)}
  .main,body.sb-closed .main{padding-left:20px;padding-right:20px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfg{grid-template-columns:minmax(0,1fr)}
  .cfg-sum{position:static}
}
@media (max-width:900px){
  /* de zwevende Henk-knop staat vast rechtsonder; zonder deze ruimte
     dekt hij onderaan de pagina de footer af */
  .ft{padding-bottom:92px}
  /* Henk vult op een telefoon het hele scherm. De pagina erachter mag
     dan niet meescrollen, anders sta je na het sluiten ergens anders. */
  body.hp-open{overflow:hidden}
  body.hp-push{padding-right:0}
  body.hp-push .tb{right:0}
  .hp{width:100%;border-left:0}
  .ask{display:none}
  .tb-henk{display:flex;margin-left:auto}
  .tb-acts{margin-left:0}
  .tb-act:not(.tb-henk){display:none}
  .lang{margin-left:4px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-art{min-height:320px;order:-1}
  .hero-art picture,.hero-art>img{right:6%;left:auto}
  .hero-bubble{left:12px;right:auto;bottom:18%;max-width:190px;font-size:13.5px}
  .g3,.g21,.g2{grid-template-columns:minmax(0,1fr)}
  .bn-split{grid-template-columns:minmax(0,1fr);gap:24px}
  .reels{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ft-in{grid-template-columns:1fr 1fr}
  .checks.two{grid-template-columns:minmax(0,1fr)}
  .tb .tb-acts .tb-henk{flex-direction:row;gap:6px;min-width:0;min-height:36px;padding:0 10px}
  .tb-henk span{display:inline}
}
@media (max-width:600px){
  :root{--top:58px}
  .main,body.sb-closed .main{padding-left:16px;padding-right:16px}
  .ft{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .tb{gap:6px;padding:0 8px 0 4px}
  .logo{gap:7px;margin-right:0}
  .logo-mark{width:28px;height:28px}
  .logo-txt{font-size:14px}
  .logo-txt small{display:none}
  .lang{margin:0 0 0 4px}
  .card{padding:22px 18px}
  .bn{padding:26px 20px}
  .hero-txt{padding:28px 20px}
  .g4{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .qz-meter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btns .btn{width:100%}
  .ft-in{grid-template-columns:minmax(0,1fr)}
  .tel select{flex-basis:112px;width:112px}
  .mod{grid-template-columns:auto minmax(0,1fr)}
  .mod-p{grid-column:2;text-align:left}
  .ck{left:12px;right:12px;bottom:12px}
  .chart{min-width:600px}
  .card:has(.chart),.bn:has(.chart){overflow-x:auto}
  .tb .tb-acts .tb-henk span{display:none}
  .tb .tb-acts .tb-henk{padding:0 8px}
  .reel-t img{width:62px;height:44px}
}
/* De vergelijking met de gewone chatwidget staat in een tabel van drie
   kolommen. Op een telefoon paste die niet: je zag de chatbot-kolom en moest
   naar rechts scrollen voor het antwoord, precies de verkeerde volgorde.
   Daaronder zetten we elke rij daarom onder elkaar, met de kolomnaam erboven. */
@media (max-width:760px){
  #verschil .tbl-w{overflow:visible;border:0;border-radius:0}
  #verschil thead{display:none}
  #verschil table,#verschil tbody,#verschil tr,#verschil td{display:block;width:auto}
  #verschil tr{padding:16px 0;border-bottom:1px solid var(--line)}
  #verschil tr:last-child{border-bottom:0;padding-bottom:0}
  #verschil td{border:0;padding:0}
  #verschil td:first-child{font-size:15.5px;margin-bottom:4px}
  #verschil .kolomnaam{display:block;
    font-family:var(--fb);font-size:11px;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);margin:12px 0 3px}
}

@media (max-width:380px){.logo-txt{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}