: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-shell,.recipe-form,.import-panel{gap:16px;display:grid}.grid-two{gap:12px;display:grid}label,fieldset{gap:6px;font-weight:650;display:grid}fieldset{border:1px solid var(--kleur-kaart-rand);border-radius:14px;padding:12px}legend{padding:0 6px}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}.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)}.preview-image,.detail-image{aspect-ratio:16/9;object-fit:cover;background:var(--kleur-accent-zacht);border-radius:16px;width:100%;max-height:260px}.fallback-image{background:var(--kleur-accent-zacht);border-radius:16px;place-items:center;min-height:180px;font-size:56px;display:grid}.source-note{color:var(--kleur-tekst-zacht)}.recipe-list{gap:12px;padding:0;list-style:none;display:grid}.recipe-card{border:1px solid var(--kleur-kaart-rand);background:var(--kleur-kaart);border-radius:16px;padding:14px}@media (min-width:720px){.grid-two{grid-template-columns:1fr 1fr}.recipe-shell{grid-template-columns:320px 1fr;align-items:start}}.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}.vandaag-kop{gap:2px;display:grid}.vandaag-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);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(--knop-font);color:var(--kleur-tekst);line-height:1.3}.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}.kaart-gekozen{font-size:var(--knop-font);color:var(--kleur-tekst);align-items:center;gap:6px;margin:0;font-weight:700;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(8px);backdrop-filter:blur(8px);background:0 0}button.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{text-decoration:underline}.lijst-verwijder{min-width:var(--tikdoel);color:var(--kleur-tekst-zacht);padding:8px;text-decoration:none}.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{margin:0}.zoekbalk{gap:var(--ruimte-sm);margin:var(--ruimte-lg) 0;flex-wrap:wrap;display:flex}.zoekbalk input{flex:220px}.overzicht{gap:var(--ruimte-md);grid-template-columns:1fr;padding:0;list-style:none;display:grid}@media (min-width:640px){.overzicht{grid-template-columns:1fr 1fr}}.overzicht li{border:1px solid var(--kleur-kaart-rand);border-radius:var(--radius-veld);background:var(--kleur-kaart);padding:var(--ruimte-md);gap:var(--ruimte-md);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.overzicht .emoji{font-size:32px}.overzicht .titel{min-height:var(--tikdoel);color:var(--kleur-tekst);align-items:center;font-weight:700;text-decoration:none;display:flex}.overzicht .meta{color:var(--kleur-tekst-zacht);font-size:var(--type-meta)}.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{margin-bottom:var(--ruimte-md)}.boodschapgroep h2{margin:0 0 var(--ruimte-sm);font-size:var(--type-body)}.lijst-leeg{color:var(--kleur-tekst-zacht);margin:0}.checklist{gap:4px;padding:0;list-style:none;display:grid}.checklist li{align-items:center;gap:var(--ruimte-sm);display:flex}.checklist li label{flex:auto}.panel ul.checklist{padding-inline-start:0}.checklist label span{overflow-wrap:anywhere;min-width:0}.checklist label{gap:var(--ruimte-md);min-height:var(--tikdoel);cursor:pointer;align-items:center;font-weight:400;display:flex}.checklist input{flex:none;width:24px;height:24px;min-height:24px}.checklist label.af{color:var(--kleur-tekst-zacht);text-decoration:line-through}.overzicht .stapel{flex:auto;gap:2px;min-width:0;display:grid}.overzicht .titel,.overzicht .meta{overflow-wrap:anywhere}.overzicht .meta{display:block}.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}