Mission-Card-Slider @mission-card-slider

Design
<div class="mission-card-slider">
  <div class="mission-card-slider__inner">
    <div class="mission-card-slider__frame">
      <div class="mission-card-slider__items">
        <div class="mission-card-slider__item">
          <div class="mission-card">
            <div class="mission-card__content">
              <h2 class="headline headline--1 mission-card__headline">Wir stiften innovative Forschung</h2>
              <div class="mission-card__details">
                <div class="mission-card__icon-button">
                  <div class="quickinfo">
                    <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-d9e7-content" id="id-d9e7-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-eb21-title">
                          <title id="icon-eb21-title">Schnellinfo zeigen</title>
                          <use xlink:href="#icon-list"></use>
                        </svg></button></div>
                    <article class="quickinfo__panel" id="id-d9e7-content" aria-labelledby="id-d9e7-title">
                      <div class="quickinfo__content" tabindex="-1">
                        <div class="quickinfo__content-inner">
                          <div class="quickinfo__block" id="block-id-8ab3">
                            <h2 class="headline headline--3">Headline 3</h2>
                          </div>
                          <div class="quickinfo__block" id="block-id-4656">
                            <div class="text">
                              <p><b>Kurzbeschreibung</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="quickinfo__block" id="block-id-6c9c">
                            <div class="jumpbox jumpbox--condensed">
                              <div class="jumpbox__text">
                                <div class="text">
                                  <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-4953">
                            <div class="link-list">
                              <ul class="link-list__list">
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-b02c"><a class="button button--primary" href="#"><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">Button</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-c7e4-title">
                              <title id="icon-c7e4-title">Schnellinfo schließen</title>
                              <use xlink:href="#icon-close"></use>
                            </svg></button>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mission-card-slider__item">
          <div class="mission-card">
            <div class="mission-card__content">
              <h2 class="headline headline--1 mission-card__headline">Wir stiften eine starke Gemeinschaft</h2>
              <div class="mission-card__details">
                <div class="mission-card__icon-button">
                  <div class="quickinfo">
                    <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-9f93-content" id="id-9f93-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-b4a9-title">
                          <title id="icon-b4a9-title">Schnellinfo zeigen</title>
                          <use xlink:href="#icon-list"></use>
                        </svg></button></div>
                    <article class="quickinfo__panel" id="id-9f93-content" aria-labelledby="id-9f93-title">
                      <div class="quickinfo__content" tabindex="-1">
                        <div class="quickinfo__content-inner">
                          <div class="quickinfo__block" id="block-id-dff4">
                            <h2 class="headline headline--3">Headline 3</h2>
                          </div>
                          <div class="quickinfo__block" id="block-id-040a">
                            <div class="text">
                              <p><b>Kurzbeschreibung</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="quickinfo__block" id="block-id-aa7d">
                            <div class="jumpbox jumpbox--condensed">
                              <div class="jumpbox__text">
                                <div class="text">
                                  <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-5ff3">
                            <div class="link-list">
                              <ul class="link-list__list">
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-1ae5"><a class="button button--primary" href="#"><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">Button</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-8452-title">
                              <title id="icon-8452-title">Schnellinfo schließen</title>
                              <use xlink:href="#icon-close"></use>
                            </svg></button>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mission-card-slider__item">
          <div class="mission-card">
            <div class="mission-card__content">
              <h2 class="headline headline--1 mission-card__headline">Wir stiften bessere Bildung</h2>
              <div class="mission-card__details">
                <div class="mission-card__icon-button">
                  <div class="quickinfo">
                    <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-28c6-content" id="id-28c6-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d93f-title">
                          <title id="icon-d93f-title">Schnellinfo zeigen</title>
                          <use xlink:href="#icon-list"></use>
                        </svg></button></div>
                    <article class="quickinfo__panel" id="id-28c6-content" aria-labelledby="id-28c6-title">
                      <div class="quickinfo__content" tabindex="-1">
                        <div class="quickinfo__content-inner">
                          <div class="quickinfo__block" id="block-id-9d51">
                            <h2 class="headline headline--3">Headline 3</h2>
                          </div>
                          <div class="quickinfo__block" id="block-id-6186">
                            <div class="text">
                              <p><b>Kurzbeschreibung</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="quickinfo__block" id="block-id-1cfc">
                            <div class="jumpbox jumpbox--condensed">
                              <div class="jumpbox__text">
                                <div class="text">
                                  <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-eb1b">
                            <div class="link-list">
                              <ul class="link-list__list">
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-23cf"><a class="button button--primary" href="#"><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">Button</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-cc03-title">
                              <title id="icon-cc03-title">Schnellinfo schließen</title>
                              <use xlink:href="#icon-close"></use>
                            </svg></button>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mission-card-slider__item">
          <div class="mission-card">
            <div class="mission-card__content">
              <h2 class="headline headline--1 mission-card__headline">Wir stiften innovative Forschung</h2>
              <div class="mission-card__details">
                <div class="mission-card__icon-button">
                  <div class="quickinfo">
                    <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-3eb8-content" id="id-3eb8-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e698-title">
                          <title id="icon-e698-title">Schnellinfo zeigen</title>
                          <use xlink:href="#icon-list"></use>
                        </svg></button></div>
                    <article class="quickinfo__panel" id="id-3eb8-content" aria-labelledby="id-3eb8-title">
                      <div class="quickinfo__content" tabindex="-1">
                        <div class="quickinfo__content-inner">
                          <div class="quickinfo__block" id="block-id-69ae">
                            <h2 class="headline headline--3">Headline 3</h2>
                          </div>
                          <div class="quickinfo__block" id="block-id-c846">
                            <div class="text">
                              <p><b>Kurzbeschreibung</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="quickinfo__block" id="block-id-850b">
                            <div class="jumpbox jumpbox--condensed">
                              <div class="jumpbox__text">
                                <div class="text">
                                  <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-5cc5">
                            <div class="link-list">
                              <ul class="link-list__list">
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-88af"><a class="button button--primary" href="#"><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">Button</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-b9db-title">
                              <title id="icon-b9db-title">Schnellinfo schließen</title>
                              <use xlink:href="#icon-close"></use>
                            </svg></button>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mission-card-slider__item">
          <div class="mission-card">
            <div class="mission-card__content">
              <h2 class="headline headline--1 mission-card__headline">Wir stiften eine starke Gemeinschaft</h2>
              <div class="mission-card__details">
                <div class="mission-card__icon-button">
                  <div class="quickinfo">
                    <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-5d1f-content" id="id-5d1f-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7486-title">
                          <title id="icon-7486-title">Schnellinfo zeigen</title>
                          <use xlink:href="#icon-list"></use>
                        </svg></button></div>
                    <article class="quickinfo__panel" id="id-5d1f-content" aria-labelledby="id-5d1f-title">
                      <div class="quickinfo__content" tabindex="-1">
                        <div class="quickinfo__content-inner">
                          <div class="quickinfo__block" id="block-id-3d28">
                            <h2 class="headline headline--3">Headline 3</h2>
                          </div>
                          <div class="quickinfo__block" id="block-id-280f">
                            <div class="text">
                              <p><b>Kurzbeschreibung</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="quickinfo__block" id="block-id-bbf6">
                            <div class="jumpbox jumpbox--condensed">
                              <div class="jumpbox__text">
                                <div class="text">
                                  <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-b66f">
                            <div class="link-list">
                              <ul class="link-list__list">
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                                <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="quickinfo__block" id="block-id-4105"><a class="button button--primary" href="#"><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">Button</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-51b3-title">
                              <title id="icon-51b3-title">Schnellinfo schließen</title>
                              <use xlink:href="#icon-close"></use>
                            </svg></button>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mission-card-slider__controls slider__controls"></div>
  </div>
</div>