/* ========================================================================== */
/* 3) MOBILE NAVIGATION (.ms-main-nav)                                        */
/* ========================================================================== */

@media (max-width: 1024px) {

  .ms-main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--ms-bg-light-1);
    padding: var(--ms-space-7) var(--ms-space-5);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    z-index: 2000;
    overflow-y: auto;

    &.is-open {
      transform: translateX(0);
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--ms-space-4);

      li {
        a,
        strong.active {
          display: block;
          padding: var(--ms-space-3) var(--ms-space-2);
          font-size: var(--ms-font-size-lg);
          font-weight: var(--ms-fw-medium);
          color: var(--ms-dark);
          text-decoration: none;
          border-radius: var(--ms-radius-sm);
          transition: background 0.2s ease, color 0.2s ease;
        }

        a:hover {
          background: var(--ms-bg-light-2);
          color: var(--ms-primary);
        }

        strong.active {
          font-size: var(--ms-font-size-lg);
          font-weight: var(--ms-fw-bold);
          color: var(--ms-primary);
          background: var(--ms-bg-light-2);
          border-radius: var(--ms-radius-sm);
        }
      }
    }
  }

  /* Overlay */
  .ms-nav-overlay {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1500;

    &.is-active {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* Toggle Button – Mobile */
  .ms-nav-toggle {
    background: none;
    border: none;
    padding: var(--ms-space-2);
    cursor: pointer;
    color: var(--ms-text);
    display: flex;
    align-items: center;
    justify-content: center;

    .ms-hamburger-box {
      width: 28px;
      height: 20px;
      position: relative;
      display: inline-block;

      .ms-hamburger-inner,
      .ms-hamburger-inner::before,
      .ms-hamburger-inner::after {
        position: absolute;
        left: 0;
        width: 28px;
        height: 2px;
        background-color: currentColor;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
      }

      .ms-hamburger-inner {
        top: 50%;
        transform: translateY(-50%);

        &::before {
          content: "";
          top: -8px;
        }

        &::after {
          content: "";
          top: 8px;
        }
      }
    }

    /* Open State – X-Form */
    &.is-open {
      .ms-hamburger-inner {
        background-color: transparent;

        &::before {
          transform: translateY(8px) rotate(45deg);
        }

        &::after {
          transform: translateY(-8px) rotate(-45deg);
        }
      }
    }
  }
}


/* ========================================================================== */
/* 4) DESKTOP NAVIGATION – MODULARES SYSTEM (.ms-nav)                         */
/* ========================================================================== */

@media (min-width: 1025px) {

  /* Toggle auf Desktop ausblenden */
  .ms-nav-toggle {
    display: none;
  }

  /* Basis-Navigation */
  .ms-nav {
    display: flex;
    align-items: center;
    gap: var(--ms-space-6);
    min-width: 0;

    > ul {
      display: flex;
      align-items: center;
      gap: var(--ms-space-6);
      list-style: none;
      margin: 0;
      padding: 0;
      min-width: 0;
      flex: 1 1 auto;

      > li {
        min-width: 0;
        flex: 1 1 auto;

        > a,
        > strong.active {
          display: inline-flex;
          align-items: center;
          position: relative; /* wichtig für Underline */
          padding: var(--ms-space-2) var(--ms-space-1);
          font-size: var(--ms-font-size-base);
          font-weight: var(--ms-fw-medium);
          color: var(--ms-dark);
          text-decoration: none;
          border-radius: var(--ms-radius-sm);
          transition: color 0.2s ease, background 0.2s ease;
        }
      }
    }
  }

  /* --- Variante 1: Button-Look ------------------------------------------- */
  .ms-nav--buttons {
    > ul > li {
      > a:hover {
        color: var(--ms-primary);
        background: var(--ms-bg-light-2);
      }

      > strong.active {
        color: var(--ms-primary);
        font-weight: var(--ms-fw-bold);
        background: var(--ms-bg-light-2);
      }
    }
  }

  /* --- Variante 2: Underline-Look (animiert, modern) --------------------- */
  .ms-nav--underline {
    > ul > li {
      > a,
      > strong.active {
        background: transparent;
        border-radius: 0;
        padding-bottom: var(--ms-space-1);
      }

      > a::after,
      > strong.active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 0;
        background: currentColor;
        transition: width 0.25s ease;
      }

      > a:hover::after,
      > strong.active::after {
        width: 100%;
      }

      > strong.active {
        font-weight: var(--ms-fw-bold);
        color: var(--ms-primary);
      }
    }
  }
}

.ms-sidebar-left {

  .mod_navigation {

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      margin: 0;
      padding: 0;
      position: relative;
      border-radius: var(--ms-radius-sm);

      /* Flex für perfekte vertikale Zentrierung */
      display: flex;
      align-items: center;

      /* Hintergrund für Active, Trail, Hover, Fokus */
      &.active,
      &.trail,
      &:hover,
      &:focus-within {
        background: var(--ms-bg-light-2);
      }

      /* Trail-Balken */
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
        border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
        transition: background .2s ease;
      }

      &.active::before,
      &.trail::before,
      &:hover::before,
      &:focus-within::before {
        background: var(--ms-primary);
      }
    }

    /* Links + strong identisch */
    a,
    strong {
      display: block;
      padding: var(--ms-space-5) var(--ms-space-6);
      color: var(--ms-dark);
      text-decoration: none;
      font-weight: inherit;
      line-height: 1;
      transition: color .2s ease;
      margin: 0;
    }

    /* Hover: nur Textfarbe */
    a:hover {
      color: var(--ms-primary);
    }

    /* Active / Trail */
    .active,
    .trail {
      color: var(--ms-primary);
    }

    .invisible {
      display: none;
    }
  }
}