/* Layout: één smalle kolom voor de gsm, vaste tabbalk onderaan. Grote tikvlakken: buiten, met natte handen. */
:root {
  --bg: #eceff1;
  --surface: #ffffff;
  --ink: #141a1f;
  --muted: #56636d;
  --line: #d2d9de;
  --hivis: #f3d21b;        /* signaalgeel van werkkledij: primaire acties */
  --hivis-ink: #141a1f;
  --link: #145a80;
  --ok: #1d7646;
  --warn: #a5530a;
  --bad: #b3261e;
  --soft: #e1e7eb;
  --paper: #ffffff;        /* bon en handtekening blijven altijd "papier" */
  --paper-ink: #1b2430;
  --paper-line: #c9d1d7;
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1215; --surface: #171d22; --ink: #e7ecef; --muted: #98a5ae; --line: #2a333a;
    --link: #7cc3ec; --ok: #5bc68c; --warn: #f0a35a; --bad: #f2837a; --soft: #1f272e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1215; --surface: #171d22; --ink: #e7ecef; --muted: #98a5ae; --line: #2a333a;
  --link: #7cc3ec; --ok: #5bc68c; --warn: #f0a35a; --bad: #f2837a; --soft: #1f272e; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font: 16px/1.45 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 8px calc(88px + env(safe-area-inset-bottom, 0px));
}
.app { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
h1 { font-size: 30px; font-weight: 800; font-stretch: 88%; letter-spacing: -.01em; line-height: 1.1; }
h2 { font-size: 18px; font-weight: 700; font-stretch: 92%; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
a { color: var(--link); }
.tijd, td.n, th.n { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.klein { font-size: 13px; color: var(--muted); }
.lbl { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.plus { color: var(--warn); }

/* kop */
.kop { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.eyebrow { font: 700 13px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sub { color: var(--muted); }
.terug { align-self: flex-start; background: none; border: 0; padding: 8px 0; font: 700 16px var(--f-body); color: var(--link); cursor: pointer; min-height: 44px; }

/* blokken */
.blok { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.blok-los { display: flex; flex-direction: column; gap: 12px; }
.rij-tussen { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; min-width: 0; }

/* knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 16px;
  border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: 700 15px var(--f-body); text-decoration: none; cursor: pointer;
}
.knop:hover { border-color: var(--ink); }
.knop.primair { background: var(--hivis); color: var(--hivis-ink); border-color: var(--hivis); }
.knop.primair:hover { border-color: var(--hivis-ink); }
.knop.gevaar { border-color: var(--bad); color: var(--bad); }
.knop.groot { width: 100%; min-height: 56px; font-size: 17px; }
.klein-knop { min-height: 44px; padding: 8px 12px; font-size: 14px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .vink:focus-within {
  outline: 3px solid var(--link); outline-offset: 2px;
}
.acties { display: flex; gap: 10px; flex-wrap: wrap; }
.acties > * { flex: 1 1 auto; }
.acties.vast { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding-block: 8px; background: linear-gradient(transparent, var(--bg) 30%); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); white-space: nowrap; }
.zone-B { background: var(--soft); }
.zone-A { background: var(--hivis); color: var(--hivis-ink); }
.zone-O { background: var(--bad); color: var(--surface); }
.st-ok { background: transparent; color: var(--ok); box-shadow: inset 0 0 0 1.5px currentColor; }
.st-warn { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1.5px currentColor; }
.st-bezig { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1.5px currentColor; }
.st-open { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.toggle { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 15px var(--f-body); cursor: pointer; }
.toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ploeg */
.leden { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.leden li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.lid-naam { font-weight: 700; font-size: 17px; }
.rollen { display: flex; gap: 6px; }
.rol { font-size: 12px; color: var(--muted); }
.rol + .rol::before { content: "· "; }
.jij { font: 700 11px var(--f-body); text-transform: uppercase; letter-spacing: .06em; background: var(--hivis); color: var(--hivis-ink); padding: 1px 6px; border-radius: 4px; vertical-align: 2px; }

/* klok */
.klok { display: flex; flex-direction: column; gap: 8px; }
.klok-rij { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; }
.klok-rij label { font-weight: 700; font-size: 15px; }
.telt { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.klok-res { display: flex; gap: 24px; flex-wrap: wrap; padding: 12px; border-radius: 8px; background: var(--soft); }
.klok-res > span { display: flex; flex-direction: column; }
.klok-res b { font-size: 24px; font-weight: 500; }
.leeg-res { color: var(--muted); font-size: 14px; }
input, select, textarea {
  font: 16px var(--f-body); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 10px; min-height: 48px; width: 100%; min-width: 0;
}
input[type="time"] { font-family: var(--f-num); }
textarea { resize: vertical; }
.veld { display: flex; flex-direction: column; gap: 4px; }
.twee { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }

/* werven */
.werven { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.werf { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 14px 10px; }
.werf-nr { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 500 15px var(--f-num); }
.werf.is-klaar .werf-nr { background: var(--ok); color: var(--surface); }
.werf-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adres { font-size: 15px; }
.werk { font-size: 14px; color: var(--muted); }
.werf-acties { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }

/* bon formulier */
.vinkjes { display: flex; flex-direction: column; gap: 6px; }
.vink { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 6px 10px; border-radius: 8px; background: var(--bg); cursor: pointer; }
.vink input { width: 24px; height: 24px; min-height: 0; accent-color: var(--ok); flex: none; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; max-width: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.foto-weg { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); font-size: 18px; cursor: pointer; }
.foto-plus { aspect-ratio: 1; border: 2px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; cursor: pointer; }
.foto-plus span:first-child { font-size: 28px; line-height: 1; }
.segment { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; }
.segment button { min-height: 48px; border: 0; background: var(--surface); color: var(--ink); font: 700 15px var(--f-body); cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.sig-wrap { position: relative; border-radius: 8px; background: var(--paper); border: 1.5px solid var(--paper-line); }
.sig { display: block; width: 100%; height: 180px; touch-action: none; color: var(--paper-ink); cursor: crosshair; }
.sig-lijn { position: absolute; left: 14px; right: 14px; bottom: 34px; border-bottom: 1.5px dashed var(--paper-line); color: #8a96a0; font-size: 13px; pointer-events: none; padding-bottom: 2px; }
.sig-wrap.getekend .sig-lijn { color: transparent; }
.sig-wis { position: absolute; top: 6px; right: 6px; background: var(--paper); color: var(--paper-ink); border-color: var(--paper-line); }
.fout { border: 1.5px solid var(--bad); color: var(--bad); border-radius: 10px; padding: 12px 14px; font-weight: 700; }
.fout ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }

/* afgesloten bon: ziet eruit als het papieren document */
.bonblad { background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 var(--paper-line), 0 8px 24px rgba(0, 0, 0, .12); }
.bonblad .kv dt { color: #5d6a74; }
.bon-kop { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--paper-ink); padding-bottom: 8px; }
.bon-titel { font: 800 22px var(--f-display); font-stretch: 85%; text-transform: uppercase; letter-spacing: .04em; }
.gedaan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gedaan li::before { display: inline-block; width: 22px; font-weight: 700; }
.gedaan li.ja::before { content: "✓"; color: #1d7646; }
.gedaan li.nee { color: #8a96a0; text-decoration: line-through; }
.gedaan li.nee::before { content: "–"; }
.bon-extra { border-left: 3px solid var(--paper-line); padding-left: 10px; }
.bon-sig { border-top: 1.5px dashed var(--paper-line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.bon-sig img { max-height: 80px; max-width: 100%; align-self: flex-start; }
.bon-sig span { font-size: 13px; color: #5d6a74; }
.bon-niet { color: #a5530a; font-weight: 700; }

/* lijsten */
.lijst { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lijst-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left; min-height: 52px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 15px var(--f-body); cursor: pointer; }
.lijst-item:last-child { border-bottom: 0; }
.lijst-item:hover { background: var(--soft); }

/* week */
.periode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dag { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font: inherit; cursor: pointer; }
.dag:hover { border-color: var(--ink); }
.dag.is-vandaag { border: 2px solid var(--ink); }
.leeg-dag { opacity: .7; }
.dag-kop { display: flex; justify-content: space-between; align-items: baseline; }
.dag-naam { font: 700 18px var(--f-display); text-transform: capitalize; }
.dag-team { font-size: 14px; color: var(--muted); }
.dag-werven { font-size: 15px; }

/* uren */
.meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.meter { background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meter b { font-size: 22px; font-weight: 500; }
.tabel-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
th { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }

/* profiel */
.plan { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.plan b { display: block; }

/* kiezen */
.kies { display: flex; flex-direction: column; gap: 10px; }
.kies-knop { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 12px 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer; text-align: left; }
.kies-knop:hover { border-color: var(--ink); }
.kies-naam { font: 700 18px var(--f-display); }
.kies-sub { color: var(--muted); font-size: 14px; }

.leeg { border: 1.5px dashed var(--line); border-radius: 10px; padding: 24px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.leeg-titel { font: 700 18px var(--f-display); color: var(--ink); }

/* tabbalk */
.tabbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tabbalk button { min-height: 64px; border: 0; background: none; color: var(--bg); opacity: .72; font: 700 13px var(--f-body); letter-spacing: .03em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border-top: 4px solid transparent; }
.tabbalk button[aria-current="page"] { opacity: 1; border-top-color: var(--hivis); }
.ico { position: relative; display: inline-flex; }
.badge { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hivis); color: var(--hivis-ink); font: 700 11px/18px var(--f-num); text-align: center; }
.tabbalk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 6; background: var(--hivis); color: var(--hivis-ink); padding: 12px 18px; border-radius: 999px; font-weight: 700; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }

@media (max-width: 380px) {
  .klok-rij { grid-template-columns: minmax(0, 1fr) 104px; }
  .klok-rij .knop { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* planning bevestigen en meldingen */
.melding { border: 2px solid var(--ink); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.melding-titel { font: 800 18px var(--f-display); font-stretch: 92%; }
.melding-dagen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.melding-dagen .tijd { display: inline-block; min-width: 64px; color: var(--muted); }
.waarschuwing { color: var(--warn); }
.twee-kol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
@media (max-width: 420px) { .twee-kol { grid-template-columns: minmax(0, 1fr); } }

/* automatische registratie */
.auto { font: 700 10px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; vertical-align: 2px; }
.demo { border: 1.5px dashed var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tijdlijn { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 0; }
.tijdlijn li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); position: relative; font-size: 14px; }
.tijdlijn li::before { content: ""; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.werf.is-hier { border: 2px solid var(--hivis); }
.werf.is-hier .werf-nr { background: var(--hivis); color: var(--hivis-ink); }

/* kantoor: planning */
.kdag { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.kploeg { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.kploeg:hover { border-color: var(--ink); }
.ord { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--hivis); color: var(--hivis-ink); font: 500 12px var(--f-num); }
.kwerven { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kwerven li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kw-naam { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.kw-knoppen { display: flex; gap: 6px; }
.kw-knoppen .knop { min-width: 44px; padding: 8px; }
.lijst-leeg { padding: 12px; }

/* kantoor: binnengekomen */
.kbonnen { display: flex; flex-direction: column; gap: 8px; }
.kbon { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.kbon:hover { border-color: var(--ink); }
.kbon.is-nieuw { border: 2px solid var(--hivis); }
.bon-klant { font: 800 20px var(--f-display); font-stretch: 90%; }
.kies-knop.is-kantoor { border-style: dashed; }

/* ---------- bon in de vorm van de papieren bon (altijd wit papier, schaalt mee) ---------- */
.bonvel-wrap { container-type: inline-size; width: 100%; }
.bonvel { --i: #15181c; background: #fff; color: var(--i); aspect-ratio: 210 / 297; padding: 6cqw 7cqw 4cqw; font-size: 2.15cqw; line-height: 1.35;
  display: flex; flex-direction: column; gap: 1.6cqw; box-shadow: 0 1px 0 var(--paper-line), 0 8px 24px rgba(0, 0, 0, .12); border-radius: 2px; }
.bonvel p { margin: 0; }
.bonvel u { text-underline-offset: .15em; }
.bv-hand { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: #2a3a9a; font-size: 1.25em; }
.bv-sig { display: block; max-height: 11cqw; max-width: 100%; }
.bv-signaam { display: block; font-size: .85em; }
.bv-papier { color: #6b7680; font-style: italic; }
.bv-niet { color: #a5530a; font-weight: 700; }
.bv-fotos { display: flex; gap: 1cqw; flex-wrap: wrap; }
.bv-fotos img { height: 12cqw; width: auto; border: 1px solid #ccc; }
.bv-digi { margin-top: auto !important; font: 1.3cqw/1.3 Arial, Helvetica, sans-serif; color: #6b7680; text-align: right; }

/* Clever Cleaning: Times, kader met WERKBON / KLANT / ADRES / werk / handtekeningen / BELANGRIJK */
.bv-clever { font-family: "Times New Roman", Times, Georgia, serif; }
.bv-c-kop { display: flex; flex-direction: column; gap: 1.4cqw; }
.bv-c-merk { font: 700 4.6cqw/1 Arial, Helvetica, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #3c4146; border-bottom: .3cqw solid #3c4146; align-self: flex-start; padding-bottom: .6cqw; }
.bv-c-merk small { font-size: .35em; }
.bv-c-kop p:last-child { padding-left: 8cqw; }
.bv-c-kader { border: .2cqw solid var(--i); display: flex; flex-direction: column; flex: 1; }
.bv-c-kader > * { border-bottom: .2cqw solid var(--i); padding: 1cqw 1.4cqw; }
.bv-c-kader > :last-child { border-bottom: 0; }
.bv-c-titel { text-align: center; font-weight: 700; }
.bv-c-rij { font-weight: 700; }
.bv-c-werk { flex: 1; display: flex; flex-direction: column; gap: .6cqw; padding-top: 6cqw !important; }
.bv-c-datum { margin-top: auto !important; }
.bv-c-onder { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: end; }
.bv-c-belangrijk { text-align: center; }

/* Cleaning Masters by Samsic: Arial, kaders met label : waarde, grijze vakken */
.bv-samsic { font-family: Calibri, Carlito, Arial, Helvetica, sans-serif; gap: 1.2cqw; }
.bv-s-opdr { text-align: right; color: #1f7a86; font-weight: 700; }
.bv-s-titel { font-size: 4.2cqw; margin: 3cqw 0 1cqw; }
.bv-s-box { border: .35cqw solid var(--i); }
.bv-s-rij { display: grid; grid-template-columns: 44% 3% 1fr; padding: .3cqw 1cqw; font-weight: 600; }
.bv-s-rij > :last-child { font-weight: 400; }
.bv-s-werk { min-height: 18cqw; }
.bv-s-grijs .bv-s-rij > :last-child { background: #d9d9d9; margin: -.3cqw -1cqw -.3cqw 0; padding: .3cqw 1cqw; }
.bv-s-hoog { min-height: 16cqw; }

/* Atalian: Arial, kop met opdrachtgever en klant, referenties, tabel met vakjes */
.bv-atalian { font-family: Arial, Helvetica, sans-serif; font-size: 1.85cqw; }
.bv-a-kop { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3cqw; }
.bv-a-opdr { font-weight: 700; }
.bv-a-klant, .bv-a-ref { display: grid; grid-template-columns: auto 1fr; gap: .4cqw 2cqw; margin: 0; }
.bv-a-klant dd, .bv-a-ref dd { margin: 0; font-weight: 700; }
.bv-a-ref { margin-left: 39%; }
.bv-a-tabel { width: 100%; border-collapse: collapse; }
.bv-a-tabel th { background: #9a9a9a; color: #000; font-weight: 400; padding: .4cqw 1cqw; text-align: center; width: 14%; }
.bv-a-tabel th:first-child { width: auto; }
.bv-a-tabel td { padding: .5cqw 1cqw; }
.bv-a-tabel td:last-child { text-align: center; font-size: 1.4em; }
.bv-a-extra { padding-left: 10cqw; }
.bv-a-onder { display: flex; flex-direction: column; align-items: flex-end; gap: 1cqw; margin-top: 3cqw; }
.bv-a-uitv { color: #444; }

/* Lijst van gegevens (werknemers, klanten, camionettes) */
.glijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.glijst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.glijst li > span:first-child { min-width: 0; }
.bv-c-kop2 { text-align: center; padding-block: 2cqw 4cqw; }