/* ==========================================================================
   Koolmonoxide.nl — prototype stylesheet
   Alle waarden komen uit de Figma-variables en text styles van het
   designbestand (Project Semantic Colors / Project Layout / Project Primitives).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Achtergrond en oppervlak */
  --bg-default: #f4f6f9;
  --bg-alternate: #ffffff;
  --bg-brand-subtle: #f6f7fe;
  --bg-secondary-subtle: #f4fcff;
  --bg-accent-subtle: #f3fefd;
  --bg-inverse: #23262e;
  --surface-default: #ffffff;
  --surface-subtle: #f4f6f9;
  --surface-card-subtle: #fafbfc;
  --surface-accent-subtle: #ddfbf8;
  --surface-primary-subtle: #edf0fe;
  --surface-inverse: #23262e;
  --surface-disabled: #eaecf2;

  /* Tekst */
  --text-primary: #23262e;
  --text-secondary: #565b68;
  --text-inverse: #ffffff;
  --text-brand: #3646ab;
  --text-brand-secondary: #18668c;
  --text-accent: #046059;
  --text-success: #20553c;
  --text-error: #7a271a;
  --text-disabled: #9da2b2;

  /* Links */
  --link-default: #4d64f4;
  --link-hover: #3646ab;
  --link-pressed: #2a3786;

  /* Iconen */
  --icon-primary: #23262e;
  --icon-secondary: #565b68;
  --icon-inverse: #ffffff;
  --icon-brand: #4d64f4;
  --icon-accent: #0e7d74;

  /* Randen */
  --border-subtle: #d5d9e2;
  --border-default: #bcc1cf;
  --border-strong: #6f7482;
  --border-brand: #4d64f4;
  --border-focus: #4d64f4;
  --border-error: #b42318;

  /* Acties */
  --btn-primary-bg: #4d64f4;
  --btn-primary-bg-hover: #3b50d6;
  --btn-primary-bg-pressed: #3646ab;
  --btn-primary-label: #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-bg-hover: #f6f7fe;
  --btn-secondary-bg-pressed: #edf0fe;
  --btn-secondary-label: #23262e;
  --btn-secondary-border: #d5d9e2;
  --btn-disabled-bg: #d5d9e2;
  --btn-disabled-label: #6f7482;

  /* Chips */
  --chip-neutral-bg: #ffffff;
  --chip-neutral-text: #23262e;
  --chip-neutral-border: #d5d9e2;
  --chip-primary-bg: #edf0fe;
  --chip-primary-text: #3646ab;
  --chip-primary-border: #d2d8fc;
  --chip-accent-bg: #ddfbf8;
  --chip-accent-text: #0e7d74;
  --chip-accent-border: #c2fbf7;

  /* Controls */
  --control-bg: #ffffff;
  --control-border: #d5d9e2;
  --control-border-hover: #bcc1cf;
  --control-border-focus: #4d64f4;
  --control-text: #23262e;
  --control-placeholder: #6f7482;

  /* Navigatie */
  --nav-text: #23262e;
  --nav-text-hover: #4d64f4;
  --nav-text-active: #3646ab;
  --nav-bg-hover: #f6f7fe;
  --nav-bg-active: #edf0fe;

  /* Selected */
  --selected-bg: #edf0fe;
  --selected-border: #4d64f4;
  --selected-icon: #4d64f4;

  /* Aanbieding */
  --offer-bg: #e7f5fe;
  --offer-border: #c2e6fa;
  --offer-text: #23262e;

  /* Highlight (in 30 seconden) */
  --highlight-bg: #ddfbf8;
  --highlight-border: #07a79b;
  --highlight-text: #046059;

  /* Footer */
  --footer-text: #d5d9e2;
  --footer-text-muted: #9da2b2;
  --footer-divider: #42454f;

  /* Overlay */
  --overlay-scrim: rgba(0, 0, 0, 0.4);

  /* Spacing */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-120: 120px;

  /* Radius */
  --radius-small: 4px;
  --radius-default: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-chip: 6px;
  --radius-control: 10px;
  --radius-full: 999px;

  /* Layout — desktopwaarden */
  --content-max: 1200px;
  --article-max: 800px;
  --page-padding-x: 32px;
  --content-gap: 32px;
  --column-gap: 24px;
  --header-height: 76px;
  --touch-min: 44px;
  --table-min: 960px;
  --pad-compact: 48px;
  --pad-default: 72px;
  --pad-spacious: 88px;
  --pad-accent: 80px;
  --pad-end: 96px;
  --title-pad-top: 64px;
  --title-pad-bottom: 40px;
  --card-padding: 24px;
  --card-gap: 16px;
  --task-card-min-h: 104px;

  /* Typografie */
  --font-heading: "Doppio One", "Trebuchet MS", sans-serif;
  --font-body: "Noto Sans", -apple-system, "Segoe UI", sans-serif;

  /* Schaduwen */
  --shadow-card: 0 2px 0 rgba(35, 38, 46, 0.08);
  --shadow-header: 0 2px 0 rgba(35, 38, 46, 0.06);
}

/* Mobiele layoutwaarden — komen uit de Mobile-mode van Project Layout */
@media (max-width: 900px) {
  :root {
    --content-max: 358px;
    --article-max: 358px;
    --page-padding-x: 16px;
    --content-gap: 24px;
    --column-gap: 16px;
    --header-height: 64px;
    --pad-compact: 32px;
    --pad-default: 48px;
    --pad-spacious: 56px;
    --pad-accent: 56px;
    --pad-end: 64px;
    --title-pad-top: 48px;
    --title-pad-bottom: 32px;
    --task-card-min-h: 0px;
  }
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link-default); }
a:hover { color: var(--link-hover); }
a:active { color: var(--link-pressed); }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

button { font: inherit; cursor: pointer; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Typografie — 1:1 met de Figma text styles
   -------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .display {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0;
  color: var(--text-primary);
}
.display { font-size: 64px; line-height: 72px; letter-spacing: -0.01em; }
.h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.01em; }
.h2 { font-size: 40px; line-height: 48px; letter-spacing: -0.005em; }
.h3 { font-size: 32px; line-height: 40px; }
.h4 { font-size: 24px; line-height: 32px; }
.h5 { font-size: 20px; line-height: 28px; }

@media (max-width: 900px) {
  .display { font-size: 40px; line-height: 48px; letter-spacing: -0.005em; }
  .h1 { font-size: 36px; line-height: 44px; letter-spacing: -0.005em; }
  .h2 { font-size: 30px; line-height: 38px; letter-spacing: 0; }
  .h3 { font-size: 24px; line-height: 32px; }
  .h4 { font-size: 20px; line-height: 28px; }
  .h5 { font-size: 18px; line-height: 26px; }
}

.body-l { font-size: 20px; line-height: 32px; margin: 0; }
.body   { font-size: 18px; line-height: 28px; margin: 0; }
.body-s { font-size: 16px; line-height: 24px; margin: 0; }
.body-strong   { font-size: 18px; line-height: 28px; font-weight: 600; margin: 0; }
.body-strong-s { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.meta   { font-size: 14px; line-height: 20px; margin: 0; }
.meta-s { font-size: 12px; line-height: 16px; margin: 0; }
.overline {
  font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.ui-label   { font-size: 16px; line-height: 24px; font-weight: 600; }
.ui-label-s { font-size: 14px; line-height: 20px; font-weight: 600; }

.text-secondary { color: var(--text-secondary); }
.text-primary { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.section {
  padding-inline: var(--page-padding-x);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section--alt { background: var(--bg-alternate); }

.section--title    { padding-block: var(--title-pad-top) var(--title-pad-bottom); }
.section--compact  { padding-block: var(--pad-compact); }
.section--default  { padding-block: var(--pad-default); }
.section--spacious { padding-block: var(--pad-spacious); }
.section--accent   { padding-block: var(--pad-accent); }
.section--end      { padding-block: var(--pad-default) var(--pad-end); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--pt-compact { padding-top: var(--pad-compact); }
.section--pb-compact { padding-bottom: var(--pad-compact); }
.section--pb-spacious { padding-bottom: var(--pad-spacious); }
.section--pb-default { padding-bottom: var(--pad-default); }

.container {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.article {
  width: 100%;
  max-width: var(--article-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.stack-16 { display: flex; flex-direction: column; gap: var(--space-16); }
.stack-8  { display: flex; flex-direction: column; gap: var(--space-8); }
.row-8    { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.row-12   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }

/* minmax(0, 1fr) zodat een lange knoplabel of kop de kolom niet kan oprekken;
   zonder dit lopen de kaarten tussen 900 en 1100px buiten de container. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--column-gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); }
.grid-3 > *, .grid-2 > * { min-width: 0; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3--keep-2-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.section-header { display: flex; flex-direction: column; gap: var(--space-12); }
/* Geen breedtelimiet: in het design lopen kop en beschrijving over de volle
   containerbreedte en passen ze allebei op één regel. */
.section-header p { color: var(--text-secondary); }
.section-header-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24);
}
@media (max-width: 900px) {
  .section-header-row { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-default);
  box-shadow: var(--shadow-header);
  min-height: var(--header-height);
  padding-inline: var(--page-padding-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo svg { height: 24px; width: auto; }
@media (max-width: 900px) { .logo svg { height: 18px; } }

.nav-cta-group { display: flex; align-items: center; gap: var(--space-24); }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav a {
  display: inline-flex; align-items: center;
  padding: var(--space-12) var(--space-8);
  font-size: 16px; line-height: 24px;
  color: var(--nav-text); text-decoration: none;
  border-radius: var(--radius-small);
}
.nav a:hover { color: var(--nav-text-hover); background: var(--nav-bg-hover); }
.nav a[aria-current="page"] { color: var(--nav-text-active); background: var(--nav-bg-active); font-weight: 600; }

.header-mobile-actions { display: none; align-items: center; gap: var(--space-8); }
.hamburger {
  width: var(--touch-min); height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-small);
  color: var(--icon-primary);
}
.hamburger:hover { background: var(--nav-bg-hover); }

@media (max-width: 900px) {
  .nav-cta-group { display: none; }
  .header-mobile-actions { display: flex; }
}

/* Mobiel paneel */
.mobile-nav {
  position: fixed; inset: 0; z-index: 50;
  background: var(--overlay-scrim);
  display: none;
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__panel {
  position: absolute; inset: 0 0 auto 0;
  background: var(--surface-default);
  padding: var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-8);
  box-shadow: var(--shadow-card);
}
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav a {
  padding: var(--space-12) var(--space-8);
  font-size: 18px; line-height: 28px;
  color: var(--nav-text); text-decoration: none;
  border-radius: var(--radius-small);
  min-height: var(--touch-min);
  display: flex; align-items: center;
}
.mobile-nav a[aria-current="page"] { color: var(--nav-text-active); background: var(--nav-bg-active); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Buttons, links, chips
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  padding: 16px 28px;
  border-radius: var(--radius-control);
  font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none; border: 0;
  min-height: 56px;
  transition: background-color .12s ease;
}
.btn--small { padding: 12px 20px; min-height: 48px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-label); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-label); }
.btn--primary:active { background: var(--btn-primary-bg-pressed); }
.btn--secondary {
  background: var(--btn-secondary-bg); color: var(--btn-secondary-label);
  border: 1px solid var(--btn-secondary-border);
}
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--border-brand); color: var(--link-default); }
.btn[disabled], .btn--disabled {
  background: var(--btn-disabled-bg); color: var(--btn-disabled-label);
  pointer-events: none;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn .ic { font-size: 16px; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-size: 18px; line-height: 28px; font-weight: 600;
  color: var(--link-default); text-decoration: underline;
}
.text-link--small { font-size: 16px; line-height: 24px; }
.text-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.text-link:hover { color: var(--link-hover); }

.chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-chip);
  font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent;
}
.chip--neutral { background: var(--chip-neutral-bg); color: var(--chip-neutral-text); border-color: var(--chip-neutral-border); }
.chip--primary { background: var(--chip-primary-bg); color: var(--chip-primary-text); border-color: var(--chip-primary-border); }
.chip--accent  { background: var(--chip-accent-bg);  color: var(--chip-accent-text);  border-color: var(--chip-accent-border); }

/* --------------------------------------------------------------------------
   7. Kaarten
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  overflow: visible;
}
.card__body {
  padding: var(--card-padding);
  padding-bottom: var(--card-gap);
  display: flex; flex-direction: column; gap: var(--space-8);
  flex: 1;
}
.card__footer {
  padding: 0 var(--card-padding) var(--card-padding);
  display: flex; flex-direction: column; gap: var(--space-12);
}
.card__title { color: var(--text-primary); }
.card__teaser { color: var(--text-secondary); }
.card__date { color: var(--text-secondary); }

.placeholder-img {
  background: var(--surface-disabled);
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  min-height: 190px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 14px;
}
.placeholder-img--tall { min-height: 240px; }
.placeholder-img--inline { border-radius: var(--radius-default); min-height: 320px; }
@media (max-width: 900px) { .placeholder-img--inline { min-height: 200px; } }

/* Productkaart */
.product-card .card__body { gap: var(--space-12); }
.product-card .points { display: flex; flex-direction: column; gap: var(--space-8); }
.product-card .price { margin-top: auto; }

/* Taakkaart */
.task-card {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  min-height: var(--task-card-min-h);
  display: flex; align-items: center; gap: var(--card-gap);
  text-decoration: none; color: var(--text-primary);
}
.task-card:hover { color: var(--link-default); }
.icon-tile {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-default);
  background: var(--bg-brand-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-brand);
}
.icon-tile svg { width: 24px; height: 24px; }
/* Lange samenstellingen als 'Koolmonoxidevergiftiging' passen tussen 900 en 1150px
   niet naast icoon en pijl; afbreken op lettergreep in plaats van buiten de kaart lopen. */
.task-card__title { flex: 1; font-size: 20px; line-height: 28px; font-family: var(--font-heading);
  min-width: 0; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 900px) { .task-card__title { font-size: 18px; line-height: 26px; } }
.task-card__arrow { color: var(--icon-secondary); flex-shrink: 0; }
.task-card__arrow svg,
.task-card__arrow .ic { width: 16px; height: 16px; }

/* USP */
.usp { display: flex; align-items: flex-start; gap: var(--space-12); }
.usp__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-full);
  background: var(--surface-accent-subtle); color: var(--icon-accent);
  display: flex; align-items: center; justify-content: center;
}
.usp__icon svg { width: 20px; height: 20px; }

/* Trust / methodekaart */
.trust-card { display: flex; flex-direction: column; gap: var(--card-gap); }
.trust-card__icon { color: var(--icon-primary); }
.trust-card__icon svg { width: 24px; height: 24px; }
.trust-card p { color: var(--text-secondary); }

/* Merktegel */
.brand-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-decoration: none; }
.brand-tile__logo {
  width: 100%; min-height: 72px;
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-20) var(--space-16);
  font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--text-secondary); text-align: center;
}
.brand-tile:hover .brand-tile__logo { color: var(--link-default); }
.brand-tile__link { color: var(--text-secondary); font-size: 14px; line-height: 20px; }

/* --------------------------------------------------------------------------
   8. Blokken
   -------------------------------------------------------------------------- */
/* In 30 seconden */
.quick-answer {
  background: var(--highlight-bg);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--card-gap);
}
.quick-answer__icon { color: var(--highlight-text); }
.quick-answer__icon svg { width: 24px; height: 24px; }

/* Banner */
.banner {
  background: var(--offer-bg);
  border: 1px solid var(--offer-border);
  border-radius: var(--radius-medium);
  padding: var(--space-28) var(--space-32);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
  color: var(--offer-text);
  width: 100%;
}
.banner--m { padding: var(--space-24); }
.banner--s { padding: var(--space-20); }
.banner__message { display: flex; flex-direction: column; gap: var(--space-8); }
.banner__cta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); flex-shrink: 0; }
.banner__cta .meta { color: var(--text-secondary); }
@media (max-width: 900px) {
  .banner { flex-direction: column; align-items: stretch; padding: var(--space-20); }
  .banner__cta { align-items: stretch; }
  .banner__cta .btn { width: 100%; }
  .banner__cta .meta { text-align: left; }
}

/* Doorverwijsblok */
.referral {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  display: flex; gap: var(--card-gap);
}
.referral__icon { color: var(--icon-brand); flex-shrink: 0; }
.referral__icon svg { width: 24px; height: 24px; }
.referral__content { display: flex; flex-direction: column; gap: var(--space-8); }
.referral__content p { color: var(--text-secondary); }

/* Inhoudsopgave */
.toc {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.toc__title { font-family: var(--font-heading); font-size: 20px; line-height: 28px; }
.toc a {
  display: block; padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-small);
  color: var(--text-secondary); text-decoration: none;
  font-size: 18px; line-height: 28px;
}
.toc a:hover { background: var(--nav-bg-hover); color: var(--link-default); }

/* Trade-off */
.tradeoff {
  background: var(--surface-card-subtle);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--card-gap);
}
.tradeoff__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); }
@media (max-width: 900px) { .tradeoff__cols { grid-template-columns: 1fr; } }
.tradeoff__col { display: flex; flex-direction: column; gap: var(--space-8); }

/* Uitvoeringskaarten (gidspagina) — drie kolommen op desktop, gestapeld op mobiel */
.option-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--column-gap); }
.option-card {
  background: var(--surface-card-subtle);
  border-radius: var(--radius-medium);
  padding: var(--space-20);
  display: flex; flex-direction: column; gap: var(--space-8);
}
@media (max-width: 900px) {
  .option-cards { grid-template-columns: 1fr; gap: var(--space-16); }
}

/* Kostentabel valt op mobiel uiteen in kaarten met label-waardeparen (mobiel design) */
@media (max-width: 900px) {
  .table-scroll table.compare.table--stack { min-width: 0; }
  table.compare.table--stack { border-collapse: separate; border-spacing: 0; }
  table.compare.table--stack,
  table.compare.table--stack tbody,
  table.compare.table--stack tr,
  table.compare.table--stack td { display: block; width: 100%; }
  table.compare.table--stack thead { display: none; }
  table.compare.table--stack tr {
    background: var(--surface-card-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
  }
  table.compare.table--stack tr:last-child { margin-bottom: 0; }
  table.compare.table--stack td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-16);
    border: 0; padding: var(--space-4) 0 0;
    font-size: 16px; line-height: 24px; color: var(--text-primary);
    text-align: right;
  }
  table.compare.table--stack td::before {
    content: attr(data-label);
    font-size: 14px; line-height: 20px; color: var(--text-secondary);
    text-align: left; flex: none;
  }
  table.compare.table--stack td:first-child {
    display: block; padding: 0; text-align: left;
    font-size: 18px; line-height: 26px; font-weight: 600;
  }
  table.compare.table--stack td:first-child::before { content: none; }
  table.compare.table--stack td:last-child { display: none; }
}

/* Kostentabel staat breder dan de tekstkolom, gecentreerd binnen de container */
@media (min-width: 1040px) {
  .article .table-wide { width: auto; margin-inline: -80px; }
}

/* Bronnenblok */
.sources {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--card-gap);
}
.sources__links { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
.sources .meta { color: var(--text-secondary); }

/* Expertblok */
.expert { display: flex; flex-direction: column; gap: var(--card-gap); }
.expert__row { display: flex; align-items: center; gap: var(--card-gap); }
.expert__avatar {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-full);
  background: var(--surface-card-subtle); border: 1px solid var(--border-subtle);
}
.expert p { color: var(--text-secondary); }

/* Lijstitem met icoon */
.list-item { display: flex; align-items: flex-start; gap: var(--space-8); }
.list-item svg,
.list-item .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 5px; }
.list-item .ic { margin-top: 6px; }
.list-item--check svg,
.list-item--check .ic { color: var(--icon-accent); }
.list-item--note svg,
.list-item--note .ic { color: var(--icon-secondary); }
.list-item span { font-size: 18px; line-height: 28px; }
.list-item--small span { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.list { display: flex; flex-direction: column; gap: var(--space-8); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); font-size: 16px; line-height: 24px; }
.breadcrumb a { color: var(--link-default); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb svg,
.breadcrumb .ic { width: 12px; height: 12px; color: var(--icon-secondary); }
.breadcrumb__current { color: var(--text-secondary); }
.breadcrumb--mobile { display: none; }
@media (max-width: 900px) {
  .breadcrumb--desktop { display: none; }
  .breadcrumb--mobile { display: flex; }
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--border-subtle); }
.faq__item:last-child { border-bottom: 1px solid var(--border-subtle); }
.faq__question {
  width: 100%; background: none; border: 0;
  padding: var(--space-20) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  text-align: left;
  font-size: 18px; line-height: 28px; font-weight: 600;
  color: var(--text-primary);
  min-height: var(--touch-min);
}
.faq__question svg,
.faq__question .ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--icon-secondary); transition: transform .15s ease; }
.faq__item[data-open="true"] .faq__question svg,
.faq__item[data-open="true"] .faq__question .ic { transform: rotate(180deg); }
.faq__answer { display: none; padding: 0 0 var(--space-20); color: var(--text-secondary); max-width: var(--article-max); }
.faq__item[data-open="true"] .faq__answer { display: block; }

/* --------------------------------------------------------------------------
   10. Tabel
   -------------------------------------------------------------------------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-hint { color: var(--text-secondary); }
table.compare {
  width: 100%; border-collapse: collapse; background: transparent;
}
table.compare th, table.compare td {
  padding: var(--space-12) var(--space-16);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}
table.compare thead th {
  background: var(--surface-card-subtle);
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
table.compare tbody td { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
table.compare tbody td:first-child { color: var(--text-primary); }
table.compare tbody tr:nth-child(even) { background: var(--surface-card-subtle); }
.table-scroll table.compare { min-width: var(--table-min); }
.table--fit { min-width: 0 !important; }

/* --------------------------------------------------------------------------
   11. Filters, paginering, formulier
   -------------------------------------------------------------------------- */
.filter-bar {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  display: flex; gap: var(--space-40); flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: var(--space-8); }
.filter-group__label { color: var(--text-secondary); }
.filter-options { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.filter-option {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: var(--space-12) var(--space-16);
  font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--control-text);
  min-height: var(--touch-min);
}
.filter-option:hover { border-color: var(--control-border-hover); }
.filter-option[aria-pressed="true"] {
  background: var(--selected-bg); border-color: var(--selected-border); color: var(--text-brand);
}

/* Mobiele filtertrigger */
.filter-trigger {
  width: 100%;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: var(--space-12) var(--space-16);
  min-height: var(--touch-min);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
}
.filter-trigger__left { display: flex; align-items: center; gap: var(--space-8); }
.filter-trigger svg,
.filter-trigger .ic { width: 16px; height: 16px; color: var(--icon-secondary); }
.filter-trigger[data-open="true"] .filter-trigger__chevron { transform: rotate(180deg); }
.filter-panel { display: none; }
.filter-panel[data-open="true"] { display: flex; }

@media (max-width: 900px) {
  .filter-bar { flex-direction: column; gap: var(--space-24); }
  .filter-bar--desktop-only { display: none; }
}
@media (min-width: 901px) {
  .filter-mobile-only { display: none; }
}

.pagination { display: flex; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: var(--touch-min); min-height: var(--touch-min);
  padding-inline: var(--space-12);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-small);
  font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none; color: var(--text-primary);
}
.pagination a:hover { background: var(--nav-bg-hover); color: var(--link-default); }
.pagination [aria-current="page"] { background: var(--btn-primary-bg); color: var(--btn-primary-label); }

.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field label { font-size: 14px; line-height: 20px; font-weight: 600; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 18px; line-height: 28px;
  color: var(--control-text);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: var(--space-12) var(--space-16);
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--control-placeholder); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--control-border-focus); border-width: 2px;
}
.field__helper { color: var(--text-secondary); }
.form { display: flex; flex-direction: column; gap: var(--card-gap); }
.form-note { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   12. Beslishulp
   -------------------------------------------------------------------------- */
.flow {
  background: var(--surface-default);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--space-56) var(--space-64);
  display: flex; gap: var(--space-48);
}
.flow__intro { flex: 0 0 300px; display: flex; flex-direction: column; gap: var(--card-gap); align-self: center; }
.flow__panel {
  flex: 1;
  background: var(--surface-card-subtle);
  border-radius: var(--radius-medium);
  padding: var(--space-32);
  display: flex; flex-direction: column; gap: var(--space-20);
}
.flow__question { display: flex; flex-direction: column; gap: var(--space-4); }
.flow__progress { color: var(--text-secondary); }
[data-step] { display: flex; flex-direction: column; gap: var(--space-20); }
/* display op [data-step] verslaat de UA-regel voor [hidden]; expliciet terugzetten */
[data-step][hidden] { display: none; }
.flow__options { display: flex; flex-direction: column; gap: var(--space-12); }
.answer-option {
  width: 100%; text-align: left;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: var(--space-16) var(--space-20);
  display: flex; align-items: center; gap: var(--space-12);
  font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--text-primary);
  min-height: var(--touch-min);
}
.answer-option:hover { border-color: var(--control-border-hover); }
.answer-option[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--selected-border); }
.answer-option__radio {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
}
.answer-option[aria-pressed="true"] .answer-option__radio { border-color: var(--selected-border); }
.answer-option[aria-pressed="true"] .answer-option__radio::after {
  content: ""; width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--selected-icon);
}
.flow__actions { display: flex; gap: var(--space-12); flex-wrap: wrap; }

@media (max-width: 900px) {
  .flow { flex-direction: column; padding: var(--space-24); gap: var(--space-24); }
  .flow__intro { flex: none; align-self: stretch; }
  .flow__panel { padding: var(--space-20); }
  [data-step] { gap: var(--space-16); }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-inverse);
  color: var(--footer-text);
  padding: var(--space-64) var(--page-padding-x) var(--space-32);
  display: flex; flex-direction: column; align-items: center;
}
.site-footer__inner { width: 100%; max-width: var(--content-max); display: flex; flex-direction: column; gap: var(--space-24); }
.site-footer__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48);
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--footer-divider);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-12); }
.footer-col h2 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-inverse); margin: 0; font-family: var(--font-body); }
.footer-col a { color: var(--footer-text); text-decoration: none; font-size: 16px; line-height: 24px; }
.footer-col a:hover { color: var(--text-inverse); text-decoration: underline; }
.site-footer__disclosure { color: var(--footer-text-muted); font-size: 14px; line-height: 20px; }
.site-footer__disclosure a { color: var(--footer-text); }
.site-footer__legal {
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  padding-top: var(--space-24); border-top: 1px solid var(--footer-divider);
  color: var(--footer-text-muted); font-size: 12px; line-height: 16px;
}
.site-footer__legal a { color: var(--footer-text-muted); }
@media (max-width: 900px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-32); }
}

/* --------------------------------------------------------------------------
   15. Ankers en scrollgedrag
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-height) + var(--space-24)); }

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

/* --------------------------------------------------------------------------
   16. Correcties na visuele controle
   -------------------------------------------------------------------------- */
.nav a,
.btn,
.pagination a,
.pagination span,
.chip { white-space: nowrap; }

.site-header { gap: var(--space-16); }
.nav { gap: 2px; }
.nav a { padding-inline: 10px; }

/* Hero: tekst links, beeld rechts */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 584 + 32 + 584 binnen de container van 1200 */
  gap: var(--space-32);
  align-items: center;
  width: 100%;
}
/* Tussen de hero-rij en de taakkaarten staat in het design meer lucht dan
   de standaard sectie-gap. */
.section--hero .container { gap: var(--space-56); }
/* Tekstkolom is 584 breed met 24 rechts, zodat de tekst op 560 uitkomt (zoals Figma) */
.hero__text { display: flex; flex-direction: column; gap: var(--space-24); padding-right: var(--space-24); }
.hero .placeholder-img { min-height: 400px; border-radius: var(--radius-large); }
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-24); }
  .hero__text { padding-right: 0; gap: var(--space-16); }
  /* Mobiel staat het beeld bovenaan, net als in het design */
  .hero .placeholder-img { min-height: 200px; order: -1; border-radius: var(--radius-default); }
  .section--hero .container { gap: var(--space-24); }
}

/* Het volledige menu past vanaf 1200px; daaronder de compacte header met hamburger.
   De contentlayout blijft desktop tot 900px. */
@media (max-width: 1400px) {
  .nav-cta-group { display: none; }
  .header-mobile-actions { display: flex; }
}
@media (min-width: 901px) and (max-width: 1400px) {
  .mobile-nav__panel { max-width: 520px; margin-inline: auto; inset-inline: 0; }
}

/* Mobiele filtertrigger: alleen onder 900px. De layout staat in CSS en niet inline,
   zodat de media query hem kan uitzetten. */
.filter-mobile-only { display: flex; flex-direction: column; gap: var(--space-12); }
@media (min-width: 901px) { .filter-mobile-only { display: none; } }

/* De veeghint alleen tonen wanneer de tabel daadwerkelijk breder is dan de kolom */
.table-hint { display: none; }
@media (max-width: 1100px) { .table-hint { display: block; } }

/* --------------------------------------------------------------------------
   17. Mobiele overflowcorrecties
   -------------------------------------------------------------------------- */
/* Merkenraster: vijf kolommen op desktop, twee op mobiel */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--column-gap);
}
@media (max-width: 1100px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* Twee productkaarten naast elkaar, gestapeld op mobiel */
.grid-duel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); }
@media (max-width: 900px) { .grid-duel { grid-template-columns: 1fr; } }

/* Lange Nederlandse samenstellingen mogen afbreken in plaats van uitlopen */
.display, .h1, .h2, .h3, .h4, .h5,
.body-l, .body, .body-s, .body-strong, .body-strong-s,
.card__title, .toc a, td, th, .list-item span, .breadcrumb { overflow-wrap: break-word; }
@media (max-width: 900px) {
  .display, .h1, .h2, .h3 { hyphens: auto; }
}

/* De compacte (niet-scrollende) tabel mag zijn kolomkoppen afbreken en krijgt
   op mobiel smallere celpadding, zodat drie kolommen binnen 358px passen. */
.table--fit thead th { white-space: normal; }
@media (max-width: 900px) {
  table.compare th,
  table.compare td { padding: var(--space-12) var(--space-8); }
}

/* Kleine telefoons (360px en smaller): logo en beslishulp-CTA compacter,
   zodat de header binnen de viewport blijft. */
@media (max-width: 420px) {
  .site-header { padding-inline: var(--space-12); gap: var(--space-8); }
  .logo svg { height: 16px; }
  .header-mobile-actions .btn {
    padding-inline: var(--space-12);
    font-size: 14px;
    min-height: var(--touch-min);
  }
}

/* Onder 480px wordt ook de compacte tabel scrollbaar in plaats van uitlopend,
   en mogen kaart- en kaarttitels afbreken. */
@media (max-width: 480px) {
  table.compare.table--fit { display: block; overflow-x: auto; }
  .task-card__title, .card__title, .toc a { hyphens: auto; }
}

/* Logo: exacte SVG-export uit Figma (237x24), schaalt op hoogte */
.logo img { height: 24px; width: auto; }
@media (max-width: 900px) { .logo img { height: 18px; } }
@media (max-width: 420px) { .logo img { height: 16px; } }

/* --------------------------------------------------------------------------
   18. Hug in plaats van fill
   In Figma staan chips, tekstlinks en overlines op Hug contents. In een flex-
   kolom rekken ze standaard mee met de kolombreedte; dit zet ze terug op hun
   eigen breedte. Rijcontainers houden hun eigen uitlijning.
   -------------------------------------------------------------------------- */
.chip,
.text-link,
.overline { align-self: flex-start; }

.row-8 > *,
.row-12 > *,
.filter-options > *,
.breadcrumb > *,
.section-header-row > *,
.banner__cta > *,
.flow__actions > *,
.pagination > * { align-self: auto; }

/* --------------------------------------------------------------------------
   19. Font Awesome iconen
   De maten komen uit het Figma-component Icon / FA7 (12, 16, 20 en 24).
   -------------------------------------------------------------------------- */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  flex-shrink: 0;
}
.ic-12 { font-size: 12px; }
.ic-16 { font-size: 16px; }
.ic-20 { font-size: 20px; }
.ic-24 { font-size: 24px; }

/* Artikelkolom centreren binnen de bredere contentkolom, zoals in Figma waar de
   container op Center staat en het artikel maximaal 800px is. */
.article { margin-inline: auto; }
.article--flush { margin-inline: 0; }