/* ==================================================================
   Kim Coenraad's Lifestyle - vormgeving publieke site
   Opgebouwd vanaf de telefoon: de basisregels zijn de mobiele weergave,
   de media-regels onderaan verbreden het naar tablet en laptop.
   ================================================================== */

:root{
  --creme:#FAF6F0;
  --zand:#EFE7DA;
  --zand-diep:#E3D8C6;
  --olijf:#5F6F4E;
  --olijf-donker:#404B35;
  --olijf-licht:#8B9A78;
  --klei:#C2724A;
  --klei-licht:#E5A883;
  --hart:#B24A2C;        /* dieper rood van dezelfde familie, voor bewaren */
  --inkt:#2E312B;
  --grijs:#6E6A61;
  --wit:#FFFFFF;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --rand:1px solid rgba(95,111,78,.16);
  --rond-s:12px;
  --rond-m:18px;
  --rond-l:26px;
  --schaduw:0 18px 40px -28px rgba(46,49,43,.55);
  --schaduw-diep:0 30px 60px -34px rgba(46,49,43,.6);

  --breed:1320px;
  /* De zijmarge van alles. In liggende stand schuift een iPhone zijn
     inkeping en afgeronde hoeken over de pagina heen; de meta-regel
     viewport-fit=cover laat dat bewust toe, omdat een foto dan wel tot
     de rand doorloopt. Daarom is de marge minstens zo breed als die
     inkeping, anders valt de eerste letter van elke regel erachter.
     Rechtop is die inkeping nul en verandert er niets. */
  --kant-basis:clamp(1.15rem,5vw,2.5rem);
  --kant:max(var(--kant-basis), env(safe-area-inset-left,0px), env(safe-area-inset-right,0px));
  --kop-hoogte:72px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* Standaard legt een telefoon een grijsblauw blok over alles wat je
   aantikt, ook over een hele receptkaart. Een zacht groen vleugje in
   de huisstijl doet hetzelfde werk zonder de foto te vertroebelen. */
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:rgba(95,111,78,.14)}

body{
  margin:0;
  background:var(--creme);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Op korte paginas (inloggen, bedankt) zweefde de voet halverwege
     het scherm. Als kolom blijft hij altijd onderaan staan. */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

main{flex:1 0 auto}

img{max-width:100%; height:auto; display:block}
a{color:var(--olijf-donker)}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.015em;
  margin:0 0 .6rem;
  color:var(--inkt);
}
/* In een kolom van 160 pixels - twee receptkaarten naast elkaar op een
   telefoon - is "gekarameliseerde" breder dan de kaart. Een kop mag
   dan midden in een woord afbreken; dat is nog altijd netter dan een
   letter die over de rand hangt. */
h1,h2,h3,h4{overflow-wrap:break-word}
h1{font-size:clamp(2rem,7.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,5.4vw,2.4rem)}
h3{font-size:clamp(1.15rem,3.8vw,1.45rem)}
/* Een kop die bewust een maatje kleiner staat dan de rest. */
.kleinere-kop{font-size:clamp(1.35rem,4.2vw,1.85rem)}
p{margin:0 0 1rem}

.omhulsel{width:100%; max-width:var(--breed); margin:0 auto; padding-inline:var(--kant)}
.smal{max-width:760px; margin-inline:auto}
.midden{text-align:center}
.verborgen{display:none !important}

/* Balkje voor de beheerder als de onderhoudsstand aanstaat */
.onderhoud-baken{
  background:var(--klei); color:#fff; text-align:center;
  padding:.5rem 1rem; font-size:.85rem; font-weight:500;
}
.onderhoud-baken a{color:#fff; font-weight:700}

/* Alleen voor schermlezers */
.schermlezer{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.overslaan{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--olijf); color:var(--creme); padding:.8rem 1.2rem; border-radius:0 0 12px 0;
}
.overslaan:focus{left:0}

/* ------------------------------------------------------------------
   Kop en menu
   ------------------------------------------------------------------ */
.kop{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* De achtergrond en het waas liggen op een laagje onder de balk, niet op
   de balk zelf. Een element met backdrop-filter wordt namelijk het
   ankerpunt voor alles wat eronder position:fixed is, en dan knipt hij
   het uitklapmenu af tot de hoogte van de balk. */
.kop::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(250,246,240,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.kop.geplakt{border-bottom-color:rgba(95,111,78,.14); box-shadow:0 10px 30px -26px rgba(46,49,43,.7)}
.kop-binnen{
  height:var(--kop-hoogte);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.merk{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; min-width:0}
/* Eigen logo in plaats van de beginletters */
/* Het logo draagt naast de naam ook een slogan en twee sierstreepjes.
   Daar is hoogte voor nodig, dus de balk is meegegroeid: 72 pixels op
   een telefoon, 88 op een breed scherm. */
.merk-logo{height:54px; width:auto; max-width:min(64vw, 320px); object-fit:contain}
@media (min-width:900px){ .merk-logo{height:70px} }
.merk-teken{
  width:38px; height:38px; flex:none; border-radius:12px;
  background:var(--olijf); color:var(--creme);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.01em;
}
.merk-naam{font-family:var(--serif); font-size:1.02rem; font-weight:600; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.merk-sub{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; color:var(--olijf); font-weight:600}
/* Op een telefoon stond de naam afgekapt als "Kim Coenraad's Lifes..."
   terwijl er rechts van het merk nog honderd pixels leeg waren: het
   merk stond vast op zijn eigen breedte. Hier mag het die ruimte wel
   gebruiken, dus past de naam gewoon. Op een breed scherm blijft het
   merk links staan met het menu ernaast, dus daar verandert niets. */
@media (max-width:899.98px){
  .merk{flex:1 1 auto}
}
/* En op de smalste toestellen is ook de spatiëring van het regeltje
   eronder net te ruim; iets krapper past "Recepten · Coaching" weer. */
@media (max-width:360px){
  .merk{gap:.45rem}
  .merk-teken{width:34px; height:34px; font-size:.95rem; border-radius:10px}
  .merk-naam{font-size:.96rem}
  .merk-sub{font-size:.58rem; letter-spacing:.12em; text-indent:.12em}
}

.menu-knop{
  width:44px; height:44px; border:var(--rand); border-radius:12px;
  background:var(--wit); display:grid; place-items:center; cursor:pointer; flex:none;
}
/* Let op de :not(). In de knop zit naast het streepje ook een verborgen
   label voor schermlezers, en .menu-knop span is specifieker dan de regel
   die dat label verbergt. Zonder de uitzondering werd dat label dus zelf
   een streepje: een vierde balkje onder het kruisje. */
.menu-knop span:not(.schermlezer){display:block; width:18px; height:2px; background:var(--inkt); border-radius:2px; position:relative}
.menu-knop span:not(.schermlezer)::before,.menu-knop span:not(.schermlezer)::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--inkt); border-radius:2px; transition:transform .22s ease, top .22s ease}
.menu-knop span:not(.schermlezer)::before{top:-6px}
.menu-knop span:not(.schermlezer)::after{top:6px}
.menu-open .menu-knop span:not(.schermlezer){background:transparent}
.menu-open .menu-knop span:not(.schermlezer)::before{top:0; transform:rotate(45deg)}
.menu-open .menu-knop span:not(.schermlezer)::after{top:0; transform:rotate(-45deg)}

.menu{
  position:fixed; inset:var(--kop-hoogte) 0 0; z-index:55;
  background:var(--creme);
  padding:1.6rem var(--kant) 2.5rem;
  display:flex; flex-direction:column; gap:.2rem;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  overflow-y:auto;
}
.menu-open .menu{transform:none; opacity:1; pointer-events:auto}
.menu a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--serif); font-size:1.5rem; text-decoration:none;
  padding:.85rem 0; border-bottom:1px solid rgba(95,111,78,.12);
}
.menu a[aria-current="page"]{color:var(--olijf)}
.menu a::after{content:"→"; font-family:var(--sans); font-size:1rem; color:var(--olijf-licht)}

/* Word lid is geen menuregel maar een knop. Zonder deze regels krijgt
   hij de opmaak van de lijst: tekst tegen de linkerrand, een pijltje
   erachter en een streep eronder. */
.menu a.knop{
  justify-content:center; border-bottom:0; margin-top:1.4rem;
  font-family:var(--sans); font-size:1rem; font-weight:600;
  padding:1.05rem 1.5rem;
}
.menu a.knop::after{content:none}
.menu-sociaal{display:flex; gap:.7rem; margin-top:2rem; justify-content:center}
.menu-sociaal a{border:0; padding:0}
/* ...maar het Instagram-knopje houdt zijn eigen randje, anders is het
   een wit blokje dat op de crèmekleurige achtergrond zweeft. */
.menu-sociaal a.sociaal-knop{border:var(--rand); width:50px; height:50px}
.menu-sociaal a::after{content:none}

.sociaal-knop{
  width:46px; height:46px; border-radius:14px; border:var(--rand); background:var(--wit);
  display:grid; place-items:center; color:var(--olijf-donker);
}
.sociaal-knop svg{width:20px; height:20px}

/* ------------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------------ */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  font-weight:600; font-size:.97rem; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.knop svg{width:18px; height:18px; flex:none}
.knop-vol{background:var(--olijf); color:var(--creme); box-shadow:0 14px 28px -18px rgba(95,111,78,1)}
.knop-vol:hover{background:var(--olijf-donker); transform:translateY(-2px)}
.knop-klei{background:var(--klei); color:#fff; box-shadow:0 14px 28px -18px rgba(194,114,74,1)}
.knop-klei:hover{filter:brightness(.95); transform:translateY(-2px)}
.knop-rand{border-color:rgba(95,111,78,.35); color:var(--olijf-donker); background:transparent}
.knop-rand:hover{background:rgba(95,111,78,.09); transform:translateY(-2px)}
.knop-klein{padding:.6rem 1.05rem; font-size:.88rem}
.knoppen{display:flex; flex-wrap:wrap; gap:.7rem}

/* ------------------------------------------------------------------
   Bouwstenen
   ------------------------------------------------------------------ */
/* De lucht tussen twee secties. Stond op maximaal 5,5rem, wat op een
   breed scherm neerkwam op bijna 180 pixels tussen twee blokken: het
   volgende blok begon dan net te laat om nog heel in beeld te passen. */
.blok{padding-block:clamp(2.4rem,7vw,4rem)}

/* Een blok dat vlak boven een gekleurde band staat mag krapper: die
   band brengt zelf al rust, en zo begint wat eronder staat eerder. */
.blok-strak{padding-block:clamp(1.6rem,4vw,2.4rem) clamp(1.4rem,3.5vw,2.2rem)}
/* Een gekleurde band die vlak onder een krappe kop begint mag zelf ook
   minder lucht aan de bovenkant. */
.blok-strakker{padding-top:clamp(1.6rem,4vw,2.4rem)}
.blok-zand{background:var(--zand)}
.blok-wit{background:var(--wit)}

.oogje{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-indent:.2em;
  text-transform:uppercase; color:var(--olijf); margin-bottom:.7rem;
}
.blok-kop{margin-bottom:clamp(1.4rem,3.2vw,2.1rem)}
.blok-kop p{color:var(--grijs); max-width:56ch; margin:0}
.blok-kop.midden p{margin-inline:auto}

.streep{width:52px; height:2px; background:var(--klei); border:0; border-radius:2px; margin:0 0 1.1rem}
.midden .streep{margin-inline:auto}

/* ------------------------------------------------------------------
   Startpagina: hoofdvlak
   ------------------------------------------------------------------ */
.held{position:relative; padding-block:clamp(2rem,7vw,4.5rem) clamp(2.5rem,8vw,5rem); overflow:hidden}
.held::before{
  content:""; position:absolute; width:70vmax; height:70vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(95,111,78,.15), transparent 62%);
  top:-34vmax; right:-28vmax; pointer-events:none;
}
.held-binnen{position:relative; display:grid; gap:clamp(1.8rem,6vw,3rem)}
.held-foto{
  position:relative; border-radius:var(--rond-l); overflow:hidden;
  aspect-ratio:4/5; background:var(--zand-diep); box-shadow:var(--schaduw-diep);
}
.held-foto img{width:100%; height:100%; object-fit:cover}
.held-foto-leeg{
  width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:2rem;
  color:var(--olijf); font-family:var(--serif); font-size:1.1rem;
  background:linear-gradient(150deg,var(--zand),var(--zand-diep));
}
.held-label{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--wit); border:var(--rand); border-radius:999px;
  padding:.45rem 1rem; font-size:.78rem; font-weight:600; color:var(--olijf-donker);
  margin-bottom:1.1rem;
}
.held-label::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--klei)}
.held h1{margin-bottom:1rem}
.held-tekst{font-size:1.05rem; color:var(--grijs); max-width:52ch}
.held .knoppen{margin-top:1.6rem}

/* Instagram-strook onder het hoofdvlak */
.ig-strook{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:1.4rem;
  font-size:.92rem; color:var(--grijs);
}
.ig-strook svg{width:19px; height:19px; flex:none; color:var(--olijf)}
.ig-strook a{font-weight:600; text-decoration:none}
.ig-strook a:hover{text-decoration:underline}

/* ------------------------------------------------------------------
   Tegels (snelle wegwijzers)
   ------------------------------------------------------------------ */
.tegels{display:grid; gap:0 2.2rem; grid-template-columns:repeat(2,1fr)}
.tegel{
  position:relative; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.2rem 0 1.4rem; border-top:1px solid rgba(95,111,78,.28);
  transition:border-color .2s ease;
}
.tegel:hover{border-color:var(--olijf)}
.tegel strong{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--serif); font-size:1.25rem; font-weight:600;
}
.tegel strong svg{width:18px; height:18px; color:var(--klei); flex:none; transition:transform .2s ease}
.tegel:hover strong svg{transform:translateX(4px)}
.tegel span{font-size:.88rem; color:var(--grijs); line-height:1.5}

/* ------------------------------------------------------------------
   Receptkaarten
   ------------------------------------------------------------------ */
.kaarten{display:grid; gap:1.4rem; grid-template-columns:1fr}
.kaart{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m); overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.kaart:hover{transform:translateY(-4px); box-shadow:var(--schaduw)}
.kaart-foto{position:relative; aspect-ratio:4/3; background:var(--zand-diep); overflow:hidden}
.kaart-foto img{
  width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
  /* De uitsnede die bij het recept is gekozen, geldt ook hier */
  object-position:var(--kaart-x,50%) var(--kaart-y,50%);
  transform:scale(var(--kaart-zoom,1));
  transform-origin:var(--kaart-x,50%) var(--kaart-y,50%);
}
.kaart:hover .kaart-foto img{transform:scale(calc(var(--kaart-zoom,1) * 1.04))}
.kaart-foto-leeg{
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--zand),var(--zand-diep)); color:var(--olijf-licht);
}
.kaart-foto-leeg svg{width:38px; height:38px}
.kaart-merk{
  position:absolute; left:.75rem; top:.75rem;
  background:rgba(250,246,240,.94); color:var(--olijf-donker);
  border-radius:999px; padding:.3rem .75rem; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.kaart-video{
  position:absolute; right:.75rem; top:.75rem; width:32px; height:32px; border-radius:50%;
  background:rgba(46,49,43,.62); color:#fff; display:grid; place-items:center;
}
.kaart-video svg{width:15px; height:15px}
.kaart-tekst{padding:1.05rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.kaart-tekst h3{margin:0}
.kaart-tekst p{margin:0; font-size:.9rem; color:var(--grijs); line-height:1.55}
.kaart-voet{
  margin-top:auto; padding-top:.85rem; display:flex; flex-wrap:wrap; gap:.35rem .7rem;
  font-size:.78rem; color:var(--grijs);
}
.kaart-voet span{display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap}
.kaart-voet svg{width:14px; height:14px; color:var(--olijf-licht)}
/* Vanaf twee kaarten naast elkaar passen de vier gegevens op één regel.
   Daaronder mogen ze wel afbreken: in een kolom van 168 pixels is er
   geen enkele manier om ze naast elkaar te krijgen. */
@media (min-width:640px){
  /* overflow:hidden als vangnet: bij een gerecht van boven de duizend
     calorieën is het krap, en dan knipt de regel liever af dan dat hij
     de kaart uit elkaar duwt. */
  .kaart-voet{flex-wrap:nowrap; gap:.6rem; overflow:hidden}
}

/* ------------------------------------------------------------------
   Filters en zoeken
   ------------------------------------------------------------------ */
.zoekbalk{position:relative; margin-bottom:1rem}
.zoekbalk input{
  width:100%; padding:.95rem 1.1rem .95rem 3rem; font-size:1rem; font-family:inherit;
  border:var(--rand); border-radius:999px; background:var(--wit); color:inherit;
}
.zoekbalk input:focus{outline:2px solid var(--olijf-licht); outline-offset:1px}
.zoekbalk svg{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--olijf-licht); pointer-events:none;
}
.zoekbalk button{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  border:0; background:var(--olijf); color:var(--creme); border-radius:999px;
  padding:.6rem 1.1rem; font-size:.86rem; font-weight:600; cursor:pointer;
}

.chips{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
  margin-inline:calc(var(--kant) * -1); padding-inline:var(--kant);
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; padding:.72rem 1.15rem; border-radius:999px; border:var(--rand);
  background:var(--wit); color:var(--inkt); font-size:.88rem; font-weight:500;
  text-decoration:none; white-space:nowrap;
}
.chip:hover{border-color:var(--olijf-licht)}
.chip.aan{background:var(--olijf); border-color:var(--olijf); color:var(--creme); font-weight:600}

/* Het aantal recepten achter een categorie: aanwezig, niet schreeuwend. */
.chip-aantal{margin-left:.3rem; opacity:.5; font-weight:500}
.chip.aan .chip-aantal{opacity:.75}

/* Sorteren stond als drie onderstreepte woordjes op een regel. Als
   chips zijn het knoppen met een fatsoenlijk trefvlak, en zie je
   meteen welke aan staat. */
.chips-sorteer{margin:.1rem 0 .3rem}
.chips-label{flex:none; align-self:center; font-size:.86rem; color:var(--grijs); padding-right:.1rem}

.telling{font-size:.88rem; color:var(--grijs); margin:1.2rem 0}

/* Filterpaneel op het receptenoverzicht. Dichtgeklapt is het één regel;
   openklappen kan zonder javascript, dus het werkt altijd. */
.filterbalk{margin:.9rem 0 0}
.filters{
  border:1px solid var(--zand-diep); border-radius:14px;
  background:var(--wit); overflow:hidden;
}
.filters > summary{
  display:flex; align-items:center; gap:.55rem;
  padding:.75rem 1rem; cursor:pointer; font-weight:600; font-size:.94rem;
  list-style:none;
}
.filters > summary::-webkit-details-marker{display:none}
.filters > summary svg{width:19px; height:19px; color:var(--olijf); flex:none}
.filters > summary::after{
  content:""; margin-left:auto; width:9px; height:9px; flex:none;
  border-right:2px solid var(--grijs); border-bottom:2px solid var(--grijs);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.filters[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.filters > summary:hover{background:var(--zand)}
.filter-bol{
  font-style:normal; font-size:.74rem; font-weight:700; line-height:1;
  background:var(--olijf); color:var(--creme);
  border-radius:999px; padding:.22rem .45rem; min-width:1.2rem; text-align:center;
}

.filter-vakken{
  display:grid; gap:1.2rem; padding:.4rem 1rem 1rem;
  border-top:1px solid var(--zand-diep);
}
.filter-vak{border:0; margin:0; padding:.9rem 0 0; min-width:0}
.filter-vak legend{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-indent:.14em; text-transform:uppercase;
  color:var(--grijs); padding:0; margin-bottom:.5rem;
}
.filter-raster{display:grid; grid-template-columns:repeat(2,1fr); gap:.1rem .8rem}

.filter-keuze{
  display:flex; align-items:center; gap:.55rem;
  padding:.72rem 0; cursor:pointer; font-size:.93rem; line-height:1.3;
}
.filter-keuze input{width:18px; height:18px; flex:none; accent-color:var(--olijf); margin:0}
.filter-keuze:hover span{color:var(--olijf-donker)}

.filter-let-op{
  font-size:.8rem; color:var(--grijs); margin:.7rem 0 0; max-width:52ch;
}
.filter-voet{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  padding:0 1rem 1rem;
}

@media (min-width:640px){
  .filter-vakken{grid-template-columns:repeat(2,1fr); gap:1.2rem 2rem}
  .filter-vak-breed{grid-column:1 / -1}
  .filter-raster{grid-template-columns:repeat(4,1fr)}
}

/* De allergenen onder een recept. */
.allergenen{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .6rem}
.allergeen{
  background:var(--zand); border:1px solid var(--zand-diep); color:var(--inkt);
  border-radius:999px; padding:.22rem .7rem; font-size:.85rem;
}

.leeg{
  text-align:center; padding:3rem 1.5rem; border:1px dashed rgba(95,111,78,.3);
  border-radius:var(--rond-m); background:var(--wit); color:var(--grijs);
}
.leeg h3{color:var(--inkt)}

/* ------------------------------------------------------------------
   Receptpagina
   ------------------------------------------------------------------ */
.kruimels{font-size:.84rem; color:var(--grijs); margin-bottom:.6rem}
/* De marge eromheen is ingekort en op de link gezet: zo blijft het
   pad even hoog staan, maar is het met een duim te raken. */
.kruimels a{color:var(--olijf); text-decoration:none; display:inline-block; padding-block:.4rem}
.kruimels a:hover{text-decoration:underline}

.recept-kop{padding-block:clamp(1.5rem,5vw,2.5rem) clamp(2.5rem,7vw,4.5rem)}
/* ---- Kopfoto met de titel en de gegevens eroverheen ---- */
.recept-held{position:relative; border-radius:var(--rond-l); margin-bottom:1.8rem}
.recept-held.met-foto{
  overflow:hidden; display:flex; align-items:flex-end;
  min-height:min(76vh, 540px); box-shadow:var(--schaduw-diep);
}
.recept-held-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Donkere sluier onderaan, zodat de tekst altijd leesbaar blijft */
.recept-held.met-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,30,26,.08) 0%, rgba(28,30,26,.38) 42%, rgba(28,30,26,.9) 100%);
}
.recept-held-inhoud{position:relative; z-index:1; width:100%}
.recept-held:not(.met-foto) .recept-held-inhoud{padding:0}
.recept-held.met-foto .recept-held-inhoud{
  padding:clamp(1.3rem,5vw,2.4rem);
  padding-bottom:clamp(1rem,2.5vw,1.4rem);   /* tekst laag in beeld houden */
}
.recept-held.met-foto .feitjes{margin-bottom:0}
.recept-held.met-foto h1{color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.4)}
.recept-held.met-foto .recept-intro{color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(0,0,0,.45)}
.recept-held.met-foto .recept-oordeel a{color:#fff}
.recept-held.met-foto .sterren-aantal{color:rgba(255,255,255,.82)}
.recept-held.met-foto .sterren{color:rgba(255,255,255,.35)}

/* Gegevens als glazen plaatjes op de foto */
.recept-held.met-foto .feit{
  background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.26); color:#fff;
  backdrop-filter:blur(8px);
}
.recept-held.met-foto .feit svg{color:#fff}
.recept-held.met-foto .feit small{color:rgba(255,255,255,.78)}
.recept-held.met-foto .knop-rand{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.08)}
.recept-held.met-foto .knop-rand:hover{background:rgba(255,255,255,.2)}
.recept-held.met-foto .knop-rand.aan{background:var(--creme); color:var(--olijf-donker); border-color:var(--creme)}

.recept-intro{font-size:1.06rem; color:var(--grijs); max-width:60ch}
.recept-verhaal{max-width:66ch; margin:0 0 2rem}

/* Op de telefoon: eerst de kopfoto, dan de ingrediënten, dan de stappen */
.recept-zij{margin:0 0 1.8rem}
.recept-stappen{margin-top:2rem}
.recept-foto img{width:100%; height:100%; object-fit:cover}

.feitjes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem;
  margin:1.5rem 0; padding:0; list-style:none;
}
/* Drie tegels in twee kolommen liet een gat vallen. Een oneven laatste
   tegel pakt nu de hele breedte. */
.feitjes .feit:last-child:nth-child(odd){grid-column:1 / -1}
.feit{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-s);
  padding:.85rem .9rem; display:flex; align-items:center; gap:.65rem;
}
.feit svg{width:19px; height:19px; color:var(--olijf); flex:none}
.feit small{
  display:block; font-size:.72rem; color:var(--olijf); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; text-indent:.12em; margin-bottom:.15rem;
}
.feit b{display:block; font-size:.98rem; font-weight:600; line-height:1.2}

/* Slanke regelaar in plaats van een zwaar gevuld blok */
.porties-regelaar{
  display:flex; width:fit-content; align-items:center; justify-content:center; gap:.6rem;
  border:1px solid rgba(95,111,78,.22); border-radius:999px;
  padding:.32rem .35rem .32rem 1rem; margin:0 auto 1.1rem;
  background:none;
}
.porties-regelaar span{font-size:.86rem; font-weight:500; color:var(--grijs)}
.porties-regelaar span:last-child{padding-right:1rem}
.porties-knoppen{display:flex; align-items:center; gap:.25rem}
/* Deze knopjes stonden op 32 pixels. Je tikt ze aan met een vinger,
   vaak met natte handen, en het hele omrekenen naar meer of minder
   personen hangt eraan. Vandaar 44: de maat die Apple aanhoudt. */
.porties-knoppen button{
  width:44px; height:44px; border-radius:50%; border:0; background:var(--zand);
  font-size:1.35rem; line-height:1; cursor:pointer; color:var(--olijf-donker);
  transition:background .15s ease, color .15s ease;
}
.porties-knoppen button:hover{background:var(--olijf); color:var(--creme)}
.porties-knoppen output{
  min-width:2rem; text-align:center; font-weight:700; font-size:1.05rem; color:var(--inkt);
  font-variant-numeric:tabular-nums;
}

/* De ingrediëntenkaart */
.ingredienten-kaart{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-l);
  padding:clamp(1.1rem,4vw,1.4rem); box-shadow:var(--schaduw);
}
.ingredienten-kaart > h2{
  font-size:1.4rem; margin:0 0 .9rem; text-align:center;
}

.ingredienten{list-style:none; padding:0; margin:0}
.ingredienten li{
  display:flex; gap:.6rem; align-items:baseline;
  padding:.55rem 0; border-radius:9px;
  border-bottom:1px solid rgba(95,111,78,.12);
  font-size:.95rem; line-height:1.4;
  transition:background .15s ease;
}
/* Geen negatieve marges hier: het vak eromheen scrolt, en dan zou de
   browser er een horizontale balk bij zetten. */
.ingredienten li:hover{background:rgba(95,111,78,.06)}
.ingredienten li:last-child{border-bottom:0}
.ingredienten input[type=checkbox]{
  width:21px; height:21px; flex:none; accent-color:var(--olijf); cursor:pointer;
  position:relative; top:.18rem;
}
/* Twee kolommen: hoeveelheid links uitgelijnd, naam ernaast */
.ingredienten label{
  cursor:pointer; flex:1; display:grid; grid-template-columns:6.4rem 1fr; gap:.55rem; align-items:baseline;
}
.ingredienten .hoeveel{font-weight:700; color:var(--olijf-donker); font-variant-numeric:tabular-nums}
.ingredienten .ingr-naam:only-child{grid-column:1 / -1}
.ingr-extra{color:var(--grijs); font-style:italic}
.ingredienten input:checked + label{color:var(--grijs); text-decoration:line-through}
.ingredienten input:checked + label .hoeveel{color:var(--grijs)}
.ingredienten .groepregel{display:block; border:0; padding:0; margin-inline:0}
.ingredienten .groepregel:hover{background:none}
/* Tussenkopje in het midden, met aan weerskanten een streep die
   de overgebleven ruimte opvult. */
.ingredienten .groep{
  font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--olijf-donker);
  padding:1.1rem 0 .35rem; border:0; display:flex; align-items:center; gap:.75rem;
  text-align:center;
}
.ingredienten .groep::before,
.ingredienten .groep::after{
  content:""; flex:1 1 0; height:2px; border-radius:2px;
  background:var(--klei); opacity:.45;
}
.ingredienten li:first-child .groep{padding-top:0}

/* Boodschappenblok onder de lijst */
.ingr-winkel{
  margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid rgba(95,111,78,.14);
  text-align:center;
}
.ingr-winkel-kop{
  margin:0 0 .7rem; font-size:.86rem; font-weight:600; color:var(--grijs);
}
/* Eén brede hoofdknop met twee ronde knopjes ernaast, altijd op één regel */
.ingr-winkel-knoppen{display:flex; flex-wrap:nowrap; gap:.5rem; align-items:center; justify-content:center}
.ingr-winkel-knoppen .knop{flex:1 1 auto; min-width:0}
.ingr-winkel-knoppen .knop-rond{flex:0 0 auto; width:44px; height:44px}
.ingr-winkel-knoppen .knop-rond svg{width:18px; height:18px}
.ingr-winkel-knoppen form{flex:1 1 auto; min-width:0; margin:0}
.ingr-winkel-knoppen form .knop{width:100%}
.knop.gelukt{background:var(--olijf); border-color:var(--olijf); color:var(--creme); font-size:1.1rem}
.ingr-wissen{
  border:0; background:none; font:inherit; font-size:.82rem; color:var(--grijs);
  text-decoration:underline; cursor:pointer; padding:0; margin-top:.9rem;
}
.ingr-wissen:hover{color:var(--klei)}

/* Wordt de lijst lang, dan scrolt hij binnen de kaart in plaats van de pagina uit */
.ingredienten-vak{position:relative; overflow-x:hidden}
/* Wordt de lijst lang, dan scrolt hij binnen de kaart in plaats van de pagina uit */
@media (min-width:900px){
  .ingredienten-vak{
    max-height:calc(100vh - var(--kop-hoogte) - 16rem); min-height:12rem;
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--zand-diep) transparent;
    padding-right:.4rem; margin-right:-.4rem;
  }
  .ingredienten-vak::-webkit-scrollbar{width:6px}
  .ingredienten-vak::-webkit-scrollbar-thumb{background:var(--zand-diep); border-radius:999px}
}

/* Bereiding als tijdlijn: bolletjes met een lijn ertussen, en afvinkbaar */
.stappen{list-style:none; counter-reset:stap; padding:0; margin:0}
.stappen li{
  counter-increment:stap; position:relative; padding:0 0 1.5rem 3.7rem; min-height:2.7rem;
}
.stappen li:last-child{padding-bottom:0}
/* Het verbindingslijntje naar de volgende stap */
.stappen li:not(:last-child)::after{
  content:""; position:absolute; left:1.15rem; top:2.7rem; bottom:.3rem;
  width:2px; background:linear-gradient(var(--zand-diep), rgba(227,216,198,.35));
}
.stap-vink{
  position:absolute; left:0; top:0; width:2.7rem; height:2.7rem; padding:0;
  border:0; border-radius:50%; background:var(--olijf); color:var(--creme); cursor:pointer;
  font-family:var(--serif); font-weight:600; font-size:1rem; display:grid; place-items:center;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.stap-vink::before{content:counter(stap)}
.stap-vink:hover{transform:scale(1.07); box-shadow:0 8px 18px -10px rgba(95,111,78,1)}
.stap-vink:focus-visible{outline:2px solid var(--klei); outline-offset:2px}
/* Regels niet te lang laten worden, ook al is de kolom breed */
.stap-tekst{padding-top:.32rem; max-width:64ch}
/* Afgevinkt: bolletje wordt een vinkje, tekst dooft uit */
.stappen li.klaar .stap-vink{background:var(--klei)}
.stappen li.klaar .stap-vink::before{content:"✓"; font-size:1.15rem}
.stappen li.klaar .stap-tekst{color:var(--grijs); opacity:.55}

.smakelijk{
  font-family:var(--serif); font-size:1.15rem; color:var(--olijf-donker);
  text-align:center; margin:2rem 0 0; position:relative;
}
.smakelijk::before,.smakelijk::after{content:"·"; color:var(--klei); margin:0 .6rem}

.notitie{
  background:var(--zand); border-left:3px solid var(--klei);
  border-radius:0 var(--rond-s) var(--rond-s) 0; padding:1.1rem 1.2rem; margin:1.8rem 0;
}
.notitie h3{margin:0 0 .4rem; font-size:1.05rem}
.notitie p:last-child{margin-bottom:0}

.voedingswaarde{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:1.5rem 0}
.voedingswaarde div{background:var(--wit); border:var(--rand); border-radius:var(--rond-s); padding:.7rem .3rem; text-align:center}
.voedingswaarde b{display:block; font-size:1rem}
.voedingswaarde small{font-size:.68rem; color:var(--grijs); text-transform:uppercase; letter-spacing:.06em}

.deel{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(95,111,78,.16)}
.deel span{font-size:.88rem; color:var(--grijs); margin-right:.2rem}

/* ------------------------------------------------------------------
   Video's
   ------------------------------------------------------------------ */
.video-raster{display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr)}
.video{
  position:relative; display:block; border:0; padding:0; cursor:pointer;
  border-radius:var(--rond-m); overflow:hidden; aspect-ratio:9/16;
  background:var(--zand-diep); text-align:left; color:inherit;
  box-shadow:var(--schaduw);
}
.video img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.video:hover img{transform:scale(1.05)}
.video-leeg{
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--olijf-licht),var(--olijf)); color:var(--creme);
}
.video-leeg svg{width:40px; height:40px; opacity:.9}
.video-over{
  position:absolute; inset:auto 0 0 0; padding:2.5rem .8rem .85rem;
  background:linear-gradient(transparent, rgba(30,32,28,.88));
  color:#fff;
}
.video-over strong{display:block; font-family:var(--serif); font-size:.95rem; font-weight:600; line-height:1.3}
.video-over small{display:block; font-size:.75rem; opacity:.85; margin-top:.2rem}
.video-speel{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.video-speel i{
  width:52px; height:52px; border-radius:50%; background:rgba(250,246,240,.9);
  display:grid; place-items:center; box-shadow:0 10px 24px -12px rgba(0,0,0,.8);
  transition:transform .2s ease;
}
.video:hover .video-speel i{transform:scale(1.08)}
.video-speel svg{width:20px; height:20px; color:var(--olijf-donker); margin-left:3px}

/* Lichtbak voor de reel */
.lichtbak{
  position:fixed; inset:0; z-index:100; background:rgba(30,32,28,.88);
  display:none; align-items:center; justify-content:center; padding:1rem;
  backdrop-filter:blur(4px);
}
.lichtbak.aan{display:flex}
.lichtbak-vak{
  position:relative; width:min(100%,420px); aspect-ratio:9/16; max-height:88vh;
  background:#000; border-radius:var(--rond-m); overflow:hidden; box-shadow:var(--schaduw-diep);
}
.lichtbak-vak iframe{width:100%; height:100%; border:0}
.lichtbak-sluit{
  position:absolute; top:-3rem; right:0; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(250,246,240,.16); color:#fff; font-size:1.4rem; cursor:pointer;
  display:grid; place-items:center;
}
.lichtbak-sluit:hover{background:rgba(250,246,240,.3)}

/* ------------------------------------------------------------------
   Coaching
   ------------------------------------------------------------------ */
.stappen-rij{display:grid; gap:1.1rem; grid-template-columns:1fr; counter-reset:hoe}
.stap{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m);
  padding:1.4rem 1.3rem; counter-increment:hoe; position:relative;
}
.stap::before{
  content:"0" counter(hoe); font-family:var(--serif); font-size:1.6rem; color:var(--klei);
  display:block; margin-bottom:.4rem; line-height:1;
}
.stap h3{margin-bottom:.3rem}
.stap p{margin:0; color:var(--grijs); font-size:.95rem}

/* ------------------------------------------------------------------
   De pakketten als carrousel
   Eerst was dit een raster van drie. Zodra er een vierde of vijfde bij
   kwam bleef er een gat open op de laatste regel, en werd de pagina
   twee schermen lang. Nu staan ze naast elkaar en schuif je opzij; op
   een breed scherm zie je er drie, met de volgende half in beeld zodat
   je ziet dat er meer is.
   ------------------------------------------------------------------ */
/* De vaste kaart en de schuivende rij naast elkaar. Op een telefoon
   onder elkaar: daar is geen ruimte om er eentje vast te zetten. */
.pakketten-rij{display:block}
.pakket-vast{padding-block:1.5rem 0}
.pakket-vast .pakket{width:100%; flex-basis:auto}

.pakketten{
  /* Ruimte boven: het labeltje "Beste keuze" steekt boven de kaart uit,
     en een rij die zijwaarts schuift knipt alles af wat erbuiten valt. */
  display:flex; gap:1.2rem; overflow-x:auto; padding-block:1.5rem 1.2rem;
  align-items:flex-start;              /* niet uitrekken: dan groeit bij het
                                          openklappen alleen die ene kaart */
  scrollbar-width:none; -ms-overflow-style:none;
}
.pakketten::-webkit-scrollbar{display:none}
.pakket{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-l);
  padding:1.3rem 1.25rem; display:flex; flex-direction:column; position:relative;
  flex:0 0 min(85%, 20rem);
}

/* Pijlen en een teller onder de rij, in het midden. Zonder die twee ziet
   niemand dat er nog pakketten achter staan: een vervagend randje alleen
   is te subtiel, zeker met een muis. */
.pakketten-balk{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:.4rem;
}
.pakketten-balk:has(.pakketten-pijl[hidden]){display:none}
.pakketten-tel{
  min-width:6.5rem; text-align:center;
  font-size:.85rem; color:var(--grijs); font-variant-numeric:tabular-nums;
}
.pakketten-pijl{
  width:3rem; height:3rem; flex:none; border-radius:50%; padding:0;
  border:1.5px solid var(--olijf); background:var(--wit); color:var(--olijf-donker);
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}
.pakketten-pijl svg{width:20px; height:20px}
.pakketten-pijl.terug svg{transform:rotate(180deg)}
.pakketten-pijl:hover:not(:disabled){background:var(--olijf); color:var(--creme); transform:translateY(-1px)}
.pakketten-pijl:active:not(:disabled){transform:translateY(0)}
.pakketten-pijl:disabled{opacity:.3; cursor:default; border-color:var(--zand-diep)}

/* De kop en het prijsvlak krijgen een vaste hoogte, zodat de prijzen van
   alle kaarten op dezelfde lijn staan - ook als de ene titel over twee
   regels loopt of er een regeling bij staat en bij de buurman niet. */
.pakket-kop{min-height:4.4rem; display:flex; flex-direction:column; justify-content:center}
.pakket-duur.leeg{visibility:hidden}

/* De beschrijving en de opsomming samen: ingeklapt even hoog bij elke
   kaart, met een vervaging onderaan zodat je ziet dat er meer staat. */
.pakket-inhoud{position:relative}
.pakket.klapbaar .pakket-inhoud{max-height:15.5rem; overflow:hidden}
.pakket.klapbaar.open .pakket-inhoud{max-height:none}
.pakket.klapbaar:not(.open) .pakket-inhoud::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3.5rem;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--wit));
  pointer-events:none;
}
/* De gerechten als tegeltjes in een rij die opzij schuift. Ze breken
   bewust niet af naar een volgende regel: dan werd het blok bij tien
   passende gerechten een muur. Nu schuif je verder, net als bij de
   pakketten op de coachingpagina. */
.zelf-tegels{
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.zelf-tegels::-webkit-scrollbar{display:none}
.zelf-tegel{
  flex:0 0 9rem; display:flex; flex-direction:column; text-align:left;
  border:1.5px solid var(--zand-diep); border-radius:var(--rond); background:var(--wit);
  padding:0; overflow:hidden; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.zelf-tegel:hover{border-color:var(--olijf-licht)}
.zelf-tegel.aan{border-color:var(--olijf); box-shadow:0 0 0 3px rgba(95,111,78,.15)}
.zelf-tegel-foto{
  position:relative; height:4.8rem; background:var(--zand);
  display:grid; place-items:center; color:var(--olijf-licht);
}
.zelf-tegel-foto img{width:100%; height:100%; object-fit:cover; display:block}
.zelf-tegel-foto svg{width:22px; height:22px}
/* Het vinkje op de gekozen tegel, zodat je het ook ziet zonder kleur. */
.zelf-tegel-vink{
  position:absolute; top:.35rem; right:.35rem; width:1.4rem; height:1.4rem;
  border-radius:50%; background:var(--olijf); color:var(--creme);
  display:grid; place-items:center;
}
.zelf-tegel-vink svg{width:13px; height:13px}
.zelf-tegel-tekst{padding:.5rem .6rem .6rem}
.zelf-tegel-tekst b{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:.84rem; line-height:1.3; font-weight:600;
}
.zelf-tegel-tekst span{display:block; margin-top:.15rem; font-size:.76rem; color:var(--grijs)}
.zelf-tegel.aan .zelf-tegel-tekst{background:rgba(95,111,78,.08)}
/* Streepje tussen de bijpassende gerechten en de rest. */
.zelf-scheiding{flex:0 0 1px; align-self:stretch; background:var(--zand-diep); margin:0 .25rem}
.zelf-wis{
  margin-top:.5rem; padding:0; background:none; border:0; cursor:pointer; font:inherit;
  font-size:.82rem; color:var(--grijs); text-decoration:underline; text-underline-offset:3px;
}
.zelf-wis:hover{color:var(--inkt)}

/* Een klein pilletje in plaats van een onderstreept woord: dat botste
   met de knop eronder en zag eruit als een losse link in de tekst. */
.pakket-meer{
  align-self:center; margin:.8rem 0 .9rem; padding:.42rem .95rem;
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--creme); border:1px solid var(--zand-diep); border-radius:999px;
  font:inherit; font-size:.84rem; font-weight:600; color:var(--olijf-donker);
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.pakket-meer:hover{background:var(--zand); border-color:var(--olijf-licht)}
.pakket-meer svg{width:15px; height:15px; transform:rotate(90deg); transition:transform .2s ease}
.pakket.open .pakket-meer svg{transform:rotate(-90deg)}
/* De dikkere rand zit in een schaduwring, niet in border-width: anders
   is de uitgelichte kaart twee pixels hoger dan de rest en staat hij net
   niet gelijk in de rij. */
.pakket.uit{border-color:var(--olijf); box-shadow:var(--schaduw), inset 0 0 0 1px var(--olijf)}
.pakket-vlag{
  position:absolute; top:-.75rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--klei); color:#fff; border-radius:999px;
  padding:.28rem .85rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.pakket h3{margin-bottom:.15rem; text-align:center}
.pakket-onder{font-size:.88rem; color:var(--grijs); margin-bottom:.75rem; text-align:center}

/* Het prijsvlak: het bedrag hoort het eerste te zijn wat je ziet, en
   betalen in termijnen mag geen kleine lettertjes zijn. Daarom een eigen
   vlak midden in de kolom, met de termijn als los kaartje eronder. */
.pakket-prijsvlak{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--creme); border:1px solid var(--zand);
  border-radius:var(--rond-m); padding:.85rem .9rem;
  /* Krijgt het vlak een minimumhoogte mee omdat er bij een ander pakket
     een regeling onder de prijs staat, dan hangt het bedrag in het
     midden in plaats van bovenaan met een gat eronder. */
  justify-content:center;
}
.pakket.uit .pakket-prijsvlak{background:#fff; border-color:var(--zand-diep)}
.pakket-prijs{
  font-family:var(--serif); font-size:2.15rem; font-weight:600; line-height:1;
  color:var(--olijf-donker); letter-spacing:-.01em;
}
.pakket-prijs-bij{
  display:block; margin-top:.4rem; font-size:.74rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--grijs);
}
.pakket-termijn{
  display:block; width:100%; margin-top:.6rem; padding:.45rem .7rem;
  background:var(--wit); border:1px dashed var(--klei-licht); border-radius:var(--rond-s);
  line-height:1.35;
}
.pakket.uit .pakket-termijn{background:var(--creme)}
.pakket-termijn-kop{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--klei); margin-bottom:.15rem;
}
.pakket-termijn b{font-size:.95rem; color:var(--inkt); font-weight:600}
.pakket-duur{
  display:inline-flex; align-items:center; gap:.4rem; margin:.8rem auto;
  font-size:.82rem; color:var(--olijf-donker); background:var(--zand);
  border-radius:999px; padding:.35rem .8rem; text-align:left;
}
.pakket-duur svg{width:14px; height:14px}
.pakket > p{font-size:.94rem; color:var(--grijs)}
.pakket ul{list-style:none; padding:0; margin:.2rem 0 1rem}
.pakket li{display:flex; gap:.6rem; align-items:flex-start; padding:.3rem 0; font-size:.93rem}
.pakket li svg{width:17px; height:17px; color:var(--olijf); flex:none; margin-top:.24rem}
.pakket .knop{margin-top:auto}

.ervaringen{display:grid; gap:1.1rem; grid-template-columns:1fr}
.ervaring{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m); padding:1.4rem 1.3rem;
}
/* Sterren boven een reactie op de startpagina. */
.ervaring .sterren{display:block; margin-bottom:.6rem}
.ervaring-tekst{font-family:var(--serif); font-size:1.06rem; line-height:1.55; margin:0 0 1rem}
.ervaring-tekst::before{content:"\201C"; color:var(--klei); font-size:1.8rem; line-height:0; vertical-align:-.35rem; margin-right:.1rem}
.ervaring-wie{display:flex; align-items:center; gap:.7rem}
.ervaring-wie img{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none}
.ervaring-bol{
  width:42px; height:42px; border-radius:50%; background:var(--zand); color:var(--olijf-donker);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; flex:none;
}
.ervaring-wie b{display:block; font-size:.94rem}
.ervaring-wie small{color:var(--grijs); font-size:.82rem}

/* ------------------------------------------------------------------
   Formulieren
   ------------------------------------------------------------------ */
.formulier{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-l);
  padding:clamp(1.3rem,5vw,2.2rem); box-shadow:var(--schaduw);
}
.veld{margin-bottom:1.1rem}
.veld label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.4rem}
.veld small{display:block; font-size:.8rem; color:var(--grijs); margin-top:.3rem}
.veld input,.veld select,.veld textarea{
  width:100%; padding:.85rem 1rem; font-family:inherit; font-size:1rem; color:inherit;
  background-color:var(--creme); border:var(--rand); border-radius:var(--rond-s);
}
.veld textarea{min-height:130px; resize:vertical; line-height:1.6}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:2px solid var(--olijf-licht); outline-offset:1px; background-color:var(--wit);
}

/* ---- Uitklaplijsten in de huisstijl ---- */
.veld select, select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.6rem !important; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6F4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:15px;
}
select::-ms-expand{display:none}

/* De uitklappende lijst zelf. Werkt in browsers die dit al kennen
   (Chrome en Edge); elders tekent het besturingssysteem hem, en dan
   blijft alleen het vakje hierboven in stijl. */
@supports (appearance: base-select){
  /* De basisregels hierboven staan op ".veld select, select". Alles hier
     binnen moet even zwaar wegen, anders geldt deze stand alleen voor
     lijsten die niet in een veld staan - en dan ziet dezelfde lijst er
     op twee plekken anders uit. */
  .veld select, select, ::picker(select){appearance:base-select}
  /* In deze stand tekent de browser zijn eigen pijltje. Het onze zetten
     we uit en het zijne geven we ons chevronnetje, zodat er er precies
     een is - en dezelfde als in Safari en op de telefoon, waar deze
     stand nog niet bestaat. Verstoppen alleen was niet genoeg: dan
     hangt het ervan af of de browser dat al kent. */
  /* Let op de kiezer: de basisregel hierboven is ".veld select, select".
     Schrijf je hier alleen "select", dan is dat zwakker en wint binnen
     een veld de oude regel - met twee pijltjes tot gevolg. */
  .veld select, select{background-image:none; padding-right:1.15rem !important}
  select::picker-icon{
    content:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235F6F4E%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E"); width:15px; height:15px;
    transition:transform .18s ease;
  }
  select:open::picker-icon{transform:rotate(180deg)}
  /* De kop boven een groep: rustig, zodat de gerechten opvallen. */
  optgroup{padding:.2rem 0 .1rem}
  optgroup + optgroup{margin-top:.35rem; padding-top:.45rem; border-top:1px solid var(--zand)}
  optgroup::legend{
    padding:.3rem .85rem .25rem; font-family:var(--sans); font-size:.68rem;
    font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--grijs);
  }
  ::picker(select){
    background:var(--wit); border:1px solid rgba(95,111,78,.2);
    border-radius:var(--rond-m); padding:.35rem; margin-top:.4rem;
    box-shadow:var(--schaduw-diep);
  }
  /* Naam links, calorieen rechts. Het getal zit in een eigen spannetje,
     zodat het niet als losse tekst achter de naam aan hobbelt. */
  option{
    padding:.6rem .85rem; border-radius:10px; font:inherit; color:var(--inkt);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  option .kcal{font-size:.82em; color:var(--grijs); white-space:nowrap; flex:none}
  /* Het puntje is alleen nodig als de lijst niet opgemaakt kan worden
     en naam en getal achter elkaar staan. Hier staat het getal rechts. */
  option .kcal i{display:none}
  option:checked .kcal{color:rgba(250,246,240,.85)}
  option:hover{background:rgba(95,111,78,.1)}
  option:checked{background:var(--olijf); color:var(--creme); font-weight:600}
  option::checkmark{display:none}
}
.veld-rij{display:grid; gap:0 1rem; grid-template-columns:1fr}
.veld-fout input,.veld-fout textarea,.veld-fout select{border-color:var(--klei)}
.veld-fout small{color:var(--klei)}
.honing{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.akkoord{display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--grijs)}
.akkoord input{width:19px; height:19px; margin-top:.15rem; accent-color:var(--olijf); flex:none}

.melding{
  border-radius:var(--rond-m); padding:1rem 1.2rem; margin-bottom:1.4rem;
  display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem;
}
.melding svg{width:20px; height:20px; flex:none; margin-top:.15rem}
.melding-goed{background:rgba(95,111,78,.12); color:var(--olijf-donker); border:1px solid rgba(95,111,78,.3)}
.melding-fout{background:rgba(194,114,74,.12); color:#8c4526; border:1px solid rgba(194,114,74,.35)}

/* ------------------------------------------------------------------
   Oproep en voettekst
   ------------------------------------------------------------------ */
.oproep{
  background:var(--olijf); color:var(--creme); border-radius:var(--rond-l);
  padding:clamp(1.4rem,4vw,2rem) clamp(1.4rem,4vw,2.4rem); text-align:center; position:relative; overflow:hidden;
}
.oproep h2{font-size:clamp(1.35rem,3.2vw,1.8rem); margin:.2rem 0 .4rem}
.oproep p{font-size:.95rem; margin-bottom:0}

.oproep::before{
  content:""; position:absolute; width:22vmax; height:22vmax; border-radius:50%;
  background:rgba(250,246,240,.07); top:-13vmax; right:-7vmax;
}
.oproep h2,.oproep .oogje{color:var(--creme); position:relative}
.oproep .oogje{color:var(--klei-licht)}
.oproep p{position:relative; color:rgba(250,246,240,.86); max-width:48ch; margin-inline:auto}
.oproep .knoppen{position:relative; justify-content:center; margin-top:1.5rem}
.oproep .knop-vol{background:var(--creme); color:var(--olijf-donker)}
.oproep .knop-vol:hover{background:#fff}
.oproep .knop-rand{border-color:rgba(250,246,240,.5); color:var(--creme)}
.oproep .knop-rand:hover{background:rgba(250,246,240,.14)}
section:has(> .omhulsel > .oproep){padding-top:clamp(1.4rem,4vw,2.2rem)}
@media (min-width:820px){
  .oproep{display:grid; grid-template-columns:1fr auto; column-gap:2.5rem; align-items:center; text-align:left}
  .oproep .oogje,.oproep h2,.oproep p{grid-column:1; margin-inline:0}
  .oproep .knoppen{grid-column:2; grid-row:1 / span 3; margin-top:0; flex-wrap:nowrap}
}
/* De onderrand houdt ruimte vrij voor het streepje waarmee je op een
   iPhone naar het beginscherm veegt; anders ligt de laatste regel
   eronder. Op alles zonder zo'n streepje is die ruimte nul. */
.voet{
  background:var(--inkt); color:rgba(250,246,240,.76); margin-top:0;
  padding-top:3rem; padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px));
}
.voet a{color:rgba(250,246,240,.76); text-decoration:none}
.voet a:hover{color:#fff}
.voet-rijen{display:grid; gap:2rem; grid-template-columns:1fr}
.voet-merk .merk-teken{background:var(--olijf-licht); color:var(--inkt)}
.voet-merk .merk-naam{color:var(--creme)}
.voet-merk p{margin:1rem 0 0; font-size:.9rem; max-width:34ch}
.voet h4{color:var(--creme); font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; margin-bottom:.9rem}
.voet ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.94rem}
/* Een e-mailadres is één lang woord. Past het niet, dan mag het breken
   in plaats van de hele voet uit het scherm te duwen. */
.voet ul a{overflow-wrap:anywhere}
.voet .sociaal-knop{background:rgba(250,246,240,.08); border-color:rgba(250,246,240,.16); color:var(--creme)}
.voet .sociaal-knop:hover{background:rgba(250,246,240,.16)}
/* De knopjes delen hun opmaak met het menu bovenaan. Daar staan ze op een
   breed scherm in de balk, een half streepje ingesprongen en zonder lucht
   erboven. In de voet zette dat ze net náást de tekst erboven en plakten
   ze tegen de zin eronder. Hier dus netjes op dezelfde lijn als de naam. */
.voet .menu-sociaal{margin:1.5rem 0 0; justify-content:flex-start}
/* En die regel van het menu geeft ze ook een groen randje, bedoeld voor de
   crèmekleurige achtergrond daar. Op het donker van de voet is dat randje
   niet te zien en zweeft het knopje als een vaag blokje. Hier dus een licht
   randje, en het formaat van de andere knopjes op een breed scherm. */
.voet .menu-sociaal a.sociaal-knop{
  width:44px; height:44px; border:1px solid rgba(250,246,240,.18);
}
/* Het logo is zwarte letters op doorzichtig. Recht op het donker van de voet
   valt dat weg; alleen de oranje vork blijft over. Daarom ligt het hier op
   een licht kaartje, zoals een etiket op een pot. */
.voet-logo{
  display:inline-block; background:var(--creme);
  border-radius:16px; padding:.85rem 1.05rem;
}
.voet-logo img{display:block; height:62px; width:auto; max-width:min(60vw,240px); object-fit:contain}
.voet-onder{
  margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid rgba(250,246,240,.14);
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:space-between;
  font-size:.82rem; color:rgba(250,246,240,.55);
}
/* De verwijzing en de copyrightregel naast elkaar. Ze blijven op een
   regel staan; is het krap, dan loopt alleen de copyrighttekst door.
   Op een telefoon staan ze onder elkaar en vervalt het streepje. */
.voet-links{display:flex; flex-wrap:nowrap; align-items:baseline; gap:.2rem .6rem; min-width:0}
.voet-links > span:last-child{min-width:0}
.voet-streep{color:rgba(250,246,240,.3)}
@media (max-width:620px){
  .voet-links{flex-wrap:wrap}
  .voet-streep{display:none}
}

/* ------------------------------------------------------------------
   Leden: de muur, sterren, reacties
   ------------------------------------------------------------------ */
.menu-bol{
  font-style:normal; background:var(--klei); color:#fff; border-radius:999px;
  font-size:.7rem; font-weight:700; padding:.05rem .42rem; margin-left:.3rem;
}
.menu a.knop::after{content:none}
.knop.aan{background:var(--olijf); color:var(--creme); border-color:var(--olijf)}

/* Inloggen met Google: het logo links, de tekst gecentreerd, zoals Google het wil */
.google-knop{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; min-height:54px; padding:.6rem 3.6rem;
  background:var(--wit); color:#3c4043; text-decoration:none;
  border:1.5px solid rgba(95,111,78,.2); border-radius:999px;
  font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:-.005em;
  box-shadow:0 8px 20px -14px rgba(46,49,43,.55);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.google-knop:hover{
  border-color:rgba(95,111,78,.42);
  box-shadow:0 14px 28px -16px rgba(46,49,43,.6);
  transform:translateY(-2px);
}
.google-knop:active{transform:translateY(0); box-shadow:0 6px 14px -12px rgba(46,49,43,.55)}
.google-knop:focus-visible{outline:2px solid var(--olijf-licht); outline-offset:3px}
.google-logo{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; background:var(--wit);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(60,64,67,.12);
}
.google-logo svg{width:20px; height:20px; display:block}
.google-tekst{display:block}

/* Streepje met OF ertussen */
.of-streep{
  display:flex; align-items:center; gap:1rem; margin:1.9rem 0;
}
.of-streep::before,.of-streep::after{content:""; flex:1; height:1px}
.of-streep::before{background:linear-gradient(90deg, transparent, rgba(95,111,78,.3))}
.of-streep::after{background:linear-gradient(90deg, rgba(95,111,78,.3), transparent)}
.of-streep span{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-indent:.2em;
  text-transform:uppercase; color:var(--grijs);
}

.muur{
  background:var(--zand); border:1px dashed rgba(95,111,78,.4); border-radius:var(--rond-m);
  padding:clamp(1.4rem,5vw,2.2rem) 1.2rem; text-align:center;
}
.muur-slot{font-size:1.6rem; display:block; margin-bottom:.5rem; filter:grayscale(.3)}
.muur h3{margin:0 0 .5rem}
.muur p{color:var(--grijs); max-width:42ch; margin-inline:auto}
.muur .knoppen{margin-top:1.2rem}
.muur-klein{font-size:.82rem; margin:1rem 0 0}

.recept-oordeel{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0 0 .9rem; font-size:.9rem}
.recept-oordeel a{color:var(--olijf-donker)}
.sterren{color:var(--zand-diep); letter-spacing:.08em; font-size:1.05rem; line-height:1}
.sterren .ster.vol{color:var(--klei)}
.sterren-aantal{font-size:.85rem; color:var(--grijs); margin-left:.45rem}

/* Sterren kiezen: omgekeerde volgorde, zodat de vorige oplichten */
.sterren-kiezer{display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:.15rem}
.sterren-kiezer input{position:absolute; opacity:0; width:0; height:0}
.sterren-kiezer label{
  font-size:1.9rem; line-height:1; color:var(--zand-diep); cursor:pointer;
  transition:color .12s ease, transform .12s ease;
}
.sterren-kiezer label:hover,
.sterren-kiezer label:hover ~ label,
.sterren-kiezer input:checked ~ label,
.sterren-kiezer input:checked + label{color:var(--klei)}
.sterren-kiezer label:hover{transform:scale(1.08)}
.sterren-kiezer input:focus-visible + label{outline:2px solid var(--olijf-licht); outline-offset:2px}

.recept-acties{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 1.6rem}
.recept-acties form{margin:0}
/* Op een kopfoto staan ze rechtsboven, los van de tekst onderin */
.recept-held.met-foto .recept-acties{
  position:absolute; z-index:2; margin:0;
  top:clamp(.8rem,2.5vw,1.2rem); right:clamp(.8rem,2.5vw,1.2rem);
  flex-wrap:nowrap; align-items:center;
}
/* Rond knopje met alleen een icoontje */
.knop-rond{
  width:42px; height:42px; min-width:0; padding:0; border-radius:50%; flex:none;
}
.knop-rond svg{width:19px; height:19px}

/* Bewaren: warm rood uit hetzelfde palet als de kleiaccenten */
.hart,
.recept-held.met-foto .hart{
  color:var(--hart); background:var(--wit); border-color:rgba(178,74,44,.35);
}
.hart:hover,
.recept-held.met-foto .hart:hover{
  background:rgba(178,74,44,.1); border-color:var(--hart); color:var(--hart);
}
.hart.aan,
.recept-held.met-foto .hart.aan{
  background:var(--hart); border-color:var(--hart); color:#fff;
}
.hart.aan svg{fill:currentColor}

.reacties{display:grid; gap:.9rem}
.reactie{background:var(--creme); border:var(--rand); border-radius:var(--rond-m); padding:1.1rem 1.2rem}
.reactie-kop{display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; flex-wrap:wrap}
.reactie-kop b{display:block; font-size:.95rem; line-height:1.2}
.reactie-kop small{color:var(--grijs); font-size:.8rem}
.reactie-sterren{margin-left:auto}
.reactie p{margin:0; font-size:.95rem}

/* ------------------------------------------------------------------
   Vragenlijst (intake en evaluaties)
   ------------------------------------------------------------------ */
.intake-indeling{display:block}

/* --- Waar ben ik? -------------------------------------------------
   Op de telefoon een rij die meeschuift, op de laptop een nette
   lijst in de zijbalk. Dezelfde bouwstenen, andere jas. */
.intake-zij{
  position:sticky; top:var(--kop-hoogte); z-index:25;
  margin:0 0 1.2rem; padding:.65rem 0 0; background:var(--creme);
}
.intake-zij::after{
  content:""; display:block; height:1px; margin-top:.65rem;
  background:rgba(95,111,78,.14);
}
.intake-zij-kop,
.intake-ring,
.intake-zij-tel{display:none}

.intake-nav{
  list-style:none; margin:0; padding:0 0 .15rem; display:flex; gap:.4rem;
  overflow-x:auto; scrollbar-width:none;
}
.intake-nav::-webkit-scrollbar{display:none}
.intake-nav li{flex:none}
.intake-nav-item{
  display:flex; align-items:center; gap:.45rem;
  padding:.38rem .85rem .38rem .4rem; border-radius:999px;
  border:1.5px solid rgba(95,111,78,.2); background:var(--wit);
  text-decoration:none; color:var(--grijs); font-size:.85rem; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.intake-nav-item:hover{border-color:var(--olijf-licht); color:var(--inkt)}
.nav-bol{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.7rem; font-weight:700;
  background:var(--zand); color:var(--grijs);
  transition:background .18s ease, color .18s ease;
}
.intake-nav-item.bezig .nav-bol{background:var(--klei-licht); color:var(--inkt)}
.intake-nav-item.af .nav-bol{background:var(--olijf); color:var(--creme); font-size:0}
.intake-nav-item.af .nav-bol::after{content:"\2713"; font-size:.72rem}
.intake-nav-item.hier{
  background:var(--olijf); border-color:var(--olijf); color:var(--creme); font-weight:600;
}
.intake-nav-item.hier .nav-bol{background:rgba(255,255,255,.25); color:var(--creme)}

/* --- Een onderdeel ------------------------------------------------ */
.intake-blok{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-l);
  margin:0 0 1.1rem; box-shadow:var(--schaduw); overflow:hidden;
  scroll-margin-top:calc(var(--kop-hoogte) + 4.6rem);
  transition:border-color .2s ease;
}
.intake-blok.af{border-color:rgba(95,111,78,.34)}

.intake-kop{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem clamp(1.1rem,4vw,1.6rem);
  background:linear-gradient(100deg, var(--zand), rgba(239,231,218,.42));
  border-bottom:1px solid rgba(95,111,78,.14);
}
.intake-blok.af .intake-kop{
  background:linear-gradient(100deg, rgba(95,111,78,.16), rgba(95,111,78,.05));
}
.intake-kop-tekst{flex:1; min-width:0}
.intake-kop h2{
  display:flex; align-items:center; gap:.5rem; margin:0;
  font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--inkt);
}
.intake-kop h2 svg{width:18px; height:18px; color:var(--olijf); flex:none}
.intake-kop-tekst p{margin:.3rem 0 0; font-size:.86rem; color:var(--grijs); line-height:1.5}
.intake-nr{
  width:32px; height:32px; border-radius:11px; background:var(--olijf); color:var(--creme);
  display:grid; place-items:center; flex:none;
  font-family:var(--sans); font-size:.85rem; font-weight:700;
}
.intake-nr svg{width:17px; height:17px}
.intake-blok.af .intake-nr{font-size:0}
.intake-blok.af .intake-nr::after{content:"\2713"; font-size:1rem; font-weight:400}
.intake-stand{
  flex:none; align-self:center; font-size:.75rem; font-weight:700; color:var(--olijf-donker);
  background:rgba(255,255,255,.75); border-radius:999px; padding:.25rem .62rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.intake-stand i{font-style:normal; opacity:.45; margin:0 .06rem}
.intake-blok.af .intake-stand{background:var(--olijf); color:var(--creme)}

.intake-body{padding:clamp(1.15rem,4vw,1.8rem)}
.intake-velden > .veld:last-child{margin-bottom:0}

/* --- Losse velden ------------------------------------------------- */
.veld-label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.45rem}
.veld-getal{display:flex; align-items:center; gap:.6rem}
.veld-getal input{max-width:9rem}
.veld-getal em{font-style:normal; font-size:.88rem; color:var(--grijs)}
.veld-toelichting{margin-top:.5rem}

/* Keuzerondjes als aanraakbare pillen */
.keuzes{display:flex; flex-wrap:wrap; gap:.5rem}
.keuze{position:relative; display:inline-flex}
.keuze input{position:absolute; opacity:0; width:0; height:0}
.keuze span{
  display:inline-block; padding:.55rem 1.05rem; border-radius:999px;
  border:1.5px solid rgba(95,111,78,.25); background:var(--creme);
  font-size:.92rem; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.keuze span:hover{border-color:var(--olijf-licht)}
.keuze input:checked + span{background:var(--olijf); border-color:var(--olijf); color:var(--creme); font-weight:600}
.keuze input:focus-visible + span{outline:2px solid var(--olijf-licht); outline-offset:2px}

/* Schuifje: slepen, met het getal er rustig boven */
.schuif{--vul:50%}
.schuif-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  margin-bottom:.5rem; min-height:2rem;
}
.schuif-cijfer{display:flex; align-items:baseline; gap:.3rem; white-space:nowrap}
.schuif-cijfer b{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1;
  color:var(--olijf-donker); font-variant-numeric:tabular-nums;
}
.schuif-cijfer i{font-style:normal; font-size:.82rem; color:var(--grijs)}
.schuif:not(.gezet) .schuif-cijfer b{color:var(--zand-diep)}
.schuif:not(.gezet) .schuif-cijfer i{display:none}

.schuif-hint{font-size:.76rem; color:var(--grijs); opacity:.8}
.schuif.gezet .schuif-hint{visibility:hidden}

.schuif-baan{
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:9px; margin:0; padding:0; border:0; border-radius:999px;
  background:linear-gradient(90deg, var(--olijf) var(--vul), var(--zand-diep) var(--vul));
  cursor:pointer; touch-action:pan-y;
}
.schuif:not(.gezet) .schuif-baan{background:var(--zand-diep)}
.schuif-baan:focus-visible{outline:2px solid var(--olijf-licht); outline-offset:5px}

.schuif-baan::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--wit); border:2.5px solid var(--olijf); cursor:grab;
  box-shadow:0 5px 12px -4px rgba(46,49,43,.6);
}
.schuif-baan::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; box-sizing:border-box;
  background:var(--wit); border:2.5px solid var(--olijf); cursor:grab;
  box-shadow:0 5px 12px -4px rgba(46,49,43,.6);
}
.schuif-baan::-moz-range-track{background:transparent; border:0}
.schuif-baan:active::-webkit-slider-thumb{cursor:grabbing}
.schuif-baan:active::-moz-range-thumb{cursor:grabbing}
.schuif:not(.gezet) .schuif-baan::-webkit-slider-thumb{border-color:var(--olijf-licht)}
.schuif:not(.gezet) .schuif-baan::-moz-range-thumb{border-color:var(--olijf-licht)}

.schuif-uit{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.5rem; font-size:.78rem; color:var(--grijs);
}

/* --- Het slot ----------------------------------------------------- */
.intake-blok.afsluiter{border-color:rgba(95,111,78,.4)}
.intake-blok.afsluiter .intake-kop{
  background:linear-gradient(100deg, rgba(95,111,78,.2), rgba(194,114,74,.1));
}
.slot-uitleg{
  display:flex; gap:.65rem; margin:1.1rem 0 0; padding:.85rem 1rem;
  background:var(--creme); border-radius:14px;
  font-size:.86rem; color:var(--grijs); line-height:1.55;
}
.slot-uitleg svg{width:17px; height:17px; flex:none; color:var(--olijf); margin-top:.15rem}

/* --- De balk die meezweeft ---------------------------------------- */
.intake-dock{
  position:sticky; bottom:0; z-index:30; margin-top:1.4rem; padding:1rem 0 1.1rem;
  background:linear-gradient(to top, var(--creme) 62%, rgba(250,246,240,0));
}
.dock-kaart{
  display:flex; align-items:center; gap:1.1rem;
  background:var(--wit); border:var(--rand); border-radius:999px;
  box-shadow:0 18px 40px -22px rgba(46,49,43,.55);
  padding:.5rem .5rem .5rem 1.35rem;
}
.dock-stand{flex:1; min-width:0}
.intake-balk{height:6px; border-radius:999px; background:var(--zand-diep); overflow:hidden}
.intake-balk span{
  display:block; height:100%; background:var(--olijf); border-radius:999px;
  transition:width .3s ease;
}
.dock-stand p{margin:.42rem 0 0; font-size:.78rem; color:var(--grijs)}
.dock-stand b{color:var(--inkt); font-weight:700; font-variant-numeric:tabular-nums}
.dock-knoppen{display:flex; align-items:center; gap:.45rem; flex:none}
.dock-bewaar{
  display:inline-flex; align-items:center; gap:.42rem; border:0; background:none;
  color:var(--grijs); font:inherit; font-size:.88rem; font-weight:600;
  padding:.62rem .85rem; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.dock-bewaar:hover{background:var(--zand); color:var(--inkt)}
.dock-bewaar svg{width:17px; height:17px}

/* Teruglezen na verzenden */
.intake-lijst{margin:0; display:grid; gap:.7rem}
.intake-lijst > div{
  display:grid; gap:.15rem; padding-bottom:.7rem; border-bottom:1px solid rgba(95,111,78,.12);
}
.intake-lijst > div:last-child{border-bottom:0; padding-bottom:0}
.intake-lijst dt{font-size:.82rem; color:var(--grijs)}
.intake-lijst dd{margin:0; font-size:.98rem}

@media (max-width:560px){
  .dock-kaart{flex-wrap:wrap; gap:.7rem; border-radius:22px; padding:.9rem 1rem}
  .dock-stand{flex:1 1 100%}
  .dock-knoppen{flex:1 1 100%}
  .dock-bewaar{flex:none; padding-left:.6rem; padding-right:.6rem}
  .dock-knoppen .knop{flex:1; justify-content:center}
}

@media (min-width:640px){
  /* De balk mag iets breder zijn dan de kaarten erboven */
  .dock-kaart{margin:0 -1.4rem}
  .intake-lijst > div{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:1rem; align-items:baseline}
  .intake-blok.raster .intake-velden{display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem}
  .intake-blok.raster .veld-breed{grid-column:1 / -1}
}

/* Vanaf een laptop: de onderdelen als rustige lijst in de zijbalk */
@media (min-width:1000px){
  .intake-indeling{
    display:grid; grid-template-columns:250px minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem); align-items:start;
  }
  .intake-blok{scroll-margin-top:calc(var(--kop-hoogte) + 1.5rem)}

  .intake-zij{position:static; margin:0; padding:0; background:none; z-index:auto}
  .intake-zij::after{display:none}
  .intake-zij-vast{position:sticky; top:calc(var(--kop-hoogte) + 1.5rem)}

  .intake-zij-kop{
    display:flex; align-items:center; gap:.5rem; margin:0 0 1.1rem;
    font-size:.72rem; font-weight:700; letter-spacing:.16em; text-indent:.16em;
    text-transform:uppercase; color:var(--olijf);
  }
  .intake-zij-kop svg{width:17px; height:17px}

  /* Rondje met de voortgang */
  .intake-ring{display:block; position:relative; width:88px; height:88px; margin:0 auto .6rem}
  .intake-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
  .intake-ring circle{fill:none; stroke-width:4; stroke-linecap:round}
  .ring-baan{stroke:var(--zand-diep)}
  .ring-vol{stroke:var(--olijf); transition:stroke-dashoffset .4s ease}
  .intake-ring span{
    position:absolute; inset:0; display:grid; place-items:center;
    font-size:.78rem; color:var(--grijs);
  }
  .intake-ring b{font-family:var(--serif); font-size:1.35rem; color:var(--inkt); font-weight:600}
  .intake-zij-tel{display:block; text-align:center; font-size:.8rem; color:var(--grijs); margin:0 0 1.4rem}

  .intake-nav{display:grid; gap:.1rem; overflow:visible; padding:0}
  .intake-nav-item{
    padding:.45rem .6rem; border:0; background:none; border-radius:10px;
    font-size:.88rem; font-weight:400;
  }
  .intake-nav-item:hover{background:rgba(95,111,78,.08); color:var(--inkt)}
  .intake-nav-item.hier{
    background:rgba(95,111,78,.12); border:0; color:var(--inkt); font-weight:600;
  }
  .intake-nav-item.hier .nav-bol{background:var(--klei-licht); color:var(--inkt)}
  .intake-nav-item.hier.af .nav-bol{background:var(--olijf); color:var(--creme)}
  .nav-tekst{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* ------------------------------------------------------------------
   Kookstand en kookwekker
   ------------------------------------------------------------------ */
/* Een tijd in een bereidingsstap is een knop: erop tikken zet de
   kookwekker. Dat moet je kunnen zien zonder dat iemand het zegt. */
.wekker{
  display:inline-flex; align-items:center; gap:.3rem; vertical-align:baseline;
  border:1px solid rgba(194,114,74,.45); background:rgba(194,114,74,.14);
  color:#8c4526; font:inherit; font-weight:600; line-height:inherit;
  border-radius:999px; padding:.05rem .6rem .05rem .45rem; cursor:pointer;
}
.wekker svg{width:15px; height:15px; flex:none}
.wekker:hover{background:rgba(194,114,74,.26); border-color:rgba(194,114,74,.7)}
.wekker:active{transform:translateY(1px)}
/* Lopend: het vak loopt leeg en de tijd staat in de stap zelf. */
.wekker.loopt{
  background:linear-gradient(90deg, rgba(194,114,74,.38) var(--deel,100%), rgba(194,114,74,.12) var(--deel,100%));
  border-color:rgba(194,114,74,.8); font-variant-numeric:tabular-nums;
}
.wekker.klaar{
  background:var(--klei); border-color:var(--klei); color:#fff;
  animation:wekkerpuls 1.1s ease-in-out infinite;
}

.kookstand{
  position:fixed; inset:0; z-index:120; background:var(--creme);
  display:flex; flex-direction:column;
}
.kookstand[hidden]{display:none}
.kookstand-balk{
  display:flex; align-items:center; gap:.8rem; padding:.9rem var(--kant);
  border-bottom:var(--rand); background:var(--wit);
}
.kookstand-titel{
  font-family:var(--serif); font-size:1rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kookstand-teller{margin-left:auto; font-size:.85rem; color:var(--grijs); white-space:nowrap}
.kookstand-sluit{
  width:40px; height:40px; border:var(--rand); background:var(--creme); border-radius:12px;
  font-size:1.3rem; line-height:1; cursor:pointer; flex:none;
}
/* Een balkje dat volloopt, zodat je in één oogopslag ziet hoe ver je bent. */
.kookstand-voortgang{height:5px; background:var(--zand); flex:none}
.kookstand-voortgang span{
  display:block; height:100%; background:var(--olijf);
  transition:width .25s ease;
}

/* De stap stond in het midden van een leeg scherm te zweven. Hij begint nu
   bovenaan en de letters zijn fors: je leest dit vanaf een halve meter,
   met je handen in het deeg. */
.kookstand-vak{
  flex:1; overflow-y:auto;
  padding:clamp(1.4rem,6vw,2.4rem) var(--kant) clamp(2rem,9vw,3.2rem);
}
.kookstand-stap{max-width:min(100%, 38rem); margin-inline:auto; text-align:left}
.kookstand-stap[hidden]{display:none}
.kookstand-nr{
  display:block; font-size:.78rem; letter-spacing:.2em; text-indent:.2em; text-transform:uppercase;
  color:var(--olijf); font-weight:700; margin-bottom:.8rem;
}
.kookstand-stap p{
  font-family:var(--serif); font-size:clamp(1.65rem,7vw,2.6rem); line-height:1.35; margin:0;
}

/* Knoppen die je met een duim raakt, en Volgende duidelijk groter dan Vorige. */
.kookstand-voet{
  /* De 0px erachter is de terugval: kent een browser env() niet, dan
     gooit hij zonder die waarde de hele regel weg en houdt de balk
     helemaal geen lucht meer over. */
  display:flex; gap:.7rem; padding:.9rem var(--kant) calc(.9rem + env(safe-area-inset-bottom,0px));
  border-top:var(--rand); background:var(--wit);
}
.kookstand-voet .knop{flex:1; padding:1.05rem 1rem; font-size:1rem; justify-content:center}
.kookstand-voet .kookstand-volgende{flex:1.7}
.kookstand-voet .knop:disabled{opacity:.4; cursor:default}

/* Overzicht van de lopende wekkers onderaan de kookstand, boven de knoppen.
   Buiten de kookstand staat de tijd zelf in de stap. */
.wekkers{flex:none; display:grid; gap:1px; border-top:var(--rand)}
.wekkers[hidden]{display:none}
.wekker-rij{
  position:relative; display:flex; align-items:center; gap:.7rem;
  background:var(--inkt); color:var(--creme);
  padding:.5rem var(--kant) .65rem;
}

/* Waar de wekker bij hoort: "Stap 4 · 6-8 minuten". */
.wekker-naam{
  min-width:0; flex:1; font-size:.84rem; color:rgba(250,246,240,.72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.wekker-tijd{
  font-variant-numeric:tabular-nums; font-weight:700; line-height:1; flex:none;
  font-size:1.35rem;
}
.wekker-knoppen{display:flex; gap:.4rem; flex:none}
.wekker-knop{
  border:0; background:rgba(250,246,240,.16); color:var(--creme);
  border-radius:999px; padding:.45rem .85rem; font:inherit; font-size:.85rem; cursor:pointer;
}
.wekker-knop:hover{background:rgba(250,246,240,.3)}

/* Het lijntje onderaan loopt leeg; dat lees je zonder de cijfers te lezen. */
.wekker-lijn{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(250,246,240,.16);
}
.wekker-lijn i{display:block; height:100%; width:100%; background:var(--klei-licht)}

/* Afgelopen: kleur, tekst en trilling, zodat je bij drie lopende wekkers
   meteen ziet welke het is. Hij blijft staan tot je hem wegtikt. */
.wekker-rij.klaar{background:var(--klei); animation:wekkerpuls 1.1s ease-in-out infinite}
.wekker-rij.klaar .wekker-naam{color:rgba(255,255,255,.9)}
.wekker-rij.klaar .wekker-lijn{background:rgba(255,255,255,.25)}
@keyframes wekkerpuls{50%{background:#a85c35}}

/* ------------------------------------------------------------------
   Ruimere schermen
   ------------------------------------------------------------------ */
@media (min-width:640px){
  .kaarten{grid-template-columns:repeat(2,1fr)}
  .tegels{grid-template-columns:repeat(4,1fr)}
  .video-raster{grid-template-columns:repeat(3,1fr)}
  .veld-rij{grid-template-columns:1fr 1fr}
  .feitjes{grid-template-columns:repeat(4,1fr)}
  .ervaringen{grid-template-columns:repeat(2,1fr)}
  .stappen-rij{grid-template-columns:repeat(3,1fr)}
  /* Op een tablet twee pakketten in beeld, met een strookje van de derde
     erachter zodat je ziet dat de rij doorloopt. */
  .pakket{flex-basis:calc((100% - 5.5rem) / 2); max-width:none}
}

@media (min-width:900px){
  :root{--kop-hoogte:88px}
  .menu-knop{display:none}
  .menu{
    position:static; inset:auto; padding:0; background:none; overflow:visible;
    flex-direction:row; align-items:center; gap:.2rem;
    transform:none; opacity:1; pointer-events:auto;
  }
  .menu a{
    font-family:var(--sans); font-size:.93rem; font-weight:500;
    padding:.5rem .72rem; border:0; border-radius:999px; white-space:nowrap;
  }
  .menu a::after{content:none}
  .menu a.knop{margin-top:0; padding:.55rem 1.15rem; font-size:.9rem}
  .menu a:hover{background:rgba(95,111,78,.1)}
  .menu a[aria-current="page"]{background:var(--olijf); color:var(--creme)}
  .menu-sociaal{margin:0 0 0 .5rem; justify-content:flex-start}
  .menu .knop{margin-left:.4rem}
  .menu .knop:hover{background:var(--olijf-donker)}
  .sociaal-knop{width:40px; height:40px; border-radius:12px}

  .merk-teken{width:44px; height:44px; border-radius:14px; font-size:1.2rem}
  .merk-naam{font-size:1.12rem}

  .held-binnen{grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,5vw,4rem)}
  .held-tekst-kant{order:-1}
  .held-foto{aspect-ratio:4/5; max-height:600px}

  .kaarten{grid-template-columns:repeat(3,1fr)}
  .video-raster{grid-template-columns:repeat(4,1fr)}
  /* Drie in beeld, met een strookje van de vierde erachter. */
  .pakket{flex-basis:calc((100% - 6.6rem) / 3); max-width:none}

  /* Is er een "Beste keuze", dan staat die links vast en schuift alleen
     de rij ernaast. Die rij is dan smaller, dus daar passen er twee in
     beeld met een strookje van de derde erachter. */
  .pakketten-rij.met-vast{display:flex; align-items:flex-start; gap:1.2rem}
  /* De breedte is zo gekozen dat de vaste kaart precies even breed wordt
     als de kaarten in de rij ernaast: die rekenen met de ruimte die
     overblijft, dus een derde hier is niet hetzelfde als een derde daar. */
  .pakketten-rij.met-vast .pakket-vast{
    flex:0 0 calc((100% - 5.6rem) / 3); padding-block:1.5rem 1.2rem;
  }
  .pakketten-rij.met-vast .pakketten{flex:1 1 auto; min-width:0}
  .pakketten-rij.met-vast .pakketten .pakket{flex-basis:calc((100% - 4.4rem) / 2)}
  .ervaringen{grid-template-columns:repeat(3,1fr)}
  .voet-rijen{grid-template-columns:1.4fr 1fr 1fr 1fr}

  /* Kopfoto links, ingrediënten er direct naast op dezelfde hoogte.
     De bereiding schuift onder de foto door; de kaart rechts loopt mee. */
  .recept-indeling{
    display:grid; grid-template-columns:minmax(0,1fr) 380px;
    gap:0 clamp(2rem,4vw,3.5rem); align-items:start;
    grid-template-areas:"held zij" "stappen zij";
    /* De extra ruimte naar de onderste rij, anders valt er een gat
       tussen de foto en de bereiding. */
    grid-template-rows:auto 1fr;
  }
  .recept-held{grid-area:held}
  .recept-zij{grid-area:zij; position:sticky; top:calc(var(--kop-hoogte) + 1.5rem); margin:0}
  .recept-stappen{grid-area:stappen; margin-top:2.2rem}
  .recept-stappen > h2:first-child{margin-top:0}

  /* Smallere kolom, dus ook een lagere foto en wat kleinere titel */
  .recept-held{margin-bottom:0}
  .recept-held.met-foto{min-height:min(52vh, 420px)}
  .recept-held.met-foto h1{font-size:clamp(1.7rem,3vw,2.4rem)}
  .recept-held.met-foto .feit{padding:.6rem .7rem}
  .recept-held.met-foto .feitjes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .recept-held-inhoud .recept-intro{max-width:48ch}
}

@media (min-width:1100px){
  .kaarten-vier{grid-template-columns:repeat(4,1fr)}
}

/* ------------------------------------------------------------------
   Afdrukken: alleen het recept, zonder menu en knoppen
   ------------------------------------------------------------------ */
@media print{
  .kop,.voet,.menu,.deel,.oproep,.knoppen,.porties-regelaar,.kruimels,.blok-zand .knop,
  .recept-acties,#reacties,.kookstand,.wekkers,.muur,.ingr-voet{display:none !important}
  .stap-vink{background:none !important; color:var(--inkt) !important; box-shadow:inset 0 0 0 1.5px var(--inkt)}
  .stappen li:not(:last-child)::after{background:var(--zand-diep)}
  body{background:#fff; font-size:11pt}
  /* Op papier geen sluier en gewoon donkere tekst */
  .recept-held.met-foto{min-height:0; display:block; box-shadow:none}
  .recept-held.met-foto::after{display:none}
  .recept-held-foto{position:static; height:auto; max-height:8cm; object-fit:contain}
  .recept-held.met-foto h1,.recept-held.met-foto .recept-intro{color:var(--inkt) !important; text-shadow:none}
  .recept-held.met-foto .feit{background:none !important; color:var(--inkt) !important; border:1px solid var(--zand-diep)}
  .recept-held.met-foto .feit svg,.recept-held.met-foto .feit small{color:var(--grijs) !important}
  .recept-indeling{display:block}
  .ingredienten-vak{max-height:none !important; overflow:visible !important}
  .feit,.kaart,.formulier,.ingredienten-kaart{box-shadow:none}
  .wekker{border:0; background:none; color:inherit; font-weight:600}
  .wekker svg{display:none}
  .wekker::after{content:none}
  a[href]::after{content:""}
}



/* ==================================================================
   Weekmenu van een lid
   Twee schermen: de plank met al je boekjes, en het boekje zelf dat
   je per dag omslaat. Ze delen de tabel, de vakjes en de tip.
   ================================================================== */

/* ------------------ De plank ------------------ */

.weekboek{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-l);
  overflow:hidden; text-decoration:none; color:inherit; display:block;
}
.weekboek-nu{box-shadow:var(--schaduw); border-color:rgba(95,111,78,.22)}
.weekboek-foto{height:clamp(170px,32vw,250px); background:var(--zand-diep)}
.weekboek-foto img{width:100%; height:100%; object-fit:cover}
.weekboek-tekst{padding:1.3rem 1.3rem 1.4rem}
.weekboek-tekst h2,.weekboek h3{margin:.55rem 0 .25rem}
.weekboek-tekst h2{font-size:clamp(1.5rem,5vw,2rem)}

.weeklabel{
  display:inline-block; border-radius:999px; padding:.22rem .7rem;
  background:var(--zand); color:var(--olijf-donker);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-indent:.12em;
  text-transform:uppercase;
}
.weeklabel-nu{background:var(--klei); color:#fff}

.weekboek-week{margin:0; color:var(--grijs); font-size:.94rem}
.weekboek-mee{margin:.3rem 0 0; color:var(--grijs); font-size:.88rem}

/* Wat er vandaag op tafel komt: de reden dat je de pagina opent. */
.weekboek-vandaag{
  margin:1rem 0 0; padding:.7rem .95rem; border-radius:var(--rond-s);
  background:var(--creme); border-left:3px solid var(--klei);
  font-family:var(--serif); font-size:1.08rem; line-height:1.35;
}
.weekboek-vandaag span{
  display:block; font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-indent:.12em; text-transform:uppercase;
  color:var(--klei); margin-bottom:.15rem;
}

.weekboek-balk{
  display:block; height:6px; margin:1.2rem 0 .45rem;
  background:var(--zand); border-radius:999px; overflow:hidden;
}
.weekboek-balk > span{display:block; height:100%; background:var(--olijf); border-radius:999px}
.weekboek-stand{margin:0 0 1.1rem; font-size:.85rem; color:var(--grijs)}
.weekboek .knoppen{margin-top:.2rem}

.plank-kop{margin:2.6rem 0 1.1rem; font-size:clamp(1.3rem,4vw,1.7rem)}
.weekplank{display:grid; gap:1rem; grid-template-columns:1fr}
.weekboek-klein{padding:1.2rem 1.3rem 1.25rem}
.weekboek-klein:hover{border-color:var(--olijf-licht); transform:translateY(-3px); box-shadow:var(--schaduw)}
.weekboek-klein{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.weekboek-pijl{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem;
  color:var(--olijf-donker); font-size:.9rem; font-weight:600;
}
.weekboek-pijl svg{width:17px; height:17px}

.plank-eerder{margin-top:2.4rem}
.plank-eerder > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  font-weight:600; color:var(--olijf-donker); padding:.5rem 0;
}
.plank-eerder > summary::-webkit-details-marker{display:none}
.plank-eerder > summary svg{width:18px; height:18px; transition:transform .2s ease}
.plank-eerder[open] > summary svg{transform:rotate(180deg)}
.plank-lijst{display:grid; gap:.5rem; margin-top:.6rem}
.plank-regel{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem;
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m);
  padding:.8rem 1rem; text-decoration:none; color:inherit;
}
.plank-regel:hover{border-color:var(--olijf-licht)}
.plank-regel-naam{flex:1; min-width:180px}
.plank-regel-naam small{display:block; color:var(--grijs); font-size:.85rem}
.plank-regel-stand{font-size:.82rem; color:var(--olijf); font-weight:600; white-space:nowrap}

.menu-voetnoot{
  margin:1.1rem auto 0; max-width:60ch; text-align:center;
  font-size:.9rem; color:var(--grijs);
}

.menu-vakken{display:grid; gap:1.1rem; grid-template-columns:1fr}
.menu-vak{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m); padding:1.3rem 1.3rem 1.1rem;
}
.menu-vak h3{font-size:1.15rem; margin-bottom:.7rem}
.menu-vak ul,.menu-vak ol{margin:0; padding-left:1.15rem; display:grid; gap:.35rem}
.menu-vak li{font-size:.94rem; color:var(--grijs)}
.menu-vak li::marker{color:var(--olijf)}
.menu-vak p{margin:0; font-size:.94rem; color:var(--grijs)}
.menu-tip{
  margin:1.2rem 0 0; background:var(--zand); border-radius:var(--rond-m);
  padding:.95rem 1.2rem; font-size:.93rem; color:var(--grijs); text-align:center;
}
.menu-tip b{color:var(--inkt)}

/* --- Het weekblad: zeven dagen onder elkaar ---
   Dezelfde taal als de gerechten zelf. De datum staat als scheur-
   kalenderblaadje links, de gerechten ernaast. Daardoor is een rij maar
   zo hoog als zijn inhoud en passen alle zeven dagen op een scherm -
   in twee kolommen bleef de zondag altijd alleen achter. */
.weekdagen{display:grid; gap:.6rem}
.weekdag{
  display:flex; align-items:center; gap:.9rem; padding:.7rem .9rem;
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m);
  text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.weekdag:hover{
  border-color:var(--olijf-licht); transform:translateX(3px); box-shadow:var(--schaduw);
}
/* Vandaag krijgt dezelfde kleiring als in de dagenstrook. */
.weekdag.nu{border-color:var(--klei); box-shadow:inset 0 0 0 1px var(--klei)}
.weekdag.af{background:rgba(95,111,78,.06); border-color:rgba(95,111,78,.2)}
.weekdag.leeg{background:none; border-style:dashed; opacity:.7}

/* Het kalenderblaadje: dag, datum, maand onder elkaar. */
.weekdag-datum{
  flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:3.1rem; padding:.4rem 0; border-radius:12px; line-height:1;
  background:var(--creme); border:1px solid rgba(95,111,78,.14);
}
.weekdag-datum b{font-family:var(--serif); font-size:1.25rem; font-weight:600; margin:.1rem 0}
.weekdag-datum small{
  font-size:.56rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--olijf-licht);
}
.weekdag-kort{color:var(--olijf) !important}
.weekdag.nu .weekdag-datum{background:var(--klei); border-color:var(--klei); color:#fff}
.weekdag.nu .weekdag-datum small{color:rgba(255,255,255,.85) !important}

.weekdag-gangen{flex:1; min-width:0; list-style:none; margin:0; padding:0; display:grid; gap:.35rem}
.weekdag-gangen li{display:flex; align-items:center; gap:.6rem; min-width:0}
.weekdag-beeld{
  flex:none; width:36px; height:36px; border-radius:10px; overflow:hidden;
  background:var(--creme); border:1px solid rgba(95,111,78,.1);
  display:grid; place-items:center; color:var(--olijf-licht);
}
.weekdag-beeld img{width:100%; height:100%; object-fit:cover}
.weekdag-beeld svg{width:17px; height:17px}
.weekdag-wat{flex:1; min-width:0}
.weekdag-wat .gang-label{font-size:.58rem; letter-spacing:.12em; text-indent:.12em}
.weekdag-wat b{display:block; font-size:.92rem; font-weight:500; line-height:1.3; color:var(--inkt)}
.weekdag-gangen li.af .weekdag-wat b{color:var(--olijf-donker)}
.weekdag-vink{
  flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:rgba(95,111,78,.14); color:var(--olijf);
}
.weekdag-vink svg{width:12px; height:12px; stroke-width:3}

/* De calorieën en het "helemaal af"-rondje, rechts in de rij. */
.weekdag-mee{flex:none; display:flex; align-items:center; gap:.5rem}
.weekdag-kcal{
  font-size:.78rem; font-weight:600; color:var(--grijs);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.weekdag-klaar{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--olijf); color:var(--creme);
}
.weekdag-klaar svg{width:13px; height:13px; stroke-width:3}
.weekdag-niets{flex:1; margin:0; font-size:.88rem; color:var(--grijs)}

/* Op een telefoon knijpt de kolom met calorieën de gerechtnamen dicht -
   "Butter Chicken-style Curry" viel dan over drie regels. Daar krijgt
   hij dus een eigen regel onderaan. */
@media (max-width:560px){
  .weekdag{flex-wrap:wrap}
  .weekdag-mee{width:100%; justify-content:flex-end; margin-top:.15rem}
}
/* ------------------ Het boekje ------------------ */

/* --- De kop: waar je bent en hoever je bent --- */
.boekje-kop{margin-bottom:1.3rem}
.boekje-terug{
  display:inline-flex; align-items:center; gap:.2rem; margin-bottom:.5rem;
  font-size:.85rem; font-weight:600; color:var(--grijs); text-decoration:none;
}
.boekje-terug:hover{color:var(--olijf-donker)}
.boekje-terug svg{width:16px; height:16px}
.boekje-rij{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.8rem 2rem}
.boekje-kop h1{margin:0 0 .2rem; font-size:clamp(1.75rem,6vw,2.7rem)}
.boekje-week{margin:0; color:var(--grijs); font-size:.95rem}

/* De stand staat rechts naast de titel, als een klein etiketje. */
.boekje-stand{
  display:flex; align-items:center; gap:.6rem; margin:0;
  background:var(--wit); border:var(--rand); border-radius:999px;
  padding:.4rem .95rem .4rem .75rem;
  font-size:.82rem; color:var(--grijs); white-space:nowrap;
}
.boekje-stand b{color:var(--olijf-donker); font-size:.95rem}
.boekje-balk{width:52px; height:5px; background:var(--zand-diep); border-radius:999px; overflow:hidden; flex:none}
.boekje-balk > span{display:block; height:100%; background:var(--olijf); border-radius:999px}

/* De calorieën van de week; alleen te zien als Kim ze voor deze cliënt
   heeft aangezet. Niet iedereen wil met getallen bezig zijn. */
.boekje-kcal{
  display:flex; align-items:center; gap:.4rem; margin:.5rem 0 0;
  font-size:.85rem; color:var(--grijs);
}
.boekje-kcal svg{width:16px; height:16px; flex:none; color:var(--klei)}
.boekje-kcal b{color:var(--olijf-donker); font-variant-numeric:tabular-nums}

/* En die van de dag, naast de datum boven het blad. */
.blad-kcal{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.22rem .7rem; border-radius:999px;
  background:var(--creme); border:1px solid rgba(95,111,78,.18);
  font-size:.8rem; font-weight:600; color:var(--grijs); white-space:nowrap;
}

/* --- De dagenstrook: een week als kalenderrij --- */
.bladwijzers{
  position:sticky; top:var(--kop-hoogte); z-index:25;
  display:flex; align-items:stretch; gap:.35rem;
  margin:0 calc(var(--kant) * -1) 1.1rem; padding:.7rem var(--kant);
  background:var(--creme);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bladwijzers::-webkit-scrollbar{display:none}
.bladwijzer-streep{flex:none; width:1px; margin:.45rem .35rem; background:var(--zand-diep)}

.bladwijzer{
  flex:none; border:1px solid transparent; border-radius:14px;
  text-decoration:none; color:var(--grijs); line-height:1.15;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.bladwijzer:hover{background:rgba(95,111,78,.08); color:var(--olijf-donker)}

/* Week en Boodschappen: brede knopjes met een tekening ervoor. */
.bladwijzer-vast{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1rem; font-size:.88rem; font-weight:600;
  background:var(--wit); border-color:rgba(95,111,78,.16);
}
.bladwijzer-vast svg{width:17px; height:17px; color:var(--olijf-licht)}

/* De dagen: afkorting boven het datumcijfer, met een stip per gang.
   Elke dag krijgt een eigen tegel; anders leest de strook als één
   knop met wat losse cijfers ernaast. */
.bladwijzer-dag{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.02rem;
  min-width:3.6rem; padding:.45rem .6rem .4rem;
  background:var(--wit); border-color:rgba(95,111,78,.16);
}
.bladwijzer-naam{
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-indent:.11em;
  text-transform:uppercase; color:var(--olijf-licht);
}
.bladwijzer-nr{
  display:flex; align-items:baseline; gap:.18rem;
  font-family:var(--serif); font-size:1.42rem; font-weight:600; color:var(--inkt);
}
/* De maand staat er alleen bij als de week erover heen loopt. */
.bladwijzer-nr small{font-family:var(--sans); font-size:.62rem; font-weight:600; color:var(--grijs)}
.bladwijzer.aan .bladwijzer-nr small{color:rgba(250,246,240,.8)}
.bladwijzer-punten{
  display:flex; align-items:center; justify-content:center; gap:3px;
  height:10px; margin-top:.22rem;
}
.bladwijzer-punten i{width:5px; height:5px; border-radius:50%; background:var(--olijf-licht)}
.bladwijzer-punten svg{width:12px; height:12px; color:var(--olijf); stroke-width:3.2}

/* Vandaag krijgt een kleiring, ook als je op een andere dag staat. */
.bladwijzer-dag.nu{border-color:var(--klei); box-shadow:inset 0 0 0 1px var(--klei)}
.bladwijzer-dag.nu .bladwijzer-naam{color:var(--klei)}
/* Een dag die helemaal af is, kleurt zacht olijf. */
.bladwijzer-dag.af{background:rgba(95,111,78,.12); border-color:rgba(95,111,78,.2)}
/* En het blad dat openligt is volledig olijf. */
.bladwijzer.aan{background:var(--olijf); border-color:var(--olijf); color:var(--creme)}
.bladwijzer.aan:hover{background:var(--olijf-donker)}
.bladwijzer.aan .bladwijzer-naam{color:rgba(250,246,240,.75)}
.bladwijzer.aan .bladwijzer-nr{color:var(--creme)}
.bladwijzer-vast.aan svg{color:var(--creme)}
/* De stip is een gevuld bolletje, het vinkje een lijntekening: de een
   wil een achtergrondkleur, de ander alleen een lijnkleur. */
.bladwijzer.aan .bladwijzer-punten i{background:var(--creme)}
.bladwijzer.aan .bladwijzer-punten svg{color:var(--creme)}

/* --- Een blad: de dag zelf --- */
.blad[hidden]{display:none}
.blad-kop{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem .9rem;
  margin-bottom:1.1rem;
}
.blad-kop h2{margin:0; font-size:clamp(1.5rem,5vw,2.1rem)}
.blad-kop h2 span{color:var(--olijf-licht); font-weight:400}
.blad-kop p{
  flex-basis:100%; margin:0; color:var(--grijs); font-size:.92rem; max-width:56ch;
}
.blad-vandaag{
  background:var(--klei); color:#fff; border-radius:999px; padding:.18rem .65rem;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-indent:.12em; text-transform:uppercase;
}

/* --- Eén gang: ontbijt, lunch, tussendoor of het avondeten ---
   Dicht is het een foto met de naam erover. Open verdwijnt de foto en
   blijft dezelfde regel staan als balk boven het recept, zodat je het
   aantal personen kunt blijven bijstellen terwijl je meeleest. */

.gangen{display:grid; gap:1rem}
.gang{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m);
  overflow:hidden; box-shadow:0 12px 30px -26px rgba(46,49,43,.5);
  scroll-margin-top:calc(var(--kop-hoogte) + 5.5rem);
  transition:box-shadow .25s ease, transform .25s ease;
}
/* Opengeklapt komt de kaart los van de pagina. */
.gang:has(.gerecht[open]){box-shadow:var(--schaduw-diep); transform:translateY(-2px)}

.gerecht > summary{list-style:none; cursor:pointer}
.gerecht > summary::-webkit-details-marker{display:none}

.gerecht-kop{
  position:relative; display:flex; align-items:flex-end; gap:1rem;
  padding:clamp(1rem,3vw,1.3rem);
}
/* Mét foto: beeld over de volle breedte, naam eroverheen. Lager dan de
   held op een receptpagina, want er staan er meerdere onder elkaar. */
.gang.met-foto .gerecht-kop{min-height:clamp(150px,25vw,200px); padding-bottom:clamp(.9rem,2.2vw,1.2rem)}
.gerecht-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .2s ease;
}
.gang.met-foto .gerecht-kop::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,30,26,.05) 0%, rgba(28,30,26,.3) 40%, rgba(28,30,26,.88) 100%);
}
.gerecht-tekst{position:relative; z-index:1; flex:1; min-width:0}
.gerecht-pijl{
  position:relative; z-index:1; flex:none; align-self:center;
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(95,111,78,.25); color:var(--olijf);
  transition:transform .25s ease, background .2s ease;
}
.gerecht-pijl svg{width:17px; height:17px}
.gerecht[open] .gerecht-pijl{transform:rotate(180deg)}
.gerecht-kop:hover .gerecht-pijl{background:rgba(95,111,78,.1)}

.gang-label{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-indent:.14em;
  text-transform:uppercase; color:var(--olijf);
}
.gang-label svg{width:15px; height:15px; flex:none}
.gerecht-kop h3{
  margin:.25rem 0 0; font-size:clamp(1.2rem,3.8vw,1.55rem); line-height:1.18;
}

/* Op de foto wordt alles licht, met een zachte schaduw eronder. */
.gang.met-foto .gerecht-kop .gang-label{color:rgba(255,255,255,.85); text-shadow:0 1px 10px rgba(0,0,0,.5)}
.gang.met-foto .gerecht-kop h3{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.45)}
.gang.met-foto .gerecht-pijl{
  border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.gang.met-foto .gerecht-kop:hover .gerecht-pijl{background:rgba(255,255,255,.25)}

/* Open: de foto weg, de balk wordt gewoon wit. */
.gerecht[open] .gerecht-foto{display:none}
.gerecht[open] .gerecht-kop{min-height:0}
.gerecht[open] .gerecht-kop::after{content:none}
.gang.met-foto .gerecht[open] .gerecht-kop .gang-label{color:var(--olijf); text-shadow:none}
.gang.met-foto .gerecht[open] .gerecht-kop h3{color:var(--inkt); text-shadow:none}
.gang.met-foto .gerecht[open] .gerecht-pijl{
  border-color:rgba(95,111,78,.25); color:var(--olijf); background:none; backdrop-filter:none;
}

/* --- De feiten in de kop: personen bijstellen, kcal, tijd --- */
.gerecht-feiten{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.6rem}
.feit-klein{
  display:inline-flex; align-items:center; padding:.3rem .7rem; border-radius:999px;
  border:1px solid rgba(95,111,78,.2); background:var(--creme);
  font-size:.78rem; font-weight:600; color:var(--grijs); white-space:nowrap;
}
.porties-klein{
  display:inline-flex; align-items:center; gap:.35rem; width:auto; margin:0;
  padding:.16rem .75rem .16rem .18rem; background:var(--creme);
  border-color:rgba(95,111,78,.2);
}
.porties-klein span{font-size:.78rem; font-weight:600}
.porties-klein .porties-knoppen{gap:.1rem}
.porties-klein .porties-knoppen button{width:30px; height:30px; font-size:1.05rem; background:var(--zand-diep)}
.porties-klein .porties-knoppen output{min-width:1.4rem; font-size:.95rem}

/* Op de foto worden het matglazen plaatjes, net als op een receptpagina. */
.gang.met-foto .gerecht:not([open]) .feit-klein,
.gang.met-foto .gerecht:not([open]) .porties-klein{
  background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff;
  backdrop-filter:blur(8px);
}
.gang.met-foto .gerecht:not([open]) .porties-klein .porties-knoppen button{
  background:rgba(255,255,255,.22); color:#fff;
}
.gang.met-foto .gerecht:not([open]) .porties-klein .porties-knoppen button:hover{background:rgba(255,255,255,.4)}
/* Het woordje achter de teller staat standaard in grijs; op een foto
   moet dat wit, anders valt het weg tegen het beeld. */
.gang.met-foto .gerecht:not([open]) .porties-klein span,
.gang.met-foto .gerecht:not([open]) .porties-klein output{color:#fff}

/* Op een telefoon vallen vier plaatjes naast elkaar over drie regels en
   wordt de kaart onnodig hoog. Een maatje kleiner scheelt een regel. */
@media (max-width:560px){
  .gerecht-feiten{gap:.3rem; margin-top:.5rem}
  .feit-klein{font-size:.72rem; padding:.25rem .6rem}
  .porties-klein{padding:.12rem .6rem .12rem .14rem; gap:.25rem}
  .porties-klein span{font-size:.72rem}
  .porties-klein .porties-knoppen button{width:27px; height:27px; font-size:.95rem}
  .porties-klein .porties-knoppen output{min-width:1.2rem; font-size:.88rem}
}

/* --- Wat je nodig hebt en hoe je het maakt --- */
.gerecht-binnen{padding:0 clamp(1rem,3vw,1.3rem) clamp(1.1rem,3vw,1.4rem)}
.gerecht-kolommen{display:grid; gap:1.4rem; padding-top:.3rem}
.gerecht-deel h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-indent:.1em; text-transform:uppercase; color:var(--grijs);
  margin:0 0 .7rem; padding-bottom:.5rem; border-bottom:1px solid var(--zand);
}

/* De hoeveelheid in een eigen kolom, zodat de namen onder elkaar
   uitlijnen en je lijstje leest als een receptkaart. */
.menu-ingredienten{list-style:none; margin:0; padding:0}
/* De hoeveelheid krijgt een vaste kolom, anders lopen de namen niet
   meer onder elkaar door: elke regel is een eigen raster. Breed genoeg
   voor "4 theelepels", want die breekt anders over twee regels. */
.menu-ingredienten li{
  display:grid; grid-template-columns:6.6rem 1fr; gap:.7rem; align-items:baseline;
  padding:.4rem 0; border-bottom:1px solid rgba(95,111,78,.08);
  font-size:.94rem; line-height:1.45;
}
.menu-ingredienten li:last-child{border-bottom:0}
.menu-ingredienten .hoeveel{
  text-align:right; font-weight:600; color:var(--olijf-donker);
  font-variant-numeric:tabular-nums;
}
.menu-ingredienten .ingr-naam{color:var(--inkt)}
.menu-ingredient-kop{
  display:block !important; margin-top:.7rem; border-bottom:0 !important;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--olijf);
}
.menu-ingredienten li:first-child.menu-ingredient-kop{margin-top:0}

/* De stappen met een lijntje ertussen, zodat het een route wordt. */
.menu-stappen{list-style:none; margin:0; padding:0; counter-reset:stap}
.menu-stappen li{
  counter-increment:stap; position:relative; padding:0 0 1rem 2.3rem;
  font-size:.94rem; line-height:1.6; color:var(--grijs);
}
.menu-stappen li:last-child{padding-bottom:0}
.menu-stappen li::before{
  content:counter(stap); position:absolute; left:0; top:0;
  width:1.55rem; height:1.55rem; border-radius:50%;
  background:var(--olijf); color:var(--creme);
  font-size:.78rem; font-weight:700; display:grid; place-items:center;
}
/* Het verbindingslijntje tussen twee stappen. */
.menu-stappen li::after{
  content:""; position:absolute; left:calc(.775rem - 1px); top:1.8rem; bottom:.35rem;
  width:2px; background:rgba(95,111,78,.16);
}
.menu-stappen li:last-child::after{content:none}

.gerecht-tip{
  margin:1.2rem 0 0; padding:.85rem 1.05rem; border-radius:var(--rond-s);
  background:var(--creme); border-left:3px solid var(--klei-licht);
  font-size:.92rem; color:var(--grijs); line-height:1.55;
}
.gerecht-tip b{display:block; color:var(--inkt); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:.15rem}

.gerecht-voeding{margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--zand)}
.gerecht-voeding h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-indent:.1em; text-transform:uppercase; color:var(--grijs); margin:0 0 .7rem;
}
.gerecht-schatting{margin:.6rem 0 0; font-size:.78rem; color:var(--grijs)}

/* --- Afvinken: een balk onderaan de kaart --- */
.gang-voet{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.7rem 1rem; padding:.85rem 1.3rem; background:var(--creme);
  border-top:1px solid var(--zand);
}
.gang.af .gang-voet{background:rgba(95,111,78,.1)}
.gang.af .gerecht[open] .gerecht-kop h3{color:var(--olijf-donker)}
.gang.verhuisd .gang-voet{background:rgba(194,114,74,.12)}

.vink{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem}
.vink-knop{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--wit); border:1px solid rgba(95,111,78,.28); border-radius:999px;
  padding:.4rem .95rem .4rem .45rem; cursor:pointer;
  font-size:.88rem; font-weight:600; color:var(--olijf-donker);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.vink-knop:hover{border-color:var(--olijf-licht); background:rgba(95,111,78,.06)}
.vink-rondje{
  width:22px; height:22px; flex:none; border-radius:50%;
  border:1.5px solid rgba(95,111,78,.3); background:var(--wit);
  display:grid; place-items:center; color:transparent;
}
.vink-rondje svg{width:13px; height:13px; stroke-width:3}
.vink.aan .vink-knop{background:var(--olijf); border-color:var(--olijf); color:var(--creme)}
.vink.aan .vink-knop:hover{background:var(--olijf-donker); border-color:var(--olijf-donker)}
.vink.aan .vink-rondje{background:var(--creme); border-color:var(--creme); color:var(--olijf)}
.gang.verhuisd .vink.aan .vink-knop{background:var(--klei); border-color:var(--klei)}
.gang.verhuisd .vink.aan .vink-knop:hover{filter:brightness(.94)}
.gang.verhuisd .vink.aan .vink-rondje{color:var(--klei)}

.vink-anders{font-size:.8rem; color:var(--grijs)}
.vink-anders > summary{
  list-style:none; cursor:pointer; padding:.25rem 0;
  text-decoration:underline; text-underline-offset:3px; text-decoration-style:dotted;
}
.vink-anders > summary::-webkit-details-marker{display:none}
.vink-anders > summary:hover{color:var(--olijf-donker)}
/* Staat het rijtje dagen open, dan krijgt het een eigen regel. */
.vink-anders[open]{flex-basis:100%}
.vink-dagen{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem}
.vink-dag{
  width:2.4rem; padding:.35rem 0; cursor:pointer;
  background:var(--wit); border:1px solid rgba(95,111,78,.22); border-radius:9px;
  font-size:.78rem; font-weight:600; color:var(--grijs);
}
.vink-dag:hover{border-color:var(--olijf-licht); color:var(--olijf-donker)}
.vink-dag.aan{background:var(--klei); border-color:var(--klei); color:#fff}

/* Kookstand en recept, rechts in dezelfde balk. */
.gang-acties{display:flex; align-items:center; gap:.45rem}
.gang-actie{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.4rem .8rem; border-radius:999px; border:1px solid transparent;
  font-size:.83rem; font-weight:600; color:var(--olijf-donker); text-decoration:none;
}
.gang-actie svg{width:16px; height:16px}
.gang-actie:hover{background:rgba(95,111,78,.09)}
.gang-kook{background:var(--klei); color:#fff}
.gang-kook:hover{background:var(--klei); filter:brightness(.94)}

/* --- Wat er van een andere dag op deze dag terechtkwam --- */
.elders{
  margin-top:1.2rem; padding:1rem 1.15rem;
  background:var(--zand); border-radius:var(--rond-m);
}
.elders h3{font-size:.95rem; margin-bottom:.55rem}
.elders ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.elders a{
  display:flex; flex-wrap:wrap; gap:.15rem .5rem; text-decoration:none; color:inherit; font-size:.9rem;
}
.elders a b{color:var(--olijf-donker)}
.elders a span{color:var(--grijs)}
.elders a:hover b{text-decoration:underline}

/* --- Omslaan naar het vorige of volgende blad --- */
.blader{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--zand);
}
.blader-knop{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .95rem; border-radius:999px; border:1px solid rgba(95,111,78,.25);
  font-size:.9rem; font-weight:600; color:var(--olijf-donker); text-decoration:none;
  background:var(--wit);
}
.blader-knop:hover{background:rgba(95,111,78,.08)}
.blader-knop svg{width:17px; height:17px; flex:none}
.blader-verder{background:var(--olijf); border-color:var(--olijf); color:var(--creme)}
.blader-verder:hover{background:var(--olijf-donker)}

/* De week- en boodschappenbladen zijn geen kaarten maar losse blokken;
   die krijgen hun eigen vel eromheen zodat ze niet zweven. */
#blad-week,#blad-lijst{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-m);
  padding:clamp(1.2rem,4vw,2rem);
  box-shadow:0 12px 30px -26px rgba(46,49,43,.5);
}
#blad-lijst .menu-vak{background:var(--creme); border-color:transparent}

@media (min-width:760px){
  .menu-vakken{grid-template-columns:repeat(2,1fr)}
  /* Zodra de zeven dagen naast elkaar passen, laten we ze de breedte van
     het blad eronder vullen. Anders eindigt de strook halverwege en
     blijft de rechterkant kaal. Schuiven hoeft dan ook niet meer. */
  .bladwijzers{overflow:visible}
  .bladwijzer-dag{flex:1 1 0; min-width:3.4rem}
  /* Boodschappen links, bereiding rechts. De stappen krijgen de ruimste
     kolom: daar staan hele zinnen, links alleen korte regels. */
  .gerecht-kolommen{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2rem; align-items:start}
  .gerecht-deel:only-child{grid-column:1 / -1}
  .gerecht-binnen{padding:0 1.6rem 1.5rem}
  .gerecht-kop{padding:1.3rem 1.6rem}
  .gang.met-foto .gerecht-kop{padding-bottom:1.3rem}
  .gang-voet{padding:.9rem 1.6rem}
  .weekplank{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

@media (min-width:900px){
  /* Lunch en avondeten naast elkaar: dan is een dag één regel hoog en
     zie je de hele week in één blik, zonder te scrollen. */
  .weekdag-gangen{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem}

  /* Alleen mét foto twee kolommen; zonder foto zou de tekst in een
     kolom van veertig procent blijven hangen. */
  .weekboek-nu.met-foto{display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); align-items:stretch}
  .weekboek-nu.met-foto .weekboek-foto{height:100%}
  .weekboek-nu .weekboek-tekst{padding:2rem 2.2rem}
  .weekboek-nu.met-foto .weekboek-tekst{align-self:center}

}

@media (prefers-reduced-motion:reduce){

  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Een vinkje met tekst ernaast in een formulier */
.veld-vink{
  display:flex; align-items:flex-start; gap:.6rem; margin:.1rem 0 .45rem;
  font-size:.94rem; font-weight:400; cursor:pointer;
}
.veld-vink input{width:19px; height:19px; margin:.15rem 0 0; accent-color:var(--olijf); flex:none}

/* ------------------------------------------------------------------
   Website beheerd door duonova.
   De verwijzing naar het bureau, onderaan de voet. Het beeldmerk staat
   als SVG in de HTML en neemt de kleuren van deze site over.
   ------------------------------------------------------------------ */
/* De hele zin is de link. Geen onderstreping: hij moet even rustig
   blijven als de rest van de voetregel. */
a.dn-credit{
  display:inline-flex; align-items:center; gap:.45em; white-space:nowrap;
  text-decoration:none; border-radius:999px; padding:.15em .2em;
  transition:color .18s ease;
}
/* inline-block en niet block. In de flexrij hierboven maakt dat geen
   verschil - een flexkind wordt toch een blok - maar komt de verwijzing
   ooit in gewone tekstloop terecht, dan eist een block-element een eigen
   regel op en valt het merkje tussen "beheerd door" en "duonova" uit de
   zin. Precies dat gebeurde in de voet. */
.dn-credit-merk{
  display:inline-block; vertical-align:-.16em;
  width:1.05em; height:1.05em; border-radius:.28em; flex-shrink:0;
}
.dn-credit-naam{font-weight:600; letter-spacing:-.01em}

/* Op de donkere voet. De aanloop blijft gedempt, de naam licht op. */
a.dn-credit-donker{color:rgba(250,246,240,.55)}
a.dn-credit-donker .dn-credit-naam{color:rgba(250,246,240,.8)}
a.dn-credit-donker:hover{color:rgba(250,246,240,.8)}
a.dn-credit-donker:hover .dn-credit-naam{color:#fff}
.dn-credit-donker .dn-credit-punt{color:var(--klei-licht, #E5A883)}

/* Op een crème of witte ondergrond */
a.dn-credit-licht{color:var(--grijs, #6E6A61)}
a.dn-credit-licht .dn-credit-naam{color:var(--inkt, #2E312B)}
a.dn-credit-licht:hover{color:var(--olijf, #5F6F4E)}
a.dn-credit-licht:hover .dn-credit-naam{color:var(--olijf, #5F6F4E)}
.dn-credit-licht .dn-credit-punt{color:var(--klei, #C2724A)}

/* Wie met het toetsenbord navigeert moet zien waar hij is */
.dn-credit:focus-visible{outline:2px solid var(--olijf-licht, #8B9A78); outline-offset:3px}

@media (max-width:520px){
  .dn-credit{font-size:.95em}
}

/* ------------------------------------------------------------------
   Kookstand op een ruim scherm
   ------------------------------------------------------------------ */
@media (min-width:900px){
  /* Op een telefoon begint de stap bovenaan, want daar is de hoogte
     krap. Op een breed scherm zou dat een halve meter leegte onder de
     tekst geven, dus daar staat hij weer midden in beeld. */
  .kookstand-vak{display:flex; align-items:center; justify-content:center}

  /* De knopbalk blijft over de volle breedte, maar de knoppen zelf
     lopen niet meer van rand tot rand. */
  .kookstand-voet{padding-inline:max(var(--kant), calc((100% - 46rem) / 2))}
}

/* ------------------------------------------------------------------
   Sociale kanalen in het uitklapmenu
   Als los icoontje blijft het een wit blokje dat onderaan zweeft. In een
   menu vol brede regels hoort het een regel te zijn, met zijn naam erbij.
   Het label staat al in de opmaak voor schermlezers; hier halen we het
   gewoon tevoorschijn. In de voet en in de balk blijft het een icoontje.
   ------------------------------------------------------------------ */
@media (max-width:899.98px){
  .menu .menu-sociaal{display:grid; gap:.5rem; margin-top:1.1rem}
  .menu .menu-sociaal a.sociaal-knop{
    width:auto; height:auto; border-radius:999px;
    padding:.95rem 1.3rem; display:flex; align-items:center; justify-content:center; gap:.6rem;
  }
  .menu .menu-sociaal a.sociaal-knop .schermlezer{
    position:static; width:auto; height:auto; padding:0; margin:0;
    overflow:visible; clip:auto; white-space:nowrap;
    font-family:var(--sans); font-size:.97rem; font-weight:600;
  }
}

/* ------------------------------------------------------------------
   Kopbalk op een telefoon: logo in het midden
   Drie kolommen in plaats van links-en-rechts, met links een lege kolom
   even breed als de menuknop. Zo staat het logo écht in het midden van
   het scherm en niet in het midden van wat er overblijft.
   ------------------------------------------------------------------ */
@media (max-width:899.98px){
  .kop-binnen{
    display:grid; grid-template-columns:44px minmax(0,1fr) 44px;
    align-items:center; gap:.6rem;
  }
  .merk{grid-column:2; justify-content:center}
  .menu-knop{grid-column:3; justify-self:end}
}
/* Die lege kolom links kost 44 pixels, en samen met de menuknop en de
   marges blijft er op een smal toestel 128 pixels over voor de naam.
   "Kim Coenraad's Lifestyle" heeft er 185 nodig en werd dus afgekapt
   tot "Kim Coenraad's Lifes...". Een afgekapte bedrijfsnaam is erger
   dan een logo dat niet precies in het midden staat, dus hieronder
   vervalt de lege kolom en staat het merk links, zoals op de meeste
   telefoonsites. Vanaf 421 pixels past alles wel en blijft het
   gecentreerd staan. */
@media (max-width:420px){
  .kop-binnen{grid-template-columns:minmax(0,1fr) 44px}
  .merk{grid-column:1; justify-content:flex-start}
  .menu-knop{grid-column:2}
}

/* ------------------------------------------------------------------
   Trefvlakken op een telefoon
   Gemeten op 375 pixels: de links in de voet waren 16 tot 19 pixels hoog
   en het handvat naast een tijd in een stap 31. Met een duim raak je dat
   niet betrouwbaar. De regel is 44; waar dat de regelafstand zou breken
   houden we het op een ruime veertig.
   ------------------------------------------------------------------ */
@media (max-width:899.98px){
  .voet ul{gap:.05rem}
  .voet ul a{display:inline-block; padding:.4rem 0}
  /* De uitzondering voor de duonova-verwijzing is geen schoonheidsfoutje:
     die is van binnen een flexrij met een beeldmerkje erin, en werd door
     display:inline-block uit elkaar getrokken tot drie regels onder
     elkaar - "Website beheerd door", het merkje, "duonova.". Ze krijgt
     haar trefvlak nu via padding, met haar eigen opmaak intact. */
  .voet-onder a:not(.dn-credit){display:inline-block; padding:.45rem 0}
  .voet-onder .dn-credit{padding-block:.45rem}
  .ig-strook a{display:inline-block; padding:.45rem 0}
  .wekker{padding:.3rem .7rem .3rem .55rem}
}

/* ------------------------------------------------------------------
   De voet op een telefoon
   Vier kolommen onder elkaar maakten de voet 1149 pixels lang: ruim
   anderhalf scherm aan linkjes, nadat je de pagina zelf al uit had.
   Dat leest als een restje in plaats van als een afsluiting.

   De drie lijstjes staan daarom naast elkaar in twee kolommen, met de
   naam en de sociale knoppen daarboven over de volle breedte. Een regel
   in zo'n lijstje is tweeëndertig pixels in plaats van veertig - nog
   altijd ruim te raken met een duim, en samen met de twee kolommen
   scheelt het bijna de helft.

   De onderste regel stond links-en-rechts uitgevuld, waardoor het
   copyright en de twee linkjes elk een eigen hoek zochten. Gecentreerd
   onder elkaar is het één rustig blokje.
   ------------------------------------------------------------------ */
@media (max-width:639.98px){
  .voet{padding-top:2.4rem}
  .voet-rijen{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 1.1rem}
  .voet-merk{grid-column:1 / -1}
  /* Het laatste lijstje blijft in zijn eentje over op de onderste rij.
     In een halve kolom brak "Kennismaking aanvragen" middenin, terwijl
     de andere helft leegstond. Over de volle breedte past het gewoon. */
  .voet-rijen > :last-child{grid-column:1 / -1}
  .voet-merk p{margin-top:.8rem}
  .voet .menu-sociaal{margin-top:1.1rem}
  .voet h4{margin-bottom:.5rem}
  .voet ul{font-size:.9rem}
  .voet ul a{padding:.32rem 0}

  .voet-onder{
    margin-top:1.8rem; padding-top:1.1rem;
    flex-direction:column; align-items:center; text-align:center; gap:.15rem;
  }
  .voet-links{flex-direction:column; align-items:center; gap:.15rem}
}
/* ------------------------------------------------------------------
   Receptkaarten op een telefoon: twee naast elkaar
   Eén kaart per regel is 381 pixels hoog; met eenentwintig recepten is
   dat ruim achtduizend pixels scrollen en zie je anderhalf recept per
   scherm. Zo staan er drie tot vier op je scherm en is het een derde.
   Het zinnetje onder de titel gaat eruit: in een kolom van 168 pixels
   wordt dat een prop. Kaarten naast elkaar worden vanzelf even hoog,
   want het tekstvlak rekt mee in de rij.
   ------------------------------------------------------------------ */
@media (max-width:639.98px){
  .kaarten{grid-template-columns:repeat(2,1fr); gap:.8rem}
  .kaart-tekst{padding:.7rem .75rem .85rem; gap:.3rem}
  .kaart-tekst h3{font-size:.98rem; line-height:1.25}
  .kaart-tekst p{display:none}
  .kaart-voet{padding-top:.55rem; font-size:.74rem; gap:.15rem .55rem}
  .kaart-voet svg{width:13px; height:13px}
  .kaart-merk{font-size:.62rem; padding:.2rem .5rem}
  .kaart-video{width:28px; height:28px; right:.5rem; top:.5rem}
}

/* ------------------------------------------------------------------
   Knoppen onder elkaar op een telefoon
   Ze braken al naar een nieuwe regel, maar hielden ieder hun eigen
   breedte: twee knoppen onder elkaar met een verschillende rand, links
   uitgelijnd. Onder elkaar én even breed leest als één geheel, en je
   raakt ze met je duim zonder te mikken.
   De kleine knoppen (filters wissen, delen) houden hun eigen maat.
   ------------------------------------------------------------------ */
@media (max-width:639.98px){
  .knoppen{flex-direction:column; align-items:stretch}
  .knoppen > .knop{width:100%}
  .knoppen > .knop-klein{width:auto; align-self:flex-start}
  .knoppen[style*="center"] > .knop-klein{align-self:center}
}

/* De Instagram-regel past op een telefoon niet op één regel. Met een
   ruime tussenruimte valt de naam er los onder; zo blijft het één zin
   die toevallig omslaat. */
@media (max-width:639.98px){
  .ig-strook{gap:.15rem .7rem; margin-top:1.2rem}
}

/* ------------------------------------------------------------------
   Het eigen hoekje van een ingelogd lid
   Iedereen ziet dezelfde menu-items; alles wat persoonlijk is zit
   achter één knopje met de eigen naam erop. Op een telefoon is dat
   een uitklapbaar blokje onderin het menu, op een groot scherm een
   knopje in de balk met een paneeltje eronder.
   ------------------------------------------------------------------ */
.ik{margin-top:1.3rem; border-top:1px solid rgba(95,111,78,.12); padding-top:1rem}
.ik > summary{list-style:none; cursor:pointer}
.ik > summary::-webkit-details-marker{display:none}
.ik-knop{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--serif); font-size:1.4rem; padding:.3rem 0;
}
.ik-bol{
  position:relative; flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--olijf); color:var(--creme); display:grid; place-items:center;
  font-family:var(--serif); font-size:1.1rem; line-height:1;
}
/* Rood stipje zodra er iets op je wacht: boodschappen of een vragenlijst. */
.ik-bol em{
  position:absolute; top:-1px; right:-1px; width:13px; height:13px;
  border-radius:50%; background:var(--klei); border:2px solid var(--creme);
}
.ik-pijl{width:20px; height:20px; margin-left:auto; color:var(--olijf-licht); transition:transform .2s ease}
.ik[open] .ik-pijl{transform:rotate(180deg)}
.ik-paneel{display:flex; flex-direction:column}
.ik-hoi{display:none}
.ik-paneel a.ik-uit{color:var(--grijs)}

@media (min-width:900px){
  .ik{position:relative; margin:0 0 0 .55rem; border-top:0; padding-top:0}
  .ik-knop{
    gap:.5rem; padding:.28rem .85rem .28rem .3rem; border-radius:999px;
    border:var(--rand); background:var(--wit);
    font-family:var(--sans); font-size:.9rem; font-weight:600;
  }
  .ik-knop:hover{border-color:var(--olijf-licht)}
  .ik-hier .ik-knop{border-color:var(--olijf); background:rgba(95,111,78,.08)}
  .ik-bol{width:30px; height:30px; font-size:.88rem}
  .ik-bol em{width:11px; height:11px; border-color:var(--wit)}
  .ik-pijl{width:15px; height:15px; margin-left:0}

  .ik-paneel{
    position:absolute; top:calc(100% + .55rem); right:0; z-index:60;
    min-width:236px; padding:.45rem;
    background:var(--wit); border:var(--rand); border-radius:var(--rond-m);
    box-shadow:0 18px 40px rgba(46,49,43,.15);
  }
  .ik-hoi{
    display:block; margin:.45rem .75rem .5rem;
    font-size:.72rem; font-weight:700; letter-spacing:.14em; text-indent:.14em;
    text-transform:uppercase; color:var(--olijf);
  }
  /* De regels in het paneeltje zijn een lijst, geen knopjes in een balk. */
  .menu .ik-paneel a{
    justify-content:flex-start; gap:.4rem;
    font-size:.93rem; font-weight:500; padding:.58rem .75rem; border-radius:10px;
  }
  .menu .ik-paneel a[aria-current="page"]{background:rgba(95,111,78,.12); color:var(--olijf-donker)}
  .menu .ik-paneel a.ik-uit{
    margin-top:.3rem; padding-top:.68rem;
    border-top:1px solid var(--zand); border-radius:0 0 10px 10px;
  }
}
/* ------------------------------------------------------------------
   Geen ongevraagde zoom bij het invullen
   Tikt iemand op een veld waarvan de letters kleiner zijn dan zestien
   pixels, dan zoomt een iPhone op de hele pagina in. Je staat dan
   ineens scheef in het formulier en moet met twee vingers terug. Dat
   overkwam de datumkiezer en de velden met een link om te kopiëren.
   Deze regel geldt alleen waar niet met een muis gewezen wordt, dus op
   een laptop blijft een klein veld gewoon klein.
   ------------------------------------------------------------------ */
@media (hover:none){
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea{font-size:max(1rem, 1em)}
}

/* ------------------------------------------------------------------
   Trefvlakken: wat je met een duim moet kunnen raken
   Een vingertop is ongeveer 44 pixels breed. Sommige knopjes zijn
   bewust klein - een plusje in een maaltijdkaart mag die kaart niet
   opeten - en die maken we dus niet groter, maar we leggen er een
   onzichtbaar vlak omheen. Je ziet hetzelfde, je raakt meer.
   ------------------------------------------------------------------ */
.porties-klein .porties-knoppen button,
.vink-dag{position:relative}
.porties-klein .porties-knoppen button::after,
.vink-dag::after{
  content:""; position:absolute; top:50%; left:50%;
  width:max(100%,44px); height:max(100%,44px);
  transform:translate(-50%,-50%);
}

/* Terug naar de lijst met weekmenu's: een pijltje met een woord erachter.
   Het stond op de regelhoogte van de tekst en dat is te laag om te raken. */
.boekje-terug{padding:.5rem .55rem .5rem 0; margin-left:-.1rem}

/* Uitklappers ("andere dag", "mijn account opzeggen") zijn een regel
   tekst met een driehoekje. Als knop mogen ze wat meer lijf hebben. */
.gang-vink summary,
.formulier details > summary,
.blok details > summary{padding-block:.45rem}

/* Een titel die tegelijk een link is, midden in een kaart. Inline-block
   met wat lucht maakt er een trefvlak van zonder de regel te verzetten. */
.reactie-kop b a,
.plank-regel-naam a{display:inline-block; padding-block:.22rem}
/* ------------------------------------------------------------------
   Rijen die je opzij schuift
   Categorieën, sorteren, de stappen van de vragenlijst en de dagen van
   een weekmenu passen op een telefoon niet naast elkaar. Ze schuiven
   dus opzij. Dat werkte al, maar je zág het niet: de laatste tegel werd
   halverwege afgesneden en dat leest als een fout in plaats van als een
   uitnodiging. Drie dingen lossen dat op.

   1. Een vervagende rand waar nog iets achter zit. Die verschijnt pas
      als er echt iets te schuiven valt - JavaScript zet daarvoor het
      kenmerk data-schuif. Zonder JavaScript blijft alles gewoon werken,
      je mist dan alleen het vleugje.
   2. Aanklikken op een vast punt (scroll-snap), zodat een tegel niet
      half in beeld blijft hangen.
   3. overscroll-behavior: zonder die regel pakt de browser een veeg die
      voorbij het einde doorloopt op als "ga terug naar de vorige
      pagina". Midden in een weekmenu is dat schrikken.
   ------------------------------------------------------------------ */
.chips,
.intake-nav,
.pakketten,
.zelf-tegels,
.bladwijzers{
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--kant);
}
.chips > *,
.intake-nav > li,
.pakketten > *,
.zelf-tegels > *,
.bladwijzers > *{scroll-snap-align:start}

.chips[data-schuif="rechts"],
.intake-nav[data-schuif="rechts"],
.pakketten[data-schuif="rechts"],
.zelf-tegels[data-schuif="rechts"],
.bladwijzers[data-schuif="rechts"]{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.4rem),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 2.4rem),transparent);
}
.chips[data-schuif="links"],
.intake-nav[data-schuif="links"],
.pakketten[data-schuif="links"],
.zelf-tegels[data-schuif="links"],
.bladwijzers[data-schuif="links"]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 2.4rem);
          mask-image:linear-gradient(to right,transparent,#000 2.4rem);
}
.chips[data-schuif="beide"],
.intake-nav[data-schuif="beide"],
.pakketten[data-schuif="beide"],
.zelf-tegels[data-schuif="beide"],
.bladwijzers[data-schuif="beide"]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 2.4rem,#000 calc(100% - 2.4rem),transparent);
          mask-image:linear-gradient(to right,transparent,#000 2.4rem,#000 calc(100% - 2.4rem),transparent);
}
/* ------------------------------------------------------------------
   De breedte vasthouden
   Wordt een pagina korter of langer - een blok dat je uitklapt, een
   tabblad met minder rijen - dan verdwijnt of verschijnt de schuifbalk
   rechts. De inhoud staat gecentreerd, dus die springt dan een stukje
   opzij en lijkt ineens breder. Door de ruimte voor die balk altijd vrij
   te houden blijft alles staan waar het stond.
   ------------------------------------------------------------------ */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){
  html{overflow-y:scroll}
}


/* ---------------- Zelf aanvullen binnen een kcal-maximum ----------
   Laat Kim het ontbijt (of de lunch) open en zet ze er een maximum bij,
   dan kiest de cliënt hier zelf een gerecht dat binnen het restant past.
   Wat hij kiest verschijnt daarna als gewone kaart tussen de gerechten,
   met een merkje erbij; dit blok blijft staan om te wisselen.
   ------------------------------------------------------------------ */
.zelf{
  background:var(--wit); border:var(--rand); border-radius:var(--rond-l);
  padding:1.2rem 1.2rem 1.1rem; margin-bottom:1.2rem;
}
.zelf-kop{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem;
  padding-bottom:.9rem; margin-bottom:.2rem; border-bottom:1px solid var(--zand);
}
.zelf-kop h3{font-size:1.02rem; margin:0}
.zelf-kop p{margin:0; font-size:.9rem; color:var(--grijs); line-height:1.5}
.zelf-kop b{color:var(--inkt); font-weight:600}

/* Eén regel per gang: het label links, wat er nog te besteden is rechts. */
.zelf-gang{padding:.9rem 0 0}
.zelf-gang + .zelf-gang{margin-top:.9rem; border-top:1px solid var(--zand)}
.zelf-gang-kop{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.2rem .6rem; margin-bottom:.5rem;
}
.zelf-ruimte{
  font-size:.78rem; font-weight:600; color:var(--olijf-donker);
  background:var(--creme); border-radius:999px; padding:.18rem .6rem;
}
.zelf-niets{margin:0; font-size:.88rem; color:var(--grijs)}

/* Het merkje op een kaart die je zelf hebt gekozen. */
.eigen-merk{
  display:inline-block; margin-left:.45rem; padding:.1rem .5rem;
  border-radius:999px; background:var(--olijf); color:var(--creme);
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
}
/* Op een kaart met foto staat het label op het beeld; daar mag het
   merkje wat lichter zijn, anders schreeuwt het over de foto heen. */
.gang.met-foto .eigen-merk{background:rgba(250,246,240,.9); color:var(--inkt)}

/* Kop van de receptenpagina: titel links, de drie extra's als rustige
   lijst rechts. Op een telefoon staan ze onder elkaar. */
.blok-kop:has(.intro-lijst){
  display:grid; gap:1rem 3rem; align-items:end;
}
.blok-kop:has(.intro-lijst) h1{margin:0}
.blok-kop:has(.intro-lijst) .oogje{grid-column:1 / -1}
.intro-lijst{
  list-style:none; margin:0; padding:0; display:grid; gap:.45rem;
  font-size:.95rem; color:var(--grijs); line-height:1.45;
}
.intro-lijst li{display:flex; gap:.7rem; align-items:baseline}
.intro-lijst li::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--klei); transform:translateY(-1px);
}
@media (min-width:820px){
  .blok-kop:has(.intro-lijst){grid-template-columns:1fr auto}
  .intro-lijst{padding-left:2rem; border-left:1px solid rgba(95,111,78,.28); max-width:30rem}
}

/* ------------------------------------------------------------------
   Receptenoverzicht: zoeken, categorieën, filters en sorteren
   Alles zoekt samen in één zachte zandkleurige kaart, met een witte
   zoekbalk die iets boven de ondergrond uitsteekt. Warm, maar met
   genoeg ruimte en zonder kaders om kaders.
   ------------------------------------------------------------------ */
.zoekpaneel{
  background:var(--zand); border-radius:var(--rond-l);
  padding:clamp(1rem,2.5vw,1.5rem); margin-top:1.6rem;
}
.zoekpaneel .zoekbalk{margin:0 0 1.1rem}
.zoekpaneel .zoekbalk input{
  background:var(--wit); border:0; border-radius:16px; padding:1.05rem 6rem 1.05rem 3rem;
  box-shadow:0 10px 24px -18px rgba(46,49,43,.55);
}
.zoekpaneel .zoekbalk svg{left:1.1rem; color:var(--olijf)}
.zoekpaneel .zoekbalk button{right:.5rem; border-radius:11px; padding:.65rem 1.2rem}

.zoekpaneel .chips{padding:0 0 .2rem; margin-inline:0}
.zoekpaneel .chip{
  background:transparent; border:1px solid rgba(46,49,43,.2); padding:.6rem 1.1rem;
}
.zoekpaneel .chip:hover{background:rgba(255,255,255,.6); border-color:var(--olijf-licht)}
.zoekpaneel .chip.aan{background:var(--olijf); border-color:var(--olijf); color:var(--creme)}

.zoekpaneel .filterbalk{margin:.9rem 0 0; padding-top:.9rem; border-top:1px solid rgba(46,49,43,.12)}
.zoekpaneel .filters{border:0; background:transparent; border-radius:0; overflow:visible}
.zoekpaneel .filters > summary{padding:.2rem 0; background:transparent; font-weight:600}
.zoekpaneel .filters > summary:hover{background:transparent; color:var(--olijf)}
.zoekpaneel .filter-vakken{padding-top:.4rem}

.resultaatbalk{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.7rem 1.5rem; margin:1.3rem 0 .6rem;
}
.resultaatbalk .telling{margin:0}
/* Sorteren als schuifknop: een zandkleurig spoor met een wit vlak onder de keuze. */
.chips-sorteer{
  margin:0; padding:.25rem; gap:.15rem; overflow:visible; background:var(--zand);
  border-radius:999px; align-items:center;
}
.chips-sorteer .chips-label{display:none}
.chips-sorteer .chip{
  border:0; background:transparent; padding:.5rem 1rem; font-size:.86rem; color:var(--grijs);
}
.chips-sorteer .chip:hover{color:var(--inkt)}
.chips-sorteer .chip.aan{background:var(--wit); color:var(--inkt); box-shadow:0 2px 8px -3px rgba(46,49,43,.4)}

/* Zoeken en filters op één regel; het paneel wordt zo een stuk lager.
   Is het filterpaneel open, dan krijgt het de volle breedte eronder. */
.zoekpaneel{display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:stretch}
.zoekpaneel .zoekbalk{grid-column:1; grid-row:1; margin:0}
.zoekpaneel .chips{grid-column:1 / -1; grid-row:2}
.zoekpaneel .filterbalk{grid-column:2; grid-row:1; margin:0; padding:0; border:0; display:flex}
.zoekpaneel .filters{display:flex; flex-direction:column}
.zoekpaneel .filters > summary{
  background:var(--wit); border-radius:16px; padding:0 1.3rem; height:100%; min-height:3.4rem;
  font-weight:600; box-shadow:0 10px 24px -18px rgba(46,49,43,.55); white-space:nowrap;
}
.zoekpaneel .filters > summary:hover{background:var(--wit); color:var(--olijf)}
.zoekpaneel .filters > summary::after{display:none}
.zoekpaneel .filters[open] > summary{background:var(--olijf); color:var(--creme)}
.zoekpaneel .filters[open] > summary svg{color:var(--creme)}
.zoekpaneel:has(.filters[open]) .filterbalk{grid-column:1 / -1; grid-row:3; display:block; padding-top:.9rem; border-top:1px solid rgba(46,49,43,.12)}
.zoekpaneel:has(.filters[open]) .filters > summary{height:auto; min-height:0; display:inline-flex; padding:.7rem 1.3rem}
.zoekpaneel .filter-voet{padding-top:.8rem}
@media (max-width:639px){
  .zoekpaneel{grid-template-columns:1fr}
  .zoekpaneel .zoekbalk,.zoekpaneel .chips,.zoekpaneel .filterbalk{grid-column:1}
  .zoekpaneel .zoekbalk{grid-row:1}
  .zoekpaneel .chips{grid-row:2}
  .zoekpaneel .filterbalk{grid-row:3}
  .zoekpaneel .filters > summary{min-height:3rem}
}
.intro-lijst{font-size:1rem; color:var(--inkt); gap:.55rem}
.intro-lijst li{opacity:.8}

/* Categorieën: zachte witte chips zonder rand, het aantal als klein bolletje. */
.zoekpaneel .chips{gap:.5rem; padding:.2rem .2rem .5rem}
.zoekpaneel .chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.62); border:0; padding:.5rem .55rem .5rem 1.05rem;
  font-size:.9rem; font-weight:500; color:var(--inkt);
  box-shadow:0 1px 0 rgba(46,49,43,.04), 0 6px 14px -10px rgba(46,49,43,.45);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.zoekpaneel .chip:not(:has(.chip-aantal)){padding-right:1.05rem}
.zoekpaneel .chip:hover{background:var(--wit); transform:translateY(-1px); border:0}
.zoekpaneel .chip.aan{background:var(--olijf-donker); color:var(--creme); box-shadow:0 8px 18px -10px rgba(46,49,43,.75)}
.zoekpaneel .chip .chip-aantal{
  margin:0; opacity:1; min-width:1.5rem; padding:.12rem .4rem; border-radius:999px; text-align:center;
  font-size:.74rem; font-weight:600; line-height:1.3; color:var(--grijs); background:rgba(95,111,78,.12);
}
.zoekpaneel .chip.aan .chip-aantal{color:var(--creme); background:rgba(250,246,240,.2)}

/* Geen sierstreepje meer onder de titels: dat was op elke pagina hetzelfde
   trucje. De titel en de intro krijgen in plaats daarvan gewoon ruimte. */
.blok-kop .streep,
.held-tekst-kant .streep,
h1 + .streep{display:none}
.blok-kop h1 + .streep + p,
.blok-kop h2 + .streep + p,
.held-tekst-kant h1 + .streep + p{margin-top:.9rem}

/* Video's: kleiner en dichter op elkaar. Meer reels in beeld, een lichter
   overlay-tekstje en een kleinere afspeelknop, zodat de pagina niet meer
   schreeuwt. */
.video-kop{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem}
.video-kop h1{margin:0 0 .5rem}
.video-kop p{margin:0}
.video-raster{gap:.7rem; grid-template-columns:repeat(2,1fr)}
.video{border-radius:14px; aspect-ratio:9/15; box-shadow:0 12px 24px -20px rgba(46,49,43,.6)}
.video-over{padding:2rem .65rem .65rem}
.video-over strong{font-size:.84rem; line-height:1.25}
.video-over small{font-size:.7rem}
.video-speel i{width:38px; height:38px}
.video-speel svg{width:15px; height:15px; margin-left:2px}
@media (min-width:560px){.video-raster{grid-template-columns:repeat(3,1fr)}}
@media (min-width:820px){.video-raster{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){.video-raster{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1300px){.video-raster{grid-template-columns:repeat(6,1fr)}}

/* Video's krijgt dezelfde kop en hetzelfde paneel als Recepten. */
.video-kop{display:grid; gap:1rem 3rem; align-items:end; margin-bottom:1.6rem}
.video-kop h1{margin:0}
.video-kop .video-intro{margin:0; max-width:30rem; font-size:1rem; color:var(--inkt); opacity:.8}
@media (min-width:820px){
  .video-kop{grid-template-columns:1fr auto}
  .video-kop .video-intro{padding-left:2rem; border-left:1px solid rgba(95,111,78,.28)}
}
.video-paneel{
  margin-top:2rem; grid-template-columns:1fr; align-items:center; gap:1.2rem;
}
.video-paneel h2{font-size:1.25rem; margin:0 0 .3rem}
.video-paneel p{margin:0 0 .9rem; font-size:.95rem; color:var(--grijs)}
.video-paneel .chips{margin:0; padding:0; flex-wrap:wrap}
@media (min-width:820px){.video-paneel{grid-template-columns:1fr auto; padding:1.6rem 1.8rem}}
.video-raster{grid-template-columns:repeat(auto-fill,minmax(150px,200px)); justify-content:start}
@media (max-width:559px){.video-raster{grid-template-columns:repeat(2,1fr)}}

/* Recepten en Video's: de intro rechts van de titel moet identiek zijn.
   Zelfde lettergrootte, regelafstand en een lijntje dat precies zo hoog is
   als de tekst, en de titel staat er verticaal tegenover. */
.blok-kop:has(.intro-lijst),
.video-kop{align-items:center}
.video-kop .intro-lijst{max-width:30rem}
.intro-lijst,
.video-kop .video-intro{
  font-size:1rem; line-height:1.5; margin:0; padding-block:0; color:rgba(46,49,43,.8);
}
.intro-lijst li,
.video-kop .video-intro{opacity:1}
@media (min-width:820px){
  .intro-lijst,
  .video-kop .video-intro{padding-left:2rem; border-left:1px solid rgba(95,111,78,.28); max-width:30rem}
}

/* Footer: het logo zonder kaartje, in één crèmekleur op het donker. De
   letters en de vork vormen zo samen een rustig silhouet. */
.voet-logo{background:transparent; border-radius:0; padding:0}
.voet-logo img{height:56px; filter:brightness(0) invert(1); opacity:.92}
.voet-merk p{margin-top:1.1rem}
.voet-merk{width:fit-content; max-width:100%; text-align:center}
.voet-merk p{margin-inline:auto}

/* ------------------------------------------------------------------
   Ervaringen: rustige kaarten, ondertekend met de naam. Geen sierteken,
   geen schaduw, geen kleurvlak: de woorden doen het werk. Lange verhalen
   zijn ingekort met "Lees verder".
   ------------------------------------------------------------------ */
.ervaringen-groot{
  gap:1.2rem; align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.ervaringen-groot .ervaring{
  padding:1.8rem 1.8rem 1.5rem; border:1px solid rgba(46,49,43,.1); border-radius:18px;
  background:var(--creme); box-shadow:none; display:flex; flex-direction:column;
}
.ervaringen-groot .ervaring-tekst{margin:0; font-size:1.05rem; line-height:1.7; color:var(--inkt)}
.ervaringen-groot .ervaring-tekst::before{content:none}
.ervaringen-groot .ervaring-wie{margin-top:auto; padding-top:1.4rem; gap:.8rem}
.ervaringen-groot .ervaring-wie img{width:44px; height:44px}
.ervaringen-groot .ervaring-wie b{font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.1rem}
.ervaringen-groot .ervaring-wie small{display:block; margin-top:.1rem}

/* Het moet als citaat lezen: een nette, niet te grote aanhalingsteken boven
   de tekst, en de tekst zelf iets losser en zonder drukte eromheen. */
.ervaringen-groot .ervaring{padding:1.6rem 2rem 1.7rem; background:var(--wit); border-color:rgba(46,49,43,.08)}
.ervaringen-groot .ervaring::before{
  content:"\201C"; display:block; font-family:var(--serif); font-size:3.4rem; line-height:.7;
  height:1.6rem; color:var(--klei); margin-bottom:.4rem;
}
.ervaringen-groot .ervaring-tekst{font-size:1.08rem; line-height:1.75; margin-bottom:1.4rem}
.ervaringen-groot .ervaring-wie{border-top:1px solid rgba(46,49,43,.1); margin-top:auto; padding-top:1.1rem}
.ervaringen-groot .ervaring-tekst::after{content:"\201D"; color:var(--klei); font-family:var(--serif); font-size:1.3em; line-height:0; margin-left:.1em}

/* Hoofdmenu op een laptop: gewone woorden, de gekozen pagina onderstreept in
   terracotta, geen groene pil en geen zwevend rond knopje voor Instagram. */
@media (min-width:900px){
  .menu{gap:.35rem}
  .menu a:not(.knop){
    padding:.5rem .7rem; border-radius:0; color:var(--inkt);
    text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:9px;
    transition:text-decoration-color .18s ease, color .18s ease;
  }
  .menu a:not(.knop):hover{background:transparent; color:var(--olijf-donker); text-decoration-color:var(--olijf-licht)}
  .menu a[aria-current="page"]:not(.knop){background:transparent; color:var(--inkt); text-decoration-color:var(--klei)}
  .menu a.knop{
    box-shadow:none; margin-left:.8rem; padding:.55rem 1.3rem; font-size:.93rem; font-weight:600;
    background:transparent; color:var(--olijf-donker); border:1.5px solid var(--olijf-donker); border-radius:999px;
    text-decoration:none; transition:background .2s ease, color .2s ease;
  }
  .menu a.knop::after{content:none}
  .menu a.knop:hover{background:var(--olijf-donker); color:var(--creme)}
  .menu-sociaal{margin-left:.4rem}
  .menu-sociaal a.sociaal-knop{
    width:40px; height:40px; padding:0; border:0; border-radius:0; background:transparent; color:var(--inkt);
    display:flex; align-items:center; justify-content:center;
    transition:color .18s ease;
  }
  .menu-sociaal a.sociaal-knop:hover{background:transparent; color:var(--klei)}
  .menu-sociaal .sociaal-knop svg{width:26px; height:26px; flex:none}
}

/* ------------------------------------------------------------------
   Telefoon: compacter, niet alleen smaller
   De meeste bezoekers komen vanuit Instagram en kijken op hun telefoon.
   Daar moet de pagina geen verkleinde laptopversie zijn: minder lucht
   tussen blokken, kleinere koppen, het belangrijkste (de recepten)
   meteen in beeld, en de stappen als compacte regels in plaats van
   losse kaarten.
   ------------------------------------------------------------------ */
@media (max-width:639.98px){
  body{line-height:1.6}
  .blok{padding-block:2rem}
  .blok-kop{margin-bottom:1.1rem}
  .blok-kop p{font-size:.95rem; line-height:1.55}
  h1{font-size:1.9rem}
  h2{font-size:1.45rem}
  .oogje{font-size:.68rem}
  .knop{padding:.78rem 1.2rem; font-size:.95rem}

  /* Het hoofdvlak: kop, één duidelijke knop, de foto daarna. */
  .held{padding-block:1.1rem 1.6rem}
  .held-binnen{gap:1.3rem}
  .held-label{display:none}
  .held h1{font-size:1.95rem; line-height:1.15; margin-bottom:.7rem}
  .held-tekst{font-size:.96rem; line-height:1.55; margin-bottom:0}
  .held .knoppen{margin-top:1.1rem; gap:.3rem}
  .held .knop-rand{border-color:transparent; background:none; font-weight:500; padding:.6rem; text-decoration:underline; text-underline-offset:4px}
  .ig-strook{margin-top:.8rem; font-size:.84rem; gap:.1rem .5rem}
  .held-foto{aspect-ratio:5/4; border-radius:20px}

  /* De vier wegwijzers: korter. */
  .tegels{gap:0 1.4rem}
  .tegel{padding:.85rem 0 1rem}
  .tegel strong{font-size:1.08rem}
  .tegel span{font-size:.8rem; line-height:1.4}

  /* De oproep. */
  .oproep{padding:1.3rem 1.2rem}
  .oproep h2{font-size:1.3rem; margin-bottom:.3rem}
  .oproep p{font-size:.9rem; line-height:1.5}
  .oproep .knoppen{margin-top:1rem; gap:.5rem}
  .oproep .knop{padding:.72rem 1rem}

  /* Coaching in het kort: een regel per stap, het cijfer ernaast. */
  .stappen-rij{gap:.6rem}
  .stap{
    display:grid; grid-template-columns:2.1rem 1fr; column-gap:.8rem;
    padding:.95rem 1.05rem;
  }
  .stap::before{grid-row:1 / span 2; font-size:1.25rem; margin:0; padding-top:.15rem}
  .stap h3{font-size:1.05rem; margin-bottom:.15rem}
  .stap p{font-size:.9rem; line-height:1.5}

  /* Ervaringen. */
  .ervaringen-groot{gap:.8rem}
  .ervaringen-groot .ervaring{padding:1.1rem 1.2rem 1.1rem}
  .ervaringen-groot .ervaring::before{font-size:2.6rem; height:1.2rem; margin-bottom:.2rem}
  .ervaringen-groot .ervaring-tekst{font-size:.97rem; line-height:1.62; margin-bottom:1rem}
  .ervaringen-groot .ervaring-wie{padding-top:.85rem}
  .ervaringen-groot .ervaring-wie b{font-size:1.02rem}

  /* Recepten en Video's: de kop en het zoekpaneel. */
  .blok-kop:has(.intro-lijst),
  .video-kop{gap:.6rem; margin-bottom:1rem}
  .intro-lijst{font-size:.92rem; gap:.3rem}
  .zoekpaneel{margin-top:.9rem; padding:.8rem}
  .zoekpaneel .zoekbalk input{padding-block:.85rem}
  .zoekpaneel .chip{padding:.5rem .55rem .5rem .95rem; font-size:.86rem}
}

/* ------------------------------------------------------------------
   Voet op een telefoon: één rustig, gecentreerd blok
   Logo en zin in het midden, de hoofdpagina's als een rij links die
   vanzelf doorloopt, daaronder het contact. Het lijstje met categorieën
   gaat eruit; die zitten op de receptenpagina al in de filters.
   ------------------------------------------------------------------ */
@media (max-width:639.98px){
  .voet{padding-top:2rem}
  .voet-rijen{grid-template-columns:1fr; gap:1.3rem; text-align:center}
  .voet-merk{width:auto; max-width:none; grid-column:auto}
  .voet-merk p{margin:.7rem auto 0; max-width:30ch; font-size:.88rem}
  .voet-logo img{height:50px; margin-inline:auto}
  .voet-rijen > :nth-child(3){display:none}
  .voet h4{margin-bottom:.4rem; text-indent:0}

  /* De hoofdpagina's: een rij die doorloopt. */
  .voet-rijen > :nth-child(2) ul{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.1rem 1.3rem; font-size:.95rem;
  }
  .voet-rijen > :nth-child(2) ul a{padding:.45rem 0}

  /* Contact: gecentreerd, met een duidelijke knop voor wie wil schrijven. */
  .voet-rijen > :last-child{grid-column:auto; padding-top:1.2rem; border-top:1px solid rgba(250,246,240,.12)}
  .voet-rijen > :last-child ul{justify-items:center; gap:.1rem}
  .voet-rijen > :last-child ul a{padding:.4rem 0}

  .voet-onder{margin-top:1.4rem; padding-top:1rem; font-size:.78rem}
}

/* Onder de voet liet Safari een crèmekleurige strook zien: de pagina eindigt
   boven de werkbalk, en wat daaronder valt kreeg de kleur van de pagina.
   Door de ondergrond zelf donker te maken loopt de voet door tot de rand. */
html{background:var(--inkt)}
body{background:var(--creme)}

@media (max-width:639.98px){
  /* Contact als drie knopjes die vanzelf doorlopen, korter dan drie regels. */
  .voet-rijen > :last-child ul{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  }
  .voet-rijen > :last-child ul a{
    display:inline-block; padding:.55rem 1rem; font-size:.88rem;
    border:1px solid rgba(250,246,240,.22); border-radius:999px; color:var(--creme);
  }
  .voet-rijen > :last-child ul li:first-child a{overflow-wrap:normal}
  .voet-rijen > :last-child h4{margin-bottom:.8rem}
  .voet-onder{gap:.35rem}
  .voet-links{gap:.35rem}
}

/* De verwijzing naar duonova: een klein, rustig label in plaats van een los
   regeltje. Een dun randje, het beeldmerk iets groter, de zin in één keer. */
.voet-onder a.dn-credit-donker{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.4rem .9rem .4rem .75rem; border:1px solid rgba(250,246,240,.16); border-radius:999px;
  background:rgba(250,246,240,.04); font-size:.8rem; transition:background .2s ease, border-color .2s ease;
}
.voet-onder a.dn-credit-donker:hover{background:rgba(250,246,240,.09); border-color:rgba(250,246,240,.3)}
.voet-onder .dn-credit-merk{width:20px; height:20px}

@media (max-width:639.98px){
  /* Volgorde op een telefoon: eerst het label, dan het copyright, dan de links. */
  .voet-onder{align-items:center; gap:.5rem}
  .voet-links{display:contents}
  .voet-onder a.dn-credit{order:1; margin-bottom:.3rem}
  .voet-links > span:last-child{order:2}
  .voet-onder > span:last-child{order:3}
  .voet-streep{display:none}
}

/* Knoppen: geen zwevende pillen met schaduw meer. Rechthoekiger, vlak, en
   zonder het hoppen bij hover. Het boekje in de knop van het hoofdvlak is
   weg; de tekst zegt genoeg. */
.knop{border-radius:10px; box-shadow:none; font-weight:600; letter-spacing:0}
.knop-vol,.knop-klei{box-shadow:none}
.knop-vol:hover,.knop-klei:hover,.knop-rand:hover{transform:none}
.knop-rand{border-width:1.5px; border-color:var(--olijf-donker); color:var(--olijf-donker)}
.knop-rand:hover{background:var(--olijf-donker); color:var(--creme)}
.held .knop svg{display:none}
@media (min-width:900px){
  .menu a.knop{border-radius:10px}
}
.oproep .knop-rand{border-color:rgba(250,246,240,.6)}
.oproep .knop-rand:hover{background:rgba(250,246,240,.14); color:var(--creme)}

/* Knoppen, derde ronde: rustiger en typografischer. Kleine hoofdletters met
   wat ruimte tussen de letters, een dunnere rand en een pijltje dat bij
   hover opschuift. Minder "knop", meer een regel in een tijdschrift. */
.knop{
  border-radius:6px; padding:1rem 1.7rem; font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.knop-klein{padding:.7rem 1.2rem; font-size:.72rem}
.knop-rand{border-width:1px}
.held .knop::after,
.oproep .knop::after{
  content:"\2192"; font-size:1.15em; letter-spacing:0; transition:transform .2s ease;
}
.held .knop:hover::after,
.oproep .knop:hover::after{transform:translateX(4px)}
@media (min-width:900px){
  .menu a.knop{border-radius:6px; font-size:.72rem; padding:.7rem 1.2rem}
  .menu a.knop::after{content:none}
}
@media (max-width:639.98px){
  .knop{padding:.9rem 1.2rem}
  .held .knop-rand{letter-spacing:.1em; font-weight:600}
  .held .knop-rand::after{content:none}
}

/* Instagram-regel: het icoon, de zin en de naam dicht bij elkaar, niet als
   drie losse stukken. */
.ig-strook{gap:.5rem}
.ig-strook span{margin-right:-.15rem}
@media (max-width:639.98px){.ig-strook{gap:.1rem .4rem}}

/* Chips, sorteerknop, zoekbalk en filters krijgen dezelfde vorm als de
   knoppen: rechthoekig met kleine hoeken, geen pillen. */
.zoekpaneel{border-radius:16px}
.zoekpaneel .zoekbalk input{border-radius:8px}
.zoekpaneel .zoekbalk button{border-radius:6px}
.zoekpaneel .filters > summary{border-radius:8px}
.zoekpaneel .chip{border-radius:6px}
.zoekpaneel .chip .chip-aantal{border-radius:4px}
.chips-sorteer{border-radius:9px}
.chips-sorteer .chip{border-radius:6px}
.video-paneel .chip{border-radius:6px}