:root{
  --bg:#f6f7f9; --kaart:#ffffff; --rand:#e2e5ea; --tekst:#1a1d21; --zacht:#5f6773;
  --accent:#1f6feb; --accent-zacht:#e8f0fe; --groen:#059669; --grijs:#9aa3ad; --rood:#b91c1c;
  --rood-zacht:#fdecec; --groen-zacht:#e7f6ef; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14171a; --kaart:#1c2024; --rand:#2c3238; --tekst:#e8eaed; --zacht:#9aa3ad;
    --accent:#5b9bff; --accent-zacht:#1d2b45; --groen:#34d399; --grijs:#5f6773; --rood:#f87171;
    --rood-zacht:#3a1f22; --groen-zacht:#173328; color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tekst);
     font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
header{border-bottom:1px solid var(--rand);background:var(--kaart)}
.kop{max-width:1040px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kop h1{font-size:17px;margin:0;font-weight:650;letter-spacing:-.01em}
.kop h1 a{color:inherit;text-decoration:none}
.kop .wie{color:var(--zacht);font-size:13px}
.kop nav{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:13px}
.kop nav a{color:var(--zacht);text-decoration:none}
.kop nav a:hover,.kop nav a.aan{color:var(--tekst);text-decoration:underline}
.kop nav form{margin:0}
.linkknop{background:none;border:0;padding:0;font:inherit;color:var(--zacht);cursor:pointer}
.linkknop:hover{color:var(--tekst);text-decoration:underline}
main{max-width:1040px;margin:0 auto;padding:26px 22px 40px}
h2{font-size:18px;margin:0 0 14px;font-weight:650}
h3{font-size:15px;margin:22px 0 10px;font-weight:650}
.rooster{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.kaart{display:flex;flex-direction:column;gap:9px;background:var(--kaart);
       border:1px solid var(--rand);border-radius:11px;padding:17px 18px;
       text-decoration:none;color:inherit;transition:border-color .12s, transform .12s}
a.kaart:hover{border-color:var(--accent);transform:translateY(-1px)}
.status{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
        text-transform:uppercase;letter-spacing:.04em;color:var(--zacht)}
.bol{width:8px;height:8px;border-radius:50%;background:var(--grijs);flex:none}
.status.op .bol{background:var(--groen)}
.status.op{color:var(--groen)}
.status.plat .bol{background:var(--rood)}
.status.plat{color:var(--rood)}
.kaart h2{font-size:16px;margin:0}
.kaart p{margin:0;color:var(--zacht);font-size:13.5px;flex:1}
.open{font-size:13.5px;font-weight:550;color:var(--accent)}
.leeg{color:var(--zacht);font-size:14px;border:1px dashed var(--rand);border-radius:11px;padding:26px;text-align:center}

/* formulieren */
.smal{max-width:400px;margin:7vh auto 0}
.paneel{background:var(--kaart);border:1px solid var(--rand);border-radius:11px;padding:22px 24px}
.paneel + .paneel{margin-top:16px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
input[type=text],input[type=password],input[type=email]{width:100%;padding:9px 11px;border:1px solid var(--rand);border-radius:7px;
       background:var(--bg);color:var(--tekst);font:inherit}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}
input.code{font-size:22px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
button,.knop{display:inline-block;padding:9px 16px;border:0;border-radius:7px;background:var(--accent);color:#fff;
       font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
button:hover,.knop:hover{filter:brightness(1.08)}
button.vol{width:100%;margin-top:18px}
button.klein{padding:5px 10px;font-size:12.5px}
button.grijs{background:var(--grijs)}
button.rood{background:var(--rood)}
.uitleg{color:var(--zacht);font-size:13.5px;margin:0 0 6px}
.fout,.melding{border-radius:7px;padding:9px 12px;font-size:13.5px;margin:0 0 12px}
.fout{background:var(--rood-zacht);color:var(--rood)}
.melding{background:var(--groen-zacht);color:var(--groen)}
.qr{display:flex;justify-content:center;margin:14px 0}
.qr svg{max-width:220px;height:auto;border-radius:6px}
.geheim{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--bg);padding:8px 10px;
        border-radius:6px;text-align:center;word-break:break-all}
.tijdelijk{font-family:ui-monospace,Consolas,monospace;font-size:22px;letter-spacing:.04em;background:var(--bg);
        padding:12px;border-radius:8px;text-align:center;margin:12px 0;user-select:all}
ol.stappen{padding-left:20px;font-size:14px;color:var(--zacht)} ol.stappen li{margin:3px 0}

/* beheer */
.tabelhoes{overflow-x:auto;background:var(--kaart);border:1px solid var(--rand);border-radius:11px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rand);vertical-align:middle}
th{font-size:12px;color:var(--zacht);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.acties{white-space:nowrap}
td.acties form{display:inline}
.vinkjes{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.vinkjes label{display:flex;gap:5px;align-items:center;font-weight:400;margin:0;font-size:13px;white-space:nowrap}
.label{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:9px;background:var(--accent-zacht);color:var(--accent)}
.label.rood{background:var(--rood-zacht);color:var(--rood)}
.label.grijs{background:var(--bg);color:var(--zacht)}
.rij-nieuw{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}
.rij-nieuw label{margin-top:0}
details summary{cursor:pointer;color:var(--zacht);font-size:12.5px}
details form{display:flex;gap:6px;margin-top:6px}
details input{padding:5px 8px;font-size:12.5px;width:140px}
.zacht{color:var(--zacht)}
footer{max-width:1040px;margin:0 auto;padding:0 22px 30px;color:var(--zacht);font-size:12px}

.mt{margin-top:14px}
.hoger{margin-top:3vh}
.breed460{max-width:460px}
.klein-tekst{font-size:13px}
.normaal{font-weight:400}
.nowrap{white-space:nowrap}
.vink{display:flex;gap:7px;align-items:center;font-weight:400;margin:12px 0 4px}

.kopregel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.kopregel h2{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kopregel .knop{margin-left:auto}
.kruimel{margin:0 0 10px;font-size:13px}
.kruimel a{color:var(--zacht);text-decoration:none}
.kruimel a:hover{color:var(--tekst)}
.let-op{background:var(--accent-zacht);color:var(--tekst);border-radius:7px;padding:9px 12px;font-size:13.5px;margin:0 0 12px}
table.klikbaar tbody tr{cursor:pointer}
table.klikbaar tbody tr:hover{background:var(--bg)}
table.klikbaar td a{color:inherit;text-decoration:none}
.label + .label{margin-left:2px}
.twee{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start;margin-top:14px}
.twee > div > .paneel + .paneel{margin-top:16px}
h3.eerste{margin-top:0}
.lijstvinkjes label{display:flex;gap:8px;align-items:center;font-weight:400;margin:0;padding:7px 0;border-bottom:1px solid var(--rand)}
.lijstvinkjes label.streep{border-bottom:0;padding-top:10px}
.vinkjes.onder{margin-bottom:6px}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.knoppen form{margin:0}
details form.naast{display:flex;gap:6px;margin-top:8px}
details form.naast input{width:auto;flex:1}
button:disabled{opacity:.5;cursor:not-allowed}
.geheim.link{text-align:left;user-select:all;font-size:13px}
.breed560{max-width:560px}