<!-- Accordion -->
<section class="container container--full container--accordion">
  <div class="container__inner-wrap">
    <div class="container__inner">
      <header class="container__headline">
        <h2 class="headline headline--small">Publikationen</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-3ab5-content" id="accordion-item-3ab5-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-3ab5-content" aria-labelledby="accordion-item-3ab5-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-c261-content" id="accordion-item-c261-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-c261-content" aria-labelledby="accordion-item-c261-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-2202-content" id="accordion-item-2202-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-2202-content" aria-labelledby="accordion-item-2202-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-5041-content" id="accordion-item-5041-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-5041-content" aria-labelledby="accordion-item-5041-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>
      </div>
    </div>
  </div>
</section>

{
  "headline": {
    "text": "Publikationen"
  },
  "accordion": {
    "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"
          }
        ]
      }
    ]
  }
}