<div class="overview-teaser">
  <div class="overview-teaser__image">
    <div class="image loading" style="padding-top: 55.55555555555556%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="800" src="https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800" width="1440" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800" width="1440" height="800" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
  </div>
  <div class="overview-teaser__content">
    <div class="overview-teaser__title">
      <h2 class="headline headline--1"><span>Wir stiften innovative Forschung</span> Indem wir die Entwicklung neuer Produktions-techniken fördern</h2>
    </div>
    <div class="overview-teaser__button"><button class="icon-button" type="button"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-645e-title">
          <title id="icon-645e-title">List</title>
          <use xlink:href="#icon-list"></use>
        </svg></button></div>
    <div class="overview-teaser__share">
      <div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-share"></use>
          </svg><span class="share__text">Teilen</span></button>
        <div class="share__tooltip" aria-hidden="true">
          <ul class="share__list">
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
                  <use xlink:href="#icon-facebook"></use>
                </svg><span class="share__label">Facebook</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
                  <use xlink:href="#icon-x"></use>
                </svg><span class="share__label">X</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
                  <use xlink:href="#icon-xing"></use>
                </svg><span class="share__label">Xing</span></a></li>
            <li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
                  <use xlink:href="#icon-mail-fill"></use>
                </svg><span class="share__label">E-Mail</span></a></li>
            <li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &amp;#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
                  <use xlink:href="#icon-copy"></use>
                </svg><span class="share__label">Link kopieren</span></button></li>
          </ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
              <use xlink:href="#icon-close"></use>
            </svg></button>
          <div class="share__arrow"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{
  "title": "#[span Wir stiften innovative Forschung] Indem wir die Entwicklung neuer Produktions-techniken fördern\n",
  "share": true,
  "iconButton": true,
  "image": {
    "src": "https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800",
    "height": 800,
    "width": 1440
  }
}

<div class="overview-teaser overview-teaser--left">
  <div class="overview-teaser__image">
    <div class="image loading" style="padding-top: 55.55555555555556%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="800" src="https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800" width="1440" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800" width="1440" height="800" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
  </div>
  <div class="overview-teaser__content">
    <div class="overview-teaser__title">
      <h2 class="headline headline--1"><span>Wir stiften innovative Forschung</span> Indem wir die Entwicklung neuer Produktions-techniken fördern</h2>
    </div>
    <div class="overview-teaser__button"><button class="icon-button" type="button"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ffe2-title">
          <title id="icon-ffe2-title">List</title>
          <use xlink:href="#icon-list"></use>
        </svg></button></div>
    <div class="overview-teaser__share">
      <div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-share"></use>
          </svg><span class="share__text">Teilen</span></button>
        <div class="share__tooltip" aria-hidden="true">
          <ul class="share__list">
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
                  <use xlink:href="#icon-facebook"></use>
                </svg><span class="share__label">Facebook</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
                  <use xlink:href="#icon-x"></use>
                </svg><span class="share__label">X</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
                  <use xlink:href="#icon-xing"></use>
                </svg><span class="share__label">Xing</span></a></li>
            <li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
                  <use xlink:href="#icon-mail-fill"></use>
                </svg><span class="share__label">E-Mail</span></a></li>
            <li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &amp;#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
                  <use xlink:href="#icon-copy"></use>
                </svg><span class="share__label">Link kopieren</span></button></li>
          </ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
              <use xlink:href="#icon-close"></use>
            </svg></button>
          <div class="share__arrow"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{
  "title": "#[span Wir stiften innovative Forschung] Indem wir die Entwicklung neuer Produktions-techniken fördern\n",
  "share": true,
  "iconButton": true,
  "image": {
    "src": "https://bildermangel.de/1440x800/6E7180/8E919B.png?text=1440x800",
    "height": 800,
    "width": 1440
  },
  "left": true
}

<div class="overview-teaser overview-teaser--centered overview-teaser--transparent t-dark">
  <div class="overview-teaser__image">
    <div class="image loading" style="padding-top: 41.66666666666667%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="600" src="https://bildermangel.de/1440x600/6E7180/8E919B.png?text=1440x600" width="1440" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1440x600/6E7180/8E919B.png?text=1440x600" width="1440" height="600" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
  </div>
  <div class="overview-teaser__content">
    <div class="overview-teaser__title">
      <h2 class="headline headline--1">Gemeinsam klimaneutral werden.</h2>
    </div>
    <div class="overview-teaser__text">
      <div class="text">
        <p>Einfach Verbrauch ausrechnen, passendes Klimaschutz-Projekt auswählen und CO2 kompensieren.</p>
      </div>
    </div>
    <div class="overview-teaser__button"><a class="button button--primary" href="#"><span class="button__text">Berechnen und spenden</span></a></div>
  </div>
</div>

{
  "title": "Gemeinsam klimaneutral werden.\n",
  "share": null,
  "iconButton": null,
  "image": {
    "src": "https://bildermangel.de/1440x600/6E7180/8E919B.png?text=1440x600",
    "height": 600,
    "width": 1440
  },
  "centered": true,
  "dark": true,
  "transparent": true,
  "button": {
    "text": "Berechnen und spenden"
  },
  "text": {
    "content": "p Einfach Verbrauch ausrechnen, passendes Klimaschutz-Projekt auswählen und CO2 kompensieren.\n"
  }
}