<!-- Weißer Hintergrund -->
<section class="container container--50-50-breakin container--link-list">
  <div class="container__inner-wrap">
    <div class="container__inner">
      <header class="container__headline">
        <h2 class="headline headline--small">Link-Liste</h2>
      </header>
      <div class="container__content">
        <section class="accordion">
          <div class="accordion__items" role="presentation">
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-8f99-content" id="accordion-item-8f99-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Text und Listen</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-8f99-content" aria-labelledby="accordion-item-8f99-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item"><span class="text text--small"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p><ul><li>2016 Vorsitzender der consetetur sadipscing elit</li><li>2015 Geschäftsführender Direktor des consetetur sadipscing elit</li><li>2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>2009 Dozententätigkeit für consetetur sadipscing elit</li><li>2007 Forschungsaufenthalt an der consetetur sadipscing elit</li></ul><ol><li>Vorsitzender der consetetur sadipscing elit</li><li>Geschäftsführender Direktor des consetetur sadipscing elit</li><li>Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>Dozententätigkeit für consetetur sadipscing elit</li><li>Forschungsaufenthalt an der consetetur sadipscing elit</li></ol></span></div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-7328-content" id="accordion-item-7328-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Downloads</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-7328-content" aria-labelledby="accordion-item-7328-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__thumbnail">
                        <figure class="figure js-figure" aria-labelledby="figure-2a9f-label">
                          <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
                            <div class="image loading" style="padding-top: 144.44444444444443%;">
                              <noscript>
                                <img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
                                  width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
                                width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
                              </span>
                            </div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-plus"></use>
</svg></span></span>
                          </a>
                          <figcaption class="figure__caption" id="figure-2a9f-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
                        </figure>
                      </div>
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-05d6-content" id="accordion-item-05d6-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Ansprechpartner</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-05d6-content" aria-labelledby="accordion-item-05d6-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </section>
      </div>
      <div class="container__content">
        <section class="accordion">
          <div class="accordion__items" role="presentation">
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-2994-content" id="accordion-item-2994-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Text und Listen</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-2994-content" aria-labelledby="accordion-item-2994-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item"><span class="text text--small"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p><ul><li>2016 Vorsitzender der consetetur sadipscing elit</li><li>2015 Geschäftsführender Direktor des consetetur sadipscing elit</li><li>2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>2009 Dozententätigkeit für consetetur sadipscing elit</li><li>2007 Forschungsaufenthalt an der consetetur sadipscing elit</li></ul><ol><li>Vorsitzender der consetetur sadipscing elit</li><li>Geschäftsführender Direktor des consetetur sadipscing elit</li><li>Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>Dozententätigkeit für consetetur sadipscing elit</li><li>Forschungsaufenthalt an der consetetur sadipscing elit</li></ol></span></div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-a8fc-content" id="accordion-item-a8fc-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Downloads</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-a8fc-content" aria-labelledby="accordion-item-a8fc-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__thumbnail">
                        <figure class="figure js-figure" aria-labelledby="figure-1ac7-label">
                          <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
                            <div class="image loading" style="padding-top: 144.44444444444443%;">
                              <noscript>
                                <img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
                                  width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
                                width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
                              </span>
                            </div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-plus"></use>
</svg></span></span>
                          </a>
                          <figcaption class="figure__caption" id="figure-1ac7-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
                        </figure>
                      </div>
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-deed-content" id="accordion-item-deed-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Ansprechpartner</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-deed-content" aria-labelledby="accordion-item-deed-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>

{
  "headline": {
    "text": "Link-Liste"
  },
  "info": {
    "label": "Info",
    "labelId": "notice-label",
    "text": "p Einschreibungen für Exkursionen und Geländepraktika 2017 finden vom 09.01.2017 (7 Uhr) bis 16.01.2017 (23.59) Uhr via Stud.IP statt.\np Ausgenommen: Exkursion EXK1-015\n"
  },
  "links": {
    "links": [
      {
        "internal": true,
        "link": "http://interner-link.com/",
        "text": "Interner Link",
        "info": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"
      },
      {
        "internal": true,
        "link": "http://interner-link.com/",
        "text": "Interner Link",
        "info": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
      },
      {
        "external": true,
        "link": "http://theoldpurple.com/",
        "text": "Externer Link",
        "info": "Lorem ipsum dolor sit amet diam"
      },
      {
        "download": "download.pdf",
        "link": "/images/dummy-downloads/dummy.pdf",
        "text": "Download",
        "file": "pdf",
        "size": "12KB",
        "access": "barrierefrei"
      },
      {
        "download": "download.pdf",
        "link": "/images/dummy-downloads/dummy.pdf",
        "text": "Dateiname",
        "file": "pdf",
        "size": "12KB",
        "access": "barrierefrei"
      }
    ]
  }
}

<!-- Grauer Hintergrund -->
<section class="container container--50-50-breakin container--link-list">
  <div class="container__inner-wrap t-gray">
    <div class="container__inner">
      <header class="container__headline">
        <h2 class="headline headline--small">Link-Liste</h2>
      </header>
      <div class="container__content">
        <section class="accordion">
          <div class="accordion__items" role="presentation">
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-eca7-content" id="accordion-item-eca7-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Text und Listen</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-eca7-content" aria-labelledby="accordion-item-eca7-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item"><span class="text text--small"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p><ul><li>2016 Vorsitzender der consetetur sadipscing elit</li><li>2015 Geschäftsführender Direktor des consetetur sadipscing elit</li><li>2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>2009 Dozententätigkeit für consetetur sadipscing elit</li><li>2007 Forschungsaufenthalt an der consetetur sadipscing elit</li></ul><ol><li>Vorsitzender der consetetur sadipscing elit</li><li>Geschäftsführender Direktor des consetetur sadipscing elit</li><li>Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>Dozententätigkeit für consetetur sadipscing elit</li><li>Forschungsaufenthalt an der consetetur sadipscing elit</li></ol></span></div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-f1f3-content" id="accordion-item-f1f3-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Downloads</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-f1f3-content" aria-labelledby="accordion-item-f1f3-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__thumbnail">
                        <figure class="figure js-figure" aria-labelledby="figure-9196-label">
                          <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
                            <div class="image loading" style="padding-top: 144.44444444444443%;">
                              <noscript>
                                <img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
                                  width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
                                width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
                              </span>
                            </div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-plus"></use>
</svg></span></span>
                          </a>
                          <figcaption class="figure__caption" id="figure-9196-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
                        </figure>
                      </div>
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-5a5f-content" id="accordion-item-5a5f-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Ansprechpartner</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-5a5f-content" aria-labelledby="accordion-item-5a5f-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </section>
      </div>
      <div class="container__content">
        <section class="accordion">
          <div class="accordion__items" role="presentation">
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-c948-content" id="accordion-item-c948-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Text und Listen</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-c948-content" aria-labelledby="accordion-item-c948-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item"><span class="text text--small"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p><ul><li>2016 Vorsitzender der consetetur sadipscing elit</li><li>2015 Geschäftsführender Direktor des consetetur sadipscing elit</li><li>2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>2009 Dozententätigkeit für consetetur sadipscing elit</li><li>2007 Forschungsaufenthalt an der consetetur sadipscing elit</li></ul><ol><li>Vorsitzender der consetetur sadipscing elit</li><li>Geschäftsführender Direktor des consetetur sadipscing elit</li><li>Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>Dozententätigkeit für consetetur sadipscing elit</li><li>Forschungsaufenthalt an der consetetur sadipscing elit</li></ol></span></div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-d683-content" id="accordion-item-d683-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Downloads</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-d683-content" aria-labelledby="accordion-item-d683-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="material">
                      <div class="material__thumbnail">
                        <figure class="figure js-figure" aria-labelledby="figure-3639-label">
                          <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
                            <div class="image loading" style="padding-top: 144.44444444444443%;">
                              <noscript>
                                <img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
                                  width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
                                width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
                              </span>
                            </div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-plus"></use>
</svg></span></span>
                          </a>
                          <figcaption class="figure__caption" id="figure-3639-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
                        </figure>
                      </div>
                      <div class="material__content">
                        <div class="material__headline">
                          <h3 class="headline headline--7">Name des Flyers</h3>
                        </div>
                        <div class="material__description">
                          <p>Kurzerklärung 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>
                        <a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-414b-content" id="accordion-item-414b-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Ansprechpartner</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-414b-content" aria-labelledby="accordion-item-414b-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                  <div class="accordion__list-item">
                    <article class="list-item list-item--person">
                      <div class="list-item__info">
                        <div class="avatar">
                          <div class="avatar__image">
                            <div class="image loading" style="padding-top: 100%;">
                              <noscript>
                                <img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
                              </noscript>
                              <img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-item__content">
                        <div class="list-item__headline">
                          <h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
                        </div>
                        <ul class="list-item__list">
                          <li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
                          <li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-mail"></use>
                              </svg>franz.schuenzel@itz.uni-halle.de</a>
                          </li>
                          <li class="list-item__list-item">
                            <a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
                              <svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-archive"></use>
                              </svg>OTRS-Tickets</a>
                          </li>
                        </ul>
                      </div>
                      <a class="list-item__overlay-link" href="#">
                        <svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
                          <use xlink:href="#icon-angle-right"></use>
                        </svg><span class="u-hidden-visually">Zur Person</span></a>
                    </article>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>

{
  "headline": {
    "text": "Link-Liste"
  },
  "info": {
    "label": "Info",
    "labelId": "notice-label",
    "text": "p Einschreibungen für Exkursionen und Geländepraktika 2017 finden vom 09.01.2017 (7 Uhr) bis 16.01.2017 (23.59) Uhr via Stud.IP statt.\np Ausgenommen: Exkursion EXK1-015\n"
  },
  "links": {
    "links": [
      {
        "internal": true,
        "link": "http://interner-link.com/",
        "text": "Interner Link",
        "info": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"
      },
      {
        "internal": true,
        "link": "http://interner-link.com/",
        "text": "Interner Link",
        "info": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
      },
      {
        "external": true,
        "link": "http://theoldpurple.com/",
        "text": "Externer Link",
        "info": "Lorem ipsum dolor sit amet diam"
      },
      {
        "download": "download.pdf",
        "link": "/images/dummy-downloads/dummy.pdf",
        "text": "Download",
        "file": "pdf",
        "size": "12KB",
        "access": "barrierefrei"
      },
      {
        "download": "download.pdf",
        "link": "/images/dummy-downloads/dummy.pdf",
        "text": "Dateiname",
        "file": "pdf",
        "size": "12KB",
        "access": "barrierefrei"
      }
    ]
  },
  "theme": "gray"
}