/* Extra-kleine Geräte (Smartphones, weniger als 768px (col-xs-)) */
/* Kein Media-Query, weil dies der Standard in Bootstrap ist */

/* START BUTTON */
/* Button-Farbe RESPONSIVE Menu über NAVBAR TOGGLE in body.php */
.navbar-toggle { background-color: #71be45; }

/* Button-Farbe RESPONSIVE Menu über BUTTON TOGGLE in body.php */
.button-toggle { border: 0px; background-color: transparent; margin: 0px; padding: 0px 0px 0px 0px; width: 100%; }
.button-toggle:focus { outline:0; }
/* ENDE BUTTON */

.navbar-collapse {
    border-top: 0px solid transparent;
    -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 0px 0 rgba(255, 255, 255, .1); }

/* ZEILENUMBRUCH <LI> RESPONSIVE */
.dropdown-menu > li > a { white-space: normal; }

/* BEI FIXED MENUS - RESPONSIVE SCROLL */
.position { position: relative; z-index: 100; }

.navbar /* KOMPLETTER Menu - Einfasser */ {
  position: relative;
  text-align: left;
  background-color: transparent;
  margin-bottom: 0px;
  border: 0px solid transparent;
  border-radius: 0px; 
  min-height: 0px; }

.navbar-nav { margin: 0px -15px 0px -15px; background-image: url(../design/bg_menu.gif); background-position: top left; background-repeat: repeat-y; }

.dropdown-menu /* Responsive Variante */ {
  display: none;
  min-width: 100%;
  padding: 0px 0px 0px 93px;
  margin: 0px 0px 0px 0px;
  text-align: left;
  list-style: none; }

/* Generelle Schalte links / rechts */
.men-left { float: none; }
.men-right { float: none; }

/* <li> im DropDOWN RESPONSIVE Menu AB MDEPTH2 */
.navbar-nav .open .dropdown-menu > li > a, .megacol > a { padding: 15px 15px 15px 0px; }










/* Kleine Geräte (Tablets, 768px und breiter (col-sm-)) */
@media (min-width: 768px) { 
/* BEI FIXED MENUS - RESPONSIVE SCROLL */
.position { position: absolute; z-index: 100; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+40,ffffff+100&1+0,0.68+40,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.68) 40%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.68) 40%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.68) 40%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ }
.shadow { position: fixed; background:var(--darkblue); height: auto !important; border-bottom: 1px solid #144368; }

.fullwidth { width: 100%; } 
.fullwidth ul:first-child { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; flex-direction: row; padding: 0px; justify-content: space-between; }
.shadow .fullwidth ul:first-child { display: none; }

.mainlogo 			{ display: block; }
.fixedlogo 			{ display: none; }
.shadow .mainlogo 	{ display: none; }
.shadow .fixedlogo 	{ display: block; }

/* Kompletter Menu Einfasser */
.navbar {
	position: relative;
	text-align: left;
	background-color: transparent;
	margin-bottom: 0px;
	border: 0px solid transparent;
	border-radius: 0px; 
	min-height: 0px; }
.navbar-collapse.collapse { 
	text-align: center; /* MENU ZENTRIERT */ 
	overflow: visible !important; 
	margin-bottom: -5px; }
.navbar-nav {
    display: inline-block;
    float: none;
    margin: 0px;
	padding: 0px; 
	background-image: none; }
.navbar-nav.navbar-right:last-child { margin-right: 0px; }

/* Kompletter DropDownMenu Einfasser */
.dropdown-menu {
	display: none;
	min-width: 0;
	padding: 0px;
	margin: 0px;
	text-align: left;
	list-style: none;
	border: 0px;
	border: 0px solid #d8d8d8;
	border-radius: 0px; 
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.06); 
	-moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.06); 
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.06);
	background-color: rgba(255, 255, 255, 0.95); }

/* <li> im DropDownMenu ab MDEPTH2 */
.dropdown-menu > li > a, .megacol > a { padding: 6px 20px 6px 20px; }

/* Default-Formatierung Pfeil im DropDownMenu */
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid; 
    float: right; 
    border-width: 5px 0px 5px 5px;
    border-left-color: #CCCCCC; 
	margin-right: -12px; 
	margin-top: 7px; }
.navbar-left .dropdown-submenu > a:after {
    float: right; 
    border-width: 5px 0px 5px 5px;
    border-left-color: #CCCCCC; 
	margin-right: -12px; 
	margin-top: 7px; }
.navbar-right .dropdown-submenu > a:after {
	float: left; 
    border-width: 5px 5px 5px 0px;
    border-right-color: #CCCCCC; 
	margin-left: -12px; 
	margin-top: 7px; }

/* onHover DropDownMenu bei col-sm, -md, -lg sichtbar */
.navbar ul.nav li:hover > ul.dropdown-menu { display: block; }

/* ZEILENUMBRUCH <LI> Unterschied NORMAL zu MEGAMENU */
.dropdown-menu > li > a { white-space: nowrap; }
.megacol > a { white-space: normal; }

/* Transparenter Platz neben MENU (KOMPLETT) */
.navbar-collapse { padding-right: 0px; padding-left: 0px; }

/* Ausrichtung Text je nach  NAVBAR SCHALTE */
.navbar-right .dropdown-menu { text-align: right; }
.navbar-left .dropdown-menu { text-align: left; }

/* Generelle Schalte links / rechts */
.men-left { float: left !important; }
.men-right { float: right !important; }

/* WICHTIG: Zur Ausrichtung einzelner <li> DropDownMenu */
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    border-top-left-radius: 0; }
.navbar-right .dropdown-submenu .dropdown-menu {
    left: auto;
    right: 100%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px; }
.navbar-left .dropdown-submenu .dropdown-menu {
    left: 100%;
    right: auto;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px; }
	
}





/* IE Browserweiche 1px Versatz */
@media screen\0 {
	.navbar-nav > li > .dropdown-menu.mega {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
}
/* Firefox Browserweiche 1px Versatz */
@-moz-document url-prefix() {
	.navbar-nav > li > .dropdown-menu.mega {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
}










/* Extra-kleine Geräte (Smartphones, weniger als 768px (col-xs-)) */
/* Kein Media-Query, weil dies der Standard in Bootstrap ist */
.megagridtypo { color: #FFFFFF; padding: 15px 20px 15px 20px; font-size: 18px; line-height: 24px; font-weight: 400; text-transform: uppercase; text-align: center; width: 100%; background-color: #a4a4a4; }

.hoch { margin-top: 30px; margin-bottom: 50px; }
.trenner { width: 100%; height: 0px; overflow: hidden; background-color: #FFFFFF; top: 0px; }

.navbar-nav > li > a /* Einzelnes <li> im Menu */ {
    padding-top: 20px;
    padding-bottom: 20px;
	padding-left: 91px;
	padding-right: 0px; }

.navbar li .p::before, 
.navbar li .pa::before 			{ content: ""; position: absolute; width: 22px; height: 22px; background-color:var(--cyan); border-radius: 11px; left: 45px; visibility: hidden; opacity:0; transition:visibility 0.3s linear, opacity 0.3s linear; }
.navbar li .p:hover::before, 
.navbar li .p:focus::before, 
.navbar li .pa::before, 
.navbar li .pa:hover::before 	{ visibility: visible; opacity: 1; }

/* <li> im DropDownMenu ab MDEPTH2 */
.dropdown-menu > li > a, .megacol > a { border-bottom: 1px solid var(--cyan); }
.dropdown-menu > li:last-of-type > a { border-bottom: 0px solid var(--cyan); }

.navbar li .p 			{ font-family:'SpeziaExtended SemiBold',tahoma,arial; color:var(--white); background-color: transparent; font-size: 20px; text-transform: none; font-weight: 600; letter-spacing: -0.02em; }
.navbar li .p:hover, 
.navbar li .p:focus, 
.navbar li .pa, 
.navbar li .pa:hover 	{ font-family:'SpeziaExtended SemiBold',tahoma,arial; color:var(--white); background-color: transparent; font-size: 20px; text-transform: none; font-weight: 600; letter-spacing: -0.02em; }

.navbar li .pp 			{ font-family:'Spezia Regular',tahoma,arial; color:var(--white); background-color: transparent; font-size: 17px; text-transform: none; font-weight: 400; letter-spacing: 0.025em; }
.navbar li .pp:hover, 
.navbar li .pp:focus, 
.navbar li .ppa, 
.navbar li .ppa:hover 	{ font-family:'Spezia Regular',tahoma,arial; color:var(--cyan); background-color: transparent; font-size: 17px; text-transform: none; font-weight: 400; letter-spacing: 0.025em; }





/* Kleine Geräte (Tablets, 768px und breiter (col-sm-)) */
@media (min-width: 768px) { 
#mlleft { width: 305px; float: left; }
#mlmid { width: 110px; float: left; }
#mlright { width: 305px; float: right; }

.megafluid { left: 50%; margin-left: -50%; width: 100%; } 

.megagridtypo { color: #333333; padding: 15px 20px 15px 20px; font-size: 20px; line-height: 26px; font-weight: 400; text-transform: uppercase; text-align: left; background-color: transparent; }
.mega { left: 50%; margin-left: -359px; width: 718px; } /* Menu in col-sm-12 */
/* .mega { left: 50%; margin-left: -418.83333px; width: 718px; } Menu in col-sm-10 */
/* .mega { left: 50%; margin-left: -448.75px; width: 718px; } Menu in col-sm-9 */
/* .mega { left: 50%; margin-left: -478.66666px; width: 718px; } Menu in col-sm-8 */

.hoch { margin-top: 42px; margin-bottom: 0px; }
.trenner { width: 14px; height: 1px; overflow: hidden; background-color: transparent; margin-top: 0px; }
.position { height: 140px; }

.navbar-nav > li > a /* Einzelnes <li> im Menu */ {
    padding-top: 0px;
    padding-bottom: 0px; 
	padding-left: 0px;
	padding-right: 0px; 
	margin-bottom: 15px; }

.navbar li .p::before, 
.navbar li .pa::before 			{ display: none; }

/* <li> im DropDownMenu ab MDEPTH2 */
.dropdown-menu > li > a, .megacol > a { padding: 15px; }
.dropdown-menu > li:last-of-type > a { padding: 15px; }

.navbar li .p 			{ font-family:'SpeziaExtended Bold',tahoma,arial; color:var(--black); font-size: 14px; border-radius: 0px; border: 0px; font-weight: 700; letter-spacing: 0; }
.navbar li .p:hover, 
.navbar li .p:focus, 
.navbar li .pa, 
.navbar li .pa:hover 	{ font-family:'SpeziaExtended Bold',tahoma,arial; color:var(--cyan); font-size: 14px; border-radius: 0px; border: 0px; font-weight: 700; letter-spacing: 0; }

.navbar li .pp 			{ font-family:'Spezia SemiBold',tahoma,arial; color:var(--black); background-color: transparent; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.navbar li .pp:hover, 
.navbar li .pp:focus, 
.navbar li .ppa, 
.navbar li .ppa:hover 	{ font-family:'Spezia SemiBold',tahoma,arial; color:var(--white); background-color:var(--cyan); font-size: 13px; font-weight: 600; letter-spacing: 0; }

#burgernav .navbar li .dropdown-menu 		{ max-height: 0; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; top: 0; text-align: left; overflow: hidden; -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06); background-color: transparent;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#burgernav .navbar li:hover .dropdown-menu, 
#burgernav .navbar li .pa + .dropdown-menu 	{ margin-bottom: 30px; max-height: 200px; }
#burgernav .navbar-nav > li > a 			{ margin-bottom: 0px; padding-top: 15px; padding-bottom: 15px; }
#burgernav .dropdown-menu > li > a, 
#burgernav .dropdown-menu > li:last-of-type > a		{ border: 0px; padding: 10px 30px 10px 5px; }

#burgernav .navbar li .p::before, 
#burgernav .navbar li .pa::before 			{ display: block; content: ""; position: absolute; width: 40px; height: 40px; background-color:var(--cyan); border-radius: 20px; left: -80px; visibility: hidden; opacity:0; transition:visibility 0.3s linear, opacity 0.3s linear; }
#burgernav .navbar li .p:hover::before, 
#burgernav .navbar li .p:focus::before, 
#burgernav .navbar li .pa::before, 
#burgernav .navbar li .pa:hover::before 	{ visibility: visible; opacity: 1; }

#burgernav .navbar li .p 					{ text-align: left; color:var(--white); font-size: 40px; line-height: 1; text-transform: none; }
#burgernav .navbar li .p:hover, 
#burgernav .navbar li .p:focus, 
#burgernav .navbar li .pa, 
#burgernav .navbar li .pa:hover 			{ text-align: left; color:var(--cyan); font-size: 40px; line-height: 1; text-transform: none; }
#burgernav .navbar li .pp 					{ font-family:'Spezia Regular',tahoma,arial; text-align: left; color:var(--white); background-color: transparent; font-weight: 400; font-size: 18px; text-transform: none; }
#burgernav .navbar li .pp:hover, 
#burgernav .navbar li .pp:focus, 
#burgernav .navbar li .ppa, 
#burgernav .navbar li .ppa:hover 			{ font-family:'Spezia Regular',tahoma,arial; text-align: left; color:var(--cyan); background-color: transparent; font-weight: 400; font-size: 18px; text-transform: none; }
}



/* Mittlere Geräte (Desktop-PCs, 992px und breiter (col-md-)) */
@media (min-width: 992px) { 
#mlleft { width: 400px; float: left; }
#mlmid { width: 140px; float: left; }
#mlright { width: 400px; float: right; }

.megagridtypo { padding: 15px 20px 15px 20px; font-size: 24px; line-height: 30px; font-weight: 400; text-transform: uppercase; }
.mega { left: 50%; margin-left: -471px; width: 942px; } /* Menu in col-md-12 */
/* .mega { left: 50%; margin-left: -549.5px; width: 942px; } Menu in col-md-10 */
/* .mega { left: 50%; margin-left: -588.75px; width: 942px; } Menu in col-md-9 */
/* .mega { left: 50%; margin-left: -628px; width: 942px; } Menu in col-md-8 */

.hoch { margin-top: 55px; }
.position { height: 180px; }

.navbar-nav > li > a /* Einzelnes <li> im Menu */ {
    padding-top: 0px;
    padding-bottom: 0px; 
	padding-left: 0px;
	padding-right: 0px; 
	margin-bottom: 15px; }

/* <li> im DropDownMenu ab MDEPTH2 */
.dropdown-menu > li > a, .megacol > a { padding: 17px; }
.dropdown-menu > li:last-of-type > a { padding: 17px; }

.navbar li .p 			{ font-size: 15px; }
.navbar li .p:hover, 
.navbar li .p:focus, 
.navbar li .pa, 
.navbar li .pa:hover 	{ font-size: 15px; }

.navbar li .pp 			{ font-size: 14px; }
.navbar li .pp:hover, 
.navbar li .pp:focus, 
.navbar li .ppa, 
.navbar li .ppa:hover 	{ font-size: 14px; }

#burgernav .navbar-nav > li > a 			{ padding-top: 15px; padding-bottom: 15px; }

#burgernav .navbar li .p::before, 
#burgernav .navbar li .pa::before 			{ width: 46px; height: 46px; border-radius: 23px; left: -100px; }

#burgernav .navbar li .p 					{ font-size: 44px; }
#burgernav .navbar li .p:hover, 
#burgernav .navbar li .p:focus, 
#burgernav .navbar li .pa, 
#burgernav .navbar li .pa:hover 			{ font-size: 44px; }
#burgernav .navbar li .pp 					{ font-size: 20px; }
#burgernav .navbar li .pp:hover, 
#burgernav .navbar li .pp:focus, 
#burgernav .navbar li .ppa, 
#burgernav .navbar li .ppa:hover 			{ font-size: 20px; }
}



/* Große Geräte (Desktop-PCs, 1200px und breiter (col-lg-)) */
@media (min-width: 1200px) { 
#mlleft { width: 495px; float: left; }
#mlmid { width: 150px; float: left; }
#mlright { width: 495px; float: right; }

.megagridtypo { padding: 15px 20px 15px 20px; font-size: 30px; line-height: 36px; font-weight: 400; text-transform: uppercase; }
.mega { left: 50%; margin-left: -570px; width: 1140px; } /* Menu in col-lg-12 */
/* .mega { left: 50%; margin-left: -665px; width: 1140px; } Menu in col-lg-10 */
/* .mega { left: 50%; margin-left: -712.5px; width: 1140px; } Menu in col-lg-9 */
/* .mega { left: 50%; margin-left: -760px; width: 1140px; } Menu in col-lg-8 */

.hoch { margin-top: 64px; }
.position { height: 225px; }

.navbar-nav > li > a /* Einzelnes <li> im Menu */ {
    padding-top: 0px;
    padding-bottom: 0px; 
	padding-left: 0px;
	padding-right: 0px; 
	margin-bottom: 15px; }

/* <li> im DropDownMenu ab MDEPTH2 */
.dropdown-menu > li > a, .megacol > a { padding: 18px; }
.dropdown-menu > li:last-of-type > a { padding: 18px; }

.navbar li .p 			{ font-size: 17px; }
.navbar li .p:hover, 
.navbar li .p:focus, 
.navbar li .pa, 
.navbar li .pa:hover 	{ font-size: 17px; }

.navbar li .pp 			{ font-size: 16px; }
.navbar li .pp:hover, 
.navbar li .pp:focus, 
.navbar li .ppa, 
.navbar li .ppa:hover 	{ font-size: 16px; }

#burgernav .navbar-nav > li > a 			{ padding-top: 20px; padding-bottom: 20px; }

#burgernav .navbar li .p::before, 
#burgernav .navbar li .pa::before 			{ width: 50px; height: 50px; border-radius: 25px; left: -119px; }

#burgernav .navbar li .p 					{ font-size: 52px; }
#burgernav .navbar li .p:hover, 
#burgernav .navbar li .p:focus, 
#burgernav .navbar li .pa, 
#burgernav .navbar li .pa:hover 			{ font-size: 52px; }
#burgernav .navbar li .pp 					{ font-size: 22px; }
#burgernav .navbar li .pp:hover, 
#burgernav .navbar li .pp:focus, 
#burgernav .navbar li .ppa, 
#burgernav .navbar li .ppa:hover 			{ font-size: 22px; }
}



/* Große Geräte (Desktop-PCs, 1200px und breiter (col-lg-)) */
@media (min-width: 1490px) {

/* <li> im DropDownMenu ab MDEPTH2 */
.dropdown-menu > li > a, .megacol > a { padding: 20px; }
.dropdown-menu > li:last-of-type > a { padding: 20px; }

.navbar li .p 			{ font-size: 18px; }
.navbar li .p:hover, 
.navbar li .p:focus, 
.navbar li .pa, 
.navbar li .pa:hover 	{ font-size: 18px; }

.navbar li .pp 			{ font-size: 16px; }
.navbar li .pp:hover, 
.navbar li .pp:focus, 
.navbar li .ppa, 
.navbar li .ppa:hover 	{ font-size: 16px; }

#burgernav .navbar-nav > li > a 			{ padding-top: 25px; padding-bottom: 25px; }

#burgernav .navbar li .p::before, 
#burgernav .navbar li .pa::before 			{ width: 54px; height: 54px; border-radius: 27px; left: -121px; }

#burgernav .navbar li .p 					{ font-size: 56px; }
#burgernav .navbar li .p:hover, 
#burgernav .navbar li .p:focus, 
#burgernav .navbar li .pa, 
#burgernav .navbar li .pa:hover 			{ font-size: 56px; }
#burgernav .navbar li .pp 					{ font-size: 24px; }
#burgernav .navbar li .pp:hover, 
#burgernav .navbar li .pp:focus, 
#burgernav .navbar li .ppa, 
#burgernav .navbar li .ppa:hover 			{ font-size: 24px; }
}