/* Botté wine bar: "de menukaart als schetsboek". DNA in DESIGN-DNA.md */
:root{
  --groen:#162216;--room:#FEEAD1;--perzik:#FBE0C2;--wit:#FFF7EC;--tomaat:#D34A2C;--tomaat-l:#E4583B;--inkt:#16130E;
  --room-78:rgba(254,234,209,.8);--inkt-70:rgba(22,19,14,.74);
  --hand:"Caveat Brush","Segoe Print",cursive;--sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--brush:"Nanum Brush Script","Caveat Brush",cursive;
  --gut:clamp(16px,4vw,48px);--max:1240px;--nav-h:80px;
  --pad:clamp(96px,13vh,148px);--boog:min(12vh,110px);
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --golf-room:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='10' viewBox='0 0 300 10'%3E%3Cpath d='M1 5C40 2 80 8 120 5s80-4 120 0 40 3 59 0' fill='none' stroke='%23FEEAD1' stroke-opacity='.34' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --golf-inkt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='10' viewBox='0 0 300 10'%3E%3Cpath d='M1 5C40 2 80 8 120 5s80-4 120 0 40 3 59 0' fill='none' stroke='%2316130E' stroke-opacity='.3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* masker van een handgetrokken lijn: de kleur komt uit background */
  --lijn-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='12' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7C40 3 80 10 120 6s80-5 120 0 40 3 56-1' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  /* golfrand voor de vloeistof in de knoppen */
  --golf-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5C8 0 16 0 24 5s16 5 24 0V10H0Z'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--room);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--room);color:var(--inkt);font:400 1.0625rem/1.6 var(--sans);font-stretch:104%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:inherit}
[hidden]{display:none!important}
::selection{background:var(--tomaat);color:var(--room)}
:focus-visible{outline:3px solid var(--tomaat-l);outline-offset:4px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:700;background:var(--tomaat);color:var(--room);padding:12px 18px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
section[id],footer{scroll-margin-top:var(--nav-h)}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- basis ---------- */
.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.kolom{width:min(760px,100% - 2*var(--gut));margin-inline:auto;position:relative}
.hand{font-family:var(--hand);font-weight:400;line-height:1.05;letter-spacing:.005em}
.rood{color:var(--tomaat)}
.rood-l{color:var(--tomaat-l)}
.lbl{font-family:var(--sans);font-weight:560;font-stretch:118%;font-size:.95rem;letter-spacing:.02em;text-transform:lowercase;margin:0 0 18px}
.h2{font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:clamp(2.1rem,4.2vw,3.9rem);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.h2 .w{display:inline-block}
p.hand{font-size:clamp(1.5rem,2.2vw,2rem);margin:0 0 12px;transform:rotate(-2.5deg);transform-origin:0 100%;display:block;width:fit-content}

/* de handgetrokken lijn vult zich van links naar rechts: de vorm staat vast, alleen de vulling loopt */
.vul{position:relative;display:inline-block;text-decoration:none;padding-bottom:7px}
.vul::before,.vul::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:9px;-webkit-mask:var(--lijn-m) 0 0/100% 100% no-repeat;mask:var(--lijn-m) 0 0/100% 100% no-repeat;pointer-events:none}
.vul::before{background:currentColor;opacity:0;transition:opacity .3s}
.vul::after{background:var(--tomaat-l);clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
a:hover>.vul::before,a:focus-visible>.vul::before,.is-hier>.vul::before{opacity:.22}
a:hover>.vul::after,a:focus-visible>.vul::after,.is-hier>.vul::after{clip-path:inset(0 0 0 0)}
.tlink{position:relative;display:inline-block;text-decoration:none;padding-bottom:6px;white-space:nowrap}
.tlink::before,.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:8px;-webkit-mask:var(--lijn-m) 0 0/100% 100% no-repeat;mask:var(--lijn-m) 0 0/100% 100% no-repeat;pointer-events:none}
.tlink::before{background:currentColor;opacity:.3}
.tlink::after{background:var(--tomaat-l);clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{clip-path:inset(0 0 0 0)}
.bezoek .tlink::after{background:var(--tomaat)}

/* doodles via masker: kleur volgt currentColor */
.dd{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;aspect-ratio:var(--r,1)}
.dd-glazen{--m:url(../img/doodle-glazen.svg);--r:247/334}
.dd-fles{--m:url(../img/doodle-fles.svg);--r:219/532}
.dd-kaart{--m:url(../img/doodle-kaart.svg);--r:343/386}
.dd-lopende-fles{--m:url(../img/doodle-lopende-fles.svg);--r:239/549}
.dd-kurkentrekker{--m:url(../img/doodle-kurkentrekker.svg);--r:207/314}
.dd-oesters{--m:url(../img/doodle-oesters.svg);--r:439/257}

/* ---------- knoppen: wijnetiket met ingesneden hoeken dat zich volschenkt ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{--n:9px;--bg:var(--tomaat);--fg:var(--room);--vul:var(--inkt);--vg:var(--room);
  position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:650;font-stretch:112%;font-size:1rem;line-height:1;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate;overflow:hidden;
  -webkit-mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));
  transition:color .3s var(--ease) .08s}
.btn>span,.btn>svg{position:relative;z-index:1}
/* de vloeistof: stijgt van onder naar boven met een golvende bovenkant */
.btn::before{content:"";position:absolute;left:-10%;right:-10%;top:100%;height:130%;z-index:0;background:var(--vul);
  -webkit-mask:var(--golf-m) 0 0/48px 10px repeat-x,linear-gradient(#000,#000) 0 9px/100% 100% no-repeat;mask:var(--golf-m) 0 0/48px 10px repeat-x,linear-gradient(#000,#000) 0 9px/100% 100% no-repeat;
  transition:transform .6s var(--ease),-webkit-mask-position .6s linear,mask-position .6s linear}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(-92%);-webkit-mask-position:-48px 0,0 9px;mask-position:-48px 0,0 9px}
.btn:hover,.btn:focus-visible{color:var(--vg)}
.btn:focus-visible{outline:2px dashed currentColor;outline-offset:-7px}
.btn:active{transform:translateY(1px)}
.btn-rood{--bg:var(--tomaat);--fg:var(--room);--vul:var(--inkt);--vg:var(--room)}
.btn-room{--bg:var(--room);--fg:var(--groen);--vul:var(--tomaat);--vg:var(--room)}

/* ---------- intro: het logo stempelt zich, wine not? springt erop, doek omhoog ---------- */
.intro{display:none}
.intro-on .intro{display:flex;position:fixed;inset:0;z-index:500;background:var(--groen);align-items:center;justify-content:center;animation:introUit .85s cubic-bezier(.76,0,.24,1) 1.85s forwards}
.intro::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:16px;background:radial-gradient(circle 16px at 50% 0,var(--groen) 96%,#0000 100%) 0 0/46px 16px repeat-x}
.intro-klaar .intro{display:none}
.intro-in{animation:introWip .5s var(--ease) 1.45s both}
.il{display:block;width:min(64vw,440px);height:auto;overflow:visible}
.il-ink path{transform-box:fill-box;transform-origin:50% 85%;animation:stempel .6s var(--spring) both;animation-delay:calc(.12s + var(--i) * .11s)}
.il-wn{transform-box:fill-box;transform-origin:0 100%;animation:wineNot .6s cubic-bezier(.34,1.9,.64,1) .95s both}
@keyframes stempel{0%{opacity:0;transform:translateY(-28%) scale(.35) rotate(-16deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes wineNot{0%{opacity:0;transform:scale(.15) rotate(-35deg)}100%{opacity:1;transform:none}}
@keyframes introWip{0%,100%{transform:none}35%{transform:rotate(-3deg) scale(1.03)}70%{transform:rotate(2deg)}}
@keyframes introUit{0%{transform:translateY(0)}100%{transform:translateY(calc(-100% - 20px))}}

/* cursorstip */
.cursor{position:fixed;left:0;top:0;z-index:650;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--tomaat);pointer-events:none;opacity:0;display:grid;place-items:center;transition:opacity .3s,width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring)}
.cursor.on{opacity:1}
.cursor.big{width:22px;height:22px;margin:-11px 0 0 -11px}
.cursor.lbl-on{width:74px;height:74px;margin:-37px 0 0 -37px}
.cursor-lbl{font-family:var(--hand);color:var(--room);font-size:1.25rem;opacity:0;transition:opacity .2s}
.cursor.lbl-on .cursor-lbl{opacity:1}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- nav: groene balk, naadloos met de hero ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--groen);color:var(--room);transition:background-color .4s var(--ease)}
/* boven de hero is de balk transparant: het behang en de afdrukken lopen erachter door */
.nav.is-top{background:transparent}
.no-js .nav.is-top{background:var(--groen)}
body.nav-open .nav{background:var(--groen)}
@media (min-width:901px){.nav.is-top .menu a{color:var(--groen)}.nav.is-top .menu a.op-groen{color:var(--room)}}
.nav-in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.logo{display:block;flex:none;transition:transform .5s var(--spring)}
.logo img{height:44px;width:auto}
.logo:hover{transform:rotate(-5deg) scale(1.04)}
.nav nav{margin-left:auto}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px}
.menu a{display:block;padding:10px 12px;text-decoration:none;font-weight:560;font-stretch:114%;font-size:1rem;transition:color .4s var(--ease)}
.menu-voet{display:none}
.nav-cta{flex:none}
.hamb{display:none;flex:none;width:48px;height:48px;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--room)}
.hamb span{display:block;width:26px;height:3px;border-radius:3px;background:currentColor;transition:transform .4s var(--spring),opacity .2s}
body.nav-open .hamb span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.nav-open .hamb span:nth-child(2){opacity:0}
body.nav-open .hamb span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- spread: opengeslagen menukaart ---------- */
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,112px);position:relative}
.spread::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor;opacity:.12;pointer-events:none}
.pg{position:relative;min-width:0}

/* afdrukken */
.print{margin:0;background:var(--wit);padding:10px;position:absolute}
.print-in{overflow:hidden;aspect-ratio:4/5}
.print-in img{width:100%;height:100%;object-fit:cover}
.print figcaption{font-size:1.3rem;padding:8px 2px 0;color:var(--inkt)}

/* kartelrand: elke sectie hangt met halve cirkels naar beneden in de volgende, dezelfde vorm als de knophoeken en de
   hero-naad. --kc is de kleur van de sectie zelf; de rand rolt licht mee met het scrollen (--golf-x) */
.kartel{--s:15px;--t:44px;position:absolute;left:0;right:0;top:calc(100% - 1px);height:var(--s);pointer-events:none;
  background:radial-gradient(circle var(--s) at 50% 0,var(--kc) 96%,#0000 100%) var(--golf-x,0px) 0/var(--t) var(--s) repeat-x}
.manifest{--kc:var(--groen)}.lijn{--kc:var(--room)}.kaart{--kc:var(--groen)}.bites{--kc:var(--perzik)}.sfeer{--kc:var(--groen)}.bezoek{--kc:var(--room)}
.kaart,.lijn,.bites,.sfeer,.bezoek,.voet{position:relative}
/* een sectie ligt boven de volgende, zodat haar rand erin kan hangen */
main>section{position:relative}
main>section:nth-child(1){z-index:30}main>section:nth-child(2){z-index:29}main>section:nth-child(3){z-index:28}main>section:nth-child(4){z-index:27}
main>section:nth-child(5){z-index:26}main>section:nth-child(6){z-index:25}main>section:nth-child(7){z-index:24}main>section:nth-child(8){z-index:23}
main>section.hero{z-index:1}
.voet{z-index:14}
/* vlakken voor de vervolgpagina's: achtergrond, tekstkleur en de kleur van hun kartelrand in een keer */
.sec{padding:var(--pad) 0}
.vlak-groen{background:var(--groen);color:var(--room);--kc:var(--groen)}
.vlak-room{background:var(--room);color:var(--inkt);--kc:var(--room)}
.vlak-perzik{background:var(--perzik);color:var(--inkt);--kc:var(--perzik)}
.vlak-groen .rood{color:var(--tomaat-l)}
.sec .h2+p,.sec .h2+.res,.sec .h2+.aanvraag{margin-top:22px}


/* ---------- 1. hero: groene pagina met ingesneden rand (zelfde halve cirkels als de knophoeken), perzik pagina ---------- */
.hero{position:relative;z-index:1;margin-top:calc(-1 * var(--nav-h));min-height:100svh;padding:calc(var(--nav-h) + clamp(24px,5vh,64px)) 0 clamp(32px,6vh,72px);display:flex;align-items:center;overflow:hidden;color:var(--room);background:var(--perzik)}
.hero>.wrap{position:relative}
.hero .spread{align-items:center}
.hero .spread::before{display:none}
.behang{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.behang-in{position:absolute;left:0;right:0;top:-25%;height:150%;background:url(../img/patroon-perzik.svg) 0 0/420px 420px repeat}
.hero-groen{--s:15px;--t:44px;position:absolute;left:0;top:0;bottom:0;width:max(42%,calc(var(--gut) + 420px));background:var(--groen);overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/calc(100% - var(--s)) 100% no-repeat,radial-gradient(circle var(--s) at 100% 50%,#0000 96%,#000 100%) 100% 0/var(--s) var(--t) repeat-y;
  mask:linear-gradient(#000 0 0) 0 0/calc(100% - var(--s)) 100% no-repeat,radial-gradient(circle var(--s) at 100% 50%,#0000 96%,#000 100%) 100% 0/var(--s) var(--t) repeat-y}
.hero-groen{-webkit-mask-position:0 0,100% var(--golf-y,0px);mask-position:0 0,100% var(--golf-y,0px)}
.hero-groen .behang-in{background-image:url(../img/patroon-groen-licht.svg)}
.hero-dim{position:absolute;inset:0;z-index:6;background:#0B120B;opacity:0;pointer-events:none}
.collage .op-groen{color:var(--room)}
.hero-lbl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--room-78)}
.open-status{display:inline-flex;align-items:center;gap:8px;font-stretch:104%;letter-spacing:0;text-transform:none}
.open-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--room-78)}
.open-status.is-open::before{background:#8FCB6B}
.h-hero{font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:clamp(2.5rem,4.4vw,4.2rem);line-height:.98;letter-spacing:-.03em;margin:0 0 28px}
.h1-r{display:block;white-space:nowrap}
.h-hero .w{display:inline-block}
.h-hero .h1-noot{display:block;width:fit-content;margin:.3em 0 0 34%;font-family:var(--hand);font-weight:400;font-stretch:100%;font-size:.52em;line-height:1;letter-spacing:.01em;color:var(--tomaat-l);transform:rotate(-6deg)}
.q{color:var(--tomaat-l);white-space:nowrap}
.q-lijn{position:relative;display:inline-block}
.lijn-onder{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.26em;overflow:visible}
.lijn-onder path,.doorhaal path,.m-lijn path,.pijl path,.tab-streep path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lijn-onder path{stroke:var(--tomaat-l);stroke-width:6;stroke-dasharray:1 2;stroke-dashoffset:0}
.lead{font-size:clamp(1.08rem,1.35vw,1.26rem);line-height:1.5;max-width:36ch;color:var(--room-78);margin-bottom:32px}
.collage{position:relative;aspect-ratio:1/1.02;max-width:600px;margin-left:auto}
.p-raam{width:60%;left:6%;top:3%;transform:rotate(-3.5deg);z-index:2}
.p-kaart{width:46%;right:4%;top:33%;transform:rotate(4deg);z-index:1}
.stk{position:absolute;z-index:4;color:var(--inkt);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.stk.is-drag{cursor:grabbing}
.s-glazen{width:14%;right:7%;top:2%}
.s-oesters{width:22%;left:1%;bottom:7%}
.s-kurk{width:9%;right:42%;bottom:3%}
.loper{position:absolute;z-index:3;width:9%;right:11%;bottom:-1%;color:var(--inkt);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.loper.is-drag{cursor:grabbing}

/* ---------- 2. over botté (vastgepind) ---------- */
.manifest{position:relative;z-index:20;background:var(--groen);color:var(--room)}
.m-pin{min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;padding:var(--pad) 0;position:relative}
.m-spread{align-items:end}
.m-spread::before{opacity:.14}
.manifest .h2{margin-bottom:clamp(22px,4vh,40px)}
.cliche{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px)}
.c{position:relative;font-weight:760;font-stretch:118%;font-size:clamp(1.6rem,2.9vw,2.7rem);line-height:1.05;letter-spacing:-.03em;color:var(--room)}
.c-woord{position:relative;display:inline-block}
.c-w{display:inline-block}
.c-wel{display:block;font-size:clamp(1.5rem,1.8vw,1.6rem);letter-spacing:0;color:var(--tomaat-l);transform:rotate(-2deg);transform-origin:0 50%;margin:2px 0 6px 4px}
.doorhaal{position:absolute;left:-3%;top:52%;width:106%;height:.46em;transform:translateY(-50%);overflow:visible;pointer-events:none}
.doorhaal path{stroke:var(--tomaat-l);stroke-width:8;stroke-dasharray:1 2;stroke-dashoffset:0}
.m-kop{font-weight:700;font-stretch:118%;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.02em;max-width:18ch;margin-bottom:18px}
.m-wel{font-weight:600;font-stretch:112%;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.22;letter-spacing:-.015em;max-width:22ch;margin-bottom:22px}
.m-wel .hand{display:inline-block;font-size:1.25em;margin-right:.15em;transform:rotate(-4deg)}
.m-tekst{font-size:1.1rem;max-width:40ch;color:var(--room-78);margin-bottom:18px}
.manifest .rood{color:var(--tomaat-l)}
.m-sign{font-size:clamp(1.6rem,2.4vw,2.1rem)!important;margin:0!important}
.pijl path{stroke:var(--tomaat);stroke-width:6;stroke-dasharray:1 2;stroke-dashoffset:0}

/* ---------- 3. wijnkaart ---------- */
.kaart{background:var(--groen);color:var(--room);padding:var(--pad) 0}
.kaart .spread{align-items:start}
.k-intro{color:var(--room-78);max-width:36ch;font-size:1.12rem;margin-top:24px}
.tabs{position:relative;display:flex;flex-wrap:wrap;gap:6px 30px;margin:30px 0 26px;padding-bottom:6px}
.tab{background:none;border:0;padding:0 4px 12px;margin:0;font-family:var(--brush);font-size:clamp(3.2rem,5.2vw,4.6rem);line-height:.9;color:var(--room);opacity:.58;cursor:pointer;transition:opacity .3s}
.tab:hover{opacity:.9}
.tab[aria-selected=true]{opacity:1}
.tab-streep{position:absolute;left:0;bottom:4px;width:90px;height:14px;overflow:visible;pointer-events:none}
.tab-streep path{stroke:var(--tomaat-l);stroke-width:7;stroke-dasharray:1 2;stroke-dashoffset:0}
.no-js .tabs{display:none}
.k-prijs{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;color:var(--room-78)}
.k-bedrag{font-size:2.6rem;color:var(--room);line-height:1}
.k-flight{margin:0 0 10px;color:var(--room-78)}
.k-flight .hand{font-size:1.35em;color:var(--room);margin-right:.25em}
.k-flight strong{color:var(--room)}
.k-dorst{display:inline-flex;align-items:flex-start;gap:6px;padding:6px 0;border:0;background:none;color:var(--tomaat-l);cursor:pointer;text-align:left}
.k-dorst .hand{font-size:clamp(1.4rem,2vw,1.8rem);position:relative;padding-bottom:6px}
.k-dorst .hand::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:8px;background:var(--tomaat-l);-webkit-mask:var(--lijn-m) 0 0/100% 100% no-repeat;mask:var(--lijn-m) 0 0/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease)}
.k-dorst:hover .hand::after,.k-dorst:focus-visible .hand::after{clip-path:inset(0 0 0 0)}
.pijl-k{width:80px;height:auto;flex:none;transform:translateY(40%) rotate(8deg);overflow:visible;transition:transform .5s var(--spring)}
.pijl-k path{stroke:var(--tomaat-l);stroke-width:5}
.k-dorst:hover .pijl-k{transform:translateY(40%) translateX(8px) rotate(4deg)}
.panelen{display:grid}
.paneel{grid-area:1/1;min-width:0}
.paneel.is-uit{visibility:hidden}
.paneel-kop{display:none;font-family:var(--brush);font-size:3.4rem;line-height:1;margin:18px 0 0}
.no-js .paneel-kop{display:block}
.no-js .panelen{display:block}
.wijnen{list-style:none;margin:0;padding:0}
.wijn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 28px;align-items:center;padding:24px 0 26px;background:var(--golf-room) 0 100%/300px 10px repeat-x}
.w-naam{font-weight:720;font-stretch:118%;font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.1;letter-spacing:-.015em}
.w-noot{grid-column:1;color:var(--room-78);font-size:1rem}
.w-fles{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;font-family:var(--hand);font-size:1.55rem;line-height:1;color:var(--tomaat-l)}

/* ---------- 4. wijnadvies: het glas over de lijn ---------- */
.lijn{position:relative;background:var(--room);color:var(--inkt);padding:var(--pad) 0;overflow-x:clip;text-align:center}
.l-kolom{width:min(1040px,100% - 2*var(--gut))}
.lijn p.hand{margin-inline:auto;transform-origin:50% 100%}
.lijn .h2{max-width:16ch;margin-inline:auto}
.meter{margin-top:clamp(28px,5vh,56px);position:relative}
/* slepen gaat via main.js over de hele baan (glas, fles en lijn); het range-veld is er voor toetsenbord en schermlezer */
.m-baan{position:relative;height:240px;--p:.04;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.m-baan.is-drag{cursor:grabbing}
.m-lijn{position:absolute;left:0;right:0;bottom:22px;width:100%;height:40px;overflow:visible}
.m-lijn path{stroke:var(--tomaat);stroke-width:6;stroke-dasharray:1 2;stroke-dashoffset:0}
.m-range{position:absolute;left:0;right:0;bottom:0;width:100%;height:120px;margin:0;opacity:0;pointer-events:none;z-index:3;-webkit-appearance:none;appearance:none;background:transparent}
.m-range:active{cursor:grabbing}
.m-range::-webkit-slider-thumb{-webkit-appearance:none;width:120px;height:120px}
.m-range::-moz-range-thumb{width:120px;height:120px;border:0}
.m-glas{position:absolute;left:calc(var(--p) * (100% - 120px));bottom:40px;width:120px;height:180px;pointer-events:none;transform-origin:50% 100%}
.m-range:focus-visible+.m-glas{outline:3px solid var(--tomaat);outline-offset:8px;border-radius:14px}
.glas{position:absolute;left:12px;top:0;width:calc(100% - 24px);height:100%;overflow:visible;transition:opacity .3s,transform .4s var(--spring)}
.glas-lijn{fill:none;stroke:var(--inkt);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.wijn-vol,.wijn-golf{fill:var(--tomaat)}
.m-pijl{position:absolute;top:30%;width:14px;height:22px;fill:none;stroke:var(--tomaat);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.m-pijl-l{left:-6px}
.m-pijl-r{right:-6px}
.m-fles{position:absolute;left:50%;bottom:-6px;width:74px;margin-left:-37px;color:var(--inkt);opacity:0;transform:translateY(20px) scale(.6);transition:opacity .3s,transform .5s var(--spring)}
.m-baan.is-fles .glas{opacity:0;transform:scale(.6)}
.m-baan.is-fles .m-fles{opacity:1;transform:none}
.m-baan.is-fles .m-pijl-r{opacity:0}
.m-stops{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.m-stops button{position:relative;border:0;background:none;padding:8px 2px 12px;font-family:var(--hand);font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1;color:var(--tomaat);cursor:pointer;opacity:.7;transition:opacity .3s}
.m-stops button:hover,.m-stops button.is-hier{opacity:1}
.m-stops button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--tomaat);-webkit-mask:var(--lijn-m) 0 0/100% 100% no-repeat;mask:var(--lijn-m) 0 0/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease)}
.m-stops button:hover::after,.m-stops button.is-hier::after{clip-path:inset(0 0 0 0)}
.m-advies{min-height:124px;margin-top:clamp(18px,3vh,32px)}
.m-stap{font-size:clamp(1.8rem,3.2vw,2.6rem)!important;transform:rotate(-1.5deg)!important;margin:0 auto 10px!important;transform-origin:50% 50%!important}
.m-tip{font-size:1.12rem;max-width:44ch;margin-inline:auto;margin-bottom:0}

/* ---------- 5. bites ---------- */
.bites{position:relative;background:var(--perzik);color:var(--inkt);padding:var(--pad) 0}
.bites-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:center;position:relative}
.p-bites{position:relative;background:var(--wit);transform:rotate(-2.5deg);max-width:420px;justify-self:end;width:100%}
.p-bites figcaption{font-size:1.4rem}
.kaart-vel{max-width:640px}
.bite-lijst{list-style:none;margin:28px 0 20px;padding:0}
.bite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;padding:16px 0 18px;background:var(--golf-inkt) 0 100%/300px 10px repeat-x}
.b-naam{font-weight:700;font-stretch:118%;font-size:1.3rem;line-height:1.2}
.b-noot{grid-column:1;color:var(--inkt-70);font-size:.98rem}
.b-prijs{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--hand);font-size:1.9rem;color:var(--tomaat)}
.bite-alles .b-naam{color:var(--tomaat)}
.b-voet{font-size:.98rem;color:var(--inkt-70);max-width:48ch;margin:0}
.kantlijn{position:absolute;color:var(--inkt);pointer-events:none}
.k-oesters{width:clamp(110px,11vw,160px);right:0;top:-30px;transform:rotate(8deg)}

/* ---------- 6. sfeer: rail van afdrukken ---------- */
.sfeer{background:var(--groen);color:var(--room);padding:var(--pad) 0}
.s-kop{margin-bottom:clamp(16px,3vh,32px)}
.s-kop .h2{max-width:16ch}
[data-rail]{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:6px;padding:26px 0 30px;max-width:100%}
[data-rail].is-drag{cursor:grabbing}
.no-js [data-rail]{overflow-x:auto}
[data-rail-track]{display:flex;gap:28px;width:max-content;will-change:transform;padding-left:var(--gut)}
[data-rail-track]>*{flex:none;width:clamp(230px,24vw,330px)}
[data-rail-track] img{-webkit-user-drag:none;pointer-events:none}
.afdruk{margin:0;background:var(--wit);color:var(--inkt);padding:10px 10px 14px;transition:transform .5s var(--spring)}
.afdruk-in{overflow:hidden;aspect-ratio:4/5}
.afdruk-in img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.afdruk figcaption{display:flex;align-items:baseline;gap:10px;padding:10px 2px 0}
.tijd{font-weight:650;font-stretch:112%;font-size:.85rem;color:var(--inkt-70)}
.afdruk .hand{font-size:1.45rem}
.a1{transform:rotate(-2deg)}.a2{transform:rotate(1.6deg) translateY(14px)}.a3{transform:rotate(-1deg)}.a4{transform:rotate(2.2deg) translateY(-6px)}.a5{transform:rotate(-1.8deg) translateY(10px)}.a6{transform:rotate(1.2deg)}.a7{transform:rotate(-2.4deg) translateY(8px)}
.afdruk:hover{transform:rotate(0) translateY(-6px)}
.afdruk:hover img{transform:scale(1.05)}
.rail-voet{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:6px}
.rail-voet .hand{font-size:1.5rem;color:var(--room-78)}
.rail-pijlen{display:flex;gap:10px}
.rail-pijlen .btn{width:64px;padding:0}
.rail-pijlen svg{width:30px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 7. bezoek en vragen ---------- */
.bezoek{background:var(--room);color:var(--inkt);padding:var(--pad) 0}
.bezoek .spread{align-items:start}
.v-intro{font-size:1.12rem;max-width:40ch;margin-top:24px}
.uren{margin:30px 0 26px;max-width:460px}
.uren div{display:flex;justify-content:space-between;gap:16px;padding:12px 0 13px;background:var(--golf-inkt) 0 100%/300px 10px repeat-x;position:relative}
.uren dt{font-weight:650;font-stretch:112%}
.uren dd{margin:0;text-align:right}
.uren .vandaag dt,.uren .vandaag dd{color:var(--tomaat)}
.uren .vandaag::after{content:"today!";position:absolute;left:calc(100% + 10px);top:6px;font-family:var(--hand);font-size:1.35rem;color:var(--tomaat);transform:rotate(-8deg);white-space:nowrap}
.adres{margin-bottom:28px;line-height:1.7}
.bezoek .btns{margin:0;gap:14px 26px}
.v-groep{font-weight:600}
.faq-kop{margin-bottom:14px!important}
.faq-item{background:var(--golf-inkt) 0 100%/300px 10px repeat-x}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border:0;background:none;text-align:left;cursor:pointer;font-weight:650;font-stretch:110%;font-size:clamp(1.08rem,1.4vw,1.22rem);line-height:1.3;transition:color .3s}
.faq-q:hover{color:var(--tomaat)}
.faq-plus{position:relative;flex:none;width:28px;height:28px;transition:transform .5s var(--spring)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--tomaat)}
.faq-plus::after{transform:rotate(90deg)}
.faq-q[aria-expanded=true] .faq-plus{transform:rotate(135deg)}
.faq-a{height:0;overflow:hidden}
.faq-item.open .faq-a{height:auto}
.faq-a>div{padding:0 44px 22px 0}
.faq-a p{margin:0;color:var(--inkt-70)}
.no-js .faq-a{height:auto}

/* ---------- footer ---------- */
.voet{background:var(--groen);color:var(--room);padding:clamp(56px,8vh,88px) 0 30px}
.voet-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:end;padding-bottom:clamp(36px,6vh,64px)}
.voet-logo{width:clamp(200px,26vw,360px);height:auto}
.voet-zin{font-size:clamp(1.8rem,3vw,2.7rem)!important;color:var(--tomaat-l);transform:rotate(-3deg)!important;margin:0 0 10px!important}
.voet-zin span{display:block;white-space:nowrap}
.voet-kol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;padding:32px 0;background:var(--golf-room) 0 0/300px 10px repeat-x}
.voet-kol .lbl{color:var(--room-78);margin-bottom:10px}
.voet-kol p{margin:0;line-height:1.75}
.voet-onder{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;padding-top:24px;font-size:.9rem;color:var(--room-78);background:var(--golf-room) 0 0/300px 10px repeat-x}

/* ---------- popups ---------- */
.dlg{border:0;padding:clamp(26px,4vw,46px);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--room);color:var(--inkt)}
.dlg::backdrop{background:rgba(14,21,14,.78)}
.dlg .h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:22px}
.dlg-x{position:absolute;right:14px;top:14px;width:46px;height:46px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--inkt);transition:transform .45s var(--spring),color .3s}
.dlg-x:hover{transform:rotate(90deg);color:var(--tomaat)}
.dlg-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.dlg-prijs p:not(.hand){color:var(--inkt-70);max-width:42ch}
.dlg-prijs .btns{margin-top:22px}
/* de fles staat naast de titel in een eigen rij, de tekst begint er altijd onder */
.bp-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;padding-right:56px}
.dlg .bp-kop .h2{margin-bottom:0}
.bp-fles{flex:none;width:40px;margin-bottom:4px;color:var(--inkt);transform:rotate(8deg)}
.res{display:grid;gap:16px}
.veld{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.veld>span,.veld legend{font-weight:620;font-stretch:112%;font-size:.95rem}
.veld small{font-weight:400;color:var(--inkt-70)}
.veld input,.veld select,.veld textarea{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--inkt);border-radius:4px;background:var(--wit);color:var(--inkt)}
.veld textarea{resize:vertical;min-height:70px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:3px solid var(--tomaat);outline-offset:1px}
.veld-rij{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.personen{display:flex;flex-wrap:wrap;gap:8px}
.personen legend{margin-bottom:8px;padding:0}
.personen label{position:relative}
.personen input{position:absolute;opacity:0;width:1px;height:1px}
.personen span{display:grid;place-items:center;min-width:52px;height:48px;padding:0 12px;border:2px solid var(--inkt);border-radius:4px;font-weight:650;cursor:pointer;transition:background .25s,color .25s}
.personen span:hover{background:var(--perzik)}
.personen input:checked+span{background:var(--inkt);color:var(--room)}
.personen input:focus-visible+span{outline:3px solid var(--tomaat);outline-offset:2px}
.res .btn{justify-self:start;margin-top:6px}
.res-noot{margin:0;min-height:1.5em;font-size:.95rem;color:var(--tomaat)}

/* ---------- mobiel en tablet ---------- */
@media (max-width:900px){
  :root{--nav-h:68px;--pad:clamp(72px,10vh,96px);--boog:min(8vh,64px)}
  .logo img{height:38px}
  .hamb{display:flex}
  .nav nav{position:fixed;left:0;right:0;top:var(--nav-b,68px);bottom:0;visibility:hidden;pointer-events:none;transition:visibility 0s .3s;margin:0}
  body.nav-open .nav nav{visibility:visible;pointer-events:auto;transition-delay:0s}
  .menu{position:absolute;inset:0;background:var(--groen);flex-direction:column;align-items:stretch;padding:18px var(--gut) calc(48px + env(safe-area-inset-bottom));gap:0;opacity:0;transform:translateY(-10px);transition:opacity .25s var(--ease),transform .3s var(--ease);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  body.nav-open .menu{opacity:1;transform:none}
  html.nav-open{overflow:hidden}
  .menu li{background:var(--golf-room) 0 100%/300px 10px repeat-x}
  .menu a{font-family:var(--hand);font-weight:400;font-size:2.4rem;line-height:1.1;padding:14px 0 12px;font-stretch:100%}
  .menu .vul{padding-bottom:0}
  .menu .vul::before,.menu .vul::after{display:none}
  .menu-voet{display:flex;position:absolute;left:var(--gut);right:var(--gut);bottom:calc(28px + env(safe-area-inset-bottom));align-items:flex-end;justify-content:space-between;pointer-events:none;opacity:0;transition:opacity .3s .1s}
  body.nav-open .menu-voet{opacity:1}
  .menu-voet .dd{width:64px;color:var(--room)}
  .menu-voet .hand{margin:0;font-size:2rem;color:var(--tomaat-l)}
  .nav-cta{margin-left:auto;height:46px;padding:0 18px}
  .nav nav{margin-left:0}
  .spread{grid-template-columns:minmax(0,1fr)}
  .spread::before{display:none}
  .hero{min-height:0;display:block;padding:calc(var(--nav-h) + 22px) 0 40px}
  .behang-in{background-size:300px 300px}
  .hero-groen{width:100%;bottom:auto;height:var(--groen-h,56%);
    -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--s)) no-repeat,radial-gradient(circle var(--s) at 50% 100%,#0000 96%,#000 100%) 0 100%/var(--t) var(--s) repeat-x;
    mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--s)) no-repeat,radial-gradient(circle var(--s) at 50% 100%,#0000 96%,#000 100%) 0 100%/var(--t) var(--s) repeat-x;
    -webkit-mask-position:0 0,var(--golf-y,0px) 100%;mask-position:0 0,var(--golf-y,0px) 100%}
  .h1-r{white-space:normal}
  .hero .pg-r{margin-top:40px}
  .collage{margin:0 auto;max-width:460px;width:100%}
  .m-spread{gap:26px}
  .bites-in{grid-template-columns:minmax(0,1fr)}
  .p-bites{justify-self:center;max-width:min(340px,88%);order:2}
  .kaart-vel{order:1}
  .k-oesters{top:auto;bottom:-24px;right:0;width:100px}
  .voet-top{grid-template-columns:minmax(0,1fr)}
  .uren .vandaag::after{left:auto;right:0;top:-18px}
}
@media (max-width:640px){
  .btns .btn{flex:1 1 100%}
  .nav-cta{padding:0 16px;font-size:.95rem}
  .voet-kol{grid-template-columns:minmax(0,1fr);gap:20px}
  .wijn{gap:4px 16px}
  .m-baan{height:210px}
  .m-glas{width:96px;height:144px;left:calc(var(--p) * (100% - 96px))}
  .m-range::-webkit-slider-thumb{width:96px}
  .m-stops button{font-size:1.05rem}
  .veld-rij{grid-template-columns:minmax(0,1fr)}
    .bp-fles{display:none}
}

/* ---------- pagina-overgang: groen doek met kartelranden en de kleine B. ---------- */
.pt{position:fixed;inset:0;z-index:520;background:var(--groen);display:grid;place-items:center;pointer-events:none;visibility:hidden;transform:translateY(calc(100% + 20px))}
.pt img{width:clamp(90px,11vw,140px);height:auto}
.pt::before,.pt::after{content:"";position:absolute;left:0;right:0;height:16px}
.pt::before{bottom:calc(100% - 1px);background:radial-gradient(circle 16px at 50% 100%,var(--groen) 96%,#0000 100%) 0 0/46px 16px repeat-x}
.pt::after{top:calc(100% - 1px);background:radial-gradient(circle 16px at 50% 0,var(--groen) 96%,#0000 100%) 0 0/46px 16px repeat-x}
.pt-in .pt{visibility:visible;transform:none;animation:ptUit .75s cubic-bezier(.76,0,.24,1) .2s forwards}
.pt-klaar .pt{visibility:hidden;animation:none;transform:translateY(calc(100% + 20px))}
.pt-go .pt{visibility:visible;animation:none;transform:none;transition:transform .6s cubic-bezier(.76,0,.24,1)}
@keyframes ptUit{to{transform:translateY(calc(-100% - 20px))}}

/* ---------- paginakop van de vervolgpagina's ---------- */
.ph{padding:clamp(40px,7vh,90px) 0 clamp(72px,10vh,120px)}
.ph-behang{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ph-behang .behang-in{background-image:url(../img/patroon-groen-licht.svg)}
.ph-in{align-items:center}
.ph-in::before{display:none}
.ph-titel{font-size:clamp(2.6rem,5.2vw,4.8rem);margin-bottom:22px}
.ph-lead{max-width:38ch}
.ph-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0}
.ph-beeld{position:relative}
.ph-foto{position:relative;width:min(390px,76%);margin:0 8% 0 auto;transform:rotate(3deg)}
.ph-dd{position:absolute;left:6%;bottom:4%;width:clamp(84px,9vw,130px);color:var(--room);transform:rotate(-10deg)}
.ph-dd-loper{width:clamp(48px,4.6vw,68px)}

/* ---------- menu: de volledige wijnkaart ---------- */
.wk-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(40px,7vw,112px);align-items:end;margin-bottom:clamp(28px,5vh,56px)}
.wk-prijs{max-width:42ch;color:var(--inkt-70);margin:0}
.wk-prijs .hand{font-size:2.4rem;line-height:1;color:var(--tomaat);margin-right:.15em}
.wk-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,48px) clamp(40px,7vw,112px)}
.wk-soort{font-family:var(--brush);font-weight:400;font-size:clamp(3rem,4.6vw,4.2rem);line-height:.9;margin:0;color:var(--tomaat)}
.wk-nul{margin-top:28px}
.vlak-room .wijn{background-image:var(--golf-inkt)}
.vlak-room .w-noot{color:var(--inkt-70)}
.vlak-room .w-fles{color:var(--tomaat)}
.nul{list-style:none;margin:0;padding:0}
.nul li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0 16px;background:var(--golf-inkt) 0 100%/300px 10px repeat-x;font-weight:640;font-stretch:112%;font-size:1.1rem}
.nul .hand{font-weight:400;font-size:1.55rem;color:var(--tomaat);white-space:nowrap}

/* ---------- menu: twee huisregels ---------- */
.regels .h2{max-width:18ch;margin-bottom:clamp(30px,5vh,56px)}
.regels-in{align-items:start}
.regel-kop{font-family:var(--hand);font-weight:400;font-size:clamp(1.9rem,2.6vw,2.3rem);line-height:1;color:var(--tomaat-l);margin:0 0 22px}
.regel p{color:var(--room-78);max-width:42ch}
.som{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 18px;margin:0 0 26px}
.som-deel{display:grid;justify-items:center;gap:6px;text-align:center}
.som-dd{height:clamp(72px,8vw,100px);width:auto;color:var(--room)}
.som-bedrag{font-size:clamp(2rem,3vw,2.6rem);line-height:1;color:var(--room)}
.som-lbl{font-size:.85rem;color:var(--room-78)}
.som-teken{font-size:2.4rem;line-height:1;color:var(--tomaat-l);align-self:center}
.som-oud{position:relative;display:inline-block;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1;color:var(--room-78)}
.som-oud .doorhaal{left:-20%;width:140%;height:.55em}
.som-nieuw{color:var(--tomaat-l);font-size:clamp(2.8rem,4.2vw,3.6rem)}
.flight-prijs{display:flex;align-items:baseline;gap:12px;color:var(--room-78)}
.flight-prijs .hand{font-size:2.6rem;line-height:1;color:var(--room)}
.flight{list-style:none;margin:8px 0 24px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:460px}
.flight li{display:grid;justify-items:center;gap:8px;text-align:center;font-family:var(--hand);font-size:1.25rem;line-height:1.1;color:var(--room)}
.flight-glas{width:56px;height:84px;overflow:visible}
.flight-glas .glas-lijn{stroke:var(--room)}
.fg-wijn{fill:var(--tomaat-l)}
.zoet-kop{font-weight:400;font-size:2rem;line-height:1;color:var(--tomaat);margin:30px 0 0}
.b-cta{margin-top:26px}
.k-meer,.b-meer,.faq-meer{margin:22px 0 0}

/* ---------- groups ---------- */
.opties{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0}
.optie{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2fr);gap:6px clamp(20px,4vw,56px);align-items:start;padding:28px 0 30px;background:var(--golf-inkt) 0 100%/300px 10px repeat-x}
.o-naam{grid-column:1;font-weight:760;font-stretch:118%;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.05;letter-spacing:-.02em;margin:0}
.o-meta{grid-column:1;margin:0;font-size:1.35rem;line-height:1.1;color:var(--tomaat)}
.o-tekst{grid-column:2;grid-row:1/3;margin:0;color:var(--inkt-70)}
.o-prijs{grid-column:3;grid-row:1/3;justify-self:end;text-align:right;margin:0;color:var(--inkt-70);font-size:.9rem}
.o-prijs .hand{display:block;font-size:2.2rem;line-height:1;color:var(--tomaat)}
.wo-in{align-items:start}
.wo-intro{color:var(--room-78);max-width:36ch;margin-top:22px}
.wo-foto{position:relative;width:min(300px,70%);margin-top:30px;transform:rotate(-3deg)}
.agenda{list-style:none;margin:0;padding:0}
.ev{padding:22px 0 24px;background:var(--golf-room) 0 100%/300px 10px repeat-x}
.ev-wanneer{display:block;font-size:1.5rem;line-height:1.1;color:var(--tomaat-l);margin-bottom:6px}
.ev-naam{font-weight:720;font-stretch:118%;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 6px}
.ev p{margin:0;color:var(--room-78)}
.gc-in{align-items:center}
.gc-beeld{position:relative}
.gc-foto{position:relative;width:min(340px,72%);transform:rotate(-3deg)}
.gc-dd{position:absolute;right:10%;bottom:2%;width:clamp(90px,10vw,140px);color:var(--inkt);transform:rotate(10deg)}
.gc-tekst{max-width:40ch;color:var(--inkt-70)}
.gc-bedragen{list-style:none;margin:6px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gc-bedragen li{--n:7px;padding:12px 18px 10px;background:var(--room);font-family:var(--hand);font-size:1.5rem;line-height:1;color:var(--inkt);
  -webkit-mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n))}
.aq-in{align-items:start}
.aq-tekst{max-width:38ch;color:var(--inkt-70)}
.aq-dd{display:block;width:60px;margin-top:30px;color:var(--inkt);transform:rotate(-8deg)}
.aanvraag{display:grid;gap:16px}
.aanvraag .btn{justify-self:start;margin-top:6px}

/* ---------- visit ---------- */
.uren-groot{max-width:520px}
.uren-groot div{padding:14px 0 15px}
.uren-noot{color:var(--inkt-70);margin-top:-6px}
.h2-klein{font-size:clamp(1.9rem,3vw,2.8rem);margin-bottom:18px}
.adres-groot{font-size:1.15rem}
.goed-kop{font-weight:400;font-size:1.9rem;line-height:1;color:var(--tomaat);margin:26px 0 6px}
.goed{list-style:none;margin:0;padding:0}
.goed li{display:flex;align-items:center;gap:16px;padding:12px 0 14px;background:var(--golf-inkt) 0 100%/300px 10px repeat-x}
.goed-dd{flex:none;height:40px;width:auto;color:var(--inkt)}
.bk-in{align-items:start}
.bk-tekst{color:var(--room-78);max-width:38ch}
.bk-foto{position:relative;width:min(300px,70%);margin-top:28px;transform:rotate(-3deg)}
.vlak-groen .veld>span,.vlak-groen .veld legend{color:var(--room)}
.vlak-groen .veld small{color:var(--room-78)}
.vlak-groen .veld input,.vlak-groen .veld select,.vlak-groen .veld textarea{border-color:var(--room)}
.vlak-groen .personen span{border-color:var(--room);color:var(--room)}
.vlak-groen .personen span:hover{background:rgba(254,234,209,.14)}
.vlak-groen .personen input:checked+span{background:var(--room);color:var(--groen)}
.vlak-groen .res-noot{color:var(--tomaat-l)}
.res-los .btn{justify-self:start}
.faq-pag{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start}
.faq-pag-kop{position:sticky;top:calc(var(--nav-h) + 30px)}
.faq-dd{display:block;width:64px;margin-top:26px;color:var(--inkt);transform:rotate(-14deg)}

@media (max-width:900px){
  .wk-kop,.wk-raster,.faq-pag{grid-template-columns:minmax(0,1fr)}
  .faq-pag-kop{position:static}
  .optie{grid-template-columns:minmax(0,1fr) auto}
  .o-tekst{grid-column:1/3;grid-row:auto;margin-top:8px}
  .o-prijs{grid-column:2;grid-row:1/3}
  .ph-foto{margin:14px auto 0;width:min(320px,72%)}
  .ph-dd{left:2%;bottom:-2%;width:84px}
  .voet-kol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc-beeld{order:2}
  .wo-foto,.bk-foto{display:none}
}
@media (max-width:640px){
  .flight{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .som{gap:10px 12px}
  .som-dd{height:64px}
}
@media (prefers-reduced-motion:reduce){.pt{display:none!important}}

/* ---------- gift card builder: platte kaart met de etiketvorm van de knoppen, draait om via scaleX ---------- */
.dlg-bon{width:min(960px,calc(100vw - 32px))}
.bon-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.bon-kant{position:sticky;top:0}
.bon{--n:16px;position:relative;aspect-ratio:1.6;width:100%;
  -webkit-mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n))}
.bon-vlak{position:absolute;inset:0;overflow:hidden}
.bon-vlak[hidden]{display:none}
.bon-voor{background:var(--groen) url(../img/patroon-groen-licht.svg) 0 0/260px 260px;color:var(--room)}
/* alles staat op een vaste plek op de kaart: alleen de ingevulde tekst verandert, niets anders schuift */
.bon-logo{position:absolute;left:8%;top:10%;width:30%;height:auto}
.bon-soort{position:absolute;right:8%;top:11%;font-weight:600;font-stretch:118%;font-size:clamp(.75rem,1.4vw,.9rem);letter-spacing:.04em;color:var(--room-78)}
.bon-bedrag{position:absolute;right:8%;bottom:27%;display:flex;align-items:baseline;gap:6px;white-space:nowrap;color:var(--tomaat-l)}
.bon-bedrag .hand{font-size:clamp(3.4rem,7vw,5rem);line-height:.8}
.bon-bedrag small{font-weight:600;font-stretch:112%;font-size:.8rem;color:var(--room)}
.bon-regel{position:absolute;left:8%;right:8%;bottom:8%;padding-top:10px;font-size:clamp(.72rem,1.3vw,.85rem);color:var(--room-78);background:var(--golf-room) 0 0/300px 10px repeat-x}
.bon-achter{background:var(--perzik) url(../img/patroon-perzik.svg) 0 0/260px 260px;color:var(--inkt)}
.bon-aan{position:absolute;left:8%;right:30%;top:9%;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.1;color:var(--tomaat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* p.hand geeft elders fit-content en een draaiing; op de kaart heeft het bericht een vast vak */
.bon p.bon-tekst{position:absolute;left:8%;right:20%;top:28%;bottom:30%;width:auto;margin:0;transform:none;font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.1;overflow:hidden;overflow-wrap:anywhere}
.bon-van{position:absolute;right:26%;bottom:10%;max-width:60%;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.1;color:var(--tomaat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bon-b{position:absolute;right:7%;bottom:10%;width:13%;color:var(--tomaat);--m:url(../img/logo-b.svg);--r:296/342;transform:rotate(-8deg)}
.bon-knoppen{display:flex;justify-content:center;gap:8px;margin-top:16px}
.bon-zijde{border:2px solid var(--inkt);background:none;padding:8px 18px 7px;font-family:var(--hand);font-size:1.3rem;line-height:1;color:var(--inkt);cursor:pointer;border-radius:4px;transition:background .25s,color .25s}
.bon-zijde:hover{background:var(--perzik)}
.bon-zijde.is-hier{background:var(--inkt);color:var(--room)}
.bon-form{display:grid;gap:14px}
.bon-bedragen span{min-width:56px}
.bon-form .btn{justify-self:start;margin-top:4px}
/* kleine kaart in de cadeaubon-sectie: klik opent de builder */
.bon-mini{display:block;width:min(420px,88%);border:0;padding:0;background:none;cursor:pointer;transform:rotate(-4deg);transition:transform .5s var(--spring)}
.bon-mini:hover,.bon-mini:focus-visible{transform:rotate(-1deg) translateY(-6px)}
.bon-mini .bon-vlak{text-align:left}
.knop-link{border:0;background:none;padding:0 0 6px;font:inherit;color:inherit;cursor:pointer}
@media (max-width:760px){
  .bon-grid{grid-template-columns:minmax(0,1fr)}
  /* de kaart blijft bovenin de popup staan terwijl je typt */
  .bon-kant{position:sticky;top:calc(-1 * clamp(26px,4vw,46px));z-index:2;background:var(--room);margin:0 -8px;padding:10px 8px 12px}
  .bon{width:min(100%,360px);margin-inline:auto}
  .bon-knoppen{margin-top:10px}
}

/* ---------- seizoenswijn: een wijnetiket met de ingesneden hoeken ---------- */
.special{--n:12px;position:relative;margin-top:34px;padding:26px 30px 24px;background:var(--room);color:var(--inkt);
  -webkit-mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n))}
.special-lbl{margin:0 0 6px!important;font-size:1.6rem!important;color:var(--tomaat)}
.special-naam{margin:0;padding-right:56px;font-weight:780;font-stretch:118%;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em}
.special-noot{margin:10px 0 14px;color:var(--inkt-70);max-width:42ch}
.special-prijs{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font-size:.95rem;color:var(--inkt-70)}
.special-prijs .hand{font-size:2rem;line-height:1;color:var(--tomaat)}
.special-prijs .hand+.hand,.special-prijs .hand:nth-of-type(2){margin-left:10px}
.special-dd{position:absolute;right:26px;top:22px;width:34px;color:var(--inkt);transform:rotate(12deg)}
.special-breed{margin:0 0 clamp(30px,5vh,52px);background:var(--groen);color:var(--room);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 40px;align-items:end}
.special-breed .special-lbl{color:var(--tomaat-l);grid-column:1}
.special-breed .special-naam{grid-column:1}
.special-breed .special-noot{grid-column:2;grid-row:1/3;color:var(--room-78);margin:0}
.special-breed .special-prijs{grid-column:1/3;color:var(--room-78)}
.special-breed .special-prijs .hand{color:var(--tomaat-l)}
.special-breed .special-dd{color:var(--room)}
@media (max-width:760px){.special-breed{grid-template-columns:minmax(0,1fr)}.special-breed .special-noot{grid-column:1;grid-row:auto;margin:6px 0 10px}.special-breed .special-prijs{grid-column:1}}

/* ---------- popups: de ingesneden hoeken van de knoppen, ook de sluitknop ---------- */
.dlg{--n:18px;-webkit-mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n))}
.dlg .dlg-x{--n:8px;right:18px;top:18px;width:48px;height:48px;background:var(--inkt);color:var(--room);transition:background .3s var(--ease);
  -webkit-mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n));mask:radial-gradient(var(--n) at var(--n) var(--n),#0000 97%,#000) calc(-1*var(--n)) calc(-1*var(--n))}
.dlg .dlg-x:hover,.dlg .dlg-x:focus-visible{background:var(--tomaat);color:var(--room);transform:none}
.dlg .dlg-x svg{width:20px;height:20px;transition:transform .45s var(--spring)}
.dlg .dlg-x:hover svg{transform:rotate(90deg)}
.dlg .dlg-x:focus-visible{outline:2px dashed var(--room);outline-offset:-6px}

/* about op home: de kartelrand bovenaan groeit pas als het doek omhoog komt */
.kartel-boven{display:none;top:auto;bottom:calc(100% - 1px);transform-origin:50% 100%;
  background:radial-gradient(circle var(--s) at 50% 100%,var(--kc) 96%,#0000 100%) var(--golf-x,0px) 0/var(--t) var(--s) repeat-x}
.is-anim .kartel-boven{display:block}
@media (max-width:640px){.bon-mini{width:82%;transform:rotate(-3deg)}}

/* ---------- toegankelijk: zonder beweging alles in rust ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .intro{display:none!important}
}