@charset "utf-8";
/* CSS Document */


/* ### Navigation Open/Close Buttons ### */
.nav-field {position: absolute; top: 0; right: 0; background-color: var(--white); box-sizing: border-box; padding: 15px; z-index: 1000;}

.nav-btn {display: block; position: relative; width: 30px; height: 21px; cursor: pointer;}
.nav-btn span {position: relative; display: block; height: 5px; width: 30px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.nav-btn span::before {content: ""; width: 10px; height: 5px; display: block; position: absolute; top: 8px; left: 20px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.nav-btn span::after {content: ""; width: 20px; height: 5px; display: block; position: absolute; top: 16px; left: 10px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.nav-btn span, .nav-btn span::after, .nav-btn span::before {background-color: var(--grey);}
.nav-btn:hover span::before, .nav-btn:hover span::after {width: 30px; left: 0px; -webkit-transition: all .3s ease; transition: all .3s ease;}

.close-field {position: absolute; top: 0; right: 0; box-sizing: border-box; padding: 15px; z-index: 1000;}

.close-btn {display: block; position: relative; width: 24px; height: 24px; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease;}
.close-btn span {position: relative; display: block; height: 5px; width: 26px; transform: rotate(45deg); background-color: var(--white); top: 9px;}
.close-btn span::after {content: ""; width: 26px; height: 5px; transform: rotate(90deg); bottom: 0; right: 0; display: block; background-color: var(--white); position: absolute; top: 0; left: 0;}
.close-btn:hover {transform: rotate(90deg); -webkit-transition: all .3s ease; transition: all .3s ease;}



/* ### DropDown Menu ### */
.menu-alle-main {position: absolute; top: -100%; left: 0; width: 100%; box-sizing: border-box; padding: 40px 0 30px 0; background-color: var(--green); z-index: 900; -webkit-transition: top .5s ease; transition: top .5s ease;}
.menu-alle-inner {width: calc(100% - 80px); margin: 0 auto; position: relative;}
.menu-alle-inner a {-webkit-transition: all .5s ease; transition: all .5s ease;}
.m-a-i {width: 70%;}
.menu-alle-box {width: 25%; max-width: 460px; float: left; position: relative;}
.menu-alle-box h2 {font-size: 22px; text-transform: uppercase; font-weight: 900; color: var(--white); margin: 15px 0 30px 0; width: 80%; position: relative; box-sizing: border-box; padding-left: 45px;}
.menu-alle-box h2::after {content: ""; width: 80%; height: 3px; background-color: var(--white); position: absolute; top: 36px; left: 0;}
.h2-icon {width: 100%; max-width: 30px; position: absolute; left: 0; top: 12px;}
.mab ul {list-style-type: none; margin: 0 0 0 -40px;}
.mab li {font-size: 16px; line-height: 40px;}
.mab li a {color: var(--white); text-decoration: none;}
.mab li a:hover {color: var(--grey); font-weight: bold;}



/* ### Social Media, Rechtliches ### */
.next-nav {position: absolute; right: 0; bottom: 12px; text-align: right; color: var(--white); width: 200px; text-transform: uppercase;}
.fb-nav-btn {width: 100%; max-width: 80px; height: 20px; margin-bottom: 5px; float: left; background-color: var(--white); position: relative; line-height: 20px; box-sizing: border-box; padding: 0 0 0 8px; text-align: left!important; -webkit-transition: all .5s ease; transition: all .5s ease;}
.fb-nav-btn:first-child {margin: 0 10px 5px 30px;}
.next-nav .fb-nav-btn a {color: var(--green)!important; font-weight: bold; font-size: 20px;}
.fb-nav-btn::after {font-family: 'Font Awesome 5 Brands'; content: "\f09a"; font-weight: bold; font-size: 24px; color: var(--white); border-radius: 50%; background-color: var(--green); padding: 1px; position: absolute; top: -6px; right: 4px; width: 30px; height: 30px; text-align: center; line-height: 30px; -webkit-transition: all .5s ease; transition: all .5s ease;}
.fb-nav-btn:hover {background-color: var(--grey);}
.fb-nav-btn:hover::after {color: var(--grey);}
.next-nav a, .agb-btn {font-size: 13px; color: var(--white); text-decoration: none;}
.next-nav a:hover, .agb-btn:hover {color: var(--grey);}
.home-btn {font-size: 30px!important; margin-bottom: 7.5px; display: inline-block;}
.home-btn::before {font-family: 'Font Awesome 5 Free'; content: "\f30a"; font-weight: bold; margin: 10px 10px 0 0; font-size: 20px;}
.agb-btn {cursor: pointer;}

@media screen and (max-width: 1730px){
.navi {margin: 0 auto; display: table;}
}
@media screen and (max-width: 1500px){
.menu-alle-box h2::after {width: 100%;}
.menu-alle-box h2 {width: 90%;}
}
@media screen and (max-width: 1151px){
.menu-alle-main {width: 50%; height: 100%;}
.menu-alle-box {width: 70%; float: none; cursor: pointer;}
.h2-icon {top: -3px;}
.mab {display: none;}
/*.menu-alle-box:hover .mab {display: block;}*/
.menu-alle-inner {position: absolute; height: calc(100% - 70px); top: 40px; left: 40px;}
.close-field {right: -15px;}
}
@media screen and (max-width: 950px){
.m-a-i {width: 90%;}
}
@media screen and (max-width: 775px){
.menu-alle-main {width: 100%;}
}
@media screen and (max-width: 420px){
.menu-alle-box {width: 90%;}
}