/* Basis-stylesheet van de engine. Alle kleuren/fonts komen uit tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg, #111);
  color: var(--schuim, #eee);
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-display, serif); line-height: 1.15; margin: 0 0 .5rem; }
a { color: var(--koper-licht, #e0995f); }
.wrap { width: 100%; max-width: var(--maxw, 1080px); margin-inline: auto; padding-inline: 1.25rem; }

.skelet-hero { min-height: 60vh; display: flex; align-items: center; }
.skelet-hero .eyebrow { color: var(--koper, #c97c45); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .75rem; }
.skelet-hero h1 { font-size: clamp(2.2rem, 7vw, 4rem); color: var(--schuim, #f2e7d7); }
.skelet-hero p { color: var(--schuim-dim, #bca98f); font-size: 1.1rem; max-width: 48ch; }
.skelet-noot { margin-top: 2rem; padding: .8rem 1rem; border: 1px dashed var(--koper, #c97c45); border-radius: var(--radius, 14px); color: var(--schuim-dim, #bca98f); font-size: .85rem; display: inline-block; }

/* ---------- chrome ---------- */
.site-kop { border-bottom: 1px solid var(--surface2); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); z-index: 20; }
.site-kop-in { display: flex; align-items: center; justify-content: space-between; padding-block: .8rem; }
.merk { font-family: var(--font-display); font-size: 1.25rem; color: var(--schuim); text-decoration: none; }
.merk-logo { display: block; height: 40px; width: auto; }
/* QR-aan-tafel-brug: knop onderaan de publieke site die naar de bestel-app linkt */
.tafel-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; text-align: center; text-decoration: none; font-weight: 600; background: var(--koper); color: #1a120b; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.3); }
.tafel-cta-bar:hover { background: var(--koper-licht); }
html.heeft-tafel-cta body { padding-bottom: 4.5rem; }
/* promo-balk bovenaan + pop-up */
.promo-balk { background: var(--koper); color: #1a120b; text-align: center; font-size: .9rem; padding: .5rem 1rem; }
.promo-balk a { color: #1a120b; text-decoration: underline; font-weight: 600; }
.popup-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.popup { position: relative; background: var(--surface); border: 1px solid var(--koper); border-radius: var(--radius); padding: 1.6rem; max-width: 380px; text-align: center; }
.popup-eyebrow { display: block; color: var(--goud); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; margin-bottom: .3rem; }
.popup h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.popup p { color: var(--schuim-dim); margin: 0 0 1rem; }
.popup-x { position: absolute; top: .4rem; right: .6rem; background: none; border: 0; color: var(--schuim-dim); font-size: 1.4rem; cursor: pointer; }
.hoofdnav a { color: var(--schuim-dim); text-decoration: none; margin-left: 1.25rem; }
.hoofdnav a:hover { color: var(--koper-licht); }
.site-voet { border-top: 1px solid var(--surface2); margin-top: 3rem; padding-block: 2rem; color: var(--schuim-dim); font-size: .9rem; }
.kruimels { font-size: .85rem; color: var(--schuim-dim); padding-block: 1rem; }
.kruimels a { color: var(--schuim-dim); } .kruimels span { margin: 0 .4rem; opacity: .5; }

/* ---------- knoppen ---------- */
.btn { display: inline-block; padding: .7rem 1.2rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.btn-vol { background: var(--koper); color: #1a120b; }
.btn-vol:hover { background: var(--koper-licht); }
.btn-lijn { border: 1px solid var(--koper); color: var(--koper-licht); }

/* ---------- home ---------- */
.home-hero { padding: 4rem 0 2rem; }
.home-hero h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); color: var(--schuim); }
.home-hero .lead { color: var(--schuim-dim); font-size: 1.15rem; max-width: 46ch; }
.home-menu { padding: 1rem 0 2rem; }
.home-tegels { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cat-tegel { position: relative; display: flex; align-items: flex-end; min-height: 130px; border-radius: var(--radius); overflow: hidden; background: var(--surface2); text-decoration: none; color: var(--schuim); }
.cat-tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cat-tegel span { position: relative; padding: .8rem 1rem; font-family: var(--font-display); font-size: 1.1rem; background: linear-gradient(transparent, rgba(0,0,0,.6)); width: 100%; }

/* ---------- menu hub + categorie ---------- */
.menu-hub h1, .cat-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.menu-groep { margin: 2.5rem 0; }
.menu-groep > h2 { color: var(--koper-licht); border-bottom: 1px solid var(--surface2); padding-bottom: .4rem; }
.cat-sectie { margin: 1.5rem 0 2rem; }
.cat-kop h3 a { color: var(--schuim); text-decoration: none; }
.cat-kop h3 a:hover { color: var(--koper-licht); }
.kaart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: .8rem; }
.item-kaart { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.item-kaart:hover { transform: translateY(-2px); border-color: var(--koper); }
.kaart-foto { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--surface2); }
.kaart-foto-leeg { display: block; }
.kaart-body { padding: .8rem .9rem 1rem; }
.prijsregel { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.kaart-titel { font-family: var(--font-display); font-size: 1.05rem; color: var(--schuim); }
.prijs { color: var(--goud); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prijs.groot { font-size: 1.5rem; }
.varianten { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; max-width: 22rem; }
.varianten li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--surface2); padding-bottom: .2rem; }
.varianten .prijs { font-weight: 600; }
.opties { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--schuim-dim); }
.opties .meer { color: var(--goud); }
.kort { color: var(--schuim-dim); font-size: .9rem; margin: .4rem 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--surface2); color: var(--schuim-dim); }
.tag-signature { border-color: var(--goud); color: var(--goud); }
.tag-vegetarisch { border-color: var(--munt); color: var(--munt); }
.cat-hero { position: relative; padding: 3rem 0; margin-bottom: 1rem; }
.cat-hero.heeft-foto { padding: 5rem 0; }
.cat-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.cat-hero .wrap { position: relative; }
.cat-intro { max-width: 60ch; margin: 0 0 1.6rem; color: var(--schuim-dim, #c8bdab); font-size: 1.05rem; line-height: 1.6; }
.cat-cta { margin: 2rem 0; }

/* ---------- item-pagina ---------- */
.pdp-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin: 1rem 0 2rem; }
.pdp-visual .kaart-foto { aspect-ratio: 4/3; border-radius: var(--radius); }
.pdp-info h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pdp-info .eyebrow a { color: var(--koper); text-decoration: none; }
.pdp-cta { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
.pdp-tabs { max-width: 70ch; }
.pdp-tab { border-top: 1px solid var(--surface2); }
.pdp-tab summary { cursor: pointer; padding: .9rem 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--koper-licht); }
.pdp-paneel { padding: 0 0 1rem; color: var(--schuim-dim); }
.pdp-paneel a { color: var(--koper-licht); }
.past-bij { list-style: none; padding: 0; }
@media (max-width: 640px) { .pdp-kop { grid-template-columns: 1fr; } }

/* ---------- /ober command center ---------- */
.ober { max-width: 1000px; margin-inline: auto; padding: 1.25rem; }
.ober-login { max-width: 340px; margin: 4rem auto; display: flex; flex-direction: column; gap: .8rem; }
.ober-login input { padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid var(--surface2); background: var(--surface); color: var(--schuim); }
.ober-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.conn { font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; }
.conn.ok { color: var(--munt); } .conn.fout { color: var(--error); }
.ober-calls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ober-calls h2 { width: 100%; font-size: 1rem; color: var(--koper-licht); }
.call { display: flex; align-items: center; gap: .6rem; background: var(--surface2); border: 1px solid var(--goud); border-radius: var(--radius); padding: .4rem .7rem; }
.ober-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lane-wrap h2 { font-size: 1.1rem; color: var(--koper-licht); border-bottom: 1px solid var(--surface2); padding-bottom: .3rem; }
.lane { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.bon { background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .7rem .9rem; }
.bon-kop { display: flex; justify-content: space-between; }
.bon-meta { color: var(--schuim-dim); font-size: .85rem; margin: .2rem 0 .5rem; }
.btn.klein { padding: .35rem .7rem; font-size: .85rem; }
.leeg { color: var(--schuim-dim); font-size: .9rem; }
.fout { color: var(--error); font-size: .9rem; }
@media (max-width: 640px) { .ober-lanes { grid-template-columns: 1fr; } }

/* ---------- online bestellen ---------- */
.ob-app { padding: 1.5rem 0 3rem; }
.ob-grid { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; }
.ob-menu .ob-cat { margin-bottom: 1.5rem; }
.ob-menu h3 { color: var(--koper-licht); border-bottom: 1px solid var(--surface2); padding-bottom: .3rem; }
.ob-items { display: grid; gap: .6rem; margin-top: .7rem; }
.ob-item { display: grid; grid-template-columns: 54px 1fr auto; gap: .7rem; align-items: center; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .5rem .7rem; cursor: pointer; transition: border-color .15s ease, transform .08s ease; }
.ob-item:hover { border-color: var(--koper); }
.ob-item:active { transform: scale(.995); }
.ob-item:focus-visible { outline: 2px solid var(--koper-licht); outline-offset: 2px; }
.ob-item img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.ob-item-desc { margin: .15rem 0 0; font-size: .8rem; line-height: 1.35; color: var(--schuim-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob-mandje { position: sticky; top: 80px; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: 1rem; }
.modus-rij { display: flex; gap: .5rem; margin: .6rem 0; }
.modus-btn { flex: 1; padding: .5rem; border-radius: var(--radius); border: 1px solid var(--surface2); background: transparent; color: var(--schuim-dim); cursor: pointer; }
.modus-btn.actief { background: var(--koper); color: #1a120b; border-color: var(--koper); }
.ob-cart { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }
.cart-rij { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; font-size: .9rem; }
.qty { display: inline-flex; align-items: center; gap: .5rem; }
.qty button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--surface2); background: var(--surface2); color: var(--schuim); cursor: pointer; }
.ob-totaal { border-top: 1px solid var(--surface2); padding-top: .6rem; margin-bottom: .8rem; }
.tot-rij { display: flex; justify-content: space-between; }
.tot-rij.groot { font-size: 1.1rem; font-weight: 600; margin-top: .3rem; }
.ob-min { color: var(--error); font-size: .82rem; margin-top: .4rem; }
.ob-form { display: flex; flex-direction: column; gap: .5rem; }
.ob-form input, .ob-form textarea, .ob-form select { padding: .6rem .7rem; border-radius: var(--radius); border: 1px solid var(--surface2); background: var(--bg); color: var(--schuim); }
.ob-betaal { display: flex; align-items: center; gap: .5rem; color: var(--schuim-dim); font-size: .9rem; }
.ob-betaal-noot { font-size: .8rem; color: var(--schuim-dim); }
.ob-bevestig { text-align: center; padding: 4rem 0; }
@media (max-width: 760px) { .ob-grid { grid-template-columns: 1fr; } .ob-mandje { position: static; } }

/* ---------- QR-tafel-module ---------- */
.tafel-leeg { text-align: center; padding: 5rem 0; }
.tafel { max-width: 1040px; margin-inline: auto; padding: 0 clamp(.7rem, 3vw, 2rem) 6rem; }
.tafel-kop { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); }
.tafel-nr { font-family: var(--font-display); font-size: 1.2rem; color: var(--koper-licht); }
.tafel-acties { display: flex; gap: .5rem; }
.tafel-status { margin: .5rem 0 1rem; }
.tafel-status-kop { display: flex; justify-content: space-between; align-items: baseline; }
.ronde { background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .6rem; }
.ronde-kop { display: flex; justify-content: space-between; margin-bottom: .3rem; }
.ronde-wie { display: inline-flex; align-items: center; gap: .4rem; }
.gast-rij { margin: .2rem 0 .6rem; }
.gast-naam { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); color: var(--schuim); padding: .55rem .75rem; font-size: .95rem; }
.gast-naam:focus-visible { outline: 2px solid var(--koper-licht); outline-offset: 1px; }
.tafel-status-acties { margin: .2rem 0 .4rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.betaal-check { background: var(--surface2); border: 1px solid var(--munt); border-radius: var(--radius); padding: .6rem .9rem; color: var(--schuim); margin-bottom: 1rem; }
.split-box { background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .6rem; }
.split-label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--schuim-dim); font-size: .9rem; }
.split-label input { width: 4rem; background: var(--surface2); border: 1px solid var(--surface2); border-radius: 8px; color: var(--schuim); padding: .35rem .5rem; font-size: 1rem; }
.split-uit { margin: .5rem 0 0; color: var(--schuim); }
.split-uit strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--koper-licht); }
.ronde ul { margin: 0; padding-left: 1.1rem; color: var(--schuim-dim); font-size: .9rem; }
.badge { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--surface2); color: var(--schuim-dim); }
.badge-bereiding { border-color: var(--goud); color: var(--goud); }
.badge-klaar, .badge-geserveerd { border-color: var(--munt); color: var(--munt); }
.betaal-noot { color: var(--schuim-dim); font-size: .85rem; }
.tafel-upsell:empty { display: none; }
.upsell-kaart { display: grid; grid-template-columns: 56px 1fr auto auto; gap: .7rem; align-items: center; background: var(--surface2); border: 1px solid var(--goud); border-radius: var(--radius); padding: .5rem .7rem; margin-bottom: 1rem; }
.upsell-kaart img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.upsell-noot { display: block; font-size: .72rem; color: var(--goud); text-transform: uppercase; letter-spacing: .06em; }
.upsell-x { background: none; border: 0; color: var(--schuim-dim); font-size: 1.3rem; cursor: pointer; }
.keuze { position: relative; background: var(--surface2); border: 1px solid var(--goud); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: 1rem; }
.keuze > .upsell-noot { display: block; margin-bottom: .6rem; }
.keuze-groep { margin-bottom: .55rem; }
.keuze-groep > span { display: block; font-size: .8rem; color: var(--schuim-dim); margin-bottom: .3rem; }
.keuze-knoppen { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--surface); color: var(--schuim); border: 1px solid var(--surface2); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.chip.aan { border-color: var(--koper); color: var(--koper-licht); background: color-mix(in srgb, var(--koper) 16%, transparent); }
.keuze-toggle { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.keuze-toggle input { width: 18px; height: 18px; accent-color: var(--koper); }
.keuze-voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.keuze-voet strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--koper-licht); }
.keuze .upsell-x { position: absolute; top: .3rem; right: .5rem; }
.tafel-cat { margin: 1.2rem 0; }
.tafel-cat h2 { font-size: 1.2rem; color: var(--koper-licht); border-bottom: 1px solid var(--surface2); padding-bottom: .3rem; }
.tafel-items { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.tafel-item { display: grid; grid-template-columns: 50px 1fr auto; gap: .7rem; align-items: center; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .45rem .6rem; }
.tafel-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
.tafel-item .btn.klein { min-width: 40px; min-height: 40px; font-size: 1.2rem; }
.tafel-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 720px; margin-inline: auto; padding: .8rem 1rem; background: var(--surface2); border-top: 1px solid var(--koper); }
.tafel-balk .btn-vol { flex-shrink: 0; }
.tafel-balk.puls { animation: balkPuls .35s ease; }
@keyframes balkPuls { 30% { transform: translateY(-3px); box-shadow: 0 -6px 20px rgba(0,0,0,.4); } }
@media (prefers-reduced-motion: reduce) { .tafel-balk.puls { animation: none; } }
html.kiosk .tafel-kop { top: 0; }

/* ---------- rijke menukaart (tafel + kiosk): sticky nav + kaarten ---------- */
.menu-nav { position: sticky; top: 0; z-index: 25; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); padding: .5rem 0; margin: 0 0 .4rem; border-bottom: 1px solid var(--surface2); }
.cat-chips, .tag-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem .1rem; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar, .tag-chips::-webkit-scrollbar { display: none; }
.tag-chips { margin-top: .35rem; }
.cat-chip, .tag-chip { flex: 0 0 auto; background: var(--surface); color: var(--schuim-dim); border: 1px solid var(--surface2); border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.cat-chip.aan { background: var(--koper); color: #1a120b; border-color: var(--koper); font-weight: 600; }
.tag-chip.aan { border-color: var(--koper); color: var(--koper-licht); }
.menu-cat { margin: 1.2rem 0; scroll-margin-top: 7rem; }
.menu-cat[hidden] { display: none; }
.menu-cat h2 { font-size: 1.2rem; color: var(--koper-licht); border-bottom: 1px solid var(--surface2); padding-bottom: .3rem; scroll-margin-top: 5.5rem; }
.kaart-rooster { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: .7rem; }
.kaart { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: .8rem; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .5rem; cursor: pointer; transition: border-color .15s, transform .1s; scroll-margin-top: 7rem; }
.kaart:hover { border-color: var(--koper); }
.kaart:active { transform: scale(.99); }
.kaart[hidden] { display: none; }
.kaart-foto { width: 84px; height: 84px; }
.kaart-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.kaart:not(:has(.kaart-foto)) { grid-template-columns: 1fr; }
.kaart-tekst { min-width: 0; padding: .15rem .2rem; }
.kaart-naam { font-weight: 600; }
.kaart-desc { color: var(--schuim-dim); font-size: .85rem; margin: .25rem 0 .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kaart-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.kaart-add { position: absolute; right: .5rem; bottom: .5rem; width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--koper); color: #1a120b; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.kaart-add:hover { background: var(--koper-licht); }
.kaart.flits { outline: 2px solid var(--koper); outline-offset: 2px; }
@media (min-width: 560px) { .kaart-rooster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kaart-rooster { grid-template-columns: repeat(3, 1fr); } .kaart { grid-template-columns: 96px 1fr; } .kaart-foto { width: 96px; height: 96px; } }

/* ---------- item-detail-overlay ---------- */
html.overlay-open { overflow: hidden; }
.item-overlay { position: fixed; inset: 0; z-index: 1100; background: var(--bg); display: flex; flex-direction: column; }
.item-overlay[hidden] { display: none; }
.ov-bar { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid var(--surface2); }
.ov-terug { background: none; border: 0; color: var(--koper-licht); font: inherit; font-size: 1rem; cursor: pointer; }
.ov-nav { display: flex; gap: .4rem; }
.ov-icon { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--surface2); background: var(--surface); color: var(--schuim); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ov-icon[disabled] { opacity: .35; }
.ov-scroll { flex: 1; overflow-y: auto; }
.ov-foto { width: 100%; aspect-ratio: 16/10; background: var(--surface2); }
.ov-foto img { width: 100%; height: 100%; object-fit: cover; }
.ov-cover { max-width: 680px; margin-inline: auto; padding: 1.4rem 1.25rem 2rem; }
.ov-cover .eyebrow { color: var(--schuim-dim); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.ov-cover h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: .1rem 0 .2rem; color: var(--koper-licht); }
.ov-cover-tel { color: var(--schuim-dim); margin: 0 0 1rem; }
.ov-body { max-width: 680px; margin-inline: auto; padding: 1.2rem 1.25rem 2rem; }
.ov-body .eyebrow { color: var(--schuim-dim); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.ov-body h2 { font-size: 1.6rem; margin: .1rem 0 .4rem; }
.ov-desc { color: var(--schuim); margin: .6rem 0; line-height: 1.6; }
.ov-groep { margin: .8rem 0; }
.ov-groep > span { display: block; font-size: .8rem; color: var(--schuim-dim); margin-bottom: .35rem; }
.ov-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ov-info { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--surface2); color: var(--schuim-dim); font-size: .9rem; }
.ov-info p { margin: .3rem 0; }
.ov-sectie { margin-top: 1.4rem; }
.ov-sectie h3 { font-size: .85rem; color: var(--koper-licht); text-transform: uppercase; letter-spacing: .05em; }
.ov-upsell { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
.ov-up { flex: 0 0 130px; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); padding: .5rem; cursor: pointer; text-align: left; color: var(--schuim); display: flex; flex-direction: column; gap: .25rem; }
.ov-up img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.ov-up-naam { font-size: .85rem; }
.ov-voet { padding: .8rem 1rem; padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--surface2); background: var(--surface2); }
.ov-voet .btn { width: 100%; text-align: center; padding: .9rem; font-size: 1.05rem; }
#ov-add.ok { background: var(--munt); }
html.kiosk .kaart-add { width: 48px; height: 48px; }
html.kiosk .ov-icon { width: 54px; height: 54px; }
/* slide-stijl bij openen + vorige/volgende */
@keyframes ovIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes ovNext { from { opacity: 0; transform: translateX(34px); } }
@keyframes ovPrev { from { opacity: 0; transform: translateX(-34px); } }
.ov-scroll.slide-in { animation: ovIn .25s ease; }
.ov-scroll.slide-next { animation: ovNext .24s ease; }
.ov-scroll.slide-prev { animation: ovPrev .24s ease; }

/* ---------- mandje-overzicht (bottom sheet) ---------- */
.balk-info { background: none; border: 0; color: var(--schuim); font: inherit; text-align: left; cursor: pointer; flex: 1; min-width: 0; }
.balk-pijl { color: var(--koper-licht); font-size: .85rem; }
.cart-sheet { position: fixed; inset: 0; z-index: 1090; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.cart-sheet[hidden] { display: none; }
.sheet-kaart { width: 100%; max-width: 720px; margin-inline: auto; background: var(--bg); border-top: 1px solid var(--koper); border-radius: 18px 18px 0 0; max-height: 85vh; display: flex; flex-direction: column; animation: ovIn .25s ease; }
.sheet-kop { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem .3rem; }
.sheet-kop h2 { margin: 0; font-size: 1.25rem; }
.cart-lijst { list-style: none; margin: 0; padding: .5rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: .2rem; }
.cart-lijst li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--surface2); }
.cart-naam { min-width: 0; }
.cart-step { display: flex; align-items: center; gap: .6rem; }
.mini-rond { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--koper); background: var(--surface); color: var(--koper-licht); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cart-qty { min-width: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.sheet-voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--surface2); }
.sheet-voet .btn { flex-shrink: 0; }
html.kiosk .mini-rond { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) { .ov-scroll[class*="slide-"], .sheet-kaart { animation: none; } }

/* ---------- home contact + uren + footer-grid ---------- */
.home-rating { color: var(--goud); margin: .4rem 0 1rem; }
.home-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.home-contact { padding: 2rem 0 1rem; }
.home-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.uren-tabel { width: 100%; border-collapse: collapse; max-width: 360px; }
.uren-tabel th { text-align: left; font-weight: 400; color: var(--schuim-dim); padding: .25rem 0; }
.uren-tabel td { text-align: right; font-variant-numeric: tabular-nums; padding: .25rem 0; }
.uren-uitz { margin-top: .8rem; }
.uren-uitz-kop { color: var(--goud); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; margin: 0 0 .3rem; }
.uren-uitz ul { list-style: none; margin: 0; padding: 0; max-width: 360px; }
.uren-uitz li { display: flex; justify-content: space-between; gap: 1rem; color: var(--schuim-dim); font-size: .9rem; padding: .15rem 0; }
.voet-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.5rem; }
.voet-grid a { color: var(--koper-licht); }
.voet-kop { color: var(--schuim); font-family: var(--font-display); margin-bottom: .4rem; }
.voet-dim { color: var(--schuim-dim); }

/* ---------- evenementen ---------- */
.evt { padding: 2rem 0 4rem; }
.evt .wrap > h1 { margin-bottom: 1.2rem; }
.evt-lijst { display: flex; flex-direction: column; gap: 1rem; }
.evt-item { display: grid; grid-template-columns: 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); overflow: hidden; }
.evt-foto { width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.evt-body { padding: .4rem 1.2rem 1.2rem; }
.evt-foto + .evt-body { padding-top: 1.2rem; }
.evt-datum { color: var(--goud); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin: 0 0 .3rem; }
.evt-item h2 { margin: 0 0 .4rem; }
.evt-item p { color: var(--schuim-dim); margin: 0; }

/* ---------- blog ---------- */
.blog, .blog-artikel { padding: 2rem 0 4rem; }
.blog .wrap > h1 { margin-bottom: 1.2rem; }
.blog-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.blog-kaart { background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s; }
.blog-kaart:hover { border-color: var(--koper); }
.blog-foto { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-kaart-body { padding: .9rem 1.1rem 1.2rem; }
.blog-datum { color: var(--goud); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; margin: 0 0 .3rem; }
.blog-kaart h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.blog-kaart p { color: var(--schuim-dim); margin: 0; }
.blog-artikel .eyebrow a { color: var(--koper-licht); }
.blog-hero { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--radius); margin: 1rem 0; }
.blog-body { line-height: 1.7; }
.blog-body h2, .blog-body h3 { color: var(--koper-licht); margin-top: 1.6rem; }
.blog-body p { margin: 1rem 0; }
.blog-body ul { padding-left: 1.3rem; }

/* ---------- reserveren ---------- */
.wrap-smal { max-width: 560px; margin-inline: auto; padding-inline: 1.25rem; }
.reserveren { padding: 2rem 0 4rem; }
.res-form { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.res-form input, .res-form textarea { padding: .7rem .8rem; border-radius: var(--radius); border: 1px solid var(--surface2); background: var(--surface); color: var(--schuim); }
.res-rij { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: .6rem; }
.res-rij label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--schuim-dim); }
.res-noot { color: var(--schuim-dim); font-size: .85rem; margin-top: 1rem; }
.res-ok { text-align: center; padding: 3rem 0; }
@media (max-width: 640px) { .home-contact-grid, .voet-grid { grid-template-columns: 1fr; } .res-rij { grid-template-columns: 1fr; } }

/* ---------- kiosk + standby (deelstap 7 + 8) ---------- */
html.kiosk { overscroll-behavior: none; }
html.kiosk body { user-select: none; -webkit-user-select: none; }
html.kiosk .tafel-item .btn.klein { min-width: 48px; min-height: 48px; }
.standby { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.standby[hidden] { display: none; }
/* zachte overgang tussen slides */
@keyframes standbyFade { from { opacity: 0; transform: scale(.985); } }
.standby > * { animation: standbyFade .7s ease both; }
/* logo-/merk-intro (3s) */
.standby-intro { text-align: center; }
.standby-intro img { max-width: min(60vw, 440px); max-height: 55vh; object-fit: contain; }
.standby-intro img, .standby-intro h1 { animation: introMerk 3s ease both; }
.standby-intro h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 5.5rem); color: var(--koper-licht); margin: 0; }
@keyframes introMerk { 0% { opacity: 0; transform: scale(.82); letter-spacing: .3em; filter: blur(6px); } 35% { opacity: 1; filter: blur(0); } 70% { transform: scale(1); letter-spacing: .02em; } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .standby > *, .standby-intro img, .standby-intro h1 { animation: none; } }
.standby-beeld { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.standby-beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.75)); }
.standby-beeld .standby-tekst { position: relative; padding: 3rem; }
.standby-tekst h2 { font-size: clamp(2rem, 6vw, 3.5rem); color: var(--schuim); }
.standby-tekst p { color: var(--schuim-dim); font-size: 1.2rem; }
.standby-tik { color: var(--koper-licht) !important; margin-top: 1.5rem; animation: pols 2s ease-in-out infinite; }
@keyframes pols { 50% { opacity: .45; } }
.standby-kaart { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 2rem; }
.standby-kaart .kenburns { width: min(64vw, 620px); aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; }
.standby-kaart .kenburns img { width: 100%; height: 100%; object-fit: cover; }
.standby-noot { color: var(--goud); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.standby-kaart h2 { font-size: clamp(1.8rem, 5vw, 3rem); }
/* sfeer-quote tussen producten door */
.standby-quote { max-width: min(88vw, 46rem); text-align: center; padding: 2rem; }
.standby-quote blockquote { margin: 0 auto; font-family: var(--font-display); font-size: clamp(1.7rem, 4.5vw, 3.4rem); line-height: 1.25; color: var(--schuim); text-wrap: balance; }
/* sfeervideo (YouTube): vult het scherm */
.standby-video { position: absolute; inset: 0; }
.standby-video iframe { width: 100%; height: 100%; border: 0; }
.standby-video .standby-tik { position: absolute; left: 0; right: 0; bottom: 2rem; text-align: center; }
.standby-merk { margin-top: 1.5rem; color: var(--koper-licht); text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
/* bewegende beelden (Ken Burns) */
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -2%); } }
@keyframes kenburnsBg { from { transform: scale(1); } to { transform: scale(1.12); } }
.kenburns img { animation: kenburns 13s ease-out both; }
.standby-beeld.kenburns-bg { animation: kenburnsBg 14s ease-out both; }
@media (prefers-reduced-motion: reduce) { .kenburns img, .standby-beeld.kenburns-bg { animation: none; } }
.tafel-item.flits { outline: 2px solid var(--koper); outline-offset: 2px; transition: outline-color .3s; }

/* ---------- toegankelijkheid + politoer ---------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--koper); color: #1a120b; padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 2000; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--koper-licht); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.hybride-noot { text-align: center; color: var(--schuim-dim); font-size: .82rem; margin: 1.5rem 0 5rem; opacity: .8; }

/* ---------- publieke sticky bottom-bar (mobiel) ---------- */
.onderbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--surface2);
  padding-bottom: env(safe-area-inset-bottom);
}
.onderbalk a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  padding: .55rem .2rem; text-decoration: none; color: var(--schuim-dim); font-size: .68rem; letter-spacing: .02em;
}
.onderbalk a:hover, .onderbalk a:focus-visible { color: var(--koper-licht); }
.onderbalk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
@media (min-width: 860px) {
  .onderbalk { display: none; }
  body { padding-bottom: 0; }
}