:root { --k: #298AAB; --bg: #f6f7f8; --kaart: #fff; --tekst: #1f2328; --zacht: #6b7280; --lijn: #e5e7eb;
  --groen: #1f7a3a; --groen-bg: #e7f5ec; --rood: #b42318; --rood-bg: #fdecea; --geel: #8a5a00; --geel-bg: #fff4d6;
  --grijs-bg: #eef0f2; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--k); text-decoration: none; } a:hover { text-decoration: underline; }
header { background: var(--kaart); border-bottom: 1px solid var(--lijn); }
header .in { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
header .merk { font-weight: 700; color: var(--k); font-size: 17px; }
header nav { display: flex; gap: 16px; flex: 1; }
header nav a { color: var(--tekst); } header nav a.aan { color: var(--k); font-weight: 600; }
header form { margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }
.test { background: var(--geel-bg); color: var(--geel); text-align: center; padding: 6px 16px; font-size: 13px; }
h1 { font-size: 22px; margin: 4px 0 14px; } h2 { font-size: 16px; margin: 0 0 10px; }
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.rij { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.rij > .kaart { flex: 1 1 320px; }
.cijfers { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cijfer { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; padding: 10px 14px; min-width: 170px; }
.cijfer b { display: block; font-size: 20px; } .cijfer span { color: var(--zacht); font-size: 13px; }
table.lijst { width: 100%; border-collapse: collapse; background: var(--kaart); }
.lijst th { text-align: left; font-weight: 600; font-size: 12px; color: var(--zacht); text-transform: uppercase; letter-spacing: .03em; padding: 8px; border-bottom: 1px solid var(--lijn); }
.lijst td { padding: 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.lijst tr:hover td { background: #fafbfc; }
.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zacht { color: var(--zacht); font-size: 13px; }
.pil { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--grijs-bg); color: var(--zacht); }
.pil.betaald, .pil.afgeleverd { background: var(--groen-bg); color: var(--groen); }
.pil.verzonden, .pil.onderweg, .pil.aangeboden { background: #e6f2f7; color: #1d6a85; }
.pil.mislukt, .pil.verlopen { background: var(--rood-bg); color: var(--rood); }
.pil.verdacht, .pil.vertraagd { background: var(--geel-bg); color: var(--geel); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.tabs a { padding: 4px 10px; border-radius: 6px; color: var(--tekst); } .tabs a.aan { background: var(--k); color: #fff; }
.tabs form { margin-left: auto; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; max-width: 100%; }
textarea { width: 100%; }
.knop, button { font: inherit; display: inline-block; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--k); background: var(--k); color: #fff; cursor: pointer; }
.knop.licht, button.licht { background: #fff; color: var(--k); }
button.gevaar { background: #fff; color: var(--rood); border-color: #e6b4ae; }
.knop:hover { text-decoration: none; filter: brightness(1.05); }
.acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.acties form { margin: 0; }
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.velden label { display: block; font-size: 13px; color: var(--zacht); margin-bottom: 2px; }
.velden input, .velden select { width: 100%; }
.velden .breed { grid-column: 1 / -1; }
.regels td { padding: 3px 4px; } .regels input { width: 100%; } .regels .num { width: 90px; text-align: right; }
.regels input.prod { width: 180px; }
.melding { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.melding.success { background: var(--groen-bg); color: var(--groen); } .melding.error { background: var(--rood-bg); color: var(--rood); }
.fout { color: var(--rood); font-size: 13px; }
iframe.pdf { width: 100%; height: 820px; border: 1px solid var(--lijn); border-radius: 6px; background: #fff; }
pre.mail { white-space: pre-wrap; font: 13px/1.45 inherit; background: var(--bg); padding: 10px; border-radius: 6px; margin: 8px 0; }
.ontv label { display: block; margin: 4px 0; }
.afl { font-size: 13px; margin: 4px 0 0 0; padding-left: 0; list-style: none; }
.afl li { margin: 3px 0; }
details summary { cursor: pointer; color: var(--zacht); font-size: 13px; }
@media (max-width: 700px) { .verberg-smal { display: none; } iframe.pdf { height: 480px; } }
.velden input[type=checkbox], .regels input[type=checkbox] { width: auto; margin-right: 6px; vertical-align: middle; }
.regels input.prod { width: 220px; }