/* Landingspagina Express: opmaak.
   De homepage staat vol met eigen stijlen in de HTML zelf; dat is bewust zo
   gelaten zodat het ontwerp precies blijft zoals het gebouwd is. Wat hier
   staat: de kleuren en letters die die HTML gebruikt, de bewegingen, en de
   opmaak van de binnenpagina's (kennisbank, diensten, branches).
   ------------------------------------------------------------------------ */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:#1f6bff; --brand-lit:#5aa9ff; --brand-soft:#8fd0ff; --brand-deep:#123fb0; --flame:#ff9a3d;
  --color-bg:#161826; --color-text:#e9e9ed; --color-surface:#232532; --color-accent:#9184d9;
  --color-accent-300:#d2cefd;
  --color-neutral-100:#f3f5fe; --color-neutral-300:#cfd3e5; --color-neutral-400:#b2b6ca;
  --color-neutral-500:#9397ab; --color-neutral-600:#75798c; --color-neutral-800:#3f424d;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius-md:8px; --shadow-sm:0 0 0 1px #3f424d;
}

html{scroll-behavior:smooth}
body.lpx{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:hidden}
body.lpx a{color:var(--brand-lit);text-decoration:none}
body.lpx a:hover{color:#9ccbff}
body.lpx *:focus-visible{outline:2px solid var(--brand-lit);outline-offset:3px}
body.lpx ::selection{background:rgba(90,169,255,.3)}
.lpx-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#123fb0;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700}
.lpx-skip:focus{left:0}
/* De ring om de muis: de echte aanwijzer blijft gewoon zichtbaar. */
[data-lpx-cursor]{opacity:0;transition:opacity .25s}
body.lpx-muis [data-lpx-cursor]{opacity:.72}
[data-lpx-cursordot]{display:none!important}
body.lpx{cursor:auto}

/* ---------- bewegingen ---------- */
@keyframes lpx-mesh{0%{transform:translate3d(-4%,-2%,0) scale(1.05)}50%{transform:translate3d(5%,4%,0) scale(1.15)}100%{transform:translate3d(-4%,-2%,0) scale(1.05)}}
@keyframes lpx-mesh2{0%{transform:translate3d(4%,3%,0) scale(1.1)}50%{transform:translate3d(-6%,-5%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.1)}}
@keyframes lpx-flame{0%,100%{transform:scaleY(1) scaleX(1);opacity:.95}50%{transform:scaleY(.72) scaleX(1.12);opacity:.75}}
@keyframes lpx-spin{to{transform:rotate(360deg)}}
@keyframes lpx-spin-rev{to{transform:rotate(-360deg)}}
@keyframes lpx-marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes lpx-drift{to{transform:translate3d(-50%,0,0)}}
@keyframes lpx-shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes lpx-faqin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lpx-halo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.18);opacity:.15}}
@keyframes lpx-meteor{0%{transform:translate3d(0,0,0) rotate(38deg);opacity:0}10%{opacity:.9}100%{transform:translate3d(52vw,-560px,0) rotate(38deg);opacity:0}}
@keyframes lpx-footerflyby{0%{transform:translate(-40vw,120px) rotate(38deg);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(46vw,-320px) rotate(38deg);opacity:0}}
@keyframes lpx-liftoff{0%,48%{transform:translateY(0)}55%{transform:translateY(6px)}72%{transform:translateY(-140px)}73%,74%{transform:translateY(-520px);opacity:0}75%{transform:translateY(160px);opacity:0}88%{transform:translateY(0);opacity:1}100%{transform:translateY(0)}}
@keyframes lpx-liftflame{0%,48%{transform:scaleY(.55) scaleX(.9);opacity:.8}55%{transform:scaleY(1.9) scaleX(1.15);opacity:1}72%{transform:scaleY(3.4) scaleX(1.2);opacity:1}75%,86%{opacity:0}100%{transform:scaleY(.55) scaleX(.9);opacity:.8}}
@keyframes lpx-runway{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- menubalk ---------- */
.lpx-kop{
  position:sticky; top:0; z-index:70;
  background:rgba(14,16,32,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid rgba(233,233,237,.07);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.lpx-kop::after{                      /* dunne kleurlijn onder de balk */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,169,255,.45) 18%,rgba(193,76,224,.45) 50%,rgba(255,154,61,.45) 82%,transparent);
  opacity:.5; transition:opacity .35s ease;
}
.lpx-kop.is-vast{
  background:rgba(10,12,24,.9);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  border-bottom-color:rgba(233,233,237,.1);
}
.lpx-kop.is-vast::after{opacity:1}

/* voortgangsbalkje: hoe ver je op de pagina bent */
.lpx-voortgang{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,#1f6bff,#c14ce0 55%,#ff8a3d);
  box-shadow:0 0 12px rgba(90,169,255,.6);
  transition:width .12s linear; z-index:2;
}

.lpx-kop-inner{
  max-width:var(--lpx-breed,1360px); margin:0 auto;
  padding:15px 24px; display:flex; align-items:center; gap:26px;
  transition:padding .35s ease;
}
.lpx-kop.is-vast .lpx-kop-inner{padding:9px 24px}

/* ---------- logo ---------- */
.lpx-logo{display:block; padding:0; background:none; box-shadow:none; flex:0 0 auto; line-height:0}
.lpx-logo img{
  height:52px; width:auto; display:block;
  filter:drop-shadow(0 0 14px rgba(90,169,255,.22));
  transition:height .35s ease, filter .35s ease, transform .35s cubic-bezier(.22,1.2,.36,1);
}
.lpx-kop.is-vast .lpx-logo img{height:42px}
.lpx-logo:hover img{filter:drop-shadow(0 0 20px rgba(90,169,255,.5)); transform:translateY(-1px)}

/* ---------- navigatie ---------- */
.lpx-nav{display:flex; align-items:center; gap:6px; margin-left:auto; font-size:14.5px; font-weight:500}
body.lpx .lpx-nav>a, body.lpx .lpx-menu>button{
  position:relative; color:var(--color-neutral-400); background:none; border:0;
  font:inherit; cursor:pointer; padding:9px 12px; border-radius:9px;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .2s ease, background .2s ease;
}
body.lpx .lpx-nav>a:hover, body.lpx .lpx-menu>button:hover,
body.lpx .lpx-nav>a[aria-current], body.lpx .lpx-menu[data-open="1"]>button{color:#fff}
.lpx-nav>a::after, .lpx-menu>button::before{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#5aa9ff,#c14ce0);
  transform:scaleX(0); transform-origin:center; transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.lpx-nav>a:hover::after, .lpx-nav>a[aria-current]::after,
.lpx-menu>button:hover::before, .lpx-menu[data-open="1"]>button::before{transform:scaleX(1)}

/* pijltje van een uitklapmenu */
.lpx-menu{position:relative}
.lpx-menu>button .pijl{
  width:7px; height:7px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px); transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.lpx-menu[data-open="1"]>button .pijl{transform:rotate(-135deg) translate(-1px,0)}

/* ---------- uitklappaneel ---------- */
.lpx-paneel{
  position:absolute; top:calc(100% + 16px); left:50%; translate:-50% 0;
  min-width:330px; padding:10px;
  background:rgba(18,20,38,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(233,233,237,.12); border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(90,169,255,.06) inset;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1), visibility .24s;
}
.lpx-paneel::before{                        /* driehoekje naar de knop */
  content:""; position:absolute; top:-7px; left:50%; margin-left:-7px; width:12px; height:12px;
  background:rgba(18,20,38,.97); border-left:1px solid rgba(233,233,237,.12); border-top:1px solid rgba(233,233,237,.12);
  transform:rotate(45deg); border-radius:2px;
}
.lpx-menu[data-open="1"] .lpx-paneel{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.lpx-paneel.breed{min-width:560px; display:grid; grid-template-columns:1fr 1fr; gap:2px}

body.lpx .lpx-paneel a{
  position:relative; display:block; padding:11px 14px 11px 16px; border-radius:11px;
  color:var(--color-neutral-300); font-size:14.5px; line-height:1.3; font-weight:500;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
body.lpx .lpx-paneel a::before{
  content:""; position:absolute; left:6px; top:50%; height:0; width:3px; border-radius:2px;
  background:linear-gradient(180deg,#5aa9ff,#c14ce0); transform:translateY(-50%);
  transition:height .22s cubic-bezier(.22,1,.36,1);
}
body.lpx .lpx-paneel a:hover{background:rgba(31,107,255,.14); color:#fff; transform:translateX(2px)}
body.lpx .lpx-paneel a:hover::before{height:22px}
.lpx-paneel a span{display:block; font-size:12.5px; color:var(--color-neutral-600); margin-top:3px; font-weight:400}
.lpx-paneel a:hover span{color:var(--color-neutral-400)}
.lpx-paneel .kop{
  padding:8px 14px 4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-neutral-600);
}
.lpx-paneel .uitgelicht{
  margin:4px; padding:14px 16px; border-radius:12px;
  background:linear-gradient(150deg,rgba(31,107,255,.22),rgba(193,76,224,.10));
  border:1px solid rgba(90,169,255,.28);
}
.lpx-paneel .uitgelicht b{display:block; color:#fff; font-size:14.5px; margin-bottom:3px}
.lpx-paneel .uitgelicht span{color:var(--color-neutral-300); font-size:12.5px; display:block}

/* ---------- knop ---------- */
body.lpx .lpx-cta{
  position:relative; overflow:hidden; margin-left:8px;
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px;
  border:1px solid rgba(122,178,255,.75); border-radius:11px;
  color:#eaf3ff; font-weight:650; font-size:14.5px;
  background:linear-gradient(180deg,rgba(43,118,255,.5),rgba(20,60,170,.5));
  box-shadow:0 6px 20px rgba(31,107,255,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .25s cubic-bezier(.22,1.3,.36,1), box-shadow .25s ease, border-color .25s ease;
}
body.lpx .lpx-cta:hover{
  color:#fff; transform:translateY(-2px); border-color:#8fd0ff;
  box-shadow:0 12px 34px rgba(31,107,255,.45), 0 0 0 4px rgba(90,169,255,.12), inset 0 1px 0 rgba(255,255,255,.25);
}
.lpx-cta .raket{width:16px; height:16px; transition:transform .35s cubic-bezier(.22,1.4,.36,1)}
body.lpx .lpx-cta:hover .raket{transform:translate(3px,-3px) rotate(8deg)}
.lpx-cta .glans{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
body.lpx .lpx-cta:hover .glans{animation:lpx-glans .75s ease-out}
@keyframes lpx-glans{to{left:120%}}

/* ---------- hamburger ---------- */
.lpx-burger{
  display:none; margin-left:auto; background:rgba(255,255,255,.04);
  border:1px solid rgba(233,233,237,.16); border-radius:11px; padding:11px 12px; cursor:pointer;
}
.lpx-burger span{display:block; width:20px; height:2px; background:#e9e9ed; border-radius:2px; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s}
.lpx-burger span+span{margin-top:5px}
.lpx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lpx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lpx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- mobiel paneel ---------- */
.lpx-mobiel{
  display:block; position:fixed; inset:0 0 0 0; z-index:69;
  background:rgba(10,12,24,.98); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  padding:96px 24px 60px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.lpx-mobiel[data-open="1"]{opacity:1; visibility:visible; transform:none}
.lpx-mobiel h2{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-neutral-600); margin:26px 0 6px}
body.lpx .lpx-mobiel a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 2px; border-bottom:1px solid rgba(233,233,237,.07);
  color:var(--color-neutral-300); font-size:16px;
}
body.lpx .lpx-mobiel a:hover{color:#fff}
.lpx-mobiel a::after{content:"›"; color:var(--color-neutral-600); font-size:18px}
.lpx-mobiel .knop{margin-top:28px; justify-content:center; border:0}
.lpx-mobiel .knop::after{content:none}

@media(max-width:1050px){
  .lpx-nav{display:none}
  .lpx-burger{display:block}
  .lpx-logo img{height:42px}
  .lpx-kop.is-vast .lpx-logo img{height:38px}
}
@media(prefers-reduced-motion:reduce){
  .lpx-kop,.lpx-kop-inner,.lpx-logo img,.lpx-paneel,.lpx-cta,.lpx-voortgang{transition:none !important}
}

/* ---------- binnenpagina's ---------- */
.lpx-pagina{position:relative;z-index:1}
.lpx-hero{max-width:900px;margin:0 auto;padding:84px 24px 40px}
.lpx-kruimel{font-size:13px;color:var(--color-neutral-600);margin:0 0 22px}
body.lpx .lpx-kruimel a{color:var(--color-neutral-500)}
.lpx-kruimel span{margin:0 7px;opacity:.6}
.lpx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-soft);margin:0 0 18px}
.lpx-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--flame);box-shadow:0 0 12px var(--flame)}
.lpx-pagina h1{font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-.03em;margin:0 0 20px;font-weight:800}
.lpx-pagina h1 em{font-style:normal;background:linear-gradient(100deg,var(--brand-lit),var(--color-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lpx-intro{font-size:19px;line-height:1.6;color:var(--color-neutral-300);max-width:70ch;margin:0 0 26px}
.lpx-body{max-width:820px;margin:0 auto;padding:0 24px 40px;font-size:17px;line-height:1.75;color:var(--color-neutral-300)}
.lpx-body h2{font-size:clamp(25px,3.4vw,34px);line-height:1.2;letter-spacing:-.02em;color:var(--color-text);margin:56px 0 14px;font-weight:750}
.lpx-body h3{font-size:20px;color:var(--color-text);margin:34px 0 10px;font-weight:700}
.lpx-body p{margin:0 0 16px}
.lpx-body ul,.lpx-body ol{margin:0 0 18px;padding-left:22px}
.lpx-body li{margin:7px 0}
.lpx-body strong{color:var(--color-text)}
.lpx-body table{width:100%;border-collapse:collapse;font-size:15.5px;margin:20px 0}
.lpx-body th,.lpx-body td{text-align:left;padding:11px 13px;border-bottom:1px solid rgba(233,233,237,.1);vertical-align:top}
.lpx-body thead th{background:rgba(35,37,50,.6);color:var(--color-neutral-400);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.lpx-kader{background:rgba(35,37,50,.5);border:1px solid rgba(233,233,237,.12);border-radius:16px;padding:24px 26px;margin:26px 0}
.lpx-kader.blauw{border-color:rgba(90,169,255,.45);background:linear-gradient(160deg,rgba(38,42,96,.65),rgba(20,22,40,.75))}
.lpx-kader p:last-child{margin-bottom:0}
.lpx-kader h3{margin-top:0}
.lpx-vink{list-style:none;padding:0}
.lpx-vink li{position:relative;padding-left:30px;margin:10px 0}
.lpx-vink li::before{content:"";position:absolute;left:2px;top:9px;width:13px;height:7px;border-left:2.4px solid var(--brand-lit);border-bottom:2.4px solid var(--brand-lit);transform:rotate(-45deg)}
.lpx-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:26px 0}
.lpx-stap{background:rgba(35,37,50,.5);border:1px solid rgba(233,233,237,.12);border-radius:14px;padding:20px}
.lpx-stap b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:8px}
.lpx-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:26px 0}
.lpx-cijfer{background:rgba(35,37,50,.5);border:1px solid rgba(233,233,237,.12);border-radius:14px;padding:18px 20px}
.lpx-cijfer b{display:block;font-size:28px;letter-spacing:-.02em;color:#fff}
.lpx-cijfer span{font-size:13.5px;color:var(--color-neutral-500)}

/* vragen */
.lpx-vragen{max-width:820px;margin:0 auto;padding:20px 24px 40px}
.lpx-vraag{border-bottom:1px solid rgba(233,233,237,.1)}
.lpx-vraag>button{width:100%;text-align:left;background:none;border:0;color:var(--color-text);font:600 17px/1.45 var(--font-body);padding:18px 40px 18px 0;cursor:pointer;position:relative}
.lpx-vraag>button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--brand-lit);transition:transform .2s}
.lpx-vraag[data-open="1"]>button::after{transform:translateY(-50%) rotate(135deg)}
.lpx-antwoord{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:0}
.lpx-vraag[data-open="1"] .lpx-antwoord{max-height:460px;opacity:1}
.lpx-antwoord p{color:var(--color-neutral-400);margin:0 0 18px;font-size:16px;line-height:1.7}

/* verder lezen */
.lpx-verder{max-width:1180px;margin:0 auto;padding:40px 24px}
.lpx-verder h2{font-size:22px;margin:0 0 18px;letter-spacing:-.02em}
.lpx-verder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
body.lpx .lpx-verder-grid a{display:block;background:rgba(35,37,50,.5);border:1px solid rgba(233,233,237,.12);border-radius:14px;padding:18px 20px;color:var(--color-text);font-weight:600;transition:border-color .2s,transform .2s}
body.lpx .lpx-verder-grid a:hover{border-color:var(--brand-lit);transform:translateY(-3px);color:#fff}
.lpx-verder-grid a span{display:block;font-weight:400;font-size:13.5px;color:var(--color-neutral-500);margin-top:6px}

/* slot-cta */
.lpx-slot{max-width:1180px;margin:0 auto;padding:20px 24px 90px}
.lpx-slot-kaart{position:relative;overflow:hidden;border:1px solid rgba(90,169,255,.4);border-radius:22px;padding:48px 40px;text-align:center;background:linear-gradient(160deg,rgba(38,42,96,.75),rgba(20,22,40,.9))}
.lpx-slot-kaart h2{font-size:clamp(26px,4vw,40px);margin:0 0 12px;letter-spacing:-.03em}
.lpx-slot-kaart p{color:var(--color-neutral-300);margin:0 0 26px}
body.lpx .lpx-knop{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:12px;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(180deg,#2f8bf5,#1f6bff);border:1px solid #5aa9ff;box-shadow:0 14px 40px rgba(31,107,255,.35)}
body.lpx .lpx-knop:hover{color:#fff;filter:brightness(1.08)}
.lpx-slot-onder{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:13.5px;color:var(--color-neutral-500)}

@media(max-width:900px){
  [data-lpx-g2],[data-lpx-g3]{grid-template-columns:1fr!important}
  [data-lpx-g4]{grid-template-columns:repeat(2,1fr)!important}
  [data-lpx-g2]{gap:40px!important}
  [data-lpx-pad]{padding:32px!important}
  [data-lpx-nav]{display:none!important}
  /* De voor/na-schuif had hier alleen een beeldverhouding gekregen, maar de
     min-height van 565 pixels bleef staan. Die twee samen rekenen de BREEDTE
     terug naar 424 pixels: breder dan een telefoon, dus de hele pagina schoof
     honderd pixels op. Vandaar dat de hoogte-ondergrens hier los moet. */
  [data-lpx-ba]{aspect-ratio:3/4!important;min-height:0!important;max-width:100%!important}
  .lpx-hero{padding:56px 24px 30px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- voet ---------- */
body.lpx .lpx-voet .lpx-voetlink{font-size:14px;color:var(--color-neutral-400);line-height:1.4}
.lpx-voet .lpx-voetlink:hover{color:#fff}
/* De kennisbank heeft veel meer pagina's dan de andere kolommen. In één rij
   werd die kolom drie keer zo lang als de rest en liep de voet scheef. */
@media(min-width:901px){
  .lpx-voet [data-lpx-voetkennis]{grid-template-columns:1fr 1fr;column-gap:24px}
  .lpx-voet [data-lpx-voetkennis]>div:first-child{grid-column:1/-1}
}
@media(max-width:900px){.lpx-voet>div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important;gap:28px!important}}

/* ------------------------------------------------------------------
   Aanpassingen voor gebruik binnen WordPress
   ------------------------------------------------------------------ */

/* 1. Koppen. Bijna elk thema zet een eigen kleur op h1 tot en met h6. Op onze
   pagina's erven de koppen hun kleur van de body, dus die zetten we terug. */
body.lpx :is(h1,h2,h3,h4,h5,h6){color:var(--color-text) !important}
body.lpx .lpx-pagina h1 em{color:transparent !important}
body.lpx :is(p,li,figcaption,label,td,th,dd,dt){color:inherit}

/* 2. Volle breedte. Staat aan via de instelling "Volle breedte forceren".

   Bijna elk thema zet de inhoud in een kolom van 800 tot 1200 pixels. Onze
   pagina heeft de hele breedte nodig, anders staat het menu op een derde van
   het scherm en blijft rechts een lege baan over.

   Het trucje: de negatieve marges links en rechts zijn precies zo groot als
   het verschil tussen de kolom en het scherm, dus het blok loopt van rand tot
   rand. We gebruiken bewust geen width:100vw, want dat telt de schuifbalk mee
   en geeft een streep onderaan. Wil je dit niet? Zet "Volle breedte forceren"
   uit in het beheerscherm; dan valt alles terug in de kolom van je thema. */
body.lpx-vol [data-lpx-root]{
  max-width:none !important;
  width:auto !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
/* Veel thema's zetten "overflow: hidden" op de wikkel om de inhoud. Dat doet
   twee dingen die wij niet willen: het knipt de uitbraak hierboven af, en het
   zorgt ervoor dat de menubalk NIET meer blijft plakken bij het scrollen.
   Op onze pagina's zetten we dat terug, ook als volle breedte uitstaat. */
body.lpx :is(.site,.site-content,.content-area,.page-content,.entry-content,
  #page,#content,#primary,#main,.wp-site-blocks,main,article){
  overflow:visible !important;
}

/* 3. Breedte. Alle secties krijgen dezelfde breedte, zodat elke kop, elke kaart
   en elke vraag op precies dezelfde lijn begint. Wil je het breder of smaller?
   Pas alleen --lpx-breed aan. */
/* ÉÉN kolom voor de hele site.

   De balk en de voet lopen van rand tot rand, maar hun INHOUD staat in dezelfde
   kolom als de tekst van de pagina. Daardoor beginnen het logo, het kruimelpad,
   de kop, de tabellen en de voetkolommen allemaal op precies dezelfde lijn.
   Op een breed scherm groeit die kolom mee tot 1560 pixels; daarboven blijft
   het staan, want een regel van twee meter leest niemand. */
:root{--lpx-breed:min(1560px,92vw)}
body.lpx [style*="max-width: 1180px"],
body.lpx [style*="max-width:1180px"],
body.lpx [style*="max-width: 820px"],
body.lpx [style*="max-width:820px"]{max-width:var(--lpx-breed) !important}

/* De vragenlijst wordt niet mee uitgerekt: die blijft leesbaar breed, maar
   begint wel op dezelfde lijn als de rest. */
body.lpx [data-lpx-faqlist]{max-width:960px}
body.lpx #faq p{max-width:820px}

/* Binnenpagina's staan in dezelfde kolom als de menubalk en de voet, zodat het
   kruimelpad recht onder het logo begint en de voetkolommen recht onder de
   tekst eindigen. Wil je het breder of smaller? Verander alleen --lpx-breed
   hierboven; alles verschuift dan mee. */
.lpx-hero,.lpx-body,.lpx-vragen,.lpx-verder,.lpx-slot{max-width:var(--lpx-breed);margin-left:auto;margin-right:auto}
.lpx-hero>*,.lpx-body>*,.lpx-vraag{max-width:none}

/* Alleen lopende zinnen blijven smaller. Een regel van anderhalve meter leest
   niemand; koppen, tabellen, kaders en kaarten mogen wel de volle breedte. */
.lpx-intro{max-width:62ch}
.lpx-body>p,.lpx-body>ul,.lpx-body>ol{max-width:78ch}
.lpx-antwoord p{max-width:78ch}

/* Tabellen: vaste kolombreedtes, anders wringt de eerste kolom een prijs als
   "€239 p/mnd" over drie regels terwijl er rechts ruimte over is. */
.lpx-body table{table-layout:fixed}
.lpx-body th:first-child,.lpx-body td:first-child{width:34%}
.lpx-body table:has(th:nth-child(3)) :is(th,td):first-child{width:22%}
.lpx-body td{overflow-wrap:break-word}

@media(max-width:1200px){:root{--lpx-breed:100%}}

/* 4. Onderstreping. Veel thema's onderstrepen elke link; in dit ontwerp hoort
   dat alleen bij links midden in een lopende tekst. */
body.lpx a{text-decoration:none !important}
body.lpx .lpx-body p a,body.lpx .lpx-antwoord a{text-decoration:underline !important;text-underline-offset:3px}

/* 5. Cases: als het vastzetten niet lukt, wordt het een strook die je opzij
   schuift. Zo zijn de kaarten altijd bereikbaar. */
/* De voorbeeldkaarten schuiven zijwaarts in hun eigen strook.

   Dit klikte vroeger vast aan het scherm terwijl je scrolde. Dat stond mooi,
   maar het werkte alleen als niets eromheen de pagina verschuift. Zodra een
   thema dat wel deed, sprong de hele sectie naar de linkerrand en stond de kop
   half buiten beeld. Nu is het een gewone strook die je opzij schuift met je
   muis, je vinger of de pijltjestoetsen. Werkt overal, kan niet scheef staan. */
body.lpx [data-lpx-casetrack]{
  width:auto !important;
  max-width:var(--lpx-breed);
  margin:0 auto;
  transform:none !important;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-padding-left:24px;
  padding-bottom:18px;
  scrollbar-width:thin; scrollbar-color:rgba(90,169,255,.45) transparent;
  overscroll-behavior-x:contain;
}
body.lpx [data-lpx-casetrack]>*{flex:0 0 420px; scroll-snap-align:start}
body.lpx [data-lpx-casetrack]::-webkit-scrollbar{height:8px}
body.lpx [data-lpx-casetrack]::-webkit-scrollbar-track{background:rgba(233,233,237,.06);border-radius:4px}
body.lpx [data-lpx-casetrack]::-webkit-scrollbar-thumb{background:rgba(90,169,255,.45);border-radius:4px}
body.lpx [data-lpx-casetrack]::-webkit-scrollbar-thumb:hover{background:rgba(90,169,255,.7)}
@media(max-width:560px){body.lpx [data-lpx-casetrack]>*{flex:0 0 84vw}}
body.lpx [data-lpx-cases]{max-height:none !important; height:auto !important}

/* Geen scrollcontainer van de body maken: dat breekt het vastzetten bij het
   scrollen. clip doet hetzelfde zonder die bijwerking. */
body.lpx{overflow-x:clip}

/* 6. De vier stappen als kaarten: even hoog, met het dag-label netjes onderaan
   op dezelfde lijn. */
body.lpx [data-lpx-stapkaart]{transition:transform .35s cubic-bezier(.22,1.2,.36,1),border-color .3s,background .3s}
body.lpx [data-lpx-stapkaart]:hover{transform:translateY(-4px);border-color:rgba(90,169,255,.45);background:rgba(31,107,255,.1)}
@media(max-width:900px){body.lpx [data-lpx-timeline]{grid-template-columns:1fr 1fr!important}}
@media(max-width:620px){body.lpx [data-lpx-timeline]{grid-template-columns:1fr!important}}

/* 7. De paginatitel van het thema verbergen. Onze pagina's brengen hun eigen
   kop mee; die van het thema staat er dan dubbel bovenop. Dit verbergt alleen
   de titel, het raakt de indeling verder niet aan. */
body.lpx :is(.entry-header,.page-header,.entry-title,.page-title,.post-title,
  .wp-block-post-title,.archive-header,.page-title-bar,.title-bar,.breadcrumbs,
  .elementor-page-title,.astra-advanced-hook-title,.fl-page-header){display:none !important}

/* 8. De kop en voet van het thema verbergen. Onze pagina's brengen hun eigen
   menu en voet mee; die van het thema staat er dan dubbel omheen. Uit te
   zetten in het beheerscherm als je thema iets doet wat we hier missen. */
body.lpx-schoon :is(header#masthead,#masthead,.site-header,#site-header,.header,
  .site-branding,.main-navigation,#site-navigation,.nav-primary,.top-bar,
  .header-wrap,.header-area,.astra-header,.ast-above-header,.ast-below-header,
  .elementor-location-header,.fl-page-header,.et-l--header,#header,.header-main,
  .site-footer,footer#colophon,#colophon,.footer-widgets,.site-info,
  .elementor-location-footer,.fl-page-footer,.et-l--footer,#footer,.footer-main){
  display:none !important;
}
/* Blokthema's (Twenty Twenty-Vier en familie) zetten kop en voet neer als
   sjabloononderdeel zonder herkenbare klasse. Die vangen we hier op. */
body.lpx-schoon :is(.wp-site-blocks,body)>:is(header,footer),
body.lpx-schoon header.wp-block-template-part,
body.lpx-schoon footer.wp-block-template-part{display:none !important}

/* ---------- de letters van "Klaar om te vertrekken?" ---------- */
/* Dit liep eerst via GSAP. Als ScrollTrigger zichzelf ververste (bij het laden
   van het lettertype, bij het wisselen van schermgrootte, of als je meteen naar
   de onderkant sprong) bleef de kop half door elkaar staan. Nu is het gewone
   CSS met "both" als vulstand: hij eindigt altijd netjes, wat er ook gebeurt. */
@keyframes lpx-letterin{
  from{opacity:0;transform:translateY(-140px) rotate(-20deg)}
  60%{opacity:1;transform:translateY(14px) rotate(3deg)}
  80%{transform:translateY(-6px) rotate(-1deg)}
  to{opacity:1;transform:none}
}
[data-lpx-letter]{opacity:0}
.lpx-voet.is-zicht [data-lpx-letter]{
  animation:lpx-letterin .82s cubic-bezier(.22,1,.36,1) both;
}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(1){animation-delay:0.000s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(2){animation-delay:0.035s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(3){animation-delay:0.070s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(4){animation-delay:0.105s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(5){animation-delay:0.140s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(6){animation-delay:0.175s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(7){animation-delay:0.210s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(8){animation-delay:0.245s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(9){animation-delay:0.280s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(10){animation-delay:0.315s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(11){animation-delay:0.350s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(12){animation-delay:0.385s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(13){animation-delay:0.420s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(14){animation-delay:0.455s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(15){animation-delay:0.490s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(16){animation-delay:0.525s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(17){animation-delay:0.560s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(18){animation-delay:0.595s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(19){animation-delay:0.630s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(20){animation-delay:0.665s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(21){animation-delay:0.700s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(22){animation-delay:0.735s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(23){animation-delay:0.770s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(24){animation-delay:0.805s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(25){animation-delay:0.840s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(26){animation-delay:0.875s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(27){animation-delay:0.910s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(28){animation-delay:0.945s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(29){animation-delay:0.980s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(30){animation-delay:1.015s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(31){animation-delay:1.050s}
.lpx-voet.is-zicht [data-lpx-letter]:nth-child(32){animation-delay:1.085s}
/* Eindstand, altijd. Zie de uitleg bij voetletters() in lpx.js. */
.lpx-voet.is-klaar [data-lpx-letter]{animation:none;opacity:1;transform:none}

/* Geen animaties gewenst, of het script laadt niet? Dan staat de kop er gewoon. */
.lpx-voet:not(.is-zicht) [data-lpx-letter]{animation:none}
@media(prefers-reduced-motion:reduce){
  [data-lpx-letter]{opacity:1}
  .lpx-voet.is-zicht [data-lpx-letter]{animation:none}
}

/* ---------- voor en na ---------- */
.lpx-ba{
  position:relative; overflow:hidden; border-radius:20px; user-select:none; cursor:ew-resize;
  max-width:100%;
  border:1px solid rgba(233,233,237,.14); background:#0e1020; min-height:565px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  touch-action:pan-y;
}
.lpx-ba.is-slepen{cursor:grabbing}

/* de oude site: onderste laag, volle breedte */
.lpx-ba-voor{
  position:absolute; inset:0; background:#f2f3f6; color:#1f2733;
  transform-origin:50% 100%; transition:filter .25s linear;
  display:grid; grid-template-rows:auto 1fr auto;
}
.lpx-ba-voor .balk{display:flex;align-items:center;justify-content:space-between;padding:16px 34px;background:#fff;border-bottom:1px solid rgba(31,39,51,.1)}
.lpx-ba-voor .balk b{font-size:15px;letter-spacing:-.01em}
.lpx-ba-voor .balk nav{display:flex;gap:20px;font-size:12.5px;color:#6e7684}
.lpx-ba-voor .body{padding:24px 34px;display:grid;grid-template-columns:1fr 220px;gap:30px;align-content:start}
.lpx-ba-voor h4{font-size:21px;margin:0 0 8px;color:#1f2733}
.lpx-ba-voor p{margin:0 0 10px;font-size:12.5px;line-height:1.75;color:#68707e;max-width:520px}
.lpx-ba-voor .knop{display:inline-flex;align-items:center;justify-content:center;width:106px;height:30px;border:1px solid #c6cbd4;border-radius:3px;font-size:12px;color:#6e7684;background:#fafafc}
.lpx-ba-voor .zij div{background:#e4e7ed;border:1px solid #d6dae2;border-radius:3px}
.lpx-ba-voor .voet{padding:12px 34px;background:#e9ecf1;border-top:1px solid rgba(31,39,51,.1);font-size:11.5px;color:#78808e}

/* jouw pagina: bovenop, breedte volgt de schuif */
.lpx-ba-na{
  position:absolute; inset:0; width:50%; overflow:hidden;
  border-right:2px solid rgba(143,208,255,.9);
  box-shadow:14px 0 40px rgba(90,169,255,.18);
}
.lpx-ba-na .inner{
  position:absolute; inset:0; width:var(--kader,1100px);
  background:linear-gradient(150deg,#141a3c,#0e1024 60%);
  padding:58px 34px 30px; display:grid; align-content:start; gap:16px;
}
.lpx-ba-na .rooster{position:absolute;inset:0;background-image:linear-gradient(rgba(140,180,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.10) 1px,transparent 1px);background-size:46px 46px;opacity:.5;pointer-events:none}

.lpx-ba-eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-soft)}
.lpx-ba-na h3{font-size:clamp(21px,2.5vw,30px);font-weight:750;letter-spacing:-.02em;margin:0;color:#fff;line-height:1.14;max-width:19ch}

.lpx-ba-meting{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:4px}
.lpx-ba-meter{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.lpx-ba-ring{position:relative;width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lpx-ba-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#0f1226}
.lpx-ba-ring b{position:relative;z-index:2;font-size:30px;font-weight:750;color:#fff;letter-spacing:-.02em;line-height:1}
.lpx-ba-meter em{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-500);white-space:nowrap}
.lpx-ba-regels{display:grid;gap:11px;min-width:270px;flex:1 1 300px}
.lpx-ba-regel{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;font-size:13px;color:var(--color-neutral-400)}
.lpx-ba-spoor{height:8px;border-radius:5px;background:rgba(233,233,237,.09);overflow:hidden}
.lpx-ba-spoor i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#1f6bff,#5aa9ff)}
.lpx-ba-regel:nth-child(2) .lpx-ba-spoor i{background:linear-gradient(90deg,#ff9a3d,#c14ce0)}
.lpx-ba-regel:nth-child(3) .lpx-ba-spoor i{background:linear-gradient(90deg,#5aa9ff,#9184d9)}
.lpx-ba-regel b{color:#fff;font-size:13.5px;min-width:74px;text-align:right}

.lpx-ba-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.lpx-ba-knoppen a{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:11px;font-weight:650;font-size:14px}
.lpx-ba-knoppen a:first-child{background:linear-gradient(180deg,#2f8bf5,#1f6bff);color:#fff;border:1px solid #5aa9ff;box-shadow:0 10px 28px rgba(31,107,255,.4)}
.lpx-ba-knoppen a+a{border:1px solid rgba(233,233,237,.2);color:var(--color-neutral-300)}
.lpx-ba-chips{display:flex;gap:9px;flex-wrap:wrap}
.lpx-ba-chips span{font-size:11.5px;padding:6px 12px;border-radius:999px;border:1px solid rgba(233,233,237,.16);color:var(--color-neutral-400)}
.lpx-ba-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px;max-width:640px}
.lpx-ba-kaart{background:rgba(255,255,255,.045);border:1px solid rgba(233,233,237,.12);border-radius:13px;padding:14px 16px;will-change:transform,opacity}
.lpx-ba-kaart b{display:block;font-size:22px;color:#fff;letter-spacing:-.02em}
.lpx-ba-kaart span{font-size:12px;color:var(--color-neutral-500)}

/* de klimlijn met het raketje */
.lpx-ba-curve{position:absolute;inset:0;pointer-events:none;z-index:3}
.lpx-ba-curve svg{width:100%;height:100%}
.lpx-ba-raket{position:absolute;left:2%;top:88%;width:56px;height:56px;z-index:4;pointer-events:none;will-change:transform;filter:drop-shadow(0 0 16px rgba(90,169,255,.7))}
.lpx-ba.is-lancering .lpx-ba-raket{animation:lpx-ba-boost .9s cubic-bezier(.2,.8,.2,1)}
@keyframes lpx-ba-boost{40%{filter:drop-shadow(0 0 34px rgba(255,154,61,.95))}100%{filter:drop-shadow(0 0 16px rgba(90,169,255,.7))}}
.lpx-ba-vonken{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}

/* de greep */
.lpx-ba-greep{
  position:absolute; top:0; bottom:0; left:50%; width:0; z-index:5; pointer-events:none;
}
.lpx-ba-greep::before{
  content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:linear-gradient(180deg,transparent,rgba(143,208,255,.9) 12%,rgba(143,208,255,.9) 88%,transparent);
  box-shadow:0 0 22px rgba(90,169,255,.8);
}
.lpx-ba-greep i{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2f8bf5,#12275e);
  border:1px solid rgba(143,208,255,.95);
  box-shadow:0 0 0 8px rgba(90,169,255,.12), 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  display:grid; place-items:center; color:#fff; font-size:19px;
  transition:transform .25s cubic-bezier(.22,1.3,.36,1), box-shadow .25s;
}
.lpx-ba:hover .lpx-ba-greep i{transform:translate(-50%,-50%) scale(1.06)}
.lpx-ba.is-slepen .lpx-ba-greep i{transform:translate(-50%,-50%) scale(.94);box-shadow:0 0 0 14px rgba(90,169,255,.16),0 14px 34px rgba(0,0,0,.5)}
.lpx-ba-greep b{
  position:absolute; left:50%; top:calc(50% + 44px); translate:-50% 0; white-space:nowrap;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-soft);
  background:rgba(10,12,24,.7); border:1px solid rgba(143,208,255,.3); border-radius:999px; padding:5px 12px;
  opacity:calc(1 - var(--t,0) * 1.6);
}
.lpx-ba-labels{position:absolute;inset:0;pointer-events:none;z-index:4}
.lpx-ba-labels span{
  position:absolute; top:18px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(6px);
}
.lpx-ba-labels .na{left:18px;color:#dcecff;background:rgba(31,107,255,.25);border:1px solid rgba(143,208,255,.45)}
.lpx-ba-labels .voor{right:18px;color:#5b6478;background:rgba(255,255,255,.7);border:1px solid rgba(31,39,51,.12)}

.lpx-ba-schuif{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

@media(max-width:820px){
  .lpx-ba{min-height:620px}
  .lpx-ba-na .inner{padding:22px 20px}
  .lpx-ba-kaarten{grid-template-columns:1fr 1fr}
  .lpx-ba-voor .body{grid-template-columns:1fr}
  .lpx-ba-voor .zij{display:none}
  .lpx-ba-meting{gap:16px}
  .lpx-ba-ring{width:96px;height:96px}
}

/* ---------- het ingebouwde formulier ---------- */
.lpx-formulier{display:grid;gap:14px;max-width:640px;margin:22px 0}
.lpx-veld{margin:0;display:grid;gap:7px}
.lpx-veld label{font-size:14px;font-weight:600;color:var(--color-neutral-300)}
.lpx-formulier :is(input,textarea){
  width:100%;padding:14px 16px;border-radius:10px;font:inherit;font-size:16px;
  color:var(--color-text);background:rgba(11,13,26,.72);
  border:1px solid rgba(233,233,237,.16);transition:border-color .2s,box-shadow .2s;
}
.lpx-formulier :is(input,textarea):focus{
  outline:none;border-color:var(--brand-lit);box-shadow:0 0 0 3px rgba(31,107,255,.18);
}
.lpx-formulier textarea{resize:vertical;min-height:120px}
.lpx-formulier button{cursor:pointer;font:inherit}
.lpx-vangnet{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.lpx .lpx-knop-rustig{background:none;border-color:rgba(233,233,237,.25);box-shadow:none}
/* Invulpunten: alleen zichtbaar als jij zelf ingelogd bent. */
body.lpx mark.lpx-invullen{
  background:rgba(255,154,61,.22);color:#ffd08a;border:1px dashed rgba(255,154,61,.6);
  border-radius:6px;padding:1px 7px;font-size:.92em;font-style:italic;
}

/* ---------- figuren (infographics) ---------- */
/* De opmaak van de figuren die uit includes/figuren.php komen, en van de drie
   losse klassen (.lpx-fig-ringen, .lpx-fig-dodont, .lpx-fig-iconen) waarmee je
   met de hand een eigen figuur in een sjabloon zet.

   Drie afspraken:
   1. Alles staat in de naamruimte lpx-fig-, zodat er niets botst met het thema
      of met de opmaak hierboven.
   2. Er staat geen enkele losse kleurcode in. De doorzichtige randen en vlakken
      worden met color-mix uit de kleuren van de site gemengd; hieronder staan ze
      één keer als variabele, zodat je ze op één plek kunt bijstellen.
   3. Elke figuur past in een kolom van ongeveer 1080 pixels en klapt onder de
      700 pixels netjes onder elkaar, zodat er op een telefoon van 360 pixels
      niets buiten beeld valt. */

:root{
  --lpx-fig-rand:color-mix(in srgb,var(--color-neutral-800) 85%,transparent);
  --lpx-fig-rand-sterk:color-mix(in srgb,var(--color-neutral-600) 80%,transparent);
  --lpx-fig-vlak:color-mix(in srgb,var(--color-neutral-800) 34%,transparent);
  --lpx-fig-zacht:color-mix(in srgb,var(--color-neutral-100) 5%,transparent);
  --lpx-fig-blauw-rand:color-mix(in srgb,var(--brand-lit) 38%,transparent);
  --lpx-fig-blauw-vlak:color-mix(in srgb,var(--brand) 10%,transparent);
  --lpx-fig-blauw-lijn:color-mix(in srgb,var(--brand-lit) 55%,transparent);
  --lpx-fig-oranje-rand:color-mix(in srgb,var(--flame) 45%,transparent);
  --lpx-fig-oranje-vlak:color-mix(in srgb,var(--flame) 12%,transparent);
}

/* ---------- gedeelde bouwstenen van elke figuur ---------- */
.lpx-fig{margin:30px 0;padding:0;max-width:100%}
.lpx-fig svg{max-width:100%}
.lpx-fig :is(ul,ol){list-style:none;margin:0;padding:0}
.lpx-fig li{margin:0}
.lpx-fig p{margin:0}
.lpx-fig h3{margin:0 0 6px;font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.lpx-fig figcaption{
  margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--color-neutral-500);max-width:78ch;
}

.lpx-fig-kader{
  background:var(--lpx-fig-vlak);border:1px solid var(--lpx-fig-rand);
  border-radius:16px;padding:26px;
}
.lpx-fig-lijn{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lpx-fig-ico{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;color:var(--brand-lit)}
.lpx-fig-label{
  display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-soft);font-weight:600;margin:0 0 14px;
}
.lpx-fig-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.lpx-fig-duo-top{align-items:start}
.lpx-fig-kolom{display:flex;flex-direction:column}

/* ---------- 1. stappen ---------- */
.lpx-fig-stapreeks{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lpx-fig-stap{position:relative;text-align:center}
.lpx-fig-stap::after{
  content:"";position:absolute;top:28px;left:calc(50% + 34px);width:calc(100% - 48px);height:1px;
  background:linear-gradient(90deg,var(--lpx-fig-blauw-lijn),transparent);
}
.lpx-fig-stap:last-child::after{display:none}
.lpx-fig-stap-cirkel{
  position:relative;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--lpx-fig-blauw-rand);background:var(--lpx-fig-blauw-vlak);
  display:inline-flex;align-items:center;justify-content:center;color:var(--brand-lit);margin-bottom:16px;
}
.lpx-fig-stap-cirkel svg{width:24px;height:24px}
.lpx-fig-stap-nr{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  background:var(--color-bg);border:1px solid var(--lpx-fig-blauw-rand);color:var(--brand-soft);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.lpx-fig-stap p{font-size:13.5px;color:var(--color-neutral-500);line-height:1.55}

/* ---------- 2. tijdlijn ---------- */
.lpx-fig-tl{position:relative;padding-top:6px}
.lpx-fig-tl-balk{
  position:absolute;top:12px;left:12.5%;right:12.5%;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand) 28%,var(--brand-lit) 55%,var(--color-accent) 78%,var(--flame));
}
.lpx-fig-tl-punten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.lpx-fig-tl-punt{text-align:center;padding-top:30px;position:relative}
.lpx-fig-tl-stip{
  position:absolute;top:5.5px;left:50%;transform:translateX(-50%);width:19px;height:19px;
  border-radius:50%;background:var(--color-bg);border:2px solid var(--brand-lit);display:block;
}
.lpx-fig-tl-eind .lpx-fig-tl-stip{border-color:var(--flame)}
.lpx-fig-tl-punt b{display:block;font-size:14.5px;font-weight:650;margin-bottom:4px}
.lpx-fig-tl-punt span:last-child{display:block;font-size:13px;color:var(--color-neutral-500);line-height:1.5}

/* ---------- 3. anatomie ---------- */
.lpx-fig-anatomie-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:center;
}
.lpx-fig-schema{width:100%;height:auto;display:block}
.lpx-fig-venster{fill:none;stroke:var(--lpx-fig-rand-sterk);stroke-width:1.6}
.lpx-fig-haar{fill:none;stroke:var(--lpx-fig-rand);stroke-width:1.4}
.lpx-fig-vul-zwak{fill:var(--color-neutral-600)}
.lpx-fig-vlak{fill:var(--lpx-fig-blauw-vlak);stroke:var(--lpx-fig-blauw-rand);stroke-width:1.4}
.lpx-fig-sterk{stroke:var(--brand-lit)}
.lpx-fig-knop{fill:var(--lpx-fig-oranje-vlak);stroke:var(--flame);stroke-width:1.4}
.lpx-fig-nr-cirkel{fill:none;stroke:var(--brand-soft);stroke-width:1.4}
.lpx-fig-nr{fill:var(--brand-soft);font-family:var(--font-body);font-size:12px;font-weight:700;text-anchor:middle}
.lpx-fig-legenda li{
  display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--lpx-fig-rand);
}
.lpx-fig-legenda li:last-child{border-bottom:0}
.lpx-fig-legenda b{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--lpx-fig-blauw-rand);
  color:var(--brand-soft);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.lpx-fig-legenda strong{display:block;font-size:15px;font-weight:650;margin-bottom:2px;color:var(--color-text)}
.lpx-fig-legenda span{font-size:13.5px;color:var(--color-neutral-500);line-height:1.5}

/* ---------- 4. voor en na, en de losse do/don't-kaarten ---------- */
.lpx-fig-lijst li{
  display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14.5px;
  color:var(--color-neutral-400);line-height:1.5;
}
.lpx-fig-lijst svg{flex:0 0 auto;width:19px;height:19px;margin-top:1px}
.lpx-fig-vink{color:var(--brand-lit)}
.lpx-fig-kruis{color:var(--color-neutral-500)}
.lpx-fig-koud .lpx-fig-label{color:var(--color-neutral-500)}
.lpx-fig-warm{border-color:var(--lpx-fig-blauw-rand)}

.lpx-fig-dodont{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.lpx-fig-dodont>*{display:flex;flex-direction:column}
.lpx-fig-kop-icoon{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lpx-fig-kop-icoon svg{width:22px;height:22px}
.lpx-fig-kop-icoon b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.lpx-fig-doe{border-color:var(--lpx-fig-blauw-rand)}
.lpx-fig-doe .lpx-fig-kop-icoon{color:var(--brand-lit)}
.lpx-fig-laat .lpx-fig-kop-icoon{color:var(--color-neutral-500)}
.lpx-fig-regels li{
  position:relative;padding:8px 0 8px 18px;font-size:14.5px;color:var(--color-neutral-400);line-height:1.55;
}
.lpx-fig-regels li::before{
  content:"";position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;
  background:var(--color-neutral-600);
}

/* ---------- 5. trechter ---------- */
.lpx-fig-trechter-rij{display:flex;flex-direction:column;align-items:center}
.lpx-fig-tr-laag{
  width:var(--lpx-fig-w,100%);max-width:100%;text-align:center;padding:16px 20px;border-radius:12px;
  border:1px solid var(--lpx-fig-blauw-rand);background:var(--lpx-fig-blauw-vlak);
}
.lpx-fig-tr-laag b{display:block;font-size:15.5px;font-weight:650;margin-bottom:3px}
.lpx-fig-tr-laag span{display:block;font-size:13px;color:var(--color-neutral-500);line-height:1.5}
.lpx-fig-tr-eind{border-color:var(--lpx-fig-oranje-rand);background:var(--lpx-fig-oranje-vlak)}
.lpx-fig-tr-pijl{padding:7px 0;color:var(--lpx-fig-blauw-lijn);line-height:0}
.lpx-fig-tr-pijl svg{width:20px;height:20px}

/* ---------- 6. ringen (ook los te gebruiken) ---------- */
.lpx-fig-ringen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px}
.lpx-fig-ring{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center}
/* Let op de .lpx-fig ervoor: zonder dat wint de algemene regel .lpx-fig svg
   hierboven en wordt de ring zo breed als zijn kolom. */
.lpx-fig .lpx-fig-ring-svg{width:100%;max-width:168px;height:auto;display:block}
.lpx-fig-ring-baan{fill:none;stroke:var(--lpx-fig-rand);stroke-width:8}
.lpx-fig-ring-boog{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-dasharray:289 315}
.lpx-fig-r-blauw{color:var(--brand-lit)}
.lpx-fig-r-paars{color:var(--color-accent)}
.lpx-fig-r-oranje{color:var(--flame)}
.lpx-fig-ring-getal{
  fill:var(--color-text);font-family:var(--font-body);font-size:34px;font-weight:800;
  text-anchor:middle;letter-spacing:-.02em;
}
/* Een langer getal ("1 op 4", "€225") past niet op 34 pixels binnen de ring.
   Deze drie maten schakelen mee met de lengte van het getal. */
.lpx-fig-ring-getal.lpx-fig-ring-m{font-size:26px}
.lpx-fig-ring-getal.lpx-fig-ring-s{font-size:20px}
.lpx-fig-ring-getal.lpx-fig-ring-xs{font-size:15px}
.lpx-fig-ring-eenheid{
  fill:var(--color-neutral-500);font-family:var(--font-body);font-size:12px;font-weight:600;
  text-anchor:middle;letter-spacing:.04em;
}
.lpx-fig-ring-eenheid.lpx-fig-eh-m{font-size:10px;letter-spacing:.02em}
.lpx-fig-ring-eenheid.lpx-fig-eh-s{font-size:8.6px;letter-spacing:0}
.lpx-fig-ring-eenheid.lpx-fig-eh-xs{font-size:7.2px;letter-spacing:0}
.lpx-fig-ring-tekst{display:block;margin-top:14px;font-size:14px;color:var(--color-neutral-400)}

/* ---------- 7. pakketten ---------- */
.lpx-fig-pakrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lpx-fig-pak{display:flex;flex-direction:column}
.lpx-fig-pak h3{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.lpx-fig-pak p{margin:0 0 20px;font-size:13.5px;color:var(--color-neutral-500);line-height:1.55}
.lpx-fig-pak-mid{border-color:var(--lpx-fig-blauw-rand)}
.lpx-fig-omvang{
  height:8px;border-radius:99px;background:var(--lpx-fig-zacht);overflow:hidden;margin-top:auto;
}
.lpx-fig-omvang span{
  display:block;height:100%;width:var(--lpx-fig-v,50%);border-radius:99px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand-lit));
}
.lpx-fig-omvang-tekst{display:block;margin-top:9px;font-size:12px;color:var(--color-neutral-500);letter-spacing:.02em}
.lpx-fig-prijs{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--lpx-fig-rand);
  font-size:19px;font-weight:700;color:var(--brand-soft);
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* ---------- 8. beslisboom ---------- */
.lpx-fig-boom{text-align:center}
.lpx-fig-vraag{
  display:inline-block;padding:13px 20px;border-radius:12px;border:1px solid var(--lpx-fig-blauw-rand);
  background:var(--lpx-fig-blauw-vlak);font-size:15.5px;font-weight:650;margin-bottom:20px;line-height:1.4;
}
.lpx-fig-vraag-klein{font-size:14.5px;padding:11px 17px}
.lpx-fig-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;padding-top:36px}
.lpx-fig-split::before{
  content:"";position:absolute;top:0;left:25%;right:25%;height:1px;background:var(--lpx-fig-rand-sterk);
}
.lpx-fig-split::after{
  content:"";position:absolute;top:-20px;left:50%;width:1px;height:20px;background:var(--lpx-fig-rand-sterk);
}
.lpx-fig-tak{position:relative;display:flex;flex-direction:column}
.lpx-fig-tak::before{
  content:"";position:absolute;top:-36px;left:50%;width:1px;height:36px;background:var(--lpx-fig-rand-sterk);
}
.lpx-fig-tak-label{
  position:absolute;top:-27px;left:50%;transform:translateX(-50%);background:var(--color-bg);
  padding:2px 9px;border-radius:99px;border:1px solid var(--lpx-fig-rand-sterk);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-500);
}
.lpx-fig-ja{color:var(--brand-soft);border-color:var(--lpx-fig-blauw-rand)}
.lpx-fig-uitkomst{
  padding:14px 18px;border-radius:12px;border:1px dashed var(--lpx-fig-rand-sterk);background:var(--lpx-fig-zacht);
}
.lpx-fig-uitkomst-goed{border-style:solid;border-color:var(--lpx-fig-oranje-rand);background:var(--lpx-fig-oranje-vlak)}
.lpx-fig-uitkomst b{display:block;font-size:14.5px;font-weight:650;margin-bottom:4px}
.lpx-fig-uitkomst span{display:block;font-size:13px;color:var(--color-neutral-500);line-height:1.5}

/* ---------- 9. kaart ---------- */
.lpx-fig-kaart-blok{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center}
.lpx-fig-kaart-svg{width:100%;max-width:300px;height:auto;display:block}
.lpx-fig-land{
  fill:var(--lpx-fig-blauw-vlak);stroke:var(--brand-lit);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;
}
.lpx-fig-water{fill:var(--color-bg);stroke:var(--lpx-fig-blauw-rand);stroke-width:1.4;stroke-linejoin:round}
.lpx-fig-plaatsen circle{fill:var(--flame)}
.lpx-fig-plaatsen text{fill:var(--color-neutral-400);font-family:var(--font-body);font-size:11.5px;font-weight:500}
.lpx-fig-kaart-tekst p{color:var(--color-neutral-400);font-size:15px;line-height:1.65;max-width:46ch}

/* ---------- 10. formulieren ---------- */
.lpx-fig-form{display:flex;flex-direction:column}
.lpx-fig-form-body{display:grid;gap:9px;margin-bottom:20px}
.lpx-fig-veld{display:block;height:22px;border-radius:6px;border:1px solid var(--lpx-fig-rand);background:var(--lpx-fig-zacht)}
.lpx-fig-verzend{
  display:block;height:28px;width:118px;border-radius:8px;margin-top:5px;
  border:1px solid var(--lpx-fig-blauw-rand);background:var(--lpx-fig-blauw-vlak);
}
.lpx-fig-verzend-aan{border-color:var(--flame);background:var(--lpx-fig-oranje-vlak)}
.lpx-fig-form p{font-size:13.5px;color:var(--color-neutral-500);line-height:1.55}
.lpx-fig-form-lang .lpx-fig-label{color:var(--color-neutral-500)}
.lpx-fig-form-kort{border-color:var(--lpx-fig-blauw-rand)}

/* ---------- 11. iconenraster (ook los te gebruiken) ---------- */
ul.lpx-fig-iconen{list-style:none;margin:0;padding:0}
/* auto-fit met een bovengrens: vijf iconen worden niet uitgerekt tot vijf brede
   vakken, en zestien iconen lopen netjes over meer rijen. */
.lpx-fig-iconen{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,132px));gap:10px;justify-content:center}
.lpx-fig-iconen li{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px;border-radius:12px;
  border:1px solid var(--lpx-fig-rand);background:var(--lpx-fig-zacht);color:var(--brand-lit);
}
.lpx-fig-iconen .lpx-fig-ico{width:32px;height:32px;vertical-align:baseline}
.lpx-fig-iconen span{font-size:11.5px;color:var(--color-neutral-500);text-align:center;line-height:1.3}

/* ---------- de gedempte tekst nog één keer, met body.lpx ervoor ----------
   Hierboven in dit bestand staat de themaregel
   body.lpx :is(p,li,figcaption,...){color:inherit}. Die is specifieker dan een
   losse klasse, dus zonder deze herhaling krijgt alle tekst in de figuren
   dezelfde kleur als de lopende tekst eromheen en valt het verschil tussen
   hoofdzaak en bijzaak weg. Verander je een kleur hierboven, verander hem dan
   hier ook. */
body.lpx .lpx-fig figcaption,
body.lpx .lpx-fig-stap p,
body.lpx .lpx-fig-pak p,
body.lpx .lpx-fig-form p{color:var(--color-neutral-500)}
body.lpx .lpx-fig-lijst li,
body.lpx .lpx-fig-regels li,
body.lpx .lpx-fig-kaart-tekst p{color:var(--color-neutral-400)}
body.lpx p.lpx-fig-label{color:var(--brand-soft)}

/* ---------- meeschalen op smalle schermen ---------- */
@media (max-width:900px){
  .lpx-fig-stapreeks{grid-template-columns:1fr 1fr}
  .lpx-fig-stap::after{display:none}
}
@media (max-width:700px){
  .lpx-fig-duo,.lpx-fig-dodont,.lpx-fig-pakrij{grid-template-columns:1fr}
  .lpx-fig-anatomie-grid{grid-template-columns:1fr;gap:24px}
  .lpx-fig-kaart-blok{grid-template-columns:1fr;gap:22px;justify-items:center}
  .lpx-fig-kaart-tekst{text-align:center}
  .lpx-fig-kaart-tekst p{max-width:none}
  .lpx-fig-kaart-tekst .lpx-fig-label{justify-content:center}
  .lpx-fig-kader{padding:20px}
  .lpx-fig-tr-laag{width:100%}
  .lpx-fig-tl-balk{display:none}
  .lpx-fig-tl-punten{
    grid-template-columns:1fr;gap:0;border-left:1px solid var(--lpx-fig-blauw-rand);
    margin-left:9px;padding-left:26px;
  }
  .lpx-fig-tl-punt{text-align:left;padding:0 0 22px}
  .lpx-fig-tl-punt:last-child{padding-bottom:0}
  .lpx-fig-tl-stip{top:2px;left:-35px;transform:none;width:17px;height:17px}
  .lpx-fig-split{grid-template-columns:1fr;gap:34px}
  .lpx-fig-split::before{display:none}
  .lpx-fig-tak::before{height:22px;top:-22px}
  .lpx-fig-tak:first-child::before{display:none}
  .lpx-fig-tak:first-child .lpx-fig-tak-label{
    position:static;transform:none;display:inline-block;align-self:flex-start;margin-bottom:8px;
  }
}
@media (max-width:440px){
  .lpx-fig-stapreeks{grid-template-columns:1fr}
  .lpx-fig-kader{padding:18px 16px}
}

/* ---------- de voet: kaarten ---------- */
/* De onderkant van de voet stond eerst als vijf losse kolommen naast elkaar,
   met negentien kennisartikelen in twee sub-kolommen. Dat liep ongelijk af.
   Nu is elke groep een kaart met een eigen kleur erboven.

   Wat er daarna nog aan mankeerde en hier is opgelost: het logo met de
   adresgegevens stond als hoog blok linksboven met veel lucht eromheen, en
   rechts zweefde er los een uitgelicht blogartikel. Dat leest als drie losse
   dingen. Het is nu EEN smalle band: logo links, telefoon en e-mail rechts,
   met een lijn eronder. De "bekijk alle"-links stonden op verschillende hoogtes
   omdat de kaarten niet even vol zijn; die worden nu naar de onderrand geduwd,
   zodat ze op EEN lijn staan. */
.lpx-voet-onder{
  position:relative;max-width:var(--lpx-breed);margin:70px auto 0;padding:44px 0 0;text-align:left;
  border-top:1px solid color-mix(in srgb,var(--color-neutral-100) 8%,transparent);
}

/* de smalle band met logo en gegevens */
.lpx-voet-top{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-bottom:26px;margin-bottom:28px;
  border-bottom:1px solid color-mix(in srgb,var(--color-neutral-100) 7%,transparent);
}
.lpx-voet-logo{display:block;flex:0 0 auto}
.lpx-voet-logo img{height:46px;width:auto;display:block}
.lpx-voet-con{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:14.5px}
.lpx-voet-con a{color:var(--color-neutral-400)}
.lpx-voet-con a:hover{color:var(--brand-soft)}
.lpx-voet-con a + a{position:relative;padding-left:22px}
.lpx-voet-con a + a::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--color-neutral-600);transform:translateY(-50%);
}
.lpx-voetkop{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-600);font-weight:600;
}

/* de vier kaarten */
.lpx-voet-kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.lpx-voetkaart{
  display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--color-neutral-100) 3.5%,transparent);
  border:1px solid color-mix(in srgb,var(--color-neutral-100) 9%,transparent);
  border-radius:14px;padding:20px 20px 18px;border-top:3px solid var(--brand);
}
.lpx-voetkaart.k2{border-top-color:var(--brand-lit)}
.lpx-voetkaart.k3{border-top-color:var(--color-accent)}
.lpx-voetkaart.k4{border-top-color:var(--flame)}
.lpx-voetkaart h3{margin:0 0 3px;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.lpx-voetsub{margin:0 0 14px;font-size:12.5px;color:var(--color-neutral-600)}
.lpx-voetlinks{display:block}
.lpx-voetkaart .lpx-voetlink{display:block;font-size:14px;line-height:1.9;color:var(--color-neutral-400)}
.lpx-voetkaart .lpx-voetlink:hover{color:var(--brand-soft)}
.lpx-voetleeg{display:block;font-size:13.5px;line-height:1.6;color:var(--color-neutral-600)}
.lpx-voetalles{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--brand-soft);
  font-weight:600;margin-top:auto;padding-top:14px;
}
.lpx-voetalles:hover{color:var(--color-neutral-100)}

/* de rij Over ons */
.lpx-voet-over{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:20px}
.lpx-voet-over .lpx-voetlink{font-size:14.5px;color:var(--color-neutral-400)}
.lpx-voet-over .lpx-voetlink:hover{color:var(--brand-soft)}

/* de balk onderaan */
.lpx-voet-balk{
  border-top:1px solid color-mix(in srgb,var(--color-neutral-100) 8%,transparent);
  margin-top:26px;padding:18px 0 24px;display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;font-size:13px;color:var(--color-neutral-600);
}
.lpx-voet-balk i{font-style:normal;padding:0 5px;color:var(--color-neutral-700,var(--color-neutral-600))}
.lpx-voet-balk a{color:var(--color-neutral-500)}
.lpx-voet-balk a:hover{color:var(--color-neutral-300)}
.lpx-voet-balk nav{display:flex;gap:20px;flex-wrap:wrap}
.lpx-voet-balk .lpx-voetlink{font-size:13px;color:var(--color-neutral-600)}
.lpx-voet-balk .lpx-voetlink:hover{color:var(--color-neutral-300)}

/* De tekstkleur nog een keer met body.lpx ervoor, anders wint de themaregel
   bovenaan dit bestand en krijgt alles in de voet dezelfde kleur. */
body.lpx .lpx-voetsub,body.lpx .lpx-voet-balk,body.lpx .lpx-voetleeg{color:var(--color-neutral-600)}
body.lpx .lpx-voetkaart .lpx-voetlink,body.lpx .lpx-voet-con a{color:var(--color-neutral-400)}

@media (max-width:980px){
  .lpx-voet-kaarten{grid-template-columns:1fr 1fr}
  .lpx-voet-top{justify-content:flex-start}
}
@media (max-width:620px){
  .lpx-voet-kaarten{grid-template-columns:1fr}
  .lpx-voet-balk{justify-content:flex-start}
  .lpx-voetalles{margin-top:12px}
}

/* ---------- de blogpagina ---------- */
.lpx-bloglijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:26px 0}
.lpx-blogkaart{
  display:flex;flex-direction:column;gap:7px;padding:22px 22px 20px;border-radius:14px;
  background:color-mix(in srgb,var(--color-neutral-100) 3.5%,transparent);
  border:1px solid color-mix(in srgb,var(--color-neutral-100) 9%,transparent);
  border-top:3px solid var(--brand-lit);transition:border-color .2s,transform .2s;
}
.lpx-blogkaart:hover{border-color:var(--brand-lit);transform:translateY(-2px)}
.lpx-blogcat{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-soft);font-weight:600;
}
.lpx-blogkaart strong{font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.35}
.lpx-blogomschr{font-size:14px;line-height:1.6;color:var(--color-neutral-500)}
.lpx-blogdatum{margin-top:auto;padding-top:9px;font-size:12.5px;color:var(--color-neutral-600)}
body.lpx .lpx-blogomschr{color:var(--color-neutral-500)}
body.lpx .lpx-blogdatum{color:var(--color-neutral-600)}

/* ---------- homepage: "eerst lezen kan ook" ---------- */
/* Dit was drie alinea's vol blauwe links in een smalle kolom, met rechts een
   half scherm leegte. Het las als een linkdump en het zag er leeg uit. Nu drie
   kaarten naast elkaar, elk met een route: eerst begrijpen, zelf proberen,
   laten doen. Dezelfde links, dezelfde ankerteksten, maar je ziet nu in één
   oogopslag welke kant je op wilt. */
.lpx-lees{max-width:var(--lpx-breed);margin:0 auto;padding:90px 24px 40px}
.lpx-lees-eyebrow{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px;
}
.lpx-lees-kop{max-width:640px;margin-bottom:38px}
.lpx-lees-kop h2{
  font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.025em;margin:0 0 16px;line-height:1.12;
}
.lpx-lees-kop p{font-size:16.5px;line-height:1.7;color:var(--color-neutral-400);margin:0}

.lpx-lees-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.lpx-leeskaart{
  position:relative;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--color-neutral-100) 3.5%,transparent);
  border:1px solid color-mix(in srgb,var(--color-neutral-100) 9%,transparent);
  border-radius:16px;padding:26px 26px 22px;border-top:3px solid var(--brand);
  transition:border-color .2s,transform .2s;
}
.lpx-leeskaart:hover{transform:translateY(-2px)}
.lpx-leeskaart.l2{border-top-color:var(--color-accent)}
.lpx-leeskaart.l3{border-top-color:var(--flame)}
.lpx-lees-nr{
  position:absolute;top:22px;right:24px;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:color-mix(in srgb,var(--color-neutral-100) 22%,transparent);
}
.lpx-leeskaart h3{margin:0 0 6px;font-size:19px;font-weight:650;letter-spacing:-.02em}
.lpx-leeskaart > p{
  margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--color-neutral-500);max-width:34ch;
}
.lpx-leeskaart a{
  display:block;font-size:15px;line-height:1.55;padding:9px 0;color:var(--color-neutral-300);
  border-top:1px solid color-mix(in srgb,var(--color-neutral-100) 7%,transparent);
}
.lpx-leeskaart a:last-child{padding-bottom:0}
.lpx-leeskaart a:hover{color:var(--brand-soft)}
body.lpx .lpx-leeskaart > p{color:var(--color-neutral-500)}
body.lpx .lpx-leeskaart a{color:var(--color-neutral-300)}

/* ---------- homepage: de vragen ---------- */
/* Stond in een kolom van 820 pixels met rechts niets. Nu links de kop met een
   kaartje "staat je vraag er niet bij", rechts de lijst zelf. */
.lpx-faqblok{
  max-width:var(--lpx-breed);margin:0 auto;padding:110px 24px 40px;
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start;
}
.lpx-faq-kop h2{
  font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.025em;margin:0 0 14px;line-height:1.12;
}
.lpx-faq-kop > p{font-size:14.5px;line-height:1.65;color:var(--color-neutral-500);margin:0 0 26px}
.lpx-faq-kaart{
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-lit) 30%,transparent);
  border-radius:14px;padding:22px 24px;
}
.lpx-faq-kaart h3{margin:0 0 7px;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.lpx-faq-kaart p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--color-neutral-400)}
.lpx-faq-knop{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:9px;
  border:1px solid var(--brand-lit);color:var(--color-neutral-100);font-size:14.5px;font-weight:600;
  background:color-mix(in srgb,var(--brand) 22%,transparent);
}
.lpx-faq-knop:hover{background:color-mix(in srgb,var(--brand) 38%,transparent)}
body.lpx .lpx-faq-kop > p{color:var(--color-neutral-500)}
body.lpx .lpx-faq-kaart p{color:var(--color-neutral-400)}

@media (max-width:900px){
  .lpx-lees-grid{grid-template-columns:1fr}
  .lpx-faqblok{grid-template-columns:1fr;gap:34px;padding-top:70px}
  .lpx-lees{padding-top:60px}
}