/* ==========================================================================
Lettertypen — bewust zelf gehost in plaats van via Google Fonts.
Een naar fonts.googleapis.com stuurt het IP-adres van elke bezoeker naar
Google vóór er iets geladen is; ons eigen cookiebeleid belooft juist dat er geen
derde partij meekijkt. Lokaal is bovendien sneller (geen extra DNS + verbinding)
en het werkt door als de keuken even geen internet naar buiten heeft.
Bestanden komen uit de officiële @fontsource-pakketten (SIL Open Font License).
========================================================================== */
@font-face{
font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/anton-latin-400-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/anton-latin-ext-400-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/archivo-latin-ext-400-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
src:url('../fonts/archivo-latin-ext-500-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
src:url('../fonts/archivo-latin-ext-600-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
src:url('../fonts/archivo-latin-ext-700-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
src:url('../fonts/archivo-latin-ext-800-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ==========================================================================
Snackhouse & Catering LOBO — Oudorp
Huisstijl: Lobo-blauw #00B0F0 · ink · warm papierwit
Typografie: Anton (display) + Archivo (tekst)
========================================================================== */
:root{
--brand: #00B0F0;
--brand-deep: #0090CE;
--brand-ink: #007AB0; /* leesbaar blauw op licht */
--sky: #55CFFF; /* fel blauw op donker */
--ink: #0B151A;
--ink-2: #10222B;
--ink-3: #16303C;
--paper: #F7F5F0;
--card: #FFFFFF;
--amber: #F5A73B;
--green: #23BD6C;
--red: #E4573D;
--text: #22333C;
--muted: #5C6E77;
--line: rgba(11,21,26,.12);
--line-dark: rgba(255,255,255,.14);
--font-display:'Anton','Arial Narrow',Impact,'Helvetica Neue',sans-serif;
--font-body:'Archivo','Helvetica Neue',Arial,system-ui,sans-serif;
--fs-hero: clamp(2.45rem, 8.2vw, 6.4rem);
--fs-h2: clamp(2rem, 4.6vw, 3.4rem);
--fs-h3: clamp(1.35rem, 2.6vw, 1.9rem);
--fs-lead: clamp(1.06rem, 1.6vw, 1.25rem);
--r-lg: 22px;
--r-md: 16px;
--r-sm: 10px;
--shadow-lg: 0 24px 60px -18px rgba(11,21,26,.28);
--shadow-md: 0 14px 34px -14px rgba(11,21,26,.22);
--shadow-brand: 0 14px 34px -12px rgba(0,176,240,.45);
--container: 1180px;
--header-h: 78px;
}
/* ---------- basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
margin:0; font-family:var(--font-body); color:var(--text);
background:var(--paper); font-size:16.5px; line-height:1.65;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; display:block; }
a{ color:var(--brand-ink); text-decoration:none; }
a:hover{ text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
::selection{ background:var(--brand); color:#04222E; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.06; color:var(--ink); }
.display{
font-family:var(--font-display); font-weight:400; text-transform:uppercase;
letter-spacing:.015em;
}
h2.display{ font-size:var(--fs-h2); }
h3.display{ font-size:var(--fs-h3); letter-spacing:.02em; }
p{ margin:0 0 1em; }
.lead{ font-size:var(--fs-lead); color:var(--muted); max-width:46em; }
.container{ width:min(var(--container), 100% - 2.6rem); margin-inline:auto; }
.section{ padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight{ padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.overline{
display:inline-flex; align-items:center; gap:.6rem;
font-weight:800; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--brand-ink); margin-bottom:1rem;
}
.overline::before{ content:""; width:26px; height:3px; background:var(--brand); border-radius:2px; }
.dark .overline{ color:var(--sky); }
.section-head{ max-width:720px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head--row{
max-width:none; display:flex; align-items:flex-end; justify-content:space-between;
gap:1.5rem; flex-wrap:wrap;
}
/* ---------- knoppen ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
font-weight:800; font-size:1rem; letter-spacing:.01em;
padding:.95rem 1.7rem; border-radius:999px; border:2px solid transparent;
transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--primary{ background:var(--brand); color:#04222E; box-shadow:var(--shadow-brand); }
.btn--primary:hover{ background:var(--brand-deep); color:#03222E; transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-3); transform:translateY(-2px); }
.btn--outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn--outline:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn--sm{ padding:.6rem 1.15rem; font-size:.92rem; }
.btn--lg{ padding:1.1rem 2.2rem; font-size:1.08rem; }
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(3px); }
/* ---------- header ---------- */
.site-header{
position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
display:flex; align-items:center;
transition:background .25s ease, box-shadow .25s ease, height .25s ease;
}
.site-header .container{ display:flex; align-items:center; gap:1.6rem;
/* De balk mag de volle schermbreedte gebruiken. Binnen de normale paginabreedte
(1180px) werd het op de bestelpagina te krap — daar staan het telefoonnummer én de
inlogknoppen samen in de balk — en gingen onderdelen onder elkaar stapelen. */
width:min(1760px, 100% - 2.6rem); flex-wrap:nowrap; }
@media (max-width:1250px){
/* net onder de volle breedte: iets compactere tussenruimtes, zodat alles op één regel
blijft tot het mobiele menu het overneemt */
.nav-desktop{ gap:1.1rem; }
.site-header .container{ gap:1rem; }
.header-account{ margin-right:.2rem; }
}
.site-header.is-solid,
.site-header.is-open{
background:rgba(9,18,23,.86); backdrop-filter:blur(14px);
box-shadow:0 10px 30px -18px rgba(0,0,0,.55); height:68px;
}
body.page-light .site-header:not(.is-solid):not(.is-open){ background:transparent; }
.brand{ display:flex; flex-direction:column; line-height:1; gap:.18rem; margin-right:auto; }
.brand .brand-top{
font-size:.6rem; font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:#cfe9f4;
white-space:nowrap;
}
.brand .brand-name{
font-family:var(--font-display); font-size:1.9rem; color:#fff; letter-spacing:.05em; text-transform:uppercase;
}
.brand .brand-name span{ color:var(--brand); }
.nav-desktop{ display:flex; align-items:center; gap:1.9rem; }
.nav-desktop a{ white-space:nowrap; } /* "Over ons"/"Werken bij" mogen nooit intern omklappen */
.nav-desktop a{
color:#E7F0F4; font-weight:700; font-size:.99rem; position:relative; padding:.4rem 0;
}
.nav-desktop a::after{
content:""; position:absolute; left:0; right:100%; bottom:0; height:2.5px;
background:var(--brand); border-radius:2px; transition:right .22s ease;
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ right:0; }
.nav-desktop a[aria-current="page"]{ color:#fff; }
.header-cta{ margin-left:.4rem; }
/* inloggen / Mijn LOBO + Uitloggen rechtsboven — main.js zet ze op elke pagina neer */
.header-account{ display:flex; align-items:center; gap:.55rem; margin-left:auto; margin-right:.6rem; }
.header-cta{ margin-left:0; }
.header-account-link{ border-color:rgba(255,255,255,.45); color:#fff; white-space:nowrap; }
.header-account-link:hover{ border-color:var(--brand); color:var(--brand); }
.header-uitloggen{ background:none; border:0; color:#C9D9E0; font:inherit; font-size:.85rem;
font-weight:700; cursor:pointer; padding:.3rem .2rem; white-space:nowrap; }
.header-uitloggen:hover{ color:#fff; text-decoration:underline; }
@media (max-width:760px){
/* op een telefoon staat het in het uitklapmenu; rechtsboven wordt het te krap */
.header-account{ display:none; }
}
.nav-toggle{
display:none; background:none; border:0; width:46px; height:46px; border-radius:12px;
flex-direction:column; align-items:center; justify-content:center; gap:5.5px;
}
.nav-toggle span{ width:24px; height:2.6px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.1px) rotate(-45deg); }
.nav-mobile{
position:fixed; top:68px; left:0; right:0; z-index:59; padding:1rem 1.3rem 1.5rem;
background:rgba(9,18,23,.97); backdrop-filter:blur(16px);
display:none; flex-direction:column; gap:.2rem;
border-bottom:1px solid var(--line-dark);
}
.nav-mobile.is-open{ display:flex; }
.nav-mobile a{
color:#EAF3F7; font-weight:800; font-size:1.25rem; padding:.85rem .4rem;
border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-mobile a[aria-current="page"]{ color:var(--sky); }
.nav-mobile .btn{ margin-top:1rem; }
@media (max-width: 900px){
.nav-desktop{ display:none; }
.nav-toggle{ display:flex; }
.brand .brand-name{ font-size:1.5rem; }
.brand .brand-top{ font-size:.5rem; letter-spacing:.26em; }
.site-header .container{ gap:.9rem; }
/* Het merk is het rekbare deel van de balk: knop en menuknop houden hun maat, en als
het ondanks alles tóch te smal wordt, kapt "Snackhouse & Catering" netjes af met …
in plaats van hard onder de knop te verdwijnen (Safari) of de menuknop van het
scherm te duwen (Chrome). */
.brand, .brand-text{ min-width:0; }
.brand .brand-top{ overflow:hidden; text-overflow:ellipsis; }
.header-cta, .nav-toggle{ flex-shrink:0; }
}
@media (max-width: 600px){
/* smalle telefoons: alles een maat kleiner zodat merk + knop + menuknop écht passen */
.site-header .container{ gap:.6rem; }
.brand{ gap:.55rem; }
.brand-badge{ width:34px; height:34px; }
.brand .brand-name{ font-size:1.3rem; }
.brand .brand-top{ font-size:.44rem; letter-spacing:.15em; }
.header-cta.btn--sm{ padding:.5rem .7rem; font-size:.8rem; }
}
@media (max-width: 400px){
/* de smalste toestellen — óók met het telefoonnummer als knop (bestelpagina) moet
"Snackhouse & Catering" er nog helemaal op passen */
.brand .brand-top{ font-size:.42rem; letter-spacing:.1em; }
}
@media (max-width: 340px){
/* stokoude minitelefoons: liever alleen een strak LOBO dan een half afgekapte regel */
.brand .brand-top{ display:none; }
}
/* ---------- hero (home) ---------- */
.hero{
position:relative; min-height:min(100vh, 900px); min-height:min(100svh, 900px);
display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--ink);
}
.hero-media{ position:absolute; inset:0; }
.hero-media video, .hero-media .hero-fallback{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero.no-video video{ display:none; }
.hero-fallback{ display:none; }
.hero.no-video .hero-fallback{ display:block; animation:kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns{
from{ transform:scale(1.02) translate(0,0); }
to{ transform:scale(1.14) translate(-1.6%, -2.4%); }
}
@media (prefers-reduced-motion:reduce){ .hero.no-video .hero-fallback{ animation:none; } }
.hero-shade{ position:absolute; inset:0;
background:linear-gradient(to bottom, rgba(6,14,18,.55) 0%, rgba(6,14,18,.18) 38%, rgba(6,14,18,.34) 62%, rgba(6,14,18,.93) 100%);
}
.hero-grain{ position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; width:min(var(--container),100% - 2.6rem); margin-inline:auto;
padding:9.5rem 0 4.2rem; }
.hero-status{
display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.92rem;
background:rgba(9,18,23,.55); border:1px solid rgba(255,255,255,.22); color:#EAF6FB;
padding:.5rem 1.05rem; border-radius:999px; backdrop-filter:blur(8px); margin-bottom:1.4rem;
}
.hero-status .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(35,189,108,.25); }
.hero-status.is-closed .dot{ background:var(--red); box-shadow:0 0 0 4px rgba(228,87,61,.22); }
.hero h1{
font-family:var(--font-display); font-weight:400; text-transform:uppercase;
font-size:var(--fs-hero); line-height:.96; letter-spacing:.012em; color:#fff;
margin:0 0 1.1rem; max-width:11em; text-wrap:balance;
}
.hero h1 .accent{ color:var(--brand); }
.hero .hero-sub{ font-size:var(--fs-lead); color:#D6E4EA; max-width:34em; margin-bottom:2rem; }
.hero-actions{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.hero-foot{
position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.16);
margin-top:3.2rem; padding-top:1.15rem; padding-bottom:1.3rem;
display:flex; gap:2.4rem; flex-wrap:wrap; font-size:.95rem; color:#BFD3DB;
}
.hero-foot b{ color:#fff; font-weight:800; }
.hero-foot .sep{ opacity:.4; }
.scroll-cue{
position:absolute; right:2rem; bottom:2rem; z-index:3; width:44px; height:70px;
border:2px solid rgba(255,255,255,.4); border-radius:999px; display:flex; justify-content:center;
}
.scroll-cue::after{ content:""; width:5px; height:12px; border-radius:3px; background:#fff; margin-top:12px;
animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(22px); opacity:0;} 100%{opacity:0;} }
@media (max-width:700px){ .scroll-cue{ display:none; } .hero-inner{ padding-top:8rem; } }
/* ---------- marquee ---------- */
.marquee{ background:var(--ink); color:#fff; overflow:hidden; padding:.95rem 0;
border-top:1px solid rgba(255,255,255,.07); }
.marquee-track{ display:flex; gap:3.2rem; width:max-content; animation:marquee 30s linear infinite; }
.marquee span{ display:flex; align-items:center; gap:3.2rem; white-space:nowrap;
font-family:var(--font-display); text-transform:uppercase; letter-spacing:.09em; font-size:1.02rem; color:#DCEBF2; }
.marquee i{ font-style:normal; color:var(--brand); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }
/* ---------- menu highlight cards ---------- */
.cards-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(12,1fr); }
.menu-card{
grid-column:span 3; position:relative; border-radius:var(--r-lg); overflow:hidden;
background:var(--ink-2); color:#fff; min-height:390px; display:flex; align-items:flex-end;
box-shadow:var(--shadow-md); transform:translateZ(0);
}
.menu-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.menu-card:hover img{ transform:scale(1.06); }
.menu-card::after{ content:""; position:absolute; inset:0;
background:linear-gradient(to top, rgba(6,14,18,.92) 0%, rgba(6,14,18,.25) 55%, rgba(6,14,18,.08) 100%); }
.menu-card--tile{ background:linear-gradient(150deg, var(--ink-2), var(--ink-3)); }
.menu-card--tile::after{ background:none; }
.menu-card--tile .tile-mark{
position:absolute; inset:auto -8% -14% auto; font-family:var(--font-display); font-size:11rem; line-height:1;
color:rgba(0,176,240,.16); text-transform:uppercase; pointer-events:none; user-select:none;
}
.menu-card--brand{ background:linear-gradient(150deg, #00A5E2, #0083C8); }
.menu-card--brand .tile-mark{ color:rgba(255,255,255,.18); }
.menu-card--brand .card-body .card-note, .menu-card--brand .card-price{ color:#E8F8FF; }
.card-body{ position:relative; z-index:2; padding:1.5rem 1.5rem 1.4rem; width:100%; }
.card-note{ font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A9DFF5; margin-bottom:.35rem; }
.menu-card h3{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.65rem; color:#fff; margin:0 0 .3rem; letter-spacing:.03em; }
.card-price{ font-weight:800; color:#CBE9F6; font-size:.98rem; }
.card-go{
position:absolute; top:1.1rem; right:1.1rem; z-index:2; width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25);
display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem;
transition:background .2s ease, transform .2s ease;
}
.menu-card:hover .card-go{ background:var(--brand); color:#04222E; transform:rotate(-45deg); }
@media (max-width:1020px){ .menu-card{ grid-column:span 6; min-height:330px; } }
@media (max-width:560px){ .menu-card{ grid-column:span 12; min-height:300px; } }
/* ---------- split / story ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev{ direction:rtl; } .split--rev > *{ direction:ltr; }
@media (max-width:900px){ .split, .split--rev{ grid-template-columns:1fr; direction:ltr; } }
.photo-frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.photo-frame .photo-tag{
position:absolute; left:1.1rem; bottom:1.1rem; background:rgba(9,18,23,.82); color:#fff;
backdrop-filter:blur(8px); padding:.55rem 1rem; border-radius:999px; font-weight:700; font-size:.88rem;
display:flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.18);
}
.photo-frame .photo-tag i{ font-style:normal; color:var(--brand); }
.badge-1987{
position:absolute; top:1.1rem; right:1.1rem; background:var(--brand); color:#04222E;
font-family:var(--font-display); font-size:1.05rem; letter-spacing:.06em; padding:.5rem .95rem;
border-radius:12px; box-shadow:var(--shadow-brand); text-transform:uppercase;
}
.stat-row{ display:flex; gap:1.8rem 2.2rem; flex-wrap:wrap; margin-top:2rem; }
.stat b{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--ink); letter-spacing:.02em; }
.stat span{ color:var(--muted); font-size:.95rem; font-weight:600; }
/* ---------- donkere banden ---------- */
.dark{ background:var(--ink); color:#C9D9E0; }
.dark h2,.dark h3{ color:#fff; }
.dark .lead{ color:#9FB4BD; }
.band-pattern{ position:relative; overflow:hidden; }
.band-pattern::before{
content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
background:
radial-gradient(52rem 30rem at 110% -10%, rgba(0,176,240,.16), transparent 60%),
radial-gradient(40rem 26rem at -12% 118%, rgba(0,176,240,.10), transparent 60%);
}
.band-pattern > .container{ position:relative; z-index:1; }
/* catering feature list */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.4rem; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
border-radius:var(--r-md); padding:1.5rem 1.4rem; backdrop-filter:blur(4px);
}
.feature .f-ico{
width:46px; height:46px; border-radius:13px; background:rgba(0,176,240,.16); color:var(--sky);
display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem;
}
.feature h3{ font-size:1.12rem; font-weight:800; font-family:var(--font-body); text-transform:none; letter-spacing:0; margin-bottom:.4rem; }
.feature p{ color:#9FB4BD; font-size:.97rem; margin:0; }
/* ---------- openingstijden / bezoek ---------- */
.visit-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3.6rem); align-items:start; }
@media (max-width:900px){ .visit-grid{ grid-template-columns:1fr; } }
.hours-card{
background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.9rem 1.9rem 1.5rem; box-shadow:var(--shadow-md);
}
.hours-card table{ width:100%; border-collapse:collapse; font-size:1rem; }
.hours-card th{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
text-align:right; font-weight:800; padding:0 0 .5rem; }
.hours-card th:first-child{ text-align:left; }
.hours-card td{ padding:.62rem 0; border-bottom:1px dashed var(--line); }
.hours-card tr:last-child td{ border-bottom:0; }
.hours-card td:nth-child(2){ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.hours-card td:last-child{ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; padding-left:1.2rem; }
.hours-card td .geen{ color:var(--muted); font-weight:600; }
.hours-card tr.is-today td{ color:var(--brand-ink); font-weight:800; }
.hours-note{ font-size:.9rem; color:var(--muted); margin-top:.9rem; }
.status-chip{
display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:.92rem;
padding:.45rem 1rem; border-radius:999px; background:rgba(35,189,108,.12); color:#157A47; margin-bottom:1.1rem;
}
.status-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.status-chip.is-closed{ background:rgba(228,87,61,.1); color:#A93A26; }
.status-chip.is-closed .dot{ background:var(--red); }
/* ---------- footer ---------- */
.site-footer{ background:#081015; color:#9FB4BD; padding:4.2rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:2.4rem; }
@media (max-width:950px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand-name{ font-size:2.1rem; }
.footer-tag{ margin:.9rem 0 0; max-width:26em; font-size:.97rem; }
.footer-award{
display:inline-flex; align-items:center; gap:.6rem; margin-top:1.2rem; padding:.55rem 1rem;
border:1px solid rgba(255,255,255,.14); border-radius:999px; font-size:.85rem; color:#CFE2EA;
}
.footer-award i{ font-style:normal; color:var(--amber); }
.site-footer h4{ color:#fff; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-links a{ color:#B9CCD5; font-weight:600; }
.footer-links a:hover{ color:var(--sky); }
.footer-contact{ font-style:normal; line-height:1.9; }
.footer-contact a{ color:#DAE9F0; font-weight:700; }
.footer-bottom{
margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.09);
display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#6E838D;
}
.footer-bottom a{ color:#9FB4BD; }
.mascot-chip{ width:74px; height:74px; border-radius:50%; background:#fff; padding:8px; margin-bottom:1rem; }
.mascot-chip img{ width:100%; height:100%; object-fit:contain; }
/* ---------- pagina-hero (subpagina's) ---------- */
.page-hero{
position:relative; background:var(--ink); color:#fff;
padding: calc(var(--header-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(2.6rem,5vw,4rem);
overflow:hidden;
}
.page-hero::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(46rem 26rem at 108% -20%, rgba(0,176,240,.22), transparent 60%),
radial-gradient(30rem 20rem at -8% 120%, rgba(0,176,240,.12), transparent 60%);
}
.page-hero .container{ position:relative; }
.page-hero h1{
font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.015em;
font-size:clamp(2.6rem,6vw,4.6rem); color:#fff; margin:0 0 .35em; line-height:.98;
}
.page-hero .lead{ color:#AFC4CD; }
.crumbs{ font-size:.88rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7FD6F7; margin-bottom:1.2rem; }
.crumbs a{ color:#7FD6F7; opacity:.75; } .crumbs a:hover{ opacity:1; }
/* ---------- bestellen ---------- */
.order-layout{ display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:clamp(1.6rem,3vw,2.6rem); align-items:start; }
/* minmax(0,1fr) i.p.v. 1fr: een kale 1fr mag nooit smaller dan zijn inhoud, waardoor
één lange menuregel de hele kolom breder maakte dan het scherm (zijwaarts scrollen
op telefoons). Met minmax(0,…) krimpt de kolom netjes mee. */
@media (max-width:1080px){ .order-layout{ grid-template-columns:minmax(0,1fr); } }
.cat-bar{
position:sticky; top:68px; z-index:40; background:rgba(247,245,240,.92); backdrop-filter:blur(12px);
padding:.8rem 0; border-bottom:1px solid var(--line); margin-bottom:1.6rem;
}
.cat-bar-inner{ display:flex; gap:.55rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.cat-bar-inner::-webkit-scrollbar{ display:none; }
.cat-chip{
flex:0 0 auto; border:1.5px solid var(--line); background:#fff; color:var(--ink);
font-weight:700; font-size:.93rem; padding:.5rem 1.05rem; border-radius:999px;
transition:all .15s ease;
}
.cat-chip:hover{ border-color:var(--brand); color:var(--brand-ink); }
.cat-chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.menu-cat{ scroll-margin-top:150px; padding-top:.4rem; margin-bottom:2.6rem; }
.menu-cat-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.4rem; }
.menu-cat h2{
font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.03em;
font-size:1.75rem; margin:0;
}
.menu-cat .cat-note{ color:var(--muted); font-size:.93rem; font-weight:600; }
.item-list{ display:grid; gap:.7rem; margin-top:1.1rem; }
/* rasterkinderen mogen nooit breder zijn dan de lijst zelf (min-width:auto-valkuil):
zonder deze regel duwde een productkaart de pagina opzij op telefoons */
.item-list > .order-item{ min-width:0; }
.order-item{
display:flex; align-items:center; gap:1.1rem; background:var(--card);
border:1px solid var(--line); border-radius:var(--r-md); padding:1rem 1.15rem;
transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.order-item:hover{ border-color:rgba(0,176,240,.55); box-shadow:0 10px 24px -16px rgba(11,21,26,.25); }
.oi-info{ flex:1; min-width:0; }
.oi-name{ font-weight:800; color:var(--ink); font-size:1.02rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.oi-desc{ color:var(--muted); font-size:.9rem; margin-top:.15rem; }
.oi-price{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.oi-select{ margin-top:.55rem; }
.oi-select select{
width:100%; max-width:340px; border:1.5px solid var(--line); border-radius:10px; padding:.5rem .7rem;
background:#fff; font-size:.92rem; font-weight:600; color:var(--ink);
}
.tag{ display:inline-flex; align-items:center; font-size:.68rem; font-weight:800; letter-spacing:.08em;
text-transform:uppercase; padding:.22rem .55rem; border-radius:6px; }
.tag--pop{ background:rgba(245,167,59,.16); color:#9A6215; }
.tag--vega{ background:rgba(35,189,108,.14); color:#157A47; }
.tag--lobo{ background:rgba(0,176,240,.14); color:var(--brand-ink); }
/* leeftijdsgrens: bewust rood en niet te missen — legitimatie is wettelijk verplicht */
.tag--leeftijd{ background:rgba(200,42,42,.13); color:#A31515; border:1px solid rgba(200,42,42,.28); }
.oi-leeftijd{ font-size:.82rem; font-weight:700; color:#A31515; margin-top:.15rem; display:flex;
align-items:center; gap:.35rem; }
.oi-leeftijd::before{ content:''; width:.4rem; height:.4rem; border-radius:50%; background:#A31515;
flex:0 0 auto; }
.add-btn{
flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; background:var(--ink); color:#fff;
font-size:1.35rem; font-weight:600; display:flex; align-items:center; justify-content:center;
transition:background .15s ease, transform .15s ease; line-height:1;
}
.add-btn:hover{ background:var(--brand); color:#04222E; transform:scale(1.07); }
.qty-stepper{ flex:0 0 auto; display:flex; align-items:center; gap:.15rem; background:var(--ink); border-radius:999px; color:#fff; }
.qty-stepper button{ width:38px; height:40px; background:none; border:0; color:#fff; font-size:1.2rem; }
.qty-stepper b{ min-width:22px; text-align:center; font-size:.98rem; }
/* winkelwagen */
.cart-panel{
position:sticky; top:136px; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-md); overflow:hidden;
}
.cart-head{ background:var(--ink); color:#fff; padding:1.15rem 1.4rem; display:flex; justify-content:space-between; align-items:center; }
.cart-head h2{ font-family:var(--font-display); font-weight:400; letter-spacing:.05em; text-transform:uppercase; font-size:1.3rem; color:#fff; margin:0; }
.cart-count-chip{ background:var(--brand); color:#04222E; font-weight:800; font-size:.85rem; border-radius:999px; padding:.2rem .7rem; }
.cart-body{ padding:1.2rem 1.4rem; max-height:44vh; overflow:auto; min-height:70px; }
@media (min-width:1081px){ #cart-close{ display:none; } }
.cart-empty{ color:var(--muted); font-size:.95rem; text-align:center; padding:1.4rem 0; }
.cart-line{ display:flex; gap:.8rem; align-items:flex-start; padding:.55rem 0; border-bottom:1px dashed var(--line); font-size:.95rem; }
.cart-line:last-child{ border-bottom:0; }
.cl-qty{ font-weight:800; color:var(--brand-ink); white-space:nowrap; }
.cl-name{ flex:1; font-weight:600; color:var(--ink); }
.cl-name small{ display:block; color:var(--muted); font-weight:500; }
.cl-price{ font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-x{ border:0; background:none; color:var(--muted); font-size:1rem; padding:.1rem .25rem; }
.cl-x:hover{ color:var(--red); }
.cart-totals{ padding:1rem 1.4rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-weight:800; color:var(--ink); font-size:1.08rem; }
.cart-actions{ padding:0 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.cart-note{ font-size:.83rem; color:var(--muted); padding:0 1.4rem 1.2rem; margin:0; }
.cart-fab{
display:none; position:fixed; z-index:55; left:1rem; right:1rem; bottom:1rem;
}
.cart-fab button{
width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
background:var(--ink); color:#fff; border:0; border-radius:999px; padding:1.05rem 1.5rem;
font-size:1.02rem; font-weight:800; box-shadow:var(--shadow-lg);
}
.cart-fab .fab-total{ color:var(--sky); font-variant-numeric:tabular-nums; }
@media (max-width:1080px){
.toast{ bottom:5.6rem; }
.cart-panel{ position:fixed; inset:auto 0 0 0; top:auto; z-index:70; border-radius:22px 22px 0 0;
transform:translateY(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.cart-panel.is-open{ transform:translateY(0); }
/* het hele paneel scrollt als één geheel (kop blijft plakken) — zo wordt de bestellijst
niet meer platgedrukt door het formulier eronder */
.cart-head{ position:sticky; top:0; z-index:3; }
.cart-body{ max-height:none; overflow:visible; }
.cart-fab.has-items{ display:block; }
body.cart-open::after{ content:""; position:fixed; inset:0; background:rgba(6,14,18,.55); z-index:60; }
}
/* winkelwagen op desktop: los, eigen scrollbalkje binnen het paneel — nooit de hele
pagina laten scrollen om bij "Bestelling plaatsen" te komen */
@media (min-width:1081px){
.cart-panel{ max-height:calc(100vh - 160px); overflow-y:auto; overflow-x:hidden; }
.cart-body{ max-height:none; overflow:visible; }
}
/* checkout-velden */
.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.95rem; }
.field label{ font-weight:700; font-size:.88rem; color:var(--ink); }
.field input, .field select, .field textarea{
border:1.5px solid var(--line); border-radius:12px; padding:.72rem .85rem; background:#fff;
transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brand); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.seg{
display:grid; grid-template-columns:1fr 1fr; background:#EDEAE2; border-radius:999px; padding:4px; margin-bottom:1rem;
}
.seg button{
border:0; background:none; padding:.62rem .5rem; border-radius:999px; font-weight:800; color:var(--muted);
transition:all .18s ease;
}
.seg button.is-active{ background:var(--ink); color:#fff; box-shadow:var(--shadow-md); }
.notice{
display:flex; gap:.7rem; align-items:flex-start; background:rgba(0,176,240,.09);
border:1px solid rgba(0,176,240,.28); color:#0B4A61; border-radius:var(--r-sm);
padding:.85rem 1rem; font-size:.9rem; margin:.6rem 0 1rem;
}
.notice i{ font-style:normal; }
.toast{
position:fixed; z-index:90; left:50%; bottom:1.6rem; transform:translate(-50%, 20px);
background:var(--ink); color:#fff; padding:.8rem 1.4rem; border-radius:999px; font-weight:700;
opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:var(--shadow-lg); font-size:.95rem;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }
/* ---------- video sectie ---------- */
.video-shell{
position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2);
box-shadow:var(--shadow-lg); aspect-ratio:16/9;
}
.video-shell video{ width:100%; height:100%; object-fit:cover; }
.video-placeholder{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:1rem; color:#BFD3DB; text-align:center; padding:2rem;
background:linear-gradient(150deg, rgba(16,34,43,.94), rgba(9,18,23,.96));
}
.video-placeholder .play-ring{
width:84px; height:84px; border-radius:50%; background:var(--brand); color:#04222E;
display:flex; align-items:center; justify-content:center; font-size:1.7rem; box-shadow:var(--shadow-brand);
}
.video-placeholder b{ color:#fff; font-size:1.15rem; }
.video-placeholder small{ max-width:34em; }
.video-placeholder code{ background:rgba(255,255,255,.1); padding:.1rem .45rem; border-radius:6px; }
.video-shell .video-placeholder{ display:none; }
.video-shell.no-video video{ display:none; }
.video-shell.no-video .video-placeholder{ display:flex; }
/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3rem); align-items:start; }
@media (max-width:950px){ .contact-grid{ grid-template-columns:1fr; } }
.info-cards{ display:grid; gap:1rem; margin-bottom:1.6rem; }
.info-card{
display:flex; gap:1.1rem; align-items:flex-start; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-md); padding:1.25rem 1.3rem; box-shadow:0 8px 22px -16px rgba(11,21,26,.18);
}
.info-card .i-ico{
flex:0 0 auto; width:46px; height:46px; border-radius:13px; background:rgba(0,176,240,.13);
color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.info-card b{ display:block; color:var(--ink); margin-bottom:.15rem; }
.info-card a{ font-weight:700; }
.map-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line);
aspect-ratio:4/3; background:#E6E2D8; position:relative; }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
.map-fallback{ position:absolute; inset:auto 1rem 1rem auto; }
.contact-form{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.9rem; box-shadow:var(--shadow-md); }
/* ---------- allergenen ---------- */
.allergen-tools{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.allergen-tools input{
flex:1; min-width:240px; border:1.5px solid var(--line); border-radius:999px; padding:.8rem 1.3rem; background:#fff;
}
.allergen-tools input:focus{ border-color:var(--brand); outline:none; }
.allergen-table{ width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--r-md);
overflow:hidden; box-shadow:var(--shadow-md); font-size:.96rem; }
.allergen-table th{ background:var(--ink); color:#fff; text-align:left; padding:.85rem 1.1rem; font-size:.82rem;
letter-spacing:.12em; text-transform:uppercase; }
.allergen-table td{ padding:.7rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.allergen-table tr:nth-child(even) td{ background:rgba(11,21,26,.025); }
.allergen-table td:first-child, .allergen-table th:first-child{ font-weight:700; color:var(--ink); width:34%; }
.allergen-table .group-row td{ background:rgba(0,176,240,.1); color:var(--brand-ink); font-weight:800;
text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; }
/* ---------- privacybeleid.html / algemene-voorwaarden.html / cookiebeleid.html ---------- */
.legal-text{ max-width:760px; }
.legal-text h2{ font-size:1.28rem; margin-top:2.1rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.legal-text h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.legal-text p, .legal-text ul{ color:var(--muted); font-size:.98rem; }
.legal-text li{ margin-bottom:.3rem; }
.legal-text b{ color:var(--ink); }
/* ---------- cookiebanner ---------- */
.cookiebar{
position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200;
max-width:640px; margin-inline:auto; background:var(--ink); color:#fff;
border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:1.2rem 1.3rem;
display:flex; flex-direction:column; gap:.9rem; transform:translateY(140%); transition:transform .45s ease;
}
.cookiebar.is-show{ transform:translateY(0); }
.cookiebar p{ margin:0; font-size:.9rem; color:#C9D9E0; }
.cookiebar p a{ color:#fff; text-decoration:underline; }
.cookiebar-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cookiebar-actions .btn{ flex:1; min-width:140px; justify-content:center; }
@media (min-width:640px){ .cookiebar{ left:auto; right:1.6rem; bottom:1.6rem; } }
/* ---------- cta-band ---------- */
.cta-band{ background:linear-gradient(120deg, #00A5E2, #007FC4); color:#fff; }
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
padding-block:clamp(2.6rem,5vw,3.8rem); }
.cta-band h2{ color:#fff; margin:0; font-size:clamp(1.7rem,3.4vw,2.6rem); }
.cta-band p{ margin:.45rem 0 0; color:#DFF4FF; }
.cta-band .btn--dark{ background:#06222E; }
.cta-band .btn--dark:hover{ background:#0B3140; }
/* ---------- reveal animaties ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; } .reveal-d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
/* ---------- diversen ---------- */
.pdf-links{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.pdf-link{
display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.93rem;
border:1.5px solid var(--line); border-radius:999px; padding:.55rem 1.1rem; color:var(--ink); background:#fff;
transition:all .15s ease;
}
.pdf-link:hover{ border-color:var(--brand); color:var(--brand-ink); transform:translateY(-1px); }
.dark .pdf-link{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#E4F1F7; }
.dark .pdf-link:hover{ border-color:var(--sky); color:var(--sky); }
.skip-link{ position:absolute; left:-999px; top:0; z-index:100; background:var(--brand); color:#04222E;
padding:.7rem 1.2rem; font-weight:800; border-radius:0 0 12px 0; }
.skip-link:focus{ left:0; }
/* ==========================================================================
v2 — iconen, productfoto's, bezorging, beheer, vacatures, bon, bezorg-app
========================================================================== */
/* ---------- iconen ---------- */
.ic{ display:inline-flex; width:1.25em; height:1.25em; flex:0 0 auto; vertical-align:-.22em; }
.ic svg{ width:100%; height:100%; }
.btn .ic{ width:1.15em; height:1.15em; }
.i-ico .ic, .f-ico .ic{ width:1.35em; height:1.35em; vertical-align:0; }
.chip-ic{ display:inline-flex; width:1.05em; height:1.05em; margin-right:.45em; vertical-align:-.18em; }
.chip-ic svg{ width:100%; height:100%; }
.cat-chip{ display:inline-flex; align-items:center; }
.cat-head-ic{ display:inline-flex; width:1.5rem; height:1.5rem; color:var(--brand-ink); align-self:center; }
.cat-head-ic svg{ width:100%; height:100%; }
.add-btn svg{ width:20px; height:20px; }
.cl-x{ display:inline-flex; align-items:center; justify-content:center; }
.cl-x .ic, .cl-x svg{ width:15px; height:15px; }
.play-ring svg{ width:30px; height:30px; }
/* ---------- header: logo-badge ---------- */
.brand{ flex-direction:row; align-items:center; gap:.75rem; }
.brand-badge{ width:46px; height:46px; border-radius:50%; flex:0 0 auto;
box-shadow:0 0 0 2px rgba(255,255,255,.18); }
.brand-text{ display:flex; flex-direction:column; gap:.18rem; line-height:1; }
@media (max-width:900px){ .brand-badge{ width:38px; height:38px; } }
/* ---------- productfoto's in de bestellijst ---------- */
.oi-thumb{ width:60px; height:60px; border-radius:12px; object-fit:cover; flex:0 0 auto;
box-shadow:0 4px 12px -6px rgba(11,21,26,.35); }
@media (max-width:520px){ .oi-thumb{ width:52px; height:52px; } }
/* ---------- categorie-fotostrook (header met voorbeeldfoto) ---------- */
.cat-banner{
position:relative; border-radius:var(--r-md); overflow:hidden; min-height:150px;
display:flex; align-items:flex-end; background:var(--ink-2); box-shadow:var(--shadow-md);
margin-bottom:.4rem;
}
.cat-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-banner::after{ content:""; position:absolute; inset:0;
background:linear-gradient(to right, rgba(6,14,18,.82) 0%, rgba(6,14,18,.45) 45%, rgba(6,14,18,.08) 100%); }
.cat-banner-body{
position:relative; z-index:2; display:flex; align-items:center; gap:.9rem;
padding:1.1rem 1.35rem; width:100%; flex-wrap:wrap;
}
.cat-banner .cat-head-ic{
width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.14);
backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); color:#fff;
display:flex; align-items:center; justify-content:center; padding:9px;
}
.cat-banner h2{
font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.03em;
font-size:1.9rem; margin:0; color:#fff;
}
.cat-banner .cat-note{ color:#CFE4EE; font-size:.9rem; font-weight:600; width:100%; margin-top:-.3rem; padding-left:calc(44px + .9rem); }
@media (max-width:640px){
.cat-banner{ min-height:120px; }
.cat-banner h2{ font-size:1.5rem; }
.cat-banner .cat-note{ padding-left:0; }
}
/* variant zonder foto: designstrook met groot categorie-icoon (via Beheer door foto te vervangen) */
.cat-banner--tile{
background:
radial-gradient(30rem 16rem at 108% -30%, rgba(0,176,240,.32), transparent 62%),
radial-gradient(22rem 14rem at -10% 130%, rgba(0,176,240,.14), transparent 60%),
linear-gradient(140deg, var(--ink-2), var(--ink-3));
}
.cat-banner--tile::after{ background:none; }
.banner-mark{
position:absolute; right:-14px; top:50%; transform:translateY(-50%) rotate(-8deg);
width:150px; height:150px; color:rgba(85,207,255,.16); pointer-events:none;
}
.banner-mark svg{ width:100%; height:100%; }
@media (max-width:640px){ .banner-mark{ width:110px; height:110px; } }
/* ---------- bezorging in de winkelwagen ---------- */
.cart-totals{ flex-direction:column; gap:.35rem; }
.cart-totals .t-row{ display:flex; justify-content:space-between; font-weight:600; color:var(--muted); font-size:.95rem; }
.cart-totals .t-row.t-main{ font-weight:800; color:var(--ink); font-size:1.12rem; padding-top:.35rem; border-top:1px solid var(--line); margin-top:.25rem; }
/* bezorgen = alleen contant — de waarschuwing die de klant niet mag missen */
.bezorg-cash-let-op{
background:#FFF4E0; border:1.5px solid #E8A02A; border-left-width:5px; color:#6A4A08;
border-radius:10px; padding:.65rem .8rem; margin:.2rem 0 .6rem; font-size:.92rem; line-height:1.45;
}
.bezorg-cash-let-op b{ color:#5A3D02; }
.bezorg-info{ display:none; background:rgba(0,176,240,.08); border:1px solid rgba(0,176,240,.25);
border-radius:var(--r-sm); padding:.7rem .9rem; font-size:.85rem; color:#0B4A61; margin-bottom:1rem; line-height:1.55; }
.min-warning{ display:none; gap:.55rem; align-items:center; background:rgba(228,87,61,.09);
border:1px solid rgba(228,87,61,.3); color:#A93A26; border-radius:var(--r-sm);
padding:.65rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:.9rem; }
.pc-feedback{ font-size:.84rem; font-weight:700; min-height:1.2em; margin-top:.3rem; }
.pc-feedback.is-ok{ color:#157A47; }
.pc-feedback.is-nok{ color:#A93A26; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none; }
/* ---------- kleine openingstijden-tabellen (bezorg/afhaal) ---------- */
.mini-hours{ width:100%; border-collapse:collapse; font-size:.92rem; }
.mini-hours td{ padding:.42rem 0; border-bottom:1px dashed var(--line); }
.mini-hours tr:last-child td{ border-bottom:0; }
.mini-hours td:last-child{ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.mini-hours tr.is-today td{ color:var(--brand-ink); font-weight:800; }
/* ---------- acties ---------- */
.actie-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.9rem; box-shadow:var(--shadow-md); display:flex; gap:1.3rem; align-items:flex-start; }
.actie-card + .actie-card{ margin-top:1.1rem; }
/* de actiestrook op de beginpagina: kaarten naast elkaar i.p.v. onder elkaar */
.actie-strip-rij{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:1.1rem; }
.actie-strip-rij .actie-card{ margin-top:0; }
.actie-strip-rij .actie-titel{ font-size:1.35rem; margin-bottom:.35rem; }
.actie-card .a-ico{ flex:0 0 auto; width:54px; height:54px; border-radius:16px; background:rgba(0,176,240,.13);
color:var(--brand-ink); display:flex; align-items:center; justify-content:center; }
.actie-card .a-ico .ic{ width:1.7em; height:1.7em; }
.actie-card h2{ font-size:1.35rem; margin-bottom:.35rem; }
.actie-geldig{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:700;
color:var(--brand-ink); background:rgba(0,176,240,.1); padding:.35rem .8rem; border-radius:999px; margin-top:.7rem; }
/* ---------- vacatures ---------- */
.vac-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:900px){ .vac-grid{ grid-template-columns:1fr; } }
.vac-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column; }
.vac-card img{ width:100%; height:230px; object-fit:cover; }
.vac-body{ padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.vac-body h2{ font-size:1.35rem; margin:0; }
.vac-dagen{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; color:var(--brand-ink); }
.vac-punten{ list-style:none; padding:0; margin:.2rem 0 .6rem; display:flex; flex-direction:column; gap:.45rem; }
.vac-punten li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.97rem; }
.vac-punten .ic{ color:var(--green); margin-top:.15em; }
.vac-body .btn{ align-self:flex-start; margin-top:auto; }
/* ---------- inloggen ---------- */
.auth-wrap{ max-width:440px; margin-inline:auto; }
.auth-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:2.1rem; box-shadow:var(--shadow-md); }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; background:#EDEAE2; border-radius:999px; padding:4px; margin-bottom:1.5rem; }
.auth-tabs button{ border:0; background:none; padding:.6rem; border-radius:999px; font-weight:800; color:var(--muted); }
.auth-tabs button.is-active{ background:var(--ink); color:#fff; }
.auth-note{ font-size:.86rem; color:var(--muted); }
/* ---------- e-mail bevestigd ---------- */
.eb-icon{ width:64px; height:64px; border-radius:50%; margin:0 auto 1.1rem; display:flex; align-items:center;
justify-content:center; background:rgba(11,21,26,.06); color:var(--muted); font-size:1.7rem; }
.eb-icon--ok{ background:rgba(35,189,108,.14); color:var(--green); }
.eb-icon--fout{ background:rgba(228,87,61,.14); color:var(--red); }
/* ---------- beheer ---------- */
.admin-body{ background:#EFECE5; }
.admin-shell{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:1.6rem;
padding:1.6rem 0 3rem; align-items:start; }
@media (max-width:900px){ .admin-shell{ grid-template-columns:1fr; } }
.admin-nav{ background:var(--ink); border-radius:var(--r-lg); padding:1rem; position:sticky; top:90px;
display:flex; flex-direction:column; gap:.25rem; }
.admin-nav button{ display:flex; align-items:center; gap:.7rem; background:none; border:0; color:#C9D9E0;
font-weight:700; font-size:.97rem; padding:.7rem .9rem; border-radius:12px; text-align:left; }
.admin-nav button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.admin-nav button.is-active{ background:var(--brand); color:#04222E; }
.admin-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.9rem; box-shadow:var(--shadow-md); }
.admin-panel h2{ font-size:1.45rem; display:flex; align-items:center; gap:.6rem; }
.admin-panel h3{ font-size:1.05rem; margin-top:1.6rem; }
.admin-list{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.admin-row{ display:flex; gap:.7rem; align-items:center; border:1px solid var(--line); border-radius:12px;
padding:.6rem .8rem; background:#FCFBF8; flex-wrap:wrap; }
.admin-row .grow{ flex:1; min-width:140px; font-weight:600; color:var(--ink); font-size:.95rem; }
.admin-row input[type="number"]{ width:92px; }
.admin-row input, .admin-row select{ border:1.5px solid var(--line); border-radius:9px; padding:.42rem .6rem; background:#fff; font-size:.9rem; }
.admin-row input:focus{ border-color:var(--brand); outline:none; }
.icon-btn{ border:0; background:none; color:var(--muted); display:inline-flex; padding:.35rem; border-radius:8px; }
.icon-btn:hover{ color:var(--red); background:rgba(228,87,61,.08); }
.switch{ position:relative; width:46px; height:26px; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.switch .sl{ position:absolute; inset:0; background:#D8D3C8; border-radius:999px; transition:background .2s; pointer-events:none; }
.switch .sl::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .sl{ background:var(--green); }
.switch input:checked + .sl::after{ transform:translateX(20px); }
.admin-bar{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:1.6rem;
padding-top:1.3rem; border-top:1px solid var(--line); }
.badge-demo{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(245,167,59,.14); color:#8A5A12;
font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding:.4rem .9rem; border-radius:999px; }
.pill-list{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.8rem; }
.pc-pill{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1.5px solid var(--line);
border-radius:999px; padding:.35rem .5rem .35rem .85rem; font-weight:700; font-size:.9rem; color:var(--ink);
font-variant-numeric:tabular-nums; }
.pc-pill button{ border:0; background:none; display:inline-flex; color:var(--muted); padding:.15rem; }
.pc-pill button:hover{ color:var(--red); }
/* ---------- rapportage (beheer) ---------- */
.rap-kaarten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-top:.4rem; }
.rap-kaart{ background:#FCFBF8; border:1px solid var(--line); border-radius:12px; padding:.9rem 1.1rem; }
.rap-kaart b{ display:block; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.rap-kaart span{ font-size:.82rem; color:var(--muted); }
.rap-tabel{ width:100%; border-collapse:collapse; font-size:.92rem; margin-top:.5rem; }
.rap-tabel th, .rap-tabel td{ text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); }
.rap-tabel th{ color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.rap-tabel td:not(:first-child), .rap-tabel th:not(:first-child){ text-align:right; }
/* ---------- bezorger-app ---------- */
.driver-body{ background:#0C1418; color:#DCE8ED; min-height:100vh; }
.driver-shell{ max-width:520px; margin-inline:auto; padding:1.2rem 1.1rem 4rem; }
.driver-head{ display:flex; align-items:center; gap:.9rem; padding:.6rem 0 1.2rem; }
.driver-head img{ width:44px; height:44px; border-radius:50%; }
.driver-head b{ color:#fff; font-size:1.05rem; display:block; }
.driver-head small{ color:#8FA6AF; }
.driver-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1.2rem; }
.dstat{ background:#111E24; border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:.8rem; text-align:center; }
.dstat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--sky); }
.dstat span{ font-size:.75rem; color:#8FA6AF; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.stop-card{ background:#132129; border:1px solid rgba(255,255,255,.1); border-radius:18px;
padding:1.2rem 1.2rem 1.1rem; margin-bottom:.9rem; }
.stop-card.is-done{ opacity:.45; }
.stop-top{ display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; }
.stop-nr{ width:34px; height:34px; border-radius:50%; background:var(--brand); color:#04222E;
display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto; }
.stop-card.is-active-stop{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,176,240,.18); }
.stop-top b{ color:#fff; font-size:1.02rem; }
.stop-top small{ display:block; color:#8FA6AF; }
.stop-status{ margin-left:auto; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
padding:.3rem .7rem; border-radius:999px; background:rgba(255,255,255,.08); color:#B9CCD5; }
.stop-status.s-onderweg{ background:rgba(0,176,240,.18); color:var(--sky); }
.stop-status.s-klaar{ background:rgba(35,189,108,.16); color:#5FD79A; }
.stop-items{ color:#AFC3CC; font-size:.9rem; margin:.4rem 0 .9rem; line-height:1.55; }
.stop-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.stop-actions .btn{ padding:.62rem 1.05rem; font-size:.9rem; }
.driver-note{ font-size:.82rem; color:#7E96A0; margin-top:1.6rem; line-height:1.6; }
/* ---------- bon (80mm) ---------- */
.bon-stage{ display:flex; gap:2.5rem; align-items:flex-start; flex-wrap:wrap; }
.bon{ width:302px; background:#fff; color:#111; font-family:"Courier New",ui-monospace,monospace;
font-size:12.5px; line-height:1.45; padding:16px 14px 22px; box-shadow:var(--shadow-lg);
flex:0 0 auto; }
.bon *{ font-family:inherit; }
.bon .b-center{ text-align:center; }
.bon .b-logo{ width:74px; margin:0 auto 6px; display:block; filter:grayscale(1) contrast(1.2); }
.bon h2{ font-size:17px; margin:0; letter-spacing:.5px; color:#111; font-family:inherit; }
.bon .b-sub{ font-size:11px; }
.bon hr{ border:0; border-top:1.5px dashed #111; margin:9px 0; }
.bon .b-type{ font-size:19px; font-weight:800; text-align:center; letter-spacing:2px;
border:2.5px solid #111; padding:5px 0; margin:8px 0; }
.bon table{ width:100%; border-collapse:collapse; }
.bon td{ padding:1.5px 0; vertical-align:top; }
.bon td:last-child{ text-align:right; white-space:nowrap; }
.bon .b-tot td{ font-weight:800; font-size:14.5px; padding-top:5px; }
.bon .b-opm{ border:1.5px dashed #111; padding:6px 8px; margin-top:8px; }
.bon .b-foot{ text-align:center; font-size:11px; margin-top:12px; }
/* ---------- bon op A4 ----------
Lobo print alles op de A4-printer die ze ook voor Foodticket gebruiken. Dezelfde
letter als de kassabon (Courier), maar op een vel dat een grote bestelling in één
keer kwijt kan — dat was de reden om over te stappen. Eén bestelling per vel. */
.bon--a4{ width:210mm; min-height:297mm; padding:14mm 15mm 16mm; font-size:13.5px; line-height:1.5; }
.bon--a4 .b-kop{ display:flex; justify-content:space-between; align-items:flex-start; gap:10mm; }
.bon--a4 .b-kop .b-center{ text-align:left; display:flex; gap:10px; align-items:center; }
.bon--a4 .b-kop .b-logo{ width:58px; margin:0; display:block; }
.bon--a4 .b-kop img{ width:58px; height:58px; filter:grayscale(1) contrast(1.2); flex:0 0 auto; }
.bon--a4 h2{ font-size:21px; }
.bon--a4 .b-sub{ font-size:12px; }
.bon--a4 .b-nr{ text-align:right; font-weight:800; font-size:26px; letter-spacing:1px; white-space:nowrap; }
.bon--a4 .b-nr small{ display:block; font-size:12px; font-weight:400; letter-spacing:0; }
.bon--a4 .b-type{ font-size:27px; padding:8px 0; letter-spacing:4px; margin:10px 0; }
.bon--a4 hr{ margin:11px 0; }
.bon--a4 #kb-meta, .bon--a4 #kb-klant{ font-size:14px; }
.bon--a4 #kb-klant b{ font-size:17px; }
.bon--a4 table{ table-layout:fixed; }
.bon--a4 #kb-items td{ padding:5px 0; border-bottom:1px dotted #999; }
.bon--a4 #kb-items tr{ break-inside:avoid; page-break-inside:avoid; }
.bon--a4 #kb-items td:first-child{ font-size:15px; }
.bon--a4 #kb-items td:last-child{ width:28mm; }
.bon--a4 #kb-totalen td{ padding:2px 0; }
.bon--a4 #kb-totalen td:last-child{ width:32mm; }
.bon--a4 .b-tot td{ font-size:19px; padding-top:7px; }
.bon--a4 .b-leg{ font-size:17px; border:2.5px solid #111; padding:6px 0; margin-top:8px; }
.bon--a4 .b-opm{ padding:9px 11px; margin-top:11px; font-size:14px; }
.bon--a4 .b-foot{ font-size:12px; margin-top:16px; }
@media print{
/* Lobo print op de A4-printer die ook de Foodticket-bonnen uitdraait; een aparte
bonprinter van 80 mm is er niet. Eén bestelling per vel — bij een grote bestelling
loopt hij door op een tweede vel in plaats van dat er regels wegvallen.
Alles behalve de bon gaat op `display:none` en niet op `visibility:hidden`. Dat
laatste maakt het onzichtbaar maar houdt de ruimte bezet: op een rol papier merk je
dat niet, op A4 rolt er een half pak lege vellen uit. */
@page{ size:A4 portrait; margin:14mm 15mm; }
body.bon-body{ background:#fff; }
body.bon-body > *{ display:none !important; }
body.bon-body > main{ display:block !important; max-width:none; width:auto;
padding:0 !important; margin:0 !important; }
body.bon-body main > *{ display:none !important; }
body.bon-body main > .bon-stage{ display:block !important; gap:0; }
body.bon-body .bon-stage > *{ display:none !important; }
body.bon-body .bon-stage > .bon{ display:block !important; box-shadow:none;
width:auto; min-height:0; padding:0; }
}
/* ---------- flow-diagram (hoe komt de bon binnen) ---------- */
.flow{ display:flex; flex-direction:column; gap:.65rem; margin-top:1.2rem; max-width:520px; }
.flow-step{ display:flex; gap:.9rem; align-items:flex-start; background:var(--card); border:1px solid var(--line);
border-radius:14px; padding:.9rem 1.05rem; }
.dark .flow-step{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.flow-step .f-nr{ width:28px; height:28px; border-radius:50%; background:var(--brand); color:#04222E;
font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.flow-step b{ display:block; color:var(--ink); font-size:.97rem; }
.dark .flow-step b{ color:#fff; }
.flow-step span{ font-size:.9rem; color:var(--muted); }
.dark .flow-step span{ color:#9FB4BD; }
/* ---------- klantportaal: statustrack + live kaart ---------- */
.os-track{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.os-step{ flex:1; min-width:100px; text-align:center; padding:.55rem .5rem; border-radius:10px;
background:#F1EEE6; color:var(--muted); font-weight:700; font-size:.82rem; border:1.5px solid transparent; }
.os-step.is-done{ background:rgba(35,189,108,.14); color:#157A47; }
.os-step.is-active{ background:var(--brand); color:#04222E; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,176,240,.2); }
.os-map-wrap{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); margin-top:.8rem; height:260px; }
.os-map-wrap iframe{ width:100%; height:100%; border:0; display:block; }
/* ---------- keuken.html: live orderscherm ---------- */
/* Bonnenrail: vier bonnen naast elkaar (oudste links), en voor de volgende veeg je naar
rechts — zoals een bonnenrail boven de bakwand. Bewust géén rijen onder elkaar: een
lange bestelling maakt zijn eigen kolom langer, maar duwt de rest niet uit beeld.
Op een smaller scherm worden de kolommen niet smaller dan 270px (anders wordt de bon
te krap) — dan schuiven er gewoon minder tegelijk in beeld. */
/* Kolommen, zoals de zaak gewend is van het oude kassascherm: lezen van boven naar
beneden en dan een kolom naar rechts. Vijf kaarten onder elkaar, allemaal even hoog,
en alles schaalt mee met het scherm: op een lager scherm worden het er vanzelf vier
of drie. Wat niet meer past schuift naar rechts en is met een veeg te bereiken. */
:root{ --k-rijen:5; --k-hoogte:calc(100vh - 200px); }
@media (max-height: 900px){ :root{ --k-rijen:4; } }
@media (max-height: 700px){ :root{ --k-rijen:3; } }
.kitchen-grid{ height:var(--k-hoogte); min-height:380px; margin-top:1.1rem;
/* de helft breder dan de eerste opzet (was 272px): alles moet in één oogopslag
leesbaar zijn, ook "Bezorger…" en een lang adres. Minder kolommen in beeld is
prima — leesbaarheid wint van dichtheid (wens Maico). */
columns:400px 5; column-gap:.9rem; column-fill:auto; overflow-x:auto; overflow-y:hidden;
padding-bottom:.4rem; }
.kitchen-grid > *{ break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:.8rem;
/* vaste hoogte: precies --k-rijen kaarten per kolom, tot op de pixel */
height:calc((var(--k-hoogte) - (var(--k-rijen) - 1) * .8rem - 2px) / var(--k-rijen));
overflow:hidden; }
.k-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem 1.2rem;
box-shadow:var(--shadow-md); border-left:5px solid var(--amber); }
.k-card.k-bezorgen{ border-left-color:var(--sky, var(--brand)); }
.k-card.k-nieuw{ border-left-color:var(--red); }
.k-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; margin-bottom:.5rem; }
.k-card-top b{ font-size:1.05rem; color:var(--ink); }
.k-card-top small{ display:block; color:var(--muted); font-size:.8rem; }
.k-pill{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.25rem .6rem;
border-radius:999px; background:#F1EEE6; color:var(--muted); white-space:nowrap; }
.k-card ul{ list-style:none; margin:.6rem 0; padding:0; font-size:.92rem; color:var(--text); }
.k-card ul li{ padding:.15rem 0; }
.k-card-actions{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
/* keuzegroepen op de bestelpagina: samenvattingsregel + uitklappaneel */
.oi-keuze-kop{ display:block; width:100%; text-align:left; background:rgba(0,176,240,.07);
border:1px solid rgba(0,176,240,.28); border-radius:var(--r-sm); padding:.45rem .65rem;
margin:.4rem 0 0; cursor:pointer; font:inherit; font-size:.84rem; line-height:1.35; color:var(--text); }
.oi-keuze-kop:hover{ border-color:var(--brand); }
.oi-keuze-kop b{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
color:var(--brand-ink); }
.oi-keuze-kop span{ color:var(--muted); }
.oi-keuze-kop.is-onaf{ background:rgba(245,167,59,.14); border-color:rgba(245,167,59,.5); }
.oi-keuze-kop.is-onaf b{ color:#9A6410; }
/* bij de hamburger zijn het 22 opties; met een maximale hoogte blijft de rest van de
menukaart in beeld in plaats van een halve pagina naar beneden geduwd te worden */
.oi-keuzes{ margin:.5rem 0 .2rem; display:grid; gap:.7rem; max-height:min(46vh, 380px);
overflow-y:auto; overscroll-behavior:contain; padding-right:.2rem; }
/* Het keuzepaneel hoort over de volle breedte van de kaart, niet in de smalle
tekstkolom naast de prijs — anders passen er op een telefoon nog geen twee chips
naast elkaar. De kaart mag daarvoor afbreken zodra het paneel openstaat. */
.order-item:has(.oi-keuzes:not([hidden])){ flex-wrap:wrap; align-items:flex-start; }
.order-item:has(.oi-keuzes:not([hidden])) .oi-info{ flex:1 1 100%; }
.oi-keuzes{ width:100%; }
@supports not (selector(:has(*))){
/* oudere browsers: dan blijft het paneel in de kolom staan, maar wel bruikbaar */
.oi-keuzes{ min-width:min(100%, 20rem); }
}
/* allergenenfilter in de filterbalk */
.allerg-tel{ margin-left:.35rem; min-width:1.15rem; height:1.15rem; display:inline-flex;
align-items:center; justify-content:center; border-radius:999px; background:var(--brand);
color:#fff; font-size:.68rem; font-weight:800; }
.allerg-paneel{ margin:.6rem 0 .2rem; padding:.8rem .9rem; border:1px solid var(--line);
border-radius:var(--r-sm); background:var(--card); }
.allerg-uitleg{ margin:0 0 .6rem; font-size:.8rem; line-height:1.45; color:var(--muted); }
.allerg-uitleg b{ color:var(--ink); }
.allerg-paneel .allerg-ic{ display:inline-flex; width:14px; height:14px; }
.allerg-paneel .allerg-ic svg{ width:100%; height:100%; }
.keuze-groep{ border:0; padding:0; margin:0; }
.keuze-groep legend{ display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800;
text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 0 .35rem; }
.keuze-verplicht{ font-style:normal; font-size:.62rem; letter-spacing:.08em; padding:.1rem .34rem;
border-radius:999px; background:var(--amber); color:#3B2A08; }
/* chips: één tik = aan of uit. Gevuld betekent "zit erop". */
.keuze-chips{ display:flex; flex-wrap:wrap; gap:.34rem; }
.keuze-chip{ display:inline-flex; align-items:center; gap:.28rem; padding:.34rem .62rem;
border:1.5px solid var(--line); border-radius:999px; background:var(--card);
font-size:.83rem; line-height:1.2; cursor:pointer; user-select:none;
transition:background .12s ease, border-color .12s ease, color .12s ease; }
.keuze-chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.keuze-chip:hover{ border-color:var(--brand); }
.keuze-chip.is-aan{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; }
/* ingrediënt dat op is: grijs, doorgestreept en onklikbaar — de pill in Beheer bepaalt dit */
.keuze-chip.is-op{ opacity:.45; pointer-events:none; background:#EFEDE7; border-style:dashed; }
.keuze-chip.is-op .chip-tekst{ text-decoration:line-through; }
.keuze-chip.is-op::after{ content:'op'; font-size:.68rem; font-weight:800; text-transform:uppercase;
letter-spacing:.05em; color:#A31515; margin-left:.15rem; }
.keuze-chip.is-aan .chip-tekst::before{ content:'✓'; margin-right:.28rem; font-weight:800; }
.keuze-chip input:focus-visible + .chip-tekst{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.chip-plus{ font-style:normal; font-size:.74rem; font-weight:800; color:var(--brand-ink); }
.keuze-chip.is-aan .chip-plus{ color:#EAF8FF; }
.keuze-chip.heeft-prijs:not(.is-aan){ border-style:dashed; }
.keuze-herstel{ margin-top:.4rem; background:none; border:0; padding:.1rem 0; font:inherit;
font-size:.76rem; font-weight:700; color:var(--brand-ink); cursor:pointer; text-decoration:underline; }
.kitchen-empty{ text-align:center; color:var(--muted); padding:3rem 1rem; font-size:1.05rem; }
/* 18+ — moet niet te missen zijn, want de bezorger staat straks aan de deur */
.k-legitimatie{ margin:.5rem 0 0; padding:.4rem .7rem; border-radius:8px; font-size:.82rem;
font-weight:800; letter-spacing:.04em; background:var(--red); color:#fff; text-align:center; }
.b-leg{ margin-top:.4rem; text-align:center; font-weight:700; }
.stop-legitimatie{ margin:.35rem 0 0; padding:.35rem .6rem; border-radius:8px;
background:rgba(228,87,61,.22); color:#FFD3C9; font-size:.82rem; font-weight:800; }
/* bestelregel op het keukenscherm: naam boven, samenstelling eronder */
.k-item-kop{ display:block; font-weight:700; color:var(--ink); }
.k-item-opties{ display:block; font-size:.84rem; color:var(--muted); line-height:1.35; padding-left:.9rem; }
.k-item-opties b{ color:var(--red); font-weight:800; }
/* annuleren vanuit de keuken */
.btn--gevaar{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--gevaar:hover{ background:#C8452D; border-color:#C8452D; color:#fff; }
.k-dialog{ border:0; border-radius:var(--r-md); padding:1.5rem 1.6rem; max-width:520px; width:calc(100% - 2rem);
box-shadow:var(--shadow-lg); color:var(--text); background:var(--card); }
.k-dialog::backdrop{ background:rgba(11,21,26,.55); }
.ka-keuzes{ display:grid; gap:.45rem; }
.ka-keuze{ display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .85rem; border:1.5px solid var(--line);
border-radius:var(--r-sm); cursor:pointer; font-size:.95rem; line-height:1.35; }
.ka-keuze:hover{ border-color:var(--brand); }
.ka-keuze input{ margin-top:.15rem; accent-color:var(--brand); flex:none; }
.ka-keuze.is-aan{ border-color:var(--brand); background:rgba(0,176,240,.07); }
.ka-voorbeeld{ margin:.9rem 0 0; padding:.7rem .85rem; border-radius:var(--r-sm); font-size:.88rem;
background:rgba(228,87,61,.1); color:var(--text); min-height:1.2rem; }
/* ---------- ingrediënten op/beschikbaar (beheer) ---------- */
.ing-pills{ display:flex; flex-wrap:wrap; gap:.55rem; }
.ing-pill{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; cursor:pointer;
border:2px solid var(--line); border-radius:14px; background:var(--card); padding:.55rem .85rem;
min-width:130px; text-align:left; transition:border-color .12s, background .12s; }
.ing-pill:hover{ border-color:var(--brand); }
.ing-pill b{ font-size:.95rem; color:var(--ink); }
.ing-pill small{ font-size:.74rem; color:var(--muted); }
.ing-pill.is-op{ border-color:rgba(200,42,42,.55); background:rgba(200,42,42,.08); }
.ing-pill.is-op b{ color:#A31515; text-decoration:line-through; }
.ing-pill.is-op small{ color:#A31515; font-weight:700; }
/* ---------- productdialoog (beheer) ---------- */
.pd-keuzes{ max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-sm);
padding:.5rem; display:grid; gap:.35rem; }
.pd-keuze{ display:flex; gap:.55rem; align-items:flex-start; padding:.45rem .55rem; border-radius:10px;
cursor:pointer; border:1.5px solid transparent; }
.pd-keuze:hover{ background:rgba(0,176,240,.06); }
.pd-keuze.is-aan{ border-color:var(--brand); background:rgba(0,176,240,.08); }
.pd-keuze input{ margin-top:.2rem; accent-color:var(--brand); flex:none; }
.pd-keuze b{ display:block; font-size:.9rem; color:var(--ink); }
.pd-keuze small{ color:var(--muted); font-size:.78rem; }
/* ---------- kasafsluiting (beheer) ---------- */
.kas-kaart{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:var(--shadow-md); }
.kas-kop{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
margin-bottom:.6rem; }
.kas-kop b{ font-size:1.1rem; color:var(--ink); }
.kas-kop span{ font-size:.85rem; color:var(--muted); }
.kas-tabel{ width:100%; border-collapse:collapse; font-size:.95rem; }
.kas-tabel td{ padding:.32rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.kas-tabel td:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kas-tabel small{ display:block; color:var(--muted); font-size:.78rem; }
.kas-tabel .kas-verwacht td{ font-weight:800; font-size:1.05rem; color:var(--ink);
border-bottom:2px solid var(--ink); padding-top:.5rem; }
.kas-tabel .kas-los td{ color:var(--muted); }
.kas-invoer{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.9rem; }
.kas-invoer .field{ min-width:150px; }
.kas-invoer .field.grow{ flex:1; min-width:220px; }
.kas-verschil{ margin-top:.6rem; font-weight:700; font-size:.98rem; min-height:1.2rem; }
.kas-verschil.is-goed{ color:#157A47; }
.kas-verschil.is-kort{ color:#A31515; }
.kas-verschil.is-over{ color:#9A6215; }
.kas-ritten{ margin-top:.9rem; border-top:1px solid var(--line); padding-top:.7rem; }
.kas-ritten summary{ cursor:pointer; font-weight:700; font-size:.9rem; color:var(--brand-ink); }
.kas-ritten-inhoud{ margin-top:.6rem; overflow-x:auto; }
.kas-rittentabel{ font-size:.88rem; }
.kas-rittentabel th{ text-align:left; color:var(--muted); font-weight:700; padding:.3rem 0; }
.kas-rittentabel td:last-child, .kas-rittentabel th:last-child{ text-align:right; }
.kas-rittentabel td:nth-child(n+4), .kas-rittentabel th:nth-child(n+4){ text-align:right; white-space:nowrap; }
/* ---------- afrekenen bij de deur (bezorger-app) ----------
Grote vlakken en grote cijfers: dit gebeurt buiten, in het donker, met een tas in de
andere hand. Alles moet met één duim te bedienen zijn. */
.bz-af-klant{ margin:0 0 .9rem; color:var(--muted); font-size:.92rem; }
.bz-af-bedrag{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
padding:.75rem .95rem; border-radius:var(--r-sm); background:rgba(0,176,240,.09);
font-size:.95rem; color:var(--text); }
.bz-af-bedrag b{ font-size:1.7rem; color:var(--ink); }
.bz-af-melding{ margin-top:.9rem; padding:.8rem .95rem; border-radius:var(--r-sm);
background:rgba(35,189,108,.13); color:#136F42; font-weight:600; font-size:.95rem; }
.bz-af-wijzen{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1rem; }
.bz-af-wijze{ padding:1.1rem .6rem; border:2px solid var(--line); border-radius:var(--r-sm);
background:var(--card); color:var(--ink); font-weight:800; font-size:1.15rem; cursor:pointer; }
.bz-af-wijze:hover{ border-color:var(--brand); }
.bz-af-wijze.is-aan{ border-color:var(--brand); background:var(--brand); color:#04222E; }
.bz-af-label{ display:block; margin:1.1rem 0 .35rem; font-weight:700; font-size:.92rem; color:var(--ink); }
.bz-af-veld{ display:flex; align-items:center; gap:.5rem; border:2px solid var(--line);
border-radius:var(--r-sm); padding:.5rem .8rem; }
.bz-af-veld:focus-within{ border-color:var(--brand); }
.bz-af-veld span{ font-size:1.4rem; font-weight:800; color:var(--muted); }
.bz-af-veld input{ flex:1; border:0; outline:0; background:none; font:inherit; font-size:1.7rem;
font-weight:800; color:var(--ink); width:100%; padding:.1rem 0; }
.bz-af-snel{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.bz-af-snel button{ border:1.5px solid var(--line); border-radius:999px; background:var(--card);
color:var(--ink); font-weight:700; font-size:.95rem; padding:.45rem .9rem; cursor:pointer; }
.bz-af-snel button:hover{ border-color:var(--brand); }
.bz-af-uitkomst{ margin-top:.8rem; font-size:1.05rem; font-weight:700; color:var(--ink); min-height:1.4rem; }
.bz-af-uitkomst small{ display:block; font-weight:500; font-size:.85rem; color:var(--muted); }
/* "maak er 28 van": het bedrag waarop je afrekent, los van wat de klant geeft */
.bz-af-afreken{ display:flex; flex-wrap:wrap; gap:.45rem; }
.bz-af-chip{ border:2px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink);
font-weight:800; font-size:1rem; padding:.6rem 1rem; cursor:pointer; min-height:44px; }
.bz-af-chip:hover{ border-color:var(--brand); }
.bz-af-chip.is-aan{ border-color:#23BD6C; background:#23BD6C; color:#fff; }
.bz-af-chip--anders{ font-weight:700; color:var(--muted); }
.bz-af-chip--anders.is-aan{ color:#fff; }
.bz-af-acties{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.3rem; flex-wrap:wrap; }
.bz-af-acties .btn{ min-height:48px; }
@media (max-width:420px){
.bz-af-acties{ flex-direction:column-reverse; }
.bz-af-acties .btn{ width:100%; }
}
.ka-voorbeeld:empty{ display:none; }
.k-print{ display:none; }
@media print{
/* zelfde reden als hierboven: het keukenscherm is lang, dus alles wat niet de bon is
moet écht weg en niet alleen onzichtbaar */
@page{ size:A4 portrait; margin:14mm 15mm; }
body.printing-ticket{ background:#fff; }
body.printing-ticket > *{ display:none !important; }
body.printing-ticket .k-print{ display:block !important; position:static; width:auto; }
body.printing-ticket .bon--a4{ width:auto; min-height:0; padding:0; box-shadow:none;
/* iPad/Safari drukt achtergrondkleuren standaard niet af — zonder dit verdwijnt
de zwarte AFHALEN/BEZORGEN-balk van de bon */
-webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
/* ---------- iDEAL-betaaldemo (bestellen.html) ---------- */
.ideal-modal{ position:fixed; inset:0; background:rgba(11,21,26,.55); z-index:200;
display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.ideal-modal-card{ background:var(--card); border-radius:var(--r-lg); padding:1.8rem 1.6rem;
max-width:380px; width:100%; box-shadow:var(--shadow-lg); text-align:center; }
.ideal-service-note{ font-size:.82rem; color:var(--muted); line-height:1.5; margin:.45rem 0 0; }
.ideal-opbouw{ font-size:.85rem; color:var(--muted); margin:.2rem 0 0; }
.ideal-demo-label{ display:inline-block; background:rgba(245,167,59,.16); color:#8A5A12; font-weight:800;
font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; margin-bottom:.7rem; }
.ideal-modal-card h3{ margin:.2rem 0 .5rem; font-size:1.25rem; }
.ideal-bedrag-regel{ font-weight:800; font-size:1.1rem; color:var(--ink); margin:0 0 .3rem; }
.ideal-banken{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.4rem; }
.ideal-bank-btn{ border:1.5px solid var(--line); background:#fff; border-radius:12px; padding:.75rem .6rem;
font-weight:700; font-size:.92rem; color:var(--ink); transition:border-color .15s, background .15s; }
.ideal-bank-btn:hover{ border-color:var(--brand); background:rgba(0,176,240,.06); }
.ideal-spinner{ width:38px; height:38px; border-radius:50%; border:4px solid var(--line);
border-top-color:var(--brand); margin:0 auto; animation:ideal-spin .8s linear infinite; }
@keyframes ideal-spin{ to{ transform:rotate(360deg); } }
/* ---------- allergenen-pictogrammen (bestelpagina) ---------- */
.oi-allerg{ display:flex; gap:.3rem; align-items:center; margin-top:.4rem; background:none; border:0; padding:0; cursor:pointer; }
.allerg-ic{ width:21px; height:21px; border-radius:50%; border:1.5px solid rgba(11,21,26,.22); color:var(--muted);
display:inline-flex; align-items:center; justify-content:center; background:#fff; flex:0 0 auto; }
.allerg-ic svg{ width:13px; height:13px; }
.oi-allerg:hover .allerg-ic{ border-color:var(--brand); color:var(--brand); }
.allerg-legend{ display:flex; flex-wrap:wrap; gap:.55rem 1.05rem; margin-top:1rem; font-size:.85rem; color:var(--muted); }
.allerg-legend .lg{ display:inline-flex; align-items:center; gap:.4rem; }
/* ---------- aantal-stepper op de productkaart ---------- */
.qty-step{ flex:0 0 auto; display:flex; align-items:center; gap:.55rem; }
.step-min{
width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); background:#fff; color:var(--ink);
font-size:1.3rem; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center;
transition:background .15s ease, transform .15s ease; cursor:pointer;
}
.step-min:hover{ background:var(--ink); color:#fff; }
.step-min:active{ transform:scale(.95); }
.step-count{ min-width:1.4em; text-align:center; font-weight:800; font-size:1.08rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.qty-step.is-zero .step-min, .qty-step.is-zero .step-count{ display:none; }
/* ---------- compacte keuze-knop (saus bij friet/snacks) ---------- */
.opt-toggle{
margin-top:.5rem; background:none; border:1.5px dashed var(--line); border-radius:999px;
padding:.32rem .85rem; font-size:.86rem; font-weight:700; color:var(--muted); cursor:pointer;
transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.opt-toggle:hover{ border-color:var(--brand); color:var(--brand); }
.opt-toggle.is-gekozen{ border-style:solid; border-color:var(--brand); color:var(--ink); background:rgba(0,176,240,.09); }
/* ---------- vervoermiddel-keuze in de bezorger-app ---------- */
.nav-modus{ display:flex; align-items:center; gap:.5rem; margin-top:1.2rem; flex-wrap:wrap; }
.nav-modus span{ color:#8FA6AF; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-right:.2rem; }
.nav-modus button{
border:1.5px solid rgba(255,255,255,.2); background:#132129; color:#DCE8ED;
border-radius:999px; padding:.4rem 1rem; font-size:.9rem; font-weight:700; cursor:pointer;
}
.nav-modus button.is-active{ background:var(--brand); border-color:var(--brand); color:#04222E; }
/* ---------- filterbalk + favorieten (bestelpagina) ---------- */
.menu-filter{ display:flex; gap:.55rem; align-items:center; margin-top:.6rem; }
.menu-filter input{
flex:1; min-width:0; border:1.5px solid var(--line); border-radius:999px; padding:.55rem 1rem;
background:#fff; font-size:.95rem; color:var(--ink);
}
.menu-filter input:focus{ border-color:var(--brand); outline:none; }
@media (max-width:380px){
/* zeer smalle schermen: de filterknoppen alleen als icoon, anders duwen
"Allergenen" + "Favorieten" samen de pagina breder dan het scherm */
.menu-filter .fav-filter span{ display:none; }
.fav-filter{ padding:.5rem .7rem; }
}
.fav-filter{
flex:0 0 auto; border:1.5px solid var(--line); background:#fff; color:var(--ink);
font-weight:700; font-size:.93rem; padding:.5rem 1.05rem; border-radius:999px; cursor:pointer;
display:inline-flex; align-items:center; gap:.4rem; transition:all .15s ease;
}
.fav-filter:hover{ border-color:#E23D4E; color:#E23D4E; }
.fav-filter[aria-pressed="true"]{ background:#E23D4E; border-color:#E23D4E; color:#fff; }
.fav-btn{
flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
background:#fff; color:#B9C4C9; display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .15s ease; margin-right:.1rem;
}
.fav-btn:hover{ border-color:#E23D4E; color:#E23D4E; }
.fav-btn[aria-pressed="true"]{ border-color:#E23D4E; color:#E23D4E; background:rgba(226,61,78,.09); }
.fav-btn svg{ width:18px; height:18px; }
.filter-leeg{ text-align:center; color:var(--muted); padding:2.5rem 1rem; font-size:1rem; display:none; }
/* ===== kaart pas laden na een klik (privacy: geen Google-verzoek vóór toestemming) ===== */
.kaart-knop{
position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer;
background:var(--ink); display:block; overflow:hidden;
}
.kaart-knop img{ width:100%; height:100%; object-fit:cover; opacity:.35; }
.kaart-knop span{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:.45rem; color:#fff; font-weight:800; font-size:1.05rem;
text-align:center; padding:1.2rem;
}
.kaart-knop small{ font-weight:500; font-size:.82rem; color:#C9D9E0; max-width:26ch; line-height:1.35; }
.kaart-knop:hover img{ opacity:.5; }
.kaart-knop:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }
/* [hidden] werkt alleen als geen enkele regel er een eigen display overheen zet.
Knoppen en de tip hieronder hebben wél een display, dus dit moet er expliciet bij. */
[hidden]{ display:none !important; }
/* ===== bezorger-app op het beginscherm (PWA) ===== */
.pwa-tip{
display:flex; align-items:center; gap:.9rem; margin:1.1rem 0 0;
background:#132129; border:1px solid rgba(255,255,255,.12); border-radius:14px;
padding:.85rem 1rem; color:#DCE8ED;
}
.pwa-tip b{ display:block; font-size:.95rem; color:#fff; }
.pwa-tip span{ display:block; font-size:.84rem; color:#8FA6AF; line-height:1.4; margin-top:.15rem; }
.pwa-tip-knoppen{ margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.pwa-sluit{
background:none; border:0; color:#8FA6AF; font-size:1.5rem; line-height:1;
padding:0 .2rem; cursor:pointer;
}
.pwa-sluit:hover{ color:#fff; }
.offline-balk{
position:fixed; left:0; right:0; bottom:0; z-index:60;
background:#B3261E; color:#fff; font-size:.86rem; font-weight:600;
padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); text-align:center;
}
/* in app-weergave is er geen adresbalk: wat extra ruimte boven en onder */
@media (display-mode: standalone){
.driver-shell{ padding-top:calc(1.2rem + env(safe-area-inset-top)); padding-bottom:calc(4rem + env(safe-area-inset-bottom)); }
}
/* lichte variant van de installatietip, voor het keukenscherm (lichte achtergrond) */
.pwa-tip--licht{
background:#fff; border-color:var(--line); color:var(--text);
}
.pwa-tip--licht b{ color:var(--ink); }
.pwa-tip--licht span{ color:var(--muted); }
.pwa-tip--licht .pwa-sluit{ color:var(--muted); }
.pwa-tip--licht .pwa-sluit:hover{ color:var(--ink); }
/* draait het scherm als geïnstalleerde app? dan is de knop "Volledig scherm" overbodig,
en is er geen adresbalk meer die de veilige marges regelt */
@media (display-mode: standalone), (display-mode: fullscreen){
#btn-fullscreen{ display:none; }
.admin-body .site-header{ padding-top:env(safe-area-inset-top); }
.driver-shell{
padding-top:calc(1.2rem + env(safe-area-inset-top));
padding-bottom:calc(4rem + env(safe-area-inset-bottom));
}
}
/* publiceerbalk onder de menukaart — zelfde actie als in het Publiceren-paneel, maar
op de plek waar je net iets hebt aangepast */
.pub-balk{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.pub-balk > div:first-child b{ display:block; color:var(--ink); font-size:1rem; }
.pub-balk > div:first-child span{ color:var(--muted); font-size:.9rem; }
.pub-balk-actie{ text-align:right; }
@media (max-width:640px){
.pub-balk{ flex-direction:column; align-items:stretch; }
.pub-balk-actie{ text-align:left; }
.pub-balk-actie .btn{ width:100%; }
}
/* ---- e-mailadres bevestigen (bestelpagina) --------------------------------------
Twee tekstknoppen onder het codeveld. Bewust