:root {
  --nav-accent: var(--nemesis-orange, #ec6608);
  --nav-text: #595959;
  --nav-text-strong: #262626;
  --nav-surface: #fff;
  --nav-surface-muted: #efefef;
  --nav-surface-active: #dedede;
  --nav-touch-target: 3rem;
  --nav-focus-width: 0.1875rem;
}

.navigation {
  container: site-navigation / inline-size;
  width: 100%;
  background: transparent;
}

.navigation.sticky {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 999;
  width: 100%;
  box-shadow: 0 0.3125rem 0.625rem rgb(0 0 0 / 15%);
}

.header {
  --compact-brand-size: clamp(2rem, 5vw + 0.75rem, 3rem);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-block-start: 0;
  background-color: rgb(255 255 255 / 94%);
}

.header-logo,
.header-text {
  min-inline-size: 0;
  flex: 1 1 0;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.header-logo {
  color: #000;
  font-size: calc(var(--compact-brand-size) * 0.5);
  text-align: start;
}

.header-logo-n {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.header-logo-a {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
}

.header-text {
  color: var(--nav-accent);
  font-family: "Noto Sans", sans-serif;
  font-size: var(--compact-brand-size);
  font-weight: 400;
  letter-spacing: clamp(0.08em, 0.04em + 0.3cqi, 0.19em);
  text-align: start;
}

.nav-container {
  width: 100vw;
  width: 100dvw;
  min-block-size: var(--nav-touch-target);
  margin-inline-start: calc(50% - 50vw);
  margin-inline-start: calc(50% - 50dvw);
  padding: 0;
  background: var(--nav-surface-muted);
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(1rem, 0.94rem + 0.32cqi, 1.3rem);
}

.navigation nav {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  vertical-align: top;
}

.navigation .nav-list {
  display: none;
  max-block-size: calc(100vh - var(--nav-touch-target));
  max-block-size: calc(100dvh - var(--nav-touch-target));
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior-block: contain;
}

.navigation .nav-list > li {
  width: 100%;
  float: none;
  background-color: var(--nav-surface);
}

.navigation .nav-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-block-size: var(--nav-touch-target);
  padding: 0.625rem 1rem;
  color: var(--nav-text);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
}

.navigation .nav-list a:hover,
.navigation .nav-list a:active {
  color: var(--nav-text-strong);
  background-color: var(--nav-surface-active);
}

.navigation .nav-list a:focus-visible,
#nav-toggle:focus-visible {
  outline: var(--nav-focus-width) solid var(--nav-text-strong);
  outline-offset: calc(-1 * var(--nav-focus-width));
}

.navigation .nav-list li.active > a,
.navigation .nav-list a[aria-current="page"] {
  color: var(--nav-text-strong);
  font-weight: 700;
}

.navigation .nav-sublist {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #f7f7f7;
}

.navigation .nav-sublist > li > a {
  justify-content: flex-start;
  padding-inline-start: clamp(1.5rem, 5cqi, 2.5rem);
  font-size: 0.95em;
  text-align: start;
}

.nav-mobile {
  position: relative;
  display: block;
  width: 100vw;
  width: 100dvw;
  min-block-size: var(--nav-touch-target);
  margin-inline-start: calc(50% - 50vw);
  margin-inline-start: calc(50% - 50dvw);
  background: var(--nav-surface-muted);
  box-shadow: none;
}

#nav-toggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  display: grid;
  width: var(--nav-touch-target);
  min-width: 2.75rem;
  height: var(--nav-touch-target);
  min-height: 2.75rem;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  place-items: center;
  transform: translateX(-50%);
  touch-action: manipulation;
}

#nav-toggle span,
#nav-toggle span::before,
#nav-toggle span::after {
  position: absolute;
  display: block;
  width: 2.1875rem;
  height: 0.3125rem;
  content: "";
  background: var(--nav-accent);
  border-radius: 0.0625rem;
  transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;
}

#nav-toggle span {
  position: relative;
}

#nav-toggle span::before {
  inset-block-start: -0.625rem;
}

#nav-toggle span::after {
  inset-block-end: -0.625rem;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span::before,
#nav-toggle.active span::after {
  inset-block-start: 0;
}

#nav-toggle.active span::before {
  transform: rotate(45deg);
}

#nav-toggle.active span::after {
  transform: rotate(-45deg);
}

/* Header reagiert auf die verfügbare Breite der Navigation. */
@container site-navigation (min-width: 32.5rem) {
  .header {
    flex-direction: column;
  }

  .header-logo {
    padding: 1rem clamp(1.25rem, 4cqi, 3.125rem) 0.25rem;
  }

  .header-text {
    padding: 0.25rem clamp(1.25rem, 4cqi, 3.125rem) 1rem;
  }
}

/* Desktopnavigation ohne Floats, mit fünf gleich breiten Zielen. */
@container site-navigation (min-width: 49.625rem) {
  .header {
    flex-direction: row;
    align-items: center;
  }

  .header-logo {
    width: auto;
    padding: clamp(0.875rem, 1.8cqi, 1.25rem)
      clamp(1.25rem, 4cqi, 3.125rem);
    font-size: clamp(2.5rem, 3.8cqi, 3.875rem);
    text-align: start;
  }

  .header-text {
    width: auto;
    padding: clamp(0.875rem, 1.8cqi, 1.25rem)
      clamp(1.25rem, 4cqi, 3.125rem);
    font-size: clamp(2.4rem, 3.65cqi, 3.6875rem);
    text-align: end;
  }

  .nav-container {
    background: var(--nav-surface);
  }

  .nav-mobile {
    display: none;
  }

  .navigation nav {
    z-index: 999;
    background-color: var(--nav-surface);
  }

  .navigation .nav-list {
    display: flex !important;
    align-items: stretch;
    max-block-size: none;
    overflow: visible;
    text-align: start;
    background-color: var(--nav-surface-active);
  }

  .navigation .nav-list > li {
    position: relative;
    width: auto;
    float: none;
    flex: 1 1 20%;
  }

  .navigation .nav-list > li > a {
    min-block-size: clamp(3rem, 5.5cqi, 4.375rem);
    padding-inline: clamp(1rem, 3.9cqi, 3.125rem);
  }

  .navigation .nav-list > li > a:hover,
  .navigation .nav-list > li > a:focus-visible {
    color: var(--nav-text-strong);
    background: var(--nav-surface-active);
  }

  .navigation .nav-sublist {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 1000;
    display: none !important;
    min-inline-size: max(100%, 14rem);
    box-shadow: 0 0.375rem 0.75rem rgb(0 0 0 / 15%);
  }

  .navigation .nav-list > li:hover > .nav-sublist,
  .navigation .nav-list > li:focus-within > .nav-sublist {
    display: block !important;
  }

  .navigation .nav-sublist > li > a {
    justify-content: flex-start;
    padding-inline: 1rem;
  }
}

/* Schmale Geräte: beide Wortmarken gut lesbar untereinander. */
@container site-navigation (max-width: 35.998rem) {
  .header-logo,
  .header-text {
    width: 100%;
    padding: 0.625rem 0.9375rem;
    text-align: start;
  }

  .header-text {
    padding-block-start: 0;
  }
}

/* Fallback, falls Container Queries nicht unterstützt werden. */
@supports not (container-type: inline-size) {
  @media (min-width: 520px) {
    .header {
      flex-direction: column;
    }

    .header-logo {
      padding: 1rem clamp(1.25rem, 4vw, 3.125rem) 0.25rem;
    }

    .header-text {
      padding: 0.25rem clamp(1.25rem, 4vw, 3.125rem) 1rem;
    }
  }

  @media (min-width: 794px) {
    .header {
      flex-direction: row;
      align-items: center;
    }

    .header-logo {
      width: auto;
      padding: clamp(0.875rem, 1.8vw, 1.25rem)
        clamp(1.25rem, 4vw, 3.125rem);
      font-size: clamp(2.5rem, 3.8vw, 3.875rem);
      text-align: start;
    }

    .header-text {
      width: auto;
      padding: clamp(0.875rem, 1.8vw, 1.25rem)
        clamp(1.25rem, 4vw, 3.125rem);
      font-size: clamp(2.4rem, 3.65vw, 3.6875rem);
      text-align: end;
    }

    .nav-container {
      background: var(--nav-surface);
    }

    .nav-mobile {
      display: none;
    }

    .navigation .nav-list {
      display: flex !important;
      max-block-size: none;
      overflow: visible;
    }

    .navigation .nav-list > li {
      width: auto;
      float: none;
      flex: 1 1 20%;
    }
  }

  @media (max-width: 575.98px) {
    .header-logo,
    .header-text {
      width: 100%;
      padding: 0.625rem 0.9375rem;
      text-align: start;
    }

    .header-text {
      padding-block-start: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav-toggle span,
  #nav-toggle span::before,
  #nav-toggle span::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  #nav-toggle {
    border: 0.125rem solid ButtonText;
  }

  #nav-toggle span,
  #nav-toggle span::before,
  #nav-toggle span::after {
    background: ButtonText;
  }
}