/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { z-index:400; display:none; cursor:pointer; width:50px; height:50px; background:#9d1327; position:relative; }
  .pancake:hover { }

  .pancake .line-top { position:absolute; width:30px; height:2px; top:12px; left:10px; background:#FFF; }
  .pancake .line-middle { position:absolute; width:30px; height:2px; top:24px; left:10px; background:#FFF; }
  .pancake .line-bottom { position:absolute; width:30px; height:2px; bottom:12px; left:10px; background:#FFF; }

  .pancake.active .line-top { transform:rotate(-45deg); top:24px; }
  .pancake.active .line-middle { display:none; }
  .pancake.active .line-bottom { transform:rotate(45deg); bottom:24px; }

  .navicloser { display:none; z-index:210; position:absolute; top:0; left:0; width:100%; height:100%; }
  .navicloser.active { display:block; }
  .navicloser:hover { cursor:pointer; }


/* --------- Hauptnavigation -------------*/ 
  .mainnav { z-index:200; position:relative; width:100%; padding:0 4% 0 6%; }
  .mainnav ul { margin:0; padding:0; list-style:none; display:flex; }
  .mainnav li { }
  .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 li.level_1 { padding:0; 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 { z-index:300; position:relative; white-space:nowrap; position:relative; font-weight:300; box-sizing:border-box; width:100%; padding:30px 20px 10px; line-height:40px; color:#FFF; display:block; text-decoration:none; font-weight:700; }
  .mainnav li.level_1:hover > a { color:#9d1327; }
  .mainnav li.level_1.active > a { color:#9d1327; background:rgba(255,255,255,1.0); }
  .mainnav li.level_1 .text { position:relative; z-index:200; }
  .mainnav li.level_1 .verlauf { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:100;
	background: rgba(255,255,255,0.5);
	background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.74) 47%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.5)), color-stop(47%, rgba(246,246,246,0.74)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.74) 47%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.74) 47%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.74) 47%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.74) 47%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
  }
  .mainnav li.level_1:hover .verlauf { opacity:1; }
  
  .mainnav li.level_1:hover ul.list2 { height:auto; opacity:1; z-index:400;} 


  /*------ 2. Ebene ----------------*/
  .mainnav .list2 { z-index:200; display:flex; background:linear-gradient(-45deg,transparent 20px,#FFF 0) top left; white-space:normal; width:80%; padding:20px 20px 20px 6%; height:0; left:0; overflow:hidden; position:absolute; top:80px; opacity:0; box-sizing:border-box;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }

  .mainnav li.level_2 { margin:5px 0; display:block; box-sizing:border-box; padding:0 20px; width:22%; margin-right:3%
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -webkit-transition-delay:1s;
    transition-delay:1s;
  }
  .mainnav li.level_2:last-child { }
  .mainnav li.level_2 > a { text-transform:inherit; font-size:1.2rem; position:relative; display:block; padding:5px 0; color:#9d1327; font-weight:700; }
  .mainnav li.level_2 > a:hover { font-weight:bold; color:#000; }
  .mainnav li.level_2.active > a { font-weight:bold; color:#000; }


/*------ 3. Ebene ----------------*/
  .mainnav .list3 { display:flex; flex-direction:column; box-sizing:border-box;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }

  .mainnav li.level_3 { margin:5px 0; 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_3:last-child { }
  .mainnav li.level_3 > a { text-transform:inherit; font-size:1.0rem; position:relative; display:block; line-height:120%; color:#9d1327; font-weight:300; }
  .mainnav li.level_3 > a:hover { font-weight:bold; color:#000; }
  .mainnav li.level_3.active > a { font-weight:bold; color:#000; }
