/* #############################################
									
	Regeln für Layout und Positionierung der
	Strukturierenden Elemente
											   
##############################################*/


header .mod_navigation {  }
header .headercenter .mod_navigation { float: none; }
header .mod_navigation.block { overflow:visible; }

header .mod_navigation ul li { display: inline-block; position:relative; height: auto; line-height: 50px; }
header .mod_navigation ul li ul li { height: auto; line-height: 30px; letter-spacing: 0.05em; }
/*.is-sticky header .mod_navigation ul li { height: auto; line-height: 30px; }*/

/* Layout des DIV's, das das Menü umgibt */
header .mod_navigation {
	z-index: 999;
}

/* Layout und Positionierung der 1. Ebene */
header .mod_navigation ul {
	/*margin: 0 auto;*/
	margin: 0;
	padding: 0px;
	list-style: none;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	width: auto;
}
/* Layout und Positionierung der 2. Ebene */
header .mod_navigation ul ul {
	position: absolute;
	line-height: 30px;
	top: 70px;
	z-index: 999;
	visibility: hidden;	
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	-moz-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	-ms-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	-o-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
}
/*.is-sticky header .mod_navigation ul ul { top: 46px; }*/
header.sticky .mod_navigation ul ul { top: 46px; }
/* Zeiger der Menus 2. Ebene */
header .mod_navigation ul ul:before{ content:"\f0d8"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #d8d8d8; font-size:44px; position: relative; top: 18px; left: 0px; line-height: 0; }

/* Zeiger der Menus 3. Ebene */
header .mod_navigation ul ul ul:before{ content:"\f0d9"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #d8d8d8; font-size:44px; position: relative; top: 44px; left: -15px;}


/* Layout und Positionierung der 3. Ebene */
header .mod_navigation ul ul ul {
	top: -18px;
	left: 104%;
}

/*.is-sticky header .mod_navigation ul ul ul { top: -10px; }*/
header.sticky .mod_navigation ul ul ul { top: -10px; }
/* Layout und Positionierung der 3. Ebene bei links ausklappenden Untermenü */
header .mod_navigation ul ul li.left-flyout ul{
	left: -100%;
	width: 220px;
}
/* Layout und Positionierung der Listenpunkte aller Ebenen */
header .mod_navigation li  {
	float: left;
	position: relative;
	width: auto; /* ACHTUNG: 2 Pos unten muss die Weite auch angepasst werden, +1px */
}
header .headercenter .mod_navigation li  {
	float: none;
	position: relative;
	width: auto; /* ACHTUNG: 2 Pos unten muss die Weite auch angepasst werden, +1px */
}

header .mod_navigation ul.level_2 li.first, header .mod_navigation ul.level_2 li {
	min-width: 260px;
	border-top: 1px solid #d8d8d8;
	background-color: #fff;
	-webkit-box-shadow:0 4px 5px rgba(0,0,0,0.2);  
	-moz-box-shadow:0 4px 5px rgba(0,0,0,0.2);  
	box-shadow:0 4px 5px rgba(0,0,0,0.2);
}

/* der aktive Listenpunkt aller Ebenen wird gehighlightet */
header .mod_navigation strong.active, header .mod_navigation strong.forward {
	color: var(--navigation2) !important;
	font-weight: 300;
}
header .mod_navigation .trail {
	color: var(--navigation2) !important;
	font-weight: 300;
}

header .mod_navigation ul ul li strong.active, header .mod_navigation ul ul li strong.forward {
	/*color: #a30f22 !important;*/
	color: var(--hauptfarbe1) !important;
	font-weight: 400;
}



/* #############################################
									
	Regeln für das Aussehen der Links
											   
##############################################*/

/* Aussehen normaler Links - 1. Ebene */
/*header .mod_navigation span,*/
header .mod_navigation strong,
header .mod_navigation a,
header .mod_navigation a:visited {
	display: block;
	color: #737373; /*var(--navigation2);*/
	text-decoration: none;
	padding: 25px 24px 25px 24px;
	margin: 0 1px 0 1px;
	text-align: center;
	text-transform: normal;
	font-size: 22px;
	transition: all 1.0s ease;
}
header.sticky .mod_navigation strong,
header.sticky .mod_navigation a,
header.sticky .mod_navigation a:visited {
	padding: 0px 18px 0px 18px;
	transition: all 1.0s ease;
}
header .mod_navigation ul ul strong,
header .mod_navigation ul ul a,
header .mod_navigation ul ul a:visited {
	padding: 10px 8px 11px 8px;
	transition: all 1.0s ease;
}
header.sticky .mod_navigation ul ul strong,
header.sticky .mod_navigation ul ul a,
header.sticky .mod_navigation ul ul a:visited {
	padding: 8px 8px 9px 8px;
	transition: all 1.0s ease;
}
/* Aussehen der Links mit Untermenü - 1. Ebene */
header .mod_navigation ul.level_1 li.submenu {
	background-color: transparent;
	background-image: url(arrow-down.gif);
	background-repeat:  no-repeat;
	background-position: top 54% right;
}
/* Aussehen normaler Links - 2. Ebene */
header .mod_navigation ul ul span,
header .mod_navigation ul ul strong,
header .mod_navigation ul ul a,
header .mod_navigation ul ul a:visited {
	color: var(--navigation2);
	text-align: left;
	font-size: 0.95em;
	font-weight: 300;
}
/* Aussehen der Links mit Untermenü - 2. Ebene */
header .mod_navigation ul ul a.submenu,
header .mod_navigation ul ul span.submenu,
header .mod_navigation ul ul strong.submenu,
header .mod_navigation ul ul a.submenu:visited {
	/* background: #fff url(arrow.gif) right center no-repeat; */
	color: var(--navigatio2);
}
/* Aussehen normaler Links - 3. Ebene */
header .mod_navigation ul ul ul a,
header .mod_navigation ul ul ul a:visited {
		color: var(--navigatio3);
	
}


/* #############################################
									
	Regeln für das Aussehen der Hover Effekte
											   
##############################################*/

/* Hover Effekte der Links - 1. Ebene */
header .mod_navigation :hover > a {
	/*background: #fff;*/
	text-decoration: none;
}
/* Hover Effekte der Links mit Untermenü - 1. Ebene */
header .mod_navigation :hover > a.submenu {
	/* background: #efefef url(../../files/jkm/theme/css/arrow-down.gif) center bottom no-repeat; */
}
/* Hover Effekte der Links - 2. Ebene */
header .mod_navigation ul ul :hover > a {
	/* padding-left: 19px !important; */
	background: #c8d5dd;
	transition: all 0.3s ease;
}
/* Hover Effekte der Links mit Untermenü - 2. Ebene */
header .mod_navigation ul ul :hover > a.submenu {
	background: #fff url(../../theme/css/arrow.gif) right center no-repeat;
}

/* Hover Effekte der Links - 3. Ebene */
header .mod_navigation ul ul ul :hover > a {
		
}

/* #############################################
									
	Regeln für die Dropdown Funktion
											   
##############################################*/

header .mod_navigation ul li:hover > ul {
	visibility: visible;
	opacity: 1;	
	-webkit-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	-moz-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	-ms-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	-o-transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	transition: opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
}
header .mod_navigation ul.level_1 a {
display: inline-block;
}
header .mod_navigation ul.level_1 a::before, header .mod_navigation strong.active::before {
content: "";
bottom: 20%;
position: absolute;
width: 100%;
transition: width .4s;
background: none 0;
}
header .mod_navigation ul.level_1 a:hover::before, header .mod_navigation ul.level_1 strong.active::before { 
	background: transparent url("../img/nav_highlight.svg") no-repeat scroll center center;
	height: 10px;
	left: 0%;
}

header .mod_navigation ul.level_2 a {
display: block;
}
header .mod_navigation ul.level_2 a::before {
content: "";
bottom: 0%;
left: 0;
position: absolute;
height: 0;
background: transparent;
width: 0;
}
header .mod_navigation ul.level_2 a:hover::before, header .mod_navigation ul.level_2 strong.active::before { background: none 0; }