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

	html,	body,	div, span, h1, h2,	h3,	h4,	h5,	h6,	p, a, em, img, sub, sup, b, u, i, center, ol, ul, li, table, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		transition: all 0.4s ease-out;
		-moz-transition: all 0.4s ease-out;
  	-o-transition: all 0.4s ease-out;
  	-webkit-transition: all 0.4s ease-out;
		scroll-behavior: smooth;
	}
	
	@-ms-viewport { width: device-width; }

	html, body{
		width: 100%;
		height: 100%;
	}

	body {
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		background-color: #ffffff;
		font-size: 14px;
		color: #333;
		margin: 0;
		padding: 0;
		font-weight: 300;
	}

	div { box-sizing: border-box; }
	
	.clear { clear: both; }
	
	p { 
		margin: 0px;
		line-height: 1.8em;
	}
		
	strong { font-weight:700;}

	.vollebreite{ max-width: 100%!important; }


	/* ---------- MEDIA QUERIES ---------- */
	@media screen and (max-width: 768px) {
		.mobilvollebreite{ max-width: 100%!important; }
	}
	/* -------- MEDIA QUERIES ENDE -------- */


	a {
		color: inherit;
		opacity: 1;
		text-decoration: none!important;
	}
	
	a:hover { opacity: 0.8; }
	.logo a:hover { opacity: 1; }


/* =========================== Allgemeine Formatierung ============================== */

/* ===================== Hyphens ===================== */

	body, h1, h2, h3, h4, h5, h6, ul, li{
		-moz-hyphens: manual;
		-o-hyphens: manual;
		-webkit-hyphens: manual;
		-ms-hyphens: manual;
		hyphens: manual;
		line-height: normal;
	}

	h1{
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		font-size: 27px;
		font-weight: 400;
	}

	h2{
		font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
		font-size: 24px;
		letter-spacing: 0.5px;
	}

	a{
		-moz-hyphens: none!important;
		-o-hyphens: none!important;
		-webkit-hyphens: none!important;
		-ms-hyphens: none!important;
		hyphens: none!important;
	}

	.headline_border{
		width: 170px;
		max-width: 70%;
		height: 3px;
		margin-top: 10px;
		margin-bottom: 30px;
		margin-bottom: 40px;
	}
	.headline_border_center{
		width: 170px;
		max-width: 70%;
		height: 3px;
		margin-top: 10px;
		margin-bottom: 30px;
		margin-bottom: 40px;
		margin-left: auto;
		margin-right: auto;
	}
	
/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 988px) {
		h1{
			font-size: 23px!important;
		}
		h2{
			font-size: 20px;
		}
		
		body {
			-moz-hyphens: auto;
			-o-hyphens: auto;
			-webkit-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
		}
	}
	@media screen and (max-width: 768px) {
		h1{
			font-size: 20px!important;
		}
	}
	@media screen and (max-width: 624px) {
		
		h1{
			font-size: 18px!important;
		}
		
	}
	
	@media screen and (max-width: 480px) {}

/* -------- MEDIA QUERIES ENDE -------- */

/* =================== Hyphens ENDE ================== */



/* ==================== Schriften ==================== */

	.uppercase{ text-transform: uppercase; }

/* ================== Schriften ENDE ================== */


/* ===================== anordnen ===================== */

	.center{ text-align: center!important; }
	.alignleft{ text-align: left!important; }
	.alignright{ text-align: right!important; }
	.justify{ text-align: justify; }

	.vcenter{	/* Vertikal zentriert */
		display: flex; 
  	flex-direction: column; 
  	justify-content:center;
	}

	.flexbox {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.left, .right {
		float: left;
		width: 48%;
	}
	.left {	margin-right: 4%; }
	

/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 988px) {}
	@media screen and (max-width: 768px) {}
	@media screen and (max-width: 624px) {
		
		.left, .right {
			float: none;
			width: 100%;
		}
		.left { margin-right: 0%; }
		.right{ margin-top: 20px; }
		
		.mobilcenter {
			text-align: center!important;
		}
		
	}
	@media screen and (max-width: 480px) {}

/* -------- MEDIA QUERIES ENDE -------- */

/* =================== anordnen ENDE ================== */


/* ===================== Abstände ===================== */

	.gap{ padding-top: 10px; }

/* =================== Abstände ENDE ================== */
	

	.ct {
		background-color: none;
		width: 1200px;
		margin: 0px auto;
		max-width: calc(100% - 60px);
	}


/* ====================== Listen ====================== 

	ul { list-style: none; }
	
	ul li::before {
		content: "\25CF";
		color: #000;
		font-weight: bold;
		margin-left: -1.5em;
		position: absolute;
	}
	
	li {
		padding-left: 20px; 
		margin-left: 0px;
		padding-bottom: 6px;
		padding-right: 5px;
	}
		li:hover{
			margin-left: 5px;
			padding-right: 0px;
		}

 ==================== Listen ENDE =================== */


/* ========================= Allgemeine Formatierung Ende ============================ */




/* =========================== Spezifische Formatierung ============================== */


/* ====================== Farben ====================== */

	.white{ color: #FFF; }
	.bgwhite{ background: #FFF; }
	.black{ color: #000; }
	.bgblack{ background: #000; }
	.lightblue{ color: #61808f;}
	.bglightblue{ background: #61808f;}
	.blue{ color: rgba(20,53,70,1); }
	.bgblue{ background: rgba(20,53,70,1); }
	

/* ==================== Farben ENDE =================== */


/* ====================== Buttons ===================== */

	.button1{
		border: 1px solid #333;
		text-align: center;
		padding: 20px;
	}
		.button1:hover{	background: rgb(51,51,51,1);}
	
	.button2{ margin-top: 40px; }
		
		.button2 a{
			width: 210px;
			border: 2px solid #FFF;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-ms-border-radius: 15px;
			-webkit-border-radius: 15px;
			padding: 10px 25px;
			text-transform: uppercase;
		}
		.button2 a:hover{ background: #333; opacity: 1; }

/* =================== Buttons ENDE =================== */




/* platzhalter */
.platzhalter{
	width: 100%;
	margin: 0;
	padding: 0;
	height: 80px;
}
/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 1200px) {}
	@media screen and (max-width: 988px) {}
	/* 1-Spaltig */
	@media screen and (max-width: 750px) {
		.platzhalter{
			height: 50px;
		}
	}
	@media screen and (max-width: 480px) {
		.platzhalter{
			height: 40px;
		}
	}

/* -------- MEDIA QUERIES ENDE -------- */
/* platzhalter ende */





/* === Menü ===*/
.links li.aktiv
{
color: purple;
background-color: green;
font-weight:bold;
} 
/* === Menü Ende ===*/





/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 1200px) {}
	@media screen and (max-width: 988px) {}
	@media screen and (max-width: 750px) {}
	@media screen and (max-width: 480px) {}

/* -------- MEDIA QUERIES ENDE -------- */


.aktiv{
	background: red!important;
}