/* Ontwerp «Moderner» (v6): Etalage, maar strak en ruim. Grote foto's die tot de rand lopen, korte teksten, veel wit. Hero met de kop links en een hoge foto die rechts uit beeld loopt.
   Letters: Archivo (koppen, stevig en eigentijds) + DM Sans (tekst). Kleuren uit de zaak: het frietgeel van het mannetje op het raam, het rood van de letters 't ZAND, en inktzwart voor knoppen.
   Basis wit, geel voor grote vlakken (hero, review), zwarte knoppen die rood worden bij hover, lichtgrijs voor rustige banden.
   Hoofdzoekwoord: cafetaria Tilburg (index.html). Overige: menukaart cafetaria Tilburg (menukaart.html), snackbar Everjachtstraat Tilburg (contact.html)
   Dienstzoekwoorden: friet halen Tilburg (friet-tilburg.html), vegetarische snacks Tilburg (vegetarische-snacks-tilburg.html),
   halal snacks Tilburg (halal-snacks-tilburg.html), eetsalon Tilburg (eetsalon-tilburg.html)
*/
:root{
  --geel:#FFC52E;
  --geel-zacht:#FFF3CF;
  --rood:#D8262C;
  --inkt:#161616;
  --grijs:#5E5E5E;
  --vlak:#F4F4F2;
  --lijn:#E4E4E0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.6;color:var(--inkt);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--inkt);text-decoration-color:var(--rood);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--rood)}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
h1,h2,h3{font-family:"Archivo","DM Sans",system-ui,sans-serif;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(38px,5.4vw,56px)}
h2{font-size:clamp(28px,3.4vw,38px)}
h3{font-size:22px;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:60ch}
.wrap{width:min(1240px,90%);margin:0 auto}
.smal{width:min(760px,90%);margin:0 auto}
section{padding:clamp(64px,9vw,128px) 0}
.lead{font-size:clamp(19px,1.6vw,21px);color:#2b2b2b}
.klein{font-size:15px;color:var(--grijs)}
.ow{overflow-wrap:anywhere}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:.75em 1.5em;border-radius:999px;background:var(--inkt);color:#fff;font-weight:700;text-decoration:none;border:0;font-size:18px;font-family:inherit;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--rood);color:#fff;transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn.licht{background:#fff;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--inkt)}
.btn.licht:hover{background:var(--inkt);color:#fff}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.tekstlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--lijn)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt);min-height:44px}
.logo img{width:40px;height:40px}
.logo span{font-family:"Archivo",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1}
.logo small{display:block;font-family:"DM Sans",sans-serif;font-weight:500;font-size:13px;letter-spacing:0;color:var(--grijs);margin-top:3px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:500;border-radius:999px}
.nav a[aria-current="page"]{background:var(--geel-zacht);font-weight:700}
.nav a:hover{color:var(--rood)}
.nav .btn{margin-left:8px;padding:.6em 1.2em;min-height:46px;font-size:16px;color:#fff}
.nav .btn:hover{color:#fff}
.menu-knop{display:none;min-height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--inkt);background:#fff;font:inherit;font-weight:700;cursor:pointer;color:var(--inkt)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;min-height:min(86vh,780px);padding:0}
.hero-tekst{padding:clamp(48px,7vw,104px) clamp(20px,4vw,64px) clamp(48px,6vw,80px) max(5vw,calc((100vw - 1240px)/2));display:flex;flex-direction:column;justify-content:center}
.hero-tekst h1{max-width:12ch}
.hero-foto{position:relative;background:var(--geel);padding:clamp(20px,3vw,40px) 0 clamp(20px,3vw,40px) clamp(20px,3vw,40px)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 60%;border-radius:20px 0 0 20px}
.open-chip{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-top:22px;min-height:24px}
.open-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grijs)}
.open-chip.is-open::before{background:#1f9d55;box-shadow:0 0 0 4px rgba(31,157,85,.18)}
.score{font-size:15px;color:var(--grijs);margin-top:18px}
.score a{color:var(--grijs)}

/* infostrook */
.info{background:var(--vlak);padding:0}
.info .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.info div{padding:28px 28px 26px 0}
.info div + div{padding-left:28px;border-left:1px solid var(--lijn)}
.info h2{font-size:15px;font-family:"DM Sans",sans-serif;letter-spacing:0;font-weight:700;color:var(--grijs);margin:0 0 4px}
.info p{margin:0;font-size:19px;font-weight:500}
.info a{display:inline-flex;align-items:center;min-height:44px}

/* brede foto */
.breed{padding:clamp(64px,9vw,120px) 0 0}
.breed-kop{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.breed-kop p{margin:0}
.breed figure{margin:0}
.breed img{width:100%;aspect-ratio:21/9;object-fit:cover}
.breed figcaption{width:min(1240px,90%);margin:14px auto 0}

/* tegels naar dienstpagina's */
.tegels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:40px}
.tegel{position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;background:var(--inkt);min-height:340px}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tegel:hover img{transform:scale(1.04)}
.tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 60%)}
.tegel div{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:1}
.tegel h3{margin:0 0 4px;font-size:clamp(22px,2.2vw,28px);color:#fff}
.tegel p{margin:0;font-size:16px;color:#f1f1f1}
.tegel:hover{color:#fff}
.t-7{grid-column:span 7}.t-5{grid-column:span 5}

/* even voorstellen */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.duo img{border-radius:18px;width:100%;aspect-ratio:4/3;object-fit:cover}
.duo.omgekeerd .duo-foto{order:2}

/* review */
.review-band{background:var(--geel)}
.review-band blockquote{margin:0;font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(24px,3vw,36px);line-height:1.3;letter-spacing:-.015em;max-width:30ch}
.sterren{color:var(--inkt);font-size:22px;letter-spacing:2px;margin-bottom:18px}
.wie{margin-top:22px;font-weight:700}
.review-band .klein{color:#3a3a3a;margin-top:6px}
.review-band .klein a{color:#3a3a3a}

/* openingstijden */
.tijden{width:100%;border-collapse:collapse;font-size:18px}
.tijden td{padding:12px 0;border-bottom:1px solid var(--lijn)}
.tijden td:last-child{text-align:right;font-weight:500}
.tijden tr.vandaag td{font-weight:700}
.tijden tr.vandaag td:first-child::after{content:"  vandaag";font-weight:500;color:var(--rood);font-size:15px}

/* slot */
.slot{background:var(--inkt);color:#fff}
.slot .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.slot h2{color:#fff;margin:0 0 .3em}
.slot p{margin:0;color:#ddd}
.slot .btn{background:var(--geel);color:var(--inkt)}
.slot .btn:hover{background:#fff;color:var(--inkt)}

/* subpagina kop */
.paginakop{padding:clamp(48px,7vw,96px) 0 clamp(32px,4vw,48px)}
.paginakop p.lead{max-width:52ch}
.kopfoto{margin:0}
.kopfoto img{width:100%;aspect-ratio:16/7;object-fit:cover}

/* menukaart */
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px)}
.menu-grid h2{font-size:24px;padding-bottom:10px;border-bottom:3px solid var(--geel);margin-bottom:12px}
.menu-grid ul{list-style:none;margin:0;padding:0}
.menu-grid li{padding:7px 0;border-bottom:1px solid var(--lijn)}
.menu-grid li small{color:var(--grijs);font-size:15px}
.menu-grid .notitie{font-size:15px;color:var(--grijs);margin-top:12px}
.menu-grid .notitie a{display:inline-flex;align-items:center;min-height:44px}
.springlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.springlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--vlak);text-decoration:none;font-weight:500}
.springlinks a:hover{background:var(--geel-zacht);color:var(--inkt)}

/* dienstpagina */
.tekstblok h2{margin-top:1.4em}
.tekstblok h2:first-child{margin-top:0}
.lijst{columns:2;column-gap:40px;padding-left:1.1em;margin:0 0 1em}
.lijst li{margin:0 0 6px;break-inside:avoid}
.faq{background:var(--vlak)}
.faq-lijst{max-width:760px}
.faq-lijst h3{margin:1.6em 0 .35em;font-size:21px}
.faq-lijst h3:first-of-type{margin-top:.6em}
.faq-lijst p{margin:0}
.citaat{border-left:4px solid var(--geel);padding:4px 0 4px 22px;margin:28px 0}
.citaat blockquote{margin:0;font-size:20px;font-weight:500}
.citaat p{margin:8px 0 0;font-size:15px;color:var(--grijs)}
.citaat p a{color:var(--grijs)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.groot-tel{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
form{display:grid;gap:18px;margin-top:12px}
label{font-weight:700;font-size:16px;display:block;margin-bottom:6px}
input,textarea{width:100%;font:inherit;font-size:17px;padding:13px 14px;border:2px solid var(--lijn);border-radius:12px;background:#fff;color:var(--inkt)}
input:focus,textarea:focus{border-color:var(--inkt);outline:none}
textarea{min-height:140px;resize:vertical}
.fout{color:var(--rood);font-size:15px;margin-top:4px;min-height:1px}
.melding{background:var(--geel-zacht);border-radius:12px;padding:14px 16px;font-weight:500;min-height:0}
.melding[hidden]{display:none}

/* privacy */
.privacy{padding:clamp(48px,7vw,96px) 0}
.privacy h2{font-size:26px;margin-top:1.5em}
.privacy h3{font-size:20px}
.privacy address a{display:inline-flex;align-items:center;min-height:44px}

/* footer */
.site-footer{background:#0f0f0f;color:#cfcfcf;padding:72px 0 120px;font-size:16px}
.site-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.site-footer h2{font-size:17px;color:#fff;font-family:"DM Sans",sans-serif;letter-spacing:0;font-weight:700;margin:0 0 12px}
.site-footer a{color:#fff;text-decoration-color:var(--geel)}
.site-footer a:hover{color:var(--geel)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px}
.site-footer address{font-style:normal}
.site-footer address a{display:inline-flex;align-items:center;min-height:44px}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ft-logo img{width:40px;height:40px}
.ft-logo span{font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;color:#fff;letter-spacing:-.03em}
.ft-id__reg a{display:inline-flex;align-items:center;min-height:44px}

/* demomelding en belknop */
.demo{position:fixed;left:12px;bottom:12px;z-index:30;max-width:min(420px,calc(100% - 24px));background:#fff;color:var(--inkt);font-size:13px;line-height:1.35;padding:8px 12px;border-radius:10px;box-shadow:0 2px 14px rgba(0,0,0,.14)}
.belknop{display:none}

/* beweging */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .tegel img,.btn{transition:none}
}

/* tablet */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-tekst{padding:48px 5% 36px}
  .hero-foto{padding:0 0 0 5%;background:linear-gradient(to bottom,#fff 30%,var(--geel) 30%)}
  .hero-foto img{aspect-ratio:4/3;height:auto;border-radius:18px 0 0 18px}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
}
/* mobiel */
@media (max-width:860px){
  .menu-knop{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--lijn);padding:8px 5% 20px}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a{padding:0 14px}
  .nav .btn{margin:10px 0 0}
}
@media (max-width:720px){
  body{font-size:17px}
  section{padding:56px 0}
  .info .wrap{grid-template-columns:1fr}
  .info div,.info div + div{padding:18px 0;border-left:0;border-bottom:1px solid var(--lijn)}
  .info div:last-child{border-bottom:0}
  .t-7,.t-5{grid-column:span 12}
  .tegel{min-height:260px}
  .duo,.contact-grid{grid-template-columns:1fr}
  .duo.omgekeerd .duo-foto{order:0}
  .breed img{aspect-ratio:4/3}
  .kopfoto img{aspect-ratio:4/3}
  .menu-grid{grid-template-columns:1fr}
  .lijst{columns:1}
  .site-footer .wrap{grid-template-columns:1fr}
  .site-footer{padding-bottom:150px}
  .belknop{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:31;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .demo{bottom:78px;left:12px;right:12px;max-width:none;font-size:12px}
  .knoppen .btn{width:100%}
}
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:0}
  .belknop{left:auto;width:auto;min-height:46px}
  .demo{bottom:12px;right:auto;max-width:50%}
}

/* ---------- Beweging (UI/UX Pro Max, tier Standard): binnenkomst, onthullen, parallax, lopende band ----------
   Alleen met JS aan (html.anim); zonder JS of met 'minder beweging' staat alles meteen stil en leesbaar. */
:root{--uit:cubic-bezier(.16,1,.3,1);--kort:.35s;--mid:.7s;--lang:1.1s}
html.anim .hero h1 .w,html.anim .paginakop h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
html.anim .hero h1 .w>span,html.anim .paginakop h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform var(--lang) var(--uit)}
html.anim .is-in h1 .w>span{transform:none}
html.anim .hero-tekst>*:not(h1),html.anim .paginakop .wrap>*:not(h1){opacity:0;transform:translateY(16px);transition:opacity var(--mid) var(--uit),transform var(--mid) var(--uit)}
html.anim .is-in .hero-tekst>*:not(h1),html.anim .is-in.paginakop .wrap>*:not(h1){opacity:1;transform:none}
html.anim .hero-foto{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--uit) .15s}
html.anim .hero-foto img{transform:scale(1.12);transition:transform 1.6s var(--uit) .15s}
html.anim .is-in .hero-foto{clip-path:inset(0 0 0 0)}
html.anim .is-in .hero-foto img{transform:scale(1)}
.hero-foto img{will-change:transform}
/* Foto's die met een gordijn openschuiven */
html.anim .onthul{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--uit)}
html.anim .onthul img{transform:scale(1.1);transition:transform 1.4s var(--uit)}
html.anim .onthul.zichtbaar{clip-path:inset(0 0 0 0)}
html.anim .onthul.zichtbaar img{transform:scale(1)}
.reveal{transition-timing-function:var(--uit);transition-duration:var(--mid)}
/* Tegels: beeld zoomt, tekst schuift iets op, pijl verschijnt */
.tegel>div{transition:transform .45s var(--uit)}
.tegel:hover img,.tegel:focus-visible img{transform:scale(1.07)}
.tegel:hover>div,.tegel:focus-visible>div{transform:translateY(-6px)}
.tegel h3::after{content:"→";display:inline-block;margin-left:.4em;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .45s var(--uit)}
.tegel:hover h3::after,.tegel:focus-visible h3::after{opacity:1;transform:none}
/* Knoppen: duidelijke druk */
.btn:active{transform:scale(.97)}
/* Lopende band met wat er op het bord staat */
.band{background:var(--inkt);color:var(--geel);overflow:hidden;padding:18px 0;border-block:1px solid #000}
.band__rij{display:flex;width:max-content;gap:0;animation:band 38s linear infinite}
.band:hover .band__rij{animation-play-state:paused}
.band span{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.01em;white-space:nowrap;padding-right:1.1em}
.band span::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:1.1em;border-radius:50%;background:var(--rood);vertical-align:middle}
@keyframes band{to{transform:translateX(-50%)}}
/* Header verstopt zich bij naar beneden scrollen en komt terug bij omhoog */
.site-header{transition:border-color .2s,transform .4s var(--uit)}
.site-header.weg{transform:translateY(-100%)}
/* Belknop op mobiel springt pas in beeld na de hero */
@media (max-width:860px){html.anim .belknop{transform:translateY(140%);transition:transform .5s var(--uit)}html.anim .belknop.toon{transform:none}}
/* Tellers */
.teller{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  html.anim .hero h1 .w>span,html.anim .paginakop h1 .w>span,html.anim .hero-tekst>*,html.anim .paginakop .wrap>*,html.anim .hero-foto,html.anim .hero-foto img,html.anim .onthul,html.anim .onthul img{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
  .band__rij{animation:none}.site-header.weg{transform:none}html.anim .belknop{transform:none}
}

/* ---------- Opbouw high-end frietzaak (v6.2) ---------- */
:root{--nacht:#141210;--hout:#2a211b}
.logo img{width:52px;height:auto}
.woordmerk{font-family:"Archivo",sans-serif!important;font-weight:800!important;font-size:27px!important;letter-spacing:.01em!important;color:var(--rood);text-shadow:2px 2px 0 #7a1418;line-height:1}
.woordmerk small{text-shadow:none;color:var(--grijs);letter-spacing:.02em}
.ft-logo .woordmerk{font-size:30px!important}
.kicker{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rood);margin:0 0 14px}
.btn.geel{background:var(--geel);color:var(--inkt)}
.btn.geel:hover{background:#fff;color:var(--inkt)}
.btn.rand{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn.rand:hover{background:#fff;color:var(--inkt)}
/* Hero: volle breedte, donker */
.hero2{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;padding:0;overflow:hidden;background:var(--nacht);color:#fff}
.hero2-foto{position:absolute;inset:-6% 0 0 0;width:100%;height:106%;object-fit:cover;object-position:65% 50%}
.hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.88) 0%,rgba(14,12,10,.55) 45%,rgba(14,12,10,.05) 80%),linear-gradient(0deg,rgba(14,12,10,.7),transparent 45%)}
.hero2-tekst{position:relative;z-index:1;padding:clamp(120px,16vh,180px) 0 clamp(56px,8vh,96px)}
.hero2 h1{color:#fff;font-size:clamp(44px,7vw,92px);max-width:11ch;line-height:.98}
.hero2 .lead{color:#e9e4dc;max-width:40ch}
.hero2 .kicker{color:var(--geel)}
.hero2 .score{color:#d8d2c8}.hero2 .score a{color:#fff}
.sterren-klein{color:var(--geel);letter-spacing:2px;margin-right:6px}
.hero2 .open-chip{color:#fff}
/* Klassiekers */
.sectiekop{max-width:640px;margin-bottom:40px}
.kaarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kaart{display:block;text-decoration:none;color:var(--inkt)}
.kaart figure{margin:0 0 16px;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--nacht)}
.kaart img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--uit,ease)}
.kaart:hover img,.kaart:focus-visible img{transform:scale(1.06)}
.kaart h3{font-size:26px;margin:0 0 6px}
.kaart h3::after{content:" →";color:var(--rood);opacity:0;transition:opacity .3s}
.kaart:hover h3::after{opacity:1}
.kaart p{margin:0;color:var(--grijs);font-size:17px}
/* Van het bord */
.bord{background:var(--nacht);color:#efe9df}
.bord h2,.bord h3{color:#fff}
.bord-kop{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.bord-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.bord-grid h3{font-size:22px;padding-bottom:12px;border-bottom:2px solid var(--geel);margin-bottom:14px}
.bord-grid ul{list-style:none;margin:0;padding:0}
.bord-grid li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:18px}
.bord-noot{margin:40px 0 0;color:#b9b1a5}.bord-noot a{color:var(--geel)}
/* Afhalen of blijven */
.twee-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.blok{position:relative;display:block;min-height:520px;border-radius:20px;overflow:hidden;color:#fff;text-decoration:none;background:var(--nacht)}
.blok figure{position:absolute;inset:0;margin:0}
.blok img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--uit,ease)}
.blok:hover img{transform:scale(1.05)}
.blok::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.9),rgba(14,12,10,.1) 60%)}
.blok>div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:32px}
.blok h3{color:#fff;font-size:clamp(26px,2.6vw,34px);margin-bottom:8px}
.blok p{color:#e6e0d6;margin:0 0 14px;max-width:38ch}
.blok .kicker{color:var(--geel)}
.blok .tekstlink{color:#fff}
/* Verhaal */
.verhaal{background-color:var(--hout);color:#efe9df;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 90px)}
.verhaal h2{color:#fff}.verhaal a{color:var(--geel)}
.verhaal-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.verhaal-mann img{width:min(420px,100%);margin:0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
html.anim .verhaal-mann img{animation:zwaai 4.5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes zwaai{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-6px)}}
.vinden p{margin:16px 0 0}
@media (max-width:980px){
  .kaarten{grid-template-columns:1fr 1fr}
  .bord-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hero2{min-height:88vh}
  .hero2::after{background:linear-gradient(0deg,rgba(14,12,10,.92) 0%,rgba(14,12,10,.6) 55%,rgba(14,12,10,.25))}
  .twee-grid,.verhaal-grid{grid-template-columns:1fr}
  .blok{min-height:420px}
  .woordmerk{font-size:22px!important}.woordmerk small{display:none}
  .logo img{width:42px}
}
@media (max-width:480px){.kaarten,.bord-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html.anim .verhaal-mann img{animation:none}}
html.anim .hero2 h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
html.anim .hero2 h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform var(--lang) var(--uit)}
html.anim .hero2-tekst>*:not(h1){opacity:0;transform:translateY(16px);transition:opacity var(--mid) var(--uit),transform var(--mid) var(--uit)}
html.anim .is-in .hero2-tekst>*:not(h1){opacity:1;transform:none}
html.anim .hero2-foto{transform:scale(1.12);transition:transform 1.8s var(--uit)}
html.anim .hero2.is-in .hero2-foto{transform:scale(1)}
@media (prefers-reduced-motion:reduce){html.anim .hero2 h1 .w>span,html.anim .hero2-tekst>*,html.anim .hero2-foto{transform:none!important;opacity:1!important;transition:none!important}}
.menu-bord .menu-grid h2{color:#fff;border-bottom-color:var(--geel);scroll-margin-top:100px}
.menu-bord .menu-grid li{border-bottom:1px dashed rgba(255,255,255,.14);color:#efe9df}
.menu-bord .menu-grid .notitie,.menu-bord .menu-grid li small{color:#b9b1a5}
.menu-bord .menu-grid a{color:var(--geel)}
@media (max-width:860px){.menu-grid{grid-template-columns:1fr 1fr!important}}
@media (max-width:520px){.menu-grid{grid-template-columns:1fr!important}}
html.anim .hero2.is-in h1 .w>span{transform:none}
/* Prijzen op de kaart */
.menu-grid li,.bord-grid li{display:flex;align-items:baseline;gap:10px}
.menu-grid .item,.bord-grid .item{flex:1}
.menu-grid .prijs,.bord-grid .prijs{font-variant-numeric:tabular-nums;font-weight:600;color:var(--geel);min-width:3.2em;text-align:right}
.menu-grid .kg .prijs{min-width:3.6em}
.maten{display:flex;justify-content:flex-end;gap:10px;margin:-6px 0 2px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#b9b1a5}
.maten span{min-width:3.6em;text-align:right}

/* bestellen via Uber Eats */
.nav .btn.geel{color:var(--inkt)}
.nav .btn.geel:hover{background:var(--inkt);color:#fff}
.btn.geel:hover{background:var(--inkt);color:#fff}
.bestelknop{display:none}
.slot-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.slot .btn.licht{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.slot .btn.licht:hover{background:#fff;color:var(--inkt)}
.bestelstrook{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;padding-top:18px;padding-bottom:18px;background:var(--geel);color:var(--inkt);border-radius:14px}
.bestelstrook b{display:block;font-size:1.15em}
.bestelstrook span{display:block;font-size:.95em}
.bestelstrook .btn.geel{background:var(--inkt);color:#fff}
.bestelstrook .btn.geel:hover{background:#fff;color:var(--inkt)}
@media (max-width:860px){
  .bestelknop{display:flex;position:fixed;left:12px;right:calc(50% + 5px);bottom:12px;z-index:31;box-shadow:0 6px 20px rgba(0,0,0,.25);padding-left:.5em;padding-right:.5em}
  .belknop{left:calc(50% + 5px);padding-left:.5em;padding-right:.5em}
  .slot-knoppen,.slot-knoppen .btn{width:100%}
  .bestelstrook .btn{width:100%}
  .nav .btn.geel{display:inline-flex}
  html.anim .bestelknop{transform:translateY(140%);transition:transform .5s var(--uit)}
  html.anim .bestelknop.toon{transform:none}
}
@media (max-height:500px) and (orientation:landscape){
  .bestelknop{right:auto;width:auto;min-height:46px}
  .belknop{left:auto}
}
@media (prefers-reduced-motion:reduce){html.anim .bestelknop{transform:none}}

.knoppen-kop{display:flex;flex-wrap:wrap;gap:10px}
.bestelstrook{padding:18px 22px;margin:0 0 28px}
.knoppen-kop .btn{flex:0 1 auto}
@media (max-width:860px){.knoppen-kop .btn{width:100%}}

/* nooit breder dan het scherm, ook niet tijdens het scrollen */
html{overflow-x:clip}
.breed{overflow:hidden}