/* CSS Document */





@import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap');




*{
	padding:0;
	margin:0;
	box-sizing: border-box;
}


.icon {
	width:60px;
	margin-top:2rem;
	
}



/* =======================================  NAVIGATION  ========================================*/


.navibalken {
	background-color:white;
	width:100%;
	height:100px;
	position:fixed;
	top:0;
	left:0;
	z-index: 1000;
}

.navibalken-innen{
	postition:relative;
	width:70%;
	margin:0 auto;
}

.navibalken-innen img {
	position:absolute;
	margin:0 auto;
}

.navibalken-logo {
	width:80%;
	margin:0 auto;
	border:solid 1px red;
}


.hamburger {
	color:#126893;
	display:block;
	font-size:1.5rem;
	margin: 25px 25px 0 auto;
	height:50px;
	width:50px;
	position: relative;

}

.hamburger .fas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.ulklasse {
	display:grid;
	grid-template-columns:1fr 1fr;
	list-style-type:none;
	grid-gap:2px;
	margin:0 auto;
}

.linkbox {
	border-radius:10px;
	grid-gap:2px;
	margin:0 auto;
}

.hauptnavigation {
	display:grid;
	grid-template-rows:1fr;
	align-items:center;
	height:100%;
}

.navifenster {
	background-color:#1B1B1B;
	width:100%;
	height:100%;
	position:fixed;
	color:grey;
	font-family: 'Roboto', sans-serif;
	opacity:0;
	z-index:1010;
	transition: 1s;
	transform: scale( 0 );
	
}

.navifenster.sichtbar {
	opacity:1;
	transform: scale( 1 );
}

.navilinks {
	display:block;
	height:200px;
	width:200px;
	border:1px solid #6D6D6D;
	border-radius:10px;
	font-family:'Roboto', sans-serif;
	color:#6D6D6D;
	text-align:center;
	text-decoration:none;
	padding-top:45%;
	
}



/*=================================== HOVER NAVI =======================================*/


.linkbox:link,
.linkbox:visited{
	background-color:lightgrey;
}

.linkbox:hover{
	background-color:#126893;
}


.navilinks:link,
.navilinks:visited{
	color:lightgrey;
}


.navilinks:hover{
	color:#212121;
}


/* ================================== INDEX ============================= */

.video{
	width:100%;
	height:100%;
	object-fit:cover;
}

.header-index {
	padding-top:100px;
	background-color:white;
	height:100vh;
	width:100%;
	position:relative;
	z-index: 990;
}

.headerbild-index {
	position:relative;
	height:100%;
}

.headerbild img {
	width:100%;
	height:100%;
	object-fit: contain; /* cover */
}


.textbox-header{
	border-top:1px solid white;
	border-bottom:1px solid white;
	padding:2rem;
	position:absolute;
	bottom:45%;
	left:0;
	right:0;
	color:white;
	font-family:'Roboto Slab', serif;
	font-size:2.5rem;
	margin:0 auto;
	text-align:center;
	width:50%;
}


.h2 {
	color:black;
	font-family:'Roboto Slab', serif;
	font-size:2rem;
	padding-top:2rem;
	padding-bottom:2rem;
}

.h3 {
	color:#126893;
	font-family: 'Roboto Slab', serif;
	font-size:1rem;
	margin-top:1rem;
}


.h4 {
	color:#126893;
	font-family: 'Roboto Slab', serif;
	font-size:1rem;
	margin-top:1rem;
	margin-bottom:1rem;
}

.h5 {
	color:black;
	font-family: 'Roboto Slab', serif;
	font-size:1rem;
}

.hr {
	margin-top:1.5rem;
}

.text-article {
	padding-top:3rem;
}

.vorstand {
	width:70%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	padding:2rem;
	
}

.vorstand-text {
	color:dimgrey;
	font-size:16px;
	font-family: 'Roboto', sans-serif;
	padding-top:2rem;
	padding-right:2rem;
	padding-bottom:4rem;
	padding-left:2rem;
	width:33.3%;
}

.vorstand-text img {
	max-height:400px;
	max-width:250px;
	margin:0 auto;
	width:80%;
}

.vorstand-hr {
  	width:100%;
	margin-top:1rem;
	margin-bottom:1rem;
}


.h2-vorstand {
	color:black;
	font-family:'Roboto Slab', serif;
	font-size:2rem;
	padding-top:2rem;
	padding-bottom:2rem;
	width:100%;
}


.article {
	color:dimgrey;
	font-size:16px;
	font-family: 'Roboto', sans-serif;
	line-height:140%;
	padding:2rem;
}

.section-index {
	width:70%;
	margin: 0 auto;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap:5rem;
}

main {
	position:relative;
}





fa-question-circle {
	color:#2549FF;
	size:20rem;
}




/* ================================== AKTUELL ================================ */



.header-aktuell{
	padding-top:100px;
	background-color:white;
	/*height:80vh;*/
	width:100%;
	position:relative;
	z-index: 990;
}

.headerbild-klein {
	position:relative;
	height:600px;
	width:100%;
	overflow:hidden;
	object-fit:cover;
}

.headerbild-klein img {
	width:100%;
	object-fit:cover;
}

.article-aktuell{
	margin:0 auto;
	width:40%;
	color:dimgrey;
	padding-top:3rem;
	
}


.artikel {
	display:flex;
	padding-top:1rem;
	padding-bottom:3rem;
	border-bottom:1px solid #777777;
;}

.artikel .linke-spalte {
	color:black;
	font-family: 'Roboto Slab', sans-serif;
	width:20%;
}

.artikel .rechte-spalte {
	color:dimgrey;
	font-family: 'Roboto', sans-serif;
	line-height:140%;
	width:100%;
}

.aktuell-text {
	padding-bottom:2rem;
	font-size:1rem;
}


.datumcontainer {
	width:40%;
	margin:0 auto;
}

.datum-anzeige {
	padding-top:4rem;
}

.datum-box {
	margin-top:1rem;
}

.datum-klein{
	color:black;
	font-weight:100;
	font-family: 'Roboto Slab', sans-serif;
	font-size:1.5rem;
}

.datum-gross{
	color:#126893;
	font-family:'Roboto Slab', sans-serif;
	font-weight:700;
	font-size:1.5rem;
}



/* =============================== BEITRITT =============================== */

.article-eingemittet{
	color:dimgrey;
	margin:0 auto;
	width:40%;
	font-family:'Roboto', sans-serif;
	font-size:1rem;
	line-height:140%;
	padding-top:3rem;
	padding-bottom:3rem;
	
}

.select-button{
	width:20%;
	height:2rem;
	border:1px solid lightgrey;
	border-radius:10px;
	background-color:#2A2A;
	color:dimgrey;
	font-family:'Roboto', sans-serif;
	font-size:0.8rem;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.formular{
	margin:0 auto;
	width:40%;
	display:grid;
	grid-template-columns:1fr;
}

.formularfelder{
	width:100%;
	border:1px solid lightgrey;
	border-radius:5px;
	color:dimgrey;
	font-size:0.8rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	padding-left:0.5rem;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.textfeld{
	width:70%;
	border:1px solid lightgrey;
	border-radius:5px;
	color:dimgrey;
	font-size:1rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.submit-button{
	
	width:150px;
	height:2rem;
	border-radius:5px;
	background-color:#126893;
	color:white;
	font-family:'Roboto', sans-serif;
	font-size:0.8rem;
	margin-top:0.7rem;
	margin-bottom:0.7rem;
	
	
}

.mehr-lesen-button{
	cursor:pointer;
	width:150px;
	padding:0.5rem;
	border-radius:5px;
	background-color:#126893;
	color:white;
	font-family:'Roboto', sans-serif;
	font-size:0.8rem;
	text-decoration:none;
	margin-top:0.4rem;
	margin-bottom:0.4rem;
	
}





/* =============================== DOWNLOADS =============================== */

.download-container {
	margin:0 auto;
	display:grid;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	grid-template-columns: 1fr 1fr 1fr;
	font-family:'Roboto', sans-serif;
	width:100%;
}
.downloadIcon {
	height:1.5rem;
}

.download-titel{
	
}

.download-datum{
	margin:0 auto;
}

.download-arrow{
	margin:0 0 0 auto;
}




/* =============================== FOOTER ================================= */



.footer {
	background-color:#242424;
	height:200px;
	width:100%;
	margin-top:4rem;
}




#footertext{
	color:lightgrey;
	font-family:'Roboto', sans-serif;
	font-weight:100;
	font-size:0.8rem;
	text-align:center;
	padding-top:70px;
	
}


#impressum{
	color:grey;
	font-family:'Roboto', sans-serif;
	font-weight:100;
	font-size:0.8rem;
	text-align:center;
	padding-top:1rem;
}

#impressum a {
	color:gray;
	text-decoration:none;
		
}
#impressum a:hover {
	color:#2DA2EB;
}










/* =================================================================================	
								MEDIA QUERIES KLEINER ALS 1200px
================================================================================= */






/* ==================================== Generell =================================== */


@media screen and (max-width:1200px){
	
	
	.icon {
		width:60px;
		margin-top:2rem;

	}

	.text-article {
		padding-top:2rem;
	}
	
	.h2 {
		color:black;
		font-family:'Roboto Slab', serif;
		font-size:1.4rem;
		padding-top:1rem;
		padding-bottom:1rem;
	}

	.headerbild-klein {
		position:relative;
		height:350px;
		width:100%;
		overflow:hidden;
		object-fit:cover;
	}

	.headerbild-klein img {
		width:100%;
		object-fit:cover;
	}
	
	.textbox-header {
		background-color:none;
		border-top:1px solid white;
		border-bottom:1px solid white;
		bottom:50%;
		font-size:2rem;
		width:70%;
	}
	
	.h2-vorstand {
		color:black;
		font-family:'Roboto Slab', serif;
		font-size:1.4rem;
		padding-top:1rem;
		padding-bottom:1rem;
	}
	
	
	
	
	
	
/* ==================================== Index =================================== */
	
	
	
	.vorstand-text {
		color:dimgrey;
		font-size:16px;
		font-family: 'Roboto', sans-serif;
		width:50%;
	}

	.section-index {
		width:70%;
		margin: 0 auto;
		display:grid;
		grid-template-columns:1fr;
		grid-gap:3rem;
	}

	.vorstand {
		width:70%;
		margin:0 auto;
		display:flex;
		flex-wrap:wrap;
	
	}
	
	.vorstand-text img {
		max-height:400px;
		max-width:250px;
		margin:0 auto;
		width:100%;
	}
	
	

	
	
	
	
	
	
/* =================================== Aktuell ================================== */
	
	
	.artikel {
		padding-top:1rem;
		margin:0 auto;
		width:60%;
	}
	
	.datumcontainer {
		width:100%;
		margin:0 auto;
	}
	
	.article-aktuell{
		margin:0 auto;
		width:60%;
		color:dimgrey;
		padding-top:3rem;

	}

	.headerbild-klein {
		position:relative;
		max-height:50%;
		width:100%;
		overflow:hidden;
		object-fit:cover;
	}
	
	
	
	
	
/* =================================== Beitritt ================================== */
	
	
	.article-eingemittet{
		margin:0 auto;
		width:60%;
		font-family:'Roboto', sans-serif;
		font-size:1rem;
		color:dimgrey;
		padding-top:3rem;
		padding-bottom:3rem;

	}
	
	
	.formular{
		margin:0 auto;
		width:60%;
		display:grid;
		grid-template-columns:1fr;
	}
	
	

	
	
/* =================================== Downloads ================================== */
	
	
	.download-container {
		width:60%;
	}
	
	
	
}







	/* =================================================================================	
								MEDIA QUERIES KLEINER ALS 768px
	================================================================================= */


	@media screen and (max-width:768px){
	
	
	
	/* ==================================== Navigation =================================== */
	
		
	
		.navilinks {
			display:block;
			height:150px;
			font-weight:100;
			width:150px;
			
		}
	
		
	
	/* ==================================== generell ================================ */
		
		.hr {
			margin-top:1.5rem;
		}
		
	
	
	
	/* ==================================== Index =================================== */
	
	
	
	
	
	
	/* ====== LOGO ====== */

	.navibalken-innen img {
		width:150px;
	}
	
	/* ================= */
	
	
	
	
	.navibalken-innen{
		postition:relative;
		width:80%;
		margin:0 auto;
	}
	
	.hamburger .fas {
		position: absolute;
		top:25%;
		left:90%;
		transform: translate( -50%, -50% );
		font-size:1.5rem;
	}	

	
	.article {
		color:dimgrey;
		font-size:0.9rem;
		font-family:'Roboto', sans-serif;
		line-height:140%;
		padding:2rem;
	}

	.section-index {
		width:100%;
		margin: 0 auto;
		display:grid;
		grid-template-columns:1fr;
		grid-gap:2rem;
	}
	
	.vorstand {
		width:100%;
		margin:0 auto;
		display:flex;
		flex-wrap:wrap;	
	}
	
	.vorstand-text {
	color:dimgrey;
	font-size:0.9rem;
	font-family: 'Roboto', sans-serif;
	width:100%;
	}

	
	.icon {
		width:40px;
		margin-top:1rem;
	
	}
	
	.logo {
		width:100px;
	}
	
	.headerbild-klein {
		position:relative;
		height:200px;
		overflow:hidden;
		object-fit:cover;
	}
	
	.textbox-header {
		border-top:1px solid white;
		border-bottom:1px solid white;
		bottom:50%;
		font-size:1rem;
		padding:0.9rem;
		width:70%;
	}

	.headerbild-klein img {
		width:100%;
		object-fit:cover;
	}
	
	
/* ==================================== Aktuell =================================== */
	
	
		.datumcontainer {
			width:90%;
			
		}
		
		.aktuell-text {
			font-size:0.9rem;
		}
	
		.article-aktuell {
			padding-top:2rem;
			padding-right:2rem;
			padding-left:2rem;
			width:100%;
		}
	
		.artikel {
			display:block;
			padding-right:1rem;
			padding-left:1rem;
			width:100%;
		}
		
	
	
/* ==================================== Beitritt =================================== */
	
	.article-eingemittet{
		margin:0 auto;
		width:80%;
		font-family:'Roboto', sans-serif;
		font-size:0.9rem;
		color:dimgrey;
		padding-top:3rem;
		padding-bottom:3rem;

	}
	
	
	.formular{
		margin:0 auto;
		width:80%;
		display:grid;
		grid-template-columns:1fr;
	}

	
	
	
	
/* ==================================== Downloads =================================== */
	
	.download-container {
		width:90%;
	}
		
		.download-datum{
			margin-top:0px;
			margin-right:0px;
		}
	
	.h5{
		font-size:0.9rem;
	}
	
	.download-datum {
		font-size:0.9rem;
	}
	
	
}













/* =================================================================================	
								MEDIA QUERIES BIS 360px
================================================================================= */


/* ==================================== Index =================================== */


@media screen and (max-width:360px){
	
	
	
	.section-index {
		width:90%;
		margin: 0 auto;
		display:grid;
		grid-template-columns:1fr;
		grid-gap:3rem;
	}
	
	.article {
		color:dimgrey;
		font-size:0.9rem;
		font-family: 'Roboto', sans-serif;
		line-height:140%;
		padding:2rem;
	}
	
	.icon {
		width:50px;
		margin-top:1rem;

	}
	
	.logo {
		width:100px;
	}
	
	.vorstand {
		width:90%;
		margin:0 auto;
		display:flex;
		flex-wrap:wrap;	
	}
	
	.vorstand-text {
	color:dimgrey;
	font-size:0.9rem;
	font-family: 'Roboto', sans-serif;
	padding-right:1rem;
	padding-left:1rem;
	width:100%;
	}

	
	
	
/* ==================================== Aktuell =================================== */	
	
	
	
	
	

/* ==================================== Beitritt =================================== */
	
	
	.headerbild-klein {
		position:relative;
		height:200px;
		overflow:hidden;
		object-fit:cover;
	}

	
	
}