/* Komtbinnen basiscomponenten. Rechte hoeken, geen schaduw, geen verloop. */

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

.kb {
  margin: 0;
  background: var(--kb-papier);
  color: var(--kb-antraciet);
  font: 400 var(--kb-fs-tekst)/1.55 var(--kb-font-tekst);
  -webkit-font-smoothing: antialiased;
}
.kb h1, .kb h2, .kb h3, .kb h4 {
  font-family: var(--kb-font-kop);
  font-weight: 600;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.kb h1 { font-size: var(--kb-fs-h1); }
.kb h2 { font-size: var(--kb-fs-h2); }
.kb h3 { font-size: var(--kb-fs-h3); }
.kb h4 { font-size: var(--kb-fs-h4); font-weight: 500; }
.kb p { margin: 0 0 var(--kb-r-4); }
.kb-lead { font-size: var(--kb-fs-lead); line-height: 1.5; }
.kb-klein { font-size: var(--kb-fs-klein); }
.kb-label { font: 500 0.875rem/1.3 var(--kb-font-kop); letter-spacing: .06em; }

.kb-container { max-width: var(--kb-container); margin: 0 auto; padding: 0 var(--kb-r-6); }
.kb-sectie { padding: var(--kb-r-10) 0; }
.kb-sectie--donker { background: var(--kb-antraciet); color: var(--kb-papier); }
.kb-sectie--steen { background: var(--kb-steen); }
.kb-regel { border: 0; border-top: var(--kb-lijn); margin: 0; }

/* Knoppen */
.kb-knop {
  display: inline-flex; align-items: center; gap: var(--kb-r-3);
  font: 500 1.0625rem/1 var(--kb-font-kop);
  padding: 18px 28px;
  border: 2px solid transparent;
  background: var(--kb-amber); color: var(--kb-antraciet);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--kb-duur-kort) var(--kb-ease),
              transform var(--kb-duur-kort) var(--kb-ease);
}
.kb-knop:hover { background: #F2BD62; }
.kb-knop:active { transform: translateY(1px); }
.kb-knop--donker { background: var(--kb-antraciet); color: var(--kb-papier); }
.kb-knop--donker:hover { background: #3B3530; }
.kb-knop--rand { background: transparent; border-color: var(--kb-antraciet); color: var(--kb-antraciet); }
.kb-knop--rand:hover { background: var(--kb-antraciet); color: var(--kb-papier); }
.kb-link {
  color: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.kb-link:hover { text-decoration-color: var(--kb-amber); }

/* Focus: altijd zichtbaar */
.kb :focus-visible { outline: 3px solid var(--kb-antraciet); outline-offset: 3px; box-shadow: 0 0 0 6px var(--kb-amber); }
.kb-sectie--donker :focus-visible { outline-color: var(--kb-amber); box-shadow: none; }

/* Formulier */
.kb-veld { display: block; margin-bottom: var(--kb-r-5); }
.kb-veld span { display: block; font-size: var(--kb-fs-klein); font-weight: 700; margin-bottom: 6px; }
.kb-invoer {
  width: 100%; font: 400 1.0625rem/1.4 var(--kb-font-tekst);
  padding: 13px 14px; border: 2px solid var(--kb-antraciet); background: var(--kb-wit); color: var(--kb-antraciet);
  border-radius: 0;
}

/* Tabel */
.kb-tabel { border-collapse: collapse; width: 100%; font-size: 1rem; }
.kb-tabel th { font: 500 .8125rem/1.3 var(--kb-font-kop); letter-spacing: .05em; text-align: left; padding: 10px 16px 10px 0; border-bottom: var(--kb-lijn-sterk); }
.kb-tabel td { padding: 14px 16px 14px 0; border-bottom: var(--kb-lijn); vertical-align: top; }

/* Status */
.kb-status { display: inline-flex; align-items: center; gap: 8px; }
.kb-status::before { content: ""; width: 11px; height: 11px; background: var(--kb-antraciet); }
.kb-status--wacht::before { background: var(--kb-amber); box-shadow: inset 0 0 0 2px var(--kb-antraciet); }
.kb-status--verwacht::before { background: var(--kb-steen); box-shadow: inset 0 0 0 2px var(--kb-antraciet); }

/* Icoon via sprite: <svg class="kb-icoon"><use href="iconen/sprite.svg#deur"/></svg> */
.kb-icoon { width: 24px; height: 24px; flex: none; }