/* Lettertypen staan op de eigen server. Via Google Fonts zou elke bezoeker
   zijn IP-adres aan Google geven; zo gaat er niets naar buiten. */
@font-face{font-family:Karla;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/karla-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/karla-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/karla-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fraunces-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/fraunces-latin-700-normal.woff2) format("woff2")}

:root{
  --paper:#F6F1E7; --card:#FFFCF6; --ink:#2B2420; --muted:#7A6F63;
  --line:#E0D4BE; --tomaat:#C63B25; --groen:#2F5D50; --zacht:#EFE7D6;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#191614; --card:#221E1B; --ink:#EDE6DA; --muted:#A39687;
    --line:#3B342C; --tomaat:#E4674F; --groen:#6FA593; --zacht:#2A251F;
  }
}
*,*::before,*::after{box-sizing:inherit}
/* Formuliervelden erven box-sizing niet overal even betrouwbaar; zonder deze
   regel telt de padding bij de breedte op en lopen velden uit hun kolom. */
input,select,textarea,button{box-sizing:border-box}
html{scroll-padding-top:calc(4.2rem + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;margin:0}
h1{font-size:1.4rem;margin:.2rem 0 .8rem}
a{color:var(--tomaat)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.kop-rij{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem .4rem;max-width:760px;margin:0 auto}
.merk{font-family:Fraunces;font-size:1.2rem;font-weight:700;color:var(--tomaat);line-height:1;text-decoration:none}
.merk span{display:block;font-size:.66rem;font-family:Karla;font-weight:400;color:var(--muted)}
.uit{margin-left:auto;font-size:.82rem;color:var(--muted)}
/* Inloggen is een knop, niet een linkje in de hoek. */
.kopknop{margin-left:auto;font-size:.82rem;padding:.4rem .9rem;flex:none}
/* Staan er twee knoppen, dan schuift alleen de eerste naar rechts. */
.kopknop + .kopknop{margin-left:.4rem}
/* Op een telefoon is er geen ruimte naast het logo; daar staat lid worden
   onderin in het menu. */
@media (max-width:560px){.kop-rij .aanmeldknop{display:none}}
nav.tabs{display:flex;gap:.2rem;padding:0 .9rem .5rem;max-width:760px;margin:0 auto}
nav.tabs a{flex:1;text-align:center;padding:.35rem .2rem;font-size:.86rem;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent}
nav.tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--tomaat);font-weight:700}

main{padding:1rem .9rem 4rem;max-width:760px;margin:0 auto}
.smal{max-width:26rem}
.kopregel{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.kopregel h1{margin:0;flex:1}
.kopje{font-family:Karla;font-size:.78rem;font-weight:700;color:var(--muted);margin:1.1rem 0 .3rem}
.melding{background:var(--zacht);border-left:3px solid var(--groen);padding:.5rem .7rem;font-size:.9rem;margin:0 0 .8rem}
.fout{background:var(--zacht);border-left:3px solid var(--tomaat);padding:.5rem .7rem;font-size:.9rem}
.open{color:var(--muted);font-size:.86rem}
.label{font-size:.66rem;border:1px solid var(--line);border-radius:999px;padding:.04rem .38rem;color:var(--muted);vertical-align:2px}
.label.pub{border-color:var(--groen);color:var(--groen)}

.knop{background:var(--groen);color:#fff;border:none;border-radius:7px;padding:.5rem .85rem;
  font-size:.85rem;text-decoration:none;display:inline-block}
.knop.leeg{background:none;color:var(--ink);border:1px solid var(--line)}
/* Een knop met een icoontje ervoor: beeld en woord op één lijn. */
.knop:has(.ico){display:inline-flex;align-items:center;gap:.4rem}
.knop .ico{width:17px;height:17px;flex:none}
.acties{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.9rem 0}
/* Op een telefoon vullen knoppen die bij elkaar horen hun regel: anders staat
   er onder een lange knop een korte met een gat ernaast. */
@media (max-width:560px){
  .acties .knop,.acties button.knop{flex:1 1 auto;justify-content:center;text-align:center}
  /* Staat de knop in een eigen formuliertje, dan is dat formulier het vak dat
     moet meegroeien; anders blijft de knop zijn eigen maat houden en
     verspringt de rij alsnog. */
  .acties form.inline{flex:1 1 auto;display:flex}
  .acties form.inline .knop{width:100%}
}
form.inline{display:inline-flex;align-items:center;gap:.25rem;margin:0}

label{display:block;margin:.55rem 0;font-size:.86rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],
input[type=search],input[type=date],input[type=time],input[type=month],select,textarea{
  display:block;width:100%;margin-top:.2rem;padding:.45rem .55rem;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--ink)}
form.inline input,form.inline select{width:auto;margin:0}
/* Een datumveld heeft een eigen minimumbreedte in de browser. Zonder deze
   regel loopt hij zijn kolom uit en plakt hij tegen het veld ernaast. */
input[type=date],input[type=time],input[type=month]{min-height:2.05rem;font:inherit;font-size:.9rem;
  min-width:0;max-width:100%;color-scheme:light;accent-color:var(--groen)}
.vinkje{display:inline-flex;align-items:center;gap:.35rem;margin:0}
.vinkje input{width:auto;margin:0}
.rij{display:flex;gap:.6rem;flex-wrap:wrap}
.rij label{flex:1;min-width:8rem}
/* Op een telefoon is een halve regel te smal voor een naam of een e-mailadres:
   dan staat er een veld waar je het eind van je eigen adres niet in ziet.
   Alles onder elkaar over de volle breedte; alleen een getal of een datum
   houdt zijn eigen maat, want die passen met z'n tweeën prima naast elkaar. */
@media (max-width:560px){
  .rij{gap:.2rem .6rem}
  .rij label{flex:1 1 100%;min-width:0}
  .rij label.kort{flex:1 1 6.5rem}
  .rij label.datum{flex:1 1 11rem}
}
/* Een getal van twee cijfers en een datum hebben geen halve regel nodig. */
.rij label.kort{flex:0 1 6.5rem;min-width:5rem}
.rij label.datum{flex:0 1 11rem;min-width:9.5rem}
/* Een label met zijn veld eronder is hoger dan de knop ernaast. Zonder deze
   regel zweeft de knop halverwege het label in plaats van naast het veld. */
form.inline.prijsregel{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.prijsregel .inline-label{display:flex;flex-direction:column;gap:.2rem;margin:0;flex:0 1 14rem}
.prijsregel .inline-label input{width:100%}
.filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.9rem}
.filters select,.filters input{width:auto;margin:0;font-size:.82rem}
.filters .zoek{flex:1;min-width:11rem}

.weekbalk{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.weekt{flex:1;text-align:center;font-weight:700}
.weekt small{display:block;font-weight:400;color:var(--muted);font-size:.74rem}
.pijl{border:1px solid var(--line);border-radius:6px;width:34px;height:34px;display:grid;
  place-items:center;text-decoration:none;color:var(--ink)}

.dag{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:.55rem;overflow:hidden}
.dag-kop{display:flex;align-items:baseline;gap:.5rem;padding:.45rem .7rem;background:var(--zacht)}
.dag-naam{font-family:Fraunces;font-weight:600}
.dag-datum,.dag-tot{font-size:.75rem;color:var(--muted)}
.dag-tot{margin-left:auto}
.dag-tot b{color:var(--ink)}
.maaltijd{display:flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-top:1px solid var(--line)}
.mlabel{flex:0 0 4.6rem;font-size:.74rem;color:var(--muted)}
.plaats{flex:1;border:1px dashed var(--line);border-radius:7px;padding:.32rem .6rem;
  color:var(--muted);font-size:.85rem;text-decoration:none}
.geplaatst{flex:1;display:flex;align-items:center;gap:.35rem;min-width:0;flex-wrap:wrap}
.geplaatst .gerecht{flex:1 1 9rem;display:flex;align-items:center;gap:.35rem;min-width:0}
.geplaatst .regelacties{display:flex;align-items:center;gap:.35rem;flex:0 0 auto;margin-left:auto}
/* Wat er staat is een blokje van twee regels: naam met merktekens, en daar
   het recept onder als dat iets anders heet dan wat er op de bak stond. */
.geplaatst .watstaat{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.geplaatst .naamrij{display:flex;align-items:center;gap:.35rem;min-width:0;flex-wrap:wrap}
.geplaatst .naam{flex:0 1 auto;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink);text-decoration:none}
.geplaatst .uitrecept{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geplaatst form.inline button{background:none;border:1px solid var(--line);border-radius:6px;
  width:26px;height:26px;line-height:1;padding:0}
.pers{font-size:.8rem;min-width:1.1rem;text-align:center}
.weg{border:none!important;background:none;color:var(--muted);font-size:1.1rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.weg .ico{width:16px;height:16px}
.weg:hover,.weg:focus-visible{color:var(--tomaat)}
@media (max-width:560px){
  .maaltijd{flex-wrap:wrap;row-gap:.35rem;padding:.55rem .7rem}
  .mlabel{flex:0 0 100%;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}
  .plaats,.geplaatst{flex:0 0 100%}
  .geplaatst .gerecht{flex:1 1 100%}
  .geplaatst .naam{white-space:normal;overflow:visible;text-overflow:clip;
    font-size:.95rem;line-height:1.3}
  /* Op een telefoon mag de naam afbreken; dan hoort het label eronder en niet
     half over de tweede regel heen. */
  .geplaatst .naamrij{align-items:flex-start}
  .geplaatst .uitrecept{white-space:normal;overflow:visible}
  .geplaatst .regelacties{flex:1 1 100%;justify-content:flex-end;margin-left:0}
  .geplaatst form.inline button,.geplaatst .knopje{width:32px;height:32px}
}
.weektotaal{font-size:.86rem;color:var(--muted);margin-top:.7rem}
.weektotaal b{color:var(--ink)}

.kaart,.keuzekaart button{display:flex;gap:.7rem;align-items:center;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem;
  margin-bottom:.5rem;text-decoration:none;color:var(--ink)}
.keuzekaart{margin:0}
.tegel{flex:0 0 46px;height:46px;border-radius:8px;display:grid;place-items:center;
  font-family:Fraunces;font-size:1.2rem;color:#fff;background:var(--groen)}
.tegel.vlees{background:var(--tomaat)}.tegel.vis{background:#3D6E8F}
.kz{display:flex;flex-direction:column;min-width:0}
.kz-titel{font-family:Fraunces;font-size:1rem;font-weight:600;line-height:1.25}
.meta{font-size:.78rem;color:var(--muted)}
.meta b{color:var(--ink)}
.bol{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;
  color:#fff;font-size:.64rem;font-weight:700;flex:none}
.bol.klein{width:15px;height:15px;font-size:.55rem;vertical-align:-2px}

.intro{margin:.2rem 0 .6rem}
.verhaal{background:var(--zacht);border-radius:8px;padding:.6rem .7rem;margin:.8rem 0;font-size:.9rem}
.verhaal .naam{font-family:Fraunces;font-weight:600}
.porties{margin:.3rem 0 .5rem}
.porties label{display:inline-flex;align-items:center;gap:.35rem}
.porties input{width:4rem;margin:0}
.ing{list-style:none;margin:.4rem 0 0;padding:0;font-size:.92rem}
.ing li{display:flex;justify-content:space-between;gap:1rem;padding:.22rem 0;border-bottom:1px dotted var(--line)}
.ing li span:last-child{color:var(--muted);white-space:nowrap}
.stappen{margin:.4rem 0 0;padding-left:1.2rem}
.stappen li{margin:.35rem 0}

.oordeel-rij{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;margin:0}
.oordeel-rij .wie{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0;font-size:.9rem}
.sterren{display:flex;gap:.02rem}
.sterren button{background:none;border:none;padding:0 .08rem;font-size:1.15rem;line-height:1;color:var(--line)}
.sterren button.vol{color:#E3A008}
.sterren .wis{font-size:.85rem;color:var(--muted)}
.delen{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem}
.delen input[type=email]{max-width:20rem}
.delen .knop{margin:.4rem .3rem 0 0}
/* Een deelformulier met een e-mailveld: veld, vinkje en knop op een regel,
   allemaal op het midden. Stonden ze onder elkaar, dan hing de knop half
   naast het vinkje en leek hij nergens bij te horen. Op een smal scherm
   zakken ze gewoon onder elkaar. */
form.delen:has(input[type=email]){display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
form.delen:has(input[type=email]) input[type=email]{flex:1 1 14rem;margin:0}
form.delen:has(input[type=email]) .vinkje,
form.delen:has(input[type=email]) .knop{margin:0}
/* De knop staat rechts en heeft dezelfde maat in elk van deze blokken, zodat
   Delen en Overdragen onder elkaar even breed zijn. Op een telefoon pakt hij
   de hele regel, want naast een vinkje past hij daar niet. */
form.delen:has(input[type=email]) .knop{margin-left:auto;min-width:9.5rem;justify-content:center;
  text-align:center}
@media (max-width:560px){
  form.delen:has(input[type=email]) .knop{flex:1 1 100%;margin-left:0}
}

.schap{font-family:Karla;font-size:.8rem;font-weight:700;color:var(--tomaat);
  border-bottom:1px solid var(--line);padding-bottom:.2rem;margin:1rem 0 .3rem}
.bood{list-style:none;margin:0;padding:0}
.bood li{display:flex;align-items:center;gap:.5rem;padding:.28rem 0;font-size:.93rem}
.bood li.af .bnaam{text-decoration:line-through;color:var(--muted)}
.bnaam{flex:1;min-width:0}
.hoev{color:var(--muted);font-size:.85rem;white-space:nowrap}
.vink{background:none;border:none;font-size:1.15rem;line-height:1;padding:0}
details.kast{margin-top:.8rem}
details.kast summary{font-size:.85rem;color:var(--muted);cursor:pointer}

.eterlijst{list-style:none;margin:0 0 1rem;padding:0}
.eterlijst li{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
/* Een ingredient is een kaartje met vier velden. Zonder kopjes raad je naar
   wat er in welk vakje hoort, en met alles op een regel is op een telefoon
   geen enkel veld meer breed genoeg om te lezen wat je typt. */
.ing-rij{display:grid;grid-template-columns:minmax(0,1fr) 6rem minmax(0,9.5rem);
  gap:.4rem .5rem;align-items:end;margin:0 0 .5rem;padding:.5rem .6rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px}
.ingveld{display:flex;flex-direction:column;gap:.15rem;margin:0;min-width:0}
.ingveld span{font-size:.7rem;color:var(--muted);line-height:1.2}
/* Niet de vinkjes: een selectievakje van honderd procent breed duwt zijn
   eigen label het kaartje uit. Alleen de velden waar je in typt. */
.ing-rij input:not([type=checkbox]):not([type=radio]),.ing-rij select{margin:0;width:100%}
.ing-rij input[type=checkbox]{margin:0}
/* De regel over een ontbrekende waarde hoort over de hele breedte, niet
   geperst in de eerste kolom. */
.ingmist{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-start;
  padding-top:.45rem;border-top:1px dashed var(--line)}
/* De uitleg over de volle breedte, boven de velden. Ernaast zetten gaf een
   gat: het NEVO-blok is hoger, en dan zweeft de tekst onderaan. */
.ingmist > .ingmistkop{flex:1 1 100%;min-width:0;font-size:.74rem;line-height:1.4;margin:0}
.ingmist .ingveld{flex:0 0 9rem}
/* De keuzelijst, het zoekveld en de stand horen bij elkaar in een blok, met
   een randje eromheen: dan zie je dat het zoekveld de lijst erboven vult en
   niet zomaar een los invulvakje is. */
.ingnevoblok{flex:1 1 22rem;min-width:0;display:flex;flex-direction:column;gap:.25rem;
  padding:.45rem .55rem;background:var(--zacht);border:1px solid var(--line);border-radius:9px}
.ingnevoblok .ingkop{font-size:.72rem;color:var(--muted);line-height:1.2}
.ingnevoblok select,.ingnevoblok .nevozoek{width:100%;margin:0;font-size:.84rem}
.ingnevoblok .nevozoek{background:var(--card)}
.ingnevoblok .nevostand{font-size:.7rem;line-height:1.3;min-height:1em}
.ingmist .ingzelf{flex:0 0 8rem}
.ingmist .ingzonder{flex:1 1 100%;font-size:.74rem;line-height:1.35}
/* Weggevouwen: wie niets wil wijzigen hoeft er niet naar te kijken. Een
   eigen klasse en niet ook ingmist, want hier ontbreekt juist niets. */
.ingwijzig,.ingmeer{grid-column:1 / -1;display:block;padding-top:.45rem;border-top:1px dashed var(--line)}
.ingmeervelden{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:.35rem}
.ingmeervelden .ingtekst{flex:1 1 14rem}
.ingmeervelden .ingapart{flex:0 0 9rem}
/* Het driehoekje van de browser eruit, en er een met ruimte ervoor in de
   plaats: zonder die ruimte plakt het pijltje tegen het woord aan. */
.ingwijzig summary,.ingmeer summary{display:flex;align-items:center;gap:.35rem;cursor:pointer;
  font-size:.76rem;color:var(--muted);list-style:none}
.ingwijzig summary::-webkit-details-marker,.ingmeer summary::-webkit-details-marker{display:none}
.ingwijzig summary::before,.ingmeer summary::before{content:"\25B8";color:var(--groen);font-size:.8rem;line-height:1}
.ingwijzig[open] summary::before,.ingmeer[open] summary::before{content:"\25BE"}
.ingwijzig summary:hover,.ingmeer summary:hover{color:var(--ink)}
.ingwijzig .ingmistkop{display:block;margin:.35rem 0;font-size:.74rem;line-height:1.4}
/* Het label op een eigen regel over de volle breedte: anders wordt de tekst
   in een smalle kolom naast het vakje geperst en breekt hij in drieen. */
.ingwijzig .vinkje{display:flex;align-items:center;gap:.4rem;width:100%;
  font-size:.78rem;line-height:1.35}
.ingwijzig .vinkje input{flex:none}
@media (max-width:760px){
  .ingmist > .meta{flex:1 1 100%}
  .ingmist .ingveld{flex:1 1 100%}
  .ingnevoblok{flex:1 1 100%}
}
@media (max-width:760px){
  .ing-rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ing-rij .ingnaam{grid-column:1 / -1}
}
#stappen textarea{margin-bottom:.35rem}
.formulier .knop{margin-top:.4rem}
/* Blokken die je lang niet bij elk recept nodig hebt staan dicht, tenzij er
   iets in staat. Het formulier is daarmee een stuk korter, en wat je wel hebt
   ingevuld staat nog steeds op dezelfde plek. Een <details> en geen knopje met
   JavaScript: zo werkt het ook zonder, en ctrl+F vindt het nog. */
.vouw{margin:.9rem 0 0;border-top:1px solid var(--line)}
.vouw > summary{display:flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  margin:.5rem 0 .3rem}
.vouw > summary::-webkit-details-marker{display:none}
.vouw > summary::after{content:"\25B8";color:var(--groen);font-size:.8rem;line-height:1}
.vouw[open] > summary::after{content:"\25BE"}
.vouw > summary:hover{color:var(--ink)}
.vouw > summary .meta{font-weight:400}
.vouw > *:last-child{margin-bottom:.6rem}
/* De drie stappen van een nieuw recept: waar je bent, wat je al deed (met een
   klik terug) en wat er nog komt. */
.stapbalk{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem}
.stapje{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:.82rem;
  text-decoration:none}
.stapcijfer{display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:999px;
  background:var(--zacht);color:var(--ink);font-size:.72rem;font-weight:700;flex:none}
.stapje.nu{border-color:var(--groen);color:var(--ink);font-weight:600}
.stapje.nu .stapcijfer{background:var(--groen);color:#fff}
.stapje.af{color:var(--ink)}
.stapje.af .stapcijfer{background:var(--ink);color:var(--card)}
.stapje.af:hover{background:var(--zacht)}
.opslaanrij{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
/* De snelle weg naar een nieuw recept: laten overnemen in plaats van typen. */
.snelroute{display:flex;flex-direction:column;gap:.5rem;background:var(--zacht);
  border-radius:12px;padding:.75rem .85rem;margin:0 0 1.1rem}
.snelknoppen{display:flex;flex-wrap:wrap;gap:.4rem}
@media (max-width:560px){.snelknoppen .knop{flex:1 1 auto;justify-content:center}}
/* Het fotoveld: links hoe het er nu uitziet, rechts het kiezen. De uitleg en
   het vinkje staan eronder en niet achter de knop van de browser aan. */
.fotoveld{display:flex;gap:.8rem;align-items:flex-start;margin:.55rem 0}
.fotoveld .fotonu{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--zacht);display:grid;place-items:center;
  font-family:Fraunces,Georgia,serif;font-size:1.6rem;color:var(--groen)}
.fotobeeld{position:relative;flex:none;line-height:0}
/* Het kruisje hoort bij de foto, rechtsboven in de hoek. Aangezet wordt de
   foto doorzichtig en zegt de regel eronder wat er gaat gebeuren. */
.fotokruis{position:absolute;top:-2px;right:-2px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;font-size:1rem;line-height:1;margin:0;padding:0}
.fotokruis:hover{background:color-mix(in srgb,var(--tomaat) 12%,var(--card));color:var(--tomaat);
  border-color:var(--tomaat)}
.fotoweg:focus-visible + .fotonu + .fotokruis{outline:2px solid var(--groen);outline-offset:2px}
.fotoweg:checked ~ .fotonu{opacity:.35;filter:grayscale(1)}
.fotoweg:checked ~ .fotokruis{background:var(--tomaat);border-color:var(--tomaat);color:#fff}
.fotoveld .fotokeuze{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.fotoveld .fotokeuze label{margin:0}
.fotoveld input[type=file]{max-width:100%}
/* De knop die de browser zelf in een bestandsveld zet, in onze stijl. Zonder
   dit staat er een grijs systeemknopje tussen onze eigen knoppen. */
input[type=file]{font-size:.84rem;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-size:.84rem;margin-right:.5rem;
  padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--groen);color:var(--groen)}
/* De twee manieren om een foto te kiezen, elk op een eigen regel. */
.fotokiezer{display:block;margin:.6rem 0}
.fotokiezer input{margin-top:.25rem}
.fotoveld .open,.fotoveld .meta{display:block;font-size:.8rem}
/* Deze regel verschijnt pas als het kruisje aanstaat. Niet op klasse plus
   klasse maar op de ene klasse, zodat de regel met :checked het altijd wint
   op gewicht; anders hangt het van de volgorde af en staat hij overal waar
   deze opmaak nog eens wordt gebruikt gewoon aan. */
.fotowegtekst{display:none;line-height:1.3}
.fotoweg:checked ~ .fotowegtekst{display:block;margin-top:.25rem;
  color:var(--tomaat);font-size:.72rem}

@media print{
  .kop,nav.tabs,.acties,.filters,.plaats,.weg,.delen,.porties,.sterren,.vink,form.inline,
  .pijl,.nuweek{display:none!important}
  body{background:#fff;color:#000}
  main{padding:0;max-width:none}
  .dag,.kaart{break-inside:avoid;border-color:#999}
  @page{margin:12mm}
}

/* ---------- eet mee ---------- */
.bel{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 .25rem;
  margin-left:.25rem;border-radius:999px;background:var(--tomaat);color:#fff;font-size:.66rem;font-weight:700}
.eetmee-blok{border-top:1px solid var(--line);padding:.35rem .7rem}
.eetmee-blok summary{font-size:.76rem;color:var(--muted);cursor:pointer;list-style:none}
.eetmee-blok summary::-webkit-details-marker{display:none}
.eetmee-blok summary::before{content:"◦ ";color:var(--groen)}
.eetmee-blok[open] summary::before{content:"• "}
/* Het formulier om je tafel open te zetten: een raster met lucht ertussen.
   De brede velden (ophaaltijd, betaallink, adres) krijgen meer kolommen. */
.eetmee-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.4rem;margin:.8rem 0 .6rem}
.eetmee-form label{margin:0;font-size:.74rem;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.eetmee-form input,.eetmee-form select{margin:0;width:100%}
/* Een aantal of een bedrag hoeft geen halve regel breed te zijn. Zo hebben de
   velden lucht om zich heen in plaats van een aaneengesloten band. */
.eetmee-form label:not(.v2):not(.v4) input{max-width:8rem}
.eetmee-form .v2{grid-column:span 2}
.eetmee-form .v4{grid-column:1 / -1}
.eetmee-form .knop{grid-column:1 / -1;justify-self:start;margin-top:.2rem}
.aanbod{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem;margin-bottom:.6rem}
.aanbod-kop{display:flex;gap:.7rem;align-items:flex-start}
.aanmeld{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-end;margin-top:.5rem}
.aanmeld input[type=text]{flex:1;min-width:10rem;margin:0}
.aanmeld .klein{margin:0;font-size:.74rem}
.aanmeld .klein input{width:4.5rem}
.verzoek{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:10px;padding:.7rem;margin-bottom:.6rem}
.verzoek.verzoek{border-left-color:var(--tomaat)}
.verzoek.wacht_betaling{border-left-color:#E3A008}
.verzoek.bevestigd{border-left-color:var(--groen)}
.opmerking{background:var(--zacht);border-radius:7px;padding:.4rem .6rem;font-size:.88rem;margin:.4rem 0}
@media (min-width:620px){.eetmee-form{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- beheer, import, seizoenen ---------- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.45rem;margin:.6rem 0 1rem}
.cijfers div{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem}
.cijfers b{display:block;font-family:Fraunces;font-size:1.4rem;line-height:1.1}
.cijfers span{font-size:.72rem;color:var(--muted)}
.tabel{width:100%;border-collapse:collapse;font-size:.88rem}
.tabel th{text-align:left;font-size:.72rem;color:var(--muted);font-weight:700;padding:.3rem .4rem .3rem 0}
.tabel td{padding:.4rem .4rem .4rem 0;border-top:1px solid var(--line);vertical-align:top}
.seizoenen{border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem;margin:.6rem 0}
.seizoenen legend{font-size:.74rem;color:var(--muted);padding:0 .3rem}
.seizoenen .vinkje{margin-right:.9rem}
/* Vinkjes op een rij achter elkaar lopen rommelig af: de tweede regel begint
   nergens op uit. In kolommen staan ze onder elkaar en zie je in een oogopslag
   wat er aanstaat. */
/* Twee kolommen passen op een telefoon ook: met 10,5rem bleef er één over, en
   dan is een lijstje van dertien categorieen een halve pagina. */
.keuzeraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.3rem .9rem}
.keuzeraster .vinkje{margin:0;min-width:0}
.keuzeraster .vinkje span,.keuzeraster .vinkje{overflow-wrap:anywhere}
/* Eén product als kaartje: velden met een kopje erboven, zodat je ziet wat
   kcal is en wat prijs, en een raster dat zich naar de breedte voegt. */
.productrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.7rem .8rem;
  align-items:end;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.8rem;margin-bottom:.6rem}
.productrij label{margin:0;font-size:.72rem;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.productrij input,.productrij select{margin:0;width:100%}
.productrij .v2{grid-column:span 2}
.productacties{grid-column:1 / -1;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.productrij .vinkje{flex-direction:row;align-items:center;gap:.35rem;font-size:.8rem}
.productrij .vinkje input{width:auto}
/* De veertien allergenen naast elkaar, niet als een lange kolom. */
.productrij fieldset.seizoenen{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.productrij .rij{grid-column:1 / -1}
.productrij .productmeer{grid-column:1 / -1}
.productrij .open{grid-column:1 / -1}
.productacties .knop{margin-left:auto}
.ing-rij.onzeker input[name="ing_hoeveelheid[]"]{border-color:var(--tomaat);background:var(--zacht)}


/* ---------- één recept printen ---------- */
.porties{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 .6rem}
.porties .inline-label{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-size:.86rem}
/* Naast het veld staan al een min en een plus; de pijltjes van de browser
   erbij is dubbelop en maakt het vakje onnodig smal. Typen kan gewoon. */
.porties input{width:3.6rem;margin:0;text-align:center;appearance:textfield;-moz-appearance:textfield}
.porties input::-webkit-outer-spin-button,
.porties input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stap-knop{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);
  border-radius:7px;text-decoration:none;color:var(--ink)}
.bood-blok{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.2rem .8rem .8rem;margin:1rem 0}
.bood-blok .schap{margin-top:.8rem}
.vink-leeg{color:var(--muted)}
.print-alleen{display:none}

@media print{
  .print-alleen{display:block}
  .printkop{font-size:.9rem;color:#000;margin:0 0 .6rem}
  .bood-blok{border:none;padding:0;background:none}
  .oordeel-rij,.delen,.verhaal .open,.stap-knop,.porties{display:none!important}
  /* Alleen het recept */
  body.print-recept .bood-blok{display:none!important}
  /* Alleen de boodschappenlijst */
  body.print-lijst .recept-inhoud,
  body.print-lijst .verhaal,
  body.print-lijst .intro{display:none!important}
  body.print-lijst .bood li{padding:.35rem 0;border-bottom:1px dotted #bbb}
}
.kaart-acties{display:flex;justify-content:flex-end;gap:.35rem;margin:-.3rem 0 .7rem .2rem}
.kaart-acties .knopje{width:32px;height:32px;color:var(--muted)}
.kaart-acties .knopje .ico{width:17px;height:17px}
@media print{.kaart-acties{display:none}}
.knop.gevaar{background:var(--tomaat)}
.beheerwaarschuwing{background:var(--zacht);border-left:3px solid var(--tomaat);
  padding:.5rem .7rem;font-size:.85rem;margin:.6rem 0}

/* ---------- profielen en openbare pagina's ---------- */
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;display:block}
.avatar.mini{width:26px;height:26px}
.bol.groot{width:48px;height:48px;font-size:1.2rem}
.bol.groot.mini{width:26px;height:26px;font-size:.72rem}
.profiellink{display:inline-flex;align-items:center;padding:0}
.profielkop{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 1rem}
.hero{margin:.6rem 0 1.4rem}
.hero h1{font-size:1.75rem;line-height:1.15;max-width:18ch}
.lead{font-size:1.02rem;max-width:62ch;margin:.6rem 0 0}
.blokken{display:grid;gap:.6rem;margin:.5rem 0 1.2rem}
.blokken article{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.8rem}
.blokken h3{font-size:1rem;margin-bottom:.25rem}
.blokken p{margin:0;font-size:.92rem}
.kokrij{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin-bottom:1.2rem}
.kokkaart{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .5rem;
  text-decoration:none;color:var(--ink)}
.kokkaart .meta{font-size:.72rem;line-height:1.35}
.cta{background:var(--zacht);border-radius:12px;padding:1rem;margin:1.4rem 0}
.cta h2{font-size:1.25rem;margin-bottom:.3rem}
.cta p{margin:0 0 .7rem;max-width:56ch}
@media (min-width:620px){.blokken{grid-template-columns:1fr 1fr}}
.blokrij{display:grid;grid-template-columns:4.5rem 9rem 1fr;gap:.35rem;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:.5rem;margin-bottom:.45rem}
.blokrij input,.blokrij select,.blokrij textarea{margin:0}
.blokrij textarea{grid-column:1 / -1}
.fouttekst{color:var(--tomaat);font-size:.74rem}
code{background:var(--zacht);border-radius:4px;padding:.05rem .25rem;font-size:.86em}

/* ---------- adres, waarschuwingen, receptfoto ---------- */
.adres{background:var(--zacht);border-left:3px solid var(--groen);padding:.5rem .7rem;
  font-size:.9rem;margin:.5rem 0;border-radius:0 7px 7px 0}
.waarschuwing{background:var(--zacht);border-left:3px solid #E3A008;padding:.5rem .7rem;
  font-size:.86rem;margin:.5rem 0;border-radius:0 7px 7px 0}
.receptfoto{border-radius:9px;object-fit:cover;display:block}
.receptfoto.groot{width:100%;max-height:260px;margin:.4rem 0 .6rem}
img.tegel{object-fit:cover}
.voetbalk{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  padding:1.2rem .9rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);margin-top:2rem;font-size:.8rem}
.voetbalk a{color:var(--muted);text-decoration:none}
@media print{.voetbalk{display:none}}
.merk-beeld{display:flex;flex-direction:column;gap:.1rem;text-decoration:none}
.merk-beeld img{display:block;width:auto;max-width:60vw;object-fit:contain}

/* ---------- voedingsdoelen en allergenen ---------- */
/* De naam in de lijst, met het bolletje ervoor. */
.eternaam{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit}
.eternaam:hover b{color:var(--tomaat)}
.eternaam .bol{flex:none}
h1 .bol{vertical-align:-.15em;margin-right:.35rem}
.doelrij label{min-width:7rem}
.waarschuwlabel{border-color:#E3A008;color:#9A6B00}
.allergeenblok{font-size:.88rem;margin:.6rem 0}
.allergeenregel{font-size:.72rem;color:var(--tomaat)}
.allergeenregel.open{color:var(--muted)}
.let-op{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:#E3A008;color:#fff;font-size:.7rem;font-weight:700;vertical-align:1px}
.tabel.voeding{max-width:32rem}
.tabel .getal{text-align:right;white-space:nowrap}
.dagwaarden{border-top:1px solid var(--line);padding:.35rem .7rem}
.dagwaarden summary{font-size:.76rem;color:var(--muted);cursor:pointer;list-style:none}
.dagwaarden summary::-webkit-details-marker{display:none}
.dagwaarden summary::before{content:"◦ ";color:var(--groen)}
.dagwaarden[open] summary::before{content:"• "}
.dagwaarden .tabel{font-size:.8rem;margin-top:.3rem}
.zonderfilter{position:relative}
.zonderfilter summary{border:1px solid var(--line);border-radius:6px;padding:.25rem .5rem;font-size:.82rem;
  cursor:pointer;background:var(--card);list-style:none}
.zonderfilter[open]{flex-basis:100%}
.zonderfilter[open] summary{margin-bottom:.35rem}
.zonderfilter .vinkje{margin:0 .7rem .25rem 0;font-size:.82rem}
.productmeer{grid-column:1 / -1;margin-top:.3rem}
.productmeer summary{font-size:.76rem;color:var(--muted);cursor:pointer}

/* ---------- nieuwsbrief ---------- */
.nieuwsbriefblok{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:1.2rem 0}
.nieuwsbriefblok h2{font-size:1.15rem;margin-bottom:.3rem}
.nb-form{display:grid;gap:.4rem;max-width:26rem}
.nb-form input{margin:0}
.verstopt{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
/* Het hidden-attribuut verliest het van elke regel die display zet, en dat
   doen .rij en .vinkje allebei. Deze regel maakt hidden weer betrouwbaar,
   zodat JavaScript er gewoon op kan vertrouwen. */
[hidden]{display:none!important}
.mailvoorbeeld{width:100%;height:640px;border:1px solid var(--line);border-radius:10px;background:#fff;margin:.4rem 0 .8rem}

/* ---------- advertenties ---------- */
.advertentie{border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin:1rem 0;background:var(--card)}
.adv-label{font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.adv-inhoud{display:flex;gap:.7rem;align-items:center;text-decoration:none;color:var(--ink)}
.adv-inhoud img{width:64px;height:64px;object-fit:contain;border-radius:6px;flex:none;background:var(--zacht)}
/* Drie andere vormen voor hetzelfde blok: beeld boven de tekst, een brede
   banner, of een filmpje. De tekst blijft eronder staan, zodat een lezer
   altijd leest wat het is en van wie. */
.advertentie.adv-beeld .adv-inhoud,.advertentie.adv-banner .adv-inhoud,
.advertentie.adv-video .adv-inhoud{display:block}
.advertentie.adv-beeld .adv-inhoud img{width:100%;height:11rem;object-fit:cover;border-radius:8px;
  margin-bottom:.5rem;background:var(--zacht)}
.advertentie.adv-banner{padding:0;overflow:hidden}
.advertentie.adv-banner .adv-label{padding:.45rem .7rem 0}
.advertentie.adv-banner .adv-inhoud img{width:100%;height:7rem;object-fit:cover;border-radius:0;margin:.3rem 0 .5rem}
.advertentie.adv-banner .adv-inhoud > span,.advertentie.adv-banner .adv-reden{padding:0 .7rem}
.advertentie.adv-banner .adv-reden{padding-bottom:.55rem}
.adv-video{width:100%;max-height:14rem;border-radius:8px;background:#000;display:block;margin-bottom:.5rem}
/* De knop: in een klikbaar blok een vlakje dat eruitziet als een knop, bij
   video een echte link, want daar is het blok zelf niet klikbaar. */
.adv-knop{display:inline-block;margin-top:.45rem;background:var(--groen);color:#fff;
  border-radius:999px;padding:.35rem .9rem;font-size:.82rem;font-weight:600;text-decoration:none}
a.adv-knop:hover{filter:brightness(1.07)}
/* Wat er nu bij een advertentie staat, in het beheerscherm. */
.advnu{display:flex;flex-wrap:wrap;gap:.8rem;margin:.2rem 0 .6rem}
.advnu figure{margin:0;max-width:16rem}
.advnu img,.advnu video{width:100%;border-radius:8px;background:var(--zacht);display:block}
.advnu figcaption{font-size:.78rem}
/* Een blok van de nieuwsbrief in het beheerscherm: een eigen kadertje, zodat
   je ziet waar het ene blok ophoudt en het volgende begint. */
.blokform{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin:0 0 .7rem;
  background:var(--card)}
.blokkop{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border-bottom:1px solid var(--line);padding-bottom:.4rem;margin-bottom:.5rem}
.blokkop label.kort{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.78rem}
.blokkop label.kort input{width:4.5rem;margin:0}
.adv-titel{display:block;font-weight:700;font-size:.95rem}
.adv-tekst{display:block;font-size:.84rem;color:var(--muted)}
.adv-reden{font-size:.7rem;color:var(--muted);margin-top:.35rem}
.adv-reden a{color:var(--muted)}
@media print{.advertentie{display:none!important}}

/* ---------- praktijken ---------- */
.namensbalk{background:#2B2420;color:#fff;font-size:.84rem;padding:.45rem .9rem;text-align:center;
  padding-top:calc(.45rem + env(safe-area-inset-top,0px))}
.namensbalk a{color:#fff;font-weight:700;margin-left:.5rem}
.subtabs{padding:0;margin:.4rem 0 1rem;border-bottom:1px solid var(--line)}
.gedimd td{opacity:.55}
/* Een tabel die breder is dan het scherm: aan de kant waar nog iets staat
   verschijnt een schaduwrandje. Zonder dat lijkt een afgeknipte prijs een
   fout in plaats van een tabel die verder loopt. */
.tabelhouder{overflow-x:auto;
  background:
    linear-gradient(90deg,var(--paper) 40%,rgba(246,241,231,0)) left center/22px 100% no-repeat,
    linear-gradient(90deg,rgba(246,241,231,0),var(--paper) 60%) right center/22px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(43,36,32,.14),rgba(43,36,32,0)) left center/9px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(43,36,32,.14),rgba(43,36,32,0)) right center/9px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tabelhouder{
    background:
      linear-gradient(90deg,var(--paper) 40%,rgba(25,22,20,0)) left center/22px 100% no-repeat,
      linear-gradient(90deg,rgba(25,22,20,0),var(--paper) 60%) right center/22px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),rgba(0,0,0,0)) left center/9px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),rgba(0,0,0,0)) right center/9px 100% no-repeat;
    background-attachment:local,local,scroll,scroll}
}
/* Een tabel blijft ook op een telefoon een tabel: kolommen naast elkaar, de
   kopjes om op te sorteren, en schuiven als het niet past. Kaartjes onder
   elkaar lezen makkelijker, maar je ziet dan niet meer hoe de rijen zich tot
   elkaar verhouden; in beheer wil je juist dat overzicht. */
.tabel.raster th,.tabel.raster td{white-space:nowrap}
.tabel.raster td[data-kop]::before{content:none}
/* Een prullenbak in een rij is kleiner dan een knop met een woord erop. */
.tabel .knopje{width:32px;height:32px}
.tabel .knopje .ico{width:17px;height:17px}
/* De eerste kolom schuift niet mee zodra de tabel breder is dan het scherm,
   anders weet je niet meer bij wie een rij hoort als je naar rechts kijkt.
   Dat geldt net zo goed op een breed scherm: ook daar loopt een tabel met
   tien kolommen buiten beeld. */
.tabel.raster th:first-child,.tabel.raster td:first-child{position:sticky;left:0;z-index:1;
  background:var(--paper)}
.tabel.raster tr.nu td:first-child{background:var(--zacht)}
@media (max-width:640px){
  .tabel.raster{font-size:.84rem}
  .tabel.raster td,.tabel.raster th{padding-right:.7rem}
}
@media (max-width:640px){
  /* Een brede beheertabel schuift in zichzelf, niet de hele pagina mee. Een
     tabel van twee kolommen past gewoon; die hoeft niet mee te schuiven. */
  .tabelhouder table{min-width:34rem}
  .tabelhouder .tabel.smal{min-width:0}
  .tabelhouder th{white-space:nowrap}
}
.tabel.rapport{max-width:none;min-width:36rem}
.somrij td{font-weight:700;border-top:2px solid var(--line)}
.vormkeuze{display:block;margin:.35rem 0}
.vormrij{grid-template-columns:1fr 7rem 7rem 8rem auto auto;align-items:center}
.vormrij input{margin:0}
.qr{margin:.6rem 0}
.qr img{background:#fff;padding:.4rem;border-radius:8px;max-width:100%;height:auto}
.sleutel{font-size:.95rem;letter-spacing:.06em;word-break:break-all}
.herstelcodes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem;max-width:22rem}
.herstelcodes code{font-size:1rem}

/* ---------- uitstraling: banner en wat meer warmte ---------- */
:root{--schaduw:0 1px 2px rgba(43,36,32,.06),0 6px 18px -8px rgba(43,36,32,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--schaduw:0 1px 2px rgba(0,0,0,.4),0 8px 20px -8px rgba(0,0,0,.6)}}
.kop{box-shadow:0 1px 0 var(--line),0 4px 14px -10px rgba(43,36,32,.25)}
.merk{font-size:1.45rem;letter-spacing:-.01em}
.merk span{margin-top:.15rem;letter-spacing:.02em}
nav.tabs{gap:.25rem}
nav.tabs a{border-radius:999px 999px 0 0;padding:.4rem .3rem;transition:color .15s,background .15s}
nav.tabs a:hover{color:var(--ink);background:var(--zacht)}
main{padding-top:1.2rem}
h1{font-size:1.7rem;letter-spacing:-.01em}
.kopregel h1{font-size:1.7rem}

/* Keuzelijsten in de stijl van de rest: zelfde rand en ronding als de knoppen,
   met een eigen pijltje in plaats van het blokje van het besturingssysteem. */
select{appearance:none;-webkit-appearance:none;border-radius:999px;padding:.5rem 2rem .5rem .9rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237A6F66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:11px 8px;
  cursor:pointer;line-height:1.3}
select:hover{background-color:var(--zacht)}
/* Een keuzelijst waar je er meer uit kiest is geen uitklapper: geen pijltje,
   geen ronde hoeken, en hij mag zo hoog zijn als zijn regels. */
select[multiple]{appearance:auto;-webkit-appearance:listbox;background-image:none;
  border-radius:8px;padding:.25rem;height:auto;line-height:1.5}
select[multiple] option{padding:.1rem .35rem}
.zoekrij .zoek,.filterrij select,.filters select,.filters .zoek{border-radius:999px}
.zoekrij .zoek{padding:.55rem 1rem}
.zonderfilter summary{border-radius:999px;padding:.5rem .9rem}
/* In een filterbalk staan een zoekveld, keuzelijsten en een knop naast elkaar.
   Elk kwam op zijn eigen hoogte uit: 36, 35 en 40 pixels in dezelfde rij. Met
   ronde hoeken zie je dat meteen. De knop is de maat, de rest groeit mee. */
.filters input,.filters select,.filters .knop,.filters button{min-height:2.5rem}
/* Velden naast elkaar in een rij horen even hoog te zijn. Een datumveld heeft
   een eigen lettergrootte nodig om leesbaar te blijven en wordt daarmee hoger
   dan de rest; dan groeit de rest mee in plaats van dat er een uitsteekt. */
.rij input:not([type=checkbox]):not([type=radio]):not([type=file]),.rij select{min-height:2.5rem}
/* In een tabelcel hangen twee formuliertjes naast elkaar aan de tekstregel, en
   dan staat een klein icoonknopje hoger dan de knop ernaast. Op het midden. */
.tabel.lijst td form.inline{vertical-align:middle}

.knop{border-radius:999px;padding:.55rem 1.05rem;font-weight:600;box-shadow:var(--schaduw);
  transition:transform .12s,filter .12s}
.knop:hover{filter:brightness(1.07);transform:translateY(-1px)}
.knop.leeg{box-shadow:none;background:var(--card)}
.knop.leeg:hover{filter:none;background:var(--zacht)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,
input[type=url]:focus,input[type=search]:focus,input[type=date]:focus,input[type=time]:focus,
select:focus,textarea:focus{
  outline:none;border-color:var(--groen);box-shadow:0 0 0 3px color-mix(in srgb,var(--groen) 18%,transparent)}

.kaart,.keuzekaart button,.dag,.aanbod,.verzoek,.delen,.bood-blok,.blokken article,.kokkaart,.cijfers div{
  box-shadow:var(--schaduw)}
.kaart{border-radius:14px;padding:.75rem .85rem;gap:.85rem;transition:transform .12s,box-shadow .12s}
.kaart:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(43,36,32,.06),0 12px 24px -10px rgba(43,36,32,.25)}
.kaart .tegel,.keuzekaart .tegel{flex-basis:58px;height:58px;border-radius:12px;font-size:1.45rem}
.kaart .kz-titel{font-size:1.08rem}
.kaart-acties{margin:-.25rem 0 .8rem .3rem}
.kaart-acties .knopje:hover{color:var(--tomaat)}
.dag{border-radius:14px}
.dag-kop{padding:.55rem .8rem}
.melding{border-radius:0 9px 9px 0}

/* De banner: een foto van de keuken bovenaan de openbare pagina's. */
.banner{margin:0 0 1.1rem;border-radius:16px;overflow:hidden;box-shadow:var(--schaduw);background:var(--zacht)}
.banner img{display:block;width:100%;height:100%;object-fit:cover}
.banner-groot{height:clamp(180px,38vw,360px)}
.banner-strook{height:clamp(120px,24vw,200px);margin-bottom:1.3rem}
.bannervoorbeeld{width:100%;max-height:200px;object-fit:cover;border-radius:12px}
.hero{margin:.4rem 0 1.6rem}
.hero h1{font-size:clamp(1.8rem,4.5vw,2.5rem)}
.hero .acties .knop{font-size:.95rem;padding:.65rem 1.3rem}
.blokken article{border-radius:14px;padding:1rem}
.blokken h3{font-size:1.1rem;color:var(--tomaat)}
.cta{background:linear-gradient(135deg,var(--zacht),color-mix(in srgb,var(--groen) 12%,var(--zacht)));
  border:1px solid var(--line);border-radius:16px;padding:1.3rem}
.voetbalk{margin-top:3rem}
@media print{.banner{display:none}}

/* ---------- alle koks ---------- */
.paginering{display:flex;gap:.3rem;justify-content:center;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.paginering a,.paginering .huidig{display:grid;place-items:center;min-width:34px;height:34px;padding:0 .4rem;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--card)}
.paginering .huidig{background:var(--groen);color:#fff;border-color:var(--groen);font-weight:700}
.paginering a:hover{background:var(--zacht)}

/* ---------- beheer en eters ---------- */
.tabel.lijst td{padding:.55rem .5rem .55rem 0;vertical-align:middle}
.tabel.lijst tr:hover td{background:var(--zacht)}
.tabel.lijst .titel{color:var(--ink);text-decoration:none;font-weight:500}
.tabel.lijst .titel:hover{color:var(--tomaat)}
.tabel .rechts{text-align:right;white-space:nowrap}
.cijfers div{padding:.65rem .8rem;border-left:3px solid var(--groen)}
.cijfers div:nth-child(2n){border-left-color:var(--tomaat)}
.doelrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem .7rem}
.doelrij label{min-width:0;margin:.2rem 0}
/* Een dagdoel per regel: naam, wat het nu is, twee velden en een dubbele
   schuifbalk eronder. De balk komt van app.js; zonder JavaScript staan de
   velden er gewoon en mist alleen de balk. */
.doelen{display:flex;flex-direction:column;gap:.9rem;margin:.6rem 0 1rem;max-width:34rem}
.doelregel{display:grid;grid-template-columns:1fr auto auto;gap:.2rem .5rem;align-items:center}
.doelregel .doelnaam{font-family:Fraunces;font-weight:600;font-size:1rem}
.doelregel .doeluitslag{grid-column:1;grid-row:2;font-size:.8rem;color:var(--muted)}
.doelregel .doelveld{grid-row:1 / span 2;display:flex;align-items:center;gap:.3rem;
  margin:0;font-size:.78rem;color:var(--muted)}
.doelregel .doelveld input{margin:0;width:4.6rem;min-width:0;text-align:right}
/* Twee balken over elkaar: de ene zet de ondergrens, de andere de bovengrens.
   Alleen de knopjes vangen de muis, anders ligt de bovenste overal overheen. */
.schuifpaar{grid-column:1 / -1;position:relative;height:1.6rem;margin-top:.1rem}
.schuifpaar::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;
  margin-top:-2px;border-radius:999px;background:var(--line)}
.schuifpaar::after{content:"";position:absolute;top:50%;height:4px;margin-top:-2px;
  left:var(--van,0%);right:calc(100% - var(--tot,100%));border-radius:999px;background:var(--groen)}
.schuifpaar.leeg::after{display:none}
.schuifpaar .schuif{position:absolute;left:0;right:0;top:0;width:100%;height:1.6rem;margin:0;
  background:none;border:none;padding:0;pointer-events:none;appearance:none;-webkit-appearance:none}
.schuifpaar .schuif:focus{outline:none}
.schuifpaar .schuif::-webkit-slider-thumb{pointer-events:auto;appearance:none;-webkit-appearance:none;
  width:1.1rem;height:1.1rem;border-radius:50%;background:var(--card);border:2px solid var(--groen);
  box-shadow:var(--schaduw);cursor:pointer}
.schuifpaar .schuif::-moz-range-thumb{pointer-events:auto;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--card);border:2px solid var(--groen);box-shadow:var(--schaduw);cursor:pointer}
.schuifpaar .schuif::-moz-range-track{background:none;border:none}
.portieveld{display:block;max-width:12rem}
.waarschuw{color:var(--tomaat)}
/* Binnen of buiten het doel. Kleur alleen, nooit als enige teken: het getal en
   de grenzen staan er zelf bij, voor wie kleur niet ziet. */
.doel-binnen{color:var(--groen)}
.doel-onder,.doel-boven{color:var(--tomaat)}
.maaltijddoel span::before{content:"◦ ";color:var(--tomaat)}

/* ---------- weekmenu voor op de koelkast (één liggend A4) ---------- */
body.koelkast{background:#fff;color:#2B2420}
.koelkast-blad{width:277mm;min-height:190mm;margin:6mm auto;padding:6mm 8mm;background:#fff;
  box-shadow:var(--schaduw);display:flex;flex-direction:column;box-sizing:border-box}
.koelkast-kop{display:flex;align-items:center;gap:8mm;border-bottom:2px solid #C63B25;padding-bottom:3mm;margin-bottom:3mm}
.koelkast-titel{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22pt;line-height:1.05}
.koelkast-sub{font-size:9.5pt;color:#7A6F63;margin-top:1mm}
.koelkast-merk{margin-left:auto}
.koelkast-merk .merk{font-size:16pt}
.koelkast-merk .merk span{font-size:7pt}
.koelkast-merk img{max-height:14mm;width:auto}
.koelkast-uitleg{font-size:8pt;color:#7A6F63;max-width:34mm;text-align:right}
.koelkast-tabel{width:100%;border-collapse:separate;border-spacing:1.5mm;table-layout:fixed;flex:1}
.koelkast-tabel th{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:11pt;padding:1mm 0}
.koelkast-tabel thead th small{display:block;font-family:Karla,sans-serif;font-weight:400;font-size:8pt;color:#7A6F63}
.koelkast-tabel th.maaltijdkop{width:16mm;text-align:left;font-size:9.5pt;color:#7A6F63;vertical-align:middle}
.koelkast-tabel td{vertical-align:top;background:#F6F1E7;border-radius:3mm;padding:2mm;height:50mm}
.koelkast-gerecht{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1mm;height:100%}
.koelkast-foto{width:22mm;height:22mm;border-radius:2.5mm;object-fit:cover;flex:none;font-size:14pt;color:#fff}
span.koelkast-foto{display:grid;place-items:center}
.koelkast-naam{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:9pt;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.koelkast-meta{font-size:7.5pt;color:#7A6F63}
.koelkast-qr{margin-top:auto}
.koelkast-qr img{width:17mm;height:17mm;display:block;image-rendering:pixelated}
.koelkast-leeg{color:#c9bfae;text-align:center;padding-top:20mm}
.koelkast-voet{font-size:8.5pt;color:#7A6F63;text-align:center;margin:2mm 0 0}
.koelkast-acties{display:flex;gap:.5rem;justify-content:center;margin:0 0 2rem}
@media print{
  @page{size:A4 landscape;margin:6mm}
  body.koelkast{margin:0}
  .koelkast-blad{width:auto;min-height:0;margin:0;padding:0;box-shadow:none}
  .koelkast-acties{display:none}
  .koelkast-tabel td{background:#F6F1E7;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .koelkast-foto{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.tabel.weken td{vertical-align:middle}
.tabel.weken .rechts form.inline{margin-left:.3rem}
@media (max-width:620px){.tabel.weken thead,.tabel.weken td:nth-child(2){display:none}}

/* ---------- kop op de banner ---------- */
.hero-tekst{max-width:62ch}
.hero-foto{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--schaduw);
  min-height:clamp(260px,40vw,440px);display:flex;align-items:flex-end;background:var(--zacht)}
.hero-foto .hero-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Wit op een foto leest niet. Een donkere sluier van linksonder naar rechts
   geeft rust achter de tekst en laat de rechterkant van de foto heel. */
.hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,13,9,.82) 0%,rgba(18,13,9,.66) 38%,rgba(18,13,9,.2) 68%,rgba(18,13,9,.05) 100%)}
.hero-foto .hero-tekst{position:relative;z-index:1;width:100%;max-width:38rem;color:#fff;padding:1.4rem 1.5rem 1.3rem;
  background:linear-gradient(to top,rgba(18,13,9,.55),rgba(18,13,9,.12) 60%,rgba(18,13,9,0))}
.hero-foto h1{color:#fff;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-foto .lead{color:#fff;opacity:.97;max-width:46ch;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.hero-foto .knop.leeg{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff}
.hero-foto .knop.leeg:hover{background:rgba(255,255,255,.26)}
/* Op een smal scherm is tekst op een foto slecht leesbaar: beeld boven, tekst eronder. */
@media (max-width:620px){
  .hero-foto{display:block;min-height:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .hero-foto::after{display:none}
  .hero-foto .hero-beeld{position:static;height:clamp(150px,44vw,220px);border-radius:14px;box-shadow:var(--schaduw)}
  .hero-foto .hero-tekst{color:inherit;background:none;padding:.9rem 0 0}
  .hero-foto h1,.hero-foto .lead{color:inherit;text-shadow:none}
  .hero-foto .knop.leeg{background:var(--card);border-color:var(--line);color:var(--ink)}
}

/* De subbalk onder Beheer: zelfde ritme als de hoofdnavigatie, iets kleiner. */
.beheertabs{max-width:760px;margin:0 auto;padding:.1rem .9rem 0;flex-wrap:wrap;gap:.15rem}
.beheertabs a{flex:0 1 auto;padding:.4rem .7rem;font-size:.82rem;border-radius:999px;border-bottom:none;white-space:nowrap}
.beheertabs a[aria-current]{background:var(--zacht);color:var(--ink)}
.beheertabs a:hover{background:var(--zacht)}
@media print{.beheertabs{display:none}}

/* ---------- navigatie met icoontjes ---------- */
.ico{width:22px;height:22px;flex:none;display:block}
.ico.groot{width:26px;height:26px}
nav.tabs a{display:flex;align-items:center;justify-content:center;gap:.4rem}
nav.tabs .ico{width:19px;height:19px;opacity:.75}
nav.tabs a[aria-current] .ico{opacity:1}
.beheertabs a .ico{display:none}

/* De balk onderaan, zoals in een app. Eén menu voor alle schermen: op een
   telefoon over de volle breedte, op een breed scherm een gecentreerde balk. */
.kop nav.tabs{display:none}
.onderbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:.35rem .3rem calc(.35rem + env(safe-area-inset-bottom,0px))}
.onderbalk a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.35rem .1rem;font-size:.66rem;color:var(--muted);text-decoration:none;position:relative;border-radius:12px}
.onderbalk a[aria-current]{color:var(--tomaat);background:var(--zacht)}
.onderbalk .ico{width:23px;height:23px}
.onderbalk .bel{position:absolute;top:.1rem;left:calc(50% + .35rem);margin:0}
body{padding-bottom:4.6rem}
main{padding-bottom:1.5rem}
.voetbalk{margin-bottom:0}
@media (min-width:621px){
  .onderbalk{left:50%;right:auto;transform:translateX(-50%);bottom:.9rem;width:min(44rem,calc(100% - 2rem));
    border:1px solid var(--line);border-radius:18px;padding:.3rem .35rem;box-shadow:0 8px 28px -12px rgba(43,36,32,.45)}
  .onderbalk a{font-size:.72rem;padding:.4rem .2rem}
  body{padding-bottom:5.4rem}
}
@media (max-width:620px){
  .kop-rij{padding:.55rem .9rem}
  .beheertabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
}
@media print{.onderbalk{display:none!important}}

/* De lijst met beheerschermen: secties met een kopje en haarlijnen ertussen,
   zoals een menupagina in een app. Geen kaders, dat leest rustiger. */
.menulijst{display:flex;flex-direction:column;margin:1.4rem 0 0}
.menulijst h2{font-family:Karla,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .3rem;padding-bottom:.45rem;
  border-bottom:2px solid var(--ink)}
/* Uitloggen gaat met een POST, dus met een knop in plaats van een link. Deze
   regel laat die knop precies lezen als de regels eromheen. De eigen opmaak van
   een button moet er daarvoor eerst af. */
.menuknop{width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.menulijst form,.profielpaneel form{margin:0}
.menulijst a,.menulijst .menuknop{display:flex;align-items:center;gap:.85rem;padding:.8rem .1rem;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line)}
.menulijst a:hover,.menulijst .menuknop:hover{background:var(--zacht)}
.menulijst .ico{color:var(--ink)}
.menutekst{display:flex;flex-direction:column;min-width:0;flex:1}
.menutekst b{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.05rem;line-height:1.25}
.menutekst small{color:var(--muted);font-size:.78rem;margin-top:.05rem}
.menulijst .pijltje{color:var(--muted);font-size:1.35rem;line-height:1}
.menulijst .bel{margin-right:.2rem}

/* ---------- foto's bij een recept ---------- */
.fotovak{display:flex;gap:.9rem;align-items:flex-start;flex-wrap:wrap;margin:.4rem 0 .6rem}
/* Niet uitrekken: anders staat "Coverfoto" aan de andere kant van het scherm
   en hoort het nergens meer bij. */
.fotovak > div{flex:0 1 auto;max-width:100%}
.fotovak > div > label{margin-top:0}
.fotovoorbeeld{width:170px;height:115px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.fotorij{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
.galerij{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;margin:0 0 .8rem;-webkit-overflow-scrolling:touch}
.galerij figure{margin:0;flex:0 0 78%;max-width:420px;scroll-snap-align:center}
.galerij img{width:100%;height:220px;object-fit:cover;border-radius:12px;display:block;box-shadow:var(--schaduw)}
.galerij::-webkit-scrollbar{height:6px}
.galerij::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
@media (min-width:620px){.galerij figure{flex-basis:46%}}
img.tegel.foto{flex-basis:96px;width:96px;height:72px;border-radius:10px}
@media print{.galerij{display:none}}

/* ---------- terug naar het menu, en de eigen receptenlijst ---------- */
.kruimel{max-width:760px;margin:0 auto;padding:.7rem .9rem 0}
/* Een lijst met kolommen mag op een breed scherm meer ruimte pakken. Een
   recept, een tekst of een formulier blijft smal, want een regel van duizend
   pixels lees je niet prettig. */
@media (min-width:1040px){
  body.breed .kop-rij,body.breed nav.tabs,body.breed .kruimel,body.breed main{max-width:1080px}
}
.kruimel a{font-size:.84rem;color:var(--muted);text-decoration:none}
.kruimel a:hover{color:var(--tomaat)}
.kruimel + main{padding-top:.5rem}
.receptrij{display:flex;align-items:center;gap:.5rem}
.receptrij .kaart{flex:1;margin-bottom:.5rem}
.receptacties{display:flex;align-items:center;gap:.3rem;margin-bottom:.5rem}
/* Op de receptpagina staan dezelfde knopjes naast de titel, zonder witruimte
   eronder en zonder af te breken. */
.kopregel .receptacties{margin:0;flex:none}
@media (max-width:620px){
  .receptacties .knop{padding:.4rem .7rem;font-size:.78rem}
}

/* ---------- profielmenu rechtsboven ---------- */
.profielmenu{margin-left:auto;position:relative}
.profielmenu summary{list-style:none;cursor:pointer;display:block;line-height:0}
.profielmenu summary::-webkit-details-marker{display:none}
.profielmenu summary:focus-visible{outline:2px solid var(--groen);outline-offset:3px;border-radius:999px}
.avatarhouder{position:relative;display:inline-block}
.avatarhouder .avatar,.avatarhouder .bol{width:34px;height:34px;font-size:.85rem}
.ingelogd{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;
  background:var(--groen);color:#fff;font-size:.6rem;line-height:15px;text-align:center;
  border:2px solid var(--paper);box-sizing:content-box}
.profielpaneel{position:absolute;right:0;top:calc(100% + .5rem);z-index:50;min-width:15rem;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.4rem;
  box-shadow:0 2px 6px rgba(43,36,32,.08),0 18px 36px -14px rgba(43,36,32,.4)}
.profielpaneel a,.profielpaneel .menuknop{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:.9rem}
.profielpaneel a:hover,.profielpaneel .menuknop:hover{background:var(--zacht)}
.profielpaneel .ico{width:19px;height:19px;color:var(--muted)}
.profielkop-klein{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem .6rem;
  border-bottom:1px solid var(--line);margin-bottom:.3rem}
.profielkop-klein span{display:flex;flex-direction:column;min-width:0}
.profielkop-klein b{font-family:Fraunces,Georgia,serif;font-size:.95rem}
.profielkop-klein small{color:var(--muted);font-size:.74rem;overflow:hidden;text-overflow:ellipsis}
.profielkop-klein .avatar,.profielkop-klein .bol{width:38px;height:38px}
@media print{.profielmenu{display:none}}
/* Ronde icoonknoppen voor bewerken en verwijderen in lijsten. */
.knopje{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);text-decoration:none;padding:0;flex:none}
.knopje:hover{background:var(--zacht)}
.knopje.gevaar:hover{background:color-mix(in srgb,var(--tomaat) 12%,var(--card));color:var(--tomaat);border-color:var(--tomaat)}
.knopje .ico{width:19px;height:19px}
@media print{.receptacties{display:none}}
/* Het receptformulier op een telefoon: velden onder elkaar in plaats van in
   een raster dat niet past. */
@media (max-width:620px){
  /* Eén ingrediënt als blokje: naam boven, hoeveelheid en eenheid ernaast. */
  .ing-rij{grid-template-columns:1fr 6.2rem;gap:.35rem;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:.5rem;margin-bottom:.5rem}
  .ing-rij input[name="ing_naam[]"]{font-weight:500}
  .ingmeervelden .ingtekst,.ingmeervelden .ingapart{flex:1 1 100%}
  .ing-rij select{width:100%}
  .fotovak{gap:.6rem}
  .fotovoorbeeld{width:100%;height:150px}
  .filters{gap:.35rem}
  /* Alles in de filterrij vult een halve regel; anders loopt het laatste
     keuzeveld buiten het scherm. */
  .filters select,.filters .knop,.filters .zonderfilter{flex:1;min-width:8rem}
  .filters .zonderfilter summary{text-align:center}
}

/* ---------- kolommen aanwijzen bij het inlezen van NEVO ---------- */
.kolomraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.5rem .7rem;margin:.4rem 0 .8rem}
.kolomraster label{margin:0;min-width:0}
.kolomraster select{width:100%;text-overflow:ellipsis}
.nodig{font-size:.66rem;border:1px solid var(--tomaat);color:var(--tomaat);border-radius:999px;padding:.02rem .35rem}
.scheiderkeuze{flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.scheiderkeuze .knop{padding:.35rem .75rem;font-size:.8rem}
.voorbeeldblok{margin:.4rem 0 .8rem}
.voorbeeldblok summary{font-size:.82rem;color:var(--muted);cursor:pointer}
.voorbeeldblok .tabel{font-size:.78rem;margin-top:.4rem;min-width:36rem}
.voorbeeldblok td,.voorbeeldblok th{white-space:nowrap;padding-right:.8rem}

/* ---------- voedingswaarden koppelen ---------- */
/* De koppelrij: een keuzelijst die niet de hele tabel opeist, met de knop
   ernaast en "zelf zoeken" eronder als het krap wordt. */
.koppelrij{display:flex;align-items:center;gap:.5rem;margin:0;flex-wrap:wrap}
.koppelrij select{flex:1 1 18rem;min-width:0;max-width:34rem;margin:0;font-size:.82rem}
.koppelrij button{flex:none;white-space:nowrap}
.koppelrij .klein{flex:0 0 14rem;margin:0;font-size:.74rem}
.koppelrij .klein input{margin:.1rem 0 0}
.koppeltabel td{vertical-align:middle}
.koppeltabel td .meta{display:block;font-size:.74rem}
/* De naam blijft staan als je opzij schuift; de rest mag wel aflopen. */
.koppeltabel th:first-child,.koppeltabel td:first-child{min-width:9rem}
.koppeltabel td:last-child{white-space:normal;min-width:20rem}

/* ---------- zoekblok ----------
   Zoekveld met knop op de eerste regel, de filters daaronder in een raster dat
   zichzelf indeelt. Anders hobbelen de velden in een rij door elkaar. */
.zoekblok{margin-bottom:.9rem}
.zoekrij{display:flex;flex-wrap:wrap;gap:.5rem}
.zoekrij .zoek{flex:1;min-width:0;margin:0}
.zoekrij .knop{flex:none}
/* De suggesties vallen onder het veld, over de hele breedte. */
.zoekrij .kiestips{flex:0 0 100%}
/* Elk filter is een vakje met een kopje erboven: even breed, even hoog, en de
   keuze hoeft niet meer uit te leggen waar hij over gaat. */
.filterrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.5rem;
  align-items:end;margin-top:.6rem}
.filterveld{display:flex;flex-direction:column;gap:.2rem;margin:0;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.filterveld select,.filterveld input{width:100%;margin:0;font-size:.85rem;height:2.3rem;
  text-transform:none;letter-spacing:normal;color:var(--ink)}
/* Een vinkje is geen invoerveld: die blijft zo groot als een vinkje. */
.filterveld input[type=checkbox]{width:auto;height:auto;flex:none}
.filterveld .zonderfilter,.filterveld .vinkje.kaderig{height:2.3rem;display:flex;align-items:center}
.filterveld .zonderfilter summary,.filterveld .vinkje.kaderig{width:100%;border:1px solid var(--line);
  border-radius:7px;background:var(--card);padding:0 .55rem;height:2.3rem;font-size:.85rem;
  text-transform:none;letter-spacing:normal;color:var(--ink);display:flex;align-items:center;gap:.4rem}
.filterveld .zonderfilter summary{cursor:pointer;justify-content:space-between}
.filterveld .zonderfilter summary::after{content:"▾";color:var(--muted)}
.filterveld .zonderfilter[open]{position:relative;z-index:5}
/* De lijst valt over de pagina heen; anders duwt hij de hele rij uit elkaar. */
.zonderlijst{position:absolute;left:0;top:2.6rem;z-index:6;display:flex;flex-direction:column;gap:.15rem;
  min-width:13rem;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .65rem;box-shadow:var(--schaduw)}
.zonderlijst .vinkje{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.82rem;
  text-transform:none;letter-spacing:normal;color:var(--ink);white-space:nowrap}
.filterveld .zonderfilter[open] summary::after{content:"▴"}

/* ---------- kookboek: banner, filterkolom, resultaten ----------
   Het zoekveld in een vlak bovenaan met de banner van de site erachter, en
   daaronder de filters links en de recepten rechts. Op een telefoon vallen de
   filters achter een knop: anders kijk je eerst tegen een scherm vol keuzes
   aan voordat je één gerecht ziet. */
.zoekbanner{background:var(--zacht);border-radius:16px;padding:1.4rem 1rem;margin:0 0 1.2rem;
  background-size:cover;background-position:center;position:relative;overflow:hidden}
.zoekbanner.metfoto::before{content:"";position:absolute;inset:0;background:rgba(20,16,12,.52)}
.zoekbannerbak{position:relative;max-width:40rem;margin:0 auto}
.zoekbanner h2{text-align:center;margin:0 0 .6rem;font-size:clamp(1.2rem,3.4vw,1.7rem)}
.zoekbanner.metfoto h2{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.zoekbanner .zoekblok{margin:0}

.kookboeklayout{display:grid;gap:1.2rem}
@media (min-width:900px){
  .kookboeklayout{grid-template-columns:16rem 1fr;align-items:start}
  /* Op een breed scherm staat de kolom open en is de knop overbodig. Een
     dichte <details> krijg je met opmaak niet open, dus app.js zet hem open en
     geeft hem deze klasse. Zonder JavaScript blijft de knop staan en klik je
     hem zelf een keer open. */
  .filterkolom .filterpaneel.breedopen > summary{display:none}
  .filterkolom .filterrij{grid-template-columns:1fr}
  /* Op een breed scherm stuurt elke keuze zichzelf door; dan is een knop om de
     filters toe te passen alleen maar verwarrend. Zonder JavaScript gebeurt
     dat niet vanzelf, en dan ontbreekt deze klasse en blijft de knop staan. */
  .filterkolom .filterpaneel.breedopen .filterklaar button{display:none}
}
.filterkolom{margin:0}
/* Op een telefoon hoort de knop Filters bij de regel met het aantal en de
   weergaveknoppen; die drie gaan over dezelfde lijst. De knop zweeft dus naast
   die regel en de kaartjes eronder lopen er weer onderlangs. Staat het paneel
   open, dan pakt het de volle breedte. */
@media (max-width:899px){
  .kookboeklayout.metkopregel{display:block}
  .kookboeklayout.metkopregel > .filterkolom{float:left;margin:0 .6rem .5rem 0}
  .kookboeklayout.metkopregel > .filterkolom:has(> details[open]){float:none;width:100%;margin:0 0 .8rem}
  /* Naast die knop is de regel smal; de telling mag dan krimpen, anders duwt
     hij de weergaveknoppen naar een regel eronder. */
  /* Even hoog als de knop ernaast, zodat de telling op dezelfde ooghoogte
     staat als het woord Filters. */
  .kookboeklayout.metkopregel .resultaatkop{flex-wrap:nowrap;align-items:center;gap:.5rem;
    min-height:2.45rem}
  .kookboeklayout.metkopregel .resultaatkop .meta{flex:1 1 auto;min-width:0}
  .kookboeklayout.metkopregel .resultaatkop .weergavekeuze{flex:none}
}
.filterpaneel > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;
  font-size:.86rem;font-weight:600}
.filterpaneel > summary::-webkit-details-marker{display:none}
.filterpaneel > summary::after{content:"+";font-size:1.05rem;line-height:1;color:var(--muted)}
.filterpaneel[open] > summary::after{content:"−"}
.filterpaneel[open] > summary{margin-bottom:.6rem}
.filterklaar{display:flex;gap:.5rem;margin:.6rem 0 0}
.resultaten{min-width:0}


/* Twee tabbladen op het kiesscherm: recepten of wat er in de vriezer ligt. */
.kopdatum{color:var(--muted);font-weight:400;font-size:.8em}
.kiestabs{display:flex;gap:.3rem;margin:0 0 .9rem;border-bottom:1px solid var(--line)}
.kiestab{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--muted);
  padding:.5rem .9rem;border:1px solid transparent;border-bottom:none;border-radius:10px 10px 0 0;
  margin-bottom:-1px;font-size:.9rem}
.kiestab .ico{width:16px;height:16px}
.kiestab .hoeveel{font-size:.78rem;opacity:.8}
.kiestab:hover{color:var(--groen)}
.kiestab.aan{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600}
/* Het ijskristal bij een portie die al gekookt is. */
.vriezerlabel{display:inline-flex;align-items:center;gap:.25rem;border-color:var(--groen);color:var(--groen)}
.vriezerlabel .ico{width:13px;height:13px}
/* Zonder foto bij het recept staat het ijskristal op de tegel. */
.tegel.vriezertegel,.tegel.kookboek{display:inline-flex;align-items:center;justify-content:center;
  background:var(--zacht);color:var(--groen)}
.tegel.kookboek .ico{width:40%;height:40%}
.tegel.vriezertegel .ico{width:60%;height:60%}
.uitrecept{font-size:.76rem}

/* ---------- tegels ----------
   Dezelfde kaartjes als in de lijst, maar onder elkaar in plaats van naast
   elkaar, met de foto groot. Breedte per tegel is een minimum; de browser legt
   er zoveel naast elkaar als er passen. */
.resultaatkop{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  flex-wrap:wrap;margin:0 0 .7rem}
.resultaatkop .meta{margin:0;flex:1 1 12rem}
.resultaatkop .weergavekeuze{margin:0}
.weergavekeuze{display:flex;gap:.3rem;justify-content:flex-end;margin:-.4rem 0 .7rem}
/* Twee icoontjes in plaats van twee woorden: vier vakjes of drie regels. De
   naam zit in de titel en in aria-label, want een plaatje alleen is te weinig. */
.weergaveknop{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted)}
.weergaveknop .ico{width:19px;height:19px}
.weergaveknop:hover{border-color:var(--groen);color:var(--groen)}
.weergaveknop.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.tegelrij{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.9rem;margin-bottom:1rem}
.tegelvak{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--schaduw);overflow:hidden;display:flex;flex-direction:column}
.tegelvak .kaart{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin:0}
.tegelvak .kaart:hover{transform:none;box-shadow:none}
.tegelvak .kaart:hover .kz-titel{color:var(--tomaat)}
/* Een foto vult de tegel net zo goed als het letterblok. Zonder de tweede
   kiezer wint de kleine duim van img.tegel.foto en hangt er een postzegel in
   de hoek van een verder lege kaart. */
.tegelvak .tegel,.tegelvak img.tegel.foto{width:100%;height:9rem;border-radius:0;font-size:2rem;
  flex:none;object-fit:cover}
.tegelvak .kz{min-width:0;padding:.6rem .8rem .2rem}
.tegelvak .kz-titel{font-family:Fraunces;font-weight:600;font-size:1rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tegelvak .introregel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.8rem;color:var(--muted);margin-top:.15rem}
.tegelvak .smalregel{display:block;font-size:.78rem;margin-top:.3rem}
.tegelvak .receptacties{margin:0;padding:.2rem .6rem .6rem;justify-content:flex-end}
.tegelvak .knopje{width:32px;height:32px}
.tegelvak .knopje .ico{width:17px;height:17px}

/* ---------- receptentabel ----------
   Op een breed scherm een tabel met kolommen, op een telefoon dezelfde rijen
   zonder kolommen: naam, meta eronder, knoppen rechts. */
.receptentabel .naamcel{width:100%}
.receptentabel .kaart{background:none;border:none;box-shadow:none;padding:0;margin:0;gap:.55rem;
  align-items:center;border-radius:0;min-width:0}
.receptentabel .kaart:hover{transform:none;box-shadow:none}
.receptentabel .kaart:hover .kz-titel{color:var(--tomaat)}
.receptentabel .tegel{width:38px;height:38px;font-size:1rem;border-radius:9px;flex:none}
.receptentabel .kz{min-width:0}
/* Eén regel, maar met afbreken toegestaan. Met white-space:nowrap rekent de
   browser de hele zin mee als minimumbreedte van de kolom, en dan wordt de
   tabel breder dan de pagina in plaats van dat er puntjes komen. */
.receptentabel .kz-titel{font-size:.95rem;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.receptentabel .smalregel{display:none}
.receptentabel .fanrij{display:block;margin-top:.15rem}
.receptentabel td{vertical-align:middle}
.receptentabel .getal{white-space:nowrap}
.receptentabel .receptacties{margin:0;justify-content:flex-end}
.receptentabel .knopje{width:32px;height:32px}
.receptentabel .knopje .ico{width:17px;height:17px}
@media (max-width:640px){
  /* Liever twee regels titel dan drie letters met puntjes. */
  .receptentabel .kz-titel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:760px){
  .receptentabel thead{display:none}
  .receptentabel,.receptentabel tbody,.receptentabel tr,.receptentabel td{display:block}
  .receptentabel tr{display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--line);padding:.35rem 0}
  .receptentabel td{border:none;padding:0}
  .receptentabel .breedcel{display:none}
  .receptentabel .naamcel{flex:1;min-width:0}
  .receptentabel .smalregel{display:block;font-size:.74rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .receptentabel .fanrij{display:none}
}

/* Een gewone lijsttabel. Op een telefoon vallen de brede kolommen weg en komt
   die inhoud als tweede regeltje onder de naam te staan. */
.tabel.lijst .smalregel{display:none}
.tabel.lijst tr.gekozenrij{background:var(--zacht)}
.knop.klein{padding:.3rem .75rem;font-size:.76rem;box-shadow:none}
@media (max-width:640px){
  .tabel.lijst .breedcel{display:none}
  .tabel.lijst .smalregel{display:block;font-size:.74rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Het rijtje van een creditpakket: het vinkje hoort naast de velden, niet
   eronder met een eigen halve regel. */
.pakketrij .vinkje{flex:0 0 auto;align-self:flex-end;margin-bottom:.5rem}

/* Wie een paar weken verder bladert, moet in één klik terug kunnen. */
.nuweek{text-align:center;margin:-.5rem 0 .8rem}

/* Kolomkoppen waar je op kunt sorteren. */
.tabel th a.sorteerlink{color:var(--muted);text-decoration:none;white-space:nowrap}
.tabel th a.sorteerlink:hover{color:var(--tomaat)}
.tabel th[aria-sort] a.sorteerlink{color:var(--ink)}

/* ---------- schuifknop ----------
   Openbaar of privé in één beweging. Het vinkje zelf blijft er, alleen
   onzichtbaar, zodat toetsenbord en schermlezer gewoon werken. */
.schuifrij{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .9rem}
.schuif{position:relative;display:inline-block;width:46px;height:27px;flex:none;margin:0}
.schuif input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.schuifbol{position:absolute;inset:0;border-radius:999px;background:var(--line);
  transition:background .15s;pointer-events:none}
.schuifbol::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 3px rgba(43,36,32,.35);transition:transform .15s}
.schuif input:checked + .schuifbol{background:var(--groen)}
.schuif input:checked + .schuifbol::after{transform:translateX(19px)}
.schuif input:focus-visible + .schuifbol{box-shadow:0 0 0 3px color-mix(in srgb,var(--groen) 25%,transparent)}
.schuiftekst{line-height:1.25}
.schuiftekst small{display:block;color:var(--muted);font-size:.8rem}
@media print{.schuifrij{display:none}}

/* De tafels die je zelf hebt opengezet, rustiger dan het aanbod van anderen. */
.aanbod.eigen{background:var(--zacht);border-style:dashed}

/* De regel die je op dit moment bewerkt. */
.tabel tr.nu{background:var(--zacht)}
/* ---------- beheertabellen: zoeken, sorteren, bladeren ---------- */
/* Ja of nee in één tik. Groen is aan, zodat je in één blik ziet wie wat mag. */
.schakel{min-width:3.1rem;height:1.9rem;padding:0 .7rem;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.schakel:hover{border-color:var(--groen);color:var(--groen)}
.schakel.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.schakel.aan:hover{color:#fff}
.sorteerlink{color:inherit;text-decoration:none;white-space:nowrap}
.sorteerlink:hover{color:var(--tomaat)}
.tabel th[aria-sort] .sorteerlink{color:var(--ink)}
.tabel.lijst td .knop.leeg{padding:.25rem .7rem;font-size:.78rem}
/* Het sjabloon dat je aanpast, met eronder hoe het bij de ontvanger aankomt. */
.mailbewerk .kopregel{margin-bottom:.2rem}
.mailvoorbeeld{display:block;width:100%;height:23rem;margin:.5rem 0 .2rem;background:#fff;
  border:1px solid var(--line);border-radius:12px}

/* ---------- allergenen nalopen ----------
   Eén product per kaartje: naam, de veertien vinkjes naast elkaar, en één knop.
   Zo loop je er in een paar minuten doorheen. */
.naloop{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .8rem;margin-bottom:.5rem;box-shadow:var(--schaduw)}
.naloopkop{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.45rem}
.naloopvinkjes{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-bottom:.55rem}
.naloopvinkjes .vinkje{font-size:.82rem}
.naloop .knop{padding:.4rem .9rem;font-size:.82rem}

/* ---------- prijzen bijwerken na het boodschappen doen ---------- */
.prijsblok{margin:.8rem 0}
.prijsblok summary{font-size:.84rem;color:var(--muted);cursor:pointer}
.prijsraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem .9rem;margin:.6rem 0 .8rem}
.prijsraster label{margin:0;font-size:.78rem;display:flex;flex-direction:column;gap:.2rem}
.prijsraster input{margin:0;max-width:7rem}
@media print{.prijsblok{display:none}}

/* Het beeldje bij een gepland gerecht: klein, zodat de week compact blijft. */
.tegel.mini{flex:0 0 34px;width:34px;height:34px;border-radius:8px;font-size:.95rem}
img.tegel.mini{width:46px;flex-basis:46px;height:34px;object-fit:cover}
@media print{.geplaatst .tegel{display:none}}

/* De knop om een recept los op de boodschappenlijst te zetten. De uitleg staat
   eronder; naast de knop wordt hij op een telefoon tegen de rand geduwd. */
.losvorm{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:.2rem 0 .8rem}
.losvorm .knop{white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.losvorm .meta{flex:1 1 12rem;min-width:0}

/* Waar een recept bij past, als klikbare labels onder de titel. */
.categorieen{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .6rem}
.categorieen .label{text-decoration:none}
.categorieen .label:hover{border-color:var(--groen);color:var(--groen)}
/* Sfeer is een andere as dan de categorie, dus ook een ander randje: anders
   lijkt "Troostkost" een maaltijd zoals "Lunch". */
.categorieen .sfeerlabel{border-color:var(--tomaat);color:var(--tomaat)}
.categorieen .sfeerlabel:hover{border-color:var(--tomaat);color:var(--tomaat);background:var(--zacht)}

/* De korte introductie en de allergeenmerkjes in de receptenlijst. */
.receptentabel .introregel{font-size:.8rem;color:var(--muted);line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:.1rem}
.merkjes{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}
.merkje{font-size:.66rem;line-height:1.5;padding:0 .4rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tomaat) 40%,var(--line));color:var(--tomaat);white-space:nowrap}
/* Een tekentje in plaats van een woord: rond, even groot, met de naam in de
   titel en in de legenda onder de lijst. */
.merkje.teken{display:grid;place-items:center;width:22px;height:22px;padding:0}
.allergeenico{width:15px;height:15px}
.legenda{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;margin:.2rem 0 1rem}
.legendadeel{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;color:var(--muted)}
.legendadeel .allergeenico{color:var(--tomaat)}
@media print{.legenda{display:none}}

/* ---------- de receptpagina in vakken ----------
   Ingrediënten, voedingswaarde, bereiding en de sterren staan elk in een eigen
   vak met een zachte eigen tint. Dat scheelt zoeken: je ziet in één oogopslag
   waar het lijstje ophoudt en de bereiding begint. */
.vak{border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;margin:.9rem 0;
  background:var(--card);box-shadow:var(--schaduw)}
.vak > .kopje{margin-top:0}
.vak-ingredienten{background:color-mix(in srgb,var(--groen) 5%,var(--card))}
.vak-voeding{background:var(--zacht)}
.vak-bereiding{background:var(--card)}
.vak-oordeel{background:color-mix(in srgb,#E3A008 7%,var(--card))}
.vak-ingredienten .ing li{border-bottom-color:color-mix(in srgb,var(--groen) 20%,var(--line))}

/* Genummerde stappen met een rond cijfer in plaats van het standaardnummer. */
.vak-bereiding .stappen{list-style:none;padding:0;counter-reset:stap;margin:0}
.vak-bereiding .stappen li{counter-increment:stap;position:relative;padding:.1rem 0 .1rem 2.1rem;margin:.55rem 0;line-height:1.5}
.vak-bereiding .stappen li::before{content:counter(stap);position:absolute;left:0;top:.05rem;
  width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;
  background:var(--groen);color:#fff;font-size:.8rem;font-weight:700;font-family:Karla,sans-serif}

/* Sterren per eter als losse regels met een lijntje ertussen. */
.vak-oordeel .oordeel-rij{padding:.3rem 0;border-top:1px solid color-mix(in srgb,#E3A008 18%,var(--line))}
.vak-oordeel .oordeel-rij:first-of-type{border-top:none}
.vak-oordeel .schrijfrij{margin:.1rem 0 .5rem}

@media print{
  .vak{border:none;border-radius:0;padding:0;margin:.6rem 0;background:none!important;box-shadow:none}
  .vak-bereiding .stappen li::before{background:none;color:#000;border:1px solid #666}
  body.print-lijst .vak{display:none!important}
}

/* De kopjes op de receptpagina: een echte sectiekop met een tekening ervoor
   en een haarlijn eronder, in plaats van een klein grijs labeltje. */
.vak > .kopje,.bood-blok > .kopje{display:flex;align-items:center;gap:.45rem;
  font-family:Fraunces,Georgia,serif;font-size:1.05rem;font-weight:600;letter-spacing:0;
  color:var(--ink);text-transform:none;margin:0 0 .6rem;padding-bottom:.45rem;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.vak > .kopje .ico,.bood-blok > .kopje .ico{width:19px;height:19px;color:var(--groen);flex:none}
.vak-oordeel > .kopje .ico{color:#C98A06}
.kopje-bij{font-family:Karla,sans-serif;font-size:.78rem;font-weight:400;color:var(--muted)}
@media print{
  .vak > .kopje,.bood-blok > .kopje{border-bottom:1px solid #999}
  .vak > .kopje .ico,.bood-blok > .kopje .ico{display:none}
}

/* ---------- de pagina van een kok ---------- */
.kokkop{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1rem 1.1rem;margin:.4rem 0 1.2rem;box-shadow:var(--schaduw)}
.kokkop-rij{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.kokkop .avatar,.kokkop .bol{width:72px;height:72px;font-size:1.7rem;flex:none}
.kokkop-tekst{flex:1;min-width:10rem}
.kokkop-tekst h1{margin:0;font-size:1.6rem}
.kokkop-tekst .meta{display:flex;align-items:center;gap:.25rem;margin:.15rem 0 0}
.kokkop .ico.mini{width:14px;height:14px}
.kokteller{text-align:center;background:color-mix(in srgb,var(--groen) 7%,var(--card));
  border:1px solid color-mix(in srgb,var(--groen) 20%,var(--line));border-radius:12px;padding:.5rem .8rem}
.kokteller b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.5rem;line-height:1.1;color:var(--groen)}
.kokteller span{font-size:.7rem;color:var(--muted);line-height:1.25;display:block}
.kokverhaal{margin:.8rem 0 0;font-size:.95rem;line-height:1.55;max-width:62ch}
.kokkopje{display:flex;align-items:center;gap:.45rem;font-family:Fraunces,Georgia,serif;
  font-size:1.1rem;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;
  padding-bottom:.45rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.kokkopje .ico{width:19px;height:19px;color:var(--groen)}

/* De gerechten als kaartjes met beeld, zoals in een tijdschrift. */
.gerechtenraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.8rem;margin:.8rem 0 1.4rem}
.gerechtkaart{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--schaduw);
  transition:transform .12s,box-shadow .12s}
.gerechtkaart:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(43,36,32,.06),0 14px 26px -12px rgba(43,36,32,.3)}
.gerechtbeeld{display:block;width:100%;height:150px;object-fit:cover}
.gerechtbeeld.leeg{display:grid;place-items:center;font-family:Fraunces,Georgia,serif;
  font-size:2.2rem;color:#fff}
.gerechttekst{display:flex;flex-direction:column;gap:.15rem;padding:.65rem .8rem .8rem}
.gerechttekst .kz-titel{font-size:1rem;line-height:1.25}
.gerechttekst .introregel{font-size:.8rem;color:var(--muted);line-height:1.35}

/* ---------- de openbare pagina's wat levendiger ----------
   De blokken kregen om en om een andere tint, zodat de pagina ritme heeft in
   plaats van vier dezelfde witte vakken. */
.blokken article{position:relative;padding:1.1rem 1.1rem 1.1rem 1.2rem;overflow:hidden;
  transition:transform .12s,box-shadow .12s}
.blokken article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--groen)}
.blokken article:nth-child(2n)::before{background:var(--tomaat)}
.blokken article:nth-child(4n)::before{background:#E3A008}
.blokken article:nth-child(2n){background:color-mix(in srgb,var(--tomaat) 4%,var(--card))}
.blokken article:nth-child(3n){background:color-mix(in srgb,var(--groen) 5%,var(--card))}
.blokken article:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(43,36,32,.06),0 14px 26px -12px rgba(43,36,32,.28)}
.blokken h3{line-height:1.25}
.blokken p{line-height:1.55}

/* Kopjes op de openbare pagina's lezen als koppen, niet als labeltjes. */
main > .kopje{font-family:Fraunces,Georgia,serif;font-size:1.15rem;font-weight:600;color:var(--ink);
  text-transform:none;letter-spacing:0;margin:1.6rem 0 .5rem;padding-bottom:.4rem;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}

/* De koks als rondjes met hun naam eronder. */
.kokrij{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.7rem}
/* Is er maar een kok, dan is zijn kaartje in een raster van tien kolommen een
   smal strookje. Daarom krijgt het de breedte van een gewone kaart, maar het
   blijft links staan: zo verspringt er niets zodra er een tweede kok bij komt,
   en een zoekopdracht met een enkele treffer schuift ook niet weg. */
.kokrij .kokkaart:only-child{grid-column:1 / -1;justify-self:start;width:100%}
/* Op een telefoon is de rij zelf al zo breed als een kaart; daar zou een
   maximum alleen een gat aan de rechterkant maken. */
@media (min-width:620px){.kokrij .kokkaart:only-child{max-width:18rem}}
.kokkaart{padding:1rem .6rem;border-radius:14px;transition:transform .12s,box-shadow .12s}
.kokkaart:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(43,36,32,.06),0 14px 26px -12px rgba(43,36,32,.28)}
.kokkaart .avatar,.kokkaart .bol{width:64px;height:64px;font-size:1.5rem;margin-bottom:.15rem}
.kokkaart .kz-titel{font-family:Fraunces,Georgia,serif;font-size:1rem}
.cta h2{font-family:Fraunces,Georgia,serif}

/* ---------- week laten voorstellen ---------- */
.wensraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin:.8rem 0}
.wens{display:flex;flex-direction:column;gap:.3rem;margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:.6rem .7rem}
.wens.albezet{background:var(--zacht)}
/* Wat er die dag al staat. Niet te vullen, dus ook niet te kiezen: het vak
   blijft staan maar is uit, zodat je ziet dat de dag meedoet zodra je hem in
   de planner vrijmaakt. */
.wensstaat{display:flex;flex-direction:column;gap:.1rem;font-size:.74rem;color:var(--muted);line-height:1.35}
.wensstaat b{color:var(--ink);font-weight:600}
.wens select:disabled{background:var(--zacht);color:var(--muted);cursor:not-allowed;opacity:1}
.wenskop{font-family:Fraunces,Georgia,serif;font-size:.95rem;color:var(--ink)}
.wens select{margin:0;font-size:.82rem}
.voorstelrij{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.voorsteldag{flex:0 0 7.5rem;display:flex;flex-direction:column;line-height:1.2}
.voorstelrij .kaart{flex:1;min-width:14rem;margin:0}
.voorstelleeg{flex:1;min-width:14rem;background:var(--zacht);border:1px dashed var(--line);
  border-radius:12px;padding:.6rem .7rem}
.voorstelknop{text-align:center;margin:-.2rem 0 1rem}
@media print{.voorstelknop{display:none}}

/* ---------- kookgeschiedenis ---------- */
.gekooktknop{background:none;border:1px solid var(--line);border-radius:999px;width:26px;height:26px;
  line-height:1;color:var(--muted);cursor:pointer;padding:0}
.gekooktknop.af{background:var(--groen);border-color:var(--groen);color:#fff}
.gekooktregel{display:flex;align-items:center;gap:.3rem;margin:.3rem 0}
.gekooktregel .ico.mini,.pasgekookt .ico.mini{width:14px;height:14px}
.pasgekookt{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--groen);
  margin-top:.15rem}
@media print{.gekooktknop{display:none!important}}

/* ---------- vriezer ---------- */
/* Elke regel leest als één zin: wat het is, hoeveel, tot wanneer, waar. Wie
   iets wil veranderen of inplannen klapt een paneel onder de rij uit; stonden
   de velden in de rij zelf, dan werd het een strook invoervakken. */
.vriezertabel td{vertical-align:middle}
/* Breedtes als verhouding, anders kruipen porties, datum en lade allemaal
   tegen elkaar aan de rechterkant terwijl de naam de halve regel leeg laat. */
.vriezertabel .naamcel{width:40%;padding-right:.8rem}
.vriezertabel .getalcel{width:7%}
.vriezertabel .datumcel{width:15%}
.vriezertabel .ladecel{width:12%}
.vriezertabel .vriescel{width:13%}
.vriezerkaart{display:flex;align-items:center;gap:.55rem;min-width:0}
/* Een foto is elders breder dan hoog; in een rij hoort hij vierkant, naast
   het ijskristal dat dezelfde maat heeft. */
.vriezerkaart .tegel,.vriezerkaart img.tegel.foto{width:38px;height:38px;flex:0 0 38px;
  border-radius:9px;object-fit:cover}
/* Een tikje groen, anders valt het bakje weg tegen het papier. */
.vriezerkaart .tegel.vriezertegel{background:color-mix(in srgb,var(--groen) 12%,var(--card))}
.vriezerwat{min-width:0}
.vriezertabel .naamcel b,.vriezertabel .vriezernaam{margin-right:.3rem;font-weight:600}
.vriezertabel .vriezernaam{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.vriezertabel .vriezernaam:hover{color:var(--tomaat);border-color:var(--tomaat)}
.vriezertabel .getalcel{text-align:right;font-variant-numeric:tabular-nums}
.vriezertabel .naamcel .label{white-space:nowrap}
.vriezertabel .nowrapcel{white-space:nowrap}
.vriezertabel .datumcel,.vriezertabel .ladecel,.vriezertabel .vriescel{white-space:nowrap}
.vriezertabel td .meta{display:block;font-size:.74rem;line-height:1.35}
.vriezertabel tr.overdatum td{background:color-mix(in srgb,var(--tomaat) 6%,var(--card))}
.vriezertabel .over{color:var(--tomaat);font-weight:600}
.vriezertabel .smalregel{display:none}
.vriezeracties{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;justify-content:flex-end}
.vriezeracties .knop{padding:.3rem .7rem;font-size:.76rem;white-space:nowrap}
.vriezeracties .knopje{width:32px;height:32px}
.vriezeracties .knopje .ico{width:16px;height:16px}
/* Het uitgeklapte paneel hangt aan de rij erboven: zelfde achtergrond, geen
   lijn ertussen, en de knop waarmee je het opende valt links uit te lezen. */
.vriezertabel .paneelrij td{background:var(--zacht);border-top:none;padding:.6rem .7rem .7rem}
.rijpaneel{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end}
.rijpaneel .paneelkop{flex:1 0 100%;display:flex;align-items:center;gap:.35rem;
  font-family:Fraunces,Georgia,serif;font-size:.92rem}
.rijpaneel .paneelkop .ico.mini{width:15px;height:15px;color:var(--muted)}
.rijpaneel label{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.rijpaneel input,.rijpaneel select{margin:0;width:auto;min-width:8rem;font-size:.85rem;padding:.35rem .5rem;
  text-transform:none;letter-spacing:0;color:var(--ink)}
/* Een tekstveld wordt vanzelf zo breed als twintig tekens; hier mag het smal
   blijven, anders past de regel met de knoppen er niet meer naast. */
.rijpaneel input[type=text]{width:8rem;min-width:0}
.rijpaneel label.kort input{width:4.5rem;min-width:0}
.rijpaneel .knop{margin:0}
/* Weghalen hoort niet naast opslaan: het duwt zichzelf naar de overkant. */
.rijpaneel .paneelweg{margin-left:auto}
/* Op een smal scherm is een tabel van zes kolommen niet te lezen: dan wordt
   elke regel een kaartje met alles onder elkaar. */
@media (max-width:640px){
  /* De houder geeft elke tabel 34rem mee om te kunnen schuiven; deze stapelt
     juist, dus die ondergrens moet eraf, anders schuift de pagina opzij. */
  .tabelhouder .vriezertabel{min-width:0}
  .vriezertabel thead{display:none}
  .vriezertabel,.vriezertabel tbody,.vriezertabel tr,.vriezertabel td{display:block}
  .vriezertabel tr{border-top:1px solid var(--line);padding:.55rem 0}
  .vriezertabel tr.overdatum{background:color-mix(in srgb,var(--tomaat) 6%,var(--card));
    border-radius:10px;padding:.55rem .5rem}
  .vriezertabel td{border:none;padding:.15rem 0}
  .vriezertabel tr.overdatum td{background:none}
  .vriezertabel .breedcel{display:none}
  .vriezertabel .naamcel{width:auto;padding-right:0}
  /* Deze regel mag wel omlopen: anders valt juist "over de datum" eraf. De
     lijsttabel kapt hem standaard af met puntjes, vandaar de extra klasse. */
  .tabel.vriezertabel .smalregel{display:block;margin:.15rem 0 .4rem;
    white-space:normal;overflow:visible;text-overflow:clip}
  /* De cel is hier een blok; zonder deze regel valt het ronde knopje onder de
     andere twee en staan de knoppen rechts in plaats van onder de naam. */
  .vriezertabel td.vriezeracties{display:flex;justify-content:flex-start;flex-wrap:wrap;
    text-align:left;margin-top:.25rem}
  /* Het paneel is hier geen rij meer maar een blok onder het kaartje. */
  .vriezertabel tr.paneelrij{border-top:none;padding:0 0 .55rem}
  .vriezertabel .paneelrij td{border-radius:10px;padding:.6rem}
  .rijpaneel label{flex:1 1 7rem}
  .rijpaneel input,.rijpaneel select{width:100%;min-width:0}
  .rijpaneel label.kort input{width:100%}
}
/* Op een breed scherm staan de kolomkoppen er; dan is een keuzevak overbodig. */
@media (min-width:641px){
  .smalsorteer{display:none}
}
/* De naam van een editie krijgt de ruimte; de tellingen zijn twee cijfers en
   hebben aan een smalle kolom genoeg. */
.editietabel .titel{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.editietabel .titel:hover{color:var(--tomaat);border-color:var(--tomaat)}
.editietabel th:nth-child(1){width:40%}
.editietabel th:nth-child(2){width:14%}
.editietabel th:nth-child(3),.editietabel th:nth-child(4){width:12%}
.editietabel th:nth-child(5){width:12%}
.editietabel th:last-child{width:10%}
/* De tabel mag de hele breedte hebben, een invulformulier niet: een naamveld
   van duizend pixels leest slechter dan een van vijfhonderd. */
.editieform{max-width:46rem}

.gevaarlink{color:var(--tomaat);border-color:color-mix(in srgb,var(--tomaat) 35%,var(--line))}
.vriezerform .rij label{flex:1;min-width:9rem}
/* Op een telefoon is een halve regel te smal voor een omschrijving of een
   receptnaam: die krijgen de hele breedte, de korte velden staan naast elkaar. */
@media (max-width:560px){
  .vriezerform .rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .vriezerform .rij label{min-width:0;margin:0}
  .vriezerform .rij:first-of-type label{grid-column:1 / -1}
  /* Een datumveld heeft in iOS een eigen breedte die niet meegeeft; naast een
     ander veld plakt hij er dan tegenaan. Daarom allebei een eigen regel. */
  .vriezerform .rij label.datum,.vriezerform .rij label:last-child{grid-column:1 / -1}
}

/* ---------- kookstand ---------- */
body.kookscherm .onderbalk,body.kookscherm .siteheader nav{display:none}
.kookkop{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.kookkop .kooktitel{font-weight:700;font-size:1.05rem;flex:1;min-width:0}
/* Per stap aanvinken wat je erbij nodig hebt; dicht tenzij er iets aan staat,
   anders is een recept van vijftien stappen een muur van vinkjes. */
.stapkoppel{flex:1 1 14rem;margin:0}
.stapkoppel summary{font-size:.8rem;color:var(--muted);cursor:pointer}
/* Dezelfde kolommen als bij de andere vinkjes: achter elkaar doorlopen
   breekt af op willekeurige plekken en dan zie je niet meer wat aanstaat. */
.stapkeuze{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));
  gap:.2rem .7rem;margin:.25rem 0 .1rem}
.stapkeuze .vinkje{margin:0;min-width:0;align-items:flex-start;line-height:1.3}
.stapkeuze .vinkje input{margin-top:.12rem}
.stapkoppel .vinkje{font-size:.82rem}
.kookvoortgang{color:var(--muted);font-size:.8rem;margin:.2rem 0 .6rem}
.kookspullen{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .8rem}
.kookspullen li{background:var(--zacht);border-radius:999px;padding:.3rem .8rem;font-size:1rem}
.kookstap{font-size:clamp(1.25rem,4.5vw,2rem);line-height:1.35;margin:.4rem 0 1.2rem}
.timer{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;margin-bottom:1rem}
.timer .klok{font-size:clamp(1.6rem,7vw,2.6rem);font-variant-numeric:tabular-nums;font-weight:700}
.timer .knoppen{display:none;gap:.5rem;flex-wrap:wrap}
.timer.werkt .knoppen{display:flex}
.timer.loopt{border-color:var(--groen)}
.timer.af{background:color-mix(in srgb,var(--groen) 12%,var(--card));border-color:var(--groen)}
.alleingredienten{margin-bottom:1.2rem}
.timeruitleg{margin:-.6rem 0 1rem;font-size:.78rem}
/* De wekkers die nog lopen, ook die van een stap waar je niet meer staat. */
/* display:flex wint van het hidden-attribuut, dus dat zeggen we er apart bij. */
.wekkerbalk{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;
  gap:.3rem;padding:.5rem .8rem calc(.5rem + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 18px -12px rgba(43,36,32,.5)}
.wekkerregel{display:flex;align-items:center;gap:.6rem}
.wekkernaar{flex:1;min-width:0;text-align:left;background:none;border:none;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--ink);font-variant-numeric:tabular-nums;padding:.2rem 0}
.wekkerregel.af .wekkernaar{color:var(--groen);font-weight:700}
body.kookscherm{padding-bottom:5rem}
@media print{.wekkerbalk{display:none!important}}
.kookknoppen{display:flex;justify-content:space-between;gap:.8rem;margin:1.4rem 0 .6rem}
.knop.groot{padding:.9rem 1.6rem;font-size:1.05rem;border-radius:14px}
.kookeind{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.4rem}
.kookeind form{margin:0}
.kookstandknop{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .8rem}
.stappen .wachtje{display:inline-block;margin-left:.4rem;font-size:.72rem;color:var(--muted);
  background:var(--zacht);border-radius:999px;padding:.1rem .5rem}
/* Een stap is een blok met een nummer ervoor. Het tekstvak was twee regels
   hoog en stond naast de wachttijd; dan typ je een halve zin per regel en is
   er op een telefoon niets meer van over. Nu krijgt de tekst de volle breedte
   en staat wat erbij hoort eronder. */
.stapregel{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .6rem;
  padding:.5rem .6rem;background:var(--card);border:1px solid var(--line);border-radius:10px}
.stapnr{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  background:var(--zacht);color:var(--groen);font-family:Fraunces,Georgia,serif;font-size:.9rem;margin-top:.15rem}
.stapvak{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.stapregel textarea{margin:0;width:100%;min-height:5rem;resize:vertical}
.stapvoet{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:flex-end}
.stapregel .wachttijd{margin:0;font-size:.7rem;color:var(--muted);display:flex;flex-direction:column;gap:.15rem;width:8rem}
.stapregel .wachttijd input{margin:0;width:100%}
@media print{.kookstandknop,.kookknoppen,.timer{display:none!important}}

/* ---------- winkelstand en gedeelde lijst ---------- */
body.winkelscherm .onderbalk,body.winkelscherm .siteheader nav{display:none}
body.gedeeld{padding:0 0 2rem}
.winkelkop{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.winkelkop .kooktitel{font-weight:700;font-size:1.05rem;flex:1;min-width:0}
/* Op een telefoon houden Terug, de telling en de knop zoveel breedte over dat
   er voor de titel een paar pixels overblijven en de woorden over de rest
   heen vallen. Dan maar de titel op een eigen regel erboven. */
@media (max-width:560px){
  .winkelkop{row-gap:.45rem}
  .winkelkop .kooktitel{flex:1 1 100%;order:-1;font-size:1.15rem}
  .winkelkop .knop.klein{margin-left:auto}
}
.winkellijst{list-style:none;margin:0 0 1rem;padding:0}
.winkellijst li{margin:0}
.winkellijst form{margin:0}
.winkelschap{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  margin:1rem 0 .3rem}
.winkelregel{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.85rem .9rem;
  margin-bottom:.45rem;font:inherit;color:inherit}
.winkelregel .vakje{flex:none;width:2rem;height:2rem;border:2px solid var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--groen)}
.winkelregel .wnaam{flex:1;min-width:0;font-size:1.05rem}
.winkelregel .whoev{flex:none;color:var(--muted)}
.winkellijst li.af .winkelregel{opacity:.55}
.winkellijst li.af .wnaam{text-decoration:line-through}
.winkellijst.gedaan .vakje{border-color:var(--groen);background:color-mix(in srgb,var(--groen) 12%,transparent)}
.winkeltoe{display:flex;gap:.5rem;margin:1rem 0}
.winkeltoe input{flex:1;min-width:0;margin:0}
.winkelknop,.groepknop{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
/* De knoppen van de boodschappenlijst: één rij, allemaal even hoog. */
.lijstacties{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 .4rem}
.lijstacties .knop{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;padding:.5rem 1rem}
/* Op een telefoon vullen de knoppen hun regel: anders staat de lange knop
   alleen op de eerste regel en blijft er rechts van de andere twee een gat. */
@media (max-width:560px){
  .lijstacties .knop{flex:1 1 auto;justify-content:center}
}
.lijstuitleg{margin:0 0 1.1rem}
/* Knoppen boven een tekstveld: vet, cursief, lijstje. Het veld blijft gewone
   tekst, dus dit zet alleen de tekens erin. */
.opmaakbalk{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.3rem 0 .25rem}
.opmaakknop{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.2rem .7rem;font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer}
.opmaakknop:hover{border-color:var(--groen);color:var(--groen)}
.opmaakbalk .meta{font-size:.72rem}
/* Het veld waarin je de opmaak ziet terwijl je typt. Het ziet eruit als elk
   ander invoervak; wat eruit gaat is gewone tekst met tekens erin. */
.opmaakvak{border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);
  padding:.5rem .6rem;min-height:8rem;font-size:.95rem;line-height:1.5;overflow-wrap:break-word}
.opmaakvak:focus{outline:2px solid var(--groen);outline-offset:1px}
.opmaakvak p{margin:0 0 .6rem}
.opmaakvak p:last-child{margin-bottom:0}
.opmaakvak ul{margin:0 0 .6rem;padding-left:1.2rem}
.opmaakvak b{font-weight:700}
/* De tekst zoals de koper hem ziet. */
.verkooptekst{color:var(--muted);font-size:.9rem}
.verkooptekst p{margin:0 0 .6rem}
.verkooptekst ul{margin:0 0 .6rem;padding-left:1.1rem}
.verkooptekst b{color:var(--ink)}
.kastknop{background:none;border:1px solid var(--line);border-radius:999px;font-size:.7rem;
  color:var(--muted);cursor:pointer;padding:.1rem .5rem}
.eigenregel{display:flex;gap:.5rem;width:100%}
.eigenregel input{flex:1;min-width:0;margin:0}
.delenblok{margin:1rem 0}
.delenblok form{margin:.3rem 0}
.verselink input{width:100%;font-size:.8rem}
@media print{.winkelknop,.lijstacties,.lijstuitleg,.delenblok,.eigenregel{display:none!important}}

/* ---------- recept van een foto ---------- */
.fotoaanbod{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--zacht);
  border-radius:12px;padding:.6rem .8rem;margin-bottom:.8rem}
.fotoaanbod img{width:96px;height:72px;object-fit:cover;border-radius:8px}
.fotoaanbod .vinkje{margin:0}

/* ---------- credits ---------- */
.pakketraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem;margin-bottom:1rem}
.pakket{display:flex;flex-direction:column;gap:.3rem;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:.9rem;margin:0;box-shadow:var(--schaduw);min-width:0}
.pakket .prijs{font-size:1.1rem;font-weight:700}
.pakket .knop{margin-top:.4rem}
.pakketten{list-style:none;margin:.4rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pakketten li{background:var(--zacht);border-radius:999px;padding:.3rem .8rem;font-size:.82rem}
.pakketrij{border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.6rem}
.meldrij{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 1.4rem}
.meldrij input{flex:1;min-width:9rem;margin:0}
.rechts{text-align:right}

/* ---------- wie eet er mee ---------- */
/* Dezelfde kantlijn en hetzelfde bolletje als de regels eromheen; met het
   driehoekje van de browser stond deze regel een stuk verder naar links. */
.aanwezig-blok{margin:0;padding:.35rem .7rem;font-size:.82rem}
.aanwezig-blok summary{cursor:pointer;color:var(--muted);list-style:none}
.aanwezig-blok summary::-webkit-details-marker{display:none}
.aanwezig-blok summary::before{content:"◦ ";color:var(--groen)}
.aanwezig-blok[open] summary::before{content:"• "}
.aanwezig-blok summary b{color:var(--ink)}
/* Deze regels staan onder elkaar, elk met de naam links en de knoppen rechts.
   De klasse alleen is niet genoeg: form.inline is specifieker en zet ze dan
   allemaal achter elkaar op één regel. */
form.inline.aanwezigrij{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.35rem 0;width:100%}
.aanwezigrij .wie{flex:1;min-width:6rem;display:flex;align-items:center;gap:.35rem}
.aanwezigrij .aanname{font-size:.72rem;color:var(--muted);white-space:nowrap}
.knop.leeg.klein.aan{background:var(--groen);border-color:var(--groen);color:#fff}
@media print{.aanwezig-blok{display:none}}

/* ---------- wat iemand niet lust ---------- */
.lustniet{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:.1rem 0 .4rem;padding:0 .7rem;
  font-size:.76rem;color:var(--muted)}
.lustniet span::before{content:"◦ ";color:var(--tomaat)}
.smaaklijst{list-style:none;margin:.2rem 0 .5rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.smaaklijst li{display:flex;align-items:center;gap:.2rem;background:var(--zacht);
  border-radius:999px;padding:.15rem .3rem .15rem .7rem;font-size:.82rem}
.smaaklijst form{margin:0}
/* Met form.inline erbij is dit anders een inline-flex met alles gecentreerd,
   en dan hangt de knop halverwege het label in plaats van naast het veld. */
form.inline.smaakkies{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;width:100%}
/* Het zoekveld mag de regel vullen; een halve productnaam is niet te lezen. */
.smaakkies .inline-label{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2rem;margin:0}
.smaakkies .knop{flex:none;align-self:flex-end}
/* De suggesties vallen onder veld en knop, over de hele breedte. */
.smaakkies .kiestips{flex:0 0 100%}
/* Twee velden met suggesties naast elkaar, allebei met hun eigen lijstje
   eronder: dus elk veld zijn eigen kolom. */
.samenvoegform{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;margin:0 0 .4rem}
.samenvoegform .inline-label{display:flex;flex-direction:column;gap:.2rem;flex:1 1 12rem;
  min-width:0;margin:0;position:relative}
.samenvoegform input{width:100%;margin:0}
.samenvoegform .kiestips{position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:.4rem;box-shadow:var(--schaduw)}
.samenvoegform .knop{flex:none}
/* In een ingrediëntregel valt het lijstje onder de hele regel. */
.ing-rij .kiestips{grid-column:1 / -1}
/* De knop stond onder een kopje "Verwijderen", en dat kopje zei niets wat de
   knop zelf niet al zegt. Wel lucht erboven en een streep: dit is de enige
   knop op deze pagina die niet terug te draaien is.
   form.inline zet margin:0 en dat weegt zwaarder dan een losse klasse,
   vandaar form.inline ervoor; anders doet deze regel niets. */
form.inline.verwijderrij{margin:1.6rem 0 0;padding-top:1.2rem;width:100%;
  border-top:1px solid var(--line)}
/* Mijn producten: een kaartje per product, met dezelfde velden en hetzelfde
   NEVO-blok als bij een ingredient in het receptformulier. */
/* Kringen: kaartjes zoals de koks, en de leden als lijst met een kruisje. */
/* Wat er nieuw met je gedeeld is, boven het kookboek. */
.nieuwgedeeld{border-left:3px solid var(--groen);padding-left:.7rem}
.nieuwgedeeld a{color:var(--ink)}
.nieuwgedeeld .meta{font-size:.78rem}

.kringrij{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem;margin:.8rem 0 1.2rem}
.kringkaart{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}
.kringkaart:hover{border-color:var(--groen)}
.kringkaart.nu{border-color:var(--groen);background:var(--zacht)}
.kringkaart .kz-titel{font-family:Fraunces,Georgia,serif;font-size:1rem}
.kringleden{list-style:none;margin:.4rem 0 1rem;padding:0}
.kringleden li{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.kringleden .lidnaam{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.kringleden .meta{font-size:.74rem;overflow-wrap:anywhere}
/* Met wie een recept gedeeld is, op de receptpagina. */
.delingenlijst{list-style:none;margin:.3rem 0 .8rem;padding:0}
.delingenlijst li{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;border-bottom:1px solid var(--line);font-size:.86rem}
.delingenlijst li > span{flex:1;min-width:0}
.delingenlijst .meta{font-size:.74rem}

.toonkeuze{display:flex;gap:.4rem;margin:0 0 .9rem}
.toonkeuze a{padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;color:var(--ink);text-decoration:none;background:var(--card)}
.toonkeuze a:hover{border-color:var(--groen);color:var(--groen)}
.toonkeuze a.nu{background:var(--groen);border-color:var(--groen);color:#fff}
.productlijst{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.productkaart{padding:.6rem .7rem;background:var(--card);border:1px solid var(--line);border-radius:10px}
.productkop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .6rem;margin-bottom:.45rem}
.productkop b{font-size:.95rem}
.productkop .label{font-size:.68rem}
.productvelden{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-start}
.productvelden .ingveld{flex:0 0 11rem}
.productvelden .ingnevoblok{flex:1 1 22rem}
.productnu{gap:.15rem}
.productnu b{font-size:.84rem;color:var(--ink)}
.productkaart .ingwijzig{margin-top:.5rem;padding-top:.45rem}
@media (max-width:620px){
  .productvelden .ingveld,.productvelden .ingnevoblok{flex:1 1 100%}
}
/* De beelden bij een recept in het formulier: een kaartje per beeld met het
   kruisje in de hoek, de volgorde eronder en bij een video de knoppen erbij. */
.fotokaart{display:flex;flex-direction:column;gap:.3rem;width:132px;margin:0;font-size:.72rem;color:var(--muted)}
.fotokaart .fotobeeld{width:120px}
.fotokaart .fotonu{width:120px;height:82px;border-radius:9px;object-fit:cover;
  border:1px solid var(--line);background:var(--zacht);display:grid;place-items:center}
.fotokaart .beeldleeg .ico{width:26px;height:26px;color:var(--groen)}
.fotokaart .fotoweg:checked ~ .fotonu{opacity:.35;filter:grayscale(1)}
.fotokaart .beeldsoort{font-weight:600;color:var(--ink)}
.fotokaart .beeldsoort .meta{font-weight:400;overflow-wrap:anywhere}
.fotokaart .beeldveld{display:flex;flex-direction:column;gap:.1rem;margin:0;font-size:.7rem}
.fotokaart .beeldveld input{margin:0;font-size:.8rem}
.fotokaart .vinkje{font-size:.7rem;align-items:flex-start;line-height:1.25}
.fotokaart .fotowegtekst{font-size:.68rem}
.videovak .rij{margin-bottom:.2rem}
/* Onder elkaar, net als de seizoenen eronder: drie keuzes naast elkaar
   breken op een telefoon halverwege af en dat leest niet. */
.videokeuze{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}
.videokeuze .vinkje{margin:0}
.videodeel{padding-top:.4rem;border-top:1px dashed var(--line)}
.videodeel > label:first-child{margin-top:0}
.videodeel .vinkje{margin-right:1.1rem}
.videodeel .meta{margin-top:.35rem;line-height:1.4}
/* Pijltjes om een beeld op te schuiven. Ze komen van app.js; zonder
   JavaScript blijft het nummerveld staan en werkt het daarmee. */
.beeldpijlen{display:flex;align-items:center;gap:.25rem}
.beeldpijlen button{flex:0 0 2.1rem;padding:.25rem 0;border:1px solid var(--line);border-radius:7px;
  background:var(--card);color:var(--ink);font-size:1rem;line-height:1.1;cursor:pointer}
/* Waar dit beeld staat, tussen de pijltjes in. Op een telefoon staan de
   kaartjes naast en onder elkaar; dan zegt een pijltje alleen te weinig. */
.beeldplek{flex:1;text-align:center;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.beeldpijlen button:hover:not(:disabled){border-color:var(--groen);color:var(--groen)}
.beeldpijlen button:disabled{opacity:.35;cursor:default}

/* De video in het recept zelf. Een eigen filmpje en de speler van buiten
   krijgen dezelfde maat als een foto in de galerij. */
.galerij video,.videokader{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;
  background:#000;display:block}
.videokader{border:0}
/* Het knopje dat de speler ophaalt: de afbeelding met een driehoek erop. */
.videoknop{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;background:var(--zacht);cursor:pointer;aspect-ratio:16/9}
.videoknop img{width:100%;height:100%;object-fit:cover;display:block}
.videoplaat{position:absolute;inset:0;display:grid;place-items:center;font-size:2.2rem;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.videoknop .videotekst{position:absolute;left:0;right:0;bottom:0;padding:.35rem .5rem;
  background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;line-height:1.3;text-align:left}
.videoknop:hover{border-color:var(--groen)}
/* Het tegoedoverzicht: plus is groen, min is gewoon donker. De melding staat
   in de rij zelf en mag niet de halve tabel opeisen. */
.tegoedtabel .erbij{color:var(--groen);font-weight:600}
.tegoedtabel .eraf{color:var(--ink)}
.tegoedtabel td .meta{display:block;font-size:.74rem;line-height:1.35}
/* Een toelichting als "recept van een foto: ..." mag afbreken; anders wordt
   de tabel zo breed als de langste titel. */
.tegoedtabel td[data-kop="Wat"]{white-space:normal;min-width:11rem;max-width:22rem}
.tegoedtabel .meldrij{gap:.35rem}
.tegoedtabel .meldrij input[name=reden]{width:11rem;font-size:.8rem}
.tegoedtabel .meldrij .knop{white-space:nowrap;font-size:.8rem}
.smaakkies input{width:100%;margin:0}
/* Veld en knop op één regel, net als bij "Iemand toevoegen" eronder. Past het
   niet, dan valt de knop onder het veld en blijft hij aan dezelfde kantlijn
   staan; een knop die in zijn eentje rechts hangt, leest als een fout. */
.uitnodigform{flex-wrap:wrap;gap:.4rem;align-items:center}
.uitnodigform input[type=email]{flex:1 1 9rem;min-width:0;width:auto}
.uitnodigform .knop{flex:none}

/* Suggesties als knopjes onder het veld. Een datalist is op een telefoon
   nauwelijks te zien, en dan lijkt het veld vrij in te vullen terwijl het dat
   niet is. Zonder JavaScript blijft de datalist staan en blijft dit leeg. */
.kiestips{width:100%;display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 0}
.kiestips.dicht{display:none}
.kiestips .tip{background:var(--zacht);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .7rem;font:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kiestips .tip:hover,.kiestips .tip:focus-visible{border-color:var(--groen);color:var(--groen)}
.kiestips .tipleeg{font-size:.85rem;color:var(--muted)}
/* Knopjes met het aantal erachter, boven de lijst: wat er te halen valt en
   hoeveel, zonder een keuzelijst open te klappen. */
.snelfilters{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem}
.snelfilter{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.35rem .8rem;font-size:.84rem;color:var(--ink)}
.snelfilter:hover{border-color:var(--groen);color:var(--groen)}
.snelfilter .hoeveel{color:var(--muted);font-size:.78rem}
.snelfilter.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.snelfilter.aan .hoeveel{color:#fff;opacity:.75}
.snelfilter.aan::after{content:"×";margin-left:.1rem;font-size:1rem;line-height:1}
.smaakkies input.mist{border-color:var(--tomaat)}
/* Eetwijze en groepen: de keuze hoeft de regel niet te vullen. */
.smaakwijze select{max-width:18rem}
.smaakform{margin-bottom:.4rem}
.vinkje.vanzelf{opacity:.6}
.apartkeuze{font-size:.78rem}
@media print{.lustniet{display:none}}
/* Een bedrag: het euroteken staat vast voor het veld, de centen achter een komma. */
.bedragveld{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);
  border-radius:7px;background:var(--card);padding:0 .5rem;height:2.2rem}
.bedragveld::before{content:"€";color:var(--muted);font-size:.9rem}
.bedragveld input{border:none;background:none;width:4.5rem;margin:0;padding:.35rem 0;height:auto}
.bedragveld input:focus{outline:none;box-shadow:none}
.bedragveld:focus-within{border-color:var(--groen);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--groen) 18%,transparent)}
form.inline.bedragrij{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.4rem 0;width:100%;
  border-top:1px solid var(--line);padding-top:.5rem}
.bedragrij .veldkop{font-size:.86rem;color:var(--muted)}
.maxveld{margin:0;font-size:.72rem;display:flex;flex-direction:column;gap:.15rem}
.maxveld input{margin:0;font-size:.82rem}
.betaalrij .wie{color:var(--muted);font-size:.78rem}
/* Het losmaken van de telling hoort bij het aantal, niet bij de bijdrage. */
.aanwezig-blok .losknop{display:flex;margin:.5rem 0 .2rem}
form.inline.bijdrageform{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.bijdrageform .kort{flex:0 0 7rem;margin:0;font-size:.72rem}
.betaalregel{font-size:.82rem;background:color-mix(in srgb,var(--tomaat) 7%,var(--card));
  border-radius:8px;padding:.4rem .6rem;margin:.3rem 0}
.betaalregel.af{background:color-mix(in srgb,var(--groen) 9%,var(--card))}