:root{--papier: #f7f8fa;--wit: #ffffff;--vlak: #f1f3f6;--rand: #dfe3e8;--inkt: #16202c;--inkt-zacht: #5c6b7a;--accent: #1f6feb;--accent-tekst: #ffffff;--groen: #137a43;--rood: #c4291c;--oranje: #b45309;--nav-actief: #e8f0fe;--keuze-vlak: #f5f9ff;--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: #e8f0fe;--info-rand: #c2d7f8;--info-inkt: #10428f;--vp-achtergrond: #11161d;--vp-paneel: #1a212b;--vp-rand: #2a3441;--vp-tekst: #eef2f7;--vp-tekst-zacht: #9aa8b8;--vp-accent: #2f81f7;--vp-actief: #14233a;--radius: 10px}:root[data-weergave=donker]{--papier: #10151c;--wit: #171d26;--vlak: #1b222c;--rand: #2a3340;--inkt: #e9eef5;--inkt-zacht: #9aa8b8;--accent: #4c8dff;--groen: #35b06a;--rood: #f2685c;--oranje: #e0952a;--nav-actief: #1b2c47;--keuze-vlak: #16233a;--gevaar-rand: #6b3630;--uit-vlak: #232b36;--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: #16273f;--info-rand: #27456e;--info-inkt: #a8ccff}:root[data-kassaweergave=licht]{--vp-achtergrond: #eef1f5;--vp-paneel: #ffffff;--vp-rand: #d3d9e0;--vp-tekst: #16202c;--vp-tekst-zacht: #5c6b7a;--vp-accent: #1f6feb;--vp-actief: #dbe7fb}*{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(--info-vlak);border-color:var(--info-rand);color:var(--info-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}.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:var(--keuze-vlak)}.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:var(--accent-tekst)}.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:var(--keuze-vlak)}.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}.paginabalk{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}.paginatab{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--rand);border-radius:var(--radius);background:var(--wit);cursor:grab;border-top:4px solid var(--kleur, var(--rand))}.paginatab.actief{border-color:var(--accent);background:var(--keuze-vlak)}.paginatab:active{cursor:grabbing}.paginatab .paginanaam{border:1px solid transparent;border-radius:6px;padding:4px 6px;background:transparent;width:10ch;font-weight:650;cursor:text}.paginatab .paginanaam:focus{border-color:var(--rand);background:var(--wit)}.paginatab .paginanaam[readonly]{cursor:inherit}.paginatab.nieuw{border-style:dashed;cursor:default}.paginatab.nieuw input{border:none;background:transparent;padding:4px 6px;width:14ch}.indeler{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:16px;align-items:start}@media(max-width:1100px){.indeler{grid-template-columns:minmax(0,1fr)}}.raster{display:grid;grid-template-columns:repeat(var(--kolommen, 6),minmax(0,1fr));gap:8px}.rastervak{min-height:78px;border:1px dashed var(--rand);border-radius:10px;display:grid;background:var(--vlak)}.rastervak.bezet{border-style:solid;background:transparent}.rastervak.doel{border-color:var(--accent);background:var(--keuze-vlak);border-style:solid}.rastervak .vakleeg{align-self:center;justify-self:center;color:var(--inkt-zacht);font-size:12px;font-variant-numeric:tabular-nums;opacity:.55}.tegel{display:grid;gap:2px;align-content:space-between;padding:8px 10px;border:1px solid var(--rand);border-left:5px solid var(--kleur, var(--rand));border-radius:10px;background:var(--wit);cursor:grab}.tegel:active{cursor:grabbing}.tegel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tegel .naam{font-size:13px;font-weight:650;line-height:1.2;overflow-wrap:break-word}.tegel .prijs{font-size:13px;color:var(--inkt-zacht);font-variant-numeric:tabular-nums}.tegel .tegelknoppen{display:flex;gap:4px;align-items:center}.kleurveld.klein{width:26px;height:22px}.tegel .knop.klein{min-height:22px;padding:0 6px;font-size:12px}.voorraadkaart{position:sticky;top:16px}.voorraadlijst{display:grid;gap:6px;max-height:52vh;overflow-y:auto;padding-right:4px}.voorraadtegel{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--rand);border-left:5px solid var(--kleur, var(--rand));border-radius:8px;background:var(--wit);cursor:grab}.voorraadtegel:active{cursor:grabbing}.voorraadtegel .naam{font-size:13px;font-weight:650}.voorraadtegel .onder{font-size:12px;color:var(--inkt-zacht);display:flex;gap:8px;justify-content:space-between}.voorraadtegel .herkomst{font-style:italic}.voorproef{background:var(--vp-achtergrond);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:var(--vp-paneel);color:var(--vp-tekst-zacht);font-size:13px;font-weight:600;border:2px solid transparent}.voorproef-groep.actief{border-color:var(--vp-accent);background:var(--vp-actief);color:var(--vp-tekst)}.voorproef-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.voorproef-artikel{background:var(--vp-paneel);border:1px solid var(--vp-rand);border-left:4px solid var(--vp-tekst-zacht);border-radius:8px;padding:10px 12px;display:grid;gap:6px;color:var(--vp-tekst)}.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)}
