/* CSS */
/*Hintergrundfarbe Navigation oben nur mobil*/
.topnavi .container {
     /*background-color:#1A4267;*/
	border-bottom: 1px solid #fff;
	box-shadow: 0 3px 3px rgba(0,0,0,0.74);
}
/*Hintergrundfarbe hinter den Button nur mobil
 .topnavi__lvl--first {
     background-color:#fafafa;
}*/
/*normal Hintergrund 1. Ebene nur mobil*/
 /*.topnavi__link--first {
     background-color:rgba(255,255,255,0.87);
}*/
/*normal Hintergrund ab 2. Ebene mobil & Dektop*/
 .topnavi__link--sub {
     /*background-color: rgba(255,255,255,0.92);*/
	 box-shadow: 0 5px 5px rgba(0,0,0,0.25);
}
/*hover 1. Ebene nur mobil*/
 /*.topnavi__link--first:hover {
     background-color:rgba(191,193,193,0.90);
}*/
/*hover 2. Ebene nur mobil*/
/* .topnavi__link--sub:hover {
	 background-color:rgba(255,255,255,1.00);
}*/
/*Aktiv Hintergrund nur mobil*/
/* .topnavi__link--active {
     background-color:#fff;
}*/
/*Border unten 1. Ebene nur mobil*/
 .topnavi__lvl--first > .topnavi__item {
     border-bottom: 1px solid #fff;
}
/*Border unten 2. Ebene nur mobil */
 .topnavi__lvl--first .topnavi__item li {
     border-bottom: 1px solid #fff;
}
 @media only screen and (min-width: 768px) {
     /*Hintergrund ganze Breite nur Desktop*/
	 /*.topnavi {
        background-color:rgba(255,255,255,0.90);
		/*border-bottom: 1px solid #1A4267;*/  /*###### Ausgelagert #####
    }*/
    /*Hintergrund nur die Breite der Navigation nur Desktop*/
     .topnavi__lvl--first {
        background-color: transparent;
    }
    /*Hintergrundfarbe Navi 1. Ebene nur Desktop*/
     .topnavi__link--first {
         background-color: transparent;
    }
    /*hover nur 1. Ebene nur Desktop */
     .topnavi__link--first:hover {
         background-color: transparent;
    }
    /*Aktiv Hintergrund alle Ebenen nur Desktop */
     .topnavi__link--active {
         background-color:transparent;
    }
      .topnavi__item .topnavi__item .topnavi__link--active {
         background-color:#C7C7C7;
    }
	.firstsubmenue  {
         background-color:rgba(148,230,247,0.90);
    }
    /*ist ausgeblendet für Desktop*/
     #toggle-menu {
         border-bottom: 0px solid transparent;
    }
    /*Border oben bei Sub-Navigation*/
     .topnavi__lvl--sub {
         border-top: 10px solid #00f;
    }
    /*Border unten 1. Ebene Desktop*/
     .topnavi__lvl--first > .topnavi__item {
         border-bottom: 0px solid transparent;
    }
}
/* ### Symbol Navigation mobil ### */
/*x für Navi Mobil*/
 .topnavi .bar1, .topnavi .bar2, .topnavi .bar3 {
     background: #666;
}
/*x für Navi Mobil wenn geöffnet*/
 .topnavi .change .bar1, .topnavi .change .bar3 {
     background: #333;
}
/* ######### Schriftfarben ########## */
/*Schrift normal*/
 /*.topnavi__link--first, .topnavi__link--sub, .topnavi__link--sub, .topnavi__item {
    color:#fff;
}*/
/*Schrift activ*/
 /*.topnavi__link--active {
    color:#FF830E;
}*/
/*Schrift hover*/
 /*.topnavi__link--first:hover, .topnavi__link--sub:hover {
    color:#FF830E;
}*/

 .topnavi {
    text-shadow: rgba(50,50,50,0.45) 1px 1px 3px;
}
/* ### MENU ARROWS ### */
 .topnavi__arrow {
     border-right: 6px solid transparent;
     border-left: 6px solid transparent;
     border-top: 6px solid #fff;
     display: inline-block;
     vertical-align: middle;
     height: 0;
     width: 0;
}
 .topnavi__arrow--sub {
     border-top: 6px solid #fff;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     display: inline-block;
     vertical-align: middle;
     height: 0;
     width: 0;
}
 @media (min-width: 768px) {
     .topnavi__arrow--sub {
         border-right: none;
         border-bottom: 6px solid transparent;
         border-top: 6px solid transparent;
         border-left: 6px solid #fff;
    }
}
/*ausblenden 1. Box für mobil*/
 .topnavi label .topnavi__label {
     background-color: transparent;
}
 .container .topnavi__arrow {
    border-top: 6px solid transparent;
}
 .container .topnavi__arrow--sub {
    border-top: 6px solid transparent;
}
/*korrektur position höhe 2. & 3. Ebene für Desktop*/
 .topnavi__lvl--sub .topnavi__item:first-child {
    margin-top: 1px;
}
 .topnavi__lvl--sub li ul {
    margin-top: -1px;
}
 @media (min-width: 768px) {
     .topnavi {
        border-bottom: solid 1px #fff;
         display:flex;
         align-items: center;
         justify-content: center;
		 box-shadow: 0 5px 5px rgba(0,0,0,0.15);
         max-width: 1400px;
         margin: 0 auto;
    }
     .topnavi__lvl--sub {
        margin-top: 1px;
    }
}
/*#### menü ###*/
 #toggle-menu {
     display: block;
     position: relative;
}
/* MENU ARROWS */
 .topnavi__arrow {
     border-right: 6px solid transparent;
     border-left: 6px solid transparent;
     display: inline-block;
     vertical-align: middle;
     height: 0;
     width: 0;
}
 .topnavi__arrow--sub {
     display: inline-block;
     vertical-align: middle;
     height: 0;
     width: 0;
}
 @media (min-width: 768px) {
     .topnavi__arrow--sub {
         border-right: none;
         border-left: 6px solid /*#39500d*/;
    }
}
/* MOBILE VIEW */
 .topnavi__lvl--first::after {
     clear: both;
     content: "";
     display: table;
}
 .topnavi__lvl--first, .topnavi__lvl--sub {
     margin: 0;
     padding: 0;
}
 .topnavi__lvl--first, .topnavi input[type="checkbox"] {
     display: none;
}
 #toggle:checked + .topnavi__lvl--first, .topnavi input[type="checkbox"]:checked + .topnavi__lvl--sub {
     display: block;
}
 .topnavi__item {
     color: #fff;
     display: block;
     position: relative;
}
 .topnavi__item a {
     display: block;
     position: relative;
     text-decoration: none;
}
 .topnavi__item a:hover, .topnavi__item a:focus {
     text-decoration: none;
}
 .topnavi__link--first {
     padding: 0.75em 1em;
     padding-right: 42px;
}
 .topnavi__lvl--sub {
     display: none;
     padding-left: 1em;
}
 .topnavi__link--sub {
     padding: 0.55em 0.70em;
     padding-right: 42px;
}
 .topnavi__link--active {
     padding: 0.75em 1em;
     padding-right: 42px;
}
 ul span.topnavi__label {
     display: none;
}
/* DESKTOP VIEW */
 @media only screen and (min-width: 768px) {
     #toggle-menu/*, .topnavi input[type="checkbox"]:checked + .topnavi__lvl--sub*/ {
         display: none;
    }
     .topnavi__lvl--first/*, .topnavi__item:hover > input[type="checkbox"] + .topnavi__lvl--sub */{
         display: block;
    } 
     .topnavi__item {
         float: left;
    }
     .topnavi__link--first {
         padding: 0.75em 0.70em;
         padding-right: 20px;
    }
     .topnavi__lvl--sub {
         display: none;
         margin: 0;
         padding: 0;
         position: absolute;
         top: 100%;
         left: 0;
         width: 10em;
         z-index: 3000;
    }
     .topnavi__lvl--sub .topnavi__item {
         float: none;
    }
     .topnavi__lvl--sub .topnavi__lvl--sub {
         top: 0;
         left: 100%;
    }
}
/* LABELS */
 .topnavi__label:before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
}
 .topnavi__label {
     height: 100%;
     padding: 0 .2em;
     position: absolute;
     cursor: pointer;
     right: 0;
     top: 0;
}
 .topnavi__lvl--sub .topnavi__item:last-child {
     border-width: 0;
}
 .topnavi__item--header {
     letter-spacing: 0.2em;
     text-transform: uppercase;
}
 .topnavi__item a {
     transition: all .5s ease-in-out;
     -webkit-transition: all .5s ease-in-out;
}
 @media only screen and (min-width: 768px) {
     .topnavi__item {
         border-width: 0 1px 0 0;
    }
     .topnavi__lvl--sub {
         border-width: 0;
    }
     .topnavi__lvl--sub .topnavi__item {
         border-width: 0 0 1px;
    }
}
/* ############# Navigation Symbol Mobil ############### */
 .topnavi .container {
     padding: 0.75em 25px;
     cursor: pointer;
}
 .topnavi .bar1, .topnavi .bar2, .topnavi .bar3 {
     display: block;
     width: 33px;
     height: 4px;
     margin-bottom: 5px;
     position: relative;
     background: #FFF;
     border-radius: 3px;
     z-index: 1;
     transform-origin: 4px 0px;
     transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}
 .topnavi .change .bar1 {
     -webkit-transform: rotate(45deg) translate(0, -2px);
     transform: rotate(45deg) translate(0, -2px);
     background: #fff;
}
 .topnavi .change .bar2 {
    opacity: 0;
}
 .topnavi .change .bar3 {
     -webkit-transform: rotate(-45deg) translate(0, -2px);
     transform: rotate(-45deg) translate(0, -2px);
     background: #fff;
}
 .navi-wrap {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 500;
}
/*### Langsames schließen der Navigation ###*/
 .topnavi__item > input[type="checkbox"] + .topnavi__lvl--sub {
    display: none;
    opacity: 0;
    visibility: hidden;
	-webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
    }
.topnavi__item:hover > input[type="checkbox"] + .topnavi__lvl--sub {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
    }
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}