nav.main-nav{font-family:var(--f-family-nav);opacity:0; max-height: 0;transition: all 0.5s ease-in-out;overflow: hidden;}
input.menu-btn{display:none;}

.menu-icon {cursor: pointer;user-select: none;}
.menu-icon .nav-icon {
  background:var(--c-f-header);
  display: block;
  height: 2px;
  position: relative;
  transition: background-color .2s ease-out;
  width: calc(var(--gap-body)*2);
}

.menu-icon .nav-icon:before,
.menu-icon .nav-icon:after {
  background-color:var(--c-f-header);
  content: '';
  display: block;
  height: 100%;  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
}
.menu-icon .nav-icon:before {top: calc(var(--gap-body)/2);}
.menu-icon .nav-icon:after {top: calc(var(--gap-body)/2*-1);}
.menu-btn:checked ~ .menu-icon .nav-icon {background: transparent;}
.menu-btn:checked ~ .menu-icon .nav-icon:before {transform: rotate(-45deg); top:0;}
.menu-btn:checked ~ .menu-icon .nav-icon:after {transform: rotate(45deg); top:0;}
.menu-btn:checked ~ nav {opacity: 1;max-height:calc(100vh - 3rem);}
#menu{overflow-y: hidden;}
#menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}


#menu > li{cursor: pointer;}
#menu > li a{color:var(--c-f-header);padding:var(--gap-body);display:block;background-color:var(--c-bg-nav);}
#menu > li a:hover, #menu li:hover, #menu > label.toggle:hover{box-shadow:inset 0 0 0 720px rgba(0, 0, 0, 0.2);background-color:var(--c-bg-nav);}
#menu li ul li a{margin-left:var(--gap-body);margin-bottom:1px;padding:var(--gap-body);background-color:var(--c-bg-nav-contrast); color:var(--c-f-nav);display:block;}
#menu li ul li:nth-last-child(1) {border-bottom:var(--gap-body) solid var(--c-bg-header);}
#menu label.toggle{display:block;background-color:var(--c-bg-nav);padding:var(--gap-body);cursor: pointer;}
#menu li ul{background-color:var(--c-bg-header);list-style-type:none;}

[id^=drop]{display: none;}
[id^=drop]+ul{visibility:hidden;opacity: 0;max-height:0;transition: all 0.3s ease-in-out}
[id^=drop]:checked+ul {visibility:visible;opacity: 1;max-height: 500px;}


/* SUB MENU */
/*.sub-nav{top:-1px;}*/
/*.sub-nav ul{top:0;}*/
#sub{overflow-y: hidden;padding: 0;width: 100%;}
.sub-nav{font-family:var(--f-family-nav); color: var(--c-f-header);background:var(--c-bg-nav-sub);
  position: sticky; top:calc(var(--gap-body)*4.5);z-index: 50;
  border-top: 1px solid var(--c-bg-body);
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;}
/* sub menu icon */
.sub-nav .sub-icon, .sub-icon-close {
  cursor: pointer;
  float: right;
  user-select: none;
}
label.sub-icon{display:flex;justify-content: space-between; align-items: center;float:none;padding: var(--gap-body);}
.sub-nav .sub-icon .nav-icon, .sub-icon-close .nav-icon {
  background: var(--c-bg-body);
  display: block;
  height: 2px; width: 23px;
  position: relative;
  transition: background-color .2s ease-out;
}
.sub-icon-close .nav-icon{background: transparent;}

.sub-nav .sub-icon .nav-icon:before,
.sub-nav .sub-icon .nav-icon:after,
.sub-icon-close .nav-icon:before,
.sub-icon-close .nav-icon:after {
  background: var(--c-bg-body);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.sub-nav .sub-icon .nav-icon:before {top: 7px;}
.sub-nav .sub-icon .nav-icon:after {top: -7px;}
.sub-icon-close .nav-icon:before {transform: rotate(-45deg); top:0;}
.sub-icon-close .nav-icon:after {transform: rotate(45deg); top:0;}
/* sub menu btn */

.sub-nav .sub-btn {display: none;}
.sub-nav .sub-btn:checked ~ #sub {
  max-height: calc(100vh - 45px);
  margin-bottom: 45px;
  overflow-y: auto;
  opacity: 1;
}

.sub-nav .sub-btn:checked ~ .sub-icon .nav-icon {background: transparent;}
.sub-nav .sub-btn:checked ~ .sub-icon .nav-icon:before {transform: rotate(-45deg); top:0;}
.sub-nav .sub-btn:checked ~ .sub-icon .nav-icon:after {transform: rotate(45deg); top:0;}

.sub-nav ul{clear:both;background-color: var(--highlight-default-color);transition: all 0.5s ease-in-out;margin-block-end: 0;list-style: none;max-height: 0;opacity: 0;/*height:100vh; position:fixed;top:45px;*/}

.sub-nav a, .toggle {
    display: block;border-top: 1px solid var(--highlight-default-color);
    padding: var(--gap-body);
    color: var(--main-text-color);
    text-decoration: none;
    background-color: var(--c-bg-nav);
    cursor: pointer;
    }
.sub-nav li{padding-bottom: 1px;margin: 0;}
.sub-nav li.selected {background-color: var(--c-bg-nav-contrast);padding: var(--gap-body);color: var(--c-f-body);}
.sub-nav a.selected {background-color: var(--c-bg-nav-contrast);color: var(--c-f-body);}
.sub-nav a:hover, .toggle:hover{box-shadow:inset 0 0 0 720px rgba(0, 0, 0, 0.7);transition: all 0.5s linear;}
.sub-nav .toggle + a{display: none;}



/* Desktop-Ansicht */
@media (min-width: 740px) {
  .menu-icon {display: none;}
  nav.main-nav {display: block;opacity: 1;overflow:visible;}
  #menu{flex-direction:row;}
  #menu > li{flex:1;background-color:var(--c-bg-nav);}
  #menu > li label.toggle{pointer-events:none;background-color: transparent;}
  #menu > li:hover > ul{visibility: visible;opacity: 1;}
  #menu > li ul{position:absolute;background-color: var(--c-bg-body);}
  #menu li ul li a{margin-left:0;min-width: 120px;display:block;margin:0;border-bottom: 1px solid var(--c-bg-body);}
  #menu li ul li:nth-last-child(1) { border-bottom: initial;}
  #menu > li ul li a:hover{box-shadow:inset 0 0 0 720px rgba(0, 0, 0, 0.2);background-color:var(--c-bg-nav-contrast);}
  .sub-nav{top:-1px;}
}