/* ************************************* */
/*                                       */
/* Main navigation                       */
/*                                       */
/* ************************************* */

.page__nav {
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
  position:sticky;
  position:-webkit-sticky;
  z-index:2;
  top:0;
  width:100%;
  background: var(--color-grey-light);
}

@media only screen and (min-width: 768px) {

  .page__nav {
      border-top: 1px var(--color-primary) solid;
  }

}

.page__nav.is-fixed {
  border:0;
  width:100%;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.4);
}


/* ***************************************************************** */
/* Main navigation - Inner Container .page__nav .page__nav__inner    */
/* ***************************************************************** */

.page__nav__inner {
  max-width: var(--layout-page-maxwidth-with-padding);
  margin:0 auto 0 auto;
  font-family: var(--font-nav);
  font-size: var(--font-nav-size);
  font-weight: var(--font-nav-weight);
  text-transform: var(--font-nav-transform);
  position:relative;
}

@media only screen and (min-width: 768px) {

  .page__nav__inner {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    padding-left:30px;
    padding-right:30px;
  }

  .page__nav__inner.is-fixed {
    max-width: var(--layout-page-maxwidth);
    padding:0 var(--padding-secondary-horizontal-px) 0 var(--padding-secondary-horizontal-px);
  }

}

@media only screen and (min-width: 850px) {

  .page__nav__inner {
    padding-left:15px;
    padding-right:15px;
  }

}


/* ********************************************************************* */
/* Main navigation - NAV element .page__nav .page__nav__inner .nav-main  */
/* ********************************************************************* */

.nav-main {
  position:relative;
  flex: 0 0 100%;
}

@media only screen and (min-width: 768px) {

  .nav-main {
    flex-basis:unset;
  }

  .nav-main.is-fixed {
    margin-left:10px;
  }

}


/* *************************************************************************** */
/* Main navigation list .page__nav .page__nav__inner .nav-main .nav-main__list */
/* *************************************************************************** */

.nav-main__list {
  display:flex;
  font-family: var(--font-nav);
  font-size: var(--font-nav-size);
  font-weight: var(--font-nav-weight);
  text-transform: var(--font-nav-transform);
  flex-wrap: wrap;
  visibility: hidden;
}

@media only screen and (min-width: 768px) {

  .nav-main__list {
    visibility: visible;
  }

}

/* ************************************* */
/* All menu a                            */
/* ************************************* */

@media only screen and (min-width: 768px) {

  .nav-main__list a {
    padding-left: 10px;
    padding-right: 10px;
  }

}

@media only screen and (min-width: 768px) {

  .nav-main__list > li > a {
    display:block;
    padding-top: 18px;
    padding-bottom: 18px;
    position: relative;
    transition: background-color 0.2s ease;
  }

  .nav-main__list li.has-submenu > a {
    padding-right: 38px;
  }

}

@media only screen and (min-width: 850px) {

  .nav-main__list a:not(.is-fixed) {
    padding-left: 25px;
    padding-right: 25px;
  }

  .nav-main__list li.has-submenu > a:not(.is-fixed) {
    padding-right: 50px;
  }

}


/* ************************************* */
/* If the main menu item has a submenu   */
/* ************************************* */

@media only screen and (min-width: 768px) {

  .has-submenu {
    position:relative;
  }

  .nav-main__submenu {
      position: absolute;
      z-index: 100;
      left: 0;
      bottom: 0;
      color:var(--color-light);
      background-color:#6991aa;
      transform:translateY(100%);
      z-index: 4;
      min-width:100%;
      box-shadow: 4px 4px 4px -3px rgba(0,0,0,0.4);
      /* initial state */
      padding-top:0;
      padding-bottom: 0;
      visibility:hidden;
      opacity:0;
      height:0;
      overflow:hidden;
      pointer-events: none; /* click through - extra save */
      /* animation */
      transition: height 0ms 0.5s,  padding-top 0.5s 0ms, padding-bottom 0.5s 0ms, opacity 0.5s 0ms, visibility 0.5s 0ms; /* fade out: first opacity, then 0% height */
  }

  .nav-main__submenu.last-visible-in-desktop {
    left:auto;
    right:0;
  }

  .nav-main__submenu a {
      display:block;
      white-space: nowrap;
      padding-top:8px;
      padding-bottom:8px;
      color: var(--color-light);
  }

 .nav-main__submenu a:hover {
      color: var(--color-grey);
  }

}


/* ************************************* */
/* Toggle                                */
/* ************************************* */

@media only screen and (min-width: 768px) {

  .submenu-toggle-label {
    position:absolute;
    right:2px;
    top:50%;
    height:30px;
    width:30px;
    bottom:0;
    cursor: pointer;
    transform:rotate(0deg);
    transition: transform 0.5s linear;
    display:flex;
    align-items: center;
    justify-content: center;
    background:var(--color-grey);
    transform: translateY(-15px);
  }

  .submenu-toggle-label.is-fixed {
    height:20px;
    width:20px;
    transform: translateY(-12px);
  }


  .submenu-toggle-label i {
    transform:rotate(0deg);
    transition: transform 0.5s linear;
  }

}

@media only screen and (hover: hover) and (min-width: 768px) {

  .submenu-toggle-label,
  .submenu-toggle-label.is-fixed {
    background:transparent;
    pointer-events: none; /* disable click */
  }

}

@media only screen and (min-width: 850px) {

  .submenu-toggle-label:not(.is-fixed) {
    right:15px;
  }

  .submenu-toggle-label.is-fixed {
    height:30px;
    width:30px;
    transform: translateY(-15px);
  }

}


/* ************************************* */
/* ACTIVE submenu                        */
/* ************************************* */

@media only screen and (min-width: 768px) {

  /* Active state of the first level elements */
  input[type=checkbox]:checked ~ .submenu-toggle-label,
  input[type=checkbox]:checked ~ a {
    background-color:#6991aa;
    color:var(--color-light);
  }

  /* Active state of the expand icon */
  input[type=checkbox]:checked ~ .submenu-toggle-label i {
      transform:rotate(180deg);
      transition: transform 0.5s linear;
  }

  /* Active state of the submenu */
  input[type=checkbox]:checked ~ .nav-main__submenu {
    /* state */
    visibility:visible;
    opacity:1;
    height:auto;
    pointer-events: auto;
    padding-top: 20px;
    padding-bottom:20px;
    /* animation */
    transition: height 0ms 0ms, padding-top 0ms 0ms, padding-bottom 0ms 0ms, opacity 1s 0ms, visibility 1s 0ms; /* fade in: first 100% height, then opacity */
  }

}


/* ************************************* */
/* HOVER on desktop                      */
/* ************************************* */

@media only screen and (hover: hover) and (min-width: 768px) {

  /* Active state of the first level elements */
  .nav-main__list li:hover .submenu-toggle-label,
  .nav-main__list > li:hover,
  .nav-main__list > li > a:hover,
  .nav-main__list > li > a:hover ~ .submenu-toggle-label,
  .nav-main__list > li > a:hover ~ .nav-main__submenu,
  .nav-main__list .submenu-toggle-label:hover {
      color:var(--color-light);
      background-color: #6991aa;
  }

  .nav-main__list li:hover .submenu-toggle-label i {
      transform:rotate(180deg);
      transition: transform 0.5s linear;
  }

  /* Active state of the submenu */
  .nav-main__list li:hover .nav-main__submenu,
  .nav-main__list li a:hover ~ .nav-main__submenu,
  .nav-main__list > li > a:hover ~ .nav-main__submenu,
  .nav-main__list > li > .submenu-toggle-label:hover ~ .nav-main__submenu {
    /* state */
    visibility:visible;
    opacity:1;
    height:auto;
    overflow:hidden;
    pointer-events: auto;
    padding-top:20px;
    padding-bottom:20px;
    /* animation */
    transition: height 0ms 0ms, padding-top 0ms 0ms, padding-bottom 0ms 0ms, opacity 1s 0ms, visibility 1s 0ms; /* fade in: first 100% height, then opacity */
  }

}


/* Balken Navigation Shop */

ul.contentnavigation li.sidebar_btn {
  display: none;
}