{"id":9,"date":"2026-09-24T11:37:17","date_gmt":"2026-09-24T11:37:17","guid":{"rendered":"https:\/\/demo3.industrimedia.se\/?page_id=9"},"modified":"2026-09-24T11:39:31","modified_gmt":"2026-09-24T11:39:31","slug":"hem","status":"publish","type":"page","link":"https:\/\/demo3.industrimedia.se\/","title":{"rendered":"Hem"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1696d6 e-flex e-con-boxed e-con e-parent\" data-id=\"f1696d6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f40107b elementor-widget elementor-widget-html\" data-id=\"f40107b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  SPARR\u00c4KNARE F\u00d6R ELEMENTOR\r\n  Klistra in hela filens inneh\u00e5ll i en HTML-widget.\r\n  Byt href=\"#bestall\" nedan till din best\u00e4llningsl\u00e4nk.\r\n  F\u00e4rger och m\u00e5tt \u00e4r anpassade efter referensbilderna.\r\n  Typsnitt: Inter fr\u00e5n Google Fonts, med Arial som reserv.\r\n  Bildens 456 686 kr motsvarar 9,5 % r\u00e4nta, inte 10 %.\r\n-->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\r\n\r\n.sparcalc {\r\n  --sc-gold: #f1a820;\r\n  --sc-navy: #192b4f;\r\n  --sc-track: #e3e3eb;\r\n  --sc-label: #575764;\r\n  --sc-muted: #a5afc2;\r\n  width: 100%;\r\n  max-width: 1112px;\r\n  margin: 0 auto;\r\n  font-family: 'Inter', Arial, sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n  line-height: 1.5;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: var(--sc-label);\r\n  container-type: inline-size;\r\n}\r\n.sparcalc, .sparcalc * { box-sizing: border-box; }\r\n.sparcalc .sc-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.1055fr) minmax(0, 1fr);\r\n  gap: 32px;\r\n}\r\n.sparcalc .sc-controls {\r\n  display: grid;\r\n  gap: 18px;\r\n  min-width: 0;\r\n  padding: 48px 48px 38px;\r\n  border: 1px solid #e1e3eb;\r\n  border-radius: 28px;\r\n  background: #fff;\r\n  box-shadow: 0 2px 3px rgb(25 43 79 \/ 4%),\r\n              0 8px 20px rgb(25 43 79 \/ 3%);\r\n}\r\n.sparcalc .sc-field {\r\n  display: block;\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  font: inherit;\r\n  color: var(--sc-label);\r\n}\r\n.sparcalc .sc-field-head {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n  min-height: 34px;\r\n}\r\n.sparcalc .sc-value {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-height: 34px;\r\n  padding: 6px 12px;\r\n  border-radius: 999px;\r\n  background: #f3f3f5;\r\n  color: var(--sc-navy);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n  white-space: nowrap;\r\n}\r\n.sparcalc input.sc-range {\r\n  --sc-fill: 0%;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  display: block;\r\n  width: 100%;\r\n  min-width: 0;\r\n  height: 44px;\r\n  margin: 4px 0 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  cursor: pointer;\r\n  accent-color: var(--sc-gold);\r\n}\r\n.sparcalc input.sc-range::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  height: 6px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: linear-gradient(to right,\r\n    var(--sc-gold) 0 var(--sc-fill),\r\n    var(--sc-track) var(--sc-fill) 100%);\r\n}\r\n.sparcalc input.sc-range::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  width: 22px;\r\n  height: 22px;\r\n  margin-top: -8px;\r\n  border: 3px solid var(--sc-gold);\r\n  border-radius: 50%;\r\n  background: #fff;\r\n  box-shadow: 0 2px 5px rgb(25 43 79 \/ 7%);\r\n}\r\n.sparcalc input.sc-range::-moz-range-track {\r\n  height: 6px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: var(--sc-track);\r\n}\r\n.sparcalc input.sc-range::-moz-range-progress {\r\n  height: 6px;\r\n  border-radius: 999px;\r\n  background: var(--sc-gold);\r\n}\r\n.sparcalc input.sc-range::-moz-range-thumb {\r\n  box-sizing: border-box;\r\n  width: 22px;\r\n  height: 22px;\r\n  border: 3px solid var(--sc-gold);\r\n  border-radius: 50%;\r\n  background: #fff;\r\n  box-shadow: 0 2px 5px rgb(25 43 79 \/ 7%);\r\n}\r\n.sparcalc input.sc-range:focus-visible {\r\n  outline: 2px solid var(--sc-navy);\r\n  outline-offset: 3px;\r\n  border-radius: 8px;\r\n}\r\n.sparcalc .sc-result {\r\n  min-width: 0;\r\n  min-height: 470px;\r\n  padding: 48px;\r\n  border-radius: 28px;\r\n  background: radial-gradient(ellipse 75% 65% at 90% 0%,\r\n    rgb(241 168 32 \/ 18%), transparent 75%), var(--sc-navy);\r\n  box-shadow: 0 16px 30px rgb(25 43 79 \/ 16%);\r\n}\r\n.sparcalc .sc-caption {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: var(--sc-muted);\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  line-height: 22px;\r\n}\r\n.sparcalc .sc-total {\r\n  display: block;\r\n  margin: 12px 0 0;\r\n  padding: 0;\r\n  color: #fff;\r\n  font-family: inherit;\r\n  font-size: 46px;\r\n  font-weight: 800;\r\n  line-height: 1.2;\r\n  letter-spacing: -1.5px;\r\n  overflow-wrap: anywhere;\r\n}\r\n.sparcalc a.sc-button,\r\n.sparcalc a.sc-button:visited {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n  min-height: 64px;\r\n  margin: 24px 0 0;\r\n  padding: 12px 8px 12px 26px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: var(--sc-gold);\r\n  box-shadow: 0 12px 28px rgb(241 168 32 \/ 20%);\r\n  color: #171b20;\r\n  font-family: inherit;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 20px;\r\n  text-decoration: none;\r\n  transition: transform 150ms ease, box-shadow 150ms ease;\r\n}\r\n.sparcalc a.sc-button:hover {\r\n  transform: translateY(-2px);\r\n  background: var(--sc-gold);\r\n  color: #171b20;\r\n  box-shadow: 0 15px 30px rgb(241 168 32 \/ 28%);\r\n  text-decoration: none;\r\n}\r\n.sparcalc a.sc-button:focus-visible {\r\n  outline: 2px solid #fff;\r\n  outline-offset: 5px;\r\n}\r\n.sparcalc .sc-arrow {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 34px;\r\n  height: 34px;\r\n  border-radius: 50%;\r\n  background: rgb(0 0 0 \/ 12%);\r\n}\r\n.sparcalc .sc-arrow svg { display: block; width: 18px; height: 18px; }\r\n.sparcalc .sc-note {\r\n  margin: 24px 0 0;\r\n  padding: 0;\r\n  color: var(--sc-muted);\r\n  font-size: 13px;\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n}\r\n@container (max-width: 940px) {\r\n  .sparcalc .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }\r\n  .sparcalc .sc-result { min-height: 340px; }\r\n}\r\n@container (max-width: 520px) {\r\n  .sparcalc .sc-controls { padding: 28px 24px 18px; border-radius: 24px; }\r\n  .sparcalc .sc-result { padding: 32px 24px; border-radius: 24px; min-height: 0; }\r\n  .sparcalc .sc-total { font-size: clamp(24px, 7.5cqi, 40px); letter-spacing: -1px; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .sparcalc a.sc-button { transition: none; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"sparcalc\" lang=\"sv\" role=\"region\" aria-label=\"Sparr\u00e4knare\">\r\n  <div class=\"sc-grid\">\r\n    <div class=\"sc-controls\">\r\n      <label class=\"sc-field\">\r\n        <span class=\"sc-field-head\">\r\n          <span>M\u00e5nadssparande<\/span>\r\n          <span class=\"sc-value\" data-value=\"monthly\" aria-hidden=\"true\">1 000 kr<\/span>\r\n        <\/span>\r\n        <input class=\"sc-range\" data-input=\"monthly\" type=\"range\"\r\n          min=\"0\" max=\"20000\" step=\"100\" value=\"1000\" aria-label=\"M\u00e5nadssparande\">\r\n      <\/label>\r\n      <label class=\"sc-field\">\r\n        <span class=\"sc-field-head\">\r\n          <span>Startbelopp<\/span>\r\n          <span class=\"sc-value\" data-value=\"initial\" aria-hidden=\"true\">100 000 kr<\/span>\r\n        <\/span>\r\n        <input class=\"sc-range\" data-input=\"initial\" type=\"range\"\r\n          min=\"0\" max=\"1000000\" step=\"1000\" value=\"100000\" aria-label=\"Startbelopp\">\r\n      <\/label>\r\n      <label class=\"sc-field\">\r\n        <span class=\"sc-field-head\">\r\n          <span>Antal \u00e5r att spara<\/span>\r\n          <span class=\"sc-value\" data-value=\"years\" aria-hidden=\"true\">10 \u00e5r<\/span>\r\n        <\/span>\r\n        <input class=\"sc-range\" data-input=\"years\" type=\"range\"\r\n          min=\"1\" max=\"40\" step=\"1\" value=\"10\" aria-label=\"Antal \u00e5r att spara\">\r\n      <\/label>\r\n      <label class=\"sc-field\">\r\n        <span class=\"sc-field-head\">\r\n          <span>\u00c5rlig avkastning<\/span>\r\n          <span class=\"sc-value\" data-value=\"rate\" aria-hidden=\"true\">9,5 %<\/span>\r\n        <\/span>\r\n        <input class=\"sc-range\" data-input=\"rate\" type=\"range\"\r\n          min=\"0\" max=\"20\" step=\"0.5\" value=\"9.5\" aria-label=\"\u00c5rlig avkastning\">\r\n      <\/label>\r\n    <\/div>\r\n\r\n    <div class=\"sc-result\">\r\n      <div aria-live=\"polite\" aria-atomic=\"true\">\r\n        <p class=\"sc-caption\">Totalbelopp efter <span data-years>10<\/span> \u00e5r<\/p>\r\n        <output class=\"sc-total\" data-total>456 686 kr<\/output>\r\n      <\/div>\r\n      <!-- BYT #bestall TILL DIN BEST\u00c4LLNINGSL\u00c4NK -->\r\n      <a class=\"sc-button\" href=\"#bestall\">\r\n        <span>Best\u00e4ll nu<\/span>\r\n        <span class=\"sc-arrow\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n               stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n      <\/a>\r\n      <p class=\"sc-note\">\u201dLaborera g\u00e4rna med egna siffror i r\u00e4knesnurran och se skillnaden mellan att f\u00e5 7% avkastning per \u00e5r och 15% per \u00e5r vilket \u00e4r mitt m\u00e5l de kommande 15 \u00e5ren. Skatter, avgifter och andra eventuella kostnader \u00e4r inte inr\u00e4knat i summan.\u201d<\/p>\r\n      <noscript><p class=\"sc-note\">Aktivera JavaScript f\u00f6r att anv\u00e4nda r\u00e4knaren.<\/p><\/noscript>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  \/\/ Varje instans fungerar separat, \u00e4ven med flera r\u00e4knare p\u00e5 samma sida.\r\n  document.querySelectorAll('.sparcalc').forEach(function (root) {\r\n    if (root.dataset.scReady === 'true') return;\r\n    root.dataset.scReady = 'true';\r\n\r\n    const inputs = {};\r\n    const amounts = new Intl.NumberFormat('sv-SE', { maximumFractionDigits: 0 });\r\n    const rates = new Intl.NumberFormat('sv-SE', { maximumFractionDigits: 1 });\r\n    root.querySelectorAll('[data-input]').forEach(function (input) {\r\n      inputs[input.dataset.input] = input;\r\n      input.addEventListener('input', update);\r\n      input.addEventListener('change', update);\r\n    });\r\n\r\n    function update() {\r\n      Object.keys(inputs).forEach(function (key) {\r\n        const input = inputs[key];\r\n        const value = Number(input.value);\r\n        const fraction = (value - Number(input.min)) \/ (Number(input.max) - Number(input.min));\r\n        \/\/ Fyllningen f\u00f6ljer cirkelns mitt, \u00e4ven n\u00e4ra \u00e4ndl\u00e4gena.\r\n        input.style.setProperty('--sc-fill',\r\n          'calc(' + (fraction * 100) + '% + ' + (11 - 22 * fraction) + 'px)');\r\n        const text = key === 'rate' ? rates.format(value) + ' %'\r\n          : key === 'years' ? amounts.format(value) + ' \u00e5r'\r\n          : amounts.format(value) + ' kr';\r\n        root.querySelector('[data-value=\"' + key + '\"]').textContent = text;\r\n        input.setAttribute('aria-valuetext', text);\r\n      });\r\n\r\n      const monthly = Number(inputs.monthly.value);\r\n      const initial = Number(inputs.initial.value);\r\n      const years = Number(inputs.years.value);\r\n      const months = years * 12;\r\n      const monthlyRate = Number(inputs.rate.value) \/ 100 \/ 12;\r\n\r\n      \/\/ Nominell \u00e5rsr\u00e4nta \/ 12, r\u00e4nta varje m\u00e5nad.\r\n      \/\/ Ins\u00e4ttningen g\u00f6rs i slutet av varje m\u00e5nad. Inga skatter eller avgifter.\r\n      let total;\r\n      if (monthlyRate === 0) {\r\n        total = initial + monthly * months;\r\n      } else {\r\n        const growth = Math.pow(1 + monthlyRate, months);\r\n        total = initial * growth + monthly * (growth - 1) \/ monthlyRate;\r\n      }\r\n      root.querySelector('[data-years]').textContent = String(years);\r\n      root.querySelector('[data-total]').textContent = amounts.format(Math.round(total)) + ' kr';\r\n    }\r\n    update();\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>M\u00e5nadssparande 1 000 kr Startbelopp 100 000 kr Antal \u00e5r att spara 10 \u00e5r \u00c5rlig avkastning 9,5 % Totalbelopp efter 10 \u00e5r 456 686 kr Best\u00e4ll nu \u201dLaborera g\u00e4rna med egna siffror i r\u00e4knesnurran och se skillnaden mellan att f\u00e5 7% avkastning per \u00e5r och 15% per \u00e5r vilket \u00e4r mitt m\u00e5l de kommande 15 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":4,"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/demo3.industrimedia.se\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}