<!-- Default -->
<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-2338-content" id="accordion-item-2338-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-2338-content" aria-labelledby="accordion-item-2338-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-b4a7-content" id="accordion-item-b4a7-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-b4a7-content" aria-labelledby="accordion-item-b4a7-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-9dbc-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-9dbc-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-8a2b-content" id="accordion-item-8a2b-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-8a2b-content" aria-labelledby="accordion-item-8a2b-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>

{
  "items": [
    {
      "title": "Text und Listen",
      "sections": [
        {
          "content": "span.text.text--small\n  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.\n\n  ul\n    li 2016 Vorsitzender der consetetur sadipscing elit\n    li 2015 Geschäftsführender Direktor des consetetur sadipscing elit\n    li 2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing\n    li 2009 Dozententätigkeit für consetetur sadipscing elit\n    li 2007 Forschungsaufenthalt an der consetetur sadipscing elit\n\n  ol\n    li Vorsitzender der consetetur sadipscing elit\n    li Geschäftsführender Direktor des consetetur sadipscing elit\n    li Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing\n    li Dozententätigkeit für consetetur sadipscing elit\n    li Forschungsaufenthalt an der consetetur sadipscing elit\n"
        }
      ]
    },
    {
      "title": "Downloads",
      "sections": [
        {
          "content": "+include('@material')\n"
        },
        {
          "content": "+include('@material')\n"
        },
        {
          "content": "+include('@material--intern')\n"
        }
      ]
    },
    {
      "title": "Ansprechpartner",
      "sections": [
        {
          "content": "+include('@list-item-person')\n"
        },
        {
          "content": "+include('@list-item-person')\n"
        }
      ]
    }
  ]
}

<!-- Glossar -->
<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-45c3-content" id="accordion-item-45c3-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">Akademisches Viertel</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-45c3-content" aria-labelledby="accordion-item-45c3-headline">
        <div class="accordion__list">
          <div class="accordion__list-item"><span class="text text--small"><p>Veranstaltungen an der Uni beginnen meist nicht zur vollen Stunde, sondern 15 Minuten später. Damit bleibt genügend Zeit, den Raum zu wechseln. Die Zeitangabe für den Beginn der Lehrveranstaltung wird dann mit"c.t." (= cum tempore) ergänzt.</p></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-607d-content" id="accordion-item-607d-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">Alumni</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-607d-content" aria-labelledby="accordion-item-607d-headline">
        <div class="accordion__list">
          <div class="accordion__list-item"><span class="text text--small"><p>„Alumni“ ist der Plural des lateinischen Wortes „alumnus“ – das bedeutet „Schüler“ oder „Zögling eines Internates“. Allgemein werden damit ehemalige Studierende, Lehrende, Forschende und Mitarbeiter einer Hochschule bezeichnet. Das Netzwerk der Ehemaligen der Martin-Luther-Universität Halle-Wittenberg, die ‚Alumni Halenses’ findest du unter alumni.uni-halle.de.</p></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-6ea1-content" id="accordion-item-6ea1-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">An-Institut</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-6ea1-content" aria-labelledby="accordion-item-6ea1-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 tempor invidunt 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 Lorem ipsum dolor sit amet.</p></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-7c13-content" id="accordion-item-7c13-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">Approbation</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-7c13-content" aria-labelledby="accordion-item-7c13-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 tempor invidunt 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 Lorem ipsum dolor sit amet.</p></span></div>
        </div>
      </div>
    </article>
  </div>
</section>

{
  "items": [
    {
      "title": "Akademisches Viertel",
      "sections": [
        {
          "content": "span.text.text--small\n  p Veranstaltungen an der Uni beginnen meist nicht zur vollen Stunde, sondern 15 Minuten später. Damit bleibt genügend Zeit, den Raum zu wechseln. Die Zeitangabe für den Beginn der Lehrveranstaltung wird dann mit\"c.t.\" (= cum tempore) ergänzt.\n"
        }
      ]
    },
    {
      "title": "Alumni",
      "sections": [
        {
          "content": "span.text.text--small\n  p „Alumni“ ist der Plural des lateinischen Wortes „alumnus“ – das bedeutet „Schüler“ oder „Zögling eines Internates“. Allgemein werden damit ehemalige Studierende, Lehrende, Forschende und Mitarbeiter einer Hochschule bezeichnet. Das Netzwerk der Ehemaligen der Martin-Luther-Universität Halle-Wittenberg, die ‚Alumni Halenses’ findest du unter alumni.uni-halle.de.\n"
        }
      ]
    },
    {
      "title": "An-Institut",
      "sections": [
        {
          "content": "span.text.text--small\n  p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 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 Lorem ipsum dolor sit amet.\n"
        }
      ]
    },
    {
      "title": "Approbation",
      "sections": [
        {
          "content": "span.text.text--small\n  p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 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 Lorem ipsum dolor sit amet.\n"
        }
      ]
    }
  ]
}

<!-- Publication -->
<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-98fb-content" id="accordion-item-98fb-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">Zeitschriften</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-98fb-content" aria-labelledby="accordion-item-98fb-headline">
        <div class="accordion__list">
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Films that Work. Industrial Film and the Productivity of Media.</i>
                    <br> New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Films that Work. Industrial Film and the Productivity of Media.</i>
                    <br> New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </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-4e91-content" id="accordion-item-4e91-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">Aufsätze</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-4e91-content" aria-labelledby="accordion-item-4e91-headline">
        <div class="accordion__list">
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Films that Work. Industrial Film and the Productivity of Media.</i>
                    <br> New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </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-d8cf-content" id="accordion-item-d8cf-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">Bücher</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-d8cf-content" aria-labelledby="accordion-item-d8cf-headline">
        <div class="accordion__list">
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Films that Work. Industrial Film and the Productivity of Media.</i>
                    <br> New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </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-ff0b-content" id="accordion-item-ff0b-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">Sammelwerke</span></button>
      </h3>
      <div class="accordion__content" id="accordion-item-ff0b-content" aria-labelledby="accordion-item-ff0b-headline">
        <div class="accordion__list">
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Films that Work. Industrial Film and the Productivity of Media.</i>
                    <br> New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).</p>
                </div>
              </div>
            </article>
          </div>
          <div class="accordion__list-item">
            <article class="material">
              <div class="material__content">
                <div class="material__description">
                  <p>
                    <i>Advertising and the Transformation of Screen Cultures.</i>
                    <br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>

{
  "items": [
    {
      "title": "Zeitschriften",
      "sections": [
        {
          "content": "+include('@material--minimal')\n"
        },
        {
          "content": "+include('@material--minimal2')\n"
        },
        {
          "content": "+include('@material--minimal')\n"
        },
        {
          "content": "+include('@material--minimal2')\n"
        },
        {
          "content": "+include('@material--minimal')\n"
        }
      ]
    },
    {
      "title": "Aufsätze",
      "sections": [
        {
          "content": "+include('@material--minimal')\n"
        },
        {
          "content": "+include('@material--minimal2')\n"
        },
        {
          "content": "+include('@material--minimal')\n"
        }
      ]
    },
    {
      "title": "Bücher",
      "sections": [
        {
          "content": "+include('@material--minimal')\n"
        },
        {
          "content": "+include('@material--minimal2')\n"
        },
        {
          "content": "+include('@material--minimal')\n"
        }
      ]
    },
    {
      "title": "Sammelwerke",
      "sections": [
        {
          "content": "+include('@material--minimal')\n"
        },
        {
          "content": "+include('@material--minimal2')\n"
        },
        {
          "content": "+include('@material--minimal')\n"
        }
      ]
    }
  ]
}