/* ==========================================================================
   Mạnh Hùng Kitchen — huisstijl en layout
   Kleuren en lettertypes volgen MHK_Briefing_Website.docx.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Huisstijlkleuren uit de briefing */
  --rood:        #A81818;
  --donker:      #1A1A1A;
  --creme:       #F7ECE2;
  --goud:        #C09040;
  --grijs:       #44403C;

  /* Afgeleiden. --goud haalt op crème geen 4,5:1 en wordt daarom uitsluitend
     als decoratieve haarlijn gebruikt, nooit voor tekst of iconen die
     informatie dragen. Op de donkere footer haalt goud 6:1 en mag het wel. */
  --rood-diep:   #8E1414;
  --creme-diep:  #F1E2D4;
  --lijn:        rgba(192, 144, 64, 0.38);
  --lijn-sterk:  rgba(192, 144, 64, 0.62);
  --op-donker:   rgba(247, 236, 226, 0.72);
  --scrim:       rgba(26, 26, 26, 0.55);
  /* Rand van invoervelden. Haalt 3,19:1 tegen crème, de eis voor de omtrek van
     een bedieningselement. Lichter mag dus niet. */
  --veldrand:    #8A847E;
  --veld-bg:     #FDF7F1;

  /* Typografie */
  --kop:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --tekst: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-eyebrow: 0.6875rem;
  --t-body:    1.0625rem;
  --t-lead:    clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --t-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --t-h1:      clamp(2.75rem, 1.6rem + 5vw, 6rem);
  --t-cijfer:  clamp(3.25rem, 2rem + 5vw, 6.5rem);

  /* Ritme — 4/8px-schaal */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;
  --sectie: clamp(4.5rem, 3rem + 8vw, 9rem);
  --rand:   clamp(1.25rem, 0.5rem + 3.2vw, 4.5rem);
  --hoofd-h: 4.5rem;   /* hoogte van de plakkende header; hero rekent hiermee */
  --maxw:   80rem;
  --meet:   64ch;

  /* Beweging */
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
  --duur: 640ms;

  /* Lagen */
  --z-hoofd: 100;
  --z-menu:  200;
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--donker);
  font-family: var(--tekst);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
p + p { margin-top: var(--s-3); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rood);
  outline-offset: 3px;
  border-radius: 2px;
}
.op-donker :focus-visible { outline-color: var(--creme); }

::selection { background: var(--rood); color: var(--creme); }

/* --------------------------------------------------------------------------
   3. Hulpklassen
   -------------------------------------------------------------------------- */
.omhulsel {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.overslaan {
  position: absolute; left: var(--rand); top: -100%;
  z-index: calc(var(--z-menu) + 10);
  background: var(--donker); color: var(--creme);
  padding: 0.75rem 1.25rem; font-size: 0.875rem; text-decoration: none;
  transition: top 180ms var(--uit);
}
.overslaan:focus { top: 1rem; }

.label {
  font-family: var(--tekst);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.label::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--lijn-sterk);
  flex: none;
}

.lead { font-size: var(--t-lead); line-height: 1.6; font-weight: 300; }

.maat { max-width: var(--meet); }

.sectie { padding-block: var(--sectie); }

.haarlijn { border: 0; border-top: 1px solid var(--lijn); margin: 0; }

/* --------------------------------------------------------------------------
   4. Knoppen en links
   -------------------------------------------------------------------------- */
.knop {
  --knop-bg: var(--rood);
  --knop-tekst: var(--creme);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  background: var(--knop-bg);
  color: var(--knop-tekst);
  font-family: var(--tekst);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--knop-bg);
  border-radius: 0;
  cursor: pointer;
  transition: background 260ms var(--uit), color 260ms var(--uit), border-color 260ms var(--uit);
}
.knop:hover { --knop-bg: var(--rood-diep); }

.knop--lijn {
  --knop-bg: transparent;
  --knop-tekst: var(--rood);
  border-color: var(--rood);
}
.knop--lijn:hover { --knop-bg: var(--rood); --knop-tekst: var(--creme); }

.knop--licht {
  --knop-bg: transparent;
  --knop-tekst: var(--creme);
  border-color: var(--op-donker);
}
.knop--licht:hover { --knop-bg: var(--creme); --knop-tekst: var(--donker); border-color: var(--creme); }

/* Tekstlink met onderlijn die uitschuift */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rood);
  padding-block: 0.35rem;
  position: relative;
}
.tlink::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--uit);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .pijl { transition: transform 340ms var(--uit); }
.tlink:hover .pijl { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.hoofd {
  position: sticky;
  top: 0;
  z-index: var(--z-hoofd);
  /* Bijna dekkend: navigatietekst moet leesbaar blijven wanneer er beeld
     onder de balk doorschuift. */
  background: color-mix(in srgb, var(--creme) 94%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 320ms var(--uit), background 320ms var(--uit);
}
.hoofd[data-vast="ja"] { border-bottom-color: var(--lijn); }

@supports not (backdrop-filter: blur(1px)) {
  .hoofd { background: var(--creme); }
}

.hoofd__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 5rem;
  padding-block: 0.75rem;
}

.merk { display: inline-flex; flex: none; text-decoration: none; }
/* Het woordmerk staat op drie regels. Onder ongeveer 3,5rem vallen de
   diakritische tekens van Mạnh Hùng weg, dus hier niet verder verkleinen. */
.merk img { height: 3.5rem; width: auto; }
@media (min-width: 48rem) {
  .merk img { height: 4rem; }
}

.hoofd__rechts { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.nav__lijst {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--donker);
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--rood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--uit);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--rood); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Taalschakelaar */
.taal {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lijn-sterk);
}
.taal__knop {
  appearance: none;
  min-width: 2.75rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 0;
  color: var(--grijs);
  font-family: var(--tekst);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 220ms var(--uit), color 220ms var(--uit);
}
.taal__knop:hover { color: var(--donker); }
/* In de footer staat dezelfde schakelaar op bijna zwart. Grijs haalde daar
   1,69:1; met de lichte tint wordt het 8,8:1. */
.op-donker .taal__knop { color: var(--op-donker); }
.op-donker .taal__knop:hover { color: var(--creme); }
.taal__knop[aria-pressed="true"] {
  background: var(--rood);
  color: var(--creme);
  cursor: default;
}

/* Hamburger */
.hamburger {
  display: none;
  appearance: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--donker);
}
.hamburger span {
  display: block;
  width: 1.375rem; height: 1px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 320ms var(--uit), opacity 200ms var(--uit);
}
.hamburger span + span { margin-top: 6px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  align-content: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--rand);
  background: var(--creme);
  visibility: hidden;
  opacity: 0;
  transition: opacity 320ms var(--uit), visibility 0s linear 320ms;
}
.menu[data-open="ja"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 320ms var(--uit);
}
.menu__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.menu__link {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--kop);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.15;
  text-decoration: none;
  color: var(--donker);
}
.menu__link[aria-current="page"] { color: var(--rood); }
.menu__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

@media (max-width: 60rem) {
  .hamburger { display: block; }
  .hoofd .nav, .hoofd .taal { display: none; }
  .hoofd .knop { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero — schermvullende opening
   Eén beeld, het logo groot, verder niets. De bezoeker scrolt om de rest te
   vinden. De koptekst en de knop staan bewust in de sectie eronder.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* Niet het volle scherm. Daarmee stond er boven de vouw niets dan het
     logo en moest de bezoeker scrollen om te weten wat wij doen. Nu komt de
     belofte er net onderuit kijken, wat ook uitnodigt om door te lezen. */
  min-height: calc(78vh - var(--hoofd-h));
  min-height: calc(78svh - var(--hoofd-h));
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--donker);
  overflow: hidden;
}

/* Het beeld vult de hele opening en zit achter alles. */
.hero__beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__beeld > * { width: 100%; height: 100%; }
.hero__beeld img { object-fit: cover; }

/* Sluier: houdt het logo leesbaar, ongeacht hoe licht de foto straks is.
   Onder- en bovenrand iets dieper, het midden open zodat het beeld blijft
   spreken. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Twee lagen. De ovaal in het midden verdiept alleen de plek waar het logo
     staat: daar is het buffet fel en haalde crème op wit maar 4,4:1. Met deze
     laag erbij is dat ruim 7:1, terwijl de randen van de foto helder blijven.
     Daaronder het verticale verloop dat de bovenrand en de onderrand verdiept. */
  background:
    radial-gradient(ellipse 44% 60% at 50% 46%,
      rgba(26, 26, 26, 0.55) 0%,
      rgba(26, 26, 26, 0.30) 58%,
      rgba(26, 26, 26, 0) 100%),
    linear-gradient(
      180deg,
      rgba(26, 26, 26, 0.52) 0%,
      rgba(26, 26, 26, 0.28) 34%,
      rgba(26, 26, 26, 0.34) 64%,
      rgba(26, 26, 26, 0.68) 100%
    );
}

.hero__merk {
  margin: 0;
  display: grid;
  place-items: center;
  /* Was clamp(2rem, 5vw, 4rem): op een laptop 64 px boven en onder het logo.
     Samen met de scrollwenk duwde dat het openingsblok volledig buiten beeld.
     De witruimte is teruggebracht, het logo zelf blijft even groot staan. */
  padding: clamp(1rem, 2.25vw, 2rem) var(--rand);
  transform-origin: center 45%;
}
/* will-change alleen zetten als er werkelijk iets beweegt. Zonder .mhk-anim
   draait de parallax niet, en dan houdt de browser er onnodig een aparte laag
   voor aan. */
.mhk-anim .hero__merk { will-change: scale, opacity; }

/* Zachte overgang van de donkere hero naar de crème pagina: de onderrand lost
   op in de achtergrondkleur, zodat er geen harde scheidslijn staat. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 236, 226, 0) 0%, var(--creme) 100%);
}

/* Ruimte voor de parallax: het beeld is iets hoger dan de hero, zodat het kan
   meebewegen zonder dat de randen in beeld komen. */
.mhk-anim .hero__beeld { top: -12%; bottom: -12%; will-change: translate; }
/* Maatvoering met max-height in plaats van height: zo past het logo altijd in
   beeld, ook als de browser svh niet kent. Met een vaste height zou de regel
   in dat geval ongeldig zijn, viel de hoogte terug op de ware grootte van het
   bestand (1400px) en liep het logo volledig buiten beeld. */
.hero__merk img {
  width: auto;
  height: auto;
  max-height: 46vh;
  max-width: 62vw;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35));
}
@supports (height: 1svh) {
  .hero__merk img { max-height: min(46svh, 26rem); }
}
@media (max-width: 40rem) {
  .hero__merk img { max-height: 46vh; max-width: 68vw; }
  @supports (height: 1svh) {
    .hero__merk img { max-height: min(46svh, 22rem); }
  }
}

/* Scrollwenk: het mes van het logo, met een ingehouden beweging. */
.hero__scroll {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem clamp(1.75rem, 3vw, 2.5rem);
  color: var(--creme);
  text-decoration: none;
  font-size: 0.6875rem;   /* was 0.625rem = 10 px, onder de leesbaarheidsgrens */
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero__scroll .mes {
  --mes-h: 2.25rem;
  opacity: 0.85;
  animation: wenk 2.6s var(--uit) infinite;
}
.hero__scroll:hover .mes { opacity: 1; }
@keyframes wenk {
  0%, 70%, 100% { transform: translateY(0); }
  35%           { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll .mes { animation: none; }
}

/* --------------------------------------------------------------------------
   6b. Openingsblok — de koptekst die vroeger in de hero stond
   -------------------------------------------------------------------------- */
.opening { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) 0; }

.opening__titel {
  font-family: var(--kop);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 20ch;
  margin-block: var(--s-3) var(--s-4);
}

.opening__sub {
  max-width: 34rem;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--grijs);
}

.opening__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   6c. Het mes als terugkerend teken
   De png is een tekening met een transparant binnenwerk, dus als css-masker
   blijven de graveerlijnen staan en neemt het mes de kleur aan van de tekst
   eromheen. Zo kan hetzelfde bestand goud, rood of crème zijn.
   -------------------------------------------------------------------------- */
.mes {
  --mes-h: 1.5rem;
  display: inline-block;
  flex: none;
  height: var(--mes-h);
  width: calc(var(--mes-h) * 0.298);   /* verhouding van de tekening */
  background-color: currentColor;
  -webkit-mask: url("../logo/knife.png") center / contain no-repeat;
          mask: url("../logo/knife.png") center / contain no-repeat;
}

/* Scheiding tussen secties: haarlijn, mes, haarlijn. */
.scheiding {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  color: var(--goud);
  margin-block: clamp(3rem, 6vw, 5.5rem);
}
.scheiding::before,
.scheiding::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lijn);
}
.scheiding .mes { --mes-h: 2rem; opacity: 0.75; }

/* Watermerk: groot en bijna onzichtbaar, als achtergrond van een sectie. */
.watermerk { position: relative; isolation: isolate; }
.watermerk > .mes {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  --mes-h: min(78vh, 46rem);
  color: var(--donker);
  opacity: 0.04;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Beeld en plaatshouders
   -------------------------------------------------------------------------- */
.beeld {
  position: relative;
  overflow: hidden;
  background: var(--creme-diep);
}
.beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.beeld--liggend  { aspect-ratio: 16 / 9; }
.beeld--staand   { aspect-ratio: 4 / 5; }
.beeld--portret  { aspect-ratio: 4 / 5; }

@media (max-width: 40rem) {
  .beeld--liggend { aspect-ratio: 3 / 2; }
}

/* Plaatshouder: rustig crème vlak met haarlijn, mesmerk en een klein label.
   Vervangen = de <div class="ph"> vervangen door <img>. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 20%, #FBF4EC 0%, var(--creme-diep) 55%, #ECDCCB 100%);
  border: 1px solid var(--lijn);
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(192, 144, 64, 0.22);
  pointer-events: none;
}
/* Het mes als watermerk in de plaatshouder. Gebruikt hetzelfde masker als
   .mes, dus het neemt gewoon een kleur aan in plaats van een tweede bestand. */
.ph__mes {
  --mes-h: clamp(2.5rem, 7vw, 5.5rem);
  color: var(--donker);
  opacity: 0.12;
}
.ph__label {
  position: absolute;
  left: 1.5rem; bottom: 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grijs);
  opacity: 0.65;
}

/* Donkere plaatshouder voor de hero: dezelfde toon als de foto die er komt,
   zodat het logo er nu al goed op staat. */
.ph--donker {
  background:
    radial-gradient(120% 80% at 50% 30%, #2E2A28 0%, #221F1D 45%, #141312 100%);
  border-color: rgba(192, 144, 64, 0.18);
}
.ph--donker::after { border-color: rgba(192, 144, 64, 0.14); }
.ph--donker .ph__mes { color: var(--creme); opacity: 0.10; }
.ph--donker .ph__label { color: var(--creme); opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. Redactionele blokken
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  gap: var(--s-4) clamp(2rem, 6vw, 6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-6) clamp(3rem, 7vw, 7rem); }
  .duo__kop { position: sticky; top: 8rem; align-self: start; }
}
.duo__kop h2 { font-size: var(--t-h2); }

.pijlers {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .pijlers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pijler__titel {
  font-size: var(--t-h3);
  margin-block: var(--s-3) var(--s-2);
}
.pijler .beeld { margin-bottom: var(--s-3); }

/* --------------------------------------------------------------------------
   9. Experiences I–VII
   -------------------------------------------------------------------------- */
.exp__intro {
  display: grid;
  gap: var(--s-3) clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
@media (min-width: 56rem) {
  .exp__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.exp__intro h2 { font-size: var(--t-h2); }

.exp__lijst { display: grid; gap: 0; }

.exp {
  display: grid;
  gap: var(--s-4) clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 4vw, 4.5rem);
  border-top: 1px solid var(--lijn);
}
.exp:last-child { border-bottom: 1px solid var(--lijn); }

@media (min-width: 56rem) {
  .exp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
  /* Marquet-ritme: beeld wisselt per rij van kant */
  .exp:nth-child(even) .exp__beeld { grid-column: 1; grid-row: 1; }
  .exp:nth-child(even) .exp__inhoud { grid-column: 2; grid-row: 1; }
}

.exp__inhoud { display: flex; flex-direction: column; align-items: flex-start; }

.exp__cijfer {
  font-family: var(--kop);
  font-size: var(--t-cijfer);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--rood);
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}

.exp__naam {
  font-family: var(--kop);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.exp__sub {
  font-family: var(--kop);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--grijs);
  margin-bottom: var(--s-3);
}

.exp__tekst {
  max-width: 40ch;
  font-weight: 300;
  font-size: var(--t-lead);
  line-height: 1.6;
}

.exp__prijs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: var(--s-3);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--grijs);
  font-variant-numeric: tabular-nums;
}
.exp__prijs b { font-weight: 600; color: var(--donker); }
.exp__prijs .punt { width: 3px; height: 3px; background: var(--goud); border-radius: 50%; flex: none; }

.exp__link { margin-top: var(--s-4); }

.exp__slot { margin-top: clamp(3rem, 5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   10. Chef
   -------------------------------------------------------------------------- */
.chef {
  display: grid;
  gap: var(--s-5) clamp(2rem, 6vw, 6rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .chef { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .chef__beeld { grid-column: 2; grid-row: 1; }
}
.chef__titel { font-size: var(--t-h2); margin-bottom: var(--s-3); }

.chef__citaat {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-3);
  border-left: 2px solid var(--lijn-sterk);
  font-family: var(--kop);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--donker);
}

/* --------------------------------------------------------------------------
   11. Slotoproep
   -------------------------------------------------------------------------- */
.slot {
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  border-top: 1px solid var(--lijn);
}
.slot__titel {
  font-size: var(--t-h2);
  max-width: 22ch;
  margin-inline: auto;
}
.slot__acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.voet {
  background: var(--donker);
  color: var(--creme);
  padding-block: clamp(3.5rem, 3rem + 4vw, 6rem) var(--s-4);
}
.voet a { color: var(--creme); text-decoration: none; }
.voet a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.voet__raster {
  display: grid;
  gap: var(--s-5) clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .voet__raster { grid-template-columns: auto repeat(3, minmax(0, 1fr)); }
}

.voet__merk img { height: clamp(8rem, 18vw, 11.5rem); width: auto; }

.voet__kop {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goud);
  margin: 0 0 var(--s-2);
}

.voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.voet__lijst li { font-size: 0.9375rem; line-height: 1.6; color: var(--op-donker); }
.voet__lijst a { color: var(--creme); }
/* Aanraakdoel: los staande links in de footer minstens 24px hoog (WCAG 2.2),
   ruimer op telefoon omdat het merendeel van de bezoekers mobiel komt. */
.voet__lijst a:not(.ig) {
  display: inline-block;
  padding-block: 0.5rem;
}
@media (max-width: 48rem) {
  .voet__lijst a:not(.ig) { padding-block: 0.6875rem; }
}
.voet__lijst .sub {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: 0.15rem;
}

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(247, 236, 226, 0.16);
  font-size: 0.8125rem;
  color: var(--op-donker);
}
.voet__onder ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
/* Zonder deze ruimte is de link naar de privacyverklaring 16 px hoog; dat is
   onder de 24 px die WCAG 2.2 als kleinste raakvlak aanhoudt. */
.voet__onder a { display: inline-block; padding-block: 0.3rem; }

.ig {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  color: var(--op-donker);
}
.ig svg { flex: none; }

/* --------------------------------------------------------------------------
   13. Beweging
   -------------------------------------------------------------------------- */
/* Blokken zijn standaard gewoon zichtbaar. Alleen wanneer javascript vooraf
   bevestigt dat het de animatie ook echt uitvoert — het zet dan .mhk-anim op
   <html> — worden ze verborgen om in te faden. Zo blijft de pagina volledig
   leesbaar als javascript uitvalt, geblokkeerd wordt, of de observer niet
   afgaat; anders zou de hele pagina leeg blijven. */
.mhk-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--duur) var(--uit) var(--vertraging, 0ms),
    transform var(--duur) var(--uit) var(--vertraging, 0ms);
  will-change: opacity, transform;
}
.mhk-anim .reveal.zichtbaar { opacity: 1; transform: none; }

/* Beelden komen ingezoomd binnen en komen tot rust zodra ze in beeld staan.
   We gebruiken de losse eigenschap `scale`, niet `transform`, zodat het
   scrolleffect in main.js tegelijk `translate` kan zetten zonder botsing. */
.mhk-anim .beeld img {
  scale: 1.07;
  transition: scale 1600ms var(--uit);
  will-change: scale, translate;
}
.mhk-anim .reveal.zichtbaar .beeld img { scale: 1; }
/* De hero staat er al bij het laden; die hoeft niet te wachten op een reveal. */
.mhk-anim .hero__beeld img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mhk-anim .reveal { opacity: 1; transform: none; transition: none; }
  .mhk-anim .beeld img { scale: 1; transition: none; }
  .mhk-anim .hero__beeld { top: 0; bottom: 0; }
  .hero__merk, .hero__beeld, .beeld img { translate: none !important; scale: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */
@media print {
  .hoofd, .menu, .hero__acties, .slot__acties, .exp__link { display: none; }
  body { background: #fff; color: #000; }
  .voet { background: #fff; color: #000; }
}

/* De hero-plaatshouder is schermvullend; daar past geen kaderlijn omheen. */
.hero__beeld .ph { border: 0; }
.hero__beeld .ph::after { display: none; }
.hero__beeld .ph__label { left: var(--rand); bottom: 1.5rem; }

/* ==========================================================================
   15. Onderdelen voor Experiences, Over ons en Contact
   ========================================================================== */

/* --- Paginakop: rustige opening voor de drie subpaginas ----------------- */
.paginakop { padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) 0; }
.paginakop__titel {
  font-family: var(--kop);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 18ch;
  margin-block: var(--s-3) var(--s-4);
}
.paginakop__intro {
  max-width: 46ch;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--grijs);
}
.paginakop__extra { max-width: var(--meet); margin-top: var(--s-4); }

/* --- Snelspringer naar een experience ----------------------------------- */
.springer { margin-top: clamp(2.5rem, 5vw, 4rem); }
.springer__lijst {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.springer__lijst a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--lijn-sterk);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--donker);
  transition: background 220ms var(--uit), border-color 220ms var(--uit), color 220ms var(--uit);
}
.springer__lijst a:hover { background: var(--rood); border-color: var(--rood); color: var(--creme); }
.springer__nr { font-family: var(--kop); font-size: 1rem; color: var(--rood); }
.springer__lijst a:hover .springer__nr { color: var(--creme); }

/* --- Experience in het groot --------------------------------------------- */
.exd {
  display: grid; gap: var(--s-4) clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 5vw, 5.5rem);
  border-top: 1px solid var(--lijn);
  scroll-margin-top: 7rem;
}
@media (min-width: 56rem) {
  /* De tekst staat in de dom vóór het beeld, zodat een schermlezer eerst de
     naam van de experience hoort en niet het plaatshouderlabel. De plaatsing
     regelen we daarom expliciet in plaats van via de dom-volgorde.
     Bij de gedraaide rijen wisselen óók de kolombreedtes mee, zodat de tekst
     altijd de brede kolom houdt en de rijen even breed ogen. */
  .exd { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .exd__beeld  { grid-column: 1; grid-row: 1; position: sticky; top: 7.5rem; }
  .exd__inhoud { grid-column: 2; grid-row: 1; }

  .exd--gedraaid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .exd--gedraaid .exd__beeld  { grid-column: 2; }
  .exd--gedraaid .exd__inhoud { grid-column: 1; }
}

/* Een kopblok zonder tweede kolom mag de volle breedte hebben. */
.exp__intro:has(> :only-child) { grid-template-columns: 1fr; }
.exd__cijfer {
  font-family: var(--kop); font-size: var(--t-cijfer); font-weight: 400;
  line-height: 0.85; color: var(--rood); margin-bottom: var(--s-3);
}
.exd__naam {
  font-family: var(--kop); font-size: var(--t-h2); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.35rem;
}
.exd__sub {
  font-family: var(--kop); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-style: italic; color: var(--grijs); margin-bottom: var(--s-4);
}
.exd__tekst { max-width: var(--meet); }

/* Uitvoering apart gezet: het is praktische informatie, geen verhaal. */
.exd__hoe {
  margin-top: var(--s-4);
  padding: var(--s-3) 0 var(--s-3) var(--s-3);
  border-left: 2px solid var(--lijn-sterk);
  max-width: var(--meet);
}
.exd__hoe .label { margin-bottom: var(--s-1); }
.exd__hoe .label::before { display: none; }
.exd__hoe p { font-size: 0.9375rem; color: var(--grijs); }

.exd__prijs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--lijn);
  font-size: 1.0625rem; font-variant-numeric: tabular-nums;
}
.exd__prijs .label { margin: 0; }

/* --- Uitlegkader (Nobu-stijl) -------------------------------------------- */
.kader {
  margin-top: var(--s-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--creme-diep);
  border: 1px solid var(--lijn);
  max-width: var(--meet);
}
.kader__titel {
  font-family: var(--kop); font-size: 1.375rem; font-weight: 600;
  margin-bottom: var(--s-2);
}
.kader p { font-size: 0.9375rem; color: var(--grijs); }

/* --- Upgrades ------------------------------------------------------------ */
.upg { display: grid; gap: 0; margin-top: var(--s-4); }
.upg__item {
  display: grid; gap: 0.5rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--lijn);
}
.upg__item:last-child { border-bottom: 1px solid var(--lijn); }
@media (min-width: 48rem) {
  .upg__item { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); }
}
.upg__titel { font-family: var(--kop); font-size: 1.375rem; font-weight: 600; }
.upg__tekst { max-width: var(--meet); color: var(--grijs); }

/* --- Kernwaarden ---------------------------------------------------------- */
.waarden {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr; margin-top: var(--s-5);
}
@media (min-width: 48rem) { .waarden { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.waarde {
  display: grid; justify-items: start; gap: var(--s-2);
  padding-top: var(--s-3); border-top: 1px solid var(--lijn);
}
.waarde .mes { --mes-h: 2.25rem; color: var(--goud); }
.waarde__tekst {
  font-family: var(--kop);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.2;
}

/* --- Citaatblok ----------------------------------------------------------- */
.citaat {
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-block: 1px solid var(--lijn);
  text-align: center;
}
.citaat p {
  font-family: var(--kop); font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.25; max-width: 24ch; margin-inline: auto;
}

/* --- Contactgegevens ------------------------------------------------------ */
.gegevens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.gegevens li { display: grid; gap: 0.15rem; }
.gegevens .sub {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--grijs);
}
.gegevens a { display: inline-block; padding-block: 0.35rem; font-size: 1.0625rem; text-decoration: none; }
.gegevens a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* --- Formulier ------------------------------------------------------------ */
.form { margin-top: var(--s-4); }
.form__raster { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.veld--breed { grid-column: 1 / -1; }

.veld { display: grid; gap: 0.4rem; align-content: start; }
.veld__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--donker); }
.veld__label .ster { color: var(--rood); margin-left: 0.15rem; }
.veld__hulp { font-size: 0.8125rem; color: var(--grijs); }

.veld input, .veld select, .veld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  font-family: var(--tekst);
  font-size: 1rem;                 /* 16px voorkomt automatisch inzoomen op iOS */
  line-height: 1.5;
  color: var(--donker);
  background: var(--veld-bg);
  border: 1px solid var(--veldrand);
  border-radius: 0;
  transition: border-color 200ms var(--uit);
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld select {
  appearance: none; padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 49%, var(--donker) 50%, var(--donker) 56%, transparent 57%),
    linear-gradient(-45deg, transparent 49%, var(--donker) 50%, var(--donker) 56%, transparent 57%);
  background-size: 0.5rem 0.5rem;
  background-position: right 1.15rem center, right 0.8rem center;
  background-repeat: no-repeat;
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: 2px solid var(--rood); outline-offset: 1px; border-color: var(--rood);
}
.veld[data-fout="ja"] input, .veld[data-fout="ja"] select, .veld[data-fout="ja"] textarea {
  border-color: var(--rood); border-width: 2px;
}
.veld__fout {
  display: none; align-items: flex-start; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--rood);
}
.veld[data-fout="ja"] .veld__fout { display: flex; }
.veld__fout::before { content: "!"; font-weight: 700; }

/* Foutsamenvatting boven het formulier: krijgt na een mislukte verzending
   de focus, zodat een toetsenbordgebruiker meteen weet wat er mis is. */
.form__samenvatting {
  display: none; margin-bottom: var(--s-4);
  padding: var(--s-3); border: 2px solid var(--rood); background: #FBEDE9;
}
.form__samenvatting[data-toon="ja"] { display: block; }
.form__samenvatting h3 {
  font-family: var(--tekst); font-size: 1rem; font-weight: 600;
  color: var(--rood); margin-bottom: var(--s-1);
}
.form__samenvatting ol { margin: 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.form__samenvatting a { color: var(--rood); }

.form__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.form__status { font-size: 0.9375rem; }
.form__status[data-soort="fout"] { color: var(--rood); font-weight: 500; }

/* Bevestiging na verzenden */
.form__klaar {
  display: none; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--creme-diep); border: 1px solid var(--lijn-sterk);
}
.form__klaar[data-toon="ja"] { display: block; }
.form__klaar .mes { --mes-h: 2.5rem; color: var(--goud); margin-bottom: var(--s-2); }
.form__klaar h3 { font-family: var(--kop); font-size: var(--t-h3); margin-bottom: var(--s-2); }

/* Terugkoppeling voor bezoekers zonder javascript. contact.php stuurt terug met
   #aanvraag-verzonden of #aanvraag-fout in de URL; :target maakt het juiste blok
   zichtbaar, geheel zonder script. Met javascript blijven ze verborgen, want dan
   wordt er nooit naar dat fragment genavigeerd. */
.form__terug {
  display: none;
  margin-bottom: var(--s-4);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--creme-diep);
  border: 1px solid var(--lijn-sterk);
}
.form__terug:target { display: block; }
.form__terug .mes { --mes-h: 2.5rem; color: var(--goud); margin-bottom: var(--s-2); }
.form__terug h3 { font-family: var(--kop); font-size: var(--t-h3); margin-bottom: var(--s-2); }
.form__terug--fout { background: #FBEDE9; border-color: var(--rood); }
.form__terug--fout h3 { color: var(--rood); }

/* Na een geslaagde verzending zonder javascript heeft het formulier zelf geen
   zin meer; :has wordt breed ondersteund, en waar niet blijft het formulier
   gewoon onder de bevestiging staan. */
body:has(#aanvraag-verzonden:target) #aanvraag { display: none; }

/* Uitwijkblok: verschijnt wanneer verzenden niet lukt. Bevat altijd het
   telefoonnummer en het e-mailadres, zodat een aanvraag nooit doodloopt. */
.form__uitwijk {
  display: none;
  margin-bottom: var(--s-4);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: #FBEDE9;
  border: 2px solid var(--rood);
}
.form__uitwijk[data-toon="ja"] { display: block; }
.form__uitwijk h3 {
  font-family: var(--kop);
  font-size: var(--t-h3);
  color: var(--rood);
  margin-bottom: var(--s-2);
}
.form__uitwijk .gegevens { margin-top: var(--s-3); }
.form__uitwijk .gegevens a { color: var(--rood); font-weight: 600; }

/* Regel bóven het formulier: vertelt dat velden leeg mogen blijven. Zonder
   die regel vult een bezoeker alles in of hij haakt af. */
.form__hulp {
  margin-bottom: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grijs);
}

/* Regel onder de verzendknop, met de verwijzing naar de privacyverklaring. */
.form__privacy {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--grijs);
}
.form__privacy a { color: var(--rood); text-underline-offset: 0.2em; }

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.knop[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* --------------------------------------------------------------------------
   16. Onderdelen voor Foodtruck & events en de twee routes op de homepage
   -------------------------------------------------------------------------- */

/* --- Tegels: twee gelijkwaardige routes ----------------------------------- */
/* Gebruikt als <a> (de twee routes op de homepage) en als <div> (de twee
   opstellingen op de events-pagina). Vandaar color: inherit en een rand die
   alleen bij een klikbare tegel oplicht. */
.tegels {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tegel {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-2);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--lijn);
  color: inherit; text-decoration: none;
  transition: border-color 340ms var(--uit), background-color 340ms var(--uit);
}
a.tegel:hover { border-color: var(--lijn-sterk); background-color: var(--creme-diep); }
.tegel__titel { font-family: var(--kop); font-size: var(--t-h3); font-weight: 600; line-height: 1.15; }
.tegel__tekst { color: var(--grijs); }
.tegel .tlink { margin-top: auto; padding-top: var(--s-2); }
a.tegel:hover .tlink::after { transform: scaleX(1); }
a.tegel:hover .tlink .pijl { transform: translateX(4px); }

/* --- Genummerde stappen --------------------------------------------------- */
.stappen {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr; margin-top: var(--s-5);
}
@media (min-width: 48rem) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stap { padding-top: var(--s-3); border-top: 1px solid var(--lijn); }
.stap__nr {
  font-family: var(--kop);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1; color: var(--rood);
  margin-bottom: var(--s-2);
}
.stap__tekst { color: var(--grijs); max-width: 34ch; }
.stappen__slot { margin-top: var(--s-5); color: var(--grijs); max-width: var(--meet); }

/* --- De twee keukens, onder elkaar over de volle breedte ------------------ */
/* Naast elkaar in halve kolommen was er geen ruimte voor drie stappen: elk
   beeld werd dan zo'n 180 px breed en dan zie je bij het rollen alleen handen.
   Onder elkaar is elk beeld ongeveer 375 px. */
.keuken {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--lijn);
}
.keuken:last-of-type { border-bottom: 1px solid var(--lijn); }
.keuken__kop { max-width: var(--meet); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.keuken__titel { font-size: var(--t-h3); margin-bottom: var(--s-2); }

/* --- Reeks beelden naast elkaar ------------------------------------------ */
/* grid-auto-flow: column betekent dat twee of drie kinderen vanzelf twee of
   drie even brede kolommen worden; de opmaak hoeft het aantal niet te weten. */
.reeks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}
.reeks .beeld { margin-bottom: 0; }

/* Een reeks van twee zou anders over de volle breedte uitwaaieren en dus veel
   grotere beelden krijgen dan een reeks van drie eronder. Op een breed scherm
   krijgen twee beelden daarom tweederde van de ruimte, zodat elk beeld in beide
   keukens even groot is. Op een telefoon vervalt die beperking; daar is elke
   pixel nodig. */
@media (min-width: 48rem) {
  .reeks:has(> :nth-child(2):last-child) { max-width: 66%; }
}

.reeks__stap { display: grid; gap: var(--s-2); align-content: start; }
.reeks__label {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grijs);
}
.reeks__nr { font-family: var(--kop); font-size: 1rem; letter-spacing: 0; color: var(--rood); }

/* --- Afbreken van lange woorden in koppen --------------------------------- */
/* Nederlandse samenstellingen als "evenemententerrein" zijn breder dan een
   smalle kopkolom. Zonder afbreekregels zet de browser de laatste letter op een
   eigen regel. Met hyphens: auto komt er een afbreekstreepje op een plek waar
   het woord ook werkelijk afgebroken mag worden; de taal staat per pagina in
   het lang-attribuut, dus dat werkt in beide talen. */
.duo__kop h2,
.exp__intro h2,
.phero__titel,
.paginakop__titel,
.opening__titel,
.slot__titel,
.tegel__titel,
.exd__naam {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Paginahero met beeld ernaast ----------------------------------------- */
/* De schermvullende hero met het logo is voorbehouden aan de homepage. Hier
   staat het beeld naast de tekst in plaats van erachter: de bronfoto is
   591 px breed en zou als schermvullende achtergrond zichtbaar zacht worden. */
.phero {
  display: grid; align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 2rem + 5vw, 5.5rem) 0;
}
@media (min-width: 56rem) {
  .phero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.phero__beeld { width: 100%; max-width: 32rem; justify-self: end; }
.phero__titel {
  font-family: var(--kop); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.02;
  letter-spacing: -0.005em; text-wrap: balance;
  max-width: 18ch; margin-block: var(--s-3) var(--s-4);
}
.phero__sub {
  max-width: 38rem; font-size: var(--t-lead);
  font-weight: 300; line-height: 1.6; color: var(--grijs);
}
.phero__acties {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3); margin-top: var(--s-5);
}

/* --- Schermvullende paginahero ------------------------------------------- */
/* Zoals de hero op de homepage, maar lager en met de tekst eroverheen in
   plaats van het logo. Alleen bruikbaar met een bronfoto die breed genoeg is;
   bij 591 px zou het beeld zichtbaar uitgerekt worden en is .phero beter. */
.vhero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 58vh, 40rem);
  padding-block: clamp(4rem, 9vh, 7rem) clamp(2.5rem, 6vh, 4rem);
  color: var(--creme);
  background: var(--donker);
}
@supports (height: 1svh) {
  .vhero { min-height: clamp(26rem, 58svh, 40rem); }
}

.vhero__beeld { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.vhero__beeld > *, .vhero__beeld img { width: 100%; height: 100%; }
.vhero__beeld img { object-fit: cover; display: block; }

/* Op een telefoon loopt de tekst over de volle breedte, dus daar een scrim die
   overal even sterk is. Op een breder scherm mag de rechterkant lichter
   blijven: daar hangt de banner met het mes, en die wil je juist zien. */
/* Op een telefoon vult de tekst vrijwel de hele hero, dus daar helpt het niet
   om alleen de onderkant te verdonkeren: de kop staat dan juist in het lichte
   deel. Vandaar een scrim die over de volle hoogte stevig is. Gemeten op het
   werkelijke beeld: hiermee haalt de kop 5,2 op 1 en de subkop 5,1; met een
   lichtere verdeling bleef de kop onder de 3 steken. */
.vhero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(26, 26, 26, 0.68) 0%, rgba(26, 26, 26, 0.64) 30%, rgba(26, 26, 26, 0.86) 100%);
}
@media (min-width: 48rem) {
  .vhero::before {
    background:
      linear-gradient(90deg, rgba(26, 26, 26, 0.86) 0%, rgba(26, 26, 26, 0.72) 42%,
                             rgba(26, 26, 26, 0.22) 78%, rgba(26, 26, 26, 0.08) 100%),
      linear-gradient(180deg, rgba(26, 26, 26, 0.34) 0%, rgba(26, 26, 26, 0.12) 45%,
                              rgba(26, 26, 26, 0.48) 100%);
  }
}

.vhero .label { color: var(--creme); }
.vhero .label::before { background: var(--goud); }
.vhero__titel {
  font-family: var(--kop); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.02;
  letter-spacing: -0.005em; text-wrap: balance;
  max-width: 14ch; margin-block: var(--s-3) var(--s-4);
  overflow-wrap: break-word; hyphens: auto;
}
/* Iets minder doorzichtig dan --op-donker in de footer: daar staat de tekst op
   een egaal vlak, hier op een foto, en dan is 72% net te weinig. */
.vhero__sub {
  max-width: 32rem; font-size: var(--t-lead);
  font-weight: 300; line-height: 1.6;
  color: rgba(247, 236, 226, 0.90);
}
.vhero__acties {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3); margin-top: var(--s-5);
}

/* De hero staat strak onder de plakkende balk; die heeft daar geen onderrand
   nodig, want het beeld eronder vormt zijn eigen scheiding. */
.vhero__beeld img { will-change: auto; }

/* --- Opsomming met het mes als teken -------------------------------------- */
.feiten {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; gap: var(--s-3); grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .feiten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) clamp(2rem, 4vw, 4rem);
  }
}
.feiten li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2); align-items: start;
  padding-top: var(--s-3); border-top: 1px solid var(--lijn);
}
.feiten .mes { --mes-h: 1.375rem; color: var(--goud); margin-top: 0.2rem; }

/* --- Menukaart ------------------------------------------------------------ */
/* De foto's zijn al uitgesneden op crème. Er staat dus bewust geen kader en
   geen vlak omheen: elke rand zou een wit blok terugbrengen dat er niet is. */
.menukaart {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-5);
}
@media (min-width: 52rem) {
  .menukaart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.menukaart__tussen { grid-column: 1 / -1; margin-top: var(--s-3); }
.gerecht { display: grid; gap: 0.3rem; align-content: start; }
.gerecht__beeld { aspect-ratio: 4 / 3; width: 100%; }
.gerecht__beeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gerecht__naam {
  font-family: var(--kop); font-size: 1.25rem;
  font-weight: 600; line-height: 1.25; margin-top: var(--s-2);
}
.gerecht__tekst { font-size: 0.9375rem; line-height: 1.55; color: var(--grijs); }
.menukaart__noot { margin-top: var(--s-5); font-size: 0.9375rem; color: var(--grijs); }

/* --- Beeld binnen een upgrade --------------------------------------------- */
.upg__beeld { max-width: 16rem; margin-top: var(--s-3); }

/* --- Verwijzing onder de experiences op de homepage ----------------------- */
.exp__wissel { margin-bottom: var(--s-4); color: var(--grijs); }
.exp__wissel a { color: var(--rood); text-underline-offset: 0.2em; }

/* ==========================================================================
   BESTELLEN
   --------------------------------------------------------------------------
   De bezorgkaart. Dit is de enige pagina waar de bezoeker iets moet doen in
   plaats van lezen, en dat verandert de rangorde: overzicht, duidelijke staat
   en grote raakvlakken gaan hier vóór sfeer. De huisstijl zit in de details —
   crème ondergrond, gouden haarlijnen, Cormorant voor de groepskoppen, rood
   alleen waar iets gebeurt.

   De kaart en het mandje staan naast elkaar vanaf 64rem. Daaronder staat het
   mandje onderaan de pagina en houdt een balk aan de onderkant van het scherm
   het totaal en de knop in beeld.
   ========================================================================== */

.bestel { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 64rem) {
  .bestel { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-6); }
  /* Het mandje blijft meelopen. 1rem lucht onder de plakkende header. */
  .bestel__zij { position: sticky; top: calc(var(--hoofd-h) + 1rem); }
}

/* --- Koppen op deze pagina ---------------------------------------------- */
/* h1 t/m h4 hebben van zichzelf geen grootte op deze site; elke sectie zet
   die zelf. */
.bsectie__titel { font-size: var(--t-h2); }
.bsectie__tekst { margin-top: var(--s-3); max-width: var(--meet); color: var(--grijs); }

/* --- Een groep op de kaart ------------------------------------------------ */
.bgroep + .bgroep { margin-top: var(--s-6); }
.bgroep__kop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--lijn-sterk);
}
.bgroep__naam { font-family: var(--kop); font-size: var(--t-h3); line-height: 1.1; }
.bgroep__sub { font-size: 0.9375rem; font-style: italic; color: var(--grijs); }

/* De lijst zelf. Zonder dit staat de hele kaart 40 px naar binnen: dat is de
   standaardopvulling die een browser aan elke ul geeft, en role="list" haalt
   die niet weg. */
.bitems { list-style: none; margin: 0; padding: 0; }

/* --- Een gerecht ---------------------------------------------------------- */
.bitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--lijn);
}
.bitem__naam {
  font-family: var(--kop); font-size: 1.3125rem; font-weight: 600; line-height: 1.2;
}
.bitem__maat {
  font-family: var(--tekst); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grijs);
  margin-left: 0.5rem; white-space: nowrap;
}
.bitem__tekst {
  grid-column: 1; font-size: 0.9375rem; line-height: 1.55; color: var(--grijs);
  max-width: 44ch;
}
/* Prijs en knop staan rechts, op één lijn met de naam. */
.bitem__actie {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; justify-items: end; align-content: start; gap: 0.5rem;
}
.bitem__prijs { font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.bitem__prijs .per { font-weight: 400; color: var(--grijs); font-size: 0.875rem; }

/* --- Keuze tussen 4 of 8 stuks --------------------------------------------- */
.stuks { display: flex; gap: 0.5rem; }
.stuk {
  position: relative;
  font-family: var(--tekst); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 2.75rem; padding: 0 0.875rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--grijs);
  border: 1px solid var(--veldrand); cursor: pointer;
  transition: color 160ms var(--uit), border-color 160ms var(--uit), background-color 160ms var(--uit);
}
.stuk:hover { border-color: var(--donker); color: var(--donker); }
.stuk[aria-checked="true"] {
  background: var(--donker); border-color: var(--donker); color: var(--creme);
}
.stuk:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }

/* --- Toevoegen en de teller ---------------------------------------------- */
/* Zolang er niets in het mandje zit staat er één knop "Voeg toe". Zodra er
   één in zit verandert die in min / aantal / plus op dezelfde plek, zodat de
   regel niet opspringt. */
.teller {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--rood);
}
.teller__knop {
  width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tekst); font-size: 1.25rem; font-weight: 500; line-height: 1;
  background: transparent; color: var(--rood); border: 0; cursor: pointer;
  transition: background-color 160ms var(--uit), color 160ms var(--uit);
}
.teller__knop:hover { background: var(--rood); color: var(--creme); }
.teller__knop:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }
.teller__knop[disabled] { color: var(--veldrand); cursor: default; background: transparent; }
.teller__aantal {
  min-width: 2.25rem; padding-inline: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--lijn-sterk);
}

/* --- Keuzes binnen een gerecht ------------------------------------------- */
/* De 4-Way Maki en de gỏi cuốn vragen een keuze. Die vouwt open onder het
   gerecht zodra je iets toevoegt, zodat de kaart er niet van volloopt. */
.keuzeblok {
  grid-column: 1 / -1;
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--creme-diep);
  border: 1px solid var(--lijn);
}
.keuzeblok__kop {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}
.keuzeblok__teller { color: var(--grijs); font-variant-numeric: tabular-nums; }
.keuzeblok__teller[data-vol="ja"] { color: var(--rood); }
.keuzes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.keuze {
  font-family: var(--tekst); font-size: 0.875rem; font-weight: 500;
  min-height: 2.75rem; padding: 0 0.875rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--veld-bg); color: var(--donker);
  border: 1px solid var(--veldrand); cursor: pointer;
  transition: border-color 160ms var(--uit), background-color 160ms var(--uit);
}
.keuze:hover { border-color: var(--donker); }
.keuze[aria-pressed="true"] { background: var(--donker); border-color: var(--donker); color: var(--creme); }
.keuze[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }
.keuze[disabled] { opacity: 0.45; cursor: default; }
.keuze:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }

/* --- Allergenen ---------------------------------------------------------- */
.allerg {
  grid-column: 1; margin-top: 0.15rem;
  font-size: 0.8125rem; color: var(--grijs);
}
.allerg__kop {
  font-weight: 600; letter-spacing: 0.04em;
}
.allerg__leeg { color: var(--rood); font-weight: 500; }

/* --- Het mandje ---------------------------------------------------------- */
.mand {
  padding: var(--s-3);
  background: var(--creme-diep);
  border: 1px solid var(--lijn-sterk);
}
.mand__kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--lijn);
}
.mand__kop h2 { font-family: var(--kop); font-size: 1.5rem; line-height: 1; }
.mand__aantal {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grijs);
}
.mand__leeg { font-size: 0.9375rem; line-height: 1.6; color: var(--grijs); }

.mand__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mand__regel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem; align-items: start;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--lijn);
}
.mand__naam { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.mand__detail { grid-column: 1; font-size: 0.8125rem; color: var(--grijs); line-height: 1.4; }
.mand__bedrag {
  grid-row: 1; grid-column: 2;
  font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mand__weg {
  grid-column: 2; justify-self: end;
  min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; border: 0; color: var(--grijs); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.mand__weg:hover { color: var(--rood); }
.mand__weg:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }

.mand__som { display: grid; gap: 0.4rem; margin-top: var(--s-3); font-size: 0.9375rem; }
.mand__som div { display: flex; justify-content: space-between; gap: var(--s-2); }
.mand__som .bedrag { font-variant-numeric: tabular-nums; }
.mand__totaal {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--lijn-sterk);
  font-size: 1.125rem; font-weight: 700;
}
.mand__knop { margin-top: var(--s-3); width: 100%; }

/* Waarschuwing onder het minimum. Geen rode fout: er is nog niets misgegaan,
   de bezoeker moet alleen weten dat hij er nog niet is. */
.mand__waarschuwing {
  display: none; margin-top: var(--s-2);
  padding: 0.65rem 0.75rem;
  font-size: 0.8125rem; line-height: 1.5;
  background: #FBF2E4; border-left: 3px solid var(--goud);
}
.mand__waarschuwing[data-toon="ja"] { display: block; }

/* --- Bezorgdag en tijdblok ---------------------------------------------- */
.bezorg { display: grid; gap: var(--s-4); }
.bezorg__kop {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}
.dagen, .blokken { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dag, .blok {
  font-family: var(--tekst); min-height: 2.75rem; padding: 0.4rem 0.875rem;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.2;
  background: var(--veld-bg); color: var(--donker);
  border: 1px solid var(--veldrand); cursor: pointer;
  transition: border-color 160ms var(--uit), background-color 160ms var(--uit), color 160ms var(--uit);
}
.dag { min-width: 5.5rem; }
.dag__naam { font-size: 0.8125rem; font-weight: 600; }
.dag__datum { font-size: 0.75rem; color: var(--grijs); }
.blok { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dag:hover, .blok:hover { border-color: var(--donker); }
.dag[aria-checked="true"], .blok[aria-checked="true"] {
  background: var(--donker); border-color: var(--donker); color: var(--creme);
}
.dag[aria-checked="true"] .dag__datum { color: var(--op-donker); }
.dag:focus-visible, .blok:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }

/* Een blok dat vol zit blijft staan, maar doorgestreept. Verbergen zou de
   indruk geven dat het er nooit was, en dan zoekt iemand ernaar. */
.blok[disabled] {
  color: var(--grijs); background: transparent; border-style: dashed;
  cursor: default; text-decoration: line-through;
}
.blok__vol {
  /* 0.6875rem is de ondergrens die op deze site voor functionele tekst geldt;
     10 px las niet meer. */
  display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
}

/* --- De balk onderaan op een telefoon ----------------------------------- */
/* Op een smal scherm staat het mandje onderaan de pagina. Deze balk houdt het
   totaal en de knop in beeld, zodat niemand hoeft te scrollen om te zien
   waar hij staat. */
.bestelbalk { display: none; }
@media (max-width: 63.999rem) {
  .bestelbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-hoofd);
    display: flex; align-items: center; gap: var(--s-2);
    padding: 0.75rem var(--rand);
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--donker); color: var(--creme);
    transform: translateY(100%);
    transition: transform 320ms var(--uit);
  }
  .bestelbalk[data-toon="ja"] { transform: none; }
  .bestelbalk__som { display: grid; gap: 0.1rem; margin-right: auto; }
  .bestelbalk__aantal {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--op-donker);
  }
  .bestelbalk__bedrag { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  /* Zodra de balk staat, mag de pagina er niet achter verdwijnen. */
  body:has(.bestelbalk[data-toon="ja"]) { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bestelbalk { transition: none; }
}

/* --- Praktische regels boven de kaart ----------------------------------- */
.bestelfeiten {
  display: grid; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  list-style: none; padding: 0;
}
@media (min-width: 40rem) {
  .bestelfeiten { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.bestelfeiten li { display: grid; gap: 0.1rem; }
.bestelfeiten .sub {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grijs);
}
.bestelfeiten strong { font-size: 1.0625rem; font-weight: 600; }

/* --- Postcodecontrole --------------------------------------------------- */
.pc { display: grid; gap: 0.5rem; max-width: 20rem; }
.pc__rij { display: flex; gap: 0.5rem; }
.pc__rij input { flex: 1 1 auto; text-transform: uppercase; }
.pc__uit { font-size: 0.875rem; line-height: 1.5; min-height: 1.3rem; }
.pc__uit[data-soort="ja"] { color: #1F6B3A; font-weight: 500; }
.pc__uit[data-soort="nee"] { color: var(--rood); font-weight: 500; }

/* --- Kleine knop ---------------------------------------------------------- */
/* De gewone knop is 3rem hoog met ruime letterafstand; naast een gerecht op de
   kaart wordt dat te zwaar. Deze blijft wel op 2,75rem, het kleinste raakvlak
   dat WCAG 2.2 aanhoudt. */
.knop--klein {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  letter-spacing: 0.1em;
  gap: 0.4rem;
}
.knop[disabled] {
  --knop-bg: transparent;
  --knop-tekst: var(--grijs);
  border-color: var(--veldrand);
  cursor: default;
}
.knop[disabled]:hover { --knop-bg: transparent; --knop-tekst: var(--grijs); }

/* Hoeveel er al van dit gerecht in de bestelling liggen. Staat alleen bij
   gerechten met een keuze: die hebben geen min-knop, omdat er twee
   samenstellingen van hetzelfde gerecht in het mandje kunnen liggen. */
.bitem__inmand {
  margin-top: 0.35rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rood); text-align: right;
}

/* --- Bestelpagina: smalle schermen ---------------------------------------- */
/* Gemeten op 375 px: de omschrijving hield 157 px over naast de prijskolom, en
   dat is voor "Red Passion, Unagi Dragon en Beef Truffle, van elk 8 stuks" een
   kolom van vier woorden breed. Onder 40rem gaat de actiekolom daarom onder de
   tekst staan, over de volle breedte, met de prijs links en de knoppen rechts. */
@media (max-width: 39.999rem) {
  .bitem { grid-template-columns: minmax(0, 1fr); }
  .bitem__tekst { max-width: none; }
  /* Hier een rij in plaats van een raster: de prijs links, de knoppen rechts,
     en als het niet past zakt de knoppenrij eronder. Met een raster van twee
     automatische kolommen belandde de toevoegknop op de tweede rij links, los
     van de maatknoppen waar hij bij hoort. */
  .bitem__actie {
    grid-column: 1; grid-row: auto;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.5rem var(--s-2);
    margin-top: var(--s-2);
  }
  .bitem__actie > * { margin: 0; }
  .bitem__actie .stuks,
  .bitem__actie [data-toevoegen] { margin-left: auto; }
  .bitem__inmand { text-align: right; }
}

/* De vijf praktische feiten. Een raster met gelijke kolommen brak bij 1280 px
   af naar twee rijen, terwijl de teksten kort zijn en makkelijk op één regel
   passen. Daarom pakken ze zich nu naar hun eigen breedte. */
.bestelfeiten {
  display: flex; flex-wrap: wrap;
  gap: var(--s-2) clamp(1.25rem, 2.5vw, 2.5rem);
}
.bestelfeiten li { flex: 0 1 auto; min-width: 8rem; }

/* De postcodecontrole staat in het praktische blok onder de bezorgfeiten, niet
   in een eigen sectie. Dat scheelde op een telefoon bijna een heel scherm
   scrollen voordat het eerste gerecht in beeld kwam. */
.pc { margin-top: var(--s-4); gap: 0.5rem; }
.pc__label {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grijs);
}

/* De site zet standaard 1,5rem tussen twee opeenvolgende alinea's. Dat klopt
   in lopende tekst, maar niet in een rij van de kaart of in het mandje: daar
   staan prijs, omschrijving en allergenen als losse <p>'s onder elkaar in een
   raster, en kregen ze 24 px die er niet hoort. De afstand komt daar van de
   gap van het raster. */
.bitem p + p,
.bitem__actie p + p,
.mand__regel p + p,
.pc p + p { margin-top: 0; }

/* --- Allergenen bij een gerecht ------------------------------------------- */
/* "Bevat" is de regel die telt en staat in de gewone tekstkleur. Sporen en de
   meelezende keuzeregel staan een tint lichter: wel te lezen, maar ze duwen de
   kaart niet vol. */
.allerg + .allerg { margin-top: 0.1rem; }
.allerg__sporen { color: var(--grijs); }
.allerg__keuze { font-style: italic; color: var(--grijs); }
.allerg__live {
  grid-column: 1 / -1;
  margin-top: var(--s-2); padding-top: 0.6rem;
  border-top: 1px solid var(--lijn);
}

/* Hoe vaak dezelfde soort gekozen is, bij een keuze waar dat mag. */
.keuze__aantal {
  margin-left: 0.15rem;
  font-size: 0.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Bezorgkosten die vervallen: het oude bedrag blijft staan, doorgestreept,
   zodat zichtbaar is wat er zojuist is afgegaan. */
.mand__som .vervallen {
  margin-right: 0.4rem; color: var(--grijs);
  text-decoration: line-through;
}

/* Uitleg bij een keuze waar dezelfde soort vaker mag. */
.keuzeblok__uitleg {
  margin-bottom: var(--s-2);
  font-size: 0.8125rem; font-style: italic; color: var(--grijs);
}

/* --- Bestelpagina in de stand "binnenkort" -------------------------------- */
/* De kaart staat er wel, maar bestellen kan nog niet. Deze melding staat boven
   de gerechten: wie met de folder in de hand binnenkomt moet dat weten vóór
   hij gaat zoeken naar een knop die er niet is. */
.aankondiging {
  margin-bottom: var(--s-5);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--creme-diep);
  border-left: 3px solid var(--rood);
}
.aankondiging__kop {
  font-family: var(--kop); font-size: var(--t-h3);
  line-height: 1.1; margin-bottom: var(--s-2);
}
.aankondiging p { max-width: var(--meet); }
.aankondiging__tel { margin-top: var(--s-3); }
.aankondiging__tel a {
  font-size: 1.25rem; font-weight: 600; color: var(--rood);
  text-decoration: none; display: inline-block; padding-block: 0.3rem;
}
.aankondiging__tel a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* Waar anders de knop "Voeg toe" staat. Rustig: het is een mededeling, geen
   knop, en als het twintig keer schreeuwt leest niemand het meer. */
.bitem__binnenkort {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grijs); white-space: nowrap;
}

/* Twee maten naast elkaar in plaats van knoppen om uit te kiezen. */
.bitem__maatprijs { white-space: nowrap; }
.bitem__maatprijs + .bitem__maatprijs { margin-left: var(--s-2); }
.bitem__maatprijs span {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grijs);
  margin-right: 0.3rem;
}