/* ══ pimpmijnsite.nl · vier kleurwerelden, één systeem ══ */
:root{
  --grond:#FFFFFF; --vlak:#F7F7F5; --veld:#FFD028; --veld2:#22D3A5; --veld3:#2E7BF6;
  --op-veld:#141414; --inkt:#141414; --zacht:#5F5F5F; --lijn:#EAEAE7;
  --knop:#FF5A4E; --knop-tekst:#FFFFFF; --knop-hover:#E6483D;
  --merk1:#FFD028; --merk2:#22D3A5; --merk3:#2E7BF6;
  --goed:#0E9F6E; --let:#B4690E; --krit:#D0342C;
  --r:14px; --r-klein:8px;
}
.kleur[data-k="2"]{--op-veld:#062B22}
.kleur[data-k="3"]{--op-veld:#FFFFFF}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grond);color:var(--inkt);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background .5s ease,color .5s ease}
h1,h2,h3,h4{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  letter-spacing:-.032em;line-height:1.02;text-wrap:balance;overflow-wrap:break-word}
h4{font-weight:600;letter-spacing:-.02em;line-height:1.2}
p{margin:0} a{color:inherit;text-decoration:none}
::selection{background:var(--veld);color:var(--op-veld)}
:focus-visible{outline:3px solid var(--knop);outline-offset:3px;border-radius:4px}
.mono{font-family:"DM Mono",ui-monospace,Menlo,monospace}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
@media(max-width:760px){.wrap{padding:0 22px}body{font-size:17px}}

/* ── kleurschakelaar ── */

/* ── nav ── */
nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--grond) 90%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,background .5s}
nav.vast{border-bottom-color:var(--lijn)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px;flex-wrap:nowrap}
.merk{display:flex;align-items:center;gap:0;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:20px;letter-spacing:-.045em}
.merk .logo{margin-right:11px}
.merk i{color:var(--knop);font-style:normal}
.logo{flex:0 0 auto;overflow:visible}
.logo .b1{fill:var(--merk1)}
.logo .b2{fill:var(--merk2)}
.logo .b3{fill:var(--merk3)}
.logo rect{transition:transform .28s cubic-bezier(.34,1.56,.64,1),fill .5s ease}
.merk:hover .logo .b1{transform:translateY(-3px)}
.merk:hover .logo .b2{transform:translateY(-5px);transition-delay:.05s}
.merk:hover .logo .b3{transform:translateY(-7px);transition-delay:.1s}
@keyframes wip{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.merk .logo .b1{animation:wip 3.4s ease-in-out infinite}
.merk .logo .b2{animation:wip 3.4s ease-in-out .12s infinite}
.merk .logo .b3{animation:wip 3.4s ease-in-out .24s infinite}
.merk:hover .logo rect{animation-play-state:paused}
.navlinks{display:flex;gap:28px;white-space:nowrap}
.navlinks a{color:var(--zacht);font-size:15.5px}
.navlinks a:hover{color:var(--inkt)}
@media(max-width:960px){.navlinks{display:none}}
@media(max-width:640px){nav .knop.klein{display:none}nav .wrap{height:66px}}

/* ── knoppen ── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em;
  padding:16px 28px;border-radius:100px;border:none;cursor:pointer;
  background:var(--knop);color:var(--knop-tekst);
  transition:background .2s,transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s}
.knop:hover{background:var(--knop-hover);transform:translateY(-2px)}
.knop:active{transform:translateY(0)}
.knop.klein{padding:11px 19px;font-size:15px;white-space:nowrap}
.knop::after{content:"\2192";display:inline-block;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.knop:hover::after{transform:translateX(4px)}
.knop.zonderpijl::after{content:none}
.knop.omgekeerd{background:var(--inkt);color:var(--grond)}
.knop.omgekeerd:hover{background:var(--inkt);opacity:.86}
.knop:disabled{opacity:.45;cursor:not-allowed;transform:none}
.klein-onder{margin-top:14px;font-size:14.5px;color:var(--zacht)}
.op-veld .klein-onder{color:color-mix(in srgb,var(--op-veld) 72%,transparent)}
.tekstlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  border-bottom:2px solid color-mix(in srgb,var(--inkt) 18%,transparent);padding-bottom:2px;transition:border-color .2s}
.tekstlink:hover{border-bottom-color:var(--knop)}

/* ── secties ── */
section{padding:104px 0}
@media(max-width:760px){section{padding:64px 0}}
.kleur{background:var(--veld);color:var(--op-veld);transition:background .5s ease,color .5s ease}
.kleur[data-k="2"]{background:var(--veld2)}
.kleur[data-k="3"]{background:var(--veld3)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.01em;
  background:var(--veld);color:var(--op-veld);padding:6px 15px 6px 11px;border-radius:100px;margin-bottom:24px}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--op-veld);opacity:.55}
.kleur .tag::before{background:var(--veld);opacity:1}
.kleur .tag{background:var(--op-veld);color:var(--veld)}
h2{font-size:clamp(32px,5.2vw,60px)}
.lead{margin-top:22px;font-size:20px;color:var(--zacht);max-width:52ch;line-height:1.5}
.kleur .lead{color:color-mix(in srgb,var(--op-veld) 76%,transparent)}

/* ── hero ── */
.hero{padding:76px 0 92px;position:relative}
.herogrid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:64px;align-items:center}
.herogrid > *{min-width:0}
@media(max-width:980px){.herogrid{grid-template-columns:minmax(0,1fr);gap:44px}.hero{padding:44px 0 60px}}
.hero h1{font-size:clamp(36px,5.2vw,64px);letter-spacing:-.04em;hyphens:none;overflow-wrap:normal}
.hero.smal h1{font-size:clamp(30px,4.5vw,57px);letter-spacing:-.035em;overflow-wrap:break-word;hyphens:auto}
.hero h1 mark{background:var(--veld);color:var(--op-veld);padding:0 .13em;
  border-radius:14px 6px 16px 8px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{margin-top:26px;font-size:20.5px;max-width:44ch}
.pluspunten{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;padding:0;list-style:none}
.pluspunten li{font-size:14.5px;font-weight:500;background:var(--vlak);border:1px solid var(--lijn);
  padding:8px 15px;border-radius:100px}
.heroknop{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:34px}
@media(max-width:760px){h1 br,h2 br{display:none}}

/* ── scanpaneel ── */
.paneel{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:28px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 18px 44px -30px rgba(0,0,0,.28)}
.paneel .kop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.paneel .kop b{font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600;letter-spacing:-.02em}
.paneel .kop span{font-size:13px;color:var(--zacht)}
.veldrij{display:flex;gap:8px;flex-wrap:wrap}
.veldrij input{flex:1;min-width:170px;background:var(--grond);border:1.5px solid var(--lijn);border-radius:100px;
  padding:15px 20px;font-family:"DM Mono",monospace;font-size:15px;color:var(--inkt);transition:border-color .2s}
.veldrij input::placeholder{color:color-mix(in srgb,var(--zacht) 70%,transparent)}
.veldrij input:focus{outline:none;border-color:var(--knop)}
.stap{display:none}.stap.aan{display:block;animation:op .45s cubic-bezier(.2,.9,.3,1.1)}
@keyframes op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.checks{margin:20px 0 0;padding:0;list-style:none}
.checks li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--zacht);padding:9px 0;
  border-bottom:1px solid var(--lijn);transition:color .3s}
.checks li:last-child{border-bottom:none}
.checks li.bezig{color:var(--inkt);font-weight:500}
.checks li .mk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--lijn);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:10px;transition:.25s}
.checks li.bezig .mk{border-color:var(--knop);color:var(--knop)}
.checks li.klaar .mk{background:var(--goed);border-color:var(--goed);color:#fff}
.balk{height:5px;background:var(--lijn);border-radius:100px;margin-top:18px;overflow:hidden}
.balk i{display:block;height:100%;width:0;background:var(--knop);border-radius:100px;transition:width .4s linear}
.uitslag{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.meter{position:relative;flex:0 0 auto}
.meter svg{display:block;transform:rotate(-90deg)}
.meter .cijfer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.meter .cijfer b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:40px;line-height:1;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.meter .cijfer small{font-size:11px;color:var(--zacht);margin-top:4px}
.pijlers{flex:1;min-width:180px;display:flex;flex-direction:column;gap:12px}
.pijler .rij{display:flex;justify-content:space-between;font-size:13.5px;color:var(--zacht);margin-bottom:5px}
.pijler .rij b{color:var(--inkt);font-weight:500}
.pijler .sp{height:6px;background:var(--lijn);border-radius:100px;overflow:hidden}
.pijler .sp i{display:block;height:100%;width:0;border-radius:100px;transition:width .9s cubic-bezier(.2,.9,.3,1)}
.lekken{margin-top:22px;padding-top:20px;border-top:1px solid var(--lijn);display:flex;flex-direction:column;gap:16px}
.lek b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.02em;line-height:1.25}
.lek span{display:block;margin-top:5px;font-size:14.5px;color:var(--zacht);line-height:1.5}
.lek em{display:inline-block;margin-top:9px;font-style:normal;font-size:13.5px;font-weight:500;
  background:var(--veld);color:var(--op-veld);padding:4px 11px;border-radius:100px}
.gate{margin-top:22px;padding-top:20px;border-top:1px solid var(--lijn)}

/* ── portfolio, compact ── */
.werkgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:44px}
@media(min-width:620px){.werkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.werkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wk{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:13px;
  display:flex;flex-direction:column;gap:13px;min-width:0;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.1),box-shadow .22s}
.wk:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.4)}
.wk .raam{box-shadow:none}

.wkvoet{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 4px 4px}
.wkvoet b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.03em}
.wkvoet span{display:block;margin-top:4px;font-size:13.5px;color:var(--zacht);line-height:1.4}
.wkvoet .pijl{font-size:19px;color:var(--knop);flex:0 0 auto;transition:transform .2s}
.wk:hover .wkvoet .pijl{transform:translateX(4px)}

/* ── portfolio ── */
.werken{display:flex;flex-direction:column;gap:28px;margin-top:44px}
.werk{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  padding:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}
@media(min-width:861px){.werk{grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  gap:34px;padding:28px;align-items:center}}
.raam{border:1px solid var(--lijn);border-radius:var(--r-klein);overflow:hidden;background:#fff;
  box-shadow:0 18px 44px -30px rgba(0,0,0,.45);min-width:0}
.chrome{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid #E9E6DE;background:#fff}
.chrome i{width:7px;height:7px;border-radius:50%;background:#DFDBD2;display:block;flex:0 0 auto}
.chrome .adres{flex:1;margin-left:9px;font-family:"DM Mono",monospace;font-size:10.5px;color:#8B8579;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scherm{display:block;width:100%;height:auto}


.wtekst{min-width:0;display:flex;flex-direction:column;gap:13px}
.wtype{font-family:"DM Mono","SFMono-Regular",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.07em;color:var(--knop)}
.wtekst h3{font-size:23px;letter-spacing:-.035em}
.wtekst h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--veld)}
.wtekst h3 a:hover{border-bottom-color:var(--knop)}
.wtekst > p{font-size:15.5px;color:var(--zacht);line-height:1.55}
.wlijst{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.wlijst li{position:relative;padding-left:23px;font-size:14.5px;color:var(--zacht);line-height:1.45}
.wlijst li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:3px;
  border-radius:2px;background:var(--veld)}
.wlink{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  color:var(--knop);text-decoration:none;margin-top:2px}
.wlink:hover{text-decoration:underline}
.wvoet{margin-top:34px;font-size:15px;color:var(--zacht);max-width:64ch}

/* ── stappen ── */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:34px;margin-top:56px}
.st{display:flex;flex-direction:column;gap:12px}
.st .n{width:38px;height:38px;border-radius:50%;background:var(--veld);color:var(--op-veld);
  display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:16px}
.st h4{font-size:21px}
.st .pr{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:23px;letter-spacing:-.035em;color:var(--knop)}
.st p{font-size:15.5px;color:var(--zacht);line-height:1.5}

/* ── prijzen ── */
.prijzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:46px}
.prijs{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:30px;
  display:flex;flex-direction:column;gap:15px;position:relative;transition:transform .22s cubic-bezier(.2,.9,.3,1.1),box-shadow .22s}
.prijs:hover{transform:translateY(-3px);box-shadow:0 16px 36px -24px rgba(0,0,0,.32)}
.prijs.uit{border-color:var(--knop);border-width:2px}
.prijs .vlag{position:absolute;top:-11px;left:26px;background:var(--knop);color:var(--knop-tekst);
  font-size:12px;font-weight:600;padding:4px 13px;border-radius:100px}
.prijs .bedrag{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:38px;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.prijs .bedrag small{font-family:"Schibsted Grotesk",sans-serif;font-size:14px;font-weight:400;color:var(--zacht);letter-spacing:0}
.prijs ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px}
.prijs ul li{position:relative;padding-left:26px;color:var(--zacht);line-height:1.45}
.prijs ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--goed);font-weight:700;font-size:14px}
.prijs .aantal{font-size:14px;font-weight:500;color:var(--zacht);margin-top:-8px}
.prijskop{font-size:14px;font-weight:600;color:var(--zacht);margin-top:44px;display:block}

/* ── branches ── */
.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;margin-top:50px;
  background:color-mix(in srgb,var(--op-veld) 14%,transparent);border-radius:var(--r);overflow:hidden}
.br{background:var(--veld);padding:28px;display:flex;flex-direction:column;gap:9px;transition:background .25s}
.br:hover{background:color-mix(in srgb,var(--op-veld) 7%,var(--veld))}
.br h4{font-size:20px}
.br .aantal{font-size:13px;font-weight:500;opacity:.62}
.br p{font-size:15px;line-height:1.45;color:color-mix(in srgb,var(--op-veld) 74%,transparent)}

/* ── eerlijk ── */
.eerlijk{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:38px;margin-top:52px}
.ee{display:flex;flex-direction:column;gap:11px}
.ee .kruis{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--krit) 12%,transparent);
  color:var(--krit);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
.ee h4{font-size:20px}
.ee p{font-size:15.5px;color:var(--zacht);line-height:1.52}

/* ── faq ── */
.faq{margin-top:44px;border-top:1px solid var(--lijn)}
details{border-bottom:1px solid var(--lijn)}
details summary{cursor:pointer;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:19px;
  letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:22px 0;transition:color .2s}
details summary:hover{color:var(--knop)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:22px;color:var(--knop);flex:0 0 auto;transition:transform .25s}
details[open] summary::after{content:"–"}
details p{padding-bottom:24px;color:var(--zacht);font-size:16.5px;max-width:62ch;line-height:1.58}

/* ── slot ── */
.slot{text-align:center;padding:112px 0}
.slot h2{font-size:clamp(36px,6.4vw,74px);max-width:16ch;margin:0 auto}
.slot .lead{margin:22px auto 0;text-align:center}
.slot .veldrij{max-width:470px;margin:32px auto 0}
.slot .veldrij input{background:var(--vlak);border-color:transparent}
footer{border-top:1px solid var(--lijn);padding:38px 0 54px;font-size:15px;color:var(--zacht)}
footer .wrap{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── branchepagina ── */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:36px 34px;margin-top:52px}
.kaart{display:flex;flex-direction:column;gap:10px;min-width:0}
.kaart .nr{font-family:"DM Mono","SFMono-Regular",monospace;font-size:12px;font-weight:500;
  color:var(--knop);letter-spacing:.06em}
.kleur .kaart .nr{color:var(--op-veld);opacity:.55}
.kaart h4{font-size:19.5px;letter-spacing:-.025em}
.kaart p{font-size:15.5px;color:var(--zacht);line-height:1.52}
.kleur .kaart p{color:color-mix(in srgb,var(--op-veld) 74%,transparent)}

.vgl{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:20px;margin-top:46px}
.vk{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:30px;min-width:0}
.vk.uit{border-color:var(--knop);border-width:2px;padding:29px}
.vk .nr{font-family:"DM Mono","SFMono-Regular",monospace;font-size:11.5px;font-weight:500;
  color:var(--zacht);letter-spacing:.06em}
.vk.uit .nr{color:var(--knop)}
.vk h4{font-size:20px;margin:14px 0 16px;letter-spacing:-.025em}
.rijtje{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-top:1px solid var(--lijn);font-size:15px}
.rijtje span{color:var(--zacht);min-width:0}
.rijtje b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

.notitie{margin-top:52px;padding:30px 32px;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--r);border-left:4px solid var(--veld)}
.notitie h4{font-size:18px;margin-bottom:10px;letter-spacing:-.025em}
.notitie p{font-size:16px;color:var(--zacht);line-height:1.58;max-width:66ch}

a.br{text-decoration:none;color:inherit}
.br .pijl{margin-top:auto;padding-top:10px;font-size:20px;line-height:1;opacity:.5;
  transition:opacity .2s,transform .2s}
a.br:hover .pijl{opacity:1;transform:translateX(4px)}

.stille{display:inline-block;margin-top:40px;font-size:16.5px;font-weight:600;color:var(--knop);
  text-decoration:none;border-bottom:2px solid color-mix(in srgb,var(--knop) 32%,transparent);
  padding-bottom:2px;transition:border-color .2s}
.stille:hover{border-bottom-color:var(--knop)}
.kleur .stille{color:var(--op-veld);border-bottom-color:color-mix(in srgb,var(--op-veld) 34%,transparent)}
.kleur .stille:hover{border-bottom-color:var(--op-veld)}

.kruimel{font-size:14px;color:var(--zacht);margin-bottom:20px}
.kruimel a{color:var(--zacht);text-decoration:none;border-bottom:1px solid var(--lijn)}
.kruimel a:hover{color:var(--knop)}

.scherm{display:block;width:100%;background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-color:#fff}
.s-nebus{aspect-ratio:1200/623;background-image:url("/schermen/nebus.jpg")}
.s-kermis{aspect-ratio:1200/622;background-image:url("/schermen/kermis.jpg")}
.s-ondernaimers{aspect-ratio:1200/599;background-image:url("/schermen/ondernaimers.jpg")}
.s-pionairs{aspect-ratio:1200/622;background-image:url("/schermen/pionairs.jpg")}
.s-esimwijzer{aspect-ratio:1200/622;background-image:url("/schermen/esimwijzer.jpg")}
.s-oppedijk{aspect-ratio:1200/623;background-image:url("/schermen/oppedijk.jpg")}
.s-boothbox{aspect-ratio:1200/662;background-image:url("/schermen/boothbox.jpg")}
.s-coffeehop{aspect-ratio:1200/662;background-image:url("/schermen/coffeehop.jpg")}
.s-stayafter{aspect-ratio:1200/662;background-image:url("/schermen/stayafter.jpg")}
.s-uitjeskaart{aspect-ratio:1200/662;background-image:url("/schermen/uitjeskaart.jpg")}
.s-oliebollen{aspect-ratio:1200/662;background-image:url("/schermen/oliebollen.jpg")}
.s-ob-hoogeveen{aspect-ratio:1200/573;background-image:url("/schermen/ob-hoogeveen.jpg")}
.s-ob-vathorst{aspect-ratio:1200/573;background-image:url("/schermen/ob-vathorst.jpg")}
.s-ob-culemborg{aspect-ratio:1200/573;background-image:url("/schermen/ob-culemborg.jpg")}
.s-nebusrecycling{aspect-ratio:1200/573;background-image:url("/schermen/nebusrecycling.jpg")}
.s-brigade{aspect-ratio:1200/573;background-image:url("/schermen/oliebollenbrigade.jpg")}


/* ── demo-router ── */
main[data-pagina]{display:none}
main[data-pagina].actief{display:block}
.navlinks a.hier{color:var(--inkt);font-weight:600}
.navlinks a.hier::after{content:"";display:block;height:2px;border-radius:2px;background:var(--knop);margin-top:3px}
.demobalk{background:var(--inkt);color:var(--grond);font-size:13px;padding:9px 0}
.demobalk .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;text-align:center}
.demobalk b{font-weight:600}
.demobalk span{opacity:.72}
.mobielmenu{display:none;background:none;border:1px solid var(--lijn);border-radius:100px;
  padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--inkt)}
@media(max-width:760px){
  .merk{font-size:17px}
  .merk .logo{width:22px;height:22px;margin-right:9px}
}
@media(max-width:960px){
  .mobielmenu{display:inline-flex;align-items:center;gap:8px}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--grond);
    border-bottom:1px solid var(--lijn);flex-direction:column;gap:0;padding:8px 0}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 22px;font-size:16.5px}
  .navlinks{align-items:stretch}
  .navlinks a.hier::after{display:none}
  nav{position:sticky}
  nav .wrap{position:relative}
}
.overgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;margin-top:46px}
@media(min-width:861px){.overgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}}
.contactkaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:28px}
.contactkaart h4{font-size:19px;margin-bottom:14px}
.contactkaart .regel{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--lijn);font-size:15px;color:var(--zacht)}
.contactkaart .regel:last-of-type{border-bottom:none}
.contactkaart .regel b{color:var(--inkt);font-weight:600;text-align:right}

/* ── sectoren ── */
.vakken{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:44px}
@media(min-width:620px){.vakken{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.vakken{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vak{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:9px;min-width:0;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.1),box-shadow .22s,border-color .2s}
a.vak:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.38);border-color:var(--knop)}
.vak h4{font-size:19px;letter-spacing:-.03em}
.vak p{font-size:15px;color:var(--zacht);line-height:1.5}
.vak .stand{margin-top:auto;padding-top:14px;font-size:13.5px;display:inline-flex;align-items:center;gap:7px}
.vak .stand.klaar{color:var(--knop);font-weight:600}
.vak .stand.klaar::after{content:"\2192";transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
a.vak:hover .stand.klaar::after{transform:translateX(4px)}
.vak .stand.straks{color:var(--zacht);font-weight:500}
.vak .stand.straks::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lijn)}
.voetkop{display:block;font-size:12.5px;font-family:"DM Mono","SFMono-Regular",monospace;
  letter-spacing:.07em;opacity:.6;margin-bottom:9px}
.voetrij{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}


/* ── lekken op slot ── */
.lek.opslot{position:relative;overflow:hidden}
.lek.opslot b,.lek.opslot span,.lek.opslot em{filter:blur(5px);user-select:none;pointer-events:none}
.lek.opslot::after{content:"Staat in je rapport";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--inkt);
  background:color-mix(in srgb,var(--vlak) 55%,transparent);letter-spacing:-.01em}
.lekkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14px;color:var(--zacht);font-weight:500}
.lekkop b{color:var(--inkt);font-weight:600}

/* ── de mailpoort ── */
.poort{margin-top:22px;padding:20px;border-radius:var(--r);
  background:color-mix(in srgb,var(--knop) 7%,var(--vlak));border:1px solid color-mix(in srgb,var(--knop) 22%,transparent)}
.poort h5{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.03em;margin:0 0 6px}
.poort p{font-size:14px;color:var(--zacht);line-height:1.5;margin-bottom:14px}
.poort ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.poort li{position:relative;padding-left:22px;font-size:14px;color:var(--zacht);line-height:1.45}
.poort li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--goed);font-weight:700;font-size:13px}

/* ── bevestiging ── */
.verzonden{text-align:center;padding:6px 0 2px}
.vinkje{width:60px;height:60px;border-radius:50%;margin:0 auto 18px;
  background:color-mix(in srgb,var(--goed) 14%,transparent);color:var(--goed);
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;
  animation:plop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes plop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.verzonden h4{font-size:21px;letter-spacing:-.03em;margin-bottom:8px}
.verzonden > p{font-size:15px;color:var(--zacht);line-height:1.55;max-width:40ch;margin:0 auto}
.verzonden .adresje{font-family:"DM Mono",monospace;font-size:14px;color:var(--inkt);
  background:var(--grond);border:1px solid var(--lijn);border-radius:100px;padding:6px 14px;
  display:inline-block;margin:14px 0 4px;word-break:break-all}
.vervolg{margin-top:22px;padding-top:18px;border-top:1px solid var(--lijn);text-align:left}
.vervolg .rij{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14px;color:var(--zacht);line-height:1.45}
.vervolg .rij i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--veld);
  color:var(--op-veld);font-style:normal;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ── het rapport in beeld ── */
.rapportgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;margin-top:44px;align-items:center}
@media(min-width:861px){.rapportgrid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px}}
.velletje{background:#fff;color:#141210;border-radius:var(--r);overflow:hidden;position:relative;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.45);font-family:"Schibsted Grotesk",system-ui,sans-serif;
  transform:rotate(-1.1deg)}
.velletje::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
  background:linear-gradient(transparent,#fff)}
.velletje .rk{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 22px;border-bottom:1px solid #EDEAE2}
.velletje .rk .n{display:flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:14px;letter-spacing:-.045em}
.velletje .rk .d{font-family:"DM Mono",monospace;font-size:10.5px;color:#8B8579;text-align:right;line-height:1.4}
.velletje .rlijf{padding:20px 22px 30px}
.velletje .score{display:flex;gap:18px;align-items:center;margin-bottom:20px}
.velletje .score .bol{width:74px;height:74px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(#E05A4A 0 34%,#EFEDE7 0)}
.velletje .score .bol::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.velletje .score .bol b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:23px;letter-spacing:-.05em;z-index:1}
.velletje .score .st{min-width:0}
.velletje .score .st h6{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16px;
  margin:0 0 4px;letter-spacing:-.03em}
.velletje .score .st p{font-size:11.5px;color:#6F6A61;line-height:1.45;margin:0}
.velletje .staaf{display:flex;justify-content:space-between;font-size:10.5px;color:#6F6A61;margin-bottom:5px}
.velletje .staaf b{color:#141210}
.velletje .sp2{height:5px;border-radius:3px;background:#EFEDE7;margin-bottom:11px;overflow:hidden}
.velletje .sp2 i{display:block;height:100%;border-radius:3px}
.velletje .kopje{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.1em;color:#8B8579;
  margin:18px 0 9px;text-transform:uppercase}
.velletje .rlek{border:1px solid #EDEAE2;border-radius:9px;padding:11px 13px;margin-bottom:8px}
.velletje .rlek b{display:block;font-size:12px;letter-spacing:-.02em;margin-bottom:3px}
.velletje .rlek span{display:block;font-size:10.5px;color:#6F6A61;line-height:1.45}
.velletje .rlek em{display:inline-block;font-style:normal;font-size:10px;font-weight:600;margin-top:7px;
  background:#FFF3D6;color:#8A6410;padding:3px 9px;border-radius:100px}
.rapportlijst{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.rapportlijst li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;
  color:color-mix(in srgb,var(--op-veld) 82%,transparent)}
.rapportlijst li b{color:var(--op-veld);font-weight:600}
.rapportlijst li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:4px;
  border-radius:3px;background:var(--op-veld)}

/* ── akkoordvinkjes ── */
.vinkjes{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.vink{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:13.5px;
  color:var(--zacht);line-height:1.45}
.vink input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;
  border:2px solid var(--lijn);border-radius:6px;background:var(--vlak);cursor:pointer;
  transition:background .15s,border-color .15s;position:relative}
.vink input:checked{background:var(--knop);border-color:var(--knop)}
.vink input:checked::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--knop-tekst);font-size:13px;font-weight:700}
.vink input:focus-visible{outline:3px solid var(--knop);outline-offset:2px}
.vink a{color:var(--knop);text-decoration:underline;text-underline-offset:2px}
.vink b{font-weight:600;font-size:11.5px;color:var(--zacht);opacity:.75}
.vink.mis input{border-color:var(--krit)}
.vinkfout{margin-top:10px;font-size:13.5px;color:var(--krit);font-weight:500}

/* ── juridische pagina's ── */
.jur{max-width:760px}
.jur h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:44px 0 14px}
.jur h2:first-of-type{margin-top:0}
.jur h3{font-size:18.5px;letter-spacing:-.025em;margin:26px 0 10px}
.jur p{font-size:16.5px;color:var(--zacht);line-height:1.65;margin-bottom:14px}
.jur p b,.jur li b{color:var(--inkt);font-weight:600}
.jur ul,.jur ol{margin:0 0 16px;padding-left:22px}
.jur li{font-size:16.5px;color:var(--zacht);line-height:1.6;margin-bottom:8px}
.jur .art{display:block;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;
  color:var(--knop);margin-bottom:6px}
.jur table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 20px}
.jur th,.jur td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--lijn);
  vertical-align:top;color:var(--zacht)}
.jur th{font-size:12px;font-family:"DM Mono",monospace;letter-spacing:.06em;color:var(--zacht);font-weight:500}
.jur td:first-child{color:var(--inkt);font-weight:500}
.jurwaarschuwing{background:color-mix(in srgb,var(--let) 12%,var(--vlak));
  border:1px solid color-mix(in srgb,var(--let) 34%,transparent);border-radius:var(--r);
  padding:20px 22px;margin-bottom:36px}
.jurwaarschuwing b{display:block;font-size:15px;color:var(--inkt);margin-bottom:6px}
.jurwaarschuwing p{font-size:15px;margin:0}
.jurindex{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;margin-bottom:40px}
.jurindex a{background:var(--vlak);padding:13px 16px;display:flex;gap:11px;align-items:baseline;
  text-decoration:none;color:var(--inkt);font-size:14.5px;transition:background .2s}
.jurindex a:hover{background:var(--grond)}
.jurindex a b{font-family:"DM Mono",monospace;font-size:11px;color:var(--zacht);font-weight:500}
.jur table{table-layout:fixed}
.jur th,.jur td{overflow-wrap:anywhere;hyphens:auto}
.jur td:first-child,.jur th:first-child{width:28%}
@media(max-width:560px){.jur td:first-child,.jur th:first-child{width:34%}
  .jur th,.jur td{padding:9px 8px;font-size:14px}}

/* ── de rekensom ── */
.verschil{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;margin-top:20px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
@media(min-width:700px){.verschil{grid-template-columns:repeat(3,minmax(0,1fr))}}
.verschil > div{background:var(--grond);padding:22px 24px}
.verschil b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.045em;line-height:1.05;
  font-variant-numeric:tabular-nums;color:var(--inkt)}
.verschil span{display:block;margin-top:6px;font-size:14.5px;color:var(--zacht);line-height:1.4}

/* ── de uitkomst ── */
.uitkomst{margin-top:24px;background:var(--inkt);color:var(--grond);border-radius:var(--r);
  padding:30px 26px;overflow:hidden}
@media(min-width:760px){.uitkomst{padding:40px}}
.uitkomst .ukop{font-family:"DM Mono","SFMono-Regular",monospace;font-size:11.5px;letter-spacing:.11em;
  opacity:.5;margin-bottom:26px}
.ukgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media(min-width:860px){.ukgrid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:52px}}

/* prijsvergelijking */
.pk{display:flex;flex-direction:column;gap:5px}
.pklab{font-size:14px;opacity:.6}
.pkoud{position:relative;display:inline-block;align-self:flex-start;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.045em;
  font-size:clamp(28px,3.6vw,40px);line-height:1.1;color:rgba(255,255,255,.42);
  font-variant-numeric:tabular-nums}
.pkoud::after{content:"";position:absolute;left:-3%;top:52%;height:4px;border-radius:3px;
  background:var(--knop);width:0;transition:width .7s cubic-bezier(.2,.9,.3,1) .35s}
.uitkomst.aan .pkoud::after{width:106%}
.pkpijl{margin:16px 0;display:flex;align-items:center;gap:12px;font-size:14px;opacity:.55}
.pkpijl::before{content:"";flex:0 0 34px;height:1px;background:rgba(255,255,255,.28)}
.pknieuw{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.055em;
  font-size:clamp(46px,6.4vw,76px);line-height:1;color:var(--veld);font-variant-numeric:tabular-nums}

/* de spaarsticker */
.sticker{background:var(--veld);color:#171512;border-radius:20px;padding:28px 30px 30px;
  transform:rotate(-2deg);box-shadow:0 26px 60px -28px rgba(0,0,0,.7);text-align:center}
@media(min-width:860px){.sticker{padding:34px 32px 36px}}
.stlab{display:block;font-size:15px;font-weight:600;letter-spacing:.01em;opacity:.78}
.stbedrag{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(48px,8.4vw,86px);line-height:.94;letter-spacing:-.06em;margin:6px 0 4px;
  font-variant-numeric:tabular-nums}
.stonder{display:block;font-size:14.5px;opacity:.75;line-height:1.4}
.stbalk{margin-top:16px;padding-top:14px;border-top:2px solid rgba(23,21,18,.2);
  font-size:14.5px;font-weight:600}

/* chips eronder */
.ukchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.ukchips span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  padding:9px 16px;border-radius:100px}
.ukchips span::before{content:"\2713";color:var(--veld);font-weight:700;font-size:12.5px}
.uitkomst .staart{margin-top:22px;font-size:14.5px;opacity:.55;line-height:1.5;max-width:70ch}

/* ── kennisbank ── */
.gidsen{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:44px}
@media(min-width:700px){.gidsen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gids{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:26px 28px;
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;min-width:0;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.1),box-shadow .22s,border-color .2s}
.gids:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.38);border-color:var(--knop)}
.gids .kop2{font-family:"DM Mono","SFMono-Regular",monospace;font-size:11.5px;letter-spacing:.07em;color:var(--knop)}
.gids h3{font-size:21px;letter-spacing:-.03em;line-height:1.18}
.gids p{font-size:15px;color:var(--zacht);line-height:1.5}
.gids .lees{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--knop)}
.gids .lees::after{content:"\2192";margin-left:7px;display:inline-block;transition:transform .22s}
.gids:hover .lees::after{transform:translateX(4px)}

.artikel{max-width:720px}
.artikel .inleiding{font-size:20px;line-height:1.55;color:var(--zacht);margin-bottom:8px}
.artikel h2{font-size:clamp(25px,3.2vw,34px);letter-spacing:-.035em;margin:48px 0 14px}
.artikel p{font-size:17.5px;color:var(--zacht);line-height:1.68;margin-bottom:16px}
.artikel ul{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.artikel ul li{position:relative;padding-left:26px;font-size:17px;color:var(--zacht);line-height:1.6}
.artikel ul li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;
  border-radius:2px;background:var(--veld)}
.artikel li b,.artikel p b{color:var(--inkt);font-weight:600}
.artikel .verder{margin-top:46px;padding:26px 28px;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--r);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.artikel .verder b{font-size:17px;letter-spacing:-.02em}
.inhoudsopgave{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  padding:22px 26px;margin:30px 0 8px}
.inhoudsopgave b{display:block;font-size:13px;font-family:"DM Mono",monospace;letter-spacing:.07em;
  color:var(--zacht);margin-bottom:12px}
.inhoudsopgave ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.inhoudsopgave li{font-size:16px}
.inhoudsopgave a{color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--lijn)}
.inhoudsopgave a:hover{border-bottom-color:var(--knop);color:var(--knop)}

/* ── scan: meldingen ── */
.scanfout{margin-top:14px;padding:11px 14px;border-radius:12px;background:rgba(229,72,77,.09);
  border:1px solid rgba(229,72,77,.28);color:var(--krit);font-size:14px;line-height:1.5}
.scanmelding{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--zacht)}
.lek em{white-space:normal}
.pijler .num.nietgemeten{font-size:12.5px;font-weight:500;color:var(--zacht);letter-spacing:0}

/* ══ actiepagina ══ */
.actiebalk{background:var(--inkt);color:var(--grond);font-size:14px;padding:10px 0}
.actiebalk .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center}
.actiebalk b{font-weight:600}
.actiebalk > .wrap > b{background:var(--veld);color:var(--inkt);padding:3px 11px;border-radius:100px;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase}
.actiebalk span{opacity:.85}
.actiebalk .teller{color:var(--veld);opacity:1}

.actiehero h1 mark{background:var(--veld);padding:0 .12em}

/* de dealkaart */
.deal{background:var(--inkt);color:var(--grond);border-radius:var(--r);padding:30px 28px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.6);align-self:start}
.dealkop{font-size:12.5px;font-family:"DM Mono","SFMono-Regular",monospace;letter-spacing:.08em;
  text-transform:uppercase;opacity:.6}
.dealprijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin:14px 0 4px}
.dealoud{font-size:22px;opacity:.5;text-decoration:line-through;text-decoration-color:var(--knop);
  text-decoration-thickness:2px}
.dealnieuw{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(52px,7vw,68px);
  line-height:1;letter-spacing:-.04em;color:var(--veld)}
.dealbtw{font-size:13.5px;opacity:.6;width:100%}
.deallijst{list-style:none;margin:22px 0 24px;display:flex;flex-direction:column;gap:11px}
.deallijst li{position:relative;padding-left:27px;font-size:15px;line-height:1.5;opacity:.92}
.deallijst li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--veld);font-weight:700}
.dealvoet{margin-top:14px;font-size:13px;line-height:1.55;opacity:.55}

/* tijdlijn */
.tijdlijn{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:34px}
@media(min-width:760px){.tijdlijn{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tl{background:rgba(255,255,255,.5);border:1px solid var(--lijn);border-radius:var(--r-klein);padding:20px}
.tl.aan{background:var(--inkt);border-color:var(--inkt);color:var(--grond)}
.tl b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:16px;
  letter-spacing:-.02em;margin-bottom:7px}
.tl span{font-size:14.5px;line-height:1.55;opacity:.78}

/* ai-blokken */
.aigrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:34px}
@media(min-width:720px){.aigrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ai{background:rgba(255,255,255,.55);border:1px solid var(--lijn);border-radius:var(--r-klein);padding:22px}
.ai b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-.02em;margin-bottom:8px}
.ai span{font-size:15px;line-height:1.6;color:var(--zacht)}

/* bewijs */
.bewijs{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:34px;align-items:center}
@media(min-width:880px){.bewijs{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px}}

/* aanvraagblok */
.aanvraagblok{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:start}
@media(min-width:900px){.aanvraagblok{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px}}
.actieform{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:26px}
.af{margin-bottom:15px}
.af label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.af label i{font-style:normal;font-weight:400;color:var(--zacht);font-size:13px}
.af input,.af textarea{width:100%;padding:12px 14px;border:1px solid var(--lijn);border-radius:var(--r-klein);
  background:var(--grond);font:inherit;font-size:15.5px;color:var(--inkt)}
.af textarea{resize:vertical;min-height:76px}
.af input:focus,.af textarea:focus{outline:2px solid var(--knop);outline-offset:1px;border-color:transparent}
.actieform{position:relative}
.honing{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.afmelding{margin:4px 0 12px;padding:11px 14px;border-radius:var(--r-klein);
  background:rgba(229,72,77,.09);border:1px solid rgba(229,72,77,.28);color:var(--krit);
  font-size:14px;line-height:1.5}
.afgerond{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:30px 28px;text-align:center}
.afgerond h4{font-size:21px;margin:14px 0 10px}
.afgerond p{font-size:15px;line-height:1.6;color:var(--zacht)}
.afgerond .klein-onder{margin-top:14px}

/* statische site: geen router, geen demobalk */
.demobalk{display:none}
main{display:block}

/* ── cookiebanner ── */
.ckb{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;
  padding:0 16px 16px;pointer-events:none}
.ckb.aan{display:block}
.ckb .doos{pointer-events:auto;max-width:720px;margin:0 auto;background:var(--grond);
  color:var(--inkt);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.16);padding:22px 24px}
.ckb h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:19px;
  font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.ckb p{font-size:15px;line-height:1.55;color:var(--zacht);margin:0 0 6px}
.ckb a{text-decoration:underline}
.ckb .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ckb .knoppen button{flex:1 1 180px;min-height:48px;padding:13px 18px;border-radius:999px;
  font:600 15px/1.2 "Schibsted Grotesk",system-ui,sans-serif;cursor:pointer;
  border:1.5px solid var(--inkt);background:var(--grond);color:var(--inkt);transition:background .15s}
.ckb .knoppen button:hover{background:var(--vlak)}
.ckb details{margin-top:16px;border-bottom:0}
.ckb summary{cursor:pointer;font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:14px;color:var(--zacht);text-decoration:underline;display:inline;padding:0}
.ckb summary:hover{color:var(--inkt)}
.ckb summary::after{content:none}
.ckb details p{padding-bottom:0;font-size:13px;max-width:none}
.ckb table{border-collapse:collapse;margin-top:10px;font-size:13.5px;width:100%}
.ckb th,.ckb td{text-align:left;padding:6px 14px 6px 0;vertical-align:top;
  border-bottom:1px solid var(--lijn);color:var(--inkt)}
.ckb th{color:var(--zacht);font-weight:500;white-space:nowrap}
.ckb .mini{font-size:13px;margin-top:12px}
@media(max-width:560px){.ckb .doos{padding:18px 18px 20px}.ckb .knoppen button{flex:1 1 100%}}
.cookietabel{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px}
.cookietabel th,.cookietabel td{text-align:left;padding:10px 16px 10px 0;vertical-align:top;border-bottom:1px solid var(--lijn)}
.cookietabel th{color:var(--zacht);font-weight:500;white-space:nowrap}
.cookietabel td:first-child{font-family:"DM Mono",ui-monospace,monospace;font-size:13.5px;white-space:nowrap}
@media(max-width:620px){.cookietabel,.cookietabel tbody,.cookietabel tr,.cookietabel td{display:block;width:100%}
  .cookietabel thead{display:none}
  .cookietabel tr{padding:10px 0;border-bottom:1px solid var(--lijn)}
  .cookietabel td{border:0;padding:2px 0}}
.ckb details[open] summary::after{content:none}