@keyframes shapeWobble {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(10deg);
  }
}


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

  width: 100%;
  //position: absolute;
  z-index: ($zindex-fixed + 1);

  .navbar-brand {
    position: absolute;
    padding: 0;
    left: 45%;
    top: 0;
    transform: translateX(-50%);
    width: 35vmin;

    &::before {
      animation: 8s shapeWobble alternate infinite cubic-bezier(.25, .2, .45, 1);
      content: url("../Images/svg/nav-bubble-1.svg");
      width: 49vmin;
      height: 49vmin;
      left: -6vmin;
      top: -6vmin;
      display: block;
      position: absolute;
    }

  }

  .logo {
    position: relative;
    width: 100%;
    height: auto;
    padding: 1rem;
  }

  .nav-toggler {
    position: absolute;
    left: 50%;
    top: 9vmin;
    transform: translate(20vmin, 0vmin);

    &::before, &::after {

      display: block;
      position: absolute;
    }

    &::before {
      animation: 6s shapeWobble alternate infinite cubic-bezier(.25, .2, .45, 1);
      content: url("../Images/svg/nav-bubble-3.svg");
      width: 63vmin;
      right: 5vmin;
      bottom: -10vmin;
    }

    &::after {
      animation: 7s shapeWobble alternate-reverse infinite cubic-bezier(.25, .2, .45, 1);
      content: url("../Images/svg/nav-bubble-2.svg");
      width: 72vmin;
      right: -3vmin;
      bottom: -9vmin;

    }

    .toggle-icon {
      position: relative;
      z-index: 1;

      .bar {
        border-color: #fff;
      }
    }

    &:hover, &:focus {
      .bar {
        border-color: #fff;
      }
    }

  }
}


.navbar--mobile {
  position: absolute;
  z-index: ($zindex-fixed);
  left: 0;
  top: 0;
  width: 100%;
  transform: translate3d(0, 0, 0); /* attention: hack for android */
  .navbar-collapse {
    justify-content: space-evenly;
  }

  .navbar-collapse-inner {

    padding-top: 35vmin;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100); /* --vh gets set via javascript: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
    position: relative;
  }

  .navbar-nav--mobile {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;

    .nav-item {
      border-top: 1px solid transparentize($navbar-dark-color, .75);
      &:first-child {
        border-top: 0 none;
      }
    }
    .nav-link {
      font-weight: bold;
      font-size: 1.1rem;
    }
  }


  .navbar-nav--service {
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    flex: 0 0 auto;
  }

}




.navbar--desktop {
  @media (max-width: $nav-breakpoint-max) {
    display: none;
  }
  justify-content: center;
  width: 100%;
  z-index: $zindex-fixed;
  padding: 0;
  position: relative;

  &::before {
    content: url('../Images/svg/transition_nav-2.svg');
    display: block;
    width: 100%;
    position: absolute;
    max-width: 1600px;
  }

  &.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%);
  }
}


.navbar-nav--desktop {
  flex-direction: row;
  justify-content: center; /*width: 100%;*/

  .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-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: $navbar-light-hover-color;

        //transition: all $nav-animation-duration $nav-animation-easing;

        &::before {
          position: absolute;
          display: block;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 71.7 3'%3E%3Cpath d='M0,1.4H0A2.6,2.6,0,0,1,1.1,0C10,.7,17.6,1.1,26.4,1.1,38.2,1.1,48.6.4,60.8.6h9.5c.9.1,1.4.5,1.4,1.1h0c.1.5-.2.8-.6,1.1L46,2.3H12.6C9.2,2.4,2,2.7,1.2,2.3L.1,1.7Z' style='fill:%23b61c3e'/%3E%3C/svg%3E"); /*height: $nav-link-padding-y;*/
          width: 72px;
        }
      }
    }
    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%;

      &:hover::before {
        content: none !important;
      }
    }

    .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 {
      &::before {
        content: none;
      }
      &.collapse.show {
        background-color: $navbar-light-hover-color;
        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);
  color: $primary;
  background-color: $gray-200;
  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;
    }
  }
}
