/* stijl.css — de monteur-app (stap 145). Het gevoel van /bon: de donkere kop, amber als
   hoofdknop, het lichtgrijze werkvlak. De namen en waarden zijn die van :root in
   Kantoor/static/kantoor.css zoals hij sinds stap 85 is (kleur = betekenis: --wacht, --gevaar,
   --link #2b2a26; op deze tak en op origin/main), alleen wat de app gebruikt: geen tweede palet.
   Verandert Kantoor een waarde, dan hier ook. Kleur volgt later (Indeling vóór uiterlijk). De app staat los van Kantoor (hij moet zonder bereik starten),
   dus het lettertype is dat van de telefoon.
   Voor één hand in een fabriekshal: elke knop minstens 44 px hoog, invoer 16 px (geen zoom op
   de iPhone), niets dat alleen bij aanwijzen werkt, en de veilige randen van het scherm. */
:root {
  --zij: #191919; --zij-tekst: #f1f0ec; --zij-lijn: #3a3a3a; --zij-actief: rgba(255, 255, 255, 0.07);
  --accent: #f8b60c; --op-accent: #191919;
  --link: #2b2a26;
  --grond: #f6f5f2; --vlak: #ffffff; --vlak-zacht: #faf9f6;
  --tekst: #191919; --stil: #64615a; --lijn: #e5e3dc; --dof: #eeece6;
  --wacht: #7a5000; --wacht-grond: #fdf1cf; --wacht-lijn: #ecd08a;
  --klaar: #2f6b3a; --klaar-grond: #e6f0e7;
  --rust: #5c5952; --rust-grond: #eeece6;
  --gevaar: #9b2c1f; --gevaar-grond: #fbeae7; --gevaar-lijn: #e2b4ad;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r-half: 4px; --r1: 8px; --r2: 16px; --r3: 24px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --uit: cubic-bezier(0.23, 1, 0.32, 1);
  /* de veilige randen (inkeping, afgeronde hoeken, de streep onderaan) */
  --boven: env(safe-area-inset-top, 0px);
  --onder: env(safe-area-inset-bottom, 0px);
  --links: max(var(--r2), env(safe-area-inset-left, 0px));
  --rechts: max(var(--r2), env(safe-area-inset-right, 0px));
  --kop: 56px;
  --knop: 48px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--grond); color: var(--tekst);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 40rem; margin: 0 auto; min-height: 100dvh; }
[hidden] { display: none !important; }
a { color: var(--link); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; font-size: 16px; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
button:disabled { cursor: default; }
.stil { color: var(--stil); }

/* ── De kop en de strook: samen bovenaan vast ──────────────────────────────── */
.boven { position: sticky; top: 0; z-index: 3; }
.kop {
  display: flex; align-items: center; gap: var(--r-half);
  min-height: calc(var(--kop) + var(--boven));
  padding: var(--boven) max(var(--r1), env(safe-area-inset-right, 0px)) 0 max(var(--r1), env(safe-area-inset-left, 0px));
  background: var(--zij); color: var(--zij-tekst);
}
.kop h1 { flex: 1; min-width: 0; margin: 0; font-size: 1.1rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop h1:first-child { padding-left: var(--r1); }
.kopknop {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: inherit; font-size: 1.5rem; line-height: 1; text-decoration: none;
  user-select: none; -webkit-user-select: none;
}
.kopknop:active { background: var(--zij-actief); }
.menu { display: flex; flex-direction: column; padding: 0 var(--r1) var(--r1);
  background: var(--zij); border-top: 1px solid var(--zij-lijn); }
.menu button { min-height: var(--knop); padding: 0 var(--r1); border: 0; border-radius: 8px;
  background: none; color: var(--zij-tekst); text-align: left; }
.menu button:active { background: var(--zij-actief); }

.strook { padding: var(--r1) var(--rechts) var(--r1) var(--links); background: var(--wacht-grond);
  color: var(--wacht); border-bottom: 1px solid var(--wacht-lijn); font-weight: 600; font-size: 0.9375rem; }
.strook p { margin: 0; }
.strook p.gevaar { color: var(--gevaar); }
.strook a { display: flex; align-items: center; min-height: 44px; color: var(--gevaar); }

/* ── De inhoud, en de vaste knop onderaan boven de streep van de telefoon ─── */
main { padding: var(--r2) var(--rechts) calc(var(--r3) + var(--onder)) var(--links); }
main.met-knop { padding-bottom: calc(var(--knop) + 2 * var(--r2) + var(--onder)); }
.onderaan {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; max-width: 40rem; margin: 0 auto;
  padding: var(--r1) var(--rechts) calc(var(--r1) + var(--onder)) var(--links);
  background: var(--grond); border-top: 1px solid var(--lijn);
}
.melding { margin: var(--r2) var(--rechts) 0 var(--links); padding: var(--r1) var(--r2);
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; }
.fout { margin: var(--r1) 0; padding: var(--r1) var(--r2); color: var(--gevaar); background: var(--gevaar-grond);
  border: 1px solid var(--gevaar-lijn); border-radius: 8px; }

/* ── Knoppen ──────────────────────────────────────────────────────────────── */
.knop {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--knop);
  margin: var(--r1) 0; padding: var(--r1) var(--r2); border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); color: var(--link); font-weight: 600; text-align: center; text-decoration: none;
  user-select: none; -webkit-user-select: none; transition: transform 120ms var(--uit);
}
.onderaan .knop { margin: 0; }
.knop.hoofd { background: var(--accent); border-color: var(--accent); color: var(--op-accent); font-weight: 700; }
.knop:active:not(:disabled) { transform: scale(0.97); }
.knop:disabled { color: var(--stil); background: var(--dof); border-color: var(--lijn); }

/* ── Een bon of klant als blok ───────────────────────────────────────────── */
.label { margin: var(--r3) 0 var(--r1); font-size: 13px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--stil); }
.blok {
  display: block; width: 100%; min-height: 44px; margin: var(--r1) 0; padding: var(--r2);
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak);
  color: inherit; text-align: left; text-decoration: none;
}
a.blok:active, button.blok:active:not(:disabled) { background: var(--vlak-zacht); }
button.blok:disabled { opacity: .6; }
.blokkop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r1); }
.blokkop strong { min-width: 0; overflow-wrap: anywhere; }
.blok .regel { display: block; color: var(--stil); }
.blok .opdracht { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge { flex: none; padding: 0 var(--r1); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.badge.wacht { color: var(--wacht); background: var(--wacht-grond); }
.badge.gevaar { color: var(--gevaar); background: var(--gevaar-grond); }
.advies { display: block; margin: var(--r1) 0 0; padding: var(--r-half) var(--r1); border-radius: 6px;
  background: var(--wacht-grond); color: var(--wacht); font-size: 14px; }

/* ── Invullen ─────────────────────────────────────────────────────────────── */
.vorm { display: flex; flex-direction: column; gap: var(--r1); }
.vorm label { display: flex; flex-direction: column; gap: var(--r-half); font-size: 0.875rem; font-weight: 600; color: var(--stil); }
input:not([type=checkbox]):not([type=radio]) {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: var(--knop);
  padding: var(--r1) var(--r2); border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); color: var(--tekst); font-weight: 400;
}
textarea {
  display: block; width: 100%; min-width: 0; min-height: var(--knop); padding: var(--r1) var(--r2);
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); color: var(--tekst); resize: vertical;
}
textarea:disabled, input:not([type=checkbox]):not([type=radio]):disabled { background: var(--dof); color: var(--stil); }
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.zoekveld { margin: 0 0 var(--r2); }
.zoekveld input[type=search] { border: 2px solid var(--tekst); border-radius: 12px; padding: var(--r2); }
.zoekveld input::-webkit-search-decoration { -webkit-appearance: none; }
details.uitklap { margin: var(--r3) 0 0; }
details.uitklap > summary { display: flex; align-items: center; gap: var(--r1); min-height: 44px;
  list-style: none; cursor: pointer; font-weight: 600; }
details.uitklap > summary::-webkit-details-marker { display: none; }
details.uitklap > summary::before { content: ""; flex: none; width: 8px; height: 8px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg);
  transition: transform 150ms var(--uit); }
details.uitklap[open] > summary::before { transform: rotate(45deg); }

/* ── De bon ───────────────────────────────────────────────────────────────── */
.mono { font-family: var(--mono); font-size: 0.875rem; }
.let { margin: var(--r1) 0; color: var(--wacht); font-weight: 600; }
.bonkop { display: flex; flex-direction: column; gap: var(--r-half); }
.bonkop .klant { font-size: 1.25rem; overflow-wrap: anywhere; }
.bonkop .opdracht { margin: var(--r1) 0 0; padding: var(--r1) var(--r2); background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px; white-space: pre-line; }
.bonkop .opdracht .label { display: block; margin: 0 0 var(--r-half); }
.blok.kort .blokkop { align-items: center; }
.blok.kort .blokkop .stil { text-align: right; overflow-wrap: anywhere; }
.machinerij { display: flex; align-items: center; gap: var(--r2); }
.machinerij .midden { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.machinerij strong { overflow-wrap: anywhere; }
.een-regel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bol { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gevaar); }
.bol.klaar { background: var(--klaar); }
.bol.wacht { background: var(--wacht-grond); border: 2px solid var(--wacht); }
.bol.geweigerd { background: var(--gevaar); box-shadow: 0 0 0 3px var(--gevaar-grond); }
.staat { flex: none; font-size: 0.875rem; font-weight: 600; color: var(--gevaar); }
.staat.klaar { color: var(--klaar); }
.staat.wacht { color: var(--wacht); }
.staat.wacht::before { content: "◷ "; }
.fout.geweigerd p { margin: 0 0 var(--r1); }
.fout.geweigerd .stil { color: var(--gevaar); }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--r1); }
.knoppen .knop { flex: 1 1 8rem; width: auto; margin: 0; }
.paneel { margin: var(--r1) 0; padding: var(--r2); background: var(--vlak-zacht); border: 1px solid var(--lijn); border-radius: 8px; }
.paneelkop { display: flex; align-items: center; justify-content: space-between; gap: var(--r1); }
.paneelkop .label { margin: 0; }
.klein { min-height: 44px; min-width: 44px; padding: 0 var(--r2); border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); color: var(--link); font-weight: 600; }
.klein:active { background: var(--dof); }
.melding .knop { margin-bottom: 0; }
.melding p { margin: 0; }

/* ── De machine: tabbladen en velden ─────────────────────────────────────── */
.tabs { display: flex; gap: var(--r-half); margin: 0 0 var(--r2); padding: var(--r-half); background: var(--dof); border-radius: 10px; }
.tab { flex: 1; min-height: 44px; padding: 0 var(--r1); border: 0; border-radius: 8px; background: none;
  color: var(--stil); font-weight: 600; white-space: nowrap; }
.tab[aria-selected=true] { background: var(--vlak); color: var(--tekst); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.stip { margin-left: var(--r-half); color: var(--accent); font-size: 1.25rem; line-height: 0; vertical-align: middle; }
.veld { margin: 0 0 var(--r3); border-radius: 10px; }
.veld.gemarkeerd { padding: var(--r1); margin-left: calc(-1 * var(--r1)); margin-right: calc(-1 * var(--r1));
  outline: 2px solid var(--gevaar); background: var(--gevaar-grond); }
.veld .label:first-child { margin-top: 0; }
.invul { display: flex; flex-direction: column; gap: var(--r-half); margin: var(--r1) 0; }
.invul .label { margin: 0; }
.keuzes, .snel { display: flex; flex-wrap: wrap; gap: var(--r1); margin: var(--r1) 0; }
.keuze { min-height: 44px; padding: var(--r1) var(--r2); border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); color: var(--tekst); text-align: left; user-select: none; -webkit-user-select: none; }
.keuze[aria-pressed=true] { background: var(--zij); border-color: var(--zij); color: var(--zij-tekst); font-weight: 600; }
.keuze:active:not(:disabled) { background: var(--dof); }
.keuze[aria-pressed=true]:active { background: var(--zij); }
.snel .keuze { border-style: dashed; }

/* ── Onderdelen ───────────────────────────────────────────────────────────── */
.onderdeel { display: flex; align-items: center; gap: var(--r1); }
.blok.onderdeel { padding: var(--r1) var(--r1) var(--r1) var(--r2); }
.onderdeel .midden { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.onderdeel .midden strong { overflow-wrap: anywhere; }
.onderdeel .regel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-half) var(--r1); }
.plus { flex: none; min-width: 44px; text-align: center; font-weight: 700; color: var(--link); }
.stapper { flex: none; display: flex; align-items: center; gap: var(--r-half); }
.stapper .aantal { min-width: 3.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.rond { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lijn); border-radius: 50%;
  background: var(--vlak); color: var(--tekst); font-size: 1.375rem; line-height: 1; user-select: none; -webkit-user-select: none; }
.rond:active:not(:disabled) { background: var(--dof); }
.rond:disabled { color: var(--stil); }
.treffer { padding: var(--r1) var(--r1) var(--r1) var(--r2); }
.naast { display: flex; gap: var(--r1); }
.naast > label { flex: 1; min-width: 0; }
.regel-los { margin: var(--r1) 0; }

/* ── Uren, foto's en bijlagen ────────────────────────────────────────────── */
.blok.uur, .blok.bijlage { display: flex; align-items: center; gap: var(--r1); }
.blok.uur .midden, .blok.bijlage .midden { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blok.uur .klein, .blok.bijlage .klein { flex: none; }
.badges { display: flex; flex-wrap: wrap; gap: var(--r-half); }
.badges:empty { display: none; }
.naam { overflow-wrap: anywhere; }
.adres { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
input[type=date], input[type=time] { min-width: 0; }
.verborgen { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.bestandsknop { position: relative; cursor: pointer; }
.bestandsknop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.knoppen .bestandsknop { margin: 0; flex: 1 1 8rem; width: auto; }
.fotos { display: flex; flex-direction: column; gap: var(--r1); margin: var(--r1) 0; }
.foto { display: flex; align-items: flex-start; gap: var(--r2); padding: var(--r1); border: 1px solid var(--lijn);
  border-radius: 8px; background: var(--vlak); }
.foto .plaat { flex: none; display: flex; align-items: center; justify-content: center; width: 88px; min-height: 88px;
  padding: 0; border: 0; border-radius: 6px; background: var(--dof); overflow: hidden; }
.foto .plaat img { display: block; width: 100%; height: 88px; object-fit: cover; }
.foto .plaat .stil { padding: var(--r-half); font-size: 13px; text-align: center; }
.foto .fototekst { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-half);
  overflow-wrap: anywhere; }
.foto .fototekst .klein { margin-top: var(--r-half); }
.foto.groot { flex-direction: column; }
.foto.groot .plaat { width: 100%; min-height: 0; }
.foto.groot .plaat img { height: auto; max-height: 70dvh; object-fit: contain; }
.foto.groot .fototekst { width: 100%; }
.badge.rust { color: var(--rust); background: var(--rust-grond); }
.voorbeeld { display: block; width: 100%; max-height: 40dvh; object-fit: contain; border-radius: 8px; background: var(--dof); }
.vorm .vinkje, .vinkje { display: flex; flex-direction: row; align-items: center; gap: var(--r1); min-height: 44px;
  font-size: 1rem; font-weight: 400; color: var(--tekst); }
.vinkje input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--zij); }
.klein-label { margin: var(--r1) 0 0; }

.acties { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--r-half); }
.klein.hoofd { background: var(--accent); border-color: var(--accent); color: var(--op-accent); font-weight: 700; }
.bestandsknop.bezig { color: var(--stil); background: var(--dof); }
.foto .fototekst .knoppen { gap: var(--r-half); }
.foto .fototekst .knoppen .klein { flex: none; margin-top: 0; }
.foto .fototekst .invul, .foto .fototekst .vinkje { align-self: stretch; }

/* ── Afronden en het klantscherm ─────────────────────────────────────────── */
.sprong { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; font: inherit; }
.sprong .aanvullen { color: var(--link); font-weight: 600; }
/* Het klantscherm gaat naar de klant: groter, rustiger, geen strook en geen menu. */
.klantscherm { font-size: 18px; line-height: 1.5; }
.klantkop { display: flex; align-items: center; gap: var(--r2); min-height: var(--kop);
  padding: var(--boven) var(--rechts) 0 max(var(--r-half), env(safe-area-inset-left, 0px));
  background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.klantkop .kopknop { color: var(--stil); }
.klantkop .merk { font-size: 1.25rem; letter-spacing: .08em; }
.klantkop .bonnr { margin-left: auto; text-align: right; font-size: 15px; line-height: 1.3; }
.klantscherm .klantnaam { margin: 0 0 var(--r2); font-size: 1.5rem; line-height: 1.25; overflow-wrap: anywhere; }
.klantscherm .klantnaam small { display: block; font-size: 1rem; font-weight: 400; color: var(--stil); }
.klantscherm .blok { display: flex; flex-direction: column; gap: var(--r-half); overflow-wrap: anywhere; }
.klantscherm .gedaan { white-space: pre-line; }
.klantscherm .blok .regel { color: var(--tekst); }
.akkoord { margin-top: var(--r3); padding-top: var(--r2); border-top: 1px solid var(--lijn); }
.akkoord label { font-size: 1rem; color: var(--tekst); }
.akkoord .keuzes { margin-top: 0; }
.akkoord ul.fout { margin: var(--r1) 0; padding-left: calc(var(--r2) + 1rem); }
/* Vingerbewegingen zijn hier tekenen, geen scrollen; wit, zodat de handtekening zwart op wit staat. */
.tekenvlak { display: block; width: 100%; height: 12rem; background: #ffffff; border: 2px solid var(--tekst);
  border-radius: 10px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.akkoord .klein { margin-top: var(--r1); }
.knop.groot { min-height: 56px; font-size: 1.1rem; }
.knop.stil-knop { border-color: transparent; background: none; color: var(--stil); font-weight: 400; text-decoration: underline; }
/* Een melding binnen de inhoud staat in de kolom, niet ingesprongen zoals die onder de kop. */
main .melding { margin: var(--r1) 0; }
.akkoord .klein-label, .akkoord label { margin: var(--r1) 0 0; font-size: 1rem; font-weight: 600; color: var(--tekst); }

/* ── Stap 147: de documenten op het machinescherm ─────────────────────────── */
.documenten { margin: var(--r1) 0; }
.documentenlijst { margin-top: var(--r1); }
.blok.document .midden { display: flex; flex-direction: column; text-align: left; }
.blok.document strong { overflow-wrap: anywhere; }

/* ── Stap 148: de balk onderin, en wat erboven staat ───────────────────────── */
:root { --balk: 56px; }
main.met-balk { padding-bottom: calc(var(--balk) + var(--r3) + var(--onder)); }
main.met-knop.met-balk { padding-bottom: calc(var(--balk) + var(--knop) + 2 * var(--r2) + var(--onder)); }
.onderaan.boven-balk { bottom: calc(var(--balk) + var(--onder)); padding-bottom: var(--r1); border-top: 1px solid var(--lijn); }
.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; max-width: 40rem; margin: 0 auto;
  display: flex; padding: 0 var(--rechts) var(--onder) var(--links);
  background: var(--zij); border-top: 1px solid var(--zij-lijn);
}
.balk a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--balk);
  color: var(--zij-tekst); opacity: .7; font-weight: 600; text-decoration: none;
}
.balk a[aria-current=page] { opacity: 1; box-shadow: inset 0 3px 0 var(--accent); }

/* ── Stap 148: Machines en de machinekaart ─────────────────────────────────── */
.machinesub { margin: 0 0 var(--r1); }
.kaart { margin: 0; padding: var(--r-half) var(--r2); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; }
.kaart > * { margin: 0; padding: var(--r1) 0; }
.kaart > * + * { border-top: 1px solid var(--dof); }
.kaartfeiten div { display: flex; gap: var(--r2); }
.kaartfeiten dt { min-width: 8rem; color: var(--stil); }
.kaartfeiten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kaartregel { display: block; width: 100%; min-height: 44px; color: inherit; text-align: left; text-decoration: none;
  background: none; border: 0; font: inherit; }
button.kaartregel { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.kaartregel span { display: block; color: var(--stil); }
.bontekst { margin: var(--r-half) 0 0; white-space: pre-line; }
select { min-height: var(--knop); padding: 0 var(--r2); border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); }
.naast-elkaar { align-items: center; }
a.klein { display: inline-flex; align-items: center; text-decoration: none; }

/* ── Stap 149: Storingen ───────────────────────────────────────────────────── */
.storing p { margin: var(--r1) 0 0; }
.storing .label { display: inline; margin: 0 var(--r-half) 0 0; }
.storing mark { background: var(--wacht-grond); color: inherit; border-radius: 3px; }
.opsomming { margin: var(--r1) 0 0; padding-left: var(--r2); }
.opsomming li { margin: var(--r-half) 0; }
.tekstknop { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mono { font-family: var(--mono); }

/* ── Stap 150: Start, de tegels ────────────────────────────────────────────── */
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r1); margin: 0; padding: 0; list-style: none; }
.tegels .breed { grid-column: 1 / -1; }
.tegel { display: flex; flex-direction: column; gap: var(--r-half); min-height: 96px; height: 100%; padding: var(--r2);
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; color: var(--tekst); text-decoration: none; }
.tegel span { color: var(--stil); font-size: 14px; }
.tegel .getal { font-size: 28px; line-height: 1; }
.tegel.wacht { background: var(--wacht-grond); border-color: var(--wacht-lijn); }
.tegel.wacht .getal { color: var(--wacht); }

/* ── Stap 151: nog te doen met "weg" ───────────────────────────────────────── */
.regelweg { display: flex; align-items: center; justify-content: space-between; gap: var(--r1); }
.regelweg .klein { flex: none; }