2026-03-13 13:38:25 +01:00
<!DOCTYPE html>
< html lang = "nb" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Arvens forsprang — interaktiv kalkulator< / title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link href = "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel = "stylesheet" >
2026-03-13 13:54:51 +01:00
< link rel = "stylesheet" href = "../style.css" >
2026-03-13 13:38:25 +01:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" > < / script >
< / head >
< body >
< header >
< p class = "eyebrow" > Lik innsats. Ulikt utgangspunkt.< / p >
< h1 > Arvens< br > < em > forsprang< / em > < / h1 >
< p class = "lead" > Person A starter fra null. Person B arver en sum. Begge sparer likt — men gapet lukkes aldri. Se hvordan arv forsterkes over tid.< / p >
2026-03-13 13:54:51 +01:00
< div class = "stamp" > Fødselsloteriet< / div >
2026-03-13 13:38:25 +01:00
< / header >
< div class = "small-diff-banner" >
< span class = "sd-icon" > ↗< / span >
2026-03-13 13:54:51 +01:00
< span > Pass på å velge rike foreldre. En arv på < strong > 500 000 kr< / strong > vokser til over < strong id = "banner-gap" > —< / strong > på 30 år — uten at B løfter en finger.< / span >
2026-03-13 13:38:25 +01:00
< / div >
< main >
< div class = "controls-card" >
< h2 > Sjekk selv< / h2 >
< div class = "controls-grid" >
< div class = "control-group" >
< label > Arvebeløp (B mottar)< / label >
< div class = "val-row" >
< input type = "range" id = "inheritance" min = "100000" max = "3000000" step = "50000" value = "500000" >
< span class = "val-display" id = "inheritance-out" > 500 000 kr< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Månedlig sparing (begge)< / label >
< div class = "val-row" >
< input type = "range" id = "monthly" min = "1000" max = "20000" step = "500" value = "3000" >
< span class = "val-display" id = "monthly-out" > 3 000 kr< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Årlig avkastning (%)< / label >
< div class = "val-row" >
< input type = "range" id = "rate" min = "1" max = "12" step = "0.5" value = "7" >
< span class = "val-display" id = "rate-out" > 7,0 %< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Antall år< / label >
< div class = "val-row" >
< input type = "range" id = "yrs" min = "5" max = "40" step = "1" value = "30" >
< span class = "val-display" id = "yrs-out" > 30 år< / span >
< / div >
< / div >
< / div >
< / div >
< div class = "stat-strip" >
< div class = "stat" >
< div class = "stat-label" > Formue A etter < span class = "yr-lbl" > 30< / span > år< / div >
< div class = "stat-value" id = "st-valA" > —< / div >
< div class = "stat-sub" id = "st-subA" > startet fra null< / div >
< / div >
< div class = "stat" >
< div class = "stat-label" > Formue B etter < span class = "yr-lbl" > 30< / span > år< / div >
< div class = "stat-value" id = "st-valB" > —< / div >
< div class = "stat-sub" id = "st-subB" > —< / div >
< / div >
< div class = "stat stat-diff" >
< div class = "stat-label" > B har mer (= arv med renter)< / div >
< div class = "stat-value" id = "st-gap" style = "color:var(--accent);" > —< / div >
< div class = "stat-sub" id = "st-gap-sub" > —< / div >
< / div >
< div class = "stat" >
< div class = "stat-label" > Arven har vokst til< / div >
< div class = "stat-value" id = "st-grown" style = "color:var(--purple);" > —< / div >
< div class = "stat-sub" id = "st-grown-sub" > —< / div >
< / div >
< / div >
<!-- Diagram 1: Formue over tid -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Formue over tid< / div >
< div class = "chart-desc" > A sparer fra null, B starter med arv — begge sparer likt< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#1a4a8a;" > < / span > Person A< / span >
< span > < span class = "swatch" style = "background:#c0392b;" > < / span > Person B< / span >
< / div >
< / div >
< div class = "chart-wrap h-240" > < canvas id = "chart1" > < / canvas > < / div >
< / div >
<!-- Diagram 2: Absolutt forskjell -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Absolutt forskjell< / div >
< div class = "chart-desc" > Gapet = arven med rentes rente — vokser alltid< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#4a3a8a;" > < / span > Gap (arv × < / span >
< / div >
< / div >
< div class = "chart-wrap h-200" > < canvas id = "chart2" > < / canvas > < / div >
< / div >
< div class = "insight" id = "insight" > < / div >
<!-- Diagram 3: Arvens andel av Bs formue (prosent) -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Arvens andel av Bs formue< / div >
< div class = "chart-desc" > Andelen synker over tid, men det absolutte beløpet vokser alltid< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#b5620a;" > < / span > Arv-andel (%)< / span >
< / div >
< / div >
< div class = "chart-wrap h-200" > < canvas id = "chart3" > < / canvas > < / div >
< / div >
<!-- Forklaring -->
< div class = "explainer" >
< h3 > Arvet formue vokser av seg selv< / h3 >
< p > Når B arver en sum, vokser den med rentes rente — helt uavhengig av innsats. A kan spare like mye, like lenge, med samme avkastning — men vil < strong > aldri< / strong > ta igjen forskjellen.< / p >
< div class = "formula-box" >
Gap = < span > Arv × < / span > < br >
Gapet vokser eksponentielt, uavhengig av spareinnsats
< / div >
< p > Over tid utgjør arven en stadig mindre < em > andel< / em > av Bs totale formue — fordi egne sparepenger også vokser. Men det absolutte gapet øker alltid. Lik innsats gir aldri lik formue når startlinjen er ulik.< / p >
< / div >
< / main >
< footer >
< a href = "../" > ← Alle kalkulatorer< / a > · Laget med Chart.js · Tallene er illustrative og ikke finansiell rådgivning · < a href = "https://kode.naiv.no/olemd/forskjeller.naiv.no" > Kildekode< / a >
< / footer >
< script src = "app.js" > < / script >
< / body >
< / html >
