Overlay-Fifty-Fifty @overlay-fifty-fifty

In Development
<div class="overlay-fifty-fifty js-slideshow">
  <article class="overlay-fifty-fifty__panel" id="overlay-teaser-1-content" aria-labelledby="overlay-teaser-1-title">
    <div class="overlay-fifty-fifty__content" tabindex="-1">
      <div class="overlay-fifty-fifty__content-inner">
        <div class="overlay-fifty-fifty__content-block">
          <figure class="figure overlay-fifty-fifty__block overlay-fifty-fifty__image" aria-labelledby="figure-3a53-label">
            <div class="figure__media" data-gallery="lightbox-bdae">
              <div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
            </div>
            <figcaption class="figure__caption" id="figure-3a53-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
          </figure>
        </div><button class="icon-button icon-button--secondary overlay-fifty-fifty__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-8e58-title">
            <title id="icon-8e58-title">Fenster schließen</title>
            <use xlink:href="#icon-close"></use>
          </svg></button>
        <div class="overlay-fifty-fifty__content-block">
          <div class="overlay-fifty-fifty__block">
            <h2 class="headline headline--3">Headline 3</h2>
          </div>
          <div class="overlay-fifty-fifty__block">
            <div class="afp-inventor-detail afp-inventor-detail--default afp-inventor-detail--overlay">
              <div class="afp-inventor-detail__inner">
                <div class="afp-inventor-detail__inner-content-wrapper">
                  <div class="afp-inventor-detail__inner-content">
                    <div class="afp-inventor-detail__description-wrapper">
                      <dl class="afp-inventor-detail__description-list">
                        <div class="afp-inventor-detail__description-item">
                          <dt class="afp-inventor-detail__description-term">Preis</dt>
                          <dd class="afp-inventor-detail__description-details">2ter Preis (2021)</dd>
                        </div>
                        <div class="afp-inventor-detail__description-item">
                          <dt class="afp-inventor-detail__description-term">Kategorie</dt>
                          <dd class="afp-inventor-detail__description-details">Schüler</dd>
                        </div>
                        <div class="afp-inventor-detail__description-item">
                          <dt class="afp-inventor-detail__description-term">Erfunden von</dt>
                          <dd class="afp-inventor-detail__description-details">Sophia Lindner</dd>
                        </div>
                        <div class="afp-inventor-detail__description-item">
                          <dt class="afp-inventor-detail__description-term">Themen</dt>
                          <dd class="afp-inventor-detail__description-details">#mode</dd>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="overlay-fifty-fifty__block">
            <div class="text">
              <p><b>Beschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
          </div>
          <div class="overlay-fifty-fifty__block"><a class="cta-link cta-link--right" href="/innovation"><span class="cta-link__text">Zur Detailseite</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
        </div>
        <div class="overlay-fifty-fifty__slider-buttons">
          <div class="overlay-fifty-fifty__slider-buttons-description">Mehr Innovationen</div><button class="icon-button overlay-fifty-fifty__slider-button-left" type="button"><svg class="icon icon--arrow-left icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-905d-title">
              <title id="icon-905d-title">List</title>
              <use xlink:href="#icon-arrow-left"></use>
            </svg></button><button class="icon-button overlay-fifty-fifty__slider-button-right" type="button"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d8f7-title">
              <title id="icon-d8f7-title">List</title>
              <use xlink:href="#icon-arrow-right"></use>
            </svg></button>
        </div>
      </div>
    </div>
  </article>
</div>