<nav
  id="navigation"
  class="navigation"
>
  <a href="/" class="logo navigation-link">
    <img
      class="logo-image"
      src="/img/logo-60jahre.png"
      alt="Unser Logo"
    />
  </a>

  <button
    type="button"
    id="navigation-toggle"
    class="navigation-toggle"
    aria-label="Navigation Öffnen und Schliessen"
  >
    <span class="navigation-toggle-line"></span>
    <span class="navigation-toggle-line"></span>
    <span class="navigation-toggle-line"></span>
  </button>

  <script>
    const navToggle = document.getElementById("navigation-toggle");
    const nav = document.getElementById("navigation");
    navToggle.addEventListener("click", function () {
      nav.classList.toggle("navigation_open");
    });
  </script>

  <ul class="menu">
    <li class="menu-item">
      <a href="/veranstaltungen" class="navigation-link">Veranstaltungen</a>
    </li>
    <li class="menu-item">
      <a href="/medien" class="navigation-link">Medien</a>
    </li>
    <li class="menu-item">
      <a href="/unterricht" class="navigation-link">Bildung</a>
    </li>
  </ul>
</nav>
