/* =====================================================================
   OnsBord — sitestijl. Kleurwereld Petrol & Zand.

   Alle kleur, ruimte en vorm komt uit tokens.css. Staat er hieronder een
   hexcode, dan is dat een fout — behalve binnen @media print, want papier
   is wit en inkt is zwart.

   Literata en Atkinson Hyperlegible staan lokaal in static/fonts/ en worden
   geladen door tokens.css. Bewust geen Google Fonts: dat kost laadtijd en
   stuurt bezoeker-IP's naar Google (AVG). Zie 01_huisstijl/LEESMIJ.md.
   ===================================================================== */

*{box-sizing:border-box}
body{
  margin:0; background:var(--ob-zand); color:var(--ob-tekst);
  font-family:var(--ob-font-body); font-size:var(--ob-maat-body); line-height:var(--ob-lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--ob-font-display); font-weight:400; margin:0;
         color:var(--ob-petrol); letter-spacing:var(--ob-spatie-kop)}
h1{font-size:var(--ob-maat-h2); line-height:1.04}
h2{font-size:var(--ob-maat-h3); line-height:1.1}
/* Literata heeft weinig eigen ruimte onder de regel, en `margin:0` op de koppen
   hierboven laat een kop tegen de eerstvolgende alinea plakken. Alleen die ene
   afstand terugzetten, zonder de koppen los te trekken die al in een eigen
   blok staan. */
h1 + p, h2 + p, h3 + p, h2 + ul, h2 + ol, h3 + ul, h3 + ol { margin-top: var(--ob-ruimte-3) }
p{margin:0 0 var(--ob-ruimte-4)}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--ob-ruimte-5)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- kop */
header.site{background:var(--ob-petrol)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:var(--ob-ruimte-4); flex-wrap:wrap; padding-top:var(--ob-ruimte-5); padding-bottom:var(--ob-ruimte-5)}
/* Het woordmerk is één SVG met de naam er als contour in — geen los merkje plus
   een <span> in Literata. Zo staat de naam ook goed als het lettertype hapert. */
.brand{display:flex; align-items:center; text-decoration:none}
.brand .woordmerk{height:32px; width:auto; display:block}
.brand:focus-visible{outline:var(--ob-focus-dikte) solid var(--ob-op-donker);
  outline-offset:var(--ob-focus-afstand); border-radius:2px}
.hoofdnav{display:flex; gap:var(--ob-ruimte-5)}
.hoofdnav a{color:var(--ob-zand); text-decoration:none; font-size:var(--ob-maat-klein);
  opacity:.82; transition:opacity var(--ob-duur-snel) var(--ob-curve)}
.hoofdnav a:hover{opacity:1; text-decoration:underline}
/* Uitloggen moet een POST zijn, dus het is een formulier. Visueel hoort het bij de
   andere menu-items: een knop die eruitziet als een knop tussen tekstlinks trekt de
   aandacht naar het minst belangrijke item in het menu. */
.hoofdnav .uitloggen{display:flex; align-items:center; margin:0}
.hoofdnav .uitloggen button{background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--ob-zand); font-size:var(--ob-maat-klein); opacity:.82;
  transition:opacity var(--ob-duur-snel) var(--ob-curve)}
.hoofdnav .uitloggen button:hover{opacity:1; text-decoration:underline}

/* ---------------------------------------------------------- intro */
.intro{padding:var(--ob-ruimte-9) 0 var(--ob-ruimte-6)}
.kicker{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-caps);
  text-transform:uppercase; color:var(--ob-petrol); margin-bottom:var(--ob-ruimte-4)}
.intro h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.intro h1 em{font-style:italic; color:var(--ob-petrol-diep)}
.lede{font-size:var(--ob-maat-lead); max-width:50ch; margin-top:var(--ob-ruimte-5)}

.gezin{display:flex; flex-wrap:wrap; gap:var(--ob-ruimte-5); margin-top:var(--ob-ruimte-6)}
.lid{display:flex; align-items:center; gap:var(--ob-ruimte-3)}
.lid-naam{font-family:var(--ob-font-display); font-size:19px; color:var(--ob-petrol)}
.lid-rol{font-size:13px; color:var(--ob-gedempt)}
.avatar{width:40px; height:40px; border-radius:50%; background:var(--ob-mist);
  color:var(--ob-petrol); display:grid; place-items:center;
  font-family:var(--ob-font-display); font-size:15px; line-height:1; flex-shrink:0}
.avatar.klein{width:30px; height:30px; font-size:12px}

.cijfers{display:flex; gap:var(--ob-ruimte-7); flex-wrap:wrap; margin-top:var(--ob-ruimte-6);
  border-top:1px solid var(--ob-lijn); padding-top:var(--ob-ruimte-4)}
.cijfers div{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}
.cijfers b{display:block; font-family:var(--ob-font-display); font-size:26px; letter-spacing:0;
  text-transform:none; color:var(--ob-petrol); font-weight:400; line-height:1.1; margin-bottom:2px}

/* ---------------------------------------------------------- vanavond
   Eén avond op het volle scherm, met de borden ernaast. De balkjes zijn
   het punt: vier verschillende porties uit dezelfde pan, in één oogopslag.
   -------------------------------------------------------------------- */
.vanavond{background:var(--ob-ecru); border-bottom:1px solid var(--ob-lijn);
  padding:var(--ob-ruimte-8) 0 var(--ob-ruimte-9)}
.vanavond.onveilig{border-bottom-color:var(--ob-niet)}
.vanavond-raster{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--ob-ruimte-9);
  align-items:start; margin-top:var(--ob-ruimte-5)}
@media(max-width:860px){.vanavond-raster{grid-template-columns:1fr; gap:var(--ob-ruimte-7)}}

.vanavond h1{font-size:clamp(2.1rem,4.2vw,3.4rem); line-height:1.02}
.vanavond h1 a{text-decoration:none}
.vanavond h1 a:hover{text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:6px; text-decoration-color:var(--ob-petrol)}
.belofte{font-size:var(--ob-maat-lead); color:var(--ob-tekst);
  max-width:38ch; margin-top:var(--ob-ruimte-5)}
.variantregel{font-size:var(--ob-maat-klein); color:var(--ob-gedempt); margin-bottom:var(--ob-ruimte-5)}
.vanavond .btn{margin-top:var(--ob-ruimte-4)}

.borden{background:var(--ob-mist); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5) var(--ob-ruimte-5) var(--ob-ruimte-5)}
.borden-kop{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt); margin-bottom:var(--ob-ruimte-5)}
.bordrij{display:grid; grid-template-columns:30px 5.5rem 1fr auto;
  gap:var(--ob-ruimte-3); align-items:center; margin-bottom:var(--ob-ruimte-3)}
.bordnaam{font-family:var(--ob-font-display); font-size:18px; color:var(--ob-petrol)}
.bordbalk{height:10px; background:var(--ob-lijn-sterk); border-radius:100px; overflow:hidden}
.bordvulling{display:block; height:100%; background:var(--ob-petrol);
  border-radius:100px}
.bordgram{font-family:var(--ob-font-body); font-size:13px; color:var(--ob-tekst);
  min-width:3.6rem; text-align:right}
/* Kleur zegt hier iets: krap = begrensd door een regel, extra = aangevuld voor een
   doel. Nooit de enige drager — de zin eronder zegt het ook. */
.vulling-krap{background:var(--ob-petrol)}
.vulling-extra{background:var(--ob-past)}
.bordreden{font-size:13px; color:var(--ob-gedempt);
  margin:calc(var(--ob-ruimte-2) * -1) 0 var(--ob-ruimte-4) calc(30px + var(--ob-ruimte-3))}
.bordtekort{font-size:13px; color:var(--ob-aanpassing);
  margin:calc(var(--ob-ruimte-2) * -1) 0 var(--ob-ruimte-4) calc(30px + var(--ob-ruimte-3))}

/* ---------------------------------------------------------- kiezen */
.tafel.groot{margin-top:var(--ob-ruimte-5); align-items:center}
.tafelnoot{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt); margin-left:var(--ob-ruimte-3)}
.dagkeuze{display:flex; gap:var(--ob-ruimte-2); flex-wrap:wrap; margin-top:var(--ob-ruimte-5);
  padding-top:var(--ob-ruimte-5); border-top:1px solid var(--ob-lijn)}
.dagkeuze a{font-size:13px; text-decoration:none; color:var(--ob-tekst);
  border:1px solid var(--ob-lijn-sterk); border-radius:var(--ob-radius-ui);
  padding:6px 14px; transition:background var(--ob-duur-snel) var(--ob-curve),
  border-color var(--ob-duur-snel) var(--ob-curve)}
.dagkeuze a:hover{background:var(--ob-mist); border-color:var(--ob-petrol)}
.dagkeuze a[aria-current="page"]{background:var(--ob-petrol);
  border-color:var(--ob-petrol); color:var(--ob-zand)}

.keuzeblok{padding:var(--ob-ruimte-6) 0 0}
.keuzeblok h2{margin-bottom:var(--ob-ruimte-5); display:flex; align-items:baseline;
  gap:var(--ob-ruimte-3)}
.aantal{font-family:var(--ob-font-body); font-size:13px; letter-spacing:var(--ob-spatie-label);
  color:var(--ob-gedempt)}
.mini-variant.ok{color:var(--ob-past)}

.afvallers{display:grid; gap:var(--ob-ruimte-4)}
.afvaller{background:var(--ob-niet-bg); border:1px solid var(--ob-niet);
  border-radius:var(--ob-radius-kaart); padding:var(--ob-ruimte-5) var(--ob-ruimte-5)}
.afvaller h3{font-size:20px; margin-bottom:var(--ob-ruimte-3)}
.redenen{list-style:none; margin:0 0 var(--ob-ruimte-3); padding:0; font-size:var(--ob-maat-klein)}
.redenen li{padding:var(--ob-ruimte-1) 0; display:flex; gap:var(--ob-ruimte-2);
  align-items:baseline; flex-wrap:wrap}
.regelnaam{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-niet)}
.afvaller .reden{font-size:13px; color:var(--ob-tekst); margin:var(--ob-ruimte-2) 0 0}
.borden-voet{font-size:13px; color:var(--ob-gedempt); margin:var(--ob-ruimte-5) 0 0;
  padding-top:var(--ob-ruimte-4); border-top:1px solid var(--ob-lijn-sterk)}

/* ---------------------------------------------------------- verderop */
.verderop{padding:var(--ob-ruimte-8) 0 var(--ob-ruimte-6)}
.verderop h2{margin-bottom:var(--ob-ruimte-5)}
.strook{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ob-ruimte-4)}
@media(max-width:860px){.strook{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.strook{grid-template-columns:1fr}}
.mini{display:flex; flex-direction:column; gap:var(--ob-ruimte-1);
  background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5); text-decoration:none;
  transition:transform var(--ob-duur-normaal) var(--ob-curve),
             box-shadow var(--ob-duur-normaal) var(--ob-curve),
             border-color var(--ob-duur-normaal) var(--ob-curve)}
.mini:hover{transform:translateY(-2px); border-color:var(--ob-lijn-sterk);
  box-shadow:var(--ob-schaduw-zacht)}
.mini-onveilig{border-color:var(--ob-niet)}
.mini-dag{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-petrol)}
.mini-gerecht{font-family:var(--ob-font-display); font-size:20px; line-height:1.15;
  color:var(--ob-petrol); margin:var(--ob-ruimte-1) 0}
.mini-meta{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}
.mini-variant, .mini-noot{font-size:13px; color:var(--ob-gedempt); margin-top:var(--ob-ruimte-1)}

.samenvatting{padding:var(--ob-ruimte-6) 0; border-top:1px solid var(--ob-lijn)}
.samenvatting .cijfers{margin-top:0; border-top:0; padding-top:0}
.samenvatting .gezin{margin-top:var(--ob-ruimte-6); padding-top:var(--ob-ruimte-5);
  border-top:1px solid var(--ob-lijn)}

/* ---------------------------------------------------------- dagen */
.dagen{display:grid; gap:var(--ob-ruimte-4); padding-bottom:var(--ob-ruimte-6)}
.dag{background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  display:grid; grid-template-columns:180px 1fr;
  transition:border-color var(--ob-duur-normaal) var(--ob-curve),
             box-shadow var(--ob-duur-normaal) var(--ob-curve)}
.dag:hover{border-color:var(--ob-lijn-sterk); box-shadow:var(--ob-schaduw-zacht)}
@media(max-width:720px){.dag{grid-template-columns:1fr}}
.dag-onveilig{border-color:var(--ob-niet)}

.dag-kop{padding:var(--ob-ruimte-5) var(--ob-ruimte-5); border-right:1px solid var(--ob-lijn);
  background:var(--ob-mist)}
@media(max-width:720px){.dag-kop{border-right:0; border-bottom:1px solid var(--ob-lijn)}}
.dagnaam{display:block; font-family:var(--ob-font-display); font-size:22px; color:var(--ob-petrol)}
.dagnoot{display:block; font-size:13px; color:var(--ob-gedempt); margin-top:var(--ob-ruimte-1)}

.dag-inhoud{padding:var(--ob-ruimte-5) var(--ob-ruimte-5)}
.dag-inhoud h2{font-size:22px; margin-bottom:var(--ob-ruimte-3)}
.dag-inhoud h2 a{text-decoration:none}
.dag-inhoud h2 a:hover{text-decoration:underline; text-decoration-color:var(--ob-petrol)}
.dag-meta{display:flex; gap:var(--ob-ruimte-4); align-items:center; flex-wrap:wrap;
  font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}
.tafel{display:flex; gap:var(--ob-ruimte-2); margin-top:var(--ob-ruimte-4)}
.aanpassing{margin:var(--ob-ruimte-4) 0 0; font-size:var(--ob-maat-klein)}
.aanpassing .reden{color:var(--ob-gedempt)}
.waarschuwing{margin:var(--ob-ruimte-3) 0 0; font-size:var(--ob-maat-klein);
  color:var(--ob-niet); background:var(--ob-niet-bg);
  padding:var(--ob-ruimte-3) var(--ob-ruimte-4); border-radius:var(--ob-radius-kaart)}

/* ---------------------------------------------------------- blokken */
.blok{background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5); margin-bottom:var(--ob-ruimte-4)}
.blok h2{margin-bottom:var(--ob-ruimte-4)}
.blok-let-op{border-color:var(--ob-lijn-sterk); background:var(--ob-mist)}

.basislijst{margin:0; padding-left:var(--ob-ruimte-5); columns:2; column-gap:var(--ob-ruimte-7);
  font-size:var(--ob-maat-klein)}
@media(max-width:620px){.basislijst{columns:1}}
.basislijst li{margin-bottom:var(--ob-ruimte-1)}
.afsplits{margin-top:var(--ob-ruimte-5); padding-top:var(--ob-ruimte-4);
  border-top:1px dashed var(--ob-lijn-sterk); font-size:var(--ob-maat-klein); color:var(--ob-gedempt)}
.variantmelding{margin-top:var(--ob-ruimte-5); font-size:var(--ob-maat-klein); color:var(--ob-gedempt)}

.bord{display:grid; grid-template-columns:auto 1fr; gap:var(--ob-ruimte-4);
  padding:var(--ob-ruimte-4) 0; border-top:1px solid var(--ob-lijn)}
.bord:first-of-type{border-top:0; padding-top:0}
.bord h3{font-family:var(--ob-font-body); font-size:16px; font-weight:600;
  color:var(--ob-petrol); margin:0 0 var(--ob-ruimte-1); letter-spacing:0}
.bord-totaal{font-family:var(--ob-font-body); font-size:13px; color:var(--ob-gedempt);
  font-weight:400; margin-left:var(--ob-ruimte-2)}
.bord .reden{font-size:13px; color:var(--ob-gedempt); margin:0 0 var(--ob-ruimte-2)}
.onderdelen{list-style:none; margin:0; padding:0; font-size:var(--ob-maat-klein)}
.onderdelen li{display:flex; justify-content:space-between; max-width:22rem;
  padding:3px 0; border-bottom:1px dotted var(--ob-lijn)}
.onderdelen li span:last-child{font-family:var(--ob-font-body); font-size:13px; color:var(--ob-gedempt)}

/* ---------------------------------------------------------- boodschappen */
.groep-uitleg{font-size:var(--ob-maat-klein); color:var(--ob-gedempt);
  margin:calc(var(--ob-ruimte-4) * -1 + 2px) 0 var(--ob-ruimte-4); max-width:52ch}
.boodschappen{list-style:none; margin:0; padding:0}
.boodschappen li{display:grid; grid-template-columns:1fr auto auto; gap:var(--ob-ruimte-4);
  align-items:baseline; padding:var(--ob-ruimte-2) 0; border-bottom:1px solid var(--ob-lijn)}
.boodschappen li:last-child{border-bottom:0}
.boodschappen label{display:flex; align-items:center; gap:var(--ob-ruimte-3); cursor:pointer}
.boodschappen input{width:17px; height:17px; accent-color:var(--ob-petrol)}
.hoeveelheid{font-family:var(--ob-font-body); font-size:13px; color:var(--ob-gedempt)}
.wanneer{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}
.boodschappen .reden{grid-column:1 / -1; font-size:13px; color:var(--ob-gedempt);
  margin-left:29px}

.dagkeuze.bovenaan{margin:0 0 var(--ob-ruimte-6); padding-top:0; border-top:0}

/* ---------------------------------------------------------- recepten */
.receptenlijst{display:grid; gap:var(--ob-ruimte-3); margin-top:var(--ob-ruimte-5)}
.recept{display:grid; grid-template-columns:110px 1fr; background:var(--ob-ecru);
  border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  transition:border-color var(--ob-duur-normaal) var(--ob-curve),
             box-shadow var(--ob-duur-normaal) var(--ob-curve)}
.recept:hover{border-color:var(--ob-lijn-sterk); box-shadow:var(--ob-schaduw-zacht)}
@media(max-width:560px){.recept{grid-template-columns:1fr}}
.recept-cijfer{display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:var(--ob-ruimte-5); background:var(--ob-mist);
  border-right:1px solid var(--ob-lijn)}
@media(max-width:560px){.recept-cijfer{border-right:0; border-bottom:1px solid var(--ob-lijn)}}
.recept-deels .recept-cijfer{background:var(--ob-niet-bg)}
.werkt{font-family:var(--ob-font-display); font-size:34px; color:var(--ob-petrol); line-height:1}
.werkt .van{font-size:19px; color:var(--ob-gedempt)}
.werkt-label{font-family:var(--ob-font-body); font-size:10px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt); margin-top:var(--ob-ruimte-1)}
.recept-body{padding:var(--ob-ruimte-5) var(--ob-ruimte-5)}
.recept-body h2{font-size:21px; margin-bottom:var(--ob-ruimte-2)}
.recept-ing{font-size:var(--ob-maat-klein); color:var(--ob-gedempt); margin-bottom:var(--ob-ruimte-3)}
.recept-meta{display:flex; gap:var(--ob-ruimte-4); align-items:center; flex-wrap:wrap;
  font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}

/* ---------------------------------------------------------- profielen */
.profiel{background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5); margin-bottom:var(--ob-ruimte-5)}
.profiel-kop{display:flex; justify-content:space-between; gap:var(--ob-ruimte-5);
  align-items:start; flex-wrap:wrap; padding-bottom:var(--ob-ruimte-5);
  border-bottom:1px solid var(--ob-lijn)}
.profiel-kop h2{font-size:26px; margin-bottom:var(--ob-ruimte-2)}
.profiel-omschrijving{font-size:var(--ob-maat-klein); color:var(--ob-tekst);
  max-width:56ch; margin:0}
.profiel-status{display:flex; flex-direction:column; align-items:flex-end; gap:var(--ob-ruimte-2)}
.bijgewerkt{font-family:var(--ob-font-body); font-size:10px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}

.voorbehoud{background:var(--ob-niet-bg); border-left:3px solid var(--ob-niet);
  padding:var(--ob-ruimte-4) var(--ob-ruimte-5); margin:var(--ob-ruimte-5) 0}
.voorbehoud h3{font-family:var(--ob-font-body); font-size:15px; font-weight:600;
  color:var(--ob-niet); letter-spacing:0; margin-bottom:var(--ob-ruimte-2)}
.voorbehoud p{font-size:var(--ob-maat-klein); color:var(--ob-tekst); margin-bottom:var(--ob-ruimte-2)}
.voorbehoud p:last-child{margin-bottom:0}

.regellijst{list-style:none; margin:var(--ob-ruimte-5) 0 0; padding:0}
.regel{padding:var(--ob-ruimte-4) 0; border-bottom:1px solid var(--ob-lijn)}
.regel:last-child{border-bottom:0}
.regel-kop{display:flex; gap:var(--ob-ruimte-3); align-items:center; flex-wrap:wrap;
  margin-bottom:var(--ob-ruimte-2)}
.regel-label{font-family:var(--ob-font-display); font-size:19px; color:var(--ob-petrol)}
.regel-uitleg{font-size:var(--ob-maat-klein); color:var(--ob-tekst);
  max-width:64ch; margin-bottom:var(--ob-ruimte-2)}
.regel-waarschuwing{font-size:13px; color:var(--ob-aanpassing);
  background:var(--ob-aanpassing-bg); padding:var(--ob-ruimte-3) var(--ob-ruimte-4);
  border-radius:var(--ob-radius-kaart); max-width:64ch; margin-bottom:var(--ob-ruimte-2)}
.regel-bronnen{font-size:13px; color:var(--ob-gedempt); margin:0}
.regel-bronnen a{color:var(--ob-petrol)}
.gezag{font-family:var(--ob-font-body); font-size:10px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt); margin-left:6px}

/* ---------------------------------------------------------- bronnen */
.bronnenlijst{display:grid; gap:var(--ob-ruimte-4); margin-top:var(--ob-ruimte-5)}
.bron{background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5) var(--ob-ruimte-5)}
.bron-commercieel{border-color:var(--ob-lijn-sterk); background:var(--ob-mist)}
.bron-kop{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--ob-ruimte-4); flex-wrap:wrap}
.bron-kop h2{font-size:21px}
.gezag-richtlijn{color:var(--ob-past)}
.gezag-commercieel{color:var(--ob-aanpassing)}
.bron-titel{font-size:var(--ob-maat-klein); color:var(--ob-tekst); margin:var(--ob-ruimte-1) 0 var(--ob-ruimte-3)}
.bron-inhoud{font-size:13px; color:var(--ob-gedempt); max-width:70ch; margin-bottom:var(--ob-ruimte-2)}
.bron-letop{font-size:13px; color:var(--ob-aanpassing); background:var(--ob-aanpassing-bg);
  padding:var(--ob-ruimte-3) var(--ob-ruimte-4); border-radius:var(--ob-radius-kaart); max-width:70ch}
.bron-regels{font-size:13px; color:var(--ob-tekst); margin:var(--ob-ruimte-3) 0 0}
.bron-regels.ongebruikt{color:var(--ob-gedempt); font-style:italic}
.bron-voet{display:flex; gap:var(--ob-ruimte-4); align-items:baseline; flex-wrap:wrap;
  margin:var(--ob-ruimte-4) 0 0; padding-top:var(--ob-ruimte-3);
  border-top:1px solid var(--ob-lijn); font-size:13px}
.bron-voet a{color:var(--ob-petrol)}
.datum{font-family:var(--ob-font-body); font-size:10px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}

/* ---------------------------------------------------------- recept */
.onderdelenlijst{display:grid; gap:var(--ob-ruimte-4)}
.onderdeel{padding-bottom:var(--ob-ruimte-4); border-bottom:1px solid var(--ob-lijn)}
.onderdeel:last-child{border-bottom:0; padding-bottom:0}
.onderdeel-rol{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-petrol)}
.onderdeel-ing{margin:var(--ob-ruimte-2) 0 0; padding-left:18px; font-size:var(--ob-maat-klein)}
.onderdeel-variant{margin:var(--ob-ruimte-3) 0 0; font-size:13px; color:var(--ob-tekst);
  background:var(--ob-mist); padding:var(--ob-ruimte-3) var(--ob-ruimte-4); border-radius:var(--ob-radius-kaart)}
.onderdeel-variant .werk, .onderdeel-variant .toelichting{display:block;
  color:var(--ob-gedempt); margin-top:2px}

.stappen{margin:0; padding-left:22px; counter-reset:stap}
.stap{padding:var(--ob-ruimte-3) 0; border-bottom:1px dotted var(--ob-lijn)}
.stap:last-child{border-bottom:0}
.stap-naam{font-family:var(--ob-font-display); font-size:19px; color:var(--ob-petrol);
  margin-right:var(--ob-ruimte-3)}
.stap-ing{font-size:var(--ob-maat-klein); color:var(--ob-gedempt); margin-right:var(--ob-ruimte-3)}
.stap-afsplits{background:var(--ob-past-bg); margin-left:-12px; padding-left:12px;
  border-radius:var(--ob-radius-kaart)}
.stap-na .stap-naam{color:var(--ob-tekst)}

/* ---------------------------------------------------------- gezin */
.eterskeuze{display:flex; gap:var(--ob-ruimte-3); flex-wrap:wrap; align-items:stretch;
  margin-top:var(--ob-ruimte-6)}
.eter{display:flex; flex-direction:column; align-items:center; gap:var(--ob-ruimte-2);
  background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-4) var(--ob-ruimte-5); cursor:pointer; min-width:9rem;
  transition:border-color var(--ob-duur-snel) var(--ob-curve),
             background var(--ob-duur-snel) var(--ob-curve)}
.eter:hover{border-color:var(--ob-lijn-sterk)}
.eter-aan{border-color:var(--ob-petrol); background:var(--ob-mist)}
.eter input{accent-color:var(--ob-petrol); width:17px; height:17px}
.eter-naam{font-family:var(--ob-font-display); font-size:19px; color:var(--ob-petrol)}
.eter-rol{font-size:12px; color:var(--ob-gedempt); text-align:center}
.eterskeuze .btn{align-self:center}

.lid-kop{display:flex; gap:var(--ob-ruimte-4); align-items:center; margin-bottom:var(--ob-ruimte-5);
  padding-bottom:var(--ob-ruimte-4); border-bottom:1px solid var(--ob-lijn)}
.lid-kop h2{font-size:24px}
.parameters{background:var(--ob-mist); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-4) var(--ob-ruimte-5); margin-bottom:var(--ob-ruimte-4)}
.parameters h3{font-family:var(--ob-font-body); font-size:13px; font-weight:600;
  letter-spacing:0; color:var(--ob-petrol); margin-bottom:var(--ob-ruimte-2)}
.parameterlijst{list-style:none; margin:0; padding:0; font-size:var(--ob-maat-klein)}
.parameterlijst li{display:flex; justify-content:space-between; max-width:24rem;
  padding:3px 0}
.parameterlijst li span:last-child{font-family:var(--ob-font-body); font-size:13px;
  color:var(--ob-tekst)}
.slot{font-family:var(--ob-font-body); font-size:10px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt)}
.tafelwissel{font-size:13px; color:var(--ob-petrol); margin-left:var(--ob-ruimte-3)}

.profielchips{display:flex; gap:var(--ob-ruimte-2); flex-wrap:wrap; margin-top:var(--ob-ruimte-4)}
.chip{display:inline-flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--ob-lijn-sterk); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-3) var(--ob-ruimte-4); font-size:var(--ob-maat-klein); color:var(--ob-petrol);
  transition:background var(--ob-duur-snel) var(--ob-curve)}
.chip:hover{background:var(--ob-mist)}
.chip-soort{font-family:var(--ob-font-body); font-size:10px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt); margin-top:2px}

/* ---------------------------------------------------------- dagmenu */
.dagtelling{display:inline-block; margin-left:6px; font-family:var(--ob-font-body);
  font-size:10px; color:var(--ob-gedempt)}
.dagkeuze a[aria-current="page"] .dagtelling{color:var(--ob-zand); opacity:.7}
.schemalink{font-size:13px; color:var(--ob-petrol); border:0!important;
  padding:6px 4px!important; align-self:center}

.dagloop{display:grid; gap:var(--ob-ruimte-3); margin-top:var(--ob-ruimte-5)}
.moment{background:var(--ob-ecru); border:1px solid var(--ob-lijn); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5) var(--ob-ruimte-5)}
.moment-leeg{background:transparent; border-style:dashed}
.moment-kop{display:flex; justify-content:space-between; align-items:center;
  gap:var(--ob-ruimte-4); flex-wrap:wrap; margin-bottom:var(--ob-ruimte-3)}
.moment-naam{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-petrol)}
.moment-eters{display:flex; gap:4px}
.avatar.mini{width:24px; height:24px; font-size:10px}
.moment-niets{font-size:var(--ob-maat-klein); color:var(--ob-gedempt); margin:0}
.moment-inhoud h2{font-size:22px; margin-bottom:var(--ob-ruimte-1)}
.moment-inhoud h2 a{text-decoration:none}
.moment-inhoud h2 a:hover{text-decoration:underline; text-decoration-color:var(--ob-petrol)}
.moment-meta{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  text-transform:uppercase; color:var(--ob-gedempt); margin-bottom:var(--ob-ruimte-4)}
.moment-borden{display:grid; gap:6px}
.minibord{display:grid; grid-template-columns:24px 5.5rem 1fr auto; gap:var(--ob-ruimte-3);
  align-items:center}
.minibord-naam{font-size:var(--ob-maat-klein); color:var(--ob-petrol)}
.bordbalk.klein{height:7px}
.minireden{font-size:12px; color:var(--ob-gedempt);
  margin:0 0 var(--ob-ruimte-2) calc(24px + var(--ob-ruimte-3))}

.dagtotalen{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--ob-ruimte-4); margin-top:var(--ob-ruimte-5)}
.dagtotaal{background:var(--ob-mist); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-4) var(--ob-ruimte-5)}
.dagtotaal-tekort{background:var(--ob-aanpassing-bg)}
.dagtotaal-kop{display:flex; align-items:center; gap:var(--ob-ruimte-3);
  margin-bottom:var(--ob-ruimte-3)}
.dagtotaal-naam{font-family:var(--ob-font-display); font-size:20px; color:var(--ob-petrol)}
.dagtotaal-cijfers{list-style:none; margin:0; padding:0; font-size:var(--ob-maat-klein)}
.dagtotaal-cijfers li{display:flex; justify-content:space-between; padding:3px 0;
  border-bottom:1px dotted var(--ob-lijn-sterk)}
.dagtotaal-cijfers li:last-child{border-bottom:0}
.dagtotaal-cijfers li span:last-child{font-family:var(--ob-font-body); font-size:13px;
  color:var(--ob-tekst)}

/* ---------------------------------------------------------- schema */
.schematabel{width:100%; border-collapse:collapse; margin-top:var(--ob-ruimte-5);
  background:var(--ob-ecru); border:1px solid var(--ob-lijn)}
.schematabel th, .schematabel td{padding:var(--ob-ruimte-3) var(--ob-ruimte-4);
  border-bottom:1px solid var(--ob-lijn); text-align:left}
.schematabel thead th{font-family:var(--ob-font-body); font-size:11px;
  letter-spacing:var(--ob-spatie-label); text-transform:uppercase; color:var(--ob-gedempt);
  background:var(--ob-mist)}
.schematabel tbody th{font-family:var(--ob-font-display); font-size:19px;
  color:var(--ob-petrol); font-weight:400}
.rij-noot{display:block; font-family:var(--ob-font-body); font-size:12px;
  color:var(--ob-gedempt)}
.rij-vrij{background:var(--ob-mist)}
.vinkje{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.vinkje input{width:17px; height:17px; accent-color:var(--ob-petrol)}
.vinkje-label{font-family:var(--ob-font-body); font-size:11px; color:var(--ob-gedempt)}
.schemaform .callout{margin-top:var(--ob-ruimte-5)}

/* ---------------------------------------------------------- start */
.held{background:var(--ob-ecru); border-bottom:1px solid var(--ob-lijn);
  padding:var(--ob-ruimte-9) 0}
.held-raster{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--ob-ruimte-9);
  align-items:center}
@media(max-width:900px){.held-raster{grid-template-columns:1fr; gap:var(--ob-ruimte-7)}}
.held h1{font-size:clamp(2.4rem,5vw,4.2rem); line-height:1}
.held h1 em{font-style:italic; color:var(--ob-petrol-diep)}
.held-lede{font-size:var(--ob-maat-lead); color:var(--ob-tekst);
  max-width:42ch; margin-top:var(--ob-ruimte-5)}
.held .btnrow{margin-top:var(--ob-ruimte-6)}
.held-borden{background:var(--ob-mist)}

.uitleg{padding:var(--ob-ruimte-9) 0 var(--ob-ruimte-6)}
.stappenrij{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ob-ruimte-5);
  margin-top:var(--ob-ruimte-5)}
@media(max-width:860px){.stappenrij{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stappenrij{grid-template-columns:1fr}}
.uitlegstap h3{font-size:20px; margin:var(--ob-ruimte-2) 0}
.uitlegstap p{font-size:var(--ob-maat-klein); color:var(--ob-gedempt); margin:0}
.stapnummer{font-family:var(--ob-font-body); font-size:11px; letter-spacing:var(--ob-spatie-label);
  color:var(--ob-petrol)}

.waarom{display:grid; grid-template-columns:1.4fr 1fr; gap:var(--ob-ruimte-9);
  padding:var(--ob-ruimte-6) 0 var(--ob-ruimte-8); align-items:start}
@media(max-width:860px){.waarom{grid-template-columns:1fr; gap:var(--ob-ruimte-6)}}
.waarom-tekst p{max-width:52ch}
.waarom-cijfers{display:grid; gap:var(--ob-ruimte-4)}
.waarom-cijfers div{font-family:var(--ob-font-body); font-size:11px;
  letter-spacing:var(--ob-spatie-label); text-transform:uppercase; color:var(--ob-gedempt);
  border-top:1px solid var(--ob-lijn); padding-top:var(--ob-ruimte-3)}
.waarom-cijfers b{display:block; font-family:var(--ob-font-display); font-size:36px;
  letter-spacing:0; text-transform:none; color:var(--ob-petrol); font-weight:400;
  line-height:1}
.dietenrij{padding:var(--ob-ruimte-6) 0}

.uitlegtekst{max-width:64ch; font-size:var(--ob-maat-body)}
.misvatting blockquote{font-family:var(--ob-font-display); font-size:24px;
  color:var(--ob-petrol); margin:0 0 var(--ob-ruimte-4); padding-left:var(--ob-ruimte-5);
  border-left:2px solid var(--ob-petrol)}
.misvatting-kop{font-family:var(--ob-font-body); font-size:11px;
  letter-spacing:var(--ob-spatie-label); text-transform:uppercase; color:var(--ob-gedempt)}
.misvatting-correctie{max-width:64ch; margin:0}
.bronlijstje{list-style:none; margin:0; padding:0; font-size:var(--ob-maat-klein)}
.bronlijstje li{padding:var(--ob-ruimte-2) 0; border-bottom:1px solid var(--ob-lijn)}
.bronlijstje li:last-child{border-bottom:0}
.verderlijst{margin:0; padding-left:20px; font-size:var(--ob-maat-body)}
.verderlijst li{margin-bottom:var(--ob-ruimte-2)}

/* ---------------------------------------------------------- formulieren */
.tweeluik{display:grid; grid-template-columns:1.3fr 1fr; gap:var(--ob-ruimte-4);
  align-items:start; margin-top:var(--ob-ruimte-5)}
@media(max-width:860px){.tweeluik{grid-template-columns:1fr}}
.blok-gelukt{background:var(--ob-past-bg); border-color:var(--ob-past)}
.blok-gelukt h2{color:var(--ob-past)}
.formulierfout{background:var(--ob-niet-bg); color:var(--ob-niet);
  padding:var(--ob-ruimte-4); border-radius:var(--ob-radius-kaart); margin-bottom:var(--ob-ruimte-4);
  font-size:var(--ob-maat-klein)}
.tweeluik .blok h2{font-size:19px; margin-top:var(--ob-ruimte-5)}
.tweeluik .blok h2:first-child{margin-top:0}
.tweeluik aside p{font-size:var(--ob-maat-klein)}
select.field-input{appearance:auto}

/* ---------------------------------------------------------- acties en voet */
.acties{display:flex; gap:var(--ob-ruimte-3); flex-wrap:wrap;
  margin:var(--ob-ruimte-6) 0 var(--ob-ruimte-9)}
/* Een knop die iets wijzigt hoort in een formulier te staan (POST), maar moet naast de
   gewone knoppen op één rij passen. Zonder dit duwt het blok-formulier hem eronder. */
.inline-actie{display:inline; margin:0}
/* De drie uitkomsten van een eetmoment naast elkaar: gegeten, overgeslagen, iets
   anders. Elk in een eigen formulier, want het zijn POST's. */
.uitkomstknoppen{display:flex; gap:var(--ob-ruimte-3); flex-wrap:wrap; align-items:center}
.uitkomstknoppen form{margin:0}
.vervangen-formulier{display:flex; gap:var(--ob-ruimte-2); align-items:center}
.field-input.klein{padding:var(--ob-ruimte-2) var(--ob-ruimte-3); font-size:var(--ob-maat-klein);
  min-width:14rem}
.blok .acties{margin:var(--ob-ruimte-5) 0 0}
.field-fout{color:var(--ob-niet)}
footer.site{background:var(--ob-petrol); color:var(--ob-zand);
  padding:var(--ob-ruimte-8) 0 var(--ob-ruimte-9)}
.disclaimer{border:1px solid rgba(247,245,242,.22); border-radius:var(--ob-radius-kaart);
  padding:var(--ob-ruimte-5) var(--ob-ruimte-5); max-width:48rem}
.disclaimer h3{color:var(--ob-zand); font-size:19px; margin-bottom:var(--ob-ruimte-2)}
.disclaimer p{color:rgba(247,245,242,.82); font-size:var(--ob-maat-klein); margin:0}
/* De disclaimer telt sinds 10-9-2026 drie alinea's in plaats van één; zonder ruimte
   ertussen wordt het een muur die niemand leest, en dan doet hij niets. */
.disclaimer p + p{margin-top:var(--ob-ruimte-3)}
.disclaimer strong{color:var(--ob-zand); font-weight:600}
footer.site .na{max-width:48rem; margin-top:var(--ob-ruimte-5);
  font-size:var(--ob-maat-klein); color:rgba(247,245,242,.7)}

/* Een blokkade op een ingrediënt dat de kooktekst voorschrijft maar dat niet in de
   ingrediëntenlijst staat. Zie menu/templates/menu/kiezen.html. Klein en terzijde:
   het is een verduidelijking bij de reden, niet zelf een reden. */
.redenen .uit-tekst{display:block; font-size:var(--ob-maat-meta);
  color:var(--ob-veldlijn); margin-top:2px}

/* Een aanbod uit de bereidingstekst dat bij deze persoon niet past. Geen afkeuring,
   dus niet in de waarschuwingskleur — wel opvallender dan gewone tekst. */
.reden-overslaan{color:var(--ob-past); font-weight:500}