:root{--bg:#f6f5f1;--vlak:#fff;--tekst:#1f2a24;--grijs:#6b7570;--lijn:#dedbd3;--accent:#2f6b4f;--accent-licht:#e4f0ea;--rood:#b3261e;--rood-licht:#fbe9e7;--geel:#f6e7b8;--blauw:#e8eef7}
*{box-sizing:border-box}html{font-size:16px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--tekst);line-height:1.45}
a{color:var(--accent)}h1{font-size:1.5rem;margin:.2rem 0 1rem}h2{font-size:1.15rem;margin:1.6rem 0 .6rem}h3{font-size:1rem;margin:1rem 0 .4rem}
header.top{background:var(--accent);color:#fff;padding:.55rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header.top .merk{font-weight:700;text-decoration:none;color:#fff;font-size:1.05rem}
header.top nav{display:flex;gap:.2rem;flex-wrap:wrap}header.top nav a{color:#fff;text-decoration:none;padding:.3rem .6rem;border-radius:6px;font-size:.95rem}
header.top nav a.actief,header.top nav a:hover{background:rgba(255,255,255,.18)}header.top .rechts{margin-left:auto;font-size:.85rem;display:flex;gap:.6rem;align-items:center}
header.top .rechts button{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:6px;padding:.2rem .6rem;cursor:pointer}
main{max-width:1180px;margin:0 auto;padding:1rem}
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-bottom:1rem}
.tegel{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;padding:.8rem 1rem}.tegel .n{font-size:1.7rem;font-weight:700;color:var(--accent)}.tegel .l{color:var(--grijs);font-size:.85rem}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--vlak)}th,td{padding:.45rem .55rem;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
th{background:#f1efe8;font-weight:600}th.sorteerbaar{cursor:pointer;user-select:none;white-space:nowrap}th.sorteerbaar:hover{background:#e6e3d8}th.asc::after{content:" ▲";font-size:.7em}th.desc::after{content:" ▼";font-size:.7em}td.r,th.r{text-align:right}tr:hover td{background:#fbfaf7}
.tabel-wrap{overflow-x:auto;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak)}
.knop,button.knop,input[type=submit]{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:7px;padding:.45rem .9rem;font-size:.95rem;cursor:pointer;text-decoration:none}
.knop.licht{background:var(--accent-licht);color:var(--accent)}.knop.gevaar{background:var(--rood-licht);color:var(--rood)}.knop.klein{padding:.25rem .6rem;font-size:.85rem}
form.inline{display:inline}label{display:block;font-size:.85rem;color:var(--grijs);margin:.6rem 0 .15rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=file],select,textarea{width:100%;padding:.45rem .55rem;border:1px solid var(--lijn);border-radius:7px;font-size:.95rem;background:#fff;font-family:inherit}
textarea{min-height:5rem}.rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 1rem}.acties{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.flash{padding:.6rem .9rem;border-radius:8px;margin-bottom:.8rem}.flash.ok{background:var(--accent-licht);color:var(--accent)}.flash.fout{background:var(--rood-licht);color:var(--rood)}
.tag{display:inline-block;padding:.05rem .45rem;border-radius:999px;font-size:.78rem;background:var(--blauw)}.tag.ok{background:var(--accent-licht);color:var(--accent)}.tag.nee{background:var(--rood-licht);color:var(--rood)}.tag.geel{background:var(--geel)}.tag.grijs{background:#eee;color:var(--grijs)}
.seg{display:inline-flex;border:1px solid var(--lijn);border-radius:7px;overflow:hidden}.seg button{background:#fff;border:0;border-right:1px solid var(--lijn);padding:.35rem .6rem;cursor:pointer;font-size:.9rem;min-width:2.6rem}
.seg button:last-child{border-right:0}.seg button.aan.ja{background:var(--accent);color:#fff}.seg button.aan.nee{background:var(--rood);color:#fff}.seg button.aan.leeg{background:#ddd}
.stil{color:var(--grijs);font-size:.88rem}.klein{font-size:.85rem}.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:.8rem}.filters label{margin:0 0 .15rem}.filters>div{min-width:120px}
.cel-oordeel{white-space:nowrap}.v-ok{background:#e4f0ea}.v-nee{background:#fbe9e7}.v-lopend{background:#fff8dc}.v-ster{background:#eee}.v-ref{background:repeating-linear-gradient(45deg,#f4f3ef,#f4f3ef 4px,#e9e7e0 4px,#e9e7e0 8px);color:var(--grijs)}
.login{max-width:380px;margin:3rem auto}.pre{white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;background:#f1efe8;padding:.5rem;border-radius:6px}
@media (max-width:640px){html{font-size:15px}main{padding:.6rem}h1{font-size:1.3rem}.kaart{padding:.8rem}}

.grafiek-wrap{overflow-x:auto}.grafiek{display:block;max-width:100%;font-family:inherit}.grafiek .as{font-size:11px;fill:#6b7570}.grafiek .waarde{font-size:11px;fill:#1f2a24;font-weight:600}.legenda{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin:0 2px 0 6px}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--lijn);margin:0 0 1rem}.tabs a{padding:.4rem .9rem;text-decoration:none;color:var(--grijs);border-bottom:2px solid transparent;margin-bottom:-1px}.tabs a.actief{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.gesprek-ind{text-decoration:none;font-size:.9em;cursor:help}
.flash.info{background:var(--blauw);color:var(--tekst)}