/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { cursor:pointer; display:none; z-index:3000; position:relative; width:50px; height:50px; background:#FFF; }
  .fixed .pancake { right:5px; }
  .pancake .line-top { position:absolute; width:30px; height:4px; top:11px; left:10px; background:#000; }
  .pancake .line-middle { position:absolute; width:30px; height:4px; top:23px; left:10px; background:#000; }
  .pancake .line-bottom { position:absolute; width:30px; height:4px; bottom:11px; left:10px; background:#000; }
  .pancake:hover .line-top,
  .pancake:hover .line-middle,
  .pancake:hover .line-bottom { background:#206eff; }

  .pancake.active { }
  .pancake.active .line-top { transform:rotate(-45deg); top:23px; background:#206eff; }
  .pancake.active .line-middle { display:none; }
  .pancake.active .line-bottom { transform:rotate(45deg); bottom:23px; background:#206eff; }


/* --------- Hauptnavigation -------------*/ 
.navigation { padding:0; margin-left:2%; font-weight: 500; margin-right: 21%; position:relative;  z-index: 300; }
.navigation.move { margin-right: 0; }

  .mainnav { width:100%; position:relative; box-sizing:border-box; }
  .mainnav ul { margin:0; padding:0; list-style:none; }
  .mainnav li { position:relative; }
  .mainnav li a { display:block; text-decoration:none; text-transform:uppercase;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
  }

  /*------ 1. Ebene ----------------*/
  .mainnav ul.list1 { position:relative; display:flex; }
  .mainnav li.level_1 { box-sizing:border-box; display:block; margin:0 30px;
    transition: all 0.4s ease-in 0s; /* explorer 10 */
    -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
    -moz-transition: all 0.4s ease-in 0s; /* firefox */
    -o-transition: all 0.4s ease-in 0s; /* opera */
  }
  .mainnav li.level_1:last-child { margin-right:0;  }
  .mainnav li.level_1:first-child { margin-left:0; }
  .mainnav li.level_1 > a { white-space: nowrap; position:relative; box-sizing:border-box; width:100%; line-height:20px; padding:30px 0; color:#354147; display:block; text-decoration:none; font-size:22px; line-height: 100%; font-weight:300; letter-spacing: .1em; }
  .mainnav li.level_1:hover > a { color:#206eff;   }
  .mainnav li.level_1.active > a { color:#206eff; }
  
  .mainnav li.level_1:hover > div.list2 {  opacity:1; z-index:400; height: auto; width: auto;}

  /*------ 2. Ebene ----------------*/
  .mainnav .list2 { height:0; width:auto; overflow:hidden; position:absolute; left:-20px; top:50px; opacity:0; z-index:300; box-sizing:border-box; 
    transition: all 1s ease-in 0s; /* explorer 10 */
    -webkit-transition: all 1s ease-in 0s; /* chrome & safari */
    -moz-transition: all 1s ease-in 0s; /* firefox */
    -o-transition: all 1s ease-in 0s; /* opera */
  }

  .mainnav .list2-inner { box-sizing:border-box; display:flex; flex-direction: column; margin:60px 0 40px; padding:30px 50px;
    background: rgba(53,65,71,1);
    background: -moz-linear-gradient(top, rgba(53,65,71,1) 0%, rgba(21,28,31,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(53,65,71,1)), color-stop(100%, rgba(21,28,31,1)));
    background: -webkit-linear-gradient(top, #354147 0%, rgba(21,28,31,1) 100%);
    background: -o-linear-gradient(top, rgba(53,65,71,1) 0%, rgba(21,28,31,1) 100%);
    background: -ms-linear-gradient(top, rgba(53,65,71,1) 0%, rgba(21,28,31,1) 100%);
    background: linear-gradient(to bottom, rgba(53,65,71,1) 0%, rgba(21,28,31,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#354147', endColorstr='#151c1f', GradientType=0 );
  }

  .mainnav li.level_2 { margin:15px 20px; display:block; box-sizing:border-box; padding:0; 
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -webkit-transition-delay:1s;
    transition-delay:1s;
  }
  .mainnav li.level_2 > a { white-space: nowrap; font-size:0.8em; font-weight:300; position:relative; display:block; color:#FFF; line-height:100%; padding:7px 0;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }
  .mainnav li.level_2 > a:hover { color:#206eff; }
  .mainnav li.level_2.active > a { color:#206eff; }
  

  /*
  .mainnav li.level_1 { clip-path: polygon(10px 0%, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%); background:#FFF;  }
  .mainnav li.level_1 > a { background:lime; clip-path: polygon(10px 0%, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);  margin:1px; width:calc(100% - 2px); line-height:20px; padding:10px 20px; }
  */