/* Woordenschat — Krachtig & uitgesproken
   ----------------------------------------------------------------------
   Taal, geen indeling. Alle kleuren uit kit-tokens.css.

   Het kenmerk: het accent is geen randje maar een vlak. Minstens één
   sectie loopt volledig in de accentkleur van rand tot rand, met de kop
   er groot in. Breng je de kleur terug tot een lijntje, dan heb je deze
   stijl niet gebouwd.
   ---------------------------------------------------------------------- */

.kleurvlak {
  background: var(--accent);
  color: var(--accent-ink);
}
.kleurvlak a { color: var(--accent-ink); }
.kleurvlak .streeplijn { background: var(--accent-ink); }

.kop-groot {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: var(--trap-1);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}

/* De knop keert om naar zijn ondergrond: op het kleurvlak wit met
   accentletter, daarbuiten accent met witte letter. */
.knop-contrast {
  display: inline-block;
  font-family: var(--letter-tekst);
  font-weight: 700;
  font-size: var(--trap-5);
  text-decoration: none;
  padding: 16px 30px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-ink);
  background: var(--accent);
  transition: transform var(--duur) var(--curve), background-color var(--duur) var(--curve),
              color var(--duur) var(--curve);
}
.kleurvlak .knop-contrast {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--accent);
}
.knop-contrast-leeg { background: transparent; color: var(--accent); }
.kleurvlak .knop-contrast-leeg { background: transparent; color: var(--accent-ink); }
.knop-contrast:hover, .knop-contrast:focus-visible { transform: translateY(-3px); }
.knop-contrast:active { transform: translateY(0) scale(.98); }

.witkader { border: 2px solid var(--accent-ink); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); }

.randlinks {
  border-left: var(--accent-lijn) solid var(--accent);
  padding-left: calc(var(--eenheid) * 3);
}

.blokcijfer {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: clamp(60px, 10vw, 140px);
  line-height: .85;
  color: var(--accent);
}
.kleurvlak .blokcijfer { color: var(--accent-ink); }

/* Doorsnijding: een accentvlak dat over de grens van twee secties valt,
   zodat de overgang niet als een streep leest. */
.doorsnijding {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(-96px, -7vw, -40px);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
}

.streeplijn { height: var(--accent-lijn); border: 0; margin: 0; background: var(--accent); width: clamp(56px, 8vw, 120px); }

.vinklijst { list-style: none; margin: 0; padding: 0; }
.vinklijst li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--eenheid) * 2);
  padding: calc(var(--eenheid) * 1.5) 0;
  border-bottom: 1px solid var(--lijn);
  font-weight: 600;
}
.vinklijst li::before {
  content: "";
  width: 12px; height: 12px;
  flex-shrink: 0;
  background: var(--accent);
}
.kleurvlak .vinklijst li { border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); }
.kleurvlak .vinklijst li::before { background: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
[data-beweging="uit"] *, [data-beweging="uit"] *::before, [data-beweging="uit"] *::after {
  animation: none !important; transition: none !important;
}
[data-beweging="uit"] [data-reveal] { opacity: 1 !important; }