*,:before,:after{box-sizing:border-box}html,body{margin:0}:root{--navy:#0f2d5e;--navy-licht:#1a3d73;--navy-lijn:#2a4d83;--navy-diep:#0d1c4b;--kop:#1e3a5f;--tekst:#1e293b;--tekst-zacht:#475569;--grijs:#64748b;--label:#94a3b8;--rand-sterk:#cbd5e1;--rand:#e2e8f0;--vlak-2:#f1f5f9;--vlak:#f8fafc;--wit:#fff;--ok:#16a34a;--ok-tekst:#15803d;--ok-vlak:#f0fdf4;--ok-rand:#bbf7d0;--urgent:#dc2626;--urgent-tekst:#b91c1c;--urgent-vlak:#fef2f2;--urgent-rand:#fecaca;--focus:#3b82f6;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--r-kaart:12px;--r-tegel:10px;--r-knop:6px;--r-badge:5px;--gap:1rem;--header-h:60px;--max-w:1340px}body{background:var(--vlak);color:var(--tekst);font-family:var(--font);font-size:14px;line-height:1.5}.hr-main{max-width:var(--max-w);margin:0 auto;padding:1.75rem 2rem 4rem}.paginakop{margin-bottom:1.5rem}.paginakop h1{letter-spacing:-.02em;color:var(--kop);margin:0;font-size:1.35rem;font-weight:300}.paginakop p{max-width:78ch;color:var(--grijs);margin:.2rem 0 0;font-size:.85rem}.tegels{gap:var(--gap);grid-template-columns:repeat(auto-fill,189px);display:grid}.tegel{text-align:center;background:var(--navy);border:1px solid var(--navy-licht);border-radius:var(--r-tegel);width:189px;height:113px;color:var(--wit);justify-content:center;align-items:center;padding:.75rem;font-size:.84rem;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s,transform .15s,box-shadow .15s;display:flex}.tegel:hover{background:var(--navy-licht);color:#93c5fd;transform:translateY(-2px);box-shadow:0 6px 20px #0f2d5e59}.kaart{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r-kaart);overflow:hidden}.kaart-kop{justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem .75rem;display:flex}.kaart-titel{letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-size:.74rem;font-weight:700}.kaart-body{padding:0 1.25rem 1.25rem}.kaart-voet{background:var(--vlak);border-top:1px solid var(--rand);color:var(--grijs);padding:.75rem 1.25rem;font-size:.78rem}.badge{border-radius:var(--r-badge);white-space:nowrap;border:1px solid;align-items:center;padding:.15rem .5rem;font-size:.7rem;font-weight:600;display:inline-flex}.badge.ok{color:var(--ok-tekst);background:var(--ok-vlak);border-color:var(--ok-rand)}.badge.neutraal{color:var(--grijs);background:var(--vlak-2);border-color:var(--rand)}.melding{border:1px solid var(--urgent-rand);border-left:4px solid var(--urgent);border-radius:0 var(--r-tegel) var(--r-tegel) 0;background:var(--urgent-vlak);color:var(--urgent-tekst);margin:0;padding:.7rem 1rem;font-size:.82rem}.melding.ok{border-color:var(--ok-rand);border-left-color:var(--ok);background:var(--ok-vlak);color:var(--ok-tekst)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.btn{border-radius:var(--r-knop);min-height:32px;font:600 .82rem var(--font);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;padding:.45rem 1rem;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.btn.primair{background:var(--navy);border-color:var(--navy);color:var(--wit)}.btn.primair:hover{background:var(--navy-licht);border-color:var(--navy-licht)}.btn.secundair{border-color:var(--rand);color:var(--tekst-zacht);background:0 0}.btn.secundair:hover{border-color:var(--rand-sterk);background:var(--vlak)}.btn.gevaar{color:var(--urgent);background:0 0;border-color:#fca5a5}.btn.gevaar:hover{background:var(--urgent-vlak)}.btn:disabled{background:var(--rand-sterk);border-color:var(--rand-sterk);color:var(--wit);cursor:not-allowed}.btn.klein{min-height:28px;padding:.25rem .6rem;font-size:.74rem;font-weight:500}@media (max-width:640px){.hr-main{padding:1.25rem 1rem 3rem}.tegels{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.tegel{width:auto}}.knoppenrij{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.btn.ghost{border-color:var(--rand);color:var(--tekst-zacht);background:0 0}.btn.ghost:hover{border-color:var(--rand-sterk);background:var(--vlak);color:var(--tekst)}.btn:focus-visible,.tegel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.portal-header{z-index:10;height:var(--header-h);background:var(--wit);border-bottom:1px solid var(--rand);justify-content:space-between;align-items:center;gap:1rem;padding:0 2rem;display:flex;position:sticky;top:0}.portal-links,.portal-rechts{align-items:center;gap:.75rem;display:flex}.portal-rechts form{margin:0}.portal-logo{opacity:.7;width:auto;height:40px;display:block}.portal-streep{background:var(--rand-sterk);width:1px;height:24px}.portal-name{letter-spacing:.12em;text-transform:uppercase;color:var(--kop);font-size:.78rem;font-weight:700}.login-main{justify-content:center;padding-top:4rem;display:flex}.login-kaart{width:100%;max-width:420px}.login-tekst{color:var(--tekst-zacht);margin:0 0 1rem}.login-kaart .melding{margin-bottom:1rem}.login-knop{width:100%;min-height:40px}@media (max-width:640px){.portal-header{padding:0 1rem}.portal-rechts .btn{padding:.25rem .45rem}}