/* ── Basis: reset, typografie, knoppen, layout — De Werkbank ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font-brood);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--actie); color: var(--asfalt); }

h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6.5vw, 72px); }
h2 { font-size: clamp(30px, 4.5vw, 46px); }
h3 { font-size: 26px; line-height: 1.12; }
p  { margin: 0; text-wrap: pretty; }

a { color: inherit; transition: color var(--overgang); }
a:hover { color: var(--signaal); }
.sectie--donker a:not(.knop):hover { color: var(--actie); }

img, svg { max-width: 100%; }

/* Toetsenbord-focus: altijd zichtbaar, kleur per ondergrond */
:focus-visible { outline: 3px solid var(--asfalt); outline-offset: 3px; }
.sectie--donker :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--actie); }

/* Skiplink: eerste tab-stop, onzichtbaar tot focus */
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--actie); color: var(--asfalt);
  font-family: var(--font-kop); font-weight: 600; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 22px; text-decoration: none;
}
.skiplink:focus { left: 0; }

/* ── Container en sectie-opbouw ── */
.kader {
  max-width: var(--site-breedte);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
.sectie { padding: var(--sectie-ruimte) 0; }
.sectie--donker { background: var(--bg-donker); color: var(--tekst-op-donker); }
.sectie--oker   { background: var(--actie); color: var(--tekst); }

/* Kicker: klein Oswald-label met beeldmerk-balkje ervoor */
.kicker {
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tekst-secundair);
  display: block;
  margin-bottom: 14px;
}
.kicker::before {
  content: ""; display: inline-block;
  width: 28px; height: 7px; margin-right: 12px;
  background: var(--actie); vertical-align: 2px;
}
.sectie--donker .kicker { color: var(--actie); }
.sectie--oker   .kicker { color: var(--asfalt); }
.sectie--oker   .kicker::before { background: var(--asfalt); }

.intro {
  font-size: 20px;
  color: var(--tekst-secundair);
  max-width: 680px;
  margin-top: 18px;
}
.sectie--donker .intro { color: var(--tekst-op-donker-2); }
.sectie--oker   .intro { color: var(--tekst); }

/* Markering: oker vlak in een kop, als tape op de werkbank */
.markering {
  background: var(--actie); color: var(--asfalt);
  padding: 0 12px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ── Knoppen: Oswald caps, rechte hoeken, geen schaduw ── */
.knop {
  display: inline-block;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  cursor: pointer;
  border: 0;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang);
}
.knop--primair { background: var(--actie); color: var(--asfalt); }
.knop--primair:hover { background: var(--asfalt); color: var(--actie); }
.knop--omlijnd { background: transparent; color: var(--tekst); border: 3px solid currentColor; padding: 13px 25px; }
.knop--omlijnd:hover { background: var(--asfalt); color: var(--werkbank); border-color: var(--asfalt); }
.sectie--donker .knop--omlijnd { color: var(--tekst-op-donker); border-color: var(--potlood); }
.sectie--donker .knop--omlijnd:hover { background: var(--werkbank); color: var(--asfalt); border-color: var(--werkbank); }

.tekstlink {
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 4px solid var(--actie);
  padding-bottom: 2px;
  transition: color var(--overgang), border-color var(--overgang);
}
.tekstlink:hover { border-color: var(--signaal); }
.sectie--donker .tekstlink { color: var(--tekst-op-donker); }
.sectie--donker .tekstlink:hover { color: var(--actie); border-color: var(--actie); }