
.navbar-main {
  justify-content: center;
  width: 100%;

  z-index: $zindex-sticky;
  padding: 0;
  position: relative;

  &.transition-before {

    &::before {
      background-image: url('../Images/svg/wave-nav2.svg');
      background-position-y: bottom;
      height: 162%;
      transform: translateY(-30%);
      top: 0;
    }
  }

  &.is--sticky {
    will-change: transform;
    transition: transform $nav-animation-duration $nav-animation-easing;
    position: fixed;
  }

  &.is--pinned {
    transform: translateY(0%);
  }

  &.is--unpinned {
    transform: translateY(-100%);
  }

}


.nav-mobile {
  //position: absolute;
  //top: 0;
  //left: 0;
  //right: 0;

  @media (min-width: $nav-breakpoint) {
    display: none;
  }
}


.nav-mobile .hamb {
  //position: absolute;
  //z-index: 1;
  //right: 0;
  //top: 0;
}


.logo--mobile {
  position: absolute;
  left: 0;

  &::before {
    //content: '';
    display: block;
    height: 250px;
    width: 250px;
    top: -100px;
    left: -20px;
    border-radius: 100%;
    background: white;
    position: absolute;
  }

  img {
    width: 100px;
    height: auto
  }
}


.nav-main {

  flex-wrap: nowrap;
  flex-direction: column;

  // mobile view
  @media (max-width: $nav-breakpoint-max) {
    background: transparentize($primary, .02);
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    transition: all $nav-animation-duration $nav-animation-easing;
    transform: perspective(100px) translate3d(0, 50px, -10px);
    opacity: 0;
    &.show {
      will-change: transform, opacity, filter;
      transform: perspective(100px) translate3d(0, 0, 0px);
      opacity: 1;
    }

  }

  // desktop view
  @media (min-width: $nav-breakpoint) {
    flex-direction: row;

    position: relative;
    display: flex !important;
    justify-content: center;
    //width: 100%;
  }

}


.nav-main .nav-item {
  flex: 0 0 auto;

  &--home {
    @media (min-width: $nav-breakpoint) {
      order: 3;

    }
  }

  &--filiale {
    order: 1
  }

  &--sortiment {
    order: 2
  }

  &--uberuns {
    order: 4
  }

  &--reinheitsgebot {
    order: 5
  }

  &--service {
    order: 6

  }

  @include media-breakpoint-up(md) {
    height: map_get($nav-main-height, "md");
  }

  @include media-breakpoint-up(lg) {
    height: map_get($nav-main-height, "lg");
  }
  @include media-breakpoint-up(xl) {
    height: map_get($nav-main-height, "xl");
  }

  @include media-breakpoint-up(xxl) {
    height: map_get($nav-main-height, "xxl");
  }

}


.nav-main .nav-link {

  position: relative;
  color: $body-color;

  @media (max-width: $nav-breakpoint-max) {
    font-size: 1.5em;
    text-align: center;
  }
  @media (min-width: $nav-breakpoint) {
    &:hover, &:focus {
      color: $primary;
      transition: all $nav-animation-duration $nav-animation-easing;

      &::before {
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        right: 0;
        content: '';
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='71.72' height='3' viewBox='0 0 71.72 3'%3E%3Cpath d='M0,1.4v0A2.42,2.42,0,0,1,1.09,0c9,.7,16.5,1.05,25.35,1.05C38.19,1.05,48.59.4,60.8.55c3,0,6.1,0,9.52.1.93.15,1.34.55,1.4,1.1v.1A1.23,1.23,0,0,1,71.1,3c-8.8-.35-16.56-.55-25.1-.7H41c-6.62,0-12.16.1-19.09.1-2.85.05-6,.05-9.37,0s-7.14,0-11.33,0A2.72,2.72,0,0,1,.1,1.65' style='fill:#{encodecolor($primary)}'/%3E%3C/svg%3E") center center no-repeat;
        height: $nav-link-padding-y;

      }

    }

  }

  padding: $nav-link-padding-y $nav-link-padding-x;
  transition: padding $nav-animation-duration $nav-animation-easing, margin $nav-animation-duration $nav-animation-easing;
  @media (min-width: $nav-breakpoint) {
    margin-top: $nav-link-padding-y * 1;
    margin-bottom: $nav-link-padding-y *.5;
    padding: $nav-link-padding-y $nav-link-padding-x * .25;
    font-size: $font-size-base*.8;
  }
  @include media-breakpoint-up(lg) {
    margin-top: $nav-link-padding-y * 2.5;
    margin-bottom: $nav-link-padding-y *.66;
    padding: $nav-link-padding-y $nav-link-padding-x * .5;
    font-size: $font-size-base;
  }
  @include media-breakpoint-up(xl) {
    margin-top: $nav-link-padding-y * 3;
    margin-bottom: $nav-link-padding-y  * 1;
    padding: $nav-link-padding-y $nav-link-padding-x * .75;
  }

  @include media-breakpoint-up(xxl) {
    margin-top: $nav-link-padding-y * 4;
    margin-bottom: $nav-link-padding-y * 1.5;
    padding: $nav-link-padding-y $nav-link-padding-x * 1;
    font-size: $font-size-base*1.1;
  }
}


.nav-item--home {
  .nav-link {
    height: 100%;
  }

  .logo {
    height: 100%;
    width: auto;
    display: block;
  }

  .logo--default {
    display: none
  }

  @media (min-width: $nav-breakpoint) {
    order: 3;
    .logo--white {
      display: none;
    }
    .logo--default {
      display: inherit;
    }
  }

  .nav-link {
    margin: 0;
    padding: $nav-link-padding-y $nav-link-padding-x * 1;

    @media (min-width: $nav-breakpoint) {
      padding: $nav-link-padding-y/2 $nav-link-padding-x/2;
    }
    @include media-breakpoint-up(lg) {
      padding: $nav-link-padding-y $nav-link-padding-x * 1;
    }
    @include media-breakpoint-up(xl) {
      padding: $nav-link-padding-y $nav-link-padding-x * 1.5;
    }
    @include media-breakpoint-up(xxl) {
      padding: $nav-link-padding-y $nav-link-padding-x * 2;
    }

  }
}


.nav-item--service {
  position: relative;

  .sub-nav-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: -$nav-link-padding-y;
    background: $primary;
    padding: 0 $nav-link-padding-y;
  }

  .nav-toggler {
    &.collapse.show {
      background-color: $primary;
      color: #fff;
    }

    &, &.collapsed, &.show.collapsed {

      background-color: transparent !important;
      color: inherit !important;

    }

  }
}


.sub-nav {
  flex-direction: column;

  .nav-item {
    border-bottom: 1px solid scale_color($primary, $lightness: 50%);
    height: auto;

    &:last-child {
      border-bottom: 0
    }

    .nav-link {
      margin: 0;
      padding: $nav-link-padding-y $nav-link-padding-x;
      color: scale_color($primary, $lightness: 75%);
      color: white;

      &:hover, &:focus {
        color: scale_color($primary, $lightness: 100%);
      }
    }
  }

}


.scrolltop {
  .row > & {

    @include make-col-ready;
    @include make-col(12);
    text-align: right;
    margin-top: $grid-gutter-width/2;

    &:after {
      content: '';
      left: $grid-gutter-width/2;
      right: $grid-gutter-width/2;
      bottom: 0;
      height: 1px;
      background-color: $gray-200;

      display: block;
    }
  }
}


.link-top {
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, .75em, $btn-line-height-sm, $btn-border-radius-sm);
  background-color: $gray-200;
  color: var(--parent-color);
  display: inline-block;
}


.col--footernav {
  ul {
    display: flex;
    list-style: none;

    li {
      flex: 1 1 auto;
      padding-left: $grid-gutter-width/2;
      padding-right: $grid-gutter-width/2;
    }
  }
}
