/* menu.css - Das Mainmenu inkl. Topmenu, Popups und Mobile Menu */
/* As of now: Including skipmenu!*/

#skipnavi {
  position: absolute;
  top: -50px;
  z-index: 1;
}

@media (max-width: 475px) {
  #skipnavi {
    top: -80px;
  }
}

#skipnavi ul {
  padding-left: 0;
}

#skipnavi li {
  float: left;
  display: inline;
}

#skipnavi li a {
  color: white;
}

#skipnavi li + li {
  margin-left: 16px;
}


#main-menu {
  clear: both;
  margin-top: 5px;
}
#main-menu ul {
  margin-bottom: 0px;
  padding-left: 0px;  
  list-style: none;
}
#menu-top a, .menu-popup a {
  color: black;
  text-decoration: none;
}
#menu-top a:hover, .menu-popups a:hover {
}

/* Menu Toolbar (Mobile, sichtbar unter 992px) */

#menu-toolbar {
  position: absolute;
  display: none;
  height: 45px;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffffff;
  border-bottom: 7px solid;
}
#menu-toolbar .pagetitle {
  margin-left: 51px;
  position: relative;
  top: 12px;
  color: #ddd;
  font-weight: bold;
  font-size: 18px;
  /* Simple solution for too long page titles (hjl) */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#menu-toolbar .icon-lock, #menu-toolbar .icon-search {
  position: absolute;
  right: 0;
  padding: 0px 12px;
  height: 100%;
  border-left: 1px solid #999;
}
#my-bsag-lock {
   position: absolute;
   right: 48px;
   height: 100%;
}
#menu-toolbar .icon-lock::before, #menu-toolbar .icon-search::before {
  top: 8px;
  margin-right: 0;
  color: #ccc;
  font-size: 24px;
}

/* 1. Ebene (Topmenu) */

#main-menu ul.level-1 {
  margin: 0 0 2px 0;
  height: 37px;
}
#main-menu a.level-1 {
  display: block;
  text-align: center;
  font-weight: bold;
  color: white;
  padding: 9px 0 9px;
}
#main-menu li.level-1 {
  position: relative;
  z-index: 5;
  height: 39px;
  padding-left: 0px;
  padding-right: 0px;
  background: rgb(68,90,96); /* Old browsers */
  background: -moz-linear-gradient(bottom, rgba(34,44,50,1) 0%, rgba(67,89,95,1) 64%, rgba(68,90,96,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(34,44,50,1)), color-stop(64%,rgba(67,89,95,1)), color-stop(100%,rgba(68,90,96,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(bottom, rgba(34,44,50,1) 0%,rgba(67,89,95,1) 64%,rgba(68,90,96,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(bottom, rgba(34,44,50,1) 0%,rgba(67,89,95,1) 64%,rgba(68,90,96,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(bottom, rgba(34,44,50,1) 0%,rgba(67,89,95,1) 64%,rgba(68,90,96,1) 100%); /* IE10+ */
  background: linear-gradient(to top, rgba(34,44,50,1) 0%,rgba(67,89,95,1) 64%,rgba(68,90,96,1) 100%); /* W3C */
}
#main-menu li.level-1:hover, #main-menu li.level-1.current-area, #main-menu li.level-1.open {
  height: 51px;
}
#main-menu #menu-top.area-open li.level-1:not(.open) {
  height: 39px;
}
#main-menu li.level-1:not(:last-child):not(.current-area):not(:hover):not(.open) {
  border-right: 1px solid #aaa;
}
#main-menu li.level-1:not(:first-child):not(.current-area):not(:hover):not(.open) {
  border-left: 1px solid black;
}
#main-menu a.level-1:hover, #main-menu li.level-1.current-area > a, #main-menu li.level-1.open > a {
  height: 100%;
  color: black;
}
#menu-top .area-open li.level-1:not(.open) {
  opacity: 0.5;
}
#menu-top {
  border-bottom: 12px solid #E3001B;
  z-index: 3;
  position: relative;
}
#menu-top.area-open li.level-1:not(.open) {
  opacity: 0.3;
}


/* 2. + 3. Ebene (Popup-Menu) */

.menu-popup {
  display: none;
  position: absolute;
  z-index: 11;
  width: 100%;
  min-height: 360px;
  padding-bottom: 80px;
  background: white;
  /*border-top: 10px solid #ccc;*/
}
.menu-popup.open {
  display: block;
}
.menu-popup .level-root {
  display: none;
}

.menu-popup li.level-2 > .level-column-inner:after {
  content: "";
  border-top: 1px dotted #000000;
  position: absolute;
  top: 0px;
  left: 8px;
  /*width: 92%;*/
  width: calc(100% - 27px);
}

.menu-popup ul.level-2 {
  margin-left: 0;
  margin-right: 0;
  margin-top: 13px;
  font-size: 15px;
}
.menu-popup li.level-2 {
  padding-left: 8px;
}
.menu-popup li.level-2 > .level-column-inner {
  padding-right: 9px;
}
#main-menu .menu-popup a:hover {
  text-decoration: underline; 
}
.menu-popup a.level-2.level-header {
  text-transform: uppercase;
  margin: 10px 0px 9px;
  display: block;
  font-size: 19px;
  font-weight: bold;
}

/*a.level-image-link > img {*/
  /*padding-right: 3px;*/
/*}*/

.menu-popup a.level-3 {
  display: block;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 0 10px 16px;
  border-bottom: 1px dotted gray;
  margin-left: -2px;
}
.menu-popup a.level-3 > span {
  position: absolute;
  left: 5px;
}
.menu-popup a.level-3 > span,
.menu-popup .level-footer > span
{
  font-size: 14px;
  margin-right: -4px;
}
.menu-popup a.level-3 > span:before,
.menu-popup .level-footer > span:before
{
  top: -2px;
}
.menu-popup .level-footer-wrap {
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
  margin: 20px 10px -3px 7px;
  padding: 7px 0px 6px 0px;
  border-top: 1px dotted black;
  border-bottom: 1px dotted black;
}
.menu-popup .level-footer {
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
}
.menu-popup .close-popup {
  font-weight: bold;
  font-size: 15px;
  float: right;  
}

@media (min-width: 992px) {
  #main-menu .level-2 {
    display: flex !important;
  }
  /* Page Shadow einblenden, wenn Popup offen */
  .menu-open #page-shadow {
    display: block;
  }
}


#menu-button {
  padding-left: 9px;
  padding-top: 7px;
  height: 100%;
  width: 42px !important;
  min-width: 42px !important;
  font-size: 23px;
  color: #ffffff;
  cursor: pointer;
  border-right: 1px solid #999;
}

#menu-top {
  font-size: 19px;
}

/* Mainmenu for Medium sized / Small Desktops/Notebooks */

@media (max-width: 1175px) and (min-width: 992px) {
  .menu-popup a.level-2.level-header {
    min-height: 56px;
  }
}

/* Mobile Mainmenu */

@media (min-width: 992px) {

  #menu-popups {
    display: block !important;
  }
  #menu-popups .menu-popup[data-children="0"] {
    display: none !important;
  }
  #menu-top > .level-1 > li:first-child {
    border-top-left-radius: 2px;
  }
  #menu-top > .level-1 > li:last-child {
    border-top-right-radius: 2px;
  }

}


@media (max-width: 991px) {

  /* Page Shadow einblenden, wenn Popup offen */
  .mobile-menu-open #page-shadow {
    display: block;
  }

  #menu-top { display: none !important; }

  #menu-toolbar {
    display: flex;

    background: rgb(68,90,96); /* Old browsers */
    background: -moz-linear-gradient(bottom, rgba(68,90,96,1) 0%, rgba(67,89,95,1) 36%, rgba(34,44,50,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(68,90,96,1)), color-stop(36%,rgba(67,89,95,1)), color-stop(100%,rgba(34,44,50,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(bottom, rgba(68,90,96,1) 0%,rgba(67,89,95,1) 36%,rgba(34,44,50,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(bottom, rgba(68,90,96,1) 0%,rgba(67,89,95,1) 36%,rgba(34,44,50,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(bottom, rgba(68,90,96,1) 0%,rgba(67,89,95,1) 36%,rgba(34,44,50,1) 100%); /* IE10+ */
    background: linear-gradient(to top, rgba(68,90,96,1) 0%,rgba(67,89,95,1) 36%,rgba(34,44,50,1) 100%); /* W3C */
  }

  #menu-toolbar .pagetitle {
    margin-right: 105px;
  }

  #menu-popups {
    display: flex;
    flex-wrap: wrap;
    position: absolute;    
    width: 100%;
    right: 0%;
    margin-top: 50px;  
  }

  .menu-popup {
    display: block;
    position: static;
    min-height: 0;
    padding-bottom: 0;
  }
  .menu-popup .level-root {
    display: block;
    padding: 0px 10px;
  }
  .menu-popup .level-root > a {
    padding: 12px 0px 8px;
    font-weight: bold;
    font-size: 15px;
    display: block;
    border-top: 1px dotted black;
  }
  .menu-popup:first-child .level-root > a {
    border-top: none;
  }
  #main-menu .menu-popup ul.level-2 {
    margin-top: 0px;
    display: none;
  }
  .menu-popup a.level-2 {
    color: #333 !important;
    font-weight: normal !important;
  }
  .menu-popup a.level-2.level-header {
    display: block;
    text-transform: none;
    padding: 11px 0px 9px 15px;
    margin: 0;
    font-size: 15px;
  }
  .menu-popup a.level-2.level-header:not(.has-subpages) {
    padding-left: 36px;
  }
  .menu-popup .icon-toggle-submenu {
    display: inline-block;
    font-size: 4px;
    margin-right: 0px;
    width: 10px;
    height: 10px;
    padding: 15px 35px 25px 0px;
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .menu-popup .item-title:first-child {
    padding-left: 35px;
  }
  .menu-popup .icon-toggle-submenu:before {
    content: '\e802';
    font-size: 16px;
    bottom: 1px;
  }
  .menu-popup .icon-toggle-submenu.submenu-open:before {
    transform: rotate(90deg);
  }
  .menu-popup ul.level-3.open > li:first-child > a {
    border-top: 1px dotted;
  }
  .menu-popup ul.level-3.open > li:last-child > a {
    border-bottom: none;
  }
  .menu-popup a.level-3 {
    font-weight: normal;
    font-size: 15px;
    padding-left: 55px;
    color: #444;
  }
  #menu-popups,
  .menu-popup .level-footer,
  .menu-popup .level-footer-wrap,
  .menu-popup .level-image-link,
  #main-menu ul.level-3,
  .menu-popup a.level-3 .icon-arrow_right
  {
    display: none;
  }

  .menu-popup .level-root > a,
  .menu-popup a.level-2.level-header,
  .menu-popup a.level-3
  {
    font-size: 18px;
  }

  a[href$="linien-und-fahrplaene/"] {
    display: none !important;
  }
} /* max-width: 991px */

@media (max-width: 767px) {
  #menu-popups {
    left: 0;
  }
  #menu-toolbar .pagetitle {
    /* margin-left: 15px; */
  }
}
@media (max-width: 400px) {
  #menu-toolbar .pagetitle {
    margin-left: 15px;
  }
}

/* IT0881 Hide Aktuelles Popup-Menu */
@media (min-width: 992px) {
.menu-popup.area-aktuelles {
  display: none;
}
}