/* ============================================
   LIFE ENGINEERING — Globale stijlen
   ============================================ */

/* --- Reset & basis --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Kleuren */
  --kleur-achtergrond:  #F5F4F0;
  --kleur-wit:          #FFFFFF;
  --kleur-tekst:        #1A1A18;
  --kleur-subtekst:     #5A5A52;
  --kleur-accent:       #C84B2F;
  --kleur-accent-licht: #F2E8E4;
  --kleur-lijn:         #DDDDD5;
  --kleur-donker:       #111110;
  --kleur-kaart:        #FFFFFF;

  /* Typografie */
  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Schaal */
  --tekst-xs:   0.75rem;
  --tekst-sm:   0.875rem;
  --tekst-base: 1rem;
  --tekst-lg:   1.125rem;
  --tekst-xl:   1.375rem;
  --tekst-2xl:  1.75rem;
  --tekst-3xl:  2.25rem;
  --tekst-4xl:  3rem;
  --tekst-5xl:  4rem;

  /* Ruimte */
  --ruimte-xs:  0.5rem;
  --ruimte-sm:  1rem;
  --ruimte-md:  1.5rem;
  --ruimte-lg:  2.5rem;
  --ruimte-xl:  4rem;
  --ruimte-2xl: 6rem;
  --ruimte-3xl: 9rem;

  /* Containers */
  --max-breed:    1140px;
  --max-artikel:  720px;

  /* Overig */
  --radius: 4px;
  --schaduw: 0 2px 12px rgba(0,0,0,0.08);
  --overgang: 0.18s ease;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--tekst-base);
  line-height: 1.7;
  color: var(--kleur-tekst);
  background-color: var(--kleur-achtergrond);
  -webkit-font-smoothing: antialiased;
}

/* --- Typografie --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--kleur-tekst);
  font-weight: normal;
}

h1 { font-size: var(--tekst-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--tekst-3xl); letter-spacing: -0.01em; }
h3 { font-size: var(--tekst-2xl); }
h4 { font-size: var(--tekst-xl); }
h5 { font-size: var(--tekst-lg); }

p { margin-bottom: var(--ruimte-sm); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--kleur-accent);
  text-decoration: none;
  transition: opacity var(--overgang);
}
a:hover { opacity: 0.75; text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { font-weight: 600; }
em { font-style: italic; }

ul, ol {
  padding-left: 1.4rem;
  margin-bottom: var(--ruimte-sm);
}
li { margin-bottom: 0.3rem; }

/* --- Layout containers --- */
.container {
  width: 100%;
  max-width: var(--max-breed);
  margin: 0 auto;
  padding: 0 var(--ruimte-md);
}

.container--smal {
  max-width: var(--max-artikel);
  margin: 0 auto;
  padding: 0 var(--ruimte-md);
}

/* --- Navigatie --- */
.nav {
  background: var(--kleur-donker);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--ruimte-md);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--tekst-lg);
  color: var(--kleur-wit);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__logo span {
  color: var(--kleur-accent);
}
.nav__logo:hover { opacity: 0.85; text-decoration: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--ruimte-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__links a {
  color: rgba(255,255,255,0.75);
  font-size: var(--tekst-sm);
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color var(--overgang);
}
.nav__links a:hover,
.nav__links a.actief { color: var(--kleur-wit); text-decoration: none; }
.nav__links a.actief { border-bottom: 2px solid var(--kleur-accent); padding-bottom: 2px; }

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--kleur-wit);
  transition: transform var(--overgang), opacity var(--overgang);
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobiel menu */
.nav__mobiel {
  display: none;
  background: var(--kleur-donker);
  padding: var(--ruimte-sm) var(--ruimte-md) var(--ruimte-md);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.nav__mobiel.open { display: block; }
.nav__mobiel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__mobiel li { border-bottom: 1px solid rgba(255,255,255,0.07); }
.nav__mobiel a {
  display: block;
  padding: 0.75rem 0;
  color: rgba(255,255,255,0.85);
  font-size: var(--tekst-base);
  text-decoration: none;
}
.nav__mobiel a:hover { color: var(--kleur-wit); text-decoration: none; }

/* --- Hero --- */
.hero {
  background: var(--kleur-donker);
  color: var(--kleur-wit);
  padding: var(--ruimte-3xl) 0 var(--ruimte-2xl);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 80px
    );
  pointer-events: none;
}

.hero__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-accent);
  margin-bottom: var(--ruimte-md);
  border: 1px solid var(--kleur-accent);
  padding: 4px 10px;
  border-radius: var(--radius);
}

.hero__kop {
  font-size: clamp(2.2rem, 5vw, var(--tekst-5xl));
  color: var(--kleur-wit);
  max-width: 14ch;
  margin-bottom: var(--ruimte-md);
  line-height: 1.1;
}

.hero__kop em {
  color: var(--kleur-accent);
  font-style: normal;
}

.hero__intro {
  font-size: var(--tekst-xl);
  color: rgba(255,255,255,0.72);
  max-width: 52ch;
  margin-bottom: var(--ruimte-lg);
  line-height: 1.6;
}

.hero__ctas {
  display: flex;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* --- Knoppen --- */
.knop {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--tekst-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang), opacity var(--overgang);
  border: 2px solid transparent;
  white-space: nowrap;
}

.knop--primair {
  background: var(--kleur-accent);
  color: var(--kleur-wit);
  border-color: var(--kleur-accent);
}
.knop--primair:hover { opacity: 0.88; text-decoration: none; color: var(--kleur-wit); }

.knop--omlijnd {
  background: transparent;
  color: var(--kleur-wit);
  border-color: rgba(255,255,255,0.4);
}
.knop--omlijnd:hover {
  border-color: var(--kleur-wit);
  background: rgba(255,255,255,0.08);
  text-decoration: none;
  color: var(--kleur-wit);
}

.knop--donker {
  background: var(--kleur-donker);
  color: var(--kleur-wit);
  border-color: var(--kleur-donker);
}
.knop--donker:hover { opacity: 0.82; text-decoration: none; color: var(--kleur-wit); }

/* --- Secties --- */
.sectie {
  padding: var(--ruimte-2xl) 0;
}

.sectie--licht { background: var(--kleur-achtergrond); }
.sectie--wit   { background: var(--kleur-wit); }
.sectie--donker {
  background: var(--kleur-donker);
  color: var(--kleur-wit);
}
.sectie--donker h2,
.sectie--donker h3,
.sectie--donker p { color: inherit; }

.sectie__label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-accent);
  margin-bottom: var(--ruimte-xs);
}

.sectie__kop {
  margin-bottom: var(--ruimte-md);
}

.sectie__intro {
  font-size: var(--tekst-lg);
  color: var(--kleur-subtekst);
  max-width: 60ch;
  margin-bottom: var(--ruimte-lg);
  line-height: 1.65;
}

/* --- Kaarten grid --- */
.kaarten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ruimte-md);
}

.kaart {
  background: var(--kleur-kaart);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-md) var(--ruimte-lg);
  transition: box-shadow var(--overgang), transform var(--overgang);
}

.kaart:hover {
  box-shadow: var(--schaduw);
  transform: translateY(-2px);
}

.kaart__label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--ruimte-xs);
}

.kaart__titel {
  font-family: var(--font-display);
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-xs);
  line-height: 1.25;
}

.kaart__tekst {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtekst);
  line-height: 1.6;
  margin-bottom: var(--ruimte-sm);
}

.kaart__link {
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--kleur-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kaart__link::after { content: ' →'; }
.kaart__link:hover { text-decoration: underline; }

/* --- Pijler blokken --- */
.pijlers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-md);
  margin-top: var(--ruimte-lg);
}

.pijler {
  border-top: 3px solid var(--kleur-accent);
  padding-top: var(--ruimte-md);
}

.pijler__nummer {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--ruimte-xs);
}

.pijler__titel {
  font-size: var(--tekst-lg);
  margin-bottom: 0.6rem;
}

.pijler__tekst {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtekst);
  line-height: 1.65;
}

/* --- Lead magnet banner --- */
.lead-banner {
  background: var(--kleur-accent-licht);
  border: 1px solid var(--kleur-accent);
  border-radius: var(--radius);
  padding: var(--ruimte-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-lg);
  flex-wrap: wrap;
}

.lead-banner__tekst { flex: 1 1 300px; }

.lead-banner__tekst h3 {
  font-size: var(--tekst-xl);
  margin-bottom: 0.5rem;
}

.lead-banner__tekst p {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtekst);
  margin-bottom: 0;
}

.lead-banner__actie {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* --- Nieuwsbrief formulier --- */
.nieuwsbrief-form {
  display: flex;
  gap: var(--ruimte-xs);
  flex-wrap: wrap;
  margin-top: var(--ruimte-sm);
}

.nieuwsbrief-form input[type="email"] {
  flex: 1 1 240px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  font-size: var(--tekst-sm);
  font-family: var(--font-body);
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
}

.nieuwsbrief-form input[type="email"]:focus {
  outline: 2px solid var(--kleur-accent);
  border-color: transparent;
}

/* --- Voettekst --- */
.footer {
  background: var(--kleur-donker);
  color: rgba(255,255,255,0.6);
  padding: var(--ruimte-xl) 0 var(--ruimte-lg);
  margin-top: var(--ruimte-2xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--ruimte-lg);
  margin-bottom: var(--ruimte-lg);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--tekst-lg);
  color: var(--kleur-wit);
  margin-bottom: var(--ruimte-xs);
}
.footer__logo span { color: var(--kleur-accent); }

.footer__omschrijving {
  font-size: var(--tekst-sm);
  line-height: 1.65;
  max-width: 30ch;
}

.footer__kolom h4 {
  font-family: var(--font-body);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.75rem;
}

.footer__kolom ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__kolom li { margin-bottom: 0.5rem; }
.footer__kolom a {
  color: rgba(255,255,255,0.6);
  font-size: var(--tekst-sm);
  text-decoration: none;
  transition: color var(--overgang);
}
.footer__kolom a:hover { color: var(--kleur-wit); text-decoration: none; }

.footer__bodem {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--ruimte-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ruimte-sm);
  flex-wrap: wrap;
}

.footer__bodem p {
  font-size: var(--tekst-xs);
  margin: 0;
  color: rgba(255,255,255,0.35);
}

/* --- Paginahoofd (binnenste pagina's) --- */
.paginahoofd {
  background: var(--kleur-donker);
  color: var(--kleur-wit);
  padding: var(--ruimte-2xl) 0 var(--ruimte-xl);
}

.paginahoofd__label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--ruimte-xs);
}

.paginahoofd__kop {
  color: var(--kleur-wit);
  font-size: clamp(1.8rem, 4vw, var(--tekst-4xl));
  max-width: 20ch;
  margin-bottom: var(--ruimte-sm);
}

.paginahoofd__intro {
  font-size: var(--tekst-lg);
  color: rgba(255,255,255,0.68);
  max-width: 55ch;
  line-height: 1.65;
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: var(--tekst-xs);
  color: var(--kleur-subtekst);
  margin-bottom: var(--ruimte-lg);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--kleur-subtekst); }
.breadcrumb span { color: var(--kleur-lijn); }

/* --- Divider --- */
.divider {
  border: none;
  border-top: 1px solid var(--kleur-lijn);
  margin: var(--ruimte-lg) 0;
}

/* --- Labels / tags --- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--kleur-accent-licht);
  color: var(--kleur-accent);
}

/* --- Werkboek / product kaart --- */
.product-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--overgang);
}
.product-kaart:hover { box-shadow: var(--schaduw); }

.product-kaart__hoofd {
  background: var(--kleur-donker);
  padding: var(--ruimte-md) var(--ruimte-lg);
  color: var(--kleur-wit);
}

.product-kaart__prijs {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.product-kaart__titel {
  color: var(--kleur-wit);
  font-size: var(--tekst-xl);
  line-height: 1.2;
}

.product-kaart__body {
  padding: var(--ruimte-md) var(--ruimte-lg);
}

.product-kaart__body p {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtekst);
  margin-bottom: var(--ruimte-sm);
}

.product-kaart__lijst {
  list-style: none;
  padding: 0;
  margin-bottom: var(--ruimte-md);
}
.product-kaart__lijst li {
  font-size: var(--tekst-sm);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--kleur-lijn);
  color: var(--kleur-tekst);
  display: flex;
  gap: 0.5rem;
}
.product-kaart__lijst li::before {
  content: '→';
  color: var(--kleur-accent);
  flex-shrink: 0;
}

/* --- Tool blokken --- */
.tool-sectie {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-lg);
  margin-bottom: var(--ruimte-md);
}

.tool-sectie h3 {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-xs);
}

.tool-sectie p {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtekst);
  margin-bottom: var(--ruimte-sm);
}

.checklist {
  list-style: none;
  padding: 0;
}
.checklist li {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--kleur-lijn);
  font-size: var(--tekst-sm);
  align-items: flex-start;
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
  content: '☐';
  color: var(--kleur-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Overig hulpklassen --- */
.tekst-midden { text-align: center; }
.tekst-subtiel { color: var(--kleur-subtekst); font-size: var(--tekst-sm); }
.marge-top { margin-top: var(--ruimte-lg); }
.marge-onder { margin-bottom: var(--ruimte-lg); }
.verborgen { display: none; }

/* --- Responsive --- */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  .pijlers { grid-template-columns: 1fr; }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte-md);
  }
}

@media (max-width: 640px) {
  :root {
    --ruimte-2xl: 4rem;
    --ruimte-3xl: 5rem;
  }

  h1 { font-size: var(--tekst-3xl); }
  h2 { font-size: var(--tekst-2xl); }

  .hero { padding: var(--ruimte-2xl) 0 var(--ruimte-xl); }
  .hero__intro { font-size: var(--tekst-base); }

  .kaarten-grid { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr; }

  .lead-banner { flex-direction: column; }

  .nieuwsbrief-form { flex-direction: column; }
  .nieuwsbrief-form input[type="email"],
  .nieuwsbrief-form .knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================
   UPDATE 2026 — mobiel, toegankelijkheid, nieuwe componenten
   ============================================ */

/* Kleurschema: site is bewust licht; voorkom dat browsers formulieren/scrollbars donker maken */
:root { color-scheme: light; }

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

/* Skiplink voor toetsenbord- en schermlezergebruikers */
.skiplink {
  position: absolute;
  left: var(--ruimte-sm);
  top: -100px;
  z-index: 1000;
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: var(--schaduw);
}
.skiplink:focus { top: var(--ruimte-xs); text-decoration: none; opacity: 1; }
#inhoud { scroll-margin-top: 72px; }
#inhoud:focus { outline: none; }

/* Zichtbare focus op álle interactieve elementen (WCAG 2.2 — 2.4.7 / 2.4.11) */
button:focus-visible,
.knop:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--kleur-accent);
  outline-offset: 3px;
}
.nav a:focus-visible, .footer a:focus-visible { outline-color: var(--kleur-wit); }

/* Tekst-links in lopende tekst onderstrepen (niet alleen kleur als signaal) */
main p a:not(.knop):not(.kaart__link),
main li a:not(.knop):not(.kaart__link) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hamburger: groter raakvlak (min. 44x44px) */
.nav__hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Contrast: accentkleur iets donkerder voor kleine tekst op licht vlak (AA 4.5:1) */
.sectie--licht .sectie__label,
.sectie--wit .sectie__label,
.kaart__label,
.breadcrumb a { color: #A93C22; }
.sectie--donker .kaart__label { color: var(--kleur-accent); }

/* Hulpklassen */
.tekst-klein { font-size: var(--tekst-xs); color: var(--kleur-subtekst); margin-top: 0.5rem; }
.knop--blok { display: block; width: 100%; text-align: center; }

/* Twee-koloms layout die op mobiel stapelt */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-xl);
  align-items: start;
}
.grid-2--midden { gap: 4rem; align-items: center; }
.grid-2--smal { gap: var(--ruimte-md); align-items: stretch; }

@media (min-width: 861px) {
  .koopkaart { position: sticky; top: 80px; }
}

@media (max-width: 860px) {
  .grid-2,
  .grid-2--midden { grid-template-columns: 1fr; gap: var(--ruimte-lg); }
  /* Oude inline 2/3-koloms grids stapelen op smalle schermen */
  [style*="grid-template-columns:1fr"]:not(.matrix-2x2) { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .grid-2--smal { grid-template-columns: 1fr; }
  .knop { white-space: normal; }
  .hero__ctas .knop { width: 100%; text-align: center; }
  .footer__bodem { flex-direction: column; align-items: flex-start; }
}

/* Juridische pagina's */
.juridisch h2 { font-size: var(--tekst-2xl); margin: var(--ruimte-lg) 0 var(--ruimte-sm); }
.juridisch h2:first-child { margin-top: 0; }
.juridisch table { width: 100%; border-collapse: collapse; margin-bottom: var(--ruimte-md); font-size: var(--tekst-sm); }
.juridisch th, .juridisch td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--kleur-lijn); vertical-align: top; }
.juridisch th { font-weight: 600; }
.juridisch .bijgewerkt { font-size: var(--tekst-xs); color: var(--kleur-subtekst); font-family: var(--font-mono); }

/* Print: artikelen en tools netjes printen */
@media print {
  .nav, .footer, .skiplink, .hero__ctas, .lead-banner { display: none !important; }
  body { background: #fff; color: #000; }
  .paginahoofd, .artikel-hoofd, .hero, .sectie--donker { background: #fff !important; color: #000 !important; }
  .paginahoofd *, .artikel-hoofd *, .hero * { color: #000 !important; }
  a { color: #000; }
}
.footer__bodem a { color: rgba(255,255,255,0.55); }
.footer__bodem a:hover { color: var(--kleur-wit); }
.tabel-wrap { overflow-x: auto; margin-bottom: var(--ruimte-md); }
.tabel-wrap table { min-width: 560px; margin-bottom: 0; }

/* Contrast (WCAG AA): accent als tekstkleur iets donkerder op licht, lichter op donker.
   Knoppen houden de merkkleur. */
:root { --kleur-accent: #B03F26; }
.nav, .hero, .paginahoofd, .artikel-hoofd, .sectie--donker, .footer,
[style*="background:var(--kleur-donker)"] { --kleur-accent: #E2694B; }
.knop--primair { background: #C84B2F; border-color: #C84B2F; }

/* Geen lichte strook tussen laatste donkere sectie en footer */
.footer { margin-top: 0; }

/* Contrast-fixes kleine tekst op donker */
.footer__kolom h4 { color: rgba(255,255,255,0.62); }
.footer__bodem p { color: rgba(255,255,255,0.6); }
.footer__bodem a { color: rgba(255,255,255,0.72); }
.product-kaart__hoofd { --kleur-accent: #E2694B; }
.paginahoofd .breadcrumb, .paginahoofd .breadcrumb a,
.artikel-hoofd .breadcrumb, .artikel-hoofd .breadcrumb a { color: rgba(255,255,255,0.7); }
[style*="rgba(255,255,255,0.4)"], [style*="rgba(255,255,255,0.35)"] { color: rgba(255,255,255,0.65) !important; }
/* "Binnenkort"-kaarten: niet via opacity dimmen (maakt tekst onleesbaar) */
.kaart[style*="opacity"] { opacity: 1 !important; background: var(--kleur-achtergrond); border-style: dashed; }
.artikel-hoofd .artikel-hoofd__datum { color: rgba(255,255,255,0.65); }

/* --- Citaat-band (kernprincipe) --- */
.citaat-band {
  background: var(--kleur-donker);
  color: var(--kleur-wit);
  padding: var(--ruimte-xl) 0;
  --kleur-accent: #E2694B;
}
.citaat { margin: 0; max-width: 40ch; border-left: 3px solid var(--kleur-accent); padding-left: var(--ruimte-md); }
.citaat blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--kleur-wit);
  margin-bottom: var(--ruimte-sm);
}
.citaat blockquote em { color: var(--kleur-accent); font-style: italic; }
.citaat figcaption {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}
.citaat__uitleg {
  max-width: 60ch;
  margin-top: var(--ruimte-md);
  color: rgba(255,255,255,0.75);
  font-size: var(--tekst-lg);
}

/* --- Hero met Loop-schema --- */
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--ruimte-xl); align-items: center; position: relative; }
.hero__visual { margin: 0; }
.hero__visual .loop { width: 100%; height: auto; max-width: 560px; display: block; margin-left: auto; }
.hero__noot { margin-top: var(--ruimte-sm); font-family: var(--font-mono); font-size: var(--tekst-xs); color: rgba(255,255,255,0.65); letter-spacing: 0.04em; }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--ruimte-lg); }
  .hero__visual .loop { max-width: 420px; margin: 0 auto; }
}

/* --- Wie maakt dit --- */
.maker { display: grid; grid-template-columns: 120px 1fr; gap: var(--ruimte-lg); align-items: start; }
.maker__avatar { width: 120px; height: 120px; }
.maker__kop { font-size: var(--tekst-2xl); margin-bottom: var(--ruimte-sm); }
@media (max-width: 640px) {
  .maker { grid-template-columns: 1fr; gap: var(--ruimte-md); }
  .maker__avatar { width: 88px; height: 88px; }
}