/* Rijschool Rob — BLAUWE EINDVERSIE (site, rob), 21-08.
   Zelfde ontwerp als de rode variant; Joyce koos dit ontwerp en wilde blauw.
   Het blauw is gemeten op hun eigen lesauto: het bord op het dak (#3566A7) en
   het logo Rijopleiding in Stappen op de deur (#1276D8). Rood blijft de
   actiekleur — de proefles-knop en het Populair-lint — en de auto is zelf rood.
   (Oorspronkelijk commentaar van de rode variant hieronder.)

   Rijschool Rob — RODE VARIANT (site-b, rob2), 21-08.
   Tweelingversie van de blauwe: zelfde inhoud en feiten, ander gezicht. Hier is ROOD
   de grond — sinds augustus zijn beide lesauto's rood — en blijft het blauw alleen
   waar het echt zit: in het L-bord op het dak en in de RIS-chip.
   Hero: de nieuwe automaat rechts in eigen kleuren, het rode paneel links eronder.
   (Origineel v3-commentaar hieronder.)

   Rijschool Rob — v3, 17-08.
   v1 (wit/rood, dun): "niet heel goed" naast hun inhoudelijk sterke site.
   v2 (Fraunces-serif op ivoor, warm editorial): Sean — "10 keer slechter dan de oude
   versie, ziet er mega goedkoop uit". Les: de serif-editorial-taal leest hier als
   oubollig; Seans "professioneel" is de strakke moderne taal die bij de vorige
   herbouw won (grotesk, gradients, glas-diepte, systemen).

   v3 = LICHT, TECHNISCH STRAK, IN HUN LOGO-BLAUW. Zelfde inhoudelijke dragers
   (derde generatie · restitutie-belofte · RIS-methode), nu als sleek systeem:
   koel-licht grond, Schibsted Grotesk 800 in zinskapitaal, gradient-knoppen,
   hairlines en zachte diepte, de RIS-modules als verbonden stepper en de
   generaties als strakke tijdlijnkaart op de studiofoto.

   AFSTAND register: de andere licht-blauwe rijschooldemo's zijn vloot-fotoreeks
   met geel accent en kobalt-kleurvlak met formulier-hero — hier: stepper-systemen,
   tijdlijnkaart, studiofoto in kader, gradient-blauw. Donker-navy-glas is de
   vorige herbouw; dit is bewust de lichte tegenhanger. */

/* DE LETTER — waarom dit blok er zo uitziet (22-08).
   Klacht: de koppen op rob.haanwebworks.nl waren soms dikker dan op rob2, terwijl
   beide bestanden op de meta-tags na identiek zijn. Twee fouten, samen gemeten:

   1. font-display:optional gooit de letter weg als hij niet binnen ~100 ms na de
      aanvraag klaar is — ook als hij ruim vóór de eerste verf alsnog binnen is.
      Op 4G kwam schibsted.woff2 op ~880 ms binnen bij een eerste verf op ~815 ms:
      dan viel de pagina blijvend terug. Op een snelle lijn haalde hij het meestal
      wél. Vandaar hetzelfde bestand, twee verschillende koppen. Nu: swap.
   2. De terugvalletter was zelf kapot. In een face die font-weight:600 900 claimt
      levert src:local('Segoe UI') de RÉGULIERE Segoe — en omdat de face zegt dat
      hij 600-900 al dekt, maakt de browser er ook geen kunstvet van. Gemeten op
      100px 'Haarlem': echte letter 14.391 zwarte beeldpunten, terugval 7.009.
      Precies de helft. Dát is de "andere letterdikte" die je zag.

   Terugval nu per gewicht met de juiste lokale sneden, breedtes gemeten in Edge op
   100px (Schibsted / Segoe = size-adjust):
      400 -> 2071,34 / 1997,03 (Segoe UI)          = 103,7%
      500 -> 2103,73 / 1997,03 (Segoe UI)          = 105,3%
      600 -> 2144,61 / 2054,80 (Segoe UI Semibold) = 104,4%
      700 -> 2190,84 / 2146,94 (Segoe UI Bold)     = 102,0%
      800 -> 2239,03 / 2237,84 (Segoe UI Black)    = 100,1%
   Met een terugval die op 0,1% na even breed is kost swap geen verschuiving meer;
   dat was de enige reden dat hier optional stond. */
@font-face{font-family:'Feit';src:url('schibsted.woff2') format('woff2');
  font-weight:400 900;font-display:swap}
@font-face{font-family:'FeitVal';font-weight:300 450;size-adjust:103.7%;
  src:local('Segoe UI'),local('Roboto'),local('Arial')}
@font-face{font-family:'FeitVal';font-weight:451 550;size-adjust:105.3%;
  src:local('Segoe UI'),local('Roboto Medium'),local('Arial')}
@font-face{font-family:'FeitVal';font-weight:551 649;size-adjust:104.4%;
  src:local('Segoe UI Semibold'),local('Roboto Medium'),local('Arial Bold')}
@font-face{font-family:'FeitVal';font-weight:650 749;size-adjust:102%;
  src:local('Segoe UI Bold'),local('Roboto Bold'),local('Arial Bold')}
@font-face{font-family:'FeitVal';font-weight:750 900;size-adjust:100.1%;
  src:local('Segoe UI Black'),local('Roboto Black'),local('Arial Black')}

:root{
  --grond:#E2ECFB;
  --nacht2:#071F35;
  --rood:#C81E27;
  --rood-diep:#8E1219;
  --wit:#FFFFFF;
  --inkt:#0E1726;
  --zacht:#4C586B;
  --blauw:#125FAF;
  --blauw-diep:#0B3E77;
  --navy:#0A2340;
  --groen:#12A150;
  --lijn:rgba(14,23,38,.12);
  --maat:min(1200px,91vw);
}
*{box-sizing:border-box}
/* Een author-declaratie als .knop{display:inline-flex} verslaat de UA-regel
   [hidden]{display:none}. Zonder deze regel stonden de planner-knoppen in
   elke stap in beeld — inclusief de verstuurknop op stap 1. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--grond);color:var(--inkt);
  font-family:'Feit','FeitVal',system-ui,sans-serif;font-size:16.5px;line-height:1.64;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
figure{margin:0}
.maat{width:var(--maat);margin-inline:auto}
h1,h2,h3{font-family:'Feit','FeitVal',system-ui,sans-serif;font-weight:800;line-height:1.05;
  letter-spacing:-.026em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:normal;background:linear-gradient(94deg,#3E8FE0,var(--blauw) 55%,var(--blauw-diep));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.overline{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blauw)}
.overline::before{content:'';width:26px;height:2px;border-radius:2px;background:var(--blauw)}

/* ── topstrook + kop ─────────────────────────────────────────────── */
.topstrook{margin:0;background:#08213C;color:rgba(255,255,255,.82);font-size:12.5px}
.top-rij{display:flex;align-items:center;gap:1rem;padding-block:.44rem}
.top-zin{font-weight:500;letter-spacing:.02em}
.top-rechts{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.top-rechts a{color:#fff;font-weight:700;text-decoration:none}
.top-wa{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:rgba(255,255,255,.85)}
.top-wa::before{content:'';width:7px;height:7px;border-radius:50%;background:#3ED06B;
  box-shadow:0 0 0 3px rgba(62,208,107,.2)}

.kop{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--lijn)}
.kop-rij{display:flex;align-items:center;gap:1.2rem;padding-block:.64rem}
.merk{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.merk-r{width:38px;height:38px;flex:none;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:22px;border-radius:10px;
  background:linear-gradient(165deg,var(--blauw),var(--blauw-diep));
  box-shadow:0 10px 20px -10px rgba(18,95,175,.75), inset 0 1px 0 rgba(255,255,255,.3)}
.merk-tekst{font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.05;
  display:flex;flex-direction:column;gap:.14rem}
.merk-tekst small{font-weight:500;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--zacht)}
.nav{display:flex;gap:1.35rem;align-items:center}
.nav a{text-decoration:none;font-size:14.5px;font-weight:500;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(--blauw)}
.knop{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:700;font-size:15px;padding:.78rem 1.45rem;border-radius:11px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.knop-merk{color:#fff;background:linear-gradient(180deg,var(--blauw),var(--blauw-diep));
  box-shadow:0 14px 28px -14px rgba(18,95,175,.85), inset 0 1px 0 rgba(255,255,255,.24)}
.knop-merk:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(18,95,175,.95), inset 0 1px 0 rgba(255,255,255,.24)}
.knop-actie{color:#fff;background:linear-gradient(180deg,var(--rood),var(--rood-diep));
  box-shadow:0 14px 28px -14px rgba(216,35,42,.85), inset 0 1px 0 rgba(255,255,255,.26)}
.knop-actie:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(216,35,42,.95), inset 0 1px 0 rgba(255,255,255,.26)}
.knop-leeg{border:1.5px solid var(--lijn);color:var(--inkt);background:#fff}
.knop-leeg:hover{border-color:var(--inkt);transform:translateY(-2px)}
/* .knop-glas stond alleen onder .hero en .pl-voet. Op lessen, theorie en
   goed-om-te-weten hangt dezelfde knop in de donkere slotkaart: daar kreeg hij geen
   vulling en geen rand en stond "Bel 06 20 81 89 15" als kale tekst naast de rode knop. */
.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)}
.kop-knop{padding:.56rem 1.15rem;font-size:14px}
.hamburger{display:none;width:42px;height:38px;border:1px solid var(--lijn);border-radius:9px;
  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}
/* Het menupaneel draagt in de HTML de klasse .maat en was daardoor 91vw breed:
   op een telefoon bleef links en rechts een strook grond zichtbaar, alsof het
   venster niet paste (Sean 02-09, foto van zijn eigen toestel). Het loopt nu van
   rand tot rand; de zijmarge van .maat wordt padding, zodat de menuregels nog
   steeds op dezelfde lijn staan als de rest van de site. */
.paneel{display:none;background:#fff;padding:.4rem 0 1.5rem;
  width:100%;max-width:none;margin-inline:0;
  padding-inline:calc((100% - var(--maat)) / 2)}
.paneel.open{display:block}
/* > (alleen directe kinderen): iOS herkent het telefoonnummer in .paneel-voet
   zelf als nummer en maakt er een <a> van. Die erfde deze menu-opmaak — 17,5px,
   display:block én een scheidingslijn — waardoor het nummer als extra menu-item
   onder het adres stond. Zichtbaar op Seans toestel, niet in een emulator. */
.paneel > a:not(.knop){display:block;text-decoration:none;padding:.85rem 0;font-size:17.5px;
  border-bottom:1px solid var(--lijn)}
.paneel .knop{margin-top:1.15rem}
.paneel-voet{margin:1.2rem 0 0;font-size:13.5px;color:var(--zacht);line-height:1.6}

/* ── HERO (rood) — rood paneel links, de foto rechts in eigen kleuren ──
   Eerste poging legde een rode sluier over de héle foto: dat maakte hem modderig en
   de blauwe lucht verdween. Nu draagt het rood de linkerhelft en blijft het beeld
   zoals het is — het blauw komt uit de lucht en uit het lesbord. */
.hero{position:relative;overflow:hidden;padding-block:0;color:#fff;
  background:radial-gradient(78% 96% at 4% 6%, #14568F 0%, rgba(20,86,143,0) 68%), #0B3E77}
.hero-foto{position:absolute;inset:0;width:100%;margin:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:56% 46%}
.hero-vloei{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 124% at -6% 16%, rgba(9,35,64,.78) 0%, rgba(9,35,64,.40) 36%,
      rgba(9,35,64,0) 68%),
    linear-gradient(97deg, #0B3E77 0%, rgba(11,62,119,.94) 8%, rgba(11,62,119,.79) 19%,
      rgba(11,62,119,.58) 30%, rgba(11,62,119,.36) 41%, rgba(11,62,119,.18) 52%,
      rgba(11,62,119,.06) 62%, rgba(11,62,119,0) 73%)}
.hero-vlag{position:absolute;right:1.3rem;top:1.3rem;display:inline-flex;align-items:center;
  gap:.5rem;background:rgba(8,33,60,.72);backdrop-filter:blur(5px);color:#fff;font-size:12.5px;
  padding:.42rem .85rem;border-radius:99px;border:1px solid rgba(255,255,255,.28)}
.hero-vlag b{background:#fff;color:var(--blauw-diep);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.16rem .5rem;border-radius:99px}
.hero-korrel{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.35px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(96deg,#000 18%,transparent 58%);
          mask-image:linear-gradient(96deg,#000 18%,transparent 58%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  padding-block:3rem 2.2rem}
.hero-tekst{max-width:33rem}
h1{font-size:clamp(32px,3.4vw,46px);color:#fff;text-shadow:0 2px 20px rgba(8,33,60,.45)}
.hero h1 em{font-style:normal;color:#FFD9A0;background:none;-webkit-text-fill-color:#FFD9A0;
  -webkit-background-clip:border-box;background-clip:border-box}
.hero-zin{margin:1.1rem 0 0;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.88);max-width:42ch}
.hero-doen{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.55rem}
/* ROOD als hoofdknop in de hero (Sean 02-09). Wit gaf twee knoppen van
   gelijk gewicht naast elkaar; rood is de actiekleur van deze site en zet de
   proefles onmiskenbaar vooraan. Witte tekst op #C81E27 = 4,9:1 (AA). */
.hero .knop-actie{background:linear-gradient(180deg,var(--rood),var(--rood-diep));color:#fff;
  box-shadow:0 16px 32px -14px rgba(216,35,42,.85), inset 0 1px 0 rgba(255,255,255,.28)}
.hero .knop-actie:hover{transform:translateY(-2px);
  box-shadow:0 22px 42px -16px rgba(216,35,42,.95), inset 0 1px 0 rgba(255,255,255,.34)}
.hero .knop-glas{color:#fff;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.hero .knop-glas:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.vertrouwen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.26)}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.3);border-radius:99px;
  padding:.4rem .85rem;background:rgba(8,33,60,.24)}
.chip b{font-weight:800;color:#fff}
.chip-ris{border-color:rgba(255,209,160,.7);color:#FFE6C4}

/* tijdlijn + review als band onder de hero-tekst */
.gen-band{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:1.1rem;
  padding-bottom:2.6rem}
.generaties{background:#fff;color:var(--inkt);border-radius:16px;padding:1.05rem 1.25rem 1.1rem;
  box-shadow:0 30px 60px -30px rgba(6,26,49,.85)}
.gen-kop{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem}
.gen-kop b{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.gen-kop span{font-size:12px;color:var(--zacht)}
@media (max-width:560px){.gen-kop{flex-direction:column;align-items:flex-start;gap:.2rem}}
.gen-baan{display:grid;grid-template-columns:1fr 1fr 1.15fr;position:relative}
.gen-baan::before{content:'';position:absolute;left:7%;right:7%;top:7px;height:2px;
  background:linear-gradient(90deg,rgba(30,110,190,.2),rgba(11,62,119,.55))}
.gen{position:relative;text-align:center;padding-top:1.1rem}
.gen::before{content:'';position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;
  border-radius:50%;background:#fff;border:3.5px solid rgba(30,110,190,.35)}
.gen-nu::before{border-color:var(--blauw);box-shadow:0 0 0 4px rgba(11,62,119,.18)}
.gen b{display:block;font-size:13.5px;font-weight:800}
.gen span{display:block;font-size:11.5px;color:var(--zacht);line-height:1.35}
.gen-nu b{color:var(--blauw-diep)}
.gen-foto{position:absolute;right:.35rem;top:-.55rem;width:40px;height:40px;border-radius:50%;
  object-fit:cover;box-shadow:0 0 0 2.5px #fff, 0 0 0 4px rgba(11,62,119,.5)}
.hero-quote{background:rgba(8,33,60,.62);border:1px solid rgba(255,255,255,.3);
  border-radius:16px;padding:1.05rem 1.2rem;backdrop-filter:blur(6px);margin:0}
.hq-sterren{font-size:13px;letter-spacing:.18em;color:#FFCF6B}
.hero-quote p{margin:.35rem 0 0;font-size:14.4px;line-height:1.6;color:rgba(255,255,255,.94)}
.hero-quote footer{margin-top:.45rem;font-size:12.5px;color:rgba(255,255,255,.75)}

/* ── de belofteband ───────────────────────────────────────────────── */
.belofte{background:linear-gradient(120deg,var(--blauw) 0%,#1B72CE 55%,#2C8AE8 100%);
  color:#fff;position:relative;overflow:hidden}
.belofte::before{content:'';position:absolute;right:-10%;top:-80%;width:50%;height:220%;
  border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,.16), transparent 72%)}
.belofte::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 90%);
          mask-image:linear-gradient(90deg,transparent 30%,#000 90%)}
.belofte-rij{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;
  align-items:center;padding-block:1.65rem;z-index:1}
.belofte-euro{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;
  font-weight:800;font-size:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.belofte h2{color:#fff;font-size:clamp(20px,2.1vw,27px);letter-spacing:-.02em}
.belofte p{margin:.3rem 0 0;font-size:14px;color:rgba(255,255,255,.85)}
.belofte .knop{background:#fff;color:var(--blauw-diep);white-space:nowrap;
  box-shadow:0 16px 30px -16px rgba(0,0,0,.5)}
.belofte .knop:hover{transform:translateY(-2px)}

/* ── RIS — de stepper ─────────────────────────────────────────────── */
#ris{background:#fff;border-block:1px solid var(--lijn);position:relative;overflow:hidden}
#ris::after{content:'';position:absolute;right:-8%;bottom:-40%;width:46%;height:86%;
  border-radius:50%;background:radial-gradient(closest-side, rgba(18,95,175,.06), transparent 72%);
  pointer-events:none}
.sectie-kop{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:end;
  margin-bottom:2.2rem}
h2{font-size:clamp(26px,2.9vw,38px)}
.inleiding{margin:0;color:var(--zacht);font-size:16px}
.ris-feit{display:flex;gap:.6rem;align-items:baseline;margin:0 0 .4rem}
.ris-feit b{font-weight:800;font-size:clamp(38px,4vw,52px);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(160deg,#3E8FE0,var(--blauw-diep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ris-feit span{font-size:14px;color:var(--zacht);font-weight:600}
.modules{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;
  counter-reset:module}
.modules::before{content:'';position:absolute;left:3%;right:3%;top:2.05rem;height:2px;
  background:linear-gradient(90deg,rgba(18,95,175,.14),rgba(18,95,175,.5));z-index:0}
.module{position:relative;background:var(--grond);border:1px solid var(--lijn);border-radius:16px;
  padding:1.15rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;z-index:1;
  box-shadow:0 20px 42px -34px rgba(8,42,78,.6);
  transition:transform .25s ease, box-shadow .25s ease}
.module:hover{transform:translateY(-4px);box-shadow:0 28px 50px -32px rgba(18,95,175,.4)}
.module::before{counter-increment:module;content:counter(module);width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(165deg,var(--blauw),var(--blauw-diep));
  box-shadow:0 8px 16px -8px rgba(18,95,175,.9);margin-bottom:.35rem}
.module-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blauw);margin:0}
.module h3{font-size:17px;letter-spacing:-.015em}
.module p{margin:0;font-size:14px;line-height:1.6;color:var(--zacht)}
.module-toets{padding-top:.85rem;font-weight:700;display:flex;align-items:center;gap:.45rem}
/* .module p{margin:0} en .les p{margin:0} zijn 0-1-1 en versloegen .module-toets (0-1-0):
   de voetregel bleef achter de tekst hangen in plaats van onderaan de kaart. Twee
   afstammingsselectors (0-2-0) winnen wél, in beide kaartfamilies. */
.module .module-toets,.les .module-toets{margin-top:auto;font-size:12.5px;color:var(--inkt)}
.module-toets::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--groen);flex:none}
.ris-noot{margin:1.5rem 0 0;padding:1.05rem 1.25rem;background:var(--grond);border:1px solid var(--lijn);
  border-left:4px solid var(--blauw);border-radius:12px;font-size:14.5px;color:var(--zacht)}
.ris-noot b{color:var(--inkt)}

section{padding-block:4.4rem}
.belofte{padding-block:0}


/* ── hero-dossier: foto + feiten + tijdlijn in één paneel ─────────── */
.dossier{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:1rem 1rem 2.4rem;
  box-shadow:0 34px 64px -40px rgba(8,42,78,.65), inset 0 1px 0 rgba(255,255,255,.6)}
.dossier .wagen{border-radius:12px;box-shadow:none}
.feitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;padding:1.05rem .35rem .95rem;
  border-bottom:1px solid var(--lijn)}
.feitgrid b{display:block;font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;
  line-height:1;background:linear-gradient(160deg,#3E8FE0,var(--blauw-diep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.feitgrid span{display:block;margin-top:.28rem;font-size:12px;line-height:1.35;color:var(--zacht)}
.dossier .gen-baan{padding-top:1rem}
.dos-mini{position:absolute;left:-1.3rem;bottom:-1.15rem;display:flex;align-items:center;gap:.7rem;
  background:linear-gradient(180deg,var(--blauw),var(--blauw-diep));color:#fff;border-radius:13px;
  padding:.7rem 1rem .74rem;text-decoration:none;
  box-shadow:0 22px 44px -20px rgba(18,95,175,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease}
.dos-mini:hover{transform:translateY(-2px)}
.dos-euro{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-weight:800;font-size:15px}
.dos-mini b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.dos-mini span span{display:block;font-size:11.5px;color:rgba(255,255,255,.78);white-space:nowrap}

.les-rij.les-rij-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1060px){.les-rij.les-rij-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .hero-grid{padding-block:2.4rem 1.8rem}
  .hero-sluier{background:linear-gradient(180deg, rgba(10,35,64,.72) 0%, rgba(10,35,64,.9) 46%, rgba(10,35,64,.97) 100%)}
  .gen-band{padding-bottom:2rem}.les-rij.les-rij-4{grid-template-columns:1fr}}
.hero-drift{position:absolute;left:-22%;top:-42%;width:82%;height:150%;border-radius:50%;
  pointer-events:none;display:block;z-index:1;
  background:radial-gradient(closest-side, rgba(255,206,150,.20), rgba(255,206,150,.06) 52%, transparent 76%);
  animation:hero-drift 16s ease-in-out infinite}
/* alleen dekking animeren: de vorige translate3d gaf een eigen compositielaag,
   en precies op de rand daarvan (48,8% van het scherm) zag je een lijn staan. */
@keyframes hero-drift{0%,100%{opacity:.34}50%{opacity:1}}

/* ── marquee ──────────────────────────────────────────────────────── */
.mq{position:relative;background:var(--navy);overflow:hidden;padding:0;
  border-top:1px solid rgba(255,255,255,.08)}
.mq-rij{display:flex;width:max-content;animation:mq-loop 32s linear infinite}
.mq:hover .mq-rij{animation-play-state:paused}
@keyframes mq-loop{to{transform:translateX(-50%)}}
.mq-set{display:flex;align-items:center;gap:2.6rem;padding:.62rem 1.3rem}
.mq-set span{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.6);white-space:nowrap;display:inline-flex;align-items:center;gap:2.6rem}
.mq-set span::after{content:'';width:5px;height:5px;border-radius:50%;background:#3E8FE0;opacity:.9}
html:not(.js) .mq-rij{flex-wrap:wrap;width:auto}

/* ── pakketten & tarieven ─────────────────────────────────────────── */
#pakketten{position:relative;background:
  radial-gradient(42% 50% at 0% 8%, rgba(18,95,175,.07), transparent 70%),
  radial-gradient(36% 46% at 100% 92%, rgba(18,161,80,.05), transparent 72%)}
.tar-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.4rem;align-items:stretch}
.pakketten{display:grid;grid-template-columns:1fr;gap:1.05rem}
.pak{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.15rem 1.3rem;display:grid;grid-template-columns:1fr auto;gap:.2rem 1.4rem;
  align-items:center;box-shadow:0 20px 42px -34px rgba(8,42,78,.6);
  transition:transform .25s ease, box-shadow .25s ease}
.pak:hover{transform:translateY(-3px);box-shadow:0 28px 50px -32px rgba(18,95,175,.4)}
.pak-populair{border-color:rgba(18,95,175,.5);box-shadow:0 24px 48px -30px rgba(18,95,175,.5)}
.pak-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blauw);margin:0}
.pak h3{font-size:19px;letter-spacing:-.02em;margin:.1rem 0 .15rem}
.pak-sub{margin:0;font-size:13.5px;color:var(--zacht);grid-column:1}
.pak-prijs{grid-column:2;grid-row:1/4;font-weight:800;font-size:29px;letter-spacing:-.03em;text-align:right}
.pak-prijs small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--zacht)}
.pak-actie{position:absolute;right:1rem;top:-11px;color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:.26rem .7rem;
  background:linear-gradient(180deg,var(--rood),var(--rood-diep));
  box-shadow:0 10px 20px -10px rgba(216,35,42,.9)}
.pak-voordeel{margin:1.05rem 0 0;padding:.95rem 1.15rem;background:#fff;border:1px solid var(--lijn);
  border-left:4px solid var(--groen);border-radius:12px;font-size:14px;color:var(--zacht)}
.pak-voordeel b{color:var(--inkt)}
.los-kaart{background:linear-gradient(165deg,#0A2340,#0E3C6E);color:#fff;border-radius:18px;padding:1.45rem 1.5rem 1.35rem;
  display:flex;flex-direction:column;box-shadow:0 30px 60px -38px rgba(8,42,78,.95);
  position:relative;overflow:hidden}
.los-kaart::before{content:'';position:absolute;right:-30%;top:-45%;width:80%;height:100%;
  border-radius:50%;background:radial-gradient(closest-side, rgba(18,95,175,.5), transparent 72%)}
.los-kaart h3{position:relative;font-size:19px;letter-spacing:-.02em;margin:0 0 .3rem;color:#fff}
.los-kaart .pak-label{color:#9CC9FF;position:relative}
.los-tabel{position:relative;margin:.85rem 0 0;width:100%;border-collapse:collapse}
.los-tabel td{padding:.52rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14.5px}
.los-tabel td:first-child{color:rgba(255,255,255,.8)}
.los-tabel td small{display:block;font-size:11.5px;color:rgba(255,255,255,.48)}
.los-tabel td:last-child{text-align:right;font-weight:800;white-space:nowrap}
.los-tabel tr:last-child td{border-bottom:0}
.reeksen{margin-top:1.35rem;display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.reeks{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1rem 1.15rem 1.05rem;
  box-shadow:0 18px 38px -32px rgba(8,42,78,.55)}
.reeks b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.45rem}
.reeks table{width:100%;border-collapse:collapse}
.reeks td{padding:.32rem 0;font-size:13.5px;color:var(--zacht);border-bottom:1px dashed var(--lijn)}
.reeks tr:last-child td{border-bottom:0}
.reeks td:last-child{text-align:right;font-weight:700;color:var(--inkt);white-space:nowrap}
.tar-noot{margin:1.25rem 0 0;font-size:12.5px;color:var(--zacht)}

/* ── bespaartips — hun eigen adviezen ─────────────────────────────── */
#tips{background:linear-gradient(160deg,#0A2340,#0D3E72 74%);color:#fff;position:relative;overflow:hidden}
#tips::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 60% at 100% 0%, rgba(18,95,175,.4), transparent 70%)}
#tips .sectie-kop{position:relative}
#tips .overline{color:#C7DEFF}
#tips h2{color:#fff}
#tips .inleiding{color:rgba(255,255,255,.72)}
.tips-rij{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.05rem}
.tip{background:linear-gradient(168deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 60%);
  border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:1.1rem 1.15rem 1.2rem;
  display:flex;flex-direction:column;gap:.4rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.tip-nr{font-weight:800;font-size:13px;color:#FFCF6B;letter-spacing:.12em}
.tip h3{font-size:15.5px;letter-spacing:-.01em;color:#fff}
.tip p{margin:0;font-size:13.4px;line-height:1.6;color:rgba(255,255,255,.78)}
.tips-rij-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1060px){.tips-rij-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tips-rij-3{grid-template-columns:1fr}}
.rev-intro{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;align-items:baseline;
  margin-bottom:2rem}
.rev-sterren{font-size:26px;letter-spacing:.22em;color:#66D08A;grid-row:1/3}
.rev-intro h2{color:#fff}
.rev-intro p{margin:0;color:rgba(255,255,255,.72);font-size:15.5px;grid-column:2}
.autos-kop{text-align:center;max-width:64ch;margin:0 auto 2rem}
.autos-kop p{margin:.9rem 0 0;color:var(--zacht);font-size:16px}
.autos{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.auto-kaart{position:relative;border-radius:16px;overflow:hidden;background:#2E3237;
  box-shadow:0 28px 56px -36px rgba(8,42,78,.75);
  transition:transform .25s ease, box-shadow .25s ease}
.auto-kaart:hover{transform:translateY(-4px);box-shadow:0 36px 64px -34px rgba(18,95,175,.45)}
.auto-kaart img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.auto-kaart figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .85rem;
  background:linear-gradient(0deg, rgba(7,24,42,.88) 24%, transparent);color:#fff;
  font-weight:800;font-size:17px;letter-spacing:-.01em;text-align:center}
@media (max-width:940px){
  .gen-band{grid-template-columns:1fr}
  .hero-foto{position:relative;inset:auto;width:auto;margin:0;height:clamp(266px,68vw,392px)}
  .hero-foto img{object-position:52% 54%}
  .hero-vloei{background:linear-gradient(0deg, rgba(11,62,119,.94) 0%, rgba(11,62,119,.30) 22%,
    rgba(11,62,119,.10) 40%, rgba(11,62,119,0) 56%)}
  .hero{display:flex;flex-direction:column}
  .hero .maat{order:2}
  .hero-grid{padding-block:1.8rem 1.6rem}
  .hero-korrel{display:none}.autos{grid-template-columns:1fr}}
.les-regel{margin:0 0 1.4rem;font-size:16px;color:var(--zacht);max-width:70ch}
.les-regel b{color:var(--inkt);font-weight:800;text-transform:uppercase;font-size:13px;
  letter-spacing:.16em;margin-right:.5rem}
.tip-voet{margin-top:auto!important;padding-top:.7rem;font-size:12px!important;font-weight:700;color:rgba(255,255,255,.6)!important}
.tip .tip-nr{color:#FFCF6B;letter-spacing:.2em}

/* ── lessen — het aanbod ──────────────────────────────────────────── */
.les-rij{display:grid;grid-template-columns:repeat(5,1fr);gap:1.05rem}
.les{background:#fff;border:1px solid var(--lijn);border-radius:15px;padding:1.1rem 1.15rem 1.2rem;
  display:flex;flex-direction:column;gap:.4rem;box-shadow:0 18px 38px -32px rgba(8,42,78,.55);
  transition:transform .25s ease, box-shadow .25s ease}
.les:hover{transform:translateY(-4px);box-shadow:0 26px 46px -30px rgba(18,95,175,.4)}
.les-teken{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(165deg,rgba(18,95,175,.12),rgba(18,95,175,.06));
  color:var(--blauw-diep);font-weight:800;font-size:14px;border:1px solid rgba(18,95,175,.25)}
.les h3{font-size:15.5px;letter-spacing:-.01em}
.les p{margin:0;font-size:13px;line-height:1.55;color:var(--zacht)}

/* ── theorie ──────────────────────────────────────────────────────── */
#theorie{background:#fff;border-block:1px solid var(--lijn)}
.theo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center}
/* wit als grondregel: .theo-pak staat meestal ín een grond-kamer en had dan
   exact dezelfde kleur als die kamer — alleen de rand hield hem nog bij elkaar.
   In de witte kamers krijgt hij verderop juist de grond-vulling. */
.theo-pak{background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.3rem 1.4rem;box-shadow:0 20px 42px -34px rgba(8,42,78,.55)}
.theo-pak .pak-label{color:var(--blauw)}
.theo-pak h3{font-size:19px;margin:.15rem 0 .4rem}
.theo-pak p{margin:0;font-size:14.5px;color:var(--zacht)}
.theo-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1rem;
  padding-top:1rem;border-top:1px solid var(--lijn)}
.theo-cijfers b{display:block;font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:var(--blauw-diep)}
.theo-cijfers span{display:block;margin-top:.2rem;font-size:11.5px;line-height:1.3;color:var(--zacht)}
.eisen{width:100%;border-collapse:collapse;margin-top:1.1rem}
.eisen caption{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blauw);padding-bottom:.5rem}
.eisen td{padding:.5rem 0;font-size:14.5px;border-bottom:1px dashed var(--lijn);color:var(--zacht)}
.eisen td:last-child{text-align:right;font-weight:800;color:var(--inkt);white-space:nowrap}
.eisen tr:last-child td{border-bottom:0}

/* Geen backdrop-filter op .pf-vorm en .tip: die kaarten liggen op een egale
   verloopachtergrond, dus er valt niets te vervagen — het kostte alleen een
   dure compositielaag bij het laden. Op .hero-quote, .hero-vlag en de plakkende
   kopbalk blijft de vervaging staan; daar ligt wél beeld onder.
   ── proefles ─────────────────────────────────────────────────────── */
/* #proefles is een BLAUWE kamer (03-09). Eerst navy, toen grond, nu blauw — de
   reden staat in de commit. Kort: het witte formulier moet eruit springen (op
   grond deed het dat niet) én de naad met het navy van #tips erboven moet te
   zien zijn. Dit blauw zit op ΔE 20,5 van dat navy en op 77,6 van het wit. */
#proefles{background:linear-gradient(160deg,#125FAF,#1B72CE 74%);color:#fff;position:relative;overflow:hidden}
#proefles::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(46% 66% at 0% 100%, rgba(8,33,60,.34), transparent 70%),
   radial-gradient(36% 50% at 100% 0%, rgba(255,255,255,.10), transparent 72%)}
.pf-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
/* alleen de kamers die donker blijven; #proefles is licht geworden */
#plannen .pf-tekst .overline,#proefles .pf-tekst .overline,#rekenhulp .pf-tekst .overline{color:#C7DEFF}
#plannen .pf-tekst h2,#proefles .pf-tekst h2,#rekenhulp .pf-tekst h2{color:#fff}
#plannen .pf-tekst .hero-zin,#proefles .pf-tekst .hero-zin{color:rgba(255,255,255,.85)}
#rekenhulp .pf-tekst .hero-zin{color:rgba(255,255,255,.75)}
.pf-punten{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem;font-size:15px}
.pf-punten li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  color:var(--zacht)}
/* wit alleen waar de sectie ook echt donker is */
#plannen .pf-punten li,#proefles .pf-punten li,#rekenhulp .pf-punten li,
.pg-theorie #inschrijven .pf-punten li{color:rgba(255,255,255,.85)}
.vink{width:19px;height:19px;border-radius:50%;background:var(--groen);flex:none;position:relative;
  margin-top:.12rem;box-shadow:0 4px 10px -4px rgba(18,161,80,.8)}
.vink::after{content:'';position:absolute;left:6px;top:3.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}
.pf-vorm{position:relative;background:linear-gradient(168deg, rgba(255,255,255,.1), rgba(255,255,255,.04) 60%);
  border:1px solid rgba(255,255,255,.17);border-radius:20px;padding:1.55rem 1.55rem 1.45rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 40px 80px -44px rgba(0,0,0,.8)}
.pf-vorm .veld{display:grid;gap:.3rem;margin-bottom:.9rem}
.pf-vorm label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.68)}
.pf-vorm input,.pf-vorm select,.pf-vorm textarea{width:100%;background:rgba(8,33,60,.55);
  border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font:inherit;
  font-size:15px;padding:.68rem .85rem;outline:none;transition:border-color .2s ease}
.pf-vorm input:focus,.pf-vorm select:focus,.pf-vorm textarea:focus{border-color:#9CC9FF}
.pf-vorm textarea{min-height:70px;resize:vertical}
.pf-vorm select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.pf-vorm select option{color:#0E1726;background:#fff}
.pf-rij2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.pf-voet{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.1rem}
.pf-voet .knop{border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,#22B25B,#0E8A43);
  box-shadow:0 14px 28px -14px rgba(18,161,80,.9), inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.pf-voet .knop:hover{transform:translateY(-2px)}
.pf-voet small{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.5}


/* (dubbel .hero-quote-blok verwijderd: het draaide de scrim uit terwijl de blur bleef staan) */

/* ── de nieuwe automaat (21-08) ──────────────────────────────────── */
/* #auto stond op wit, net als het #ris eronder — de naad die Sean aanwees
   (02-09: "niet wit na wit"). Nu grond, zodat auto → ris weer een kamerwissel is. */
#auto{background:var(--grond);border-block:1px solid var(--lijn)}
.auto-raster{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem;align-items:stretch}
.auto-kolom{display:grid;grid-template-rows:1fr 1fr;gap:1.2rem}
.auto-groot,.auto-klein{position:relative;border-radius:16px;overflow:hidden;background:#dfe6ee;
  box-shadow:0 26px 52px -36px rgba(7,31,53,.75)}
.auto-groot img,.auto-klein img{width:100%;height:100%;object-fit:cover;display:block}
.auto-groot img{aspect-ratio:3/2}
.auto-klein img{aspect-ratio:4/3}
.auto-groot figcaption,.auto-klein figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .95rem .75rem;color:#fff;font-size:12.5px;font-weight:600;
  background:linear-gradient(0deg, rgba(7,31,53,.9) 28%, transparent)}
.rust{margin-top:1.3rem;background:linear-gradient(120deg,var(--blauw-diep),var(--blauw) 72%);
  color:#fff;border-radius:16px;padding:1.4rem 1.55rem;display:grid;
  grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
  box-shadow:0 28px 54px -34px rgba(7,65,122,.95)}
.rust-teken{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:22px}
.rust h3{font-size:18.5px;color:#fff;margin-bottom:.3rem}
.rust p{margin:0;font-size:14.6px;line-height:1.62;color:rgba(255,255,255,.86)}

/* tweeluik-bijschrift met NIEUW-vlag */
.auto-kaart figcaption span{display:inline-block;margin-left:.5rem;background:var(--rood);
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:99px;vertical-align:middle}

@media (max-width:820px){
  .auto-raster{grid-template-columns:1fr}
  .auto-kolom{grid-template-rows:none;grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .auto-kolom{grid-template-columns:1fr}
  .rust{grid-template-columns:1fr;gap:.7rem}
}

.voet-groot{background:#061A31;color:rgba(255,255,255,.68);padding:2.5rem 0 0;font-size:14px}
.vg-rij{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.vg-rij .vg-kop{margin:0 0 .6rem;font-size:13px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#fff}
.vg-rij p,.vg-rij a{margin:0;color:rgba(255,255,255,.68);text-decoration:none;line-height:1.8}
.vg-rij a:hover{color:#fff}
.vg-rij .kolom a{display:block}

.voet{background:#08213C;color:rgba(255,255,255,.7);padding-block:1.5rem;font-size:13px}
.voet-rij{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.voet .rechts{margin-left:auto}
.voet a{color:#fff;font-weight:700}

.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}
/* @gate reveal-vangnet — html.toon komt van de kopregel als beweging.js niet gedraaid heeft */
/* transition:none erbij (02-09): html.toon is het vangnet voor "beweging.js
   heeft niet gedraaid" — dan hoort er ook niets te animeren. Zonder deze regel
   startte de reveal alsnog, en mat axe de tekst hálverwege de overgang: kleur
   #98a1af op grond = contrast 2,29 en dus drie serious-meldingen op /theorie,
   terwijl de uitgeanimeerde tekst gewoon voldoet. */
html.toon .op{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.op{opacity:1;transform:none}}

@media (max-width:1060px){
  .modules{grid-template-columns:1fr 1fr}
  .modules::before{display:none}
  .tips-rij{grid-template-columns:1fr 1fr 1fr}
  .les-rij{grid-template-columns:1fr 1fr 1fr}
  .tar-grid{grid-template-columns:1fr}
  .theo-grid{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:940px){
  .nav,.kop-knop{display:none}
  .hamburger{display:block}
  .paneel.open{display:flex;flex-direction:column}
  .hero-grid{grid-template-columns:1fr;gap:2.3rem;padding-block:2.5rem 3.2rem}
  .sectie-kop{grid-template-columns:1fr;gap:.8rem;align-items:start}
  .belofte-rij{grid-template-columns:auto 1fr;row-gap:1rem}
  .belofte .knop{grid-column:1/-1;justify-self:start}
  .pf-grid{grid-template-columns:1fr;gap:2rem}
  .vg-rij{grid-template-columns:1fr 1fr}
  .tips-rij{grid-template-columns:1fr 1fr}
  .les-rij{grid-template-columns:1fr 1fr}
  .dos-mini{left:.8rem}
}
@media (max-width:640px){
  section{padding-block:3.1rem}
  .top-zin{display:none}
  .top-rij{justify-content:center}
  .top-rechts{margin-left:0}
  h1{font-size:clamp(29px,8vw,38px)}
  .generaties{margin:-2rem .6rem 0}
  .gen-baan{grid-template-columns:1fr}
  .gen-baan::before{left:7px;right:auto;top:8%;bottom:8%;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(18,95,175,.18),rgba(18,95,175,.55))}
  .gen{text-align:left;padding:.35rem 0 .35rem 1.6rem}
  .gen::before{left:0;top:.55rem;margin-left:0}
  .gen-foto{position:static;width:34px;height:34px;float:right;margin-left:.5rem}
  .modules{grid-template-columns:1fr}
  .belofte-euro{display:none}
  .voet .rechts{margin-left:0}
  .tips-rij{grid-template-columns:1fr}
  .rev-intro{grid-template-columns:1fr;gap:.5rem}
  .rev-intro p{grid-column:1}
  .rev-teken{grid-row:auto;font-size:22px}
  .les-rij{grid-template-columns:1fr}
  .reeksen{grid-template-columns:1fr}
  .theo-cijfers{grid-template-columns:1fr 1fr}
  .pak{grid-template-columns:1fr}
  .pak-prijs{grid-column:1;grid-row:auto;text-align:left;margin-top:.4rem}
  .pf-rij2{grid-template-columns:1fr}
  .vg-rij{grid-template-columns:1fr;gap:1.4rem}
  .dos-mini{position:static;margin-top:.9rem;justify-content:center}
  .feitgrid{grid-template-columns:1fr 1fr 1fr;gap:.5rem}
}

/* ── 404: wegwijzer in het dossier ─────────────────────────────────
   Plus de contrastfix voor de overline op de donkere hero. */
.hero .overline{color:#C7DEFF}
.hero .overline::before{background:#C7DEFF}
.wegwijs{display:grid;gap:.45rem;margin:.9rem .35rem .2rem}
.wegwijs a{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .75rem;border-radius:11px;
  background:#EFF5FC;border:1px solid var(--lijn);text-decoration:none;transition:.18s}
.wegwijs a:hover{background:#E3EFFA;border-color:rgba(30,110,190,.4);transform:translateX(2px)}
.wegwijs b{font-size:13.5px;color:var(--blauw-diep)}
.wegwijs span{font-size:12px;color:var(--zacht)}

/* ── nadruk op de donkere secties ──────────────────────────────────
   Het kop-verloop is voor lichte secties gemaakt; op de donkere reviews- en
   proefles-sectie viel de staart van het verloop weg in de achtergrond. */
#tips h2 em,#plannen .pf-tekst h2 em,#proefles .pf-tekst h2 em,#rekenhulp .pf-tekst h2 em{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:#FFD9A0;-webkit-text-fill-color:#FFD9A0}
.rev-sterren{color:#FFCF6B}

/* ── tussenmaat 941–1200: het rode paneel breder ───────────────────────
   Op 1024 liep de tekst tot over de portierbelettering; de foto krijgt hier minder
   breedte en de overgang loopt langer door. */
@media (min-width:941px) and (max-width:1200px){
  .hero-foto img{object-position:78% 46%}
}

/* ── telefoon: geen regelafbreking die van de letter afhangt ─────────────
   CLS-oorzaak (live gemeten, 21-08): de knoppenrij en de chiprij braken mét de
   webletter op een andere regel dan met de terugvalletter — alles eronder schoof
   dan alsnog. Eén knop en één chip per regel is in beide toestanden gelijk. */
@media (max-width:560px){
  .hero-doen{flex-direction:column;align-items:stretch}
  .hero-doen .knop{width:100%;justify-content:center}
  .vertrouwen{display:grid;grid-template-columns:1fr;gap:.45rem}
  .chip{justify-content:flex-start}
}

/* ── subpagina-hero (404 en app-me) ────────────────────────────────────
   De rode voorpagina zet .hero-grid op één kolom, want daar ligt de foto
   absoluut over de rechterhelft. De subpagina's hebben wél een .hero-beeld
   naast de tekst; die krijgen hun twee kolommen terug via .hero-duo.
   Zonder deze regel schoof het witte dossier over de knoppen heen. */
.hero-duo{grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start;
  padding-block:3.4rem 3.6rem}
.hero-duo .hero-tekst{max-width:none}
.hero-lijnen{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.35px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(120deg,#000 12%,transparent 62%);
          mask-image:linear-gradient(120deg,#000 12%,transparent 62%)}
/* De hoofdknop in de hero is ROOD op élke pagina (Sean 02-09) — /spoedcursus,
   /theorie en /lessen gebruiken knop-merk voor diezelfde eerste actie. Eén
   actiekleur op de hele site, geen twee gelijkwaardige knoppen naast elkaar. */
.hero .knop-merk{background:linear-gradient(180deg,var(--rood),var(--rood-diep));color:#fff;
  box-shadow:0 16px 32px -14px rgba(216,35,42,.85), inset 0 1px 0 rgba(255,255,255,.28)}
.hero .knop-merk:hover{transform:translateY(-2px);
  box-shadow:0 22px 42px -16px rgba(216,35,42,.95), inset 0 1px 0 rgba(255,255,255,.34)}
.hero .knop-leeg{border:1px solid rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1)}
.hero .knop-leeg:hover{border-color:#fff;background:rgba(255,255,255,.2);transform:translateY(-2px)}
@media (max-width:940px){
  .hero-duo{grid-template-columns:1fr;gap:2rem;padding-block:2.2rem 2.6rem}
}

/* ── driekolomsrij voor de lessenpagina ────────────────────────────────
   Stond eerst als inline-stijl op .les-rij; een inline grid-template wint van
   élke media-query, dus op 390px bleven het drie kolommen en liep de pagina over. */
.les-rij-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:940px){.les-rij-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.les-rij-3{grid-template-columns:1fr}}
.band-boven{margin-top:1.3rem}

/* ── de proefles-planner ───────────────────────────────────────────────
   Vier stappen in één formulier. Geen server: aan het eind ziet de bezoeker
   precies wat er staat en zet hij het zélf klaar in WhatsApp bij Joyce. */
/* #plannen is een BLAUWE kamer (03-09), om dezelfde reden als #proefles: de
   witte planner moet eruit springen. Het blauw is helder genoeg dat de naad met
   de navy hero erboven te zien is — ΔE ~20, dezelfde orde als hero → .belofte. */
#plannen{background:linear-gradient(160deg,#125FAF,#1B72CE 74%);color:#fff;position:relative;overflow:hidden}
#plannen::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(46% 66% at 0% 100%, rgba(8,33,60,.34), transparent 70%),
   radial-gradient(36% 50% at 100% 0%, rgba(255,255,255,.10), transparent 72%)}
#plannen .pf-grid{align-items:start}
#rekenhulp-was-hier h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#FFD9A0;-webkit-text-fill-color:#FFD9A0}

.planner{padding-top:1.15rem}
.pf-vorm fieldset{border:0;margin:0;padding:0;min-width:0}
.planner legend{padding:0;margin:0 0 .95rem;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}

.pl-balk{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;list-style:none;margin:0 0 1.35rem;
  padding:0 0 1.1rem;border-bottom:1px solid rgba(255,255,255,.16)}
.pl-balk li{display:flex;flex-direction:column;align-items:center;gap:.3rem;font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pl-balk b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.6);
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.pl-balk .pl-nu{color:#fff}
.pl-balk .pl-nu b{background:linear-gradient(180deg,#fff,#EDF3FA);color:var(--blauw-diep);
  border-color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.75)}
.pl-balk .pl-af b{background:rgba(18,161,80,.9);border-color:rgba(18,161,80,.9);color:#fff}

.pl-keuzes{display:grid;gap:.55rem}
.pl-keuze{position:relative;display:block;cursor:pointer}
.pl-keuze input{position:absolute;opacity:0;width:1px;height:1px}
.pl-vak{display:block;padding:.78rem .95rem;border-radius:12px;background:rgba(8,33,60,.45);
  border:1px solid rgba(255,255,255,.18);transition:border-color .2s ease,background .2s ease,transform .2s ease}
.pl-vak b{display:block;font-size:14.8px;font-weight:700;color:#fff}
.pl-vak small{display:block;margin-top:.12rem;font-size:12.5px;color:rgba(255,255,255,.62)}
.pl-keuze:hover .pl-vak{background:rgba(8,33,60,.62);transform:translateX(2px)}
.pl-keuze input:checked + .pl-vak{border-color:#9CC9FF;background:rgba(156,201,255,.14)}
.pl-keuze input:focus-visible + .pl-vak{outline:2px solid #9CC9FF;outline-offset:2px}

.pl-vraag{margin:1.15rem 0 .5rem;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}
.pl-vraag span{text-transform:none;letter-spacing:0;font-weight:500;color:rgba(255,255,255,.45)}
.pl-vinkjes{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.pl-vink{cursor:pointer}
.pl-vink input{position:absolute;opacity:0;width:1px;height:1px}
.pl-vink span{display:grid;place-items:center;padding:.5rem .2rem;border-radius:10px;
  background:rgba(8,33,60,.45);border:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:700;
  color:#fff;text-transform:capitalize;transition:border-color .2s ease,background .2s ease}
.pl-vink span small{font-size:0;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pl-vink input:checked + span{border-color:#9CC9FF;background:rgba(156,201,255,.18)}
.pl-vink input:focus-visible + span{outline:2px solid #9CC9FF;outline-offset:2px}
.pl-pillen{display:flex;flex-wrap:wrap;gap:.4rem}
.pl-pil{cursor:pointer}
.pl-pil input{position:absolute;opacity:0;width:1px;height:1px}
.pl-pil span{display:inline-block;padding:.45rem .9rem;border-radius:99px;font-size:13.5px;
  font-weight:600;color:rgba(255,255,255,.86);background:rgba(8,33,60,.45);
  border:1px solid rgba(255,255,255,.18);transition:border-color .2s ease,background .2s ease}
.pl-pil input:checked + span{border-color:#9CC9FF;background:rgba(156,201,255,.18);color:#fff}
.pl-pil input:disabled + span{opacity:.35}
.pl-pil input:focus-visible + span{outline:2px solid #9CC9FF;outline-offset:2px}
.pl-los{text-transform:none;letter-spacing:0;color:rgba(255,255,255,.45)}

.pl-overzicht{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:14.5px}
.pl-overzicht dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding-top:.16rem}
.pl-overzicht dd{margin:0;color:#fff;font-weight:600}
.pl-slot{margin:1.15rem 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.6)}
.pl-fout{margin:.2rem 0 0;font-size:13.5px;font-weight:700;color:#BBD8FF}
.pl-tip{margin:.5rem 0 0;font-size:13px;font-weight:600;color:rgba(255,255,255,.62)}

.pl-voet{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.35rem;
  padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.16)}
.pl-voet .knop{border:0;cursor:pointer;font-family:inherit}
.pl-voet .knop-glas{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff}
.pl-voet .knop-glas:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.pl-voet .knop-actie{background:linear-gradient(180deg,#fff,#EDF3FA);color:var(--blauw-diep);
  box-shadow:0 16px 30px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9)}
/* Alle drie de verstuurknoppen (planner, theoriepakket, spoedcursus) dragen
   sinds 04-09 het WhatsApp-teken; de gap hoort dus hier en niet per formulier.
   De gloed was 28px op 90% dekking en las als een goedkope highlight-knop. */
.pl-groen{background:linear-gradient(180deg,#22B25B,#0E8A43);color:#fff;gap:.55rem;
  box-shadow:0 10px 20px -12px rgba(18,161,80,.55), inset 0 1px 0 rgba(255,255,255,.22)}
.pl-groen:hover{transform:translateY(-2px)}
.pl-voet small{flex:1 1 100%;font-size:12.5px;color:rgba(255,255,255,.55)}
.pl-voet small a{color:#fff;font-weight:700}
.pl-klaar{display:grid;gap:.5rem;place-items:center;text-align:center;padding:1.4rem 0 .4rem}
.pl-klaar .vink{width:44px;height:44px}
.pl-klaar .vink::after{left:16px;top:10px;width:11px;height:20px;border-width:0 4px 4px 0}
.pl-klaar b{font-size:19px;font-weight:800;color:#fff}
.pl-klaar p{margin:0;font-size:14.5px;color:rgba(255,255,255,.72);max-width:34ch}

@media (max-width:640px){
  .pl-balk{grid-template-columns:repeat(4,1fr);gap:.2rem}
  .pl-balk li{font-size:9.5px;letter-spacing:.06em}
  .pl-vinkjes{grid-template-columns:repeat(3,1fr)}
  .pl-voet{flex-direction:column;align-items:stretch}
  .pl-voet .knop{width:100%;justify-content:center}
  .pl-overzicht{grid-template-columns:1fr;gap:.15rem .5rem}
  .pl-overzicht dd{margin-bottom:.5rem}
}

/* ── genummerde stappenlijst (verloop van het praktijkexamen) ─────────── */
.stappen{counter-reset:stap;list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.stappen li{position:relative;padding:.72rem .95rem .72rem 3rem;background:#fff;
  border:1px solid var(--lijn);border-radius:12px;font-size:14.5px;line-height:1.6;color:var(--zacht);
  box-shadow:0 16px 34px -30px rgba(8,42,78,.55)}
.stappen li::before{counter-increment:stap;content:counter(stap);position:absolute;left:.85rem;
  top:.72rem;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(165deg,var(--blauw),var(--blauw-diep))}
.stappen b{color:var(--inkt)}
#proefles .pf-grid{align-items:start}
/* De statische "Plan je proefles"-kaart is vaak korter dan de tekstkolom ernaast
   (theorie: citaat + kop + punten links) — bovenaan uitgelijnd bleef er onder de
   kaart een leeg donker vlak. Gecentreerd deelt de kaart de ruimte. De plánner
   blijft bewust bovenaan: die wisselt van hoogte per stap en zou anders
   verspringen. (24-08, nul-fouten-ronde) */
#proefles .pf-vorm:not(.planner),#plannen .pf-vorm:not(.planner){align-self:center}

/* ── overslaan-link, kopregel voor tabellen en de planner zonder JavaScript ─── */
.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(--blauw-diep);font-weight:700;border-radius:9px}
main:focus{outline:none}
.reeks caption,.los-tabel caption{text-align:left;font-size:12.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding-bottom:.45rem}
.reeks caption{color:var(--inkt)}
.los-tabel caption{color:#9CC9FF;position:relative}
.reeks th,.los-tabel th,.eisen th{font-weight:inherit;text-align:left}
.reeks th{padding:.32rem 0;font-size:13.5px;color:var(--zacht);border-bottom:1px dashed var(--lijn)}
.reeks tr:last-child th{border-bottom:0}
.los-tabel th{padding:.52rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14.5px;
  color:rgba(255,255,255,.8)}
.los-tabel th small{display:block;font-size:11.5px;color:rgba(255,255,255,.48)}
.los-tabel tr:last-child th{border-bottom:0}
.eisen th{padding:.5rem 0;font-size:14.5px;border-bottom:1px dashed var(--lijn);color:var(--zacht)}
.eisen tr:last-child th{border-bottom:0}
/* opacity:.8 eraf (02-09): --zacht op 80% dekking komt uit op #707989 en dat is
   4,38:1 op wit — onder de AA-eis van 4,5 voor kleine tekst. Het viel nooit op
   omdat de kaart bij het meten nog onzichtbaar was (reveal); nu de prijskaarten
   niet meer animeren, meet axe hem wél. Volle --zacht = 7,2:1 op wit en 6,0:1
   op grond; het kleinere korps houdt de rangorde al vast. */
.eisen th small{display:block;font-size:11.5px;color:var(--zacht)}
/* het sterrenvak in de reviewkop draagt nu een aanhalingsteken in plaats van een
   verzonnen sterbeoordeling — de klant publiceert nergens een score */
.rev-teken{font-size:34px;line-height:1;color:#FFCF6B;grid-row:1/3;font-weight:800}
.pl-nojs{display:none}
html:not(.js) .pl-nojs{display:block;margin:0 0 1.1rem;padding:.8rem 1rem;border-radius:12px;
  background:rgba(156,201,255,.16);border:1px solid rgba(156,201,255,.5);font-size:14px;color:#fff}
html:not(.js) .pl-nojs a{color:#fff;font-weight:700}
html:not(.js) .pl-stap[hidden]{display:block!important}
/* Zonder JavaScript staan alle stappen open; dan hoort het vrije veld van
   "Anders, namelijk..." er ook gewoon te staan. */
html:not(.js) .pl-anders[hidden]{display:grid!important}
/* Het vrije veld hangt onder een pillenrij; zonder eigen bovenmarge plakt het label
   tegen de pillen aan, terwijl elke andere vraag in deze stap 1,15rem lucht heeft. */
.pl-anders{margin-top:1.15rem}
html:not(.js) .pl-balk,html:not(.js) .pl-voet .knop{display:none!important}
html:not(.js) .planner fieldset + fieldset{margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.16)}
.pl-klaar{margin:0 0 1.2rem;padding:1.1rem 1rem;border-radius:14px;
  background:rgba(18,161,80,.16);border:1px solid rgba(18,161,80,.55)}
.pl-klaar a{color:#fff;font-weight:700}

/* Weesregels: text-wrap:pretty houdt losse woorden van de laatste regel af.
   Browsers die het niet kennen negeren het. Telefoonnummers breken nooit. */
@supports (text-wrap:pretty){p,li,dd,dt,figcaption,blockquote,small{text-wrap:pretty}}
a[href^="tel:"]{white-space:nowrap}
/* Links midden in een lopende tekst: onderstreept alleen valt te weinig op, dus ook vet.
   Dat was al de conventie op de contactpagina, daar stond het als inline-stijl. */
.les p a,.ris-noot a,.tar-noot a{font-weight:700}
/* @gate raakdoel-24 — losstaande links minstens 24px hoog aanraakbaar */
.top-rechts a,.voet-rij .rechts a,.pl-voet small a,.les p a{
  display:inline-block;padding-block:.36rem;margin-block:-.36rem}
.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 contactgegevens staan in dezelfde tabelopmaak als de tarieven, maar het zijn
   geen bedragen: een adres of btw-nummer mag afbreken. Zonder deze regel liep de
   pagina op 360px 67 pixels buiten beeld. */
.eisen-tekst td:last-child,.eisen-tekst th{white-space:normal}
.eisen-tekst th{width:38%}
/* De keuzes in een formulier zijn <label>s en erfden daardoor de kapitalen-opmaak
   van .pf-vorm label — 'PROEFLES IN DE AUTOMAAT' in plaats van gewone zinnen.
   Stond tot 04-09 met .planner ervoor; het theorieformulier is geen planner en
   bleef dus in kapitalen staan (Sean zag "8 VIDEOLESSEN, 38 DEELTOETSEN").
   Nu op .pf-vorm: buiten de planner komt .pl-keuze alleen in dat formulier voor,
   dus dit repareert precies dat en verandert nergens anders iets. */
.pf-vorm .pl-keuze,.pf-vorm .pl-vink,.pf-vorm .pl-pil{font-size:inherit;font-weight:400;
  letter-spacing:normal;text-transform:none;color:inherit}
/* de twee kolommen zijn zelden even lang; bovenaan uitlijnen leest rustiger
   dan gecentreerd met een gat erboven en eronder */
.theo-grid{align-items:start}

/* ── praktijkexamen: twee kaarten links naast de zes stappen (24-08) ────
   De Meenemen-kaart alleen liet de linkerkolom voor tweederde leeg naast de
   lange stappenlijst; de tweede kaart (machtigen + gezondheidsverklaring
   afvinken) vult de kolom met de check die de bron zelf v&oacute;&oacute;r het examen
   voorschrijft. */
.pe-links{display:grid;gap:1.05rem;align-content:start}

/* ── de Bijrijder: chat rechtsonder, met volledig-scherm-stand (24-08) ──
   Alles wordt door chat.js in de pagina gezet; zonder JavaScript bestaat er
   dus geen dode knop. De kennisbank zit in chat.js en komt uit deze site. */
.br-start{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;
  gap:.55rem;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;color:#fff;
  padding:.8rem 1.2rem;border-radius:999px;
  background:linear-gradient(180deg,var(--blauw),var(--blauw-diep));
  box-shadow:0 18px 34px -14px rgba(7,31,53,.75), inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .2s ease, box-shadow .2s ease}
.br-start:hover{transform:translateY(-2px);
  box-shadow:0 24px 42px -16px rgba(7,31,53,.85), inset 0 1px 0 rgba(255,255,255,.24)}
.br-start svg{width:19px;height:19px;flex:none}
@media (max-width:640px){
  .br-start{padding:.95rem;border-radius:50%}
  .br-start span{display:none}
}

.br-scherm{position:fixed;inset:0;z-index:70;background:rgba(7,31,53,.62);
  backdrop-filter:blur(3px)}

/* padding:0 — het paneel is een <section> en zou anders de sectie-padding van de
   site erven (witte strook boven de kop, gemeten 24-08) */
.br-paneel{position:fixed;right:16px;bottom:86px;z-index:71;display:flex;flex-direction:column;padding:0;
  width:min(396px,calc(100vw - 24px));height:min(560px,calc(100vh - 200px));
  height:min(560px,calc(100dvh - 200px));
  background:#fff;border:1px solid var(--lijn);border-radius:18px;overflow:hidden;
  box-shadow:0 48px 90px -40px rgba(7,31,53,.85)}
.br-paneel[hidden]{display:none!important}
.br-vol .br-paneel{right:50%;bottom:50%;transform:translate(50%,50%);
  width:min(760px,calc(100vw - 28px));height:min(84vh,820px);height:min(84dvh,820px)}
@media (max-width:640px){
  .br-vol .br-paneel{right:0;bottom:0;transform:none;width:100vw;height:100vh;height:100dvh;
    border-radius:0;border:0}
}
html.br-slot{overflow:hidden}

.br-kop{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;color:#fff;flex:none;
  background:linear-gradient(160deg,#0A2340,#0E3C6E 70%)}
.br-avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;
  font-weight:800;font-size:19px;color:#fff;
  background:linear-gradient(165deg,var(--blauw),var(--blauw-diep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.br-wie{min-width:0;margin-right:auto;display:flex;flex-direction:column;gap:.06rem;line-height:1.25}
.br-wie b{font-size:15px}
.br-wie small{font-size:11.5px;color:rgba(255,255,255,.66)}
.br-kop button{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;
  cursor:pointer;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);
  color:#fff;transition:background .2s ease}
.br-kop button:hover{background:rgba(255,255,255,.22)}
.br-kop button:focus-visible{outline:2px solid #9CC9FF;outline-offset:2px}
.br-kop svg{width:16px;height:16px}

.br-berichten{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem;
  background:var(--grond);overscroll-behavior:contain}
.br-b{max-width:88%;padding:.62rem .85rem;border-radius:14px;font-size:14.5px;line-height:1.58}
.br-b p{margin:0}
.br-b p+p,.br-b ul+p,.br-b p+ul{margin-top:.5rem}
.br-bot{align-self:flex-start;background:#fff;border:1px solid var(--lijn);color:var(--inkt);
  border-bottom-left-radius:5px;box-shadow:0 10px 22px -18px rgba(8,42,78,.55)}
.br-ik{align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(180deg,var(--blauw),var(--blauw-diep));overflow-wrap:anywhere}
.br-bot a{color:var(--blauw-diep);font-weight:700}
.br-bot ul{margin:.4rem 0 0;padding-left:1.15rem}
.br-bot li{margin:.18rem 0}
.br-bot i{font-style:italic}
.br-vol .br-b{font-size:15.5px;max-width:66ch}
.br-vol .br-berichten{padding:1.3rem 1.4rem}

.br-typ i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;
  background:var(--zacht);opacity:.5;animation:br-tik 1s infinite}
.br-typ i:nth-child(2){animation-delay:.15s}
.br-typ i:nth-child(3){animation-delay:.3s;margin-right:0}
@keyframes br-tik{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:.9}}

.br-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.15rem 1rem .7rem;background:var(--grond);flex:none}
.br-chip{border:1px solid rgba(18,95,175,.4);background:#fff;color:var(--blauw-diep);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:.42rem .75rem;border-radius:99px;
  cursor:pointer;transition:background .18s ease,border-color .18s ease}
.br-chip:hover{background:#E3EFFA;border-color:var(--blauw)}

.br-invoer{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--lijn);background:#fff;flex:none}
.br-invoer input{flex:1;min-width:0;border:1.5px solid var(--lijn);border-radius:11px;
  padding:.62rem .85rem;font:inherit;font-size:15px;color:var(--inkt);outline:none;background:#fff}
.br-invoer input:focus{border-color:var(--blauw)}
.br-stuur{width:43px;height:43px;flex:none;border:0;border-radius:11px;display:grid;
  place-items:center;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--blauw),var(--blauw-diep));
  box-shadow:0 10px 20px -10px rgba(18,95,175,.8);transition:transform .18s ease}
.br-stuur:hover{transform:translateY(-1px)}
.br-stuur svg{width:17px;height:17px}

/* de knop "Ik heb eerst een vraag" in de proefles-sectie */
.br-open-vol{gap:.55rem;border:1px solid rgba(255,255,255,.5);cursor:pointer;font-family:inherit}
.br-open-vol svg{width:18px;height:18px;flex:none}
.br-open-vol:focus-visible{outline:2px solid #9CC9FF;outline-offset:2px}

@media print{.br-start,.br-paneel,.br-scherm{display:none!important}}

/* ── de algemene voorwaarden (/voorwaarden) — sober juridisch document ──
   Toegevoegd 28-08 (mail Joyce): de voorwaarden van hun oude site, met haar
   twee wijzigingen in artikel 11. Bewust kaal: alleen typografie, geen kaarten. */
/* Een wit vel voor de lange juridische teksten. Ze stonden als kale lap op de
   grond-kamer: de leegte-gate zakte op /voorwaarden naar 37% gevuld, en /privacy
   kwam niet boven de 62%. Het is bovendien de regel die dit stijlblad al hanteert
   — een grond-kamer draagt witte kaarten. Leest ook rustiger: de tekst heeft nu
   een rand waarbinnen hij staat. */
.av{max-width:840px;background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.5rem 1.9rem 1.8rem;box-shadow:0 30px 60px -42px rgba(8,42,78,.5)}
.av h2{font-size:20px;letter-spacing:-.02em;margin:2.3rem 0 .7rem;scroll-margin-top:110px}
.av h2:first-child{margin-top:.6rem}
@media (max-width:640px){.av{padding:1.1rem 1.05rem 1.25rem}}
.av p{margin:.55rem 0;font-size:15px;line-height:1.72;color:var(--zacht)}
.av p b{color:var(--inkt);font-weight:800;margin-right:.15rem}
.av ul{margin:.55rem 0 .9rem 1.25rem;padding:0;font-size:15px;line-height:1.72;color:var(--zacht)}
.av ul li{margin:.3rem 0}
.av .av-slot{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--lijn);font-size:13.5px}

/* de spoedpakket-kaart op /lesprijzen: geen prijs (op aanvraag bij de intake),
   dus in het prijs-slot een knop naar de spoedcursus-pagina */
.pak-ga{grid-column:2;grid-row:1/4;justify-self:end}
@media (max-width:640px){.pak-ga{grid-column:1;grid-row:auto;justify-self:start;margin-top:.55rem}}

/* de voetkolom "Op deze site" kreeg er twee links bij (spoedcursus + voorwaarden);
   in twee kolommen blijft de voetband compact (28-08) */
.vg-links{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem}
.vg-links a{display:block}

/* ── de spoed-kamer (home + /lessen), herbouw 28-08 na Seans afkeuring van de
   kale kaartenrij: links kop + stappen als lijst, rechts het navy anker in de
   los-kaart-vormentaal van /lesprijzen. Geen tweede vierkaartsrij naast
   de autorijles-kaarten. */
.spoed-tekst h2{margin-top:.2rem}
.spoed-tekst .les-regel{margin-top:.9rem}
.spoed-stappen{list-style:none;display:grid;gap:.9rem;margin:1.45rem 0 0;padding:0}
.spoed-stappen li{display:grid;grid-template-columns:34px 1fr;gap:.9rem;align-items:start;
  font-size:14.8px;line-height:1.62;color:var(--zacht)}
.spoed-stappen li b{color:var(--inkt)}
.spoed-stappen .les-teken{margin-top:.05rem}
.los-kaart .knop-glas{position:relative;margin-top:1.15rem}
#spoed .los-kaart{display:flex;flex-direction:column}
#spoed .los-kaart .knop-glas{margin-top:auto}

/* ── /lessen kamerritme (28-08, correctie Sean: "geen onderscheid tussen de
   secties door de doorlopende witte achtergrond"). Zelfde afwisseling als de
   voorpagina: grond → wit-met-hairlines → grond → wit → grond-met-tint → wit →
   donker (#proefles bestond al). De witte kamers dragen de kaarten die zelf
   een grond-vulling hebben (modules), de grond-kamers de witte kaarten. */
.kamer-wit{background:#fff;border-block:1px solid var(--lijn)}
#tweetodrive{background:#fff;border-block:1px solid var(--lijn)}
#angst{background:#fff;border-block:1px solid var(--lijn)}
#automaat{position:relative;background:
  radial-gradient(42% 50% at 0% 8%, rgba(18,95,175,.07), transparent 70%),
  radial-gradient(36% 46% at 100% 92%, rgba(18,161,80,.05), transparent 72%)}

/* schouw 28-08 (opdracht Sean: elke pagina langs drukte/ritme): naadkamers —
   het middenstuk van /theorie en het stappenplan van /spoedcursus krijgen wit
   met hairlines, zodat ook daar geen doorlopende lichte vlakte staat */

#stappen{background:#fff;border-block:1px solid var(--lijn)}

/* ── theorie: de drie manieren om het te kopen (01-09-2026) ────────────
   Feedback van Rob: hij verkoopt óók losse theorieboeken (€ 25) en een
   combipakket (online € 65 + boek € 25 = € 90). Drie kaarten in de
   bestaande .les-vormentaal, met de prijs als eigen regel. De prijsregel
   moet .les p verslaan (klasse + tag = hoger dan één klasse), vandaar de
   nakomeling-selector in plaats van !important. */
.les .les-prijs{margin:.1rem 0 .05rem;font-size:23px;font-weight:800;letter-spacing:-.03em;
  color:var(--inkt);line-height:1.15}
.les .les-prijs small{display:block;margin-top:.15rem;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;color:var(--zacht)}

/* het spoedpakket op /lesprijzen heeft sinds 01-09 een prijs (€ 3.207,50) én
   nog steeds zijn link: de prijs pakt de rechterkolom zoals bij de andere
   pakketten, de link zakt naar een eigen regel linksonder. .pak-ga (prijsloos)
   blijft bestaan voor kaarten zonder bedrag. */
.pak-link{grid-column:1;justify-self:start;margin-top:.75rem}

/* ── het inschrijfformulier van de spoedcursus (01-09-2026) ────────────
   Feedback van Rob: leerlingen moeten dit formulier ná de proefles kunnen
   UITPRINTEN of MAILEN, en zijn tekst moet letterlijk op de site staan.
   Eén blad doet alle drie: het leest op het scherm, het print als het
   papieren formulier (mét handtekeningregel) en het vult een mailto naar
   rob@rijschoolrob.nl. Geen server — net als de proefles-planner verstuurt
   de bezoeker zelf, dus er gaat niets weg zonder dat hij het gezien heeft.
   Het blad staat bewust in de vorm van het papier: label links, stippellijn
   rechts. Dan herkent Joyce op haar scherm hetzelfde vel als op papier. */
.blad{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.9rem 2rem 1.7rem;box-shadow:0 30px 60px -40px rgba(8,42,78,.55)}
.blad-kop{display:inline-block;margin:0 0 1.15rem;padding-bottom:.45rem;
  font-size:21px;letter-spacing:-.02em;border-bottom:2px solid var(--blauw)}
.blad-tekst p{margin:0 0 .8rem;font-size:14.2px;line-height:1.68;color:var(--zacht)}
.blad-tekst p:last-child{margin-bottom:0}
.blad-retour{margin-top:1.05rem!important;font-weight:700;color:var(--inkt)!important}
.blad-velden{margin-top:1.6rem;padding-top:1.4rem;border-top:1px dashed var(--lijn)}

/* label links, stippellijn rechts — precies de indeling van het papier */
.iv{display:grid;grid-template-columns:150px 1fr;align-items:end;gap:.9rem;margin:0 0 .95rem}
.iv:last-child{margin-bottom:0}
.iv label{padding-bottom:.35rem;font-size:14.5px;font-weight:700;color:var(--inkt)}
.iv input{width:100%;padding:.35rem .25rem;border:0;border-bottom:1.5px dotted rgba(14,23,38,.42);
  border-radius:0;background:transparent;font:inherit;font-size:15px;color:var(--inkt)}
.iv input::placeholder{color:rgba(76,88,107,.5)}
.iv input:focus{outline:0;border-bottom:1.5px solid var(--blauw);box-shadow:0 1px 0 var(--blauw)}
.blad-slot{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.7rem}
.blad-slot .iv{grid-template-columns:112px 1fr;margin:0}
.blad-handtekening{margin:1.7rem 0 0;padding-bottom:2.7rem;border-bottom:1.5px dotted rgba(14,23,38,.42)}
.blad-handtekening span{font-size:14.5px;font-weight:700;color:var(--inkt)}
.blad-handtekening small{display:block;margin-top:.3rem;font-size:12.5px;font-weight:400;
  color:var(--zacht)}
.iv-akkoord{display:grid;grid-template-columns:20px 1fr;gap:.75rem;align-items:start;
  margin-top:1.6rem;padding:.9rem 1.05rem;border:1px solid var(--lijn);border-radius:12px;
  background:var(--grond);font-size:13.8px;line-height:1.6;color:var(--zacht);cursor:pointer}
.iv-akkoord input{width:18px;height:18px;margin:.12rem 0 0;accent-color:var(--blauw)}
.iv-akkoord a{color:var(--blauw);font-weight:700}
.iv-fout{margin:.75rem 0 0;font-size:13.5px;font-weight:700;line-height:1.55;color:var(--rood-diep)}
.iv-klaar{margin:0 0 1.2rem;padding:1rem 1.1rem;border:1px solid rgba(18,161,80,.45);
  border-radius:12px;background:rgba(18,161,80,.1);font-size:14px;line-height:1.6;color:var(--inkt)}
.iv-klaar a{color:var(--blauw-diep);font-weight:700}
.iv-kopie{display:block;width:100%;min-height:170px;margin-top:.75rem;padding:.7rem .8rem;
  border:1px solid var(--lijn);border-radius:10px;background:#fff;font:inherit;font-size:13px;
  line-height:1.55;color:var(--inkt);resize:vertical}
.blad-doen{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.6rem}
.blad-doen small{flex:1 1 100%;font-size:12.5px;color:var(--zacht)}
.blad-doen small a{color:var(--blauw);font-weight:700}
.iv-zij-tekst{position:relative;margin:1.15rem 0 0;font-size:13.8px;line-height:1.62;
  color:rgba(255,255,255,.78)}
.iv-zij-tekst b{color:#fff}
/* De kaart nam de volle hoogte van het formulier over (tar-grid = stretch) en
   liet daardoor een groot leeg navy vlak achter. Nu loopt hij mee terwijl je
   invult: de bedragen blijven in beeld en er staat nergens dood vlak. */
#inschrijven .los-kaart{align-self:start;position:sticky;top:104px}
/* De kaart staat vóór het formulier in de HTML (zie spoedcursus.html: de
   shortcode mag niet het eerste blok in zijn groep zijn, anders wist de
   blokeditor bij een hersave de witruimte ervoor). Op desktop zet grid-column
   hem weer rechts. .tar-grid stapelt op 1060px, niet op 940 — daar dus ook de
   sticky uit, anders plakt de kaart in de gestapelde weergave. */
/* min-width:0 — een rasterkind mag standaard niet kleiner worden dan zijn
   min-content, en de feitentabel in de kaart heeft door de nowrap-bedragen een
   min-content van ruim 390px. Daardoor duwde deze ene sectie de hele pagina op
   507px open (gemeten 02-09: de mobiele overflow-gate was rood op alleen
   /spoedcursus, en het was niet de vaste balk maar deze kaart). */
#inschrijven .tar-grid>*{min-width:0}
#inschrijven .tar-grid>.blad{grid-column:1;grid-row:1}
#inschrijven .tar-grid>.iv-zij{grid-column:2;grid-row:1}
@media (max-width:1060px){
  /* relative, NIET static: .los-kaart::before is de sier-gloed en staat absoluut.
     Met static verliest de kaart haar rol als containing block, valt die gloed
     buiten de overflow:hidden van de kaart en duwde hij de pagina op 507px open
     — de mobiele overflow-gate stond daardoor rood op alleen /spoedcursus. */
  #inschrijven .los-kaart{position:relative;top:auto}
  #inschrijven .tar-grid>.blad,#inschrijven .tar-grid>.iv-zij{grid-column:1;grid-row:auto}
}

@media (max-width:640px){
  .blad{padding:1.35rem 1.2rem 1.25rem}
  .iv,.blad-slot .iv{grid-template-columns:1fr;align-items:stretch;gap:.15rem}
  .iv label{padding-bottom:0}
  .blad-slot{grid-template-columns:1fr;gap:1rem}
}

/* ── de afdruk (01-09-2026) ────────────────────────────────────────────
   Dit is de route die vader Rob écht wil: het vel op papier, met de hand
   ingevuld en ondertekend. Alles buiten het blad valt weg, zodat er één
   schoon formulier uit de printer komt — inclusief de voorwaardentekst, want
   dát is waar de cursist zijn handtekening onder zet.
   Bewust op .pg-blad gehangen en niet op :has(#inschrijven): een print-
   stylesheet die per ongeluk op élke pagina main>* verbergt, print een leeg
   vel — en géén enkele gate meet de afdruk. De klasse staat op <body> van
   site/spoedcursus.html en zet functions.php (body_class) op de WP-kant. */
@media print{
  .pg-blad{background:#fff}
  .pg-blad .overslaan,.pg-blad .topstrook,.pg-blad .kop,.pg-blad .voet-groot,
  .pg-blad .voet{display:none!important}
  .pg-blad main>*{display:none!important}
  .pg-blad main>#inschrijven{display:block!important}
  .pg-blad #inschrijven{padding:0!important;background:#fff!important;border:0!important}
  .pg-blad #inschrijven .maat{width:100%!important;max-width:none!important;padding:0!important}
  .pg-blad #inschrijven .sectie-kop,.pg-blad .iv-zij,.pg-blad .blad-doen,
  .pg-blad .iv-akkoord,.pg-blad .pl-nojs,.pg-blad .iv-fout,.pg-blad .iv-klaar,
  .pg-blad .blad-handtekening small,.pg-blad .iv-los{display:none!important}
  .pg-blad #inschrijven .tar-grid{display:block!important}
  .pg-blad .blad{padding:0!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;opacity:1!important;transform:none!important}
  .pg-blad .blad-tekst p{color:#000!important;font-size:11.6pt;line-height:1.5}
  .pg-blad .blad-kop{font-size:17pt}
  .pg-blad .iv input{border-bottom:1px dotted #000!important;color:#000!important}
  .pg-blad .iv label,.pg-blad .blad-handtekening span{color:#000!important}
  .pg-blad .blad-handtekening{border-bottom:1px dotted #000!important}
  /* de velden en de handtekening horen bij elkaar op één vel */
  .pg-blad .blad-velden{break-inside:avoid;page-break-inside:avoid}
  .pg-blad .blad-slot,.pg-blad .blad-handtekening{break-inside:avoid;page-break-inside:avoid}
  @page{margin:14mm}
}

/* ── kamerritme sluitend (02-09-2026, correctie Sean) ──────────────────
   qa/kamer-check.mjs mat zes sectiegrenzen waar twee buren dezelfde grond
   hadden — daar liep de pagina als één lange lap door. Deze vijf secties
   wisselen nu mee in het ritme dat de rest van de site al had (grond → wit →
   grond → tint → donker). De zesde grens was hero → belofte; die is hierboven
   opgelost door de band op een helderder blauw te laten beginnen. */
/* #spoed staat op /lessen al op kamer-wit; op de voorpagina stond hij op grond,
   pal onder de getinte #pakketten. Eén regel dekt beide pagina's. */
#spoed{background:#fff;border-block:1px solid var(--lijn)}
#praktijk{background:#fff;border-block:1px solid var(--lijn)}

#rekenen{background:#fff;border-block:1px solid var(--lijn)}

/* ── de snelbalk (02-09-2026) ──────────────────────────────────────────
   Opdracht Sean: "doe aanpassingen in de site zodat hij beter converteert".
   Rob krijgt zijn leerlingen via de telefoon en WhatsApp; op een telefoon
   stond dat nummer alleen bovenaan (topstrook) en onderaan (voet). Wie
   halverwege de pagina besluit te bellen moest eerst terugscrollen. Deze balk
   staat altijd onderin: bellen · WhatsApp · de proefles als rode hoofdactie.

   Alleen op telefoonformaat — op desktop staat het nummer al in de topstrook
   én staat de proefles-knop in de kopbalk, en zou een vaste balk alleen ruimte
   opeten. Werkt zonder JavaScript: het zijn drie gewone links.

   De vormentaal komt uit deze site zelf: de navy band met de rode actiekleur. */
.snelbalk{display:none}
@media (max-width:740px){
  .snelbalk{position:fixed;left:0;right:0;bottom:0;z-index:72;
    display:grid;grid-template-columns:auto auto 1fr;gap:.5rem;align-items:stretch;
    padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(10,35,64,.94),rgba(8,33,60,.98));
    border-top:1px solid rgba(255,255,255,.16);
    box-shadow:0 -14px 34px -18px rgba(4,20,38,.9)}
  /* GEEN backdrop-filter op deze balk. Lighthouse meet in telefoon-stand, dus deze
     balk staat in élke meting; een vervaging op een vást element dwingt bij elke
     verf een backdrop-momentopname af. De band is met .94-.98 dekking toch al
     bijna dicht — je zag de vervaging niet, je betaalde hem alleen. Zelfde les
     als eerder bij de kaarten van de planner. */
  .snelbalk a{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    text-decoration:none;font-weight:700;font-size:14px;letter-spacing:-.01em;
    border-radius:12px;padding:.72rem .82rem;min-height:44px}
  .sb-glas{color:#fff;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.12)}
  .sb-glas:active{background:rgba(255,255,255,.2)}
  .sb-glas svg{flex:none}
  .sb-actie{color:#fff;background:linear-gradient(180deg,var(--rood),var(--rood-diep));
    box-shadow:0 10px 22px -12px rgba(216,35,42,.95), inset 0 1px 0 rgba(255,255,255,.26)}
  /* de balk mag niets afdekken: de voet krijgt er ruimte onder bij */
  body{padding-bottom:74px}
  /* chatknop en chatvenster schuiven mee omhoog, anders staan ze óp de balk */
  .br-start{bottom:calc(84px + env(safe-area-inset-bottom))}
  .br-paneel{bottom:calc(150px + env(safe-area-inset-bottom));
    height:min(520px,calc(100dvh - 210px))}
  .br-vol .br-paneel{bottom:0;height:100dvh}
}
@media (max-width:420px){
  .snelbalk{gap:.4rem;padding-inline:.5rem}
  .snelbalk a{font-size:13px;padding:.7rem .6rem}
  .sb-glas span{display:none}
  .sb-glas{padding-inline:.85rem}
}
/* op papier hoort geen actiebalk */
@media print{.snelbalk{display:none!important}}

/* ── WITTE KAMER, WITTE KAART (02-09-2026, tweede correctieronde) ──────
   Dit stijlblad benoemt de regel al bij het kamerritme: "de witte kamers dragen
   de kaarten die zelf een grond-vulling hebben, de grond-kamers de witte
   kaarten." Bij het sluitend maken van het ritme is die regel gesneuveld: in de
   witte kamers stonden .les-kaarten die zélf wit zijn, en dan houdt een kaart
   alleen een lijntje van 1px over. Precies het uitrafelen waar Sean voor
   waarschuwde. Ook #opbouw en #stappen hadden dit al langer.
   Vulling volgt dus de kamer: wit erin → grond eromheen, en andersom. */
#ris .les,#theorie .les,.kamer-wit .les,#tweetodrive .les,#angst .les,
#stappen .les,#spoed .les,#praktijk .les,#rekenen .les,
#ris .theo-pak,#theorie .theo-pak,.kamer-wit .theo-pak,#tweetodrive .theo-pak,#angst .theo-pak,
#stappen .theo-pak,#spoed .theo-pak,#praktijk .theo-pak,#rekenen .theo-pak{
  background:var(--grond)}

/* ── de chat mag niet onder de snelbalk verdwijnen ─────────────────────
   De snelbalk staat op z-index 72, het chatvenster stond op 71: in de volle
   stand (de "groter"-knop) lag de balk óver het venster. Het venster en zijn
   scherm gaan er nu boven; op desktop bestaat de balk niet, dus dit kan gewoon
   overal gelden. */
.br-scherm{z-index:78}
.br-paneel{z-index:79}

/* ── NOOIT ANIMEREN: formulier, prijzen en knoppen (02-09-2026) ────────
   Uit het feedbackdocument van de SEA-specialist van een andere klant, waar
   Sean naar verwees: "nooit animeren: formulier, pakketten, cijferbalk,
   knoppen" en "animatieduur max 300ms". De redenering is conversie, niet
   smaak: precies de elementen waarop iemand wil klikken of die hij wil
   vergelijken, moeten er meteen staan — niet een halve seconde later
   invliegen. Het scheelt bovendien opmaakarbeid bij het laden.

   De reveal blijft op koppen, tekstblokken en beeld. */
/* de drie theorie-prijskaarten horen bij dezelfde regel (prijzen animeren niet)
   en waren bovendien de enige nieuwe .op-blokken die axe halverwege de overgang
   ving: kaart op 50% dekking gaf contrast 3,74 in plaats van de werkelijke 12,6. */
#pakket .les-rij-3>.les.op,
.pak.op,.los-kaart.op,.reeks.op,.theo-pak.op,.pf-vorm.op,.blad.op,
.knop.op,.hero-doen.op,.pak-prijs.op,.los-tabel.op,.eisen.op,
.iv-zij.op,.feitgrid.op,.theo-cijfers.op{
  opacity:1!important;transform:none!important;transition:none!important}
/* een reveal die langer duurt dan ~300ms voelt als traagheid in plaats van rust */
.op{transition-duration:.3s}

/* ── de tarievenkaart rekt niet meer mee (02-09, correctie Sean) ───────
   .tar-grid staat op align-items:stretch, dus de donkere kaart nam de volle
   hoogte van de pakketten-kolom over en hield daaronder een leeg navy vlak
   over — zichtbaar op de voorpagina én op /lesprijzen. Nu neemt hij zijn eigen
   hoogte en loopt hij mee terwijl je door de pakketten scrollt: de tarieven
   blijven in beeld en er staat nergens dood vlak.
   relative en niet static in de gestapelde weergave: de kaart heeft een
   absolute sier-gloed die anders buiten haar overflow:hidden valt. */
#pakketten .los-kaart{align-self:start;position:sticky;top:104px}
@media (max-width:1060px){#pakketten .los-kaart{position:relative;top:auto}}
/* de terugbetaalregel staat nu als eigen band onder het raster */
.pak-voordeel{margin-top:1.3rem}

/* ── de keuzegroep van het theorieformulier (02-09-2026) ───────────────
   Het theorieformulier begint met een keuze uit drie pakketten; de rest van het
   blad is identiek aan dat van de spoedcursus. Op de afdruk blijven de rondjes
   staan, zodat je er met de hand een kunt aankruisen. */
.blad-keuze{margin:1.5rem 0 0;padding:0;border:0}
.blad-keuze legend{padding:0;margin-bottom:.6rem;font-size:14.5px;font-weight:700;color:var(--inkt)}
.iv-keuze{display:grid;grid-template-columns:20px 1fr;gap:.7rem;align-items:start;
  margin-bottom:.5rem;padding:.7rem .9rem;border:1px solid var(--lijn);border-radius:11px;
  background:var(--grond);cursor:pointer}
.iv-keuze:last-child{margin-bottom:0}
.iv-keuze input{width:18px;height:18px;margin:.12rem 0 0;accent-color:var(--blauw)}
.iv-keuze b{display:block;font-size:14.5px;color:var(--inkt)}
.iv-keuze small{display:block;margin-top:.1rem;font-size:12.8px;line-height:1.5;color:var(--zacht)}
.iv-los{font-weight:400;text-transform:none;letter-spacing:0;color:var(--zacht)}

/* twee bladen op de site betekent dat de afdruk-haak een algemene naam heeft
   (.pg-blad); elke pagina met een blad zet die klasse op <body>. */
.pg-theorie,.pg-spoed{}

/* ── het dossier in de hero: alleen op laptop (02-09-2026, besluit Sean) ──
   Op een telefoon stond op élke subpagina eerst een kaart met drie feiten en
   een wegwijzer voordat de inhoud begon. Eerst compact gemaakt, maar Sean:
   "dan is het even nutteloos — verberg het alleen op mobiel en laat het wat
   het was op laptop". Klopt: op een telefoon scrol je met je duim langs de
   secties, dus een inhoudsopgave verdient die ruimte daar niet.
   Nagemeten vóór het weghalen: elke feit- en notitieregel uit dit blok komt
   ook ergens anders op diezelfde pagina terug, dus er gaat geen informatie
   verloren. Op laptop blijft het ongewijzigd — daar draagt het de tweede
   kolom van de hero, die anders leeg zou staan. */
@media (max-width:740px){
  .hero-beeld{display:none}
}

/* ── de rekenhulp (02-09-2026) ─────────────────────────────────────────
   Staat tussen de methode (#ris, wit) en de prijzen (#pakketten, grond), dus
   moet van bééide buren verschillen: vandaar donker. Dat is bovendien de plek
   waar deze site zijn interactieve dingen zet — #plannen en #tips zijn ook
   donker — en het maakt van de rekenhulp een eigen kamer in plaats van een
   blokje tussen twee prijslijsten. */
#rekenhulp{background:linear-gradient(158deg,#0A2340,#0E3C6E 72%);color:#fff;
  position:relative;overflow:hidden}
#rekenhulp::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(44% 62% at 100% 0%, rgba(18,95,175,.42), transparent 70%),
   radial-gradient(34% 48% at 0% 100%, rgba(18,161,80,.12), transparent 72%)}
#rekenhulp .pf-grid{align-items:start;position:relative;z-index:1}
#rekenhulp h2 em{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:#FFD9A0;-webkit-text-fill-color:#FFD9A0}
#rekenhulp .ris-noot{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-left:4px solid #FFD9A0;color:rgba(255,255,255,.82)}
#rekenhulp .ris-noot b{color:#fff}
#rekenhulp .ris-noot a{color:#BBD8FF;font-weight:700}

/* de kaart zelf: wit, zodat de bedragen leesbaar en 'af' staan */
.rekenkaart{background:#fff;color:var(--inkt);border-radius:18px;
  padding:1.45rem 1.5rem 1.4rem;box-shadow:0 40px 80px -44px rgba(4,20,38,.95)}
.rekenkaart .pak-label{color:var(--blauw)}

.rk-schuif{margin-top:.9rem;display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:.2rem .8rem}
.rk-schuif label{font-size:13.5px;font-weight:700;color:var(--zacht)}
.rk-getal{grid-column:2;grid-row:1/3;font-weight:800;font-size:38px;letter-spacing:-.04em;
  color:var(--blauw-diep);line-height:1}
.rk-schuif input[type=range]{grid-column:1;width:100%;margin:.5rem 0 0;accent-color:var(--blauw);
  min-height:24px}
.rk-ijk{grid-column:1/-1;margin:.15rem 0 0;font-size:12px;color:var(--zacht)}
.rk-ijk b{color:var(--inkt)}

/* ── vier stappen, één zichtbaar ───────────────────────────────────────
   De hele kaart bleef anders een lange lap: schuif + drie keuzegroepen + de
   hele uitslag onder elkaar. Nu drie korte vragen en dan de uitkomst. De balk
   en het gedrag komen van de proefles-planner op deze site. */
.rk-balk{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;
  margin:.9rem 0 0;padding:0}
.rk-balk li{display:grid;justify-items:center;gap:.2rem;font-size:11px;color:var(--zacht);
  padding-top:.35rem;border-top:2px solid var(--lijn)}
.rk-balk li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--grond);border:1px solid var(--lijn);font-size:11.5px;color:var(--zacht)}
.rk-balk li.rk-nu{border-top-color:var(--blauw);color:var(--inkt)}
.rk-balk li.rk-nu b{background:var(--blauw);border-color:var(--blauw);color:#fff}
.rk-balk li.rk-af{border-top-color:var(--groen)}
.rk-balk li.rk-af b{background:var(--groen);border-color:var(--groen);color:#fff}

.rk-stap{margin:1.1rem 0 0;padding:0;border:0;min-height:206px}
.rk-stap legend{padding:0;margin-bottom:.7rem;font-size:16px;font-weight:800;
  letter-spacing:-.01em;color:var(--inkt)}
.rk-stap[hidden]{display:none!important}
.rk-hint{margin:.85rem 0 0;font-size:12.8px;line-height:1.55;color:var(--zacht)}

.rk-keuzes{display:grid;gap:.4rem}
.rk-keuze input,.rk-vink input{position:absolute;opacity:0;width:1px;height:1px}
.rk-keuze span{display:block;padding:.6rem .8rem;border-radius:11px;border:1px solid var(--lijn);
  background:var(--grond);cursor:pointer}
.rk-keuze b{display:block;font-size:14.2px;color:var(--inkt)}
.rk-keuze small{display:block;margin-top:.1rem;font-size:12.5px;line-height:1.45;color:var(--zacht)}
.rk-keuze input:checked + span{border-color:var(--blauw);background:#EAF2FB;
  box-shadow:inset 0 0 0 1px var(--blauw)}
.rk-keuze input:focus-visible + span{outline:2px solid var(--blauw);outline-offset:2px}

.rk-voet{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.15rem;
  padding-top:.95rem;border-top:1px dashed var(--lijn)}
.rk-voet small{flex:1 1 100%;font-size:12px;color:var(--zacht)}
.rk-vink{display:block;margin-bottom:.35rem}
.rk-vink span{display:flex;align-items:center;gap:.55rem;padding:.42rem .7rem;border-radius:10px;
  border:1px solid var(--lijn);background:var(--grond);font-size:13.5px;color:var(--zacht);
  cursor:pointer}
.rk-vink span::before{content:'';flex:none;width:16px;height:16px;border-radius:4px;
  border:1.5px solid rgba(14,23,38,.3);background:#fff}
.rk-vink input:checked + span{color:var(--inkt)}
.rk-vink input:checked + span::before{background:var(--blauw);border-color:var(--blauw);
  box-shadow:inset 0 0 0 2px #fff}
.rk-vink input:focus-visible + span{outline:2px solid var(--blauw);outline-offset:2px}

.rk-uit{margin-top:1.2rem;padding-top:1.05rem;border-top:1px dashed var(--lijn)}
.rk-totaal-regel{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem;margin:0}
.rk-totaal-regel>span{font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blauw)}
.rk-totaal{font-size:31px;font-weight:800;letter-spacing:-.03em;text-transform:none;
  color:var(--inkt)}
.rk-regels{margin:.75rem 0 0;display:grid;grid-template-columns:1fr auto;gap:.3rem .9rem;
  font-size:13.8px}
.rk-regels dt{color:var(--zacht)}
.rk-regels dd{margin:0;text-align:right;font-weight:700;color:var(--inkt);white-space:nowrap}
.rk-advies{margin:.9rem 0 0;padding:.7rem .85rem;border-radius:10px;background:rgba(18,161,80,.1);
  border:1px solid rgba(18,161,80,.4);font-size:13.5px;line-height:1.55;color:var(--inkt)}
#rekenhulp .hero-doen .knop-glas{color:#fff;border-color:rgba(255,255,255,.5)}

@media (max-width:940px){
  .rekenkaart{padding:1.2rem 1.15rem 1.25rem}
  .rk-getal{font-size:32px}
}

/* de kaart is korter geworden; de uitslag heeft geen eigen bovenlijn meer nodig */
.rk-stap .rk-uit{margin-top:0;padding-top:0;border-top:0}

/* ── de rekenhulp op de telefoon (02-09) ───────────────────────────────
   Op 390px stapelt de uitlegkolom bóven de kaart: 616px lezen voordat je bij
   het ding zelf bent. De drie opsommingspunten staan alle drie ook ín de
   rekenhulp — "42 = landelijk gemiddelde" bij de schuif, "Rijlessen van 60
   minuten" als label, de terugbetaalregel in de uitslag — dus daar gaat niets
   verloren. De bronvermelding blijft wél staan: die hoort bij het getal. */
@media (max-width:940px){
  #rekenhulp .pf-punten{display:none}
}

/* ── lesprijzen-hero: het dossier zonder inline-plakwerk ────────────────
   De terugbetaal-alinea stond per ongeluk als DERDE kind in het tweekoloms
   .hero-grid.hero-duo; die pakte de rechterkolom en duwde dit dossier naar
   rij 2 links, midden in de donkere hero (gemeld 03-09). De alinea is weg —
   de aside eronder zegt hetzelfde, uitgebreider. Wat aan style-attributen
   aan het dossier hing, staat nu hier. */
.dossier-kort{padding-bottom:1rem}
.dossier-kort .feitgrid-slot{border-bottom:0;padding-bottom:.2rem}
.dossier-noot{margin:.9rem .35rem .2rem;font-size:13.5px;line-height:1.6;color:var(--zacht)}

/* ── kop links, lijst rechts ────────────────────────────────────────────
   Gevraagd 03-09 voor de drie examenonderdelen op /theorie: staand in plaats
   van liggend, met de titel ernaast in plaats van erboven. De verhouding is
   die van .sectie-kop en .tar-grid, zodat het rooster van de site niet twee
   maten kent. */
.zij-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.6rem;align-items:start}
.zij-kop .inleiding{margin-top:.85rem}
.zij-lijst{display:grid;gap:.8rem}
/* het cijfer naast de tekst: staand naast elkaar wordt elke kaart anders hoog */
.les-zij{flex-direction:row;align-items:flex-start;gap:.85rem}
.les-zij > div{display:grid;gap:.35rem}
.les-zij .les-teken{flex:0 0 auto}
@media (max-width:900px){
  .zij-grid{grid-template-columns:1fr;gap:1.5rem}
}

/* ── drie pakketten naast elkaar, met een vinkjeslijst ──────────────────
   Gevraagd 03-09. .pak is van huis uit een LIGGENDE kaart (tekst links, prijs
   rechts in kolom 2). Staand naast elkaar moet dat één kolom worden, met de
   prijs onder de kop; .pak-prijs moet daarvoor uit grid-row 1/4 los. */
.pakketten-3{grid-template-columns:repeat(3,1fr)}
.pakketten-3 .pak{grid-template-columns:1fr;align-items:start;
  gap:.15rem;padding:1.3rem 1.35rem 1.4rem}
.pakketten-3 .pak-prijs{grid-column:1;grid-row:auto;text-align:left;
  margin:.35rem 0 0;font-size:27px}
.pakketten-3 .pak-prijs small{display:block;margin-top:.1rem;font-size:11.5px;
  font-weight:600;letter-spacing:.02em;color:var(--zacht)}

/* het vinkje is een rooster-item, niet een teken vóór de tekst: daarom staat de
   regel zelf in een <span>. Een blote tekstknoop wordt anders het derde
   rooster-item en valt op een eigen regel (les 02-09, .pf-punten). */
.pak-lijst{list-style:none;margin:.9rem 0 0;padding:.85rem 0 0;display:grid;gap:.45rem;
  border-top:1px dashed var(--lijn)}
.pak-lijst li{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
  font-size:13px;line-height:1.5;color:var(--zacht)}
.pak-lijst li::before{content:"\2713";color:var(--groen);font-weight:800}

/* het spoedpakket over de volle rij: andere prijsopbouw, eigen pagina, en zo
   leest het als een bewuste vierde kaart in plaats van een weesje */
.pakketten-3 .pak-breed{grid-column:1/-1;grid-template-columns:1fr auto;
  align-items:center;gap:.2rem 1.4rem}
.pakketten-3 .pak-breed .pak-prijs{grid-column:2;grid-row:1/4;text-align:right;
  margin:0;font-size:29px}

.reeksen-3{grid-template-columns:repeat(3,1fr)}

@media (max-width:1000px){
  .pakketten-3,.reeksen-3{grid-template-columns:1fr 1fr}
  .pakketten-3 .pak-breed{grid-column:1/-1}
}
@media (max-width:680px){
  .pakketten-3,.reeksen-3{grid-template-columns:1fr}
  .pakketten-3 .pak-breed{grid-template-columns:1fr}
  .pakketten-3 .pak-breed .pak-prijs{grid-column:1;grid-row:auto;text-align:left;margin:.35rem 0 0}
}

/* ── de theorie-aanvraag als donkere kamer ──────────────────────────────
   Zelfde recept als #rekenhulp en #plannen. Geeft de pagina meteen een
   duidelijke afsluiting en het onderscheid tussen secties dat gevraagd is. */
.pg-theorie #inschrijven{background:linear-gradient(158deg,#0A2340,#0E3C6E 72%);color:#fff;
  position:relative;overflow:hidden}
.pg-theorie #inschrijven::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(44% 62% at 100% 0%, rgba(18,95,175,.42), transparent 70%),
   radial-gradient(34% 48% at 0% 100%, rgba(18,161,80,.12), transparent 72%)}
.pg-theorie #inschrijven .maat{position:relative;z-index:1}
.pg-theorie #inschrijven .overline{color:#C7DEFF}
.pg-theorie #inschrijven h2 em{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:#FFD9A0;-webkit-text-fill-color:#FFD9A0}
.pg-theorie #inschrijven .inleiding{color:rgba(255,255,255,.82)}
/* Beide legends in dit formulier staan sinds 04-09 op .vw: onzichtbaar voor het
   oog, wel voor een schermlezer. De zichtbare versie herhaalde alleen de h2
   ernaast ("Welk pakket wil je hebben?") en had exact de opmaak van een
   veldlabel, dus er was geen hierarchie. Deze regel is daarmee dood. */

.pg-theorie #inschrijven .pf-grid{align-items:start}
/* lucht tussen de keuzes en de gegevens: ze plakten aan elkaar */
.pl-stap-2{margin-top:1.15rem}

/* ══ DE FORMULIEREN ZIJN WITTE KAARTEN ═══════════════════════════════════
   Zie de kop van deze wijziging: een glasplaat op een donkere sectie valt niet
   op. Alles hieronder keert .pf-vorm en zijn onderdelen om naar de lichte
   palet-waarden van .rekenkaart. Eén blok, dus in één keer terug te draaien. */
.pf-vorm{background:#fff;color:var(--inkt);border:0;
  box-shadow:0 40px 80px -44px rgba(4,20,38,.95)}
.pf-vorm label{color:var(--blauw)}
.pf-vorm input,.pf-vorm select,.pf-vorm textarea{background:var(--grond);
  border:1px solid var(--lijn);color:var(--inkt)}
.pf-vorm input:focus,.pf-vorm select:focus,.pf-vorm textarea:focus{border-color:var(--blauw)}
.pf-vorm select{background-image:
  linear-gradient(45deg,transparent 50%,var(--inkt) 50%),
  linear-gradient(135deg,var(--inkt) 50%,transparent 50%)}
.pf-vorm legend{color:var(--blauw)}

/* de stappenbalk van de planner */
.pl-balk{border-bottom:1px solid var(--lijn)}
.pl-balk li{color:var(--zacht)}
.pl-balk b{background:var(--grond);border:1px solid var(--lijn);color:var(--zacht)}
.pl-balk .pl-nu{color:var(--inkt)}
.pl-balk .pl-nu b{background:var(--blauw);border-color:var(--blauw);color:#fff;
  box-shadow:0 8px 18px -10px rgba(18,95,175,.7)}
.pl-balk .pl-af b{background:var(--groen);border-color:var(--groen);color:#fff}

/* keuzevakken, vinkjes en pillen */
.pl-vak{background:var(--grond);border:1px solid var(--lijn)}
.pl-vak b{color:var(--inkt)}
.pl-vak small{color:var(--zacht)}
.pl-keuze:hover .pl-vak{background:#E3EDF8}
.pl-keuze input:checked + .pl-vak{border-color:var(--blauw);background:#EAF2FB;
  box-shadow:inset 0 0 0 1px var(--blauw)}
.pl-keuze input:focus-visible + .pl-vak{outline:2px solid var(--blauw)}
.pl-vink span{background:var(--grond);border:1px solid var(--lijn);color:var(--inkt)}
.pl-vink input:checked + span{border-color:var(--blauw);background:#EAF2FB}
.pl-vink input:focus-visible + span{outline:2px solid var(--blauw)}
.pl-pil span{background:var(--grond);border:1px solid var(--lijn);color:var(--zacht)}
.pl-pil input:checked + span{border-color:var(--blauw);background:#EAF2FB;color:var(--inkt)}
.pl-pil input:focus-visible + span{outline:2px solid var(--blauw)}

/* tekstjes */
.pl-vraag{color:var(--blauw)}
.pl-vraag span{color:var(--zacht)}
.pl-los{color:var(--zacht)}
.pl-overzicht dt{color:var(--blauw)}
.pl-overzicht dd{color:var(--inkt)}
.pl-slot{color:var(--zacht)}
.pl-tip{color:var(--zacht)}
/* de foutregel moet op wit leesbaar zijn; --rood haalt ruim 4,5:1 op wit */
.pl-fout{color:var(--rood-diep)}

/* voet en knoppen */
.pl-voet{border-top:1px solid var(--lijn)}
.pl-voet small{color:var(--zacht)}
.pl-voet small a{color:var(--blauw);font-weight:700}
.pl-voet .knop-glas{border:1px solid var(--lijn);background:#fff;color:var(--inkt)}
.pl-voet .knop-glas:hover{background:var(--grond)}
.pl-voet .knop-actie{background:linear-gradient(180deg,var(--rood),var(--rood-diep));color:#fff;
  box-shadow:0 16px 30px -16px rgba(200,30,39,.65)}

/* de bevestigingsregel na versturen */
.pl-klaar b{color:var(--inkt)}
.pl-klaar p{color:var(--zacht)}
.pl-klaar a{color:var(--blauw)}
html:not(.js) .pl-nojs{background:#EAF2FB;border:1px solid var(--blauw);color:var(--inkt)}
html:not(.js) .pl-nojs a{color:var(--blauw)}
.pl-nojs{color:var(--zacht)}


.eisen-noot{margin:.9rem 0 0;font-size:13.5px;color:var(--zacht)}

/* ── de drie kaarten écht uitlijnen ─────────────────────────────────────
   Zie de commit-tekst voor de meting. Kern: het rooster rekt de kaarten tot
   gelijke hoogte en verdeelde die restruimte OVER de rijen, waardoor de h3 per
   kaart 13px verschoof. De rest hoort onderaan. */
.pakketten-3 .pak{align-content:start}

/* de noot achter de prijs in plaats van eronder: scheelt een regel per kaart */
.pakketten-3 .pak-prijs{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.pakketten-3 .pak-prijs small{display:inline;margin:0;font-size:12.5px;font-weight:600;
  letter-spacing:.01em;color:var(--zacht)}
.pakketten-3 .pak-prijs small::before{content:'· '}

/* de vinkjeslijst tegen de onderkant, zodat de kaarten als één rij lezen */
.pakketten-3 .pak-lijst{margin-top:auto}

/* Kan de browser subgrid, dan blijven label, kop, prijs en lijst óók uitgelijnd
   als een kop over twee regels valt. Zo niet, dan geldt het bovenstaande. */
@supports (grid-template-rows: subgrid) {
  .pakketten-3{grid-template-rows:auto auto auto auto}
  .pakketten-3 .pak{grid-row:span 4;grid-template-rows:subgrid;align-content:stretch}
  .pakketten-3 .pak-breed{grid-row:span 4}
  .pakketten-3 .pak-lijst{margin-top:0}
}

/* ── de generaties-tijdlijn op zijn nieuwe plek ─────────────────────────
   Stond in de hero op de foto (glas op donker); staat nu in #tips, bij de kop
   "Vader en dochter, één rijschool" waar het verhaal hoort. Daar is de kamer
   licht, dus wordt het een gewone witte kaart met lijnwerk. */
.generaties-tips{margin:0 0 1.35rem;background:#fff;border:1px solid var(--lijn);
  border-radius:16px;padding:1.05rem 1.2rem 1.15rem;
  box-shadow:0 18px 38px -32px rgba(8,42,78,.55)}
.generaties-tips .gen-kop b{color:var(--inkt)}
.generaties-tips .gen-kop span{color:var(--zacht)}
.generaties-tips .gen b{color:var(--inkt)}
.generaties-tips .gen span{color:var(--zacht)}
.generaties-tips .gen-baan::before{background:var(--lijn)}

/* De foto hangt absoluut aan de RECHTERRAND van haar kolom. In de smalle
   hero-band viel dat naast Joyce; in de brede #tips-sectie schoof hij los naar
   de rand. Hier vastzetten naast de stip in het midden van de kolom. */
.generaties-tips .gen-foto{right:auto;left:50%;margin-left:26px;top:-.8rem}

/* De hero was 787px toen de generaties-band er nog in stond en zakte naar 605px
   toen die eruit ging (gemeten 03-09 op 1440 en 1900px). Sean: "nu is hij korter
   houd het wel even lang". De hoogte hier als ONDERGRENS, niet als vaste maat:
   groeit de tekst bij een smaller venster, dan groeit de hero mee. De extra
   ruimte laat meer van de lesauto zien — het wiel werd eerst afgesneden.
   Alleen op desktop; onder 900px bepaalt de inhoud de hoogte zoals eerst. */
/* Alleen de hero MET foto (de homepage) houdt deze ondergrens. Zonder deze
   afbakening kreeg ook de hero van /lessen 787px, terwijl daar een kleine kaart
   staat — dat gaf een gat van honderden pixels. */
@media (min-width:900px){ .hero-groot{min-height:787px} }

/* ── /lessen: één donkere band tegen het samenblenden ───────────────────
   Zie de commit-tekst: drie secties op deze pagina droegen dezelfde
   .les-kaartenrij en de kamers wisselden alleen tussen grond en wit. Dit is het
   recept van #plannen / #tips / #rekenhulp. De .les-kaarten zijn al wit, dus
   die hoeven alleen hun inktkleur terug — de sectie zet color:#fff en dat zou
   anders witte koppen op een witte kaart geven. */
#opfris{background:linear-gradient(158deg,#0A2340,#0E3C6E 72%);color:#fff;
  position:relative;overflow:hidden}
#opfris::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(42% 60% at 100% 0%, rgba(18,95,175,.4), transparent 70%),
   radial-gradient(34% 48% at 0% 100%, rgba(18,161,80,.1), transparent 72%)}
#opfris .maat{position:relative;z-index:1}
#opfris .overline{color:#C7DEFF}
#opfris h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#FFD9A0;-webkit-text-fill-color:#FFD9A0}
#opfris .inleiding{color:rgba(255,255,255,.82)}
#opfris .les{color:var(--inkt);box-shadow:0 40px 80px -44px rgba(4,20,38,.95)}

/* De uitgelichte kaart stond eerst in de linkerkolom; die werd daardoor veel
   langer dan de lijst rechts en liet ~290px leeg rechtsonder. Nu over de volle
   breedte onder het rooster: dan is het verschil links nog maar een tiental px. */
.rust-onder{margin-top:1.6rem}

/* ── de wegwijs als pillen in plaats van zes vakken ─────────────────────
   Zes gelijke vakken met elk een omschrijving zetten meteen de toon van "alles
   is hier een doosje". De omschrijvingen stonden bovendien in de doelsectie zelf
   al. Dit blijft een sprongmenu, maar het weegt niets. */
.wegwijs-pillen{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem .35rem 0}
.wegwijs-pillen a{display:inline-flex;align-items:center;padding:.38rem .78rem;border-radius:99px;
  border:1px solid var(--lijn);background:var(--grond);font-size:13px;font-weight:600;
  color:var(--blauw-diep);text-decoration:none;transition:background .2s ease,border-color .2s ease}
.wegwijs-pillen a:hover{background:#E3EDF8;border-color:var(--blauw)}
.wegwijs-pillen a:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

/* ── "dit hoort er altijd bij": een lijst, geen genummerde kaarten ──────
   Het zijn geen stappen; de nummers 1-4 suggereerden een volgorde die er niet
   is. Twee kolommen, vinkje ervoor. Het vinkje is een rooster-item, dus staat de
   tekst in <b>/<span> — een blote tekstknoop wordt anders een derde kolom
   (les 02-09, .pf-punten). */
.hoort-lijst{list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.4rem}
.hoort-lijst li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.hoort-lijst li::before{content:"\2713";color:var(--groen);font-weight:800;font-size:15px;
  line-height:1.35}
.hoort-lijst li > div{min-width:0}
.hoort-lijst b{display:block;font-size:15.5px;letter-spacing:-.01em;color:var(--inkt)}
.hoort-lijst span{display:block;margin-top:.2rem;font-size:13.5px;line-height:1.6;color:var(--zacht)}
.les-regel-los{margin-top:1.6rem}
@media (max-width:800px){ .hoort-lijst{grid-template-columns:1fr;gap:.85rem} }

/* ── 2toDrive als tijdlijn ──────────────────────────────────────────────
   Vier stappen met leeftijden zijn een chronologie, geen vier losse kaarten.
   Geen rand en geen vulling: dat is precies wat deze sectie onderscheidt van de
   rest van de pagina. De lijn loopt door de stippen; op smalle schermen kantelt
   hij naar een verticale lijn links. */
.tijdbaan{list-style:none;margin:1.6rem 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 1.8rem}
.tijdbaan::before{content:'';position:absolute;left:7px;right:7px;top:7px;height:2px;
  background:linear-gradient(90deg,rgba(18,95,175,.35),rgba(18,95,175,.12))}
/* kolom, zodat de slotregel met margin-top:auto op één lijn komt — de teksten
   erboven zijn niet even lang (zelfde probleem als bij de pakketkaarten) */
.tijdbaan li{position:relative;padding:1.6rem 0 0;display:flex;flex-direction:column}
.tijdbaan li::before{content:'';position:absolute;left:0;top:0;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--blauw);box-sizing:border-box}
.tijdbaan .tb-wanneer{margin:0 0 .3rem;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blauw)}
.tijdbaan h3{margin:0 0 .3rem;font-size:16px;letter-spacing:-.01em;color:var(--inkt)}
.tijdbaan li > p:not(.tb-wanneer):not(.tb-noot){margin:0;font-size:13.5px;line-height:1.6;
  color:var(--zacht)}
.tijdbaan .tb-noot{margin:.6rem 0 0;margin-top:auto;padding-top:.5rem;border-top:1px dashed var(--lijn);
  font-size:12.5px;font-weight:700;color:var(--blauw-diep)}

@media (max-width:900px){
  .tijdbaan{grid-template-columns:1fr;gap:1.5rem 0;padding-left:1.9rem}
  .tijdbaan::before{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(18,95,175,.35),rgba(18,95,175,.12))}
  .tijdbaan li{padding:0}
  .tijdbaan li::before{left:-1.9rem;top:2px}
}

/* ── "dit hoort er altijd bij" in één kaart ─────────────────────────────
   De vinkjeslijst stond kaal op de grond-achtergrond en las als onafgemaakt
   (Sean 03-09). Eén kaart eromheen geeft hem een thuis; het blijft één vlak in
   plaats van een rij kaarten, dus de vorm verschilt nog steeds van de rest. */
.hoort-kaart{margin-top:1.4rem;background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.5rem 1.6rem;box-shadow:0 20px 42px -34px rgba(8,42,78,.6)}
.hoort-kaart .hoort-lijst{margin:0}

/* Gemeten 03-09 op alle negen tweekoloms-hero's: met align-items:center werd de
   witte kaart verticaal gecentreerd terwijl de tekst bovenaan begint. De kaart
   startte daardoor 23-69px lager dan de kop en er bleef 80-126px onder hem leeg.
   Dat is wat Sean "raar" noemde. Met align-items:start lijnt de bovenkant van de
   kaart uit met de kop, en valt de restruimte onder beide kolommen. */

/* ── de proefles-kaart in de witte .pf-vorm ─────────────────────────────
   Deze kaart had zijn donkere kleuren inline staan en werd daardoor onleesbaar
   toen .pf-vorm wit werd (beeld #27). Nu in klassen, zodat de omkering van de
   formulieren hem óók bereikt als er ooit weer iets verandert. */
.pf-vorm .pak-label{color:var(--blauw)}
.pf-kaart-kop{font-size:21px;color:var(--inkt);margin:.15rem 0 .5rem;letter-spacing:-.01em}
.pf-kaart-zin{margin:0 0 1.2rem;font-size:14.5px;line-height:1.65;color:var(--zacht)}
.pf-kaart-doen{margin-top:0}
/* een glasknop hoort op donker; in een witte kaart is het een lijnknop */
.pf-vorm .knop-glas{border:1px solid var(--lijn);background:#fff;color:var(--inkt)}
.pf-vorm .knop-glas:hover{background:var(--grond)}

/* ── /theorie: kamers omgewisseld (03-09) ───────────────────────────────
   Met #proefles op grond kwamen #normen en #proefles allebei op grond te staan.
   Nu: pakket wit → opbouw grond → normen wit → proefles grond → aanvraag donker.
   #pakket bestaat ook op /spoedcursus (daar hoort hij op grond), dus scoped. */
.pg-theorie #pakket{background:#fff;border-block:1px solid var(--lijn)}
#normen{background:#fff;border-block:1px solid var(--lijn)}

/* ── /theorie: kaarten volgen de nieuwe kamers (03-09) ──────────────────
   Na het omwisselen van de kamers vielen drie kaartsoorten weg tegen hun eigen
   kamer (kamer-check: ΔE 0,0 — wit op wit). Vulling volgt de kamer: in een
   witte kamer krijgt de kaart grond, in een grond-kamer blijft hij wit. */
.pg-theorie #pakket .pak,#normen .theo-pak{background:var(--grond)}
#opbouw .les{background:#fff}

/* ── /contact en /proefles: kamers na het lichter worden van #plannen ───
   #plannen is een grond-kamer geworden en stond daardoor naast #gegevens en
   #daarna, die óók grond waren (kamer-check: ΔE 4,4). Die twee worden wit; hun
   kaarten krijgen de grond-vulling zodat ze niet wegvallen. #verder gaat de
   andere kant op: van wit naar grond, met witte kaarten erin. */
#gegevens{background:#fff;border-block:1px solid var(--lijn)}
#daarna{background:#fff;border-block:1px solid var(--lijn)}
#gegevens .theo-pak,#gegevens .les,#daarna .les,#daarna .theo-pak{background:var(--grond)}
#verder .les,#verder .theo-pak{background:#fff}



/* ── het theorieformulier: een keuzelijst, geen drie egale vlakken (04-09) ──
   De vier fouten en hun oorzaak staan in de commit. Wat het ontwerp nu doet:
   een rij per pakket met het keuzerondje links, de naam met een regel uitleg in
   het midden en de prijs rechts op een vaste plek — dat is waar je hem in een
   pakketkeuze zoekt, niet middenin een opsomming.
   Kiezen doe je op blauw, schrijven op wit: de velden hadden dezelfde vulling
   als de keuzevakken en lazen daardoor als nog twee vlakken. */
.pl-pakketten{gap:.5rem}
.pl-pakketten .pl-vak{display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:.9rem;padding:.85rem 1rem}
.pl-pakketten .pl-bol{display:block;position:relative;width:19px;height:19px;border-radius:50%;
  margin-top:1px;
  background:#fff;border:1.5px solid #A9BFD8;transition:border-color .18s ease}
.pl-pakketten .pl-bol::after{content:'';position:absolute;inset:3.5px;border-radius:50%;
  background:var(--blauw);opacity:0;transform:scale(.35);
  transition:opacity .18s ease,transform .18s ease}
.pl-keuze input:checked + .pl-vak .pl-bol{border-color:var(--blauw)}
.pl-keuze input:checked + .pl-vak .pl-bol::after{opacity:1;transform:none}
.pl-pakketten .pl-wat{display:block;min-width:0}
.pl-pakketten .pl-wat b{display:block;font-size:15.5px;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;color:var(--inkt)}
.pl-pakketten .pl-wat small{display:block;margin-top:.16rem;font-size:13px;line-height:1.45;
  color:var(--zacht)}
.pl-pakketten .pl-prijs{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em;
  line-height:1.25;text-align:right;white-space:nowrap;color:var(--blauw)}
/* een rij van 600px die 2px opzij schuift bij hover leest als een storing; de
   pillen in de planner mogen dat wel, die zijn klein. En hover mag hier niet met
   de achtergrond spelen, anders lijkt een aangewezen rij een gekozen rij. */
.pl-pakketten .pl-keuze:hover .pl-vak{transform:none;border-color:#8FAFD4}
.pl-pakketten .pl-keuze:hover .pl-bol{border-color:var(--blauw)}

/* het labelpaar plakte aan de onderste keuzerij: 18px erboven, 45px eronder */
.inschrijf-theorie .pl-stap-2{margin-top:1.4rem}

/* schrijven op wit */
.inschrijf-theorie input{background:#fff;border-color:#B4C8DE;
  box-shadow:inset 0 1px 2px rgba(14,23,38,.05)}
/* #65768D haalt 4,66:1 op wit — een hint moet leesbaar zijn, niet half zichtbaar */
.inschrijf-theorie input::placeholder{color:#65768D;opacity:1}

/* de voet: knop en telefoonnummer op een regel in plaats van het nummer als
   losse regel eronder, en een rustiger groen (de gloed was 28px op 90%) */
.inschrijf-theorie .pl-voet{margin-top:1.1rem;padding-top:1rem;justify-content:space-between}
.inschrijf-theorie .pl-voet small{flex:0 1 auto}

@media (max-width:520px){
  .pl-pakketten .pl-vak{gap:.7rem;padding:.8rem .85rem}
  .pl-pakketten .pl-prijs{font-size:15px}
  .inschrijf-theorie .pl-voet small{flex:1 1 100%}
}

/* ── HERO V4 · studiocirkel (Sean 24-09-2026) ───────────────────────────
   De auto staat in een blauwe studio; de plek van de auto zit in het beeld zelf.
   Laptop (>=1180px): tekst links, beeld rechts verankerd op volle hoogte. Alle maten
   in de tekstkolom zijn em op een basis die meeschaalt met de breedte (16px op
   1440), zodat knoppen en auto elkaar tussen 1180 en 1440 niet raken.
   Telefoon/tablet: tekst boven, de auto eronder, afvinklijst onder de auto. */
@font-face{font-family:'Figtree';src:url('figtree-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

.kop-donker{background:rgba(3,5,11,.94);border-bottom-color:rgba(255,255,255,.08)}
.kop-donker .merk,.kop-donker .merk-tekst{color:#fff}
.kop-donker .merk-tekst small{color:rgba(255,255,255,.62)}
.kop-donker .nav a{color:rgba(255,255,255,.8)}
.kop-donker .nav a:hover,.kop-donker .nav a[aria-current]{color:#fff;border-bottom-color:#6FB4FF}
.kop-donker .hamburger{background:transparent;border-color:rgba(255,255,255,.32)}
.kop-donker .hamburger i,.kop-donker .hamburger i::before,.kop-donker .hamburger i::after{background:#fff}

.hero4{position:relative;overflow:hidden;background:#020409;color:#fff}
.hero4-beeld{display:block;margin:0}
.hero4-beeld img{display:block}
.hero4-tekst{position:relative;z-index:2}
.hero4-oog{margin:0;font-size:.78em;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hero4 h1{margin:calc(.7em * var(--r,1)) 0 0;font-family:'Figtree','FeitVal','Feit',system-ui,sans-serif;font-weight:900;
  font-size:4.6em;line-height:.98;letter-spacing:-.04em;color:#fff;text-wrap:balance;
  text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero4 h1 em{font-style:normal;color:#6FB4FF}
.hero4-sub{margin:calc(1.1em * var(--r,1)) 0 0;font-size:1.625em;line-height:1.45;color:rgba(255,255,255,.86)}
.hero4-lijn{display:block;width:18.75em;height:1px;margin-top:calc(2.3em * var(--r,1));background:rgba(255,255,255,.28)}
.hero4-doen{display:flex;flex-wrap:wrap;align-items:center;gap:.75em;margin-top:calc(2.3em * var(--r,1))}
.hero4-knop{display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:3.4em;box-sizing:border-box;padding:.9em 1.4em;border-radius:.72em;
  font-size:1.0625em;font-weight:700;color:#fff;text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
.hero4-knop svg{width:1.05em;height:auto;flex:none}
.hero4-knop-vol{background:linear-gradient(180deg,var(--rood),var(--rood-diep));
  box-shadow:0 16px 34px -12px rgba(200,30,39,.9),inset 0 1px 0 rgba(255,255,255,.24)}
.hero4-knop-rand{border:1.5px solid rgba(255,255,255,.42);font-weight:600;background:rgba(2,4,9,.35)}
.hero4-knop:hover{transform:translateY(-2px)}
.hero4-knop-rand:hover{border-color:#fff}
.hero4-knop:focus-visible{outline:3px solid #6FB4FF;outline-offset:3px}
.hero4-lijst{list-style:none;margin:calc(2.2em * var(--r,1)) 0 0;padding:0;display:flex;flex-direction:column;gap:.85em}
.hero4-lijst li{display:flex;align-items:center;gap:.8em;font-size:1.0625em;color:rgba(255,255,255,.88)}
.hero4-lijst svg{width:1.15em;height:auto;flex:none;color:#6FB4FF}

@media (min-width:1180px){
  /* Regel van Sean: op laptop past de hero PRECIES in het scherm, op elke hoogte.
     97px = topstrook + kopbalk. Het beeld (Seans eigen ontwerp 24-09, 1672x941, auto op
     43-95% van de breedte) vult de hero zoals bij Anema; op hoge,
     smalle schermen wordt het nooit hoger dan 56.25vw, anders schuift de auto naar de
     knoppen. Dan zakt het naar onderen en loopt de bovenrand weg in het donker. */
  .hero4{height:calc(100svh - 97px);min-height:480px}
  /* breedte max 2.2x de herohoogte: op brede, lage schermen snijdt cover anders dak en wielen weg */
  .hero4-beeld{position:absolute;right:0;bottom:0;width:min(100%,calc((100svh - 97px) * 2.2));height:min(100%,56.25vw)}
  .hero4-beeld img{width:100%;height:100%;object-fit:cover;object-position:100% 75%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%),linear-gradient(180deg,transparent 0,#000 7%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 10%),linear-gradient(180deg,transparent 0,#000 7%);
    mask-composite:intersect}
  .hero4-tekst{height:100%;display:flex;flex-direction:column;justify-content:center;
    width:auto;margin-inline:0;padding-left:5vw;box-sizing:border-box;
    font-size:min(16px,1.1111vw,calc((100svh - 97px) / 33))}
  .hero4-tekst > *{max-width:40em}
}
/* Lage laptopschermen: alleen de tussenruimtes krimpen, de letters niet. */
@media (min-width:1180px) and (max-height:880px){.hero4{--r:.8}}
@media (min-width:1180px) and (max-height:780px){.hero4{--r:.62}}
@media (min-width:1180px) and (max-height:700px){.hero4{--r:.48}.hero4-lijn{display:none}}
@media (min-width:1180px) and (max-height:640px){.hero4{--r:.4}}
@media (min-width:1180px) and (max-height:630px){.hero4{--r:.3}}

@media (max-width:1179px){
  .hero4{display:grid;padding-top:clamp(2rem,6vw,3.2rem)}
  .hero4-tekst{display:contents}
  .hero4-tekst > *{width:var(--maat);margin-inline:auto;box-sizing:border-box}
  .hero4-oog{order:1;font-size:12px}
  .hero4 h1{order:2;margin:.55em auto 0;font-size:clamp(34px,9.2vw,66px)}
  .hero4-sub{order:3;font-size:clamp(18px,4.8vw,24px);margin:.8em auto 0}
  .hero4-lijn{display:none}
  /* Telefoon/tablet: titel ALTIJD in het midden (Sean 16-09 en 24-09) */
  .hero4-oog,.hero4 h1,.hero4-sub{text-align:center}
  .hero4-doen{justify-content:center}
  .hero4-doen{order:4;margin:1.5rem auto 0;font-size:16px;position:relative;z-index:3}
  .hero4-beeld{order:5;position:relative;margin-top:.4rem;width:100%}
  .hero4-beeld img{width:100%;height:auto}
  .hero4-beeld::after{content:"";position:absolute;inset:0 0 auto 0;height:34%;pointer-events:none;
    background:linear-gradient(180deg,#020409 0%,rgba(2,4,9,0) 100%)}
  .hero4-lijst{order:6;margin:0 auto;padding-block:1.3rem 1.8rem;font-size:15.5px}
}
/* Telefoon: Seans staande beeld (941x1672, auto in de onderste helft vanaf 53%) is de
   achtergrond; de tekst staat bovenin op het donker, de afvinklijst onder het beeld.
   Rij 5 is minstens 88vw hoog, zodat de auto altijd ónder de knoppen begint. */
@media (max-width:699px){
  .hero4{padding-top:0;grid-template-columns:100%;grid-template-rows:auto auto auto auto minmax(88vw,1fr) auto}
  .hero4-tekst > *,.hero4-beeld{grid-column:1}
  .hero4-oog{grid-row:1;margin-top:clamp(1.6rem,7vw,2.4rem)}
  .hero4 h1{grid-row:2}
  .hero4-sub{grid-row:3}
  .hero4-doen{grid-row:4}
  .hero4-tekst > *{position:relative;z-index:2}
  .hero4-beeld{grid-row:1 / 6;grid-column:1;align-self:end;margin-top:0;z-index:0}
  .hero4-beeld::after{height:12%}
  .hero4-lijst{grid-row:6;padding-top:.6rem}
}
@media (max-width:560px){
  /* Titel draagt, knoppen volgen (Sean 24-09, Rijstart als maat): kop ~11vw, knoppen lager en kleiner */
  .hero4 h1{font-size:clamp(34px,11vw,52px)}
  .hero4-doen{flex-direction:column;align-items:stretch;gap:.6rem}
  .hero4-knop{width:100%;min-height:48px;padding:.7em 1.2em;font-size:15px;border-radius:10px}
  .hero4-knop-vol{box-shadow:0 10px 22px -12px rgba(200,30,39,.8),inset 0 1px 0 rgba(255,255,255,.2)}
  .hero4-sub br{display:none}
}
@media (prefers-reduced-motion:reduce){.hero4-knop{transition:none}.hero4-knop:hover{transform:none}}