/* Rijschool Forward — voorbeeldontwerp, 26-08-2026.
   Concept "Je gaat #forward": de eigen geslaagden-sticker en de gestreepte
   middenlijn uit het logo ordenen de site. Kleuren gemeten in het logo:
   lime #5AE51B → #CEF210, cyaan #3AE1E1; op wit verdiept naar #2FA608. */

@font-face{font-family:'Sora';src:url('sora.woff2') format('woff2');
  font-weight:100 800;font-display:optional}
/* vangnet-letter: alleen zichtbaar als de webletter niet binnenkomt */
@font-face{font-family:'SoraVal';font-weight:100 900;size-adjust:107%;
  src:local('Segoe UI'),local('Roboto'),local('Arial')}

:root{
  --grond:#FAFCF9;
  --inkt:#0D2114;
  --zacht:#46584D;
  --merk:#2FA608;
  --merk-diep:#1C7A04;
  --lime:#5AE51B;
  --limegeel:#CEF210;
  --cyaan:#17B7CE;
  --nacht:#0B2A17;
  --lijn:rgba(13,33,20,.13);
  --maat:min(1200px,91vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grond);color:var(--inkt);
  font-family:'Sora','SoraVal',system-ui,sans-serif;font-size:16.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
figure{margin:0}
.maat{width:var(--maat);margin-inline:auto}
h1,h2,h3{font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--merk)}
h2{font-size:clamp(26px,2.9vw,38px)}

/* hidden mag nooit verliezen van een display-regel */
[hidden]{display:none!important}

.overslaan{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.overslaan:focus{position:static;width:auto;height:auto;display:inline-block;margin:.5rem;
  padding:.6rem 1rem;background:#fff;color:var(--merk-diep);font-weight:700;border-radius:9px}
main:focus{outline:none}
.vw{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── de sticker: hún groene etiket als terugkerend handwerk-detail ────── */
.stikker{display:inline-block;margin:0 0 1.05rem;padding:.42rem .9rem;
  background:linear-gradient(100deg,#3FC916,#5AE51B 60%,#8DEA18);color:#fff;
  font-size:13px;font-weight:800;font-style:italic;letter-spacing:.015em;
  border-radius:7px;transform:rotate(-1.6deg);
  box-shadow:0 10px 22px -12px rgba(47,166,8,.75)}
.etiket{display:inline-block;margin:0 0 .95rem;padding:.34rem .75rem;
  background:linear-gradient(100deg,#3FC916,#5AE51B 60%,#8DEA18);color:#fff;
  font-size:12px;font-weight:800;font-style:italic;letter-spacing:.02em;
  border-radius:6px;transform:rotate(-1.3deg);
  box-shadow:0 8px 18px -11px rgba(47,166,8,.7)}

/* ── topstrook + kop ─────────────────────────────────────────────────── */
.topstrook{margin:0;background:var(--nacht);color:rgba(255,255,255,.85);font-size:12.5px}
.top-rij{display:flex;align-items:center;gap:1rem;padding-block:.46rem}
.top-zin{font-weight:600;letter-spacing:.015em}
.top-rechts{margin-left:auto;display:flex;align-items:center;gap:1.05rem}
.top-rechts a{color:#fff;font-weight:700;text-decoration:none}
.top-wa{display:inline-flex;align-items:center;gap:.42rem;font-weight:600;color:rgba(255,255,255,.85)}
.top-wa::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(90,229,27,.25)}

.kop{position:sticky;top:0;z-index:40;background:rgba(250,252,249,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.kop-rij{display:flex;align-items:center;gap:1.15rem;padding-block:.6rem}
.merk{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.merk-swoosh{display:grid;place-items:center;filter:drop-shadow(0 6px 12px rgba(47,166,8,.35))}
.merk-tekst{font-weight:600;font-size:17.5px;letter-spacing:-.02em;line-height:1.02;
  display:flex;flex-direction:column;gap:.16rem}
.merk-tekst b{font-weight:800;color:var(--merk-diep)}
.merk-tekst small{font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--zacht)}
.nav{display:flex;gap:1.3rem;align-items:center}
.nav a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--zacht);
  padding-block:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--inkt);border-bottom-color:var(--merk)}
.knop{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:700;font-size:15px;padding:.8rem 1.5rem;border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.knop-actie{color:#fff;background:linear-gradient(180deg,var(--merk),var(--merk-diep));
  box-shadow:0 14px 28px -14px rgba(28,122,4,.9), inset 0 1px 0 rgba(255,255,255,.28)}
.knop-actie:hover{transform:translateY(-2px);
  box-shadow:0 20px 36px -16px rgba(28,122,4,.95), inset 0 1px 0 rgba(255,255,255,.28)}
.knop-lijn{border:1.5px solid var(--lijn);color:var(--inkt);background:#fff}
.knop-lijn:hover{border-color:var(--merk);color:var(--merk-diep);transform:translateY(-2px)}
.kop-knop{padding:.56rem 1.1rem;font-size:14px}
.hamburger{display:none;width:42px;height:38px;border:1px solid var(--lijn);border-radius:10px;
  background:#fff;position:relative;cursor:pointer}
.hamburger i,.hamburger i::before,.hamburger i::after{position:absolute;height:2px;background:var(--inkt)}
.hamburger i{left:11px;right:11px;top:50%;margin-top:-1px}
.hamburger i::before,.hamburger i::after{content:'';left:0;right:0}
.hamburger i::before{top:-6px}
.hamburger i::after{top:6px}
.paneel{display:none;background:#fff;padding:.4rem 0 1.5rem;border-bottom:1px solid var(--lijn)}
.paneel.open{display:block}
.paneel a:not(.knop){display:block;text-decoration:none;padding:.85rem 0;font-size:17.5px;
  font-weight:600;border-bottom:1px solid var(--lijn)}
.paneel .knop{margin-top:1.1rem}
.paneel-voet{margin:1.15rem 0 0;font-size:13.5px;color:var(--zacht);line-height:1.6}

/* ── HERO — de geslaagden-wand met de aanmelder als hart ───────────────
   De wand is hun eigen headercollage; daaroverheen een diepgroene was
   zodat tekst en formulier dragen. */
.hero{position:relative;overflow:hidden;padding-block:3.2rem 3.4rem;color:#fff;
  background:linear-gradient(160deg,#0B2A17,#123A1F 55%,#16491F)}
.hero-wand{position:absolute;inset:0;pointer-events:none;
  background:url('img/collage-wand-2000.jpg') center 34%/cover no-repeat;opacity:.62}
.hero-was{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(105deg, rgba(11,42,23,.95) 0%, rgba(11,42,23,.82) 34%,
      rgba(11,42,23,.42) 62%, rgba(13,50,26,.55) 100%),
    linear-gradient(0deg, rgba(11,42,23,.88) 0%, transparent 28%)}
.hero-gloed{position:absolute;left:-12%;top:-36%;width:58%;height:120%;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(90,229,27,.20), rgba(206,242,16,.06) 55%, transparent 76%);
  animation:gloed-adem 14s ease-in-out infinite}
@keyframes gloed-adem{0%,100%{opacity:.45}50%{opacity:1}}
.hero-stippen{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(206,242,16,.2) 1px, transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(76deg,#000 16%,transparent 55%);
          mask-image:linear-gradient(76deg,#000 16%,transparent 55%)}
.vooruit-lijn{position:absolute;inset:auto 0 0 0;width:100%;height:78%;pointer-events:none}
.vl-pad{opacity:.6}
html.js .vl-pad{stroke-dashoffset:640;animation:vl-teken 2.6s ease-out .3s forwards}
@keyframes vl-teken{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){html.js .vl-pad{stroke-dashoffset:0;animation:none}}

.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:3.4rem;
  align-items:start}
h1{font-size:clamp(34px,3.9vw,55px);color:#fff;text-shadow:0 2px 22px rgba(6,24,13,.55)}
.hero h1 em{color:#CEF210}
.hero-zin{margin:1.15rem 0 0;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.88);max-width:46ch}
.hero-zin b{color:#CEF210;font-weight:800}
.bewijs{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 1.7rem;margin:1.7rem 0 0;
  padding:1.25rem 0 0;border-top:1px solid rgba(255,255,255,.22)}
.bewijs li{display:flex;align-items:center;gap:.6rem}
.bewijs b{font-size:27px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#4FE0E0,#9BEE4A 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.bewijs span{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.78);font-weight:600}
.hero-strip{display:flex;align-items:center;gap:1rem;margin-top:1.55rem;
  padding:.85rem 1rem;border-radius:14px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18)}
.hs-fotos{display:flex;flex:none;width:130px}
.hs-fotos img{width:52px;height:64px;object-fit:cover;border-radius:9px;
  border:2px solid #fff;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
.hs-fotos img+img{margin-left:-14px}
.hs-fotos img:nth-child(1){transform:rotate(-3deg)}
.hs-fotos img:nth-child(3){transform:rotate(3deg)}
.hero-strip p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.82);min-width:0;flex:1}
.hero-strip a{color:#CEF210;font-weight:700}
.hero-feiten{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.28);border-radius:99px;
  padding:.38rem .8rem;background:rgba(6,24,13,.35)}
.chip b{font-weight:800;color:#fff}

/* ── de planner — het hart van de hero ───────────────────────────────── */
.aanmelder{background:#fff;color:var(--inkt);border-radius:20px;padding:1.5rem 1.5rem 1.35rem;
  box-shadow:0 44px 90px -44px rgba(4,18,9,.95), 0 0 0 1px rgba(255,255,255,.4);
  position:relative}
.aanmelder fieldset{border:0;margin:0;padding:0;min-width:0}
.aanmelder legend{padding:0;margin:0 0 .9rem;font-size:18px;font-weight:800;
  letter-spacing:-.02em;color:var(--inkt)}
.am-kop{margin-bottom:1.05rem}
.am-sticker{display:inline-block;margin:0 0 .6rem;padding:.34rem .8rem;
  background:linear-gradient(100deg,#3FC916,#5AE51B 60%,#8DEA18);color:#fff;
  font-size:12px;font-weight:800;font-style:italic;border-radius:6px;
  transform:rotate(-1.6deg);box-shadow:0 8px 18px -10px rgba(47,166,8,.8)}
.am-kop h2{font-size:23px;letter-spacing:-.022em}
.am-nojs{display:none}
html:not(.js) .am-nojs{display:block;margin:0 0 1rem;padding:.75rem .95rem;border-radius:11px;
  background:#F0FAEA;border:1px solid rgba(47,166,8,.4);font-size:14px}
html:not(.js) .am-nojs a{font-weight:700;color:var(--merk-diep)}
html:not(.js) .am-fase[hidden]{display:block!important}
html:not(.js) .am-spoor,html:not(.js) .am-voet .knop{display:none!important}
html:not(.js) .aanmelder fieldset + fieldset{margin-top:1.3rem;padding-top:1.1rem;
  border-top:1px solid var(--lijn)}

.am-spoor{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;list-style:none;
  margin:0 0 1.2rem;padding:0 0 1rem;border-bottom:1px solid var(--lijn)}
.am-spoor li{display:flex;flex-direction:column;align-items:center;gap:.28rem;font-size:10.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9AA89E}
.am-spoor b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;
  background:#EFF5EF;border:1px solid var(--lijn);color:#7A8A7E;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.am-spoor .am-nu{color:var(--inkt)}
.am-spoor .am-nu b{background:linear-gradient(180deg,var(--merk),var(--merk-diep));
  border-color:var(--merk-diep);color:#fff;box-shadow:0 8px 16px -8px rgba(28,122,4,.8)}
.am-spoor .am-af b{background:#CEF210;border-color:#B8E212;color:#1C5A04}

.am-keuzes{display:grid;gap:.5rem}
.am-keuze{position:relative;display:block;cursor:pointer;font-weight:400}
.am-keuze input{position:absolute;opacity:0;width:1px;height:1px}
.am-vak{display:block;padding:.68rem .9rem;border-radius:12px;background:#F7FAF6;
  border:1.5px solid var(--lijn);transition:border-color .2s ease,background .2s ease}
.am-vak b{display:block;font-size:14.6px;font-weight:700;color:var(--inkt)}
.am-vak small{display:block;margin-top:.1rem;font-size:12.3px;color:var(--zacht)}
.am-keuze:hover .am-vak{border-color:rgba(47,166,8,.5)}
.am-keuze input:checked + .am-vak{border-color:var(--merk);background:#F0FAEA;
  box-shadow:0 10px 22px -16px rgba(47,166,8,.7)}
.am-keuze input:focus-visible + .am-vak{outline:2px solid var(--merk);outline-offset:2px}

.am-vraag{margin:1rem 0 .45rem;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--zacht)}
.am-vraag span{text-transform:none;letter-spacing:0;font-weight:500;color:#93A297}
.am-vraag:first-of-type{margin-top:0}
.am-vinkjes{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.am-vink{cursor:pointer}
.am-vink input{position:absolute;opacity:0;width:1px;height:1px}
.am-vink span{display:grid;place-items:center;padding:.5rem .2rem;border-radius:10px;
  background:#F7FAF6;border:1.5px solid var(--lijn);font-size:13.5px;font-weight:700;
  transition:border-color .2s ease,background .2s ease}
.am-vink input:checked + span{border-color:var(--merk);background:#F0FAEA;color:var(--merk-diep)}
.am-vink input:focus-visible + span{outline:2px solid var(--merk);outline-offset:2px}
.am-pillen{display:flex;flex-wrap:wrap;gap:.4rem}
.am-pil{cursor:pointer}
.am-pil input{position:absolute;opacity:0;width:1px;height:1px}
.am-pil span{display:inline-block;padding:.42rem .85rem;border-radius:99px;font-size:13px;
  font-weight:600;color:var(--inkt);background:#F7FAF6;border:1.5px solid var(--lijn);
  transition:border-color .2s ease,background .2s ease}
.am-pil input:checked + span{border-color:var(--merk);background:#F0FAEA;color:var(--merk-diep);font-weight:700}
.am-pil input:focus-visible + span{outline:2px solid var(--merk);outline-offset:2px}
.am-los{text-transform:none;letter-spacing:0;font-weight:500;color:#93A297}

.invoer{display:grid;gap:.28rem;margin-bottom:.85rem}
.invoer label{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--zacht)}
.invoer input,.invoer textarea{width:100%;background:#F7FAF6;border:1.5px solid var(--lijn);
  border-radius:10px;color:var(--inkt);font:inherit;font-size:15px;padding:.62rem .8rem;
  outline:none;transition:border-color .2s ease}
.invoer input:focus,.invoer textarea:focus{border-color:var(--merk)}
.invoer textarea{min-height:64px;resize:vertical}
.am-rij2{display:grid;grid-template-columns:1.2fr .8fr;gap:.8rem}
.am-melding{margin:.15rem 0 0;font-size:13.5px;font-weight:700;color:#B03616}

.am-samenvatting{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem .95rem;font-size:14px}
.am-samenvatting dt{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);padding-top:.14rem}
.am-samenvatting dd{margin:0;font-weight:600}
.am-slot{margin:1rem 0 0;font-size:13px;line-height:1.6;color:var(--zacht)}
.am-klaar{margin:0 0 1rem;padding:.95rem 1rem;border-radius:13px;background:#F0FAEA;
  border:1.5px solid rgba(47,166,8,.55);font-size:14px}
.am-klaar a{color:var(--merk-diep);font-weight:700}

.am-voet{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.2rem;
  padding-top:1.05rem;border-top:1px solid var(--lijn)}
.am-voet .knop{border:0;cursor:pointer;font-family:inherit}
.am-vorige{border:1.5px solid var(--lijn);background:#fff;color:var(--inkt)}
.am-vorige:hover{border-color:var(--inkt);transform:translateY(-2px)}
.am-volgende{color:#fff;background:linear-gradient(180deg,var(--merk),var(--merk-diep));
  box-shadow:0 14px 28px -14px rgba(28,122,4,.9), inset 0 1px 0 rgba(255,255,255,.28)}
.am-volgende:hover{transform:translateY(-2px)}
.am-stuur{color:#fff;background:linear-gradient(180deg,#23B33A,#128C2B);
  box-shadow:0 14px 28px -14px rgba(18,140,43,.9), inset 0 1px 0 rgba(255,255,255,.28)}
.am-stuur:hover{transform:translateY(-2px)}
.am-voet small{flex:1 1 100%;font-size:12.5px;color:var(--zacht)}
.am-voet small a{font-weight:700;color:var(--merk-diep)}

/* ── de geslaagden-baan ──────────────────────────────────────────────── */
.baan-blok{padding-block:4.2rem;background:#fff;border-block:1px solid var(--lijn);
  position:relative;overflow:hidden}
.baan-blok::before{content:'';position:absolute;left:-6%;top:-45%;width:44%;height:90%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(23,183,206,.09), transparent 72%)}
.baan-kop{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end;
  margin-bottom:2rem;position:relative}
.inleiding{margin:0;color:var(--zacht);font-size:16px}
.baan{overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.baan::-webkit-scrollbar{display:none}
.baan.marquee{overflow:hidden}
.baan-rij{display:flex;gap:1.1rem;width:max-content;padding-block:.6rem;
  will-change:transform}
.baan-rij.loopt{animation:baan-loop 64s linear infinite}
html:not(.js) .baan-rij{will-change:auto}
.baan:hover .baan-rij{animation-play-state:paused}
@keyframes baan-loop{to{transform:translateX(-50%)}}
html:not(.js) .baan-rij{flex-wrap:wrap;width:auto;animation:none}
.baan-rij figure{flex:none;width:min(300px,66vw);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 44px -30px rgba(11,42,23,.65), 0 0 0 1px var(--lijn)}
.baan-rij figure:nth-child(odd){transform:rotate(-1.1deg)}
.baan-rij figure:nth-child(even){transform:rotate(1.1deg)}
.baan-rij img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.baan-voet{margin:1.9rem auto 0;font-size:15px;color:var(--zacht);text-align:center}
.baan-voet a{color:var(--merk-diep);font-weight:700}

/* Layout-werk onder de vouw uitstellen: één geforceerde layout van de hele
   pagina kostte 400 ms hoofddraad in Lighthouse (28 beelden, schaduwen,
   gedraaide kaarten). Met content-visibility rekent de browser die secties
   pas door wanneer ze in beeld komen. */
#geslaagd,#lessen,.over,.bewijsband{content-visibility:auto;contain-intrinsic-size:auto 720px}
.voet{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* ── reveal ──────────────────────────────────────────────────────────── */
.op{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;
  transition-delay:calc(var(--v,0)*70ms)}
.op.in{opacity:1;transform:none}
html:not(.js) .op{opacity:1;transform:none}

/* ── responsief ──────────────────────────────────────────────────────── */
@media (max-width:1060px){
  .baan-kop{grid-template-columns:1fr;gap:.7rem;align-items:start}
}
@media (max-width:940px){
  .nav,.kop-knop{display:none}
  .hamburger{display:block}
  .paneel.open{display:flex;flex-direction:column}
  .hero{padding-block:2.2rem 2.6rem}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-tekst{display:contents}
  .hero-tekst>.stikker{order:1}
  .hero-tekst>h1{order:2}
  .hero-tekst>.hero-zin{order:3}
  .aanmelder{order:4;margin-top:1.9rem}
  .hero-tekst>.bewijs{order:5;margin-top:2rem}
  .hero-tekst>.hero-strip{order:6;margin-top:1.3rem}
  .hero-tekst>.hero-feiten{order:7}
  .vooruit-lijn{height:30%}
}
@media (max-width:640px){
  .top-zin{display:none}
  .top-rij{justify-content:center}
  .top-rechts{margin-left:0}
  h1{font-size:clamp(31px,8.6vw,40px)}
  .bewijs{gap:1.1rem 1.4rem}
  .bewijs b{font-size:23px}
}
@media (max-width:560px){
  .am-vinkjes{grid-template-columns:repeat(3,1fr)}
  .am-rij2{grid-template-columns:1fr}
  .am-voet{flex-direction:column;align-items:stretch}
  .am-voet .knop{width:100%;justify-content:center}
  .am-samenvatting{grid-template-columns:1fr;gap:.12rem .5rem}
  .am-samenvatting dd{margin-bottom:.45rem}
  .aanmelder{padding:1.2rem 1.05rem 1.1rem}
  .hero-strip{align-items:flex-start}
  .hero-strip p br{display:none}
}

/* ── sectie-koppen, lessen en de route ───────────────────────────────── */
section{padding-block:4.2rem}
.sectie-kop{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:end;
  margin-bottom:2.1rem}
#lessen{background:var(--grond)}
.les-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:1.05rem}
.les-kaart{background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;
  box-shadow:0 20px 42px -34px rgba(11,42,23,.6);
  transition:transform .25s ease, box-shadow .25s ease}
.les-kaart:hover{transform:translateY(-4px);box-shadow:0 28px 50px -32px rgba(47,166,8,.45)}
.lk-teken{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;font-size:16px;color:var(--merk-diep);
  background:linear-gradient(165deg,rgba(90,229,27,.18),rgba(206,242,16,.12));
  border:1px solid rgba(47,166,8,.3)}
.les-kaart h3{font-size:17px;letter-spacing:-.015em}
.les-kaart p{margin:0;font-size:13.8px;line-height:1.6;color:var(--zacht)}

.route{margin-top:1.4rem;background:#fff;border:1px solid var(--lijn);border-radius:18px;
  padding:1.35rem 1.5rem 1.5rem;box-shadow:0 24px 48px -36px rgba(11,42,23,.6);
  position:relative;overflow:hidden}
.route::after{content:'';position:absolute;right:-6%;top:-60%;width:36%;height:150%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(23,183,206,.08), transparent 72%)}
.route-kop{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1.15rem}
.route-kop b{font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.route-kop span{font-size:12.5px;color:var(--zacht)}
.route-baan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:.6rem;counter-reset:stap;position:relative}
.route-baan::before{content:'';position:absolute;left:4%;right:4%;top:14px;height:0;
  border-top:3px dashed rgba(47,166,8,.4)}
.route-baan li{position:relative;text-align:center;padding-top:2.5rem;counter-increment:stap}
.route-baan li::before{content:counter(stap);position:absolute;left:50%;top:0;width:30px;
  height:30px;margin-left:-15px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:13.5px;color:#fff;
  background:linear-gradient(165deg,var(--merk),var(--merk-diep));
  box-shadow:0 8px 16px -8px rgba(28,122,4,.9)}
.route-baan b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em}
.route-baan span{display:block;margin-top:.2rem;font-size:12px;line-height:1.5;color:var(--zacht)}
.route-slaagd::before{background:linear-gradient(165deg,#5AE51B,#8DEA18)!important;
  color:#14530A!important;content:'\2713'!important}

/* ── over Alaa ───────────────────────────────────────────────────────── */
.over{background:#fff;border-block:1px solid var(--lijn)}
.over-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center}
.over-beeld{position:relative;border-radius:18px;overflow:hidden;transform:rotate(-1.2deg);
  box-shadow:0 34px 66px -40px rgba(11,42,23,.7), 0 0 0 1px var(--lijn)}
.over-beeld img{width:100%;height:auto;display:block}
.over-beeld figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.7rem .95rem .8rem;
  color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(0deg, rgba(11,42,23,.88) 28%, transparent)}
.over-zin{margin:1.1rem 0 0;font-size:16px;line-height:1.7;color:var(--zacht)}
.over-quote{margin:1.4rem 0 0;padding:1.05rem 1.2rem;border-radius:14px;background:#F7FAF6;
  border:1px solid var(--lijn);border-left:4px solid var(--merk)}
.over-quote p{margin:0;font-size:14.8px;line-height:1.65;font-style:italic}
.over-quote footer{margin-top:.5rem;font-size:12.5px;color:var(--zacht);font-style:normal}
.over-tik{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.15rem;
  padding:.95rem 1.1rem;border-radius:14px;
  background:linear-gradient(120deg,rgba(23,183,206,.1),rgba(90,229,27,.1));
  border:1px solid rgba(23,183,206,.3)}
.ot-teken{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--inkt);color:#fff;font-size:12px}
.over-tik p{margin:0;font-size:13.8px;line-height:1.6;color:var(--zacht)}
.over-tik b{color:var(--inkt)}

/* ── de bewijsband — de wand keert terug, nu als hún scorebord ───────── */
.bewijsband{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#0B2A17,#123A1F 60%,#16491F)}
.bb-wand{position:absolute;inset:0;pointer-events:none;
  background:url('img/collage-wand-2000.jpg') center 62%/cover no-repeat;opacity:.5}
.bb-was{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(11,42,23,.94) 0%, rgba(11,42,23,.78) 45%,
    rgba(11,42,23,.6) 100%)}
.bewijsband .maat{position:relative}
.bb-kop{max-width:60ch;margin-bottom:1.9rem}
.bewijsband h2{color:#fff}
.bewijsband h2 em{color:#CEF210}
.bb-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:1.1rem;align-items:stretch}
.bb-cijfers{display:grid;gap:.8rem;align-content:start}
.bb-blok{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.05rem;border-radius:14px;
  background:rgba(6,24,13,.5);border:1px solid rgba(255,255,255,.16)}
.bb-blok b{font-size:26px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#4FE0E0,#9BEE4A 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.bb-blok span{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.78);font-weight:600}
.bb-quote{margin:0;padding:1.1rem 1.25rem;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(5px);display:flex;flex-direction:column}
.bb-quote p{margin:0;font-size:14.4px;line-height:1.65;color:rgba(255,255,255,.94);font-style:italic}
.bb-quote footer{margin-top:auto;padding-top:.6rem;font-size:12.5px;color:rgba(255,255,255,.68)}
.bb-doen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.knop-glas{color:#fff;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.knop-glas:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}

/* ── footer ──────────────────────────────────────────────────────────── */
.voet{background:#081F11;color:rgba(255,255,255,.7);padding:2.6rem 0 0;font-size:14px}
.voet-rij{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.voet-kop{margin:0 0 .6rem;font-size:12.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#fff}
.voet-rij p,.voet-rij a{margin:0;color:rgba(255,255,255,.7);text-decoration:none;line-height:1.85}
.voet-rij a:hover{color:#CEF210}
.voet-kolom a{display:block}
.voet-onder{background:#061708;padding-block:1.4rem;font-size:13px}
.vo-rij{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.vo-rechts{margin-left:auto}
.vo-rij a{color:#fff;font-weight:700;text-decoration:none}

/* ── responsief voor de nieuwe secties ──────────────────────────────── */
@media (max-width:1060px){
  .les-rij{grid-template-columns:1fr 1fr}
  .route-baan{grid-template-columns:1fr 1fr;gap:1rem .8rem}
  .route-baan::before{display:none}
  .route-baan li{text-align:left;padding:.1rem 0 .1rem 2.6rem}
  .route-baan li::before{left:0;top:.1rem;margin-left:0}
  .bb-grid{grid-template-columns:1fr 1fr}
  .bb-cijfers{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:940px){
  .sectie-kop{grid-template-columns:1fr;gap:.8rem;align-items:start}
  .over-grid{grid-template-columns:1fr;gap:2rem}
  .over-beeld{transform:rotate(0deg)}
  .voet-rij{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section{padding-block:3rem}
  .les-rij{grid-template-columns:1fr}
  .route-baan{grid-template-columns:1fr}
  .bb-grid{grid-template-columns:1fr}
  .bb-cijfers{grid-template-columns:1fr}
  .bb-doen{flex-direction:column;align-items:stretch}
  .bb-doen .knop{width:100%;justify-content:center}
  .voet-rij{grid-template-columns:1fr;gap:1.4rem}
  .vo-rechts{margin-left:0}
}

/* ── bijpagina's: kleine hero met de duo-kaart ───────────────────────── */
.hero-klein{padding-block:3.2rem 3.6rem}
.duo-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;
  align-items:center}
.duo-tekst .hero-doen{margin-top:1.5rem}
.duo-kaart{background:#fff;color:var(--inkt);border-radius:20px;padding:1.35rem 1.4rem 1.3rem;
  box-shadow:0 44px 90px -44px rgba(4,18,9,.95), 0 0 0 1px rgba(255,255,255,.4)}
.dk-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  padding-bottom:.95rem;border-bottom:1px solid var(--lijn)}
.dk-cijfers b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--cyaan),var(--merk) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.dk-cijfers span{display:block;margin-top:.22rem;font-size:11.5px;line-height:1.4;color:var(--zacht)}
.dk-zin{margin:.95rem 0 .3rem;font-size:13.5px;line-height:1.6;color:var(--zacht)}
.dk-wegwijs{display:grid;gap:.45rem;margin-top:.75rem}
.dk-wegwijs a{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .8rem;border-radius:11px;
  background:#F7FAF6;border:1px solid var(--lijn);text-decoration:none;transition:.18s}
.dk-wegwijs a:hover{background:#F0FAEA;border-color:rgba(47,166,8,.45);transform:translateX(2px)}
.dk-wegwijs b{font-size:13.5px;color:var(--merk-diep)}
.dk-wegwijs span{font-size:12px;color:var(--zacht)}
@media (max-width:940px){
  .duo-grid{grid-template-columns:1fr;gap:2rem}
}
.baan:focus-visible{outline:3px solid var(--merk);outline-offset:4px;border-radius:8px}