/* 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}
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],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]{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}
/* 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}
.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}
.geplaatst .naam{flex:1;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink);text-decoration:none}
.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}
  .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}

.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)}
.ing-rij{display:grid;grid-template-columns:1fr 5rem 6rem;gap:.35rem;margin-bottom:.35rem}
.ing-rij input,.ing-rij select{margin:0}
.ing-rij input[name="ing_weergave[]"]{grid-column:1 / -1}
.ing-rij .apartkeuze{grid-column:1 / -1}
#stappen textarea{margin-bottom:.35rem}
.formulier .knop{margin-top:.4rem}

@media (min-width:620px){
  .ing-rij{grid-template-columns:1fr 5rem 6rem 1.4fr 8.5rem}
  .ing-rij input:last-child{grid-column:auto}
}
@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}
/* 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}
.porties input{width:4rem;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 ---------- */
.eterkaart{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;margin-bottom:.5rem}
.eterkaart summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  flex-wrap:wrap;row-gap:.3rem}
.eterkaart summary .bol,.eterkaart summary .label{flex:none}
.eterkaart summary .bnaam{flex:0 1 auto;min-width:0}
@media (max-width:560px){
  /* Het pijltje zegt al dat je erop kunt drukken. */
  .eterkaart summary .open-hint{display:none}
}
.eterkaart summary::-webkit-details-marker{display:none}
.eterkaart[open] summary{margin-bottom:.4rem}
.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}
.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}
.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)}
.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}
.tabelhouder{overflow-x:auto}
/* Een tabel die op een telefoon niet te lezen is als tabel: elke regel wordt
   een kaartje met het kopje voor de waarde. Scheelt zijwaarts schuiven. */
@media (max-width:640px){
  .tabel.stapel thead{display:none}
  .tabel.stapel,.tabel.stapel tbody,.tabel.stapel tr,.tabel.stapel td{display:block}
  .tabelhouder .tabel.stapel{min-width:0}
  .tabel.stapel tr{border-top:1px solid var(--line);padding:.55rem 0}
  .tabel.stapel td{border:none;padding:.08rem 0}
  .tabel.stapel td:empty{display:none}
  .tabel.stapel td[data-kop]::before{content:attr(data-kop) ": ";color:var(--muted);font-size:.78rem}
  .tabel.stapel td.rechts,.tabel.stapel td.getal{text-align:left}
  .tabel.stapel td.rechts{margin-top:.4rem}
  .tabel.stapel tr.nu{background:var(--zacht);border-radius:10px;padding:.55rem .5rem}
}
@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}

.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,.eterkaart,.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)}
.eterkaart{padding:.7rem .9rem;border-radius:14px}
.eterkaart summary{padding:.2rem 0;border-radius:8px}
.eterkaart summary:focus{outline:none}
.eterkaart summary:focus-visible{outline:2px solid var(--groen);outline-offset:3px}
.eterkaart summary .bnaam{font-family:Fraunces;font-weight:600;font-size:1.05rem}
.eterkaart summary::after{content:"›";margin-left:auto;color:var(--muted);font-size:1.3rem;line-height:1;
  transition:transform .15s;transform:rotate(90deg)}
.eterkaart[open] summary::after{transform:rotate(-90deg)}
.eterkaart summary .open-hint{margin-left:auto}
.eterkaart[open] summary .open-hint{display:none}
.eterkaart summary::after{margin-left:.5rem}
.eterkaart .formulier .seizoenen{margin-top:.3rem}
.doelrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem .7rem}
.doelrij label{min-width:0;margin:.2rem 0}
.eterkaart .acties{margin:.6rem 0 .2rem}
.eterkaart .formulier .knop{margin-top:0}

/* ---------- 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)}
.menulijst a{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{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}
.fotovak > div{flex:1;min-width:14rem}
.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}
.fotokaart{display:block;margin:0;width:120px;font-size:.72rem;color:var(--muted)}
.fotokaart img{width:120px;height:82px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.fotokaart span{display:flex;align-items:center;gap:.3rem;margin-top:.2rem}
.fotokaart input{width:auto;margin:0}
.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{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{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[]"]{grid-column:1 / -1;font-weight:500}
  .ing-rij input[name="ing_weergave[]"]{grid-column:1 / -1}
  .ing-rij .apartkeuze{grid-column:1 / -1}
  .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 ---------- */
.koppelrij{display:flex;align-items:center;gap:.5rem;margin:0;flex-wrap:wrap}
.koppelrij select{flex:1;min-width:11rem;max-width:100%;margin:0;font-size:.82rem}
.koppelrij button{flex:none}
.koppeltabel td{vertical-align:middle}

/* ---------- 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;gap:.5rem}
.zoekrij .zoek{flex:1;min-width:0;margin:0}
.zoekrij .knop{flex:none}
/* 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:"▴"}

/* ---------- 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}}

/* 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)}

/* 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}
.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);opacity:.85}
.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 ---------- */
/* De voorraad staat in een tabel met een veld per kolom. De formulieren zelf
   staan onder de tabel, want tussen de rijen mag er geen staan. */
.vriezertabel td{vertical-align:middle}
.vriezertabel .naamcel{width:100%}
.vriezertabel .naamcel b{margin-right:.3rem}
.vriezertabel .naamcel .meta{margin-left:.3rem}
.vriezertabel .veldcel{padding-right:.5rem}
.vriezertabel .veldcel input{margin:0;width:100%;min-width:5rem;font-size:.85rem;padding:.35rem .5rem}
.vriezertabel .kortcel input{min-width:3.5rem;width:4.5rem;text-align:right}
.vriezertabel tr.overdatum td{background:color-mix(in srgb,var(--tomaat) 6%,var(--card))}
.vriezertabel .over{color:var(--tomaat)}
.vriezertabel .smalregel{display:none}
.vriezeracties{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.vriezeracties .knop{padding:.35rem .8rem;font-size:.78rem}
.vriezeracties .knopje{width:32px;height:32px}
/* Op een smal scherm is een tabel van zes kolommen niet te lezen: dan wordt
   elke regel een kaartje met de velden naast elkaar eronder. */
@media (max-width:640px){
  .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 .smalregel{display:block;margin:.1rem 0 .35rem}
  .vriezertabel .veldcel{display:inline-block;width:32%;padding-right:.4rem;vertical-align:top}
  .vriezertabel .veldcel input{width:100%}
  .vriezertabel .kortcel input{width:100%;text-align:left}
  .vriezertabel .veldcel .verstopt{position:static!important;left:auto!important;width:auto;height:auto;
    opacity:1;display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .vriezeracties{justify-content:flex-start;margin-top:.4rem}
}
.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}
.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[hidden]{display:none}
.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}
.stapregel{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.4rem}
.stapregel textarea{flex:1;min-width:0;margin:0}
.stapregel .wachttijd{margin:0;font-size:.72rem;display:flex;flex-direction:column;gap:.2rem;width:5.5rem}
.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}
.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}
.lijstuitleg{margin:0 0 1.1rem}
.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 ---------- */
.aanwezig-blok{margin:.2rem 0 .4rem;font-size:.82rem}
.aanwezig-blok summary{cursor:pointer;color:var(--muted)}
.aanwezig-blok summary b{color:var(--ink)}
.aanwezigrij{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.35rem 0}
.aanwezigrij .wie{flex:1;min-width:6rem;display:flex;align-items:center;gap:.35rem}
.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}
.smaakkies{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}
/* 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}
.smaakkies input{width:100%;margin:0}
/* Een e-mailadres is lang; op een telefoon krijgt het veld de hele regel en
   staat de knop eronder in plaats van ernaast te verschrompelen. */
.uitnodigform{flex-wrap:wrap;gap:.4rem}
.uitnodigform input[type=email]{flex:1 1 14rem;min-width:0;width:auto}
@media (max-width:560px){
  .uitnodigform input[type=email]{flex:1 1 100%}
  .uitnodigform .knop{margin-left:auto}
}
/* 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)}
.bedragrij{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.4rem 0}
.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}
.bijdrageform{display:flex;gap:.5rem;align-items:flex-end;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))}