:root { --tekst:#1c2430; --zacht:#5b6675; --lijn:#d9dee5; --vlak:#f4f6f8; --wit:#fff; --merk:#1f3a5f;
  --spoed:#b42318; --spoed-vlak:#fdecea; --oud:#9a5b00; --oud-vlak:#fff4e0; --goed:#1e6b3a; --goed-vlak:#e7f4ec; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tekst); background: var(--vlak); }
header { background: var(--merk); color: #fff; }
header .binnen { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; padding: 12px 16px; max-width: 980px; margin: 0 auto; }
header a { color:#fff; text-decoration:none; opacity:.9; }
header a:hover { opacity:1; text-decoration:underline; }
header .naam { margin-left:auto; font-size:14px; opacity:.85; }
header strong { margin-right: 8px; }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 18px; margin: 24px 0 10px; }
.kaart { background: var(--wit); border:1px solid var(--lijn); border-radius: 6px; padding: 14px 16px; margin-bottom: 10px; }
.kaart.spoed { border-left: 5px solid var(--spoed); }
a.kaart { display:block; color: inherit; text-decoration:none; }
a.kaart:hover { border-color: var(--merk); }
.rij { display:flex; flex-wrap:wrap; gap: 6px 14px; align-items: baseline; }
.label { display:inline-block; font-size: 12px; font-weight:600; letter-spacing:.03em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--vlak); color: var(--zacht); }
.label.spoed { background: var(--spoed-vlak); color: var(--spoed); }
.label.oud { background: var(--oud-vlak); color: var(--oud); }
.label.goed { background: var(--goed-vlak); color: var(--goed); }
.zacht { color: var(--zacht); font-size: 14px; }
dl { display:grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0; }
dt { color: var(--zacht); }
dd { margin: 0; }
form.inline { display:inline; }
button, .knop { font: inherit; padding: 9px 16px; border-radius: 5px; border: 1px solid var(--merk); background: var(--merk); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button.tweede, .knop.tweede { background: var(--wit); color: var(--merk); }
button.gevaar { background: var(--spoed); border-color: var(--spoed); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], textarea, select {
  font: inherit; width: 100%; padding: 9px 10px; border:1px solid var(--lijn); border-radius: 5px; background: var(--wit); }
textarea { min-height: 110px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
fieldset label { font-weight: 400; }
label { display:block; font-weight: 600; margin: 12px 0 4px; }
.acties { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.logboek td:nth-child(-n+2) { white-space: nowrap; overflow-wrap: normal; }
.kandidaten { display:grid; gap:8px; }
.kandidaat { background: var(--wit); border:1px solid #dfe3e8; border-radius:6px; padding:10px 12px; }
.kandidaat.aangemeld { border-color: var(--goed); }
.kandidaat .rij { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.kandidaat .rij .knop { margin-left:auto; }
.kandidaat .toetsen { display:flex; flex-wrap:wrap; gap:4px 12px; margin:6px 0 2px; font-size:14px; }
.demo { background: #fff4d6; color: #6b4e00; text-align: center; padding: 6px 16px; font-size: 14px; border-bottom: 1px solid #e8d49a; }
.melding { padding: 10px 14px; border-radius: 5px; margin-bottom: 14px; background: var(--goed-vlak); color: var(--goed); }
.melding.fout { background: var(--spoed-vlak); color: var(--spoed); }
.voorbeeld { white-space: pre-wrap; background: var(--vlak); border:1px solid var(--lijn); border-radius:5px; padding: 12px; }
table { width:100%; border-collapse: collapse; background: var(--wit); }
@media (max-width: 700px) { table { display:block; overflow-x:auto; } }
th, td { text-align:left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-size: 14px; color: var(--zacht); font-weight: 600; }
.chat { display:flex; flex-direction:column; gap:8px; }
.bel { max-width: 85%; padding: 8px 12px; border-radius: 8px; white-space: pre-wrap; font-size: 15px; }
.bel.in { align-self: flex-end; background: #dcf3e3; }
.bel.uit { align-self: flex-start; background: var(--wit); border:1px solid var(--lijn); }
.leeg { color: var(--zacht); padding: 12px 0; }
button.klein, .knop.klein { padding: 2px 8px; font-size: 14px; white-space: nowrap; }
td, dd, .zacht, .voorbeeld, .bel { overflow-wrap: anywhere; }
.label { white-space: nowrap; overflow-wrap: normal; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: .08em; word-break: break-all; }
@media (max-width: 600px) { dl { grid-template-columns: 1fr; gap: 2px; } dt { margin-top: 8px; } header .naam { margin-left: 0; } }