/* stijl2a.css — de vorm van Nucora (Dagdienst · werkbank).
   GEGENEREERD door maak_stijl2a.py uit nc_stijl.py. Niet met de
   hand bewerken: de volgende ronde overschrijft het.
   Kern-vingerafdruk: 3882225b288e1c88 */
@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;--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)}@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(--diep);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(--vlak);border-bottom:1px solid var(--lijn);
backdrop-filter:none}
nav .wrap{min-height:var(--kop-h)}
.logo{color:var(--diep);font-weight:800;letter-spacing:var(--letter-kop-strak)}
.logo span{color:var(--staal)}
.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)}