/* ============================================================
   Kit — basis
   Structuur en toegankelijkheid, geen uiterlijk. Alle kleuren en
   letters komen uit tokens.css, dat per stijl 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;
}

/* Bewegingsvloer — "geen animatie" is een keuze, "geen transition" is onaf.
   Elke aanraakbare staat wisselt met een curve, en indrukken geeft een
   voelbare reactie. Noem elke eigenschap apart — nooit de sluikvorm die
   alles tegelijk animeert. */

.kit-knop, button, a[href^="tel:"], a[href^="mailto:"], .kit-veld input, .kit-veld textarea {
  transition: background-color var(--duur, 160ms) var(--curve, cubic-bezier(.23,1,.32,1)),
              border-color     var(--duur, 160ms) var(--curve, cubic-bezier(.23,1,.32,1)),
              color            var(--duur, 160ms) var(--curve, cubic-bezier(.23,1,.32,1)),
              transform        var(--duur, 160ms) var(--curve, cubic-bezier(.23,1,.32,1));
}

.kit-knop:active, button:active { transform: scale(.97); }

.kit-veld input:focus-visible,
.kit-veld textarea:focus-visible { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .kit-knop, button { transition: background-color 160ms linear; }
  .kit-knop:active, button:active { transform: none; }
}

@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); }