/* ==========================================================================
   Nasmat Halab, Oude Engelenseweg 2 in 's-Hertogenbosch.
   Bewust vlak gehouden, één op één met de referentiesites.

   Wat er met opzet NIET in zit: verschijnende secties bij het scrollen,
   bewegende banen, deeltjes, tekst die letter voor letter aankomt,
   zichzelf tekenende lijnen en video. De enige overgangen die er zijn,
   horen bij een knop of een veld waar je op klikt, want zonder dat voelt
   een knop kapot.

   Onderaan staat de merklaag: het merkgoud, het accentgoud en de
   keuzegroepen. Elk getal in de opmerkingen hieronder is nagemeten met
   nasmat-review/kleurkeuze.js; de hele tabel (52 paren, 0 gezakt) staat in
   nasmat-review/kleurkeuze.txt. De merkkleuren zelf zijn uit het logobestand
   gemeten met nasmat-review/meet-badge.js.
   ========================================================================== */

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

:root{
  /* Warme grijzen met een zandzweem, zodat de pagina bij het goud past.
     Geen kleur hier is geraden: elke combinatie staat nagerekend in
     nasmat-review/kleurkeuze.txt (52 paren, 0 gezakt). */
  --bg:#FBF8F2;
  --paneel:#FFFFFF;
  --paneel-2:#F5F0E6;
  --lijn:#E7E0CF;
  --lijn-sterk:#CFC4AC;
  --tekst:#1C1A14;
  --tekst-2:#655E4D;
  /* Het logo is de badge NASMAT HALAB / EETHUIS / ARABIAN TASTE: wit en goud
     op een bijna zwart vlak. nasmat-review/meet-badge.js meet in het bestand
     zelf #1D1D1B voor het vlak en een goudverloop van #B48430 via #C09C3C
     naar #CCA83C.
     Het goud is te licht om als tekst op wit te dienen (#C2932F haalt daar
     2,93:1). Voor tekst en voor vlakken met witte tekst erop staat hier een
     diepere variant uit dezelfde tint: 5,53:1 op de pagina en 5,53:1 met wit
     erop, dus dezelfde token kan zowel tekst als knopvlak zijn. */
  --merk:#7A5A16;
  --merk-zacht:#FBF3E0;
  --merk-op-zacht:#6E5113;     /* 6,15:1 op --merk-zacht */
  /* De tweede merkkleur is het goud zelf, precies waar blok H regel 9 het
     voor bedoelt: als vlák met donkere tekst erop haalt #C2932F 6,36:1, en
     als tekst op de inktbalk 6,04:1. Die kan dus mee zoals hij gemeten is. */
  --geel:#C2932F;
  --geel-diep:#A87E28;         /* 4,81:1 met --op-geel erop */
  --op-geel:#1E1708;
  /* De donkere balken in het zwart van de badge zelf: #1D1D1B. Wit erop
     haalt 16,88:1. */
  --inkt:#1D1D1B;
  --op-inkt:#FFFFFF;
  --knop:#7A5A16;
  --knop-hover:#5E4511;
  --knop-tekst:#FFFFFF;
  /* Een tint dieper dan het #1E8E3E van het template: daar haalde wit op de
     statuspil 4,21:1 en het groen als tekst op wit precies evenveel. */
  --ok:#1A7D36;
  --ok-zacht:#E8F4EC;
  /* Groen als vlák, met kleine witte tekst erop. Apart van --ok, want die
     wordt óók als tekstkleur gebruikt en moet in donker juist lichter zijn. */
  --ok-vlak:#1A7D36;
  --rood:#B02A1E;
  --rood-zacht:#FBEEEC;
  --geel-zacht:#FEFAF1;
  /* Het goud is bruikbaar als vlak maar veel te licht voor kleine tekst: op
     wit haalt #C2932F maar 2,93:1. Voor tekst staat hier dezelfde diepe
     variant als --merk: 5,92:1 op wit en 5,79:1 op --geel-zacht. Dat vangt de
     drie plekken op waar het template op 12px tekst zakt: het label van de
     accenttegel, de dagtegel van vandaag en de sterretjes. */
  --accent-tekst:#7A5A16;
  --ster:#7A5A16;
  --schaduw:0 1px 2px rgba(16,24,32,.05), 0 4px 12px rgba(16,24,32,.06);
  --schaduw-2:0 4px 8px rgba(16,24,32,.06), 0 14px 34px rgba(16,24,32,.10);
  --r:12px;
  --r-l:18px;
  --pad:clamp(16px,4vw,32px);
  --breed:1200px;
  --kop-h:70px;
  --f:"Poppins","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#14130F;
  --paneel:#1E1C17;
  --paneel-2:#27241D;
  --lijn:#36322A;
  --lijn-sterk:#4E483B;
  --tekst:#F4F1E9;
  --tekst-2:#B0A897;
  /* In donker gaat het merkgoud juist omhoog: als tekst op --bg haalt het
     10,54:1 en op --paneel 9,73:1. De plekken waar dit een vlak mét wit teken
     is houden de diepe kleur van --knop. */
  --merk:#E8C471;
  --merk-zacht:#33290F;
  --merk-op-zacht:#EFCE80;     /* 8,79:1 op --merk-zacht */
  /* Ook het accentgoud een stap lichter: 11,23:1 op de inktbalk en met
     --op-geel erop nog altijd 10,59:1. */
  --geel:#E4C480;
  --geel-diep:#D8B468;         /* 9,01:1 met --op-geel erop */
  --op-geel:#1E1708;
  --inkt:#121110;
  --op-inkt:#FFFFFF;
  --knop:#7A5A16;
  --knop-hover:#96701D;
  --ok:#4CC26A;
  --ok-zacht:#152618;
  /* in donker blijft het vlak diep, anders haalt wit erop maar 2,27:1 */
  --ok-vlak:#1F7F3B;
  --rood:#E8776A;
  --rood-zacht:#2B1714;
  --geel-zacht:#2A2312;
  --accent-tekst:#E4C480;      /* 9,28:1 op --geel-zacht, 9,50:1 op --paneel */
  --ster:#E4C480;
  --schaduw:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.26);
  --schaduw-2:0 4px 8px rgba(0,0,0,.32), 0 14px 34px rgba(0,0,0,.40);
  color-scheme:dark;
}

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

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

html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--tekst);
  font-family:var(--f);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4vw,2.9rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.1rem;font-weight:600}
p{margin:0}

.wrap{width:100%;max-width:var(--breed);margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:clamp(34px,5vw,58px)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--knop);color:var(--knop-tekst);padding:12px 18px;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--merk);outline-offset:2px;border-radius:4px}

.kopje{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:12px;
}
.lead{color:var(--tekst-2);max-width:62ch}

/* ---------- 3. Knoppen ---------- */

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;
  font-weight:600;font-size:.95rem;
  background:var(--knop);color:var(--knop-tekst);
  transition:background .15s linear;
}
.knop:hover{background:var(--knop-hover)}
.knop--rand{
  background:transparent;color:var(--tekst);
  border:1px solid var(--lijn-sterk);
}
.knop--rand:hover{background:var(--paneel-2);border-color:var(--tekst-2)}
.knop--wit{background:#fff;color:#1A1D21}
.knop--wit:hover{background:#EFEFEF}
.knop--breed{width:100%}
.knop[disabled]{opacity:.5;pointer-events:none}
@media (pointer:coarse){ .knop{min-height:44px} }

/* ---------- 4. Balk bovenaan ---------- */

.topbalk{
  background:var(--geel-zacht);
  border-bottom:1px solid var(--lijn);
  font-size:.86rem;color:var(--tekst-2);
  text-align:center;
}
.topbalk__in{padding-block:9px}
.topbalk.is-open{background:var(--ok-zacht)}

/* ---------- 5. Kop ---------- */

.kop{
  position:sticky;top:0;z-index:60;
  background:var(--paneel);
  border-bottom:1px solid var(--lijn);
}
.kop__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);min-height:var(--kop-h)}

.merk{display:flex;align-items:center;gap:10px;margin-right:auto;flex:none}
.merk__mark{width:34px;height:34px;flex:none;color:var(--merk)}
.merk__naam{font-weight:700;font-size:1.12rem;line-height:1.15}
.merk__sub{display:block;font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2)}

.kop__nav{display:flex;align-items:center;gap:clamp(8px,1.8vw,26px)}
.kop__nav a{
  font-size:.94rem;font-weight:500;color:var(--tekst-2);
  padding:8px 2px;transition:color .15s linear;
}
.kop__nav a:hover{color:var(--tekst)}
.kop__nav a[aria-current="page"]{color:var(--tekst);font-weight:600}
@media (max-width:860px){ .kop__nav{display:none} }

.kop__acties{display:flex;align-items:center;gap:10px;flex:none}
.modeknop{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--lijn);color:var(--tekst-2);
  transition:background .15s linear,border-color .15s linear;
}
.modeknop:hover{background:var(--paneel-2);border-color:var(--lijn-sterk)}
.modeknop svg{width:18px;height:18px}
.modeknop .zon{display:none}
:root[data-theme="dark"] .modeknop .zon{display:block}
:root[data-theme="dark"] .modeknop .maan{display:none}

.telknop{position:relative}
.telknop__ico{width:18px;height:18px;display:none}
@media (max-width:520px){
  .telknop__l{display:none}
  .telknop__ico{display:block}
  .telknop{padding-inline:14px}
  .merk__naam{font-size:1rem}
}
.telknop__n{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;padding-inline:5px;border-radius:20px;
  background:var(--rood);color:#fff;
  font-size:.72rem;font-weight:600;
  display:grid;place-items:center;
}

/* ---------- 6. Hero ---------- */

.hero{position:relative;isolation:isolate}
.hero__foto{position:relative;height:clamp(320px,46vw,480px);overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(12,16,20,.55) 0%, rgba(12,16,20,.62) 100%);
}
.hero__in{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px var(--pad);
}
.hero__pil{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:100px;
  background:var(--rood);color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:16px;
}
.hero__pil.is-open{background:var(--ok-vlak)}
.hero h1{color:#fff;max-width:20ch;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero__tekst{
  color:rgba(255,255,255,.92);max-width:60ch;margin-top:14px;
  font-size:.98rem;text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.hero .knop{margin-top:22px}

/* het witte kaartje dat over de hero heen valt */
.overkaart{
  position:relative;z-index:3;
  margin-top:-40px;
  background:var(--paneel);
  border:1px solid var(--lijn);
  border-radius:var(--r-l);
  box-shadow:var(--schaduw-2);
  padding:20px clamp(18px,3vw,28px);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.overkaart__status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;color:var(--rood);
}
.overkaart__status.is-open{color:var(--ok)}
.stip{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.overkaart h2{font-size:1.18rem;font-weight:600;margin-top:3px}
.overkaart .knop{margin-left:auto}
@media (max-width:640px){ .overkaart .knop{margin-left:0;width:100%} }

/* ---------- 7. Rij met de vier feiten ---------- */

.feiten{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.feit{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  padding:18px 20px;
  display:flex;gap:14px;align-items:flex-start;
}
.feit__ico{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:var(--merk-zacht);color:var(--merk);
  display:grid;place-items:center;
}
.feit__ico svg{width:19px;height:19px}
.feit > span:last-child{flex:1;min-width:0}
.feit__l{display:block;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2)}
.feit__v{display:block;font-weight:600;font-size:1.02rem;margin-top:2px}
.feit__s{display:block;font-size:.84rem;color:var(--tekst-2);line-height:1.45}

/* ---------- 8. Blokken ---------- */

.blok{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(20px,3vw,30px);
}
.blok__kop{margin-bottom:18px}
.blok__kop h2{font-size:1.3rem}

.tweekolom{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:880px){ .tweekolom{grid-template-columns:1fr} }

/* ---------- 9. Openingstijden ---------- */

.uren{display:grid;gap:0}
.uur{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--lijn);font-size:.95rem;
}
.uur:last-child{border-bottom:0}
.uur__d{flex:1}
.uur__t{color:var(--tekst-2)}
.uur.is-nu{font-weight:600}
.uur.is-nu .uur__t{color:var(--tekst)}
.uur__nu{
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  /* op --merk-zacht hoort --merk-op-zacht: het merkrood zelf haalt daar
     4,41:1 en dat is voor elf beeldpunten te weinig. */
  background:var(--merk-zacht);color:var(--merk-op-zacht);
  padding:2px 8px;border-radius:100px;
}

/* ---------- 10. Recensies ---------- */

.reviews{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.review{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  padding:20px;
}
.review__wie{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.review__bol{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--merk-zacht);color:var(--merk);
  display:grid;place-items:center;font-weight:600;
}
.review__wie > span:last-child{flex:1;min-width:0}
.review__n{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.review__w{display:block;font-size:.8rem;color:var(--tekst-2)}
.sterren{color:var(--ster);font-size:.9rem;letter-spacing:.1em;margin-bottom:8px}
.review p{font-size:.92rem;color:var(--tekst-2)}

/* ---------- 11. Over ons ---------- */

.over__beeld{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--lijn)}
.over__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}
.over h3{margin-top:22px;margin-bottom:8px}
.over p + p{margin-top:12px}
.over p{color:var(--tekst-2);font-size:.95rem}
.over .knop{margin-top:22px}

/* ---------- 12. Bezorggebieden ---------- */

.zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.zone{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  padding:18px 20px;
}
.zone__n{font-weight:600;font-size:1rem}
.zone__rij{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.85rem;color:var(--tekst-2)}
.zone__rij b{font-weight:600;color:var(--tekst)}
.zone__pcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn)}
.pc{
  font-size:.76rem;color:var(--tekst-2);
  background:var(--paneel-2);border:1px solid var(--lijn);
  padding:3px 9px;border-radius:6px;
}

/* ---------- 13. Locatie ---------- */

.locatie{display:flex;gap:16px;align-items:flex-start}
.locatie > div{flex:1;min-width:0}
.locatie__ico{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--merk-zacht);color:var(--merk);display:grid;place-items:center;
}
.locatie__ico svg{width:22px;height:22px}
.locatie p{color:var(--tekst-2);font-size:.94rem;margin-top:4px}

/* ---------- 14. Voettekst ---------- */

.voet{
  background:var(--paneel);
  border-top:1px solid var(--lijn);
  margin-top:clamp(30px,5vw,54px);
  padding-block:clamp(30px,4vw,46px) 22px;
}
.voet__grid{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1.6fr 1fr 1.2fr 1.2fr}
@media (max-width:880px){ .voet__grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .voet__grid{grid-template-columns:1fr} }
.voet h4{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:12px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem;color:var(--tekst-2)}
.voet a{transition:color .15s linear}
.voet a:hover{color:var(--merk)}
.voet__p{font-size:.9rem;color:var(--tekst-2);margin-top:12px;max-width:36ch}
.voet__uren{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--tekst-2)}
.voet__eind{
  margin-top:clamp(24px,3vw,36px);padding-top:18px;border-top:1px solid var(--lijn);
  display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;
  font-size:.84rem;color:var(--tekst-2);
}
.voet__eind nav{display:flex;gap:18px;margin-left:auto}
.voet__melding{
  margin-top:14px;font-size:.8rem;color:var(--tekst-2);line-height:1.6;
}

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

.winkel{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(16px,2.4vw,30px);align-items:start;
  padding-block:clamp(16px,2.6vw,26px) clamp(40px,6vw,70px);
}
.winkel > *{min-width:0}
@media (max-width:1040px){ .winkel{grid-template-columns:minmax(0,1fr)} }

.banner{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--lijn)}
.banner img{width:100%;height:clamp(150px,20vw,230px);object-fit:cover;object-position:50% 58%}
.winkelkop{
  background:var(--paneel);border:1px solid var(--lijn);border-top:0;
  border-radius:0 0 var(--r-l) var(--r-l);
  padding:18px clamp(18px,2.6vw,26px) 20px;
  margin-bottom:18px;
}
.winkelkop h1{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.winkelkop p{color:var(--tekst-2);font-size:.92rem;margin-top:3px}

.zoek{position:relative;margin-bottom:14px}
.zoek svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--tekst-2)}
.zoek input{
  width:100%;padding:12px 16px 12px 42px;
  border-radius:8px;border:1px solid var(--lijn);background:var(--paneel);
  transition:border-color .15s linear;
}
.zoek input:focus{outline:none;border-color:var(--merk)}

.tabs{
  position:sticky;top:var(--kop-h);z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--lijn);
  margin-bottom:6px;
}
.tabs__scroll{
  display:flex;gap:4px;overflow-x:auto;padding-block:10px;padding-right:26px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
}
.tabs__scroll::-webkit-scrollbar{display:none}
.tab{
  flex:none;padding:8px 15px;border-radius:8px;
  font-size:.9rem;font-weight:500;color:var(--tekst-2);white-space:nowrap;
  transition:background .15s linear,color .15s linear;
}
.tab:hover{background:var(--paneel-2);color:var(--tekst)}
.tab.is-nu{background:var(--knop);color:var(--knop-tekst)}

.cat{padding-top:clamp(20px,3vw,30px);scroll-margin-top:calc(var(--kop-h) + 56px)}
.cat h2{font-size:1.25rem;margin-bottom:14px}
.cat__n{font-size:.82rem;font-weight:400;color:var(--tekst-2);margin-left:8px}

.producten{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.product{
  display:flex;width:100%;text-align:left;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;
  transition:border-color .15s linear;
}
.product:hover{border-color:var(--lijn-sterk)}
.product__body{padding:14px 14px 14px 16px;flex:1;min-width:0;display:flex;flex-direction:column}
.product__n{font-weight:600;font-size:.98rem}
.product__sub{font-weight:400;font-size:.8rem;color:var(--tekst-2);margin-left:6px}
.product__d{
  font-size:.85rem;color:var(--tekst-2);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product__voet{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.product__p{font-weight:600;font-size:.98rem}
.product__img{width:104px;flex:none;align-self:stretch;background:var(--paneel-2)}
.product__img img{width:100%;height:100%;object-fit:cover}
.plus{
  margin-left:auto;width:34px;height:34px;border-radius:8px;flex:none;
  background:var(--knop);color:var(--knop-tekst);
  display:grid;place-items:center;
  transition:background .15s linear;
}
.plus:hover{background:var(--knop-hover)}
.plus svg{width:15px;height:15px}

.labels{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.label{
  font-size:.68rem;font-weight:500;
  padding:2px 8px;border-radius:5px;
  background:var(--paneel-2);border:1px solid var(--lijn);color:var(--tekst-2);
}
.label.is-pop{background:var(--merk-zacht);border-color:transparent;color:var(--merk)}

.dranken{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.drank{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:13px 18px;border-bottom:1px solid var(--lijn);
  transition:background .15s linear;
}
.drank:last-child{border-bottom:0}
.drank:hover{background:var(--paneel-2)}
.drank > span:first-child{flex:1;min-width:0}
.drank__n{display:block;font-weight:600;font-size:.95rem}
.drank__s{display:block;font-size:.82rem;color:var(--tekst-2)}
.drank__p{font-weight:600;font-size:.95rem;flex:none}
.drank .plus{margin-left:0;width:30px;height:30px}

.leeg-zoek{
  padding:34px 20px;text-align:center;color:var(--tekst-2);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
}

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

.mandje{
  position:sticky;top:calc(var(--kop-h) + 14px);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--schaduw);
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--kop-h) - 30px);
}
.mandje__kop{display:flex;align-items:center;gap:10px;padding:18px 20px 14px}
.mandje__kop h2{font-size:1.08rem;font-weight:600}
.mandje__kop svg{width:19px;height:19px;color:var(--merk)}

.wissel{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 14px}
.wissel button{
  padding:11px 8px;border-radius:8px;border:1px solid var(--lijn);
  display:grid;gap:1px;text-align:center;
  transition:border-color .15s linear,background .15s linear,color .15s linear;
}
.wissel button span{display:block;font-weight:600;font-size:.9rem}
.wissel button small{display:block;font-size:.74rem;color:var(--tekst-2)}
.wissel button.is-aan{border-color:var(--merk);background:var(--merk-zacht);color:var(--merk-op-zacht)}
.wissel button.is-aan small{color:var(--merk-op-zacht)}

.adres{padding:0 16px 16px}
.adres label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:7px}
.adres input{
  width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid var(--lijn);background:var(--paneel);
  transition:border-color .15s linear;
}
.adres input:focus{outline:none;border-color:var(--merk)}
.adres .knop{margin-top:9px}
.adres__meld{font-size:.82rem;margin-top:8px;color:var(--tekst-2);min-height:1.2em}
.adres__meld.is-goed{color:var(--merk)}
.adres__meld.is-mis{color:var(--rood)}

.mandje__lijst{flex:1;overflow-y:auto;padding:0 16px;border-top:1px solid var(--lijn)}
.regel{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--lijn)}
.regel:last-child{border-bottom:0}
.regel__img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--paneel-2)}
.regel__img--merk{display:grid;place-items:center;color:var(--merk);background:var(--merk-zacht)}
.regel__img--merk svg{width:20px;height:20px}
.regel__mid{flex:1;min-width:0}
.regel__n{font-weight:600;font-size:.9rem;line-height:1.3}
.regel__x{font-size:.78rem;color:var(--tekst-2);margin-top:2px}
.regel__r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.regel__p{font-size:.88rem;font-weight:600}
.stapper{display:flex;align-items:center;gap:2px;border:1px solid var(--lijn);border-radius:6px;padding:1px}
.stapper button{
  width:24px;height:24px;border-radius:4px;display:grid;place-items:center;color:var(--tekst-2);
  transition:background .15s linear;
}
.stapper button:hover{background:var(--paneel-2)}
.stapper span{font-size:.85rem;min-width:20px;text-align:center}
.stapper svg{width:11px;height:11px}

.mandje__leeg{padding:38px 20px;text-align:center;color:var(--tekst-2)}
.mandje__leeg svg{width:40px;height:40px;color:var(--lijn-sterk);margin:0 auto 12px}
.mandje__leeg strong{display:block;color:var(--tekst);font-weight:600;margin-bottom:4px}

.mandje__voet{border-top:1px solid var(--lijn);padding:15px 18px 18px;background:var(--paneel-2)}
.som{display:flex;justify-content:space-between;font-size:.9rem;color:var(--tekst-2);padding-block:3px}
.som--eind{color:var(--tekst);font-weight:700;font-size:1.05rem;border-top:1px solid var(--lijn);margin-top:8px;padding-top:10px}
.minbalk{margin-bottom:10px;font-size:.8rem;color:var(--tekst-2)}
.minbalk__spoor{height:4px;border-radius:4px;background:var(--lijn);overflow:hidden;margin-bottom:6px}
.minbalk__vul{height:100%;background:var(--merk);width:0}
.mandje__voet .knop{margin-top:10px}

.mandje__greep{
  display:none;align-items:center;gap:10px;height:60px;flex:none;
  padding:0 20px;width:100%;text-align:left;
  border-bottom:1px solid var(--lijn);background:var(--paneel);
  position:sticky;top:0;z-index:2;font-weight:600;
}
.mandje__greep small{margin-left:auto;font-weight:600;font-size:.9rem}

/* Deze regels staan bewust NA de basisregels hierboven, anders wint
   display:none van de greep en heeft het blad niets om aan te trekken. */
@media (max-width:1040px){
  .mandje{
    position:fixed;inset:auto 0 0 0;z-index:80;
    border-radius:var(--r-l) var(--r-l) 0 0;
    max-height:84vh;border-bottom:0;
    box-shadow:var(--schaduw-2);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(calc(100% - 60px));
  }
  .mandje.is-open{transform:translateY(0);overflow-y:auto}
  .mandje__greep{display:flex}
  .mandje .mandje__kop{display:none}
  .mandje .mandje__lijst{overflow:visible;flex:0 0 auto}
  .mandje .mandje__voet{position:sticky;bottom:0;z-index:2}
  main.winkel{padding-bottom:90px}
}

/* ---------- 17. Venster ---------- */

.venster{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(12px,3vw,28px);
}
.venster[hidden]{display:none !important}
.venster__waas{position:absolute;inset:0;background:rgba(12,16,20,.55)}
.venster__doos{
  position:relative;width:min(560px,100%);max-height:min(88vh,840px);
  background:var(--paneel);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--schaduw-2);
}
.venster__sluit{
  position:absolute;right:12px;top:12px;z-index:5;
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.9);color:#1A1D21;
  display:grid;place-items:center;
  transition:background .15s linear;
}
.venster__sluit:hover{background:#fff}
.venster__sluit svg{width:15px;height:15px}
.venster__scroll{overflow-y:auto;flex:1}
.venster__voet{padding:16px 20px;border-top:1px solid var(--lijn);background:var(--paneel-2);display:flex;gap:12px;align-items:center}
.venster__voet .knop{flex:1}

.pv__img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paneel-2)}
.pv__body{padding:20px clamp(18px,3vw,26px) 8px}
.pv__body h2{font-size:1.4rem}
.pv__sub{font-size:.85rem;color:var(--tekst-2);margin-top:3px}
.pv__d{margin-top:12px;color:var(--tekst-2);font-size:.94rem}
.pv__all{
  margin-top:14px;padding:11px 14px;border-radius:8px;
  background:var(--paneel-2);border:1px solid var(--lijn);
  font-size:.84rem;color:var(--tekst-2);
}
.pv__all b{color:var(--tekst)}
.opties{margin-top:18px}
.opties h3{font-size:.95rem;margin-bottom:9px}
.optie{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:8px;border:1px solid var(--lijn);
  margin-bottom:7px;cursor:pointer;
  transition:border-color .15s linear;
}
.optie:hover{border-color:var(--lijn-sterk)}
.optie:has(input:checked){border-color:var(--merk);background:var(--merk-zacht)}
/* padding:0 is nodig omdat .veld input hierboven al padding zet, en een
   vakje van 18px met 28px padding wordt een ovaal */
.optie input{
  appearance:none;width:18px;height:18px;flex:none;padding:0;
  border:1px solid var(--lijn-sterk);border-radius:4px;position:relative;cursor:pointer;
}
.optie input:checked{background:var(--knop);border-color:var(--knop)}
.optie input:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.optie__n{flex:1;font-size:.93rem}
.optie__p{font-size:.86rem;color:var(--tekst-2)}

/* afrekenen: één scherm, geen stappen */
.veld{margin-bottom:12px}
/* alleen het eigen label van het veld, niet de labels van de keuzerondjes erin */
.veld > label{display:block;font-size:.78rem;font-weight:600;color:var(--tekst-2);margin-bottom:6px}
.veld input,.veld textarea,.veld select{
  width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid var(--lijn);background:var(--paneel);
  transition:border-color .15s linear;
}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--merk)}
.veld textarea{min-height:74px;resize:vertical}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){ .veldrij{grid-template-columns:1fr} }
.betaalrij{display:grid;gap:7px}
.betaal{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:8px;border:1px solid var(--lijn);cursor:pointer;
  transition:border-color .15s linear;
}
.betaal:has(input:checked){border-color:var(--merk);background:var(--merk-zacht)}
.betaal input{appearance:none;width:17px;height:17px;border-radius:50%;flex:none;padding:0;border:1px solid var(--lijn-sterk);position:relative;cursor:pointer}
.betaal input:checked{border-color:var(--merk)}
.betaal input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--merk)}
.betaal > span:not([class]){flex:1;min-width:0}
.betaal__n{display:block;font-weight:600;font-size:.93rem}
.betaal__s{display:block;font-size:.8rem;color:var(--tekst-2)}
.noot{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;
  padding:11px 14px;border-radius:8px;background:var(--geel-zacht);border:1px solid var(--lijn);
  font-size:.83rem;color:var(--tekst-2);
}
.noot svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--tekst-2)}
.gelukt{padding:34px 24px;text-align:center}
.gelukt__ico{
  width:60px;height:60px;border-radius:50%;margin:0 auto 18px;
  background:var(--merk-zacht);color:var(--merk);display:grid;place-items:center;
}
.gelukt__ico svg{width:30px;height:30px}
.gelukt h2{font-size:1.4rem}
.gelukt p{color:var(--tekst-2);margin-top:10px;font-size:.94rem}

/* ---------- 18. Kleine schermen ---------- */

@media (max-width:640px){
  .product__img{width:88px}
  .overkaart{margin-top:-24px}
  .hero__foto{height:clamp(280px,58vw,360px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* ==========================================================================
   19. Onderdelen die de volledige kopie erbij heeft
   ========================================================================== */

/* de infoknop naast de restaurantnaam */
.winkelkop{display:flex;align-items:flex-start;gap:14px}
.winkelkop__tekst{flex:1;min-width:0}
.infoknop{
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1px solid var(--lijn);color:var(--tekst-2);
  display:grid;place-items:center;
  transition:background .15s linear,border-color .15s linear,color .15s linear;
}
.infoknop:hover{background:var(--paneel-2);border-color:var(--lijn-sterk);color:var(--tekst)}
.infoknop svg{width:19px;height:19px}

/* mandjekop met het aantal ernaast */
.mandje__kop{justify-content:space-between}
.mandje__telling{font-size:.84rem;color:var(--tekst-2);font-weight:500}

/* regels in het mandje: "2x Dragon roll" */
.regel{align-items:flex-start}
.regel__x{
  flex:none;min-width:26px;font-weight:600;font-size:.9rem;color:var(--tekst-2);
  padding-top:1px;
}
.regel__op{font-size:.8rem;color:var(--tekst-2);margin-top:2px;line-height:1.45}

/* servicekosten met de uitleg eronder */
.som--uitleg{align-items:flex-start}
.som--uitleg small{display:block;font-size:.76rem;opacity:.85;margin-top:1px}

/* de link onder de afrekenknop */
.mandje__link{
  display:block;width:100%;margin-top:10px;padding:6px;
  font-size:.86rem;color:var(--tekst-2);text-align:center;text-decoration:underline;
  transition:color .15s linear;
}
.mandje__link:hover{color:var(--merk)}

/* Misschien ook lekker? */
.upsell{border-top:1px solid var(--lijn);margin-top:4px;padding-top:14px;padding-bottom:4px}
.upsell h3{font-size:.9rem;font-weight:600;margin-bottom:10px}
.upsell__r{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px;border-radius:8px;margin-bottom:4px;
  transition:background .15s linear;
}
.upsell__r:hover{background:var(--paneel-2)}
.upsell__r img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.upsell__r > span:not([class]){flex:1;min-width:0}
.upsell__n{display:block;font-size:.88rem;font-weight:600;line-height:1.3}
.upsell__c{display:block;font-size:.76rem;color:var(--tekst-2)}
.upsell__p{font-size:.86rem;font-weight:600;flex:none}
.upsell__r .plus{margin-left:0;width:26px;height:26px;border-radius:6px}
.upsell__r .plus svg{width:12px;height:12px}

/* vaste balk onderaan op de telefoon */
.vastebalk{
  display:none;
  position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
  align-items:center;gap:10px;
  padding:14px 18px;border-radius:10px;
  background:var(--knop);color:var(--knop-tekst);
  font-weight:600;box-shadow:var(--schaduw-2);
  transition:background .15s linear;
}
.vastebalk:hover{background:var(--knop-hover)}
.vastebalk__n{
  min-width:24px;height:24px;padding-inline:6px;border-radius:6px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:.82rem;
}
.vastebalk__p{margin-left:auto}
@media (max-width:1040px){
  .vastebalk:not([hidden]){display:flex}
  main.winkel{padding-bottom:150px}
}

/* het productvenster: prijs, extra's met "optioneel", opmerkingveld */
.pv__body h2 .pv__sub{font-size:.86rem;font-weight:400;color:var(--tekst-2)}
.pv__p{font-size:1.2rem;font-weight:700;margin-top:10px}
.opties h3{display:flex;align-items:baseline;gap:8px}
.opties h3 span{
  font-size:.74rem;font-weight:500;color:var(--tekst-2);
  background:var(--paneel-2);border:1px solid var(--lijn);
  padding:1px 8px;border-radius:100px;
}
.opmerking{margin-top:16px}
.opmerking__knop{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9rem;font-weight:500;color:var(--merk);
  padding:8px 0;
}
.opmerking__knop svg{width:15px;height:15px}
.opmerking textarea{
  width:100%;min-height:74px;resize:vertical;
  padding:11px 14px;border-radius:8px;border:1px solid var(--lijn);background:var(--paneel);
}
.opmerking textarea:focus{outline:none;border-color:var(--merk)}
.stapper--groot{padding:3px}
.stapper--groot button{width:32px;height:32px}
.stapper--groot span{min-width:26px;font-weight:600}

/* ---------- De afrekenpagina ---------- */

.afreken{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(16px,2.4vw,30px);align-items:start;
  padding-block:clamp(20px,3vw,32px) clamp(40px,6vw,70px);
}
.afreken > *{min-width:0}
@media (max-width:940px){ .afreken{grid-template-columns:minmax(0,1fr)} }

.afreken__form h1{margin-bottom:18px}
.blok--co{margin-bottom:14px}
.blok--co h2{font-size:1.05rem;margin-bottom:14px}

.fout{
  background:var(--rood-zacht);border:1px solid var(--rood);color:var(--rood);
  padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem;font-weight:500;
}

.keuzerij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.keuze{
  padding:14px 16px;border-radius:8px;border:1px solid var(--lijn);text-align:left;
  transition:border-color .15s linear,background .15s linear;
}
.keuze:hover{border-color:var(--lijn-sterk)}
.keuze.is-aan{border-color:var(--merk);background:var(--merk-zacht)}
.keuze__n{display:block;font-weight:600;font-size:.96rem}
.keuze.is-aan .keuze__n{color:var(--merk-op-zacht)}
.keuze__s{display:block;font-size:.82rem;color:var(--tekst-2);margin-top:1px}

.adreskaart{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border-radius:8px;border:1px solid var(--lijn);
  transition:border-color .15s linear;
}
.adreskaart:hover{border-color:var(--lijn-sterk)}
.adreskaart > span:first-child{flex:1;min-width:0}
.adreskaart__n{display:block;font-weight:600;font-size:.96rem}
.adreskaart__n.is-leeg{color:var(--tekst-2);font-weight:500}
.adreskaart__s{display:block;font-size:.82rem;color:var(--tekst-2);margin-top:1px}
.adreskaart__k{flex:none;font-size:.88rem;font-weight:600;color:var(--merk)}

.codeblok{display:flex;gap:10px}
.codeblok input{
  flex:1;min-width:0;padding:11px 14px;border-radius:8px;
  border:1px solid var(--lijn);background:var(--paneel);
}
.codeblok input:focus{outline:none;border-color:var(--merk)}
.codeblok .knop{flex:none}

.knop--groot{padding:16px 24px;font-size:1rem;margin-top:16px}

.samenvatting{
  position:sticky;top:calc(var(--kop-h) + 14px);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--schaduw);
}
.samenvatting__kop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px 14px;
}
.samenvatting__kop h2{font-size:1.05rem;font-weight:600}
.samenvatting .mandje__lijst{max-height:none;overflow:visible;border-top:1px solid var(--lijn)}
@media (max-width:940px){ .samenvatting{position:static} }

.klaar{
  max-width:560px;margin:clamp(30px,7vw,70px) auto;text-align:center;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(26px,4vw,44px);
}
.klaar__ico{
  width:62px;height:62px;border-radius:50%;margin:0 auto 18px;
  background:var(--merk-zacht);color:var(--merk);display:grid;place-items:center;
}
.klaar__ico svg{width:31px;height:31px}
.klaar h1{font-size:clamp(1.5rem,3vw,2rem)}
.klaar p{color:var(--tekst-2);margin-top:12px}
.klaar__sub{font-size:.88rem}

.knop.is-uit{opacity:.5;pointer-events:none}

.afreken__form h1{font-size:clamp(1.6rem,2.6vw,2.1rem)}

/* de greep van het mandje doet op de telefoon dienst als "Bekijk bestelling",
   precies zoals de referentie. Een tweede vaste balk zou erbovenop vallen. */
.mandje__greep small{text-align:right;line-height:1.25;font-weight:500;color:var(--tekst-2)}
.mandje.is-open .mandje__greep small{color:var(--tekst-2)}

.terug__kort{display:none}
@media (max-width:640px){
  .terug__lang{display:none}
  .terug__kort{display:inline}
}

/* ==========================================================================
   Merklaag: alles wat deze vestiging onderscheidt van het kale template.
   Het merk is het goud uit de logobadge (#C2932F, met #7A5A16 als diepe
   variant voor tekst) op het bijna zwarte vlak van diezelfde badge
   (#1D1D1B), dat hier de inkt voor de balken is.
   ========================================================================== */

/* ---------- Kop en merk ---------- */

.kop{background:var(--inkt);border-bottom:0}
.kop__nav a{color:rgba(255,255,255,.72)}
.kop__nav a:hover,.kop__nav a[aria-current="page"]{color:#fff}
.kop__nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--geel)}
.kop .merk__naam{color:#fff}
.kop .merk__sub{color:var(--geel)}
.kop .modeknop{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.kop .modeknop:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.kop .telknop{background:var(--geel);color:var(--op-geel)}
.kop .telknop:hover{background:var(--geel-diep)}
.kop .telknop__n{background:var(--knop);color:#fff}

.merk__logo{height:38px;width:auto;flex:none}
@media (max-width:520px){ .merk__logo{height:32px} }
.merk__naam{letter-spacing:-.015em}

.topbalk{background:var(--geel);color:var(--op-geel);border-bottom:0;font-weight:500}
.topbalk.is-open{background:var(--geel)}

/* ---------- Koppen in de huisstijl ----------
   Bij de referentie staan alleen de kleine bovenschriften in kapitaal, met
   brede spatiëring: "OPENINGSTIJDEN", "BEZORGGEBIEDEN", "MISSCHIEN OOK
   LEKKER?", de kolomkopjes in de voettekst en de kickers op de tekstpagina's.
   De koppen zelf (h1 en h2) blijven gewoon zinsvorm. */

h1,h2{letter-spacing:-.02em}
.kopje{color:var(--merk);letter-spacing:.14em}

/* ---------- Hero ---------- */

.hero__foto::after{
  background:linear-gradient(105deg, rgba(20,17,18,.86) 0%, rgba(20,17,18,.62) 46%, rgba(20,17,18,.45) 100%);
}
/* De pil is een vlák met wit erop, dus hier --knop en niet --merk: in donker
   wordt --merk juist lichter en zakte wit erop naar 2,32:1. Met --knop staat
   het in beide thema's op 5,07:1, en in licht ziet het er hetzelfde uit. */
.hero__pil{background:var(--knop)}
.hero__pil.is-open{background:var(--ok-vlak)}
.hero .knop{background:var(--geel);color:var(--op-geel)}
.hero .knop:hover{background:var(--geel-diep)}

/* ---------- Gele accenten ---------- */

.feit__ico{background:var(--geel-zacht);color:var(--geel-diep)}
:root[data-theme="dark"] .feit__ico{color:var(--geel)}
.label.is-pop{background:var(--geel);border-color:transparent;color:var(--op-geel);font-weight:600}
.product__p{font-weight:700}
.product__vanaf{font-weight:500;color:var(--tekst-2);font-size:.82rem;margin-right:4px}
.plus{background:var(--merk);color:#fff}

/* ---------- Voet ---------- */

.voet{background:var(--inkt);color:rgba(255,255,255,.72);border-top:0}
.voet h4{color:var(--geel)}
.voet ul,.voet__p,.voet__uren{color:rgba(255,255,255,.7)}
.voet a:hover{color:var(--geel)}
.voet .merk__naam{color:#fff}
.voet .merk__sub{color:var(--geel)}
.voet__eind{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55)}
.voet__melding{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}

/* ---------- Keuzegroepen in het productvenster ----------
   Deze kaart heeft er twee, allebei optioneel: een extra saus en een extra
   drankje, bij 102 van de 119 gerechten. Er is geen verplichte groep, dus
   geen enkele prijs is een vanaf-prijs. Verplichte groepen zijn keuzerondjes,
   optionele zijn vinkjes; alleen die tweede vorm komt hier voor.
   De regel hieronder staat bewust ná .veld input, want een basisregel die
   eerder staat verliest het van de latere. */

.groep{margin-top:20px}
.groep__kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.groep__kop h3{font-size:.95rem;text-transform:none}
.groep__pil{
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 9px;border-radius:100px;
}
.groep__pil--moet{background:var(--merk-zacht);color:var(--merk-op-zacht)}
.groep__pil--mag{background:var(--paneel-2);color:var(--tekst-2);border:1px solid var(--lijn)}
.groep__fout{color:var(--merk);font-size:.84rem;margin-top:7px}

.keus{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:8px;border:1px solid var(--lijn);
  margin-bottom:7px;cursor:pointer;
  transition:border-color .15s linear,background .15s linear;
}
.keus:hover{border-color:var(--lijn-sterk)}
.keus:has(input:checked){border-color:var(--merk);background:var(--merk-zacht)}
.keus > input{
  appearance:none;width:18px;height:18px;flex:none;padding:0;margin:0;
  border:1px solid var(--lijn-sterk);background:var(--paneel);
  position:relative;cursor:pointer;
}
.keus > input[type="radio"]{border-radius:50%}
.keus > input[type="checkbox"]{border-radius:4px}
.keus > input[type="radio"]:checked{border-color:var(--merk)}
.keus > input[type="radio"]:checked::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--merk);
}
.keus > input[type="checkbox"]:checked{background:var(--merk);border-color:var(--merk)}
.keus > input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.keus__n{flex:1;font-size:.93rem;min-width:0}
.keus__p{font-size:.86rem;color:var(--tekst-2);flex:none}

/* ---------- Kaartregels met de gekozen opties ---------- */

.regel__op{display:block}


/* In donker is --merk lichter rood, prima voor tekst maar te zwak onder wit.
   De plusknop en het aantal in de kop houden daarom het diepe merkrood. */
.plus,.telknop__n{background:var(--knop);color:#fff}

/* De kaartjes klemmen hun foto af, anders steekt het witte vlak met een
   rechte hoek buiten de afgeronde rand uit. In donker is het wit iets
   gedempt, want een echt wit blok schreeuwt naast een donkere kaart. */
.product{overflow:hidden}


/* De gevelfoto is lichter dan het beeld in het template (hout en lucht),
   dus de sluier gaat iets dieper zodat de herotekst leesbaar blijft.
   Nagemeten: het lichtste beeldpunt achter de kop zakt van 133 naar 105. */
.hero__foto::after{
  background:linear-gradient(to bottom, rgba(14,12,16,.66) 0%, rgba(14,12,16,.72) 100%);
}

/* ==========================================================================
   Startpagina één op één met de referentie
   --------------------------------------------------------------------------
   Op nefertitipizzeria-utrecht.nl zitten de status, de vier feiten en de
   openingstijden in ÉÉN witte kaart die over de hero heen valt. De dagen zijn
   zeven tegels naast elkaar met de dag afgekort, niet zeven regels onder
   elkaar. De sectiekoppen zijn een accentbalkje met een kop ernaast, geen
   bovenschrift.
   ========================================================================== */

.kaartblok{position:relative;z-index:3}

.overkaart{
  display:block;                 /* de kaart is nu een stapel, geen rij */
  margin-top:-40px;
  padding:clamp(20px,3vw,32px);
}
.overkaart__kop{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.overkaart__kop > div{min-width:0}
.overkaart__kop .knop{flex:none;padding:12px 22px;font-size:.9rem;box-shadow:var(--schaduw)}
.overkaart__kop .knop svg{width:15px;height:15px}

/* de vier feiten zijn tegels binnen de kaart, twee op de telefoon en vier op
   het brede scherm, precies zoals de referentie */
.feiten{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feit{
  background:var(--paneel-2);border:0;border-radius:12px;
  padding:14px;gap:12px;
}
.feit__ico{width:34px;height:34px;border-radius:9px;background:var(--merk-zacht)}
.feit__ico svg{width:17px;height:17px}
.feit__l{font-size:.72rem;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--tekst-2)}
.feit__v{font-size:.9rem;font-weight:600;margin-top:1px;line-height:1.35}
.feit--accent{background:var(--geel-zacht)}
.feit--accent .feit__ico{background:var(--geel);color:var(--op-geel)}
.feit--accent .feit__l{color:var(--accent-tekst)}
a.feit{transition:background .15s linear}
a.feit:hover{background:var(--lijn)}
@media (max-width:760px){ .feiten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){ .feiten{grid-template-columns:minmax(0,1fr)} }

/* de openingstijden, gescheiden door een lijn, met zeven dagtegels */
.urenblok{margin-top:22px;padding-top:22px;border-top:1px solid var(--lijn)}
.urenblok__kop{display:flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--tekst-2)}
.urenblok__kop svg{width:15px;height:15px;flex:none}
.urenblok__kop span{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.dag{
  text-align:center;padding:12px 8px;border-radius:12px;
  background:var(--paneel-2);border:1px solid transparent;
}
.dag__d{display:block;font-weight:600;font-size:.9rem}
.dag__t{display:block;font-size:.76rem;color:var(--tekst-2);margin-top:2px}
.dag.is-nu{background:var(--geel-zacht);border-color:var(--geel)}
.dag.is-nu .dag__t{color:var(--accent-tekst)}
.dag.is-dicht .dag__t{color:var(--rood)}
@media (max-width:900px){ .dagen{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:520px){ .dagen{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* sectiekop: een accentbalkje met de kop ernaast */
.sectiekop{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.sectiekop__balk{width:4px;height:30px;border-radius:4px;background:var(--merk);flex:none}
.sectiekop h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}

.tekstblok p{color:var(--tekst-2);font-size:.96rem;max-width:78ch}
.tekstblok p + p{margin-top:14px}
.tekstblok h2{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:12px}
.tekstblok .knop{margin-top:20px}
.tweekolom--om > *:first-child{order:2}
@media (max-width:880px){ .tweekolom--om > *:first-child{order:0} }

/* bezorggebieden: één kaart met rijen, gescheiden door dunne lijnen */
.blok__kop--klein{display:flex;align-items:center;gap:8px;color:var(--tekst-2);margin-bottom:18px}
.blok__kop--klein svg{width:15px;height:15px;flex:none}
.blok__kop--klein h2{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);
}
.zones{display:block}
.zone{
  background:transparent;border:0;border-bottom:1px solid var(--lijn);
  border-radius:0;padding:16px 0;
}
.zone:first-child{padding-top:0}
.zone:last-child{border-bottom:0;padding-bottom:0}
.zone__kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.zone__n{font-weight:600;font-size:.96rem}
.zone__rij{margin-top:0;gap:6px 14px}
.zone__pcs{margin-top:8px;padding-top:0;border-top:0}
.zones__noot{margin-top:18px;font-size:.85rem;color:var(--tekst-2)}

/* de kaart bij "Onze locatie" */
.kaartje{
  border-radius:var(--r-l);overflow:hidden;border:1px solid var(--lijn);
  box-shadow:var(--schaduw);background:var(--paneel-2);
}
.kaartje iframe{display:block;width:100%;height:clamp(260px,38vw,420px);border:0}

/* De referentie houdt de feiten ook op een telefoon twee naast elkaar en
   knipt het adres af op twee regels; dat doen wij dus ook. */
@media (max-width:400px){ .feiten{grid-template-columns:repeat(2,minmax(0,1fr))} }
.feit__v{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}


/* ==========================================================================
   Bestelpagina één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten op nefertitipizzeria-utrecht.nl bij 1265, 1085, 885 en 390 px:

   main            margin-right 400px vanaf 768px, daaronder nul
   het mandje      fixed rechts, 400px breed, schermhoog, grijs vlak
   de container    20px zijruimte, vanaf 1024px 80px
   de banner       180px hoog, vanaf 768px 350px, vanaf 1024px 420px, geen rand
   het logovakje   80x80 wit, radius 16, 8px lucht, over de onderrand van de banner
   de gerechten    ÉÉN kolom, 16px ertussen, elke regel een kaart van 20px
                   met radius 12, naam 20px/600, omschrijving 14px grijs op twee
                   regels, prijs 18px/700, en rechts een donkere pil met een +
   de tabs         onderstreept, niet als pil: 8px 16px, 14px/500, actief krijgt
                   een merkkleurige onderrand en een licht vlak
   ========================================================================== */

.winkel{
  display:block;padding:0;
  padding-bottom:clamp(90px,12vw,40px);
}
.winkel__kolom{min-width:0}

/* de container binnen de kolom */
.vak{padding-inline:20px}
@media (min-width:1024px){ .vak{padding-inline:80px} }

@media (min-width:768px){
  .winkel{margin-right:400px;padding-bottom:40px}
}

/* ---------- banner met het logovakje ---------- */

.banner{
  position:relative;width:100%;border:0;border-radius:0;overflow:hidden;
  height:180px;
}
@media (min-width:768px){ .banner{height:350px} }
@media (min-width:1024px){ .banner{height:420px} }
.banner img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.banner__vak{position:absolute;inset:auto 0 16px 0;pointer-events:none}
@media (min-width:768px){ .banner__vak{bottom:24px} }
.bannerlogo{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;padding:8px;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;
  box-shadow:var(--schaduw);
}
@media (min-width:768px){ .bannerlogo{width:80px;height:80px} }
.bannerlogo img{width:100%;height:auto;object-fit:contain}

/* ---------- naam van de zaak ---------- */

.winkelkop{
  background:transparent;border:0;border-radius:0;
  padding:12px 0;margin-bottom:0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
@media (min-width:768px){ .winkelkop{margin-top:24px} }
.winkelkop h1{font-size:1.25rem;line-height:1.2}
@media (min-width:768px){ .winkelkop h1{font-size:1.875rem} }
.winkelkop p{color:var(--tekst-2);font-size:.875rem;margin-top:4px;text-transform:none}
@media (min-width:768px){ .winkelkop p{font-size:1rem} }
.infoknop{
  width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--lijn);color:var(--tekst-2);
}
@media (min-width:768px){ .infoknop{width:40px;height:40px} }
.infoknop svg{width:19px;height:19px}

/* ---------- de plakkende balk met zoeken en tabs ---------- */

.balk{
  position:sticky;top:var(--kop-h);z-index:40;
  background:color-mix(in srgb, var(--paneel) 95%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
  margin-bottom:24px;
}
.balk .vak{padding-block:12px 4px}

.wissel--mobiel{margin-bottom:8px}
@media (min-width:768px){ .wissel--mobiel{display:none} }

.zoek{margin-bottom:0}
.zoek input{
  height:44px;padding:0 16px 0 42px;
  border-radius:12px;border:2px solid var(--lijn);background:var(--paneel-2);
}
.zoek svg{left:16px}

.tabs{
  position:static;background:transparent;border-bottom:0;margin-bottom:0;
}
.tabs__scroll{gap:8px;padding-block:12px;padding-right:0;mask-image:none;-webkit-mask-image:none}
.tab{
  padding:8px 16px;border-radius:0;
  border-bottom:2px solid transparent;
  font-size:.875rem;font-weight:500;color:var(--tekst-2);
}
.tab:hover{background:transparent;color:var(--tekst);border-bottom-color:var(--lijn-sterk)}
.tab.is-nu{
  background:var(--merk-zacht);color:var(--tekst);
  border-bottom-color:var(--merk);
}

/* ---------- categorie en gerechten ---------- */

.cat{padding-top:0;margin-bottom:24px;scroll-margin-top:calc(var(--kop-h) + 130px)}
.catkop{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.catkop__balk{width:4px;height:32px;border-radius:9999px;background:var(--merk);flex:none}
.cat h2{font-size:1.5rem;font-weight:700;margin-bottom:0;text-transform:none}

.producten{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.product{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;
  padding:20px;border-radius:12px;
  background:var(--paneel);border:1px solid var(--lijn);
  overflow:visible;
  transition:border-color .2s linear,box-shadow .2s linear,background .2s linear;
}
.product:hover{background:var(--paneel-2);border-color:var(--lijn-sterk);box-shadow:var(--schaduw-2)}
.product__body{padding:0;flex:1;min-width:0;display:block}
.product__kop{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.product__n{font-weight:600;font-size:1.25rem;line-height:1.375}
.product__d{
  font-size:.875rem;color:var(--tekst-2);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product__voet{display:block;margin-top:12px;padding-top:0}
.product__p{font-size:1.125rem;font-weight:700}
.product__vanaf{font-size:.875rem;font-weight:500}
.labels{margin-top:0}

/* de plusknop is een donkere pil met een plusteken, geen rond icoontje */
.plus{
  margin-left:16px;width:auto;height:auto;flex:none;
  padding:10px 20px;border-radius:8px;
  background:var(--inkt);color:#fff;
  font-size:.875rem;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.product:hover .plus{background:var(--merk)}
.plus svg{width:14px;height:14px}
@media (max-width:767px){ .plus{padding:8px 12px} }

/* ---------- het mandje als vast paneel rechts ---------- */

@media (min-width:768px){
  .mandje{
    position:fixed;right:0;top:0;bottom:0;width:400px;
    display:flex;flex-direction:column;
    background:var(--bg);border:0;border-left:1px solid var(--lijn);border-radius:0;
    box-shadow:none;z-index:70;max-height:none;
  }
  .mandje .mandje__kop{
    background:var(--paneel);border-bottom:1px solid var(--lijn);
    padding:16px 20px;flex:none;
  }
  .mandje .mandje__scroll{flex:1;overflow-y:auto;min-height:0}
  .mandje .mandje__blok{background:var(--paneel);border-bottom:1px solid var(--lijn);padding:16px}
  .mandje .mandje__lijst{flex:none;overflow:visible;padding:16px;border-top:0}
  .mandje .mandje__voet{background:var(--paneel);border-top:1px solid var(--lijn);padding:20px;flex:none}
}

/* Op de bestelpagina van de referentie is niets plakkerig: de kopbalk is
   64px hoog en scrollt gewoon weg, de balk met zoeken en tabs ook, en het
   mandje ligt er als vast paneel overheen vanaf de bovenrand van het scherm.
   Er staat daar ook geen statusbalk. */
.pagina-winkel .kop{position:static}
.pagina-winkel .kop__in{min-height:64px}
.pagina-winkel .balk{position:relative;top:auto}
.pagina-winkel .cat{scroll-margin-top:16px}
@media (min-width:768px){
  .pagina-winkel .voet{margin-right:400px}
}

/* Het omslagpunt van het mandje ligt bij de referentie op 768px, niet op 1040.
   Boven die grens is het een vast paneel, eronder een blad dat opkomt met een
   zwevende balk eronder: fixed bottom-4 left-4 right-4, dus met lucht rondom. */
@media (min-width:768px){
  .mandje{transform:none;inset:0 0 0 auto;max-height:none;padding-bottom:0}
  .mandje__greep{display:none}
  .mandje .mandje__kop{display:flex}
  .mandje .mandje__voet{position:static}
}
/* ---------- Het mandje op de telefoon ----------
   TEMPLATEFOUT, gemeld door de opdrachtgever en nagemeten. Het template liet
   het mandje op de telefoon staan als een blad dat met
   transform:translateY(calc(100% - 72px)) omlaag geschoven werd, terwijl het
   ook 16px van de onderrand af stond (inset:auto 16px 16px 16px).

   Die twee gaan niet samen. Het blad schuift precies zijn eigen hoogte min de
   greep omlaag, dus de onderrand van de greep landt 16px bóven de onderkant
   van het scherm — en in die strook van 16px kwam gewoon de bovenkant van de
   inhoud te staan. Gemeten op 375x812 met een leeg mandje: de greep loopt van
   724 tot 796 en .mandje__scroll begint op 797, dus er stak 15px van de
   bezorgen/afhalen-wissel onder de balk uit. Dat zijn de twee halve knoppen
   die de opdrachtgever zag.

   Erger: de knop "Afrekenen" zat in dat blad op y=1191 tot 1405 van een
   venster van 812 hoog. Volledig buiten beeld, en niet aan te tikken zonder
   het blad eerst te openen.

   De oplossing is die van de latere bouw uit dezelfde reeks
   (tasty-sushi.tasty-sushi-poke-coevorden.nl, afgelezen 10 september 2026):
   geen translateY-truc meer, maar twee echte toestanden.

   1. Dicht: een zwevende balk, niets anders. De drie blokken eronder staan op
      display:none, dus er kán niets uitsteken.
   2. Open: een blad vanaf de onderrand, tot 86vh hoog, met de voet er sticky
      onderin zodat "Afrekenen" altijd in beeld staat.

   Eén afwijking van die referentie, met opzet: daar staat de scrollhoogte op
   calc(86vh - 196px), een getal dat afhangt van hoe hoog de voet toevallig is.
   Hier doet de flexbox het rekenwerk (voet flex:none, scroll flex:1 met
   min-height:0), zodat de voet altijd past, ook als er een minimumbalk of een
   extra regel bij komt. */
@media (max-width:767px){
  .mandje:not(.is-open){
    position:fixed;
    top:auto;left:16px;right:16px;
    bottom:max(16px, env(safe-area-inset-bottom, 16px));
    transform:none;
    max-height:none;padding-bottom:0;
    border:1px solid var(--lijn);border-radius:16px;
    overflow:hidden;z-index:80;
  }
  /* De kern van de reparatie: dicht is er niets ánders dan de balk. */
  .mandje:not(.is-open) .mandje__kop,
  .mandje:not(.is-open) .mandje__scroll,
  .mandje:not(.is-open) .mandje__voet{display:none !important}

  .mandje__greep{
    display:flex;height:72px;border-bottom:0;border-radius:16px;
    padding:0 18px;position:static;
  }

  .mandje.is-open{
    position:fixed;
    top:auto;left:0;right:0;bottom:0;
    transform:none;
    border-left:0;border-right:0;border-bottom:0;
    border-radius:20px 20px 0 0;
    max-height:86vh;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 40px rgba(0,0,0,.35);
    overflow:hidden;z-index:80;
  }
  .mandje.is-open .mandje__greep{border-radius:20px 20px 0 0}
  .mandje.is-open .mandje__scroll{
    display:block;flex:1 1 auto;min-height:0;
    max-height:none;overflow-y:auto;
  }
  .mandje.is-open .mandje__voet{flex:none;position:sticky;bottom:0;z-index:2}

  main.winkel{padding-bottom:104px}
}

/* ---------- Onderruimte voor de vaste mandjebalk ----------
   TEMPLATEFOUT. Op de telefoon en de tablet ligt het mandje als vaste balk over
   de onderkant van de pagina. Het template gaf daarvoor onderruimte aan
   main.winkel (90px bij ≤1040px, 104px bij ≤767px), maar de voettekst staat
   ná <main> en kreeg dus niets. Gevolg: de laatste regels van de voettekst
   verdwenen achter de balk en de link "HapNu B.V." was niet meer aan te tikken.

   Nagemeten zichtbare strook van de balk (africa-review/voet-afgedekt.js, op
   390x844 met een gevuld mandje): de balk staat op top=756 van een venster van
   844, dus hij dekt de onderste 88px af, en 88px van de voettekst zat eronder.
   Hier staan dezelfde getallen als het template voor main gebruikt, zodat er
   een kleine marge overblijft, plus de veilige zone van de telefoon.

   Alleen op de bestelpagina: de balk bestaat nergens anders. */
@media (max-width:1040px){
  .pagina-winkel .voet{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media (max-width:767px){
  .pagina-winkel .voet{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* Nagemeten puntjes: de plusknop is bij de referentie 40px hoog omdat text-sm
   daar een regelhoogte van 20px heeft, en de regel lijnt op de telefoon onderaan
   uit in plaats van in het midden. */
.plus{line-height:1.43}
@media (max-width:767px){ .product{align-items:flex-end} }

/* De kopbalk is donker, dus een knop met alleen een rand moet daar witte
   letters hebben; anders staat er zwart op zwart. */
.kop .knop--rand{color:#fff;border-color:rgba(255,255,255,.34)}
.kop .knop--rand:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* In donker valt de bijna zwarte plusknop weg tegen de kaart; daar krijgt hij
   een opgetild vlak zodat het plusteken zichtbaar blijft. */
:root[data-theme="dark"] .plus{background:#35312A}
:root[data-theme="dark"] .product:hover .plus{background:var(--knop)}

/* De referentie zet "Misschien ook lekker?" als klein grijs kapitaalkopje
   boven de suggesties, niet als gewone tussenkop. */
.upsell h3{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:8px;
}
.upsell__r .plus{margin-left:0;width:auto;height:auto;padding:6px 12px;border-radius:8px}

/* ==========================================================================
   Voettekst één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten bij 1265px: 500px hoog, een accentstreep van 4px bovenaan, dan
   py-12 met een raster van vijf kolommen en 48px ertussen waarvan het merkblok
   er twee beslaat. Kopjes 12px/700 in kapitaal met brede spatiëring en 24px
   eronder. Daaronder een streep met 48px lucht erboven en 32px eronder, met de
   auteursrechtregel links, drie links rechts, en nog 24px lager de
   geautoriseerde-bestelwebsitezin.
   ========================================================================== */

.voet{padding-block:0;margin-top:clamp(30px,5vw,54px);border-top:0}
.voet__streep{height:4px;background:linear-gradient(90deg,var(--geel) 0%,var(--geel) 34%,var(--merk) 34%,var(--merk) 100%)}
.voet__in{padding-block:48px}

.voet__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:48px;
}
@media (min-width:768px){ .voet__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){
  .voet__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .voet__merk{grid-column:span 2}
}
.voet__merk img{height:40px;width:auto;margin-bottom:24px}
.voet__p{font-size:.875rem;line-height:1.7;max-width:28rem;margin-top:0}

.voet h3{
  font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--geel);margin-bottom:24px;
}
.voet__links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.voet__links a{font-size:.875rem;color:rgba(255,255,255,.72)}
.voet__links a:hover{color:#fff}

.voet__contact{display:grid;gap:16px}
.voet__contact > div{display:flex;align-items:flex-start;gap:12px}
.voet__contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--geel)}
.voet__contact span,.voet__contact a{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.78)}
.voet__contact a:hover{color:#fff}

.voet__urenlijst{display:grid;gap:10px}
.voet__uren{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:rgba(255,255,255,.82)}
.voet__uren .uur__d{color:rgba(255,255,255,.55)}
/* De tijd erft niet van .voet__uren: .uur__t zet zelf --tekst-2, en dat haalt
   op de donkere voetbalk maar 2,84:1. Hier de lichte variant, net als hierboven. */
.voet__uren .uur__t{color:rgba(255,255,255,.82)}

.voet__onder{margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.voet__rij{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  font-size:.75rem;color:rgba(255,255,255,.6);
}
.voet__rij nav{display:flex;flex-wrap:wrap;gap:8px 32px}
.voet__rij a:hover{color:#fff}
.voet__melding{
  margin-top:24px;font-size:.75rem;line-height:1.7;color:rgba(255,255,255,.6);
}
.voet__melding a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:2px}
.voet__melding a:hover{color:#fff}

/* De hero volgt bij de referentie een beeldverhouding in plaats van een vaste
   hoogte: 3/4 op de telefoon, 16/9 vanaf 640px en 21/9 vanaf 1024px. */
.hero__foto{height:auto;aspect-ratio:3/4}
@media (min-width:640px){ .hero__foto{aspect-ratio:16/9} }
@media (min-width:1024px){ .hero__foto{aspect-ratio:21/9} }

/* Het beeld naast de tekst is 4:3; het logoblok houdt zijn eigen verhouding. */
.over__beeld img{aspect-ratio:4/3}
.over__beeld--logo{
  aspect-ratio:auto;height:auto;object-fit:contain;
  background:var(--paneel);padding:clamp(24px,5vw,56px);
}

/* De melding onderaan had nog een eigen vlak uit de merklaag. */
.voet__melding{background:transparent;border:0;padding:0}

/* ==========================================================================
   Kopbalk één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten bij 1265px: 64px hoog, niet plakkerig, en op breed scherm een
   raster van drie gelijke kolommen. Links het logo op 24px van de rand, in het
   midden vier links van 14px/500 met 8px 16px lucht en een afgeronde hover, en
   rechts een knopje van 36x36 met daarnaast de bestelknop (14px/600, 8px 20px,
   radius 8). Op de telefoon alleen het logo met dat knopje en een menuknop.

   Let op de vololgorde: de basisregels staan hier vóór de media query, anders
   wint de basisregel van de query en staan beide kopvarianten tegelijk aan.
   ========================================================================== */

.kop{position:relative;height:64px;border-bottom:1px solid var(--lijn)}
.kop__in{display:none}

.merk{margin-right:0}
.merk__logo{height:34px;width:auto;max-width:150px;object-fit:contain}

.kop__mobiel{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding-inline:16px;
}
.kop__grid{display:none}
.kop__links{display:flex;justify-content:flex-start;align-items:center;height:64px;padding-inline:24px}
.kop__rechts{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding-inline:24px}

.kop__nav{display:flex;justify-content:center;gap:4px}
.kop__nav a{
  font-size:.875rem;font-weight:500;padding:8px 16px;border-radius:8px;
  color:rgba(255,255,255,.7);box-shadow:none;
}
.kop__nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.kop__nav a[aria-current="page"]{color:#fff;font-weight:500;box-shadow:none}

.kop .modeknop{width:36px;height:36px;border-radius:8px;border:0}
.kop .telknop{padding:8px 20px;font-size:.875rem;font-weight:600;border-radius:8px}
.kop .knop--rand{padding:8px 20px;font-size:.875rem;font-weight:600;border-radius:8px}
.telknop__n{top:-7px;right:-7px}

.menuknop{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.8);
}
.menuknop:hover{background:rgba(255,255,255,.1);color:#fff}
.menuknop svg{width:20px;height:20px}

.mobielmenu{
  position:absolute;left:0;right:0;top:64px;z-index:65;
  background:var(--inkt);border-bottom:1px solid rgba(255,255,255,.14);
  padding:12px 16px 18px;display:grid;gap:4px;
  box-shadow:var(--schaduw-2);
}
.mobielmenu nav{display:grid;gap:2px}
.mobielmenu a{
  font-size:.95rem;font-weight:500;padding:11px 12px;border-radius:8px;
  color:rgba(255,255,255,.8);
}
.mobielmenu a:hover{background:rgba(255,255,255,.1);color:#fff}
.mobielmenu .knop,.mobielmenu .telknop{margin-top:10px;width:100%;justify-content:center}

@media (min-width:768px){
  .kop__mobiel{display:none}
  .menuknop{display:none}
  .mobielmenu{display:none !important}
  .merk__logo{height:38px}
  .kop__grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;width:100%;height:64px;
  }
}

/* De melding dat het restaurant gesloten is, staat onder de kopbalk als eerste
   blok binnen main: een zacht vlak met een lijn eronder, geen felle balk. */
.melding{
  background:var(--geel-zacht);
  border-bottom:1px solid #EDDFC0;
  padding:12px 16px;text-align:center;
  font-size:.875rem;color:var(--accent-tekst);   /* 5,79:1 op --geel-zacht */
}
.melding.is-open{background:var(--ok-zacht);border-bottom-color:#BFE3C8;color:#186B31}
:root[data-theme="dark"] .melding{
  background:var(--geel-zacht);border-bottom-color:#43381E;
  color:var(--accent-tekst);                     /* 9,28:1 op --geel-zacht */
}
:root[data-theme="dark"] .melding.is-open{background:#16261B;border-bottom-color:#2A4A33;color:#7FD494}

/* ---------- Het logo op een donkere ondergrond ----------
   Het merk van Nasmat Halab is de badge NASMAT HALAB / EETHUIS / ARABIAN
   TASTE: wítte letters met een gouden kader op een bijna zwart vlak
   (#1D1D1B, gemeten met nasmat-review/meet-badge.js). Dat is precies het
   geval dat de opdracht in blok G beschrijft — alleen andersom dan bij de
   vorige zaak. Een wit plaatje eronder zou een witte doos om het merk zetten
   én de witte letters onleesbaar maken.

   Daarom twee dingen: het logobestand is doorzichtig gemaakt
   (nasmat-review/bouw-beeld.js zet de alfa op de luminantie van het
   bronbeeld), en waar het template een wit vlak zette staat nu --inkt. Op de
   kop- en voetbalk, die zelf al --inkt zijn, loopt het merk zo naadloos door;
   op het lichte paneel van de merksectie staat het op een donkere tegel.

   En de maat: het logobestand is 639x361, dus 1,77:1 — breder dan hoog. Op de
   38px van het template wordt dat 67px breed, ruim binnen de 150px van het
   vakje. De hoogte staat op 48px (85px breed) en op 54px vanaf 768px, zodat
   "NASMAT HALAB" leesbaar blijft; regel 8 staat die aanpassing uitdrukkelijk
   toe. Eerlijk erbij: de regels EETHUIS en ARABIAN TASTE zijn op die maat te
   klein om te lezen. Dat kan in een balk van 70px niet anders; de naam wordt
   gedragen door de paginatitel, de h1 en de winkelkop. Staat als
   aandachtspunt in het verslag. */
.merk__logo{height:48px;background:transparent;border-radius:8px;padding:3px 4px}
@media (min-width:768px){ .merk__logo{height:54px} }
@media (max-width:520px){ .merk__logo{height:42px} }
.voet__merk img{background:transparent;border-radius:8px;padding:6px}
.bannerlogo,.over__beeld--logo{background:var(--inkt)}

/* De hero-inhoud op de maten van de referentie, nagemeten bij 1265px:
   pil 12px/700 met 4px 12px lucht en radius 4, kop 60px/800 met regelhoogte 1
   en 16px eronder, lopende tekst 20px met regelhoogte 28 en 32px eronder in een
   baan van 672px, knop 18px/700 met 14px 32px lucht. De secties krijgen 64px
   lucht boven en onder, net als py-16 daar. */

.hero__in{padding-inline:20px}
.hero__pil{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;
  padding:4px 12px;border-radius:4px;margin-bottom:16px;
}
.hero h1{
  font-size:clamp(1.875rem,5vw,3.75rem);line-height:1;font-weight:800;
  max-width:896px;margin-bottom:16px;text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hero__tekst{
  font-size:clamp(.875rem,1.7vw,1.25rem);line-height:1.4;
  max-width:672px;margin-top:0;margin-bottom:32px;color:#E5E7EB;
}
.hero .knop{
  font-size:1.125rem;font-weight:700;padding:14px 32px;border-radius:8px;margin-top:0;
}

.sectie{padding-block:64px}

/* De kaart over de hero is bij de referentie smaller dan de rest van de pagina
   (max-w-5xl, dus 1024px met 16px zijruimte) en valt 32px over het beeld heen. */
.kaartblok .wrap{max-width:1024px;padding-inline:16px}
.overkaart{margin-top:-32px}
.overkaart{border-radius:16px}
.sectiekop{gap:12px;margin-bottom:24px}
.sectiekop__balk{width:4px;height:32px}
.sectiekop h2{font-size:1.5rem;font-weight:700}
.tekstblok h2{font-size:1.5rem;font-weight:700}

/* ==========================================================================
   Breedtes één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten bij 1905, 1265, 885 en 390 px:

   secties op de startpagina  max 1280px met 16px zijruimte (max-w-7xl px-4)
   de kaart over de hero      max 1024px met 16px zijruimte (max-w-5xl px-4)
   de VOETTEKST               géén maximum: over de volle breedte van het
                              venster, met 20px zijruimte en vanaf 1024px 80px

   Dat laatste is waarom de voettekst bij ons krap oogde: die zat in dezelfde
   baan als de rest van de pagina, terwijl hij bij de referentie helemaal
   doorloopt. Op een breed scherm scheelt dat honderden pixels.
   ========================================================================== */

:root{--breed:1280px}
.wrap{padding-inline:16px}

.voet__in{max-width:none;padding-inline:20px;padding-block:48px}
@media (min-width:1024px){ .voet__in{padding-inline:80px} }

/* ==========================================================================
   Tekst- en contactpagina's, opgezet als bij de referentie
   --------------------------------------------------------------------------
   Privacybeleid en voorwaarden: een baan van 768px met witte kaarten onder
   elkaar. Elke kaart heeft radius 16, een dunne rand en 24px lucht (32px vanaf
   640px). Kicker 12px/600 in kapitaal in de merkkleur, kop 36px/700, tekst
   14px in de rustige tekstkleur. De contactpagina heeft een eigen kopvlak op
   wit en daaronder een baan van 1024px op een grijs veld.
   ========================================================================== */

.tekstpagina .wrap{max-width:768px}
.blad{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;
  padding:24px;box-shadow:var(--schaduw);margin-bottom:16px;
}
@media (min-width:640px){ .blad{padding:32px} }
.blad:last-child{margin-bottom:0}
.blad__kicker{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--merk);margin-bottom:8px;
}
.blad h1{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:700;margin-bottom:12px}
.blad h2{font-size:1.125rem;font-weight:700;margin-bottom:16px;text-transform:none}
.blad h3{font-size:1.125rem;font-weight:700;margin-bottom:6px}
.blad__lead{font-size:.95rem;color:var(--tekst-2);line-height:1.7}
.blad__datum{margin-top:12px;font-size:.8rem;color:var(--tekst-2)}
.blad__body{font-size:.875rem;line-height:1.7;color:var(--tekst-2)}
.blad__body p + p{margin-top:12px}
.blad__body ul{margin:0;padding-left:20px;display:grid;gap:8px}
.blad__body b{color:var(--tekst);font-weight:600}
.blad__body a{color:var(--merk);font-weight:600}
.blad__body a:hover{text-decoration:underline}
.blad--kaart .kaartje{margin-top:16px}

/* ---------- contactpagina ---------- */

.contactpagina{background:var(--paneel-2)}
.contactkop{background:var(--paneel);border-bottom:1px solid var(--lijn);padding-block:48px}
@media (min-width:640px){ .contactkop{padding-block:64px} }
.contactkop .wrap{max-width:1024px}
.contactkop h1{font-size:clamp(1.75rem,3.6vw,2.25rem);font-weight:700;margin-bottom:12px}
.contactkop p{color:var(--tekst-2);max-width:62ch;line-height:1.7}

.contactlijf{max-width:1024px;padding-block:40px}
.contactkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}
.contactkaart--breed{grid-column:1 / -1}
@media (max-width:640px){ .contactkaarten{grid-template-columns:minmax(0,1fr)} }
.contactkaart{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;
  padding:20px;box-shadow:var(--schaduw);
}
.contactkaart__ico{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--merk-zacht);color:var(--merk);margin-bottom:12px;
}
.contactkaart__ico svg{width:18px;height:18px}
.contactkaart h3{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:6px;
}
.contactkaart p{font-size:.95rem;font-weight:600}
.contactkaart a{color:var(--merk)}
.contactkaart a:hover{text-decoration:underline}

.contactpartijen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:40px}
@media (max-width:640px){ .contactpartijen{grid-template-columns:minmax(0,1fr)} }
.contactpartijen .blad{margin-bottom:0}

.contactnoot{
  background:var(--lijn);border-radius:16px;padding:24px;margin-bottom:40px;
}
.contactnoot h2{font-size:1.125rem;font-weight:700;margin-bottom:12px;text-transform:none}
.contactnoot p{font-size:.875rem;line-height:1.7;color:var(--tekst-2)}
.contactlijf .blad{margin-bottom:40px}
.contactlijf .blad:last-child{margin-bottom:0}
/* het grijze blok was net te donker onder de rustige tekstkleur (4,34:1) */
.contactnoot{background:var(--paneel-2);border:1px solid var(--lijn)}
/* "Bestel bij ..." is bij de referentie text-lg/sm:text-xl en font-bold */
.overkaart__kop h2{font-size:1.125rem;font-weight:700}
@media (min-width:640px){ .overkaart__kop h2{font-size:1.25rem} }

/* ==========================================================================
   Prozablokken op de startpagina
   --------------------------------------------------------------------------
   Nagemeten bij 1265px: "Over ..." en "Populaire gerechten" staan bij de
   referentie in een container met 80px extra inspringing, zónder accentbalkje.
   De kop is daar 30px/700 en de tekst 18px, en kop en alinea's beginnen op
   precies dezelfde linkerrand. Het omgekeerde beeldblok heeft daar alleen een
   knop, geen kop en geen tekst.
   ========================================================================== */

.proza{padding-inline:80px}
@media (max-width:1023px){ .proza{padding-inline:20px} }
@media (max-width:639px){ .proza{padding-inline:0} }
.proza h2{
  font-size:1.875rem;font-weight:700;line-height:1.25;
  margin-bottom:16px;text-transform:none;
}
.proza p{font-size:1.125rem;line-height:1.7;color:var(--tekst-2);max-width:none}
.proza p + p{margin-top:16px}
.proza .knop{margin-top:24px}
.proza--knop{display:flex;align-items:center}
/* de regel onder "Onze locatie" loopt bij de referentie over de volle baan */
#contact .lead{max-width:none}
.blok__kop--klein h2{font-size:.75rem}

/* De tekstpagina's krijgen dezelfde opzet als de contactpagina: een grijs vel
   met bovenaan een witte band. Nagemeten bij 1265px: baan van 768px met 16px
   zijruimte, 48px lucht (64px vanaf 640px), kicker 12px/600 in kapitaal,
   accentbalkje van 4x32 voor de kop van 36px/700, inleiding 18px in een baan
   van 672px, datum 12px. */

.tekstpagina{background:var(--paneel-2)}
.tekstpagina .wrap{max-width:768px}
.tekstkop{background:var(--paneel);border-bottom:1px solid var(--lijn);padding-block:48px}
@media (min-width:640px){ .tekstkop{padding-block:64px} }
.tekstkop .blad__kicker{margin-bottom:8px}
.tekstkop .sectiekop{margin-bottom:12px}
.tekstkop h1{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:700}
.tekstkop__lead{font-size:1.125rem;line-height:1.6;color:var(--tekst-2);max-width:672px}
.tekstkop__datum{margin-top:12px;font-size:.75rem;color:var(--tekst-2)}
.tekstlijf{padding-block:40px}

/* de maten op de contactpagina, ook nagemeten */
.contactkaart--breed{grid-column:auto}
.contactpartijen .blad h3{font-size:1rem}
.contactpartijen .blad .blad__lead{font-size:.75rem;line-height:1.5}
.contactnoot h2{font-size:.875rem}
.blad--kaart .blad__lead{font-size:.875rem}
/* laatste maten van de contactpagina, nagemeten bij de referentie */
.contactkop p{font-size:1.125rem;max-width:672px}
.contactkaart h3{font-size:.75rem;font-weight:600}
.contactkaart p{font-size:.875rem;font-weight:500}

/* In donker kleurde het icoonvakje van "Afhalen" geel op geel, waardoor het
   tasje onzichtbaar werd: `:root[data-theme="dark"] .feit__ico` heeft een
   hogere soortelijkheid dan `.feit--accent .feit__ico` en won dus altijd. */
:root[data-theme="dark"] .feit--accent .feit__ico{color:var(--op-geel)}

/* De twee beeldblokken lijnen bij de referentie verticaal uit op het midden,
   en de knop in het logoblok staat tegen de rand van zijn kolom, zonder de
   inspringing die de prozablokken wel hebben. */
.tweekolom{align-items:center}
.proza--knop{padding-inline:0;display:block}

/* ==========================================================================
   Bezorgadres zoeken
   --------------------------------------------------------------------------
   Zoals bij de referentie: één veld voor straat en huisnummer met een
   pin-icoon, een suggestielijst eronder, daarna een veld voor de toevoeging,
   en na bevestigen een vaste regel met "Wijzig". Valt het adres buiten het
   bezorggebied, dan verschijnt de melding met de knop "Wissel naar afhalen".
   ========================================================================== */

.adresform{display:grid;gap:12px}
.adresvak{display:grid;gap:6px}
.adresvak label{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:0;
}
.adresveld{position:relative}
.adresveld > svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tekst-2);pointer-events:none;
}
.adresvak input{
  width:100%;height:40px;padding:0 14px 0 36px;
  border-radius:12px;border:2px solid var(--lijn);background:var(--paneel-2);
  transition:border-color .15s linear,background .15s linear;
}
.adresvak input:focus{outline:none;border-color:var(--merk);background:var(--paneel)}
.adresvak > input{padding-left:14px}

.adreslijst{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  list-style:none;margin:0;padding:6px;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:12px;
  box-shadow:var(--schaduw-2);max-height:260px;overflow-y:auto;
}
.adreslijst button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:8px;font-size:.875rem;
}
.adreslijst button:hover,.adreslijst button:focus-visible{background:var(--merk-zacht)}
.adreslijst svg{width:15px;height:15px;flex:none;color:var(--merk)}

.adres__meld{font-size:.82rem;display:grid;gap:4px}
.adres__meld:empty{display:none}
.adres__meld strong{font-weight:600}
.adres__meld.is-mis{color:var(--merk)}
.adres__meld.is-mis span{color:var(--tekst-2)}
.adres__wissel{
  justify-self:start;margin-top:4px;
  font-size:.82rem;font-weight:600;color:var(--merk);text-decoration:underline;
}

.adresklaar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:12px;
  background:var(--paneel-2);border:1px solid var(--lijn);
}
.adresklaar__tekst{min-width:0}
.adresklaar__kop{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst-2);
}
.adresklaar__regel{display:block;font-size:.875rem;font-weight:600;margin-top:2px}
.adresklaar__wijzig{flex:none;font-size:.82rem;font-weight:600;color:var(--merk)}
.adresklaar__wijzig:hover{text-decoration:underline}

/* het venster "Waar mogen we bezorgen?" */
.venster--klein .venster__doos{max-width:460px}
.venster--klein .venster__scroll{max-height:none}
.avenster{padding:24px}
.avenster h2{font-size:1rem;font-weight:700;text-transform:none}
.avenster__lead{font-size:.875rem;color:var(--tekst-2);margin-top:4px;margin-bottom:16px;line-height:1.6}
.avenster .adresform{margin-bottom:4px}
.ofstreep{position:relative;display:flex;align-items:center;justify-content:center;margin:16px 0 12px}
.ofstreep::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--lijn)}
.ofstreep span{
  position:relative;background:var(--paneel);padding-inline:16px;
  font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2);
}

/* "Open tot 22:00" stond in het kale template op 4,21:1 tegen wit — net onder
   de eis voor 12px. Het groen van --ok staat daarom een tint dieper
   (#1A7D36): 5,21:1 als tekst op wit en 5,21:1 met wit erop. Dat is hierboven
   al in de tokens verwerkt, dus hier hoeft niets meer overschreven te worden. */