/* ==========================================================================
   Restaurant Bruisss — stijl
   Bruisend en speels: oranje als basis, inkt voor contrast, crème als rust.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage.woff2") format("woff2-variations"), url("../fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic.woff2") format("woff2-variations"), url("../fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --oranje: #f5a700;
  --oranje-licht: #ffc23d;
  --oranje-zacht: #ffe3b0;
  --oranje-diep: #9a5300;      /* oranje voor tekst op licht, haalt contrast */
  --koraal: #e8552a;
  --koraal-diep: #b83a17;
  --inkt: #1d2126;
  --inkt-zacht: #2b3037;
  --leisteen: #5e6670;
  --creme: #fff6ea;
  --creme-diep: #f8ead6;
  --wit: #ffffff;
  --bubbel: #c5d3dc;
  --blauwgrijs: #8ba1ae;
  --groen: #2fbf71;

  --tekst: var(--inkt);
  --tekst-zacht: #4c535c;

  --font: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Fraunces", Georgia, "Times New Roman", serif;

  --breedte: 1240px;
  --rand: clamp(20px, 5vw, 48px);
  --sectie: clamp(72px, 11vw, 148px);
  --rond-s: 12px;
  --rond: 22px;
  --rond-l: 36px;
  --schaduw: 0 1px 2px rgba(29, 33, 38, .06), 0 10px 30px -12px rgba(29, 33, 38, .25);
  --schaduw-l: 0 2px 4px rgba(29, 33, 38, .06), 0 30px 60px -24px rgba(29, 33, 38, .35);
  --veer: cubic-bezier(.34, 1.56, .64, 1);
  --zacht: cubic-bezier(.22, 1, .36, 1);
  --kop-hoogte: 84px;
}

/* --------------------------------------------------------------- basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-hoogte) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(17px, 1.05vw + 12px, 19px);
  line-height: 1.6;
  color: var(--tekst);
  background: var(--creme);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
h3 > svg { width: 1.05em; height: 1.05em; color: var(--oranje-diep); }
.blok--oranje h3 > svg, .blok--inkt h3 > svg { color: currentColor; }
.sticker svg { width: 30px; height: 30px; color: var(--oranje-diep); margin-bottom: 4px; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--oranje); }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(48px, 8.2vw, 124px); letter-spacing: -0.045em; line-height: .92; }
h2 { font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.04em; line-height: .96; }
h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.1; }
h1 em, h2 em, h3 em, .accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100;
}
::selection { background: var(--oranje); color: var(--inkt); }
:focus-visible { outline: 3px solid var(--koraal); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.naar-inhoud { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--inkt); color: var(--creme); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; transition: top .2s; }
.naar-inhoud:focus { top: 12px; }

.container { width: min(100% - 2 * var(--rand), var(--breedte)); margin-inline: auto; }
.container--smal { width: min(100% - 2 * var(--rand), 820px); margin-inline: auto; }

.sectie { padding-block: var(--sectie); position: relative; }
.sectie--wit { background: var(--wit); }
.sectie--creme { background: var(--creme); }
.sectie--zand { background: var(--creme-diep); }
.sectie--oranje { background: var(--oranje); }
.sectie--inkt { background: var(--inkt); color: var(--creme); }
.sectie--inkt .label { color: var(--oranje); }
.sectie--inkt .label::before { background: var(--oranje); }
.sectie--inkt a:not(.knop) { color: var(--oranje-licht); }

.label {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oranje-diep); margin: 0 0 18px;
}
h1 .label { display: flex; width: fit-content; max-width: 100%; line-height: 1.3; }
.label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--oranje); box-shadow: 14px -6px 0 -2px var(--oranje), 24px -14px 0 -3.5px var(--oranje); margin-right: 22px; }
.sectie--oranje .label, .held .label, .paginakop:not(.paginakop--inkt) .label { color: var(--inkt); }
.sectie--oranje .label::before, .held .label::before, .paginakop:not(.paginakop--inkt) .label::before { background: var(--inkt); box-shadow: 14px -6px 0 -2px var(--inkt), 24px -14px 0 -3.5px var(--inkt); }

.intro { font-size: clamp(19px, 1.4vw + 10px, 24px); line-height: 1.5; color: var(--tekst-zacht); max-width: 38ch; }
.sectie--inkt .intro { color: rgba(255, 246, 234, .78); }
.sectie--oranje .intro { color: rgba(29, 33, 38, .82); }
.kop-blok { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.kop-blok--midden { margin-inline: auto; text-align: center; }
.kop-blok--midden .intro { margin-inline: auto; }

/* --------------------------------------------------------------- knoppen */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.knop {
  --k-bg: var(--inkt); --k-kleur: var(--creme);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--k-bg);
  background: var(--k-bg); color: var(--k-kleur);
  font: 700 17px/1.1 var(--font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--veer), box-shadow .3s, background .2s, color .2s;
  isolation: isolate;
}
.knop:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 14px 26px -12px rgba(29, 33, 38, .55); text-decoration: none; }
.knop:active { transform: translateY(0) scale(.98); }
.knop--oranje { --k-bg: var(--oranje); --k-kleur: var(--inkt); }
.knop--creme { --k-bg: var(--creme); --k-kleur: var(--inkt); }
.knop--rand { background: transparent; color: var(--inkt); border-color: currentColor; }
.knop--rand:hover { background: var(--inkt); color: var(--creme); border-color: var(--inkt); }
.sectie--inkt .knop--rand { color: var(--creme); }
.sectie--inkt .knop--rand:hover { background: var(--creme); color: var(--inkt); border-color: var(--creme); }
.knop--klein { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.knop svg { width: 18px; height: 18px; flex: none; }
/* bubbeltjes die opborrelen bij hover */
.knop::before, .knop::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--k-bg);
  width: 10px; height: 10px; right: 26px; top: 6px; opacity: 0; transform: translateY(0) scale(.4);
  transition: transform .5s var(--zacht), opacity .5s;
}
.knop::after { width: 6px; height: 6px; right: 40px; top: 10px; }
.knop:hover::before { opacity: 1; transform: translateY(-20px) scale(1); }
.knop:hover::after { opacity: 1; transform: translateY(-30px) scale(1); transition-delay: .06s; }
.knop--rand::before, .knop--rand::after { background: var(--inkt); }
.sectie--inkt .knop--rand::before, .sectie--inkt .knop--rand::after { background: var(--creme); }

.tekstlink { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; border-bottom: 2px solid var(--oranje); padding-bottom: 2px; transition: gap .25s var(--veer); }
.tekstlink:hover { gap: .75em; }

/* --------------------------------------------------------------- kop */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: calc(var(--kop-hoogte) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, height .3s;
}
.kop.is-gescrold, .kop--vast { background: rgba(255, 246, 234, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(29, 33, 38, .08); }
.kop.is-gescrold { height: calc(70px + env(safe-area-inset-top, 0px)); }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.merk { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; position: relative; padding-right: 18px; }
.merk-naam { font-weight: 800; font-size: 32px; letter-spacing: -0.05em; color: var(--inkt); }
.merk-sub { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inkt); opacity: .7; margin-top: 3px; }
.merk-bel { position: absolute; border-radius: 50%; background: var(--koraal); }
.merk-bel:nth-of-type(1) { width: 9px; height: 9px; right: 6px; top: 6px; }
.merk-bel:nth-of-type(2) { width: 6px; height: 6px; right: 0; top: -3px; background: var(--oranje); }
.merk-bel:nth-of-type(3) { width: 4px; height: 4px; right: 11px; top: -6px; background: var(--inkt); }
.merk:hover .merk-bel { animation: borrel 1s var(--zacht); }
.merk:hover .merk-bel:nth-of-type(2) { animation-delay: .08s; }
.merk:hover .merk-bel:nth-of-type(3) { animation-delay: .16s; }
@keyframes borrel { 40% { transform: translateY(-7px) scale(1.15); } 100% { transform: none; } }

.hoofdmenu { display: flex; align-items: center; gap: 4px; }
.hoofdmenu ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.hoofdmenu a:not(.knop) {
  display: block; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background .2s, color .2s;
}
.hoofdmenu a:not(.knop):hover { background: rgba(29, 33, 38, .07); }
.hoofdmenu a[aria-current="page"] { background: var(--inkt); color: var(--creme); }
.hoofdmenu .knop { margin-left: 10px; }

.menuknop {
  display: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--inkt); color: var(--creme);
  cursor: pointer; position: relative; z-index: 120;
}
.menuknop span { position: absolute; left: 15px; right: 15px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .35s var(--veer), opacity .2s; }
.menuknop span:nth-child(1) { top: 19px; }
.menuknop span:nth-child(2) { top: 25px; }
.menuknop span:nth-child(3) { top: 31px; }
.menu-open .menuknop span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menuknop span:nth-child(2) { opacity: 0; }
.menu-open .menuknop span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menuknop { display: block; }
  .hoofdmenu {
    position: fixed; inset: 0; z-index: 110; background: var(--oranje);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px;
    padding: 110px var(--rand) 40px;
    clip-path: circle(0 at calc(100% - var(--rand) - 26px) 42px);
    transition: clip-path .6s var(--zacht); visibility: hidden;
  }
  .menu-open .hoofdmenu { clip-path: circle(150% at calc(100% - var(--rand) - 26px) 42px); visibility: visible; }
  .hoofdmenu ul { flex-direction: column; gap: 0; }
  .hoofdmenu a:not(.knop) { font-size: clamp(34px, 9vw, 54px); font-weight: 800; letter-spacing: -0.04em; padding: 4px 0; border-radius: 0; line-height: 1.1; }
  .hoofdmenu a:not(.knop):hover { background: none; }
  .hoofdmenu a[aria-current="page"] { background: none; color: var(--inkt); font-family: var(--font-accent); font-style: italic; font-weight: 500; }
  .hoofdmenu .knop { margin-left: 0; }
  .menu-open { overflow: hidden; }
  .menu-open .kop { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open .merk { z-index: 120; }
}

/* --------------------------------------------------------------- hero */
.held {
  position: relative; overflow: hidden; background: var(--oranje);
  padding: calc(var(--kop-hoogte) + clamp(28px, 6vw, 72px)) 0 clamp(80px, 10vw, 140px);
  min-height: min(100svh, 980px); display: flex; align-items: center;
}
.held-raster { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(24px, 4vw, 64px); align-items: center; position: relative; z-index: 2; }
.held h1 { margin-bottom: 28px; }
.held h1 em { color: var(--wit); display: inline-block; transform: rotate(-3deg); text-shadow: .045em .045em 0 var(--inkt); }
.held .intro { color: rgba(29, 33, 38, .86); max-width: 30ch; margin-bottom: 34px; }
.held-feitjes { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.held-feitjes li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .38); font-size: 15px; font-weight: 600; }
.held-feitjes svg { width: 18px; height: 18px; }
/* vacature: opvallend knopje boven de grote kop */
.held-tip { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 26px; padding: 7px 18px 7px 7px; border-radius: 999px;
  background: var(--inkt); color: var(--creme); font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(29, 33, 38, .7); transform: rotate(-1.5deg); transition: transform .3s var(--veer); }
.held-tip:hover, .held-tip:focus-visible { transform: rotate(0) scale(1.04); }
.held-tip svg { width: 18px; height: 18px; color: var(--oranje); transition: transform .3s var(--veer); }
.held-tip:hover svg { transform: translateX(4px); }
.held-tip-badge { position: relative; background: var(--koraal); color: var(--wit); border-radius: 999px; padding: 6px 12px 6px 26px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.held-tip-badge::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--wit); animation: tipstip 1.8s ease-out infinite; }
@keyframes tipstip { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .held-tip-badge::before { animation: none; } .held-tip { transform: none; } }
@media (max-width: 640px) { .held-tip { font-size: 15px; gap: 10px; margin-bottom: 20px; } }

/* pop up: tip de gouden kok */
.goudkok { position: fixed; z-index: 120; right: 24px; bottom: 24px; width: min(400px, calc(100vw - 32px)); padding: 48px 28px 26px;
  background: var(--inkt); color: var(--creme); border-radius: var(--rond-l); box-shadow: 0 30px 70px -20px rgba(29, 33, 38, .65);
  transform: translateY(30px) scale(.96); opacity: 0; transition: transform .5s var(--veer), opacity .35s ease; }
.goudkok[hidden] { display: none; }
.goudkok.is-open { transform: none; opacity: 1; }
.goudkok .label { color: var(--oranje); margin-bottom: 12px; font-size: 13px; }
.goudkok .label::before { background: var(--oranje); box-shadow: 14px -6px 0 -2px var(--oranje), 24px -14px 0 -3.5px var(--oranje); }
.goudkok h2 { font-size: clamp(30px, 4vw, 38px); margin: 0 0 12px; color: var(--creme); }
.goudkok h2 em { color: #ffc23d; background: linear-gradient(100deg, #ffd56b, #f5a700 45%, #ffe39a 60%, #e09400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.goudkok p { font-size: 16px; line-height: 1.5; margin: 0 0 18px; color: rgba(255, 246, 234, .86); }
.goudkok strong { color: var(--creme); }
.goudkok-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.goudkok-knoppen .knop { padding: 13px 22px; font-size: 16px; }
.goudkok-nee { background: none; border: 0; color: rgba(255, 246, 234, .7); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.goudkok-nee:hover { color: var(--creme); }
.goudkok-dicht { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 246, 234, .1); color: var(--creme); display: grid; place-items: center; }
.goudkok-dicht:hover { background: rgba(255, 246, 234, .2); }
.goudkok-dicht svg { width: 18px; height: 18px; }
.goudkok-muts { position: absolute; top: -34px; left: 26px; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffe39a, #f5a700 55%, #c98400); color: var(--inkt); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .35); }
.goudkok-muts svg { width: 34px; height: 34px; }
.goudkok-muts i { position: absolute; border-radius: 50%; background: #ffd56b; }
.goudkok-muts i:nth-of-type(1) { width: 12px; height: 12px; right: -14px; top: 4px; }
.goudkok-muts i:nth-of-type(2) { width: 7px; height: 7px; right: -24px; top: -8px; background: var(--creme); }
.goudkok-muts i:nth-of-type(3) { width: 5px; height: 5px; right: -6px; top: -12px; background: var(--koraal); }
.goudkok.is-open .goudkok-muts { animation: muts 1.2s var(--veer) .2s both; }
@keyframes muts { 0% { transform: rotate(-30deg) scale(.4); } 60% { transform: rotate(10deg) scale(1.08); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .goudkok { transition: opacity .2s ease; transform: none; } .goudkok.is-open .goudkok-muts { animation: none; } }
@media (max-width: 860px) {
  .goudkok { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 46px 22px 22px; }
}

/* gouden kok op de vacaturepagina */
.goudkok-blok { position: relative; overflow: hidden; }
.goudkok-blok h2 em { color: var(--oranje); }
.goudkok-blok .vinklijst li::before { background-color: #ffc23d; }


.status { display: inline-flex; align-items: center; gap: 9px; }
.status-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--leisteen); position: relative; flex: none; }
.status.is-open .status-stip { background: var(--groen); }
.status.is-open .status-stip::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--groen); animation: puls 2s infinite; }
@keyframes puls { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.held-beeld { position: relative; aspect-ratio: 1 / 1.02; max-width: 600px; justify-self: end; width: 100%; }
.bol {
  position: absolute; margin: 0; border-radius: 50%; overflow: hidden; background: var(--oranje-licht);
  box-shadow: var(--schaduw-l); border: 6px solid var(--creme);
  animation: dobber 7s ease-in-out infinite;
  will-change: transform;
}
.bol img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.bol--1 { width: 68%; aspect-ratio: 1; left: 2%; top: 14%; }
.bol--2 { width: 42%; aspect-ratio: 1; right: 0; top: 0; animation-delay: -2.4s; animation-duration: 8s; }
.bol--3 { width: 36%; aspect-ratio: 1; right: 6%; bottom: 2%; animation-delay: -4.6s; animation-duration: 6.4s; }
.bol-tag {
  position: absolute; left: 57%; bottom: 10%; transform: translateX(-50%) rotate(-4deg);
  background: var(--inkt); color: var(--creme); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
@keyframes dobber { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.stempel { position: absolute; left: -2%; bottom: 0; width: 34%; aspect-ratio: 1; z-index: 3; }
.stempel svg { width: 100%; height: 100%; animation: draai 22s linear infinite; }
.stempel text { font: 700 11.5px var(--font); letter-spacing: .22em; text-transform: uppercase; fill: var(--inkt); }
.stempel-midden { position: absolute; inset: 27%; border-radius: 50%; background: var(--inkt); color: var(--oranje); display: grid; place-items: center; }
.stempel-midden svg { width: 52%; height: 52%; animation: none; }
@keyframes draai { to { transform: rotate(360deg); } }

/* opstijgende bubbels, worden door bruis.js gevuld */
.bubbels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.bubbels span {
  position: absolute; bottom: -60px; left: var(--x); width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 12%, rgba(255, 255, 255, .35) 13% 40%, rgba(255, 255, 255, .12) 41%);
  border: 1.5px solid rgba(255, 255, 255, .55);
  animation: stijg var(--t) linear var(--w) infinite;
  opacity: 0;
}
.sectie--inkt .bubbels span { background: radial-gradient(circle at 32% 30%, rgba(245, 167, 0, .9) 0 12%, rgba(245, 167, 0, .25) 13% 40%, rgba(245, 167, 0, .06) 41%); border-color: rgba(245, 167, 0, .45); }
@keyframes stijg {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: var(--o, .8); }
  50% { transform: translate3d(var(--z), -55vh, 0); }
  100% { transform: translate3d(0, -115vh, 0); opacity: 0; }
}

.golf { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px, 6vw, 90px); z-index: 2; color: var(--creme); }
.golf svg { width: 100%; height: 100%; display: block; }

/* paginakop voor subpagina's */
.paginakop { position: relative; overflow: hidden; background: var(--oranje); padding: calc(var(--kop-hoogte) + clamp(48px, 8vw, 110px)) 0 clamp(90px, 11vw, 150px); }
.paginakop--inkt { background: var(--inkt); color: var(--creme); }
.paginakop--inkt .label { color: var(--oranje); }
.paginakop--inkt .label::before { background: var(--oranje); box-shadow: 14px -6px 0 -2px var(--oranje), 24px -14px 0 -3.5px var(--oranje); }
.paginakop--inkt .intro { color: rgba(255, 246, 234, .8); }
.paginakop .container { position: relative; z-index: 2; }
.paginakop h1 { max-width: 14ch; }
.paginakop h1 em { color: var(--wit); text-shadow: .045em .045em 0 var(--inkt); }
.paginakop--inkt h1 em { color: var(--oranje); text-shadow: none; }
.paginakop .intro { color: rgba(29, 33, 38, .86); max-width: 40ch; }
.paginakop--inkt .intro { color: rgba(255, 246, 234, .8); }
.paginakop--inkt .knop--rand { color: var(--creme); }
.paginakop--inkt .knop--rand:hover { background: var(--creme); color: var(--inkt); border-color: var(--creme); }
.paginakop--inkt .knop--rand::before, .paginakop--inkt .knop--rand::after { background: var(--creme); }

/* kop op een donkere paginakop: lichte letters tot je gaat scrollen */
.kop--donker:not(.is-gescrold) .merk-naam, .kop--donker:not(.is-gescrold) .merk-sub { color: var(--creme); }
.kop--donker:not(.is-gescrold) .merk-bel:nth-of-type(3) { background: var(--creme); }
@media (min-width: 1081px) {
  .kop--donker:not(.is-gescrold) .hoofdmenu a:not(.knop) { color: var(--creme); }
  .kop--donker:not(.is-gescrold) .hoofdmenu a:not(.knop):hover { background: rgba(255, 255, 255, .1); }
  .kop--donker:not(.is-gescrold) .hoofdmenu a[aria-current="page"] { background: var(--creme); color: var(--inkt); }
  .kop--donker:not(.is-gescrold) .hoofdmenu .knop { --k-bg: var(--oranje); --k-kleur: var(--inkt); }
}
.kop--donker:not(.is-gescrold) .menuknop { background: var(--creme); color: var(--inkt); }
.menu-open .kop--donker .merk-naam, .menu-open .kop--donker .merk-sub { color: var(--inkt); }
.menu-open .kop--donker .menuknop { background: var(--inkt); color: var(--creme); }
.paginakop-raster { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; }
.paginakop-bol { width: min(340px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid var(--creme); box-shadow: var(--schaduw-l); justify-self: end; animation: dobber 7s ease-in-out infinite; }
.paginakop-bol img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- lint */
.lint-vak { overflow: hidden; position: relative; z-index: 3; margin-top: -54px; padding: 28px 0; }
.lint { background: var(--inkt); color: var(--creme); overflow: hidden; padding: 20px 0; transform: rotate(-1.4deg); margin: 0 -20px; }
.lint-rij { display: flex; width: max-content; animation: lint 38s linear infinite; }
.lint-rij span { font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; padding-right: 28px; display: inline-flex; align-items: center; gap: 28px; }
.lint-rij span:nth-child(even) { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--oranje); }
.lint-rij i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--oranje); font-style: normal; }
.lint:hover .lint-rij { animation-play-state: paused; }
@keyframes lint { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- kaarten */
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.raster-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2vw, 28px); }

.gerecht {
  position: relative; background: var(--wit); border-radius: var(--rond-l); padding: 14px 14px 26px; box-shadow: var(--schaduw);
  transition: transform .5s var(--veer), box-shadow .4s; text-decoration: none; display: flex; flex-direction: column;
}
.gerecht:nth-child(1) { transform: rotate(-1.6deg); }
.gerecht:nth-child(2) { transform: rotate(1deg) translateY(18px); }
.gerecht:nth-child(3) { transform: rotate(-.6deg); }
.gerecht:hover { transform: rotate(0) translateY(-8px); box-shadow: var(--schaduw-l); }
.gerecht-foto { border-radius: calc(var(--rond-l) - 10px); overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--oranje-zacht); margin-bottom: 20px; }
.gerecht-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--zacht); }
.gerecht:hover .gerecht-foto img { transform: scale(1.06); }
.gerecht-tekst { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gerecht h3 { margin: 0; }
.gerecht p { color: var(--tekst-zacht); margin: 0; font-size: 17px; }
.prijs-bol {
  position: absolute; top: -18px; right: -12px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--koraal); color: var(--wit); display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1; transform: rotate(10deg);
  box-shadow: 0 10px 20px -10px rgba(232, 85, 42, .8); transition: transform .5s var(--veer);
}
.prijs-bol small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.gerecht:hover .prijs-bol { transform: rotate(-6deg) scale(1.08); }
.gerecht:nth-child(2) .prijs-bol { background: var(--inkt); }
.gerecht:nth-child(3) .prijs-bol { background: var(--oranje); color: var(--inkt); }
.badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--oranje); color: var(--inkt); }
.badge--koraal { background: var(--koraal-diep); color: var(--wit); }
.badge--inkt { background: var(--inkt); color: var(--creme); }

/* --------------------------------------------------------------- foto en tekst */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.duo--om .duo-beeld { order: 2; }
.duo-beeld { position: relative; }
.foto-blob { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; overflow: hidden; aspect-ratio: 1 / 1.05; box-shadow: var(--schaduw-l); animation: blob 14s ease-in-out infinite; }
.foto-blob img { width: 100%; height: 100%; object-fit: cover; }
@keyframes blob {
  0%, 100% { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
  50% { border-radius: 56% 44% 52% 48% / 44% 56% 44% 56%; }
}
.foto-rond { border-radius: var(--rond-l); overflow: hidden; box-shadow: var(--schaduw-l); }
.foto-rond img { width: 100%; height: 100%; object-fit: cover; }
.sticker {
  position: absolute; z-index: 2; background: var(--wit); border-radius: var(--rond); padding: 16px 20px; box-shadow: var(--schaduw-l);
  font-weight: 700; line-height: 1.2; transform: rotate(-4deg); max-width: 230px;
}
.sticker strong { display: block; font-size: clamp(36px, 4vw, 54px); letter-spacing: -0.05em; line-height: .95; color: var(--koraal); }
.sticker--links { left: -18px; bottom: 8%; }
.sticker--rechts { right: -12px; top: 8%; transform: rotate(5deg); }

.vinklijst { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.vinklijst li { display: flex; gap: 12px; align-items: flex-start; }
.vinklijst li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2126' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sectie--oranje .vinklijst li::before { background-color: var(--wit); }

/* --------------------------------------------------------------- feestblok */
.feest { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.groot-getal { font-size: clamp(88px, 15vw, 210px); font-weight: 800; letter-spacing: -0.045em; line-height: .8; margin: 0 0 18px; }
.groot-getal span { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: .42em; letter-spacing: -0.02em; vertical-align: .9em; margin: 0 .1em; }
.opties { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opties a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: var(--rond);
  background: rgba(255, 255, 255, .5); text-decoration: none; font-weight: 700; font-size: 18px; transition: background .25s, transform .4s var(--veer);
}
.opties a:hover { background: var(--wit); transform: translateY(-3px) rotate(-.6deg); }
.opties a::after { content: "→"; font-weight: 400; transition: transform .3s var(--veer); }
.opties a:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------- missie */
.missie { text-align: center; overflow: hidden; }
.missie .container { position: relative; z-index: 2; }
.citaat { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(34px, 5vw, 70px); line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; margin: 0 auto 28px; text-wrap: balance; }
.citaat b { font-family: var(--font); font-style: normal; font-weight: 800; letter-spacing: -0.04em; color: var(--oranje); }
.waarden { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 6vw, 72px); text-align: left; }
.waarde { background: var(--inkt-zacht); border-radius: var(--rond); padding: 26px 24px; border: 1px solid rgba(255, 255, 255, .06); }
.waarde-icoon { width: 52px; height: 52px; border-radius: 50%; background: var(--oranje); color: var(--inkt); display: grid; place-items: center; margin-bottom: 18px; }
.waarde-icoon svg { width: 26px; height: 26px; }
.waarde h3 { font-size: 20px; margin-bottom: 6px; color: var(--creme); }
.waarde p { font-size: 16px; margin: 0; color: rgba(255, 246, 234, .72); }

/* --------------------------------------------------------------- recensie */
.recensie { background: var(--wit); border-radius: var(--rond-l); padding: clamp(32px, 5vw, 64px); box-shadow: var(--schaduw); position: relative; max-width: 900px; margin: 0 auto; }
.recensie::before { content: "“"; position: absolute; top: -40px; left: 28px; font-family: var(--font-accent); font-size: 200px; line-height: 1; color: var(--oranje); }
.recensie blockquote { margin: 0 0 22px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.32; font-weight: 600; letter-spacing: -0.02em; }
.recensie figcaption { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.sterren { color: var(--oranje); letter-spacing: 3px; font-size: 20px; }

/* google reviews */
.reviews-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px, 5vw, 60px); }
.reviews-kop h2 { margin-bottom: 0; }
.google-score {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none;
  background: var(--wit); border-radius: var(--rond-l); padding: 22px 30px; box-shadow: var(--schaduw-l);
  rotate: 3deg; transition: rotate .4s var(--veer), transform .4s var(--veer);
}
.google-score:hover { rotate: -2deg; transform: translateY(-4px); }
.google-score strong { font-size: clamp(48px, 5vw, 64px); letter-spacing: -0.05em; line-height: .9; }
.google-score-tekst { font-size: 14px; font-weight: 600; color: var(--tekst-zacht); }
.sterren-balk { position: relative; display: inline-block; font-size: 24px; letter-spacing: 3px; line-height: 1; color: rgba(29, 33, 38, .14); }
.sterren-balk::before { content: "★★★★★"; }
.sterren-balk::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--score); overflow: hidden; white-space: nowrap; color: var(--oranje); }
.review {
  margin: 0; position: relative; display: flex; flex-direction: column; gap: 16px;
  background: var(--wit); border-radius: var(--rond-l); padding: 30px 28px 26px; box-shadow: var(--schaduw);
}
.review:nth-child(1) { rotate: -1.2deg; }
.review:nth-child(2) { rotate: .8deg; }
.review:nth-child(3) { rotate: -.5deg; }
.review::before { content: "“"; position: absolute; top: -26px; right: 22px; font-family: var(--font-accent); font-size: 120px; line-height: 1; color: var(--oranje); }
.review-sterren { color: var(--oranje); letter-spacing: 3px; font-size: 19px; }
.review blockquote { margin: 0; flex: 1; font-size: 18px; line-height: 1.5; font-weight: 500; }
.review blockquote p { margin: 0; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review figcaption strong { display: block; }
.review figcaption small { display: block; font-size: 13px; color: var(--tekst-zacht); }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--inkt); color: var(--oranje); font-weight: 800; font-size: 18px; }
@media (max-width: 860px) { .review:nth-child(n) { rotate: 0deg; } .google-score { rotate: 0deg; } }

/* --------------------------------------------------------------- praktisch */
.praktisch { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.blok { background: var(--wit); border-radius: var(--rond-l); padding: clamp(26px, 3vw, 38px); box-shadow: var(--schaduw); }
.blok h3 { display: flex; align-items: center; gap: 10px; }
.blok--oranje { background: var(--oranje); box-shadow: none; }
.blok--inkt { background: var(--inkt); color: var(--creme); box-shadow: none; }
.blok--inkt a:not(.knop) { color: var(--oranje-licht); }
.uren { width: 100%; border-collapse: collapse; font-size: 17px; }
.uren th, .uren td { padding: 7px 0; text-align: left; border-bottom: 1px dashed rgba(29, 33, 38, .16); font-weight: 500; }
.uren td { text-align: right; font-variant-numeric: tabular-nums; }
.uren tr.is-vandaag th, .uren tr.is-vandaag td { font-weight: 800; }
.uren tr.is-vandaag th::after { content: "vandaag"; margin-left: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--oranje); color: var(--inkt); padding: 2px 7px; border-radius: 999px; vertical-align: 2px; }
.uren .dicht { color: var(--leisteen); }
.blok--inkt .uren th, .blok--inkt .uren td { border-color: rgba(255, 255, 255, .14); }
.blok--inkt .uren .dicht { color: rgba(255, 246, 234, .5); }
.uren-extra { margin: 16px 0 0; font-size: 15px; line-height: 1.5; }
.uren-extra a { font-weight: 800; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--oranje); }
.adres { font-style: normal; font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 18px; }
.kaartje {
  position: relative; border-radius: var(--rond); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 18px;
  background:
    radial-gradient(circle at 58% 46%, var(--koraal) 0 9px, transparent 10px),
    radial-gradient(circle at 58% 46%, rgba(232, 85, 42, .25) 0 26px, transparent 27px),
    linear-gradient(115deg, transparent 0 42%, #fff 42% 46%, transparent 46%),
    linear-gradient(20deg, transparent 0 58%, #fff 58% 61%, transparent 61%),
    linear-gradient(160deg, transparent 0 30%, rgba(255, 255, 255, .7) 30% 32%, transparent 32%),
    radial-gradient(ellipse at 20% 80%, #cfe3c4 0 22%, transparent 23%),
    radial-gradient(ellipse at 85% 18%, #cfe3c4 0 18%, transparent 19%),
    var(--creme-diep);
}
.kaartje span { position: absolute; left: 58%; top: 46%; transform: translate(-50%, -150%); background: var(--inkt); color: var(--creme); font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }

/* --------------------------------------------------------------- slot cta */
.slot { text-align: center; overflow: hidden; }
.slot h2 { font-size: clamp(48px, 9vw, 132px); line-height: .9; margin-bottom: 28px; }
.slot .knoppen { justify-content: center; }
.slot .container { position: relative; z-index: 2; }
.bel-link { font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.03em; text-decoration: none; display: inline-block; margin-top: 22px; }

/* --------------------------------------------------------------- menukaart */
.chips-balk { position: sticky; top: 70px; z-index: 50; background: rgba(255, 246, 234, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(29, 33, 38, .08); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--inkt); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.chip:hover, .chip.is-actief { background: var(--inkt); color: var(--creme); }

.kaart-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.kaart-sectie { background: var(--wit); border-radius: var(--rond-l); padding: clamp(26px, 3.4vw, 44px); box-shadow: var(--schaduw); scroll-margin-top: 160px; }
.kaart-sectie--breed { grid-column: 1 / -1; }
.kaart-sectie--oranje { background: var(--oranje); box-shadow: none; }
.kaart-sectie h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kaart-sectie h2 small { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: .5em; letter-spacing: 0; color: var(--tekst-zacht); }
.kaart-sectie--oranje h2 small { color: rgba(29, 33, 38, .75); }
.kaart-sectie .kaart-intro { color: var(--tekst-zacht); margin: 0 0 14px; font-size: 16px; }
.kaart-sectie--oranje .kaart-intro { color: rgba(29, 33, 38, .8); }
.kaart-lijst { list-style: none; margin: 18px 0 0; padding: 0; }
.kaart-lijst--twee { columns: 2; column-gap: 48px; }
.kaart-lijst--twee li { break-inside: avoid; }
.kaart-item { padding: 12px 0; border-bottom: 1px dashed rgba(29, 33, 38, .16); }
.kaart-item:last-child { border-bottom: 0; }
.kaart-regel { display: flex; align-items: baseline; gap: 10px; }
.kaart-naam { font-weight: 700; font-size: 18px; line-height: 1.3; }
.kaart-stippen { flex: 1; border-bottom: 2px dotted rgba(29, 33, 38, .25); transform: translateY(-5px); min-width: 20px; }
.kaart-prijs { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 18px; }
.kaart-omschrijving { display: block; font-family: var(--font-accent); font-style: italic; color: var(--tekst-zacht); font-size: 16px; line-height: 1.4; margin-top: 2px; }
.kaart-sectie--oranje .kaart-omschrijving { color: rgba(29, 33, 38, .78); }
.kaart-item .badge { margin-left: 6px; vertical-align: 3px; font-size: 10.5px; padding: 3px 8px; }
.kaart-noot { display: flex; gap: 16px; align-items: center; background: var(--inkt); color: var(--creme); border-radius: var(--rond); padding: 22px 26px; margin-top: clamp(28px, 4vw, 48px); }
.kaart-noot svg { width: 34px; height: 34px; flex: none; color: var(--oranje); }
.kaart-noot p { margin: 0; }
.kaart-noot a { color: var(--oranje-licht); }

/* --------------------------------------------------------------- arrangementen en buffetten */
.arrangement { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--rond-l); overflow: hidden; background: var(--wit); box-shadow: var(--schaduw); }
.arrangement + .arrangement { margin-top: clamp(20px, 3vw, 32px); }
.arrangement-beeld { min-height: 340px; position: relative; background: var(--oranje-zacht); }
.arrangement-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arrangement-tekst { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.arrangement-tekst h3 { font-size: clamp(30px, 3.2vw, 44px); }
.arrangement--om .arrangement-beeld { order: 2; }
.arrangement-prijs { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 22px; }
.arrangement-prijs strong { font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -0.04em; color: var(--koraal); line-height: 1; }
.arrangement-prijs span { color: var(--tekst-zacht); font-weight: 600; }

.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tegel { display: flex; flex-direction: column; gap: 10px; background: var(--wit); border-radius: var(--rond); padding: 26px; text-decoration: none; box-shadow: var(--schaduw); transition: transform .45s var(--veer), box-shadow .3s; }
.tegel:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: var(--schaduw-l); }
.tegel-icoon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--oranje); margin-bottom: 6px; }
.tegel:nth-child(3n+2) .tegel-icoon { background: var(--bubbel); }
.tegel:nth-child(3n) .tegel-icoon { background: var(--oranje-zacht); }
.tegel-icoon svg { width: 28px; height: 28px; }
.tegel h3 { margin: 0; font-size: 22px; }
.tegel p { margin: 0; color: var(--tekst-zacht); font-size: 16px; }
.tegel .tekstlink { margin-top: auto; padding-top: 8px; align-self: flex-start; }

.menu-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.menukaartje { background: var(--wit); border-radius: var(--rond-l); padding: 30px 28px; box-shadow: var(--schaduw); display: flex; flex-direction: column; position: relative; }
.menukaartje--uitgelicht { background: var(--inkt); color: var(--creme); }
.menukaartje h3 { font-size: 28px; margin-bottom: 18px; }
.menukaartje dl { margin: 0 0 18px; display: grid; gap: 12px; }
.menukaartje dt { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--oranje-diep); }
.menukaartje--uitgelicht dt { color: var(--oranje); }
.menukaartje dd { margin: 2px 0 0; font-weight: 600; line-height: 1.4; }
.menukaartje dd small { display: block; font-weight: 400; font-family: var(--font-accent); font-style: italic; opacity: .75; font-size: 15px; margin-top: 2px; }
.menukaartje-prijs { margin-top: auto; padding-top: 18px; border-top: 2px dashed rgba(29, 33, 38, .14); display: flex; align-items: baseline; justify-content: space-between; }
.menukaartje--uitgelicht .menukaartje-prijs { border-color: rgba(255, 255, 255, .18); }
.menukaartje-prijs strong { font-size: 38px; letter-spacing: -0.04em; line-height: 1; }
.menukaartje-prijs span { font-size: 15px; opacity: .7; font-weight: 600; }

.buffet { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.buffet-kaart { background: var(--wit); border-radius: var(--rond-l); padding: clamp(28px, 3.4vw, 44px); box-shadow: var(--schaduw); }
.buffet-kaart h3 { font-size: clamp(28px, 3vw, 40px); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.buffet-kaart h3 span { font-size: .62em; color: var(--koraal); letter-spacing: -0.03em; }
.buffet-kaart h4 { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--oranje-diep); margin: 22px 0 8px; }
.buffet-kaart ul { list-style: none; padding: 0; margin: 0; }
.buffet-kaart li { padding: 6px 0 6px 22px; position: relative; line-height: 1.45; }
.buffet-kaart li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 9px; border-radius: 50%; background: var(--oranje); }
.prijslijst { list-style: none; padding: 0; margin: 0; }
.prijslijst li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px dashed rgba(29, 33, 38, .16); }
.prijslijst li:last-child { border-bottom: 0; }
.prijslijst .kaart-omschrijving { margin-top: 0; }
.melding { display: flex; gap: 14px; align-items: flex-start; background: var(--oranje-zacht); border-radius: var(--rond); padding: 18px 22px; margin-top: 24px; font-size: 16px; }
.melding svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.melding p { margin: 0; }

/* --------------------------------------------------------------- formulieren */
.formulier-kaart { background: var(--wit); border-radius: var(--rond-l); padding: clamp(26px, 4vw, 52px); box-shadow: var(--schaduw-l); position: relative; }
.tabs { display: inline-flex; background: var(--creme-diep); padding: 5px; border-radius: 999px; margin-bottom: 30px; gap: 4px; flex-wrap: wrap; }
.tab { border: 0; background: transparent; font: 700 16px var(--font); padding: 11px 20px; border-radius: 999px; cursor: pointer; color: var(--inkt); transition: background .25s, color .25s; }
.tab[aria-selected="true"] { background: var(--inkt); color: var(--creme); }
.velden { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 16px; }
.veld { grid-column: span 6; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.veld--half { grid-column: span 3; }
.veld--derde { grid-column: span 2; }
.veld label, .veld legend { font-weight: 700; font-size: 15px; }
.veld label small { font-weight: 500; color: var(--tekst-zacht); }
.veld input, .veld select, .veld textarea {
  width: 100%; font: 500 17px/1.4 var(--font); color: var(--inkt); background: var(--creme);
  border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; min-height: 54px;
  transition: border-color .2s, background .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.veld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2126' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.veld textarea { min-height: 130px; resize: vertical; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: rgba(29, 33, 38, .15); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--inkt); background: var(--wit); box-shadow: 0 0 0 4px rgba(245, 167, 0, .35); }
.veld input[aria-invalid="true"], .veld select[aria-invalid="true"] { border-color: var(--koraal); }
.veld-hulp { font-size: 14px; color: var(--tekst-zacht); }
.veld-label { font-weight: 700; font-size: 15px; }

/* dagkiezer bij reserveren: de komende twee weken als knoppen */
.dagkiezer { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; min-width: 0; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dag {
  flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 76px; padding: 10px 10px 12px; border-radius: 16px; border: 2px solid transparent;
  background: var(--creme); color: var(--inkt); font: 600 14px/1.1 var(--font); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .3s var(--veer);
}
.dag:hover { border-color: rgba(29, 33, 38, .22); transform: translateY(-2px); }
.dag-naam { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oranje-diep); }
.dag-nr { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.dag-maand { font-size: 13px; color: var(--tekst-zacht); }
.dag-kort { font-size: 11px; font-weight: 700; color: var(--koraal-diep); }
.dag[aria-pressed="true"] { background: var(--inkt); color: var(--creme); }
.dag[aria-pressed="true"] .dag-naam { color: var(--oranje); }
.dag[aria-pressed="true"] .dag-maand { color: rgba(255, 246, 234, .75); }
.dag[aria-pressed="true"] .dag-kort { color: var(--oranje-licht); }
.datum-anders { font-size: 14px; font-weight: 600; color: var(--tekst-zacht); margin-top: 2px; }

/* datumveld: overal klikbaar, met een agenda icoon */
.veld input[type="date"] {
  position: relative; display: block; text-align: left; cursor: pointer; padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2126' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 20px;
}
.veld input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.veld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.veld-hulp.is-fout { color: #c0391b; font-weight: 600; }
.personen { display: flex; align-items: center; gap: 0; background: var(--creme); border-radius: 14px; overflow: hidden; border: 2px solid transparent; }
.personen button { width: 54px; height: 54px; border: 0; background: transparent; font: 800 24px var(--font); cursor: pointer; color: var(--inkt); flex: none; }
.personen button:hover { background: var(--oranje-zacht); }
.personen input { text-align: center; background: transparent !important; border: 0 !important; box-shadow: none !important; font-weight: 800; font-size: 20px; padding: 0; min-height: 54px; }
.honing { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formulier-voet { grid-column: span 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.formulier-voet p { margin: 0; font-size: 14px; color: var(--tekst-zacht); max-width: 46ch; }
.formulier-status { grid-column: span 6; display: none; padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.formulier-status.is-fout { display: block; background: #ffe2d8; color: #8a2a12; }
.is-bezig .knop { opacity: .7; pointer-events: none; }
.bedankt { display: none; text-align: center; padding: 30px 10px; }
.bedankt.is-zichtbaar { display: block; animation: plop .6s var(--veer); }
.bedankt-bol { width: 110px; height: 110px; margin: 0 auto 24px; border-radius: 50%; background: var(--oranje); display: grid; place-items: center; position: relative; }
.bedankt-bol svg { width: 54px; height: 54px; }
.bedankt-bol::before, .bedankt-bol::after { content: ""; position: absolute; border-radius: 50%; background: var(--koraal); }
.bedankt-bol::before { width: 22px; height: 22px; right: -14px; top: 4px; }
.bedankt-bol::after { width: 12px; height: 12px; right: -26px; top: -14px; background: var(--bubbel); }
.bedankt h3 { font-size: clamp(30px, 3.4vw, 44px); }
@keyframes plop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

.contact-raster { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-zij { display: grid; gap: 20px; }
.contact-regel { display: flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 700; font-size: 19px; padding: 6px 0; }
.contact-regel span:first-child { width: 46px; height: 46px; border-radius: 50%; background: var(--oranje); display: grid; place-items: center; flex: none; color: var(--inkt); }
.contact-regel svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------- tekstpagina */
.lopende-tekst h2 { font-size: clamp(30px, 3.6vw, 44px); margin-top: 1.6em; }
.lopende-tekst h3 { margin-top: 1.4em; }
.lopende-tekst p, .lopende-tekst li { color: var(--tekst-zacht); }
.lopende-tekst li { margin-bottom: .4em; }

.vacature { background: var(--wit); border-radius: var(--rond-l); box-shadow: var(--schaduw-l); overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; }
.vacature-beeld { position: relative; min-height: 420px; background: var(--oranje); }
.vacature-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vacature-tekst { padding: clamp(28px, 4vw, 56px); }
.vacature-feiten { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.vacature-tekst h3 { margin-top: 1.4em; font-size: 22px; }

/* --------------------------------------------------------------- linkpagina (link in bio) */
.links-pagina { padding-bottom: clamp(90px, 10vw, 140px); }
.links-vak { position: relative; z-index: 2; max-width: 600px; }
.links-kop { text-align: center; }
.links-bol { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 6px solid var(--creme); box-shadow: var(--schaduw-l); margin: 0 auto 22px; }
.links-bol img { width: 100%; height: 100%; object-fit: cover; display: block; }
.links-pagina h1 { font-size: clamp(46px, 9vw, 76px); max-width: none; margin: 0 0 10px; }
.links-intro { font-weight: 600; margin: 0 0 12px; }
.links-status { margin: 0 0 28px; }
.links-status .status { background: rgba(255, 255, 255, .45); padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.linklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.linklijst a { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: var(--rond); background: var(--wit); color: var(--inkt);
  text-decoration: none; font-weight: 700; font-size: 18px; line-height: 1.2; box-shadow: var(--schaduw); transition: transform .35s var(--veer); }
.linklijst a:hover { transform: translateY(-2px) rotate(-.6deg); }
.linklijst a:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
.link-icoon { width: 44px; height: 44px; border-radius: 50%; background: var(--oranje); color: var(--inkt); display: grid; place-items: center; flex: none; }
.link-icoon svg { width: 22px; height: 22px; }
.linklijst a > span:nth-child(2) { flex: 1; }
.link-pijl { display: grid; opacity: .45; }
.link-pijl svg { width: 20px; height: 20px; }
.link--hoofd a { background: var(--inkt); color: var(--creme); }
.link--hoofd .link-pijl { opacity: .8; }
.links-sociaal { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.links-sociaal a { width: 52px; height: 52px; border-radius: 50%; background: var(--inkt); color: var(--oranje); display: grid; place-items: center; transition: transform .35s var(--veer); }
.links-sociaal a:hover { transform: scale(1.08); }
.links-sociaal svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------- voet */
.voet { background: var(--inkt); color: var(--creme); padding: clamp(64px, 9vw, 110px) 0 32px; position: relative; overflow: hidden; }
.voet a { color: var(--creme); text-decoration: none; }
.voet a:hover { color: var(--oranje); }
.voet-raster { display: grid; grid-template-columns: 1.2fr 1fr 1.25fr .9fr; gap: 36px; position: relative; z-index: 2; }
.voet .voet-kop { font-family: inherit; line-height: 1.2; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--oranje); margin-bottom: 16px; font-weight: 800; }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.voet p { color: rgba(255, 246, 234, .75); }
.voet .uren { font-size: 16px; }
.voet .uren th, .voet .uren td { border-color: rgba(255, 255, 255, .12); padding: 5px 0; }
.voet .uren td { white-space: nowrap; padding-left: 12px; }
.voet .uren .dicht { color: rgba(255, 246, 234, .45); }
.voet .uren-extra { font-size: 14px; color: rgba(255, 246, 234, .75); }
.voet .uren-extra a { text-decoration: underline; text-decoration-color: var(--oranje); }
.voet .voet-woord {
  font-weight: 800; font-size: clamp(90px, 22vw, 330px); letter-spacing: -0.035em; line-height: .78; margin: clamp(48px, 7vw, 90px) 0 0;
  color: transparent; -webkit-text-stroke: 2px rgba(245, 167, 0, .55); white-space: nowrap; user-select: none; position: relative; z-index: 1;
  transition: color .6s;
}
.voet .voet-woord:hover { color: var(--oranje); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: rgba(255, 246, 234, .6); position: relative; z-index: 2; }
.voet-onder a { color: rgba(255, 246, 234, .75); }
.sociaal { display: flex; gap: 10px; margin-top: 18px; }
.sociaal a { width: 46px; height: 46px; border-radius: 50%; background: var(--inkt-zacht); display: grid; place-items: center; transition: background .25s, transform .4s var(--veer); }
.sociaal a:hover { background: var(--oranje); color: var(--inkt); transform: translateY(-3px) rotate(-8deg); }
.sociaal svg { width: 20px; height: 20px; }

.fotomozaiek { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fotomozaiek .foto-rond { aspect-ratio: 1; }
.fotomozaiek .foto-rond:nth-child(2) { transform: translateY(36px); }
.fotomozaiek .foto-rond:nth-child(4) { transform: translateY(36px); }
.fotomozaiek .foto-rond:nth-child(odd) { border-radius: var(--rond-l) var(--rond-l) var(--rond-l) 50%; }
.fotomozaiek .foto-rond:nth-child(even) { border-radius: 50% var(--rond-l) var(--rond-l) var(--rond-l); }

/* tijdelijke vlak zolang een foto nog ontbreekt */
.foto-mist { display: block; width: 100%; height: 100%; min-height: 180px; background: radial-gradient(circle at 30% 30%, var(--oranje-licht), var(--oranje) 60%, var(--koraal)); }
.arrangement-beeld .foto-mist, .vacature-beeld .foto-mist { position: absolute; inset: 0; }

/* label dat alleen in de preview zichtbaar is */
.preview-pil { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: inline-flex; align-items: center; gap: 9px; max-width: calc(100% - 32px); background: var(--inkt); color: var(--creme); font-size: 14px; font-weight: 600; line-height: 1.3; padding: 10px 16px; border-radius: 999px; box-shadow: var(--schaduw-l); }
.preview-pil .status-stip { background: var(--oranje); }
@media (max-width: 860px) { .preview-pil { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); font-size: 13px; } }

/* zwevende belknop op mobiel */
.mobiel-balk { display: none; }

/* --------------------------------------------------------------- verschijnen */
.js .onthul { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--zacht), transform .9s var(--zacht); transition-delay: var(--vertraging, 0s); }
.js .onthul.is-zichtbaar { opacity: 1; transform: none; }
.js .gerecht.onthul.is-zichtbaar:nth-child(1) { transform: rotate(-1.6deg); }
.js .gerecht.onthul.is-zichtbaar:nth-child(2) { transform: rotate(1deg) translateY(18px); }
.js .gerecht.onthul.is-zichtbaar:nth-child(3) { transform: rotate(-.6deg); }
.js .gerecht.onthul.is-zichtbaar:hover { transform: rotate(0) translateY(-8px); }

/* --------------------------------------------------------------- responsief */
@media (max-width: 1080px) {
  .waarden { grid-template-columns: repeat(2, 1fr); }
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .praktisch { grid-template-columns: 1fr 1fr; }
  .praktisch .blok:first-child { grid-column: 1 / -1; }
  .tegels { grid-template-columns: repeat(2, 1fr); }
  .menu-kaarten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --kop-hoogte: 74px; }
  .held { min-height: 0; }
  .held-raster, .duo, .feest, .paginakop-raster, .contact-raster, .vacature { grid-template-columns: 1fr; }
  .held-beeld { max-width: 460px; justify-self: center; margin-top: 12px; }
  .duo--om .duo-beeld { order: 0; }
  .raster-3 { grid-template-columns: 1fr; gap: 40px; }
  .gerecht:nth-child(n) { transform: none; }
  .js .gerecht.onthul.is-zichtbaar:nth-child(n) { transform: none; }
  .raster-2, .kaart-raster, .buffet { grid-template-columns: 1fr; }
  .kaart-lijst--twee { columns: 1; }
  .arrangement { grid-template-columns: 1fr; }
  .arrangement--om .arrangement-beeld { order: 0; }
  .arrangement-beeld { min-height: 260px; }
  .paginakop-bol { display: none; }
  .opties { grid-template-columns: 1fr; }
  .vacature-beeld { min-height: 300px; }
  .chips-balk { top: 70px; }
  .mobiel-balk {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; gap: 8px;
    transform: translateY(140%); transition: transform .45s var(--veer);
  }
  .mobiel-balk.is-zichtbaar { transform: none; }
  /* ruimte onderaan, zodat de belknoppen de laatste links nooit bedekken */
  .voet { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .mobiel-balk .knop { flex: 1; box-shadow: 0 12px 30px -10px rgba(29, 33, 38, .6); }
  body { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .velden { grid-template-columns: 1fr; }
  .veld, .veld--half, .veld--derde, .formulier-voet, .formulier-status { grid-column: 1 / -1; }
  .praktisch, .waarden, .tegels, .menu-kaarten, .voet-raster { grid-template-columns: 1fr; }
  .lint { transform: rotate(-2deg); }
  .sticker--links { left: 0; }
  .sticker--rechts { right: 0; }
  .prijs-bol { width: 80px; height: 80px; font-size: 19px; right: -4px; }
  .kaart-naam, .kaart-prijs { font-size: 17px; }
  .knoppen .knop { flex: 1 1 auto; }
  .tabs { display: flex; }
  .tab { flex: 1; padding: 11px 12px; }
}

/* --------------------------------------------------------------- minder beweging */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bubbels { display: none; }
  .js .onthul { opacity: 1; transform: none; }
  .lint-rij { animation: none; }
}

/* --------------------------------------------------------------- printen */
@media print {
  .kop, .voet, .mobiel-balk, .chips-balk, .bubbels, .golf, .lint, .slot, .knoppen, .paginakop-bol { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .paginakop { background: #fff; padding: 0 0 12pt; }
  .kaart-sectie { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .sectie { padding-block: 12pt; }
}