forskjeller.naiv.no/public/sparing/index.html

<!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>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Rentes rente forsterker">
<meta property="og:description" content="Noen få prosentpoeng i avkastning skaper enorme forskjeller over tid.">
<meta property="og:url" content="https://forskjeller.naiv.no/sparing/">
<meta name="twitter:card" content="summary">
<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">
<link rel="stylesheet" href="../style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<!-- Privacy-friendly analytics by Plausible -->
<script async src="/js/script.js"></script>
<script>
  window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
  plausible.init({ endpoint: "/api/event" })
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Rentes rente forsterker</nav>

<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>
  <div class="stamp" aria-hidden="true">Penger lager penger</div>
</header>

<div class="small-diff-banner">
  <span class="sd-icon" aria-hidden="true">↗</span>
  <span>Med <strong id="banner-monthly">3 000 kr/mnd</strong> i <strong id="banner-aar">25</strong> år: bare <strong id="banner-pp">3</strong> prosentpoeng mer i avkastning gir over <strong id="banner-gap">—</strong> ekstra.</span>
</div>

<main id="main">

  <div class="controls-card">
    <h2>Sjekk selv</h2>
    <div class="controls-grid">
      <div class="control-group">
        <label for="monthly">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" aria-live="polite" id="monthly-out">3 000 kr</span>
        </div>
      </div>
      <div class="control-group">
        <label for="rateA">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" aria-live="polite" id="rateA-out">4,0 %</span>
        </div>
      </div>
      <div class="control-group">
        <label for="rateB">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" aria-live="polite" id="rateB-out">7,0 %</span>
        </div>
      </div>
      <div class="control-group">
        <label for="yrs">Antall år</label>
        <div class="val-row">
          <input type="range" id="yrs" min="5" max="40" step="1" value="25">
          <span class="val-display" aria-live="polite" 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>
        <h3 class="chart-title">Formue over tid</h3>
        <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" role="img" aria-label="Diagram: Formue over tid"></canvas></div>
  </div>

  <!-- Diagram 2: Forskjell i formue -->
  <div class="chart-section">
    <div class="chart-header">
      <div>
        <h3 class="chart-title">Forskjell i formue</h3>
        <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" role="img" aria-label="Diagram: Forskjell i formue"></canvas></div>
  </div>

  <div class="insight" id="insight"></div>

  <!-- Diagram 3: Avkastning vs innbetalt -->
  <div class="chart-section">
    <div class="chart-header">
      <div>
        <h3 class="chart-title">Avkastning vs. innbetalt</h3>
        <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" role="img" aria-label="Diagram: Avkastning vs. innbetalt"></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 × ((1 + r)ⁿ − 1) / r</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>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											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>
-												Legg til OpenGraph og Twitter Card meta-tags på alle sider

Gir fine forhåndsvisninger ved deling av lenker til forskjeller.naiv.no.
Foreløpig uten og:image.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:58:21 +01:00
+								<meta property="og:type" content="website">
 								<meta property="og:locale" content="nb_NO">
 								<meta property="og:site_name" content="Forskjeller">
 								<meta property="og:title" content="Rentes rente forsterker">
 								<meta property="og:description" content="Noen få prosentpoeng i avkastning skaper enorme forskjeller over tid.">
 								<meta property="og:url" content="https://forskjeller.naiv.no/sparing/">
 								<meta name="twitter:card" content="summary">
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								<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">
-												Samle CSS i én delt fil og oppdater stempler

Flytt identisk style.css fra kalkulatorkatalogene til public/style.css
og oppdater alle index.html til å referere ../style.css.

Nye stempler: «Penger lager penger» (sparing), «Boligfesten» (bolig),
«Fødselsloteriet» (arv) + sarkastisk åpning i arv-banneret.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:54:51 +01:00
+								<link rel="stylesheet" href="../style.css">
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											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>
-												Bruk standard Plausible-stier for analytics-proxy

Erstatter /implausibly/js/pa-*.js med /js/script.js og
/implausibly/api/event med /api/event på alle sider.
Caddy-snippeten håndterer omskriving server-side.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-18 12:07:49 +01:00
+								<!-- Privacy-friendly analytics by Plausible -->
 								<script async src="/js/script.js"></script>
-												Legg til Plausible Analytics på alle sider

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 18:58:12 +01:00
+								<script>
 								  window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
-												Bruk standard Plausible-stier for analytics-proxy

Erstatter /implausibly/js/pa-*.js med /js/script.js og
/implausibly/api/event med /api/event på alle sider.
Caddy-snippeten håndterer omskriving server-side.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-18 12:07:49 +01:00
+								  plausible.init({ endpoint: "/api/event" })
-												Legg til Plausible Analytics på alle sider

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 18:58:12 +01:00
+								</script>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								</head>
 								<body>
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
-												Tilgjengelighet: Uutilsynet-krav (1.4.11, 2.4.5, 2.4.6)

- Øk slider-track kontrast til 0.35 for 3:1 ratio (1.4.11)
- Endre chart-titler fra div til h3 for riktig overskriftshierarki (2.4.6)
- Endre topic-card overskrifter fra h2 til h3 under gruppe-h2 (2.4.6)
- Legg til brødsmulesti på alle undersider (2.4.5)
- Legg til sitemap-nav i footer på forsiden (2.4.5)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 21:13:21 +01:00
+								<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Rentes rente forsterker</nav>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
 								<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>
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								  <div class="stamp" aria-hidden="true">Penger lager penger</div>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								</header>
 								<div class="small-diff-banner">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								  <span class="sd-icon" aria-hidden="true">↗</span>
-												Knytt alle bannerverdier til sliderne i lonn, sparing og bolig

Hardkodede tall i bannerene (lønnsforskjell, sparebeløp,
prosentpoeng, prisforskjell, vekst, antall år) oppdateres nå
dynamisk når brukerne endrer sliderne.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 19:18:28 +01:00
+								  <span>Med <strong id="banner-monthly">3 000 kr/mnd</strong> i <strong id="banner-aar">25</strong> år: bare <strong id="banner-pp">3</strong> prosentpoeng mer i avkastning gir over <strong id="banner-gap">—</strong> ekstra.</span>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								</div>
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								<main id="main">
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
 								  <div class="controls-card">
 								    <h2>Sjekk selv</h2>
 								    <div class="controls-grid">
 								      <div class="control-group">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								        <label for="monthly">Månedlig sparebeløp</label>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <div class="val-row">
 								          <input type="range" id="monthly" min="1000" max="20000" step="500" value="3000">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								          <span class="val-display" aria-live="polite" id="monthly-out">3 000 kr</span>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        </div>
 								      </div>
 								      <div class="control-group">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								        <label for="rateA">Avkastning A (% per år)</label>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <div class="val-row">
 								          <input type="range" id="rateA" min="1" max="15" step="0.5" value="4">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								          <span class="val-display" aria-live="polite" id="rateA-out">4,0 %</span>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        </div>
 								      </div>
 								      <div class="control-group">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								        <label for="rateB">Avkastning B (% per år)</label>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <div class="val-row">
 								          <input type="range" id="rateB" min="1" max="15" step="0.5" value="7">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								          <span class="val-display" aria-live="polite" id="rateB-out">7,0 %</span>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        </div>
 								      </div>
 								      <div class="control-group">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								        <label for="yrs">Antall år</label>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <div class="val-row">
 								          <input type="range" id="yrs" min="5" max="40" step="1" value="25">
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								          <span class="val-display" aria-live="polite" id="yrs-out">25 år</span>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        </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>
-												Tilgjengelighet: Uutilsynet-krav (1.4.11, 2.4.5, 2.4.6)

- Øk slider-track kontrast til 0.35 for 3:1 ratio (1.4.11)
- Endre chart-titler fra div til h3 for riktig overskriftshierarki (2.4.6)
- Endre topic-card overskrifter fra h2 til h3 under gruppe-h2 (2.4.6)
- Legg til brødsmulesti på alle undersider (2.4.5)
- Legg til sitemap-nav i footer på forsiden (2.4.5)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 21:13:21 +01:00
+								        <h3 class="chart-title">Formue over tid</h3>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <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>
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								    <div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Formue over tid"></canvas></div>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								  </div>
 								  <!-- Diagram 2: Forskjell i formue -->
 								  <div class="chart-section">
 								    <div class="chart-header">
 								      <div>
-												Tilgjengelighet: Uutilsynet-krav (1.4.11, 2.4.5, 2.4.6)

- Øk slider-track kontrast til 0.35 for 3:1 ratio (1.4.11)
- Endre chart-titler fra div til h3 for riktig overskriftshierarki (2.4.6)
- Endre topic-card overskrifter fra h2 til h3 under gruppe-h2 (2.4.6)
- Legg til brødsmulesti på alle undersider (2.4.5)
- Legg til sitemap-nav i footer på forsiden (2.4.5)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 21:13:21 +01:00
+								        <h3 class="chart-title">Forskjell i formue</h3>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <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>
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								    <div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Forskjell i formue"></canvas></div>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								  </div>
 								  <div class="insight" id="insight"></div>
 								  <!-- Diagram 3: Avkastning vs innbetalt -->
 								  <div class="chart-section">
 								    <div class="chart-header">
 								      <div>
-												Tilgjengelighet: Uutilsynet-krav (1.4.11, 2.4.5, 2.4.6)

- Øk slider-track kontrast til 0.35 for 3:1 ratio (1.4.11)
- Endre chart-titler fra div til h3 for riktig overskriftshierarki (2.4.6)
- Endre topic-card overskrifter fra h2 til h3 under gruppe-h2 (2.4.6)
- Legg til brødsmulesti på alle undersider (2.4.5)
- Legg til sitemap-nav i footer på forsiden (2.4.5)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 21:13:21 +01:00
+								        <h3 class="chart-title">Avkastning vs. innbetalt</h3>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								        <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>
-												Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

											
										
										
											2026-03-25 20:53:44 +01:00
+								    <div class="chart-wrap h-240"><canvas id="chart3" role="img" aria-label="Diagram: Avkastning vs. innbetalt"></canvas></div>
-												Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

											
										
										
											2026-03-13 13:38:25 +01:00
+								  </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 × ((1 + r)ⁿ − 1) / r</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>