#navigation { width:100%; position:fixed; top:0; left:0; z-index: 1000; background: rgba(0,0,0,0.7); }
#navigation .wrapper { display:flex; }


/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { display:none; cursor:pointer; z-index:3000; position:relative; margin-top:20px; margin-bottom:20px; width:60px; height:60px; background:#FFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
  .pancake .line-top { position:absolute; width:60%; height:4px; top:20%; left:20%; background:#000; }
  .pancake .line-middle { position:absolute; width:60%; height:4px; top:calc(50% - 2px); left:20%; background:#000; }
  .pancake .line-bottom { position:absolute; width:60%; height:4px; bottom:20%; left:20%; background:#000; }
  .pancake:hover .line-top, .pancake:hover .line-middle, .pancake:hover .line-bottom { background:#cc0000; }

  .pancake.active { box-shadow:none; }
  .pancake.active .line-top { transform:rotate(-45deg); top:28px; width:80%; left:10%; }
  .pancake.active .line-middle { display:none; }
  .pancake.active .line-bottom { transform:rotate(45deg); bottom:28px; width:80%; left:10%; }


/* --------- Hauptnavigation -------------*/ 

  .mainnav { position: relative; margin-top:40px; margin-right:19%; width:100%;}
  .mainnav ul { margin:0; padding:0; list-style:none; }
  .mainnav li { position:relative; }
  .mainnav li a { display:block; text-decoration:none;
    transition:0.5s;
  }

  /*------ 1. Ebene ----------------*/
  .mainnav ul.list1 { position:relative; display:flex; justify-content:flex-end; }
  .mainnav li.level_1 { box-sizing:border-box; display:block; 
  transition: all 0.4s ease-in 0s; /* explorer 10 */
  }
  .mainnav li.level_1 > a { position:relative; z-index:500; font-weight:300; box-sizing:border-box; line-height:20px; padding:20px 25px; color:#FFF; display:block; text-decoration:none; font-size:1.0rem; }
  .mainnav li.level_1:hover > a { color:#cc0000;  }
  .mainnav li.level_1.active > a { color:#cc0000; }
  
  .mainnav li.level_1:hover ul.list2 { height:auto; width:auto; opacity:1; z-index:400;}

  /*------ 2. Ebene ----------------*/
  .mainnav .list2 { box-shadow: 0 10px 20px rgba(0,0,0,0.2); background:rgba(255,255,255,0.95); min-width:350px; height:0; left:0; overflow:hidden; position:absolute; top:60px; opacity:0; z-index:300; box-sizing:border-box;
    transition:1s;
  }

  .mainnav .list2-inner { display:flex; box-sizing:border-box; flex-direction:column; padding:20px 25px; }

  .mainnav li.level_2 { display:block; box-sizing:border-box;
    transition-delay:1s;
  }
  .mainnav li.level_2 > a { font-size:1.0rem; position:relative; padding:5px 0; color:#000; font-weight:300;
    transition:1s;
  }
  .mainnav li.level_2 > a:hover { color:#cc0000; }
  .mainnav li.level_2.active > a { color:#cc0000; }
  
  
  /*------ 3. Ebene ----------------*/
  .mainnav .list3 { display:block; }
  .mainnav li.level_3  { padding-left:20px; padding-bottom:10px; }
  .mainnav li.level_3 a { color:#555; font-size:1rem; line-height:140%; display:flex; position:relative; }
  .mainnav li.level_3 a:hover { color:#cc0000; }
  .mainnav li.level_3.active > a { color:#cc0000; }
  .mainnav li.level_3 a .subpfeil { padding:0 5px; display:block; }


    /*------ 4. Ebene ----------------*/
    .mainnav .list4 { display:block; }
    .mainnav li.level_4  { padding-left:20px; }
    .mainnav li.level_4 a { color:#555; font-size:1rem; line-height:140%; display:flex; position:relative; }
    .mainnav li.level_4 a:hover { color:#cc0000; }
    .mainnav li.level_4.active > a { color:#cc0000; }
    .mainnav li.level_4 a .subpfeil { padding:0 5px; display:block; }