/* ============================================================================
   Verfijning: navigatiegedrag, beweging, diepte en de kleine dingen die het
   verschil maken tussen "werkt" en "af".

   Marcel over de vorige stand: "veel informatie onder een onepager, niet mooi met
   menu's, overgangen enzovoort" — en eerder al: "ik vind mijn oude site mooier".
   Hij had gelijk. In de hele site stonden negen `transition`-regels en nul animaties,
   en het hoofdmenu was een rij van zeven identieke tekstlinks zonder actieve staat.

   Wat een pagina "af" laat voelen zit niet in méér informatie maar in reactie: iets
   dat oplicht als je eroverheen gaat, een menu dat laat zien waar je bent, een lijst
   die binnenkomt in plaats van er ineens te staan.

   Alle kleuren, tijden en schaduwen komen uit tokens.css. Geen hexcodes hier.
   ============================================================================ */

/* ---------------------------------------------------------- kop die meeloopt */

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Een randje in plaats van een slagschaduw: de kop staat op antraciet, en een
     schaduw op donker wordt modder. */
  border-bottom: 1px solid rgba(247, 245, 242, 0.10);
}

/* ---------------------------------------------------------- hoofdmenu */

.hoofdnav a {
  position: relative;
  padding-bottom: 3px;
}

/* Het streepje groeit vanuit het midden. Onderstrepen bij hover deed de tekst
   verspringen; dit niet. */
.hoofdnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--ob-petrol);
  transition: left var(--ob-duur-normaal) var(--ob-curve),
              right var(--ob-duur-normaal) var(--ob-curve);
}

.hoofdnav a:hover { text-decoration: none; opacity: 1; }
.hoofdnav a:hover::after { left: 0; right: 0; }

.hoofdnav a[aria-current="page"] { opacity: 1; }
.hoofdnav a[aria-current="page"]::after { left: 0; right: 0; }

/* ---------------------------------------------------------- menu op een telefoon */

.navschakelaar { position: absolute; }
.navknop { display: none; }

@media (max-width: 820px) {
  header.site .wrap { position: relative; }

  .navknop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    cursor: pointer;
    border-radius: var(--ob-radius-kaart);
  }
  .navknop span {
    display: block;
    height: 2px;
    background: var(--ob-zand);
    transition: transform var(--ob-duur-normaal) var(--ob-curve),
                opacity var(--ob-duur-snel) var(--ob-curve);
  }

  /* Zeven links naast elkaar passen niet op een telefoon; ze liepen buiten beeld.
     Dichtgeklapt tot een knop, en opengeklapt als kolom. Zonder JavaScript: een
     checkbox met een label is hier genoeg, en werkt ook als een script faalt. */
  /* ⚠️ Hier stond `display:grid; grid-template-rows:0fr`, met `1fr` bij :checked.
     Die truc werkt alleen als het grid ÉÉN rij heeft die alle inhoud bevat. Dit
     menu heeft negen kinderen, dus negen impliciete rijen: `grid-template-rows`
     zette alleen de eerste op 0, en het menu stond op elke telefoon open met een
     half afgesneden eerste item. Gevonden 9-9-2026; de fout stond er al vóór de
     huisstijlwissel.

     Nu met max-height. Dat animeert net zo goed, en het werkt ongeacht hoeveel
     items er in het menu staan. De waarde is een bovengrens, geen echte hoogte —
     ruim genoeg voor meer items, klein genoeg om de overgang niet traag te maken. */
  .hoofdnav {
    display: block;
    width: 100%;
    order: 3;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ob-duur-normaal) var(--ob-curve);
  }
  .hoofdnav a {
    display: block;
    padding: var(--ob-ruimte-3) 0;
    border-bottom: 1px solid rgba(247, 245, 242, 0.08);
  }
  .navschakelaar:checked ~ .hoofdnav { max-height: 80vh; overflow-y: auto; }
  .navschakelaar:checked ~ .navknop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navschakelaar:checked ~ .navknop span:nth-child(2) { opacity: 0; }
  .navschakelaar:checked ~ .navknop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Toetsenbordbediening moet zichtbaar blijven; de checkbox zelf is verborgen. */
.navschakelaar:focus-visible ~ .navknop {
  outline: 2px solid var(--ob-petrol);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- kaarten die reageren */

.recept, .moment, .profiel, .mini, .afvaller {
  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);
}

.recept:hover, .profiel:hover, .mini:hover {
  transform: translateY(-2px);
  box-shadow: var(--ob-schaduw-zacht);
}

/* Het avondmaal en de dagmomenten liften niet mee: die staan in een kolom waar je
   langs scrollt, en dan is meebewegen onrustig in plaats van levendig. Wel een
   accentrand, zodat duidelijk is waar je muis is. */
.moment:hover { border-color: var(--ob-petrol); }

.btn, .btn-link { transition: transform var(--ob-duur-snel) var(--ob-curve),
                              background-color var(--ob-duur-snel) var(--ob-curve),
                              color var(--ob-duur-snel) var(--ob-curve); }
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------- binnenkomen */

@keyframes opkomen {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Getrapt, niet allemaal tegelijk: dat leest als een lijst die zich opbouwt in plaats
   van een scherm dat knippert. Na de twaalfde houdt het op — verder wachten voelt
   traag, en dat is het tegenovergestelde van wat dit moet doen. */
.receptenlijst > *, .dagloop > *, .strook > *, .weekrij, .profiel {
  animation: opkomen var(--ob-duur-normaal) var(--ob-curve) both;
}
.receptenlijst > *:nth-child(1),  .dagloop > *:nth-child(1),  .strook > *:nth-child(1)  { animation-delay: 0ms }
.receptenlijst > *:nth-child(2),  .dagloop > *:nth-child(2),  .strook > *:nth-child(2)  { animation-delay: 30ms }
.receptenlijst > *:nth-child(3),  .dagloop > *:nth-child(3),  .strook > *:nth-child(3)  { animation-delay: 60ms }
.receptenlijst > *:nth-child(4),  .dagloop > *:nth-child(4),  .strook > *:nth-child(4)  { animation-delay: 90ms }
.receptenlijst > *:nth-child(5),  .dagloop > *:nth-child(5),  .strook > *:nth-child(5)  { animation-delay: 120ms }
.receptenlijst > *:nth-child(6),  .dagloop > *:nth-child(6),  .strook > *:nth-child(6)  { animation-delay: 150ms }
.receptenlijst > *:nth-child(n+7),.dagloop > *:nth-child(n+7),.strook > *:nth-child(n+7){ animation-delay: 180ms }

/* ---------------------------------------------------------- rust waar dat hoort */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .recept:hover, .profiel:hover, .mini:hover { transform: none; }
}

/* ---------------------------------------------------------- monogrammen

   Twee klachten van Marcel in één: "er staan initialen, dit zouden mooie icons kunnen
   zijn", en "het staat ook nog eens door de namen heen".

   Het tweede was een echte fout: `.minibord` had een naamkolom van vaste 5,5 rem, en
   een langere naam liep dwars door de portiebalk. Vaste breedtes in een grid met
   gebruikersnamen erin gaan altijd een keer stuk.

   Het eerste is een ontwerpkeuze. Echte pictogrammen per gezinslid kunnen niet — het
   zijn mensen, geen categorieën. Wat wél kan is een monogram dat er verzorgd uitziet
   in plaats van gevuld: eigen kleur, witte letter, een lichte rand die diepte geeft.
*/

.avatar {
  background: var(--ob-petrol);
  color: var(--ob-op-donker);
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), var(--ob-schaduw-zacht);
}

/* Op nummer, niet op naam.
 *
 * Eerst stond hier `[data-persoon="marcel"]`. Dat werkt precies voor dit ene gezin:
 * een vijfde persoon kreeg geen kleur, en een ander huishouden helemaal geen. Het
 * nummer komt uit `gezin.KLEURNUMMER` en hoort bij de plek in het huishouden.
 *
 * Mét terugval. Zonder die tweede waarde valt de achtergrond wég zodra de tint
 * onbekend is — en dan staat er witte tekst op een doorzichtig vlak: een leeg vakje.
 * Dat gebeurde echt, doordat de browser een oudere `tokens.css` uit de cache haalde. */
.avatar[data-kleur="1"] { background: var(--ob-persoon-1) }
.avatar[data-kleur="2"] { background: var(--ob-persoon-2) }
.avatar[data-kleur="3"] { background: var(--ob-persoon-3) }
.avatar[data-kleur="4"] { background: var(--ob-persoon-4) }
.avatar[data-kleur="5"] { background: var(--ob-persoon-5) }
.avatar[data-kleur="6"] { background: var(--ob-persoon-6) }

/* Drie tekens komen voor bij namen die alleen in hun staart verschillen. Ze passen,
   maar alleen als de letters iets kleiner worden. */
.avatar { font-size: clamp(11px, 42%, 15px); padding: 0 2px }

/* Overlappen elkaar licht in een rijtje, zoals een stapeltje kaarten. Scheelt ruimte
   en leest als één gezelschap in plaats van vier losse bolletjes. */
.moment-eters { gap: 0 }
.moment-eters .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--ob-ecru) }
.moment-eters .avatar:last-child { margin-right: 0 }

/* ---------------------------------------------------------- de overlap zelf */

.minibord {
  /* `auto` in plaats van 5,5 rem: de kolom groeit mee met de langste naam en de balk
     krimpt. `min-width:0` is nodig omdat een grid-item anders niet kleiner wordt dan
     zijn inhoud, en dan loopt de balk alsnog buiten de kaart. */
  grid-template-columns: 24px minmax(4rem, max-content) minmax(3rem, 1fr) auto;
}
.minibord-naam { white-space: nowrap }
.minibord .bordbalk { min-width: 0 }

@media (max-width: 520px) {
  /* Op een telefoon past naam plus balk plus gewicht niet naast elkaar. Dan de balk
     eronder, over de volle breedte, in plaats van drie dingen die elkaar verdringen. */
  .minibord { grid-template-columns: 24px 1fr auto; row-gap: 4px }
  .minibord .bordbalk { grid-column: 1 / -1 }
}

/* ---------------------------------------------------------- diëtenoverzicht */

.profielkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--ob-ruimte-4);
  margin: var(--ob-ruimte-6) 0;
}

.profielkaart {
  display: flex;
  flex-direction: column;
  gap: var(--ob-ruimte-3);
  padding: var(--ob-ruimte-5);
  background: var(--ob-ecru);
  border: 1px solid var(--ob-lijn);
  border-radius: var(--ob-radius-kaart);
  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);
}
.profielkaart:hover {
  transform: translateY(-2px);
  box-shadow: var(--ob-schaduw-zacht);
  border-color: var(--ob-petrol);
}

.profielkaart-kop { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ob-ruimte-3) }
.profielkaart-kop h2 { font-size: 21px; line-height: 1.15 }
.profielkaart-kern { color: var(--ob-tekst); font-size: var(--ob-maat-klein);
  margin: 0; flex-grow: 1 }
.profielkaart-voet { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ob-ruimte-3); flex-wrap: wrap; margin-top: auto }
.profielkaart-cijfer { font-size: var(--ob-maat-klein); color: var(--ob-gedempt) }
.profielkaart-wie { font-size: 12px; color: var(--ob-gedempt); margin: 0;
  padding-top: var(--ob-ruimte-2); border-top: 1px solid var(--ob-lijn) }

/* ---------------------------------------------------------- receptkaart met beeldvak

   Marcel: "zet er dan een vakje bij met afbeelding volgt later, dan kan ik het
   visualiseren, nu niet." Het vak is er dus nu, met de verhouding die een foto straks
   krijgt (4:3) — zodat de kaart nu al de vorm heeft die hij later houdt en er bij het
   invoegen van een foto niets verschuift.

   Bewust geen grijs blok met een fotopictogram: dat leest als een kapotte afbeelding.
   Een zachte diagonaal met het woord erin leest als "hier komt iets".
*/

.recept { grid-template-columns: 150px 1fr }
@media (max-width: 560px) { .recept { grid-template-columns: 1fr } }

.recept-beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--ob-mist) 0 10px,
      var(--ob-zand) 10px 20px);
  border-right: 1px solid var(--ob-lijn);
}
@media (max-width: 560px) {
  .recept-beeld { aspect-ratio: 16 / 6; border-right: 0;
    border-bottom: 1px solid var(--ob-lijn) }
}

.recept-beeld-tekst {
  font-family: var(--ob-font-body);
  font-size: 10px;
  letter-spacing: var(--ob-spatie-caps);
  text-transform: uppercase;
  color: var(--ob-gedempt);
  background: var(--ob-zand);
  padding: 3px 7px;
  border-radius: var(--ob-radius-ui);
}

/* Geen cijfer over het beeldvak.
   Daar hing een donkere pil met "4 / aan tafel" die over de rand viel en waarvan de
   tekst werd afgekapt. Hij herhaalde bovendien de badge die twee regels lager staat.
   Weggehaald in plaats van gerepareerd: informatie die er al staat hoeft niet nog een
   keer, zeker niet in een vorm die niemand kan lezen. */

/* ---------------------------------------------------------- filterkoppen */

.filterkop {
  font-family: var(--ob-font-body);
  font-size: 10px;
  letter-spacing: var(--ob-spatie-caps);
  text-transform: uppercase;
  color: var(--ob-gedempt);
  margin: var(--ob-ruimte-5) 0 var(--ob-ruimte-2);
}
.zoekbalk { display: flex; gap: var(--ob-ruimte-3); margin-top: var(--ob-ruimte-5);
  max-width: 30rem }
.zoekbalk input { flex: 1; padding: var(--ob-ruimte-3); border: 1px solid var(--ob-veldlijn);
  border-radius: var(--ob-radius-ui); font: inherit; background: var(--ob-ecru) }
.zoekbalk input:focus-visible { outline: 2px solid var(--ob-petrol);
  outline-offset: 1px }

/* ---------------------------------------------------------- boodschappen afdrukken

   Versie 1 had een printbare boodschappenlijst; versie 2 was hem kwijt. Marcel: "in de
   oude versie zat een printbare boodschappenlijst, zodat je het mee kan nemen, dat zie
   ik nu nergens terugkomen."

   Een aparte printpagina bouwen hoeft niet. Wat een lijst onbruikbaar maakt op papier
   is de rest van de site eromheen: menubalk, disclaimer, knoppen, kleurvlakken die de
   inktcartridge leegtrekken. Weghalen wat niet meegaat is genoeg.
*/

.lijstacties { display: flex; align-items: center; gap: var(--ob-ruimte-4);
  margin-top: var(--ob-ruimte-5); flex-wrap: wrap }
.printvoet { display: none }

@media print {
  /* Alles wat op papier niets doet. */
  header.site, footer.site, .acties, .niet-printen, .callout,
  .dagkeuze, .zoekbalk { display: none !important }

  /* Zwart op wit: kleurvlakken kosten inkt en leveren op papier niets op. */
  :root { --ob-zand: #fff; --ob-mist: #fff }
  body { background: #fff; color: #000; font-size: 11pt }
  .wrap { max-width: none; padding: 0 }
  .blok, .lijstblok { border: 0 !important; background: #fff !important;
    padding: 0 !important; margin: 0 0 10mm !important; break-inside: avoid }

  h1 { font-size: 20pt; margin-bottom: 2mm }
  h2 { font-size: 13pt; border-bottom: 1pt solid #000; padding-bottom: 1mm;
       margin-bottom: 2mm }
  .lede, .groep-uitleg { font-size: 9pt; color: #333 }

  /* De vinkjes worden echte vakjes om met een pen aan te kruisen. */
  .boodschappen li { break-inside: avoid; padding: 1mm 0 }
  .boodschappen input[type="checkbox"] {
    appearance: none; width: 4mm; height: 4mm;
    border: 1pt solid #000; border-radius: 0; margin-right: 2mm;
    vertical-align: middle;
  }
  .hoeveelheid { font-weight: 600 }
  .wanneer, .reden { font-size: 8pt; color: #444 }

  .printvoet { display: block; margin-top: 8mm; padding-top: 2mm;
    border-top: 1pt solid #000; font-size: 8pt; color: #444 }

  @page { margin: 14mm }
}

/* ---------------------------------------------------------- weekoverzicht

   Marcel: "ik zou het ook mooi vinden om een kort overzicht op te kunnen roepen van een
   weekmenu totaal overzicht." De dagpagina toont één dag uitgebreid, de weekpagina
   alleen de avonden — de week als geheel was nergens te zien.
*/

.weektabel-omhulsel { overflow-x: auto; margin: var(--ob-ruimte-6) 0 }
.weektabel { border-collapse: collapse; width: 100%; min-width: 56rem;
  background: var(--ob-ecru); border: 1px solid var(--ob-lijn) }
.weektabel th, .weektabel td { border: 1px solid var(--ob-lijn);
  padding: var(--ob-ruimte-3); vertical-align: top; text-align: left }
.weektabel thead th { background: var(--ob-mist); font-family: var(--ob-font-display);
  font-size: 15px; font-weight: 400; position: sticky; top: 0 }
.weektabel thead th a { text-decoration: none }
.weektabel thead th a:hover { text-decoration: underline }
.weektabel tbody th { background: var(--ob-zand); font-family: var(--ob-font-body);
  font-size: 10px; letter-spacing: var(--ob-spatie-caps); text-transform: uppercase;
  color: var(--ob-gedempt); font-weight: 400; white-space: nowrap; width: 9rem }
.weektabel td a { font-size: var(--ob-maat-klein); color: var(--ob-petrol);
  text-decoration: none }
.weektabel td a:hover { text-decoration: underline }
.weektabel td { transition: background-color var(--ob-duur-snel) var(--ob-curve) }
.weektabel tbody tr:hover td { background: var(--ob-zand) }

.kolom-vrij { color: var(--ob-gedempt) }
.kolomnoot { display: block; font-family: var(--ob-font-body); font-size: 9px;
  letter-spacing: var(--ob-spatie-caps); text-transform: uppercase; color: var(--ob-gedempt) }
.cel-meta { display: block; font-size: 11px; color: var(--ob-gedempt); margin-top: 2px }
.cel-niets { font-size: var(--ob-maat-klein); color: var(--ob-gedempt) }
.cel-let-op { background: var(--ob-niet-bg) }
.cel-waarschuwing { display: block; font-size: 11px; color: var(--ob-niet);
  margin-top: 2px }

@media print {
  .weektabel-omhulsel { overflow: visible }
  .weektabel { min-width: 0; font-size: 8pt }
  .weektabel th, .weektabel td { padding: 1.5mm; border: 0.5pt solid #666 }
  .weektabel thead th { background: #eee !important; position: static }
  .cel-meta, .kolomnoot { font-size: 6.5pt }
  @page { size: landscape }
}

/* ---------------------------------------------------------- knoppen die nog niet bestonden

   `.btn-link` en `.btn-klein` werden in de templates gebruikt maar waren nergens
   gedefinieerd. Een <button> zonder stijl krijgt de systeemknop van de browser: een
   grijs blokje met een randje, midden in een verder verzorgde pagina. Op Marcels
   schermafdruk was dat het eerste wat opviel.
*/

.btn-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--ob-maat-klein);
  color: var(--ob-petrol);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.btn-link:hover { color: var(--ob-petrol-diep) }
.btn-link:focus-visible { outline: 2px solid var(--ob-petrol); outline-offset: 2px }

.btn-klein {
  font-size: 12px;
  padding: var(--ob-ruimte-2) var(--ob-ruimte-4);
}

/* De losmaak-knop hoort niet tussen de inhoud te schreeuwen: hij staat er voor als je
   hem nodig hebt, niet als volgende stap. */
.losmaken { margin: 0 0 var(--ob-ruimte-3) }
.eigen-keuze { color: var(--ob-petrol); font-family: var(--ob-font-body);
  font-size: 10px; letter-spacing: var(--ob-spatie-caps); text-transform: uppercase }

.momentlink { font-size: var(--ob-maat-klein); color: var(--ob-gedempt);
  text-decoration: none; border-bottom: 1px solid var(--ob-lijn-sterk) }
.momentlink:hover { color: var(--ob-petrol); border-color: var(--ob-petrol) }

.keuze-waarschuwing { background: var(--ob-aanpassing-bg);
  border-left: 3px solid var(--ob-aanpassing); padding: var(--ob-ruimte-4);
  margin: 0 0 var(--ob-ruimte-4); border-radius: var(--ob-radius-kaart) }
.keuze-waarschuwing p:last-child { margin-bottom: 0 }
.alternatieven { list-style: none; margin: var(--ob-ruimte-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ob-ruimte-4) }

.vastgezet-melding { background: var(--ob-past-bg);
  border-left: 3px solid var(--ob-past); padding: var(--ob-ruimte-4);
  margin: var(--ob-ruimte-5) 0; border-radius: var(--ob-radius-kaart) }
.vastgezet-melding p { margin-bottom: var(--ob-ruimte-2) }
.mini-gekozen { border-color: var(--ob-past) !important;
  box-shadow: inset 0 0 0 1px var(--ob-past) }

/* ---------------------------------------------------------- gasten */

.gastenveld { width: 3.5rem; padding: var(--ob-ruimte-2); font: inherit; text-align: center;
  border: 1px solid var(--ob-veldlijn); border-radius: var(--ob-radius-ui);
  background: var(--ob-ecru) }
.gastenveld:focus-visible { outline: 2px solid var(--ob-petrol); outline-offset: 1px }

/* Een gast krijgt geen persoonskleur: hij hoort niet bij het huishouden, en een eigen
   tint zou suggereren dat de site hem kent. Grijs met een streepjesrand leest als
   "tijdelijk". */
.avatar[data-kleur="0"] {
  background: transparent;
  color: var(--ob-gedempt);
  box-shadow: inset 0 0 0 1px var(--ob-lijn-sterk);
}

/* ---------------------------------------------------------- vragen voor de diëtist

   Deze pagina wordt afgedrukt en meegenomen naar een consult van twintig minuten.
   Dat stelt andere eisen dan een scherm: ruimte om te schrijven, één vraag per blok,
   en geen kleurvlakken die de leesbaarheid op papier verstoren.
*/

.dietist-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--ob-ruimte-4); margin-top: var(--ob-ruimte-5) }
.dietist-cijfers div { background: var(--ob-ecru); border: 1px solid var(--ob-lijn);
  border-radius: var(--ob-radius-kaart); padding: var(--ob-ruimte-4); text-align: center }
.dietist-cijfers strong { display: block; font-family: var(--ob-font-display);
  font-size: 30px; line-height: 1; color: var(--ob-petrol) }
.dietist-cijfers span { display: block; margin-top: var(--ob-ruimte-2);
  font-size: 12px; color: var(--ob-gedempt) }

.dietistvraag { 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) }
.dietistvraag-kop { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ob-ruimte-4); flex-wrap: wrap; margin-bottom: var(--ob-ruimte-4) }
.dietistvraag-kop h3 { font-family: var(--ob-font-display); font-size: 20px; font-weight: 400;
  margin: 0 }
.dietistvraag-raakt { font-family: var(--ob-font-body); font-size: 10px;
  letter-spacing: var(--ob-spatie-caps); text-transform: uppercase;
  color: var(--ob-petrol); white-space: nowrap }

.dietistvraag-body { margin: 0 0 var(--ob-ruimte-4) }
.dietistvraag-body dt { font-family: var(--ob-font-body); font-size: 10px;
  letter-spacing: var(--ob-spatie-caps); text-transform: uppercase; color: var(--ob-gedempt);
  margin-top: var(--ob-ruimte-3) }
.dietistvraag-body dd { margin: var(--ob-ruimte-1) 0 0; color: var(--ob-tekst);
  font-size: var(--ob-maat-klein) }

.dietistvraag-vraag { font-size: var(--ob-maat-lead); color: var(--ob-petrol);
  border-left: 3px solid var(--ob-petrol); padding-left: var(--ob-ruimte-4);
  margin: 0 }

.antwoordruimte { display: none }

.dietisttabel { width: 100%; border-collapse: collapse; margin-top: var(--ob-ruimte-5);
  background: var(--ob-ecru); border: 1px solid var(--ob-lijn) }
.dietisttabel th, .dietisttabel td { border: 1px solid var(--ob-lijn);
  padding: var(--ob-ruimte-3); text-align: left; vertical-align: top;
  font-size: var(--ob-maat-klein) }
.dietisttabel thead th { background: var(--ob-mist); font-family: var(--ob-font-body);
  font-size: 10px; letter-spacing: var(--ob-spatie-caps); text-transform: uppercase;
  color: var(--ob-gedempt); font-weight: 400 }
.dietisttabel tbody th { font-weight: 400 }
.dietisttabel tbody th a { font-family: var(--ob-font-display); font-size: 16px }
.dietisttabel p { margin: 0 0 var(--ob-ruimte-2) }
.dietisttabel p:last-child { margin-bottom: 0 }

.blok-voorstel { background: var(--ob-mist); border: 1px solid var(--ob-lijn-sterk);
  border-radius: var(--ob-radius-kaart); padding: var(--ob-ruimte-5) }

@media print {
  .dietistvraag { break-inside: avoid; border: 0; border-bottom: 0.5pt solid #999;
    border-radius: 0; padding: 0 0 4mm; margin-bottom: 5mm }
  .dietistvraag-vraag { border-left: 2pt solid #000; font-size: 11pt }
  .dietist-cijfers div { border: 0.5pt solid #999 }

  /* Op papier is dit het belangrijkste vak van de bladzijde. */
  .antwoordruimte { display: block; margin-top: 4mm; padding-top: 2mm;
    border-top: 0.5pt dashed #999; min-height: 22mm }
  .antwoordruimte span { font-size: 7pt; color: #666; text-transform: uppercase;
    letter-spacing: 0.08em }

  .blok-voorstel { background: #fff !important; border: 0.5pt solid #999;
    break-inside: avoid }
}

/* ---------------------------------------------------------- gegeten en gewaardeerd */

.gegeten-blok { margin: var(--ob-ruimte-4) 0; padding: var(--ob-ruimte-4);
  background: var(--ob-zand); border: 1px dashed var(--ob-lijn-sterk);
  border-radius: var(--ob-radius-kaart) }
.gegeten-blok.is-gegeten { background: var(--ob-past-bg);
  border: 1px solid var(--ob-past) }
.gegeten-melding { font-size: var(--ob-maat-klein); color: var(--ob-past);
  margin-bottom: var(--ob-ruimte-3) }
.eerder { color: var(--ob-gedempt) }
.eerdere-oordelen { margin-left: var(--ob-ruimte-4); font-size: 12px;
  color: var(--ob-gedempt) }

.oordelen { display: grid; gap: var(--ob-ruimte-2); margin-bottom: var(--ob-ruimte-3) }
.oordeel-rij { display: flex; align-items: center; gap: var(--ob-ruimte-2); flex-wrap: wrap }
.oordeel-naam { font-size: var(--ob-maat-klein); min-width: 5rem }
.oordeel-rij form { display: inline }

.oordeelknop { appearance: none; font: inherit; font-size: 12px; cursor: pointer;
  padding: 3px var(--ob-ruimte-3); border-radius: var(--ob-radius-ui);
  border: 1px solid var(--ob-lijn-sterk); background: var(--ob-ecru);
  color: var(--ob-tekst);
  transition: border-color var(--ob-duur-snel) var(--ob-curve),
              background-color var(--ob-duur-snel) var(--ob-curve) }
.oordeelknop:hover { border-color: var(--ob-petrol) }
.oordeelknop.gekozen { background: var(--ob-petrol); color: var(--ob-zand);
  border-color: var(--ob-petrol) }
.oordeelknop:focus-visible { outline: 2px solid var(--ob-petrol); outline-offset: 1px }

@media print { .gegeten-blok { display: none } }

/* ---------------------------------------------------------- melden vanaf de pagina zelf */

.meldregel { font-size: var(--ob-maat-klein); color: var(--ob-gedempt);
  margin: var(--ob-ruimte-5) 0 0; padding-top: var(--ob-ruimte-4);
  border-top: 1px solid var(--ob-lijn) }
.meldregel a { color: var(--ob-petrol) }
@media print { .meldregel { display: none } }

/* ---------------------------------------------------------- afgevinkt */

.boodschappen li.gehad .artikel { text-decoration: line-through;
  color: var(--ob-gedempt) }
.boodschappen li.gehad .hoeveelheid { color: var(--ob-gedempt) }
.boodschappen li { transition: opacity var(--ob-duur-snel) var(--ob-curve) }
.boodschappen li.gehad { opacity: .55 }

/* Op papier is doorstrepen zinloos — daar kruis je met een pen aan. Wat je al hebt
   hoeft dan ook niet mee de winkel in. */
@media print { .boodschappen li.gehad { display: none } }