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


/* Allgemeines */
html, body {
	min-height: 100%;
	}
body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	color: #A5A5A5;
	font-family: 'CarlitoRegular', Helvetica, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	hyphens: auto;
	word-wrap: break-word;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	}
@font-face {
	 font-family: 'Kalam';
	 src: url('fonts/Kalam/Kalam-Regular.ttf') format('truetype');
}
@font-face {
	 font-family: 'CarlitoRegular';
	 src: url('fonts/carlito/Carlito-Regular.ttf') format('truetype');
	 font-weight: normal;
}
@font-face {
	 font-family: 'CarlitoBold';
	 src: url('fonts/carlito/Carlito-Bold.ttf') format('truetype');
	 font-weight: bold;
}
img {
	border: none;
	transition: 0.5s;
	}	
video  {
	width: 60%; 
	max-width: 1080px; 
	height: auto;
	border: 1px solid #EEE;
}
.broschuere  {
	width: 60%; 
	max-width: 624px; 
	height: auto;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	}
a {
	text-decoration: underline;
	text-underline-offset: 0.3em;
	color: #A5A5A5;
	transition: 0.3s;
}
a:hover {
	text-decoration-color: rgba(119, 119, 119, 0);
	color: #777;
}
/*a:visited {
	text-decoration: none;
}
a:focus {
	text-decoration: none;
}
.active {
	text-decoration: none;
}*/
.wiea {
	transition: 0.3s;
	cursor: pointer;
}
.wiea h3 {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
.wiea:hover h3 {
	text-decoration-color: rgba(119, 119, 119, 0);
	color: #777;
}
h1 {
	font-size: 2.6em;
	font-weight: normal;
}
h2 {
	font-size: 1.4em;
	font-weight: normal;
	margin: 1.6em 0;
}
h3 {
	font-size: 1.1em;
	font-weight: bold;
	margin: 1.6em 0;
}
td {
	vertical-align: top;
}
.zelle1 {
	white-space: nowrap;
}
.zelle2 {
	padding-left: 30px;
}
.einzug_links1 {
	margin:  8px 0 8px 16px;
	text-indent: -16px;
	}
.einzug_links2 {
	margin-left: 24px;
	text-indent: -24px;
	}
.einzug_links3 {
	margin-left: 71px;
	text-indent: -71px;
	line-height: 1.3;
	}
.einzug_links4 {
	margin-left: 106px;
	text-indent: -106px;
	line-height: 1.3;
	}

/* Menü oben */
header {
	flex-shrink: 0;
}
nav {
	width: 100%;
	background-color: #F39100;
	}	
nav ul {
	display: flex;
    justify-content: flex-start;
	align-items: flex-end;
	width: 100%;
	}
nav li {
	display: flex;
	flex-grow: 1;
	justify-content: center; 
	}	
nav a {
	display: flex;
	justify-content: center; 
	width: 100%;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0.8em 0 0.9em 0;
	color: #FFF;
	}
nav a:hover {
	color: #777;
	border-bottom: 3px solid #777;
	}	
nav a.active {
	color: #777;
	border-bottom: 3px solid #777;
	}
nav.breit ul li {
	position: relative;
	}
.logo {
	display: flex;
	justify-content: flex-end;
	padding: 1% 0;
	}
.logo:hover {
	border-bottom: none;
	}
.logo img {
 	max-height: 3em;
	width: auto;
}
.sub {
	display: none;
	position: absolute;
	flex-direction: column;
	top: 100%;
	z-index: 12;
	width: 300px;
	padding: 6% 0 6% 0;
	background-color: #F39100;	
	}	
nav.breit ul li:hover .sub {
	display: flex;
	flex-direction: column;
	}	
.sub li {
	width: 100%;
	}
.sub a {
	padding: 2%;
	font-weight: normal;
	}
.nos_nav {
	display: block; 
	width: 92%; 
	padding: 1% 4%;
	text-align: center; 
	color: #F39100; 
	background-color: #FFF;
}

/* Inhaltsbereich */
main {
	min-height: 600px;
	min-width: 300px;
	flex-grow: 1;
	flex-shrink: 0;
}
.anzeige {
	display: none;
}
#hinweis_js {
	position: absolute;
	bottom: 0;
	margin: 0;
	width: 100%;
	font-size: 1.1em;
	text-align: center;
}
article {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 4% 4% 4%;
}
.flex4321, .flex321, .flex21 {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
}
.bild {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1540px;
	margin: 4% auto;
}
.bild img {
	width: 100%;
	max-width: 1540px;
	height: auto;
}
.flex4321 div {
	width: 22%;
}
.flex321 div {
	width: 30%;
}
.flex21 div {
	width: 48%;
}
.flex4321 div img, .flex321 div img, .flex21 div img {
	width: 100%;
	height: auto;
}
.flex21 div p img.bild_klein {
	width: 60%;
}
.flex321 div a:hover img, .flex21 div a:hover img {
	opacity: 0.4;
}
#center_wenn_breit {
	justify-content: center;
}
#ein_bild {
	position: relative;
}
#ein_bild img {
	width: 100%;
	height: auto;
}
#ueber_ein_bild {
	position: absolute;
	bottom: 1%;
	z-index: 10;
	width: 98%;
	padding: 0 1%;
	color: #FFF;
	background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

/* Popup-Fenster für Stellenanzeige auf Startseite */
/* Version unter der Menüleiste; dafür unbedingt main = relative setzen!
.anzeige {
	position: absolute; top: 0; width: 92%; padding: 0.7% 4%; z-index: 20; background: #FFF; border-top: 3px solid #F39100; border-bottom: 3px solid #F39100; box-shadow: 0 0 5px #A5A5A5;
} */
/* Version zwischen Menüleiste und Slider */
.anzeige {
	position: relative; width: 88%; padding: 1.5% 6%; background: #FFF; border-bottom: 3px solid #F39100; box-shadow: 0 0 5px #A5A5A5;
}
.anzeige h3 {
  	max-width: 84%; margin: 0 auto; text-align: center;
}
.close{
	position: absolute; margin: 0;	top: 1%; right: 2%; cursor: pointer;
}
.close:hover {
	color: #777;	
}

/* Fußteil */
footer {
	flex-shrink: 0;
}
footer nav {
	width: 100%;
	background-color: #FFF;
	border-top: 3px solid #F39100;
	}	
footer nav ul {
	justify-content: flex-end;
	align-items: center;
	}	
footer nav li {
	width: 20%;
	}	
footer nav a {
	padding: 4% 0;
	color: #A5A5A5;
	}
footer nav a:hover {
	border-bottom: none;
	color: #777;
	}	
footer nav a.active {
	border-bottom: none;
	color: #777;
	}	
@media screen and (min-width: 1001px) {		
#nav_button, nav.klein, nav.klein ul, nav.klein a  {
	display: none;
	}		
}	
@media screen and (max-width: 1000px) {
video, .broschuere  {
	width: 80%; 
}
nav.breit {
	display: none;
	}	
#nav_button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1% 4%;
	background-color: #F39100;
	}
#nav_button a{
	display: flex;
	align-items: center;
	}
nav.klein {
	width: 50%;
	position: absolute;
	z-index: 12;
	border-top: none;	
	}
nav.klein ul {
	display: flex;
	flex-direction: column;
	}	
nav.klein ul li {
	width: 100%;
	flex-direction: column;
	}	
nav.klein ul li a {
	display: block;
	margin: 0;
	padding: 1% 4%;
	width: 92%;
	border-right: none;
	text-align: left;
	}
nav.klein ul li ul {
	background-color: #F39100;
	margin-top: 2%;
	}
nav.klein ul li ul li a {
	padding-left: 15%;
	width: 81%;
	font-weight: normal;
	}	
.logo {
	padding: 0;
	}
.flex4321 div, .flex321 div {
	width: 48%;
}
.flex21 div p img.bild_klein {
	width: 80%;
}
footer nav li {
	width: 33.33%;
	}
}
@media screen and (max-width: 700px) {
video, .broschuere {
	width: 100%; 
}
nav.klein {
	width: 100%;
	}
.flex4321 div, .flex321 div, .flex21 div {
	width: 100%;
}
footer ul {
	flex-direction: column;
	}
footer ul li {
	width: 100%;
	text-align: center;
	}
footer nav a {
	padding: 1% 0;
	}
}