/* Menu  © admotion*/

/* Infomenu */
#infos {background: #fff;}
#infos ul {display: flex; flex-wrap: wrap;justify-content: space-around;}
#infos img {width: 18px; padding-right: 7px;}
#infos a {color: black; font-size: 13px; text-align: center;}
#infos li {padding: 7px 0; }
#infos li:nth-child(1) {width: 60%;border-right: 1px solid var(--bg);border-bottom: 1px solid var(--bg);}
#infos li:nth-child(2) {width: 40%;border-bottom: 1px solid var(--bg);}
#infos li:nth-child(3) {width: 50%; border-right: 1px solid var(--bg);}
#infos li:nth-child(4) {width: 50%;}



/* Grundlayout des Hauptmenüs */
#menu { z-index: 998;  background: #fff; position: fixed; transition: 0.3s ease-out; top: 145px; width: calc(100% - 20px); transform: translateX(100vw);}
#menu.open {transform: translateX(0px)}
.scrolled #menu {top: 80px;}
#menu a {color: white;}

#mobile-info {padding: 20px;}
#menu #mobile-info a {color: var(--rot);}
  #menu ul.mod-menu__sub  ul li.active a {font-weight: 700;}

/* Farbzuweisungen für Hauptkategorien */
#menu .item-146 { background: var(--rot); }
#menu .item-147 { background: var(--orange); }
#menu .item-148 { background: var(--violett); }
#menu .item-149, #menu .item-150 { background: var(--grau); }

#menu .item-146 > ul {background: #ee6d63; color: white;}
#menu .item-147 > ul {background: #ffa04d; color: white;}
#menu .item-148 > ul {background: #a8549a; color: white;}
#menu .item-149 > ul {background: #bababa; color: white;}
#menu .item-150 > ul {background: #c3c3c3; color: white;}

#menu ul {list-style: none;}
  #menu > ul > li { position: relative; list-style: none; border-bottom: 1px solid var(--bg); text-align: left; }

  /* Hauptmenü-Header im Mobile */
  #menu > ul > li > .mod-menu__heading { padding: 15px 20px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; }

  /* Plus-Icon für Accordion */
  #menu > ul > li > .mod-menu__heading::after { content: "+"; font-size:2.5em; font-weight: 300; color: #fff; line-height: 0; margin-top: -4px; transition: transform 0.3s ease; }

  /* Wenn geöffnet */
  #menu > ul > li.open > .mod-menu__heading::after { content: "–";font-weight: 300; transform: rotate(180deg); margin-top: 4px;}

  /* Untermenü ausblenden */
  #menu ul.mod-menu__sub { display: none; position: static; padding: 20px; flex-direction: column; }

  /* Wenn Accordion geöffnet */
  #menu li.open > ul.mod-menu__sub,  #menu li.open > ul.mod-menu__sub ul { display: block; }

#menu li.parent > a {font-weight: 695;}
#menu ul.mod-menu__sub  ul {padding: 0;}
#menu ul.mod-menu__sub > li.parent {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--bg); }
#menu ul.mod-menu__sub > li.parent:last-child {padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0px solid var(--bg); }

#menu ul.mod-menu__sub  ul li a {padding: 7px 0 7px 35px; background: url(/images/_icons/arrow-r.svg) no-repeat center left; transition: 0.2s; display: block;}
#menu ul.mod-menu__sub  ul li a:hover {background: url(/images/_icons/arrow-r.svg) no-repeat center left 5px;}



/* Hamburger Menu */

#menu-small {
  width: 40px;
  height: 40px; background: var(--bg); z-index: 1000;
  position: relative; border: 1px solid var(--rot);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
.scrolled #menu-small {position: fixed; top: 20px; right: 20px;}

#menu-small span {
  display: block;
  position: absolute;
  height: 1px;
  width: 60%;
  background: var(--rot);
  border-radius: 0px;
  opacity: 1;
  left: 20%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#menu-small span:nth-child(1) {
  top: 10px;
}

#menu-small span:nth-child(2),#menu-small span:nth-child(3) {
  top: 19px;
}

#menu-small span:nth-child(4) {
  top: 28px;
}

#menu-small.open span:nth-child(1) {
  top: 19px;
  width: 0%;
  left: 50%;
}

#menu-small.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-small.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu-small.open span:nth-child(4) {
  top: 19px;
  width: 0%;
  left: 50%;
}

@media(min-width:768px) {
  #infos ul {display: flex; flex-wrap: wrap;justify-content: flex-end;}
  #infos img {margin-top: -3px;}
  #infos a {font-size: 14px; text-align: center;}
  #infos a:hover {color: var(--rot);}
  #infos li {padding: 7px 20px; }
  #infos li:nth-child(1) {width: auto;border-right: 1px solid var(--bg);border-bottom: 0px solid var(--bg);border-left: 1px solid var(--bg);}
  #infos li:nth-child(2) {width: auto;border-right: 1px solid var(--bg);border-bottom: 0px solid var(--bg);}
  #infos li:nth-child(3) {width: auto; border-right: 1px solid var(--bg);}
  #infos li:nth-child(4) {width: auto;}

  #menu {top: 122px;width: calc(100% - 50px); }
  
}
@media(min-width:1250px) {
   
  #menu-small { display: none; }
  #menu { z-index: 998;  background: none; top: 0; position: relative; transition: 0.3s ease-out; top: auto; width: auto; transform: translateX(0); margin-left: 20px; border-top: 1px solid var(--bg); }
  
  .scrolled #menu {position: fixed; top: -57px; right: 0;transition: 0.3s ease-out;}
  
  #mobile-info {display: none;}
  #menu ul.mod-menu {display: flex; justify-content: stretch; }
  #menu > ul > li > .mod-menu__heading::after { content: none; }
  #menu > ul > li.open > .mod-menu__heading::after { content: none;}

  #menu ul.mod-menu__sub  ul li a {padding: 11px 0 11px 35px; background: url(/images/_icons/arrow-r.svg) no-repeat center left; transition: 0.2s;}


  #menu .item-146, #menu .item-147, #menu .item-148, #menu .item-149, #menu .item-150 {width: 182px; border-left: 1px solid var(--bg); padding-top: 50px;font-size: 16px; transition: 0.2s;}
  #menu .item-146 { border-left: 0px solid var(--bg);}
  #menu ul.mod-menu__sub {position: absolute; width: 910px;}
  #menu ul.mod-menu__sub ul.mod-menu__sub {position: relative; width: auto; }
  #menu li.open > ul.mod-menu__sub {display: flex; flex-direction: row;border-top: 1px solid var(--bg);}
  #menu li.open > ul.mod-menu__sub > li {border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
  #menu li.open > ul.mod-menu__sub > li:nth-child(1) {min-width: 30%; padding-right: 20px; border-right: 1px solid white;}
  #menu li.open > ul.mod-menu__sub > li:nth-child(2) {min-width: 30%; padding-left: 20px; padding-right: 20px; border-right: 1px solid white;}
  #menu li.open > ul.mod-menu__sub > li:nth-child(3) {min-width: 30%; padding-left: 20px;}
  #menu li.open > ul.mod-menu__sub > li:last-child {width: auto; padding-left: 20px; border-right: 0; padding-right: 0;}
  #menu li.open > ul.mod-menu__sub ul { display: block; }

  
  #menu .item-147 > ul.mod-menu__sub {margin-left: -183px;}
  #menu .item-148 > ul.mod-menu__sub {margin-left: -365px;}
  #menu .item-149 > ul.mod-menu__sub {margin-left: -547px;}
  #menu .item-150 > ul.mod-menu__sub {margin-left: -729px;}
  
}
@media(min-width:1550px) {
  #menu .item-146, #menu .item-147, #menu .item-148, #menu .item-149, #menu .item-150 {width: 220px; font-size: 18px; cursor: pointer;}
  #menu ul.mod-menu__sub {width: 1100px;}
  #menu li.open > ul.mod-menu__sub > li:nth-child(1) {min-width: 200px; }
  #menu li.open > ul.mod-menu__sub > li:nth-child(2) {min-width: 220px;}

  #menu .item-147 > ul.mod-menu__sub {margin-left: -221px;}
  #menu .item-148 > ul.mod-menu__sub {margin-left: -441px;}
  #menu .item-149 > ul.mod-menu__sub {margin-left: -661px;}
  #menu .item-150 > ul.mod-menu__sub {margin-left: -881px;}
}
@media(min-width:1850px) {
  #menu .item-146, #menu .item-147, #menu .item-148, #menu .item-149, #menu .item-150 {width: 255px;}
  #menu ul.mod-menu__sub {width: 1275px;}
  #menu li.open > ul.mod-menu__sub > li:nth-child(1) {min-width: 235px; }
  #menu li.open > ul.mod-menu__sub > li:nth-child(2) {min-width: 255px;}

  #menu .item-147 > ul.mod-menu__sub {margin-left: -256px;}
  #menu .item-148 > ul.mod-menu__sub {margin-left: -511px;}
  #menu .item-149 > ul.mod-menu__sub {margin-left: -766px;}
  #menu .item-150 > ul.mod-menu__sub {margin-left: -1021px;}
}