/**
 * Herbruikbare componenten (T22): knoppen, badges, meldingbanner,
 * formuliervelden, kaarten. Uitsluitend var(--...) uit tokens.css, geen
 * losse hex-kleuren of pixelwaarden (CLAUDE.md 8).
 */

.pagina-breedte {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--ruimte-6) var(--ruimte-4) var(--ruimte-12);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kleur-oppervlak);
  color: var(--kleur-primair);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--gewicht-halfvet);
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

.kop-merk {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-6);
}

.kop-merk__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
}

.kop-merk__naam {
  font-family: var(--lettertype-koppen);
  font-weight: var(--gewicht-extravet);
  font-size: var(--tekst-md);
  color: var(--kleur-primair);
}

.kaart {
  background: var(--kleur-oppervlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-xl);
  padding: var(--ruimte-6);
}

.kaart h2 {
  font-size: var(--tekst-xl);
  margin: 0 0 var(--ruimte-2);
}

.kaart > p:first-of-type {
  color: var(--kleur-inkt-gedempt);
  font-size: var(--tekst-sm);
  margin-bottom: var(--ruimte-6);
}

/* Knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  font-family: var(--lettertype-koppen);
  font-weight: var(--gewicht-vet);
  font-size: var(--tekst-md);
  border-radius: var(--radius-md);
  padding: var(--ruimte-3) var(--ruimte-6);
  min-height: var(--raakvlak-min);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.knop--primair {
  color: var(--kleur-op-kleur);
  background: var(--kleur-primair);
}

.knop--primair:hover,
.knop--primair:focus-visible {
  background: var(--kleur-primair-donker);
  color: var(--kleur-op-kleur);
}

.knop--secundair {
  color: var(--kleur-primair);
  background: var(--kleur-oppervlak);
  border-color: var(--kleur-primair);
}

.knop--secundair:hover,
.knop--secundair:focus-visible {
  background: var(--kleur-achtergrond);
  color: var(--kleur-primair);
}

.knop--gevaar {
  color: var(--kleur-op-kleur);
  background: var(--kleur-gevaar);
}

.knop--gevaar:hover,
.knop--gevaar:focus-visible {
  background: var(--kleur-gevaar-donker);
  color: var(--kleur-op-kleur);
}

.knop:disabled,
.knop[aria-disabled="true"] {
  background: var(--kleur-uitgeschakeld-bg);
  border-color: transparent;
  color: var(--kleur-uitgeschakeld-tekst);
  cursor: not-allowed;
}

.knop-link {
  font-size: var(--tekst-sm);
  font-weight: var(--gewicht-halfvet);
  color: var(--kleur-primair);
  background: none;
  border: none;
  padding: var(--ruimte-2);
  cursor: pointer;
  text-decoration: underline;
}

.knop-link--gevaar {
  color: var(--kleur-gevaar);
}

/* Badges */
.badge {
  display: inline-block;
  font-family: var(--lettertype-koppen);
  font-weight: var(--gewicht-vet);
  font-size: var(--tekst-xs);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-vol);
  color: var(--kleur-op-kleur);
  white-space: nowrap;
}

.badge--groep-a { background: var(--kleur-groep-a); }
.badge--groep-b { background: var(--kleur-groep-b); }
.badge--succes { background: var(--kleur-succes); }
.badge--wachtlijst { background: var(--kleur-wachtlijst-bg); color: var(--kleur-wachtlijst-tekst); }
.badge--neutraal { background: var(--kleur-uitgeschakeld-bg); color: var(--kleur-uitgeschakeld-tekst); }

/* Meldingbanner (PRD 8.5: info/waarschuwing/urgent) */
.melding-banner {
  display: flex;
  gap: var(--ruimte-3);
  align-items: flex-start;
  border-radius: var(--radius-lg);
  padding: var(--ruimte-4) var(--ruimte-5);
  margin-bottom: var(--ruimte-4);
}

.melding-banner__icoon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-vol);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kleur-op-kleur);
  font-weight: var(--gewicht-extravet);
  font-family: var(--lettertype-koppen);
  font-size: var(--tekst-sm);
}

.melding-banner__titel {
  font-weight: var(--gewicht-vet);
  font-size: var(--tekst-basis);
  margin: 0 0 2px;
}

.melding-banner__tekst {
  font-size: var(--tekst-sm);
  color: var(--kleur-inkt-zacht);
  margin: 0;
}

.melding-banner--info {
  background: var(--kleur-info-bg);
  border: 1px solid var(--kleur-info-rand);
}
.melding-banner--info .melding-banner__icoon { background: var(--kleur-primair); }

.melding-banner--waarschuwing {
  background: var(--kleur-waarschuwing-bg);
  border: 1px solid var(--kleur-waarschuwing-rand);
}
.melding-banner--waarschuwing .melding-banner__icoon { background: var(--kleur-accent); }

.melding-banner--urgent {
  background: var(--kleur-gevaar-bg);
  border: 1px solid var(--kleur-gevaar-rand);
}
.melding-banner--urgent .melding-banner__icoon { background: var(--kleur-gevaar); }

/* Statusmeldingen (server-side, aria-live) */
.statusmelding {
  border-radius: var(--radius-lg);
  padding: var(--ruimte-4) var(--ruimte-5);
  margin-bottom: var(--ruimte-4);
  font-size: var(--tekst-basis);
}

.statusmelding--succes {
  background: var(--kleur-info-bg);
  border: 1px solid var(--kleur-info-rand);
  color: var(--kleur-info-tekst);
}

.statusmelding--fout {
  background: var(--kleur-gevaar-bg);
  border: 1px solid var(--kleur-gevaar-rand);
  color: var(--kleur-gevaar);
}

/* Formuliervelden */
.veld {
  margin-bottom: var(--ruimte-5);
}

.veld label {
  display: block;
  font-size: var(--tekst-sm);
  font-weight: var(--gewicht-halfvet);
  color: var(--kleur-inkt);
  margin-bottom: var(--ruimte-2);
}

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="date"],
.veld input[type="datetime-local"],
.veld input[type="password"],
.veld select,
.veld textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--kleur-rand-sterk);
  border-radius: var(--radius-md);
  padding: var(--ruimte-3) var(--ruimte-4);
  font-size: var(--tekst-basis);
  font-family: var(--lettertype-basis);
  color: var(--kleur-inkt);
  background: var(--kleur-oppervlak);
  min-height: var(--raakvlak-min);
}

.veld textarea {
  min-height: auto;
  resize: vertical;
}

.veld__fout {
  font-size: var(--tekst-sm);
  color: var(--kleur-gevaar);
  margin-top: var(--ruimte-2);
}

.veld__ster {
  color: var(--kleur-gevaar);
}

.verplicht-uitleg {
  font-size: var(--tekst-sm);
  color: var(--kleur-inkt-gedempt);
  margin-bottom: var(--ruimte-5);
}

.veld input[aria-describedby],
.veld select[aria-describedby],
.veld textarea[aria-describedby] {
  border-color: var(--kleur-gevaar);
}

.veld-groep {
  display: grid;
  gap: var(--ruimte-4);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) { /* --breakpoint-sm */
  .veld-groep--twee-koloms {
    grid-template-columns: 1fr 1fr;
  }
}

.keuzerij {
  display: flex;
  gap: var(--ruimte-2);
  flex-wrap: wrap;
}

.keuzerij label {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-sm);
  font-weight: var(--gewicht-normaal);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--kleur-rand-sterk);
  cursor: pointer;
  min-height: var(--raakvlak-min);
  margin-bottom: 0;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

/* Stappenbalk + stapnavigatie (progressive enhancement via
   aanmeld-stappen.js). Zonder JS blijft .stappenbalk verborgen ([hidden])
   en tonen alle .form-stap-secties gewoon tegelijk. */
.stappenbalk__lijst {
  display: flex;
  gap: var(--ruimte-2);
  list-style: none;
  margin: 0 0 var(--ruimte-6);
  padding: 0;
}

.stappenbalk__item {
  flex: 1;
  min-width: 0;
}

.stappenbalk__item::before {
  content: '';
  display: block;
  height: 6px;
  border-radius: var(--radius-vol);
  background: var(--kleur-rand-sterk);
  margin-bottom: var(--ruimte-2);
}

.stappenbalk__item button,
.stappenbalk__item span {
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-family: var(--lettertype-basis);
  font-weight: var(--gewicht-vet);
  font-size: var(--tekst-xs);
  color: var(--kleur-inkt-gedempt);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stappenbalk__item button {
  cursor: not-allowed;
}

.stappenbalk__item button:not(:disabled) {
  color: var(--kleur-primair);
  cursor: pointer;
  text-decoration: underline;
}

.stappenbalk__item--actief::before,
.stappenbalk__item--voltooid::before {
  background: var(--kleur-primair);
}

.stappenbalk__item--actief button,
.stappenbalk__item--actief span {
  color: var(--kleur-primair);
}

.form-stap__navigatie {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-6);
}

.form-stap__navigatie .stap-volgende {
  margin-inline-start: auto;
}

hr.scheiding {
  border: none;
  border-top: 1px solid var(--kleur-rand);
  margin: var(--ruimte-6) 0;
}