/* Creditcard24.nl — huisstijl naar docs/ontwerp/Creditcard24 Redesign.dc.html
   Wit, inkt, één groen accent en geel als signaal. Manrope met tabulaire cijfers. */

@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format('woff2'); }

:root {
  --inkt: #101614;
  --tekst: #24312B;
  --tekst-2: #37483F;
  --grijs: #4A574F;
  --grijs-2: #8A968F;
  --lijn: #EAEFEC;
  --lijn-2: #E1E8E4;
  --vlak: #F5F8F6;
  --groen: #00694F;
  --groen-donker: #004F3B;
  --groen-licht: #E6F4EE;
  --groen-tekst: #A6D6C6;
  --geel: #FFC94A;
  --geel-licht: #FFF4D6;
  --geel-tekst: #9A6B00;
  --rood-licht: #FBE9E4;
  --rood: #9A3B28;
  --wit: #ffffff;
  --rand: 1280px;
  --goot: 40px;
  --sectie: 120px;
  --r-xl: 40px;
  --r-l: 32px;
  --r-m: 24px;
  --r-s: 18px;
  --h1: clamp(42px, 6.2vw, 82px);
  --h1-s: clamp(38px, 5vw, 68px);
  --h2: clamp(32px, 4.4vw, 58px);
  --h2-s: clamp(30px, 3.9vw, 52px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--wit); color: var(--inkt);
  font-family: Manrope, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--groen); text-decoration: none; }
a:hover { color: var(--groen-donker); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; text-wrap: pretty; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skiplink { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--geel); color: var(--inkt); padding: 12px 18px; border-radius: 999px; font-weight: 700; }
.skiplink:focus { left: 16px; }

.rand { max-width: var(--rand); margin: 0 auto; padding-left: var(--goot); padding-right: var(--goot); }
.sectie { padding-top: var(--sectie); padding-bottom: var(--sectie); }
.sectie--vlak { background: var(--vlak); }
.sectie--groen { background: var(--groen); color: var(--wit); }
.sectie--inkt { background: var(--inkt); color: var(--wit); }
.sectie--licht { background: var(--groen-licht); }
.stapel { display: flex; flex-direction: column; gap: var(--gap, 24px); }
.rij { display: flex; flex-wrap: wrap; gap: var(--gap, 16px); align-items: center; }
.raster { display: grid; gap: var(--gap, 28px); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 290px), 100%), 1fr)); }
.kop-rij { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }

.label { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--groen); }
.label--grijs { color: var(--grijs-2); }
.label--geel { color: var(--geel); }
.h1 { font-size: var(--h1); line-height: 0.98; }
.h1-s { font-size: var(--h1-s); line-height: 1; }
.h2 { font-size: var(--h2); line-height: 1.02; }
.h2-s { font-size: var(--h2-s); line-height: 1.04; }
.h3 { font-size: clamp(24px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.12; }
.lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.55; color: var(--grijs); max-width: 52ch; }
.klein { font-size: 16px; line-height: 1.5; color: var(--grijs); }
.mini { font-size: 15px; line-height: 1.5; color: var(--grijs-2); }
.groen { color: var(--groen); }
.vet { font-weight: 800; }

/* Knoppen ------------------------------------------------------------------ */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 18px; line-height: 1.2; white-space: nowrap; cursor: pointer;
  text-align: center; transition: background .15s, border-color .15s, color .15s;
}
.knop--groot { padding: 21px 36px; font-size: 19px; }
.knop--klein { padding: 11px 18px; font-size: 16px; min-height: 44px; }
.knop--vol { width: 100%; }
.knop--primair { background: var(--groen); color: var(--wit); }
.knop--primair:hover { background: var(--groen-donker); color: var(--wit); }
.knop--geel { background: var(--geel); color: var(--inkt); }
.knop--geel:hover { background: #F2B82E; color: var(--inkt); }
.knop--inkt { background: var(--inkt); color: var(--wit); }
.knop--inkt:hover { background: var(--groen); color: var(--wit); }
.knop--lijn { border-color: var(--inkt); color: var(--inkt); background: none; }
.knop--lijn:hover { background: var(--geel); border-color: var(--geel); color: var(--inkt); }
.knop--zacht { border-color: var(--lijn); color: var(--inkt); background: none; }
.knop--zacht:hover { border-color: var(--inkt); color: var(--inkt); }
.knop--wit-lijn { border-color: #3A463F; color: var(--wit); background: none; }
.knop--wit-lijn:hover { border-color: var(--wit); color: var(--wit); }
.knop--wit { background: var(--wit); color: var(--inkt); }
.knop--wit:hover { background: var(--geel); color: var(--inkt); }
.tekstlink { font-weight: 700; color: var(--groen); background: none; border: 0; padding: 0; cursor: pointer; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 15px; font-weight: 800; background: var(--wit); white-space: nowrap; }
.pill--geel { background: var(--geel); color: var(--inkt); }
.pill--vlak { background: var(--vlak); color: var(--grijs); font-weight: 700; }
.pill--groen { background: var(--groen-licht); color: var(--groen); }

/* Keuzeknoppen (filters, keuzehulp) */
.optie {
  cursor: pointer; border: 2px solid var(--lijn); background: var(--wit); color: var(--inkt);
  border-radius: 999px; padding: 11px 18px; min-height: 44px; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.optie:hover { border-color: var(--groen); }
.optie[aria-pressed="true"], .optie.is-actief, input:checked + .optie { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.optie--groot { padding: 20px 30px; font-size: 20px; text-align: left; white-space: normal; }
.optie-radio { position: absolute; opacity: 0; pointer-events: none; }
label:has(> .optie-radio) { display: inline-flex; position: relative; }
.optie-radio:focus-visible + .optie { outline: 3px solid var(--geel); outline-offset: 3px; }

.chip { cursor: pointer; border: 0; background: var(--groen-licht); color: var(--groen); padding: 11px 18px; min-height: 44px; border-radius: 999px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.chip:hover { background: var(--geel); color: var(--inkt); }

.vinkje { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.vinklijst { display: flex; flex-direction: column; gap: 16px; font-size: 19px; font-weight: 500; list-style: none; margin: 0; padding: 0; }
.vinklijst li { display: flex; gap: 16px; align-items: center; }
.pluslijst, .minlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.5; }
.pluslijst li, .minlijst li { display: flex; gap: 12px; }
.pluslijst li::before { content: '✓'; color: var(--groen); font-weight: 800; }
.minlijst li::before { content: '✕'; color: var(--geel-tekst); font-weight: 800; }

/* Header ------------------------------------------------------------------- */
.kopbalk { position: sticky; top: 0; z-index: 40; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kopbalk__binnen { display: flex; align-items: center; gap: 28px; min-height: 88px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--inkt); }
.logo:hover { color: var(--inkt); }
.logo__teken { display: block; width: 37px; height: 24px; flex: 0 0 auto; }
.logo__naam { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.menu { display: flex; gap: 30px; align-items: center; font-size: 17px; font-weight: 600; margin: 0; padding: 0; list-style: none; }
.menu > li { position: relative; }
.menu a, .menu__knop { color: var(--inkt); background: none; border: 0; padding: 8px 0; cursor: pointer; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.menu a:hover, .menu__knop:hover, .menu a[aria-current="page"] { color: var(--groen); }
.menu__knop::after { content: '▾'; font-size: 12px; color: var(--grijs); }
.uitklap { position: absolute; top: 44px; left: -20px; z-index: 60; background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-m); padding: 14px; width: 306px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px rgba(16, 22, 20, .12); list-style: none; margin: 0; }
.uitklap.is-open { display: flex; }
.uitklap a { display: block; padding: 14px 18px; border-radius: 16px; font-weight: 700; font-size: 17px; }
.uitklap a:hover { background: var(--vlak); }
.uitklap a.uitklap__accent { background: var(--groen-licht); color: var(--groen); margin-top: 6px; }
.uitklap a.uitklap__accent:hover { background: var(--geel); color: var(--inkt); }
.kopbalk__rechts { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.kopbalk__tel { font-size: 16px; font-weight: 600; color: var(--grijs); white-space: nowrap; }
.hamburger { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--lijn); background: var(--wit); cursor: pointer; align-items: center; justify-content: center; }
.hamburger span, .hamburger span::before, .hamburger span::after { display: block; width: 20px; height: 2px; background: var(--inkt); position: relative; content: ''; }
.hamburger span::before { position: absolute; top: -6px; }
.hamburger span::after { position: absolute; top: 6px; }

/* Auteursregel ------------------------------------------------------------- */
.auteur { display: inline-flex; align-items: center; gap: 14px; background: var(--vlak); border-radius: 999px; padding: 10px 24px 10px 12px; width: fit-content; color: var(--tekst); font-size: 16px; line-height: 1.45; }
.auteur:hover { background: var(--geel); color: var(--tekst); }
.auteur--wit { background: var(--wit); }
.auteur__foto { width: 34px; height: 34px; border-radius: 999px; background: var(--groen); color: var(--geel); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex: 0 0 auto; overflow: hidden; }
.auteur__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Hero home ---------------------------------------------------------------- */
.hero { padding-top: 96px; padding-bottom: 120px; }
.hero__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 80px; align-items: center; }
.hero h1 .accent { color: var(--groen); }
.routes { background: var(--groen-licht); border-radius: var(--r-xl); padding: 44px; display: flex; flex-direction: column; gap: 20px; }
.route { display: flex; flex-direction: column; gap: 8px; background: var(--wit); border-radius: var(--r-m); padding: 26px 28px; color: var(--inkt); }
.route:hover { background: var(--geel); color: var(--inkt); }
.route__titel { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.route__tekst { font-size: 17px; line-height: 1.5; color: var(--grijs); }

.cijferbalk { background: var(--inkt); color: var(--wit); padding: 56px 0; }
.cijferbalk__waarde { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--geel); line-height: 1.1; }
.cijferbalk__label { font-size: 17px; color: #C3D0C9; margin-top: 6px; }

/* Kaartbeeld --------------------------------------------------------------- */
.kaartbeeld { aspect-ratio: 1.586; border-radius: 20px; background: linear-gradient(135deg, #F5F8F6, #EAEFEC); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: 1px solid var(--lijn); }
.kaartbeeld img { max-width: 62%; max-height: 52%; object-fit: contain; }
.kaartbeeld--render img { max-width: 100%; max-height: 100%; }
.kaartbeeld__chip { position: absolute; left: 9%; top: 34%; width: 13%; aspect-ratio: 1.3; border-radius: 6px; background: linear-gradient(135deg, #E3D7A8, #CDBB7A); opacity: .8; }
.kaartbeeld--groot { border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 105, 79, .16); background: linear-gradient(135deg, #fff, #F0F7F3); }
.kaartbeeld--klein { border-radius: 18px; }

/* Kaart-tegel (top 3) ------------------------------------------------------ */
.tegel { background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 24px; }
.tegel:hover { border-color: var(--groen); }
.tegel__naam { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--inkt); }
.cijfers { display: flex; flex-direction: column; gap: 14px; background: var(--vlak); border-radius: 20px; padding: 22px; margin: 0; }
.cijfers > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 18px; }
.cijfers dt { color: var(--grijs); white-space: nowrap; }
.cijfers dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.cijfers dd.groot { font-weight: 800; font-size: 22px; }
.tegel .knop { margin-top: auto; }
.tegel__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; white-space: nowrap; }
/* Top 3: elke rij (kop, beeld, naam, cijfers, voetnoot, knop) even hoog in alle tegels */
@supports (grid-template-rows: subgrid) {
  .raster--tegels { row-gap: 0; }
  .raster--tegels .tegel { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 24px; margin-bottom: 28px; }
  .raster--tegels .tegel .cijfers, .raster--tegels .tegel .knop { align-self: start; }
  .raster--tegels .tegel .knop { align-self: end; }
}

/* Vergelijking prepaid vs credit ------------------------------------------ */
.tabelkaart { position: relative; background: var(--wit); border-radius: var(--r-l); padding: 12px 32px 20px; overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 18px; }
.tabel th, .tabel td { text-align: left; padding: 20px 16px 20px 0; border-top: 1px solid var(--lijn); vertical-align: baseline; }
.tabel thead th { border-top: 0; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs-2); padding-top: 24px; padding-bottom: 18px; }
.tabel tbody th { font-weight: 500; color: var(--grijs); }
.tabel td { font-weight: 700; }
.tabel td.groen { color: var(--groen); }

.letop { background: var(--geel); border-radius: var(--r-m); padding: 28px; }
.letop p { font-size: 18px; line-height: 1.55; }
.letop .label { color: var(--inkt); margin-bottom: 10px; display: block; }

.voordeel { border-radius: var(--r-l); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.voordeel__nr { font-size: 20px; font-weight: 800; }
.voordeel p { font-size: 18px; line-height: 1.6; }
.voordeel--groen { background: var(--groen-licht); } .voordeel--groen .voordeel__nr { color: var(--groen); }
.voordeel--geel { background: var(--geel-licht); } .voordeel--geel .voordeel__nr { color: var(--geel-tekst); }
.voordeel--vlak { background: var(--vlak); } .voordeel--vlak .voordeel__nr { color: var(--grijs); }

.artikelkaart { display: flex; flex-direction: column; gap: 14px; border-radius: var(--r-l); background: var(--vlak); padding: 36px 32px; color: var(--inkt); }
.artikelkaart:hover { background: var(--groen-licht); color: var(--inkt); }
.artikelkaart--lijn { background: var(--wit); border: 2px solid var(--lijn); }
.artikelkaart--lijn:hover { background: var(--wit); border-color: var(--groen); }
.artikelkaart__titel { font-size: clamp(22px, 2vw, 27px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.artikelkaart__tekst { font-size: 18px; line-height: 1.55; color: var(--grijs); }
.artikelkaart__meta { font-size: 16px; color: var(--grijs-2); margin-top: auto; padding-top: 10px; }

.cta-blok { background: var(--geel); border-radius: var(--r-xl); padding: 80px; display: flex; justify-content: space-between; align-items: center; gap: 40px 56px; flex-wrap: wrap; }
.cta-blok p { font-size: 21px; line-height: 1.55; color: #3D3316; }

/* Vergelijker -------------------------------------------------------------- */
.vergelijker { display: grid; grid-template-columns: minmax(280px, 316px) minmax(0, 1fr); gap: 44px; align-items: start; }
.filters { position: sticky; top: 112px; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 32px; background: var(--vlak); border-radius: var(--r-l); padding: 34px 30px; border: 0; margin: 0; }
.filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.filters legend { padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs-2); }
.filters__opties { display: flex; flex-wrap: wrap; gap: 10px; }
.filters .optie { border-color: var(--wit); padding: 9px 14px; font-size: 15px; min-height: 40px; }
.filters { gap: 26px; }
.vink { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; line-height: 1.4; cursor: pointer; font-weight: 500; }
.vink input { margin: 2px 0 0; accent-color: var(--groen); width: 20px; height: 20px; flex: 0 0 auto; }
.schuif { width: 100%; accent-color: var(--groen); }
.filters__knoppen { display: flex; flex-direction: column; gap: 10px; }
.js .filters__toepassen { display: none; }
.resultaten { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.resultaten__kop { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 8px; }
.resultaten__aantal { font-size: 22px; font-weight: 700; }
.sorteer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sorteer .optie { border-color: var(--wit); background: var(--vlak); }
.sorteer .optie.is-actief { background: var(--groen); color: var(--wit); border-color: var(--groen); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.filterknop-mobiel { display: none; }

.kaartrij { background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 32px; display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; gap: 28px; align-items: stretch; transition: border-color .15s; }
.kaartrij:hover { border-color: var(--groen); }
.kaartrij[hidden] { display: none; }
.kaartrij__beeld { min-width: 0; }
.kaartrij__midden { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kaartrij__naam { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; color: var(--inkt); line-height: 1.1; }
.kaartrij__naam:hover { color: var(--groen); }
.kerncijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; background: var(--vlak); border-radius: 20px; padding: 20px 24px; margin: 0; }
.kerncijfers dt { font-size: 15px; color: var(--grijs); margin-bottom: 5px; }
.kerncijfers dd { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.kaartrij__kenmerken { display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 17px; color: var(--tekst-2); font-weight: 600; }
.kaartrij__rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kaartlijst { container-type: inline-size; }
@container (max-width: 1000px) {
  .kaartrij { grid-template-columns: 130px minmax(0, 1fr); }
  .kaartrij__rechts { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kaartrij__rechts .score { margin-right: auto; }
  .kaartrij__rechts .vergelijkvink { margin-top: 0; padding-top: 0; }
}
@container (max-width: 620px) {
  .kaartrij { padding: 22px 18px; gap: 18px; grid-template-columns: 96px minmax(0, 1fr); }
  .kaartrij__rechts { grid-column: 1 / -1; }
  .kaartrij__rechts .knop { flex: 1 1 140px; }
  .kerncijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.score { display: flex; align-items: baseline; gap: 10px; }
.score__cijfer { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--groen); }
.vergelijkvink { display: flex; gap: 11px; align-items: center; font-size: 17px; font-weight: 600; cursor: pointer; margin-top: auto; padding-top: 10px; min-height: 44px; }
.vergelijkvink input { accent-color: var(--groen); width: 20px; height: 20px; }

.leeg { background: var(--vlak); border-radius: var(--r-l); padding: 72px 40px; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.leeg p { font-size: 19px; line-height: 1.6; color: var(--grijs); max-width: 48ch; }
.leeg[hidden] { display: none; }

.vergelijkbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--inkt); color: var(--wit); transform: translateY(110%); visibility: hidden; transition: transform .2s, visibility .2s; }
.vergelijkbalk.is-zichtbaar { transform: none; visibility: visible; }
.vergelijkbalk:not(.is-zichtbaar) { display: none; }
.vergelijkbalk [data-naast].is-uit { opacity: .6; cursor: not-allowed; }
.vergelijkbalk__binnen { display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.vergelijkbalk__teller { background: var(--geel); color: var(--inkt); font-size: 16px; font-weight: 800; padding: 8px 15px; border-radius: 999px; }
.vergelijkbalk__namen { font-size: 18px; font-weight: 600; }
.vergelijkbalk__knoppen { margin-left: auto; display: flex; gap: 12px; }

/* Kaartdetail -------------------------------------------------------------- */
.kruimels { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 16px; font-weight: 600; color: var(--tekst-2); list-style: none; margin: 0; padding: 0; }
.kruimels a { color: var(--tekst-2); }
.kruimels a:hover { color: var(--groen); }
.kruimels li + li::before { content: '›'; color: var(--grijs-2); margin-right: 12px; }
.kruimels [aria-current] { color: var(--inkt); font-weight: 800; }
.detailhero { background: var(--groen-licht); padding: 36px 0 96px; }
.detailhero__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 72px; align-items: center; margin-top: 44px; }
.detailhero h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.04em; line-height: 0.98; }
.detailhero__intro { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.55; color: var(--tekst-2); max-width: 52ch; }
.detailhero .vinkje { background: var(--wit); }
.feitentegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.feitentegels > div { background: var(--wit); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.feitentegels dt { font-size: 15px; color: var(--grijs); }
.feitentegels dd { margin: 0; font-size: clamp(21px, 2vw, 26px); font-weight: 800; letter-spacing: -0.025em; }
.affnoot { font-size: 16px; line-height: 1.5; color: var(--tekst-2); max-width: 56ch; }

.ankerbalk { position: sticky; top: 88px; z-index: 30; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.ankerbalk__binnen { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; scrollbar-width: none; }
.ankerbalk a { font-size: 16px; font-weight: 700; color: var(--inkt); padding: 11px 18px; border-radius: 999px; white-space: nowrap; background: var(--vlak); }
.ankerbalk a:hover { background: var(--groen-licht); color: var(--groen); }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 72px; align-items: start; padding-top: 88px; padding-bottom: 140px; }
.detail__hoofd { display: flex; flex-direction: column; gap: 112px; min-width: 0; }
.blok { display: flex; flex-direction: column; gap: 30px; scroll-margin-top: 180px; }
.blok > p { font-size: 19px; line-height: 1.6; color: var(--grijs); }
.oordeel { font-size: 21px; line-height: 1.65; color: var(--tekst); max-width: 64ch; }
.scorekaart { background: var(--inkt); color: var(--wit); border-radius: var(--r-l); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.scorekaart__cijfer { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: var(--geel); line-height: 1; }
.balk { height: 10px; border-radius: 999px; background: #2A3630; }
.balk > span { display: block; height: 100%; border-radius: 999px; background: var(--geel); }
.plusmin { border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plusmin--plus { background: var(--groen-licht); }
.plusmin--min { background: var(--geel-licht); }
.plusmin__titel { font-size: 22px; font-weight: 800; }
.plusmin--plus .plusmin__titel { color: var(--groen); }
.plusmin--min .plusmin__titel { color: var(--geel-tekst); }
.persona { border: 2px solid var(--lijn); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.persona__titel { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
/* Redactiekaarten: foto blijft naast de naam; koppen, bio's, lijsten en links lopen gelijk over de kaarten */
.persona__kop { display: flex; align-items: flex-start; gap: 16px; }
.persona__kop > div { min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .raster--redactie { row-gap: 0; }
  .raster--redactie .persona { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; margin-bottom: 28px; align-items: start; }
}
.persona p { font-size: 17px; line-height: 1.55; color: var(--grijs); }
.niveau { font-size: 15px; font-weight: 800; padding: 8px 14px; border-radius: 999px; width: fit-content; }
.niveau--zeer { background: var(--groen); color: var(--wit); }
.niveau--ja { background: var(--groen-licht); color: var(--groen); }
.niveau--matig { background: var(--geel-licht); color: #7A5500; }
.niveau--nee { background: var(--rood-licht); color: var(--rood); }

.feiten { background: var(--vlak); border-radius: var(--r-l); padding: 14px 36px 22px; }
.feiten--lijn { background: none; border: 2px solid var(--lijn); }
.feiten__titel { padding: 20px 0 8px; }
.feiten table { width: 100%; border-collapse: collapse; }
.feiten th, .feiten td { text-align: left; vertical-align: baseline; padding: 18px 0; border-top: 1px solid var(--lijn-2); }
.feiten th { font-size: 18px; color: var(--grijs); font-weight: 400; width: 44%; padding-right: 20px; }
.feiten td { font-size: 19px; font-weight: 800; }
.feiten td small { display: block; font-size: 15px; line-height: 1.5; color: var(--grijs-2); font-weight: 400; margin-top: 4px; }

.rekenhulp { background: var(--inkt); color: var(--wit); border-radius: 36px; padding: 44px; display: flex; flex-direction: column; gap: 30px; }
.rekenhulp label { display: flex; justify-content: space-between; gap: 16px; font-size: 18px; color: #C3D0C9; }
.rekenhulp output { font-weight: 800; color: var(--wit); }
.rekenhulp input[type=range] { width: 100%; accent-color: var(--geel); }
.rekenregels { border-top: 1px solid #2A3630; }
.rekenregels > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #2A3630; font-size: 18px; }
.rekenregels span:first-child { color: #C3D0C9; }
.rekentotaal { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; }
.rekentotaal output { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--geel); }
.rekenvergelijk { background: #1F2A25; border-radius: 22px; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 17px; line-height: 1.5; color: #E3ECE7; }

.waarschuwing { background: var(--geel); border-radius: 28px; padding: 28px 32px; display: flex; flex-direction: column; gap: 8px; }
.waarschuwing strong { font-size: 22px; letter-spacing: -0.02em; }
.waarschuwing p { font-size: 18px; line-height: 1.55; }
.infovlak { background: var(--groen-licht); border-radius: 28px; padding: 32px; font-size: 19px; line-height: 1.6; color: var(--tekst); }
.extra { background: var(--vlak); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.extra__titel { font-size: 17px; font-weight: 700; color: var(--grijs); }
.extra__waarde { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--groen); }
.extra p { font-size: 16px; line-height: 1.55; color: var(--grijs); }
.extra--uit { background: none; border: 2px dashed #DCE3DF; }
.extra--uit .extra__titel, .extra--uit .extra__waarde, .extra--uit p { color: var(--grijs-2); }
.stap { display: flex; flex-direction: column; gap: 12px; }
.stap__nr { width: 52px; height: 52px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.stap__titel { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.stap p { font-size: 17px; line-height: 1.55; color: var(--grijs); }
.aanvraagbalk { background: var(--groen); color: var(--wit); border-radius: var(--r-l); padding: 36px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.aanvraagbalk strong { font-size: 26px; letter-spacing: -0.025em; display: block; }
.aanvraagbalk span { font-size: 17px; color: #C7E4D9; }

.alt-tabel { position: relative; overflow-x: auto; border: 2px solid var(--lijn); border-radius: var(--r-l); }
.alt-tabel table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 17px; }
.alt-tabel th, .alt-tabel td { text-align: left; padding: 20px 12px; border-top: 1px solid var(--lijn); }
.alt-tabel td { white-space: nowrap; }
.alt-tabel th:first-child, .alt-tabel td:first-child { padding-left: 28px; }
.alt-tabel thead th { border-top: 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs-2); }
.alt-tabel tbody th { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.alt-tabel tr.is-huidig { background: var(--groen-licht); }
.alt-tabel .huidig-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--groen); }

.faq details { border-top: 1px solid var(--lijn); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: clamp(19px, 1.8vw, 22px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.faq details[open] summary::after { content: '–'; }
.faq summary:hover { color: var(--groen); }
.faq details > div { padding: 0 64px 28px 0; font-size: 19px; line-height: 1.65; color: var(--tekst-2); }

.zijbalk { position: sticky; top: 176px; display: flex; flex-direction: column; gap: 18px; }
.zijkaart { background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.zijkaart__prijs { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--lijn); padding-top: 16px; }
.zijkaart__prijs strong { font-size: 30px; letter-spacing: -0.03em; }
.vlakkaart { background: var(--vlak); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.geelkaart { background: var(--geel); border-radius: 28px; padding: 26px; }
.geelkaart p { font-size: 17px; line-height: 1.55; }
.mobiele-aanvraag { display: none; }

.prose { max-width: 68ch; font-size: 19px; line-height: 1.7; color: var(--tekst); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.03em; line-height: 1.15; margin-top: 1.6em; color: var(--inkt); }
.prose h3 { font-size: clamp(22px, 2.2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; margin-top: 1.4em; color: var(--inkt); }
.prose h4 { font-size: 20px; letter-spacing: -0.01em; margin-top: 1.2em; color: var(--inkt); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 17px; display: block; overflow-x: auto; }
.prose th, .prose td { border-top: 1px solid var(--lijn); padding: 12px 12px 12px 0; text-align: left; vertical-align: top; }
.prose blockquote { background: var(--geel); border-radius: 28px; padding: 32px; margin: 1.4em 0; font-size: 22px; font-weight: 700; line-height: 1.4; }
.prose--breed { max-width: 78ch; }
.inklapper { position: relative; }
[data-inklapper].is-ingeklapt .prose { max-height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.inklapper__knop { margin-top: 16px; }

/* Naast elkaar -------------------------------------------------------------- */
.naast { position: relative; overflow-x: auto; }
.naast table { border-collapse: collapse; width: 100%; min-width: 640px; }
.naast th, .naast td { padding: 20px; border-top: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.naast thead th, .naast thead td { border-top: 0; vertical-align: bottom; }
.naast tbody th { font-size: 18px; color: var(--grijs); font-weight: 400; padding-left: 0; width: 220px; }
.naast tbody td { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.naast tr.is-verschil td { background: var(--geel-licht); }
.naast tr.is-gelijk td { color: var(--grijs); font-weight: 600; }
.alleen-verschil tr.is-gelijk { display: none; }
.naast__kaart { display: flex; flex-direction: column; gap: 14px; min-width: 180px; }
.naast__naam { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--inkt); }

/* Keuzehulp ---------------------------------------------------------------- */
.keuzehulp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 72px; align-items: start; }
.vraag { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.vraag legend { display: flex; gap: 16px; align-items: baseline; padding: 0; margin-bottom: 20px; }
.vraag__nr { font-size: 20px; font-weight: 800; color: var(--groen); }
.vraag__titel { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.vraag__opties { display: flex; gap: 14px; flex-wrap: wrap; }
.advies { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 20px; }
.advies__kaart { background: var(--vlak); border-radius: var(--r-l); padding: 34px; display: flex; flex-direction: column; gap: 20px; }
.advieskaart { background: var(--wit); border-radius: var(--r-m); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.advieskaart__naam { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }

/* Kennisbank --------------------------------------------------------------- */
.kbhero { background: var(--groen-licht); padding: 80px 0; }
.onderwerp { background: var(--vlak); border-radius: var(--r-l); padding: 34px; display: flex; flex-direction: column; gap: 6px; }
.onderwerp__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.onderwerp__naam { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.onderwerp ul { list-style: none; margin: 0; padding: 0; }
.onderwerp li a { display: block; padding: 10px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.onderwerp details summary { cursor: pointer; padding: 12px 0 0; font-weight: 700; color: var(--grijs); list-style: none; }
.onderwerp details summary::-webkit-details-marker { display: none; }
.kbartikel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 72px; align-items: start; padding-top: 48px; padding-bottom: 140px; }
.kbartikel h1 { font-size: clamp(36px, 4.5vw, 60px); line-height: 1.02; }
.kortantwoord { background: var(--groen-licht); border-radius: var(--r-l); padding: 32px; font-size: 20px; line-height: 1.6; color: var(--tekst); max-width: 68ch; }
.kortantwoord .label { display: block; margin-bottom: 10px; }
.inhoudsopgave { background: var(--vlak); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.inhoudsopgave ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; font-size: 18px; font-weight: 700; }
.leesook { border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; }
.leesook a { padding: 16px 0; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 5px; color: var(--inkt); }
.leesook a:hover { color: var(--groen); }
.leesook a strong { font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.groenkaart { background: var(--groen); color: var(--wit); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.groenkaart p { font-size: 17px; line-height: 1.55; color: #C7E4D9; }

/* Formulier ---------------------------------------------------------------- */
.formulier { background: var(--vlak); border-radius: var(--r-xl); padding: 44px; display: flex; flex-direction: column; gap: 22px; }
.veld { display: flex; flex-direction: column; gap: 9px; }
.veld label, .veld legend { font-size: 17px; font-weight: 700; }
.veld input, .veld textarea { border: 2px solid var(--lijn); background: var(--wit); border-radius: var(--r-s); padding: 16px 20px; font-size: 18px; min-height: 52px; }
.veld input:focus, .veld textarea:focus { border-color: var(--groen); outline: none; }
.veld textarea { resize: vertical; }
.veld .fout { color: var(--rood); font-size: 15px; font-weight: 700; }
.veld fieldset { border: 0; padding: 0; margin: 0; }
.melding { border-radius: var(--r-m); padding: 22px 26px; font-size: 18px; font-weight: 600; }
.melding--goed { background: var(--groen-licht); color: var(--groen-donker); }
.honing { position: absolute; left: -9999px; }

/* Footer ------------------------------------------------------------------- */
.voet { background: var(--inkt); color: #C3D0C9; }
.voet__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 56px; padding-top: 88px; padding-bottom: 44px; }
.voet .logo__naam { color: var(--wit); }
.voet p { font-size: 18px; line-height: 1.6; max-width: 34ch; }
.voet address { font-style: normal; font-size: 17px; line-height: 1.7; color: var(--grijs-2); }
.voet address a { color: var(--grijs-2); }
.voet h2 { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wit); margin-bottom: 4px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 18px; }
.voet ul a { color: #C3D0C9; }
.voet ul a:hover { color: var(--wit); }
.voet__onder { border-top: 1px solid #2A3630; display: flex; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; font-size: 16px; color: var(--grijs-2); padding-top: 28px; padding-bottom: 56px; }

/* Responsief --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .menu, .kopbalk__tel { display: none; }
  .hamburger { display: inline-flex; }
  .kopbalk__rechts { margin-left: 0; }
  .kopbalk.is-open .menu { display: flex; position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 24px; border-bottom: 1px solid var(--lijn); box-shadow: 0 18px 40px rgba(16, 22, 20, .08); max-height: calc(100vh - 80px); overflow-y: auto; }
  .kopbalk.is-open .menu > li > a, .kopbalk.is-open .menu__knop { padding: 14px 4px; min-height: 48px; width: 100%; font-size: 18px; }
  .kopbalk.is-open .uitklap { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 8px 8px; display: flex; }
  .kopbalk.is-open .menu__knop::after { display: none; }
  .detail, .kbartikel, .keuzehulp { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .zijbalk, .advies { position: static; }
}
@media (max-width: 900px) {
  :root { --goot: 16px; --sectie: 72px; }
  .vergelijker { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .filters { position: static; max-height: none; overflow: visible; display: none; padding: 26px 20px; }
  .filters.is-open { display: flex; }
  .filterknop-mobiel { display: inline-flex; }
  .hero { padding-top: 48px; padding-bottom: 72px; }
  .hero__raster, .detailhero__raster { gap: 40px; }
  .routes { padding: 24px; border-radius: 28px; }
  .cta-blok { padding: 40px 24px; border-radius: 28px; }
  .detailhero { padding: 24px 0 56px; }
  .detailhero__raster { margin-top: 28px; }
  .detail { padding-top: 56px; padding-bottom: 120px; }
  .detail__hoofd { gap: 72px; }
  .rekenhulp { padding: 28px 22px; border-radius: 28px; }
  .rekentotaal output { font-size: 34px; }
  .feiten { padding: 10px 20px 16px; }
  .feiten th, .feiten td { display: block; width: auto; padding: 0; border: 0; }
  .feiten tr { display: block; padding: 16px 0; border-top: 1px solid var(--lijn-2); }
  .feiten th { font-size: 16px; margin-bottom: 4px; }
  .tabelkaart { padding: 4px 18px 12px; }
  .tabel { font-size: 16px; }
  .tabel th, .tabel td { padding-right: 10px; }
  .kerncijfers { padding: 16px 18px; gap: 14px; }
  .kerncijfers dd { font-size: 20px; }
  .ankerbalk { top: 76px; }
  .kopbalk__binnen { min-height: 76px; gap: 14px; }
  .kopbalk__rechts .knop { padding: 12px 18px; font-size: 15px; }
  .formulier { padding: 26px 20px; border-radius: 28px; }
  .faq details > div { padding-right: 0; }
  .vergelijkbalk__knoppen { margin-left: 0; width: 100%; }
  .vergelijkbalk__knoppen .knop { flex: 1; white-space: normal; padding: 12px 14px; font-size: 16px; }
  .mobiele-aanvraag .knop { white-space: normal; padding: 14px 16px; }
  .mobiele-aanvraag { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--wit); border-top: 1px solid var(--lijn); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; box-shadow: 0 -10px 30px rgba(16, 22, 20, .08); }
  .mobiele-aanvraag .knop { flex: 1; }
  .mobiele-aanvraag__prijs { display: flex; flex-direction: column; font-size: 14px; color: var(--grijs); line-height: 1.2; }
  .mobiele-aanvraag__prijs strong { font-size: 20px; color: var(--inkt); }
  .naast tbody th { width: 140px; font-size: 16px; }
  .naast tbody td { font-size: 17px; }
}
@media (max-width: 480px) {
  .knop { white-space: normal; }
  .logo__naam { font-size: 19px; }
  .kopbalk__rechts .knop { display: none; }
  .knop--groot { padding: 18px 26px; font-size: 18px; white-space: normal; }
  .hero .rij .knop { width: 100%; }
  .feitentegels { gap: 10px; }
  .feitentegels > div { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .kopbalk, .ankerbalk, .voet, .vergelijkbalk, .mobiele-aanvraag, .zijbalk { display: none !important; }
}