/* Original Nuxt design, with the equivalent browser reset. */
*,::before,::after{box-sizing:border-box;border:0 solid}h1,h2,h3,h4,p,figure{margin:0}button,input,textarea,select{font:inherit;color:inherit;background:transparent}button{padding:0}img,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}ul,ol{list-style:none;margin:0;padding:0}

@font-face { font-family: 'Changa One'; src: url('fonts/changa-one-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('fonts/dm-sans-latin.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }

:root {
  --cream: #ece5d6;
  --cream-soft: #e4ddcb;
  --red: #9c292c;
  --red-dark: #792022;
  --red-light: #efaca0;
  --ink: #332c27;
  --night: #241f1b;
  --night-2: #2b2521;
  --line: rgb(236 229 214 / .15);
  --line-strong: rgb(236 229 214 / .26);
  --cream-70: rgb(236 229 214 / .72);
  --cream-50: rgb(236 229 214 / .55);
  --paper: #f1ece1;
  --paper-2: #e6dfd1;
  --ground: var(--night);
  --ground-2: var(--night-2);
  --on-ground: var(--cream);
  --soft: var(--cream-70);
  --faint: var(--cream-50);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --kicker: var(--red-light);
  --pad: max(32px, calc((100vw - 1320px) / 2));
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Changa One', 'Arial Black', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color: var(--cream);
  background: var(--night);
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.page-frame { position: relative; isolation: isolate; overflow: clip; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 20px; background: var(--red); color: var(--cream); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Transparent masthead with a left-aligned wordmark and a solid red CTA. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; height: 114px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 40px; background: transparent; color: var(--cream); border-bottom: 1px solid rgb(236 229 214 / .2); animation: header-enter .65s var(--ease) both; }
.brand-logo { display: flex; align-items: center; width: 145px; height: 68px; flex-shrink: 0; }
.brand-logo-image { display: block; width: 100%; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.primary-nav a { position: relative; font: 500 14px/1.4 var(--sans); letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.primary-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.primary-nav a:hover { color: var(--red); }
.primary-nav a:hover::after { transform: scaleX(1); }
.nav-group { position: relative; }
.nav-group-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: 500 14px/1.4 var(--sans); letter-spacing: .045em; text-transform: uppercase; }
.nav-group-button svg { transition: transform .3s var(--ease); }
.nav-group.is-open .nav-group-button svg { transform: rotate(180deg); }
.nav-submenu { position: absolute; left: -18px; top: calc(100% + 18px); z-index: 30; list-style: none; min-width: 208px; margin: 0; padding: 8px 0; background: var(--night); border: 1px solid var(--line-strong); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
.nav-group.is-open .nav-submenu { opacity: 1; visibility: visible; transform: none; }
/* Een strook boven het uitklapmenu, zodat de muis er niet tussenuit valt. */
.nav-submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -19px; height: 19px; }
.nav-submenu a { display: block; padding: 11px 20px; color: var(--cream-70); font: 500 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; transition: color .22s, background .22s; }
.nav-submenu a::after { display: none; }
.nav-submenu a:hover { color: var(--cream); background: var(--night-2); }
.header-right { display: flex; align-items: center; gap: 28px; margin-left: 20px; }
.reservation-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; background: var(--red); color: var(--cream); padding: 0 19px; min-height: 46px; flex-shrink: 0; font-size: 13px; font-weight: 500; letter-spacing: .075em; transition: background .3s, color .3s; }
.reservation-button:hover { background: var(--red-dark); }
.reservation-arrow { transition: transform .3s var(--ease); }
.reservation-button:hover .reservation-arrow { transform: translate(2px,-2px); }
/* Menuknop: twee lijntjes die bij openen een kruis worden. Alleen zichtbaar waar de navigatie verdwijnt. */
.menu-button { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; color: var(--cream); font: 500 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; }
.menu-icon { position: relative; display: block; width: 26px; height: 14px; }
.menu-icon i { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .4s var(--ease), top .4s var(--ease), width .3s var(--ease); }
.menu-icon i:last-child { top: 12px; width: 18px; }
.menu-button:hover .menu-icon i:last-child { width: 26px; }
.menu-button.is-open .menu-icon i { top: 6px; width: 26px; }
.menu-button.is-open .menu-icon i:first-child { transform: rotate(45deg); }
.menu-button.is-open .menu-icon i:last-child { transform: rotate(-45deg); }

/* Full-bleed venue photography with a calm crossfade. */
.site-header .brand-logo { color: var(--cream); }
.site-header .primary-nav a:hover { color: var(--red-light); }
.site-header .primary-nav a::after { background: var(--cream); }
.site-header :focus-visible, .hero :focus-visible { outline-color: var(--cream); }
.hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; background: #332c27; }
.hero-media { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; background: #332c27; }
.hero-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1.2s ease-in-out; }
.hero-slide.is-previous { opacity: 1; z-index: 1; }
.hero-slide.is-current { opacity: 1; z-index: 2; }
.hero-slide-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position); transform: scale(1.025); }
.hero-slide.is-current .hero-slide-image, .hero-slide.is-previous .hero-slide-image { animation: photo-drift 6s linear both; animation-play-state: paused; }
.is-playing .hero-slide-image { animation-play-state: running !important; }
.hero-media-wash { position: absolute; inset: 0; z-index: 3; background: rgb(21 16 12 / .2); }
.hero-media-vignette { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgb(16 13 10 / .63), rgb(16 13 10 / .12) 76%), linear-gradient(rgb(16 13 10 / .44), transparent 30%, transparent 70%, rgb(16 13 10 / .4)); }
.slideshow-controls { position: absolute; right: 40px; bottom: 57px; z-index: 4; display: flex; align-items: center; gap: 6px; color: var(--cream); }
.slideshow-dot { width: 34px; height: 44px; display: grid; place-items: center; }
.slideshow-dot span { width: 24px; height: 2px; background: currentColor; opacity: .4; transition: opacity .3s, height .3s; }
.slideshow-dot[aria-pressed='true'] span { height: 3px; opacity: 1; }
.slideshow-dot:hover span { opacity: 1; }
.slideshow-pause { display: grid; place-items: center; width: 36px; height: 44px; margin-left: 6px; }
@keyframes photo-drift { from { transform: scale(1.025); } to { transform: scale(1.085); } }
.hero-content { position: absolute; left: 9vw; top: 35svh; width: min(900px, 79vw); padding: 0; z-index: 2; }
.hero-eyebrow { color: var(--red-light); font-size: 13px; letter-spacing: .12em; font-weight: 500; margin: 0 0 29px; animation: intro-enter .7s .1s var(--ease) both; }
.hero-headline { margin: 0 0 30px; color: var(--cream); font-weight: 400; }
.headline-mask { display: block; overflow: hidden; padding: .09em 0 .14em; margin-bottom: -.18em; }
.headline-mask > span { display: block; white-space: nowrap; animation: headline-enter .9s .2s var(--ease) both; }
.headline-bold { font: 400 clamp(65px, 6.8vw, 116px)/.84 var(--display); letter-spacing: -.018em; }
.headline-mask:nth-child(2) > span { animation-delay: .32s; }
.hero-intro { font: 400 15px/1.7 var(--sans); max-width: 500px; color: var(--cream); margin: 0; animation: intro-enter .75s .5s var(--ease) both; }
.discover-link { position: absolute; bottom: 74px; left: 9vw; display: inline-flex; align-items: center; gap: 15px; color: var(--cream); font-size: 13px; letter-spacing: .1em; z-index: 4; }
.discover-link svg { transition: transform .3s var(--ease); }
.discover-link:hover svg { transform: translateY(4px); }
.hero-photo-caption { position: absolute; right: 42px; bottom: 115px; color: var(--cream); font: 400 13px var(--sans); letter-spacing: .1em; z-index: 3; pointer-events: none; }

/* Native dialogs provide focus trapping, Escape, and focus restoration. */
dialog { color: var(--cream); }
dialog::backdrop { background: rgb(22 17 14 / .55); }
/* Mobiel menu: een nachtdonker vlak, dezelfde koppen als de navigatie, groot en genummerd, met reserveren en contact onderin. */
html.menu-open { overflow: hidden; scrollbar-gutter: stable; }
.menu-overlay { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: var(--night); color: var(--cream); overflow: hidden auto; overscroll-behavior: contain; }
.menu-overlay::backdrop { background: transparent; }
.menu-overlay[open] { display: block; animation: menu-enter .28s ease-out both; }
.menu-overlay-inner { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; }
.menu-overlay-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; height: 114px; padding: 0 28px; border-bottom: 1px solid var(--line); }
.menu-overlay .menu-button { display: inline-flex; }
.overlay-nav { display: grid; padding: 14px 28px 0; }
.overlay-nav a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); font: 400 clamp(36px, 6.4vw, 58px)/.95 var(--display); letter-spacing: -.02em; text-transform: uppercase; opacity: 0; transform: translateY(18px); animation: menu-item .6s var(--ease) both; animation-delay: calc(90ms + var(--i, 0) * 60ms); }
.overlay-index { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--red-light); padding-top: .2em; }
.overlay-label { transition: color .25s; }
.overlay-nav a svg { color: var(--red-light); transition: transform .3s var(--ease); }
.overlay-nav a:hover .overlay-label, .overlay-nav a:active .overlay-label { color: var(--red-light); }
.overlay-nav a:hover svg, .overlay-nav a:active svg { transform: translate(3px, -3px); }
.menu-overlay-foot { margin-top: auto; display: grid; gap: 24px; padding: 32px 28px 28px; animation: menu-item .6s .42s var(--ease) both; opacity: 0; transform: translateY(18px); }
.menu-reserve { justify-content: space-between; min-height: 56px; max-width: 420px; }
.menu-contact { display: grid; gap: 6px; font: 400 15px/1.6 var(--sans); color: var(--cream-70); }
.menu-contact a { width: max-content; color: var(--cream); border-bottom: 1px solid var(--line-strong); transition: color .25s, border-color .25s; }
.menu-contact a:hover { color: var(--red-light); border-color: var(--red-light); }
.menu-overlay-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.menu-tagline { font: 400 21px/1 var(--display); letter-spacing: -.01em; color: var(--red-light); }
@keyframes menu-item { to { opacity: 1; transform: none; } }
.menu-overlay :focus-visible, .accessibility-panel :focus-visible { outline-color: var(--cream); }
.bottom-controls { position: fixed; left: 0; bottom: 0; z-index: 30; }
.accessibility-button { position: absolute; left: 16px; bottom: 16px; width: 37px; height: 37px; display: grid; place-items: center; background: var(--red); color: var(--cream); border-radius: 3px; box-shadow: 0 2px 8px rgb(40 20 20 / .12); }
.accessibility-button svg { width: 25px; height: 25px; }
.accessibility-panel { position: fixed; inset: auto auto 68px 16px; margin: 0; width: min(360px, calc(100vw - 32px)); padding: 24px; border: 1px solid #c87868; background: var(--red-dark); }
.settings-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 15px; }
.settings-heading h2 { font-size: 17px; font-weight: 600; }
.settings-heading button { padding: 5px; }
.setting-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 10px 0; border-bottom: 1px solid rgb(236 229 214 / .2); font-size: 15px; text-align: left; }
.setting-indicator { flex-shrink: 0; width: 22px; height: 22px; border: 1px solid var(--red-light); display: grid; place-items: center; }
.system-motion-note { color: var(--cream-soft); font-size: 13px; line-height: 1.6; padding-top: 14px; }
.high-contrast .experience-description, .high-contrast .card-caption p { color: #241d18; }
.high-contrast .hero-intro { color: #fff9ef; }
.high-contrast .hero-media-wash { background: rgb(7 14 7 / .5); }
@keyframes header-enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes intro-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes headline-enter { from { transform: translateY(120%); } to { transform: none; } }
@keyframes menu-enter { from { opacity: 0; } to { opacity: 1; } }
/* ---------------------------------------------------------------------------
   Bouwstenen onder de hero: een doorlopend donker vlak, haarlijnen als raster,
   een klein label links en een grote kop rechts. Opbouw geleend van
   vita-travel.webflow.io, uitgevoerd in de kleuren en letters van 't Trefpunt.
--------------------------------------------------------------------------- */
main { display: block; background: var(--ground); }

/* Het midden van de pagina staat op papier: dezelfde opbouw, omgekeerde kleuren. */
.light {
  --ground: var(--paper);
  --ground-2: var(--paper-2);
  --on-ground: var(--night);
  --soft: #5d544a;
  --faint: #695f54;
  --rule: rgb(36 31 27 / .17);
  --rule-strong: rgb(36 31 27 / .32);
  --kicker: var(--red);
}
.light .section-action { background: var(--red); color: var(--cream); }
.light :focus-visible { outline-color: var(--red); }
.light .sec + .sec::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--rule); }
.sec { position: relative; background: var(--ground); color: var(--on-ground); padding: clamp(78px, 7.5vw, 122px) var(--pad); }
.sec-flush { padding: 0 0 clamp(78px, 7.5vw, 122px); }
.sec-body { padding: 0 var(--pad); }
.sec-head { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 7.7fr); gap: 22px clamp(28px, 4.5vw, 86px); align-items: start; }
.sec-label { display: inline-flex; align-items: center; gap: 12px; margin: 5px 0 0; color: var(--on-ground); font: 500 13px/1.5 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.sec-label::before { content: ''; flex-shrink: 0; width: 9px; height: 9px; background: var(--red); }
.sec-title { font: 400 clamp(33px, 4.3vw, 70px)/.93 var(--display); letter-spacing: -.025em; margin: 0; }
.sec-lead { font: 400 clamp(15px, 1.15vw, 17px)/1.7 var(--sans); color: var(--soft); max-width: 56ch; margin: clamp(22px, 2.2vw, 32px) 0 0; }
.sec-note { color: var(--faint); font: 400 13px/1.7 var(--sans); margin: 0; max-width: 58ch; }
.sec-note-link { border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px; letter-spacing: .075em; font-weight: 500; }
.sec-note-link:hover { color: var(--on-ground); }
.sec-foot-right { justify-content: flex-end; }
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: clamp(34px, 3.4vw, 52px); padding-top: 26px; border-top: 1px solid var(--rule); }
.section-action { display: inline-flex; align-items: center; gap: 22px; padding: 0 22px; min-height: 52px; background: var(--red); color: var(--on-ground); font: 500 13px var(--sans); letter-spacing: .075em; transition: background .3s; }
.section-action:hover { background: var(--red-dark); }
.section-action svg { transition: transform .3s var(--ease); }
.section-action:hover svg { transform: translate(2px, -2px); }
.sec :focus-visible, .site-footer :focus-visible { outline-color: var(--on-ground); }

/* Leesteksten in drie maten, allemaal in de monospace van de hero. */
.lead-md { font: 400 clamp(16px, 1.3vw, 19px)/1.555 var(--sans); color: var(--on-ground); margin: 0; }
.lead-sm { font: 400 15px/1.7 var(--sans); color: var(--soft); margin: 0; max-width: 56ch; }

/* Cellen: geen kaders of schaduwen, alleen haarlijnen die het raster tekenen. */
.cell-kicker { color: var(--kicker); font: 500 13px/1.7 var(--sans); letter-spacing: .13em; text-transform: uppercase; margin: 0; }

/* De drie kaarten staan los van elkaar: geen rasterlijnen, en ze verspringen in hoogte. */

.cell-figure { position: relative; margin: 0 0 24px; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--ground-2); }
.cell-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cell-title { font: 400 clamp(24px, 2.1vw, 34px)/.9 var(--display); letter-spacing: -.02em; margin: 0 0 14px; }
.cell-title span { display: block; }
.cell-text { font: 400 14px/1.7 var(--sans); color: var(--soft); margin: 0 0 24px; }
.cell-link { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; padding: 9px 0; color: var(--on-ground); font: 500 13px var(--sans); letter-spacing: .09em; text-transform: uppercase; border-bottom: 1px solid var(--rule-strong); transition: color .25s, border-color .25s; }
.cell-link:hover { color: var(--kicker); border-color: var(--kicker); }
.cell-link svg { transition: transform .3s var(--ease); }
.cell-link:hover svg { transform: translate(2px, -2px); }

/* Beeldbanden over de volle breedte, met de kop erop. */
.band { position: relative; height: clamp(300px, 40vw, 520px); overflow: hidden; background: var(--ground-2); }
.band-tall { height: clamp(360px, 48vw, 620px); }
.band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(36 31 27 / .55), rgb(36 31 27 / .08) 46%); }
.band-fade { height: clamp(320px, 43vw, 580px); background: transparent; }
.band-fade::after { display: none; }
/* Lichte lucht bovenin de band zou de header onleesbaar maken: een zachte donkere waas erover. */
.band-fade::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: clamp(140px, 18vw, 220px); background: linear-gradient(to bottom, rgb(36 31 27 / .62), rgb(36 31 27 / 0)); pointer-events: none; }
.band-fade img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgb(0 0 0 / .28) 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgb(0 0 0 / .28) 78%, transparent 100%); }
.pitmasters-head { margin-top: clamp(14px, 1.8vw, 30px); }
.pitmasters-head .band-title { margin-top: 12px; }
.band-copy { position: absolute; left: 0; right: auto; bottom: 0; z-index: 2; max-width: min(92%, 1080px); }
.band-title { font: 400 clamp(40px, 6.4vw, 112px)/.85 var(--display); letter-spacing: -.035em; margin: 12px 0 0; }

/* Welkom en de drie dingen die we doen. */

/* Welkom: label links, kop rechts met twee tekstkolommen eronder; daaronder drie gelijke
   kaarten op één lijn, gescheiden van de kop door een haarlijn. */
.intro-head .sec-title { max-width: 12ch; }
.intro-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px clamp(32px, 4.5vw, 80px); align-items: start; margin-top: clamp(28px, 2.8vw, 44px); }
.intro-copy .lead-md { max-width: 32ch; }
.intro-copy .lead-sm { max-width: 46ch; padding-top: 5px; }
.service-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(44px, 4.6vw, 72px); padding-top: clamp(28px, 2.8vw, 40px); border-top: 1px solid var(--rule); }
.service-cell { position: relative; display: flex; flex-direction: column; isolation: isolate; color: inherit; }
.service-cell .cell-figure { margin: 0; aspect-ratio: 4 / 5; }
.cell-figure-inner { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .9s var(--ease); }
.cell-figure-inner img { width: 100%; height: 100%; object-fit: cover; }
.service-cell:hover .cell-figure-inner, .service-cell:focus-within .cell-figure-inner { transform: scale(1.04); }
.service-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 22px 0 12px; }
.service-meta .cell-kicker { margin: 0; }
.service-index { color: var(--faint); font: 500 13px var(--sans); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.service-cell .cell-text { max-width: 34ch; margin: 0 0 22px; }
.service-cell .cell-link { margin-top: auto; }
.service-cell:hover .cell-link { color: var(--kicker); border-color: var(--kicker); }
.service-cell:hover .cell-link svg { transform: translate(2px, -2px); }

/* Menukaart: één breed beeld, daaronder de vier gangen naast elkaar als een kaart. */
/* Van de kaart: één foto links die meeloopt met de kaart ernaast, gerechten als haarlijnregels. */
.menu-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 86px); align-items: start; margin-top: clamp(38px, 3.6vw, 56px); }
.menu-photo { position: sticky; top: clamp(24px, 4vw, 48px); margin: 0; aspect-ratio: 1; max-width: 440px; overflow: hidden; background: var(--ground-2); }
.menu-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-photo figcaption, .split-figure figcaption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 14px 20px 12px; background: var(--ground); color: var(--kicker); font: 500 12px var(--sans); letter-spacing: .13em; }
.menu-list { display: grid; gap: clamp(38px, 3.6vw, 58px); }
.menu-list .menu-course h3 { margin: 0; }
.menu-list .menu-dishes { gap: 0; }
.menu-list .menu-dish { grid-template-columns: minmax(0, 1fr) minmax(6.5rem, max-content); column-gap: 20px; padding: 14px 0 15px; border-bottom: 1px solid var(--rule); }
.menu-list .menu-dish .dish-price { justify-self: end; text-align: right; }
.menu-list .menu-dish:last-child { border-bottom: 0; padding-bottom: 4px; }
.menu-list .dish-price { color: var(--on-ground); }
.menu-list .dish-description { margin-top: 4px; max-width: 46ch; }
.menu-foot { margin-top: 0; }
.menu-course h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; color: var(--kicker); font: 500 14px/1.6 var(--sans); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--on-ground); }
.menu-dishes { list-style: none; display: grid; gap: 18px; margin: 0; padding: 0; }
.menu-list .menu-dishes-split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 3.4vw, 58px); }
.menu-list .menu-dishes-split .menu-dish:last-child { border-bottom: 1px solid var(--rule); padding-bottom: 15px; }
.menu-dish { display: grid; grid-template-columns: auto minmax(18px, 1fr) auto; align-items: baseline; column-gap: 14px; }
.dish-name { font: 400 clamp(18px, 1.35vw, 22px)/1.3 var(--display); letter-spacing: -.008em; }
.dish-name em { font-style: normal; margin-left: .4em; color: var(--faint); }
.dish-leader { height: 1px; background: repeating-linear-gradient(to right, var(--rule-strong) 0 2px, transparent 2px 6px); transform: translateY(-.3em); }
.dish-price { font: 500 15px/1.55 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--kicker); white-space: nowrap; }
.dish-description { grid-column: 1 / -1; max-width: 52ch; margin: 6px 0 0; color: var(--faint); font: 400 14px/1.555 var(--sans); }

/* Eten & drinken: dezelfde bouwstenen als de homepage. Boven een band die in de grond oplost,
   daaronder de kaart in drie hoofdstukken op papier, de foto steeds aan de andere kant. */
.page-head { margin-top: clamp(14px, 1.8vw, 30px); }
.page-head .band-title { margin-top: 12px; overflow-wrap: anywhere; }
.chapter-return { display: flex; justify-content: flex-end; margin-top: 32px; }
.page-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px clamp(36px, 4.5vw, 90px); align-items: start; margin-top: clamp(34px, 3.4vw, 50px); }
.page-split .lead-md { max-width: 40ch; }
.page-split .section-action { margin-top: clamp(24px, 2.4vw, 34px); }
.chapter-nav { display: grid; }
.chapter-nav .cell-kicker { margin: 0 0 10px; }
.chapter-nav a { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-top: 1px solid var(--rule); font: 400 clamp(19px, 1.6vw, 26px)/1.15 var(--display); letter-spacing: -.015em; transition: color .25s, padding-left .3s var(--ease); }
.chapter-nav a:last-child { border-bottom: 1px solid var(--rule); }
.chapter-nav a span { color: var(--faint); font: 500 13px var(--sans); letter-spacing: .13em; font-variant-numeric: tabular-nums; }
.chapter-nav a:hover { color: var(--kicker); padding-left: 10px; }
/* Contact: dezelfde opbouw als de andere subpagina's. Links de inleiding met de knop,
   rechts de gegevens als haarlijnrijen, zoals de hoofdstuknavigatie daar. */
.contact-block .cell-kicker { margin: 0 0 10px; }
.contact-list { display: grid; margin: 0; }
.contact-list div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.contact-list div:last-child { border-bottom: 1px solid var(--rule); }
.contact-list dt { color: var(--faint); font: 500 13px var(--sans); letter-spacing: .13em; }
.contact-list dd { margin: 0; font: 400 clamp(16px, 1.25vw, 19px)/1.5 var(--sans); overflow-wrap: anywhere; }
.contact-list a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: color .25s, border-color .25s; }
.contact-list a:hover { color: var(--kicker); border-color: currentColor; }
.contact-list .contact-number { font: 400 clamp(24px, 2vw, 32px)/1.15 var(--display); letter-spacing: -.02em; border-bottom: 0; }
.contact-list .contact-number:hover { border-bottom: 0; }
.contact-route { display: inline-block; margin-top: 8px; font: 500 13px var(--sans); letter-spacing: .075em; }
.contact-hours { width: 100%; max-width: 460px; margin-top: 12px; }
/* Elk hoofdstuk opent hetzelfde: het nummer en de gang links, de kop en de inleiding rechts. */
.chapter-head { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 7.7fr); gap: 22px clamp(28px, 4.5vw, 86px); align-items: start; }
.chapter-head .sec-lead { max-width: 60ch; }
.chapter-number { color: var(--faint); font-variant-numeric: tabular-nums; }
.menu-grid-mirror { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.menu-grid-mirror .menu-photo { order: 2; margin-left: auto; }
.menu-course h3 em { font-style: normal; font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--faint); }
.menu-footnote { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--rule-strong); font-size: 12.5px; }

/* Catering: geen kaart maar een keuzeblad. Elk onderdeel van het buffet is één rij: links de
   kop met hoeveel je ervan kiest en wat een extra kost, rechts de keuzes in kolommen. Je leest
   van boven naar beneden door het buffet heen, en per rij weet je meteen waar je aan toe bent. */
.keuze-rows { display: block; }
/* Naast een foto past de kop er niet naast: die staat dan boven de keuzes, met het kader
   met hoeveel je kiest rechts op dezelfde regel. */
.keuze-row { display: grid; gap: 15px; padding: clamp(22px, 2.2vw, 32px) 0; border-top: 1px solid var(--rule); }
.keuze-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.keuze-label h3 { margin: 0; color: var(--kicker); font: 500 14px/1.5 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.keuze-pick { margin: 0; padding: 5px 10px 4px; border: 1px solid var(--rule-strong); color: var(--on-ground); font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
/* Over de volle breedte is er wel ruimte voor de kop ernaast, als een specificatieblad. */
.menu-grid-full .keuze-row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(28px, 3.2vw, 60px); }
.menu-grid-full .keuze-label { display: block; align-self: start; position: sticky; top: clamp(20px, 3vw, 40px); }
.menu-grid-full .keuze-pick { display: inline-block; margin-top: 12px; }
.keuze-note { margin-top: 16px; }
.keuze-items { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 13px clamp(20px, 2.2vw, 40px); margin: 0; padding: 0; }
.keuze-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.keuze-item .dish-name { font: 500 15px/1.45 var(--sans); letter-spacing: 0; }
.keuze-item .dish-price { font-size: 12px; letter-spacing: 0; }
.keuze-item .dish-description { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
/* Zonder foto loopt het keuzeblad over de volle breedte. */
.menu-grid-full { grid-template-columns: 1fr; }
.menu-list-keuze .menu-dishes-split .menu-dish:last-child { border-bottom: 0; padding-bottom: 6px; }
.menu-footnote + .menu-footnote { margin-top: 8px; }
.split-copy .menu-list { width: 100%; margin-top: clamp(24px, 2.4vw, 36px); }

/* Tweedeling: één kolom tekst met de knop eronder, ernaast één beeld dat precies even hoog is. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4.5vw, 90px); align-items: stretch; }
.split-copy { display: flex; flex-direction: column; align-items: flex-start; }
.split-copy .sec-label { margin-bottom: clamp(14px, 1.4vw, 22px); }
.split-copy .sec-title { max-width: 14ch; }
.split-copy .sec-lead { margin-top: clamp(20px, 2vw, 28px); }
.split-figure { position: relative; margin: 0; min-height: clamp(360px, 44vw, 560px); overflow: hidden; background: var(--ground-2); }
.split-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guests-section .split-figure img { object-position: 62% center; }
.split-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: auto; padding-top: clamp(28px, 2.8vw, 40px); }
.split-actions .sec-note { max-width: 34ch; }
.split-kicker { margin-top: clamp(26px, 2.6vw, 36px); }
.price-list { list-style: none; display: grid; gap: 13px; width: 100%; max-width: 440px; margin: clamp(26px, 2.6vw, 36px) 0 0; padding: clamp(20px, 2vw, 26px) 0 0; border-top: 1px solid var(--rule-strong); }
.price-list li { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 14px; }
.split-text { margin-top: clamp(18px, 1.8vw, 24px); max-width: 52ch; }

/* Pitmasters. */
.pitmasters-split { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 7.7fr); gap: 30px clamp(28px, 4.5vw, 86px); margin-top: clamp(40px, 4vw, 62px); }
.pitmasters-split .lead-md { max-width: 34ch; }
.pitmasters-split .section-action { margin-top: clamp(24px, 2.4vw, 34px); }
.bbq h3 { font: 400 clamp(22px, 1.9vw, 30px)/1.1 var(--display); letter-spacing: -.015em; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); }
.bbq .lead-sm { margin-top: 16px; }
/* Twee kolommen haarlijnregels, voor de BBQ-gerechten en de feestgelegenheden. */
.rule-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 46px); width: 100%; margin: 20px 0 0; padding: 0; }
.rule-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font: 400 15px/1.5 var(--sans); }
.split-copy .rule-list { margin-top: 12px; }
.rule-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: inherit; text-decoration: none; transition: color .25s; }
.rule-list a span span { display: block; font-size: 13px; color: var(--soft); margin-top: 2px; }
.rule-list a:hover { color: var(--kicker); }
.rule-list a svg { flex: none; }
.rule-list-wide { grid-template-columns: 1fr; }
.split-copy .footer-hours { width: 100%; max-width: 440px; margin-top: 12px; }
.rule-list-single { grid-template-columns: 1fr; }

/* Voet: een smalle fotoband, direct daaronder vier compacte kolommen en een sluitregel. */
.site-footer { --ground: var(--night); --ground-2: var(--night-2); --faint: rgb(236 229 214 / .62); position: relative; background: var(--ground); color: var(--on-ground); }
.footer-figure { position: relative; margin: 0; height: clamp(170px, 22vw, 300px); background: var(--ground-2); }
.footer-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.footer-body { padding: clamp(48px, 4.6vw, 68px) var(--pad) clamp(26px, 2.6vw, 36px); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 64px); align-items: start; }
.footer-brand .brand-logo { width: 140px; height: auto; }
.footer-claim { font: 400 clamp(21px, 1.8vw, 27px)/1.02 var(--display); letter-spacing: -.02em; margin: 22px 0 0; max-width: 16ch; }
.footer-brand .section-action { margin-top: 22px; min-height: 46px; gap: 16px; padding: 0 18px; font-size: 12px; }
.footer-col .cell-kicker { margin: 4px 0 14px; }
.address-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-skip-ink: none; overflow-wrap: anywhere; }
.address-link:hover { color: var(--kicker); }
.footer-col address { font: 400 14px/1.7 var(--sans); font-style: normal; color: var(--soft); }
.footer-tagline { color: var(--soft); font: 400 14px/1.7 var(--sans); margin: 14px 0 0; max-width: 40ch; }
.footer-hours { list-style: none; margin: 0; padding: 0; }
.footer-hours li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 7px 0; border-bottom: 1px solid var(--rule); font: 400 13px/1.5 var(--sans); color: var(--soft); }
.hours-time { text-align: right; color: var(--on-ground); }
.hours-time em { display: block; font-style: normal; color: var(--kicker); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.footer-hours + .sec-note { margin-top: 12px; font-size: 12px; }
.footer-contact-lines { font: 400 14px/1.7 var(--sans); margin: 0; }
.footer-contact-lines a { border-bottom: 1px solid var(--rule-strong); }
.footer-contact-lines a:hover { color: var(--kicker); }
.footer-nav { display: grid; gap: 2px; margin-top: 2px; }
.footer-col address + .footer-contact-lines { margin-top: 12px; }
.footer-nav a { display: inline-flex; align-items: baseline; gap: 9px; font: 400 clamp(16px, 1.25vw, 19px)/1.35 var(--display); letter-spacing: -.01em; transition: color .25s; }
.footer-nav a span { color: var(--red); }
.footer-nav a:hover { color: var(--kicker); }
.footer-close { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; margin-top: clamp(34px, 3.4vw, 52px); padding-top: 20px; border-top: 1px solid var(--rule); }
.footer-signoff { color: var(--kicker); font: 400 clamp(20px, 1.7vw, 26px) var(--display); letter-spacing: -.015em; }
.footer-colophon { color: var(--soft); font: 400 14px/1.7 var(--sans); margin: 0; }
.footer-colophon .footer-credit { display: inline-block; color: var(--red-light); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s; }
.footer-colophon .footer-credit:hover { color: var(--cream); }
.footer-colophon .footer-credit:focus-visible { outline: 2px solid var(--red-light); outline-offset: 4px; }

/* Dialogen. */
.menu-dialog::backdrop { background: rgb(18 14 11 / .8); }
.dialog-close { position: absolute; top: 18px; right: 18px; padding: 8px; color: var(--on-ground); }
.menu-dialog { padding: 0; width: min(1060px, calc(100vw - 48px)); max-width: none; height: calc(100svh - 48px); margin: auto; border: 0; background: var(--ground); color: var(--on-ground); overflow: hidden; }
.menu-dialog[open] { display: flex; flex-direction: column; }
.menu-dialog-header { position: relative; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 40px clamp(26px, 4vw, 60px) 24px; border-bottom: 1px solid var(--rule); }
.menu-dialog-header h2 { font: 400 clamp(30px, 2.8vw, 44px)/.9 var(--display); letter-spacing: -.025em; margin: 15px 0 0; }
.menu-dialog .dialog-close { position: static; padding: 6px; }
.menu-dialog-body { flex: 1; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4.5vw, 70px); padding: 34px clamp(26px, 4vw, 60px) 52px; }
.menu-dialog-group { margin: 0 0 34px; }
.menu-dialog-group h3 { color: var(--kicker); font: 500 13px/1.7 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.menu-dialog-group h3 em { display: block; font-style: normal; letter-spacing: .06em; color: var(--faint); }
.menu-dialog-group .menu-dish { break-inside: avoid; }
.menu-dialog-group .dish-name { font-size: clamp(17px, 1.25vw, 20px); }
.menu-dialog-group .dish-price { font-size: 13px; }
.menu-dialog-group .sec-note { margin-top: 16px; }
/* Buffetkaart: compacte keuzelijsten in twee kolommen, toeslagen rechts; verhuur en weetjes op één kolom. */
.buffet-group h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); }
.buffet-group h3 strong { font: 400 clamp(16px, 1.2vw, 19px)/1 var(--display); letter-spacing: -.005em; text-transform: none; color: var(--on-ground); white-space: nowrap; }
.buffet-intro { margin: 0 0 6px; color: var(--soft); font: 400 14px/1.65 var(--sans); }
.buffet-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 0; padding: 0; }
.buffet-list.is-priced { grid-template-columns: 1fr; }
.buffet-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font: 400 14px/1.45 var(--sans); }
.buffet-list em { flex-shrink: 0; max-width: 58%; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; color: var(--kicker); font-size: 13px; }
.split-footnote { margin-top: 16px; }
/* Prijs met varianten (klein / groot) op één regel. */
.dish-price-variants { display: flex; gap: 14px; }
.dish-extra { color: var(--soft); font-weight: 400; }
.dish-price-variants em { font-style: normal; color: var(--faint); font: 400 13px var(--sans); letter-spacing: .04em; }

/* Eén doorlopend geheel: de grondkleur reikt in elk beeld via een plaat met de titel,
   en een getekende lijn loopt van de ene sectie de volgende in. Beide van librije.com. */
.plate { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: calc(100% - 22px); margin: 0; padding: 17px 22px 15px; background: var(--ground); color: var(--on-ground); font: 400 clamp(20px, 1.85vw, 30px)/.92 var(--display); letter-spacing: -.022em; }
.plate span { display: block; }
.plate-lg { padding: clamp(20px, 2.2vw, 34px) clamp(24px, 2.6vw, 44px) clamp(18px, 2vw, 30px); }
.plate-lg .sec-label { margin: 0; }

/* Beweging: regels komen achter een masker vandaan, tekst vult woord voor woord. */
html[data-motion='on'] .page-frame:not(.motion-reduced) [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease) var(--rd, 0ms), transform .85s var(--ease) var(--rd, 0ms); }
html[data-motion='on'] .page-frame:not(.motion-reduced) [data-reveal].is-in { opacity: 1; transform: none; }
html[data-motion='on'] .page-frame:not(.motion-reduced) [data-reveal='beeld'] img { transform: scale(1.09); transition: transform 1.7s var(--ease) var(--rd, 0ms); }
html[data-motion='on'] .page-frame:not(.motion-reduced) [data-reveal='beeld'].is-in img { transform: none; }
.k-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.k-line-in { display: block; transform: translateY(108%); transition: transform 1s var(--ease) var(--kd, 0ms); }
.k-split.is-in .k-line-in { transform: none; }
.k-fill-word { display: inline-block; opacity: .26; transition: opacity .35s linear; }
dialog [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sec-head, .pitmasters-split { grid-template-columns: 1fr; }
  .sec-lead { margin-top: 22px; }
  .intro-head .sec-title { max-width: none; }
  .service-row { gap: 18px; }
  .menu-grid { gap: 40px; }
  .chapter-head { grid-template-columns: 1fr; }
  .menu-grid-full .keuze-row { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
  .page-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  :root { --pad: 24px; }
  .sec { padding: 56px var(--pad) 58px; }
  .sec-flush { padding: 0 0 58px; }
  .sec-title { font-size: clamp(30px, 9.4vw, 46px); }
  .band-title { font-size: clamp(42px, 15vw, 74px); }
  .page-head .band-title { font-size: clamp(34px, 12.2vw, 74px); }
  .band { height: clamp(260px, 62vw, 340px); }
  .band-tall { height: clamp(300px, 76vw, 420px); }
  .menu-grid, .menu-grid-mirror { grid-template-columns: 1fr; gap: 30px; }
  .menu-photo { position: relative; top: auto; aspect-ratio: 4 / 3; }
  .menu-grid-mirror .menu-photo { order: 0; margin-left: 0; }
  .menu-photo { max-width: none; }
  .menu-list { gap: 40px; }
  .menu-list .menu-dish { grid-template-columns: minmax(0, 1fr) minmax(5rem, max-content); }
  .menu-list .menu-dishes-split { grid-template-columns: 1fr; }
  .keuze-row, .menu-grid-full .keuze-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .menu-grid-full .keuze-label { display: flex; position: static; }
  .menu-grid-full .keuze-pick { margin-top: 0; }
  .keuze-items { grid-template-columns: 1fr; gap: 11px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .rule-list { grid-template-columns: 1fr; }
  .split-mirror .split-figure { order: 2; }
  .split-figure { min-height: 0; aspect-ratio: 4 / 3; }
  .split-copy .sec-title { max-width: none; }
  .footer-figure { height: clamp(150px, 40vw, 220px); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .intro-head .sec-title { max-width: 12ch; }
  .intro-copy { grid-template-columns: 1fr; gap: 16px; }
  .intro-copy .lead-sm { padding-top: 0; }
  .service-row { grid-template-columns: 1fr; gap: 44px; margin-top: 48px; padding-top: 32px; }
  .service-cell .cell-figure { aspect-ratio: 4 / 3.4; }
  .sec-foot { display: block; }
  .sec-foot .section-action { display: flex; justify-content: space-between; width: 100%; margin-top: 22px; }
  .footer-body { padding: 36px 24px 28px; }
  .menu-dialog { width: calc(100vw - 24px); height: calc(100svh - 24px); }
  .menu-dialog-header { padding: 26px 22px 20px; }
  .menu-dialog-body { grid-template-columns: 1fr; padding: 28px 22px 44px; }
  .buffet-list { grid-template-columns: 1fr; }
}
.high-contrast .sec-lead, .high-contrast .lead-sm, .high-contrast .cell-text, .high-contrast .sec-note, .high-contrast .dish-description, .high-contrast .footer-col address, .high-contrast .footer-hours li, .high-contrast .footer-tagline { color: #fff9ef; }
.high-contrast .k-fill-word { opacity: 1 !important; }

@media (min-width: 1900px) {
  .site-header { padding-inline: 60px; }
  .hero-content { top: 37svh; }
  .hero-intro { font-size: 16px; max-width: 560px; }
}
@media (max-width: 1279px) {
  .site-header { padding-inline: 28px; gap: 24px; }
  .brand-logo { width: 132px; }
  .primary-nav { gap: 20px; }
  .primary-nav a, .nav-group-button { font-size: 13px; }
  .header-right { gap: 18px; margin-left: 0; }
}
@media (max-width: 1279px) and (min-width: 768px) {
  .hero-content { left: 8vw; top: 34svh; }
  .headline-bold { font-size: 7.5vw; }
  .discover-link { left: 8vw; }
}
@media (max-width: 1000px) {
  .primary-nav { display: none; }
  .header-right { margin-left: auto; }
  .menu-button { display: inline-flex; }
}
@media (max-width: 767px) {
  .site-header { height: 91px; padding-inline: 23px; gap: 18px; }
  .contact-list div { grid-template-columns: 1fr; gap: 4px; }
  .brand-logo { width: 112px; height: 53px; }
  .header-right { gap: 20px; }
  .menu-overlay-header { height: 91px; padding: 0 23px; }
  .overlay-nav { padding: 10px 23px 0; }
  .overlay-nav a { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 17px 0; font-size: clamp(32px, 9.6vw, 44px); }
  .menu-overlay-foot { gap: 20px; padding: 28px 23px 24px; }
  .menu-reserve { max-width: none; }
  .menu-tagline { font-size: 19px; }
  .hero { min-height: 100vh; min-height: 100dvh; padding: 0; }
  .hero-media { position: absolute; inset: 0; height: auto; margin: 0; }
  .hero-slide-image { object-position: var(--photo-position-mobile); }
  .slideshow-controls { right: 19px; bottom: 39px; gap: 1px; }
  .slideshow-dot { width: 23px; }
  .slideshow-dot span { width: 16px; }
  .slideshow-pause { width: 28px; margin-left: 3px; }
  .hero-content { position: absolute; left: 24px; top: 34svh; width: calc(100% - 48px); min-height: 0; padding: 0; }
  .hero-eyebrow { font-size: 12px; letter-spacing: .1em; margin-bottom: 26px; }
  .hero-headline { margin-bottom: 25px; }
  .headline-bold { font-size: clamp(44px, 12.8vw, 82px); }
  .hero-intro { font-size: 14px; line-height: 1.7; max-width: 340px; }
  .discover-link { display: inline-flex; position: absolute; left: 24px; bottom: 104px; font-size: 12px; }
  .hero-photo-caption { display: none; }
}
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation: none !important; transition: none !important; }
html[data-reduced-motion='true'] { scroll-behavior: auto; }
/* De koppen in de overlay komen met een animatie binnen; zonder animatie horen ze er gewoon te staan. */
.motion-reduced .overlay-nav a, .motion-reduced .menu-overlay-foot { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .overlay-nav a, .menu-overlay-foot { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .plate { padding: 13px 16px 11px; font-size: clamp(19px, 5.6vw, 25px); }
  .plate-lg { padding: 18px 20px 16px; }
}

@media(max-width:767px){.header-right > .reservation-button{display:none}}