/* ==========================================================================
   Veilig Oud Thuis — stylesheet (herontwerp 13 september 2026)
   Uitgangspunten: rustig, warm en groot genoeg voor ouderen; geen JavaScript,
   geen externe fonts (CSP style-src 'self'); contrasten >= 4,5:1; raakvlakken
   >= 44 px; werkt vanaf 320 px zonder horizontale scroll.
   ========================================================================== */

:root {
  /* papier en inkt */
  --papier: #faf8f3;
  --vlak: #ffffff;
  --inkt: #1c2b2d;
  --inkt-zacht: #4a5955;        /* 7,3:1 op papier */
  --lijn: #e1e5df;
  --lijn-sterk: #c9d0c8;
  /* merkgroen */
  --groen-50: #f1f7f3;
  --groen-100: #e3efe8;
  --groen-200: #c6e0d2;
  --groen-600: #12735a;
  --groen-700: #0d5f47;         /* 7,6:1 wit erop */
  --groen-800: #0a4a37;
  --groen-900: #073628;
  /* accent (alleen de bol-knop en kleine markeringen) */
  --amber-500: #e39a12;         /* donkere tekst erop: 8,9:1 */
  --amber-600: #c98400;
  --amber-100: #fdf3dc;
  --amber-inkt: #2b1f00;
  --amber-tekst: #8a5300;       /* 6,2:1 op papier */
  /* waarschuwing */
  --rood-tekst: #8a3b12;
  --rood-100: #fdece3;
  /* focus */
  --focus: #0b1416;
  --focus-gloed: #ffffff;
  /* maten */
  --breed: 1180px;
  --tekst: 780px;
  --radius: 14px;
  --radius-klein: 9px;
  --schaduw: 0 1px 2px rgba(28, 43, 45, 0.06), 0 6px 20px rgba(28, 43, 45, 0.06);
  --schaduw-hover: 0 2px 4px rgba(28, 43, 45, 0.08), 0 14px 32px rgba(28, 43, 45, 0.12);
  --link-hover: var(--groen-600);
  /* Semantische namen die build-tests en oudere onderdelen gebruiken; dezelfde
     waarden als het palet hierboven (bewust als hex, zodat de contrasttest ze
     kan meten). */
  --kleur-achtergrond: #faf8f3;
  --kleur-kaart: #ffffff;
  --kleur-tekst: #1c2b2d;
  --kleur-primair: #0d5f47;
  --kleur-primair-donker: #0a4a37;
  --kleur-accent: #e39a12;
  --kleur-accent-donker: #8a5300;
  --kleur-focus: #0b1416;
  --kleur-focus-gloed: #ffffff;
}

* { box-sizing: border-box; }

html { font-size: 112.5%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--inkt);
  background: var(--papier);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

article.artikel, .keuzehulp, .kaart-samenvatting { hyphens: auto; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; color: var(--inkt); }
/* koppen erven de 1,65 van de lopende tekst niet */
h1 { line-height: 1.15; }
h2 { line-height: 1.25; }
h3, h4, h5, h6 { line-height: 1.3; }
h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.7rem); margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem); margin: 2.2rem 0 0.8rem; }
h3 { font-size: 1.2rem; margin: 1.4rem 0 0.5rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin: 0.25rem 0; }
img { max-width: 100%; height: auto; }

a { color: var(--groen-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--link-hover); }

/* focusring: donker met witte gloed, zichtbaar op papier én op groen */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-gloed);
  border-radius: 4px;
}
@supports not selector(:focus-visible) {
  a:focus, button:focus, summary:focus, [tabindex]:focus {
    outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-gloed);
  }
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--groen-800); color: #fff; padding: 0.75rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Vaste onderdelen: mededeling, kop, navigatie, voet
   -------------------------------------------------------------------------- */
.disclosure-banner {
  background: var(--amber-100);
  border-bottom: 1px solid #efd9a8;
  color: #5c4210;
  font-size: 0.86rem;
  text-align: center;
  padding: 0.5rem 1rem;
}

header.site-header {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 1px 0 rgba(28, 43, 45, 0.03);
  --link-hover: var(--groen-800);
}
.header-inner {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.merk { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--inkt); min-height: 44px; }
.merk:hover, .merk:focus { color: var(--inkt); }
.merk-beeld {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--groen-600), var(--groen-900));
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.merk-beeld svg { width: 28px; height: 28px; display: block; }
.site-title { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.site-tagline { display: block; font-size: 0.86rem; color: var(--inkt-zacht); margin-top: 0.15rem; }

nav.categorieen { display: flex; gap: 0.35rem; flex-wrap: wrap; }
nav.categorieen a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: var(--groen-800);
  border: 1.5px solid transparent;
}
nav.categorieen a:hover, nav.categorieen a:focus { background: var(--groen-100); border-color: var(--groen-200); color: var(--groen-900); }

/* kruimelpad: zichtbaar op elke binnenpagina, klein en rustig */
.kruimels { max-width: var(--breed); margin: 0 auto; padding: 0.9rem 1.25rem 0; font-size: 0.9rem; color: var(--inkt-zacht); }
.kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; }
.kruimels li { margin: 0; }
.kruimels li + li::before { content: "\203A"; margin-right: 0.4rem; color: var(--lijn-sterk); }
.kruimels a { color: var(--groen-800); }
.kruimels [aria-current] { color: var(--inkt-zacht); }

main { max-width: var(--tekst); margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
main.breed { max-width: var(--breed); }

footer.site-footer {
  background: var(--groen-900);
  color: #dbe9e1;
  padding: 3rem 1.25rem 2rem;
  margin-top: 4rem;
  font-size: 0.93rem;
  --link-hover: #ffffff;
}
footer.site-footer .footer-inner { max-width: var(--breed); margin: 0 auto; }
footer.site-footer a { color: #cfe6d9; }
footer.site-footer p { margin: 0.4rem 0; }
.footer-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.75rem 2.5rem;
  margin-bottom: 1.75rem;
}
.footer-kolommen h2 { font-size: 0.95rem; margin: 0 0 0.6rem; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-kolommen ul { list-style: none; margin: 0; padding: 0; }
.footer-kolommen li { margin: 0.35rem 0; }
.footer-merk { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: #fff; font-size: 1.1rem; margin-bottom: 0.5rem; }
.footer-merk .merk-beeld { width: 36px; height: 36px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); }
.footer-merk svg { width: 22px; height: 22px; }
.footer-disclaimer { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1.25rem; }
.footer-onder { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: #b9d2c6; font-size: 0.86rem; margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  position: relative;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
  background: var(--amber-500);
  color: var(--amber-inkt);
  box-shadow: 0 1px 2px rgba(43, 31, 0, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.knop:hover, .knop:focus { background: #f2a92a; color: var(--amber-inkt); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(43, 31, 0, 0.18); }
.knop-bol::after { content: "\2197"; font-weight: 700; }
.knop-klein { min-height: 40px; padding: 0.4rem 0.9rem; font-size: 0.9rem; white-space: nowrap; }
.knop-uit {
  display: inline-flex; background: #eceee9; color: #47504b;
  border: 1.5px dashed #9aa39c; font-weight: 600; box-shadow: none;
}
.knop-uit:hover { transform: none; background: #eceee9; }
.knop-extern { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* rustige knop voor interne links: groene rand, geen vlak */
.knop-ghost, .lees-meer {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--groen-200);
  background: var(--vlak);
  color: var(--groen-800);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.knop-ghost:hover, .knop-ghost:focus, .lees-meer:hover, .lees-meer:focus { background: var(--groen-100); border-color: var(--groen-600); color: var(--groen-900); }
.lees-meer::after, .knop-ghost::after { content: "\2192"; }

.terug-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--groen-800); margin-bottom: 0.5rem; }
.terug-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Labels en kleine onderdelen
   -------------------------------------------------------------------------- */
.badge, .product-label {
  display: inline-block; align-self: flex-start;
  background: var(--groen-100); color: var(--groen-800);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.2rem 0.65rem; border-radius: 999px;
}
.badge-klein { font-size: 0.72rem; color: var(--groen-800); background: var(--groen-100); padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.overline {
  display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--groen-700); margin-bottom: 0.3rem;
}
.meta-rij { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; font-size: 0.88rem; color: var(--inkt-zacht); margin: 0.4rem 0 0.8rem; }
.meta-rij > * { display: inline-flex; align-items: center; gap: 0.3rem; }
.meta-rij > * + *::before { content: "\00B7"; color: var(--lijn-sterk); margin-right: 0.6rem; }

.sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.sectie-kop h2 { margin: 0; }
.sectie-kop p { margin: 0; color: var(--inkt-zacht); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------- */
.hero-band {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(18, 115, 90, 0.10), transparent 60%),
    linear-gradient(180deg, var(--groen-50) 0%, var(--papier) 100%);
  border-bottom: 1px solid var(--lijn);
}
.hero {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 3rem 1.25rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: center;
}
.hero h1 { margin: 0 0 0.9rem; max-width: 20ch; }
.hero-tekst p { font-size: 1.15rem; max-width: 52ch; color: #2d3b3d; margin: 0 0 1.4rem; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knop-primair {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 50px;
  padding: 0.75rem 1.5rem; border-radius: 999px;
  background: var(--groen-700); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 6px rgba(10, 74, 55, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}
.knop-primair:hover, .knop-primair:focus { background: var(--groen-800); color: #fff; transform: translateY(-1px); }
.knop-primair::after { content: "\2193"; }

.vertrouwen-kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1.35rem 1.5rem;
}
.vertrouwen-kaart h2 { font-size: 1.05rem; margin: 0 0 0.75rem; letter-spacing: 0.02em; }
.vertrouwen-kaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vertrouwen-kaart li { display: flex; gap: 0.7rem; align-items: flex-start; }
.vinkje {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--groen-100); color: var(--groen-800);
  display: inline-grid; place-items: center; font-weight: 800; font-size: 0.9rem; margin-top: 0.1rem;
}

.problemen-sectie { margin: 2.75rem 0 0; }
.problemen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.probleem-knop {
  display: flex; flex-direction: column;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--inkt);
  box-shadow: var(--schaduw);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 60px;
}
.probleem-knop:hover, .probleem-knop:focus { transform: translateY(-3px); box-shadow: var(--schaduw-hover); border-color: var(--groen-200); color: var(--inkt); }
.probleem-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--groen-100); }
.probleem-knop span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1.1rem; font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.probleem-knop span::after { content: "\2192"; color: var(--groen-700); flex: 0 0 auto; }
.probleem-knop:hover span::after { transform: translateX(3px); }

.keuzehulpen-sectie, .artikelen-sectie { margin: 3rem 0 0; }
.kaart-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.4rem; }

.artikel-kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--schaduw);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.artikel-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.kaart-inhoud { padding: 1.2rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; gap: 0.35rem; }
.artikel-kaart h3 { margin: 0.35rem 0 0.2rem; font-size: 1.22rem; line-height: 1.3; }
.artikel-kaart h3 a { text-decoration: none; color: var(--inkt); }
.artikel-kaart h3 a:hover { color: var(--groen-700); text-decoration: underline; }
.kaart-samenvatting { margin: 0.2rem 0 1rem; flex: 1; color: #2d3b3d; }
.artikel-kaart .lees-meer { align-self: flex-start; }
.artikel-kaart .meta-rij { margin: 0; }
.kaart-afbeelding { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; background: var(--groen-100); }

/* keuzehulpkaart: herkenbaar als "het vergelijkende deel" van de site */
.keuzehulp-kaart { border-top: 5px solid var(--groen-700); }
.keuzehulp-kaart .badge { background: var(--groen-700); color: #fff; }

.vertrouwen-sectie {
  margin: 3.5rem 0 0;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.75rem 1.9rem;
  box-shadow: var(--schaduw);
}
.vertrouwen-sectie h2 { margin: 0 0 1rem; }
.vertrouwen-lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.vertrouwen-lijst li { display: flex; gap: 0.7rem; align-items: flex-start; }

/* --------------------------------------------------------------------------
   Categoriepagina
   -------------------------------------------------------------------------- */
.categorie-kop { margin: 0.5rem 0 2rem; max-width: var(--tekst); }
.categorie-kop h1 { margin-bottom: 0.6rem; }
.categorie-intro p { margin: 0 0 0.75rem; font-size: 1.08rem; color: #2d3b3d; }

/* --------------------------------------------------------------------------
   Artikel en keuzehulp
   -------------------------------------------------------------------------- */
article.artikel { font-size: 1.08rem; }
article.artikel h1 { margin: 0.2rem 0 0.4rem; }
article.artikel h2 { color: var(--groen-900); margin-top: 2.4rem; padding-top: 0.2rem; }
article.artikel h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--groen-600); margin-bottom: 0.6rem; }
article.artikel p { margin: 1rem 0; }
article.artikel li { margin: 0.35rem 0; }
article.artikel table { border-collapse: collapse; width: 100%; min-width: 32rem; margin: 0; }
article.artikel th, article.artikel td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
article.artikel thead th { background: var(--groen-50); }
article.artikel .tabel-scroll { margin: 1.5rem 0; }

.artikel-afbeelding { margin: 1.5rem 0 2rem; }
.artikel-afbeelding img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--schaduw); }
.artikel-afbeelding figcaption { font-size: 0.8rem; color: var(--inkt-zacht); margin-top: 0.5rem; }
.artikel-afbeelding figcaption a { color: inherit; }
article.artikel img { max-width: 100%; height: auto; display: block; }

/* kaders: allemaal dezelfde familie, met een gekleurde rand links */
.in-het-kort, .medische-disclaimer, .op-deze-pagina, .bronnen, .prijspeil, .lees-ook, .verantwoording, .onafhankelijkheid, .let-op, .interne-cta, .affiliate-melding {
  border-radius: var(--radius-klein);
}
.in-het-kort {
  background: var(--groen-50);
  border: 1px solid var(--groen-200);
  border-left: 6px solid var(--groen-700);
  padding: 1.1rem 1.35rem;
  margin: 1.25rem 0 1.5rem;
}
.in-het-kort h2 { margin: 0 0 0.6rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--groen-800); }
.in-het-kort h2::before { display: none; }
.in-het-kort p { margin: 0; }
.in-het-kort-lijst { margin: 0; }
.in-het-kort-lijst dt { font-weight: 700; margin-top: 0.7rem; }
.in-het-kort-lijst dd { margin: 0.1rem 0 0.2rem; }

.medische-disclaimer {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 6px solid #6b7c74;
  padding: 0.9rem 1.2rem;
  margin: 1.5rem 0;
}
.medische-disclaimer h2 { margin: 0 0 0.3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--inkt-zacht); }
.medische-disclaimer h2::before { display: none; }
.medische-disclaimer p { margin: 0; font-size: 0.95rem; }

.op-deze-pagina {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.op-deze-pagina h2 { margin: 0 0 0.3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--inkt-zacht); }
.op-deze-pagina h2::before { display: none; }
.op-deze-pagina ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.op-deze-pagina li { margin: 0; break-inside: avoid; }
.op-deze-pagina a { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.3rem 0.2rem; text-decoration: none; border-bottom: 1px solid var(--lijn); }
.op-deze-pagina a::before { content: "\2192"; color: var(--groen-600); }
.op-deze-pagina a:hover { text-decoration: underline; }
.naar-boven { margin-top: 1.75rem; font-weight: 600; }

.interne-cta {
  background: var(--groen-100);
  border: 1px solid var(--groen-200);
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  margin: 1.25rem 0;
}
.interne-cta a { text-decoration: none; display: flex; gap: 0.6rem; align-items: flex-start; }
.interne-cta a::before { content: "\2192"; flex: 0 0 auto; }
.interne-cta a:hover { text-decoration: underline; }

.bronnen, .verantwoording, .onafhankelijkheid { background: var(--vlak); border: 1px solid var(--lijn); padding: 1.1rem 1.35rem; margin: 1.75rem 0; font-size: 0.95rem; }
.bronnen h2, .verantwoording h2, .onafhankelijkheid h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.bronnen h2::before, .verantwoording h2::before, .onafhankelijkheid h2::before { display: none; }
.bronnen ul { margin: 0; padding-left: 1.2rem; }
.bronnen li { margin: 0.45rem 0; }
.bron-waarvoor { display: block; color: var(--inkt-zacht); font-size: 0.88rem; }
.verantwoording h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }

.ai-melding { font-size: 0.88rem; color: var(--inkt-zacht); margin: 1.25rem 0 0; border-top: 1px solid var(--lijn); padding-top: 0.9rem; }

.prijspeil { background: var(--amber-100); border: 1px solid #efd9a8; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.prijspeil h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.prijspeil h2::before { display: none; }
.prijspeil dt { font-weight: 700; margin-top: 0.5rem; }
.prijspeil dd { margin: 0 0 0.3rem; }
.prijs-controle { font-size: 0.88rem; color: var(--inkt-zacht); }

.let-op { background: var(--amber-100); border-left: 5px solid var(--amber-500); padding: 0.7rem 1rem; }
.affiliate-melding { background: var(--amber-100); border: 1px solid #efd9a8; padding: 0.85rem 1.1rem; font-size: 0.95rem; margin: 0 0 1.5rem; }

.lees-ook { background: var(--vlak); border: 1px solid var(--lijn); border-top: 5px solid var(--groen-700); padding: 1.1rem 1.35rem; margin: 2.5rem 0 0; box-shadow: var(--schaduw); }
.lees-ook h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.lees-ook ul { list-style: none; margin: 0; padding: 0; }
.lees-ook li { padding: 0.45rem 0; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.lees-ook li:first-child { border-top: 0; }

/* --------------------------------------------------------------------------
   Keuzehulp
   -------------------------------------------------------------------------- */
.keuzehulp { max-width: var(--breed); }
.keuzehulp > p:first-of-type { font-size: 1.12rem; }
.keuzehulp h2 { margin-top: 2.6rem; }
.keuzehulp h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--groen-600); margin-bottom: 0.6rem; }
/* de kaders (asides, inhoudsopgave, verantwoording) hebben hun eigen kleine kop zonder streepje */
article.artikel aside h2::before, article.artikel nav h2::before, article.artikel section h2::before,
.keuzehulp aside h2::before, .keuzehulp nav h2::before, .keuzehulp section.verantwoording h2::before { display: none; }
.criteria dt, .koopadvies dt { font-weight: 700; margin-top: 0.8rem; }
.criteria dd, .koopadvies dd { margin: 0.15rem 0 0.4rem; }
.criteria, .koopadvies { border-left: 3px solid var(--groen-200); padding-left: 1rem; }

.voor-wie { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.voor-wie > div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 1rem 1.25rem; }
.voor-wie h3 { margin: 0 0 0.5rem; }
.voor-wie ul { margin: 0; padding-left: 1.2rem; }

.product-raster { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.productkaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex; flex-direction: column;
  box-shadow: var(--schaduw);
}
.productkaart:first-child { border-color: var(--groen-200); box-shadow: 0 0 0 3px var(--groen-100), var(--schaduw); }
.product-label { margin-bottom: 0.75rem; }
.productkaart img { max-width: 100%; height: auto; align-self: center; margin: 0.2rem 0 0.9rem; background: #fff; border-radius: var(--radius-klein); padding: 0.4rem; border: 1px solid var(--lijn); }
.productkaart h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.product-uitleg { margin: 0 0 0.8rem; }
.product-plus, .product-min { margin: 0.5rem 0 0.15rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.product-plus strong { color: var(--groen-800); }
.product-min strong { color: var(--rood-tekst); }
.plus-lijst, .min-lijst { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.plus-lijst li, .min-lijst li { position: relative; padding-left: 1.5rem; margin: 0.3rem 0; }
.plus-lijst li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--groen-700); font-weight: 800; }
.min-lijst li::before { content: "\2212"; position: absolute; left: 0; top: 0; color: var(--rood-tekst); font-weight: 800; }
.product-past { margin: 0.2rem 0; font-size: 0.93rem; }
.product-prijs { margin: 0.9rem 0 0.2rem; font-size: 0.95rem; color: var(--inkt); border-top: 1px solid var(--lijn); padding-top: 0.8rem; }
.productkaart .affiliate-blok { margin-top: auto; padding-top: 0.6rem; }

.productbespreking { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-top: 1.4rem; }
.productbespreking h3 { margin: 0 0 0.6rem; font-size: 1.25rem; }
.productbespreking p { margin: 0.5rem 0; }
.product-bronnen { font-size: 0.88rem; color: var(--inkt-zacht); }

/* brede tabellen: scrollen in hun eigen kader, met schaduwrand en hint */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-klein);
  background:
    linear-gradient(to right, var(--vlak) 40%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--vlak) 40%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(28, 43, 45, 0.22), rgba(28, 43, 45, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 43, 45, 0.22), rgba(28, 43, 45, 0)) right center;
  background-color: var(--vlak);
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabel-hint { display: none; margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--inkt-zacht); font-weight: 600; }
.tabel-hint::before { content: "\21C4\00a0"; }
@media (max-width: 700px) { .tabel-hint { display: block; } }
.keuzehulp .tabel-hint { display: block; }

table.vergelijking { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 700px; font-size: 0.92rem; }
table.vergelijking caption { text-align: left; font-size: 0.88rem; color: var(--inkt-zacht); padding: 0.7rem 0.9rem; caption-side: top; }
table.vergelijking th, table.vergelijking td { border-bottom: 1px solid var(--lijn); border-right: 1px solid var(--lijn); padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; }
table.vergelijking th:last-child, table.vergelijking td:last-child { border-right: 0; }
table.vergelijking thead th { background: var(--groen-100); color: var(--groen-900); position: sticky; top: 0; }
table.vergelijking tbody th { background: var(--groen-50); font-weight: 700; position: sticky; left: 0; min-width: 11rem; }
table.vergelijking tbody tr:nth-child(even) td { background: #fbfbf8; }

.faq details { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 0 1rem; margin-bottom: 0.6rem; background: var(--vlak); }
.faq summary { font-weight: 700; cursor: pointer; min-height: 48px; padding: 0.7rem 2rem 0.7rem 0; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--groen-700); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--lijn); }
.faq p { margin: 0.7rem 0 0.9rem; }

/* commerciële link: knop + zichtbaar label horen bij elkaar */
.affiliate-blok { display: inline-flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.affiliate-label { font-size: 0.8rem; color: var(--inkt-zacht); }
.niet-leverbaar { font-size: 0.86rem; font-weight: 600; color: var(--rood-tekst); background: var(--rood-100); border-radius: 6px; padding: 0.3rem 0.6rem; }

.categorie-intro { margin: 0; }

/* --------------------------------------------------------------------------
   Tabellen mogen buiten de tekstkolom steken op brede schermen
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) { main:not(.breed) .tabel-scroll { margin-inline: -100px; } }
@media (min-width: 1360px) { main:not(.breed) .tabel-scroll { margin-inline: -180px; } }
@media (min-width: 1280px) { main.breed .tabel-scroll { margin-inline: -40px; } }
@media (min-width: 1600px) {
  main.breed .tabel-scroll { margin-inline: -160px; }
  table.vergelijking { font-size: 1rem; }
  table.vergelijking caption { font-size: 0.95rem; }
  table.vergelijking th, table.vergelijking td { padding: 0.75rem 0.9rem; }
}

/* --------------------------------------------------------------------------
   Smalle schermen
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.25rem 2rem; gap: 1.5rem; }
  .op-deze-pagina ol { columns: 1; }
}
@media (max-width: 600px) {
  html { font-size: 106%; }
  .disclosure-banner { font-size: 0.82rem; padding: 0.45rem 0.9rem; text-align: left; }
  .header-inner { padding: 0.75rem 1rem; gap: 0.75rem; }
  .site-title { font-size: 1.2rem; }
  body:not(.is-home) .site-tagline { display: none; }
  nav.categorieen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
  nav.categorieen a { justify-content: center; text-align: center; min-height: 46px; border: 1.5px solid var(--groen-200); background: var(--groen-50); padding: 0.4rem 0.6rem; }
  .kruimels { padding: 0.75rem 1rem 0; }
  main { padding: 1.25rem 1rem 3rem; }
  .hero { padding: 1.5rem 1rem 1.5rem; }
  .hero h1 { font-size: 1.85rem; }
  .hero-tekst p { font-size: 1.05rem; margin-bottom: 1rem; }
  .knop, .knop-bol { display: flex; text-align: center; }
  .knop-klein { display: inline-flex; }
  table.vergelijking { min-width: 560px; }
  .vertrouwen-sectie { padding: 1.25rem 1.1rem; }
  footer.site-footer { padding: 2.25rem 1rem 1.5rem; }
}
@media (max-width: 360px) {
  .kaart-raster, .product-raster, .voor-wie, .problemen { grid-template-columns: minmax(0, 1fr); }
  .artikel-kaart, .productkaart { min-width: 0; }
  .knop-klein, .knop-bol { display: flex; width: 100%; white-space: normal; }
  .affiliate-blok { display: flex; width: 100%; }
  .footer-kolommen { grid-template-columns: minmax(0, 1fr); }
  table.vergelijking tbody th { min-width: 8rem; }
}

/* --------------------------------------------------------------------------
   Afdrukken
   -------------------------------------------------------------------------- */
@media print {
  .disclosure-banner, nav.categorieen, .skip-link, .knop, .lees-ook, .naar-boven, .interne-cta, footer.site-footer .footer-kolommen { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .artikel-kaart, .productkaart, .in-het-kort, .vertrouwen-kaart { box-shadow: none; }
}