/* Rijschool Dick Joosten — herbouw 15-10. Hero = hero.css (vaste V1-fotomuur uit de hero-set); hieronder de eigen opmaak. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/figtree-900.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700.woff2) format("woff2")}

:root{
  --geel:#E5BF2C;--geel-licht:#FFE07A;--geel-diep:#B8901A;--geel-tekst:#5E4A00;--geel-zacht:#FFF1BF;
  --zwart:#121212;--inkt:#17150F;--grijs:#57534A;--lucht:#F3EEDD;
  --blauw:#121212;--blauw-hover:#2B2B2B;--blauw-zacht:#FFF1BF;--blauw-tekst:#5E4A00;
  --font-kop:"Figtree",system-ui,sans-serif;--font:"Manrope",system-ui,sans-serif;
  --lint:36px;--kop:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--inkt);background:#fff;-webkit-font-smoothing:antialiased}
figure{margin:0}
img{height:auto}
a{color:inherit}
.kader{width:min(1200px,calc(100% - 2 * clamp(18px,4vw,48px)));margin-inline:auto}
.spring{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--geel);color:var(--zwart);padding:10px 16px;border-radius:10px;font-weight:700}
.spring:focus{left:12px}
:focus-visible{outline:3px solid var(--geel);outline-offset:3px}

/* koppen, etiketten, knoppen */
h2{font-family:var(--font-kop);font-weight:900;font-size:clamp(36px,4.4vw,60px);line-height:1.04;letter-spacing:-.035em;margin:0 0 .35em;text-wrap:balance}
h2 em{font-style:normal}
h3{font-family:var(--font-kop);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.c{text-align:center}
.lead{font-size:18.5px;line-height:1.6;color:var(--grijs);max-width:660px;margin:0}
.lead.c{margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--font-kop);font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--geel-tekst)}
.kicker::before{content:"";width:30px;height:3px;border-radius:2px;background:var(--geel)}
.kicker-c{display:flex;justify-content:center}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 24px;border-radius:12px;border:2px solid transparent;font-family:var(--font-kop);font-weight:900;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.knop:hover{transform:translateY(-1px)}
.knop svg{width:20px;height:20px;flex:none}
.knop-geel{background:var(--geel);color:var(--zwart);box-shadow:0 12px 26px -12px rgba(229,191,44,.85)}
.knop-geel:hover{background:#F0CC3A}
.knop-zwart{background:var(--zwart);color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.knop-zwart:hover{background:#2B2B2B}
.knop-rand{background:#fff;color:var(--zwart);border-color:var(--zwart)}
.knop-rand:hover{background:var(--geel-zacht)}
.knop-wa{background:#128C4A;color:#fff}
.knop-wa:hover{background:#0F7A40}
.vinklijst{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.vinklijst li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.vinklijst svg{width:20px;height:20px;flex:none;color:var(--geel);margin-top:1px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0s),transform .6s ease var(--d,0s)}

/* topstrook en kopbalk */
.lint{height:var(--lint);overflow:hidden;background:var(--geel);color:var(--zwart);font-size:13.5px;font-weight:700}
.lint-in{display:flex;align-items:center;gap:28px;height:100%}
.lint-in > *{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lint-in svg{width:15px;height:15px;flex:none}
.lint-wa{margin-left:auto;text-decoration:none}
.lint-wa:hover{text-decoration:underline}
.bar{position:sticky;top:0;z-index:50;height:var(--kop);background:#0E0E0F;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.bar.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.9)}
.bar-in{display:flex;align-items:center;gap:28px;height:100%}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo-blok{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--geel);color:var(--zwart);font-family:var(--font-kop);font-weight:900;font-size:17px;letter-spacing:-.02em;transform:rotate(-4deg)}
.logo-naam{font-family:var(--font-kop);font-weight:900;font-size:20px;line-height:1.05;letter-spacing:-.02em}
.logo-naam small{display:block;font-family:var(--font);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;font-weight:600}
.nav a:hover{color:var(--geel)}
.nav .nav-kn{display:none}
.bar-rechts{display:flex;align-items:center;gap:10px}
.bar-kn{min-height:46px;padding:10px 20px;font-size:15px;border-radius:11px}
.burger{display:none;width:46px;height:46px;border-radius:11px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer}
.burger svg{width:24px;height:24px}

/* hero: V1-fotomuur in de merkkleur (de opbouw staat in hero.css) */
.hero.ho-1{--a:#E5BF2C;--l:#FFE07A;--d:#B8901A}
.hero .h-cta{background:var(--geel);color:var(--zwart);box-shadow:0 12px 26px -10px rgba(229,191,44,.8)}
.hero .h-cta:hover{background:#F0CC3A}
.hero .h-veld:focus-within{border-color:var(--zwart);box-shadow:0 0 0 3px rgba(229,191,44,.45)}
.hero .h-onder a{color:var(--geel-tekst)}

/* sectie-basis */
.sec{position:relative;padding:clamp(64px,8vw,112px) 0;isolation:isolate;overflow:hidden}

/* aanbod — één grote autokaart naast drie liggende kaarten */
.ab-sec{background:radial-gradient(60% 50% at 88% 0%,rgba(229,191,44,.18),transparent 70%),radial-gradient(45% 40% at 0% 100%,rgba(229,191,44,.12),transparent 70%),#FFFDF5}
.ab-sec h2 em,.pk-sec h2 em,.td-sec h2 em,.fq-sec h2 em{color:var(--inkt);background:linear-gradient(180deg,transparent 58%,var(--geel) 58%,var(--geel) 90%,transparent 90%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* werkwijze — merkvlak met een route van vier haltes */
.ww-sec{background:radial-gradient(60% 70% at 100% 0%,#F6D65C 0%,transparent 62%),radial-gradient(50% 60% at 0% 100%,#D4A915 0%,transparent 65%),linear-gradient(160deg,#EAC536,#DFB424)}
.ww-sec::before{content:"";position:absolute;inset:22px;border:1.5px solid rgba(18,18,18,.18);border-radius:30px;pointer-events:none;z-index:-1}
.ww-sec .kicker{color:var(--zwart)}
.ww-sec .kicker::before{background:var(--zwart)}
.ww-sec h2 em,.ct-sec h2 em{color:#fff;background:var(--zwart);padding:0 .14em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ww-sec .lead{color:#3B3317}
.ww-raster{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:center}
.ww-kaart{margin-top:30px;background:var(--zwart);color:#fff;border-radius:22px;padding:26px 28px 28px;box-shadow:0 34px 56px -32px rgba(0,0,0,.65)}
.ww-kaart-kop{margin:0 0 14px;font-family:var(--font-kop);font-weight:900;font-size:20px;color:var(--geel)}
.ww-kaart .vinklijst{font-size:15.5px;color:rgba(255,255,255,.9)}
.ww-kaart .knop{margin-top:22px}
.ww-route{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:16px}
.ww-route::before{content:"";position:absolute;left:25px;top:34px;bottom:34px;width:6px;border-radius:3px;background:var(--zwart)}
.ww-halte{position:relative;display:grid;grid-template-columns:56px 132px minmax(0,1fr);column-gap:18px;align-items:center}
.ww-halte::before{content:"";grid-column:2/4;grid-row:1;align-self:stretch;margin-left:-10px;background:#fff;border-radius:22px;box-shadow:0 22px 40px -28px rgba(70,52,0,.6)}
.ww-nr{grid-column:1;grid-row:1;position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--zwart);color:var(--geel);font-family:var(--font-kop);font-weight:900;font-size:24px;box-shadow:0 0 0 6px #E6BE30}
.ww-foto{grid-column:2;grid-row:1;position:relative;margin:12px 0;aspect-ratio:1;border-radius:15px;overflow:hidden}
.ww-foto img{width:100%;height:100%;object-fit:cover}
.ww-tekst{grid-column:3;grid-row:1;position:relative;padding:16px 22px 16px 0}
.ww-tekst h3{margin:0 0 4px;font-size:21px}
.ww-tekst p{margin:0;font-size:15px;line-height:1.5;color:var(--grijs)}
.ww-label{display:inline-block;margin-top:9px;padding:4px 11px;border-radius:999px;background:var(--geel-zacht);color:var(--geel-tekst);font-size:12.5px;font-weight:800}

/* lessenwijzer — kies-kolom naast de uitkomst */
.rh-sec{background:radial-gradient(55% 70% at 50% 0%,rgba(229,191,44,.24),transparent 66%),radial-gradient(40% 50% at 100% 100%,rgba(229,191,44,.1),transparent 70%),linear-gradient(180deg,#151515,#0C0C0C);color:#fff}
.rh-sec .kicker,.td-sec .kicker{color:var(--geel-tekst)}
.rh-sec .kicker{color:var(--geel)}
.rh-sec h2 em,.rv-sec h2 em,.vg-sec h2 em{color:var(--geel)}
.rh-sec .lead,.rv-sec .lead,.vg-sec .lead{color:rgba(255,255,255,.74)}
.rh{display:grid;grid-template-columns:1.15fr 1fr;max-width:1100px;margin:46px auto 0;background:#fff;color:var(--inkt);border-radius:28px;overflow:hidden;box-shadow:0 44px 90px -44px rgba(0,0,0,.9),0 0 0 1px rgba(229,191,44,.25)}
.rh-kies{display:grid;gap:22px;align-content:start;padding:34px 36px}
.rh-groep{border:0;margin:0;padding:0;min-width:0}
.rh-groep legend{padding:0;margin-bottom:10px;font-family:var(--font-kop);font-weight:900;font-size:17px}
.rh-chips{display:grid;gap:10px}
.rh-chips-2{grid-template-columns:repeat(2,1fr)}
.rh-chips-3{grid-template-columns:repeat(3,1fr)}
.rh-chips-5{grid-template-columns:repeat(5,1fr)}
.rh-chips label{position:relative;display:block}
.rh-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rh-chips span{display:block;text-align:center;padding:12px 6px;border:1.5px solid #E6DFC8;border-radius:14px;font-family:var(--font-kop);font-weight:900;font-size:22px;line-height:1.1;transition:background .2s,border-color .2s}
.rh-chips-2 span{font-size:18px}
.rh-chips small{display:block;margin-top:3px;font-family:var(--font);font-weight:600;font-size:12px;color:var(--grijs)}
.rh-chips input:checked + span{background:var(--zwart);border-color:var(--zwart);color:#fff}
.rh-chips input:checked + span small{color:rgba(255,255,255,.72)}
.rh-chips input:focus-visible + span{outline:3px solid var(--geel);outline-offset:2px}
.rh-noot{margin:0;font-size:13.5px;line-height:1.55;color:var(--grijs)}
.rh-uit{display:flex;flex-direction:column;gap:14px;padding:34px 36px;background:radial-gradient(70% 50% at 100% 0%,rgba(255,255,255,.7),transparent 70%),linear-gradient(180deg,#FFF5D0,#FCEBAE)}
.rh-lab{margin:0;font-family:var(--font-kop);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--geel-tekst)}
.rh-weken{margin:0;display:flex;align-items:baseline;gap:12px;font-family:var(--font-kop);font-weight:900;font-size:26px}
.rh-weken b{font-size:96px;line-height:.9;letter-spacing:-.05em}
.rh-balk{height:10px;border-radius:99px;background:rgba(18,18,18,.12);overflow:hidden}
.rh-balk i{display:block;height:100%;width:50%;border-radius:inherit;background:var(--zwart);transition:width .5s ease}
.rh-schaal{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--geel-tekst)}
.rh-pakket{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 14px 30px -20px rgba(90,70,0,.55)}
.rh-pakket b{display:block;font-family:var(--font-kop);font-weight:900;font-size:18px}
.rh-pakket small{font-size:13px;color:var(--grijs)}
.rh-bedrag{font-family:var(--font-kop);font-weight:900;font-size:28px;letter-spacing:-.02em;white-space:nowrap}
.rh-regels{margin:0;display:grid}
.rh-regels div{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid rgba(94,74,0,.14);font-size:15px}
.rh-regels dt{color:var(--geel-tekst)}
.rh-regels dd{margin:0;font-weight:800}
.rh-knop{margin-top:auto}

/* pakketten — vier rijke kaarten, schakel/automaat */
.pk-sec{background:radial-gradient(50% 36% at 50% 0%,rgba(229,191,44,.16),transparent 72%),#fff}
.pk-wissel{display:flex;gap:4px;width:max-content;margin:28px auto 0;padding:5px;border:0;border-radius:999px;background:var(--lucht)}
.pk-wissel-lab{position:absolute;left:-9999px}
.pk-wissel label{position:relative}
.pk-wissel input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pk-wissel span{display:block;padding:11px 28px;border-radius:999px;font-family:var(--font-kop);font-weight:900;font-size:15px;color:#4E4836}
.pk-wissel input:checked + span{background:var(--zwart);color:#fff}
.pk-wissel input:focus-visible + span{outline:3px solid var(--geel);outline-offset:2px}
.pk-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;align-items:stretch}
.pk-kaart{position:relative;display:flex;flex-direction:column;padding:26px 24px 24px;background:#fff;border:1px solid #ECE3C6;border-radius:22px;box-shadow:0 24px 46px -34px rgba(70,52,0,.5)}
.pk-naam{margin:0;font-size:24px}
.pk-sub{margin:2px 0 16px;font-size:14px;color:var(--grijs)}
.pk-prijs{display:flex;flex-direction:column}
.pk-prijs s{font-size:14px;color:#8A8470}
.pk-prijs b{font-family:var(--font-kop);font-weight:900;font-size:40px;line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.pk-chip{align-self:flex-start;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--geel-zacht);color:var(--geel-tekst);font-size:12.5px;font-weight:800}
.pk-termijn{margin:10px 0 16px;font-size:13.5px;color:var(--grijs)}
.pk-lijst{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid #EFE8D2;display:grid;gap:8px;font-size:14.5px}
.pk-lijst li{position:relative;padding-left:24px}
.pk-lijst li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:6px;border-left:2.5px solid #B08A00;border-bottom:2.5px solid #B08A00;transform:rotate(-45deg)}
.pk-kaart .knop{margin-top:auto}
.pk-uit{background:radial-gradient(90% 50% at 100% 0%,rgba(229,191,44,.3),transparent 70%),var(--zwart);color:#fff;border-color:var(--zwart);transform:translateY(-10px);box-shadow:0 36px 64px -32px rgba(0,0,0,.7)}
.pk-uit .pk-sub,.pk-uit .pk-termijn{color:rgba(255,255,255,.72)}
.pk-uit .pk-prijs s{color:rgba(255,255,255,.55)}
.pk-uit .pk-prijs b{color:var(--geel)}
.pk-uit .pk-chip{background:rgba(229,191,44,.18);color:var(--geel-licht)}
.pk-uit .pk-lijst{border-color:rgba(255,255,255,.14)}
.pk-uit .pk-lijst li::before{border-color:var(--geel)}
.pk-badge{position:absolute;top:-13px;right:20px;padding:6px 12px;border-radius:999px;background:var(--geel);color:var(--zwart);font-family:var(--font-kop);font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pk-noot{max-width:720px;margin:26px auto 0;font-size:13.5px;color:var(--grijs)}
.pk-meer{max-width:1000px;margin:20px auto 0;background:#FFFCF2;border:1px solid #ECE3C6;border-radius:18px}
.pk-meer summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer}
.pk-meer summary::-webkit-details-marker{display:none}
.pk-meer summary span{font-family:var(--font-kop);font-weight:900;font-size:18px}
.pk-meer summary small{display:block;font-family:var(--font);font-weight:600;font-size:13.5px;color:var(--grijs)}
.pk-meer summary i,.fq summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #E6D69E}
.pk-meer summary i::before,.pk-meer summary i::after,.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:1px;background:var(--zwart);transform:translate(-50%,-50%)}
.pk-meer summary i::after,.fq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s}
.pk-meer[open] summary i::after,.fq[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.pk-tabel{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;padding:2px 22px 18px}
.pk-tabel div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #F0E8D0;font-size:14.5px}
.pk-tabel b{white-space:nowrap}

/* theoriedag — de dag zelf is het gebouwde element */
.td-sec{background:radial-gradient(55% 60% at 100% 100%,rgba(229,191,44,.26),transparent 70%),linear-gradient(180deg,#F6EDCF,#F2E7C4)}
.td-raster{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,68px);align-items:stretch}
.td-sec .lead{color:#4A4430}
.td-dag{list-style:none;margin:24px 0 0;padding:0;display:grid}
.td-dag li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(94,74,0,.16)}
.td-dag time{font-family:var(--font-kop);font-weight:900;font-size:21px;letter-spacing:-.02em}
.td-dag li:nth-child(3) time{font-size:15px;color:var(--geel-tekst)}
.td-dag b{display:block;font-family:var(--font-kop);font-weight:900;font-size:17px}
.td-dag span{font-size:15px;color:#5B5440}
.td-examen{margin-top:22px;padding:20px 24px;border-radius:20px;background:var(--zwart);color:#fff;box-shadow:0 28px 50px -30px rgba(0,0,0,.6)}
.td-examen-kop{margin:0 0 12px;font-weight:800;font-size:15px;color:var(--geel)}
.td-examen-noot{margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.7)}
.td-doen{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.td-doen p{margin:0;font-size:14.5px;color:#5B5440}
.td-doen p b{color:var(--inkt)}
.td-foto{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 34px 64px -34px rgba(60,45,0,.55)}
.td-foto picture,.td-foto img{position:absolute;inset:0;width:100%;height:100%}
.td-foto img{object-fit:cover;object-position:50% 50%}
.td-foto figcaption{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(18,18,18,.84);color:#fff;font-size:13px;font-weight:700}

/* reviews — donker, vier gelijke kaarten, fotokolom, naamchips */
.rv-sec{background:radial-gradient(50% 60% at 0% 0%,rgba(229,191,44,.2),transparent 65%),radial-gradient(40% 50% at 100% 100%,rgba(229,191,44,.08),transparent 70%),#101010;color:#fff}
.rv-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.rv-kop h2{margin-bottom:.2em}
.rv-badge{display:flex;align-items:center;gap:14px;flex:none;padding:14px 20px;border-radius:18px;background:#1C1C1C;border:1px solid rgba(255,255,255,.1)}
.rv-badge b{font-family:var(--font-kop);font-weight:900;font-size:46px;line-height:1}
.rv-sterren{display:block}
.rv-sterren svg{display:block;width:112px;height:21px}
.rv-badge small{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.72)}
.rv-raster{display:grid;grid-template-columns:1fr 1fr .74fr;gap:18px;margin-top:42px}
.rv{display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:22px;background:#1A1A1A;border:1px solid rgba(255,255,255,.08)}
.rv blockquote{flex:1;margin:0;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.88)}
.rv blockquote::before{content:"\201C";display:block;height:30px;margin-bottom:6px;font-family:var(--font-kop);font-weight:900;font-size:58px;line-height:.9;color:var(--geel)}
.rv figcaption{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.rv figcaption i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--geel);color:var(--zwart);font-style:normal;font-family:var(--font-kop);font-weight:900}
.rv figcaption span{font-weight:800;font-size:15px}
.rv figcaption small{display:block;font-weight:600;font-size:12.5px;color:rgba(255,255,255,.62)}
.rv-accent{background:linear-gradient(160deg,#F0CD45,#E2B925);border-color:transparent}
.rv-accent blockquote,.rv-accent figcaption span{color:var(--zwart)}
.rv-accent blockquote::before{color:var(--zwart)}
.rv-accent figcaption{border-color:rgba(0,0,0,.14)}
.rv-accent figcaption i{background:var(--zwart);color:var(--geel)}
.rv-accent figcaption small{color:rgba(0,0,0,.66)}
.rv-fotos{grid-column:3;grid-row:1 / span 2;display:grid;grid-template-rows:1fr 1fr;gap:18px}
.rv-fotos figure{position:relative;border-radius:22px;overflow:hidden;min-height:220px}
.rv-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.rv-fotos figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(18,18,18,.84);color:#fff;font-size:12.5px;font-weight:700}
.rv-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0}
.rv-chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 9px 7px 15px;border-radius:999px;background:#1C1C1C;border:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:700}
.rv-chips b{padding:1px 8px;border-radius:7px;background:var(--geel);color:var(--zwart);font-size:12px}
.rv-chips b::before{content:"\2605\00a0"}

/* volg — vier kanaalkaarten in volgorde van grootte */
.vg-sec{background:radial-gradient(70% 80% at 50% 115%,rgba(229,191,44,.34),transparent 62%),linear-gradient(180deg,#28241B,#1C1A15);color:#fff}
.vg-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:42px}
.vg-kaart{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:22px;background:#fff;color:var(--inkt);box-shadow:0 34px 64px -38px rgba(0,0,0,.85)}
.vg-kop{display:flex;align-items:center;gap:12px}
.vg-kop h3{margin:0;font-size:20px}
.vg-kop small{display:block;font-size:13px;color:var(--grijs);overflow-wrap:anywhere}
.vg-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:#fff}
.vg-ico svg{width:24px;height:24px}
.vg-fb{background:#1877F2}
.vg-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.vg-tt{background:#111}
.vg-yt{background:#FFE9E9;color:#FF0000}
.vg-tal{margin:0;font-size:14px;color:var(--grijs)}
.vg-tal b{margin-right:4px;font-family:var(--font-kop);font-weight:900;font-size:22px;color:var(--inkt)}
.vg-zin{margin:0;font-size:14.5px;line-height:1.5;color:#3C392F}
.vg-moz{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vg-moz img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;border-radius:11px}
.vg-moz-staand img{object-position:50% 0%}
.vg-kaart .knop{margin-top:auto;min-height:46px}

/* vragen — twee kolommen getinte rijen, L-vormen aan de rand */
.fq-sec{background:radial-gradient(40% 50% at 0% 40%,rgba(229,191,44,.12),transparent 70%),#fff}
.fq-l{position:absolute;z-index:-1;width:230px;height:270px;border-left:58px solid #FBF0C9;border-bottom:58px solid #FBF0C9;border-radius:8px}
.fq-l-1{left:-70px;top:70px}
.fq-l-2{right:-60px;bottom:50px;transform:rotate(180deg)}
.fq-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;max-width:1040px;margin:42px auto 0;align-items:start}
.fq{background:#FBF6E3;border:1px solid #F0E5BF;border-radius:15px}
.fq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 20px;font-family:var(--font-kop);font-weight:900;font-size:16.5px;line-height:1.3;cursor:pointer}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{width:28px;height:28px}
.fq p{margin:0;padding:0 20px 18px;font-size:15.5px;color:var(--grijs)}

/* contact — tekstblok naast een compacte contactkaart met foto */
.ct-sec{background:radial-gradient(45% 70% at 100% 30%,rgba(229,191,44,.4),transparent 70%),linear-gradient(180deg,#FFF5CF,#FDEEB9)}
.ct-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,64px);align-items:center}
.ct-sec .kicker{color:var(--zwart)}
.ct-sec .kicker::before{background:var(--zwart)}
.ct-zin{max-width:520px;margin:0;font-size:17.5px;color:#4A4127}
.ct-doen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ct-kaart{display:grid;grid-template-columns:minmax(0,1fr) 262px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 34px 64px -36px rgba(90,70,0,.6)}
.ct-gegevens{padding:28px 26px}
.ct-naam{margin:0 0 16px;font-family:var(--font-kop);font-weight:900;font-size:19px}
.ct-gegevens ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.ct-gegevens li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.4}
.ct-gegevens svg{width:20px;height:20px;flex:none;margin-top:1px;color:#A88300}
.ct-gegevens a{font-weight:700;text-decoration:none}
.ct-gegevens a:hover{text-decoration:underline}
.ct-foto{position:relative;min-height:300px}
.ct-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.ct-foto figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(18,18,18,.84);color:#fff;font-size:12.5px;font-weight:700}

/* voettekst */
.ft{padding:64px 0 28px;background:#0E0E0F;color:rgba(255,255,255,.74);font-size:14.5px}
.ft-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ft-merk p{max-width:340px;margin:16px 0 0}
.ft-kop{margin:0 0 14px;font-family:var(--font-kop);font-weight:900;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft a{text-decoration:none}
.ft a:hover{color:var(--geel)}
.ft-onder{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.55)}

/* bijpagina's (app-me, 404) */
.mini{background:radial-gradient(50% 60% at 50% 0%,rgba(229,191,44,.24),transparent 66%),#111;color:#fff;min-height:calc(100svh - var(--kop));display:flex;align-items:center}
.mini-raam{max-width:700px;text-align:center}
.mini .kicker{color:var(--geel);justify-content:center}
.mini h1{margin:0 0 .3em;font-family:var(--font-kop);font-weight:900;font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.04em}
.mini h1 em{font-style:normal;color:var(--geel)}
.mini-zin{margin:0 auto;max-width:560px;font-size:18px;color:rgba(255,255,255,.78)}
.mini-lijst{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:6px;color:rgba(255,255,255,.72)}
.mini-doen{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.mini .knop-rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* tussenbreedtes */
@media (max-width:1179px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(18px,4vw,48px) 20px;background:#0E0E0F;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 30px 40px -24px rgba(0,0,0,.8)}
  .nav.open{display:flex}
  .nav a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:16.5px}
  .nav .nav-kn{display:block;margin-top:14px;padding:14px 18px;border:0;border-radius:12px;background:var(--geel);color:var(--zwart);text-align:center;font-family:var(--font-kop);font-weight:900}
  .bar-rechts{margin-left:auto}
  .burger{display:grid;place-items:center}
  .pk-rij{grid-template-columns:repeat(2,1fr)}
  .pk-uit{transform:none}
  .vg-rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-raster{grid-template-columns:1fr 1fr}
  .rv-fotos{grid-column:1 / -1;grid-row:auto;grid-template-rows:none;grid-template-columns:1fr 1fr}
  .rv-fotos figure{min-height:0;aspect-ratio:1}
}
@media (max-width:1100px){
  .ct-raster{grid-template-columns:1fr}
  .ct-tekst{text-align:center}
  .ct-zin{margin-inline:auto}
  .ct-doen{justify-content:center}
  .ct-kaart{max-width:640px;width:100%;margin-inline:auto}
}
@media (max-width:899px){
  .lint-los{display:none}
  .ww-raster{grid-template-columns:1fr}
  .ww-links{text-align:center}
  .ww-links .lead{margin-inline:auto}
  .ww-kaart{max-width:560px;margin-inline:auto;text-align:left}
  .rh{grid-template-columns:1fr}
  .td-raster{grid-template-columns:1fr}
  .td-tekst > .kicker,.td-tekst > h2,.td-tekst > .lead{text-align:center}
  .td-tekst > .kicker{display:flex;justify-content:center}
  .td-tekst > .lead{margin-inline:auto}
  .td-foto picture,.td-foto img{position:static;height:auto}
  .rv-kop{flex-direction:column;align-items:center;text-align:center}
  .rv-chips{justify-content:center}
  .fq-rij{grid-template-columns:1fr}
  .ft-raster{grid-template-columns:1fr 1fr}
  .ft-merk{grid-column:1 / -1}
}
@media (max-width:760px){
  .ww-halte{grid-template-columns:44px 92px minmax(0,1fr);column-gap:12px}
  .ww-route::before{left:19px}
  .ww-nr{width:44px;height:44px;font-size:19px;box-shadow:0 0 0 5px #E6BE30}
  .ww-foto{margin:10px 0}
  .ww-tekst{padding:12px 14px 12px 0}
  .ww-tekst h3{font-size:18px}
  .ww-tekst p{font-size:14px}
  .ww-label{display:none}
  .pk-tabel{grid-template-columns:1fr}
}

/* telefoon */
@media (max-width:560px){
  .lint-in > span:first-child{display:none}
  .lint-in{justify-content:center}
  .lint-wa{margin-left:0}
  .bar-kn{display:none}
  .logo-naam{font-size:18px}
  .sec{padding:56px 0}
  .lead{font-size:16.5px}
  .ww-sec::before{inset:10px;border-radius:20px}
  .ww-kaart{padding:22px 20px}
  .ww-kaart .knop{width:100%}
  .rh{margin-top:32px;border-radius:22px}
  .rh-kies,.rh-uit{padding:24px 18px}
  .rh-chips{gap:7px}
  .rh-chips span{padding:10px 2px;font-size:19px}
  .rh-chips small{font-size:10.5px}
  .rh-weken b{font-size:76px}
  .rh-bedrag{font-size:24px}
  .pk-wissel span{padding:10px 22px}
  .pk-rij{gap:10px;margin-top:28px}
  .pk-kaart{padding:18px 14px 16px;border-radius:18px}
  .pk-naam{font-size:19px}
  .pk-sub,.pk-lijst,.pk-termijn{display:none}
  .pk-prijs b{font-size:25px}
  .pk-chip{font-size:11px;padding:3px 8px;margin-bottom:14px}
  .pk-badge{right:10px;font-size:10.5px;padding:5px 9px}
  .pk-kaart .knop{min-height:44px;padding:10px 8px;font-size:14px}
  .td-dag li{grid-template-columns:84px minmax(0,1fr);gap:10px}
  .td-dag time{font-size:18px}
  .td-doen{justify-content:center;text-align:center}
  .rv-raster{grid-template-columns:1fr;margin-top:30px}
  .rv:nth-of-type(n+3){display:none}
  .rv-fotos{grid-column:auto}
  .vg-rij{grid-template-columns:1fr;gap:14px;margin-top:30px}
  .vg-zin{display:none}
  .vg-moz{grid-template-columns:repeat(4,1fr);gap:6px}
  .fq-extra{display:none}
  .fq summary{font-size:15.5px;padding:14px 16px}
  .fq-l{display:none}
  .ct-kaart{grid-template-columns:minmax(0,1fr) 40%}
  .ct-gegevens{padding:20px 16px}
  .ct-gegevens li{font-size:14px;gap:9px}
  .ct-doen .knop{flex:1 1 100%}
  .ft-raster{grid-template-columns:1fr}
}
/* telefoon: hoogtebudget (snoeien in inhoud, niet in ruimte) */
@media (max-width:560px){
  .ww-kaart{background:none;box-shadow:none;padding:0;margin-top:22px}
  .ww-kaart-kop,.ww-kaart .vinklijst{display:none}
  .ww-kaart .knop{margin-top:0}
  .rh-noot{display:none}
  .td-foto{display:none}
  .rv-chips{display:none}
  .vg-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vg-kaart{padding:14px;gap:9px;border-radius:18px}
  .vg-kop{flex-direction:column;align-items:flex-start;gap:8px}
  .vg-kop small{display:none}
  .vg-ico{width:36px;height:36px;border-radius:10px}
  .vg-ico svg{width:20px;height:20px}
  .vg-kop h3{font-size:18px}
  .vg-tal b{font-size:19px}
  .vg-moz{grid-template-columns:1fr 1fr;gap:5px}
  .vg-moz img{border-radius:8px}
  .vg-kaart .knop{min-height:42px;padding:9px 6px;font-size:13px}
  .ct-kaart{grid-template-columns:1fr}
  .ct-foto{display:none}
  .ft-raster{grid-template-columns:1fr 1fr;gap:28px 20px}
  .ft{padding-top:48px}
}
@media (max-width:560px){
  .sec{padding:48px 0}
  .rh-regels div:last-child{display:none}
  .ft-merk p,.ft-raster > div:nth-child(2){display:none}
}
/* herstel na de eerste goedkope ronde */
.pf-form{margin:0}
.seg-3 label{min-width:0}
@media (min-width:1180px) and (max-width:1399px) and (max-height:799px){.hero h1{font-size:max(3.3em,58px)}}
.hero.ho-1 .h-vlak h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--l)}
.pk-prijs s{color:#6B6553}
.knop-wa{background:#0E7A3F}
.knop-wa:hover{background:#0B6A36}
.td-examen-zin{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
.td-examen-zin b{color:var(--geel)}
.td-meter{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;margin-top:14px}
.td-meter i{height:12px;border-radius:3px;background:var(--geel)}
.td-meter i.mis{background:rgba(255,255,255,.18)}
.ct-raster{align-items:stretch}
.ct-tekst{align-self:center}
.ct-gegevens{padding:34px 28px}
.ct-gegevens ul{gap:18px}
.ct-naam{margin-bottom:20px}
.pk-wissel{position:relative}
.pk-wissel-lab{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){.pk-badge{position:static;align-self:flex-start;margin:0 0 8px}}
/* aanbod — vier gelijke fotokaarten in één rij (herbouw na sectiekeuring ronde 1) */
.ab-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:46px}
.ab-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid #EFE5C3;border-radius:22px;overflow:hidden;box-shadow:0 26px 50px -34px rgba(70,52,0,.55)}
.ab-foto{position:relative;aspect-ratio:5/4}
.ab-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ab-cat{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:var(--geel);color:var(--zwart);font-family:var(--font-kop);font-weight:900;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.ab-tekst{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.ab-tekst h3{margin:0 0 6px;font-size:25px}
.ab-tekst > p{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--grijs)}
.ab-tekst .vinklijst{gap:7px;font-size:14.5px}
.ab-tekst .vinklijst svg{color:#B08A00;width:18px;height:18px}
.ab-prijs{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin:auto 0 0;padding-top:16px;border-top:1px solid #F1E9CF;margin-top:16px}
.ab-prijs small{font-size:13px;color:var(--grijs)}
.ab-prijs b{font-family:var(--font-kop);font-weight:900;font-size:28px;letter-spacing:-.03em}
.ab-prijs span{flex-basis:100%;font-size:13px;color:var(--grijs)}
.ab-kaart .knop{margin-top:16px;min-height:48px;font-size:15px}
@media (max-width:1179px){.ab-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .ab-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:30px}
  .ab-kaart{border-radius:18px}
  .ab-cat{left:8px;bottom:8px;font-size:9.5px;padding:4px 8px}
  .ab-tekst{padding:14px 12px 14px}
  .ab-tekst h3{font-size:19px;margin-bottom:0}
  .ab-tekst > p:not(.ab-prijs),.ab-tekst .vinklijst{display:none}
  .ab-prijs{margin-top:10px;padding-top:10px}
  .ab-prijs b{font-size:21px}
  .ab-prijs span{font-size:11.5px;line-height:1.35}
  .ab-kaart .knop{min-height:42px;padding:8px 6px;font-size:13px;margin-top:10px}
}
/* acties — wisselende band onder de hero (Sean 15-10: "scrolt steeds tussen de acties") */
.ac-sec{position:relative;overflow:hidden;background:radial-gradient(40% 140% at 0% 50%,rgba(255,255,255,.35),transparent 70%),linear-gradient(90deg,#E2B925,#F0CD45 60%,#E5BF2C);color:var(--zwart)}
.ac-raster{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center;min-height:136px;padding:20px 0}
.ac-tabs{display:flex;flex-direction:column;gap:6px;padding-right:30px;border-right:1.5px solid rgba(18,18,18,.18)}
.ac-tab{position:relative;overflow:hidden;padding:8px 16px;border:0;border-radius:999px;background:rgba(18,18,18,.08);color:var(--zwart);font-family:var(--font-kop);font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer}
.ac-tab:hover{background:rgba(18,18,18,.16)}
.ac-tab[aria-selected="true"]{background:var(--zwart);color:var(--geel)}
.ac-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--geel);transform-origin:left;animation:ac-tijd 7s linear forwards}
.ac-sec.stil .ac-tab::after{animation-play-state:paused}
@keyframes ac-tijd{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ac-paneel{display:flex;align-items:center;gap:24px;animation:ac-in .5s ease}
@keyframes ac-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ac-badge{display:grid;place-items:center;flex:none;width:86px;height:86px;border-radius:50%;background:var(--zwart);color:var(--geel);font-family:var(--font-kop);font-weight:900;font-size:24px;letter-spacing:-.03em;white-space:nowrap;box-shadow:0 0 0 6px rgba(18,18,18,.1);transform:rotate(-8deg)}
.ac-tekst{flex:1;min-width:0}
.ac-tekst p{margin:0;font-size:16px;color:#3B3317}
.ac-tekst .ac-titel{margin-bottom:2px;font-family:var(--font-kop);font-weight:900;font-size:27px;line-height:1.15;letter-spacing:-.02em;color:var(--zwart)}
.ac-knop{flex:none}
@media (prefers-reduced-motion:reduce){.ac-tab::after{display:none}.ac-paneel{animation:none}}
@media (max-width:899px){
  .ac-raster{grid-template-columns:1fr;gap:0;min-height:0;padding:22px 0}
  .ac-tabs{display:none}
  .ac-paneel{flex-wrap:wrap;gap:14px 16px}
  .ac-badge{width:64px;height:64px;font-size:18px}
  .ac-tekst .ac-titel{font-size:20px}
  .ac-tekst p{font-size:14.5px}
  .ac-knop{width:100%}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .ac-paneel[hidden]{display:flex!important}
  .ac-panelen{display:grid;gap:18px}
}
/* pakketten: vijf kaarten (Dick 15-10: het pakket van 35 lessen hoort erbij) */
.pk-rij{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pk-kaart{padding:24px 18px 20px}
.pk-prijs b{font-size:33px}
.pk-naam{font-size:22px}
@media (max-width:1179px){.pk-rij{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pk-rij{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-uit{grid-column:1 / -1}}
@media (max-width:560px){.pk-prijs b{font-size:25px}.pk-naam{font-size:19px}}
/* telefoon: knop in de werkwijze op het gele vlak zwart; korte knoptekst in de aanbodkaart */
@media (max-width:560px){
  .ww-kaart .knop{background:var(--zwart);color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
  .alleen-breed{display:none}
}
.ac-panelen{display:grid;align-items:center}
/* schil hele site (16-10): menu met uitklap "Rijlessen", voet met vijf kolommen, kop in de aanbodkaart als link */
.nav-groep{position:relative;display:flex;align-items:center}
.nav-hoofd{display:inline-flex;align-items:center;gap:5px}
.nav-hoofd svg{width:15px;height:15px;transition:transform .2s}
.nav-groep:hover .nav-hoofd svg,.nav-groep:focus-within .nav-hoofd svg{transform:rotate(180deg)}
.nav-uit{position:absolute;z-index:60;top:calc(100% + 22px);left:-24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:440px;padding:12px;background:#161616;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 40px 70px -30px rgba(0,0,0,.9);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-uit::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav-groep:hover .nav-uit,.nav-groep:focus-within .nav-uit{opacity:1;visibility:visible;transform:none}
.nav-uit-kop{display:none}
.nav .nav-uit a{display:block;padding:11px 14px;border-radius:12px}
.nav .nav-uit a:hover{background:rgba(229,191,44,.12)}
.nav-uit b{display:block;font-family:var(--font-kop);font-weight:900;font-size:15.5px;color:#fff}
.nav-uit small{display:block;margin-top:1px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.58)}
.nav a[aria-current=page],.nav-hier > .nav-hoofd,.nav .nav-uit a[aria-current=page] b{color:var(--geel)}
.ab-tekst h3 a{color:inherit;text-decoration:none}
.ab-tekst h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ft-raster-5{grid-template-columns:1.35fr 1fr 1fr 1.2fr .8fr;gap:34px}
.ft-onder a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:1179px){
  .nav{max-height:calc(100svh - var(--kop));overflow-y:auto}
  .nav-groep{display:block}
  .nav .nav-hoofd{display:none}
  .nav-uit{position:static;display:block;width:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .nav-uit::before{display:none}
  .nav-uit-kop{display:block;margin:12px 0 0;font-family:var(--font-kop);font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--geel)}
  .nav .nav-uit a{padding:12px 0;border-radius:0}
  .nav .nav-uit a:hover{background:none}
  .nav-uit b{display:inline;font-family:var(--font);font-weight:600;font-size:16.5px;color:rgba(255,255,255,.82)}
  .nav-uit small{display:inline;margin-left:8px;font-size:13px}
  .nav > a{padding:12px 0}
}
@media (max-width:899px){.ft-raster-5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.nav-uit small{display:none}.ft-raster-5 > .ft-info{display:none}}
/* 18-10 Dick: pakket met tussentijdse toets = € 145 extra (alleen schakel; leeg bij automaat) */
.pk-toets{margin:-8px 0 16px;font-size:13px;font-weight:700;color:var(--geel-tekst)}
.pk-toets:empty{display:none}
.pk-uit .pk-toets{color:var(--geel-licht)}
@media (max-width:560px){.pk-toets{margin:0 0 12px;font-size:11.5px;line-height:1.3}}
/* ── hero 18-10 (Dick: "voorpagina te druk", liever de blauwe Audi): geen bewegende fotomuur meer maar Seans honingraatbeeld.
   Laptop: het beeld staat rechts in de hero (vak = herohoogte × 1,7765, rechts verankerd, nooit verticaal bijgesneden), links
   zuiver zwart zoals de linkerrand van het beeld; tekst en kaart links. Tablet/telefoon: tekst, beeld, kaart.
   Beelden: research/hero/honingraat/export.py (staand beeld zonder de lege zwarte bovenkant). ── */
.hero.hero-audi,.hero.hero-audi .h-vlak{background:#000}
.hero.hero-audi .h-vlak::before,.hero.hero-audi .h-vlak::after{display:none}
.hero-audi .h-foto{display:block;margin:0}
.hero-audi .h-foto img{display:block}
@media (min-width:1180px){
  /* Het beeldvak (Sean 18-10, drie rondes: geen groot gat in het midden, wel wat ruimte, en links geen groot zwart vlak).
     --basis = herohoogte × 1,7765: het hele beeld, niets bijgesneden. Is het scherm breder, dan groeit het vak tot het de
     auto ver genoeg naar links brengt (tekst op 5vw, gat --gat), hooguit 1,15× (onderaan valt dan ≤ 13 % vloer weg, dakbord
     en wielen blijven). Nooit breder dan de hero; op smalle, hoge schermen wordt het beeld dus lager en loopt de vloer weg in
     het zwart. De auto begint op 100% − 0,475 × vak; de tekstkolom eindigt --gat daarvoor, maar nooit dichter dan 5vw bij de rand. */
  .hero-audi{--hh:max(480px,100svh - var(--lint) - var(--kop));--basis:calc(var(--hh) * 1.7765);--kol:clamp(300px,50vw - 130px,600px);
    --gat:clamp(140px,10vw,220px);--nodig:calc((100% - 5vw - var(--kol) - var(--gat)) / .475);
    --vak:min(100%,clamp(var(--basis),var(--nodig),calc(var(--basis) * 1.15)));
    --links:max(5vw,calc(100% - var(--vak) * .475 - var(--gat) - var(--kol)))}
  .hero-audi .h-inhoud{padding-left:var(--links)}
  .hero-audi .h-inhoud{position:static;z-index:auto} /* flex-item: anders houdt z-index:3 uit hero.css een eigen laag en ligt het beeld boven de gloed */
  .hero-audi .h-inhoud > :not(.h-foto){position:relative;z-index:3}
  .hero-audi .h-inhoud > .h-foto{position:absolute;z-index:0;top:0;right:0;max-width:none;width:var(--vak);height:auto;aspect-ratio:2400/1351;max-height:100%} /* hoogte uit de breedte; % in height rekent tegen de hoogte */
  .hero-audi .h-foto img{width:100%;height:100%;object-fit:cover;object-position:100% 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.15) 4%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.85) 12%,#000 16%),linear-gradient(180deg,#000 86%,rgba(0,0,0,.85) 90%,rgba(0,0,0,.5) 94%,rgba(0,0,0,.15) 97%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.15) 4%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.85) 12%,#000 16%),linear-gradient(180deg,#000 86%,rgba(0,0,0,.85) 90%,rgba(0,0,0,.5) 94%,rgba(0,0,0,.15) 97%,transparent 100%);mask-composite:intersect}
  .hero-audi{--gA:calc(var(--links) + var(--kol) - 140px);--gC:calc(100% - var(--vak) * .475 + 60px)}
  /* rust achter de tekst: zeshoeken gedempt tot 28 % (nooit minder: naad-check BEREIK), vloeiend (smoothstep, 9 stappen) naar vol licht net over de auto */
  .hero.hero-audi .h-gloed{display:block;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,0.72) 0,rgba(0,0,0,0.72) var(--gA),rgba(0,0,0,0.689) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.125),rgba(0,0,0,0.607) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.25),rgba(0,0,0,0.492) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.375),rgba(0,0,0,0.36) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.5),rgba(0,0,0,0.228) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.625),rgba(0,0,0,0.112) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.75),rgba(0,0,0,0.031) calc(var(--gA) + (var(--gC) - var(--gA)) * 0.875),rgba(0,0,0,0) var(--gC))}
}
@media (max-width:1179px){
  .hero-audi .h-vlak{padding-bottom:36px}
  .hero-audi .h-inhoud > .h-foto{position:relative;z-index:0;max-width:none;margin:4px calc(-1 * clamp(16px,4vw,40px)) 0}
  .hero-audi .h-foto img{width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 92%,transparent 100%)}
  .hero-audi .h-foto + .h-kaart{position:relative;z-index:2;margin-top:-14px}
  .hero.hero-audi h1{margin-inline:auto}
}
@media (max-width:1179px) and (orientation:portrait){
  .hero-audi .h-foto img{aspect-ratio:17/20;object-fit:cover;object-position:50% 83%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%)}
  .hero-audi .h-foto + .h-kaart{margin-top:-30px}
}
/* ── hero 19-10 set 3 (Sean: "hier is de heroafb zo kan je het doen op alle formaten … zet de titel en form niet zo ver van de
   wand"). Vanaf 1180 px één beeld: Seans brede honingraat (3:1, links zuiver zwart, auto rechts). Het beeld staat rechtsboven
   tegen de bovenrand van de hero, dus de wand loopt achter de kopbalk door. De tekst eindigt --h3gat over het begin van de wand
   (40 % van de beeldbreedte) en de auto (vanaf 63,5 %) blijft heel en vrij. Het beeld is zo groot als past: hooguit de
   herohoogte. Rechts mag de auto eraf (Sean 19-10: "snij af na het Audi-logo … dan kun je vergroten"), in deze volgorde:
   tot 88 % zichtbaar (kenteken en dakbord eindigen op 0,87 en blijven heel) met de tekst 110 px over de wand; dan de tekst
   verder over de wand tot 200 px (--h3gat); dan bijsnijden tot 84,5 % (net na het logo, dat eindigt op 0,84). Pas daarna
   (alleen hoge 16:10-vensters) blijft onder de vloer een zwarte strook. Niet verticaal centreren: dan krijgt de wand een zichtbare bovenrand, en een verloop dat
   die wegwerkt dimt het dakbord (naad-check, 19-10 nagemeten).
   Breedte van de tekst --tw = de echte titel (8,52 × de lettergrootte, per hoogtestap zoals hero.css die zet) of de kaart
   (--kol), wat breder is. Let op: geen --d gebruiken, dat is in deze site een kleur. ── */
@media (min-width:1180px){
  .hero-audi{--beeld:breed3;--h1w:494px;--tw:max(var(--kol),var(--h1w));
    --h3gat:clamp(110px,calc(var(--hh) * 1.44 - 100% + 5vw + var(--tw)),200px);
    --vak:min(calc(var(--hh) * 2.9985),calc((100% - 5vw - var(--tw) + 200px) / .445));
    --L:max(calc(5vw + var(--tw) - var(--h3gat) - var(--vak) * .4),calc(100% - var(--vak)));
    --links:calc(var(--L) + var(--vak) * .4 + var(--h3gat) - var(--tw));
    --gA:calc(var(--links) + var(--tw) - 160px);--gC:calc(var(--L) + var(--vak) * .635 - 40px)}
  .hero-audi .h-inhoud > .h-foto{top:0;bottom:auto;left:var(--L);right:auto;width:var(--vak);aspect-ratio:8000/2668;max-height:none}
  .hero-audi .h-foto img{object-fit:cover;object-position:100% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%),linear-gradient(180deg,transparent 0.0%,rgba(0,0,0,0.10) 1.6%,rgba(0,0,0,0.35) 3.2%,rgba(0,0,0,0.65) 4.8%,rgba(0,0,0,0.90) 6.4%,#000 8.0%,#000 100%),linear-gradient(180deg,#000 0,#000 66.0%,rgba(0,0,0,0.98) 68.8%,rgba(0,0,0,0.93) 71.7%,rgba(0,0,0,0.85) 74.5%,rgba(0,0,0,0.75) 77.3%,rgba(0,0,0,0.63) 80.2%,rgba(0,0,0,0.50) 83.0%,rgba(0,0,0,0.37) 85.8%,rgba(0,0,0,0.25) 88.7%,rgba(0,0,0,0.15) 91.5%,rgba(0,0,0,0.07) 94.3%,rgba(0,0,0,0.02) 97.2%,transparent 100.0%);-webkit-mask-composite:source-in,source-in,source-over;mask-image:linear-gradient(90deg,transparent 0,#000 7%),linear-gradient(180deg,transparent 0.0%,rgba(0,0,0,0.10) 1.6%,rgba(0,0,0,0.35) 3.2%,rgba(0,0,0,0.65) 4.8%,rgba(0,0,0,0.90) 6.4%,#000 8.0%,#000 100%),linear-gradient(180deg,#000 0,#000 66.0%,rgba(0,0,0,0.98) 68.8%,rgba(0,0,0,0.93) 71.7%,rgba(0,0,0,0.85) 74.5%,rgba(0,0,0,0.75) 77.3%,rgba(0,0,0,0.63) 80.2%,rgba(0,0,0,0.50) 83.0%,rgba(0,0,0,0.37) 85.8%,rgba(0,0,0,0.25) 88.7%,rgba(0,0,0,0.15) 91.5%,rgba(0,0,0,0.07) 94.3%,rgba(0,0,0,0.02) 97.2%,transparent 100.0%);mask-composite:intersect,intersect,add}
}
@media (min-width:1180px) and (min-height:800px){.hero-audi{--h1w:477px}}
@media (min-width:1400px) and (max-height:799px){.hero-audi{--h1w:545px}}
@media (min-width:1400px) and (max-height:700px){.hero-audi{--h1w:494px}}
@media (min-width:1400px) and (min-height:800px){.hero-audi{--h1w:614px}}
/* telefoon: Seans staande beeld (853×1844, 0,46) heeft een donkere bovenkant voor de tekst; de honingraat begint op 40,5 %,
   dakbord op 52 %, auto tot 84 %. Het beeld staat onder de tekst en schuift 40,5 % van zijn eigen hoogte min --tgat omhoog,
   zodat de honingraat op elke telefoonbreedte --tgat onder de tekst begint (18-10: Sean zag op ~445 breed een groot leeg gat,
   de tekst blijft even hoog terwijl het beeld met de breedte meegroeit). Op brede telefoons valt de bovenkant van het beeld
   boven de hero weg (overflow hidden, daar is het zwart). De kaart komt eronder en ligt alleen over de uitlopende vloer
   (vanaf 90 %, de auto eindigt op 84 %). Een zachte donkere sluier bovenin houdt lange tekst leesbaar. */
@media (max-width: 560px) and (orientation: portrait){
  .hero-audi{--beeld:tel;--tgat:6px}
  .hero-audi .h-vlak{padding-top:0}
  .hero-audi .h-inhoud{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(6,auto)}
  .hero-audi .h-inhoud > *{grid-column:1}
  .hero-audi .h-kicker{grid-row:1;margin-top:34px}
  .hero.hero-audi h1{grid-row:2}
  .hero-audi .h-zin{grid-row:3}
  .hero-audi .h-inhoud > :not(.h-foto){position:relative;z-index:2}
  .hero-audi .h-inhoud > .h-foto{grid-row:4;align-self:start;margin:calc(var(--tgat) - .405 * (100% + 2 * clamp(16px,4vw,40px)) / .4626) calc(-1 * clamp(16px,4vw,40px)) 0}
  .hero-audi .h-foto img{width:100%;height:auto;aspect-ratio:1440/3113;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.55) 22%,rgba(0,0,0,.8) 32%,#000 40%,#000 86%,rgba(0,0,0,.6) 92%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.55) 22%,rgba(0,0,0,.8) 32%,#000 40%,#000 86%,rgba(0,0,0,.6) 92%,transparent 100%)}
  .hero-audi .h-foto + .h-kaart{grid-row:5;width:100%;margin-top:calc(-.1 * 100vw / .4626)}
  .hero-audi .h-bewijs{grid-row:6;width:100%}
}
/* kop 18-10 "De kortste weg / naar jouw rijbewijs.": Sean wil hem altijd op twee regels. De breuk staat vast in de html (<br>),
   de regels zelf breken nooit. Langste regel = 8,53 em, dus op laptops mag de kop iets breder dan het formulier (8,8 em)
   en op smalle telefoons krimpt de letter tot die regel tussen de randen past. */
.hero.hero-audi h1{white-space:nowrap}
@media (min-width:1180px){.hero.hero-audi h1{max-width:none;width:max(var(--kol),8.8em)}}
@media (max-width:1179px){.hero.hero-audi h1{font-size:min(clamp(34px,11vw,52px),calc((100vw - 2 * clamp(16px,4vw,40px)) / 8.75))}}

/* ── 20-10 compositieronde (Sean: "zitten er 0 fouten in de compositie") ──
   /app-me: de vinkjes in de lijst hadden geen maat meer sinds de herbouw van 15-10 (werden 700 px groot). */
.mini-lijst{justify-content:center}
.mini-lijst li{display:flex;align-items:flex-start;gap:10px;text-align:left}
.nw{white-space:nowrap}
.mini-lijst svg{width:20px;height:20px;color:var(--geel);flex:none;margin-top:3px}
/* voet: het WhatsApp-nummer breekt nooit midden in het nummer af */
.ft-nr{white-space:nowrap}
/* telefoon, voorpagina: ≤ 11.000 px (Seans regel "snoeien in inhoud, niet in ruimte": mozaïek één rij, kaartteksten weg);
   geslaagdenfoto's naast de reviews weg (de volg-sectie eronder toont ze al), de actietabs op één regel */
@media (max-width:560px){
  .vg-moz img:nth-child(n+3){display:none}
  .rv-fotos{display:none}
  .rh-schaal{display:none}
  .td-meter,.td-examen-noot{display:none}
  .ab-prijs span{display:none}
  #actie .actie-band__tabs{gap:6px}
  #actie .actie-band__tabs .actie-tab{padding:6px 11px;font-size:11.5px}
}
@media (max-width:380px){#actie .actie-band__tabs{gap:4px}#actie .actie-band__tabs .actie-tab{padding:6px 8px;font-size:11px}#actie .actie-band__geldig{font-size:12px}}

/* ── 20-10 telefoonkeuring (Sean: "doe even grondige telefoon keuring dat hij perfect is") ── */
/* iOS zoomt in op een invoerveld onder 16 px */
.hero .h-veld input{font-size:16px}
/* de pagina achter het open telefoonmenu staat stil (app.js zet html.menu-open) */
@media (max-width:1179px){html.menu-open{overflow:hidden}.nav{overscroll-behavior:contain}}
@media (max-width:560px){.ab-cat{font-size:10.5px;letter-spacing:.06em}}
/* kleinste telefoons (320): bedragen en knoppen binnen de kaart, stappen zonder foto zodat de tekst ruimte heeft */
@media (max-width:374px){
  .pk-prijs b{font-size:20px}
  .pk-kaart .knop{font-size:13px;padding:10px 4px}
  .ww-halte{grid-template-columns:44px minmax(0,1fr)}
  .ww-halte::before{grid-column:2/3}
  .ww-foto{display:none}
  .ww-tekst{grid-column:2;padding:12px 14px 12px 6px}
}