/* Ventum app.css — GEGENEREERD. Laadvolgorde: tokens -> bundle -> icons -> site. Fonts via theme.json fontFace. */
/* ===== tokens.css ===== */
/* Ventum tokens.css — GEGENEREERD uit tokens.json (palet 05 'Pruimnacht & goud').
   Bron van waarheid = tokens.json in het Design System; niet met de hand bewerken.
   Laad VOOR bundle.css. Motion-/type-clamps definieert bundle.css zelf. */
:root{
  /* -- color -- */
  --pruim-900: #2A1226;
  --pruim-850: #33162E;
  --pruim-800: #3A1A34;
  --pruim-700: #4A1D42;
  --pruim-500: #63305A;
  --pruim-600: #5A2450;
  --pruim-400: #7A3A5E;
  --pruim-200: #E3CEDD;
  --pruim-100: #F1E6EE;
  --goud-600: #C98A1E;
  --goud-500: #E0A32E;
  --goud-300: #F0C97A;
  --goud-100: #FBF1DA;
  --inkt-900: #241320;
  --inkt-800: #3A2733;
  --wit: #FFFFFF;
  --room-50: #F8F3EE;
  --room-100: #F1E9E1;
  --room-200: #E9DDD2;
  --lijn-300: #E9DFD2;
  --grijs-500: #6A5560;
  --grijs-600: #4E3E48;
  --veld-rand: #9C8794;
  --groen-goed: #157A45;
  --rood-niet: #C4362E;
  --kleur-merk: var(--pruim-600);
  --kleur-merk-diep: var(--pruim-700);
  --kleur-merk-secundair: var(--pruim-400);
  --kleur-accent: var(--goud-500);
  --kleur-accent-diep: var(--goud-600);
  --kleur-tekst: var(--inkt-900);
  --kleur-tekst-zacht: var(--grijs-600);
  --kleur-tekst-label: var(--grijs-500);
  --kleur-tekst-op-donker: var(--wit);
  --kleur-tekst-op-donker-zacht: rgba(255,255,255,0.80);
  --kleur-tekst-op-donker-voet: rgba(255,255,255,0.66);
  --kleur-tekst-op-merk: var(--wit);
  --kleur-tekst-op-merk-zacht: rgba(255,255,255,0.84);
  --kleur-achtergrond: var(--room-50);
  --kleur-vlak: var(--wit);
  --kleur-vlak-subtiel: var(--room-100);
  --kleur-vlak-pruim-licht: var(--pruim-100);
  --kleur-vlak-donker: var(--pruim-800);
  --kleur-vlak-nav: var(--pruim-800);
  --kleur-tekst-nav: rgba(255,255,255,0.86);
  --kleur-lijn-nav: rgba(255,255,255,0.12);
  --kleur-vlak-donker-diep: var(--pruim-850);
  --kleur-vlak-drama: var(--pruim-500);
  --kleur-vlak-drama-diep: var(--pruim-600);
  --kleur-tekst-op-drama: var(--wit);
  --kleur-tekst-op-drama-zacht: rgba(255,255,255,0.86);
  --kleur-accent-op-drama: var(--goud-300);
  --kleur-lijn-op-drama: rgba(255,255,255,0.20);
  --kleur-lijn: var(--lijn-300);
  --kleur-lijn-op-donker: rgba(255,255,255,0.16);
  --kleur-lijn-op-merk: rgba(255,255,255,0.22);
  --kleur-marker: var(--pruim-600);
  --kleur-marker-op-donker: var(--goud-500);
  --kleur-marker-op-merk: var(--goud-500);
  --kleur-focus: var(--pruim-600);
  --kleur-focus-op-donker: var(--goud-500);
  --kleur-focus-op-drama: var(--wit);
  --cta-bg: var(--goud-500);
  --cta-tekst: var(--pruim-900);
  --cta-bg-hover: var(--goud-600);
  --cta-bg-active: #B87C17;
  --btn-sec-rand: var(--pruim-600);
  --veld-rand-focus: var(--pruim-600);
  --veld-fout: var(--rood-niet);
  /* -- spacing -- */
  --ruimte-100: 4px;
  --ruimte-200: 8px;
  --ruimte-300: 16px;
  --ruimte-400: 24px;
  --ruimte-500: 32px;
  --ruimte-600: 48px;
  --ruimte-700: 64px;
  --ruimte-800: 96px;
  --ruimte-900: 128px;
  /* -- radius -- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* -- shadow -- */
  --elev-1: 0 1px 2px rgba(42,18,38,0.06), 0 3px 10px rgba(42,18,38,0.06);
  --elev-2: 0 6px 16px rgba(42,18,38,0.09), 0 16px 34px rgba(42,18,38,0.08);
  --elev-3: 0 12px 26px rgba(42,18,38,0.12), 0 28px 64px rgba(42,18,38,0.14);
  --elev-goud: 0 14px 34px rgba(224,163,46,0.34);
  --elev-goud-hover: 0 18px 40px rgba(201,138,30,0.40);
  --elev-pruim: 0 14px 34px rgba(42,18,38,0.30);
  --elev-hero-beeld: 0 30px 70px rgba(29,12,26,0.45), 0 8px 18px rgba(29,12,26,0.25);
  /* -- maat -- */
  --content: 1200px;
  --measure-narrow: 720px;
  --content-gutter: 16px;
  --cta-min-hoogte: 52px;
  --veld-hoogte: 52px;
  --header-hoogte: 72px;
  --logo-hoogte: 32px;
  --logo-hoogte-footer: 36px;
  --tick: 24px;
  --stap-cirkel: 56px;
  --icoon-vlak: 52px;
  --medaille: 84px;
  --avatar: 44px;
  /* -- aanvullingen: door bundle.css geconsumeerd, niet als kleur/maat in tokens.json -- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --kaart-bg: var(--wit);
}

/* ===== bundle.css ===== */
/* ============================================================================
   Ventum — gedeelde componentenlaag (base + components) · palet 05 Pruimnacht & goud
   Eén bron: Code mapt dit 1-op-1 naar theme.json / global styles + één stylesheet.
   Kleuren, spacing, radius, schaduw en maten komen UITSLUITEND uit tokens.css
   (var(--…)); hieronder staan alleen typografie-clamps, motion-tokens en anatomie.
   Donkere surface (footer) = --pruim-800 (#3A1A34). Drama-surface (3 stappen) = --pruim-500 (#63305A),
   duidelijk lichter dan de footer (mens-tweak 2026-09-22); kleine goudtekst daar in goud-300.
   ========================================================================== */

/* ---- 0. Motion-tokens (geen tokenfamilie in tokens.json → hier) -------------- */
:root{
  --overgang-snel:140ms cubic-bezier(.2,.7,.3,1);
  --overgang:260ms cubic-bezier(.2,.7,.3,1);
  --overgang-traag:520ms cubic-bezier(.2,.7,.3,1);
  --overgang-hero:900ms cubic-bezier(.16,.84,.3,1);
  --reveal-verschuiving:24px;
  --lift:-3px;
  /* typografie-clamps (desktopwaarde = de type-stijl in tokens.json) */
  --type-display:clamp(2.65rem,5.6vw,4.75rem);
  --type-h1:clamp(2rem,4vw,3rem);
  --type-h2:clamp(1.8rem,3.2vw,2.85rem);
  --type-h3:1.3rem;
  --type-body-l:1.15rem;--type-body:1rem;--type-body-s:.875rem;
  --type-eyebrow:.8rem;--type-index:clamp(.9rem,1.2vw,1rem);
  --leading-strak:1.02;--leading-kop:1.12;--leading-body:1.62;--tracking-eyebrow:.14em;
}
@media (prefers-reduced-motion:reduce){
  :root{--overgang-snel:0ms;--overgang:0ms;--overgang-traag:0ms;--overgang-hero:0ms;--reveal-verschuiving:0px;--lift:0px;}
}

/* ---- 1. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);font-size:var(--type-body);line-height:var(--leading-body);
  color:var(--kleur-tekst);background:var(--kleur-achtergrond);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--leading-kop);margin:0;letter-spacing:-.02em;}
p{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--kleur-focus);outline-offset:2px;border-radius:4px;}
.section--donker :focus-visible,.section--merk :focus-visible,.hero :focus-visible,.site-header :focus-visible,.footer :focus-visible,.nav-drawer :focus-visible{outline-color:var(--kleur-focus-op-donker);}
[id]{scroll-margin-top:calc(var(--header-hoogte) + var(--ruimte-400));}

.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--content-gutter);}
.section{padding-block:var(--ruimte-800);position:relative;}
@media (max-width:720px){.section{padding-block:var(--ruimte-600);}}
.section--wit{background:var(--wit);}
.section--room{background:var(--kleur-achtergrond);}
.section--merk{background:linear-gradient(158deg,var(--pruim-600) 0%,var(--pruim-600) 46%,#4E2046 100%);color:var(--kleur-tekst-op-merk);}
/* Donkere surface (diep): pruim-800 als basis, lichtpunt pruim-700 rechtsboven, pruim-850 onderin — de footer-tint, beschikbaar als sectievariant */
.section--donker{background:
   radial-gradient(130% 120% at 88% -10%,var(--pruim-700) 0%,rgba(74,29,66,0) 55%),
   linear-gradient(180deg,var(--kleur-vlak-donker) 0%,var(--kleur-vlak-donker-diep) 100%);
  color:var(--kleur-tekst-op-donker);}
/* Drama-surface (3 stappen): lichte pruim-500 met gouden lichtpunt rechtsboven en verloop naar pruim-600 — optimistisch, duidelijk lichter dan de footer */
.section--drama{background:
   radial-gradient(120% 110% at 90% -10%,rgba(240,201,122,.28) 0%,rgba(240,201,122,0) 52%),
   radial-gradient(90% 70% at 0% 100%,var(--pruim-400) 0%,rgba(122,58,94,0) 60%),
   linear-gradient(180deg,var(--kleur-vlak-drama) 0%,var(--kleur-vlak-drama-diep) 100%);
  color:var(--kleur-tekst-op-drama);}
.section--drama :focus-visible{outline-color:var(--kleur-focus-op-drama);}
.section--drama .kop__index,.section--drama .eyebrow{color:var(--kleur-accent-op-drama);}
.section--drama .kop__index::after{background:var(--kleur-accent-op-drama);}
.section--drama .sec-intro{color:var(--kleur-tekst-op-drama-zacht);}
.section--drama .stap__body p,.section--drama .zakelijk-noot{color:var(--kleur-tekst-op-drama-zacht);}
.section--drama .stap:not(:last-of-type)::before{background:linear-gradient(180deg,rgba(240,201,122,.75),rgba(240,201,122,.18));}
.section--drama .verdeling{background:rgba(255,255,255,.10);border-color:var(--kleur-lijn-op-drama);}
.section--drama .verdeling .label,.section--drama .verdeling .vd b,.section--drama .verdeling .pijl{color:var(--kleur-accent-op-drama);}
.section--drama .btn-secundair{border-color:rgba(255,255,255,.55);color:var(--wit);}
.section--drama .btn-secundair:hover{background:rgba(255,255,255,.12);border-color:var(--wit);}
.section--drama .cta:focus-visible{outline-color:var(--wit);}

/* ---- 2. Editorial sectiekop (asymmetrisch · indexnummer · gouden streep) -------- */
.kop{display:grid;grid-template-columns:auto 1fr;gap:var(--ruimte-400) var(--ruimte-500);align-items:start;margin-bottom:var(--ruimte-700);}
.kop__index{font-family:var(--font-display);font-weight:700;font-size:var(--type-index);letter-spacing:.02em;
  color:var(--pruim-600);padding-top:.55em;white-space:nowrap;display:flex;align-items:center;gap:10px;}
.kop__index::after{content:"";width:34px;height:2px;background:var(--goud-500);border-radius:2px;display:inline-block;
  transform-origin:left;transition:transform var(--overgang-traag);}
.reveal:not(.is-in) .kop__index::after{transform:scaleX(0);}
.section--donker .kop__index,.section--merk .kop__index{color:var(--goud-500);}
.kop__body{max-width:34rem;}
.kop--breed .kop__body{max-width:46rem;}
.eyebrow{font-size:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  font-weight:700;color:var(--kleur-tekst-label);margin:0 0 var(--ruimte-300);display:block;}
.section--donker .eyebrow,.section--merk .eyebrow{color:var(--goud-500);}
.sec-title{font-size:var(--type-h2);}
.sec-intro{font-size:var(--type-body-l);color:var(--kleur-tekst-zacht);margin-top:var(--ruimte-400);}
.section--donker .sec-intro{color:var(--kleur-tekst-op-donker-zacht);}
.section--merk .sec-intro{color:var(--kleur-tekst-op-merk-zacht);}
.motief{display:inline-block;vertical-align:middle;}

/* ---- 3. Tekstlink (voetnoot/inline; nooit pagina-actie) ------------------------- */
.meer-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--type-body-s);
  color:var(--pruim-600);text-decoration:none;border-bottom:2px solid var(--pruim-200);padding-bottom:2px;
  transition:border-color var(--overgang),color var(--overgang);width:fit-content;}
.meer-link:hover{color:var(--pruim-700);border-color:var(--goud-500);}
.meer-link svg{width:16px;height:16px;transition:transform var(--overgang);}
.meer-link:hover svg{transform:translateX(3px);}
.section--merk .meer-link{color:var(--kleur-tekst-op-merk);border-color:rgba(255,255,255,.35);}
.section--merk .meer-link:hover{border-color:var(--goud-500);}
.link-neutraal{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ---- 4. Knoppen ----------------------------------------------------------------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--cta-min-hoogte);padding:15px 32px;background:var(--cta-bg);color:var(--cta-tekst);
  font-family:var(--font-body);font-weight:800;font-size:var(--type-body-l);line-height:1.2;white-space:nowrap;text-decoration:none;border:none;cursor:pointer;
  border-radius:var(--radius-pill);box-shadow:var(--elev-goud);
  transition:transform var(--overgang),box-shadow var(--overgang),background var(--overgang);}
.cta:hover{background:var(--cta-bg-hover);transform:translateY(var(--lift));box-shadow:var(--elev-goud-hover);}
.cta:active{background:var(--cta-bg-active);transform:translateY(0) scale(.985);box-shadow:0 6px 16px rgba(201,138,30,.30);transition-duration:var(--overgang-snel);}
.cta:focus-visible{outline:3px solid var(--kleur-focus);outline-offset:3px;}
.section--donker .cta:focus-visible,.section--merk .cta:focus-visible,.hero .cta:focus-visible,.site-header .cta:focus-visible{outline-color:var(--wit);}
.cta .arrow{width:22px;height:22px;flex:none;color:var(--cta-tekst);transition:transform var(--overgang);}
.cta:hover .arrow{transform:translateX(4px);}
.cta--vol{width:100%;}
.cta--compact{min-height:44px;padding:11px 22px;font-size:var(--type-body-s);box-shadow:0 8px 20px rgba(224,163,46,.30);}
.cta--compact .arrow{width:18px;height:18px;}
.cta[aria-disabled="true"],.cta:disabled{background:var(--goud-300);color:var(--pruim-900);box-shadow:none;cursor:not-allowed;transform:none;opacity:.9;}
.cta.is-bezig .arrow{animation:cta-puls 900ms ease-in-out infinite;}
@keyframes cta-puls{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(6px);opacity:.55}}

.btn-secundair{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--cta-min-hoogte);padding:14px 30px;
  background:transparent;border:1.5px solid var(--btn-sec-rand);color:var(--btn-sec-rand);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:700;font-size:var(--type-body);text-decoration:none;cursor:pointer;
  transition:background var(--overgang),color var(--overgang),transform var(--overgang),border-color var(--overgang);}
.btn-secundair:hover{background:var(--pruim-100);transform:translateY(var(--lift));}
.btn-secundair:active{background:var(--pruim-200);transform:none;}
.btn-secundair svg{width:20px;height:20px;}
.section--merk .btn-secundair,.hero .btn-secundair,.section--donker .btn-secundair{border-color:rgba(255,255,255,.5);color:var(--room-50);}
.section--merk .btn-secundair:hover,.hero .btn-secundair:hover,.section--donker .btn-secundair:hover{background:rgba(255,255,255,.10);border-color:var(--wit);}

/* ---- 5. Header + navigatie + hamburger/drawer ---------------------------------- */
/* Navigatiebalk: donkere pruim (kleur-vlak-nav = pruim-800) op ALLE pagina's, sticky, hairline onder, schaduw zodra gescrold. */
.site-header{position:sticky;top:0;z-index:60;color:var(--kleur-tekst-op-donker);
  background:var(--kleur-vlak-nav);
  border-bottom:1px solid var(--kleur-lijn-nav);box-shadow:0 1px 0 rgba(0,0,0,.18);transition:box-shadow var(--overgang);}
.site-header--stuck{box-shadow:var(--elev-pruim);}
.site-header__inner{display:flex;align-items:center;gap:var(--ruimte-400);padding-block:20px;min-height:var(--header-hoogte);}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;
  font-size:1.55rem;letter-spacing:-.03em;color:var(--wit);text-decoration:none;line-height:0;}
.logo img{display:block;height:var(--logo-hoogte);width:auto;} /* ventum-wit-goud.png — witte letters, gouden E; alleen op donkere pruim */
.logo--footer img{height:var(--logo-hoogte-footer);}
.logo svg{display:block;flex:none;}
.logo__concept{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wit);border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius-pill);padding:2px 9px;font-family:var(--font-body);}
.nav{display:flex;align-items:center;gap:var(--ruimte-400);margin-left:auto;}
.nav a{position:relative;color:var(--kleur-tekst-nav);text-decoration:none;font-weight:600;
  font-size:var(--type-body-s);white-space:nowrap;padding-block:6px;transition:color var(--overgang);}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--goud-500);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--overgang);}
.nav a:hover,.nav a[aria-current="page"]{color:var(--wit);}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
.site-header__actions{display:flex;align-items:center;gap:var(--ruimte-300);}
.hamburger{display:none;width:46px;height:46px;flex:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid var(--kleur-lijn-nav);border-radius:var(--radius-md);
  color:var(--wit);cursor:pointer;transition:background var(--overgang);}
.hamburger:hover{background:rgba(255,255,255,.18);}
.hamburger svg{width:24px;height:24px;}
.nav-overlay{position:fixed;inset:0;background:rgba(29,12,26,.55);z-index:70;opacity:0;visibility:hidden;transition:opacity var(--overgang),visibility var(--overgang);}
.nav-overlay.is-open{opacity:1;visibility:visible;}
.nav-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,340px);z-index:80;
  background:linear-gradient(180deg,var(--pruim-700),var(--kleur-vlak-donker));color:var(--kleur-tekst-op-donker);
  padding:var(--ruimte-400) var(--ruimte-500) var(--ruimte-600);box-shadow:-20px 0 50px rgba(29,12,26,.5);
  transform:translateX(100%);visibility:hidden;transition:transform var(--overgang),visibility var(--overgang);
  display:flex;flex-direction:column;overflow-y:auto;}
.nav-drawer.is-open{transform:none;visibility:visible;}
.nav-drawer--demo{position:relative;height:auto;transform:none;visibility:visible;width:340px;border-radius:var(--radius-lg);}
.nav-drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ruimte-300);}
.drawer-link{color:var(--kleur-tekst-op-donker-zacht);text-decoration:none;font-family:var(--font-display);
  font-weight:600;font-size:1.2rem;padding:var(--ruimte-300) 0;border-bottom:1px solid var(--kleur-lijn-op-donker);
  transition:color var(--overgang),padding-left var(--overgang);}
.drawer-link:hover{color:var(--wit);padding-left:6px;}
.nav-drawer .cta{margin-top:var(--ruimte-500);}
.drawer-close{width:44px;height:44px;background:rgba(255,255,255,.10);border:1px solid var(--kleur-lijn-op-donker);
  border-radius:var(--radius-md);color:var(--wit);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.drawer-close svg{width:22px;height:22px;}
@media (max-width:1040px){.nav{display:none;}.site-header__actions{margin-left:auto;}.hamburger{display:inline-flex;}}

/* Leadpagina-topbar (attention ratio 1:1 — geen nav) */
.site-top{position:sticky;top:0;z-index:60;background:var(--kleur-vlak-nav);color:var(--kleur-tekst-op-donker);border-bottom:1px solid var(--kleur-lijn-nav);box-shadow:0 1px 0 rgba(0,0,0,.18);}
.site-top__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-300);padding-block:20px;min-height:var(--header-hoogte);}
.top-tel{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:var(--type-body-s);color:var(--wit);text-decoration:none;white-space:nowrap;}
.top-tel .venster{color:rgba(255,255,255,.72);font-weight:500;}
.top-tel .tel-ic{width:30px;height:30px;flex:none;border-radius:var(--radius-pill);background:var(--goud-500);display:inline-flex;align-items:center;justify-content:center;}
.top-tel .tel-ic svg{width:15px;height:15px;color:var(--pruim-900);}

/* ---- 6. Hero (gelaagd, 3D-stage) ------------------------------------------------ */
.hero{position:relative;color:var(--kleur-tekst-op-merk);overflow:hidden;
  background:radial-gradient(120% 90% at 12% -6%,var(--pruim-600) 0%,#4E2046 52%,#3E1938 100%);}
/* aansluiting donkere balk → hero: dunne lichte kim aan de bovenrand (rgba goud) zodat de hero 'oplicht' onder de balk */
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(224,163,46,0),rgba(224,163,46,.45) 30%,rgba(224,163,46,.45) 70%,rgba(224,163,46,0));pointer-events:none;}
.hero::before{content:"";position:absolute;right:-8%;top:-30%;width:52%;height:120%;
  background:radial-gradient(closest-side,rgba(224,163,46,.18),rgba(224,163,46,0) 70%);pointer-events:none;}
/* rijzende energie-bogen: decoratief, alleen transform/opacity */
.hero__bogen{position:absolute;inset:auto -4% -6% auto;width:58%;max-width:820px;opacity:.55;pointer-events:none;}
.hero__bogen path{stroke:var(--goud-500);fill:none;stroke-linecap:round;}
.hero__bogen .b1{stroke-width:1.5;opacity:.35;}
.hero__bogen .b2{stroke-width:2;opacity:.25;}
.hero__bogen .b3{stroke-width:1;opacity:.18;}
.hero__inner{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--ruimte-700);align-items:center;
  padding-block:var(--ruimte-700) var(--ruimte-800);position:relative;}
.hero__copy{max-width:37rem;}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--type-eyebrow);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);font-weight:700;color:var(--goud-500);margin:0 0 var(--ruimte-400);}
.hero__eyebrow .motief{width:26px;height:18px;}
.hero__title{font-size:var(--type-display);font-weight:800;letter-spacing:-.035em;line-height:var(--leading-strak);color:var(--kleur-tekst-op-merk);}
.hero__title .mark{position:relative;white-space:nowrap;z-index:0;}
.hero__title .mark::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.30em;
  background:var(--goud-500);opacity:.92;border-radius:99px 99px 99px 4px;z-index:-1;transform:rotate(-.6deg);
  transform-origin:left;transition:transform var(--overgang-traag) .35s;}
.reveal:not(.is-in) .hero__title .mark::after{transform:rotate(-.6deg) scaleX(0);}
.hero__sub{font-size:var(--type-body-l);margin-top:var(--ruimte-400);max-width:33rem;color:var(--kleur-tekst-op-merk-zacht);}
.trust-ticks{list-style:none;margin:var(--ruimte-500) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 22px;}
.trust-ticks li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--type-body-s);}
.tick{width:var(--tick);height:var(--tick);flex:none;border-radius:var(--radius-pill);background:var(--goud-500);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(42,18,38,.35);}
.tick svg{width:13px;height:13px;color:var(--pruim-900);}
.hero__actions{margin-top:var(--ruimte-600);display:flex;flex-wrap:wrap;gap:var(--ruimte-400);align-items:center;}
.hero__vertrouwen{margin-top:var(--ruimte-500);display:flex;align-items:center;gap:11px;font-weight:700;font-size:var(--type-body-s);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-pill);padding:10px 18px;width:fit-content;
  backdrop-filter:blur(6px);}
.hero__vertrouwen svg{width:19px;height:19px;flex:none;color:var(--goud-500);}
/* 3D-stage: perspectief, beeld kantelt licht en zet zich recht bij hover; slab erachter geeft diepte */
.hero__stage{position:relative;perspective:1400px;}
.hero__slab{position:absolute;inset:8% -6% -8% 10%;border-radius:var(--radius-xl);
  background:linear-gradient(160deg,var(--pruim-700),rgba(74,29,66,.0) 70%);border:1px solid rgba(255,255,255,.08);
  transform:translateZ(-80px) rotateY(-8deg);transform-style:preserve-3d;pointer-events:none;}
.hero__media{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--elev-hero-beeld);
  aspect-ratio:5/4;border:5px solid #fff;margin:0;
  transform:rotateY(-6deg) rotateX(1.5deg);transform-style:preserve-3d;
  transition:transform var(--overgang-hero),box-shadow var(--overgang-hero);}
.hero__stage:hover .hero__media{transform:rotateY(0) rotateX(0);}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(224,163,46,.12),rgba(42,18,38,.34));}
.hero__plek{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.92);border-radius:var(--radius-pill);padding:6px 13px;font-size:.75rem;font-weight:700;color:var(--pruim-600);
  box-shadow:0 6px 16px rgba(29,12,26,.25);}
.hero__plek svg{width:14px;height:14px;color:var(--pruim-600);}
/* intrede: beeld glijdt van dieper in het perspectief naar rust */
.reveal:not(.is-in) .hero__media{transform:rotateY(-14deg) rotateX(3deg) translateZ(-60px);}
.hero--dienst .hero__inner{grid-template-columns:1.1fr .9fr;padding-block:var(--ruimte-600) var(--ruimte-700);}
.hero--dienst .hero__title{font-size:var(--type-h1);letter-spacing:-.025em;line-height:1.06;}
.hero--dienst .hero__media{aspect-ratio:4/3;}
.kruimel{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 var(--ruimte-400);padding:0;font-size:var(--type-body-s);color:var(--kleur-tekst-op-merk-zacht);}
.kruimel a{color:inherit;text-decoration:none;}
.kruimel a:hover{color:var(--wit);text-decoration:underline;}
.kruimel li+li::before{content:"/";margin-right:6px;opacity:.5;}
.kruimel [aria-current]{color:var(--wit);font-weight:600;}

/* ---- 7. Formulier-kaart + velden ---------------------------------------------- */
.formulier-kaart{background:var(--wit);border-radius:var(--radius-xl);box-shadow:var(--elev-3);padding:var(--ruimte-500);position:relative;color:var(--kleur-tekst);}
.hero__form{margin-top:-88px;margin-left:24px;margin-right:-4px;position:relative;z-index:3;border:1px solid rgba(255,255,255,.6);
  transform:translateZ(40px);}
.form-titel{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;color:var(--inkt-900);}
.progress{display:flex;align-items:center;gap:12px;margin:var(--ruimte-300) 0 var(--ruimte-400);}
.progress__bar{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--room-200);overflow:hidden;}
.progress__fill{height:100%;width:25%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--pruim-600),var(--pruim-400));
  transform-origin:left;transition:transform var(--overgang-traag);}
.reveal:not(.is-in) .progress__fill{transform:scaleX(0);}
.progress__label{font-size:var(--type-body-s);font-weight:700;color:var(--grijs-600);white-space:nowrap;}
.veldgroep{margin-bottom:var(--ruimte-400);}
.veld-label{display:block;font-weight:700;font-size:var(--type-body-s);margin-bottom:8px;color:var(--inkt-800);}
.veld-rij{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;}
.veld{width:100%;height:var(--veld-hoogte);border:1.5px solid var(--veld-rand);border-radius:var(--radius-md);
  padding:0 14px;font-family:var(--font-body);font-size:var(--type-body);background:var(--wit);color:var(--inkt-900);
  transition:border-color var(--overgang),box-shadow var(--overgang);}
.veld::placeholder{color:var(--grijs-500);}
.veld:hover{border-color:var(--pruim-400);}
.veld:focus{outline:none;border-color:var(--veld-rand-focus);box-shadow:0 0 0 3px rgba(90,36,80,.26);}
.veld[aria-invalid="true"]{border-color:var(--veld-fout);box-shadow:0 0 0 3px rgba(196,54,46,.18);}
.veld-fout{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:var(--type-body-s);font-weight:600;color:var(--veld-fout);}
.veld-fout svg{width:16px;height:16px;flex:none;}
.veld-fout[hidden]{display:none;}
.veld-hint{margin-top:8px;font-size:var(--type-body-s);color:var(--grijs-500);}
.segment{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.segment label{display:flex;align-items:center;gap:10px;border:1.5px solid var(--veld-rand);border-radius:var(--radius-md);min-height:var(--veld-hoogte);
  padding:13px 14px;cursor:pointer;font-weight:700;font-size:var(--type-body);color:var(--inkt-900);background:var(--wit);
  transition:border-color var(--overgang),background var(--overgang),box-shadow var(--overgang);}
.segment label:hover{border-color:var(--pruim-600);background:var(--pruim-100);}
.segment label:has(input:checked){border-color:var(--pruim-600);background:var(--pruim-100);box-shadow:inset 0 0 0 1px var(--pruim-600);}
.segment label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(90,36,80,.26);}
.segment input{accent-color:var(--pruim-600);width:18px;height:18px;margin:0;}
.form-privacy{margin-top:var(--ruimte-300);font-size:.78rem;color:var(--grijs-500);text-align:center;}
.form-privacy a{color:var(--grijs-600);}

/* ---- 8. Prijsopbouw (huisstijl-vector) ---------------------------------------- */
.prijs-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--ruimte-700);align-items:center;}
.prijs-anker{background:linear-gradient(165deg,var(--pruim-700),var(--kleur-vlak-donker));color:#fff;border-radius:var(--radius-lg);
  padding:var(--ruimte-600) var(--ruimte-500);box-shadow:var(--elev-2);position:relative;overflow:hidden;}
.prijs-anker::after{content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,163,46,.30),rgba(224,163,46,0));}
.prijs-anker .label{font-size:var(--type-body-s);font-weight:700;color:var(--goud-500);text-transform:uppercase;letter-spacing:.08em;}
.prijs-anker .bedrag{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,7vw,4.2rem);line-height:1;margin-top:10px;color:#fff;letter-spacing:-.03em;}
.prijs-anker .bedrag small{font-size:1rem;font-weight:600;color:var(--kleur-tekst-op-donker-zacht);}
.voorbeeld-chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--pruim-900);background:var(--goud-500);border-radius:var(--radius-pill);padding:5px 12px;margin-top:var(--ruimte-400);}
.prijs-visual-kaart{background:var(--wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius-lg);padding:var(--ruimte-500);box-shadow:var(--elev-2);}
.staaf{display:flex;height:60px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--elev-1);}
.staaf span{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;overflow:hidden;white-space:nowrap;padding-inline:4px;
  transform-origin:left;transition:transform var(--overgang-traag);}
.reveal:not(.is-in) .staaf span{transform:scaleX(.2);}
.staaf span:nth-child(2){transition-delay:.08s}.staaf span:nth-child(3){transition-delay:.16s}.staaf span:nth-child(4){transition-delay:.24s}
.seg-markt{background:linear-gradient(180deg,var(--goud-500),var(--goud-600));color:var(--pruim-900);position:relative;}
.seg-markt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.0) 0 10px,rgba(255,255,255,.16) 10px 12px);}
.seg-belasting{background:var(--pruim-600);color:#fff;}
.seg-netbeheer{background:var(--pruim-400);color:#fff;}
.seg-vast{background:var(--pruim-100);color:var(--pruim-600);}
.legenda{list-style:none;margin:var(--ruimte-500) 0 0;padding:0;display:grid;gap:12px;}
.legenda li{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:12px;font-size:var(--type-body-s);}
.legenda .dot{width:16px;height:16px;border-radius:5px;} /* 5px: bewuste afwijking (kleiner dan radius-sm past niet op 16px) */
.legenda .naam{font-weight:600;}
.legenda .tag{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:var(--radius-pill);margin-left:6px;}
.tag--beweegt{background:var(--goud-500);color:var(--pruim-900);}
.tag--vast{background:var(--pruim-100);color:var(--pruim-600);}
.legenda .euro{font-family:var(--font-display);font-weight:700;color:var(--inkt-900);}
.prijs-onderschrift{margin-top:var(--ruimte-500);font-weight:700;color:var(--inkt-900);display:flex;gap:11px;align-items:flex-start;
  background:var(--pruim-100);border-radius:var(--radius-md);padding:14px 16px;}
.prijs-onderschrift svg{width:20px;height:20px;flex:none;color:var(--pruim-600);margin-top:2px;}
.reframe-onder{margin-top:var(--ruimte-500);}

/* ---- 9. Aanbod-overzicht / situatiekaarten ------------------------------------- */
.aanbod-grid{display:grid;gap:var(--ruimte-500);}
.aanbod-featured{display:grid;grid-template-columns:auto 1fr;gap:var(--ruimte-500);align-items:center;
  background:var(--kaart-bg,var(--wit));border:2px solid var(--kleur-merk);border-radius:var(--radius-xl);
  padding:var(--ruimte-600);box-shadow:var(--elev-2);text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform var(--overgang),box-shadow var(--overgang);}
.aanbod-featured::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(90,36,80,.10),rgba(90,36,80,0));pointer-events:none;}
.aanbod-featured:hover{transform:translateY(-4px);box-shadow:var(--elev-3);}
.aanbod-featured__medaille{width:var(--medaille);height:var(--medaille);flex:none;border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--pruim-600),var(--pruim-800));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--elev-2);transition:transform var(--overgang);}
.aanbod-featured:hover .aanbod-featured__medaille{transform:rotate(-4deg) scale(1.04);}
.aanbod-featured__medaille svg{width:42px;height:42px;color:var(--goud-500);}
.aanbod-featured__body{max-width:46rem;}
.aanbod-featured__body .eyebrow{margin-bottom:var(--ruimte-200);}
.aanbod-featured__body h3{font-size:1.7rem;color:var(--inkt-900);letter-spacing:-.02em;}
.aanbod-featured__body p{margin-top:var(--ruimte-300);color:var(--grijs-600);max-width:44rem;}
.kaart-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--ruimte-400);font-weight:800;color:var(--pruim-600);text-decoration:none;font-size:var(--type-body);}
.kaart-link svg{width:20px;height:20px;transition:transform var(--overgang);}
.aanbod-featured:hover .kaart-link svg,.situatie-kaart:hover .kaart-link svg{transform:translateX(4px);}
.aanbod-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ruimte-400);}
.situatie-kaart{display:flex;flex-direction:column;gap:var(--ruimte-300);background:var(--wit);
  border:1px solid var(--kleur-lijn);border-radius:var(--radius-lg);padding:var(--ruimte-500);
  box-shadow:var(--elev-1);position:relative;text-decoration:none;color:inherit;
  transition:transform var(--overgang),box-shadow var(--overgang),border-color var(--overgang);}
a.situatie-kaart:hover{transform:translateY(-4px);box-shadow:var(--elev-2);border-color:var(--pruim-200);}
.sit-ic{width:var(--icoon-vlak);height:var(--icoon-vlak);flex:none;border-radius:var(--radius-md);background:var(--pruim-100);
  display:flex;align-items:center;justify-content:center;color:var(--pruim-600);transition:transform var(--overgang),background var(--overgang);}
a.situatie-kaart:hover .sit-ic{background:var(--pruim-600);color:var(--goud-500);transform:rotate(-4deg);}
.sit-ic svg{width:27px;height:27px;}
.situatie-kaart h3{font-size:var(--type-h3);color:var(--inkt-900);}
.situatie-kaart p{color:var(--grijs-600);font-size:var(--type-body-s);}
.situatie-kaart--binnenkort .sit-ic{background:var(--room-100);color:var(--grijs-500);}
.binnenkort{align-self:flex-start;margin-top:auto;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grijs-600);background:var(--room-100);border:1px solid var(--kleur-lijn);border-radius:var(--radius-pill);padding:5px 12px;
  display:inline-flex;align-items:center;gap:6px;}
.binnenkort svg{width:13px;height:13px;color:var(--grijs-500);}

/* ---- 10. Tijdlijn (3 stappen op de donkere surface) ----------------------------- */
.hoe-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:var(--ruimte-700);align-items:start;}
.tijdlijn{display:grid;gap:var(--ruimte-500);position:relative;}
.stap{display:grid;grid-template-columns:auto 1fr;gap:var(--ruimte-500);align-items:start;position:relative;padding-bottom:var(--ruimte-500);}
.stap:not(:last-of-type)::before{content:"";position:absolute;left:27px;top:64px;bottom:-6px;width:2px;
  background:linear-gradient(180deg,rgba(224,163,46,.55),rgba(224,163,46,.12));transform-origin:top;transition:transform var(--overgang-traag) .2s;}
.reveal:not(.is-in).stap::before{transform:scaleY(0);}
.stap-num{width:var(--stap-cirkel);height:var(--stap-cirkel);flex:none;border-radius:var(--radius-pill);background:var(--goud-500);color:var(--pruim-900);
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--elev-goud);z-index:1;
  transition:transform var(--overgang-traag);}
.reveal:not(.is-in) .stap-num{transform:scale(.6);}
.stap__body{padding-top:6px;max-width:42rem;}
.stap__body h3{color:#fff;font-size:var(--type-h3);margin:0 0 8px;}
.stap__body p{color:var(--kleur-tekst-op-donker-zacht);}
.verdeling{margin-top:var(--ruimte-400);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-300) var(--ruimte-400);
  background:rgba(224,163,46,.12);border:1px solid rgba(224,163,46,.30);border-radius:var(--radius-lg);padding:var(--ruimte-400) var(--ruimte-500);}
.verdeling .label{flex-basis:100%;font-weight:800;color:var(--goud-500);text-transform:uppercase;letter-spacing:.06em;font-size:var(--type-body-s);}
.verdeling .vd{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff;}
.verdeling .vd b{font-family:var(--font-display);color:var(--goud-500);}
.verdeling .pijl{color:var(--goud-500);width:26px;height:26px;flex:none;}
.zakelijk-noot{margin-top:var(--ruimte-500);font-size:var(--type-body-s);color:var(--kleur-tekst-op-donker-zacht);}
.hoe-cta{margin-top:var(--ruimte-600);}

/* ---- 11. Reviewkaart (getrapt) ------------------------------------------------- */
.bewijs-rij{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ruimte-500);align-items:start;}
.review-kaart{background:var(--wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius-lg);padding:var(--ruimte-500);
  box-shadow:var(--elev-1);position:relative;margin:0;transition:transform var(--overgang),box-shadow var(--overgang);}
.review-kaart:hover{transform:translateY(var(--lift));box-shadow:var(--elev-2);}
.review-kaart--offset{margin-top:var(--ruimte-600);}
.review-kaart .quo{font-family:var(--font-display);font-size:3rem;line-height:.4;color:var(--pruim-400);display:block;height:.5em;}
.review-kaart .quote{font-size:var(--type-body-l);color:var(--inkt-900);margin-top:var(--ruimte-300);}
.review-meta{display:flex;align-items:center;gap:12px;margin-top:var(--ruimte-400);}
.review-avatar{width:var(--avatar);height:var(--avatar);border-radius:var(--radius-pill);background:var(--pruim-100);border:1px dashed var(--pruim-400);flex:none;display:flex;align-items:center;justify-content:center;color:var(--pruim-600);overflow:hidden;}
.review-avatar img{width:100%;height:100%;object-fit:cover;}
.review-naam{font-weight:600;color:var(--grijs-600);font-size:var(--type-body-s);}
.mock-chip{position:absolute;top:14px;right:14px;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--pruim-600);background:var(--pruim-100);border:1px solid var(--pruim-200);border-radius:var(--radius-pill);padding:3px 10px;}
.sp-onder{margin-top:var(--ruimte-600);}

/* ---- 12. Teamkaart (offset) + autoriteit ---------------------------------------- */
.aut-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--ruimte-700);align-items:center;}
.team-rij{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ruimte-400);}
.team-kaart{background:var(--wit);border-radius:var(--radius-lg);box-shadow:var(--elev-2);overflow:hidden;border:1px solid var(--kleur-lijn-op-merk);
  transition:transform var(--overgang),box-shadow var(--overgang);}
.team-kaart:hover{box-shadow:var(--elev-3);}
.team-kaart--offset{transform:translateY(28px);}
.team-kaart--offset:hover{transform:translateY(25px);}
.team-kaart:not(.team-kaart--offset):hover{transform:translateY(var(--lift));}
.team-foto{aspect-ratio:4/3;background:linear-gradient(150deg,var(--pruim-100),var(--pruim-200));
  display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;}
.team-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--overgang-traag);}
.team-kaart:hover .team-foto img{transform:scale(1.03);}
.team-foto>svg{width:66px;height:66px;color:var(--pruim-600);opacity:.7;margin-bottom:-2px;}
.team-foto .mock-chip{background:rgba(255,255,255,.92);color:var(--pruim-600);border-color:transparent;}
.team-kaart .body{padding:var(--ruimte-400);color:var(--kleur-tekst);}
.team-kaart .naam{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--inkt-900);}
.team-kaart .rol{font-size:var(--type-body-s);color:var(--grijs-600);margin-top:3px;}
.aut-bereik{margin-top:var(--ruimte-500);display:inline-flex;align-items:center;gap:11px;font-weight:700;
  background:rgba(255,255,255,.12);border:1px solid var(--kleur-lijn-op-merk);border-radius:var(--radius-pill);padding:11px 20px;}
.aut-bereik svg{width:19px;height:19px;color:var(--goud-500);}
.aut-onder{margin-top:var(--ruimte-500);}

/* ---- 13. Zekerheden-rij + info-regel ------------------------------------------- */
.zekerheden{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--kleur-lijn);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--wit);box-shadow:var(--elev-1);}
.zekerheid{padding:var(--ruimte-500);display:flex;flex-direction:column;gap:var(--ruimte-300);transition:background var(--overgang);}
.zekerheid:hover{background:var(--room-50);}
.zekerheid:not(:last-child){border-right:1px solid var(--kleur-lijn);}
.zek-mark{width:var(--avatar);height:var(--avatar);flex:none;border-radius:var(--radius-pill);background:var(--pruim-600);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(42,18,38,.24);
  transition:transform var(--overgang-traag);}
.reveal:not(.is-in) .zek-mark{transform:scale(.5);}
.zek-mark svg{width:22px;height:22px;color:#fff;}
.zekerheid p{font-size:var(--type-body-l);color:var(--inkt-900);font-weight:600;}
.risico-onder{margin-top:var(--ruimte-500);display:grid;grid-template-columns:1fr auto;gap:var(--ruimte-500);align-items:center;}
.info-regel{display:flex;gap:12px;align-items:flex-start;max-width:var(--measure-narrow);
  background:var(--kleur-vlak-subtiel);border:1px solid var(--kleur-lijn);border-radius:var(--radius-md);padding:var(--ruimte-400);font-size:var(--type-body-s);color:var(--grijs-600);}
.info-regel svg{width:20px;height:20px;flex:none;color:var(--grijs-500);margin-top:2px;}

/* ---- 14. FAQ-accordion ---------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:var(--ruimte-700);align-items:start;}
.faq-aside{position:sticky;top:calc(var(--header-hoogte) + var(--ruimte-500));}
.faq-aside .motief{width:52px;height:36px;margin-top:var(--ruimte-400);}
.faq-lijst{max-width:56rem;}
.faq-item{border-bottom:1px solid var(--kleur-lijn);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:var(--ruimte-400) 0;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--inkt-900);letter-spacing:-.01em;
  transition:color var(--overgang);}
.faq-item summary:hover{color:var(--pruim-600);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .chev{width:28px;height:28px;flex:none;border-radius:var(--radius-pill);background:var(--pruim-100);
  display:flex;align-items:center;justify-content:center;transition:transform var(--overgang),background var(--overgang);}
.faq-item .chev svg{width:14px;height:14px;color:var(--pruim-600);transition:color var(--overgang);}
.faq-item summary:hover .chev{background:var(--pruim-200);}
.faq-item[open] .chev{transform:rotate(45deg);background:var(--pruim-600);}
.faq-item[open] .chev svg{color:#fff;}
.faq-item .antwoord{padding:0 0 var(--ruimte-400);color:var(--kleur-tekst-zacht);max-width:64ch;}
.faq-item[open] .antwoord{animation:faq-in var(--overgang) both;}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-item .antwoord .meer-link{margin-top:var(--ruimte-300);}

/* ---- 15. Eind-CTA --------------------------------------------------------------- */
.eindcta-grid{display:grid;grid-template-columns:1fr .92fr;gap:var(--ruimte-700);align-items:center;}
.eindcta-copy h2{font-size:var(--type-h2);}
.eindcta-copy p{margin-top:var(--ruimte-400);font-size:var(--type-body-l);color:var(--kleur-tekst-op-merk-zacht);max-width:30rem;}
.eindcta-vertrouwen{margin-top:var(--ruimte-400);font-weight:700;display:inline-flex;gap:11px;align-items:center;}
.eindcta-vertrouwen svg{width:19px;height:19px;color:var(--goud-500);}
.eindcta-kaart{background:var(--wit);border-radius:var(--radius-xl);box-shadow:var(--elev-3);padding:var(--ruimte-600) var(--ruimte-500);border:1px solid var(--kleur-lijn-op-merk);text-align:center;color:var(--kleur-tekst);}
.eindcta-kaart .form-titel{font-size:1.5rem;}
.eindcta-kaart__tekst{margin-top:var(--ruimte-300);color:var(--grijs-600);}
.eindcta-kaart .cta{margin-top:var(--ruimte-500);}
.eindcta-kaart .form-privacy{margin-top:var(--ruimte-400);}
.eindcta-grid .formulier-kaart{border:1px solid var(--kleur-lijn-op-merk);}

/* ---- 16. Footer (juridisch; ACM + KvK footer-only) ------------------------------ */
.footer{background:linear-gradient(180deg,var(--kleur-vlak-donker),var(--kleur-vlak-donker-diep));color:var(--kleur-tekst-op-donker-zacht);padding-block:var(--ruimte-700) var(--ruimte-500);}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--ruimte-600);align-items:flex-start;}
.footer .logo{color:var(--room-50);}
.footer .logo img{height:var(--logo-hoogte-footer);}
.footer__col h4{font-family:var(--font-body);font-size:var(--type-body-s);text-transform:uppercase;letter-spacing:.08em;color:var(--goud-500);margin:0 0 12px;font-weight:700;}
.footer__col p,.footer__col a{display:block;font-size:var(--type-body-s);color:var(--kleur-tekst-op-donker-zacht);text-decoration:none;margin:0 0 6px;transition:color var(--overgang);}
.footer__col a:hover{color:var(--room-50);text-decoration:underline;}
.footer__vergunning{margin-top:var(--ruimte-500);padding-top:var(--ruimte-400);border-top:1px solid var(--kleur-lijn-op-donker);
  font-size:.8rem;color:var(--kleur-tekst-op-donker-voet);max-width:80ch;}
.footer--lead .footer__top{gap:var(--ruimte-500);}

/* ---- 17. Dienstpagina-bouwstenen ---------------------------------------------- */
.uitleg-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--ruimte-700);align-items:start;}
.uitleg-tekst{max-width:var(--measure-narrow);font-size:var(--type-body-l);color:var(--grijs-600);display:grid;gap:var(--ruimte-400);}
.uitleg-tekst h3{color:var(--inkt-900);font-size:var(--type-h3);margin-top:var(--ruimte-300);}
.placeholder-copy{border:1.5px dashed var(--pruim-200);border-radius:var(--radius-md);padding:var(--ruimte-400);color:var(--grijs-500);font-size:var(--type-body);background:var(--pruim-100);display:flex;gap:10px;align-items:flex-start;}
.placeholder-copy svg{width:20px;height:20px;flex:none;color:var(--pruim-600);margin-top:2px;}
.weetjes{list-style:none;margin:0;padding:0;display:grid;gap:var(--ruimte-300);}
.weetjes li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius-md);padding:var(--ruimte-300) var(--ruimte-400);font-size:var(--type-body-s);color:var(--grijs-600);}
.weetjes .tick{margin-top:2px;background:var(--pruim-600);}
.weetjes .tick svg{color:#fff;}
.aside-kaart{position:sticky;top:calc(var(--header-hoogte) + var(--ruimte-500));}

/* ---- 18. Reveal / motion (IntersectionObserver zet .is-in) --------------------- */
.reveal{opacity:0;transform:translateY(var(--reveal-verschuiving));transition:opacity var(--overgang-traag),transform var(--overgang-traag);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}.reveal[data-d="2"]{transition-delay:.16s;}.reveal[data-d="3"]{transition-delay:.24s;}
.no-js .reveal,.reveal.is-in{opacity:1;transform:none;}

/* ---- 19. Responsive (één set breekpunten: 1040 · 960 · 900 · 820 · 720 · 560 · 420) */
@media (max-width:960px){
  .hero__inner,.hero--dienst .hero__inner,.prijs-grid,.aut-grid,.eindcta-grid,.bewijs-rij,.uitleg-grid{grid-template-columns:1fr;}
  .hero__inner{padding-block:var(--ruimte-600) var(--ruimte-600);gap:var(--ruimte-500);}
  .hero__media,.hero--dienst .hero__media{aspect-ratio:16/10;transform:none;}
  .hero__slab{display:none;}
  .hero__stage{display:flex;flex-direction:column;}
  .hero__form{order:1;margin:0;transform:none;}
  .hero__media{order:2;margin-top:var(--ruimte-400);}
  .hero__bogen{width:90%;opacity:.35;}
  .aanbod-featured{grid-template-columns:1fr;text-align:left;}
  .review-kaart--offset{margin-top:0;}
  .team-kaart--offset,.team-kaart--offset:hover{transform:none;}
  .kop{margin-bottom:var(--ruimte-600);}
  .aside-kaart{position:static;}
}
@media (max-width:900px){.hoe-grid{grid-template-columns:1fr;gap:var(--ruimte-500);}.aanbod-rij{grid-template-columns:1fr;}}
@media (max-width:820px){
  .zekerheden{grid-template-columns:1fr;}.zekerheid:not(:last-child){border-right:none;border-bottom:1px solid var(--kleur-lijn);}
  .risico-onder{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;gap:var(--ruimte-500);}.faq-aside{position:static;}
}
@media (max-width:720px){
  .team-rij{grid-template-columns:1fr 1fr;}
  .staaf span{font-size:0;}
  .kop{grid-template-columns:1fr;gap:var(--ruimte-200);}.kop__index{padding-top:0;}
  .aanbod-featured{padding:var(--ruimte-500);}
}
@media (max-width:560px){
  .hero__title{font-size:2.2rem;letter-spacing:-.03em;}
  .hero--dienst .hero__title{font-size:1.9rem;}
  .hero__sub{margin-top:var(--ruimte-300);font-size:var(--type-body);}
  .trust-ticks{margin-top:var(--ruimte-400);gap:8px 18px;}
  .hero__actions{margin-top:var(--ruimte-500);}
  .hero__actions .cta{width:100%;}
  .hero__eyebrow{margin-bottom:var(--ruimte-300);}
  .hero__vertrouwen{margin-top:var(--ruimte-400);}
  .logo{font-size:1.3rem;}.logo img{height:26px;}.logo__concept{display:none;}
  .top-tel .venster{display:none;}.top-tel{font-size:.8rem;}
  .verdeling .label{margin-right:0;width:100%;}
}
@media (max-width:420px){.team-rij{grid-template-columns:1fr;}.cta--compact{padding:11px 16px;}.segment{grid-template-columns:1fr;}}

/* ===== icons.css ===== */
/* Ventum icons.css — thema-laag (GEGENEREERD door extract/icons.pl). Iconen als CSS-mask met currentColor,
   omdat kses inline <svg> uit pagina-inhoud stript. Laad NA bundle.css. Decoratief: aria-hidden op de spans. */
.ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;}
.ico-alert{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v6M12 16.5h.01' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-arrow{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ico-battery{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='8' width='15' height='10' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M19 11h2v4h-2M8 13h4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-bolt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6l1-8z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ico-briefcase{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='7' width='18' height='13' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l4.5 4.5L19 7' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ico-clock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 8v4l3 2' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ico-close{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-info{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-menu{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-motief{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none'%3E%3Cpath d='M2 18 C9 18 12 3 26 3' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M26 3 L20.5 3.4 M26 3 L25.6 8.4' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-motief-goud{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none'%3E%3Cpath d='M2 18 C9 18 12 3 26 3' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M26 3 L20.5 3.4 M26 3 L25.6 8.4' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-pen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 00-3-3L5 17v3z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M13.5 8.5l3 3' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");}
.ico-person{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='4' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 20c1.5-4 5-6 8-6s6.5 2 8 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-person-lg{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='4.2' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4 21c1.6-4.5 5-6.5 8-6.5s6.4 2 8 6.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-phone{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 5c0 8 7 15 15 15l2.5-3.5-4.5-2-2 2c-2.5-1-4.5-3-5.5-5.5l2-2-2-4.5L4 5z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ico-pin{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.4' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");}
.ico-plus{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-shield{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12l2.5 2.5L15.5 10' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ico-sun{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.ico-motief{color:var(--pruim-600);} .ico-motief-goud{color:var(--goud-500);}
/* Statische stap-1-kaart (hero /aanbod/): kses stript <input>, dus visuele stubs in de thema-laag.
   De echte invoer staat in het top-level Spectra-formulier (#aanmelden). */
.veld--stub{display:flex;align-items:center;height:var(--veld-hoogte);border:1.5px solid var(--veld-rand);border-radius:var(--veld-radius);padding:0 14px;background:var(--wit);color:var(--grijs-500);font-size:var(--type-body);}
.radio-stub{display:inline-block;width:18px;height:18px;border-radius:999px;border:1.5px solid var(--veld-rand);background:var(--wit);flex:none;vertical-align:middle;}
.radio-stub--aan{border-color:var(--pruim-600);box-shadow:inset 0 0 0 4px var(--pruim-600);}
.ico-bogen{display:block;aspect-ratio:820/420;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 420' fill='none'%3E %3Cpath stroke='%23E0A32E' stroke-width='1.5' opacity='.35' stroke-linecap='round' fill='none' d='M-20 400 C 180 400 260 120 820 60'/%3E %3Cpath stroke='%23E0A32E' stroke-width='2' opacity='.25' stroke-linecap='round' fill='none' d='M-20 440 C 220 440 300 200 820 130'/%3E %3Cpath stroke='%23E0A32E' stroke-width='1' opacity='.18' stroke-linecap='round' fill='none' d='M-20 360 C 160 360 240 60 820 -10'/%3E %3C/svg%3E") center/contain no-repeat;}
.meer-link .ico{width:16px;height:16px;transition:transform var(--overgang);}
.meer-link:hover .ico{transform:translateX(3px);}
.btn-secundair .ico{width:20px;height:20px;}
.hamburger .ico{width:24px;height:24px;}
.drawer-close .ico{width:22px;height:22px;}
.top-tel .tel-ic .ico{width:15px;height:15px;color:var(--pruim-900);}
.tick .ico{width:13px;height:13px;color:var(--pruim-900);}
.hero__vertrouwen .ico{width:19px;height:19px;flex:none;color:var(--goud-500);}
.hero__plek .ico{width:14px;height:14px;color:var(--pruim-600);}
.veld-fout .ico{width:16px;height:16px;flex:none;}
.prijs-onderschrift .ico{width:20px;height:20px;flex:none;color:var(--pruim-600);margin-top:2px;}
.aanbod-featured__medaille .ico{width:42px;height:42px;color:var(--goud-500);}
.kaart-link .ico{width:20px;height:20px;transition:transform var(--overgang);}
.aanbod-featured:hover .kaart-link .ico,.situatie-kaart:hover .kaart-link .ico{transform:translateX(4px);}
.sit-ic .ico{width:27px;height:27px;}
.binnenkort .ico{width:13px;height:13px;color:var(--grijs-500);}
.team-foto>.ico{width:66px;height:66px;color:var(--pruim-600);opacity:.7;margin-bottom:-2px;}
.aut-bereik .ico{width:19px;height:19px;color:var(--goud-500);}
.zek-mark .ico{width:22px;height:22px;color:#fff;}
.info-regel .ico{width:20px;height:20px;flex:none;color:var(--grijs-500);margin-top:2px;}
.faq-item .chev .ico{width:14px;height:14px;color:var(--pruim-600);transition:color var(--overgang);}
.faq-item[open] .chev .ico{color:#fff;}
.eindcta-vertrouwen .ico{width:19px;height:19px;color:var(--goud-500);}
.placeholder-copy .ico{width:20px;height:20px;flex:none;color:var(--pruim-600);margin-top:2px;}
.weetjes .tick .ico{color:#fff;}
/* .cta .arrow / .motief / .hero__bogen behouden hun oorspronkelijke class op de span, dus bundle.css-maten blijven gelden. */

/* ===== site.css ===== */
/* Ventum site.css — sitebrede aanvullingen op bundle.css (thema-laag). Laad NA icons.css.
   besluit-013 (mens-akkoord 2026-09-22): FULL-BLEED hero vervangt het DS-kaart-hero (home 1782 + /aanbod/ 1772).
   Beeld = attachment 1811 als CSS-achtergrond (geen inline <img>), pruim-scrim 90° .94→.82@30%→.45@52%→.12@72%→0. */
.hero--fullbleed{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,72vh,760px);
  background:linear-gradient(90deg,rgba(42,18,38,.94) 0%,rgba(42,18,38,.82) 30%,rgba(42,18,38,.45) 52%,rgba(42,18,38,.12) 72%,rgba(42,18,38,0) 100%),url("https://ventum.nl/wp-content/uploads/2026/09/hero-ventum_1.webp") center/cover no-repeat;}
.hero--fullbleed .hero__inner{grid-template-columns:minmax(0,1fr);width:100%;}
.hero--fullbleed .hero__copy{max-width:40rem;}
.hero--fullbleed .hero__bogen{opacity:.28;}
/* mobiel: beeld achter de tekst → scrim verticaal versterken (contrast AA) */
@media (max-width:960px){.hero--fullbleed{min-height:auto;
  background:linear-gradient(180deg,rgba(42,18,38,.95) 0%,rgba(42,18,38,.9) 55%,rgba(42,18,38,.72) 100%),url("https://ventum.nl/wp-content/uploads/2026/09/hero-ventum_1.webp") center/cover no-repeat;}}

/* /aanbod/: stap-1-aanmeldkaart RECHTS over het beeld. De kaart bestaat uit twee TOP-LEVEL blokken
   (kses stript <input>; Spectra rendert alleen top-level): .hero-kaart-kop (html) + .hero-aanmeldkaart (uagb/forms).
   Desktop: post-content wordt een 1-koloms grid; hero spant rij 1–2, kop = rij 1, formulier = rij 2 → één kaart. */
.hero-kaart-kop{position:relative;z-index:2;background:var(--wit);color:var(--kleur-tekst);border:1px solid var(--kleur-lijn-op-merk);border-bottom:0;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--ruimte-500) var(--ruimte-500) 0;box-shadow:var(--elev-3);scroll-margin-top:96px;}
.hero-kaart-kop .form-titel{margin:0;}
.hero-kaart-kop .progress{margin-bottom:var(--ruimte-300);}
.hero-kaart-kop__noot{margin:0;font-size:.78rem;color:var(--grijs-500);}
.hero-aanmeldkaart{position:relative;z-index:2;border-top:0!important;border-radius:0 0 var(--radius-xl) var(--radius-xl)!important;padding-top:var(--ruimte-300)!important;}
.hero-aanmeldkaart .uagb-forms-main-form{display:flex;flex-wrap:wrap;gap:var(--ruimte-300) 4%;}
.hero-aanmeldkaart .uagb-forms-field-set{margin:0;}
.hero-aanmeldkaart .FullWidth{width:100%;}
.hero-aanmeldkaart .HalfWidth{width:48%;}
.hero-aanmeldkaart .uagb-forms-input-label{display:block;font-weight:700;font-size:var(--type-body-s);color:var(--inkt-800);margin-bottom:8px;}
.hero-aanmeldkaart .uagb-forms-input{width:100%;height:var(--veld-hoogte);border:1.5px solid var(--veld-rand);border-radius:var(--radius-md);padding:0 14px;
  font-family:var(--font-body);font-size:var(--type-body);color:var(--inkt-900);background:var(--wit);}
.hero-aanmeldkaart .uagb-forms-input:focus{outline:none;border-color:var(--veld-rand-focus);box-shadow:0 0 0 3px rgba(90,36,80,.26);}
.hero-aanmeldkaart .uagb-forms-radio-wrap{width:100%;}
.hero-aanmeldkaart .uagb-forms-radio-option{display:inline-flex;align-items:center;gap:10px;width:48%;border:1.5px solid var(--veld-rand);border-radius:var(--radius-md);padding:13px 14px;font-weight:700;margin-right:4%;}
.hero-aanmeldkaart .uagb-forms-radio-option:last-child{margin-right:0;}
.hero-aanmeldkaart .uagb-forms-radio-option:has(input:checked){border-color:var(--pruim-600);background:var(--pruim-100);box-shadow:inset 0 0 0 1px var(--pruim-600);}
.hero-aanmeldkaart input[type=radio]{accent-color:var(--pruim-600);width:18px;height:18px;margin:0;}
.hero-aanmeldkaart .uagb-forms-main-submit-button-wrap{width:100%;margin-top:var(--ruimte-200);}
.hero-aanmeldkaart .uagb-forms-main-submit-button{width:100%;background:var(--cta-bg)!important;color:var(--cta-tekst)!important;border:0;border-radius:var(--radius-pill)!important;
  min-height:var(--cta-min-hoogte);font-family:var(--font-body);font-weight:800;font-size:var(--type-body-l);box-shadow:var(--elev-goud);cursor:pointer;}
.hero-aanmeldkaart .uagb-forms-main-submit-button:hover{background:var(--cta-bg-hover)!important;}
.hero-aanmeldkaart .uagb-forms-main-submit-button:focus-visible{outline:3px solid var(--pruim-600);outline-offset:3px;}
@media (min-width:961px){
  .hero--aanbod .hero__inner{padding-right:calc(440px + var(--ruimte-700));}
  .wp-block-post-content:has(> .hero--aanbod){display:grid;grid-template-columns:minmax(0,1fr);}
  .wp-block-post-content:has(> .hero--aanbod) > .hero--aanbod{grid-row:1 / span 2;grid-column:1;}
  .hero-kaart-kop,.hero-aanmeldkaart{grid-column:1;width:440px;justify-self:end;margin-right:calc(max(0px,(100% - var(--content)) / 2) + var(--content-gutter));}
  .hero-kaart-kop{grid-row:1;align-self:end;margin-top:var(--ruimte-700);}
  .hero-aanmeldkaart{grid-row:2;align-self:start;margin-bottom:var(--ruimte-700);}
}
@media (max-width:960px){
  .hero--aanbod{padding-bottom:var(--ruimte-700);}
  .hero-kaart-kop{width:calc(100% - 2 * var(--content-gutter));margin:calc(-1 * var(--ruimte-600)) auto 0;}
  .hero-aanmeldkaart{width:calc(100% - 2 * var(--content-gutter))!important;margin:0 auto var(--ruimte-600)!important;}
}
/* eind-CTA op /aanbod/: knop terug naar de aanmeldkaart */
.eindcta-actie{margin-top:var(--ruimte-500);}
.eindcta-actie .cta{margin-top:0;}

/* ===== Ventum eigen formulier (v1.0.1) ===== */
.ventum-form-wrap{position:relative;z-index:2;}
.ventum-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.ventum-form .vf-row{display:flex;gap:4%;flex-wrap:wrap;}
.ventum-form .vf-field{margin-bottom:var(--ruimte-300);}
.ventum-form .vf-full{width:100%;}
.ventum-form .vf-half{width:48%;}
.ventum-form label,.ventum-form legend{display:block;font-weight:700;font-size:var(--type-body-s);color:var(--inkt-800);margin-bottom:8px;padding:0;}
.ventum-form .vf-opt{font-weight:400;color:var(--grijs-500);}
.ventum-form input[type=text],.ventum-form input[type=email],.ventum-form textarea{width:100%;min-height:var(--veld-hoogte);border:1.5px solid var(--veld-rand);border-radius:var(--radius-md);padding:12px 14px;font-family:var(--font-body);font-size:var(--type-body);color:var(--inkt-900);background:var(--wit);box-sizing:border-box;}
.ventum-form textarea{min-height:auto;resize:vertical;}
.ventum-form input:focus,.ventum-form textarea:focus{outline:none;border-color:var(--veld-rand-focus);box-shadow:0 0 0 3px rgba(90,36,80,.26);}
.ventum-form .vf-radio{border:0;margin:0 0 var(--ruimte-300);padding:0;}
.ventum-form .vf-radio-opt{display:inline-flex;align-items:center;gap:10px;width:48%;border:1.5px solid var(--veld-rand);border-radius:var(--radius-md);padding:12px 14px;font-weight:700;margin-right:4%;cursor:pointer;box-sizing:border-box;}
.ventum-form .vf-radio-opt:last-child{margin-right:0;}
.ventum-form .vf-radio-opt:has(input:checked){border-color:var(--pruim-600);background:var(--pruim-100);box-shadow:inset 0 0 0 1px var(--pruim-600);}
.ventum-form input[type=radio]{accent-color:var(--pruim-600);width:18px;height:18px;margin:0;}
.ventum-form .vf-submit{width:100%;justify-content:center;margin-top:var(--ruimte-200);}
.ventum-form .vf-privacy{margin-top:var(--ruimte-300);font-size:.8rem;color:var(--grijs-500);}
.ventum-form-melding{padding:14px 16px;border-radius:var(--radius-md);font-weight:600;margin-bottom:var(--ruimte-300);}
.ventum-form-melding--ok{background:var(--pruim-100);color:var(--pruim-700);border:1px solid var(--pruim-200);}
.ventum-form-melding--fout{background:#FBE9E7;color:var(--rood-niet);border:1px solid #F3C0BA;}
@media (max-width:960px){.ventum-form .vf-half{width:100%;}.ventum-form .vf-radio-opt{width:100%;margin-right:0;margin-bottom:10px;}}