:root{--achtergrond:#f6f5f2;--vlak:#fff;--vlak-zacht:#faf9f7;--rand:#e2ded7;--rand-sterk:#cdc7bd;--tekst:#23201c;--tekst-gedempt:#6f6960;--accent:#2f6f5e;--accent-zacht:#e7f0ec;--goed:#2f6f5e;--let-op:#9a6b1e;--let-op-zacht:#fbf1de;--stuk:#a33a2c;--stuk-zacht:#fbe9e6;--radius:10px;--radius-klein:6px;--veld-hoogte:35px;--schaduw:0 1px 2px #23201c0f, 0 1px 8px #23201c0a}@media (prefers-color-scheme:dark){:root{--achtergrond:#171815;--vlak:#1f211d;--vlak-zacht:#242621;--rand:#33362f;--rand-sterk:#464a41;--tekst:#ece9e3;--tekst-gedempt:#9c9890;--accent:#6fbfa5;--accent-zacht:#22322c;--goed:#6fbfa5;--let-op:#d9a441;--let-op-zacht:#322a19;--stuk:#e08172;--stuk-zacht:#33211e;--schaduw:none}}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--achtergrond);color:var(--tekst);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5}h1,h2,h3{letter-spacing:-.01em;margin:0;font-weight:600}h1{font-size:16px}h2{font-size:14px}h3{text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-gedempt);font-size:12px}.app{flex-direction:column;height:100vh;display:flex}.kop{background:var(--vlak);border-bottom:1px solid var(--rand);flex:none;align-items:center;gap:20px;padding:10px 16px;display:flex}.kop-merk{align-items:baseline;gap:8px;display:flex}.kop-merk span{color:var(--tekst-gedempt);font-size:12px}.tabs{gap:2px;margin-left:auto;display:flex}.kop-afmelden{border-left:1px solid var(--rand);align-items:center;gap:8px;padding-left:12px;display:flex}.tab{border-radius:var(--radius-klein);color:var(--tekst-gedempt);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;padding:6px 14px}.tab:hover{color:var(--tekst);background:var(--vlak-zacht)}.tab[aria-current=true]{background:var(--accent-zacht);border-color:var(--accent);color:var(--accent);font-weight:600}.inhoud{flex:1;min-height:0;overflow:hidden}.drieluik{grid-template-columns:280px minmax(0,1fr) 340px;height:100%;min-height:0;display:grid}.kolom{flex-direction:column;gap:12px;height:100%;min-height:0;padding:14px;display:flex;overflow-y:auto}.kolom+.kolom{border-left:1px solid var(--rand)}.kolom-rechts{background:var(--vlak-zacht)}.tweeluik{grid-template-columns:320px minmax(0,1fr);height:100%;min-height:0;display:grid}@media (max-width:1180px){.drieluik{grid-template-columns:240px minmax(0,1fr)}.kolom-rechts{display:none}}.paneel{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schaduw);padding:12px}.paneel-kop{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.rij{align-items:center;gap:8px;display:flex}.acties-balk,.lijst-kop{z-index:2;background:var(--achtergrond);border-bottom:1px solid var(--rand);flex:none;margin:-14px -14px 0;padding:10px 14px;position:sticky;top:0}.lijst-kop{flex-direction:column;gap:8px;display:flex}.lijst-kop input{min-width:0}.acties-balk .knop-gevaar{margin-left:auto}.acties-balk .melding{margin:8px 0 0}.kolom-midden{scroll-padding-top:76px}.kolom-lijst{scroll-padding-top:80px}.rij-tussen{justify-content:space-between;align-items:center;gap:8px;display:flex}.kolom-stapel{flex-direction:column;gap:10px;display:flex}.gedempt{color:var(--tekst-gedempt)}.klein{font-size:12px}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace}label{color:var(--tekst-gedempt);margin-bottom:3px;font-size:12px;display:block}input,select,textarea{border:1px solid var(--rand-sterk);border-radius:var(--radius-klein);background:var(--vlak);width:100%;color:var(--tekst);font:inherit;padding:6px 8px}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);margin:0;padding:0}textarea{resize:vertical;min-height:56px}.veld{flex-direction:column;gap:4px;min-width:0;display:flex}.veld>label,.label-rij label{margin:0}.veld>.knop{align-self:flex-start;margin-top:2px}.veld-stapel{flex-direction:column;gap:14px;display:flex}.veld-rij{flex-wrap:wrap;align-items:flex-end;gap:10px 14px;display:flex}.veld-breed{flex:0 240px}.veld-groep{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;display:grid}.veld-naam{color:var(--tekst-gedempt);font-size:12px;display:block}.label-rij{flex-wrap:wrap;align-items:baseline;gap:2px 10px;display:flex}.veld-toelichting{color:var(--tekst-gedempt);margin:0;font-size:12px}.keuze{min-height:var(--veld-hoogte);color:var(--tekst);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;margin:0;font-size:12px;display:inline-flex}.keuze-groep{flex-wrap:wrap;gap:2px 14px;display:flex}.keuze-groep .keuze{min-height:26px}.geen-marge{margin:0}.tekenbalk{flex-wrap:wrap;align-items:center;gap:4px 10px;padding:0 12px;display:flex}.momentbalk{flex-wrap:wrap;align-items:center;gap:6px;padding:0 12px;display:flex}button{font:inherit}.knop{border:1px solid var(--rand-sterk);border-radius:var(--radius-klein);background:var(--vlak);color:var(--tekst);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;padding:6px 12px;display:inline-flex}.knop:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.knop:disabled{opacity:.5;cursor:not-allowed}.knop-primair{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.knop-primair:hover:not(:disabled){color:#fff;filter:brightness(1.08)}.knop-ai{border-style:dashed;border-color:var(--accent);color:var(--accent);background:var(--accent-zacht)}.knop-stil{color:var(--tekst-gedempt);background:0 0;border-color:#0000;padding:4px 6px}.knop-stil:hover:not(:disabled){background:var(--vlak-zacht)}.knop-gevaar:hover:not(:disabled){border-color:var(--stuk);color:var(--stuk)}.lijst{flex-direction:column;gap:2px;display:flex}.lijst-groep{margin-top:8px}.lijst-item{border-radius:var(--radius-klein);width:100%;color:var(--tekst);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 9px;display:flex}.lijst-item:hover{background:var(--vlak)}.lijst-item[aria-current=true]{background:var(--vlak);border-color:var(--accent)}.lijst-item.inactief{opacity:.5}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-gedempt);border-bottom:1px solid var(--rand);padding:4px 6px;font-size:11px;font-weight:600}td{border-bottom:1px solid var(--rand);padding:4px 6px}tr:last-child td{border-bottom:none}.tabel-getal{text-align:right}.ingredient-tabel td{vertical-align:middle;padding:3px 4px}.ingredient-tabel input,.ingredient-tabel select{padding:4px 6px}.smal{width:74px}.zeer-smal{width:58px}.ingredient-tabel .greep-cel{width:22px;padding-right:0}.greep{width:20px;height:28px;color:var(--rand-sterk);fill:currentColor;cursor:grab;background:0 0;border:none;border-radius:4px;place-items:center;padding:0;display:grid}.greep:hover:not(:disabled),.greep:focus-visible{color:var(--tekst-gedempt);background:var(--vlak-zacht)}.greep:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}.greep:active:not(:disabled){cursor:grabbing}.greep:disabled{opacity:.4;cursor:default}.regel-sleept td{opacity:.4}.invoeg-boven td{box-shadow:inset 0 2px 0 var(--accent)}.invoeg-onder td{box-shadow:inset 0 -2px 0 var(--accent)}.kiezer{min-width:180px;position:relative}.kiezer-lijst{z-index:5;background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--radius-klein);width:max-content;min-width:100%;max-width:360px;max-height:280px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 8px 24px #00000024}.kiezer-optie{cursor:pointer;border-radius:4px;flex-direction:column;gap:1px;padding:6px 8px;display:flex}.kiezer-optie[aria-selected=true]{background:var(--accent-zacht)}.kiezer-gekozen>span:first-child{color:var(--accent);font-weight:600}.kiezer-leeg{max-width:280px;color:var(--tekst-gedempt);padding:8px;font-size:12px}.voor-schermlezer{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ruil-tabel .ruil-vink{text-align:center;width:28px}.ruil-uit td:not(.ruil-vink){color:var(--tekst-gedempt)}.ruil-uit .ruil-naam{text-decoration:line-through}.merk-extra{text-transform:lowercase;margin-left:6px;font-weight:500}.zoeker{border:1px dashed var(--rand-sterk);border-radius:var(--radius-klein);background:var(--vlak-zacht);margin-top:8px;padding:10px 12px}.zoeker input{width:100%}.zoeker table{margin:8px 0}.merk{border:1px solid var(--rand-sterk);color:var(--tekst-gedempt);background:var(--vlak);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:2px 7px;font-size:11px;font-weight:600;display:inline-flex}.merk-goed{border-color:var(--goed);color:var(--goed);background:var(--accent-zacht)}.merk-let-op{border-color:var(--let-op);color:var(--let-op);background:var(--let-op-zacht)}.merk-stuk{border-color:var(--stuk);color:var(--stuk);background:var(--stuk-zacht)}.merken{flex-wrap:wrap;gap:5px;display:flex}.tag-groep{margin-bottom:8px}.tag-knop{border:1px solid var(--rand-sterk);background:var(--vlak);color:var(--tekst-gedempt);cursor:pointer;border-radius:999px;padding:3px 9px;font-size:12px}.tag-knop[aria-pressed=true]{background:var(--accent-zacht);border-color:var(--accent);color:var(--accent);font-weight:600}.melding{border-radius:var(--radius-klein);white-space:pre-line;border:1px solid;padding:8px 10px;font-size:12px}.melding-stuk{border-color:var(--stuk);background:var(--stuk-zacht);color:var(--stuk)}.melding-let-op{border-color:var(--let-op);background:var(--let-op-zacht);color:var(--let-op)}.melding-goed{border-color:var(--goed);background:var(--accent-zacht);color:var(--goed)}.bereikbalk{border-radius:var(--radius-klein);background:var(--vlak-zacht);border:1px solid var(--rand);height:26px;position:relative;overflow:hidden}.bereikbalk-span{background:var(--accent-zacht);border-left:2px solid var(--accent);border-right:2px solid var(--accent);position:absolute;top:0;bottom:0}.bereikbalk-punt{background:var(--tekst);width:2px;position:absolute;top:0;bottom:0}details.uitleg{border:1px solid var(--rand);border-radius:var(--radius-klein);background:var(--vlak-zacht);padding:0}details.uitleg>summary{cursor:pointer;color:var(--tekst-gedempt);align-items:center;gap:6px;padding:8px 10px;font-size:12px;font-weight:600;list-style:none;display:flex}details.uitleg>summary::-webkit-details-marker{display:none}details.uitleg>summary:before{content:"▸";font-size:10px;transition:transform .12s}details.uitleg[open]>summary:before{transform:rotate(90deg)}details.uitleg>summary:hover{color:var(--tekst)}.uitleg-inhoud{color:var(--tekst-gedempt);padding:0 10px 10px 24px;font-size:12px;line-height:1.6}.uitleg-inhoud p{margin:0 0 8px}.uitleg-inhoud p:last-child{margin-bottom:0}.uitleg-inhoud strong{color:var(--tekst)}.uitleg-inhoud dl{grid-template-columns:auto 1fr;gap:3px 10px;margin:0 0 8px;display:grid}.uitleg-inhoud dt{color:var(--tekst);white-space:nowrap;font-weight:600}.uitleg-inhoud dd{margin:0}.voorbeeld{border-left:2px solid var(--accent);margin:8px 0;padding:4px 0 4px 10px}.leeg{height:100%;color:var(--tekst-gedempt);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:32px;display:flex}pre.fragment{background:var(--vlak-zacht);border:1px solid var(--rand);border-radius:var(--radius-klein);white-space:pre-wrap;word-break:break-word;max-height:260px;margin:0;padding:10px;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;font-size:12px;overflow:auto}.band-blok{margin-bottom:14px}.band-kop{text-transform:uppercase;letter-spacing:.04em;color:var(--tekst-gedempt);margin:0 0 6px;font-size:12px;font-weight:600}.band-rij{grid-template-columns:24px auto auto 1fr;align-items:center;gap:8px;margin-bottom:5px;display:grid}.band-maat{font-family:var(--mono,ui-monospace, monospace);color:var(--tekst-gedempt);font-weight:600}.maat-stippen{gap:3px;display:inline-flex}.maat-stip{border:1px solid var(--rand-sterk);width:18px;height:18px;color:var(--tekst-gedempt);background:var(--vlak);border-radius:5px;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:inline-flex}.stip-klaar{border-color:var(--goed);color:var(--goed);background:var(--accent-zacht)}.stip-ongetekend{border-color:var(--let-op);color:var(--let-op);background:var(--let-op-zacht)}.stip-buiten{border-color:var(--stuk);color:var(--stuk);background:var(--stuk-zacht)}.portie-som{border-top:1px solid var(--rand);margin-top:8px;padding-top:8px}.deelblok{border:1px solid var(--rand);border-radius:var(--radius-klein);background:var(--vlak-zacht);flex-direction:column;gap:12px;padding:12px;display:flex}.deelblok-kop{justify-content:space-between;align-items:center;gap:10px;display:flex}.deelblok-kop h3{color:var(--tekst)}.stappen{flex-direction:column;gap:6px;display:flex}.stap-rij{align-items:center;gap:8px;display:flex}.stap-rij input{flex:1;min-width:0}.stap-nummer{text-align:right;width:16px;color:var(--tekst-gedempt);flex:none;font-size:12px}.foto-vlak{aspect-ratio:4/3;border:1px solid var(--rand);border-radius:var(--radius-klein);background:var(--vlak);text-align:center;justify-content:center;align-items:center;width:100%;max-width:320px;display:flex;overflow:hidden}.foto-vlak p{padding:0 12px}.foto-preview{object-fit:cover;width:100%;height:100%;display:block}.aanmelden{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.aanmelden-kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);width:100%;max-width:340px;box-shadow:var(--schaduw);padding:24px}.aanmelden-kop{margin-bottom:20px}.aanmelden-kop h1{margin-bottom:2px;font-size:18px}.aanmelden-formulier{flex-direction:column;gap:14px;display:flex}.aanmelden-knop{justify-content:center;width:100%;margin-top:2px;padding:8px 12px}.aanmelden-formulier .melding{margin:0}.venster{border:1px solid var(--rand);border-radius:var(--radius);background:var(--vlak);width:min(420px,100vw - 32px);color:var(--tekst);padding:16px;box-shadow:0 8px 24px #23201c24}.venster::backdrop{background:#23201c52}.venster h3{margin:0 0 6px}.venster input{width:100%}