:root{
  --inkt:#1d2126; --papier:#f7f5f0; --wit:#fffdf9; --lijn:#ddd6c9;
  --groen:#1f4d3a; --groen-licht:#e7efe9; --bordeaux:#7a2e2e;
  --grijs:#6b6b63; --geel:#f5e9c8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--inkt);
  font:15px/1.55 Georgia,'Times New Roman',serif}
a{color:var(--groen)}
h1,h2,h3{font-weight:600;letter-spacing:.2px}
h1{font-size:26px;margin:.2em 0 .4em}
h2{font-size:17px;margin:1.4em 0 .5em;border-bottom:1px solid var(--lijn);padding-bottom:4px}

.topbar{display:flex;align-items:baseline;gap:28px;background:var(--groen);color:#fff;
  padding:12px 28px}
.topbar .merk{font-size:20px;letter-spacing:5px;color:#fff;text-decoration:none;font-variant:small-caps}
.topbar nav a{color:#dfe9e3;text-decoration:none;margin-right:18px;font-size:14px}
.topbar nav a:hover{color:#fff}
.topbar .wie{margin-left:auto;font-size:13px;color:#cfdcd4}
.topbar .wie a{color:#cfdcd4}

main{max-width:1080px;margin:26px auto;padding:0 24px}
main.smal{max-width:430px;margin-top:9vh}
.voet{max-width:1080px;margin:40px auto 24px;padding:0 24px;color:var(--grijs);
  font-size:12px;border-top:1px solid var(--lijn);padding-top:12px}

.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:3px;
  padding:18px 22px;margin-bottom:20px}
.kolommen{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
@media(max-width:860px){.kolommen{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--grijs);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.6px;padding:6px 10px;border-bottom:1px solid var(--lijn)}
td{padding:8px 10px;border-bottom:1px solid #eee8db;vertical-align:top}
tr:hover td{background:#fbf9f4}

input,select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--lijn);
  border-radius:3px;background:#fff;width:100%}
label{display:block;font-size:12px;color:var(--grijs);text-transform:uppercase;
  letter-spacing:.6px;margin:10px 0 3px}
button,.knop{font:inherit;font-size:14px;padding:8px 16px;border:1px solid var(--groen);
  background:var(--groen);color:#fff;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.knop:hover{background:#173c2d}
button.stil{background:transparent;color:var(--groen)}
button.gevaar{background:transparent;border-color:var(--bordeaux);color:var(--bordeaux);
  padding:3px 9px;font-size:12px}

.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:9px;
  background:var(--groen-licht);color:var(--groen);letter-spacing:.4px}
.badge.grijs{background:#eee;color:var(--grijs)}
.badge.rood{background:#f6e2e2;color:var(--bordeaux)}
.badge.geel{background:var(--geel);color:#7a5b12}

.termijn-dagen{font-weight:700}
.t-rood{color:var(--bordeaux)} .t-geel{color:#9a7413} .t-groen{color:var(--groen)}

.fout{background:#f6e2e2;border:1px solid #e3bcbc;color:var(--bordeaux);
  padding:10px 14px;border-radius:3px;margin-bottom:14px;font-size:14px}
.leeg{color:var(--grijs);font-style:italic;padding:12px 0}
.klein{font-size:12px;color:var(--grijs)}
.inline-form{display:inline}
.rij{display:flex;gap:10px}
.rij>*{flex:1}
code{background:#efece4;padding:2px 6px;border-radius:3px;font-size:13px}
details summary{cursor:pointer;color:var(--groen);margin:8px 0}
.merkgroot{font-variant:small-caps;letter-spacing:8px;color:var(--groen);
  text-align:center;font-size:34px;margin-bottom:2px}
.ondertitel{text-align:center;color:var(--grijs);font-size:13px;margin-bottom:24px}