:root{--papier: #f7f8fa;--wit: #ffffff;--rand: #dfe3e8;--inkt: #16202c;--inkt-zacht: #5c6b7a;--accent: #1f6feb;--groen: #137a43;--rood: #c4291c;--oranje: #b45309;--radius: 10px}*{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}.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:#e8f0fe;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:#fff}.knop.gevaar{background:var(--wit);border-color:#e7b0ab;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:#fdecea;border:1px solid #f3c2bd;color:#8c1d13}.melding.goed{background:#e6f4ea;border:1px solid #b7dfc5;color:#0d5c32}.melding.let-op{background:#fef6e7;border:1px solid #f2ddb0;color:#7a4a06}.melding.info{background:#e8f0fe;border:1px solid #c2d7f8;color:#10428f}.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:#fdecea;border-color:#f3c2bd;color:#8c1d13}.merkje.club{background:#fef6e7;border-color:#f2ddb0;color:#7a4a06}.merkje.statiegeld{background:#e8f0fe;border-color:#c2d7f8;color:#10428f}.merkje.goed{background:#e6f4ea;border-color:#b7dfc5;color:#0d5c32}.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}.keuzes{display:grid;gap:10px}.keuze{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--rand);border-radius:var(--radius);cursor:pointer}.keuze.gekozen{border-color:var(--accent);background:#f5f9ff}.keuze input{margin-top:4px}.keuze>span{display:grid;gap:3px}.keuze b{font-weight:650}.keuze .uitleg{margin:0;font-size:14px}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.tab{padding:8px 14px;border:1px solid var(--rand);background:var(--wit);border-radius:999px;font-size:14px;font-weight:600;color:var(--inkt-zacht)}.tab[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.tweeluik{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}.tweeluik .kaart{margin-bottom:0}.uren{display:flex;align-items:flex-end;gap:3px;height:110px}.uur{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.uur .vulling{width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}.uur span{font-size:11px;color:var(--inkt-zacht);text-align:center;height:14px}.indelingslijst{display:grid;gap:6px}.indelingsregel{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--rand);border-radius:var(--radius);background:var(--wit)}.indelingsregel.gekozen{border-color:var(--accent);background:#f5f9ff}.kleurstip{width:14px;height:30px;border-radius:4px}.volgnummer{width:24px;text-align:right;color:var(--inkt-zacht);font-variant-numeric:tabular-nums;font-size:13px}.naamveld{border:1px solid transparent;border-radius:6px;padding:6px 8px;background:transparent;min-width:0}.naamveld:focus{border-color:var(--rand);background:var(--wit)}.naamveld.vast{display:grid;gap:1px}.naamveld.vast .onder{font-size:12px;color:var(--inkt-zacht)}.kleurveld{width:38px;height:32px;padding:0;border:1px solid var(--rand);border-radius:6px;background:none}.groepkiezer{border:1px solid var(--rand);border-radius:6px;padding:6px 8px;background:var(--wit)}.telling{font-size:13px;color:var(--inkt-zacht);white-space:nowrap}.knoppen{display:flex;gap:4px}.voorproef{background:#11161d;border-radius:var(--radius);padding:14px;display:grid;gap:12px}.voorproef-groepen{display:flex;gap:6px;flex-wrap:wrap}.voorproef-groep{padding:8px 14px;border-radius:8px;background:#1a212b;color:#9aa8b8;font-size:13px;font-weight:600;border:2px solid transparent}.voorproef-groep.actief{border-color:#2f81f7;background:#14233a;color:#eef2f7}.voorproef-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.voorproef-artikel{background:#1a212b;border:1px solid #2a3441;border-left:4px solid #888;border-radius:8px;padding:10px 12px;display:grid;gap:6px;color:#eef2f7}.voorproef-artikel .naam{font-size:13px;font-weight:600;line-height:1.2}.voorproef-artikel .prijs{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.getal.negatief{color:var(--rood)}