:root {
  --papier: #fbfaf6;
  --inkt: #1c1c1a;
  --inkt-zacht: #6b6b63;
  --lijn: #e0ded5;
  --accent: #1f4033;
  --stempel: #a33b2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 3rem;
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--lijn);
}

h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; text-transform: uppercase; letter-spacing: .04em; color: var(--inkt-zacht); }

#melding { font-size: .85rem; margin-left: auto; }
#melding[data-soort="fout"] { color: var(--stempel); }

nav { display: flex; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--lijn); }
nav button {
  background: none; border: 1px solid var(--lijn); border-radius: 999px;
  padding: .3rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; color: var(--inkt-zacht);
}
nav button[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--papier); }

main { padding: 0 1rem; max-width: 46rem; }

.kaart {
  border: 1px solid var(--lijn); border-radius: 8px;
  padding: .75rem; margin-bottom: .75rem; background: #fff;
}

.kop { display: flex; align-items: baseline; gap: .5rem; }
.kop .cijfer { margin-left: auto; font-variant-numeric: tabular-nums; }

.sub { color: var(--inkt-zacht); font-size: .85rem; }
.leeg { color: var(--inkt-zacht); font-size: .9rem; font-style: italic; }

.merk {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--lijn); border-radius: 4px; padding: 0 .3rem; color: var(--inkt-zacht);
}
.merk.waarschuwing { color: var(--stempel); border-color: var(--stempel); }

.eenheid { border-top: 1px solid var(--lijn); margin-top: .6rem; padding-top: .6rem; }
.contract { margin: .4rem 0 .4rem .5rem; padding-left: .6rem; border-left: 2px solid var(--lijn); }
.regel { padding: .3rem 0; border-bottom: 1px solid var(--lijn); }

.toevoegen { margin-top: .5rem; }
.toevoegen summary { cursor: pointer; color: var(--accent); font-size: .85rem; }

.velden { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.velden label { display: flex; flex-direction: column; font-size: .8rem; color: var(--inkt-zacht); gap: .15rem; }
input, select {
  font: inherit; padding: .4rem .5rem; border: 1px solid var(--lijn);
  border-radius: 6px; background: #fff; color: var(--inkt);
}

.knop {
  font: inherit; padding: .45rem .9rem; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: var(--papier); border: 1px solid var(--accent);
}
.knop.stil { background: none; color: var(--accent); }
.knop.rood { color: var(--stempel); border-color: var(--lijn); }
.knop.klein { padding: .15rem .5rem; font-size: .8rem; }
.knoprij { display: flex; gap: .5rem; margin-top: .3rem; }

.poort { max-width: 24rem; margin: 15vh auto; padding: 1.5rem; }