/* foundations.tdgdigital.com, Ostrica Foundations. Ostrica-huisstijl (Century Gothic, #555, groen #74C276, taupe #908382,
   lijnen #D1D4D8) in de opbouw van per3 (witte kop, grote vette hero, kaarten, donkere rekenband, slotband).
   Motief: de schelpkrul + parel uit het Ostrica-beeldmerk. */
@font-face{font-family:"CG";src:url(/fonts/cg.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"CG";src:url(/fonts/cgb.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --tekst:#555555; --groen:#74C276; --groen-d:#4E9E52; --groen-t:#3B7D40; --taupe:#908382; --taupe-d:#6B605F;
  --lijn:#D1D4D8; --rij:#E6E8EA; --grijs:#8A8D91; --rood:#C0504D; --rood-t:#B0413E;
  --papier:#ffffff; --vlak:#f7f6f4; --zacht:#eee9e7; --band:#5f5655; --taupe-v:#7A6E6D;
  --gut:clamp(1rem,4vw,3rem); --breed:min(100% - 2*var(--gut), 84rem);
  --r:1.25rem; --kop-h:4.75rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kop-h) + 1rem)}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--papier);color:var(--tekst);font-family:"CG","Century Gothic",Arial,sans-serif;font-size:1.0625rem;line-height:1.55}
::selection{background:var(--groen);color:#fff}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd,td{hyphens:manual;overflow-wrap:break-word}
@media (max-width:480px){main p,main li{hyphens:auto}.citaat,.vragenpaar p,.parelsnoer li,.doelgroepen li{hyphens:manual}}
h1,h2,h3,h4{hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0;font-weight:700;color:var(--tekst);line-height:1.08;letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--groen-d);outline-offset:3px;border-radius:.25rem}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rij{width:var(--breed);margin-inline:auto}
.groen{color:var(--groen-d)}
.tagline{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--groen-t);margin:0 0 1.1rem}
.tagline-licht{color:#cfe9d0}
.groot{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.45}
.accent-zin{font-weight:700;color:var(--taupe-d)}
.lijnkop{padding-bottom:.9rem;margin-bottom:1.6rem;position:relative}
.lijnkop::after{content:"";position:absolute;left:0;bottom:0;width:3.5rem;height:3px;background:var(--groen)}
h2{font-size:clamp(1.85rem,3.6vw,3.1rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
.sectie{padding-block:clamp(4rem,9vw,7.5rem)}

/* knoppen (per3-vorm, Ostrica-kleur) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.8rem 1.35rem;border-radius:.6rem;
  font:700 1rem/1.1 "CG","Century Gothic",Arial,sans-serif;text-decoration:none;cursor:pointer;border:0;transition:background .2s,transform .2s,box-shadow .2s}
.knop-groen{background:var(--groen-d);color:#fff}
.knop-groen:hover{background:#3f8f45;transform:translateY(-1px)}
.knop-lijn{background:#fff;color:var(--tekst);box-shadow:inset 0 0 0 1.5px var(--lijn)}
.knop-lijn:hover{box-shadow:inset 0 0 0 1.5px var(--taupe)}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* kop */
.kop{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rij)}
.kop-in{width:var(--breed);margin-inline:auto;height:var(--kop-h);display:flex;align-items:center;gap:1.5rem}
.kop-logo{display:flex;align-items:flex-end;gap:.6rem;text-decoration:none;flex-shrink:0}
.kop-logo svg{width:8.6rem;height:auto}
.kop-label{font-weight:700;font-size:.82rem;color:var(--taupe-d);letter-spacing:.02em;padding:0 0 .38rem .6rem;border-left:1.5px solid var(--lijn);line-height:1.1}
.kop-nav{display:flex;gap:1.35rem;margin-left:auto}
.kop-nav a{text-decoration:none;font-weight:700;font-size:.9rem;padding:.6rem 0;position:relative;white-space:nowrap}
.kop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:2px;background:var(--groen);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.kop-nav a:hover::after,.kop-nav a[aria-current]::after{transform:scaleX(1)}
.kop-cta{flex-shrink:0;min-height:2.75rem;padding:.65rem 1.1rem;font-size:.92rem}
.menu-knop{display:none;margin-left:auto;width:2.9rem;height:2.9rem;border:0;border-radius:.6rem;background:var(--vlak);cursor:pointer;flex-shrink:0;position:relative}
.menu-knop span:not(.sr){position:absolute;left:.8rem;right:.8rem;height:2px;background:var(--tekst);transition:transform .25s}
.menu-knop span:first-child{top:1.15rem}.menu-knop span:nth-child(2){top:1.65rem}
.menu-knop[aria-expanded=true] span:first-child{transform:translateY(.25rem) rotate(45deg)}
.menu-knop[aria-expanded=true] span:nth-child(2){transform:translateY(-.25rem) rotate(-45deg)}
@media (max-width:1180px){.kop-nav{gap:1rem}.kop-nav a{font-size:.85rem}}
@media (max-width:1080px){
  .menu-knop{display:block}
  .kop-cta{margin-left:auto}
  .kop-nav{position:fixed;left:0;right:0;top:var(--kop-h);bottom:0;flex-direction:column;gap:0;margin:0;padding:1rem var(--gut) 2rem;background:#fff;
    overflow-y:auto;transform:translateY(-.5rem);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .kop-nav.open{opacity:1;transform:none;visibility:visible}
  .kop-nav a{font-size:1.25rem;padding:1rem 0;border-bottom:1px solid var(--rij)}
  .kop-nav a::after{display:none}
  .menu-knop{margin-left:0}
}
@media (max-width:560px){.kop-cta{display:none}.menu-knop{margin-left:auto}.kop-logo svg{width:7.4rem}}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0,#fff 60%,var(--vlak) 100%)}
.hero-in{width:var(--breed);margin-inline:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;
  min-height:min(46rem,calc(100svh - var(--kop-h)));padding-block:clamp(2.5rem,5vw,4rem)}
.hero h1{font-size:clamp(2.4rem,5vw,4.5rem);letter-spacing:-.035em;line-height:1.02;margin-bottom:1.4rem}
.hero h1 .groen{display:block}
.hero-vraag{font-weight:700;font-size:clamp(1.3rem,2.2vw,1.85rem);color:var(--taupe-d);margin-bottom:.8rem;letter-spacing:-.01em}
.hero-lead{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.45}
.hero-tekst p:not(.tagline){max-width:36rem}
.hero-beeld{position:relative;justify-self:center;width:100%;max-width:38rem}
.schelp{width:100%;height:auto;overflow:visible}
.schelp-krul{transform-origin:50% 50%;transform-box:view-box}
.parel-foto{transform-origin:56% 44%;transform-box:view-box}
.pareltje{transform-origin:12px 14px;transform-box:view-box}
/* opening: de schelp sluit zich om wat u beschermt */
.js .schelp-krul{animation:krul 1.5s cubic-bezier(.2,.75,.2,1) .15s both}
.js .parel-foto{animation:parel 1.6s cubic-bezier(.2,.7,.2,1) both}
.js .pareltje{animation:pareltje .7s cubic-bezier(.3,1.6,.5,1) 1.25s both}
.js .hero-tekst>*{animation:op .9s cubic-bezier(.2,.7,.2,1) both}
.js .hero-tekst>:nth-child(2){animation-delay:.1s}.js .hero-tekst>:nth-child(3){animation-delay:.25s}
.js .hero-tekst>:nth-child(n+4){animation-delay:.4s}
@keyframes krul{from{transform:rotate(-150deg) scale(.82);opacity:0}to{transform:none;opacity:1}}
@keyframes parel{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes pareltje{from{transform:scale(0)}to{transform:none}}
@keyframes op{from{transform:translateY(1rem);opacity:0}to{transform:none;opacity:1}}

/* stilstand */
.rij-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.vragenpaar{display:grid;gap:1.2rem;padding-top:.4rem}
.vragenpaar p{margin:0;font-weight:700;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.25;letter-spacing:-.01em}
.vraag-oud{color:var(--grijs);text-decoration:line-through;text-decoration-color:rgba(138,141,145,.55);text-decoration-thickness:2px}
.vraag-nieuw{color:var(--tekst);padding-left:1.2rem;border-left:3px solid var(--groen)}
.grafiek{margin:clamp(3rem,6vw,5rem) auto 0;width:var(--breed)}
.grafiek-kop h3{font-size:clamp(1.25rem,2vw,1.65rem)}
.grafiek-kop p{color:var(--taupe-d);font-size:.92rem;margin:.4rem 0 1.2rem}
.grafiek-vak{position:relative;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding-block:.5rem;touch-action:pan-y;cursor:crosshair}
.grafiek-svg{width:100%;height:auto}
@media (max-width:640px){.grafiek-svg text,.grafiek-svg .eind{font-size:11px}.grafiek-tip{font-size:.75rem;min-width:11rem;padding:.45rem .6rem}}
.grafiek-svg text{font-family:"CG","Century Gothic",Arial,sans-serif;fill:var(--grijs);font-size:13px}
.grafiek-svg .as{stroke:var(--rij);stroke-width:1}
.grafiek-svg .as-100{stroke:var(--taupe);stroke-dasharray:4 4}
.grafiek-svg .lijn{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.grafiek-svg .lijn.dun{stroke-width:2.2}
.grafiek-svg .eind{font-weight:700;font-size:13px}
.grafiek-svg .peil{stroke:var(--tekst);stroke-width:1;stroke-dasharray:3 3}
.grafiek-svg .punt{stroke:#fff;stroke-width:2}
.grafiek-svg .dim{opacity:.18}
.grafiek-tip{position:absolute;top:.6rem;pointer-events:none;background:#fff;border:1px solid var(--lijn);border-radius:.5rem;padding:.6rem .8rem;font-size:.82rem;line-height:1.5;
  box-shadow:0 .5rem 1.5rem rgba(85,85,85,.12);opacity:0;transition:opacity .15s;min-width:12.5rem;z-index:2}
.grafiek-tip.aan{opacity:1}
.grafiek-tip b{display:block;font-size:.95rem;margin-bottom:.2rem}
.grafiek-tip div{display:flex;justify-content:space-between;gap:1rem}
.grafiek-tip i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.4rem;vertical-align:baseline}
.grafiek-hint{font-size:.82rem;color:var(--grijs);margin:.6rem 0 2rem}
.tabel-schuif{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:40rem}
.tabel caption{text-align:left;font-weight:700;font-size:1.1rem;margin-bottom:.8rem}
.tabel th,.tabel td{padding:.7rem .6rem;border-bottom:1px solid var(--rij);text-align:right;font-weight:700}
.tabel thead th{color:var(--taupe-d);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--lijn)}
.tabel th[scope=row],.tabel thead th:first-child{text-align:left}
.tabel th[scope=row]{font-weight:400}
.tabel .ostrica th[scope=row]{color:var(--groen-t);font-weight:700}
.tabel td.neg{color:var(--rood-t)}
.tabel tr{transition:background .15s}
.tabel tr.licht{background:var(--vlak)}
.stip{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.6rem;vertical-align:-.03em}
.stip-inflatie{background:var(--rood)}.stip-spaar{background:var(--grijs)}.stip-basis{background:#CFE9D0;box-shadow:inset 0 0 0 1px #A9D8AA}
.stip-balans{background:#A9D8AA}.stip-totaal{background:#74C276}.stip-ondernemend{background:#4E9E52}.stip-aandelen{background:#2F6E35}
.voetnoot{font-size:.82rem;color:var(--grijs);margin-top:1rem;max-width:60rem}

/* ervaring */
.ervaring{background:var(--taupe-d);color:#fff;position:relative;overflow:hidden}
.ervaring h2,.ervaring h3{color:#fff}
.ervaring-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.ervaring-tekst h2{margin-bottom:1rem}
.trap span{display:block;font-weight:700;font-size:1.1rem}
.ervaring-beeld{margin:0;position:relative}
.ervaring-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r) var(--r) 9rem var(--r)}
.ervaring-beeld figcaption{position:absolute;left:-1.5rem;bottom:1.5rem;background:#fff;color:var(--tekst);padding:1.2rem 1.6rem;border-radius:var(--r)}
.jaartal{font-weight:700;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;color:var(--groen-d)}

/* doel: parelsnoer */
.parelsnoer{list-style:none;margin:0;padding:0;position:relative}
.parelsnoer::before{content:"";position:absolute;left:.95rem;top:1.3rem;bottom:1.3rem;width:2px;background:var(--rij)}
.parelsnoer li{position:relative;padding:1rem 0 1rem 3.2rem;font-weight:700;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.3;border-bottom:1px solid var(--rij)}
.parelsnoer li:last-child{border-bottom:0}
.parelsnoer li::before{content:"";position:absolute;left:0;top:50%;width:2rem;height:2rem;margin-top:-1rem;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#fff 0,#eee9e7 50%,#c9c2c1 100%);box-shadow:inset 0 0 0 1px rgba(144,131,130,.25)}
.parelsnoer li:nth-child(odd)::before{width:1.5rem;height:1.5rem;margin-top:-.75rem;left:.25rem}
.js .parelsnoer li{opacity:0;transform:translateX(-.8rem);transition:opacity .6s,transform .6s}
.js .parelsnoer li.in{opacity:1;transform:none}

/* risico */
.risico{background:var(--vlak)}
.risico-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.risico-zicht{padding:clamp(2rem,4vw,3.5rem) 0}
.risico-zicht h2{margin-bottom:1.5rem}
.streeplijst{list-style:none;padding:0;margin:0}
.streeplijst li{padding:.8rem 0;border-bottom:1px solid var(--lijn);font-weight:700;font-size:1.15rem}
.risico-onzicht{background:var(--band);color:#fff;border-radius:var(--r) var(--r) var(--r) 8rem;padding:clamp(2rem,4.5vw,4rem)}
.risico-onzicht h3{color:#fff;margin-bottom:.4rem}
.risico-woord{font-weight:700;font-size:clamp(1.8rem,7.4vw,4.2rem);hyphens:manual!important;white-space:nowrap;letter-spacing:-.035em;line-height:1;color:#f0b3b1;margin:.6rem 0 1.4rem}
.risico-onzicht .trap span{font-size:1.2rem}
.risico-onzicht .accent-zin{color:#cfe9d0;margin-bottom:0}

/* vijf vragen */
.vragen-kop{max-width:48rem}
.vijf{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--lijn)}
.vijf li{padding:1.6rem 1.4rem 1.2rem 0;border-right:1px solid var(--rij);margin-right:1.4rem}
.vijf li:last-child{border-right:0;margin-right:0}
.nr{display:block;font-weight:700;font-size:3.2rem;line-height:1;letter-spacing:-.04em;color:var(--taupe);margin-bottom:1rem}
.vijf li:nth-child(even) .nr{color:var(--groen)}
.vijf p{font-weight:700;font-size:1.05rem;line-height:1.35;margin:0}

/* bescherming + aanbod */
.bescherming{background:linear-gradient(90deg,#fff 0 40%,var(--vlak) 40% 100%)}
.bescherming-in{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.bescherming-blok{position:sticky;top:calc(var(--kop-h) + 2rem);background:var(--taupe-v);color:#fff;border-radius:var(--r) var(--r) 8rem var(--r);
  padding:clamp(2rem,4vw,3.5rem);overflow:hidden}
.citaat{font-weight:700;font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:1.2rem;position:relative}
.bescherming-blok p:last-child{margin:0;position:relative}
.watermerk{position:absolute;right:-3rem;bottom:-3rem;width:14rem;height:14rem;opacity:.12;pointer-events:none}
.bescherming-tekst>p{max-width:42rem}
.aanbod{margin-top:2.6rem}
.aanbod-kop{font-size:1.15rem;margin-bottom:1rem;color:var(--taupe-d)}
.aanbod-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.product{background:var(--band);color:#fff;border-radius:.9rem;padding:1.5rem 1.4rem 1.3rem;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s}
.product::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--groen)}
.product:hover{transform:translateY(-3px);box-shadow:0 1rem 2rem rgba(85,85,85,.18)}
.product-nr{font-weight:700;font-size:.8rem;color:#cfe9d0;letter-spacing:.1em;margin-bottom:1rem}
.product h4{color:#fff;font-size:1.15rem;line-height:1.2;margin-bottom:.9rem}
.product p{font-size:.92rem;line-height:1.5;color:#f1eeed;margin-bottom:1.4rem}
.product-link{margin-top:auto;display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.9rem;text-decoration:none;color:#fff;min-height:2.75rem}
.product-link::before{content:"";flex-shrink:0;width:1.8rem;height:1.8rem;border-radius:50%;border:1.5px solid #cfe9d0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23cfe9d0' stroke-width='2.2'/%3E%3C/svg%3E") center/1rem no-repeat;transition:background-color .2s}
.product-link:hover::before{background-color:rgba(255,255,255,.12)}

/* mens en machine */
.machine-in{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;border-top:1px solid var(--lijn);padding-top:2rem}
.machine-kant h3{color:var(--taupe-d);margin-bottom:1rem}
.machine-plus{font-weight:700;font-size:3rem;line-height:1;color:var(--groen);padding-top:.2rem}

/* steun */
.steun{padding-top:0}
.steun-kop{font-size:clamp(1.35rem,2.2vw,1.9rem);margin-bottom:1.4rem}
.vinklijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 2rem;border-top:1px solid var(--lijn)}
.vinklijst li{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--rij);font-weight:700;font-size:1.05rem;line-height:1.3}
.vinklijst li::before{content:"";flex-shrink:0;width:1.35rem;height:1.35rem;margin-top:-.05rem;border-radius:50%;background:var(--groen)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.85rem no-repeat}
.vinklijst-1{grid-template-columns:1fr;max-width:34rem;margin-bottom:2rem}

/* rekenband */
.band{background:var(--band);color:#fff;padding-block:clamp(4rem,8vw,6.5rem)}
.band h2,.band h3{color:#fff}
.reken-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.reken-tekst h2{margin-bottom:1rem}
.reken-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem;margin-top:2rem}
.veld-breed{grid-column:1/-1}
.reken-form label{display:flex;justify-content:space-between;font-weight:700;font-size:.85rem;color:#e9e4e3;margin-bottom:.45rem}
.reken-form output{color:#fff}
.invoer{display:flex;align-items:center;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.35);border-radius:.6rem;padding:0 .9rem;transition:border-color .2s}
.invoer:focus-within{border-color:var(--groen)}
.invoer span{font-weight:700;color:#e9e4e3}
.invoer input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:700 1.15rem "CG","Century Gothic",Arial,sans-serif;padding:.8rem .5rem;outline:none}
.invoer input::-webkit-inner-spin-button{opacity:.6}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--groen) var(--pos,30%),rgba(255,255,255,.3) var(--pos,30%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
input[type=range]::-moz-range-progress{height:4px;background:var(--groen)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;margin-top:-.6rem;
  background:radial-gradient(circle at 36% 32%,#fff,#eee9e7 55%,#c9c2c1);border:2px solid var(--groen)}
input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:#eee9e7;border:2px solid var(--groen)}
input[type=range]:focus-visible{outline:3px solid #cfe9d0;outline-offset:2px}
.reken-uit{display:grid;gap:1.4rem;justify-items:center}
.parelvak{width:min(100%,20rem)}
.parel-svg{width:100%;height:auto;overflow:visible}
.parel-nu{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:3 3}
.parel-verlies{fill:rgba(192,80,77,.38);transition:fill .3s}
.parel-verlies.winst{fill:rgba(116,194,118,.0)}
.parel-straks{transition:r .5s cubic-bezier(.2,.7,.2,1)}
.parel-legenda{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.4rem 1rem;font-size:.82rem;color:#e9e4e3;margin:.8rem 0 0}
.lg{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;margin-right:-.6rem;vertical-align:-.1em}
.lg-nu{border:1.5px dashed rgba(255,255,255,.7)}.lg-straks{background:radial-gradient(circle at 36% 32%,#fff,#eee9e7 55%,#c9c2c1)}
.uitkomst{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;width:100%}
.uit{background:rgba(255,255,255,.08);border-radius:.8rem;padding:1rem;transition:background .3s}
.uit span{display:block;font-size:.8rem;color:#e9e4e3;margin-bottom:.4rem;line-height:1.3}
.uit strong{font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.uit.verlies{background:rgba(192,80,77,.92)}
.uit.verlies span{color:#fff}
.uit.winst{background:rgba(78,158,82,.9)}
.saldo-zin{font-size:.95rem;color:#e9e4e3;text-align:center;margin:0;max-width:30rem}
.saldo-zin strong{color:#fff}
.reken-noot{font-size:.8rem;color:#d9d3d2;margin-top:2rem;margin-bottom:0}

/* whitepaper */
.whitepaper{background:var(--vlak)}
.whitepaper-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.wp-tekst h2{margin-bottom:1.1rem;max-width:34rem}
.wp-kant{position:relative;isolation:isolate}
.wp-kant .wp-form{position:relative;z-index:1;box-shadow:0 1.5rem 3rem -1.5rem rgba(85,85,85,.18)}
.wp-form,.afspraak{background:#fff;border-radius:var(--r);padding:clamp(1.5rem,3.5vw,2.6rem);border:1px solid var(--rij)}
.wp-form h3,.afspraak h3{margin-bottom:1.3rem}
.veld{margin-bottom:1rem;min-width:0}
.wp-form label,.afspraak label:not(.keuze),.belmoment legend{display:block;font-weight:700;font-size:.88rem;margin-bottom:.4rem}
.wp-form input,.afspraak input:not([type=radio]),.afspraak textarea{width:100%;min-height:3rem;border:1.5px solid #b9b3b2;border-radius:.6rem;padding:.7rem .9rem;
  font:1rem "CG","Century Gothic",Arial,sans-serif;color:var(--tekst);background:#fff;transition:border-color .2s}
.afspraak textarea{resize:vertical;min-height:5.5rem}
.wp-form input:focus,.afspraak input:focus,.afspraak textarea:focus{outline:none;border-color:var(--groen-d);box-shadow:0 0 0 3px rgba(116,194,118,.25)}
.fout{display:none;color:var(--rood-t);font-size:.82rem;margin-top:.3rem}
.veld.mis input{border-color:var(--rood)}.veld.mis .fout{display:block}
.form-ok{margin:1rem 0 0;font-weight:700;color:var(--groen-t)}
.wp-uitleg{margin:-.6rem 0 1.2rem;font-size:.95rem}
.wp-open{margin-top:.8rem;display:inline-flex}
.wp-fout:not([hidden]){display:block;margin-top:.8rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.optioneel{font-weight:400;color:var(--taupe-d);font-size:.8rem;margin-left:.3rem}

/* voor wie */
.doelgroepen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 0;font-weight:700;font-size:clamp(1.35rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.35}
.doelgroepen li{white-space:nowrap}
.doelgroepen li:not(:last-child)::after{content:"";display:inline-block;width:.42em;height:.42em;border-radius:50%;margin:0 .55em;vertical-align:.12em;
  background:radial-gradient(circle at 36% 32%,#fff,#eee9e7 55%,#c9c2c1);box-shadow:inset 0 0 0 1px rgba(144,131,130,.3)}
.doelgroepen li:nth-child(3n+2){color:var(--taupe-d)}
.doelgroepen li:nth-child(7){color:var(--groen-d)}

/* kennismaken */
.kennis{padding-top:0}
.kennis-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);background:var(--taupe-v);border-radius:1.8rem;padding:clamp(1.5rem,4.5vw,4rem);align-items:start}
.kennis-tekst{color:#fff;position:relative;overflow:visible;padding-top:.5rem}
.kennis-tekst h2{color:#fff;margin-bottom:1.1rem;position:relative}
.kennis-tekst p{position:relative}
.kennis-tekst .watermerk{right:auto;left:-6rem;bottom:-8rem;width:22rem;height:22rem;opacity:.1}
.kennis-direct a{font-weight:700;color:#fff;white-space:nowrap}
.kennis-slot{margin-top:2rem;margin-bottom:0}
.afspraak{border:0}
.veld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.belmoment{border:0;padding:0;margin:0 0 1rem;min-width:0}
.belmoment legend{padding:0;margin-bottom:.6rem}
.dagen{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin;margin-bottom:.6rem}
.dag{flex:0 0 auto;min-width:3.6rem;min-height:3.6rem;border:1.5px solid var(--lijn);border-radius:.7rem;background:#fff;cursor:pointer;
  font:700 .8rem/1.15 "CG","Century Gothic",Arial,sans-serif;color:var(--tekst);display:grid;place-items:center;padding:.35rem .4rem;transition:border-color .15s,background .15s}
.dag small{display:block;font-weight:400;font-size:.7rem;color:var(--taupe-d);text-transform:lowercase}
.dag b{font-size:1.15rem}
.dag[aria-checked=true]{border-color:var(--groen-d);background:#eef7ee}
.dagdelen{display:flex;flex-wrap:wrap;gap:.45rem}
.keuze{position:relative;cursor:pointer}
.keuze input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.keuze span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1rem;border:1.5px solid var(--lijn);border-radius:.6rem;font-weight:700;font-size:.88rem;transition:border-color .15s,background .15s}
.keuze input:checked+span{border-color:var(--groen-d);background:#eef7ee}
.keuze input:focus-visible+span{outline:3px solid var(--groen-d);outline-offset:2px}

/* team */
.team-in{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.team-intro p:not(.tagline){max-width:26rem}
.team-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.persoon img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r);background:#2c2625}
.persoon h3{margin-top:1.1rem;font-size:1.4rem}
.functie{font-weight:700;font-size:.9rem;color:var(--taupe-d);margin:.3rem 0 1rem}
.persoon-contact{list-style:none;margin:0;padding:.6rem 0 0;border-top:1px solid var(--lijn)}
.persoon-contact a{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--groen-t)}
.persoon-contact a:hover{text-decoration:underline}
.persoon-contact svg{flex-shrink:0;fill:none;stroke:var(--taupe);stroke-width:1.7;stroke-linejoin:round}

/* voet */
.voet{background:var(--tekst);color:#eceaea;padding-block:3.5rem 1.5rem;font-size:.95rem}
.voet-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.voet .voet-logo{display:inline-block;background:#fff;border-radius:.9rem;padding:.9rem 1.1rem;margin-bottom:1rem}
.voet-logo svg{width:9rem;height:auto}
.voet-kop{font-weight:700;color:#fff;margin-bottom:.5rem}
.voet a{color:#fff;text-decoration:none;display:inline-block;padding:.3rem 0}
.voet a:hover{text-decoration:underline}
.voet-onder{border-top:1px solid rgba(255,255,255,.18);margin-top:2.5rem;padding-top:1.2rem;font-size:.82rem;color:#d4d1d1}

/* inloop */
.js .inloop{opacity:0;transform:translateY(1.2rem);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .inloop.in{opacity:1;transform:none}

/* tablet */
@media (max-width:1080px){
  .aanbod-rij{grid-template-columns:1fr}
  .product{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem}
  .product-nr{grid-row:1/4;margin:0}
  .vijf{grid-template-columns:repeat(3,1fr)}
  .vijf li:nth-child(3){border-right:0;margin-right:0}
  .vinklijst{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .team-in{grid-template-columns:1fr}
  .hero-in{min-height:0;gap:2rem;padding-block:2.5rem 3rem}
  .risico-in,.bescherming-in,.whitepaper-in,.kennis-in{grid-template-columns:1fr}
  .rij-2,.ervaring-in,.reken-in{gap:2rem}
  .bescherming{background:#fff}
  .bescherming-blok{position:relative;top:0}
  .ervaring-beeld figcaption{left:1rem}
  .machine-in{grid-template-columns:1fr}
  .machine-plus{padding:0}
  .reken-tekst{order:0}
  .voet-in{grid-template-columns:1fr 1fr}.voet-merk{grid-column:1/-1}
}
@media (max-width:760px){
  .hero-in{grid-template-columns:1fr;gap:1.5rem;padding-block:2rem 3rem}
  .hero-beeld{max-width:24rem;order:-1}
  .rij-2,.ervaring-in,.reken-in{grid-template-columns:1fr}
}
@media (min-width:761px) and (max-width:900px){
  .reken-form{grid-template-columns:1fr}
  .uitkomst{grid-template-columns:1fr}
  .uit{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .uit span{margin:0}
  .whitepaper-in{grid-template-columns:1.1fr .9fr}
}
.vinklijst.vinklijst-1{grid-template-columns:1fr}
@media (max-width:700px){
  .vijf{grid-template-columns:1fr}
  .vijf li{display:grid;grid-template-columns:3.2rem 1fr;align-items:baseline;border-right:0;margin-right:0;border-bottom:1px solid var(--rij);padding:1.1rem 0}
  .nr{font-size:2.4rem;margin:0}
  .vinklijst{grid-template-columns:1fr}
  .uitkomst{grid-template-columns:1fr}
  .uit{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .uit span{margin:0}
  .veld-paar{grid-template-columns:1fr}
  .team-rij{grid-template-columns:1fr 1fr;gap:1rem}
  .persoon h3{font-size:1.15rem}
  .persoon-contact a{font-size:.82rem}
  .reken-form{grid-template-columns:1fr}
  .kennis-in{border-radius:1.2rem;width:100%;}
  .kennis .rij.kennis-in{width:calc(100% - 2*var(--gut))}
}
@media (max-width:480px){
  .team-rij{grid-template-columns:1fr}
  .persoon img{aspect-ratio:1/1}
  .persoon-contact a{font-size:.95rem}
  .hero-beeld{max-width:18rem}
  .voet-in{grid-template-columns:1fr}
  .ervaring-beeld figcaption{padding:.8rem 1.1rem}
}
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .hero-in{grid-template-columns:1fr .7fr;align-items:center}
  .hero-beeld{order:0;max-width:16rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .inloop,.js .parelsnoer li{opacity:1;transform:none}
}
/* grid-kinderen mogen krimpen (de dagenstrook scrolt binnen het formulier) */
.rij-2>*,.ervaring-in>*,.risico-in>*,.bescherming-in>*,.reken-in>*,.whitepaper-in>*,.kennis-in>*,.team-in>*,.hero-in>*{min-width:0}
.kennis-in{overflow:hidden}

/* toegankelijkheid (sloplint 2026-11-13) */
.knop-groen{background:var(--groen-t)}
.knop-groen:hover{background:#336e38}
.grafiek-hint,.voetnoot{color:#6c6f73}
.invoer{border-color:rgba(255,255,255,.62)}
.invoer:focus-within{border-color:#cfe9d0;box-shadow:0 0 0 3px rgba(207,233,208,.45)}
.product :focus-visible,.band :focus-visible,.kennis-tekst :focus-visible,.ervaring :focus-visible,.voet :focus-visible,.bescherming-blok :focus-visible{outline-color:#cfe9d0}
.product-link{white-space:nowrap}
.wp-form input,.afspraak input:not([type=radio]),.afspraak textarea{border-color:#948d8c}
@media (max-width:640px){
  .tabel{min-width:0}
  .tabel th:nth-child(2),.tabel td:nth-child(2),.tabel th:nth-child(4),.tabel td:nth-child(4){display:none}
  .tabel th,.tabel td{padding:.6rem .3rem;font-size:.9rem}
  .tabel-schuif::after{content:"Op een groter scherm ziet u ook de nominale waarden.";display:block;font-size:.78rem;color:#6c6f73;margin-top:.5rem}
}

/* toestelcheck 2026-11-13 */
.risico-onzicht{container-type:inline-size}
.risico-woord{font-size:clamp(1.5rem,9.2cqi,4.2rem)}
.keuze{display:inline-flex}
@media (max-width:1280px){
  .aanbod-rij{grid-template-columns:1fr}
  .product{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem}
  .product-nr{grid-row:1/4;margin:0}
}
.keuze input{width:100%;height:100%;top:0;left:0}
@media (max-width:480px){.doelgroepen li{white-space:normal}}
.tagline,.vinklijst li,.functie{hyphens:manual!important}
@media (orientation:landscape) and (max-height:500px){
  .hero-in{grid-template-columns:1fr 16rem;align-items:start}
  .hero-beeld{order:0;max-width:16rem;align-self:start;margin-top:2rem}
}