/* =====================================================================
   Café de Roemer — concept E "Groen & Goud"
   Diepgroen met warm messing, art-decogeometrie, dagdelen als kern.

   Opbouw:
     1  Tokens
     2  Basis en typografie
     3  Deco-primitieven (boog, lijnornament, hoeken, pijl, overgang)
     4  Knoppen
     5  Koptekst en navigatie
     6  Hero
     7  Bewijsband
     8  Dagritme (ochtend / middag / borrel / avond)
     9  Routes, locatie, feestjespreview, galerij
    10  Feestjespagina en formulier
    11  Contact, voettekst, mobiele actiebalk
    12  Hulpklassen en reveals
    13  Drie breakpoints: 640 / 900 / 1200
    14  prefers-reduced-motion

   Contrast: alle lopende tekst is op 4,5:1 of hoger gezet. Goud is als
   TEKST alleen op diepgroen toegestaan (5,7:1); op crème wordt het
   donkere messing --goud-diep gebruikt (5,9:1). Op licht wordt goud
   verder alleen decoratief gebruikt (lijnen, kaders, ruiten).
   ===================================================================== */

/* ---------------------------------------------------------------- 0 */
/* Koplettertype. Forum, SIL Open Font License 1.1, lokaal meegeleverd.
   Bron en licentie: assets/fonts/OFL-Forum.txt. Er wordt geen extern
   lettertypeverzoek gedaan. */
@font-face {
  font-family: "Forum";
  src: url("assets/fonts/forum-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Masterbouwbrief review 2026-08-04 */
.factcheck {
  border-left: 3px solid var(--goud, #c8963e);
  padding: .75rem 1rem;
  background: rgba(200, 150, 62, .12);
  font-size: .92rem;
}
.event-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 28rem);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem .2rem 1.5rem;
  min-height: 34rem;
}
.event-track--overview { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.event-card {
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--goud, #c8963e);
  border-radius: 10rem 10rem .4rem .4rem;
  background: rgba(255,255,255,.04);
}
.event-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.event-card > div { padding: 1.5rem; }
.reservation-dialog { width: min(42rem, calc(100% - 2rem)); border: 1px solid #c8963e; padding: 0; background: #f7f0df; color: #183a34; }
.reservation-dialog::backdrop { background: rgba(5, 20, 18, .8); }
.reservation-card { position: relative; padding: clamp(1.25rem, 4vw, 2.5rem); }
.dialog-close { position: absolute; right: .8rem; top: .6rem; border: 0; background: transparent; color: inherit; font-size: 2rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.velden--drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.event-meta { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; }
.event-meta dt { font-weight: 700; }
@media (max-width: 639px) {
  .velden--drie { grid-template-columns: 1fr; }
  .event-track { grid-auto-columns: 86vw; min-height: 42rem; }
}
@media (min-width: 1200px) {
  .wrap { width: min(92vw, 1380px); }
  .hero__in { gap: clamp(3rem, 7vw, 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .event-track { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- 1 */
:root {
  /* groen */
  --groen-diep: #0e2a24;
  --groen: #14382f;
  --groen-mid: #1c4a3d;
  --groen-rook: #24564a;

  /* messing / goud */
  --goud: #c8963e;
  --goud-licht: #e2b863;
  --goud-diep: #7a5a1e;
  --goud-waas: rgba(200, 150, 62, 0.34);

  /* licht */
  --creme: #f5efe3;
  --ivoor: #fbf7ef;
  --zand: #ece2d1;

  /* inkt */
  --inkt: #17201c;
  --inkt-zacht: #3d4a44;

  /* typografie */
  --kop: "Forum", "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif;
  --tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* schaal: 7 stappen, vloeiend tussen 360 en 1280 px */
  --stap--1: clamp(0.8rem, 0.77rem + 0.13vw, 0.875rem);
  --stap-0: clamp(1rem, 0.96rem + 0.17vw, 1.09rem);
  --stap-1: clamp(1.15rem, 1.08rem + 0.3vw, 1.31rem);
  --stap-2: clamp(1.35rem, 1.22rem + 0.55vw, 1.64rem);
  --stap-3: clamp(1.6rem, 1.36rem + 1.02vw, 2.16rem);
  --stap-4: clamp(1.95rem, 1.5rem + 1.95vw, 3rem);
  --stap-5: clamp(2.35rem, 1.55rem + 3.5vw, 4.2rem);

  /* ruimte */
  --ruimte: clamp(1rem, 0.7rem + 1.3vw, 1.6rem);
  --band: clamp(3rem, 2rem + 4.4vw, 5.6rem);
  --breed: 1180px;

  /* kaderkleur van het middenvlak in de dubbele goudlijst */
  --lijst: var(--creme);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: var(--stap-0);
  line-height: 1.62;
}

img,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

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

h1 {
  font-size: var(--stap-5);
}
h2 {
  font-size: var(--stap-4);
}
h3 {
  font-size: var(--stap-2);
}
h4 {
  font-size: var(--stap-1);
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--goud);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
}

.smal {
  width: min(100% - 2 * var(--ruimte), 760px);
  margin-inline: auto;
}

/* Banden -------------------------------------------------------- */
.band {
  padding-block: var(--band);
}

.band--groen {
  background: var(--groen);
  color: var(--creme);
  --lijst: var(--groen);
}

.band--diep {
  background: var(--groen-diep);
  color: var(--creme);
  --lijst: var(--groen-diep);
}

.band--creme {
  background: var(--creme);
  color: var(--inkt);
  --lijst: var(--creme);
}

.band--ivoor {
  background: var(--ivoor);
  color: var(--inkt);
  --lijst: var(--ivoor);
}

.band--groen a:not(.knop),
.band--diep a:not(.knop) {
  color: var(--goud-licht);
}

.band--creme a:not(.knop),
.band--ivoor a:not(.knop) {
  color: var(--goud-diep);
}

/* Aanhef boven een kop ------------------------------------------ */
.aanhef {
  font-family: var(--tekst);
  font-size: var(--stap--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.aanhef::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}

.band--groen .aanhef,
.band--diep .aanhef {
  color: var(--goud-licht);
}

.band--creme .aanhef,
.band--ivoor .aanhef {
  color: var(--goud-diep);
}

.lead {
  font-size: var(--stap-1);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- 3 */

/* Boog: het kelkprofiel van de roemer, terug in elk beeldkader.
   Dubbele messinglijst = buitenrand + ingesprongen haarlijn.       */
.boog {
  position: relative;
  border-radius: 48% 48% 10px 10px / 34% 34% 2% 2%;
  overflow: hidden;
  background: var(--groen-diep);
  box-shadow: 0 0 0 3px var(--goud);
}

/* Beeldkaders bevatten soms een <picture>; die moet net als een losse
   <img> de hele lijst vullen. */
.boog > *,
.lijst > *,
.medaillon > *,
.kaart__beeld > * {
  display: block;
  width: 100%;
  height: 100%;
}

.boog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boog::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--goud-waas);
  border-radius: inherit;
  pointer-events: none;
}

/* Rechthoekig kader met dezelfde dubbele lijst */
.lijst {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--groen-diep);
  box-shadow: 0 0 0 2px var(--goud);
}

.lijst img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lijst::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--goud-waas);
  pointer-events: none;
}

/* Cirkelmedaillon, echo van het merkteken */
.medaillon {
  border-radius: 50%;
  overflow: hidden;
  background: var(--groen-diep);
  box-shadow: 0 0 0 3px var(--goud), 0 0 0 10px var(--lijst),
    0 0 0 11px var(--goud-waas);
}

.medaillon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lijnornament met ruit in het midden */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.6rem;
  color: var(--goud);
}

.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.ornament i {
  width: 9px;
  height: 9px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}

.band--creme .ornament,
.band--ivoor .ornament {
  color: var(--goud-diep);
}

/* Zigzag-overgang tussen twee banden: het duidelijkste verschil met
   een gewone kleurwissel. --van is de band erboven, --naar eronder. */
.overgang {
  height: 20px;
  background-color: var(--van, var(--groen));
  background-image: linear-gradient(135deg, var(--naar, var(--creme)) 25%, transparent 25%),
    linear-gradient(225deg, var(--naar, var(--creme)) 25%, transparent 25%);
  background-size: 40px 40px;
  background-position: 0 0;
  border-top: 2px solid var(--goud);
}

.overgang--naar-creme {
  --van: var(--groen);
  --naar: var(--creme);
}
.overgang--naar-groen {
  --van: var(--creme);
  --naar: var(--groen);
}
.overgang--naar-diep {
  --van: var(--creme);
  --naar: var(--groen-diep);
}
.overgang--ivoor-naar-groen {
  --van: var(--ivoor);
  --naar: var(--groen);
}
.overgang--groen-naar-ivoor {
  --van: var(--groen);
  --naar: var(--ivoor);
}
.overgang--diep-naar-ivoor {
  --van: var(--groen-diep);
  --naar: var(--ivoor);
}

/* Gouden pijl als vervolglink */
.pijl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--stap-0);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pijl::after {
  content: "";
  width: 1.5rem;
  height: 8px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 3px, calc(100% - 8px) 3px, calc(100% - 8px) 0, 100% 50%,
    calc(100% - 8px) 100%, calc(100% - 8px) 5px, 0 5px);
  transition: transform 0.22s ease;
}

.pijl:hover::after,
.pijl:focus-visible::after {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------- 4 */
/* CTA-vormtaal: afgeschuinde art-decohoeken, geen pillen. */
.knop {
  --schuin: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--tekst);
  font-size: var(--stap-0);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--schuin) 0, 100% 0, 100% calc(100% - var(--schuin)),
    calc(100% - var(--schuin)) 100%, 0 100%, 0 var(--schuin));
  transition: background-color 0.2s ease, color 0.2s ease;
}

.knop--goud {
  background: var(--goud);
  color: var(--groen-diep);
}

.knop--goud:hover,
.knop--goud:focus-visible {
  background: var(--goud-licht);
}

.knop--groen {
  background: var(--groen);
  color: var(--creme);
}

.knop--groen:hover,
.knop--groen:focus-visible {
  background: var(--groen-mid);
}

/* "Rand"-variant: de schuine hoek wordt met een tweede laag getekend,
   zodat er een echte lijn zichtbaar blijft. */
.knop--rand {
  position: relative;
  background: transparent;
  color: var(--creme);
  padding: 0.85rem 1.5rem;
}

.knop--rand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(var(--schuin) 0, 100% 0, 100% calc(100% - var(--schuin)),
    calc(100% - var(--schuin)) 100%, 0 100%, 0 var(--schuin),
    /* binnenrand */ 2px calc(var(--schuin) + 0.8px),
    2px calc(100% - 2px), calc(100% - var(--schuin) - 0.8px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - var(--schuin) - 0.8px), calc(100% - 2px) 2px,
    calc(var(--schuin) + 0.8px) 2px);
}

.knop--rand span {
  position: relative;
}

.knop--rand:hover,
.knop--rand:focus-visible {
  background: rgba(226, 184, 99, 0.16);
}

.band--creme .knop--rand,
.band--ivoor .knop--rand {
  color: var(--goud-diep);
}

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- 5 */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--goud);
  color: var(--groen-diep);
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.overslaan:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.kop {
  background: var(--groen-diep);
  color: var(--creme);
  border-bottom: 2px solid var(--goud);
}

.kop__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-block: 0.7rem;
}

/* Officieel aangeleverd Roemer-logo met typografisch woordmerk ernaast. */
.merk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

.merk__teken {
  width: 36px;
  height: 36px;
  flex: none;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}

.merk__naam {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--creme);
}

.merk__plaats {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--goud-licht);
  margin-top: 0.15rem;
}

.hamburger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--creme);
  border: 1px solid var(--goud-waas);
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-weight: 700;
  font-size: var(--stap--1);
  cursor: pointer;
}

.js .hamburger {
  display: inline-flex;
}

.hamburger b {
  width: 18px;
  height: 11px;
  border-top: 2px solid var(--goud);
  border-bottom: 2px solid var(--goud);
  position: relative;
}

.hamburger b::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  width: 100%;
  border-top: 2px solid var(--goud);
}

/* Zonder JavaScript staat de navigatie gewoon open. Met JavaScript
   wordt zij bij data-open="false" met display:none uit de tabvolgorde
   gehaald — dat is de fix op bevinding 3.3 uit de review. */
.navigatie {
  flex-basis: 100%;
}

.js .navigatie[data-open="false"] {
  display: none;
}

.navigatie ul {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.navigatie a {
  display: block;
  padding: 0.6rem 0.2rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--creme);
  border-bottom: 1px solid rgba(200, 150, 62, 0.22);
}

.navigatie a[aria-current="page"] {
  color: var(--goud-licht);
}

.kop__cta {
  display: none;
}

/* ---------------------------------------------------------------- 6 */
/* Hero: geen doorlopende foto met tekst eroverheen (dat is concept B),
   maar een groen tekstpaneel naast een boogportret met medaillon. */
.hero {
  background: var(--groen-diep);
  color: var(--creme);
  position: relative;
  overflow: hidden;
}

/* Zachte lichtval linksboven, uit hetzelfde tokenpalet. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 0%,
      var(--groen-rook), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
}

.hero__in {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-block: clamp(1.6rem, 4vw, 3.4rem) clamp(2.2rem, 5vw, 4rem);
}

.hero__tekst {
  max-width: 40rem;
}

.hero h1 {
  color: var(--creme);
  margin-bottom: 0.45em;
}

.hero h1 em {
  font-style: normal;
  color: var(--goud-licht);
}

.hero__lead {
  color: var(--creme);
  font-size: var(--stap-1);
  line-height: 1.5;
  max-width: 34rem;
}

.hero__open {
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--goud-waas);
  font-size: var(--stap--1);
  letter-spacing: 0.02em;
  color: var(--zand);
  max-width: 34rem;
}

.hero__open b {
  color: var(--goud-licht);
}

.hero__beeld {
  position: relative;
  padding-bottom: 2.5rem;
}

.hero__boog {
  aspect-ratio: 4 / 5;
  max-width: 30rem;
  margin-inline: auto;
}

.hero__medaillon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-9.5rem);
  width: clamp(6rem, 20vw, 8.5rem);
  aspect-ratio: 1;
  --lijst: var(--groen-diep);
}

/* ---------------------------------------------------------------- 7 */
.bewijs {
  background: var(--groen);
  border-block: 2px solid var(--goud);
  padding-block: 1.1rem;
}

.bewijs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 2rem;
  color: var(--creme);
  font-size: var(--stap--1);
  letter-spacing: 0.04em;
}

.bewijs li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.bewijs li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--goud);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- 8 */
/* Dagritme — de kern. Eén gouden route van boven naar beneden. */
.ritme {
  position: relative;
}

.ritme__kop {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.ritme__kop p {
  margin-inline: auto;
}

.dagdelen {
  position: relative;
  display: grid;
  gap: clamp(2.4rem, 5vw, 4.4rem);
  padding-left: 2.1rem;
}

/* De route zelf */
.dagdelen::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.4rem;
  bottom: 3rem;
  width: 2px;
  background: linear-gradient(180deg, var(--goud), var(--goud-waas));
}

.dagdeel {
  position: relative;
}

.dagdeel::before {
  content: "";
  position: absolute;
  left: -2.1rem;
  top: 0.35rem;
  width: 15px;
  height: 15px;
  background: var(--goud);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--creme);
}

.dagdeel__tijd {
  font-family: var(--kop);
  font-size: var(--stap-1);
  font-weight: 600;
  color: var(--goud-diep);
  letter-spacing: 0.02em;
  margin: 0 0 0.15rem;
}

.dagdeel h3 {
  margin-bottom: 0.35em;
}

.dagdeel__beeld {
  margin: 0 0 1.2rem;
}

.dagdeel__beeld .boog {
  aspect-ratio: 3 / 4;
}

.dagdeel__beeld figcaption {
  font-size: var(--stap--1);
  color: var(--inkt-zacht);
  margin-top: 0.6rem;
  max-width: 34ch;
}

.dagdeel__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.dagdeel__duo img {
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
  border: 1px solid var(--goud-waas);
  border-radius: 0.2rem;
}

/* Kleine verticale sfeerfilm; bewust geen beeldvullende videobanner. */
.sfeerblok {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.sfeervideo {
  width: min(100%, 21rem);
  margin-inline: auto;
}

.sfeervideo__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--goud);
  border-radius: 12rem 12rem 0.35rem 0.35rem;
  box-shadow: 0 0 0 7px var(--groen-diep), 0 0 0 8px var(--goud-waas);
  background: var(--groen-diep);
}

.sfeervideo__frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sfeervideo figcaption {
  margin-top: 0.8rem;
  font-size: var(--stap--1);
  color: var(--zand);
  text-align: center;
}

.band--creme .sfeervideo figcaption,
.band--ivoor .sfeervideo figcaption {
  color: var(--inkt-zacht);
}

.pagina-galerij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

/* Jans gekozen beelden. De HTML houdt een bruikbare terugvalafbeelding,
   waarna de reviewpreview de actuele keuzes uit het lokale manifest toont. */
.pagina-galerij[data-photo-gallery] figure {
  min-width: 0;
}

.pagina-galerij[data-photo-gallery] img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 520px;
  object-fit: cover;
}

.menu-fotoreeks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.menu-fotoreeks figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--goud) 55%, transparent);
  border-radius: 1.2rem 1.2rem .25rem .25rem;
  background: var(--diep);
  aspect-ratio: 4 / 5;
}

.menu-fotoreeks img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pagina-galerij figure {
  margin: 0;
}

.pagina-galerij figure:first-child {
  grid-column: 1 / -1;
}

.pagina-galerij img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pagina-galerij figure:first-child img {
  aspect-ratio: 16 / 9;
}

.pagina-galerij figcaption {
  padding-top: 0.45rem;
  font-size: var(--stap--1);
  color: var(--inkt-zacht);
}

/* Menu-uitsnede per dagdeel */
.kaartje {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--ivoor);
  border: 1px solid var(--goud-waas);
  display: grid;
  gap: 0.35rem;
  font-size: var(--stap--1);
}

.kaartje li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.kaartje li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--goud);
  transform: rotate(45deg);
  position: relative;
  top: -0.15em;
}

.kaartje b {
  font-weight: 700;
}

.kaartje span {
  color: var(--inkt-zacht);
}

.bijschrift-klein {
  font-size: var(--stap--1);
  color: var(--inkt-zacht);
}

/* Compacte agenda op Home en de uitgebreide agendakaart. */
.agenda-strip {
  background: #091f1b;
  color: var(--creme);
  border-top: 1px solid var(--goud-waas);
  border-bottom: 1px solid var(--goud-waas);
}

.agenda-strip__in {
  display: grid;
  gap: 1rem 1.4rem;
  align-items: center;
  padding-block: clamp(1.35rem, 3vw, 2.15rem);
}

.agenda-strip h2 {
  color: var(--creme);
  margin-bottom: 0.25rem;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
}

.agenda-strip p:not(.aanhef) {
  margin: 0;
  color: var(--zand);
}

.agenda-strip__actie {
  justify-self: start;
}

.agenda-datum {
  width: 6.6rem;
  min-height: 6.6rem;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--groen-diep);
  background: var(--goud-licht);
  border: 1px solid var(--goud);
  box-shadow: 6px 6px 0 var(--groen-rook);
  clip-path: polygon(0.55rem 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.55rem) 100%, 0 100%, 0 0.55rem);
}

.agenda-datum b {
  font-family: var(--kop);
  font-size: 2rem;
  font-weight: 400;
  line-height: 0.9;
}

.agenda-datum span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agenda-item-groot {
  display: grid;
  gap: 1.3rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  background: var(--ivoor);
  border: 1px solid var(--goud);
  box-shadow: 10px 10px 0 var(--goud-waas);
}

.agenda-item-groot h3 {
  margin: 0 0 0.45rem;
  font-family: var(--kop);
  font-size: var(--stap-3);
  font-weight: 400;
  color: var(--groen-diep);
}

.agenda-item-groot__tekst p:not(.aanhef) {
  color: var(--inkt-zacht);
}

.agenda-item-groot__actie {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
}

.agenda-datum--groot {
  width: 8rem;
  min-height: 8rem;
  box-shadow: 7px 7px 0 var(--groen-mid);
}

.agenda-datum--groot b {
  font-size: 2.45rem;
}

/* ---------------------------------------------------------------- 9 */
/* Kaartframes: crèmevlak met ingesprongen goudlijn en hoekmerken. */
.raster {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ivoor);
  color: var(--inkt);
  text-decoration: none;
  border: 1px solid var(--goud-waas);
  padding: 0 0 1.2rem;
  overflow: hidden;
}

.kaart__beeld {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--groen-diep);
  border-bottom: 2px solid var(--goud);
}

.kaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.kaart:hover .kaart__beeld img,
.kaart:focus-visible .kaart__beeld img {
  transform: scale(1.035);
}

.kaart__body {
  padding: 1.1rem 1.2rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kaart h3 {
  font-size: var(--stap-2);
  color: var(--goud-diep); /* 5,9:1 op ivoor */
}

.band--groen .kaart h3,
.band--diep .kaart h3 {
  color: var(--goud-licht); /* 5,4:1 op het groen van de kaart */
}

.kaart p {
  color: var(--inkt-zacht);
  font-size: var(--stap--1);
  flex: 1;
}

.kaart .pijl {
  color: var(--goud-diep);
  margin-top: 0.4rem;
}

/* Gouden hoekmerken */
.kaart__body::before,
.kaart__body::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.kaart__body::before {
  left: 6px;
  bottom: 6px;
  border-left: 2px solid var(--goud);
  border-bottom: 2px solid var(--goud);
}

.kaart__body::after {
  right: 6px;
  bottom: 6px;
  border-right: 2px solid var(--goud);
  border-bottom: 2px solid var(--goud);
}

/* Kaart op donkere band */
.band--groen .kaart,
.band--diep .kaart {
  background: var(--groen-mid);
  color: var(--creme);
  border-color: var(--goud-waas);
}

.band--groen .kaart p,
.band--diep .kaart p {
  color: var(--zand);
}

.band--groen .kaart .pijl,
.band--diep .kaart .pijl {
  color: var(--goud-licht);
}

/* Locatie ------------------------------------------------------- */
.locatie {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  align-items: start;
}

.locatie__beelden {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr 1fr;
}

.locatie__beelden .lijst:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

.locatie__beelden .lijst + .lijst {
  aspect-ratio: 1;
}

.tijden {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-size: var(--stap-0);
}

.tijden caption {
  text-align: left;
  font-family: var(--kop);
  font-size: var(--stap-2);
  font-weight: 700;
  padding-bottom: 0.5rem;
}

.tijden th,
.tijden td {
  text-align: left;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--goud-waas);
}

.tijden td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tijden th {
  font-weight: 600;
}

.adres {
  font-style: normal;
  line-height: 1.75;
}

/* Galerij ------------------------------------------------------- */
.galerij {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, 1fr);
}

.galerij .lijst {
  aspect-ratio: 1;
}

.galerij .lijst:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.let-op {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--goud);
  background: rgba(200, 150, 62, 0.09);
  font-size: var(--stap--1);
  color: var(--inkt-zacht);
}

.band--groen .let-op,
.band--diep .let-op {
  color: var(--zand);
}

.let-op p:last-child {
  margin-bottom: 0;
}

/* Feestjespreview ----------------------------------------------- */
.uitgelicht {
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}

.uitgelicht .boog {
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------- 10 */
.stappen {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.stappen li {
  counter-increment: stap;
  position: relative;
  padding-left: 3.2rem;
}

/* De ruit staat schuin, het cijfer erin moet rechtop blijven staan:
   daarom draait het binnenste pseudo-element terug. */
.stappen__nr {
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--goud);
  transform: rotate(45deg);
}

.stappen__nr::before {
  content: counter(stap);
  transform: rotate(-45deg);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--goud-licht);
}

.stappen li::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 2.6rem;
  bottom: -0.9rem;
  width: 1px;
  background: var(--goud-waas);
}

.stappen li:last-child::after {
  display: none;
}

.stappen b {
  display: block;
  font-family: var(--kop);
  font-size: var(--stap-1);
  transform: translateY(0.2rem);
}

.stappen p {
  margin: 0.2rem 0 0;
  font-size: var(--stap--1);
  color: var(--zand);
}

.band--creme .stappen__nr::before,
.band--ivoor .stappen__nr::before {
  color: var(--goud-diep);
}

.band--creme .stappen p,
.band--ivoor .stappen p {
  color: var(--inkt-zacht);
}

/* Veelgestelde vragen — vóór het formulier */
.vraag {
  border-bottom: 1px solid var(--goud-waas);
}

.vraag summary {
  cursor: pointer;
  padding: 0.95rem 2rem 0.95rem 0;
  font-family: var(--kop);
  font-size: var(--stap-1);
  font-weight: 600;
  position: relative;
  list-style: none;
}

.vraag summary::-webkit-details-marker {
  display: none;
}

.vraag summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.45rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--goud);
  border-bottom: 2px solid var(--goud);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.vraag[open] summary::after {
  transform: rotate(-135deg);
}

.vraag > div {
  padding-bottom: 0.9rem;
}

.vraag p {
  margin-bottom: 0.6rem;
  font-size: var(--stap-0);
}

.vraag p:last-child {
  margin-bottom: 0;
}

/* Formulier ------------------------------------------------------ */
.formulier {
  background: var(--ivoor);
  border: 1px solid var(--goud-waas);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.formulier fieldset {
  border: 0;
  border-top: 1px solid var(--goud-waas);
  margin: 0 0 1.6rem;
  padding: 1.2rem 0 0;
}

.formulier fieldset:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.formulier legend {
  font-family: var(--kop);
  font-size: var(--stap-2);
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.6rem;
}

.velden {
  display: grid;
  gap: 1rem;
}

.veld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.veld label {
  font-weight: 600;
  font-size: var(--stap--1);
}

.veld .hint {
  font-size: var(--stap--1);
  color: var(--inkt-zacht);
}

.veld input,
.veld select,
.veld textarea {
  font: inherit;
  font-size: var(--stap-0);
  color: var(--inkt);
  background: #fff;
  border: 1px solid #8a7a5e;
  padding: 0.65rem 0.7rem;
  border-radius: 2px;
  width: 100%;
}

.veld textarea {
  min-height: 7rem;
  resize: vertical;
}

.veld input:focus-visible,
.veld select:focus-visible,
.veld textarea:focus-visible {
  border-color: var(--goud-diep);
}

.veld--vink {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.veld--vink input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.25rem;
}

.veld--vink label {
  font-weight: 400;
  font-size: var(--stap--1);
}

.verplicht {
  color: var(--goud-diep);
  font-weight: 700;
}

.melding {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--goud);
  background: rgba(200, 150, 62, 0.12);
  font-size: var(--stap--1);
}

.melding:empty {
  display: none;
}

.demo-strook {
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.05rem;
  background: var(--groen);
  color: var(--creme);
  font-size: var(--stap--1);
  border-left: 4px solid var(--goud);
}

.demo-strook p:last-child {
  margin-bottom: 0;
}

/* Groene strook binnen een lichte band: links moeten hier licht goud zijn,
   het donkere messing haalt op dit groen maar 2,0:1. De bandselector moet
   mee, anders wint .band--ivoor a:not(.knop) op specificiteit. */
.band--ivoor .demo-strook a,
.band--creme .demo-strook a,
.demo-strook a {
  color: var(--goud-licht);
}

/* --------------------------------------------------------------- 11 */
.contact__blokken {
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 2.4rem);
}

.contact__blokken h3 {
  color: var(--goud-licht);
}

.groot-nummer {
  font-family: var(--kop);
  font-size: var(--stap-3);
  font-weight: 700;
  text-decoration: none;
  color: var(--goud-licht);
  display: inline-block;
  margin-bottom: 0.4rem;
}

.voet {
  background: var(--groen-diep);
  color: var(--zand);
  border-top: 2px solid var(--goud);
  padding-block: 2.2rem 6rem;
  font-size: var(--stap--1);
}

.voet__in {
  display: grid;
  gap: 1.4rem;
}

.voet a {
  color: var(--goud-licht);
}

.voet ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.voet__merk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.voet__merk svg,
.voet__merk img {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}

/* Mobiele actiebalk */
.actiebalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--groen-diep);
  border-top: 2px solid var(--goud);
  padding-bottom: env(safe-area-inset-bottom);
}

.actiebalk a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.3rem;
  font-size: var(--stap--1);
  font-weight: 700;
  text-decoration: none;
  color: var(--creme);
}

.actiebalk a + a {
  border-left: 1px solid var(--goud-waas);
}

.actiebalk a:first-child {
  color: var(--goud-licht);
}

/* --------------------------------------------------------------- 12 */
/* Ruimte- en uitlijnhulpjes, zodat er geen inline style= nodig is. */
.mt-s {
  margin-top: 1.2rem;
}
.mt-m {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.mt-l {
  margin-top: clamp(2.4rem, 5vw, 4rem);
}
.links-uit {
  margin-inline: 0;
}
.aanhef--midden {
  justify-content: center;
}
.overgang--ivoor-naar-diep {
  --van: var(--ivoor);
  --naar: var(--groen-diep);
}
.voet__kop {
  font-family: var(--tekst);
  font-size: var(--stap--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud-licht);
  margin: 0 0 0.7rem;
}
.voet__naam {
  font-family: var(--kop);
  font-size: 1.15rem;
  color: var(--creme);
}
code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.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;
  border: 0;
}

/* Reveals zijn OPT-IN: zonder JavaScript blijft alles gewoon zichtbaar.
   Alleen wanneer script.js de klasse js-reveal op <html> zet, wordt er
   iets verborgen — en script.js zet bij window.load alsnog alles aan. */
.rv {
  opacity: 1;
}

.js-reveal .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-reveal .rv.in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- 13 */
/* Drie breakpoints: 640, 900, 1200. Meer zijn er niet.              */

@media (min-width: 640px) {
  .bewijs ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .raster--3,
  .raster--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .galerij {
    grid-template-columns: repeat(3, 1fr);
  }

  .galerij .lijst:first-child {
    grid-column: span 2;
    aspect-ratio: 16 / 11;
  }

  .velden--twee {
    grid-template-columns: repeat(2, 1fr);
  }

  .veld--breed {
    grid-column: 1 / -1;
  }

  .locatie__beelden .lijst:first-child {
    aspect-ratio: 2 / 1;
  }

  .voet__in {
    grid-template-columns: repeat(2, 1fr);
  }

  .pagina-galerij {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pagina-galerij figure:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .agenda-strip__in,
  .agenda-item-groot {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agenda-strip__actie,
  .agenda-item-groot__actie {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .kop__in {
    flex-wrap: nowrap;
    padding-block: 0.9rem;
  }

  .merk__teken {
    width: 42px;
    height: 42px;
  }

  .merk__naam {
    font-size: 1.25rem;
  }

  .merk__plaats {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }

  .hamburger,
  .js .hamburger {
    display: none;
  }

  .navigatie,
  .js .navigatie[data-open="false"] {
    display: block;
    flex-basis: auto;
  }

  .navigatie ul {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
  }

  .navigatie a {
    border-bottom: 2px solid transparent;
    padding: 0.35rem 0;
    font-size: var(--stap--1);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .navigatie a:hover,
  .navigatie a[aria-current="page"] {
    border-bottom-color: var(--goud);
  }

  .kop__cta {
    display: inline-flex;
    white-space: nowrap;
  }

  .actiebalk {
    display: none;
  }

  .agenda-strip__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .agenda-strip__actie {
    grid-column: auto;
    justify-self: end;
  }

  .agenda-item-groot {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .agenda-item-groot__actie {
    grid-column: auto;
  }

  .voet {
    padding-bottom: 2.4rem;
  }

  .hero__in {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .hero__beeld {
    padding-bottom: 0;
    padding-left: 3rem;
  }

  .hero__boog {
    max-width: none;
    aspect-ratio: 3 / 4;
  }

  .hero__medaillon {
    left: 0;
    bottom: -1.5rem;
    transform: none;
    width: clamp(7rem, 11vw, 10rem);
  }

  .bewijs ul {
    grid-template-columns: repeat(4, 1fr);
  }

  .raster--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .locatie {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .contact__blokken {
    grid-template-columns: repeat(3, 1fr);
  }

  .uitgelicht {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .uitgelicht--links .uitgelicht__beeld {
    order: -1;
  }

  /* Tekst links, beeld rechts: het beeld houdt de smalste kolom. */
  .uitgelicht--rechts {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .sfeerblok {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  }

  .galerij {
    grid-template-columns: repeat(4, 1fr);
  }

  .galerij .lijst:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }

  .voet__in {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  /* Dagritme wordt een middenroute met afwisselende zijden */
  .dagdelen {
    padding-left: 0;
  }

  .dagdelen::before {
    left: 50%;
    transform: translateX(-1px);
    bottom: 1rem;
  }

  .dagdeel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .dagdeel::before {
    left: 50%;
    top: 50%;
    margin: -9px 0 0 -9px;
    width: 18px;
    height: 18px;
  }

  .dagdeel__beeld {
    margin: 0;
  }

  /* De boog niet volle kolombreedte laten worden: anders wordt elk
     dagdeel onnodig hoog en valt de tekst er los naast. */
  .dagdeel__beeld .boog {
    max-width: 24rem;
    margin-inline: auto;
  }

  .dagdeel--rechts .dagdeel__beeld .boog {
    margin-right: 0;
  }

  .dagdeel--links .dagdeel__beeld .boog {
    margin-left: 0;
  }

  .dagdeel__beeld figcaption {
    max-width: 24rem;
    margin-inline: auto;
  }

  .dagdeel--rechts .dagdeel__beeld figcaption {
    margin-right: 0;
  }

  .dagdeel--links .dagdeel__beeld figcaption {
    margin-left: 0;
  }

  .dagdeel--rechts .dagdeel__beeld {
    order: 2;
  }

  .dagdeel__inhoud {
    padding-inline: 0.5rem;
  }
}

@media (min-width: 1200px) {
  .navigatie ul {
    gap: 1.2rem;
  }

  .hero__in {
    padding-block: 3.4rem 4.4rem;
  }

  .dagdeel__beeld .boog {
    aspect-ratio: 4 / 5;
  }

  .galerij {
    gap: 0.9rem;
  }
}

/* --------------------------------------------------------------- 14 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal .rv {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------- 15 */
/* Menukaart. Vier kaarten (lunch, diner, dranken, bier) volledig
   uitgeschreven, met per kaart een beeld van de nieuwe kaart en een
   verwijzing naar de originele pdf. Zelfde tokens als de rest van
   concept E; geen nieuwe kleuren.                                    */

.menu-hero {
  text-align: center;
}

.menu-hero .lead,
.menu-hero .bijschrift-klein {
  margin-inline: auto;
}

/* --inkt-zacht is voor lichte banden; op diepgroen zou dat 1,9:1 geven. */
.band--groen .bijschrift-klein,
.band--diep .bijschrift-klein {
  color: var(--zand);
}

/* Sprongnavigatie naar de vier kaarten */
.menu-sprong {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.6rem 0 1.4rem;
}

.menu-sprong a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--goud);
  font-size: var(--stap--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu-sprong a:hover,
.menu-sprong a:focus-visible {
  background: var(--goud);
  color: var(--groen-diep);
}

.menu-sectie__kop {
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.menu-sectie__kop h2 {
  margin-bottom: 0;
}

/* Kop van een kaart: beeld van de nieuwe kaart naast de toelichting */
.kaartkop {
  display: grid;
  gap: 1.2rem 1.8rem;
  align-items: center;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--goud-waas);
}

.kaartbeeld {
  margin: 0;
  width: min(60vw, 300px);
}

.kaartbeeld img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 2px var(--goud), 0 14px 34px rgba(0, 0, 0, 0.28);
}

.kaartkop__label {
  font-family: var(--tekst);
  font-size: var(--stap--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.band--groen .kaartkop__label,
.band--diep .kaartkop__label {
  color: var(--goud-licht);
}

.band--creme .kaartkop__label,
.band--ivoor .kaartkop__label {
  color: var(--goud-diep);
}

.kaartkop__tekst p:last-child {
  margin-bottom: 0;
}

/* Raster met de groepen van een kaart */
.menu-groepen {
  display: grid;
  gap: clamp(1.6rem, 3.5vw, 2.4rem);
  align-items: start;
}

.menu-groep h3,
.menu-groep h4 {
  margin: 0 0 0.15rem;
  font-size: var(--stap-2);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--goud-waas);
}

.band--groen .menu-groep h3,
.band--groen .menu-groep h4,
.band--diep .menu-groep h3,
.band--diep .menu-groep h4 {
  color: var(--goud-licht);
}

.band--creme .menu-groep h3,
.band--creme .menu-groep h4,
.band--ivoor .menu-groep h3,
.band--ivoor .menu-groep h4 {
  color: var(--goud-diep);
}

.menu-groep__noot,
.menu-legenda {
  font-size: var(--stap--1);
  font-style: italic;
  margin: 0.6rem 0 0.2rem;
  max-width: 46ch;
  opacity: 0.85;
}

.menu-groep__noot--tussen {
  margin-top: 1.2rem;
  font-style: normal;
  font-weight: 700;
  opacity: 1;
}

/* Tussenkop binnen een kaart, bijvoorbeeld "Fles & blik" */
.menu-tussenkop {
  font-size: var(--stap-3);
  text-align: center;
  margin: clamp(2rem, 4.5vw, 3rem) 0 clamp(1.2rem, 3vw, 1.8rem);
}

.band--diep .menu-tussenkop {
  color: var(--goud-licht);
}

/* De lijst zelf: naam links, prijs rechts, omschrijving eronder */
.menu-lijst {
  margin: 0.7rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.mi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.9rem;
  align-items: baseline;
}

.mi--drie {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.mi dt {
  grid-column: 1;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: break-word;
}

.mi__toev {
  font-weight: 400;
  font-size: var(--stap--1);
  opacity: 0.85;
}

.mi__prijs,
.mi__abv {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mi__abv {
  font-size: var(--stap--1);
  opacity: 0.8;
  min-width: 3.2em;
}

.mi__om {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  font-size: var(--stap--1);
  line-height: 1.45;
  max-width: 54ch;
  opacity: 0.88;
}

/* --------------------------------------------------------------- */
@media (min-width: 700px) {
  .menu-groepen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-groep--breed {
    grid-column: 1 / -1;
  }

  .menu-lijst--twee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.6rem, 4vw, 3rem);
  }

  .kaartkop {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kaartbeeld {
    width: 300px;
  }
}

@media (min-width: 1200px) {
  .menu-lijst--twee {
    column-gap: clamp(2rem, 3vw, 3.4rem);
  }
}
.privacy-keuze {
  position: fixed;
  z-index: 1000;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.25rem;
  color: #f7f0df;
  background: #0e2a24;
  border: 1px solid #c99a43;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.privacy-keuze h2 {
  margin: 0 0 .4rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.privacy-keuze p {
  max-width: 48rem;
  margin: 0 0 .35rem;
}

.privacy-keuze a {
  color: #f0c66c;
}

.privacy-keuze__acties {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: .65rem;
}

.privacy-pagina h2 {
  margin-top: 2rem;
}

@media (max-width: 760px) {
  .privacy-keuze {
    align-items: stretch;
    flex-direction: column;
  }

  .privacy-keuze__acties .knop {
    flex: 1 1 12rem;
  }
}