/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { cursor:pointer; display:none; z-index:3000; position:absolute; width:50px; height:50px; top:25px; right:0; border:1px solid #000; }
  .pancake:hover { background:#bbb; }
  .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.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: 100%; position:relative; display:flex; justify-content:flex-end; padding:2% 0 3%; }

  .mainnav { width:100%; position:relative; box-sizing:border-box; display: flex; justify-content: space-between; }
  .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;  }
    .mainnav .tennis-header { display: block; text-transform: uppercase; font-weight: 900; font-size: 5.0em; color:rgba(138,80,71,0.3) /* #dac7c0 */; }
    .mainnav .tennis-navi ul.list1 { justify-content:flex-start; padding-right:5%; }
    .mainnav .ski-header { display: block; text-transform: uppercase; font-weight: 900; font-size: 5.0em; text-align: right; color:rgba(44,98,187,0.3) /* #2c62bb */; }
    .mainnav .ski-navi ul.list1 { justify-content:flex-end; padding-left: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%; line-height:20px; padding:20px 25px; color:#000; display:block; text-decoration:none; font-size:1.0rem; text-transform:uppercase; }
    .mainnav .tennis-navi li.level_1 > a:first-child { padding-left:0; }
    .mainnav .ski-navi li.level_1 > a:first-child { padding-right:0; }
    .mainnav .tennis-navi li.level_1:hover > a { color:rgba(138,80,71,1.0); }
    .mainnav .tennis-navi li.level_1.active > a { color:rgba(138,80,71,1.0); }
    .mainnav .ski-navi li.level_1:hover > a { color:rgba(44,98,187,1.0); }
    .mainnav .ski-navi li.level_1.active > a { color:rgba(44,98,187,1.0); }
  
  .mainnav li.level_1:hover ul.list2 { height:auto; width:auto; opacity:1; z-index:400;}


  /*------ 2. Ebene ----------------*/
  .mainnav .list2 { padding:20px; border-top:15px solid #BBB; 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:60px; opacity:0; z-index:300; box-sizing:border-box;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }
  
  .mainnav li.level_2  { }
  .mainnav li.level_2 a { color:#555; font-size:1rem; line-height:140%; display:flex; position:relative; margin-bottom:10px; }
  .mainnav li.level_2 a:hover { background:rgba(204,204,204,0.8); color:#FFF; }
  .mainnav li.level_2.active > a { background:rgba(204,204,204,1); color:#FFF; }