/* ==========================================================
   't Lusthof Koksijde · design concept
   Palette uit het pand: plint-groen, vakwerk-crème, messing lantaarn,
   krijtbord aan de deur, baksteen.
   ========================================================== */

:root {
  --groen: #1f3a2f;        /* plint */
  --groen-diep: #142720;
  --groen-zacht: #2c4c3f;
  --creme: #efe6d3;        /* vakwerk */
  --papier: #f7f2e8;
  --inkt: #1b1a16;
  --inkt-zacht: #57534a;
  --messing: #c69a55;      /* lantaarn */
  --messing-licht: #e0bf86;
  --baksteen: #a4472b;
  --krijt: #ecebe4;
  --bord: #232824;

  --f-display: "Brygada 1918", Georgia, serif;
  /* vier kopmaten: XL alleen de hero op home, L paginatitels en de slotvraag, M sectiekoppen, S gerechtnamen en kaartjes */
  --t-l: clamp(40px, 5.8vw, 84px);
  --t-m: clamp(32px, 4.2vw, 60px);
  --t-s: clamp(22px, 2.1vw, 30px);
  --f-sans: "Jost", "Futura", system-ui, sans-serif;
  --f-hand: "Caveat", "Segoe Print", cursive;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--messing); color: var(--groen-diep); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: var(--d-weight, 600);
  line-height: var(--d-lh, .98);
  letter-spacing: var(--d-track, -.01em);
  margin: 0;
}
.display em { font-style: normal; }
.h-xl { font-size: clamp(64px, 11vw, 176px); }
.h-l  { font-size: clamp(48px, 7vw, 110px); }
.h-m  { font-size: clamp(38px, 4.6vw, 68px); line-height: .95; }
.h-s  { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; }

.label {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 112;
}
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
/* een blaadje uit het logo voor elk label, in de kleur van het label */
.eyebrow::before {
  content: ""; flex: none; width: 19px; aspect-ratio: 321 / 252; background: currentColor; opacity: .85; transform: translateY(-1px);
  -webkit-mask: url("../img/blad-1.png") center / contain no-repeat;
  mask: url("../img/blad-1.png") center / contain no-repeat;
}
.hand { font-family: var(--f-hand); font-weight: 500; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 34em; }
.muted { color: var(--inkt-zacht); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--messing); --fg: var(--groen-diep); --bd: var(--messing);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  font-variation-settings: "wdth" 110;
  text-decoration: none; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn .roll { display: inline-grid; overflow: hidden; line-height: 1.3em; }
.btn .roll span { grid-area: 1 / 1; display: block; transition: transform .45s var(--ease); }
.btn .roll span + span { transform: translateY(110%); }
.btn:hover .roll span:first-child { transform: translateY(-110%); }
.btn:hover .roll span + span { transform: translateY(0); }
.btn:hover { --bg: var(--messing-licht); --bd: var(--messing-licht); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--ghost { --bg: transparent; --fg: currentColor; --bd: currentColor; }
.btn--ghost:hover { --bg: currentColor; }
.btn--ghost:hover .roll, .btn--ghost:hover svg { color: var(--papier); }
.on-dark .btn--ghost:hover .roll, .on-dark .btn--ghost:hover svg { color: var(--groen-diep); }
.btn--groen { --bg: var(--groen); --fg: var(--creme); --bd: var(--groen); }
.btn--groen:hover { --bg: var(--groen-diep); --bd: var(--groen-diep); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 500; letter-spacing: 0; /* tekstlinks in zinsletters; hoofdletters zijn voor labels en knoppen */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.link-arrow svg { width: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- status marquee (C3) ---------- */
.status-bar {
  background: var(--groen-diep); color: var(--creme);
  height: 36px; overflow: hidden; position: relative; z-index: 60;
  display: flex; align-items: center;
}
.status-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.status-track span { display: inline-flex; align-items: center; gap: 12px; padding-right: 48px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fbf8e; box-shadow: 0 0 0 4px rgba(127,191,142,.18); }
.is-closed .status-dot { background: var(--baksteen); box-shadow: 0 0 0 4px rgba(164,71,43,.25); }
.leaf { width: 14px; height: 14px; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(31,58,47,.1);
  transition: transform .45s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.nav { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; width: 148px; flex: none; }
.brand img { width: 100%; height: auto; }
.nav-links { display: flex; gap: clamp(18px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-phone { text-decoration: none; font-size: 14px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.nav-phone svg { width: 16px; }
.burger { display: none; width: 48px; height: 48px; border: 1px solid rgba(31,58,47,.25); background: transparent; border-radius: 50%; cursor: pointer; place-items: center; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--inkt); position: relative; transition: transform .3s var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--inkt); transition: transform .3s var(--ease); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 70; background: var(--groen); color: var(--creme);
  display: flex; flex-direction: column; padding: 24px var(--gutter) 32px;
  clip-path: circle(0 at calc(100% - 40px) 40px); visibility: hidden;
  transition: clip-path .7s var(--ease), visibility 0s linear .7s;
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; transition: clip-path .7s var(--ease); }
.mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu .mm-top img { width: 130px; }
.mm-close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(239,230,211,.35); background: none; color: var(--creme); font-size: 22px; cursor: pointer; }
.mobile-menu nav { margin: auto 0; display: grid; gap: 4px; }
.mobile-menu nav a { font-family: var(--f-display); font-size: clamp(48px, 13vw, 72px); line-height: 1.05; text-decoration: none; }
.mobile-menu nav a em { color: var(--messing); }
.mm-foot { display: grid; gap: 12px; }

/* ---------- mobile sticky action bar ---------- */
.action-bar {
  display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
  background: var(--groen-diep); border-radius: 999px; padding: 6px;
  box-shadow: 0 18px 40px -12px rgba(20,39,32,.55);
  gap: 6px;
}
.action-bar a { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); }
.action-bar a.primary { background: var(--messing); color: var(--groen-diep); }
.action-bar svg { width: 16px; }
/* op home verborgen zolang de hero in beeld is (assets/js/main.js, initActieBalk) */
.action-bar { transition: transform .5s var(--ease), opacity .35s ease, visibility 0s 0s; }
.action-bar.is-wacht { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .5s var(--ease), opacity .35s ease, visibility 0s .5s; }

/* ---------- arch motif (rondboog van de inkom) ---------- */
.arch { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; position: relative; }
.arch img, .arch video { width: 100%; height: 100%; object-fit: cover; }
.arch-frame { position: relative; }
.arch-frame::after {
  content: ""; position: absolute; inset: -12px; border: 1px solid currentColor; opacity: .3;
  border-radius: 999px 999px calc(var(--radius) + 12px) calc(var(--radius) + 12px); pointer-events: none;
}

/* ---------- sections ---------- */
section { position: relative; }
.pad { padding: clamp(80px, 11vw, 160px) 0; }
.pad-s { padding: clamp(56px, 7vw, 100px) 0; }
.on-dark { background: var(--groen); color: var(--creme); }
.on-dark .muted { color: rgba(239,230,211,.72); }
.on-creme { background: var(--creme); }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.on-dark.grain::before { mix-blend-mode: screen; opacity: .05; }

/* ---------- HOME hero ---------- */
.hero { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 110px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.hero-copy { padding-bottom: clamp(8px, 3vw, 40px); }
.hero-copy .label { color: var(--groen); }
.hero-title { margin: 22px 0 28px; color: var(--groen); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.08em; }
.hero-title .line > span { display: inline-block; }
.hero-title .indent { padding-left: clamp(0px, 9vw, 140px); }
.hero-title em { color: var(--inkt); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 28px 0 34px; font-size: 15px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 16px; color: var(--groen); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { position: relative; color: var(--groen); }
.hero-visual .arch { aspect-ratio: 4 / 5.2; }
.hero-visual .arch img { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.is-loaded .hero-visual .arch img { transform: scale(1); }
.hero-sticker {
  position: absolute; left: -54px; bottom: 56px; width: 148px; height: 148px; border-radius: 50%;
  background: var(--creme); color: var(--groen); display: grid; place-items: center; text-align: center;
  box-shadow: 0 20px 40px -18px rgba(20,39,32,.45);
  animation: spin 26s linear infinite;
}
.hero-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-sticker img { width: 64px; animation: spin 26s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-note { position: absolute; right: -6px; top: 18%; transform: rotate(6deg); background: var(--bord); color: var(--krijt); padding: 14px 18px 12px; border-radius: 6px; font-size: 26px; line-height: 1; box-shadow: 0 12px 28px -12px rgba(0,0,0,.5); border: 5px solid #6b4a2e; }

/* ---------- quick reservation bar ---------- */
.quickres {
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--groen); color: var(--creme); border-radius: 22px;
  display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; align-items: stretch; gap: 0;
  padding: 10px; position: relative; z-index: 2;
}
.quickres .qr-title { padding: 14px 26px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(239,230,211,.15); }
.quickres .qr-title strong { font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; font-size: 28px; line-height: 1; }
.qr-field { padding: 12px 22px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(239,230,211,.15); }
.qr-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--messing-licht); }
.qr-field select {
  background: transparent; border: 0; color: var(--creme); font-size: 18px; padding: 4px 0; width: 100%; outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer; color-scheme: dark;
}
.qr-field option { color: var(--inkt); }
.quickres .btn { height: auto; min-height: 64px; border-radius: 14px; }

/* ---------- intro ---------- */
.intro-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.intro-grid .h-m em { color: var(--messing); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid currentColor; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- chalkboard (signature) ---------- */
.bord-wrap { position: relative; }
.bord {
  position: relative; background: var(--bord); color: var(--krijt);
  border: clamp(12px, 1.6vw, 22px) solid #6b4a2e;
  border-image: linear-gradient(135deg, #8a6240, #5a3c24 30%, #7b5636 55%, #4d331f) 1;
  box-shadow: inset 0 0 120px rgba(0,0,0,.55), 0 40px 80px -40px rgba(0,0,0,.6);
  padding: clamp(28px, 5vw, 72px) clamp(22px, 5vw, 80px);
  overflow: hidden;
}
.bord::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.06), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bord .chalk { font-family: var(--f-hand); color: var(--krijt); text-shadow: 0 0 1px rgba(236,235,228,.6), 0 0 8px rgba(236,235,228,.15); }
.bord-title { font-size: clamp(54px, 8vw, 112px); line-height: .9; margin: 0; text-align: center; }
.bord-sub { text-align: center; font-size: clamp(22px, 2.4vw, 30px); opacity: .8; margin: 8px 0 clamp(24px, 4vw, 48px); }
.bord-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; gap: clamp(10px, 1.6vw, 20px); }
.bord-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; }
.bord-list li small { display: block; font-size: .6em; opacity: .65; margin-top: 2px; }
.bord-list .prijs { font-size: 1.05em; }
.bord-list .tag { display: inline-block; font-size: .5em; border: 1.5px solid var(--krijt); border-radius: 999px; padding: 0 10px; margin-left: 10px; vertical-align: middle; transform: rotate(-4deg); opacity: .85; }
.bord-foot { text-align: center; font-size: clamp(30px, 3.2vw, 44px); margin-top: clamp(24px, 4vw, 44px); }
.bord-divider { display: block; width: 180px; height: 22px; margin: 18px auto; opacity: .7; }
/* schrijf-effect: elke regel wordt "geschreven" van links naar rechts */
.write { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6,.1,.3,1); }
.write.is-written { clip-path: inset(0 -2% 0 0); }

/* ---------- heritage (toen & nu) ---------- */
.heritage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.polaroids { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
/* toen en nu in één raster, zonder vaste hoogte: de oude foto groot linksboven, de foto van vandaag schuin eronder rechts.
   Ze raken elkaar alleen in de witte rand, zodat de Martini-borden en de Kever op de oude foto vrij blijven. */
.polaroid { position: relative; margin: 0; background: #fbf8f1; padding: 12px 12px 54px; box-shadow: 0 30px 60px -28px rgba(20,39,32,.5); }
.polaroid img { width: 100%; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--f-hand); font-size: 26px; color: var(--inkt); }
.polaroid.p-toen { grid-column: 1 / 10; grid-row: 1; transform: rotate(-2.5deg); z-index: 1; }
.polaroid.p-toen img { aspect-ratio: 756/471; }
.polaroid.p-nu { grid-column: 8 / 13; grid-row: 1; margin-top: calc(112% + 8px); transform: rotate(3deg); z-index: 2; }
.polaroid.p-nu img { aspect-ratio: 1; }
/* tablet en gsm: de tekst staat onder de foto's; houd de polaroids op een rustige maat */
@media (max-width: 820px) { .polaroids { max-width: 560px; } }
@media (max-width: 520px) {
  /* gsm: beide foto's breder, en de foto van vandaag pas onder het bijschrift van de oude, zodat dat leesbaar blijft */
  .polaroid figcaption { font-size: 22px; }
  .polaroid.p-toen { grid-column: 1 / 12; }
  .polaroid.p-nu { grid-column: 6 / 13; margin-top: calc(122% - 6px); }
}
.heritage-copy .h-m em { color: var(--baksteen); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid rgba(31,58,47,.2); }
.facts div { padding: 22px 18px 0 0; }
.facts strong { display: block; font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--groen); }
.facts span { font-size: 14px; color: var(--inkt-zacht); }

/* ---------- sfeer band ---------- */

/* ---------- cadeaubon ---------- */
.bon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.bon {
  aspect-ratio: 1.75; border-radius: 18px; background: var(--groen); color: var(--creme);
  padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden; transform: rotate(-3deg);
  box-shadow: 0 40px 70px -30px rgba(20,39,32,.6);
  transition: transform .6s var(--ease);
}
.bon:hover { transform: rotate(0deg) translateY(-6px); }
.bon::after { content: ""; position: absolute; right: 26%; top: -10%; bottom: -10%; border-left: 2px dashed rgba(239,230,211,.25); }
.bon .bon-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bon .bon-top img { width: 140px; }
.bon .bon-amount { font-family: var(--f-display); font-size: clamp(48px, 6vw, 84px); line-height: 1; }
.bon .bon-huis { position: absolute; right: 4%; bottom: 8%; width: 18%; opacity: .55; }
.amounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(31,58,47,.3); background: transparent;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--groen); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--groen); border-color: var(--groen); color: var(--creme); }
.chip:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* ---------- page hero (subpages) ---------- */
.page-hero { padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 90px); overflow: hidden; }
.page-hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.page-hero .display { margin: 18px 0 24px; }
.page-hero .display em { color: var(--messing); }
.page-hero .arch { aspect-ratio: 3/4; max-height: 520px; }
.page-hero .huis-deco { width: min(340px, 100%); margin-left: auto; opacity: .95; }

/* ---------- menu page ---------- */
.menu-nav {
  position: sticky; top: var(--header-h); z-index: 30; background: var(--papier);
  border-bottom: 1px solid rgba(31,58,47,.12); transition: top .45s var(--ease);
}
.header-hidden .menu-nav { top: 0; }
.menu-nav .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; scrollbar-width: none; }
.menu-nav .wrap::-webkit-scrollbar { display: none; }
.menu-nav a { flex: none; text-decoration: none; }
.menu-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 110px); }
.menu-aside { position: sticky; top: calc(var(--header-h) + 100px); align-self: start; }
.menu-aside .arch { aspect-ratio: 3/4; margin-bottom: 24px; }
.legend { display: grid; gap: 10px; font-size: 14px; margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.diet { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--groen); vertical-align: middle; }
.menu-cat { scroll-margin-top: calc(var(--header-h) + 90px); padding-bottom: clamp(56px, 7vw, 96px); }
.menu-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--groen); padding-bottom: 14px; margin-bottom: 8px; }
.menu-cat-head .display em { color: var(--messing); }
.menu-cat-head p { margin: 0; color: var(--inkt-zacht); font-size: 15px; text-align: right; }
.dish { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid rgba(31,58,47,.12); }
.dish h3 { margin: 0; font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; font-size: clamp(25px, 2.2vw, 31px); line-height: 1.1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dish .price { font-family: var(--f-display); font-size: clamp(24px, 2vw, 30px); line-height: 1.1; color: var(--groen); white-space: nowrap; }
.dish .price small { font-family: var(--f-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); }
.dish p { grid-column: 1 / -1; margin: 0; color: var(--inkt-zacht); font-size: 15.5px; max-width: 42em; }
.dish .new { font-family: var(--f-hand); font-size: 22px; color: var(--baksteen); transform: rotate(-4deg); display: inline-block; }
.drinks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); }
.drinks .dish { grid-template-columns: 1fr auto; }
.note-card { background: var(--creme); border-radius: var(--radius); padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start; }
.note-card svg { width: 26px; flex: none; color: var(--groen); margin-top: 3px; }
.note-card p { margin: 0; font-size: 15.5px; }

/* ---------- suggesties ---------- */
.week-strip { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.sugg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.sugg-card { background: var(--papier); border-radius: var(--radius); padding: 30px; border: 1px solid rgba(31,58,47,.12); display: flex; flex-direction: column; gap: 14px; }
.sugg-card .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--groen); color: var(--creme); display: grid; place-items: center; }
.sugg-card .icon svg { width: 22px; }
.sugg-card h3 { margin: 0; font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; font-size: 30px; line-height: 1.05; }
.sugg-card p { margin: 0; color: var(--inkt-zacht); font-size: 15.5px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.c-block { padding: 26px 0; border-top: 1px solid rgba(31,58,47,.18); display: grid; grid-template-columns: 160px 1fr; gap: 16px; }
.c-block .label { color: var(--groen); padding-top: 6px; }
.c-block p { margin: 0; }
.c-big { font-family: var(--f-display); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; text-decoration: none; }
.c-big:hover { color: var(--groen); }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours td { padding: 9px 0; border-bottom: 1px dashed rgba(31,58,47,.18); }
.hours td:last-child { text-align: right; }
.hours tr.today td { font-weight: 600; color: var(--groen); }
.hours tr.today td:first-child::after { content: " · vandaag"; font-family: var(--f-hand); font-weight: 500; font-size: 20px; color: var(--baksteen); }
.hours .closed { color: var(--inkt-zacht); font-style: italic; }
.map-card { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 460px; background: var(--creme); }
.illu-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card .illu-map { object-fit: cover; }
.map-pin { position: absolute; left: 16px; bottom: 16px; right: 16px; background: var(--groen); color: var(--creme); border-radius: 12px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--groen); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 54px; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(31,58,47,.25);
  background: var(--papier); outline: none; transition: border-color .2s, box-shadow .2s; font-size: 16px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--groen); box-shadow: 0 0 0 4px rgba(31,58,47,.12); }
.field .err { font-size: 13px; color: var(--baksteen); display: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--baksteen); }
.field.invalid .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq details { border-top: 1px solid rgba(31,58,47,.18); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid rgba(31,58,47,.18); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-sans); font-size: 24px; transition: transform .3s var(--ease); color: var(--groen); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--inkt-zacht); max-width: 46em; }

/* ---------- footer ---------- */
.site-footer { background: var(--groen-diep); color: var(--creme); padding: clamp(64px, 8vw, 110px) 0 32px; position: relative; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.footer-top .logo { width: 190px; margin-bottom: 22px; }
.footer-top h4 { margin: 0 0 16px; }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-top a { text-decoration: none; opacity: .85; }
.footer-top a:hover { opacity: 1; color: var(--messing-licht); }
.footer-top p { margin: 0 0 8px; opacity: .85; }
.footer-huis { position: absolute; right: -2%; bottom: -6%; width: min(46vw, 560px); opacity: .07; pointer-events: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(239,230,211,.14); padding-top: 24px; font-size: 13.5px; opacity: .7; }
.footer-bottom a { text-decoration: none; }
.footer-hours { font-size: 15px; display: grid; gap: 4px; }
.footer-hours div { display: flex; justify-content: space-between; gap: 18px; opacity: .85; }

/* ---------- intro loader (home) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--groen); display: grid; place-items: center;
  transition: clip-path 1s cubic-bezier(.7,0,.2,1); clip-path: inset(0 0 0 0);
}
.intro.is-done { clip-path: inset(0 0 100% 0); }
.intro-inner { display: grid; justify-items: center; gap: 26px; }
.intro-huis { width: min(300px, 60vw); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; animation: draw 1.5s .2s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes draw { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.intro-line { color: var(--creme); font-family: var(--f-display); font-size: clamp(26px, 3vw, 38px); opacity: 0; transform: translateY(14px); animation: up .8s 1.25s var(--ease) forwards; text-align: center; }
.intro-line em { color: var(--messing); }
.intro-skip { position: absolute; bottom: 28px; background: none; border: 0; color: rgba(239,230,211,.6); cursor: pointer; }
@keyframes up { to { opacity: 1; transform: none; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; }
.split .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.split.is-in .line > span { transform: none; }
.split.is-in .line:nth-child(2) > span { transition-delay: .08s; }
.split.is-in .line:nth-child(3) > span { transition-delay: .16s; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 95;
  background: var(--inkt); color: var(--creme); padding: 14px 22px; border-radius: 999px; font-size: 15px;
  transition: transform .5s var(--ease), visibility 0s .5s; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); max-width: calc(100vw - 32px); visibility: hidden;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .5s var(--ease); }
.concept-badge { position: fixed; right: 16px; bottom: 16px; z-index: 44; background: var(--messing); color: var(--groen-diep); border-radius: 999px; padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(0,0,0,.4); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: grid; }
  .quickres { grid-template-columns: 1fr 1fr; }
  .quickres .qr-title { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(239,230,211,.15); padding: 14px 18px; }
  .qr-field { border-right: 0; border-bottom: 1px solid rgba(239,230,211,.15); }
  .quickres .btn { grid-column: 1 / -1; margin-top: 8px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .menu-layout { grid-template-columns: 1fr; }
  .menu-aside { position: relative; top: 0; display: none; }
  .sugg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  :root { --header-h: 70px; }
  .brand { width: 118px; }
  .nav-cta .btn { display: none; }
  .hero-grid, .intro-grid, .heritage-grid, .bon-grid, .contact-grid, .page-hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 520px; width: 100%; margin: 0 auto; }
  .hero-visual .arch { aspect-ratio: 4 / 4.4; }
  .hero-sticker { width: 108px; height: 108px; left: -6px; bottom: -20px; }
  .hero-sticker img { width: 46px; }
  .hero-note { font-size: 20px; right: 4px; }
  .page-hero .arch, .page-hero .huis-deco { display: none; }
  .drinks { grid-template-columns: 1fr; }
  .sugg-grid { grid-template-columns: 1fr; }
  .c-block { grid-template-columns: 1fr; gap: 6px; }
  .form-row { grid-template-columns: 1fr; }
  .action-bar { display: flex; }
  .site-footer { padding-bottom: 96px; }
  .concept-badge { bottom: 84px; }
  .bon { transform: rotate(-2deg); }
  .facts { grid-template-columns: 1fr 1fr 1fr; }
  .facts strong { font-size: 28px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .quickres { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .bord-list li { font-size: 25px; }
  .menu-cat-head { flex-direction: column; align-items: flex-start; }
  .menu-cat-head p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .split .line > span { transform: none; }
  .write { clip-path: none; }
  .intro { display: none; }
}

/* hero schaal fine-tune */
.hero-title.h-xl { font-size: clamp(54px, 7.2vw, 122px); }
.split .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.08em; }
.split .line > span { display: inline-block; }

@media (max-width: 820px) {
  .hero-visual { max-width: 340px; }
  .hero-visual .arch { aspect-ratio: 1 / 1.05; }
  .hero-note { font-size: 18px; top: 10%; }
  .concept-badge { display: none; }
}

.hero-title .indent { padding-left: clamp(0px, 7vw, 110px); }

/* hero-titel schaal */
.hero-title.h-xl { font-size: clamp(46px, 5.6vw, 96px); }
.hero-title .indent { padding-left: clamp(0px, 5vw, 80px); }

/* subpagina-hero's: titelschaal + foto nooit te smal */
.page-hero h1.h-xl { font-size: clamp(48px, 6.2vw, 104px); }
.page-hero h1.h-l { font-size: clamp(44px, 5.4vw, 88px); }
.page-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.page-hero .arch { width: 100%; }
@media (max-width: 820px) { .page-hero-grid { grid-template-columns: 1fr; } }

/* infobalk "gewoon binnenlopen" */
.qr-k { display: block; }
.qr-v { font-size: 17px; padding-top: 4px; }
.walkin .btn { text-decoration: none; }

/* uitbaters in de hero */
.hosts { list-style: none; margin: 26px 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.hosts li { display: flex; align-items: center; gap: 12px; }
.hosts-init { width: 46px; height: 46px; border-radius: 50%; background: var(--groen); color: var(--creme); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: .02em; flex: none; }
.hosts b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.15; color: var(--inkt); }
.hosts small { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); }
/* kortere hero-kop: twee regels, iets groter */
.hero-title.h-xl { font-size: clamp(46px, 5.6vw, 96px); }

/* ==========================================================
   HERO · foto over de volle breedte + motion
   ========================================================== */
.hero-full {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 36px);
  margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h);
  display: flex; align-items: flex-end;
  background: var(--groen-diep); color: var(--creme);
}
.hero-media {
  position: absolute; inset: 0; z-index: -2; will-change: transform, clip-path;
  /* start als rondboog (zoals de inkom), opent naar het volle beeld */
  clip-path: inset(14% 34% 0 34% round 50vw 50vw 0 0);
  transition: clip-path 1.7s cubic-bezier(.7, 0, .2, 1) .15s;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(1.28); transition: transform 2.6s cubic-bezier(.2, .7, .1, 1) .15s;
}
.is-loaded .hero-media { clip-path: inset(0 0 0 0 round 0 0 0 0); }
.is-loaded .hero-media img { transform: scale(1.04); }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,39,32,.88) 0%, rgba(20,39,32,.62) 38%, rgba(20,39,32,.12) 72%, rgba(20,39,32,0) 100%),
    linear-gradient(0deg, rgba(20,39,32,.75) 0%, rgba(20,39,32,0) 40%),
    linear-gradient(180deg, rgba(20,39,32,.55) 0%, rgba(20,39,32,0) 22%);
  opacity: 0; transition: opacity 1.2s ease .9s;
}
.is-loaded .hero-shade { opacity: 1; }
.hero-inner { width: 100%; padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(88px, 13vh, 150px); }
.hero-full .hero-copy { max-width: 700px; padding-bottom: 0; will-change: transform, opacity; }
.hero-full .eyebrow { color: var(--messing-licht); }
.hero-full .hero-title { color: var(--creme); margin: 22px 0 26px; text-shadow: 0 2px 30px rgba(10,20,16,.25); }
.hero-full .lead { color: rgba(239,230,211,.9); max-width: 36em; }
.hero-full .hosts b { color: var(--creme); }
.hero-full .hosts small { color: rgba(239,230,211,.7); }
.hero-full .hosts-init { background: var(--messing); color: var(--groen-diep); }
.hero-full .btn--ghost { color: var(--creme); }
.hero-full .btn--ghost:hover .roll, .hero-full .btn--ghost:hover svg { color: var(--groen-diep); }

/* gelaagde intro van de tekst */
.hero-fade { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.is-loaded .hero-fade { opacity: 1; transform: none; }
.is-loaded .hero-copy .eyebrow.hero-fade { transition-delay: .9s; }
.is-loaded .hero-copy .lead.hero-fade { transition-delay: 1.35s; }
.is-loaded .hero-copy .hosts.hero-fade { transition-delay: 1.5s; }
.is-loaded .hero-copy .hero-actions.hero-fade { transition-delay: 1.65s; }
.hero-full .split .line > span { transition-duration: 1.2s; }
.hero-full .split.is-in .line:nth-child(1) > span { transition-delay: 1s; }
.hero-full .split.is-in .line:nth-child(2) > span { transition-delay: 1.1s; }
.hero-full .split.is-in .line:nth-child(3) > span { transition-delay: 1.2s; }
.hero-full .split.is-in .line:nth-child(4) > span { transition-delay: 1.3s; }

/* sticker, krijtbordje en scroll-hint over de foto */
.hero-full .hero-sticker { left: auto; right: clamp(16px, 4vw, 56px); bottom: clamp(28px, 7vh, 72px); opacity: 0; transition: opacity .8s ease 2s; }
.hero-full .hero-note { right: clamp(16px, 7vw, 110px); top: calc(var(--header-h) + 12vh); opacity: 0; transform: rotate(6deg) translateY(-14px); transition: opacity .8s ease 2.1s, transform .8s var(--ease) 2.1s; }
.is-loaded .hero-full .hero-sticker { opacity: 1; }
.is-loaded .hero-full .hero-note { opacity: 1; transform: rotate(6deg); }
.hero-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border: 1.5px solid rgba(239,230,211,.6); border-radius: 14px; display: grid; justify-items: center; padding-top: 7px; opacity: 0; transition: opacity .8s ease 2.2s; }
.is-loaded .hero-scroll { opacity: 1; }
.hero-scroll span { width: 3px; height: 8px; border-radius: 2px; background: var(--creme); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* infobalk schuift half over de foto */
.walkin-wrap { position: relative; z-index: 3; padding-bottom: clamp(56px, 7vw, 96px); }
.walkin-wrap .quickres { margin-top: -46px; box-shadow: 0 30px 60px -30px rgba(20,39,32,.55); }

/* header transparant zolang hij over de foto ligt */
.brand .logo-light { display: none; }
.site-header.is-over { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--creme); }
.site-header.is-over .brand .logo-dark { display: none; }
.site-header.is-over .brand .logo-light { display: block; }
.site-header.is-over .nav-cta .btn--groen { --bg: var(--messing); --fg: var(--groen-diep); --bd: var(--messing); }
.site-header.is-over .burger { border-color: rgba(239,230,211,.5); }
.site-header.is-over .burger span, .site-header.is-over .burger span::before, .site-header.is-over .burger span::after { background: var(--creme); }
.site-header { transition: transform .45s var(--ease), background-color .4s ease, color .4s ease; }

@media (max-width: 820px) {
  .hero-media { clip-path: inset(12% 22% 0 22% round 50vw 50vw 0 0); }
  .hero-media img { object-position: 42% 40%; }
  .hero-shade { background: linear-gradient(0deg, rgba(20,39,32,.92) 0%, rgba(20,39,32,.72) 45%, rgba(20,39,32,.2) 75%, rgba(20,39,32,.45) 100%); }
  .hero-inner { padding-bottom: 96px; }
  .hero-full .hero-sticker { width: 92px; height: 92px; top: calc(var(--header-h) + 18px); bottom: auto; }
  .hero-full .hero-sticker img { width: 40px; }
  .hero-full .hero-note { display: none; }
  .hero-scroll { display: none; }
}
@media (max-width: 820px) {
  .hero-full .hero-sticker { display: none; }
  .hero-shade { background: linear-gradient(0deg, rgba(20,39,32,.96) 0%, rgba(20,39,32,.84) 55%, rgba(20,39,32,.5) 82%, rgba(20,39,32,.6) 100%); }
  .hero-inner { padding-top: 24px; padding-bottom: 76px; }
  .hero-full .hero-title { margin: 14px 0 16px; }
  .hero-full .lead { font-size: 15.5px; line-height: 1.5; }
  .hero-full .hosts { flex-wrap: nowrap; gap: 14px; margin: 18px 0 22px; }
  .hero-full .hosts-init { width: 34px; height: 34px; font-size: 12px; }
  .hero-full .hosts b { font-size: 15px; }
  .hero-full .hosts small { font-size: 10px; letter-spacing: .12em; }
}
.hosts small { white-space: nowrap; }
@media (max-width: 820px) { .hero-full .hosts li { gap: 8px; } .hero-full .hosts small { letter-spacing: .08em; } }

/* ---------- extra motion-lagen hero ---------- */
.hero-kb { position: absolute; inset: 0; will-change: transform; }
/* Ken Burns: trage, continue drift na de intro */
.is-loaded .hero-kb { animation: kenburns 26s ease-in-out 2.6s infinite alternate; }
@keyframes kenburns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.6%, -1.2%, 0); }
}
/* lantaarngloed boven de deur */
.hero-glow {
  position: absolute; left: 50%; top: 30%; width: 46vmax; height: 46vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,196,110,.38) 0%, rgba(255,170,80,.14) 32%, rgba(255,160,70,0) 62%);
  mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity 1.4s ease 1.6s;
}
.is-loaded .hero-glow { opacity: 1; animation: flicker 5.5s ease-in-out 3s infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; } 18% { opacity: .82; } 22% { opacity: .95; } 47% { opacity: .78; } 52% { opacity: 1; } 76% { opacity: .88; }
}
/* titel: omhoog én scherp uit een waas */
.hero-full .split .line > span { filter: blur(10px); transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.hero-full .split.is-in .line > span { filter: blur(0); }
/* muisparallax (waarden via JS) */
.hero-full { --mx: 0; --my: 0; }
.hero-kb img { translate: calc(var(--mx) * -14px) calc(var(--my) * -10px); transition: transform 2.6s cubic-bezier(.2,.7,.1,1) .15s, translate .6s ease-out; }
.hero-full .hero-note { translate: calc(var(--mx) * 18px) calc(var(--my) * 12px); transition: opacity .8s ease 2.1s, transform .8s var(--ease) 2.1s, translate .6s ease-out; }
.hero-full .hero-sticker { translate: calc(var(--mx) * 24px) calc(var(--my) * 16px); }
@media (max-width: 820px) { .hero-glow { top: 22%; width: 80vmax; height: 80vmax; } }
@media (prefers-reduced-motion: reduce) { .hero-kb, .hero-glow { animation: none !important; } .hero-full .split .line > span { filter: none; } }

/* ---------- menu: zachte blaadjes uit het logo op de achtergrond ---------- */
.menu-sheet { overflow: hidden; }
.menu-sheet .menu-layout { position: relative; z-index: 1; }
.menu-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.menu-leaves img {
  position: absolute; height: auto; opacity: var(--o, .07);
  transform: rotate(var(--r, 0deg));
  animation: leafdrift 18s ease-in-out infinite alternate;
}
@keyframes leafdrift {
  0%   { transform: rotate(var(--r, 0deg)) translate3d(0, 0, 0); }
  100% { transform: rotate(calc(var(--r, 0deg) + 6deg)) translate3d(8px, -14px, 0); }
}
/* desktop: de linkerkolom (foto) laat de linkerrand vrij; blaadjes iets groter en rechts zichtbaar */
@media (min-width: 1081px) { .menu-leaves img { opacity: calc(var(--o, .07) * .9); } }
/* mobiel: iets kleiner zodat ze de prijzen niet raken */
@media (max-width: 820px) { .menu-leaves img { width: clamp(84px, 26vw, 120px) !important; } }
@media (prefers-reduced-motion: reduce) { .menu-leaves img { animation: none; } }
@media (max-width: 820px) {
  .menu-leaves img { opacity: calc(var(--o, .07) * 1.5); }
  .menu-leaves img.l { translate: 44px 0; }
  .menu-leaves img.r { translate: -40px 0; }
}
/* scroll-icoon boven de infobalk die 46px over de foto valt */
.hero-scroll { bottom: 72px; }

/* ---------- mobiel menu: blaadjes uit het logo ---------- */
.mobile-menu { overflow: hidden; }
.mobile-menu > :not(.mm-leaves) { position: relative; z-index: 1; }
.mm-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mm-leaves img {
  position: absolute; height: auto; opacity: 0;
  transform: rotate(calc(var(--r, 0deg) - 30deg)) translate3d(0, -40px, 0) scale(.85);
  transition: opacity .9s ease var(--d, .3s), transform 1.2s cubic-bezier(.2,.7,.1,1) var(--d, .3s);
}
.mobile-menu.is-open .mm-leaves img {
  opacity: var(--o, .09);
  transform: rotate(var(--r, 0deg)) translate3d(0, 0, 0) scale(1);
  animation: leafdrift 16s ease-in-out 1.6s infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .mobile-menu.is-open .mm-leaves img { animation: none; } }

/* ---------- hamburgerknop: blaadje bij hover en klik ---------- */
.burger { position: relative; overflow: visible; transition: transform .25s var(--ease), background-color .3s ease, border-color .3s ease; }
.burger:hover { background-color: rgba(31,58,47,.06); }
.site-header.is-over .burger:hover { background-color: rgba(239,230,211,.12); }
.burger:active { transform: scale(.9); }
.burger:hover span::before { transform: translateX(3px); }
.burger:hover span::after { transform: translateX(-3px); }

.burger-leaf {
  position: absolute; top: -9px; right: -5px; width: 20px; height: auto; pointer-events: none;
  transform-origin: 20% 90%;
  transform: scale(0) rotate(-70deg);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.burger-leaf.light { display: none; }
.site-header.is-over .burger-leaf.dark { display: none; }
.site-header.is-over .burger-leaf.light { display: block; }
.burger:hover .burger-leaf, .burger:focus-visible .burger-leaf {
  transform: scale(1) rotate(0deg);
  animation: leafsway 1.8s ease-in-out .5s infinite alternate;
}
@keyframes leafsway { from { rotate: -10deg; } to { rotate: 10deg; } }

/* klik: blaadje draait weg en drie kleine blaadjes springen open */
.burger.is-pop .burger-leaf { animation: leafpop .55s cubic-bezier(.2,.7,.1,1) forwards; }
@keyframes leafpop {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  45%  { transform: scale(1.5) rotate(160deg); opacity: 1; }
  100% { transform: scale(0) rotate(320deg); opacity: 0; }
}
.burger-burst { position: absolute; inset: 0; pointer-events: none; }
.burger-burst img {
  position: absolute; left: 50%; top: 50%; width: 14px; height: auto; opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
}
.site-header.is-over .burger-burst img { filter: brightness(0) invert(.92) sepia(.15); }
.burger.is-pop .burger-burst img { animation: leafburst .65s cubic-bezier(.2,.7,.1,1) forwards; }
.burger.is-pop .burger-burst img:nth-child(2) { animation-delay: .04s; }
.burger.is-pop .burger-burst img:nth-child(3) { animation-delay: .08s; }
@keyframes leafburst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--rr)); }
}

/* sluitknop in het menu draait mee */
.mm-close { transition: transform .4s var(--ease), background-color .3s ease; }
.mm-close:hover { transform: rotate(90deg); background-color: rgba(239,230,211,.1); }

@media (prefers-reduced-motion: reduce) {
  .burger:hover .burger-leaf { animation: none; }
  .burger-burst { display: none; }
}
/* mobiel: de foto in de pagina-hero is verborgen, dus ook zijn boogrand */
@media (max-width: 820px) { .page-hero .arch-frame { display: none; } }

/* ==========================================================
   Menuknop v2: het blaadje draait BINNEN de cirkel
   ========================================================== */
.burger { overflow: hidden; }
.burger span { transition: transform .35s var(--ease), opacity .25s ease; }
.burger .burger-leaf {
  top: 50%; left: 50%; right: auto; width: 20px;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  transform: scale(0) rotate(-220deg);
  opacity: 0;
  transition: transform .6s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease;
  animation: none;
}
/* hover / focus / tik: streepjes wijken, blaadje draait de cirkel in */
.burger:hover span, .burger:focus-visible span, .burger:active span, .burger.is-pop span { opacity: 0; transform: scale(.4) rotate(90deg); }
.burger:hover .burger-leaf, .burger:focus-visible .burger-leaf, .burger:active .burger-leaf {
  transform: scale(1) rotate(0deg); opacity: 1;
  animation: leafsway 1.8s ease-in-out .6s infinite alternate;
}
/* klik: één volle draai binnen de cirkel, cirkel pulseert mee */
.burger.is-pop .burger-leaf { opacity: 1; animation: leafspin .6s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes leafspin {
  0%   { transform: scale(1) rotate(0deg); }
  60%  { transform: scale(1.25) rotate(300deg); }
  100% { transform: scale(1.1) rotate(360deg); }
}
.burger.is-pop { animation: ringpulse .6s ease-out; }
@keyframes ringpulse {
  0% { box-shadow: 0 0 0 0 rgba(198,154,85,.55); }
  100% { box-shadow: 0 0 0 12px rgba(198,154,85,0); }
}

/* ==========================================================
   Mobiel menu: items schuiven één voor één binnen
   ========================================================== */
.mobile-menu nav a { display: flex; align-items: center; gap: 14px; overflow: hidden; padding-bottom: .06em; }
.mobile-menu nav .mm-txt {
  display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom;
  transition: transform .7s cubic-bezier(.2, .7, .1, 1), color .25s ease;
}
.mobile-menu.is-open nav .mm-txt { transform: none; transition-delay: calc(.32s + var(--i, 0) * .08s), 0s; }
.mobile-menu nav .mm-leaf { width: 26px; height: auto; opacity: 0; transform: scale(0) rotate(-120deg); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
/* huidige pagina: blaadje draait in, tekst in messing */
.mobile-menu nav a[aria-current="page"] .mm-txt { color: var(--messing-licht); }
.mobile-menu.is-open nav a[aria-current="page"] .mm-leaf { opacity: .9; transform: scale(1) rotate(0deg); transition-delay: .75s; }
/* aantikken: tekst schuift op en het blaadje verschijnt */
.mobile-menu nav a:active .mm-txt, .mobile-menu nav a:hover .mm-txt { transform: translateX(10px); color: var(--messing-licht); transition-delay: 0s; }
.mobile-menu nav a:active .mm-leaf, .mobile-menu nav a:hover .mm-leaf { opacity: .9; transform: scale(1) rotate(0deg); transition-delay: 0s; }
/* logo en knoppen onderaan komen er zacht bij */
.mobile-menu .mm-top img, .mobile-menu .mm-foot { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease); }
.mobile-menu.is-open .mm-top img { opacity: 1; transform: none; transition-delay: .25s; }
.mobile-menu.is-open .mm-foot { opacity: 1; transform: none; transition-delay: .7s; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu nav .mm-txt, .mobile-menu .mm-top img, .mobile-menu .mm-foot { transform: none; opacity: 1; }
  .burger.is-pop, .burger.is-pop .burger-leaf { animation: none; }
}

/* ---------- verlofbalk ---------- */
.verlof-balk { background: var(--baksteen); color: var(--papier); font-size: 15px; line-height: 1.4; }
.verlof-balk .wrap { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 4px 16px; padding-block: 12px; }
.verlof-balk[hidden] { display: none; }
.hours small.keuken { display: block; font-size: 13px; opacity: .7; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--papier); color: var(--groen); padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { left: 8px; }

/* ---------- lopende tekst (juridische pagina's) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); margin: 2em 0 .6em; color: var(--groen); }
.prose p, .prose li { line-height: 1.7; margin: 0 0 1em; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--groen); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(0,0,0,.12); }

/* ---------- statusbalk: geneste spans en hidden ---------- */
.status-track span span { display: inline; gap: 0; padding: 0; }
.status-track [hidden] { display: none; }

/* ---------- contactformulier (Fluent Forms) ----------
   De stijlbladen van de plugin laden niet (inc/formulier.php): dit blok is de volledige opmaak.
   Zelfde maten, kleuren en focusrand als het formulier uit het concept (.form, .field hierboven). */
.fluentform { display: flex; flex-direction: column; }
.fluentform form { order: 2; }
.fluentform fieldset { display: grid; gap: 16px; min-width: 0; }
.fluentform .ff-t-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fluentform .ff-t-cell { min-width: 0; }
.fluentform .ff-el-group { display: grid; gap: 8px; min-width: 0; }
.fluentform .ff-el-input--label label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--groen); }
.fluentform .ff-el-form-control {
  display: block; width: 100%; min-height: 54px; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(31,58,47,.25);
  background: var(--papier); color: var(--inkt); font: inherit; font-size: 16px; line-height: 1.4; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.fluentform .ff-el-form-control:focus { border-color: var(--groen); box-shadow: 0 0 0 4px rgba(31,58,47,.12); }
/* foutmelding onder het veld (de plugin zet ze erbij na een klik op Verstuur) */
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--baksteen); }
.fluentform .error.text-danger { font-size: 13px; line-height: 1.4; color: var(--baksteen); margin-top: 8px; }
.fluentform .ff-el-is-error .ff_tc_checkbox input { outline: 2px solid var(--baksteen); outline-offset: 2px; }
/* vinkje bij de privacyverklaring: het hele label is het tikvlak */
.fluentform .ff_tc_label { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.fluentform .ff_tc_checkbox { display: flex; flex: none; }
.fluentform .ff_tc_checkbox input { width: 22px; height: 22px; margin: 0; accent-color: var(--groen); }
.fluentform .ff_tc_checkbox input:focus-visible { outline: 2px solid var(--groen); outline-offset: 3px; }
.fluentform .ff_t_c a { color: var(--groen); text-underline-offset: 3px; }
.fluentform .ff_submit_btn_wrapper { justify-items: start; }
.fluentform .ff-btn-submit { font-family: inherit; }
.fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--groen); outline-offset: 3px; }
.fluentform .ff_submitting { pointer-events: none; }
.fluentform .ff-btn.disabled { opacity: .65; }
.fluentform .ff-hidden, .fluentform .ff_force_hide { display: none !important; }
/* uitslag: blijft staan, boven het formulier (de plugin zet ze er in de HTML achter) */
.form-note, .ff-message-success, .ff-errors-in-stack .error { padding: 14px 18px; border-radius: 10px; margin: 0 0 20px; }
.form-note.fout, .ff-errors-in-stack .error { background: rgba(164,71,43,.12); color: var(--baksteen); }
.ff-message-success { order: 1; background: rgba(31,58,47,.1); color: var(--groen); }
.ff-message-success p { margin: 0; }
.ff-errors-in-stack { order: 1; display: none; }
.ff-errors-in-stack .error-clear { display: none; }
@media (max-width: 767px) { .fluentform .ff-t-container { grid-template-columns: 1fr; } }

/* ---------- conceptmelding op juridische pagina's ---------- */
.concept-note { padding: 14px 18px; margin: 0 0 24px; border-left: 4px solid var(--messing); border-radius: 10px; background: var(--creme); color: var(--inkt); }

/* ---------- tablet ---------- */
.menu-cat { scroll-margin-top: 140px; }

/* een height-attribuut op de foto (voor de ruimtereservering) mag aspect-ratio niet overrulen */
.polaroid img { height: auto; }


/* "Loop gewoon binnen": 2x2-raster op tablet, het laatste vak over de volle breedte */
@media (min-width: 521px) and (max-width: 1080px) { .quickres .qr-field:last-of-type { grid-column: 1 / -1; } }

/* aanraakdoelen van minstens 44 px op tablet en gsm (desktop blijft ongewijzigd) */
@media (max-width: 1180px), (pointer: coarse) {
  .hero-scroll::after { content: ""; position: absolute; inset: -4px -9px; } /* onzichtbaar tikvlak van 44x50 rond de muisicoon */
  .nav-phone, .link-arrow { min-height: 44px; }
  .c-big { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-top a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-top ul { gap: 0; }
  .footer-bottom { gap: 0 16px; }
  .footer-bottom span { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  .cmplz-category-toggle { min-width: 44px; min-height: 44px; }
  .cmplz-document .cmplz-banner-checkbox { display: inline-flex; align-items: center; }
  .cmplz-document .cmplz-consent-checkbox { width: 24px; height: 24px; margin: 10px; }
}

/* gsm liggend (844x390): hero compacter zodat de knoppen zonder scrollen in beeld staan; sticker en krijtnotitie weg */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-inner { padding-top: 4px; padding-bottom: 60px; }
  .hero-full .hero-title.h-xl { font-size: 32px; margin: 8px 0 8px; }
  .hero-full .split .line { display: inline-block; margin-right: .25em; }
  .hero-full .hero-title .indent { padding-left: 0; }
  .hero-full .lead { font-size: 14px; line-height: 1.45; max-width: none; margin: 0; }
  .hero-full .hosts { display: none; }
  .hero-full .hero-sticker, .hero-full .hero-note, .hero-scroll { display: none; }
  .verlof-balk { font-size: 13px; line-height: 1.3; }
  .verlof-balk .wrap { padding-block: 6px; gap: 0 12px; }
}

/* tablet (768-820 px): de concept-regels klappen hier te vroeg dicht; de drankkaart blijft in twee kolommen */
@media (min-width: 768px) and (max-width: 820px) {
  .drinks { grid-template-columns: 1fr 1fr; }
}

/* contactblokken en kaartillustratie naast elkaar vanaf 1024 px */
@media (min-width: 1024px) and (max-width: 1080px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* urentabel: "Donderdag · vandaag" breekt niet in de smalle kolom (1024-1080 px) */
.hours td:first-child { white-space: nowrap; padding-right: 12px; }

/* footerkoppen zijn h3 (juiste koppenvolgorde); opmaak blijft die van de h4 */
.footer-top h3 { margin: 0 0 16px; }
/* width/height-attributen op decoratieve huisjes mogen de CSS-hoogte niet overrulen */
.hero-sticker img { height: auto; }

/* zonder uren (of vandaag buiten de planning) verdwijnen de velden "Vandaag" en "Keuken" */
.qr-field[hidden] { display: none; }

/* ---------- ontwerpronde 1 ---------- */

/* 1. Titels met .split: het masker laat ruimte voor staarten (g, j, p, y) en accenten (é, à, ô).
   Het masker is een clip-path rond de regel in plaats van overflow: de regels zelf verschuiven niet
   (zelfde padding en marge als voordien), alleen het zichtbare venster is ruimer. De tekst start
   daarom verder naar onder, zodat ze nog altijd volledig verborgen begint. */
.split .line { overflow: visible; clip-path: inset(-.12em -.14em -.12em -.14em); }
.split .line > span { transform: translateY(200%); }
.split.is-in .line > span { transform: none; }
/* krijtbord: het schrijf-effect knipte de staart van de krijtletters af (regelhoogte .9) */
.write { clip-path: inset(-.25em 100% -.35em 0); }
.write.is-written { clip-path: inset(-.25em -2% -.35em 0); }
@media (prefers-reduced-motion: reduce) {
  .split .line > span { transform: none; }
  .write { clip-path: none; }
}

/* 2. Hero: niets beweegt mee met de cursor (de scroll-beweging en de inzoom van de foto blijven) */
.hero-full { --mx: 0; --my: 0; }
.hero-kb img, .hero-full .hero-note, .hero-full .hero-sticker { translate: none; }

/* 3. Home, de vaste kaart: foto van een gerecht links, rechts de kop en vier hoofdgerechten zoals op een menukaart,
   met een stippellijn tussen naam en prijs */
.minikaart-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.minikaart-foto { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--groen-diep); }
.minikaart-foto img { width: 100%; height: 100%; object-fit: cover; }
.minikaart-tekst .h-m { margin: 0; font-size: clamp(36px, 4vw, 60px); }
.minikaart-tekst .h-m em { color: var(--messing); }
.minikaart-tekst .lead { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 30em; }
.minikaart { list-style: none; margin: clamp(30px, 3.6vw, 48px) 0 clamp(30px, 3.4vw, 44px); padding: 0; border-top: 1px solid rgba(239,230,211,.18); }
.minikaart li { padding: clamp(14px, 1.5vw, 20px) 0; border-bottom: 1px solid rgba(239,230,211,.18); }
.minikaart-regel { display: flex; align-items: baseline; gap: 14px; }
.minikaart-regel::after { content: ""; order: 1; flex: 1; min-width: 24px; border-bottom: 1px dotted rgba(239,230,211,.4); transform: translateY(-5px); }
.minikaart-naam { font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.15; }
.minikaart-prijs { order: 2; font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--messing-licht); white-space: nowrap; }
.minikaart-noot { display: block; margin-top: 4px; font-size: 15px; color: rgba(239,230,211,.68); }
@media (max-width: 680px) {
  .minikaart-grid { grid-template-columns: minmax(0, 1fr); }
  .minikaart-foto { aspect-ratio: 4 / 3; }
}

/* 5. Kaartpagina */
/* "overflow: hidden" maakte van de sectie een scrollkader, waardoor de linkerkolom nooit bleef plakken; "clip" knipt de blaadjes even goed af */
.menu-sheet { overflow: clip; }
/* titel en zinnetje op één lijn; past het niet, dan komt het zinnetje eronder */
.menu-cat-head { flex-wrap: wrap; row-gap: 16px; } /* de rijafstand telt alleen als het zinnetje onder de titel komt: ruimte voor de staarten van de titel */
.menu-lijst { display: none; }
.menu-aside-knop { margin: 0; }
.menu-aside .arch + .menu-aside-knop { margin-top: 24px; } /* lege kaart: geen lijst tussen foto en knop */
@media (min-width: 1081px) {
  .menu-nav { display: none; } /* de lijst in de linkerkolom neemt die rol over */
  .menu-layout { grid-template-columns: clamp(232px, 21vw, 300px) minmax(0, 820px); justify-content: space-between; gap: clamp(40px, 5vw, 86px); }
  .menu-aside {
    --aside-top: calc(var(--header-h) + 32px);
    top: var(--aside-top); max-height: calc(100vh - var(--aside-top) - 24px);
    display: flex; flex-direction: column;
  }
  /* de foto geeft als eerste toe in een laag venster, zodat lijst en knop zichtbaar blijven */
  .menu-aside .arch { flex: 0 1 400px; min-height: 110px; aspect-ratio: auto; margin: 0; }
  .menu-lijst { display: grid; flex: none; margin: 22px 0 22px; border-top: 1px solid rgba(31,58,47,.14); }
  .menu-lijst a {
    display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(31,58,47,.14);
    font-family: var(--f-display); font-size: 19px; line-height: 1.2; letter-spacing: -.01em;
    color: var(--inkt-zacht); text-decoration: none; transition: color .3s var(--ease);
  }
  .menu-lijst a::before { content: ""; flex: none; width: 0; height: 2px; margin-right: 0; background: var(--messing); transition: width .35s var(--ease), margin-right .35s var(--ease); }
  .menu-lijst a:hover { color: var(--groen); }
  .menu-lijst a.is-active { color: var(--groen); font-weight: 600; }
  .menu-lijst a.is-active::before { width: 20px; margin-right: 12px; }
  .menu-aside-knop { flex: none; }
  /* een klik op een categorie zet de titel op de hoogte van de bovenkant van de linkerkolom */
  .menu-cat { scroll-margin-top: calc(var(--header-h) + 32px); }
}

/* ---------- kaart op de contactpagina ---------- */
/* De illustratie is vierkant: volledig tonen, zodat "Noordzee" en "Strandlaan" niet afgesneden worden. */
.map-card { min-height: 0; aspect-ratio: 1 / 1; }
@media (max-width: 820px) {
  /* Op smalle schermen staat de adresbalk onder de kaart in plaats van erover. */
  .map-card { aspect-ratio: auto; display: flex; flex-direction: column; }
  .map-card .illu-map { position: static; height: auto; aspect-ratio: 1 / 1; }
  .map-card .map-pin { position: static; border-radius: 0; }
}

/* ---------- lopende banden: naadloze lus ---------- */
/* Meer kopieën in de band (zie header.php); de duur schaalt mee zodat de snelheid gelijk blijft. */
.status-track { animation-duration: 114s; }

/* Titel van de vaste kaart op home: genoeg regelafstand zodat de staart van een letter de regel eronder niet raakt */
.minikaart-tekst .h-m { line-height: 1.06; }

/* ---------- strook onder de hero ---------- */
/* Geen lichte strook meer tussen de hero en de groene sectie: de balk "Loop gewoon binnen" ligt op de rand van de foto
   en gaat meteen over in het groen eronder. */
.walkin-wrap { background: var(--groen); padding-bottom: 0; }
/* Zelfde korrel als de groene sectie eronder (klasse "on-dark grain"), en de balk zelf een tint donkerder zodat hij blijft opvallen */
.walkin-wrap .quickres { position: relative; z-index: 1; background: var(--groen-diep); box-shadow: 0 24px 48px -24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(239,230,211,.08); }

/* ---------- footer met een kolom Pagina's ---------- */
.footer-top { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1080px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
/* De urenkolom krijgt meer ruimte zodat "16:00 – 23:00" op één regel blijft; de juridische pagina's staan nu in de kolom Pagina's */
@media (min-width: 1081px) { .footer-top { grid-template-columns: 1.25fr .9fr 1.3fr .95fr 1fr; } }
.footer-hours span { white-space: nowrap; }
@media (min-width: 1081px) { .footer-top { grid-template-columns: 1.1fr .85fr 1.25fr .9fr 1.15fr; } }
.footer-top ul a { white-space: nowrap; }
.footer-top p a { white-space: nowrap; }

/* ---------- statusregel in de hero, onder de knoppen: status van vandaag | keukenuren ---------- */
.hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 18px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(239,230,211,.8); }
.hero-status > [hidden] { display: none; }
.hero-status-nu { display: inline-flex; align-items: center; gap: 10px; }
.hero-status-nu [data-lusthof-vandaag] { font-weight: 600; color: var(--creme); }
.hero-status-nu [data-lusthof-vandaag]::first-letter { text-transform: uppercase; }
.hero-status-nu:not([hidden]) + .hero-status-keuken::before { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 14px; vertical-align: -2px; background: rgba(239,230,211,.3); }
.hero-status-keuken span { color: var(--messing-licht); }
.is-loaded .hero-copy .hero-status.hero-fade { transition-delay: 1.8s; }
.hero-full .hero-actions { margin-top: 28px; }
@media (max-height: 520px) and (orientation: landscape) { .hero-full .hero-actions { margin-top: 14px; } .hero-status { margin-top: 10px; } }

/* ---------- decoratie uit het logo: krijtblaadjes, trio, dubbele ovale rand (het blaadje bij elk label staat bij .eyebrow) ---------- */
/* 1. krijtblaadjes in de bovenhoeken van het bord op /suggesties/ (statisch, geen beweging) */
.krijt-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.krijtblad {
  position: absolute; top: clamp(14px, 2.2vw, 30px); z-index: 0; pointer-events: none;
  width: clamp(54px, 6.5vw, 96px); height: auto; opacity: .8; filter: url(#krijt);
}
.krijtblad--links { left: clamp(14px, 2.2vw, 30px); transform: rotate(-6deg); }
.krijtblad--rechts { right: clamp(14px, 2.2vw, 30px); transform: rotate(6deg); }
@media (max-width: 600px) { .krijtblad { width: 36px; top: 10px; } .krijtblad--links { left: 10px; } .krijtblad--rechts { right: 10px; } }

/* 3. het trio als scheidingsteken tussen de hoofdstukken van de juridische pagina's */
.prose h2 ~ h2::before {
  content: ""; display: block; width: 72px; aspect-ratio: 228 / 62; margin: 0 auto 44px;
  background: var(--groen); opacity: .4;
  -webkit-mask: url("../img/blad-trio.png") center / contain no-repeat;
  mask: url("../img/blad-trio.png") center / contain no-repeat;
}
.prose h2 ~ h2 { margin-top: 64px; }

/* 4. de dubbele ovale rand van het logo rond het label "nieuw!" op de kaart */
.dish .new { position: relative; padding: 1px 12px 3px; margin-left: 4px; border: 1px solid currentColor; border-radius: 50%; line-height: 1.1; }
.dish .new::after { content: ""; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 50%; opacity: .7; pointer-events: none; }

/* ---------- drie feiten onder "Just gelijk vroeger" ---------- */
/* Drie gelijke kolommen met een dunne scheidingslijn, cijfer en onderschrift op dezelfde lijn uitgelijnd */
.facts { margin-top: 44px; border-top: 1px solid rgba(31,58,47,.18); }
.facts div { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px 4px; }
.facts div:first-child { padding-left: 0; }
.facts div + div { border-left: 1px solid rgba(31,58,47,.14); }
.facts strong { font-size: clamp(30px, 2.8vw, 42px); white-space: nowrap; }
.facts span { font-size: 14.5px; line-height: 1.4; color: var(--inkt-zacht); }
@media (max-width: 520px) {
  /* Op gsm onder elkaar: cijfer links, onderschrift ernaast */
  .facts { grid-template-columns: 1fr; }
  .facts div { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px 0; }
  .facts div + div { border-left: 0; border-top: 1px solid rgba(31,58,47,.14); }
  .facts strong { font-size: 28px; min-width: 4.2em; }
}

/* ---------- navigatie gecentreerd in de balk ---------- */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav .brand { justify-self: start; }
.nav .nav-links { justify-self: center; }
.nav .nav-cta { justify-self: end; }
@media (min-width: 521px) { .facts div { padding-right: 14px; } .facts div + div { padding-left: 18px; } .facts span { font-size: 14px; } }
/* Tot 1180px is de tekstkolom te smal voor drie kolommen zonder afbreken: dan onder elkaar, zoals op gsm */
@media (max-width: 1180px) {
  .facts { grid-template-columns: 1fr; }
  .facts div, .facts div:first-child, .facts div + div { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px 0; }
  .facts div + div { border-left: 0; border-top: 1px solid rgba(31,58,47,.14); }
  .facts strong { font-size: 28px; min-width: 4.2em; }
}

/* ---------- hero zonder stempel ---------- */
.hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }

.nav .nav-cta { grid-column: 3; } /* ook als het menu verborgen is (tablet, gsm) blijven telefoon, knop en menuknop rechts */
@media (max-width: 1200px) { .hero-scroll { display: none; } } /* botste op tablet met de statusregel */

/* Hero-titel: vaste regels, nooit een afbreking midden in; de letter schaalt mee met de breedte van de tekstkolom (cqi)
   en is ook begrensd op de schermhoogte. */
.hero-full .hero-copy { container-type: inline-size; width: 100%; }
.hero-full .hero-title.h-xl { font-size: min(104px, 11.2cqi, 11svh); } /* past voor regels tot 8,3em plus de inspringing; "Uw warme thuis" is 7,5em */
.hero-full .hero-title em { color: var(--messing-licht); }
.hero-full .hero-title .line > span { white-space: nowrap; }

/* ---------- suggestiebord: het krijtbord met houten kader ---------- */
/* Wat de uitbaters ook invullen, de tekst blijft op het bord: lange woorden breken binnen hun kolom, de prijs blijft op één regel,
   en bij veel suggesties schrijft het krijt kleiner (het bord groeit mee in de hoogte). */
.bord-title, .bord-sub, .bord-foot { overflow-wrap: anywhere; }
.bord-list li > span { min-width: 0; overflow-wrap: anywhere; }
.bord-list .prijs { white-space: nowrap; }
.bord-list:has(> li:nth-child(7)) { gap: clamp(8px, 1.2vw, 14px); }
.bord-list:has(> li:nth-child(7)) li { font-size: clamp(22px, 2.4vw, 32px); }
.bord-list:has(> li:nth-child(9)) li { font-size: clamp(20px, 2.1vw, 28px); }
/* home: op brede schermen staat de kop naast het bord in plaats van erboven */
@media (min-width: 1024px) {
  .bord-sectie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: clamp(48px, 6vw, 110px); align-items: center; }
  .bord-sectie .bord-sectie-kop { flex-direction: column; align-items: flex-start; margin-bottom: 0 !important; }
  .bord-sectie .bord-sectie-kop > * { align-self: flex-start; margin-left: 0; }
}

/* ---------- hero: inhoud bovenaan in een vast ritme, praktische info in een balk onderaan ---------- */
.hero-full { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.hero-full .hero-inner { flex: 1; display: flex; align-items: flex-end; padding-top: clamp(24px, 6vh, 72px); padding-bottom: clamp(36px, 6vh, 72px); }
.hero-full .hero-copy { max-width: 1000px; } /* "op het menu staat" past met de inspringing op één regel */
.hero-full .eyebrow { margin: 0; }
.hero-full .hero-title { margin: 20px 0 24px; }
.hero-full .lead { max-width: 34em; margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }


@media (max-width: 820px) {
  .hero-full .hero-inner { padding-bottom: 28px; }
}


/* liggende gsm: de hero past niet met de infobalk erbij, en bellen en route staan al onderaan */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-full .hero-inner { padding-top: 8px; padding-bottom: 20px; }
  .hero-full .hero-title { margin: 10px 0 12px; }
}

/* hero: de inhoud staat in het midden van de ruimte tussen header en infobalk, met iets meer lucht onderaan dan bovenaan */
.hero-full .hero-inner { align-items: center; padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(44px, 8vh, 104px); }
@media (max-width: 820px) { .hero-full .hero-inner { padding-top: 16px; padding-bottom: 40px; } }
/* subpagina-koppen: de langste regel ("op ons bord staat.") is 8em breed; de letter schaalt mee met de tekstkolom (cqi) zodat elke regel op één rij blijft */
.page-hero-grid > div:first-child { container-type: inline-size; }
.page-hero h1.h-xl { font-size: min(clamp(48px, 6.2vw, 104px), 11.6cqi); }
@media (max-width: 600px) { .page-hero h1.h-xl { font-size: min(48px, 11.6cqi); } }


/* ---------- paginaovergang: hetzelfde groene doek als de intro (assets/js/main.js, initOvergang) ---------- */
.overgang { position: fixed; inset: 0; z-index: 101; background: var(--groen); display: grid; place-items: center; clip-path: inset(100% 0 0 0); pointer-events: none; visibility: hidden; }
.overgang .intro-huis, .overgang .intro-line { animation: none; }
.overgang .intro-line { opacity: 1; transform: none; }
/* binnenkomen: het doek schuift van onder omhoog en het huisje tekent zich */
.overgang.is-in { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.7,0,.2,1); }
.overgang.is-in .intro-huis { animation: draw .9s .15s cubic-bezier(.6,.1,.3,1) forwards; }
.overgang.is-in .intro-line { opacity: 0; transform: translateY(14px); animation: up .6s .45s var(--ease) forwards; }
/* nieuwe pagina: het doek ligt er al en trekt naar boven weg */
html.is-overgang .overgang { visibility: visible; clip-path: inset(0 0 0 0); }
html.is-overgang .overgang .intro-huis, .overgang.is-weg .intro-huis { -webkit-mask-position: 0 0; mask-position: 0 0; }
.overgang.is-weg .intro-line { opacity: 1; transform: none; }
.overgang.is-weg { visibility: visible; clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.7,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .overgang { display: none; } }
/* contact: de ondernemingsgegevens staan onder de kaart, met dezelfde lijn erboven als de blokken links */
.c-block--onder { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- keuken op home: kop met krijtnoot en een rij scheve foto's (assets/js/rij.js) ---------- */
.groen-rij { position: relative; overflow: clip; background: var(--groen); color: var(--creme); padding: clamp(80px, 11vw, 150px) 0 clamp(64px, 9vw, 120px); }
.groen-rij-kop { text-align: center; }
.groen-rij-titel { position: relative; display: inline-block; margin: 0; color: var(--creme); line-height: 1.04; }
.groen-rij-titel .l { display: block; }
.groen-rij-titel .krijt-noot { position: absolute; right: -2.4em; bottom: -.9em; font-family: var(--f-hand); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--messing-licht); transform: rotate(-4deg); }
.groen-rij .lead { margin: 30px auto 0; max-width: 54ch; color: rgba(239,230,211,.88); text-align: center; }
.groen-rij .krijtblad { top: clamp(70px, 10vw, 130px); opacity: .7; }
.groen-rij .krijtblad--links { left: max(8px, calc(50% - min(48vw, 650px))); transform: rotate(-10deg); }
.groen-rij .krijtblad--rechts { right: max(8px, calc(50% - min(48vw, 650px))); transform: rotate(10deg) scaleX(-1); }
.rij { margin-top: clamp(56px, 8vw, 110px); }
/* --x zet rij.js: precies zo ver als het spoor breder is dan het scherm, zodat het nooit leeg loopt */
.rij-spoor { display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 44px); width: max-content; padding: 30px 4vw; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.rij-foto { position: relative; flex: none; width: calc(var(--w, 300px) * 1.45); margin: var(--mt, 0) 0 0; transform: rotate(var(--r, 0deg)); }
.rij-foto img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; }
.rij-foto::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(239,230,211,.75); transform: rotate(var(--rr, 1.5deg)); pointer-events: none; }
.rij-tag { position: absolute; z-index: 2; left: -18px; bottom: -14px; padding: 8px 16px; background: var(--messing); color: var(--groen-diep); font-family: var(--f-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); }
.rij-etiket { position: absolute; z-index: 2; right: -34px; top: -22px; display: grid; place-items: center; min-width: 120px; max-width: 150px; padding: 16px 22px; border-radius: 50%; background: var(--messing); color: var(--groen-diep); text-align: center; font-family: var(--f-sans); font-weight: 700; font-size: 11px; line-height: 1.25; letter-spacing: .14em; text-transform: uppercase; transform: rotate(10deg); box-shadow: 0 14px 28px -16px rgba(0,0,0,.5); }
.rij-etiket::after { content: ""; position: absolute; inset: 4px; border: 1px solid currentColor; border-radius: inherit; opacity: .45; }
@media (max-width: 820px) {
  /* gsm: dezelfde zijwaartse rij als op desktop, kleiner geschaald */
  .rij-spoor { gap: 18px; padding: 20px var(--gutter); }
  .rij-foto { width: calc(var(--w, 300px) * .84); margin-top: calc(var(--mt, 0px) * .6); }
  .rij-foto::after { inset: -6px; }
  .groen-rij-titel .krijt-noot { right: 0; bottom: -1.3em; }
  .groen-rij .krijtblad { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rij-spoor { transform: none; } }

/* café en restaurant: reliëf in het groene vlak (licht van linksboven, schaduw rechtsonder, de getekende villa in de hoek) */
#binnenlopen { position: relative; isolation: isolate; overflow: clip;
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(224,191,134,.13), transparent 70%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(8,18,14,.55), transparent 70%),
    linear-gradient(180deg, #24433a 0%, var(--groen) 45%, #1a3229 100%); }
#binnenlopen::after { content: ""; position: absolute; z-index: -1; right: -4%; bottom: -6%; width: min(46vw, 640px); aspect-ratio: 500 / 441; background: url("../img/huis-creme.png") no-repeat center / contain; opacity: .06; pointer-events: none; }


/* klikzone van de menulinks minstens 44 px breed */
.nav-links a, .site-footer ul a { display: inline-flex; align-items: center; min-width: 44px; }
@media (max-width: 1180px) { .groen-rij .krijtblad { display: none; } }

/* afsluiter op home: beige in plaats van groen */
.slot-beige { background: var(--creme) !important; color: var(--inkt); }
.slot-beige .lead.muted { color: var(--inkt-zacht); }
.slot-beige .btn--ghost { color: var(--groen); --bd: var(--groen); }
.groen-rij-link { margin: 22px 0 0; text-align: center; }
.groen-rij-link .link-arrow { color: var(--messing-licht); }
/* kaart: de knop onder 'Benieuwd naar onze suggesties?' op gsm kleiner */
@media (max-width: 600px) { .pad-s.on-creme .btn--groen { min-height: 44px; padding: 0 20px; font-size: 11.5px; } }

.footer-sep { margin: 0 10px; }
/* gsm: de langste regel ("klaargemaakt door") is 12,1em breed en blijft op één rij; ruimte voor de krijtnoot eronder */
@media (max-width: 820px) {
  .groen-rij .lead { margin-top: 44px; }
}

/* ---------- krijtdetails uit het logo: spaarzaam, telkens één per sectie ---------- */
/* contact, het formulier: het getekende huisje heel zacht in de hoek */
.krijt-huis-hoek { position: relative; isolation: isolate; }
.krijt-huis-hoek::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: -40px; width: min(30vw, 360px); aspect-ratio: 500 / 441; background: url("../img/huis-groen.png") no-repeat center / contain; opacity: .07; pointer-events: none; }
@media (max-width: 820px) { .krijt-huis-hoek::after { width: 46vw; bottom: -20px; } }

/* ---------- gsm-ronde ---------- */
.hero-kb picture { display: contents; }
/* juridische pagina's: kop gecentreerd */
.page-hero--juridisch .wrap { text-align: center; }
@media (max-width: 820px) {
  /* hero: zo hoog als het scherm min de balk Bellen/Route, zodat de balk onder de hero er net boven eindigt */
  .hero-full { min-height: calc(100svh - 36px); } /* schermvullend: de balk Bellen/Route komt pas voorbij de hero */
  .hero-full .hero-title .indent { padding-left: 0; }
  .hero-full .hero-title { margin: 14px 0 16px; }
  .hero-full .lead { font-size: 15px; line-height: 1.5; max-width: 30em; }
  .hero-media img { object-position: 50% 48%; /* iets hoger dan voorheen (30%) */ }
  /* hamburgermenu: links links uitgelijnd, zoals op tablet */
  .mobile-menu nav .mm-leaf { width: 20px; }
  /* blaadje in de menuknop iets kleiner */
  .burger .burger-leaf { width: 15px; }
}
/* gsm: het blaadje bij de handtekening mag niet buiten de pagina steken */
/* juridische koppen: "Privacyverklaring" (ongeveer 9em) moet op gsm passen */
@media (max-width: 600px) { .page-hero--juridisch h1.h-l { font-size: min(44px, calc((100vw - 2 * var(--gutter)) / 9.6)); overflow-wrap: anywhere; } }
/* kaart: zonder de drankkaart is de lijst korter; wat extra ruimte onderaan houdt de linkerkolom vast tot de laatste categorie */
@media (min-width: 1081px) { .menu-layout > div:last-child { padding-bottom: 120px; } }

/* openingsuren: een keukenshift breekt nooit midden in */
.hours .keuken .shift { white-space: nowrap; }
/* gsm: in de infobalk van de hero vandaag en het adres (de keukenuren staan in de band bovenaan) */
/* polaroids toen en nu: verslepen (assets/js/polaroids.js) */
[data-polaroids] .polaroid { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: box-shadow .25s ease; }
[data-polaroids] .polaroid img { pointer-events: none; -webkit-user-drag: none; }
[data-polaroids] .polaroid.is-gesleept { cursor: grabbing; box-shadow: 0 40px 70px -24px rgba(20,39,32,.6); }
@media (hover: none) { [data-polaroids] .polaroid { cursor: default; } }
section:has([data-polaroids]) { overflow-x: clip; }

/* ---------- hero op gsm: foto boven vrij, tekst onderaan in een vaste volgorde ---------- */
/* Bovenaan blijft het huis zichtbaar; de donkere laag zit alleen onder de tekst.
   Volgorde: label, titel, korte tekst, en daaronder de balk met de status en de kaart. */
@media (max-width: 600px) {
  .hero-shade { background: linear-gradient(0deg, rgba(20,39,32,.97) 0%, rgba(20,39,32,.9) 42%, rgba(20,39,32,.62) 62%, rgba(20,39,32,.12) 82%, rgba(20,39,32,.4) 100%); }
  .hero-full .hero-inner { align-items: flex-end; padding-top: 0; padding-bottom: 24px; }
  .hero-full .hero-title.h-xl { font-size: min(46px, calc((100vw - 2 * var(--gutter)) / 8.6)); margin: 12px 0 14px; }
  .hero-full .lead { font-size: 15px; line-height: 1.5; max-width: 32em; }
}

/* ---------- openingsanimatie: de titel komt pas op als het doek weg is ---------- */
/* Zonder deze regel schoof de titel al achter het doek binnen en stond hij bij het opengaan op een felle,
   nog smalle boogfoto zonder donkere laag (op gsm staat de boog recht onder de tekst). */
body:not(.is-loaded) .hero-full .split.is-in .line > span { transform: translateY(105%); filter: blur(10px); }

/* ---------- statusbalk: begint vooraan, met ruimte links, pas als de pagina in beeld is ---------- */
.status-bar { padding-left: var(--gutter); }
body:not(.is-loaded) .status-track { animation-play-state: paused; }

.nowrap { white-space: nowrap; }

/* ---------- typografie: vier kopmaten, één gewicht, één accentregel ---------- */
/* Staat onderaan zodat oudere regels per sectie niet meer meetellen. */
body .h-l, body .page-hero h1.h-xl, body .page-hero h1.h-l { font-size: var(--t-l); line-height: 1.02; }
body .h-m, body .groen-rij-titel, body .minikaart-tekst .h-m { font-size: var(--t-m); line-height: 1.04; }
body .dish h3, body .minikaart-naam, body .sugg-card h3, body .faq summary { font-size: var(--t-s); font-weight: 500; }
@media (max-width: 600px) {
  body .page-hero h1.h-xl { font-size: min(var(--t-l), 11.6cqi); }
  body .page-hero--juridisch h1.h-l { font-size: min(40px, calc((100vw - 2 * var(--gutter)) / 9.6)); overflow-wrap: anywhere; }
}
/* het accent in een kop (meestal de tweede regel): baksteen op licht, messing op groen */
body .display em, body .page-hero .display em, body .menu-cat-head .display em { color: var(--baksteen); }
body .on-dark .display em, body .page-hero.on-dark .display em, body .groen-rij .display em { color: var(--messing); }
body .hero-full .hero-title em { color: var(--messing-licht); }

/* ---------- gsm en tablet: rustigere opening van de hero ---------- */
/* De boog groeit tot ver buiten het scherm in plaats van naar een rechthoek zonder rondingen:
   zo blijft hij tijdens de hele opening een boog en vervormt hij niet tot een afgeronde rechthoek.
   Zware effecten tijdens de opening (vervaging van de titel, gloed) vallen weg. */
@media (max-width: 820px) {
  .hero-full .split .line > span, .hero-full .split.is-in .line > span { filter: none; }
  body:not(.is-loaded) .hero-full .split.is-in .line > span { filter: none; }
  .hero-glow { display: none; }
  .hero-full .hero-inner { align-items: flex-end; padding-bottom: 28px; }
}

/* gsm: twee even brede knoppen, de statusregel op twee regels (status, dan keuken) */
@media (max-width: 600px) {
  .hero-full .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .hero-full .hero-actions .btn { width: 100%; min-height: 48px; padding: 0 12px; }
  .hero-status { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; margin-top: 16px; }
  .hero-status-nu:not([hidden]) + .hero-status-keuken::before { content: none; }
  .hero-status-nu:not([hidden]) + .hero-status-keuken { padding-left: 18px; } /* onder de tekst, niet onder het bolletje */
  .hero-full .hero-inner { padding-bottom: 24px; }
}

/* mobiel menu: ruimte voor de staarten van g en j in Brygada (de links knippen af voor hun animatie), zonder extra afstand tussen de links */
.mobile-menu nav a { padding-bottom: .2em; margin-bottom: -.14em; }

/* ---------- suggesties en contact: twee zachte blaadjes in de lege hoek boven het label (op gsm één, naast de kop) ---------- */
.page-hero .page-hero-grid { position: relative; }
.kop-blaadjes { position: absolute; inset: 0; pointer-events: none; color: var(--groen); }
.on-dark .kop-blaadjes { color: var(--creme); }
.kop-blaadjes span { position: absolute; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.kop-blaadjes span:first-child { left: 24%; top: 4%; width: clamp(40px, 4vw, 58px); aspect-ratio: 321 / 252; opacity: .13; transform: rotate(-18deg); -webkit-mask-image: url("../img/blad-1.png"); mask-image: url("../img/blad-1.png"); }
.kop-blaadjes span:last-child { left: 40%; top: 9%; width: clamp(28px, 2.8vw, 40px); aspect-ratio: 315 / 252; opacity: .1; transform: rotate(24deg); -webkit-mask-image: url("../img/blad-3.png"); mask-image: url("../img/blad-3.png"); }
.on-dark .kop-blaadjes span:first-child { opacity: .16; }
.on-dark .kop-blaadjes span:last-child { opacity: .12; }
@media (max-width: 820px) {
  .kop-blaadjes span:first-child { left: auto; right: 18%; top: 4px; width: 46px; transform: rotate(-14deg); }
  .kop-blaadjes span:last-child { display: none; }
}

/* gsm: de tekst van de hero helemaal onderaan, met ruimte voor de onderrand van het toestel */
@media (max-width: 820px) {
  .hero-full .hero-inner { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* gsm en tablet: lichtere schaduw over de foto. Donker alleen waar de tekst staat (onderste helft), bovenaan net genoeg voor het logo;
   een zachte schaduw achter de letters houdt titel en tekst leesbaar op de lichtere delen van de foto */
@media (max-width: 820px) {
  .hero-shade { background: linear-gradient(0deg, rgba(20,39,32,.9) 0%, rgba(20,39,32,.8) 30%, rgba(20,39,32,.6) 48%, rgba(20,39,32,.32) 60%, rgba(20,39,32,.06) 72%, rgba(20,39,32,0) 80%, rgba(20,39,32,.3) 100%); }
  .hero-full .hero-title { text-shadow: 0 2px 18px rgba(10,20,16,.55); }
  .hero-full .eyebrow, .hero-full .lead, .hero-status { text-shadow: 0 1px 10px rgba(10,20,16,.7); }
}
/* kleine gsm (iPhone SE): de knoppen passen naast elkaar zonder dat de tekst wordt afgeknipt */
@media (max-width: 380px) { .hero-full .hero-actions .btn { padding: 0 8px; font-size: 11px; letter-spacing: .1em; } }

/* ---------- gsm en tablet: de boog zonder clip-path ----------
   Safari op iPhone tekent de ronding van een clip-path soms niet tijdens de animatie, waardoor de foto even vierkante hoeken krijgt.
   Daarom ligt hier een boogvormig vlak met een groene rand die de rest van het scherm bedekt; het vlak schaalt open (alleen transform)
   tot ver buiten het scherm en vervaagt daarna. Een afgeronde hoek met een schaduw tekent elke browser betrouwbaar. */
.hero-boog { display: none; }
@media (max-width: 820px) {
  .hero-media, .is-loaded .hero-media { clip-path: none; transition: none; will-change: auto; }
  .hero-boog {
    display: block; position: absolute; left: 22%; right: 22%; top: 12%; bottom: -2px; pointer-events: none;
    border-radius: 999px 999px 0 0; box-shadow: 0 0 0 200vmax var(--groen-diep);
    transform-origin: 50% 100%;
    transition: transform 1.7s cubic-bezier(.7, 0, .2, 1) .15s, opacity .5s ease 1.6s;
  }
  .is-loaded .hero-boog { transform: scale(3.4); opacity: 0; }
  /* na de intro of een paginaovergang: pas opengaan als het groene doek voorbij de top van de boog is, anders snijdt de rechte rand
     van het doek de ronding af en lijkt de boog even vierkant */
  .met-doek .hero-boog { transition-delay: .95s, 2.4s; }
}
/* contact: het adres loopt als tekst door ("Strandlaan 130, 8670 Koksijde") en breekt alleen na de komma */
.c-big.c-adres { display: block; }

/* ---------- fotogalerij (page-fotogalerij.php, assets/js/galerij.js) ---------- */
/* Kolommen in plaats van een raster: staande en liggende foto's houden hun eigen verhouding. */
.galerij { list-style: none; margin: 0; padding: 0; column-count: 3; column-gap: clamp(14px, 1.8vw, 24px); }
.galerij-foto { break-inside: avoid; margin: 0 0 clamp(14px, 1.8vw, 24px); }
.galerij-foto a { display: block; border-radius: var(--radius); overflow: hidden; background: var(--groen-diep); }
.galerij-foto img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.galerij-foto a:hover img { transform: scale(1.03); }
.galerij-bijschrift { margin: 8px 2px 0; font-size: 14.5px; color: var(--inkt-zacht); }
.galerij-leeg { text-align: center; margin: 40px auto; }
@media (max-width: 1080px) { .galerij { column-count: 2; } }
@media (max-width: 600px) { .galerij { column-count: 1; } }
.lichtbak { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14,26,21,.94); }
.lichtbak[open] { display: grid; place-items: center; }
.lichtbak::backdrop { background: transparent; }
.lichtbak img { max-width: min(92vw, 1400px); max-height: 86dvh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.lichtbak-knop { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(239,230,211,.45); background: rgba(20,39,32,.6); color: var(--creme); font-size: 28px; line-height: 1; cursor: pointer; }
.lichtbak-knop:hover { background: rgba(239,230,211,.15); }
.lichtbak-dicht { top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; }
.lichtbak-vorige { left: 16px; top: 50%; transform: translateY(-50%); }
.lichtbak-volgende { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lichtbak-vorige, .lichtbak-volgende { top: auto; bottom: 24px; transform: none; } .lichtbak-vorige { left: calc(50% - 60px); } .lichtbak-volgende { right: calc(50% - 60px); } }
@media (prefers-reduced-motion: reduce) { .galerij-foto img { transition: none; } }