CO₂ Compensation Calculator @climate-calculator

In Development

Climate-Calculator

Live Url: https://www.klimaschutzstiftung-bw.de/de/co2-rechner

There are different Scenarios for the Calculator:

Default Version
Landing Page for small Donations
Landing Page for Baden-Württemberg-App
Bws World Flight Calculator

Each render a bit differently, showing e.g. only one calculator or only a themed checkout screen.

API

Two external APIs are used to calculate the emissions

myclimate for Car, Direct and Company
atmosfair for Flight

Internal API

User API for Bws World Flight Calculator

The APIs are CORS blocked. It will work locally with a proxy. It will not work on bwst-dev.rsm-frontend.de

There is a fourth "api", that is a json file in the /api folder to fetch all airports for the Flight Calculator airports.json.

Loading the airports.json file will work locally but not on bwst-dev.rsm-frontend.de, because in the production build it will be prefixed with /dest/ to work with the Typo3 extension.

To run these APIs locally use the proxy .cc-dev-proxy provided in this repo, that will route everything to the production proxy that connects the APIs. Follow the instructions in the Readme.

Scenarios

Default Version

Calculator to compensate Car Rides, Flights and Company Co2 Emissions
Fill in data-apiurl with the correct API-Url
- production: https://www.klimaschutzstiftung-bw.de/de/bereiche-programme?eID=rsmbwstdata&path=
- locally with proxy): http://localhost:3001/proxy/api/de/bereiche-programme?eID=rsmbwstdata&path=
Checkout by Fundraising Box or Betterplace.org iframe
- If config has config.global.formParams.hash use [Fundraising Box (https://developer.fundraisingbox.com/reference/form-prepopulation-api)
- Else use Betterplace.org
Some Values can be set by providing a config in a global JS-Variable window.CLIMATE_CALCULATOR_CONFIG, check the types to set the right values

Landing Page for small donations

Renders only the Checkout Screen of the Default Version if data-landing=donation
Texts and Presets can be set by editing the donation property in the config, check the DonationConfig type to set the right values
It's also possible to set a Partner Logo and a project highlight ID. See here
The Fundraining Box can take custom field values by adding kssid and ksstype to the url params
A custom donation value can be set by adding donation={donationInEuro} to the url params

Landing Page for Baden-Württemberg App

Renders only the Checkout Screen of the Default Version if data-landing=bawu
Shows a themed version of the Calculator
The kg of the Boxes can be set by url params, see AppLandingPageParams in types

Bws World Flight Calculator

Renders only the FlightCalculator and the ListScreen (different React Comoponents that look similar) if id='bws-world-calculator'
Needs a data-user-apiurl User Api in addition to data-apiurl
To work properly (and becauce it is only being embedded as an iframe) a user token has to be set as a url param ?user=28384
Adds a language switch (only FlightCalculatorAtmosfair and the BWS Components are translated!)
Language can also be set via ?lang=de

User API

The User-Api is used in the BWS-World Scenario, where a user can save and delete flights connected to its user token.

{path} = Path that's passed via data-user-apiurl

production: https://www.klimaschutzstiftung-bw.de/api/flight/user
locally: http://localhost:3001/proxy/api/api/flight/user

{userToken} = Token that's passed via url param ?user=28384

GetFlights

GET {path}?user={userToken} Responses:

Array [{
    id: string,
    date: string (yyyy-mm-dd),
    flight: {
        from: string,
        to: string,
        via?: string
        flight_class?: string,
        passengers?: number,
        roundtrip?: boolean,
    },
    kg: number
}]

AddFlight

POST {path}?user={userToken} Request Body:

{
    date: string (yyyy-mm-dd),
    flight: {
        from: string,
        to: string,
        via?: string
        flight_class?: string,
        passengers?: number,
        roundtrip?: boolean,
    },
    kg: number
}

Responses:

{
    id: string,
    date: string (yyyy-mm-dd),
    flight: {
        from: string,
        to: string,
        via?: string
        flight_class?: string,
        passengers?: number,
        roundtrip?: boolean,
    },
    kg: number
}

DeleteFlight

DELETE {path}/{flightId}?user={userToken} Responses:

{
    id: string,
    date: string (yyyy-mm-dd),
    flight: {
        from: string,
        to: string,
        via?: string
        flight_class?: string,
        passengers?: number,
        roundtrip?: boolean,
    },
    kg: number
}

Default @climate-calculator

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="climate-calculator">
  <div class="climate-calculator__inner" data-apiurl="http://localhost:3001/proxy/api/de/bereiche-programme?eID=rsmbwstdata&amp;path=" id="climate-calculator"></div>
</div>
<script>
  window.CLIMATE_CALCULATOR_CONFIG = {
    "global": {
      "maxAmountInKg": 2000,
      "pricePerKgInEurCents": 2.5,
      "regionalCutPerKgInEurCents": 0.23,
      "switchToTon": 1000,
      "formParams": {
        "hash": "ha8z53auzv2vqk09",
        "sandbox": "fdb557ca"
      }
    },
    "cloud": {
      "switchToTon": 1000
    },
    "flight": {
      "passengers": 1,
      "flightCount": 1,
      "roundtrip": true,
      "flightClass": "economy"
    },
    "company": {
      "number_of_employees": {
        "min": 2,
        "max": 300
      }
    },
    "direct": {
      "amount": {
        "min": 500,
        "max": 10000
      },
      "presets": [{
          "text": "S",
          "value": 1000,
          "tooltip": "Entspricht in etwa dem CO₂-Fußabdruck unseres digitalen Lebensstils. Bis zu einer Tonne CO₂ kann durch intensive Nutzung von Informationstechnik im Alltag entstehen. (Quelle: Öko-Institut e.V.)"
        },
        {
          "text": "M",
          "value": 2000,
          "tooltip": "Entspricht der Menge CO₂, die pro Person durch Hin- und Rückflug von Stuttgart nach Atlanta in der Economy Class entsteht. (Quelle: myclimate Deutschland)"
        },
        {
          "text": "L",
          "value": 5000,
          "tooltip": "In etwa 9,1 Tonnen CO<sub>2</sub> verursacht der/die durschnittliche Deutsche im Jahr pro Kopf. Selbst wenn wir es schaffen, unseren CO₂-Fußabdruck um die Hälfte zu reduzieren, bleiben noch ca. 5 Tonnen klimaschädliches CO₂ übrig. (Quelle: Joint Research Centre der EU)"
        }
      ]
    },
    "wording": {
      "regionalCutHint": "Zusätzlich zu Ihrer Kompensation können Sie für den Klimaschutz in Baden-Württemberg spenden. Pro kompensierter Tonne CO<sub>2</sub> fließt ein Betrag von {{regionalCutPerKgInEurCents}} in regionale Klimaschutzprojekte.",
      "checkoutHeadline": "Ihre Spende für Kompensation und Klimaschutz",
      "checkoutText": [
        "<strong>Kompensation</strong>: Mit Ihrer Spende werden die Gold Standard zertifizierten Projekte „Kleinbiogasanlagen in Nepal“ und „Effiziente Öfen in Ruanda“ unseres Partners atmosfair unterstützt. In beiden Projekten sind Vereinbarungen mit den Projektgastländern geschlossen, die Doppelzählung vermeiden und eine wirksame Kompensation Ihrer CO<sub>2</sub>-Emissionen ermöglichen. Gleichzeitig leisten die Projekte einen wichtigen Beitrag zu den Nachhaltigkeitszielen der Vereinten Nationen.",
        "<strong>Regionaler Klimaschutz:</strong> Wenn Sie sich für eine zusätzliche Spende für den regionalen Klimaschutz entscheiden, unterstützen Sie damit Projekte zum klimafreundlichen Humusaufbau in Baden-Württemberg."
      ]
    },
    "car": {
      "distance": {
        "min": 100,
        "max": 2000,
        "default": 200
      },
      "fuelType": {
        "gas": {
          "presets": [
            6.83,
            8.42,
            10.01
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "biodiesel": {
          "presets": [
            5.23,
            6.7,
            8.39
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "biogas": {
          "presets": [
            4.94,
            6.08,
            7.22
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "kg/100km"
          }
        },
        "diesel": {
          "presets": [
            5.23,
            6.7,
            8.39
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "ethanol_10": {
          "presets": [
            6.83,
            8.42,
            10.01
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "ethanol_85": {
          "presets": [
            6.83,
            8.42,
            10.01
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "electric": {
          "presets": [
            16.14,
            19.9,
            23.65
          ],
          "consumption": {
            "min": 1,
            "max": 30,
            "unit": "kWh/100km"
          },
          "electricLocation": {
            "ch": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "de": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "rest": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "at": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "certified_green": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "se": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            }
          }
        },
        "naturalgas": {
          "presets": [
            4.94,
            6.08,
            7.22
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "kg/100km"
          }
        },
        "hybrid": {
          "presets": [
            4.22,
            5.2,
            6.18
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "plug_in_hybrid": {
          "presets": [
            1.48,
            1.82,
            2.16
          ],
          "consumption": {
            "min": 1,
            "max": 10,
            "unit": "l/100km"
          },
          "electricLocation": {
            "ch": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "de": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "rest": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "at": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "certified_green": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "se": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            }
          }
        }
      }
    }
  }
</script>
<article class="quickinfo__panel quickinfo__panel--co2-calculator" id="69534" aria-labelledby="69534-title">
  <div class="quickinfo__content" tabindex="-1">
    <div class="quickinfo__content-inner">
      <div class="quickinfo__block" id="c152sdq">
        <h2 class="headline headline--3">Unterstützung für Klima und Menschen in Nepal und Ruanda</h2>
      </div>
      <div class="quickinfo__block" id="iuy8q">
        <div class="image loading" style="padding-top: 65.31881804043546%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="840" src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" height="840" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
      </div>
      <div class="quickinfo__block" id="c156serwf">
        <div class="text">
          <p><b>Kurzbeschreibung</b> <br />Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.</p>
        </div>
      </div>
      <div class="quickinfo__block" id="c156eq"><a class="button button--primary" href="https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-arrow-right"></use>
          </svg><span class="button__text">Zum Projekt</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-520e-title">
          <title id="icon-520e-title">Schnellinfo schließen</title>
          <use xlink:href="#icon-close"></use>
        </svg></button>
    </div>
  </div>
</article>

{
  "projects": [
    {
      "id": 69534,
      "blocks": [
        {
          "use": "headline--headline-3",
          "id": "c152sdq",
          "inherit": true,
          "settings": {
            "text": "Unterstützung für Klima und Menschen in Nepal und Ruanda",
            "level": 2
          }
        },
        {
          "use": "image",
          "id": "iuy8q",
          "inherit": true,
          "settings": {
            "src": "/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg",
            "width": 1286,
            "height": 840
          }
        },
        {
          "use": "text",
          "id": "c156serwf",
          "inherit": true,
          "settings": {
            "content": "p #[b Kurzbeschreibung] #[br]Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.\n"
          }
        },
        {
          "use": "button--icon",
          "id": "c156eq",
          "inherit": true,
          "settings": {
            "text": "Zum Projekt",
            "link": "https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"
          }
        }
      ]
    }
  ]
}

Landingpage BaWü @climate-calculator--landing-bawu

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="climate-calculator">
  <div class="climate-calculator__inner" data-landing="bawu" data-apiurl="http://localhost:3001/proxy/api/de/bereiche-programme?eID=rsmbwstdata&amp;path=" id="climate-calculator"></div>
</div>
<script>
  window.CLIMATE_CALCULATOR_CONFIG = {
    "global": {
      "maxAmountInKg": 2000,
      "pricePerKgInEurCents": 2.3,
      "regionalCutPerKgInEurCents": 0.21,
      "switchToTon": 1000,
      "formParams": {
        "hash": "0v9wpwf9r18074ef",
        "sandbox": "fdb557ca"
      }
    }
  }
</script>
<article class="quickinfo__panel quickinfo__panel--co2-calculator" id="69534" aria-labelledby="69534-title">
  <div class="quickinfo__content" tabindex="-1">
    <div class="quickinfo__content-inner">
      <div class="quickinfo__block" id="c152sdq">
        <h2 class="headline headline--3">Unterstützung für Klima und Menschen in Nepal und Ruanda</h2>
      </div>
      <div class="quickinfo__block" id="iuy8q">
        <div class="image loading" style="padding-top: 65.31881804043546%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="840" src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" height="840" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
      </div>
      <div class="quickinfo__block" id="c156serwf">
        <div class="text">
          <p><b>Kurzbeschreibung</b> <br />Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.</p>
        </div>
      </div>
      <div class="quickinfo__block" id="c156eq"><a class="button button--primary" href="https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-arrow-right"></use>
          </svg><span class="button__text">Zum Projekt</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-8048-title">
          <title id="icon-8048-title">Schnellinfo schließen</title>
          <use xlink:href="#icon-close"></use>
        </svg></button>
    </div>
  </div>
</article>

{
  "projects": [
    {
      "id": 69534,
      "blocks": [
        {
          "use": "headline--headline-3",
          "id": "c152sdq",
          "inherit": true,
          "settings": {
            "text": "Unterstützung für Klima und Menschen in Nepal und Ruanda",
            "level": 2
          }
        },
        {
          "use": "image",
          "id": "iuy8q",
          "inherit": true,
          "settings": {
            "src": "/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg",
            "width": 1286,
            "height": 840
          }
        },
        {
          "use": "text",
          "id": "c156serwf",
          "inherit": true,
          "settings": {
            "content": "p #[b Kurzbeschreibung] #[br]Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.\n"
          }
        },
        {
          "use": "button--icon",
          "id": "c156eq",
          "inherit": true,
          "settings": {
            "text": "Zum Projekt",
            "link": "https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"
          }
        }
      ]
    }
  ],
  "landing": "bawu"
}

Landingpage small donations and so @climate-calculator--landing-donation

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="climate-calculator">
  <div class="climate-calculator__inner" data-landing="donation" data-apiurl="http://localhost:3001/proxy/api/de/bereiche-programme?eID=rsmbwstdata&amp;path=" id="climate-calculator"></div>
</div>
<script>
  window.CLIMATE_CALCULATOR_CONFIG = {
    "global": {
      "maxAmountInKg": 2000,
      "pricePerKgInEurCents": 2.2,
      "regionalCutPerKgInEurCents": 0.23,
      "switchToTon": 1000,
      "formParams": {
        "hash": "dka8zuajq2mgjb9j",
        "sandbox": "fdb557ca"
      }
    },
    "donation": {
      "default": {
        "value": 1,
        "numberInput": null
      },
      "presets": {
        "1": "1 € gleicht ca. eine Autofahrt (Hin- und Rückfahrt) von Lörrach zum Seehotel Wiesler (60 km) inkl. 1 Übernachtung aus.",
        "3": "3 € gleichen ca. eine Autofahrt (Hin- und Rückfahrt)von Stuttgart/Karlsruhe zum Seehotel Wiesler (170 km) inkl.2 Übernachtungen aus.",
        "5": "5 € gleichen ca. eine Autofahrt (Hin- und Rückfahrt) von Frankfurt zum Seehotel Wiesler (300 km) inkl.3 Übernachtungen aus."
      },
      "wording": {
        "headline": "Ihr Beitrag für einen klimafairen Aufenthalt",
        "copy": "Vielen Dank für Ihre Kompensation.",
        "subheadline": "Bitte wählen Sie den gewünschten Betrag:",
        "projectHeadline": "Unsere Klimaschutzprojekte",
        "projectCopy": "Wählen Sie hier ein hochwertiges, zertifiziertes Klimaschutzprojekt für Ihre Kompensation aus. 90% Ihres Beitrags fließen an unseren Partner myclimate und das gewählte Kompensationsprojekt zum CO2-Ausgleich. 10% fließen als Spende an die Klimaschutzstiftung zur Unterstützung regionaler Klimaschutzprojekte in Baden-Württemberg."
      }
    }
  }
</script>
<article class="quickinfo__panel quickinfo__panel--co2-calculator" id="69534" aria-labelledby="69534-title">
  <div class="quickinfo__content" tabindex="-1">
    <div class="quickinfo__content-inner">
      <div class="quickinfo__block" id="c152sdq">
        <h2 class="headline headline--3">Unterstützung für Klima und Menschen in Nepal und Ruanda</h2>
      </div>
      <div class="quickinfo__block" id="iuy8q">
        <div class="image loading" style="padding-top: 65.31881804043546%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="840" src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" height="840" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
      </div>
      <div class="quickinfo__block" id="c156serwf">
        <div class="text">
          <p><b>Kurzbeschreibung</b> <br />Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.</p>
        </div>
      </div>
      <div class="quickinfo__block" id="c156eq"><a class="button button--primary" href="https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-arrow-right"></use>
          </svg><span class="button__text">Zum Projekt</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-2763-title">
          <title id="icon-2763-title">Schnellinfo schließen</title>
          <use xlink:href="#icon-close"></use>
        </svg></button>
    </div>
  </div>
</article>

{
  "projects": [
    {
      "id": 69534,
      "blocks": [
        {
          "use": "headline--headline-3",
          "id": "c152sdq",
          "inherit": true,
          "settings": {
            "text": "Unterstützung für Klima und Menschen in Nepal und Ruanda",
            "level": 2
          }
        },
        {
          "use": "image",
          "id": "iuy8q",
          "inherit": true,
          "settings": {
            "src": "/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg",
            "width": 1286,
            "height": 840
          }
        },
        {
          "use": "text",
          "id": "c156serwf",
          "inherit": true,
          "settings": {
            "content": "p #[b Kurzbeschreibung] #[br]Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.\n"
          }
        },
        {
          "use": "button--icon",
          "id": "c156eq",
          "inherit": true,
          "settings": {
            "text": "Zum Projekt",
            "link": "https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"
          }
        }
      ]
    }
  ],
  "landing": "donation"
}

Landingpage small donations for Partners @climate-calculator--landing-donation-partner

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="climate-calculator">
  <div class="climate-calculator__inner" data-landing="donation" data-apiurl="http://localhost:3001/proxy/api/de/bereiche-programme?eID=rsmbwstdata&amp;path=" id="climate-calculator"></div>
</div>
<script>
  window.CLIMATE_CALCULATOR_CONFIG = {
    "global": {
      "maxAmountInKg": 2000,
      "pricePerKgInEurCents": 2.2,
      "regionalCutPerKgInEurCents": 0.23,
      "switchToTon": 1000,
      "formParams": {
        "hash": "dka8zuajq2mgjb9j",
        "sandbox": "fdb557ca"
      }
    },
    "donation": {
      "default": {
        "value": 1,
        "numberInput": null
      },
      "highlightProjectId": 69531,
      "partner": {
        "name": "Stuttgarter Kammerorchester",
        "image": "/images/kss/SKO-Logo-opt.svg",
        "width": 930,
        "height": 330
      },
      "presets": {
        "1": "1 € gleicht ca. eine Autofahrt (Hin- und Rückfahrt) von Lörrach zum Seehotel Wiesler (60 km) inkl. 1 Übernachtung aus.",
        "3": "3 € gleichen ca. eine Autofahrt (Hin- und Rückfahrt)von Stuttgart/Karlsruhe zum Seehotel Wiesler (170 km) inkl.2 Übernachtungen aus."
      },
      "wording": {
        "headline": "Ihr Beitrag für einen klimafairen Aufenthalt",
        "copy": "Vielen Dank für Ihre Kompensation.",
        "subheadline": "Bitte wählen Sie den gewünschten Betrag:",
        "projectHeadline": "Unsere Klimaschutzprojekte",
        "projectCopy": "Wählen Sie hier ein hochwertiges, zertifiziertes Klimaschutzprojekt für Ihre Kompensation aus. 90% Ihres Beitrags fließen an unseren Partner myclimate und das gewählte Kompensationsprojekt zum CO2-Ausgleich. 10% fließen als Spende an die Klimaschutzstiftung zur Unterstützung regionaler Klimaschutzprojekte in Baden-Württemberg."
      }
    }
  }
</script>
<article class="quickinfo__panel quickinfo__panel--co2-calculator" id="69534" aria-labelledby="69534-title">
  <div class="quickinfo__content" tabindex="-1">
    <div class="quickinfo__content-inner">
      <div class="quickinfo__block" id="c152sdq">
        <h2 class="headline headline--3">Unterstützung für Klima und Menschen in Nepal und Ruanda</h2>
      </div>
      <div class="quickinfo__block" id="iuy8q">
        <div class="image loading" style="padding-top: 65.31881804043546%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="840" src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" height="840" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
      </div>
      <div class="quickinfo__block" id="c156serwf">
        <div class="text">
          <p><b>Kurzbeschreibung</b> <br />Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.</p>
        </div>
      </div>
      <div class="quickinfo__block" id="c156eq"><a class="button button--primary" href="https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-arrow-right"></use>
          </svg><span class="button__text">Zum Projekt</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-8bcb-title">
          <title id="icon-8bcb-title">Schnellinfo schließen</title>
          <use xlink:href="#icon-close"></use>
        </svg></button>
    </div>
  </div>
</article>

{
  "projects": [
    {
      "id": 69534,
      "blocks": [
        {
          "use": "headline--headline-3",
          "id": "c152sdq",
          "inherit": true,
          "settings": {
            "text": "Unterstützung für Klima und Menschen in Nepal und Ruanda",
            "level": 2
          }
        },
        {
          "use": "image",
          "id": "iuy8q",
          "inherit": true,
          "settings": {
            "src": "/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg",
            "width": 1286,
            "height": 840
          }
        },
        {
          "use": "text",
          "id": "c156serwf",
          "inherit": true,
          "settings": {
            "content": "p #[b Kurzbeschreibung] #[br]Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.\n"
          }
        },
        {
          "use": "button--icon",
          "id": "c156eq",
          "inherit": true,
          "settings": {
            "text": "Zum Projekt",
            "link": "https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"
          }
        }
      ]
    }
  ],
  "landing": "donation",
  "partner": true
}

BWS-World Flight Calculator @climate-calculator--bws-world

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="climate-calculator climate-calculator--bws">
  <div class="climate-calculator__inner" data-apiurl="http://localhost:3001/proxy/api/de/bereiche-programme?eID=rsmbwstdata&amp;path=" data-user-apiurl="http://localhost:3001/proxy/api/api/flight/user" id="bws-world-calculator"></div>
</div>
<script>
  window.CLIMATE_CALCULATOR_CONFIG = {
    "global": {
      "maxAmountInKg": 2000,
      "pricePerKgInEurCents": 2.5,
      "regionalCutPerKgInEurCents": 0.23,
      "switchToTon": 1000,
      "formParams": {
        "hash": "ha8z53auzv2vqk09",
        "sandbox": "fdb557ca"
      }
    },
    "cloud": {
      "switchToTon": 1000
    },
    "flight": {
      "passengers": 1,
      "flightCount": 1,
      "roundtrip": true,
      "flightClass": "economy"
    },
    "company": {
      "number_of_employees": {
        "min": 2,
        "max": 300
      }
    },
    "direct": {
      "amount": {
        "min": 500,
        "max": 10000
      },
      "presets": [{
          "text": "S",
          "value": 1000,
          "tooltip": "Entspricht in etwa dem CO₂-Fußabdruck unseres digitalen Lebensstils. Bis zu einer Tonne CO₂ kann durch intensive Nutzung von Informationstechnik im Alltag entstehen. (Quelle: Öko-Institut e.V.)"
        },
        {
          "text": "M",
          "value": 2000,
          "tooltip": "Entspricht der Menge CO₂, die pro Person durch Hin- und Rückflug von Stuttgart nach Atlanta in der Economy Class entsteht. (Quelle: myclimate Deutschland)"
        },
        {
          "text": "L",
          "value": 5000,
          "tooltip": "In etwa 9,1 Tonnen CO<sub>2</sub> verursacht der/die durschnittliche Deutsche im Jahr pro Kopf. Selbst wenn wir es schaffen, unseren CO₂-Fußabdruck um die Hälfte zu reduzieren, bleiben noch ca. 5 Tonnen klimaschädliches CO₂ übrig. (Quelle: Joint Research Centre der EU)"
        }
      ]
    },
    "wording": {
      "regionalCutHint": "Zusätzlich zu Ihrer Kompensation können Sie für den Klimaschutz in Baden-Württemberg spenden. Pro kompensierter Tonne CO<sub>2</sub> fließt ein Betrag von {{regionalCutPerKgInEurCents}} in regionale Klimaschutzprojekte.",
      "checkoutHeadline": "Ihre Spende für Kompensation und Klimaschutz",
      "checkoutText": [
        "<strong>Kompensation</strong>: Mit Ihrer Spende werden die Gold Standard zertifizierten Projekte „Kleinbiogasanlagen in Nepal“ und „Effiziente Öfen in Ruanda“ unseres Partners atmosfair unterstützt. In beiden Projekten sind Vereinbarungen mit den Projektgastländern geschlossen, die Doppelzählung vermeiden und eine wirksame Kompensation Ihrer CO<sub>2</sub>-Emissionen ermöglichen. Gleichzeitig leisten die Projekte einen wichtigen Beitrag zu den Nachhaltigkeitszielen der Vereinten Nationen.",
        "<strong>Regionaler Klimaschutz:</strong> Wenn Sie sich für eine zusätzliche Spende für den regionalen Klimaschutz entscheiden, unterstützen Sie damit Projekte zum klimafreundlichen Humusaufbau in Baden-Württemberg."
      ]
    },
    "car": {
      "distance": {
        "min": 100,
        "max": 2000,
        "default": 200
      },
      "fuelType": {
        "gas": {
          "presets": [
            6.83,
            8.42,
            10.01
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "biodiesel": {
          "presets": [
            5.23,
            6.7,
            8.39
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "biogas": {
          "presets": [
            4.94,
            6.08,
            7.22
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "kg/100km"
          }
        },
        "diesel": {
          "presets": [
            5.23,
            6.7,
            8.39
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "ethanol_10": {
          "presets": [
            6.83,
            8.42,
            10.01
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "ethanol_85": {
          "presets": [
            6.83,
            8.42,
            10.01
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "electric": {
          "presets": [
            16.14,
            19.9,
            23.65
          ],
          "consumption": {
            "min": 1,
            "max": 30,
            "unit": "kWh/100km"
          },
          "electricLocation": {
            "ch": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "de": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "rest": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "at": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "certified_green": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            },
            "se": {
              "presets": [
                16.14,
                19.9,
                23.65
              ],
              "consumption": {
                "min": 10,
                "max": 30
              }
            }
          }
        },
        "naturalgas": {
          "presets": [
            4.94,
            6.08,
            7.22
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "kg/100km"
          }
        },
        "hybrid": {
          "presets": [
            4.22,
            5.2,
            6.18
          ],
          "consumption": {
            "min": 3,
            "max": 20,
            "unit": "l/100km"
          }
        },
        "plug_in_hybrid": {
          "presets": [
            1.48,
            1.82,
            2.16
          ],
          "consumption": {
            "min": 1,
            "max": 10,
            "unit": "l/100km"
          },
          "electricLocation": {
            "ch": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "de": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "rest": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "at": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "certified_green": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            },
            "se": {
              "presets": [
                1.48,
                1.82,
                2.16
              ],
              "consumption": {
                "min": 1,
                "max": 10
              }
            }
          }
        }
      }
    }
  }
</script>
<article class="quickinfo__panel quickinfo__panel--co2-calculator" id="69534" aria-labelledby="69534-title">
  <div class="quickinfo__content" tabindex="-1">
    <div class="quickinfo__content-inner">
      <div class="quickinfo__block" id="c152sdq">
        <h2 class="headline headline--3">Unterstützung für Klima und Menschen in Nepal und Ruanda</h2>
      </div>
      <div class="quickinfo__block" id="iuy8q">
        <div class="image loading" style="padding-top: 65.31881804043546%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="840" src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg" width="1286" height="840" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
      </div>
      <div class="quickinfo__block" id="c156serwf">
        <div class="text">
          <p><b>Kurzbeschreibung</b> <br />Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.</p>
        </div>
      </div>
      <div class="quickinfo__block" id="c156eq"><a class="button button--primary" href="https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-arrow-right"></use>
          </svg><span class="button__text">Zum Projekt</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-df64-title">
          <title id="icon-df64-title">Schnellinfo schließen</title>
          <use xlink:href="#icon-close"></use>
        </svg></button>
    </div>
  </div>
</article>

{
  "projects": [
    {
      "id": 69534,
      "blocks": [
        {
          "use": "headline--headline-3",
          "id": "c152sdq",
          "inherit": true,
          "settings": {
            "text": "Unterstützung für Klima und Menschen in Nepal und Ruanda",
            "level": 2
          }
        },
        {
          "use": "image",
          "id": "iuy8q",
          "inherit": true,
          "settings": {
            "src": "/images/kss/Kompensationsprojekt_Gorillas_Ruanda.jpg",
            "width": 1286,
            "height": 840
          }
        },
        {
          "use": "text",
          "id": "c156serwf",
          "inherit": true,
          "settings": {
            "content": "p #[b Kurzbeschreibung] #[br]Der Lebensraum dieser gefährdeten Tiere wird zerstört und geht immer weiter zurück. Hier erfahren Sie, wie unser Projekt die Gorillas schützen kann.\n"
          }
        },
        {
          "use": "button--icon",
          "id": "c156eq",
          "inherit": true,
          "settings": {
            "text": "Zum Projekt",
            "link": "https://www.klimaschutzstiftung-bw.de/de/kompensationsprojekte/berggorillas-in-ruanda"
          }
        }
      ]
    }
  ],
  "bws": true
}

CO₂ Compensation Calculator @climate-calculator

Climate-Calculator

API

Scenarios

Default Version

Landing Page for small donations

Landing Page for Baden-Württemberg App

Bws World Flight Calculator

User API

GetFlights

AddFlight

DeleteFlight

Variants

# Default @climate-calculator

# Landingpage BaWü @climate-calculator--landing-bawu

# Landingpage small donations and so @climate-calculator--landing-donation

# Landingpage small donations for Partners @climate-calculator--landing-donation-partner

# BWS-World Flight Calculator @climate-calculator--bws-world

Default @climate-calculator

Landingpage BaWü @climate-calculator--landing-bawu

Landingpage small donations and so @climate-calculator--landing-donation

Landingpage small donations for Partners @climate-calculator--landing-donation-partner

BWS-World Flight Calculator @climate-calculator--bws-world