/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { cursor:pointer; display:none; z-index:3000; position:absolute; width:50px; height:50px; top:55px; right:60px; background:#444; }
  .pancake:hover { background:var(--inhatec-blaue-farbe); }
  .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 { width:80%; position:relative; z-index:1000; display:flex; justify-content:flex-end; }

  .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;
    -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:flex-end; padding-right:5%; }
  .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%; height:100%; line-height:20px; padding:30px 25px 35px; color:#555; display:block; text-decoration:none; font-size:1.0rem; text-transform:uppercase; text-align:center; }
  .mainnav li.level_1:hover > a { background:var(--inhatec-blaue-farbe) !important; color:#FFF;  }
  .mainnav li.level_1.active > a { background:var(--inhatec-blaue-farbe); color:#FFF; }
  
  .mainnav li.level_1:hover ul.list2 { height:auto; width:auto; opacity:1; z-index:400;}
  .mainnav li.level_1 > a .pfeil { width:0px; height:0px; position:absolute; left:calc(50% - 12px); bottom:15px; border-left:12px solid transparent; border-right:12px solid transparent; border-top:6px solid #BBB; }
  .mainnav li.level_1:hover .pfeil { border-top:6px solid #FFF; }
  .mainnav li.level_1.active .pfeil { border-top:6px solid #FFF; }  

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

  .mainnav .list2-inner { padding:30px 0; border-top:10px solid var(--inhatec-blaue-farbe); border-bottom:10px solid var(--inhatec-blaue-farbe); display:flex; box-sizing:border-box; flex-direction:column;  }

  .mainnav li.level_2 { margin: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 { color:var(--inhatec-blaue-farbe); font-size:1rem; line-height:140%; display:flex; position:relative; margin-bottom:10px; padding:5px 0;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }
  .mainnav li.level_2:last-child > a { margin-bottom:0; }
  .mainnav li.level_2 > a:hover { background:rgba(204,204,204,0.8); }
  .mainnav li.level_2.active > a { background:rgba(204,204,204,1); }
  .mainnav li.level_2 > a .subpfeil { padding:0; display:block; width:10px; height:10px; background:var(--inhatec-blaue-farbe); margin:6px 10px 0 5px; text-indent: -9999px; overflow: hidden;}

  
  /*------ 3. Ebene ----------------*/
  .mainnav .list3 { padding:20px 0 0; display:block; }
  .mainnav li.level_3  { }
  .mainnav li.level_3 a { color:#555; font-size:1rem; line-height:140%; display:flex; position:relative; margin-bottom:10px; }
  .mainnav li.level_3 a:hover { background:rgba(204,204,204,0.8); color:#FFF; }
  .mainnav li.level_3.active > a { background:rgba(204,204,204,1); color:#FFF; }
  .mainnav li.level_3 a .subpfeil { padding:0 5px; display:block; }


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



/* Blauton für Moers */
  .moers .pancake:hover { background:var(--moers-blaue-farbe); }

  .moers .mainnav li.level_1:hover > a { background:var(--moers-blaue-farbe) !important; }
  .moers .mainnav li.level_1.active > a { background:var(--moers-blaue-farbe); }
  .moers .mainnav .list2-inner { border-top:10px solid var(--moers-blaue-farbe); border-bottom:10px solid var(--moers-blaue-farbe);  }

  .moers .mainnav li.level_2 > a { color:var(--moers-blaue-farbe); }
  .moers .mainnav li.level_2 > a .subpfeil { background:var(--moers-blaue-farbe); }


  /* Blauton für HZK */
  .hzk .pancake:hover { background:var(--hzk-blaue-farbe); }

  .hzk .mainnav li.level_1:hover > a { background:var(--hzk-blaue-farbe) !important; }
  .hzk .mainnav li.level_1.active > a { background:var(--hzk-blaue-farbe); }
  .hzk .mainnav .list2-inner { border-top:10px solid var(--hzk-blaue-farbe); border-bottom:10px solid var(--hzk-blaue-farbe);  }

  .hzk .mainnav li.level_2 > a { color:var(--hzk-blaue-farbe); }
  .hzk .mainnav li.level_2 > a .subpfeil { background:var(--hzk-blaue-farbe); }