:root{--vertrek-duur:.19s;--entree-duur:.28s;--wissel-stagger:60ms;--rand-ruimte:20px;--kleur-maaltijdkaart-rand:#ffffff3b;--kleur-knop-rand:#fafafa;color:var(--kleur-tekst);background:var(--kleur-achtergrond);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--kleur-achtergrond);margin:0}a{color:var(--kleur-accent)}main{gap:var(--ruimte-xxl);width:min(960px,100%);padding:var(--ruimte-xl) var(--rand-ruimte) var(--ruimte-xxl);padding-inline:max(var(--rand-ruimte), env(safe-area-inset-left)) max(var(--rand-ruimte), env(safe-area-inset-right));grid-template-columns:minmax(0,1fr);align-content:start;margin:0 auto;display:grid}main>*{min-width:0}.hero,.panel{background:var(--kleur-kaart);border:1px solid var(--kleur-kaart-rand);border-radius:20px;padding:20px;box-shadow:0 8px 24px #00000014}.panel h1,.panel h2,.panel li,.panel p{overflow-wrap:anywhere}.panel ol,.panel ul{padding-inline-start:1.2em}.hero,.recipe-form{gap:16px;display:grid}label{gap:6px;font-weight:650;display:grid}input,select,textarea{border:1px solid var(--kleur-kaart-rand);width:100%;min-height:44px;font:inherit;background:var(--kleur-kaart);color:var(--kleur-tekst);border-radius:12px;padding:10px 12px}textarea{resize:vertical}button,.button{min-height:var(--knop-hoogte);gap:var(--knop-tussenruimte);border:var(--knop-rand) solid var(--kleur-knop-rand);border-radius:var(--knop-radius);padding:0 var(--knop-padding);color:var(--kleur-tekst);font-size:var(--knop-font);background:0 0;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:inline-flex}button:disabled{opacity:.45}.actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.acties-verticaal{flex-direction:column;gap:12px;display:flex}.status{border-left:4px solid var(--kleur-accent);background:var(--kleur-accent-zacht);margin:0;padding:10px 12px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--kleur-accent-zacht);color:var(--kleur-tekst)}.chip.selected{background:var(--kleur-accent);color:var(--kleur-kaart)}.skip-link{min-height:var(--tikdoel);background:var(--kleur-primair);color:var(--kleur-primair-tekst);border-radius:0 0 var(--radius-veld) 0;z-index:10;align-items:center;padding:10px 14px;display:flex;position:absolute;top:0;left:-9999px}.skip-link:focus{left:0}section>.navbalk{margin:var(--ruimte-xxl) 0}.navbalk{align-items:center;gap:var(--knop-tussenruimte);min-width:0;display:flex}.hoofdnav{gap:var(--knop-tussenruimte);scrollbar-width:none;flex:auto;min-width:0;display:flex;overflow-x:auto}.hoofdnav::-webkit-scrollbar{display:none}.navtab{min-height:var(--knop-hoogte);padding:0 var(--knop-padding);border-radius:var(--knop-radius);font-size:var(--knop-font);color:var(--kleur-tekst);white-space:nowrap;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.navtab--actief{background:var(--kleur-primair);color:var(--kleur-primair-tekst)}.site-instellingen{min-width:var(--tikdoel);min-height:var(--tikdoel);color:var(--kleur-tekst-zacht);font-size:var(--type-meta);justify-content:center;align-items:center;padding:0 8px;font-weight:650;text-decoration:none;display:inline-flex}:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--kleur-focus);outline-offset:2px}.scherm-kop{gap:2px;display:grid}.scherm-kop h1{font-size:var(--type-schermtitel);letter-spacing:-.01em;margin:0;line-height:1.2}.kaarten{gap:var(--kaart-tussenruimte);scroll-snap-type:x mandatory;margin:0;margin-inline:calc(-1 * var(--rand-ruimte));padding:0;padding-inline:var(--rand-ruimte);scroll-padding-inline:var(--rand-ruimte);scrollbar-width:none;align-items:stretch;list-style:none;display:flex;overflow-x:auto}.kaarten::-webkit-scrollbar{display:none}.kaarten>li{flex:0 0 var(--kaart-breedte);scroll-snap-align:start;min-width:0;animation:kaart-komt-op var(--entree-duur) cubic-bezier(.2, 0, 0, 1) backwards;animation-delay:calc(var(--kaart-index,0) * var(--wissel-stagger))}.kaarten--wisselt>li{opacity:0;will-change:opacity, transform;transition:opacity var(--vertrek-duur) ease-in, transform var(--vertrek-duur) ease-in;transition-delay:calc(var(--kaart-index,0) * var(--wissel-stagger));animation:none;transform:translateY(-14px)scale(.96)}@keyframes kaart-komt-op{0%{opacity:0;transform:translateY(14px)scale(.96)}}@media (prefers-reduced-motion:reduce){.kaarten>li{animation:.2s linear backwards kaart-vloeit-in}.kaarten--wisselt>li{transition:opacity .14s linear;transform:none}@keyframes kaart-vloeit-in{0%{opacity:0}}}.maaltijdkaart{height:var(--kaart-hoogte);border:var(--knop-rand) solid var(--kleur-maaltijdkaart-rand);border-radius:var(--kaart-radius);isolation:isolate;flex-direction:column;justify-content:flex-end;min-width:0;display:flex;position:relative;overflow:hidden}.kaart-opening{color:var(--kleur-tekst);text-decoration:none;display:block;position:absolute;inset:0}.maaltijdkaart .kaart-beeld{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.maaltijdkaart .kaart-beeld--leeg{background:radial-gradient(circle at 50% 31%,#2c2c2c 0%,#121212 70%);align-content:center;place-items:center;padding-bottom:38%;font-size:96px;display:grid;position:absolute;inset:0}.kaart-tekst{z-index:1;gap:var(--ruimte-xl);padding:var(--kaart-tekstruimte);pointer-events:none;background:linear-gradient(to bottom, #0000 0%, #000 var(--kaart-verloop-start));min-width:0;display:grid;position:relative}.kaart-titel{font-size:var(--type-kaarttitel);color:var(--kleur-tekst);overflow-wrap:anywhere;font-weight:700;line-height:1.2}.kaart-opening:hover~.kaart-tekst .kaart-titel{text-decoration:underline}.kaart-meta{color:var(--kleur-tekst-zacht);font-size:var(--type-meta);margin:0}.kaart-waarom{font-size:var(--type-waarom);color:var(--kleur-tekst);line-height:1.3}.maaltijdkaart--gedimd{opacity:.2}.kaart-acties{gap:var(--ruimte-sm);pointer-events:auto;justify-items:start;display:grid}.kaart-acties .rij{gap:var(--ruimte-sm);flex-wrap:wrap;align-items:center;display:flex}button.primair,a.primair{background:var(--kleur-primair);color:var(--kleur-primair-tekst);border-color:var(--kleur-primair)}button.gevaar{color:var(--kleur-tekst-zacht);border-color:var(--kleur-kaart-rand)}.navbalk+.kaart-meta{margin-bottom:var(--ruimte-lg)}a.kaart-lijstknop{gap:6px}button.secundair{color:var(--kleur-tekst);border:var(--knop-rand) solid var(--kleur-knop-rand);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:0 0}button.secundair:disabled{color:#3f3f46;cursor:not-allowed;border-color:#3f3f46}button.tekstknop,a.tekstknop{color:var(--kleur-tekst);min-height:var(--knop-hoogte);padding:0 var(--knop-padding);background:0 0;border:0;text-decoration:none}button.tekstknop:hover,a.tekstknop:hover{text-decoration:underline}.icoonknop{border-radius:999px;flex:none;width:40px;height:40px;min-height:40px;padding:0}.knop-vol{width:100%}.kaart-detaillink{color:var(--kleur-accent);min-height:var(--tikdoel);align-items:center;font-weight:650;display:inline-flex}.reroll-balk{margin:0;display:grid}.reroll-balk button{width:100%}.snackbar{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));background:var(--kleur-primair);width:min(560px,100% - 32px);color:var(--kleur-primair-tekst);border-radius:var(--radius-veld);justify-content:space-between;align-items:center;gap:var(--ruimte-md);z-index:20;padding:12px 16px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #00000040}.snackbar button{background:var(--kleur-kaart);color:var(--kleur-primair)}.recepten-kop{gap:var(--ruimte-md);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.recepten-kop h1{font-size:var(--type-schermtitel);margin:0}.veld-donker{width:100%;min-height:0;font:inherit;color:var(--kleur-tekst);background:#1e1e1e;border:1px solid #444;border-radius:8px;padding:12px 16px}.veld-donker::placeholder{color:#fff6}textarea.veld-donker{resize:vertical;min-height:80px}.veld{gap:8px;display:grid}.veld label{font-weight:400;display:block}.veld-blok{gap:12px;display:grid}.zoekbalk{margin:var(--ruimte-lg) 0}.receptenlijst{flex-direction:column;gap:20px;margin:0;padding:0;list-style:none;display:flex}.receptkaart{border:2px solid var(--kleur-knop-rand);height:152px;color:var(--kleur-tekst);border-radius:12px;text-decoration:none;display:block;position:relative;overflow:hidden}.receptkaart-beeld{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.receptkaart-beeld--leeg{background:radial-gradient(circle at 50% 31%,#2c2c2c 0%,#121212 70%);place-items:center;font-size:56px;display:grid;position:absolute;inset:0}.receptkaart-tekst{z-index:1;background:linear-gradient(#0000 0%,#000000b3 60%,#000 100%);flex-direction:column;justify-content:flex-end;gap:8px;padding:20px;display:flex;position:absolute;inset:0}.receptkaart-badge{color:#d4d4d8;background:#2e2e32;border:1px solid #3f3f46;border-radius:4px;align-self:flex-start;padding:2px 6px;font-size:12px}.receptkaart-titel{overflow-wrap:anywhere;margin:0;font-size:24px;font-weight:700}.receptfoto{object-fit:cover;background:var(--kleur-accent-zacht);border-radius:12px;width:100%;height:140px}.receptfoto--leeg{background:radial-gradient(circle at 50% 31%,#2c2c2c 0%,#121212 70%);place-items:center;font-size:56px;display:grid}.detail-acties{justify-content:space-between;display:flex}.historie-dag{border:1px solid var(--kleur-kaart-rand);border-radius:var(--radius-veld);background:var(--kleur-kaart);padding:var(--ruimte-md);margin-bottom:var(--ruimte-md)}.historie-dag h2{margin:0 0 var(--ruimte-sm);font-size:var(--type-body);text-transform:capitalize}.historie-leeg{color:var(--kleur-tekst-zacht);margin:0;font-style:italic}.historie-item{gap:var(--ruimte-md);flex-wrap:wrap;align-items:center;display:flex}.boodschapgroep h2{margin:0 0 var(--ruimte-md);font-size:var(--type-kaarttitel);font-weight:700}.lijst-leeg{color:var(--kleur-tekst-zacht);margin:0}.boodschap-scheiding{background:var(--kleur-kaart-rand);border:0;width:100%;height:1px;margin:0}.boodschap-checklist{gap:20px;margin:0;padding:0;list-style:none;display:grid}.boodschap-checklist label{font-weight:400;font-size:var(--type-body);cursor:pointer;align-items:center;gap:12px;line-height:1.4;display:flex}.boodschap-checklist label span{overflow-wrap:anywhere;min-width:0}.boodschap-checklist label.af{color:var(--kleur-tekst-zacht);text-decoration:line-through}.boodschap-vink{appearance:none;cursor:pointer;background:#1e1e1e;border:1px solid #b3b3b3;border-radius:4px;flex:none;place-content:center;width:16px;height:16px;min-height:0;margin:0;padding:0;display:grid}.boodschap-vink:checked{background:var(--kleur-tekst);border-color:var(--kleur-tekst)}.boodschap-vink:checked:after{content:"";border:solid var(--kleur-achtergrond);border-width:0 2px 2px 0;width:4px;height:8px;transform:rotate(45deg)translate(-1px,-1px)}.boodschap-toevoegen{gap:8px;width:100%;display:grid}.boodschap-toevoegen label{font-size:var(--type-body);font-weight:400}.boodschap-toevoegen-rij{align-items:flex-end;gap:7px;display:flex}.boodschap-toevoegen-rij input{border:1px solid #444;border-radius:8px;flex:auto;min-height:0;padding:12px 16px}.boodschap-toevoegknop{background:var(--kleur-tekst);width:40px;height:40px;min-height:0;color:var(--kleur-achtergrond);border:0;border-radius:999px;flex:none;padding:0}.instellingen{flex-direction:column;gap:20px;display:flex}.instel-blok{background:var(--kleur-kaart);border:1px solid var(--kleur-kaart-rand);border-radius:16px;padding:20px}.instel-blok h2{margin-top:0}.veld-stapel{flex-direction:column;gap:8px;max-width:420px;display:flex}.veld-stapel input{border:1px solid var(--kleur-kaart-rand);border-radius:10px;padding:10px 12px;font-size:1rem}.smal{width:min(480px,100%);margin:0 auto}.profiel-lijst{flex-direction:column;gap:12px;margin:0 0 16px;padding:0;list-style:none;display:flex}.profiel-regel{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.profiel-regel input{border:1px solid var(--kleur-kaart-rand);border-radius:10px;flex:160px;min-width:0;padding:8px 10px;font-size:1rem}.profiel--inactief .profiel-regel input{color:var(--kleur-tekst-zacht)}.badge{background:var(--kleur-accent);color:var(--kleur-kaart);border-radius:999px;padding:2px 10px;font-size:.8rem}.badge--stil{background:var(--kleur-kaart-rand);color:var(--kleur-tekst)}.moeite-raster{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0 16px;display:grid}.moeite-slot{flex-direction:column;gap:4px;min-width:0;display:flex}.moeite-slot input{min-width:0;max-width:100%}.moeite-slot label{text-transform:capitalize;font-weight:600}.moeite-slot input{border:1px solid var(--kleur-kaart-rand);border-radius:10px;padding:8px 10px;font-size:1rem}.eenheid{color:var(--kleur-tekst-zacht);font-size:.85rem}.visueel-verborgen{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:auto;margin:-1px;padding:0;position:absolute;overflow:hidden}