/* Blend Borrel & Bites, Baarle-Nassau. Ontwerpsysteem. Zie DESIGN.md. */

/* ---------- Tokens ---------- */
:root {
  --sage-50: #f3f5ee;   /* paginabasis: bleke pistache, geen crème */
  --sage-100: #e7ecdd;  /* wisselband */
  --sage-200: #d3dcc6;  /* lijnen op licht */
  --sage-300: #b7c4a7;
  --groen-700: #2c5c4b; /* hover / kleine vlakken */
  --groen-800: #1f4a3d; /* de lounge: doordrenkte panelen */
  --groen-900: #153229; /* de avond: nav-overlay, voet */
  --inkt: #12211b;
  --inkt-zacht: #3d4f47;
  --wit: #fbfbf8;
  --goud: #b8962e;
  --goud-licht: #dcc272;
  --goud-inkt: #7a6118;
  --goud-lijn: rgba(184, 150, 46, .55);
  --goud-lijn-zacht: rgba(220, 194, 114, .45);
  --oker: #d4952b;      /* het fluweel van de stoelen: knoppen */
  --oker-donker: #b97d1e;

  --font-kop: 'Marcellus', 'Georgia', serif;
  --font-tekst: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;

  --maat-0: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --maat-1: clamp(1.02rem, 0.98rem + 0.25vw, 1.125rem);
  --maat-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --maat-3: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --maat-4: clamp(2rem, 1.5rem + 2.2vw, 3.3rem);
  --maat-5: clamp(2.6rem, 1.8rem + 3.6vw, 5rem);

  --ruimte: clamp(4.5rem, 9vw, 8.5rem);
  --ruimte-klein: clamp(2.5rem, 5vw, 4.5rem);
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --breed: 1240px;
  --smal: 68ch;

  --z-sticky: 20;
  --z-kop: 30;
  --z-overlay: 40;
  --z-dialoog: 50;

  --ease-uit: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sage-50);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: var(--maat-1);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--groen-700); }
.sectie--groen a:hover, .sectie--nacht a:hover, .voet a:hover, .overlay-menu a:hover { color: var(--goud-licht); }
p { margin: 0 0 1em; text-wrap: pretty; max-width: var(--smal); }
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--maat-5); }
h2 { font-size: var(--maat-4); }
h3 { font-size: var(--maat-3); line-height: 1.15; }
h4 { font-size: var(--maat-2); }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin: 0 0 .35em; }
strong { font-weight: 600; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--goud-lijn); margin: 2rem 0; }
::selection { background: var(--goud-licht); color: var(--inkt); }
:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--groen-800); color: var(--wit); padding: .6em 1em; }
.skiplink:focus { left: 1rem; top: 1rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Lay-out ---------- */
.omvat { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; }
.omvat--smal { width: min(100% - 2 * var(--rand), 860px); margin-inline: auto; }
.sectie { padding-block: var(--ruimte); }
.sectie--klein { padding-block: var(--ruimte-klein); }
.sectie--band { background: var(--sage-100); }
.sectie--groen { background: var(--groen-800); color: var(--sage-50); }
.sectie--nacht { background: var(--groen-900); color: var(--sage-50); }
.sectie--groen h1, .sectie--groen h2, .sectie--groen h3, .sectie--nacht h1, .sectie--nacht h2, .sectie--nacht h3 { color: var(--wit); }
.sectie--groen .zacht, .sectie--nacht .zacht { color: #c9d6cc; }
.zacht { color: var(--inkt-zacht); }
.goud { color: var(--goud-inkt); }
.sectie--groen .goud, .sectie--nacht .goud { color: var(--goud-licht); }
.midden { text-align: center; }
.midden p, .midden h2 { margin-inline: auto; }
.intro { font-size: var(--maat-2); line-height: 1.45; font-weight: 300; color: var(--inkt); }
.sectie--groen .intro, .sectie--nacht .intro { color: var(--sage-50); }
.kopblok { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.kopblok p { margin-bottom: 0; }
.kopblok--rij { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; }
.kopblok--rij h2 { margin-bottom: 0; }

/* Tweeluik: tekst en foto naast elkaar, om en om. */
.tweeluik { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 860px) {
  .tweeluik { grid-template-columns: 5fr 6fr; }
  .tweeluik--foto-links { grid-template-columns: 6fr 5fr; }
  .tweeluik--foto-links > .tweeluik__tekst { order: 2; }
}
.tweeluik__tekst > :last-child { margin-bottom: 0; }

/* Foto's */
.foto { display: block; position: relative; overflow: hidden; background: var(--sage-200); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--3x4 { aspect-ratio: 3 / 4; }
.foto--1x1 { aspect-ratio: 1; }
.foto--breed { aspect-ratio: 16 / 9; }
.foto--16x10 { aspect-ratio: 16 / 10; }
.sectie--groen .foto, .sectie--nacht .foto { background: var(--groen-900); }

/* Kaderlijn: de dubbele gouden lijn uit het logo. Alleen op sleutelmomenten. */
.kader { position: relative; padding: 8px; border: 1px solid var(--goud-lijn); }
.kader::after { content: ''; position: absolute; inset: 4px; border: 1px solid var(--goud-lijn-zacht); pointer-events: none; }
.kader > .foto { height: 100%; }
.kader--los { padding: 0; border: 0; }
.kader--los::after { inset: 12px; border-color: rgba(251, 251, 248, .7); }

/* Gouden lijnen als scheiding in lijsten */
.lijst-goud { list-style: none; padding: 0; margin: 0; }
.lijst-goud > li { margin: 0; padding: 1rem 0; border-top: 1px solid var(--goud-lijn); }
.lijst-goud > li:last-child { border-bottom: 1px solid var(--goud-lijn); }

/* Vinkloze kenmerkenlijst: puntje in goud */
.lijst-punt { list-style: none; padding: 0; margin: 0 0 1.25em; }
.lijst-punt li { position: relative; padding-left: 1.4em; margin-bottom: .45em; }
.lijst-punt li::before { content: ''; position: absolute; left: .15em; top: .68em; width: .45em; height: .45em; border-radius: 50%; background: var(--goud); }

/* Feitenregels: label en waarde, zoals op een menukaart */
.feiten { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin: 0 0 1.5rem; max-width: 34rem; }
.feiten dt { color: var(--inkt-zacht); font-size: var(--maat-0); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; padding-top: .2em; }
.feiten dd { margin: 0; font-family: var(--font-kop); font-size: var(--maat-2); }
.sectie--groen .feiten dt, .sectie--nacht .feiten dt { color: #c9d6cc; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.6em; border-radius: 2px; border: 1px solid transparent;
  font: 600 var(--maat-0) / 1 var(--font-tekst); letter-spacing: .02em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--groen-800); color: var(--wit);
  transition: background .25s var(--ease-uit), transform .25s var(--ease-uit), color .25s;
}
.knop:hover { background: var(--groen-700); color: var(--wit); transform: translateY(-1px); }
.sectie--groen .knop:not(.knop--lijn), .sectie--nacht .knop:not(.knop--lijn), .hero .knop:not(.knop--lijn), body.hero-foto .kop:not(.is-gescrold) .kop__reserveer, .fotoband .knop:not(.knop--lijn) { background: var(--wit); color: var(--inkt); }
.sectie--groen .knop:not(.knop--lijn):hover, .sectie--nacht .knop:not(.knop--lijn):hover, .hero .knop:not(.knop--lijn):hover, .fotoband .knop:not(.knop--lijn):hover { background: var(--sage-100); color: var(--inkt); }
.knop--lijn { background: transparent; border-color: currentColor; color: inherit; }
.knop--lijn:hover { background: rgba(18, 33, 27, .06); color: inherit; }
.sectie--groen .knop--lijn:hover, .sectie--nacht .knop--lijn:hover, .hero .knop--lijn:hover { background: rgba(251, 251, 248, .12); }
.knop--groen { background: var(--groen-800); color: var(--wit); }
.knop--groen:hover { background: var(--groen-700); color: var(--wit); }
.sectie--groen .knop--groen, .sectie--nacht .knop--groen { background: var(--wit); color: var(--inkt); }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: 1.75rem; }
.link-goud { font-weight: 600; color: var(--goud-inkt); text-decoration: none; border-bottom: 1px solid var(--goud-lijn); padding-bottom: .1em; }
.link-goud:hover { color: var(--inkt); border-color: var(--inkt); }
.sectie--groen .link-goud, .sectie--nacht .link-goud { color: var(--goud-licht); }
.sectie--groen .link-goud:hover, .sectie--nacht .link-goud:hover { color: var(--wit); border-color: var(--wit); }

/* ---------- Kop (header) ---------- */
.kop {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-kop);
  background: var(--sage-50); color: var(--inkt);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease-uit), border-color .35s, box-shadow .35s;
}
.kop__rij { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; height: 84px; transition: height .3s var(--ease-uit); }
.kop__logo { display: block; flex: none; }
.kop__logo img { height: 46px; width: auto; transition: height .3s var(--ease-uit); }
.kop__nav { margin-left: auto; }
.kop__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; }
.kop__nav li { margin: 0; position: relative; }
.kop__nav a { display: block; padding: .6rem .8rem; font-size: .9rem; font-weight: 500; letter-spacing: .02em; text-decoration: none; color: inherit; }
.kop__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--goud); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.kop__nav a:hover { color: inherit; opacity: .75; }
.kop__nav .sub { position: absolute; top: 100%; left: 0; min-width: 12rem; display: none; flex-direction: column; gap: 0; padding: .5rem 0; background: var(--wit); color: var(--inkt); border: 1px solid var(--sage-200); box-shadow: 0 18px 40px -20px rgba(18, 33, 27, .45); }
.kop__nav .heeft-sub:hover .sub, .kop__nav .heeft-sub:focus-within .sub { display: flex; }
.kop__nav .sub a { padding: .5rem 1.1rem; }
.kop__reserveer { flex: none; }
.menuknop { display: none; flex: none; margin-left: auto; background: none; border: 1px solid currentColor; color: inherit; border-radius: 2px; font: 600 .85rem / 1 var(--font-tekst); letter-spacing: .06em; text-transform: uppercase; padding: .75em 1em; cursor: pointer; }

body.hero-foto .kop:not(.is-gescrold) { background: linear-gradient(to bottom, rgba(21, 50, 41, .62), rgba(21, 50, 41, 0)); color: var(--wit); }
body.hero-foto .kop:not(.is-gescrold) .kop__nav .sub { color: var(--inkt); }
.kop.is-gescrold { border-bottom-color: var(--sage-200); box-shadow: 0 10px 30px -22px rgba(18, 33, 27, .5); }
.kop.is-gescrold .kop__rij { height: 66px; }
.kop.is-gescrold .kop__logo img { height: 36px; }
@media (max-width: 1099px) {
  .kop__nav, .kop__reserveer { display: none; }
  .menuknop { display: inline-block; }
  .kop__rij { height: 70px; }
  .kop__logo img { height: 38px; }
}
main { padding-top: 84px; }
@media (max-width: 1099px) { main { padding-top: 70px; } }
body.hero-foto main { padding-top: 0; }

/* Overlay-menu: de avondkaart. */
.overlay-menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--groen-900); color: var(--sage-50); overflow-y: auto; padding: 1.25rem var(--rand) 3rem; }
.overlay-menu[hidden] { display: none; }
.overlay-menu__kop { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: clamp(1.5rem, 5vh, 3.5rem); }
.overlay-menu__kop img { height: 38px; width: auto; }
.overlay-menu__sluit { background: none; border: 1px solid rgba(251, 251, 248, .5); color: inherit; border-radius: 2px; font: 600 .85rem / 1 var(--font-tekst); letter-spacing: .06em; text-transform: uppercase; padding: .75em 1em; cursor: pointer; }
.overlay-menu nav ul { list-style: none; margin: 0; padding: 0; }
.overlay-menu nav > ul { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 640px) { .overlay-menu nav > ul { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.overlay-menu nav > ul > li > a, .overlay-menu nav > ul > li > span { font-family: var(--font-kop); font-size: clamp(1.6rem, 4vw, 2.1rem); text-decoration: none; display: block; line-height: 1.15; }
.overlay-menu nav ul ul { margin-top: .5rem; padding-left: 0; border-left: 0; }
.overlay-menu nav ul ul a { display: block; padding: .3rem 0; font-size: 1.05rem; color: #c9d6cc; text-decoration: none; }
.overlay-menu nav ul ul a:hover, .overlay-menu nav > ul > li > a:hover { color: var(--goud-licht); }
.overlay-menu__voet { margin-top: clamp(2rem, 6vh, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(220, 194, 114, .35); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; font-size: .95rem; color: #c9d6cc; }
.overlay-menu__voet p { margin: 0; }
.overlay-menu__voet a { color: inherit; }

/* ---------- Hero (foto-eerst) ---------- */
.hero { position: relative; min-height: min(92svh, 900px); display: grid; align-items: end; color: var(--wit); isolation: isolate; }
.hero__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--groen-900); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 50, 41, .96) 0%, rgba(21, 50, 41, .82) 30%, rgba(21, 50, 41, .45) 55%, rgba(21, 50, 41, .22) 75%, rgba(21, 50, 41, .5) 100%); }
.hero__inhoud { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 7vw, 6rem); }
.hero h1 { color: var(--wit); max-width: 14ch; margin-bottom: .35em; }
.hero__tekst { font-size: var(--maat-2); font-weight: 400; max-width: 36ch; margin-bottom: 0; color: var(--wit); }
.hero .knoppen { margin-top: 1.75rem; }
.hero .knop--lijn { color: var(--wit); }
.hero--laag { min-height: min(62svh, 640px); }
.hero--midden { align-items: center; text-align: center; }
.hero--midden h1, .hero--midden .hero__tekst { margin-inline: auto; }
.hero--midden .knoppen { justify-content: center; }
.hero--midden .hero__foto::after { background: linear-gradient(to top, rgba(21, 50, 41, .8), rgba(21, 50, 41, .55) 60%, rgba(21, 50, 41, .45)); }

/* Vandaag-regel: kleine gouden lijn met de openingsstatus van vandaag */
.vandaag { display: inline-flex; align-items: center; gap: .7em; font-size: var(--maat-0); font-weight: 600; letter-spacing: .04em; margin-bottom: 1.25rem; color: var(--goud-licht); }
.vandaag::before { content: ''; width: 2.2rem; height: 1px; background: currentColor; }
.vandaag[data-status="dicht"] { color: #e6ddc0; }
.sectie .vandaag { color: var(--goud-inkt); }
.sectie--groen .vandaag, .sectie--nacht .vandaag { color: var(--goud-licht); }

/* ---------- Titelblok (tekst-eerst subpagina) ---------- */
.titelblok { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.titelblok h1 { margin-bottom: .4em; max-width: 16ch; }
.titelblok .intro { max-width: 58ch; margin-bottom: 0; }
.titelblok--rij { display: grid; gap: 1.5rem 4rem; align-items: end; }
@media (min-width: 900px) { .titelblok--rij { grid-template-columns: 1.1fr 1fr; } .titelblok--rij .intro { padding-bottom: .5rem; } }

/* ---------- Week: openingstijden ---------- */
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.week li { margin: 0; min-width: 0; text-align: center; padding: .6rem .1rem .5rem; border-top: 2px solid var(--goud); }
.week li.is-dicht { border-top-color: var(--sage-300); color: var(--inkt-zacht); }
.week .dag { display: block; font-family: var(--font-kop); font-size: var(--maat-2); line-height: 1; }
.week .tijd { display: block; font-size: .8rem; margin-top: .35rem; letter-spacing: .02em; }
.week li.is-dicht .tijd { opacity: .75; }
.sectie--groen .week li.is-dicht, .sectie--nacht .week li.is-dicht, .voet .week li.is-dicht { border-top-color: rgba(251, 251, 248, .25); color: #a9b8ad; }
.week-noot { font-size: var(--maat-0); color: var(--inkt-zacht); margin-top: 1rem; }
.sectie--groen .week-noot, .sectie--nacht .week-noot, .voet .week-noot { color: #c9d6cc; }

/* ---------- Agenda ---------- */
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda > li { margin: 0; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--goud-lijn); align-items: start; }
.agenda > li:last-child { border-bottom: 1px solid var(--goud-lijn); }
@media (min-width: 760px) { .agenda > li { grid-template-columns: 5.5rem 1fr auto; } .agenda--met-poster > li { grid-template-columns: 5.5rem 1fr 10rem; } }
.datum { font-family: var(--font-kop); line-height: 1; text-align: center; padding-top: .15rem; }
.datum .dag { display: block; font-size: clamp(2.2rem, 3vw, 3rem); }
.datum .maand { display: block; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .35rem; font-family: var(--font-tekst); font-weight: 500; color: var(--goud-inkt); }
.sectie--groen .datum .maand, .sectie--nacht .datum .maand { color: var(--goud-licht); }
.agenda h3 { font-size: var(--maat-3); margin-bottom: .25em; }
.agenda .weekdag { font-size: var(--maat-0); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--inkt-zacht); margin-bottom: .35rem; }
.sectie--groen .agenda .weekdag, .sectie--nacht .agenda .weekdag { color: #c9d6cc; }
.agenda p { margin-bottom: .6em; }
.agenda .knoppen { margin-top: .75rem; }
.agenda__poster { grid-column: 1 / -1; }
@media (min-width: 760px) { .agenda__poster { grid-column: 3; } .agenda__acties { grid-column: 3; align-self: center; } }
.agenda__poster .foto { aspect-ratio: 4 / 5; max-width: 12rem; }

/* Kalender met verleden events: compact */
.verleden { columns: 2; column-gap: 3rem; list-style: none; padding: 0; margin: 0; }
@media (max-width: 700px) { .verleden { columns: 1; } }
.verleden li { break-inside: avoid; margin: 0; padding: .6rem 0; border-top: 1px solid var(--goud-lijn-zacht); display: flex; gap: 1rem; align-items: baseline; }
.verleden .d { flex: none; width: 5.5rem; font-size: var(--maat-0); color: var(--inkt-zacht); letter-spacing: .04em; }
.sectie--groen .verleden .d, .sectie--nacht .verleden .d { color: #c9d6cc; }

/* ---------- Kaartenwaaier: de menukaarten als een hand kaarten ---------- */
.waaier { display: flex; justify-content: center; align-items: flex-start; gap: 0; padding: 1.5rem 0 3.5rem; list-style: none; margin: 0; }
.waaier li { margin: 0; flex: 0 1 14rem; max-width: 15rem; transition: transform .5s var(--ease-uit); }
.waaier a { display: block; text-decoration: none; color: var(--inkt); background: var(--wit); border: 1px solid var(--sage-200); box-shadow: 0 30px 50px -30px rgba(18, 33, 27, .55); transform-origin: 50% 120%; transition: transform .5s var(--ease-uit), box-shadow .5s var(--ease-uit); }
.waaier a:hover { transform: translateY(-18px) rotate(0deg) !important; box-shadow: 0 40px 60px -28px rgba(18, 33, 27, .6); color: var(--inkt); }
.waaier .foto { aspect-ratio: 5 / 4; margin: 8px; border: 1px solid var(--goud-lijn); }
.waaier__titel { display: block; font-family: var(--font-kop); font-size: var(--maat-2); padding: .6rem 1rem 0; }
.waaier__sub { display: block; font-size: .85rem; color: var(--inkt-zacht); padding: .15rem 1rem 1rem; }
@media (min-width: 900px) {
  .waaier li { margin-inline: -1.2rem; }
  .waaier li:nth-child(1) a { transform: rotate(-9deg) translateY(28px); }
  .waaier li:nth-child(2) a { transform: rotate(-5deg) translateY(12px); }
  .waaier li:nth-child(3) a { transform: rotate(-1.5deg) translateY(2px); }
  .waaier li:nth-child(4) a { transform: rotate(1.5deg) translateY(2px); }
  .waaier li:nth-child(5) a { transform: rotate(5deg) translateY(12px); }
  .waaier li:nth-child(6) a { transform: rotate(9deg) translateY(28px); }
  .waaier li:hover { z-index: 2; position: relative; }
}
@media (max-width: 899px) {
  .waaier { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; align-items: stretch; }
  .waaier li { max-width: none; }
}

/* ---------- Wegwijzers: drie richtingen, ongelijk van maat ---------- */
.wegwijzers { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .wegwijzers { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; } .wegwijzers > :first-child { grid-row: 1 / 3; } }
.wegwijzer { position: relative; display: grid; align-items: end; min-height: 18rem; color: var(--wit); text-decoration: none; overflow: hidden; isolation: isolate; }
.wegwijzers > :first-child .wegwijzer { min-height: 26rem; }
.wegwijzer .foto { position: absolute; inset: 0; z-index: -1; }
.wegwijzer .foto img { transition: transform 1.2s var(--ease-uit); }
.wegwijzer:hover .foto img { transform: scale(1.04); }
.wegwijzer::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(21, 50, 41, .85), rgba(21, 50, 41, .1) 60%); }
.wegwijzer__tekst { padding: 1.5rem; }
.wegwijzer h3 { color: var(--wit); margin-bottom: .2em; }
.wegwijzer p { margin: 0; color: #eef2ea; font-size: var(--maat-0); }
.wegwijzer:hover { color: var(--wit); }

/* ---------- Fotoband ---------- */
.fotoband { position: relative; min-height: min(70svh, 640px); display: grid; align-items: center; color: var(--wit); isolation: isolate; }
.fotoband .foto { position: absolute; inset: 0; z-index: -1; }
.fotoband::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(21, 50, 41, .45); }
.fotoband__inhoud { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; padding-block: var(--ruimte); }
.fotoband h2 { color: var(--wit); max-width: 16ch; }
.fotoband p { color: #eef2ea; }

/* ---------- Mozaïek (sfeerbeelden) ---------- */
.mozaiek { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .mozaiek { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14rem; grid-auto-flow: dense; gap: 1rem; } .mozaiek .groot { grid-column: span 2; grid-row: span 2; } .mozaiek .hoog { grid-row: span 2; } .mozaiek .breed { grid-column: span 2; } }
.mozaiek li { margin: 0; }
.mozaiek button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mozaiek .foto { height: 100%; aspect-ratio: auto; }
@media (max-width: 699px) { .mozaiek .foto { aspect-ratio: 1; } }
.mozaiek img { transition: transform 1s var(--ease-uit); }
.mozaiek button:hover img { transform: scale(1.03); }
.lichtbak { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh; }
.lichtbak::backdrop { background: rgba(21, 50, 41, .92); }
.lichtbak img { max-width: min(96vw, 1400px); max-height: 88vh; width: auto; height: auto; margin: 0 auto; }
.lichtbak__balk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--sage-50); padding: .75rem .25rem 0; font-size: .95rem; }
.lichtbak__balk button { background: none; border: 1px solid rgba(251, 251, 248, .5); color: inherit; border-radius: 2px; padding: .5em .9em; cursor: pointer; font: inherit; }
.lichtbak__balk button:hover { border-color: var(--goud-licht); color: var(--goud-licht); }

/* ---------- Prijslijst (arrangementen, tickets) ---------- */
.prijsregel { display: flex; align-items: baseline; gap: .75rem; font-family: var(--font-kop); font-size: var(--maat-2); margin: 0 0 .4rem; }
.prijsregel::after { content: ''; flex: 1; border-bottom: 1px dotted var(--goud-lijn); order: 1; transform: translateY(-.3em); }
.prijsregel .bedrag { order: 2; white-space: nowrap; }

/* ---------- Kaartblok (één licht paneel op groen, zoals een kaart op tafel) ---------- */
.paneel { background: var(--wit); color: var(--inkt); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--goud-lijn); }
.paneel h2, .paneel h3 { color: var(--inkt); }
.paneel > :last-child { margin-bottom: 0; }

/* ---------- Formulier ---------- */
.formulier { display: grid; gap: 1rem; max-width: 40rem; }
.formulier label { display: grid; gap: .35rem; font-size: var(--maat-0); font-weight: 500; }
.formulier input, .formulier textarea, .formulier select { font: inherit; padding: .75em .9em; border: 1px solid var(--sage-300); border-radius: 2px; background: var(--wit); color: var(--inkt); width: 100%; }
.formulier input::placeholder, .formulier textarea::placeholder { color: #5f6f67; }
.formulier input:focus, .formulier textarea:focus, .formulier select:focus { outline: 2px solid var(--goud); outline-offset: 1px; border-color: var(--goud); }
.formulier .rij { display: grid; gap: 1rem; }
@media (min-width: 560px) { .formulier .rij { grid-template-columns: 1fr 1fr; } }

/* ---------- Iframe ---------- */
.inbed { border: 1px solid var(--goud-lijn); background: var(--wit); }
.inbed iframe { display: block; width: 100%; border: 0; min-height: 720px; }

/* ---------- Voet ---------- */
.voet { background: var(--groen-900); color: #d5dfd6; margin-top: 0; }
.voet a { color: inherit; text-decoration: none; }
.voet a:hover { color: var(--goud-licht); }
.voet__boven { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; padding: var(--ruimte-klein) 0; display: grid; gap: 2.5rem 3rem; border-bottom: 1px solid rgba(220, 194, 114, .3); }
@media (min-width: 760px) { .voet__boven { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.voet h2 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-tekst); font-weight: 600; color: var(--goud-licht); margin-bottom: 1rem; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin: 0 0 .4rem; }
.voet p { margin: 0 0 .5rem; max-width: 30ch; }
.voet__merk .embleem { width: 118px; height: 110px; display: block; margin-bottom: 1.25rem; background: var(--goud-licht); -webkit-mask: url('/img/logo-mask.png') center / contain no-repeat; mask: url('/img/logo-mask.png') center / contain no-repeat; }
.voet .week { max-width: 22rem; }
.voet .week li { padding: .4rem .1rem .3rem; min-width: 2.4rem; }
.voet .week .dag { font-size: 1.1rem; color: var(--wit); }
.voet .week li.is-dicht .dag { color: #a9b8ad; }
.voet .week .tijd { font-size: .7rem; }
.voet__onder { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .85rem; color: #a9b8ad; }
.voet__onder p { margin: 0; max-width: none; }
@media (max-width: 799px) { .voet__onder { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }

/* ---------- Mobiele reserveerbalk ---------- */
.balk-reserveren { display: none; }
@media (max-width: 799px) {
  .balk-reserveren { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(243, 245, 238, .96); border-top: 1px solid var(--sage-200); backdrop-filter: blur(8px); }
  .balk-reserveren .knop { width: 100%; }
}

/* ---------- Beweging ---------- */
html.anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-uit), transform .9s var(--ease-uit); transition-delay: calc(var(--i, 0) * 90ms); }
html.anim .reveal.zichtbaar { opacity: 1; transform: none; }
html.anim .hero__foto img { animation: hero-in 1.8s var(--ease-uit) both; }
html.anim .hero h1, html.anim .hero .hero__tekst, html.anim .hero .vandaag, html.anim .hero .knoppen { animation: rise .9s var(--ease-uit) both; }
html.anim .hero .vandaag { animation-delay: .15s; }
html.anim .hero h1 { animation-delay: .25s; }
html.anim .hero .hero__tekst { animation-delay: .4s; }
html.anim .hero .knoppen { animation-delay: .55s; }
@keyframes hero-in { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { opacity: 1; transform: none; transition: none; }
  html.anim .hero__foto img, html.anim .hero h1, html.anim .hero .hero__tekst, html.anim .hero .vandaag, html.anim .hero .knoppen { animation: none; }
  html { scroll-behavior: auto; }
  .waaier a, .waaier li, .wegwijzer .foto img, .mozaiek img, .knop { transition: none; }
}

/* ---------- Openingstijden als lijst ---------- */
.uren { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.5rem; margin: 0 0 1.25rem; max-width: 26rem; }
.uren dt, .uren dd { margin: 0; padding: .45rem 0; border-top: 1px solid var(--goud-lijn-zacht); }
.uren dt { font-weight: 500; }
.uren dd { color: var(--inkt); }
.uren .is-dicht dt, .uren .is-dicht dd, .uren dt.is-dicht, .uren dd.is-dicht { color: var(--inkt-zacht); }
.uren dt:first-of-type, .uren dd:first-of-type { border-top: 0; }
.uren dt:last-of-type, .uren dd:last-of-type { border-bottom: 1px solid var(--goud-lijn-zacht); }
.sectie--groen .uren dd, .sectie--nacht .uren dd, .voet .uren dd { color: var(--wit); }
.sectie--groen .uren dt.is-dicht, .sectie--groen .uren dd.is-dicht, .sectie--nacht .uren dt.is-dicht, .sectie--nacht .uren dd.is-dicht, .voet .uren dt.is-dicht, .voet .uren dd.is-dicht { color: #a9b8ad; }
.voet .uren { max-width: 20rem; font-size: .95rem; }
.voet .uren dt, .voet .uren dd { padding: .3rem 0; }

/* ---------- USP-strook ---------- */
.usps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 0; }
.usps li { margin: 0; display: flex; align-items: center; font-family: var(--font-kop); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); line-height: 1.2; padding: 0 clamp(.8rem, 1.8vw, 1.6rem); text-align: center; }
.usps li + li::before { content: ''; width: .4em; height: .4em; border-radius: 50%; background: var(--goud); margin-right: clamp(.8rem, 1.8vw, 1.6rem); flex: none; }
@media (max-width: 700px) { .usps { flex-direction: column; align-items: center; gap: .5rem; } .usps li + li::before { display: none; } .usps li { padding: 0; } }

/* ---------- Duoblok: beeld naast tekst, om en om ---------- */
.duo { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--goud-lijn); }
.duo:first-of-type { border-top: 0; padding-top: 0; }
.duo:last-of-type { padding-bottom: 0; }
.duo__beeld { max-width: 26rem; }
.duo__beeld .foto { aspect-ratio: 4 / 5; }
.duo__beeld .foto--4x3 { aspect-ratio: 4 / 3; }
.duo__tekst > :last-child { margin-bottom: 0; }
.duo__tekst h2, .duo__tekst h3 { margin-bottom: .4em; }
@media (min-width: 800px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .duo--omgekeerd .duo__beeld { order: 2; justify-self: end; }
}