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 > Rentes rente — 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" > Samme sparebeløp. Ikke det samme resultatet.< / p >
< h1 > Rentes rente< br > < em > forsterker< / em > < / h1 >
< p class = "lead" > Noen få prosentpoeng i avkastning ser ubetydelig ut — men over tid skaper de enorme forskjeller. Se hva rentes rente gjør med sparepengene dine.< / p >
2026-03-13 13:54:51 +01:00
< div class = "stamp" > Penger lager penger< / div >
2026-03-13 13:38:25 +01:00
< / header >
< div class = "small-diff-banner" >
< span class = "sd-icon" > ↗< / span >
< span > Med < strong > 3 000 kr/mnd< / strong > i 25 år: bare 3 prosentpoeng mer i avkastning gir over < strong id = "banner-gap" > —< / strong > ekstra.< / span >
< / div >
< main >
< div class = "controls-card" >
< h2 > Sjekk selv< / h2 >
< div class = "controls-grid" >
< div class = "control-group" >
< label > Månedlig sparebeløp< / 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 > Avkastning A (% per år)< / label >
< div class = "val-row" >
< input type = "range" id = "rateA" min = "1" max = "15" step = "0.5" value = "4" >
< span class = "val-display" id = "rateA-out" > 4,0 %< / span >
< / div >
< / div >
< div class = "control-group" >
< label > Avkastning B (% per år)< / label >
< div class = "val-row" >
< input type = "range" id = "rateB" min = "1" max = "15" step = "0.5" value = "7" >
< span class = "val-display" id = "rateB-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 = "25" >
< span class = "val-display" id = "yrs-out" > 25 år< / span >
< / div >
< / div >
< / div >
< / div >
< div class = "stat-strip" >
< div class = "stat" >
< div class = "stat-label" > Sparekonto A etter < span class = "yr-lbl" > 25< / span > år< / div >
< div class = "stat-value" id = "st-valA" > —< / div >
< div class = "stat-sub" id = "st-subA" > —< / div >
< / div >
< div class = "stat" >
< div class = "stat-label" > Sparekonto B etter < span class = "yr-lbl" > 25< / 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 enn A< / div >
< div class = "stat-value" id = "st-diff" style = "color:var(--accent);" > —< / div >
< div class = "stat-sub" id = "st-diff-sub" > —< / div >
< / div >
< div class = "stat" >
< div class = "stat-label" > Totalt innbetalt< / div >
< div class = "stat-value" id = "st-paid" > —< / div >
< div class = "stat-sub" > likt for begge< / 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" > Samme sparebeløp, ulik avkastning< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#1a4a8a;" > < / span > Konto A< / span >
< span > < span class = "swatch" style = "background:#c0392b;" > < / span > Konto B< / span >
< / div >
< / div >
< div class = "chart-wrap h-240" > < canvas id = "chart1" > < / canvas > < / div >
< / div >
<!-- Diagram 2: Forskjell i formue -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Forskjell i formue< / div >
< div class = "chart-desc" > Hvor mye mer B har enn A — vokser eksponentielt< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#4a3a8a;" > < / span > Gap< / span >
< / div >
< / div >
< div class = "chart-wrap h-200" > < canvas id = "chart2" > < / canvas > < / div >
< / div >
< div class = "insight" id = "insight" > < / div >
<!-- Diagram 3: Avkastning vs innbetalt -->
< div class = "chart-section" >
< div class = "chart-header" >
< div >
< div class = "chart-title" > Avkastning vs. innbetalt< / div >
< div class = "chart-desc" > Viser hvor mye som er innskudd og hvor mye som er renter< / div >
< / div >
< div class = "legend" >
< span > < span class = "swatch" style = "background:#1a4a8a;" > < / span > Innskudd< / span >
< span > < span class = "swatch" style = "background:rgba(26,74,138,0.35);" > < / span > Renter A< / span >
< span > < span class = "swatch" style = "background:rgba(192,57,43,0.35);" > < / span > Renter B< / span >
< / div >
< / div >
< div class = "chart-wrap h-240" > < canvas id = "chart3" > < / canvas > < / div >
< / div >
<!-- Forklaring -->
< div class = "explainer" >
< h3 > Rentes rente-effekten< / h3 >
< p > Rentes rente betyr at avkastningen din også gir avkastning. Over tid blir det renter du tjener på rentene som utgjør mesteparten av formuen — ikke de månedlige innskuddene dine.< / p >
< div class = "formula-box" >
Sluttverdi = < span > P × − < / span > < br >
der P = månedlig beløp, r = månedsrente, n = antall måneder
< / div >
< p > Selv små forskjeller i avkastning — noen få prosentpoeng — gir dramatisk ulike resultater over lang tid. Det er derfor valg av sparestrategi tidlig i livet har så stor betydning.< / 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 >
