/* Startstijl van de klantsite. Bewust klein en zonder framework: alles wat
   hier staat is door gereedschap/controleer-site.py na te meten. Elke
   tekst/achtergrond-combinatie hieronder haalt WCAG AA (>= 4.5). */
:root {
  --inkt: #1a1a1a;        /* tekst op wit: 16.7 */
  --grond: #ffffff;
  --accent: #1e3a8a;      /* wit op accent: 11.6 */
  --accent-tekst: #ffffff;
  --zacht: #f3f4f6;       /* inkt op zacht: 15.2 */
  --rand: #d1d5db;
  --maat: 1.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--grond);
}

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 var(--maat); }

header { border-bottom: 1px solid var(--rand); }
header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
header nav a { margin-left: 1rem; color: var(--inkt); text-decoration: none; }
header nav a:hover, header nav a:focus { text-decoration: underline; }
.merk { font-weight: 700; color: var(--inkt); text-decoration: none; }

.hero { padding: 4rem 0; }
.hero h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 1rem; }
.hero p { font-size: 1.125rem; max-width: 36rem; }

.knop {
  display: inline-block;
  padding: .75rem 1.25rem;
  color: var(--accent-tekst);
  background: var(--accent);
  border-radius: .375rem;
  text-decoration: none;
  font-weight: 600;
}

section { padding: 3rem 0; }
.zacht { background: var(--zacht); }
h2 { font-size: 1.5rem; margin-top: 0; }

.raster { display: grid; gap: var(--maat); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.kaart { background: var(--grond); border: 1px solid var(--rand); border-radius: .5rem; padding: var(--maat); }
.kaart h3 { margin-top: 0; }

form { display: grid; gap: 1rem; max-width: 32rem; }
label { font-weight: 600; }
input, textarea {
  width: 100%;
  padding: .625rem;
  border: 1px solid var(--rand);
  border-radius: .375rem;
  font: inherit;
  color: var(--inkt);
  background: var(--grond);
}
button.knop { border: 0; cursor: pointer; font: inherit; }

footer { padding: 2rem 0; color: var(--grond); background: var(--inkt); }
footer a { color: var(--grond); }

@media (max-width: 40rem) {
  .hero { padding: 2.5rem 0; }
  .hero h1 { font-size: 1.75rem; }
}