/* Vormgegeven fictief voorbeeld in de huisstijl (crème, brons, serif).
   Gebruikt door index.html (tabbladen) en voorbeeldrapport.html (gestapeld). */
.report-block--rapport{max-width:1040px;margin-inline:auto}
.vr{text-align:left;color:var(--inkt);font-family:var(--font-sans)}
.vr *,.vr *::before,.vr *::after{box-sizing:border-box}

/* Kop en tabbladen */
.vr-head{display:grid;gap:.4rem;padding:0 0 1.1rem}
.vr-eyebrow{margin:0;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brons)}
.vr-title{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.25;letter-spacing:-.01em}
.vr-head-sub{margin:0;font-size:.9rem;line-height:1.6;color:var(--inkt-zacht);max-width:72ch}
.vr-tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--hairline);padding-bottom:.6rem;margin-bottom:1.1rem}
.vr-tab{appearance:none;background:transparent;border:1px solid var(--hairline);border-radius:999px;padding:.42rem .95rem .42rem .55rem;font:inherit;font-size:.86rem;font-weight:500;color:var(--inkt);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;line-height:1.2}
.vr-tab:hover{border-color:var(--zand);background:var(--papier)}
.vr-tab:focus-visible{outline:3px solid rgba(46,95,78,.28);outline-offset:2px}
.vr-tab[aria-selected="true"]{background:var(--inkt);border-color:var(--inkt);color:var(--donker-tekst)}
.vr-tab-nr{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--band);color:var(--brons);font-size:.72rem;font-weight:600}
.vr-tab[aria-selected="true"] .vr-tab-nr{background:var(--brons);color:#fff}
.vr--stacked .vr-tabs{position:sticky;top:0;z-index:2;background:var(--vlak);padding-top:.6rem}

/* Pagina als vel papier */
.vr-page{background:var(--papier);border:1px solid var(--hairline);border-radius:6px;padding:clamp(1.1rem,2.6vw,2rem) clamp(1rem,3vw,2.3rem) clamp(1rem,2.4vw,1.6rem);box-shadow:0 1px 0 rgba(43,39,36,.04)}
.vr--stacked .vr-page + .vr-page{margin-top:1.4rem}
.vr-page-head{display:grid;gap:.25rem;padding-bottom:.9rem;border-bottom:2px solid var(--brons);margin-bottom:1.2rem}
.vr-page-nr{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brons)}
.vr-page-title{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.25;letter-spacing:-.01em}
.vr-page-sub{margin:0;font-size:.9rem;color:var(--inkt-zacht);line-height:1.55}
.vr-page-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;margin-top:1.4rem;padding-top:.7rem;border-top:1px solid var(--hairline);font-size:.74rem;color:var(--inkt-zacht);letter-spacing:.04em}
.vr-h4{margin:1.4rem 0 .6rem;font-family:var(--font-serif);font-weight:500;font-size:1.08rem;line-height:1.3}
.vr-h4:first-child{margin-top:0}
.vr-intro{margin:0 0 1.1rem;font-size:.95rem;line-height:1.65;max-width:70ch}
.vr-note{margin:.55rem 0 0;font-size:.8rem;line-height:1.55;color:var(--inkt-zacht);max-width:76ch}
.vr-bron{margin:.5rem 0 0;font-size:.76rem;color:var(--inkt-zacht);font-style:italic}
.vr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:.4rem 0 0;font-size:.78rem;color:var(--inkt-zacht)}
.vr-swatch{display:inline-block;width:.9rem;height:.6rem;border-radius:2px;margin-right:.35rem;vertical-align:middle}
.vr-swatch--dash{background:transparent;border:0;border-top:2px dashed var(--brons);height:0}
.vr-pos{color:var(--accent-groen)}
.vr-neg{color:var(--brons)}

/* Rasters */
.vr-grid{display:grid;gap:1.2rem 1.8rem}
.vr-grid--2{grid-template-columns:minmax(0,1fr)}
.vr-grid--kpi{grid-template-columns:1fr;align-items:stretch;margin-bottom:1.2rem}
.vr-grid--kpi5{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}
.vr-kpi-stack{display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:720px){
  .vr-grid--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vr-grid--kpi{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .vr-grid--kpi5{grid-template-columns:repeat(5,1fr)}
}

/* Kerncijfers */
.vr-kpi{display:grid;gap:.2rem;min-width:0;padding:.85rem 1rem;border:1px solid var(--hairline);border-radius:6px;background:var(--vlak)}
.vr-kpi-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brons)}
.vr-kpi-value{font-family:var(--font-serif);font-size:1.5rem;overflow-wrap:anywhere;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vr-kpi-sub{font-size:.8rem;color:var(--inkt-zacht);line-height:1.5}
.vr-kpi--hero{background:var(--kluis);border-color:var(--kluis);color:var(--kluis-tekst);padding:1.3rem 1.4rem}
.vr-kpi--hero .vr-kpi-label{color:var(--kluis-zacht)}
.vr-kpi--hero .vr-kpi-value{font-size:clamp(2.1rem,4.5vw,3rem)}
.vr-kpi--hero .vr-kpi-sub{color:var(--kluis-zacht);font-size:.9rem}
.vr-kpi--hero .vr-pos{color:#9fd3b4}
.vr-kpi--hero .vr-neg{color:#e3b98e}
.vr-kpi--pos .vr-kpi-value{color:var(--accent-groen)}
.vr-kpi--neg .vr-kpi-value{color:var(--brons)}

/* Grafieken */
.vr-chart{display:block;width:100%;height:auto;font-family:var(--font-sans)}
.vr-axis{font-size:11px;fill:var(--inkt-zacht)}
.vr-endlabel{font-size:12.5px;font-weight:600;fill:var(--inkt);font-variant-numeric:tabular-nums}
.vr-bar-value{font-size:11px;font-weight:600;fill:var(--inkt);font-variant-numeric:tabular-nums}
.vr-bar-label{font-size:12.5px;font-weight:500;fill:var(--inkt)}
.vr-note-svg{font-size:10.5px;fill:var(--inkt-zacht)}

/* Tabellen */
.vr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vr-table{width:100%;border-collapse:collapse;font-size:.86rem;line-height:1.4}
.vr-table--compact{font-size:.8rem}
.vr-table th,.vr-table td{padding:.4rem .5rem;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top;font-weight:400}
.vr-table th:first-child,.vr-table td:first-child{padding-left:0}
.vr-table thead th{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brons);border-bottom:1px solid var(--zand)}
.vr-table .vr-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vr-table .vr-left{text-align:left;white-space:normal}
.vr-table tr.vr-sub th,.vr-table tr.vr-sub td{font-weight:600;border-bottom:1px solid var(--zand)}
.vr-table tr.vr-group th{padding-top:.75rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brons);border-bottom:0}
.vr-table tfoot th,.vr-table tfoot td,.vr-table tr.vr-total th,.vr-table tr.vr-total td{font-weight:600;border-top:2px solid var(--inkt);border-bottom:0;padding-top:.55rem}
/* Telefoon: elke tabel past binnen zijn vel, zonder woorden te breken. Iets
   minder zijmarge op het vel, krappere celruimte (de buitenste cellen lopen tot
   de rand, net als links al) en een iets kleinere tabelletter. Desktop blijft gelijk. */
@media screen and (max-width:480px){
  .vr-page{padding-left:.75rem;padding-right:.75rem}
  .vr-table{font-size:.82rem}
  .vr-table--compact{font-size:.76rem}
  .vr-table th,.vr-table td{padding-left:.3rem;padding-right:.3rem}
  .vr-table th:first-child,.vr-table td:first-child{padding-left:0}
  .vr-table th:last-child,.vr-table td:last-child{padding-right:0}
  /* Alleen de totaalregel met bedragen ("Nettovermogen / (bekend deel)"), niet de bronnen-voetregel. */
  .vr-table--compact tfoot th:first-child:has(+ td:not(:empty)){text-wrap:balance}
}

/* Toelichtingen en signalen */
.vr-callouts{display:grid;gap:.7rem;margin-top:1rem}
@media (min-width:720px){.vr-callouts{grid-template-columns:repeat(3,1fr)}}
.vr-callout{padding:.75rem .9rem;border-left:3px solid var(--brons);background:var(--vlak);font-size:.86rem;line-height:1.55}
.vr-callout strong{font-family:var(--font-serif);font-size:1.05rem;font-weight:500}
.vr-signalen{display:grid;gap:1rem}
@media (min-width:860px){.vr-signalen{grid-template-columns:1fr 1fr}}
.vr-signal{display:grid;gap:.6rem;align-content:start;padding:1rem 1.1rem 1.1rem;border:1px solid var(--hairline);border-top:3px solid var(--brons);border-radius:6px;background:var(--vlak)}
.vr-signal-head{display:flex;gap:.7rem;align-items:flex-start}
.vr-signal-head h4{margin:0;font-family:var(--font-serif);font-weight:500;font-size:1.08rem;line-height:1.3}
.vr-signal-nr{flex:none;display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brons);color:#fff;font-size:.78rem;font-weight:600;margin-top:.05rem}
.vr-signal-bedrag{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem;padding:.55rem .8rem;background:var(--papier);border:1px solid var(--hairline);border-radius:4px}
.vr-signal-euro{font-family:var(--font-serif);font-size:1.55rem;line-height:1.1;font-variant-numeric:tabular-nums}
.vr-signal-bedraglabel{font-size:.8rem;color:var(--inkt-zacht);line-height:1.4}
.vr-signal-body{margin:0;display:grid;gap:.15rem .9rem;grid-template-columns:1fr;font-size:.85rem;line-height:1.55}
.vr-signal-body dt{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brons);margin-top:.45rem}
.vr-signal-body dd{margin:0}
.vr-disclaimer{margin:1.2rem 0 0;padding:.8rem 1rem;border:1px dashed var(--zand);border-radius:4px;font-size:.8rem;line-height:1.55;color:var(--inkt-zacht)}
.vr-conclusie{margin:.9rem 0 0;padding:.75rem .9rem;border-left:3px solid var(--accent-groen);background:var(--accent-groen-soft);font-size:.9rem;line-height:1.55}
.vr-acties{margin:.3rem 0 0;padding-left:1.3rem;font-size:.9rem;line-height:1.55;display:grid;gap:.4rem}
.vr-aannames{margin:.3rem 0 0;padding-left:1.1rem;font-size:.82rem;line-height:1.55;color:var(--inkt-zacht);display:grid;gap:.25rem}

/* Afdrukken: elke pagina op een eigen vel */
@media print{
  .vr-tabs{display:none}
  .vr-page{border:0;box-shadow:none;break-after:page;padding:0}
  .vr-page[hidden]{display:block}
  .vr-kpi--hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Liggende balken en de brug "waardoor veranderde uw vermogen" (HTML, geen SVG) */
.vr-hbars{display:grid;gap:.7rem;margin-top:.4rem}
.vr-hbar{display:grid;gap:.3rem;min-width:0}
.vr-hbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.86rem;line-height:1.35}
.vr-hbar-label{font-weight:500;min-width:0}
.vr-hbar-value{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.vr-hbar-track{position:relative;height:12px;border-radius:3px;background:var(--band)}
.vr-hbar-fill{position:absolute;top:0;bottom:0;left:0;border-radius:3px;background:var(--kluis)}
.vr-fill-pos{background:var(--accent-groen)}
.vr-fill-neg{background:var(--brons)}
.vr-hbar-tick{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;background:var(--inkt);border-radius:2px}
.vr-hbar--marker .vr-hbar-top{font-weight:600}
.vr-hbar-note{font-size:.76rem;color:var(--inkt-zacht);line-height:1.45}
.vr-waterfall{gap:.5rem}
.vr-waterfall .vr-hbar-top{font-size:.82rem}
.vr-waterfall .vr-hbar-track{height:10px}

/* Het voorbeeld begint bij de brug; de huishoudbeschrijving staat eronder. */
.vr-bridge-intro{margin-bottom:1rem;max-width:760px}
.vr-bridge-intro .vr-h4{margin-top:0}
.vr-bridge-intro p{font-size:.95rem;line-height:1.65;color:var(--inkt-zacht)}
.vr-oorzaken{margin:1rem 0 1.8rem;border-block:1px solid var(--hairline);padding:.8rem 0}
.vr-oorzaken summary{cursor:pointer;font-size:.9rem;color:var(--inkt)}
.vr-oorzaken .vr-scroll{margin-top:.8rem}
.vr-household{padding:1rem 1.5rem;font-size:.8rem;line-height:1.6;color:var(--inkt-zacht);border-top:1px solid var(--hairline)}
.vr-signal-meer summary{cursor:pointer;font-size:.82rem;line-height:1.45;color:var(--inkt)}
.vr-signal-meer[open] summary{margin-bottom:.35rem}

/* Pilot CTA Card */
.pilot-cta-card{margin-top:1.8rem;padding:1.4rem clamp(1rem,3vw,1.8rem);background:var(--papier);border:1px solid var(--hairline);border-top:3px solid var(--brons);border-radius:6px}
.pilot-cta-badge{display:inline-block;padding:.25rem .75rem;background:var(--vlak);border:1px solid var(--zand);border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brons);margin-bottom:.8rem}
.pilot-cta-title{margin:0 0 .5rem;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.25}
.pilot-cta-list{list-style:none;padding:0;margin:.9rem 0 1.1rem;display:grid;gap:.5rem}
.pilot-cta-list li{position:relative;padding-left:1.2rem;font-size:.9rem;line-height:1.6;color:var(--inkt-zacht)}
.pilot-cta-list li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--brons)}
.pilot-cta-list strong{color:var(--inkt)}