:root{--papier: #f4f5f7;--wit: #ffffff;--vlak: #eceef1;--rand: #dcdfe4;--inkt: #101418;--inkt-zacht: #5a6470;--accent: #0f766e;--accent-tekst: #ffffff;--groen: #137a43;--rood: #c4291c;--oranje: #b45309;--nav-actief: #e0f2f0;--gevaar-rand: #e7b0ab;--uit-vlak: #f1f2f4;--fout-vlak: #fdecea;--fout-rand: #f3c2bd;--fout-inkt: #8c1d13;--goed-vlak: #e6f4ea;--goed-rand: #b7dfc5;--goed-inkt: #0d5c32;--letop-vlak: #fef6e7;--letop-rand: #f2ddb0;--letop-inkt: #7a4a06;--info-vlak: #e0f2f0;--info-rand: #b6ddd8;--info-inkt: #0b4f49;--statiegeld-vlak: #e8f0fe;--statiegeld-rand: #c2d7f8;--statiegeld-inkt: #10428f;--radius: 10px}:root[data-weergave=donker]{--papier: #0f1316;--wit: #171c21;--vlak: #1b2127;--rand: #2a323a;--inkt: #e8eef2;--inkt-zacht: #96a3ad;--accent: #35a396;--groen: #35b06a;--rood: #f2685c;--oranje: #e0952a;--nav-actief: #123330;--gevaar-rand: #6b3630;--uit-vlak: #232a31;--fout-vlak: #341b19;--fout-rand: #5e2a25;--fout-inkt: #ffb4ab;--goed-vlak: #122a1d;--goed-rand: #21503a;--goed-inkt: #86e0ab;--letop-vlak: #33270f;--letop-rand: #5b471c;--letop-inkt: #f2cd7a;--info-vlak: #10302d;--info-rand: #1d514b;--info-inkt: #8ed6cb;--statiegeld-vlak: #16273f;--statiegeld-rand: #27456e;--statiegeld-inkt: #a8ccff}*{box-sizing:border-box}body{margin:0;background:var(--papier);color:var(--inkt);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.schil{display:grid;grid-template-columns:250px 1fr;min-height:100vh}@media(max-width:800px){.schil{grid-template-columns:1fr}}.zijbalk{background:var(--wit);border-right:1px solid var(--rand);padding:20px 14px;display:flex;flex-direction:column;gap:4px}.zijbalk .merk{padding:6px 12px 18px}.merklogo{display:block;height:26px;width:auto;margin-bottom:14px}.merklogo.alleen-donker{display:none}:root[data-weergave=donker] .merklogo.alleen-licht{display:none}:root[data-weergave=donker] .merklogo.alleen-donker{display:block}.inlogkaart .merklogo{height:30px;margin:0 auto 20px}.zijbalk .merk strong{display:block;font-size:17px}.zijbalk .merk span{color:var(--inkt-zacht);font-size:13px}.navknop{text-align:left;padding:10px 12px;border:0;background:none;border-radius:8px;color:var(--inkt-zacht);font-weight:500}.navknop:hover{background:var(--papier)}.navknop[aria-current=true]{background:var(--nav-actief);color:var(--accent);font-weight:650}.inhoud{padding:28px 32px;max-width:1100px}.inhoud h1{margin:0 0 4px;font-size:26px}.inhoud .intro{margin:0 0 24px;color:var(--inkt-zacht);max-width:70ch}.kaart{background:var(--wit);border:1px solid var(--rand);border-radius:var(--radius);padding:20px;margin-bottom:18px}.kaart h2{margin:0 0 4px;font-size:18px}.kaart .uitleg{margin:0 0 16px;color:var(--inkt-zacht);max-width:70ch}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rand);vertical-align:top}th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--inkt-zacht)}td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums}.knop{border:1px solid var(--rand);background:var(--wit);border-radius:8px;padding:9px 16px;font-weight:600}.knop.primair{background:var(--accent);border-color:var(--accent);color:var(--accent-tekst)}.knop.gevaar{background:var(--wit);border-color:var(--gevaar-rand);color:var(--rood)}.knop:disabled{opacity:.5;cursor:not-allowed}.knop.klein{padding:5px 10px;font-size:13px}.rij{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.veld{display:grid;gap:5px}.veld label{font-size:13px;font-weight:600;color:var(--inkt-zacht)}.veld input,.veld select{border:1px solid var(--rand);border-radius:8px;padding:9px 11px;background:var(--wit);min-width:140px}.veld input:focus,.veld select:focus{outline:2px solid var(--accent);outline-offset:0}.melding{border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}.melding.fout{background:var(--fout-vlak);border:1px solid var(--fout-rand);color:var(--fout-inkt)}.melding.goed{background:var(--goed-vlak);border:1px solid var(--goed-rand);color:var(--goed-inkt)}.melding.let-op{background:var(--letop-vlak);border:1px solid var(--letop-rand);color:var(--letop-inkt)}.melding.info{background:var(--info-vlak);border:1px solid var(--info-rand);color:var(--info-inkt)}.merkje{display:inline-block;font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--papier);border:1px solid var(--rand);color:var(--inkt-zacht)}.merkje.leeftijd{background:var(--fout-vlak);border-color:var(--fout-rand);color:var(--fout-inkt)}.merkje.club{background:var(--letop-vlak);border-color:var(--letop-rand);color:var(--letop-inkt)}.merkje.statiegeld{background:var(--statiegeld-vlak);border-color:var(--statiegeld-rand);color:var(--statiegeld-inkt)}.merkje.goed{background:var(--goed-vlak);border-color:var(--goed-rand);color:var(--goed-inkt)}.koppelcode{font-family:ui-monospace,monospace;font-size:38px;letter-spacing:.16em;text-align:center;padding:22px;background:var(--papier);border:2px dashed var(--rand);border-radius:var(--radius);margin:12px 0}.inlogscherm{min-height:100vh;display:grid;place-items:center;padding:20px}.inlogkaart{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:32px;width:min(420px,100%);display:grid;gap:16px}.meter{height:10px;background:var(--rand);border-radius:999px;overflow:hidden;margin:8px 0}.meter>div{height:100%;background:var(--groen)}.meter.let-op>div{background:var(--oranje)}.meter.over>div{background:var(--rood)}.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.cijfer{background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius);padding:14px 16px}.cijfer .label{font-size:13px;color:var(--inkt-zacht)}.cijfer .waarde{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}.kop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}.kop h1{margin:0 0 4px}.kop .intro{margin:0}.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}td .onder,.cijfer .onder{font-size:13px;color:var(--inkt-zacht)}tr.klikbaar{cursor:pointer}tr.klikbaar:hover td{background:var(--papier)}.let-op{color:var(--oranje);font-weight:600}.merkje.uit{background:var(--uit-vlak);color:var(--inkt-zacht)}.merkje.let-op{background:var(--letop-vlak);border-color:var(--letop-rand);color:var(--letop-inkt)}.staafjes{display:flex;align-items:flex-end;gap:3px;height:90px;padding:4px 0}.staaf{flex:1;height:100%;display:flex;align-items:flex-end}.staaf .vulling{width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}.staafjesvoet{display:flex;justify-content:space-between;font-size:12px;color:var(--inkt-zacht);margin-top:6px;font-variant-numeric:tabular-nums}