.navigation-flyout {
  left: 0;
  background-color: $bcb-main-navi-megamenubg;

  .navigation-flyout-content {
    padding: 16px 0;

    .mega--menu--wrapper {
      .navigation-flyout-categories {
        & > .navigation-flyout-col {
          margin-bottom: 30px;
          position: relative;

          &::before {
            border-left: 1px solid #e8e7e8;
            content: "";
            height: 100%;
            left: 15px;
            position: absolute;
            top: 0;
          }
        }
      }
    }
  }

  .navigation-flyout-category-link {
    a.nav-link {
      color: $bcb-nav-main-flyout-categories-headline-color;
      font-weight: 600;

      .icon-primary {
        color: $bcb-nav-main-flyout-categories-headline-color;
      }
    }
  }

  .navigation-flyout-categories {
    .navigation-flyout-col {
      .navigation-flyout-link {
        color: $bcb-nav-main-flyout-categories-color;
        font-size: $bcb-nav-main-flyout-font-size + px;

        &:hover {
          color: $bcb-nav-main-flyout-categories-color-hover;
        }
      }

      .is-level-1 {
        color: $bcb-nav-main-flyout-categories-level-one-color;
        font-weight: 400;

        &:hover {
          color: $bcb-nav-main-flyout-categories-level-one-color-hover;
        }
      }
    }
  }

  &.is-open {
    @keyframes reveal {
      0% {
        opacity: 0.8;
        transform: rotateX(-70deg);
        transform-origin: bottom;
      }

      30% {
        opacity: 0.9;
      }

      50% {
        opacity: 1;
        transform: rotateX(8deg);
        transform-origin: bottom;
      }

      100% {
        opacity: 1;
        transform: rotateX(0);
        transform-origin: bottom;
      }
    }

    &.animated {
      animation: reveal 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) alternate forwards;
      .container {
        &.submega-menu-two {
          width: 100%;
          max-width: none;
        }
      }
    }
  }
}

.navigation-flyout-link.is-level-0 {
  font-weight: 600;
}

.navigation-flyout-categories.is-level-0 {
  font-weight: 500;

  > .navigation-flyout-col {
    &::before {
      border-left: none;
    }
  }
}

.header-one {
  .dropdown-menu[data-bs-popper] {
    margin-top: -9px;
  }
}

@media (min-width: 992px) {
  .header-main {
    .container {
      .header-one {
        position: relative;
        .header-row {
          .nav-main {
            .main-navigation {
              > .container {
                position: unset;
                width: auto;
                max-width: none;
                .navbar {
                  position: unset;
                }
                .navbar-nav {
                  .dropdown-menu.navigation-flyout {
                    border: none;
                    background-color: transparent;
                    padding: 0;
                  }
                }
                .dropdown-menu {
                  .submega-menu-two {
                    background-color: #fafafa;
                    border-top: 1px solid #efefef;
                    padding: 20px !important;
                    
                    // Layout "Full-width" oder "Full-width-boxed"
                    @if $theme-header-additional-maxwidth == "1" {
                      // Full-width-boxed
                      width: 100%;
                      max-width: $container-max-width;
                      margin-top: 9px;
                    } @else {
                      // Full-width
                      max-width: none;
                      margin-top: 9px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .header-three {
    .nav-main {
      .main-navigation {
        width: 100%;
        > .container {
          .main-navigation-menu {
            @if $theme-header-additional-maxwidth == "1" {
              display: flex;
              width: 100%;
              max-width: $container-max-width;
              margin: 0 auto;
              padding: 10px 0;
            } @else {
              display: flex;
              width: 100%;
              max-width: none;
              margin: 0;
              padding: 10px 0;
            }
            .navbar-collapse {
              display: flex !important;
              flex-basis: auto;
              justify-content: center;
              .navbar-nav {
                .dropdown-menu[data-bs-popper] {
                  margin-top: 0px;
                }
              }
            }
          }
        }
      }
    }
  }
  .header-two {
    .nav-main {
      .main-navigation {
        width: 100%;
        .navbar {
          .navbar-collapse {
            justify-content: end;
            .navbar-nav {
              margin-right: 20px;
              .dropdown-menu[data-bs-popper] {
                margin-top: 0px;
              }
            }
          }
        }
      }
    }
  }
}
