.main-nav {

  /* ============================================
     Ebene 1 – Hauptmenü
     ============================================ */
  & .level_1 {

    & > li {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;

      /* Alle Links der ersten Ebene */
      & > a,
      & > strong {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 0.5rem;
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--dropdown-transition), color var(--dropdown-transition);
        box-sizing: border-box;
      }

      /* Aktive Seite */
      & > strong.active,
      &.active > a,
      &.trail > a {
        color: var(--dropdown-accent);
      }

      /* Kleines Pfeil-Icon bei Submenü-Einträgen */
      &.submenu > a::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 0.4rem;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid rgba(26, 26, 26, 0.6);
        transition: transform var(--dropdown-transition);
      }

      /* Pfeil dreht sich beim Öffnen */
      &.submenu:hover > a::after,
      &.submenu:focus-within > a::after {
        transform: rotate(180deg);
      }

      /* ============================================
         Ebene 2 – Dropdown (weiß, mit Schatten)
         ============================================ */
      & > .level_2 {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 230px;
        background-color: var(--dropdown-bg);
        box-shadow: var(--dropdown-shadow);
        z-index: 999;

        /* Versteckt & animiert */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
                opacity     var(--dropdown-transition),
                transform   var(--dropdown-transition),
                visibility  0s linear var(--dropdown-transition);

        /* Dünne rote Akzentlinie oben */
        border-top: 3px solid var(--dropdown-accent);

        /* Dropdown einblenden beim Hover oder Fokus innerhalb */
        &:is(:hover, :focus-within),
        :hover > &,
        :focus-within > & {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          transition:
                  opacity   var(--dropdown-transition),
                  transform var(--dropdown-transition),
                  visibility 0s linear 0s;
        }

        strong.active {
          display: block;
          padding: 0.55rem 1.2rem;
        }

        /* ---- Links in Ebene 2 ---- */
        & > li {
          position: relative;

          /* Trennlinie zwischen Items */
          & + li {
            border-top: 1px solid #f0f0f0;
          }

          & > a {
            display: block;
            padding: 0.55rem 1.2rem;
            text-decoration: none;
            font-weight: 400;
            white-space: nowrap;
            transition: background-color var(--dropdown-transition), color var(--dropdown-transition), padding-left var(--dropdown-transition);

            &:hover {
              background-color: var(--dropdown-hover);
              color: var(--dropdown-accent);
            }
          }

          &.trail > a {
            display: block;
            padding: 0.55rem 1.2rem;
            font-weight: 700;
          }

          /* Pfeil bei Submenü-Einträgen in Ebene 2 */
          &.submenu > a::after {
            content: "+"; /* › */
            float: right;
            color: #808080;
            font-size: 1.4rem;
            line-height: 1.3;
            transition: color var(--dropdown-transition);
          }

          &.submenu:hover > a::after {
            color: var(--dropdown-accent);
          }

          /* ============================================
             Ebene 3 – Fly-Out nach rechts
             ============================================ */
          & > .level_3 {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top: -3px;
            right: 100%;
            min-width: 220px;
            background-color: var(--dropdown-bg);
            box-shadow: var(--dropdown-shadow);
            z-index: 998;
            border-top: 3px solid var(--dropdown-accent);

            opacity: 0;
            visibility: hidden;
            transform: translateX(-6px);
            transition:
                    opacity   var(--dropdown-transition),
                    transform var(--dropdown-transition),
                    visibility 0s linear var(--dropdown-transition);

            /* Einblenden beim Hover oder Fokus */
            :hover > &,
            :focus-within > & {
              opacity: 1;
              visibility: visible;
              transform: translateX(0);
              transition:
                      opacity   var(--dropdown-transition),
                      transform var(--dropdown-transition),
                      visibility 0s linear 0s;
            }

            /* ---- Links in Ebene 3 ---- */
            & > li {

              /* Trennlinie zwischen Items */
              & + li {
                border-top: 1px solid #f0f0f0;
              }

              & > a {
                display: block;
                padding: 0.55rem 1.2rem;
                text-decoration: none;
                transition: background-color var(--dropdown-transition), color var(--dropdown-transition), padding-left var(--dropdown-transition);

                &:hover {
                  background-color: var(--dropdown-hover);
                  color: var(--dropdown-accent);
                }
              }
            }
          }
        }
      }
    }
  }

  /* ============================================
     Barrierefreiheit – Fokus-Styles
     ============================================ */
  & a:focus-visible {
    outline: 2px solid var(--dropdown-accent);
    outline-offset: -2px;
  }

  & .level_2 a:focus-visible,
  & .level_3 a:focus-visible {
    outline: 2px solid var(--dropdown-accent);
    outline-offset: -2px;
  }
}


/* ============================================
   Footer Navigation
   ============================================ */

.footer-navi {
  h3 {
    color: var(--color-primary);
  }

  .mod_customnav {
    ul {
      padding: 0;

      li {
        border-bottom: 1px solid var(--color-dark-grey);

        a {
          text-decoration: none;
          color: var(--color-black);
        }

        strong.active {
          color: var(--color-primary);
        }
      }
    }

  }
}