/* stijl2a.css — de vorm van Quandron (Dagdienst · werkbank).
   GEGENEREERD door maak_stijl2a.py uit nc_stijl.py. Niet met de
   hand bewerken: de volgende ronde overschrijft het.
   Kern-vingerafdruk: da42258266cfb035 */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:block;src:url('/font/archivo-400.woff2') format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:block;src:url('/font/archivo-500.woff2') format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:block;src:url('/font/archivo-700.woff2') format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:block;src:url('/font/archivo-800.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:block;src:url('/font/plexmono-400.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:block;src:url('/font/plexmono-500.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:block;src:url('/font/plexmono-600.woff2') format('woff2')}:root{--grond:#eef1f4;--vlak:#ffffff;--lijn:#bcc7d1;--lijn2:#dde4ea;--diep:#101d26;--diep2:#1c3040;--dim:#4c5a67;--opdiep:#b3c2cf;--opdonker:#ffffff;--amber:#ffb300;--amber-op:#14100a;--amberz:#fff3d4;--amberz-op:#553d00;--amber-rand:#eed398;--staal:#175a94;--staalz:#f1f6fa;--groen:#136c3f;--groenz:#f1f7f3;--rood:#a32418;--pil:#bcc7d1;--font-app:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;--maat-hero:clamp(30px,7.2vw,52px);--maat-h1:30px;--maat-h2:22px;--maat-kaartkop:15px;--maat-tekst:15px;--maat-lees:17px;--maat-knop:14px;--maat-veld:15px;--maat-klein:13px;--maat-label:11px;--maat-bedrag:24px;--letter-kop:-.02em;--letter-kop-strak:-.03em;--letter-label:.1em;--regel-tekst:1.55;--regel-kop:1.1;--raak:44px;--veld-h:46px;--knop-h:52px;--kop-h:60px;--kaart-pad:14px;--paneel-pad:20px;--bg:var(--grond);--kaart:var(--vlak);--wit:var(--vlak);--zij:var(--diep);--zij2:var(--diep2);--kleur:var(--diep);--navy:var(--diep);--navy2:var(--diep2);--ink:var(--diep);--tekst:var(--diep);--grijs:var(--dim);--accent:var(--amber);--accent2:var(--amber);--rand:var(--lijn);--jsv:var(--groen);--jse:var(--staal);--radius:0;--schaduw:none;}*{border-radius:0!important;box-shadow:none!important}.rond,.rond::before,.rond::after{border-radius:50%!important}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-app);font-size:var(--maat-tekst);line-height:var(--regel-tekst);color:var(--diep);background:var(--grond);-webkit-font-smoothing:antialiased}input,select,textarea,button{font-family:var(--font-app);font-size:var(--maat-veld)}h1,h2,h3,h4{font-family:var(--font-app);font-weight:800;letter-spacing:var(--letter-kop);line-height:var(--regel-kop)}.mono,.getal,.cijfer,.bedrag,.euro,.prijs,.aantal,td.num,th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}table{font-variant-numeric:tabular-nums}.getal,.bedrag,.euro,.prijs,td.num{text-align:right;white-space:nowrap}.adres{font-family:var(--font-mono);font-size:var(--maat-klein);overflow-wrap:anywhere}button,.knop,a.knop,input[type=submit],input[type=button],select,.filterchip,.actchip,.statuschip,.schakel a,.tab,.pil{min-height:var(--raak);display:inline-flex;align-items:center;justify-content:center}input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=search],input[type=password],input[type=url],select,textarea{min-height:var(--veld-h);padding:10px 12px;border:1px solid var(--lijn);background:var(--vlak);color:var(--diep)}textarea{min-height:96px;padding:12px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--amber);outline-offset:2px}input:focus,select:focus,textarea:focus{outline:3px solid var(--amber);outline-offset:2px;border-color:var(--staal)}a:hover,button:hover{transition:none}.zijbalk{background:var(--diep);color:var(--opdiep);border-right:1px solid var(--diep2)}.logo{font-family:var(--font-app);font-weight:800;color:var(--vlak);letter-spacing:var(--letter-kop-strak)}.zijbalk .logo span{color:var(--amber)}.logo small{font-family:var(--font-mono);font-size:var(--maat-label);letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--opdiep)}.menu a,.navkop{color:var(--opdiep);min-height:var(--raak);font-size:var(--maat-tekst);font-weight:600}.menu a:hover,.navkop:hover{background:var(--diep2);color:var(--vlak)}.menu a.actief{background:var(--staal);color:var(--vlak)}.mdot{background:var(--opdiep)}.mbadge{background:var(--amber);color:var(--amber-op);font-weight:700;font-family:var(--font-mono);min-width:20px;height:20px}.gebruiker{border-top:1px solid var(--diep2);color:var(--opdiep);font-size:var(--maat-klein)}.gebruiker a{color:var(--amber);font-weight:700}.top h1{font-size:var(--maat-h1);font-weight:800;letter-spacing:var(--letter-kop-strak)}.schakel{background:var(--grond);border:1px solid var(--lijn);padding:0}.schakel a{color:var(--dim);font-weight:700;padding:0 18px}.schakel a.aan{background:var(--staal);color:var(--vlak)}.zoek,.zoekhero .zoek{background:var(--vlak);border:1px solid var(--lijn);font-size:var(--maat-veld)}.zoekhero{background:var(--vlak);border:1px solid var(--lijn);padding:12px 14px}.kaart,.krt,.formkaart,.mailkaart,.leesbox{background:var(--vlak);border:1px solid var(--lijn);padding:var(--kaart-pad)}.kaart .cijfer{font-family:var(--font-mono);font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}.kaart .label{font-family:var(--font-mono);font-size:var(--maat-label);letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--dim)}.paneel{background:var(--vlak);border:1px solid var(--lijn);padding:var(--paneel-pad)}.paneel h2{font-size:var(--maat-kaartkop);font-weight:800;border-bottom:1px solid var(--lijn);padding-bottom:11px}table.lijst th{font-family:var(--font-mono);font-size:var(--maat-label);letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--lijn);font-weight:400}table.lijst td{border-bottom:1px solid var(--lijn2)}table.lijst tr:hover td{background:var(--staalz)}.knop,a.knop,button.knop,input[type=submit]{background:var(--amber);color:var(--amber-op);border:1px solid var(--amber);font-weight:700;font-size:var(--maat-knop);padding:0 18px}.knop:hover{border-color:var(--diep)}.knop.groot{min-height:var(--knop-h);font-size:16px;padding:0 26px}.knop.stil{background:var(--vlak);color:var(--diep);border:1px solid var(--lijn)}.knop.stil:hover{border-color:var(--staal)}.knop.rood,.knop.gevaar{background:var(--vlak);color:var(--rood);border:1px solid var(--rood)}.badge{font-family:var(--font-mono);font-size:var(--maat-label);letter-spacing:.04em;text-transform:uppercase;font-weight:600;padding:3px 8px;border:1px solid transparent}.b-nieuw,.b-bezig,.b-jse{background:var(--staal);color:var(--vlak)}.b-klaar,.b-jsv,.b-wa{background:var(--groen);color:var(--vlak)}.b-wacht{background:var(--amberz);color:var(--amberz-op);border-color:var(--amber-rand)}.b-pauze{background:var(--rood);color:var(--vlak)}.b-mail{background:var(--grond);color:var(--dim);border-color:var(--lijn)}.b-dry{background:var(--grond);color:var(--dim);border-color:var(--lijn)}.filterchip,.actchip,.statuschip{background:var(--vlak);border:1px solid var(--lijn);color:var(--diep);padding:0 14px;font-size:var(--maat-knop);font-weight:600}.filterchip:hover,.actchip:hover{border-color:var(--staal)}.filterchip.aan,.actchip.actief{background:var(--staal);color:var(--vlak);border-color:var(--staal)}.filterlabel{font-family:var(--font-mono);font-size:var(--maat-label);letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--dim)}.fstap,.stap{background:var(--vlak);border:1px solid var(--lijn)}.fstap .fnum,.stap .num{font-family:var(--font-mono);color:var(--staal);font-weight:600}.fout{background:var(--vlak);border:1px solid var(--rood);border-left:3px solid var(--rood);color:var(--diep);padding:12px 14px}.goed,.melding{background:var(--groenz);border:1px solid var(--lijn);border-left:3px solid var(--groen);color:var(--diep);padding:12px 14px}.let-op,.waarschuwing{background:var(--amberz);border:1px solid var(--amber-rand);border-left:3px solid var(--amber);color:var(--amberz-op);padding:12px 14px}.leeg{color:var(--dim)}.hero{background:var(--vlak);border:1px solid var(--lijn);border-top:4px solid var(--amber);padding:24px}.hero h2{font-size:var(--maat-h2)}.gebruiker a{display:inline-flex;align-items:center;min-height:var(--raak)}.hamburger{min-width:var(--raak);min-height:var(--raak);display:inline-flex;align-items:center;justify-content:center;color:var(--diep)}.kfl-btn,.lg-go,.prim,.kfl-pv-b.o,#kfh-btn,.knop,button.prim{color:var(--amber-op)}.kfl-btn,.lg-go,.prim{background:var(--amber);border:1px solid var(--amber)}.kfl-link,.kp-del,a.kfl-link,.lg-sub a,.kfl-cta a,.kfl-demo a{color:var(--staal)}.lg-demopin,.kfl-demo{background:var(--amberz);border:1px solid var(--amber-rand);color:var(--amberz-op)}.lg-demopin b,.lg-demopin strong,.lg-demopin .pin{color:var(--amberz-op)}.kfl-link,.kfl-cta a,.lg-sub a,.kfl-terug{display:inline-flex;align-items:center;min-height:var(--raak)}input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:22px}label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:inline-flex;align-items:center;gap:8px;min-height:var(--raak)}.kfl-btn *,.lg-go *,.prim *,#kfh-btn *,.knop *{color:inherit}.keypad button.kp-del{color:var(--staal)}.lg-demopin,.lg-demopin *{color:var(--amberz-op)}.kfl-split,.kfl-cta,.kfl-welkom-sub,.kfl-voet,.kfl-veilig,.kfl-klein,.lg-sub,.kfl-sub{color:var(--dim)}.kfl-split::before,.kfl-split::after{background:var(--lijn)}.kfl-cta a,.kfl-demo a,.kfl-terug,.lg-voet a,.kfl-voet a{display:inline-flex;align-items:center;min-height:var(--raak)}.kfl-veld input,.kfl-in,input.kfl-in,.kfl-form input{min-height:var(--veld-h)}.top button,.top .knopje{min-width:var(--raak);min-height:var(--raak)}.kfl-pv-chip{color:var(--amber-op)}.kfl-demo b,.kfl-demo strong,.kfl-demo em{color:var(--amberz-op)}.kfl-logo b{color:var(--diep)}.kfl-logo span{color:var(--staal)}.kfl-brand .kfl-logo b{color:var(--vlak)}.kfl-brand .kfl-logo span{color:var(--amber)}.kfl-form .kfl-demo b,.kfl-form .kfl-demo strong{color:var(--amberz-op)}.kfl-form .kfl-form-logo span,.kfl-form .kfl-form-logo span span{color:var(--staal)}.kfl-form .kfl-form-logo b{color:var(--diep)}.login-vlak h1 span{color:var(--staal)}.login-vlak input,.login-vlak input[type=email],.login-vlak input[type=text]{min-height:var(--veld-h)}.login-vlak a{display:inline-flex;align-items:center;min-height:var(--raak)}.lg-voet a,.lg-onder a,#login a{display:inline-flex;align-items:center;min-height:var(--raak)}.ftab-deur,a.ftab-deur,.facttabs a.ftab-deur,.factkeuze a.ftab-deur{background:var(--amber);color:var(--amber-op);border:1px solid var(--amber)}.ftab-deur:hover,.facttabs a.ftab-deur:hover,.factkeuze a.ftab-deur:hover{background:var(--amber);color:var(--amber-op);border-color:var(--diep)}.ftab-aanbevolen{background:var(--vlak);color:var(--amber-op);border:1px solid var(--amber-op);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em}.ftab-deur:hover .ftab-aanbevolen{background:var(--vlak);color:var(--amber-op)}.f-kortknop,.f-klbewerk,.f-klbtn:hover{color:var(--staal)}.f-label,.f-voet,.factpaper small,.f-kk-mail{color:var(--dim)}.f-logo-leeg,.f-logotekst{color:var(--dim)}.pm-in,.kf-in,.fin-geldig,.factpaper input,.factpaper select{min-height:var(--veld-h)}@media print{body{background:var(--vlak)}.zijbalk,.top,.menu,.geen-print{display:none!important}.kaart,.paneel{border:1px solid var(--lijn)}}
/* ---------------------------------------------------------------- grond */
body{font-family:var(--font-app);color:var(--diep);background:var(--vlak);
line-height:var(--regel-tekst)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{color:var(--diep);font-weight:800;letter-spacing:var(--letter-kop)}
h1{letter-spacing:var(--letter-kop-strak)}
p.lead,.lead{font-size:var(--maat-lees);color:var(--dim)}

/* ---------------------------------------------------------------- links */
/* Amber is een VLAK waar je op drukt, nooit een letter: op wit haalt het
   1,79:1. Een link is staalblauw — de kleur die zegt "hier kun je heen" —
   en die haalt 5,6:1. De site had de linkkleur op elf plekken los staan;
   dit is de enige plek waar hij nog staat. */
a{color:var(--staal)}
a:hover{color:var(--diep)}
/* De uitzonderingen, en het zijn er drie: een knop (amber vlak met donkere
   tekst), de navigatie (bijtekst tot je erop staat) en de voettekst (die
   staat op donker). */
a.btn,.btn a,a.btn:hover{color:var(--amber-op)}
nav .navlinks a,nav .navlinks a:hover{color:var(--dim)}
footer a,footer a:hover{color:var(--opdiep)}
.logo,.logo:hover{color:var(--vlak);min-height:var(--raak);
display:inline-flex;align-items:center}
/* De kruimelbalk is een rij links en dus een rij raakvlakken. */
.kruim,.krui,.breadcrumb{color:var(--dim);min-height:var(--raak);
display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.stempel,.klein,.meta{color:var(--dim)}

/* ------------------------------------------------------------ navigatie */
nav{background:var(--diep);border-bottom:1px solid var(--diep2);
backdrop-filter:none}
nav .wrap{min-height:var(--kop-h)}
.logo{color:var(--vlak);font-weight:800;letter-spacing:var(--letter-kop-strak)}
.logo span{color:var(--amber)}
.navlinks a{color:var(--dim);font-weight:600;min-height:var(--raak);
display:inline-flex;align-items:center}
.navlinks a:hover{color:var(--diep)}

/* ------------------------------------------------------------------ CTA */
/* Amber is ACTIE. De tekst erop is --amber-op: 11,2:1. Wit op amber is
   1,8:1 en staat daarom nergens op deze site. */
.btn,a.btn,button.btn{background:var(--amber);color:var(--amber-op);
border:1px solid var(--amber);font-weight:700;font-size:16px;
min-height:var(--knop-h);padding:0 28px;display:inline-flex;
align-items:center;justify-content:center;transition:none}
.btn:hover{background:var(--amber);border-color:var(--diep);transform:none}
.btn.ghost{background:var(--vlak);color:var(--diep);border:1px solid var(--lijn)}
.btn.ghost:hover{background:var(--vlak);color:var(--diep);
border-color:var(--staal)}
nav .btn{min-height:var(--raak);padding:0 18px;font-size:var(--maat-knop)}

/* ----------------------------------------------------------------- hero */
.hero{background:var(--grond);border-bottom:1px solid var(--lijn)}
.hero h1{font-size:var(--maat-hero);line-height:1.04}
/* De gekleurde nadruk in de kop is een MARKERING, geen letterkleur: amber
   als vlak met donkere tekst erop, zoals een markeerstift. */
.hero h1 em,.hero h1 .mark{background:var(--amber);color:var(--amber-op);
font-style:normal;padding:0 .08em}
.eyebrow{background:var(--vlak);border:1px solid var(--lijn);color:var(--staal);
font-family:var(--font-mono);font-size:var(--maat-label);
letter-spacing:var(--letter-label);text-transform:uppercase;font-weight:400;
padding:7px 12px;display:inline-block}
/* Wazige gekleurde vlekken achter de hero: diepte uit onscherpte. In deze
   vorm komt diepte van vlak naast vlak en van lijn. */
.blob{display:none}
.trust{color:var(--dim)}
.trust b{color:var(--diep);font-family:var(--font-mono)}

/* -------------------------------------------------------------- kaarten */
.card,.kaart,.feature,.prijskaart,.tool{background:var(--vlak);
border:1px solid var(--lijn);padding:18px}
.card h3,.feature h3{font-size:var(--maat-kaartkop)}
/* Elk getal in mono: prijzen en cijfers moeten onder elkaar uitlijnen. */
.prijs,.getal,.cijfer,.stat b,.stat strong{font-family:var(--font-mono);
font-variant-numeric:tabular-nums}
.stap,.step{border-top:4px solid var(--amber);background:var(--vlak);
border-left:1px solid var(--lijn);border-right:1px solid var(--lijn);
border-bottom:1px solid var(--lijn);padding:18px}
.bovenkop,.kicker{font-family:var(--font-mono);font-size:var(--maat-label);
letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--staal)}

/* --------------------------------------------------------------- tabel */
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-family:var(--font-mono);font-size:var(--maat-label);
letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--dim);
font-weight:400;text-align:left;border-bottom:1px solid var(--lijn)}
td{border-bottom:1px solid var(--lijn2)}

/* -------------------------------------------------------------- voettekst */
footer{background:var(--diep);color:var(--opdiep);border-top:1px solid var(--lijn)}
footer a{color:var(--opdiep);min-height:var(--raak);display:inline-flex;
align-items:center}
footer a:hover{color:var(--vlak)}
footer h4,footer strong{color:var(--vlak)}

/* ------------------------------------------- wat de meting nog vond */
/* Een omgekeerde knop in de navigatie (`nav .btn{background:#fff;
   color:var(--accent)}`) werd na de kleurveeg amber op wit: 1,79:1. Die
   regel is specifieker dan `.btn`, dus staat de reparatie hier een trapje
   hoger. Een knop is altijd een VLAK: of amber met donkere tekst, of wit met
   een lijn eromheen. Amber als letter bestaat niet. */
nav .btn,header .btn,.hero .btn,section .btn,footer .btn{
background:var(--amber);color:var(--amber-op);border:1px solid var(--amber)}
nav .btn.ghost,header .btn.ghost,.hero .btn.ghost,section .btn.ghost{
background:var(--vlak);color:var(--diep);border:1px solid var(--lijn)}

/* De voettekst staat op donker; alles wat daarin een eigen grijs had, was
   grijs op donkergrijs (1,26:1). */
footer p,footer li,footer span,footer small,footer .muted,footer div{
color:var(--opdiep)}
footer b,footer strong,footer h4,footer h3{color:var(--vlak)}

/* Het logo was 41 tot 42 pixels breed: twee pixels te smal, en de knop
   waarmee iemand terug naar de homepage gaat. */
/* `min-width` doet niets op een inline element: een <a> in een kruimelbalk
   is inline en blijft dus 41 pixels breed hoe hard je ook duwt. Vandaar de
   display erbij — dat is het verschil tussen een regel die er staat en een
   regel die werkt. */
.logo,a.logo,.kruim a,.krui a,.breadcrumb a{min-width:var(--raak);
min-height:var(--raak);display:inline-flex;align-items:center;
justify-content:center}
/* Een knop is een VLAK. Waar een pagina hem als losse letter had staan
   (wit vlak, amberen tekst) telt de betekenis zwaarder dan de plaatselijke
   afwijking: 1,79:1 is geen knop maar een vlek. */
.btn,a.btn,button.btn,input.btn{color:var(--amber-op)!important}
.btn.ghost,a.btn.ghost{color:var(--diep)!important}

/* ------------------------------------------------ raakvlakken op de site */
/* De meting vond 346 losse links en 103 uitklappers onder de 44 pixels. Het
   zijn er zoveel omdat het steeds dezelfde twee sjabloononderdelen zijn: de
   linklijsten (kennisbank, vakgebieden, voettekst) en de FAQ-blokken.
   Een link MIDDEN in een zin is een woord en geen raakvlak; een link die
   alleen op zijn eigen regel staat is dat wel. Vandaar de scheiding op
   `display`: alleen wat blok is, krijgt hoogte. */
/* Hoogte ja, uitlijnen nee. Een link die in een KOLOM staat (de voettekst)
   rekt met `inline-flex` op tot de volle breedte, en `justify-content:center`
   zet zijn tekst dan in het midden — dat gaf een voettekst met gecentreerde
   links, 52 pixels uit elkaar. De breedte-eis staat een paar regels lager,
   alleen daar waar hij hoort. */
a:not(p a):not(li a):not(td a):not(th a):not(h1 a):not(h2 a):not(h3 a):not(h4 a):not(span a):not(b a):not(em a):not(strong a):not(small a){
min-height:var(--raak);min-width:var(--raak);display:inline-flex;
align-items:center}

/* In een kolom van links gaat de eigen tussenruimte eruit: bovenop een rij van
   44 kwam nog eens 8, en dat is precies de 52 die de voettekst uit elkaar
   trok. Zonder gap staan de rijen strak onder elkaar op één vaste maat. */
footer [style*="flex-direction:column"]{gap:0!important}
footer [style*="flex-direction:column"]>a{align-self:stretch}
/* Een raakvlak is twee maten. 'Home' in de kruimelbalk was 41 breed en het
   logo 42: allebei hoog genoeg, allebei net te smal. */

/* PLEISTER, geen reparatie — en dat staat hier zodat de volgende die het leest
   het weet. Op `software-zzp` en `offerte-software` is de pagina op 360px 421
   pixels breed terwijl er geen enkel element uitsteekt. De oorzaak is niet
   gevonden; dit houdt de pagina stil op de telefoon, want horizontale scroll
   kost bezoekers voordat ze de eerste zin gelezen hebben. `clip` en niet
   `hidden`: `hidden` breekt `position:sticky` en dan plakt de kopbalk niet
   meer. */
html{overflow-x:clip}
/* De FAQ-uitklappers. Dit zijn de blokken waarmee deze site in Google op
   vragen scoort, en dus precies de blokken waar iemand met een telefoon in
   zijn hand op tikt. */
summary{min-height:var(--raak);display:flex;align-items:center;
cursor:pointer;padding:10px 0}
details{border-bottom:1px solid var(--lijn2)}

/* --------------------------------------------------------------- formulier */
input,select,textarea{min-height:var(--veld-h);border:1px solid var(--lijn);
background:var(--vlak);color:var(--diep);padding:10px 12px;
font-size:var(--maat-veld)}
label{font-family:var(--font-mono);font-size:var(--maat-label);
letter-spacing:var(--letter-label);text-transform:uppercase;color:var(--dim)}

/* ---- ronde 3+4: aanmelden, menu, kruimel, verwant ---- */
/* Het aanmeldblok. Elke waarde heeft een terugvalkleur, want dit is het enige
   blok op de pagina dat ook zonder deze stylesheet leesbaar moet blijven: hier
   gebeurt de conversie. */
.aanmeld{background:var(--diep2,#1c3040);color:var(--opdiep,#b3c2cf);
padding:34px 0;margin:38px 0 0}
.aanmeld .wrap{max-width:720px}
.aanmeld h2{color:var(--vlak,#fff);margin:0 0 6px}
.aanmeld p{color:var(--opdiep,#b3c2cf);margin:0 0 18px}
.aanmeld form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aanmeld input,.aanmeld textarea{width:100%;min-height:46px;padding:11px 13px;
background:var(--vlak,#fff);border:1px solid var(--lijn,#bcc7d1);
color:var(--diep,#101d26);font-size:15px}
.aanmeld textarea{grid-column:1/-1;min-height:84px;resize:vertical}
.aanmeld .hp{position:absolute;left:-9999px;width:1px;height:1px}
.aanmeld button{grid-column:1/-1;min-height:52px;background:var(--amber,#ffb300);
color:var(--amber-op,#14100a);border:1px solid var(--amber,#ffb300);
font-weight:800;font-size:16px;cursor:pointer}
.aanmeld button[disabled]{opacity:.6;cursor:progress}
.aanmeld .melding{grid-column:1/-1;color:var(--vlak,#fff);font-size:14px;min-height:20px}
.aanmeld .klein{color:var(--opdiep,#b3c2cf);font-size:13px;margin:12px 0 0}
.aanmeld .klein a{color:var(--vlak,#fff);text-decoration:underline}
@media(max-width:620px){.aanmeld form{grid-template-columns:1fr}}

/* Een link in de navigatie op veertig pagina's weegt zwaarder dan een link in
   één voettekst. De landingspagina's hadden er geen enkele. */
nav .wrap{display:flex;align-items:center;justify-content:space-between;
gap:12px 20px;min-height:64px;flex-wrap:wrap}
nav .logo{color:var(--vlak)}
.hoofdmenu{display:flex;gap:2px;flex-wrap:wrap}
.hoofdmenu a{display:inline-flex;align-items:center;min-height:var(--raak);
padding:0 11px;color:var(--opdiep);text-decoration:none;font-weight:600;font-size:14.5px}
.hoofdmenu a:hover,.hoofdmenu a:focus-visible{color:var(--vlak)}
@media(max-width:900px){.hoofdmenu{display:none}}

/* Boven 900px staat het hoofdmenu er al. De losse tekstlinks in .navlinks
   herhalen dan alleen "Functies" en "Live demo" en kosten ruimte die de balk
   niet heeft. Gemeten op 8-8-2026 met Archivo geladen: tussen 901 en 1200px
   viel .navlinks uit de balk en hing hij 35px over de pagina heen. Alleen de
   knop blijft staan; onder 900px komen de tekstlinks vanzelf terug omdat het
   hoofdmenu dan verdwijnt. */
@media(min-width:901px){.navlinks a:not(.btn){display:none}}

/* Elke pagina zet in zijn eigen inline stijl html{scroll-behavior:smooth}.
   Daarmee sneuvelde fragmentnavigatie: het anker kwam wel in de adresbalk,
   maar de pagina sprong niet. Deze regel wint omdat stijl2a.css later laadt
   dan die inline stijl. Hij stond op 7-8-2026 al eens onderaan stijl2a.css en
   is bij een regeneratie verdwenen -- vandaar dat hij nu hier staat en niet
   in het gegenereerde bestand. */
html{scroll-behavior:auto!important}

/* Schema zonder zichtbare tegenhanger is een risico, en een kruimel is de
   goedkoopste interne link die er is. */
.kruimel{color:var(--dim);font-size:13.5px;margin:14px 0 0}
.kruimel a{color:var(--staal)}
.kruimel span{color:var(--lijn);padding:0 6px}

/* Twaalf links achter elkaar met bolletjes ertussen is een verzameling, geen
   keuze. Een kaart met een kop en één regel uitleg wordt geklikt omdat je
   ziet wat je krijgt. */
.verwant{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--lijn2)}
.verwant h2{font-size:var(--maat-h2);margin:0 0 12px}
.verwant-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.verwant-raster a{display:block;border:1px solid var(--lijn2);padding:13px 15px;
text-decoration:none;color:var(--diep)}
.verwant-raster a:hover{border-color:var(--staal)}
.verwant-raster b{display:block;color:var(--diep);font-size:15.5px;font-weight:700}
.verwant-raster span{display:block;color:var(--dim);font-size:13.5px;margin-top:2px}

/* Het eerste wat een toegankelijkheidstest controleert, en het kost drie regels. */
.overslaan{position:absolute;left:-9999px;top:0;background:var(--amber);
color:var(--amber-op);padding:12px 18px;font-weight:700;z-index:1000}
.overslaan:focus{left:0}

/* De copyrightregel en de KvK-gegevens stonden in --dim (#4c5a67) op --diep
   (#101d26): 2,4:1. Op donker hoort --opdiep, en dat haalt 8,9:1. */
footer .muted,footer .klein,footer .stempel{color:var(--opdiep)}

/* Een anker springt de pagina, maar niet het toetsenbord. Met tabindex="-1"
   op het doel gaat de focus mee. */
:target{scroll-margin-top:80px}