/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { box-sizing:border-box; cursor:pointer; display:none; z-index:3000; position:relative; width:100%; height:50px; margin:auto; line-height:50px; color:#FFF; padding-left:60px; }
  .pancake:hover { background:#00408a; }
  .pancake .line-top { position:absolute; width:30px; height:4px; top:11px; left:10px; background:#FFF; }
  .pancake .line-middle { position:absolute; width:30px; height:4px; top:23px; left:10px; background:#FFF; }
  .pancake .line-bottom { position:absolute; width:30px; height:4px; bottom:11px; left:10px; background:#FFF; }

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


/* --------- Hauptnavigation -------------*/ 
#navigation { position:relative; z-index:1000; background:#00408a;  }
  #navigation .wrapper { background:none; padding:0; }

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

  /*------ 1. Ebene ----------------*/
  .mainnav ul.list1 { position:relative; display:flex; justify-content:space-between; }
  .mainnav li.level_1 { box-sizing:border-box; display:block; 
  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 > a { position:relative; z-index:500; font-weight:300; box-sizing:border-box; width:100%; line-height:40px; padding:5px 10px; color:#FFF; display:block; text-decoration:none; font-size:1.0rem; text-transform:uppercase; }
  .mainnav li.level_1:hover > a { background:#FFF !important; color:#00408a; padding-bottom:5px !important;  }
  .mainnav li.level_1.active > a { background:#FFF; color:#00408a; padding-bottom:2px; }
  
  .mainnav li.level_1:hover ul.list2 { height:auto; width:auto; opacity:1; }
  

  /*------ 2. Ebene ----------------*/
  .mainnav .list2 { min-width:350px; height:0; left:0; overflow:hidden; position:absolute; top:50px; opacity:0; z-index:300; display:flex; background:#FFF url('../Images/back_menu.jpg') center no-repeat; box-shadow: 0 0 10px #000; box-sizing:border-box;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }

  .mainnav li.level_2 { margin:20px 0; display:block; box-sizing:border-box; padding:0 20px; 
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -webkit-transition-delay:1s;
    transition-delay:1s;
  }
  .mainnav li.level_2 > a { position:relative; display:block; padding:5px; margin:0 0 10px; text-transform:uppercase; color:#009ee0; font-weight:700;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
  }
  .mainnav li.level_2 > a:hover { background:rgba(0,77,155,0.5); color:#FFF; }
  .mainnav li.level_2.active > a { background:rgba(0,77,155,0.7); color:#FFF; }
  
  
  /*------ 3. Ebene ----------------*/
  .mainnav .list3 { padding:0; display:block; }
  .mainnav li.level_3  { }
  .mainnav li.level_3 a { color:#00408a; font-size:1rem; line-height:140%; display:block; width:80%; padding-left:30px; position:relative; margin-bottom:15px; }
  .mainnav li.level_3 a:hover { background:rgba(0,77,155,0.5); color:#FFF; }
  .mainnav li.level_3.active > a { background:rgba(0,77,155,0.7); color:#FFF; }
  .mainnav .pfeil { width:12px; height:12px; position:absolute; left:10px; top:4px; background:#00408a; }
  .mainnav li.level_3 a:hover .pfeil { background:#FFF; }
  .mainnav li.level_3.active .pfeil { background:#FFF; }


  /*------ 3. Ebene ----------------*/
  .mainnav .list4 { padding:0 0 10px; margin-top:-10px; display:block; }
  .mainnav li.level_4  { }
  .mainnav li.level_4 a { line-height:120%; color:#00408a; font-size:0.8rem; display:block; padding:3px 0; padding-left:30px; position:relative; margin:3px 0; }
  .mainnav li.level_4 a:hover { background:rgba(0,77,155,0.5); color:#FFF; }
  .mainnav li.level_4.active > a { background:rgba(0,77,155,0.7); color:#FFF; }



/*------ Sonderfall Untermenü HOVADUR unter Legierungen & Halbzeuge  ----------------*/
  .mainnav li.level_1:first-child li.level_2:first-child li.level_3 { float:left; display:block; width:48%; padding-right:2%; }


/* Sonderfall beim letzten Hauptmenüpunkt: Rechtsbündig */
  .mainnav .list1 li:last-child .list2 { left:inherit; right:0; }


/* Sonderfall bei Hauptmenüpunkt 1 und 2:100% Breite */
  .mainnav .list1 li.level_1:nth-child(1), .mainnav .list1 li.level_1:nth-child(2) { position:static !important; }
  .mainnav .list1 li.level_1:nth-child(1) ul.list2, .mainnav .list1 li.level_1:nth-child(2) ul.list2 { width:100% !important; }
  .mainnav .list1 li.level_1:nth-child(2) ul.list2 { width:100% !important; flex-wrap:wrap; }
  .mainnav .list1 li.level_1:nth-child(2) ul.list2 > li { width:33%; }

/* Sonderfall bei Hauptmenüpunkt 3:100% Breite */
  .mainnav .list1 li.level_1:nth-child(3) ul.list2 { width:100% !important; display:block; }