/* ════════════════════════════════════════════════════════════════
   VROEMIE · REDACTIONEEL ONDERZOEK-STYLESHEET
   Gedeeld door alle inzicht-artikelen. Krant/editorial stijl:
   Newsreader (serif koppen) + Libre Franklin (body), cream papier,
   inkt-zwart met rood/groen/grijs accenten, dunne scheidslijnen.
   ════════════════════════════════════════════════════════════════ */

/* Huisstijl-fonts voor de topbalk (Fraunces wordmark + Sora nav) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,800&family=Sora:wght@500;600;700;800&display=swap');

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

:root{
  /* nieuw redactioneel palet */
  --paper:#f6f3ed; --card:#fffdf8; --panel:#fbf8f1;
  --ink:#1c1a16; --ink-75:#46423a; --ink-55:#6c675d; --ink-40:#928d82; --ink-28:#b3ada1;
  --rule:#e3ddd1; --rule-2:#d2cbbd;
  --red:#bd3a2b; --green:#2f7d52; --green-bg:#e8f0ea; --red-bg:#f6e9e6; --red-soft:#e4c4be;
  --link:#2f5fa8;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  /* ── legacy-aliassen: oude variabelen → nieuw palet ──
     zodat overgebleven inline-styles automatisch meekleuren */
  --cream:var(--paper); --cream-dark:#efe9df; --cream-mid:var(--rule); --white:var(--card);
  --indigo:var(--ink); --indigo-dark:var(--ink); --indigo-light:var(--panel);
  --coral:var(--red); --coral-dark:var(--red); --coral-light:var(--panel);
  --green-light:var(--green-bg);
  --ink-80:#3a362f; --ink-60:#46423a; --ink-25:#928d82; --ink-12:#d2cbbd; --ink-06:#e3ddd1;
  --body:var(--sans); --display:var(--serif);
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.container{max-width:768px;margin:0 auto;padding:0 24px 88px}
.container>h1:first-child{margin-top:34px}
.reading{max-width:660px}

/* ── NAV (Vroemie huisstijl) ──────────────────────────
   De topbalk wijkt bewust af van het redactionele artikel:
   indigo "V"-logo (Fraunces), Sora-nav, indigo pil-knop. */
nav{position:sticky;top:0;z-index:100;background:rgba(250,247,242,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;font-family:'Sora',-apple-system,system-ui,sans-serif}
nav.scrolled{border-bottom-color:#e8e0d4;background:rgba(250,247,242,.95)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1280px;margin:0 auto;padding:0 40px}
.wordmark{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:1.65rem;color:#1a1a2e;text-decoration:none;letter-spacing:-.04em}
.wordmark em{color:#6366f1;font-style:normal}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:.85rem;font-weight:500;color:#7c7c90;text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#1a1a2e}
/* body-CTA-knoppen (gratis taxatie e.d.) blijven redactioneel-donker */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:.82rem;padding:9px 18px;border-radius:6px;text-decoration:none;cursor:pointer;border:none;transition:background .2s}
.btn-indigo{background:var(--ink);color:var(--paper)}
.btn-indigo:hover{background:#332f28}
/* maar in de topbalk de huisstijl-pil */
nav .btn{font-family:'Sora',sans-serif;font-weight:600;font-size:.88rem;padding:12px 24px;border-radius:100px;transition:all .25s var(--ease)}
nav .btn-indigo{background:#6366f1;color:#fff!important}
nav .btn-indigo:hover{background:#4f46e5;transform:translateY(-2px);box-shadow:0 8px 28px rgba(99,102,241,.3)}
.mobile-cta{display:none}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:4.5px}
.hamburger span{display:block;width:20px;height:2px;background:#1a1a2e;border-radius:1px;transition:all .25s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
.mobile-menu{display:none;position:sticky;top:68px;background:rgba(250,247,242,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1.5px solid #e8e0d4;z-index:99;padding:8px 0;font-family:'Sora',sans-serif}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px 24px;font-size:.92rem;font-weight:500;color:#7c7c90;text-decoration:none}
.mobile-menu a:hover{color:#1a1a2e;background:rgba(0,0,0,.02)}
.mobile-menu a.mm-accent{color:#6366f1;font-weight:600}
@media(max-width:820px){.nav-links{display:none}.hamburger{display:flex}.mobile-cta{display:inline-flex;align-items:center;margin-left:auto;margin-right:8px;font-family:'Sora',sans-serif;font-weight:600;font-size:.82rem;padding:10px 18px;border-radius:100px;background:#6366f1;color:#fff!important;text-decoration:none}.nav-inner{padding:0 18px}}

/* ── KOP / HERO ───────────────────────────────────── */
.breadcrumb{font-size:.76rem;color:var(--ink-40);margin-top:30px;margin-bottom:22px}
.breadcrumb a{color:var(--ink-55);text-decoration:none}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline}

h1{font-family:var(--serif);font-size:2.5rem;font-weight:700;margin-bottom:16px;letter-spacing:-.015em;line-height:1.13}
h1 span{color:inherit;font-style:normal}
.subtitle{font-size:1.06rem;color:var(--ink-75);margin-bottom:16px;line-height:1.6}
.subtitle strong{color:var(--ink);font-weight:600}
.byline{font-size:.82rem;color:var(--ink-40);margin-bottom:40px}
.byline strong{color:var(--ink-75);font-weight:600}

.hero-stats{display:flex;gap:0;margin:8px 0 44px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hero-stat{flex:1;padding:22px 22px 20px;text-align:left}
.hero-stat+.hero-stat{border-left:1px solid var(--rule)}
.hero-stat .hs-value{font-family:var(--serif);font-size:1.95rem;font-weight:600;color:var(--ink);display:block;letter-spacing:-.02em;line-height:1}
.hero-stat .hs-label{font-size:.78rem;color:var(--ink-40);margin-top:11px;line-height:1.5}

.intro{font-size:1.04rem;color:var(--ink-75);margin-bottom:44px;line-height:1.72}
.intro p{margin-bottom:15px}
.intro p:last-child{margin-bottom:0}
.intro strong{color:var(--ink);font-weight:600}

/* ── SECTIEKOPPEN ─────────────────────────────────── */
h2{font-family:var(--serif);font-size:1.6rem;font-weight:700;margin-bottom:22px;margin-top:52px;letter-spacing:-.01em;line-height:1.2}
h2 a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;text-decoration-thickness:2px}
h2 a:hover{color:var(--link)}

/* ── KAART / GRAFIEK ──────────────────────────────── */
.chart-card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:28px 30px;margin-bottom:26px;overflow-x:auto}
.chart-header h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:3px;letter-spacing:-.01em}
.chart-meta{font-size:.8rem;color:var(--ink-40);margin-bottom:20px;line-height:1.5}

/* ── BODYTEKST ────────────────────────────────────── */
.article-text{margin-bottom:44px}
.article-text p{font-size:1.02rem;color:var(--ink-75);margin-bottom:16px;line-height:1.78}
.article-text h3{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--ink);margin-top:26px;margin-bottom:9px;letter-spacing:-.01em}
.article-text strong{color:var(--ink);font-weight:600}
.article-text a,.toc a,.faq-item a,.compare-table td a,.model-analyse a,.insight a,.honorable a,.methodology a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(47,95,168,.4)}
.article-text a:hover,.compare-table td a:hover,.model-analyse a:hover,.honorable a:hover{text-decoration-color:var(--link)}

/* ── TABELLEN ─────────────────────────────────────── */
.compare-table{width:100%;border-collapse:collapse;font-size:.85rem}
.compare-table thead{background:transparent}
.compare-table th{padding:11px 10px;text-align:left;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-40);border-bottom:1.5px solid var(--rule-2)}
.compare-table th.num{text-align:right}
.compare-table td{padding:11px 10px;border-bottom:1px solid var(--rule);color:var(--ink-55);vertical-align:top}
.compare-table td:first-child{font-weight:700;color:var(--ink)}
.compare-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.compare-table tr:last-child td{border-bottom:none}
.cheap{color:var(--green);font-weight:700}
.dear{color:var(--red);font-weight:700}

.rating-table{width:100%;border-collapse:collapse;font-size:.84rem;margin-bottom:4px}
.rating-table thead{background:transparent}
.rating-table th{padding:11px 8px;text-align:center;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-40);border-bottom:1.5px solid var(--rule-2)}
.rating-table th:first-child{text-align:left}
.rating-table td{padding:13px 8px;border-bottom:1px solid var(--rule);text-align:center}
.rating-table td:first-child{text-align:left;font-weight:700;color:var(--ink);padding-left:10px}
.rating-table tr:last-child td{border-bottom:none}

/* beoordeling = 3-punts meter (gevulde stippen = niveau) i.p.v. pills */
.pill{display:inline-block;width:39px;height:10px;font-size:0;color:transparent;border:none;padding:0;vertical-align:middle;background-repeat:no-repeat;background-image:
  radial-gradient(circle at 5px 50%, var(--d1) 4.5px, transparent 5px),
  radial-gradient(circle at 19.5px 50%, var(--d2) 4.5px, transparent 5px),
  radial-gradient(circle at 34px 50%, var(--d3) 4.5px, transparent 5px)}
.pill-green{--d1:var(--green);--d2:var(--green);--d3:var(--green)}        /* uitstekend / ruim */
.pill-indigo{--d1:var(--ink);--d2:var(--ink);--d3:var(--rule-2)}         /* goed */
.pill-gray{--d1:var(--ink-28);--d2:var(--rule-2);--d3:var(--rule-2)}     /* krap / beperkt */
.rating-table td{padding:15px 8px}

/* ── INDEX-STAVEN (horizontaal) ───────────────────── */
.idx-legend{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-40);margin-bottom:16px;font-weight:600}
.idx-row{display:flex;align-items:center;gap:12px;margin-bottom:7px;font-size:.82rem}
.idx-lbl{width:104px;text-align:right;font-weight:600;color:var(--ink);flex-shrink:0}
.idx-track{position:relative;flex:1;height:20px;background:var(--panel);border-radius:4px}
.idx-zero{position:absolute;left:60%;top:-2px;bottom:-2px;width:1.5px;background:var(--ink-40)}
.idx-bar{position:absolute;top:3px;bottom:3px;border-radius:3px}
.idx-bar.neg{background:var(--green)}
.idx-bar.pos{background:var(--red)}
.idx-val{width:52px;flex-shrink:0;font-weight:700;font-variant-numeric:tabular-nums}
.idx-val.neg{color:var(--green)}
.idx-val.pos{color:var(--red)}
.idx-val.zero{color:var(--ink-40)}

/* ── STAT-BLOKJES (per model) ─────────────────────── */
/* kerncijfers per model = strook met scheidslijnen i.p.v. losse kaartjes */
.chart-stats{display:flex;flex-wrap:wrap;gap:0;margin-bottom:18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat{flex:1;min-width:0;text-align:left;padding:14px 18px;background:none;border:none;border-radius:0}
.stat+.stat{border-left:1px solid var(--rule)}
.stat .stat-value{display:block;font-size:1.18rem;font-weight:600;color:var(--ink);font-family:var(--serif);letter-spacing:-.01em;line-height:1}
.stat .stat-label{display:block;font-size:.64rem;color:var(--ink-40);text-transform:uppercase;letter-spacing:.05em;margin-top:8px}
.stat.green .stat-value{color:var(--green)}
.stat.highlight .stat-value{color:var(--ink)}
@media(max-width:560px){
  .stat{flex:0 0 50%;padding:13px 14px}
  .stat+.stat{border-left:none}
  .stat:nth-child(odd){border-right:1px solid var(--rule)}
  .stat:nth-child(n+3){border-top:1px solid var(--rule)}
}
.insight-row{display:flex;flex-direction:column;gap:10px}
.insight{font-size:.84rem;color:var(--ink-55);line-height:1.7}

/* ── EV-SPECS ─────────────────────────────────────── */
.ev-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;margin-bottom:14px}
.ev-spec{padding:13px;background:var(--panel);border:1px solid var(--rule);border-radius:8px;text-align:center}
.ev-spec .spec-value{display:block;font-size:1rem;font-weight:700;color:var(--ink);font-family:var(--serif)}
.ev-spec .spec-label{font-size:.66rem;color:var(--ink-40);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.ev-spec.highlight{border-color:var(--rule-2)}
.ev-spec.highlight .spec-value{color:var(--ink)}

/* ── AFBEELDINGEN ─────────────────────────────────── */
.model-photo{width:100%;height:auto;border-radius:10px;margin-bottom:20px;aspect-ratio:21/9;object-fit:cover;background:var(--panel)}
.banner-photo{aspect-ratio:4/1;object-position:center 45%;margin-bottom:36px}
.photo-credit{font-size:.72rem;color:#b3ada1;text-align:right;margin:-12px 0 16px;letter-spacing:.02em}

/* ── CALLOUT ──────────────────────────────────────── */
.vroemie-callout{font-size:.9rem;color:var(--ink-75);background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--red);border-radius:10px;padding:16px 20px;margin-top:16px;margin-bottom:28px;line-height:1.6}
.vroemie-callout a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.model-analyse{margin-top:16px;padding:16px 20px;background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--ink);border-radius:8px}
.model-analyse p{font-size:.85rem;color:var(--ink-75);line-height:1.72;margin:0}

/* ── TOC ──────────────────────────────────────────── */
.toc{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:22px 26px;margin-bottom:44px}
.toc h2{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin:0 0 12px;text-transform:none;letter-spacing:0}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:7px;color:var(--ink-40)}
.toc a{font-size:.9rem;color:var(--link);text-decoration:none;font-weight:500}
.toc a:hover{text-decoration:underline}

/* ── FORMULE ──────────────────────────────────────── */
.formula-box{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:28px;margin:28px 0;text-align:center}
.formula-box .formula{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.formula-box p{font-size:.86rem;color:var(--ink-55);line-height:1.7;margin:0}

/* ── KENTEKEN-CTA ─────────────────────────────────── */
.kenteken-cta{margin:28px 0;padding:30px;background:var(--panel);border:1px solid var(--rule);border-radius:12px;text-align:center}
.kenteken-cta h3{font-family:var(--serif);font-size:1.22rem;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.kenteken-cta p{font-size:.88rem;color:var(--ink-55);max-width:480px;margin:0 auto 18px;line-height:1.6}
.kenteken-input-wrap{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.kenteken-input{font-family:var(--sans);font-size:1rem;font-weight:700;padding:13px 18px;border:1.5px solid var(--rule-2);border-radius:8px;text-align:center;text-transform:uppercase;letter-spacing:.12em;width:180px;background:var(--card);color:var(--ink);outline:none;transition:border-color .2s}
.kenteken-input:focus{border-color:var(--ink)}
.kenteken-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);font-weight:600;font-size:.9rem;padding:13px 26px;border-radius:8px;border:none;cursor:pointer;font-family:var(--sans);transition:background .2s}
.kenteken-btn:hover{background:#332f28}

/* ── METHODOLOGIE ─────────────────────────────────── */
.methodology{margin-top:44px;padding:30px 32px;background:var(--card);border:1px solid var(--rule);border-radius:12px}
.methodology h3{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin-bottom:14px}
.methodology p{font-size:.86rem;color:var(--ink-55);margin-bottom:9px;line-height:1.72}
.methodology strong{color:var(--ink);font-weight:600}

/* ── HONORABLE / EERVOLLE VERMELDINGEN ────────────── */
.honorable{margin-top:44px;padding:30px 32px;background:var(--card);border:1px solid var(--rule);border-radius:12px}
.honorable h3{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin-bottom:16px}
.honorable p{font-size:.88rem;color:var(--ink-55);margin-bottom:12px;line-height:1.72}
.honorable strong{color:var(--ink);font-weight:600}

/* ── BUDGET-GRID ──────────────────────────────────── */
.budget-grid{display:grid;grid-template-columns:auto repeat(3,1fr);margin-bottom:28px;font-size:.82rem;background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.budget-grid .bg-header{padding:13px 12px;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-40);background:var(--panel);border-bottom:1px solid var(--rule-2)}
.budget-grid .bg-model{padding:12px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--rule);display:flex;align-items:center}
.budget-grid .bg-cell{padding:12px;color:var(--ink-55);border-bottom:1px solid var(--rule);line-height:1.5}
.budget-grid .bg-cell strong{color:var(--ink);display:block}

/* ── FAQ ──────────────────────────────────────────── */
.faq{margin-top:52px}
.faq h2{margin-bottom:8px}
.faq-item{background:transparent;border:none;border-bottom:1px solid var(--rule);border-radius:0;padding:22px 0;margin-bottom:0}
.faq-item h3{font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.faq-item p{font-size:.9rem;color:var(--ink-55);line-height:1.74;margin:0}

/* ── CTA ──────────────────────────────────────────── */
.cta{margin-top:52px;text-align:center;padding:46px 36px;background:var(--ink);border-radius:14px}
.cta h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--paper);margin-bottom:10px;letter-spacing:-.01em}
.cta p{font-size:.92rem;color:rgba(246,243,237,.7);margin:0 auto 24px;max-width:460px;line-height:1.6}
.cta a,.cta a.btn{display:inline-block;background:var(--paper);color:var(--ink);font-weight:700;font-size:.9rem;padding:13px 32px;border-radius:8px;text-decoration:none;transition:transform .2s,background .2s}
.cta a:hover,.cta a.btn:hover{background:#fff;transform:translateY(-1px)}
/* inline tekstlinks binnen een CTA-alinea zijn GEEN knop */
.cta p a{display:inline;background:none;padding:0;border-radius:0;font-weight:600;color:var(--paper);text-decoration:underline;text-underline-offset:2px;transition:none}
.cta p a:hover{background:none;color:#fff;transform:none}

/* ── POPULAIRE LINKS ──────────────────────────────── */
.popular-links{margin-top:48px}
.popular-links h3{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin-bottom:16px}
.popular-grid{display:flex;flex-wrap:wrap;gap:8px}
.popular-grid a{display:inline-block;padding:8px 16px;background:var(--card);border:1px solid var(--rule);border-radius:100px;font-size:.82rem;font-weight:500;color:var(--ink-55);text-decoration:none;transition:all .2s}
.popular-grid a:hover{border-color:var(--ink);color:var(--ink)}

/* ── FOOTER ───────────────────────────────────────── */
.footer{text-align:center;padding:44px 24px;color:var(--ink-40);font-size:.78rem;border-top:1px solid var(--rule);margin-top:56px;line-height:1.9}
.footer strong{color:var(--ink-55)}
.footer a{color:var(--ink-55);margin:0 7px;text-decoration:none}
.footer a:hover{color:var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── RESPONSIVE ───────────────────────────────────── */
@media(max-width:820px){
  h1{font-size:2rem}
  h2{font-size:1.35rem}
  .nav-inner{padding:0 18px}
}
@media(max-width:600px){
  .container{padding:0 16px 60px}
  h1{font-size:1.7rem}
  .hero-stats{flex-wrap:wrap}
  .hero-stat{flex:0 0 50%;border-left:none}
  .hero-stat:nth-child(2)~.hero-stat{border-top:1px solid var(--rule)}
  .hero-stat:nth-child(odd){border-right:1px solid var(--rule)}
  .chart-card{padding:20px 16px}
  .methodology,.honorable,.kenteken-cta{padding:22px 18px}
  .compare-table,.rating-table{font-size:.76rem}
  .compare-table th,.compare-table td,.rating-table th,.rating-table td{padding:8px 6px}
  .ev-specs{grid-template-columns:1fr 1fr}
  .idx-lbl{width:80px;font-size:.76rem}
  .idx-val{width:46px;font-size:.76rem}
}