@font-face{font-family:"Bright Marching";src:url(../fonts/BrightMarching-Regular.otf) format("opentype");font-display:swap}
:root{--rood:#7c1c33;--boter:#f1e1b6;--kakao:#5c2a2e;--poeder:#d3e9f5;--kop:"Bright Marching",Georgia,serif;--tekst:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 1.0625rem/1.7 var(--tekst);color:var(--kakao);background:var(--boter)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--kakao);outline-offset:3px}
.rood :focus-visible,.top :focus-visible,.hero :focus-visible{outline-color:var(--boter)}
h1,h2,h3{font-family:var(--kop);font-weight:400;line-height:1.15;margin:0 0 .6em}
h2{font-size:clamp(2rem,5vw,3.2rem)}
h3{font-size:1.7rem;text-align:center}
p{margin:0 0 1em;max-width:62ch}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 5vw;background:var(--rood);color:var(--boter)}
.merk img{height:26px;width:auto}
nav{display:flex;gap:1.6rem}
nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--boter)}
.nav-knop{display:none;font:inherit;color:inherit;background:none;border:2px solid var(--boter);border-radius:999px;padding:4px 16px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;min-height:90vh;padding:6vh 5vw;background:var(--rood);color:var(--boter)}
.hero h1 img{width:min(520px,100%);margin-bottom:1.2rem}
.hero p{font-size:1.5rem}
.boog{width:100%;max-height:80vh;aspect-ratio:2/3;object-fit:cover;object-position:center 30%;border-radius:999px 999px 14px 14px}
.hero .boog{justify-self:center;max-width:520px}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4rem}
.knop{font:inherit;text-decoration:none;cursor:pointer;padding:10px 24px;border-radius:999px;border:2px solid var(--boter);background:var(--boter);color:var(--rood)}
.knop.licht{background:none;color:inherit}
.knop:hover{background:var(--kakao);border-color:var(--kakao);color:var(--boter)}
.blok{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:center;padding:12vh 5vw}
.blok.kolom{display:block}
.blok .boog{max-width:460px;justify-self:center}
.boter{background:var(--boter)}.rood{background:var(--rood);color:var(--boter)}.poeder{background:var(--poeder);color:var(--rood)}
.tekst{position:relative}
.intro{font-size:1.25rem;margin-bottom:2.4rem}
.tekening{position:absolute;pointer-events:none}
.borden{display:grid;grid-template-columns:1fr 1fr;gap:3vw}
.bord{background:var(--kakao);color:var(--boter);border:7px solid var(--boter);border-radius:16px;padding:28px clamp(18px,3vw,40px) 20px}
.rij{display:flex;align-items:baseline;gap:10px;margin-top:1.1rem}
.rij .stip{flex:1;border-bottom:2px dotted rgba(241,225,182,.45);transform:translateY(-5px)}
.rij b{font-weight:400;font-size:1.2rem}
.rij+small{display:block;opacity:.85;line-height:1.4;margin-top:2px;font-size:1rem}
.ig{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 8px 34px}
.ig a{flex:none;width:250px;scroll-snap-align:start;text-decoration:none;background:#f9f0d5;padding:10px 10px 14px;border-radius:6px;box-shadow:0 3px 0 rgba(92,42,46,.25)}
.ig a:nth-child(odd){transform:rotate(-1.6deg)}.ig a:nth-child(even){transform:rotate(1.3deg)}
.ig img{aspect-ratio:4/5;width:100%;object-fit:cover;border-radius:3px;margin-bottom:10px}
.ig span{display:block;line-height:1.35}
.ig a:hover{background:#fff}
form{background:var(--boter);color:var(--kakao);padding:clamp(20px,4vw,40px);border-radius:16px}
label{display:block;margin-bottom:1.1rem}
input,textarea{display:block;width:100%;margin-top:6px;font:inherit;color:inherit;background:#fbf4de;border:2px solid var(--kakao);border-radius:10px;padding:10px 14px}
.val{position:absolute;left:-9999px}
#melding{margin:1rem 0 0}
.status{font-family:var(--kop);font-size:1.5rem}
dl{display:grid;grid-template-columns:auto 1fr;gap:2px 28px;margin:0 0 1.4rem;max-width:340px}
dt,dd{margin:0}dt.nu,dt.nu+dd{font-weight:700}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:28px 5vw;background:var(--kakao);color:var(--boter)}
footer p{margin:0}
@media(max-width:860px){
.hero,.blok,.borden{grid-template-columns:1fr}
.hero{min-height:0}.hero .boog,.blok .boog{max-width:360px}
.nav-knop{display:block}
nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--rood);padding:8px 5vw 18px}
nav.open{display:flex}nav a{padding:10px 0}}

h2,h3{font-family:var(--tekst);font-weight:700}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-size:1.3rem}
h1,.stelling,.status{font-family:var(--kop);font-weight:400}
h2.stelling{font-size:clamp(2rem,5vw,3.2rem)}
.intro{font-size:1.1rem}.hero p{font-size:1.25rem}
.blok .boog{border-radius:14px;aspect-ratio:4/5}
.bord{background:none;border:1px solid rgba(241,225,182,.45)}
.rij .stip{border-bottom:1px solid rgba(241,225,182,.3)}
.rij b{font-family:var(--tekst);font-weight:700;font-size:1rem}
.boter .knop,.poeder .knop,form .knop{background:var(--rood);border-color:var(--rood);color:var(--boter)}
.boter .knop.licht{background:none;color:var(--rood)}
.knop:hover{background:var(--kakao);border-color:var(--kakao);color:var(--boter)!important}
.ig{scroll-snap-type:none;scrollbar-width:none;padding:6px 0 20px}
.ig::-webkit-scrollbar{display:none}
.ig a,.ig a:hover{width:300px;background:none;padding:0;border-radius:0;box-shadow:none;transform:none}
.foto{position:relative;margin-bottom:12px}
.ig img{margin:0;border-radius:12px}
.speel{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(124,28,51,.85);display:grid;place-items:center}
.tek{font-weight:700;margin-bottom:6px}
.label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--rood)}

.koeken{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.kaart img{aspect-ratio:4/5;width:100%;object-fit:cover;border-radius:14px;margin-bottom:16px}
.kaart h3{text-align:left;margin-bottom:.4em}
.kaart p{margin-bottom:.8em}
.prijs{display:inline-block;border:1px solid rgba(241,225,182,.55);border-radius:999px;padding:3px 16px;font-size:.9rem}
.sub{text-align:left;margin:4.5rem 0 1rem}
.drankjes{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;max-width:820px}
.drankjes .rij{margin-top:.9rem}
.poeder{color:var(--kakao)}.poeder h2{color:var(--rood)}
form{background:#fff;border-radius:22px;padding:clamp(24px,4vw,44px)}
label{font-weight:500;font-size:.95rem;margin-bottom:1.2rem}
input,textarea{background:#f1f6fa;border:1.5px solid transparent;border-radius:12px;padding:14px 16px;margin-top:8px;transition:border-color .15s,background .15s}
input:focus,textarea:focus{outline:none;border-color:var(--rood);background:#fff}
form .knop{width:100%;padding:14px 24px;font-weight:700}
@media(max-width:1000px){.koeken{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.koeken,.drankjes{grid-template-columns:1fr}}

.kaart{background:var(--boter);color:var(--kakao);border-radius:18px;padding:14px 14px 22px}
.kaart img{margin-bottom:18px;border-radius:12px}
.kaart h3,.kaart p{margin-left:6px;margin-right:6px}
.kaart h3{color:var(--rood)}
.kaart .prijs{background:var(--rood);border-color:var(--rood);color:var(--boter);margin-bottom:0}
footer{display:block;padding:0}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:5vw;padding:64px 5vw 40px}
.foot h3{text-align:left;font-size:1rem;margin-bottom:.8em}
.foot p{margin:0 0 .9em}
.foot-logo{width:210px;margin-bottom:1.2rem}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot-links a{display:block;padding:2px 0}
.foot-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:20px 5vw 28px;border-top:1px solid rgba(241,225,182,.25);font-size:.9rem}
.foot-onder p{margin:0}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot{grid-template-columns:1fr}}

.sfeer{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 5vw 12vh}
.sfeer img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.sfeer img:nth-child(even){margin-top:36px}
@media(max-width:700px){.sfeer{grid-template-columns:1fr 1fr}.sfeer img:nth-child(even){margin-top:0}}

.extra{grid-column:1/-1;margin:1.2rem 0 0}

.merk img{height:42px}
@media(max-width:560px){.merk img{height:34px}}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.status{font-family:var(--tekst);font-weight:700;font-size:1.15rem}
.blok{position:relative}
.icoon{position:absolute;pointer-events:none;height:auto}
.i-menu{width:84px;right:6vw;top:8vh}
.i-ig{width:76px;right:6vw;top:8vh}
.i-over{width:78px;right:0;bottom:-64px;transform:rotate(5deg)}
.i-best{width:48px;right:0;bottom:-48px}
.i-contact{width:68px;right:0;top:-6px}
@media(max-width:700px){.icoon{display:none}}
.foot-icoon{display:flex;gap:28px;align-items:flex-end;padding:0 5vw 28px}
.foot-icoon img{height:44px;width:auto}
.ig a{background:#fbf4de!important;border:1px solid rgba(92,42,46,.14);border-radius:18px!important;padding:14px 14px 18px!important}
.ig a:hover{background:#fff!important}
.pk{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.av{width:38px;height:38px;border-radius:50%;background:#f1e1b6;padding:6px;object-fit:contain;margin:0!important}
.nm{display:flex;flex-direction:column;line-height:1.25;font-size:.9rem}.nm small{opacity:.7}
.label{border-top:1px solid rgba(92,42,46,.14);padding-top:12px;margin-top:4px}

.merk img{height:52px}
@media(max-width:560px){.merk img{height:40px}}
.ig{gap:48px}
.label{gap:14px}
.badge{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;background:#f1e1b6;color:var(--rood);display:grid;place-items:center}

.ig{gap:80px}
.ig .label{display:flex;align-items:center;gap:16px}
.ig .label svg{flex:none}
.ig .badge{display:grid;place-items:center;top:12px;left:12px;width:36px;height:36px}
.ig .badge svg{display:block}
.ig .speel{display:grid;place-items:center}

.i-best{bottom:-135px}
@media(max-width:860px){.i-best{display:none}}

.hero h1{font-family:var(--tekst);font-weight:700;font-size:clamp(2rem,4.5vw,3.3rem);line-height:1.15;margin-bottom:.5em}
.hero p{font-size:1.15rem}
.open{display:inline-block;background:var(--boter);color:var(--rood);padding:12px 18px;font-weight:700;font-size:1.1rem!important;margin:.4rem 0 .6rem}
.stelling{text-transform:lowercase}
.nav-knop{border:0;border-radius:0;padding:8px}
.nav-knop span{display:block;width:26px;height:3px;background:var(--boter);margin:5px 0}
#over{padding-bottom:4vh}
.sfeerrij{padding:0 0 12vh}
.band{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;padding:0 0 50px}
.band::-webkit-scrollbar{display:none}
.band img{flex:none;width:300px;height:375px;object-fit:cover}
.band img:nth-child(even){margin-top:44px}
.blok .boog,.kaart,.kaart img,.band img,.ig a,.ig img,form,input,textarea,.badge{border-radius:0!important}
.i-menu{transform:rotate(14deg)}
.menu2{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:1rem}
.koeken{grid-template-columns:repeat(3,1fr);max-width:1000px}
.kaart .prijs{display:inline-block}
form{background:var(--boter);color:var(--kakao)}
input,textarea{background:#fbf4de;border:1.5px solid rgba(92,42,46,.35)}
input:focus,textarea:focus{border-color:var(--rood);background:#fff}
.klein{font-size:.9rem;margin:0 0 1rem}
dt{font-weight:400}
.privacy{max-width:760px;margin:0 auto;padding:8vh 5vw 12vh}
.privacy h1{font-family:var(--tekst);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;line-height:1.2}
.privacy h2{font-size:1.3rem;margin:2.2rem 0 .6rem}
@media(max-width:1000px){.koeken{grid-template-columns:1fr 1fr}}
@media(max-width:860px){#over .boog{display:none}.menu2{grid-template-columns:1fr}.koeken{grid-template-columns:1fr}.band img{width:240px;height:300px}}
.terug{color:var(--boter);text-decoration:none;border-bottom:2px solid var(--boter)}

.koeken{margin-left:auto;margin-right:auto}
@media(min-width:861px){.intro+.sub{text-align:center}}
.i-over{width:52px;right:-4vw;bottom:-40px}
#over{padding-bottom:12vh}
.band img{padding:7px;background:#fbf4de;border:1px solid rgba(92,42,46,.3)}
.band,.ig{cursor:grab}
.band img,.ig a{-webkit-user-drag:none}

.i-menu{transform:rotate(-14deg)}
#menu{padding-top:9vh;padding-bottom:9vh}
#menu .intro{margin-bottom:1rem}
#menu .sub{margin:2rem 0 .8rem}
.koeken{gap:20px;max-width:900px}
.kaart{padding:12px 12px 16px}
.kaart img{aspect-ratio:4/3;margin-bottom:12px;object-position:center 45%}
.menu2{grid-template-columns:2fr 1fr;gap:5vw;margin-top:0}
#drankjes{column-count:2;column-gap:48px}
#drankjes .rij,#extras .rij{break-inside:avoid;margin-top:.55rem}
@media(max-width:860px){.menu2{grid-template-columns:1fr}#drankjes{column-count:1}}

@media print{.top,.terug{display:none}body{background:#fff;color:#000}.privacy{padding:0;max-width:none}.privacy h1,.privacy h2{color:#000}a{color:#000}}

.hero h1{font-family:var(--kop);font-weight:400;text-transform:lowercase;font-size:clamp(2.3rem,5.5vw,4.4rem);line-height:1.05}
.uitleg{max-width:62ch;margin:0 0 1.2rem}
@media(min-width:861px){#menu h2+.sub{text-align:center}#menu h2+.sub+.uitleg{margin-left:auto;margin-right:auto;text-align:center}}

.hero h1{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1}
#menu>:not(.icoon){max-width:900px;margin-left:auto;margin-right:auto}
#menu h2,#menu .sub,#menu .uitleg{text-align:center}
#menu .uitleg{margin:0 auto 1rem}
#menu .sub{margin:3rem 0 .6rem}
#menu h2+.sub{margin-top:1.5rem}
#menu .menu2{display:block;margin-top:0}
#drankjes{column-count:2;column-gap:56px;margin-top:1.4rem}
#extras{display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;margin-top:1.4rem}
#menu .rij{margin:0;padding:.65rem 0;border-bottom:1px solid rgba(241,225,182,.3);justify-content:space-between}
#menu .rij .stip{display:none}
#drankjes .rij{break-inside:avoid}
@media(max-width:860px){#drankjes{column-count:1}#extras{grid-template-columns:1fr 1fr;column-gap:24px}}
#menu .sub{margin-left:auto;margin-right:auto}
.hero h1{line-height:1.22;letter-spacing:.01em;overflow-wrap:break-word}
#locatie .boog{object-position:center bottom}