/* ITKaro — gedeelde stijl voor de hele site.
 *
 * Eén bestand voor alle pagina's, geen build-stap, geen dependency (BP-010).
 * De tokens en de typografie komen uit bedrijf/BP-015-omgeving-hld.html, de
 * omgevingskaart. Verandert de huisstijl, dan verandert huisstijl/LEESMIJ.md
 * eerst en dit bestand daarna.
 *
 * Geen donkere modus, met opzet (24 sep 2026): itkaro.com is altijd licht.
 *
 * Cachebreker: elke pagina laadt dit bestand als /assets/itkaro.css?v=JJJJMMDDx.
 * Verandert dit bestand of beweging.js, dan gaat die v op alle pagina's omhoog.
 *
 * Twee klassen op <html>, allebei gezet door beweging.js:
 *   .jsf  er draait script: bediening (de mappenoefening, de fasebalk)
 *   .js   er draait script én de bezoeker wil beweging
 * Zonder script staat alles er, stil en compleet.
 *
 * Opgeruimd op 5 oktober 2026: de tijdlijn op de homepage, de fasekiezer, de
 * vertrouwensband en het infaden van kaarten zijn weg, met de regels die erbij
 * hoorden. Eén ding beweegt nog bovenaan elke pagina: de getypte regel
 * (.hero-regel, zie hieronder). Die is op 6 oktober 2026 teruggekomen en
 * staat zo in de HTML dat er niets verspringt als het script start.
 *
 * Herbouwd op 7 oktober 2026: de homepage loopt van waarom naar wat naar hoe.
 * Nieuw: de hero met de grote foto (.hero-wie), de smalle kolom (.waarom), de
 * lijn groot op een lichte band (.reis-breed met het raster .lijn eronder), de
 * tweede link per trede (.trap-lees), het gereedschapsblok (.gereedschap-duo)
 * en de bediening van een schermenreeks in de titelbalk van het kader. Weg:
 * de kaart "Waarom zo" (.hero-waarom), het contactblok met de kleine donkere
 * tekening (.contact-duo) en de donkere kleuren van .reis. Op de homepage
 * bewegen twee dingen, nooit in hetzelfde scherm: de getypte regel en de lijn.
 *
 * Zonder script laadt elke pagina in <noscript> ook /assets/geen-script.css:
 * daar staat wat alleen zonder script anders moet (de vaste zin van de
 * getypte regel, de opdrachttekst van de mappenoefening).
 *
 * Letter: Inter, zelf gehost (@font-face hieronder), toegestaan door
 * font-src 'self' in nginx-headers.conf en _headers.
 *
 * ⚠️ Dit bestand wordt alleen geladen als de CSP 'self' toestaat op style-src.
 * Die staat in _headers ÉN in nginx.conf, en die twee moeten gelijk blijven.
 */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme:only light;
  --grond:#FFFFFF; --vlak:#F6F8FC; --kaart:#FFFFFF;
  --rand:#E4E9F0; --rand-sterk:#C6D2E4;
  --veldrand:#7D8AA0;                 /* randen van invoervelden: 3,5:1 op wit */
  --kop:#0A1F3D; --tekst:#4A5A70; --zacht:#5E7089;
  --merk:#002553; --merk-diep:#001A3C;
  --accent:#FF9600; --accent-tekst:#A85B00;
  --ok:#008D3F; --ok-tekst:#006B30; --ok-vlak:#E6F3EB;   /* --ok-tekst op --ok-vlak: 5,8:1 */
  --donker:#002553; --donker-tekst:#C6D6EC;
  --warm:#FFF3E0;
  --leisteen:#16293F;
  --leisteen-verloop:linear-gradient(165deg,#0F1B2D,#16293F 55%,#1E3856);
  --schaduw:0 1px 2px rgba(10,31,61,.04), 0 8px 28px rgba(10,31,61,.06);
  --wrap:1040px; --r:12px;
  --kop-h:75px;                       /* hoogte van de vaste kop; beweging.js meet hem na */
}
@media (max-width:900px){ :root{--kop-h:65px} }

/* ── basis ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kop-h) + 16px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* Dezelfde letter als het leerportaal, zelf gehost (CSP: font-src 'self'). */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
body{margin:0;background:var(--grond);color:var(--tekst);
  font:400 16px/1.62 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:420px){ .wrap{padding:0 16px} }
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
img{max-width:100%;height:auto}
a{color:var(--accent-tekst)}
[hidden]{display:none !important}

/* Focus: navy met een witte rand eromheen haalt 3:1 op wit, op --vlak en op
   --warm. Op de donkere vlakken is de ring licht oranje (8:1 op leisteen). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--merk);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px #fff}
.util :focus-visible,.hero-donker :focus-visible,.band-donker :focus-visible,.les-kop :focus-visible{outline-color:#FFB454;box-shadow:none}
[tabindex="-1"]:focus{outline:none;box-shadow:none}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--merk);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:650}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Elk ankerdoel komt onder de vaste kop uit, niet erachter. */
[id]{scroll-margin-top:calc(var(--kop-h) + 18px)}

/* ── koppen ─────────────────────────────────────────────────────────── */
h1{margin:12px 0 0;font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.025em;
  font-weight:800;color:var(--kop);text-wrap:balance}
/* De h2 opent een blok, met een knoop en een stukje draad ervoor; de regel
   eronder (.h) is de ondertitel. Proza (.artikel) heeft zijn eigen h2. */
h2{margin:0;font-size:clamp(26px,3.6vw,36px);letter-spacing:-.02em;line-height:1.15;font-weight:800;
  color:var(--kop);display:flex;align-items:center;gap:14px}
h2::before{content:"";flex:none;width:36px;height:14px;
  background:radial-gradient(circle at 7px 7px,var(--accent) 6.5px,transparent 7.5px),linear-gradient(var(--accent),var(--accent)) 12px 5px/24px 4px no-repeat}
@media (max-width:420px){ h2{gap:10px} h2::before{width:28px;background:radial-gradient(circle at 7px 7px,var(--accent) 6.5px,transparent 7.5px),linear-gradient(var(--accent),var(--accent)) 12px 5px/16px 4px no-repeat} }
h2 + .h{margin:8px 0 0;font-size:19px;line-height:1.45;font-weight:500;color:var(--tekst);text-wrap:balance}
h2 + .h.groot{font-size:clamp(22px,3vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:700;color:var(--kop)}
h3{margin:34px 0 0;font-size:17px;color:var(--kop);font-weight:700}
h4{margin:0;font-size:15.5px;color:var(--kop);font-weight:700}
.eyebrow{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent-tekst)}
.lead{margin:16px 0 0;max-width:63ch;font-size:17.5px;color:var(--tekst)}
.streep{width:52px;height:4px;background:var(--accent);border-radius:2px;margin:22px 0 0}

/* ── utility-balk ───────────────────────────────────────────────────── */
.util{background:var(--donker);color:var(--donker-tekst);font-size:12.5px}
.util .wrap{display:flex;gap:14px;justify-content:space-between;align-items:center;
  flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.util a{color:#fff;text-decoration:none}
.util a:hover{text-decoration:underline}
.util-r{display:flex;gap:14px;align-items:center}
.lang{display:flex;gap:6px;align-items:center}
.lang a{display:flex;gap:5px;align-items:center;padding:3px 7px;border-radius:999px;
  opacity:.75;font-weight:600;font-size:11.5px}
.lang a.on{opacity:1;background:rgba(255,255,255,.14)}
.lang svg{display:block;border-radius:2px}

/* ── kop en navigatie ─────────────────────────────────────────────────
 * Breed: logo, de links als knoppen, rechts Kennismaking en Inloggen.
 * Smal (tot 900px): één rij met logo, Kennismaking en de menuknop. De menuknop is
 * de checkbox zelf, getekend als knop: het tikvlak is dus precies wat u ziet,
 * en het menu werkt zonder JavaScript. Met script krijgt hij de rol van een
 * knop met aria-expanded (beweging.js). De volgorde in de HTML is de volgorde
 * op het scherm: logo, Kennismaking (alleen smal), menuknop, links, en rechts de
 * knoppen voor breed. De utility-balk valt smal weg; de proefles, Inloggen en
 * de taalkeuze staan dan in het menu.
 */
header.site{background:var(--grond);border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:50}
header.site nav{display:flex;gap:14px;align-items:center;padding:14px 0;position:relative}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none;flex:0 1 181px;min-width:0;margin-right:auto}
.logo img{display:block;width:100%;max-width:181px;height:auto}
.links{display:flex;gap:8px;align-items:center;font-size:15.5px}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid var(--rand-sterk);
  border-radius:999px;background:var(--grond);color:var(--merk);font-weight:650;text-decoration:none;white-space:nowrap}
.links a:hover{background:var(--warm);border-color:var(--accent)}
.links a.on{background:var(--merk);border-color:var(--merk);color:#fff}
.links .alleen-smal{display:none}
.nav-right{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.nav-right .btn,header.site .nav-kennis-smal{min-height:44px;align-items:center;white-space:nowrap}
.nav-right .btn{display:inline-flex}
.menu-schakel,header.site .nav-kennis-smal{display:none}
@media (max-width:1040px){ .links{font-size:14.5px;gap:6px} .links a{padding:8px 12px} }
@media (max-width:900px){
  .util{display:none}
  header.site nav{padding:10px 0;gap:10px}
  .nav-right{display:none}
  header.site .nav-kennis-smal{display:inline-flex;flex:none}
  .menu-schakel{display:block;flex:none;width:44px;height:44px;margin:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;border:1.5px solid var(--veldrand);border-radius:11px;
    background:linear-gradient(var(--merk),var(--merk)) center 13px/20px 2px no-repeat,
      linear-gradient(var(--merk),var(--merk)) center 19px/20px 2px no-repeat,
      linear-gradient(var(--merk),var(--merk)) center 25px/20px 2px no-repeat,
      var(--grond)}
  .menu-schakel:checked{border-color:var(--merk);background-color:var(--warm)}
  .links{display:none;position:absolute;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;
    min-width:240px;max-width:calc(100vw - 32px);padding:8px;background:var(--grond);border:1px solid var(--rand-sterk);
    border-radius:13px;box-shadow:0 12px 34px rgba(0,37,83,.16);z-index:30;font-size:16px}
  .menu-schakel:checked ~ .links{display:flex}
  .links a,.links a.on{min-height:48px;border:0;border-radius:9px;padding:10px 14px;background:none;color:var(--merk)}
  .links a.on{background:var(--vlak);font-weight:800}
  .links a:hover{background:var(--warm)}
  .links .alleen-smal{display:inline-flex;font-weight:550;color:var(--tekst)}
  .links a:not(.alleen-smal) + .alleen-smal{margin-top:6px;border-top:1px solid var(--rand);border-radius:0 0 9px 9px}
}
@media (max-width:420px){
  header.site nav{gap:8px}
  header.site .nav-kennis-smal{padding:7px 11px;font-size:13px}
}

/* ── knoppen ────────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:11px 20px;border-radius:999px;text-decoration:none;
  font-weight:650;font-size:15px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;line-height:1.3}
.btn-p{background:var(--merk);color:#fff}
.btn-p:hover{background:var(--merk-diep)}
.btn-a{background:var(--accent);color:#28190A}
.btn-a:hover{filter:brightness(1.06)}
.btn-o{background:transparent;color:var(--kop);border-color:var(--veldrand)}
.btn-o:hover{border-color:var(--merk);color:var(--merk)}
.btn-s{padding:7px 14px;font-size:13.5px}
.btn-groot{padding:14px 26px;font-size:16.5px}
.pijltje{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:filter .15s ease,background .15s ease,border-color .15s ease}
}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{background:var(--vlak);border-bottom:1px solid var(--rand);padding:52px 0 46px}
.hero .eyebrow{margin-bottom:10px}
.hero .streep{margin-top:20px}
.hero-regel{margin:14px 0 0;font-size:18px;color:var(--tekst);max-width:63ch}
.hero-regel + .lead{margin-top:14px}
/* voor wie een vorm is: individueel, groep of organisatie */
.voor{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;white-space:nowrap;
  color:var(--zacht);border:1px solid var(--rand-sterk);border-radius:999px;padding:1px 8px}
.trap .voor{margin-top:7px;align-self:flex-start}
/* De getypte regel bovenaan. In de HTML staan twee dingen naast elkaar:
 *   .typ-vast   de hele zin, voor schermlezers en voor wie geen script of
 *               geen beweging wil;
 *   .typ-zicht  de standen die getypt worden, elk als .typ-stand, op elkaar
 *               gestapeld in één rastercel. De regel is daardoor altijd zo
 *               hoog als zijn hoogste stand, al vóór het script start, en er
 *               verspringt dus niets: niet bij het starten en niet bij het
 *               typen. De ruimte voor de pauzeknop is ook al gereserveerd.
 * Het script typt in een kopie van de eerste stand (.typ-nu). Zonder script
 * (geen-script.css) of bij verminderde beweging staat de vaste zin er, stil.
 */
.typ-vast{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.typ-zicht{display:inline-grid;vertical-align:top;max-width:calc(100% - 34px)}
.typ-stand{grid-area:1 / 1;visibility:hidden}
.typ-stand:first-child,.typ-stand.typ-nu{visibility:visible}
.typ-zicht.loopt .typ-stand:not(.typ-nu){visibility:hidden}
.typ{color:var(--accent-tekst);font-weight:700}
.typ-zicht.typt .typ-nu .typ::after{content:"";display:inline-block;width:2px;height:1.05em;margin:0 -5px 0 3px;vertical-align:-2px;background:var(--accent);animation:knipper 1s steps(1) infinite}
@keyframes knipper{50%{opacity:0}}
/* De pauzeknop: klein en stil, maar met een tikvlak van 36 bij 36. */
.typ-knop{position:relative;display:inline-block;vertical-align:top;width:24px;height:24px;margin:.2em 0 0 8px;padding:0;
  border:1.5px solid var(--zacht);border-radius:50%;background:transparent;color:var(--zacht);cursor:pointer}
.typ-knop::after{content:"";position:absolute;inset:-8px}
.typ-knop::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:8px;margin:-4px 0 0 -3px;
  border-left:2px solid currentColor;border-right:2px solid currentColor;box-sizing:border-box}
.typ-knop.staat-stil::before{width:0;height:0;margin:-5px 0 0 -3px;border:5px solid transparent;border-right-width:0;border-left:8px solid currentColor}
.typ-knop:hover,.typ-knop:focus-visible{opacity:1}
.hero-donker .hero-regel{color:#C6D6EC}
.hero-donker .typ{color:#FFB454}
.hero-donker .typ-knop{color:#C6D6EC;border-color:rgba(255,255,255,.55)}
.hero-regel.herken{margin:0 0 14px;font-size:17px}
.hero-regel.herken .typ{font-style:italic;font-weight:600}
.kaartpagina .hero-regel{margin:10px auto 0;font-size:16px}
@media (prefers-reduced-motion: reduce){
  .speel{display:none}
  .typ-vast{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .typ-zicht{display:none}
}
.hero-acties{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.hero-noot{margin:14px 0 0;font-size:13.5px;color:var(--zacht)}
.hero-duo{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
@media (max-width:700px){ .hero-duo{grid-template-columns:1fr;gap:26px} }
.portret{width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;
  border:4px solid var(--kaart);box-shadow:var(--schaduw)}
@media (max-width:700px){ .portret{width:128px;height:128px} }

/* De donkere hero van de homepage: links het label, de getypte regel, de kop,
   de reden en de twee acties; rechts de foto met wie het is en dat het op
   afstand gaat. Op een telefoon staat de foto klein naast die twee regels,
   onder de knoppen. */
.hero-donker{background:var(--leisteen);background-image:var(--leisteen-verloop);
  border-bottom:0;color:#C6D6EC;padding:56px 0 54px}
.hero-donker h1{color:#fff}
.hero-donker .lead{color:#DCE6F4;font-size:19px;max-width:54ch}
.hero-donker .eyebrow{color:#FFB454}
.hero-donker a:not(.btn){color:#FFC47A}
.hero-donker .btn-o{color:#fff;border-color:rgba(255,255,255,.55)}
.hero-donker .btn-o:hover{color:#fff;border-color:#fff}
.hero-home{grid-template-columns:minmax(0,1fr) 280px;gap:56px}
.hero-home .hero-acties{align-items:flex-start}
.hero-actie{display:flex;flex-direction:column;gap:7px}
.hero-gratis{padding-left:4px;font-size:13.5px;line-height:1.3;color:#C6D6EC}
/* Eén regel onder de inleiding: waarover het nu gaat, wat het kost en wanneer u betaalt. */
.hero-nu{margin:12px 0 0;max-width:54ch;font-size:15.5px;line-height:1.5;color:#C6D6EC}
.hero-nu b{color:#fff;font-weight:650}
@media (max-width:480px){
  /* Op een kleine telefoon moet de hoofdknop in het eerste scherm blijven. */
  .hero-nu{margin-top:8px;font-size:14.5px;line-height:1.45}
  .hero-donker .lead{margin-top:10px}
}
footer.site .fgrid a{overflow-wrap:anywhere}
.hero-wie img{display:block;width:280px;height:280px;border-radius:22px;object-fit:cover;border:2px solid rgba(255,255,255,.3)}
.hero-wie p{margin:14px 0 0;font-size:15px;line-height:1.45;color:#DCE6F4}
.hero-wie b{color:#fff}
.hero-wie .hero-afstand{margin-top:6px;font-size:14.5px;color:#C6D6EC}
@media (max-width:900px){
  .hero-donker{padding:22px 0 30px}
  .hero-home{grid-template-columns:1fr;gap:22px}
  .hero-donker .lead{font-size:16.5px;margin-top:12px}
  .hero-donker .hero-acties{margin-top:18px;gap:10px}
  .hero-donker .hero-acties .btn{display:block;flex:1 1 100%;text-align:center}
  .hero-actie{flex:1 1 100%}
  .hero-gratis{padding:0;text-align:center}
  .hero-wie{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 14px;align-items:center;
    padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
  .hero-wie img{grid-row:1 / span 2;width:88px;height:88px;border-radius:16px}
  .hero-wie p{margin:0;font-size:14.5px;align-self:end}
  .hero-wie .hero-afstand{margin:0;font-size:14px;align-self:start}
}
@media (max-width:420px){ .hero-donker .lead{font-size:16px} }

/* De smalle kolom onder de hero: waarom ik dit doe. Geen kaarten. */
.waarom > p{max-width:58ch;font-size:17.5px;line-height:1.65}
.waarom > p.door-lees{font-size:16px}
/* een aanbeveling: letterlijk citaat met een oranje streep, naam eronder */
.aanbeveling{margin:22px 0 0;padding:4px 0 4px 20px;border-left:4px solid var(--accent);max-width:60ch}
.aanbeveling blockquote{margin:0;padding:0;border:0;background:none}
.aanbeveling blockquote p{margin:0 0 12px;font-size:18px;line-height:1.6;font-style:italic;color:var(--kop);max-width:none}
.aanbeveling blockquote p:last-child{margin-bottom:0}
.aanbeveling figcaption{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--zacht);max-width:none}
.aanbeveling figcaption b{color:var(--kop)}
.aanbeveling-lang blockquote p{font-size:17px}
/* Een titel bij een naam die in één oogopslag moet opvallen (D-165): twee
   vakken in de eigen kleuren van de site, links de titel en rechts het
   vakgebied. Bewust geen logo: het MVP-logo is een beeldmerk van Microsoft. */
.etiket{display:inline-flex;vertical-align:middle;margin:0 6px 2px 4px;border:1.5px solid var(--merk);border-radius:7px;
  overflow:hidden;font-size:13.5px;font-weight:700;letter-spacing:.01em;line-height:1;white-space:nowrap}
.etiket-a{background:var(--merk);color:#fff;padding:7px 10px}
.etiket-b{background:#fff;color:var(--merk);padding:7px 10px}
.hfst-link{margin:8px 0 0;font-size:15px}
.door-lees a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
/* Een tekstlink die naar de hoofdactie leidt, onder een blok. */
.na-blok{margin:16px 0 0;font-size:15.5px;max-width:none}
.na-blok a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
.midden{justify-content:center}

/* ── secties en banden ──────────────────────────────────────────────── */
section{margin:60px 0 0}
section > p{margin:14px 0 0;max-width:68ch}
.band{padding:40px 0}
.band > .wrap > section:first-child{margin-top:0}
@media (max-width:560px){ .band{padding:30px 0} }
.band-wit{background:var(--grond)}
.band-vlak{background:var(--vlak);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.band-warm{background:var(--warm);border-top:3px solid var(--accent);border-bottom:1px solid var(--rand)}
.band-donker{background:var(--leisteen);background-image:var(--leisteen-verloop);color:#C6D6EC}
.band-donker h2,.band-donker h2 + .h.groot{color:#fff}
.band-donker h2 + .h{color:#C6D6EC}
.band-donker h3,.band-donker h4,.band-donker b{color:#fff}
.band-donker p{color:#C6D6EC}
.band-donker a{color:#FFC47A}
.band-donker .btn-p{background:var(--accent);color:#28190A}
.band-donker .btn-o{color:#fff;border-color:rgba(255,255,255,.55)}
.band-donker .btn-o:hover{color:#fff;border-color:#fff}
.band-donker .cform label,.band-donker .cform .consent label{color:#fff}
.band-donker .cform .opt{color:#B5C7DF}
.band-donker .cform .req{color:#FFB454}
.band-donker .cform input,.band-donker .cform textarea,.band-donker .cform select{background:#fff;color:#0A1F3D;border-color:#fff}
.band-donker .cform .consent{color:#C6D6EC}

/* ── kerncijfers, hairline-raster ───────────────────────────────────── */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rand);border:1px solid var(--rand);border-radius:var(--r);
  overflow:hidden;margin:30px 0 0}
.cijfers > div{background:var(--kaart);padding:18px 20px}
.cijfers .n{font-size:28px;font-weight:800;color:var(--kop);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cijfers .l{font-size:12.5px;color:var(--zacht);margin-top:2px;line-height:1.35}

/* ── kaarten ──────────────────────────────────────────────────────────
 * Elk kaartblok heeft een steviger kader met een bovenrand in oranje, navy,
 * groen, in die volgorde. De kaartkop is een h3 (of h4 onder een h3).
 */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin:26px 0 0}
@media (min-width:700px){ .kaarten-4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:860px){ .kaarten-3{grid-template-columns:repeat(3,1fr)} }
.kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:22px 24px 24px}
.kaart h3,.kaart h4{margin:0 0 8px;font-size:15.5px}
.kaart p{margin:0;font-size:14.5px}
.kaarten .kaart,.post-list li{border:1.5px solid var(--rand-sterk);border-top-width:5px;border-radius:14px;box-shadow:var(--schaduw)}
.kaarten .kaart:nth-child(3n+1),.post-list li:nth-child(3n+1){border-top-color:var(--accent)}
.kaarten .kaart:nth-child(3n+2),.post-list li:nth-child(3n+2){border-top-color:var(--merk)}
.kaarten .kaart:nth-child(3n),.post-list li:nth-child(3n){border-top-color:var(--ok)}
.prod-waar{margin-top:8px !important;font-size:12px !important;color:var(--accent-tekst) !important;font-weight:600;letter-spacing:.04em}

/* ── tabel ──────────────────────────────────────────────────────────── */
.tabelwrap{margin:22px 0 0;overflow-x:auto;border:1px solid var(--rand);border-radius:var(--r);background:var(--kaart)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rand);vertical-align:top}
thead th{background:var(--vlak);color:var(--kop);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
tbody th{font-weight:600;color:var(--kop)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
.tabel-smal{max-width:620px}
.tabel-smal table{min-width:0}
/* Op een telefoon staan de smalle prijstabellen onder elkaar: met vier
   kolommen naast elkaar viel de kolom inclusief btw buiten beeld (D-164,
   punt 3). Elke rij wordt een blokje; de bedragen krijgen het label van hun
   kolom uit data-label. De rollen in de HTML houden het een tabel voor wie
   hem laat voorlezen; de kopregel blijft daarvoor bestaan, uit het zicht. */
@media (max-width:600px){
  .tabel-smal table,.tabel-smal tbody{display:block}
  .tabel-smal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabel-smal tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding:13px 14px;border-bottom:1px solid var(--rand)}
  .tabel-smal tbody tr:last-child{border-bottom:0}
  .tabel-smal tbody th,.tabel-smal tbody td{display:block;padding:0;border:0}
  .tabel-smal tbody tr > :first-child{grid-column:1 / -1;font-weight:600;color:var(--kop);font-size:15px}
  .tabel-smal tbody tr > :not([data-label]){grid-column:1 / -1}
  .tabel-smal tbody td[data-label]{margin-top:8px}
  .tabel-smal [data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
  .tabel-smal tbody th[data-label]::before{display:inline;margin-right:8px}
}
.tabel-noot{font-size:13.5px;color:var(--zacht)}
.tabelwrap:focus-visible,.doek:focus-visible{outline:3px solid var(--merk);outline-offset:2px}

/* ── pil ────────────────────────────────────────────────────────────── */
.pil{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pil.live{background:var(--ok-vlak);color:var(--ok-tekst)}
.pil.bouw{background:rgba(255,150,0,.14);color:#8A4A00}

/* ── figuur en doek, voor de bewijspagina ───────────────────────────── */
figure{margin:26px 0 0;padding:0}
.doek{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:20px;
  overflow-x:auto;box-shadow:var(--schaduw)}
.doek svg{display:block;min-width:600px;max-width:100%;height:auto}
figcaption{margin:12px 2px 0;font-size:13.5px;color:var(--zacht);max-width:74ch}
figcaption b{color:var(--kop);font-weight:600}

/* ── vraag en antwoord ──────────────────────────────────────────────── */
.qa{margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--rand)}
.qa details{border-bottom:1px solid var(--rand);padding:5px 0}
.qa details[open]{padding-bottom:15px}
.qa summary{cursor:pointer;font-weight:650;color:var(--kop);font-size:15.5px;list-style:none;padding:10px 0}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+ ";color:var(--accent-tekst);font-weight:800}
.qa details[open] summary::before{content:"– "}
.qa p{margin:10px 0 0;font-size:14.5px;max-width:70ch}

/* ── formulier ──────────────────────────────────────────────────────── */
form.cform{margin:24px 0 0;max-width:620px}
.cform label{display:block;margin:16px 0 0;font-size:13.5px;font-weight:600;color:var(--kop)}
.cform input,.cform textarea,.cform select{width:100%;margin-top:6px;padding:11px 13px;
  border:1.5px solid var(--veldrand);border-radius:8px;background:var(--kaart);
  color:var(--kop);font:inherit;font-size:16px}
.cform select{min-height:46px}
.veld-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){ .veld-duo{grid-template-columns:1fr} }
.cform textarea{min-height:110px;resize:vertical}
.cform .req{color:var(--accent-tekst)}
.cform .opt{color:var(--zacht);font-weight:500}
.cform .consent{display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;font-size:13.5px;
  font-weight:500;color:var(--tekst)}
.cform .consent input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto}
.cform .consent label{margin:0;font-weight:500}
.cform button{margin:22px 0 0}
.hp{position:absolute;left:-9999px}
/* De contactpagina: het formulier met ernaast wat er daarna gebeurt. Elk veld
   is een .veld met het label, een korte uitleg (.hulp) en het invoerveld. */
.contact-blad{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start;margin:8px 0 0}
@media (max-width:860px){ .contact-blad{grid-template-columns:1fr;gap:34px} }
.cform .veld{margin:16px 0 0}
.cform .veld label{margin:0}
.cform .hulp{display:block;margin:2px 0 0;font-size:13.5px;font-weight:400;line-height:1.45;color:var(--zacht)}
.cform input:not([type=checkbox]):not([type=hidden]),.cform select{min-height:48px}
.cform .verplicht-uitleg{margin:0;font-size:14.5px;color:var(--tekst)}
/* het korte aanzicht: wie via een kennismakingslink komt (#kort, Engels #short) ziet de optionele
   velden niet; de link "meer velden" wijst naar de sectie en haalt het korte aanzicht daarmee weg */
.cform .kort-meer{display:none;margin:8px 0 0;font-size:14.5px;color:var(--tekst)}
#kort:target .extra,#short:target .extra{display:none}
#kort:target .kort-meer,#short:target .kort-meer{display:block}
.cform .consent input{width:24px;height:24px;margin:1px 0 0}
.cform .consent label{min-height:44px;font-size:14.5px;line-height:1.5}
.cform .na-verstuur{margin:12px 0 0;font-size:13.5px;color:var(--zacht)}
.contact-zij{font-size:15.5px}
.contact-zij h3{margin:26px 0 0;font-size:17px;color:var(--kop)}
.contact-zij h3:first-child{margin-top:0}
.contact-zij p{margin:8px 0 0;max-width:46ch}
.contact-zij ol{margin:8px 0 0;padding:0 0 0 20px;max-width:46ch}
.contact-zij li{margin:6px 0 0}
.contact-zij .mail{display:inline-block;padding:11px 0;font-weight:650}
.contact-zij .zij-rest{margin-top:26px}
/* Op een telefoon staat "wat er daarna gebeurt" boven de verstuurknop. Het
   formulier en de zijkolom lossen op in één kolom (display:contents) en de
   volgorde zet de onderdelen op hun plek. De focusvolgorde blijft die van de
   HTML: in het verplaatste blok staat niets waar focus op kan. */
@media (max-width:860px){
  .contact-blad{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .contact-blad form.cform,.contact-blad .contact-zij{display:contents}
  .contact-blad .verplicht-uitleg{margin-top:24px}
  .contact-blad .daarna{order:1;margin:26px 0 0;padding:14px 16px 16px;background:var(--vlak);border:1px solid var(--rand);border-radius:12px;font-size:15px}
  .contact-blad .daarna ol{margin:8px 0 0;padding:0 0 0 20px}
  .contact-blad .daarna li{margin:6px 0 0}
  .contact-blad .daarna h3{margin:0;font-size:17px;color:var(--kop)}
  .contact-blad .consent,.contact-blad .cform button,.contact-blad .na-verstuur{order:2}
  .contact-blad .cform button{align-self:stretch;text-align:center}
  .contact-blad .zij-rest{order:3;margin:34px 0 0;font-size:15.5px}
  .contact-blad .zij-rest h3{margin:26px 0 0;font-size:17px;color:var(--kop)}
  .contact-blad .zij-rest h3:first-child{margin-top:0}
  .contact-blad .zij-rest p{margin:8px 0 0}
}
/* De kop van de contactpagina heeft meer standen in de HTML (algemeen, en
   één per onderwerp met data-onderwerp), op elkaar gestapeld zodat de kop al
   zo hoog is als de hoogste. Komt iemand binnen met zo'n onderwerp, dan zet
   beweging.js .past op de kop en .actief op die stand. Zonder script blijft
   de algemene kop staan. */
.kop-wissel{display:grid}
.kop-wissel > span{grid-area:1 / 1}
.kop-wissel .kop-onderwerp,.kop-wissel.past .kop-alg{visibility:hidden}
.kop-wissel.past .kop-onderwerp.actief{visibility:visible}
/* Opsommingen in een fiche (programma, leerdoelen, hoofdstukken) en in een vorm:
   gewone genummerde of gestipte lijsten, los van de lijstopmaak van .halte. */
.halte .fiche dd ol,.halte .fiche dd ul,.halte ul.voorbeeld{display:block;margin:0;padding:0 0 0 20px}
.halte .fiche dd ol{list-style:decimal}
.halte .fiche dd ul,.halte ul.voorbeeld{list-style:disc}
.halte .fiche dd li{margin:0 0 3px;font-size:inherit;line-height:inherit}
.halte ul.voorbeeld{margin-top:6px;max-width:72ch}
.halte ul.voorbeeld li{margin:0 0 5px;font-size:15px;line-height:1.55}

/* ── voettekst ──────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--rand);padding:30px 0 34px;
  font-size:13.5px;color:var(--zacht);background:var(--vlak)}
footer.site .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
footer.site h3{margin:0 0 10px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kop);font-weight:700}
footer.site a{display:block;margin:0;padding:5px 0;color:var(--tekst);text-decoration:none}
footer.site .fbot a{display:inline;padding:0}
footer.site a:hover{color:var(--accent-tekst)}
footer.site .logo-f{font-weight:800;font-size:17px;color:var(--kop)}
footer.site .f-leus{margin-top:2px}
footer.site .f-wat{margin:13px 0 0;max-width:36ch}
footer.site .fbot{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;
  margin-top:30px;padding-top:18px;border-top:1px solid var(--rand);font-size:12.5px}
/* Op een telefoon: de twee kolommen met links naast elkaar, elk tikdoel 44px hoog. */
@media (max-width:700px){
  footer.site .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px}
  footer.site .fgrid > div:first-child{grid-column:1 / -1}
  footer.site .fgrid a{display:flex;align-items:center;min-height:44px;padding:4px 0;line-height:1.3}
  footer.site .fbot{margin-top:18px}
}

/* ── proza: blog, privacy, voorwaarden ──────────────────────────────── */
.artikel{max-width:68ch}
.artikel p,.artikel li{font-size:17px;line-height:1.7}
.artikel h2{display:block;margin:34px 0 0;font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-tekst)}
.artikel h2::before{content:none}
.artikel h2 + p,.artikel h3 + p{margin-top:10px}
.artikel h3{margin:28px 0 0;font-size:19px;color:var(--kop);font-weight:700}
.artikel .callout{border-left:3px solid var(--accent);padding:6px 0 6px 18px;font-weight:600;color:var(--kop)}
.artikel .note,.artikel .cta-note{margin:30px 0 0;padding:16px 20px;background:var(--vlak);border:1px solid var(--rand);border-radius:12px;font-size:15px}
.artikel .cta-note p{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--kop)}
.artikel .sinds{margin:0 0 24px;padding:12px 16px;border-left:3px solid var(--accent);background:var(--warm);border-radius:0 10px 10px 0;font-size:15px}
.artikel .src{margin-top:34px;padding-top:20px;border-top:1px solid var(--rand);font-size:15px;color:var(--zacht)}
.artikel .back{display:inline-block;margin-top:18px;font-weight:600}
.artikel .awrap{max-width:none;padding:0;margin:0}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.post-list li{padding:22px 24px;background:var(--kaart)}
.post-list .pmeta{margin:0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);font-weight:600}
.post-list .title{display:block;margin:8px 0 8px;font-size:19px;font-weight:700;color:var(--kop);text-decoration:none;line-height:1.3}
.post-list .title:hover{color:var(--accent-tekst)}
.post-list p{margin:0 0 10px;font-size:15px}
.post-list .more{font-weight:600;text-decoration:none}
.nieuwsbrief form{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0;align-items:center}
.nieuwsbrief input[type=email]{flex:1;min-width:220px;padding:12px 14px;border:1.5px solid var(--veldrand);border-radius:10px;font:inherit;background:var(--kaart);color:var(--kop)}
.kaartpagina{max-width:560px;margin:0 auto;text-align:center;padding:40px 0 20px}
.kaartpagina .check{width:56px;height:56px;border-radius:50%;background:var(--ok-vlak);color:var(--ok-tekst);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;margin:0 auto 18px}
.kaartpagina h1{font-size:clamp(26px,4vw,34px)}
.kaartpagina p{margin:14px auto 0;max-width:52ch}
.kaartpagina .btn{margin-top:24px}
.kaartpagina .hero-acties{margin-top:0}

/* ── waarmee u begint, op de homepage: vijf treden en twee zijtakken ──
 * Vijf treden in één rij, elke trede een stukje hoger dan de vorige. Op een
 * smal scherm staan ze onder elkaar, zonder trapje. Elke trede heeft zijn
 * actie en een tweede, stillere link naar de uitleg op de opleidingenpagina
 * (.trap-lees). Eronder twee zijtakken: coaching per uur en de scans.
 */
.trap{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}
.trap li{display:flex;flex-direction:column;background:var(--kaart);border:1.5px solid var(--rand-sterk);border-top:5px solid var(--accent);
  border-radius:14px;padding:14px 16px 12px;box-shadow:var(--schaduw)}
.trap li:nth-child(1){margin-top:40px} .trap li:nth-child(2){margin-top:30px} .trap li:nth-child(3){margin-top:20px}
.trap li:nth-child(4){margin-top:10px}
.trap-nr{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);
  color:var(--kop);font-weight:800;font-size:14px}
.trap h3{margin:10px 0 0;font-size:17px;line-height:1.25}
.trap .voor{margin-top:7px;align-self:flex-start}
.trap p{margin:6px 0 0;font-size:14px;line-height:1.45}
.trap .trap-prijs{margin-top:auto;padding-top:12px;font-size:18px;font-weight:800;color:var(--kop);line-height:1.25}
.trap .trap-prijs small{display:block;font-size:12.5px;font-weight:500;color:var(--zacht)}
.trap a{display:block;padding:11px 0;margin-top:2px;font-weight:650;font-size:14.5px}
.trap a.trap-lees{padding-top:0;margin-top:-6px;font-weight:500;font-size:13.5px;color:var(--tekst)}
.trap a.trap-lees:hover{color:var(--accent-tekst)}
.zijtakken{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zijtak{margin:0;padding:14px 18px;background:var(--kaart);border:1.5px dashed var(--veldrand);border-radius:14px;font-size:15px;max-width:none}
.zijtak b{color:var(--kop)}
.zijtak a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
.zijtak a.in-zin{display:inline;min-height:0}
.na-trap{margin:14px 0 0;font-size:15px;max-width:none}
.na-trap a.in-zin{display:inline;min-height:0;margin-right:0;font-weight:inherit}
.na-trap a:not(.in-zin){display:inline-flex;align-items:center;min-height:44px;font-weight:650;margin-right:18px}
@media (max-width:900px){
  .trap{grid-template-columns:1fr;gap:8px}
  .trap li,.trap li:nth-child(n){margin-top:0;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:2px 12px;align-items:start;
    border-top-width:1.5px;border-left:5px solid var(--accent);padding:12px 14px 6px}
  .trap h3{margin:3px 0 0;font-size:16.5px}
  .trap p{grid-column:2 / -1;margin:2px 0 0}
  .trap p:not(.trap-prijs){font-size:13.5px}
  /* Titel, label, tekst, prijs en link elk op een eigen regel: naast elkaar
     liepen de prijs en de link op een smal scherm door elkaar. */
  .trap h3{grid-column:2 / -1}
  .trap .voor{grid-column:2 / -1;justify-self:start;margin-top:4px}
  .trap a{grid-column:2 / -1;margin-top:0;font-size:14px}
  .trap .trap-prijs{grid-column:2 / -1;margin:0;padding:6px 0 0;font-size:16px}
  .trap .trap-prijs small{font-size:11.5px;line-height:1.3}
  .trap a.trap-lees{grid-column:2 / -1;margin-top:-8px}
  .zijtakken{grid-template-columns:1fr}
  .zijtak{padding:12px 14px 6px}
}

/* het nummer van een fase (opleidingen) */
.fase-nr{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  font-size:15px;font-weight:800;background:var(--accent);border:3px solid var(--accent);color:var(--kop)}

/* ── twee blokken naast elkaar: AI-verordening en gegevens ──────────── */
.duo{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo > div{background:var(--kaart);border:1.5px solid var(--rand-sterk);border-radius:14px;padding:18px 20px}
.duo h3{margin:0 0 8px;font-size:17px}
.duo p{margin:0 0 8px;font-size:15px;line-height:1.55}
.duo p:last-child{margin-bottom:0}
@media (max-width:760px){ .duo{grid-template-columns:1fr} }

/* ── het leskader: de oefening als scherm uit het leerportaal ─────────── */
.leskader{margin:22px 0 0;border:1.5px solid var(--rand-sterk);border-radius:16px;overflow:hidden;background:var(--kaart);
  box-shadow:0 2px 4px rgba(10,31,61,.05),0 16px 40px rgba(10,31,61,.10)}
.les-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 22px;background:var(--merk);color:#C6D6EC;font-size:13px}
.les-merk{font-weight:800;color:#fff;letter-spacing:.01em}
.les-merk::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:8px}
.les-pad i{font-style:normal;color:#9FB6D4;margin:0 4px}
.les-inhoud{padding:16px 22px 4px}
.les-etiket{margin:0;font-size:17px;color:var(--kop)}
.les-etiket .pil{margin-right:6px}
.les-opdracht{margin:8px 0 0;font-size:15px;max-width:78ch}
.les-les{margin:12px 0;padding:12px 16px;border-left:3px solid var(--accent);background:var(--vlak);border-radius:0 10px 10px 0;font-size:14.5px}
.les-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--rand);background:var(--vlak);font-size:13.5px;color:var(--zacht)}
@media (max-width:560px){ .les-kop,.les-inhoud,.les-voet{padding-left:16px;padding-right:16px} }

/* ── de schermreeks op "Mijn gereedschap" en op de homepage ───────────────
 * Per applicatie een vensterkader (.leskader) met twee of drie echte schermen
 * naast elkaar. De reeks is een gewone schuifbare rij met scroll-snap: vegen
 * en de pijltjestoetsen werken zonder script. De bediening staat in de
 * titelbalk van het kader, in beeld zodra het scherm in beeld is: vorige, de
 * teller ("1 van 3") en volgende, met tikdoelen van 44px. Hij staat in de
 * HTML en neemt zijn ruimte al in; met script (.jsf) wordt hij zichtbaar, en
 * met beweging (.js) komt de pauzeknop (.speel) erbij en speelt de reeks één
 * keer af. Op de homepage speelt de reeks niet vanzelf (data-geen-afspelen)
 * en staat er geen legenda: alleen het beeld en één bijschrift eronder.
 * Elk beeld heeft zijn width en height in de HTML, ook per <source>, zodat de
 * pagina niet verspringt als het laadt. De beelden maakt gereedschap/schermen.
 */
.tools{display:grid;gap:40px;margin:30px 0 0}
.tool{min-width:0}
.tool > h3{margin:0}
.tool > p{margin:8px 0 0;max-width:78ch}
.schermkader{margin:16px 0 0;max-width:1000px}
.schermreeks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;background:var(--vlak)}
.js .schermreeks{scroll-behavior:smooth}
.schermreeks:focus-visible{outline:3px solid var(--merk);outline-offset:-3px}
.scherm{flex:0 0 100%;min-width:0;scroll-snap-align:start;background:var(--kaart)}
.scherm picture,.scherm img{display:block}
.scherm img{width:100%;height:auto;border-bottom:1px solid var(--rand)}
.legenda{margin:0;padding:14px 22px 16px 46px;font-size:14.5px;line-height:1.5;color:var(--tekst)}
.legenda li{margin:0 0 6px;padding-left:4px}
.legenda li:last-child{margin-bottom:0}
.legenda li::marker{font-weight:800;color:var(--accent-tekst)}
.scherm-voet{margin:0;max-width:none}
.schermkader .les-pad{display:inline}   /* op een telefoon verbergt het leskader zijn pad; hier zegt het welk scherm dit is */
.schermkader .les-kop{min-height:60px;padding-top:8px;padding-bottom:8px}
.scherm-knoppen{display:inline-flex;align-items:center;gap:6px;margin-left:auto;visibility:hidden}
.jsf .scherm-knoppen{visibility:visible}
.scherm-knop{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0 0 3px;font:inherit;font-size:24px;line-height:1;
  color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;cursor:pointer}
.scherm-knop:hover{border-color:#fff}
.scherm-knop[disabled]{opacity:.4;cursor:default}
.scherm-teller{min-width:5.2em;text-align:center;font-size:13.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.les-kop .speel{min-height:44px;color:#fff;background:transparent;border-color:rgba(255,255,255,.55)}
.js .les-kop .speel:hover{border-color:#fff}
/* De uitklapregel: een knop met een driehoekje dat meedraait. */
.technici{margin:12px 0 0;max-width:1000px;font-size:14.5px}
.technici summary{cursor:pointer;font-weight:650;color:var(--kop);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 14px;
  list-style:none;border:1.5px solid var(--rand-sterk);border-radius:999px;background:var(--kaart)}
.technici summary::-webkit-details-marker{display:none}
.technici summary::before{content:"";flex:none;width:0;height:0;border:6px solid transparent;border-right-width:0;border-left:9px solid var(--accent-tekst)}
.technici[open] summary::before{transform:rotate(90deg)}
.technici summary:hover{border-color:var(--accent);background:var(--warm)}
@media (prefers-reduced-motion: no-preference){ .technici summary::before{transition:transform .15s ease} }
.tool-door{margin:6px 0 0;font-size:15px}
.tool-door a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
.technici p{margin:6px 0 0;font-size:14.5px}
.technici .sql{margin:10px 0 0;padding:14px 16px;overflow-x:auto;background:var(--merk-diep);color:#D9E4F5;border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;white-space:pre;tab-size:4}
.technici .sql:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ook-live{margin:44px 0 0}
@media (max-width:400px){
  .schermkader .les-kop{padding-left:12px;padding-right:12px}
  .scherm-teller{min-width:4.2em}
  .les-kop .speel{padding:5px 10px}
}
@media (max-width:640px){
  .tools{gap:32px}
  .legenda{padding:12px 16px 14px 38px;font-size:14px}
  .scherm-voet{font-size:13px}
  .schermkader .les-kop{gap:2px 12px}
}
/* Het gereedschap op de homepage: links drie regels, rechts één reeks. */
.gereedschap-duo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;align-items:start;margin:24px 0 0}
.gereedschap-duo .schermkader{margin:0}
.punten{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.punten li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.55}
.punten li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){ .gereedschap-duo{grid-template-columns:1fr;gap:22px} }

/* ── de mappenoefening: wat ziet de assistent als een map openstaat ─────
 * De vinkjes werken ook zonder script: met :has() volgt het antwoord de
 * aangevinkte mappen. Met script (.jsf) doet beweging.js hetzelfde met
 * klassen, voor browsers zonder :has(). Kan geen van beide, dan staan alle
 * regels er en zegt geen-script.css welke opdrachttekst dan klopt. De cursor
 * die het voordoet en de knop om dat opnieuw te zien horen bij de beweging
 * (.js). Op een smal scherm staat de vraag boven de mappen en het antwoord
 * er direct onder, zodat u ziet wat een vinkje doet.
 */
.mappen{position:relative;margin:14px 0 0;display:grid;grid-template-columns:minmax(240px,1fr) 1.4fr;gap:18px}
@media (max-width:760px){ .mappen{grid-template-columns:1fr;gap:10px} }
.mappen-boom{background:var(--kaart);border:1.5px solid var(--rand-sterk);border-top:5px solid var(--merk);border-radius:14px;padding:18px 20px;box-shadow:var(--schaduw)}
.mappen-kop{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);font-weight:700;margin:0 0 12px}
.map{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:10px 10px;border-radius:10px;cursor:pointer}
.map:hover{background:var(--vlak)}
.map input{width:20px;height:20px;accent-color:var(--merk);margin:0}
.mapnaam{font-weight:700;color:var(--kop);font-size:15px}
.bestanden{grid-column:2;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--zacht);line-height:1.5;overflow-wrap:anywhere}
.map-vertrouwelijk{font-weight:600;font-size:11px;color:#B3261E;letter-spacing:.04em}
.mappen-gesprek{display:grid;gap:12px;align-content:start}
.mappen-vraag{background:var(--vlak);border:1px solid var(--rand);border-radius:12px;padding:12px 16px;font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--kop)}
.mappen-vraag .lbl,.mappen-antwoord .lbl{display:block;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);font-weight:700;margin-bottom:6px}
.mappen-antwoord{background:var(--merk);color:#fff;border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.55;min-height:150px}
.mappen-antwoord .lbl{color:#FFB454}
.mappen-antwoord .regel{margin:0 0 10px}
.mappen-antwoord .regel i{color:#B5C7DF;font-style:normal;font-size:12.5px;overflow-wrap:anywhere}
.mappen-antwoord .regel.gevoelig{border-left:3px solid #FFB454;padding:6px 0 6px 10px;background:rgba(255,150,0,.12);border-radius:0 8px 8px 0}
.mappen-antwoord .regel.leeg{display:none;color:#C6D6EC}
.mappen-noot{margin:0;font-size:13.5px;color:var(--zacht);min-height:1.4em;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.mappen:has(input[data-map="projecten"]:not(:checked)) .regel[data-uit="projecten"]{display:none}
.mappen:has(input[data-map="verslagen"]:not(:checked)) .regel[data-uit="verslagen"]{display:none}
.mappen:has(input[data-map="personeel"]:not(:checked)) .regel[data-uit="personeel"]{display:none}
.mappen:not(:has(input[data-map="projecten"]:checked,input[data-map="verslagen"]:checked,input[data-map="personeel"]:checked)) .regel.leeg{display:block}
.jsf .mappen-antwoord .regel{display:none}
.jsf .mappen-antwoord .regel.aan{display:block}
/* de statusregel: open of dicht, zonder script met :has(), met script met .pers-dicht */
.mappen-status [data-als="dicht"]{display:none}
.mappen:has(input[data-map="personeel"]:not(:checked)) .mappen-status [data-als="open"]{display:none}
.mappen:has(input[data-map="personeel"]:not(:checked)) .mappen-status [data-als="dicht"]{display:inline}
.mappen.pers-dicht .mappen-status [data-als="open"]{display:none}
.mappen.pers-dicht .mappen-status [data-als="dicht"]{display:inline}
.les-opdracht .zonder-vinkjes{display:none}
/* de knop neemt zijn ruimte al in voor het script start, zodat er niets verspringt */
.speel{visibility:hidden}
.js .speel{visibility:visible}
.speel{display:inline-flex;align-items:center;flex:none;white-space:nowrap;min-height:36px;font:inherit;font-size:13px;font-weight:700;
  color:var(--kop);background:var(--kaart);border:1.5px solid var(--veldrand);border-radius:999px;padding:5px 14px;cursor:pointer}
.js .speel:hover{border-color:var(--merk)}
.speel .s-uit{display:none}
.speel.gepauzeerd .s-aan{display:none}
.speel.gepauzeerd .s-uit{display:inline}
.spook{position:absolute;left:0;top:0;z-index:5;pointer-events:none;display:flex;align-items:flex-start;gap:4px;opacity:0;
  transition:transform .9s cubic-bezier(.45,.05,.25,1),opacity .35s ease}
.spook.aan{opacity:1}
.spook svg{width:24px;height:24px;filter:drop-shadow(0 2px 3px rgba(10,31,61,.35))}
.spook-zegt{margin-top:18px;background:var(--accent);color:var(--kop);font-weight:800;font-size:13px;padding:4px 11px;border-radius:999px;
  opacity:0;transition:opacity .25s ease;white-space:nowrap;box-shadow:var(--schaduw)}
.spook.zegt .spook-zegt{opacity:1}
.js .map.tikt input{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
/* smal: vraag, mappen, antwoord onder elkaar, en alles wat korter kan korter */
@media (max-width:760px){
  .mappen-gesprek{display:contents}
  .mappen-vraag{order:-1}
  .mappen-boom{padding:12px 12px 6px}
  .mappen-kop{margin-bottom:6px}
  .map{padding:0 8px;min-height:44px}
  .bestanden{display:none}
  .mappen-vraag{padding:9px 14px}
  .mappen-antwoord{min-height:0;padding:12px 14px 4px;font-size:14px;line-height:1.5}
  .les-pad{display:none}
  .les-les{font-size:14px}
}

/* De oefening op de opleidingenpagina, bij de groepsles: op volle breedte van
   de kolom, en op een telefoon tot aan de rand van de route (over de lijn). */
.probeer{padding:18px 0 22px;border-bottom:1px solid var(--rand);scroll-margin-top:calc(var(--kop-h) + 70px)}
.probeer > p{margin:0;font-size:15px;line-height:1.55;max-width:74ch}
.probeer > h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--kop)}
.probeer .leskader{position:relative;z-index:2;margin-top:14px}
/* Tot 13 oktober 2026 stond hier voor de telefoon een marge van -42px: de
   kaart hing toen in een ingesprongen stap van de ladder. Sinds hij los onder
   de diensten staat, schoof die marge hem 26px buiten beeld. */

/* ── het verhaal, lang: over mij ────────────────────────────────────────
 * Een verticale draad met een knoop per hoofdstuk. Zonder beweging staat de
 * hele lijn oranje; met beweging groeit hij mee met het lezen (--lang).
 */
.knoop-bol{width:24px;height:24px;border-radius:50%;background:var(--accent);border:3px solid var(--accent);box-sizing:border-box}
.draad-lang{list-style:none;margin:28px 0 0;padding:0 0 0 44px;position:relative;max-width:760px}
.draad-lang::before,.draad-lang::after{content:"";position:absolute;left:10px;top:10px;width:4px;border-radius:2px}
.draad-lang::before{bottom:10px;background:var(--rand)}
.draad-lang::after{height:calc(100% - 20px);background:var(--accent)}
.hfst-lang{position:relative;padding:0 0 30px}
.hfst-lang:last-child{padding-bottom:0}
.hfst-lang .knoop-bol{position:absolute;left:-44px;top:0;z-index:1}
.hfst-lang .ondertitel{margin:1px 0 10px;font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-tekst);font-weight:700}
.hfst-lang p{font-size:16.5px;line-height:1.65;margin:0 0 10px}
.in-de-les{margin:14px 0 0 !important;padding:12px 16px;background:var(--vlak);border:1px solid var(--rand);border-radius:12px;font-size:15px !important}
.in-de-les .lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);font-weight:700;margin-bottom:4px}
.rollen{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;max-width:63ch}
.rollen li{padding:4px 11px;border:1px solid var(--rand-sterk);border-radius:999px;background:var(--kaart);font-size:14px;color:var(--kop)}
.rollen li b{font-weight:700}
.rollen-noot{margin:8px 0 0;font-size:13.5px;color:var(--zacht)}

/* ── wat studenten zeggen (BP-004, peildatum sep 2026) ──────────────── */
.citaten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 0}
@media (max-width:860px){ .citaten{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .citaten{grid-template-columns:1fr} }
.citaat{margin:0}
.citaat blockquote{margin:0;font-size:15.5px;line-height:1.55;color:var(--kop)}
.citaat blockquote::before{content:"\201C";display:block;font-size:40px;line-height:.6;color:var(--accent);margin-bottom:6px}
.citaat figcaption{margin-top:10px;font-size:13px;color:var(--zacht)}
.studenten-noot{margin-top:14px;font-size:13.5px;color:var(--zacht)}

/* ── de lijn met stations (homepage en mijn gereedschap) ────────────────
 * De route staat compleet in de SVG. Met beweging (.reis-aan) loopt er één
 * keer een oranje kop over de lijn en kleuren de stations als hij er is.
 * Daarna blijft hij staan; alleen de knop op de gereedschapspagina speelt hem
 * opnieuw, met het voorbeeld erbij. Alle tekeningen staan op een lichte
 * ondergrond (.reis-licht).
 *
 * Op de homepage (.reis-breed) is de tekening groot en breed: drie stations
 * waar ik bij ben (oranje), de splitsing waar ik terugstap (grijs, gestippeld)
 * en de helft van uw mensen (navy). De namen van de eerste drie stations
 * staan er als links in het raster (.lijn) direct onder, uitgelijnd op de
 * stations; in de tekening zelf staan alleen de namen van de tweede helft.
 * Onder 800px is de liggende tekening onleesbaar: dan is hij weg en staat
 * dezelfde lijst als staande lijn (.route, .halte, .knoop-bol).
 */
.reis{display:block;width:100%;max-width:440px;height:auto;margin:22px 0 0;overflow:visible}
.reis path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.reis .loop{stroke:var(--accent)}
.reis .st circle{fill:var(--accent);stroke:var(--accent);stroke-width:3}
.reis .kop{display:none}
.reis text{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.reis .lab{font-size:13px;font-weight:800}
.reis .sub{font-size:11px;font-weight:500}
@media (max-width:560px){ .reis .sub{display:none} .reis .lab{font-size:15px} }
.reis-vak{margin:22px 0 0}
.reis-h{max-width:640px}
.reis-v{display:none;max-width:360px}
@media (max-width:560px){ .reis-h{display:none} .reis-v{display:block} }
.reis-licht .basis{stroke:var(--rand-sterk)}
.reis-licht .pijl{stroke:var(--accent)}
.reis-licht .lab{fill:var(--kop);font-size:15px}
.reis-licht .sub{fill:var(--zacht);font-size:12px}
.reis-v .lab{font-size:17px} .reis-v .sub{font-size:13px;display:block}
.reis-licht .voorbeeld{font-size:12px;font-style:italic;fill:var(--accent-tekst);opacity:0}
.reis-licht .check circle{fill:var(--ok-vlak);stroke:var(--ok);stroke-width:2}
.reis-licht .check path{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.reis-licht .demo-knop rect{fill:var(--merk)}
.reis-licht .demo-knop text{fill:#fff;font-size:12px;font-weight:700}
.reis-licht.demo.klaar .demo-knop rect{fill:var(--accent)}
.reis-licht.demo.klaar .demo-knop text{fill:var(--kop)}
.reis-licht.demo .st.aan .voorbeeld{opacity:1}
@media (prefers-reduced-motion:reduce){ .reis-knoppen{display:none} .reis-licht .voorbeeld{opacity:1} }
.reis-knoppen{margin:14px 0 0}
.reis-noot{margin-top:12px;font-size:13.5px;color:var(--zacht)}
/* de splitsing en de tweede helft, leesbaar op wit */
.reis-licht .basis-ik,.reis-licht .loop-ik{stroke:var(--zacht);stroke-dasharray:5 6}
.reis-licht .basis-ik{stroke:var(--rand-sterk)}
.reis-licht .ikstip{fill:var(--zacht)}
.reis-licht .iktekst{font-size:14px;font-weight:600;font-style:italic;fill:var(--zacht)}
.reis-licht .loop-zelf{stroke:var(--merk)}
.reis-licht .st.zelf circle{fill:var(--merk);stroke:var(--merk)}
.reis-licht .st.zelf .lab{fill:var(--merk)}
.reis-breed{max-width:none;margin:0}
.reis-breed path{stroke-width:4}
.reis-breed .lab{font-size:16px}
.reis-breed .pijl{stroke:var(--merk)}
.reis-aan .loop,.reis-aan .loop-zelf{stroke-dasharray:100;stroke-dashoffset:100}
.reis-aan .loop-ik,.reis-aan .pijl,.reis-aan .ikstip{opacity:0;transition:opacity .35s ease}
.reis-aan .loop-ik.aan,.reis-aan .pijl.aan,.reis-aan .ikstip.aan{opacity:1}
.reis-aan .st circle{transition:fill .3s ease}
.reis-aan.speelt .kop{display:block;fill:var(--accent)}
/* de brede lijn op de homepage: de kop gloeit, de teksten lichten op en worden
   getypt zodra de kop bij hun station is; een knop stopt of herhaalt */
.reis-breed.reis-aan.speelt .kop{stroke:rgba(255,150,0,.32);stroke-width:10}
.reis-breed path{stroke-width:5}
.tikt::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:knipper 1s steps(1) infinite}
.reis .lab.tikt{text-decoration:none}
.js .lijn-vak .halte{transition:opacity .45s ease}
/* Niet verder dimmen dan dit: lopende tekst houdt zo 4,6:1 op --vlak. Dat een
   halte bereikt is, laat een korte warme gloed zien. */
.js .lijn-vak.lijn-speelt .halte:not(.bereikt){opacity:.85}
@keyframes halte-op{0%{background:var(--warm)}100%{background:transparent}}
.js .lijn-vak.lijn-speelt .halte.bereikt{animation:halte-op 1.6s ease-out 1;border-radius:8px}
.lijn-knop{margin:14px 0 0;min-height:36px}
@media (max-width:799px){ .lijn-knop{display:none} }
.reis-aan.reis-licht .st circle{fill:var(--grond);stroke:var(--rand-sterk)}
.reis-aan.reis-licht .st.aan circle{fill:var(--accent);stroke:var(--accent)}
.reis-aan.reis-licht .st.zelf.aan circle{fill:var(--merk);stroke:var(--merk)}
.reis-aan.reis-licht .check{opacity:0;transition:opacity .3s ease}
.reis-aan.reis-licht .st.aan .check{opacity:1}
.reis-aan.reis-licht .st.fout .check circle{stroke:#B3261E;fill:#FBE9E7}
.reis-aan.reis-licht .st.fout .check path{opacity:0}

/* ── de route door een fase (opleidingen) ───────────────────────────────
 * Vier stations aan één oranje lijn: wat ik doe, wat u krijgt, waarom zo en
 * de vormen. De tekst staat er altijd. Met beweging (.route-aan) loopt de
 * lijn mee met het lezen en kleurt een knoop als de lijn er is.
 */
.ladder-route{margin:26px 0 0}
.ladder-stap{display:flex;align-items:center;gap:16px;margin:34px 0 0;font-size:24px;letter-spacing:-.02em;color:var(--kop);
  scroll-margin-top:calc(var(--kop-h) + 70px)}
.ladder-stap:first-child{margin-top:0}
.ladder-stap .fase-nr{margin-left:-4px}
.plan-winst{margin:8px 0 0 54px;font-size:17px;font-weight:600;color:var(--kop);max-width:70ch}
.route{list-style:none;margin:18px 0 0;padding:0 0 0 54px;position:relative}
.route::before,.route::after{content:"";position:absolute;left:12px;top:12px;width:4px;border-radius:2px}
.route::before{bottom:-40px;background:var(--rand)}
.route:last-child::before{bottom:18px}
.route::after{height:calc(100% - 30px);background:var(--accent)}
.halte{position:relative;padding:0 0 30px}
.halte:last-child{padding-bottom:0}
.halte > .knoop-bol{position:absolute;left:-54px;top:-3px;width:28px;height:28px;z-index:1}
.halte > h3,.halte > h4{margin:0 0 10px;padding-top:2px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent-tekst)}
.halte ol,.halte ul{list-style:none;margin:0;padding:0;display:grid;gap:9px 32px}
.halte li{font-size:15.5px;line-height:1.5;color:var(--tekst)}
.plan-doe > ol{counter-reset:stap}
.plan-doe > ol > li{counter-increment:stap;position:relative;padding-left:38px}
.plan-doe > ol > li::before{content:counter(stap);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;background:var(--warm);border:1.5px solid var(--accent);color:var(--kop);font-size:13px;font-weight:800}
.plan-krijgt li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.halte .vink{margin-top:3px;flex:none;background:var(--ok-vlak);border-radius:50%}
.halte .vink path{fill:none;stroke:var(--ok-tekst);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.plan-waarom blockquote{margin:0;padding:0;border:0;background:none;max-width:68ch}
.plan-waarom blockquote p{margin:0;font-size:17px;line-height:1.55;font-style:italic;color:var(--kop)}
@media (min-width:900px){
  .plan-doe > ol{grid-template-columns:1fr 1fr}
  .plan-krijgt > ul{grid-template-columns:repeat(3,1fr)}
}
.vormen{border-top:1px solid var(--rand)}
.vorm-rij{padding:18px 0;border-bottom:1px solid var(--rand);scroll-margin-top:calc(var(--kop-h) + 70px)}
.vorm-rij h4,.vorm-rij h5{margin:0;font-size:18px;font-weight:700;color:var(--kop);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  letter-spacing:0;text-transform:none;padding:0}
.vorm-rij p{margin:6px 0 0;font-size:15px;line-height:1.55;max-width:74ch}
.vorm-rij .prijs{margin-top:8px;font-weight:700;color:var(--kop)}
.vorm-rij .klacht{margin-top:6px;font-size:14px;font-style:italic;color:var(--zacht)}
.vorm-rij .tabelwrap{margin-top:12px}
/* de fiche per vorm: vaste velden onder elkaar, het label links */
.fiche{margin:10px 0 0;display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:5px 18px;max-width:78ch;font-size:14.5px;line-height:1.5}
.fiche dt{font-weight:700;color:var(--kop)}
.fiche dd{margin:0}
@media (max-width:600px){ .fiche{grid-template-columns:1fr;gap:0} .fiche dt{margin-top:7px} }
.vorm-rij .actie{margin-top:10px}
.vorm-rij .actie a,.vorm-rij .prijs a{font-weight:650}
/* Elke fase een eigen vlak, elke vorm een kaart die openklapt. Dicht staat er de
   naam, voor wie, de duur en de prijs; de uitleg en de fiche komen bij een klik.
   Werkt zonder script; een link naar #groepsles opent de kaart (beweging.js). */
.fase{margin:22px 0 0;padding:26px 28px 14px;border-radius:20px}
.fase:first-child{margin-top:0}
.fase-1{background:var(--vlak)}
.fase-2{background:var(--warm)}
.fase-3{background:var(--ok-vlak)}
.fase .ladder-stap{margin-top:0}
.fase .route::before{background:rgba(10,31,61,.12)}
.fase .halte.plan-doe,.fase .halte.plan-krijgt,.fase .halte.plan-waarom{padding-bottom:6px}
.fase-hoe > summary,details.vorm > summary{list-style:none;cursor:pointer}
.fase-hoe > summary::-webkit-details-marker,details.vorm > summary::-webkit-details-marker{display:none}
.fase-hoe > summary{display:inline-flex;align-items:center;gap:10px;min-height:40px}
.fase-hoe > summary h4{margin:0}
.fase-hoe > summary::after,details.vorm > summary::after{content:"+";font-size:22px;font-weight:600;line-height:1;color:var(--accent-tekst)}
.fase-hoe[open] > summary::after,details.vorm[open] > summary::after{content:"\2013"}
.fase .vormen{border-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:6px}
details.vorm{min-width:0;padding:0;border:1px solid var(--rand-sterk);border-radius:14px;background:var(--kaart)}
details.vorm > summary{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 20px;align-items:baseline;padding:14px 48px 14px 18px;border-radius:14px}
details.vorm > summary:hover{background:var(--vlak)}
details.vorm > summary::after{position:absolute;right:18px;top:13px}
details.vorm[open] > summary{border-radius:14px 14px 0 0;border-bottom:1px solid var(--rand)}
.vorm-prijs{grid-column:2;grid-row:1;font-size:15px;font-weight:700;color:var(--kop);text-align:right}
.vorm-meta{grid-column:1 / -1;font-size:14px;color:var(--tekst)}
.vorm-klacht{grid-column:1 / -1;font-size:14px;font-style:italic;color:var(--zacht)}
.vorm-in{padding:4px 18px 18px}
@media (max-width:600px){
  .fase{padding:18px 14px 8px;border-radius:16px}
  details.vorm > summary{grid-template-columns:1fr;padding:12px 42px 12px 14px}
  .vorm-prijs{grid-column:1;grid-row:auto;text-align:left}
  .vorm-in{padding:2px 14px 14px}
}
/* ── de vier diensten op de opleidingenpagina ─────────────────────────────
 * Vier grote kaarten langs de lijn van de homepage: inschatten, opleiden
 * (kant-en-klaar en op maat), ernaast blijven. Naam, prijs en knop staan er
 * altijd; de uitleg klapt open, en daarbinnen de varianten. Werkt zonder script. */
.deur{margin:22px 0 0;padding:18px 22px;display:grid;grid-template-columns:1fr auto auto;gap:8px 22px;align-items:center;
  border:1.5px dashed var(--veldrand);border-radius:16px;background:var(--kaart);scroll-margin-top:calc(var(--kop-h) + 20px)}
.deur h3{margin:0;font-size:18px}
.deur p{margin:4px 0 0;font-size:15px;max-width:70ch}
.deur .deur-prijs{margin:0;font-size:17px;font-weight:700;color:var(--kop)}
.deur .dienst-knop{margin:0}
.diensten{margin:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.dienst{min-width:0;padding:22px 24px 16px;border-radius:20px;scroll-margin-top:calc(var(--kop-h) + 20px)}
.dienst-1{background:var(--vlak)}
.dienst-2,.dienst-3{background:var(--warm)}
.dienst-4{background:var(--ok-vlak)}
/* Op het groene vlak haalt de gewone accentkleur 4,42:1; deze tint haalt de 4,5. */
.dienst-4 .dienst-stap,.dienst-4 a:not(.btn){color:#8F4D00}
.dienst-kop{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:start}
.dienst-kop .fase-nr{margin-top:2px}
.dienst-stap{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-tekst)}
.dienst-naam h3{margin:2px 0 0;font-size:24px;letter-spacing:-.02em}
.dienst-regel{margin:6px 0 0;font-size:16.5px;max-width:62ch;color:var(--tekst)}
.dienst-prijs{margin:0;text-align:right;font-size:20px;font-weight:700;color:var(--kop);white-space:nowrap}
.dienst-prijs small{display:block;max-width:230px;margin-left:auto;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--tekst);white-space:normal}
.dienst-knop{margin:14px 0 0}
.dienst-meer{margin:14px 0 0;border-top:1px solid rgba(10,31,61,.12)}
.dienst-meer > summary,details.sub > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700;color:var(--kop)}
.dienst-meer > summary::-webkit-details-marker,details.sub > summary::-webkit-details-marker{display:none}
.dienst-meer > summary::after,details.sub > summary::after{content:"+";font-size:22px;font-weight:600;line-height:1;color:var(--accent-tekst)}
.dienst-meer[open] > summary::after,details.sub[open] > summary::after{content:"\2013"}
.dienst-in{padding:2px 0 8px}
.dienst-in p{margin:8px 0 0;font-size:15.5px;line-height:1.55;max-width:74ch}
.dienst-in .prijs{font-weight:700;color:var(--kop)}
.dienst-in .prijs a{font-weight:650}
.dienst-in .fiche dd ul,.dienst-in .fiche dd ol{margin:0;padding:0 0 0 20px}
.dienst-in .fiche dd ul{list-style:disc}
.dienst-in .fiche dd ol{list-style:decimal}
.dienst-in .fiche dd li{margin:0 0 3px}
details.sub{margin:10px 0 0;padding:0 16px;border:1px solid var(--rand-sterk);border-radius:12px;background:var(--kaart);scroll-margin-top:calc(var(--kop-h) + 20px)}
details.sub > summary{font-size:15.5px}
.sub-in{padding:0 0 14px;border-top:1px solid var(--rand)}
.sub-in .tabelwrap{margin-top:12px}
.ladder ~ .probeer,#ladder > .probeer{margin-top:28px}
@media (max-width:700px){
  .deur{grid-template-columns:1fr;padding:16px}
  .dienst{padding:18px 16px 12px;border-radius:16px}
  .dienst-kop{grid-template-columns:auto 1fr}
  .dienst-prijs{grid-column:1 / -1;text-align:left}
  .dienst-prijs small{margin-left:0;max-width:none}
  .dienst-naam h3{font-size:21px}
  .dienst-knop .btn{display:flex;justify-content:center}
  details.sub{padding:0 12px}
}
.halte-door{padding-top:6px;min-height:40px}
.door{display:inline-flex;align-items:center;gap:12px;font-size:16.5px;font-weight:700;color:var(--kop);text-decoration:none}
.door .fase-nr{position:absolute;left:-58px;top:0;z-index:1}
.door:hover span:not(.fase-nr){color:var(--accent-tekst)}
.door > span:not(.fase-nr){padding:6px 0}
@media (max-width:600px){
  .route{padding-left:42px}
  .route::before,.route::after{left:9px}
  .halte > .knoop-bol{left:-42px;width:22px;height:22px}
  .door .fase-nr{left:-46px;width:32px;height:32px}
  .plan-winst{margin-left:0}
  .ladder-stap .fase-nr{margin-left:-5px;width:32px;height:32px}
}
.js .route.route-aan::after,.js .draad-lang::after{height:var(--lang,0px);transition:height .4s ease}
.js .route.route-aan .halte > .knoop-bol,.js .draad-lang .hfst-lang .knoop-bol{background:var(--grond);border-color:var(--rand-sterk);transition:background .3s ease,border-color .3s ease}
.js .route.route-aan .halte.gedaan > .knoop-bol,.js .draad-lang .hfst-lang.gedaan .knoop-bol{background:var(--accent);border-color:var(--accent)}

/* ── het raster onder de lijn op de homepage ────────────────────────────
 * Eén lijst voor breed en smal. Smal is het een staande route (hierboven);
 * vanaf 800px een raster van vier kolommen dat op de stations in de tekening
 * is uitgelijnd: kolom vier begint bij de splitsing.
 */
.lijn-vak{margin:26px 0 0}
.lijn.route{margin-top:0}
.lijn .halte{padding-bottom:22px}
.lijn .halte > h3{margin:0 0 2px;padding:0;font-size:18px;letter-spacing:-.01em;text-transform:none;font-weight:800;color:var(--kop)}
.lijn .halte > h3 a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.lijn .halte > h3 a:hover{color:var(--accent-tekst)}
.lijn .halte > p{margin:0;font-size:15.5px;line-height:1.5;max-width:46ch}
.lijn .lijn-zelf > h3{padding:9px 0 8px;color:var(--merk)}
.lijn .halte.lijn-zelf > .knoop-bol,
.js .lijn.route.route-aan .halte.lijn-zelf.gedaan > .knoop-bol{background:var(--merk);border-color:var(--merk)}
@media (min-width:800px){
  .lijn.route{display:grid;grid-template-columns:19.3% 19.3% 19.3% 1fr;padding:0}
  .lijn.route::before,.lijn.route::after{content:none}
  .lijn .halte{padding:0 20px 0 0}
  .lijn .halte:last-child{padding-right:0}
  .lijn .halte > .knoop-bol{display:none}
  .lijn .halte > h3 a{min-height:40px}
  .lijn .lijn-zelf > h3{padding:7px 0 6px}
}
@media (max-width:799px){ .reis-breed{display:none} }

/* ── de fasebalk: de drie fasen reizen mee (opleidingen) ────────────────
 * Met script (.js-aan) hangt hij vast onder het menu zodra de eerste fasekop
 * voorbij is. Op een telefoon is het een compacte balk van drie gelijke
 * vakken over de breedte, met tikdoelen van 44px. Zonder script is het een
 * gewone rij van drie links boven de fasen.
 */
.fb-in{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;background:var(--kaart);border:1.5px solid var(--rand);
  border-radius:999px;box-shadow:var(--schaduw);white-space:nowrap}
.fb-in a{display:inline-flex;align-items:center;gap:9px;padding:5px 16px 5px 5px;border-radius:999px;text-decoration:none;
  color:var(--zacht);font-size:14.5px;font-weight:700;line-height:1}
.fb-in a .fase-nr{width:30px;height:30px;font-size:13.5px;background:var(--grond);border-color:var(--rand-sterk);color:var(--zacht)}
.fb-in a + a{margin-left:22px;position:relative}
.fb-in a + a::before{content:"";position:absolute;left:-24px;top:50%;width:22px;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--rand-sterk)}
.fb-in a:hover{background:var(--vlak);color:var(--kop)}
.fb-in a.nu{background:var(--warm);color:var(--kop)}
.fb-in a.gehad{color:var(--kop)}
.fb-in a.nu .fase-nr,.fb-in a.gehad .fase-nr{background:var(--accent);border-color:var(--accent);color:var(--kop)}
.fb-in a.nu::before,.fb-in a.gehad::before{background:var(--accent)}
/* De balk rekent erop dat het script komt: hij neemt geen ruimte in en is
   onzichtbaar tot .toon. Zo verspringt er niets als het script start. Zonder
   script zet geen-script.css hem als gewone rij boven de fasen. */
.fase-balk{position:sticky;top:var(--kop-h);height:0;margin:0;z-index:40}
.fase-balk .fb-in{position:absolute;left:0;right:0;top:-1px;display:flex;justify-content:center;padding:8px 12px;
  border-radius:0 0 18px 18px;border-top-color:transparent;visibility:hidden}
.fase-balk.js-aan.toon .fb-in{visibility:visible}
@media (max-width:759px){
  .fase-balk .fb-in{gap:2px;padding:4px;border-radius:0 0 14px 14px}
  .fb-in a{flex:1 1 0;min-width:0;justify-content:center;gap:5px;min-height:44px;padding:4px 2px;font-size:13px;border-radius:10px}
  .fb-in a .fase-nr{width:22px;height:22px;font-size:12px;border-width:2px}
  .fb-in a + a{margin-left:0}
  .fb-in a + a::before{content:none}
  .fb-lang{display:none}
  .fb-kap{display:inline-block}
  .fb-kap::first-letter{text-transform:uppercase}
  .ladder-stap,.vorm-rij,.probeer{scroll-margin-top:calc(var(--kop-h) + 62px)}
}
@media (max-width:340px){ .fb-in a{font-size:12px;gap:4px} .fb-in a .fase-nr{width:20px;height:20px} }