/* Gedeelde stijl voor de tekstpagina's (voorwaarden, privacy). De
   verkooppagina houdt zijn eigen stijl inline -- die is één bestand zonder
   bouwstap en dat blijft zo. Deze twee delen wel, anders staat dezelfde
   zestig regels twee keer in de repo en lopen ze uit elkaar. */
:root {
  --canvas: #060a09;
  --kaart: #0d1310;
  --kaart-rand: #1a2420;
  --tekst: #e8efec;
  --tekst-zacht: #8fa39b;
  --tekst-label: #6b7f78;
  --accent: #17d98a;
  --accent-zacht: rgba(23, 217, 138, .12);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-cijfer: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--canvas); color: var(--tekst);
  font: 16px/1.7 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

header {
  border-bottom: 1px solid var(--kaart-rand);
  background: rgba(6, 10, 9, .88);
}
.kop { display: flex; align-items: center; gap: 28px; height: 64px; }
.merk {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; letter-spacing: .14em; text-decoration: none; color: var(--tekst);
}
.merk svg { display: block; }
.merknaam { letter-spacing: -0.01em; font-weight: 620; }
.merknaam b { color: var(--accent); font-weight: 760; }
.terug { margin-left: auto; color: var(--tekst-zacht); text-decoration: none; font-size: 14.5px; }
.terug:hover { color: var(--tekst); }

main { padding: 56px 0 88px; }
h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.15; margin: 0 0 8px; text-wrap: balance; }
.bijgewerkt {
  font-family: var(--font-cijfer); font-size: 12.5px; letter-spacing: .04em;
  color: var(--tekst-label); margin: 0 0 32px;
}
h2 {
  font-size: 19px; margin: 44px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--kaart-rand); text-wrap: balance;
}
h3 { font-size: 16px; margin: 26px 0 8px; color: var(--accent); }
p, li { color: var(--tekst-zacht); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin: 0 0 7px; }
strong { color: var(--tekst); font-weight: 620; }

/* HIER STOND .let-op EN .invullen: het gele "nog niet definitief"-blok en het
   gestippelde vakje om een ontbrekend gegeven heen. Allebei weg op 10-9, want
   ze stonden op een pagina die al live was en al klanten kreeg.
   De redenering die erbij stond -- "een gat verzwijgen is erger dan het gat
   zelf" -- klopt nog steeds; alleen zijn de gaten nu gevuld in plaats van
   omcirkeld. Komt er ooit weer een gat, gebruik dan geen etiket op de pagina
   maar vul het. Staat het er nog niet in: dan hoort de pagina niet live.
   De losse .etiket op de homepage is een ander ding en staat in index.html. */

.tabelrand { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--kaart-rand); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--kaart); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--kaart-rand); font-size: 14.5px; }
th {
  font-family: var(--font-cijfer); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tekst-label); font-weight: 500;
}
td { color: var(--tekst-zacht); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

footer { border-top: 1px solid var(--kaart-rand); padding: 26px 0; }
.voet { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 14px; color: var(--tekst-label); }
.voet nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; }
.voet a { color: var(--tekst-zacht); text-decoration: none; }
.voet a:hover { color: var(--tekst); }

@media (max-width: 560px) {
  main { padding: 36px 0 64px; }
  .voet nav { margin-left: 0; }
}