@charset "UTF-8";


:root {
  --color-background-normal: #ffffff;
  --color-background-gray1: #f3f3f3;
  --color-background-gray2: #efefef;
  --color-text: #262626;
  --color-primary: #00458b;
  --color-secondary: #b81a22;
  
  --color-blue60: #135e96; /* Blue 60 */
	--color-red60: #b32d2e; /* Red 60 */
	--color-gray0: #f6f7f7; /* Gray 0 */
	--color-gray2: #f0f0f1; /* Gray 2 */
	--color-gray5: #dcdcde; /* Gray 5 */
	--color-gray10: #c3c4c7; /* Gray 10 */
	--color-gray20: #a7aaad; /* Gray 20 */
	--color-gray80: #2c3338; /* Gray 80 */
}


html {word-break: break-all;}
body {
  background-color: var(--color-background-gray1);
  color: var(--color-text);
/*  letter-spacing: 0.12em; */
  text-rendering: optimizeLegibility;
  word-spacing: 0.16em;
}


/*
 *
  ## Module
 *
*/

/* ## Container Header */
#container-header {
  background-color: var(--color-background-normal); /* #ffffff */
  padding: 0 15px;
}
#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 Toggle/Hamburger */
#nav-mmenu:not(.mm-menu) {display: none;}
#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: 24px;}
.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 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 16px 0 10px; 
}
#nav-main li {
  display: block;
}
#nav-main li.active strong {
  color: var(--color-blue60); /* Blue 60 */
  font-weight: 600;
}
#nav-main li.active strong::after {
  background-color: var(--color-blue60); /* 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(--color-blue60); /* 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: 10px 10px;
  text-align: center;
}
#nav-main a::after {
  background-color: var(--color-blue60); /* 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(--color-red60); /* Red 60 */
  width: 100%;
}


/* ## Navigation Sub */
#nav-sub {
	background-color: var(--color-gray2);
	border-bottom: 1px solid var(--color-gray10); /* Gray 10 */
	border-top: 1px solid var(--color-gray10); /* 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 16px 0 10px; 
}
#nav-sub li {display: block;}
#nav-sub li.active strong {
	color: var(--color-blue60); /* Blue 60 */
	font-weight: 600;
}
#nav-sub li.active strong::after {
	background-color: var(--color-blue60); /* 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-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 1px;
  line-height: 1.5;
	margin: 0;
	padding: 11px 10px 10px 10px;
	text-align: center;
}
#nav-sub a::after {
	background-color: var(--color-red60); /* Red 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(--color-red60); /* Red 60 */
	width: 100%;
}


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


/* ## Navigation Service */
#nav-service ul {margin: 0; padding: 0;}
#nav-service li {
	border-top: 1px solid var(--color-gray10); /* Gray 10 */
	display: block;
}
#nav-service li.active strong {
	color: var(--color-blue60); /* Blue 60 */
	font-weight: 400;
}
#nav-service a, #nav-service strong{
	color: #000000;
	display: block;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	padding: 10px 10px;
	text-align: center;
}
#nav-service a:hover {color: var(--color-red60); /* Red 60 */}


/* ## Fußzeile */

#copyright {border-top: 1px solid var(--color-gray10); /* Gray 10 */}
#copyright p {font-size: 0.75rem; letter-spacing: 1px; margin: 0 auto; padding: 12px 8px; text-align: center;}



#wrapper {}
#header {}
#container {}
#main .inside {min-height: 260px;}
#footer {}



/*
 *
  ## Media-Queries
 *
*/

/* 400px = 25em */
@media handheld, screen and (min-width: 25em) {
  #nav-service {
    border-top: 1px solid var(--color-gray10); /* 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 16px 0 10px; 
  }
  #nav-service li {
    border-top: 0px solid var(--color-gray10); /* Gray 10 */
  }
  #nav-service li.active strong::after {
    background-color: var(--color-blue60); /* 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::after {
    background-color: var(--color-red60); /* Red 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 {
    color: #000000;
  }
  #nav-service a:hover::after, #nav-service a:focus::after {
    background-color: var(--color-red60); /* Red 60 */
    width: 100%;
  }
}

/* 480px = 30em */
@media handheld, screen and (min-width: 30em) {}

/* 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 */