{"id":10,"date":"2025-05-25T21:27:05","date_gmt":"2025-05-25T21:27:05","guid":{"rendered":"https:\/\/fortum-regnskog.no\/?page_id=10"},"modified":"2025-07-17T17:37:03","modified_gmt":"2025-07-17T17:37:03","slug":"regnskogbevaring","status":"publish","type":"page","link":"https:\/\/fortum-regnskog.no\/","title":{"rendered":"Regnskogbevaring"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"10\" class=\"elementor elementor-10\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-620dc84 e-con-full e-flex e-con e-parent\" data-id=\"620dc84\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=Y3H66p_sw-w&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\" role=\"presentation\"><\/div>\n\t\t\t\t\t\t<\/div>\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e734196 e-flex e-con-boxed e-con e-parent\" data-id=\"e734196\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-be3d898 e-con-full e-flex e-con e-child\" data-id=\"be3d898\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-258aac8 elementor-widget elementor-widget-image\" data-id=\"258aac8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"71\" src=\"https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/fortum_logi-300x71.jpg\" class=\"attachment-medium size-medium wp-image-174\" alt=\"\" srcset=\"https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/fortum_logi-300x71.jpg 300w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/fortum_logi-1024x241.jpg 1024w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/fortum_logi-768x181.jpg 768w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/fortum_logi-1536x361.jpg 1536w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/fortum_logi-2048x482.jpg 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-54976c1 e-con-full e-flex e-con e-child\" data-id=\"54976c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2620a1a elementor-widget elementor-widget-image\" data-id=\"2620a1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"82\" src=\"https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/logo_NO_horizontal_green-300x82.png\" class=\"attachment-medium size-medium wp-image-175\" alt=\"\" srcset=\"https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/logo_NO_horizontal_green-300x82.png 300w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/logo_NO_horizontal_green-1024x281.png 1024w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/logo_NO_horizontal_green-768x211.png 768w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/logo_NO_horizontal_green-1536x422.png 1536w, https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/logo_NO_horizontal_green-2048x562.png 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4e058c1 e-con-full e-flex e-con e-parent\" data-id=\"4e058c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ba3019 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"2ba3019\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Kroner og omr\u00e5de reddet<\/title>\n  <style>\n    \/* Basic Reset *\/\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      font-family: 'Helvetica Neue', Arial, sans-serif;\n      color: #333333;\n      font-size: 19.8px;\n      background-color: #ffffff;\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .input-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      margin-bottom: 20px;\n      margin-top: 20px;\n    }\n\n    #kroner-input,\n    #kroner-input-map3,\n    #address-input {\n      padding: 10.8px;\n      width: 100%;\n      max-width: 450px;\n      background-color: #ffffff;\n      border: 2px solid #333333;\n      border-radius: 8px;\n      font-size: 19.8px;\n      margin-bottom: 1px;\n      margin-top: 1.8px;\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      transition: border-color 0.3s, box-shadow 0.3s;\n      text-align: center;\n    }\n\n    label {\n      font-size: 19.8px;\n      color: #333333;\n      font-weight: normal;\n      margin-bottom: 10px;\n      line-height: 1.4;\n    }\n\n    #content {\n      margin-bottom: 20px;\n    }\n\n    .map-container {\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n      width: 100%;\n      max-width: 95%;\n      margin: 20px auto;\n    }\n\n    .map-item {\n      width: 48%;\n      text-align: center;\n    }\n\n    .map-item p {\n      font-size: 16px;\n      color: #333333;\n      margin-bottom: 15px;\n      margin-top: 50px;\n    }\n\n    iframe {\n      width: 100%;\n      height: 50vh;\n      border-radius: 10px;\n    }\n\n    .output-value {\n      font-weight: normal;\n      color: #188156;\n    }\n\n    h2 {\n      font-family: \"Helvetica Neue\", Arial, sans-serif;\n      font-size: 29px;\n      font-weight: bold;\n      text-transform: capitalize;\n      font-style: normal;\n      line-height: 58px;\n      letter-spacing: -1.05px;\n      color: #333333;\n      margin-bottom: 18px;\n    }\n\n    h5 {\n      font-family: \"Helvetica Neue\", Arial, sans-serif;\n      font-size: 20px;\n      font-weight: bold;\n      color: #333333;\n    }\n\n    p {\n      font-family: \"Helvetica Neue\", Arial, sans-serif;\n      font-size: 16px;\n      font-weight: normal;\n      color: #333333;\n    }\n\n    #donation-div {\n      margin-top: 36px;\n    }\n\n    .container {\n      display: grid;\n      grid-template-columns: 1fr 2fr 1fr;\n      gap: 20px;\n      width: 100%;\n      max-width: 900px;\n      margin-top: 20px;\n    }\n\n    .area-box {\n      display: flex;\n      align-items: center;\n      padding: 10.8px;\n      width: 100%;\n      background-color: #ffffff;\n      border: 2px solid #333333;\n      border-radius: 8px;\n      font-size: 19.8px;\n      text-align: left;\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      transition: border-color 0.3s, box-shadow 0.3s;\n      margin-top: 5px;\n      justify-content: center;\n    }\n\n    .area-box .label {\n      font-weight: normal;\n      margin-right: 8px;\n      color: #333333;\n    }\n\n    .area-box .output-value {\n      font-size: 24px;\n      font-weight: normal;\n      color: #188156;\n    }\n\n    .area-box:focus {\n      border-color: #188156;\n      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n      outline: none;\n    }\n\n    #empty-page {\n      display: none;\n    }\n\n    .toggle-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .toggle-label {\n      margin: 0 10px;\n      font-size: 18px;\n      color: #333333;\n      text-align: center;\n      font-weight: 400;\n      transition: font-weight 0.2s;\n    }\n\n    .toggle-label.active {\n      font-weight: 700;\n    }\n\n    .switch {\n      position: relative;\n      display: inline-block;\n      width: 80px;\n      height: 34px;\n    }\n\n    .switch input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n    }\n\n    .slider {\n      position: absolute;\n      cursor: pointer;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background-color: #a8e6a3;\n      transition: 0.4s;\n      border-radius: 50px;\n    }\n\n    .slider:before {\n      position: absolute;\n      content: \"\";\n      height: 26px;\n      width: 26px;\n      border-radius: 50px;\n      left: 4px;\n      bottom: 4px;\n      background-color: white;\n      transition: 0.4s;\n    }\n\n    input:checked + .slider {\n      background-color: #188156;\n    }\n\n    input:checked + .slider:before {\n      transform: translateX(46px);\n    }\n\n    .tree-representation {\n      display: none;\n      text-align: center;\n      font-size: 18px;\n      margin-top: 20px;\n      color: #188156;\n    }\n\n    .tree-representation img {\n      width: 60px;\n      margin-bottom: 10px;\n    }\n\n    @media (max-width: 768px) {\n      .map-container {\n        flex-direction: column;\n        align-items: center;\n      }\n\n      .map-item {\n        width: 100%;\n      }\n\n      .map-item p {\n        margin-top: 20px;\n        margin-bottom: 15px;\n      }\n\n      iframe {\n        width: 100%;\n        height: 40vh;\n      }\n\n      .container {\n        grid-template-columns: 1fr;\n        gap: 10px;\n      }\n\n      .area-box {\n        font-size: 18px;\n      }\n\n      #kroner-input,\n      #kroner-input-map3,\n      #address-input {\n        font-size: 18px;\n        padding: 8px;\n      }\n\n      .toggle-container {\n        flex-direction: row;\n        justify-content: space-between;\n        width: 100%;\n        margin-top: 20px;\n      }\n\n      .toggle-label {\n        font-size: 16px;\n        margin: 0;\n      }\n\n      h2 {\n        font-size: 20px;\n      }\n\n      h5 {\n        font-size: 18px;\n      }\n\n      p {\n        font-size: 14px;\n      }\n\n      .label-group {\n        font-size: 16px;\n        line-height: 1.4;\n        color: #333333;\n      }\n    }\n\n    @media (max-width: 480px) {\n      body {\n        padding: 10px;\n      }\n\n      h2 {\n        font-size: 18px;\n      }\n\n      h5 {\n        font-size: 16px;\n      }\n\n      p {\n        font-size: 14px;\n      }\n\n      .container {\n        padding: 0;\n        gap: 8px;\n      }\n\n      .area-box {\n        font-size: 16px;\n      }\n\n      .toggle-label {\n        font-size: 14px;\n      }\n\n      .label-group {\n        font-size: 14px;\n        line-height: 1.4;\n        color: #333333;\n      }\n    }\n\n    .info-text {\n      margin-top: 20px;\n      font-size: 14px;\n      color: #333333;\n      text-align: center;\n    }\n\n    \/* ================================\n       Tree-animation container + icons\n       ================================ *\/\n    .tree-animation {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      margin-top: 20px;\n    }\n\n    .tree-animation img {\n      width: 8%;\n      max-width: 60px;\n      margin: 4px;\n      transition: opacity 0.2s ease;\n    }\n\n    .tree-animation img.partial {\n      width: calc(8% * 0.8);\n      opacity: 0.8;\n    }\n\n    @media (max-width: 480px) {\n      .tree-animation img {\n        width: 12%;\n        max-width: 50px;\n      }\n      .tree-animation img.partial {\n        width: calc(12% * 0.8);\n      }\n    }\n\n    \/* ================================\n       Constrain on desktop: 100px margin each side\n       ================================ *\/\n    @media (min-width: 1024px) {\n      .tree-animation {\n        max-width: calc(100% - 800px);\n        margin: 0 auto;\n        margin-top: 20px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"input-container\">\n    <label id=\"main-label\" for=\"address-input\">\n      S\u00e5 mye regnskog reddet Gr\u00f8nt Valg-kunder totalt i 2024\n    <\/label>\n  <\/div>\n\n  <!-- Toggle Button -->\n  <div class=\"toggle-container\">\n    <label class=\"toggle-label active\" id=\"label-total\" for=\"fortum-toggle\">Gr\u00f8nt Valg totalt<\/label>\n    <label class=\"switch\">\n      <input type=\"checkbox\" id=\"fortum-toggle\" \/>\n      <span class=\"slider\"><\/span>\n    <\/label>\n    <label class=\"toggle-label\" id=\"label-customer\" for=\"fortum-toggle\">Gr\u00f8nt Valg per kunde<\/label>\n  <\/div>\n\n  <!-- Content for \"Fortum som helhet\" -->\n  <div id=\"content\">\n    <div class=\"input-container\">\n      <input\n        type=\"text\"\n        id=\"kroner-input\"\n        placeholder=\"Skriv inn et bel\u00f8p her (kr)\"\n        oninput=\"formatCurrency(this)\"\n        value=\"10000000\"\n        style=\"display: none;\"\n      \/>\n      <div class=\"container\">\n        <div>\n          <img decoding=\"async\"\n            src=\"https:\/\/shedtest.no\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-23-at-17.35.16.png\"\n            alt=\"Tree Icon\"\n            style=\"width: 60px;\"\n          \/>\n          <p>Antall tr\u00e6r reddet<\/p>\n          <span id=\"trees-output\" class=\"output-value\" style=\"font-size: 24px;\">\n            0\n          <\/span>\n        <\/div>\n\n        <div style=\"text-align: center;\">\n          <div class=\"area-box-container\">\n            <div class=\"area-box\">\n              <span class=\"label\">Omr\u00e5de reddet (km\u00b2):<\/span>\n              <span id=\"area-km2-output\" class=\"output-value\">0<\/span>\n            <\/div>\n            <div class=\"area-box\">\n              <span class=\"label\">Omr\u00e5de reddet (m\u00b2):<\/span>\n              <span id=\"area-output\" class=\"output-value\">0<\/span>\n            <\/div>\n            <div class=\"area-box\">\n              <span class=\"label\">Fotballbaner reddet:<\/span>\n              <span id=\"fotballbaner-output\" class=\"output-value\">0<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div>\n          <img decoding=\"async\"\n            src=\"https:\/\/shedtest.no\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-23-2025-09_46_52-PM.png\"\n            alt=\"CO2 Icon\"\n            style=\"width: 60px;\"\n          \/>\n          <p>CO\u2082 spart (tonn)<\/p>\n          <span id=\"co2-output\" class=\"output-value\" style=\"font-size: 24px;\">\n            0\n          <\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Tree representation for \"Fortum per kunde\" -->\n  <div id=\"tree-representation\" class=\"tree-representation\">\n    <div>\n      <span class=\"output-value\" style=\"font-size: 22px;\">\n        Du som Gr\u00f8nt Valg-kunde\n      <\/span>\n    <\/div>\n    <div>\n      <!-- Starts at 10,0 and animates to 25,8 -->\n      <span id=\"trees-count\" class=\"output-value\" style=\"font-size: 18px;\">\n        10,0 tr\u00e6r reddet\n      <\/span>\n    <\/div>\n    <!-- Container for the 25 full + 1 partial tree icons -->\n    <div id=\"tree-animation\" class=\"tree-animation\"><\/div>\n  <\/div>\n\n  <!-- Flex container for two iframes, each with its own text above -->\n  <div class=\"map-container\" id=\"maps\">\n    <div class=\"map-item\">\n      <p>\n        Samlet har vi som Gr\u00f8nt Valg-kunder reddet regnskog i S\u00f8r-Amerika, Afrika og Asia tilsvarende dette omr\u00e5det i Oslo\n      <\/p>\n      <iframe\n        src=\"https:\/\/app.shed.no\/embed\/?experienceId=shed-norway-rainforest-partners-fortum-city\"\n        frameborder=\"0\"\n        allowfullscreen\n      ><\/iframe>\n    <\/div>\n    <div class=\"map-item\">\n      <p>\n        Kartet under viser et omr\u00e5de i Xingu-provinsen i Amazonas (Brasil) tilsvarende v\u00e5rt samlede bidrag til Regnskogfondet\n      <\/p>\n      <iframe\n        src=\"https:\/\/app.shed.no\/embed\/?experienceId=shed-norway-rainforest-partners-fortum-forest\"\n        frameborder=\"0\"\n        allowfullscreen\n      ><\/iframe>\n    <\/div>\n  <\/div>\n\n  <!-- Additional Information -->\n  <div class=\"input-container\">\n    <p style=\"margin-top: 50px;\">\n      Tallene representert er basert p\u00e5 Fortum Consumer Solutions bidrag til Regnskogfondet i 2024\n    <\/p>\n    <p style=\"font-size: 14px;\">\n      Om Regnskogfondet: Regnskogfondet beskytter 765 000 km\u00b2 regnskog, et areal omtrent like stort som Norge og Sverige til sammen. Regnskogfondet jobber tett sammen med lokale urfolksorganisasjoner for \u00e5 opprette verneomr\u00e5der, og n\u00e5r disse omr\u00e5dene er beskyttet, forvaltes de p\u00e5 en skikkelig m\u00e5te. Gjennom sin st\u00f8tte bidrar Fortum Consumer Solutions til at 24 000 km\u00b2 av dette omr\u00e5det er juridisk beskyttet.\n    <\/p>\n  <\/div>\n\n  <script>\n    \/\/ \u2500\u2500\u2500 Reusable function to animate any numeric value \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function animateValue(elementId, start, end, duration, formatter) {\n      const element = document.getElementById(elementId);\n      if (!element) return;\n\n      const range = end - start;\n      const minTimer = 30; \/\/ update interval in ms\n      const steps = Math.ceil(duration \/ minTimer);\n      let currentStep = 0;\n      const stepValue = range \/ steps;\n\n      const timer = setInterval(() => {\n        currentStep++;\n        const value = start + stepValue * currentStep;\n        if (currentStep >= steps) {\n          element.innerText = formatter(end);\n          clearInterval(timer);\n        } else {\n          element.innerText = formatter(value);\n        }\n      }, minTimer);\n    }\n\n    \/\/ \u2500\u2500\u2500 Format the input value with thousand separators and recalc \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function formatCurrency(input) {\n      let value = input.value.replace(\/[^\\d]\/g, '');\n      if (value) {\n        value = parseInt(value).toLocaleString('no-NO');\n      }\n      input.value = value;\n      calculate();\n    }\n\n    \/\/ \u2500\u2500\u2500 Calculate all metrics and animate them \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function calculate() {\n      const rawString = document\n        .getElementById('kroner-input')\n        .value.replace(\/[^\\d]\/g, '');\n      const kronerAmount = parseFloat(rawString) || 10000000;\n\n      const storrelseReddetM2 = kronerAmount * 4.56;\n      const fotballbanerReddet = storrelseReddetM2 \/ 7140;\n      const km2Reddet = storrelseReddetM2 \/ 1000000;\n      const hektarReddet = km2Reddet * 100;\n      const treesSaved = hektarReddet * 565;\n      const tonnCO2 = hektarReddet * 550.5;\n      const duration = 2000;\n\n      animateValue(\n        'trees-output',\n        0,\n        treesSaved,\n        duration,\n        value => Math.floor(value).toLocaleString('no-NO')\n      );\n\n      animateValue(\n        'area-output',\n        0,\n        storrelseReddetM2,\n        duration,\n        value => Math.floor(value).toLocaleString('no-NO')\n      );\n\n      animateValue(\n        'area-km2-output',\n        0,\n        km2Reddet,\n        duration,\n        value => value.toLocaleString('no-NO', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n      );\n\n      animateValue(\n        'fotballbaner-output',\n        0,\n        Math.floor(fotballbanerReddet),\n        duration,\n        value => Math.floor(value).toString()\n      );\n\n      animateValue(\n        'co2-output',\n        0,\n        tonnCO2,\n        duration,\n        value => value.toLocaleString('no-NO', { minimumFractionDigits: 0, maximumFractionDigits: 0 })\n      );\n\n      updateMapCircle(storrelseReddetM2);\n    }\n\n    \/\/ \u2500\u2500\u2500 Toggle logic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    const checkbox = document.getElementById('fortum-toggle');\n    const leftLabel = document.getElementById('label-total');\n    const rightLabel = document.getElementById('label-customer');\n    const treeRepresentation = document.getElementById('tree-representation');\n    const content = document.getElementById('content');\n    const maps = document.getElementById('maps');\n    const mainLabel = document.getElementById('main-label');\n\n    function updateLabelWeights() {\n      if (checkbox.checked) {\n        leftLabel.classList.remove('active');\n        rightLabel.classList.add('active');\n      } else {\n        leftLabel.classList.add('active');\n        rightLabel.classList.remove('active');\n      }\n    }\n\n    checkbox.addEventListener('change', function () {\n      if (this.checked) {\n        \/\/ Show customer\u2010view\n        content.style.display = 'none';\n        treeRepresentation.style.display = 'block';\n        maps.style.display = 'none';\n        mainLabel.innerText =\n          'S\u00e5 mye bidro du som Gr\u00f8nt Valg-kunde til \u00e5 redde Regnskog i 2024';\n\n        \/\/ Clear any previous icons so we can replay on re\u2010toggle\n        const container = document.getElementById('tree-animation');\n        container.innerHTML = '';\n\n        \/\/ Start the customer tree animation\n        paintTrees();\n        animateCustomerTrees();\n      } else {\n        \/\/ Show total\u2010view\n        content.style.display = 'block';\n        treeRepresentation.style.display = 'none';\n        maps.style.display = 'flex';\n        mainLabel.innerText =\n          'S\u00e5 mye regnskog reddet Gr\u00f8nt Valg-kunder totalt i 2024';\n\n        \/\/ Re\u2010run the count\u2010up for the total view\n        calculate();\n      }\n      updateLabelWeights();\n    });\n\n    \/\/ \u2500\u2500\u2500 Customer\u2010tree animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function paintTrees() {\n      const container = document.getElementById('tree-animation');\n      if (!container) return;\n      const TREE_URL = 'https:\/\/fortum-regnskog.no\/wp-content\/uploads\/2025\/06\/tree-scaled.jpg';\n      const TOTAL_COUNT = 26; \/\/ 25 full + 1 partial\n      for (let i = 0; i < TOTAL_COUNT; i++) {\n        setTimeout(() => {\n          const img = document.createElement('img');\n          img.src = TREE_URL;\n          img.alt = 'Tree Icon';\n          if (i === TOTAL_COUNT - 1) {\n            img.classList.add('partial');\n          }\n          container.appendChild(img);\n        }, i * 200);\n      }\n    }\n\n    function animateCustomerTrees() {\n      const startValue = 10.0;\n      const endValue = 25.8;\n      const duration = 5000;      \/\/ 26 icons \u00d7 200ms = 5000ms\n      const stepInterval = 200;   \/\/ update every 200ms\n      const element = document.getElementById('trees-count');\n      const startTime = Date.now();\n\n      const timer = setInterval(() => {\n        const elapsed = Date.now() - startTime;\n        if (elapsed >= duration) {\n          element.innerText =\n            endValue\n              .toLocaleString('no-NO', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) +\n            ' tr\u00e6r reddet';\n          clearInterval(timer);\n        } else {\n          const progress = elapsed \/ duration;\n          const current = startValue + (endValue - startValue) * progress;\n          element.innerText =\n            current\n              .toLocaleString('no-NO', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) +\n            ' tr\u00e6r reddet';\n        }\n      }, stepInterval);\n    }\n\n    \/\/ \u2500\u2500\u2500 Stub for updateMapCircle (if you have it elsewhere) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function updateMapCircle(area) {\n      \/\/ Your existing map\u2010update logic\n    }\n\n    \/\/ \u2500\u2500\u2500 Initialize on load \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    window.onload = function () {\n      \/\/ Only initialize the total\u2010view counters; do not start the tree animation here\n      calculate();\n      mainLabel.innerText =\n        'S\u00e5 mye regnskog reddet Gr\u00f8nt Valg-kunder totalt i 2024';\n      updateLabelWeights();\n    };\n  <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\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>Kroner og omr\u00e5de reddet S\u00e5 mye regnskog reddet Gr\u00f8nt Valg-kunder totalt i 2024 Gr\u00f8nt Valg totalt Gr\u00f8nt Valg per kunde Antall tr\u00e6r reddet 0 Omr\u00e5de reddet (km\u00b2): 0 Omr\u00e5de reddet (m\u00b2): 0 Fotballbaner reddet: 0 CO\u2082 spart (tonn) 0 Du som Gr\u00f8nt Valg-kunde 10,0 tr\u00e6r reddet Samlet har vi som Gr\u00f8nt Valg-kunder reddet regnskog i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":209,"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":233,"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/233"}],"wp:attachment":[{"href":"https:\/\/fortum-regnskog.no\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}