<!-- Personen zweispaltig -->
<section class="container container--full container--persons">
  <div class="container__inner-wrap">
    <div class="container__inner">
      <header class="container__headline">
        <h2 class="headline headline--small">Ansprechpartner</h2>
      </header>
      <div class="container__content">
        <div class="list-content list-content--columns">
          <div class="list-content__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="list-content__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="list-content__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="list-content__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>
      <footer class="container__button-list">
        <div class="container__button-item">
          <a class="button button--secondary" href="#"><span class="button__text">mehr Personen</span></a>
        </div>
      </footer>
    </div>
  </div>
</section>

{
  "headline": {
    "text": "Ansprechpartner"
  },
  "two_columns": true,
  "buttons": [
    {
      "link": "#",
      "text": "mehr Personen",
      "style": "secondary"
    }
  ]
}