/* ===== FoodSouldiers · projectlaag boven basis.css ===== */
@font-face{font-family:"Anton";src:url("fonts/anton-400-normal-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("fonts/worksans-400-normal-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("fonts/worksans-500-normal-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("fonts/worksans-600-normal-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --accent:#13b7d9;          /* cyaan uit het logo */
  --accent-d:#0d788f;
  --accent-2:#fcc900;        /* geel accent van de site */
  --inkt:#000c0f;
  --inkt-2:#06222a;
  --tint:#f4eee4;            /* warm zand */
  --tint-2:#eadfce;
  --wit:#faf7f2;
  --grijs:#5c6b70;
  --lijn:rgba(0,12,15,.12);
  --f-display:"Anton","Arial Narrow",sans-serif;
  --f-serif:"Work Sans",system-ui,sans-serif;
  --f-body:"Work Sans",system-ui,sans-serif;
}
h1,h2,h3{font-weight:400;letter-spacing:.01em;text-transform:uppercase;line-height:.96}
h1 em,h2 em,h3 em,.serif{font-family:var(--f-display);font-style:normal;color:var(--accent);text-transform:uppercase}
.lead{color:#274047}
.op-inkt{background:var(--inkt);color:var(--wit)}
.op-inkt .lead{color:rgba(250,247,242,.78)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--inkt);color:var(--wit);overflow:hidden}
.hero__plak{position:absolute;inset:-14% 0;background:url("assets/hero-bg.jpg") center 30%/cover no-repeat;will-change:transform}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,12,15,.88) 0%,rgba(0,12,15,.45) 42%,rgba(0,12,15,.18) 68%,rgba(0,12,15,.42) 100%)}
.hero__binnen{position:relative;width:min(var(--wrap),100% - 40px);margin-inline:auto;padding:9rem 0 clamp(2.5rem,6vh,4.5rem);display:flex;flex-direction:column;gap:1.1rem}
.hero .oog{color:rgba(250,247,242,.85)}
.hero .oog::before{background:var(--accent)}
.hero h1{font-size:clamp(3rem,8.4vw,8.6rem);color:var(--wit)}
.hero h1 .accent{color:var(--accent)}
.hero__lead{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;color:rgba(250,247,242,.86);max-width:46ch;margin:0}
.hero__wissel{font-size:clamp(1.05rem,1.4vw,1.3rem);color:rgba(250,247,242,.86)}
.hero__wissel em{font-style:normal;color:var(--accent-2);font-weight:600}
[data-wissel] .lt{display:inline-block}
[data-wissel].uit .lt{transform:translateY(110%);opacity:0;transition:transform .3s cubic-bezier(.5,0,.75,0),opacity .3s}
[data-wissel].in .lt{animation:ltin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j)*.028s)}
@keyframes ltin{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.hero__wissel em{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .1em .12em;margin:0 -.1em -.12em}
.hero__note{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:rgba(250,247,242,.72)}
.hero__note b{color:var(--accent)}
.hero__scroll{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(2.5rem,6vh,4.5rem);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(250,247,242,.6);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl}
.hero__scroll i{width:2px;height:56px;background:rgba(250,247,242,.35);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--accent);animation:druppel 1.8s ease-in-out infinite}
@keyframes druppel{to{top:110%}}
.hero__status{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,12,15,.55);border:1px solid rgba(250,247,242,.25);backdrop-filter:blur(8px);border-radius:999px;padding:.5rem 1rem;font-size:.88rem;font-weight:600;width:max-content}
.hero__status s{width:9px;height:9px;border-radius:50%;background:#3ddc84;text-decoration:none}
.hero__status s.dicht{background:#ff5f56}
@media (max-width:760px){.hero__scroll{display:none}.hero h1{font-size:clamp(2.4rem,12.5vw,3.6rem)}}

/* kopbalk op donkere hero */
.kopbalk{color:var(--wit)}
.kopbalk.vast{background:rgba(0,12,15,.82);box-shadow:0 1px 0 rgba(250,247,242,.12)}
.merk img{height:46px;width:auto;border-radius:50%}
.nav a::after{background:var(--accent)}
.kopbalk__tel{color:var(--wit)}
.menuknop{background:var(--accent)}
.menuknop span,.menuknop span::before{background:var(--inkt)}
.mobmenu{background:var(--inkt);color:var(--wit)}
.mobmenu a.m{border-bottom-color:rgba(250,247,242,.14)}

/* bewijsbalk op donker randje onder hero */
.bewijs{background:var(--inkt-2);color:var(--wit);border-bottom:1px solid rgba(250,247,242,.1)}
.bewijsbalk{border-bottom:0}
.bewijsbalk>div{border-right-color:rgba(250,247,242,.1)}
.bewijsbalk b{color:var(--wit)}
.bewijsbalk span{color:rgba(250,247,242,.6)}
.sterren{color:var(--accent-2)}
@media (max-width:760px){.bewijsbalk>div:nth-child(-n+2){border-bottom-color:rgba(250,247,242,.1)}}

/* reviews */
.reviewgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.review{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.review:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(0,12,15,.35)}
.review blockquote{margin:0;font-size:1.02rem;line-height:1.5;color:#22333a}
.review footer{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;font-size:.88rem;color:var(--grijs)}
.review footer b{color:var(--inkt)}
.reviews__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-weight:600;color:var(--inkt);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:.15rem}
.reviews__link:hover{color:var(--accent-d)}
@media (max-width:900px){.reviewgrid{grid-template-columns:1fr}}

/* marquee-band met gerechten */
.band{background:var(--accent);padding:1.1rem 0;transform:rotate(-1.2deg) scale(1.02);margin:1rem 0}
.band span{color:var(--inkt);opacity:.85;font-size:1.6rem}
.band b{color:var(--inkt);font:400 1.6rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}

/* kaarten: scrim versterken voor lichte foodfoto's */
.kaart::before{background:linear-gradient(0deg,rgba(0,12,15,.9),rgba(0,12,15,.28) 55%,rgba(0,12,15,.08))}
.kaart__tekst b{text-transform:uppercase;letter-spacing:.01em}
.kaart__tekst i{color:var(--accent-2)}

/* duo beeldcollage */
.duo__beeld{aspect-ratio:4/5}
.duo__beeld .klein{position:absolute;right:-8%;bottom:-10%;width:52%;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;box-shadow:0 26px 50px -22px rgba(0,12,15,.5);border:6px solid var(--wit)}
.duo__beeld .klein img{width:100%;height:100%;object-fit:cover}

/* bites-teaser */
.bites .duo__beeld{aspect-ratio:3/4;max-width:440px;margin-inline:auto}
.stappen{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.stappen{grid-template-columns:1fr}}

/* bezoek */
.bezoek__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.tijden{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.15rem}
.tijden li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .2rem;border-bottom:1px dashed var(--lijn);font-size:1rem}
.tijden li.vandaag{font-weight:700;color:var(--accent-d)}
.tijden li span:last-child{font-variant-numeric:tabular-nums}
.adresblok{margin-top:1.8rem;display:grid;gap:.4rem;font-size:1.02rem}
.adresblok a{color:inherit}
@media (max-width:900px){.bezoek__grid{grid-template-columns:1fr}}

/* slot in cyaan */
.slot{background:var(--accent)}
.slot h2{color:var(--inkt)}
.slot .knop--inkt{box-shadow:0 1px 0 #fff2 inset,0 4px 0 #000,0 12px 24px -10px rgba(0,0,0,.5)}

/* plakker */
.plakker{background:var(--inkt)}
.plakker .knop--accent{background:var(--accent)}

/* cursor: gekruiste vork en spatel uit het logo */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;opacity:0;transition:opacity .3s;will-change:transform}
html.cursor-aan .cursor{opacity:1}
html.cursor-aan,html.cursor-aan a,html.cursor-aan button{cursor:none}
.cursor svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,12,15,.45));transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.cursor.prik svg{transform:scale(.82) rotate(-8deg)}
.cursor.weg{opacity:0!important}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* borrelplanner eigen kale pagina */
.planner{min-height:100svh;display:flex;flex-direction:column;background:var(--inkt);color:var(--wit)}
.planner__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(16px,3vw,40px)}
.planner__top img{height:42px;width:auto;border-radius:50%}
.planner__top a{color:rgba(250,247,242,.75);text-decoration:none;font-weight:600;font-size:.95rem}
.planner__top a:hover{color:var(--accent)}
.planner__kern{flex:1;display:flex;flex-direction:column;justify-content:center;width:min(760px,100% - 40px);margin-inline:auto;padding:2rem 0 3rem}
.planner__voortgang{height:4px;border-radius:4px;background:rgba(250,247,242,.14);overflow:hidden;margin:1.2rem 0 2.2rem}
.planner__voortgang i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}
.planner h1{font-size:clamp(2rem,5.4vw,3.6rem);color:var(--wit)}
.planner .sub{color:rgba(250,247,242,.7);margin:.9rem 0 0;max-width:52ch}
.opties{display:grid;gap:.8rem;margin-top:2rem}
.optie{display:flex;align-items:center;gap:1rem;text-align:left;background:rgba(250,247,242,.06);border:1.5px solid rgba(250,247,242,.16);border-radius:var(--r-s);padding:1.05rem 1.2rem;color:var(--wit);cursor:pointer;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.optie:hover{border-color:var(--accent);background:rgba(19,183,217,.1);transform:translateX(4px)}
.optie b{font-size:1.05rem;font-weight:600}
.optie span{display:block;font-size:.88rem;color:rgba(250,247,242,.62);font-weight:400}
.optie .ic{font-size:1.4rem;width:2.2rem;text-align:center;flex:none}
.teller{display:flex;align-items:center;gap:1.4rem;margin-top:2rem}
.teller button{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(250,247,242,.3);background:transparent;color:var(--wit);font-size:1.6rem;cursor:pointer;transition:border-color .25s,background .25s}
.teller button:hover{border-color:var(--accent);background:rgba(19,183,217,.12)}
.teller output{font:400 3.4rem/1 var(--f-display);min-width:3ch;text-align:center}
.teller small{color:rgba(250,247,242,.62)}
.planner__nav{display:flex;gap:.9rem;margin-top:2.4rem;align-items:center}
.planner__nav .terug{background:none;border:0;color:rgba(250,247,242,.6);font:600 .95rem var(--f-body);cursor:pointer;text-decoration:underline;padding:.6rem 0}
.planner__nav .terug:hover{color:var(--accent)}
.uitslag{background:rgba(250,247,242,.05);border:1px solid rgba(250,247,242,.14);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);margin-top:2rem}
.uitslag__rij{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(250,247,242,.14);font-size:1rem}
.uitslag__rij:last-of-type{border-bottom:0}
.uitslag__rij b{font-variant-numeric:tabular-nums}
.uitslag__totaal{font:400 2rem/1 var(--f-display);color:var(--accent);text-transform:uppercase}
.uitslag small.note{display:block;margin-top:1rem;color:rgba(250,247,242,.55);font-size:.85rem;line-height:1.5}
.planner .knop--accent{background:var(--accent);color:var(--inkt)}
.planner .knop--lijn{background:transparent;color:var(--wit);box-shadow:0 0 0 1.5px rgba(250,247,242,.7) inset,0 4px 0 rgba(250,247,242,.22)}
.planner .oog{color:rgba(250,247,242,.6)}
.planner .oog::before{background:var(--accent)}