:root { --blauw:#0b4f8a; --grijs:#5b6670; --rand:#d5dbe1; --licht:#f4f6f8; --fout:#a4262c; --ok:#1e7a46; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; color:#1b2733; background:var(--licht); }
.kop { display:flex; gap:2rem; align-items:center; padding:.6rem 1.5rem; background:var(--blauw); color:#fff; }
.kop a { color:#fff; text-decoration:none; }
.kop nav { display:flex; gap:1rem; flex:1; }
.merk { font-weight:700; font-size:1.2rem; } .merk span { font-weight:400; opacity:.75; }
main { max-width:1100px; margin:1.5rem auto; padding:0 1.5rem; }
footer { text-align:center; color:var(--grijs); font-size:.85rem; padding:2rem; }
h1 { margin-top:0; }
.kaart, .tegel { background:#fff; border:1px solid var(--rand); border-radius:6px; padding:1rem 1.25rem; }
.tegels { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.tegel b { display:block; font-size:2rem; color:var(--blauw); }
.keuze { display:block; padding:.35rem 0; }
button { background:var(--blauw); color:#fff; border:0; border-radius:4px; padding:.5rem 1rem; font:inherit; cursor:pointer; margin-top:.75rem; }
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--rand); vertical-align:top; }
th { background:var(--licht); }
.melding { padding:.6rem 1rem; border-radius:4px; border:1px solid var(--rand); background:#fff; }
.melding-ok { border-color:var(--ok); color:var(--ok); } .melding-fout { border-color:var(--fout); color:var(--fout); }
pre { overflow:auto; background:#fff; padding:1rem; border:1px solid var(--rand); font-size:.8rem; }
.smal { max-width:420px; }
label { display:block; margin:.5rem 0; }
input[type=text], input[type=password], input[type=email], input[type=number], select, input[type=file] { display:block; width:100%; padding:.4rem .5rem; border:1px solid var(--rand); border-radius:4px; font:inherit; margin-top:.2rem; }
.rij { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 1rem; }
.secundair { background:#fff; color:var(--blauw); border:1px solid var(--blauw); }
.gevaar { background:var(--fout); }
.inline { display:inline; }
.stapels { display:grid; gap:1rem; }
small, .stil { color:var(--grijs); }
code { background:var(--licht); padding:0 .25rem; border-radius:3px; }
.status-geslaagd { color:var(--ok); font-weight:600; } .status-mislukt { color:var(--fout); font-weight:600; }
/* Taak 1: relaties */
.zoekbalk { display:flex; gap:.5rem; margin-bottom:1rem; }
.zoekbalk input { flex:1; padding:.55rem .7rem; border:1px solid var(--rand); border-radius:4px; font:inherit; }
.zoekbalk button { margin-top:0; }
.kop .zoekbalk { margin:0; max-width:320px; } .kop .zoekbalk input { padding:.3rem .5rem; border:0; }
.resultaten td { font-size:.95rem; }
.label { display:inline-block; font-size:.75rem; padding:.05rem .45rem; border-radius:999px; background:var(--licht); border:1px solid var(--rand); color:var(--grijs); margin:.15rem .25rem 0 0; }
.label-concern { background:#e8f0f8; border-color:#b6cde4; color:var(--blauw); }
.label-gemengd { background:#fff4e0; border-color:#e6c27a; color:#7a5200; }
.beeindigd { opacity:.6; }
.kruimel { margin:0 0 .5rem; } .kruimel a { color:var(--grijs); text-decoration:none; }
.kaartkop { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.kaartkop h1 { margin:0 0 .25rem; }
.knop { display:inline-block; padding:.45rem .9rem; border-radius:4px; text-decoration:none; white-space:nowrap; }
.knop.secundair { border:1px solid var(--blauw); color:var(--blauw); background:#fff; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1rem; margin-bottom:1rem; }
.kaart.breed { margin-bottom:1rem; }
.kaart h2 { margin:0 0 .6rem; font-size:1.15rem; } .kaart h3 { font-size:1rem; margin:1rem 0 .4rem; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:.25rem 1rem; margin:0; } dt { color:var(--grijs); } dd { margin:0; }
ul.kaal { list-style:none; padding:0; margin:0; } ul.kaal li { padding:.2rem 0; }
.code { font-family:ui-monospace,monospace; font-size:.85rem; background:var(--licht); border:1px solid var(--rand); border-radius:3px; padding:0 .3rem; }
.activiteit { border-top:1px solid var(--rand); padding:.75rem 0; } .activiteit:first-of-type { border-top:0; padding-top:0; }
.activiteit h3 { margin:0 0 .5rem; } .activiteit h3 small { font-weight:400; color:var(--grijs); }
.activiteit p { margin:.2rem 0; }
p.ok { color:var(--ok); } p.probleem { color:var(--fout); font-weight:600; }
.status { font-weight:600; } .status-actief { color:var(--ok); } .status-geschorst, .status-ingetrokken { color:var(--fout); } .status-voorlopig { color:#7a5200; }
details summary { cursor:pointer; color:var(--blauw); }
@media (max-width:600px) { .kaartkop { flex-direction:column; } .raster { grid-template-columns:1fr; } }
main a { color:var(--blauw); } main a:visited { color:var(--blauw); }
.kop { flex-wrap:wrap; row-gap:.4rem; }
.tabel-schuif { overflow-x:auto; }
@media (max-width:700px) {
  .kop { gap:.5rem 1rem; padding:.6rem 1rem; }
  .kop .zoekbalk { order:5; flex-basis:100%; max-width:none; }
  .kop .gebruiker { margin-left:auto; font-size:.85rem; }
  main { padding:0 1rem; }
  .raster { grid-template-columns:minmax(0,1fr); }
  .kaart { min-width:0; }
  .activiteit .rij { grid-template-columns:1fr; }
}
/* 0.2.1: lijst A-Z */
.letters { display:flex; flex-wrap:wrap; gap:.25rem; margin:.25rem 0 .75rem; }
.letters a, .letters span { min-width:2rem; text-align:center; padding:.25rem .4rem; border-radius:4px; border:1px solid var(--rand); background:#fff; text-decoration:none; font-weight:600; }
.letters a.actief { background:var(--blauw); color:#fff; border-color:var(--blauw); }
.letters span.leeg { color:#b8c0c8; background:transparent; font-weight:400; }
.lijstinfo a { margin-left:.5rem; }
.paginering { display:flex; gap:1rem; justify-content:center; align-items:center; margin:1rem 0; }
/* Taak 2: formulieren */
.melding-let { border-color:#c99a2e; color:#6b4a00; background:#fffaf0; }
.formulier { margin-bottom:1rem; } .formulier h2 { margin:1rem 0 .4rem; font-size:1.05rem; } .formulier h2:first-of-type { margin-top:0; }
.formulier .knop { margin-left:.5rem; }
label.vink { display:flex; gap:.5rem; align-items:center; margin:.3rem 0; }
fieldset.vinklijst { border:1px solid var(--rand); border-radius:6px; margin:.75rem 0; padding:.5rem 1rem; }
fieldset.vinklijst legend { padding:0 .3rem; font-weight:600; }
input[type=date] { display:block; padding:.35rem .5rem; border:1px solid var(--rand); border-radius:4px; font:inherit; margin-top:.2rem; }
input[readonly] { background:var(--licht); color:var(--grijs); }
.gevaarzone { border-color:#e3b5b8; }
.acties { display:flex; flex-wrap:wrap; gap:.5rem; }
.acties .knop { background:var(--blauw); color:#fff; } .acties .knop.secundair { background:#fff; color:var(--blauw); }
.activiteit h3 .klein { float:right; font-size:.85rem; font-weight:400; }
.mutaties td { font-size:.9rem; } .mutaties .oud { color:var(--grijs); text-decoration:line-through; }