/* ============================================================
   Kit — basis
   Structuur en toegankelijkheid, geen uiterlijk. Alle kleuren en
   letters komen uit tokens.css, dat per richting gegenereerd wordt.
   Wat hier staat geldt voor élke klantsite en wordt op één plek
   gerepareerd. Zet hier dus niets in wat per klant mag verschillen.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--ink);
  font-family: var(--letter-tekst);
  font-size: var(--basis);
  line-height: var(--regelhoogte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--letter-kop);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img, picture, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

/* Toegankelijkheid — niet optioneel, niet per klant aan te passen */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kit-overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
}
.kit-overslaan:focus { left: 0; }

.kit-alleen-voorlezer {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Raakvlakken van minimaal 44px. Geldt voor alles wat aanklikbaar is. */
a[href^="tel:"], a[href^="mailto:"], button, .kit-knop {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contactformulier — de structuur ligt vast, het uiterlijk niet.
   Zie kit/formulier.html voor de opmaak die de bouwagent overneemt. */

.kit-veld { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }

.kit-veld label { font-size: .9em; color: var(--ink-zacht); }

.kit-veld input,
.kit-veld textarea {
  font: inherit;
  color: var(--ink);
  background: var(--vlak);
  border: var(--lijn-dikte) solid var(--lijn-sterk);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  min-height: 44px;
  width: 100%;
}
.kit-veld textarea { min-height: 7rem; resize: vertical; }

/* Spamvangst. Nooit met display:none — dat slaan bots over. */
.kit-honing {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.kit-melding { padding: .8rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; }
.kit-melding[data-soort="goed"] { background: var(--vlak-op); color: var(--ink); }
.kit-melding[data-soort="fout"] { background: var(--vlak-op); color: var(--ink); border-left: 3px solid var(--accent); }