@charset "UTF-8";

html, body {
	background-color: var(--hjo-gray);
	color: #000000;
	min-width: 320px;
}

#container-header {background-color: #ffffff;}
#container-header .container-inside {
	align-items: center;
	display: grid;
	grid-template-columns: 220px auto 80px;
	margin: 0 auto;
	max-width: 1200px;
	padding: 15px 0;
}
#container-header .container-logo {
	padding: 10px 0;
	text-align: center;
}
#container-header .container-nav {
	height: 100%; 
	padding-bottom: 15px;
	padding-left: 15px;
}
#container-header .container-toggle {text-align: center;}


/*
* Navigation Main 
*/
#nav-main {height: 100%; display: none;}
#nav-main ul {
	align-items: end;
	display: flex;
	height: 100%;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: 1170px;
	padding: 0 1rem 0 10px; 
}
#nav-main li {display: block;}
#nav-main li.active strong {
	color: var(--hjo-blue); /* Blue 60 */
	font-weight: 600;
}
#nav-main li.active strong::after {
	background-color: var(--hjo-blue); /* Blue 60 */
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 100%;
}
#nav-main li.trail a {
	color: var(--hjo-blue); /* Blue 60 */
	font-weight: 600;
}
#nav-main li.trail a::after {width: 100%;}
#nav-main a, #nav-main strong {
	color: #000000;
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0;
	padding: 0.625rem 0.625rem;
	text-align: center;
}
#nav-main a::after {
	background-color: var(--hjo-blue); /* Blue 60 */
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 0%;
}
#nav-main a:hover::after, 
#nav-main a:focus::after {
	background-color: var(--hjo-red); /* Red 60 */
	width: 100%;
}


/*
* Navigation Toggle
*/
#nav-mmenu:not( .mm-menu ) {display: none;}

#nav-toggle {}
#nav-toggle a {display: block; padding: 3px;}
.toggle-symbol {padding: 11px 10px;}
.toggle-symbol span, 
.toggle-symbol::before, 
.toggle-symbol::after {background-color: #262626; border-radius: 8px; display: block; height: 4px; line-height: 1; width: 1.5rem;}
.toggle-symbol span {margin: 5px auto;}
.toggle-symbol::before, 
.toggle-symbol::after {content: ""; margin: 0 auto;}
.toggle-text {display: none; font-size: 0.875rem; margin-top: -8px; text-align: center;}


/*
* Navigation Sub
*/
#nav-sub {
	background-color: var(--hjo-gray2);
	border-bottom: 1px solid #c3c4c7; /* Gray 10 */
	border-top: 1px solid #c3c4c7; /* Gray 10 */
	height: 100%; 
	display: none;
}
#nav-sub ul {
	align-items: end;
	display: flex;
	height: 100%;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: 1170px;
	padding: 0 1rem 0 10px; 
}
#nav-sub li {display: block;}
#nav-sub li.active strong {
	color: var(--hjo-blue); /* Blue 60 */
	font-weight: 600;
}
#nav-sub li.active strong::after {
	background-color: var(--hjo-blue); /* Blue 60 */
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 100%;
}
#nav-sub a, #nav-sub strong{
	color: #000000;
	display: block;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0;
	padding: 0.625rem 0.625rem;
	text-align: center;
}
#nav-sub a::after {
	background-color: var(--hjo-blue); /* Blue 60 */
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 0%;
}
#nav-sub a:hover::after, 
#nav-sub a:focus::after {
	background-color: var(--hjo-red); /* Red 60 */
	width: 100%;
}


/*
* Seitenbild
*/
#seitenbild {
/*	background-color: var(--hjo-gray5);*/ /* Gray 5 */
	border-bottom: 1px solid var(--hjo-gray10);
/*	padding-top: 15px; */
}
#seitenbild .image_container {
	margin: 0;
	padding: 0 5px;
	padding: 0;
}
#seitenbild .image_container img {
	display: block;
	margin: 0 auto;
	object-fit: contain;
	width: auto;
}


#main > .inside {min-height: 260px;}


/*
* Navigation Servicemenü
*/
#nav-service {
	border-top: 1px solid #c3c4c7; /* Gray 10 */
	height: 100%;
}
#nav-service ul {
	align-items: end;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0 auto;
	max-width: 1170px;
	padding: 0 1rem 0 10px; 
}
#nav-service li {display: block;}
#nav-service li.active strong {
	color: var(--hjo-blue); /* Blue 60 */
	font-weight: 400;
}
#nav-service li {}.active strong::after {
	background-color: var(--hjo-blue); /* Blue 60 */
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 100%;
}
#nav-service a, #nav-service strong{
	color: #000000;
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	padding: 0.625rem 0.625rem;
	text-align: center;
}
#nav-service a::after {
	background-color: var(--hjo-blue); /* Blue 60 */
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 0%;
}
#nav-service a:hover::after, 
#nav-service a:focus::after {
	background-color: var(--hjo-red); /* Red 60 */
	width: 100%;
}


/*
* Fußzeile
*/
#copyright {border-top: 1px solid var(--hjo-gray10); /* Gray 10 */}
#copyright p {font-size: 0.75rem; letter-spacing: 1px; margin: 0; padding: 0.75rem 0.5rem; text-align: center;}


/* 400px = 25em */
@media handheld, screen and (min-width: 25em) {
	#nav-service a, #nav-service strong{font-size: 0.875rem;}
}

/* 480px = 30em */
@media handheld, screen and (min-width: 30em) {
	#seitenbild .image_container img {
/*		max-width: 480px; */
	}
	#nav-service ul {justify-content: flex-end;}
}
/* 576px = 36em */
@media handheld, screen and (min-width: 36em) {}
/* 600px = 37,5em */
@media handheld, screen and (min-width: 37.5em) {}
/* 768px = 48em */
@media handheld, screen and (min-width: 48em) {}
/* 800px = 50em */
@media handheld, screen and (min-width: 50em) {
	#container-header .container-inside {grid-template-columns: 220px auto 3px;}
	#nav-toggle {display: none;}
	#nav-main {display: block;}
	#nav-sub {display: block;}
}
/* 992px = 62em*/
@media handheld, screen and (min-width: 62em) {}
/* 1200px = 75em */
@media handheld, screen and (min-width: 75em) {}
/* 1280px = 80em */
@media handheld, screen and (min-width: 80em) {}
/* 1440px = 90em */
@media handheld, screen and (min-width: 90em) {}


/* EOF */