/* Deliverkip — concept kip.tdgdigital.com (zusje van del.tdgdigital.com) (TDG Digital, 2026-09-28) */
:root{
  --roet:#120c0a; --kool:#1d1411; --kool2:#2a1c17;
  --rood:#ee8031; --rood-hel:#ff9447; --rood-inkt:#a4470d; --op-rood:#140d0a; --ember:#ff7a1a; --amber:#f7b24a;
  --room:#fff4e6; --room-2:#e9dccb; --papier:#f3ead8; --inkt:#1b1512; --kraft:#c9a36b;
  --groen:#1faa55;
  --heat:0;
  --kop-h:76px;
  --disp:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --tekst:"Barlow",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"Courier Prime","Courier New",monospace;
  --krant:"Libre Caslon Text",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--roet);color:var(--room);font:400 17px/1.6 var(--tekst);overflow-x:hidden}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button,[role="button"]{cursor:pointer}
h1,h2,h3{margin:0;font-weight:800}
p{margin:0 0 1em}
[hidden]{display:none!important}
main{overflow-x:clip}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--room);color:var(--roet);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 32px)}}
.kicker{font:700 14px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:3px;background:currentColor;border-radius:2px;transform:skewX(-20deg)}
.titel{font:italic 900 clamp(46px,7vw,104px)/.88 var(--disp);text-transform:uppercase;letter-spacing:-.005em;hyphens:manual}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:2px solid transparent;font:700 16px/1 var(--tekst);text-decoration:none;letter-spacing:.01em;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.knop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.knop:hover svg{transform:translateX(4px)}
.knop--rood{background:var(--rood);color:var(--op-rood);box-shadow:0 10px 30px -10px rgba(238,128,49,.6)}
.knop--rood:hover{background:var(--rood-hel);transform:translateY(-2px)}
.knop--lijn{border-color:rgba(255,244,230,.45);color:var(--room)}
.knop--lijn:hover{border-color:var(--room);background:rgba(255,244,230,.08)}
.knop--lijn-donker{border-color:rgba(27,21,18,.35);color:var(--inkt)}
.knop--lijn-donker:hover{border-color:var(--inkt)}
.knop--groen{background:var(--groen);color:#fff}
.knop--groen:hover{background:#17924a}
.knop--groen svg{fill:none}

/* ---------- kop ---------- */
.kop{position:fixed;inset:0 0 auto;z-index:40;height:var(--kop-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(16px,3vw,40px);transition:background .35s,box-shadow .35s}
.kop.is-vast{background:rgba(18,12,10,.94);box-shadow:0 1px 0 rgba(255,244,230,.08)}
.kop-logo img{height:62px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));width:auto;transition:transform .3s var(--ease)}
.kop-logo:hover img{transform:rotate(-3deg) scale(1.04)}
.kop-nav{display:flex;gap:clamp(14px,2vw,30px)}
.kop-nav a{font:700 15px/1 var(--tekst);text-decoration:none;letter-spacing:.04em;text-transform:uppercase;position:relative;padding:8px 0}
.kop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rood-hel);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.kop-nav a:hover::after,.kop-nav a.is-hier::after{transform:scaleX(1)}
.kop-rechts{display:flex;align-items:center;gap:12px}
.status{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:99px;background:rgba(255,244,230,.08);font:600 13px/1 var(--tekst);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:#9a8b7f}
.status.is-open i{background:#35d06f;box-shadow:0 0 0 0 rgba(53,208,111,.7);animation:puls 2s infinite}
.status.is-straks i{background:var(--amber)}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(53,208,111,0)}100%{box-shadow:0 0 0 0 rgba(53,208,111,0)}}
.bon-knop{position:relative;width:46px;height:46px;border-radius:50%;border:0;background:var(--rood);display:grid;place-items:center;transition:transform .25s var(--ease)}
.bon-knop svg{width:22px;height:22px;fill:none;stroke:var(--op-rood);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.bon-knop:hover{transform:scale(1.06)}
.bon-knop.is-tik{animation:tik .5s var(--ease)}
@keyframes tik{30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(.95)}}
.bon-aantal{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--room);color:var(--roet);font:700 12px/20px var(--tekst);text-align:center}
.bon-aantal:empty,.bon-aantal[data-nul]{display:none}
.menu-knop{display:none;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,244,230,.1);flex-direction:column;align-items:center;justify-content:center;gap:6px}
.menu-knop span{width:18px;height:2px;background:var(--room);border-radius:2px;transition:transform .3s var(--ease)}
.menu-knop[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-knop[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.lade-menu{position:fixed;inset:0;z-index:35;background:var(--roet);padding:calc(var(--kop-h) + 24px) 24px 32px;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto}
.lade-menu nav{display:flex;flex-direction:column}
.lade-menu nav a{font:italic 900 clamp(38px,11vw,60px)/1.1 var(--disp);text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,244,230,.1);padding:6px 0;opacity:0;transform:translateY(16px);animation:in .5s var(--ease) forwards}
.lade-menu nav a:nth-child(2){animation-delay:.04s}.lade-menu nav a:nth-child(3){animation-delay:.08s}.lade-menu nav a:nth-child(4){animation-delay:.12s}.lade-menu nav a:nth-child(5){animation-delay:.16s}.lade-menu nav a:nth-child(6){animation-delay:.2s}
@keyframes in{to{opacity:1;transform:none}}
.lade-bel{display:flex;justify-content:center;align-items:center;min-height:56px;margin-top:24px;border-radius:99px;background:var(--rood);color:var(--op-rood);font-weight:700;text-decoration:none}
@media (max-width:1060px){.kop-nav{display:none}.menu-knop{display:flex}}
@media (max-width:560px){:root{--kop-h:66px}.kop-logo img{height:48px}.kop .status{display:none}.hero-boven{font-size:12px;letter-spacing:.14em;gap:10px}.hero-boven span+span::before{margin-right:10px}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;min-height:max(100svh,640px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-beeld{position:absolute;inset:0;z-index:-2;background:#0b0706 url(/media/hero-poster.jpg) 70% 50%/cover}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity 1.2s}
.hero-video.is-klaar{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,8,7,.92) 0%,rgba(12,8,7,.72) 38%,rgba(12,8,7,.1) 70%),linear-gradient(0deg,rgba(12,8,7,.95) 0%,rgba(12,8,7,0) 45%),linear-gradient(180deg,rgba(12,8,7,.6),rgba(12,8,7,0) 22%)}
.vonken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .vonken{z-index:-1}
.hero-inhoud{width:min(1240px,100% - 48px);margin:0 auto;padding:calc(var(--kop-h) + 40px) 0 clamp(64px,10vh,110px)}
.hero-boven{display:flex;gap:18px;flex-wrap:wrap;font:700 14px/1 var(--tekst);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:22px}
.hero-boven span+span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:0 18px 2px 0;vertical-align:middle}
.hero-titel{font:italic 900 clamp(68px,11.5vw,196px)/.84 var(--disp);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 28px;hyphens:manual}
.hero-titel .r{display:block;overflow:hidden;padding:0 .08em .04em 0;margin-bottom:-.04em}
.hero-titel .r>span{display:inline-block;transform:translateY(105%);animation:omhoog 1s var(--ease) forwards}
.hero-titel .r:nth-child(2)>span{animation-delay:.12s}
.hero-titel .r:nth-child(3)>span{animation-delay:.24s}
.hero-titel .rood{color:var(--rood-hel);text-shadow:0 0 60px rgba(238,128,49,.35)}
@keyframes omhoog{to{transform:none}}
.hero-lead{max-width:520px;font-size:clamp(17px,1.4vw,20px);color:var(--room-2);opacity:0;animation:in .9s .5s var(--ease) forwards;transform:translateY(16px)}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.hero .hero-knoppen{opacity:0;animation:in .9s .65s var(--ease) forwards;transform:translateY(16px)}
.hero-status{margin:22px 0 0;font:600 14px/1.4 var(--tekst);color:var(--room-2);opacity:0;animation:in .9s .8s var(--ease) forwards}
.hero-status b{color:#fff}
.hero-scroll{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(28px,6vh,60px);width:30px;height:50px;border:2px solid rgba(255,244,230,.5);border-radius:16px}
.hero-scroll span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--room);animation:wiel 1.8s infinite}
@keyframes wiel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:760px){
  .hero::after{background:linear-gradient(0deg,rgba(12,8,7,.97) 0%,rgba(12,8,7,.75) 45%,rgba(12,8,7,.15) 75%),linear-gradient(180deg,rgba(12,8,7,.7),rgba(12,8,7,0) 25%)}
  .hero-scroll{display:none}
  .hero-knoppen .knop{flex:1 1 auto}
}

/* ---------- band ---------- */
.band{position:relative;z-index:2;background:var(--rood);color:var(--op-rood);transform:rotate(-2deg);margin:-26px -20px 0;padding:14px 0;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.band-rij{display:flex;align-items:center;gap:28px;width:max-content;animation:band 32s linear infinite}
.band span{font:italic 900 clamp(26px,3vw,40px)/1 var(--disp);text-transform:uppercase;white-space:nowrap}
.band i{width:14px;height:14px;background:var(--roet);transform:rotate(45deg);flex:none}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- kies je vuur ---------- */
.vuur{position:relative;height:calc(100vh + 4 * 85vh);background:var(--roet)}
.vuur-plak{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;
  background:radial-gradient(ellipse 70% 80% at 72% 55%,color-mix(in srgb,var(--amber) calc((1 - var(--heat)) * 32%),color-mix(in srgb,#d4141e calc(var(--heat) * 55%),transparent)) 0%,transparent 70%),var(--roet);transition:background .6s}
.vuur-grid{position:relative;z-index:1;width:min(1240px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center;padding-top:var(--kop-h)}
.vuur-naam{font:italic 900 clamp(64px,10vw,160px)/.86 var(--disp);text-transform:uppercase;margin:0 0 18px;min-height:.86em;hyphens:manual}
.vuur-naam span{display:inline-block}
.vuur-naam span.is-wissel{animation:naam .6s var(--ease)}
@keyframes naam{0%{opacity:0;transform:translateY(40%) skewX(-8deg)}100%{opacity:1;transform:none}}
.vuur-oms{max-width:440px;font-size:clamp(17px,1.35vw,20px);color:var(--room-2);min-height:3.2em}
.meter{display:flex;align-items:center;gap:16px;margin:22px 0 26px}
.meter-schaal{position:relative;flex:1;max-width:260px;height:10px;border-radius:6px;background:rgba(255,244,230,.12);overflow:hidden}
.meter-schaal i{position:absolute;inset:0 auto 0 0;width:10%;border-radius:6px;background:linear-gradient(90deg,var(--amber),var(--ember),var(--rood-hel),#8e0a14);background-size:260px 100%;transition:width .6s var(--ease)}
.meter-pepers{display:flex;gap:4px}
.meter-pepers svg{width:22px;height:22px;fill:rgba(255,244,230,.15);transition:fill .4s,transform .4s var(--ease)}
.meter-pepers svg.is-aan{fill:var(--rood-hel);transform:rotate(-12deg) scale(1.1)}
.vuur-keuzes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.vuur-keuzes button{border:1.5px solid rgba(255,244,230,.25);background:none;border-radius:99px;padding:9px 16px;font:700 14px/1 var(--tekst);letter-spacing:.04em;text-transform:uppercase;transition:all .25s}
.vuur-keuzes button:hover{border-color:var(--room)}
.vuur-keuzes button[aria-selected="true"]{background:var(--room);color:var(--roet);border-color:var(--room)}
.vuur-noot{font-size:14px;color:rgba(255,244,230,.6);margin-bottom:22px}
.vuur-bord{position:relative;aspect-ratio:1;max-height:calc(100svh - var(--kop-h) - 60px);justify-self:center;width:100%}
.vuur-gloed{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ember) calc(50% + var(--heat)*50%),#d4141e) 0%,transparent 65%);filter:blur(40px);opacity:calc(.35 + var(--heat)*.45);transition:opacity .6s}
.vuur-fotos{position:absolute;inset:0;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.vuur-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08) rotate(-2deg);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.vuur-fotos img.is-aan{opacity:1;transform:none}
.vuur-teller{position:absolute;right:-6px;bottom:-14px;font:italic 900 22px/1 var(--disp);background:var(--roet);padding:8px 14px;border-radius:99px;border:1.5px solid rgba(255,244,230,.2)}
.vuur-teller b{font-size:30px;color:var(--rood-hel)}
@media (max-width:860px){
  .vuur{height:calc(100svh + 4 * 80svh)}
  .vuur-grid{grid-template-columns:1fr;gap:18px;align-content:center;padding-top:calc(var(--kop-h) + 4px)}
  .vuur-bord{order:-1;width:min(100%,46svh);max-height:none}
  .vuur-naam{font-size:clamp(52px,15vw,80px);margin-bottom:8px}
  .vuur-oms{font-size:16px;margin-bottom:8px;min-height:0}
  .meter{margin:10px 0 12px}
  .vuur-noot{display:none}
  .vuur-keuzes{gap:6px;margin-bottom:12px}
  .vuur-keuzes button{padding:8px 11px;font-size:12px}
  .vuur-teller{right:4px;bottom:-10px}
}
@media (max-width:860px) and (max-height:700px){.vuur-bord{width:min(100%,36svh)}.vuur-oms{display:none}}

/* ---------- menu ---------- */
.menu{position:relative;background:var(--papier);color:var(--inkt);padding:clamp(120px,14vw,190px) 0 clamp(70px,9vw,120px)}
.druip{position:absolute;top:-1px;left:0;width:100%;height:clamp(60px,8vw,120px);fill:var(--roet);transform-origin:top;transform:scaleY(.25);transition:transform 1.6s var(--ease)}
.druip.is-zicht{transform:none}
.menu .kicker{color:var(--rood-inkt)}
.menu-kop{display:grid;grid-template-columns:auto minmax(0,440px);justify-content:space-between;align-items:end;gap:24px 60px;margin-bottom:34px}
.menu-intro{margin:0;color:#5a4a40}
.actie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px 14px 18px;border-radius:16px;background:var(--inkt);color:var(--room);margin-bottom:26px;font-weight:500}
.actie b{background:var(--rood);color:var(--op-rood);border-radius:6px;padding:3px 8px;font:italic 800 15px/1.2 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.actie span{color:rgba(255,244,230,.6)}
.actie-knop{margin-left:auto;border:0;border-radius:99px;background:var(--room);color:var(--inkt);padding:9px 16px;font-weight:700;font-size:14px}
.actie-knop:hover{background:#fff}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -24px 26px;padding:4px 24px;position:sticky;top:var(--kop-h);z-index:5;background:var(--papier)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(27,21,18,.18);background:transparent;border-radius:99px;padding:11px 18px;font:italic 800 19px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;transition:all .25s}
.tab span{font:700 12px/1 var(--tekst);opacity:.55}
.tab:hover{border-color:var(--inkt)}
.tab[aria-selected="true"]{background:var(--inkt);color:var(--room);border-color:var(--inkt)}
.menu-paneel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.menu-paneel.is-in .gerecht{animation:kaart .6s var(--ease) both}
.menu-paneel.is-in .gerecht:nth-child(2){animation-delay:.04s}.menu-paneel.is-in .gerecht:nth-child(3){animation-delay:.08s}.menu-paneel.is-in .gerecht:nth-child(4){animation-delay:.12s}.menu-paneel.is-in .gerecht:nth-child(5){animation-delay:.16s}.menu-paneel.is-in .gerecht:nth-child(6){animation-delay:.2s}.menu-paneel.is-in .gerecht:nth-child(n+7){animation-delay:.24s}
@keyframes kaart{from{opacity:0;transform:translateY(24px)}}
.gerecht{display:flex;flex-direction:column;background:#fffaf2;border-radius:22px;overflow:hidden;box-shadow:0 1px 0 rgba(27,21,18,.06),0 12px 30px -18px rgba(27,21,18,.35);transition:transform .35s var(--ease),box-shadow .35s}
.gerecht:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(27,21,18,.06),0 24px 44px -20px rgba(27,21,18,.45)}
.gerecht-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#efe3d0}
.gerecht-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gerecht:hover .gerecht-foto img{transform:scale(1.06)}
.gerecht-leeg{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#efe3d0 0 14px,#eadcc6 14px 28px)}
.gerecht-label{position:absolute;left:12px;top:12px;background:var(--rood);color:var(--op-rood);border-radius:6px;padding:4px 9px;font:italic 800 14px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em}
.gerecht-tekst{padding:16px 18px 6px;flex:1}
.gerecht h3{font:italic 800 23px/1.02 var(--disp);text-transform:uppercase;margin-bottom:7px}
.gerecht p{font-size:14.5px;line-height:1.45;color:#6a584c;margin:0}
.gerecht-voet{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 14px 18px}
.prijs{font:italic 800 24px/1 var(--disp)}
.prijs s{font-size:16px;opacity:.45;font-weight:600}
.plus{display:inline-flex;align-items:center;gap:0;height:44px;min-width:44px;padding:0 11px;border-radius:99px;border:0;background:var(--rood);color:var(--op-rood);font:700 14px/1 var(--tekst);transition:background .25s,gap .3s var(--ease),padding .3s var(--ease)}
.plus span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--ease)}
.plus svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;flex:none}
.gerecht:hover .plus,.plus:focus-visible{gap:6px;padding:0 14px 0 16px}
.gerecht:hover .plus span,.plus:focus-visible span{max-width:120px}
.plus:hover{background:var(--rood-hel)}
.gerecht--kip .plus{background:var(--inkt)}
.gerecht--kip .plus{color:var(--room)}
.gerecht--kip .plus:hover{background:var(--rood);color:var(--op-rood)}
@media (hover:none){.plus span{max-width:120px}.plus{gap:6px;padding:0 14px 0 16px}}
.menu-noot{margin:34px 0 0;font-size:14px;color:#6a584c}
@media (max-width:800px){.menu-kop{grid-template-columns:1fr}}
@media (max-width:600px){.tabs{margin:0 -16px 20px;padding:4px 16px}.menu-paneel{grid-template-columns:1fr;gap:14px}
  .gerecht{flex-direction:row;border-radius:18px}.gerecht-foto{width:112px;flex:none;aspect-ratio:auto}
  .gerecht-tekst{padding:12px 12px 4px}.gerecht h3{font-size:19px}.gerecht p{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .gerecht>.gerecht-voet{padding:0}
  .gerecht{display:grid;grid-template-columns:112px 1fr;grid-template-rows:1fr auto}
  .gerecht-foto{grid-row:1/3;height:100%}
  .gerecht-voet{padding:4px 10px 10px 12px!important}
  .prijs{font-size:20px}
  .actie-knop{margin-left:0}}

/* ---------- bezorgen ---------- */
.bezorgen{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--kool)}
.bezorg-beeld{position:relative;overflow:hidden}
.bezorg-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.bezorg-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--kool))}
.bezorg-inhoud{width:auto;margin:0;padding:clamp(80px,10vw,140px) clamp(24px,6vw,90px)}
.stappen{list-style:none;padding:0;margin:40px 0;display:grid;gap:26px;counter-reset:s}
.stappen li{display:grid;grid-template-columns:70px 1fr;column-gap:14px}
.stap-nr{grid-row:1/3;font:italic 900 56px/.9 var(--disp);color:transparent;-webkit-text-stroke:1.5px var(--rood-hel)}
.stappen h3{font:italic 800 28px/1 var(--disp);text-transform:uppercase;margin:4px 0 6px}
.stappen p{margin:0;color:var(--room-2)}
.feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,244,230,.12);border-radius:18px;overflow:hidden;margin:0 0 22px}
.feiten div{background:var(--kool);padding:18px 20px}
.feiten dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,244,230,.6)}
.feiten dd{margin:4px 0 0;font:italic 800 34px/1 var(--disp)}
.betalen{color:var(--room-2)}
.betalen b{color:var(--room)}
@media (max-width:900px){.bezorgen{grid-template-columns:1fr}.bezorg-beeld{height:62vw;min-height:280px}.bezorg-beeld::after{background:linear-gradient(0deg,var(--kool),transparent 50%)}.bezorg-inhoud{padding:10px 24px 80px}}
@media (max-width:600px){.bezorg-inhoud{padding:0 16px 70px}.feiten dd{font-size:28px}.stappen li{grid-template-columns:54px 1fr}.stap-nr{font-size:44px}}

/* ---------- courant ---------- */
.courant{background:var(--roet);padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.krant{--papier-k:#efe6d2;position:relative;background:var(--papier-k);color:#1c1714;padding:clamp(20px,4vw,56px);box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.2);transform:rotate(-1.6deg) translateY(40px);transition:transform 1.4s var(--ease);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),linear-gradient(135deg,rgba(255,255,255,.35),rgba(0,0,0,.04))}
.krant.is-zicht{transform:rotate(-.4deg)}
.krant-kop{text-align:center;border-bottom:3px double #1c1714;padding-bottom:12px;margin-bottom:26px}
.krant-meta{display:flex;justify-content:space-between;gap:12px;font:italic 400 13px/1.3 var(--krant);border-bottom:1px solid #1c1714;padding-bottom:8px}
.krant-meta--onder{border:0;border-top:1px solid #1c1714;padding:8px 0 0;margin-top:6px}
.krant-naam{font:700 clamp(46px,9vw,124px)/1 "UnifrakturCook",var(--krant);letter-spacing:.01em;margin:10px 0 4px}
.krant-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.62fr);gap:0 32px;font-family:var(--krant)}
.krant-body>*+*{border-left:1px solid rgba(28,23,20,.4);padding-left:32px}
.krant-rubriek{font:700 12px/1 var(--tekst);letter-spacing:.2em;text-transform:uppercase;color:var(--rood-inkt);margin-bottom:10px}
.krant-hoofd h3{font:700 clamp(30px,3.4vw,50px)/1.04 var(--krant);letter-spacing:-.01em;margin-bottom:16px}
.krant-intro{font:italic 400 19px/1.5 var(--krant)}
.krant-kolommen{columns:2 200px;column-gap:26px;column-rule:1px solid rgba(28,23,20,.25);font-size:15.5px;line-height:1.62;hyphens:auto;text-align:justify}
.krant-kolommen p:first-child::first-letter{float:left;font:700 58px/.8 var(--krant);margin:6px 8px 0 0;color:var(--rood-inkt)}
.krant-foto{margin:0}
.krant-foto img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.15) sepia(.15);transition:filter 1.6s ease}
.krant.is-zicht .krant-foto img{filter:none}
.krant-foto figcaption{font:italic 400 13px/1.4 var(--krant);margin-top:8px}
.krant-zij .krant-cijfer{font:italic 900 clamp(64px,7vw,88px)/.9 var(--disp);color:var(--rood-inkt);margin:0 0 8px}
.krant-cijfer b{display:block}
.krant-zij p{font-size:15px;line-height:1.5}
.krant-zij hr{border:0;border-top:1px solid rgba(28,23,20,.4);margin:18px 0}
.krant-advert{border:3px solid #1c1714;padding:16px;text-align:center;transform:rotate(1deg)}
.krant-advert p{font:italic 400 20px/1.2 var(--krant);margin-bottom:10px}
.krant-advert b{font:italic 900 30px/1 var(--disp);text-transform:uppercase;display:block;margin-top:4px}
.krant-advert a{font:700 12px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase}
.krant-strook{grid-column:1/-1;border-left:0!important;padding-left:0!important;border-top:3px double #1c1714;margin-top:28px;padding-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1000px){.krant-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.krant-zij{grid-column:1/-1;border-left:0!important;padding-left:0!important;border-top:1px solid rgba(28,23,20,.4);margin-top:24px;padding-top:20px;display:grid;grid-template-columns:auto 1fr auto;gap:0 24px;align-items:center}.krant-zij hr{display:none}.krant-zij>.krant-rubriek:nth-of-type(2){display:none}}
@media (max-width:700px){.krant{transform:rotate(-1deg) translateY(30px)}.krant.is-zicht{transform:none}.krant-body{grid-template-columns:1fr}.krant-body>*+*{border-left:0;padding-left:0}.krant-foto--groot{margin-top:18px}.krant-zij{grid-template-columns:1fr;gap:0}.krant-strook{grid-template-columns:1fr 1fr;gap:16px}.krant-meta{font-size:11px}.krant-meta span:nth-child(3){display:none}.krant-kolommen{text-align:left}}

/* ---------- feest ---------- */
.feest{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.feest-beeld{position:absolute;inset:-12% 0;z-index:-2}
.feest-beeld img{width:100%;height:100%;object-fit:cover}
.feest::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,8,7,.94) 0%,rgba(12,8,7,.75) 45%,rgba(12,8,7,.2) 100%)}
.feest-inhoud{padding:110px 0}
.feest-inhoud>p:not(.kicker){max-width:480px;color:var(--room-2);margin:24px 0 30px;font-size:18px}
@media (max-width:700px){.feest::after{background:rgba(12,8,7,.78)}}

/* ---------- vinden ---------- */
.vinden{background:var(--roet);padding:clamp(80px,10vw,130px) 0}
.vinden-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,6vw,90px)}
address{font-style:normal;font-size:20px;line-height:1.5;margin:24px 0}
address span{font-size:15px;color:var(--amber)}
.contact{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.contact a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:var(--kool);text-decoration:none;transition:background .25s,transform .25s var(--ease)}
.contact a:hover{background:var(--kool2);transform:translateX(4px)}
.contact b{font:italic 800 22px/1 var(--disp);text-transform:uppercase}
.tijden{width:100%;border-collapse:collapse;font-size:16px}
.tijden caption{text-align:left;font:700 13px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,244,230,.6);padding-bottom:10px}
.tijden th,.tijden td{padding:9px 0;border-bottom:1px solid rgba(255,244,230,.1);font-weight:500;text-align:left}
.tijden td{text-align:right}
.tijden tr.is-vandaag th,.tijden tr.is-vandaag td{color:#fff;font-weight:700}
.tijden tr.is-vandaag th::after{content:"vandaag";margin-left:10px;font:700 11px/1 var(--tekst);letter-spacing:.1em;text-transform:uppercase;background:var(--rood);color:var(--op-rood);padding:3px 7px;border-radius:5px;vertical-align:2px}
.kaart{display:flex;flex-direction:column;gap:16px}
.kaart iframe{width:100%;flex:1;min-height:380px;border:0;border-radius:24px;filter:grayscale(.35) contrast(1.05)}
.werken{border-radius:20px;padding:22px 24px;background:linear-gradient(135deg,#a4470d,#4f2206)}
.werken h3{font:italic 800 28px/1 var(--disp);text-transform:uppercase;margin-bottom:6px}
.werken p{color:rgba(255,255,255,.85);margin-bottom:10px}
.werken a{font-weight:700}
@media (max-width:860px){.vinden-grid{grid-template-columns:1fr}.kaart iframe{min-height:300px}}

/* ---------- voet ---------- */
.voet{background:#0b0706;padding:70px 0 30px;border-top:1px solid rgba(255,244,230,.06)}
.voet-grid{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.voet-logo{width:190px}
.voet-groot{font:italic 900 clamp(40px,6vw,76px)/.9 var(--disp);text-transform:uppercase;margin-bottom:14px}
.voet-groot span{color:var(--rood-hel);display:inline-block;animation:klop 1.4s infinite}
.voet-groot span svg{display:block;width:.78em;height:.72em;fill:currentColor}
@keyframes klop{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.18)}}
.voet-kol p{color:var(--room-2)}
.voet-links{display:flex;gap:20px;flex-wrap:wrap}
.voet-tdg{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,244,230,.08);font-size:13px;color:rgba(255,244,230,.5)}
@media (max-width:700px){.voet-grid{grid-template-columns:1fr}.voet-logo{width:170px}}

/* ---------- zwevende bon ---------- */
.zweef{position:fixed;z-index:30;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;min-height:58px;padding:0 10px 0 10px;border:0;border-radius:99px;background:var(--rood);color:var(--op-rood);font:700 16px/1 var(--tekst);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);animation:zweefIn .5s var(--ease)}
.zweef b{background:rgba(0,0,0,.14);padding:10px 14px;border-radius:99px}
.zweef-aantal{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:var(--op-rood);color:var(--rood)}
@keyframes zweefIn{from{transform:translate(-50%,120%)}}
@media (max-width:600px){.zweef{left:16px;right:16px;transform:none;justify-content:space-between;animation:none}}

/* ---------- panelen ---------- */
.paneel{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.paneel-achter{position:fixed;inset:0;background:rgba(8,5,4,.72);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.paneel-doos{position:relative;margin:auto;animation:opkomen .45s var(--ease)}
@keyframes opkomen{from{opacity:0;transform:translateY(30px) scale(.98)}}
.sluit{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(18,12,10,.75);display:grid;place-items:center}
.sluit svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.samen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);width:min(980px,100%);background:var(--papier);color:var(--inkt);border-radius:28px;overflow:hidden}
.samen-foto{background:#1a110e}
.samen-foto img{width:100%;height:100%;object-fit:cover;min-height:100%}
.samen-body{padding:30px 30px 26px}
.samen-body h2{font:italic 900 42px/.92 var(--disp);text-transform:uppercase;margin:0 40px 8px 0}
.samen-oms{color:#6a584c;font-size:15px}
fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
legend{font:700 13px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;padding:0}
legend small{font-weight:600;letter-spacing:0;text-transform:none;color:var(--rood-inkt);margin-left:6px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:99px;border:1.5px solid rgba(27,21,18,.2);background:#fffaf2;font:600 14px/1 var(--tekst);transition:all .2s;cursor:pointer;user-select:none}
.chips label:hover span{border-color:var(--inkt)}
.chips input:checked+span{background:var(--inkt);border-color:var(--inkt);color:var(--room)}
.chips input:disabled+span{opacity:.38;cursor:not-allowed}
.chips input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.chips--smaak input:checked+span{background:var(--rood);border-color:var(--rood);color:var(--op-rood)}
.samen-voet{display:flex;gap:12px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px dashed rgba(27,21,18,.25)}
.samen-voet .knop{flex:1}
.stepper{display:flex;align-items:center;border:1.5px solid rgba(27,21,18,.2);border-radius:99px;height:54px}
.stepper button{width:44px;height:100%;border:0;background:none;font-size:22px;font-weight:600}
.stepper output{min-width:24px;text-align:center;font-weight:700}
@media (max-width:760px){
  .paneel{align-items:flex-end;padding:0}
  .paneel-doos{margin:auto 0 0;width:100%}
  .samen{grid-template-columns:1fr;border-radius:26px 26px 0 0}
  .samen-foto{height:170px}
  .samen-body{padding:22px 18px calc(18px + env(safe-area-inset-bottom))}
  .samen-body h2{font-size:34px}
  .samen-voet{position:sticky;bottom:0;background:var(--papier);margin:14px -18px 0;padding:14px 18px}
}
/* bestelbon */
.paneel--rechts{justify-content:flex-end;align-items:stretch;padding:0}
.paneel--rechts .paneel-doos{margin:0;animation:schuif .5s var(--ease)}
@keyframes schuif{from{transform:translateX(100%)}}
.bon{width:min(460px,100vw);min-height:100%;background:#2a1d18;padding:20px 20px 40px;overflow-y:auto;max-height:100vh;max-height:100dvh}
.bon .sluit{top:24px;right:24px;background:rgba(0,0,0,.08)}
.bon .sluit svg{stroke:var(--inkt)}
.bon-papier{position:relative;background:#fffdf7;color:var(--inkt);font-family:var(--mono);padding:26px 24px 34px;border-radius:4px 4px 0 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.bon-papier::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(-45deg,transparent 8px,#fffdf7 0) 0 0/16px 12px,linear-gradient(45deg,transparent 8px,#fffdf7 0) 0 0/16px 12px;background-repeat:repeat-x}
.bon-kop{text-align:center;border-bottom:2px dashed rgba(27,21,18,.3);padding-bottom:14px;margin-bottom:14px}
.bon-kop img{width:96px;margin:0 auto 6px}
.bon-kop h2{font:700 20px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase}
.bon-kop p{margin:8px 0 0;font-size:13px;color:#6a584c}
.bon-wissel{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;background:#f1e8da;border-radius:12px;padding:4px}
.bon-wissel label{position:relative}
.bon-wissel input{position:absolute;opacity:0}
.bon-wissel span{display:flex;justify-content:center;align-items:center;min-height:40px;border-radius:9px;font:700 14px/1 var(--tekst);cursor:pointer;transition:background .2s}
.bon-wissel input:checked+span{background:var(--inkt);color:var(--room)}
.bon-wissel input:focus-visible+span{outline:3px solid var(--amber)}
.bon-regels{list-style:none;margin:0;padding:0}
.bon-regel{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px dotted rgba(27,21,18,.3);font-size:14px;line-height:1.35;animation:regel .45s var(--ease)}
@keyframes regel{from{opacity:0;transform:translateX(20px)}}
.bon-regel .n{font-weight:700}
.bon-regel small{display:block;color:#6a584c;font-size:12.5px;margin-top:3px}
.bon-regel .p{text-align:right;font-weight:700;white-space:nowrap}
.bon-regel-knoppen{grid-column:2/4;display:flex;gap:6px;justify-content:flex-end}
.bon-regel-knoppen button{border:1px solid rgba(27,21,18,.25);background:none;border-radius:8px;min-width:32px;height:30px;font:700 14px/1 var(--mono)}
.bon-regel-knoppen button:hover{background:#f1e8da}
.bon-leeg{text-align:center;color:#6a584c;padding:18px 0;margin:0;font-size:14px}
.bon-drempel{margin:14px 0 4px;font-size:12.5px}
.drempel-balk{height:8px;border-radius:4px;background:#efe4d4;overflow:hidden;margin-bottom:7px}
.drempel-balk i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--rood));border-radius:4px;transition:width .6s var(--ease)}
.bon-drempel.is-gehaald .drempel-balk i{background:var(--groen)}
.bon-drempel p{margin:0}
.bon-totaal{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed rgba(27,21,18,.3);margin-top:12px;padding-top:12px;font-size:16px;text-transform:uppercase;letter-spacing:.1em}
.bon-totaal b{font-size:24px;letter-spacing:0}
.bon-klein{font-size:12px;color:#6a584c;margin:6px 0 14px}
.bon-gegevens{display:grid;gap:10px;margin-bottom:16px}
.bon-gegevens label{display:grid;gap:5px;font:700 12px/1 var(--tekst);letter-spacing:.1em;text-transform:uppercase}
.bon-gegevens input,.bon-gegevens select{font:400 16px/1.2 var(--mono);color:var(--inkt);background:#fbf5ea;border:1.5px solid rgba(27,21,18,.2);border-radius:10px;padding:11px 12px;letter-spacing:0;text-transform:none;width:100%}
.bon-gegevens input:focus,.bon-gegevens select:focus{border-color:var(--inkt);outline:none}
.bon-acties{display:grid;gap:8px}
.bon-acties .knop{font-family:var(--tekst);width:100%}
.bon-acties .knop[aria-disabled="true"]{opacity:.45;pointer-events:none}
.bon-uitleg{font-size:12px;color:#6a584c;margin:14px 0 0;line-height:1.5}
@media (max-width:600px){.bon{padding:12px 12px 30px}.bon-papier{padding:22px 16px 30px}.bon .sluit{top:16px;right:16px}}

/* vlieger: rib-bolletje dat naar de bon vliegt */
.vlieger{position:fixed;z-index:70;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--rood);box-shadow:0 0 0 4px rgba(238,128,49,.3);pointer-events:none;opacity:0}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-zicht{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-titel .r>span,.hero-lead,.hero .hero-knoppen,.hero-status{transform:none;opacity:1}
  .rv{opacity:1;transform:none}
  .band-rij{animation:none}
}