<header class="header headroom header--slide-down">
  <div class="header__inner">
    <div class="header__logo-wrap">
      <div class="header__logo"><a class="logo" href="#"><img class="logo__image logo__image--light" src="/images/mud/logo-mud.svg" width="174" height="80" alt="Logo Mobbing &amp; Du" /><img class="logo__image" src="/images/mud/logo-mud.svg" width="174" height="80" alt="Logo Mobbing &amp; Du" /></a></div>
    </div><button class="header__mobile-menu-trigger" type="button" aria-controls="header-navigation" aria-label="Menü Öffnen"><span></span></button>
    <div class="header__navigation" id="header-navigation">
      <div class="header__navigation-inner header__navigation--level-1">
        <div class="header__button"><a class="button button--primary" href="#"><span class="button__text">Moodle</span></a></div>
        <div class="header__navigation-levels">
          <!-- LEVEL 1-->
          <ul class="header__navigation-items header__navigation-level-1-ul">
            <li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-9ea6" aria-controls="menu-a167" aria-expanded="false" aria-haspopup="true" type="button">Programm<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-f736-title">
                  <title id="icon-f736-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-a167">
                <div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-2-back" href="javascript:;" data-level="2"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-001b-title">
                      <title id="icon-001b-title">arrow-left</title>
                      <use xlink:href="#icon-arrow-left"></use>
                    </svg></a></div>
                <div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><button class="header__navigation-submenu-overview-link" type="button"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Programm</span></button></div>
                <ul class="header__navigation-items header__navigation-level-2-ul">
                  <!-- LEVEL 2-->
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Wer wir sind<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-29f8-title">
                        <title id="icon-29f8-title">chevron-down</title>
                        <use xlink:href="#icon-chevron-down"></use>
                      </svg></a><!-- default style-->
                    <div class="header__navigation-submenu header__navigation-level-3">
                      <div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-2ef3-title">
                            <title id="icon-2ef3-title">arrow-left</title>
                            <use xlink:href="#icon-arrow-left"></use>
                          </svg></a></div>
                      <div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Wer wir sind</span></a></div>
                      <ul class="header__navigation-items header__navigation-level-3-ul">
                        <!-- level 3-->
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Programmpartner</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Ansprechpersonen</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Zur Website der Baden-Württemberg Stiftung</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Wie wir arbeiten</a><!-- default style-->
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Wissenschaftliche evaluation</a><!-- default style-->
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Warum Mobbing&amp;Du?</a><!-- default style-->
                  </li>
                </ul>
              </div>
            </li>
            <li class="header__navigation-item header__navigation-level-1-li" data-level="1"><button class="header__navigation-link header__navigation-move" id="navigation-007c" aria-controls="menu-8594" aria-expanded="false" aria-haspopup="true" type="button">Angebote<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-21f9-title">
                  <title id="icon-21f9-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></button>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-8594">
                <div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-2-back" href="javascript:;" data-level="2"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-07ac-title">
                      <title id="icon-07ac-title">arrow-left</title>
                      <use xlink:href="#icon-arrow-left"></use>
                    </svg></a></div>
                <div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><button class="header__navigation-submenu-overview-link" type="button"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Angebote</span></button></div>
                <ul class="header__navigation-items header__navigation-level-2-ul">
                  <!-- LEVEL 2-->
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Für Grundschulen<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-654c-title">
                        <title id="icon-654c-title">chevron-down</title>
                        <use xlink:href="#icon-chevron-down"></use>
                      </svg></a><!-- default style-->
                    <div class="header__navigation-submenu header__navigation-level-3">
                      <div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-b12b-title">
                            <title id="icon-b12b-title">arrow-left</title>
                            <use xlink:href="#icon-arrow-left"></use>
                          </svg></a></div>
                      <div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Für Grundschulen</span></a></div>
                      <ul class="header__navigation-items header__navigation-level-3-ul">
                        <!-- level 3-->
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Bausteine des Programms für Grundschulen</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Einblick in das Material für Grundschulen</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link header__navigation-move" href="#">Für weiterführende Schulen<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-31c3-title">
                        <title id="icon-31c3-title">chevron-down</title>
                        <use xlink:href="#icon-chevron-down"></use>
                      </svg></a><!-- default style-->
                    <div class="header__navigation-submenu header__navigation-level-3">
                      <div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-3-back" href="javascript:;" data-level="3"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-0e6b-title">
                            <title id="icon-0e6b-title">arrow-left</title>
                            <use xlink:href="#icon-arrow-left"></use>
                          </svg></a></div>
                      <div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Für weiterführende Schulen</span></a></div>
                      <ul class="header__navigation-items header__navigation-level-3-ul">
                        <!-- level 3-->
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Bausteine des Programms für weiterführende Schulen</a></li>
                        <li class="header__navigation-item header__navigation-level-3-li" data-level="3"><a class="header__navigation-link" href="#">Einblick in das Material für weiterführende Schulen</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="header__navigation-item header__navigation-level-1-li" data-level="1"><a class="header__navigation-link header__navigation-move" href="#" id="navigation-aeb4" aria-controls="menu-5bda" aria-expanded="false" aria-haspopup="true">Wissenswertes<svg class="icon icon--chevron-down" viewBox="0 0 200 200" role="img" aria-labelledby="icon-15e9-title">
                  <title id="icon-15e9-title">chevron-down</title>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg></a>
              <div class="header__navigation-submenu header__navigation-level-2" id="menu-5bda">
                <div class="header__navigation-submenu-item header__navigation-submenu-item--back"><a class="header__navigation-level-2-back" href="javascript:;" data-level="2"><svg class="icon icon--arrow-left" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1a33-title">
                      <title id="icon-1a33-title">arrow-left</title>
                      <use xlink:href="#icon-arrow-left"></use>
                    </svg></a></div>
                <div class="header__navigation-submenu-item header__navigation-submenu-item--overview"><a class="header__navigation-submenu-overview-link" href="#"><span class="header__navigation-text"><span class="u-hidden-visually">Übersicht:</span> Wissenswertes</span></a></div>
                <ul class="header__navigation-items header__navigation-level-2-ul">
                  <!-- LEVEL 2-->
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Was ist Mobbing?</a><!-- default style-->
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">FAQ zum Thema Mobbing</a><!-- default style-->
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Der Fall Viktor</a><!-- default style-->
                  </li>
                  <li class="header__navigation-item header__navigation-level-2-li" data-level="2"><a class="header__navigation-link header__navigation-level-2-li-link" href="#">Hilfe bei Mobbing</a><!-- default style-->
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="header__navigation-close"><button class="icon-button icon-button--secondary header__mobile-close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ff5b-title">
              <title id="icon-ff5b-title">List</title>
              <use xlink:href="#icon-close"></use>
            </svg></button></div>
      </div>
    </div>
  </div>
</header>

{
  "search": null,
  "meta": null,
  "navigation": {
    "level1": [
      {
        "link": "Programm",
        "href": null,
        "navigationsTeaser": null,
        "navigationsTeaserContent": {
          "color": "green",
          "title": "Lorem ipsum dolor",
          "ctaLink": {
            "link": "#",
            "text": "Zur Spendenseite",
            "icon": "chevron-right"
          }
        },
        "level2": [
          {
            "link": "Wer wir sind",
            "href": "#",
            "level3": [
              {
                "link": "Programmpartner",
                "href": "#"
              },
              {
                "link": "Ansprechpersonen",
                "href": "#"
              },
              {
                "link": "Zur Website der Baden-Württemberg Stiftung",
                "href": "#"
              }
            ]
          },
          {
            "link": "Wie wir arbeiten",
            "href": "#"
          },
          {
            "link": "Wissenschaftliche evaluation",
            "href": "#"
          },
          {
            "link": "Warum Mobbing&Du?",
            "href": "#"
          }
        ]
      },
      {
        "link": "Angebote",
        "href": null,
        "navigationsTeaser": null,
        "navigationsTeaserContent": {
          "color": "green",
          "title": "Lorem ipsum dolor",
          "ctaLink": {
            "link": "#",
            "text": "Zum Programmfinder",
            "icon": "chevron-right"
          }
        },
        "level2": [
          {
            "link": "Für Grundschulen",
            "href": "#",
            "level3": [
              {
                "link": "Bausteine des Programms für Grundschulen",
                "href": "#"
              },
              {
                "link": "Einblick in das Material für Grundschulen",
                "href": "#"
              }
            ]
          },
          {
            "link": "Für weiterführende Schulen",
            "href": "#",
            "level3": [
              {
                "link": "Bausteine des Programms für weiterführende Schulen",
                "href": "#"
              },
              {
                "link": "Einblick in das Material für weiterführende Schulen",
                "href": "#"
              }
            ]
          }
        ]
      },
      {
        "link": "Wissenswertes",
        "href": "#",
        "level2": [
          {
            "link": "Was ist Mobbing?",
            "href": "#"
          },
          {
            "link": "FAQ zum Thema Mobbing",
            "href": "#"
          },
          {
            "link": "Der Fall Viktor",
            "href": "#"
          },
          {
            "link": "Hilfe bei Mobbing",
            "href": "#"
          }
        ]
      }
    ]
  },
  "light": null,
  "logo": {
    "path": "/images/mud/logo-mud.svg",
    "pathLight": "/images/mud/logo-mud.svg",
    "link": "#",
    "alt": "Logo Mobbing & Du",
    "width": 174,
    "height": 80
  },
  "button": {
    "text": "Moodle"
  }
}