/* =================================
   Dropdown Navigation mit HOVER INTENT per CSS (left + transition-delay)
   Ggf. Steuerung per JS -> #ddnav bind click + lang chooser #lang-chooser, .lang-box (sup)
   ================================= */
.ddnav-container {
  top: 80px;
  right: 5px;
  position: absolute;
}

.lvl-1.home img {
  width: 22px;
  vertical-align: baseline;
}

#ddnav ul, #ddnav li, #ddnav a {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  line-height: 4rem;
  color: #4a4b4d;
}

#ddnav > ul {
  display: flex;
}

#ddnav li {
  position: relative;
  white-space: nowrap;
}

#ddnav > ul > li {
  /*position: relative;*/
  /*flex: 1 1 auto;*/
  text-align: center;
}

#ddnav a {
  display: block;
  padding: 0px 15px 0px 15px;
}

/* =================================
   LVL 1
   ================================= */
#ddnav .lvl-1.active, #ddnav .lvl-1, #ddnav .lvl-1.inpath {

}

#ddnav > ul > li:last-child {

}

#ddnav .lvl-1 {

}

#ddnav .lvl-1.active {

}

#ddnav .lvl-1.inpath {

}

#ddnav .lvl-1:hover > a {
  color: #a7a0a5;
}

/* =================================
   LVL 2
   ================================= */
#ddnav ul ul li {
  background: rgba(237, 236, 237, 0.81);
  float: none;
  display: block; /*min-width: 180px;*/
}

#ddnav .lvl-2.active, #ddnav .lvl-2, #ddnav .lvl-2.inpath {
  text-align: left;
}

#ddnav .lvl-2:hover > a {
  color: #c10936;
}

#ddnav .lvl-2.active a.l-2 {
  color: #c10936;
}

#ddnav .lvl-2.inpath a.l-2 {
  color: #c10936;
}

/* =================================
   LVL 3
   ================================= */

#ddnav ul ul ul li {
  background: rgba(237, 236, 237, 0.81);
  float: none;
  display: block; /*min-width: 180px;*/
  margin-left:1px;
}

#ddnav .lvl-3.active, #ddnav .lvl-2, #ddnav .lvl-2.inpath {
  text-align: left;
}

#ddnav .lvl-3:hover > a.l-3 {
  color: #c10936;
}

#ddnav .lvl-3.active a.l-3 {
  color: #c10936;
}

#ddnav .lvl-3.inpath a.l-3 {
  color: #c10936;
}

/* =================================
   HOVER INTENT - KEEP AT LAST POS
   ================================= */
#ddnav ul li:hover, #ddnav li.active > a, #ddnav li.active:hover > a, #ddnav li.inpath > a,  #ddnav li.inpath:hover > a {

  color: #c10936;
}

#ddnav ul ul {
  position: absolute;
  left: -9999px;
  /*display:none;*/
  /*margin-top: 40px; !* line - height? *!*/
  z-index: 999;
  -webkit-transition: all 0s ease;
  transition: all 0s ease;

  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;

  opacity: 0;
}

#ddnav ul ul ul {
  position: absolute;
  left: -9999px;
  /*display:none;*/
  margin-top: -30px;
  /*margin-left: 180px;*/
  z-index: 999;
  opacity: 0;
}

#ddnav li:hover > ul {
  left: inherit;
  /*display:block;*/
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
  opacity: 1;
}

#ddnav ul ul li:hover > ul {
  /*left: auto;*/
  /*right: -150px;
  width: 150px;
  transform: translate(0, -10px);*/

  width: auto;
  transform: translate(0, -10px);
  left:100%;

  -webkit-transition-delay: .25s;
  transition-delay: .25s;
  opacity: 1;
}


#ddnav ul ul ul li:hover > ul {
  width: auto;
  transform: translate(0, -10px);
  left:100%;
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
  opacity: 1;
}

.lvl-2.hco > a:before {
   content:"";
   background: url(/layout/icon-pfeil-3.svg) no-repeat 10px 14px / 7px auto;
   display: block;
   position: absolute;
   right:10px;
   width:20px;
   height:30px;
   /*padding-left:10px;*/
 }
.lvl-2.hco a.l-2 {
  padding-right:30px !important;
}

.lvl-3.hco > a:before {
  content:"";
  background: url(/layout/icon-pfeil-3.svg) no-repeat 10px 14px / 7px auto;
  display: block;
  position: absolute;
  right:10px;
  width:20px;
  height:30px;
  /*padding-left:10px;*/
}
.lvl-3.hco a.l-3 {
  padding-right:30px !important;
}