/* normcheck — beeldtaal van de veiligheidssignalisatie: signaalgroen, signaalgeel, signaalrood op rustig papier.
   Eén opvallend element: het signaallicht met de drie fasen in de kop. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --inkt:#1c2b33; --inkt-zacht:#4a5a63; --stil:#66757d;
  --papier:#fbfcfb; --vlak:#eef2f0; --vlak-sterk:#e2e9e5; --lijn:#d5ddd9;
  --groen:#1f7a4d; --groen-diep:#155c39; --groen-licht:#e3f1e9; --lamp:#46e08f;
  --geel:#e0a800; --geel-licht:#fdf5d8; --rood:#b42318; --rood-licht:#fbe9e7; --grijs:#7b878d;
  --behuizing:#1c2b33;
  --r:6px; --r-groot:12px;
  --letter:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--letter);color:var(--inkt);background:var(--papier);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--groen-diep);text-underline-offset:.18em}
a:hover{color:var(--groen)}
:focus-visible{outline:3px solid var(--geel);outline-offset:2px;border-radius:3px}
h1{font-size:1.75rem;line-height:1.2;margin:.3rem 0 .8rem;font-weight:700;letter-spacing:-.01em}
h1 small{font-weight:400;color:var(--stil);font-size:1.05rem;margin-left:.4rem}
h2{font-size:1.15rem;margin:1.8rem 0 .6rem}
h2 .stil{font-weight:400}
p{max-width:75ch}

/* ── kop ─────────────────────────────────────────────────────────────── */
.kop{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding:.7rem 1.5rem;background:#fff;border-bottom:1px solid var(--lijn)}
.merk{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.2rem;color:var(--inkt);text-decoration:none;letter-spacing:-.01em}
.merkteken{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--groen);box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--groen)}
.signaal{display:flex;align-items:center;gap:.25rem;background:var(--behuizing);border-radius:999px;padding:.3rem .35rem}
.lamp{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem .3rem .3rem;border-radius:999px;color:#b9c6cc;text-decoration:none;font-size:.92rem;white-space:nowrap}
.lamp:hover{color:#fff;background:rgba(255,255,255,.06)}
.lamp .bol{background:#2d4a3c;color:#8fb3a1;box-shadow:inset 0 0 0 2px #24382f}
.lamp.aan{color:#fff;background:rgba(70,224,143,.10)}
.lamp.aan .bol{background:var(--lamp);color:#0d3a22;box-shadow:0 0 0 3px rgba(70,224,143,.25),0 0 14px 2px rgba(70,224,143,.55)}
.bol{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--groen);color:#fff;font-weight:700;font-size:.85rem}
.bol.groot{width:3rem;height:3rem;font-size:1.3rem}
h1 .bol{vertical-align:.2em;margin-right:.55rem;background:var(--lamp);color:#0d3a22;box-shadow:0 0 0 3px rgba(70,224,143,.25)}
.hulp{display:flex;gap:.2rem}
.hulp a{color:var(--inkt-zacht);text-decoration:none;padding:.35rem .6rem;border-radius:var(--r)}
.hulp a:hover{background:var(--vlak);color:var(--inkt)}
.hulp a.actief{color:var(--inkt);background:var(--vlak);font-weight:700}
.gebruiker{margin-left:auto;font-size:.88rem;color:var(--stil);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gebruiker .naam{color:var(--inkt);font-weight:700}
.gebruiker .rol{background:var(--vlak);border-radius:999px;padding:.05rem .55rem}
.gebruikerlinks a{margin-left:.7rem;color:var(--inkt-zacht)}

/* ── inhoud en voet ──────────────────────────────────────────────────── */
.inhoud{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:1.6rem 1.5rem 3.5rem}
.voet{border-top:1px solid var(--lijn);background:#fff;color:var(--stil);font-size:.82rem;padding:1.1rem 1.5rem}
.voet p{margin:.15rem auto;max-width:1120px}
.voet p:first-child{color:var(--inkt-zacht)}
.voetnoot{max-width:1120px}
.stil{color:var(--stil)}.leeg{color:var(--stil)}.nowrap{white-space:nowrap}.rechts{text-align:right}.klein{font-size:.85rem}

/* ── startpagina ─────────────────────────────────────────────────────── */
.intro{margin:.6rem 0 1.4rem}.intro h1{font-size:2.2rem}.lead{font-size:1.15rem;color:var(--inkt-zacht);margin:0}
.fasen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:none}
.fasekaart{position:relative;display:flex;flex-direction:column;height:100%;padding:1.3rem 1.3rem 1.1rem;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-groot);color:var(--inkt);text-decoration:none}
.fasekaart:hover{border-color:var(--groen);color:var(--inkt)}
.fasekaart:hover .bol{background:var(--lamp);color:#0d3a22;box-shadow:0 0 0 4px rgba(70,224,143,.25),0 0 18px 3px rgba(70,224,143,.45)}
.fasekaart h2{margin:.9rem 0 .4rem;font-size:1.25rem}
.fasekaart p{margin:0 0 .8rem;color:var(--inkt-zacht)}
.fasekaart .teller{margin-top:auto;margin-bottom:0;font-size:.88rem;color:var(--stil);border-top:1px solid var(--vlak-sterk);padding-top:.7rem}
.fasekaart .bol{transition:box-shadow .2s,background .2s}

/* ── knoppen ─────────────────────────────────────────────────────────── */
.knop,button{display:inline-flex;align-items:center;gap:.35rem;background:var(--groen);color:#fff;border:1px solid var(--groen);border-radius:var(--r);padding:.5rem 1rem;font:inherit;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none}
.knop:hover,button:hover{background:var(--groen-diep);border-color:var(--groen-diep);color:#fff}
.knop.secundair{background:#fff;color:var(--groen-diep);border-color:var(--lijn)}
.knop.secundair:hover{border-color:var(--groen);background:var(--groen-licht);color:var(--groen-diep)}
button.klein,.knop.klein{padding:.2rem .55rem;font-size:.85rem;font-weight:400;background:var(--vlak);color:var(--inkt);border-color:var(--lijn)}
button.klein:hover,.knop.klein:hover{background:var(--vlak-sterk);color:var(--inkt);border-color:var(--grijs)}
button.gevaar{color:var(--rood)}
button.mini{background:none;border:0;color:var(--stil);padding:0 .2rem;font-weight:400;font-size:.85rem}
button:disabled{opacity:.55;cursor:not-allowed}
.plus{font-size:1.05rem!important;min-width:2.2rem;justify-content:center}

/* ── tabellen ────────────────────────────────────────────────────────── */
.tabel{border-collapse:collapse;width:100%;margin:.6rem 0;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.tabel th,.tabel td{border-bottom:1px solid var(--vlak-sterk);padding:.55rem .7rem;text-align:left;vertical-align:top}
.tabel th{background:var(--vlak);font-weight:700;font-size:.88rem;color:var(--inkt-zacht)}
.tabel tbody tr:hover td{background:#f7faf8}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel.smal{width:auto;min-width:50%}
tr.nieuw td{background:var(--geel-licht)!important}
tr.uit td{opacity:.5;text-decoration:line-through}
tr.verborgen{display:none}
.kenmerken th{text-align:left;padding:.2rem 1rem .2rem 0;color:var(--stil);font-weight:400}.kenmerken td{padding:.2rem 1.4rem .2rem 0}

/* ── labels en meldingen ─────────────────────────────────────────────── */
.tag{display:inline-block;background:var(--vlak);color:var(--inkt-zacht);border-radius:999px;padding:.08rem .6rem;font-size:.8rem;margin:.1rem .1rem .1rem 0}
.tag.ok{background:var(--groen-licht);color:var(--groen-diep)}
.tag.niet_ok{background:var(--rood-licht);color:var(--rood)}
.tag.nvt{background:#eceeef;color:var(--grijs)}
.tag.open{background:var(--geel-licht);color:#7a5c00}
.tag.uit{opacity:.5;text-decoration:line-through}
.melding{padding:.65rem .9rem;border-radius:var(--r);margin:.6rem 0 1rem;border-left:4px solid var(--grijs);background:var(--vlak)}
.melding.ok{background:var(--groen-licht);border-left-color:var(--groen)}
.melding.fout{background:var(--rood-licht);border-left-color:var(--rood)}
.melding.info{background:var(--geel-licht);border-left-color:var(--geel)}
.balk{display:inline-block;width:120px;height:8px;background:var(--vlak-sterk);border-radius:4px;vertical-align:middle;overflow:hidden}
.balk span{display:block;height:100%;background:var(--groen)}

/* ── formulieren ─────────────────────────────────────────────────────── */
.formulier label{display:block;margin:.7rem 0;font-weight:700;font-size:.92rem}
.formulier label .stil{font-weight:400}
.formulier input:not([type=checkbox]):not([type=file]):not([type=hidden]),.formulier textarea,.formulier select,.zoek,.filter input,.filter select{
  width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid #c3cec9;border-radius:var(--r);font:inherit;font-weight:400;background:#fff;color:var(--inkt)}
.formulier input:focus,.formulier textarea:focus,.formulier select:focus,.zoek:focus{border-color:var(--groen);outline:2px solid var(--groen-licht);outline-offset:0}
.formulier.smal{max-width:400px}
.formulier .rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.keuzerij{display:flex;gap:.35rem;align-items:center;margin-top:.25rem}.keuzerij select{flex:1;margin-top:0!important}
.vink{display:flex;gap:.5rem;align-items:flex-start;margin:.25rem 0;font-weight:400!important}
.vink input{margin-top:.3rem;accent-color:var(--groen);width:1rem;height:1rem;flex:none}
.vinkkolommen{columns:2;column-gap:2rem}
.normblok{border:1px solid var(--lijn);border-radius:var(--r);padding:.5rem 1rem .8rem;margin:.8rem 0;background:#fff}
.normblok legend{padding:0 .4rem}.normblok .vinkkolommen{columns:3}
.filter{display:flex;gap:.5rem;margin:.6rem 0 1rem;align-items:center}.filter input{flex:1;margin:0}.filter select{width:auto;margin:0}
.zoek{max-width:24rem;margin:.2rem 0 .8rem}
input.kort{width:9rem}input.hernoem{border:1px solid transparent;padding:.25rem .35rem;font:inherit;background:transparent}input.hernoem:hover,input.hernoem:focus{border-color:#c3cec9;background:#fff}
form.inline{display:inline}
.kolommen{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.lijst{padding-left:1.2rem}

/* ── eerste groene licht ─────────────────────────────────────────────── */
.items{columns:3;column-gap:2rem;list-style:none;padding:1rem 1.2rem;margin:.4rem 0 1.2rem;background:#fff;border:1px solid var(--lijn);border-radius:var(--r)}
.items li{break-inside:avoid}.items li.verborgen{display:none}
#resultaat{margin-top:1.4rem;padding-top:.4rem;border-top:2px solid var(--groen)}

/* ── normen, tabs, figuren, documenten ───────────────────────────────── */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.tabs a{display:inline-block;padding:.4rem .9rem;border:1px solid var(--lijn);border-radius:999px;text-decoration:none;color:var(--inkt-zacht);background:#fff}
.tabs a.actief{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.toelichting{color:var(--stil);font-size:.9rem;margin-top:.25rem}
.figuren{display:flex;flex-wrap:wrap;gap:1rem}.figuren figure{margin:0;max-width:260px}
.figuren img{max-width:100%;border:1px solid var(--lijn);border-radius:4px;background:#fff}
.figuren figcaption{font-size:.8rem;color:var(--stil)}.figuren.klein figure{max-width:180px}
.normdocs{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.4rem 0 .9rem}

/* ── audit ───────────────────────────────────────────────────────────── */
.auditkop{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;flex-wrap:wrap}
.voortgang{text-align:right}.voortgang .balk{width:200px}
.filterbalk{margin:1rem 0;color:var(--stil);display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.statusfilter{background:#fff;color:var(--inkt);border-color:var(--lijn);font-weight:400;padding:.3rem .75rem;border-radius:999px}
.statusfilter:hover{background:var(--vlak);color:var(--inkt)}
.statusfilter.actief{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.normkop{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;border-bottom:2px solid var(--inkt);padding-bottom:.3rem;margin-top:2.2rem}
.punt{background:#fff;border:1px solid var(--lijn);border-left:6px solid var(--geel);border-radius:var(--r);padding:.75rem 1rem;margin:.7rem 0}
.punt.status-ok{border-left-color:var(--groen)}
.punt.status-niet_ok{border-left-color:var(--rood);background:#fffafa}
.punt.status-nvt{border-left-color:var(--grijs);opacity:.78}
.punt.verborgen{display:none}
.punt-kop{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.hoofdstuk{font-weight:700;color:var(--groen-diep)}
.omschrijving{margin:.45rem 0;max-width:none}
.vorige{margin:.1rem 0 .4rem;font-size:.9rem}
.acties{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.acties .status{background:#fff;color:var(--inkt);border-color:var(--lijn);font-weight:400;padding:.35rem .8rem}
.acties .status:hover{background:var(--vlak);color:var(--inkt)}
.acties .status.ok.actief{background:var(--groen);border-color:var(--groen);color:#fff;font-weight:700}
.acties .status.niet_ok.actief{background:var(--rood);border-color:var(--rood);color:#fff;font-weight:700}
.acties .status.nvt.actief{background:var(--grijs);border-color:var(--grijs);color:#fff;font-weight:700}
.acties .status.open.actief{background:var(--geel);border-color:var(--geel);color:#2b2100;font-weight:700}
.acties .opmerking{flex:1;min-width:240px;padding:.45rem .6rem;border:1px solid #c3cec9;border-radius:var(--r);font:inherit;resize:vertical}
.opgeslagen{font-size:.8rem;min-width:9rem}
.fotos{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-start;margin-top:.6rem}
.fotos .foto{margin:0;width:150px}.fotos .foto img{width:150px;height:110px;object-fit:cover;border:1px solid var(--lijn);border-radius:4px}
.fotos .foto figcaption{font-size:.75rem;color:var(--stil);display:flex;justify-content:space-between;gap:.3rem}
.fotoknop{display:inline-flex;align-items:center;justify-content:center;border:1px dashed #b4c1bb;border-radius:var(--r);padding:.4rem .8rem;cursor:pointer;color:var(--groen-diep);font-weight:400!important;font-size:.9rem}
.foto ~ .fotoknop{height:110px;min-width:150px}
.fotoknop:hover{background:var(--groen-licht);border-color:var(--groen)}
.fotos.klein .foto{width:110px}.fotos.klein .foto img{width:110px;height:80px}

/* ── geschiedenis ────────────────────────────────────────────────────── */
.matrix .cel{text-align:center;white-space:nowrap;font-size:.88rem}
.matrix .cel.status-ok{background:var(--groen-licht);color:var(--groen-diep)}
.matrix .cel.status-niet_ok{background:var(--rood-licht);color:var(--rood);font-weight:700}
.matrix .cel.status-nvt{background:#eceeef;color:var(--grijs)}
.matrix .cel.status-open{background:var(--geel-licht);color:#7a5c00}

/* ── afdruk ──────────────────────────────────────────────────────────── */
body.afdruk{background:#fff}body.afdruk .inhoud{max-width:none}.inhoud.breed{max-width:none}
@media print{
  .kop,.voet,.geen-print,.fotoknop,.fotoweg{display:none!important}
  body{background:#fff;font-size:10pt}.inhoud{max-width:none;padding:0}
  .tabel{border:0}.tabel th{background:#eee}.tabel td,.tabel th{font-size:9pt;padding:.25rem .35rem}
  .matrix .cel{white-space:normal}.items{columns:2;border:0}tr.status-niet_ok td{background:#fdecea}
  a{color:inherit;text-decoration:none}
}

/* ── smal scherm ─────────────────────────────────────────────────────── */
@media (max-width:980px){.fasen{grid-template-columns:1fr}.signaal{order:3;width:100%;justify-content:space-between}.lamp{flex:1;justify-content:flex-start}}
@media (max-width:700px){
  .kop{padding:.6rem 1rem;gap:.7rem}.inhoud{padding:1.1rem 1rem 3rem}.lamptekst{font-size:.8rem;white-space:normal;line-height:1.15}
  .lamp{padding-right:.5rem}.items,.vinkkolommen,.normblok .vinkkolommen{columns:1}
  .gebruiker{margin-left:0}.voortgang{text-align:left}.intro h1{font-size:1.7rem}
  .tabel{display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}