/* Brasserie Oker (TEST): flessengroen, crème, koper en bordeaux. Gilda Display voor koppen, Newsreader cursief voor accenten, Hanken Grotesk voor tekst. */
@font-face{font-family:"Gilda Display";src:url(/fonts/gilda-display.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --groen:#24352C;--groen-d:#1A2620;--groen-l:#2F4539;
  --creme:#F4EAD8;--creme-l:#FAF5EC;--creme-d:#EBDFC8;
  --koper:#B5713A;--koper-l:#CC9764;--koper-d:#8A5428;
  --bordeaux:#561A1F;--bordeaux-d:#431317;
  --inkt:#1F2B24;--grijs:#4E5A52;
  --kop:"Gilda Display","Didot","Bodoni 72",Georgia,serif;
  --accent:"Newsreader",Georgia,serif;
  --tekst:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px;--rand:clamp(20px,4vw,48px);
  --zacht:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme-l);color:var(--inkt);font:400 17px/1.7 var(--tekst);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--kop);font-weight:400;line-height:1.12;margin:0 0 .5em;letter-spacing:.005em;text-wrap:balance}
h1 em,h2 em,h3 em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
p{margin:0 0 1.1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--rand)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:1000;padding:12px 18px;background:var(--creme);color:var(--groen);border-radius:4px}
:focus-visible{outline:2px solid var(--koper-l);outline-offset:3px}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;border:1px solid transparent;border-radius:2px;font:600 13px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s var(--zacht),color .3s var(--zacht),border-color .3s var(--zacht),transform .3s var(--zacht)}
.knop svg{width:18px;height:18px;flex:none}
.knop .pijl{transition:transform .3s var(--zacht)}
.knop:hover .pijl{transform:translateX(4px)}
.knop--koper{background:var(--koper-d);color:#fff}
.knop--koper:hover{background:#9C6031}
.knop--groen{background:var(--groen);color:var(--creme-l)}
.knop--groen:hover{background:var(--groen-l)}
.knop--licht{border-color:rgba(244,234,216,.6);color:var(--creme-l);background:transparent}
.knop--licht:hover{background:var(--creme-l);color:var(--groen);border-color:var(--creme-l)}
.knop--rand{border-color:var(--groen);color:var(--groen)}
.knop--rand:hover{background:var(--groen);color:var(--creme-l)}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.knoppen--midden{justify-content:center}
.tekstlink{display:inline-flex;align-items:center;gap:8px;color:var(--koper-d);font:600 13px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1px solid currentColor}
.tekstlink svg{width:16px;height:16px;transition:transform .3s var(--zacht)}
.tekstlink:hover svg{transform:translateX(4px)}
.tekstlink--licht{color:var(--koper-l)}
.rond{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--groen);background:transparent;color:var(--groen);cursor:pointer;transition:background .3s,color .3s}
.rond svg{width:20px;height:20px}
.rond:hover{background:var(--groen);color:var(--creme-l)}

.kicker{margin:0 0 18px;font:600 12.5px/1.4 var(--tekst);letter-spacing:.26em;text-transform:uppercase;color:var(--koper-l)}
.kicker--donker{color:var(--koper-d)}
.kicker{text-wrap:balance}
.nb{white-space:nowrap}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.65}
.klein{font-size:14.5px;opacity:.85}

/* sierlijn met ruit */
.sier{display:block;width:150px;height:16px;margin:18px 0 22px;color:var(--koper)}
.sier path{fill:none;stroke:currentColor;stroke-width:1.2}
.sier--licht{color:var(--koper-l);margin-left:auto;margin-right:auto}
.sier--klein{width:110px;margin:0 auto 12px}
.sier--voet{width:100%;max-width:none;height:16px;margin:40px 0;color:rgba(204,151,100,.55)}

/* ---------- header ---------- */
.kop{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--creme-l);transition:background .4s var(--zacht),box-shadow .4s var(--zacht)}
.kop__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1400px;margin:0 auto;padding:22px var(--rand);transition:padding .4s var(--zacht)}
.is-gescrold .kop{background:var(--groen);box-shadow:0 10px 30px rgba(10,18,14,.25)}
.is-gescrold .kop__in{padding-top:12px;padding-bottom:12px}
.logo{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;line-height:1}
.logo__woord{font:400 34px/1 var(--kop);letter-spacing:.32em;text-transform:uppercase;margin-right:-.32em}
.logo__onder{white-space:nowrap;margin-top:7px;font:600 10px/1 var(--tekst);letter-spacing:.34em;text-transform:uppercase;color:var(--koper-l);margin-right:-.34em}
.kop__logo{justify-self:center}
#menu{justify-self:start}
.menu__links{display:flex;gap:30px}
.menu__links a{position:relative;padding:12px 0;font:600 12.5px/1 var(--tekst);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:inherit}
.menu__links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--koper-l);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--zacht)}
.menu__links a:hover::after,.menu__links a[aria-current="page"]::after{transform:scaleX(1)}
.alleen-menu{display:none!important}
.kop__rechts{justify-self:end;display:flex;align-items:center;gap:22px}
.kop__tel{display:inline-flex;align-items:center;gap:9px;padding:12px 0;font:600 13px/1 var(--tekst);letter-spacing:.08em;text-decoration:none}
.kop__tel svg{width:16px;height:16px;color:var(--koper-l)}
.knop--kop{min-height:46px;padding:12px 22px}
.menu-knop{display:none}

@media (max-width:999px){
  .kop__in{grid-template-columns:1fr auto;padding:14px var(--rand)}
  .is-gescrold .kop__in{padding-top:10px;padding-bottom:10px}
  .kop__logo{grid-column:1;grid-row:1;justify-self:start;align-items:flex-start}
  .logo__woord{font-size:27px}
  .logo__onder{font-size:9px;margin-top:6px}
  .kop__rechts{grid-column:2;grid-row:1;gap:10px}
  .kop__tel{display:none}
  .knop--kop{min-height:44px;padding:10px 16px;font-size:12px;letter-spacing:.16em}
  .menu-knop{display:grid;place-items:center;width:48px;height:44px;padding:0;border:1px solid rgba(244,234,216,.55);border-radius:10px;background:transparent;color:var(--creme-l);cursor:pointer}
  .menu-knop span,.menu-knop span::before,.menu-knop span::after{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .35s var(--zacht),opacity .2s}
  .menu-knop span{position:relative}
  .menu-knop span::before,.menu-knop span::after{content:"";position:absolute;left:0}
  .menu-knop span::before{top:-6px}
  .menu-knop span::after{top:6px}
  .menu-knop[aria-expanded="true"] span{background:transparent}
  .menu-knop[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .menu-knop[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
  #menu{position:fixed;inset:0;width:100%;height:100%;justify-self:stretch;align-self:stretch;z-index:-1;display:flex;flex-direction:column;justify-content:space-between;padding:112px var(--rand) 28px;background:var(--bordeaux);overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .4s var(--zacht),visibility 0s .4s}
  #menu.open{visibility:visible;opacity:1;transition:opacity .4s var(--zacht)}
  html.menu-open{overflow:hidden}
  html.menu-open .kop{background:transparent;box-shadow:none}
  .menu__links{flex-direction:column;align-items:center;gap:6px;margin:auto 0}
  .menu__links a{padding:11px 0;font:400 24px/1.2 var(--kop);letter-spacing:.18em;text-align:center}
  .menu__links a::after{bottom:6px;left:30%;right:30%}
  .alleen-menu{display:block!important}
  .menu__links a.alleen-menu{display:block!important}
  .menu__onder{text-align:center;padding-top:24px}
  .menu__onder p{margin:0 0 18px;font-size:14.5px;color:rgba(250,245,236,.8)}
  .menu__knoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .menu__knoppen .knop--koper{background:var(--koper)}
  .menu__links a,.menu__onder{opacity:0;transform:translateY(12px);transition:opacity .45s var(--zacht),transform .45s var(--zacht)}
  #menu.open .menu__links a,#menu.open .menu__onder{opacity:1;transform:none}
  #menu.open .menu__links a:nth-child(2){transition-delay:.05s}
  #menu.open .menu__links a:nth-child(3){transition-delay:.1s}
  #menu.open .menu__links a:nth-child(4){transition-delay:.15s}
  #menu.open .menu__links a:nth-child(5){transition-delay:.2s}
  #menu.open .menu__onder{transition-delay:.25s}
}
@media (max-width:999px) and (prefers-reduced-motion:reduce){.menu__links a,.menu__onder{opacity:1;transform:none}}
@media (max-width:380px){.knop--kop{padding:10px 12px;letter-spacing:.12em}.logo__woord{font-size:24px}.logo__onder{letter-spacing:.22em;font-size:8.5px}}

/* ---------- hero ---------- */
.held{position:relative;display:grid;align-items:center;min-height:max(640px,94svh);padding:150px 0 120px;color:var(--creme-l);text-align:center;overflow:hidden;background:var(--groen-d)}
.held__foto,.paginakop__foto,.oproep__foto{position:absolute;inset:0;overflow:hidden}
.held__foto img,.paginakop__foto img,.oproep__foto img{width:100%;height:100%;object-fit:cover}
.held__foto::after,.paginakop__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,24,19,.72) 0%,rgba(16,24,19,.38) 38%,rgba(16,24,19,.55) 70%,rgba(16,24,19,.86) 100%)}
.held__in{position:relative;max-width:980px}
.held h1{font-size:clamp(44px,7.2vw,96px);line-height:1.02;margin:0}
.held h1 em{display:block;color:var(--creme)}
.held .lead{max-width:640px;margin:0 auto;color:rgba(250,245,236,.9)}
.held__tijden{position:absolute;left:0;right:0;bottom:30px;margin:0;font:600 12px/1.5 var(--tekst);letter-spacing:.24em;text-transform:uppercase;color:rgba(250,245,236,.82);padding:0 var(--rand)}
@media (prefers-reduced-motion:no-preference){
  .held__foto img,.paginakop__foto img{animation:oker-zoom 16s var(--zacht) both}
  @keyframes oker-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
}

/* paginakop op subpagina's */
.paginakop{position:relative;padding:170px 0 90px;color:var(--creme-l);text-align:center;background:var(--groen);overflow:hidden}
.paginakop__in{position:relative;max-width:880px}
.paginakop h1{font-size:clamp(40px,5.6vw,74px);margin:0}
.paginakop .lead{max-width:640px;margin:0 auto;color:rgba(250,245,236,.9)}
.paginakop--zonder{padding-bottom:70px;background:radial-gradient(ellipse at 50% 0%,var(--groen-l),var(--groen) 70%)}
.nietgevonden{min-height:80svh;display:grid;align-items:center}
.kruimel{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px;padding:0;list-style:none;font:600 11.5px/1.4 var(--tekst);letter-spacing:.2em;text-transform:uppercase;color:rgba(250,245,236,.75)}
.kruimel li+li::before{content:"·";margin-right:8px;color:var(--koper-l)}
.kruimel a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.kruimel li{display:flex;align-items:center}
.kruimel a:hover{color:var(--creme-l)}

/* ---------- secties ---------- */
.sectie{padding:clamp(76px,10vw,140px) 0}
.sectie--groen{background:var(--groen);color:var(--creme-l)}
.sectie--creme-d{background:var(--creme)}
.sectiekop{max-width:720px;margin:0 auto 54px;text-align:center}
.sectiekop h2{font-size:clamp(34px,4.4vw,56px)}
.sectiekop p:last-child{margin:0;color:rgba(250,245,236,.85)}
.sectiekop--donker p:last-child{color:var(--grijs)}
.sectie--groen h2{color:var(--creme-l)}
.sectie h2{font-size:clamp(32px,4vw,52px)}
.tekstkolom{max-width:780px}

/* kader met hoekornamenten */
.kader{position:relative;margin:0;padding:12px;border:1px solid rgba(181,113,58,.55)}
.kader__foto{overflow:hidden}
.kader__foto img{width:100%;transition:transform 1.2s var(--zacht)}
.kader:hover .kader__foto img{transform:scale(1.04)}
.hoek{position:absolute;width:22px;height:22px;border:1px solid var(--koper);z-index:1}
.hoek::after{content:"";position:absolute;width:5px;height:5px;background:var(--koper);transform:rotate(45deg)}
.hoek--lb{top:-6px;left:-6px;border-right:0;border-bottom:0}
.hoek--rb{top:-6px;right:-6px;border-left:0;border-bottom:0}
.hoek--lo{bottom:-6px;left:-6px;border-right:0;border-top:0}
.hoek--ro{bottom:-6px;right:-6px;border-left:0;border-top:0}
.hoek--lb::after{top:-3px;left:-3px}.hoek--rb::after{top:-3px;right:-3px}.hoek--lo::after{bottom:-3px;left:-3px}.hoek--ro::after{bottom:-3px;right:-3px}
.kader--klein{padding:9px}
.sectie--groen .kader{border-color:rgba(204,151,100,.5)}

/* liefdesbrief */
.brief__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,110px);align-items:center}
.brief__groot{font:italic 300 clamp(22px,2.3vw,29px)/1.45 var(--accent);color:var(--groen);margin-bottom:1em}
.brief__tekst h2{font-size:clamp(32px,3.8vw,50px)}
.handtekening{margin:28px 0 0;font:italic 400 30px/1 var(--accent);color:var(--koper-d)}
.handtekening::before{content:"";display:inline-block;width:42px;height:1px;margin:0 14px 8px 0;background:currentColor;vertical-align:middle}
.brief__beeld .kader img{aspect-ratio:4/4.4;object-fit:cover}

/* ingangen */
.ingangen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ingang{display:flex;flex-direction:column;text-decoration:none;color:var(--creme-l);background:var(--groen-d);border:1px solid rgba(204,151,100,.28);transition:border-color .4s var(--zacht),transform .4s var(--zacht)}
.ingang__foto{display:block;overflow:hidden;aspect-ratio:4/3.1}
.ingang__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--zacht)}
.ingang__tekst{display:flex;flex-direction:column;gap:10px;padding:28px 28px 30px;flex:1}
.ingang__nr{font:italic 400 22px/1 var(--accent);color:var(--koper-l)}
.ingang strong{font:400 30px/1.1 var(--kop)}
.ingang__tekst>span:not([class]){color:rgba(250,245,236,.82);font-size:16px}
.ingang__link{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;color:var(--koper-l)}
.ingang__link svg{width:16px;height:16px;transition:transform .3s var(--zacht)}
.ingang:hover{border-color:var(--koper-l);transform:translateY(-4px)}
.ingang:hover .ingang__foto img{transform:scale(1.06)}
.ingang:hover .ingang__link svg{transform:translateX(5px)}

/* carrousel met gerechten */
.kaartje__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.kaartje__kop h2{margin:0}
.carrousel__spoor{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;overscroll-behavior-x:contain}
.carrousel__spoor::-webkit-scrollbar{display:none}
.gerecht{scroll-snap-align:start}
.gerecht__foto{overflow:hidden;aspect-ratio:4/5;margin-bottom:18px;border:1px solid rgba(181,113,58,.35);padding:8px;background:var(--creme-l)}
.gerecht__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--zacht)}
.gerecht:hover .gerecht__foto img{transform:scale(1.05)}
.gerecht__soort{margin:0 0 6px;font:600 11.5px/1.3 var(--tekst);letter-spacing:.22em;text-transform:uppercase;color:var(--koper-d)}
.gerecht h3{font-size:27px;margin:0 0 6px}
.gerecht__bij{margin:0 0 8px;color:var(--grijs);font-size:15.5px}
.gerecht__prijs{margin:0;font:italic 400 21px/1 var(--accent);color:var(--groen)}
.carrousel__knoppen{display:flex;justify-content:center;gap:12px;margin-top:32px}

/* open keuken */
.keuken__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:center}
.keuken__grid--om .keuken__beeld{order:-1}
.keuken__beeld{position:relative;padding-bottom:70px}
.keuken__groot{overflow:hidden}
.keuken__groot img{width:100%;aspect-ratio:4/3.2;object-fit:cover}
.keuken__klein{position:absolute;right:-16px;bottom:0;width:42%;background:var(--creme)}
.keuken__grid--om .keuken__klein{right:auto;left:-16px}
.keuken:not(.sectie--creme-d) .keuken__klein{background:var(--creme-l)}
.keuken__klein img{aspect-ratio:4/5;object-fit:cover}
.keuken__tekst h2{font-size:clamp(32px,3.8vw,50px)}
.keuken__tekst .knop{margin-top:12px}

/* feiten als omlijste badges */
.feiten{padding:clamp(60px,7vw,96px) 0}
.feiten__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feit{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:170px;padding:26px 18px;text-align:center;border:1px solid rgba(181,113,58,.55);outline:1px solid rgba(181,113,58,.55);outline-offset:-8px}
.feit__getal{font:400 50px/1 var(--kop);color:var(--groen)}
.feit__getal--woord{font-size:38px;line-height:1.3}
.feit__tekst{font:600 12px/1.5 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);max-width:200px}

/* galerij */
.galerij{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px}
.galerij a{display:block;overflow:hidden;position:relative}
.galerij a::after{content:"";position:absolute;inset:0;border:1px solid rgba(204,151,100,0);transition:border-color .4s,inset .4s;pointer-events:none}
.galerij a:hover::after{inset:10px;border-color:rgba(244,234,216,.7)}
.galerij img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--zacht)}
.galerij a:hover img{transform:scale(1.06)}
.galerij__breed{grid-column:span 2}

/* cadeau */
.cadeau__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,100px);align-items:center;max-width:1060px}
.cadeau__beeld img{aspect-ratio:4/4.6;object-fit:cover}
.cadeau__tekst h2{font-size:clamp(32px,3.8vw,50px)}

/* bezoek */
.bezoek__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,100px);align-items:start}
.bezoek p{color:rgba(250,245,236,.86)}
.bezoek__tijden{padding:34px 34px 26px;border:1px solid rgba(204,151,100,.45);background:var(--groen-d)}
.bezoek__tijden h3{font-size:28px;color:var(--creme-l)}
.tijden{margin:0 0 18px}
.tijden div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed rgba(31,43,36,.2)}
.tijden dt{font-weight:600}
.tijden dd{margin:0}
.bezoek .tijden div,.tijden--licht div{border-color:rgba(244,234,216,.2)}
.tijden .dicht dd{opacity:.65;font-style:italic}

/* oproep (afsluiter) */
.oproep{position:relative;padding:clamp(100px,13vw,170px) 0;color:var(--creme-l);text-align:center;overflow:hidden;background:var(--groen-d)}
.oproep__foto::after{content:"";position:absolute;inset:0;background:rgba(22,32,26,.74)}
.oproep__in{position:relative;max-width:820px}
.oproep h2{font-size:clamp(36px,5vw,64px);color:var(--creme-l)}
.oproep p{max-width:600px;margin:0 auto;color:rgba(250,245,236,.9)}

/* principes */
.principes__lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;list-style:none}
.principes__lijst li{padding:36px 30px;border:1px solid rgba(204,151,100,.35);background:var(--groen-d)}
.principes__nr{display:block;margin-bottom:16px;font:italic 400 30px/1 var(--accent);color:var(--koper-l)}
.principes__lijst h3{font-size:27px;color:var(--creme-l)}
.principes__lijst p{margin:0;color:rgba(250,245,236,.82)}

/* arrangementen */
.arr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:46px}
.arr{padding:34px 26px 30px;text-align:center;background:var(--creme);border:1px solid rgba(181,113,58,.4);outline:1px solid rgba(181,113,58,.4);outline-offset:-9px;transition:transform .4s var(--zacht),box-shadow .4s var(--zacht)}
.arr:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,53,44,.12)}
.arr h3{font-size:26px}
.arr__prijs{margin:0 0 14px;font:400 36px/1 var(--kop);color:var(--groen)}
.arr__prijs small{font:600 12px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs)}
.arr__prijs span{font:italic 400 28px/1 var(--accent)}
.arr p:last-child{margin:0;font-size:15.5px;color:var(--grijs)}

/* stappen */
.stappen__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:start}
.stappen__grid p{color:rgba(250,245,236,.85)}
.stappen__lijst{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.stappen__lijst li{display:grid;grid-template-columns:58px 1fr;gap:20px;align-items:start;padding:24px 26px;border:1px solid rgba(204,151,100,.35);background:var(--groen-d)}
.stappen__lijst li>span{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--koper-l);border-radius:50%;font:400 26px/1 var(--kop);color:var(--koper-l)}
.stappen__lijst h3{font-size:24px;margin-bottom:6px;color:var(--creme-l)}
.stappen__lijst p{margin:0}

/* aanbod om en om */
.aanbod__blok{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,100px);align-items:center;margin-top:clamp(56px,8vw,100px)}
.aanbod__blok--om .aanbod__beeld{order:2}
.aanbod__beeld img{aspect-ratio:4/3.3;object-fit:cover}
.aanbod__tekst h3{font-size:clamp(30px,3.2vw,42px)}

/* vragen */
.vragen__lijst details{border-bottom:1px solid rgba(36,53,44,.18)}
.vragen__lijst summary{display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:400 23px/1.3 var(--kop);color:var(--groen)}
.vragen__lijst summary::-webkit-details-marker{display:none}
.vragen__lijst summary::after{content:"+";font:300 30px/1 var(--tekst);color:var(--koper-d);transition:transform .3s var(--zacht)}
.vragen__lijst details[open] summary::after{transform:rotate(45deg)}
.vragen__lijst details p{margin:0 0 22px;color:var(--grijs)}

/* menukaart */
.kaartnav{position:sticky;top:68px;z-index:20;background:var(--creme);border-bottom:1px solid rgba(181,113,58,.3)}
.kaartnav__in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.kaartnav__in::-webkit-scrollbar{display:none}
.kaartnav a{flex:none;padding:12px 16px;font:600 12px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--groen);border:1px solid transparent;transition:border-color .3s,background .3s}
.kaartnav a:hover{border-color:var(--koper)}
.menukaart__grid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(40px,6vw,90px);align-items:start}
.kaartdeel{margin-bottom:64px;scroll-margin-top:150px}
.kaartdeel__kop{text-align:center;margin-bottom:26px}
.kaartdeel__kop h2{margin:0 0 4px;font-size:clamp(32px,3.4vw,44px);letter-spacing:.06em}
.kaartdeel__kop p{margin:0;font:italic 400 19px/1.4 var(--accent);color:var(--koper-d)}
.kaartdeel ul,.groepkaart__lijst{margin:0;padding:0;list-style:none}
.regel{padding:15px 0;border-bottom:1px solid rgba(36,53,44,.1)}
.regel__kop{display:flex;align-items:baseline;gap:12px}
.regel h4{margin:0;font:400 21px/1.3 var(--kop);color:var(--groen)}
.regel__stip{flex:1;min-width:24px;border-bottom:1px dotted rgba(36,53,44,.45);transform:translateY(-5px)}
.regel__prijs{font:600 16px/1 var(--tekst);color:var(--groen);white-space:nowrap}
.regel p{margin:4px 0 0;color:var(--grijs);font-size:15.5px}
.vega{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 8px;border:1px solid rgba(47,111,72,.45);border-radius:99px;font:600 10.5px/1 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:#2F6A45;vertical-align:middle}
.blad{width:14px;height:14px}
.menukaart__noot{display:flex;gap:10px;align-items:flex-start;padding:20px 22px;background:var(--creme);font-size:15.5px;color:var(--grijs)}
.menukaart__noot .blad{flex:none;margin-top:4px;color:#2F6A45}
.menukaart__zij{position:sticky;top:150px;display:grid;gap:30px}
.zijfoto img{aspect-ratio:4/4.6;object-fit:cover}
.seizoen{scroll-margin-top:120px}
.seizoen__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:center}
.seizoen__beeld img{width:100%;aspect-ratio:4/4.8;object-fit:cover}
.seizoen__tekst p{color:rgba(250,245,236,.86)}
.seizoen__prijzen{margin:26px 0 30px;padding:0;list-style:none}
.seizoen__prijzen li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid rgba(244,234,216,.18);font:400 21px/1.3 var(--kop)}
.seizoen__prijzen strong{font:600 16px/1 var(--tekst);color:var(--koper-l);white-space:nowrap}
.seizoen__prijzen .regel__stip{border-color:rgba(244,234,216,.4)}
.groepkaart{scroll-margin-top:120px}
.groepkaart .knoppen{margin-top:40px}

/* formulieren */
.contact__grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.formulierkaart{padding:clamp(28px,4vw,52px);background:#fff;border:1px solid rgba(181,113,58,.3);box-shadow:0 30px 60px rgba(36,53,44,.08)}
.formulierkaart h2{font-size:clamp(32px,3.4vw,44px)}
.formulierkaart>p a{color:var(--koper-d)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.velden--drie{grid-template-columns:1.2fr 1fr 1fr}
.veld{margin:0 0 20px;border:0;padding:0;min-width:0}
.veld label,.veld legend{display:block;margin-bottom:8px;font:600 12.5px/1.4 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--groen)}
.verplicht{color:var(--koper-d)}
.veld input,.veld select,.veld textarea{width:100%;min-height:52px;padding:13px 15px;border:1px solid rgba(36,53,44,.3);border-radius:2px;background:var(--creme-l);font:400 16px/1.4 var(--tekst);color:var(--inkt);transition:border-color .3s,background .3s}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--koper);background:#fff;box-shadow:0 0 0 3px rgba(181,113,58,.2)}
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keuzes legend{width:100%}
.keuzes label{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;margin:0;border:1px solid rgba(36,53,44,.25);font:500 15px/1.3 var(--tekst);letter-spacing:0;text-transform:none;color:var(--inkt);cursor:pointer;transition:border-color .3s,background .3s}
.keuzes label:hover{border-color:var(--koper)}
.keuzes label:has(input:checked){border-color:var(--groen);background:var(--creme)}
.keuzes input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--groen)}
.formulier-privacy{font-size:14.5px;color:var(--grijs)}
.formulier-privacy a{color:var(--koper-d)}
.formulierkaart .knop{width:100%;margin-top:6px}
.formulierkaart .klein{margin:14px 0 0}
.infokaart{position:sticky;top:110px;padding:clamp(28px,3.4vw,44px);background:var(--groen);color:var(--creme-l)}
.infokaart h2{font-size:32px;color:var(--creme-l)}
.infokaart h3{font-size:24px;color:var(--creme-l);margin-bottom:12px}
.infokaart p{color:rgba(250,245,236,.86)}
.infokaart__tel{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;padding:6px 0;font:400 28px/1.2 var(--kop);color:var(--creme-l);text-decoration:none}
.infokaart__tel svg{width:22px;height:22px;color:var(--koper-l)}
.infokaart .sier{margin:26px auto}
.infokaart__stappen{margin:0;padding-left:22px;color:rgba(250,245,236,.88)}
.infokaart__stappen li{margin-bottom:10px;padding-left:4px}
.infokaart__stappen li::marker{font-family:var(--kop);color:var(--koper-l)}
.infokaart__lijst{margin:0;padding:0;list-style:none}
.infokaart__lijst li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed rgba(244,234,216,.2);font-size:15.5px}
.infokaart__lijst strong{color:var(--koper-l);white-space:nowrap}

/* ligging */
.ligging__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
.plattegrond{margin:0}
.plattegrond svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){.kaart__pin circle:first-child{transform-origin:240px 214px;animation:oker-puls 2.6s ease-out infinite}@keyframes oker-puls{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.8);opacity:0}}}

/* footer */
.voet{padding:90px 0 36px;background:var(--bordeaux);color:rgba(250,245,236,.86)}
.voet__top{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.logo--groot .logo__woord{font-size:46px;color:var(--creme-l)}
.logo--groot .logo__onder{font-size:11px}
.voet__zin{max-width:520px;margin:0;font:italic 300 22px/1.45 var(--accent);color:var(--creme)}
.voet__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.voet h2{margin:0 0 14px;font:600 12px/1.4 var(--tekst);letter-spacing:.24em;text-transform:uppercase;color:var(--koper-l)}
.voet ul{margin:0;padding:0;list-style:none}
.voet li{padding:2px 0;font-size:15.5px}
.voet li a{display:inline-flex;align-items:center;min-height:44px;padding:0;text-decoration:none;transition:color .3s}
.voet li a:hover{color:var(--koper-l)}
.voet__onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(244,234,216,.16);font-size:14px;color:rgba(250,245,236,.7)}
.gemaakt-door{margin:14px 0 0;font-size:13px;color:var(--creme-l)}
.gemaakt-door a{color:inherit;display:inline-block;padding:6px 0}

/* galerij-lichtbak boven alles */
.lichtbak{z-index:1000}

/* ---------- tablet ---------- */
@media (max-width:999px){
  .ingangen__grid{grid-template-columns:1fr 1fr}
  .ingang:last-child{grid-column:1/-1;flex-direction:row}
  .ingang:last-child .ingang__foto{flex:1 1 50%;aspect-ratio:auto}
  .ingang:last-child .ingang__tekst{flex:1 1 50%}
  .carrousel__spoor{grid-auto-columns:calc((100% - 24px)/2.3)}
  .feiten__grid{grid-template-columns:1fr 1fr}
  .arr__grid{grid-template-columns:1fr 1fr}
  .principes__lijst{grid-template-columns:1fr}
  .galerij{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}
  .menukaart__grid{grid-template-columns:1fr}
  .menukaart__zij{position:static;grid-template-columns:1fr 1fr}
  .contact__grid{grid-template-columns:1fr}
  .infokaart{position:static}
  .voet__grid{grid-template-columns:1fr 1fr}
  .kaartnav{top:64px}
}
@media (max-width:899px){
  .brief__grid,.keuken__grid,.cadeau__grid,.bezoek__grid,.stappen__grid,.aanbod__blok,.seizoen__grid,.ligging__grid{grid-template-columns:1fr}
  .keuken__grid--om .keuken__beeld,.aanbod__blok--om .aanbod__beeld{order:0}
  .keuken__beeld{padding-bottom:56px}
  .keuken__klein{right:-6px;width:46%}
  .keuken__grid--om .keuken__klein{left:-6px}
  .cadeau__beeld{max-width:420px}
  .brief__beeld{max-width:560px;width:100%;margin:0 auto}
  .keuken__beeld{max-width:680px;width:100%;margin:0 auto}
  .brief__beeld{order:2}
}
/* ---------- telefoon ---------- */
@media (max-width:640px){
  body{font-size:16.5px}
  .held{min-height:max(600px,92svh);padding:120px 0 110px}
  .held h1{font-size:clamp(40px,11.5vw,56px)}
  .held .knoppen{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .held__tijden{bottom:22px;font-size:10.5px;letter-spacing:.18em}
  .held__tijden span{display:block}
  .held__tijden .held__punt{display:none}
  .paginakop{padding:126px 0 64px}
  .paginakop h1{font-size:clamp(36px,10vw,50px)}
  .paginakop .knoppen{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .ingangen__grid{grid-template-columns:1fr;gap:20px}
  .ingang:last-child{flex-direction:column}
  .ingang:last-child .ingang__foto{aspect-ratio:4/3.1}
  .ingang__tekst{padding:24px 22px 26px}
  .kaartje__kop{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .carrousel__spoor{grid-auto-columns:78%;gap:16px}
  .gerecht h3{font-size:24px}
  .feiten__grid{gap:12px}
  .feit{min-height:140px;padding:20px 10px}
  .feit__getal{font-size:40px}
  .feit__getal--woord{font-size:30px}
  .feit__tekst{font-size:10.5px;letter-spacing:.12em}
  .galerij{grid-auto-rows:150px;gap:10px}
  .arr__grid{grid-template-columns:1fr}
  .stappen__lijst li{grid-template-columns:46px 1fr;gap:16px;padding:20px 18px}
  .stappen__lijst li>span{width:46px;height:46px;font-size:21px}
  .menukaart__zij{grid-template-columns:1fr 1fr;gap:14px}
  .kaartdeel{margin-bottom:48px}
  .regel h4{font-size:19px}
  .velden,.velden--drie{grid-template-columns:1fr}
  .keuzes label{flex:1 1 100%}
  .formulierkaart{padding:26px 20px}
  .infokaart__tel{font-size:25px}
  .voet{padding-top:70px}
  .voet__grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .voet__onder{flex-direction:column}
  .logo--groot .logo__woord{font-size:40px}
  .bezoek__tijden{padding:26px 22px 20px}
  .kaartnav{top:64px}
}


/* ---- Vast deel (vastewebsite.nl): hoort bij site.js, niet aanpassen ---- */
.fade{opacity:0;transition:opacity .4s ease}
.fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transition:none}}
.onthul{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--volg,0) * 90ms)}
.onthul.in{opacity:1;transform:none}
.teken path,.teken line,.teken polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1)}
.teken.getekend path,.teken.getekend line,.teken.getekend polyline{stroke-dashoffset:0}
.beweegt .draai{animation:vw-draai 22s linear infinite;transform-origin:50% 50%}
@keyframes vw-draai{to{transform:rotate(360deg)}}
.beweegt .kenburns{animation:vw-kenburns 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes vw-kenburns{from{transform:scale(1.07)}to{transform:none}}
[data-parallax]{will-change:transform}
.band{display:flex;overflow:hidden;white-space:nowrap;user-select:none}
.band__rij{display:flex;flex:none;align-items:center;gap:2.5rem;padding-right:2.5rem}
.beweegt .band__rij{animation:vw-band 38s linear infinite}
.band:hover .band__rij{animation-play-state:paused}
@keyframes vw-band{to{transform:translateX(-100%)}}
.voor-na{position:relative;overflow:hidden;--pos:50%}
.voor-na img{display:block;width:100%;height:auto}
.voor-na__na{position:absolute;inset:0;height:100%!important;object-fit:cover;clip-path:inset(0 0 0 var(--pos))}
.voor-na::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.voor-na::before{content:"\2194";position:absolute;z-index:1;top:50%;left:var(--pos);display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:#111;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none}
.voor-na__schuif{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.voor-na:focus-within::after{background:currentColor}
.formulier-bedankt{padding:20px 22px;border-radius:12px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.35);font-weight:600}
.lichtbak{padding:0;border:0;background:transparent;max-width:min(94vw,1400px);max-height:92vh;overflow:visible}
.lichtbak::backdrop{background:rgba(0,0,0,.85)}
.lichtbak img{display:block;max-width:min(94vw,1400px);max-height:88vh;width:auto;height:auto;border-radius:6px}
.lichtbak button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font-size:28px;line-height:1;cursor:pointer}
.lichtbak__sluit{top:-14px;right:-14px}
.lichtbak__vorige{left:8px;top:50%;transform:translateY(-50%)}
.lichtbak__volgende{right:8px;top:50%;transform:translateY(-50%)}
.vw-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.wa-knop{position:fixed;right:16px;bottom:16px;z-index:900;display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.wa-knop svg{width:30px;height:30px}
.wa-knop:focus-visible{outline:3px solid #111;outline-offset:3px}
.kaart{width:100%;aspect-ratio:16/10;border:0;border-radius:12px;display:block}
html{-webkit-tap-highlight-color:transparent}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:2000;padding:10px 14px;background:#fff;color:#111;border-radius:8px}
.rekenhulp__lijst{display:grid;gap:12px}
.rekenhulp__rij label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:44px;cursor:pointer}
.rekenhulp__rij:not(.rekenhulp__rij--vink){display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px}
.rekenhulp__rij:not(.rekenhulp__rij--vink) label{flex-direction:column;align-items:flex-start;gap:2px}
.rekenhulp__rij input[type=checkbox]{width:22px;height:22px;margin:0}
.rekenhulp__vak{display:flex;align-items:center;gap:8px}
.rekenhulp__vak input{width:7.5em;min-height:44px;font:inherit;padding:8px 10px}
.rekenhulp__prijs{font-size:.9em;opacity:.8}
.rekenhulp__totaal{font-size:1.4em;font-weight:700;margin-top:16px}
@media (max-width:480px){.rekenhulp__rij:not(.rekenhulp__rij--vink){grid-template-columns:1fr}}
.gemaakt-door{grid-column:1/-1;flex-basis:100%;font-size:.8125rem;letter-spacing:.01em;opacity:.7;margin:18px 0 0;padding-top:14px;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 18%,transparent);transition:opacity .2s}
.gemaakt-door:hover,.gemaakt-door:focus-within{opacity:1}
.gemaakt-door a{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;padding:12px 0}
.gemaakt-door a span{font-weight:400;opacity:.8}
.gemaakt-door a:hover,.gemaakt-door a:focus-visible{border-bottom-color:currentColor}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}