/* Beplekt en bespoten: pleisterwit als ondergrond, tomatensaus voor acties,
   één spuitbusgele vlek als blikvanger. Geen externe fonts (privacy, snelheid). */

:root {
  --pleister: #ECEEE9;
  --pleister-donker: #DDE1D8;
  --wit: #FFFFFF;
  --gehakt: #3A1F14;
  --gehakt-zacht: #6E554A;
  --saus: #C8281B;
  --saus-donker: #9E1D12;
  --basilicum: #2F7D4F;
  --spuitbus: #FFC531;
  --lijn: #C5CABF;

  --display: "Avenir Next Condensed", "Roboto Condensed", "sans-serif-condensed",
             "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pleister);
  color: var(--gehakt);
  font-family: var(--tekst);
  font-size: 1rem;
  line-height: 1.5;
}

:focus-visible {
  outline: 3px solid var(--gehakt);
  outline-offset: 2px;
}

a { color: var(--saus-donker); }

.pagina {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}
body.breed .pagina { max-width: 72rem; }

.demo-balk {
  margin: 0;
  padding: .55rem 1.25rem;
  background: var(--gehakt);
  color: var(--pleister);
  font-size: .875rem;
  text-align: center;
}

.melding {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  background: var(--wit);
  border-left: 4px solid var(--saus);
}
.melding p { margin: 0; }

.zacht {
  display: block;
  color: var(--gehakt-zacht);
  font-size: .925rem;
}

/* --- Kop met spuitbusvlek ------------------------------------------------ */

.kop { margin-bottom: 2rem; }

.titel {
  margin: .25rem 0 .5rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(3.1rem, 16vw, 5.75rem);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--saus);
  hyphens: manual;
}

.spray {
  padding: 0 .12em;
  background:
    radial-gradient(ellipse 48% 42% at 24% 62%, rgba(255, 197, 49, .95) 0 58%, rgba(255, 197, 49, 0) 74%),
    radial-gradient(ellipse 52% 46% at 70% 44%, rgba(255, 197, 49, .9) 0 54%, rgba(255, 197, 49, 0) 72%),
    radial-gradient(circle at 93% 82%, rgba(255, 197, 49, .85) 0 3%, rgba(255, 197, 49, 0) 4%),
    radial-gradient(circle at 4% 18%, rgba(255, 197, 49, .8) 0 2%, rgba(255, 197, 49, 0) 3%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.organisatie {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}

.intro {
  margin: 0 0 1.25rem;
  max-width: 30rem;
  color: var(--gehakt-zacht);
}

.paginatitel {
  margin: .5rem 0 .25rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.05;
}

.stap {
  margin: 0 0 .75rem;
  font-family: var(--tekst);
  font-size: .95rem;
  font-weight: 600;
  color: var(--gehakt-zacht);
}

.terug {
  display: inline-block;
  margin-bottom: .75rem;
  color: var(--gehakt);
  font-weight: 600;
}
.terug::before { content: "‹ "; }

/* --- Menu ------------------------------------------------------------------ */

.gerechten {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--gehakt);
}

.gerecht {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lijn);
}

.gerecht-info { flex: 1 1 auto; min-width: 0; }

.gerecht h3 {
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
}
.gerecht-info p { margin: .1rem 0 0; color: var(--gehakt-zacht); }
.gerecht-info .prijs {
  margin-top: .3rem;
  color: var(--gehakt);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.teller {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}

.teller input {
  width: 2.9rem;
  padding: .45rem 0;
  border: 2px solid var(--gehakt);
  border-radius: .5rem;
  background: var(--wit);
  color: var(--gehakt);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.teller input::-webkit-outer-spin-button,
.teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gerecht.gekozen .teller input { background: var(--spuitbus); }

.teller button {
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--gehakt);
  border-radius: 50%;
  background: transparent;
  color: var(--gehakt);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.teller button.plus {
  border-color: var(--saus);
  background: var(--saus);
  color: var(--wit);
}
.teller button:disabled { opacity: .3; cursor: default; }

/* --- Vaste balk onderaan met totaal --------------------------------------- */

.balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--gehakt);
  background: var(--pleister);
}

.balk-plakt { position: sticky; bottom: 0; }

.balk-totaal {
  margin: 0;
  font-size: .875rem;
  color: var(--gehakt-zacht);
  line-height: 1.2;
}
.balk-totaal strong {
  display: block;
  white-space: nowrap;
  font-family: var(--display);
  font-stretch: condensed;
  font-size: 1.85rem;
  color: var(--gehakt);
  font-variant-numeric: tabular-nums;
}

.knop {
  display: inline-block;
  padding: .9rem 1.2rem;
  border: 0;
  border-radius: .6rem;
  background: var(--saus);
  color: var(--wit);
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knop:hover { background: var(--saus-donker); }
.knop:disabled { background: var(--lijn); color: var(--gehakt-zacht); cursor: not-allowed; }
.knop-klein { padding: .55rem .9rem; font-size: .95rem; }

.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.tekstlink { color: var(--gehakt); font-weight: 600; }

/* --- Overzicht en formulier ---------------------------------------------- */

.overzicht { margin: 1.25rem 0 1.75rem; }
.overzicht table { width: 100%; border-collapse: collapse; }
.overzicht td {
  padding: .5rem 0;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.overzicht td.aantal { width: 2.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.overzicht td.num, .tabel .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.overzicht tfoot td { border-bottom: 0; padding-top: .75rem; font-weight: 700; }

.veld { margin-bottom: 1.15rem; }
.veld label { display: block; margin-bottom: .3rem; font-weight: 600; }
.veld label .zacht { display: inline; font-weight: 400; }
.veld input,
.veld textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid var(--lijn);
  border-radius: .5rem;
  background: var(--wit);
  color: var(--gehakt);
  font: inherit;
  font-size: 1rem;
}
.veld input:focus,
.veld textarea:focus { border-color: var(--gehakt); }
.veld.fout input,
.veld.fout textarea { border-color: var(--saus); }

.hint { margin: .3rem 0 0; color: var(--gehakt-zacht); font-size: .925rem; }
.hint.onder-balk { margin-top: .5rem; }
.foutmelding { margin: .3rem 0 0; color: var(--saus-donker); font-weight: 600; font-size: .95rem; }

/* --- Bevestiging ------------------------------------------------------------ */

.bestelnummer {
  margin: .25rem 0 1rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(3rem, 18vw, 5rem);
  line-height: 1;
  color: var(--saus);
  font-variant-numeric: tabular-nums;
}

/* --- Beheer ------------------------------------------------------------------ */

.samenvatting { margin: 0 0 2rem; font-size: 1.05rem; }

.sectietitel {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.5rem;
}

.totalen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
}
.totalen li { padding-top: .5rem; border-top: 4px solid var(--gehakt); }
.totaal-getal {
  display: block;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.totaal-naam { display: block; margin-top: .25rem; font-weight: 600; line-height: 1.3; }

.lijstkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.lijstacties { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 1rem; }

.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; min-width: 52rem; border-collapse: collapse; background: var(--wit); }
.tabel th,
.tabel td { padding: .6rem .75rem; border-bottom: 1px solid var(--pleister-donker); text-align: left; vertical-align: top; }
.tabel th { background: var(--gehakt); color: var(--pleister); font-weight: 600; font-size: .925rem; }
.tabel .lijn { display: block; }
.nowrap { white-space: nowrap; }

.status {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 1rem;
  font-size: .85rem;
  font-weight: 600;
  background: var(--pleister-donker);
  color: var(--gehakt-zacht);
}
.status-betaald { background: var(--basilicum); color: var(--wit); }
.status-mislukt { background: var(--saus); color: var(--wit); }

.leeg { padding: 1.5rem; background: var(--wit); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Afhalen, leden en lijsten
   =========================================================================== */

[hidden] { display: none !important; }

/* --- Ledenbalk ------------------------------------------------------------ */

.ledenbalk {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem 1rem;
  background: var(--pleister-donker);
  border-bottom: 1px solid var(--lijn);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ledenbalk ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ledenbalk a {
  display: block;
  padding: .45rem .6rem;
  color: var(--gehakt);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  text-decoration: none;
  border-radius: .4rem;
}
.ledenbalk a:hover { background: var(--pleister); }
.ledenbalk form { margin: 0 0 0 auto; }
.ledenbalk-uit {
  padding: .45rem .6rem;
  border: 0;
  background: none;
  color: var(--gehakt-zacht);
  font: inherit;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Afhaalinfo op het menu en de bevestiging ----------------------------- */

.afhaalinfo {
  margin: 1.25rem 0 0;
  padding: .85rem 1rem;
  background: var(--wit);
  border-left: 4px solid var(--gehakt);
}
.afhaalinfo div { display: flex; gap: .75rem; }
.afhaalinfo div + div { margin-top: .25rem; }
.afhaalinfo dt { min-width: 4.5rem; font-weight: 700; }
.afhaalinfo dd { margin: 0; }
.afhaalinfo p { margin: 0; }
.afhaalinfo p + p { margin-top: .4rem; }
.afhaalinfo-levering { border-left-color: var(--basilicum); }

/* --- Formulieronderdelen ------------------------------------------------- */

.formulier.smal { max-width: 24rem; }

.veldrij { display: grid; grid-template-columns: 7rem 1fr; gap: 0 .75rem; }

.groep {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}
.groep legend {
  margin-bottom: .6rem;
  padding: 0;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.35rem;
}

.keuze {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 0;
  font-weight: 500;
  cursor: pointer;
}
.keuze input { width: 1.25rem; height: 1.25rem; accent-color: var(--saus); }

.veld select,
.uitnodigen select {
  padding: .6rem .7rem;
  border: 2px solid var(--lijn);
  border-radius: .5rem;
  background: var(--wit);
  color: var(--gehakt);
  font: inherit;
}

.gerechten-compact .gerecht { padding: .6rem 0; }
.gerecht-naam { display: block; font-weight: 600; }

input[readonly] {
  width: 100%;
  margin-top: .5rem;
  padding: .6rem .7rem;
  border: 2px dashed var(--lijn);
  border-radius: .5rem;
  background: var(--wit);
  color: var(--gehakt);
  font: inherit;
  font-size: .95rem;
}

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

.acties {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  margin: 1.25rem 0;
}
.acties form { margin: 0; }
.acties form .knop { width: 100%; }

.knop-groot { width: 100%; padding: 1.15rem 1rem; font-size: 1.35rem; }
.knop-ok { background: var(--basilicum); }
.knop-ok:hover { background: #24653F; }
.knop-tweede {
  background: transparent;
  color: var(--gehakt);
  box-shadow: inset 0 0 0 2px var(--gehakt);
}
.knop-tweede:hover { background: var(--pleister-donker); }

.tekstknop {
  padding: .4rem 0;
  border: 0;
  background: none;
  color: var(--saus-donker);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Status -------------------------------------------------------------------- */

.statusbanner {
  margin: .75rem 0;
  padding: .8rem 1rem;
  border-radius: .5rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
}
.status-ok { background: var(--basilicum); color: var(--wit); }
.status-al { background: var(--spuitbus); color: var(--gehakt); }
.status-niet { background: var(--saus); color: var(--wit); }

.status-te_betalen { background: var(--spuitbus); color: var(--gehakt); }

.label-levering {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .45rem;
  border-radius: 1rem;
  background: var(--spuitbus);
  color: var(--gehakt);
  font-size: .8rem;
  font-weight: 700;
  vertical-align: middle;
}

/* --- Bestelling bekijken ---------------------------------------------------- */

.afhaalkaart {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--wit);
  border-top: 4px solid var(--gehakt);
}
.afhaalkaart .bestelnummer { margin: .25rem 0 .75rem; }
.afhaalkaart .afhaalinfo { margin-top: 1rem; padding: 0; border: 0; }

.qr { margin: .5rem 0 1rem; }
.qr svg { display: block; width: min(68vw, 15rem); height: auto; }

.qr-uitklap { margin: 1.5rem 0; }
.qr-uitklap summary { font-weight: 600; cursor: pointer; }
.qr-uitklap .qr { padding: .75rem; background: var(--wit); display: inline-block; }

.details { margin: 1.25rem 0; }
.details div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--lijn); }
.details dt { font-weight: 600; }
.details dd { margin: 0; overflow-wrap: anywhere; }

/* --- Scanner ------------------------------------------------------------------ */

.scanner-pagina .pagina { padding-top: 1rem; }

.camera {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
  margin: 0 auto;
  overflow: hidden;
  border-radius: .75rem;
  background: var(--gehakt);
}
.camera video { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera-kader {
  position: absolute;
  inset: 17%;
  border: 3px solid var(--spuitbus);
  border-radius: .75rem;
  box-shadow: 0 0 0 100vmax rgba(58, 31, 20, .35);
}
.camera-melding {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .6rem .9rem;
  background: rgba(58, 31, 20, .82);
  color: var(--pleister);
  font-size: .95rem;
  line-height: 1.35;
}

.toast {
  margin: .75rem 0 0;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: var(--basilicum);
  color: var(--wit);
  font-weight: 600;
}
.toast .tekstknop { color: var(--wit); padding: 0; }

.zoek { margin-top: 1.25rem; }
.zoek label { display: block; margin-bottom: .35rem; font-weight: 600; }
.zoek input {
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid var(--lijn);
  border-radius: .5rem;
  background: var(--wit);
  color: var(--gehakt);
  font: inherit;
  font-size: 1rem;
}

.zoekresultaten { margin: .5rem 0 0; padding: 0; list-style: none; }
.zoekresultaten button {
  display: block;
  width: 100%;
  padding: .7rem .2rem;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  background: none;
  color: var(--gehakt);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.leeg-resultaat { padding: .7rem 0; color: var(--gehakt-zacht); }

/* Kaart die van onderen opschuift na een scan */
.kaart {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  background: rgba(58, 31, 20, .55);
}
.kaart-binnen {
  width: 100%;
  max-width: 34rem;
  max-height: 92vh;
  margin: 0 auto;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  border-radius: .9rem .9rem 0 0;
  background: var(--pleister);
}
@media (prefers-reduced-motion: no-preference) {
  .kaart:not([hidden]) .kaart-binnen { animation: opschuiven .18s ease-out; }
  @keyframes opschuiven { from { transform: translateY(2.5rem); opacity: .4; } to { transform: none; opacity: 1; } }
}
.kaart-laden { padding: 2rem 0; text-align: center; font-weight: 600; }
.kaart-naam {
  margin: .75rem 0 0;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.05;
}
.kaart-lijnen { margin: .75rem 0; padding: 0; list-style: none; border-top: 2px solid var(--gehakt); }
.kaart-lijnen li {
  display: flex;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 1.2rem;
}
.kaart-aantal { min-width: 2.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kaart-opmerking { margin: .5rem 0; }
.kaart-waarschuwing { margin: 0 0 .5rem; color: var(--saus-donker); font-weight: 700; }

/* --- Beheer en lijsten ----------------------------------------------------- */

.leverlink { margin: 0 0 2.5rem; max-width: 40rem; }
.leverlink p { margin: 0; }

.melding-ok { border-left-color: var(--basilicum); }

.uitnodigen { margin: 1.5rem 0 2rem; }
.uitnodigen label { display: block; margin-bottom: .35rem; font-weight: 600; }
.uitnodigen-rij { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.ledenlijst { margin: 0 0 2rem; padding: 0; list-style: none; border-top: 2px solid var(--gehakt); }
.ledenlijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--lijn);
}
.ledenlijst form { margin: 0; }
.ledenlijst .geblokkeerd { opacity: .55; }

.leverkaart {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  background: var(--wit);
  border-left: 4px solid var(--saus);
}
.leverkaart.klaar { border-left-color: var(--basilicum); opacity: .7; }
.leverkaart h2 { margin: 0; font-family: var(--display); font-stretch: condensed; font-size: 1.5rem; }
.leverkaart h2 .zacht { display: inline; font-family: var(--tekst); font-size: .9rem; font-weight: 400; }
.leverkaart p { margin: .35rem 0; }
.leveradres { font-size: 1.15rem; font-weight: 600; }
.leverlijnen { margin: .5rem 0; padding-left: 1.1rem; }
.leverkaart .acties { margin: .75rem 0 0; }
.statusregel { color: var(--basilicum); font-weight: 700; }

.tabel .vinkje { width: 2.25rem; text-align: center; font-size: 1.25rem; }
.tabel a { color: var(--gehakt); font-weight: 600; }


/* ===========================================================================
   Instellingen, bestelperiode, voorraad en teksten
   =========================================================================== */

.voet {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lijn);
  color: var(--gehakt-zacht);
  font-size: .9rem;
}
body.breed .voet { max-width: 72rem; }
.voet p { margin: 0 0 .5rem; }
.voet a { color: var(--gehakt-zacht); }
.voet p:last-child { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.melding-let-op { border-left-color: var(--spuitbus); }

.bestelstatus {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--wit);
  border-top: 4px solid var(--saus);
}
.bestelstatus p { margin: 0; }
.bestelstatus-regel { margin: -1rem 0 2rem; }

.deadline { margin: -.25rem 0 .75rem; font-weight: 600; }

.voorraad { margin: .2rem 0 0; color: var(--saus-donker); font-size: .9rem; font-weight: 600; }
.gerecht.uitverkocht .gerecht-info { opacity: .55; }
.uitverkocht-label {
  margin: 0;
  padding: .3rem .7rem;
  border: 2px solid var(--gehakt-zacht);
  border-radius: .4rem;
  color: var(--gehakt-zacht);
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.totaal-max { font-size: 1.25rem; font-weight: 700; color: var(--gehakt-zacht); }

.gerechten-voorproef .prijs { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Instellingen */
.veld input.kort { max-width: 9rem; }
.veldrij-gelijk { grid-template-columns: 1fr 1fr; }
.veldrij-drie { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 30rem) {
  .veldrij-gelijk { grid-template-columns: 1fr; }
}

.gerechtkaart {
  margin: 0 0 1rem;
  padding: .9rem 1rem .5rem;
  background: var(--wit);
  border-left: 4px solid var(--gehakt);
}
.gerechtkaart.verborgen { border-left-color: var(--lijn); opacity: .7; }
.gerechtkaart-nieuw { border-left-style: dashed; border-left-color: var(--saus); }
.gerechtkaart-titel { margin: 0 0 .5rem; font-weight: 700; }
.gerechtkaart .veld { margin-bottom: .75rem; }
.gerechtkaart-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding-bottom: .25rem;
}
.gerechtkaart-voet .zacht { display: inline; }

.instellingen .balk-totaal { font-size: .9rem; }

.gevaarzone {
  margin: 3rem 0 0;
  padding: 1.25rem;
  border: 2px solid var(--saus);
  border-radius: .5rem;
}
.gevaarzone p { margin: 0 0 1rem; }
.wisformulier label { display: block; margin-bottom: .35rem; font-weight: 600; }
.wisformulier input {
  padding: .55rem .7rem;
  border: 2px solid var(--lijn);
  border-radius: .5rem;
  background: var(--wit);
  color: var(--gehakt);
  font: inherit;
}
.knop-gevaar { background: var(--saus-donker); }

/* Teksten zoals voorwaarden en privacy */
.tekstpagina h2 {
  margin: 1.75rem 0 .35rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.35rem;
}
.tekstpagina p { margin: 0 0 .75rem; max-width: 36rem; }
.invullen {
  padding: 0 .25rem;
  background: var(--spuitbus);
  color: var(--gehakt);
  font-weight: 600;
}

@media print {
  .demo-balk, .ledenbalk, .niet-printen, .voet { display: none !important; }
  body { background: #fff; color: #000; }
  .pagina, body.breed .pagina { max-width: none; padding: 0; }
  .tabel-wrap { overflow: visible; }
  .tabel { min-width: 0; font-size: 10pt; }
  .tabel th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .tabel td { border-bottom: 1px solid #999; }
  .tabel tr { break-inside: avoid; }
  .leverkaart { break-inside: avoid; border: 1px solid #999; }
}