/* ==========================================================================
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); }
/* v227: onder de bestelstatus — in de zaak kun je bestellen tot sluitingstijd */
.hero-locatie{ margin:-.75rem 0 1.4rem .35rem; font-size:.92rem; line-height:1.45; color:rgba(255,255,255,.8); max-width:62ch; }
.hero-locatie[hidden]{ display:none; }
.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; }
/* v126 — de kop van de bestelpagina.
Op de andere pagina's mag de kop ruim zijn; daar kom je om te lezen. Hier kom je om
te kiezen, en stond het eerste product 1034 px naar beneden — anderhalf scherm op
een iPhone SE. Alles staat er nog, maar strakker, en de voorwaarden zitten op een
telefoon achter één regel. */
/* ook op een breed scherm hoeft deze kop niet zo hoog als die van "Over ons" */
.page-hero--bestellen{ padding: calc(var(--header-h) + clamp(1.6rem,3.4vw,2.8rem)) 0 clamp(1.6rem,2.6vw,2.2rem); }
.page-hero--bestellen h1{ font-size:clamp(2.4rem,4.6vw,3.4rem); }
.hero-voorwaarden{ margin:.9rem 0 0; font-size:.92rem; color:#AFC4CD; }
.hero-voorwaarden > p{ margin:.5rem 0 0; }
.hero-voorwaarden > summary{
cursor:pointer; font-weight:700; color:#fff; list-style:none;
display:inline-flex; align-items:center; gap:.4rem; padding:.2rem 0;
}
.hero-voorwaarden > summary::-webkit-details-marker{ display:none; }
.hero-voorwaarden > summary::after{
content:""; width:.5rem; height:.5rem; border-right:2px solid currentColor;
border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
transition:transform .18s;
}
.hero-voorwaarden[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
@media (min-width:761px){
/* breed genoeg: geen open/dicht-spelletje, gewoon tonen */
.hero-voorwaarden > summary{ display:none; }
.hero-voorwaarden > p{ margin-top:0; }
}
@media (max-width:760px){
.page-hero--bestellen{
padding: calc(var(--header-h) + 1.1rem) 0 1.4rem;
}
.page-hero--bestellen h1{ font-size:clamp(1.9rem,8.5vw,2.7rem); margin-bottom:.25em; }
/* de tussenzin herhaalt wat de titel al zegt; op een klein scherm kost hij drie
regels die je van de kaart afhouden. Hij blijft in de HTML staan voor zoekmachines
en schermlezers. */
.page-hero--bestellen .lead{
position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.page-hero--bestellen .hero-status{ margin-top:.9rem; }
.page-hero--bestellen .pdf-links{ margin-top:.8rem; }
}
.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; }
/* v105: bladeren door de categorieën met een muis (zie bestellen.js). De pijltjes en de
vervaging verschijnen alleen als er écht meer is dan er past, en alleen op een apparaat
met een muis — op touch is vegen vanzelfsprekend. */
.cat-schuif{ position:relative; }
.cat-pijl{ display:none; }
@media (hover:hover) and (pointer:fine){
.cat-schuif.kan-links::before,
.cat-schuif.kan-rechts::after{
content:""; position:absolute; top:0; bottom:0; width:52px; pointer-events:none; z-index:1;
}
.cat-schuif.kan-links::before{ left:0; background:linear-gradient(90deg, var(--paper, #F7F5F0), rgba(247,245,240,0)); }
.cat-schuif.kan-rechts::after{ right:0; background:linear-gradient(270deg, var(--paper, #F7F5F0), rgba(247,245,240,0)); }
.cat-schuif.kan-links .cat-pijl--links,
.cat-schuif.kan-rechts .cat-pijl--rechts{ display:grid; }
.cat-pijl{
position:absolute; top:50%; transform:translateY(-50%); z-index:2;
place-items:center; width:30px; height:30px; padding:0; border-radius:50%;
border:1.5px solid var(--line); background:#fff; color:var(--ink);
font-size:1.15rem; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(11,21,26,.16);
}
.cat-pijl:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cat-pijl:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.cat-pijl--links{ left:-2px; }
.cat-pijl--rechts{ right:-2px; }
}
.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{
/* v126 — waar een categorie moet stoppen als je ernaartoe springt.
Dit stond op een vaste 150 px, maar de plakkende balk is op een telefoon 222 px
hoog en op een breed scherm 177 px: klikte je op "Broodjes", dan verdween de kop
van die categorie voor een deel achter de balk. bestellen.js meet de balk en zet
--plak-hoogte; de 150 px hieronder is alleen de terugval. */
scroll-margin-top:calc(var(--plak-hoogte, 150px) + .6rem);
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-top wordt door bestellen.js gemeten: de onderkant van de vaste balk met de
categorieën, de zoekbalk en (als hij openstaat) het allergenenpaneel. Stond hier eerst
als vaste 136px, maar die balk is hoger dan dat — daardoor schoof de kop van het
bestelpaneel eronder. De waarde hieronder is alleen de terugval als het meten (nog)
niet gebeurd is. */
.cart-panel{
position:sticky; top:var(--cart-top, 196px); 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; white-space:nowrap; }
.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; }
/* v223: wat bij "opnieuw bestellen" niet terug in de mand kon */
.cart-herhaal-mis{ display:flex; gap:.5rem; align-items:flex-start; margin:0 0 .6rem; padding:.65rem .75rem;
border:1.5px solid rgba(245,167,59,.6); background:rgba(245,167,59,.12); border-radius:12px; font-size:.88rem; line-height:1.4; color:var(--text); }
.cart-herhaal-mis p{ margin:0; flex:1; min-width:0; }
.cart-herhaal-mis b{ color:var(--ink); }
.cart-herhaal-dicht{ border:0; background:none; color:var(--muted); padding:.3rem; margin:-.2rem -.25rem 0 0; border-radius:8px;
display:inline-flex; flex:none; cursor:pointer; }
.cart-herhaal-dicht:hover{ color:var(--ink); background:rgba(11,21,26,.08); }
.cart-herhaal-dicht svg{ width:1.05rem; height:1.05rem; }
.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; }
/* v230: het aantal in de mand is een knop — tik en typ het aantal */
.cl-qty-knop{ font:inherit; font-weight:800; color:var(--brand-ink); background:transparent;
border:1px dashed color-mix(in srgb, var(--brand-ink) 35%, transparent); border-radius:.45rem;
padding:.1rem .35rem; min-height:2rem; cursor:text; }
.cl-qty-knop:hover, .cl-qty-knop:focus-visible{ border-style:solid; }
.cl-qty-invoer{ width:4.6rem; font:inherit; font-weight:800; padding:.25rem .4rem; border-radius:.45rem;
border:2px solid var(--brand-ink); background:var(--card, #fff); color:var(--text); }
.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; }
/* sluit- en verwijderkruisjes: klein om te zien, maar met een ruim tikvlak —
op een telefoon mag een kruisje nooit een precisieklusje zijn */
.cl-x{ border:0; background:none; color:var(--muted); font-size:1rem; padding:.1rem .25rem; min-width:38px; min-height:38px; margin:-.4rem -.35rem; }
.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){
.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 - var(--cart-top, 196px) - 24px); 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;
}
/* v126 — geen outline als je klikt (rustig), wél als je met Tab langskomt: anders
loop je een formulier door zonder te zien waar je bent. :not(:focus-visible) doet
precies dat onderscheid, en staat hier bij de bron zodat geen latere regel het
ongemerkt terugdraait. */
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brand); }
.field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible){ outline:none; }
/* selects zijn van nature nét hoger dan tekstvelden (native pijl-widget) — één vaste
hoogte zodat alle velden in het formulier strak op elkaar uitlijnen */
.field input:not([type=checkbox]):not([type=radio]), .field select{ height:2.625rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
/* v184 (Bas, 19 sep): klanten vroegen Maico of deze keuze duidelijker kon. Er stond
alleen een donkere pil zonder vraag erboven, en dan lijkt het geen keuze maar een kopje.
Nu: de vraag erbij, iconen erin, en de gekozen kant in hetzelfde merkblauw als de
bestelknop eronder — dezelfde kleur betekent hier ook hetzelfde: dit is wat er gebeurt. */
.seg-vraag{
margin:0 0 .45rem; font-weight:800; font-size:.96rem; color:var(--ink);
}
.seg{
display:grid; grid-template-columns:1fr 1fr; background:#EDEAE2; border-radius:999px;
padding:5px; margin-bottom:1rem; gap:4px;
}
.seg button{
display:flex; align-items:center; justify-content:center; gap:.45rem;
border:1px solid transparent; background:#fff; padding:.72rem .5rem; border-radius:999px;
font-weight:800; color:var(--ink-2, #2A3A42); cursor:pointer;
transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.seg button svg{ width:1.25em; height:1.25em; flex:0 0 auto; }
.seg button:not(.is-active):not(:disabled):hover{
border-color:var(--brand); color:var(--brand-ink); transform:translateY(-1px);
}
/* dezelfde blauwe vlakken als .btn--primary: blauw met donkere inkt leest veel beter dan
blauw met wit, en het is de kleur die de klant verderop ook aanklikt */
.seg button.is-active{
background:var(--brand); color:#04222E; border-color:var(--brand-deep);
box-shadow:var(--shadow-brand, 0 6px 18px rgba(0,176,240,.35));
}
/* v184b (Bas, 19 sep): een regel eronder die zegt wat er gekozen is. Het woord "blauwe"
krijgt letterlijk dezelfde behandeling als de knop — laten zien werkt beter dan
uitleggen — en de gekozen kant staat er in woorden bij, zodat niemand op kleur alleen
hoeft af te gaan. Die tekst loopt mee als de keuze verandert. */
.seg-uitleg{
margin:-.55rem 0 1rem; font-size:.86rem; color:var(--muted); line-height:1.5;
}
.seg-uitleg b{ color:var(--ink); font-weight:800; }
.seg-swatch{
display:inline-block; background:var(--brand); color:#04222E; font-weight:800;
border-radius:999px; font-size:.82rem; vertical-align:baseline;
/* "blauwe" heeft geen staartletters, dus de regelhoogte laat onder de letters ruimte
over die je wél ziet: het woord hangt dan hoog in de pil. Vandaar boven niets en
onder .15em — opgemeten, niet gegokt; zo staat de inkt precies in het midden. */
padding:0 .45rem .15em;
}
/* ---------- v190: nog niets gekozen ------------------------------------------------
Tot v189 stond "Afhalen" voorgedrukt. Wie snel doorklikte, bestelde daarmee afhalen
terwijl hij bezorgen wilde — en dat merkte de zaak pas aan de balie. Voorgedrukt is
dus weg; er wordt nu echt gekozen. Mensen lezen niet, dus doet de kleur het werk:
een rode gearceerde band rondom de twee knoppen, en de rest van het formulier ligt
er grijs achter tot er gekozen is. De tekst eronder is de uitleg, niet het signaal. */
.seg.is-onbeslist{
padding:10px;
background-color:#fff4f1;
background-image:repeating-linear-gradient(45deg, #c0392b 0 5px, #f6cdc6 5px 10px);
box-shadow:0 0 0 2px #c0392b;
animation:seg-klop 1.5s ease-in-out 2;
}
@keyframes seg-klop{
0%, 100%{ box-shadow:0 0 0 2px #c0392b; }
50% { box-shadow:0 0 0 2px #c0392b, 0 0 0 9px rgba(192,57,43,.20); }
}
/* de tik als iemand tóch probeert door te klikken: het oog gaat vanzelf naar wat beweegt */
.seg.is-tik{ animation:seg-tik .42s ease 2; }
@keyframes seg-tik{
0%, 100%{ transform:translateX(0); }
25% { transform:translateX(-6px); }
75% { transform:translateX(6px); }
}
@media (prefers-reduced-motion: reduce){
.seg.is-onbeslist, .seg.is-tik{ animation:none; }
}
.seg-vraag.is-nodig{ color:#9b2d20; }
/* v234: de bestekvraag — dezelfde vorm als afhalen/bezorgen, zodat hij herkenbaar een keuze is */
.bestek-vak{ margin-top:.2rem; }
.bestek-vak[hidden]{ display:none; }
.bestek-seg{
display:grid; grid-template-columns:1fr 1fr; background:#EDEAE2; border-radius:999px;
padding:5px; margin-bottom:1rem; gap:4px;
}
.bestek-seg button{
display:flex; align-items:center; justify-content:center;
border:1px solid transparent; background:#fff; padding:.62rem .5rem; border-radius:999px;
font-weight:800; color:var(--ink-2, #2A3A42); cursor:pointer;
transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bestek-seg button:not(.is-active):hover{ border-color:var(--brand); color:var(--brand-ink); transform:translateY(-1px); }
.bestek-seg button.is-active{
background:var(--brand); color:#04222E; border-color:var(--brand-deep);
box-shadow:var(--shadow-brand, 0 6px 18px rgba(0,176,240,.35));
}
.bestek-seg.is-onbeslist{
padding:10px; background-color:#fff4f1;
background-image:repeating-linear-gradient(45deg, #c0392b 0 5px, #f6cdc6 5px 10px);
box-shadow:0 0 0 2px #c0392b;
}
@media (prefers-reduced-motion: no-preference){ .bestek-seg.is-onbeslist{ animation:seg-klop 1.5s ease-in-out 2; } }
.seg-let-op{
display:flex; gap:.55rem; align-items:flex-start;
margin:-.55rem 0 1rem; padding:.62rem .8rem;
background:#fff4f1; border:1.5px solid #e0a89f; border-left:5px solid #c0392b;
border-radius:var(--r-sm); color:#8d2418; font-weight:700; font-size:.9rem; line-height:1.45;
}
.seg-let-op svg{ width:1.15em; height:1.15em; flex:0 0 auto; margin-top:.12em; }
.seg-let-op b{ font-weight:800; }
/* v218: de rode stand komt pas als er niet gekozen wordt. Kan er vandaag maar één van de
twee, dan staat die reden er vanaf het begin onder — rustig, zonder rood */
.seg-let-op.is-zacht{ background:transparent; border:0; padding:0; color:var(--muted); font-weight:600; }
.seg-let-op.is-zacht svg{ display:none; }
/* de rest van de gegevens wacht op de keuze — de velden staan er wel, maar grijs en op
slot; zo is te zien dát ze komen, en waar je eerst moet zijn */
#order-form.keuze-nodig > *:not(.seg):not(.seg-vraag):not(.seg-let-op):not(.order-gesloten){
opacity:.38;
}
#order-form.keuze-nodig input,
#order-form.keuze-nodig select,
#order-form.keuze-nodig textarea{ cursor:not-allowed; }
.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); }
/* v126 — een melding hoort niet over de mandjesbalk heen te vallen.
Die regel bestond wel, maar stond in een media query vóór .toast zelf; bij gelijke
specificiteit wint de laatste, dus hij deed niets en de twee lagen over elkaar.
Nu hangt de hoogte af van of de balk er staat, en dat weet de pagina zelf.
Ook: één regel houden — afgebroken over twee regels werd het een blok. */
.toast{ max-width:min(30rem, calc(100vw - 2rem)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.heeft-mandjebalk .toast{ bottom:6.2rem; }
@media (min-width:1081px){
/* op een breed scherm staat het mandje naast de kaart, niet onderin */
body.heeft-mandjebalk .toast{ bottom:1.6rem; }
}
/* ---------- 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); }
.allergen-tools input:focus:not(:focus-visible){ 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; }
/* v210 — de naam op de kaart als die anders is dan op de lijst ("Grootm. kalfsvleeskroket" is
de Kalfskroket), zodat klanten en de zaak zien welke regel bij welk product hoort */
.allergen-table .al-alias{ display:block; margin-top:.12rem; font-size:.78rem; font-weight:600; color:var(--muted); }
.al-datum{ margin:.6rem 0 0; font-size:.9rem; color:#8FA6B0; }
.al-datum a{ color:var(--sky); font-weight:700; }
/* de kop "Product" stond in de donkere tabelkop in donkere letters (onzichtbaar) */
.allergen-table th:first-child{ color:#fff; }
.allergen-leeg{ margin:1rem 0 0; padding:.8rem 1rem; border-radius:var(--r-sm); background:var(--card);
border:1px dashed var(--line); color:var(--text); }
.allergen-leeg[hidden]{ display:none; }
/* ---------- 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; }
/* v125 — actie met een foto erbij. De foto gaat over de volle breedte bovenaan de
kaart; het icoontje vervalt dan, want de foto zegt al waar het over gaat. Vaste
16:9-verhouding met object-fit:cover, zodat een staande telefoonfoto en een liggende
productfoto naast elkaar nog steeds een nette rij vormen. */
.actie-card--foto{ flex-direction:column; gap:0; padding:0; overflow:hidden; }
.actie-card--foto .a-ico{ display:none; }
.actie-card--foto .a-tekst{ padding:1.4rem 1.6rem 1.6rem; }
.actie-foto{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#E6E2DA;
/* op de actiepagina is een kaart zo breed als de pagina; zonder deze grens werd de
foto daar bijna 500 px hoog en verdween de tekst onder de vouw */
max-height:340px; }
/* het fotovak in beheer: voorbeeld + knoppen op één regel, op een telefoon eronder */
.actie-foto-vak{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
border:1.5px dashed var(--line); border-radius:9px; padding:.55rem .7rem; }
.actie-foto-mini{ width:84px; height:52px; border-radius:7px; object-fit:cover; background:#E6E2DA;
border:1px solid var(--line); flex:0 0 auto; }
.actie-foto-leeg{ width:84px; height:52px; border-radius:7px; background:#E6E2DA; border:1px solid var(--line);
flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.72rem; }
/* ---------- 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; }
/* minmax(0,…): anders kan de kolom niet smaller dan zijn breedste tabel en duwt
een rapportagematrix of publiceerbalk de hele pagina breder dan het scherm */
@media (max-width:900px){ .admin-shell{ grid-template-columns:minmax(0,1fr); } }
/* de knoppenrij rechts in de kop van beheer/kassa/keuken: op een telefoon netjes
doorwrappen in plaats van de pagina breder duwen */
.kop-acties{ margin-left:auto; display:flex; gap:.6rem; }
@media (max-width:760px){
.site-header .container{ flex-wrap:wrap; row-gap:.5rem; }
.kop-acties{ flex-wrap:wrap; justify-content:flex-end; row-gap:.4rem; }
}
.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; }
@media (max-width:900px){
.admin-shell{ padding-top:.9rem; gap:.8rem; }
/* v125 — beheer op een telefoon. Naast de inhoud past de menukolom niet meer, dus
komt hij erboven: negen knoppen onder elkaar vullen dan het halve scherm en je
moet bij elke stap eerst langs dat blok scrollen. Hier wordt het één regel die je
opzij schuift; de gekozen knop schuift vanzelf in beeld (zie pagina-beheer.js).
Bewust niet plakkend: hij moet juist wég zijn zodra je aan het werk bent. */
.admin-nav{
position:static; flex-direction:row; overflow-x:auto; overflow-y:hidden;
gap:.4rem; padding:.5rem .6rem; border-radius:14px;
scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
/* schaduw aan de rechterkant als teken dat er meer staat */
-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.admin-nav.is-eind{ -webkit-mask-image:none; mask-image:none; }
.admin-nav::-webkit-scrollbar{ display:none; }
/* padding-right telt in een horizontaal schuivende flexbox niet mee aan het eind
(bekende browserkwestie) — deze lege flexitem doet dat wél, zodat de laatste knop
niet tegen de rand plakt */
.admin-nav::after{ content:""; flex:0 0 .2rem; }
.admin-nav button{
flex:0 0 auto; white-space:nowrap; padding:.55rem .8rem; font-size:.9rem; gap:.4rem;
scroll-margin-inline:.6rem;
}
/* de kop mag op een klein scherm niet de halve pagina beslaan */
.admin-body .site-header{ position:static !important; }
}
.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; }
/* v125 — op een telefoon is 1,9 rem rondom bijna een vijfde van de schermbreedte */
@media (max-width:900px){
.admin-panel{ padding:1.1rem; }
.admin-panel h2{ font-size:1.2rem; }
}
.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); }
/* v232: de productnaam is aan te passen */
.admin-row .admin-naam-vak{ display:flex; flex-direction:column; gap:.15rem; flex:2 1 240px; min-width:220px; }
.admin-row input.admin-naam{ width:100%; font-weight:600; color:var(--ink); }
.admin-naam-was{ color:var(--muted); font-size:.78rem; font-weight:500; }
.admin-naam-was[hidden]{ display:none; }
.admin-naam-terug{ background:none; border:0; padding:0; color:var(--brand-ink); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
/* v186 — Mijn LOBO: "Opnieuw bestellen" en "Factuur (PDF)" onder elkaar naast een bestelling */
.mp-knoppen{ display:flex; flex-direction:column; gap:.4rem; flex:0 0 auto; }
.mp-knoppen .btn{ justify-content:center; }
.mp-knoppen .btn svg{ width:1.05em; height:1.05em; flex:0 0 auto; }
@media (max-width: 520px){ .mp-knoppen{ flex-direction:row; flex-wrap:wrap; width:100%; } .mp-knoppen .btn{ flex:1 1 auto; } }
.admin-row input:focus:not(:focus-visible){ 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); }
/* v139: het icoon in zo'n knop had geen maat en was daardoor onzichtbaar (0 px) — ook de
bewerk-/verwijderknop bij een eigen product in Beheer */
.icon-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn > svg{ width:1.1em; height:1.1em; flex:0 0 auto; } /* losse LOBO_ICONS-svg direct in een knop (Beheer) */
.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); }
/* v212 — Beheer → Stickers: per categorie uitklapbaar, per product een schakelaar, met zoeken */
.stk-balk{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin:1rem 0 0; }
.stk-balk input[type="search"]{ flex:1 1 260px; max-width:420px; border:1.5px solid var(--line); border-radius:9px;
padding:.5rem .7rem; font:inherit; background:#fff; }
.stk-balk input[type="search"]:focus{ border-color:var(--brand); outline:none; }
.stk-alleen{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; color:var(--text); cursor:pointer; }
.stk-alleen input{ width:1.05rem; height:1.05rem; accent-color:var(--brand); }
.stk-stand{ margin:.6rem 0 0; padding:.45rem .7rem; border-radius:9px; font-size:.88rem; line-height:1.4;
background:rgba(245,167,59,.14); border:1px solid rgba(245,167,59,.5); color:#7A4E0C; }
.stk-stand[hidden]{ display:none; }
.stk-lijst{ gap:.45rem; }
.stk-lijst .admin-row[hidden], .stk-items[hidden]{ display:none; }
.stk-cat{ background:#fff; }
.stk-open{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; text-align:left; background:none; border:0;
padding:.1rem 0; font:inherit; cursor:pointer; color:var(--ink); }
.stk-open:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
.stk-naam{ font-weight:800; }
.stk-tel{ color:var(--muted); font-weight:600; }
.stk-pijl{ width:.5rem; height:.5rem; flex:0 0 auto; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
transform:rotate(-45deg); transition:transform .15s ease; margin-right:.15rem; }
.stk-open[aria-expanded="true"] .stk-pijl{ transform:rotate(45deg); }
.stk-items{ display:flex; flex-direction:column; gap:.35rem; margin:-.1rem 0 .35rem 1.3rem; }
.stk-product{ padding:.4rem .7rem; }
.stk-product .grow{ display:flex; flex-direction:column; gap:.05rem; font-weight:600; }
.stk-waarom{ color:var(--muted); font-weight:600; font-size:.78rem; }
.stk-waarom:empty{ display:none; }
.stk-product.is-eigen .stk-waarom{ color:var(--brand-ink); }
.stk-leeg{ margin:.8rem 0 0; color:var(--muted); font-size:.92rem; }
.stk-leeg[hidden]{ display:none; }
@media (max-width:520px){ .stk-items{ margin-left:.5rem; } }
.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); }
@media (max-width:520px){
/* telefoons: lange knopteksten ("Wijzigingen opslaan (voorvertoning)") mogen
omklappen — nooit de pagina breder duwen dan het scherm */
.admin-bar .btn, .admin-panel .btn--lg{ white-space:normal; }
}
.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; align-items:center; justify-content:center;
color:var(--muted); padding:0; width:26px; height:26px; border-radius:999px; cursor:pointer; }
/* v233: het kruisje had geen maat en viel weg (0 x 0 px) */
.pc-pill button svg{ width:15px; height:15px; flex:none; stroke-width:2.4; }
.pc-pill button:hover, .pc-pill button:focus-visible{ color:#fff; background: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; }
/* v198: Financieel → Kassakorting */
.rap-kk-sam{ margin:.3rem 0 0; font-size:.95rem; }
.rap-kk-sam b{ font-variant-numeric:tabular-nums; }
.rap-kk-nb{ color:var(--muted); font-size:.85rem; margin-top:.5rem; }
#rap-kk td{ font-variant-numeric:tabular-nums; }
#rap-kk td.rap-kk-bedrag{ color:#1C7A43; font-weight:700; white-space:nowrap; }
#rap-kk th:nth-child(2), #rap-kk td:nth-child(2), #rap-kk th:nth-child(3), #rap-kk td:nth-child(3){ text-align:left; }
/* v199: kassakorting per dag (bij een periode van meer dan één dag) */
.rap-kk-dagen{ margin:.9rem 0 1.3rem; max-width:520px; }
.rap-kk-dagen[hidden]{ display:none; }
.rap-kk-dagen h4{ margin:0; font-size:.95rem; }
#rap-kk-dag td{ font-variant-numeric:tabular-nums; }
#rap-kk-dag td.rap-kk-bedrag{ color:#1C7A43; font-weight:700; white-space:nowrap; }
#rap-kk-dag tr.rap-kk-dag-tot td{ font-weight:800; border-top:2px solid var(--ink); }
/* ---------- 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; }
/* v165: de rijafstand van de zaak naar het bezorgadres, dikgedrukt achter het adres op
het bonnenscherm — daarmee zie je meteen of dit een fietsrit is of niet */
.k-afstand{ font-weight:800; color:var(--ink, inherit); }
/* v167: waarmee je gaat — fiets onder de 2 km, scooter daarvanaf. Niet meer als
emoji achter het adres (v166) maar als foto van de bezorgfiets of -scooter, heel licht
rechts in de kaart. Reden (wens Bas, 11 sep): een emoji van 1,25em leest van de
doorgeefplank niet, en naast de bezorgersnaam stond dezelfde scooter al — twee keer
hetzelfde plaatje op één bon leest als twee verschillende dingen. De foto is groot,
uniek per vervoermiddel en staat de tekst niet in de weg.
Waarom een met achtergrond en geen ![]()
: hij mag nooit meeschuiven met de
tekst en nooit voorgelezen worden (het is versiering; de afstand in cijfers is de
echte informatie). De uitvaging naar links houdt hem van het adres af — waar
mask-image niet werkt, staat er simpelweg een foto met een rechte rand, ook prima. */
.k-vervoer-merk{ position:absolute; top:0; bottom:0; right:0; width:clamp(150px, 46%, 250px);
padding:9px 9px 9px 0; box-sizing:border-box; pointer-events:none; user-select:none;
opacity:.26; background-repeat:no-repeat; background-position:right center; background-size:contain;
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 42%);
mask-image:linear-gradient(to right, transparent 0%, #000 42%); }
.k-vervoer-merk.is-fiets{ background-image:url('../img/vervoer-fiets.png'); }
.k-vervoer-merk.is-scooter{ background-image:url('../img/vervoer-scooter.png'); }
/* v247: catering wordt met de bus bezorgd (ID. Buzz Cargo) */
.k-vervoer-merk.is-bus{ background-image:url('../img/vervoer-bus.png'); opacity:.22; } /* breder en donkerder: iets lichter */
@media print{ .k-vervoer-merk{ display:none; } }
/* Het watermerk is absoluut geplaatst en zou daardoor ná de inhoud geschilderd worden —
dus óver de klantnaam en het adres heen. Deze drie blokken krijgen daarom een eigen
laag erboven. Zonder dit ligt er een grijze waas over de tekst. */
.k-card.k-compact > .k-tijdblok,
.k-card.k-compact > .k-kern,
.k-card.k-compact > .k-onder{ position:relative; z-index:1; }
.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; }
/* ---------- v169: opmerking per product ----------
Op de bestelpagina staat onder elk product een klein knopje; pas na een tik komt het
invoerveld tevoorschijn. Reden: een veld onder elk van de ruim honderd producten maakt
van de kaart een formulier, en negen van de tien klanten hebben niets door te geven. */
.oi-opm{ margin-top:.35rem; }
.oi-opm-knop{ font:inherit; font-size:.78rem; font-weight:600; color:var(--muted);
background:none; border:0; padding:.15rem 0; cursor:pointer; text-align:left;
max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oi-opm-knop:hover{ color:var(--brand); }
.oi-opm-knop.heeft-opm{ color:var(--ink); font-weight:700; }
.oi-opm-veld{ display:block; width:100%; max-width:420px; margin-top:.3rem;
border:1.5px solid var(--line); border-radius:9px; padding:.42rem .6rem;
font:inherit; font-size:.88rem; background:#fff; }
.oi-opm-veld:focus{ border-color:var(--brand); outline:none; }
/* v187: bestelpagina — "Zakelijk? Factuur op bedrijfsnaam", zelfde stille knopstijl als de
opmerking per product; pas na een tik verschijnt het veld */
.zakelijk{ margin:-.45rem 0 .95rem; }
.zakelijk-knop{ font:inherit; font-size:.86rem; font-weight:700; color:var(--brand-ink);
background:none; border:0; padding:.2rem 0; cursor:pointer; text-align:left; }
.zakelijk-knop:hover{ color:var(--brand); }
.zakelijk-knop[hidden]{ display:none; }
.zakelijk-veld{ margin:.1rem 0 0; }
.zakelijk-veld[hidden]{ display:none; }
.zakelijk-hint{ font-weight:400; color:var(--muted); }
/* in het winkelwagentje onder de gekozen opties */
.cart-line .cl-opm{ display:block; color:var(--ink); font-weight:600; }
/* de opmerking bij de productregel op het keukenscherm en in de bezorgapp */
.kd-opm{ display:block; font-weight:700; color:#8A5A12; }
.stop-items .s-opm{ color:#F5C97B; font-weight:700; }
/* ---------- v168: een bestaande bon wijzigen ----------
De kassa maakt normaal een NIEUWE bestelling. Staat er ?bon=… in het adres, dan
verandert hij een bon die al bij de keuken ligt. Dat verschil moet je zien zonder te
lezen, anders tikt iemand een tweede bon aan voor dezelfde klant. Vandaar de amberen
balk bovenaan de bon en de gele rand om het hele kassavlak. */
.pos-wijzigbalk{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem;
background:rgba(245,167,59,.16); border:2px solid var(--amber, #F5A73B); border-radius:12px;
padding:.6rem .8rem; margin:0 0 .6rem; font-size:.88rem; color:var(--ink); }
.pos-wijzigbalk b{ font-size:.95rem; }
.pos-wijzigbalk span{ flex:1 1 160px; color:var(--text); line-height:1.4; }
.pos-wijzigbalk button{ font:inherit; font-size:.8rem; font-weight:700; border:1.5px solid var(--line);
background:#fff; color:var(--text); border-radius:8px; padding:.3rem .6rem; cursor:pointer; }
.pos-wijzigbalk button:hover{ border-color:var(--red); color:var(--red); }
body.is-wijzigbon .pos-bon{ outline:3px solid var(--amber, #F5A73B); outline-offset:4px; border-radius:14px; }
/* de bestaande regels van de bon staan er al op: een streepje ervoor scheelt tellen */
.pb-regel.is-bestaand .pb-info b::before{ content:"\2022 "; color:var(--amber, #F5A73B); font-weight:900; }
.pb-regel.is-kwijt .pb-info b{ color:var(--red); }
.pb-regel.is-kwijt .pb-info small{ color:var(--red); }
/* v168: op het keukenscherm zien dat een bon ná het printen nog gewijzigd is */
.k-gewijzigd{ display:inline-block; margin-left:.4rem; font-size:.72rem; font-weight:800;
letter-spacing:.04em; text-transform:uppercase; color:#8A5A12; background:rgba(245,167,59,.2);
border-radius:6px; padding:.05rem .35rem; vertical-align:.08em; }
/* ---------- 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. */
/* v129 — krapper bovenaan. De kop kostte 314 px van een vel van 1123 px: ruim een
kwart van het papier ging op aan briefhoofd voordat het eerste product kwam. De
marges zijn terug naar wat een laserprinter aankan (10 mm is ruim binnen het
niet-bedrukbare randje van 5 mm), en de regelafstand iets strakker. */
.bon--a4{ width:210mm; min-height:297mm; padding:10mm 12mm 12mm; font-size:14.5px; line-height:1.45; }
/* v107 — donkerder afdrukken (wens Maico). Courier New heeft dunne stokken; op papier
leest dat als grijs, zeker naast de vette koppen. Drie dingen samen lossen het op:
echt zwart in plaats van #111, een dunne omtrek om elke letter (dat verdikt de stokken
zonder alles vet te maken, zodat TOTAAL en de klantnaam nog steeds opvallen), en
print-color-adjust zodat de browser de tekst niet zelf lichter maakt om inkt te sparen. */
.bon--a4, .bon--a4 h2{ color:#000; }
.bon--a4{ font-weight:700; -webkit-text-stroke:.2px currentColor;
-webkit-print-color-adjust:exact; print-color-adjust:exact; }
/* v109 — alles wat nog grijzig was is nu gewoon zwart: de streepjeslijnen, de kaders om
BEZORGEN / de betaalregel / de opmerking, de stippellijn tussen de bestelregels, en het
logo (dat stond op grijswaarden met een beetje contrast en drukte daardoor grijs af). */
.bon--a4 hr{ border-top-color:#000; }
.bon--a4 .b-type, .bon--a4 .b-leg{ border-color:#000; }
.bon--a4 .b-opm{ border-color:#000; }
.bon--a4 #kb-items td{ border-bottom-color:#000; }
.bon--a4 .b-kop img, .bon--a4 .b-logo{ filter:grayscale(1) contrast(2.6) brightness(.85); }
/* v109 — nog een stap donker (Maico wilde meer). Het zwaartepunt ligt nu bij ECHT vet
in plaats van bij de omtrek: vet werkt in elke browser, `-webkit-text-stroke` alleen in
Chrome/Edge/Safari. De omtrek staat er nog bij als extraatje bovenop. Dat alles vet is
kost geen leesbaarheid, want de rangorde op de bon zit in de lettergrootte (TOTAAL 19px,
klantnaam 17px, BEZORGEN 27px) en niet in het gewicht. */
/* v129 — één kopregel: zaaknaam links, AFHALEN/BEZORGEN in het midden, bonnummer
rechts. Stonden eerst onder elkaar en kostten samen 137 px; nu 76 px.
De drie dingen die de keuken als eerste zoekt staan zo ook naast elkaar. */
.bon--a4 .b-kop{ display:flex; justify-content:space-between; align-items:center; gap:5mm; }
/* de naam-en-adreskolom mag niet over het BEZORGEN-kader heen lopen. Bewust géén
overflow:hidden erbij: dan kapt hij af en lees je een half adres, en dat is erger
dan een regel die net past. De tekst is kort genoeg gehouden. */
.bon--a4 .b-kop .b-center{ text-align:left; display:flex; gap:9px; align-items:center;
min-width:0; flex:0 1 auto; }
.bon--a4 .b-kop .b-logo{ width:44px; margin:0; display:block; }
.bon--a4 .b-kop img{ width:44px; height:44px; filter:grayscale(1) contrast(1.2); flex:0 0 auto; }
.bon--a4 h2{ font-size:18px; line-height:1.15; }
/* op één regel houden: door de kopregel is de linkerkolom smaller geworden en brak het
adres af, wat de kop weer hoger maakte dan nodig */
.bon--a4 .b-sub{ font-size:10.5px; white-space:nowrap; line-height:1.3; }
.bon--a4 .b-nr{ text-align:right; font-weight:800; font-size:24px; letter-spacing:1px; white-space:nowrap; }
.bon--a4 .b-nr small{ display:block; font-size:11px; font-weight:400; letter-spacing:0; line-height:1.3; }
/* BEZORGEN/AFHALEN blijft het grootst van de drie: dat is waar de keuken op stuurt */
.bon--a4 .b-kop .b-type{
flex:0 1 auto; margin:0; font-size:22px; letter-spacing:2px; padding:5px 10px;
white-space:nowrap; text-align:center;
}
.bon--a4 hr{ margin:7px 0; }
.bon--a4 #kb-meta, .bon--a4 #kb-klant{ font-size:13.5px; }
.bon--a4 #kb-klant b{ font-size:17px; }
.bon--a4 table{ table-layout:fixed; }
/* v129 — de regelafstand tussen de producten. Stond op 5 px boven én onder met een
regelhoogte van 1,45: samen bijna 30 px lucht per product. Op 3 px met een strakkere
regelhoogte blijft het goed te scannen (Courier vet, 15 px) en passen er ruim een
derde meer regels op één vel — precies waar het om gaat bij een grote bestelling. */
.bon--a4 #kb-items td{ padding:3px 0; border-bottom:1px dotted #000; line-height:1.32; }
.bon--a4 #kb-items tr{ break-inside:avoid; page-break-inside:avoid; }
.bon--a4 #kb-items td:first-child{ font-size:15px; }
/* de gekozen opties mogen dichter op hun product kruipen, ze horen erbij */
.bon--a4 #kb-items td i{ line-height:1.25; }
.bon--a4 #kb-items td:last-child{ width:28mm; }
/* v128 — kopje per categorie op de A4-bon. De keuken werkt de bon van boven naar
beneden af (bestek, patat, kroketten, snacks, …), en dan helpt het als je in één
oogopslag ziet waar de frituurwaar begint. Bewust zwart en vet: het is een
zwart-witprinter met toner, dus grijstinten vervagen. */
/* de cel beslaat beide kolommen en is dus óók :last-child; zonder deze regel erft hij
de rechtsuitlijning van de prijskolom en zweeft het kopje boven de bedragen */
.bon #kb-items tr.b-groep td, .bon--a4 #kb-items tr.b-groep td{ text-align:left; }
/* v178: de bereidingswijze van een glutenvrij product, zwart-op-wit omgekeerd zodat
hij op een gedrukte bon van een meter afstand opvalt — net als op de sticker */
#kb-items .bon-gv{
display:inline-block; background:#000; color:#fff; font-weight:900;
padding:.5mm 1.4mm; letter-spacing:.02em; -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.bon--a4 #kb-items tr.b-groep td{
border-bottom:1.5px solid #000; padding:10px 0 2px; font-size:12px; font-weight:800;
text-transform:uppercase; letter-spacing:.09em; color:#000;
}
/* het eerste kopje hoeft geen extra lucht boven zich */
.bon--a4 #kb-items tr.b-groep:first-child td{ padding-top:0; }
/* op de smalle keukenbon (niet-A4) net zo, maar kleiner */
.bon #kb-items tr.b-groep td{ font-weight:800; text-transform:uppercase; font-size:11px;
letter-spacing:.07em; padding:6px 0 1px; border-bottom:1px solid #000; }
.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; }
/* v186 — twee soorten vel uit één opmaak: de KEUKENBON (zonder btw) en de FACTUUR die
met de klant meegaat. Zelfde letter, zelfde zwart-wit, zelfde indeling — de factuur
heeft alleen het tarief per regel, een btw-specificatie en de gegevens van LOBO erbij.
Buiten een vel met .is-klant/.is-keuken (de historie in Beheer, het bonvoorbeeld)
staat geen van beide extra's. */
.b-alleen-klant, .b-alleen-keuken, .bon .b-tr{ display:none; }
.is-klant .b-alleen-klant, .is-keuken .b-alleen-keuken{ display:block; }
.is-klant .bon .b-tr{ display:inline-block; }
.bon--a4 .b-soort{
margin-left:auto; flex:0 0 auto; align-self:center; border:2px solid #000; padding:3px 9px;
font-size:15px; font-weight:800; letter-spacing:2px; line-height:1.15; text-align:center; white-space:nowrap;
}
.bon--a4 .b-soort small{ display:block; font-size:11.5px; letter-spacing:.5px; }
/* het tarief vóór het bedrag: "21% € 3,50" — de kolom wordt er op de factuur iets breder voor */
.bon--a4 .b-tr{ min-width:4ch; margin-right:1.4ch; text-align:right; font-size:12.5px; }
.is-klant .bon--a4 #kb-items td:last-child{ width:40mm; }
.is-klant .bon--a4 #kb-totalen td:last-child{ width:42mm; }
.bon--a4 .b-btw{ margin-top:12px; padding-top:7px; border-top:1.5px dashed #000; font-size:12.5px; line-height:1.4; }
.bon--a4 .b-btw h3{ margin:0 0 4px; font-size:13px; font-weight:800; letter-spacing:.06em; color:#000; }
.bon--a4 .b-btw table{ width:auto; table-layout:auto; }
.bon--a4 .b-btw th, .bon--a4 .b-btw td{ padding:1px 0 1px 7mm; text-align:right; white-space:nowrap; font-weight:800; }
.bon--a4 .b-btw th{ font-size:11px; letter-spacing:.08em; }
.bon--a4 .b-btw th:first-child, .bon--a4 .b-btw td:first-child{ padding-left:0; text-align:left; }
.bon--a4 .b-btw tr.b-btw-tot td{ border-top:1.5px solid #000; padding-top:3px; }
.bon--a4 .b-btw p{ margin:5px 0 0; }
@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:300px;
/* v126 — Leaflet geeft zijn eigen lagen z-index 400 tot 700. Zonder eigen stapellaag
concurreren die rechtstreeks met de rest van de pagina, en dan schuift de kaart bij
het scrollen dwars over de plakkende publiceerbalk (z-index 30) en de sitebalk
(z-index 60) heen. Een eigen stapelcontext op z-index 0 houdt alles van de kaart
binnen dit kader — de kaart blijft gewoon staan waar hij hoort. */
position:relative; z-index:0; isolation:isolate; }
.os-map-wrap iframe, .os-map-wrap #actief-map{ width:100%; height:100%; border:0; display:block; background:#EAF2F5; }
/* v97: verwachte aankomst boven de kaart + eigen markers op de Leaflet-kaart */
.os-eta{ display:flex; align-items:baseline; gap:.7rem; margin:.2rem 0 .7rem; }
.os-eta-tijd{ font-family:var(--font-display, inherit); font-size:2.2rem; line-height:1; color:var(--ink); letter-spacing:.02em }
.os-eta-sub{ color:var(--muted); font-weight:700; font-size:.9rem }
.os-map-noot{ color:var(--muted); font-size:.8rem; margin:.5rem 0 0 }
.os-marker{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#12242C; color:#fff;
border:3px solid #fff; box-shadow:0 4px 14px rgba(11,21,26,.35) }
.os-marker svg{ width:18px; height:18px }
.os-marker--huis{ background:var(--brand); color:#04222E }
.os-marker--bezorger{ background:#C62828 }
.leaflet-container{ font:inherit }
/* ---------- 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; }
/* v143: de rand in de kleur van het type zit om de héle kaart (wens keuken/Bas):
oranje = afhalen, blauw = bezorgen — niet meer alleen een streepje links. Bewust
twee eigen tinten, dieper dan het amber en het hemelsblauw van het tijdblok, zodat
de status (Bon geprint = amber, In de keuken = hemelsblauw) er los van te lezen blijft. */
:root{ --k-rand-afhalen:#F0701C; --k-rand-bezorgen:#2A7DE1; }
.k-card{ background:var(--card); border:4px solid var(--k-rand-afhalen); border-radius:var(--r-md); padding:1.1rem 1.2rem;
box-shadow:var(--shadow-md); }
.k-card.k-bezorgen{ border-color:var(--k-rand-bezorgen); }
.k-card.k-nieuw{ border-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); }
/* v245: het potlood rechts — de regel is aanklikbaar */
.oi-keuze-kop{ position:relative; padding-right:2.1rem; }
.oi-keuze-pen{ position:absolute; right:.55rem; top:50%; transform:translateY(-50%); display:grid; place-items:center;
width:1.35rem; height:1.35rem; color:var(--brand-ink); pointer-events:none; }
.oi-keuze-pen svg{ width:16px; height:16px; }
.oi-keuze-kop:hover .oi-keuze-pen{ color:var(--brand); }
.oi-keuze-kop.is-onaf .oi-keuze-pen{ color:#9A6410; }
.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; }
/* v208 (Bas, 26 sep: "doorscrollen gaat weer RUK") — het keuzepaneel is geen eigen scrollvak
meer. Tot v207 had het een eigen rolbalk (max. 420 px hoog) en stond het in de tekstkolom.
Sinds v207 gaat het vaker open (een tik op + zonder keuze), en dan ving dat vak het scrollen
van de pagina op — op een telefoon zat er 1.661 px aan sauzen en bakjes in een vak van 420 px —
en schoof de + onder de hele lijst, buiten beeld. (v183 had het vak op overscroll-behavior:auto
gezet; dat hielp alleen als het vak al helemaal onderaan was.)
Nu hoort het paneel bij de kaart zelf: onder de regel met de prijs en de +, over de volle
breedte, zo hoog als nodig. De pagina scrolt er gewoon doorheen, en de + blijft staan waar je
tikte. Onderaan het paneel staat nog een knop "In de mand". */
.oi-keuzes{ margin:.1rem 0 .1rem; display:grid; gap:.7rem; min-width:0; }
.order-item > .oi-keuzes{ order:5; flex:1 1 100%; width:100%; }
.order-item:has(.oi-keuzes:not([hidden])){ flex-wrap:wrap; align-items:flex-start; }
.oi-keuzes-klaar{
justify-self:start; display:inline-flex; align-items:center; gap:.4rem; margin-top:.1rem;
border:0; border-radius:999px; background:var(--ink); color:#fff; font:inherit; font-weight:800;
font-size:.9rem; padding:.6rem 1.15rem; cursor:pointer; transition:background .15s ease;
}
.oi-keuzes-klaar:hover{ background:var(--brand); color:#04222E; }
.oi-keuzes-klaar.is-wacht, .oi-keuzes-klaar.is-wacht:hover{ background:#C3CBCF; color:#fff; }
@media (max-width:640px){ .oi-keuzes-klaar{ justify-self:stretch; justify-content:center; } }
/* "+ 15 meer" bij een lange lijst vrije extra's (21 bakjes saus) */
.keuze-meer{
display:inline-flex; align-items:center; padding:.34rem .7rem; border:1.5px dashed rgba(0,176,240,.55);
border-radius:999px; background:none; font:inherit; font-size:.83rem; font-weight:700;
color:var(--brand-ink); cursor:pointer;
}
.keuze-meer:hover{ border-style:solid; border-color:var(--brand); }
/* 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; }
/* v207 — elke keuzevraag beantwoorden (wens Maico). Wie op + tikt zonder te kiezen, ziet de
vraag in dezelfde rode gearceerde band als afhalen/bezorgen in stap 2, en de + grijs tot er
gekozen is. De saus krijgt geen rood maar een blauwe wijzer (Bas: "wijs ze er wel op"). */
.keuze-groep.is-mist, .keuze-groep.is-wijs{ padding:.55rem .65rem .6rem; border-radius:12px; }
.keuze-groep.is-mist{
border:4px solid transparent;
background:linear-gradient(#fff4f1, #fff4f1) padding-box,
repeating-linear-gradient(45deg, #c0392b 0 5px, #f6cdc6 5px 10px) border-box;
}
.keuze-groep.is-mist legend{ color:#9b2d20; background:#fff4f1; border-radius:6px; padding:.15rem .4rem; margin-left:-.2rem; }
.keuze-groep.is-mist .keuze-verplicht{ background:#c0392b; color:#fff; }
.keuze-groep.is-wijs{ border:2px solid var(--brand); background:rgba(0,176,240,.06); }
.keuze-groep.is-wijs legend{ color:var(--brand-ink); padding:0 .35rem .1rem; margin-left:-.15rem; }
.keuze-wijs{ margin:.5rem 0 0; font-size:.8rem; font-weight:700; color:var(--brand-ink); line-height:1.4; }
.keuze-wijs[hidden]{ display:none; }
.keuze-groep.is-tik{ animation:seg-tik .42s ease 2; }
@media (prefers-reduced-motion: reduce){ .keuze-groep.is-tik{ animation:none; } }
.add-btn.is-wacht{ background:#C3CBCF; color:#fff; box-shadow:none; }
.add-btn.is-wacht:hover{ background:#AEB8BD; color:#fff; transform:none; }
.oi-opm-tip{ margin:.35rem 0 0; max-width:420px; padding:.4rem .6rem; border-radius:var(--r-sm);
background:rgba(0,176,240,.08); border:1px solid rgba(0,176,240,.3); font-size:.78rem; line-height:1.4; color:var(--text); }
.oi-opm-tip[hidden]{ display:none; }
.oi-opm-tip-knop{ font:inherit; font-weight:800; color:var(--brand-ink); background:none; border:0; padding:0;
cursor:pointer; text-decoration:underline; }
.kitchen-empty{ text-align:center; color:var(--muted); padding:3rem 1rem; font-size:1.05rem; }
/* balietablet: de afgesproken betaalwijze (telefonisch) licht op */
.bz-af-wijze.is-afspraak{ outline:3px solid #2E6FA3; outline-offset:2px; }
/* klein rood 18+-kenmerk op de keukenkaart (afhalen met alcohol) */
.k-18{ display:inline-block; margin-left:.45rem; padding:.02rem .45rem; border-radius:999px;
background:#B3261E; color:#fff; font-size:.7rem; font-weight:900; letter-spacing:.04em;
vertical-align:.08em; }
/* 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-blok{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem .85rem; background:#FCFBF8; }
.pd-keuzes-blok b{ font-size:.88rem; color:var(--ink); }
.pd-keuzes-blok p{ margin:.25rem 0 0; font-size:.85rem; color:var(--muted); line-height:1.45; }
.pd-keuzes-blok #pd-gekozen{ color:var(--text); font-weight:600; }
/* ---------- allergenen per product (beheer, v228) ---------- */
.pd-allerg-blok{ margin-bottom:.8rem; }
.al-dlg{ max-width:640px; }
.al-dlg h2{ font-size:1.25rem; margin:0 0 .25rem; }
.al-stand{ margin:0 0 .8rem; padding:.6rem .75rem; border-radius:10px; font-size:.86rem; line-height:1.45;
background:rgba(0,176,240,.08); color:var(--text); }
.al-stand.is-zaak{ background:rgba(35,189,108,.12); color:#0f5132; font-weight:600; }
.al-stand.is-leeg{ background:rgba(245,167,59,.14); color:#5A3D02; font-weight:600; }
.al-vak{ margin-top:.5rem; }
.al-raster{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.3rem .8rem; }
.al-vink{ display:flex; align-items:center; gap:.5rem; padding:.35rem .45rem; border-radius:9px; cursor:pointer;
font-size:.9rem; color:var(--ink); line-height:1.25; }
.al-vink:hover{ background:rgba(0,176,240,.07); }
.al-vink input{ width:1.1rem; height:1.1rem; accent-color:var(--brand); flex:none; margin:0; }
.al-ic{ display:inline-flex; width:1.25rem; height:1.25rem; flex:none; color:var(--muted); }
.al-ic svg{ width:100%; height:100%; }
.al-vink input:checked ~ .al-ic{ color:var(--ink); }
.al-vink input:checked ~ .al-naam{ font-weight:700; }
.al-geen{ margin-top:.4rem; border-top:1px solid var(--line); border-radius:0; padding-top:.6rem; }
.al-noot{ margin:.7rem 0 0; font-size:.82rem; color:var(--muted); }
.al-knop.is-leeg{ border-color:#E8A02A; color:#8a4b00; }
@media (max-width:520px){ .al-raster{ grid-template-columns:1fr 1fr; } .al-vink{ font-size:.85rem; } }
/* ---------- keuzes per gerecht (beheer, v222) ---------- */
.kz-dlg{ max-width:660px; }
.kz-dlg h2{ font-size:1.25rem; margin:0 0 .25rem; }
.kz-uitleg{ margin:0 0 .9rem; font-size:.88rem; color:var(--muted); line-height:1.45; }
.kz-uitleg b{ color:var(--text); }
.kz-vak{ max-height:52vh; overflow:auto; margin:0 -.5rem; padding:0 .5rem; }
.kz-leeg{ margin:.4rem 0; font-size:.9rem; color:var(--muted); }
.kz-blok{ padding:.85rem 0; border-top:1px solid var(--line); }
.kz-blok:first-child{ border-top:0; padding-top:.1rem; }
.kz-blok-kop{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.kz-titel{ flex:1; min-width:150px; color:var(--ink); }
.kz-titel b{ font-size:1rem; }
.kz-titel small{ color:var(--muted); font-size:.82rem; margin-left:.25rem; }
.kz-info{ margin:.3rem 0 0; font-size:.82rem; color:var(--muted); line-height:1.4; }
.kz-eigen{ color:#157A47; font-weight:700; }
.kz-link{ border:0; background:none; padding:.15rem 0; font:inherit; font-size:.85rem; font-weight:700;
color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
display:inline-flex; align-items:center; gap:.3rem; }
.kz-link:hover{ color:var(--ink); }
.kz-link svg{ width:1em; height:1em; flex:none; }
.kz-rijen{ display:grid; gap:.1rem; margin:.45rem 0 0; }
.kz-rij{ display:flex; align-items:center; gap:.6rem; padding:.2rem .5rem; border-radius:10px; flex-wrap:wrap; min-height:2.35rem; }
.kz-rijen > .kz-rij:hover{ background:rgba(0,176,240,.06); }
.kz-rij input[type=checkbox]{ width:1.15rem; height:1.15rem; accent-color:var(--brand); flex:none; margin:0; cursor:pointer; }
.kz-rij input[type=checkbox]:disabled{ cursor:default; }
.kz-naam{ flex:1; min-width:130px; font-weight:600; color:var(--ink); font-size:.95rem; cursor:pointer; line-height:1.3; }
.kz-rij.is-uit .kz-naam{ color:var(--muted); font-weight:500; }
.kz-rij.is-vast .kz-naam{ color:var(--muted); cursor:default; }
.kz-vast-noot{ color:var(--muted); font-size:.82rem; white-space:nowrap; }
.kz-prijs{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; color:var(--muted); font-size:.85rem; }
.kz-prijs input, .kz-tekst{ border:1.5px solid var(--line); border-radius:9px; padding:.42rem .6rem; background:#fff;
font:inherit; font-size:.9rem; color:var(--text); min-height:2.05rem; }
.kz-dlg:focus{ outline:none; }
.kz-prijs input{ padding:.3rem .6rem; }
.kz-prijs input{ width:78px; text-align:right; font-variant-numeric:tabular-nums; }
.kz-prijs input:focus, .kz-tekst:focus{ border-color:var(--brand); }
.kz-rij.is-uit .kz-prijs input{ background:#F4F2EC; }
.kz-std{ border:1.5px solid var(--line); background:#fff; color:var(--muted); border-radius:999px; padding:.22rem .65rem;
font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; }
.kz-std svg{ width:.95em; height:.95em; flex:none; }
.kz-std:hover{ border-color:var(--brand); color:var(--ink); }
.kz-std.is-aan{ background:rgba(35,189,108,.14); border-color:rgba(21,122,71,.5); color:#157A47; }
.kz-uit-knop{ margin:.35rem 0 0 .5rem; }
.kz-erbij{ margin-top:.45rem; padding:.45rem .5rem; background:#FCFBF8; border:1px dashed var(--line); }
.kz-erbij-naam{ flex:1; min-width:150px; }
.kz-zoek{ width:100%; margin:0 0 .6rem; }
.kz-kandidaat{ padding:.5rem; border-bottom:1px solid var(--line); border-radius:0; flex-wrap:nowrap; }
.kz-kandidaat .kz-naam{ cursor:default; min-width:0; }
.kz-kandidaat .kz-naam b{ display:block; }
.kz-kandidaat .kz-naam small{ display:block; color:var(--muted); font-weight:500; font-size:.8rem; margin-top:.1rem; }
.kz-balk{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 .4rem; }
.kz-teller{ margin-left:auto; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.kz-tussenkop{ margin:.8rem 0 0; font-weight:700; font-size:.88rem; color:var(--ink); }
.kz-nieuw-rij{ padding-left:0; padding-right:0; }
.kz-nog-een{ margin:.35rem 0 0; }
.kz-soort{ display:grid; gap:.35rem; margin:1rem 0 .2rem; }
.kz-soort label{ display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; font-size:.95rem; line-height:1.35; }
.kz-soort input{ accent-color:var(--brand); margin-top:.2rem; flex:none; }
.kz-soort small{ display:block; color:var(--muted); font-size:.82rem; }
.kz-voet{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.kz-voet .kz-klaar{ margin-left:auto; }
.kz-voet .btn svg{ width:1em; height:1em; flex:none; }
@media (max-width:520px){
.kz-dlg{ padding:1.1rem 1rem; }
.kz-vak{ max-height:46vh; }
.kz-voet .kz-klaar{ margin-left:0; flex:1 1 100%; justify-content:center; }
}
/* ---------- 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; }
/* v173: afromen — geld dat de zaak tussendoor uit de tas haalt. De regel in de tabel
staat in amber en met een minteken, zodat je in één oogopslag ziet dat hij ergens
ánders heen gaat dan de rest van de tabel. */
.kas-tabel tr.kas-afgeroomd td{ color:#8A5A12; }
.kas-tabel tr.kas-afgeroomd td:last-child{ font-weight:800; }
.kas-afromen{ margin-top:.6rem; border-top:1px solid var(--line); padding-top:.5rem; }
.kas-afromen > summary{ cursor:pointer; font-size:.85rem; font-weight:700; color:#8A5A12; }
.kas-afromen-inhoud{ padding-top:.5rem; }
.kas-afroomlijst{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.4rem; }
.kas-afroomrij{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; flex-wrap:wrap; }
.kas-afroomrij > span:first-child{ color:var(--muted); min-width:3.2em; }
.kas-afroomrij b{ font-variant-numeric:tabular-nums; }
.kas-afroomnot{ color:var(--muted); flex:1; min-width:80px; }
.kas-afroomleeg{ margin:0; font-size:.86rem; color:var(--muted); }
.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); } }
/* ---------- v178: waarschuwing glutenvrije oven ----------
Dezelfde opbouw als de iDEAL-dialoog (donkere waas + kaart), maar met een eigen,
nadrukkelijker gezicht: dit is de enige melding op de bestelpagina waar een
verkeerde klik iemand ziek kan maken. De veilige knop staat vooraan en is de
volle knop; "Toch toevoegen" is bewust de rustige. */
.gv-modal{ position:fixed; inset:0; background:rgba(11,21,26,.62); z-index:240;
display:flex; align-items:center; justify-content:center; padding:1.1rem;
animation:gv-waas .16s ease-out; }
.gv-modal[hidden]{ display:none; }
@keyframes gv-waas{ from{ opacity:0 } to{ opacity:1 } }
.gv-modal-card{ background:var(--card); border-radius:var(--r-lg); padding:1.7rem 1.5rem 1.4rem;
max-width:430px; width:100%; box-shadow:var(--shadow-lg); text-align:center;
border-top:5px solid var(--amber); animation:gv-op .18s ease-out; }
@keyframes gv-op{ from{ transform:translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }
.gv-modal-ic{ width:52px; height:52px; margin:0 auto .8rem; border-radius:50%;
background:rgba(245,167,59,.16); color:#A8650B;
display:flex; align-items:center; justify-content:center; }
.gv-modal-ic svg{ width:27px; height:27px; }
.gv-modal-eyebrow{ margin:0 0 .35rem; font-size:.76rem; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; color:#A8650B; }
.gv-modal-card h3{ margin:0 0 .6rem; font-size:1.22rem; line-height:1.3; color:var(--ink); }
.gv-modal-card h3 #gv-modal-product{ color:var(--ink); }
.gv-modal-tekst{ margin:0 0 .5rem; font-size:.97rem; line-height:1.55; color:var(--ink); }
.gv-modal-venster{ margin:0 0 .9rem; font-size:.89rem; line-height:1.5; color:var(--muted); }
.gv-modal-let-op{ background:rgba(245,167,59,.13); border:1px solid rgba(245,167,59,.42);
border-radius:14px; padding:.75rem .85rem; font-size:.92rem; line-height:1.5;
color:var(--ink); text-align:left; margin:0 0 1.15rem; }
.gv-modal-knoppen{ display:flex; flex-direction:column; gap:.55rem; }
.gv-modal-knoppen .btn{ width:100%; justify-content:center; padding-left:.9rem; padding-right:.9rem; }
.gv-modal-ja{ font-weight:600; }
/* pas naast elkaar als ze er ook echt naast pássen: op een telefoon van 430 px stak
"Toch toevoegen" anders buiten de kaart. Onder elkaar staat de veilige knop boven. */
@media (min-width:540px){
.gv-modal-knoppen{ flex-direction:row-reverse; }
.gv-modal-knoppen .btn{ flex:1 1 0; min-width:0; width:auto; }
}
/* de glutenvrije sectie op de kaart terwijl de oven uit staat */
.gv-note{ display:block; }
/* ---------- allergenen-pictogrammen (bestelpagina) ---------- */
/* het tikgebied is met opzet groter dan de icoontjes (padding + compenserende
marges): 21px-rondjes zijn op een telefoon anders nét te fijn om te raken */
.oi-allerg{ display:flex; gap:.3rem; align-items:center; margin:.4rem -.4rem -.5rem; background:none; border:0; padding:.5rem .4rem; 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; }
/* v210 — de complete allergenenlijst van de zaak (27 sep). Aantikken van de pictogrammen
klapt een vakje open met waar elk allergeen vandaan komt (tot v209 een melding van één
regel, die bij een lange opgave halverwege werd afgekapt). */
.oi-allerg-pijl{ width:.42rem; height:.42rem; margin:0 .3rem 0 .35rem; flex:0 0 auto;
border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted);
transform:translateY(-2px) rotate(45deg); transition:transform .15s ease; }
.oi-allerg[aria-expanded="true"] .oi-allerg-pijl{ transform:translateY(2px) rotate(-135deg); }
.oi-allerg:hover .oi-allerg-pijl{ border-color:var(--brand); }
.oi-allerg-info{ margin:.6rem 0 .15rem; padding:.6rem .75rem .55rem; max-width:34rem;
border:1px solid var(--line); border-radius:var(--r-sm); background:#F3F7F9;
font-size:.82rem; line-height:1.45; }
.oi-allerg-info[hidden]{ display:none; }
.oai-delen{ list-style:none; margin:0; padding:0; display:grid; gap:.32rem; }
.oai-delen li{ display:grid; grid-template-columns:minmax(0, 10.5rem) minmax(0, 1fr); gap:.1rem .9rem; }
.oai-naam{ font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.oai-naam em{ display:block; font-style:normal; font-weight:600; font-size:.7rem; color:var(--muted); }
.oai-termen{ color:var(--text); }
.oai-delen li.is-onbekend .oai-termen{ color:var(--muted); font-style:italic; }
.oai-voet{ margin:.5rem 0 0; font-size:.74rem; line-height:1.4; color:var(--muted); }
.oai-voet a{ color:var(--brand-ink); font-weight:700; }
@media (max-width:420px){
.oai-delen li{ grid-template-columns:minmax(0, 1fr); gap:0; }
}
/* per keuze: onder de vraag de allergenen van wat er gekozen is; bij een actief filter een
rood uitroepteken op elke keuze waar een van die allergenen in zit */
.chip-let-op{ display:none; }
.keuze-chip.is-bevat, .keuze-chip.is-bevat.heeft-prijs:not(.is-aan){ border-color:#C0392B; border-style:solid; }
.keuze-chip.is-bevat .chip-let-op{ display:inline-flex; align-items:center; justify-content:center;
width:1.05rem; height:1.05rem; border-radius:50%; background:#C0392B; color:#fff;
font-size:.7rem; font-weight:900; line-height:1; }
.keuze-chip.is-bevat .chip-let-op::before{ content:'!'; }
.keuze-chip.is-bevat.is-aan{ background:#C0392B; border-color:#C0392B; }
.keuze-chip.is-bevat.is-aan .chip-let-op{ background:#fff; color:#C0392B; }
.keuze-allerg{ margin:.4rem 0 0; font-size:.78rem; line-height:1.45; color:var(--muted); }
.keuze-allerg[hidden]{ display:none; }
.keuze-allerg b{ color:var(--ink); font-weight:700; }
.keuze-allerg .ka-naam{ font-weight:700; color:var(--text); }
.keuze-allerg.is-let-op{ padding:.35rem .55rem; border-radius:8px; color:#8E2A1E;
background:#FFF4F1; border:1px solid #F0C3BA; }
.keuze-allerg.is-let-op b, .keuze-allerg.is-let-op .ka-naam{ color:#8E2A1E; }
/* producten die niet in de lijst staan: alleen zichtbaar gemaakt als het filter aanstaat */
.oi-geen-opgave{ display:none; }
body.allerg-filter-aan .oi-geen-opgave{ display:inline-flex; align-items:center; margin:.3rem 0 0;
padding:.16rem .5rem; border-radius:6px; background:#EFEDE7; color:#5E5238;
border:1px dashed rgba(94,82,56,.45); font-size:.74rem; font-weight:700; line-height:1.3; }
.sr-alleen{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ---------- 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;
/* 16px, niet kleiner: onder de 16px zoomt iOS bij focus de hele pagina in */
background:#fff; font-size:1rem; color:var(--ink);
}
.menu-filter input:focus{ border-color:var(--brand); }
.menu-filter input:focus:not(:focus-visible){ outline:none; }
@media (max-width:540px){
/* op een telefoon krijgt het zoekveld de hele regel: naast "Allergenen" en
"Favorieten" bleef er anders een postzegel over waar je niets in kunt lezen */
.menu-filter{ flex-wrap:wrap; }
.menu-filter input{ flex:1 1 100%; }
}
@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; }
/* v208 — cateringpagina: twee categorieën en geen zoekveld, dus de knoppen Allergenen en
Favorieten op dezelfde regel als de categorieën (op een telefoon eronder) */
.cat-bar--kort .container{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .8rem; }
.cat-bar--kort .container > .cat-schuif,
.cat-bar--kort .container > .cat-bar-inner{ flex:1 1 auto; min-width:0; }
.cat-bar--kort .menu-filter{ margin-top:0; flex:0 0 auto; }
.cat-bar--kort .allerg-filter{ display:contents; }
.cat-bar--kort .allerg-paneel{ flex:1 1 100%; margin-top:0; }
.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;
/* ruim tikdoel: het kruisje wordt vooral op telefoons gebruikt */
min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
padding:0; margin:-.3rem -.3rem -.3rem 0; 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 er geen adresbalk meer die de
veilige marges regelt */
@media (display-mode: standalone), (display-mode: fullscreen){
.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%; }
}
/* publiceerbalk bovenaan Beheer — plakt mee bij het scrollen, zodat "live zetten"
altijd binnen bereik is. Blijft onder de vaste sitebalk (z-index 60) hangen. */
.pub-top{ position:sticky; top:var(--kop-onder, 68px); z-index:30; display:flex; align-items:center; gap:1rem;
flex-wrap:wrap; background:#EFECE5; border:1px solid var(--line); border-radius:var(--r-md);
padding:.75rem .9rem; margin-bottom:1rem;
box-shadow:0 10px 24px -20px rgba(11,21,26,.55); }
.pub-top-actie{ margin-left:auto; text-align:right; }
.pub-top-actie .pub-stand-vak:empty{ display:none; }
/* v126 — de publiceerbalk als één regel.
Hij plakt boven aan het scherm, dus elke pixel die hij inneemt ben je de rest van de
dag kwijt. Op een MacBook (749 px hoog) at hij samen met de kop 30% van het venster
op om te melden dat álles al gepubliceerd was — en hij zei het twee keer, in de
oranje badge én in de zin eronder. Nu: één zin links, de knop rechts. Kleur en
knopformaat doen het verschil tussen "klaar" en "er staat nog iets open".
De badge is de terugval zolang de stand nog niet bekend is (JS nog bezig). */
body.pub-stand-bekend .pub-top .badge-demo{ display:none; }
.pub-top .pub-top-actie{
/* in de HTML staat de knop vóór de statuszin; row-reverse zet de zin links en de
knop rechts zonder de leesvolgorde te veranderen (schermlezers horen eerst de knop) */
display:flex; flex-direction:row-reverse; align-items:center; gap:.9rem;
width:100%; margin-left:0; text-align:left;
}
.pub-top .pub-top-actie .pub-stand-vak{ flex:1; margin:0 !important; font-size:.9rem; }
.pub-top .pub-top-actie .btn{ flex:0 0 auto; }
/* klaar: rustig, dun, knop in de tweede rang */
body.pub-gelijk .pub-top{ padding:.4rem .8rem; box-shadow:none; background:#F4F2EC; }
body.pub-gelijk .pub-top .pub-top-actie .pub-stand-vak{ font-weight:700; }
body.pub-gelijk .pub-top .pub-top-actie .btn{
padding:.38rem .9rem; font-size:.85rem;
background:none; color:var(--ink); border:1.5px solid var(--line);
}
body.pub-gelijk .pub-top .pub-top-actie .btn:hover{ border-color:var(--ink); }
@media (max-width:900px){
/* één kolom: de knoppenbalk van Beheer staat dan bóven dit blok en schuift er
doorheen als de balk blijft plakken. Op die breedte dus gewoon meescrollen —
hij staat toch bovenaan de pagina, en onder de menukaart staat dezelfde knop. */
.pub-top{ position:static; }
/* de lange opslaan/publiceer-knoppen mogen op een telefoon over twee regels */
.pub-top .btn, .pub-top-actie .btn{ white-space:normal; }
}
@media (max-width:640px){
.pub-top-actie{ margin-left:0; width:100%; text-align:left; }
.pub-top-actie .btn{ width:100%; }
/* v125 — op een telefoon slokte deze balk een kwart van het scherm op voordat je
ook maar iets van beheer zag. De knop is het belangrijkst, dus die komt eerst;
de uitleg eronder in gewone letters (hoofdletters met letterafstand namen op deze
breedte drie regels in beslag). */
.pub-top{ flex-direction:column; align-items:stretch; gap:.5rem; padding:.6rem .7rem; }
.pub-top .badge-demo{ order:2; text-transform:none; letter-spacing:0; font-size:.78rem;
font-weight:600; padding:.25rem .6rem; background:none; color:var(--muted); }
.pub-top .pub-top-actie{ order:1; }
.pub-top .pub-top-actie .btn{ white-space:nowrap; }
/* de lange uitleg over wat er nog gepubliceerd moet worden past niet op deze
breedte (drie regels). Hij staat óók onder de menukaart, op de plek waar je
net iets hebt aangepast — daar is hij nuttiger dan hier bovenaan. */
.pub-top .pub-stand-vak{ display:none; }
}
/* twee schrijfwijzen van dezelfde mededeling: kort op een telefoon, volledig daarboven */
.alleen-smal{ display:none; }
@media (max-width:640px){
.alleen-smal{ display:inline; }
.alleen-breed{ display:none; }
}
/* ---- e-mailadres bevestigen (bestelpagina) --------------------------------------
Twee tekstknoppen onder het codeveld. Bewust