/* extra stijl voor menu- en reservatiepagina (komt bovenop stijl.css) */
body.sub{background:var(--bg)}
.subkop{padding:calc(110px + env(safe-area-inset-top)) 0 34px;background:radial-gradient(90% 80% at 50% 0%,rgba(217,160,91,.2),transparent 70%),var(--bg);text-align:center}
.subkop h1{font-size:clamp(2.8rem,12vw,5.5rem);margin:6px 0 12px}
.subkop .lead{margin:0 auto}

/* menukaart */
.cats{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:30;background:rgba(18,14,11,.96);border-bottom:1px solid var(--line)}
.cats ul{list-style:none;margin:0 auto;padding:10px 18px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;width:min(1120px,100%)}
.cats ul::-webkit-scrollbar{display:none}
.cats a{display:block;white-space:nowrap;padding:10px 16px;border:1px solid var(--line);text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);background:var(--panel)}
.cats a.act{color:#1a1209;background:var(--amber);border-color:var(--amber)}
.cat{padding:clamp(44px,8vw,80px) 0 0;scroll-margin-top:130px}
.cat>.wrap>h2{font-size:clamp(2rem,8vw,3.2rem);margin-bottom:6px}
.cat .opm{color:var(--mute);margin:0 0 22px;font-size:.95rem}
.gerechten{display:grid;gap:0}
.gerecht{display:grid;grid-template-columns:1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.gerecht.foto{grid-template-columns:96px 1fr}
.gerecht .tn{width:96px;height:96px;overflow:hidden;background:var(--panel)}
.gerecht .tn img{width:100%;height:100%;object-fit:cover}
.gerecht h3{font-size:1.3rem;display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-family:var(--serif)}
.gerecht h3 span{font-family:var(--sans);font-size:1.02rem;color:var(--amber2);font-weight:700;white-space:nowrap}
.gerecht p{margin:6px 0 0;color:var(--mute);font-size:.96rem}
.varianten{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:0}
.varianten li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px dashed var(--line);color:var(--ink)}
.varianten b{color:var(--amber2);font-weight:700}
.chef{display:inline-block;margin-left:8px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);padding:2px 6px;vertical-align:middle;font-family:var(--sans)}
.sugg{margin:30px 0 0;padding:20px;border:1px dashed var(--amber);background:rgba(217,160,91,.07);color:var(--mute);font-size:.94rem}
.sugg b{color:var(--ink)}
.menuvoet{margin:44px 0 0;padding:24px 0;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
@media(min-width:860px){.gerechten{grid-template-columns:1fr 1fr;column-gap:60px}.gerecht.foto{grid-template-columns:110px 1fr}.gerecht .tn{width:110px;height:110px}}

/* reservatie */
.stappen{display:flex;gap:6px;margin:0 0 26px;padding:0;list-style:none}
.stappen li{flex:1;height:4px;background:var(--line);transition:background .3s}
.stappen li.klaar,.stappen li.act{background:var(--amber)}
.rwrap{width:min(100% - 36px,640px);margin:0 auto;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
.stap{display:none;animation:in .5s ease}
.stap.act{display:block}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stap h2{font-size:clamp(1.8rem,7vw,2.6rem);margin:0 0 6px}
.stap .lead{margin:0 0 22px}
.personen{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 0 26px;padding:18px;border:1px solid var(--line);background:var(--panel)}
.personen button{width:56px;height:56px;border-radius:50%;border:1px solid var(--amber);background:transparent;color:var(--amber2);font-size:1.7rem;cursor:pointer;line-height:1}
.personen button:disabled{opacity:.35;cursor:default}
.personen output{font-family:var(--serif);font-size:3rem;min-width:2.4ch;text-align:center;line-height:1}
.personen small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.groepmelding{margin:0 0 20px;padding:16px;border:1px solid var(--amber);background:rgba(217,160,91,.1);display:none}
.groepmelding.aan{display:block}
.groepmelding a{color:var(--amber2)}
.dagen{display:flex;gap:8px;overflow-x:auto;padding:0 0 8px;margin:0 -18px 6px;padding-inline:18px;scroll-snap-type:x proximity;scrollbar-width:none}
.dagen::-webkit-scrollbar{display:none}
.dag{flex:0 0 74px;scroll-snap-align:start;padding:12px 0;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-family:var(--sans);text-align:center}
.dag small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dag b{display:block;font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.1}
.dag em{display:block;font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.dag[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1a1209}
.dag[aria-pressed="true"] small,.dag[aria-pressed="true"] em{color:#3a2a14}
.zonekaart{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:18px;margin:0 0 10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;font-family:var(--sans)}
.zonekaart h3{font-size:1.4rem}.zonekaart small{display:block;color:var(--mute);margin-top:3px;font-size:.88rem}
.zonekaart[aria-pressed="true"]{border-color:var(--amber);background:rgba(217,160,91,.12)}
.zonekaart[aria-pressed="true"]::after{content:"✓";font-size:1.4rem;color:var(--amber2)}
.zonekaart[disabled]{opacity:.55;cursor:default}
.uurblok{margin:0 0 18px}
.uurblok h3{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);font-family:var(--sans);font-weight:700;margin:0 0 10px}
.uren-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.uur{padding:15px 0;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:500 1.05rem var(--sans);cursor:pointer}
.uur[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1a1209;font-weight:700}
.rveld{display:grid;gap:6px;margin:0 0 14px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.rveld input,.rveld textarea{width:100%;min-height:54px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font:400 1.05rem var(--sans);letter-spacing:0;text-transform:none;border-radius:0}
.rveld textarea{min-height:90px;resize:vertical}
.rveld input:focus,.rveld textarea:focus{outline:none;border-color:var(--amber)}
.rveld .fout{color:#e49a8e;font-size:.8rem;text-transform:none;letter-spacing:0;min-height:1.2em}
.nav2{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(18,14,11,.96);border-top:1px solid var(--line)}
.nav2 .knop{flex:1}
.nav2 .terug{flex:0 0 auto;min-width:56px}
.nav2 .knop[disabled]{opacity:.4;pointer-events:none}
.samen{padding:22px;border:1px solid var(--amber);background:linear-gradient(135deg,#2b1e13,#17110d);margin:0 0 18px}
.samen dl{margin:0;display:grid;gap:10px}
.samen dl div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.samen dt{color:var(--mute)}.samen dd{margin:0;text-align:right}
.klaarkop{text-align:center;margin:0 0 22px}
.klaarkop .vink{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;border:2px solid var(--ok);color:var(--ok);font-size:2.2rem;margin-bottom:14px;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.agenda{display:grid;gap:10px;margin:0 0 18px}
.agenda .knop{width:100%}
.demonoot{padding:14px 16px;border:1px dashed var(--line);color:var(--mute);font-size:.85rem;margin:0 0 18px}
@media(min-width:700px){.nav2{position:static;background:none;border:0;padding:20px 0 0}.rwrap{padding-bottom:60px}}