:root {
  --groen-donker: #14532d;
  --groen: #1a7f37;
  --oranje: #b08800;
  --rood: #cf222e;
  --tekst: #1f2328;
  --tekst-licht: #57606a;
  --rand: #d0d7de;
  --achtergrond-zacht: #f6f8fa;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --schaduw-kaart: 0 1px 3px rgba(31, 35, 40, 0.04);
  --schaduw-zweef: 0 12px 28px rgba(31, 35, 40, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tekst);
  line-height: 1.6;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* Losse tekstlinks. Zonder deze regel valt de browser terug op zijn eigen blauw (#0000ee), en dat
   stak af tegen de rest van het groene palet. De onderstreping blijft staan: kleur alleen is geen
   voldoende aanwijzing dat iets een link is, zeker niet voor kleurenblinde bezoekers. De knoppen
   (.btn) en het logo houden hun eigen opmaak, die staan hieronder. */
a { color: var(--groen-donker); text-underline-offset: 2px; }
a:hover { color: var(--groen); }
a:focus-visible { outline: 3px solid rgba(26, 127, 55, 0.4); outline-offset: 2px; border-radius: 2px; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
h3 { font-size: 1.15rem; margin-bottom: 8px; }

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: transform 160ms var(--ease-out-strong), background-color 200ms ease, box-shadow 200ms ease;
}
.btn-primary { background: var(--groen); color: #fff; box-shadow: 0 2px 10px rgba(20, 83, 45, 0.25); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid rgba(26, 127, 55, 0.4); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--groen-donker); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 83, 45, 0.3); }
  .btn-primary:hover:active { transform: scale(0.97); }
}
/* min-height 44px: dit is de knop die op mobiel altijd in beeld staat, en met 9px padding kwam hij
   op 41px uit. Apple houdt 44x44 aan als minimum tikdoel, Google 48x48; een vingertop dekt 44 tot
   57px. Net te klein betekent hier mistikken op precies de enige knop die altijd zichtbaar is. */
.btn-small { padding: 9px 18px; font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }
.btn-groot { width: 100%; padding: 16px; font-size: 1.1rem; }

.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
  z-index: 10;
  transition: box-shadow 200ms ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(31, 35, 40, 0.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.logo { font-size: 1.35rem; font-weight: 800; color: var(--tekst); text-decoration: none; }
.logo-accent { color: var(--groen); }

.hero {
  padding: 88px 0;
  background:
    radial-gradient(640px 320px at 82% 12%, rgba(26, 127, 55, 0.08), transparent 70%),
    linear-gradient(180deg, #fafcfa 0%, #fff 100%);
  /* De decoratieve gloedcirkels steken bewust buiten de tekstkolom, en op een telefoon dus ook
     buiten het scherm: dat leverde 32 pixels horizontale scroll op, precies de bevinding die deze
     keuring bij klanten rood markeert. `clip` snijdt ze netjes af.
     Bewust `clip` en niet `hidden`: hidden maakt van dit blok een scroll-container en sloopt
     daarmee position: sticky verderop in de pagina. Zie de werkmap-CLAUDE.md. */
  overflow-x: clip;
}
.hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.hero-eyebrow {
  display: inline-block;
  background: rgba(26, 127, 55, 0.1);
  color: var(--groen-donker);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.hero-sub { font-size: 1.15rem; color: var(--tekst-licht); margin: 20px 0 28px; }
.hero-note { margin-top: 12px; font-size: 0.9rem; color: var(--tekst-licht); }

.hero-visual { position: relative; }
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: -1;
}
.hero-blob-1 {
  width: 340px; height: 340px;
  background: rgba(26, 127, 55, 0.24);
  top: -70px; right: -50px;
  animation: blob-drift 14s ease-in-out infinite alternate;
}
.hero-blob-2 {
  width: 260px; height: 260px;
  background: rgba(176, 136, 0, 0.15);
  bottom: -60px; left: -40px;
  animation: blob-drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(26px, 18px) scale(1.08); }
}

.scene { perspective: 1100px; }
@media (prefers-reduced-motion: no-preference) {
  .scene { animation: scene-float 7s ease-in-out infinite; }
}
@keyframes scene-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.rapport-kaart {
  position: relative;
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 18px 44px rgba(31, 35, 40, 0.1);
  background: #fff;
  transform-style: preserve-3d;
  will-change: transform;
}
.scene.is-tilting .rapport-kaart { transition: none; box-shadow: 0 26px 60px rgba(31, 35, 40, 0.16); }

.glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px 300px at var(--glare-x, 70%) var(--glare-y, 20%), rgba(255, 255, 255, 0.55), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.scene.is-tilting .glare { opacity: 1; }

.chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--rand);
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.14);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
.chip-goedgekeurd {
  color: var(--groen);
  top: -16px; right: -18px;
  animation: chip-float 5s ease-in-out infinite alternate;
}
.chip-punten {
  color: var(--groen-donker);
  bottom: -14px; left: -20px;
  animation: chip-float 6s ease-in-out infinite alternate-reverse;
}
@keyframes chip-float {
  from { transform: translateZ(46px) translateY(0); }
  to { transform: translateZ(46px) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .chip, .scene { animation: none; }
}

.meter {
  height: 6px;
  background: var(--achtergrond-zacht);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 2px;
}
.meter-vul {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 900ms var(--ease-out-strong);
}
@media (prefers-reduced-motion: reduce) {
  .meter-vul { transition: none; }
}
.meter-rood { background: var(--rood); }
.meter-oranje { background: var(--oranje); }
.meter-groen { background: var(--groen); }

@media (prefers-reduced-motion: no-preference) {
  .hero-tekst > *,
  .rapport-kaart {
    transition: opacity 600ms var(--ease-out-strong), transform 600ms var(--ease-out-strong);
  }
  .hero-tekst > :nth-child(2) { transition-delay: 70ms; }
  .hero-tekst > :nth-child(3) { transition-delay: 140ms; }
  .hero-tekst > :nth-child(4) { transition-delay: 200ms; }
  .hero-tekst > :nth-child(5) { transition-delay: 260ms; }
  .rapport-kaart { transition-delay: 160ms; }
}
@starting-style {
  .hero-tekst > * { opacity: 0; transform: translateY(14px); }
  .rapport-kaart { opacity: 0; transform: translateY(22px) scale(0.97); }
}
.rapport-kop { font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--rand); margin-bottom: 12px; }
.rapport-rij { padding: 7px 0; }
.rapport-rij-kop { display: flex; justify-content: space-between; align-items: center; }
.rapport-scheiding {
  margin: 14px 0 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--rand);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--groen-donker);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.score { font-weight: 700; padding: 1px 10px; border-radius: 999px; font-size: 0.95rem; }
.score-groen { color: var(--groen); background: rgba(26, 127, 55, 0.1); }
.score-oranje { color: var(--oranje); background: rgba(176, 136, 0, 0.12); }
.score-rood { color: var(--rood); background: rgba(207, 34, 46, 0.1); }

.probleem { padding: 72px 0; background: var(--achtergrond-zacht); }
.sectie-intro { color: var(--tekst-licht); margin-bottom: 32px; max-width: 560px; }
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kaart { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 28px; box-shadow: var(--schaduw-kaart); }
@media (hover: hover) and (pointer: fine) {
  .kaart, .stap {
    transition: transform 200ms var(--ease-out-strong), box-shadow 200ms ease;
  }
  .kaart:hover, .stap:hover { transform: translateY(-4px); box-shadow: var(--schaduw-zweef); }
}
.kaart-cijfer { font-size: 2.2rem; font-weight: 800; color: var(--rood); margin-bottom: 8px; }
.kaart p { color: var(--tekst-licht); font-size: 0.97rem; }

.werkwijze { padding: 72px 0; }
.nieuwbouw { padding: 72px 0; }
.stappen { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.stappen-4 { grid-template-columns: repeat(4, 1fr); }
.stap { border: 1px solid var(--rand); border-radius: 14px; padding: 28px; background: #fff; box-shadow: var(--schaduw-kaart); }
.stap-nummer {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--groen);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 1.1rem;
}
.stap p { color: var(--tekst-licht); font-size: 0.97rem; }

.prijs { padding: 72px 0; background: var(--groen-donker); }
.prijs h2 { color: #fff; text-align: center; }
.prijs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 28px auto 0;
  align-items: start;
}
.prijs-kaart {
  max-width: 520px;
  margin: 28px auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 36px;
  text-align: center;
}
.prijs-grid .prijs-kaart { max-width: none; margin: 0; }
.prijs-titel { font-size: 1.2rem; margin-bottom: 4px; }
.prijs-kaart { position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
.prijs-kaart-populair { border: 2px solid var(--groen); }
.populair-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--groen);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .prijs-kaart { transition: transform 200ms var(--ease-out-strong), box-shadow 200ms ease; }
  .prijs-kaart:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22); }
}
.hosting-balk {
  max-width: 1000px;
  margin: 24px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 24px 28px;
}
.hosting-balk h3 { color: #fff; margin-bottom: 8px; }
.hosting-balk p { color: rgba(255, 255, 255, 0.85); font-size: 0.97rem; }

/* Garantiebalk. Staat bewust vóór de hostingbalk en net na de twee prijzen: het bezwaar "wat als
   het niets oplevert" komt op het moment dat iemand het bedrag ziet, niet later. Zwaarder
   aangezet dan de hostingbalk (dichte rand, eigen achtergrond) omdat dit het enige blok is dat
   risico wegneemt in plaats van iets aanbiedt. */
.garantie-balk {
  max-width: 1000px;
  margin: 32px auto 0;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.08);
}
.garantie-balk h3 { color: #fff; margin-bottom: 8px; }
.garantie-balk p { color: rgba(255, 255, 255, 0.9); font-size: 0.97rem; }
.prijs-bedrag { font-size: 3rem; font-weight: 800; color: var(--groen-donker); }
.prijs-vast { font-size: 1.1rem; font-weight: 600; color: var(--tekst-licht); }
.prijs-lijst { list-style: none; text-align: left; margin: 24px 0 28px; }
.prijs-lijst li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px solid var(--achtergrond-zacht); }
.prijs-lijst li::before { content: "✓"; position: absolute; left: 0; color: var(--groen); font-weight: 700; }
.prijs-note { margin-top: 16px; font-size: 0.9rem; color: var(--tekst-licht); }

/* Voorbeeldrapport. De grootste onzekerheid bij 495 euro is "wat krijg ik dan eigenlijk", dus die
   vraag wordt hier beantwoord met de eerste pagina zelf in plaats van met een beschrijving. */
.voorbeeld { padding: 72px 0; }
.voorbeeld-inner { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: center; }
.voorbeeld-tekst p { color: var(--tekst-licht); }
.voorbeeld-tekst .btn { margin-top: 20px; }
.voorbeeld-note { font-size: 0.85rem; margin-top: 12px; }
.voorbeeld-visual {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw-zweef);
  /* De afbeelding is de eerste pagina van een A4; alleen de bovenkant tonen houdt de sectie
     compact en laat precies het stuk zien dat het gesprek stuurt (scores en het bedrag). */
  max-height: 520px;
  transition: transform 200ms var(--ease-out-strong), box-shadow 200ms ease;
}
.voorbeeld-visual img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .voorbeeld-visual:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(31, 35, 40, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .voorbeeld-visual { transition: none; }
}

.over { padding: 72px 0; }
.over-inner { max-width: 720px; }
.over p { color: var(--tekst-licht); font-size: 1.05rem; }

.faq { padding: 72px 0; background: var(--achtergrond-zacht); }
.faq details { background: #fff; border: 1px solid var(--rand); border-radius: 12px; margin-bottom: 12px; padding: 18px 22px; transition: border-color 200ms ease; }
.faq details[open] { border-color: var(--groen); }
.faq summary { font-weight: 600; cursor: pointer; position: relative; padding-right: 34px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--groen);
  line-height: 1;
  transition: transform 200ms var(--ease-out-strong);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--tekst-licht); }

.aanvraag { padding: 72px 0; }
.aanvraag-inner { max-width: 560px; }
.veld { margin-bottom: 18px; }
.veld label { display: block; font-weight: 600; margin-bottom: 6px; }
.veld input,
.veld select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.veld input:focus,
.veld select:focus { outline: 2px solid var(--groen); border-color: var(--groen); }
/* Zelfde hoogte als de invoervelden, en de eigen pijl van het besturingssysteem behouden:
   een zelfgetekende pijl gaat er per platform anders uitzien en levert niets op. */
.veld select { background: #fff; appearance: auto; }
.veld-verborgen { position: absolute; left: -9999px; }
.form-error {
  background: rgba(207, 34, 46, 0.08);
  color: var(--rood);
  border: 1px solid rgba(207, 34, 46, 0.3);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.privacy-note { margin-top: 14px; font-size: 0.88rem; color: var(--tekst-licht); }

.bedankt { padding: 96px 0; text-align: center; }
.bedankt-inner { max-width: 520px; }
.bedankt-vink {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(26, 127, 55, 0.12);
  color: var(--groen);
  font-size: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.bedankt p { color: var(--tekst-licht); margin: 12px 0; }
.bedankt .btn { margin-top: 20px; }

.site-footer { border-top: 1px solid var(--rand); padding: 28px 0; text-align: center; color: var(--tekst-licht); font-size: 0.9rem; }

html.js .reveal { opacity: 0; }
html.js .reveal.in-view { animation: reveal-up 550ms var(--ease-out-strong) both; }
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; }
  html.js .reveal.in-view { animation: none; }
}

@media (max-width: 820px) {
  .hero { padding: 48px 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .kaarten, .stappen, .prijs-grid { grid-template-columns: 1fr; }
  /* Op een telefoon eerst de uitleg, dan pas de afbeelding: anders duwt een halve A4 de tekst
     en de knop onder de vouw. */
  .voorbeeld-inner { grid-template-columns: 1fr; gap: 28px; }
  .voorbeeld-visual { max-height: 380px; }
  /* Op desktop hangen de chips bewust net buiten de rapportkaart. Op een telefoon is daar geen
     ruimte voor: de rechterchip stak 5 pixels buiten het scherm en zou door de clip op .hero
     worden afgesneden. Hier haken ze aan de binnenkant van de kaart. */
  .chip-goedgekeurd { top: -14px; right: 6px; }
  .chip-punten { bottom: -12px; left: 6px; }
  .chip { font-size: 0.8rem; padding: 7px 13px; }
  .probleem, .werkwijze, .nieuwbouw, .prijs, .over, .faq, .aanvraag { padding: 56px 0; }
  .prijs-grid { row-gap: 32px; }
}

/* ---- Intakeformulier (intake.html) ---- */

.intake { padding: 56px 0 72px; }
.intake-inner { max-width: 680px; }
.intake-inner h1 { margin-bottom: 18px; }
.intake-lead { color: var(--tekst-licht); margin-bottom: 14px; }
.intake-lead strong { color: var(--tekst); }

.intake-groep {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--rand);
}
.intake-groep:first-of-type { border-top: 0; padding-top: 0; }
.intake-groep h2 { font-size: 1.3rem; margin-bottom: 6px; }
.groep-intro { color: var(--tekst-licht); margin-bottom: 20px; }

.vraag { border: 0; margin-bottom: 26px; }
.vraag legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.vraag-waarom {
  color: var(--tekst-licht);
  font-size: 0.92rem;
  margin: -4px 0 10px;
}
.vraag > input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.vraag > input[type="text"]:focus { outline: 2px solid var(--groen); border-color: var(--groen); }

.opties { display: flex; flex-wrap: wrap; gap: 8px; }
.optie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s var(--ease-out-strong), background 0.15s var(--ease-out-strong);
}
.optie:hover { border-color: var(--groen); }
.optie input { accent-color: var(--groen); margin: 0; }
.optie:has(input:checked) {
  border-color: var(--groen);
  background: rgba(26, 127, 55, 0.07);
  font-weight: 600;
}
.optie:has(input:focus-visible) { outline: 2px solid var(--groen); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .optie { transition: none; }
}

/* ==========================================================================
   Het verhaal (sinds 13-08-2026): waarom een keuring, en tegen wie we het
   opnemen. Opzet volgens de HEY-les uit het conversie-onderzoek: korte
   alinea's waar de lezer bij elke zin "ja" op knikt, en dan de twee kolommen
   die een kant kiezen. Zie wiki/methode-website-conversie.md in het brein.
   ========================================================================== */

.verhaal { padding: 72px 0; background: var(--achtergrond-zacht); }
.verhaal-inner { max-width: 720px; }
.verhaal h2 { margin-bottom: 20px; }
.verhaal p { color: var(--tekst-licht); margin-bottom: 14px; max-width: 60ch; }
.verhaal p:last-of-type { color: var(--tekst); font-weight: 600; }

.vergelijk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.vergelijk-kolom {
  border-radius: 12px;
  padding: 22px 24px;
  border: 1px solid var(--rand);
  background: #fff;
}

.vergelijk-kolom h3 { font-size: 1rem; margin-bottom: 12px; }

.vergelijk-kolom ul { list-style: none; }

.vergelijk-kolom li {
  padding: 7px 0 7px 26px;
  position: relative;
  color: var(--tekst-licht);
  font-size: 0.95rem;
}

.vergelijk-kolom li::before {
  position: absolute;
  left: 0;
  top: 7px;
}

.vergelijk-zij h3 { color: var(--tekst-licht); }
.vergelijk-zij li::before { content: "✕"; color: var(--rood); }

.vergelijk-ik {
  border-color: rgba(26, 127, 55, 0.45);
  box-shadow: var(--schaduw-kaart);
}
.vergelijk-ik h3 { color: var(--groen-donker); }
.vergelijk-ik li { color: var(--tekst); }
.vergelijk-ik li::before { content: "✓"; color: var(--groen); font-weight: 700; }

@media (max-width: 720px) {
  .vergelijk { grid-template-columns: 1fr; }
}

/* Scanbare opsomming bij het voorbeeldrapport (NN/g: een homepage leest
   niemand als proza) */
.voorbeeld-lijst { list-style: none; margin-bottom: 14px; }
.voorbeeld-lijst li {
  position: relative;
  padding: 6px 0 6px 26px;
  color: var(--tekst-licht);
}
.voorbeeld-lijst li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--groen);
  font-weight: 700;
}