:root{
  --bg:#f4f5f2; --vlak:#ffffff; --inkt:#1d221f; --zacht:#5f6761; --lijn:#d9ddd6; --accent:#1f5f4a; --accent-inkt:#ffffff;
  --goed:#1f7a4d; --goed-bg:#e3f3ea; --fout:#a8322b; --fout-bg:#f9e5e3; --let:#8a5a00; --let-bg:#fff3d6; --nu:#eef5f1;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141715; --vlak:#1c201d; --inkt:#e8ebe6; --zacht:#9aa39c; --lijn:#2d332f; --accent:#6fc3a0; --accent-inkt:#10201a;
    --goed:#7fd3a9; --goed-bg:#17302a; --fout:#f09a93; --fout-bg:#3a1f1d; --let:#f0c36a; --let-bg:#33290f; --nu:#1f2a25; }
}
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--inkt);
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a{ color:var(--accent) } a:hover{ text-decoration-thickness:2px }
code{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.92em; background:var(--nu); padding:1px 5px; border-radius:4px }
h1{ font-size:26px; margin:0 0 6px; letter-spacing:-.01em } h2{ font-size:18px; margin:26px 0 10px } h3{ font-size:15px; margin:18px 0 8px }
.kop{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 28px; border-bottom:1px solid var(--lijn); background:var(--vlak) }
.merk{ font-weight:700; text-decoration:none; color:var(--inkt) } .merk span{ color:var(--zacht); font-weight:400 }
.kop nav{ display:flex; gap:18px; align-items:center } .kop nav a{ text-decoration:none; color:var(--inkt) } .kop nav form{ margin:0 }
.inhoud{ max-width:1180px; margin:0 auto; padding:28px 28px 80px }
.smal{ max-width:460px; margin:40px auto }
.paginakop{ margin-bottom:18px } .uitleg{ color:var(--zacht); margin:0 0 12px; max-width:72ch } .klein{ color:var(--zacht); font-size:13px }
.fout{ color:var(--fout); background:var(--fout-bg); padding:10px 12px; border-radius:8px }
.goed{ color:var(--goed); background:var(--goed-bg); padding:10px 12px; border-radius:8px }
.waarschuwing{ color:var(--let); background:var(--let-bg); padding:10px 12px; border-radius:8px; font-size:14px }
.formulier{ display:flex; flex-direction:column; gap:12px; margin:12px 0 }
.formulier label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--zacht) }
.formulier input, .formulier select{ font:inherit; color:var(--inkt); background:var(--vlak); border:1px solid var(--lijn); border-radius:8px; padding:9px 10px }
.formulier input:focus, .formulier select:focus, button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.formulier .rij, .rij{ display:flex; gap:12px; flex-wrap:wrap; align-items:end } .rij > label{ flex:1 1 160px } .rij > form{ margin:0 }
.formulier.raster{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px } .formulier.raster .vol{ grid-column:1 / -1 } .formulier.raster .knoppen{ grid-column:1 / -1 }
.formulier.gevaar{ margin-top:30px; padding-top:16px; border-top:1px solid var(--lijn) }
button, .knop{ font:inherit; font-weight:600; background:var(--accent); color:var(--accent-inkt); border:0; border-radius:8px; padding:9px 16px; cursor:pointer; text-decoration:none; display:inline-block; align-self:flex-start }
button.stil{ background:transparent; color:var(--zacht); border:1px solid var(--lijn); font-weight:500 } button.stil:hover{ color:var(--inkt) }
table{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums }
th, td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--lijn); vertical-align:top } th{ font-size:12px; color:var(--zacht); font-weight:600; text-transform:uppercase; letter-spacing:.04em }
td.r, th.r{ text-align:right } td span{ display:block } .stilcijfer{ color:var(--zacht) } tr.nu td{ background:var(--nu); font-weight:600 } tr.toekomst td{ color:var(--zacht) }
td.totaal, th.totaal{ border-left:1px solid var(--lijn) }
.scroll{ overflow-x:auto }
.kaarten{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px }
.kaart{ background:var(--vlak); border:1px solid var(--lijn); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:12px }
.kaart h2{ margin:0; font-size:18px } .kaart h2 a{ color:var(--inkt); text-decoration:none } .kaart header p{ margin:2px 0 0 }
.cijfers{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 } .cijfers dt{ font-size:12px; color:var(--zacht); text-transform:uppercase; letter-spacing:.04em } .cijfers dd{ margin:0; font-size:20px; font-weight:700 } .cijfers dd span{ display:block }
.maanden td, .maanden th{ padding:5px 6px; font-size:13px } .kaart footer{ margin-top:auto }
.paneel{ background:var(--vlak); border:1px solid var(--lijn); border-radius:12px; padding:18px 20px; margin:0 0 18px } .paneel h2{ margin-top:0 }
.paneel.let-op{ border-color:var(--let) } .token{ display:block; word-break:break-all; padding:10px; font-size:14px }
.serverkop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap } .serverkop h2{ margin:0 } .serverkop .klein{ font-weight:400; margin-left:8px }
.pil{ font-size:12px; padding:3px 10px; border-radius:999px; background:var(--nu); color:var(--zacht) } .pil.groen{ background:var(--goed-bg); color:var(--goed) } .pil.rood{ background:var(--fout-bg); color:var(--fout) }
.systeem{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin:12px 0 } .systeem dt{ font-size:12px; color:var(--zacht) } .systeem dd{ margin:0 }
.qr{ background:#fff; padding:12px; border-radius:12px; display:inline-block; margin:8px 0 } .qr svg{ width:200px; height:200px; display:block }
@media (max-width:720px){ .inhoud{ padding:16px } .kop{ padding:12px 16px; flex-wrap:wrap } .formulier.raster{ grid-template-columns:1fr 1fr } }