:root {
  --kleur-tekst: #1a2a2e;
  --kleur-achtergrond: #fdfcf9;
  --kleur-primair: #0b6e4f;
  --kleur-primair-donker: #084d38;
  --kleur-accent: #d98e04;
  --kleur-kader: #d8ddd6;
  --kleur-kaart: #ffffff;
  --breedte-inhoud: 780px;
  --breedte-breed: 1140px;
}

* { box-sizing: border-box; }

html { font-size: 112%; }

body {
  margin: 0;
  font-family: "Segoe UI", Verdana, Arial, sans-serif;
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  line-height: 1.65;
}

a { color: var(--kleur-primair-donker); }
a:hover, a:focus { color: var(--kleur-accent); }
a:focus, button:focus { outline: 3px solid var(--kleur-accent); outline-offset: 2px; }

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

header.site-header {
  background: var(--kleur-primair);
  color: #fff;
  padding: 1.25rem 1rem;
}
header.site-header .header-inner {
  max-width: var(--breedte-breed);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
header.site-header a { color: #fff; text-decoration: none; }
.site-title { font-size: 1.6rem; font-weight: 700; }
.site-tagline { font-size: 0.95rem; opacity: 0.9; margin-top: 0.15rem; }
nav.categorieen { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; }
nav.categorieen a { padding: 0.25rem 0; border-bottom: 2px solid transparent; }
nav.categorieen a:hover { border-bottom-color: #fff; }

.disclosure-banner {
  background: #fff6e5;
  border-bottom: 1px solid #f0d9a6;
  color: #5c4210;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem 1rem;
}

main {
  max-width: var(--breedte-inhoud);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.intro { font-size: 1.05rem; color: #3a4a44; margin-bottom: 2rem; }

.artikel-kaart {
  background: var(--kleur-kaart);
  border: 1px solid var(--kleur-kader);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kaart-inhoud { padding: 1.1rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.artikel-kaart h3 { margin: 0.5rem 0 0.4rem; font-size: 1.25rem; line-height: 1.3; }
.artikel-kaart h3 a { text-decoration: none; }
.kaart-samenvatting { margin: 0 0 1rem; flex: 1; }
.artikel-kaart .lees-meer { align-self: flex-start; }
.meta-rij { display: flex; gap: 0.75rem; align-items: center; font-size: 0.85rem; color: #5c6b65; margin-bottom: 0.5rem; }
/* klein label, geen brede balk: in een flexkolom rekt een inline-block anders
   op tot de volle kaartbreedte */
.badge {
  display: inline-block;
  align-self: flex-start;
  background: #eef5f1;
  color: var(--kleur-primair-donker);
  border: 1px solid var(--kleur-primair);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
}
.lees-meer { font-weight: 600; }

article.artikel h1 { font-size: 2rem; margin-bottom: 0.3rem; }
article.artikel .meta-rij { margin-bottom: 1.5rem; }
article.artikel { font-size: 1.08rem; }
article.artikel h2 { color: var(--kleur-primair-donker); margin-top: 2rem; }
article.artikel p { margin: 1rem 0; }
article.artikel table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
article.artikel th, article.artikel td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--kleur-kader); }

.terug-link { display: inline-block; margin-bottom: 1.5rem; }

.kaart-afbeelding {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.artikel-afbeelding { margin: 1rem 0 1.5rem; }
.artikel-afbeelding img { width: 100%; height: auto; border-radius: 8px; display: block; }
.artikel-afbeelding figcaption { font-size: 0.75rem; color: #5c6b65; margin-top: 0.3rem; }
.artikel-afbeelding figcaption a { color: inherit; }

article.artikel img { max-width: 100%; height: auto; display: block; }

footer.site-footer {
  background: var(--kleur-primair-donker);
  color: #eef5f1;
  padding: 2rem 1rem;
  margin-top: 3rem;
  font-size: 0.9rem;
}
footer.site-footer .footer-inner { max-width: var(--breedte-breed); margin: 0 auto; }
footer.site-footer a { color: #cdeadc; }
footer.site-footer p { margin: 0.4rem 0; }
.footer-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.5rem;
}
.footer-kolommen h2 { font-size: 1rem; margin: 0 0 0.5rem; color: #fff; }
.footer-kolommen ul { list-style: none; margin: 0; padding: 0; }
.footer-kolommen li { margin: 0.3rem 0; }
.footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 1rem;
}

.lees-ook {
  background: #f4f7f5;
  border-top: 3px solid var(--kleur-primair);
  border-radius: 0 0 8px 8px;
  padding: 1rem 1.25rem;
  margin: 2rem 0 0;
}
.lees-ook h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.lees-ook ul { list-style: none; margin: 0; padding: 0; }
.lees-ook li { padding: 0.35rem 0; }
.badge-klein {
  font-size: 0.7rem;
  color: var(--kleur-primair-donker);
  background: #dbe9e1;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- probleemgerichte ingang op de homepage ----------------------------- */
.problemen-sectie { margin-bottom: 2.5rem; }
.problemen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.probleem-knop {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0.9rem 1.1rem;
  background: var(--kleur-kaart);
  border: 2px solid var(--kleur-primair);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.probleem-knop:hover, .probleem-knop:focus { background: #eef5f1; }

/* --- mededelingen ------------------------------------------------------- */
.affiliate-melding {
  background: #fdf6e6;
  border: 1px solid #e6c98a;
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.medische-disclaimer {
  background: #f4f7f5;
  border-left: 5px solid #6b7c74;
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.15rem;
  margin: 1.5rem 0;
}
.medische-disclaimer h2 { margin: 0 0 0.35rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.medische-disclaimer p { margin: 0; font-size: 0.95rem; }
.interne-cta {
  background: #eef5f1;
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  font-weight: 600;
}
.let-op { background: #fdf6e6; border-left: 4px solid var(--kleur-accent); padding: 0.6rem 0.9rem; }

/* --- keuzehulp ---------------------------------------------------------- */
.keuzehulp { max-width: var(--breedte-breed); }
.keuzehulp h2 { margin-top: 2rem; }
.in-het-kort-lijst dt, .criteria dt, .koopadvies dt { font-weight: 700; margin-top: 0.6rem; }
.in-het-kort-lijst dd, .criteria dd, .koopadvies dd { margin: 0 0 0.4rem; }
.voor-wie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.voor-wie h3 { margin-bottom: 0.3rem; }

.product-raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.productkaart {
  background: var(--kleur-kaart);
  border: 1px solid var(--kleur-kader);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
}
.product-label {
  align-self: flex-start;
  background: #eef5f1;
  color: var(--kleur-primair-donker);
  border: 1px solid var(--kleur-primair);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.7rem;
  margin-bottom: 0.6rem;
}
.productkaart h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.product-uitleg { margin: 0 0 0.6rem; }
.product-plus, .product-min { margin: 0.4rem 0 0.2rem; font-size: 0.95rem; }
.plus-lijst, .min-lijst { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.min-lijst li { color: #5c4b16; }
.product-past { margin: 0.15rem 0; font-size: 0.92rem; }
.product-prijs { margin: 0.6rem 0 0.2rem; font-size: 0.92rem; color: #47504b; }
.productbespreking {
  border-top: 1px solid var(--kleur-kader);
  padding-top: 1.2rem;
  margin-top: 1.5rem;
}
.productbespreking p { margin: 0.4rem 0; }
.product-bronnen { font-size: 0.88rem; color: #47504b; }

/* --- vergelijkingstabel ------------------------------------------------- */
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5rem; }
.tabel-scroll:focus { outline: 3px solid var(--kleur-accent); }
table.vergelijking { border-collapse: collapse; width: 100%; min-width: 700px; font-size: 0.92rem; }
table.vergelijking caption { text-align: left; font-size: 0.88rem; color: #47504b; padding-bottom: 0.5rem; }
table.vergelijking th, table.vergelijking td { border: 1px solid var(--kleur-kader); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
table.vergelijking thead th { background: #eef5f1; }
table.vergelijking tbody th { background: #fafbfa; font-weight: 700; }

/* --- veelgestelde vragen en verantwoording ------------------------------ */
.faq details { border: 1px solid var(--kleur-kader); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; background: var(--kleur-kaart); }
.faq summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.faq p { margin: 0.5rem 0 0; }
.verantwoording {
  background: #f4f7f5;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  font-size: 0.95rem;
}
.verantwoording h2 { margin-top: 0; font-size: 1.1rem; }
.vertrouwen-sectie { background: #f4f7f5; border-radius: 10px; padding: 1.25rem 1.4rem; margin: 2.5rem 0 0; }
.vertrouwen-lijst { margin: 0 0 0.75rem; padding-left: 1.2rem; }

@media (max-width: 500px) {
  html { font-size: 104%; }
  header.site-header .header-inner { flex-direction: column; align-items: flex-start; }
  article.artikel table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- brede homepage-secties (hero, tegels, kaartraster) --- */

main.breed { max-width: var(--breedte-breed); }

.usp-balk {
  background: #eef5f1;
  border-bottom: 1px solid var(--kleur-kader);
  font-size: 0.95rem;
}
.usp-inner {
  max-width: var(--breedte-breed);
  margin: 0 auto;
  padding: 0.7rem 1rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: center;
}
.usp-inner li { padding-left: 1.6rem; position: relative; }
.usp-inner li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--kleur-primair);
  font-weight: 700;
}

.hero {
  background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 2.5rem 2rem;
  margin-bottom: 2.5rem;
}
.hero h1 { margin: 0 0 0.75rem; font-size: 2.1rem; line-height: 1.25; }
.hero p { margin: 0 0 1.5rem; font-size: 1.1rem; max-width: 60ch; }
.hero-tekst { max-width: var(--breedte-inhoud); }

.knop {
  display: inline-block;
  background: var(--kleur-accent);
  color: #2b1f00;
  font-weight: 700;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
}
.knop:hover, .knop:focus { background: #f0a41c; color: #2b1f00; }

/* --- knoppen ------------------------------------------------------------ */
.knop { min-height: 44px; line-height: 1.4; }
.knop-secundair {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.knop-secundair:hover, .knop-secundair:focus { background: #fff; color: var(--kleur-primair-donker); }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
/* de commerciële knop is de enige met de accentkleur als volvlak, zodat een
   pagina niet als een reclamefolder oogt */
.knop-bol { display: inline-flex; align-items: center; margin-top: 0.5rem; }
.knop-klein { padding: 0.55rem 0.9rem; font-size: 0.9rem; white-space: nowrap; }
.knop-uit {
  display: inline-block;
  background: #eceee9;
  color: #47504b;
  border: 1px dashed #9aa39c;
  font-weight: 600;
}
.knop-extern {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}


.tegels-sectie h2, .artikelen-sectie h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.tegels-sectie { margin-bottom: 2.5rem; }
.tegels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.tegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0.5rem;
  background: var(--kleur-kaart);
  border: 1px solid var(--kleur-kader);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}
.tegel:hover, .tegel:focus { border-color: var(--kleur-primair); }
.tegel img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
}

.kaart-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.in-het-kort {
  background: #eef5f1;
  border-left: 5px solid var(--kleur-primair);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.in-het-kort h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kleur-primair-donker);
}
.in-het-kort p { margin: 0; }
article.artikel .in-het-kort h2 { margin-top: 0; }

@media (max-width: 600px) {
  .hero { padding: 1.75rem 1.25rem; border-radius: 10px; }
  .hero h1 { font-size: 1.7rem; }
  .usp-inner { flex-direction: column; gap: 0.35rem; align-items: flex-start; }
  .tegels { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .knop, .knop-bol { display: block; text-align: center; }
  .knop-klein { display: inline-block; }
  table.vergelijking { min-width: 560px; }
}