/* ============================================================
   Eetcafé Happy Alphen | app-demo
   Stijl: warm ivoor met diep paars (#230537) en terracotta (#C05530),
   de huisstijl van happy-alphen.nl.
   ============================================================ */

:root {
  --cream: #FBF6F1;
  --cream-2: #F3E9DE;
  --paper: #FFFFFF;
  --ink: #241730;
  --ink-soft: #6E6478;
  --green: #230537;
  --green-deep: #14021F;
  --green-soft: #4A1D57;
  --brass: #C05530;
  --brass-soft: #E0916F;
  --line: rgba(36, 23, 48, 0.08);
  --line-strong: rgba(36, 23, 48, 0.14);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-soft: 0 24px 48px -24px rgba(36, 23, 48, 0.18);
  --radius: 1.7rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow-x: clip;
  overscroll-behavior: none;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
svg { display: block; }

/* ---------- Stage: mobiel = volledig scherm, desktop = telefoon in frame ---------- */

.stage { min-height: 100dvh; }

.pitch { display: none; }

.device { min-height: 100dvh; }

.phone {
  position: relative;
  min-height: 100dvh;
  background: var(--cream);
  overflow: hidden;
}

.app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

/* Mobiel: de body volledig vastzetten zodat ALLEEN het binnenste scherm scrollt.
   Zonder deze lock scrollt bij de eerste swipe eerst de hele pagina een stukje mee
   (met het in-/uitschuiven van de Safari-adresbalk en een rubber-band), en dat voelt
   schokkerig aan bij het landen op de app. Nu is er nog maar een scroller: .screen. */
@media (max-width: 1099px) {
  html { height: 100%; overflow: hidden; }
  body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .stage, .device, .phone { min-height: 0; height: 100%; }
  .app { height: 100%; }
}

@media (min-width: 1100px) {
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 3rem;
    min-height: 100vh;
  }
  .pitch { display: block; }
  .pitch-inner { max-width: 480px; margin-left: auto; padding-right: 1rem; }
  .pitch-title {
    font-size: clamp(2.4rem, 3.2vw, 3.2rem);
    margin: 1.1rem 0 1.2rem;
  }
  .pitch-title em { font-style: italic; color: var(--green); }
  .pitch-lead { color: var(--ink-soft); line-height: 1.65; font-size: 1.02rem; }
  .pitch-points { margin-top: 2.2rem; display: grid; gap: 1.05rem; }
  .pitch-point {
    display: flex; align-items: center; gap: 1rem;
  }
  .pitch-point strong { display: block; font-weight: 600; font-size: 0.95rem; }
  .pitch-point span:last-child { display: block; color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.1rem; }
  /* Het keukenscherm is de kern van de demonstratie: hier ziet de zaak zelf
     wat er gebeurt als een gast op bestellen tikt. */
  .pitch-keuken {
    margin-top: 2.4rem; padding: 1.5rem 1.5rem 1.4rem;
    border-radius: 1.4rem;
    background: linear-gradient(160deg, var(--green-deep) 0%, var(--green) 70%, #4A1B2E 100%);
    color: var(--cream);
    box-shadow: var(--shadow-soft);
  }
  .pitch-keuken .eyebrow { color: var(--brass-soft); }
  .pitch-keuken p {
    margin: 0.7rem 0 1.2rem; font-size: 0.9rem; line-height: 1.6;
    color: rgba(251, 246, 241, 0.84);
  }
  .pitch-keuken em { font-style: normal; color: var(--cream); font-weight: 600; }
  .pitch-keuken-knop {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.6rem 0.6rem 1.25rem;
    border-radius: 999px; background: var(--brass); color: var(--cream);
    font-size: 0.92rem; font-weight: 600;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .pitch-keuken-knop:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(192, 85, 48, 0.9); }
  .pitch-keuken-knop .btn-orb {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.18);
  }
  .pitch-keuken-knop .btn-orb svg { width: 15px; height: 15px; }

  .pitch-note {
    margin-top: 1.8rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6;
    border-top: 1px solid var(--line); padding-top: 1.4rem;
  }
  .pitch-sign { margin-top: 0.9rem; font-size: 0.78rem; color: var(--brass); letter-spacing: 0.02em; }

  .device { display: flex; justify-content: center; min-height: auto; }
  .phone {
    width: 400px;
    min-height: auto;
    height: 820px;
    max-height: calc(100vh - 6rem);
    border-radius: 3.4rem;
    border: 1px solid rgba(39,34,26,0.12);
    box-shadow:
      0 0 0 11px #221F19,
      0 0 0 12.5px rgba(255,255,255,0.14),
      0 60px 120px -40px rgba(39, 34, 26, 0.5);
  }
  .app { height: 100%; }
}

.pp-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green);
}
.pp-ico svg { width: 21px; height: 21px; }

/* ---------- Korrel ---------- */

.grain {
  position: absolute; inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* De grain-textuur bij elke scroll-frame over bewegende content blenden kost GPU en
   maakt het scrollen op de telefoon schokkerig. Op mobiel (waar hij toch vrijwel
   onzichtbaar is) laten we hem weg; op desktop, in het telefoonframe, blijft hij. */
@media (max-width: 1099px) {
  .grain { display: none; }
}

/* ---------- Splash ---------- */

.splash {
  position: absolute; inset: 0;
  z-index: 80;
  background: linear-gradient(168deg, var(--green-deep), var(--green) 55%, #4A1B2E);
  color: var(--cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.1rem;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.splash.is-done { opacity: 0; visibility: hidden; }
.splash-seal { width: 108px; height: 108px; color: var(--brass-soft); animation: sealIn 1.1s var(--ease) both; }
.splash-seal svg { width: 100%; height: 100%; }
.splash-name {
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  line-height: 1.15;
  animation: riseIn 0.9s var(--ease) 0.15s both;
}
.splash-sub {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.24em;
  color: rgba(250, 247, 240, 0.66);
  animation: riseIn 0.9s var(--ease) 0.3s both;
}
@keyframes sealIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Schermen ---------- */

.screens { position: absolute; inset: 0; z-index: 1; }

.screen {
  position: absolute; inset: 0;
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  will-change: transform;
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) 1.15rem calc(env(safe-area-inset-bottom, 0px) + 7.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.screen::-webkit-scrollbar { display: none; }

#screen-tafel { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 11rem); }

/* ---------- Topbar ---------- */

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.topbar h2 { font-size: 1.85rem; margin-top: 0.3rem; }

/* Topbar op het tafel-scherm: eyebrow en status-chip op 1 lijn */
.topbar-home { align-items: center; margin-bottom: 0.9rem; gap: 0.45rem; flex-wrap: nowrap; }
.topbar-home .eyebrow {
  min-width: 0; flex: 0 1 auto;
  font-size: 0.5rem; letter-spacing: 0.08em;
  padding: 0.32rem 0.6rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-home .status-chip { margin-top: 0; flex: 0 0 auto; font-size: 0.64rem; padding: 0.42rem 0.68rem; white-space: nowrap; }
.topbar-home .status-chip b { white-space: nowrap; }

.eyebrow {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass);
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(177, 149, 70, 0.35);
  border-radius: 999px;
  background: rgba(177, 149, 70, 0.08);
}
.eyebrow-light {
  color: var(--brass);
  border-color: rgba(177, 149, 70, 0.4);
  background: rgba(177, 149, 70, 0.1);
}

.status-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  margin-top: 0.2rem;
}
.status-chip i {
  width: 7px; height: 7px; border-radius: 999px;
  background: #4C8A5F;
  box-shadow: 0 0 0 3px rgba(76, 138, 95, 0.18);
  animation: pulse 2.4s var(--ease) infinite;
}
.status-chip.is-closed i { background: #B0654A; box-shadow: 0 0 0 3px rgba(176, 101, 74, 0.16); animation: none; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* ---------- Kaarten: double-bezel ---------- */

.card-shell {
  padding: 0.4rem;
  border-radius: var(--radius);
  background: rgba(39, 34, 26, 0.045);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}
.card-core {
  border-radius: calc(var(--radius) - 0.4rem);
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), var(--shadow-soft);
  padding: 1.35rem 1.25rem;
}

/* ---------- Hero: de eigen zaak in beeld ----------
   Het eerste wat een gast ziet hoort de zaak te zijn, niet de techniek.
   De QR-code zit daarom achter de knop op de tafelbalk. */

.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0.85rem;
  box-shadow: var(--shadow-soft);
  background: var(--green-deep);
}
.hero img {
  display: block; width: 100%; height: 15.5rem;
  object-fit: cover; object-position: center 42%;
}
.hero-op {
  position: absolute; inset: auto 0 0 0;
  padding: 5.5rem 1.25rem 1.25rem;
  /* Stevige verloop: de tapkranen op de foto zijn licht en aten anders de tekst op. */
  background: linear-gradient(to top,
    rgba(12, 2, 20, 0.96) 0%,
    rgba(12, 2, 20, 0.88) 30%,
    rgba(12, 2, 20, 0.6) 62%,
    transparent 100%);
  color: var(--cream);
}
.hero-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-soft);
}
.hero-titel {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 1.85rem; margin: 0.3rem 0 0.45rem;
}
.hero-regel {
  font-size: 0.86rem; line-height: 1.5;
  color: rgba(251, 246, 241, 0.82); max-width: 34ch;
}

.tafelbalk {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.6rem 0.6rem 1.05rem;
  margin-bottom: 1.15rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -18px rgba(36, 23, 48, 0.35);
}
.tb-num { font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.tb-num b { color: var(--brass); }
.tb-tekst {
  flex: 1; min-width: 0;
  font-size: 0.76rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-knop {
  flex: none; width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--green); color: var(--cream);
  transition: transform 0.22s var(--ease);
}
.tb-knop:active { transform: scale(0.93); }
.tb-knop svg { width: 17px; height: 17px; }

/* Sfeerbeeld tussen de blokken: alleen echte foto's van de zaak zelf. */
.sfeer {
  position: relative;
  margin: 0 0 1.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--green-deep);
}
.sfeer img { display: block; width: 100%; height: 11rem; object-fit: cover; }
.sfeer figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.1rem 0.9rem;
  background: linear-gradient(to top, rgba(12, 2, 20, 0.9) 5%, transparent 100%);
  color: var(--cream);
  font-size: 0.82rem; letter-spacing: 0.01em;
}

.qr-paneel { display: flex; justify-content: center; margin: 1rem 0 0.2rem; }
.table-qr {
  width: 158px; height: 158px;
  border-radius: 1.2rem;
  background: var(--green-deep);
  padding: 12px;
}
.table-qr svg { width: 100%; height: 100%; color: var(--cream); }
.qr-hint-dark {
  font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft);
  margin: 0.9rem 0 1.1rem;
}

/* ---------- Live status van de bestelling ----------
   Wat de bediening op het keukenscherm aantikt, ziet de gast hier terug. */

.keuken-status {
  margin: 0 0 1.2rem;
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.ks-stappen { display: flex; align-items: center; gap: 0.4rem; }
.ks-stap {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; color: var(--ink-soft); text-align: center;
}
.ks-stap i {
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.45s var(--ease);
}
.ks-stap.is-op i { background: var(--brass); }
.ks-stap.is-op span { color: var(--ink); font-weight: 500; }
.ks-stap.is-nu i { animation: ksPuls 1.6s ease-in-out infinite; }
@keyframes ksPuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.ks-tekst { margin-top: 0.85rem; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ks-stap.is-nu i { animation: none; }
}

/* ---------- Wat de zaak ziet ----------
   Het keukenscherm in het klein, binnen de app, want op een telefoon kun je
   geen twee vensters naast elkaar zetten. Donker, zodat meteen duidelijk is
   dat dit een ander scherm is dan de app van de gast. */

.keukenblik {
  margin: 0 0 1.2rem;
  padding: 1.15rem 1.15rem 1.1rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green) 68%, #4A1B2E 100%);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}
.kb-eyebrow {
  display: block;
  font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-soft);
}
.kb-kop h4 { font-size: 1.12rem; margin-top: 0.35rem; }

.kb-bon {
  margin-top: 0.95rem;
  padding: 0.9rem 0.95rem 0.85rem;
  border-radius: 1.05rem;
  background: rgba(251, 246, 241, 0.07);
  border: 1px solid rgba(251, 246, 241, 0.14);
}
.kb-bonkop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.kb-bonkop h5 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.15rem; }
.kb-bonkop h5 span { color: #E9B44C; }
.kb-tijd { font-size: 0.75rem; color: rgba(251, 246, 241, 0.6); font-variant-numeric: tabular-nums; }

.kb-merk {
  display: inline-block; margin-top: 0.45rem;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.25rem 0.55rem; border-radius: 999px;
}
.kb-merk.nieuw { background: #E9B44C; color: var(--green-deep); }
.kb-merk.bezig { background: var(--brass); color: var(--cream); }
.kb-merk.klaar { background: rgba(251, 246, 241, 0.18); color: var(--cream); }

.kb-regels { margin-top: 0.75rem; border-top: 1px solid rgba(251, 246, 241, 0.12); }
.kb-regel {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid rgba(251, 246, 241, 0.12);
  font-size: 0.88rem;
}
.kb-aantal {
  flex: none; min-width: 1.75rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.45rem; background: rgba(251, 246, 241, 0.12);
  font-size: 0.78rem; font-weight: 600;
}
.kb-naam { flex: 1; line-height: 1.35; }
.kb-prijs { font-size: 0.8rem; color: rgba(251, 246, 241, 0.65); font-variant-numeric: tabular-nums; }

/* Een opmerking van de gast moet in de keuken meteen opvallen. */
.kb-opmerking {
  margin-top: 0.6rem; padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  border-left: 3px solid #E9B44C;
  background: rgba(233, 180, 76, 0.14);
  color: #F6DCA6;
  font-size: 0.8rem; line-height: 1.45;
}

.kb-voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem;
}
.kb-totaal { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kb-knoppen { display: flex; gap: 0.4rem; }
.kb-knop {
  padding: 0.45rem 0.8rem; border-radius: 999px;
  background: rgba(251, 246, 241, 0.12);
  border: 1px solid rgba(251, 246, 241, 0.16);
  font-size: 0.78rem; font-weight: 500; color: var(--cream);
  transition: transform 0.22s var(--ease), background 0.22s var(--ease);
}
.kb-knop:active { transform: scale(0.95); }
.kb-knop.is-op { background: #E9B44C; color: var(--green-deep); border-color: transparent; }
.kb-knop[disabled] { opacity: 0.6; }

.kb-uitleg {
  margin-top: 0.9rem;
  font-size: 0.82rem; line-height: 1.55; color: rgba(251, 246, 241, 0.75);
}
.kb-uitleg em { font-style: normal; color: var(--cream); font-weight: 600; }

.kb-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 0.95rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  border-radius: 999px; background: var(--brass); color: var(--cream);
  font-size: 0.85rem; font-weight: 600;
}
.kb-link .btn-orb {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2);
}
.kb-link .btn-orb svg { width: 14px; height: 14px; }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.7rem 0.6rem 1.25rem;
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 600;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease);
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-orb {
  width: 34px; height: 34px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn-orb { transform: translate(2px, -1px) scale(1.05); }
.btn-orb svg { width: 16px; height: 16px; }

.btn-light { background: var(--cream); color: var(--green-deep); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
.btn-light .btn-orb { background: rgba(43, 34, 22, 0.1); color: var(--green-deep); }

.btn-primary { background: var(--green); color: var(--cream); box-shadow: 0 18px 34px -16px rgba(24, 19, 12, 0.55); }
.btn-primary .btn-orb { background: rgba(250, 247, 240, 0.14); color: var(--brass-soft); }

.btn-ghost {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding-left: 0.7rem;
}
.btn-ghost .btn-orb { background: rgba(39, 34, 26, 0.06); color: var(--green); }

.btn-wide { width: 100%; justify-content: space-between; margin-bottom: 0.7rem; }
.btn-wide.btn-ghost { justify-content: flex-start; }

/* ---------- Sectiekoppen ---------- */

.sect-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin: 1.5rem 0.15rem 0.9rem;
}
.sect-head.tight { margin: 0 0 0.4rem; }
.sect-head h4 { font-size: 1.2rem; margin-top: 0.45rem; }

/* ---------- Contact ---------- */

.contact-core h4 { font-size: 1.15rem; margin: 0.5rem 0 0.4rem; }
.contact-adres { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 1rem; }
.contact-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.demo-note {
  margin-top: 1.1rem;
  font-size: 0.7rem; color: var(--ink-soft); opacity: 0.75;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.demo-note.center { text-align: center; border: 0; }

/* ---------- Menukaart ---------- */

.chips {
  position: sticky; top: -0.5rem;
  z-index: 10;
  display: flex; gap: 0.45rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 -1.15rem 1.2rem;
  padding: 0.6rem 1.15rem;
  background: linear-gradient(var(--cream) 78%, rgba(250, 247, 240, 0));
  /* Rechts uitvagen zodat te zien is dat de rij doorloopt en niet is afgekapt. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.4rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.4rem), transparent 100%);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.chip:active { transform: scale(0.95); }
.chip.is-on { background: var(--green); border-color: var(--green); color: var(--cream); }

.menu-sect { margin-bottom: 1.6rem; }
.menu-sect-head { display: flex; align-items: center; gap: 0.8rem; margin: 0 0.15rem 0.8rem; }
.menu-sect-ico {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-sect-ico svg { width: 20px; height: 20px; }
.menu-sect-head h3 { font-size: 1.3rem; }
.menu-sect-head p { font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.15rem; }

.menu-items {
  border-radius: var(--radius);
  background: rgba(39, 34, 26, 0.045);
  border: 1px solid var(--line);
  padding: 0.4rem;
}
.menu-items-core {
  border-radius: calc(var(--radius) - 0.4rem);
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), var(--shadow-soft);
  overflow: hidden;
}
.menu-item {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem;
  padding: 0.95rem 1.15rem;
  border-top: 1px solid var(--line);
  text-align: left;
  transition: background 0.35s var(--ease);
}
.menu-item:first-child { border-top: 0; }
.menu-item:active { background: rgba(39, 34, 26, 0.03); }
.mi-name { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.mi-tip {
  font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--brass);
  border: 1px solid rgba(177, 149, 70, 0.4);
  border-radius: 999px;
  padding: 0.14rem 0.45rem;
}
.mi-info { font-size: 0.76rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.2rem; }
.mi-price { font-size: 0.88rem; font-weight: 600; white-space: nowrap; color: var(--green); }
.mi-price small { font-size: 0.66rem; color: var(--ink-soft); font-weight: 500; }

/* ---------- Reserveren ---------- */

.res-pane { display: none; }
.res-pane.is-active { display: block; animation: paneIn 0.55s var(--ease) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.res-core { padding: 1.25rem 1.15rem; }
.field-label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.65rem; }
.field-label small { font-weight: 500; color: var(--ink-soft); }
.field-hint { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.5; margin-top: 0.8rem; }

.bezorg-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0.7rem; }

.form-core { display: grid; gap: 1.05rem; }
.field { display: block; }
.field input, .field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.85rem 1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink);
  outline: none;
  resize: none;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Safari op iOS geeft een datum- of tijdveld een eigen intrinsieke breedte en
   negeert width:100% zodra die smaller uitvalt. Het veld stak daardoor rechts
   buiten de kaart. Native styling uitzetten haalt die ondergrens weg. */
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
}
/* Zonder dit centreert iOS de waarde in het veld terwijl de andere velden
   links uitlijnen. */
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
}
.field input:focus, .field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(43, 34, 22, 0.12);
}
/* Afhalen of aan tafel: twee even zware knoppen, zodat geen van beide
   als de standaardkeuze leest. Bij een cafetaria is afhalen vaak het grootst. */
.wijze-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0.9rem 0 0.2rem;
}
.wijze-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.6rem;
  border-radius: 1.1rem;
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wijze-btn b { font-size: 0.95rem; font-weight: 600; }
.wijze-btn small { font-size: 0.72rem; opacity: 0.62; }
.wijze-ico { display: block; width: 22px; height: 22px; opacity: 0.72; }
.wijze-ico svg { width: 100%; height: 100%; }
.wijze-btn.is-on {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 34, 22, 0.1);
}
.wijze-btn.is-on .wijze-ico { opacity: 1; }

.afhaal-blok { margin-top: 0.9rem; }
.afhaalstrip { margin-top: 0.4rem; }
/* De tijdchips zijn hier breder dan de vierkante tafelchips, want er staat
   een tijd of een hele zin in. */
.afhaalstrip .time-chip {
  width: auto;
  min-width: 62px;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 1rem;
  font-size: 0.85rem;
}
.afhaalstrip .asap-chip { min-width: 128px; }

.field-err { display: none; font-style: normal; font-size: 0.72rem; color: #A34A2E; margin-top: 0.35rem; }
.field.has-err input { border-color: #A34A2E; }
.field.has-err .field-err { display: block; }

.res-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.res-duo .btn { justify-content: center; }

.res-done { text-align: center; padding: 1.4rem 0 1.2rem; }
.done-seal { display: inline-block; width: 74px; height: 74px; color: var(--green); }
.done-seal svg { width: 100%; height: 100%; }
.seal-ring { stroke-dasharray: 185; stroke-dashoffset: 185; animation: draw 1s var(--ease) 0.1s forwards; }
.seal-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.7s var(--ease) 0.75s forwards; stroke: var(--brass); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.res-done h3 { font-size: 1.55rem; margin: 0.9rem 0 0.4rem; }
.res-done p { font-size: 0.86rem; color: var(--ink-soft); }

.sum-core { display: grid; gap: 0; padding: 0.6rem 1.25rem; }
.sum-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.sum-row:first-child { border-top: 0; }
.sum-row span { color: var(--ink-soft); }
.sum-row b { font-weight: 600; text-align: right; }
.sum-row-total { border-top: 1px solid var(--line-strong) !important; margin-top: 0.15rem; padding-top: 0.85rem; }
.sum-row-total b { color: var(--green); font-family: 'Fraunces', serif; font-size: 1.05rem; }

.screen-intro { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; margin: -0.4rem 0.15rem 1.3rem; }

/* ---------- Happy Pas ---------- */

.pass-card {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(216, 190, 124, 0.22), transparent 55%),
    linear-gradient(160deg, var(--green-deep), var(--green) 65%, #4A1B2E);
  border: 1px solid rgba(216, 190, 124, 0.25);
  box-shadow: 0 30px 60px -28px rgba(24, 19, 12, 0.65);
  color: var(--cream);
  padding: 1.4rem 1.3rem 1.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.pass-top { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 1.3rem; }
.pass-crest { width: 54px; height: 54px; color: var(--brass-soft); flex: 0 0 auto; }
.pass-label { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(250, 247, 240, 0.6); }
.pass-name { display: block; font-family: 'Fraunces', serif; font-size: 1.45rem; margin-top: 0.2rem; }
.pass-qr {
  width: 168px; height: 168px;
  margin: 0 auto;
  border-radius: 1.2rem;
  background: var(--cream);
  padding: 12px;
}
.pass-qr svg { width: 100%; height: 100%; color: var(--green-deep); }
.pass-hint {
  display: block; text-align: center;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(250, 247, 240, 0.55);
  margin-top: 0.9rem;
}

.stamp-core h4 { font-size: 1.15rem; margin-top: 0.5rem; }
.stamps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0.2rem;
}
.stamp {
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1.5px dashed rgba(39, 34, 26, 0.22);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: border-color 0.4s var(--ease);
}
.stamp svg { width: 46%; height: 46%; }
.stamp.is-full {
  border: 1.5px solid var(--green);
  background: var(--green);
  color: var(--brass-soft);
  animation: stampPop 0.55s var(--ease) both;
}
@keyframes stampPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.stamp-core .res-duo { margin-top: 1.1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

.perks-core h4 { font-size: 1.15rem; margin: 0.5rem 0 1rem; }
.perk {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}
.perk strong { display: block; font-size: 0.9rem; font-weight: 600; }
.perk span:last-child { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }

/* ---------- Tabbar ---------- */

.tabbar {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  /* Vrijwel dekkend: bij 0.85 schemerde de menutekst door de balk heen. */
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 48px -18px rgba(39, 34, 26, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
}
.tabbar-2 { gap: 0.3rem; padding: 0.45rem 0.7rem; }
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  min-width: 84px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}
.tab:active { transform: scale(0.92); }
.tab small { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.tab > span {
  width: 44px; height: 30px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.tab span svg { width: 21px; height: 21px; }
.tab.is-on { color: var(--green); }
.tab.is-on > span { background: var(--green); color: var(--brass-soft); }

/* ---------- Sheet ---------- */

.sheet-veil {
  position: absolute; inset: 0;
  z-index: 55;
  background: rgba(24, 19, 12, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.sheet {
  position: absolute;
  left: 0.55rem; right: 0.55rem;
  bottom: 0.55rem;
  z-index: 56;
  border-radius: 1.9rem;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 -20px 60px -20px rgba(39, 34, 26, 0.4);
  padding: 0.85rem 1.35rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.6s var(--ease);
  max-height: 78%;
  overflow-y: auto;
}
.sheet::-webkit-scrollbar { display: none; }
.app.sheet-open .sheet-veil { opacity: 1; visibility: visible; }
.app.sheet-open .sheet { transform: translateY(0); }
.sheet-grip {
  display: block;
  width: 42px; height: 4px;
  border-radius: 999px;
  background: rgba(39, 34, 26, 0.16);
  margin: 0 auto 1.1rem;
}
.sheet-eyebrow { margin-bottom: 0.7rem; }
.sheet h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.sheet .sh-price { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--green); margin: 0.6rem 0 0.2rem; }
.sheet .sh-price small { font-size: 0.75rem; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink-soft); }
.sheet p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }
.sheet .btn { margin-top: 1.2rem; }
.sheet-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- Toast ---------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6.2rem);
  transform: translate(-50%, 16px);
  z-index: 60;
  background: var(--green-deep);
  color: var(--cream);
  font-size: 0.8rem; font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(216, 190, 124, 0.3);
  box-shadow: 0 18px 40px -14px rgba(24, 19, 12, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Klein formaat ---------- */

@media (max-width: 380px) {
  .topbar h2 { font-size: 1.6rem; }
  .hero img { height: 13.5rem; }
  .hero-titel { font-size: 1.6rem; }
  .tab { min-width: 68px; }
}

/* ---------- Installatiekaart ---------- */

.install-core h4 { font-size: 1.15rem; margin: 0.5rem 0 0.4rem; }
.install-core p { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 1rem; }
.install-steps { margin: 0.4rem 0 0; display: grid; gap: 0; }
.install-step { display: flex; gap: 0.85rem; align-items: baseline; padding: 0.65rem 0; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-soft); }
.install-step:first-child { border-top: 0; }
.install-step b { font-family: 'Fraunces', serif; color: var(--green); font-size: 1.05rem; }

/* ---------- Bestellen aan tafel ---------- */

.bestel-pane { display: none; }
.bestel-pane.is-active { display: block; animation: paneIn 0.55s var(--ease) both; }

.tafelstrip {
  display: flex; gap: 0.45rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  margin: 0 -1.15rem;
  padding: 0.15rem 1.15rem 0.35rem;
}
.tafelstrip::-webkit-scrollbar { display: none; }
.tafel-chip {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 1rem;
  border: 1px solid var(--line-strong);
  background: var(--cream);
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.05rem;
  color: var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.tafel-chip:active { transform: scale(0.9); }
.tafel-chip.is-on { background: var(--green); border-color: var(--green); color: var(--cream); }
.time-chip { width: auto; min-width: 46px; height: 44px; padding: 0 0.95rem; font-size: 0.92rem; white-space: nowrap; }

.order-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.85rem 1.05rem 0.85rem 1.15rem;
}
.order-item.is-in-cart { background: rgba(177, 149, 70, 0.08); }
.oi-txt { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.oi-right { flex: 0 0 auto; display: flex; align-items: center; gap: 0.7rem; }
.oi-price { font-size: 0.85rem; font-weight: 600; color: var(--green); white-space: nowrap; }
.oi-price small { font-size: 0.62rem; color: var(--ink-soft); font-weight: 500; }
.oi-add {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--green); color: var(--cream);
  font-size: 1.3rem; font-weight: 400; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(24, 19, 12, 0.5);
  transition: transform 0.3s var(--ease);
}
.oi-add:active { transform: scale(0.86); }
.oi-step {
  display: inline-flex; align-items: center; gap: 0.1rem;
  background: var(--green); color: var(--cream);
  border-radius: 999px; padding: 0.15rem;
}
.oi-step b { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.9rem; }
.oi-btn {
  width: 30px; height: 30px;
  border-radius: 999px;
  color: var(--cream);
  font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease);
}
.oi-btn:active { background: rgba(255, 255, 255, 0.14); }

/* Bestelbalk */
.order-bar {
  position: absolute;
  left: 0.9rem; right: 0.9rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5.4rem);
  z-index: 52;
  display: none;
  align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: 999px;
  background: var(--green); color: var(--cream);
  box-shadow: 0 18px 40px -14px rgba(24, 19, 12, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  text-align: left;
}
.order-bar.is-show { display: flex; animation: barIn 0.5s var(--ease) both; }
@keyframes barIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.order-bar:active { transform: scale(0.98); }
.order-bar-count {
  flex: 0 0 auto;
  min-width: 30px; height: 30px;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--brass-soft); color: var(--green-deep);
  font-weight: 700; font-size: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.order-bar-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.order-bar-mid b { font-size: 0.9rem; font-weight: 600; }
.order-bar-mid small { font-size: 0.68rem; color: rgba(250, 240, 220, 0.72); }
.order-bar-total { flex: 0 0 auto; font-family: 'Fraunces', serif; font-size: 1.08rem; padding-right: 0.3rem; }

/* Winkelmand in de sheet */
.cart-list { margin-top: 0.2rem; }
.cart-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.cart-row:first-child { border-top: 0; }
.cart-name { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; font-weight: 600; }
.cart-price { flex: 0 0 auto; min-width: 52px; text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--green); }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.6rem; padding-top: 0.8rem;
  border-top: 1px solid var(--line-strong);
}
.cart-total span { font-size: 0.9rem; font-weight: 600; }
.cart-total b { font-family: 'Fraunces', serif; font-size: 1.25rem; color: var(--green); }

.commissie-note {
  margin: 0.2rem 0 1rem;
  font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft);
  background: rgba(177, 149, 70, 0.08);
  border: 1px solid rgba(177, 149, 70, 0.28);
  border-radius: 1.1rem;
  padding: 0.85rem 1rem;
}
.commissie-note b { color: var(--green); }