/* Lettertypen: zelf gehost (Fase 5) — geen verbinding met Google Fonts meer */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }

/* vgc.css — gedeelde stijlen van vermogensgroeicalculator.nl (Fase 4a, 2026-09-09).
   Bevat uitsluitend CSS-blokken die op alle pagina's letterlijk identiek waren; per pagina wordt de oorspronkelijke
   cascadevolgorde bewaakt (blokken blijven waar nodig ook inline). */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ overflow-x:hidden; }
html[data-theme="dark"]{
    --gold-deep:#4FD38C;
    --gold-text:#4FD38C;
    --gold:#0FB864;
    --sage:#4FD38C;
    --low:#E0A83A;
    --paper:#0F1E3A;
    --paper-dim:#16294B;
    --ink:#E9EEF7;
    --ink-soft:#B7C4DA;
    --line:rgba(255,255,255,0.14);
  }
.skip-link{
    position:absolute; left:-9999px; top:8px; z-index:100;
    background:var(--gold); color:#082250; font-weight:600; font-size:13px;
    padding:10px 14px; border-radius:999px; text-decoration:none;
  }
.skip-link:focus{ left:16px; outline:2px solid #fff; outline-offset:2px; }
.wrap{ max-width:640px; margin:0 auto; }
@media (min-width: 860px){
    .wrap{ max-width:760px; }
    body{ padding-top:48px; }
  }
@media (min-width: 1100px){
    .wrap{ max-width:900px; }
  }
.masthead{
    color:var(--paper);
    padding:8px 4px 28px;
  }
.site-logo{ display:inline-flex; flex:0 0 auto; min-width:0; }
.header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.menu-toggle{
    display:none;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(8,34,80,0.35);
    background:rgba(8,34,80,0.06);
    color:var(--gold-soft);
    cursor:pointer;
    align-items:center;
    justify-content:center;
  }
.menu-toggle svg{ width:17px; height:17px; }
.site-nav{
    display:flex;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 4px 22px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
.site-nav::-webkit-scrollbar{ display:none; }
.nav-link{
    flex:0 0 auto;
    white-space:nowrap;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--gold-soft);
    text-decoration:none;
    border:1px solid rgba(8,34,80,0.35);
    background:rgba(8,34,80,0.05);
    padding:7px 14px;
    border-radius:999px;
    transition:background .15s ease, border-color .15s ease;
  }
.nav-link:hover{ background:rgba(8,34,80,0.12); border-color:var(--gold-soft); }
.nav-link.active{
    background:var(--gold);
    border-color:var(--gold);
    color:#082250;
    font-weight:600;
  }
@media (max-width: 560px){
    .menu-toggle{ display:flex; }
    .site-nav{
      display:none;
      flex-direction:column;
      overflow-x:visible;
      gap:6px;
      margin:0 4px 18px;
      padding:10px;
      background:rgba(0,0,0,0.15);
      border-radius:14px;
    }
    .site-nav.open{ display:flex; }
    .nav-link{ width:100%; text-align:left; }
  }
.masthead .eyebrow{
    font-size:13px;
    color:var(--gold-soft);
    letter-spacing:0.02em;
    margin:0 0 8px;
    display:flex;
    align-items:center;
    gap:8px;
  }
.masthead .eyebrow::before{
    content:'';
    display:inline-block;
    width:22px;
    height:1px;
    background:var(--gold-soft);
  }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .icon-moon{ display:block; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
html{ scroll-behavior:smooth; }
[id^="sectie-"]{ scroll-margin-top:16px; }
/* ---------- Desktop sidebar (site menu + sections of this page) ---------- */
  .sidebar{ display:none; }
.sidebar-title{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#FAE3A6; margin:0 0 6px; padding:0 10px; }
.sidebar-link, .sidebar-section{ display:block; text-decoration:none; font-size:13.5px; color:#3F5A80; padding:8px 10px; border-radius:10px; margin-bottom:2px; transition:background .15s ease, color .15s ease; }
.sidebar-link:hover, .sidebar-section:hover{ background:rgba(8,34,80,0.08); color:#FBF6E3; }
.sidebar-link.active{ background:var(--gold); color:#082250; font-weight:600; }
.sidebar-section.active{ background:rgba(8,34,80,0.10); color:var(--gold-soft); font-weight:600; box-shadow:inset 3px 0 0 var(--gold); }
.sidebar-section.sub{ padding-left:24px; font-size:13px; }
.sidebar-divider{ height:1px; background:rgba(8,34,80,0.22); margin:14px 10px; }
@media (min-width: 960px){
    .wrap{ display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:28px; align-items:start; max-width:1000px; }
    .wrap > .site-header{ grid-column:1 / -1; }
    .wrap > .site-nav, .wrap > .jump-menu{ display:none !important; }
    .wrap > .sidebar{ display:block; grid-column:1; grid-row:2 / span 100; position:sticky; top:16px; }
    .wrap > *:not(.sidebar):not(.site-header):not(.context-col){ grid-column:2; }
    .wrap > .context-col{ grid-column:2; }
  }
@media (min-width: 1100px){ .wrap{ max-width:1040px; } }
.to-top{
    position:fixed; right:16px; bottom:20px; z-index:80;
    width:40px; height:40px; border-radius:50%;
    background:var(--gold); color:#082250; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(0,0,0,0.32);
    opacity:0; pointer-events:none; transform:translateY(12px);
    transition:opacity .2s ease, transform .2s ease, background .15s ease;
  }
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:var(--gold-soft); }
.to-top svg{ width:20px; height:20px; }
body.has-sticky .to-top{ bottom:92px; }
@media print{ .to-top{ display:none !important; } }
/* ===== Witte basis + navy/groen palet (v2) — pagina-niveau elementen ===== */
  body{ color:var(--ink); }
.masthead, .masthead h1{ color:var(--ink); }
.masthead p{ color:var(--ink-soft); }
.masthead .eyebrow{ color:var(--gold-deep); }
.masthead .eyebrow::before{ background:var(--gold-deep); }
.section-label, .sidebar-title, .next-label, .analysis-top-label, .analysis-label{ color:var(--gold-deep); }
.trust-badge{ color:var(--ink); background:#FFFFFF; border:1px solid var(--line); }
.trust-badge svg{ color:var(--gold-deep); }
.nav-link, .jump-link, .scenario-btn, .theme-toggle, .menu-toggle{ color:var(--ink-soft); background:#FFFFFF; border-color:var(--line); }
.nav-link:hover, .jump-link:hover, .scenario-btn:hover{ background:rgba(10,168,92,0.08); border-color:var(--gold); color:var(--gold-deep); }
.theme-toggle:hover, .menu-toggle:hover{ border-color:var(--gold); color:var(--gold-deep); }
.nav-link.active, .scenario-btn.active{ background:var(--gold); border-color:var(--gold); color:#082250; }
.scenario-btn.scenario-reset{ color:#9A3A24; background:rgba(169,67,46,0.08); border-color:rgba(169,67,46,0.35); }
.scenario-btn.scenario-reset:hover{ background:rgba(169,67,46,0.16); border-color:#9A3A24; color:#9A3A24; }
.scenario-reset.armed{ background:#A9432E !important; border-color:#A9432E !important; color:#fff !important; }
@media (max-width: 560px){ .site-nav{ background:#FFFFFF; border:1px solid var(--line); box-shadow:0 10px 24px rgba(8,34,80,0.08); } }
.sidebar-link, .sidebar-section{ color:var(--ink-soft); }
.sidebar-link:hover, .sidebar-section:hover{ background:rgba(8,34,80,0.05); color:var(--ink); }
.sidebar-link.active{ background:var(--ink); color:#FFFFFF; }
.sidebar-section.active{ background:rgba(10,168,92,0.10); color:var(--gold-deep); box-shadow:inset 3px 0 0 var(--gold); }
.sidebar-divider{ background:var(--line); }
.footnote, .feedback-line, .demo-note, .about-text{ color:var(--ink-soft); }
.feedback-line a{ color:var(--gold-deep); }
.how-section h2, .which-section h2, .how-step strong{ color:var(--ink); }
.how-step{ background:#FFFFFF; border:1px solid var(--line); }
.how-step p{ color:var(--ink-soft); }
.goal-intro{ color:rgba(234,240,248,0.8); }
.card, .tool-card, .demo-card, .mission-section, .faq-section, .next-link, .which-table{ border:1px solid var(--line); }
.skip-link:focus{ outline-color:var(--ink); }
html[data-theme="dark"] body{ background:#0A1630; }
html[data-theme="dark"] .trust-badge, html[data-theme="dark"] .nav-link, html[data-theme="dark"] .jump-link, html[data-theme="dark"] .scenario-btn, html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .menu-toggle, html[data-theme="dark"] .how-step{ background:var(--paper); border-color:var(--line); }
html[data-theme="dark"] .sidebar-link.active{ background:var(--gold); color:#082250; }
html[data-theme="dark"] .scenario-btn.scenario-reset{ color:#F6C3B0; background:rgba(169,67,46,0.18); border-color:rgba(246,195,176,0.35); }
@media (max-width: 560px){ html[data-theme="dark"] .site-nav{ background:var(--paper); } }
/* ===== Typografie v2: schreefloos, iets groter, aansluitend op het logo ===== */
  body{ font-size:16px; line-height:1.55; }
.masthead h1{ font-family:'Poppins','Inter',sans-serif; font-weight:700; letter-spacing:-0.015em; line-height:1.12; }
.masthead p{ font-size:17px; line-height:1.6; max-width:60ch; }
.masthead .eyebrow{ font-size:13.5px; font-weight:600; }
.amount, .goal-amount, .demo-result-amount, .sr-amount, .cs-amount{ font-family:'Poppins','Inter',sans-serif; font-weight:700; letter-spacing:-0.02em; }
.field label, .field-top label{ font-size:15px; font-weight:600; color:var(--ink); }
.field .hint, .hint{ font-size:13.5px; line-height:1.5; }
.num-input{ font-family:'Poppins','Inter',sans-serif; font-size:24px; font-weight:600; }
.value-edit input{ font-family:'Poppins','Inter',sans-serif; }
.result .label, .breakdown div{ font-size:13.5px; }
.breakdown strong{ font-family:'Poppins','Inter',sans-serif; font-size:18px; font-weight:600; }
.result-sentence{ font-size:15.5px; line-height:1.6; }
.faq-question{ font-size:15.5px; }
.faq-answer p{ font-size:15px; line-height:1.65; }
.faq-section h2, .card h2, .tool-card h2, .how-section h2, .which-section h2, .mission-section h2, .goal-title, .compare-title, .withdrawal-title, .stress-title{ font-family:'Poppins','Inter',sans-serif; font-weight:600; letter-spacing:-0.01em; }
.tool-card p, .mission-section p, .how-step p, .which-table td{ font-size:15px; line-height:1.6; }
.nav-link, .jump-link, .sidebar-link, .sidebar-section{ font-size:14px; }
.analysis-tab, .amount-chip, .scenario-btn, .pf-preset{ font-size:14px; }
.about-text, .footnote, .feedback-line{ font-size:13.5px; }
/* logo: één variant tegelijk; hogere specificiteit dan .site-logo img */
  .site-logo img.logo-dark{ display:none; }
html[data-theme="dark"] .site-logo img.logo-light{ display:none; }
html[data-theme="dark"] .site-logo img.logo-dark{ display:block; }
.site-logo img{ height:88px; }
.header-actions{ gap:12px; }
.site-header{ margin-bottom:26px; }
@media (max-width: 560px){ .site-logo img{ height:64px; } .theme-toggle, .menu-toggle{ width:40px; height:40px; } }
/* Zijbalk (desktop): iets grotere en dikkere menutekst */
  @media (min-width: 960px){
    .sidebar-link{ font-size:16px; font-weight:600; padding:10px 12px; }
    .sidebar-section{ font-size:15px; font-weight:500; padding:9px 12px; }
    .sidebar-section.sub{ font-size:14.5px; padding-left:26px; }
    .sidebar-section.active, .sidebar-link.active{ font-weight:700; }
    .sidebar-title{ font-size:12px; }
  }
/* ===== Derde kolom op brede schermen: samenvatting, cross-links en FAQ rechts ===== */
  .context-col{ display:block; }
.context-summary{ display:none; }
@media (min-width: 1280px){
    .wrap{ max-width:1400px; grid-template-columns:220px minmax(0,1fr) 340px; }
    .wrap > .context-col{ grid-column:3; grid-row:2 / span 100; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; scrollbar-width:thin; padding-right:2px; }
    .context-col .next-steps{ margin-top:0; padding:0; }
    .context-col .next-links{ grid-template-columns:1fr; }
    .context-col .faq-section{ margin-top:16px; padding:20px; }
    .context-col .how-section{ margin-top:0; padding:0; }
    .context-col .how-steps{ grid-template-columns:1fr; }
    .context-col .mission-section{ margin-top:16px; padding:20px; }
    .context-summary{ display:block; background:var(--ink); color:#FFFFFF; border-radius:16px; padding:18px 20px; margin-bottom:16px; box-shadow:0 12px 32px rgba(8,34,80,0.18); }
    .context-summary .cs-label{ font-size:12.5px; color:rgba(255,255,255,0.72); margin:0 0 4px; }
    .context-summary .cs-amount{ font-size:28px; color:#7FDDAA; margin:0 0 10px; line-height:1.1; }
    .context-summary .cs-link{ display:inline-block; font-size:13px; font-weight:600; color:#082250; background:var(--gold); text-decoration:none; border-radius:999px; padding:7px 12px; }
    .sticky-result{ display:none !important; }
    body.has-sticky{ padding-bottom:24px; }
  }
html[data-theme="dark"] .context-summary{ background:var(--paper-dim); color:var(--ink); border:1px solid var(--line); }
html[data-theme="dark"] .context-summary .cs-label{ color:var(--ink-soft); }