/* ==========================================================================
   Sera Restaurant & Grill, demo-bestelsite
   Handtekening: de vuurbaan. Accent: terracotta en goud, in kleine doses.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

/* Het merkpalet van Sera (Kleuren_seragrill.pdf):
     inkt      #2C2E35     goud      #C4A36A     olijf     #706745
     terracotta #B87352    grijs     #727171
     zand      #DCBF95 en #DEC7A9
     papier    #FFFAEA, #EFE9DA, #EAE4D9
   Drie tinten zijn afgeleid omdat de merkkleur zelf als tekstkleur te licht
   is: de terracotta wordt #9C5636 (licht) en #D09071 (donker), en het grijs
   wordt #625F59. De merkkleuren zelf blijven in vlakken en lijnen staan. */

:root{
  --canvas:#FFFAEA;
  --canvas-2:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#EFE9DA;
  --line:#EAE4D9;
  --line-strong:#DEC7A9;
  --text:#2C2E35;
  --text-2:#625F59;
  --accent:#9C5636;
  --accent-btn:#9C5636;
  --accent-btn-hover:#8A4A2E;
  --accent-ink:#FFFAEA;
  --accent-muted:rgba(184,115,82,.15);
  --gold:#706745;
  --gold-line:#C4A36A;
  --gold-soft:rgba(196,163,106,.42);
  --zand:#DCBF95;
  --shadow-1:0 1px 2px rgba(44,46,53,.05), 0 6px 18px rgba(44,46,53,.06);
  --shadow-2:0 2px 8px rgba(44,46,53,.07), 0 22px 50px rgba(44,46,53,.11);
  --shadow-3:0 34px 100px rgba(44,46,53,.22);
  --dust:rgba(196,163,106,.55);
  --glow:rgba(184,115,82,.12);
  --ok:#1B6B3C;
  --scrim-1:rgba(20,21,26,.80);
  --scrim-2:rgba(20,21,26,.32);

  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --r-xl:38px;
  --pad:clamp(20px,5vw,64px);
  --wide:1280px;
  --nav-h:68px;

  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  accent-color:#9C5636;
  color-scheme:light;
}

:root[data-theme="dark"]{
  --canvas:#23252B;
  --canvas-2:#282A31;
  --panel:#2C2E35;
  --panel-2:#35373F;
  --line:#3C3F48;
  --line-strong:#565A66;
  --text:#EFE9DA;
  --text-2:#A7A49E;
  --accent:#D09071;
  --accent-btn:#A4603F;
  --accent-btn-hover:#8F5230;
  --accent-ink:#FFFAEA;
  --accent-muted:rgba(208,144,113,.18);
  --gold:#C4A36A;
  --gold-line:#C4A36A;
  --gold-soft:rgba(196,163,106,.34);
  --zand:#DEC7A9;
  --shadow-1:0 1px 2px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.30);
  --shadow-2:0 2px 8px rgba(0,0,0,.36), 0 22px 50px rgba(0,0,0,.44);
  --shadow-3:0 34px 100px rgba(0,0,0,.60);
  --dust:rgba(196,163,106,.5);
  --glow:rgba(208,144,113,.14);
  --ok:#6FCB96;
  --scrim-1:rgba(12,13,16,.82);
  --scrim-2:rgba(12,13,16,.36);
  accent-color:#D09071;
  color-scheme:dark;
}

/* ---------- 2. Grondwerk ---------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}

img{max-width:100%;height:auto;display:block}
blockquote,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em}
p{margin:0}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.kicker{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
/* een kort gouden streepje ervoor, hetzelfde streepje als onder het logo */
.kicker::before{
  content:"";
  display:inline-block;vertical-align:middle;
  width:20px;height:1px;margin-right:11px;margin-bottom:2px;
  background:var(--gold-line);
}
.band .kicker::before{display:none}

.lede{
  font-size:clamp(1.02rem,1.4vw,1.18rem);
  color:var(--text-2);
  max-width:58ch;
}

.wrap{
  width:100%;
  max-width:var(--wide);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent-btn);color:var(--accent-ink);
  padding:14px 20px;border-radius:0 0 var(--r-s) 0;font-weight:600;
}
.skip:focus{left:0}

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

::selection{background:var(--accent-muted);color:var(--text)}

/* ---------- 3. De omgeving: één vaste achtergrondlaag ---------- */

.env{
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;
}
.env__glow{
  position:absolute;
  width:120vmax;height:120vmax;
  left:50%;top:-45vmax;
  margin-left:-60vmax;
  background:radial-gradient(circle at 50% 50%, var(--glow) 0%, transparent 62%);
  animation:envDrift 96s var(--ease) -22s infinite alternate;
}
.env__grain{
  position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;inset:-2px;
  opacity:.5;
  background-image:radial-gradient(var(--dust) .6px, transparent .7px);
  background-size:190px 190px;
  animation:envGrain 120s linear -40s infinite;
}
:root[data-theme="dark"] .env__grain{opacity:.28}
@keyframes envDrift{
  from{transform:translate3d(-5%,0,0) scale(1)}
  to  {transform:translate3d(6%,4%,0) scale(1.12)}
}
@keyframes envGrain{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-190px,-190px,0)}
}

.stof{position:absolute;top:0;right:0;bottom:0;left:0;inset:0}
.stof i{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:var(--dust);
  opacity:0;
  animation:stof 26s linear infinite;
}
@keyframes stof{
  0%  {opacity:0;transform:translate3d(0,10vh,0)}
  12% {opacity:.7}
  84% {opacity:.5}
  100%{opacity:0;transform:translate3d(24px,-88vh,0)}
}

main,header,footer{position:relative;z-index:1}

/* ---------- 4. Knoppen ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 26px;
  border-radius:100px;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:-.01em;
  position:relative;
  isolation:isolate;
  transition:transform .42s var(--ease-out), background .3s var(--ease), color .3s var(--ease), box-shadow .42s var(--ease-out), border-color .3s var(--ease);
  will-change:transform;
}
.btn--main{
  background:var(--accent-btn);
  color:var(--accent-ink);
  box-shadow:0 6px 20px -6px var(--accent-btn);
}
.btn--main::before{
  content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;inset:-3px;border-radius:inherit;z-index:-1;
  background:var(--accent);
  opacity:0;filter:blur(14px);
  transition:opacity .42s var(--ease-out);
}
.btn--main:hover{background:var(--accent-btn-hover);transform:translateY(-2px)}
.btn--main:hover::before{opacity:.5}
.btn--main:active{transform:translateY(0) scale(.985)}

.btn--ghost{
  border:1.5px solid var(--line-strong);
  color:var(--text);
  background:transparent;
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

.btn--soft{
  background:var(--panel-2);
  border:1px solid var(--line);
}
.btn--soft:hover{border-color:var(--accent);color:var(--accent)}

.btn[disabled]{opacity:.45;pointer-events:none}

.btn__arrow{
  display:inline-block;
  transition:transform .42s var(--ease-out);
}
.btn:hover .btn__arrow{transform:translateX(4px)}

@media (pointer:coarse){
  .btn{min-height:46px}
  .icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- 5. Kop en navigatie ---------- */

.bar{
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
  font-size:.86rem;
  color:var(--text-2);
  position:relative;z-index:60;
}
.bar__in{
  display:flex;align-items:center;gap:12px;
  padding-block:9px;
  min-height:38px;
}
.dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--text-2);
  position:relative;
}
.dot--open{background:#2E9E5B}
.dot--open::after{
  content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;inset:-4px;border-radius:50%;
  border:1.5px solid #2E9E5B;
  animation:pulse 3.4s var(--ease) -1s infinite;
}
.dot--closed{background:var(--accent)}
@keyframes pulse{
  0%,100%{opacity:0;transform:scale(.7)}
  40%    {opacity:.7;transform:scale(1)}
  70%    {opacity:0;transform:scale(1.5)}
}

.nav{
  position:sticky;top:0;z-index:70;
  background:var(--canvas);                       /* terugval: oudere browsers */
  background:color-mix(in srgb, var(--canvas) 90%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__in{
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  min-height:var(--nav-h);
}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex:none}
/* Het merkteken is de S uit het logo, met de gouden ring en de ruit
   die op de menukaart onder de naam staat. */
.brand__mark{width:36px;height:36px;flex:none;color:var(--gold)}
.brand__mark .ring-s{
  transform-origin:center;
  animation:gloed 7s var(--ease) infinite;
}
.brand__mark .ruit{
  transform-origin:center;
  animation:gloed 7s var(--ease) -1.6s infinite;
}
@keyframes gloed{
  0%,100%{opacity:.42}
  50%    {opacity:.9}
}
.brand__letter{
  font-family:var(--f-display);font-weight:700;font-size:19px;
  fill:currentColor;
}
.brand__name{
  font-family:var(--f-display);font-weight:700;font-size:1.24rem;
  letter-spacing:.02em;line-height:1;
}
.brand__sub{
  display:block;
  font-family:var(--f-mono);font-size:.58rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);
  margin-top:3px;
}

.nav__links{display:flex;align-items:center;gap:clamp(6px,1.6vw,22px)}
.nav__link{
  padding:9px 4px;font-size:.94rem;font-weight:500;color:var(--text-2);
  position:relative;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--text)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:820px){ .nav__links{display:none} }

.nav__tools{display:flex;align-items:center;gap:8px;flex:none}

.theme{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;
  transition:border-color .3s var(--ease), transform .5s var(--ease-out), background .3s var(--ease);
}
.theme:hover{border-color:var(--accent);transform:rotate(-22deg)}
.theme svg{width:19px;height:19px}
.theme .zon{display:none}
:root[data-theme="dark"] .theme .zon{display:block}
:root[data-theme="dark"] .theme .maan{display:none}

.cartbtn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:100px;
  background:var(--accent-btn);color:var(--accent-ink);
  font-weight:600;font-size:.92rem;
  transition:transform .42s var(--ease-out), background .3s var(--ease);
}
.cartbtn:hover{background:var(--accent-btn-hover);transform:translateY(-2px)}
.cartbtn svg{width:17px;height:17px}
.cartbtn__n{
  font-family:var(--f-mono);font-size:.8rem;
  min-width:21px;height:21px;padding-inline:5px;
  border-radius:100px;background:rgba(0,0,0,.24);
  display:grid;place-items:center;
}
.cartbtn.is-bump{animation:bump .5s var(--ease-out)}
@keyframes bump{
  0%{transform:scale(1)} 38%{transform:scale(1.11)} 100%{transform:scale(1)}
}

/* ---------- 6. Hero: het vuur laait op terwijl je scrollt ---------- */

/* De hoogte is scrollafstand, geen seconden. 440vh, dus 340vh scrollbereik
   voor drie tekstmomenten van elk ongeveer 80 tot 95vh plateau. */
.hero{
  height:440vh;
  position:relative;
}

.stage{
  position:sticky;
  top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  overflow:hidden;
  isolation:isolate;
  display:flex;align-items:center;
  background:#191B21;
}

.stage__doek{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;overflow:hidden;background:#191B21}
.poster{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background-size:cover;background-position:52% 56%;
  transition:opacity .9s var(--ease);
}
.shot{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:52% 56%;
  opacity:0;
  transition:opacity .8s var(--ease);
  will-change:transform;
  transform:translateZ(0);          /* eigen compositielaag, anders trekt hij de pagina mee */
}
.stage.video-klaar .shot{opacity:1}
.stage.video-klaar .poster{opacity:0}
.stage.video-mist .shot{display:none}

/* laag 1 van vier: de vaste basisscrim over het hele beeld */
.scrim{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,10,17,.72) 0%, rgba(5,10,17,.60) 24%, rgba(5,10,17,.24) 54%, rgba(5,10,17,0) 76%),
    linear-gradient(to top, rgba(5,10,17,.60) 0%, rgba(5,10,17,0) 38%),
    radial-gradient(ellipse 122% 92% at 52% 48%, rgba(5,10,17,0) 34%, rgba(5,10,17,.52) 100%);
}

.stage__in{
  position:relative;
  width:100%;max-width:var(--wide);
  margin-inline:auto;
  padding-inline:var(--pad);
  height:100%;
}

/* De tekst zit bovenin links. Dat is de enige zone die in alle 104 beelden
   donker blijft: de plank komt van onderen op en wandelt naar het midden,
   dus alles boven ongeveer 40 procent hoogte is rook en muur. */
.band{
  position:absolute;
  left:var(--pad);right:var(--pad);
  top:clamp(40px,7.5vh,88px);
  max-width:min(44rem,60vw);
  opacity:var(--o,1);
  will-change:opacity;
}
/* laag 2 van vier: elke baan zijn eigen scrim, die meedeint met --k en
   alleen dieper wordt zolang die baan aanstaat */
.band::before{
  content:"";position:absolute;
  top:-16%;right:-46%;bottom:-20%;left:-34%;inset:-16% -46% -20% -34%;
  pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72 * var(--k,1));
  background:radial-gradient(ellipse 74% 68% at 36% 50%,
    rgba(4,9,15,var(--a,.72)) 0%,
    rgba(4,9,15,calc(var(--a,.72) * .62)) 46%,
    rgba(4,9,15,0) 76%);
}
/* Deze drie waarden zijn gemeten, niet gegokt: het lichtste beeldpunt onder
   elke regel moet minstens 3,5 op 1 halen tegen wit. Omdat de tekst nu in de
   donkere zone staat, mag de scrim licht blijven en blijft het beeld leven. */
.band--1{--a:.44}
.band--2{--a:.46}
.band--3{--a:.46}

/* laag 3 van vier: de tekstschaduw, drie lagen, en niet op knoppen */
:root{--tshadow:0 1px 2px rgba(4,9,15,.95), 0 3px 12px rgba(4,9,15,.78), 0 10px 44px rgba(4,9,15,.8)}
.band{text-shadow:var(--tshadow)}
.band .btn{text-shadow:none}

.band .kicker{color:#DEC7A9;display:block;margin-bottom:18px}
.band h1{
  color:#FFFFFF;
  font-size:clamp(2.4rem,5.6vw,4.5rem);
}
.band h1 .split{max-width:15ch}
.band--2{max-width:min(30rem,46vw)}
.band__punch{
  color:#FFFFFF;
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.9rem,4.2vw,3.4rem);
  letter-spacing:-.03em;line-height:1.08;
}
.hero__lede{
  color:rgba(255,255,255,.94);
  max-width:42ch;
  font-size:clamp(1rem,1.35vw,1.16rem);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.band .btn--ghost{
  border-color:rgba(255,255,255,.5);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.band .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}

/* laag 4 van vier: kleine tekst over beeld krijgt een pilletje, geen grote scrim */
/* de statusbalk duwt de hero bij scrollstand nul 38px omlaag, dus de tip
   moet hoog genoeg zitten om ook dan binnen beeld te blijven */
.cue{
  position:absolute;left:50%;bottom:clamp(54px,7vh,72px);transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:100px;
  background:rgba(20,21,26,.52);
  border:1px solid rgba(150,170,190,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.9);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(4,9,15,.85);
  opacity:var(--cue,1);
  transition:opacity .5s var(--ease);
  white-space:nowrap;
}
.cue svg{width:12px;height:18px;animation:cueWip 2.8s var(--ease) -.4s infinite}
@keyframes cueWip{
  0%,100%{transform:translateY(-2px);opacity:.6}
  50%    {transform:translateY(2px);opacity:1}
}

/* de laadring, alleen zichtbaar zolang de video binnenkomt */
.ring{
  position:absolute;right:26px;bottom:26px;
  width:34px;height:34px;color:rgba(255,255,255,.72);
  opacity:0;transition:opacity .4s var(--ease);
  transform:rotate(-90deg);
}
.stage.video-laadt .ring{opacity:1}
.ring circle{transition:stroke-dashoffset .2s linear}

/* tekstchoreografie: karakters en woorden */
.split{display:inline-block}
.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block;will-change:transform,opacity}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* baan 1, de kicker: letters schuiven op hun plek, zoals het mes zich aanzet */
.an-scatter .c{
  opacity:var(--kc,1);
  transform:translate(calc((1 - var(--kc,1)) * var(--jx,0px)), calc((1 - var(--kc,1)) * var(--jy,0px)));
}
/* baan 1 en 3: woorden komen omhoog in leesrichting, zoals het beeld tot rust komt */
.an-rise .w{
  opacity:var(--kc,1);
  transform:translateY(calc((1 - var(--kc,1)) * 26px));
}
/* baan 2: woorden slaan aan met een doorschot, zoals het lemmet landt */
.an-punch .w{
  --kp:clamp(0, (var(--k,1) - var(--th,0)) * 3, 1);
  --ks:clamp(0, (var(--k,1) - var(--th,0) - .14) * 2.8, 1);
  opacity:var(--kp);
  transform:scale(calc(.64 + .58 * var(--kp) - .22 * var(--ks)));
}
/* de knoppen van baan 3 komen als laatste, na de regel erboven */
.hero__cta{
  opacity:var(--kb,1);
  transform:translateY(calc((1 - var(--kb,1)) * 14px));
}

/* ---------- 6b. Het stilstaande beeld: vijf poorten, exact gelijk aan de JS ---------- */

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{
    position:relative;top:0;
    height:auto;min-height:min(88vh,780px);
    align-items:flex-end;
    padding-block:clamp(90px,16vh,170px) clamp(40px,7vh,80px);
  }
  .stage__doek .shot,
  .stage .ring,
  .stage .cue{display:none}
  .stage__in{height:auto}
  .band{
    position:relative;left:0;right:0;top:0;
    transform:none;
    opacity:1 !important;
    max-width:none;
  }
  .band--2{display:none}
  .band--3{margin-top:24px}
  /* Bij het stilstaande beeld staat de tekst onderin, waar de plank licht is.
     Daar helpt geen ellips, daar hoort een echt verloop van onder naar boven.
     De waarden komen uit dezelfde meting: slechtste beeldpunt tegen wit. */
  .band::before{display:none}
  .scrim{
    background:linear-gradient(to top,
      rgba(5,10,17,.84) 0%,
      rgba(5,10,17,.68) 30%,
      rgba(5,10,17,.52) 47%,
      rgba(5,10,17,.24) 64%,
      rgba(5,10,17,.06) 82%,
      rgba(5,10,17,0) 100%);
  }
  .an-scatter .c,.an-rise .w,.an-punch .w{opacity:1 !important;transform:none !important}
  .hero__cta{opacity:1 !important;transform:none !important}
}
/* ---------- 7. Secties ---------- */

.sec{padding-block:clamp(46px,5.6vw,82px);position:relative}
.sec--tight{padding-block:clamp(36px,4.4vw,62px)}
.sec__head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,44px)}
.sec__head .kicker{display:block;margin-bottom:14px}
.sec__head .lede{margin-top:18px}

/* de gouden geleiderail, tekent zichzelf */
/* De streep met de ruit uit het logo, als scheiding tussen twee secties.
   De twee lijnen worden vanuit het midden naar buiten getekend. */
.scheiding{position:relative}
.scheiding__ruit{
  position:absolute;left:50%;top:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:var(--gold-line);
  transform:rotate(45deg) scale(.4);
  opacity:0;
  transition:opacity .6s var(--ease) .9s, transform .6s var(--ease-out) .9s;
}
.rail-line.in + .scheiding__ruit{opacity:.95;transform:rotate(45deg) scale(1)}

.rail-line{display:block;width:100%;height:14px;overflow:visible;color:var(--gold-line)}
.rail-line path{
  stroke:currentColor;stroke-width:1.25;fill:none;opacity:.55;
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.5s var(--ease-out);
}
.rail-line.in path{stroke-dashoffset:0}
.rail-line circle{fill:currentColor;opacity:0;transition:opacity .7s var(--ease) .8s}
.rail-line.in circle{opacity:.8}

/* feiten */
.feiten{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.feit{
  background:var(--panel);
  padding:26px 24px;
  transition:background .4s var(--ease);
}
.feit:hover{background:var(--panel-2)}
.feit__k{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);
}
.feit__v{
  font-family:var(--f-display);font-weight:700;font-size:1.28rem;
  letter-spacing:-.025em;margin-top:9px;line-height:1.2;
}
.feit__s{font-size:.86rem;color:var(--text-2);margin-top:5px}

/* over: beeld naast tekst */
.duo{
  display:grid;gap:clamp(26px,4vw,64px);
  grid-template-columns:1.02fr .98fr;align-items:center;
}
@media (max-width:900px){ .duo{grid-template-columns:1fr} }
.duo__beeld{
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-2);
  position:relative;
  aspect-ratio:4/3;
}
.duo__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.duo:hover .duo__beeld img{transform:scale(1.035)}
.duo__beeld::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(to top, rgba(20,21,26,.30), transparent 55%);
}

.tel{
  display:flex;gap:clamp(20px,3vw,42px);flex-wrap:wrap;margin-top:34px;
  border-top:1px solid var(--line);padding-top:26px;
}
.tel__n{
  font-family:var(--f-display);font-weight:900;font-size:2rem;letter-spacing:-.04em;
  color:var(--accent);line-height:1;
}
.tel__l{font-size:.85rem;color:var(--text-2);margin-top:6px;max-width:16ch}

/* ---------- 7b. Bestellen op de startpagina ----------
   Dezelfde kaartjes en hetzelfde venster als op de bestelpagina, alleen korter.
   Staat bewust meteen onder de hero: bestellen is waar de site voor is. */

.bestel{padding-top:clamp(30px,4vw,54px);scroll-margin-top:calc(var(--nav-h) + 18px)}
.bestel__kop{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:26px;
}
.bestel__kop .lede{max-width:52ch}

.bestel__tabs{
  display:flex;gap:6px;overflow-x:auto;
  padding-block:4px 18px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
}
.bestel__tabs::-webkit-scrollbar{display:none}

.bestel .catsec__onder{margin:0 0 18px}

.bestel__meer{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:11px 20px;
  border-radius:100px;border:1px solid var(--line-strong);
  font-weight:600;font-size:.94rem;color:var(--text);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease-out);
}
.bestel__meer:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* De balk onderaan komt op zodra er iets in het mandje ligt. */
.thuisbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--panel);                        /* terugval: oudere browsers */
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 40px rgba(36,27,18,.13);
  padding-bottom:env(safe-area-inset-bottom);
  animation:balkOp .5s var(--ease-out) both;
}
@keyframes balkOp{
  from{transform:translateY(100%)}
  to  {transform:translateY(0)}
}
.thuisbalk__in{
  display:flex;align-items:center;gap:14px;
  padding-block:12px;
}
.thuisbalk svg{width:20px;height:20px;color:var(--accent);flex:none}
.thuisbalk__t{font-weight:600;font-size:.96rem;white-space:nowrap}
.thuisbalk .btn{margin-left:auto;white-space:nowrap}
@media (max-width:520px){
  .thuisbalk__in{gap:10px}
  .thuisbalk__t{font-size:.86rem}
  .thuisbalk .btn{padding-inline:16px;font-size:.9rem}
}
html.geen-beweging .thuisbalk{animation:none}

/* ---------- 8. Handtekening: de vuurbaan ---------- */

.vuurbaan{
  padding-block:clamp(40px,4.8vw,68px);
  position:relative;
  overflow:hidden;
}
.vuurbaan__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:34px;
}
.rail{
  position:relative;
  padding-block:22px 30px;
  --dur:64s;
}
.rail::before,.rail::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(30px,8vw,120px);z-index:3;
  pointer-events:none;
}
.rail::before{left:0;background:linear-gradient(to right,var(--canvas) 26%,transparent)}
.rail::after{right:0;background:linear-gradient(to left,var(--canvas) 26%,transparent)}
.rail__band{
  display:flex;gap:20px;width:max-content;
  animation:railLoop var(--dur) linear infinite;
  will-change:transform;
}
.rail:hover .rail__band,.rail:focus-within .rail__band{animation-play-state:paused}
@keyframes railLoop{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
.rail__spoor{
  position:absolute;left:0;right:0;bottom:12px;height:2px;
  background:linear-gradient(to right,transparent,var(--gold-soft) 8%,var(--gold-soft) 92%,transparent);
  border-radius:2px;
}
/* Geen foto's op de kaart, dus de baan draagt de gerechten zoals ze op de
   papieren menukaart staan: nummer, categorie, naam, prijs. */
.schaal{
  width:clamp(212px,23vw,266px);flex:none;
  border-radius:var(--r-l);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
  text-align:left;
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px 20px;
  position:relative;
}
.schaal::after{
  content:"";position:absolute;left:20px;right:20px;bottom:12px;height:1px;
  background:linear-gradient(to right,var(--gold-soft),transparent);
}
.schaal:hover,.schaal:focus-visible{
  transform:translateY(-7px);box-shadow:var(--shadow-2);border-color:var(--accent);
}
.schaal__nr{
  flex:none;font-size:.8rem;color:var(--gold);
  padding-top:3px;min-width:1.4em;
}
.schaal__body{display:block;min-width:0}
.schaal__cat{
  display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);
}
.schaal__n{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:1.12rem;letter-spacing:-.01em;margin-top:5px;
}
.schaal__p{
  display:block;font-family:var(--f-mono);font-size:.86rem;color:var(--accent);margin-top:7px;
}

/* ---------- 9. Stappen ---------- */

.stappen{
  display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  counter-reset:stap;
}
.stap{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:32px 28px 30px;
  position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.stap:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.stap__nr{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent);
}
.stap__ico{width:56px;height:56px;color:var(--accent);margin:18px 0 20px}
.stap__ico path,.stap__ico circle,.stap__ico line,.stap__ico rect,.stap__ico ellipse{
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,160);stroke-dashoffset:var(--len,160);
  transition:stroke-dashoffset 1.2s var(--ease-out);
}
.stap.in .stap__ico path,.stap.in .stap__ico circle,
.stap.in .stap__ico line,.stap.in .stap__ico rect,
.stap.in .stap__ico ellipse{stroke-dashoffset:0}
.stap p{color:var(--text-2);margin-top:11px;font-size:.98rem}
.stap::after{
  content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;
  border-radius:50%;background:var(--accent-muted);
  opacity:0;transition:opacity .6s var(--ease);
}
.stap:hover::after{opacity:1}

/* ---------- 10. Het interactieve moment: de postcodecheck ---------- */

.zonecheck{
  display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:1fr 1fr;align-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(24px,3.2vw,42px);
  box-shadow:var(--shadow-1);
}
@media (max-width:880px){ .zonecheck{grid-template-columns:1fr} }

.pcform{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.pcform input{
  flex:1 1 190px;min-width:0;
  padding:15px 18px;
  border-radius:100px;
  border:1.5px solid var(--line-strong);
  background:var(--canvas-2);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:.1em;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.pcform input::placeholder{color:var(--text-2);letter-spacing:.06em}
.pcform input:focus{outline:none;border-color:var(--accent);background:var(--panel)}

.pcuit{
  margin-top:22px;min-height:96px;
  border-top:1px solid var(--line);padding-top:20px;
}
.pcuit__leeg{color:var(--text-2);font-size:.94rem}
.pcuit__kaart{
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease-out) .15s, transform .55s var(--ease-out) .15s;
}
.pcuit.is-klaar .pcuit__kaart{opacity:1;transform:none}
.pcuit__naam{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:-.025em}
.pcuit__rij{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.pcuit__k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.pcuit__v{font-weight:600;font-size:1.06rem;margin-top:3px}
.pcuit.is-mis .pcuit__naam{color:var(--text-2)}

/* de kaart met de golf */
.kaart{
  aspect-ratio:5/4;width:100%;
  border-radius:var(--r-l);
  background:var(--panel-2);
  border:1px solid var(--line);
  overflow:hidden;position:relative;
}
.kaart svg{width:100%;height:100%;display:block}
.kaart .straat{stroke:var(--line-strong);stroke-width:.8;fill:none;opacity:.85}
.kaart .ring{stroke:var(--line-strong);stroke-width:.9;fill:none;opacity:.8;stroke-dasharray:2.5 3.5}
.kaart .zonevlak{
  fill:var(--accent);opacity:.04;
  transition:opacity .6s var(--ease);
}
.kaart .zonevlak.is-aan{opacity:.13}
:root[data-theme="dark"] .kaart .zonevlak{opacity:.05}
:root[data-theme="dark"] .kaart .zonevlak.is-aan{opacity:.24}
.kaart .basis-punt{fill:var(--accent)}
.kaart .basis-puls{
  fill:none;stroke:var(--accent);stroke-width:1;
  transform-origin:50px 50px;
  animation:kaartPuls 4.2s var(--ease) -1.4s infinite;
}
@keyframes kaartPuls{
  0%  {opacity:.75;transform:scale(.25)}
  70% {opacity:0;transform:scale(2.1)}
  100%{opacity:0;transform:scale(2.1)}
}
.kaart .golf{
  fill:none;stroke:var(--accent);stroke-width:1.4;
  transform-origin:50px 50px;
  opacity:0;
}
.kaart.is-golf .golf{animation:golfUit 1.15s var(--ease-out) forwards}
.kaart.is-golf .golf:nth-of-type(2){animation-delay:.11s}
.kaart.is-golf .golf:nth-of-type(3){animation-delay:.22s}
@keyframes golfUit{
  0%  {opacity:.9;transform:scale(.12)}
  100%{opacity:0;transform:scale(2.4)}
}
.kaart__label{
  position:absolute;left:14px;bottom:14px;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2);
}

/* ---------- 11. Recensies ---------- */

.reviews{
  display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.review{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-l);padding:28px 26px;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.review:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.review__ster{color:var(--accent);letter-spacing:.16em;font-size:.9rem}
.review blockquote{flex:1;margin:0}
.review p{margin-top:14px;font-size:1rem}
.review__wie{
  display:flex;align-items:baseline;gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);
}
.review__n{font-weight:600}
.review__w{font-size:.82rem;color:var(--text-2);margin-left:auto;font-family:var(--f-mono)}

/* ---------- 12. Bezorgzones ---------- */

.zones{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--panel)}
.zone{border-bottom:1px solid var(--line)}
.zone:last-child{border-bottom:0}
.zone__knop{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:19px clamp(16px,2.4vw,26px);text-align:left;
  transition:background .3s var(--ease);
}
.zone__knop:hover{background:var(--panel-2)}
.zone__naam{font-weight:600;flex:1;min-width:0}
.zone__cijfer{font-family:var(--f-mono);font-size:.86rem;color:var(--text-2);white-space:nowrap}
@media (max-width:640px){ .zone__cijfer.opt{display:none} }
.zone__pijl{
  width:15px;height:15px;flex:none;color:var(--text-2);
  transition:transform .45s var(--ease-out), color .3s var(--ease);
}
.zone__knop[aria-expanded="true"] .zone__pijl{transform:rotate(180deg);color:var(--accent)}
.zone__uit{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .48s var(--ease-out);
}
.zone__knop[aria-expanded="true"] + .zone__uit{grid-template-rows:1fr}
.zone__uit > div{overflow:hidden}
.zone__pcs{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 clamp(16px,2.4vw,26px) 20px;
}
.pc{
  font-family:var(--f-mono);font-size:.8rem;
  padding:5px 11px;border-radius:100px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);
}

/* ---------- 13. Openingstijden ---------- */

.uren{
  display:grid;gap:0;
  border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;background:var(--panel);
}
.uur{
  display:flex;align-items:center;gap:14px;
  padding:13px clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line);
  font-size:.96rem;
}
.uur:last-child{border-bottom:0}
.uur__d{flex:1}
.uur__t{font-family:var(--f-mono);font-size:.9rem;color:var(--text-2)}
.uur.is-nu{background:var(--accent-muted)}
.uur.is-nu .uur__d{font-weight:700}
.uur.is-nu .uur__t{color:var(--text)}
.uur.is-dicht .uur__t{color:var(--text-2);opacity:.7}

/* ---------- 14. Slotoproep en voettekst ---------- */

.slot{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(44px,7vw,88px) clamp(24px,5vw,68px);
  isolation:isolate;
}
.slot img{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.slot::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;
  background:linear-gradient(95deg, rgba(20,21,26,.86) 0%, rgba(20,21,26,.62) 52%, rgba(20,21,26,.30) 100%);
}
.slot h2{color:#fff;max-width:16ch}
.slot p{color:rgba(255,255,255,.9);max-width:44ch;margin-top:16px}
.slot .btn{margin-top:30px}

/* De voettekst is de donkere achterkant van de menukaart: inkt met goud.
   De tokens worden hier opnieuw gezet, dan kleurt alles eronder vanzelf mee
   en blijft het in het donkere thema precies hetzelfde. */
.foot{
  --panel:#2C2E35;
  --panel-2:#35373F;
  --line:rgba(196,163,106,.20);
  --line-strong:rgba(196,163,106,.34);
  --text:#EFE9DA;
  --text-2:#A7A49E;
  --accent:#D09071;
  --accent-muted:rgba(208,144,113,.16);
  --gold:#C4A36A;
  --gold-line:#C4A36A;
  background:#2C2E35;
  color:var(--text);
  border-top:1px solid rgba(196,163,106,.28);
  margin-top:clamp(50px,7vw,90px);
  padding-block:clamp(44px,5.5vw,72px) 28px;
}
.foot__grid{
  display:grid;gap:clamp(26px,4vw,48px);
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
}
@media (max-width:860px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__grid{grid-template-columns:1fr} }
.foot h4{
  font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:14px;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:var(--text-2);transition:color .3s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot__p{color:var(--text-2);font-size:.95rem;margin-top:14px;max-width:34ch}
.foot__eind-rechts{margin-left:auto}
@media (max-width:560px){ .foot__eind-rechts{margin-left:0} }
.foot__eind{
  margin-top:clamp(30px,4vw,48px);padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:.84rem;color:var(--text-2);
}
/* Het blokje van YTDigital onderaan: het eigen paars van het merk, klein
   gehouden zodat het naast Sera staat en er niet overheen. */
.ytd{
  display:flex;align-items:flex-start;gap:13px;
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);
  max-width:34ch;
}
.ytd__mark{width:34px;height:34px;flex:none;border-radius:10px}
.ytd__letters{
  font-family:var(--f-body);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;fill:#C9BCE8;
}
.ytd__k{
  display:block;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);
}
.ytd__n{
  display:inline-block;margin-top:3px;
  font-family:var(--f-display);font-weight:700;font-size:1.06rem;
  letter-spacing:.01em;color:var(--text);
  transition:color .3s var(--ease);
}
.ytd__n:hover{color:#A698C4}
.ytd__p{font-size:.84rem;color:var(--text-2);margin-top:5px;line-height:1.45}
/* ---------- Tekstpagina's: voorwaarden, privacy, allergenen ---------- */

.tekstpagina{max-width:74ch}
.tekstpagina h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-top:16px}
.tekstpagina .lede{margin-top:18px}
.tekstpagina h2{
  font-size:clamp(1.2rem,2.1vw,1.55rem);
  margin:clamp(30px,3.6vw,46px) 0 12px;
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);
}
.tekstpagina p{margin-bottom:14px;color:var(--text-2)}
.tekstpagina p strong,.tekstpagina li strong{color:var(--text)}
.tekstpagina a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tekstpagina ul{margin:0 0 16px;padding-left:20px;color:var(--text-2)}
.tekstpagina li{margin-bottom:7px}
.tekstpagina ul.kolommen{
  columns:2;column-gap:34px;list-style:none;padding-left:0;
}
.tekstpagina ul.kolommen li{
  break-inside:avoid;padding-left:20px;position:relative;
}
.tekstpagina ul.kolommen li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--gold-line);transform:rotate(45deg);
}
@media (max-width:560px){ .tekstpagina ul.kolommen{columns:1} }

.tabel{
  width:100%;border-collapse:collapse;margin:0 0 18px;
  font-size:.94rem;
}
.tabel th,.tabel td{
  text-align:left;vertical-align:top;
  padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line);
}
.tabel th{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);font-weight:500;
}
.tabel td{color:var(--text-2)}
.tabel tbody tr:last-child td{border-bottom:0}

/* alles wat de ondernemer zelf nog moet invullen, springt eruit */
.invullen{
  background:var(--accent-muted);
  color:var(--accent);
  font-family:var(--f-mono);font-size:.82em;
  padding:2px 7px;border-radius:6px;
  border:1px dashed var(--accent);
}
.letop{
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-left:4px solid var(--accent);
  border-radius:var(--r-m);
  padding:16px 20px;margin:26px 0;
  color:var(--text-2);
}
.letop strong{color:var(--text)}
.tekstpagina__datum,.tekstpagina__noot{font-size:.88rem;color:var(--text-2)}
.tekstpagina__terug{margin-top:clamp(34px,4vw,52px)}

/* melding boven een afrekenstap als er iets niet klopt of misgaat */
.betaalfout{
  background:var(--accent-muted);
  border:1px solid var(--accent);
  border-radius:var(--r-m);
  padding:13px 16px;
  font-size:.92rem;
  color:var(--text);
  margin-bottom:18px;
}
/* het veld waar de melding over gaat: rand en cursor erin, zodat duidelijk is
   waaróm het venster terugsprong */
.formveld input.is-mis,
.formveld textarea.is-mis{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-muted);
}

/* een betaalblok zonder keuze, voor als er maar één manier is */
.betaal.is-enige{cursor:default;border-color:var(--accent);background:var(--accent-muted)}

.ytd__credit{color:var(--text-2);transition:color .3s var(--ease)}
.ytd__credit:hover{color:#A698C4}

/* ---------- 15. Bestelpagina ---------- */

.shop{
  display:grid;
  grid-template-columns:minmax(0,1fr) 372px;
  gap:clamp(20px,2.6vw,38px);
  align-items:start;
  padding-block:clamp(20px,3vw,34px) clamp(50px,7vw,90px);
}
.shop > *{min-width:0}
@media (max-width:1040px){ .shop{grid-template-columns:minmax(0,1fr)} }

.winkelkop{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:clamp(18px,2.4vw,28px);
  box-shadow:var(--shadow-1);
}
.winkelkop img{width:100%;height:clamp(150px,22vw,238px);object-fit:cover;object-position:50% 58%}
.winkelkop::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(to top, rgba(20,21,26,.80), rgba(20,21,26,.16) 62%);
}
.winkelkop__tekst{
  position:absolute;left:clamp(18px,3vw,34px);bottom:clamp(16px,2.6vw,26px);right:20px;z-index:2;
}
.winkelkop__tekst h1{
  font-size:clamp(1.7rem,3.6vw,2.7rem);color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.winkelkop__tekst p{color:rgba(255,255,255,.9);margin-top:6px;font-size:.98rem}

.zoekbalk{position:relative;margin-bottom:16px}
.zoekbalk svg{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--text-2);pointer-events:none;
}
.zoekbalk input{
  width:100%;padding:15px 18px 15px 46px;
  border-radius:100px;border:1.5px solid var(--line);
  background:var(--panel);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.zoekbalk input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}

.catbalk{
  position:sticky;top:var(--nav-h);z-index:40;
  background:var(--canvas);                       /* terugval: oudere browsers */
  background:color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.catbalk.is-stuck{border-bottom-color:var(--line)}
.catbalk__scroll{
  display:flex;gap:6px;overflow-x:auto;
  padding-block:11px;padding-right:30px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
}
.catbalk__scroll::-webkit-scrollbar{display:none}
.cattab{
  flex:none;padding:9px 16px;border-radius:100px;
  font-size:.93rem;font-weight:500;color:var(--text-2);
  white-space:nowrap;position:relative;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.cattab:hover{color:var(--text);background:var(--panel-2)}
.cattab.is-nu{color:var(--accent-ink);background:var(--accent-btn)}

.catsec{padding-top:clamp(26px,4vw,44px);scroll-margin-top:calc(var(--nav-h) + 62px)}
.catsec__kop{
  display:flex;align-items:baseline;gap:14px;margin-bottom:20px;
}
.catsec__kop h2{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.catsec__n{font-family:var(--f-mono);font-size:.78rem;color:var(--text-2)}

.catsec__onder{
  color:var(--text-2);font-size:.94rem;margin:-10px 0 22px;max-width:62ch;
}

/* Sera werkt zonder productfoto's: de kaart leest als de papieren menukaart,
   met het nummer van het gerecht in goud en de prijs rechts. */
.kaartgrid{
  display:grid;gap:clamp(10px,1.3vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
}
.gerecht{
  display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:16px 18px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s var(--ease);
  position:relative;
}
.gerecht:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.gerecht__nr{
  flex:none;min-width:1.6em;padding-top:4px;
  font-size:.82rem;color:var(--gold);
}
.gerecht__body{flex:1;min-width:0;display:flex;flex-direction:column}
.gerecht__cat{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:4px;
}
.gerecht__n{
  font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:-.012em;
  line-height:1.25;
}
.gerecht__sub{font-family:var(--f-mono);font-size:.72rem;color:var(--text-2);margin-left:8px;font-weight:400}
.gerecht__d{
  font-size:.86rem;color:var(--text-2);margin-top:5px;line-height:1.45;
}
.gerecht__voet{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  padding-top:3px;
}
.gerecht__prijzen{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.gerecht__p{font-family:var(--f-mono);font-weight:500;font-size:1rem;color:var(--accent)}
.gerecht__p2{font-family:var(--f-mono);font-size:.74rem;color:var(--text-2);margin-top:2px}
.plus{
  margin-left:auto;width:38px;height:38px;border-radius:50%;
  background:var(--accent-btn);color:var(--accent-ink);
  display:grid;place-items:center;flex:none;
  transition:transform .45s var(--ease-out), background .3s var(--ease);
}
.plus svg{width:16px;height:16px}
.gerecht:hover .plus{transform:rotate(90deg) scale(1.06);background:var(--accent-btn-hover)}

.labels{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.label{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;border:1px solid currentColor;opacity:.9;
}
.is-pop{color:var(--accent)}
.is-veg{color:#56652F}
.is-hot{color:#98351A}
.is-huis{color:var(--gold)}
.is-nieuw{color:#2F6E8F}
:root[data-theme="dark"] .is-nieuw{color:#7FB8D6}
:root[data-theme="dark"] .is-veg{color:#A9BE7A}
:root[data-theme="dark"] .is-hot{color:#E08A68}

/* dranken als bewust andere lijst */
.drankenlijst{
  border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--panel);overflow:hidden;
}
.drank{
  display:flex;align-items:center;gap:14px;
  padding:15px clamp(16px,2vw,22px);
  border-bottom:1px solid var(--line);width:100%;text-align:left;
  transition:background .3s var(--ease);
}
.drank:last-child{border-bottom:0}
.drank:hover{background:var(--panel-2)}
.drank__nr{flex:none;min-width:1.6em;font-size:.8rem;color:var(--gold)}
.drank > span:nth-child(2){flex:1;min-width:0}
.drank__n{display:block;font-family:var(--f-display);font-weight:700;font-size:1.02rem}
.drank__s{display:block;font-size:.84rem;color:var(--text-2);margin-top:2px}
.drank__p{font-family:var(--f-mono);font-size:.96rem;flex:none}
.drank .plus{width:32px;height:32px;margin-left:0}
.drank .plus svg{width:14px;height:14px}

.geenres{
  padding:40px 24px;text-align:center;color:var(--text-2);
  border:1px dashed var(--line-strong);border-radius:var(--r-l);
}

/* ---------- 16. Winkelmandje ---------- */

.mandje{
  --greep-h:63px;
  position:sticky;top:calc(var(--nav-h) + 16px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--nav-h) - 34px);
}
.mandje__greep{
  display:none;align-items:center;gap:12px;height:var(--greep-h);flex:none;
  padding:0 22px;width:100%;text-align:left;border-bottom:1px solid var(--line);
}
.mandje__greep .mono{margin-left:auto}

/* Onder 1040px wordt het mandje een blad dat vanaf de onderkant omhoog komt.
   Deze regels staan bewust na de basisregels, anders wint display:none. */
@media (max-width:1040px){
  .mandje{
    position:fixed;top:auto;right:0;bottom:0;left:0;inset:auto 0 0 0;z-index:90;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:86vh;
    transform:translateY(calc(100% - var(--greep-h)));
    transition:transform .55s var(--ease-out);
    box-shadow:var(--shadow-3);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mandje.is-open{transform:translateY(0);overflow-y:auto;overscroll-behavior:contain}
  .mandje__greep{display:flex;position:sticky;top:0;z-index:2;background:var(--panel)}
  /* op een telefoon scrolt het hele blad, niet alleen de lijst erin,
     anders wordt de lijst tot een paar pixels platgedrukt.
     De dubbele klassenaam is nodig om van de basisregel te winnen. */
  .mandje .mandje__kop{display:none}   /* de greep zegt het al */
  .mandje .mandje__lijst{overflow:visible;flex:0 0 auto}
  .mandje .mandje__voet{position:sticky;bottom:0;z-index:2}
}

.mandje__kop{
  display:flex;align-items:center;gap:11px;
  padding:20px 22px 16px;
}
.mandje__kop h2{font-size:1.18rem;font-weight:700}
.mandje__kop svg{width:19px;height:19px;color:var(--accent)}

.modus{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 16px 14px}
.modus button{
  padding:12px 10px;border-radius:var(--r-m);
  border:1.5px solid var(--line);
  display:grid;gap:2px;text-align:center;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.modus button span{font-weight:600;font-size:.93rem;display:block}
.modus button small{font-family:var(--f-mono);font-size:.7rem;color:var(--text-2)}
.modus button.is-aan{border-color:var(--accent);background:var(--accent-muted);color:var(--accent)}
.modus button.is-aan small{color:var(--accent)}

.mandje__adres{padding:0 16px 14px}
.mandje__adres label{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);display:block;margin-bottom:7px;
}
.mandje__adres input{
  width:100%;padding:12px 15px;border-radius:var(--r-m);
  border:1.5px solid var(--line);background:var(--canvas-2);
  font-family:var(--f-mono);font-size:.92rem;
  transition:border-color .3s var(--ease);
}
.mandje__adres input:focus{outline:none;border-color:var(--accent)}
.mandje__zone{font-size:.82rem;margin-top:8px;color:var(--text-2);min-height:1.3em}
.mandje__zone.is-goed{color:var(--ok)}
.mandje__zone.is-mis{color:var(--accent)}

.mandje__lijst{
  flex:1;overflow-y:auto;padding:4px 16px;
  border-top:1px solid var(--line);
  scrollbar-width:thin;
}
.regel{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);
  animation:regelIn .45s var(--ease-out) both;
}
.regel:last-child{border-bottom:0}
@keyframes regelIn{
  from{opacity:0;transform:translateY(-8px)}
  to  {opacity:1;transform:none}
}
.regel.is-weg{animation:regelUit .32s var(--ease) forwards}
@keyframes regelUit{
  to{opacity:0;transform:translateX(20px)}
}
.regel__nr{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:.74rem;color:var(--gold);
  border:1px solid var(--gold-soft);background:var(--panel-2);
}
.regel__mid{flex:1;min-width:0}
.regel__n{font-weight:600;font-size:.93rem;line-height:1.3}
.regel__maat{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-top:3px;
}
.regel__x{font-size:.78rem;color:var(--text-2);margin-top:3px}
.regel__r{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.regel__p{font-family:var(--f-mono);font-size:.9rem}
.stapper{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:100px;padding:2px;
}
.stapper button{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.stapper button:hover{background:var(--accent-muted);color:var(--accent)}
.stapper span{
  font-family:var(--f-mono);font-size:.84rem;min-width:20px;text-align:center;
}
.stapper svg{width:12px;height:12px}

.mandje__leeg{
  padding:44px 24px;text-align:center;color:var(--text-2);
}
.mandje__leeg svg{width:42px;height:42px;color:var(--line-strong);margin:0 auto 14px}

.mandje__voet{border-top:1px solid var(--line);padding:16px 18px 18px;background:var(--panel-2)}
.som{display:flex;justify-content:space-between;font-size:.92rem;color:var(--text-2);padding-block:4px}
.som--eind{
  color:var(--text);font-weight:700;font-size:1.1rem;
  border-top:1px solid var(--line);margin-top:9px;padding-top:11px;
}
.som .mono{font-size:.95rem}
.som--eind .mono{font-size:1.1rem}

.minbalk{margin-bottom:12px}
.minbalk__spoor{height:5px;border-radius:100px;background:var(--line);overflow:hidden}
.minbalk__vul{
  height:100%;background:var(--accent);border-radius:100px;
  width:0;transition:width .6s var(--ease-out);
}
.minbalk__t{font-size:.8rem;color:var(--text-2);margin-top:7px}
.minbalk.is-vol .minbalk__vul{background:#2E9E5B}
.minbalk.is-vol .minbalk__t{color:var(--ok)}

.mandje__voet .btn{width:100%;margin-top:12px}

/* ---------- 17. Vensters ---------- */

.venster{
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:120;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);
  opacity:0;pointer-events:none;
  transition:opacity .38s var(--ease);
}
.venster.is-open{opacity:1;pointer-events:auto}
.venster__waas{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:rgba(20,21,26,.62);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.venster__doos{
  position:relative;
  width:min(560px,100%);
  max-height:min(88vh,860px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-3);
  transform:translateY(24px) scale(.97);
  transition:transform .5s var(--ease-out);
}
.venster.is-open .venster__doos{transform:none}
.venster--breed .venster__doos{width:min(660px,100%)}

.venster__sluit{
  position:absolute;right:14px;top:14px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:rgba(20,21,26,.5);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), transform .4s var(--ease-out);
}
.venster__sluit:hover{background:rgba(20,21,26,.78);transform:rotate(90deg)}
.venster__sluit svg{width:16px;height:16px}

.venster__scroll{overflow-y:auto;flex:1}
/* Geen foto boven het gerecht, maar de kop van de papieren kaart:
   het nummer in goud en de categorie waar het gerecht onder staat. */
.pvenster__kop{
  display:flex;align-items:center;gap:12px;
  padding:26px clamp(20px,3vw,30px) 0;
}
.pvenster__nr{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.82rem;color:var(--gold);
  border:1px solid var(--gold-soft);background:var(--panel-2);
}
.pvenster__cat{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);
}
.pvenster__body{padding:16px clamp(20px,3vw,30px) 8px}
.pvenster__body h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.pvenster__sub{font-family:var(--f-mono);font-size:.8rem;color:var(--text-2);margin-top:5px}
.pvenster__d{margin-top:14px;color:var(--text-2)}
.pvenster__all{
  margin-top:16px;font-size:.85rem;color:var(--text-2);
  padding:12px 15px;border-radius:var(--r-m);background:var(--panel-2);
  border:1px solid var(--line);
}
.pvenster__all b{color:var(--text);font-weight:600}

.opties{margin-top:22px}
.opties h3{font-size:1rem;font-weight:700;margin-bottom:11px}
.optie{
  display:flex;align-items:center;gap:12px;
  padding:12px 15px;border-radius:var(--r-m);
  border:1.5px solid var(--line);margin-bottom:8px;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.optie:hover{border-color:var(--line-strong)}
/* .is-aan wordt door de JS gezet; :has() blijft staan voor browsers die het
   kennen, maar Firefox onder 121 en Safari onder 15.4 hebben de klasse nodig. */
.optie.is-aan,
.optie:has(input:checked){border-color:var(--accent);background:var(--accent-muted)}
.optie input{
  appearance:none;width:20px;height:20px;flex:none;
  border:1.5px solid var(--line-strong);border-radius:6px;
  position:relative;cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.optie input:checked{background:var(--accent-btn);border-color:var(--accent-btn)}
.optie input:checked::after{
  content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--accent-ink);
  border-width:0 2px 2px 0;transform:rotate(42deg);
}
.optie__n{flex:1;font-size:.95rem}
.optie__p{font-family:var(--f-mono);font-size:.88rem;color:var(--text-2);white-space:nowrap}

/* Vijftien toppings in één kolom wordt een lange trap, dus twee kolommen
   zodra er ruimte voor is. */
.optiegrid{
  display:grid;gap:0 10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
}
.optiegrid .optie{margin-bottom:8px}

/* De maatkeuze is een radio: rond bolletje in plaats van een vinkje. */
.opties--maat{margin-top:20px}
.optie--maat input{border-radius:50%}
.optie--maat input:checked::after{
  content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;border:0;border-radius:50%;
  background:var(--accent-ink);transform:translate(-50%,-50%) rotate(0deg);
}
.optie--maat .optie__p{color:var(--text);font-weight:500}

.pvenster__voet{
  padding:18px clamp(20px,3vw,30px);
  border-top:1px solid var(--line);
  background:var(--panel-2);
  display:flex;gap:12px;align-items:center;
}
.pvenster__voet .stapper{padding:5px;border-color:var(--line-strong)}
.pvenster__voet .stapper button{width:32px;height:32px}
.pvenster__voet .btn{flex:1}

/* ---------- 18. Afrekenen ---------- */

.stapbalk{
  display:flex;gap:0;padding:22px 64px 6px clamp(20px,3vw,30px);
}
.stapbalk__s{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.stapbalk__b{
  width:26px;height:26px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-strong);color:var(--text-2);
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.74rem;
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.stapbalk__t{font-size:.84rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stapbalk__s.is-nu .stapbalk__b{background:var(--accent-btn);border-color:var(--accent-btn);color:var(--accent-ink)}
.stapbalk__s.is-nu .stapbalk__t{color:var(--text);font-weight:600}
.stapbalk__s.is-klaar .stapbalk__b{background:#2E9E5B;border-color:#2E9E5B;color:#fff}
.stapbalk__lijn{
  flex:1;height:1.5px;background:var(--line);margin-inline:8px;min-width:12px;
  position:relative;overflow:hidden;
}
.stapbalk__lijn::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.stapbalk__lijn.is-vol::after{transform:scaleX(1)}

.formveld{margin-bottom:14px}
.formveld label{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);display:block;margin-bottom:7px;
}
.formveld input,.formveld textarea,.formveld select{
  width:100%;padding:13px 16px;border-radius:var(--r-m);
  border:1.5px solid var(--line);background:var(--canvas-2);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.formveld input:focus,.formveld textarea:focus,.formveld select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted);
}
.formveld textarea{min-height:82px;resize:vertical}
.formhint{margin:-6px 0 14px;font-size:.88rem;color:var(--text-2)}
.formrij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){ .formrij{grid-template-columns:1fr} }

.betaalkeuze{display:grid;gap:8px}
.betaal{
  display:flex;align-items:center;gap:13px;
  padding:15px 17px;border-radius:var(--r-m);
  border:1.5px solid var(--line);cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.betaal.is-aan,
.betaal:has(input:checked){border-color:var(--accent);background:var(--accent-muted)}
.betaal input{
  appearance:none;width:19px;height:19px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-strong);position:relative;cursor:pointer;
  transition:border-color .25s var(--ease);
}
.betaal input:checked{border-color:var(--accent)}
.betaal input:checked::after{
  content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;inset:4px;border-radius:50%;background:var(--accent);
}
.betaal > span:not([class]){flex:1;min-width:0}
.betaal__n{display:block;font-weight:600;font-size:.96rem}
.betaal__s{display:block;font-size:.8rem;color:var(--text-2);margin-top:2px}
.betaal__logo{flex:none;font-family:var(--f-mono);font-size:.7rem;color:var(--text-2)}

.noot{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;padding:13px 16px;
  border-radius:var(--r-m);background:var(--panel-2);border:1px solid var(--line);
  font-size:.83rem;color:var(--text-2);
}
.noot svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}

.gelukt{padding:clamp(30px,5vw,52px) clamp(22px,3vw,34px);text-align:center}
.vinkje{width:74px;height:74px;margin:0 auto 22px;color:var(--ok)}
.vinkje circle{
  fill:none;stroke:currentColor;stroke-width:4;
  stroke-dasharray:207;stroke-dashoffset:207;
  animation:tekenCirkel .8s var(--ease-out) forwards;
}
.vinkje path{
  fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:44;stroke-dashoffset:44;
  animation:tekenVink .45s var(--ease-out) .6s forwards;
}
@keyframes tekenCirkel{to{stroke-dashoffset:0}}
@keyframes tekenVink{to{stroke-dashoffset:0}}
.gelukt h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.gelukt p{color:var(--text-2);margin-top:12px;max-width:44ch;margin-inline:auto}

.volgen{margin-top:30px;text-align:left;display:grid;gap:0}
.volgstap{
  display:flex;gap:15px;align-items:flex-start;
  padding-bottom:22px;position:relative;
}
.volgstap:last-child{padding-bottom:0}
.volgstap::before{
  content:"";position:absolute;left:12px;top:26px;bottom:0;width:1.5px;
  background:var(--line);
}
.volgstap:last-child::before{display:none}
.volgstap__b{
  width:25px;height:25px;border-radius:50%;flex:none;z-index:1;
  border:1.5px solid var(--line-strong);background:var(--panel);
  display:grid;place-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.volgstap__b svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .4s var(--ease)}
.volgstap.is-klaar .volgstap__b{background:#2E9E5B;border-color:#2E9E5B}
.volgstap.is-klaar .volgstap__b svg{opacity:1}
.volgstap.is-nu .volgstap__b{border-color:var(--accent)}
.volgstap.is-nu .volgstap__b::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);
  animation:pulse2 1.8s var(--ease) infinite;
}
@keyframes pulse2{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(.6);opacity:.5}
}
.volgstap > span:not([class]){flex:1;min-width:0}
.volgstap__n{display:block;font-weight:600;font-size:.97rem;color:var(--text-2);transition:color .5s var(--ease)}
.volgstap.is-klaar .volgstap__n,.volgstap.is-nu .volgstap__n{color:var(--text)}
.volgstap__t{display:block;font-size:.83rem;color:var(--text-2);margin-top:2px;font-family:var(--f-mono)}

/* ---------- 19. Entrees ---------- */

.rv{
  opacity:0;transform:translateY(22px);
  transition:opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay:calc(var(--i,0) * 85ms);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none}
.rv.in.klaar{
  transition-delay:0s !important;
  will-change:auto;
}

.tel-op{opacity:0;transition:opacity .5s var(--ease)}
.tel-op.in{opacity:1}

/* ---------- 20. Pauzeren en minder beweging ---------- */

body.paused *,
body.paused *::before,
body.paused *::after{animation-play-state:paused !important}

@media (max-height:560px){
  .stof,.env__glow{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .rv{opacity:1;transform:none}
  .rail__band{animation:none;transform:none}
  .rail-line path{stroke-dashoffset:0}
  .scheiding__ruit{opacity:.95;transform:rotate(45deg) scale(1);transition:none}
  .stap__ico path,.stap__ico circle,.stap__ico line,.stap__ico rect{stroke-dashoffset:0}
  .vinkje circle,.vinkje path{stroke-dashoffset:0}
  .pcuit__kaart{opacity:1;transform:none}
  .venster__doos{transform:none}
  .stof,.env__glow,.env__grain{display:none}
  .an-scatter .c,.an-rise .w,.an-punch .w{opacity:1;transform:none}
  .hero__cta{opacity:1;transform:none}
  .cue svg{animation:none}
}

html.geen-beweging .rail__band{animation:none;transform:none}
html.geen-beweging .rv{opacity:1;transform:none;transition:none}
html.geen-beweging .rail-line path{stroke-dashoffset:0}
html.geen-beweging .scheiding__ruit{opacity:.95;transform:rotate(45deg) scale(1);transition:none}
html.geen-beweging .stap__ico path,
html.geen-beweging .stap__ico circle,
html.geen-beweging .stap__ico line,
html.geen-beweging .stap__ico rect{stroke-dashoffset:0}
html.geen-beweging .an-scatter .c,
html.geen-beweging .an-rise .w,
html.geen-beweging .an-punch .w,
html.geen-beweging .hero__cta{opacity:1 !important;transform:none !important}
html.geen-beweging .stof,
html.geen-beweging .env__glow{display:none}
html.geen-beweging .cue svg{animation:none}

/* ---------- 21. Kleine schermen ---------- */

/* Op een aanraakscherm moet je alles met een duim kunnen raken: 44 bij 44
   is de ondergrens. De sluitknop, de merknaam en de rijtjes in de voettekst
   bleven daaronder. */
@media (pointer:coarse){
  .venster__sluit{width:44px;height:44px}
  .brand{min-height:44px}
  .foot ul{gap:2px}
  .foot li{display:flex}
  .foot li a{display:block;padding-block:9px}
  .foot li:not(:has(a)){padding-block:9px}
  .ytd__n,.ytd__credit{display:inline-block;padding-block:11px}
}

/* "Restaurant & Grill · Nijverdal" onder de naam is te breed voor een telefoon:
   dan duwt het merk het mandje van het scherm af. */
@media (max-width:520px){
  .brand__sub{display:none}
  .brand__name{font-size:1.16rem}
}

@media (max-width:640px){
  body{font-size:16px}
  .stage{min-height:76vh}
  .poster{background-position:56% 54%}
  .gerecht{padding:14px 15px;gap:12px}
  .gerecht__n{font-size:1.04rem}
  .feit{padding:20px 18px}
  .tel{gap:22px}
}
/* een lage desktopvensterrand houdt de scrub, maar de kleine overlays passen er niet */
@media (max-height:560px){
  .cue{display:none}
}
@media (max-width:1040px){
  main.shop{padding-bottom:110px}
}