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

/*----------GENERELLE HTML EINSTELLUNGEN FÜR DIE SEITE----------*/

html,body{
	width:100%;
	height:auto;
	margin:0;
	background-image:url(1_BILDER/Hintergrund_Mobil2_dunkel.jpg);
	background-repeat:none;
	background-size:cover;
	background-position:0 0;
	z-index:-1;
	background-attachment:fixed;
}

/*================================================   MENÜ MOBILE ANSICHT   ================================================*/

					.header{/*Bearbeitung des gesamten Top-Bereichs der Seite*/
						width:100%;
						z-index:3; /*Durch den Z-Index wird das Menü, ähnlich wie in PowerPoint Ebenenweise in den Vordergrund gerückt*/
					}

					.header .logo img{/*Ausrichten des Firmenlogos*/
						float:left;
						display:block;
						padding:15px 20px;
						width:180px;
					}

					.header ul{/*Bearbeitung der Menüleiste*/
						margin:0;
						padding:0;
						list-style:none;
						overflow:hidden;
					}

					.header ul a{/* Anpassung der einzelnen Menüpunkte*/
						display:block;
						outline:1px solid gray;
						padding:20px;
						text-decoration:none;
						font-family:'Bebas Neue', cursive;
						color:antiquewhite;
						font-size:20px;
						text-align:center;
					}

					.Menuepunkt{
						color:#bc2121;
					}

					.header ul a:hover, .header ul a:focus{
						color:#bc2121;
						transition: .2s;
					}

					.header .menu{
						background:#575766;
						clear:both;/*both sorgt dafür, dass Logo und Menü untereinander auftauchen*/
						max-height:0;
						transition:max-height .2s ease-out;
						/*Menü wird "ausgeblendet" = Höhe 0, wenn das Hamburgermenü bzw. die Checkbox nicht aktiviert ist,
						durch diese Vorgehensweise wirkt sich das Menü auch nicht auf andere Seiteninhalte aus.
						Das Menü wird eingeblendet, sobald das Menü gedrückt bzw. die Checkbox aktiviert wird*/
					}

					.header .menu-icon{/*Durch diesen Befehl wird der "Hamburger" an den rechten Bildschirmrand ausgerichtet*/
						padding:28px 30px;
						position:relative;
						float:right;
						cursor:pointer;
					}

					.header .menu-icon .nav-icon{/*In diesem Code wird der Hamburger gestylt; Basis wird der mittlere Balken;
						als Basis dient das Lable der Checkbox.*/
						background:black;
						display:block;
						height:3px;
						width:30px;
						position:relative;
						transition:background .2s ease-out;
					}

					.header .menu-icon .nav-icon:before{/*Style des unteren Strichs des Hamburgers*/
						background:black;
						content:"";
						display:block;
						height: 100%;/*height 100% sorgt, dafür, dass der neue Balken die gleiche Höhe hat, wie der Ursprungsbalken --> ohne "before/after"*/
						width:100%;/*width 100% sorgt, dafür, dass der neue Balken die gleiche Breite hat, wie der Ursprungsbalken --> ohne "before/after"*/
						position:absolute;
						transition:all .2s ease-out;
						top:8px;/*der Top-Wert sorgt dafür, dass sich der neue Balken nach oben oder unten verschiebt*/
					}

					.header .menu-icon .nav-icon:after{/*Style des oberen Strichs des Hamburgers*/
						background:black;
						content:"";
						display:block;
						height: 100%;/*height 100% sorgt, dafür, dass der neue Balken die gleiche Höhe hat, wie der Ursprungsbalken --> ohne "before/after"*/
						width:100%;/*width 100% sorgt, dafür, dass der neue Balken die gleiche Breite hat, wie der Ursprungsbalken --> ohne "before/after"*/
						position:absolute;
						transition:all .2s ease-out;
						top:-8px;/*der Top-Wert sorgt dafür, dass sich der neue Balken nach oben oder unten verschiebt*/
					}

					.header .menu-btn{/*Blendet die Checkbox aus, sodass nur das Label stehen bleibt*/
						display:none;
					}

					.header .menu-btn:checked ~.menu{/*Wenn der Menü Button angeklickt ist, dann ändert sich die Höhe des
						gesamten Menüs --> Hier wird das Menü von Höhe 0 im inaktiven Zustand ausgeklappt*/
						max-height:800px;
					}

					.header .menu-btn:checked ~.menu-icon .nav-icon{/*Im aktiven Zustand wird der mittlere Balken des Menüs ausgeblendet*/
						background:transparent;
					}

					.header .menu-btn:checked ~.menu-icon .nav-icon:before{/*Der untere Balken wird um -45 Grad gedreht*/
						transform: rotate(-45deg);
						top:0; /*Die Rotation soll von der Höhe des mittleren Balkens ausgehen. Daher muss der Balken im aktiven Zustand
						wieder auf diese Höhe verschoben werden, von der er ursprünglich kommt*/
					}

					.header .menu-btn:checked ~.menu-icon .nav-icon:after{/*Der obere Balken wird um 45 Grad gedreht*/
						transform: rotate(45deg);
						top:0; /*Die Rotation soll von der Höhe des mittleren Balkens ausgehen. Daher muss der Balken im aktiven Zustand
						wieder auf diese Höhe verschoben werden, von der er ursprünglich kommt*/
					}



/*================================================MAIN================================================*/

main h1{
	text-align:center;
	font-family: scriptorama-markdown-jf, sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#bc2121;
	font-size:47px;
	text-shadow: 2px 2px black;
}

p{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:22px;
	text-align:center
}

.Buttons{
	padding-top:15px;
	padding-bottom:15px;
	width:95%;
	max-width:600px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin-left:auto;
	margin-right:auto;
}

button{
	margin-top:40px;
	background:#bc1212;
	color:antiquewhite;
	width:300px;
	margin-left:20px;
	height:80px;
	font-family: 'Bebas Neue', cursive;
	font-size:22px;
	border: 1px solid #6F0D0D;
	border-radius:5px;
	transition: .5s;
}

button:hover{
	background:#6F0D0D;
	cursor:pointer;
}

img.back{
	padding-top:30px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:80px;
}


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

footer{
	position:fixed;
	bottom:0;
	display:table-cell;
	vertical-align:middle;
	width:100%;
	background-color:#333333;
	text-align:center;
}

footer a{
	display:inline-block;
	margin:10px 10px 10px 10px;
	padding-left:30px;
	font-family: 'Bebas Neue', cursive;
	text-decoration:none;
	color:antiquewhite;
	font-size:14px;
}

footer a:hover{
	color:#bc2121;
}



/*================================================BREAKPOINTS DESKTOP================================================*/


@media(min-width:1050px){
	
/*=====================   HINTERGRUNDBILD DESKTOP ANSICHT   ======================*/
	
	html,body{
			width:100%;
			height:auto;
			margin:0;
			background-image:url(1_BILDER/Hintergrund_Desktop_White.jpg);
			background-repeat:none;
			background-size:cover;
			background-position:0 0;
			background-attachment:fixed;
			z-index:0;
	}
		
	
/*===========================   MENÜ DESKTOP ANSICHT   ===========================*/

	
	.header li{
		float:left;
	}
	
	.header li a{
		padding:20px;
	}
	
	.header .menu{
		clear:none;
		float:right;
		max-height:none;
		background:none;
		padding-right:30px;
	}
	
	.header ul a{
		outline:none;
		color:#3B3B3B;
	}
	
	.header .menu-icon{
		display:none;
	}
	
	.header .logo img{/*Ausrichten des Firmenlogos*/
		float:left;
		width:250px;
	}
	
	.header{
		position:relative;
		padding:1em 15px;
		height:50px;
	}
	

/*================================================ MAIN DEKTOP ================================================*/	
	
	.Buttons{
		padding-top:15px;
		padding-bottom:15px;
		width:95%;
		max-width:600px;
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
		margin-left:auto;
		margin-right:auto;
	}
	
	button{
		margin-top:40px;
		background:#bc1212;
		color:antiquewhite;
		width:200px;
		margin-left:20px;
		height:80px;
		font-family: 'Bebas Neue', cursive;
		font-size:40px;
		border: 1px solid #6F0D0D;
		border-radius:5px;
		transition: .5s;
	}	
}