/* Farben
Grün: #006676
Dunkleres Grün: #004551
*/

/* --------- Hauptnavigation -------------*/ 
.navigation { width:100%; padding:0 3%; padding-top:80px; position:absolute; z-index:1000; box-sizing:border-box; }

  /*------ 1. Ebene ----------------*/
  .navigation ul { margin:0; padding:0; list-style:none; position:relative; display:flex; justify-content:space-between; }
  .navigation li { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:block; position:relative; width:22%; background:#006676; }
  .navigation li a {  position:relative; z-index:500; font-weight:400; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; line-height:40px; padding:15px 20px; color:#FFF; display:block; text-decoration:none; font-size:2.4rem; text-transform:uppercase; }
  .navigation li a span.title { position:relative; z-index:3; }
  .navigation li a span.subtitle { position:relative; z-index:3; opacity:0.5; display:block; line-height:24px; padding:40px 0px 5px; text-decoration:none; font-size:1.2rem; text-transform:none; }
  .navigation li.active a { padding-bottom:50px; margin-bottom:-50px; }

  .navigation a:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #006676, #004551);
    transition: opacity 0.5s ease-out;
    z-index: 2;
    opacity: 0;
  }

  .navigation a:hover:after { opacity:1; }
  .navigation li.active a:after { opacity:1; }


  .navpfeil-box { display:block; background:#006676; position:absolute; bottom:-30px; left:calc(50% - 30px); width:60px; height:30px; opacity:0; }
  .navpfeil-box .navpfeil { display:block; position:absolute; width:0; height:0; top:0px; left:13px; border-left:18px solid transparent; border-right:18px solid transparent; border-top:15px solid #76726e; }
  .navigation li.active .navpfeil-box { opacity:1; }