/* Menü Styles    menu.css */




#menu {background: transparent}

#menu:popover-open ~ #burger .burger.button:focus-within:before{content: "\f1dd";}/* X statt Burger Icon */
#menu:popover-open {background: var(--nb-bg-color); width:100%; height:100%; max-width: 100%; border: none; padding: 3.5rem 0 0;}

#menu ul{margin:0; padding: 0 1rem;}

#menu ul ul{display:none; padding:0; margin: 0 0 1rem 1rem;}
.mod_mainmenu ul li{display:block; float:none; padding:0; position: relative;}

#menu ul ul:not(.sublevel){display:block;}

#menu ul li.active_menu, #menu ul li.open_menu {background-color: var(--nb-color);}
#menu ul li.active_menu > a, #menu ul li.active_menu > a + button.button,
#menu ul li.open_menu > a, #menu ul li.open_menu > a + button.button {color: var(--nb-bg-color)}
#menu ul li.active_menu > a:where(:hover, :focus, :active),
#menu ul li.open_menu > a:where(:hover, :focus, :active) {outline-color: var(--nb-bg-color); outline-offset: -5px;}
#menu ul li.active_menu > button:where(:hover, :focus, :active),
#menu ul li.open_menu > button:where(:hover, :focus, :active) {outline-color: var(--nb-bg-color); outline-offset: -2px;}



:root {--burger-a-width: 10rem;}

#menu ul a{
  position: relative; z-index: 20;
    display: inline-block;
    width: calc(100% - 24px);
    padding: .6rem .2rem .6rem .6rem;
    margin: 0;
    white-space: wrap;
    vertical-align: middle;
    font-size: var(--nb-font-size);
}
 /*#menu ul li.has-sublevel > a{
 width: calc(100% - 48px );
  margin-right: 8px;}*/
#menu ul.sublevel li.has-sublevel > a {
  padding: .4rem .4rem;

  width: calc(100% - 40px ); margin: .2rem 8px .2rem 0;
}

/* Buttons für Sublevels */
#menu li.has-sublevel button.button, .mod_mainmenu li.has-sublevel button.button {
  display:inline; float:none; line-height: 24px;
  width:24px; height:24px; margin:0; padding: 0;
  vertical-align: center; color: var(--nb-color);
}
/* Right-Arrow für Sublevel-Einträge mit Untermenü */
#menu li.has-sublevel button.button:after, .mod_mainmenu li.has-sublevel button.button:after {
  display:inline-block; width:24px; height:24px;
  line-height: 24px; /*color: var(--nb-color);*/
  vertical-align: bottom; text-align: right;
  font: var(--nb-arrow-font); content: var(--nb-right-arrow);
  position: relative; top:.25rem;
}

#menu ul.sublevel {
  position: relative; left: 0; top: 0; padding-left: 3rem; margin-left: 0;
    width: calc(100% - 8px); /**/
    visibility: hidden; opacity: 0;
    background: var(--nb-light-color); z-index: 15;
}
#menu ul.sublevel.level-2 {background: var(--nb-bright-color); color:var(--nb-dark-color); width: 100%;}

#menu ul.sublevel a{z-index: 15;}
#menu ul.sublevel.level-2 a{z-index: 10; width:calc(100% - 0px);}


#menu:popover-open li:not(.hide-sublevel):active > ul,
#menu:popover-open li:not(.hide-sublevel):focus-within > ul,
.mod_mainmenu li:not(.hide-sublevel):active > ul,
.mod_mainmenu li:not(.hide-sublevel):focus-within > ul
{
  display: inline-block;
  visibility: visible;
  opacity: 1;
  z-index: 10;
}


@media only screen and (min-width : 52.5rem){ /* Border White */

  #header-row a.button {margin-top:0}
  #burger {display: none;}

  #menu .close.button {display: none;}

  #menu ul {margin:0; padding:0; font-size: 0; line-height: 0; background:var(--nb-light-color)}/* kein "Leerraum" zwischen li " */
  #menu ul li {display:inline-block; line-height: 0;} /* margin-right: .5rem */


  /* Toplevel */
  #menu > ul {padding: 0;}
  #menu > ul > li{margin: 0 .6rem 0 0;}
  #menu > ul > li:first-of-type{margin-left: .4rem;}
  #menu > ul > li:last-of-type{margin-right: 0;}


  /* Sublevel */
  :root {--sublevel-width: 12rem;}

  #menu ul.sublevel, .mod_mainmenu ul.sublevel.level-2 {
    position: absolute; left: -.4rem; top: 34px;
    width: var(--sublevel-width); max-width: var(--sublevel-width); margin:0; padding: 0;
    visibility: hidden; opacity: 0;
    z-index: 15;
    background: var(--nb-white-color);    /*var(--nb-light-color);*/
    border: 1px solid var(--nb-bright-color);
  }
  #menu ul.sublevel.level-2, .mod_mainmenu ul.sublevel.level-2 {
    z-index: 10;
    color: var(--nb-dark-color);
    background: var(--nb-light-color);
    border: 1px solid var(--nb-medium-color);
  }
  .mod_mainmenu ul.sublevel.level-2 {/*visibility: visible; opacity: 1;*/

    top:0; left:100%;
  }


  #menu ul.sublevel li{z-index: 15;}
  #menu ul.sublevel li:first-of-type ul.sublevel.level-2 {top:-1px}

  #menu ul a {outline-offset: 0; font-size: var(--nb-font-size-small);}

  #menu > ul li.has-sublevel > a {
    /*background:lime;*/
    display: inline-block; width: auto;
    padding: .6rem .4rem; margin:0; /*   */
    white-space: wrap;
    }


  #menu li:hover > ul,
  #menu li:active > ul,
  #menu li:focus-within > ul, /* IE11+ only */
  .mod_mainmenu li:hover > ul.sublevel.level-2,
  .mod_mainmenu li:active > ul.sublevel.level-2,
  .mod_mainmenu li:focus-within > ul.sublevel.level-2 {
    display: block;
    visibility: visible;
    opacity: 1;
  }
  #menu ul.sublevel > li, .mod_mainmenu ul.sublevel.level-2 > li {display:block; padding: 0  .6rem}

  #menu ul.sublevel > li:not(.has-sublevel) > a, .mod_mainmenu ul.sublevel > li:not(.has-sublevel) > a {display:block;}
  .mod_mainmenu ul.sublevel > li:not(.has-sublevel) > a.icon-mail {display:inline-block;}
  #menu ul.sublevel > li.has-sublevel > a {display:inline-block; width:calc(100% - 1.2rem - 12px);}
  .mod_mainmenu ul.sublevel > li.has-sublevel > a {display:inline-block; width:calc(100% - 24px);}

  #menu ul.sublevel > li > ul {left: calc(100% + 0px); top: 0;}
  #menu ul.sublevel.level-2 > li {width:100%;}


  /* Down-Arrow für Toplevel-Einträge mit Untermenü */
  #menu > ul > li.has-sublevel > button.button:after {
    font: var(--nb-arrow-font); content: var(--nb-down-arrow);
    position: relative; top:.25rem;
    z-index: 20; text-align: center;
  }
}